/* LE TUNNEL du connecteur Kaordia (#60.2, à la charte Kaordia depuis #60.5) — son style, et celui de la page de connexion.
   ⛔ Rien n'est chargé chez un tiers : la police (Inter, OFL) et le logo sont servis par la vitrine (/vitrine/…).
   ⭐ LA CHARTE vient du projet « Socle Kaordia Initial » (/srv/projects/kaordia/frontend) — chaque couleur dit son fichier :
      public/kaordia-symbol.svg, kaordia-lockup-horizontal(-white).svg   le logo, son bleu marine, son vert, ses deux gris-bleu
      src/theme/palette.ts                                               le vert Kaordia, et la règle des nuances (mélange en LAB)
      src/styles/variables.css                                           Inter, les neutres (échelle Zinc), l'alerte, l'erreur, les rayons
      src/styles/login.css                                               le fond de marque clair et son halo marine
   ⛔ Aucune autre couleur : les nuances DÉRIVENT de celles-ci (color-mix), comme le fait palette.ts. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("/vitrine/inter.woff2") format("woff2"); }
:root {
  --marine: #1e2c52;            /* kaordia-symbol.svg — les traits du K */
  --vert: #39a935;              /* kaordia-symbol.svg — le noyau ; palette.ts « Kaordia (vert) » */
  --ardoise: #5a768c;           /* kaordia-lockup-horizontal.svg — la signature */
  --brume: #aebfce;             /* kaordia-lockup-horizontal-white.svg — la signature sur fond marine */
  --fond: #F4F6F9;              /* login.css — le fond de marque clair */
  --blanc: #FFFFFF;             /* variables.css --color-white */
  --papier: #FBFBFC;            /* variables.css --color-cream */
  --perle: #ECECEF;             /* variables.css --color-pearl */
  --trait: #E4E4E7;             /* variables.css --color-slate-200 */
  --encre: #18181B;             /* variables.css --color-ink */
  --graphite: #3F3F46;          /* variables.css --color-graphite */
  --gris: #71717A;              /* variables.css --color-slate */
  --alerte: #C98A1E;            /* variables.css --color-warning */
  --erreur: #CF4A45;            /* variables.css --color-error */
  /* les nuances — la règle de palette.ts : vers le blanc pour les claires, vers le noir pour les foncées, en LAB */
  --vert-fonce: color-mix(in lab, var(--vert), black 30%);
  --vert-doux: color-mix(in lab, white, var(--vert) 12%);
  --marine-fonce: color-mix(in lab, var(--marine), black 30%);
  --marine-doux: color-mix(in lab, white, var(--marine) 5%);
  --alerte-fonce: color-mix(in lab, var(--alerte), black 50%);
  --alerte-doux: color-mix(in lab, white, var(--alerte) 12%);
  --erreur-fonce: color-mix(in lab, var(--erreur), black 30%);
  --erreur-doux: color-mix(in lab, white, var(--erreur) 12%);
  --rayon: 14px;                /* variables.css --radius-xl */
  --rayon-petit: 10px;          /* variables.css --radius-lg */
  --ombre: 0 1px 2px rgb(30 44 82 / .06), 0 12px 32px rgb(30 44 82 / .10);
  --elan: cubic-bezier(.2, .8, .2, 1);   /* variables.css --ease-out */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 9rem; }
body {
  margin: 0; color: var(--encre); background: var(--papier); overflow-x: hidden;
  font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.025em; color: var(--marine); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
h4 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: .2em; }
p { margin: 0 0 1em; }
a { color: var(--marine); }
img { display: block; }
.large { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

.bandeau {
  margin: 0; padding: .45rem 1rem; text-align: center; font-size: .84rem; font-weight: 600;
  background: var(--alerte-doux); color: var(--alerte-fonce); border-bottom: 1px solid color-mix(in lab, white, var(--alerte) 30%);
}

/* ── l'en-tête : le logo Kaordia, la progression 1 · 2 · 3, le compte ───────────────────────────────────── */
.tete { position: sticky; top: 0; z-index: 5; background: rgb(255 255 255 / .92); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--perle); }
.tete-ligne { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "marque fil compte";
              align-items: center; gap: .6rem 1.5rem; padding: .65rem 0; }
.marque { grid-area: marque; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-nom { font-size: 1.5rem; font-weight: 700; letter-spacing: -.024em; color: var(--marine); }
.marque-sous { margin-top: .22rem; font-size: .62rem; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; color: var(--ardoise); }
.compte { grid-area: compte; display: flex; align-items: center; gap: .5rem; }
.compte form { display: block; margin: 0; }

.fil { grid-area: fil; justify-self: center; }
.fil ol { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fil li { display: flex; align-items: center; gap: .4rem; }
.fil li + li::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--trait); transition: background .4s; }
.fil a { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px;
         color: var(--gris); text-decoration: none; font-size: .92rem; font-weight: 600; transition: background .3s, color .3s; }
.fil a:hover { background: var(--marine-doux); color: var(--marine); }
.fil-n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .85rem; font-weight: 700;
         background: var(--blanc); color: var(--gris); border: 2px solid var(--trait); transition: background .3s, color .3s, border-color .3s, transform .3s var(--elan); }
.fil .actuel a { color: var(--marine); }
.fil .actuel .fil-n { background: var(--marine); border-color: var(--marine); color: var(--blanc); transform: scale(1.1); }
.fil .fait .fil-n { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.fil .fait a { color: var(--graphite); }
.fil li.fait + li::before, .fil li.actuel + li::before { background: var(--trait); }
.fil li.fait + li::before { background: var(--vert); }
.jauge { display: none; height: 3px; background: transparent; }
.js .jauge { display: block; }
.jauge span { display: block; height: 100%; width: 33.34%; background: var(--vert); border-radius: 0 3px 3px 0; transition: width .6s var(--elan); }
body[data-etape="2"] .jauge span { width: 66.67%; }
body[data-etape="3"] .jauge span { width: 100%; }

/* ── les boutons ────────────────────────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem;
  border: 2px solid var(--marine); border-radius: 999px; background: var(--marine); color: var(--blanc);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--elan), box-shadow .2s;
}
.bouton:hover { background: var(--marine-fonce); border-color: var(--marine-fonce); transform: translateY(-1px); box-shadow: 0 6px 18px rgb(30 44 82 / .22); }
.bouton:active { transform: translateY(0); }
.bouton:disabled { opacity: .6; cursor: wait; }
.bouton-petit { padding: .32rem .9rem; font-size: .86rem; border-width: 1.5px; }
.bouton-contour { background: transparent; color: var(--marine); border-color: color-mix(in lab, white, var(--marine) 30%); }
.bouton-contour:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.bouton-vert { background: var(--vert); border-color: var(--vert); color: var(--marine-fonce); }
.bouton-vert:hover { background: color-mix(in lab, white, var(--vert) 80%); border-color: color-mix(in lab, white, var(--vert) 80%); box-shadow: 0 6px 22px rgb(57 169 53 / .35); }
.fleche { display: inline-block; transition: transform .25s var(--elan); }
.bouton:hover .fleche { transform: translateX(4px); }
.lien-retour:hover .fleche { transform: translateX(-4px); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
h1:focus, h2:focus { outline: none; }

/* ── étape 1 : le héros marine ──────────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; color: var(--blanc); padding: clamp(2.8rem, 7vw, 5rem) 0 clamp(6rem, 11vw, 8.5rem);
        background: radial-gradient(900px 500px at 85% -10%, rgb(57 169 53 / .22), transparent 65%),
                    radial-gradient(700px 500px at -10% 110%, rgb(174 191 206 / .16), transparent 60%), var(--marine); }
.hero-grille { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { color: var(--blanc); max-width: 17ch; }
.surtitre { margin: 0 0 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); }
.hero .surtitre { color: var(--brume); }
.chapo { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--brume); max-width: 56ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; margin: 1.8rem 0 0; }
.lien-clair { color: var(--blanc); font-weight: 600; text-underline-offset: .25em; text-decoration-color: var(--vert); text-decoration-thickness: 2px; }
.avant-apres { display: grid; gap: .9rem; }
.aa { padding: 1.05rem 1.2rem; border-radius: var(--rayon); border: 1px solid rgb(174 191 206 / .28); background: rgb(255 255 255 / .06); }
.aa p { margin: 0; font-size: .97rem; color: var(--brume); }
.aa .aa-titre { margin-bottom: .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.aa-apres { background: var(--blanc); border-color: var(--blanc); box-shadow: var(--ombre); }
.aa-apres p { color: var(--graphite); }
.aa-apres .aa-titre { color: var(--vert-fonce); }

/* ── les blocs ──────────────────────────────────────────────────────────────────────────────────────── */
.bloc { padding: clamp(2.6rem, 6vw, 4.5rem) 0; }
.bloc-teinte { background: var(--fond); border-block: 1px solid var(--perle); }
.bloc-schema { padding-top: 0; }
.intro { max-width: 64ch; color: var(--graphite); font-size: 1.06rem; }
.titre-etape { font-size: clamp(1.9rem, 4.4vw, 2.9rem); max-width: 22ch; }
.grille { display: grid; gap: 1.2rem; margin-top: 2rem; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.carte { padding: 1.4rem 1.5rem; background: var(--blanc); border: 1px solid var(--perle); border-radius: var(--rayon);
         transition: transform .3s var(--elan), box-shadow .3s, border-color .3s, opacity .7s var(--elan); }
.carte::before { content: ""; display: block; width: 2.2rem; height: 4px; margin-bottom: 1rem; border-radius: 4px; background: var(--vert); transition: width .35s var(--elan); }
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: var(--trait); }
.carte:hover::before { width: 3.6rem; }
.carte p { margin: 0; color: var(--graphite); font-size: .98rem; }
.pour-qui { margin: 2rem auto 0; max-width: 62ch; text-align: center; color: var(--ardoise); font-size: 1.02rem; }

/* ── LE SCHÉMA : votre IA → la porte Kaordia → vos outils ───────────────────────────────────────────── */
.schema { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 5.5rem auto 5.5rem 1fr; align-items: center; gap: 0 .4rem;
          margin: calc(-1 * clamp(4rem, 8vw, 6rem)) 0 0; padding: clamp(1.3rem, 3vw, 2.2rem);
          background: var(--blanc); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre); }
.schema-colonne { display: grid; gap: .7rem; align-content: center; }
.schema-titre { margin: 0 0 .2rem; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.noeud { display: flex; align-items: center; gap: .7rem; padding: .75rem .95rem; border-radius: var(--rayon-petit);
         border: 1.5px solid var(--trait); background: var(--papier);
         transition: border-color .5s, background .5s, box-shadow .5s, opacity .5s, transform .5s var(--elan); }
.noeud strong { display: block; font-size: .98rem; line-height: 1.25; color: var(--marine); }
.noeud small { display: block; font-size: .82rem; line-height: 1.3; color: var(--gris); }
.pastille { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--trait); position: relative; transition: background .5s; }
.pastille::before { content: ""; position: absolute; left: 50%; top: .36rem; width: .56rem; height: .56rem; margin-left: -.28rem; border-radius: 50%; background: var(--blanc); }
.pastille::after { content: ""; position: absolute; left: 50%; bottom: .34rem; width: 1rem; height: .5rem; margin-left: -.5rem; border-radius: .5rem .5rem 0 0; background: var(--blanc); }
.donnees { justify-content: space-between; }
.verrou { flex: none; position: relative; width: 1.15rem; height: .9rem; margin-top: .5rem; border-radius: 3px; background: var(--gris); transition: background .5s; }
.verrou::before { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: 100%; height: .55rem; border: 2.5px solid var(--gris); border-bottom: 0;
                  border-radius: .5rem .5rem 0 0; transform-origin: 100% 100%; transition: transform .5s var(--elan), border-color .5s; }
.noeud-porte { flex-direction: column; gap: .45rem; min-width: 11.5rem; padding: 1.3rem 1.2rem; text-align: center;
               background: var(--marine); border-color: var(--marine); box-shadow: 0 10px 28px rgb(30 44 82 / .28); animation: souffle 3.2s ease-in-out infinite; }
.noeud-porte strong { color: var(--blanc); font-size: 1.05rem; }
.reponse { display: none; padding: .18rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 650; background: var(--vert); color: var(--marine-fonce); animation: surgit .5s var(--elan); }
.schema[data-qui="vous"] .r-vous, .schema[data-qui="collegue"] .r-collegue { display: inline-block; }
/* celui qui demande, et CE QUI S'OUVRE POUR LUI — l'autre reste fermé */
.schema[data-qui="vous"] .p-vous, .schema[data-qui="collegue"] .p-collegue,
.schema[data-qui="vous"] .d-vous, .schema[data-qui="collegue"] .d-collegue {
  border-color: var(--vert); background: var(--vert-doux); box-shadow: 0 0 0 4px rgb(57 169 53 / .12); transform: scale(1.02); }
.schema[data-qui="vous"] .p-vous .pastille, .schema[data-qui="collegue"] .p-collegue .pastille { background: var(--vert); }
.schema[data-qui="vous"] .d-vous .verrou, .schema[data-qui="collegue"] .d-collegue .verrou { background: var(--vert-fonce); }
.schema[data-qui="vous"] .d-vous .verrou::before, .schema[data-qui="collegue"] .d-collegue .verrou::before { border-color: var(--vert-fonce); transform: rotate(38deg) translateY(-1px); }
.schema[data-qui="vous"] .p-collegue, .schema[data-qui="collegue"] .p-vous,
.schema[data-qui="vous"] .d-collegue, .schema[data-qui="collegue"] .d-vous { opacity: .55; }
.schema-lien { position: relative; height: 2px; margin-top: 1.6rem;
               background: repeating-linear-gradient(90deg, var(--brume) 0 6px, transparent 6px 12px); }
.grain { position: absolute; top: 50%; left: 0; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%;
         background: var(--vert); box-shadow: 0 0 0 4px rgb(57 169 53 / .18); animation: file-h 1.6s linear infinite; }
.grain-2 { animation-delay: -.8s; }
.schema figcaption { grid-column: 1 / -1; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--perle);
                     text-align: center; color: var(--graphite); font-size: .98rem; }
@keyframes file-h { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes file-v { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes souffle { 0%, 100% { box-shadow: 0 10px 28px rgb(30 44 82 / .28), 0 0 0 0 rgb(57 169 53 / .35); }
                     50% { box-shadow: 0 10px 28px rgb(30 44 82 / .28), 0 0 0 10px rgb(57 169 53 / 0); } }
@keyframes surgit { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

/* ── ce qui est prouvé ──────────────────────────────────────────────────────────────────────────────── */
.preuves { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.preuves li { display: grid; gap: .55rem; align-content: start; padding: 1.1rem 1.25rem; background: var(--blanc); border: 1px solid var(--perle); border-radius: var(--rayon); }
.preuves h3 { font-size: 1rem; margin-bottom: .3em; }
.preuve { margin: 0; color: var(--graphite); font-size: .9rem; line-height: 1.5; }
.etat { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.etat::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.etat-ok { background: var(--vert-doux); color: var(--vert-fonce); }
.etat-cours { background: var(--alerte-doux); color: var(--alerte-fonce); }
.etat-cours::before { animation: clignote 1.6s ease-in-out infinite; }
.etat-non { background: var(--perle); color: var(--graphite); }
@keyframes clignote { 50% { opacity: .25; } }

/* ── étape 2 : les packs ────────────────────────────────────────────────────────────────────────────── */
.pack { display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.6rem; background: var(--blanc); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 4px);
        transition: transform .35s var(--elan), box-shadow .35s, border-color .35s, opacity .7s var(--elan); }
.pack:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: var(--vert); }
.pack-jauge { display: flex; gap: .3rem; margin: 0 0 1.3rem; }
.pack-jauge span { width: 1.9rem; height: .42rem; border-radius: 999px; background: var(--perle); }
.pack-jauge .plein { background: var(--vert); }
.pack h3 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .35em; }
.pack-taille { margin: 0; font-weight: 600; color: var(--encre); }
.pack-pour { margin: 0; color: var(--ardoise); font-size: .95rem; }
.pack-prix { margin: 1.3rem 0 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--perle); font-size: 1.25rem; font-weight: 700; color: var(--marine); }
.pack .bouton { margin-top: auto; }
.notes { margin: 2rem 0 0; padding: 0; list-style: none; color: var(--graphite); font-size: .96rem; display: grid; gap: .5rem; }
.notes li { position: relative; padding-left: 1.4rem; }
.notes li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--vert); }

/* ── étape 3 : le formulaire, la suite, les mentions ─────────────────────────────────────────────────── */
.demande-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; margin-top: 2rem; }
.fiche { padding: clamp(1.3rem, 3vw, 2rem); background: var(--blanc); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre); }
.champ { margin-bottom: 1.05rem; }
label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .92rem; color: var(--marine); }
input, select, textarea {
  width: 100%; padding: .72rem .9rem; border: 1.5px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--blanc); color: var(--encre); font: inherit; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 4px rgb(57 169 53 / .16); }
textarea { resize: vertical; }
.champ.manque input, .champ.manque select, .champ.manque textarea { border-color: var(--erreur); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--rayon-petit); font-weight: 600; font-size: .95rem; animation: surgit .4s var(--elan); }
.message.reussi { background: var(--vert-doux); color: var(--vert-fonce); border: 1px solid color-mix(in lab, white, var(--vert) 45%); }
.message.refus { background: var(--erreur-doux); color: var(--erreur-fonce); border: 1px solid color-mix(in lab, white, var(--erreur) 45%); }
.ensuite { padding: clamp(1.3rem, 3vw, 1.8rem); background: var(--fond); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 4px); }
.etapes { margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 1.15rem; }
.etapes li { counter-increment: etape; position: relative; padding-left: 2.9rem; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2rem; height: 2rem;
                     border-radius: 50%; background: var(--marine); color: var(--blanc); font-weight: 700; font-size: .9rem; }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.25rem; bottom: -1rem; width: 2px; background: var(--brume); }
.etapes p { margin: 0; color: var(--graphite); font-size: .93rem; }
.rgpd { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--perle); }
.rgpd .notes { margin-top: 1rem; }
.petit { margin-top: 1rem; font-size: .88rem; color: var(--gris); }

/* ── d'une étape à l'autre ──────────────────────────────────────────────────────────────────────────── */
.suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; }
.suite > :only-child { margin-left: auto; }
.suite > .lien-retour:only-child { margin-left: 0; margin-right: auto; }
.lien-retour { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ardoise); text-decoration: none; }
.lien-retour:hover { color: var(--marine); }
/* sans script, les trois étapes se suivent ; avec, une seule à l'écran, et elle ENTRE */
.js .etape.entre { animation: entre-avant .55s var(--elan) both; }
.js body[data-sens="arriere"] .etape.entre { animation-name: entre-arriere; }
@keyframes entre-avant { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes entre-arriere { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
/* les apparitions au défilement (page.js pose « vu ») */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--elan), transform .7s var(--elan), box-shadow .3s, border-color .3s; }
.js .apparait.vu { opacity: 1; transform: none; }
.js .schema.apparait { transform: translateY(22px) scale(.985); }
.js .schema.apparait.vu { transform: none; }
.js .grille > .apparait:nth-child(2), .js .preuves > .apparait:nth-child(even) { transition-delay: .09s; }
.js .grille > .apparait:nth-child(3) { transition-delay: .18s; }
.js .grille > .apparait.vu:hover { transition-delay: 0s; }

/* ── la relecture, le pied ──────────────────────────────────────────────────────────────────────────── */
.avis { margin-top: 2rem; }
.avis details { padding: .7rem 1rem; border: 1.5px dashed var(--brume); border-radius: var(--rayon-petit); background: var(--blanc); }
.avis summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ardoise); }
.avis textarea { margin: .7rem 0; }
.avis .message { margin: .7rem 0 0; }
.pied { padding: 2rem 0 2.6rem; background: var(--marine); color: var(--brume); font-size: .92rem; }
.pied p { display: flex; align-items: center; gap: .6rem; margin: 0; }
.pied .avis { margin-top: 1.2rem; }

/* ── la page de connexion (sans session) ────────────────────────────────────────────────────────────── */
.entree { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
          background: radial-gradient(1200px 600px at 50% -10%, rgb(30 44 82 / .10), transparent 70%), var(--fond); }
.entree-carte { position: relative; overflow: hidden; width: min(420px, 100%); padding: 2.6rem 2rem 2.2rem; text-align: center;
                background: var(--blanc); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre);
                animation: surgit .7s var(--elan) both; }
.entree-carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--marine) 0 70%, var(--vert) 70%); }
.entree-logo { display: grid; place-items: center; margin: 0 0 .5rem; }
.entree-logo img { animation: flotte 4.5s ease-in-out infinite; }
.entree-nom { margin: 0; font-size: 2.3rem; font-weight: 700; letter-spacing: -.024em; line-height: 1; color: var(--marine); }
.entree-produit { margin: .5rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; color: var(--ardoise); }
.entree-carte h1 { margin: 1.8rem 0 .3rem; font-size: 1.35rem; }
.entree-phrase { margin: 0 0 1.6rem; color: var(--gris); }
.entree-boutons { display: grid; gap: .7rem; margin: 0; }
@keyframes flotte { 50% { transform: translateY(-5px); } }

/* ── l'écran étroit ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tete-ligne { grid-template-columns: 1fr auto; grid-template-areas: "marque compte" "fil fil"; }
  .fil { justify-self: stretch; }
  .fil ol { justify-content: space-between; }
  .fil li + li::before { flex: 1; min-width: .6rem; }
  .fil li + li { flex: 1 1 auto; }
  .fil a { white-space: nowrap; }
  .hero-grille, .demande-grille { grid-template-columns: 1fr; }
  .grille-3 { grid-template-columns: 1fr; }
  .pack-vide { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 8rem; }
  .preuves { grid-template-columns: 1fr; }
  .schema { grid-template-columns: 1fr; gap: 0; }
  .schema-lien { justify-self: center; width: 2px; height: 2.4rem; margin: .5rem 0;
                 background: repeating-linear-gradient(180deg, var(--brume) 0 6px, transparent 6px 12px); }
  .grain { top: 0; left: 50%; animation-name: file-v; }
  .schema-titre { margin-top: .2rem; }
  .noeud-porte { min-width: 0; }
  .suite { flex-direction: column-reverse; align-items: stretch; }
  .suite .bouton { width: 100%; }
  .suite > .lien-retour { justify-content: center; }
  .actions .bouton { width: 100%; }
}
@media (max-width: 520px) {
  .large { width: calc(100% - 2rem); }
  .tete-ligne { column-gap: .6rem; }
  .marque { gap: .45rem; }
  .marque img { width: 28px; height: 28px; }
  .marque-nom { font-size: 1.2rem; }
  .marque-sous { font-size: .52rem; letter-spacing: .2em; }
  .compte { gap: .35rem; }
  .compte .bouton { padding: .26rem .55rem; font-size: .74rem; }
  .pack .bouton, .fiche .bouton { white-space: normal; }
  .fil a { padding: .2rem .35rem .2rem .2rem; font-size: .8rem; gap: .35rem; }
  .fil li:not(.actuel) .fil-t { display: none; }
  html:not(.js) .fil li .fil-t { display: none; }
  .bandeau { font-size: .76rem; }
}

/* ── « réduire les animations » : tout est là, rien ne bouge ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait { opacity: 1; transform: none; }
  .grain { display: none; }
}