/* =========================================================================
   Gamer Garden — feuille de style unique
   Palette de la charte : vert #418968 · orange #C05F35
                          crème #EFE3C4 · forêt #1F4433
   Typographies : Lazydog (titres) · Barlow Semi Condensed (texte)
   ========================================================================= */

/* --- Typographies ------------------------------------------------------
   TITRES ET LOGO : Lazydog (Khurasan), à déposer dans assets/fonts/ sous le
   nom lazydog.woff2 — ou lazydog.woff, les deux formats sont acceptés.
   Voir assets/fonts/LISEZ-MOI.txt.

   TEXTE COURANT : Barlow Semi Condensed (SIL Open Font License), livrée avec
   le projet. Elle remplace Prachason Neue Condensed, qui est une police
   commerciale (Jipatype) dont la licence webfont est payante.
   Pour essayer une autre alternative libre, voir polices-alternatives/.
   ---------------------------------------------------------------------- */
@font-face { font-family: "Lazydog";
  src: url("../fonts/lazydog.woff2") format("woff2"),
       url("../fonts/lazydog.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Couleurs de la charte, utilisées telles quelles pour le logo,
     les aplats décoratifs et les grands titres. */
  --vert: #418968;
  --orange: #C05F35;
  --creme: #EFE3C4;
  --foret: #1F4433;
  --clair: #F7F1E2;
  --encre: #163326;
  --orange-clair: #E39468;

  /* Variantes légèrement assombries, réservées aux fonds qui portent du
     texte courant et au texte orange de petite taille : les teintes de la
     charte plafonnent à 3,3–3,8:1 sur crème, sous le seuil WCAG AA (4,5:1).
     L'écart est imperceptible à l'œil, la lisibilité ne l'est pas. */
  --vert-fond: #39795C;
  --orange-fond: #AC552F;
  --orange-texte: #9F4E2B;

  --titre: "Lazydog", "Bowlby One SC", "Fredoka", system-ui, sans-serif;
  --texte: "Barlow Semi Condensed", "Barlow Condensed", "Oswald", system-ui, sans-serif;

  --wrap: 1180px;
  --gouttiere: 1.25rem;
  --rayon: 18px;
  --ombre: 0 18px 44px rgba(22, 51, 38, .14);
  --ombre-douce: 0 6px 20px rgba(22, 51, 38, .08);
  --t: cubic-bezier(.22, .61, .36, 1);

  --fond: var(--clair);
  --fond-icone: var(--clair);
  --accent: var(--orange-texte);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--clair);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
mark { background: rgba(192, 95, 53, .22); color: inherit; padding: 0 .2em; border-radius: 3px; }

h1, h2, h3, .display, .logo {
  font-family: var(--titre); font-weight: 400; line-height: 1.06;
  letter-spacing: .01em; text-transform: uppercase; margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
.display { font-size: clamp(1.9rem, 1.2rem + 3.1vw, 3.4rem); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.15em; max-width: 62ch; }
.surtitre {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .22em;
  font-size: .8rem; color: var(--accent); margin-bottom: .6rem;
}
.center { text-align: center; }
.center .lead, .center > p { margin-inline: auto; }

.wrap { width: min(100% - (var(--gouttiere) * 2), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 780px; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange-fond); color: #fff; padding: .8rem 1.2rem; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.bloc--orange :focus-visible, .bloc--foret :focus-visible, .pied :focus-visible { outline-color: var(--creme); }

/* --- Logo --------------------------------------------------------------- */
.logo { display: inline-flex; flex-direction: column; line-height: .9;
  text-decoration: none; margin: 0; }
.logo--entete { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: var(--vert); }
.logo--pied { font-size: 2rem; color: var(--creme); }
.logo--hero { font-size: clamp(2.7rem, .6rem + 11.5vw, 8rem); }
.logo--hero span {
  display: block; color: var(--vert);
  -webkit-text-stroke: .11em var(--creme); paint-order: stroke fill;
  filter: drop-shadow(.05em .065em 0 var(--orange));
}

/* --- En-tête ------------------------------------------------------------ */
/* Le flou est porté par un pseudo-élément et non par l'en-tête lui-même :
   backdrop-filter sur .entete créerait un bloc conteneur qui enfermerait
   le tiroir de menu en position fixed sur mobile. */
.entete {
  position: sticky; top: 0; z-index: 90; isolation: isolate;
  background: color-mix(in srgb, var(--clair) 93%, transparent);
  transition: box-shadow .3s var(--t);
}
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(12px); pointer-events: none; }
.entete.est-collee { box-shadow: 0 4px 22px rgba(22, 51, 38, .1); }
.entete__inner { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0; }
.nav ul { display: flex; gap: clamp(.7rem, .2rem + 1vw, 1.3rem); list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(.78rem, .68rem + .25vw, .9rem); position: relative; padding: .3rem 0; display: block; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--t); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; margin: -.6rem; }
.burger__bar { display: block; width: 26px; height: 2px; background: var(--foret); margin: 6px 0;
  transition: transform .3s var(--t), opacity .2s; border-radius: 2px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.voile { position: fixed; inset: 0; background: rgba(22, 51, 38, .5); z-index: 80;
  opacity: 0; transition: opacity .3s; }
.voile.est-visible { opacity: 1; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--creme);
  padding: clamp(2.5rem, 7vh, 5.5rem) 0 clamp(3.5rem, 9vh, 6rem); text-align: center; }
.hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 56px;
  background: radial-gradient(62% 100% at 50% 0, transparent 70%, var(--clair) 71%); }
.hero__inner { position: relative; z-index: 2; }
.hero__titre { margin: 0; }
.hero__tagline { font-family: var(--titre); text-transform: uppercase; letter-spacing: .28em;
  color: var(--foret); font-size: clamp(.82rem, .6rem + .8vw, 1.35rem); margin: 1rem 0 1.4rem; }
.hero__sub { max-width: 44ch; margin-inline: auto; color: var(--foret); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

.hero__pieces { position: absolute; inset: 0; pointer-events: none; }
.piece { position: absolute; fill: var(--vert); opacity: .17; will-change: transform; }
.piece--die    { width: clamp(46px, 6vw, 78px);  top: 13%; left: 7%;  fill: var(--orange); animation: flotte 7s ease-in-out infinite; }
.piece--meeple { width: clamp(38px, 5vw, 62px);  top: 62%; left: 12%; animation: flotte 9s ease-in-out infinite .6s; }
.piece--pad    { width: clamp(58px, 7.5vw, 96px); top: 19%; right: 8%; fill: var(--foret); animation: flotte 8s ease-in-out infinite .3s; }
.piece--leaf   { width: clamp(64px, 8.5vw, 110px); bottom: 9%; right: 11%; animation: flotte 11s ease-in-out infinite; }
.piece--leaf2  { width: clamp(42px, 5.5vw, 70px); top: 6%; right: 31%; transform: scaleX(-1); animation: flotte 10s ease-in-out infinite 1s; }
.piece--card   { width: clamp(34px, 4.5vw, 54px); bottom: 15%; left: 29%; fill: var(--orange); animation: flotte 8.5s ease-in-out infinite .9s; }
@keyframes flotte { 50% { transform: translateY(-15px) rotate(6deg); } }

.hero__scroll { position: absolute; left: 50%; bottom: 1rem; z-index: 3; width: 21px; height: 34px;
  border: 2px solid var(--foret); border-radius: 12px; opacity: .45; transform: translateX(-50%); }
.hero__scroll span { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px;
  background: var(--foret); border-radius: 2px; transform: translateX(-50%);
  animation: molette 1.8s ease-in-out infinite; }
@keyframes molette { 60% { transform: translate(-50%, 12px); opacity: 0; } 61% { opacity: 0; } 100% { opacity: 1; } }

/* --- Bandeau défilant --------------------------------------------------- */
.defile { background: var(--orange-fond); color: var(--clair); overflow: hidden; padding: .65rem 0; }
.defile__piste { display: flex; gap: 1.8rem; width: max-content; animation: glisse 38s linear infinite; }
.defile__piste span { font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .07em; white-space: nowrap; font-size: clamp(.85rem, .8rem + .2vw, 1rem); }
@keyframes glisse { to { transform: translateX(-50%); } }

/* --- Bandeau de titre de page ------------------------------------------- */
.banniere { background: var(--creme); padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.8rem, 4vw, 3rem); }
.fil { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-bottom: 1rem; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.statut { margin-top: 1.4rem; font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(65, 137, 104, .13); padding: .45rem 1rem; border-radius: 999px; }
.pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); flex: none;
  box-shadow: 0 0 0 0 rgba(65, 137, 104, .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(65, 137, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(65, 137, 104, 0); } }

/* --- Blocs et fonds ----------------------------------------------------- */
.bloc { padding: clamp(2.75rem, 7vw, 5.5rem) 0; background: var(--fond); color: var(--encre); }
.bloc--clair  { --fond: var(--clair);  --fond-icone: var(--clair);  --accent: var(--orange-texte); }
.bloc--creme  { --fond: var(--creme);  --fond-icone: var(--creme);  --accent: var(--orange-texte); }
.bloc--vert   { --fond: var(--vert-fond);   --fond-icone: var(--vert-fond);   --accent: var(--clair); color: var(--clair); }
.bloc--foret  { --fond: var(--foret);  --fond-icone: var(--foret);  --accent: var(--orange-clair); color: var(--creme); }
.bloc--orange { --fond: var(--orange-fond); --fond-icone: var(--orange-fond); --accent: var(--clair); color: var(--clair); }
.banniere + .bloc--creme { padding-top: 0; }

.entete-bloc { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.bloc--manifeste .entete-bloc, .center .entete-bloc { margin-inline: auto; }
.prose > p + p { margin-top: 0; }
.apres { margin-top: 1.2rem; }

/* --- Manifeste ---------------------------------------------------------- */
/* Police de TEXTE et pas de capitales : ce bloc porte des phrases entières,
   et Lazydog est une display — illisible au-delà de quelques mots. */
.manifeste { font-family: var(--texte); font-weight: 400; text-transform: none;
  line-height: 1.34; font-size: clamp(1.15rem, .95rem + 1.15vw, 1.75rem);
  margin: 0; letter-spacing: 0; text-wrap: balance; }
.manifeste__sig { margin-top: 1.2rem; opacity: .8; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .12em; }

/* --- Icônes ------------------------------------------------------------- */
.ico { width: 40px; height: 40px; fill: currentColor; display: block; margin-bottom: 1rem; flex: none; }

/* --- Cartes ------------------------------------------------------------- */
.grille-cartes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.carte { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--rayon);
  transition: transform .3s var(--t), box-shadow .3s var(--t); display: flex; flex-direction: column; }
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre); }
.carte p { flex: 1; }
.carte .link-arrow { margin-top: 1.2rem; align-self: flex-start; }
.carte--vert   { background: var(--vert-fond);   color: var(--clair); --fond-icone: var(--vert-fond); }
.carte--orange { background: var(--orange-fond); color: var(--clair); --fond-icone: var(--orange-fond); }
.carte--foret  { background: var(--foret);  color: var(--creme); --fond-icone: var(--foret); }
.carte--creme  { background: var(--creme);  color: var(--encre); --fond-icone: var(--creme); }
.bloc--creme .carte--creme { background: var(--clair); --fond-icone: var(--clair); }

/* --- Atouts (grille d'icônes) ------------------------------------------- */
.grille-atouts { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.atout { position: relative; padding-top: 1.2rem; border-top: 3px solid currentColor; }
.atout .ico { width: 34px; height: 34px; color: var(--accent); }
.atout h3 { margin-bottom: .4rem; }
.atout p { opacity: .92; }

/* --- Duo (texte + motif) ------------------------------------------------ */
.duo { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: 1.05fr .95fr; }
.duo--inverse .duo__texte { order: 2; }
.duo__motif { aspect-ratio: 5 / 4; border-radius: var(--rayon); display: grid; place-items: center;
  background:
    radial-gradient(circle at 22% 25%, rgba(65,137,104,.2) 0 12px, transparent 13px),
    radial-gradient(circle at 78% 72%, rgba(192,95,53,.2) 0 10px, transparent 11px),
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(31,68,51,.05) 16px 32px),
    var(--creme);
  box-shadow: inset 0 0 0 1px rgba(31, 68, 51, .08);
}
.bloc--creme .duo__motif { background:
    radial-gradient(circle at 22% 25%, rgba(65,137,104,.2) 0 12px, transparent 13px),
    radial-gradient(circle at 78% 72%, rgba(192,95,53,.2) 0 10px, transparent 11px),
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(31,68,51,.05) 16px 32px),
    var(--clair); }
.motif__ico { width: 38%; height: auto; fill: var(--vert); opacity: .55; margin: 0; }

/* --- Étapes numérotées -------------------------------------------------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: e; }
.etape { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.etape__num { font-family: var(--titre); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1; color: var(--accent); opacity: .85; }
.etape h3 { margin-bottom: .3rem; }
.etape p { margin: 0; opacity: .92; }

/* --- Chiffres ----------------------------------------------------------- */
.grille-chiffres { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center; }
.chiffre { display: flex; flex-direction: column; gap: .35rem; }
.chiffre__val { font-family: var(--titre); font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1; color: var(--accent); }
.chiffre__lab { font-size: .95rem; opacity: .88; }

/* --- Carte de bar ------------------------------------------------------- */
/* Grille plutôt que colonnes CSS : l'équilibrage automatique des colonnes
   laissait des vides irréguliers selon la longueur des groupes. */
.menu { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; }
.groupe { break-inside: avoid; }
.groupe h3 { color: var(--accent); margin-bottom: .3rem; }
.groupe__note { font-size: .9rem; opacity: .75; margin-bottom: .8rem; }
.articles { list-style: none; margin: 0; padding: 0; }
.articles li { padding: .6rem 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 22%, transparent); }
.articles li:last-child { border-bottom: 0; }
.art__nom { display: block; font-family: var(--titre); text-transform: uppercase;
  font-size: 1rem; letter-spacing: .01em; }
.art__desc { display: block; font-size: .93rem; opacity: .8; line-height: 1.45; }
.menu__pied { margin-top: 1.5rem; font-size: .88rem; opacity: .75; }

/* --- Programme ---------------------------------------------------------- */
.grille-prog { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.prog { padding: 1.3rem 1.4rem; border-radius: 14px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-left: 4px solid var(--accent); transition: transform .3s var(--t); }
.prog:hover { transform: translateX(4px); }
.prog__quand { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin-bottom: .45rem; }
.prog h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.prog p { margin: 0; font-size: .95rem; opacity: .9; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: .7rem; }
.faq__item { background: color-mix(in srgb, currentColor 6%, transparent);
  border-radius: 14px; overflow: hidden; }
/* Même raison : une question est une phrase. Gras plutôt que capitales. */
.faq__item summary { cursor: pointer; padding: 1rem 1.3rem; font-family: var(--texte);
  font-weight: 700; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem;
  transition: transform .3s var(--t); flex: none; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 1.3rem 1.2rem; }
.faq__body p { opacity: .92; }

/* --- Étiquettes --------------------------------------------------------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.etiquettes li { background: color-mix(in srgb, currentColor 9%, transparent);
  padding: .42rem 1rem; border-radius: 999px; font-size: .92rem; }
.etiquettes--liens li { padding: 0; background: none; }
.etiquettes--liens a { display: inline-block; text-decoration: none;
  background: color-mix(in srgb, currentColor 9%, transparent); padding: .42rem 1rem;
  border-radius: 999px; font-size: .92rem; transition: background .25s, color .25s, transform .25s var(--t); }
.etiquettes--liens a:hover { background: var(--vert-fond); color: var(--clair); transform: translateY(-2px); }

/* --- Ressources / liens ------------------------------------------------- */
.grille-ressources { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.ressource { padding: clamp(1.3rem, 2.5vw, 1.8rem); border-radius: var(--rayon);
  background: color-mix(in srgb, currentColor 6%, transparent);
  display: flex; flex-direction: column; transition: transform .3s var(--t), box-shadow .3s var(--t); }
.ressource:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.ressource .ico { color: var(--accent); width: 34px; height: 34px; }
.ressource p { flex: 1; font-size: .96rem; opacity: .9; }
.ressource .link-arrow { margin-top: 1.1rem; align-self: flex-start; }

/* --- Appel à l'action --------------------------------------------------- */
.appel { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.appel .display { margin: 0 0 .3rem; }
.appel p:last-of-type { margin: 0; opacity: .92; }

/* --- Boutons et liens --------------------------------------------------- */
.btn { display: inline-block; text-decoration: none; cursor: pointer; border: 2px solid transparent;
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em;
  padding: .78rem 1.5rem; border-radius: 999px; text-align: center;
  transition: transform .25s var(--t), box-shadow .25s var(--t), background .25s; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.btn--vert { background: var(--vert-fond); color: var(--clair); }
.btn--orange { background: var(--orange-fond); color: var(--clair); }
.btn--creme { background: var(--creme); color: var(--foret); }
.btn--fantome { border-color: currentColor; }

.link-arrow { display: inline-block; text-decoration: none; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .88rem;
  border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .25s var(--t); }
.link-arrow:hover::after { transform: translateX(5px); }

/* --- Zone dé ------------------------------------------------------------ */
.zone-de__inner { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.zone-de__inner > div { flex: 1 1 320px; }
.zone-de__msg { font-size: 1.12em; max-width: 46ch; min-height: 3.4em; margin: 0; }
.de { background: var(--creme); border: 0; border-radius: 22px;
  width: clamp(104px, 14vw, 132px); aspect-ratio: 1; padding: 13px; cursor: pointer;
  box-shadow: var(--ombre); transition: transform .3s var(--t); flex: none; }
.de:hover { transform: rotate(-6deg) scale(1.04); }
.de.tourne { animation: lancer .7s var(--t); }
@keyframes lancer { 40% { transform: rotate(200deg) scale(.85); } 100% { transform: rotate(360deg) scale(1); } }
.de__face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%; gap: 6px; }
.de__face i { border-radius: 50%; background: var(--orange); opacity: 0; transition: opacity .15s; }
.de__face i.actif { opacity: 1; }

/* --- Formulaire --------------------------------------------------------- */
.inscription { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
.inscription input { font: inherit; padding: .78rem 1.2rem; border-radius: 999px;
  border: 2px solid transparent; flex: 1 1 260px; max-width: 340px;
  background: var(--clair); color: var(--encre); }
.inscription__note { margin-top: .9rem; min-height: 1.5em; font-size: .93rem; opacity: .9; }

/* --- Pied de page ------------------------------------------------------- */
.pied { background: var(--foret); color: var(--creme); padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; }
.pied__grille { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); grid-template-columns: 1.5fr 1fr 1fr; }
.pied__titre { font-size: 1.05rem; color: var(--creme); margin-bottom: .8rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pied a { text-decoration: none; opacity: .85; transition: opacity .2s, padding-left .2s var(--t); }
.pied a:hover { opacity: 1; padding-left: 4px; }
.pied .tagline { font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .18em; color: var(--orange-clair); }
.pied__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  margin-top: 2.5rem; padding-top: 1.2rem; font-size: .82rem; opacity: .8;
  border-top: 1px solid rgba(239, 227, 196, .2); }
.pied__legal ul { display: flex; gap: 1.2rem; }
.pied__legal p { margin: 0; }

/* --- Apparitions (pilotées par main.js) --------------------------------- */
.reveal, [data-appear] { opacity: 0; transform: translateY(22px); }
.js-actif .reveal.est-visible, .js-actif [data-appear].est-visible {
  opacity: 1; transform: none; transition: opacity .7s var(--t), transform .7s var(--t); }
html:not(.js-actif) .reveal, html:not(.js-actif) [data-appear] { opacity: 1; transform: none; }
[data-split] .lettre { display: inline-block; opacity: 0; transform: translateY(.35em) rotate(-6deg); }
.js-actif [data-split].est-visible .lettre { opacity: 1; transform: none;
  transition: opacity .5s var(--t), transform .5s var(--t); }

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablette paysage : la carte de bar repasse sur une colonne avant que
   les libellés ne se cassent. */
@media (max-width: 1000px) {
  .menu { grid-template-columns: 1fr; }
}

/* Tablette portrait et menu mobile */
@media (max-width: 920px) {
  .burger { display: block; }
  /* Tiroir : retiré du flux à l'état fermé (display:none) pour qu'il ne
     provoque aucun débordement horizontal de la page sur petit écran.
     main.js ajoute « est-montee » avant « est-ouvert » pour l'animer. */
  /* Flux en bloc plutôt que centrage flex : un contenu plus haut que le
     tiroir serait rogné en haut avec align-items:center. */
  .nav { display: none; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 330px); height: 100dvh;
    background: var(--foret); color: var(--creme); z-index: 95;
    transform: translateX(100%); transition: transform .35s var(--t);
    overflow-y: auto; overscroll-behavior: contain; padding: 5.5rem 1.5rem 2.5rem; }
  .nav.est-montee { display: block; }
  .nav.est-ouvert { transform: none; }
  .nav ul { flex-direction: column; gap: .4rem; text-align: center; width: 100%; }
  .nav a { font-size: 1.12rem; padding: .7rem 0; }
  /* Le tiroir recouvre l'en-tête : la croix de fermeture doit rester
     au-dessus et lisible sur le fond forêt. */
  .burger[aria-expanded="true"] { position: relative; z-index: 100; }
  .burger[aria-expanded="true"] .burger__bar { background: var(--creme); }
  .nav a::after { left: 50%; width: 40%; transform: translateX(-50%) scaleX(0); }
  .nav a:hover::after, .nav a[aria-current]::after { transform: translateX(-50%) scaleX(1); }

  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo__texte { order: 0; }
  .duo__motif { aspect-ratio: 16 / 9; max-height: 260px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .appel { flex-direction: column; align-items: flex-start; }
  .zone-de__inner { justify-content: center; text-align: center; }
  .zone-de__msg { margin-inline: auto; }
}

/* Téléphone */
@media (max-width: 640px) {
  :root { --gouttiere: 1rem; --rayon: 15px; }
  body { line-height: 1.6; }

  .piece { opacity: .12; }
  .piece--card, .piece--leaf2, .piece--meeple { display: none; }
  .hero { padding-bottom: 3rem; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__scroll { display: none; }

  .grille-cartes, .grille-ressources, .grille-prog { grid-template-columns: 1fr; }
  .grille-atouts { grid-template-columns: 1fr; gap: 1.4rem; }
  .grille-chiffres { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; text-align: left; }
  .chiffre__lab { font-size: .88rem; }

  .etape { grid-template-columns: 1fr; gap: .4rem; }
  .etape__num { font-size: 1.4rem; }

  .faq__item summary { padding: .9rem 1rem; font-size: .95rem; }
  .faq__body { padding: 0 1rem 1rem; }

  .appel .btn, .inscription .btn { width: 100%; }
  .inscription { flex-direction: column; align-items: stretch; }
  .inscription input { max-width: none; }

  .pied__grille { grid-template-columns: 1fr; }
  .pied__legal { flex-direction: column; align-items: flex-start; }
  .pied__legal ul { flex-wrap: wrap; }

  .statut { font-size: .85rem; }
  .defile__piste { animation-duration: 26s; }
}

/* Très petits écrans (≤ 360 px) */
@media (max-width: 380px) {
  :root { --gouttiere: .85rem; }
  .logo--hero { font-size: 2.45rem; }
  .etiquettes li, .etiquettes--liens a { font-size: .85rem; padding: .35rem .8rem; }
  .btn { padding: .72rem 1.1rem; font-size: .92rem; }
}

/* Confort : cibles tactiles et survol désactivé sur écran tactile */
@media (hover: none) {
  .carte:hover, .ressource:hover, .btn:hover, .prog:hover { transform: none; box-shadow: none; }
  .nav a, .pied a, .fil a { padding-block: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .reveal, [data-appear], [data-split] .lettre { opacity: 1 !important; transform: none !important; }
}

@media print {
  .entete, .nav, .burger, .hero__pieces, .defile, .zone-de, .inscription, .voile { display: none !important; }
  .bloc { padding: 1rem 0; break-inside: avoid; }
  body { background: #fff; color: #000; }
}