/* ===========================================================================
   L'ATELIER — la prise de rendez-vous, styles
   ---------------------------------------------------------------------------
   Extrait de index.html pour que toutes les pages puissent l'utiliser. Une
   page d'atterrissage publicitaire sans prise de rendez-vous fait payer un
   clic pour ne rien en faire : le visiteur le plus décidé n'a nulle part où
   cliquer. Ce fichier existe pour que cela n'arrive sur aucune page.

   Quelques règles ci-dessous nomment aussi .ko-* ou .dopt : ce sont les
   retours au toucher, partagés avec l'assistant et l'estimateur. Les garder
   ici ne coûte rien — sur une page sans ces éléments, elles ne s'appliquent
   simplement à personne.
   =========================================================================== */

/* ═══ L'ÉTAPE « DE QUOI AVEZ-VOUS BESOIN ? » ═══════════════════════════════
   Le visiteur compose son projet et regarde le chiffre se former. Tout est
   réglé pour cela : le PRIX porte le poids visuel, le reste s'efface.

   L'état sélectionné reprend la mécanique déjà employée par les cartes de
   métier — le dégradé passe en BORDURE grâce à padding-box / border-box.
   Un simple `box-shadow inset` aurait donné un liseré plat, étranger au
   reste de la modale. Une modale doit ressembler au site, pas à un formulaire
   posé dessus.
   =========================================================================== */

.at-formules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.at-formule{position:relative;display:flex;flex-direction:column;
  padding:18px 17px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);cursor:pointer;
  transition:border-color .3s,background .3s,transform .45s var(--out)}
.at-formule:hover{transform:translateY(-2px);border-color:var(--line2)}
.at-formule input{position:absolute;opacity:0;pointer-events:none}
.at-formule .n{font-family:var(--disp);font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink)}
.at-formule .s{margin-top:2px;font-size:.79rem;color:var(--mut);line-height:1.35}

/* Le prix. Grand, en display, chiffres alignés : c'est l'information que la
   personne est venue chercher, et la rapetisser n'a jamais fait vendre. */
.at-formule .p{margin-top:14px;font-family:var(--disp);font-weight:700;
  font-size:1.34rem;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.at-formule .p i{font-style:normal;font-size:.66em;font-weight:500;
  color:var(--faint);letter-spacing:0;margin-right:5px;vertical-align:.08em}

.at-formule:has(input:checked){border-color:transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  border:1px solid transparent;box-shadow:0 8px 26px rgba(99,102,241,.22)}
.at-formule:has(input:checked) .p{background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.at-formule:has(input:focus-visible){outline:2px solid var(--c);outline-offset:2px}

/* Le repère de la formule la plus prise, repris tel quel de la page tarifs :
   le visiteur l'a déjà vu là-bas, il doit le retrouver ici. */
.at-formule.pop::after{content:"Le plus choisi";position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);white-space:nowrap;padding:4px 11px;border-radius:99px;
  background:var(--grad);color:var(--sur-grad,#05060a);
  font-family:var(--disp);font-size:.66rem;font-weight:700;letter-spacing:.04em}

/* --- le curseur de pages -------------------------------------------------
   Un `input[type=range]` par défaut est le contrôle le plus laid du web, et
   il trahit le reste. On le redessine entièrement, des deux côtés du moteur
   (WebKit et Firefox n'exposent pas les mêmes pseudo-éléments). */
.at-pages{margin-top:24px;padding:16px 18px 18px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel)}
.at-pages .l{display:flex;align-items:center;justify-content:space-between;gap:12px}
.at-pages .l span{font-size:.93rem;color:var(--mut)}
.at-pages .l b{display:inline-grid;place-items:center;min-width:38px;height:30px;
  padding:0 9px;border-radius:9px;background:var(--panel2);color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums}

.at-pages input[type=range]{-webkit-appearance:none;appearance:none;
  width:100%;margin-top:16px;height:5px;border-radius:99px;background:var(--line2);
  outline:none;cursor:pointer}
.at-pages input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--grad);
  border:2px solid var(--bg2);box-shadow:0 3px 12px rgba(99,102,241,.45);
  cursor:grab;transition:transform .2s var(--out)}
.at-pages input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.at-pages input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.05)}
.at-pages input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:#6366f1;border:2px solid var(--bg2);cursor:grab;
  box-shadow:0 3px 12px rgba(99,102,241,.45)}
.at-pages input[type=range]:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.at-pages .g{display:flex;justify-content:space-between;margin-top:7px;
  font-size:.7rem;color:var(--faint);font-variant-numeric:tabular-nums}
.at-inclus{margin-top:11px;font-size:.82rem;color:var(--faint)}
.at-inclus b{color:var(--ink);font-weight:600}

/* --- les options ----------------------------------------------------------
   Des pastilles, pas un formulaire. La coche est dessinée plutôt que native :
   une case à cocher système impose sa couleur et son rayon, et casse la
   cohérence de tout ce qui l'entoure. */
.at-lab{margin-top:26px;margin-bottom:10px;font-size:.93rem;color:var(--mut)}
.at-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.at-option{position:relative;display:flex;align-items:center;gap:12px;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);cursor:pointer;font-size:.91rem;
  transition:border-color .3s,background .3s,transform .45s var(--out)}
.at-option:hover{transform:translateY(-1px);border-color:var(--line2)}
.at-option input{position:absolute;opacity:0;pointer-events:none}
.at-option .c{flex:none;width:19px;height:19px;border-radius:6px;
  border:1.5px solid var(--line2);display:grid;place-items:center;
  transition:.25s var(--ease)}
.at-option .c::after{content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2px solid var(--sur-grad,#05060a);border-bottom:2px solid var(--sur-grad,#05060a);
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.25s var(--out)}
.at-option .n{flex:1;color:var(--ink)}
.at-option .p{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:.87rem}
.at-option:has(input:checked){border-color:transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  border:1px solid transparent}
.at-option:has(input:checked) .c{border-color:transparent;background:var(--grad)}
.at-option:has(input:checked) .c::after{opacity:1;transform:rotate(-45deg) scale(1)}
.at-option:has(input:checked) .p{color:var(--ink)}
.at-option:has(input:focus-visible){outline:2px solid var(--c);outline-offset:2px}

/* --- le total qui réagit --------------------------------------------------
   Le chiffre du pied bat brièvement à chaque changement. C'est le seul
   mouvement de cette étape, et il dit une chose utile : « votre geste a
   été pris en compte ». Un effet de plus l'aurait noyé. */
@keyframes at-bat{
  0%{transform:translateY(0)}
  35%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
.at-prix b.bat{animation:at-bat .42s var(--out)}

@media(max-width:640px){
  .at-formules{grid-template-columns:1fr}
  .at-formule{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .at-formule .p{margin-top:0;margin-left:auto;font-size:1.15rem}
  .at-formule.pop::after{left:auto;right:14px;top:-9px;transform:none}
  .at-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .at-prix b.bat{animation:none}
  .at-formule:hover,.at-option:hover{transform:none}
}

/* --- L'appel à l'action du haut de page ------------------------------------
   Réservé aux pages d'atterrissage. Le bouton principal doit être atteignable
   sans défiler : c'est le seul geste que fait la moitié des visiteurs venus
   d'une publicité. */
.tete-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tete-actions .btn{padding:14px 26px}
.tete-note{margin-top:12px;font-size:.86rem;color:var(--mut)}
@media(max-width:520px){
  .tete-actions{flex-direction:column;align-items:stretch}
  .tete-actions .btn{width:100%}
}

.at{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s}
.at.ouvert{opacity:1;visibility:visible;pointer-events:auto}
.at-fond{position:absolute;inset:0;background:rgba(4,5,10,.72);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.at-boite{position:relative;width:min(960px,94vw);max-height:92svh;overflow:hidden auto;
  background:var(--panel-solide,var(--bg2));border:1px solid var(--line2);border-radius:26px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);transform:translateY(26px) scale(.985);
  transition:transform .6s var(--out)}
.at.ouvert .at-boite{transform:none}
.at-tete{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:16px;
  padding:20px 26px;background:var(--bg2);border-bottom:1px solid var(--line)}
.at-tete img{width:26px;height:26px;border-radius:50%}
.at-tete b{font-family:var(--disp);font-size:1rem;letter-spacing:-.02em}
.at-fermer{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);
  background:transparent;color:var(--mut);cursor:pointer;font-size:1.1rem;line-height:1;
  transition:color .3s,border-color .3s,transform .45s var(--out)}
.at-fermer:hover{color:var(--ink);border-color:var(--line2);transform:rotate(90deg)}
.at-rail{display:flex;gap:6px;padding:0 26px 18px;background:var(--bg2);
  position:sticky;top:66px;z-index:3;border-bottom:1px solid var(--line)}
.at-rail i{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.at-rail i::after{content:"";display:block;height:100%;width:0;background:var(--grad);
  transition:width .6s var(--ease)}
.at-rail i.fait::after{width:100%}
.at-rail i.ici::after{width:50%}
.at-corps{padding:30px 26px 26px}
.at-etape{display:none;animation:atEntre .55s var(--out)}
.at-etape.on{display:block}
.at-no{font-family:var(--disp);font-size:.74rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c)}
.at-etape h3{font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.03em;margin:10px 0 6px}
.at-etape .at-sous{color:var(--mut);margin-bottom:24px;font-size:.98rem}
.at-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.at-choix label{position:relative;display:block;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  transition:border-color .3s,background .3s,transform .45s var(--out)}
.at-choix label:hover{transform:translateY(-2px);border-color:var(--line2)}
.at-choix input{position:absolute;opacity:0;pointer-events:none}
.at-choix label:has(input:checked){border-color:transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  border:1px solid transparent;box-shadow:0 8px 26px rgba(99,102,241,.22)}
.at-choix label:has(input:focus-visible){outline:2px solid var(--c);outline-offset:2px}
.at-choix .e{display:block;font-size:1.3rem;margin-bottom:6px}
.at-choix .t{display:block;font-weight:600;font-size:.98rem}
.at-conseil{margin-top:20px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);
  display:flex;gap:13px;align-items:flex-start;font-size:.93rem;color:var(--mut);
  animation:atEntre .5s var(--out)}
.at-conseil b{color:var(--ink);font-weight:600}
.at-conseil .ic{font-size:1.15rem;line-height:1.2}
.at-jours{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.at-jour{padding:12px 8px;border-radius:13px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-family:var(--body);
  cursor:pointer;text-align:center;transition:border-color .3s,background .3s,transform .4s var(--out)}
.at-jour:hover{transform:translateY(-2px)}
.at-jour .sem{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.at-jour .num{display:block;font-family:var(--disp);font-size:1.35rem;font-weight:600;margin:3px 0}
.at-jour .moi{display:block;font-size:.74rem;color:var(--mut)}
.at-jour.sel{border-color:transparent;background:var(--grad);color:#05060a}
.at-jour.sel .sem,.at-jour.sel .moi{color:rgba(5,6,10,.72)}
.at-heures{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.at-heure{padding:10px 18px;border-radius:11px;border:1px solid var(--line);background:var(--panel);
  cursor:pointer;font-weight:600;font-size:.95rem;font-family:var(--body);color:var(--ink);
  transition:border-color .3s,background .3s,transform .4s var(--out)}
.at-heure:hover{transform:translateY(-2px)}
.at-heure.sel{border-color:transparent;background:var(--grad);color:#05060a}
.at-fuseau{margin-top:14px;font-size:.84rem;color:var(--mut)}
.at-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.at-champ{display:block}
.at-champ.large{grid-column:1/-1}
.at-champ span{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.at-champ input,.at-champ textarea{width:100%;padding:13px 15px;border-radius:13px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-family:var(--body);font-size:1rem;transition:border-color .3s,background .3s}
.at-champ textarea{min-height:96px;resize:vertical}
.at-champ input:focus,.at-champ textarea:focus{outline:none;border-color:var(--c);
  background:var(--panel2,var(--panel))}
.at-champ.err input{border-color:#f87171}
.at-err{color:#f87171;font-size:.84rem;margin-top:6px;display:none}
.at-champ.err .at-err{display:block}
.at-recap{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.at-recap div{display:flex;justify-content:space-between;gap:16px;padding:13px 17px;
  border-bottom:1px solid var(--line);font-size:.94rem}
.at-recap div:last-child{border-bottom:0}
.at-recap span{color:var(--mut)}
.at-recap b{text-align:right;font-weight:600}
.at-recap .fort{background:var(--panel)}
.at-recap .fort b{font-family:var(--disp);font-size:1.15rem}
.at-pied{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;
  padding:18px 26px;background:var(--bg2);border-top:1px solid var(--line)}
.at-prix{margin-right:auto;line-height:1.25}
.at-prix span{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.at-prix b{font-family:var(--disp);font-size:1.25rem;font-weight:600}
.at-pied .btn{padding:12px 24px}
.at-retour{background:transparent;border:1px solid var(--line2);color:var(--mut);
  border-radius:14px;padding:12px 20px;cursor:pointer;font-family:var(--body);font-weight:600;
  transition:color .3s,border-color .3s}
.at-retour:hover{color:var(--ink)}
.at-fin{text-align:center;padding:16px 0 8px}
.at-fin .coche{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;
  background:var(--grad);display:grid;place-items:center;
  box-shadow:0 16px 44px rgba(99,102,241,.4);animation:atPouls .8s var(--out)}
.at-fin .coche svg{width:34px;height:34px;stroke:#05060a;stroke-width:3.4;fill:none;
  stroke-dasharray:32;stroke-dashoffset:32;animation:atTrace .5s .35s var(--out) forwards}
.at-ref{display:inline-block;margin-top:18px;padding:9px 18px;border-radius:11px;
  border:1px dashed var(--line2);font-family:var(--disp);font-weight:700;letter-spacing:.1em}
.dopt,.dcard,.at-jour,.at-heure,.at-choix label,.ko-sugg{
  transition:transform .16s var(--out),border-color .3s var(--ease),background .3s var(--ease)}
.at-choix label:active,.ko-sugg:active{
  transform:scale(.975);transition:transform .07s cubic-bezier(.3,0,.35,1)}
.burger:active,.at-fermer:active,.at-retour:active,.ko-x:active,.ko-btn:active{
  transform:scale(.9);transition:transform .07s cubic-bezier(.3,0,.35,1)}