/* L'accueil des Fêtes — les valeurs qui dépendent de la largeur.
 *
 * La maquette (passation du 2026-09-30) mesure sa propre largeur en
 * JavaScript et recalcule une soixantaine de valeurs à chaque
 * redimensionnement : trois paliers — téléphone (≤ 720 px), tablette
 * (≤ 1000 px), très petit téléphone (≤ 520 px) — et quelques tailles de titre
 * proportionnelles à la largeur, bornées.
 *
 * ⚠️ ICI, CE SONT DES REQUÊTES MÉDIA, PAS DU JAVASCRIPT. Mesurer la largeur
 * après coup rendait d'abord la page d'ordinateur à tout le monde, puis la
 * repliait une fois le script chargé — sur la page où la publicité amène un
 * visiteur qui a, quatre fois sur cinq, un téléphone. Chaque `t.x` de la
 * maquette devient `var(--ft-x)`, chaque `n.x` `var(--fn-x)`; les tailles
 * proportionnelles deviennent des `clamp()` en `vw`, la largeur de la maquette
 * étant celle de la fenêtre.
 *
 * Les valeurs sont recopiées de `renderVals()` et `noel()` de la maquette,
 * palier par palier. Une valeur absente d'un palier y garde celle du palier
 * plus large. */

.f-accueil {
  /* Ordinateur (> 1000 px) */
  --ft-shell: min(1220px, calc(100% - 48px));
  --ft-hdr: 76px;
  --ft-logoV3: 26px;
  --ft-heroColsV3: minmax(0, 1.12fr) minmax(0, 1fr);
  --ft-heroColGapV3: 56px;
  --ft-heroGapV3: 34px;
  --ft-titreGap: 22px;
  --ft-leadV3: 18px;
  --ft-ordreTexte: 1;
  --ft-ordrePhoto: 2;
  --ft-photoRatio: 4 / 3.6;
  --ft-preuveCols: repeat(3, auto);
  --ft-preuveW: auto;
  --ft-preuveDir: row;
  --ft-preuveGap: 8px;
  --ft-preuvePad: 12px 18px;
  --ft-preuveEt: 15px;
  --ft-preuveTx: 15px;
  --ft-preuveNb: 15px;
  --ft-titreA: flex-start;
  --ft-titreT: left;
  --ft-h2v3: clamp(44px, 4.5vw, 68px);
  --ft-secV3: 112px;
  --ft-temCols: repeat(5, minmax(0, 1fr));
  --ft-temAuto: auto;
  --ft-temGap: 14px;
  --ft-avApGap: 12px;
  --ft-flecheAvAp: 58px;
  --ft-flecheMarge: 84px;
  --ft-pointsCols: repeat(3, minmax(0, 1fr));
  --ft-deuxCols: minmax(0, 1fr) minmax(0, 1fr);
  --ft-collant: sticky;
  --ft-sceneH: 180px;
  --ft-carteFormPad: 30px 30px 26px;
  --ft-introMb: 48px;
  --ft-rangee: 1fr 1fr;
  --ft-processCols: repeat(4, minmax(0, 1fr));
  --ft-occCols: repeat(4, 1fr);
  --ft-occFlow: row;
  --ft-occAuto: auto;
  --ft-occPadB: 12px;
  --ft-occOverflow: visible;
  --ft-faqH: 82px;
  --ft-faqFs: 17px;
  --ft-piedBas: 0;

  --fn-lumiPreuveMt: 84px;
  --fn-lumiLarge: block;
  --fn-lumiPreuve: 88px;
  --fn-lumiVid: 156px;
  --fn-lumiFin: 132px;
  --fn-sapinG: 132px;
  --fn-sapinM: 98px;
  --fn-sapinP: 70px;
  --fn-lutinVis: block;
  --fn-persoH: 168px;
  --fn-heroPad: 84px 132px;
  --fn-bandeFs: 14px;
  --fn-finPad: 150px 170px;
  --fn-h1: clamp(52px, 4.6vw, 78px);
  --fn-finFs: clamp(52px, 5.6vw, 84px);
  --fn-rubanFs: 22px;
}

/* Tablette (≤ 1000 px) */
@media (max-width: 1000px) {
  .f-accueil {
    --ft-heroColsV3: minmax(0, 1fr);
    --ft-heroColGapV3: 36px;
    --ft-ordreTexte: 2;
    --ft-ordrePhoto: 1;
    --ft-photoRatio: 16 / 10;
    --ft-deuxCols: minmax(0, 1fr);
    --ft-collant: static;
    --ft-temCols: repeat(3, minmax(0, 1fr));
    --ft-processCols: repeat(2, minmax(0, 1fr));
    --ft-occCols: repeat(2, 1fr);
    --fn-lumiLarge: none;
    --fn-lutinVis: none;
  }
}

/* Téléphone (≤ 720 px) */
@media (max-width: 720px) {
  .f-accueil {
    --ft-shell: min(100% - 28px, 620px);
    --ft-hdr: 64px;
    --ft-logoV3: 22px;
    --ft-heroColGapV3: 28px;
    --ft-heroGapV3: 26px;
    --ft-titreGap: 16px;
    --ft-leadV3: 16px;
    --ft-photoRatio: 4 / 3.4;
    --ft-preuveCols: repeat(3, minmax(0, 1fr));
    --ft-preuveW: 100%;
    --ft-preuveDir: column;
    --ft-preuvePad: 16px 6px;
    --ft-preuveEt: 13px;
    --ft-preuveTx: 13px;
    --ft-preuveNb: 20px;
    --ft-titreA: center;
    --ft-titreT: center;
    --ft-h2v3: 38px;
    --ft-secV3: 72px;
    --ft-temCols: none;
    --ft-temAuto: 58%;
    --ft-temGap: 10px;
    --ft-avApGap: 8px;
    --ft-flecheAvAp: 40px;
    --ft-flecheMarge: 56px;
    --ft-pointsCols: minmax(0, 1fr);
    --ft-sceneH: 200px;
    --ft-introMb: 34px;
    --ft-occCols: none;
    --ft-occFlow: column;
    --ft-occAuto: 76%;
    --ft-occPadB: 128px;
    --ft-occOverflow: auto;
    --ft-faqH: 76px;
    --ft-faqFs: 16px;
    --ft-piedBas: 96px;

    --fn-lumiPreuveMt: 70px;
    --fn-lumiPreuve: 72px;
    --fn-lumiVid: 112px;
    --fn-lumiFin: 96px;
    --fn-sapinG: 72px;
    --fn-sapinM: 54px;
    --fn-sapinP: 40px;
    --fn-persoH: 84px;
    --fn-heroPad: 36px 84px;
    --fn-bandeFs: 13px;
    --fn-finPad: 96px 110px;
    --fn-h1: clamp(40px, 11vw, 52px);
    --fn-finFs: 44px;
    --fn-rubanFs: 18px;
  }
}

/* Tout petit téléphone (≤ 560 px, puis ≤ 520 px) */
@media (max-width: 560px) {
  .f-accueil {
    --ft-processCols: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .f-accueil {
    --ft-carteFormPad: 22px 18px;
    --ft-rangee: 1fr;
  }
}

/* Ce que la maquette rend ou non selon la largeur (`bureau`, `mobile`). Les
 * deux sont dans la page, l'un est masqué : le serveur ne sait pas quel
 * appareil il sert. */
@media (max-width: 720px) {
  .f-accueil .f-seul-bureau {
    display: none !important;
  }
}
@media (min-width: 721px) {
  .f-accueil .f-seul-mobile {
    display: none !important;
  }
}

/* ── Ce que la maquette fait par son état, la feuille le fait ici ─────────── */

/* Lumi et sa pancarte traversent la colonne du formulaire quand elle entre
 * dans l'écran (`LumiEnMarche`). Invisible avant. */
.f-accueil .f-panc {
  opacity: 0;
}
.f-accueil .f-panc[data-parti] {
  opacity: 1;
  animation: f-panc-marche 8s cubic-bezier(0.3, 0.1, 0.4, 1) both;
}
.f-accueil .f-panc[data-parti] .f-panc-pas {
  animation: f-panc-pas 0.48s ease-in-out 10;
}
.f-accueil .f-panc[data-parti] .f-panc-leve {
  animation: f-panc-leve 8s ease-in-out both;
}

/* Les questions : `details`, l'ampoule s'allume et le « + » tourne quand on
 * l'ouvre. */
.f-accueil .f-question {
  border: 1px solid rgba(240, 192, 90, 0.14);
  transition: border-color 300ms ease;
}
.f-accueil .f-question[open] {
  border-color: rgba(240, 192, 90, 0.55);
}
.f-accueil .f-question > summary {
  list-style: none;
}
.f-accueil .f-question > summary::-webkit-details-marker {
  display: none;
}
.f-accueil .f-question-ampoule {
  background: #3a4a41;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35);
  transition:
    background 400ms ease,
    box-shadow 400ms ease;
}
.f-accueil .f-question[open] .f-question-ampoule {
  background: var(--f-ampoule);
  box-shadow: var(--f-ampoule-ombre);
}
.f-accueil .f-question-plus {
  transition: transform 180ms ease;
}
.f-accueil .f-question[open] .f-question-plus {
  transform: rotate(45deg);
}

/* Les guirlandes toujours allumées : moins d'ampoules sur un écran étroit — la
 * maquette en compte une tous les 52 px environ, neuf sur téléphone. */
@media (max-width: 1000px) {
  .f-accueil .f-guirlande-fin > span:nth-child(n + 18) {
    display: none;
  }
}
@media (max-width: 720px) {
  .f-accueil .f-guirlande-fin > span:nth-child(n + 10),
  .f-accueil .f-guirlande-deco > span:nth-child(n + 8) {
    display: none;
  }
}

/* ── Les pièces du site, à l'habit de la maquette ──────────────────────────
 *
 * Le champ d'adresse, la case d'accord et la fenêtre du code sont ceux du
 * site — leur mécanique compte (recherche Google, case obligatoire, code
 * gardé après un refus). Seule leur allure change, ici. */

/* Le champ d'adresse, blanc sur la carte crème. */
.f-accueil .f-adresse .address-row {
  border: 1px solid rgba(42, 26, 18, 0.16);
  background: #fff;
}
.f-accueil .f-adresse .address-row[data-invalide] {
  border-color: #c8283a;
}
.f-accueil .f-adresse .address-row:focus-within {
  border-color: color-mix(in srgb, #d23145 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #d23145 22%, transparent);
}
.f-accueil .f-adresse .address-row .pin {
  color: #d23145;
}
.f-accueil .f-adresse .address-row input {
  color: #2a1a12;
}
.f-accueil .f-adresse .suggestions {
  border-color: rgba(42, 26, 18, 0.14);
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.45);
}
.f-accueil .f-adresse .suggestions button {
  color: #2a1a12;
}
.f-accueil .f-adresse .suggestions button:hover,
.f-accueil .f-adresse .suggestions button:focus-visible {
  background: rgba(210, 49, 69, 0.07);
}

/* La case d'accord, sur la carte crème. */
.f-accueil .f-consentement {
  margin-top: 2px;
  color: #6b5646;
}
.f-accueil .f-consentement input {
  accent-color: #d23145;
}
.f-accueil .f-consentement a {
  color: #d23145;
}

/* La fenêtre du code texto. */
.f-accueil .v-voile {
  background: rgba(8, 29, 21, 0.82);
}
.f-accueil .v-fiche {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0c2a20;
}
.f-accueil .v-fiche-tete h2 {
  font-family: var(--police-fetes), sans-serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}
.f-accueil .v-fiche-tete .v-surtitre {
  font-family: var(--police-sans), sans-serif;
  font-weight: 600;
  color: var(--acid);
}
.f-accueil .v-fiche-tete p {
  color: #cfe0d6;
}
.f-accueil .v-fiche-tete .simu-numero {
  color: #fbf4e6;
}
.f-accueil .v-fiche-illustration svg {
  display: block;
  height: 64px;
  width: auto;
}
.f-accueil .simu-code-saisie {
  border-color: rgba(255, 255, 255, 0.16);
  background: #081d15;
  color: #fbf4e6;
}
.f-accueil .simu-code-bouton {
  border-radius: 16px;
  background: #d23145;
  color: #fff;
  font-family: var(--police-fetes), sans-serif;
  font-weight: 800;
  box-shadow:
    0 6px 0 #8f1626,
    0 16px 30px -14px rgba(0, 0, 0, 0.6);
}
.f-accueil .case-suivi {
  color: #9dbcad;
}
.f-accueil .v-fiche .v-lien {
  color: #cfe0d6;
}
.f-accueil .v-fiche .v-lien[data-ton="discret"] {
  color: #9dbcad;
}
.f-accueil .v-fiche-pied {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Le champ d'adresse de l'ordre « adresse d'abord », dans l'accroche et le
 * dernier appel : la maquette n'a pas cet ordre; le champ du site y garde sa
 * forme, sur fond vert. */
.f-accueil .f-champ-adresse {
  width: 100%;
}

/* Les animations de l'habillage des Fêtes — recopiées de la maquette du
 * 2026-09-30, chacune préfixée `f-` : la maquette reprend aussi des noms du
 * site classique (`w5-cadre`, `sim-fiche`…), et deux définitions sous le même
 * nom se remplaceraient l'une l'autre selon l'ordre des feuilles.
 *
 * Recopiées de la maquette une fois; elles se retouchent ici. */

@keyframes f-reveal-demo {
  0%,
  12%,
  100% {
    clip-path: inset(0 0 0 70%);
  }
  48%,
  64% {
    clip-path: inset(0 0 0 38%);
  }
}
@keyframes f-sweep-demo {
  0%,
  12%,
  100% {
    left: 70%;
  }
  48%,
  64% {
    left: 38%;
  }
}
@keyframes f-brand-loop {
  to {
    transform: translateX(-50%);
  }
}
@keyframes f-at-frappe {
  0%,
  3% {
    max-width: 0;
  }
  32%,
  100% {
    max-width: 104px;
  }
}
@keyframes f-at-caret {
  0%,
  36% {
    visibility: visible;
  }
  37%,
  100% {
    visibility: hidden;
  }
}
@keyframes f-at-clignote {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes f-v5-sugg {
  0%,
  34% {
    opacity: 0;
    transform: translateY(-8px);
  }
  41%,
  50% {
    border-color: rgba(255, 255, 255, 0.09);
    opacity: 1;
    transform: translateY(0);
  }
  53% {
    border-color: color-mix(in srgb, var(--acid) 60%, transparent);
    opacity: 1;
    transform: translateY(0) scale(0.97);
  }
  56% {
    transform: translateY(0) scale(1);
  }
  60%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes f-v5-charge {
  0%,
  56% {
    opacity: 0;
  }
  62%,
  76% {
    opacity: 1;
  }
  82%,
  100% {
    opacity: 0;
  }
}
@keyframes f-v5-tourne {
  to {
    transform: rotate(360deg);
  }
}
@keyframes f-v5-jauge {
  0%,
  58% {
    width: 0;
  }
  64% {
    width: 34%;
  }
  70% {
    width: 58%;
  }
  76% {
    width: 88%;
  }
  79%,
  100% {
    width: 100%;
  }
}
@keyframes f-v5-maison {
  0%,
  78% {
    opacity: 0;
    transform: scale(1.07);
  }
  88%,
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes f-v5-voile {
  0%,
  78% {
    opacity: 0;
  }
  88%,
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes f-w5-cadre {
  0%,
  17% {
    transform: scale(1.3) translate(0, 0);
  }
  36%,
  46% {
    transform: scale(1.3) translate(-9%, 6%);
  }
  58%,
  64% {
    transform: scale(1.73) translate(-9%, 6%);
  }
  74%,
  84% {
    transform: scale(1.14) translate(0, 0);
  }
  86%,
  88% {
    transform: scale(1.1) translate(0, 0);
  }
  92%,
  98% {
    transform: scale(1.13) translate(0, 0);
  }
  100% {
    transform: scale(1.3) translate(0, 0);
  }
}
@keyframes f-w5-chip {
  0%,
  13% {
    opacity: 1;
    transform: translateY(0);
  }
  20%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes f-w5-drag1 {
  0%,
  17% {
    transform: translate(5.85%, -3.9%);
  }
  36%,
  100% {
    transform: translate(-5.85%, 3.9%);
  }
}
@keyframes f-w5-appui1 {
  0%,
  11% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  17%,
  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  39% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  43%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@keyframes f-w5-pinceA {
  0%,
  46% {
    transform: translate(-6%, 5.9%);
  }
  58%,
  64% {
    transform: translate(-8%, 7.87%);
  }
  74%,
  100% {
    transform: translate(-5.26%, 5.17%);
  }
}
@keyframes f-w5-pinceB {
  0%,
  46% {
    transform: translate(6%, -5.9%);
  }
  58%,
  64% {
    transform: translate(8%, -7.87%);
  }
  74%,
  100% {
    transform: translate(5.26%, -5.17%);
  }
}
@keyframes f-w5-appuiP {
  0%,
  43% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  46%,
  74% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  77%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes f-w5-viseur {
  0%,
  82% {
    opacity: 0;
    transform: scale(1.14);
  }
  86% {
    opacity: 1;
    transform: scale(0.97);
  }
  90%,
  98% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}
@keyframes f-w5-bouton {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(1);
  }
  24%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.9);
  }
  86% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.04);
  }
  88%,
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes f-w5-clic {
  0%,
  76% {
    transform: translate(-2%, 10%);
  }
  83%,
  100% {
    transform: translate(0, 36%);
  }
}
@keyframes f-w5-appuiC {
  0%,
  74% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  83%,
  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78);
  }
  88% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  91%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes f-w5-flash {
  0%,
  84% {
    opacity: 0;
  }
  85.5% {
    opacity: 0.9;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes f-w5-pastille {
  0%,
  88% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  92%,
  98% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}
@keyframes f-x-scan {
  0%,
  4% {
    top: 6%;
    opacity: 0;
  }
  9% {
    top: 20%;
    opacity: 1;
  }
  26% {
    top: 66%;
    opacity: 1;
  }
  31%,
  100% {
    top: 78%;
    opacity: 0;
  }
}
@keyframes f-x-trace {
  0%,
  4% {
    clip-path: inset(0 0 92% 0);
    opacity: 1;
  }
  9% {
    clip-path: inset(0 0 80% 0);
  }
  26% {
    clip-path: inset(0 0 34% 0);
  }
  31%,
  40% {
    clip-path: inset(0 0 22% 0);
    opacity: 1;
  }
  47%,
  100% {
    clip-path: inset(0 0 22% 0);
    opacity: 0;
  }
}
@keyframes f-x-analyse {
  0%,
  3% {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  8%,
  34% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  40%,
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}
@keyframes f-q-popup {
  0%,
  42% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  50%,
  92% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
@keyframes f-q-curseur {
  0%,
  48% {
    top: 40px;
    left: 82%;
    opacity: 0;
  }
  54% {
    top: 40px;
    left: 82%;
    opacity: 1;
  }
  64% {
    top: 56px;
    left: 50%;
    opacity: 1;
  }
  67%,
  70% {
    top: 60px;
    left: 50%;
    opacity: 1;
  }
  74% {
    top: 56px;
    left: 50%;
    opacity: 1;
  }
  86% {
    top: 132px;
    left: calc(100% - 42px);
    opacity: 1;
  }
  89%,
  91% {
    top: 136px;
    left: calc(100% - 42px);
    opacity: 1;
  }
  96%,
  100% {
    top: 132px;
    left: calc(100% - 42px);
    opacity: 0;
  }
}
@keyframes f-q-retenu {
  0%,
  67% {
    border-color: transparent;
    box-shadow: none;
  }
  71% {
    border-color: var(--acid);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acid) 30%, transparent);
  }
  77%,
  100% {
    border-color: var(--acid);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--acid) 22%, transparent);
  }
}
@keyframes f-q-ecarte {
  0%,
  67% {
    opacity: 1;
    filter: none;
  }
  77%,
  100% {
    opacity: 0.42;
    filter: saturate(0.5);
  }
}
@keyframes f-q-coche {
  0%,
  68% {
    opacity: 0;
    transform: scale(0.4);
  }
  74%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes f-q-bouton {
  0%,
  68% {
    box-shadow: none;
    opacity: 0.38;
    transform: scale(1);
  }
  75%,
  88% {
    box-shadow: none;
    opacity: 1;
    transform: scale(1);
  }
  90%,
  92% {
    box-shadow: none;
    opacity: 1;
    transform: scale(0.91);
  }
  95% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--acid) 30%, transparent);
    transform: scale(1.04);
  }
  99%,
  100% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--acid) 0%, transparent);
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes f-sc4-rideau {
  0%,
  10% {
    clip-path: inset(0 100% 0 0);
  }
  42%,
  74% {
    clip-path: inset(0 0 0 0);
  }
  94%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes f-sc4-glisse {
  0%,
  10% {
    left: 0;
  }
  42%,
  74% {
    left: 100%;
  }
  94%,
  100% {
    left: 0;
  }
}
@keyframes f-sc4-fondu {
  0% {
    opacity: 0;
  }
  9%,
  37% {
    opacity: 1;
  }
  43%,
  72% {
    opacity: 0;
  }
  79%,
  93% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes f-alerte-entree {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes f-sim-voile {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes f-sim-fiche {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes f-sim-feuille {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes f-pA-revele {
  0%,
  14%,
  100% {
    clip-path: inset(0 0 0 72%);
  }
  46%,
  66% {
    clip-path: inset(0 0 0 30%);
  }
}
@keyframes f-pA-ligne {
  0%,
  14%,
  100% {
    left: 72%;
  }
  46%,
  66% {
    left: 30%;
  }
}
@keyframes f-scintille {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes f-balance {
  0%,
  100% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}
@keyframes f-neige {
  from {
    transform: translate(0, -12px);
  }
  to {
    transform: translate(var(--dx), 110vh);
  }
}
@keyframes f-lumi-saute {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  40% {
    transform: translateY(-8px) scale(0.98, 1.02);
  }
  70% {
    transform: translateY(0) scale(1.03, 0.97);
  }
}
@keyframes f-lumi-salue {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-24deg);
  }
}
@keyframes f-lumi-lueur {
  0%,
  100% {
    filter: drop-shadow(0 0 4px #ffd97e);
  }
  50% {
    filter: drop-shadow(0 0 14px #ffd97e) drop-shadow(0 0 30px rgba(255, 200, 90, 0.8));
  }
}
@keyframes f-panc-marche {
  0% {
    transform: translateX(-260px);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  60%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes f-panc-pas {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}
@keyframes f-panc-leve {
  0%,
  62% {
    transform: translateY(0);
  }
  70%,
  84% {
    transform: translateY(-38px);
  }
  94%,
  100% {
    transform: translateY(0);
  }
}
@keyframes f-pendule {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes f-coucou {
  0%,
  100% {
    transform: rotate(-14deg) translateX(0);
  }
  50% {
    transform: rotate(-8deg) translateX(-8px);
  }
}
@keyframes f-salue {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-22deg);
  }
}
@keyframes f-sautille {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes f-nez {
  0%,
  100% {
    filter: drop-shadow(0 0 3px #ff3b3b);
  }
  50% {
    filter: drop-shadow(0 0 10px #ff5050) drop-shadow(0 0 22px rgba(255, 60, 60, 0.8));
  }
}
@keyframes f-code-attente {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes f-lumi-jambe {
  0%,
  100% {
    transform: rotate(9deg);
  }
  50% {
    transform: rotate(-12deg);
  }
}
@keyframes f-lumi-pendu {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

/* Ce que la maquette pose sur toute sa page, ramené à l'accueil des Fêtes. */
.f-accueil a {
  color: inherit;
  text-decoration: none;
}
.f-accueil a:hover {
  color: #ffd97e;
}
.f-accueil button,
.f-accueil input {
  font: inherit;
}
.f-accueil input::placeholder {
  color: #777b70;
}

/* ⚠️ LE DÉCOR S'ARRÊTE POUR QUI A COUPÉ LES ANIMATIONS. La passation le
 * demande : plus de neige, de balancement ni de marche, des poses fixes. Les
 * scènes des quatre étapes, elles, continuent : figées, elles resteraient
 * noires ou à moitié tapées — ce sont des démonstrations, pas du décor. */
@media (prefers-reduced-motion: reduce) {
  .f-accueil .f-neige {
    display: none;
  }
  .f-accueil .f-lumi,
  .f-accueil .f-lumi *,
  .f-accueil [style*="f-balance"],
  .f-accueil [style*="f-brand-loop"],
  .f-accueil [style*="f-sautille"],
  .f-accueil [style*="f-scintille"],
  .f-accueil [style*="f-pA-"] {
    animation: none !important;
  }
  .f-accueil .f-panc {
    opacity: 1;
  }
}

/* Les survols et les focus de la maquette des Fêtes — ses attributs
 * `style-hover` / `style-focus`, traduits en classes par le convertisseur
 * (`scripts/maquette-vers-jsx.py`). `!important` : ils doivent passer devant
 * les styles en ligne qu'ils modifient. */
.fx4-h1:hover {
  transform: translateY(2px) !important;
  color: #fff !important;
}
.fx6-h1:hover {
  transform: scale(1.03) !important;
}
.fx7-h1:hover {
  transform: translateY(-6px) rotate(-1deg) !important;
}
.fx9-f1:focus {
  border-color: color-mix(in srgb, #d23145 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d23145 22%, transparent) !important;
}
.fx9-f2:focus {
  border-color: color-mix(in srgb, #d23145 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d23145 22%, transparent) !important;
}
.fx9-f3:focus {
  border-color: color-mix(in srgb, #d23145 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d23145 22%, transparent) !important;
}
.fx9-f4:focus {
  border-color: color-mix(in srgb, #d23145 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d23145 22%, transparent) !important;
}
.fx9-h5:hover {
  transform: translateY(2px) !important;
}
.fx10-h1:hover {
  transform: translateY(2px) !important;
  color: #fff !important;
}
.fx12-h1:hover {
  transform: translateY(2px) !important;
  color: #fff !important;
}
.fx13-h1:hover {
  transform: translateY(2px) !important;
  color: #fff !important;
}
.fx16-h1:hover {
  color: #fbf4e6 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.fx16-f2:focus {
  border-color: var(--acid) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acid) 20%, transparent) !important;
}
.fx16-h3:hover {
  transform: translateY(2px) !important;
}
.fx16-h4:hover {
  color: #fbf4e6 !important;
}
.fx16-h5:hover {
  color: #fbf4e6 !important;
}