/* ============================================================
   pages-modules.css — vocabulaire des pages de module
   v1.0

   Ne s'appelle plus « page-club » : la comparaison entre BRVM Club
   et Module SGI a montre que 133 classes sur 137 etaient communes.
   Ces pages partagent la meme grammaire — heros illustre, blocs de
   vignettes, sections a bandeau, etapes, appel a l'action — et
   n'ont pratiquement rien qui leur soit propre.

   Chargement, dans cet ordre :
     brvm-horizon-ds.css   → tokens et teintes
     pages-communes.css    → en-tete, menus, navigation, pied
     pages-modules.css     → cette feuille

   Sert a : brvm-club.html, module-sgi.html, marketplace.html,
   academie.html, mon-espace.html, et les pages de module a venir.

   Sur la balise body :  <body class="rv" data-teinte="…">
   ============================================================ */

/* ============================================================
   1. STRUCTURE
   ============================================================ */
.m-in {
  max-width: 480px; margin-inline: auto; padding-inline: 0;
  width: 100%;
}

/* Couches decoratives de l'ancienne maquette */
.fond-grille, .fond-halo, .m-hero-orb, .m-cta-orb, .m-cta-ov { display: none; }

/* ============================================================
   2. HEROS
   ============================================================ */
/* Le visuel devient le fond du heros, le texte se pose dessus :
   une seule hauteur au lieu de deux empilees. */
.m-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--brand-a) 6%, var(--brand-b) 80%);
  padding: 0;
  margin-top: var(--s4);
  display: block;
  text-align: center;
  min-height: 400px;
}
.m-hero::before {
  content: ''; position: absolute; inset: -40%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
  animation: lueur 14s ease-in-out infinite alternate; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .m-hero::before { animation: none; } }
.m-hero > * { position: relative; z-index: 1; }

/* Le visuel passe au-dessus du texte, comme une illustration */
.m-hero-grid {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 400px; padding: var(--s8) var(--s5) var(--s6);
}
.m-hero-txt { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Le visuel occupe tout le cadre, en fond */
.m-hero-img {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 0; box-shadow: none; overflow: hidden;
}
.m-hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,12,60,.55) 0%, rgba(20,12,60,.35) 30%, rgba(12,8,40,.92) 100%);
}
.m-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transform-origin: 50% 40%;
}

.m-hero-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; width: auto; max-width: 100%;
  background: rgba(255,255,255,.2); backdrop-filter: blur(12px);
  border: 0; border-radius: var(--r-full);
  padding: 9px 18px; margin: 0 auto var(--s4);
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  color: #fff; letter-spacing: 0; text-transform: none;
}
.m-hero-badge i { flex: 0 0 auto; font-size: 15px; }

.m-hero h1 {
  font-size: clamp(27px, 7.2vw, 34px); line-height: 1.06;
  letter-spacing: -.04em; font-weight: 600; color: #fff;
  margin: 0 0 var(--s4); text-wrap: balance;
}
.m-hero h1 .g {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: var(--or); color: var(--or);
}
/* Texte raccourci a l'affichage : le paragraphe d'origine fait
   quatre lignes sur un telephone. */
.m-hero-txt > p {
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8);
  margin: 0 auto var(--s5); max-width: 30ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-hero-btns {
  display: flex; flex-direction: column; gap: var(--s2);
  width: 100%; margin-bottom: var(--s5);
}

/* Quatre chiffres, deux par ligne */
.m-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
  width: 100%;
}
.m-hs {
  background: rgba(0,0,0,.38); backdrop-filter: blur(10px);
  border-radius: var(--r-sm); padding: var(--s3) var(--s1);
}
.m-hs .n {
  font-size: 18px; font-weight: 600; line-height: 1;
  letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums;
}
.m-hs .l {
  font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.72);
  margin-top: 6px;
}
@media (max-width: 380px) {
  .m-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   3. BLOCS DE VIGNETTES
   ============================================================ */
.m-bloc, .m-sec { padding-block: var(--s9); }
.m-bloc.cl-blanc { background: transparent; }

.m-bloc-ttl, .m-sec-hd h2 {
  font-size: 26px; line-height: 1.1; letter-spacing: -.032em;
  font-weight: 600; color: var(--text);
  margin: 0 0 var(--s3); text-align: center; text-wrap: balance;
}
.m-bloc-sub, .m-sec-hd p {
  font-size: 15px; line-height: 1.6; color: var(--text-2);
  margin: 0 auto var(--s6); max-width: 34ch; text-align: center;
}
.m-sec-hd { text-align: center; }

/* ─── Deux formats differents, pour rompre l'empilement ───────────────
   Le balisage repete la meme vignette d'un bout a l'autre de la page.
   On distingue les deux grilles : la premiere en cartes larges avec
   l'icone a gauche, la seconde en pave de six tuiles carrees. L'oeil
   reconnait alors deux familles au lieu de dix elements identiques. */

.m-item {
  position: relative;
  background: rgba(22,22,26,.78); backdrop-filter: blur(18px);
  border: 0; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  text-decoration: none; color: var(--text);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.m-item:hover { background: rgba(30,30,36,.9); transform: translateY(-3px); }
.m-item:active { transform: scale(.985); }

.m-item-ic {
  border-radius: 50%; display: grid; place-items: center; color: #fff;
}
.m-item h4 {
  font-weight: 600; letter-spacing: -.022em; color: var(--text); margin: 0;
}
.m-item > p { color: var(--text-2); margin: 0; }
.m-item-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 550; color: var(--or);
  transition: gap .2s var(--ease);
}
.m-item:hover .m-item-go { gap: 11px; }

/* ---------- Format 1 : une vedette, puis des tuiles ----------
   La premiere vignette occupe toute la largeur, icone au-dessus et
   fond teinte ; les suivantes se rangent en tuiles. Une grille de
   quatre cartes identiques ne donne aucun point d'entree a l'oeil —
   celle-ci en donne un. */
.m-grid2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
}

/* La vedette */
.m-grid2 .m-item:first-child {
  grid-column: 1 / -1;
  display: block; text-align: center;
  padding: var(--s7) var(--s6);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(126,76,255,.16) 0%, transparent 70%),
    rgba(22,22,26,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.m-grid2 .m-item:first-child .m-item-ic {
  width: 58px; height: 58px; font-size: 25px; margin: 0 auto var(--s4);
}
.m-grid2 .m-item:first-child h4 { font-size: 19px; margin-bottom: var(--s2); }
.m-grid2 .m-item:first-child > p {
  font-size: 14.5px; line-height: 1.6; margin: 0 auto var(--s4); max-width: 32ch;
}

/* Les suivantes, en tuiles */
.m-grid2 .m-item:not(:first-child) {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s6) var(--s4) var(--s5);
  text-align: center; border-radius: var(--r-md);
}
.m-grid2 .m-item:not(:first-child) .m-item-ic {
  width: 44px; height: 44px; font-size: 19px; margin-bottom: var(--s3);
}
.m-grid2 .m-item:not(:first-child) h4 { font-size: 14.5px; line-height: 1.3; }
.m-grid2 .m-item:not(:first-child) > p {
  font-size: 12.5px; line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-grid2 .m-item:not(:first-child) .m-item-go { display: none; }
.m-grid2 .m-item:not(:first-child) .m-tag {
  position: static; margin-bottom: var(--s3); align-self: center;
}
.m-grid2 .m-item:first-child .m-tag { top: var(--s4); right: var(--s4); }

/* Avec la vedette qui occupe une ligne entiere, le compte des tuiles
   restantes suffit a equilibrer la grille : aucune regle d'orphelin
   n'est necessaire ici. */

@media (max-width: 360px) {
  .m-grid2 { grid-template-columns: 1fr; }
}

/* ---------- Format 2 : meme vedette, memes tuiles ----------
   Les deux grilles adoptent la meme composition : le premier
   element en vedette sur toute la largeur, les suivants en tuiles.
   La forme obtenue — un grand bloc surmontant des petits — se lit
   comme un ensemble, et le nombre d'elements n'y change rien : un
   compte impair ne laisse plus de demi-ligne vide, puisque la
   vedette occupe deja une ligne entiere. */
.m-grid3 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
}

/* La vedette */
.m-grid3 > .m-item:first-child {
  grid-column: 1 / -1;
  display: block; text-align: center;
  padding: var(--s7) var(--s6);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(126,76,255,.16) 0%, transparent 70%),
    rgba(22,22,26,.86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.m-grid3 > .m-item:first-child .m-item-ic {
  width: 58px; height: 58px; font-size: 25px; margin: 0 auto var(--s4);
}
.m-grid3 > .m-item:first-child h4 { font-size: 19px; margin-bottom: var(--s2); }
.m-grid3 > .m-item:first-child > p {
  font-size: 14.5px; line-height: 1.6; margin: 0 auto var(--s4);
  max-width: 32ch; -webkit-line-clamp: 3;
}
.m-grid3 > .m-item:first-child .m-item-go { display: inline-flex; }
.m-grid3 > .m-item:first-child .m-tag { position: absolute; top: var(--s4); right: var(--s4); margin: 0; }

/* Les tuiles */
.m-grid3 > .m-item:not(:first-child) {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s6) var(--s4) var(--s5);
  text-align: center; border-radius: var(--r-md);
}
.m-grid3 > .m-item:not(:first-child) .m-item-ic {
  width: 46px; height: 46px; font-size: 20px; margin-bottom: var(--s3);
}
.m-grid3 > .m-item:not(:first-child) h4 { font-size: 14.5px; line-height: 1.3; }
.m-grid3 > .m-item:not(:first-child) > p {
  font-size: 12.5px; line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sur une tuile, la carte entiere est deja cliquable */
.m-grid3 > .m-item:not(:first-child) .m-item-go { display: none; }
.m-grid3 > .m-item:not(:first-child) .m-tag {
  position: static; margin-bottom: var(--s3); align-self: center;
}
@media (max-width: 360px) {
  .m-grid3 { grid-template-columns: 1fr; }
}

/* Etiquette de formule, posee en haut a droite de la vignette */
.m-tag {
  position: absolute; top: var(--s4); right: var(--s4);
  display: inline-block; border: 0; border-radius: var(--r-full);
  padding: 4px 11px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: var(--text-2);
}
.m-tag.free { background: var(--up-soft); color: var(--up); }

/* ============================================================
   4. SECTIONS ILLUSTREES
   ============================================================ */
.m-pq {
  display: flex; flex-direction: column; gap: var(--s6);
  padding-block: var(--s9); text-align: center;
}
/* L'ordre alterne dans le balisage — image avant ou apres le
   texte. En colonne unique, l'image passe toujours en premier. */
/* Bandeau panoramique en tete de section. Le format 21:9 tient
   moins de hauteur qu'un 16:10 tout en gardant sa presence. */
.m-pq-img, .m-pq-img-ajout {
  order: -1; position: relative;
  width: 100%; aspect-ratio: 21/9; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom: var(--s5);
}
.m-pq-img::after, .m-pq-img-ajout::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7) 100%);
}

/* Les visuels verticaux — captures d'ecran en 9:16 — perdent presque
   tout dans un bandeau panoramique : on n'en voit qu'une bande du
   milieu. Le cadrage derive donc lentement du haut vers le bas, ce
   qui laisse voir l'ensemble de la capture. L'animation se declenche
   au survol et tourne en continu sur telephone, ou il n'y a pas de
   survol. */
.m-pq-img img, .m-pq-img-ajout img {
  width: 100%; height: auto; min-height: 100%;
  object-fit: cover; object-position: 50% 0%;
  animation: derive-visuel 9s ease-in-out infinite alternate;
}
@keyframes derive-visuel {
  from { object-position: 50% 6%; }
  to   { object-position: 50% 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .m-pq-img img, .m-pq-img-ajout img {
    animation: none; object-position: 50% 22%;
  }
}
.m-pq-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.14); transform-origin: 50% 70%;
}
/* Illustration posee par refondre-page.cjs dans une section qui
   n'en avait pas. Elle passe en tete du bloc, avec sa legende. */
.m-pq-img-ajout {
  order: -1; position: relative;
  width: 100%; aspect-ratio: 16/10; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom: var(--s6);
}
.m-pq-img-ajout img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transform-origin: 50% 45%;
}
.m-pq-img-ajout::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.78) 100%);
}
.m-pq-lgd {
  position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s4);
  z-index: 2; text-align: left;
  font-size: 13.5px; font-weight: 550; letter-spacing: -.015em; color: #fff;
}
/* Dans un bloc de vignettes, l'illustration coiffe la grille */
.m-bloc > .m-pq-img-ajout { margin-bottom: var(--s6); }

.m-pq-txt h2, .m-pq-txt h3 {
  font-size: 26px; line-height: 1.1; letter-spacing: -.032em;
  font-weight: 600; color: var(--text); margin: 0 0 var(--s4);
  text-wrap: balance;
}
.m-pq-txt > p {
  font-size: 15px; line-height: 1.65; color: var(--text-2);
  margin: 0 auto var(--s6); max-width: 34ch;
}
.m-pq-txt ul { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.m-pq-txt li {
  display: flex; align-items: flex-start; justify-content: center; gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-2);
  padding: 9px 0; text-align: left;
}
.m-pq-txt li i { flex: 0 0 auto; color: var(--up); font-size: 17px; margin-top: 1px; }

/* ============================================================
   5. ETAPES
   ============================================================ */
/* ---------- Etapes : colonne reliee par un fil ----------
   La bande horizontale coupait le bloc : rien n'indiquait qu'il
   fallait faire glisser, et les etapes suivantes restaient
   invisibles. On revient a la colonne, mais un fil vertical relie
   les numeros — la progression se lit sans avoir a deviner. */
.m-steps {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding-left: 52px;
}
/* Le fil, du premier au dernier numero */
.m-steps::before {
  content: ''; position: absolute;
  left: 19px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(180deg,
    var(--or) 0%, rgba(240,184,64,.35) 55%, transparent 100%);
  border-radius: 2px;
}
.m-step {
  position: relative;
  background: rgba(22,22,26,.8); backdrop-filter: blur(18px);
  border: 0; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding: var(--s5) var(--s5);
  text-align: left;
}
/* Le numero se pose sur le fil, hors de la carte */
.m-step-n {
  position: absolute; left: -52px; top: var(--s5);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); color: var(--or);
  box-shadow: inset 0 0 0 2px var(--or);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  margin: 0; z-index: 2;
}
.m-step h4 {
  font-size: 16px; font-weight: 600; letter-spacing: -.022em;
  margin: 0 0 6px; color: var(--text);
}
.m-step p {
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin: 0;
}
@media (max-width: 380px) {
  .m-steps { padding-left: 44px; }
  .m-steps::before { left: 16px; }
  .m-step-n { left: -44px; width: 34px; height: 34px; font-size: 13px; }
}

/* ============================================================
   6. APPEL A L'ACTION
   ============================================================ */
/* Appel a l'action : visuel en fond, comme le heros, pour que la page
   se referme sur la meme note qu'elle s'ouvre. */
.m-cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--brand-a) 6%, var(--brand-b) 80%);
  padding: var(--s9) var(--s6) var(--s8);
  margin-block: var(--s7) var(--s9);
  text-align: center;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Le visuel de l'appel a l'action change selon la page : il est
   pilote par une variable, posee sur le body de chaque page.
     body { --cta-image: url('/brvm-marketing/sgi/convention.jpg'); } */
.m-cta::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--cta-image, url('/brvm-marketing/club/celebration-cours.jpg'));
  background-size: cover; background-position: 50% 30%;
}
.m-cta::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(20,12,60,.5) 0%, rgba(20,12,60,.4) 34%, rgba(12,8,40,.94) 100%);
}
.m-cta h2, .m-cta h3, .m-cta p, .m-cta-btns { position: relative; z-index: 2; }
.m-cta-in { position: relative; z-index: 2; }
.m-cta h2, .m-cta h3 {
  font-size: clamp(26px, 7vw, 32px); line-height: 1.08;
  letter-spacing: -.038em; font-weight: 600; color: #fff;
  margin: 0 0 var(--s4); text-wrap: balance;
}
.m-cta p {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82);
  margin: 0 auto var(--s6); max-width: 30ch;
}
.m-cta-btns { display: flex; flex-direction: column; gap: var(--s2); }

/* ============================================================
   7. BOUTONS DE LA PAGE
   ============================================================ */
/* Les boutons du parrainage — .pr-btn et .pa-btn — partagent cette
   definition : une seule source pour toute l'application. */
.m-btn, .pr-btn, .pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; border: 0; cursor: pointer; text-decoration: none;
  border-radius: var(--r-full); padding: 14px 24px;
  font-family: var(--font); font-size: 14.5px; font-weight: 550;
  letter-spacing: -.01em; box-shadow: none;
  background: var(--surface-3); color: var(--text);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.m-btn:hover, .pr-btn:hover, .pa-btn:hover { filter: brightness(1.16); transform: none; }
.m-btn:active, .pr-btn:active, .pa-btn:active { transform: scale(.97); }

/* Sur le degrade de marque, l'action principale est blanche */
.m-hero .m-btn.o, .m-cta .m-btn.o { background: var(--text); color: #000; }
.m-hero .m-btn.gh, .m-cta .m-btn.gh {
  background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
  color: #fff; box-shadow: none;
}
/* Ailleurs, le degrade de marque */
.m-btn.o { background: linear-gradient(120deg, var(--brand-a), var(--brand-b)); color: #fff; }
.pr-btn.or, .pa-btn.or { background: var(--or); color: #000; }
.m-btn.v, .pr-btn.v, .pa-btn.v { background: var(--text); color: #000; }
.m-btn.gh { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--text); }

.lbl { font-size: 12.5px; color: var(--text-2); }

/* ============================================================
   8. DYNAMISME
   Les blocs entrent et sortent dans les deux sens. Le script
   pose .vu ; le heros est exclu, il doit etre lisible d'emblee.
   ============================================================ */
.m-bloc, .m-pq, .m-sec, .m-cta,
.m-grid2, .m-grid3, .m-steps,
.m-pq-img, .m-pq-txt, .m-sec-hd,
.m-stat-row, .m-disc,
.anim-2, .anim-3, .anim-4, .anim-6 {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.m-bloc.vu, .m-pq.vu, .m-sec.vu, .m-cta.vu,
.m-grid2.vu, .m-grid3.vu, .m-steps.vu,
.m-pq-img.vu, .m-pq-txt.vu, .m-sec-hd.vu,
.m-stat-row.vu, .m-disc.vu,
.anim-2.vu, .anim-3.vu, .anim-4.vu, .anim-6.vu {
  opacity: 1; transform: none;
}

/* Le heros est visible des l'ouverture */
.m-hero, .m-hero.anim-1, .m-hero * { opacity: 1 !important; transform: none !important; }
.m-hero::before { transform: none; }

/* Les vignettes d'une grille entrent en cascade */
.m-grid2.vu .m-item, .m-grid3.vu .m-item, .m-steps.vu .m-step {
  animation: entree-carte .5s var(--ease) both;
}
.m-grid2.vu .m-item:nth-child(2),
.m-grid3.vu .m-item:nth-child(2),
.m-steps.vu .m-step:nth-child(2) { animation-delay: .07s; }
.m-grid2.vu .m-item:nth-child(3),
.m-grid3.vu .m-item:nth-child(3),
.m-steps.vu .m-step:nth-child(3) { animation-delay: .14s; }
.m-grid2.vu .m-item:nth-child(4),
.m-grid3.vu .m-item:nth-child(4),
.m-steps.vu .m-step:nth-child(4) { animation-delay: .21s; }
.m-grid3.vu .m-item:nth-child(5) { animation-delay: .28s; }
.m-grid3.vu .m-item:nth-child(6) { animation-delay: .35s; }
.m-stat-row.vu .m-stat { animation: entree-carte .5s var(--ease) both; }
.m-stat-row.vu .m-stat:nth-child(2) { animation-delay: .07s; }
.m-stat-row.vu .m-stat:nth-child(3) { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .m-bloc, .m-pq, .m-sec, .m-cta, .m-grid2, .m-grid3, .m-steps,
  .m-pq-img, .m-pq-txt, .m-sec-hd,
  .anim-2, .anim-3, .anim-4, .anim-6 {
    opacity: 1; transform: none; transition: none;
  }
  .m-grid2.vu .m-item, .m-grid3.vu .m-item, .m-steps.vu .m-step { animation: none; }
}

/* ============================================================
   9. RANGEE DE STATISTIQUES
   Trois chiffres cles poses entre deux sections. Format court,
   qui rompt la suite des blocs sans occuper une pleine hauteur.
   ============================================================ */
.m-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
  margin-block: var(--s7);
}
.m-stat {
  background: rgba(22,22,26,.78); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  border-radius: var(--r-md); padding: var(--s5) var(--s2);
  text-align: center;
}
.m-stat .n {
  font-size: 22px; font-weight: 600; line-height: 1;
  letter-spacing: -.035em; color: var(--or);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.m-stat .l {
  font-size: 11px; line-height: 1.3; color: var(--text-2);
  margin-top: 7px;
}
@media (max-width: 380px) {
  .m-stat .n { font-size: 19px; }
  .m-stat .l { font-size: 10px; }
}

/* ============================================================
   10. ENCART D'INFORMATION
   Sert aux mentions qui engagent : remuneration des
   partenariats, avertissement sur le risque. Un liseré dore a
   gauche le distingue du texte courant sans l'alourdir.
   ============================================================ */
.m-disc {
  background: rgba(240,184,64,.07);
  border: 0; border-left: 3px solid var(--or);
  border-radius: var(--r-sm);
  padding: var(--s5); margin-block: var(--s6);
  font-size: 13.5px; line-height: 1.65; color: var(--text-2);
  text-align: left;
}
.m-disc b { color: var(--text); font-weight: 600; }

/* Variante claire du bloc, comme .cl-blanc */
.sg-blanc { background: transparent; }

/* ============================================================
   11. ALTERNANCE DES SECTIONS
   Le rang est pose dans le balisage par refondre-page.cjs, parce
   que :nth-of-type compterait tous les <div> freres et non les
   seuls blocs. Les sections paires recoivent un autre traitement,
   ce qui rompt la suite sans changer une ligne de contenu.
   ============================================================ */

/* La vignette ronde et le cadre teinte ont ete retires : ils
   empilaient trop d'elements dans un seul bloc. Toutes les sections
   adoptent desormais la meme composition — bandeau panoramique en
   tete, texte, puis points en pastilles. La variete vient du
   contenu et des grilles, pas d'un traitement alterne. */

/* Un bloc de vignettes pair inverse sa grille : les tuiles d'abord,
   la vedette en bas. L'oeil ne retrouve pas deux fois la meme forme. */
.m-bloc[data-rang="2"] .m-grid2,
.m-bloc[data-rang="4"] .m-grid2 { direction: rtl; }
.m-bloc[data-rang="2"] .m-grid2 > *,
.m-bloc[data-rang="4"] .m-grid2 > * { direction: ltr; }
.m-bloc[data-rang="2"] .m-grid2 .m-item:first-child,
.m-bloc[data-rang="4"] .m-grid2 .m-item:first-child { order: 99; }

/* ============================================================
   12. SEPARATEUR
   Entre deux sections de meme nature, un filet degrade evite
   qu'elles ne se confondent.
   ============================================================ */
.m-sec + .m-sec::before,
.m-bloc + .m-bloc::before {
  content: ''; display: block;
  height: 1px; width: 64px; margin: 0 auto var(--s8);
  background: linear-gradient(90deg, transparent, var(--hairline-2), transparent);
}

/* Le dynamisme s'applique aux nouvelles formes */
.m-steps.vu .m-step { animation: entree-carte .5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .m-steps.vu .m-step { animation: none; }
}

/* ============================================================
   13. CARTES DE VERIFICATION
   Remplacent une liste a puces : chaque point devient une petite
   carte avec son visuel. Posees par refondre-page.cjs a partir de
   cartes.json, elles donnent au bloc une respiration que quatre
   lignes de texte n'auraient jamais eue.
   ============================================================ */
/* Pastilles compactes en deux colonnes : icone au-dessus, libelle
   dessous. Elles remplacent les cartes illustrees, qui doublaient la
   hauteur du bloc alors que le bandeau porte deja l'image. */
.m-checks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2);
  margin: var(--s5) 0 var(--s6);
}
.m-check {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  background: rgba(22,22,26,.82); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.m-check:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* L'image de la pastille se reduit a une vignette ronde : le bandeau
   de la section porte deja l'illustration principale. */
.m-check-img {
  display: block; position: relative; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
}
.m-check-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.1); transform-origin: 50% 45%;
}
.m-check-img::after { display: none; }

.m-check-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(240,184,64,.16); color: var(--or); font-size: 18px;
  margin: 0;
}
.m-check-t {
  display: block; font-size: 12px; font-weight: 550;
  line-height: 1.35; letter-spacing: -.01em; color: var(--text);
  padding: 0;
}

/* Une pastille orpheline occupe la largeur restante */
.m-checks > .m-check:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  flex-direction: row; justify-content: center; gap: var(--s3);
}

@media (max-width: 360px) {
  .m-checks { grid-template-columns: 1fr; }
  .m-check { flex-direction: row; justify-content: flex-start; text-align: left; }
}

/* Entree en cascade */
.m-checks.vu .m-check, .m-pq.vu .m-check {
  animation: entree-carte .5s var(--ease) both;
}
.m-pq.vu .m-check:nth-child(2) { animation-delay: .07s; }
.m-pq.vu .m-check:nth-child(3) { animation-delay: .14s; }
.m-pq.vu .m-check:nth-child(4) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .m-checks.vu .m-check, .m-pq.vu .m-check { animation: none; }
}

/* ============================================================
   16. GRILLES A DEUX ELEMENTS
   Le format vedette suppose au moins trois elements : a deux, il
   produisait une carte pleine largeur suivie d'une tuile
   solitaire — pire que le desequilibre qu'il corrige.

   A deux elements il n'y a rien a hierarchiser : les deux sont
   traites a egalite, en cartes larges empilees. Deux tuiles
   etroites cote a cote tronqueraient leurs textes.

   :only-of-type ne convient pas ici — on cible le premier
   element qui est aussi l'avant-dernier, ce qui n'est vrai que
   dans une grille de deux.
   ============================================================ */

.m-grid2 > .m-item:first-child:nth-last-child(2),
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item,
.m-grid3 > .m-item:first-child:nth-last-child(2),
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 56px 1fr;
  grid-template-areas: 'ic titre' 'ic texte' 'ic lien';
  gap: 2px var(--s4); align-items: start;
  padding: var(--s5) var(--s5) var(--s5) var(--s5);
  text-align: left;
  /* Fond uniforme : plus de teinte de vedette, les deux sont a egalite */
  background: rgba(22,22,26,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.m-grid2 > .m-item:first-child:nth-last-child(2) .m-item-ic,
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-item-ic,
.m-grid3 > .m-item:first-child:nth-last-child(2) .m-item-ic,
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-item-ic {
  grid-area: ic; width: 56px; height: 56px; font-size: 24px;
  margin: 0; align-self: center;
}
.m-grid2 > .m-item:first-child:nth-last-child(2) h4,
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item h4,
.m-grid3 > .m-item:first-child:nth-last-child(2) h4,
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item h4 {
  grid-area: titre; font-size: 16.5px; margin: 0;
}
.m-grid2 > .m-item:first-child:nth-last-child(2) > p,
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item > p,
.m-grid3 > .m-item:first-child:nth-last-child(2) > p,
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item > p {
  grid-area: texte; font-size: 13.5px; line-height: 1.5;
  margin: 5px 0 var(--s3); max-width: none;
  -webkit-line-clamp: 3;
}
/* Le lien reprend sa place : la carte est large, il a de quoi respirer */
.m-grid2 > .m-item:first-child:nth-last-child(2) .m-item-go,
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-item-go,
.m-grid3 > .m-item:first-child:nth-last-child(2) .m-item-go,
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-item-go {
  grid-area: lien; display: inline-flex;
}
.m-grid2 > .m-item:first-child:nth-last-child(2) .m-tag,
.m-grid2 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-tag,
.m-grid3 > .m-item:first-child:nth-last-child(2) .m-tag,
.m-grid3 > .m-item:first-child:nth-last-child(2) ~ .m-item .m-tag {
  position: absolute; top: var(--s4); right: var(--s4);
  margin: 0; align-self: auto;
}

/* ============================================================
   17. VIE DES IMAGES
   Une image fixe dans un bloc sombre parait morte. Trois gestes
   discrets suffisent a l'animer, sans jamais gener la lecture :
   un zoom lent en continu, un rapprochement au survol, et une
   entree en fondu au defilement.

   Tout s'arrete si le systeme demande a reduire les animations —
   ces effets sont un agrement, jamais une condition de lecture.
   ============================================================ */

/* ---------- Bandeaux de section : respiration lente ---------- */
.m-pq-img, .m-pq-img-ajout { isolation: isolate; }

/* Une lueur passe lentement sur le bandeau, comme un reflet */
.m-pq-img::before, .m-pq-img-ajout::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.07) 46%, transparent 62%);
  transform: translateX(-120%);
  animation: reflet 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes reflet {
  0%, 55% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* ---------- Vignettes de la vitrine et des pastilles ---------- */
.m-check-img img, .m-item-ic {
  transition: transform .3s var(--ease);
}
.m-check:hover .m-check-img img { transform: scale(1.18); }
.m-item:hover .m-item-ic { transform: scale(1.08) rotate(-4deg); }

/* ---------- Heros et appel a l'action : zoom continu ---------- */
/* Le heros bouge desormais lui aussi : zoom et translation combines,
   pour que le mouvement se voie sans etre agressif. */
.m-hero-img img {
  animation: souffle 11s ease-in-out infinite alternate;
}
@keyframes souffle {
  from { transform: scale(1.06) translate(-1.5%, -1%); }
  to   { transform: scale(1.2) translate(2%, 1.5%); }
}

/* Un reflet traverse aussi la carte du heros */
.m-hero-img::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    transparent 32%, rgba(255,255,255,.09) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: reflet 6s ease-in-out infinite;
  pointer-events: none;
}

.m-cta::after { animation: souffle-cta 13s ease-in-out infinite alternate; }
@keyframes souffle-cta {
  from { background-size: 108% auto; background-position: 48% 22%; }
  to   { background-size: 130% auto; background-position: 54% 46%; }
}

/* ---------- Entree au defilement ---------- */
/* L'image arrive legerement agrandie et se pose : le mouvement
   accompagne l'apparition du bloc au lieu de la doubler. */
.m-pq-img, .m-pq-img-ajout, .m-check-img { overflow: hidden; }
.m-pq.vu .m-pq-img img,
.m-pq.vu .m-pq-img-ajout img,
.m-sec.vu .m-pq-img img {
  animation: derive-visuel 9s ease-in-out infinite alternate,
             pose .7s var(--ease) both;
}
@keyframes pose {
  from { transform: scale(1.12); opacity: .4; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------- Bordure vivante sur les cartes survolees ---------- */
.m-item, .m-check, .m-step {
  position: relative; isolation: isolate;
}
.m-item::before, .m-check::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(126,76,255,.22), rgba(240,184,64,.16));
  opacity: 0; transition: opacity .25s var(--ease);
}
.m-item:hover::before, .m-check:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .m-pq-img::before, .m-pq-img-ajout::before,
  .m-hero-img::before,
  .m-hero-img img, .m-cta::after,
  .m-pq.vu .m-pq-img img, .m-pq.vu .m-pq-img-ajout img,
  .m-sec.vu .m-pq-img img {
    animation: none;
  }
  .m-check:hover .m-check-img img,
  .m-item:hover .m-item-ic { transform: none; }
}