/* =========================================================================
   LA METHODE, feuille de page (v7, 2026-09-17)
   Chargee APRES styles.css, par methode.html seulement. Elle n'AJOUTE que ce
   qui n'appartient qu'a cette page : le schema en barres, sa legende, les
   fiches de phase sur nuit, le carrousel des modules. Elle ne redefinit aucun
   jeton de :root, aucune classe partagee (.carte, .bande, .entete, les
   entrees) et aucun @keyframes partage. Toutes ses classes portent le prefixe
   `mp-` (methode page), sauf les etats poses par carrousel.js.
   Mode d'emploi des fondations : 11-fondations-v7.md section 1.
   ========================================================================= */

/* =========================================================================
   1. LA BANDE DU MILIEU : le bloc de titre a gauche, l'objet a droite
   Decision D : « l'expert peut poser le kicker et le titre de section a
   gauche du schema si la bande y gagne ». Elle y gagne : sans cela, l'objet
   occupe 62 % de la largeur et 38 % de la bande reste vide, ce que la
   direction artistique refuse (A2, remplir le cadre).
   ========================================================================= */

.mp-tete-objet {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(36px, 4.6vw, 58px);
}

@media (min-width: 1000px) {
  .mp-tete-objet {
    /* 36 / 61 : l'objet central tient 61 % de la largeur de la bande, dans la
       fourchette de 55 a 70 % demandee par le contrat. */
    grid-template-columns: 36fr 61fr;
    gap: clamp(34px, 3vw, 54px);
    align-items: center;
  }
}

/* --- L'en-tete clair : deux colonnes sur grand ecran ---------------------
   Cette page est la seule dont l'en-tete n'a pas de visuel (le schema est
   descendu dans la bande, decision C). Le titre seul laisserait la moitie
   droite de la page vide, ce que la direction artistique refuse (A2). Le
   titre tient donc la colonne de gauche et l'intro celle de droite, posees
   sur la meme ligne de pied : une composition editoriale, pas un trou. */
.mp-entete { align-items: end; }
/* L'ecart entre le titre et l'intro est celui de la grille : la marge propre
   de l'intro s'y ajouterait, ce qui creusait un trou sur mobile. */
.mp-entete .entete-page__intro { margin-top: 0; }

@media (min-width: 1000px) {
  .mp-entete { grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 4vw, 64px); }
}

/* Le bloc de titre : centre en colonne unique (comme partout sur le site),
   aligne a gauche des qu'il devient une colonne. */
.mp-tete { margin-bottom: 0; max-width: 46ch; }

@media (min-width: 1000px) {
  .mp-tete { text-align: left; margin-inline: 0; }
  .mp-tete .filet-accent { margin-inline: 0; }
  .mp-tete .intro-section { margin-inline: 0; }
}

/* =========================================================================
   2. LE SCHEMA EN BARRES : un volume par phase, sa dalle, son ombre
   Axonometrie cavaliere (voir 12-methode-v7.md 3.1) : face avant en vrai
   rectangle, profondeur vers le haut a droite de (28, -18) pour la barre et
   (52, -34) pour la dalle, si bien que la barre est POSEE DANS sa dalle et
   non a cheval dessus.
   Aucune couleur de bleu n'est ecrite ici : les trois faces lisent les
   membres de `data-phase`, pose sur le groupe de chaque barre.
   ========================================================================= */

.mp-bloc { display: grid; }

.mp-schema {
  display: block;
  width: 100%;
  height: auto;
  /* Pas de `max-height` : la boite doit garder le rapport du viewBox pour que
     les quatre tiges, posees aux quarts de la largeur du dessin, tombent
     exactement sur les quatre colonnes de la legende, a toute largeur. Une
     hauteur bornee ferait letterboxer le dessin et les tiges glisseraient. */
}

.mp-face-haute { fill: var(--teinte-clair, var(--accent-clair)); }
.mp-face-avant { fill: var(--teinte, var(--accent)); }
.mp-face-cote { fill: var(--teinte-encre, var(--accent-profond)); }

/* L'occlusion du volume ENTIER : la lumiere tombe d'en haut, le bas s'assombrit.
   Elle couvre la silhouette et non la seule face avant : mesure au rendu, la
   face laterale restait alors plus claire que l'avant a hauteur egale, et le
   volume lisait comme eclaire par le bas. C'est aussi ce qui rend l'icone
   blanche lisible sur les quatre barres, la plus claire comprise
   (mesures : 12-methode-v7.md section 6). */
.mp-face-ombre { fill: url(#mp-ombre-face); }

/* Le filet clair sur les aretes du haut et les deux montants : c'est lui qui
   detache la barre la plus profonde (phase 4, #0e4ddf) du fond nuit, ou elle
   ne tient que 2,8:1 en aplat. Il ne suit PAS le bord du bas : un filet clair
   la ou le volume touche le sol lisait comme une lumiere venue de dessous. */
.mp-arete { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.1; stroke-linejoin: round; }

/* La dalle de sol. Mesure au rendu : a 0,09 de remplissage, l'ombre posee
   dessus la noircissait et il ne restait qu'une tache sombre au lieu d'une
   dalle. Elle est remontee, et l'ombre a baisse d'autant. */
.mp-dalle { fill: rgba(174, 187, 216, 0.14); stroke: rgba(174, 187, 216, 0.3); stroke-width: 1; }
.mp-ombre-sol { fill: rgba(2, 5, 16, 0.5); filter: url(#mp-flou-sol); }
.mp-sol, .mp-tige { fill: none; stroke: var(--nuit-filet); stroke-width: 1; }

.mp-icone { stroke: var(--jour); }

/* Le rang, seul texte du dessin. Il prend le membre LISIBLE SUR NUIT de sa
   phase, jamais `--teinte` qui ne porte jamais de texte. */
.mp-rang {
  fill: var(--teinte-clair, var(--accent-clair));
  font-family: var(--police);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Le halo d'eclaircissement, pilote par `--mp-vif` (section 4). */
.mp-halo { fill: #ffffff; opacity: calc(0.2 * var(--mp-vif, 0)); transition: opacity 0.26s var(--courbe); }

/* Le reflet qui glisse une fois sur les faces hautes : une bande claire
   cisaillee, decoupee a l'union des quatre faces hautes. Invisible au repos,
   donc rien ne disparait quand le script est absent. */
.mp-reflet { fill: #ffffff; opacity: 0; transform-box: view-box; }

/* =========================================================================
   3. LA LEGENDE : le « panneau lateral » de la reference, passe dessous
   Quatre colonnes egales sur la meme largeur que le dessin : les quatre
   tiges du dessin, posees a 12,5 / 37,5 / 62,5 / 87,5 % de sa largeur,
   tombent donc au centre de chaque colonne sans un seul calage en dur.
   ========================================================================= */

.mp-legende {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-legende__lien {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 12px 6px 14px;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.24s var(--courbe);
}
.mp-legende__lien:hover { background: rgba(174, 187, 216, 0.1); }

.mp-legende__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--teinte-encre, var(--accent-profond));
  /* Le meme anneau que le halo de la barre, pilote par la meme variable :
     survoler la barre eclaire la pastille, survoler la pastille eclaire la
     barre. Une seule variable pour les deux sens. */
  box-shadow: 0 0 0 calc(2px * var(--mp-vif, 0)) var(--teinte-clair, var(--accent-clair));
  transition: box-shadow 0.26s var(--courbe);
}
.mp-legende__pastille .icone { width: 21px; height: 21px; stroke: var(--jour); }

.mp-legende__rang {
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.09em;
  color: var(--teinte-clair, var(--accent-clair));
}
.mp-legende__nom {
  font-size: var(--t-mini); font-weight: 800; color: var(--jour);
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.24s var(--courbe);
}
.mp-legende__lien:hover .mp-legende__nom,
.mp-legende__lien:focus-visible .mp-legende__nom { text-decoration-color: currentColor; }

/* Sous 560 px, quatre colonnes rendraient les noms illisibles (« Automatisation »
   sur cinq lignes). La legende passe a deux colonnes et les tiges du dessin
   s'effacent : elles ne relient plus rien. */
@media (max-width: 559px) {
  .mp-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .mp-tige { display: none; }
}

/* --- Le lien legende <-> barre, dans les deux sens ------------------------
   Une regle par phase : un selecteur ne sait pas comparer la valeur de deux
   attributs entre eux. Chaque regle ne pose qu'une variable, lue par le halo
   de la barre et par l'anneau de la pastille. Si `:has()` manque au
   navigateur, la regle est ignoree et rien d'autre ne change. */

.mp-bloc:has(.mp-legende__lien[data-phase="1"]:is(:hover, :focus-visible)) .mp-barre[data-phase="1"],
.mp-bloc:has(.mp-barre[data-phase="1"]:hover) .mp-legende__lien[data-phase="1"] { --mp-vif: 1; }
.mp-bloc:has(.mp-legende__lien[data-phase="2"]:is(:hover, :focus-visible)) .mp-barre[data-phase="2"],
.mp-bloc:has(.mp-barre[data-phase="2"]:hover) .mp-legende__lien[data-phase="2"] { --mp-vif: 1; }
.mp-bloc:has(.mp-legende__lien[data-phase="3"]:is(:hover, :focus-visible)) .mp-barre[data-phase="3"],
.mp-bloc:has(.mp-barre[data-phase="3"]:hover) .mp-legende__lien[data-phase="3"] { --mp-vif: 1; }
.mp-bloc:has(.mp-legende__lien[data-phase="4"]:is(:hover, :focus-visible)) .mp-barre[data-phase="4"],
.mp-bloc:has(.mp-barre[data-phase="4"]:hover) .mp-legende__lien[data-phase="4"] { --mp-vif: 1; }

/* =========================================================================
   4. L'ENTREE DU SCHEMA : les barres sortent de leur dalle
   Tout est garde par `.js-anim` : sans script, et sous mouvement reduit
   (ou `app.js` ne pose jamais `js-anim`), l'etat final est celui du repos.
   ========================================================================= */

/* Le conteneur du schema ne monte pas de 14 px comme les autres entrees : son
   entree EST la montee de ses barres. Seul le fondu est garde. */
.js-anim .mp-bloc.est-visible { animation-name: mp-fondu; }
@keyframes mp-fondu { from { opacity: 0; } to { opacity: 1; } }

.mp-barre { transform-box: view-box; }
.js-anim .mp-bloc.est-visible .mp-barre {
  animation: mp-monte 0.7s var(--courbe) var(--mp-retard, 0ms) backwards;
}
@keyframes mp-monte {
  from { transform: translateY(var(--mp-descente, 300px)); }
  to { transform: translateY(0); }
}

/* Par barre : sa propre course (sa hauteur plus 64 unites, pour que le rang
   pose au-dessus d'elle disparaisse aussi sous la decoupe du sol) et son
   propre retard. L'attribut de phase sert de selecteur : pas de classe en
   plus a tenir. */
.mp-barre[data-phase="1"] { --mp-descente: 160px; --mp-retard: 0ms; --mp-retard-icone: 1060ms; }
.mp-barre[data-phase="2"] { --mp-descente: 216px; --mp-retard: 120ms; --mp-retard-icone: 1140ms; }
.mp-barre[data-phase="3"] { --mp-descente: 278px; --mp-retard: 240ms; --mp-retard-icone: 1220ms; }
.mp-barre[data-phase="4"] { --mp-descente: 348px; --mp-retard: 360ms; --mp-retard-icone: 1300ms; }

/* Les icones apparaissent APRES les barres (la derniere finit sa course a
   1 060 ms), l'une apres l'autre. */
.js-anim .mp-icone { opacity: 0; }
.js-anim .mp-bloc.est-visible .mp-icone {
  opacity: 1;
  animation: mp-parait 0.5s var(--courbe) var(--mp-retard-icone, 1060ms) backwards;
}
@keyframes mp-parait { from { opacity: 0; } to { opacity: 1; } }

/* Le reflet : une fois, apres les icones. Il revient a `opacity: 0` de
   lui-meme (remplissage `backwards`, etat de repos invisible). */
.js-anim .mp-bloc.est-visible .mp-reflet {
  animation: mp-reflet 1.5s var(--courbe) 1.6s backwards;
}
@keyframes mp-reflet {
  from { transform: translateX(0) skewX(-22deg); opacity: 0; }
  26% { opacity: 0.46; }
  74% { opacity: 0.46; }
  to { transform: translateX(1460px) skewX(-22deg); opacity: 0; }
}

/* =========================================================================
   5. LES QUATRE FICHES DE PHASE, DANS LE CORPS CLAIR
   Correction du 17/09. Avant : la decision C faisait de TOUTE la section
   `#phases` la bande nuit, fiches comprises, soit 1 845 px de traversee
   sombre a 1280 (« charge et monotone »). Maintenant la bande garde le
   kicker, le titre, l'intro, le schema et sa legende ; les quatre fiches
   vivent sous le fondu, sur le fond clair du site.
   Elles reprennent le systeme de cartes des fondations (section 1.4) : fond
   `--carte`, filet interieur, ombre de repos. `.carte` n'est ni redefinie ni
   copiee : ce sont ses trois jetons qui sont appeles ici.
   Le fond de la SECTION reste le blanc du site : c'est sur du blanc que le
   fondu de la bande finit sa course, et rien ne doit s'interposer. C'est aussi
   ce qui rend inutile le bandeau blanc que la section des modules portait
   (`.mp-suite-bande`, retire) : elle ne recoit plus le fondu.
   ========================================================================= */

/* Le bas de la bande porte deja le fondu sur `--h-fondu` (76,8 px a 1280),
   dont la moitie basse est blanche : la marge haute complete d'une section
   (`--section-y`) creusait par-dessus un trou entre la legende et les fiches
   auxquelles elle renvoie. */
.mp-phases { padding-top: clamp(14px, 2vw, 26px); }

.mp-phases .phase {
  background: var(--carte);
  /* `.phase` porte un filet de 1 px ; le systeme de cartes le remplace par un
     filet INTERIEUR, qui ne s'ajoute pas a la geometrie. */
  border-color: transparent;
  box-shadow: var(--filet-interieur), var(--ombre-carte-repos);
  /* Un peu d'air au-dessus de la fiche visee par une ancre de la legende. La
     barre du site n'est pas fixee : il n'y a pas sa hauteur a compenser. */
  scroll-margin-top: 28px;
}

/* Un champ doit se detacher DANS la carte : sur un fond `--carte`, il prend le
   blanc, exactement l'inverse de la fiche sur nuit ou le champ etait le plus
   sombre des deux. */
.mp-phases .phase__champ { background: var(--jour); }

/* Une phase garde sa teinte PARTOUT (decision A.2). Sur clair, c'est le membre
   lisible `--teinte-encre` qui la porte, et non `--teinte-clair` qui servait
   sur la nuit. */
.mp-phases .phase__rang { color: var(--teinte-encre, var(--accent-profond)); }
.mp-phases .mp-signe { stroke: var(--teinte-encre, var(--accent-profond)); }

/* Une fiche visee par un lien de la legende se signale autrement que par le
   seul deplacement du defilement : un anneau de 2 px a sa propre teinte. */
.mp-phases .phase:target {
  box-shadow: var(--filet-interieur), var(--ombre-carte-repos), 0 0 0 2px var(--teinte-encre, var(--accent-profond));
}

/* =========================================================================
   6. LE CARROUSEL DES QUATRE MODULES
   Sans script, RIEN de cette section ne s'applique : la grille `.couches`
   d'aujourd'hui reste, et le pilotage est absent (il ne piloterait rien).
   `carrousel.js` pose `mp-car-pret` sur la racine du carrousel, et c'est
   cette classe qui ouvre tout ce qui suit.
   ========================================================================= */

.mp-car__pilotage { display: none; }
.mp-car-pret .mp-car__pilotage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* Le cadre : un conteneur a defilement natif, avec accrochage au centre. Le
   glissement est donc celui du navigateur (tactile sur mobile, sans une seule
   mesure en JavaScript) et le debordement reste enferme ici : la page, elle,
   ne deborde pas. Les 18 px de marge verticale laissent la place a l'ombre et
   a la levee de 5 px d'une carte survolee, que `overflow-y: hidden`
   couperait sinon. */
.mp-car-pret .mp-car__cadre {
  /* Le cadre devient le parent de positionnement : `carrousel.js` lit
     `offsetLeft` pour savoir ou faire defiler, et sans cela cette valeur se
     mesurerait depuis le document entier (mesure : 420 px au lieu de 246, la
     carte se centrait 174 px trop a droite). */
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-block: 18px;
  scrollbar-width: none;
}
.mp-car-pret .mp-car__cadre::-webkit-scrollbar { display: none; }

.mp-car-pret .mp-car__piste {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Deux enveloppes et non une, pour une raison mesuree : l'etendue defilable
   d'un conteneur tient compte du debordement VISUEL, donc des transformations.
   Une case reduite a 0,88 rapetissait l'etendue de 36 px par case et la
   derniere carte n'atteignait plus le centre (1 566 px de course pour 1 848
   dus). La CASE garde donc sa taille de mise en page et son point
   d'accrochage ; c'est l'ECRIN, a l'interieur, qui se reduit, s'atenue et se
   floute. La `.carte` elle-meme ne porte aucune transformation : son survol a
   deja la sienne. */
.mp-car-pret .mp-car__case {
  flex: 0 0 var(--mp-case-l);
  scroll-snap-align: center;
}
/* L'air qui permet a la premiere et a la derniere carte de venir au centre :
   la moitie de ce qui reste du cadre quand une carte l'occupe. Il vaut zero par
   defaut et `carrousel.js` le pose en PIXELS (setProperty), a la mise en service
   puis a chaque redimensionnement. C'est la seule valeur de style que le script
   ecrit, et deux formulations purement CSS ont ete essayees et MESUREES avant
   d'y venir :
     - marge interieure de la piste en pourcentage : la valeur est juste (246 px)
       mais la marge de FIN n'entre pas dans l'etendue defilable du cadre
       (2 694 px au lieu de 2 940), donc la derniere carte n'atteint pas le
       centre ;
     - marge en pourcentage sur les cases extremes : circulaire, elle se resout
       sur la largeur de la piste, qui depend de ses cases (624 px au lieu de
       246). Une marge en pixels ne depend de rien. */
.mp-car-pret .mp-car__case:first-child { margin-inline-start: var(--mp-air, 0px); }
.mp-car-pret .mp-car__case:last-child { position: relative; }
/* Du cote de la FIN, ni marge ni marge interieure ne comptent : le moteur les
   exclut de l'etendue defilable (mesure : 2 694 px au lieu de 2 940, la
   derniere carte s'arretait a 246 px du centre). Un element positionne, lui,
   y entre. D'ou cette cale de 1 px de haut posee a droite de la derniere case :
   elle ne se voit pas et elle ouvre la course qui manquait. */
.mp-car-pret .mp-car__case:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--mp-air, 0px);
  height: 1px;
}
.mp-car__case, .mp-car__ecrin { display: flex; }
.mp-car__ecrin > .carte { flex: 1 1 auto; }
.mp-car-pret .mp-car__ecrin {
  flex: 1 1 auto;
  transform: scale(0.88);
  opacity: 0.55;
  filter: blur(1.6px);
  transition: transform 0.5s var(--courbe), opacity 0.5s var(--courbe), filter 0.5s var(--courbe);
}
.mp-car-pret .mp-car__case--vive .mp-car__ecrin {
  transform: none;
  opacity: 1;
  filter: none;
}

/* La largeur d'une carte, en valeur ABSOLUE (voir l'air de centrage). Elle est
   CALCULEE pour que le bord de la voisine se voie, et non choisie a vue. La
   voisine etant reduite a 0,88, son bord gauche visible se trouve a
   centre + L/2 + ecart + 0,06 L ; ce qui reste du cadre est donc
   cadre/2 - 0,56 L - ecart. A 66vw et 8 px d'ecart, mesure a 390 : 23 px de
   voisine visible de chaque cote (a 78vw, il n'en restait rien, constate sur
   capture). Au-dela de 860 px la carte se borne a 600 px, taille de lecture
   confortable, et il reste alors 194 px de voisine a 1440. */
.mp-car { --mp-case-l: 66vw; }
@media (min-width: 860px) {
  .mp-car { --mp-case-l: min(600px, 56vw); }
  .mp-car-pret .mp-car__piste { gap: 16px; }
}

/* --- Le pilotage : deux fleches, quatre points, un bouton de pause ------- */

.mp-car__fleche, .mp-car__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--filet);
  background: var(--jour);
  color: var(--accent-profond);
  cursor: pointer;
  transition: border-color 0.2s var(--courbe), transform 0.2s var(--courbe);
}
.mp-car__fleche:hover, .mp-car__pause:hover { border-color: var(--accent); transform: translateY(-2px); }
.mp-car__glyphe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-car__pause .mp-car__glyphe { fill: currentColor; stroke: none; }

.mp-car__points { display: flex; align-items: center; gap: 9px; }
.mp-car__point {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none; cursor: pointer;
}
/* La pastille est un pseudo-element : la cible tactile fait 30 px, le point
   visible 9 px. */
.mp-car__point::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--rayon-pilule);
  /* Mesure au rendu : a `--filet` (#e4e9f6) le point au repos tenait 1,42:1
     contre le fond lavande de la section, filet interieur compris, donc
     invisible, alors que c'est lui qui dit ou l'on en est dans la serie. A
     `--gris-clair` il tient 4,63:1, largement au-dela des 3:1 exiges d'un
     element d'interface. */
  background: var(--gris-clair);
  transition: background-color 0.24s var(--courbe), width 0.24s var(--courbe);
}
.mp-car__point:hover::before { background: var(--accent); }
.mp-car__point[aria-current="true"]::before {
  width: 26px;
  background: var(--teinte-encre, var(--accent-profond));
}

/* Quand le defilement automatique n'existe pas (mouvement reduit), le bouton
   de pause ne pilote rien : carrousel.js pose cette classe et il s'efface. */
/* Le bouton de pause ne pilote pas la meme chose que les fleches : un peu
   d'air le separe du groupe de navigation. */
.mp-car__pause { margin-inline-start: 6px; }

.mp-car--sans-defilement .mp-car__pause { display: none; }

/* =========================================================================
   7. MOUVEMENT REDUIT ET IMPRESSION
   Toutes les animations de cette feuille sont deja gardees par `.js-anim`,
   qu'`app.js` ne pose jamais sous mouvement reduit. Ce bloc est la ceinture :
   il coupe aussi les TRANSITIONS, que la garde ne couvre pas, et pose l'etat
   final. L'impression n'a rien a neutraliser ici : cette feuille ne masque
   aucun contenu (le reflet et le halo sont des ornements, pas du contenu).
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .mp-halo, .mp-legende__pastille, .mp-legende__nom,
  .mp-car__fleche, .mp-car__pause, .mp-car__point::before,
  .mp-legende__lien { transition: none; }
  /* L'ecrin porte sa transition sous `.mp-car-pret` : sans la meme garde ici,
     la regle perdrait en specificite et les cartes continueraient de glisser
     sur 0,5 s (mesure : 0,5 s encore active apres la premiere ecriture). */
  .mp-car-pret .mp-car__ecrin { transition: none; }
  .mp-barre, .mp-icone, .mp-reflet { animation: none; }
  .mp-icone { opacity: 1; }
  .mp-reflet { opacity: 0; }
}