/* ============================================================
   KORDIX STUDIO · page d'accueil (uniquement body.accueil), chargé après kordix.css et theme-refonte.css
   Hero avec la vidéo qui suit la souris, bande qui défile avec la page, services en feuilles avec une image par forme,
   manifeste dont les mots s'allument, étapes qui se remplissent, bloc final en aplat. Tout le texte reste celui de la version précédente (traductions).
   ============================================================ */
body.accueil { --r: 16px; --dur: 0.7s; }

/* ---------- titres de section : plus grands sur l'accueil ---------- */
.accueil .section { padding-top: clamp(72px, 10vw, 128px); }
.accueil .section-tete { margin-bottom: clamp(32px, 5vw, 56px); }
.accueil .section-tete h2 { margin: 0; max-width: 14ch; font-size: clamp(42px, 6.4vw, 92px); line-height: 0.96; }
.accueil main > section:last-of-type { padding-bottom: clamp(72px, 10vw, 128px); }

/* ---------- hero ---------- */
.accueil .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding: clamp(32px, 5vw, 56px) 0 0; align-items: center; }
.accueil .hero h1 { --base: 120ms; margin: 20px 0 0; font-size: clamp(44px, 5.7vw, 84px); line-height: 0.95; text-wrap: balance; opacity: 0; animation: montrer 0s 2.5s forwards; }
.accueil .hero h1.decoupe { opacity: 1; animation: none; }
@keyframes montrer { to { opacity: 1; } }
.accueil .hero h1 em::after { transform-origin: left; transform: scaleX(0); animation: trait 0.8s 0.6s var(--ease) forwards; }
@keyframes trait { to { transform: scaleX(1); } }
.accueil .hero .lead { margin: 26px 0 34px; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); color: #b6b6c8; }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.accueil .hero > div:first-child > * { animation: monte var(--dur) var(--ease) both; }
.accueil .hero > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
.accueil .hero > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
.accueil .hero > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
.accueil .hero > div:first-child > :nth-child(5) { animation-delay: 0.32s; }

/* vidéo du hero : cadre en feuille, légère 3D qui suit la souris, cercle derrière, formes qui flottent, pastille ronde */
.accueil .demo-zone { position: relative; isolation: isolate; display: flex; align-items: center; padding: 34px 0 40px; }
.accueil .demo-zone::before { content: ""; position: absolute; z-index: -1; right: -7%; bottom: -4%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--violet); }
.accueil .cadre-video { position: relative; z-index: 2; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: 110px 26px 110px 26px; border: 1px solid var(--bord-2); background: #050507; box-shadow: 0 60px 110px -50px rgb(var(--v) / 0.5);
  transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.4s var(--ease); animation: monte 0.9s 0.25s var(--ease) backwards; will-change: transform; }
.accueil .cadre-video .video-hero { display: block; width: 100%; height: 100%; object-fit: contain; }
.accueil .video-boutons { position: absolute; z-index: 2; right: clamp(14px, 2.4vw, 30px); bottom: clamp(14px, 2.4vw, 30px); display: flex; gap: 10px; }
.accueil .video-boutons button { position: relative; width: 48px; height: 48px; padding: 0; cursor: pointer; border-radius: 50%; border: 1px solid var(--bord-2); background: rgba(9, 9, 15, 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--blanc); transition: background 0.2s, transform 0.2s var(--ease), border-color 0.2s; }
.accueil .video-boutons button:hover { background: var(--violet); border-color: var(--violet); color: var(--sur); transform: scale(1.08); }
.accueil .video-boutons button:active { transform: scale(0.94); }
.accueil .video-boutons button:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.accueil .video-boutons i { position: absolute; inset: 0; margin: auto; display: block; }
/* pause : deux barres · lecture : triangle · plein écran : quatre coins */
.accueil .vb-lecture i { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.accueil .vb-lecture.en-pause i { width: 0; height: 0; border-left: 14px solid currentColor; border-right: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateX(2px); }
.accueil .vb-plein i { width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) 0 0 / 8px 2.5px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 2.5px 8px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 8px 2.5px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 2.5px 8px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 8px 2.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 2.5px 8px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 8px 2.5px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 2.5px 8px no-repeat; }

.accueil .monde { position: absolute; inset: 0; z-index: 0; transform: translate(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px)); transition: transform 0.6s var(--ease); }
.accueil .forme { position: absolute; z-index: 1; display: block; animation: derive var(--t, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes derive { 50% { translate: 0 -16px; } }
.accueil .capsule { right: -2%; top: 0; width: 104px; height: 44px; border-radius: 999px; background: var(--blanc); rotate: -26deg; --t: 8s; }
.accueil .demi { left: -3%; bottom: 14%; width: 78px; height: 39px; border-radius: 78px 78px 0 0; background: var(--violet-2); rotate: 18deg; --t: 6.5s; --dl: -2s; }
.accueil .rond { right: 5%; bottom: -2%; width: 60px; height: 60px; border-radius: 50%; border: 11px solid var(--violet); --t: 9s; --dl: -4s; }
.accueil .croix { left: 14%; top: 4%; font: 800 44px/1 var(--titre); color: var(--blanc); font-style: normal; animation: derive 10s ease-in-out infinite, vire 14s linear infinite; }
.accueil .croix.c2 { left: auto; right: 22%; top: auto; bottom: 4%; font-size: 30px; color: var(--violet-2); animation-direction: normal, reverse; }
@keyframes vire { to { rotate: 360deg; } }
.accueil .etoile { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: var(--blanc); animation: scintille 3.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes scintille { 50% { opacity: 0.15; transform: scale(0.5); } }
.accueil .e1 { left: 6%; top: 10%; } .accueil .e2 { left: 42%; top: 0; --dl: -1s; } .accueil .e3 { right: 14%; top: 36%; --dl: -2s; width: 3px; height: 3px; }
.accueil .e4 { left: 4%; bottom: 30%; --dl: -0.6s; width: 3px; height: 3px; } .accueil .e5 { right: 3%; bottom: 40%; --dl: -1.8s; } .accueil .e6 { left: 50%; bottom: 2%; --dl: -2.6s; width: 3px; height: 3px; }
.accueil .pastille { position: absolute; z-index: 5; left: -4%; top: -2%; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); color: var(--encre); }
.accueil .pastille svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne-lent 22s linear infinite; }
.accueil .pastille text { font: 700 11.2px var(--titre); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--encre); }
.accueil .pastille b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--violet); color: var(--sur); font-size: 22px; }
@keyframes tourne-lent { to { transform: rotate(360deg); } }

/* ---------- mots qui montent (le script découpe les titres APRÈS la traduction) ---------- */
.accueil .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0 0.14em; margin: -0.04em 0 -0.14em; }
.accueil .mot > span { display: inline-block; transform: translateY(112%); transition: transform 0.95s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + var(--base, 0ms)); }
.accueil .mots-vus .mot > span { transform: none; }

/* boutons aimantés (le script pose --tx / --ty) */
.accueil .aimant { translate: var(--tx, 0px) var(--ty, 0px); }

/* ---------- réassurance : une simple ligne, icônes dans des cercles ---------- */
.accueil .reassurance { margin-top: clamp(56px, 8vw, 96px); gap: 0; border: 0; border-block: 1px solid var(--bord-2); border-radius: 0; background: none; }
.accueil .reassurance div { padding: 26px 28px 26px 0; background: none; border-right: 1px solid var(--bord); }
.accueil .reassurance div + div { padding-left: 28px; }
.accueil .reassurance div:last-child { border-right: 0; }
.accueil .reassurance span { width: 46px; height: 46px; border-radius: 50%; background: rgb(var(--v) / 0.16); }
.accueil .reassurance b { font-size: 16px; }

/* ---------- bande violette aux bords en festons, qui glisse quand on défile ---------- */
.accueil .bande { margin: clamp(56px, 8vw, 110px) 0 0 calc(50% - 50vw); width: 100vw; padding: clamp(26px, 3.2vw, 44px) 0; background: var(--violet); transform: rotate(-2deg); overflow: hidden;
  -webkit-mask: radial-gradient(circle 14px at 50% 0, #0000 97%, #000) top / 34px 51% repeat-x, radial-gradient(circle 14px at 50% 100%, #0000 97%, #000) bottom / 34px 51% repeat-x;
  mask: radial-gradient(circle 14px at 50% 0, #0000 97%, #000) top / 34px 51% repeat-x, radial-gradient(circle 14px at 50% 100%, #0000 97%, #000) bottom / 34px 51% repeat-x; }
.accueil .bande-piste { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); width: max-content; padding-left: 4vw; white-space: nowrap; font: 800 clamp(48px, 9vw, 140px)/1 var(--titre); letter-spacing: -0.04em; color: var(--sur); }
.accueil .bande-piste .creux { color: color-mix(in srgb, var(--sur) 38%, transparent); }
.accueil .bande-piste i { flex: none; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--sur); }

/* ---------- services : grille asymétrique, cartes en feuille, une image dans une forme différente par carte ---------- */
.accueil .services { grid-template-columns: repeat(12, 1fr); gap: 16px; }
.accueil .service-carte { grid-column: span 6; position: relative; min-height: 420px; padding: clamp(30px, 4vw, 48px); border: 1px solid var(--bord-2); border-radius: var(--rr); background: var(--s1); overflow: hidden; isolation: isolate; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.accueil .service-carte:nth-child(1) { grid-column: span 7; background: var(--violet); border-color: var(--violet); color: var(--sur); }
.accueil .service-carte:nth-child(2) { grid-column: span 5; background: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--s1); }
.accueil .service-carte:nth-child(3) { grid-column: span 5; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px), var(--s1); }
.accueil .service-carte:nth-child(4) { grid-column: span 7; background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 62%, #000) 0%, color-mix(in srgb, var(--violet) 16%, var(--s1)) 55%, var(--s1) 100%); }
.accueil .service-carte:nth-child(1) { border-radius: var(--R) var(--rr) var(--rr) var(--rr); }
.accueil .service-carte:nth-child(2) { border-radius: var(--rr) var(--R) var(--rr) var(--rr); }
.accueil .service-carte:nth-child(3) { border-radius: var(--rr) var(--rr) var(--rr) var(--R); }
.accueil .service-carte:nth-child(4) { border-radius: var(--rr) var(--rr) var(--R) var(--rr); }
.accueil .service-carte:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--violet); }
.accueil .service-carte:nth-child(1):hover { box-shadow: 6px 6px 0 0 var(--blanc); }
.accueil .service-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 60%); }
.accueil .service-carte:hover::after { opacity: 1; }
/* l'image de la carte : une forme par carte (--img = l'image, sinon un dégradé de la couleur de marque) */
.accueil .service-carte::before { content: ""; position: absolute; z-index: -1; right: clamp(18px, 2.6vw, 34px); top: clamp(18px, 2.6vw, 34px); width: 44%; aspect-ratio: 1;
  background: var(--img, none) center / cover no-repeat, radial-gradient(circle at 30% 28%, var(--violet-2), var(--violet) 55%, color-mix(in srgb, var(--violet) 30%, #000)); box-shadow: 0 0 0 1px var(--bord-2); transition: transform 0.6s var(--ease); }
.accueil .service-carte:hover::before { transform: scale(1.04) rotate(-2deg); }
.accueil .service-carte:nth-child(1)::before { width: 42%; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 55%, rgba(9, 9, 15, 0.35)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.accueil .service-carte:nth-child(2)::before { --img: url(img/site.webp); width: 38%; aspect-ratio: 4 / 5; border-radius: 999px 999px 30px 30px; }
.accueil .service-carte:nth-child(3)::before { width: 52%; aspect-ratio: 1.45; border-radius: 999px; }
.accueil .service-carte:nth-child(4)::before { width: 44%; border-radius: 62% 38% 55% 45% / 48% 56% 44% 52%; }
.accueil .service-carte .ico-service { width: 58px; height: 58px; margin-bottom: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); display: grid; place-items: center; }
.accueil .service-carte .ico-service [data-ic] { width: 24px; height: 24px; background: var(--blanc); }
.accueil .service-carte:nth-child(1) .ico-service { background: color-mix(in srgb, var(--sur) 14%, transparent); border-color: color-mix(in srgb, var(--sur) 26%, transparent); }
.accueil .service-carte:nth-child(1) .ico-service [data-ic] { background: var(--sur); }
.accueil .service-carte h3 { margin: auto 0 10px; padding-top: 120px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.03em; }
.accueil .service-carte p { max-width: 25ch; margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: rgba(244, 244, 248, 0.78); flex: none; }
.accueil .service-carte:nth-child(1) p { color: color-mix(in srgb, var(--sur) 92%, transparent); }
.accueil .service-bas { display: flex; align-items: center; justify-content: space-between; }
.accueil .service-carte .des { font-size: 15px; color: rgba(244, 244, 248, 0.8); }
.accueil .service-carte .des b { font-family: var(--titre); font-size: 20px; color: #fff; letter-spacing: -0.02em; }
.accueil .service-carte:nth-child(1) .des, .accueil .service-carte:nth-child(1) .des b { color: var(--sur); }
.accueil .service-carte .fleche { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); color: var(--encre); font-size: 18px; transition: transform 0.25s var(--ease); }
.accueil .service-carte:hover .fleche { background: var(--blanc); color: var(--encre); transform: translateX(4px) rotate(-45deg); }
.accueil .service-carte:nth-child(1) .fleche, .accueil .service-carte:nth-child(1):hover .fleche { background: var(--encre); color: #fff; }

/* ---------- manifeste : les mots s'allument pendant le défilement ---------- */
.accueil .manifeste { padding-block: clamp(90px, 13vw, 180px) 0; }
.accueil .manifeste-texte { margin: 0; max-width: 22ch; font: 800 clamp(38px, 6.8vw, 104px)/1 var(--titre); letter-spacing: -0.04em; color: var(--blanc); }
.accueil .manifeste-texte em { font-style: normal; }

/* ---------- étapes : grandes lignes, le titre se remplit en entrant à l'écran ---------- */
.accueil .etapes-accueil li { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) auto; padding: clamp(22px, 3vw, 34px) 0; }
.accueil .etapes-accueil b { font-size: clamp(36px, 5.6vw, 76px); line-height: 0.95; }

/* ---------- appel à l'action : le seul grand aplat de la page ---------- */
.accueil .carte.appel { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding: clamp(32px, 6vw, 80px) clamp(40px, 9vw, 140px); border: 0; border-radius: 140px 28px 140px 28px; background: var(--violet); color: var(--sur); overflow: hidden; isolation: isolate; }
.accueil .carte.appel::before { content: ""; position: absolute; right: -140px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); z-index: -1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 34px, color-mix(in srgb, var(--sur) 16%, transparent) 34px 36px); }
.accueil .carte.appel .label { color: color-mix(in srgb, var(--sur) 85%, transparent); }
.accueil .carte.appel h2 { margin: 12px 0 14px; max-width: 11ch; color: var(--sur); font-size: clamp(48px, 8vw, 120px); line-height: 0.94; letter-spacing: -0.045em; }
.accueil .carte.appel p { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.6vw, 19px); color: color-mix(in srgb, var(--sur) 92%, transparent); }
.accueil .carte.appel .btn { width: auto; padding: 20px 34px; font-size: 16px; background: var(--encre); color: #fff; white-space: nowrap; }
.accueil .carte.appel .btn:hover { background: var(--encre); box-shadow: 4px 4px 0 0 var(--blanc); }

/* ---------- réalisations et avis (apparaissent seulement s'il y en a de vrais) ---------- */
.accueil .carte.realisation, .accueil .avis-grille > * { background: var(--s1); }
.accueil .avis-grille > * { border-radius: var(--feuille-s); }
.accueil .carte.realisation .realisation-image, .accueil .carte.realisation img { border-radius: 0; }

/* ---------- FAQ : titre collé à gauche, questions à droite ---------- */
.accueil #faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.accueil #faq .section-tete { position: sticky; top: 110px; margin: 0; }
.accueil .faq { max-width: none; }
.accueil .faq summary { padding: 22px 32px; font-size: clamp(18px, 1.8vw, 23px); }
.accueil .faq p { padding: 0 32px 28px; }

/* ---------- apparition au défilement (classes posées par le script) ---------- */
.accueil .rev { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0s); }
.accueil .rev.vu { opacity: 1; transform: none; }

/* ---------- animations liées au défilement (navigateurs récents ; sinon l'état final est affiché) ---------- */
@supports (animation-timeline: view()) {
  .accueil .bande-piste { animation: glisse linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes glisse { from { transform: translateX(8vw); } to { transform: translateX(-42%); } }
  .accueil .etapes-accueil b { color: rgba(244, 244, 248, 0.2); animation: remplir linear both; animation-timeline: view(); animation-range: entry 25% cover 42%; }
  @keyframes remplir { to { color: var(--blanc); } }
  .accueil .etapes-accueil li:hover b { color: var(--violet-2); animation: none; }
  .accueil .carte.appel::before { animation: tourne linear both; animation-timeline: view(); }
  @keyframes tourne { from { transform: translateY(-50%) rotate(-40deg) scale(0.85); } to { transform: translateY(-50%) rotate(40deg) scale(1.1); } }
  .accueil .manifeste .mw { color: color-mix(in srgb, var(--blanc) 16%, transparent); animation: allume linear both; animation-timeline: view(); animation-range: entry calc(8% + var(--i) * 1.7%) entry calc(34% + var(--i) * 1.7%); }
  .accueil .manifeste em .mw { animation-name: allume-accent; }
  @keyframes allume { to { color: var(--blanc); } }
  @keyframes allume-accent { to { color: var(--violet-2); } }
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .accueil .hero { grid-template-columns: 1fr; }
  .accueil .demo-zone { padding: 30px 0 34px; }
  .accueil .demo-zone::before { right: -4%; bottom: 0; width: 50%; }
  .accueil .cadre-video { border-radius: 48px 18px 48px 18px; }
  .accueil .video-boutons button { width: 42px; height: 42px; }
  .accueil .pastille { width: 96px; height: 96px; left: -2%; top: -4%; }
  .accueil .pastille text { font-size: 11.6px; }
  .accueil .pastille b { width: 36px; height: 36px; font-size: 18px; }
  .accueil .capsule { width: 80px; height: 34px; }
  .accueil .reassurance { grid-template-columns: 1fr; }
  .accueil .reassurance div, .accueil .reassurance div + div { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--bord); }
  .accueil .reassurance div:last-child { border-bottom: 0; }
  .accueil .services { grid-template-columns: 1fr; }
  .accueil .service-carte, .accueil .service-carte:nth-child(n) { grid-column: auto; min-height: 380px; }
  .accueil .service-carte:nth-child(1) { border-radius: var(--R) var(--R) var(--rr) var(--rr); }
  .accueil .service-carte:nth-child(2), .accueil .service-carte:nth-child(3) { border-radius: var(--rr); }
  .accueil .service-carte:nth-child(4) { border-radius: var(--rr) var(--rr) var(--R) var(--R); }
  .accueil .service-carte::before { width: 44%; }
  .accueil .service-carte:nth-child(2)::before { width: 36%; }
  .accueil .service-carte:nth-child(3)::before { width: 50%; }
  .accueil .manifeste-texte { max-width: none; }
  .accueil .carte.appel { grid-template-columns: 1fr; align-items: start; border-radius: 72px 20px 72px 20px; padding-inline: clamp(28px, 6vw, 48px); }
  .accueil #faq { grid-template-columns: 1fr; }
  .accueil #faq .section-tete { position: static; }
  .accueil .faq summary { padding: 18px 22px; }
  .accueil .faq p { padding: 0 22px 22px; }
}
@media (max-width: 520px) { .accueil .hero-points { gap: 8px; } }

@media (prefers-reduced-motion: reduce) {
  .accueil .rev { opacity: 1; transform: none; }
  .accueil .hero h1 { opacity: 1; animation: none; }
  .accueil .hero h1 em::after { transform: none; animation: none; }
  .accueil .mot > span { transform: none; transition: none; }
  .accueil .cadre-video { transform: none; }
  .accueil .monde { transform: none; }
  .accueil .forme, .accueil .etoile, .accueil .pastille svg, .accueil .bande-piste, .accueil .etapes-accueil b, .accueil .carte.appel::before { animation: none; }
  .accueil .etapes-accueil b { color: var(--blanc); }
  .accueil .manifeste .mw { color: var(--blanc); animation: none; }
  .accueil .manifeste em .mw { color: var(--violet-2); }
}