/* ============================================================================
   app.krescia.com — LA PAGE DE VENTE
   Refonte du 10/08/2026, demandée par Saadou : « un effet SAAS un peu cyber et
   oppressant ». La page est donc SOMBRE, tendue, à filets fins et chiffres
   monospacés — l'inverse de la version claire précédente.

   ⚠️ Cette feuille est AUTONOME : la page ne charge plus styles.css (qui est la
   feuille de krescia.com, pensée pour du clair). `espace.html` et `admin.html`,
   eux, continuent de la charger — on ne les touche pas.

   L'accent ambre n'est pas décoratif : il sort des étincelles de la photo de
   chantier du hero. Une image, une couleur, une cohérence.
   ============================================================================ */

:root{
  /* 12/09/2026 — LE SYSTÈME CLAIR. Les jetons gardent leurs noms d'origine
     (nuit, vif, fil…) pour ne pas réécrire 1 300 lignes ; leurs valeurs sont
     celles de tokens.css : fond froid, encre, vert de marque, filets clairs.
     La seule bande sombre de la page est le hero (règles en pied de fichier). */
  --nuit:      #F4F6F5;   /* le fond de page : froid, jamais crème */
  --nuit-2:    #FFFFFF;   /* les panneaux : blanc */
  --nuit-3:    #E9F1EC;   /* les creux, les champs : lavis de vert */
  --fil:       #DCE3DE;   /* les filets */
  --fil-fort:  #121417;   /* les cadres appuyés : encre */
  --txt:       #121417;
  --txt-2:     #4a524e;
  --vif:       #0C5A37;   /* le vert de marque, le seul */
  --vif-sourd: #0C5A37;
  --ambre:     #F5A623;
  --encre:     #121417;
  --r:         6px;
  --w-max:     1120px;
  --mono:      var(--f-chiffre, 'Space Grotesk', system-ui, sans-serif);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.vente{
  font-family:var(--f-texte,system-ui,sans-serif);
  font-size:19px;line-height:1.62;color:var(--txt);
  background:var(--nuit);
  -webkit-font-smoothing:antialiased;
}
body.vente>*{position:relative;z-index:1}

/* ⛔ 09/09/2026 — LA BARRE NE PARTAIT JAMAIS EN HAUT DE L'ECRAN.
   Mesure : sur `index.html` scrolle a 1400 px, la barre calculait
   `position: relative` et `z-index: 1`, et son rectangle etait a -1369 px.
   Cause : la regle ci-dessus, `body.vente>*` (specificite 0,1,1), ecrasait
   `.bar{position:sticky;z-index:40}` (0,1,0) sur TOUS les enfants directs du
   body — l'entete comprise. Le `position:sticky` ecrit en ligne 62 n'a donc
   jamais rien colle depuis que la trame a ete posee.
   La barre reste visible en permanence : c'est la seule facon de revenir aux
   prix, aux pages produit ou a la connexion sans remonter toute la page. */
body.vente>header.bar,
body.pp>header.bar{position:sticky;top:0;z-index:60}

/* 12/09/2026 — ANOMALIE VUE A LA CAPTURE : les pages produit (archimede.html,
   euclide.html, body.pp) n'avaient AUCUNE police de corps. Seul body.vente en
   posait une ; .pp ne donnait que fond et encre, le texte tombait en serif
   navigateur (Times). Mesuré sur archimede.html a 390 et 1 440. */
body.pp{margin:0;font-family:var(--f-texte,system-ui,sans-serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}

img{max-width:100%;height:auto}
a{color:var(--vif);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--f-titre,system-ui,sans-serif);font-weight:600;line-height:1.1;letter-spacing:-.015em}
.w{max-width:var(--w-max);margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}

.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;z-index:99;background:var(--vif);color:#ffffff;padding:10px 16px;border-radius:var(--r);font-weight:700}

/* ------------------------------------------------------------ la barre --- */
.bar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--fil)}
.bar-in{display:flex;align-items:center;gap:20px;min-height:64px}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marque b{font-family:var(--f-titre,sans-serif);font-weight:600;font-size:23px;color:#121417;letter-spacing:-.01em}
.marque i{font-style:normal;color:var(--vif)}
.bar-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.bar-nav a{
  font-size:16px;color:var(--txt-2);text-decoration:none;padding:10px 14px;
  border:1px solid transparent;border-radius:var(--r);min-height:44px;
  display:inline-flex;align-items:center;transition:color .2s,border-color .2s,background .2s
}
.bar-nav a:hover{color:var(--txt);border-color:var(--fil);background:var(--nuit-2);text-decoration:none}

/* 09/09/2026 — LE BOUTON DE LA BARRE REDEVIENT UN BOUTON.
   `.bar-nav a` (specificite 0,2,0) ecrasait `.bt` (0,1,0) : « Créer un compte »
   heritait du gris des liens et d'une bordure transparente. L'action principale
   de la barre ne ressemblait donc a rien — un lien gris parmi d'autres. */
.bar-nav .bt{border:1px solid transparent}
.bar-nav .bt-p{background:var(--vif);color:#ffffff}
.bar-nav .bt-p:hover{background:var(--vif);color:#ffffff;border-color:transparent;box-shadow:0 8px 30px rgba(12,90,55,.34)}
.bar-nav .bt-s{color:var(--txt);border-color:var(--fil-fort);background:transparent}

/* ------------------------------------------------------------- boutons --- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-texte,sans-serif);font-weight:700;font-size:17px;
  min-height:52px;padding:13px 24px;border-radius:var(--r);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .18s,box-shadow .25s,background .2s,border-color .2s
}
.bt:hover{text-decoration:none;transform:translateY(-2px)}
.bt-p{background:var(--vif);color:#ffffff;box-shadow:0 0 0 rgba(12,90,55,0)}
.bt-p:hover{box-shadow:0 8px 30px rgba(12,90,55,.34)}
.bt-s{background:transparent;color:var(--txt);border-color:var(--fil-fort)}
.bt-s:hover{border-color:var(--vif);color:var(--vif)}
.bt-mini{min-height:44px;padding:9px 16px;font-size:15.5px}

/* ---------------------------------------------------------------- hero --- */
.hero-v{position:relative;overflow:hidden;padding:74px 0 86px;border-bottom:1px solid var(--fil)}
.hero-fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.46;filter:grayscale(.15) contrast(1.12) saturate(1.05)
}
/* Deux voiles : un dégradé vertical pour asseoir le texte, un halo ambré au
   niveau des étincelles pour que la photo « éclaire » la page. */
.hero-v::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 24% 76%, rgba(245,166,35,.26), transparent 70%),
    linear-gradient(180deg, rgba(7,16,12,.80) 0%, rgba(7,16,12,.58) 42%, rgba(7,16,12,.94) 100%)
}
.hero-v>.w{position:relative;z-index:2}
/* 09/09/2026 — le titre sort de la colonne. A 84 px (plancher C50) dans une
   colonne de 540 px il tombait sur six lignes et poussait les deux boutons
   sous la ligne de flottaison. Pleine largeur, il tient sur trois. */
.hero-v-tete{margin-bottom:34px}
@media (min-width:1000px){.hero-v-grille{align-items:start}}
.hero-v-grille{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.hero-v-grille{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:52px}}
.hero-v-grille>*{min-width:0}
.sur{
  font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vif);margin-bottom:16px
}
/* 09/09/2026 — C50 : le titre plafonnait a 58 px. Sans ecart d'echelle il
   n'y a pas de hierarchie : le h1 ne se distinguait plus assez du corps a
   19 px. Plancher de la regle : 80 px sur le plus grand texte du site. */
.hero-v h1{font-size:clamp(34px,6.6vw,84px);color:#121417;margin-bottom:0;max-width:20ch}
/* ⚠️ Pas de white-space:nowrap ici : « factures et vos devis » ne tient pas
   sur 320 px et faisait deborder la page de 42 px (width-sweep du 10/08).
   Le surlignage passe donc en degrade de fond, qui se coupe proprement a
   chaque retour a la ligne grace a box-decoration-break. */
.souligne{
  background:linear-gradient(180deg,transparent 62%,var(--ambre) 62%,var(--ambre) 96%,transparent 96%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 2px
}
.hero-v .chapo{font-size:19.5px;color:var(--txt);max-width:56ch;margin-bottom:28px}
.hero-v .chapo b{color:#121417;background:rgba(245,166,35,.14);padding:1px 5px;border-radius:3px}
.hero-v-act{display:flex;flex-wrap:wrap;gap:13px}

/* ------------------------------------------------ LA FEUILLE (Martin & Fils)
   Ce n'est pas une illustration : c'est la structure réelle d'un devis —
   les deux parties, la TVA par ligne, la validité. Sur fond sombre, la feuille
   reste BLANCHE : c'est du papier, il ne se déguise pas. */
.doc{
  background:#fff;color:#14201A;border-radius:6px;overflow:hidden;
  box-shadow:0 30px 70px rgba(18,20,23,.14);border:1px solid rgba(18,20,23,.08);
  font-size:14.5px;line-height:1.5
}
.doc-hd{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:2px solid #14201A}
.doc-blason{
  font-family:var(--mono);font-weight:700;font-size:15px;color:#121417;background:#14201A;
  padding:9px 11px;border-radius:3px;flex:none;letter-spacing:.02em
}
.doc-id b{display:block;font-family:var(--mono);font-size:14.5px;letter-spacing:.02em}
.doc-id span{display:block;color:#5A6862;font-size:13px;margin-top:3px}
.doc-date{margin-left:auto;text-align:right;font-size:12.5px;color:#5A6862;flex:none}
.doc-date span{display:block}
.doc-date b{color:#14201A;font-family:var(--mono)}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 18px;border-bottom:1px dashed #C9D3CE}
.doc-parties b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#5A6862;margin-bottom:4px}
.doc-parties p{font-size:13.5px}
.doc-lignes{width:100%;border-collapse:collapse}
.doc-lignes th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#5A6862;font-weight:600;padding:9px 18px;border-bottom:1px solid #C9D3CE;background:#F3F6F4
}
.doc-lignes th:last-child,.doc-lignes td:last-child{text-align:right}
.doc-lignes th:nth-child(2),.doc-lignes td:nth-child(2){text-align:center;white-space:nowrap}
.doc-lignes td{padding:11px 18px;border-bottom:1px dashed #DDE4E0;vertical-align:top}
.doc-lignes td:last-child{font-family:var(--mono);white-space:nowrap}
.doc-total td{
  background:#14201A;color:#121417;font-weight:700;border-bottom:0;padding:13px 18px
}
.doc-total td:last-child{font-family:var(--mono);font-size:18px}
.doc-sig{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;font-size:12.5px;color:#5A6862}
.doc-paraphe{font-family:var(--f-titre,cursive);font-size:20px;color:#14201A;transform:rotate(-4deg)}
.doc-men{padding:11px 18px;font-size:12px;color:#5A6862;border-top:1px dashed #C9D3CE}
@media (min-width:1000px){
  .hero-v-doc .doc{transform:rotate(-1.1deg)}
}

/* --------------------------------------------------- LES DEUX OUTILS ------
   L'effet demandé : quand la souris s'approche d'une carte, elle s'allume et
   l'AUTRE s'assombrit. C'est ce contraste qui « oppresse » — pas un effet posé
   sur la carte survolée, mais la pénombre jetée sur sa voisine. */
.deux{padding:86px 0}
.duo{display:grid;gap:22px}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:26px}}
.ot{
  position:relative;overflow:hidden;
  background:var(--nuit-2);border:1px solid var(--fil);border-radius:var(--r);
  padding:30px 26px 26px;display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s,filter .45s,opacity .45s
}
.ot-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;pointer-events:none;
  left:var(--mx,50%);top:var(--my,0%);transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(12,90,55,.16), transparent 66%);
  opacity:0;transition:opacity .4s
}
.ot[data-ot="euclide"] .ot-glow{background:radial-gradient(circle, rgba(245,166,35,.16), transparent 66%)}
.duo.duo-on .ot.est-vise{border-color:var(--fil-fort);transform:translateY(-4px)}
.duo.duo-on .ot.est-vise .ot-glow{opacity:1}
.duo.duo-on .ot.est-terne{filter:brightness(.42) saturate(.5);opacity:.72}
.ot-logo{width:60px;height:60px;margin-bottom:14px}
.ot h2{font-size:clamp(27px,3.4vw,34px);color:#121417}
.ot[data-ot="euclide"] h2{color:#121417}
.ot-role{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vif);margin:6px 0 14px
}
.ot[data-ot="euclide"] .ot-role{color:var(--ambre)}
.ot>p{color:var(--txt-2);font-size:17px}
.ot>p b{color:var(--txt)}
.ot-l{list-style:none;margin:16px 0 22px;display:grid;gap:9px}
.ot-l li{position:relative;padding-left:22px;font-size:16px;color:var(--txt-2)}
.ot-l li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:5px;
  border-left:2px solid var(--vif);border-bottom:2px solid var(--vif);transform:rotate(-45deg)
}
.ot[data-ot="euclide"] .ot-l li::before{border-color:var(--ambre)}
.ot-bas{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.ot-prix{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.ot-prix b{font-family:var(--mono);font-size:32px;color:#121417;line-height:1}
.ot-prix span{color:var(--txt-2);font-size:16px}
.ot-prix i{flex-basis:100%;font-style:normal;font-size:14px;color:var(--txt-2)}
.ot-note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--fil);font-size:14.5px;color:var(--txt-2)}

/* ------------------------------------------------------------- ESSAIS ----- */
.essai{padding:82px 0;border-top:1px solid var(--fil)}
.essai--euclide{background:linear-gradient(180deg, var(--nuit) 0%, #E9F1EC 100%)}
.essai--archimede{background:linear-gradient(180deg, #E9F1EC 0%, var(--nuit) 100%)}
/* ⚠️ flex-wrap : sans lui, « Essayer » et « Archimede » sont deux elements de
   flex qui refusent de passer a la ligne — 1 px de debordement a 360 px, et
   c'est toute la page qui defile horizontalement (width-sweep du 10/08). */
.essai-t{display:flex;flex-wrap:wrap;align-items:center;gap:10px 15px;font-size:clamp(26px,4vw,40px);color:#121417}
.essai-t span{overflow-wrap:anywhere}
.essai-t img{width:44px;height:44px;flex:none}
.essai--euclide .essai-t span{color:var(--ambre)}
.essai--archimede .essai-t span{color:var(--vif)}
.essai-s{color:var(--txt-2);margin:12px 0 30px;max-width:62ch;font-size:17.5px}
.essai-note{margin-top:14px;font-size:14px;color:var(--txt-2)}

.atelier{display:grid;gap:26px;align-items:start}
@media (min-width:940px){.atelier{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px}}
.atelier>*{min-width:0}
.at-bloc{margin-bottom:20px}
.at-lab{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-2);margin-bottom:8px}
.ch{
  width:100%;font:inherit;font-size:16.5px;color:var(--txt);
  background:var(--nuit-3);border:1px solid var(--fil);border-radius:var(--r);
  padding:12px 14px;min-height:48px;transition:border-color .2s
}
.ch:focus{outline:none;border-color:var(--vif)}
.lg{
  display:grid;grid-template-columns:1fr 92px 78px 44px;gap:8px;align-items:center;
  margin-bottom:9px
}
.lg .ch{min-height:46px;padding:9px 11px;font-size:15.5px}
.lg .ch--px{font-family:var(--mono);text-align:right}
.lg select.ch{appearance:none;text-align:center;padding-right:11px;cursor:pointer}
.lg .sup{
  min-height:46px;width:44px;border:1px solid var(--fil);border-radius:var(--r);
  background:transparent;color:var(--txt-2);font-size:19px;cursor:pointer;line-height:1;
  transition:border-color .2s,color .2s
}
.lg .sup:hover{border-color:#B23B32;color:#E4675C}
@media (max-width:560px){.lg{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .lg .ch--des{grid-column:1/-1}}

/* le parcours Archimède */
.wiz{background:var(--nuit-2);border:1px solid var(--fil);border-radius:var(--r);overflow:hidden;max-width:760px}
.wiz-etat{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--fil)}
.wiz-pas{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--vif);flex:none}
.wiz-jauge{flex:1;height:3px;background:var(--nuit-3);border-radius:2px;overflow:hidden}
.wiz-jauge i{display:block;height:100%;width:25%;background:var(--vif);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.wiz-corps{padding:26px 20px 28px}
.wiz-corps h3{font-size:clamp(21px,2.8vw,27px);color:#121417;margin-bottom:6px}
.wiz-aide{color:var(--txt-2);font-size:16px;margin-bottom:20px}
.choix{display:grid;gap:10px;margin-bottom:20px}
.cx{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--nuit-3);border:1px solid var(--fil);border-radius:var(--r);
  padding:15px 17px;min-height:56px;color:var(--txt);font:inherit;font-size:16.5px;
  transition:border-color .2s,background .2s,transform .18s
}
.cx:hover{border-color:var(--vif);transform:translateX(3px)}
.cx b{margin-left:auto;font-family:var(--mono);color:var(--vif);white-space:nowrap}
.cx .cx-d{display:block;font-size:14px;color:var(--txt-2);margin-top:2px}
.wiz-fin{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.wiz-doc{margin-top:6px}
.wiz-sig{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px dashed var(--fil-fort);border-radius:var(--r);padding:18px;margin:16px 0;
  color:var(--txt-2);font-size:15.5px
}
.wiz-ok{
  border:1px solid var(--vif);background:rgba(12,90,55,.08);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px
}
.wiz-ok b{color:var(--vif);display:block;margin-bottom:4px;font-size:18px}

/* ---------------------------------------------------------------- PRIX ---- */
.prix{padding:86px 0;border-top:1px solid var(--fil)}
.prix h2{font-size:clamp(28px,4vw,40px);color:#121417}
.prix-s{color:var(--txt-2);margin:10px 0 34px;font-size:17.5px}
.tarifs{display:grid;gap:20px}
@media (min-width:900px){.tarifs{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.tf{
  background:var(--nuit-2);border:1px solid var(--fil);border-radius:var(--r);
  padding:26px 22px;display:flex;flex-direction:column;position:relative;
  transition:border-color .3s,transform .3s
}
/* I36 : pas de survol sur un element non cliquable (Bible 07 §1.5) */
.tf--phare{
  border-color:var(--vif);background:linear-gradient(180deg, rgba(12,90,55,.09), var(--nuit-2) 55%);
  box-shadow:0 0 0 1px rgba(12,90,55,.28), 0 20px 60px rgba(12,90,55,.12)
}
@media (min-width:900px){.tf--phare{transform:scale(1.035)}} /* I36 : pas de survol sur un element non cliquable (Bible 07 §1.5) */
.tf-etq{
  position:absolute;top:-11px;left:22px;background:var(--vif);color:#ffffff;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;font-weight:700
}
.tf-n{font-family:var(--mono);font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-2);margin-bottom:10px}
.tf-p{display:flex;align-items:baseline;gap:5px}
.tf-p b{font-family:var(--mono);font-size:44px;color:#121417;line-height:1}
.tf-p span{color:var(--txt-2);font-size:17px}
.tf-m{font-size:15px;color:var(--ambre);margin:4px 0 14px}
.tf-d{font-size:16px;color:var(--txt-2);margin-bottom:22px}
.tf .bt{margin-top:auto;width:100%}
/* Sous le bouton : ce qui se passe quand on clique. Deux des trois cartes
   menaient a un calendrier alors que le bouton disait « Commencer ». */
.tf-pourquoi{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--txt-2)}
.prix-eng{margin-top:26px;font-size:16px;color:var(--txt-2);max-width:70ch}
.prix-eng b{color:var(--txt)}

/* ----------------------------------------------------------------- FAQ ---- */
.faq-v{padding:82px 0;border-top:1px solid var(--fil)}
.faq-v h2{font-size:clamp(26px,3.6vw,36px);color:#121417;margin-bottom:26px}
.faq-v details{
  background:var(--nuit-2);border:1px solid var(--fil);border-radius:var(--r);
  margin-bottom:11px;overflow:hidden
}
.faq-v summary{
  cursor:pointer;list-style:none;padding:17px 20px;min-height:56px;
  display:flex;align-items:center;gap:12px;font-weight:600;font-size:17.5px;color:#121417
}
.faq-v summary::-webkit-details-marker{display:none}
.faq-v summary::after{
  content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:2px solid var(--vif);border-bottom:2px solid var(--vif);
  transform:rotate(45deg);transition:transform .25s
}
.faq-v details[open] summary::after{transform:rotate(-135deg)}
.faq-v details p{padding:0 20px 19px;color:var(--txt-2);font-size:16.5px}

/* -------------------------------------------------------------- footer ---- */
footer{border-top:1px solid var(--fil);padding:30px 0 40px;background:#ffffff}
footer .w{display:grid;gap:12px;font-size:14.5px;color:var(--txt-2)}
/* ⚠️ 09/09/2026 — `flex-wrap` obligatoire : sans lui les enfants du pied se
   compressent au lieu de passer à la ligne. Sur 390 px le numéro sortait en trois
   morceaux (« 07 82 » / « 11 39 » / « 15 ») et « Meulan-en-Yvelines » aussi.
   ⚠️ Le même correctif est dans styles.css : les deux feuilles servent, selon la
   page (admin et espace ne chargent que styles.css). */
footer .fm{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;color:var(--txt)}
footer a[href^="tel:"]{white-space:nowrap}
footer .fm b{white-space:nowrap}
footer .fm b{color:#121417}
footer nav{display:flex;flex-wrap:wrap;gap:6px}
footer a{color:var(--txt-2)}
footer a:hover{color:var(--vif)}

/* ============================ ANIMATIONS ==================================
   Même doctrine que krescia.com : aucune classe d'animation dans le markup,
   tout est porté par `.js` (posée par app.js), failsafe temporisé, et la page
   est entièrement lisible sans JavaScript. */
.js [data-rv]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv-in[data-rv],.js .rv-in [data-rv]{opacity:1;transform:none}

.js [data-deplie] details{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;opacity:.5}
.js [data-deplie] details:nth-of-type(2){transform:translateY(-62px) scale(.985)}
.js [data-deplie] details:nth-of-type(3){transform:translateY(-124px) scale(.97)}
.js [data-deplie] details:nth-of-type(4){transform:translateY(-186px) scale(.955)}
.js [data-deplie] details:nth-of-type(5){transform:translateY(-248px) scale(.94)}
.js [data-deplie] details:nth-of-type(6){transform:translateY(-310px) scale(.925)}
.js [data-deplie].rv-in details{transform:none;opacity:1}
.js [data-deplie].rv-in details:nth-of-type(2){transition-delay:.05s}
.js [data-deplie].rv-in details:nth-of-type(3){transition-delay:.1s}
.js [data-deplie].rv-in details:nth-of-type(4){transition-delay:.15s}
.js [data-deplie].rv-in details:nth-of-type(5){transition-delay:.2s}
.js [data-deplie].rv-in details:nth-of-type(6){transition-delay:.25s}

@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js [data-deplie] details{opacity:1;transform:none;transition:none}
  .duo.duo-on .ot.est-terne{filter:none;opacity:1}
  .duo.duo-on .ot.est-vise{transform:none}
  .ot-glow{display:none}
  .bt:hover{transform:none}
}

/* La feuille de devis sur un petit telephone : le tableau a trois colonnes ne
   tient pas a 320 px. On resserre, on autorise la coupure des mots longs, et
   la colonne des montants garde sa largeur — c'est elle qu'on vient lire. */
@media (max-width:400px){
  .doc{font-size:13.5px}
  .doc-lignes th,.doc-lignes td{padding:8px 10px}
  .doc-lignes td:first-child{word-break:break-word;hyphens:auto}
  .doc-hd,.doc-parties,.doc-men,.doc-sig{padding-left:12px;padding-right:12px}
  .doc-parties{grid-template-columns:1fr;gap:10px}
}

/* Le rendez-vous, pose la ou l'on hesite sur le prix — et nulle part ailleurs :
   c'est le seul endroit de la page ou parler a quelqu'un fait gagner du temps. */
.prix-rdv{
  display:inline-flex;align-items:center;min-height:44px;margin-left:6px;
  color:var(--vif);border-bottom:1px solid var(--fil-fort)
}
.prix-rdv:hover{border-bottom-color:var(--vif);text-decoration:none}

/* La barre sur un telephone : « Presence en ligne » passait a la ligne et
   doublait la hauteur de l'en-tete. On la garde d'un bloc et on resserre. */
.bar-nav a{white-space:nowrap}
@media (max-width:600px){
  /* 19/09/2026, Saadou : « sur telephone on a un probleme de visuel ».
     MESURE : logo + « Krescia » + menu + « Creer un compte » ne tiennent pas dans
     390 px — le bouton sortait du bord droit. Deux gestes, TELEPHONE UNIQUEMENT,
     et en CSS seul : les 14 pages de app.krescia en profitent sans toucher un HTML.
       · le mot « Krescia » sort de la barre : le logo le dit deja, et le lien garde
         son aria-label « Krescia — accueil », donc rien n'est perdu a la lecture d'ecran
       · la barre gagne les bords : la gouttiere passe de 22 px a 12 px */
  .bar .marque b{display:none}
  .bar > .w{padding-inline:12px}
  .bar-in{gap:8px;min-height:58px}
  .marque b{font-size:20px}
  .bar-nav{gap:2px}
  .bar-nav a{font-size:14.5px;padding:9px 9px}
}


/* ══════════════════════════════════════════════════════════════════════════
   LES CAPTURES — le produit, pas son portrait
   ══════════════════════════════════════════════════════════════════════════
   Ces images sortent de l'outil : un devis reellement emis, l'espace d'un
   artisan avec ses vraies demandes. Elles remplacent les fac-similes en HTML
   qui occupaient le hero — jolis, mais ils ne prouvaient rien et il fallait
   les retoucher a la main a chaque changement du vrai document.
   Le cadre est clair sur une page sombre : c'est ce contraste qui fait lire
   la capture comme une fenetre ouverte sur le logiciel. */
.cadre{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--fil-fort);
  box-shadow:0 24px 60px rgba(18,20,23,.12), 0 0 0 1px rgba(18,20,23,.04)}
.cadre img{display:block;width:100%;height:auto}
.cadre figcaption{
  padding:11px 16px;font-size:13.5px;color:var(--txt-2);
  background:var(--nuit-2);border-top:1px solid var(--fil)}
/* Le devis du hero est un document debout : on le borne pour qu'il ne pousse
   pas le texte hors de l'ecran, et on garde le haut — en-tete, parties, total. */
.cadre--doc img{max-height:none}

/* ---------- en trois ecrans ---------- */
.etapes{padding:86px 0;border-top:1px solid var(--fil);background:var(--nuit-2)}
.etapes h2{font-size:clamp(27px,3.6vw,38px);color:#121417;margin-bottom:34px}
.et-l{list-style:none;margin:0;padding:0;display:grid;gap:52px}
.et{display:grid;gap:22px;align-items:center}
@media (min-width:900px){
  .et{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px}
  /* Une etape sur deux inverse l'ordre : le regard fait des allers-retours au
     lieu de descendre une colonne.
     ⚠️ Il faut inverser AUSSI les largeurs, sinon la capture se retrouve dans
     la colonne etroite prevue pour le texte — la deuxieme etape sortait deux
     fois plus petite que ses voisines. */
  .et:nth-child(even){grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .et:nth-child(even) .et-txt{order:2}
}
.et>*{min-width:0}
.et-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  font-family:var(--mono);font-size:15px;color:var(--vif);
  border:1px solid var(--fil-fort);margin-bottom:12px}
.et h3{font-size:clamp(21px,2.6vw,27px);color:#121417;margin-bottom:8px}
.et p{color:var(--txt-2);font-size:17px;max-width:44ch}

@media (max-width:900px){
  .etapes{padding:60px 0}
  .et-l{gap:40px}
  .et p{font-size:16px}
}

/* 09/09/2026 — LA BARRE NE PERD PLUS SES LIENS.
   Avant : sous 720 px les quatre liens disparaissaient et la nav mobile ne
   proposait plus que « Créer un compte ». Un lien qui s'évapore n'est pas une
   nav sobre, c'est une nav absente : on ne pouvait plus atteindre les pages
   produit, les prix, ni la connexion depuis la barre.
   Maintenant : au-delà de 720 px les liens restent en clair ; en dessous ils
   passent dans un vrai menu. Règle de la v4 (validée le 08/09) : plus de trois
   liens = un menu, jamais une disparition. CSS pur (<details>) — les pages
   produit ne chargent pas app.js, un menu en JS y serait mort. */
.bar-menu{display:none}
.bar-menu>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--fil-fort);
  border-radius:var(--r);background:transparent;transition:background .2s,border-color .2s
}
.bar-menu>summary::-webkit-details-marker{display:none}
.bar-menu>summary:hover{background:var(--nuit-2);border-color:var(--vif)}
.bar-ic{display:block;width:18px;height:2px;background:var(--txt);box-shadow:0 -6px 0 var(--txt),0 6px 0 var(--txt)}
.bar-menu[open]>summary{background:var(--nuit-2);border-color:var(--vif)}
.bar-menu[open] .bar-ic{background:var(--vif);box-shadow:0 -6px 0 var(--vif),0 6px 0 var(--vif)}
/* Le panneau s'accroche a l'ENTETE (sticky, donc bloc conteneur), pas au
   bouton : ancre au bouton, un panneau de 320 px sortait par la gauche de
   l'ecran a 390 px. Il occupe donc toute la largeur de la barre, moins ses
   marges. */
.bar-panel{
  position:absolute;left:14px;right:14px;top:100%;z-index:50;
  background:var(--nuit-2);border:1px solid var(--fil-fort);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(18,20,23,.14);overflow:hidden
}
.bar-panel a{
  display:block;padding:13px 16px;font-size:17px;font-weight:700;color:var(--txt);
  border-top:1px solid var(--fil);min-height:0
}
.bar-panel a:first-child{border-top:0}
.bar-panel a small{display:block;font-size:14px;font-weight:400;color:var(--txt-2);margin-top:1px}
.bar-panel a:hover{background:var(--nuit-3);color:var(--vif)}
.bar-panel a:hover small{color:var(--txt-2)}

@media (max-width: 720px) {
  .bar-nav .nav-pli { display: none; }
  .bar-menu { display: block; }
}

/* 09/09/2026 — le téléphone revient dans les CTA (règle Saadou du 05/09) */
/* ⛔ 09/09/2026 — LE NUMERO ETAIT INVISIBLE. La regle avait ete recopiee telle
   quelle depuis krescia.com, qui est un site CLAIR : `--encre` n'existe pas
   dans ce fichier, la valeur de repli #16232B est un marine sombre, et il
   tombait sur le fond nuit de l'app. Le numero de Saadou ne se lisait donc nulle
   part sur la page de vente. Il prend les jetons de l'app. */
.tel-ligne{font-weight:800;color:#121417;text-decoration:none;
  border-bottom:2px solid var(--ambre);padding-bottom:1px}
.tel-ligne:hover{color:var(--ambre)}

/* ══ LA FEUILLE — le document tel qu'il part chez le client ════════════════
   Pose du 09/09/2026, demande de Saadou : « le devis à bien mieux faire, prends
   Martin & Fils en exemple, faut qu'il s'affiche bien comme sur le site ».

   Ce que la démonstration d'Euclide montrait avant : un blason « M&F » écrit en
   toutes lettres, un numéro figé, deux noms en guise de parties, trois colonnes,
   une ligne de mention. Le visiteur jugeait le produit sur un document que le
   produit n'émet pas.

   Ce bloc reproduit la feuille RÉELLE, celle que rend `_lib/feuille.js` et
   qu'on voit sur le site de Martin & Fils : marine sur papier blanc, serif,
   filets, et la même hiérarchie. Les couleurs sont celles de sa marque
   (`marque.couleur` = #1d3557), pas celles de Krescia : un document porte la
   marque de l'artisan, jamais la nôtre.
   ══════════════════════════════════════════════════════════════════════════ */
.feuille{
  --f-marine:#1d3557; --f-encre:#16202b; --f-gris:#5c6670;
  --f-fil:#d7dde4; --f-fond:#eff1f3;
  background:#fff;color:var(--f-encre);border-radius:6px;overflow:hidden;
  font-family:Georgia,'Times New Roman',serif;font-size:13.5px;line-height:1.5;
  box-shadow:0 18px 50px rgba(18,20,23,.1)
}

/* L'en-tête : le logo et l'identité à gauche, le numéro et les dates à droite,
   le filet marine qui ferme le bloc — la signature visuelle du document. */
.f-hd{display:flex;align-items:center;gap:13px;padding:15px 17px;border-bottom:2px solid var(--f-marine)}
.f-logo{width:44px;height:auto;flex:none}
.f-qui b{display:block;font-size:17px;font-weight:700;line-height:1.15}
.f-qui span{display:block;font-size:11.5px;color:var(--f-gris);margin-top:1px}
.f-num{margin-left:auto;text-align:right;flex:none}
.f-num b{display:block;font-size:14px;font-weight:700;color:var(--f-marine);letter-spacing:.01em;white-space:nowrap}
.f-num span{display:block;font-size:11.5px;color:var(--f-gris);margin-top:2px}

/* Les deux parties. Le bloc client est posé sur un aplat : c'est ce contraste
   qui fait lire « ce document est adressé à quelqu'un ». */
.f-parties{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--f-fil)}
.f-parties>div{padding:12px 17px}
.f-parties>div+div{background:var(--f-fond);border-left:1px solid var(--f-fil)}
.f-parties b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
             color:var(--f-marine);margin-bottom:5px;font-weight:700}
.f-parties p{font-size:12.5px;line-height:1.55;margin:0}

.f-objet{padding:11px 17px;margin:0;border-bottom:1px solid var(--f-fil);font-size:13px}
.f-objet b{color:var(--f-marine);font-weight:700}

/* Le tableau : bandeau marine, alignements à droite sur les montants. */
.f-lignes{width:100%;border-collapse:collapse}
.f-lignes th{
  background:var(--f-marine);color:#121417;text-align:left;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:9px 17px
}
.f-lignes th:not(:first-child),.f-lignes td:not(:first-child){text-align:right;white-space:nowrap}
.f-lignes td{padding:10px 17px;border-bottom:1px solid var(--f-fil);vertical-align:top;font-size:12.5px}
.f-lignes tr:last-child td{border-bottom:0}
.f-lignes i{color:var(--f-gris)}

/* Les totaux : un aplat, alignés à droite, le TTC en grand marine. C'est le
   seul chiffre que le client cherche des yeux. */
.f-tot{background:var(--f-fond);padding:11px 17px 13px;border-top:1px solid var(--f-fil)}
.f-tot>div{display:flex;justify-content:flex-end;gap:26px;align-items:baseline;padding:2px 0}
.f-tot span{color:var(--f-gris);font-size:12.5px}
.f-tot i{font-style:normal;min-width:96px;text-align:right;font-size:12.5px}
.f-tot .f-ttc{margin-top:6px;padding-top:8px;border-top:1px solid var(--f-fil)}
.f-tot .f-ttc span{color:var(--f-encre);font-weight:700;font-size:14px}
.f-tot .f-ttc i{color:var(--f-marine);font-weight:700;font-size:20px}

.f-dispo{padding:10px 17px;margin:0;border-top:1px solid var(--f-fil);font-size:12.5px}
.f-dispo b{color:var(--f-marine);font-weight:700}

.f-men{padding:11px 17px;background:var(--f-fond);border-top:1px solid var(--f-fil)}
.f-men>b{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
         color:var(--f-marine);margin-bottom:6px;font-weight:700}
.f-men ul{margin:0;padding-left:16px}
.f-men li{font-size:11.5px;line-height:1.5;color:var(--f-gris);margin-bottom:3px}

/* Les deux cases de signature : c'est leur présence qui fait qu'un document
   ressemble à un devis et pas à un récapitulatif. */
.f-sig{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--f-fil)}
.f-sig>div{padding:12px 17px 11px}
.f-sig>div+div{border-left:1px solid var(--f-fil)}
.f-sig b{display:block;font-size:13px;font-weight:700;margin-bottom:22px}
.f-sig i{display:block;border-bottom:1px dotted var(--f-gris);height:1px;margin-bottom:6px}
.f-sig span{font-size:10.5px;color:var(--f-gris)}
.f-sig .f-paraphe{font-style:italic;font-size:17px;color:var(--f-marine);
                  border-bottom:1px dotted var(--f-gris);height:auto;
                  transform:rotate(-3deg);transform-origin:0 50%}

@media (max-width:560px){
  .feuille{font-size:12.5px}
  .f-parties,.f-sig{grid-template-columns:1fr}
  .f-parties>div+div,.f-sig>div+div{border-left:0;border-top:1px solid var(--f-fil)}
  .f-hd{flex-wrap:wrap}
  .f-num{margin-left:0;text-align:left;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE MOUVEMENT — pose du 09/09/2026

   LE PROBLÈME, MESURÉ. La page n'avait AUCUN `@keyframes`. Une seule animation
   existait — `translateY(20px)` + fondu — répétée 23 fois sur 7 sections. C'est
   exactement la faute relevée sur la démo Pro v3 le 05/09 (« tu répètes en
   boucle la même animation »), et le seul effet un peu marqué, le duel des deux
   cartes, était sous `hover: hover` : donc invisible sur téléphone.

   LA RÈGLE (doctrine `animations/10-le-rythme-des-animations.md`, dictée le
   19/08) : une animation ostentatoire minimum toutes les 2 sections, 2 par
   section au maximum, des discrètes entre. Une animation = un TOUT, un geste
   perçu comme un seul mouvement — pas un compte de propriétés.
   7 sections, donc 4 ostentatoires. Elles sont TOUTES DIFFÉRENTES : Krescia n'a
   pas de mouvement phare, et une animation répétée ne devient une signature que
   par exception (Saadou, 07/09).

   LA TECHNIQUE. `animation-timeline: view()` — piloté par le scroll, en CSS
   natif, 0 ko de JavaScript. Emprunté au motion-lab : pattern 01 (échelle et
   titre) pour le hero, 06 (grille sticky) pour les trois écrans, 12 (preuve
   chiffrée) pour les prix. Tout est enfermé sous `@supports` : un navigateur
   qui ne sait pas piloter par le scroll n'en cache jamais rien.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · HERO (ostentatoire) — le titre se lève, puis le trait se trace ─────
   Le geste EST le produit : un devis qu'on signe. Le surlignage ambre part de
   la gauche comme un trait de stylo, une fois le titre en place. */
.hero-v h1{clip-path:inset(0 0 0 0)}
.souligne{
  background-image:linear-gradient(180deg,transparent 62%,var(--ambre) 62%,var(--ambre) 96%,transparent 96%);
  background-repeat:no-repeat;background-size:100% 100%
}

@media (prefers-reduced-motion: no-preference){
  .js .hero-v h1{
    clip-path:inset(0 0 100% 0);
    animation:titre-leve 1s cubic-bezier(.22,1,.36,1) .1s forwards
  }
  .js .hero-v h1 .souligne{
    background-size:0 100%;
    animation:trait-stylo .55s cubic-bezier(.4,0,.2,1) .95s forwards
  }
}
/* Le reste du hero entre APRES le titre, et plus discretement (pattern 01) :
   avant, le chapo et les deux boutons etaient deja en place quand le titre
   n'avait pas encore commence a se lever — la lecture se faisait a l'envers. */
@media (prefers-reduced-motion: no-preference){
  .js .hero-v .sur,.js .hero-v .chapo,.js .hero-v-act{
    opacity:0;transform:translateY(14px);
    animation:hero-suite .8s cubic-bezier(0,0,.58,1) both
  }
  .js .hero-v .sur{animation-delay:0s}
  .js .hero-v .chapo{animation-delay:.72s}
  .js .hero-v-act{animation-delay:.86s}
}
@keyframes hero-suite{to{opacity:1;transform:none}}
@keyframes titre-leve{to{clip-path:inset(0 0 0 0)}}
@keyframes trait-stylo{to{background-size:100% 100%}}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* ── 3 · LES DEUX OUTILS (ostentatoire) ────────────────────────────────
       Le duel existait déjà, mais uniquement au survol : sur téléphone, où
       passe la majorité du trafic, il n'a jamais tourné une seule fois.
       Piloté par le scroll, la carte qui arrive s'allume et se redresse ;
       elles n'entrent pas ensemble, on ne peut pas les regarder toutes les
       deux à la fois — c'est ce décalage qui produit la tension. */
    .ot{
      opacity:.3;transform:translateY(34px) scale(.975);
      animation:carte-allume cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:entry 6% cover 34%
    }
    .ot[data-ot="euclide"]{animation-range:entry 20% cover 46%}

    /* ── 4 · LES PRIX (ostentatoire) — emprunt direct au pattern 12 ────────
       L'aplat monte du bas derrière chaque tarif, le montant monte après lui,
       et les trois colonnes se décalent de 10 % de course, soit environ 80 ms
       à vitesse de lecture normale. Trois distances, donc trois durées : le
       fond parcourt toute la hauteur, le texte 26 px. */
    /* ⚠️ Le fond de la carte est DEPLACE sur ce pseudo-element. Sans cela,
       `.tf{background:var(--nuit-2)}` reste opaque au-dessus et l'aplat monte
       derriere lui : l'animation tourne, personne ne la voit. */
    .tf{background:transparent}
    .tf--phare{background:transparent}
    .tf::after{
      content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
      background:var(--nuit-2);clip-path:inset(100% 0 0 0);
      animation:remplit cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:var(--r-fond)
    }
    .tf--phare::after{background:linear-gradient(180deg, rgba(12,90,55,.09), var(--nuit-2) 55%)}
    .tf-p,.tf-m,.tf-d,.tf .bt{
      opacity:0;transform:translateY(26px);
      animation:monte-court cubic-bezier(0,0,.38,.9) both;
      animation-timeline:view();animation-range:var(--r-texte)
    }
    .tf:nth-child(1){--r-fond:entry 4% cover 38%; --r-texte:entry 10% entry 82%}
    .tf:nth-child(2){--r-fond:entry 14% cover 44%;--r-texte:entry 20% entry 90%}
    .tf:nth-child(3){--r-fond:entry 24% cover 50%;--r-texte:entry 30% entry 98%}
    /* Empilées sur téléphone, les colonnes entrent déjà l'une après l'autre :
       le décalage artificiel n'a plus de raison d'être. */
    @media (max-width:760px){
      .tf:nth-child(n){--r-fond:entry 4% cover 34%;--r-texte:entry 12% entry 96%}
    }

    /* ── La discrète, entre les ostentatoires ──────────────────────────────
       Un filet vert se tire sous chaque titre de section. Petite, fréquente,
       elle donne le rythme sans prétendre être une signature de marque. */
    .etapes h2,.prix h2,.faq-v h2{position:relative;padding-bottom:14px}
    .etapes h2::after,.prix h2::after,.faq-v h2::after{
      content:"";position:absolute;left:0;bottom:0;height:2px;width:92px;
      background:var(--vif);transform:scaleX(0);transform-origin:0 50%;
      animation:tire cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:entry 24% entry 74%
    }
  }
}

@keyframes carte-allume{to{opacity:1;transform:none}}
@keyframes remplit{to{clip-path:inset(0 0 0 0)}}
@keyframes monte-court{to{opacity:1;transform:none}}
@keyframes tire{to{transform:scaleX(1)}}

/* Les cartes de prix portent un fond animé en `::after` : il leur faut un
   contexte de positionnement, et un `z-index` qui laisse le contenu devant. */
.tf{position:relative;isolation:isolate}

/* ══ 2 · LES TROIS ÉCRANS — L'IMAGE QUI TOMBE (09/09/2026, 3e version) ═════
   Saadou : « c'est l'image qui se déplace — après oui ce qu'il y a dedans
   switch — le texte défile avec le scroll, et la même image se déplace comme
   si elle tombait ».

   Version 1 : trois blocs qui montaient. Rien ne suivait.
   Version 2 : trois images épinglées qui se relayaient au même endroit. Elles
               se remplaçaient, mais aucune ne se DÉPLAÇAIT.
   Version 3, celle-ci : UN SEUL cadre. Il entre par le haut, traverse tout
   l'écran en dérivant sur le côté et en tournant, et sort par le bas. C'est
   une chute lente, pilotée par le scroll. Le texte, lui, défile normalement à
   côté. Ce qui change, c'est ce qu'il y a DEDANS.

   Emprunt : pattern 06 du motion-lab pour le `view-timeline-name` sur la
   piste. Zéro JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LE REPLI ─────────────────────────────────────────────────────────────
   Sans pilotage par le scroll, on remet tout en flux : les trois textes, puis
   les trois captures. Rien ne disparaît, rien ne se superpose. */
.etp-txt{list-style:none;margin:0;padding:0}
.etp-p .et-n{margin-bottom:12px}
.etp-p h3{font-size:clamp(21px,2.6vw,29px);color:#121417;margin-bottom:8px}
.etp-p p{color:var(--txt-2);font-size:17px;max-width:44ch}
.etp-f{margin:0}
/* Les enveloppes s'effacent : les six elements redeviennent enfants directs de
   la grille, et on les remet par paires — texte 1, image 1, texte 2, image 2…
   Sans cela on lisait les trois etapes, PUIS on voyait trois captures sans
   savoir laquelle allait avec quoi (mesure a 390 px). */
.etp-grille{display:grid;gap:40px}
.etp-txt,.etp-colv,.etp-vue,.etp-cadre,.etp-flot,.etp-face{display:contents}
.etp-p[data-p="1"]{order:1} .etp-f[data-p="1"]{order:2}
.etp-p[data-p="2"]{order:3} .etp-f[data-p="2"]{order:4}
.etp-p[data-p="3"]{order:5} .etp-f[data-p="3"]{order:6}

/* ── LA CHUTE ─────────────────────────────────────────────────────────────
   Armee a TOUTES les largeurs. Elle etait enfermee sous 900 px : sur telephone
   il ne se passait donc rien du tout, et c'est exactement ce que Saadou a vu.
   L'amplitude est simplement plus courte sur petit ecran, pour que l'objet ne
   sorte jamais du cadre. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .etp{view-timeline-name:--parcours;view-timeline-axis:block}

    /* Les enveloppes reprennent leur boite. */
    .etp-grille{display:block}
    .etp-txt{display:grid}
    .etp-colv{display:block}
    .etp-vue{display:flex}
    .etp-cadre{display:block}
    .etp-flot{display:block}
    .etp-p,.etp-f{order:0}

    /* TELEPHONE — le cadre se fige EN HAUT et le texte defile dessous.
       ⚠️ `.etp-colv` vient apres `.etp-txt` dans le HTML : en une colonne, il
       se figeait donc sous tout le texte et l'image n'apparaissait qu'a la fin
       de la section (mesure a 390 px : trois quarts de la descente sans la
       moindre image). La grille passe en colonne flex et le cadre remonte en
       premier. Il porte le fond de la section : le texte passe derriere lui
       sans se melanger. */
    .etp-grille{display:flex;flex-direction:column}
    .etp-colv{order:-1;position:sticky;top:56px;height:46svh;z-index:2;
              background:var(--nuit-2);margin-bottom:10px}
    .etp-vue{height:100%;align-items:center;justify-content:center;
             overflow:visible;pointer-events:none}
    .etp-txt{gap:54svh;padding:6svh 0 30svh}
    .etp-p{align-self:center}
    .etp-cadre{position:relative;width:100%;will-change:transform;
               animation:chute-courte linear both;
               animation-timeline:--parcours;animation-range:contain 0% contain 100%}
    .etp-f{position:absolute;inset:0;display:flex;align-items:center;
           margin:0;pointer-events:auto}
    .etp-f:first-child{position:relative}
    .etp-f img{width:100%;max-height:40svh;object-fit:contain}
    .etp-f{animation:linear both;animation-timeline:--parcours;
           animation-range:contain 0% contain 100%}
    .etp-f[data-p="1"]{animation-name:dedans-1}
    .etp-f[data-p="2"]{animation-name:dedans-2}
    .etp-f[data-p="3"]{animation-name:dedans-3}

    /* LA LEVITATION — permanente, independante du scroll. Sans elle, l'objet
       se fige des qu'on arrete de faire defiler ; c'est ce second mouvement,
       lent et sans fin, qui donne l'impression qu'il flotte. Les deux
       transforms se composent : la chute porte la course, la levitation la
       respiration. */
    .etp-flot{animation:levite 7.5s ease-in-out infinite;will-change:transform}

    /* LE RETOURNEMENT. Le fondu etait le dernier endroit ou l'illusion cassait :
       un objet unique ne se dissout pas, il se tourne. La face pivote sur son
       axe vertical et le contenu change exactement quand elle est de profil —
       donc quand elle est invisible. On ne voit jamais la substitution.
       Les angles de bascule (32 % et 66 %) tombent au milieu des fondus deja
       poses sur le contenu (29-35 % et 63-69 %). */
    .etp-vue{perspective:1600px;perspective-origin:50% 42%}
    .etp-face{display:block;transform-style:preserve-3d;position:relative;
              animation:retourne linear both;
              animation-timeline:--parcours;animation-range:contain 0% contain 100%}

    /* L'OMBRE PORTEE. Elle s'allonge et se decale avec l'inclinaison : c'est
       elle, plus que le mouvement, qui fait qu'un objet a l'air de flotter au
       lieu d'etre colle sur le fond. */
    .etp-f{border-radius:6px;
           animation:linear both;animation-timeline:--parcours;
           animation-range:contain 0% contain 100%}
    .etp-face::before{content:"";position:absolute;inset:6% 4% -2% 4%;z-index:-1;
      border-radius:14px;background:rgba(18,20,23,.14);filter:blur(26px);
      animation:ombre-suit linear both;
      animation-timeline:--parcours;animation-range:contain 0% contain 100%}

    /* LE REFLET. Une bande de lumiere traverse la surface pendant la chute,
       comme sur une vitre qu'on incline. Elle passe deux fois : une par
       retournement. */
    .etp-face::after{content:"";position:absolute;inset:0;z-index:3;
      pointer-events:none;border-radius:6px;overflow:hidden;
      background:linear-gradient(102deg,transparent 34%,rgba(18,20,23,.30) 46%,
                 rgba(18,20,23,.06) 53%,transparent 62%);
      background-size:260% 100%;background-repeat:no-repeat;
      animation:reflet-balaie linear both;
      animation-timeline:--parcours;animation-range:contain 0% contain 100%}

    /* LA PARALLAXE DE VITRE. Le contenu derive un peu moins vite que le cadre :
       deux plans a deux vitesses, donc de la profondeur. */
    .etp-f img{animation:parallaxe linear both;
               animation-timeline:--parcours;animation-range:contain 0% contain 100%}

    /* GRAND ECRAN — le cadre traverse tout l'ecran, a cote du texte. */
    @media (min-width:900px){
      .etp-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
                  gap:52px;align-items:start}
      .etp-txt{grid-column:1;grid-row:1;gap:62svh;padding:26svh 0 30svh}
      .etp-colv{order:0;grid-column:2;grid-row:1;height:100%;position:static;
                background:transparent;margin-bottom:0}
      .etp-vue{position:sticky;top:0;height:100svh}
      .etp-cadre{animation-name:chute}
      .etp-f img{max-height:62svh}
    }
  }
}

/* LA CHUTE, image par image. Elle entre par le haut, derive vers la gauche en
   passant, se redresse au milieu — le moment ou on la lit — puis repart et
   sort par le bas. La rotation accompagne la derive : un objet qui tombe ne
   descend jamais droit. */
@keyframes chute{
  0%   {transform:translate3d(16%,-58%,0) rotate(7.5deg)   scale(.9)}
  25%  {transform:translate3d(6%,-24%,0)  rotate(3.4deg)   scale(.96)}
  50%  {transform:translate3d(-2%,2%,0)   rotate(-1.2deg)  scale(1)}
  75%  {transform:translate3d(-9%,28%,0)  rotate(-4.8deg)  scale(.96)}
  100% {transform:translate3d(-17%,60%,0) rotate(-8.5deg)  scale(.9)}
}
/* Sur telephone la course est plus courte : 390 px de large ne pardonnent pas
   une derive de 17 %, l'objet sortirait du cadre. */
@keyframes chute-courte{
  0%   {transform:translate3d(4%,-26%,0)  rotate(4.6deg)  scale(.93)}
  50%  {transform:translate3d(-1%,1%,0)   rotate(-1deg)   scale(1)}
  100% {transform:translate3d(-5%,27%,0)  rotate(-5deg)   scale(.93)}
}
/* La derive et l'inclinaison depassent la largeur utile : mesure a 390 px, le
   cadre atteignait 392 px et la page glissait de 3 px. `overflow-x: clip` rogne
   sans creer de conteneur de defilement — un `overflow: hidden` ici casserait
   le `position: sticky` du cadre. */
.etapes{overflow-x:clip}
/* La respiration. Amplitude volontairement faible : elle doit se sentir, pas
   se voir. Les valeurs ne sont pas rondes pour que le cycle ne se lise pas. */
@keyframes levite{
  0%   {transform:translate3d(0,0,0)          rotate(0)}
  28%  {transform:translate3d(-.9%,-1.8%,0)   rotate(-.7deg)}
  53%  {transform:translate3d(.7%,-2.6%,0)    rotate(.5deg)}
  79%  {transform:translate3d(1.1%,-1.1%,0)   rotate(.8deg)}
  100% {transform:translate3d(0,0,0)          rotate(0)}
}

/* LE RETOURNEMENT. Deux quarts de tour, en sens contraire l'un de l'autre pour
   que le geste ne se repete pas. La face passe par 90 degres — largeur nulle,
   donc invisible — exactement au moment ou le contenu change. */
@keyframes retourne{
  0%   {transform:rotateY(-13deg)}
  26%  {transform:rotateY(-46deg)}
  32%  {transform:rotateY(-90deg)}
  38%  {transform:rotateY(-44deg)}
  50%  {transform:rotateY(2deg)}
  60%  {transform:rotateY(44deg)}
  66%  {transform:rotateY(90deg)}
  72%  {transform:rotateY(46deg)}
  100% {transform:rotateY(14deg)}
}
/* L'ombre suit : plus l'objet est de profil, plus elle se resserre et fonce ;
   plus il est de face, plus elle s'etale. */
@keyframes ombre-suit{
  0%   {opacity:.5;transform:translate3d(4%,4%,0) scale(.9,.86)}
  32%  {opacity:.22;transform:translate3d(1%,2%,0) scale(.5,.8)}
  50%  {opacity:.62;transform:translate3d(-1%,6%,0) scale(1,1)}
  66%  {opacity:.22;transform:translate3d(-2%,3%,0) scale(.5,.82)}
  100% {opacity:.5;transform:translate3d(-4%,5%,0) scale(.9,.88)}
}
/* Le reflet traverse la surface deux fois, une par retournement. */
@keyframes reflet-balaie{
  0%   {background-position:118% 0}
  30%  {background-position:-14% 0}
  34%  {background-position:118% 0}
  64%  {background-position:-14% 0}
  68%  {background-position:118% 0}
  100% {background-position:16% 0}
}
/* La parallaxe : le contenu derive a l'inverse, et deux fois moins loin. */
@keyframes parallaxe{
  0%   {transform:translate3d(-3%,2%,0) scale(1.04)}
  50%  {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(3%,-2%,0) scale(1.04)}
}

/* Le contenu du cadre : trois relais nets, avec un fondu court. */
@keyframes dedans-1{
  0%{opacity:1} 29%{opacity:1} 35%{opacity:0} 100%{opacity:0}
}
@keyframes dedans-2{
  0%{opacity:0} 29%{opacity:0} 35%{opacity:1} 63%{opacity:1} 69%{opacity:0} 100%{opacity:0}
}
@keyframes dedans-3{
  0%{opacity:0} 63%{opacity:0} 69%{opacity:1} 100%{opacity:1}
}

/* ══ LE RELIEF DE LA SECONDE MOITIÉ — 09/09/2026 ═══════════════════════════
   Saadou : « le début du site est bien (index) mais la suite est plate ».

   CE QUI A ÉTÉ MESURÉ, section par section :
   · UNE SEULE section sur sept portait un fond propre (`etapes`, #FFFFFF). Les
     six autres tombaient sur le même noir-vert du body, sur 5 200 px de haut,
     sans une seule interruption. Les deux essais avaient bien un dégradé — mais
     de #F4F6F5 à #E9F1EC, quatre points d'écart : invisible à l'œil.
   · Les deux essais (2 032 px, la moitié de la seconde partie) et la FAQ
     (769 px) comptaient ZÉRO élément animé. La règle demande une animation
     ostentatoire minimum toutes les deux sections.
   · Les deux essais rejouaient la même disposition l'un après l'autre, et le
     panneau d'Archimède flottait à gauche avec du vide à sa droite — ce qui se
     lit comme un accident, pas comme un choix.

   C'est le diagnostic que Saadou avait déjà posé lui-même sur la démo v1 :
   « la v1 joue beaucoup plus sur les changements de couleurs, les cadres, les
   placements ». Trois leviers, donc, et pas seulement du mouvement.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LE RYTHME DES FONDS ───────────────────────────────────────────────
   Des paliers francs, pas des dégradés de quatre points. Une section sur deux
   se pose sur un panneau ; la suivante retombe sur la nuit. La page respire,
   et chaque section devient une pièce au lieu d'un paragraphe. */
.essai--euclide{background:#FFFFFF;border-top:1px solid var(--fil-fort)}
.essai--archimede{background:transparent;border-top:1px solid var(--fil)}
.prix{background:#FFFFFF;border-top:1px solid var(--fil-fort)}
.faq-v{background:transparent}

/* Le filet de tête prend la couleur de la section : ambre chez Euclide, vert
   chez Archimède et sur les prix. Un trait qui dit de quoi on parle. */
/* Le filet s'aligne sur la colonne de texte, pas sur le bord de l'ecran :
   pose en `::before` de la section, il partait a x=0 et sortait de la grille. */
.essai--euclide::before,.prix::before,.essai--archimede::before,.faq-v::before{
  content:"";display:block;height:2px;width:min(280px,42vw);
  margin:-82px 0 80px max(22px, calc((100% - var(--w-max)) / 2 + 22px));
  position:relative
}
.essai--euclide::before{background:linear-gradient(90deg,var(--ambre),transparent)}
.essai--archimede::before{background:linear-gradient(90deg,var(--vif),transparent)}
.prix::before{background:linear-gradient(90deg,var(--vif),transparent);margin-top:-86px;margin-bottom:84px}
.faq-v::before{background:linear-gradient(90deg,var(--fil-fort),transparent)}

/* ── 2 · LA CASSURE DE GRILLE ─────────────────────────────────────────────
   Euclide travaille en DEUX colonnes : les commandes à gauche, la feuille qui
   se réécrit à droite. Archimède ne doit donc pas rejouer la même chose : son
   panneau devient un bloc unique, large et centré — on ne règle plus rien, on
   se met à la place du client. Avant, il était étroit et calé à gauche avec du
   vide à sa droite. */
@media (min-width:940px){
  .essai--archimede .wiz{max-width:880px;margin-left:auto;margin-right:auto}
  .essai--archimede .essai-t,.essai--archimede .essai-s,
  .essai--archimede .essai-note{max-width:880px;margin-left:auto;margin-right:auto}
  .essai--archimede .essai-s{margin-bottom:30px}
}

/* ── 3 · LE MOUVEMENT LÀ OÙ IL N'Y EN AVAIT AUCUN ────────────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* ESSAI EUCLIDE (ostentatoire) — la feuille arrive de biais et se pose,
       pendant que la colonne de commandes monte. Un seul geste : le document
       se dépose sur l'établi. */
    .essai--euclide .at-gauche{
      opacity:0;transform:translateY(30px);
      animation:etabli-monte cubic-bezier(0,0,.38,.9) both;
      animation-timeline:view();animation-range:entry 10% entry 72%
    }
    .essai--euclide .at-droite{
      opacity:0;transform:translate3d(46px,26px,0) rotate(2.6deg) scale(.95);
      animation:feuille-pose cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:entry 6% cover 26%
    }

    /* ESSAI ARCHIMÈDE (ostentatoire) — le panneau se déplie : il arrive
       comprimé et s'ouvre en hauteur, la jauge se remplit dans la foulée.
       Ce n'est pas le même geste que chez Euclide, exprès. */
    .essai--archimede .wiz{
      opacity:0;transform:scaleY(.86) translateY(26px);transform-origin:50% 0;
      animation:panneau-deplie cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:entry 8% cover 24%
    }
    .essai--archimede .wiz-etat{
      opacity:0;animation:parait ease both;
      animation-timeline:view();animation-range:entry 22% cover 30%
    }

    /* LA FAQ (discrète, en cascade) — les questions entrent l'une après
       l'autre par la gauche. La section n'avait pas un seul pixel qui bouge. */
    .faq-v details{
      opacity:0;transform:translateX(-22px);
      animation:question-entre cubic-bezier(0,0,.38,.9) both;
      animation-timeline:view();animation-range:entry 6% entry 62%
    }
    .faq-v details:nth-of-type(2){animation-range:entry 10% entry 66%}
    .faq-v details:nth-of-type(3){animation-range:entry 14% entry 70%}
    .faq-v details:nth-of-type(4){animation-range:entry 18% entry 74%}
    .faq-v details:nth-of-type(5){animation-range:entry 22% entry 78%}
    .faq-v details:nth-of-type(6){animation-range:entry 26% entry 82%}

    /* Le filet de tête se tire à l'entrée de chaque section : c'est lui qui
       annonce le changement de pièce. */
    .essai--euclide::before,.essai--archimede::before,.prix::before,.faq-v::before{
      transform:scaleX(0);transform-origin:0 50%;
      animation:tire cubic-bezier(0,0,.3,1) both;
      animation-timeline:view();animation-range:entry 12% entry 58%
    }
  }
}

/* La feuille entre par la droite : sur 390 px ce decalage de 46 px poussait la
   page a 432 px de large (mesure width-sweep). `overflow-x: clip` rogne sans
   creer de conteneur de defilement, et l'entree se fait par le bas sur petit
   ecran — de cote, elle n'aurait nulle part ou aller. */
.essai{overflow-x:clip}
@media (max-width:939.98px){
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .essai--euclide .at-droite{transform:translate3d(0,30px,0) rotate(1.4deg) scale(.97)}
    }
  }
}

@keyframes etabli-monte{to{opacity:1;transform:none}}
@keyframes feuille-pose{to{opacity:1;transform:none}}
@keyframes panneau-deplie{to{opacity:1;transform:none}}
@keyframes parait{to{opacity:1}}
@keyframes question-entre{to{opacity:1;transform:none}}

/* ══ LE SÉLECTEUR DES DEUX OUTILS — 09/09/2026 ═════════════════════════════
   Saadou : « la suite du site n'est toujours pas dynamique, c'est un SaaS à la
   Stripe, t'as Stripe en base de données non ? »

   Oui : `3-copies/stripe.com/`. Les valeurs ci-dessous sont LUES dans son code
   (`range/02-des-solutions-flexibles-pour-chaqu/bloc.css`), pas retrouvées de
   mémoire. Ce que ce code dit, et qui contredit ce que je faisais :

   · ZÉRO `@keyframes` dans tout le bloc. La seconde moitié de Stripe n'est pas
     animée au défilement : elle est INTERACTIVE. Le dynamisme vient de ce que
     le visiteur MANIPULE le produit.
   · `--card-duration: 800ms`, `--card-ease: cubic-bezier(0.165, 0.84, 0.44, 1)`.
   · Le panneau change en `clip-path: inset(…)` : il s'OUVRE, il ne glisse pas.
   · `transition: z-index 0.1s step-end` : le plan bascule d'un coup à la fin.
     C'est ce détail qui empêche le clignotement au croisement des deux panneaux.
   · Une propriété personnalisée interpolée (`@property`) pilote plusieurs
     effets d'un seul chiffre.

   Notre propre `SECTIONS.md` avait déjà désigné cette section pour app.krescia,
   le 05/09 : « un onglet par module, un écran par onglet ».
   ══════════════════════════════════════════════════════════════════════════ */

@property --ong-progres{syntax:'<number>';inherits:true;initial-value:0}

.deux{--ong-duree:800ms; --ong-ease:cubic-bezier(.165,.84,.44,1)}

/* ── La barre d'onglets ───────────────────────────────────────────────────
   Deux boutons pleine largeur, et un curseur qui glisse dessous. Le curseur
   est un seul élément qui se déplace : deux traits qui s'allument et
   s'éteignent ne diraient pas que c'est le MÊME choix qui change de camp. */
.ong{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--fil);border-radius:var(--r);overflow:hidden;
  background:var(--nuit-2);margin-bottom:30px
}
.ong-b{
  display:flex;align-items:center;gap:13px;text-align:left;
  padding:16px 18px;background:transparent;border:0;cursor:pointer;
  color:var(--txt-2);font:inherit;min-height:44px;
  transition:color var(--ong-duree) var(--ong-ease),background .25s ease
}
.ong-b+.ong-b{border-left:1px solid var(--fil)}
.ong-b img{width:38px;height:38px;flex:none;opacity:.5;
  transition:opacity var(--ong-duree) var(--ong-ease),transform var(--ong-duree) var(--ong-ease)}
.ong-b span{display:block;font-size:20px;font-weight:700;color:var(--txt-2);
  font-family:var(--f-titre,inherit);line-height:1.2;
  transition:color var(--ong-duree) var(--ong-ease)}
.ong-b small{display:block;font-family:var(--f-texte,inherit);font-weight:400;
  font-size:13.5px;color:var(--txt-2);margin-top:2px;letter-spacing:0}
.ong-b:hover{background:var(--nuit-3)}
.ong-b[aria-selected="true"] span{color:#121417}
.ong-b[aria-selected="true"] img{opacity:1;transform:scale(1.06)}
.ong-b:focus-visible{outline:3px solid var(--vif);outline-offset:-3px}

/* Le curseur : il occupe la moitié de la barre et se déplace d'un onglet à
   l'autre. `--ong-progres` vaut 0 ou 1 ; tout en découle. */
.ong-curseur{
  position:absolute;left:0;bottom:0;height:2px;width:50%;
  background:var(--vif);pointer-events:none;
  transform:translateX(calc(var(--ong-progres) * 100%));
  transition:transform var(--ong-duree) var(--ong-ease),background .3s ease
}
.ong:has(#ong-euclide[aria-selected="true"]) .ong-curseur{background:var(--ambre)}
.ong:has(#ong-euclide[aria-selected="true"]){--ong-progres:1}

/* ── Les panneaux ─────────────────────────────────────────────────────────
   Ils occupent la MÊME case : c'est ce qui fait qu'un panneau en remplace un
   autre au lieu de le suivre. Le panneau sortant reste dans le flux jusqu'au
   bout de la transition, sinon la page sauterait de toute la hauteur. */
.pans{display:grid}
.pan{
  grid-area:1 / 1;display:grid;gap:26px;align-items:center;
  clip-path:inset(0 0 0 0 round var(--r));
  transition:clip-path var(--ong-duree) var(--ong-ease),
             opacity calc(var(--ong-duree) * .55) var(--ong-ease),
             transform var(--ong-duree) var(--ong-ease),
             visibility 0s linear var(--ong-duree),
             z-index .1s step-end
}
@media (min-width:940px){
  .pan{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:44px}
}
/* Le panneau au repos : rogné par le milieu, décalé, hors du plan et hors de
   l'ordre de tabulation. `visibility` plutôt que `display` : `display:none`
   couperait la transition net. */
.pan{opacity:0;visibility:hidden;z-index:0;transform:translateY(14px) scale(.985);
     clip-path:inset(6% 4% 6% 4% round var(--r))}
.pan--on{opacity:1;visibility:visible;z-index:1;transform:none;
         clip-path:inset(0 0 0 0 round var(--r));
         transition-delay:0s,0s,0s,0s,0s}

.pan-txt h2{font-size:clamp(25px,3.2vw,34px);color:#121417;margin-bottom:10px;max-width:22ch}
.pan-txt>p{color:var(--txt-2);font-size:17.5px;margin-bottom:4px}
.pan-txt .ot-l{margin:16px 0 22px}
.pan-txt .ot-bas{margin-top:0}
.pan-ecran{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--fil);background:var(--nuit-2);
  box-shadow:0 24px 60px rgba(18,20,23,.12)}
.pan-ecran img{display:block;width:100%;height:auto}

/* Le mouvement réduit : on garde le changement, on retire le glissement. */
@media (prefers-reduced-motion: reduce){
  .pan,.ong-curseur,.ong-b,.ong-b img,.ong-b span{transition:none}
  .pan{transform:none;clip-path:none}
}

/* Sans JavaScript, les deux panneaux restent lisibles l'un sous l'autre :
   la page ne perd jamais son contenu. */
html:not(.js) .pan{opacity:1;visibility:visible;transform:none;clip-path:none;
  position:relative;grid-area:auto;margin-bottom:34px}
html:not(.js) .ong{display:none}

/* ── LA DÉMONSTRATION DANS LE PANNEAU (fusion du 09/09/2026) ───────────────
   Les deux essais occupaient deux sections entières qui répétaient ce que le
   sélecteur disait déjà : 2 793 px pour trois fois la même promesse. La
   démonstration vivante prend la place de la capture figée — elle montre en
   marchant ce que l'image montrait à l'arrêt.

   La colonne de droite s'élargit : un atelier de saisie et une feuille de devis
   ne tiennent pas dans la place d'une capture. */
/* ⚠️ Le panneau repasse en UNE colonne. En deux colonnes, l'atelier de saisie
   — qui est lui-meme en deux colonnes — se retrouvait dans 0,72 fr : les
   champs sortaient tronques (« Remp », « Mise », « Four ») et la feuille de
   devis etait comprimee. Une demonstration a besoin de plus de place que la
   capture qu'elle remplace. Le texte passe donc AU-DESSUS, la demonstration
   prend toute la largeur. */
@media (min-width:940px){
  .pan{grid-template-columns:1fr;gap:30px;align-items:start}
  .pan-txt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
           gap:12px 40px;align-items:end}
  .pan-txt h2{grid-column:1;margin-bottom:6px}
  .pan-txt>p{grid-column:1}
  .pan-txt .ot-l{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0}
  .pan-txt .ot-bas{grid-column:1 / -1;margin-top:6px}
}
/* Les deux panneaux occupent la meme case, donc la section prend la hauteur du
   PLUS GRAND et l'autre laisse un trou. On borne la feuille de devis : elle se
   lit dans un cadre qui defile, ce qui est de toute facon sa place naturelle
   dans une page — un devis complet fait deux ecrans de haut. */
.pan-demo .at-droite{max-height:62svh;overflow:auto;border-radius:var(--r);
  scrollbar-width:thin;scrollbar-color:var(--fil-fort) transparent}
.pan-demo .at-droite::-webkit-scrollbar{width:8px}
.pan-demo .at-droite::-webkit-scrollbar-thumb{background:var(--fil-fort);border-radius:8px}
.pan-demo{min-width:0}
.pan-demo .atelier{gap:22px}
.pan-demo .wiz{max-width:none}
.pan-demo .essai-note{margin-top:14px;font-size:14px;color:var(--txt-2)}
/* Le panneau au repos ne doit pas garder le focus clavier sur ses champs. */
.pan:not(.pan--on){pointer-events:none}
.pan--on{pointer-events:auto}

/* ══ LES MÉTIERS — « Vos prestations sont déjà écrites » ═══════════════════
   Section 4 de la proposition. La seule preuve chiffrée qu'on possède : 24
   métiers, 344 prestations, lus dans le produit. Emprunts : très gros chiffres
   (stripe §4) · bande qui défile (catalogue §13, CSS pur, 0 ko) · photo de
   geste (règle « fond sombre total : seulement avec des photos chaudes »). */
.metiers{padding:86px 0 0;background:#FFFFFF;border-top:1px solid var(--fil-fort);overflow-x:clip}
.metiers h2{font-size:clamp(28px,4vw,44px);color:#121417;max-width:16ch}
.met-s{color:var(--txt-2);font-size:17.5px;margin:14px 0 30px;max-width:52ch}
.met-haut{display:grid;gap:34px;align-items:center}
@media (min-width:940px){.met-haut{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px}}

/* Les deux chiffres. L'écart d'échelle fait la hiérarchie : le nombre écrase
   son libellé, sinon les deux se valent et on ne lit ni l'un ni l'autre. */
.chif{display:flex;flex-wrap:wrap;gap:20px 54px}
.chif b{display:block;font-family:var(--mono);font-size:clamp(46px,6vw,76px);
  line-height:.92;color:var(--vif);letter-spacing:-.02em}
.chif span{display:block;margin-top:8px;font-size:16px;color:var(--txt-2);max-width:16ch}

.met-photo{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--fil)}
.met-photo img{display:block;width:100%;height:auto}

/* ── LA BANDE DES MÉTIERS ─────────────────────────────────────────────────
   La piste est écrite DEUX FOIS dans le HTML : c'est ce qui permet de la
   translater de la moitié de sa largeur et de reboucler sans saut. Elle est
   `aria-hidden` puisqu'elle se répète ; la liste est rendue une seule fois en
   `.sr-only` juste après, pour qui écoute la page. */
.ruban{margin-top:60px;border-top:1px solid var(--fil);border-bottom:1px solid var(--fil);
  padding:18px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ruban-piste{display:flex;width:max-content;gap:0;animation:ruban 64s linear infinite}
.ruban-piste span{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--txt-2);padding:0 26px}
.ruban-piste span::after{content:"·";margin-left:26px;color:var(--vif)}
.ruban:hover .ruban-piste{animation-play-state:paused}
@keyframes ruban{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto}
  .ruban{mask-image:none;-webkit-mask-image:none}
}

.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}

/* ══ LES GARANTIES — « Un devis qui tient devant un contrôle » ═════════════
   Section 5 de la proposition. Elle REMPLACE la preuve sociale : ni chiffre
   d'usage, ni logo, ni témoignage n'est écrivable tant qu'il n'y a pas de
   client sur l'outil. On montre ce que le produit tient, et qui se vérifie.
   Illustrations au trait monochromes dans la couleur de marque (ambrook §3).
   ⛔ Pas de cartes égales alignées, marqueur « défaut IA » mesuré par le gate :
   la première garantie tient toute la largeur — c'est le différenciateur
   d'Euclide, elle n'a pas à partager sa ligne. */
.garanties{padding:86px 0;border-top:1px solid var(--fil)}
.garanties h2{font-size:clamp(28px,4vw,44px);color:#121417;max-width:18ch}
.gar-s{color:var(--txt-2);font-size:17.5px;margin:14px 0 34px;max-width:56ch}

.gar-l{display:grid;gap:18px}
@media (min-width:820px){
  .gar-l{grid-template-columns:repeat(3,1fr)}
  .gar--large{grid-column:1 / -1;display:grid;
              grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.4fr);
              gap:6px 26px;align-items:start}
  .gar--large .gar-i{grid-row:1 / span 2}
  .gar--large h3{margin:0;align-self:center}
  .gar--large p{grid-column:3;grid-row:1 / span 2;align-self:center;max-width:none}
}

.gar{background:var(--nuit-2);border:1px solid var(--fil);border-radius:var(--r);padding:22px 20px}
.gar--large{background:linear-gradient(100deg, rgba(245,166,35,.07), var(--nuit-2) 46%);
            border-color:var(--fil-fort);padding:26px 22px}
.gar-i{width:30px;height:30px;color:var(--vif);margin-bottom:14px;flex:none}
.gar--large .gar-i{width:38px;height:38px;color:var(--ambre);margin:0}
.gar h3{font-size:19.5px;color:#121417;margin-bottom:8px;line-height:1.25}
.gar--large h3{font-size:clamp(21px,2.4vw,26px)}
.gar p{color:var(--txt-2);font-size:16.5px;line-height:1.55;margin:0}

/* ══ L'APPEL FINAL ═════════════════════════════════════════════════════════
   La page se terminait sur la FAQ : le visiteur lisait la dernière objection et
   n'avait plus rien à faire. Emprunt : « bande sombre unique vers l'outil »
   (tryba-solar, catalogue §11) — INVERSÉE, puisque toute la page est sombre.
   C'est donc la bande claire qui tranche, et c'est le seul endroit de la page
   où le fond change de camp. Les deux CTA sont jonglés comme au hero. */
.final{
  background:linear-gradient(160deg,#F2F5F3 0%,#E4EBE7 100%);
  color:var(--encre);padding:78px 0 82px;text-align:center;
  border-top:1px solid var(--fil-fort)
}
.fin-sur{font-family:var(--mono);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#1B8F5C;margin-bottom:16px}
.final h2{font-size:clamp(30px,5vw,58px);color:var(--encre);max-width:20ch;margin:0 auto;line-height:1.06}
.fin-s{color:#3D4A44;font-size:18px;margin:18px auto 30px;max-width:52ch}
.fin-act{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.final .bt-p{background:#0C5A37;color:#fff}
.final .bt-p:hover{box-shadow:0 8px 30px rgba(12,90,55,.3)}
.final .bt-s{background:#fff;color:var(--encre);border-color:var(--encre)}
.final .bt-s:hover{border-color:#0C5A37;color:#0C5A37}
.fin-tel{margin-top:26px;font-size:16.5px;color:#3D4A44}
/* Sur fond clair, le numéro reprend l'encre de la bande : le blanc du reste de
   la page y serait illisible — c'est exactement la faute corrigée ce matin. */
.final .tel-ligne{color:var(--encre);border-bottom-color:var(--ambre)}
.final .tel-ligne:hover{color:#0C5A37}

/* ══ 12/09/2026 — LA BANDE SOMBRE, UNE PAR PAGE : LE HERO ════════════════
   Le reste de la page est clair (système validé le 02/08 : fond froid, une
   seule bande sombre, pied clair). Ici le texte redevient blanc. */
.hero-v{background:var(--sombre,#0D1614);border-bottom:0}
.hero-v h1,.hero-v .chapo,.hero-v .chapo b,.hero-v .sur{color:#fff}
.hero-v .chapo{color:#DFEAE4}
.hero-v .bt-s{color:#fff;border-color:rgba(255,255,255,.5)}
.hero-v .bt-s:hover{border-color:#fff;color:#fff}
.pp-hero{background:var(--sombre,#0D1614)}
.pp-hero h1,.pp-hero p{color:#fff}
.pp-hero p{color:#DFEAE4}
/* la feuille reste du papier : encre sur blanc, total sur marine */
.doc-blason,.doc-total td{color:#fff}
/* le bandeau vert des pages produit : bouton blanc dessus */
.bande-cta .bt-p{background:#fff;color:var(--vert,#0C5A37);box-shadow:0 4px 0 rgba(0,0,0,.18)}
/* la barre : blanche, comme sur krescia.com */
.bar{border-bottom:1px solid var(--fil)}
.bar-nav .bt-p{box-shadow:0 4px 0 rgba(12,90,55,.28)}
.bt-p{box-shadow:0 4px 0 rgba(12,90,55,.28)}
.bt-p:hover{box-shadow:0 6px 0 rgba(12,90,55,.28)}
.bande-cta a:not(.bt){color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- la vidéo de prise en main (14/09) ---------- */
.kv-cadre{position:relative;background:#0D1614;border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px}
.kv-cadre video{width:100%;height:100%;display:block;background:#000}
.kv-vide{flex-direction:column;gap:8px;background:linear-gradient(135deg,#0D1614,#1b3a2a)}
.kv-vide b{font-family:var(--f-titre,inherit);font-size:22px}
.kv-vide span{font-size:14.5px;color:#DFEAE4;max-width:44ch}
.kv-attente{color:#DFEAE4;font-size:14px;margin:0}
.kv-legende{font-size:13.5px;color:#4a524e;margin:8px 0 0}
.video-pres{padding:70px 0 20px}
.video-pres h2{font-size:clamp(27px,3.6vw,38px);color:var(--encre,#121417);margin-bottom:8px}
.video-s{color:var(--txt-2);font-size:17px;margin:0 0 22px;max-width:60ch}
.video-pres .kv{max-width:900px}
/* l'option sur mesure (14/09) */
.surmesure{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;margin:28px 0 8px;padding:26px 28px;background:#fff;border:2px solid var(--encre,#121417);border-radius:var(--r-bloc,12px);box-shadow:8px 8px 0 var(--vert-doux,#DFEAE4)}
.surmesure h2{font-size:clamp(21px,2.4vw,27px);line-height:1.2;margin:0 0 12px}
.surmesure>div>p{color:var(--txt-2);font-size:16px;margin:0 0 14px}
.surmesure-prix{border-left:1px solid var(--ligne,#D9E0DC);padding-left:24px}
.surmesure-prix .bt{display:block;text-align:center;margin-top:10px}
.surmesure .tf-p,.surmesure .tf-m{animation:none;opacity:1;transform:none}
@media (max-width:760px){.surmesure{grid-template-columns:1fr}.surmesure-prix{border-left:0;padding-left:0;border-top:1px solid var(--ligne,#D9E0DC);padding-top:18px}}