/* =========================================================================
   AI DESIGN ENGINEER
   Recettes transposees depuis site-jl/css/style.css (lecture seule).
   Les valeurs marquees [site] sont reprises telles quelles.
   1. Polices          4. Primitives (bouton, focus, reveal)
   2. Tokens           5. Hero (sections 1 a 3)
   3. Base             6. Curseur comete
                       7. Responsive et mouvement reduit
   ========================================================================= */

/* ------------------------------ 1. POLICES ------------------------------ */
/* Fichiers copies depuis site-jl/fonts, sous-ensemble latin. Meme fichier,
   donc rendu identique au site. [site] */
@font-face{
  font-family:"Poppins";
  src:url("fonts/poppins-700-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-600-latin.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  /* Fichier VARIABLE : un seul fichier couvre toutes les graisses en
     italique. Il sert la ligne d'appui du hero (500) et la regle des
     parentheses, qui traverse tous les registres de texte. */
  src:url("fonts/montserrat-italic-latin.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------- 2. TOKENS ------------------------------ */
:root{
  /* --- couleurs --- */
  --bg:#000000;
  /* Le site ecrit son texte en #f4f1f8, en trois niveaux d'opacite. La
     regle posee pour cette page est le blanc pur et lui seul : la
     hierarchie passe par la taille, la graisse, la casse et l'espacement.
     Aucun texte gris, attenue ou transparent nulle part. */
  --text-1:#ffffff;

  /* GAMME D'ACCENT : le bleu Monetika, retenu par JL. Chaque valeur est
     COPIEE de monetika-front, aucun bleu tiers, aucune retouche de
     saturation. Les seules libertes sont les opacites. Provenances :
       #5a6cff  tokens.css:43   --woad, accent unique
       #9aa6ff  tokens.css:44   --woad-soft, accent sur fond sombre
       #0003ff  tokens.css:49   --light, lumiere de decor de page
       #1a1dff  Button.tsx:40   hover de l'orbe
       #4b1fa6  Cosmos.tsx:210  nappe violette de la voie lactee */
  --accent-neon:#5a6cff;      /* --woad : halos, anneau de focus */
  --accent-deep:#0003ff;      /* --light : seconde couche des halos */
  /* APLAT DES BOUTONS : releve sur Button.tsx, variante orbe, celle du CTA
     de la landing. Ce n'est PAS le woad mais --light. */
  --accent-solid:#0003ff;     /* Button.tsx:39 bg-[var(--light)] */
  --accent-solid-fonce:#1a1dff; /* Button.tsx:40 hover:bg-[#1A1DFF] */
  --accent-vif:#9aa6ff;       /* --woad-soft : molette, comete */
  --accent-clair:#9aa6ff;     /* --woad-soft : noyau, survol */
  /* triplets, pour toutes les transparences */
  --accent-solid-rgb:0,3,255;
  --accent-neon-rgb:90,108,255;
  --accent-deep-rgb:0,3,255;
  --accent-vif-rgb:154,166,255;
  --accent-clair-rgb:154,166,255;
  --nappe-2-rgb:75,31,166;    /* #4b1fa6 */
  /* Halos d'ambiance du hero. Aucun stop plus clair que le bleu profond
     du ciel Monetika : pas d'eclat blanc froid. */
  --halo-1-rgb:0,3,255;
  --halo-2-rgb:0,3,255;
  --halo-spot-a:rgba(0,3,255,.15);
  --halo-spot-b:rgba(0,3,255,.08);

  /* [site] --box-bordure et --box-bordure-survol */
  --hairline:rgba(255,255,255,.09);
  --hairline-hi:rgba(255,255,255,.18);

  /* LUEUR DES BOUTONS : la box-shadow de l'orbe Monetika, copiee.
     Button.tsx:38-40, variante orb : aucune ombre au repos, une couche
     unique au survol, transition de 150 ms sur toutes les proprietes.
     La version compacte est celle de l'orbe-sm, Button.tsx:52. */
  --btn-lueur:none;                                 /* Button.tsx:38 */
  --btn-lueur-survol:0 0 24px rgba(0,3,255,.45);    /* Button.tsx:40 */
  --btn-lueur-survol-compact:0 0 16px rgba(0,3,255,.4);  /* Button.tsx:52 */
  --btn-duree:150ms;                                /* Button.tsx:39 duration-150 */
  --focus-anneau:var(--accent-neon);     /* [site] --focus-anneau */

  /* --- familles [site] --- */
  --font-display:"Poppins",system-ui,sans-serif;      /* [monetika] titres, 700 */
  --font-heading:"Instrument Sans",system-ui,sans-serif; /* [monetika] labels, 500 */
  --font-body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* --- echelle typographique --- */
  /* Corps courant. 18px auparavant, descendu d'un cran : plafond a
     17px, plancher a 16px. Un chiffre suffit a affiner. */
  --text-body:clamp(1rem,1.4vw,1.0625rem);
  --text-body-line:1.65;      /* [monetika] */
  --text-sm:calc(var(--text-body) * .85);   /* [site] */
  --fs-small:.9375rem;        /* mentions, reponses de FAQ */
  --fs-h2:clamp(1.5rem,3.4vw,2.5rem);
  --fs-h3:clamp(1.05rem,1.8vw,1.35rem);
  --fs-lead:clamp(1.05rem,1.35vw,1.3rem);
  --lh-display:1.14;          /* laisse passer le trait de la ligne 1 */
  --accroche-max:72px;        /* plafond de l'accroche, lu par le calculateur */
  --ls-display:.02em;         /* [monetika] titres */

  /* --- formes [site] --- */
  --radius-card:15px;         /* [site] --card-radius */
  --orange-vip:#ff6a00;       /* bloc 188 : premiere couleur hors bleu du systeme, reservee au badge VIP */
  --carte-largeur:660px;      /* largeur des cartes module ET du cadre sur fond (blocs 167, 187) : une seule source */
  --radius-pill:999px;
  --measure:62ch;
  --container:1100px;         /* [site] --max-width */

  /* --- soulignement des textes courants ---------------------------------
     Recette unique de toute la page hors titres : liens du footer, liens
     de contenu, emphases fortes de la prose. Valeurs relevees sur les
     liens de contact du footer. Les soulignements de titres gardent leurs
     recettes propres : hero, sous-titres de cartes, trait des H2. */
  /* Segment « bas du menu -> haut de la bulle ». UNE seule valeur regle
     le vide : --espace-menu-bulle. Les deux autres ne sont pas des
     espaceurs mais la position reelle du menu, qu'il faut bien franchir :
     --menu-offset est le `top` de la pill fixe, --menu-hauteur sa hauteur
     mesuree au rendu. Leur somme place le haut de la bulle, rien d'autre
     n'ajoute quoi que ce soit sur ce segment. */
  /* Segment « bas de la souris de scroll -> haut de l'ECHO du titre ».
     Une seule source, et elle DERIVE du token global : si --vide-section
     bouge, ce segment suit en proportion.
     --debord-echo n'est pas un espaceur : l'echo du titre, deux fois plus
     grand que le texte, deborde de 34px au-dessus de lui. Le padding doit
     franchir ce debord pour que le VIDE PERCU vaille la part voulue du
     token. Mesure a l'appui : 0,73 x 110 = 80px de vide reel. */
  --debord-echo:34px;
  --espace-hero-section:calc(var(--vide-section) * .73 + var(--debord-echo));
  --espace-hero-bas:var(--espace-hero-section);
  --menu-offset:1rem;         /* = .site-header{top} */
  --menu-hauteur:64px;        /* hauteur mesuree de la pill, desktop */
  --espace-menu-bulle:40px;   /* LE vide, mesure au rendu */

  --souligne:rgba(var(--accent-solid-rgb),.55);
  --souligne-vif:var(--accent-neon);
  --souligne-trait:1px;
  --souligne-trait-actif:2px;
  /* en pixels et non en em : le decalage reste identique quelle que
     soit la taille du texte souligne. Valeur rendue par les liens du
     footer, qui font foi. */
  --souligne-decalage:3px;

  /* --- apparitions [site] --- */
  --reveal-duration:.7s;
  --reveal-offset:24px;
  --ease-out:cubic-bezier(.16,.84,.3,1);
}


/* -------------------------------- 3. BASE ------------------------------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable;
  /* la pill du menu est fixe : les ancres s'arretent en dessous */
  scroll-padding-top:7rem;
  /* clip et non hidden : hidden creerait un conteneur de defilement */
  overflow-x:clip;
}
body{
  background:var(--bg); color:var(--text-1);
  font-family:var(--font-body); font-size:var(--text-body); font-weight:400;
  line-height:var(--text-body-line);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  color:var(--text-1); font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--ls-display);
}
a{color:inherit; text-decoration:none}
/* les liens de contenu recuperent le soulignement commun plus bas */

/* Soulignement des textes courants : recette UNIQUE de toute la page hors
   titres. Valeurs relevees sur les liens de contact du footer.
   text-decoration et non box-shadow : le trait suit chaque ligne quand le
   texte passe a la ligne, ce qu'une ombre interne ne sait pas faire. */
.souligne,
.footer-liens a,
.section a:not(.btn){
  text-decoration-line:underline;
  text-decoration-color:var(--souligne);
  text-decoration-thickness:var(--souligne-trait);
  text-underline-offset:var(--souligne-decalage);
  text-decoration-skip-ink:auto;
  transition:text-decoration-color .25s ease, text-decoration-thickness .25s ease;
}
.footer-liens a:hover,
.footer-liens a:focus-visible,
.section a:not(.btn):hover,
.section a:not(.btn):focus-visible{
  text-decoration-color:var(--souligne-vif);
  text-decoration-thickness:var(--souligne-trait-actif);
}
button{font:inherit; color:inherit; background:none; border:0}
img,svg{display:block; max-width:100%}

/* [site] Focus : l'anneau ne disparait que sans intention clavier. */
.btn:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--focus-anneau); outline-offset:3px}

/* ---------------------------- 4. PRIMITIVES ----------------------------- */
/* [site] .btn, .btn-icone, .btn-primary, valeurs reprises telles quelles */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.9rem 2.2rem;
  font-family:inherit; font-size:1rem; line-height:1.4;
  font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  border:none; border-radius:var(--radius-pill); cursor:pointer;
  /* [monetika] Button.tsx:39 `transition duration-150` */
  transition:background-color var(--btn-duree) ease, box-shadow var(--btn-duree) ease,
             transform var(--btn-duree) ease;
}
.btn-icone{flex:none; display:block; width:1.1em; height:1.1em}
.btn-primary{
  background:var(--accent-solid); color:#ffffff;
  box-shadow:var(--btn-lueur);          /* aucune ombre au repos [monetika] */
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--accent-solid-fonce); /* Button.tsx:40 hover:bg-[#1A1DFF] */
  box-shadow:var(--btn-lueur-survol);
  transform:translateY(-2px);
}
/* [monetika] Button.tsx:40 `active:scale-[0.98]` */
.btn-primary:active{transform:scale(.98)}

/* apparitions [site] : la classe .visible est posee par l'IntersectionObserver */
.js .reveal{
  opacity:0; transform:translateY(var(--reveal-offset));
  transition:opacity var(--reveal-duration) ease var(--d,0s),
             transform var(--reveal-duration) ease var(--d,0s);
}
/* transform:none et non translateY(0) : une matrice identite reste un
   transform, elle cree un contexte d'empilement sur chaque element revele
   et le fait peindre dans la couche des positionnes. C'est le defaut qui
   avait ete corrige sur le site perso, section Rendez-vous. */
.js .reveal.visible{opacity:1; transform:none}

/* le pilotage du toggle et de la FAQ passe par l'attribut hidden */
[hidden]{display:none !important}

/* -------------------------------- 5. HERO ------------------------------- */
.hero{
  /* Fleche de la coupole. Le rayon horizontal vaut 50 % de la largeur :
     les deux arcs de coin se rejoignent au centre et ne forment qu'une
     seule courbe ample. overflow:hidden coupe le ciel etoile et les
     halos exactement sur l'arc. */
  /* Fleche de la coupole : la profondeur de l'arc au centre. Une seule
     valeur a regler, tout le reste en decoule (clip du ciel etoile,
     liseré, lueur, chemin de l'etoile filante). 78px puis 133px
     auparavant. */
  --coupole-fleche:266px;
  /* Hauteur du ciel, donc position de l'arc. Le JS la cale sur la carte
     VSL pour que le cable la croise a 42 % de sa hauteur (32 % en
     mobile). Cette valeur de repli sert avant le premier calcul et si le
     JS ne tourne pas. */
  --h-ciel:74vh;
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--menu-offset) + var(--menu-hauteur) + var(--espace-menu-bulle))
          clamp(1.25rem,4vw,2.5rem) var(--espace-hero-bas);
  text-align:center;
}

/* --- la coupole : un cable, et la lumiere qui le parcourt ---------------
   Le fil et la lumiere sont trois traces du MEME chemin : la lumiere ne
   peut donc pas se decoller de la courbe, a aucune largeur d'ecran.
   preserveAspectRatio="none" etire le viewBox a la largeur du hero. Les
   epaisseurs sont donc legerement etirees selon la direction locale de la
   courbe, ce que compense une valeur un peu plus forte. Elles ne sont pas
   figees par vector-effect : cela rendrait les tirets a l'echelle de
   l'ecran et la lumiere ne parcourrait plus toute la courbe.

   REGLAGES, les deux seules valeurs a toucher :
     --filante-periode   temps entre deux departs, 8s
     --filante-course    duree d'une traversee, 4s
   Le rapport course / periode se retrouve a 50 % dans @keyframes : si la
   course change, ce pourcentage suit (4s / 8s = 50 %).
   ------------------------------------------------------------------------ */
.hero{
}
/* La COUPOLE : l'arc, son cable et son trait de lumiere. Composant
   partage. Elle porte elle-meme tous les reglages du trait, chaque
   instance est donc autonome. */
.coupole{
  --filante-periode:8s;
  --filante-course:4s;
  /* REGLAGES DU TRAIT DE LUMIERE, affinables au chiffre */
  --comete-long:340px;        /* longueur de la trainee */
  --comete-tete:46px;         /* longueur de la tete blanche */
  --comete-trait:1.8px;       /* epaisseur, a peine plus que le cable */
  --comete-trait-tete:2px;    /* la tete, un cheveu plus epaisse */
  --comete-lueur:2px;         /* rayon du glow, tres fin */
  /* blanc a peine teinte de l'accent : la tete reste une lumiere, pas une
     couleur. Ce n'est pas une nappe, elle a donc le droit d'etre claire. */
  --comete-blanc:#eef0ff;
  /* fin de course : la fenetre sort entierement par la gauche */
  --comete-x1:calc(var(--comete-long) * -1);
  position:absolute; left:0; right:0; bottom:1px;
  height:var(--coupole-fleche);
  pointer-events:none;
  /* fondu tres court aux extremites : l'enveloppe d'opacite de l'animation
     porte l'essentiel du fondu, le masque ne fait que finir le travail */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.cable{display:block; width:100%; height:100%; overflow:visible}
.cable path{fill:none}

/* Le fil, statique. Un filet, rien de plus : meme couleur que toutes les
   bordures de la page, 1px, aucune lueur. vector-effect lui donne un vrai
   pixel ecran : sans lui, l'etirement vertical du viewBox multipliait son
   epaisseur par la profondeur de la coupole, et c'est ce qui le rendait
   trop visible. C'est l'etoile filante qui revele la courbe. */
.cable__fil{
  stroke:var(--hairline); stroke-width:1;
  filter:none;
}

/* --- LE TRAIT DE LUMIERE -------------------------------------------------
   Un segment fin qui epouse exactement la courbe : le meme arc que le
   cable, stroke en pleine lumiere, revele a travers une fenetre en degrade
   lineaire qui glisse de droite a gauche. La pente de l'arc etant douce,
   l'approximation lineaire du masque ne se voit pas.

   Deux fenetres superposees, une seule course :
     --queue  la longue, qui porte la teinte de l'accent et s'eteint
     --tete   la courte, qui porte la tete blanche
   Leur somme donne un degrade continu de couleur ET d'opacite, sans le
   moindre palier : aucune n'a de plage a alpha constant.

   Le mouvement est en transform pur. Chaque fenetre translate vers la
   gauche ; l'arc qu'elle contient translate d'autant vers la droite. Les
   deux s'annulent : l'arc ne bouge pas d'un pixel a l'ecran, seule la
   fenetre le parcourt. Rien n'est redessine d'une image a l'autre.

   REGLAGES, affinables au chiffre :
     --comete-long     longueur de la trainee
     --comete-tete     longueur de la tete blanche
     --comete-trait    epaisseur du trait
     --comete-lueur    rayon du glow
   La course et la periode restent celles du bloc 52.
   ------------------------------------------------------------------------ */
.comete{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.comete__fenetre{
  position:absolute; top:0; left:0; height:100%;
  will-change:transform, opacity;
  animation:comete-course var(--filante-periode) linear infinite;
}
.comete__arc{
  position:absolute; top:0; left:0;
  /* max-width:none : la regle globale img,svg{max-width:100%} plafonnait
     l'arc a la largeur de sa fenetre, il s'ecrasait donc dedans */
  width:var(--comete-arc-l,100%); max-width:none; height:100%;
  overflow:visible;
  will-change:transform;
  animation:comete-arc var(--filante-periode) linear infinite;
}
.comete__arc path{fill:none; stroke-linecap:round}

/* la queue : longue, teintee, eteinte progressivement vers l'arriere */
.comete__fenetre--queue{width:var(--comete-long)}
.comete__fenetre--queue{
  -webkit-mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.82) 16%, rgba(0,0,0,.54) 40%,
    rgba(0,0,0,.27) 64%, rgba(0,0,0,.09) 84%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.82) 16%, rgba(0,0,0,.54) 40%,
    rgba(0,0,0,.27) 64%, rgba(0,0,0,.09) 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  filter:drop-shadow(0 0 var(--comete-lueur) rgba(var(--accent-neon-rgb),.75));
}
.comete__fenetre--queue path{
  stroke:var(--accent-neon); stroke-width:var(--comete-trait);
}

/* la tete : courte, blanche a peine teintee, c'est le point d'accroche */
.comete__fenetre--tete{width:var(--comete-tete)}
.comete__fenetre--tete{
  -webkit-mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 68%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 68%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  filter:drop-shadow(0 0 calc(var(--comete-lueur) * 1.4) rgba(var(--accent-clair-rgb),.9));
}
.comete__fenetre--tete path{
  stroke:var(--comete-blanc); stroke-width:var(--comete-trait-tete);
}

/* Course : la fenetre part hors du trace a droite (--comete-x0) et sort
   par la gauche (--comete-x1). 50 % = 4s de course sur 8s de periode. */
@keyframes comete-course{
  0%   {transform:translate3d(var(--comete-x0),0,0); opacity:0}
  3%   {opacity:1}
  46%  {opacity:1}
  50%  {transform:translate3d(var(--comete-x1),0,0); opacity:0}
  100% {transform:translate3d(var(--comete-x1),0,0); opacity:0}
}
/* translation exactement opposee : l'arc reste immobile a l'ecran */
@keyframes comete-arc{
  0%   {transform:translate3d(calc(var(--comete-x0) * -1),0,0)}
  50%  {transform:translate3d(calc(var(--comete-x1) * -1),0,0)}
  100% {transform:translate3d(calc(var(--comete-x1) * -1),0,0)}
}
/* hors champ, rien a animer */
.hero--dort .comete__fenetre,
.hero--dort .comete__arc,
.hero--dort .etoiles__scint circle{animation-play-state:paused}

/* --- ciel etoile, hero uniquement, tout au fond --- */
/* La nappe vit sur sa propre couche : elle peut donc suivre le pointeur
   en transform sans deplacer le clip de la coupole. inset negatif : les
   8px de derive ne peuvent jamais decouvrir un bord. */
.nebuleuse{
  position:absolute; inset:-20px;
  pointer-events:none;
  will-change:transform;
  background:radial-gradient(38% 30% at 22% 74%, rgba(var(--nappe-2-rgb),.13) 0%, rgba(var(--nappe-2-rgb),0) 70%),
    radial-gradient(34% 27% at 58% 40%, rgba(var(--nappe-2-rgb),.11) 0%, rgba(var(--nappe-2-rgb),0) 70%),
    radial-gradient(30% 24% at 16% 82%, rgba(var(--accent-deep-rgb),.15) 0%, rgba(var(--accent-deep-rgb),0) 72%),
    radial-gradient(30% 24% at 50% 52%, rgba(var(--accent-deep-rgb),.15) 0%, rgba(var(--accent-deep-rgb),0) 72%),
    radial-gradient(30% 24% at 84% 22%, rgba(var(--accent-deep-rgb),.15) 0%, rgba(var(--accent-deep-rgb),0) 72%),
    radial-gradient(60% 48% at 35% 60%, rgba(var(--accent-deep-rgb),.09) 0%, rgba(var(--accent-deep-rgb),0) 100%),
    radial-gradient(55% 44% at 72% 28%, rgba(var(--accent-deep-rgb),.08) 0%, rgba(var(--accent-deep-rgb),0) 100%),
}
.etoiles__c{will-change:transform}
.etoiles{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.etoiles__scint circle{animation:scintille 6.4s ease-in-out infinite}
.e--s0{animation-delay:0s}    .e--s1{animation-delay:.8s}
.e--s2{animation-delay:1.6s}  .e--s3{animation-delay:2.4s}
.e--s4{animation-delay:3.2s}  .e--s5{animation-delay:4s}
.e--s6{animation-delay:4.8s}  .e--s7{animation-delay:5.6s}
/* respiration douce : l'etoile ne s'eteint jamais tout a fait */
@keyframes scintille{
  0%,100%{opacity:.28}
  50%{opacity:1}
}

/* --- profondeur : halos poses aux consignes 02 --- */
/* Le ciel. Il ne descend plus jusqu'au bas du hero : il s'arrete sur
   l'arc, qui croise la carte VSL. Au-dessus, le ciel etoile ; en dessous,
   le noir de la suite. C'est lui qui porte la coupole et le clip. */
/* Le CIEL : boite clippee par la meme demi-ellipse que l'arc. Composant
   partage par le hero et par les ouvertures d'acte. Sa hauteur et sa
   fleche sont les seules valeurs qui changent d'une instance a l'autre. */
.ciel{
  position:absolute; left:0; right:0; top:0;
  height:var(--h-ciel);
  z-index:-1; pointer-events:none;
  overflow:hidden;
  border-bottom-left-radius:50% var(--coupole-fleche);
  border-bottom-right-radius:50% var(--coupole-fleche);
  background-color:#000000;
}
/* --- L'HORIZON DE LA COUPOLE, VARIANTE A ---------------------------------
   Une seule courbe : celle de l'arc, et rien d'autre a l'ecran.

   La boite reprend EXACTEMENT la geometrie du clip du ciel : meme largeur,
   hauteur de deux fleches, border-radius:50 %. Son ellipse inscrite est
   donc l'arc lui-meme, a toutes les largeurs, sans qu'aucune valeur ne
   soit ecrite deux fois.

   La lueur est une ombre INTERNE floutee. C'est la seule construction qui
   donne un falloff d'epaisseur CONSTANTE en pixels le long d'une courbe :
   un degrade radial, lui, s'eteint proportionnellement a chaque rayon, et
   sur une ellipse aussi allongee que celle-ci il deborde lateralement de
   plusieurs centaines de pixels. C'est ce qui avait noye le ciel.

   Un masque vertical supprime la moitie haute : le rebord HAUT de
   l'ellipse ne doit jamais apparaitre, une seule courbe est visible.

   Le clip du ciel coupe net a la ligne : rien ne passe dessous.
   ------------------------------------------------------------------------ */
.hero{
  --horizon-falloff:130px;    /* extinction au-dessus de la ligne */
  --horizon-intensite:.5;
}
.horizon{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--coupole-fleche) * 2);
  border-radius:50%;
  pointer-events:none;
  box-shadow:inset 0 0 var(--horizon-falloff)
             rgba(var(--accent-deep-rgb),var(--horizon-intensite));
  -webkit-mask-image:linear-gradient(to bottom, transparent 42%, #000 60%);
  mask-image:linear-gradient(to bottom, transparent 42%, #000 60%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.halo{position:absolute; border-radius:50%; will-change:transform}
.halo--deep{
  width:min(130vw,1500px); aspect-ratio:1; left:50%; top:38%;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--halo-1-rgb),.34) 0%, rgba(var(--halo-1-rgb),.17) 28%, rgba(var(--halo-1-rgb),.05) 50%, transparent 68%);
}
.halo--neon{
  width:min(96vw,1050px); aspect-ratio:1; left:50%; top:30%;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--halo-2-rgb),.30) 0%, rgba(var(--halo-2-rgb),.13) 26%, rgba(var(--halo-2-rgb),.035) 46%, transparent 64%);
}
.halo--spot{
  width:min(60vw,620px); aspect-ratio:1; left:50%; top:20%;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle at 50% 50%,
    var(--halo-spot-a) 0%, var(--halo-spot-b) 22%, transparent 60%);
}
/* Le grain reste une piece du HERO seul : voir le commentaire du
   balisage, section de l'acte. */
.hero__grain{
  position:absolute; inset:-40px; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* extinction avant les bords : aucune limite de section ne se devine */
.hero__fade,
.acte__fade{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, #000 0, rgba(0,0,0,0) 130px),
    linear-gradient(to right, #000 0, rgba(0,0,0,0) 120px),
    linear-gradient(to left, #000 0, rgba(0,0,0,0) 120px);
}

.hero__inner{
  position:relative; width:100%; max-width:var(--container);
  display:flex; flex-direction:column; align-items:center;
}

/* --- ligne cibles : Instrument Sans, style de la bulle [site] --- */
.cibles{width:min(92vw,1200px); max-width:100%; flex:none; margin-inline:auto}


/* --- titre : Poppins 700 majuscules [monetika] --- */
.hero__title{
  position:relative;
  margin-top:26px;
  /* Le conteneur s'elargit pour l'accroche seule : la contrainte de
     1200px du bloc 10 avait ete posee pour Zen Dots. */
  width:min(90vw,1500px);
  font-family:var(--font-display); font-weight:700;
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
  color:var(--text-1);
}
.hero__title .ln{display:block; line-height:var(--lh-display)}
.hero__title .ln__i{display:inline-block}
.js .hero__title .ln__i{white-space:nowrap}
.js .hero__title .ln.is-wrapped .ln__i{white-space:normal}

/* [site] .hero-souligne : trait blanc, epaisseur suivant la taille du
   texte tout en restant bornee. La decoration ne couvre que le span. */
.hero__title .sig{
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-color:#ffffff;
  text-decoration-thickness:clamp(4px,.105em,6px);
  text-underline-offset:.16em;
  text-decoration-skip-ink:auto;
}

/* Ligne d'appui : les deux niveaux d'autrefois tiennent desormais sur une
   seule ligne, separes par un point median. Registre lead, graisse medium.
   Les deux segments sont insecables : sur ecran etroit la ligne se replie
   donc exactement au point median, jamais au milieu d'un segment. */
.hero__appui{
  margin-top:1.5rem;
  font-family:var(--font-body); font-weight:500;
  /* vraie italique de la famille, fichier dedie : jamais d'oblique
     synthetisee par le navigateur */
  font-style:italic;
  font-size:clamp(1.05rem,2vw,1.7rem); line-height:1.35;
  letter-spacing:.005em; color:var(--text-1);
}
.hero__appui > span{white-space:nowrap}
/* selecteur a deux niveaux : sinon `.hero__appui > span` l'emporte et
   la ligne entiere devient insecable */
.hero__appui > .hero__sep{white-space:normal}

/* --- facade VSL : recette des box du site [site] --- */
/* La carte VSL chevauche la coupole : elle se peint devant le ciel, le
   cable et la lumiere, et son fond noir opaque masque la frontiere. */
.vsl{
  position:relative; z-index:2;
  width:100%;  max-width:900px;
  /* Segment bouton du hero -> VSL. Reduit d'environ 30 % par rapport a
     l'elargissement du bloc 41 : clamp(3.5rem,6vw,5rem) devient
     clamp(2.45rem,4.2vw,3.5rem). Une seule valeur a regler. */
  --espace-cta-vsl:clamp(2.45rem,4.2vw,3.5rem);
  margin-top:var(--espace-cta-vsl);
}
.vsl__frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background-color:#000000;
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  box-shadow:none;
  overflow:hidden; display:grid; place-items:center;
  transition:border-color .3s ease;
}
.vsl__frame:hover{border-color:var(--hairline-hi)}
.vsl__frame iframe,.vsl__frame video{position:absolute; inset:0; width:100%; height:100%; border:0}
.vsl__glow{
  position:absolute; left:50%; top:50%; width:52%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(var(--accent-solid-rgb),.20) 0%,transparent 66%);
  pointer-events:none;
}
.vsl__play{
  position:relative; display:grid; place-items:center;
  width:clamp(64px,8vw,84px); aspect-ratio:1; border-radius:50%;
  background:var(--accent-solid); color:#ffffff; cursor:pointer;
  box-shadow:var(--btn-lueur);
  transition:background-color var(--btn-duree) ease, box-shadow var(--btn-duree) ease,
             transform var(--btn-duree) ease;
}
.vsl__play .vsl__icon{margin-left:.12em}
.vsl__play:hover{
  transform:scale(1.05);
  background:var(--accent-solid-fonce);
  box-shadow:var(--btn-lueur-survol);
}
.vsl__ring{position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(var(--accent-solid-rgb),.32)}
.vsl__frame.is-idle .vsl__play{
  cursor:default;
  background-color:rgba(var(--accent-solid-rgb),.16);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-solid-rgb),.40);
}
.vsl__frame.is-idle .vsl__play:hover{transform:none; box-shadow:inset 0 0 0 1px rgba(var(--accent-solid-rgb),.40)}

/* --- overlay d'activation du son (bloc 221), releve sur Monetika : voile
   leger jamais opaque, rond de verre depoli a anneau blanc fin qui pulse,
   libelle en majuscules espacees avec une ombre portee. --- */
.vsl__son{
  --vsl-rond:80px;                 /* diametre du rond */
  --vsl-libelle-ecart:20px;        /* rond -> libelle, la recette Monetika */
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%; padding:0; border:0; cursor:pointer;
  background:rgba(0,0,0,.14); color:#ffffff;
  font:inherit;
}
/* bloc 228 : le ROND est centre sur la zone video par un mecanisme
   independant du ratio (50 % + translation de moitie) ; le libelle se pose
   sous lui a l'ecart de la recette. Avant, la colonne flex centrait le
   GROUPE rond + libelle : le rond montait de la moitie du libelle, visible
   sur un cadre mobile bas. */
.vsl__son-rond{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:var(--vsl-rond); height:var(--vsl-rond); border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:vsl-pulse 2.2s ease-in-out infinite;
}
.vsl__son-rond svg{margin-left:2px}
.vsl__son-texte{
  position:absolute; left:50%; top:calc(50% + var(--vsl-rond) / 2 + var(--vsl-libelle-ecart)); transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--font-heading); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
@media (max-width:768px){
  .vsl__son{--vsl-rond:64px; --vsl-libelle-ecart:14px}
  .vsl__son-texte{font-size:.62rem; letter-spacing:.22em}
}
@keyframes vsl-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.35)}
  50%{transform:translate(-50%,-50%) scale(1.06); box-shadow:0 0 0 14px rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .vsl__son-rond{animation:none}
}

/* --- CTA [site] .hero .btn --- */
.hero__cta{margin-top:26px}
/* Aucune ombre noire sur un bouton. La seule ombre autorisee est la
   bleue de l'orbe Monetika, portee par --btn-lueur / --btn-lueur-survol.
   Il y avait ici un drop-shadow noir, herite du CTA sur ciel clair : ce
   n'etait pas une box-shadow, le bloc 79 ne l'avait donc pas atteint. */

/* --- souris de scroll, CSS pur [site] .scroll-cue --- */
.scroll-cue{
  position:relative;
  /* affinee : contour a 1px, largeur reduite d'un quart, hauteur d'un
     cheveu plus haute. La forme s'elance. */
  width:23px; height:52px;
  margin:26px auto 0;
  border:1px solid #ffffff;
  border-radius:999px;
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(0,0,0,.6));
}
.scroll-cue::before{
  content:""; position:absolute;
  top:8px; left:50%;
  width:3px; height:8px; margin-left:-1.5px;
  border-radius:1.5px;
  background-color:var(--accent-vif);
  box-shadow:0 0 12px rgba(var(--accent-vif-rgb),.65);
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{
  0%   {transform:translateY(0);    opacity:1}
  70%  {transform:translateY(13px); opacity:0}
  100% {transform:translateY(0);    opacity:0}
}

/* --------------------------- 6. CURSEUR PINCEAU -------------------------
   Le curseur signature de la page est un pinceau d'artiste, dessine au
   trait fin comme le reste du vocabulaire d'icones. CSS pur : aucun
   element ajoute au DOM, aucune boucle, aucun ecouteur. Le hotspot est
   l'extreme pointe des poils, posee au pixel (5, 3) du sprite 40x40, inclinaison 50 degres.
   Le SVG passe en premier, le PNG sert de repli aux moteurs qui ne
   savent pas prendre un SVG en curseur.
   ------------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  html{
    cursor:url("images/curseur-pinceau.svg") 5 3,
           url("images/curseur-pinceau.png") 5 3, auto;
  }
  /* Ergonomie retenue sur Monetika apres essais reels : la main systeme
     sur ce qui se clique, la barre d'insertion sur le texte courant. */
  a,button,summary,label,[role="button"],.vsl__frame,.faq__question{cursor:pointer}
  p,li,h1,h2,h3,h4,blockquote,figcaption,dd,dt{cursor:text}
  /* champs de formulaire : curseur natif, jamais de pinceau */
  input,textarea,select{cursor:auto}
  /* Variante ?curseur=signature : le pinceau ne cede jamais la place, et
     sa pointe s'illumine en bleu au-dessus de ce qui se clique. */
  html[data-curseur="signature"] a,
  html[data-curseur="signature"] button,
  html[data-curseur="signature"] summary,
  html[data-curseur="signature"] label,
  html[data-curseur="signature"] [role="button"],
  html[data-curseur="signature"] .vsl__frame,
  html[data-curseur="signature"] .faq__question{
    cursor:url("images/curseur-pinceau-signature.svg") 5 3,
           url("images/curseur-pinceau-signature.png") 5 3, pointer;
  }
}

/* ---------------------- 7. RESPONSIVE ET MOUVEMENT ---------------------- */
@media (max-width:768px){
  /* pill mobile mesuree : 62px de haut, posee a 16px du bord */
  :root{--menu-hauteur:62px; --espace-menu-bulle:28px}
  .hero{--comete-long:190px; --comete-tete:32px; --comete-trait:1.5px; --comete-trait-tete:1.7px}
  .hero__fade{
    background:linear-gradient(to bottom,#000 0,rgba(0,0,0,0) 90px);
  }
  .hero__title{margin-top:22px; line-height:1.3}
  .hero__title .ln{line-height:1.3}
  /* [site] a cette taille la formule en em butait sur son plancher */
  .hero__title .sig{text-decoration-thickness:2px; text-underline-offset:.05em}
  .btn{width:100%; max-width:26rem; padding-inline:1rem}
  .scroll-cue{display:none}
}
@media (max-width:380px){
  .hero{padding-inline:1.1rem}
  .btn{white-space:normal; line-height:1.3}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-cue::before,
  .etoiles__scint circle{animation:none !important}
  .comete{display:none}
  .faq__panneau,.faq__interieur,.faq__signe::after,.offre__etat > p{transition:none}
  .js .reveal{opacity:1; transform:none; transition:none}
  .btn,.vsl__play,.vsl__frame{transition:none}
  .btn-primary:hover,.vsl__play:hover{transform:none}
}


/* =========================================================================
   8. SECTIONS 4 A 14
   Jetons de rythme et composants communs. Le hero ci-dessus n'est pas
   touche par ce bloc.
   ========================================================================= */
:root{
  --space-sm:1rem;            /* [site] */
  --space-md:2rem;            /* [site] */
  --space-lg:4rem;            /* [site] */
  --space-section:clamp(5.5rem,9vw,8rem);   /* [site], espacements internes */
  /* RYTHME VERTICAL ENTRE SECTIONS. Une seule source par jonction : le
     padding HAUT de la section qui suit. Toutes les sections ont un
     padding bas nul, le vide entre deux sections vaut donc exactement
     l'un de ces deux tokens, jamais une somme. */
  --vide-section:110px;
  --vide-section-large:150px;
  --text-2xl:clamp(1.6rem,3.2vw,2.25rem);   /* [site] titres de section */
}

/* ----------------------------- ossature -------------------------------- */
/* Les sections hors ecran ne sont ni mises en page ni peintes tant
   qu'elles n'approchent pas. contain-intrinsic-size reserve leur hauteur,
   donc aucun saut de mise en page. Aucun effet visuel. */
#profil{
  content-visibility:visible;
  /* le vide hero -> section 4 est porte en entier par le padding bas du
     hero : la section n'ajoute rien de son cote */
  padding-top:0;
}
@media (max-width:768px){
  :root{--vide-section:72px; --vide-section-large:96px}
}
.section{
  content-visibility:auto;
  /* hauteur reservee proche du reel : sous-estimee, elle provoquait un
     saut de mise en page au premier rendu sur grand ecran */
  contain-intrinsic-size:auto 1400px;
  position:relative;
  /* PAS d'isolation explicite ici. A NOTER : content-visibility:auto
     applique `contain: layout style paint`, et la containment de peinture
     fait deja de chaque section un contexte d'empilement. Le z-index d'un
     .wrap ne vaut donc que DANS sa section. Toute nappe posee hors des
     sections doit passer sous elles par un z-index negatif, jamais
     compter sur un rang superieur : c'est la cause du recouvrement de la
     FAQ par l'astre, corrigee sur .astre.
     clip et non hidden : borne l'axe X pour l'echo des titres et les
     lueurs, en laissant l'axe Y libre pour la continuite entre sections */
  overflow-x:clip;
  /* bas a zero : la jonction est portee en entier par la section suivante */
  padding-top:var(--vide-section);
  padding-bottom:0;
}
/* grandes ruptures : avant les sections-titres geantes et le CTA final */
.section--final{padding-top:var(--vide-section-large)}
/* la derniere section rend au footer la respiration que son padding bas
   ne porte plus */
#faq{padding-bottom:var(--vide-section)}
/* bloc 197 : la FAQ se distingue par son fond, un cran au-dessus du noir
   de la page. Le ton est celui deja present dans le systeme pour l'aplat
   d'attente des tuiles (#0a0a0d). Hairline pleine largeur en entree et en
   sortie, le vocabulaire du bandeau. Les cartes questions restent noires
   (#000000) : elles se lisent en creux sur le fond. */
/* =========================================================================
   HABILLAGE « ENCOCHE » (blocs 197 a 204, factorise au 211)
   Un seul code, instancie par la FAQ et par la section make money :
   fond noir pur, grain (utilitaire .a-grain), encoche trapezoidale au
   bord haut avec ses variables, filet SVG qui epouse la forme, comete
   qui parcourt ce filet, filet bas droit. Tout reglage vaut pour toutes
   les instances.
   ORDRE DES COUCHES, explicite (isolation:isolate) : ::before = fond
   (z -3), ::after = grain (z -2), nappes ou astre (z -2 / -1), trait et
   comete (z 0), .wrap = contenu (z 1). La section elle-meme reste sans
   fond : tout passe par les couches.
   ========================================================================= */
.section--encoche{
  --encoche-fond:#000000;
  --encoche:48px;                  /* profondeur */
  --encoche-a:35%;                 /* debut de la pente gauche */
  --encoche-b:43%;                 /* fond du creux, cote gauche */
  --encoche-c:57%;                 /* fond du creux, cote droit */
  --encoche-d:65%;                 /* fin de la pente droite */
  --encoche-comete-periode:8s;     /* cadence de la comete, celle des coupoles */
  --encoche-forme:polygon(0 0, var(--encoche-a) 0, var(--encoche-b) var(--encoche), var(--encoche-c) var(--encoche), var(--encoche-d) 0, 100% 0, 100% 100%, 0 100%);
  position:relative; isolation:isolate;
  border-bottom:1px solid var(--hairline);
}
.section--encoche::before{content:""; position:absolute; inset:0; z-index:-3; background:var(--encoche-fond); clip-path:var(--encoche-forme)}
/* --- GRAIN, utilitaire (blocs 199 et 208) --------------------------------
   .a-grain pose un grain de bruit tres fin sur tout element positionne :
   tuile PNG de 96px (blanc a alpha aleatoire) repetee sur ::after, opacite
   par --grain-opacite. */
:root{--grain-opacite:.04}
.a-grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--grain-opacite);
  background-image:url("images/grain-96.png"); background-repeat:repeat;
  mix-blend-mode:screen;
}
/* dans l'habillage, le grain suit l'encoche et passe sous les nappes */
.section--encoche.a-grain::after{z-index:-2; clip-path:var(--encoche-forme)}
#faq > .astre{position:absolute; left:0; right:0; bottom:0; height:0; z-index:-1}
/* le trait du haut et sa comete vivent dans un conteneur .coupole (les
   reglages de la comete y sont definis) ancre en haut de la section, haut
   de la profondeur de l'encoche. Trace en pixels reels par script.js
   (calerEncoches) : le filet et les deux copies que balaient les fenetres
   de la comete portent le meme path. */
.encoche__trait.coupole{top:0; bottom:auto; height:var(--encoche); z-index:0; --filante-periode:var(--encoche-comete-periode)}
.encoche__filet{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; display:block; overflow:visible}
.encoche__filet path{fill:none; stroke:var(--hairline); stroke-width:1; stroke-linejoin:round}
.encoche--dort .comete__fenetre, .encoche--dort .comete__arc{animation-play-state:paused}
/* bloc 211 : sur make money, le bas ne se touche pas (jonction 181/182 avec
   le bandeau) : pas de filet bas propre, le bandeau porte le sien */
#cadre.section--encoche{border-bottom:0}
/* --- bloc 233 : l'image barree (make money) -------------------------------
   La photo dans un cadre au ratio paysage, la croix par-dessus en SVG :
   deux diagonales d'un bord a l'autre, trait constant en pixels
   (vector-effect), rouge des annotations des captures de preuve
   (#e61e1e, releve sur preuve-anthropic-v1). Gabarit et croix en
   variables. Elle ne vit qu'en mobile : pleine largeur du .wrap, donc la
   largeur de l'ecran moins la gouttiere. Desktop : display:none tant que
   JL n'a pas tranche. */
.barree{
  --barree-rouge:#e61e1e;
  --barree-trait:6px;
  --barree-opacite:.92;
  --barree-ratio:16 / 9;
  --barree-largeur:100%;
  --barree-rayon:var(--radius-card);
  --barree-ecart-bas:var(--space-md);   /* image -> texte, le rythme du titre */
  display:none; position:relative;
  width:var(--barree-largeur); max-width:100%; aspect-ratio:var(--barree-ratio);
  margin:0 auto var(--barree-ecart-bas);
  border-radius:var(--barree-rayon); overflow:hidden;
}
.barree img{display:block; width:100%; height:100%; object-fit:cover}
.barree__croix{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.barree__croix path{fill:none; stroke:var(--barree-rouge); stroke-width:var(--barree-trait); stroke-linecap:round; opacity:var(--barree-opacite); vector-effect:non-scaling-stroke}
@media (max-width:768px){
  .barree{display:block}
}
/* bloc 229 : en mobile l'encoche s'elargit, variables de forme propres au
   point de rupture ; le filet et la comete suivent (meme path source) */
@media (max-width:768px){
  .section--encoche{--encoche:36px; --encoche-a:20%; --encoche-b:32%; --encoche-c:68%; --encoche-d:80%}
}
.wrap{
  position:relative; z-index:1;
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.wrap--etroit{max-width:820px}
/* bloc 227 : en mobile, la gouttiere est UNE variable posee sur le
   conteneur : aucune carte ne touche le bord, aucun padding ne s'empile.
   Les elements bord a bord (bandeaux, bandes section-titre, fonds) vivent
   hors du .wrap et ne la recoivent pas. */
:root{--gouttiere-mobile:20px}
@media (max-width:768px){
  .wrap{padding-inline:var(--gouttiere-mobile)}
}
/* le hero ne recoit pas la gouttiere : il garde sa propre marge laterale
   (clamp(1.25rem,4vw,2.5rem), regle .hero) */

/* lueurs d'ambiance : le degrade atteint la transparence a 70 % de son
   rayon, aucune limite de section ne peut donc se deviner */
.lueur{
  position:absolute; z-index:-2; pointer-events:none;
  width:min(120vw,1050px); aspect-ratio:1; border-radius:50%;
  /* Aucun stop plus clair que le bleu profond du ciel Monetika : les
     nappes ne portent QUE rgb(0,3,255) et le violet sombre de la voie
     lactee. Le woad et le woad-soft restent aux lumieres ponctuelles. */
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-deep-rgb),.20) 0%, rgba(var(--accent-deep-rgb),.085) 30%,
    rgba(var(--accent-deep-rgb),.03) 52%, transparent 70%);
}
.lueur--haut{left:50%; top:-14%; transform:translateX(-50%)}
.lueur--gauche{left:-22%; top:12%}
.lueur--droite{right:-22%; top:8%}
.lueur--final{
  left:50%; top:-6%; transform:translateX(-50%);
  width:min(140vw,1280px);
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-solid-rgb),.24) 0%, rgba(var(--accent-deep-rgb),.11) 28%,
    rgba(var(--accent-deep-rgb),.04) 50%, transparent 70%);
}

/* --------------------- composant : titre de section --------------------
   [site] .titre-section : le bloc porte le trait d'accent en ::after,
   .titre-texte porte le texte plein et sert de referentiel a l'echo,
   .titre-echo est l'echo en contour, deux fois plus grand, derriere.
   ------------------------------------------------------------------------ */
.titre-section{
  --titre-echo-remonte:20px;
  position:relative; text-align:center;
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700;
  line-height:1.25; text-transform:uppercase; letter-spacing:.03em;
  color:var(--text-1);
  margin-bottom:var(--space-md);
}
.titre-texte{position:relative; z-index:0; display:inline-block}
.titre-echo{
  position:absolute; z-index:-1; left:50%; top:50%;
  transform:translate(-50%, calc(-50% - var(--titre-echo-remonte)));
  font-size:2.05em; line-height:1; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px #ffffff;
  /* l'echo passe derriere le texte plein grace au z-index de .titre-texte */
  opacity:.1;
  pointer-events:none; -webkit-user-select:none; user-select:none;
}
.titre-sous{
  display:block; margin-top:12px;
  font-family:var(--font-body); font-size:14px; font-weight:400; line-height:1.4;
  letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
  color:var(--text-1);
}
/* le trait d'accent, plat et sans lueur, sous chaque titre [site] */
.titre-section::after{
  content:""; display:block;
  width:140px; height:2px; margin:.9rem auto 0;
  background-color:var(--accent-vif);
}
/* titres longs : l'echo serait rogne des deux cotes, seul le trait reste */
.titre-section--long{font-size:clamp(1.35rem,2.9vw,2rem)}

/* --- cesure dictee d'un titre de section --------------------------------
   Chaque groupe est un bloc a partir de 768px : la coupure ne depend plus
   de la largeur disponible. En dessous, les groupes redeviennent en ligne
   et le titre se replie naturellement si l'un d'eux ne rentre pas. */
.titre-texte--cesure .ligne{display:inline}
@media (min-width:768px){
  .titre-texte--cesure .ligne{display:block}
}

/* --- REGLE PERMANENTE DU PROJET : LES PARENTHESES -----------------------
   Tout groupe entre parentheses du texte visible passe en italique,
   parentheses comprises, dans tous les registres : prose, cartes, listes,
   cartes prix, FAQ. Le copy source ne change pas d'un caractere, seule
   une enveloppe d'emphase est posee au rendu.
   La vraie italique de la famille est chargee (fichier variable), jamais
   d'italique synthetisee. font-weight:inherit : dans un <strong>, la
   parenthese garde la graisse du texte qui la porte.
   Elle vaut pour tout copy futur.
   ------------------------------------------------------------------------ */
.par{font-style:italic; font-weight:inherit}

/* --------------------------- textes courants ---------------------------- */
/* Colonne de prose : etroite, centree dans la page, texte aligne a
   gauche. Une ligne du copy est un paragraphe, la respiration verticale
   entre eux est genereuse. Les titres de section restent centres. */
.prose{max-width:610px; margin-inline:auto; text-align:left}
.prose p{color:var(--text-1)}
.prose p + p{margin-top:1.5rem}
.prose--serree{margin-top:var(--space-lg)}
.prose--serree p + p{margin-top:.55rem}
.prose__fort{color:var(--text-1); font-weight:600}

/* Emphases : gras seul, ou gras plus soulignement blanc pour les pivots
   les plus forts. Recette du soulignement reprise du site, proportions
   du corps de texte. */
.prose strong{font-weight:600; color:var(--text-1)}
/* Les emphases fortes de la prose lisent la recette commune ci-dessus :
   gras conserve, trait magenta au lieu du blanc. */
.prose__pivot{
  margin-top:2.5rem; margin-bottom:1.25rem;
  font-family:var(--font-display); font-size:clamp(1.1rem,2.2vw,1.45rem);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-1);
}
.prose__pivot-mini{
  margin-top:var(--space-md);
  font-family:var(--font-heading); font-size:.72rem; line-height:1.5;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-1);
}
/* --- PHRASE-CHOC, composant (blocs 209, 214, 215) ----------------------
   Une phrase centree, Poppins 700, taille en variable proche des titres de
   section, soulignement du systeme sur l'accent. Coupure CONTROLEE : par
   defaut l'amorce (jusqu'aux deux-points) fait une ligne et la suite reste
   insecable (option B, la plus grande taille) ; le modificateur
   --une-ligne pose tout sur une ligne a une taille abaissee (option A).
   Instances : Resultat, Bonne nouvelle. --- */
.phrase-choc{
  --phrase-choc-taille:clamp(1.4rem,2.8vw,2rem);
  --phrase-choc-taille-une-ligne:1.65rem;
  margin-top:2.5rem; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:var(--phrase-choc-taille); line-height:1.25;
  color:var(--text-1);
}
.phrase-choc .phrase-choc__amorce{display:block}
.phrase-choc .phrase-choc__suite{white-space:nowrap}
.phrase-choc--une-ligne{font-size:var(--phrase-choc-taille-une-ligne); white-space:nowrap}
.phrase-choc--une-ligne .phrase-choc__amorce{display:inline}
@media (max-width:768px){
  .phrase-choc{--phrase-choc-taille:1.25rem}
  .phrase-choc--une-ligne{font-size:var(--phrase-choc-taille); white-space:normal}
  .phrase-choc--une-ligne .phrase-choc__amorce{display:block}
}
.phrase-choc .souligne{text-decoration-thickness:var(--souligne-trait-actif)}
/* Bonne nouvelle : dans l'acte, la phrase ouvre le bloc, sans marge haute
   propre (l'ecart carte -> phrase reste --espace-acte-suite) */
.acte__suite > .phrase-choc{margin-top:0}
/* Bonne nouvelle : plus longue que Resultat, l'option une ligne descend a
   1.38rem pour tenir la colonne ; en mobile la suite se coupe a son seul
   point controle (les deux segments restent chacun insecables) */
.acte__suite > .phrase-choc{--phrase-choc-taille-une-ligne:1.38rem}
@media (max-width:768px){
  .phrase-choc__suite--fin{display:block}
}
.prose__car{
  margin-top:2.5rem;
  font-family:var(--font-heading); font-size:.85rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-1);
}
.kicker{
  text-align:center; margin-bottom:.85rem;
  font-family:var(--font-heading); font-size:.72rem; line-height:1.5;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-1);
}
.sous-titre{
  margin-top:var(--space-lg); margin-bottom:var(--space-md); text-align:center;
  font-family:var(--font-display); font-size:clamp(1.05rem,2.1vw,1.4rem);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-1);
}
/* la marque, posee seule : AI DESIGN ENGINEER */
/* --- composant : BANDEAU-TITRE -----------------------------------------
   Releve sur monetika-front, Landing.tsx:1862-1868, composant BandeauTitre,
   celui du titre « Vos textes de vente, avant et apres » et de « Derriere
   Monetika ». Transpose tel quel :

     border-y      1px rgba(255,255,255,0.12)   filets haut ET bas
     background    rgba(4,5,16,0.55)            nuit tres sombre, 55 %
     backdrop-blur 12px
     padding-block 48px, 64px a partir de 768px (py-12 / md:py-16)
     titre         max-width 64rem, centre, blanc, padding-inline 20/24px
                   h2-landing : Poppins 700, majuscules, .02em, lh 1.15

   UN SEUL ECART, signale : la TAILLE. h2-landing vaut clamp(26px,3.4vw,38px),
   soit 38px a 1440. Le registre de ce composant a ete dicte au bloc 90 entre
   le H2 systeme et l'accroche du hero, cible 48 a 60px. --fs-titre-bande
   porte donc 56px. Un seul chiffre suffit a revenir sur la valeur Monetika.

   Deux occurrences : AI DESIGN ENGINEER et LE PROGRAMME :.
   ------------------------------------------------------------------------ */
:root{--fs-titre-bande:clamp(2rem,4.4vw,3.5rem)}   /* 56px a 1440 */
.section--bande{
  /* la bande est pleine largeur et visuellement detachee du flux */
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  background-color:rgba(4,5,16,.55);
  /* le vide qui la precede reste porte par le token du bloc 92, mais en
     MARGE : un padding ferait grandir la bande elle-meme */
  /* blocs 224 et 230 : les deux bandes ouvrent au rythme courant, seule
     source de la jonction avec ce qui precede (rien ne s'empile au-dessus) */
  margin-top:var(--vide-section);
  padding-top:48px; padding-bottom:48px;
}
@supports (backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px)){
  .section--bande{
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
}
@media (min-width:768px){
  .section--bande{padding-top:64px; padding-bottom:64px}
}
/* --- HABILLAGE DE BANDE SECTION-TITRE (blocs 208 et 219) : noir pur et
   grain (utilitaire .a-grain), filets du systeme en haut et en bas, une
   comete par filet en sens opposes. Instances : AI DESIGN ENGINEER et LE
   PROGRAMME, un seul code, memes variables. --- */
.bande--habillee{
  --bande-comete-periode:8s;
  position:relative; isolation:isolate;
  background-color:#000000;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* les deux pistes : des .coupole (reglages de la comete) de 9px de haut,
   posees sur les filets ; la piste du haut est retournee en X, sa comete
   voyage donc de gauche a droite */
.bande__trait.coupole{left:0; right:0; height:9px; bottom:auto; z-index:1; mask-image:none; -webkit-mask-image:none; --filante-periode:var(--bande-comete-periode)}
.bande__trait.bande__trait--haut{top:-5px; transform:scaleX(-1)}
.bande__trait.bande__trait--bas{bottom:-5px; top:auto}
.bande--dort .comete__fenetre, .bande--dort .comete__arc{animation-play-state:paused}

.titre-bande{
  max-width:64rem; margin-inline:auto;
  text-align:center; color:#ffffff;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-titre-bande); line-height:1.15; letter-spacing:.02em;
  text-transform:uppercase;
}
/* le surtitre micro-label garde sa place au-dessus du grand titre */
.section--bande .kicker{margin-bottom:1.1rem; text-align:center}
/* la section du salaire suit la bande-titre */
.section--bande-collee{margin-bottom:0}
.section--suite{padding-top:var(--vide-section)}
/* les cartes modules commencent apres la bande */
.section--apres-bande{padding-top:clamp(2.5rem,4vw,3.5rem)}

/* --- cesure dictee d'un titre de section --------------------------------
   Chaque groupe est un bloc a partir de 768px : la coupure ne depend plus
   de la largeur disponible. En dessous, les groupes redeviennent en ligne
   et le titre se replie naturellement si l'un d'eux ne rentre pas. */
.titre-texte--cesure .ligne{display:inline}
@media (min-width:768px){
  .titre-texte--cesure .ligne{display:block}
}

/* --------------------------- textes courants ---------------------------- */
/* Colonne de prose : etroite, centree dans la page, texte aligne a
   gauche. Une ligne du copy est un paragraphe, la respiration verticale
   entre eux est genereuse. Les titres de section restent centres. */
.prose{max-width:610px; margin-inline:auto; text-align:left}
.prose p{color:var(--text-1)}
.prose p + p{margin-top:1.5rem}
.prose--serree{margin-top:var(--space-lg)}
.prose--serree p + p{margin-top:.55rem}
.prose__fort{color:var(--text-1); font-weight:600}

/* Emphases : gras seul, ou gras plus soulignement blanc pour les pivots
   les plus forts. Recette du soulignement reprise du site, proportions
   du corps de texte. */
.prose strong{font-weight:600; color:var(--text-1)}
/* Les emphases fortes de la prose lisent la recette commune ci-dessus :
   gras conserve, trait magenta au lieu du blanc. */
.prose__pivot{
  margin-top:2.5rem; margin-bottom:1.25rem;
  font-family:var(--font-display); font-size:clamp(1.1rem,2.2vw,1.45rem);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-1);
}
.prose__pivot-mini{
  margin-top:var(--space-md);
  font-family:var(--font-heading); font-size:.72rem; line-height:1.5;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-1);
}
.prose__car{
  margin-top:2.5rem;
  font-family:var(--font-heading); font-size:.85rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-1);
}
.kicker{
  text-align:center; margin-bottom:.85rem;
  font-family:var(--font-heading); font-size:.72rem; line-height:1.5;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-1);
}
.sous-titre{
  margin-top:var(--space-lg); margin-bottom:var(--space-md); text-align:center;
  font-family:var(--font-display); font-size:clamp(1.05rem,2.1vw,1.4rem);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text-1);
}
/* --- COMPOSITION A CHEVAUCHEMENT, composant partage ---------------------
   Un cadre de texte et un cadre image, l'image passant PAR-DESSUS un bord
   du cadre texte et legerement inseree verticalement : c'est ce decalage
   seul qui cree la profondeur, aucune ombre n'est ajoutee.

   Deux orientations, une seule recette, memes variables :
     .duo                     image a DROITE  (section 5, Probleme)
     .duo--image-gauche       image a GAUCHE  (section 11, Qui suis-je)

   La garde du texte se DERIVE du chevauchement dans les deux sens :
   padding du cote de l'image = chevauchement + padding standard, et rien
   d'autre. L'ecart PERCU entre le bord de l'image et le texte vaut donc
   exactement le padding standard, comme sur les trois autres cotes du
   cadre : l'oeil voit un padding uniforme tout autour. Si le
   chevauchement change, la garde suit toute seule.
   ------------------------------------------------------------------------ */
.duo{
  --duo-texte:58%;              /* largeur du cadre texte */
  --duo-chevauchement:50px;     /* recouvrement du bord droit */
  --duo-inset:44px;             /* retrait vertical, haut et bas */
  --duo-pad:clamp(1.75rem,3.6vw,3.75rem);   /* 60px a 1440 */
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
  margin-top:var(--space-md);
}
/* selecteur double : .carte porte deja un padding, et il est declare plus
   bas dans la feuille. Sans ce cran de specificite, il reprenait la main
   sur le padding droit de garde. */
.duo .duo__texte{
  padding:var(--duo-pad);
  text-align:left;
}
.duo .duo__texte > p + p{margin-top:1.15rem}
.duo__image{
  position:relative; overflow:hidden;
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  background-color:#000000;
  /* Le cadre est au ratio de l'image, 3:4, et plafonne a sa taille
     d'affichage : 750px de large. En dessous il prend la colonne. */
  aspect-ratio:3 / 4;
  max-width:750px;
  display:grid; place-items:center;
}
.duo__img{width:100%; height:100%; object-fit:cover; display:block}
/* attente : un simple label, aucune fausse image */
.duo__attente{
  font-family:var(--font-heading); font-weight:500;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-1); opacity:.5;
}

@media (min-width:900px){
  .duo{
    grid-template-columns:minmax(0,var(--duo-texte)) minmax(0,1fr);
    gap:0;                       /* le chevauchement remplace la gouttiere */
    align-items:stretch;
  }
  .duo .duo__texte{
    grid-column:1; grid-row:1;
    align-self:center;
    /* garde = chevauchement + padding standard, une seule source */
    padding-right:calc(var(--duo-chevauchement) + var(--duo-pad));
  }
  /* CENTRAGE VERTICAL, regle commune aux deux orientations : l'image se
     centre sur la hauteur du cadre texte, insets haut et bas egaux par
     construction. Le centrage est dynamique, la hauteur du cadre variant
     avec le contenu et la largeur d'ecran. max-height garantit que
     l'image ne depasse jamais le cadre, insets compris. */
  .duo .duo__image{
    grid-column:2; grid-row:1;
    margin-left:calc(var(--duo-chevauchement) * -1);
    align-self:center;
    /* le cadre mene la hauteur : son ratio prime, il n'est plus plafonne */
    z-index:2;                   /* au-dessus du cadre texte */
  }

  /* --- miroir : l'image a gauche --- */
  .duo--image-gauche{
    grid-template-columns:minmax(0,1fr) minmax(0,var(--duo-texte));
  }
  .duo--image-gauche .duo__texte{
    grid-column:2;
    padding-right:var(--duo-pad);
    padding-left:calc(var(--duo-chevauchement) + var(--duo-pad));
  }
  .duo--image-gauche .duo__image{
    grid-column:1;
    margin-left:0;
    margin-right:calc(var(--duo-chevauchement) * -1);
  }
}

/* bloc 225 : en mobile, les images verticales de composition (robots de la
   section Probleme, portrait piano de Qui suis-je) ne prennent plus toute la
   largeur : plafond --image-deux-col-mobile, centrees. Le desktop ne change pas
   (les regles du chevauchement vivent au-dela de 900px). */
:root{--image-deux-col-mobile:300px}
@media (max-width:768px){
  .duo__image{width:100%; max-width:var(--image-deux-col-mobile); margin-inline:auto}
}
/* bloc 236 : en mobile, section Probleme, l'image robots passe ENTRE le
   titre et le cadre texte (order, la meme balise). Les deux espacements
   sont des variables : le titre rend sa marge basse et la grille porte
   titre -> image (margin-top) et image -> texte (gap). Desktop intact :
   tout vit sous 768px. */
@media (max-width:768px){
  #probleme .duo{--duo-titre-image:36px; --duo-image-texte:36px; margin-top:var(--duo-titre-image); gap:var(--duo-image-texte)}
  #probleme .titre-section{margin-bottom:0}
  #probleme .duo__image{order:-1}
}

/* le bloc Resultat suit les colonnes avec une respiration REDUITE : une
   pause, pas une coupure. Colonne de prose centree, texte a gauche. */
.prose--suite{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* -------------------------------- cartes -------------------------------- */
.cartes{display:grid; gap:clamp(1rem,2vw,1.5rem); margin-top:var(--space-md)}
@media (min-width:820px){
  .cartes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Pile : une carte par rangee, centree dans la page. Sections 8 et 9.
   Une seule declaration pour mobile et desktop, la colonne unique etant
   deja le comportement naturel de la grille.
   --lien : la hauteur de l'ecart entre deux cartes. C'est exactement la
   longueur du trait de continuite, les deux lisent la meme variable. */
.pile{
  --lien:clamp(2rem,3.6vw,3rem);
  display:grid; gap:var(--lien);
  margin-top:var(--space-md);
  justify-items:center;
}
/* texte de lecture aligne a gauche, numero et titre centres */
.pile > .carte{
  position:relative;
  width:100%; max-width:var(--carte-largeur);
  text-align:left;
}
.pile .carte__num,
.pile .carte__titre{text-align:center}

/* --- trait de continuite entre deux cartes d'une meme pile -------------
   Il occupe exactement l'ecart, du bas d'une carte au haut de la
   suivante. Jamais entre deux sections : la derniere carte de chaque
   pile n'en porte pas. Il se dessine du haut vers le bas quand sa carte
   entre a l'ecran, en scaleY seul.
   ---------------------------------------------------------------------- */
.pile > .carte:not(:last-child)::after{
  content:""; position:absolute;
  left:50%; top:100%;
  width:1px; height:var(--lien);
  transform:translateX(-50%) scaleY(0);
  transform-origin:top center;
  transition:transform .7s ease .25s;
  pointer-events:none;
}
.js .pile > .carte.visible:not(:last-child)::after,
html:not(.js) .pile > .carte:not(:last-child)::after{
  transform:translateX(-50%) scaleY(1);
}
/* variante A : blanche discrete, registre hairline */
html[data-trait="blanc"] .pile > .carte:not(:last-child)::after{
  width:1px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.22) 0%, rgba(255,255,255,.22) 72%, rgba(255,255,255,0) 100%);
}
/* variante B : neon magenta, lueur douce et contenue */
html[data-trait="neon"] .pile > .carte:not(:last-child)::after{
  width:2px;
  background:linear-gradient(to bottom,
    var(--accent-vif) 0%, var(--accent-vif) 68%, rgba(var(--accent-vif-rgb),0) 100%);
  box-shadow:0 0 8px rgba(var(--accent-vif-rgb),.55), 0 0 20px rgba(var(--accent-vif-rgb),.28);
}
/* [site] recette commune des box : noir opaque, filet blanc, aucune ombre */
.carte{
  background-color:#000000;
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:clamp(1.5rem,3vw,2.25rem);
  transition:border-color .3s ease;
}
.carte:hover,.carte:focus-within{border-color:var(--hairline-hi)}

/* --- OUVERTURE D'ACTE ---------------------------------------------------
   L'atmosphere de la section est le sous-arbre du hero, DUPLIQUE tel quel :
   memes noeuds, memes classes, donc exactement le meme CSS. Ce bloc
   n'ajoute AUCUNE regle de rendu : il ne fait que poser le scope et les
   deux seules differences autorisees.

     1. la hauteur du conteneur    --h-ciel, --coupole-fleche
     2. la seed des etoiles        (dans le balisage)

   Le scope est RETOURNE : au hero on regarde la voute par en dessous, ici
   on regarde le dome par au-dessus. Etoiles, halos et comete vivent donc
   sous la courbe, exactement comme ils vivent au-dessus au hero.
   ------------------------------------------------------------------------ */
.section--acte{
  /* L'ARC EST EN TETE DE SECTION, au-dessus du titre. Deux variables le
     reglent : sa position verticale dans la section, et l'ecart minimal
     qu'il garde avec le haut du titre. Le padding haut se DERIVE des
     deux, sans jamais descendre sous le rythme inter-sections : la
     jonction avec la section precedente ne se creuse donc pas. */
  --coupole-position-y:0px;
  --coupole-ecart-titre:20px;   /* bloc 159 : 48 -> 20, l'arc reste au-dessus */
  --coupole-fleche:96px;
  --h-ciel:500px;
  /* bloc 159 : le plancher passe du rythme large au rythme courant.
     Haut de section -> titre : 150px -> 116px, soit 22,7 % de moins. */
  padding-top:max(var(--vide-section),
    calc(var(--coupole-position-y) + var(--coupole-fleche) + var(--coupole-ecart-titre)));
}
/* bloc 186 : la jonction avant la section prix est une rupture d'acte, elle
   ouvre au rythme large. La section Competences garde son reglage du 159. */
/* bloc 202 : sur la section prix, l'effet demarre 50px sous le bord haut
   (le CTA de la section precedente le touchait), et le titre remonte :
   ecart arc -> titre 53 -> 40 desktop, 31 -> 23 mobile. Le padding se
   derive des trois variables du composant. */
#prix.section--acte{
  --coupole-position-y:50px;
  --coupole-ecart-titre:40px;
  padding-top:max(var(--vide-section-large),
    calc(var(--coupole-position-y) + var(--coupole-fleche) + var(--coupole-ecart-titre)));
}
@media (max-width:768px){
  #prix.section--acte{--coupole-position-y:36px; --coupole-ecart-titre:24px}
}
/* le titre du prix garde son echo : il vit au-dessus du decor */
#prix .titre-echo{z-index:0}
/* GARDE-FOU. Deux couches, strictement separees :
     .acte  = le DECOR. C'est la seule chose que le retournement touche.
              Elle est absolue, sous le contenu, et ne recoit aucun clic.
     .wrap  = le CONTENU. Il vit au-dessus, sans aucune transform heritee.
   La regle .section--acte > .wrap ci-dessous le garantit meme si une
   transform decorative devait un jour remonter d'un cran : un titre
   retourne s'est deja produit, quand le sous-arbre duplique s'est
   retrouve non ferme et a englobe le contenu. */
.acte{
  position:absolute; left:0; right:0;
  top:var(--coupole-position-y);
  height:var(--h-ciel);
  z-index:-1; pointer-events:none;
  transform:scaleY(-1);
  /* La couche atmosphere s'ARRETE avant la carte : son conteneur est
     borne, il ne s'etend plus sous elle. Le reste de la section est le
     noir de la page. overflow:hidden borne aussi la lueur laterale de
     l'ombre interne du halo, qui debordait sur le bord droit. */
  overflow:hidden;
}
/* Espacement INTERNE : la carte et « Bonne nouvelle » vivent dans la meme
   section, ce vide n'est donc pas une jonction. Les tokens inter-sections
   ne s'appliquent qu'aux vraies frontieres, avant et apres l'ensemble. */
/* une seule source sur ce segment : la marge du titre et le padding
   herites de l'ancienne frontiere de section passent a zero */
.acte__suite{margin-top:var(--espace-acte-suite)}
.acte__suite > .titre-section{margin-top:0}
.acte__suite > :first-child{margin-top:0}
.section--acte > .wrap{
  position:relative; z-index:1;
  transform:none;
}
/* LE HALO, SOUDE A L'ARC ET EN DEGRADE.
   Regles RESTAUREES du commit a21bd46 (bloc 152), a l'identique : boite
   aux memes coins elliptiques que le clip du ciel, ombre INTERNE floutee
   en trois couches, epaisseur constante en pixels le long de la courbe.
   Portee relevee sur le hero : .halo--deep s'eteint a 68 % d'un rayon de
   750px, soit 510px ; a l'echelle du ciel de l'acte, 380px.
   Trois couches, memes opacites que le hero : .34 contre la ligne, .17
   a mi-distance, .05 en fin de course.

   UNE SEULE RETOUCHE (bloc 161) : le bord BAS de la boite. Une ombre
   interne rayonne depuis ses quatre bords ; celui d'en bas, decoupe par
   le clip en arc, dessinait une seconde coupole. La boite est prolongee
   de 600px sous le ciel (top:-600px dans le repere local, retourne) : ce
   bord et sa lueur sortent du ciel, le conteneur .acte les coupe la ou
   ils valent deja zero. Au-dessus, rien ne change : meme distance a la
   courbe, memes flancs, memes valeurs.
   ------------------------------------------------------------------------ */
.section--acte{
  --halo-portee:380px;      /* distance d'extinction, jusqu'au noir */
  --espace-acte-suite:56px;   /* carte -> titre Bonne nouvelle, source unique */
}
.acte__halo{
  position:absolute; inset:0;
  top:-600px;               /* la retouche du bloc 161, rien d'autre */
  border-bottom-left-radius:50% var(--coupole-fleche);
  border-bottom-right-radius:50% var(--coupole-fleche);
  box-shadow:
    inset 0 0 var(--halo-portee) rgba(var(--halo-1-rgb),.34),
    inset 0 0 calc(var(--halo-portee) * .52) rgba(var(--halo-1-rgb),.17),
    inset 0 0 calc(var(--halo-portee) * .22) rgba(var(--halo-1-rgb),.05);
}

@media (max-width:768px){
  .section--acte{--coupole-fleche:64px; --coupole-ecart-titre:14px; --h-ciel:380px}  /* 98px -> 78px */
}

/* --- carte a visuel haut, fondu vers le noir ---------------------------
   L'image occupe le haut de la carte et se DISSOUT dans son noir : le
   degrade est transparent sur le tiers haut et noir plein au bas de
   l'image, aucun bord ne peut donc apparaitre. Le padding haut de la
   carte vaut la hauteur de l'image : le texte commence exactement la ou
   le degrade est a son noir plein. Le badge est pose PAR-DESSUS l'image,
   au-dessus du fondu, a la meme marge que le texte.
   Reglages : --visuel-h, --visuel-fondu-debut, --visuel-cadrage.
   ------------------------------------------------------------------------ */
.carte--visuel{
  /* Hauteur de l'image. Calee pour que les QUATRE cartes tiennent dans la
     fourchette 55 a 65 % : la carte la plus chargee en texte porte 240px
     de contenu, il faut donc au moins 293px d'image pour que l'image y
     pese 55 %. La carte la plus courte monte alors a 59 %. */
  --visuel-h:295px;
  --visuel-fondu-debut:34%;     /* transparent jusque-la, puis extinction */
  --visuel-cadrage:50% 22%;     /* centre-haut */
  --visuel-zoom:1.05;           /* echelle au survol */
  --visuel-zoom-duree:700ms;    /* montee et retour */
  position:relative; overflow:hidden;
  /* hauteur stabilisee : la carte ne peut pas sauter au chargement */
  min-height:calc(var(--visuel-h) + 190px);
  padding-top:var(--visuel-h);
}
.carte__visuel{
  position:absolute; top:0; left:0; right:0;
  height:var(--visuel-h);
  z-index:0;
  /* clip strict : l image agrandie au survol ne peut pas depasser sous
     le fondu ni empieter sur la zone de texte */
  overflow:hidden;
  /* aplat d'attente, remplace par l'image des que le src est renseigne */
  background:linear-gradient(160deg,
    rgba(var(--accent-deep-rgb),.16) 0%,
    rgba(10,10,14,.96) 58%,
    rgba(var(--accent-neon-rgb),.07) 100%);
}
.carte__img{
  width:100%; height:100%;
  object-fit:cover; object-position:var(--visuel-cadrage);
  display:block;
  /* Zoom au survol de la CARTE entiere. transform seul : la couche est
     composee, rien n'est redessine. Le fondu vit sur ::after du meme
     conteneur, donc AU-DESSUS de l'image : la dissolution reste intacte
     pendant tout le mouvement, et ni le badge ni le texte ne bougent. */
  transform:scale(1);
  transition:transform var(--visuel-zoom-duree) cubic-bezier(.16,.84,.3,1);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .carte--visuel:hover .carte__img,
  .carte--visuel:focus-within .carte__img,
  .carte--module-visuel:hover .carte__img,
  .carte--module-visuel:focus-within .carte__img{transform:scale(var(--visuel-zoom))}
}
@media (prefers-reduced-motion:reduce){
  .carte__img{transition:none}
  .carte--visuel:hover .carte__img,
  .carte--module-visuel:hover .carte__img{transform:none}
}
.carte__visuel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--visuel-fondu-debut),
    rgba(0,0,0,.55) 68%,
    rgba(0,0,0,.88) 86%,
    #000000 100%);
}
/* tout le contenu passe au-dessus du visuel et de son fondu */
.carte--visuel > :not(.carte__visuel),
.carte--module-visuel > :not(.carte__visuel){position:relative; z-index:1}
/* le badge reste en haut a gauche, pose sur l'image */
.carte--visuel .module__pill{
  position:absolute; z-index:2;
  top:clamp(1.5rem,3vw,2.25rem); left:clamp(1.5rem,3vw,2.25rem);
  margin:0;
}
@media (max-width:768px){
  .carte--visuel{--visuel-h:190px; min-height:calc(var(--visuel-h) + 190px)}
}
.carte__num{
  font-family:var(--font-heading); font-size:.68rem; line-height:1.4;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-1);
  margin-bottom:.7rem;
}
.carte__titre{
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  line-height:1.45; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-1);
}
.carte p{color:var(--text-1)}
.carte__titre + p,.carte__intro,.module__pill + p{margin-top:1.15rem}
.carte p + p{margin-top:.7rem}
.carte--fondateur{border-color:rgba(var(--accent-solid-rgb),.34)}
.carte--fondateur:hover{border-color:rgba(var(--accent-solid-rgb),.55)}

/* --- appel a l'action en fin de section --------------------------------
   Pose sous la pile, jamais dans la pile : le trait de continuite relie
   les cartes entre elles et s'arrete a la derniere, il ne descend pas
   jusqu'au bouton. Respiration nette au-dessus et en dessous. */
.section__cta{
  display:flex; justify-content:center;
  margin-top:clamp(3rem,5vw,4.5rem);
}
/* bloc 157 : sous la FAQ, l'ecart dernier item -> bouton est une
   variable, cible 60 a 80px, affinable au chiffre */
#faq{--espace-faq-cta:70px}
.section__cta--faq{margin-top:var(--espace-faq-cta)}

/* --- LIGNE DE REALISATIONS ---------------------------------------------
   Une rangee de vignettes carrees juste au-dessus du bandeau de mots.
   Meme mecanique de boucle que lui : deux groupes identiques, translation
   de moitie, remplissage mesure a la largeur. Sens INVERSE, vitesse
   propre. Les deux forment un ensemble, d'ou le rythme resserre entre
   eux et le vide standard au-dessus.
   ------------------------------------------------------------------------ */
.ligne-real{
  /* hauteur de la ligne, et cote des tuiles. La vitesse LINEAIRE se
     conserve : 37,5 px/s. Un groupe fait 10 x (tuile + ecart), la duree
     suit donc la taille. */
  --tuile:320px;
  --tuile-ecart:10px;    /* gouttiere */
  --ligne-duree:88s;     /* 3300px de motif a 37,5 px/s */
  position:relative; width:100%;
  height:var(--tuile);
  overflow:hidden;
  /* le vide au-dessus est au registre standard ; en dessous, la ligne et
     le bandeau se soudent, registre interne */
  margin-top:var(--vide-section);
}
.ligne-real__piste{
  display:flex; width:max-content;
  animation:ligne-real-defile var(--ligne-duree) linear infinite;
}
/* sens INVERSE du bandeau de mots */
@keyframes ligne-real-defile{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.ligne-real--dort .ligne-real__piste{animation-play-state:paused}
.ligne-real__groupe{display:flex; align-items:center}
.ligne-real__tuile{
  flex:none;
  width:var(--tuile); height:var(--tuile);
  margin-right:var(--tuile-ecart);
  border:1px solid var(--hairline);
  border-radius:0;      /* coins droits */
  overflow:hidden;
  background-color:#0a0a0d;
}
/* recadre PAR LE HAUT : le haut de la page est conserve */
.ligne-real__tuile img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 0;
}
/* la ligne et le bandeau se collent */
.ligne-real + .bandeau{margin-top:var(--space-sm)}
@media (max-width:768px){
  .ligne-real{--tuile:200px; --tuile-ecart:8px; --ligne-duree:55s}
}
@media (prefers-reduced-motion:reduce){
  .ligne-real__piste{animation:none}
}

/* --- BANDEAU DEFILANT, composant ---------------------------------------
   Transpose de site-jl, composant .ribbon (css/style.css:1428-1515) :
     verre        fond rgba(.5) + backdrop-blur 16px, repli sans blur
     filets       1px haut et bas, couleur des bordures
     ombre        0 8px 32px rgba(0,0,0,.45)
     hauteur      56px, 40px sous 700px
     duree        30s, lineaire, infinie
     mot          heading, 400, .8rem, majuscules, .04em, nowrap,
                  padding-inline 1rem ; mobile .7rem / .08em / .7rem
     separateur   losange U+2726, couleur d'accent, .75rem
     boucle       deux groupes identiques, translation -50 %
   Ecarts assumes : le fond du site est teinte violet (10,6,16), ici il
   est noir ; l'accent du losange suit les tokens bleus ; la famille des
   mots est celle des micro-labels de cette page, Michroma n'existant pas
   ici. Le composant est reutilisable : d'autres separations pourront en
   recevoir.
   ------------------------------------------------------------------------ */
.bandeau{
  /* [site] --ribbon-height valait 56px, --ribbon-word un padding de 1rem.
     Le bandeau respire d'un cran : la bande gagne en hauteur, l'ecart de
     chaque mot a son separateur passe a 1,5 fois. */
  --bandeau-hauteur:68px;
  --bandeau-air:1.5rem;         /* 1rem sur le site, x1,5 ici */
  --bandeau-duree:30s;          /* [site] --ribbon-duration */
  position:relative; width:100%;
  display:flex; align-items:center;
  height:var(--bandeau-hauteur);
  overflow:hidden;
  background-color:rgba(0,0,0,.85);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  /* la respiration de part et d'autre reste celle du bloc 92 */
  margin-top:var(--vide-section);
}
@supports (backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px)){
  .bandeau{
    background-color:rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
}
.bandeau__piste{
  display:flex; width:max-content;
  animation:bandeau-defile var(--bandeau-duree) linear infinite;
}
@keyframes bandeau-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* hors champ, rien a animer */
.bandeau--dort .bandeau__piste{animation-play-state:paused}

/* --- BANDEAU DE MOTS GEANTS (bloc 176) ----------------------------------
   Repris du site Digital Art Funnel : .list-wrap / .list / .single-name
   deviennent .defile / .defile__liste / .defile__mot. Grille en colonnes
   de largeur max-content, deux listes identiques, chacune animee de 0 a
   -100 % de sa propre largeur : la boucle n'a pas de raccord. Ajouts par
   rapport a la source : le conteneur masque le debordement (aucune barre
   horizontale), le mouvement reduit neutralise l'animation.
   Poppins 800 n'est pas dans le systeme (seule la 700 est chargee) : la
   graisse est 700, a monter si la 800 entre dans fonts/.
   ------------------------------------------------------------------------ */
.defile{
  --defile-taille:3.5vw;      /* bloc 178 : 8vw a la source, cible 3 a 4vw */
  --defile-ecart:1.75vw;      /* le gap suit, moitie de la taille comme a la source */
  --defile-hauteur:0px;       /* hauteur minimale de bande, options ci-dessous */
  --defile-pad:0px;           /* padding vertical de bande */
  --defile-duree:50s;         /* [source] --duration: 50s */
  --defile-contour:1.1px;     /* bloc 179 : 2px a la source, cible 1 a 1,25 */
  --defile-diamant:.42em;     /* bloc 179 : taille du diamant, relative au texte */
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content; align-items:center;
  width:100%; overflow:hidden;
  min-height:var(--defile-hauteur); padding:var(--defile-pad) 0;
  /* bloc 181 : contact direct avec la section du dessus, son degrade bleu
     vient mourir sur le filet haut du bandeau. Aucun token ici. */
  margin-top:0;
}
/* bloc 180 : jonctions symetriques autour du bandeau, une seule source
   chacune, le token courant. Au-dessus : la marge du bandeau. En dessous :
   le padding de la section finale, ramene du rythme large au rythme
   courant quand le bandeau la precede. */
.defile + .section--final,
.defile + #bonus{padding-top:var(--vide-section)}
/* bloc 182 : de l'air avant le bandeau, par le padding de la section du
   dessus. Un padding vit DANS la section : son degrade bleu couvre cet
   espace et meurt sur le filet du bandeau. Seule source de la jonction. */
#cadre,
.section--apres-bande{--espace-avant-bandeau:90px; padding-bottom:var(--espace-avant-bandeau); margin-bottom:0}  /* bloc 207 : meme recette avant le bandeau BONUS */
/* Bascule du bloc 178, ?defile=bleu ou ?defile=noir (defaut). Rien n'est
   memorise, la variante ecartee disparait des le verdict rendu. */
html[data-defile="bleu"] .defile{
  --defile-hauteur:0px; --defile-pad:1.4vw;
  background:var(--accent-solid);
}
html[data-defile="noir"] .defile{
  /* traitement releve sur .bandeau : fond noir a 85 %, filets haut et bas,
     ombre portee, hauteur de bande proportionnee au bandeau existant */
  --defile-pad:1.1vw;
  background-color:rgba(0,0,0,.85);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}
.defile__liste{
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content; align-items:center;
  gap:var(--defile-ecart); padding-right:var(--defile-ecart);
  color:#ffffff; font-family:var(--font-display); font-weight:700; font-size:var(--defile-taille); line-height:1;
  animation:defile-scroll var(--defile-duree) linear infinite;
  will-change:transform;
}
.defile__mot{white-space:nowrap}
.defile__mot--contour{
  -webkit-text-stroke-width:var(--defile-contour);
  -webkit-text-stroke-color:#ffffff;
  color:transparent;
}
/* le diamant du bandeau existant (.bandeau__sep) : meme glyphe U+2726,
   meme pile de polices, meme bleu, taille relative au texte du bandeau */
.defile__sep{
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",system-ui,sans-serif;
  color:var(--accent-neon); font-size:var(--defile-diamant); line-height:1;
  -webkit-text-stroke:0;
}
@keyframes defile-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
.defile--dort .defile__liste{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .defile__liste{animation:none}
}
.bandeau__groupe{display:flex; align-items:center}
.bandeau__mot{
  font-family:var(--font-heading); font-weight:400;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-1); white-space:nowrap;
  padding-inline:var(--bandeau-air);
}
/* [site] le losange U+2726 n'existe pas dans les familles de titrage :
   pile systeme explicite, pour eviter toute substitution hasardeuse */
.bandeau__sep{
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",system-ui,sans-serif;
  color:var(--accent-neon);
  font-size:.75rem; line-height:1;
}
@media (max-width:700px){
  .bandeau{--bandeau-hauteur:50px; --bandeau-air:1.05rem}
  .bandeau__mot{font-size:.7rem; letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  /* fige et reste lisible : la piste s'arrete a son origine */
  .bandeau__piste{animation:none}
}

/* --------------------------------- listes ------------------------------- */
.liste{list-style:none; margin-top:1.1rem; display:grid; gap:.6rem}
.liste li{
  display:flex; align-items:flex-start; gap:.7rem;
  color:var(--text-1); line-height:1.6;
}
/* Une seule coche pour toute la page. Le flex du li donne le retrait
   suspendu : les lignes suivantes s'alignent sur le texte, jamais sous
   la coche. */
/* La coche est peinte par un MASQUE et non par une image : une url de
   donnees ne peut pas lire une variable CSS, la couleur y serait figee et
   ne suivrait pas la gamme d'accent. */
.liste li[hidden]{display:none}
.liste__vip::before{background-color:var(--orange-vip) !important}
.liste li::before{
  content:""; flex:none;
  width:1.05em; height:1.05em; margin-top:.28em;
  background-color:var(--accent-vif);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}

/* -------------------------- schema section 6 ---------------------------- */
.schema{
  margin:var(--space-lg) auto 0; max-width:820px;
  border:1px solid var(--hairline); border-radius:var(--radius-card);
  background-color:#000000;
  padding:clamp(1rem,2.5vw,1.75rem);
  transition:border-color .3s ease;
}
.schema:hover{border-color:var(--hairline-hi)}
.schema svg{width:100%; height:auto}
/* bloc 206 : la preuve Google dans le meme cadre. Le ratio de l'image fixe
   la hauteur (variable), le cadre garde son hairline, son radius et son
   padding ; l'image a ses propres coins arrondis pour rester nette dans le
   cadre. Le schema SVG et ses animations sont en reserve. */
/* bloc 220 : l'image article IA vit nue sur le noir de la section, sans
   cadre. Largeur en variable (depart : le conteneur des cartes module),
   fondu peripherique optionnel si une couture apparaissait. */
.preuve-nue{
  --preuve-largeur:var(--container);   /* 1100px, affinable */
  --preuve-fondu-bord:0px;             /* 0 = aucun fondu peripherique */
  /* bloc 223 : ecart paragraphe -> image, seule source. Le montage porte
     une marge transparente en tete (102px sur 1080, soit 9,4 % de sa
     hauteur) : elle est retranchee ici pour que l'ecart VISUEL vaille la
     variable, quelle que soit la largeur. */
  --preuve-ecart:60px;
  width:100%; max-width:var(--preuve-largeur);
  margin:calc(var(--preuve-ecart) - (100% * 9 / 16 * .0944)) auto 0;
}
.preuve-nue img{display:block; width:100%; height:auto; aspect-ratio:1920 / 1080}
/* bloc 206 : les regles du schema SVG (barres, rails, jetons, noyau) sont
   en reserve dans images/sources/reserve/schema-valeur-svg.html */

/* --------------------- bascule Normal / VIP ---------------------------- */
/* Ecart entre ce qui precede la bascule et la bascule elle-meme. Il etait
   nul dans la section finale : la prose ne laisse pas de marge basse, et
   la bascule n'en portait pas en haut. Une seule variable le regle. */
.bascule{
  --bascule-air:2.5rem;
  position:relative; display:flex; width:max-content;
  margin:var(--bascule-air) auto var(--space-md);
  padding:5px;
  border:1px solid var(--hairline); border-radius:var(--radius-card);
  background-color:#000000;
  transition:border-color .3s ease;
}
/* Section 10 : le titre de section porte deja sa propre marge basse de
   32px. La variable s'y remet a zero pour ne pas s'y ajouter : cet ecart
   n'est pas touche par ce bloc. */
#prix .bascule{--bascule-air:0rem}
.bascule:hover{border-color:var(--hairline-hi)}
.bascule__curseur{
  position:absolute; top:5px; left:5px;
  width:calc(50% - 5px); height:calc(100% - 10px);
  /* rayon interne un cran sous celui du cadre, pour l'epouser */
  border-radius:11px;
  background-color:var(--accent-solid); box-shadow:var(--btn-lueur);
  transition:transform 350ms ease;
}
html[data-formule="vip"] .bascule__curseur{transform:translateX(100%)}
.bascule__opt{
  position:relative; z-index:1; flex:1 1 0; min-width:8.5rem;
  padding:.72rem 1.2rem; cursor:pointer;
  font-family:var(--font-heading); font-size:.7rem; line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-1);
}
.bascule__opt:focus-visible{border-radius:11px}
/* bloc 190 : touche orange sur le libelle VIP, echo des badges. Retirable d un mot. */
.bascule__opt.bascule__opt--vip{color:var(--orange-vip)}
.bascule__opt.bascule__opt--vip[aria-pressed="true"]{color:#ffffff}

/* ------------------------- offre, section 10 ---------------------------- */
.offre{
  --offre-shine-duree:1.1s;       /* bloc 192 : duree d'une traversee */
  --offre-shine-pause:3.3s;       /* bloc 196 : pause entre deux passages */
  --offre-shine-intensite:.26;
  /* Le cycle vaut traversee + pause. Les keyframes placent la fin de la
     traversee a 25 % du cycle : avec 1,1 + 3,3 le compte est exact. Si
     l'une des deux valeurs change, ce pourcentage se recale. */
  --offre-shine-cycle:calc(var(--offre-shine-duree) + var(--offre-shine-pause));
  --offre-vip-portee:34px;        /* lueur de l'etat VIP, famille du bloc 189 */
  --offre-vip-opacite:.28;
  position:relative; overflow:hidden;
  max-width:640px; margin-inline:auto; text-align:center;
  background-color:#000000; border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:clamp(1.75rem,4vw,2.75rem);
  transition:border-color .3s ease, box-shadow .45s ease;
}
/* le shine : une bande diagonale qui traverse la carte au passage en VIP.
   L'animation ne demarre que quand le selecteur commence a correspondre,
   donc au basculement, jamais au chargement (etat Normal par defaut). */
.offre::after{
  content:""; position:absolute; inset:-40% -60%; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,var(--offre-shine-intensite)) 50%, transparent 56%);
  transform:translateX(-100%);
}
html[data-formule="vip"] .offre{
  box-shadow:0 0 var(--offre-vip-portee) rgba(255,106,0,var(--offre-vip-opacite));
  border-color:rgba(255,106,0,.35);
}
html[data-formule="vip"] .offre::after{animation:offre-shine var(--offre-shine-cycle) linear infinite}
/* hors champ, rien a animer */
.offre--dort::after{animation-play-state:paused}
@keyframes offre-shine{
  0%{opacity:1; transform:translateX(-100%)}
  25%{opacity:1; transform:translateX(100%)}
  25.01%,100%{opacity:0; transform:translateX(100%)}
}
@media (prefers-reduced-motion:reduce){
  html[data-formule="vip"] .offre::after{animation:none}
}
.offre:hover{border-color:var(--hairline-hi)}
/* La note garde sa place dans les deux etats : elle disparait a la vue
   sans liberer sa hauteur, le bouton en dessous ne bouge donc jamais. */
.offre__prix{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.75rem,4.6vw,2.5rem); line-height:1.2; letter-spacing:.01em;
  color:var(--text-1);
}
/* Les deux phrases se superposent dans la meme cellule de grille : la
   hauteur du bloc vaut celle de la plus longue, le bouton ne bouge donc
   jamais d'un etat a l'autre. */
.offre__etat{display:grid; margin-top:1.5rem}
.offre__etat > p{
  grid-area:1/1;
  max-width:56ch; margin-inline:auto; text-align:center;
  color:var(--text-1);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
html[data-formule="normal"] .offre__etat > [data-etat="normal"],
html[data-formule="vip"] .offre__etat > [data-etat="vip"]{
  opacity:1; visibility:visible;
  transition:opacity .25s ease, visibility 0s;
}

.offre__action{margin-top:2.1rem}
.offre__mention{
  margin-top:1.05rem;
  font-family:var(--font-heading); font-size:.66rem; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-1);
}
.offre__intitule{
  margin-top:2.1rem; padding-top:1.6rem; border-top:1px solid var(--hairline);
  font-family:var(--font-heading); font-size:.7rem; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-1);
}
.offre .liste{text-align:left; margin-top:1.2rem}

/* Les deux lignes bonus : leur hauteur s'anime de 0fr a 1fr, le bouton
   en dessous glisse au lieu de sauter. Le fondu suit la meme duree. */
/* minmax(0,0fr) et non 0fr seul : une piste dont la somme des facteurs
   flex est inferieure a 1 retombe sur sa taille automatique, le bloc
   ferme gardait donc 19px de hauteur. */

/* Bouton de paiement en attente de sa constante (bon de commande). Il reste le
   composant bouton COMPLET : aplat plein, lueur, libelle, icone. Seul le
   comportement change, jamais l'apparence. Le curseur reste celui d'un
   cliquable, comme la facade VSL a constante vide. */
.btn--attente{cursor:pointer}

/* ------------------------- portrait, section 11 ------------------------- */
.portrait{display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:start; margin-top:var(--space-md)}
/* La colonne image monte a 540px. Le conteneur de la section s'elargit
   d'autant, pour que la colonne texte garde une mesure confortable. */
#qui .wrap{max-width:1180px}
/* bloc 231 : en mobile, de l'air entre les etiquettes de competences et
   l'encoche de la section make money. UNE source : le padding-bottom de la
   section du dessus (recette 182), en variable. Desktop : rien (0). */
#qui{--espace-avant-encoche:0px; padding-bottom:var(--espace-avant-encoche)}
@media (max-width:768px){
  #qui{--espace-avant-encoche:70px}
}
@media (min-width:900px){
  .portrait{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
}
.portrait__photo{
  border:1px solid var(--hairline); border-radius:var(--radius-card);
  overflow:hidden; background-color:#000000;
  transition:border-color .3s ease;
}
.portrait__photo:hover{border-color:var(--hairline-hi)}
/* La photo REMPLIT son cadre, bord a bord.
   Cause du defaut corrige ici : cette regle imposait a l'image son propre
   ratio 4/5 et une hauteur auto, alors que le cadre est passe en 3/4 au
   bloc 136. L'image calculait donc 637,5px de haut dans un cadre de 683,
   d'ou 23px de noir en haut et 23 en bas.
   --photo-piano-position regle le point de cadrage : la tete doit rester
   degagee apres le passage en cover. */
.portrait__photo{--photo-piano-position:50% 28%}
/* Le cadre etire son contenu : sans cela, `place-items:center` laissait
   l'image a son ratio naturel et une hauteur de 100 % ne s'appliquait
   pas. C'etait la cause du vide de 23px en haut et en bas. */
.portrait__photo{place-items:stretch}
.portrait__photo img{
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; object-position:var(--photo-piano-position);
  border-radius:inherit; margin:0; display:block;
}
.portrait__texte p{color:var(--text-1)}
.portrait__texte p + p{margin-top:var(--space-sm)}
.portrait__texte .liste{margin-top:1rem}
/* --- les 3 competences, hors du cadre ----------------------------------
   Traitement repris du bloc A propos de site-jl, composant .about-tag,
   valeurs relevees telles quelles :
     intro          margin-top 30px
     liste          flex, wrap, gap 10px, sans puce ni retrait
     pill           padding 6px 14px, radius pill, 14px, lh 1.4
                    fond   rgba(accent, .10)
                    filet  1px rgba(accent, .35)
                    texte  #ffffff
                    survol fond .18, filet .55, transition 250ms
     mobile         padding 5px 12px, 12px, gap 8px
   SEUL ECART : la couleur. Le site ecrit #db00ff en dur, avec la note
   qu'une variable ne passe pas dans rgba(). Ici les deux alphas derivent
   du triplet --accent-neon-rgb : c'est le meme accent, en bleu Monetika.
   Le composant est ici CENTRE, le site l'alignait au bord gauche du
   cadre. C'est la seule autre difference, et elle vient du verdict.
   ------------------------------------------------------------------------ */
.competences{text-align:center; margin-top:var(--space-md)}
.competences__intro{
  margin-top:30px;                          /* [site] .about-tags-intro */
  color:var(--text-1);
}
.competences__liste{
  list-style:none; padding:0;
  margin:var(--space-sm) 0 0;               /* [site] .about-tags */
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.competence{
  padding:6px 14px;                         /* [site] .about-tag */
  border-radius:var(--radius-pill);
  font-size:14px; line-height:1.4;
  background-color:rgba(var(--accent-neon-rgb),.10);
  border:1px solid rgba(var(--accent-neon-rgb),.35);
  color:#ffffff;
  transition:background-color 250ms ease, border-color 250ms ease;
}
.competence:hover{
  background-color:rgba(var(--accent-neon-rgb),.18);
  border-color:rgba(var(--accent-neon-rgb),.55);
}
@media (max-width:768px){
  .competence{padding:5px 12px; font-size:12px}
  .competences__liste{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .competence{transition:none}
}

/* -------------------------- final, section 13 --------------------------- */
.section--final{padding-bottom:var(--vide-section)}  /* bloc 197 : le filet d'entree de la FAQ demande de l'air au-dessus, le token courant */
.final__detail{
  max-width:640px; margin:0 auto 1.9rem; text-align:center;
  color:var(--text-1);
}

/* ------------------------------ FAQ, 14 --------------------------------- */
.faq{display:flex; flex-direction:column; gap:.6rem; margin-top:var(--space-md)}
.faq__item{
  background-color:#000000; border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  transition:border-color .3s ease;
}
.faq__item:hover,.faq__item:focus-within{border-color:var(--hairline-hi)}
.faq__entete{margin:0; font:inherit; text-transform:none}
.faq__bouton{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  width:100%; padding:1.15rem clamp(1.1rem,2.5vw,1.6rem);
  text-align:left; cursor:pointer; color:var(--text-1);
}
.faq__q{
  font-family:var(--font-body); font-weight:500; font-size:1rem; line-height:1.5;
}
.faq__signe{position:relative; flex:none; width:16px; height:16px}
.faq__signe::before,
.faq__signe::after{
  content:""; position:absolute; left:0; top:50%;
  width:16px; height:1.5px; border-radius:1px;
  background-color:var(--accent-vif);
}
.faq__signe::before{transform:translateY(-50%)}
.faq__signe::after{transform:translateY(-50%) rotate(90deg); transition:transform 350ms ease}
.faq__bouton[aria-expanded="true"] .faq__signe::after{transform:translateY(-50%) rotate(0deg)}
.faq__signe::after{transition:transform .32s ease-out}
/* Deploiement par grid-template-rows : de 0fr a 1fr, la hauteur s'anime
   sans jamais connaitre de valeur en dur, donc a vitesse egale a
   l'ouverture comme a la fermeture. Le padding vit sur le conteneur
   interne, il ne saute donc a aucun moment. */
.faq__panneau{
  display:grid; grid-template-rows:minmax(0,0fr);
  transition:grid-template-rows .32s ease-out;
}
.faq__interieur{
  overflow:hidden; min-height:0;
  opacity:0; visibility:hidden;
  transition:opacity .32s ease-out, visibility 0s linear .32s;
}
.faq__item.est-ouvert .faq__panneau{grid-template-rows:minmax(0,1fr)}
.faq__item.est-ouvert .faq__interieur{
  opacity:1; visibility:visible;
  transition:opacity .32s ease-out, visibility 0s;
}
/* Les reponses descendent d'un registre : --fs-small au lieu du corps
   courant. Le padding se resserre en proportion pour garder l'air juste. */
.faq__interieur p{
  padding:0 clamp(1.1rem,2.5vw,1.6rem) 1.25rem;
  font-size:var(--fs-small); line-height:1.62;
  color:var(--text-1);
}
/* bloc 212 : le mailto de la reponse garantie, souligne comme les liens du texte */
.faq__interieur a{text-decoration:underline; text-decoration-thickness:var(--souligne-trait); text-underline-offset:.16em}
.faq__interieur a:hover{text-decoration-thickness:var(--souligne-trait-actif)}

/* ------------------------- responsive des sections ---------------------- */
@media (max-width:699.98px){
  /* [site] echo moins ample : a 2,05 il serait rogne des deux cotes */
  .titre-echo{font-size:1.45em}
}
@media (max-width:768px){
  .titre-section{--titre-echo-remonte:14px}
  .lueur{width:min(150vw,760px)}
  .schema{padding:.85rem}
  .bascule__opt{min-width:7.2rem; font-size:.66rem; letter-spacing:.1em}
}

/* --------------------------- mouvement reduit --------------------------- */
@media (prefers-reduced-motion:reduce){
  .pile > .carte:not(:last-child)::after{
    transform:translateX(-50%) scaleY(1); transition:none;
  }
  .bascule__curseur,.faq__signe::after,.js .faq__panneau{transition:none}
  .carte,.faq__item,.offre,.schema,.portrait__photo{transition:none}
}


/* =========================================================================
   8b. FOND DE REALISATIONS INCLINE (bloc 183)
   Une seule image composite : les 39 captures en vignettes (montage :
   vignette 380 x 760, gouttiere 80, valeurs 2x), inclinees a 45 degres, montage surdimensionne pour qu'aucun coin ne soit
   vide. Statique, faible opacite, posee sur le noir de la page ; un voile
   sombre optionnel par-dessus. Le copy vit dans le cadre noir du systeme.
   ========================================================================= */
.section--fond-mur{
  --fond-mur-opacite:.15;        /* depart .12 a .18 */
  --fond-mur-voile:0;            /* voile noir par-dessus, 0 a 1 */
  --fond-mur-taille:100%;        /* taille de la nappe, en % de la largeur */
  --fond-mur-fin:478px;          /* bloc 185 : fin du fondu, calee sur le haut du titre « En quoi consiste ce metier ? » */
  position:relative; isolation:isolate;
}
.section--fond-mur::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("images/fonds/mur-incline-v2.webp") center top / var(--fond-mur-taille) auto repeat;
  opacity:var(--fond-mur-opacite);
  /* bloc 185 : fondu vertical, plein en haut, eteint a la hauteur du titre,
     noir pur de la page en dessous */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, transparent var(--fond-mur-fin));
  mask-image:linear-gradient(to bottom, #000 0, transparent var(--fond-mur-fin));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
@media (max-width:768px){
  .section--fond-mur{--fond-mur-fin:483px}
}
.section--fond-mur::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,var(--fond-mur-voile));
}
.carte--sur-fond{--cadre-pad:60px; width:100%; max-width:var(--carte-largeur); margin-inline:auto; padding:var(--cadre-pad)}  /* blocs 187 et 194 : meme largeur que les cartes module, padding 60 */
@media (max-width:768px){
  .carte--sur-fond{--cadre-pad:28px}  /* proposition mobile, a trancher : 60px laisserait 33 % de la carte au texte */
}
.carte--sur-fond .prose{margin-inline:auto}
/* bloc 213 : la preuve Anthropic dans le cadre 200K, sous le dernier
   paragraphe, pleine largeur interne. Ecart, radius et filet en variables ;
   le filet est une proposition. */
/* bloc 218 : la preuve Anthropic en TETE du cadre, la recette des cartes
   module : image pleine largeur, bord a bord, dans le radius haut, fondu
   en bas vers le noir, le texte dessous. Le titre souligne et la
   fourchette entouree vivent au-dessus de --preuve-fondu-debut. */
.carte--sur-fond{overflow:hidden}
.carte--sur-fond .preuve{
  --preuve-h:330px;                 /* hauteur de la zone image */
  --preuve-fondu-debut:60%;         /* debut du fondu, sous la fourchette */
  --preuve-ecart:1.6rem;            /* image -> texte */
  position:relative; height:var(--preuve-h); overflow:hidden;
  margin:calc(-1 * var(--cadre-pad)) calc(-1 * var(--cadre-pad)) var(--preuve-ecart);
}
.carte--sur-fond .preuve img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.carte--sur-fond .preuve::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) var(--preuve-fondu-debut), rgba(0,0,0,.55) calc(var(--preuve-fondu-debut) + 16%), rgba(0,0,0,.88) 90%, #000000 100%);
}
@media (max-width:768px){
  .carte--sur-fond .preuve{--preuve-h:230px}
}


/* =========================================================================
   9. FOOTER
   Transpose de site-jl : section 13, l'astre couche et les quatre colonnes.
   Ecart assume : le site colore ses liens en magenta au survol, ici le
   texte reste blanc et c'est le soulignement magenta qui s'allume.
   ========================================================================= */

/* --- l'astre couche -----------------------------------------------------
   Boite de hauteur nulle : son bord bas est exactement le border-top du
   footer. bottom:0 plus translateY(50%) pose donc le centre de la lueur
   pile sur la ligne d'horizon, sans connaitre la hauteur de quoi que ce
   soit. Aucun masque : c'est le fond noir opaque du footer, peint
   par-dessus, qui coupe la moitie basse. [site] .cta-halo
   ------------------------------------------------------------------------ */
/* z-index NEGATIF, et c'est la correction du bug de recouvrement : depuis
   que .section porte content-visibility:auto, chaque section applique
   `contain: layout style paint` et devient donc un contexte d'empilement.
   Le z-index:1 du .wrap ne vaut plus que DANS sa section ; l'astre, plus
   loin dans le DOM et a z-index:0, passait par-dessus la FAQ entiere.
   Pose sous toutes les sections, il ne peut plus recouvrir aucun contenu :
   le noir opaque des cadres le masque, il ne se voit qu'autour d'eux. */
:root{--astre-largeur:min(3000px,340vw)}
.astre{position:relative; height:0; z-index:-1}  /* hors FAQ : ancien emplacement, regle conservee pour la lueur */
.astre__lueur{
  position:absolute; z-index:0;
  left:50%; bottom:0;
  /* La boite est plus grande que la lueur : les deux degrades atteignent
     l'opacite 0 a 70 % de leur rayon, il reste 30 % de marge morte avant
     le bord. Aucune frontiere ne peut apparaitre sur les cotes. */
  /* etendue horizontale portee a 1,76 fois l'ancienne (1700px) : le
     falloff reste le meme, il s'etale simplement plus loin */
  width:var(--astre-largeur);
  height:min(760px,116vw);
  transform:translate(-50%,50%);
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(42% 42% at 50% 50%,
      rgba(var(--accent-deep-rgb),.42), rgba(var(--accent-deep-rgb),.13) 38%, rgba(var(--accent-deep-rgb),0) 70%),
    radial-gradient(50% 46% at 50% 50%,
      rgba(var(--accent-deep-rgb),.34), rgba(var(--accent-deep-rgb),.10) 42%, rgba(var(--accent-deep-rgb),0) 70%);
}

/* --- le footer ---------------------------------------------------------- */
.site-footer{
  /* Couleur COMMUNE aux deux lignes : l'horizon (border-top) et le
     separateur au-dessus du copyright. Une seule declaration, elles ne
     peuvent donc pas diverger. [site] */
  --footer-ligne:rgba(255,255,255,.07);
  /* Le footer est exempte de la base globale de 18px : ses textes suivent
     une echelle qui lui est propre. [site] */
  --footer-texte:15px;
  --footer-petit:14px;
  position:relative; z-index:1;
  background-color:#000000;
  border-top:1px solid var(--footer-ligne);
  padding-block:clamp(2.5rem,5vw,4rem) var(--space-lg);
  color:var(--text-1);
}

/* le soleil affleure derriere la ligne : renfort central au niveau de la
   ligne elle-meme, juste assez pour suggerer l'astre [site] */
.site-footer::before{
  content:""; position:absolute;
  top:-1px; left:50%;
  width:min(900px,72%); height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  box-shadow:0 0 8px rgba(var(--accent-deep-rgb),.16);
}

.footer-grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--space-lg) var(--space-md);
}
@media (min-width:700px){
  /* premiere colonne plus large : elle porte le logo et la baseline [site] */
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}

.footer-logo{display:inline-block; text-decoration:none}
.footer-logo img{height:42px; width:auto}
.footer-baseline{
  margin-top:var(--space-sm);
  font-size:var(--footer-texte); font-style:italic;
  color:var(--text-1);
}
.footer-titre{
  font-family:var(--font-heading); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--text-1);
  margin-bottom:var(--space-sm);
}
.footer-liens{list-style:none; display:flex; flex-direction:column; gap:.7rem}
.footer-liens a{
  font-size:var(--footer-texte); line-height:1.45;
  color:var(--text-1);
}

/* Lien vers une page qui n'existe pas encore : ni cliquable, ni
   atteignable au clavier. Le libelle reste en blanc plein, c'est
   l'absence de soulignement magenta qui signale l'indisponibilite. */
.footer-liens a.est-inerte{
  text-decoration-line:none; cursor:default; pointer-events:none;
}

.footer-separateur{
  border:0; height:1px;
  margin-block:var(--space-lg);
  background-color:var(--footer-ligne);
}
.footer-bas{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-sm); text-align:center;
  font-size:var(--footer-petit); color:var(--text-1);
}
@media (min-width:700px){
  .footer-bas{flex-direction:row; justify-content:space-between; text-align:left}
}

/* --- footer compacte sur mobile [site] ---------------------------------- */
@media (max-width:768px){
  .site-footer{
    --footer-texte:13px;
    --footer-petit:11px;
    padding-block:30px var(--space-md);
  }
  /* Deux colonnes plutot qu'une pile de quatre : a 390 px chaque colonne
     garde environ 155 px, assez pour ses liens, et le footer perd pres de
     la moitie de sa hauteur sans qu'aucun lien ne disparaisse. */
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
  .footer-logo img{height:32px}
  .footer-titre{font-size:11px; margin-bottom:12px}
  .footer-liens{gap:8px}
  .footer-separateur{margin-block:var(--space-md)}
  .footer-bas{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .footer-liens a{transition:none}
}


/* =========================================================================
   10. GABARIT DES CARTES MODULE (etapes et bonus)
   Mockup laptop debordant, pill magenta, sous-titre souligne, intro
   centree, puces a gauche. Emplacement de valeur prevu, inactif.
   ========================================================================= */

/* Le padding de la carte devient une variable : le debord du mockup se
   calcule dessus, les deux ne peuvent donc plus diverger. */
.pile > .carte{--pad:60px; padding:var(--pad)}

/* Debord du mockup au-dessus du bord de la carte. La carte recupere la
   meme valeur en marge haute, plus une respiration : le laptop ne touche
   donc jamais le trait de continuite ni la carte precedente. */
.carte--module{--debord:72px; margin-top:calc(var(--debord) + 26px)}

/* --- BLOC 167 : IMAGE EN FONDU SUR LES CARTES MODULE ET BONUS -----------
   Meme recette que les cartes profils (.carte__visuel, .carte__img, fondu
   sur ::after, zoom doux au survol) ; seules les deux variables du gabarit
   changent. L'image occupe le haut de la carte, la pill et le titre se
   posent PAR-DESSUS, dans la zone deja fondue : le contenu commence a
   68 % de la hauteur de l'image, la ou le fondu atteint .55 et monte
   vers le noir plein. Le laptop filaire et son debord n'existent plus.
   ------------------------------------------------------------------------ */
/* .pile > .carte pose le padding : meme specificite ici, sinon il gagne */
.pile > .carte--module-visuel{
  --module-visuel-h:340px;        /* hauteur de l'image, affinable */
  --module-fondu-debut:26%;       /* transparent jusque-la, puis extinction */
  --visuel-h:var(--module-visuel-h);
  --visuel-fondu-debut:var(--module-fondu-debut);
  --visuel-cadrage:50% 30%;
  --visuel-zoom:1.05; --visuel-zoom-duree:700ms;
  --debord:0px;
  /* bloc 184 : PAS d'overflow:hidden sur la carte, il coupait le trait de
     continuite (::after pose sous la carte). Le clip de l'image vit sur
     .carte__visuel, qui reprend les coins hauts du cadre. */
  position:relative; margin-top:0;
  padding-top:calc(var(--module-visuel-h) * .68);
  min-height:calc(var(--module-visuel-h) + 120px);
}
.carte--module-visuel .module__pill{margin-top:0}
/* --- BADGE VIP (bloc 188) : petit aplat orange en coin de carte bonus.
   Grammaire des pills (Instrument Sans 500, capitales, interlettrage),
   taille, position et radius en variables. --- */
.badge-vip{
  --badge-vip-taille:.68rem;
  --badge-vip-marge:18px;
  --badge-vip-radius:var(--radius-pill);
  display:inline-block; padding:.42em .95em; border-radius:var(--badge-vip-radius);
  background:var(--orange-vip); color:#ffffff;
  font-family:var(--font-heading); font-weight:500; font-size:var(--badge-vip-taille); line-height:1.3;
  letter-spacing:.18em; text-transform:uppercase;
}
/* en coin de carte : position absolue */
.carte > .badge-vip, .carte--module-visuel > .badge-vip{
  position:absolute; top:var(--badge-vip-marge); right:var(--badge-vip-marge); z-index:3;
}
/* bloc 192 : en petit, a cote d'une ligne de liste */
.badge-vip--ligne{--badge-vip-taille:.52rem; padding:.3em .7em; margin-left:.5em; vertical-align:middle; line-height:1.2}
/* --- CARTES VIP (bloc 189, echelle retiree au 210) : une lueur orangee
   assortie au badge. Le reste de la grammaire
   (hairline, radius, gabarit image-fondu) ne change pas. --- */
.carte--vip{
  --vip-lueur-portee:34px;
  --vip-lueur-opacite:.28;
  /* bloc 210 : aucune sur-echelle, la carte VIP a la largeur des autres par
     la meme source, --carte-largeur (.pile > .carte). */
  box-shadow:0 0 var(--vip-lueur-portee) rgba(255,106,0,var(--vip-lueur-opacite));
  border-color:rgba(255,106,0,.35);
}
.carte--vip:hover, .carte--vip:focus-within{border-color:rgba(255,106,0,.55)}
/* mention sous le titre d'un bonus (bloc 188) */
.module__mention{margin-top:.35rem; text-align:center; color:var(--text-1); opacity:.72}
.carte--module-visuel > .carte__visuel{border-radius:var(--radius-card) var(--radius-card) 0 0}
/* Bloc 175 : Module 1 seul. La capture est coupee PLEINE LARGEUR sous l'UI
   du navigateur (1920 x 927, ratio 2,07) : la zone visuelle prend le ratio
   exact de la capture, aucun flanc n'est rogne, le header du site entre
   d'un bord a l'autre. Cadrage ancre en haut, glissable au chiffre. */
.pile > .carte--module-visuel--large{--module-visuel-h:319px; --visuel-cadrage:50% 0}
@media (max-width:768px){
  .pile > .carte--module-visuel--large{--module-visuel-h:217px}
}
/* Bloc 170 : le schema de funnel, dessine au code. Traits, opacites et
   ecarts en variables, affinables au chiffre. */
.carte__visuel--schema{
  --schema-trait:1.5;           /* epaisseur des cadres et des fleches */
  --schema-barre:.16;           /* opacite des barres de faux-texte, sur blanc */
  --schema-cadre:.10;           /* opacite des contours des pages, sur fond clair */
  --schema-fond:#f4f4f6;        /* bloc 177 : fond de la ZONE visuelle, blanc casse */
  --schema-ombre:.16;           /* force des ombres douces sous les pages */
  background:var(--schema-fond);
}
.funnel{width:100%; height:100%; display:block}
/* bloc 172 : pages BLANCHES, une couleur d'accent par etape */
.funnel__etape--1{--etape:#0003ff}
.funnel__etape--2{--etape:#ff4d6d}
.funnel__etape--3{--etape:#ffb020}
.funnel__etape--4{--etape:#12b76a}
.funnel__cadre{fill:#ffffff; stroke:#000000; stroke-opacity:var(--schema-cadre); stroke-width:var(--schema-trait);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,var(--schema-ombre)))}
.funnel__barre{fill:#000000; opacity:var(--schema-barre)}
.funnel__barre--titre{opacity:calc(var(--schema-barre) + .5)}
.funnel__image{fill:var(--etape); opacity:.14}
.funnel__accent{fill:var(--etape); opacity:.85}
.funnel__bouton{fill:var(--etape)}
.funnel__fleche{fill:none; stroke:#000000; stroke-width:var(--schema-trait); stroke-linecap:round; stroke-linejoin:round; opacity:.5}
.funnel__euro{fill:#12b76a; font-family:var(--font-heading); font-weight:700; font-size:30px}
@media (max-width:768px){
  .pile > .carte--module-visuel{--module-visuel-h:230px; padding-top:calc(var(--module-visuel-h) * .68)}
}

.module__mockup{
  display:flex; justify-content:center;
  margin-top:calc(-1 * (var(--pad) + var(--debord)));
  margin-bottom:26px;
}
.laptop{width:min(258px,74%); height:auto; color:var(--text-1)}
.laptop__capot{fill:#000000; stroke:var(--hairline-hi); stroke-width:1}
.laptop__ecran{
  /* une respiration magenta tres basse au fond de l'ecran, jamais une nappe */
  fill:#000000;
}
.laptop__socle{fill:#000000; stroke:var(--hairline-hi); stroke-width:1}
.laptop__encoche{fill:rgba(255,255,255,.16)}
.laptop__icone{fill:none}

/* --- BADGES : deux grammaires, une seule couleur ------------------------
   Ce qui se CLIQUE porte l'aplat bleu vif, la lueur Monetika et une
   elevation au survol. Ce qui ETIQUETTE porte le meme bleu en CONTOUR :
   filet bleu, fond bleu nuit quasi noir, texte blanc plein, aucune lueur,
   aucun survol. L'oeil ne peut plus les confondre.

   La mise en avant des pills de module vient desormais de leur TAILLE,
   la variante agrandie du bloc 53 est conservee. Les deux registres de
   taille ne changent pas, seule la peau change.

   Grammaire actee au bloc 191 : la pill est en CONTOUR, seule version.
   ------------------------------------------------------------------------ */
.module__pill{display:flex; justify-content:center}
/* section 4 : le badge se cale sur la marge gauche du texte */
.cartes--2 .module__pill{justify-content:flex-start}
.module__pill span{
  display:inline-flex; align-items:center; justify-content:center;
  /* +22 % sur le texte, le padding suit en proportion.
     Un seul reglage pour les 11 occurrences du composant. */
  padding:.58em 1.5em;
  border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-weight:500; font-size:var(--pill-texte); line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-1);
  white-space:nowrap;
}
/* Une pill est une ETIQUETTE : jamais d'ombre de bouton, jamais de survol,
   jamais de curseur de cliquable. Ces trois points valent dans les deux
   options ci-dessous. */
.module__pill span{
  box-shadow:none;
  cursor:default;
}
/* --- CONTOUR : la grammaire des slides VSL, le contour etiquette et le
   plein pour les CTA. Fond transparent, c'est le noir de la page qui
   passe. Taille et interlettrage inchanges. */
.module__pill span{
  background-color:transparent;
  border:1px solid var(--accent-solid);
  /* le filet mange 1px de chaque cote : le padding se compense pour que
     les deux versions aient rigoureusement la meme taille */
  padding:calc(.58em - 1px) calc(1.5em - 1px);
}

/* bloc 195 : sur les cartes a visuel (profils, metiers, modules, bonus), la
   pill est un APLAT bleu clair, --accent-neon, celui des halos et du focus.
   Texte et icones blancs, tailles inchangees, aucune ombre, aucun survol,
   curseur par defaut : la distinction avec les CTA tient par la couleur. */
.carte--visuel .module__pill span,
.carte--module-visuel .module__pill span{background-color:var(--accent-neon); border-color:var(--accent-neon)}
/* bloc 200 : lueur neon bleu clair sur ces pills. Portee et opacite en
   variables. Les CTA gardent le bleu profond et l'ombre Monetika. */
.carte--visuel .module__pill span,
.carte--module-visuel .module__pill span{
  --pill-lueur-portee:18px;
  --pill-lueur-opacite:.55;
  box-shadow:0 0 var(--pill-lueur-portee) rgba(90,108,255,var(--pill-lueur-opacite));
}
/* bloc 200 : pills des bonus VIP en aplat orange, lueur orange assortie,
   shine en boucle (recette du cadre prix VIP, a l'echelle de la pill). */
.carte--vip .module__pill span{
  --pill-shine-duree:.7s;
  --pill-shine-pause:3s;
  --pill-shine-cycle:calc(var(--pill-shine-duree) + var(--pill-shine-pause));  /* keyframe a 19 % : 0,7 / 3,7 */
  position:relative; overflow:hidden;
  background-color:var(--orange-vip); border-color:var(--orange-vip);
  box-shadow:0 0 var(--pill-lueur-portee) rgba(255,106,0,var(--pill-lueur-opacite));
}
.carte--vip .module__pill span::after{
  content:""; position:absolute; inset:-40% -60%; pointer-events:none;
  background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,.45) 50%, transparent 56%);
  transform:translateX(-100%); opacity:0;
  animation:pill-shine var(--pill-shine-cycle) linear infinite;
}
.carte--vip.carte--dort .module__pill span::after{animation-play-state:paused}
@keyframes pill-shine{
  0%{opacity:1; transform:translateX(-100%)}
  19%{opacity:1; transform:translateX(100%)}
  19.01%,100%{opacity:0; transform:translateX(100%)}
}
@media (prefers-reduced-motion:reduce){
  .carte--vip .module__pill span::after{animation:none}
}

/* --- LE SCHEMA DESIGNER + DEVELOPPEUR = AI DESIGN ENGINEER (bloc 203) ---
   Deux pills de la famille des cartes (aplat bleu clair, sans icone), les
   signes en blanc, le resultat en Poppins 700 nettement plus grand.
   Tailles et espacements en variables. --- */
.equation{
  --equation-signe:2.4rem;         /* taille des signes + et = */
  --equation-signe-graisse:500;
  --equation-resultat:clamp(1.6rem,3.2vw,2.4rem);   /* le climax */
  --equation-ecart-h:1.1rem;       /* pill <-> signe + */
  --equation-ecart-v:.9rem;        /* ligne -> = -> resultat */
  display:flex; flex-direction:column; align-items:center; gap:var(--equation-ecart-v);
  margin-top:var(--space-md); text-align:center;
}
/* bloc 205 : grille en ligne a trois colonnes 1fr auto 1fr. Une grille en
   ligne se dimensionne au contenu : les deux colonnes fr prennent la meme
   largeur, celle du contenu le plus long (DEVELOPPEUR), aucune valeur en
   dur. Le + est donc au centre exact, sur l'axe du = et du resultat. */
.equation__ligne{display:inline-grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--equation-ecart-h)}
.equation__pill{margin:0; display:block}
.equation__pill span{display:flex; width:100%; justify-content:center}
.equation__pill span{
  background-color:var(--accent-neon); border-color:var(--accent-neon);
  box-shadow:0 0 var(--pill-lueur-portee,18px) rgba(90,108,255,var(--pill-lueur-opacite,.55));
  font-size:var(--pill-module);
}
/* bloc 232 : en mobile, les deux pills du schema ont leur propre gabarit.
   RELEVE : elles tombaient sous la regle mobile des cartes de la section
   (.section--suite .module__pill span, 9.28px, padding .58em 1.1em), d'ou
   le selecteur a trois classes qui la depasse. Taille et padding en
   variables sur .equation ; le padding suit l'em, donc +30 % sur le texte
   = +30 % sur le padding. Desktop : rien ne change (regles ci-dessus). */
@media (max-width:768px){
  /* bloc 235 : cible absolue, texte rendu 19,2px (1.2rem), le padding suit l'em */
  .equation{--equation-pill-taille:1.2rem; --equation-pill-pad-y:.58em; --equation-pill-pad-x:1.1em}
  .equation .equation__ligne .equation__pill span{
    font-size:var(--equation-pill-taille);
    padding:var(--equation-pill-pad-y) var(--equation-pill-pad-x);
  }
}
.equation__signe{font-family:var(--font-display); font-weight:var(--equation-signe-graisse); font-size:var(--equation-signe); line-height:1; color:#ffffff}
.equation__resultat{font-family:var(--font-display); font-weight:700; font-size:var(--equation-resultat); line-height:1.15; letter-spacing:.02em; color:#ffffff; margin:0}
@media (max-width:768px){
  .equation{--equation-signe:2rem}
  .equation__ligne{grid-template-columns:1fr; gap:.6rem; justify-items:center}
  .equation__ligne .equation__pill{width:100%}
}

/* sous-titre souligne : recette du site, trait blanc en text-decoration */
.module__titre{
  margin-top:1.15rem; text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; line-height:1.55; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-1);
  text-decoration-line:underline;
  text-decoration-color:#ffffff;
  text-decoration-thickness:clamp(1.5px,.105em,2.5px);
  text-underline-offset:.24em;
  text-decoration-skip-ink:auto;
}

/* emplacement de valeur, pret a servir si des montants arrivent */
.module__valeur{display:flex; justify-content:center; margin-top:1.1rem}
.module__valeur span{
  display:inline-flex; align-items:center;
  padding:.5rem 1.2rem;
  border:1px solid var(--hairline-hi); border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:.64rem; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-1);
  white-space:nowrap;
}

.module__intro{
  margin-top:1.5rem; text-align:center; color:var(--text-1);
}
.carte--module .liste{margin-top:1.6rem; text-align:left}

@media (max-width:768px){
  .pile > .carte{--pad:28px}
  .carte--module{--debord:48px; margin-top:calc(var(--debord) + 18px)}
  .module__mockup{margin-bottom:20px}
  .laptop{width:min(196px,66%)}
  .module__pill span{letter-spacing:.14em}
  .module__titre{font-size:1rem}
  .module__intro{margin-top:1.2rem}
}


/* --- barre de progression de scroll [site] .scroll-progress --- */
.scroll-progress{
  position:fixed; top:0; left:0;
  width:100%; height:3px;
  z-index:300;
  pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%;
  transform:scaleX(0); transform-origin:left;
  /* aplat uni : le bleu principal des tokens, d'un bord a l'autre.
     Aucun degrade, aucune lueur. */
  background-color:var(--accent-solid);
}

/* =========================================================================
   11. MENU
   Transpose de site-jl : pill glass fixe, panneau plein ecran en mobile.
   Ecart assume : le site colore ses liens en magenta au survol. Ici le
   texte reste blanc, c'est le soulignement magenta commun qui s'allume.
   ========================================================================= */
.site-header{
  position:fixed;
  top:1rem;                       /* [site] --header-offset */
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  /* [ecart site] la pill du site tient 4 liens dans 1010px. Ici elle en
     porte 7 plus un bouton : mesure faite, la ligne complete demande
     1082px. La pill monte donc a 1180px, et son padding interieur se
     resserre d'autant. */
  width:min(calc(100% - 2rem),1180px);
}
.header-pill{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-md);
  padding:.62rem .62rem .62rem 2rem;
  border-radius:var(--radius-pill);
  /* [site] base NOIRE, sans teinte d'accent : au-dessus des halos la pill
     doit se lire noir fume. Repli sans backdrop-filter. */
  background-color:rgba(0,0,0,.85);
  border:1px solid var(--hairline);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  transition:background-color .3s ease;
  position:relative;
}
/* Le verre depoli est porte par un calque, pas par la pill elle-meme :
   un backdrop-filter fait de son element le bloc conteneur de ses
   descendants en position fixed. Pose sur la pill, il ramenait le panneau
   mobile aux dimensions de la pill au lieu du plein ecran. Meme piege que
   le transform corrige plus bas sur .site-header. */
@supports (backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px)){
  .header-pill::before{
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:inherit;
    background-color:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
  .header-pill{background-color:transparent}
}
.logo{display:flex; align-items:center; text-decoration:none}
.logo-img{display:block; height:36px; width:auto}   /* [site] */

/* la nav porte deux blocs : la liste des liens, puis le bouton */
.site-nav{display:flex; align-items:center; gap:1.6rem}
.site-nav ul{list-style:none; display:flex; align-items:center; gap:1.35rem}
.site-nav a{
  font-family:var(--font-heading); font-weight:500;
  font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; color:var(--text-1);
}
/* --- soulignement au survol des ENTREES TEXTE du menu -------------------
   Le trait vit sur un pseudo-element positionne : il ne participe pas au
   flux, la hauteur du menu et la position des libelles ne bougent pas
   d'un pixel. Deploiement en scaleX, aucune propriete de mise en page.
   Le bouton CTA n'est pas concerne : le selecteur ne vise que les liens
   de la liste.
   ------------------------------------------------------------------------ */
.site-nav ul a{
  --menu-souligne-trait:2px;
  --menu-souligne-decalage:6px;
  position:relative;
}
.site-nav ul a::after{
  content:""; position:absolute;
  left:0; right:0; bottom:calc(var(--menu-souligne-decalage) * -1);
  height:var(--menu-souligne-trait);
  background-color:var(--accent-solid);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 180ms cubic-bezier(.16,.84,.3,1);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .site-nav ul a:hover::after{transform:scaleX(1)}
}
/* le clavier recoit le meme trait, partout */
.site-nav ul a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .site-nav ul a::after{transition:none}
}
/* Bouton du menu : meme recette que .btn-primary, au gabarit de la pill.
   L'aplat vient des tokens d'accent. */
.btn--menu{
  flex:none;
  padding:.82rem 1.5rem;
  font-size:.72rem; letter-spacing:.05em;
  text-decoration:none;
  background:var(--accent-solid); color:#ffffff;
  box-shadow:var(--btn-lueur);
}
.btn--menu:hover,
.btn--menu:focus-visible{
  background:var(--accent-solid-fonce);
  /* version compacte de la lueur : celle de l'orbe-sm de Monetika, le
     seul orbe reduit du systeme. 16px au lieu de 24, .4 au lieu de .45 */
  box-shadow:var(--btn-lueur-survol-compact);
}
.btn--menu:active{transform:scale(.98)}

/* burger, masque en desktop [site] */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  padding:.6rem .4rem; cursor:pointer; color:var(--text-1);
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px;
  background-color:var(--text-1);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-fermer{display:none}

/* --- panneau plein ecran [site] ---
   [ecart site] la bascule ne se fait plus a 768 mais a 1200 : sept liens
   et un bouton ne tiennent pas sur une ligne en dessous : la ligne
   complete mesure 1082px, une fenetre de 1024 n'en offre que 992. --- */
@media (max-width:1199.98px){
  .nav-toggle{display:flex}
  .nav-toggle,.nav-fermer{color:var(--text-1)}
  .nav-icone{display:block; width:26px; height:26px}
  .header-pill{padding:12px 18px}
  /* Un ancetre transforme devient le bloc conteneur de ses descendants en
     position fixed : le panneau se retrouverait aux dimensions de la pill.
     On recentre par les decalages, sans transform. [site] */
  .site-header{left:1rem; right:1rem; width:auto; transform:none}
  .site-nav{
    display:none;
    position:fixed; inset:0; z-index:200;
    flex-direction:column; align-items:center; justify-content:center;
    padding:20px; border:none; border-radius:0;
    background-color:rgba(0,0,0,.94); box-shadow:none;
  }
  @supports (backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px)){
    .site-nav{
      background-color:rgba(0,0,0,.82);
      -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    }
  }
  .nav-open .site-nav{display:flex}
  /* La liste se centre dans l'espace libre, le bouton reste en bas :
     un seul margin auto, sur la liste. Deux autos se partageraient
     l'espace et feraient deborder la liste par le haut. */
  .site-nav{justify-content:flex-start; padding:92px 20px 40px}
  .site-nav ul{
    flex-direction:column; align-items:center; gap:24px;
    margin-block:auto; width:100%;
  }
  /* liens dans la police des titres, comme sur le site */
  .site-nav a{
    font-family:var(--font-display); font-size:1.25rem;
    letter-spacing:.04em; text-transform:uppercase;
    /* le lien le plus long ne tient pas sur une ligne en 390px :
       il se replie, centre, plutot que de deborder */
    white-space:normal; text-align:center; display:block;
  }
  .nav-fermer{
    display:flex; position:absolute; top:22px; right:22px;
    padding:8px; cursor:pointer;
  }
  /* le panneau empile les liens, le bouton se pose en bas */
  .site-nav{gap:0}
  .btn--menu{
    flex:none;
    padding:1rem 2.2rem; font-size:.85rem; letter-spacing:.07em;
  }
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span,.header-pill{transition:none}
}


/* =========================================================================
   12. BULLE DES CIBLES, BOUTON HAUT, PILLS DES CARTES
   La bulle est le composant .hero-pill du site, transpose tel quel.
   ========================================================================= */
:root{
  /* [site] --voyant-vert : le vert neon doux du voyant de la bulle. Seule
     couleur saturee de la page hors magenta, posee sur demande de JL. */
  --voyant-vert:#3dff88;
  /* [monetika] Landing.tsx:516 : md:py-[15px] md:px-10, soit 15 et 40px.
     En mobile la source descend a px-3 py-3, soit 12px sur les deux axes. */
  --bulle-pad-y:15px;
  --bulle-pad-x:2.5rem;
  /* [monetika] Landing.tsx:516 : md:text-[12px] md:tracking-[0.18em] */
  --bulle-texte:12px;
  --bulle-ls:.18em;
  /* DEUX REGISTRES DE PILL, plus aucune taille ad hoc ailleurs.
     --pill-texte  : les badges dans les contenus (sections 4 et 7)
     --pill-module : les 9 pills des cartes modules et bonus */
  --pill-texte:.78rem;
  /* garde mobile : le seul libelle qui ne tient pas sur une ligne */
  --pill-texte-long:.58rem;
  --pill-module:1.12rem;
}

/* --- la bulle [site] .hero-pill --- */
.cibles__bulle{
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--bulle-pad-y) var(--bulle-pad-x);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,.04);
  font-family:var(--font-heading); font-weight:500;
  font-size:var(--bulle-texte); line-height:1.4;
  text-transform:uppercase; letter-spacing:var(--bulle-ls);
  color:var(--text-1);
  white-space:nowrap;
  text-shadow:0 0 12px rgba(0,0,0,.8);
}
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .cibles__bulle{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
}
.cibles__i{display:inline-block}

/* [site] .hero-voyant : un disque plein, pas un caractere, donc aucune
   police sollicitee. Respiration et non clignotement : l'opacite ne
   descend qu'a 0,55 et la courbe est en ease-in-out, il n'existe donc
   aucun instant ou le voyant s'eteint. */
.cibles__voyant{
  flex:none;
  width:8px; height:8px; border-radius:50%;
  background-color:var(--voyant-vert);
  box-shadow:0 0 8px var(--voyant-vert);
  animation:voyant-respire 2s ease-in-out infinite;
}
@keyframes voyant-respire{
  0%,100%{opacity:.55; box-shadow:0 0 4px var(--voyant-vert)}
  50%    {opacity:1;   box-shadow:0 0 12px 2px var(--voyant-vert)}
}

/* --- le bouton du haut, entre le sous-titre et la VSL --- */
.hero__cta--haut{margin-top:clamp(1.75rem,3vw,2.25rem)}

/* --- pills des cartes modules et bonus : variante plus grosse ----------
   Les badges CRÉATIF et CURIEUX de la section 4 gardent la taille de base :
   la variante ne vise que les pills des piles.
   ---------------------------------------------------------------------- */
/* Bloc 168 : une icone dans chaque pill module et bonus. Recette relevee
   sur le CTA du hero : .btn-icone fait 1.1em, gap 10px, alignement par
   inline-flex. Ici la taille est une variable, l'ecart suit l'em. */
.pile .module__pill{--pill-icone:1.25em}
.pill-icone{flex:none; display:block; width:var(--pill-icone); height:var(--pill-icone); margin-right:.55em; color:inherit}
.pile .module__pill span{
  font-size:var(--pill-module);
  padding:.66em 1.55em;
  /* pas d'ombre : c'est une etiquette. La mise en avant vient de la
     taille, la lueur est reservee aux boutons. */
}
/* la compensation du filet suit la variante agrandie */
.pile .module__pill span{
  padding:calc(.66em - 1px) calc(1.55em - 1px);
}
/* la pill respire davantage : elle ne touche jamais le mockup au-dessus,
   et le titre souligne descend d'autant */
.pile .module__mockup{margin-bottom:34px}
.pile .module__titre{margin-top:1.45rem}

@media (max-width:768px){
  /* deux lignes centrees dans la bulle, voyant conserve */
  .cibles__bulle{
    white-space:normal; text-align:center;
    padding:var(--bulle-pad-y) var(--bulle-pad-x);
    max-width:100%;
  }
  .cibles__i{max-width:none}
  /* [monetika] la bulle descend a 12px sur les deux axes en mobile */
  /* [monetika] en mobile la source descend a px-3 py-3 et
     text-[clamp(8px,2.3vw,12px)] tracking-[0.05em] */
  :root{
    --pill-texte:.72rem; --pill-module:.96rem;
    --bulle-pad-y:12px; --bulle-pad-x:12px;
    --bulle-texte:clamp(8px,2.3vw,12px); --bulle-ls:.05em;
  }
  /* Section 7 : "Savoir comment l'implementer" fait 28 caracteres en
     caracteres. Pour tenir sur une seule ligne dans la carte, le corps et
     l'interlettrage descendent d'un cran, et le padding se resserre. */
  /* le selecteur suit les cartes : elles ont quitte #ai-design-engineer
     pour .section--suite au decoupage du bloc 82 */
  .section--suite .module__pill span{
    font-size:var(--pill-texte-long); letter-spacing:.06em;
    padding:.58em 1.1em; white-space:nowrap;
  }
  .pile .module__mockup{margin-bottom:26px}
  .pile .module__titre{margin-top:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  .cibles__voyant{animation:none; opacity:1; box-shadow:0 0 8px var(--voyant-vert)}
}

/* =========================================================================
   PAGES LEGALES (bloc 222)
   Trois pages au squelette de Monetika (une pilule par section, texte a
   l'interligne du site), dans la DA de la page : noir, typo du systeme,
   en-tete reduit a la marque, meme footer que la page de vente.
   ========================================================================= */
.page-legale{background:#000000}
/* bloc 238 : la page 404, minimale, dans la DA des pages legales */
.legale--404{text-align:center}
.quatre-cent-quatre__texte{color:var(--text-1); margin:0 auto; max-width:34rem}
.quatre-cent-quatre__cta{margin-top:var(--space-md)}
.legale__entete{padding:28px 0}
.legale__retour{display:inline-block}
.legale__retour img{display:block; height:42px; width:auto}
.legale{padding:var(--space-md) 0 var(--space-lg)}
.legale__titre{
  text-align:center; margin:0 0 var(--space-lg);
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700; line-height:1.25; letter-spacing:.02em; color:var(--text-1);
}
.legale__section{margin-top:2.5rem}
.legale__section:first-of-type{margin-top:0}
.legale__section .module__pill{display:flex; justify-content:flex-start; margin:0 0 1rem; text-transform:none; font-size:inherit}
.legale__section p{color:rgba(255,255,255,.85); line-height:1.7}
.legale__section a{text-decoration:underline; text-decoration-thickness:var(--souligne-trait); text-underline-offset:.16em}