/* rano.mg : direction artistique « Lumière du matin ». Palette : docs/univers.md.
   Texte en encre (ou crème sur le pied de page) ; turquoise, terre, vert et soleil pour les aplats et graphismes. */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  src: url("/fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --encre: #0b2e36;
  --teal: #0b4c57;
  --turq: #2aa7b0;
  --eau: #d6f0ec;
  --terre: #d9541e;
  --riz: #5a8a2e;
  --soleil: #f2b43c;
  --sable: #f6e7cb;
  --creme: #fff8ea;
  --brun: #2b1a12;
  --corps: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --voix: "Newsreader", Georgia, "Times New Roman", serif;
  --rayon: 18px 22px 16px 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--corps); font-size: 1.0625rem; line-height: 1.65; }
body.menu-ouvert { overflow: hidden; }
img, svg { max-width: 100%; }
.defs { position: absolute; width: 0; height: 0; }
a { color: var(--teal); text-decoration-thickness: 2px; text-decoration-color: var(--soleil); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--terre); }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible { outline-color: var(--soleil); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--encre); color: var(--creme); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typographie : casse normale, chaleureuse */
h1, h2, h3 { color: var(--encre); font-weight: 750; font-stretch: 92%; letter-spacing: -.015em; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); line-height: 1.02; margin: 0 0 .35em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; margin: 0 0 .5em; }
h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .35em; font-weight: 700; }
.voix { font-family: var(--voix); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.4; margin: 0 0 1em; }
.grand { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.3; font-weight: 500; }
.meta { font-size: .92rem; margin: .2rem 0 .6rem; color: var(--teal); }
.vide { font-family: var(--voix); font-style: italic; font-size: 1.15rem; }
.note { font-size: .88rem; color: var(--teal); }
.a-renseigner { background: #fde9b4; border: 2px dashed var(--soleil); border-radius: 6px; padding: 0 6px; font-style: italic; font-size: .95em; white-space: nowrap; }

/* Boutons et liens */
.btn { display: inline-block; background: var(--encre); color: var(--creme); border: 2px solid var(--encre); border-radius: var(--rayon); padding: .8em 1.35em; font: 650 1rem/1.1 var(--corps); text-decoration: none; margin: 4px 8px 8px 0; cursor: pointer; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); background: var(--teal); border-color: var(--teal); }
.btn-sec { background: transparent; color: var(--encre); }
.btn-sec:hover { background: var(--soleil); border-color: var(--encre); color: var(--encre); }
.btn[hidden] { display: none; }
.lien-fleche { font-weight: 650; color: var(--encre); text-decoration: none; background: linear-gradient(var(--soleil), var(--soleil)) 0 100% / 100% 6px no-repeat; padding-bottom: 2px; transition: background-size .3s; }
.lien-fleche::after { content: " \2192"; display: inline-block; transition: transform .2s; }
.lien-fleche:hover { background-size: 100% 100%; }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-retour::after { content: none; }
.lien-retour::before { content: "\2190 "; }

/* En-tête */
.site-header { position: relative; z-index: 20; background: var(--sable); }
.page-accueil .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; order: 3; }
.site-header nav { order: 2; }
.recherche-bouton { width: 44px; height: 44px; display: inline-grid; place-items: center; background: var(--creme); border: 2px solid var(--encre); border-radius: 50%; cursor: pointer; padding: 0; color: var(--encre); }
.recherche-bouton .icone { width: 26px; height: 26px; background: none; padding: 0; color: var(--encre); }
.logo { font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; color: var(--encre); text-decoration: none; line-height: 1; }
.logo span { color: var(--terre); }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.site-header nav a { display: flex; flex-direction: column; color: var(--encre); text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; line-height: 1.15; }
.nav-nom { font-weight: 700; font-size: .98rem; }
.nav-sous { font-size: .74rem; color: var(--teal); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { border-bottom-color: var(--soleil); }
.site-header nav .nav-marche { border: 2px solid var(--encre); border-radius: var(--rayon); padding: 6px 12px; background: var(--creme); }
.menu-bouton { display: none; }
@media (min-width: 1000px) and (max-width: 1199px) { .nav-sous { display: none; } .site-header nav { gap: 4px 12px; } }
@media (min-width: 1000px) {
  .site-header nav { gap: 4px 14px; }
  .nav-nom { font-size: .9rem; }
  .nav-sous { font-size: .66rem; }
  .site-header nav .nav-marche { padding: 5px 10px; }
}
@media (max-width: 999px) {
  .js .menu-bouton { display: inline-block; background: var(--creme); color: var(--encre); border: 2px solid var(--encre); border-radius: var(--rayon); padding: 8px 16px; font: 650 .95rem var(--corps); cursor: pointer; position: relative; z-index: 40; }
  .js .site-header nav { display: none; }
  body.menu-ouvert .site-header nav { display: flex; position: fixed; inset: 0; z-index: 30; background: var(--sable); flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 90px 26px 40px; overflow-y: auto; }
  body.menu-ouvert .nav-nom { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  body.menu-ouvert .nav-sous { font-size: .95rem; }
  body.menu-ouvert .site-header .logo, body.menu-ouvert .menu-bouton { position: relative; z-index: 40; }
  body:not(.js) .site-header .header-in { flex-wrap: wrap; }
}

/* Vagues et motifs */
.vague { position: absolute; left: 0; width: 100%; height: clamp(26px, 4vw, 58px); bottom: -1px; z-index: 2; overflow: hidden; pointer-events: none; }
.vague svg { display: block; max-width: none; width: 200%; height: 100%; animation: houle-bande 22s linear infinite; }
.vague--haut svg { animation-duration: 28s; animation-direction: reverse; }
@keyframes houle-bande { to { transform: translateX(-50%); } }
.vague--haut { top: -1px; bottom: auto; }
.site-footer .vague path { fill: var(--creme); }
.motif { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Bandeau Marché */
.banniere-marche { background: var(--creme); border-bottom: 3px solid var(--terre); font-size: .9rem; }
.banniere-marche p { margin: 0; padding: 10px 0; }

/* En-tête de page interne */
.entete { position: relative; background: var(--sable); padding: 54px 0 92px; overflow: hidden; }
.entete::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--sable) 38%, rgba(246, 231, 203, .2) 100%); }
.entete-in { position: relative; z-index: 3; }
.entete h1 { max-width: 18ch; }
.entete-sous { font-weight: 650; color: var(--teal); margin: -.2em 0 .6em; font-size: 1.1rem; }
.entete-lead { font-family: var(--voix); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.45rem); max-width: 46ch; margin: 0; }
.entete-meta { font-size: .95rem; margin: 0 0 .6em; }
@media (max-width: 700px) { .entete::before { background: rgba(246, 231, 203, .82); } }

/* Contenu */
.papier { background: var(--creme); }
main.papier { padding-top: 26px; padding-bottom: 76px; min-height: 40vh; }
.article { max-width: 68ch; }
.article h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-top: 1.6em; }
.article p, .article li { line-height: 1.75; }
.article blockquote { margin: 1.4em 0; padding: .6em 1.2em; background: var(--sable); border-left: 6px solid var(--soleil); border-radius: 0 14px 14px 0; }
.article blockquote p { margin: .3em 0; }
.article table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .97rem; }
.article th, .article td { border-bottom: 1px solid #e2cfa7; padding: 10px 12px; text-align: left; vertical-align: top; }
.article th { border-bottom: 2px solid var(--encre); }
.article code { background: var(--sable); padding: 1px 6px; border-radius: 4px; font-size: .9em; }

.grille { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 18px 0 30px; }
.carte-bloc { border-top: 4px solid var(--soleil); padding: 16px 2px 8px; }
.carte-bloc:nth-child(3n+2) { border-top-color: var(--turq); }
.carte-bloc:nth-child(3n) { border-top-color: var(--terre); }
.carte-bloc h3 a { color: var(--encre); text-decoration: none; }
.carte-bloc h3 a:hover { text-decoration: underline; text-decoration-color: var(--soleil); }
.carte-lien { display: block; color: var(--encre); text-decoration: none; }
.carte-lien:hover h3 { text-decoration: underline; text-decoration-color: var(--soleil); }
.badge { display: inline-block; font-size: .78rem; font-weight: 650; padding: 2px 10px; border: 2px solid var(--encre); border-radius: 999px; margin: 0 0 8px; }
.badge-verifie { background: var(--encre); color: var(--creme); }
.badge-une { background: var(--soleil); }
.tag-sponsor { display: inline-block; font-size: .75rem; font-weight: 650; background: var(--soleil); border-radius: 999px; padding: 0 9px; vertical-align: middle; }
.tag-fiction { display: inline-block; font-size: .75rem; font-weight: 650; background: var(--eau); border: 1px dashed var(--teal); border-radius: 999px; padding: 0 9px; vertical-align: middle; }
.bandeau-fiction { background: var(--eau); border-left: 6px solid var(--teal); padding: 12px 16px; border-radius: 0 12px 12px 0; font-size: .93rem; }
.mention-fiche, .bandeau-sponsor { background: var(--sable); border-left: 6px solid var(--terre); padding: 12px 16px; border-radius: 0 12px 12px 0; font-size: .93rem; }
.contacts { margin: 20px 0; }
.fiche-page { max-width: 62ch; }

/* ---------- Accueil : lever du jour ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; --p: .25; }
.ciel { position: absolute; inset: 0; z-index: 0; }
.ciel-base { background: linear-gradient(180deg, #f6a98d 0%, #f9c9a8 38%, #fde3b8 70%, #fff3d9 100%); }
.ciel-jour { background: linear-gradient(180deg, #8fd3dc 0%, #c4ebe8 42%, #fdf0d0 78%, #fff6e3 100%); opacity: var(--p); }
.soleil { position: absolute; z-index: 0; width: clamp(230px, 32vw, 460px); aspect-ratio: 1; border-radius: 50%; right: 9vw; bottom: 22vh; background: radial-gradient(circle, #fffdf0 0 22%, #fff0a8 42%, #ffd85c 62%, #f7b93a 70%, rgba(247, 185, 58, 0) 71%); box-shadow: 0 0 60px 18px rgba(255, 238, 160, .75), 0 0 200px 90px rgba(255, 214, 102, .42); transform: translateY(calc((1 - var(--p)) * 38%)); }
.soleil::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 232, 140, .5) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 64%, rgba(0, 0, 0, .5) 78%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 60%, #000 64%, rgba(0, 0, 0, .5) 78%, transparent 100%);
  animation: rayons 120s linear infinite; }
@keyframes rayons { to { transform: rotate(360deg); } }
.moment-soir .soleil::before { opacity: .45; }
.ondes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-in { position: relative; z-index: 3; display: grid; padding-top: 100px; padding-bottom: clamp(120px, 20vh, 200px); }
.hero-texte { max-width: 760px; position: relative; z-index: 4; }
.hero h1 { font-size: clamp(2.4rem, min(7vw, 9.5vh), 5rem); line-height: 1.02; }
.hero-lead { font-family: var(--voix); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; max-width: 40ch; margin: 0 0 1.2em; }
.hero-nora { position: absolute; z-index: 3; right: clamp(0px, 8vw, 140px); bottom: clamp(70px, 12vh, 130px); background: none; border: 0; padding: 0; cursor: pointer; }
.nora-hero { height: clamp(220px, 40vh, 440px); width: auto; display: block; }
.collines { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(120px, 22vh, 240px); z-index: 2; display: block; }
@media (max-width: 760px) {
  .hero-in { padding-bottom: 32vh; }
  .hero-nora { right: 4vw; bottom: 9vh; }
  .nora-hero { height: 24vh; }
  .soleil { right: -12vw; bottom: 30vh; width: 62vw; }
}

/* Pourquoi */
.pourquoi { padding: 40px 0 90px; }
.pourquoi-grille { display: grid; gap: 10px 60px; }
@media (min-width: 900px) { .pourquoi-grille { grid-template-columns: 4fr 7fr; } }
.pourquoi-texte p { max-width: 56ch; }
.pourquoi strong { background: linear-gradient(transparent 58%, #fde3a1 58%); }

/* ---------- Voyage ---------- */
.voyage { position: relative; background: var(--eau); padding: 80px 0 100px; }
.voyage-in { display: grid; gap: 0; }
.voyage-carte { align-self: start; position: sticky; top: 0; height: 40svh; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6px; background: linear-gradient(var(--eau) 85%, rgba(214, 240, 236, 0)); }
.carte-cadre { height: calc(100% - 24px); display: flex; justify-content: center; }
.carte { height: 100%; width: auto; overflow: visible; }
.carte-note { margin: 0; font-size: .76rem; color: var(--teal); }
.ile { fill: url(#terre-ile); stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; }
.houle use { fill: none; stroke: var(--turq); stroke-linejoin: round; }
.houle-1 { stroke-width: 16; stroke-opacity: .28; animation: houle 5s ease-in-out infinite; }
.houle-2 { stroke-width: 34; stroke-opacity: .14; animation: houle 5s ease-in-out -1.6s infinite; }
.houle-3 { stroke-width: 58; stroke-opacity: .07; animation: houle 5s ease-in-out -3.2s infinite; }
@keyframes houle { 50% { stroke-width: 26; stroke-opacity: .2; } }
.riviere { fill: none; stroke: var(--turq); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.riviere-flux { fill: none; stroke: var(--creme); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 22; animation: flux 2.4s linear infinite; pointer-events: none; }
.lac { fill: var(--turq); stroke: var(--teal); stroke-width: 1.5; }
@keyframes flux { to { stroke-dashoffset: -25; } }
.route-base { fill: none; stroke: var(--creme); stroke-width: 6; stroke-dasharray: 2 12; stroke-linecap: round; }
.route { fill: none; stroke: var(--terre); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.5, 0, .2, 1); }
.ville circle { fill: var(--encre); }
.ville text { fill: var(--encre); font-size: 14px; font-weight: 650; paint-order: stroke; stroke: var(--creme); stroke-width: 4px; }
.station { cursor: pointer; }
.station-halo { fill: var(--soleil); fill-opacity: 0; transition: fill-opacity .4s; }
.station-point { fill: var(--creme); stroke: var(--encre); stroke-width: 3; transition: fill .4s; }
.station-num { font-size: 12px; font-weight: 800; fill: var(--encre); pointer-events: none; }
.station-nom { font-size: 17px; font-weight: 750; fill: var(--encre); paint-order: stroke; stroke: var(--creme); stroke-width: 5px; stroke-linejoin: round; }
.station.is-vue .station-point { fill: var(--soleil); }
.station.is-active .station-halo { fill-opacity: .55; animation: pouls 1.6s ease-in-out infinite; }
.station:focus-visible { outline: none; }
.station:focus-visible .station-halo { fill-opacity: .8; }
@keyframes pouls { 50% { fill-opacity: .2; } }
.epingle path { fill: var(--terre); stroke: var(--creme); stroke-width: 2; }
.epingle circle { fill: var(--creme); }
.epingle:hover path { fill: var(--teal); }
@media (min-width: 900px) {
  .voyage-in { grid-template-columns: minmax(320px, 5fr) 6fr; gap: 56px; }
  .voyage-carte { height: 86vh; top: 7vh; background: none; }
}
@media (max-width: 899px) {
  .voyage { padding-top: 56px; }
  .voyage-carte { height: 60svh; margin: 0 -18px; padding-top: 0; background: var(--eau); box-shadow: 0 14px 14px -6px var(--eau); }
  .voyage-carte .carte-note, .voyage-carte .carte-saison { display: none !important; }
  .voyage-notes { margin-top: 28px; display: grid; gap: 8px; }
  .carte-cadre { height: calc(100% - 20px); width: 100%; }
  .carte { width: 100%; height: 100%; }
  .station-nom { display: none; }
  .station.is-active .station-nom { display: inline; font-size: 30px; }
  .station-point { r: 14; }
  .station-num { font-size: 15px; }
  .chapitre { min-height: 34vh; padding: 2vh 0 3vh; }
  .chapitre h3 { font-size: 2rem; }
  .chapitre-texte { font-size: 1.15rem; }
}
.voyage-chapitres h2 { margin-top: 24px; }
.chapitre { min-height: 44vh; display: flex; flex-direction: column; justify-content: center; padding: 3vh 0; opacity: .45; transition: opacity .5s; }
.chapitre p:last-child { margin-bottom: 0; }
.chapitre.is-active { opacity: 1; }
.chapitre-etape { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--teal); margin: 0 0 .5em; }
.chapitre-etape span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--soleil); color: var(--encre); font-weight: 800; }
.chapitre h3 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05; }
.chapitre-texte { font-family: var(--voix); font-style: italic; font-size: 1.32rem; line-height: 1.45; max-width: 32ch; }
.chapitre--marche .chapitre-etape span { background: var(--terre); color: var(--creme); }
/* Carnet de voyage : papier ligné, spirale, tampons d'encre */
.carnet { position: relative; margin-top: 4vh; padding: 26px 24px 22px 58px; border-radius: 4px 14px 14px 4px; transform: rotate(-.6deg);
  background:
    radial-gradient(circle at 22px 50%, var(--eau) 0 5px, var(--encre) 5px 6.5px, transparent 7px) 0 8px / 44px 30px repeat-y,
    linear-gradient(90deg, transparent 43px, rgba(217, 84, 30, .35) 43px 45px, transparent 45px),
    repeating-linear-gradient(transparent 0 29px, rgba(11, 76, 87, .16) 29px 30px),
    #F6E7CB;
  box-shadow: 0 1px 0 rgba(43, 26, 18, .1), 0 14px 26px -14px rgba(43, 26, 18, .45); }
.carnet::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 0 0 14px 0; background: linear-gradient(135deg, rgba(43, 26, 18, .14) 0 50%, var(--eau) 50%); }
.carnet h3 { font-family: var(--voix); font-style: italic; font-weight: 500; font-size: 1.7rem; margin-bottom: .1em; }
.carnet > p { line-height: 30px; margin: 0 0 6px; }
.tampons { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 14px; padding: 0; margin: 14px 0 16px; }
.tampon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 1px; border: 2px dotted rgba(11, 76, 87, .4); color: rgba(11, 76, 87, .5); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; padding: 6px; }
.tampon-num { font-family: var(--voix); font-style: italic; font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tampon.is-vu { color: #B5401A; border: 3px double #B5401A; box-shadow: inset 0 0 0 4px #F6E7CB, inset 0 0 0 5.5px rgba(181, 64, 26, .7); opacity: .9; transform: rotate(var(--r, -8deg)); animation: tampon .45s cubic-bezier(.3, 1.6, .5, 1); }
.tampon:nth-child(2) { --r: 6deg; } .tampon:nth-child(3) { --r: -3deg; } .tampon:nth-child(4) { --r: 10deg; } .tampon:nth-child(5) { --r: -12deg; }
@keyframes tampon { from { transform: scale(1.7) rotate(0); opacity: 0; } 70% { opacity: 1; } }
@media (max-width: 520px) { .carnet { padding-left: 52px; padding-right: 16px; } .tampon { width: 72px; height: 72px; font-size: .6rem; } }

/* Atelier : technologie et IA */
.atelier-une { padding: 80px 0 70px; }
.atelier-tete { max-width: 760px; }
.pistes { list-style: none; padding: 0; margin: 30px 0 36px; display: grid; gap: 30px 40px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.piste { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.piste p { margin: 0; }
.icone { width: 56px; height: 56px; color: var(--teal); background: var(--eau); border-radius: 50% 44% 52% 46%; padding: 8px; }
.piste:nth-child(3n+2) .icone { background: #fde3a1; }
.piste:nth-child(3n) .icone { background: #f8d2bd; }
.atelier-pistes { margin-top: 20px; }

/* Marché */
.marche-bande { position: relative; background: var(--sable); padding: 96px 0 72px; }
.marche-bande::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: repeating-linear-gradient(90deg, var(--terre) 0 40px, var(--creme) 40px 80px); border-radius: 0 0 50% 50% / 0 0 14px 14px; }
.marche-texte { max-width: 58ch; font-size: 1.15rem; }
.marche-cats { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.marche-cats a { display: flex; flex-direction: column; background: var(--creme); border-radius: var(--rayon); padding: 14px 18px; color: var(--encre); text-decoration: none; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.marche-cats a:hover { border-color: var(--encre); transform: translateY(-2px); }
.marche-cats span { font-weight: 700; }
.marche-cats small { color: var(--teal); }

.derniers { padding: 74px 0 40px; }

/* Jeu : teaser et page */
.jeu-teaser { background: var(--eau); padding: 60px 0; }
.jeu-teaser-in { display: grid; gap: 20px 40px; align-items: center; }
@media (min-width: 760px) { .jeu-teaser-in { grid-template-columns: 180px 1fr; } }
.nora-teaser { height: 220px; width: auto; display: block; }
.jeu-boite { display: grid; gap: 20px; margin-top: 10px; }
.jeu-scene { position: relative; height: clamp(320px, 56vh, 460px); border-radius: var(--rayon); overflow: hidden; touch-action: none; cursor: none; user-select: none; -webkit-user-select: none; border: 2px solid var(--encre); }
.jeu-ciel { position: absolute; inset: 0; background: linear-gradient(180deg, #8fd3dc, #e7f6f2 70%, #b5d685 70%, #9cc56a); }
.jeu-scene:focus-visible { outline: 3px solid var(--terre); outline-offset: 6px; }
.jeu-nora { position: absolute; bottom: 4px; left: var(--x, 50%); width: 96px; transform: translateX(-50%); pointer-events: none; }
.nora-jeu { width: 100%; height: auto; display: block; }
.jeu-gouttes { position: absolute; inset: 0; pointer-events: none; }
.goutte { position: absolute; width: 22px; color: var(--turq); will-change: transform; }
.goutte svg { display: block; width: 100%; stroke: var(--teal); stroke-width: 1.4; }
.jeu-voile { position: absolute; inset: 0; background: rgba(255, 248, 234, .86); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; cursor: default; }
.jeu-voile[hidden] { display: none; }
.jeu-infos { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; }
.jeu-score { font-size: 1.4rem; margin: 0; font-weight: 750; }
.jeu-record { margin: 0; }

/* Soutenir */
.soutenir-bande { background: var(--soleil); padding: 84px 0; }
.soutenir-in { max-width: 820px; }
.soutenir-bande .btn-sec:hover { background: var(--creme); }
.soutenir-bande .note, .soutenir-bande .note a { color: var(--encre); }
.soutenir-bande .a-renseigner { background: var(--creme); }

.lettre { padding: 80px 0 110px; }

/* Pied de page */
.site-footer { position: relative; background: var(--brun); color: var(--creme); padding: 92px 0 30px; }
.site-footer a { color: var(--creme); text-decoration-color: var(--soleil); }
.footer-grille { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-logo { font-weight: 800; font-size: 2.4rem; line-height: 1; margin: 0 0 12px; }
.footer-logo span { color: var(--soleil); }
.footer-liens { list-style: none; padding: 0; margin: 0; }
.footer-liens li { margin: 0 0 8px; }
.disclaimer-court { font-size: .86rem; opacity: .85; max-width: 90ch; margin-top: 30px; border-top: 1px solid rgba(255, 248, 234, .25); padding-top: 18px; }
.site-footer .a-renseigner { color: var(--encre); }

/* Jauge de lecture : la jarre se remplit */
.jauge { position: fixed; right: 16px; bottom: 16px; z-index: 15; width: 34px; height: 42px; border: 3px solid var(--encre); border-radius: 44% 44% 40% 40% / 34% 34% 52% 52%; background: var(--creme); overflow: hidden; opacity: 0; transition: opacity .4s; pointer-events: none; }
.jauge.is-visible { opacity: 1; }
.jauge-eau { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lu, 0) * 100%); background: var(--turq); transition: height .2s linear; }

/* Nora */
.nora { display: block; overflow: visible; }
.nora-poses { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; background: var(--eau); padding: 28px; margin: 6px 0 36px; border-radius: var(--rayon); }
.nora-pose { height: 190px; width: auto; }
.nora .n-jambe-g, .nora .n-jambe-d, .nora .n-arm-libre { transform-box: fill-box; }
.nora--walk .n-jambe-g { transform-origin: 50% 0%; animation: pas .85s ease-in-out infinite alternate; }
.nora--walk .n-jambe-d { transform-origin: 50% 0%; animation: pas .85s ease-in-out infinite alternate-reverse; }
.nora--walk .n-corps { animation: rebond .425s ease-in-out infinite alternate; }
.nora--walk .n-arm-libre { transform-origin: 20% 0%; animation: balance .85s ease-in-out infinite alternate; }
.nora--idle .n-corps, .nora--point .n-corps, .nora--catch .n-corps { animation: respire 3.2s ease-in-out infinite alternate; }
.salue .n-arm-libre { animation: salut .45s ease-in-out 4 alternate !important; transform-origin: 20% 0%; }
@keyframes pas { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes rebond { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes balance { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes respire { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes salut { from { transform: rotate(-150deg); } to { transform: rotate(-120deg); } }

/* Apparitions */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .8s, transform .8s; }
.hero h1, .hero-lead, .hero-actions { animation: monte 1s cubic-bezier(.2, .8, .2, 1) both; }
.hero-lead { animation-delay: .12s; }
.hero-actions { animation-delay: .22s; }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ===================== v4 ===================== */
.js-seul { display: none; }
.js .js-seul { display: revert; }
.js form.js-seul { display: grid; }
.btn-petit { padding: .5em .9em; font-size: .9rem; }
.btn-eco { background: none; border: 2px solid var(--creme); color: var(--creme); border-radius: var(--rayon); padding: 8px 14px; font: 600 .9rem var(--corps); cursor: pointer; }
.btn-eco[aria-pressed="true"] { background: var(--soleil); color: var(--encre); border-color: var(--soleil); }

/* Recherche */
.recherche { width: min(680px, calc(100vw - 32px)); max-height: 80vh; border: 0; border-radius: var(--rayon); padding: 22px; background: var(--creme); color: var(--encre); box-shadow: 0 20px 60px rgba(11, 46, 54, .3); }
.recherche::backdrop { background: rgba(11, 46, 54, .45); }
.recherche-in { display: flex; gap: 10px; }
.recherche-in input { flex: 1; font: 500 1.15rem var(--corps); padding: 12px 14px; border: 2px solid var(--encre); border-radius: 12px; background: #fff; color: var(--encre); min-width: 0; }
.recherche-fermer { background: none; border: 0; font: 600 .95rem var(--corps); color: var(--teal); cursor: pointer; padding: 0 6px; }
.recherche-aide { font-size: .9rem; color: var(--teal); margin: 12px 2px; }
.recherche-resultats { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 55vh; }
.recherche-resultats a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--encre); }
.recherche-resultats a:hover, .recherche-resultats a:focus-visible { background: var(--sable); }
.recherche-resultats span { font-size: .88rem; color: var(--teal); }

/* Fil d'Ariane */
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 18px; font-size: .9rem; }
.ariane li + li::before { content: "›"; margin: 0 6px; color: var(--teal); }
.ariane a { color: var(--encre); }

/* Moments du ciel */
.moment-aube .ciel-base { background: linear-gradient(180deg, #f6a98d 0%, #f9c9a8 38%, #fde3b8 70%, #fff3d9 100%); }
.moment-jour .ciel-base { background: linear-gradient(180deg, #a9dde2 0%, #d2efe9 42%, #fdf0d0 78%, #fff6e3 100%); }
.moment-soir .ciel-base { background: linear-gradient(180deg, #c97a9a 0%, #f19a7c 35%, #f7c27e 68%, #fde3b8 100%); }
.moment-soir .ciel-jour, .moment-nuit .ciel-jour { display: none; }
.moment-soir .soleil { bottom: 14vh; transform: none; background: radial-gradient(circle, #ffb86a 0 55%, #f08a4b 70%, rgba(240, 138, 75, 0) 71%); box-shadow: 0 0 140px 50px rgba(240, 138, 75, .45); }
.moment-nuit .ciel-base { background: linear-gradient(180deg, #2c2a5a 0%, #4a3f78 45%, #7d5f8e 75%, #c99a8e 100%); }
.moment-nuit .soleil { width: clamp(120px, 14vw, 190px); right: 16vw; bottom: 46vh; transform: none; background: radial-gradient(circle at 40% 36%, #fffef6 0, #f7f0d8 55%, #e6dbb8 100%); box-shadow: 0 0 0 10px rgba(255, 248, 222, .07), 0 0 46px 12px rgba(255, 246, 214, .5), 0 0 150px 60px rgba(255, 246, 214, .16); }
.moment-nuit .soleil::before { display: none; }
.moment-nuit .soleil::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 20% 16% at 34% 34%, rgba(150, 140, 115, .32) 0 60%, transparent 100%),
    radial-gradient(ellipse 26% 20% at 58% 46%, rgba(150, 140, 115, .26) 0 55%, transparent 100%),
    radial-gradient(ellipse 14% 12% at 44% 66%, rgba(150, 140, 115, .3) 0 60%, transparent 100%),
    radial-gradient(circle at 70% 72%, rgba(150, 140, 115, .22) 0 6%, transparent 7%),
    radial-gradient(circle at 26% 58%, rgba(150, 140, 115, .2) 0 4%, transparent 5%),
    radial-gradient(circle at 75% 28%, rgba(150, 140, 115, .18) 0 3.5%, transparent 4.5%); }
@media (max-width: 760px) { .moment-nuit .soleil { width: 62px; right: 18px; top: 82px; bottom: auto; } .hero-heure { max-width: calc(100% - 78px); } }
.moment-nuit .hero-texte, .moment-nuit .hero-texte h1 { color: var(--creme); }
.moment-nuit .hero .btn-sec, .moment-nuit .btn-sec { color: var(--creme); border-color: var(--creme); }
.moment-nuit .btn-sec:hover { color: var(--encre); }
@media (min-width: 1000px) { .ciel-nuit .site-header .logo, .ciel-nuit .site-header nav a:not(.nav-marche), .ciel-nuit .site-header nav a:not(.nav-marche) .nav-sous { color: var(--creme); } }
.ciel-nuit .site-header .logo { color: var(--creme); }
.etoiles { position: absolute; inset: 0; z-index: 0; }
.etoiles i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fffbe9; animation: scintille 3.5s ease-in-out infinite; }
.etoiles i.grande { width: 3px; height: 3px; box-shadow: 0 0 6px #fffbe9; }
@keyframes scintille { 50% { opacity: .25; } }
.nuages { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.saison-pluies .nuages { display: block; }
.nuages span { position: absolute; height: 46px; width: 180px; border-radius: 50px; background: rgba(255, 255, 255, .75); animation: nuage 70s linear infinite; }
.nuages span::before, .nuages span::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.nuages span::before { width: 80px; height: 80px; left: 26px; top: -40px; }
.nuages span::after { width: 60px; height: 60px; left: 88px; top: -26px; }
.nuages span:nth-child(1) { top: 16%; left: -20%; }
.nuages span:nth-child(2) { top: 30%; left: -40%; transform: scale(.7); animation-duration: 95s; animation-delay: -30s; }
.nuages span:nth-child(3) { top: 10%; left: -60%; transform: scale(1.2); animation-duration: 120s; animation-delay: -60s; }
.moment-nuit .nuages span { background: rgba(255, 255, 255, .18); }
@keyframes nuage { to { left: 120%; } }

/* Goutte d'introduction */
.intro-goutte { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--creme); display: grid; place-items: center; }
.intro-goutte-forme { width: 34px; height: 46px; background: var(--turq); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform: translateY(-40vh) rotate(0); opacity: 0; }
.intro-onde { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--turq); opacity: 0; }
.intro-goutte.is-jouee { animation: intro-fond 1.45s ease forwards; }
.intro-goutte.is-jouee .intro-goutte-forme { animation: intro-chute .6s cubic-bezier(.5, 0, .9, .6) forwards; }
.intro-goutte.is-jouee .intro-onde { animation: intro-onde .9s .55s ease-out forwards; }
@keyframes intro-chute { 0% { opacity: 1; transform: translateY(-40vh); } 100% { opacity: 1; transform: translateY(0) scale(1, .6); } }
@keyframes intro-onde { 0% { opacity: 1; width: 20px; height: 20px; } 100% { opacity: 0; width: 160vmax; height: 160vmax; } }
@keyframes intro-fond { 0%, 45% { background: var(--creme); } 100% { background: transparent; visibility: hidden; } }
.intro-goutte.is-jouee .intro-goutte-forme { animation-fill-mode: forwards; }

/* Traînée et célébration */
.trainee { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.celebration { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.celebration span { position: absolute; top: -40px; width: 14px; height: 19px; background: var(--turq); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; animation: tombe linear forwards; }
.celebration span:nth-child(3n) { background: var(--soleil); }
.celebration span:nth-child(5n) { background: var(--terre); }
@keyframes tombe { to { transform: translateY(110vh) rotate(25deg); } }

/* Nora : danse */
.danse .n-corps { animation: danse .4s ease-in-out 6 alternate !important; transform-box: fill-box; transform-origin: 50% 100%; }
.danse .n-arm-libre { animation: salut .2s ease-in-out 12 alternate !important; transform-origin: 20% 0%; }
@keyframes danse { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-8px); } }

/* Nora compagnon */
.compagnon { position: fixed; right: 12px; bottom: 66px; z-index: 50; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 6px; max-width: min(340px, calc(100vw - 80px)); transition: opacity .4s, transform .4s; }
.compagnon[hidden] { display: none; }
.compagnon.pres-du-pied .compagnon-bulle, .compagnon.pres-du-pied .compagnon-fermer { display: none; }
.avec-compagnon .site-footer { padding-bottom: 60px; }
.avertissement-visible .compagnon, .avertissement-visible .jauge { opacity: 0 !important; pointer-events: none; }
.compagnon-nora { background: var(--creme); border: 2px solid var(--encre); border-radius: 50%; width: 58px; height: 58px; padding: 4px 0 0; overflow: hidden; cursor: pointer; flex: none; }
.nora-compagnon { height: 72px; width: auto; margin: 0 auto; }
.compagnon-bulle { position: relative; margin: 0 0 18px; background: var(--creme); border: 2px solid var(--encre); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: .92rem; line-height: 1.4; box-shadow: 0 6px 18px rgba(11, 46, 54, .15); }
.compagnon-fermer { position: absolute; right: 40px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--encre); background: var(--soleil); color: var(--encre); font: 700 1rem/1 var(--corps); cursor: pointer; padding: 0; }
.compagnon.parle .compagnon-bulle { animation: bulle .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bulle { from { transform: scale(.6) translateY(10px); opacity: 0; } }
.compagnon.is-replie .compagnon-bulle, .compagnon.is-discret .compagnon-bulle { display: none; }
.compagnon.is-discret { opacity: .0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 700px) { .compagnon-bulle { font-size: .85rem; } .compagnon { bottom: 62px; right: 8px; } }

/* Annuaire : filtres, tri, pagination */
.filtres { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; background: var(--sable); border-radius: var(--rayon); padding: 18px; margin: 10px 0 14px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ--large { grid-column: 1 / -1; }
@media (min-width: 900px) { .champ--large { grid-column: span 2; } }
.champ label { font-weight: 650; font-size: .9rem; }
.champ input, .champ select { font: 500 1rem var(--corps); min-height: 46px; padding: 8px 12px; border: 2px solid var(--encre); border-radius: 12px; background: #fff; color: var(--encre); }
.champ--action .btn { margin: 0; min-height: 46px; }
.annuaire-compte { font-weight: 650; color: var(--teal); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 22px; }
.page-btn { min-width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--encre); background: var(--creme); color: var(--encre); font: 650 1rem var(--corps); cursor: pointer; }
.page-btn.is-actif { background: var(--encre); color: var(--creme); }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-ellipse { padding: 0 4px; }
.etat-vide { background: var(--sable); border-radius: var(--rayon); padding: 20px 22px; margin: 10px 0 20px; }
.marche-cats--page { margin-top: 0; }
.marche-cats--page a { background: var(--sable); }

/* Articles */
.article-grille { display: grid; gap: 10px 50px; }
@media (min-width: 1000px) { .article-grille { grid-template-columns: minmax(0, 68ch) 1fr; } .article-cote { position: sticky; top: 20px; align-self: start; } }
.sommaire { background: var(--sable); border-radius: var(--rayon); padding: 16px 20px; font-size: .95rem; }
.sommaire-titre { font-weight: 700; margin: 0 0 6px; }
.sommaire ol { margin: 0; padding-left: 1.2em; }
.sommaire li { margin: 4px 0; }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 30px 0 10px; padding-top: 18px; border-top: 2px solid var(--sable); }
.partage-titre { font-weight: 700; margin: 0 8px 0 0; }
.lies { margin-top: 30px; }
.article h3 { margin-top: 1.4em; }
.article a { word-break: break-word; }

/* Jeux */
.jeu-section { margin: 10px 0 50px; }
.jeu-carte { display: grid; gap: 16px 40px; align-items: start; }
@media (min-width: 900px) { .jeu-carte { grid-template-columns: 1fr 1fr; } .jeu-carte-panneau { position: sticky; top: 20px; } }
.jeu-carte-zone { background: var(--eau); border-radius: var(--rayon); padding: 10px; display: flex; justify-content: center; }
.carte-jeu-svg { height: min(78vh, 720px); width: auto; max-width: 100%; }
.jeu-carte-question { font-family: var(--voix); font-style: italic; font-size: 1.35rem; line-height: 1.35; min-height: 3.6em; }
.jeu-carte-score { font-weight: 700; }
.cible { cursor: pointer; outline: none; }
.cible .riviere { stroke-width: 4.5; transition: stroke .2s, stroke-width .2s; }
.cible-zone { fill: none; stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.cible:hover .riviere, .cible:focus-visible .riviere { stroke: var(--teal); stroke-width: 7; }
.cible:focus-visible .lac, .cible:hover .lac { fill: var(--teal); }
.cible.is-juste .riviere { stroke: var(--riz); stroke-width: 8; }
.cible.is-juste .lac { fill: var(--riz); }
.cible.is-revele .riviere { stroke: var(--encre); stroke-width: 8; animation: clignote .5s 3; }
.cible.is-revele .lac { fill: var(--encre); }
.cible.is-faux .riviere { stroke: var(--terre); stroke-width: 7; }
@keyframes clignote { 50% { stroke-opacity: .3; } }
.riviere { transition: stroke-width .2s; }
.hydro .riviere:hover { stroke-width: 6; stroke: var(--teal); }
.epingle--communaute path { fill: var(--riz); }

/* Calculateur */
.calculateur { background: var(--sable); border-radius: var(--rayon); padding: 22px; margin-bottom: 30px; }
.calc-entree label { font-weight: 700; display: block; margin-bottom: 8px; }
.calc-compteur { display: flex; align-items: center; gap: 8px; }
.calc-compteur .btn { margin: 0; width: 52px; height: 52px; padding: 0; font-size: 1.5rem; }
.calc-compteur input { width: 90px; height: 52px; text-align: center; font: 750 1.6rem var(--corps); border: 2px solid var(--encre); border-radius: 12px; background: #fff; color: var(--encre); }
.calc-resultats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 20px 0 12px; }
.calc-carte { background: var(--creme); border-radius: var(--rayon); padding: 14px 18px; }
.calc-carte p { margin: 0; }
.calc-chiffre { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 750; line-height: 1.1; }
.calc-jarres { display: flex; flex-wrap: wrap; gap: 6px; }
.bidon { width: 16px; height: 22px; border-radius: 4px 4px 6px 6px; background: var(--turq); border: 2px solid var(--teal); animation: monte .4s both; }
.bidon--max { background: var(--eau); }

/* Indicateurs */
.indicateurs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 10px 0 36px; }
.indicateur { background: var(--sable); border-radius: var(--rayon); padding: 18px 20px; }
.indicateur p { margin: 0; }
.indicateur-chiffre { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--teal); }

/* Badge Passeur d'eau */
.badge-passeur { display: flex; gap: 16px; align-items: center; background: #fde3a1; border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 14px; animation: tampon .6s cubic-bezier(.3, 1.6, .5, 1); }
.badge-passeur svg { width: 72px; height: 72px; flex: none; }
.badge-passeur p { margin: 0; }
.badge-passeur[hidden] { display: none; }

/* Économie de données : pas d'animation */
.eco *, .eco *::before, .eco *::after { animation: none !important; transition: none !important; }
.eco [data-reveal] { opacity: 1 !important; transform: none !important; }
.eco .intro-goutte, .eco .ondes, .eco .nuages { display: none !important; }

/* Impression des guides */
@media print {
  .site-header, .site-footer, .compagnon, .jauge, .partage, .js-seul, .banniere-marche, .lies, .motif, .vague, .ariane, .intro-goutte { display: none !important; }
  body { background: #fff; }
  .entete { background: none; padding: 0; }
  .entete::before { display: none; }
  .article-grille { display: block; }
  a { color: #000; }
}

/* ===================== v5 ===================== */
/* Faune du ciel */
.faune { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.luciole { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff4a8; box-shadow: 0 0 10px 3px rgba(255, 236, 130, .7); animation: luciole-vol 10s ease-in-out infinite alternate, luciole-brille 3s ease-in-out infinite; }
@keyframes luciole-vol { 33% { transform: translate(24px, -30px); } 66% { transform: translate(-18px, -12px); } 100% { transform: translate(30px, 18px); } }
@keyframes luciole-brille { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.oiseaux { position: absolute; left: -90px; width: 70px; animation: oiseaux-vol 26s linear forwards; }
.oiseaux svg { width: 100%; overflow: visible; }
.oiseaux path { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; animation: battement .5s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes oiseaux-vol { to { transform: translateX(calc(100vw + 180px)) translateY(-40px); } }
@keyframes battement { to { transform: scaleY(.45); } }
.collines path { transition: transform .1s linear; will-change: transform; }

/* Onde au clic */
.btn, .carte-bloc, .marche-cats a, .page-btn, .piste { position: relative; overflow: hidden; }
.onde-clic { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(42, 167, 176, .45); pointer-events: none; animation: onde-clic .65s ease-out forwards; }
@keyframes onde-clic { to { transform: scale(26); opacity: 0; } }

/* Soulignement en vague */
.lien-fleche:hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%23F2B43C' stroke-width='3'/%3E%3C/svg%3E") 0 100% / 20px 8px repeat-x; animation: vague-lien .6s linear infinite; }
@keyframes vague-lien { to { background-position: 20px 100%; } }

/* Icônes qui se dessinent */
.trace-pret .icone * { stroke-dasharray: 180; stroke-dashoffset: 180; }
.trace-pret.is-visible .icone * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .2s; }

/* Titres mot par mot */
.entete h1 .mot { display: inline-block; animation: monte .7s cubic-bezier(.2, .8, .2, 1) both; }

/* Nora dit au revoir */
.revoir { position: absolute; left: 0; top: 18px; width: 100%; height: 90px; pointer-events: none; overflow: hidden; z-index: 3; }
.nora-revoir { position: absolute; left: -80px; bottom: 0; height: 80px; width: auto; opacity: 0; }
.revoir.passe .nora-revoir { animation: revoir 10s linear forwards; }
@keyframes revoir { 0% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw + 160px)); } }

/* Pirogues sur la carte */
.pirogue { animation: pirogue 5s ease-in-out infinite alternate; transform-box: fill-box; }
.pirogue > * { animation: tangage 2.4s ease-in-out infinite alternate; transform-origin: 0 0; transform-box: view-box; }
@keyframes pirogue { to { translate: 0 -4px; } }
@keyframes tangage { from { rotate: -4deg; } to { rotate: 4deg; } }

/* Épingles qui tombent */
.epingles-pretes .epingle { opacity: 0; }
.epingles-tombent .epingle { animation: epingle-tombe .6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes epingle-tombe { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

/* Indicateurs en jarres */
.indicateur { display: flex; gap: 16px; align-items: center; }
.indicateur-jarre { flex: none; width: 54px; height: 66px; border: 3px solid var(--encre); border-radius: 44% 44% 40% 40% / 34% 34% 52% 52%; background: var(--creme); position: relative; overflow: hidden; }
.indicateur-jarre span { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--niveau, 0) * 100%); background: var(--turq); }
.js .indicateur[data-reveal] .indicateur-jarre span { height: 0; }
.js .indicateur.is-visible .indicateur-jarre span { height: calc(var(--niveau, 0) * 100%); transition: height 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
.eco .indicateur-jarre span { height: calc(var(--niveau, 0) * 100%) !important; }
@media (prefers-reduced-motion: reduce) { .indicateur-jarre span { height: calc(var(--niveau, 0) * 100%) !important; } }

/* ---------- v6 : saisons, horloge, arc-en-ciel, surlignage, vagues ---------- */
/* Pause : onglet caché ou bloc hors écran */
.en-pause *, .en-pause *::before, .en-pause *::after,
.hors-vue, .hors-vue *, .hors-vue *::before, .hors-vue *::after { animation-play-state: paused !important; }

/* Horloge vivante */
.hero-heure { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 .8em; font-family: var(--voix); font-style: italic; font-size: 1.12rem; line-height: 1.35; color: inherit; max-width: 46ch; }
.hero-heure-astre { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* Arc-en-ciel caché */
.arc-en-ciel { position: absolute; z-index: 1; pointer-events: none; left: 50%; top: 18%; width: min(900px, 120vw); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; overflow: hidden; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 1.2s ease, clip-path 2.4s cubic-bezier(.4, 0, .2, 1); }
.arc-en-ciel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 78%, rgba(150, 90, 200, .38) 79%, rgba(60, 120, 220, .38) 82%, rgba(42, 167, 176, .4) 85%, rgba(90, 170, 60, .4) 88%, rgba(242, 180, 60, .45) 91%, rgba(240, 130, 40, .42) 94%, rgba(217, 84, 30, .38) 97%, transparent 99.5%); }
.arc-en-ciel.is-visible { opacity: 1; clip-path: inset(0 0 0 0); }

/* Saison des pluies : rivières hautes sur la carte */
.saison-pluies .carte .riviere { stroke-width: 4.6; }
.saison-pluies .carte .riviere-flux { stroke-width: 2; stroke-dasharray: 5 14; animation-duration: 1.2s; }
html:not(.saison-pluies) .carte .riviere-flux { animation-duration: 3.6s; }
.carte-saison { margin: .4em 0 0; font-size: .9rem; color: var(--encre); display: flex; gap: 8px; align-items: center; }
.carte-saison::before { content: ""; width: 22px; height: 4px; border-radius: 3px; background: var(--turq); flex: none; }
.saison-pluies .carte-saison::before { height: 6px; }

/* Ombres de nuages sur la carte */
.ombres-nuages { pointer-events: none; }
.ombres-nuages ellipse { animation: ombre-passe 46s linear infinite; }
.ombres-nuages ellipse:nth-of-type(2) { animation-duration: 62s; animation-delay: -20s; }
.ombres-nuages ellipse:nth-of-type(3) { animation-duration: 54s; animation-delay: -38s; }
@keyframes ombre-passe { from { transform: translateX(-260px); } to { transform: translateX(620px); } }

/* Surlignage qui se dessine pendant la lecture */
.surlignage-anime .article strong { background: linear-gradient(transparent 60%, #fde3a1 60%) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.4, 0, .2, 1); }
.surlignage-anime .article strong.is-surligne { background-size: 100% 100%; }
.surlignage-anime .article table strong, .surlignage-anime .article blockquote strong { background: none; }

/* Vagues qui montent entre les sections */
.vague.va-monter { transform: scaleY(.15); transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.vague--haut.va-monter { transform-origin: 50% 0; }
.vague.va-monter.a-monte { transform: none; }

.eco .ombres-nuages, .eco .arc-en-ciel { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ombres-nuages, .arc-en-ciel { display: none !important; }
}
@media (max-width: 600px) { .hero-heure { font-size: 1rem; } }

@media (min-width: 900px) { .voyage-notes { display: none; } }
@media (prefers-reduced-motion: reduce) { .soleil::before { animation: none; } }

/* ---------- v7 : Atlas de l'eau ---------- */
.atlas { display: grid; gap: 24px; }
@media (min-width: 960px) { .atlas { grid-template-columns: minmax(300px, 5fr) 7fr; align-items: start; } .atlas-carte { position: sticky; top: 16px; } }
.atlas-carte { background: var(--eau); border-radius: var(--rayon); padding: 12px; display: flex; justify-content: center; }
.atlas-carte .carte { height: min(78vh, 720px); width: auto; max-width: 100%; }
@media (max-width: 959px) { .atlas-carte .carte { height: 56svh; } }
.atlas-point { cursor: pointer; transition: opacity .35s, transform .35s; transform-box: fill-box; transform-origin: center; }
.atlas-point:hover, .atlas-point:focus-visible { transform: scale(1.35); outline: none; }
.atlas-point.is-masque { opacity: 0; pointer-events: none; transform: scale(.4); }
.atlas-point.is-apparait { animation: point-apparait .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes point-apparait { from { transform: scale(0); } }
.atlas-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filtre-puce { display: inline-flex; align-items: center; gap: 6px; font: 600 .92rem/1 var(--corps); color: var(--encre); background: var(--creme); border: 2px solid var(--encre); border-radius: 10px; padding: 7px 12px 7px 8px; cursor: pointer; min-height: 40px; }
.filtre-puce svg { width: 22px; height: 22px; }
.filtre-puce[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.atlas-fiches { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.atlas-fiche[hidden] { display: none; }
.atlas-fiche a { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--encre); background: var(--creme); border: 2px solid transparent; border-bottom-color: rgba(11, 46, 54, .12); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, transform .2s; }
.atlas-fiche a:hover, .atlas-fiche a:focus-visible, .atlas-fiche.is-survol a { border-color: var(--encre); transform: translateX(4px); }
.atlas-symbole { width: 34px; height: 34px; flex: none; }
.atlas-fiche-texte { display: grid; gap: 2px; }
.atlas-fiche-type { font-size: .8rem; color: var(--teal); font-weight: 650; }
.atlas-fiche strong { font-size: 1.15rem; }
.atlas-fiche-resume { font-size: .95rem; line-height: 1.45; }
.atlas-fiches--courtes .atlas-fiche-resume { display: none; }
.atlas-cote { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1000px) { .atlas-cote { position: sticky; top: 20px; } }
.vignette-atlas { width: 100%; height: auto; border-radius: var(--rayon); background: var(--eau); display: block; }
.atlas-chiffres { margin: 0; background: var(--sable); border-radius: var(--rayon); padding: 6px 18px; }
.atlas-chiffres div { padding: 10px 0; border-bottom: 1px solid #e2cfa7; }
.atlas-chiffres div:last-child { border-bottom: 0; }
.atlas-chiffres dt { font-size: .8rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .04em; }
.atlas-chiffres dd { margin: 2px 0 0; font-size: 1.05rem; }
.atlas-situation { background: var(--eau); border-radius: var(--rayon); padding: 10px; display: flex; justify-content: center; }
.atlas-situation .carte { height: 260px; width: auto; }
.atlas-situation .is-actif circle { animation: pouls-point 2s ease-in-out infinite; }
@keyframes pouls-point { 50% { stroke-width: 7; } }
/* Vignettes animées */
.v-chute { stroke: #FFF8EA; stroke-width: 3; stroke-dasharray: 10 14; animation: v-tombe .7s linear infinite; }
@keyframes v-tombe { to { stroke-dashoffset: -24; } }
.v-ecume { animation: v-ecume 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes v-ecume { 50% { transform: scale(1.25, 1.4); opacity: .7; } }
.v-onde { fill: none; stroke: #FFF8EA; stroke-width: 2; animation: v-onde 3s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes v-onde { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
.v-flux { animation: flux 1.6s linear infinite; }
.v-pirogue { animation: v-pirogue 12s linear infinite; }
@keyframes v-pirogue { from { transform: translate(-30px, 0); } 50% { transform: translate(135px, 3px); } to { transform: translate(300px, 0); } }
.v-vague { animation: v-vague 3.2s ease-in-out infinite alternate; }
@keyframes v-vague { to { transform: translateX(-40px); } }
.v-roseau { animation: v-roseau 3s ease-in-out infinite alternate; }
@keyframes v-roseau { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }

/* Le saviez-vous ? */
.saviez { padding: 56px 0 64px; background: var(--sable); }
.saviez-in { display: grid; gap: 18px; align-items: center; }
@media (min-width: 800px) { .saviez-in { grid-template-columns: auto 1fr; gap: 40px; } }
.saviez h2 { font-family: var(--voix); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.saviez-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.saviez-liste li { grid-area: 1 / 1; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45; transition: opacity .6s, transform .6s; }
.js .saviez-liste li:not(.is-actif) { opacity: 0; transform: translateY(12px); pointer-events: none; }
.saviez-liste a { color: var(--encre); font-weight: 650; }
.saviez-nav { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.saviez-compte { font-family: var(--voix); font-style: italic; font-size: 1.05rem; }
.atlas-point.is-survol { transform: scale(1.35); }
.article-anim { margin: 0 0 1.4em; max-width: 520px; }
.v-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-trace 2.2s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes v-trace { to { stroke-dashoffset: 0; } }
.v-feuille { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: v-feuille .6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes v-feuille { to { transform: scale(1); } }
.eco .v-trace, .eco .v-feuille { stroke-dashoffset: 0; transform: none; }
@media (prefers-reduced-motion: reduce) { .v-trace { stroke-dashoffset: 0; animation: none; } .v-feuille { transform: none; animation: none; } .vignette-atlas * { animation: none !important; } }
.v-vapeur { opacity: 0; animation: v-vapeur 2.8s ease-out infinite; }
@keyframes v-vapeur { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-26px); } }
.v-eclair { animation: v-eclair 2.4s ease-in-out infinite; }
@keyframes v-eclair { 50% { opacity: .35; } }
/* Tableaux d'articles : défilement horizontal sur petit écran */
@media (max-width: 700px) {
  .article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .9rem; }
  .article th, .article td { min-width: 130px; }
  .article th:first-child, .article td:first-child { min-width: 110px; }
}
.liste-lettres { list-style: none; padding: 0; display: grid; gap: 10px; } .liste-lettres li { background: var(--creme); border-radius: 12px; padding: 12px 16px; } .liste-lettres .meta { display: block; font-size: .9rem; color: var(--teal); }
.footer-adresse { margin: -.4em 0 1em; font-size: .9rem; opacity: .85; letter-spacing: .02em; }