/* ===== Contact page-specific ===== */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:start;margin-top:var(--space-4)}
  /* min-width:0 — la largeur minimale par defaut d'un element de grille est
     min-content. Sans cela, l'adresse e-mail (38 caracteres insecables) fixait
     un plancher de 407 px et faisait deborder tout le document a 360 px. */
  .contact-grid>*{min-width:0}

  .form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
  .form-card h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);color:var(--navy);margin-bottom:var(--space-2)}
  .form-card .sub{font-size:var(--text-sm);color:var(--neutral-600);margin-bottom:var(--space-8)}
  /* .form-rows (grille des champs) a migré vers site.css : le formulaire du
     cta-band s'affiche sur TOUTES les pages, pas seulement /contact/, donc sa
     grille doit être chargée globalement — sinon les champs s'empilent partout
     ailleurs (un par ligne). */
  .form-actions{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-8);flex-wrap:wrap}
  .form-actions .note{font-size:var(--text-xs);color:var(--neutral-500);font-family:var(--font-data)}

  /* info side */
  .info-panel{display:flex;flex-direction:column;gap:var(--space-6)}
  .map{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-800);aspect-ratio:4/3;box-shadow:var(--shadow-md)}
  .map__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  /* Lien « Itinéraire » sous l'adresse (géocodée par l'app de l'usager). */
  .map-directions{display:inline-block;margin-top:6px;font-family:var(--font-data);font-size:var(--text-xs);font-weight:600;letter-spacing:.03em;color:var(--blue-500);text-decoration:none}
  .map-directions:hover{color:var(--blue-600);text-decoration:underline}

  .info-list{display:grid;gap:var(--space-1)}
  .info-item{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
  /* Meme raison cote flex : un element de flex ne descend pas sous son
     min-content sans y etre autorise. */
  .info-item>*{min-width:0}
  .info-item:last-child{border-bottom:none}
  .info-item .ic{flex:none;width:42px;height:42px;border-radius:var(--radius-sm);background:var(--navy-50);color:var(--blue-600);display:grid;place-items:center}
  .info-item .ic svg{width:20px;height:20px}
  .info-item .k{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-500)}
  .info-item .v{font-size:var(--text-base);color:var(--navy);font-weight:500;margin-top:3px;overflow-wrap:anywhere}
  /* Base mobile : le lien devient une boite de 44 px de haut centree sur son
     texte — cible tactile, sans toucher a la typographie. Retabli a 900 px. */
  .info-item .v a{color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .info-item .v a:hover{color:var(--blue-600)}
  .info-item .v small{display:block;font-weight:400;color:var(--neutral-500);font-size:var(--text-sm);margin-top:2px}

  .socials{display:flex;gap:var(--space-3)}
  .socials a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;color:var(--navy);transition:all var(--dur-base) var(--ease-out)}
  .socials a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  .socials a svg{width:18px;height:18px}

  /* channels */
  /* auto-fit reste sûr ici : les 3 canaux sont codés en dur dans
     template-contact.php (aucune saisie back-office) — leur nombre ne peut
     jamais retomber à 1. */
  .channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-6);margin-top:var(--space-12)}
  .channel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .channel:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .channel .ic{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--orange-50);color:var(--orange-600);display:grid;place-items:center;margin-bottom:var(--space-2)}
  .channel .ic svg{width:20px;height:20px}
  /* Carte WhatsApp : accent vert de marque, et son lien reprend la même teinte. */
  .channel--wa .ic{background:#e7f8ef;color:#128c7e}
  .channel--wa a{color:#128c7e}
  .channel--wa a:hover{color:#0e6f63}
  .channel h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy)}
  .channel p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600);flex:1}
  .channel a{font-size:var(--text-sm);font-weight:600;color:var(--blue-500);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .channel a:hover{color:var(--blue-700)}

  /* success state */
  .form-success{display:none;text-align:center;padding:var(--space-10) var(--space-6)}
  .form-success.show{display:block}
  .form-success .badge-ok{width:64px;height:64px;border-radius:50%;background:#e8f5ee;color:var(--success);display:grid;place-items:center;margin:0 auto var(--space-5)}
  .form-success .badge-ok svg{width:30px;height:30px;stroke-width:2.5}
  .form-success h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--navy);margin-bottom:var(--space-3)}
  .form-success p{font-size:var(--text-base);color:var(--neutral-600);max-width:40ch;margin:0 auto}

  /* ---- Paliers (mobile-first) ---- */
  @media(min-width:640px){
    .form-card{padding:var(--space-10)}
  }
  @media(min-width:900px){
    .socials a{width:42px;height:42px}
    .info-item .v a{display:inline;min-height:0}
    .channel a{display:inline;min-height:0}
  }
  /* Quatrieme palier — 1000 px, hors de la serie 640/900/1200.
     Il existe parce que le seuil de bascule a deux colonnes de ce theme est
     historiquement a ~980 px (les blocs @media(max-width:980px) d'avant la
     refonte mobile-first) : la composition a deux colonnes etait donc active
     des 981 px. Le forcer a 1200 pour respecter la serie a trois paliers
     laissait toute la bande 981-1199 px — celle des portables — empilee sur
     une seule colonne, au prix de +54 % de hauteur sur /contact/ a 1024 px.
     La regle des trois paliers a cede, pas le rendu. */
  @media(min-width:1000px){
    .contact-grid{grid-template-columns:1.2fr .8fr;gap:var(--space-12)}
  }