/* Polices de la DA Point Zéro (Boris, 2026-08-07) : Roboto Slab pour les titres,
   Poppins pour le corps de texte. Fichiers locaux repris des prototypes de parcours —
   pas de CDN, conformément à la règle « prototype autonome » du dépôt. */
@font-face{font-family:Poppins;src:url("/site/assets/fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("/site/assets/fonts/Poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url("/site/assets/fonts/Poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
/* Roboto Slab est une police variable : on déclare la plage explicitement pour que les
   graisses de titre soient de vraies interpolations et non un gras synthétisé. */
@font-face{font-family:"Roboto Slab";src:url("/site/assets/fonts/RobotoSlab.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ⚠️ LES JETONS ONT DÉMÉNAGÉ dans /site/tokens.css, chargée AVANT cette
   feuille par la coque `site` et par les cinq parcours de découverte. Ils y
   sont un fichier à part parce qu'ils sont désormais PARTAGÉS : les parcours
   sont des pages autonomes qui ne peuvent pas charger cette feuille-ci sans
   embarquer 880 lignes de mise en page dont elles n'ont aucun usage.
   Les redéclarer ici en ferait une seconde vérité. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: 1000; background-image: radial-gradient(circle at 18% 28%, rgba(23,24,37,.07) 0 1px, transparent 1.4px), radial-gradient(circle at 76% 63%, rgba(23,24,37,.05) 0 1px, transparent 1.5px); background-size: 19px 23px, 27px 31px; mix-blend-mode: multiply; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--solar); outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: -70px; z-index: 1001; padding: 10px 16px; background: var(--ink); color: white; border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }

.prototype-bar { min-height: 32px; padding: 6px 4vw; background: var(--ink); color: rgba(255,255,255,.78); display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .04em; position: relative; z-index: 201; }
.prototype-bar button { position: absolute; right: 16px; border: 0; background: transparent; color: white; font-size: 20px; line-height: 1; cursor: pointer; }
.prototype-bar[hidden] { display: none; }

.site-header { height: 76px; padding: 0 max(var(--site-gouttiere), calc((100% - var(--site-largeur)) / 2)); display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 28px; background: rgba(245,241,233,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 200; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; letter-spacing: .11em; font-size: 12px; line-height: 1.05; }
.brand strong { display: block; font-weight: 800; }
.brand small { display: block; font-size: 9px; letter-spacing: .32em; color: var(--violet); margin-top: 4px; }
.brand-mark { width: 38px; height: 38px; display: inline-block; position: relative; transform: rotate(-12deg); flex: none; }
.brand-mark i { display: block; position: absolute; width: 34px; height: 18px; left: 2px; border: 4px solid var(--violet); }
.brand-mark i:first-child { top: 1px; border-bottom: 0; border-radius: 22px 22px 0 0; }
.brand-mark i:last-child { bottom: 1px; border-top: 0; border-radius: 0 0 22px 22px; transform: rotate(180deg); }
.site-nav { justify-self: center; display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.site-nav a { text-decoration: none; font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; position: relative; padding: 28px 0 24px; }
.site-nav a::after { content: ""; position: absolute; height: 3px; left: 50%; right: 50%; bottom: 0; background: var(--violet); transition: .22s ease; }
.site-nav a:hover::after, .site-nav a.is-active::after { left: 0; right: 0; }
.site-nav a.is-active { color: var(--violet); }
.enter-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: white; text-decoration: none; font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.enter-button:hover, .button:hover { transform: translateY(-2px); background: var(--violet); border-color: var(--violet); }
.button-secondary { background: transparent; color: var(--ink); }
.button-secondary:hover { color: white; }
.button-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.button-light:hover { background: var(--solar); border-color: var(--solar); color: var(--ink); }
.button-ghost-light { background: transparent; color: white; border-color: rgba(255,255,255,.62); }
.button-ghost-light:hover { background: white; border-color: white; color: var(--ink); }
.text-link { font-weight: 750; text-underline-offset: 4px; }
.menu-toggle { display: none; }

main { min-height: 72vh; }
.page { animation: page-in .35s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
/* ⚠️ LE CONTENU SE BORNE, LES BANDEAUX SE REMPLISSENT — et c'est la même
   gouttière. `.shell` prend la plus PETITE des deux largeurs ; `.site-header` et
   `.site-footer` gardent toute la largeur (leur fond et leur bordure en
   dépendent) et poussent leur contenu jusqu'au même bord. Voir `tokens.css`. */
.shell { width: min(var(--site-largeur), calc(100% - 2 * var(--site-gouttiere))); margin: 0 auto; }
.narrow { width: min(820px, calc(100% - 2 * var(--site-gouttiere))); margin-inline: auto; }
.eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--violet); }
.eyebrow-light { color: var(--solar); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.09; font-weight: 500; margin: 0; }
h1 { font-size: clamp(42px, 7vw, 91px); letter-spacing: -.045em; }
h2 { font-size: clamp(31px, 4vw, 54px); letter-spacing: -.035em; }
h3 { font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.02em; }
p { margin: 0; }
.lead { font-family: var(--serif); font-size: clamp(19px, 2vw, 27px); line-height: 1.42; color: var(--ink-2); }
.prose { font-size: 17px; color: var(--ink-2); }
.prose p + p { margin-top: 1.2em; }
.prose strong { color: var(--ink); }
.muted { color: var(--muted); }

.home-hero { min-height: min(790px, calc(100vh - 108px)); position: relative; overflow: hidden; display: grid; align-items: center; padding: 80px 0; background: var(--paper-2); }
/* Biseau : l'image reste confinée à un panneau de droite, coupé en diagonale ;
   le reste du hero garde l'aplat de couleur unie défini ci-dessus, sous le texte. */
.hero-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 1; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; display: block; }
.hero-copy { width: min(720px, 62%); position: relative; z-index: 3; }
.hero-copy h1 span { display: block; color: var(--violet); }
.hero-copy .lead { max-width: 610px; margin-top: 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-note { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.hero-note::before { content: ""; width: 38px; height: 1px; background: var(--violet); }
.civilization-hero { min-height: min(880px, calc(100vh - 108px)); }
.civilization-hero .hero-copy { width: min(460px, 42%); }
.civilization-hero h1 { font-size: clamp(43px, 4.8vw, 68px); }
.civilization-hero .lead { max-width: 720px; }

.section-block { padding: clamp(72px, 9vw, 130px) 0; }
.section-head { display: grid; grid-template-columns: minmax(240px, .7fr) 1.3fr; gap: 60px; align-items: end; margin-bottom: 48px; }
.section-head .lead { max-width: 700px; }
.intro-band { background: var(--ink); color: white; position: relative; overflow: hidden; }
.intro-band::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(105deg, transparent 0 34px, rgba(255,255,255,.07) 34px 35px); }
.intro-band .shell { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: center; }
.intro-band .lead { color: rgba(255,255,255,.82); }
.quote-mark { width: 100%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(80px, 10vw, 150px); color: var(--solar); box-shadow: inset 0 0 80px rgba(130,36,111,.45); }
.ecosystem-band .shell { grid-template-columns: 1.15fr .85fr; }
.ecosystem-statement { max-width: 760px; margin-top: 28px; padding-left: 24px; border-left: 2px solid var(--solar); color: rgba(255,255,255,.7); font-size: 15px; }
.ecosystem-orbit { width: min(100%, 430px); aspect-ratio: 1; justify-self: end; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; position: relative; box-shadow: inset 0 0 90px rgba(130,36,111,.38), 0 0 0 30px rgba(255,255,255,.025); }
.ecosystem-orbit::before, .ecosystem-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; inset: 18%; }
.ecosystem-orbit::after { inset: 36%; background: rgba(239,184,63,.08); }
.ecosystem-orbit b { position: absolute; inset: 40%; z-index: 2; display: grid; place-items: center; border-radius: 50%; color: var(--solar); font-family: var(--serif); font-size: 27px; }
.ecosystem-orbit span { position: absolute; z-index: 3; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: var(--ink); color: rgba(255,255,255,.82); font-size: 11px; }
.ecosystem-orbit span:nth-child(1) { left: 1%; top: 18%; }
.ecosystem-orbit span:nth-child(2) { right: -15%; top: 18%; }
.ecosystem-orbit span:nth-child(3) { right: -8%; top: 46%; }
.ecosystem-orbit span:nth-child(4) { right: 4%; bottom: 18%; }
.ecosystem-orbit span:nth-child(5) { left: 21%; bottom: 2%; }
.ecosystem-orbit span:nth-child(6) { left: -4%; bottom: 26%; }
.ecosystem-orbit span:nth-child(7) { left: 37%; top: 2%; }
.ecosystem-orbit span:nth-child(8) { right: 23%; bottom: -5%; }
.ecosystem-orbit span:nth-child(9) { left: -4%; top: 48%; }

.festival-spotlight { background: var(--violet); color: white; border-top: 1px solid rgba(255,255,255,.16); }
.festival-spotlight .shell { min-height: 210px; display: grid; grid-template-columns: 170px 1fr 280px; gap: 38px; align-items: center; }
.festival-date { display: flex; align-items: center; gap: 12px; }
.festival-date strong { font-family: var(--serif); font-size: 86px; line-height: 1; color: var(--solar); font-weight: 500; }
.festival-date span { font-size: 12px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; }
.festival-copy h2 { font-size: clamp(34px, 4vw, 52px); }
.festival-copy p:last-child { max-width: 650px; margin-top: 12px; color: rgba(255,255,255,.72); }
.festival-action { display: grid; justify-items: start; gap: 20px; }
.festival-action > span { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: rgba(255,255,255,.78); }
.festival-links { display: grid; gap: 9px; width: 100%; }
.festival-links .button { width: 100%; }
#rendez-vous { scroll-margin-top: 92px; }

.hypothesis-section { background: var(--paper); }
.cycle-line { display: grid; grid-template-columns: repeat(5, 1fr) 1.2fr; align-items: stretch; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cycle-line span, .cycle-line b { min-height: 112px; padding: 18px 12px; display: flex; align-items: flex-end; border-right: 1px solid var(--line); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.cycle-line span::before { content: ""; width: 8px; height: 8px; margin: 0 8px 5px 0; border-radius: 50%; background: var(--violet); }
.cycle-line b { align-items: center; justify-content: center; border-right: 0; background: var(--ink); color: var(--solar); font-family: var(--serif); font-size: 20px; text-transform: none; }
.dual-manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.dual-manifesto article { min-height: 320px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; }
.dual-manifesto article:last-child { background: var(--violet-pale); }
.dual-manifesto .number { color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.dual-manifesto h3 { margin-top: 40px; font-size: 38px; }
.dual-manifesto p { max-width: 480px; margin-top: 16px; color: var(--muted); }
.dual-manifesto a { margin-top: auto; padding-top: 26px; }

.books-section { background: radial-gradient(circle at 12% 18%, rgba(239,184,63,.18), transparent 18%), var(--violet-deep); color: white; overflow: hidden; }
.books-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.books-copy .lead { margin-top: 26px; color: rgba(255,255,255,.7); }
.book-actions { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.light-link { color: white; }
.book-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; perspective: 900px; }
.book-volume { min-height: 430px; padding: 30px 24px; border-radius: 5px 13px 13px 5px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: -10px 18px 35px rgba(0,0,0,.28); transform: rotateY(-5deg); }
.book-volume::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.28); box-shadow: 3px 0 rgba(0,0,0,.14); }
.book-volume::after { content: ""; position: absolute; width: 170px; height: 170px; right: -65px; top: 55px; border: 1px solid currentColor; border-radius: 50%; opacity: .22; box-shadow: 0 0 0 25px currentColor; }
.book-volume span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.book-volume strong { margin-top: auto; font-family: var(--serif); font-size: 27px; line-height: 1.08; }
.book-volume p { margin-top: 18px; font-size: 12px; line-height: 1.55; opacity: .68; }
.book-one { background: var(--paper); color: var(--ink); }
.book-two { background: var(--ink); color: white; transform: translateY(-24px) rotateY(-5deg); }
.book-next { background: var(--solar); color: var(--ink); }

.action-keys { background: var(--paper-2); }
.key-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.key-grid article { min-height: 230px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.key-grid article:nth-child(3n) { border-right: 0; }
.key-grid article:nth-child(n+4) { border-bottom: 0; }
.key-grid b { color: var(--violet); font-size: 11px; letter-spacing: .13em; }
.key-grid h3 { margin-top: 34px; font-size: 27px; }
.key-grid p { margin-top: 13px; color: var(--muted); font-size: 14px; }
.fractal-quote { margin: 46px 0 0; padding: 42px clamp(28px, 7vw, 90px); border: 0; background: var(--ink); color: white; border-radius: var(--radius); text-align: center; }
.fractal-quote p { font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); line-height: 1.3; }

.game-threshold { background: radial-gradient(circle at 80% 20%, rgba(239,184,63,.2), transparent 22%), var(--ink); color: white; }
.threshold-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(55px, 9vw, 120px); align-items: center; }
.threshold-layout .lead { margin: 24px 0 34px; color: rgba(255,255,255,.7); }
.threshold-layout ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.18); }
.threshold-layout li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); align-items: center; }
.threshold-layout li span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--solar); border-radius: 50%; color: var(--solar); font-size: 11px; }

.ecosystem-proof { background: var(--paper); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.proof-grid article { min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.proof-grid span { color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proof-grid h3 { margin-top: 54px; font-size: 25px; }
.proof-grid p { margin-top: 15px; color: var(--muted); font-size: 13px; }
.proof-link { margin-top: 30px; text-align: center; }

.festival-page { background: var(--ink); color: white; }
.festival-feature { display: grid; grid-template-columns: 220px 1fr; gap: clamp(45px, 8vw, 110px); align-items: stretch; }
.festival-feature-date { min-height: 500px; padding: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); display: flex; flex-direction: column; background: radial-gradient(circle at 50% 20%, rgba(239,184,63,.34), transparent 24%), linear-gradient(160deg, var(--violet), var(--ink)); }
.festival-feature-date strong { font-family: var(--serif); font-size: 112px; line-height: .85; color: var(--solar); font-weight: 500; }
.festival-feature-date span { margin-top: 18px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.festival-feature-date small { margin-top: auto; font-size: 21px; font-family: var(--serif); }
.festival-feature-copy { padding: 28px 0; }
.festival-feature-copy h2 { font-size: clamp(48px, 7vw, 88px); }
.festival-feature-copy h3 { margin-top: 15px; color: var(--solar); font-size: clamp(24px, 3vw, 36px); }
.festival-feature-copy .lead { max-width: 800px; margin-top: 30px; color: rgba(255,255,255,.72); }
.festival-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 40px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.17); }
.festival-facts span { padding: 18px; background: var(--ink); font-size: 12px; }
.festival-facts b { display: block; margin-bottom: 8px; color: var(--solar); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.event-card { min-height: 430px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; }
.event-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.event-symbol { width: 76px; height: 76px; margin-top: 36px; border: 1px solid var(--violet); border-radius: 50%; display: grid; place-items: center; color: var(--violet); font-family: var(--serif); font-size: 23px; box-shadow: 0 0 0 12px var(--violet-pale); }
.event-card h3 { margin-top: 42px; }
.event-card > p { margin-top: 15px; color: var(--muted); font-size: 14px; }
.event-card footer { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.event-status { color: var(--violet); font-weight: 800; white-space: nowrap; }
.agenda-proof { background: var(--paper-2); }
.agenda-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.agenda-news article { min-height: 260px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.agenda-news span { color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.agenda-news h3 { margin-top: 42px; font-size: 25px; }
.agenda-news p { margin-top: 15px; color: var(--muted); font-size: 13px; }

.path-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.path-card { min-height: 360px; padding: 26px 22px; text-decoration: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: .25s ease; }
.path-card:last-child { border-right: 0; }
.path-card::before { content: attr(data-index); font-family: var(--serif); font-size: 92px; line-height: 1; color: rgba(130,36,111,.07); position: absolute; right: -5px; top: 8px; }
.path-card:hover { background: var(--ink); color: white; transform: translateY(-5px); z-index: 2; box-shadow: var(--shadow); }
.path-card:hover .path-time, .path-card:hover p { color: rgba(255,255,255,.65); }
.path-card:nth-child(5) { background: var(--violet-pale); }
.path-card:nth-child(5):hover { background: var(--violet-deep); }
.path-time { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.path-card h3 { font-size: 24px; margin-top: 38px; }
.path-card p { margin-top: 16px; font-size: 13px; color: var(--muted); }
.path-card .path-arrow { margin-top: auto; font-size: 22px; }
.path-card .path-badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; color: var(--violet); }

.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.door-card { min-height: 330px; padding: 34px; border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; background: var(--white); position: relative; overflow: hidden; }
.door-card::after { content: ""; width: 150px; height: 150px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; position: absolute; right: -35px; bottom: -35px; box-shadow: 0 0 0 24px currentColor; }
.door-card:nth-child(2) { background: var(--violet); color: white; }
.door-card:nth-child(3) { background: #dce7df; }
.door-card .door-num { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.door-card h3 { font-size: 31px; margin-top: 70px; }
.door-card p { margin-top: 14px; opacity: .72; font-size: 14px; max-width: 340px; }
.door-card span:last-child { margin-top: auto; font-weight: 800; }

.page-hero { padding: clamp(74px, 8vw, 120px) 0 clamp(64px, 7vw, 100px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero .shell { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(48px, 7vw, 88px); max-width: 880px; }
.page-hero .lead { margin-top: 26px; max-width: 740px; }
.hero-aside { border-left: 1px solid currentColor; padding-left: 26px; opacity: .68; font-size: 13px; }
.hero-aside strong { display: block; margin-bottom: 10px; opacity: 1; }
.theme-analytic { background: linear-gradient(rgba(130,36,111,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(130,36,111,.06) 1px, transparent 1px), var(--paper); background-size: 34px 34px; }
.theme-game { background: radial-gradient(circle at 82% 20%, rgba(239,184,63,.28), transparent 25%), var(--ink); color: white; }
.theme-game .lead { color: rgba(255,255,255,.75); }
.theme-action { background: linear-gradient(130deg, #e7efe8, #f7f1e7); }
.theme-resource { background: #e8e2d8; }

/* ---- Covers des six pages principales (visuels Boris, 2026-08-08) ----------------------
   Chaque section a sa couleur : une texture papier teintee (le fond) et une illustration a
   fond transparent posee a droite. Les deux fichiers sont livres separement, et c'est ce qui
   rend la cover elastique : l'illustration est une <img> en height:100%, donc elle epouse la
   hauteur du hero quelle que soit la longueur du titre, sans jamais etre recadree. Une image
   composee a l'avance aurait un ratio fige et se serait fait rogner sur un hero large et bas.
   Le texte reste dans la moitie gauche, exactement la zone laissee libre par les visuels. */
.page-cover { --cover-pad: clamp(58px, 6vw, 96px); padding: var(--cover-pad) 0; color: var(--ink); background-position: center; background-size: cover; background-repeat: no-repeat; }
/* L'illustration est calee sur le CONTENEUR (.shell, 1180 px centre), pas sur le bord de
   l'ecran : sinon, sur un grand ecran, le texte reste au centre pendant que l'image part se
   coller au bord droit et le couple se disloque (retour Boris, 2026-08-08). Le fond, lui,
   continue en pleine largeur. Meme correction que sur le diptyque d'accueil. */
.page-cover .shell { display: block; position: relative; }
.page-cover .cover-copy { width: min(520px, 46%); position: relative; z-index: 2; }
/* Titres plus petits que sur les heros sans image : la colonne fait la moitie de la largeur,
   un clamp a 88 px y produirait des titres de six lignes. */
.page-cover h1 { font-size: clamp(35px, 4.1vw, 58px); max-width: none; color: var(--white); }
.page-cover .lead { font-size: clamp(17px, 1.5vw, 21px); margin-top: 20px; max-width: none; }
/* L'accent violet de .eyebrow n'a pas assez de contraste sur les six fonds teintes. */
.page-cover .eyebrow { color: var(--ink); opacity: .74; }
.page-cover .hero-aside { margin-top: 32px; border-left-color: rgba(23, 19, 27, .32); opacity: .76; }
/* display: contents efface la boite du <picture> : l'image se comporte en enfant direct du
   .shell, en absolu au-dessus de 900 px comme en flux en dessous. Sans cela, le <picture>
   inline casserait le repli mobile (une <img> en display:block dans un parent inline). */
.page-cover picture { display: contents; }
/* La boite deborde le .shell d'une valeur de padding en haut et en bas, pour occuper toute la
   hauteur de la section, alors que sa position horizontale reste celle du conteneur.

   ATTENTION au piege : `top` + `bottom` ne suffit PAS sur une <img>. Sur un element remplace en
   position absolue, si la hauteur est auto et que top et bottom sont tous deux donnes, la
   specification declare la situation surcontrainte et ignore `bottom` : la hauteur retombe sur
   le ratio intrinseque (ici 508 px pour 519 de large) et l'image se retrouve collee en haut.
   D'ou une hauteur explicite, et object-fit qui centre le contenu dans cette boite.

   width + object-fit: contain : quelle que soit la contrainte qui mord (hauteur de la section ou
   largeur de la colonne), l'image tient en gardant son ratio, calee a droite. */
.cover-illu { position: absolute; right: 0; top: calc(-1 * var(--cover-pad)); height: calc(100% + 2 * var(--cover-pad)); width: 50%; object-fit: contain; object-position: right center; z-index: 1; pointer-events: none; }
.cover-point-zero { background-image: url("/site/assets/covers/point-zero-bg.jpg"); }
.cover-comprendre { background-image: url("/site/assets/covers/comprendre-bg.jpg"); }
.cover-agir { background-image: url("/site/assets/covers/agir-bg.jpg"); }
.cover-jeu { background-image: url("/site/assets/covers/jeu-bg.jpg"); }
.cover-ressources { background-image: url("/site/assets/covers/ressources-bg.jpg"); }
.cover-actualites { background-image: url("/site/assets/covers/actualites-bg.jpg"); }

/* Sous 900 px la colonne de texte et l'illustration ne tiennent plus cote a cote :
   l'illustration repasse en flux, centree sous le texte (meme principe que le repli du
   diptyque d'accueil). */
@media (max-width: 900px) {
  .page-cover .cover-copy, .page-cover .hero-aside { width: 100%; }
  .cover-illu { position: static; display: block; width: min(320px, 68%); height: auto; margin: 30px auto 0; }
}

.content-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 80px; align-items: start; }
.on-page { position: sticky; top: 110px; border-top: 1px solid var(--line); padding-top: 16px; }
.on-page strong { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; }
.on-page a { display: block; padding: 7px 0; color: var(--muted); text-decoration: none; font-size: 13px; }
.on-page a:hover { color: var(--violet); }
.article-flow { display: grid; gap: 72px; }
.article-section { scroll-margin-top: 110px; }
.article-section h2 { font-size: clamp(31px, 4vw, 48px); max-width: 780px; }
.article-section > .lead { margin-top: 20px; max-width: 820px; }
.article-section > .prose { margin-top: 24px; max-width: 820px; }
.concept-callout { margin-top: 32px; padding: 30px; border-left: 4px solid var(--violet); background: var(--white); box-shadow: var(--shadow); }
.concept-callout strong { font-family: var(--serif); font-size: 21px; }
.concept-chain { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.concept-chain span { padding: 9px 13px; border: 1px solid var(--line); background: var(--white); border-radius: 999px; font-size: 12px; font-weight: 700; }
.concept-chain i { font-style: normal; color: var(--violet); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.info-card { min-height: 230px; padding: 26px; border: 1px solid var(--line); background: var(--white); border-radius: 14px; display: flex; flex-direction: column; }
.info-card h3 { font-size: 24px; }
.info-card p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.info-card a { margin-top: auto; padding-top: 24px; font-weight: 750; text-underline-offset: 4px; }
.info-card .number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--violet-pale); color: var(--violet); font-size: 12px; font-weight: 800; margin-bottom: 36px; }

.power-wheel { margin-top: 36px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.power { min-height: 220px; padding: 20px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 90px 90px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(255,255,255,.06); }
.power b { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-family: var(--serif); font-size: 20px; color: var(--solar); }
.power strong { margin-top: 24px; font-family: var(--serif); }
.power small { margin-top: 7px; color: rgba(255,255,255,.55); }
.power:nth-child(1), .power:nth-child(7) { border-color: rgba(239,184,63,.5); }

.mapping-list { margin-top: 34px; border-top: 1px solid var(--line); }
.mapping-row { display: grid; grid-template-columns: 1fr auto 1fr 1.3fr; gap: 22px; align-items: center; padding: 21px 0; border-bottom: 1px solid var(--line); }
.mapping-row strong { font-family: var(--serif); font-size: 20px; }
.mapping-row .map-arrow { color: var(--violet); font-size: 20px; }
.mapping-row p { color: var(--muted); font-size: 13px; }

.status-strip { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.status-card { padding: 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); }
.status-card b { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.status-card b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.status-card:nth-child(2) b::before { background: var(--solar); }
.status-card:nth-child(3) b::before { background: var(--muted); }
.status-card p { margin-top: 12px; font-size: 13px; color: var(--muted); }

.omega-demo { margin-top: 38px; padding: 34px; border-radius: var(--radius); background: var(--ink); color: white; }
.omega-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15); }
.omega-counter { background: var(--ink); padding: 24px; }
.omega-counter small { display: block; opacity: .54; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.omega-counter strong { display: block; font-family: var(--serif); font-size: 39px; margin-top: 8px; color: var(--solar); }
.omega-equation { margin: 24px 0 0; font-family: var(--serif); font-size: 22px; text-align: center; }

.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.resource-card { min-height: 320px; padding: 22px; border-radius: 12px; text-decoration: none; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); }
.resource-visual { height: 130px; margin: -8px -8px 24px; border-radius: 9px; position: relative; overflow: hidden; background: linear-gradient(145deg, var(--violet-deep), var(--coral)); }
.resource-visual::before, .resource-visual::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); }
.resource-visual::before { width: 86px; height: 86px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.resource-visual::after { width: 46px; height: 46px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(239,184,63,.35); }
.resource-card:nth-child(2) .resource-visual { background: linear-gradient(145deg, #c6aa7e, #302827); }
.resource-card:nth-child(3) .resource-visual { background: linear-gradient(145deg, #587e66, #d2bd84); }
.resource-card:nth-child(4) .resource-visual { background: linear-gradient(145deg, #425f7a, #d7d0bb); }
.resource-card small { text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: var(--violet); font-weight: 800; }
.resource-card h3 { font-size: 23px; margin-top: 13px; }
.resource-card p { color: var(--muted); font-size: 13px; margin-top: 10px; }
.resource-card span { margin-top: auto; padding-top: 24px; font-weight: 750; }

.recommendation-box { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.guide-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 24px 0; }
.guide-switch button { border: 0; background: transparent; padding: 9px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.guide-switch button.is-active { background: var(--ink); color: white; }
.guide-message { display: flex; gap: 16px; padding: 20px; background: var(--paper); border-radius: 12px; margin-bottom: 24px; }
.guide-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--solar); color: var(--ink); font-family: var(--serif); font-weight: 800; }
.guide-avatar.docteur { background: var(--ink); color: white; }
.guide-message p { font-family: var(--serif); font-size: 18px; }
.reading-stack { display: grid; gap: 10px; }
.reading-link { display: grid; grid-template-columns: 38px 1fr auto; gap: 15px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.reading-link:hover { border-color: var(--violet); }
.reading-rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--violet-pale); color: var(--violet); font-weight: 800; font-size: 11px; }
.reading-link strong { display: block; }
.reading-link small { color: var(--muted); }

.split-cta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; border-radius: var(--radius); overflow: hidden; }
.split-cta > div { padding: clamp(32px, 5vw, 62px); background: var(--violet); color: white; }
.split-cta > div:last-child { background: var(--ink); }
.split-cta h3 { font-size: 32px; }
.split-cta p { opacity: .72; margin: 14px 0 26px; }

.site-footer { padding: 70px max(var(--site-gouttiere), calc((100% - var(--site-largeur)) / 2)) 22px; background: var(--ink); color: white; }
.footer-brand { display: flex; gap: 18px; align-items: center; }
.brand-mark-light i { border-color: var(--solar); }
.footer-brand p { color: rgba(255,255,255,.65); font-size: 13px; }
.footer-brand strong { color: white; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 720px; margin: 60px 0 60px auto; }
.footer-links div { display: grid; gap: 8px; }
.footer-links strong { margin-bottom: 8px; color: var(--solar); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.footer-links a { color: rgba(255,255,255,.68); text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; display: flex; justify-content: space-between; color: rgba(255,255,255,.45); font-size: 11px; }

.reading-dialog { width: min(680px, calc(100% - 28px)); border: 0; border-radius: var(--radius); padding: 0; box-shadow: 0 30px 100px rgba(0,0,0,.35); background: var(--paper); }
.reading-dialog::backdrop { background: rgba(23,19,27,.74); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 16px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 22px; z-index: 2; }
.dialog-content { padding: 52px 44px 44px; }
.dialog-content h2 { font-size: 38px; }
.dialog-content .prose { margin-top: 24px; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 170px 1fr auto; gap: 15px; }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 11px; }
  .enter-button { padding-inline: 14px; }
  .path-grid { grid-template-columns: repeat(3, 1fr); }
  .path-card { border-bottom: 1px solid var(--line); }
  .path-card:nth-child(3) { border-right: 0; }
  .path-card:nth-child(4), .path-card:nth-child(5) { border-bottom: 0; }
  .power-wheel { grid-template-columns: repeat(4, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .books-layout { grid-template-columns: 1fr; }
  .books-copy { max-width: 760px; }
  .book-shelf { max-width: 780px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .festival-spotlight .shell { grid-template-columns: 150px 1fr; padding: 34px 0; }
  .festival-action { grid-column: 2; }
  .event-grid { grid-template-columns: 1fr 1fr; }
  .event-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .site-header { height: 66px; grid-template-columns: 1fr auto auto; }
  /* ⚠️ `padding-inline: 16px` retiré le 4 septembre : il désalignait l'en-tête
     de 4 px par rapport au contenu sur téléphone. La règle de base suffit. */
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 66px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 18px 22px; box-shadow: var(--shadow); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 12px 0; font-size: 15px; }
  .site-nav a::after { display: none; }
  .menu-toggle { display: flex; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer; }
  .menu-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }
  .menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .enter-button { min-height: 40px; font-size: 0; width: 42px; padding: 0; }
  .enter-button span { font-size: 18px; }
  .home-hero { min-height: auto; background: var(--paper); align-items: start; padding-top: 40px; }
  /* Le biseau est un aménagement desktop : en dessous de 820px, l'image redevient un bloc
     plein-largeur au-dessus du texte, sans coupe diagonale ni panneau de couleur séparé. */
  .hero-visual { position: static; top: auto; right: auto; bottom: auto; width: 100%; clip-path: none; margin: 0 0 28px; border-radius: 18px; overflow: hidden; }
  .hero-visual img { height: auto; aspect-ratio: 4 / 5; object-position: center; }
  .hero-copy { width: 100%; }
  .section-head, .intro-band .shell, .page-hero .shell { grid-template-columns: 1fr; gap: 28px; }
  .civilization-hero .hero-copy { width: 100%; }
  .quote-mark { width: 180px; }
  .ecosystem-orbit { width: min(78vw, 390px); justify-self: center; margin-top: 32px; }
  .festival-spotlight .shell { grid-template-columns: 125px 1fr; gap: 25px; }
  .festival-date strong { font-size: 68px; }
  .festival-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .festival-feature { grid-template-columns: 1fr; }
  .festival-feature-date { min-height: 220px; }
  .festival-feature-date small { align-self: flex-end; }
  .festival-facts { grid-template-columns: 1fr 1fr; }
  .agenda-news { grid-template-columns: 1fr; }
  .cycle-line { grid-template-columns: repeat(3, 1fr); }
  .cycle-line span:nth-child(3), .cycle-line b { border-right: 0; }
  .cycle-line span:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .dual-manifesto, .threshold-layout { grid-template-columns: 1fr; }
  .key-grid { grid-template-columns: repeat(2, 1fr); }
  .key-grid article, .key-grid article:nth-child(3n), .key-grid article:nth-child(n+4) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .key-grid article:nth-child(2n) { border-right: 0; }
  .key-grid article:nth-child(n+5) { border-bottom: 0; }
  .path-grid { grid-template-columns: 1fr 1fr; }
  .path-card { min-height: 300px; border-bottom: 1px solid var(--line); }
  .path-card:nth-child(2), .path-card:nth-child(4) { border-right: 0; }
  .path-card:nth-child(3) { border-right: 1px solid var(--line); }
  .path-card:nth-child(4) { border-bottom: 1px solid var(--line); }
  .path-card:nth-child(5) { border-bottom: 0; }
  .door-grid, .card-grid { grid-template-columns: 1fr; }
  .door-card { min-height: 260px; }
  .content-layout { grid-template-columns: 1fr; gap: 38px; }
  .on-page { position: static; display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .on-page strong { width: 100%; }
  .on-page a { padding: 0; }
  .mapping-row { grid-template-columns: 1fr auto 1fr; }
  .mapping-row p { grid-column: 1 / -1; }
  .status-strip, .omega-counters { grid-template-columns: 1fr; }
  .split-cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .prototype-bar { justify-content: flex-start; padding-right: 50px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark i { width: 29px; height: 15px; }
  .brand { font-size: 10px; }
  /* La gouttière se resserre sous 560 px : une seule ligne la change, et le
     contenu comme les deux bandeaux la suivent. */
  :root { --site-gouttiere: 14px; }
  .home-hero { min-height: auto; padding-top: 32px; }
  h1 { font-size: 45px; }
  .hero-copy .lead { font-size: 19px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .section-block { padding: 70px 0; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 245px; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .path-card:last-child { border-bottom: 0 !important; }
  .page-hero { padding-top: 64px; }
  .page-hero h1 { font-size: 47px; }
  .civilization-hero { min-height: auto; }
  .civilization-hero h1 { font-size: 40px; }
  .lead { font-size: 20px; }
  .ecosystem-orbit { width: min(88vw, 330px); }
  .ecosystem-orbit span { font-size: 9px; padding: 5px 8px; }
  .festival-spotlight .shell { grid-template-columns: 1fr; padding: 38px 0; }
  .festival-date { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 18px; }
  .festival-copy h2 { font-size: 38px; }
  .festival-action { grid-column: auto; display: grid; }
  .festival-feature-date { min-height: 190px; }
  .festival-feature-date strong { font-size: 86px; }
  .festival-feature-copy h2 { font-size: 47px; }
  .festival-facts, .event-grid { grid-template-columns: 1fr; }
  .event-card:last-child { grid-column: auto; }
  .event-card { min-height: 390px; }
  .cycle-line { grid-template-columns: 1fr 1fr; }
  .cycle-line span, .cycle-line b { min-height: 90px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cycle-line span:nth-child(2n), .cycle-line b { border-right: 0; }
  .cycle-line span:nth-child(5), .cycle-line b { border-bottom: 0; }
  .book-shelf { grid-template-columns: 1fr; gap: 18px; }
  .book-volume, .book-two { min-height: 320px; transform: none; }
  .key-grid, .proof-grid { grid-template-columns: 1fr; }
  .key-grid article, .key-grid article:nth-child(2n), .key-grid article:nth-child(n+5) { border-right: 0; border-bottom: 1px solid var(--line); }
  .key-grid article:last-child { border-bottom: 0; }
  .dual-manifesto article { min-height: 300px; padding: 28px; }
  .power-wheel { grid-template-columns: 1fr 1fr; }
  .power { min-height: 190px; }
  .resource-grid { grid-template-columns: 1fr; }
  .mapping-row { grid-template-columns: 1fr auto 1fr; gap: 9px; }
  .mapping-row strong { font-size: 16px; }
  .recommendation-box { padding: 22px; }
  .reading-link { grid-template-columns: 34px 1fr; }
  .reading-link > span:last-child { display: none; }
  .footer-links { grid-template-columns: 1fr; margin-left: 0; }
  .footer-bottom { display: grid; gap: 8px; }
  .dialog-content { padding: 52px 24px 30px; }
}

.ecosystem-cast { display: flex; flex-wrap: wrap; gap: 9px; margin: 32px 0 8px; }
.ecosystem-cast span { border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 750; letter-spacing: .04em; opacity: .78; }
.resource-preview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 38px 0 20px; }
.resource-preview-grid figure { position: relative; min-height: 210px; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.resource-preview-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05); transition: transform .35s ease; }
.resource-preview-grid figure:hover img { transform: scale(1.035); }
.resource-preview-grid figcaption { position: absolute; inset: auto 0 0; padding: 34px 14px 13px; color: white; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(transparent, rgba(18,12,17,.9)); }
@media (max-width: 900px) { .resource-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .resource-preview-grid figure { min-height: 155px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Site v3 — composants des huit pages de Textes.docx (2026-08-07)
   Décliné de la DA existante : mêmes variables, mêmes rythmes, mêmes familles.
   ========================================================================= */

/* Hero d'accueil en diptyque — reprend la composition de Homepage-textes.png :
   fragment sombre en haut à gauche sur la moitié claire, fragment clair en bas
   à droite sur la moitié sombre. L'image porte déjà la coupe centrale. */
/* Le hero est un fond pleine largeur sur lequel le diptyque est posé au centre, plafonné
   à 1200 px (demande Boris, 2026-08-08). Au-delà de cette largeur, seul le fond continue
   jusqu'aux bords : l'image ne s'étire plus indéfiniment.
   Ce fond est lui-même un diptyque (variante Boris du 2026-08-08) : crème à gauche, brun
   sombre à droite, coupé à 50 %. Avec cover + center, la mise à l'échelle est uniforme et
   centrée : la coupure du fond retombe TOUJOURS sur le centre de la section, donc sur celle
   du cadre (margin-inline: auto). L'alignement est exact par construction, pas par réglage. */
.diptych-hero { position: relative; background: var(--paper) url("/site/assets/home/bg-home.jpg") center / cover no-repeat; }
/* Le troisième terme (128vh = 82vh × ratio 1,5625, marge gardee pour l en-tete) réduit la largeur du cadre quand l'écran
   est trop court, au lieu de recadrer l'image en hauteur. Le recadrage rognait précisément les
   coins libres où se logent les deux fragments : sur un 1400×680 ils retombaient sur les globes.
   Ici la composition reste toujours entière, et c'est la texture qui gagne de la place. */
.diptych-frame { position: relative; width: min(1200px, 100%, 128vh); margin-inline: auto; container-type: inline-size; }
.diptych-visual { display: block; }
.diptych-visual img { width: 100%; height: auto; display: block; }

/* Les deux fragments sont désormais positionnés dans .diptych-frame, pas dans la section :
   ils suivent ainsi les bords de l'image et non ceux de l'écran. */

/* Plus de hauteur imposée ni d'object-fit : l'image garde toujours son ratio, la contrainte est
   portée par la largeur du cadre ci-dessus. Le recadrage rognait précisément les coins libres.

   Zones libres mesurées sur l'image (échantillonnage canvas de la luminance, ligne par ligne) :
   le globe sombre de gauche ne monte pas au-dessus de y=17 % ; le globe clair de droite ne
   descend pas sous y=81 %. Chaque fragment doit donc tenir dans ces bandes, dans un coin qui se
   rétrécit en s'éloignant du bord.

   Tout est en unités de conteneur (cqw), jamais en vw : sur un écran large mais court, le cadre
   rétrécit alors que le viewport reste grand ; une police en vw restait grosse, le texte gagnait
   une ligne et retombait sur les globes. En cqw la mise en page est invariante d'échelle —
   mesurée identique à 2000×900, 1400×680, 1250×820 et 900×620.

   Boris a écarté la solution du halo (text-shadow) : texte plus petit et collé aux coins. */
.diptych-line { position: absolute; margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; width: min(34cqw, 400px); }
.diptych-a { top: 2cqw; left: 2cqw; color: var(--ink); font-size: clamp(17px, 2.4cqw, 29px); }
.diptych-b { bottom: 2cqw; right: 2cqw; color: #f6efe2; text-align: right; font-size: clamp(17px, 2.4cqw, 29px); }

.home-manifesto { padding: clamp(48px, 6vw, 84px) 0 clamp(28px, 4vw, 48px); }
.home-manifesto .lead { font-size: clamp(19px, 1.7vw, 25px); max-width: 900px; }

/* Rythme éditorial commun aux pages de niveau 2 */
.alt-band { background: var(--paper-2); }
.narrow > p { margin-bottom: 22px; }
.narrow > h2 { margin-bottom: 18px; }
.statement { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 27px); line-height: 1.4; color: var(--violet-deep); border-left: 3px solid var(--solar); padding-left: 22px; margin: 32px 0; }
.statement.big { font-size: clamp(22px, 2.4vw, 34px); border-left: 0; padding-left: 0; text-align: center; color: var(--ink); }
.statement.small { font-size: 17px; margin: 20px 0; }
.prose-columns { display: grid; gap: 26px; margin: 30px 0; }
@media (min-width: 860px) { .prose-columns { grid-template-columns: 1fr 1fr; gap: 40px; } }

.figure-wide { margin: 40px 0; }
.figure-wide img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.figure-wide figcaption, .figure-inset figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.figure-inset img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
/* Le Moteur n'est plus un JPEG mais le SVG anime repris de l'appli : mêmes cadre et rayon que
   les autres figures, mais le fond est porté par le dégradé interne du SVG. */
.figure-moteur .moteur-svg { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); }
.enter-visual.figure-moteur .moteur-svg { border-color: rgba(255,255,255,.18); }

/* Planche verticale (seuils.png, format portrait) : plafonnée pour ne pas occuper deux écrans. */
.figure-portrait { margin: 40px auto; max-width: 620px; }
.figure-portrait img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
/* Les trois tomes, au-dessus de l'extrait, dans la colonne de droite du bloc « livres ». */
.book-shelf-visual { width: 100%; height: auto; display: block; border-radius: var(--radius); margin-bottom: 22px; }
/* Accueil, bloc « Le Jeu » : le Moteur animé et la fleur de vie des Puissances, l'un sous l'autre. */
.jeu-teaser-visuals { display: grid; gap: 26px; align-content: start; }

/* ---- Moteur d'une organisation (page Agir) ---------------------------------------------------
   Deux colonnes de qualités encadrent le schéma ; le fond sombre/clair les prolonge, comme dans
   Moteur-organisation.png. Les mots restent du vrai texte, pas des pixels. */
.moteur-orga { margin: 40px 0; }
.moteur-orga .mo-grid { display: grid; grid-template-columns: 1fr minmax(0, 2.1fr) 1fr; align-items: center; gap: 0; border-radius: var(--radius); overflow: hidden; background: linear-gradient(90deg, #131018 0 50%, #f4eee5 50% 100%); }
.moteur-orga .mo-side { padding: 26px clamp(14px, 2vw, 30px); font-size: 14px; line-height: 1.7; }
.moteur-orga .mo-side ul { list-style: none; margin: 0; padding: 0; }
.moteur-orga .mo-axis { margin: 14px 0; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.moteur-orga .mo-ombre { color: rgba(255,255,255,.86); }
.moteur-orga .mo-ombre .mo-axis { color: #ffffff; }
.moteur-orga .mo-lumiere { color: var(--ink-2); text-align: right; }
.moteur-orga .mo-lumiere .mo-axis { color: var(--ink); }
.moteur-orga .mo-visual { align-self: stretch; display: flex; }
.moteur-orga .moteur-svg { width: 100%; height: auto; align-self: center; border: 0; border-radius: 0; }
.moteur-orga figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---- « Tes puissances en mouvement » (page Le Jeu) ------------------------------------------- */
/* Largeur plafonnée : sans cela, sur un shell de 1180 px chaque ligne fait 158 px de haut et le
   bloc dépasse 1000 px — l'appli les montre dans une carte d'environ 700 px. */
.pz-puissances { margin: 40px auto; display: grid; gap: 10px; max-width: 860px; }
.pz-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 18px; }
.pz-row-name { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.pz-row svg { width: 100%; height: auto; display: block; }
.pz-puissances figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--muted); }

@media (max-width: 820px) {
  .moteur-orga .mo-grid { grid-template-columns: 1fr; background: none; }
  .moteur-orga .mo-visual { order: -1; background: linear-gradient(90deg, #131018 0 50%, #f4eee5 50% 100%); }
  .moteur-orga .mo-ombre { background: #131018; }
  .moteur-orga .mo-lumiere { background: #f4eee5; text-align: left; }
  .pz-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Cartes des cinq parcours */
.parcours-grid { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .parcours-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .parcours-grid { grid-template-columns: repeat(3, 1fr); } }
.parcours-card { position: relative; padding: 30px 26px 34px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.parcours-card::before { content: attr(data-index); position: absolute; right: 18px; top: 14px; font-family: var(--serif); font-size: 58px; line-height: 1; color: rgba(130,36,111,.08); }
.parcours-card h3 { font-size: 20px; max-width: 88%; }
.parcours-meta { margin: 10px 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.omega-todo { color: var(--coral); font-weight: 700; }
.parcours-card p:not(.parcours-meta) { font-size: 15px; color: var(--muted); }
.parcours-badge { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--violet); border: 1px solid var(--violet-pale); background: var(--violet-pale); border-radius: 20px; padding: 5px 13px; }
.parcours-card { color: inherit; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.parcours-card:hover, .parcours-card:focus-visible { background: var(--violet-deep); color: var(--white); transform: translateY(-3px); outline: none; }
.parcours-card:hover p, .parcours-card:focus-visible p { color: rgba(255,253,248,.76); }
.parcours-card:hover .parcours-badge, .parcours-card:focus-visible .parcours-badge { color: var(--ink); background: var(--solar); border-color: var(--solar); }
.parcours-go { display: block; margin-top: 16px; font-size: 13px; font-weight: 800; color: var(--violet); }
.parcours-card:hover .parcours-go, .parcours-card:focus-visible .parcours-go { color: var(--solar); }
.parcours-note { margin-top: 22px; }

/* Placeholders assumés — contenu attendu, pas encore transmis */
.excerpt-placeholder { margin: 0; padding: 26px 28px; border: 1px dashed rgba(255,255,255,.4); border-radius: var(--radius); }
.excerpt-placeholder.light { border-color: var(--line); background: var(--white); margin: 36px 0; }
.placeholder-note { font-size: 14px; font-style: italic; opacity: .8; }
.link-todo { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 750; color: var(--muted); border-bottom: 1px dashed currentColor; }

/* Trois / quatre niveaux d'action */
.niveau-grid { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 860px) { .niveau-grid { grid-template-columns: repeat(3, 1fr); } }
.niveau-card { border: 1px solid var(--line); border-top: 4px solid var(--violet); border-radius: 0 0 var(--radius) var(--radius); background: var(--white); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.niveau-num { font-family: var(--serif); font-size: 13px; letter-spacing: .18em; color: var(--solar); font-weight: 700; }
.niveau-card h3 { font-size: 19px; }
.niveau-card p { font-size: 15px; color: var(--muted); flex: 1; }

/* Bandeaux de polarités */
.polarity-band { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0; justify-content: center; }
.polarity-band span { border: 1px solid var(--line); border-radius: 24px; padding: 9px 18px; font-size: 14px; background: var(--white); }
.polarity-band b { color: var(--coral); font-weight: 700; padding: 0 3px; }

/* Listes d'oppositions */
.opposition-list { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.opposition-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; background: var(--white); padding: 13px 18px; font-size: 15px; }
.opposition-list span { color: var(--muted); }
.opposition-list b { font-family: var(--serif); color: var(--violet-deep); }
.opposition-list.inverted b { color: var(--coral); }

.question-list { counter-reset: q; list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.question-list li { counter-increment: q; position: relative; padding-left: 44px; font-family: var(--serif); font-size: 18px; }
.question-list li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-pale); color: var(--violet-deep); display: grid; place-items: center; font-size: 13px; font-family: var(--sans); font-weight: 800; }

.inline-questions { margin: 16px 0; padding-left: 20px; display: grid; gap: 8px; }
.inline-questions li { font-size: 15px; color: var(--muted); font-style: italic; }

.fractal-list { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 12px; }
.fractal-list li { padding: 14px 20px; border-left: 3px solid var(--violet); background: var(--white); font-size: 16px; }

/* Grille des contradictions d'organisation */
.contradiction-grid { display: grid; gap: 14px; margin: 36px 0; }
@media (min-width: 720px) { .contradiction-grid { grid-template-columns: repeat(4, 1fr); } }
.contradiction-grid article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 20px; }
.contradiction-grid h3 { font-size: 15px; color: var(--coral); }
.contradiction-grid p { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Sept Puissances */
.puissance-layout { display: grid; gap: 32px; margin: 40px 0; align-items: center; }
@media (min-width: 880px) { .puissance-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.puissance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.puissance-list li { background: var(--white); padding: 13px 18px; font-size: 15px; color: var(--muted); }
.puissance-list b { font-family: var(--serif); color: var(--ink); font-size: 16px; display: inline-block; min-width: 148px; }

/* Oméga */
.omega-layout { display: grid; gap: 36px; align-items: center; }
@media (min-width: 880px) { .omega-layout { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); } }

.ingenierie-grid { margin-top: 36px; }

/* Ressourcerie — pile de familles */
.ressource-stack { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.ressource-row { display: grid; gap: 22px; padding: 34px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .ressource-row { grid-template-columns: 110px 1fr; gap: 34px; } }
.ressource-num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--violet-pale); }
.ressource-row h3 { font-size: 22px; margin-bottom: 12px; }
.ressource-row p { font-size: 15.5px; color: var(--muted); margin-bottom: 12px; }

/* Agenda — formats */
.format-stack { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.format-row { display: grid; gap: 22px; padding: 34px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .format-row { grid-template-columns: 150px 1fr; gap: 34px; } }
.format-tag { display: flex; flex-direction: column; gap: 4px; }
.format-tag b { font-family: var(--serif); font-size: 21px; color: var(--violet); }
.format-tag span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.format-row h3 { font-size: 21px; margin-bottom: 12px; }
.format-row p { font-size: 15.5px; color: var(--muted); margin-bottom: 12px; }

/* Duo Ressourcerie / Agenda sur l'accueil */
.split-duo { display: grid; gap: 20px; }
@media (min-width: 860px) { .split-duo { grid-template-columns: 1fr 1fr; } }
.duo-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 34px 30px; }
.duo-card h2 { font-size: 24px; margin-bottom: 16px; }
.duo-card p { font-size: 15.5px; color: var(--muted); margin-bottom: 14px; }

.jeu-teaser-layout { display: grid; gap: 36px; align-items: center; }
@media (min-width: 880px) { .jeu-teaser-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
.jeu-teaser { background: var(--ink); color: var(--white); }
.jeu-teaser h2, .jeu-teaser .lead { color: var(--white); }
.jeu-teaser p { color: rgba(255,253,248,.8); }
.jeu-teaser .figure-inset img { border-color: rgba(255,255,255,.2); }

/* Page de connexion au Jeu */
.enter-hero { background: var(--ink); color: var(--white); padding: clamp(56px, 8vw, 110px) 0; }
.enter-layout { display: grid; gap: 44px; align-items: center; }
@media (min-width: 880px) { .enter-layout { grid-template-columns: minmax(0,1fr) minmax(0,.95fr); } }
.enter-copy h1 { color: var(--white); font-size: clamp(34px, 4vw, 56px); }
.enter-copy h1 span { display: block; color: var(--solar); }
.enter-copy .lead { color: rgba(255,253,248,.82); margin-top: 18px; }
.enter-form { margin-top: 32px; display: grid; gap: 14px; max-width: 400px; }
.enter-form label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,253,248,.7); }
.enter-form input { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: var(--white); border-radius: 10px; padding: 13px 15px; font-size: 15px; font-family: inherit; }
.enter-alt { font-size: 14px; color: rgba(255,253,248,.7); }
.enter-alt .link-todo { color: var(--solar); }
.light-note { color: rgba(255,253,248,.5) !important; }
.enter-visual img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); background: var(--white); }

/* Repli mobile : le diptyque perd sa mise en page absolue */
@media (max-width: 820px) {
  /* En dessous du repli, les deux fragments passent sous l'image sur fond uni : la texture
     papier derrière eux devenait un bloc beige inutile, et le halo n'a plus de raison d'être. */
  .diptych-hero { background: var(--paper); }
  .diptych-line { position: static; width: 100%; }
  .diptych-a { padding: 26px 20px 0; font-size: 27px; }
  .diptych-b { padding: 14px 20px 0; text-align: left; color: var(--violet-deep); font-size: 24px; }
  .parcours-card { border-right: 0; }
  .statement { padding-left: 16px; }
}

/* =============================================================================================
   V4 — une grammaire de lecture commune à tout le site.
   Crème : comprendre. Noir : rencontrer l'Ombre ou la contradiction. Violet : franchir un seuil
   et relier les éléments dans la grammaire Point Zéro. L'or reste réservé aux pivots et aux CTA.
   =========================================================================================== */
.band-cream { background: var(--paper); color: var(--ink); }
.band-shadow, .band-violet { position: relative; overflow: hidden; isolation: isolate; }
.band-shadow::before, .band-violet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42;
  background-image: linear-gradient(60deg, transparent 49.75%, rgba(239,184,63,.18) 50%, transparent 50.25%), linear-gradient(-60deg, transparent 49.75%, rgba(239,184,63,.12) 50%, transparent 50.25%);
  background-size: 84px 146px;
}
.band-shadow { background: #151117; color: var(--white); }
.band-violet { background: linear-gradient(135deg, var(--violet-deep), #76205f 62%, #32102a); color: var(--white); }
.band-shadow h2, .band-shadow h3, .band-shadow .lead, .band-shadow .statement,
.band-violet h2, .band-violet h3, .band-violet .lead, .band-violet .statement { color: var(--white); }
.band-shadow p, .band-shadow li, .band-violet p, .band-violet li { color: rgba(255,253,248,.78); }
.band-shadow .eyebrow, .band-violet .eyebrow { color: var(--solar); }
.band-shadow .statement, .band-violet .statement { border-left-color: var(--solar); }
.band-shadow .text-link, .band-violet .text-link { color: var(--solar); }
.band-shadow .figure-wide figcaption, .band-violet .figure-wide figcaption,
.band-shadow .figure-inset figcaption, .band-violet .figure-inset figcaption { color: rgba(255,253,248,.6); }
.band-shadow .figure-wide img, .band-violet .figure-wide img,
.band-shadow .figure-inset img, .band-violet .figure-inset img { border-color: rgba(255,255,255,.2); }
.band-shadow .niveau-card, .band-violet .niveau-card,
.band-shadow .contradiction-grid article, .band-violet .contradiction-grid article,
.band-shadow .duo-card, .band-violet .duo-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.band-shadow .niveau-card p, .band-violet .niveau-card p,
.band-shadow .contradiction-grid p, .band-violet .contradiction-grid p,
.band-shadow .duo-card p, .band-violet .duo-card p { color: rgba(255,253,248,.72); }
.band-shadow .opposition-list, .band-violet .opposition-list { border-color: rgba(239,184,63,.34); background: rgba(239,184,63,.34); box-shadow: 0 18px 44px rgba(12,7,12,.18); }
.band-shadow .opposition-list li, .band-violet .opposition-list li,
.band-shadow .fractal-list li, .band-violet .fractal-list li { background: rgba(255,255,255,.07); color: rgba(255,253,248,.82); }
.band-shadow .opposition-list li, .band-violet .opposition-list li { background: rgba(255,253,248,.95); color: var(--ink); }
.band-shadow .opposition-list span, .band-violet .opposition-list span { color: #4f4650; font-weight: 500; }
.band-shadow .opposition-list b, .band-violet .opposition-list b { color: var(--violet-deep); }
.band-shadow .opposition-list.inverted b, .band-violet .opposition-list.inverted b { color: #a92e4c; }
.band-shadow .format-row, .band-violet .format-row,
.band-shadow .ressource-row, .band-violet .ressource-row { border-color: rgba(255,255,255,.17); }
.band-shadow .format-row p, .band-violet .format-row p,
.band-shadow .ressource-row p, .band-violet .ressource-row p { color: rgba(255,253,248,.72); }
.band-shadow .format-tag b, .band-violet .format-tag b,
.band-shadow .ressource-num, .band-violet .ressource-num { color: var(--solar); }
.band-shadow .polarity-band span, .band-violet .polarity-band span { color: var(--ink); }

/* Covers : le texte reprend la couleur du papier sur les fonds sombres et l'encre ailleurs. */
.cover-point-zero h1 { color: var(--white); }
.cover-comprendre h1, .cover-agir h1, .cover-jeu h1, .cover-ressources h1, .cover-actualites h1 { color: var(--ink); }
.page-cover h1 { text-wrap: balance; }

@media (max-width: 900px) {
  .page-cover { --cover-pad: 42px; min-height: 0; }
  .page-cover .cover-copy { width: min(100%, 640px); padding-right: 92px; }
  .page-cover h1 { font-size: clamp(34px, 9vw, 48px); }
  .page-cover .lead { font-size: 17px; }
  .page-cover .hero-aside { margin-top: 24px; }
  .cover-illu { position: absolute; display: block; top: -28px; right: -28px; width: 160px; height: 160px; margin: 0; opacity: .30; object-fit: contain; }
}

@media (max-width: 560px) {
  .page-cover { --cover-pad: 34px; }
  .page-cover .cover-copy { padding-right: 0; }
  .page-cover h1 { max-width: 92%; }
  .cover-illu { width: 128px; height: 128px; top: -24px; right: -22px; opacity: .22; }
  .page-cover .eyebrow { padding-right: 86px; }
  .parcours-card { min-height: 0; }
}

/* Le QR de secours du billet (F9 festival-lier). */
.billet-qr { margin: 24px 0; text-align: center; }
.billet-qr svg { max-width: 260px; height: auto; }
.billet-qr-mention { font-size: 13px; color: #6b6469; max-width: 320px;
  margin: 8px auto 0; }