/* ===== etapes.css — LE DÉROULÉ « Comment ça se passe » ====================
 *
 * Écrit le 25/08/2026 (Lino) : « après le bloc texte de chaque domaine nous
 * allons ajouter une explication par étape de mon service ». Commun aux SIX
 * pages de domaine.
 *
 * ⚠️ AUCUNE COULEUR EN DUR, AUCUNE VARIABLE DE PALETTE EMPRUNTÉE — même
 * contrat que `menu.css` et `carrousel.css`. Cette feuille déclare ses propres
 * `--et-*` avec un repli neutre ; c'est la feuille du monde qui les remplit.
 * ⚠️ À CHARGER AVANT celle du monde : à spécificité égale c'est l'ordre qui
 * tranche, et le monde doit pouvoir habiller le composant.
 * --------------------------------------------------------------------------
   ⚠️⚠️ LES CHIFFRES SONT AFFICHÉS, ET C'EST UNE DEMANDE EXPLICITE DE LINO
   (25/08/2026, « numérote-les »). ⚠️ Le déroulé compte 5 ÉTAPES depuis le
   26/08/2026 (avant : 7) — les trois premières ont fusionné en une carte, la
   première portant les deux autres en sous-points. Le compteur CSS suit tout
   seul, de 1 à 5. ⚠️ CELA DÉROGE À SA PROPRE
   RÈGLE, celle qui a fait retirer la colonne « 01 / 02 / 03 » du module 2 de
   /creation-site le 05/08 puis les « Étape 1 à 4 » du module 5 le 06/08 —
   « ça fait trop amateur ». La règle n'est pas abandonnée : elle visait des
   numéros DÉCORATIFS, posés sur des blocs dont l'ordre n'apportait rien. Ici
   l'ordre EST le sujet — c'est un déroulé dans le temps, de la prise de
   contact à la réception des vidéos — et il a tranché en connaissance de
   cause, après que la règle lui a été rappelée.
   ⚠️ NE PAS LES RETIRER en invoquant la règle générale. Si un doute revient,
   c'est à lui de le lever, pas à la règle.

   Le compteur vient du CSS et non du HTML : `<ol>` porte déjà l'ordre, écrire
   les chiffres à la main les ferait mentir dès qu'une étape bouge. Les
   pastilles sont reliées par un fil vertical — la chronologie se lit donc deux
   fois, par les numéros et par le trait. */
.mt-etapes {
  width: min(1080px, 100% - 2.8rem);
  margin: 0 auto;
  padding-bottom: clamp(52px, 10vh, 104px);
  max-width: 62ch;
}
.mt-etapes-sur {
  margin: 0 0 0.45rem;
  font-family: var(--et-sans, inherit);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--et-accent, currentColor);
}
.mt-etapes-h {
  margin: 0 0 1.4rem;
  font-family: var(--et-titre, inherit);
  font-weight: var(--et-poids, 500);
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: var(--et-track, normal);
  color: var(--et-encre, currentColor);
  text-wrap: balance;
}

/* ⚠️⚠️ LE FIL EST PORTÉ PAR CHAQUE ÉTAPE, PAS PAR LA LISTE — et le premier
   jet faisait l'inverse, à tort. Un trait unique posé sur l'`<ol>` va de son
   sommet à son bas : il DÉPASSAIT donc sous la dernière pastille et pendait
   dans le vide, et rien en CSS ne permet de l'arrêter là sans connaître la
   hauteur de la dernière ligne. Un segment par étape, masqué sur la dernière,
   règle le problème par construction, quel que soit le nombre d'étapes et quelle
   que soit la langue. */
.mt-etapes-liste {
  margin: 0;
  /* La réserve à gauche loge la pastille numérotée (24 px) plus son écart au
     texte. La changer oblige à revoir `left` sur la pastille ET sur le fil. */
  padding: 0 0 0 2.6rem;
  list-style: none;
  counter-reset: etape;
}
.mt-etapes-liste li {
  position: relative;
  margin-bottom: 1rem;
  font-size: clamp(0.98rem, 2.2vw, 1.06rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--et-texte, currentColor);
}
.mt-etapes-liste li:last-child { margin-bottom: 0; }

/* ===== LES DEUX SOUS-POINTS DE L'ÉTAPE 1 (Lino, 26/08/2026) ===============
   « Le 2 et le 3 avec des tirets en dessous du texte du 1, dans la même
   carte. » `.mt-et-t` est le titre de l'étape, `.mt-et-sous` les deux lignes
   en tiret. Une seule carte en porte, mais le CSS n'en préjuge pas : toute
   étape future à sous-points reprendra ces classes.
   ⚠️ `.mt-et-corps` ENVELOPPE LE TOUT pour la variante « adossé » (flex) : sans
   lui, titre et sous-points deviendraient deux colonnes à côté du numéro. La
   variante par défaut (filigrane) n'en a pas besoin — le corps y suit le flux.
   ⚠️ LE TIRET EST UN `::before`, pas un `list-style` : ces lignes sont des
   `<span>`, pas des `<li>`, pour ne pas fabriquer une liste dans une liste que
   les lecteurs d'écran annonceraient comme une seconde énumération. */
.mt-et-corps { display: block; }
.mt-et-t { display: block; }
.mt-et-sous { display: block; margin-top: 0.55rem; }
/* ⚠️ SANS TIRET (Lino, 26/08/2026 : « garde la mise en forme mais enlève les
   tirets »). On garde l'indentation et le corps réduit — c'est ce qui les fait
   lire comme des sous-points — mais plus de marque en tête. */
.mt-et-sous span {
  display: block;
  padding-left: 1.15em;
  margin-top: 0.3rem;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--et-texte, currentColor);
  opacity: 0.9;
}

/* La pastille porte le numéro : cerclée pour les étapes, PLEINE ET INVERSÉE
   pour la dernière — c'est l'arrivée. Un seul signe, aucun mot en plus :
   « vous recevez vos vidéos » se suffit.
   ⚠️ `place-items: center` sur une grille, et pas un `line-height` égal à la
   hauteur : à deux chiffres (une dixième étape un jour) le calage au
   line-height dérive, le centrage en grille non. */
.mt-etapes-liste li::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  left: -2.6rem;
  top: calc(0.8em - 12px);
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--et-sans, inherit);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--et-accent, currentColor);
  background: var(--et-pastille, #fff);
  border: 1px solid var(--et-accent, currentColor);
}
.mt-etapes-liste li:last-child::before {
  background: var(--et-accent, currentColor);
  color: var(--et-pastille, #fff);
}

/* Le segment de fil qui relie une pastille à la suivante. `bottom: -1rem`
   rejoint exactement l'étape d'après : c'est l'écart entre deux `li`. Les
   désaccorder laisse un trou dans le fil. */
/* ⚠️ `left` VISE LE CENTRE DE LA PASTILLE : -2,6 rem (son bord gauche) plus
   la moitié de ses 24 px, moins le demi-pixel du trait. Décalé d'un pixel, le
   fil ne sort plus du cercle et ça se voit tout de suite. */
.mt-etapes-liste li::after {
  content: "";
  position: absolute;
  left: calc(-2.6rem + 11.5px);
  top: calc(0.8em + 15px);
  bottom: -1rem;
  width: 1px;
  background: var(--et-filet, rgba(0,0,0,0.16));
}
.mt-etapes-liste li:last-child::after { content: none; }

/* ==========================================================================
   TROIS PRÉSENTATIONS AU CHOIX — `?etapes=1|2|3` — PROVISOIRE (25/08/2026)
   --------------------------------------------------------------------------
   Lino : « j'aimerais qu'elles soient plus esthétiques ». Le fil vertical
   reste le défaut le temps qu'il choisisse. Le détail de chaque piste est en
   tête de `carrousel.js`, qui héberge le comparateur.
   ⚠️ À RETIRER avec les deux pistes écartées dès que le choix est fait. */

/* ===== ?etapes=1 — CARTES =================================================
   Sept tuiles, le numéro en tête. Plus de fil : c'est la grille qui porte
   l'ordre, et elle se replie en deux puis trois colonnes.
   ⚠️ LE NUMÉRO REPASSE EN FLUX (`position: static`) : dans les autres pistes
   il est absolu, calé dans la marge. Ici il est DANS la tuile, au-dessus du
   texte — le laisser absolu le poserait par-dessus le cadre. */
[data-etapes^="cartes"] .mt-etapes-liste {
  display: grid;
  gap: 10px;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { [data-etapes^="cartes"] .mt-etapes-liste { grid-template-columns: 1fr 1fr; } }
/* ⚠️ SUR LAPTOP : 4 CARTES EN LIGNE, LA 5e PLEINE LARGEUR EN DESSOUS (Lino,
   26/08/2026, capture à l'appui). Le socle `cartes` fait déjà passer la
   DERNIÈRE carte sur toute la largeur (`grid-column: 1 / -1`, plus bas
   dans cette feuille). Avec 5 étapes et 4 colonnes : rangée 1 = 1·2·3·4, rangée 2 =
   la 5e étalée sur les quatre. ⚠️ Le conteneur `.mt-etapes` est plafonné à
   62ch pour le fil vertical ; en cartes sur laptop ce plafond est levé, sinon
   quatre colonnes ne tiendraient pas. */
@media (min-width: 1040px) {
  [data-etapes^="cartes"] .mt-etapes-liste { grid-template-columns: repeat(4, 1fr); }
  [data-etapes^="cartes"] .mt-etapes { max-width: none; }
}
[data-etapes^="cartes"] .mt-etapes-liste li {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--et-filet, rgba(0,0,0,0.16));
  border-radius: 14px;
  background: var(--et-pastille, #fff);
}
[data-etapes^="cartes"] .mt-etapes-liste li::before {
  position: static;
  margin: 0 0 0.55rem;
}
/* Plus de fil entre les tuiles : dans une grille il relierait des cases qui
   ne se suivent pas d'une ligne à l'autre. */
[data-etapes^="cartes"] .mt-etapes-liste li::after { content: none; }

/* ===== ?etapes=2 — FILIGRANE ==============================================
   Ni pastille, ni fil, ni cadre : un grand chiffre pâle en marge. C'est la
   piste la moins « gabarit », ce qui est précisément le reproche que Lino fait
   aux listes numérotées depuis le 05/08.
   ⚠️ `color-mix` A UN REPLI : sans lui, un navigateur qui ne le connaît pas
   afficherait le chiffre à pleine opacité et écraserait le texte. */
[data-etapes="filigrane"] .mt-etapes-liste { padding-left: 3.6rem; }
[data-etapes="filigrane"] .mt-etapes-liste li { margin-bottom: 1.45rem; }
[data-etapes="filigrane"] .mt-etapes-liste li::before {
  left: -3.6rem;
  top: -0.22em;
  width: 2.9rem; height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--et-titre, inherit);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1;
  justify-items: end;
  color: var(--et-accent, currentColor);
  color: color-mix(in srgb, var(--et-accent, currentColor) 32%, transparent);
}
[data-etapes="filigrane"] .mt-etapes-liste li:last-child::before {
  color: var(--et-accent, currentColor);
}
[data-etapes="filigrane"] .mt-etapes-liste li::after { content: none; }

/* ===== ?etapes=3 — FRISE ALTERNÉE =========================================
   ⚠️ L'ALTERNANCE N'EXISTE QU'AU-DELÀ DE 760 px. En dessous, chaque colonne
   ferait 150 px de large sur un écran de 375 et les phrases partiraient sur
   six lignes. Sous ce seuil, on garde exactement le fil d'aujourd'hui — la
   piste ne se distingue donc du défaut que sur ordinateur.
   ⚠️ `nth-child` ET NON `nth-of-type` : toutes les étapes sont des <li>, les
   deux reviendraient au même ici, mais la règle du site est de compter les
   ENFANTS (leçon de la carte de connexion de /creation-site, où les balises
   étaient différentes et où la cascade s'était effondrée). */
@media (min-width: 760px) {
  [data-etapes="frise"] .mt-etapes-liste {
    position: relative;
    padding: 0;
  }
  /* Le fil central, continu, posé sur la liste : il n'a pas ici le défaut de
     dépasser sous la dernière étape, puisqu'il est masqué par la pastille
     pleine de l'arrivée, qui est opaque et centrée dessus. */
  [data-etapes="frise"] .mt-etapes-liste::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.6em; bottom: 0.6em;
    width: 1px;
    margin-left: -0.5px;
    background: var(--et-filet, rgba(0,0,0,0.16));
  }
  [data-etapes="frise"] .mt-etapes-liste li {
    width: 50%;
    margin-bottom: 1.5rem;
    padding-right: 2.4rem;
    text-align: right;
  }
  [data-etapes="frise"] .mt-etapes-liste li:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 2.4rem;
    text-align: left;
  }
  /* La pastille se cale sur le fil, du bon côté selon la ligne. */
  [data-etapes="frise"] .mt-etapes-liste li::before {
    left: auto; right: -12px;
    top: 0.42em;
  }
  [data-etapes="frise"] .mt-etapes-liste li:nth-child(even)::before {
    left: -12px; right: auto;
  }
  [data-etapes="frise"] .mt-etapes-liste li::after { content: none; }
}

/* ==========================================================================
   TROIS REPRISES DE LA VARIANTE « CARTES » — `?etapes=1a|1b|1c`
   --------------------------------------------------------------------------
   Lino, 25/08/2026 : « j'aime bien l'affichage carte, comment le rendre plus
   joli ». Ce qui n'allait pas dans la version brute (`?etapes=1`), et qui est
   corrigé dans les trois : le NUMÉRO ÉTAIT SEUL SUR SA LIGNE au-dessus du
   texte, ce qui creusait un vide dans chaque carte — flagrant sur « Je viens
   filmer », deux mots pour une carte de 120 px de haut. Et les sept cartes
   étaient rigoureusement identiques, donc sans rythme.

   ⚠️ ELLES PARTAGENT TOUT LE SOCLE `cartes` : la grille, son repli en deux
   puis trois colonnes, l'absence de fil. Seuls changent le traitement du
   numéro et l'habillage. Le sélecteur du socle est en `^=` pour cette raison —
   ne pas le repasser en `=`, les trois reprises perdraient leur grille. */

/* ⚠️ LA DERNIÈRE ÉTAPE PREND TOUTE LA LARGEUR au-delà de 1040 px. Depuis le
   26/08/2026 la grille est à 4 colonnes et le déroulé à 5 étapes : rangée 1 =
   1·2·3·4, rangée 2 = la 5e (« Vous recevez vos vidéos ») étalée sur les
   quatre — c'est l'arrivée, elle se lit comme telle. Vaut pour les quatre
   variantes de cartes. */
@media (min-width: 1040px) {
  [data-etapes^="cartes"] .mt-etapes-liste li:last-child { grid-column: 1 / -1; }
}

/* ===== 1a — NUMÉRO ADOSSÉ =================================================
   Le numéro passe À CÔTÉ du texte au lieu d'être au-dessus : la carte perd sa
   ligne vide et se resserre. Pastille pleine, dans l'accent — c'est le seul
   point de couleur de la carte, qui n'a plus de bordure mais un fond teinté.
   ⚠️ `li` DEVIENT UNE RANGÉE FLEX : c'est ce qui met `::before` et le texte
   côte à côte. Sans ça le pseudo-élément en flux se comporte en bloc et
   retombe au-dessus, ce qui est exactement le défaut qu'on corrige. */
[data-etapes="cartes-adosse"] .mt-etapes-liste li {
  display: flex;
  align-items: flex-start;
  /* ⚠️ LE NUMÉRO A ÉTÉ RAPPROCHÉ DU BORD GAUCHE (Lino, 26/08/2026 : « je
     n'aime pas qu'il touche la bordure des cartes » — il le trouvait trop
     collé). La marge intérieure gauche passe de 1,1 à 0,7 rem, et l'écart au
     texte de 0,85 à 1,25 rem : le chiffre glisse de 6,4 px vers la gauche
     SANS que le texte bouge. Modifier l'un des deux seul déplacerait toute la
     ligne. */
  gap: 1.25rem;
  padding: 0.95rem 1.1rem 0.95rem 0.7rem;
  border: 0;
  border-radius: 14px;
  background: var(--et-pastille, #fff);
  background: color-mix(in srgb, var(--et-accent, #888) 7%, var(--et-pastille, #fff));
}
[data-etapes="cartes-adosse"] .mt-etapes-liste li::before {
  flex: 0 0 auto;
  margin: 0;
  width: 27px; height: 27px;
  font-size: 0.76rem;
  color: var(--et-pastille, #fff);
  background: var(--et-accent, currentColor);
  border-color: var(--et-accent, currentColor);
}

/* ===== 1b — CHIFFRE EN FILIGRANE ==========================================
   Le numéro devient un grand chiffre pâle posé dans le coin, DERRIÈRE le
   texte. La carte garde son filet fin ; c'est le chiffre qui fait la
   décoration, et il ne coûte aucune place.
   ⚠️ `overflow: hidden` sur la carte : le chiffre est volontairement plus
   grand que son coin, il doit être coupé par l'arrondi. Sans ça il dépasse et
   la grille se met à déborder. */
[data-etapes="cartes-filigrane"] .mt-etapes-liste li {
  position: relative;
  overflow: hidden;
  /* ⚠️ LA MARGE DROITE EST RÉSERVÉE AU CHIFFRE, et c'est indispensable : sans
     elle le texte occupe toute la largeur et LE CHIFFRE LUI PASSE DESSUS. Vu à
     l'écran avant correction — le « 2 » tombait au milieu de « vos problèmes »,
     le « 3 » sur « ces vidéos ». Un filigrane doit se lire comme un fond, pas
     comme une rature. Toucher à la taille du chiffre oblige à revoir cette
     marge. */
  padding: 1.05rem 3.4rem 1.15rem 1.15rem;
  border: 1px solid var(--et-filet, rgba(0,0,0,0.16));
  border-radius: 14px;
  background: var(--et-pastille, #fff);
}
[data-etapes="cartes-filigrane"] .mt-etapes-liste li::before {
  position: absolute;
  /* ⚠️⚠️ `left: auto` EST INDISPENSABLE, et son absence a coûté deux passes.
     Le socle pose `left: -2.6rem` sur la pastille. En ne redéclarant QUE
     `right`, on laissait les DEUX bords fixés : une boîte absolue en largeur
     auto s'étire alors de l'un à l'autre, donc sur toute la largeur de la
     carte. Le chiffre, centré par `place-items`, atterrissait au MILIEU du
     texte — d'où l'impression qu'il « passait dessus ». Ce n'était pas un
     problème de marge : la marge droite ajoutée au premier essai n'y pouvait
     rien, la boîte la traversait.
     ⚠️ `display: block` avec `text-align: right` remplace la grille centrée du
     socle : dans une boîte qui ne fait plus que la largeur du glyphe, un
     centrage n'a plus de sens et masquerait un futur décalage. */
  left: auto;
  right: -0.35rem; top: -0.9rem;
  z-index: 0;
  display: block;
  text-align: right;
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none;
  font-family: var(--et-titre, inherit);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--et-accent, currentColor);
  /* ⚠️ PASSÉ DE 13 % À 26 % LE 26/08/2026 (Lino : « une couleur un peu plus
     vive »). Le chiffre reste DERRIÈRE le texte (isolation + z-index plus bas),
     donc plus vif ne veut pas dire moins lisible : le texte garde son opacité
     pleine par-dessus. Ne pas dépasser ~30 %, au-delà le chiffre concurrence
     le titre. */
  color: color-mix(in srgb, var(--et-accent, currentColor) 26%, transparent);
}
/* ⚠️ LE TEXTE DOIT PASSER DEVANT LE CHIFFRE. `li` n'a pas d'enfant à cibler —
   son contenu est du texte nu — d'où le `::first-line`… qui ne peut pas porter
   de `z-index`. La solution qui marche sans toucher au HTML : donner au
   pseudo-élément un `z-index: 0` et au `li` un contexte d'empilement, le texte
   du li se peignant alors AU-DESSUS de son propre `::before`. */
[data-etapes="cartes-filigrane"] .mt-etapes-liste li { isolation: isolate; }

/* ===== 1c — CARTE À LISERÉ ================================================
   Pas de cadre complet : un liseré d'accent sur la tranche gauche, une ombre
   douce, et le numéro en petite pastille au-dessus du texte. C'est le
   traitement le plus proche des cartouches d'offre de la même page — la
   cohérence du bloc y gagne.
   ⚠️ L'OMBRE EST NEUTRE (noir translucide) et non tirée de `--mt-ombre` :
   `etapes.css` ne connaît aucune palette, c'est son contrat. Si une page
   veut son ombre à elle, elle la posera dans sa propre feuille. */
[data-etapes="cartes-lisere"] .mt-etapes-liste li {
  padding: 0.95rem 1.15rem 1.05rem;
  border: 0;
  border-left: 3px solid var(--et-accent, currentColor);
  border-radius: 0 14px 14px 0;
  background: var(--et-pastille, #fff);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
}
[data-etapes="cartes-lisere"] .mt-etapes-liste li::before {
  width: 22px; height: 22px;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  color: var(--et-pastille, #fff);
  background: var(--et-accent, currentColor);
  border-color: var(--et-accent, currentColor);
}