/* ============================================================
   FORMATION SECOND CERVEAU MARKETING - page de vente
   DA reprise du deck CopyCamp (copycamp-deck/deck.css), qui reprend
   lui-même app.copycamp.fr/rejoindre.
   Ni crème, ni bronze, ni serif : ce sont les marqueurs Copy House.
   Le chroma n'existe qu'en halo flouté, en trait ou en soulignement.
   Le deck vise une scène fixe 1600x900 lue à 3 m ; ici on redescend
   l'échelle en clamp() pour une lecture à 50 cm, mobile compris.
============================================================ */

@import url('fonts/fonts.css');

:root {
  --bg:      #FFFFFF;
  --ink:     #0A0A0A;
  --muted:   #737373;
  --line:    #E5E5E5;
  --wash:    #FAFAFA;
  --cta:     #171717;

  --cyan:    #00ABFF;
  --violet:  #9872F7;
  --emerald: #00C28C;

  --r-card: 18px;
  --r-lg:   22px;
  --r-win:  16px;
  --r-pill: 9999px;

  --maxw:   1120px;
  --gut:    clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ============================================================
   TYPO
============================================================ */
.kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

h1, .h1 { font-size: clamp(2.1rem, 3.9vw, 3.35rem); font-weight: 600; letter-spacing: -.032em; line-height: 1.07; }
.h1--wide { font-size: clamp(2.35rem, 6vw, 4.2rem); }
h2, .h2 { font-size: clamp(1.8rem, 4.2vw, 3rem);    font-weight: 600; letter-spacing: -.028em; line-height: 1.08; }
h3, .h3 { font-size: clamp(1.2rem, 2.3vw, 1.6rem);  font-weight: 600; letter-spacing: -.02em;  line-height: 1.2;  }
.h4      { font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 600; letter-spacing: -.014em; line-height: 1.3; }

.lead { font-size: clamp(1.06rem, 2.1vw, 1.4rem); line-height: 1.55; color: #404040; }
.body { color: var(--muted); }
.lead + .lead { margin-top: 15px; }
.body + .body { margin-top: 12px; }
.card .body + .body { margin-top: 0; }
.small { font-size: 15px; line-height: 1.55; color: var(--muted); }
.note {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .05em; line-height: 1.75; color: var(--muted);
}

strong {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0,194,140,.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
em { font-style: italic; color: var(--muted); }

.mt-xs { margin-top: 10px; }
.mt-s  { margin-top: 18px; }
.mt-m  { margin-top: 26px; }
.mt-l  { margin-top: 40px; }
.mt-xl { margin-top: 60px; }

/* ============================================================
   TRAME
============================================================ */
section { padding: clamp(64px, 9vw, 118px) var(--gut); position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap--wide { max-width: 1280px; }
.on-wash { background: var(--wash); }
.on-ink  { background: var(--ink); color: #FFF; }
.on-ink .body, .on-ink .small, .on-ink .lead { color: rgba(255,255,255,.7); }
.on-ink .kicker, .on-ink .note { color: rgba(255,255,255,.55); }
.on-ink strong { text-decoration-color: rgba(0,194,140,.55); }
.sec-head { max-width: 860px; }
.sec-head .h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 20px; }

/* Atmosphère : halos et grille, seule présence du chroma */
.glow { position: relative; z-index: 0; }
.glow::before {
  content: '';
  position: absolute; z-index: -1;
  top: 22%; left: -6%;
  width: 52%; height: 46%;
  background: radial-gradient(closest-side, rgba(0,171,255,.30) 0%, rgba(0,171,255,0) 100%);
  filter: blur(30px);
  pointer-events: none;
}
.glow--violet::before  { background: radial-gradient(closest-side, rgba(152,114,247,.26) 0%, rgba(152,114,247,0) 100%); }
.glow--emerald::before { background: radial-gradient(closest-side, rgba(0,194,140,.24) 0%, rgba(0,194,140,0) 100%); }
.glow--right::before   { left: auto; right: 0; }

.gridbg::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(66% 62% at 50% 38%, #000 0%, transparent 100%);
          mask-image: radial-gradient(66% 62% at 50% 38%, #000 0%, transparent 100%);
  opacity: .7;
  pointer-events: none;
}
.gridbg > * { position: relative; z-index: 1; }

/* ============================================================
   BARRE HAUTE
============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1280px; margin: 0 auto;
  padding: 12px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.wordmark { font-size: 15px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; display: flex; align-items: baseline; gap: 9px; }
.wordmark b { font-weight: 600; }
.wordmark i {
  font-style: normal; color: var(--line);
}
.topbar .meta { display: flex; align-items: center; gap: 22px; }

/* Le compteur de places de la barre collante. Même gabarit que le rebours. */
.places-mini {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--wash);
  white-space: nowrap;
}
.places-mini b { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.places-mini i {
  font-style: normal; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* Le rebours de la barre collante : il suit le lecteur sur toute la page. */
.cdown-bar {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--wash);
  white-space: nowrap;
}
.cdown-bar .cd-digits { display: inline-flex; align-items: baseline; gap: 7px; }
.cdown-bar .cd-u { display: inline-flex; align-items: baseline; gap: 1px; }
.cdown-bar b { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cdown-bar i { font-style: normal; font-size: 10px; color: var(--muted); }
.cdown-bar .cd-suffix,
.cdown-bar .cd-over {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.cdown-bar .cd-over { display: none; }
/* Une fois la deadline passée, la pastille disparaît : le prix de la barre haute
   affiche déjà 900 € HT, donc la répéter ne dit rien de plus. */
.cdown-bar.is-over { display: none; }

/* ============================================================
   BOUTONS
============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 28px;
  border-radius: var(--r-pill);
  background: var(--cta); color: #FFF;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid var(--cta);
  transition: transform .15s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(10,10,10,.16); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn--ghost { background: #FFF; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: #C8C8C8; box-shadow: none; }
.on-ink .btn { background: #FFF; color: var(--ink); border-color: #FFF; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }

/* ============================================================
   COMPOSANTS
============================================================ */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 28px;
  background: #FFF;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
}
.card--ink { background: var(--ink); border-color: var(--ink); color: #FFF; border-radius: var(--r-lg); padding: 34px; }
.card--ink .body, .card--ink .small { color: rgba(255,255,255,.7); }
.card--ink .kicker { color: rgba(255,255,255,.55); }
.card .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; color: var(--muted); }
.card--accent { border-color: rgba(0,194,140,.45); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 56px 1fr; gap: 0 22px;
  padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; }
.row .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; color: var(--muted); padding-top: 6px; }
.row .t { font-size: clamp(1.06rem, 1.9vw, 1.32rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.row .d { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

.checks { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.tick {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid rgba(0,194,140,.45);
  display: grid; place-items: center; margin-top: 2px;
}
.tick svg { width: 12px; height: 12px; stroke: var(--emerald); stroke-width: 2.4; fill: none; }
.tick--no { border-color: var(--line); }
.tick--no svg { stroke: #B4B4B4; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); background: #FFF; white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.stat .v, .stat .k { display: block; }
.stat .v { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.45; }

.endorse { display: flex; align-items: center; gap: 10px; }
.endorse span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}

/* Figure de programme : une carte par jour */
.day {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px 24px 26px; background: #FFF;
  display: flex; flex-direction: column; min-width: 0;
}
.day .w { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.day .t { margin-top: 12px; font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; }
.day .p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.day ul { list-style: none; margin: 18px 0; display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.day li { font-size: 15px; line-height: 1.35; padding-left: 16px; position: relative; }
.day li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.day .deliver {
  margin-top: auto; padding-top: 18px; flex-shrink: 0;
  display: flex; gap: 10px; align-items: flex-start;
  border-top: 1px solid var(--line);
}
.day .deliver .lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #007956;
  white-space: nowrap; padding-top: 3px;
}
.day .deliver .txt { font-size: 14.5px; line-height: 1.4; }

/* Le rituel quotidien, énoncé une fois */
.ritual {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 26px;
  border: 1px solid rgba(0,194,140,.32);
  border-radius: var(--r-card);
  background: rgba(0,194,140,.035);
}
.ritual .lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #007956; white-space: nowrap;
}
.ritual .txt { font-size: 16.5px; font-weight: 500; line-height: 1.4; }

/* Figures reprises du programme */
.figure { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #FFF; }
.figure img { width: 100%; }
.figure figcaption {
  border-top: 1px solid var(--line);
  padding: 13px 20px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.figscroll img { min-width: 720px; }

/* Rareté : les places */
.seats { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.seat-group { display: flex; flex-direction: column; gap: 16px; }
.seat-dots { display: grid; grid-template-columns: repeat(5, 18px); gap: 11px; }
.seat-dots i { width: 18px; height: 18px; border-radius: 50%; display: block; border: 1px solid #D4D4D4; }
.seat-dots i.on { background: var(--ink); border-color: var(--ink); }
.seat-group .lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Parcours en 3 étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; background: #FFF; }
.step .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; color: var(--muted); }
.step .t { margin-top: 12px; font-size: 1.1rem; font-weight: 600; letter-spacing: -.018em; }
.step .d { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Prix */
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price .v { font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .u { font-size: 17px; color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 24px 44px 24px 0; position: relative;
  font-size: clamp(1.02rem, 1.9vw, 1.22rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .a { padding: 0 0 26px; color: var(--muted); max-width: 780px; }
.faq .a p + p { margin-top: 12px; }

/* Pied */
footer { border-top: 1px solid var(--line); padding: 48px var(--gut) 64px; }
footer a { color: var(--muted); }

/* ============================================================
   RESPONSIVE
============================================================ */
/* ------------------------------------------------------------
   L'échelle de dégradation de la barre haute.

   Elle porte six éléments (nom, date de session, prix, places, rebours,
   bouton) et elle sature vite. Ordre de sacrifice, du moins utile au plus
   utile : la date de session part la première (elle est écrite dans la
   section offre), puis le commentaire « avant 900 € », puis les mots des
   pastilles, puis le prix, puis le nom du produit. Le bouton, les places
   et le rebours ne partent jamais.
   Tout élément ajouté ici se vérifie sur la balayage de largeurs du README.
------------------------------------------------------------ */
@media (max-width: 1180px) {
  .topbar .meta .chip { display: none; }
}
@media (max-width: 900px) {
  .grid-3, .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  /* Le rebours reste, son commentaire de prix part : les chiffres portent l'urgence. */
  .topbar .meta { gap: 14px; }
  .cdown-bar .cd-suffix { display: none; }
}
@media (max-width: 820px) {
  /* Les deux pastilles se compactent avant que la barre ne déborde : les
     secondes sautent avant les jours (c'est le nombre de jours qui décide), et
     « 7/10 » suffit puisque le mot « places » est porté par la section offre. */
  .cdown-bar { padding: 5px 10px; gap: 6px; }
  .cdown-bar .cd-digits { gap: 5px; }
  .cdown-bar .cd-u--s { display: none; }
  .places-mini { padding: 5px 10px; }
  .places-mini .pl-word { display: none; }
}
@media (max-width: 560px) {
  /* Sur un petit écran, le format sort du lockup pour laisser la place au bouton. */
  .wordmark b, .wordmark i { display: none; }
}
@media (max-width: 500px) {
  /* Ordre de sacrifice sur un écran de téléphone : le nom du produit part avant
     la rareté et avant le bouton. La barre devient un bandeau de rareté, et la
     marque est de toute façon réaffirmée 40 px plus bas dans le hero. */
  .wordmark { display: none; }
  .topbar .meta { gap: 10px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row .n { padding-top: 0; }
  .btn { width: 100%; justify-content: center; }
  .cta-row { gap: 12px; }
  .topbar .meta .price-mini { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ============================================================
   COUCHE VISUELLE - scène 3D, terminal, orbe, empilements
   Tout est en CSS/SVG : aucune image externe, aucune lib.
   Les animations respectent prefers-reduced-motion (bloc en fin de fichier).
============================================================ */

/* ---------- Révélation au scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }

/* ---------- Hero en deux colonnes ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---------- LA SCÈNE : un plateau isométrique et ses couches ---------- */
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .92;
  max-width: 660px;
  margin-inline: auto;
  place-self: center;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}
.scene-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(46deg) rotateZ(-18deg) scale(.80) translateY(-6%);
  animation: sceneDrift 26s ease-in-out infinite alternate;
}
@keyframes sceneDrift {
  from { transform: rotateX(46deg) rotateZ(-18deg) scale(.80) translateY(-6%); }
  to   { transform: rotateX(43deg) rotateZ(-14deg) scale(.83) translateY(-8%); }
}

/* Chaque étage du système, empilé en Z */
.plane {
  position: absolute;
  left: 12%; top: 18%;
  width: 76%; height: 60%;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 30px 50px rgba(10,10,10,.09);
  transform-style: preserve-3d;
}
.plane .plane-lbl {
  position: absolute;
  right: 26px; bottom: 18px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #8A8A8A;
  white-space: nowrap;
}
/* Chaque étage est décalé dans le plan ET en hauteur : sans le décalage,
   celui du haut masque les deux autres et on perd la lecture des trois temps. */
.plane--1 { transform: translate3d(9%, 9%, 0px);      animation: float1 7s ease-in-out infinite alternate; }
.plane--2 { transform: translate3d(0%, 0%, 96px);     animation: float2 8s ease-in-out infinite alternate; }
.plane--3 { transform: translate3d(-9%, -9%, 192px);  animation: float3 9s ease-in-out infinite alternate; }
@keyframes float1 { from { transform: translate3d(9%, 9%, 0px);     } to { transform: translate3d(9%, 9%, 12px);      } }
@keyframes float2 { from { transform: translate3d(0%, 0%, 96px);    } to { transform: translate3d(0%, 0%, 112px);     } }
@keyframes float3 { from { transform: translate3d(-9%, -9%, 192px); } to { transform: translate3d(-9%, -9%, 212px);   } }

/* La grille du plateau du bas */
.plane--1::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 26px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
  opacity: .8;
}

/* Les dossiers de projets posés sur le plateau du milieu */
.plane-rows { position: absolute; left: 26px; right: 130px; bottom: 16px; display: flex; flex-direction: column; gap: 9px; }
.plane-row {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--wash);
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .1em; color: var(--muted);
}
.plane-row i { width: 6px; height: 6px; border-radius: 50%; background: #D4D4D4; flex-shrink: 0; }
.plane-row--on { border-color: rgba(0,194,140,.45); background: rgba(0,194,140,.04); }
.plane-row--on i { background: var(--emerald); }

/* Les productions qui sortent du plateau du haut */
.plane-out { position: absolute; left: 26px; right: 26px; top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.plane-out span {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px; background: #FFF;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .08em; color: var(--ink);
}

/* Les notes qui remontent d'un étage à l'autre */
.motes { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.mote {
  position: absolute;
  width: 30px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 6px 14px rgba(10,10,10,.08);
  animation: rise 6s linear infinite;
  opacity: 0;
}
.mote::before {
  content: ''; position: absolute; left: 6px; right: 10px; top: 9px; height: 2px;
  background: var(--line); box-shadow: 0 6px 0 var(--line), 0 12px 0 var(--line);
}
@keyframes rise {
  0%   { transform: translateZ(6px)   scale(.82); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateZ(224px) scale(1.06); opacity: 0; }
}
.mote:nth-child(1) { left: 26%; top: 58%; animation-delay: 0s; }
.mote:nth-child(2) { left: 46%; top: 40%; animation-delay: 1.6s; }
.mote:nth-child(3) { left: 62%; top: 62%; animation-delay: 3.1s; }
.mote:nth-child(4) { left: 38%; top: 72%; animation-delay: 4.4s; }

/* Le halo derrière la scène */
.scene::before {
  content: '';
  position: absolute;
  left: 4%; top: 18%;
  width: 92%; height: 74%;
  background:
    radial-gradient(closest-side, rgba(0,171,255,.34) 0%, rgba(0,171,255,0) 100%),
    radial-gradient(closest-side, rgba(152,114,247,.24) 0%, rgba(152,114,247,0) 100%);
  background-position: 20% 30%, 78% 72%;
  background-size: 70% 70%, 62% 62%;
  background-repeat: no-repeat;
  filter: blur(34px);
  animation: haloPulse 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes haloPulse { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }

/* ---------- L'ORBE : le second cerveau, en rotation ---------- */
.orb-wrap { position: relative; display: grid; place-items: center; padding: 30px 0; }
.orb {
  position: relative;
  width: clamp(190px, 24vw, 250px);
  aspect-ratio: 1;
  justify-self: center;
}
.orb-rings {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: orbSpin 34s linear infinite;
}
@keyframes orbSpin { to { transform: rotateY(360deg); } }
.orb-core {
  position: absolute; inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF 0%, #F2F2F2 46%, #E2E2E2 100%);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(10,10,10,.10), inset -10px -14px 26px rgba(10,10,10,.05);
}
.orb-core::after {
  content: '';
  position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,171,255,.24) 0%, rgba(0,171,255,0) 100%);
  filter: blur(14px);
}
.ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(10,10,10,.13);
  transform-style: preserve-3d;
}
.ring--a { transform: rotateX(74deg); }
.ring--b { transform: rotateX(74deg) rotateY(58deg); border-color: rgba(0,194,140,.35); }
.ring--c { transform: rotateX(74deg) rotateY(-58deg); border-color: rgba(152,114,247,.30); }
.ring i {
  position: absolute; top: 50%; left: -5px;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--ink);
  animation: orbit 9s linear infinite;
  transform-origin: 50% 50%;
}
.ring--b i { background: var(--emerald); animation-duration: 13s; }
.ring--c i { background: var(--violet); animation-duration: 17s; }
@keyframes orbit { to { transform: rotate(360deg) translateX(0); } }

/* ---------- LE TERMINAL ---------- */
.term {
  border: 1px solid var(--line);
  border-radius: var(--r-win);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 26px 60px rgba(10,10,10,.20);
}
.term .bar {
  height: 38px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: #161616;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.term .bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.term .bar i:nth-child(1) { background: #4A4A4A; }
.term .bar i:nth-child(2) { background: #4A4A4A; }
.term .bar i:nth-child(3) { background: #4A4A4A; }
.term .bar .path {
  margin-left: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.term .body {
  padding: 22px 22px 26px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.85;
  color: rgba(255,255,255,.80);
  overflow-x: auto;
}
.term .cmd { color: #FFF; white-space: nowrap; overflow: hidden; }
.term .cmd b { color: var(--emerald); font-weight: 500; }
.term .q { color: rgba(255,255,255,.55); }
.term .out { color: rgba(255,255,255,.86); }
.term .src { color: rgba(255,255,255,.45); }
.term .src u { color: var(--cyan); text-decoration: none; }
.term .caret {
  display: inline-block; width: 8px; height: 15px;
  background: var(--emerald); vertical-align: -2px; margin-left: 3px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.term-note {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-top: 12px;
}
/* Frappe : la commande s'écrit, puis la réponse tombe */
.term.is-in .cmd  { animation: type 1.1s steps(34) .1s both; }
.term.is-in .l1   { animation: fadeUp .4s ease 1.3s both; }
.term.is-in .l2   { animation: fadeUp .4s ease 1.6s both; }
.term.is-in .l3   { animation: fadeUp .4s ease 1.9s both; }
.term.is-in .l4   { animation: fadeUp .4s ease 2.2s both; }
.term .l1, .term .l2, .term .l3, .term .l4 { opacity: 0; }
@keyframes type { from { max-width: 0; } to { max-width: 40ch; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- L'EMPILEMENT DE PROJETS, en perspective ---------- */
.stack3d {
  position: relative;
  perspective: 1200px;
  padding: 18px 0 30px;
  min-height: 300px;
}
.stack3d .sheet {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFF;
  padding: 20px 24px;
  box-shadow: 0 18px 34px rgba(10,10,10,.07);
  transform-origin: 50% 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.stack3d .sheet + .sheet { margin-top: -34px; }
.stack3d .sheet:nth-child(1) { transform: rotateX(9deg) translateZ(0)    scale(1);    z-index: 3; }
.stack3d .sheet:nth-child(2) { transform: rotateX(9deg) translateZ(-40px) scale(.965); z-index: 2; }
.stack3d .sheet:nth-child(3) { transform: rotateX(9deg) translateZ(-80px) scale(.93);  z-index: 1; }
.stack3d:hover .sheet:nth-child(1) { transform: rotateX(4deg) translateY(-10px) scale(1); }
.stack3d:hover .sheet:nth-child(2) { transform: rotateX(4deg) translateY(6px)   scale(.975); }
.stack3d:hover .sheet:nth-child(3) { transform: rotateX(4deg) translateY(22px)  scale(.95); }
.stack3d .sheet .h { display: flex; align-items: baseline; gap: 12px; }
.stack3d .sheet .h b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.018em; }
.stack3d .sheet .h span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.stack3d .sheet .f { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.stack3d .sheet .f em {
  font-style: normal;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
}

/* ---------- LA SEMAINE : avant / après ---------- */
.weeks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.week {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 28px 28px; background: #FFF;
}
.week--after { border-color: rgba(0,194,140,.35); background: linear-gradient(180deg, rgba(0,194,140,.05), rgba(255,255,255,0) 62%); }
.week .lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.week--after .lbl { color: #007956; }
.week ol { list-style: none; margin-top: 18px; display: flex; flex-direction: column; }
.week li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.week li:last-child { border-bottom: 0; }
.week li span { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.bars { margin-top: 20px; }
.bars .cap { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bars .set { display: grid; grid-template-columns: repeat(5, 22px); gap: 10px; margin-top: 11px; align-items: end; height: 56px; }
.bars .set i { display: block; border-radius: 6px; background: #DCDCDC; }
.week--after .bars .set i { background: var(--ink); }

/* ---------- LE PORTRAIT ---------- */
.portrait {
  max-width: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
  aspect-ratio: 4 / 5;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 22px 18px;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.82));
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82);
}

/* ---------- LA MESH de nœuds ---------- */
.mesh { width: 100%; height: auto; display: block; overflow: visible; }
.mesh line { stroke: var(--line); stroke-width: 1; }
.mesh .lnk { stroke: rgba(0,171,255,.55); stroke-width: 1.4; stroke-dasharray: 5 7; animation: dash 3.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -48; } }
.mesh circle { fill: #FFF; stroke: var(--line); }
.mesh .hot { fill: var(--ink); stroke: var(--ink); animation: pop 4.2s ease-in-out infinite; }
.mesh .hot:nth-of-type(2) { animation-delay: 1.1s; }
.mesh .hot:nth-of-type(3) { animation-delay: 2.3s; }
@keyframes pop { 0%,100% { r: 5; opacity: .85; } 50% { r: 7.5; opacity: 1; } }
.mesh text { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; fill: var(--muted); text-transform: uppercase; }

/* ---------- RESPONSIVE de la couche visuelle ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Sur une colonne, la scène remontait sur le lockup Copy House. */
  .scene { max-width: 440px; margin-top: 34px; }
  .scene-stage,
  .scene-stage { animation: none; transform: rotateX(42deg) rotateZ(-15deg) scale(.86); }
  .weeks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scene { max-width: 380px; }
  .week li { grid-template-columns: 1fr; gap: 2px; }
  .term .body { font-size: 11.5px; padding: 18px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-stage, .plane--1, .plane--2, .plane--3, .mote, .scene::before,
  .orb-rings, .ring i, .mesh .lnk, .mesh .hot, .term .caret,
  .term.is-in .cmd, .term.is-in .l1, .term.is-in .l2, .term.is-in .l3, .term.is-in .l4 {
    animation: none !important;
  }
  .term .l1, .term .l2, .term .l3, .term .l4 { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PASSE 3 - respiration et lisibilité
============================================================ */

/* Plus d'air entre les sections : la page était trop dense. */
section { padding: clamp(76px, 10vw, 148px) var(--gut); }
.sec-head { max-width: 900px; }
.sec-head .lead { margin-top: 22px; }

/* Le libellé d'une rangée débordait sur le titre quand il était long
   (« Abonnement », « Matériel »). Variante à colonne large, empilée sur mobile. */
.rows--label .row { grid-template-columns: 168px 1fr; gap: 0 28px; padding: 26px 0; }
.rows--label .row .n { padding-top: 5px; white-space: normal; line-height: 1.5; }

/* Fiche prérequis : une carte par exigence, au lieu d'un bloc de texte */
.spec {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFF;
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.spec .lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.spec .t { font-size: 1.14rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.spec .d { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.spec--accent { border-color: rgba(0,194,140,.45); }

/* Bloc « le sujet, c'est la donnée » : trois affirmations tenues par un filet */
.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.claim { padding: 30px 30px 34px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.claim:last-child { border-right: 0; }
.claim .n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .22em; color: var(--muted);
}
.claim .t { margin-top: 14px; font-size: clamp(1.1rem, 1.9vw, 1.32rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.claim .d { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* Ce que tu lances : quatre usages, en pastilles hautes */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.use {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px 22px 26px; background: #FFF;
}
.use .cmd {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 13px; display: inline-block;
}
.use .t { margin-top: 16px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.018em; }
.use .d { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Les paragraphes longs respirent davantage */
.card .body, .step .d, .day .p { line-height: 1.62; }
.checks li span:last-child { line-height: 1.62; }

@media (max-width: 980px) {
  .claims { grid-template-columns: 1fr 1fr; }
  .claim:nth-child(2) { border-right: 0; }
  .uses { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rows--label .row { grid-template-columns: 1fr; gap: 4px; }
  .rows--label .row .n { padding-top: 0; }
  .claims { grid-template-columns: 1fr; }
  .claim { border-right: 0; }
  .uses { grid-template-columns: 1fr; }
}

/* ============================================================
   DIAGRAMMES NATIFS
   Les schémas étaient des PNG de 1600 px posés dans un conteneur
   à défilement horizontal : ça sortait une barre de scroll sous
   chaque figure. Ils sont maintenant en HTML, donc ils se
   réagencent à la largeur disponible et s'animent à l'arrivée.
============================================================ */
.dia {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #FFF;
  padding: clamp(26px, 3.6vw, 48px);
  position: relative;
  overflow: hidden;
}
.dia::before {                      /* le halo, seule présence du chroma */
  content: '';
  position: absolute; z-index: 0;
  top: -6%; left: -4%;
  width: 44%; height: 52%;
  background: radial-gradient(closest-side, rgba(0,171,255,.22) 0%, rgba(0,171,255,0) 100%);
  filter: blur(30px);
  pointer-events: none;
}
.dia > * { position: relative; z-index: 1; }
.dia .kicker { display: block; }
.dia .dtitle {
  margin-top: 14px;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.1;
}
.dia .dfoot {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: 15.5px; color: var(--muted); line-height: 1.5;
}
.dia .dfoot .mk {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}

/* Colonnes et cartes */
.dflow { display: grid; align-items: start; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.dflow .darrow { align-self: center; margin-top: 34px; }
.dflow--4 { grid-template-columns: 1fr 34px 1fr 34px 1.15fr 34px 1fr; }
.dflow--3 { grid-template-columns: 1fr 40px 1fr 40px 1fr; }
.dcol { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.dcol > .lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
}
.dcard {
  border: 1px solid var(--line); border-radius: 13px; background: #FFF;
  padding: 14px 16px; min-width: 0;
}
.dcard .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.014em; line-height: 1.25; }
.dcard .s { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.dcard--on { border-color: rgba(0,194,140,.45); }
.dcard--sub { background: var(--wash); }
.dbox {
  border: 1px solid rgba(0,194,140,.45); border-radius: 16px; background: #FFF;
  padding: 18px 18px 20px; min-width: 0;
}
.dbox .bt { font-size: 17px; font-weight: 600; letter-spacing: -.018em; }
.dbox .bs { font-size: 13.5px; color: var(--muted); margin-top: 2px; margin-bottom: 13px; }

/* Flèche : un filet et un point qui le parcourt */
.darrow { position: relative; height: 1px; background: var(--line); }
.darrow::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1px solid #B4B4B4; border-right: 1px solid #B4B4B4;
  transform: rotate(45deg);
}
.darrow i {
  position: absolute; top: 50%; left: 0;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--cyan); opacity: 0;
}
.dia.is-in .darrow i { animation: travel 2.8s ease-in-out infinite; }
.dia.is-in .darrow:nth-of-type(2) i { animation-delay: .5s; }
.dia.is-in .darrow:nth-of-type(3) i { animation-delay: 1s; }
@keyframes travel {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Trois étages */
.detage { display: grid; grid-template-columns: 92px 1fr 190px; gap: 18px 24px; align-items: center; margin-top: clamp(24px, 3vw, 38px); }
.detage .hd {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  align-self: end;
}
.dnum {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 400; line-height: 1;
  color: var(--line); text-align: center; letter-spacing: -.03em;
}
.dstep { border: 1px solid var(--line); border-radius: 15px; background: #FFF; padding: 18px 22px; }
.dstep .t { font-size: clamp(1.05rem, 1.8vw, 1.24rem); font-weight: 600; letter-spacing: -.018em; }
.dstep .s { font-size: 14.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.dcost {
  border-radius: 13px; padding: 14px 12px; text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
.dcost--zero { background: var(--ink); color: #FFF; }
.dcost--cts  { background: #FFF; color: var(--ink); border: 1px solid rgba(0,194,140,.45); }

/* Boucle du pipe : deux rangées et un point qui tourne */
.dloop { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; gap: 14px; align-items: stretch; margin-top: clamp(24px, 3vw, 38px); }
.dnode { border: 1px solid var(--line); border-radius: 14px; background: #FFF; padding: 16px 18px 18px; position: relative; min-width: 0; }
.dnode .bg {
  display: inline-block; white-space: nowrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--ink); color: #FFF; border-radius: var(--r-pill); padding: 4px 11px;
}
.dnode--you .bg { background: #FFF; color: var(--ink); border: 1px solid rgba(0,194,140,.45); }
.dnode--you { border-color: rgba(0,194,140,.45); }
.dnode .t { margin-top: 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -.016em; }
.dnode .s { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.ddown { grid-column: 1 / -1; text-align: center; color: #B4B4B4; font-size: 20px; line-height: 1; }

/* Deux colonnes comparées */
.dduo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(22px, 2.6vw, 34px); }
.dpanel { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 24px; background: #FFF; }
.dpanel--on { border-color: rgba(0,194,140,.45); }
.dpanel .lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.dpanel--on .lbl { color: #007956; }
.dpanel ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.dpanel li { font-size: 15px; line-height: 1.4; color: var(--muted); padding-left: 15px; position: relative; }
.dpanel li::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #C4C4C4; }
.dpanel--on li { color: var(--ink); }
.dpanel--on li::before { background: var(--emerald); }
.dask {
  border: 1px solid rgba(0,194,140,.45); border-radius: 14px; background: #FFF;
  padding: 16px 22px; text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 600; letter-spacing: -.018em;
  max-width: 640px; margin: clamp(22px, 2.6vw, 34px) auto 0;
}

/* Liste de fichiers */
.dfiles { display: flex; flex-direction: column; gap: 9px; }
.dfile { border: 1px solid var(--line); border-radius: 11px; background: #FFF; padding: 11px 15px; }
.dfile.g { border-style: dashed; }
.dfile .n { font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; }
.dfile .d { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Révélation en cascade des cartes d'un diagramme */
.dia .dcard, .dia .dstep, .dia .dnode, .dia .dpanel, .dia .dfile, .dia .dbox, .dia .dcost {
  opacity: 0; transform: translateY(10px);
}
.dia.is-in .dcard, .dia.is-in .dstep, .dia.is-in .dnode,
.dia.is-in .dpanel, .dia.is-in .dfile, .dia.is-in .dbox, .dia.is-in .dcost {
  animation: diaIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes diaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dia.is-in .dcol:nth-child(1) > *  { animation-delay: .05s; }
.dia.is-in .dcol:nth-child(3) > *  { animation-delay: .20s; }
.dia.is-in .dcol:nth-child(5) > *,
.dia.is-in .dbox                   { animation-delay: .35s; }
.dia.is-in .dcol:nth-child(7) > *  { animation-delay: .50s; }
.dia.is-in .detage > *:nth-child(n+4)  { animation-delay: .10s; }
.dia.is-in .detage > *:nth-child(n+7)  { animation-delay: .22s; }
.dia.is-in .detage > *:nth-child(n+10) { animation-delay: .34s; }
.dia.is-in .dloop > *:nth-child(n+3) { animation-delay: .12s; }
.dia.is-in .dloop > *:nth-child(n+5) { animation-delay: .24s; }
.dia.is-in .dloop > *:nth-child(n+7) { animation-delay: .36s; }
.dia.is-in .dpanel:nth-child(2) { animation-delay: .18s; }
.dia.is-in .dfile:nth-child(2) { animation-delay: .06s; }
.dia.is-in .dfile:nth-child(3) { animation-delay: .12s; }
.dia.is-in .dfile:nth-child(4) { animation-delay: .18s; }
.dia.is-in .dfile:nth-child(5) { animation-delay: .24s; }

@media (max-width: 1080px) {
  .dflow--4 { grid-template-columns: 1fr 1fr; gap: 18px; }
  .dflow--3 { grid-template-columns: 1fr; gap: 16px; }
  .dflow .darrow { display: none; }
  .dloop { grid-template-columns: 1fr 1fr; }
  .dloop .darrow, .ddown { display: none; }
  .detage { grid-template-columns: 62px 1fr 150px; }
}
@media (max-width: 700px) {
  .dflow--4, .dloop { grid-template-columns: 1fr; }
  .dduo { grid-template-columns: 1fr; }
  .detage { grid-template-columns: 46px 1fr; gap: 12px 16px; }
  .detage .hd:nth-child(3) { display: none; }
  .dcost { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .dia .dcard, .dia .dstep, .dia .dnode, .dia .dpanel, .dia .dfile, .dia .dbox, .dia .dcost {
    opacity: 1; transform: none; animation: none !important;
  }
  .dia.is-in .darrow i { animation: none; }
}

/* ---------- Les promesses du hero ---------- */
.promises { list-style: none; display: flex; flex-direction: column; gap: 13px; max-width: 620px; }
.promises li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: clamp(1.02rem, 1.7vw, 1.16rem); line-height: 1.45; font-weight: 500; letter-spacing: -.012em;
}
.promises li .tick { width: 22px; height: 22px; margin-top: 2px; }
.promises li .tick svg { width: 11px; height: 11px; }
[data-reveal].promises li { opacity: 0; transform: translateY(8px); }
[data-reveal].promises.is-in li { animation: diaIn .5s cubic-bezier(.16,1,.3,1) both; }
[data-reveal].promises.is-in li:nth-child(2) { animation-delay: .10s; }
[data-reveal].promises.is-in li:nth-child(3) { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal].promises li { opacity: 1; transform: none; animation: none !important; }
}

/* ============================================================
   PASSE 6 - la couche premium
============================================================ */

/* Barre de progression de lecture */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 80; pointer-events: none; background: transparent;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--emerald));
  transition: width .08s linear;
}

/* Aurora : le dégradé qui respire derrière les sections sombres.
   C'est la couleur que Charles a validée sur la section « mises à jour à vie ». */
.has-aurora { overflow: hidden; }
.has-aurora::before {
  content: '';
  position: absolute; inset: -30% -10%;
  z-index: 0;
  background:
    radial-gradient(42% 50% at 20% 26%, rgba(152,114,247,.42) 0%, rgba(152,114,247,0) 100%),
    radial-gradient(38% 46% at 80% 64%, rgba(0,194,140,.30) 0%, rgba(0,194,140,0) 100%),
    radial-gradient(34% 42% at 55% 92%, rgba(0,171,255,.22) 0%, rgba(0,171,255,0) 100%);
  filter: blur(20px);
  animation: aurora 22s ease-in-out infinite alternate;
  pointer-events: none;
}
.has-aurora > * { position: relative; z-index: 1; }
@keyframes aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: .85; }
  to   { transform: translate3d(3%, 2%, 0)  scale(1.08); opacity: 1; }
}

/* Inclinaison 3D au survol */
.tilt { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; will-change: transform; }
.tilt:hover {
  transform: perspective(900px) rotateX(1.6deg) rotateY(-1.6deg) translateY(-4px);
  box-shadow: 0 22px 46px rgba(10,10,10,.10);
}
.on-ink .tilt:hover { box-shadow: 0 22px 46px rgba(0,0,0,.45); }

/* Le prix de lancement */
.badge-launch {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #007956;
  border: 1px solid rgba(0,194,140,.45); border-radius: var(--r-pill);
  padding: 7px 14px; background: rgba(0,194,140,.05);
  align-self: flex-start;
}
.badge-launch::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.price .was {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 500; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}

/* Le compte à rebours du tarif.
   Chroma en halo flouté uniquement, jamais en aplat : les chiffres restent en encre. */
.cdown {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; background: var(--bg);
}
.cdown::before {
  content: ''; position: absolute; top: -70px; right: 0;
  width: 220px; height: 150px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(152,114,247,.30), transparent 72%);
  filter: blur(28px); pointer-events: none;
}
.cdown > * { position: relative; }
.cdown .lbl {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
}
.cdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.cdown-cell {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 4px;
  background: var(--wash); text-align: center;
}
.cdown-cell b {
  display: block; font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
  font-size: clamp(1.5rem, 4.4vw, 2rem); font-variant-numeric: tabular-nums;
}
.cdown-cell span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.cdown .d { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cdown .d strong { color: var(--ink); font-weight: 600; }
.cdown .d a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cdown.is-over .cdown-grid { display: none; }
.cdown.is-over::before { background: radial-gradient(closest-side, rgba(115,115,115,.22), transparent 72%); }

/* Le chiffre qui monte */
.stat .v[data-count] { font-variant-numeric: tabular-nums; }

/* Les cartes du diagramme respirent en continu quand elles portent l'accent */
.dia.is-in .dcard--on, .dia.is-in .dnode--you { animation: diaIn .55s cubic-bezier(.16,1,.3,1) both, breathe 4.5s ease-in-out 1s infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,194,140,0); }
  50%      { box-shadow: 0 0 0 5px rgba(0,194,140,.09); }
}

@media (prefers-reduced-motion: reduce) {
  .has-aurora::before, .badge-launch::before { animation: none; }
  .tilt { transition: none; }
  .tilt:hover { transform: none; }
  .progress i { transition: none; }
  .dia.is-in .dcard--on, .dia.is-in .dnode--you { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   PASSE 7 - l'éparpillement de la matière + chapitres numérotés
============================================================ */

/* Le kicker devient un numéro de chapitre */
.kicker b { font-weight: 500; color: var(--ink); }
.on-ink .kicker b { color: #FFF; }

/* La matière éparpillée autour d'une IA qui n'en voit rien */
.scatter {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 46px);
  min-height: clamp(340px, 34vw, 430px);
  display: grid; place-items: center;
}
.sc-ring {
  position: absolute; inset: 8% 18%;
  border: 1px dashed var(--line); border-radius: 50%;
  animation: ringSpin 40s linear infinite;
}
.sc-ring::after {
  content: ''; position: absolute; inset: 14%;
  border: 1px dashed var(--line); border-radius: 50%;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.sc-src {
  position: absolute;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--muted);
  background: #FFF;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 16px; white-space: nowrap;
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.sc-src.s1 { top: 2%;   left: 4%;    animation-delay: 0s; }
.sc-src.s2 { top: 12%;  right: 4%;   animation-delay: .9s; }
.sc-src.s3 { top: 42%;  left: 0;     animation-delay: 1.8s; }
.sc-src.s4 { bottom: 14%; left: 7%;  animation-delay: 2.6s; }
.sc-src.s5 { bottom: 0;   left: 36%; animation-delay: 3.4s; }
.sc-src.s6 { top: 62%;  right: 3%;   animation-delay: 4.2s; }
.sc-src.s7 { top: 14%;  left: 34%;   animation-delay: 5s; }

.sc-core {
  position: relative; z-index: 2;
  border: 1px solid var(--ink); border-radius: var(--r-lg);
  background: var(--ink); color: #FFF;
  padding: 22px 32px; text-align: center;
  box-shadow: 0 22px 50px rgba(10,10,10,.22);
}
.sc-core .sc-lbl { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.024em; }
.sc-core .sc-txt { display: block; margin-top: 6px; font-size: 14.5px; color: rgba(255,255,255,.6); }

@media (max-width: 820px) {
  .scatter { min-height: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .sc-ring { display: none; }
  .sc-src { position: static; animation: none; text-align: center; }
  .sc-core { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-ring, .sc-src { animation: none; }
}

/* ---------- Le récapitulatif avant le prix ---------- */
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.recap-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 0 20px;
  padding: 26px 30px 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.recap-item:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 40px; }
.recap-item:nth-child(even) { padding-left: 40px; }
.recap-item .n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .22em; color: var(--muted); padding-top: 5px;
}
.recap-item .t { font-size: clamp(1.04rem, 1.8vw, 1.22rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.recap-item .d { margin-top: 7px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.recap-item--on .t { color: var(--ink); }
.recap-item--on .n { color: #007956; }
.recap-item--on { background: rgba(0,194,140,.035); }

@media (max-width: 820px) {
  .recap { grid-template-columns: 1fr; }
  .recap-item, .recap-item:nth-child(odd), .recap-item:nth-child(even) {
    border-right: 0; padding-left: 0; padding-right: 0;
  }
}

/* ============================================================
   PIED DE PAGE
============================================================ */
footer { border-top: 1px solid var(--line); padding: clamp(52px, 6vw, 84px) var(--gut) 44px; background: var(--wash); }
.foot-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1.15fr 1.35fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.foot-brand img { opacity: .85; }
.fb-name { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.fb-tag {
  margin-top: 5px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.fb-addr { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.fc-h {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.foot-col ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.foot-col li { font-size: 14.5px; line-height: 1.5; }
.foot-col a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.foot-col a:hover { border-bottom-color: var(--ink); }
.fc-s { display: inline-block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.foot-legal { padding: 32px 0; border-bottom: 1px solid var(--line); }
.foot-legal .note { max-width: 980px; }
.foot-bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

@media (max-width: 980px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }

/* La ligne de différenciation sous le hero */
.hero-note {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em; line-height: 1.7; color: var(--muted);
  max-width: 560px;
  padding-left: 14px; border-left: 1px solid var(--line);
}

/* ============================================================
   Section Arsenal - le mur d'outils (show don't tell)
   100% CSS, reutilise variables + keyframe travel.
============================================================ */
.tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tool {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFF;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.tool:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(10,10,10,.28); }
.tool-tag {
  align-self: flex-start;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--ink); color: #FFF;
  border-radius: var(--r-pill); padding: 4px 11px;
}
.tool-name {
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.tool-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 2px; }
.tool-io {
  border: 1px solid var(--line); border-radius: 12px;
  background: #FFF; padding: 11px 14px;
  font-size: 14px; line-height: 1.4; color: var(--muted);
}
.tool-io.on {
  border-color: rgba(0,194,140,.45);
  color: var(--ink); font-weight: 500;
}
.tool-down {
  position: relative; height: 22px; margin: 0 auto; width: 1px;
  background: var(--line);
}
.tool-down::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 7px; height: 7px; margin-left: -4px;
  border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan);
  transform: rotate(45deg);
}


@media (max-width: 960px) {
  .tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .tools { grid-template-columns: 1fr; }
  .ceiling .grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   POP-UP DERNIÈRES PLACES

   Elle ne s'affiche que si placesRestantes est entre 1 et le seuil
   fixé dans page.js, et une seule fois par session de navigation.
   Tout le texte vient de page.js : elle ne peut donc pas raconter
   autre chose que le compteur de la barre haute.
   Chroma en halo flouté uniquement, comme le reste de la page.
============================================================ */
.pop-fond {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: saturate(140%) blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.pop-fond[hidden] { display: none; }
.pop-fond.is-open { opacity: 1; }

.pop {
  position: relative; overflow: hidden;
  width: min(460px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px 28px;
  box-shadow: 0 30px 80px rgba(10, 10, 10, .28);
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.pop-fond.is-open .pop { transform: none; }

/* Le halo : seule présence du chroma, jamais en aplat. */
.pop::before {
  content: ''; position: absolute; top: -90px; right: -40px;
  width: 260px; height: 190px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(152, 114, 247, .38), transparent 72%);
  filter: blur(30px); pointer-events: none;
}
.pop > * { position: relative; }

.pop .lbl {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted);
}

/* Le chiffre, en gros : c'est l'information de la pop-up. */
.pop-chiffre {
  display: flex; align-items: baseline; gap: 16px;
  margin: 16px 0 4px;
}
.pop-chiffre b {
  font-size: clamp(92px, 26vw, 132px);
  font-weight: 600; letter-spacing: -.06em; line-height: .82;
  color: var(--ink);
}
.pop-chiffre i {
  font-style: normal; font-size: 19px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.28; color: var(--ink);
  white-space: pre-line;  /* le retour à la ligne vient de page.js */
}
.pop h3 {
  margin: 14px 0 0;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.pop p {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.62; color: var(--muted);
}
.pop .btn { margin-top: 20px; width: 100%; justify-content: center; }

.pop-refus {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.pop-refus:hover { color: var(--ink); }

/* La croix. 44px de cible tactile, visuellement discrète. */
.pop-fermer {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
  border-radius: var(--r-pill);
}
.pop-fermer:hover { color: var(--ink); background: var(--wash); }

.pop-fond :focus-visible,
.pop-fond .btn:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px;
}

@media (max-width: 420px) {
  .pop { padding: 30px 22px 24px; }
}

/* Une fenêtre qui surgit en bougeant peut gêner : on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .pop-fond, .pop { transition: none; }
  .pop { transform: none; }
}

/* ============================================================
   SESSION COMPLÈTE : LE MESSAGE QUI REMPLACE LES BOUTONS

   Il prend la place exacte du bouton de candidature (page.js le
   monte dans les .cta-row marquées data-ferme). Encadré léger et
   filet chroma, pour qu'on le lise comme une information et pas
   comme un bouton mort. Il tourne sur fond blanc comme sur fond
   encre : la couleur vient du texte parent.
============================================================ */
.ferme-note {
  position: relative;
  max-width: 46ch;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--wash);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.ferme-note::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
}
.on-ink .ferme-note {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
}