/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CONTACT — refonte du 2026-10-20, charte de l'accueil.
   Ne contient que ce qui est propre à la page : héros avec formulaire, bandeau de chiffres, grille des pôles, « autres demandes ».
   Boutons (.btn-*), en-tête et pied de page viennent de header.css / footer.js ; tokens de global.css.
   L'ancienne version (reset, tokens et formulaires par profil) est dans _archive/avant-refonte-contact/.
   ═══════════════════════════════════════════════════════════════════════════ */

.ct-wrap{max-width:1280px;margin:0 auto;padding:0 2.5rem}

/* ── HÉROS : photo de l'accueil, titre à gauche, formulaire à droite ──
   EXCEPTION à la hauteur commune des héros (869 px, header.css) : la carte du formulaire fait ≈ 700 px ; le héros reste à 869 px au minimum
   et s'allonge si le formulaire est plus haut (même démarche que l'accueil). */
.hero-contact{
  background-color:#bc9f89;   /* repli pendant le chargement : teinte du mur de la photo */
  background-image:url('../images/home2-hero.jpg');
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
}
body.nav-overlay section.hero-contact,body.nav-solid section.hero-contact{padding-top:150px;padding-bottom:72px;height:auto;min-height:869px}
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:64px;align-items:start}
.hero-contact h1{max-width:900px;margin-bottom:24px}
.hero-contact h1 em{font-style:normal;font-weight:400;color:var(--pro,#993d4a)}
.hero-contact .hero-sub{max-width:560px;font-size:var(--ty-h3-size);line-height:1.5;margin-bottom:40px}
.ct-intro{padding-top:20px}

/* coordonnées directes */
.ct-info{list-style:none;display:flex;flex-direction:column;gap:18px;margin:0;padding:0;color:#fff}
.ct-info li{display:flex;align-items:flex-start;gap:14px;font-size:var(--ty-h4-size);line-height:1.5}
.ct-info svg{width:26px;height:26px;flex-shrink:0;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-info a{color:#fff;font-weight:600;text-decoration:none}
.ct-info a:hover{text-decoration:underline;text-underline-offset:4px}
.ct-info small{display:block;font-size:var(--ty-xs);font-weight:300;opacity:.9;margin-top:2px}

/* bouton principal : lie-de-vin comme sur l'accueil (le .btn-teal est lavande par défaut) */
.hero-contact .btn-teal{background:var(--pro,#993d4a);color:#fff}
.hero-contact .btn-teal:hover,.hero-contact .btn-teal:focus-visible{background:var(--pro,#993d4a);color:var(--pro,#993d4a);outline:1.5px solid var(--pro,#993d4a);outline-offset:-1.5px;box-shadow:0 6px 20px color-mix(in srgb,var(--pro,#993d4a) 35%,transparent)}

/* ── CARTE DU FORMULAIRE ── */
.ct-card{background:#fff;border-radius:24px;padding:36px;box-shadow:0 24px 60px rgba(28,28,54,.28);color:var(--navy,#1c1c36)}
.ct-card h2{font-size:26px;font-weight:700;line-height:1.3;color:var(--navy,#1c1c36);margin:0 0 20px}
.ct-form{display:flex;flex-direction:column;gap:20px}
.ct-fields{display:flex;flex-direction:column;gap:20px}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ct-full{grid-column:1 / -1}
.ct-fld{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:600;line-height:1.3;color:var(--navy,#1c1c36)}
.ct-fld em{font-style:normal;font-weight:300;color:var(--text2,#4A6785)}
.ct-fld b{color:var(--pro,#993d4a)}
.ct-fld input,.ct-fld select,.ct-fld textarea{font-family:inherit;font-size:16px;font-weight:400;line-height:1.4;color:var(--navy,#1c1c36);height:52px;padding:0 16px;border:1px solid #cfc7c1;border-radius:10px;background:#fff;width:100%}
.ct-fld textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.ct-fld input::placeholder,.ct-fld textarea::placeholder{color:#8a8794}
.ct-fld input:hover,.ct-fld select:hover,.ct-fld textarea:hover{border-color:var(--navy,#1c1c36)}
.ct-fld input:focus-visible,.ct-fld select:focus-visible,.ct-fld textarea:focus-visible,.ct-consent input:focus-visible{outline:3px solid var(--navy,#1c1c36);outline-offset:2px}
.ct-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:300;line-height:1.6;color:var(--text2,#4A6785)}
.ct-consent input{margin-top:3px;width:20px;height:20px;flex-shrink:0;accent-color:var(--pro,#993d4a)}
.ct-consent a{color:var(--navy,#1c1c36);text-decoration:underline}
.ct-consent b{color:var(--pro,#993d4a);font-weight:400}
.ct-submit{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ct-note{font-size:13px;font-weight:300;color:var(--text2,#4A6785);margin:0}

/* panneaux : sinistre (renvoi vers l'espace client) et confirmation d'envoi */
.ct-panel{background:var(--ct-greige,#efe9e5);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ct-panel-title{font-size:var(--ty-lead);font-weight:700;line-height:1.3;color:var(--navy,#1c1c36)}
.ct-panel p{font-size:var(--ty-body);font-weight:300;line-height:1.6;margin:0}
.ct-sent{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:24px 0}
.ct-sent p{font-size:var(--ty-lead);font-weight:300;line-height:1.6;margin:0}
.ct-sent-ico{width:48px;height:48px;border-radius:50%;background:var(--pro,#993d4a);color:#fff;display:flex;align-items:center;justify-content:center}
.ct-sent-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none !important}

/* ── BANDEAU DE CHIFFRES (même bandeau lie-de-vin que l'accueil) ── */
.ct-stats{background:var(--pro,#993d4a);color:#fff;padding:44px 0}
.ct-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ct-stat-num{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-1px}
.ct-stat-lbl{font-size:var(--ty-xs);font-weight:500;text-transform:uppercase;letter-spacing:.4px;margin-top:8px}

/* ── SECTIONS ── */
.ct-sec{padding:88px 0 96px}
.ct-sec-greige{background:var(--ct-greige,#efe9e5)}
.ct-kicker{font-size:var(--ty-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pro,#993d4a)}
.ct-title{font-size:var(--ty-h2-size);font-weight:800;line-height:1.15;color:var(--navy,#1c1c36);margin:10px 0 0}
.ct-desc{font-size:var(--ty-lead);font-weight:300;line-height:1.6;max-width:640px;margin:12px 0 0}

/* ── UN RÉFÉRENT PRÈS DE CHEZ VOUS : grille des pôles (source unique : CartePoles.POLES, js/carte-poles.js) ── */
.ct-poles-head{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.ct-cp{width:280px;max-width:100%}
.ct-cp-note{font-size:14px;font-weight:300;line-height:1.5;color:var(--text2,#4A6785);margin:8px 0 0;min-height:21px}
.ct-pole-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ct-pole{position:relative;background:#fff;border:2px solid transparent;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:6px;transition:border-color .25s,box-shadow .25s}
.ct-pole.on{border-color:var(--pro,#993d4a);box-shadow:0 14px 34px rgba(153,61,74,.18)}
.ct-pole-mine{display:none;position:absolute;top:18px;right:18px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:6px 10px;border-radius:100px;background:var(--pro,#993d4a);color:#fff}
.ct-pole.on .ct-pole-mine{display:block}
.ct-pole-meta{font-size:14px;font-weight:600;color:var(--pro,#993d4a)}
.ct-pole-city{font-size:var(--ty-h3-size);font-weight:700;line-height:1.2;color:var(--navy,#1c1c36)}
.ct-pole-addr{font-size:var(--ty-body);font-weight:300;line-height:1.5}
.ct-pole-tel{font-size:var(--ty-body);font-weight:600;margin-top:6px;color:var(--navy,#1c1c36)}
a.ct-pole-tel:hover{text-decoration:underline;text-underline-offset:4px}

/* ── UNE AUTRE DEMANDE ? ── */
.ct-others{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.ct-other{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;background:var(--ct-greige,#efe9e5);color:var(--navy,#1c1c36);transition:transform .25s,box-shadow .25s}
.ct-other:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,28,54,.12)}
.ct-other:focus-visible{outline:3px solid var(--navy,#1c1c36);outline-offset:3px}
.ct-other svg{width:40px;height:40px;fill:none;stroke:var(--navy,#1c1c36);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-other-title{font-size:var(--ty-h4-size);font-weight:700;line-height:1.3}
.ct-other-txt{font-size:var(--ty-body);font-weight:300;line-height:1.6}
.ct-other-go{font-size:var(--ty-body);font-weight:600;margin-top:auto}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .ct-hero-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:960px){
  .ct-pole-grid,.ct-others{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .ct-wrap{padding:0 1.25rem}
  body.nav-overlay section.hero-contact,body.nav-solid section.hero-contact{padding-top:124px;padding-bottom:56px}
  .hero-contact{background-image:linear-gradient(rgba(22,22,44,.4),rgba(22,22,44,.4)),url('../images/home2-hero.jpg')}   /* voile : même raison que l'accueil (home2.css) */
  .hero-contact h1 em{color:color-mix(in srgb,var(--pro,#993d4a) 30%,#fff)}
  .ct-card{padding:24px}
  .ct-submit .btn-teal{width:100%;justify-content:center}
  .ct-row,.ct-stats-grid,.ct-pole-grid,.ct-others{grid-template-columns:1fr}
  .ct-sec{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){.ct-pole,.ct-other{transition:none}.ct-other:hover{transform:none}}