/* ============================================================
   FocusLab — contact.css (additif, scopé body.contact-page)
   Même grammaire que home / services / projets / fiche projet :
   label Syne, titre Bricolage 500, filets --line, un seul orange
   plein (le bouton d'envoi). HTML inchangé, focuslab.css inchangé,
   crochets d'hydratation (data-fl, #cForm, #okMsg) intacts.
   ============================================================ */

/* ── Échelle commune ── */
body.contact-page .lbl{font-size:.7rem;letter-spacing:.26em;white-space:nowrap;color:var(--o-text)}
body.contact-page .nav-r a.l{font-size:.7rem;white-space:nowrap}
body.contact-page .theme-btn{font-size:.62rem;white-space:nowrap}
body.contact-page .nav-cta{font-size:.64rem;white-space:nowrap;padding:10px 16px}
body.contact-page .btn{font-size:.72rem;padding:16px 30px;white-space:nowrap}
body.contact-page .btn:hover{transform:none}
body.contact-page #construction-bar .cb-close{white-space:nowrap;font-size:.56rem}
body.contact-page .lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.65;max-width:40ch;text-wrap:pretty}
body.contact-page .vf{display:none!important}

/* ── PAGE : marge haute alignée sur les en-têtes des autres pages ── */
body.contact-page .pmain{padding:clamp(180px,22vh,230px) 0 clamp(88px,11vw,150px)}
body.contact-page.has-banner .pmain{padding-top:clamp(218px,26vh,268px)}
body.contact-page.has-disclaimer .pmain{padding-top:clamp(213px,25vh,263px)}
body.contact-page.has-banner.has-disclaimer .pmain{padding-top:clamp(250px,29vh,300px)}

/* ── GRILLE : repères à gauche (5), formulaire à droite (7) ── */
body.contact-page .ctwrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,6vw,96px);align-items:start}
body.contact-page .ct-info{position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start}
body.contact-page.has-banner .ct-info,body.contact-page.has-disclaimer .ct-info{top:134px}

/* Titre : grand, 500, comme Services / Projets */
body.contact-page .ct-h1{font-weight:500;letter-spacing:-.035em;line-height:.96;font-size:clamp(2.8rem,5.6vw,5rem);margin:22px 0 0;max-width:none}
body.contact-page .ct-h1 .ac{color:var(--o-text)}
body.contact-page .ct-info .lead{margin:26px 0 0}

/* Coordonnées : filets, label / valeur, icônes retirées */
body.contact-page .inf-list{width:100%;margin:clamp(36px,4vw,56px) 0 0;gap:0;border-top:1px solid var(--line)}
body.contact-page .inf{gap:0;padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);column-gap:20px;align-items:baseline}
body.contact-page .inf[hidden]{display:none}
body.contact-page .inf > .inf-ic{display:none}
body.contact-page .inf > div:not(.inf-ic){display:contents}
body.contact-page .inf-l{font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
body.contact-page .inf-v{font-family:var(--display);font-weight:500;font-size:1.08rem;letter-spacing:-.015em;line-height:1.3;color:var(--title);margin:0;text-wrap:pretty}
body.contact-page .inf-v a{color:var(--title);transition:color .2s var(--e-out)}
body.contact-page .inf-v a:hover{color:var(--o-text)}

/* Réserver un créneau : lien souligné, pas un second bouton */
body.contact-page .ct-info .btn.ln{margin-top:28px;padding:0 0 6px;border:0;border-bottom:1px solid var(--title);background:none;color:var(--title);font-size:.7rem;letter-spacing:.2em;transition:color .2s var(--e-out),border-color .2s var(--e-out)}
body.contact-page .ct-info .btn.ln:hover{color:var(--o-text);border-color:var(--o);transform:none}

/* ── FORMULAIRE : plus de boîte, champs en filet bas ── */
body.contact-page .ct-form{background:transparent;border:0;padding:0;border-top:1px solid var(--line)}
body.contact-page .ct-form h2{font-family:var(--label);font-weight:500;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0;padding:18px 0 0}
body.contact-page .form{max-width:none;gap:0;margin-top:clamp(20px,3vw,36px)}
body.contact-page .fg2{gap:0 clamp(20px,3vw,40px)}
body.contact-page .field{gap:0;padding:14px 0 0}
body.contact-page .field label{font-size:.66rem;letter-spacing:.2em;color:var(--muted)}
body.contact-page .field input,body.contact-page .field textarea,body.contact-page .field select{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0 14px;font-size:1.04rem;color:var(--title);transition:border-color .2s var(--e-out)}
body.contact-page .field input::placeholder,body.contact-page .field textarea::placeholder{color:color-mix(in srgb,var(--muted) 62%,transparent)}
body.contact-page .field input:focus,body.contact-page .field textarea:focus,body.contact-page .field select:focus{outline:none;border-bottom-color:var(--o)}
body.contact-page .field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);background-position:calc(100% - 6px) 55%,100% 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:24px;cursor:pointer}
body.contact-page .field select option{background:var(--surface);color:var(--title)}
body.contact-page .field textarea{min-height:150px;line-height:1.6}
body.contact-page .privacy{margin:22px 0 0;font-size:.82rem;color:var(--muted);line-height:1.55;max-width:56ch}
body.contact-page .form .btn[type="submit"]{width:auto!important;justify-self:start;margin-top:26px;background:var(--o);border-color:var(--o);color:#0d0c0a}
body.contact-page .form .btn[type="submit"]:hover{filter:brightness(1.06)}
body.contact-page .form .btn[type="submit"]:disabled{opacity:.6;cursor:default}

/* Retour après envoi : titre en filet, pas de centrage flottant */
body.contact-page .okmsg{text-align:left;padding:clamp(32px,4vw,56px) 0 0}
body.contact-page .okmsg h3{font-weight:500;letter-spacing:-.03em;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;margin:0 0 14px}
body.contact-page .okmsg h3::before{content:"";display:block;width:44px;height:2px;background:var(--o);margin-bottom:22px}
body.contact-page .okmsg p{color:var(--text);font-size:1.02rem;max-width:44ch}

/* ── FOOTER : même échelle que les autres pages ── */
body.contact-page .foot{padding:clamp(56px,7vw,88px) 0 44px}
body.contact-page .foot-tag{font-size:1.35rem;color:var(--title)}
body.contact-page .foot-leg{font-size:.62rem;white-space:nowrap;flex-shrink:0}

/* ── Tablette (960px) : repères au-dessus, plus de sticky ── */
@media(max-width:960px){
  body.contact-page .ctwrap{grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,64px) 0}
  body.contact-page .ct-info{position:static;top:auto}
  body.contact-page .lead{max-width:52ch}
  body.contact-page .inf-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:0}
  body.contact-page .inf{grid-template-columns:minmax(0,1fr);row-gap:8px;border-top:1px solid var(--line);border-bottom:0}
}

/* ── Mobile (760px) : une colonne, tailles resserrées ── */
@media(max-width:760px){
  body.contact-page .lbl{white-space:normal}
  body.contact-page .pmain{padding-top:120px}
  body.contact-page.has-banner .pmain{padding-top:clamp(170px,24vh,210px)}
  body.contact-page.has-disclaimer .pmain{padding-top:clamp(165px,23vh,205px)}
  body.contact-page.has-banner.has-disclaimer .pmain{padding-top:clamp(200px,27vh,240px)}
  body.contact-page .ct-h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  body.contact-page .inf-list{grid-template-columns:minmax(0,1fr);margin-top:32px}
  body.contact-page .fg2{grid-template-columns:minmax(0,1fr)}
  body.contact-page .form .btn[type="submit"]{width:100%!important;text-align:center}
  body.contact-page .foot-leg{white-space:normal}
}

@media(prefers-reduced-motion:reduce){body.contact-page *{transition:none!important}}

/* Smartphone étroit (≈395 px) : nav compacte, même réglage que les pages légales */
@media(max-width:480px){
  body.contact-page .nav{padding:12px 20px}
  body.contact-page .nav-r{gap:8px}
  body.contact-page .theme-btn{font-size:.56rem;padding:8px 10px}
  body.contact-page .nav-cta{font-size:.56rem;letter-spacing:.12em;padding:9px 12px}
  body.contact-page .wrap{padding:0 20px}
}