/* ==========================================================================
   CONTACT — Albinos (#FBF4F1), les yeux. Accent rouge #D7261E (boutons : texte blanc, 5,0:1).
   Aussi chargé par merci.html (yeux qui se ferment et se rouvrent).
   ========================================================================== */
.ct-hero{min-height:auto;padding:130px 0 70px}
.ct-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;width:100%}
.ct-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.ct-title{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 76;letter-spacing:-.025em;font-size:clamp(3rem,7.2vw,7rem);line-height:.92}
.ct-title em{color:var(--pg-link)}
.c-lines{display:flex;flex-direction:column;max-width:620px}
.c-lines li{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1.5px solid var(--pg-line)}
.c-lines li:last-child{border-bottom:1.5px solid var(--pg-line)}
.c-k{font-weight:700;color:var(--pg-mute);font-size:.92rem}
.c-lines a{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 82;font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.1;text-underline-offset:4px}
.c-lines a:hover{text-decoration:underline;text-decoration-color:var(--pg-link)}

/* les yeux */
.eyes{width:min(100%,460px);margin:0 auto}
.eyes svg{width:100%;height:auto;overflow:visible}
.sclera{fill:#fff;stroke:#1B1233;stroke-width:3}
.iris{fill:#D7261E}
.pupil{fill:#1B1233}
.shine{fill:#fff}
.iris,.pupil,.shine{transition:transform .12s linear}
.lid{fill:#FBF4F1;stroke:#1B1233;stroke-width:3;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .28s ease}
.eyes.blink .lid,.eyes.shut .lid{transform:scaleY(1)}
.eyes.small{width:min(220px,60%);margin:0 auto 10px}
.eyes.small .lid{transform:scaleY(1);animation:openUp 1.5s .5s ease forwards}
@keyframes openUp{to{transform:scaleY(0)}}

/* formulaire en trois étapes : la carte prend la couleur du morphe choisi */
.ct-form-sec{padding-top:40px}
.cform{--cf-bg:#fff;--cf-fg:#1B1233;--cf-btn:#D7261E;--cf-btn-ink:#fff;max-width:920px;margin:0 auto;background:var(--cf-bg);color:var(--cf-fg);border-radius:var(--r-xl);padding:clamp(22px,4vw,46px);box-shadow:var(--shadow-lg);border:1px solid var(--pg-line);transition:background .6s,color .6s;position:relative}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.steps-bar{display:none;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.js .steps-bar{display:flex}
.steps-bar li{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--cf-fg) 45%,transparent);font-weight:700;font-size:.9rem}
.steps-bar li b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--cf-fg) 14%,transparent)}
.steps-bar li.on{background:var(--cf-fg);color:var(--cf-bg);border-color:var(--cf-fg)}
.steps-bar li.on b{background:var(--cf-bg);color:var(--cf-fg)}
.fs{border:0;display:grid;gap:16px;margin:0 0 26px;min-width:0}
.fs:focus{outline:none}
.js .fs{display:none}.js .fs.on{display:grid;animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fs legend{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 80;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.05;margin-bottom:6px;padding:0}
.fs-help{font-weight:500}
.cform .pick{--pc-bg:var(--cf-fg);--pc-fg:var(--cf-bg)}
.cform .pick span i{border:1.5px solid currentColor}
.q{font-weight:800}
.ask{display:grid;gap:12px;padding:16px 0;border-top:1.5px solid color-mix(in srgb,var(--cf-fg) 22%,transparent)}
.js .ask{display:none}.js .ask.on{display:grid}
.ask[hidden]{display:none!important}
.fld{display:grid;gap:6px;font-weight:700;font-size:.92rem}
.fld input,.fld select,.fld textarea{border:1.5px solid color-mix(in srgb,var(--cf-fg) 40%,transparent);background:rgba(255,255,255,.94);color:#1B1233;border-radius:16px;padding:13px 16px;font-weight:500;font-size:1rem;min-height:48px;width:100%;transition:border-color .25s}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--cf-fg);outline-offset:2px;border-color:var(--cf-fg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.chk input{width:22px;height:22px;margin-top:2px;accent-color:var(--cf-fg);flex:0 0 auto}
.chk .inl{color:inherit}
.err{font-weight:800;min-height:1.4em}
.err:not(:empty)::before{content:"Attention : ";font-weight:800}
.nav-f{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cform .btn-ac{background:var(--cf-btn);color:var(--cf-btn-ink);box-shadow:none}
.cform .btn-line{border-color:var(--cf-fg);color:var(--cf-fg)}
.cform .btn-line:hover{background:var(--cf-fg);color:var(--cf-bg)}
.js .nav-f #sendBtn{display:none}
.js .cform.last .nav-f #sendBtn{display:inline-flex}
.recap{background:color-mix(in srgb,var(--cf-fg) 10%,transparent);border-radius:16px;padding:16px;border-top:0}
.sent-msg{text-align:center;padding:20px 0 6px}
.sent-msg[hidden]{display:none}
.sent-msg h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:8px}
.cform.sent .steps-bar,.cform.sent .fs,.cform.sent .nav-f{display:none}

/* plan */
.mp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.mp-grid h2{font-size:clamp(2.7rem,5.2vw,4.8rem);line-height:.94}
.mp-grid h2 em{color:var(--pg-link)}
.mp-grid p{max-width:46ch;margin-top:16px}
.map{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--pg-line)}
.map svg{width:100%;height:auto}
.pin{animation:pinBob 2.6s ease-in-out infinite}
@keyframes pinBob{50%{transform:translateY(-8px)}}
.map-tag{position:absolute;left:14px;bottom:14px;background:#fff;padding:4px 12px}

/* merci */
.merci-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 70px}
.merci-in{display:grid;gap:26px;max-width:720px}
.merci-in h1{font-size:clamp(3rem,7.4vw,7rem);line-height:.9}
.merci-in h1 em{color:var(--pg-link)}

@media (max-width:1080px){.ct-hero-in,.mp-grid{grid-template-columns:1fr}.eyes{max-width:340px}}
@media (max-width:760px){.two{grid-template-columns:1fr}.c-lines li{grid-template-columns:1fr;gap:2px}.c-lines .example{justify-self:start}}
@media (prefers-reduced-motion:reduce){.pin{animation:none}.eyes.small .lid{transform:scaleY(0)}}

/* Invitation diagnostic dans contact */
.diag-invite{display:flex;flex-direction:column;gap:8px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid var(--pg-line);margin:8px 0 16px;max-width:540px}
.diag-invite .di-tag{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--framboise, #C2255C)}
.diag-invite p{font-size:.95rem;line-height:1.4;color:var(--pg-ink);margin:0}


/* Puce diagnostic prérempli */
.diag-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--rose);color:#fff;font-weight:700;font-size:.9rem;margin-bottom:20px;box-shadow:var(--shadow)}
.diag-chip[hidden]{display:none!important}
.diag-chip .chip-del{background:none;border:none;color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;padding:0 0 2px;opacity:.8;transition:opacity .2s}
.diag-chip .chip-del:hover{opacity:1}

/* Prise de rendez-vous dans contact */
.ct-booking-wrap{max-width:920px;margin:44px auto 0;padding:28px 32px;border-radius:var(--r-xl);background:rgba(255,255,255,.6);border:1px solid var(--pg-line)}
.ct-bk-title{font-family:var(--f-display);font-size:1.45rem;font-weight:800;color:var(--pg-ink);margin-bottom:6px}
.ct-bk-desc{font-size:.95rem;color:var(--pg-mute);margin-bottom:16px}