/* Polices hébergées localement (dossier fonts/) - aucune connexion vers Google */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/varela-round-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/varela-round-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Couleurs du site : les mêmes qu'avant */
:root {
  --color-bg: #C2C09A;          /* kaki clair, fond général */
  --color-bg-alt: #7d7a4e;      /* kaki foncé, filets */
  --color-text: #2b1a1c;        /* brun, texte */
  --color-muted: #ded9c8;       /* beige clair */
  --color-orange: #ff7a1a;
  --color-green: #1f4d32;       /* vert sapin */
  --color-fond-site: #36724d;   /* vert du fond fixe, plus clair */
  --color-garnet: #9c3145;
  --color-garnet-dark: #3d0e14;
  --color-losange: #852A3B;
  --font-display: 'Fraunces', serif;
  --font-body: 'Varela Round', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }
.site-bottom { margin-top: auto; }

a { color: var(--color-green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-garnet-dark); }
a:focus-visible { outline: 2px solid var(--color-garnet-dark); outline-offset: 3px; }
.band--green a:focus-visible, .page-head a:focus-visible, .site-footer a:focus-visible { outline-color: var(--color-muted); }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Liseré tricolore en haut de page */
.tricolor { display: flex; height: 6px; }
.tricolor span { flex: 1 1 0; }
.tricolor span:nth-child(1) { background: var(--color-orange); }
.tricolor span:nth-child(2) { background: var(--color-green); }
.tricolor span:nth-child(3) { background: var(--color-garnet); }

/* En-tête : losange, logo, vagues, menu */
header.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem 1.25rem;
}
.site-name {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.site-name .losange {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28rem;
  max-width: 90%;
  height: 9rem;
  background: var(--color-losange);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: 0;
}
.site-name .logo-link { position: relative; z-index: 1; display: block; line-height: 0; }
.site-name .logo-link { width: min(52rem, 100%); }
.site-name img { display: block; width: 100%; height: auto; }
.site-name .losange-wave {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* la vague rétrécit sur petit écran pour ne jamais dépasser le bord */
  width: min(calc(9rem + 2cm), calc(50% - 5rem));
  height: auto;
  z-index: 0;
}
.losange-wave--left { right: calc(50% + 5rem); }
.losange-wave--right { left: calc(50% + 5rem); }

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.4rem;
  font-size: 0.95rem;
}
nav.site-nav a { color: var(--color-green); text-decoration: none; padding: 0.6rem 0.15rem; }
nav.site-nav a:hover { text-decoration: underline; }
nav.site-nav a[aria-current="page"] {
  color: var(--color-garnet-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-garnet);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Grandes vagues entre les bandeaux */
.sep { display: block; width: 100%; height: 40px; margin-bottom: -1px; }
.sep path { fill: none; vector-effect: non-scaling-stroke; }
.sep .sep-l1 { stroke: var(--color-orange); stroke-width: 2.5; }
.sep .sep-l2 { stroke-width: 1.5; opacity: 0.8; }
.sep .dt, .sep .db { stroke-linecap: round; }
/* kaki au-dessus, vert en dessous */
.sep--kg { background: var(--color-bg); }
.sep--kg .sep-fill { fill: var(--color-green); }
.sep--kg .sep-l2 { stroke: var(--color-muted); }
.sep--kg .dt { stroke: var(--color-garnet); }
.sep--kg .db { stroke: var(--color-orange); }
/* vert au-dessus, kaki en dessous */
.sep--gk { background: var(--color-green); }
.sep--gk .sep-fill { fill: var(--color-bg); }
.sep--gk .sep-l2 { stroke: var(--color-green); }
.sep--gk .dt { stroke: var(--color-orange); }
.sep--gk .db { stroke: var(--color-garnet); }
/* kaki au-dessus, beige en dessous */
.sep--kb { background: var(--color-bg); }
.sep--kb .sep-fill { fill: var(--color-muted); }
.sep--kb .sep-l2 { stroke: var(--color-green); }
.sep--kb .dt, .sep--kb .db { stroke: var(--color-garnet); }
/* beige au-dessus, vert en dessous */
.sep--bg { background: var(--color-muted); }
.sep--bg .sep-fill { fill: var(--color-green); }
.sep--bg .sep-l2 { stroke: var(--color-muted); }
.sep--bg .dt { stroke: var(--color-garnet); }
.sep--bg .db { stroke: var(--color-orange); }

/* Bandeaux */
.band { padding: clamp(48px, 7vw, 88px) 0; }
.band--green { background: var(--color-green); color: var(--color-muted); }
.band--beige { background: var(--color-muted); }
.band--garnet-text { color: var(--color-garnet-dark); }

/* Boutons */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-block; padding: 13px 26px; border-radius: 999px; text-decoration: none; font-size: 17px; }
.btn:hover { text-decoration: underline; }
.btn--orange, .btn--orange:hover { background: var(--color-orange); color: var(--color-text); }
.btn--ghost, .btn--ghost:hover { padding: 11px 24px; border: 2px solid var(--color-muted); color: var(--color-muted); }
.btn--green, .btn--green:hover { background: var(--color-green); color: var(--color-muted); }

/* Accueil : bandeau d'ouverture */
.hero { padding: clamp(56px, 9vw, 112px) 0; }
.hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero-wave { display: block; width: min(360px, 80%); height: auto; }
.hero p { margin: 0; max-width: 58ch; font-size: 19px; }

/* Accueil : introduction et encadrés */
.intro .wrap { display: flex; flex-direction: column; gap: 40px; }
.intro .wrap > p { margin: 0; max-width: 68ch; font-size: 19px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.card {
  background: var(--color-muted);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.card h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.25; color: var(--color-green); }
.card p { margin: 0; flex-grow: 1; }
.card a { padding: 10px 0; }

/* Accueil : sections en deux colonnes */
.split { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: flex-start; }
.split-head { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.split-body { flex: 1.4 1 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.split-body p { margin: 0; font-size: 18px; }
.split-body a { padding: 10px 0; }
.eyebrow { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.split h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }
.band--green .eyebrow, .band--green .split h2 { color: var(--color-orange); }

/* Accueil : bandeau final */
.closing .wrap { max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.closing h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; }
.closing p { margin: 0; max-width: 56ch; font-size: 18px; }

/* Pages intérieures : bandeau du titre */
.page-head { background: var(--color-green); color: var(--color-muted); padding: clamp(36px, 6vw, 64px) 0; }
.page-head .wrap { max-width: 760px; }
.page-head h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; }

/* Pages intérieures : contenu */
.content { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px; }
.content > :last-child { margin-bottom: 0; }
.content p { margin: 0 0 1.4rem; }
.content p.muted { font-size: 0.95rem; }
.link-contact { color: var(--color-garnet-dark); }

/* Page Techniques sonores : menu interne, sections, sous-titres, listes */
nav.page-menu { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; margin: 0 0 2.6rem; }
nav.page-menu a {
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
  text-decoration: none;
}
nav.page-menu a:hover, nav.page-menu a:focus-visible { background: var(--color-green); color: var(--color-muted); }
.content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 3.2rem 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-bg-alt);
  scroll-margin-top: 1rem;
}
.content nav.page-menu + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2.2rem 0 0.8rem;
  color: var(--color-green);
}
.content ul { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.content li { margin: 0 0 0.6rem; }
.content li::marker { color: var(--color-garnet); }

.placeholder { border-left: 2px solid var(--color-garnet-dark); padding: 0.2rem 0 0.2rem 1.2rem; font-style: italic; }

/* Pied de page */
.site-footer { background: var(--color-green); color: var(--color-muted); font-size: 15px; }
.site-footer .wrap {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-footer a, .site-footer a:hover { color: var(--color-muted); display: inline-block; padding: 10px 0; }

@media (max-width: 600px) {
  header.site-header { padding-left: 1rem; padding-right: 1rem; }
  .card { padding: 22px; }
}

/* ==========================================================================
   Nouvelle présentation : fond vert fixe à ondes + cases entourées de vagues
   S'applique seulement aux pages dont la balise <html> porte class="fond-ondes"
   (les autres pages gardent l'ancienne présentation en bandeaux).
   ========================================================================== */
html.fond-ondes { background: var(--color-fond-site); }
html.fond-ondes body { background: transparent; }
/* le fond reste immobile, seul le bloc des cases défile */
html.fond-ondes body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background: var(--color-fond-site) url('fond-ondes.svg?v=3') center / cover no-repeat;
}
html.fond-ondes .page { overflow-x: clip; }
html.fond-ondes .cases {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 48px);
  padding: clamp(26px, 4vw, 44px) 0;
}
html.fond-ondes main.cases { padding-top: 0; }

.case {
  position: relative;
  isolation: isolate;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  border: 2.5px solid var(--color-orange);
  border-radius: 22px;
  background: var(--case-fond);
}
.case--kaki  { --case-fond: var(--color-bg);    --case-l2: var(--color-garnet); --case-pi: var(--color-garnet); }
.case--beige { --case-fond: var(--color-muted); --case-l2: var(--color-garnet); --case-pi: var(--color-garnet); }
.case--vert  { --case-fond: var(--color-green); --case-l2: var(--color-muted); --case-pi: var(--color-orange); color: var(--color-muted); }
/* dès que cases.js a dessiné le cadre de vagues, il remplace le cadre simple */
.case.case--cadre { border-color: transparent; background: transparent; }
.case > svg.cadre { position: absolute; top: -2.5px; left: -2.5px; z-index: -1; overflow: visible; pointer-events: none; }
.cadre-fond { fill: var(--case-fond); }
.cadre-l1 { fill: none; stroke: var(--color-orange); stroke-width: 1; }
.cadre-l2 { fill: none; stroke: var(--case-l2); stroke-width: 1.5; opacity: 0.8; }
.cadre-pe { fill: var(--color-orange); }
.cadre-pi { fill: var(--case-pi); }

.case.band, .case.band--green, .case.band--beige { background: var(--case-fond); }
.case.case--cadre.band { background: transparent; }
.case .wrap { padding-left: clamp(34px, 5vw, 64px); padding-right: clamp(34px, 5vw, 64px); }
.case--vert a:focus-visible { outline-color: var(--color-muted); }
header.site-header.case { padding: 2.75rem clamp(34px, 5vw, 64px) 2.25rem; }

html.fond-ondes .site-footer { background: transparent; }
html.fond-ondes .site-footer .wrap { padding-top: 8px; }

/* Image placée sous le titre d'une case en deux colonnes */
.split-img { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 16px; }

/* Case en deux colonnes avec image : texte à gauche, image à droite */
.split--image { align-items: center; }
.split--image .split-head, .split--image .split-body { flex: 1 1 320px; }
.split--image .split-head p { margin: 6px 0 0; font-size: 18px; }
.split--image .split-img { margin-top: 0; }

/* Accueil, première case : contenu centré */
html.fond-ondes .hero .wrap { align-items: center; text-align: center; }
html.fond-ondes .hero .btn-row { justify-content: center; }

/* En-tête posé directement sur le fond vert : sans case ni cadre, menu en clair */
html.fond-ondes header.site-header { padding-top: 0.5rem; padding-bottom: 0; }
html.fond-ondes nav.site-nav a { color: var(--color-muted); }
html.fond-ondes nav.site-nav a[aria-current="page"] {
  color: var(--color-muted);
  text-decoration-color: var(--color-orange);
}
html.fond-ondes nav.site-nav a:focus-visible { outline-color: var(--color-muted); }
html.fond-ondes .losange-wave path:nth-of-type(2) { stroke: var(--color-muted); }
html.fond-ondes .losange-wave circle { fill: var(--color-muted); }

/* Première case de l'accueil : seconde ondulation en grenat */
.hero.case--vert { --case-l2: var(--color-garnet); }
.hero.case--vert .cadre-l2 { opacity: 1; }

/* Toutes les cases en vert profond : ondulation grenat, textes clairs */
.case--vert { --case-l2: var(--color-garnet); }
.case--vert .cadre-l2 { opacity: 1; }
.case--vert .card { color: var(--color-text); }
.case--vert .split-body a, .case--vert .split-body a:hover { color: var(--color-muted); }

/* Losange du logo en grenat foncé */
html.fond-ondes .site-name .losange { background: var(--color-garnet-dark); }

/* Dessin derrière le logo : une onde dont l'enveloppe forme le losange */
.site-name .logo-onde {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(42rem, 100%);
  height: 9.5rem;
  z-index: 0;
}
.logo-onde polyline, .logo-onde path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.logo-onde .lo-fond { fill: var(--color-garnet-dark); opacity: 0.92; }
.logo-onde .lo-l1 { stroke: var(--color-orange); stroke-width: 2.2; }
.logo-onde .lo-l2 { stroke: var(--color-muted); stroke-width: 1.4; opacity: 0.8; }
.logo-onde .lo-pt { stroke: var(--color-muted); }

/* Pages intérieures : une case pour le titre, une case pour le contenu */
html.fond-ondes .cases--page { padding-top: 0; }
html.fond-ondes .page-head.case .wrap { max-width: none; text-align: center; }
html.fond-ondes .content.case {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  padding: clamp(44px, 6vw, 72px) max(clamp(34px, 5vw, 64px), calc((min(1120px, 100% - 32px) - 712px) / 2));
}
.content.case--vert a { color: var(--color-muted); text-decoration-color: var(--color-orange); }
.content.case--vert a:hover { color: var(--color-orange); }
.content.case--vert h3 { color: var(--color-orange); }
.content.case--vert li::marker { color: var(--color-orange); }
.content.case--vert nav.page-menu a { border-color: var(--color-muted); text-decoration: none; }
.content.case--vert nav.page-menu a:hover, .content.case--vert nav.page-menu a:focus-visible { background: var(--color-muted); color: var(--color-green); }
.content.case--vert .placeholder { border-left-color: var(--color-orange); }

/* Titre de page placé dans la même case que son texte */
.content h1 {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
}
.content.case > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.content.case h2 { scroll-margin-top: 4.5rem; }

/* Titre de page posé directement sur le fond, sans case, centré (page Techniques sonores) */
html.fond-ondes .titre-libre { padding: 0.25rem 24px 0; text-align: center; color: var(--color-muted); }
html.fond-ondes .titre-libre h1 { margin-bottom: 1.4rem; }
html.fond-ondes .titre-libre nav.page-menu { justify-content: center; gap: 0.5rem 0.6rem; margin-bottom: 0; }
html.fond-ondes .titre-libre nav.page-menu a { color: var(--color-muted); border-color: var(--color-muted); padding: 0.28rem 0.8rem; font-size: 0.82rem; }
html.fond-ondes .titre-libre nav.page-menu a:hover, html.fond-ondes .titre-libre nav.page-menu a:focus-visible { background: var(--color-muted); color: var(--color-green); }

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

/* Titre sans case, centré */
html.fond-ondes .titre-libre { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: none; }
html.fond-ondes .titre-libre h1 { margin: 0; }

/* Accueil : les trois encadrés clairs sont retirés, leur texte reste sous « Nos séances audio… » */
html.fond-ondes .intro .card { background: transparent; border-radius: 0; padding: 0; color: var(--color-muted); }
html.fond-ondes .intro .card h2 { color: var(--color-orange); }
html.fond-ondes .intro .card a, html.fond-ondes .intro .card a:hover { color: var(--color-muted); }

/* Accueil : texte « Nos séances audio… » placé dans la case Séances personnalisées */
.intro--suite { margin-top: clamp(40px, 5vw, 64px); }

/* Accueil, dernière case : titre plus petit */
.closing h2 { font-size: clamp(22px, 2.6vw, 30px); }

/* Case avec image : liens du texte en clair, espacement */
.split--image .split-head a, .split--image .split-head a:hover { color: var(--color-muted); padding: 10px 0; align-self: flex-start; }

/* ==========================================================================
   Menu principal : bouton hamburger + mot « Menu » en haut à gauche,
   panneau qui s'ouvre depuis la gauche (toutes les pages, tous les écrans)
   ========================================================================== */
header.site-header { position: relative; }
.menu-bouton {
  position: absolute; top: 0.6rem; left: 1rem; z-index: 5;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.4rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1rem; color: var(--color-muted);
  -webkit-tap-highlight-color: transparent;
}
.menu-bouton:hover .menu-mot { text-decoration: underline; text-decoration-color: var(--color-orange); text-underline-offset: 4px; }
.menu-bouton:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; border-radius: 6px; }
.menu-barres { display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; }
.menu-barres span { display: block; height: 2.5px; border-radius: 2px; background: var(--color-muted); }
/* sur petit écran, le logo descend sous le bouton pour ne jamais le chevaucher */
@media (max-width: 900px) { html.fond-ondes header.site-header { padding-top: 3.4rem; } }

.menu-voile { position: fixed; inset: 0; z-index: 40; background: rgba(20, 12, 13, 0.5); }
.menu-voile[hidden] { display: none; }

nav.site-nav.menu-panneau {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: min(20rem, 86vw);
  display: block; gap: 0;
  padding: 4rem 1.6rem 2rem;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-green);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  border-right: 3px solid var(--color-orange);
  font-size: 1.08rem;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
html.menu-ouvert nav.site-nav.menu-panneau { transform: none; visibility: visible; transition: transform 0.28s ease; }
html.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { nav.site-nav.menu-panneau, html.menu-ouvert nav.site-nav.menu-panneau { transition: none; } }

.menu-panneau ul { list-style: none; margin: 0; padding: 0; }
.menu-panneau > ul > li { margin: 0 0 0.2rem; }
.menu-panneau ul ul { margin: 0 0 0.4rem 0.4rem; padding-left: 0.9rem; border-left: 2px solid var(--color-garnet); font-size: 0.95rem; }
html.fond-ondes nav.site-nav.menu-panneau a { display: block; padding: 0.45rem 0; color: var(--color-muted); text-decoration: none; }
html.fond-ondes nav.site-nav.menu-panneau a:hover { color: var(--color-orange); }
html.fond-ondes nav.site-nav.menu-panneau a[aria-current="page"] {
  color: var(--color-orange); text-decoration: underline; text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.menu-fermer {
  position: absolute; top: 0.8rem; right: 1rem;
  width: 2.6rem; height: 2.6rem; border: 0; background: none; cursor: pointer;
  font-size: 2rem; line-height: 1; color: var(--color-muted);
}
.menu-fermer:hover { color: var(--color-orange); }
.menu-fermer:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   Refonte : fond animé en couches (installé par fond.js sur toutes les pages)
   Sans JavaScript, l'image fixe fond-ondes.svg reste affichée (body::before).
   ========================================================================== */
html.fond-anime body::before { display: none; }
.fond-parallaxe { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: var(--color-fond-site); pointer-events: none; }
.fp-couche { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fp-couche { will-change: auto; } }

/* Cases des pages intérieures : ni fond, ni bord, ni vagues - le texte est posé directement sur le fond, comme sur l'accueil */
html.fond-ondes:not(.accueil) .case { background: transparent; border-color: transparent; }
html.fond-ondes:not(.accueil) .case > svg.cadre { display: none; }

/* Surtitres en grenat (nuance choisie), en gras et plus grands */
.band--green .eyebrow { color: #6b1d2b; font-weight: 700; font-size: 19px; }

/* Sans cases visibles, moins de vide entre les blocs et entre les paragraphes (toutes les pages) */
html.fond-ondes .cases { gap: clamp(12px, 1.6vw, 20px); }
html.fond-ondes .case.band { padding: clamp(24px, 3vw, 36px) 0; }
html.fond-ondes .content.case { padding-top: clamp(22px, 2.6vw, 32px); padding-bottom: clamp(22px, 2.6vw, 32px); }
.content p { margin-bottom: 1.05rem; }
.content ul { margin-bottom: 1.05rem; }
.content h2 { margin-top: 2.2rem; padding-top: 1.2rem; margin-bottom: 0.9rem; }
.content h3 { margin-top: 1.6rem; margin-bottom: 0.6rem; }
.intro--suite { margin-top: clamp(28px, 3.5vw, 44px); }
/* Bas de la page d'accueil (« L'association ne propose pas de promesses toutes faites ») : on garde l'espacement d'origine, plus aéré */
html.accueil .case.band.closing { padding: clamp(48px, 7vw, 88px) 0; margin-top: calc(clamp(48px, 7vw, 88px) - clamp(24px, 3vw, 36px) + clamp(30px, 4vw, 48px) - clamp(12px, 1.6vw, 20px)); }

/* Pages d'outils (jeux de perception, cohérence cardiaque, minuteur, bruits, outils de perception) :
   textes posés sur le fond ; la fenêtre de l'outil est un peu plus large que la colonne de texte */
html.fond-ondes .content.outil-page { color: var(--color-muted); padding-top: clamp(16px, 3vw, 32px); text-align: center; }
.content.outil-page > p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.content.outil-page > p a { color: var(--color-muted); text-decoration-color: var(--color-orange); }
.content.outil-page > p a:hover { color: var(--color-orange); }
.content.outil-page > .of { margin: 2.2rem calc(50% - min(500px, 50vw - 18px)) 2.4rem; }
.content.outil-page > p.outil-note { font-size: .92rem; margin-bottom: .9rem; }
.content.outil-page > p.outil-retour { margin-top: 2rem; }