/* ══════════════════════════════════════════════════════════════════════
   EIDION — vitrine
   ----------------------------------------------------------------------
   Direction : la charte de marque Eidion. Noir profond et papier clair,
   la rigueur d'une planche-contact ; le jaune n'apparaît que là où le
   point de la marque structure, sélectionne ou signale — jamais en fond,
   jamais en texte courant.

   Signature : la planche-contact du hero. Six vues perforées comme un
   film ; au survol, l'image se révèle et nomme l'outil.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --film:      #0F0F0F;
  --film-2:    #2A2A2A;
  --papier:    #F2F2F2;
  --papier-2:  #FAFAFA;
  --trait:     #E1E1E1;
  --trait-2:   #ECECEC;
  --encre:     #0F0F0F;
  --gris:      #5C5C5C;
  --gris-2:    #9B9B9B;
  --sol:       #EAEAEA;

  --jaune:     #F2B200;
  --jaune-pale:#FBE9B8;

  --vert:      #1E7A4F;
  --vert-pale: #DEF3E6;

  --r:   14px;
  --r-s: 8px;

  --om-1: 0 1px 2px rgba(15,15,15,.05);
  --om-2: 0 4px 16px -6px rgba(15,15,15,.14), 0 1px 3px rgba(15,15,15,.05);
  --om-3: 0 18px 44px -18px rgba(15,15,15,.28), 0 3px 10px rgba(15,15,15,.06);

  --pas: 260ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:84px}
body{
  background:var(--papier);color:var(--encre);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

.enveloppe{max-width:1140px;margin:0 auto;padding:0 24px}

/* ── Typographie ────────────────────────────────────────────────────── */
h1,h2,h3{font-family:Inter,sans-serif;letter-spacing:-.028em;line-height:1.08}
h1{font-weight:900;font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-weight:800;font-size:clamp(1.75rem,3.4vw,2.65rem);line-height:1.14}
h3{font-weight:700;font-size:1.09rem;letter-spacing:-.012em;line-height:1.3}

.mono{font-family:Inter,sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Le sourcil : un repère de bord de pellicule. */
.sourcil{display:inline-flex;align-items:center;gap:9px;color:var(--encre);font-weight:600;margin-bottom:18px}
.sourcil::before{content:'';width:20px;height:2px;background:var(--jaune);opacity:1}

.chapo{font-size:1.14rem;color:var(--gris);max-width:60ch;line-height:1.68}

/* ── Boutons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-s);border:1px solid transparent;
  font-family:Inter,sans-serif;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;
  transition:transform var(--pas),box-shadow var(--pas),background var(--pas),color var(--pas),border-color var(--pas);
}
.btn-jaune{background:var(--jaune);color:var(--encre);box-shadow:var(--om-2)}
.btn-jaune:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(242,178,0,.5)}
.btn-jaune:active{transform:translateY(0)}

.btn-trait{background:transparent;color:var(--encre);border-color:var(--trait)}
.btn-trait:hover{border-color:var(--encre);color:var(--encre);background:var(--papier-2);transform:translateY(-2px);box-shadow:var(--om-2)}

.lien-fleche{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--encre);font-weight:600;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--trait);padding-bottom:2px;
  transition:border-color var(--pas),gap var(--pas);
}
.lien-fleche:hover{border-color:var(--encre);gap:10px}
.lien-fleche .fl{transition:transform var(--pas)}
.etapes-lien{text-align:center;margin-top:44px}

.btn-fantome{background:transparent;color:var(--gris);border-color:var(--trait);cursor:not-allowed;opacity:.75}
.btn-fantome:hover{transform:none;box-shadow:none}

.btn .fl{transition:transform var(--pas)}
.btn:hover .fl{transform:translateX(3px)}

:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:4px}

/* ── Navigation ─────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(244,246,247,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--pas),box-shadow var(--pas);
}
#nav.pose{border-bottom-color:var(--trait);box-shadow:var(--om-1)}
.nav-in{max-width:1140px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:30px}

.marque{display:inline-flex;align-items:baseline;text-decoration:none;color:var(--encre);
  font-family:Inter,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.03em;line-height:1}
.marque .pt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--jaune);
  margin-left:3px;margin-bottom:2px;align-self:flex-end;transition:transform var(--pas),box-shadow var(--pas)}
.marque:hover .pt{transform:scale(1.5);box-shadow:0 0 7px 2px rgba(242,178,0,.55),0 0 14px 6px rgba(242,178,0,.28)}

.nav-liens{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-liens a:not(.btn){
  position:relative;text-decoration:none;color:var(--gris);font-size:14.5px;font-weight:500;
  padding:4px 0;transition:color var(--pas);
}
.nav-liens a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--jaune);transition:right var(--pas);
}
.nav-liens a:not(.btn):hover{color:var(--encre)}
.nav-liens a:not(.btn):hover::after{right:0}
.nav-liens .btn{padding:10px 18px;font-size:14px}

/* ── Connexion ───────────────────────────────────────────────────────────
   La porte des bêta-testeurs. Discrète : elle ne dispute rien à « Être
   prévenu », qui reste l'affaire de cette page. Mais elle survit au mobile,
   contrairement aux ancres de section — un testeur ouvre eidion.fr depuis
   son téléphone, en repérage, et n'a que faire d'un lien vers « Tarifs ».
--------------------------------------------------------------------------- */
.nav-connexion{color:var(--gris-2)!important}
.nav-connexion:hover{color:var(--encre)!important}
/* Le filet ne sépare que s'il y a quelque chose à séparer : il s'efface avec
   les ancres de section. */
.nav-connexion::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:var(--trait);
}

@media(max-width:820px){
  .nav-liens{gap:16px}
  .nav-liens a:not(.btn):not(.nav-connexion){display:none}
  .nav-connexion::before{display:none}
}

/* ── Hero ───────────────────────────────────────────────────────────── */
header{padding:150px 0 76px;position:relative}
header::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(760px 380px at 76% 8%, rgba(242,178,0,.08), transparent 68%),
    radial-gradient(520px 300px at 4% 30%, rgba(15,15,15,.035), transparent 70%);
}
.h-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--papier-2);color:var(--encre);
  border:1px solid var(--trait);
  padding:6px 13px;border-radius:100px;margin-bottom:26px;
}
.h-badge .pastille{width:6px;height:6px;border-radius:50%;background:var(--jaune);animation:pouls 2.4s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

h1 .accent{color:var(--encre);position:relative;white-space:nowrap}
h1 .accent::after{
  content:'';position:absolute;left:0;right:0;bottom:.08em;height:.11em;
  background:var(--jaune);opacity:.55;border-radius:2px;
}
header .chapo{margin-top:24px}
.h-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.h-note{margin-top:16px;color:var(--gris-2);font-size:13.5px}

/* ── Signature : la planche-contact ─────────────────────────────────── */
.planche{
  margin-top:76px;position:relative;
  background:var(--film);border-radius:var(--r);
  padding:26px 0;box-shadow:var(--om-3);overflow:hidden;
}
.planche::before,.planche::after{
  content:'';position:absolute;left:0;right:0;height:13px;
  background-image:radial-gradient(circle at 8px 50%, var(--papier) 3.5px, transparent 4px);
  background-size:26px 13px;opacity:.16;pointer-events:none;
}
.planche::before{top:6px}
.planche::after{bottom:6px}

.planche-legende{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:0 26px 18px;color:rgba(244,246,247,.42);
}
.vues{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:rgba(244,246,247,.08);
  border-top:1px solid rgba(244,246,247,.08);
  border-bottom:1px solid rgba(244,246,247,.08);
}
.vue{
  position:relative;aspect-ratio:3/2;background:var(--film-2);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 13px;overflow:hidden;transition:background var(--pas);
}
/* La révélation : le jaune Eidion monte du bas. */
.vue::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(242,178,0,0) 8%, rgba(242,178,0,.55) 100%);
  opacity:0;transition:opacity 340ms cubic-bezier(.22,.61,.36,1);
}
.vue:hover::before,.vue:focus-within::before{opacity:1}
.vue-num{
  position:absolute;top:11px;left:13px;z-index:2;
  font-family:Inter,sans-serif;font-weight:600;font-size:10px;letter-spacing:.08em;
  color:rgba(242,242,242,.32);transition:color var(--pas);
}
.vue:hover .vue-num{color:rgba(255,255,255,.72)}
.vue-ico{
  position:absolute;top:50%;left:50%;z-index:2;color:#fff;
  transform:translate(-50%,-50%) scale(.9);
  display:grid;place-items:center;opacity:.28;
  transition:opacity 340ms,transform 340ms cubic-bezier(.22,.61,.36,1);
}
.vue:hover .vue-ico{opacity:1;transform:translate(-50%,-58%) scale(1.06)}
.vue-nom{
  position:relative;z-index:2;color:#fff;font-family:Inter,sans-serif;
  font-weight:700;font-size:13.5px;letter-spacing:-.008em;
  opacity:0;transform:translateY(7px);
  transition:opacity 300ms,transform 300ms cubic-bezier(.22,.61,.36,1);
}
.vue:hover .vue-nom,.vue:focus-within .vue-nom{opacity:1;transform:none}
@media(max-width:900px){
  .vues{grid-template-columns:repeat(3,1fr)}
  .vue-nom{opacity:1;transform:none}
  .vue::before{opacity:.55}
}
@media(max-width:520px){.vues{grid-template-columns:repeat(2,1fr)}}

/* ── Aperçu (captures) ──────────────────────────────────────────────────
   Les captures ne naissent jamais au même format : le moodboard est un
   panorama, le tableau des encaissements une bande large et courte, le
   devis presque un carré. Côte à côte, elles ne peuvent pas s'aligner —
   il faudrait soit les déformer, soit les recadrer jusqu'à l'os.

   On les empile donc, toutes à la même largeur, chacune à son format
   propre déclaré dans --ar. C'est la ligne de gauche qui tient l'œil,
   pas la hauteur. Et chaque capture double de taille au passage : une
   interface réduite à 470 px ne se lit pas, elle se devine.
------------------------------------------------------------------------ */
#apercu{padding:96px 0}
.shot-pile{display:grid;gap:22px;max-width:960px;margin:0 auto}
.transition-shots{display:grid;grid-template-columns:1fr 1.3fr;gap:22px;max-width:960px;margin:0 auto;align-items:start}
.transition-legende{text-align:center;color:var(--gris);margin-top:18px}
@media(max-width:760px){.transition-shots{grid-template-columns:1fr}}

.shot{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  background:var(--papier-2);border:1px solid var(--trait);
  box-shadow:var(--om-3);
  transition:transform var(--pas),box-shadow var(--pas);
}
.shot:hover{transform:translateY(-4px);box-shadow:0 26px 60px -20px rgba(15,15,15,.32),0 3px 10px rgba(15,15,15,.07)}

/* Le cadre tient le format ; la page ne saute pas au chargement. */
.shot-cadre{position:relative;overflow:hidden;background:var(--film-2);aspect-ratio:var(--ar,16/9)}
.shot-cadre img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:var(--pos,50% 0);
  cursor:zoom-in;transition:transform 620ms cubic-bezier(.22,.61,.36,1);
}
.shot:hover .shot-cadre img{transform:scale(1.025)}

/* un léger voile sombre et une loupe apparaissent au survol */
.shot-cadre::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,15,0) 58%,rgba(15,15,15,.13));
  opacity:0;transition:opacity var(--pas);
}
.shot:hover .shot-cadre::after{opacity:1}
.shot .loupe{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(15,15,15,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#fff;
  opacity:0;transform:scale(.85);transition:opacity var(--pas),transform var(--pas);pointer-events:none;
}
.shot:hover .loupe{opacity:1;transform:scale(1)}

/* Lightbox */
#zoom{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:32px;
  background:rgba(15,15,15,.86);backdrop-filter:blur(6px);
  cursor:zoom-out;opacity:0;transition:opacity .28s ease;
}
#zoom.on{display:flex;opacity:1}
#zoom img{
  max-width:min(1200px,94vw);max-height:90vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  transform:scale(.97);transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
#zoom.on img{transform:scale(1)}
#zoom .z-close{
  position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;
  transition:background var(--pas);
}
#zoom .z-close:hover{background:rgba(255,255,255,.18)}
.z-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background var(--pas),transform var(--pas);
}
.z-nav:hover{background:rgba(255,255,255,.2)}
.z-prev{left:24px}
.z-next{right:24px}
.z-prev:hover{transform:translateY(-50%) translateX(-2px)}
.z-next:hover{transform:translateY(-50%) translateX(2px)}
@media(max-width:640px){.z-nav{width:40px;height:40px}.z-prev{left:10px}.z-next{right:10px}}
.z-dots{
  position:absolute;bottom:56px;left:0;right:0;display:flex;justify-content:center;gap:8px;
}
.z-dots span{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);
  cursor:pointer;transition:background var(--pas),transform var(--pas);
}
.z-dots span.on{background:rgba(255,255,255,.9);transform:scale(1.25)}
#zoom .z-cap{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.66);font-size:13.5px;padding:0 24px;
}
/* La légende : le nom de l'écran à gauche, la phrase à droite. Sur une
   même ligne tant que la place le permet. */
.shot figcaption{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 20px 16px;font-size:14px;color:var(--gris);
  border-top:1px solid var(--trait-2);background:var(--papier-2);line-height:1.5;
}
.shot-nom{flex:none;color:var(--encre);padding-top:1px}
.shot-txt{flex:1}
@media(max-width:620px){
  .shot figcaption{display:block}
  .shot-nom{display:block;margin-bottom:5px}
}

/* Cadre neutre tant que l'image n'est pas déposée */
.shot .shot-ph{display:none}
.shot.vide .shot-cadre{background:var(--papier)}
.shot.vide .shot-ph{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;border:1px dashed var(--trait);
  color:var(--gris);font-family:Inter,sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:20px;
}

/* ── Sections ───────────────────────────────────────────────────────── */
section{padding:96px 0}
.sec-blanche{background:var(--papier-2);border-top:1px solid var(--trait-2);border-bottom:1px solid var(--trait-2)}

/* ── Mode terrain ───────────────────────────────────────────────────────
   Une respiration sombre au milieu du papier. Le noir n'est pas décoratif :
   c'est celui de l'écran, sur place, quand la lumière est le sujet. La page
   bascule dans la lumière du shooting le temps d'une section.
------------------------------------------------------------------------ */
.sec-film{
  background:var(--film);color:#e6ebee;position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sec-film::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 460px at 82% 6%, rgba(242,178,0,.14), transparent 70%),
    radial-gradient(560px 400px at 4% 92%, rgba(242,178,0,.07), transparent 72%);
}
/* le grain : un voile de pellicule, très bas en intensité */
.sec-film::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
  background-size:4px 4px;
}
.sec-film .enveloppe{position:relative;z-index:1}
.sec-film .sourcil{color:var(--jaune)}
.sec-film h2{color:#F2F2F2}
.sec-film .chapo{color:#98a4ac}

.terrain-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,68px);align-items:center}
@media(max-width:900px){.terrain-in{grid-template-columns:1fr;gap:48px}}
.terrain-texte .chapo{margin-top:20px}

.terrain-liste{list-style:none;margin:36px 0 0;display:grid;gap:22px}
.terrain-liste li{display:flex;gap:16px;align-items:flex-start}
.tl-num{flex:none;width:26px;padding-top:4px;color:var(--jaune)}
.terrain-liste h3{color:#f2f5f6;margin-bottom:4px;font-size:1.02rem}
.terrain-liste p{color:#8b959c;font-size:14.6px;line-height:1.62}

.terrain-note{
  margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  color:#7d888f;font-size:14px;
}
.terrain-note b{color:#c8d2d8;font-weight:600}

/* La photo : posée, pas collée. Une lueur jaune passe derrière. */
.terrain-photo{position:relative;margin:0;isolation:isolate;max-width:400px;justify-self:center}
.terrain-photo::before{
  content:'';position:absolute;z-index:-1;inset:-16% -20%;
  background:radial-gradient(closest-side, rgba(242,178,0,.4), rgba(242,178,0,.12) 55%, transparent 76%);
  filter:blur(30px);
}
.terrain-photo img{
  width:100%;border-radius:20px;cursor:zoom-in;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  transition:transform var(--pas);
}
.terrain-photo:hover img{transform:translateY(-4px)}
.terrain-photo .terrain-ph{display:none}
.terrain-photo.vide .terrain-ph{
  min-height:440px;padding:28px;border-radius:20px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  background:linear-gradient(145deg,#202020,#101010);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  color:#f2f2f2;
}
.terrain-photo.vide .terrain-ph strong{font-size:1.1rem;letter-spacing:-.012em}
.terrain-photo.vide .terrain-ph span{color:#98a4ac;font-size:14px;line-height:1.6}
.terrain-photo figcaption{
  margin-top:16px;text-align:center;color:#6f7a81;
}
@media(max-width:900px){.terrain-photo{max-width:340px}}

.sec-tete{max-width:64ch;margin-bottom:52px}
.sec-tete .chapo{margin-top:16px}
.sec-tete.centre{text-align:center;margin-left:auto;margin-right:auto}
.sec-tete.centre .chapo{margin-left:auto;margin-right:auto}

/* ── Cartes ─────────────────────────────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grille{grid-template-columns:1fr}}

.carte{
  position:relative;background:var(--papier-2);border:1px solid var(--trait);
  border-radius:var(--r);padding:26px 24px 24px;overflow:hidden;
  transition:transform var(--pas),box-shadow var(--pas),border-color var(--pas);
}
/* Un filet jaune se déroule en haut de la carte, au survol. */
.carte::after{
  content:'';position:absolute;top:0;left:0;right:100%;height:2px;
  background:var(--jaune);
  transition:right 420ms cubic-bezier(.22,.61,.36,1);
}
.carte:hover{transform:translateY(-4px);box-shadow:var(--om-3);border-color:var(--jaune-pale)}
.carte:hover::after{right:0}

.carte-ico{
  width:42px;height:42px;border-radius:10px;background:var(--papier);
  display:grid;place-items:center;color:var(--encre);margin-bottom:16px;
  transition:transform var(--pas),background var(--pas);
}
.carte:hover .carte-ico{transform:scale(1.08) rotate(-3deg);background:var(--jaune-pale)}
.carte h3{margin-bottom:8px}
.carte p{color:var(--gris);font-size:14.6px;line-height:1.62}

/* ── Comparaison ────────────────────────────────────────────────────── */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.duel{grid-template-columns:1fr}}
.colonne{border-radius:var(--r);padding:30px 28px;border:1px solid var(--trait);background:var(--papier-2)}
.colonne.nous{background:var(--film);border-color:var(--film);color:var(--papier);box-shadow:var(--om-3);position:relative;overflow:hidden}
.colonne.nous::before{
  content:'';position:absolute;top:-40%;right:-20%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(242,178,0,.22),transparent 68%);pointer-events:none;
}
.colonne h3{margin-bottom:20px;position:relative}
.colonne ul{list-style:none;display:flex;flex-direction:column;gap:12px;position:relative}
.colonne li{display:flex;gap:11px;font-size:14.8px;line-height:1.55;align-items:flex-start}
.colonne li .m{flex:none;width:17px;text-align:center;font-weight:700}
.colonne.eux li{color:var(--gris)}
.colonne.eux .m{color:var(--gris-2)}
.colonne.nous li{color:rgba(244,246,247,.9)}
.colonne.nous .m{color:var(--jaune)}

/* ── Pour qui ───────────────────────────────────────────────────────── */
.publics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.publics{grid-template-columns:1fr}}
.public{border-left:2px solid var(--trait);padding:4px 0 4px 22px;transition:border-color var(--pas),transform var(--pas)}
.public:hover{border-left-color:var(--jaune);transform:translateX(3px)}
.public h3{margin-bottom:9px}
.public p{color:var(--gris);font-size:14.6px}

.pas-pour{
  margin-top:80px;padding:30px 32px;border:1px dashed var(--trait);
  border-radius:var(--r);background:var(--papier-2);
}
.pas-pour h3{margin-bottom:8px}
.pas-pour p{color:var(--gris);font-size:15px;max-width:70ch}

/* ── Étapes : une vraie séquence, le brief précède le virement ──────── */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
@media(max-width:820px){.etapes{grid-template-columns:1fr;gap:44px}}

/* La ligne de temps : passe exactement au centre des icônes des étapes
   1 et 3 (16,666% / 83,333%), puisque la grille n'a pas de gap. */
.etapes::before{
  content:'';position:absolute;top:25px;left:16.666%;right:16.666%;height:1px;
  background:var(--trait);z-index:0;
}
@media(max-width:820px){.etapes::before{display:none}}

.etape{padding:0 28px;position:relative;text-align:center;z-index:1}
@media(max-width:820px){.etape{padding:0}}

.etape-ico{
  width:50px;height:50px;border-radius:50%;margin:0 auto 18px;position:relative;z-index:1;
  background:var(--papier);border:1px solid var(--trait);color:var(--encre);
  display:grid;place-items:center;
  transition:border-color var(--pas),background var(--pas),transform var(--pas);
}
.etape:hover .etape-ico{border-color:var(--jaune);background:var(--jaune-pale);transform:scale(1.06)}

.etape-n{font-family:Inter,sans-serif;font-weight:700;font-size:12px;color:var(--encre);letter-spacing:.1em;margin-bottom:14px;display:block}
.etape h3{margin-bottom:9px}
.etape p{color:var(--gris);font-size:14.6px;max-width:32ch;margin:0 auto}

/* ── Tarifs ─────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:840px;margin:0 auto}
.plans.plans-seule{grid-template-columns:1fr;max-width:660px}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{
  background:var(--papier-2);border:1px solid var(--trait);border-radius:var(--r);
  padding:32px 30px;transition:transform var(--pas),box-shadow var(--pas),border-color var(--pas);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--om-3)}
.plan.vedette{border-color:var(--encre);position:relative;box-shadow:var(--om-2)}

/* Badge jaune réutilisable (ex : « 50 places » — section Fondateur) */
.badge-jaune{
  display:flex;width:fit-content;align-items:center;justify-content:center;
  margin:0 auto 14px;
  background:var(--jaune);color:var(--encre);padding:3px 11px;border-radius:100px;
  font-family:Inter,sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.plan .prix{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px}
.plan .prix b{font-family:Inter,sans-serif;font-weight:900;font-size:2.9rem;letter-spacing:-.03em}
.plan .prix span{color:var(--gris);font-size:14px}
.plan .sous{color:var(--gris-2);font-size:13px;margin-bottom:22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--gris);align-items:flex-start}
.plan li b{color:var(--encre);font-weight:600}
.plan li::before{content:'✓';color:var(--encre);font-weight:700;flex:none}
.plan li>span{flex:1;min-width:0}
.plan ul.plan-liste-double{
  display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:10px;
}
@media(max-width:560px){.plan ul.plan-liste-double{grid-template-columns:1fr}}
.plan .btn{width:100%}

.plan-lien-detail{
  display:inline-flex;align-items:center;gap:6px;
  font-family:Inter,sans-serif;font-weight:600;font-size:13.5px;color:var(--gris);
  text-decoration:none;margin:-10px 0 18px;transition:color var(--pas);
}
.plan-lien-detail:hover{color:var(--encre)}
.plan-lien-detail .fl{transition:transform var(--pas)}
.plan-lien-detail:hover .fl{transform:translateX(3px)}

.plan-note{color:var(--gris-2);font-size:12.5px;line-height:1.5;margin-top:16px;text-align:center}

.tarifs-toggle{
  position:relative;display:flex;width:fit-content;margin:0 auto 14px;padding:4px;gap:2px;
  background:var(--papier-2);border:1px solid var(--trait);border-radius:999px;
}
.tarifs-toggle-curseur{
  position:absolute;top:4px;left:0;height:calc(100% - 8px);
  background:var(--jaune);border-radius:999px;z-index:0;
  transition:transform var(--pas),width var(--pas);
}
.tarifs-toggle-btn{
  position:relative;z-index:1;
  font-family:Inter,sans-serif;font-weight:600;font-size:14px;color:var(--gris);
  background:transparent;border:none;border-radius:999px;padding:9px 20px;cursor:pointer;
  transition:color var(--pas);
}
.tarifs-toggle-btn.is-actif{color:var(--encre)}
.tarifs-toggle-reduc{
  display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  background:rgba(15,15,15,.08);border-radius:6px;padding:2px 6px;vertical-align:middle;
}
.tarifs-toggle-btn.is-actif .tarifs-toggle-reduc{background:rgba(15,15,15,.14)}
.tarifs-toggle-note{text-align:center;font-size:12.5px;color:var(--gris-2);margin:0 0 40px}
.prix-detail{margin:-2px 0 12px;font-size:13px;color:var(--gris-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge-vert{
  display:none;align-items:center;justify-content:center;
  background:var(--vert-pale);color:var(--vert);padding:2px 10px;border-radius:100px;
  font-family:Inter,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.02em;
}
.badge-vert.est-visible{display:inline-flex}

/* Bloc prix Fondateur (section dédiée, sous la carte de prix principale) */
.fondateur-prix{display:flex;align-items:baseline;gap:6px;justify-content:center;margin:28px 0 6px}
.fondateur-prix b{font-family:Inter,sans-serif;font-weight:900;font-size:2.9rem;letter-spacing:-.03em}
.fondateur-prix span{color:var(--gris);font-size:14px}
.fondateur-detail{text-align:center;color:var(--gris-2);font-size:13px;margin-bottom:28px}

/* ── Questions ──────────────────────────────────────────────────────── */
.questions{max-width:820px;margin:0 auto}
details.q{border-bottom:1px solid var(--trait);padding:4px 0}
details.q summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:Inter,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  transition:color var(--pas);
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:Inter,sans-serif;font-size:20px;color:var(--encre);font-weight:400;
}
details.q[open] summary::after{content:'−'}
details.q summary:hover::after{color:var(--jaune)}
details.q .rep{padding:0 40px 22px 0;color:var(--gris);font-size:15px;line-height:1.7;animation:deplie 240ms ease-out}
details.q .rep p+p{margin-top:11px}
details.q .rep b{color:var(--encre);font-weight:600}
@keyframes deplie{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ── Liste d'attente ────────────────────────────────────────────────── */
#attente{background:var(--film);color:var(--papier);position:relative;overflow:hidden}
#attente::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:900px;height:900px;pointer-events:none;
  background:radial-gradient(circle,rgba(242,178,0,.16),transparent 62%);
}
.att-in{max-width:660px;margin:0 auto;text-align:center;position:relative}
#attente h2{color:#fff}
#attente .chapo{color:rgba(244,246,247,.62);margin:16px auto 0}
#attente .sourcil{color:var(--jaune)}
.formulaire{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}

/* ── Le leurre ───────────────────────────────────────────────────────────
   Un champ que personne ne voit et que les robots remplissent. Il n'est
   surtout pas en display:none : c'est le premier réflexe, et les robots
   sérieux ignorent justement ce qui est masqué ainsi. On le pousse hors
   de l'écran — pour le robot, qui lit le HTML et non la page, il ressemble
   à un champ ordinaire. Le lecteur d'écran, lui, l'ignore : aria-hidden et
   tabindex="-1" le retirent du parcours au clavier comme de la lecture.
--------------------------------------------------------------------------- */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire input{
  flex:1;min-width:170px;padding:15px 17px;border-radius:var(--r-s);
  border:1px solid rgba(244,246,247,.18);background:rgba(244,246,247,.05);
  color:#fff;font-family:Inter,sans-serif;font-size:15px;
  transition:border-color var(--pas),background var(--pas);
}
.formulaire input::placeholder{color:rgba(244,246,247,.36)}
.formulaire input:focus{outline:none;border-color:var(--jaune);background:rgba(244,246,247,.09)}
.formulaire .btn{flex:none}
.formulaire .btn[disabled]{opacity:.6;cursor:wait}
.att-msg{margin-top:16px;font-size:14px;min-height:22px}
.att-msg.ok{color:#7fc9a5}
.att-msg.err{color:#e88b74}
.att-note{margin-top:20px;color:rgba(244,246,247,.4);font-size:12.5px}

/* ── Pied de page ───────────────────────────────────────────────────── */
footer{padding:56px 0 40px;border-top:1px solid var(--trait);background:var(--sol)}
.pied{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pied-marque{display:flex;flex-direction:column;gap:9px}
.pied-etym{color:var(--gris-2);font-size:12.5px;font-style:italic;max-width:34ch;line-height:1.5}
.pied-etym i{font-style:italic}
.pied-cols{display:flex;gap:48px;flex-wrap:wrap;padding-top:2px}
.pied-col{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-col h4{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2);margin:0 0 1px}
.pied-col a{color:var(--gris);text-decoration:none;font-size:14px;transition:color var(--pas)}
.pied-col a:hover{color:var(--encre)}
.pied-confiance{display:flex;gap:28px;flex-wrap:wrap}
.pied-sub{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-bas{margin-top:26px;color:var(--gris-2);font-size:13px}

/* ── Retour en haut ─────────────────────────────────────────────────── */
#haut{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--trait);
  background:var(--papier-2);color:var(--encre);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--om-2);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity var(--pas),transform var(--pas),box-shadow var(--pas),background var(--pas),color var(--pas);
}
#haut.vu{opacity:1;transform:none;pointer-events:auto}
#haut:hover{background:var(--jaune);color:var(--encre);box-shadow:var(--om-3);transform:translateY(-3px)}
@media(max-width:520px){#haut{right:16px;bottom:16px}}

/* ── Apparition au défilement ───────────────────────────────────────── */
.monte{opacity:0;transform:translateY(20px);transition:opacity 620ms ease,transform 620ms cubic-bezier(.22,.61,.36,1)}
.monte.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .monte{opacity:1;transform:none}
}