/* Nordilune — charte de la vitrine (branche 2b), version épurée.
   Nuit d'hiver et lumière de fenêtre. Une seule police : Manrope. Thème clair.
   Grands titres centrés, beaucoup d'air, peu de cadres, apparitions au défilement. */

/* Police hébergée par nous : aucun appel à Google Fonts (licence OFL dans assets/fonts/). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/manrope-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --creme: #FFFCF6; --creme-2: #F7F3EA; --sable: #EDE6D8;
  --nuit: #0B1630; --nuit-2: #13244A; --nuit-3: #1C3160;
  --encre: #1D1D1F; --gris: #6E6E73;
  --or: #9A6A12; --or-clair: #F2C96B;
  --sapin: #1F5A35; --sapin-pale: #DCEFE3;
  --neige: #F7F3EA; --neige-2: #D9DEE8;
  --erreur: #8A2E1E; --erreur-pale: #F8D7D0;
  --police: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rayon: 28px; --rayon-petit: 14px;
  --ombre: 0 2px 6px rgba(11, 22, 48, .06), 0 24px 60px -24px rgba(11, 22, 48, .25);
  --largeur: 1080px; --etroit: 720px; --gouttiere: 24px; --section: 128px;
  --lent: .7s; --courbe: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.5; color: var(--encre); background: var(--creme); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 80px); }
h2 { font-size: clamp(32px, 5vw, 56px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; } p + p { margin-top: 12px; }
a { color: var(--or); text-underline-offset: 3px; } a:hover { color: #7A5208; }
strong { font-weight: 800; }
ul, ol { margin: 0; padding-left: 22px; } li + li { margin-top: 6px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--creme-2); padding: 1px 6px; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--creme); color: var(--encre); padding: 10px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { top: 12px; }

/* ---------- Grille ---------- */
.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }
.conteneur--etroit { max-width: calc(var(--etroit) + 2 * var(--gouttiere)); }
.section { padding: var(--section) 0; }
.section--serree { padding: 72px 0; }
.nuit { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--neige); position: relative; }
.nuit a { color: var(--or-clair); } .nuit a:hover { color: #FFE3A0; }
.nuit .secondaire { color: var(--neige-2); }
.nuit > .conteneur { position: relative; }
.secondaire { color: var(--gris); }
.surtitre { display: block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: 18px; }
.nuit .surtitre { color: var(--or-clair); }
.intro { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; max-width: 36ch; color: var(--gris); letter-spacing: -0.01em; }
.centre { text-align: center; }
.centre .intro { margin-left: auto; margin-right: auto; }
.entete-section { max-width: 760px; margin-bottom: 56px; }
.entete-section.centre { margin-left: auto; margin-right: auto; }
.entete-section h2 { margin-bottom: 20px; }
.grille { display: grid; gap: 24px; }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grille--3, .grille--2 { grid-template-columns: 1fr; } }

/* ---------- Apparitions au défilement (état de repos visible) ---------- */
.reveal { transition: opacity var(--lent) var(--courbe), transform var(--lent) var(--courbe); }
html.js .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal:not(.in) { opacity: 1; transform: none; } .reveal { transition: none; } }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--courbe), box-shadow .2s ease; }
.bouton:hover { transform: translateY(-1px); } .bouton:active { transform: translateY(1px); }
.bouton--principal { background: var(--sapin); color: var(--neige); border-color: var(--sapin); box-shadow: 0 8px 24px -12px rgba(31, 90, 53, .7); }
.bouton--principal:hover { background: #174429; color: var(--neige); }
.bouton--secondaire { background: transparent; color: var(--encre); border-color: var(--sable); }
.bouton--secondaire:hover { background: var(--creme-2); color: var(--encre); }
.nuit .bouton--secondaire { color: var(--neige); border-color: rgba(242, 201, 107, .6); }
.nuit .bouton--secondaire:hover { background: rgba(242, 201, 107, .12); color: var(--neige); }
.bouton--grand { min-height: 56px; padding: 16px 34px; font-size: 17px; }
.bouton--bloc { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .6; cursor: default; }
.bouton svg { width: 20px; height: 20px; flex: none; }
.lien-fleche { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lien-fleche::after { content: "›"; font-size: 1.3em; line-height: 1; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------- Surfaces ---------- */
.carte { background: #FFFFFF; border-radius: var(--rayon); padding: 36px; box-shadow: var(--ombre); }
.carte--creme { background: var(--creme-2); box-shadow: none; }
.nuit .carte { background: var(--nuit-3); box-shadow: none; }
.carte h3 { margin-bottom: 10px; }
.carte .icone, .promesse .icone { width: 48px; height: 48px; border-radius: 14px; background: var(--sapin-pale); color: var(--sapin); display: grid; place-items: center; margin-bottom: 20px; flex: none; }
.carte .icone svg, .promesse .icone svg { width: 24px; height: 24px; }
.nuit .carte .icone { background: rgba(242, 201, 107, .15); color: var(--or-clair); }
.etiquette { display: inline-block; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 999px; background: var(--sapin-pale); color: var(--sapin); }
.etiquette--or { background: rgba(154, 106, 18, .12); color: var(--or); }
.nuit .etiquette--or { background: rgba(242, 201, 107, .18); color: var(--or-clair); }
.encart { border-radius: var(--rayon-petit); background: var(--creme-2); padding: 16px 20px; font-size: 15px; }
.encart--a-completer { border: 1px dashed var(--sable); background: transparent; color: var(--gris); }
.ico { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 246, .72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); transition: background-color .3s, box-shadow .3s; }
.entete.defile { background: rgba(255, 252, 246, .9); box-shadow: 0 1px 0 var(--sable); }
.entete .conteneur { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; color: var(--encre); text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 999px; opacity: .85; transition: opacity .2s, background-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; background: rgba(29, 29, 31, .06); }
.entete .actions { display: flex; gap: 8px; }
.entete .bouton { min-height: 38px; padding: 8px 16px; font-size: 14px; box-shadow: none; }
.menu-bouton { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; align-items: center; justify-content: center; cursor: pointer; color: var(--encre); }
.menu-bouton svg { width: 24px; height: 24px; }
@media (max-width: 960px) {
  .nav, .entete .actions { display: none; }
  .menu-bouton { display: inline-flex; }
  .entete.ouvert .nav, .entete.ouvert .actions { display: flex; }
  .entete.ouvert .conteneur { flex-wrap: wrap; align-items: flex-start; padding-bottom: 20px; }
  .entete.ouvert .nav { flex-direction: column; align-items: stretch; width: 100%; margin: 8px 0 0; gap: 0; }
  .entete.ouvert .nav a { font-size: 20px; font-weight: 700; padding: 12px 8px; opacity: 1; }
  .entete.ouvert .actions { flex-direction: column; width: 100%; margin-top: 12px; }
  .entete.ouvert .bouton { width: 100%; min-height: 50px; font-size: 16px; }
}

/* ---------- Hero centré ---------- */
.hero { padding: 96px 0 0; overflow: hidden; text-align: center; }
.hero .conteneur { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 16ch; margin: 0 auto 24px; }
.hero .intro { color: var(--neige-2); margin: 0 auto 36px; max-width: 48ch; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 18px; }
.hero .note { font-size: 14px; color: var(--neige-2); margin-bottom: 48px; }
.hero-pepin { position: relative; width: min(60%, 360px); margin-top: 8px; animation: flotte 6s ease-in-out infinite; }
.hero-pepin img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.hero-pepin .legende { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: var(--neige-2); background: rgba(11, 22, 48, .7); padding: 6px 12px; border-radius: 999px; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .hero-pepin { animation: none; } }
@media (max-width: 640px) { .hero { padding-top: 56px; } .hero-pepin { width: min(72%, 280px); } }

/* Ciel : étoiles à 4 branches qui scintillent, un flocon lent */
.ciel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ciel svg { position: absolute; color: var(--or-clair); }
.etoile { width: 14px; height: 14px; opacity: .85; animation: scintille 4s ease-in-out infinite; }
.etoile--p { width: 8px; height: 8px; opacity: .6; animation-duration: 6s; animation-delay: 1.5s; }
.etoile:nth-child(3n) { animation-delay: .9s; } .etoile:nth-child(4n) { animation-delay: 2.2s; }
@keyframes scintille { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.flocon { width: 18px; height: 18px; opacity: .55; color: var(--neige-2); animation: flocon 26s linear infinite; }
@keyframes flocon { from { transform: translateY(-40px) rotate(0deg); } to { transform: translateY(110vh) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .etoile, .flocon { animation: none; } .flocon { top: 30%; } }

/* ---------- Démonstration du prénom ---------- */
.demo { margin-top: -1px; }
.demo .carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; max-width: 820px; margin: 0 auto; }
.demo form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.demo .champ { flex: 1 1 220px; }
.demo-sortie { min-height: 52px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.demo-sortie .combine { width: 40px; height: 40px; border-radius: 999px; background: rgba(242, 201, 107, .15); display: grid; place-items: center; color: var(--or-clair); flex: none; }
.demo-sortie audio { width: 100%; max-width: 320px; }
@media (max-width: 760px) { .demo .carte { grid-template-columns: 1fr; } }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 14px; font-weight: 700; }
.champ .aide { font-size: 13px; color: var(--gris); }
.nuit .champ .aide { color: var(--neige-2); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 16px; min-height: 50px; padding: 10px 16px; border: 1px solid var(--sable); border-radius: var(--rayon-petit); background: #fff; color: var(--encre); width: 100%; transition: border-color .2s, box-shadow .2s; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); outline: 0; box-shadow: 0 0 0 4px rgba(154, 106, 18, .18); }
.champ.invalide input { border-color: var(--erreur); }
.champ .erreur { font-size: 14px; color: var(--erreur); display: none; }
.champ.invalide .erreur { display: block; }
.nuit .champ input, .nuit .champ select { border-color: transparent; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--sapin); }
.formulaire { display: grid; gap: 18px; }
.formulaire .rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .formulaire .rangee { grid-template-columns: 1fr; } }
.message { display: none; border-radius: var(--rayon-petit); padding: 14px 18px; font-size: 15px; font-weight: 600; }
.message.succes { display: block; background: var(--sapin-pale); color: var(--sapin); }
.message.erreur { display: block; background: var(--erreur-pale); color: var(--erreur); }
.message.attente { display: block; background: var(--creme-2); color: var(--gris); }

/* ---------- Promesses ---------- */
.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; text-align: center; }
.promesse { display: flex; flex-direction: column; align-items: center; }
.promesse .icone { margin-bottom: 18px; }
.promesse p { font-size: 17px; max-width: 30ch; }
@media (max-width: 900px) { .promesses { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Chapitres (grand texte + visuel) ---------- */
.chapitre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.chapitre--inverse > :first-child { order: 2; }
.chapitre h2 { margin-bottom: 20px; }
.chapitre .intro { margin-bottom: 24px; }
.visuel { border-radius: var(--rayon); overflow: hidden; background: linear-gradient(180deg, var(--nuit), var(--nuit-3)); aspect-ratio: 4 / 5; display: grid; place-items: center; position: relative; box-shadow: var(--ombre); }
.visuel img { width: auto; height: 78%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .4)); transition: transform 1.2s var(--courbe); }
.visuel:hover img { transform: translateY(-6px) scale(1.02); }
.visuel .emplacement { color: var(--neige-2); font-size: 14px; text-align: center; padding: 16px; }
@media (max-width: 900px) { .chapitre { grid-template-columns: 1fr; gap: 32px; } .chapitre--inverse > :first-child { order: 0; } .visuel { aspect-ratio: 4 / 3; } }

/* ---------- Étapes ---------- */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.etape { position: relative; padding-top: 68px; list-style: none; }
.etape::before { counter-increment: etape; content: counter(etape); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 999px; background: var(--nuit); color: var(--or-clair); font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.etape h3 { margin-bottom: 8px; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Vidéo ---------- */
.video-cadre { position: relative; aspect-ratio: 21 / 9; border-radius: var(--rayon); overflow: hidden; background: linear-gradient(180deg, var(--nuit), var(--nuit-3)); color: var(--neige); display: grid; place-items: center; text-align: center; padding: 24px; box-shadow: var(--ombre); }
.video-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-cadre .legende { max-width: 36ch; font-size: 15px; color: var(--neige-2); }
.video-cadre .lecture { width: 72px; height: 72px; border-radius: 999px; border: 2px solid var(--or-clair); color: var(--or-clair); display: grid; place-items: center; margin: 0 auto 16px; }
.video-cadre .lecture svg { width: 28px; height: 28px; }

/* ---------- Village : trois cartes ---------- */
.village-cartes .carte { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.village-visuel { aspect-ratio: 4 / 3; border-radius: var(--rayon-petit); overflow: hidden; background: linear-gradient(180deg, var(--nuit), var(--nuit-3)); display: grid; place-items: center; position: relative; }
.village-visuel img { width: auto; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .4)); transition: transform 1s var(--courbe); }
.carte:hover .village-visuel img { transform: translateY(-5px); }
.village-visuel .emplacement { color: var(--neige-2); font-size: 14px; text-align: center; padding: 16px; }
.silhouettes { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.silhouette { width: 34px; height: 54px; border-radius: 17px 17px 8px 8px; background: rgba(242, 201, 107, .25); position: relative; }
.silhouette::before { content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid rgba(242, 201, 107, .25); }
.silhouette:nth-child(2) { height: 66px; } .silhouette:nth-child(3) { height: 46px; } .silhouette:nth-child(4) { height: 60px; }

/* ---------- Écran mérité ---------- */
.merite .liste { display: grid; gap: 18px; margin-top: 8px; padding: 0; }
.merite .liste li { display: flex; gap: 14px; align-items: flex-start; list-style: none; font-size: 17px; }
.merite .liste svg { width: 24px; height: 24px; flex: none; color: var(--sapin); margin-top: 2px; }
.merite-visuel { background: var(--nuit); border-radius: var(--rayon); padding: 28px; color: var(--neige); display: grid; gap: 12px; box-shadow: var(--ombre); position: relative; overflow: hidden; }
.merite-visuel .ligne { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--rayon-petit); background: var(--nuit-3); font-size: 15px; transition: transform .6s var(--courbe), opacity .6s; }
html.js .merite-visuel .ligne.reveal:not(.in) { transform: translateX(24px); }
.merite-visuel .ligne svg { width: 22px; height: 22px; color: var(--or-clair); flex: none; }
.merite-visuel .pepin { width: 150px; justify-self: end; margin: -12px -8px -40px 0; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .4)); }

/* ---------- Packs ---------- */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pack { display: flex; flex-direction: column; gap: 20px; position: relative; transition: transform .5s var(--courbe), box-shadow .5s; }
.pack:hover { transform: translateY(-6px); }
.pack--conseil { background: var(--nuit); color: var(--neige); }
.pack--conseil .economie, .pack--conseil .prix small { color: var(--neige-2); }
.pack--conseil li svg { color: var(--or-clair); } .pack--conseil li.absent { color: var(--neige-2); opacity: .55; }
.pack .conseil { position: absolute; top: 24px; right: 24px; }
.pack .nom { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.pack .prix { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.pack .prix small { font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: 0; margin-left: 6px; }
.pack ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.pack li { display: flex; gap: 10px; align-items: flex-start; }
.pack li svg { width: 20px; height: 20px; flex: none; color: var(--sapin); margin-top: 2px; }
.pack li.absent { color: var(--gris); } .pack li.absent svg { color: var(--sable); }
.pack .economie { font-size: 14px; color: var(--gris); }
.pack .bouton { margin-top: auto; }
.pack--conseil .bouton--secondaire { color: var(--neige); border-color: rgba(242, 201, 107, .6); }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; } .pack--conseil { order: -1; } }
.conditions { margin: 40px auto 0; max-width: 720px; display: grid; gap: 10px; font-size: 15px; color: var(--gris); padding: 0; }
.conditions li { list-style: none; display: flex; gap: 10px; align-items: flex-start; }
.conditions svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--or); }

/* ---------- Tableaux ---------- */
.tableau-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rayon-petit); background: #fff; box-shadow: var(--ombre); }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 560px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--sable); vertical-align: top; }
thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: var(--creme-2); }
tbody tr:last-child td { border-bottom: 0; }
td.prix-cell { white-space: nowrap; font-weight: 800; }

/* ---------- Sécurité : trois colonnes nues sur nuit ---------- */
.securite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.securite article { background: transparent; box-shadow: none; padding: 0; }
.securite .icone { background: rgba(242, 201, 107, .15); color: var(--or-clair); width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px; }
.securite .icone svg { width: 24px; height: 24px; }
@media (max-width: 900px) { .securite { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--sable); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; padding: 22px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--or); flex: none; width: 24px; text-align: center; transition: transform .3s var(--courbe); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { padding-bottom: 22px; color: var(--gris); font-size: 16px; max-width: 62ch; }
.faq .groupe { margin: 56px 0 8px; font-size: 24px; } .faq .groupe:first-child { margin-top: 0; }

/* ---------- Témoignages ---------- */
.temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.temoignage .prenom { font-weight: 800; margin-top: 14px; }
@media (max-width: 900px) { .temoignages { grid-template-columns: 1fr; } }

/* ---------- Inscription ---------- */
.inscription .carte { max-width: 720px; margin: 0 auto; padding: 48px; }
.inscription .carte h2 { margin-bottom: 12px; font-size: clamp(28px, 3.6vw, 40px); }
@media (max-width: 640px) { .inscription .carte { padding: 28px 22px; } }

/* ---------- Frise ---------- */
.frise { list-style: none; padding: 0; display: grid; position: relative; }
.frise li { display: grid; grid-template-columns: 130px 24px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
.frise .date { font-weight: 800; color: var(--or); font-size: 15px; padding-top: 2px; }
.frise .point { position: relative; }
.frise .point::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--sable); transform: translateX(-50%); }
.frise .point::after { content: ""; position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; border-radius: 999px; background: var(--sapin); border: 3px solid var(--creme); transform: translateX(-50%); }
.frise li.fort .point::after { background: var(--or); width: 18px; height: 18px; top: 6px; }
.frise h3 { font-size: 19px; margin-bottom: 4px; }
.frise p { font-size: 15px; color: var(--gris); }
@media (max-width: 640px) { .frise li { grid-template-columns: 24px minmax(0, 1fr); } .frise .date { grid-column: 2; order: -1; } .frise .point { grid-row: 1 / span 2; } }

/* ---------- Pages de texte ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 28px; margin: 48px 0 14px; }
.prose h3 { font-size: 20px; margin: 28px 0 8px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 12px 0; }
.prose .tableau-cadre { margin: 16px 0; } .prose table { min-width: 640px; }

/* ---------- Commande ---------- */
.recap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.recap-total { display: flex; justify-content: space-between; font-size: 22px; font-weight: 800; padding-top: 14px; border-top: 1px solid var(--sable); margin-top: 14px; }
.recap .ligne { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 8px 0; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--sable); border-radius: 999px; overflow: hidden; }
.quantite button { width: 44px; height: 44px; border: 0; background: #fff; font: inherit; font-size: 20px; cursor: pointer; }
.quantite output { min-width: 44px; text-align: center; font-weight: 800; }
@media (max-width: 900px) { .recap { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.pied { padding: 72px 0 32px; font-size: 15px; }
.pied .conteneur { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--neige); text-decoration: none; opacity: .9; } .pied a:hover { color: var(--or-clair); opacity: 1; }
.pied .logo { color: var(--neige); margin-bottom: 14px; }
.pied .mention { color: var(--neige-2); }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid rgba(242, 201, 107, .2); padding-top: 20px; color: var(--neige-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 900px) { .pied .conteneur { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied .conteneur { grid-template-columns: 1fr; } }

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  :root { --gouttiere: 16px; --section: 80px; --rayon: 22px; }
  .video-cadre { aspect-ratio: 16 / 9; }
  body { font-size: 16px; }
  .carte { padding: 24px; }
  .pack .prix { font-size: 40px; }
}

/* ---------- Texte qui s'allume au défilement (façon Apple) ---------- */
.allume { padding: 160px 0; }
.allume p { font-size: clamp(30px, 5.2vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; max-width: 22ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.allume .mot { display: inline-block; opacity: .16; transition: opacity .25s linear; }
.allume--creme { background: var(--creme); color: var(--encre); }
.allume--creme .accent { color: var(--or); }
.allume .mot.on { opacity: 1; }
.allume .accent { color: var(--or-clair); }
@media (prefers-reduced-motion: reduce) { .allume .mot { opacity: 1; } }

/* ---------- Séquence figée : des phrases qui se succèdent ---------- */
.sequence { position: relative; height: 260vh; }
.sequence .scene { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 0 var(--gouttiere); }
.sequence .phrase { position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 50%; transform: translateY(calc(-50% + 40px)); opacity: 0; transition: opacity .6s var(--courbe), transform .6s var(--courbe); pointer-events: none; }
.sequence .phrase.on { opacity: 1; transform: translateY(-50%); }
.sequence .phrase.passe { opacity: 0; transform: translateY(calc(-50% - 40px)); }
.sequence .phrase h2 { font-size: clamp(36px, 6.5vw, 84px); max-width: 16ch; margin: 0 auto 18px; }
.sequence .phrase p { font-size: clamp(18px, 2vw, 24px); color: var(--neige-2); max-width: 40ch; margin: 0 auto; }
.sequence .pepin-scene { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: min(34%, 220px); opacity: .95; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); transition: transform 1s var(--courbe); }
.sequence .progression { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.sequence .progression span { width: 8px; height: 8px; border-radius: 999px; background: rgba(242, 201, 107, .3); transition: background-color .3s, transform .3s; }
.sequence .progression span.on { background: var(--or-clair); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .sequence { height: auto; padding: 96px 0; }
  .sequence .scene { position: static; height: auto; display: grid; gap: 48px; }
  .sequence .phrase { position: static; opacity: 1; transform: none; }
  .sequence .pepin-scene, .sequence .progression { display: none; }
}

/* ---------- Démonstration de la voix (15 s) ---------- */
.demo-voix { max-width: 640px; margin: 0 auto; }
.demo-voix .prepa { display: grid; gap: 20px; }
.demo-voix .prepa .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .demo-voix .prepa .champs { grid-template-columns: 1fr; } }

/* ---------- Scène du village (dessin original en SVG) ---------- */
.scene-village { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: var(--nuit); margin-bottom: 48px; position: relative; }
.scene-village svg { width: 100%; height: auto; display: block; }
.scene-village .fenetre { animation: fenetre 5s ease-in-out infinite; }
.scene-village .fenetre:nth-of-type(2n) { animation-delay: 1.7s; } .scene-village .fenetre:nth-of-type(3n) { animation-delay: 3.1s; }
@keyframes fenetre { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.scene-village .legende { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 13px; color: var(--neige-2); background: rgba(11, 22, 48, .7); padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .scene-village .fenetre { animation: none; } }

/* ---------- Le message du soir ---------- */
.soir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.courriel { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px; font-size: 15px; }
.courriel .de { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sable); margin-bottom: 16px; }
.courriel .de .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--nuit); display: grid; place-items: center; flex: none; }
.courriel .de .avatar svg { width: 22px; height: 22px; }
.courriel .de strong { display: block; } .courriel .de span { color: var(--gris); font-size: 13px; }
.courriel p + p { margin-top: 12px; }
.courriel .heure { color: var(--gris); font-size: 13px; margin-left: auto; }
@media (max-width: 900px) { .soir { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Ce que nous ne faisons pas ---------- */
.jamais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.jamais li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; padding: 18px 0; border-bottom: 1px solid rgba(242, 201, 107, .18); }
.jamais li svg { width: 26px; height: 26px; flex: none; color: var(--or-clair); margin-top: 2px; }
.jamais li strong { display: block; }
.jamais li span { color: var(--neige-2); font-size: 15px; }
@media (max-width: 760px) { .jamais { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Barre d'inscription fixée (téléphone) ---------- */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); background: rgba(255, 252, 246, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--sable); transform: translateY(110%); transition: transform .4s var(--courbe); display: none; }
.barre-mobile.visible { transform: none; }
.barre-mobile .bouton { width: 100%; min-height: 50px; }
@media (max-width: 960px) { .barre-mobile { display: block; } body.barre-active { padding-bottom: 76px; } }

/* ---------- Grands-parents ---------- */
.gp-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .gp-etapes { grid-template-columns: 1fr; } }

/* ---------- Compte à rebours avant Noël (une vraie date, jamais liée à un prix) ---------- */
.rebours { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 40px; }
.rebours .unite { min-width: 84px; padding: 14px 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(242, 201, 107, .25); text-align: center; backdrop-filter: blur(6px); }
.rebours .valeur { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--or-clair); font-variant-numeric: tabular-nums; }
.rebours .nom { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--neige-2); }
.rebours .valeur.tic { animation: tic .4s var(--courbe); }
@keyframes tic { from { transform: translateY(-6px); opacity: .4; } to { transform: none; opacity: 1; } }
.rebours-titre { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--neige-2); margin-bottom: 12px; }
@media (max-width: 640px) { .rebours .unite { min-width: 68px; padding: 12px 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .rebours .valeur.tic { animation: none; } }

/* ---------- Écoute de 15 s (neige, voix seule) ---------- */
.ecoute { position: relative; min-height: 220px; border-radius: var(--rayon); background: radial-gradient(120% 90% at 50% 0%, var(--nuit-3) 0%, var(--nuit) 70%); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 32px 24px; box-shadow: inset 0 0 0 1px rgba(242, 201, 107, .2); }
.ecoute .neige { position: absolute; inset: 0; width: 100%; height: 100%; }
.ecoute p { position: relative; max-width: 30ch; }
.ecoute-repos { color: var(--neige-2); font-size: 15px; }
.ecoute-phrase { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--neige); text-wrap: balance; }
.ecoute-phrase.apparait { animation: phrase .5s var(--courbe); }
@keyframes phrase { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ecoute-etat { position: absolute !important; bottom: 14px; left: 0; right: 0; margin: 0 auto; font-size: 13px; color: var(--or-clair); }
.demo-absent { font-size: 14px; color: var(--or-clair); background: rgba(242, 201, 107, .1); border-radius: var(--rayon-petit); padding: 10px 14px; }
.petit { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ecoute-phrase.apparait { animation: none; } }


/* Corrections v6 */
.nuit .intro { color: var(--neige-2); }

/* ===================== v7 (29 oct.) ===================== */

/* Hero et en-têtes de page sur décor */
.hero-fond { position: absolute; inset: 0; overflow: hidden; }
.hero-fond-img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; opacity: .55; }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--nuit) 0%, rgba(11, 22, 48, .82) 40%, rgba(11, 22, 48, .35) 75%, rgba(11, 22, 48, .7) 100%); }
.hero > .conteneur, .tete > .conteneur { position: relative; z-index: 1; }
.tete .hero-fond-img { object-position: center 60%; opacity: .5; }
.tete .hero-fond::after { background: linear-gradient(90deg, rgba(11, 22, 48, .92) 0%, rgba(11, 22, 48, .75) 50%, rgba(11, 22, 48, .45) 100%); }

/* Grand décor du village */
.grand-decor { margin: 0 0 40px; border-radius: var(--rayon); overflow: hidden; position: relative; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.grand-decor img { width: 100%; height: auto; display: block; }
.grand-decor figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 28px 22px; background: linear-gradient(180deg, transparent, rgba(11, 22, 48, .88)); display: grid; gap: 10px; }
.grand-decor figcaption > span { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); }
.lieux { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lieux li { margin: 0; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(247, 243, 234, .14); color: var(--neige); backdrop-filter: blur(6px); }
@media (max-width: 640px) { .grand-decor figcaption { position: static; background: var(--nuit-3); padding: 16px; } }
.village-visuel--decor img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.carte:hover .village-visuel--decor img { transform: scale(1.04); }

/* Cartes de mission */
.cartes-mission { display: grid; gap: 28px; }
.carte-mission { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 28px; align-items: start; }
.carte-mission-illu { background: #FFFDF8; border-radius: var(--rayon-petit); aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 20px; box-shadow: inset 0 0 0 1px var(--sable); }
.carte-mission-illu img { max-height: 100%; width: auto; object-fit: contain; }
.carte-mission-jour { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.carte-mission h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; }
.carte-mission-lieu { font-size: 14px; color: var(--sapin); font-weight: 700; margin-bottom: 14px; }
.carte-mission-histoire { font-style: italic; color: var(--gris); margin-bottom: 18px; max-width: 60ch; }
.onglets { display: inline-flex; background: var(--creme-2); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 16px; flex-wrap: wrap; }
.onglets button { font: inherit; font-size: 14px; font-weight: 700; border: 0; background: transparent; color: var(--gris); padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.onglets button[aria-selected="true"] { background: var(--nuit); color: var(--neige); }
.etapes-mission { counter-reset: em; list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.etapes-mission li { counter-increment: em; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; margin: 0; font-weight: 600; }
.etapes-mission li::before { content: counter(em); width: 32px; height: 32px; border-radius: 999px; background: var(--nuit); color: var(--or-clair); display: grid; place-items: center; font-weight: 800; }
.mini-titre { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.materiel { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.materiel li { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; background: var(--creme-2); border-radius: 12px; padding: 6px 12px 6px 6px; }
.materiel img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 8px; }
.materiel .pas-icone { width: 6px; }
.carte-mission-note { font-size: 14px; color: var(--gris); }
.carte-mission-note + .carte-mission-note { margin-top: 6px; }
.carte-mission-pdf { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--or); }
.carte-mission-pdf svg { width: 20px; height: 20px; }
.moins-ecran { margin: 36px auto 0; max-width: 720px; text-align: center; }
.moins-ecran h3 { margin-bottom: 8px; }
@media (max-width: 900px) { .carte-mission { grid-template-columns: 1fr; } .carte-mission-illu { max-width: 260px; aspect-ratio: 1; } }

/* Message du soir sur décor */
.soir-visuel { position: relative; }
.soir-visuel > img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: var(--ombre); }
.soir-visuel .courriel { position: relative; margin: -120px 24px 0; }
@media (max-width: 640px) { .soir-visuel .courriel { margin: -40px 8px 0; padding: 20px; } }

/* Frise du Pass */
.frise-pass { margin: 40px auto 0; max-width: 820px; text-align: center; }
.frise-pass ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.frise-pass ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; background: var(--sable); }
.frise-pass li { margin: 0; position: relative; display: grid; gap: 4px; justify-items: center; font-size: 13px; color: var(--gris); padding-top: 26px; }
.frise-pass li::before { content: ""; position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--creme); border: 2px solid var(--sable); }
.frise-pass li.visage::before { background: var(--or); border-color: var(--or); }
.frise-pass li.fort::before { width: 20px; height: 20px; top: 0; box-shadow: 0 0 0 4px rgba(154, 106, 18, .2); }
.frise-pass strong { color: var(--encre); font-size: 15px; }

/* Boîte aux questions */
.boite-carte { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; align-items: center; background: var(--creme-2); border-radius: var(--rayon); padding: 40px; }
.boite-carte h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.boite-carte .intro { margin-bottom: 22px; color: var(--gris); }
.boite-carte img { width: 160px; height: auto; justify-self: center; }
@media (max-width: 760px) { .boite-carte { grid-template-columns: 1fr; padding: 28px 22px; } .boite-carte img { width: 110px; } }
.apres-depot { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
/* Menu : une seule ligne, panneau dès 1120 px */
.nav a, .entete .bouton { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav, .entete .actions { display: none; }
  .menu-bouton { display: inline-flex; }
  .entete.ouvert .nav, .entete.ouvert .actions { display: flex; }
  .entete.ouvert .conteneur { flex-wrap: wrap; align-items: flex-start; padding-bottom: 20px; }
  .entete.ouvert .nav { flex-direction: column; align-items: stretch; width: 100%; margin: 8px 0 0; gap: 0; }
  .entete.ouvert .nav a { font-size: 20px; font-weight: 700; padding: 12px 8px; opacity: 1; }
  .entete.ouvert .actions { flex-direction: column; width: 100%; margin-top: 12px; }
  .entete.ouvert .bouton { width: 100%; min-height: 50px; font-size: 16px; }
}
.soir h2 { margin-bottom: 20px; }
.soir-visuel .courriel { margin: -56px 24px 0 48px; }
@media (max-width: 640px) { .soir-visuel .courriel { margin: -32px 8px 0; } }
.pack--conseil .etiquette--or { background: rgba(242, 201, 107, .18); color: var(--or-clair); }
.pack--conseil li.absent { opacity: .7; }

/* ===================== v8 : chaleur de Noël, 4 chapitres ===================== */
:root {
  --creme: #FFF8EE; --creme-2: #F6E9D4; --sable: #EADBC4;
  --houx: #B3261E; --braise: #E8853D; --bois: #6B4426;
}
body { background: var(--creme); }
.nuit { background: radial-gradient(120% 60% at 50% 110%, rgba(232, 133, 61, .16), transparent 60%), linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 75%, #1E2148 100%); }

/* Sous-menu des chapitres */
.sous-nav { position: sticky; top: 60px; z-index: 45; display: flex; justify-content: center; gap: 4px; padding: 8px 16px; background: rgba(255, 248, 238, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--sable); overflow-x: auto; scrollbar-width: none; }
.sous-nav::-webkit-scrollbar { display: none; }
.sous-nav a { flex: none; font-size: 14px; font-weight: 700; color: var(--encre); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: background-color .2s; }
.sous-nav a:hover, .sous-nav a.actif { background: var(--nuit); color: var(--neige); }
@media (max-width: 640px) { .sous-nav { justify-content: flex-start; } .sous-nav a { font-size: 13px; padding: 8px 12px; } }

/* Hero chaleureux */
.hero--chaleur { padding-top: 80px; }
.hero--chaleur h1 { max-width: 15ch; }
.hero--chaleur h1 em { font-style: normal; color: var(--or-clair); text-shadow: 0 0 24px rgba(242, 201, 107, .45); }
.hero--chaleur .actions { margin-bottom: 36px; }
.hero--chaleur .bouton--secondaire svg { width: 20px; height: 20px; }
.neige-ciel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-bas { display: flex; align-items: flex-end; justify-content: center; gap: 48px; flex-wrap: wrap; width: 100%; }
.hero-bas .hero-pepin { width: min(46vw, 300px); margin: 0; position: relative; }
.lueur { position: absolute; left: 50%; top: 55%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(242, 201, 107, .38) 0%, rgba(232, 133, 61, .18) 35%, transparent 65%); z-index: -1; animation: lueur 5s ease-in-out infinite; }
@keyframes lueur { 0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.rebours-bloc { margin-bottom: 64px; }
.rebours-bloc .rebours { margin-bottom: 0; }
.rebours-titre { display: flex; align-items: center; justify-content: center; gap: 8px; }
.houx { width: 34px; height: 22px; flex: none; }
@media (max-width: 760px) { .hero-bas { flex-direction: column-reverse; align-items: center; gap: 24px; } .rebours-bloc { margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .lueur { animation: none; } }

/* Guirlande lumineuse */
.guirlande { display: block; width: 100%; height: 48px; }
.guirlande--haut { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.ampoule ellipse { filter: drop-shadow(0 0 6px currentColor); animation: ampoule 3s ease-in-out infinite; }
.ampoule.a1 ellipse { animation-delay: .7s; } .ampoule.a2 ellipse { animation-delay: 1.4s; } .ampoule.a3 ellipse { animation-delay: 2.1s; }
@keyframes ampoule { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ampoule ellipse { animation: none; } }
.separateur-guirlande { background: var(--nuit-2); height: 0; position: relative; }
.separateur-guirlande .guirlande { position: absolute; top: -6px; left: 0; z-index: 2; }

/* Numéros de chapitre */
.chapitre-num { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--houx); margin-bottom: 14px; }
.chapitre-num::before, .chapitre-num::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.nuit .chapitre-num { color: var(--or-clair); }

/* Chapitre 1 : l'appel */
.chapitre-appel { padding-top: 96px; }
.temps-appel { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.temps-appel li { margin: 0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(242, 201, 107, .22); border-radius: var(--rayon); padding: 28px; position: relative; }
.temps-appel .temps { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nuit); background: var(--or-clair); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.temps-appel h3 { margin-bottom: 8px; }
.temps-appel p { color: var(--neige-2); font-size: 16px; }
@media (max-width: 900px) { .temps-appel { grid-template-columns: 1fr; } }
.appel-durees { max-width: 760px; margin: 0 auto 32px; display: grid; gap: 10px; text-align: center; color: var(--neige-2); }
.appel-durees strong { color: var(--neige); }
.frise-pass--nuit { margin-top: 8px; }
.frise-pass--nuit ol::before { background: rgba(242, 201, 107, .3); }
.frise-pass--nuit li { color: var(--neige-2); }
.frise-pass--nuit li::before { background: var(--nuit); border-color: rgba(242, 201, 107, .5); }
.frise-pass--nuit li.offert::before { background: var(--neige); border-color: var(--neige); }
.frise-pass--nuit li.visage::before { background: var(--or-clair); border-color: var(--or-clair); box-shadow: 0 0 12px rgba(242, 201, 107, .6); }
.frise-pass--nuit strong { color: var(--neige); }
.centre-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.demo { padding-top: 32px !important; }

/* Chapitre 2 : le village */
.chapitre-village { padding-top: 112px; }
.journee { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.journee li { margin: 0; display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
.heure-pastille { flex: none; width: 52px; height: 52px; border-radius: 999px; background: var(--nuit); color: var(--or-clair); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.heure-pastille svg { width: 24px; height: 24px; }
.journee h3 { font-size: 20px; margin-bottom: 6px; }
.journee p { color: var(--gris); font-size: 15px; }
@media (max-width: 900px) { .journee { grid-template-columns: 1fr; } }
.promesse-ligne { text-align: center; font-size: clamp(18px, 2vw, 22px); color: var(--gris); max-width: 46ch; margin: 0 auto; }
.promesse-ligne strong { color: var(--houx); }

/* Les jeux */
.jeux-entete { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; margin-bottom: 32px; }
.jeux-entete h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.jeux-visuel img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: var(--ombre); }
@media (max-width: 900px) { .jeux-entete { grid-template-columns: 1fr; } }
.jeux-grille { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jeu { margin: 0; background: var(--creme-2); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: transform .4s var(--courbe), box-shadow .4s; }
.jeu:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--ombre); }
.jeu-ico { width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--houx); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(107, 68, 38, .12); }
.jeu-ico svg { width: 26px; height: 26px; }
.jeu h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.jeu p { font-size: 14px; color: var(--gris); }
.jeu-type { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--bois); background: rgba(107, 68, 38, .1); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 1000px) { .jeux-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jeux-grille { grid-template-columns: 1fr; } }

/* Message du soir, visuel à gauche */
.soir-section .soir { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) { .soir-section .soir > div:last-child { order: -1; } }

/* Chapitre 3 : prix, ruban de Noël */
.chapitre-prix { background: linear-gradient(180deg, var(--creme) 0%, var(--creme-2) 100%); }
.ruban { position: absolute; top: -14px; right: 24px; background: var(--houx); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; padding: 8px 16px 8px 14px; border-radius: 8px 8px 8px 0; box-shadow: 0 6px 16px -6px rgba(179, 38, 30, .6); }
.ruban::after { content: ""; position: absolute; left: 0; bottom: -8px; border-left: 8px solid #7E1A14; border-bottom: 8px solid transparent; }
.pack--conseil { outline: 2px solid rgba(242, 201, 107, .5); outline-offset: -2px; }
.pack .nom { padding-right: 120px; }
@media (max-width: 900px) { .pack .nom { padding-right: 0; } .pack--conseil { margin-top: 12px; } }

/* Cartes et surfaces plus chaudes */
.carte { box-shadow: 0 2px 6px rgba(107, 68, 38, .06), 0 24px 60px -28px rgba(107, 68, 38, .35); }
.boite-carte { background: linear-gradient(135deg, var(--creme-2), #F3DFC2); }
.courriel .de > div { min-width: 0; }
.courriel .de span { overflow-wrap: anywhere; }
@media (max-width: 640px) { .courriel .heure { display: none; } }

/* ===================== v9 : grand écran, hero en deux colonnes, Père Noël ===================== */
@media (min-width: 1440px) { :root { --largeur: 1240px; --gouttiere: 40px; } }
@media (min-width: 1800px) { :root { --largeur: 1400px; } }

/* Hero : Pépin à gauche, texte et compteur à droite */
.hero--chaleur .conteneur { align-items: stretch; }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; }
.hero-texte { display: flex; flex-direction: column; align-items: center; }
.hero-texte-bloc { display: flex; flex-direction: column; align-items: center; }
.hero-texte .rebours-bloc { margin: 8px 0 0; }
.hero-grille .hero-pepin { position: relative; width: min(64vw, 280px); margin: 0 auto; order: 2; }
.hero-grille .hero-texte { order: 1; }
@media (min-width: 1024px) {
  .hero--chaleur { padding: 72px 0 0; text-align: left; }
  .hero-grille { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 72px); align-items: center; min-height: min(calc(100svh - 112px), 860px); padding: 48px 0 56px; }
  .hero-grille .hero-pepin { order: 0; width: 100%; max-width: 480px; justify-self: center; align-self: end; }
  .hero-grille .hero-texte { order: 0; align-items: flex-start; }
  .hero-texte-bloc { align-items: flex-start; }
  .hero--chaleur h1 { font-size: clamp(52px, 5.4vw, 92px); max-width: 13ch; margin-bottom: 22px; }
  .hero--chaleur .intro { margin: 0 0 32px; max-width: 46ch; font-size: clamp(19px, 1.4vw, 23px); }
  .hero--chaleur .actions { justify-content: flex-start; margin-bottom: 36px; }
  .hero-texte .rebours { justify-content: flex-start; margin: 0; }
  .hero-texte .rebours-titre { justify-content: flex-start; }
  .hero-texte .rebours .unite { min-width: 96px; }
}
@media (min-width: 1800px) { .hero-grille .hero-pepin { max-width: 560px; } .hero-texte .rebours .unite { min-width: 112px; padding: 18px 12px 14px; } }
@media (max-width: 1023px) { .hero--chaleur .hero-texte .rebours-bloc { margin-bottom: 12px; } }

/* Mention de transparence sur les images générées */
.mention-ia { position: absolute; right: 10px; bottom: 10px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .85); background: rgba(11, 22, 48, .55); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); }

/* Scène : le Père Noël devant la cheminée */
.appel-tete { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: 64px; }
.appel-tete h2 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 18px; }
.appel-tete .intro { color: var(--neige-2); margin-bottom: 20px; }
.appel-voit { font-size: 18px; color: var(--neige-2); border-left: 3px solid var(--or-clair); padding-left: 16px; }
.appel-voit strong { color: var(--neige); }
@media (max-width: 900px) { .appel-tete { grid-template-columns: 1fr; text-align: left; } }
.pn-scene { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(242, 201, 107, .25); isolation: isolate; }
.pn-scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: saturate(1.05) brightness(.82); }
.pn-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 100%, rgba(232, 133, 61, .35), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(11, 22, 48, .55) 100%); z-index: 1; pointer-events: none; }
.pn-scene-pn { position: absolute; left: 50%; bottom: -2%; height: 92%; width: auto; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); }
.pn-scene--carte { aspect-ratio: 1; border-radius: var(--rayon); }

/* En-têtes de pages avec le Père Noël */
.tete--pn .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: end; }
.tete-pn { position: relative; margin: 0 0 -64px; align-self: end; }
.tete-pn img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.tete-pn .lueur { top: 45%; }
.tete-pn .mention-ia { bottom: 76px; right: 0; }
@media (min-width: 1440px) { .tete--pn .conteneur { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 760px) { .tete--pn .conteneur { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; } .tete-pn .mention-ia { font-size: 9px; bottom: 70px; padding: 2px 6px; } }

/* Boîte aux questions : le Père Noël */
.boite { background: linear-gradient(180deg, var(--nuit-2) 0, var(--nuit-2) 80px, var(--creme) 80px); }
.boite-carte { grid-template-columns: minmax(0, 1fr) 240px; position: relative; overflow: hidden; box-shadow: var(--ombre); }
.boite-pn { position: relative; margin: -40px -40px -40px 0; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(60% 50% at 50% 70%, rgba(232, 133, 61, .25), transparent 70%); }
.boite-carte .boite-pn img { width: 210px; margin-top: 24px; }
@media (max-width: 760px) { .boite-carte { grid-template-columns: 1fr; } .boite-pn { margin: 0 -22px -28px; } .boite-carte .boite-pn img { width: 150px; } }

/* Inscription devant la porte du village */
.inscription--porte { position: relative; overflow: hidden; }
.inscription-fond { position: absolute; inset: 0; z-index: 0; }
.inscription-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.inscription-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 48, .55), rgba(11, 22, 48, .25) 45%, rgba(11, 22, 48, .6)); }
.inscription--porte > .conteneur { position: relative; z-index: 1; }
.inscription--porte .carte { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }

/* Jeux : visuel plus large sur grand écran */
@media (min-width: 1440px) { .jeux-entete { grid-template-columns: minmax(0, 1fr) 520px; } }
/* v9 ajustements : le hero tient dans l'écran */
@media (min-width: 1024px) {
  .hero--chaleur { padding-top: 40px; }
  .hero-grille { min-height: calc(100svh - 114px - 40px); padding: 8px 0 28px; }
  .hero--chaleur h1 { font-size: clamp(44px, min(5vw, 8.4vh), 88px); margin-bottom: 16px; }
  .hero--chaleur .surtitre { margin-bottom: 14px; }
  .hero--chaleur .intro { margin-bottom: 24px; font-size: clamp(18px, min(1.4vw, 2.3vh), 23px); }
  .hero--chaleur .actions { margin-bottom: 24px; }
  .hero-texte .rebours-titre { margin-bottom: 8px; }
  .hero-texte .rebours .unite { padding: 10px 8px 9px; }
  .hero-texte .rebours .valeur { font-size: clamp(28px, min(2.6vw, 4.4vh), 46px); }
  .hero-grille .hero-pepin img { width: auto; max-width: 100%; max-height: calc(100svh - 190px); margin: 0 auto; display: block; }
}
.boite { background: var(--nuit-2); }
.boite .boite-carte .intro { max-width: 52ch; }
.inscription-fond::after { background: linear-gradient(180deg, rgba(11, 22, 48, .78), rgba(11, 22, 48, .55) 45%, rgba(11, 22, 48, .82)); }
.tete--pn { overflow: hidden; }
.tete-pn img { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.tete-pn .mention-ia { bottom: auto; top: 8px; right: 0; }
@media (max-width: 760px) { .tete-pn .mention-ia { top: 0; right: -4px; } }
@media (max-width: 760px) { .boite-carte .boite-pn img { width: 118px; margin-top: 8px; } }

/* ===================== v10 : village flouté derrière le Père Noël, habitants, décorations ===================== */
.mention-ia { display: none; }
.pn-scene-fond { filter: blur(5px) saturate(1.1) brightness(.78); transform: scale(1.08); object-position: 50% 60%; }
.pn-scene::after { background: radial-gradient(60% 50% at 50% 70%, rgba(242, 201, 107, .28), transparent 70%), linear-gradient(180deg, rgba(11, 22, 48, .15) 0%, transparent 40%, rgba(11, 22, 48, .55) 100%); }
.tete--pn .hero-fond-img { filter: blur(6px); transform: scale(1.08); opacity: .7; }
.boite-pn { overflow: hidden; border-radius: 0 var(--rayon) var(--rayon) 0; background: none; }
.boite-pn-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(.8); transform: scale(1.1); }
.boite-pn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 75%, rgba(242, 201, 107, .3), transparent 70%); }
.boite-pn img:not(.boite-pn-fond) { position: relative; z-index: 1; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)); }
@media (max-width: 760px) { .boite-pn { border-radius: 0 0 var(--rayon) var(--rayon); min-height: 200px; } }

/* Les habitants du village */
.habitants { border-radius: var(--rayon); padding: 32px 24px 0; margin: 0 0 32px; position: relative; overflow: hidden; background: radial-gradient(80% 60% at 50% 120%, rgba(232, 133, 61, .22), transparent 60%), linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); }
.habitants::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, #E9EEF6, #FFFFFF); border-radius: 50% 50% 0 0 / 30px 30px 0 0; z-index: 0; }
.habitants-titre { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 18px; position: relative; z-index: 1; }
.habitants ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; position: relative; z-index: 1; }
.habitants li { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 14px; }
.habitants img { height: clamp(90px, 11vw, 168px); width: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .3)); transition: transform .4s var(--courbe); }
.habitants li:hover img { transform: translateY(-6px) rotate(-2deg); }
.habitants .hab-pepin img { height: clamp(110px, 13vw, 200px); }
.habitants strong { margin-top: 6px; font-size: 15px; color: var(--encre); }
.habitants span { font-size: 12px; color: var(--gris); line-height: 1.3; }
@media (max-width: 900px) { .habitants ul { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } .habitants::after { display: none; } .habitants strong { color: var(--neige); } .habitants span { color: var(--neige-2); } }

/* Décorations du village */
.jeux-visuel { position: relative; }
.deco-pose { position: absolute; z-index: 2; height: auto; filter: drop-shadow(0 8px 10px rgba(107, 68, 38, .3)); box-shadow: none !important; border-radius: 0 !important; }
.jeux-visuel img.deco-bonhomme { width: 92px !important; left: -34px; bottom: -22px; }
.jeux-visuel img.deco-pain { width: 70px !important; right: -18px; bottom: -18px; transform: rotate(8deg); }
.chapitre-prix { position: relative; overflow: hidden; }
.boules { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.boules img { position: absolute; top: -10px; width: 64px; height: auto; transform-origin: 50% 0; animation: balance 6s ease-in-out infinite; }
.boules img::before { content: ""; }
.boules .b1 { left: 6%; top: 10px; } .boules .b2 { left: 12%; width: 48px; top: 60px; animation-delay: -2s; }
.boules .b3 { right: 7%; top: 24px; animation-delay: -4s; } .boules .b4 { right: 14%; top: 90px; width: 40px; animation: none; }
@keyframes balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (max-width: 760px) { .boules .b2, .boules .b4 { display: none; } .boules img { width: 44px; } }
@media (prefers-reduced-motion: reduce) { .boules img { animation: none; } }
.deco-guirlande { display: block; width: min(420px, 80%); height: auto; margin: 0 auto 12px; }
.inscription--porte .carte { position: relative; }
.deco-noeud { position: absolute; top: -34px; left: 50%; width: 92px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
@media (max-width: 900px) { .jeux-visuel img.deco-pain { right: 6px; } .jeux-visuel img.deco-bonhomme { left: 4px; width: 70px !important; } }

/* ===================== v12 (1er nov.) : finition de marque ===================== */
/* Palette premium : bleu nuit, blanc neige, rouge profond, vert sapin, or doux, cuivre, lumière chaude. */
:root {
  --creme: #FBF7F0; --creme-2: #F4EDE1; --sable: #E6DBC9;
  --nuit: #0A1530; --nuit-2: #0F1F45; --nuit-3: #18295A;
  --encre: #16161D; --gris: #5F5E68;
  --or: #8A6424; --or-clair: #E6C47E; --or-doux: #D9B26A;
  --rouge: #9E1B2C; --rouge-2: #B8233A; --houx: #9E1B2C;
  --sapin: #1D5A3C; --cuivre: #B5683A; --lumiere: #FFD9A0;
  --neige: #FBF8F2; --neige-2: #C9D2E6;
  --largeur: 1180px; --section: 120px;
  --ombre: 0 1px 2px rgba(10, 21, 48, .05), 0 24px 56px -28px rgba(10, 21, 48, .35);
  --ombre-forte: 0 2px 6px rgba(10, 21, 48, .08), 0 40px 90px -40px rgba(10, 21, 48, .6);
}
body { background: var(--creme); color: var(--encre); }
h2 { font-size: clamp(32px, 4.4vw, 54px); }
.surtitre { color: var(--rouge); letter-spacing: .16em; font-size: 12.5px; }
.nuit .surtitre { color: var(--or-clair); }
.intro { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--gris); }
.nuit .intro { color: var(--neige-2); }
.nuit { background: radial-gradient(120% 80% at 50% 0%, #142A5E 0%, var(--nuit) 60%), var(--nuit); }
a { color: var(--rouge); } a:hover { color: var(--rouge-2); }
.nuit a { color: var(--or-clair); }

/* Boutons */
.bouton { letter-spacing: -.005em; }
.bouton--principal { background: linear-gradient(180deg, #BE2840 0%, #9E1B2C 100%); border-color: #8C1727; color: #fff; box-shadow: 0 12px 30px -14px rgba(158, 27, 44, .85), inset 0 1px 0 rgba(255, 255, 255, .2); }
.bouton--principal:hover { background: linear-gradient(180deg, #CC2E47 0%, #A81E30 100%); color: #fff; }
.nuit .bouton--principal, .nuit a.bouton--principal { color: #fff; }
.bouton--verre { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: var(--neige); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bouton--verre:hover, .nuit a.bouton--verre:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nuit a.bouton--verre { color: var(--neige); }
.bouton--clair { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.bouton--sombre { background: var(--nuit); color: var(--neige); border-color: var(--nuit); }
.bouton--sombre:hover { background: var(--nuit-3); color: #fff; }
.bouton--secondaire { border-color: var(--sable); }
.lien-fleche { color: var(--rouge); }
.nuit .lien-fleche { color: var(--or-clair); }

/* Apparitions plus douces (montée + flou qui se dissipe) */
html.js .reveal:not(.in) { opacity: 0; transform: translateY(30px); filter: blur(6px); }
.reveal { transition: opacity .9s var(--courbe), transform .9s var(--courbe), filter .9s var(--courbe); }
@media (prefers-reduced-motion: reduce) { html.js .reveal:not(.in) { filter: none; } }

/* ---------- Barre de navigation unique ---------- */
.barre { position: sticky; top: 0; z-index: 60; background: rgba(10, 21, 48, .78); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--neige); transition: background-color .3s, box-shadow .3s; }
.barre.defile { background: rgba(10, 21, 48, .92); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.barre-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 12px; }
.barre .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--neige); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; margin-right: 18px; }
.barre .logo svg { width: 30px; height: 30px; }
.barre-nav { display: flex; align-items: center; gap: 4px; }
.barre-lien, .deroulant-bouton { font: inherit; font-size: 15px; font-weight: 600; color: var(--neige-2); text-decoration: none; padding: 10px 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s, color .2s; }
.barre-lien:hover, .deroulant-bouton:hover, .deroulant-bouton[aria-expanded="true"], .barre-lien[aria-current="page"] { background: rgba(255, 255, 255, .08); color: #fff; }
.deroulant-bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s var(--courbe); }
.deroulant-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.deroulant { position: relative; }
.deroulant-panneau { position: absolute; top: calc(100% + 12px); left: -8px; width: 660px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; padding: 12px; border-radius: 22px; background: #0E1C40; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s var(--courbe); }
.deroulant-panneau.ouvert { opacity: 1; transform: none; }
.deroulant-panneau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.deroulant-panneau li + li { margin: 0; }
.deroulant-panneau ul a { display: block; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--neige); }
.deroulant-panneau ul a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.deroulant-panneau ul strong { display: block; font-size: 15px; }
.deroulant-panneau ul span { display: block; font-size: 13px; color: var(--neige-2); margin-top: 2px; }
.deroulant-carte { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; border-radius: 16px; text-decoration: none; color: #fff; min-height: 220px; background: linear-gradient(180deg, rgba(10, 21, 48, 0) 20%, rgba(10, 21, 48, .85) 100%), url("../img/decors/VIL10-800.webp") center / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.deroulant-carte .surtitre { margin: 0; font-size: 11px; color: var(--or-clair); }
.deroulant-carte strong { font-size: 18px; line-height: 1.2; }
.deroulant-carte span:last-child { font-size: 13px; color: var(--neige-2); }
.barre-cta { margin-left: auto; min-height: 42px; padding: 9px 20px; font-size: 15px; }
.barre-burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); cursor: pointer; position: relative; flex: none; }
.barre-burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--neige); transition: transform .25s var(--courbe), top .25s var(--courbe); }
.barre-burger span:first-child { top: 17px; } .barre-burger span:last-child { top: 25px; }
.barre-burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.barre-burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.feuille { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: var(--nuit); overflow-y: auto; padding: 20px 20px 40px; border-top: 1px solid rgba(255, 255, 255, .06); animation: feuille .25s var(--courbe); }
@keyframes feuille { from { opacity: 0; transform: translateY(-8px); } }
.feuille-actions { display: grid; gap: 10px; }
.feuille-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feuille-duo .bouton { min-height: 48px; padding: 10px 12px; font-size: 14px; }
.feuille-liste { list-style: none; margin: 20px 0 0; padding: 0; }
.feuille-liste li + li { margin: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.feuille-liste a { display: block; padding: 14px 4px; text-decoration: none; color: var(--neige); }
.feuille-liste strong { display: block; font-size: 17px; }
.feuille-liste span { display: block; font-size: 13px; color: var(--neige-2); margin-top: 2px; }
body.feuille-ouverte { overflow: hidden; }
@media (max-width: 980px) {
  .barre-nav { display: none; }
  .barre-burger { display: block; }
  .barre-cta { min-height: 40px; padding: 8px 16px; font-size: 14px; }
}
@media (max-width: 420px) { .barre .logo span { display: none; } .barre-in { padding: 0 16px; } .barre .logo { margin-right: 0; } }
@media (min-width: 981px) { .feuille { display: none !important; } }
/* L'ancienne en-tête et le sous-menu n'existent plus */
.entete, .sous-nav { display: none !important; }

/* ---------- Hero ---------- */
.h12 { position: relative; overflow: hidden; color: var(--neige); background: var(--nuit); isolation: isolate; }
.h12-fond { position: absolute; inset: 0; z-index: -2; }
.h12-fond-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(1.1) blur(1.5px); transform: scale(1.04); opacity: .55; }
.h12::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 21, 48, .97) 0%, rgba(10, 21, 48, .84) 42%, rgba(10, 21, 48, .45) 100%), linear-gradient(180deg, rgba(10, 21, 48, .2) 0%, transparent 30%, transparent 70%, var(--nuit) 100%); }
.h12 .neige-ciel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.h12-in { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 24px clamp(80px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 68px), 900px); }
.h12-sur { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 22px; }
.h12-sur .houx { width: 36px; height: auto; }
.h12 h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -.035em; }
.h12 h1 em { font-style: normal; background: linear-gradient(92deg, #FFE2B0 0%, #E6C47E 45%, #D08A4E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h12-intro { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--neige-2); max-width: 36em; margin: 24px 0 32px; }
.h12 .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.h12-puces { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.h12-puces li { margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .11); font-size: 14px; font-weight: 600; color: var(--neige); }
.h12-puces svg { width: 18px; height: 18px; color: var(--or-clair); flex: none; }
.h12-rassure { margin-top: 18px; font-size: 14px; color: var(--neige-2); opacity: .9; }
.h12-visuel { position: relative; max-width: 540px; width: 100%; justify-self: end; }
.h12-scene { position: relative; margin: 0; aspect-ratio: 4 / 4.6; border-radius: 34px; overflow: visible; }
.h12-scene::before { content: ""; position: absolute; inset: 0; border-radius: 34px; box-shadow: var(--ombre-forte), inset 0 0 0 1px rgba(255, 255, 255, .14); z-index: 1; pointer-events: none; }
.h12-scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; filter: blur(3px) saturate(1.1) brightness(.78); }
.h12-scene::after { content: ""; position: absolute; inset: 0; border-radius: 34px; background: radial-gradient(60% 50% at 55% 72%, rgba(255, 217, 160, .38), transparent 70%), linear-gradient(180deg, rgba(10, 21, 48, .1) 0%, transparent 45%, rgba(10, 21, 48, .55) 100%); }
.h12-halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 217, 160, .22), transparent 70%); z-index: -1; filter: blur(10px); }
.h12-pn { position: absolute; right: 6%; bottom: 0; height: 94%; width: auto; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); border-bottom-right-radius: 34px; }
.h12-pepin { position: absolute; left: -7%; bottom: -5%; height: 46%; width: auto; z-index: 3; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55)); animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.h12-rebours { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.h12-rebours .rebours-titre { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair); display: block; }
.h12-rebours .rebours { display: flex; gap: 14px; margin: 0; }
.h12-rebours .unite { min-width: 0; padding: 0; background: none; border: 0; text-align: center; }
.h12-rebours .valeur { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.h12-rebours .nom { display: block; font-size: 11px; color: var(--neige-2); text-transform: none; letter-spacing: 0; }
.h12-defiler { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .35); }
.h12-defiler span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--or-clair); animation: defiler 1.8s ease-in-out infinite; }
@keyframes defiler { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 1000px) {
  .h12-in { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; text-align: left; }
  .h12-visuel { justify-self: center; max-width: 440px; margin-top: 8px; }
  .h12-pepin { left: -3%; }
  .h12-defiler { display: none; }
}
@media (max-width: 560px) {
  .h12 .actions .bouton { width: 100%; }
  .h12-puces li { font-size: 13px; padding: 8px 12px 8px 10px; }
  .h12-rebours { flex-direction: column; align-items: flex-start; }
  .h12-visuel { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .h12-pepin, .h12-defiler span { animation: none; } }

/* ---------- Transitions entre sections (fondus, pas de coupure nette) ---------- */
#parcours, #village, #faq-courte { position: relative; }
#parcours::before, #village::before, #faq-courte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, rgba(15, 31, 69, .16), rgba(251, 247, 240, 0)); pointer-events: none; }
.sequence { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); }

/* ---------- Frise du parcours ---------- */
.parcours { background: linear-gradient(180deg, var(--creme) 0%, #F6EEE1 100%); }
.fr-cadre { position: relative; max-width: 1100px; margin: 24px auto 0; }
.fr-ligne { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px; margin-left: -1px; background: rgba(22, 22, 29, .1); border-radius: 2px; }
.fr-ligne-remplie { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--progres, 0) * 100%); background: linear-gradient(180deg, var(--rouge) 0%, var(--cuivre) 50%, var(--or-doux) 100%); border-radius: 2px; box-shadow: 0 0 12px rgba(181, 104, 58, .5); }
.fr { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 96px); }
.fr li + li { margin: 0; }
.fr-etape { display: grid; grid-template-columns: 1fr 1fr; gap: 104px; align-items: center; position: relative; }
.fr-etape:nth-child(even) .fr-visuel { order: 2; }
.fr-visuel { position: relative; aspect-ratio: 16 / 11; border-radius: 28px; overflow: hidden; background: var(--nuit); box-shadow: var(--ombre-forte); isolation: isolate; }
.fr-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.fr-etape:hover .fr-fond { transform: scale(1.04); }
.fr-fond--flou { filter: blur(3px) brightness(.75) saturate(1.1); transform: scale(1.06); }
.fr-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 21, 48, .45) 100%); pointer-events: none; z-index: 1; }
.fr-perso { position: absolute; bottom: 0; height: 86%; width: auto; z-index: 2; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); }
.fr-perso--d { right: 8%; } .fr-perso--g { left: 5%; height: 70%; } .fr-perso--pn { right: 12%; height: 96%; }
.fr-badge { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(10, 21, 48, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .14); }
.fr-badge svg { width: 15px; height: 15px; }
.fr-badge--appel { top: 16px; bottom: auto; background: linear-gradient(180deg, #BE2840, #9E1B2C); border-color: rgba(255, 255, 255, .2); box-shadow: 0 0 0 0 rgba(190, 40, 64, .6); animation: sonne 2.2s ease-out infinite; }
@keyframes sonne { 0% { box-shadow: 0 0 0 0 rgba(190, 40, 64, .55); } 70% { box-shadow: 0 0 0 14px rgba(190, 40, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(190, 40, 64, 0); } }
.fr-badge--clair { background: rgba(251, 247, 240, .92); color: var(--encre); border-color: rgba(10, 21, 48, .08); }
.fr-badge--passeport { top: 16px; bottom: auto; }
.fr--episode .fr-visuel { background: radial-gradient(90% 80% at 30% 20%, #23397A, var(--nuit) 70%); }
.fr-ecran { position: absolute; left: 7%; top: 12%; width: 68%; aspect-ratio: 16 / 10; border-radius: 16px; border: 7px solid #10131C; overflow: hidden; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); z-index: 1; }
.fr-ecran .fr-fond { filter: brightness(.85); }
.fr-lecture { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(251, 247, 240, .94); color: var(--rouge); display: grid; place-items: center; z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.fr-lecture svg { width: 24px; height: 24px; margin-left: 3px; }
.fr-duree { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 8px; border-radius: 6px; }
.fr--episode .fr-visuel::after { display: none; }
.fr--mission .fr-visuel { background: radial-gradient(rgba(138, 100, 36, .12) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(160deg, #FBF6EC, #F0E5D2); }
.fr--mission .fr-visuel::after { display: none; }
.fr-papier { position: absolute; left: 6%; top: 14%; width: 58%; display: flex; flex-wrap: wrap; gap: 4%; z-index: 1; }
.fr-papier img { width: 46%; height: auto; border-radius: 14px; background: #fff; padding: 6px; box-shadow: 0 12px 24px -12px rgba(10, 21, 48, .35); }
.fr-papier img:nth-child(1) { transform: rotate(-5deg); } .fr-papier img:nth-child(2) { transform: rotate(4deg) translateY(6px); } .fr-papier img:nth-child(3) { transform: rotate(2deg); margin-top: 4%; }
.fr--mission .fr-perso { height: 80%; right: 4%; }
.fr-tampon { position: absolute; right: 9%; top: 12%; z-index: 3; width: 118px; height: 118px; border-radius: 50%; border: 3px dashed var(--rouge); color: var(--rouge); background: rgba(251, 247, 240, .93); display: grid; place-items: center; text-align: center; transform: rotate(-12deg); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); }
.fr-tampon svg { width: 22px; height: 22px; position: absolute; top: 16px; left: 50%; margin-left: -11px; }
.fr-tampon b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; margin-top: 18px; }
.fr-deco { position: absolute; right: 8%; top: 10%; width: 74px; height: auto; z-index: 2; filter: drop-shadow(0 0 18px rgba(255, 217, 160, .8)); animation: flotte 5s ease-in-out infinite; }
.fr-texte { position: relative; }
.fr-num { position: absolute; top: -6px; left: -76px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; background: linear-gradient(180deg, #BE2840, #9E1B2C); box-shadow: 0 0 0 7px var(--creme), 0 12px 24px -8px rgba(158, 27, 44, .6); }
.fr-etape:nth-child(even) .fr-num { left: auto; right: -80px; }
.fr-quand { display: block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre); margin-bottom: 10px; }
.fr-texte h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; }
.fr-texte p { color: var(--gris); font-size: 17px; max-width: 30em; }
html.js .fr-etape .fr-visuel { opacity: 0; transform: translateX(-36px) scale(.97); transition: opacity 1s var(--courbe), transform 1s var(--courbe); }
html.js .fr-etape:nth-child(even) .fr-visuel { transform: translateX(36px) scale(.97); }
html.js .fr-etape .fr-texte { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--courbe) .15s, transform .9s var(--courbe) .15s; }
html.js .fr-etape.vu .fr-visuel, html.js .fr-etape.vu .fr-texte { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .fr-ligne { left: 27px; top: 0; bottom: 0; }
  .fr-etape, .fr-etape:nth-child(even) { grid-template-columns: 1fr; gap: 22px; padding-left: 68px; }
  .fr-etape:nth-child(even) .fr-visuel { order: 0; }
  .fr-num, .fr-etape:nth-child(even) .fr-num { left: -68px; right: auto; top: -2px; width: 52px; height: 52px; font-size: 18px; }
  .fr-etape .fr-texte { order: -1; }
  .fr-visuel { border-radius: 22px; }
  .fr-tampon { width: 92px; height: 92px; } .fr-tampon b { font-size: 10px; } .fr-tampon svg { top: 10px; }
}
@media (max-width: 480px) { .fr-etape, .fr-etape:nth-child(even) { padding-left: 56px; } .fr-ligne { left: 21px; } .fr-num, .fr-etape:nth-child(even) .fr-num { left: -56px; width: 44px; height: 44px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { html.js .fr-etape .fr-visuel, html.js .fr-etape .fr-texte { opacity: 1; transform: none; } .fr-badge--appel, .fr-deco { animation: none; } }

/* ---------- Les appels du Père Noël ---------- */
.appels .appels-tete { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.appels h2 { margin-bottom: 20px; }
.appels-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.appels-points li { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--neige); }
.appels-points svg { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: rgba(230, 196, 126, .16); color: var(--or-clair); margin-top: 1px; }
.rdv { margin-top: 64px; padding: 28px 28px 24px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .09); }
.rdv-titre { text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); }
.rdv ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.rdv ol::before { content: ""; position: absolute; top: 10px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, var(--or-clair), var(--cuivre) 60%, var(--rouge-2)); opacity: .8; }
.rdv li { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; padding: 0 4px; }
.rdv-point { width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); border: 3px solid var(--or-clair); position: relative; z-index: 1; margin-bottom: 8px; }
.rdv--message .rdv-point { width: 16px; height: 16px; margin: 3px 0 11px; border-color: var(--cuivre); }
.rdv--final .rdv-point { background: var(--rouge-2); border-color: var(--lumiere); box-shadow: 0 0 16px rgba(255, 217, 160, .7); }
.rdv--offert .rdv-point { background: var(--or-clair); }
.rdv li strong { font-size: 17px; color: #fff; }
.rdv li > span:not(.rdv-point) { font-size: 13px; color: var(--neige-2); line-height: 1.3; }
.rdv li em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit); background: var(--or-clair); padding: 3px 8px; border-radius: 999px; margin-top: 4px; }
.rdv-note { text-align: center; font-size: 14px; color: var(--neige-2); margin-top: 22px; }
@media (max-width: 900px) {
  .appels .appels-tete { grid-template-columns: 1fr; }
  .appels .pn-scene { max-width: 440px; width: 100%; margin: 0 auto; }
  .rdv { padding: 24px 20px; }
  .rdv ol { grid-template-columns: 1fr; gap: 14px; }
  .rdv ol::before { top: 6px; bottom: 6px; left: 10px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--or-clair), var(--cuivre) 60%, var(--rouge-2)); }
  .rdv li { display: grid; grid-template-columns: 22px 74px 1fr auto; align-items: center; text-align: left; gap: 12px; padding: 0; }
  .rdv-point, .rdv--message .rdv-point { margin: 0; justify-self: center; }
  .rdv li em { margin: 0; }
}

/* ---------- Écouter le Père Noël : lecteur + essai avec le prénom ---------- */
.ecouter { background: linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit) 100%); padding-top: 40px; }
.ecouter-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.lecteur, .ecouter .demo-voix { border-radius: 28px; padding: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
.ecouter .demo-voix { max-width: none; margin: 0; }
.demo-voix-titre { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 16px; }
.lecteur-tete { display: flex; gap: 16px; align-items: center; }
.lecteur-avatar { position: relative; width: 76px; height: 76px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(230, 196, 126, .5); }
.lecteur-avatar-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.8); }
.lecteur-avatar img:last-child { position: absolute; left: 50%; top: 4px; height: 240%; width: auto; max-width: none; transform: translateX(-50%); }
.lecteur-sur { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair); }
.lecteur-titre { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-top: 2px; }
.lecteur-legende { font-size: 13.5px; color: var(--neige-2); margin-top: 4px; }
.lecteur-ondes { display: flex; align-items: center; gap: 4px; height: 76px; margin: 26px 0 18px; }
.lecteur-ondes i { flex: 1; height: calc(var(--h) * 1%); border-radius: 4px; background: rgba(255, 255, 255, .18); transform-origin: center; transition: background-color .2s; }
.lecteur-ondes i.lu { background: linear-gradient(180deg, var(--lumiere), var(--cuivre)); }
.lecteur.joue .lecteur-ondes i { animation: onde 1.1s ease-in-out infinite alternate; }
.lecteur.joue .lecteur-ondes i:nth-child(3n) { animation-delay: -.3s; } .lecteur.joue .lecteur-ondes i:nth-child(3n+1) { animation-delay: -.7s; } .lecteur.joue .lecteur-ondes i:nth-child(4n) { animation-duration: .8s; }
@keyframes onde { from { transform: scaleY(.55); } to { transform: scaleY(1.08); } }
.lecteur-ctrl { display: flex; gap: 16px; align-items: center; }
.lecteur-play { width: 62px; height: 62px; flex: none; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(180deg, #BE2840, #9E1B2C); box-shadow: 0 14px 30px -12px rgba(158, 27, 44, .9); display: grid; place-items: center; transition: transform .2s var(--courbe); }
.lecteur-play:hover:not(:disabled) { transform: scale(1.05); }
.lecteur-play:disabled { opacity: .45; cursor: default; box-shadow: none; }
.lecteur-play svg { width: 26px; height: 26px; fill: currentColor; }
.lecteur-play .i-play { margin-left: 3px; }
.lecteur-play .i-pause, .lecteur.joue .lecteur-play .i-play { display: none; }
.lecteur.joue .lecteur-play .i-pause { display: block; }
.lecteur-piste { flex: 1; min-width: 0; }
.lecteur-pos { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); outline-offset: 6px; }
.lecteur-pos::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--or-clair); border: 0; }
.lecteur-pos::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--or-clair); border: 0; }
.lecteur-temps { display: flex; justify-content: space-between; font-size: 13px; color: var(--neige-2); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lecteur-pistes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.lecteur-pistes li { margin: 0; }
.lecteur-pistes button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: transparent; color: var(--neige); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lecteur-pistes button:hover { background: rgba(255, 255, 255, .05); }
.lecteur-pistes li.actif button { background: rgba(255, 255, 255, .08); border-color: rgba(230, 196, 126, .5); }
.lecteur-pistes span { font-size: 13px; color: var(--neige-2); font-variant-numeric: tabular-nums; }
.lecteur-vide { margin-top: 18px; font-size: 14px; color: var(--neige-2); padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .14); }
.ecouter .prepa .champs { grid-template-columns: 1fr 1fr; }
.ecouter .ecoute { min-height: 180px; }
@media (max-width: 900px) { .ecouter-grille { grid-template-columns: 1fr; } .lecteur, .ecouter .demo-voix { padding: 22px; } }
@media (max-width: 560px) { .ecouter .prepa .champs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lecteur.joue .lecteur-ondes i { animation: none; } }

/* ---------- Le village ---------- */
.village12 { background: var(--creme); }

/* ---------- Les jeux : cartes illustrées ---------- */
.jeux12 { background: linear-gradient(180deg, var(--creme) 0%, var(--creme-2) 100%); }
.jeux12-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.jeux12-tete h2 { margin-bottom: 18px; }
.jeux12-tete .intro { max-width: 40em; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filtre { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--sable); background: #fff; color: var(--encre); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--nuit); color: var(--neige); border-color: var(--nuit); }
.jeux12-grille { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.jeux12-grille li + li { margin: 0; }
.jeu12 { --teinte: var(--rouge); display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid rgba(10, 21, 48, .06); box-shadow: 0 1px 2px rgba(10, 21, 48, .04), 0 22px 44px -28px rgba(10, 21, 48, .45); transition: transform .4s var(--courbe), box-shadow .4s var(--courbe); }
.jeu12[data-type="Observation"] { --teinte: #B08A3E; } .jeu12[data-type="Réflexion"] { --teinte: var(--sapin); } .jeu12[data-type="Mémoire"] { --teinte: var(--cuivre); }
.jeu12:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(10, 21, 48, .05), 0 34px 60px -30px rgba(10, 21, 48, .55); }
.jeu12.masque { display: none; }
.jeu12-visuel { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--nuit); isolation: isolate; }
.jeu12-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--courbe); filter: saturate(1.08); }
.jeu12:hover .jeu12-fond { transform: scale(1.07); }
.jeu12-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 21, 48, .25) 0%, transparent 35%, transparent 55%, rgba(10, 21, 48, .55) 100%); z-index: 1; }
.jeu12-elem { position: absolute; right: 7%; bottom: 5%; height: 60%; width: auto; max-width: 55%; object-fit: contain; z-index: 2; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .45)); transition: transform .5s var(--courbe); }
.jeu12:hover .jeu12-elem { transform: translateY(-6px) rotate(-3deg); }
.jeu12-type { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 21, 48, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jeu12-type::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.jeu12-num { position: absolute; top: 14px; right: 16px; z-index: 3; font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .8); }
.jeu12-texte { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--teinte); }
.jeu12-texte h3 { font-size: 19px; line-height: 1.2; }
.jeu12-texte p { font-size: 15px; color: var(--gris); margin: 8px 0 16px; line-height: 1.45; }
.jeu12-meta { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jeu12-meta li { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre); background: var(--creme-2); padding: 5px 10px; border-radius: 999px; }
.jeu12-meta svg { width: 14px; height: 14px; color: var(--or); }
.jeux12-note { text-align: center; color: var(--gris); font-size: 14.5px; margin-top: 30px; }
@media (max-width: 1100px) { .jeux12-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .jeux12-tete { grid-template-columns: 1fr; } .filtres { justify-content: flex-start; } .jeux12-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .jeux12-grille { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 18px; scrollbar-width: none; }
  .jeux12-grille::-webkit-scrollbar { display: none; }
  .jeu12 { flex: 0 0 78%; scroll-snap-align: start; }
  .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* ---------- Les deux pass ---------- */
.tarifs12 { background: linear-gradient(180deg, var(--creme-2) 0%, var(--creme) 100%); position: relative; }
.pass12-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.pass12 { position: relative; display: flex; flex-direction: column; padding: 38px 34px 32px; border-radius: 32px; background: #fff; border: 1px solid var(--sable); box-shadow: var(--ombre); }
.pass12--conseil { background: radial-gradient(120% 90% at 20% 0%, #1B3270 0%, var(--nuit) 65%); color: var(--neige); border-color: transparent; box-shadow: var(--ombre-forte), inset 0 0 0 1px rgba(230, 196, 126, .25); }
.pass12 .ruban { left: 32px; right: auto; top: -14px; background: linear-gradient(180deg, #BE2840, #9E1B2C); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.pass12 .ruban::after { display: none; }
.pass12-nom { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.pass12--conseil .pass12-nom { color: var(--or-clair); }
.pass12-prix { font-size: clamp(46px, 5vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-top: 12px; }
.pass12-prix small { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--gris); margin-top: 8px; }
.pass12--conseil .pass12-prix small { color: var(--neige-2); }
.pass12-intro { margin-top: 16px; font-size: 16px; color: var(--gris); }
.pass12--conseil .pass12-intro { color: var(--neige-2); }
.pass12-inclus { display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: 15px; margin-top: 20px; color: var(--encre); }
.pass12-inclus svg { width: 16px; height: 16px; color: var(--or); }
.pass12 ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; flex: 1; align-content: start; }
.pass12 ul li { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.pass12 ul svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--sapin); }
.pass12--conseil ul svg { color: var(--or-clair); }
.pass12--conseil .bouton--principal { color: #fff; }
.conditions--ligne { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 32px; }
.conditions--ligne li { margin: 0; }
.conditions--ligne svg { color: var(--sapin); }
@media (max-width: 760px) { .pass12-grille { grid-template-columns: 1fr; } .pass12 { padding: 34px 24px 26px; } }

/* Commande : choix du pass */
.choix-pass { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.choix-pass-opt { position: relative; cursor: pointer; }
.choix-pass-opt input { position: absolute; opacity: 0; }
.choix-pass-opt span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--sable); background: #fff; transition: border-color .2s, box-shadow .2s; }
.choix-pass-opt em { font-style: normal; color: var(--gris); font-weight: 700; }
.choix-pass-opt input:checked + span { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(158, 27, 44, .12); }
.choix-pass-opt input:focus-visible + span { outline: 3px solid var(--or-clair); outline-offset: 2px; }

/* Barre fixée sur téléphone */
.barre-mobile { background: rgba(10, 21, 48, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .08); }

/* Pages intérieures : têtes sombres raccord avec la barre */
.tete { background: radial-gradient(120% 80% at 70% 0%, #142A5E 0%, var(--nuit) 65%); }
.tete h1 { font-size: clamp(36px, 5vw, 64px); }
/* v12 — corrections après relecture */
.parcours { overflow-x: clip; }
.fr-etape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fr-etape > * { min-width: 0; }
.fr--mission .fr-badge { top: 16px; bottom: auto; left: auto; right: 16px; }
@media (max-width: 860px) {
  .fr-etape, .fr-etape:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  html.js .fr-etape .fr-visuel, html.js .fr-etape:nth-child(even) .fr-visuel { transform: translateY(24px) scale(.98); }
}
@media (max-width: 420px) { .barre .logo span { display: inline; font-size: 17px; } .barre .logo svg { width: 26px; height: 26px; } }
@media (max-width: 360px) { .barre .logo span { display: none; } }
@media (max-width: 560px) { .h12 .actions .bouton { font-size: 16px; padding: 14px 18px; } .barre-cta { padding: 8px 14px; } }
.feuille { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; height: calc(100vh - 68px); height: calc(100dvh - 68px); }

/* ===================== v13 (1er nov.) : typographie, dégradés, mouvement ===================== */
/* Polices hébergées (licence SIL OFL 1.1, assets/fonts/LICENSE-*.txt) : Fraunces pour les titres, Caveat pour les notes de Pépin. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-600-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-ext-600-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fraunces-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --titre: "Fraunces", "Iowan Old Style", Georgia, serif;
  --main: "Caveat", "Segoe Print", cursive;
  --dore: linear-gradient(95deg, #FFE6B8 0%, #E6C47E 45%, #D08A4E 100%);
  --braise: linear-gradient(95deg, #9E1B2C 0%, #B5482F 45%, #C9893E 100%);
}

/* Titres : un serif chaleureux, des italiques en dégradé */
h1, h2, .h12 h1 { font-family: var(--titre); font-weight: 600; letter-spacing: -.022em; line-height: 1.04; font-optical-sizing: auto; }
h2 { font-size: clamp(34px, 4.6vw, 58px); }
h1 em, h2 em { font-style: italic; font-weight: 600; background: var(--braise); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.nuit h1 em, .nuit h2 em, .h12 h1 em, .appels h2 em, .ecouter h2 em, #jamais h2 em, .merite12 h2 em, .tete h1 em { background-image: var(--dore); }
.h12 h1 { font-size: clamp(42px, 5.6vw, 82px); letter-spacing: -.03em; }
.h12 h1 em { font-style: italic; }
h3 { letter-spacing: -.015em; }
.pass12-prix, .h12-rebours .valeur, .fr-num, .rdv li strong, .merite12-num, .unite12 b { font-family: var(--titre); }
.pass12-prix { font-weight: 700; letter-spacing: -.02em; }
.note-main { font-family: var(--main); font-weight: 600; }

/* Mots qui montent un à un */
h2.decoupe .mot-o { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
h2.decoupe .mot-i { display: inline-block; }
html.js h2.decoupe .mot-i { transform: translateY(112%); transition: transform 1.05s cubic-bezier(.19, 1, .22, 1) calc(var(--i) * 55ms); }
html.js h2.decoupe.titre-vu .mot-i { transform: none; }
h2.decoupe em.mot-i { display: inline; }
h2.decoupe .mot-o:has(> em) { display: inline; overflow: visible; }
html.js h2.decoupe .mot-o:has(> em) > em { opacity: 0; filter: blur(8px); transition: opacity 1.1s var(--courbe) calc(var(--i) * 55ms + .1s), filter 1.1s var(--courbe) calc(var(--i) * 55ms + .1s); transform: none; }
html.js h2.decoupe.titre-vu .mot-o:has(> em) > em { opacity: 1; filter: none; }

/* Rideaux : les grandes images s'ouvrent en entrant à l'écran */
html.js .rideau { clip-path: inset(9% 7% 9% 7% round 28px); transition: clip-path 1.5s cubic-bezier(.19, 1, .22, 1); }
html.js .rideau.ouvert { clip-path: inset(0 0 0 0 round 28px); }

/* Parallaxe : marge pour que rien ne découvre ses bords */
.h12-fond { inset: -14% 0; }
.grand-decor { overflow: hidden; }
.grand-decor > img { scale: 1.12; }
.fr-fond { scale: 1.1; }
.inscription-fond { overflow: hidden; }
.inscription-fond img { scale: 1.16; }
.pn-scene-fond { scale: 1.06; }

/* Le ciel : plus de gros flocon dessiné, des étoiles plus fines */
.ciel .flocon { display: none; }
.ciel .etoile { width: 9px; height: 9px; opacity: .55; }
.ciel .etoile--p { width: 6px; height: 6px; }

/* Dégradés de fond */
.parcours { background: radial-gradient(55% 38% at 0% 6%, rgba(230, 196, 126, .30), transparent 70%), radial-gradient(45% 32% at 100% 38%, rgba(158, 27, 44, .10), transparent 70%), radial-gradient(50% 35% at 8% 92%, rgba(29, 90, 60, .10), transparent 70%), linear-gradient(180deg, #FBF7F0 0%, #F4EBDC 100%); }
.village12 { background: radial-gradient(50% 40% at 100% 0%, rgba(181, 104, 58, .14), transparent 70%), radial-gradient(45% 35% at 0% 70%, rgba(29, 90, 60, .10), transparent 70%), linear-gradient(180deg, #F4EBDC 0%, #FBF7F0 100%); }
.jeux12 { background: radial-gradient(50% 35% at 0% 0%, rgba(158, 27, 44, .09), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(230, 196, 126, .30), transparent 70%), linear-gradient(180deg, #FBF7F0 0%, #F3E9D8 100%); }
#missions { background: radial-gradient(45% 35% at 100% 10%, rgba(29, 90, 60, .10), transparent 70%), linear-gradient(180deg, #F3E9D8 0%, #FBF7F0 100%); }
.tarifs12 { background: radial-gradient(60% 45% at 50% 0%, rgba(230, 196, 126, .32), transparent 70%), radial-gradient(40% 35% at 0% 80%, rgba(158, 27, 44, .08), transparent 70%), linear-gradient(180deg, #F6EEE1 0%, #FBF7F0 100%); }
#faq-courte { background: radial-gradient(50% 40% at 100% 0%, rgba(230, 196, 126, .22), transparent 70%), var(--creme); }
.appels, #jamais { background: radial-gradient(50% 45% at 88% 0%, rgba(94, 156, 122, .26), transparent 70%), radial-gradient(45% 40% at 0% 55%, rgba(158, 27, 44, .30), transparent 70%), radial-gradient(60% 45% at 50% 110%, rgba(255, 217, 160, .14), transparent 70%), linear-gradient(180deg, #0A1530 0%, #0F1F45 100%); }
.ecouter { background: radial-gradient(45% 40% at 100% 30%, rgba(158, 27, 44, .26), transparent 70%), radial-gradient(45% 40% at 0% 80%, rgba(94, 156, 122, .18), transparent 70%), linear-gradient(180deg, #0F1F45 0%, #0A1530 100%); }
.sequence { background: radial-gradient(60% 45% at 50% 100%, rgba(255, 217, 160, .14), transparent 70%), radial-gradient(40% 35% at 90% 10%, rgba(94, 156, 122, .2), transparent 70%), linear-gradient(180deg, #0A1530 0%, #0F1F45 100%); }
.h12::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: -1; background: radial-gradient(60% 80% at 75% 100%, rgba(158, 27, 44, .28), transparent 70%); pointer-events: none; }

/* Bordures en dégradé */
.pass12--conseil { border: 1.5px solid transparent; background: radial-gradient(120% 90% at 20% 0%, #1B3270 0%, #0A1530 65%) padding-box, linear-gradient(140deg, #E6C47E, #9E1B2C 45%, #E6C47E) border-box; }
.jeu12-texte { border-top: 0; position: relative; }
.jeu12-texte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--teinte), color-mix(in srgb, var(--teinte) 30%, #E6C47E)); }
.fr-visuel { box-shadow: var(--ombre-forte), 0 0 0 1px rgba(230, 196, 126, .25); }

/* Hero : note manuscrite de Pépin */
.h12-note { position: absolute; left: -10%; bottom: 47%; z-index: 4; margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--lumiere); transform: rotate(-8deg); text-shadow: 0 2px 12px rgba(10, 21, 48, .8); white-space: nowrap; }
.note-fleche { display: block; width: 58px; height: 30px; margin: 4px 0 0 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(48deg); }
@media (max-width: 1000px) { .h12-note { left: -2%; bottom: 46%; } }

/* Frise, étape 1 : le passeport d'apprenti */
.passeport { position: absolute; left: 6%; top: 13%; width: 64%; aspect-ratio: 1.5; display: grid; grid-template-columns: 1fr 1fr; z-index: 2; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); transform: rotate(-4deg); }
.pp-page { position: relative; display: flex; flex-direction: column; gap: 7%; padding: 9% 8%; background: linear-gradient(160deg, #FCF6E8 0%, #F0E1C3 100%); border: 1px solid rgba(138, 100, 36, .25); }
.pp-page--g { border-radius: 12px 2px 2px 12px; box-shadow: inset -12px 0 16px -12px rgba(0, 0, 0, .3); }
.pp-page--d { border-radius: 2px 12px 12px 2px; box-shadow: inset 12px 0 16px -12px rgba(0, 0, 0, .3); }
.pp-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(11px, 1.15vw, 15px); line-height: 1.1; color: var(--rouge); }
.pp-titre--petit { font-size: clamp(10px, 1vw, 13px); }
.pp-sous { font-size: clamp(6px, .6vw, 8px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-top: -4%; }
.pp-lig { display: flex; flex-direction: column; border-bottom: 1px dashed rgba(138, 100, 36, .45); padding-bottom: 2%; }
.pp-lig em { font-style: normal; font-size: clamp(6px, .6vw, 8px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.pp-lig b { font-size: clamp(16px, 1.8vw, 24px); line-height: 1; color: var(--nuit); font-weight: 600; }
.pp-sceau { position: absolute; right: 7%; bottom: 7%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--rouge); color: var(--rouge); display: grid; place-items: center; transform: rotate(-14deg); opacity: .8; }
.pp-sceau svg { width: 50%; height: 50%; }
.pp-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10%; margin-top: 4%; }
.pp-case { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(138, 100, 36, .5); display: grid; place-items: center; }
.pp-case--ok { border: 2px solid var(--rouge); color: var(--rouge); background: rgba(158, 27, 44, .07); transform: rotate(-12deg); }
.pp-case svg { width: 55%; height: 55%; }
.fr-perso--coin { right: 2%; height: 70%; }

/* Slide « Ici, l'écran se mérite », pilotée par le défilement */
.merite12 { --p: 0; position: relative; height: 260vh; background: var(--nuit); color: var(--neige); }
.merite12-scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.merite12-aurore { position: absolute; inset: -15%; z-index: -2;
  background: radial-gradient(45% 40% at calc(15% + var(--p) * 55%) 25%, rgba(158, 27, 44, .55), transparent 70%),
              radial-gradient(42% 38% at calc(85% - var(--p) * 45%) 75%, rgba(94, 156, 122, .42), transparent 70%),
              radial-gradient(50% 35% at 50% calc(110% - var(--p) * 30%), rgba(255, 217, 160, .38), transparent 70%),
              linear-gradient(180deg, #0A1530 0%, #101F4A 100%); }
.merite12 .neige-ciel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.merite12-in { width: 100%; max-width: 1180px; padding: 0 24px; text-align: center; }
.merite12-sur { font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 22px; }
.merite12-titre { font-size: clamp(56px, 11vw, 168px); line-height: .95; letter-spacing: -.035em; }
.merite12-titre > span { display: inline-block; opacity: .12; filter: blur(6px); transform: translateY(18px); transition: opacity .8s var(--courbe), filter .8s var(--courbe), transform .8s var(--courbe); }
.merite12-titre > span.on { opacity: 1; filter: none; transform: none; }
.merite12-titre em { padding-right: .08em; }
.merite12-pas { list-style: none; padding: 0; margin: clamp(32px, 6vh, 64px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; text-align: left; }
.merite12-pas li { margin: 0; padding: 20px 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; gap: 6px; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--courbe), transform .8s var(--courbe); }
.merite12-pas li.on { opacity: 1; transform: none; }
.merite12-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--nuit); background: var(--dore); }
.merite12-pas strong { font-size: 18px; color: #fff; }
.merite12-pas span:last-child { font-size: 14.5px; color: var(--neige-2); }
@media (max-width: 760px) { .merite12 { height: 230vh; } .merite12-pas { grid-template-columns: 1fr; gap: 10px; } .merite12-pas li { padding: 14px 16px; grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px; } .merite12-pas li span:last-child { grid-column: 2; } .merite12-num { grid-row: span 2; } }
@media (prefers-reduced-motion: reduce) { .merite12 { height: auto; } .merite12-scene { position: relative; height: auto; padding: 120px 0; } .merite12-titre > span, .merite12-pas li { opacity: 1; filter: none; transform: none; } }

/* Tarifs : offres à l'unité, en petit */
.unite12 { max-width: 820px; margin: 30px auto 0; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .55); border: 1px solid var(--sable); }
.unite12-titre { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: 12px; }
.unite12 ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.unite12 li { margin: 0; }
.unite12 a { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 100%; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--sable); color: var(--encre); text-decoration: none; font-size: 13.5px; line-height: 1.3; transition: border-color .2s, transform .2s; }
.unite12 a:hover { border-color: var(--rouge); transform: translateY(-2px); color: var(--encre); }
.unite12 b { font-size: 16px; font-weight: 700; color: var(--rouge); white-space: nowrap; }
@media (max-width: 760px) { .unite12 ul { grid-template-columns: 1fr; } }
.carte--large { grid-column: 1 / -1; }
.choix-unite-titre { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: -6px 0 8px; }
.choix-pass--unite { grid-template-columns: repeat(3, 1fr); }
.choix-pass--unite .choix-pass-opt span { padding: 10px 12px; font-size: 14px; }
@media (max-width: 520px) { .choix-pass--unite { grid-template-columns: 1fr; } }
.pp-sceau { display: none; }
@media (max-width: 860px) { .passeport { width: 70%; top: 9%; } .pp-page { gap: 4%; padding: 7% 7%; } .pp-lig b { font-size: 15px; } }
/* v14 : bandeau final qui renvoie au formulaire (remonté après la frise) */
.finale12 { position: relative; overflow: hidden; background: radial-gradient(50% 60% at 50% 100%, rgba(255, 217, 160, .22), transparent 70%), radial-gradient(40% 50% at 10% 20%, rgba(158, 27, 44, .3), transparent 70%), radial-gradient(40% 50% at 90% 30%, rgba(94, 156, 122, .22), transparent 70%), linear-gradient(180deg, #0F1F45, #0A1530); }
.finale12 .neige-ciel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale12 .conteneur { position: relative; }
.finale12 h2 { max-width: 16em; margin: 0 auto; }
.finale12-pepin { width: 120px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); animation: flotte 6s ease-in-out infinite; }
.finale12 .actions { margin-top: 32px; }
/* v14 — corrections de l'audit */
.pied h2 { font-family: var(--police); font-weight: 800; letter-spacing: .14em; }
.sequence .progression { bottom: auto; top: 50%; left: auto; right: clamp(16px, 4vw, 48px); transform: translateY(-50%); flex-direction: column; }
.tarifs12 { overflow: hidden; }
@media (max-width: 760px) { .tarifs12 .boules { display: none; } }
@media (max-width: 600px) { .inscription .deco-noeud { width: 64px; top: -22px; } .inscription .carte > .surtitre { margin-top: 18px; } }
.jeux12-tete { grid-template-columns: 1fr; align-items: start; }
.jeux12-tete h2 { max-width: 18em; }
.filtres { justify-content: flex-start; margin-top: 6px; }

/* v15 — après l'inscription */
.apres-ins { list-style: none; counter-reset: ai; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.apres-ins li { counter-increment: ai; position: relative; padding: 14px 14px 14px 46px; border-radius: 14px; background: rgba(158, 27, 44, .06); border: 1px solid rgba(138, 100, 36, .18); font-size: 14px; line-height: 1.45; }
.apres-ins li::before { content: counter(ai); position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #BE2840, #9E1B2C); color: #fff; font: 700 12px/22px Manrope, sans-serif; text-align: center; }
.apres-ins strong { display: block; font-size: 13px; letter-spacing: .02em; color: var(--rouge, #9E1B2C); margin-bottom: 2px; }
.apres-ins span { color: inherit; opacity: .85; }
@media (max-width: 520px) { .apres-ins { grid-template-columns: 1fr; } }

/* v16 — confirmation d'inscription */
.ins-ok { display: grid; gap: 12px; padding: 24px; border-radius: 18px; background: linear-gradient(160deg, rgba(29, 90, 60, .08), rgba(230, 196, 126, .14)); border: 1px solid rgba(29, 90, 60, .25); outline: none; }
.ins-ok[hidden] { display: none; }
.ins-ok p { margin: 0; }
.ins-ok-titre { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 28px; color: var(--sapin, #1D5A3C); }
.ins-ok-q { display: grid; gap: 12px; justify-items: start; padding-top: 12px; border-top: 1px dashed rgba(138, 100, 36, .35); }
.bouton--lien { background: none; border: 0; padding: 0; justify-self: start; color: var(--rouge, #9E1B2C); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }

/* v19 — le mot du fondateur */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fondateur12 { background: radial-gradient(80% 60% at 50% 0%, rgba(230, 196, 126, .22), transparent 70%), linear-gradient(180deg, #FBF7F0 0%, #F4EDE1 100%); }
.fondateur12-cadre { max-width: 780px; text-align: center; display: grid; gap: 22px; justify-items: center; }
.fondateur12-citation { margin: 0; position: relative; padding: 0 8px; }
.fondateur12-citation p { margin: 0; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.38; color: var(--nuit, #0A1530); }
.fondateur12-signe { margin: 0; display: grid; gap: 2px; justify-items: center; }
.fondateur12-signe .note-main { font-size: 40px; line-height: 1; color: #9E1B2C; transform: rotate(-4deg); }
.fondateur12-signe span:last-child { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--gris, #6E6E73); }
.fondateur12-plus { margin: 0; max-width: 560px; font-size: 15px; color: var(--gris, #6E6E73); }
.fondateur12-plus a { color: #9E1B2C; font-weight: 700; }
.prose blockquote { margin: 20px 0; padding: 16px 22px; border-left: 3px solid #E6C47E; background: rgba(230, 196, 126, .12); border-radius: 0 12px 12px 0; }
.prose blockquote p { margin: 0 0 6px; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 19px; }
.prose blockquote p:last-child { margin: 0; font-family: inherit; font-style: normal; font-size: 14px; font-weight: 700; color: var(--gris, #6E6E73); }
/* v20 — photo du fondateur */
.fondateur12-photo { width: 128px; height: 128px; object-fit: cover; object-position: 50% 22%; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #E6C47E, 0 18px 40px -18px rgba(10, 21, 48, .45); }
.qui-photo { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 500 / 576; object-fit: cover; border-radius: 18px; margin: 0 0 20px; box-shadow: 0 18px 40px -20px rgba(10, 21, 48, .4); }