/* =====================================================================
   PAGE DE DÉTAIL D'UN COURS E-LEARNING — préfixe « cx- »
   (resources/views/public/course/show.blade.php, septembre 2026)

   Bandeau sombre, carte d'achat collante à droite, contenu à gauche : la
   structure des grandes places de marché de cours, aux couleurs d'IT LAND.

   CE QUE CETTE FEUILLE NE FAIT PAS : redéfinir une classe fx-*. Celles-ci
   vivent dans theme.css et servent AUSSI la fiche des formations en salle.
   La page en réemploie quelques-unes telles quelles (boutons fx-btn,
   accordéon fx-mod / fx-lesson, barre fx-progress, carte fx-trainer) ; les
   seuls ajustements posés ici le sont SOUS un parent cx- et ne touchent que
   le confort (hauteur tactile, couleur du contour de focus, contraste de
   l'étiquette fx-eyebrow sur le fond uni de la page).

   Jetons : ceux de theme.css (:root), plus le marine du bandeau.
   ===================================================================== */

.cx-page {
  --cx-marine: #0b2f47;        /* validé « La Grille » : uni, jamais en dégradé */
  --cx-rail: 376px;            /* largeur de la carte d'achat */
  --cx-clair: #c9d9e6;         /* texte secondaire sur marine, jeton validé (9,6:1) */
  --cx-lien: #37a9e1;          /* liens sur marine, jeton validé (5,2:1) */
  --cx-encre: #1f2d3f;         /* titres sur fond clair, jeton validé */

  /* Le fond du bandeau déborde de sa colonne sur 100vw de chaque côté. On
     COUPE ce débordement ici, sans créer de conteneur de défilement :
     `clip`, et non `hidden`, qui ferait de ce bloc l'ancêtre défilant de la
     carte et lui retirerait son `position: sticky`. */
  overflow-x: clip;
}
/* Navigateurs sans `overflow: clip` (Safari < 16) : on préfère une carte qui
   ne colle plus à une page qui défile de côté. */
@supports not (overflow-x: clip) {
  .cx-page { overflow-x: hidden; }
}

/* LES ANCRES INTERNES ET L'EN-TÊTE COLLANT. Le bandeau crée deux liens qui
   n'existaient pas : « Créé par … » (#formateur) et « (N avis) » (#avis) ;
   #programme est offert aux autres pages. L'en-tête du site est collant
   (74 px) et theme.css ne réserve de marge de défilement que pour le
   back-office : sans ceci, la cible arrive SOUS l'en-tête, étiquette et
   titre masqués. #avis porte déjà les 56 px de `.fx-sec` : on ne lui ajoute
   que ce qui manque. */
.cx-page #programme,
.cx-page #formateur { scroll-margin-top: calc(var(--header-h) + 20px); }
.cx-page #avis { scroll-margin-top: calc(var(--header-h) - 32px); }

/* ------------------------------------------------------------------ Grille
   Trois cases : le bandeau (ligne 1, gauche), le contenu (ligne 2, gauche),
   et le rail de la carte, qui court sur les deux lignes à droite.
   `auto 1fr` : si la carte est plus haute que tout le reste, c'est la ligne
   du CONTENU qui s'étire — jamais le bandeau sombre. */
.cx-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cx-rail);
  grid-template-rows: auto 1fr;
  column-gap: 44px;
}
.cx-bandeau { grid-column: 1; grid-row: 1; }
.cx-rail    { grid-column: 2; grid-row: 1 / span 2; }
.cx-contenu { grid-column: 1; grid-row: 2; min-width: 0; }

/* ----------------------------------------------------------------- Bandeau */
.cx-bandeau {
  position: relative;
  z-index: 0;                  /* contexte d'empilement : le fond reste DERRIÈRE le texte… */
  min-width: 0;
  padding: 26px 0 40px;
  color: #fff;
}
/* …et derrière la carte (le rail est en z-index 1). Dégradé VERTICAL : le
   pseudo-élément fait trois écrans de large, un dégradé en biais s'y
   étirerait jusqu'à ne plus se voir. */
.cx-bandeau::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -100vw; right: -100vw;
  z-index: -1;
  background: var(--cx-marine);
}

.cx-ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .45rem;
  margin-bottom: 18px;
  font-size: .84rem; color: var(--cx-clair);
}
.cx-ariane a { color: var(--cx-lien); text-decoration: none; }
.cx-ariane a:hover { color: #fff; text-decoration: underline; }
.cx-ariane .sep { opacity: .6; }
.cx-ariane b { font-weight: 600; color: #fff; overflow-wrap: anywhere; }

.cx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cx-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: .42rem;
  min-height: 30px; padding: .28rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  transition: background var(--t);
}
.cx-badge svg { width: 15px; height: 15px; flex: none; }
a.cx-badge:hover { background: rgba(255, 255, 255, .2); color: #fff; }
/* Le badge fait 30 px de haut : la zone sensible, elle, en fait 46. */
a.cx-badge::after { content: ""; position: absolute; inset: -8px -2px; }
.cx-badge--cert { color: #ffd27a; border-color: rgba(255, 210, 122, .55); background: rgba(255, 210, 122, .1); }
.cx-pastille { width: 7px; height: 7px; border-radius: 50%; background: #7ee0d2; box-shadow: 0 0 0 3px rgba(126, 224, 210, .25); }

/* `.fx-scope h1` (theme.css) fixe police et marges des titres de la page :
   on passe par `.cx-page` pour que ces règles-ci l'emportent sans !important. */
.cx-page .cx-titre {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  line-height: 1.14; letter-spacing: -.02em;
  color: #fff;
  overflow-wrap: anywhere;     /* un titre à rallonge ne pousse pas la page */
}
.cx-accroche {
  margin: 0 0 18px; max-width: 62ch;
  font-size: 1.08rem; line-height: 1.55;
  color: var(--cx-clair);
}

.cx-reperes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  font-size: .9rem; color: var(--cx-clair);
}
.cx-reperes + .cx-reperes { margin-top: 10px; }
.cx-repere { display: inline-flex; align-items: center; gap: .42rem; min-width: 0; }
.cx-repere .ico { flex: none; opacity: .85; }
.cx-repere a { color: var(--cx-lien); text-decoration: underline; text-underline-offset: 2px; }
.cx-repere a:hover { color: #fff; }
.cx-note b { color: #ffd27a; font-size: 1rem; }
.cx-etoiles { color: #f5b301; letter-spacing: 2px; font-size: 1rem; line-height: 1; }

/* ------------------------------------------------------- Carte d'achat */
.cx-rail {
  position: relative;
  z-index: 1;                  /* au-dessus du fond du bandeau, qui passe dessous */
  min-width: 0;
  padding: 30px 0 56px;
}
/* Le cadre de la carte, à toutes les largeurs. `overflow: hidden` : les coins
   arrondis rognent la vignette. */
.cx-carte {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -14px rgba(11, 47, 71, .28), 0 1px 4px rgba(11, 47, 71, .10);  /* --ombre-carte, jeton validé */
}

/* COLLANTE — ET LA VIGNETTE S'EFFACE (grand écran seulement). Le `top` est
   négatif de la hauteur du visuel (largeur du rail × 10/16, connue puisque le
   rail est fixe) : la carte accompagne d'abord le défilement, la vignette
   glisse sous l'en-tête du site, puis la carte s'arrête, le PRIX au ras de
   l'en-tête. C'est le comportement des grandes plateformes, sans une ligne
   de script.

   JAMAIS PLUS HAUTE QUE L'ÉCRAN — ET C'EST LE BAS QUI CÈDE. La carte d'un
   visiteur fait ~1 100 px : la limite joue sur TOUS les portables courants
   (dès que la fenêtre fait moins de ~970 px de haut), pas seulement sur les
   petits. Première version : toute la carte défilait sur elle-même. La
   molette posée dessus faisait alors défiler L'INTÉRIEUR de la carte avant la
   page, et la carte collée montrait la liste et le partage — plus ni prix ni
   bouton, l'inverse de ce pour quoi elle colle. La carte est donc une colonne
   à trois étages : le visuel et le corps (prix, boutons, réassurance) ne
   bougent pas ; SEULE la suite (« Ce cours comprend », partage) défile quand
   la place manque. Son pied reste atteignable, le bouton reste en vue. */
@media (min-width: 1000px) {
  .cx-carte {
    --cx-vignette: calc(var(--cx-rail) * .625);
    position: sticky;
    top: calc(var(--header-h) - var(--cx-vignette));
    max-height: calc(100vh - var(--header-h) - 16px + var(--cx-vignette));
    display: flex; flex-direction: column;
  }
  .cx-visuel,
  .cx-carte-corps { flex: none; }
  .cx-carte-suite {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; scrollbar-width: thin;
  }

  /* LE FOCUS NE SE CACHE PAS SOUS L'EN-TÊTE. Carte collée, la vignette est
     rangée hors de la fenêtre — or c'est un lien, le premier de la carte. Au
     clavier (Maj+Tab depuis le bouton principal), il recevait le focus sans
     pouvoir revenir à l'écran : la carte collante ne suit pas le défilement
     que tente le navigateur. Le temps de ce focus, la carte redescend sous
     l'en-tête, vignette visible ; elle reprend sa place dès qu'il la quitte.
     À la souris rien ne change (`:focus-visible`). Un navigateur sans `:has()`
     ignore la règle et garde le comportement d'avant. */
  .cx-carte:has(a.cx-visuel:focus-visible) {
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
  }
}
/* Fenêtre trop basse (paysage réduit, zoom fort). Le corps d'un visiteur finit
   à ~480 px du haut une fois la carte collée : sous 600 px de fenêtre, la
   suite n'aurait plus 100 px pour défiler, et sous 500 la carte rognerait ses
   propres boutons. Elle redevient un bloc ordinaire, qui défile avec la page. */
@media (min-width: 1000px) and (max-height: 600px) {
  .cx-carte,
  .cx-carte:has(a.cx-visuel:focus-visible) { position: static; max-height: none; }
}

/* Le visuel en vignette 16/10. Les affiches sont des PORTRAITS : on cadre
   par le haut, là où sont le titre et le visage. Largeur ET hauteur sont
   posées : <x-picture> émet des attributs width/height, et une hauteur
   laissée libre ferait ignorer le rapport (voir le composant). */
.cx-visuel {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: linear-gradient(135deg, var(--cx-marine) 0%, var(--primary-600) 100%);
  color: #fff; text-decoration: none;
}
@supports not (aspect-ratio: 1) {
  .cx-visuel::before { content: ""; display: block; padding-top: 62.5%; }
}
.cx-visuel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
/* Le voile : il assoit le bouton et le libellé sur n'importe quelle affiche. */
.cx-visuel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 47, 71, .12) 0%, rgba(11, 47, 71, .68) 100%);
  pointer-events: none;
}
.cx-visuel-vide {
  position: absolute; inset: 0; z-index: 1;   /* au-dessus du voile : ce texte-là doit rester blanc */
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px; text-align: center; overflow: hidden;
  font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; line-height: 1.2;
}
.cx-visuel-vide > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Visuel CLIQUABLE sans image : le bouton lecture est centré, le libellé en
   bas — le texte de repli, centré lui aussi, passait DESSOUS (« Mana▶ement »).
   On lui réserve la bande située au-dessus du bouton, sur deux lignes au plus. */
a.cx-visuel .cx-visuel-vide {
  bottom: auto; height: calc(50% - 40px);
  padding: 12px 22px 0; font-size: 1.05rem;
}
a.cx-visuel .cx-visuel-vide > span { -webkit-line-clamp: 2; line-clamp: 2; }
.cx-visuel-lecture {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 62px; height: 62px; margin: -37px 0 0 -31px;
  border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--cx-marine);
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  transition: transform var(--t);
}
.cx-visuel-lecture svg { width: 24px; height: 24px; margin-left: 3px; }
a.cx-visuel:hover .cx-visuel-lecture { transform: scale(1.07); }
/* Une pastille opaque plutôt qu'un texte posé sur l'image : le contraste ne
   dépend plus de l'affiche (blanc sur marine à 88 % : > 8:1 au pire). */
.cx-visuel-libelle {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: .32rem .85rem; border-radius: var(--r-pill);
  background: rgba(11, 47, 71, .88); color: #fff;
  font-size: .86rem; font-weight: 700; white-space: nowrap;
}
/* LE CONTOUR DE FOCUS DU VISUEL. La carte rogne ce qui dépasse : il se dessine
   DEDANS. Et il se pose sur le VOILE (::after), pas sur le lien : l'image et le
   voile sont en position absolue, donc peints APRÈS le contour du lien — posé
   sur lui, l'anneau restait dessous, invisible (constaté dans Chromium).
   Deux tons, marine puis blanc : lisible sur n'importe quelle affiche. */
a.cx-visuel:focus-visible { outline: none; }
a.cx-visuel:focus-visible::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--cx-marine);
  outline: 3px solid #fff; outline-offset: -6px;
}

.cx-carte-corps { padding: 18px 22px 14px; }
/* La suite : « Ce cours comprend » garde le retrait du corps ; le partage a le sien. */
.cx-carte-suite { border-top: 1px solid var(--border); }
.cx-carte-inclus { padding: 0 22px 4px; }

.cx-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cx-prix-montant { font-family: var(--font-title); font-size: 2.1rem; font-weight: 700; line-height: 1.05; color: var(--cx-encre); }
.cx-prix-note { font-size: .95rem; color: var(--muted); }
/* Prix initial barré et réduction, à la suite du prix (fiche du cours en ligne). */
.cx-prix-barre { font-size: 1.05rem; color: var(--muted); text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.cx-prix-remise { align-self: center; padding: 3px 9px; border-radius: 999px; background: #fdeaea; color: #c2261f; font-size: .8rem; font-weight: 700; }
.cx-prix-sous { margin: 6px 0 14px; font-size: .85rem; color: var(--muted); }

.cx-acces { margin-bottom: 16px; }
.cx-acces-titre {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 12px;
  font-family: var(--font-title); font-weight: 700; font-size: 1.08rem; color: #166534;
}
.cx-acces-titre .ico { flex: none; }
.cx-acces-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: .88rem; color: #3a4a5e; }
.cx-acces-ligne b { color: var(--primary-600); font-size: .95rem; }

/* Confort tactile des boutons réemployés : le lien discret (fx-btn-link) ne
   faisait que 38 px de haut. Rien d'autre n'est changé aux fx-btn. */
.cx-carte .fx-btn { min-height: 44px; }
.cx-carte .fx-cta-col { margin-top: 0; gap: 8px; }
/* Les deux liens discrets se suivent sans l'écart des gros boutons : la carte
   y gagne la hauteur qui lui évite de défiler sur un écran courant. */
.cx-carte .fx-btn-link { padding-top: .2rem; padding-bottom: .2rem; }
.cx-carte .fx-btn-link + .fx-btn-link { margin-top: -8px; }

.cx-reassurance {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: .83rem; line-height: 1.45; color: #3a4a5e;
}
.cx-reassurance .ico { flex: none; margin-top: .1em; color: #15803d; }

.cx-page .cx-carte-titre {
  margin: 14px 0 6px;
  font-family: var(--font-title); font-size: 1rem; letter-spacing: -.01em; color: var(--cx-encre);
}
.cx-comprend { list-style: none; margin: 0; padding: 0 0 10px; }
.cx-comprend li { display: flex; align-items: flex-start; gap: .7rem; padding: .3rem 0; font-size: .88rem; line-height: 1.45; color: #3a4a5e; }
.cx-comprend .i { flex: none; display: inline-flex; margin-top: .1em; color: var(--primary-600); }

/* Le bloc de partage (partiel existant, non modifié) : fondu dans le pied de
   la carte — ni cadre ni ombre dans le cadre. */
.cx-partage { padding: 14px 22px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.cx-partage > .pg { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* Sur grand écran, les six réseaux tiennent en une rangée d'icônes. Le nom
   reste lu : chaque lien porte son aria-label (« Partager sur … ») ; les deux
   BOUTONS (copier, autre application) n'en ont pas et gardent leur texte. */
@media (min-width: 1000px) {
  .cx-partage a.pg-b { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .cx-partage a.pg-b > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Sur fond clair, le contour de focus de la charte (bleu pâle) se voit mal :
   on le fonce dans la carte et dans le contenu. */
.cx-carte :focus-visible,
.cx-contenu :focus-visible { outline-color: var(--primary-600); }

/* ----------------------------------------------------------------- Contenu */
.cx-contenu { padding: 36px 0 64px; }
/* L'étiquette fx-eyebrow (bleu #007daf, .78rem) passe sur fond blanc (4,6:1) ;
   sur le fond uni de la page (#f4f8fc) — cette colonne, mais aussi la section
   des avis — elle tombe à 4,3:1. On la fonce pour TOUTE la page, sous le
   parent cx- (6:1 sur le fond uni, 6,4:1 sur blanc) : une seule teinte
   d'étiquette d'un bout à l'autre. La classe partagée n'est pas touchée. */
.cx-page .fx-eyebrow { color: #00658f; }
.cx-contenu > * + * { margin-top: 40px; }

.cx-page .cx-h2 {
  margin: 0 0 8px;
  font-family: var(--font-title); letter-spacing: -.02em; line-height: 1.16;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  color: var(--cx-encre);
}
.cx-sous { margin: 0 0 18px; color: var(--muted); font-size: .98rem; }
/* La ligne de compteurs fx-curmeta remonte de 14 px (theme.css) : ce
   sous-titre-là garde la marge sur laquelle elle a été réglée. */
.cx-sous--programme { margin-bottom: 32px; }
.cx-texte { margin: 0; color: #3a4a5e; line-height: 1.7; }
.cx-bloc .fx-prose { margin-top: 14px; }

/* Encart « Préparez votre certification » */
.cx-certif {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  border: 1px solid #f2d59b; border-radius: var(--r-lg);
  background: var(--warning-050);
}
.cx-certif-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fbe3b8; color: #92400e; }
.cx-page .cx-certif h2 { margin: 2px 0 4px; font-family: var(--font-title); font-size: 1.08rem; color: var(--cx-encre); }
.cx-certif p { margin: 0; font-size: .93rem; line-height: 1.55; color: #3a4a5e; }

/* « Ce que vous apprendrez » : encadré, coches sur deux colonnes */
.cx-apprendre {
  padding: 24px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cx-coches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.cx-coches li { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; font-size: .94rem; line-height: 1.5; color: #3a4a5e; }
.cx-coches .chk { flex: none; display: inline-flex; margin-top: .22em; color: #15803d; }

/* « Une question ? » */
.cx-aide { padding: 20px 22px; border: 1px solid #cfe8f8; border-radius: var(--r-lg); background: linear-gradient(135deg, #eaf6fd 0%, #dcefff 100%); }
.cx-page .cx-aide h2 { margin: 0 0 6px; font-family: var(--font-title); font-size: 1.05rem; color: var(--cx-encre); }
.cx-aide p { margin: 0 0 6px; font-size: .9rem; color: #3a4a5e; }
.cx-aide a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: #00658f; }
.cx-aide a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- Téléphone
   Sous 1000 px : une seule colonne, dans l'ordre du code — bandeau, carte,
   contenu. La carte est un bloc ordinaire : rien n'y colle, rien n'y défile
   (tout ce qui la rend collante est posé au-dessus de 1000 px). */
@media (max-width: 999px) {
  .cx-grille { display: block; }
  .cx-bandeau { padding: 20px 0 58px; }
  /* La carte mord de 34 px sur le bandeau : le rappel du chevauchement. */
  .cx-rail { padding: 0; margin-top: -34px; }
  .cx-carte { max-width: 560px; margin: 0 auto; }
  .cx-contenu { padding: 32px 0 48px; }

  /* Cibles tactiles ≥ 44 px pour les liens du bandeau et les boutons de partage. */
  .cx-ariane a,
  .cx-repere a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Des lignes de repères au même pas, qu'elles portent un lien ou non. */
  .cx-reperes { row-gap: 0; }
  .cx-reperes + .cx-reperes { margin-top: 0; }
  .cx-repere { min-height: 34px; }
  .cx-partage .pg-b { min-height: 44px; padding-left: .95rem; padding-right: .95rem; }
}
@media (max-width: 640px) {
  .cx-coches { grid-template-columns: 1fr; }
  .cx-apprendre { padding: 20px 18px; }
  .cx-carte-corps { padding: 18px 18px 14px; }
  .cx-carte-inclus { padding: 0 18px 6px; }
  .cx-partage { padding: 16px 18px 18px; }
  .cx-prix-montant { font-size: 1.9rem; }
  .cx-certif { padding: 16px; gap: 12px; }
}

/* ------------------------------------------------------ Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  /* theme.css pose `html { scroll-behavior: smooth }` sans exception. Les liens
     internes du bandeau (#avis, #formateur) feraient défiler des milliers de
     pixels EN ANIMATION chez qui a demandé à en voir moins. Cette feuille
     n'est chargée que sur cette page : la règle ne déborde nulle part. */
  html { scroll-behavior: auto; }
  .cx-badge,
  .cx-visuel-lecture { transition: none; }
  a.cx-visuel:hover .cx-visuel-lecture { transform: none; }
}