/* =========================================================================
   ATLANTIS STRENGTH, tunnel de demande de soumission, /quote-request/
   -------------------------------------------------------------------------
   POURQUOI CETTE FEUILLE EST AUTONOME. La page ne charge PAS styles.css : elle
   n'a ni en-tete de site, ni pied de page, ni defilement, et les regles de
   styles.css qui reglent le corps de page (overflow-x, .wrap, la barre de nav
   collante) n'ont aucun sens ici. Le peu d'utilitaires partages dont le tunnel
   a besoin (.btn, .lang-switch, .sr-only) est donc RECOPIE plus bas, a
   l'identique de styles.css, pour que les boutons soient les memes qu'ailleurs
   sur le site. Si .btn change la-bas, il change ici.

   LA CONTRAINTE STRUCTURANTE : la page ne defile pas. Le document fait
   exactement une hauteur d'ecran (100dvh, pas 100vh, a cause de la barre
   d'adresse mobile qui se retracte). Ce qui defile, quand il le faut, c'est la
   COLONNE de la question, jamais la page : la barre de progression en haut et
   les commandes en bas restent visibles en permanence.
   ========================================================================= */

/* ------------------------------- Base ----------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body.fnl-body{
  margin:0; overflow:hidden;
  background:var(--atl-ink-1000); color:#fff;
  font-family:var(--font-sans); font-size:16px; line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------- Utilitaires recopies de styles.css, a l'identique ------------ */
.btn{
  --_pad:16px 28px;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:var(--_pad);
  font-family:var(--font-sans); font-weight:700; font-size:13px;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  border:1px solid transparent; border-radius:0; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.btn:active{ transform:scale(.98); }
.btn__arrow{ transition:transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--red{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--red:hover{ background:var(--atl-red-deep); border-color:var(--atl-red-deep); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--atl-ink-1000); border-color:#fff; }
.lang-switch{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-weight:600; font-size:12px; letter-spacing:var(--track-wide); text-transform:uppercase; }
.lang-switch .lang{ color:var(--atl-ink-400); transition:color var(--dur-quick) var(--ease-out); }
.lang-switch .lang:hover{ color:#fff; }
.lang-switch .lang.is-active{ color:#fff; }
.lang-sep{ color:var(--atl-ink-600); }

/* ---------------------------- Charpente --------------------------------- */
.fnl{
  height:100dvh; min-height:100dvh;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--atl-ink-1000);
}
/* Repli pour les moteurs sans unite dvh. */
@supports not (height:100dvh){ .fnl{ height:100vh; min-height:100vh; } }

/* ------------------------------ Barre du haut --------------------------- */
.fnl__top{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:14px clamp(16px,3vw,40px);
  border-bottom:1px solid var(--atl-ink-800);
  background:var(--atl-ink-1000);
}
.fnl__logo img{ width:140px; height:auto; }

.fnl__progresswrap{ display:flex; align-items:center; gap:14px; min-width:0; }
.fnl__progress{
  flex:1 1 auto; min-width:0; height:2px; background:var(--atl-ink-700); position:relative;
}
.fnl__progressfill{
  position:absolute; inset:0 auto 0 0; width:0; background:var(--accent);
  transition:width var(--dur-slow, 380ms) var(--ease-out);
}
.fnl__count{
  margin:0; flex:none; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; color:var(--atl-ink-400);
}
.fnl__count span:first-child{ color:#fff; }
.fnl__countsep{ margin:0 3px; }

.fnl__topright{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.fnl__quit{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; font-size:11.5px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-400);
  transition:color var(--dur-quick) var(--ease-out);
}
.fnl__quit:hover{ color:#fff; }

/* ------------------------------ La scene -------------------------------- */
.fnl__stage{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
  min-height:0; overflow:hidden;
}

/* --- Colonne de gauche, la photo et le fait --- */
.fnl__aside{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--atl-ink-900);
  display:flex; align-items:flex-end;
}
.fnl__asidemedia{ position:absolute; inset:0; z-index:-2; }
.fnl__asidemedia img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.fnl__asidescrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.88) 100%);
}
.fnl__asidebody{
  position:relative; z-index:2;
  padding:clamp(28px,3.4vw,52px);
  border-left:2px solid var(--accent);
  margin:clamp(28px,3.4vw,52px);
}
.fnl__asidekicker{
  margin:0 0 18px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--atl-ink-400);
}
.fnl__facts{ position:relative; }
.fnlfact{ margin:0; }
.fnlfact__line{
  margin:0 0 14px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,1.9vw,29px); line-height:1.18;
  letter-spacing:var(--track-tight); color:#fff;
}
.fnlfact__meta{ font-size:13px; line-height:1.55; color:var(--atl-ink-300); }
html.motion .fnlfact:not([hidden]){ animation:fnlFactIn 420ms var(--ease-out) both; }
@keyframes fnlFactIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* --- Colonne de droite, les ecrans --- */
.fnl__scene{ position:relative; min-height:0; }
/* "Il y a la suite dessous". Le JS pose .has-more tant que l'ecran actif a du
   contenu sous le pli ; sans lui rien ne signale qu'un ecran defile, et sur
   l'ecran de relecture le consentement passe inapercu. */
.fnl__scene::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to top, var(--atl-ink-1000) 10%, rgba(0,0,0,0));
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out);
}
.fnl__scene.has-more::after{ opacity:1; }
.fslide{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(28px,4vw,64px) clamp(20px,4vw,72px);
  display:flex;
  /* "safe" est indispensable, pas cosmetique : un contenu centre qui deborde
     son conteneur defilant voit son HAUT rogne ET INATTEIGNABLE, on ne peut
     pas remonter jusqu'au titre. C'est arrive sur l'ecran de relecture, qui
     est le plus long. La forme non prefixee reste en repli pour les moteurs
     qui ignorent "safe" : ils retrouvent l'ancien comportement, pas une
     propriete invalide. */
  align-items:center;
  align-items:safe center;
}
.fslide[hidden]{ display:none; }
.fslide:focus{ outline:none; }
.fslide__inner{ width:100%; max-width:640px; margin-inline:auto; }
html.motion .fslide.is-active .fslide__inner{ animation:fnlSlideIn 380ms var(--ease-out) both; }
@keyframes fnlSlideIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.fslide__eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 16px;
  font-family:var(--font-sans); font-weight:700; font-size:11.5px;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--atl-ink-300);
}
.fslide__eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); flex:none; }
.fslide__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(27px,3.4vw,48px); line-height:1.02; letter-spacing:var(--track-tight);
  margin:0 0 16px;
}
.fslide__lede{ margin:0 0 30px; font-size:15.5px; line-height:1.65; color:var(--atl-ink-300); max-width:52ch; }
.fslide__note{ margin:22px 0 0; font-size:12.5px; line-height:1.6; color:var(--atl-ink-400); }
.fslide__foot{ margin:32px 0 0; font-size:14px; line-height:1.6; color:var(--atl-ink-300); }

/* --- Ecran 1, le rappel de la selection et les trois promesses --- */
.fslide__recap{
  border:1px solid var(--atl-ink-700); border-left:2px solid var(--accent);
  padding:18px 20px; margin:0 0 28px; background:var(--atl-ink-900);
}
.frecapline{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.frecapline__n{ font-family:var(--font-display); font-weight:800; font-size:24px; color:#fff; line-height:1; }
.frecapline__t{ font-size:14px; color:var(--atl-ink-300); }
.frecapchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.frecapchip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border:1px solid var(--atl-ink-700); background:var(--atl-ink-800);
  font-size:12px; color:var(--atl-ink-200); max-width:100%;
}
.frecapchip__code{ font-family:var(--font-mono); font-size:11px; color:var(--accent); flex:none; }
.frecapchip__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frecapchip--more{ color:var(--atl-ink-400); }
.frecapedit{
  display:inline-block; margin-top:14px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--atl-ink-400);
  border-bottom:1px solid var(--atl-ink-600); padding-bottom:2px;
  transition:color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.frecapedit:hover{ color:#fff; border-color:var(--accent); }

.fslide__promises{ display:grid; gap:12px; }
.fpromise{ display:flex; gap:14px; align-items:flex-start; }
.fpromise__k{ font-family:var(--font-mono); font-size:11px; color:var(--accent); flex:none; padding-top:3px; letter-spacing:.1em; }
.fpromise__t{ font-size:14px; line-height:1.6; color:var(--atl-ink-300); }

/* --- Les cartes a choisir --- */
.fchoice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fchoice--tight{ grid-template-columns:1fr; }
.fcard{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--atl-ink-700); background:var(--atl-ink-900);
  padding:16px 18px;
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.fcard:hover{ border-color:var(--atl-ink-500); background:var(--atl-ink-800); }
.fcard input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.fcard__body{ display:block; }
.fcard__title{
  display:block; font-family:var(--font-display); font-weight:700; font-size:15.5px;
  text-transform:uppercase; letter-spacing:.01em; color:#fff; line-height:1.15;
}
.fcard__desc{ display:block; margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--atl-ink-400); }
.fcard:has(input:checked){ border-color:var(--accent); background:var(--atl-ink-800); }
.fcard:has(input:checked)::after{
  content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--accent);
}
.fcard:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
/* Repli pour les moteurs sans :has(), la classe est posee par le JS. */
.fcard.is-checked{ border-color:var(--accent); background:var(--atl-ink-800); }

/* --- Les champs --- */
.ffields{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.ffield{ min-width:0; }
.ffield--full{ grid-column:1 / -1; }
.ffield__label{
  display:block; margin-bottom:8px;
  font-family:var(--font-sans); font-weight:700; font-size:11.5px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-300);
}
.ffield__input{
  width:100%; height:52px; padding:0 16px;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); color:#fff;
  font-family:var(--font-sans); font-size:15px; outline:none;
  transition:border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.ffield__input::placeholder{ color:var(--atl-ink-500); }
.ffield__input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,32,50,.18); }
.ffield__input[aria-invalid="true"]{ border-color:var(--accent); }
.ffield__select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--atl-ink-300) 50%),
                   linear-gradient(135deg,var(--atl-ink-300) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.ffield__select option{ background:var(--atl-ink-900); color:#fff; }
.ffield__textarea{
  height:auto; min-height:150px; padding:14px 16px; line-height:1.6; resize:vertical;
}
.ffield__hint{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--atl-ink-400);
}
.ffield__counter{ font-family:var(--font-mono); font-size:11px; flex:none; }

/* Le piege a robots. Hors flux ET hors ecran : display:none serait plus
   simple, mais une partie des robots ignore justement les champs caches de
   cette facon, et le piege ne prendrait plus rien. */
.fhoney{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.ferror{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--atl-red-soft); }
.ferror[hidden]{ display:none; }

/* --- Les cases a cocher --- */
.fcheck{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; cursor:pointer; }
.fcheck input{ width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }
.fcheck__text{ font-size:13.5px; line-height:1.6; color:var(--atl-ink-300); }
.fcheck--consent{ padding:16px 18px; border:1px solid var(--atl-ink-700); background:var(--atl-ink-900); }

/* --- Ecran 4, la respiration --- */
.fslide--pause .fslide__inner{ max-width:700px; }
.fstats{ display:grid; gap:26px; margin:8px 0 0; }
.fstat{ display:grid; grid-template-columns:minmax(90px,auto) 1fr; gap:22px; align-items:baseline;
  padding-top:18px; border-top:1px solid var(--atl-ink-700); }
.fstat__k{
  font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,46px);
  line-height:1; color:var(--accent); letter-spacing:var(--track-tight);
}
.fstat__unit{ font-size:.45em; letter-spacing:var(--track-wide); text-transform:uppercase; }
.fstat__v{ margin:0; font-size:14px; line-height:1.6; color:var(--atl-ink-300); }

/* --- Ecran 9, la relecture --- */
.frecap{ border-top:1px solid var(--atl-ink-700); margin:6px 0 0; }
.frecaprow{
  display:grid; grid-template-columns:minmax(120px,26%) 1fr auto; gap:16px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--atl-ink-800);
}
.frecaprow__k{
  font-family:var(--font-sans); font-weight:700; font-size:11px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-400);
}
.frecaprow__v{ font-size:14px; line-height:1.55; color:#fff; overflow-wrap:anywhere; white-space:pre-line; }
.frecaprow__v--quiet{ color:var(--atl-ink-500); }
.frecaprow__edit{
  background:none; border:0; padding:0; flex:none;
  font-family:var(--font-sans); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--atl-ink-500);
  border-bottom:1px solid transparent;
  transition:color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.frecaprow__edit:hover{ color:#fff; border-color:var(--accent); }
.frecaplist{ display:flex; flex-direction:column; gap:5px; }
.frecapitem{ font-size:13.5px; color:#fff; }
.frecapitem__code{ font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-right:8px; }
.frecapitem__qty{ font-family:var(--font-mono); font-size:11px; color:var(--atl-ink-400); margin-left:8px; }

.fsend-error{
  margin:20px 0 0; padding:14px 16px;
  border:1px solid var(--accent); border-left-width:3px; background:rgba(194,32,50,.1);
  font-size:13.5px; line-height:1.6; color:#fff;
}
.fsend-error[hidden]{ display:none; }

/* --- Ecran 10, la confirmation --- */
.fslide--done .fslide__inner{ max-width:620px; }
.fdone__mark{
  display:grid; place-items:center; width:66px; height:66px; margin-bottom:26px;
  border:2px solid var(--accent); color:var(--accent); border-radius:50%;
}
html.motion .fslide--done.is-active .fdone__mark{ animation:fnlPop 520ms var(--ease-out) both; }
@keyframes fnlPop{ from{ opacity:0; transform:scale(.7); } 60%{ transform:scale(1.06); } to{ opacity:1; transform:none; } }
.fdone__ref{
  margin:0 0 30px; padding:14px 18px; border:1px solid var(--atl-ink-700); background:var(--atl-ink-900);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.fdone__reflabel{
  font-family:var(--font-sans); font-weight:700; font-size:11px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-400);
}
.fdone__refval{ font-family:var(--font-mono); font-size:16px; color:#fff; letter-spacing:.06em; }
.fdone__next{ display:grid; gap:12px; margin:0 0 28px; }
.fdonestep{ display:flex; gap:14px; align-items:flex-start; }
.fdonestep__k{ font-family:var(--font-mono); font-size:11px; color:var(--accent); flex:none; padding-top:3px; letter-spacing:.1em; }
.fdonestep__t{ font-size:14px; line-height:1.6; color:var(--atl-ink-300); }
.fdone__urgent{ margin:0 0 30px; font-size:13.5px; color:var(--atl-ink-300); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.fdone__urgent a{ font-family:var(--font-mono); color:#fff; border-bottom:1px solid var(--accent); padding-bottom:2px; }
.fdone__urgent a:hover{ color:var(--accent); }
.fdone__hours{ font-size:12px; color:var(--atl-ink-500); }
.fdone__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ------------------------------ Barre du bas ---------------------------- */
.fnl__bottom{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(14px,3vw,32px);
  padding:16px clamp(16px,3vw,40px);
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  border-top:1px solid var(--atl-ink-800); background:var(--atl-ink-1000);
}
.fnl__back{
  display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:0;
  font-family:var(--font-sans); font-weight:700; font-size:11.5px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-400);
  transition:color var(--dur-quick) var(--ease-out);
}
.fnl__back:hover{ color:#fff; }
.fnl__back[hidden]{ display:none; }
.fnl__hint{
  margin:0; text-align:center; font-size:11.5px; letter-spacing:.04em;
  color:var(--atl-ink-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fnl__back{ grid-column:1; justify-self:start; }
.fnl__hint{ grid-column:2; }
.fnl__next{ grid-column:3; justify-self:end; min-width:190px; }
.fnl__next[disabled]{ opacity:.55; cursor:progress; }
/* .btn est en display:inline-flex, une classe : elle gagne sur la regle [hidden]
   du navigateur. Sans cette ligne, le bouton "Continuer" survit a l'ecran de
   confirmation. */
.fnl__next[hidden]{ display:none; }
/* Arrive a la confirmation, la barre entiere s'efface : cet ecran porte ses
   propres boutons, et une barre vide en bas de page ne dit rien. */
.fnl__bottom.is-done{ display:none; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:1080px){
  .fnl__stage{ grid-template-columns:1fr; }
  /* Sous cette largeur la colonne de gauche mangerait la place de la question.
     Les faits Atlantis ne disparaissent pas pour autant : soumission.js les
     reinjecte sous le titre de l'ecran de respiration, et le reste du temps
     ils cedent la place, ce qui est le bon arbitrage sur un ecran etroit. */
  .fnl__aside{ display:none; }
}
@media (max-width:720px){
  .fchoice{ grid-template-columns:1fr; }
  .ffields{ grid-template-columns:1fr; }
  .fnl__logo img{ width:112px; }
  .fnl__top{ grid-template-columns:auto 1fr; row-gap:12px; }
  .fnl__progresswrap{ order:3; grid-column:1 / -1; }
  .fnl__quittext{ display:none; }
  .fslide{ align-items:flex-start; }
  .fnl__hint{ display:none; }
  .fnl__bottom{ grid-template-columns:auto 1fr; }
  .fnl__next{ grid-column:2; justify-self:stretch; min-width:0; }
  .fstat{ grid-template-columns:1fr; gap:8px; }
  .frecaprow{ grid-template-columns:1fr auto; }
  .frecaprow__k{ grid-column:1 / -1; }
}

/* ---------------------------- Mouvement reduit -------------------------- */
@media (prefers-reduced-motion:reduce){
  html.motion .fslide.is-active .fslide__inner,
  html.motion .fnlfact:not([hidden]),
  html.motion .fslide--done.is-active .fdone__mark{ animation:none !important; }
  .fnl__progressfill{ transition:none; }
  .btn,.btn__arrow,.fcard,.ffield__input{ transition:none !important; }
}