/* =====================================================================
   Webfaya — page d'accueil, charte 2026
   Construite à partir de css/tokens.css. Aucune couleur, aucune durée,
   aucun espacement n'est écrit en dur ici : tout passe par les jetons.

   Règles de la charte tenues dans ce fichier :
   — aucune ombre portée, nulle part ;
   — border-radius 0 sur les blocs, 999px sur les actions et étiquettes ;
   — aucun dégradé, aplats uniquement ;
   — titres en bas de casse, letter-spacing -.04em, line-height .88 ;
   — aucune animation au-delà de 600 ms ;
   — tout est coupé sous prefers-reduced-motion, bandeaux compris.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Pas d'overflow-x: hidden sur body : il en fait un conteneur de
   defilement, et `animation-timeline: scroll(root)` ne resout alors plus
   (timeline inactive, barre de progression figee). Le debordement
   horizontal est deja nul a 375, 768 et 1440px — cette securite coutait
   plus qu'elle ne rapportait. Les bandeaux defilants sont contenus par
   leur propre `overflow: hidden`. */

img { max-width: 100%; }

.wf-contenu {
  max-width: var(--wf-contenu-max);
  margin-inline: auto;
}

.wf-section {
  padding: var(--wf-section-y) var(--wf-section-x);
}

/* Le numéro de section, en tête de chaque bloc. */
.wf-num {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-encre-2);
}

/* L'italique d'accent. Une seule occurrence par écran : la charte
   l'impose, et c'est ce qui lui garde sa force. */
.wf-italique {
  font-family: var(--wf-font-accent);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.01em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wf-saut {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--wf-jungle);
  color: var(--wf-coco);
  border-radius: var(--wf-r-action);
}
.wf-saut:focus { left: var(--wf-section-x); top: 12px; }

/* =====================================================================
   En-tête
   Seul endroit du site où un fond flouté est autorisé.
   ===================================================================== */
.wf-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--wf-section-x);
  background: rgba(250, 244, 232, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 34, 26, .16);
}

.wf-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wf-jungle);
}
.wf-logo:hover { color: var(--wf-jungle); }
/* La braise du logotype vacille : c'est la seule animation permanente
   de l'en-tête. Elle vit à côté du mot, jamais dedans. */
.wf-braise-logo {
  width: 13px;
  height: 13px;
  background: var(--wf-braise);
  border-radius: 3px;
  animation: wf-flicker 2.6s steps(1, end) infinite;
}
.wf-mot {
  font-family: var(--wf-font-titre);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: var(--wf-titre-tracking);
  text-transform: none;
}

.wf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* :not() sur le bouton, sinon cette regle (0-1-1) ecrase la couleur de
   .wf-action-nav (0-1-0) et le texte du CTA tombe a 2,1:1 sur l'encre. */
.wf-nav a:not(.wf-action-nav) { color: var(--wf-encre-2); transition: color var(--wf-d-survol) var(--wf-c-entree); }
.wf-nav a:not(.wf-action-nav):hover { color: var(--wf-jungle); }

.wf-action {
  display: inline-block;
  border-radius: var(--wf-r-action);
  font-family: var(--wf-font-texte);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--wf-d-survol) var(--wf-c-entree),
              color var(--wf-d-survol) var(--wf-c-entree),
              border-color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-action-nav {
  padding: 11px 16px;
  background: var(--wf-jungle);
  color: var(--wf-coco);
  font-size: 13px;
  font-weight: 600;
}
.wf-action-nav:hover { background: var(--wf-braise-foncee); color: var(--wf-coco); }

/* Menu mobile : volet plein écran depuis le haut. */
.wf-burger {
  display: none;
  padding: 10px 14px;
  background: none;
  border: 1px solid rgba(18, 34, 26, .3);
  border-radius: var(--wf-r-action);
  color: var(--wf-jungle);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* =====================================================================
   Hero
   ===================================================================== */
.wf-hero { padding: clamp(36px, 6vw, 88px) var(--wf-section-x) 0; }

.wf-annonce {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-braise-foncee);
}
.wf-annonce-filet {
  flex: 1;
  height: 1px;
  background: rgba(181, 48, 11, .35);
}
.wf-annonce-fin { color: var(--wf-encre-2); }

.wf-hero-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(18px, 3vw, 32px);
}

.wf-h1 {
  font-size: var(--wf-t-hero);
  line-height: .86;
  letter-spacing: -.045em;
}
.wf-h1 span { display: block; }
.wf-h1 .wf-italique { font-size: .82em; color: var(--wf-braise-foncee); }

.wf-hero-texte {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 44ch;
  font-size: var(--wf-t-texte);
  line-height: var(--wf-texte-leading);
  color: rgba(18, 34, 26, .82);
  text-wrap: pretty;
}

.wf-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.wf-btn-plein,
.wf-btn-ligne {
  padding: 15px 24px;
  border-radius: var(--wf-r-action);
  font-size: 15px;
  transition: background-color var(--wf-d-survol) var(--wf-c-entree),
              color var(--wf-d-survol) var(--wf-c-entree),
              border-color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-btn-plein {
  background: var(--wf-jungle);
  color: var(--wf-coco);
  font-weight: 600;
}
.wf-btn-plein:hover { background: var(--wf-braise-foncee); color: var(--wf-coco); }
.wf-btn-ligne {
  border: 1px solid rgba(18, 34, 26, .3);
  color: var(--wf-jungle);
  font-weight: 500;
}
.wf-btn-ligne:hover { border-color: var(--wf-braise-foncee); color: var(--wf-braise-foncee); }

.wf-mascotte { display: grid; place-items: center; }
.wf-mascotte img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  /* La charte l'exige : jamais déformée. */
  object-fit: contain;
  animation: wf-float 4.5s ease-in-out infinite;
}

/* Les quatre visuels sous le hero. La maquette prévoyait des trames
   d'attente ; la charte interdit de les livrer. On y met les captures
   réelles des sites en ligne, au format 3/4 demandé. */
.wf-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  margin-top: clamp(28px, 4vw, 52px);
}
.wf-vitrine figure {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wf-jungle);
  border-radius: var(--wf-r-bloc);
}
.wf-vitrine figure:nth-child(2n) { margin-top: clamp(0px, 3vw, 30px); }
.wf-vitrine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.wf-vitrine figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px;
  background: var(--wf-jungle);
  font-family: var(--wf-font-mono);
  font-size: 9px;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(250, 244, 232, .82);
}

/* =====================================================================
   Bandeaux défilants
   Un seul par page selon la charte. Le second, celui des clients, vit
   dans la même page : la charte l'autorise explicitement (30 s services,
   48 s clients) — voir README, section Interactions.
   ===================================================================== */
.wf-bandeau {
  overflow: hidden;
  padding: 13px 0;
  font-family: var(--wf-font-titre);
  font-weight: 800;
  letter-spacing: -.03em;
}
.wf-bandeau-braise {
  background: var(--wf-braise);
  color: var(--wf-jungle);
  margin-top: clamp(32px, 5vw, 72px);
  /* 19px et non 18 : l'encre sur la braise donne 3,36:1. En dessous de
     18,66px en gras, WCAG exige 4,5:1 ; au-dessus, 3:1 suffit. Un pixel
     de plus, invisible a l'oeil, et le bandeau est conforme partout. */
  font-size: clamp(19px, 2.4vw, 26px);
}
.wf-bandeau-jungle {
  background: var(--wf-jungle);
  color: var(--wf-coco);
  font-size: clamp(16px, 2vw, 22px);
}
.wf-piste {
  display: flex;
  width: max-content;
}
.wf-bandeau-braise .wf-piste { animation: wf-marquee 30s linear infinite; }
.wf-bandeau-jungle .wf-piste { animation: wf-marquee-rev 48s linear infinite; }
.wf-piste > div {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  white-space: nowrap;
}
.wf-losange { opacity: .55; }
.wf-bandeau-jungle .wf-losange { color: var(--wf-ambre); }
.wf-piste img { display: block; height: 34px; width: auto; }

/* =====================================================================
   01 — Le studio
   ===================================================================== */
.wf-studio-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.wf-h2 {
  margin-top: 16px;
  font-size: var(--wf-t-section);
  line-height: .9;
}
.wf-studio-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
}
/* Enfants directs uniquement : sinon cette regle gagne (0-1-1) sur
   .wf-chiffre-val (0-1-0) et ecrase la taille des chiffres. */
.wf-studio-col > p {
  margin: 0;
  font-size: var(--wf-t-texte);
  line-height: 1.6;
  color: rgba(18, 34, 26, .82);
  text-wrap: pretty;
}
.wf-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(18, 34, 26, .18);
}
.wf-chiffre-val {
  font-family: var(--wf-font-titre);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--wf-braise-foncee);
}
.wf-chiffre-lib {
  font-family: var(--wf-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-encre-2);
  margin-top: 6px;
}

/* =====================================================================
   02 — Offres (fond jungle)
   ===================================================================== */
.wf-jungle {
  background: var(--wf-jungle);
  color: var(--wf-coco);
}
.wf-jungle .wf-num { color: var(--wf-ambre); }

.wf-tete-offres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.wf-tete-offres p {
  margin: 0;
  max-width: 32ch;
  font-size: 15px;
  line-height: var(--wf-texte-leading);
  color: rgba(250, 244, 232, .85);
}

.wf-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin-top: clamp(28px, 4vw, 52px);
}
.wf-offre {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(250, 244, 232, .22);
  border-radius: var(--wf-r-bloc);
  transition: border-color var(--wf-d-survol) var(--wf-c-entree),
              background-color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-offre:hover,
.wf-offre:focus-within {
  border-color: var(--wf-braise-claire);
  background: rgba(250, 244, 232, .04);
}
.wf-offre-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wf-offre-num { color: rgba(250, 244, 232, .7); }
.wf-offre-prix { color: var(--wf-ambre); }
.wf-offre h3 {
  font-size: var(--wf-t-bloc);
  line-height: .94;
}
.wf-offre > p:not(.wf-offre-tete) {
  margin: 0;
  font-size: 15px;
  line-height: var(--wf-texte-leading);
  color: rgba(250, 244, 232, .85);
  text-wrap: pretty;
}
.wf-offre ul {
  margin: auto 0 0;
  padding: 16px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(250, 244, 232, .18);
}
.wf-offre li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: rgba(250, 244, 232, .85);
}
.wf-fleche { color: var(--wf-braise-claire); }

/* =====================================================================
   03 — Travaux
   ===================================================================== */
.wf-travaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 12px;
}
.wf-projet {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(18, 34, 26, .2);
  border-radius: var(--wf-r-bloc);
  overflow: hidden;
  transition: border-color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-projet:hover,
.wf-projet:focus-within { border-color: var(--wf-braise-foncee); }
.wf-projet-image {
  aspect-ratio: 4 / 3;
  background: var(--wf-jungle);
  overflow: hidden;
}
.wf-projet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.wf-projet-corps {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wf-projet-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wf-projet h3 {
  font-size: 24px;
  letter-spacing: -.035em;
  line-height: 1;
}
.wf-projet-annee {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  color: var(--wf-encre-2);
}
.wf-projet-resume {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 34, 26, .82);
}
.wf-projet-tags {
  margin-top: auto;
  font-family: var(--wf-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-braise-foncee);
}
.wf-projet-lien {
  display: inline-block;
  font-family: var(--wf-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-braise-foncee);
}
/* Soulignement qui se déploie depuis la gauche, jamais d'agrandissement. */
.wf-projet-lien::after {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms var(--wf-c-entree);
}
.wf-projet-lien:hover::after,
.wf-projet-lien:focus-visible::after { transform: scaleX(1); }

/* =====================================================================
   04 — Méthode
   ===================================================================== */
.wf-methode-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.wf-methode-intro {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(18, 34, 26, .82);
}
.wf-etapes { display: flex; flex-direction: column; }
.wf-etape {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(18, 34, 26, .18);
}
.wf-etape-num {
  font-family: var(--wf-font-mono);
  font-size: 12px;
  color: var(--wf-braise-foncee);
}
.wf-etape h3 {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.03em;
  margin-bottom: 6px;
  line-height: 1;
}
.wf-etape p {
  margin: 0;
  font-size: 15px;
  line-height: var(--wf-texte-leading);
  color: rgba(18, 34, 26, .82);
}

/* =====================================================================
   05 — Questions (fond ambre)
   ===================================================================== */
.wf-ambre {
  background: var(--wf-ambre);
  color: var(--wf-jungle);
}
.wf-ambre .wf-num { color: var(--wf-jungle); }
.wf-faq-contenu { max-width: 1000px; margin-inline: auto; }
.wf-faq { border-top: 1px solid rgba(18, 34, 26, .28); }
.wf-question { border-bottom: 1px solid rgba(18, 34, 26, .28); }
.wf-question > summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  font-family: var(--wf-font-titre);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -.03em;
  line-height: 1.1;
  cursor: pointer;
  list-style: none;
}
.wf-question > summary::-webkit-details-marker { display: none; }
.wf-signe {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 34, 26, .4);
  border-radius: var(--wf-r-action);
  font-size: 18px;
  font-family: var(--wf-font-texte);
  transition: transform 200ms var(--wf-c-entree);
}
/* Le « + » pivote de 135° pour devenir un « – » : un seul caractère,
   aucun changement de contenu à annoncer au lecteur d'écran. */
.wf-question[open] .wf-signe { transform: rotate(135deg); }
.wf-reponse {
  margin: 0;
  padding: 0 2px 22px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  animation: wf-rise var(--wf-d-apparition) var(--wf-c-entree) both;
}

/* =====================================================================
   06 — Contact (fond jungle)
   ===================================================================== */
.wf-contact-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.wf-h2-contact {
  margin-top: 16px;
  font-size: clamp(38px, 7vw, 96px);
  line-height: .88;
  letter-spacing: -.045em;
}
.wf-h2-contact .wf-italique { color: var(--wf-ambre); }
.wf-contact-texte {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: var(--wf-t-texte);
  line-height: var(--wf-texte-leading);
  color: rgba(250, 244, 232, .85);
  text-wrap: pretty;
}
.wf-btn-coco {
  padding: 15px 24px;
  background: var(--wf-coco);
  color: var(--wf-jungle);
  border-radius: var(--wf-r-action);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--wf-d-survol) var(--wf-c-entree),
              color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-btn-coco:hover { background: var(--wf-ambre); color: var(--wf-jungle); }
.wf-btn-ligne-claire {
  padding: 15px 24px;
  border: 1px solid rgba(250, 244, 232, .35);
  color: var(--wf-coco);
  border-radius: var(--wf-r-action);
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--wf-d-survol) var(--wf-c-entree),
              color var(--wf-d-survol) var(--wf-c-entree);
}
.wf-btn-ligne-claire:hover { border-color: var(--wf-ambre); color: var(--wf-ambre); }

/* =====================================================================
   Pied de page
   ===================================================================== */
.wf-pied {
  padding: clamp(28px, 4vw, 48px) var(--wf-section-x);
}
.wf-pied-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-encre-2);
}
.wf-pied-mot {
  font-family: var(--wf-font-titre);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: var(--wf-titre-tracking);
  color: var(--wf-jungle);
  text-transform: none;
}
.wf-pied-liens { display: flex; flex-wrap: wrap; gap: 14px; }
.wf-pied a { color: var(--wf-encre-2); }
.wf-pied a:hover { color: var(--wf-braise-foncee); }
.wf-note-faya {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wf-encre-3);
  max-width: 58ch;
}

/* =====================================================================
   Animations — bibliothèque de la charte, section 12
   ===================================================================== */
@keyframes wf-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes wf-marquee-rev {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes wf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wf-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes wf-flicker {
  0%, 100% { opacity: 1; }
  38% { opacity: .55; }
  52% { opacity: 1; }
  68% { opacity: .72; }
}

/* Entrée des lignes de titre et des blocs.
   `both` : l'élément finit toujours visible, même si le script échoue. */
.wf-entre { animation: wf-rise .5s var(--wf-c-entree) both; }
.wf-d1 { animation-delay: .06s; }
.wf-d2 { animation-delay: .14s; }
.wf-d3 { animation-delay: .22s; }
.wf-d4 { animation-delay: .30s; }
.wf-d5 { animation-delay: .38s; }

/* Apparition au scroll.
   Le masquage n'est actif que sous .wf-anim, classe posée par le script
   APRES qu'il a mis l'observateur en place — et retirée par un garde-fou
   au bout de 1,5 s. Autrement dit : un observateur qui ne se déclenche
   jamais ne peut pas laisser la page vide. */
.wf-anim .wf-reveal { opacity: 0; transform: translateY(16px); }
.wf-anim .wf-reveal.wf-vu {
  opacity: 1;
  transform: none;
  transition: opacity var(--wf-d-apparition) var(--wf-c-entree),
              transform var(--wf-d-apparition) var(--wf-c-entree);
}

/* =====================================================================
   Points de rupture
   ===================================================================== */
@media (max-width: 768px) {
  .wf-burger { display: inline-block; }
  .wf-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding: var(--wf-section-x);
    background: var(--wf-coco);
    font-size: 14px;
  }
  .wf-nav.wf-ouvert {
    display: flex;
    animation: wf-rise 450ms var(--wf-c-volet) both;
  }
  .wf-nav a { font-size: 15px; }
  .wf-action-nav { font-size: 15px; }
}

@media (max-width: 480px) {
  .wf-vitrine { grid-template-columns: repeat(2, 1fr); }
  .wf-etape { grid-template-columns: 40px 1fr; gap: 12px; }
}

/* =====================================================================
   Mouvement réduit — non négociable, bandeaux compris
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wf-piste,
  .wf-braise-logo,
  .wf-mascotte img,
  .wf-entre,
  .wf-nav.wf-ouvert,
  .wf-reponse { animation: none !important; }
  .wf-entre { opacity: 1; transform: none; }
  .wf-anim .wf-reveal { opacity: 1; transform: none; }
  .wf-signe,
  .wf-projet-lien::after,
  .wf-action,
  .wf-btn-plein,
  .wf-btn-ligne,
  .wf-btn-coco,
  .wf-btn-ligne-claire,
  .wf-offre,
  .wf-projet { transition: none !important; }
}