/* Yodriv · site v5 · « Contact » (08) : un formulaire en trois étapes, une seule question à l'écran (même principe que le formulaire de FRAME). Fond blanc. Sans JavaScript, les trois étapes sont visibles d'un coup. */
.ct-scene{width:min(860px,100%);margin:36px auto 0}
.ct-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Nos coordonnées */
.ct-infos{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,32px);border-radius:32px;background:var(--surface-page);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.ct-infos-q{margin:0;font:800 clamp(22px,2.3vw,30px)/1.15 Lexend;letter-spacing:-.04em}
.ct-infos-t{margin:0;font-size:17px;color:var(--text-secondary)}
.ct-mail{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--border-subtle);font:800 clamp(16px,1.6vw,19px) Lexend;letter-spacing:-.02em;color:var(--brand-primary);transition:transform .3s var(--ressort),box-shadow .3s;word-break:break-all}
.ct-mail:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--brand-primary),var(--shadow-card)}
.ct-mail svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-copier{justify-self:start;padding:9px 18px;border:1px solid var(--border-control);border-radius:99px;background:#fff;font:700 14.5px Lexend;cursor:pointer}
.ct-copier:focus-visible,.ct-mail:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px}
.ct-infos .ct-puces{justify-content:flex-start;margin-top:8px}

/* Le formulaire */
.ct-console{margin-top:0}
.ct-etat{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--brand-primarySoft);color:var(--brand-primary);font:600 13px Lexend;white-space:nowrap}
.ct-etat i{width:8px;height:8px;border-radius:50%;background:var(--brand-primary)}
.ct-form{position:relative;width:100%;padding:clamp(22px,3.5vw,44px)}
.ct-progres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ct-seg i{display:block;height:5px;border-radius:99px;background:var(--border-subtle);transition:background .5s}
.ct-seg span{display:block;margin-top:9px;font:600 13.5px Lexend;color:var(--text-secondary);transition:color .3s}
.ct-seg.fait i,.ct-seg.actif i{background:var(--brand-primary)}
.ct-seg.actif span{color:var(--text-primary)}
.ct-corps{position:relative;min-height:340px;margin-top:30px}
.ct-etape{display:grid;gap:22px;min-width:0;margin:0 0 26px;padding:0;border:0}
.ct-etape legend{display:block;width:100%;margin:0 0 22px;padding:0;font:800 clamp(26px,3.2vw,40px)/1.12 Lexend;letter-spacing:-.045em}
.ct-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-cartes label{position:relative;display:block}
.ct-cartes input,.ct-puces-choix input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ct-carte{display:grid;gap:6px;align-content:center;min-height:130px;height:100%;padding:24px 22px;border:2px solid var(--border-subtle);border-radius:22px;background:#fff;transition:background .25s,border-color .25s,transform .35s var(--ressort),box-shadow .25s}
.ct-carte b{font:800 clamp(21px,2.2vw,26px)/1.1 Lexend;letter-spacing:-.04em}.ct-carte small{font:500 15px Lexend;color:var(--text-secondary);transition:color .25s}
.ct-cartes label:hover .ct-carte{transform:translateY(-3px);border-color:var(--brand-primary)}
.ct-cartes input:checked+.ct-carte{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;box-shadow:var(--shadow-saphir)}
.ct-cartes input:checked+.ct-carte small{color:var(--brand-primarySoft)}
.ct-cartes input:focus-visible+.ct-carte,.ct-puces-choix input:focus-visible+span{outline:3px solid var(--focus-light);outline-offset:3px}
.ct-sous{margin-top:4px}.ct-sous[hidden]{display:none}
.ct-sous p{margin:0 0 10px;font:700 15px Lexend;color:var(--text-primary)}.ct-sous small{font-weight:500;color:var(--text-secondary)}
.ct-puces-choix{display:flex;flex-wrap:wrap;gap:8px}.ct-puces-choix label{position:relative}
.ct-puces-choix span{display:block;padding:9px 18px;border:1px solid var(--border-control);border-radius:99px;background:#fff;font:600 15px Lexend;transition:background .2s,color .2s,border-color .2s}
.ct-puces-choix input:checked+span{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.ct-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}
.ct-champs .ct-champ:last-child:nth-child(odd){grid-column:1/-1}
.ct-champ{display:block}
.ct-champ>span{font:600 13.5px Lexend;color:var(--text-secondary)}.ct-champ small{font-weight:500}
.ct-champ input{display:block;width:100%;margin-top:4px;padding:6px 0 10px;border:0;border-bottom:2px solid var(--border-subtle);border-radius:0;background:none;font:700 22px Lexend;color:var(--text-primary);outline:0;transition:border-color .25s}
.ct-champ input::placeholder{font-weight:500;color:#B7C3D3}
.ct-champ input:focus{border-bottom-color:var(--brand-primary)}
.ct-champ input[aria-invalid="true"]{border-bottom-color:var(--status-danger)}
.ct-zone{display:block}.ct-zone>span{font:600 13.5px Lexend;color:var(--text-secondary)}.ct-zone small{font-weight:500}
.ct-zone textarea{display:block;width:100%;margin-top:8px;padding:14px 16px;border:2px solid var(--border-subtle);border-radius:18px;background:var(--surface-page);font:500 16px Lexend;color:var(--text-primary);resize:none;outline:0;transition:border-color .25s}
.ct-zone textarea:focus{border-color:var(--brand-primary);background:#fff}
.ct-erreur{min-height:0;margin:-8px 0 0;font:600 14px Lexend;color:var(--status-danger)}.ct-erreur:empty{display:none}
.ct-pied{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px;padding-top:24px;border-top:1px solid var(--border-subtle)}
.ct-retour{padding:10px 4px;border:0;background:none;font:600 16px Lexend;color:var(--text-secondary);cursor:pointer;transition:color .2s}.ct-retour:hover{color:var(--text-primary)}
.ct-retour[hidden],.ct-fin[hidden]{display:none}
.ct-continuer{display:inline-flex;align-items:center;gap:14px;margin-left:auto;padding:8px 8px 8px 26px;border:0;border-radius:99px;background:var(--brand-primary);color:#fff;font:700 17px Lexend;cursor:pointer;box-shadow:var(--shadow-saphir);transition:transform .3s var(--ressort),opacity .2s}
.ct-continuer i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand-accent);color:var(--text-primary);font-style:normal;font-size:20px;transition:transform .3s var(--ressort)}
.ct-continuer:not(:disabled):hover{transform:scale(1.03)}.ct-continuer:not(:disabled):hover i{transform:translateX(3px)}
.ct-continuer:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.ct-continuer:focus-visible,.ct-retour:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px;border-radius:99px}
/* écran de remerciement */
.ct-fin{display:grid;justify-items:center;padding:30px 0 10px;text-align:center}
.ct-ok{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--brand-primary);box-shadow:var(--shadow-saphir)}
.ct-ok svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ct-merci{margin:22px 0 0;font:800 clamp(28px,3.4vw,40px)/1.1 Lexend;letter-spacing:-.045em}
.ct-merci-t{max-width:46ch;margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--text-secondary)}.ct-merci-t b{color:var(--text-primary)}
.ct-lien{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--brand-primary);text-decoration:underline;cursor:pointer}
.ct-suite{display:grid;gap:8px;width:min(440px,100%);margin:24px 0 0;padding:0;list-style:none;text-align:left}
.ct-suite li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--surface-page);font:600 15.5px Lexend}
.ct-suite i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-primary);color:#fff;font:800 13.5px Lexend;font-style:normal}
/* avec JavaScript : une étape à la fois, qui glisse */
.js .ct-etape:not(.actif){display:none}
.js .ct-etape.actif{animation:ct-glisse .4s var(--sortie) both}
@keyframes ct-glisse{from{opacity:0;transform:translateX(calc(40px * var(--dir,1)))}}

@media (max-width:640px){.ct-cartes{grid-template-columns:minmax(0,1fr)}.ct-carte{min-height:0;padding:18px 20px}.ct-champs{grid-template-columns:minmax(0,1fr)}.ct-champ input{font-size:20px}.ct-corps{min-height:0}}
@media (prefers-reduced-motion:reduce){.js .ct-etape.actif{animation:none}.ct-seg i{transition:none}}

/* Colonne de gauche, plus claire : un titre, l'adresse, la marche à suivre */
.ct-infos{gap:22px}
.ct-bloc{display:grid;gap:10px;align-content:start}
.ct-etiq{font:700 12.5px Lexend;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-primary)}
.ct-comment{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ct-comment li{display:flex;align-items:flex-start;gap:12px}
.ct-comment i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-primary);color:#fff;font:800 14px Lexend;font-style:normal}
.ct-comment span{display:grid;gap:2px;font:500 14.5px/1.4 Lexend;color:var(--text-secondary)}
.ct-comment b{font:700 16px/1.25 Lexend;color:var(--text-primary)}

/* Simplifié : le formulaire seul, l'adresse en une ligne dessous */
.ct-direct{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:26px 0 0;font:500 17px Lexend;color:var(--text-secondary);text-align:center}
.ct-direct a{font:800 19px Lexend;letter-spacing:-.02em;color:var(--brand-primary);text-decoration:none;border-bottom:2px solid var(--brand-accent)}
.ct-direct a:hover{border-bottom-color:var(--brand-primary)}
.ct-direct .ct-copier{padding:6px 14px;font-size:14px}

/* ===== Formulaire aux couleurs de Yodriv (5/11/2026, retour d'Abdellah : « par rapport à la DA de Yodriv ») =====
   Étapes numérotées comme la frise du parcours, champs arrondis comme dans le logiciel, sélection en saphir
   avec l'ombre glacier décalée, bouton saphir de la charte. Fine grille de console derrière la question. */
.ct-form{counter-reset:ct-etape}
.ct-progres{position:relative;display:flex;justify-content:space-between;gap:0;max-width:520px;margin:0 auto}
.ct-progres::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--border-subtle)}
.ct-seg{position:relative;display:grid;justify-items:center;gap:8px;counter-increment:ct-etape;flex:1}
.ct-seg:first-child{justify-items:start}.ct-seg:last-child{justify-items:end}
.ct-seg i{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--border-control);transition:background .35s,border-color .35s,transform .45s var(--ressort),box-shadow .35s}
.ct-seg i::after{content:counter(ct-etape);font:800 14px Lexend;font-style:normal;color:var(--text-secondary)}
.ct-seg.actif i{background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:3px 3px 0 var(--brand-accent);transform:scale(1.08)}
.ct-seg.actif i::after{color:#fff}
.ct-seg.fait i{background:var(--brand-primarySoft);border-color:var(--brand-primary)}
.ct-seg.fait i::after{content:"";width:12px;height:7px;border-left:2.6px solid var(--brand-primary);border-bottom:2.6px solid var(--brand-primary);transform:translateY(-2px) rotate(-45deg)}
.ct-seg span{margin:0;font:600 13px Lexend}

.ct-corps{margin-top:34px;padding:28px;border-radius:24px;background-color:var(--surface-page);
 background-image:linear-gradient(rgb(36 87 167 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(36 87 167 / .05) 1px,transparent 1px);background-size:28px 28px;min-height:300px}
.ct-etape legend{font-size:clamp(24px,2.8vw,34px)}

/* Cartes de l'étape 1 : blanches, sélection saphir avec l'ombre glacier et une coche */
.ct-carte{border:1.5px solid var(--border-subtle);box-shadow:0 12px 26px -22px rgb(23 43 70 / .4);position:relative}
.ct-cartes input:checked+.ct-carte{box-shadow:4px 4px 0 var(--brand-accent)}
.ct-cartes input:checked+.ct-carte::after{content:"";position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232457A7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ct-puces-choix span{border-color:var(--border-subtle);box-shadow:0 8px 18px -16px rgb(23 43 70 / .4)}
.ct-puces-choix input:checked+span{box-shadow:3px 3px 0 var(--brand-accent)}

/* Champs arrondis, comme dans le logiciel */
.ct-champs{gap:18px 18px}
.ct-champ>span{font:600 14px Lexend;color:var(--text-primary)}
.ct-champ input{margin-top:8px;padding:14px 16px;border:1.5px solid var(--border-subtle);border-radius:16px;background:#fff;font:600 17px Lexend;
 transition:border-color .2s,box-shadow .2s}
.ct-champ input::placeholder{font-weight:500;color:#9AA8BC}
.ct-champ input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px rgb(114 217 228 / .45)}
.ct-champ input[aria-invalid="true"]{border-color:var(--status-danger);box-shadow:0 0 0 4px var(--status-dangerSoft)}
.ct-zone>span{font:600 14px Lexend;color:var(--text-primary)}
.ct-zone textarea{border:1.5px solid var(--border-subtle);border-radius:16px;background:#fff}
.ct-zone textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px rgb(114 217 228 / .45)}

/* Bouton de la charte : saphir, flèche dans un rond glacier ; désactivé, il reste lisible */
.ct-pied{border-top:0;padding-top:20px}
.ct-continuer{box-shadow:var(--shadow-saphir)}
.ct-continuer:disabled{opacity:1;background:var(--border-subtle);color:var(--text-secondary)}
.ct-continuer:disabled i{background:#fff;color:var(--text-secondary)}
.ct-retour{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:99px;border:1px solid var(--border-subtle);background:#fff;color:var(--text-primary)}
.ct-retour:hover{border-color:var(--brand-primary);color:var(--brand-primary)}

/* Remerciement : la coche saphir avec l'ombre glacier */
.ct-ok{box-shadow:4px 4px 0 var(--brand-accent)}
.ct-suite li{background:#fff;border:1px solid var(--border-subtle)}

@media (max-width:640px){.ct-corps{padding:20px 16px}.ct-seg span{font-size:12px}.ct-champ input{font-size:16px}}

/* Validation : la coche se dessine dans un rond saphir qui rebondit, puis les étincelles jaillissent */
.ct-ok{position:relative;width:84px;height:84px}
.ct-ok svg{width:42px;height:42px}
.ct-ok svg path{stroke-dasharray:1;stroke-dashoffset:0}
.ct-ok.valide{animation:ct-rebond .6s var(--ressort) both}
.ct-ok.valide svg path{stroke-dashoffset:1;animation:ct-trace .5s .3s cubic-bezier(.6,0,.2,1) forwards}
.ct-ok.valide::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--brand-accent);animation:ct-onde .9s .35s ease-out both}
@keyframes ct-rebond{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes ct-trace{to{stroke-dashoffset:0}}
@keyframes ct-onde{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.ct-ok.valide,.ct-ok.valide::after{animation:none}.ct-ok.valide svg path{animation:none;stroke-dashoffset:0}}
.ct-pied[hidden]{display:none}
/* Remerciement : la coche seule, au centre (5/11/2026) */
.ct-fin{padding:50px 0 40px}
/* Le merci apparaît sous la coche, juste après elle */
.ct-ok.valide~.ct-merci{animation:ct-merci-entre .5s .55s var(--sortie) both}
.ct-ok.valide~.ct-merci-t{animation:ct-merci-entre .5s .7s var(--sortie) both}
@keyframes ct-merci-entre{from{opacity:0;transform:translateY(12px)}}
.ct-merci-t{font-size:16px}
@media (prefers-reduced-motion:reduce){.ct-ok.valide~.ct-merci,.ct-ok.valide~.ct-merci-t{animation:none}}