/* Animations de la vitrine, communes à tous les thèmes.

   1. « Animation d'entrée » (onglet Apparence de chaque section) :
      classes anim anim--<effet> [anim--rapide|anim--lente] sur l'enveloppe
      .builder-section, état final .is-visible posé par animations.js.
   2. Blocs du groupe « Animations » (préfixe ab-).

   Règles communes :
   - rien n'est caché tant que le script n'a pas démarré (classe ab-js sur
     <html>) : sans JavaScript, tout reste visible ;
   - prefers-reduced-motion coupe tout mouvement, le contenu reste affiché ;
   - couleurs tirées des variables du thème (--t-*), avec un repli pour les
     thèmes historiques qui ne les définissent pas. */

.ab, .anim { --ab-primaire: var(--t-primary, #111); --ab-second: var(--t-secondary, #e63946); --ab-texte: var(--t-text, #1d1d1f); --ab-fond: var(--t-bg, #fff); --ab-doux: var(--t-muted, #6b7280); --ab-bord: var(--t-border, #e5e7eb); --ab-surface: var(--t-surface, #f5f5f7); --ab-rayon: var(--t-radius, 12px); --ab-sur-primaire: var(--t-on-primary, #fff); }

/* ------------------------------------------------ 1. animation d'entrée */
.anim { --ab-duree: .8s; }
.anim--rapide { --ab-duree: .45s; }
.anim--lente { --ab-duree: 1.3s; }
.ab-js .anim:not(.is-visible) { opacity: 0; }
.ab-js .anim--monter:not(.is-visible) { transform: translateY(48px); }
.ab-js .anim--gauche:not(.is-visible) { transform: translateX(-60px); }
[dir="rtl"].ab-js .anim--gauche:not(.is-visible), .ab-js [dir="rtl"] .anim--gauche:not(.is-visible) { transform: translateX(60px); }
.ab-js .anim--zoom:not(.is-visible) { transform: scale(.92); }
.ab-js .anim--flou:not(.is-visible) { filter: blur(14px); }
.ab-js .anim--cascade:not(.is-visible) { opacity: 1; }
.ab-js .anim--cascade:not(.is-visible) .builder-section__inner :is(h1, h2, h3, h4, p, li, img, a, figure, .pq-shop-box, .col, [class*="col-"]) { opacity: 0; transform: translateY(26px); }
.ab-js .anim {
    transition: opacity var(--ab-duree) ease, transform var(--ab-duree) cubic-bezier(.2, .7, .2, 1), filter var(--ab-duree) ease;
}
.ab-js .anim--cascade .builder-section__inner :is(h1, h2, h3, h4, p, li, img, a, figure, .pq-shop-box, .col, [class*="col-"]) {
    transition: opacity var(--ab-duree) ease, transform var(--ab-duree) cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--ab-rang, 0) * 70ms);
}

/* ------------------------------------------------------- éléments communs */
.ab { position: relative; padding-block: clamp(56px, 8vw, 110px); color: var(--ab-texte); overflow: hidden; }
.ab__surtitre { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ab-primaire); }
.ab__titre { margin: 0 0 14px; font-family: var(--t-font-head, inherit); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; color: inherit; }
.ab__entete { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 12px 28px; border-radius: var(--t-btn-radius, 999px); background: var(--ab-primaire); color: var(--ab-sur-primaire); font-weight: 600; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.ab-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px var(--ab-primaire); color: var(--ab-sur-primaire); }
.ab-btn--clair { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
.ab-btn--clair:hover { background: #fff; color: #111; }
.ab-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------- titre animé */
.ab-titre__inner { max-width: 980px; text-align: center; }
.ab-titre__titre { margin: 0 0 18px; font-family: var(--t-font-head, inherit); font-weight: 700; line-height: 1.08; color: inherit; }
.ab-titre--moyen .ab-titre__titre { font-size: clamp(30px, 4vw, 48px); }
.ab-titre--grand .ab-titre__titre { font-size: clamp(36px, 6vw, 72px); }
.ab-titre--geant .ab-titre__titre { font-size: clamp(44px, 9vw, 120px); letter-spacing: -.02em; }
.ab-titre__debut { display: block; }
.ab-titre__mots { display: inline-block; position: relative; min-height: 1.1em; color: var(--ab-primaire); white-space: nowrap; }
.ab-titre__mot { display: inline-block; }
.ab-titre__texte { max-width: 620px; margin: 0 auto 22px; font-size: clamp(16px, 1.4vw, 19px); color: var(--ab-doux); }
/* machine à écrire : curseur clignotant */
.ab-titre--machine .ab-titre__mots::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-inline-start: .06em; vertical-align: -.05em; background: currentColor; animation: ab-curseur 1s steps(1) infinite; }
@keyframes ab-curseur { 50% { opacity: 0; } }
/* glissement : le mot sort vers le haut, le suivant arrive du bas */
.ab-titre--glisse .ab-titre__mots { overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.ab-titre--glisse .ab-titre__mot.is-sortie { animation: ab-sortie .45s ease forwards; }
.ab-titre--glisse .ab-titre__mot.is-entree { animation: ab-entree .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ab-sortie { to { transform: translateY(-110%); opacity: 0; } }
@keyframes ab-entree { from { transform: translateY(110%); opacity: 0; } }
/* dégradé : le titre entier est parcouru par les couleurs du thème */
.ab-titre--degrade .ab-titre__titre { background: linear-gradient(100deg, var(--ab-texte) 0%, var(--ab-primaire) 30%, var(--ab-second) 55%, var(--ab-primaire) 75%, var(--ab-texte) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ab-degrade 6s linear infinite; }
.ab-titre--degrade .ab-titre__mots { color: inherit; }
@keyframes ab-degrade { to { background-position: -250% 0; } }
/* surligneur : un trait de couleur passe sous le mot */
.ab-titre--surligne .ab-titre__mots { color: inherit; z-index: 0; }
.ab-titre--surligne .ab-titre__mot { position: relative; }
.ab-titre--surligne .ab-titre__mot::before { content: ""; position: absolute; inset-inline: -.08em; bottom: .08em; height: .38em; z-index: -1; border-radius: .1em; background: var(--ab-second); opacity: .45; transform-origin: left; animation: ab-surligne 1s .2s cubic-bezier(.6, 0, .2, 1) both; }
[dir="rtl"] .ab-titre--surligne .ab-titre__mot::before { transform-origin: right; }
@keyframes ab-surligne { from { transform: scaleX(0); } }

/* ------------------------------------------------------- chiffres animés */
.ab-chiffres .ab__titre { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.ab-chiffres__grille { display: grid; gap: 18px; grid-template-columns: repeat(var(--ab-n), minmax(0, 1fr)); }
.ab-chiffres__item { text-align: center; }
.ab-chiffres--cartes .ab-chiffres__item { padding: 30px 18px; border-radius: calc(var(--ab-rayon) + 4px); background: var(--ab-surface); border: 1px solid var(--ab-bord); transition: transform .3s ease, box-shadow .3s ease; }
.ab-chiffres--cartes .ab-chiffres__item:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .35); }
.ab-chiffres--simple .ab-chiffres__item + .ab-chiffres__item { border-inline-start: 1px solid var(--ab-bord); }
.ab-chiffres__valeur { margin: 0 0 6px; font-family: var(--t-font-head, inherit); font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; line-height: 1; color: var(--ab-primaire); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-chiffres__affixe { font-size: .55em; font-weight: 600; }
.ab-chiffres__legende { margin: 0; color: var(--ab-doux); font-size: 15px; }
@media (max-width: 767.98px) {
    .ab-chiffres__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-chiffres--simple .ab-chiffres__item + .ab-chiffres__item { border-inline-start: 0; }
}

/* --------------------------------------------------------- bannière vidéo */
.ab-hv { display: flex; align-items: center; padding-block: 0; color: #fff; background: #0b0d12; isolation: isolate; }
.ab-hv--moyenne { min-height: 420px; }
.ab-hv--grande { min-height: min(680px, 86vh); }
.ab-hv--ecran { min-height: calc(100vh - var(--t-header-h, 0px)); min-height: calc(100svh - var(--t-header-h, 0px)); }
.ab-hv__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ab-hv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-hv__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, calc(var(--ab-voile) * .6)), rgba(0, 0, 0, var(--ab-voile))); }
.ab-hv--aurore .ab-hv__voile { background: rgba(0, 0, 0, calc(var(--ab-voile) * .5)); }
.ab-hv__tache { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .75; mix-blend-mode: screen; animation: ab-aurore 18s ease-in-out infinite alternate; }
.ab-hv__tache--1 { background: var(--ab-primaire); top: -25vmax; left: -15vmax; }
.ab-hv__tache--2 { background: var(--ab-second); bottom: -30vmax; right: -20vmax; animation-duration: 22s; animation-delay: -6s; }
.ab-hv__tache--3 { background: #6a5cff; top: 10%; left: 35%; width: 40vmax; height: 40vmax; animation-duration: 26s; animation-delay: -12s; opacity: .45; }
@keyframes ab-aurore { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12vmax, 6vmax) scale(1.15); } 100% { transform: translate(-6vmax, 10vmax) scale(.9); } }
.ab-hv__contenu { position: relative; padding-block: clamp(70px, 10vw, 130px); }
.ab-hv--centre .ab-hv__contenu { text-align: center; }
.ab-hv--centre .ab-boutons { justify-content: center; }
.ab-hv--centre .ab-hv__texte { margin-inline: auto; }
.ab-hv .ab__surtitre { color: #fff; opacity: .85; }
.ab-hv__titre { margin: 0 0 16px; font-family: var(--t-font-head, inherit); font-size: clamp(38px, 6.4vw, 84px); font-weight: 700; line-height: 1.04; color: #fff; text-wrap: balance; }
.ab-hv__texte { max-width: 600px; margin: 0 0 26px; font-size: clamp(16px, 1.5vw, 20px); color: rgba(255, 255, 255, .88); }
.ab-hv__apparait { animation: ab-monte .9s calc(var(--ab-i, 0) * 120ms + .1s) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ab-monte { from { opacity: 0; transform: translateY(30px); } }
.ab-hv__pause { position: absolute; inset-inline-end: 18px; bottom: 18px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ab-hv__pause span { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.ab-hv__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-block: 8px solid transparent; border-inline-start: 13px solid currentColor; margin-inline-start: 4px; }

/* -------------------------------------------------- vidéo de présentation */
.ab-vp__grille { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ab-vp--large .ab-vp__grille { grid-template-columns: minmax(0, 1fr); }
.ab-vp--large .ab-vp__texte { max-width: 760px; margin-inline: auto; text-align: center; }
.ab-vp--large .ab-vp__points { justify-content: center; }
.ab-vp__lead { color: var(--ab-doux); font-size: 17px; margin: 0 0 18px; }
.ab-vp__points { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.ab-vp--large .ab-vp__points { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
.ab-vp__points li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ab-vp__points li::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ab-primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z' fill='%23fff'/%3E%3C/svg%3E") center / 15px no-repeat; }
.ab-vp__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--ab-rayon) + 8px); overflow: hidden; background: #111; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.ab-vp__vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ab-vp__cadre:hover .ab-vp__vignette { transform: scale(1.04); }
.ab-vp__vignette--vide { background: radial-gradient(circle at 30% 30%, var(--ab-primaire), transparent 60%), radial-gradient(circle at 75% 70%, var(--ab-second), transparent 55%), #15171c; }
.ab-vp__lecture { position: absolute; top: 50%; left: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border: 0; border-radius: 50%; background: #fff; color: var(--ab-primaire); cursor: pointer; display: grid; place-items: center; transition: transform .25s ease; z-index: 1; }
.ab-vp__lecture:hover { transform: scale(1.08); }
.ab-vp__lecture svg { width: 34px; height: 34px; margin-inline-start: 4px; position: relative; }
.ab-vp__onde { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: ab-onde 2.2s ease-out infinite; }
.ab-vp__onde--2 { animation-delay: 1.1s; }
@keyframes ab-onde { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.ab-vp__duree { position: absolute; inset-inline-start: 16px; bottom: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-weight: 600; }
.ab-vp__vide { position: absolute; inset: auto 16px 50%; transform: translateY(50%); margin: 0; text-align: center; color: rgba(255, 255, 255, .85); font-size: 14px; }
.ab-vp__cadre iframe, .ab-vp__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.ab-js .ab-vp__points li { opacity: 0; transform: translateX(-16px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--ab-i) * 110ms + .1s); }
.ab-js .ab-vp.is-visible .ab-vp__points li { opacity: 1; transform: none; }
@media (max-width: 991.98px) { .ab-vp__grille { grid-template-columns: minmax(0, 1fr); } .ab-vp__media { order: -1; } }

/* ------------------------------------------------------------- cartes 3D */
.ab-c3__grille { display: grid; gap: 22px; grid-template-columns: repeat(var(--ab-n), minmax(0, 1fr)); perspective: 1000px; }
.ab-c3__carte { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; border-radius: calc(var(--ab-rayon) + 6px); overflow: hidden; background: var(--ab-surface); color: inherit; text-decoration: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; will-change: transform; }
.ab-c3__carte.is-survol { transition: transform .08s linear, box-shadow .4s ease; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.ab-c3__visuel { display: block; aspect-ratio: 4 / 3; overflow: hidden; transform: translateZ(30px); }
.ab-c3__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ab-c3__carte:hover .ab-c3__visuel img { transform: scale(1.06); }
.ab-c3__visuel--vide { background: linear-gradient(135deg, hsl(var(--ab-teinte) 70% 72%), hsl(calc(var(--ab-teinte) + 60) 70% 58%)); }
.ab-c3__texte { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; transform: translateZ(40px); }
.ab-c3__titre { font-family: var(--t-font-head, inherit); font-size: 20px; font-weight: 700; }
.ab-c3__sous { color: var(--ab-doux); font-size: 14.5px; }
.ab-c3__eclat { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 45%); mix-blend-mode: soft-light; transition: opacity .3s ease; }
.ab-c3--reflet .ab-c3__carte.is-survol .ab-c3__eclat { opacity: 1; }
.ab-js .ab-c3__carte { opacity: 0; translate: 0 30px; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: 0s, 0s, calc(var(--ab-i) * 120ms), calc(var(--ab-i) * 120ms); }
.ab-js .ab-c3.is-visible .ab-c3__carte { opacity: 1; translate: 0 0; }
@media (max-width: 767.98px) { .ab-c3__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ab-c3__titre { font-size: 17px; } }
@media (max-width: 420px) { .ab-c3__grille { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------- texte défilant géant */
.ab-tg { padding-block: clamp(40px, 6vw, 80px); }
.ab-tg__bande { --ab-encre: var(--ab-sur-primaire); overflow: hidden; padding-block: .25em; background: var(--ab-primaire); color: var(--ab-encre); font-family: var(--t-font-head, inherit); font-size: clamp(38px, 7vw, 96px); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.ab-tg--bandes-2 .ab-tg__bande--1 { transform: rotate(-3deg); margin-inline: -4vw; position: relative; z-index: 1; }
.ab-tg--bandes-2 .ab-tg__bande--2 { --ab-encre: var(--ab-fond); transform: rotate(2deg); margin: .1em -4vw 0; background: var(--ab-texte); font-size: clamp(26px, 4.4vw, 60px); }
.ab-tg__piste { display: flex; width: max-content; animation: ab-defile var(--ab-vitesse, 30s) linear infinite; }
.ab-tg__bande--2 .ab-tg__piste { animation-direction: reverse; }
.ab-tg--lente { --ab-vitesse: 50s; }
.ab-tg--rapide { --ab-vitesse: 16s; }
.ab-tg__groupe { display: flex; align-items: center; flex-shrink: 0; }
.ab-tg__mot, .ab-tg__sep { padding-inline: .3em; white-space: nowrap; }
.ab-tg__sep { font-size: .6em; opacity: .8; }
/* Contour : le trait prend la couleur d'encre de la bande (currentColor
   vaudrait « transparent », la couleur du texte étant retirée). */
.ab-tg--contour .ab-tg__mot, .ab-tg--alterne .ab-tg__mot:nth-of-type(4n+3) { color: transparent; -webkit-text-stroke: 2px var(--ab-encre); }
@keyframes ab-defile { to { transform: translateX(-50%); } }
[dir="rtl"] .ab-tg__piste { animation-name: ab-defile-rtl; }
@keyframes ab-defile-rtl { to { transform: translateX(50%); } }
.ab-tg:hover .ab-tg__piste { animation-play-state: paused; }

/* ------------------------------------------------- produit vedette animé */
.ab-pv__grille { display: grid; gap: clamp(30px, 5vw, 70px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ab-pv__scene { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
.ab-pv__halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, var(--ab-primaire) 0%, transparent 68%); opacity: .35; filter: blur(30px); animation: ab-respire 5s ease-in-out infinite; }
@keyframes ab-respire { 50% { transform: scale(1.12); opacity: .5; } }
.ab-pv__anneau { position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--ab-primaire) 45%, transparent); animation: ab-tourne 40s linear infinite; }
.ab-pv__image { position: relative; z-index: 1; width: 72%; aspect-ratio: 1; object-fit: contain; border-radius: 18px; animation: ab-flotte 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .18)); }
.ab-pv__image--vide { display: block; border-radius: 50%; background: linear-gradient(135deg, var(--ab-primaire), var(--ab-second)); width: 56%; }
.ab-pv__ombre { position: absolute; bottom: 9%; left: 30%; right: 30%; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .18); filter: blur(8px); animation: ab-ombre 6s ease-in-out infinite; }
@keyframes ab-flotte { 50% { transform: translateY(-18px) rotate(-2deg); } }
@keyframes ab-ombre { 50% { transform: scaleX(.8); opacity: .6; } }
.ab-pv__badge { position: absolute; z-index: 2; top: 4%; inset-inline-end: 4%; width: clamp(92px, 11vw, 124px); animation: ab-tourne 14s linear infinite; }
.ab-pv__badge circle { fill: var(--ab-second); }
.ab-pv__badge text { fill: #fff; font-size: 13px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
@keyframes ab-tourne { to { transform: rotate(360deg); } }
.ab-pv__titre { font-size: clamp(32px, 4.4vw, 56px); }
.ab-pv__lead { color: var(--ab-doux); font-size: 17px; margin: 0 0 16px; }
.ab-pv__prix { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 26px; font-weight: 700; color: var(--ab-primaire); white-space: nowrap; }
.ab-pv__prix del { font-size: .65em; font-weight: 400; color: var(--ab-doux); }
@media (max-width: 767.98px) { .ab-pv__grille { grid-template-columns: minmax(0, 1fr); text-align: center; } .ab-pv__prix { justify-content: center; } .ab-pv__scene { max-width: 340px; } }

/* --------------------------------------------------------- étapes animées */
.ab-et__piste { --ab-progres: 1; position: relative; }
.ab-js .ab-et__piste { --ab-progres: 0; }
.ab-et__liste { display: grid; gap: 24px; grid-template-columns: repeat(var(--ab-n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; position: relative; }
.ab-et__ligne { position: absolute; top: 34px; inset-inline: calc(50% / var(--ab-n)); height: 4px; border-radius: 4px; background: var(--ab-bord); }
.ab-et__trace { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--ab-progres) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--ab-primaire), var(--ab-second)); transition: width .15s linear; }
.ab-et__etape { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ab-et__pastille { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ab-fond); border: 3px solid var(--ab-bord); font-size: 28px; font-weight: 700; color: var(--ab-primaire); transition: border-color .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1), box-shadow .4s ease; }
.ab-et__etape.is-atteinte .ab-et__pastille, .ab-et__piste:not([data-ab-pret]) .ab-et__pastille { border-color: var(--ab-primaire); transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ab-primaire) 14%, transparent); }
.ab-et__titre { font-family: var(--t-font-head, inherit); font-size: 18px; font-weight: 700; }
.ab-et__texte { color: var(--ab-doux); font-size: 14.5px; max-width: 240px; }
@media (max-width: 767.98px) {
    .ab-et__liste { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .ab-et__ligne { top: 36px; bottom: 36px; inset-inline: 34px auto; width: 4px; height: auto; }
    .ab-et__trace { width: 100%; height: calc(var(--ab-progres) * 100%); inset-inline: 0; transition: height .15s linear; }
    .ab-et__etape { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: center; text-align: start; }
    .ab-et__pastille { grid-row: span 2; }
    .ab-et__texte { max-width: none; }
}

/* ----------------------------------------------- moins d'animations demandé */
@media (prefers-reduced-motion: reduce) {
    .ab-js .anim, .ab-js .anim * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .ab *, .ab *::before, .ab *::after { animation: none !important; transition: none !important; }
    .ab-js .ab-c3__carte, .ab-js .ab-vp__points li { opacity: 1; translate: none; transform: none; }
    .ab-et__piste { --ab-progres: 1 !important; }
}