/* ═══════════════════════════════════════════════════════════════════
   GWAZH — feuille de style partagée (V2.2)
   Principe : seuil sombre, contenu clair. Le haut de chaque page, les
   appels au contact et le pied de page sont profonds (bleu canard nuit,
   filets dorés) ; la lecture se fait sur fond lin/sable.
   Toutes les pages s'appuient sur cette feuille ; le CSS inline des
   pages se limite à --f-color / --f-light et à de rares ajustements.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette — couleurs de la board logo de la graphiste ──
     canard #38818c · bleu profond #0d394d · nuit #0d202a · eau pâle #afd6d4 · or #9b8763 */
  --canard-nuit:  #0d394d;   /* bleu profond (board) */
  --canard-noir:  #0d202a;   /* nuit (board) */
  --teal-deep:    #1d5563;
  --teal-mid:     #38818c;   /* canard (board) */
  --teal-light:   #82b9bb;
  --teal-pale:    #afd6d4;   /* eau pâle (board) */
  --teal-whisper: #dcebe9;
  --gold:         #8c7650;   /* or de la board, un ton plus soutenu pour le texte sur clair */
  --gold-light:   #b9a27a;
  --gold-pale:    #e3d9c4;
  --gold-line:    rgba(185,162,122,0.55);
  --soleil:       #dcb65c;   /* doré soleil : l'événementiel (agenda) ; le jaune vif est abandonné (retour de la graphiste) */
  --soleil-fonce: #8a6400;   /* le même, lisible en texte sur clair */
  --white:        #f4f1e9;   /* fond principal : blanc cassé ivoire (retour de la graphiste ; était un blanc d'eau froid) */
  --off-white:    #ebe6da;   /* fond alterné, naturel */
  --sable-deep:   #cfdcda;
  --paper:        #fbf9f3;   /* cartes posées sur fond clair */
  --vert-sombre:  #2e4f3e;   /* vert végétal sombre, couleur identitaire avec le canard */
  --ivoire:       #f7f3ea;
  --dore-chaud:   #d9b56a;   /* doré chaud : remplace jaune et orange vifs */
  --lin:          #f4eee3;   /* fond chaud, lin (Où sortir) */
  --lin-fonce:    #e8dfcd;
  --encre:        #22343b;   /* texte courant plus soutenu sur fond lin */
  --text-dark:    #10222b;
  --text-mid:     #3a4a51;
  --text-light:   #56666c;   /* contraste ≥ 5:1 sur les fonds clairs */
  --border:       rgba(13,57,77,0.15);

  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans:  'Jost', sans-serif;

  /* ── Mise en page ── */
  --max-w: 1100px;
  --pad-h: clamp(1.25rem, 5vw, 5rem);
  --space-section: clamp(4rem, 8vw, 6.5rem);

  /* ── Formes ── */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;
  --radius-organic: 58% 42% 46% 54% / 52% 44% 56% 48%;
  --shadow-soft: 0 22px 44px -22px rgba(13,32,42,0.45);
  --shadow-card: 0 1px 0 rgba(13,32,42,0.04), 0 10px 28px -18px rgba(13,32,42,0.35);

  /* ── Fonds profonds ── */
  --grad-deep: linear-gradient(160deg, #2b6c78 0%, var(--teal-deep) 45%, var(--canard-nuit) 100%);
  --grad-nuit: linear-gradient(170deg, #134a60 0%, var(--canard-nuit) 55%, var(--canard-noir) 100%);

  /* Teinte de formule : surchargée dans chaque page.
     --f-color : lisible sur fond clair (libellés, numéros).
     --f-light : version adoucie pour le fond sombre (halo, filet). */
  --f-color: var(--teal-mid);
  --f-light: var(--teal-light);

  /* Teintes des trois pôles */
  --porte-animations: #38818c;
  --porte-sorties:    #0d394d;
  --porte-terra:      #8c7650;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--white);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip-link {
  position: absolute; left: -999px; top: 0.5rem; z-index: 300;
  background: var(--teal-deep); color: #fff; padding: 0.6rem 1rem;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0.5rem; }

/* ── Typographie commune ── */
h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2 em { font-style: italic; color: var(--teal-mid); }
h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.25; }

.section-inner { max-width: var(--max-w); margin: 0 auto; }

.prose p { font-size: 0.97rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--text-dark); }
.prose a { color: var(--teal-mid); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-mid); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: gap 0.2s;
}
.link-arrow:hover { gap: 0.7rem; }

/* ═══════════════════════════════════════════════════════════════════
   LOGO — tracés vectoriels de la graphiste, en fichiers autonomes dans
   assets/logo/ : logo complet, emblème et mot, chacun en trois
   déclinaisons de la board — profond (sur bleu profond ou nuit),
   canard (sur canard), clair (sur fond clair).
   ═══════════════════════════════════════════════════════════════════ */
.logo-embleme, .logo-mot, .logo-complet { display: block; height: auto; }
.marque { display: flex; align-items: center; gap: 0.55rem; }
.marque--bas { display: none; }
#main-nav.scrolled .marque--haut, #main-nav.menu-open .marque--haut { display: none; }
#main-nav.scrolled .marque--bas, #main-nav.menu-open .marque--bas { display: flex; }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — transparente sur le seuil sombre, lin au défilement
   ═══════════════════════════════════════════════════════════════════ */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
#main-nav.scrolled {
  background: rgba(240,243,241,0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(140,118,80,0.22);
  box-shadow: 0 8px 28px -14px rgba(13,32,42,0.3);
}
.nav-brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700;
  color: #fff; letter-spacing: 0.05em; text-decoration: none;
  transition: color 0.3s; flex-shrink: 0;
}
#main-nav.scrolled .nav-brand { color: var(--teal-deep); }
.nav-brand .logo-embleme { width: 44px; }
.nav-brand .logo-mot { width: 92px; margin-top: 4px; }
@media (max-width: 400px) { .nav-brand .logo-mot { width: 78px; } }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav-links a {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: #fff; }
.nav-links a.is-current { color: #fff; border-bottom-color: var(--gold-light); }
#main-nav.scrolled .nav-links a { color: var(--text-mid); }
#main-nav.scrolled .nav-links a:hover { color: var(--teal-mid); }
#main-nav.scrolled .nav-links a.is-current { color: var(--teal-deep); border-bottom-color: var(--gold); }
.nav-links .nav-formules { color: var(--gold-light); }
#main-nav.scrolled .nav-links .nav-formules { color: var(--gold); }
.nav-links .nav-contact-btn, #main-nav.scrolled .nav-links .nav-contact-btn {
  color: var(--canard-nuit); background: var(--gold-light); padding: 0.5rem 1.3rem; border-radius: var(--radius-pill);
  font-weight: 500; border-bottom: none; transition: background 0.2s;
}
.nav-links .nav-contact-btn:hover { background: var(--gold-pale); color: var(--canard-nuit); }
.nav-burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center; align-items: center;
  background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px;
}
.nav-burger span { display: block; width: 24px; height: 1.5px; background: #fff; transition: transform 0.3s, opacity 0.3s, background 0.3s; }
#main-nav.scrolled .nav-burger span, #main-nav.menu-open .nav-burger span { background: var(--teal-deep); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  #main-nav.menu-open { background: var(--white); }
  #main-nav.menu-open .nav-brand { color: var(--teal-deep); }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; top: 70px; left: 0; right: 0;
    background: var(--white); padding: 1.25rem var(--pad-h) 2rem;
    gap: 1.15rem; border-bottom: 1px solid var(--border); z-index: 99;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  }
  .nav-links.open a { font-size: 0.88rem; color: var(--text-mid); }
  .nav-links.open a.is-current { color: var(--teal-deep); border-bottom-color: var(--gold); }
  .nav-links.open .nav-formules { color: var(--gold); }
  .nav-links.open .nav-contact-btn { margin-top: 0.25rem; }
  .nav-burger { display: flex; }
}

/* Onglet Agenda : jaune soleil, avec un petit point qui pétille de loin en loin */
#main-nav .nav-links a[data-nav="agenda"] { position: relative; color: var(--soleil); }
#main-nav.scrolled .nav-links a[data-nav="agenda"], body[data-seuil="clair"] #main-nav .nav-links a[data-nav="agenda"], #main-nav .nav-links.open a[data-nav="agenda"] { color: var(--soleil-fonce); }
#main-nav .nav-links a[data-nav="agenda"].is-current { border-bottom-color: var(--soleil); }
#main-nav .nav-links a[data-nav="agenda"]::after {
  content: ''; position: absolute; top: -3px; right: -9px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--soleil); animation: agenda-petille 4.5s ease-in-out infinite;
}
@keyframes agenda-petille {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(242,194,48,0.55); transform: scale(1); }
  80% { box-shadow: 0 0 0 5px rgba(242,194,48,0); transform: scale(1.35); }
}

/* ── Boutons ──
   Canard et or structurent tout le site : plus de boutons de couleur de formule. */
.btn-gold, .btn-ghost-teal {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.85rem 1.8rem; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; transition: background 0.22s, color 0.22s, border-color 0.22s;
  line-height: 1.3;
}
.btn-gold { background: var(--gold-light); color: var(--canard-nuit); }
.btn-gold:hover { background: var(--gold-pale); color: var(--canard-nuit); }
.btn-gold:disabled { opacity: 0.6; cursor: wait; }

.btn-ghost-teal { background: transparent; color: var(--teal-deep); border-color: var(--teal-deep); font-weight: 400; }
.btn-ghost-teal:hover { background: var(--teal-deep); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   HAUT DE PAGE INTÉRIEURE — seuil sombre, compact
   Halo discret de la teinte de formule, filet doré, et un petit motif
   doré (soleil + crosse de fougère) qui tourne très lentement, en sens
   horaire, comme une signature.
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  min-height: 38vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7.5rem var(--pad-h) 3rem;
  background:
    radial-gradient(ellipse 60% 85% at 90% 0%, color-mix(in srgb, var(--f-light) 22%, transparent), transparent 70%),
    var(--grad-nuit);
  color: #fff;
}
.hero::before {                 /* filet doré en pied de seuil */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.hero::after {                  /* signature : soleil et crosse de fougère */
  content: ''; position: absolute; right: clamp(1rem, 6vw, 6rem); top: 5.2rem;
  width: clamp(64px, 9vw, 104px); aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b9a27a' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='44' stroke-opacity='.45' stroke-width='.8' stroke-dasharray='1.5 4'/%3E%3Ccircle cx='50' cy='6' r='3.2' fill='%23b9a27a' stroke='none'/%3E%3Cpath d='M50 72 C50 60 47 52 50 44 C53 36 62 36 62 44 C62 50 55 52 53 47 C51.5 43 56 41 57.5 44' stroke-width='1.1' stroke-opacity='.8'/%3E%3Cpath d='M50 62 C45 60 42 56 42 52 M50 56 C55 54 57 51 58 48' stroke-width='.8' stroke-opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.75;
  animation: sigil-tourne 140s linear infinite;
  pointer-events: none;
}
@keyframes sigil-tourne { to { transform: rotate(360deg); } }

.hero-inner { position: relative; z-index: 1; max-width: var(--max-w); width: 100%; margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.65em;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--f-light); margin-bottom: 1rem;
}
.hero-eyebrow::before { content: ''; display: block; width: 18px; height: 1px; background: var(--gold-light); }
.hero-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.hero-eyebrow a:hover { border-bottom-color: currentColor; }
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 700; color: #fff; line-height: 1; margin-bottom: 0.9rem;
}
/* Intitulé français sous le nom latin : autre police, autre corps */
.hero h1 .h1-sub, .h1-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400; letter-spacing: 0.02em; line-height: 1.4;
  color: rgba(255,255,255,0.84);
  margin-top: 0.6rem;
}
.hero-marque {
  font-family: var(--font-serif); font-style: italic; font-size: 0.95rem;
  color: var(--gold-light); letter-spacing: 0.04em; margin: -0.2rem 0 0.9rem;
}
.hero-pitch {
  font-family: var(--font-sans); font-size: 0.97rem; font-weight: 300;
  color: rgba(255,255,255,0.72); max-width: 580px; line-height: 1.8; margin-bottom: 1.75rem;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (max-width: 640px) {
  .hero { min-height: 0; padding-top: 6.5rem; padding-bottom: 2.5rem; }
  .hero::after { top: 5rem; width: 58px; opacity: 0.5; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
}

/* ── Footer ── */
.site-footer {
  background: var(--canard-noir);
  color: rgba(255,255,255,0.55);
  padding: 3.25rem var(--pad-h) 2rem;
  border-top: 1px solid rgba(185,162,122,0.25);
}
.footer-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem 3rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-serif); font-size: 1.15rem; color: var(--gold-light); letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.footer-brand .logo-complet { width: min(260px, 100%); margin: -0.4rem 0 0.4rem -0.3rem; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.footer-text { font-size: 0.8rem; line-height: 1.75; color: rgba(255,255,255,0.45); }
.footer-title { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 0.9rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a, .footer-legal { font-size: 0.85rem; color: rgba(255,255,255,0.62); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover, .footer-legal:hover { color: #fff; }
.footer-bottom {
  max-width: var(--max-w); margin: 2.5rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.32); letter-spacing: 0.04em;
}
.footer-bottom .footer-legal { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Retour en haut ── */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; width: 42px; height: 42px; z-index: 90;
  background: var(--canard-nuit); color: var(--gold-light); border: 1px solid var(--gold-line); border-radius: 50%;
  cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--teal-deep); }

/* ── Bulle « Prochaine sortie » (accueil, injectée par gwazh.js) ──
   Un pense-bête jaune soleil, un peu de biais, avec sa punaise ronde :
   il surgit, reste quelques secondes, s'efface, revient (rythme dans gwazh.js).
   À droite, au-dessus du bouton de retour en haut : le guide occupe le coin gauche. */
.agenda-bulle {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + 42px + 0.9rem); z-index: 90; max-width: min(270px, calc(100vw - 3rem));
  display: flex; align-items: flex-start; gap: 0.4rem;
  background: var(--soleil); color: var(--canard-noir); border-radius: 18px 18px 18px 4px;
  box-shadow: 0 14px 28px -14px rgba(13,32,42,0.55), 0 2px 0 rgba(13,32,42,0.12);
  padding: 0.85rem 0.6rem 0.8rem 1.1rem;
  opacity: 0; pointer-events: none; transform-origin: 80% 100%;
  transform: translateY(14px) scale(0.6) rotate(-8deg);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.agenda-bulle::before {                              /* la punaise : un petit rond nuit, cerné d'or */
  content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--canard-nuit); box-shadow: 0 0 0 2px var(--gold-light);
}
.agenda-bulle.is-present {
  opacity: 1; pointer-events: auto; transform: rotate(-2.5deg);
  animation: pense-bete 0.7s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes pense-bete {
  0%   { transform: translateY(14px) scale(0.6) rotate(-8deg); }
  60%  { transform: translateY(-3px) scale(1.06) rotate(1.5deg); }
  80%  { transform: scale(0.98) rotate(-3.5deg); }
  100% { transform: rotate(-2.5deg); }
}
.agenda-bulle a { text-decoration: none; display: grid; gap: 0.15rem; min-width: 0; color: inherit; }
.agenda-bulle-label { font-size: 0.72rem; font-weight: 500; color: var(--canard-nuit); }
.agenda-bulle-titre { font-family: var(--font-serif); font-size: 0.95rem; color: var(--canard-noir); line-height: 1.35; }
.agenda-bulle a:hover .agenda-bulle-titre { text-decoration: underline; text-underline-offset: 3px; }
.agenda-bulle-fermer {
  background: none; border: none; color: rgba(13,32,42,0.55); font-size: 1.1rem; line-height: 1;
  cursor: pointer; padding: 0.1rem 0.25rem; flex-shrink: 0;
}
.agenda-bulle-fermer:hover { color: var(--canard-noir); }
@media (max-width: 560px) { .agenda-bulle { right: 1rem; } }
@media (prefers-reduced-motion: reduce) { .agenda-bulle, .agenda-bulle.is-present { transition: none; animation: none; transform: none; } }

/* ── Apparition douce ── */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   TRILOGIE — les trois pôles en surcouche (menu « Formules », et au
   premier clic sur l'accueil, une fois par visite). Centre vide.
   Sorties & cours en haut, Paysagiste & Co à droite, Animations à
   gauche ; les cercles apparaissent en sens horaire depuis le haut.
   Le guide (le g du logo) y vole dès l'ouverture.
   ═══════════════════════════════════════════════════════════════════ */
.trilogie {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 5rem 1rem 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.trilogie.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.trilogie {                       /* couleurs de la marque, quelle que soit la page d'origine */
  --gold-light: #b9a27a; --gold-pale: #e3d9c4; --gold-line: rgba(185,162,122,0.55);
}
.trilogie-fond {                  /* la feuille de l'entrée, sous un voile vert-canard */
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 62% at 50% 52%, rgba(24,62,52,0.42), rgba(12,36,34,0.78) 62%, rgba(8,24,24,0.94) 100%),
    radial-gradient(ellipse 40% 35% at 78% 22%, rgba(185,162,122,0.16), transparent 70%),
    url(../feuille-nervure.jpg) center 40% / cover no-repeat,
    #0c2422;
}
.trilogie-titre {
  position: absolute; top: 1.6rem; left: 1.25rem; z-index: 3;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light);
}
.trilogie-plan {
  position: relative; z-index: 2;
  width: min(80vmin, 700px); aspect-ratio: 1;
}
/* Décor végétal doré : trois frondes qui s'enroulent en sens horaire entre
   les cercles. Elles se dessinent à l'ouverture, puis tout le décor tourne
   très lentement (un tour en six minutes) autour du centre de l'anneau. */
.trilogie-vegetal {
  position: absolute; left: -100%; top: -100%; width: 300%; height: 300%;
  overflow: visible; pointer-events: none;
  transform-origin: 50% 50.733%;          /* centre de l'anneau (50, 52.2) */
  animation: sigil-tourne 360s linear infinite;
}
.trilogie:not(.is-open) .trilogie-vegetal { animation-play-state: paused; }
.vegetal-tige {
  fill: none; stroke: var(--gold-light); stroke-opacity: 0.42; stroke-width: 0.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s cubic-bezier(.3,.6,.3,1);
}
.trilogie.is-open .vegetal-tige { stroke-dashoffset: 0; }
.vegetal-feuille {
  opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: 0% 50%;
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.trilogie.is-open .vegetal-feuille { opacity: 1; transform: none; }
.vegetal-feuille path { fill: var(--gold-light); fill-opacity: 0.07; stroke: var(--gold-light); stroke-opacity: 0.4; stroke-width: 0.15; stroke-linecap: round; }
.vegetal-feuille .nervure { fill: none; stroke-opacity: 0.32; }
.vegetal-graine { fill: var(--gold-light); fill-opacity: 0.55; opacity: 0; transition: opacity 1.2s ease; }
.trilogie.is-open .vegetal-graine { opacity: 1; }
@media (max-width: 600px) {
  .vegetal-tige { stroke-width: 0.32; }
  .vegetal-feuille path { stroke-width: 0.24; }
}
.trilogie-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trilogie-anneau circle.anneau { fill: none; stroke: var(--gold-light); stroke-opacity: 0.45; stroke-width: 0.25; stroke-dasharray: 0.6 1.6; }
.trilogie-anneau .rotor { transform-origin: 50px 52.2px; animation: sigil-tourne 90s linear infinite; }
.trilogie-anneau .rotor circle { fill: var(--gold-light); }
.pole {
  position: absolute; width: 27%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: #fff;
  opacity: 0; scale: 0.85; transition: opacity 0.7s ease, scale 0.9s cubic-bezier(.2,.7,.2,1);
}
.trilogie.is-open .pole { opacity: 1; scale: 1; }
.pole--sorties { left: 50%; top: 20%; transition-delay: 0.5s; --pole-teinte: #d9a6aa; }
.pole--terra { left: 78%; top: 68%; transition-delay: 1.1s; --pole-teinte: #a9c694; }
.pole--animations { left: 22%; top: 68%; transition-delay: 1.7s; --pole-teinte: #e3c08a; }
.pole-visuel {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 6px rgba(10,30,28,0.55), 0 0 0 7px var(--pole-teinte, var(--gold-light)), 0 24px 50px -20px rgba(0,0,0,0.7);
  transition: box-shadow 0.35s, transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.pole-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); transition: transform 0.7s ease; }
.pole-nom { display: block; font-family: var(--font-serif); font-size: clamp(1rem, 2.3vmin, 1.4rem); margin-top: 0.9rem; line-height: 1.2; white-space: nowrap; }
.pole-desc { display: block; font-size: clamp(0.72rem, 1.5vmin, 0.85rem); color: rgba(255,255,255,0.6); margin-top: 0.25rem; line-height: 1.4; }
.pole:hover .pole-visuel, .pole:focus-visible .pole-visuel {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--gold-light), 0 0 0 7px rgba(10,30,28,0.55), 0 0 0 8px var(--pole-teinte, var(--gold-light)), 0 0 40px 6px color-mix(in srgb, var(--pole-teinte, var(--gold-light)) 35%, transparent), 0 28px 60px -20px rgba(0,0,0,0.8);
}
.pole:hover .pole-visuel img { transform: scale(1.06); }
.pole:hover .pole-nom { color: var(--pole-teinte, var(--gold-pale)); }
.pole:focus-visible { outline: none; }
@media (max-width: 600px) {
  .trilogie-plan { width: 96vw; }
  .pole { width: 35%; }
  .pole--sorties { top: 19%; }
  .pole--animations, .pole--terra { top: 67%; }
  .pole--terra { left: 79%; }
  .pole--animations { left: 21%; }
  .pole-desc { display: none; }
  .pole-nom { white-space: normal; font-size: 0.95rem; }
}
html.trilogie-ouverte, html.trilogie-ouverte body { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS ET COMPOSANTS COMMUNS
   ═══════════════════════════════════════════════════════════════════ */
.section { padding: var(--space-section) var(--pad-h); }
.section--alt { background: var(--off-white); }

.section-head { max-width: 640px; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { font-size: 0.97rem; color: var(--text-mid); line-height: 1.8; }

.photo-frame { overflow: hidden; border-radius: var(--radius-m); aspect-ratio: 4/3; box-shadow: var(--shadow-soft); }
.photo-frame--tall { aspect-ratio: 3/4; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandeau photo de séparation — étroit, net et coloré (référence : salicaire de l'accueil) */
.bandeau-photo { position: relative; height: 150px; overflow: hidden; display: block; }
.bandeau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.78) saturate(0.82); }
.bandeau-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,57,77,0.45) 0%, transparent 28%, transparent 72%, rgba(13,57,77,0.45) 100%);
}

@media (max-width: 900px) { .bandeau-photo { height: 100px; } }

/* Accroche : le premier paragraphe porte l'essentiel */
.formule-lead {
  font-family: var(--font-serif); font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.65; color: var(--text-dark); margin-bottom: 1.4rem !important;
  padding-left: 1.1rem; border-left: 2px solid var(--f-color);
}

/* Bloc de contact court en bas de page (sombre) */
.section-contact-court { background: var(--grad-nuit); color: #fff; padding: var(--space-section) var(--pad-h); border-top: 1px solid rgba(185,162,122,0.25); }
.contact-court-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.contact-court-inner h2 { color: #fff; margin-bottom: 1rem; }
.contact-court-inner h2 em { color: var(--gold-light); }
.contact-court-inner p { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.8; }
.contact-court-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.contact-court-line { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.contact-court-line a { color: var(--gold-pale); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-court-line a:hover { border-bottom-color: currentColor; }
@media (max-width: 860px) { .contact-court-inner { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .fade-in { opacity: 1; transform: none; }
  .hero::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   IDENTITÉS DES TROIS PÔLES
   Toutes les pages gardent la palette de la board (canard, bleu profond,
   nuit, or, blanc d'eau). Chaque pôle n'apporte qu'une ambiance, à la
   teinte de sa page (--f-color / --f-light, déclarées dans la page) :
   Animations — abricot : petit soleil autour du rond.
   Sorties & cours — du rose (Initio) à l'indigo (Cognitio), Via en or :
     anneau dégradé autour du rond, libellés à la teinte.
   Paysagiste & Co — vert : cernes de bois autour du rond.
   ═══════════════════════════════════════════════════════════════════ */
/* Les trois pôles gardent la palette de marque ; seule une ambiance change :
   un halo très doux à la teinte du pôle (--f-light) derrière le rond, l'anneau
   et un brin végétal au trait à cette teinte (--f-color). */
body[data-pole] {
  --p-seuil: radial-gradient(ellipse 48% 72% at 80% 40%, color-mix(in srgb, var(--f-light) 30%, transparent), transparent 70%),
             linear-gradient(172deg, #f7f4ec 0%, #f0ebdf 60%, #e8e1d1 100%);
  --p-anneau: color-mix(in srgb, var(--f-color) 55%, transparent);
}
/* Un brin au trait (graminée, feuille, crosse) pousse du filet du seuil, à la teinte du pôle */
body[data-pole] .hero--rond::after {
  display: block; content: ''; position: absolute; top: auto; right: auto;
  left: 47%; bottom: 0; width: clamp(60px, 8vw, 96px); aspect-ratio: 120 / 200;
  background: color-mix(in srgb, var(--f-color) 70%, transparent);
  -webkit-mask: url("../trait/brin.svg") center bottom / contain no-repeat;
          mask: url("../trait/brin.svg") center bottom / contain no-repeat;
  opacity: 0.55; animation: none; pointer-events: none;
}
@media (max-width: 760px) { body[data-pole] .hero--rond::after { left: auto; right: 1.2rem; width: 54px; opacity: 0.4; } }

/* Teintes des formules de Sorties & cours : du rose vers l'indigo */
.formula-initio { --f-color: #5a8a6a; --f-light: #b9d4bf; }
.formula-immersio { --f-color: #4a7f6f; --f-light: #a9cbbf; }
.formula-exploratio { --f-color: #3a7372; --f-light: #9fc6c3; }
.formula-cognitio { --f-color: #2c6670; --f-light: #93bcc2; }
.formula-via { --f-color: #8c7650; --f-light: #e3d9c4; }

.formula-terra-viva { --f-color: #3f6e4a; --f-light: #a9c694; }

/* ── Seuil des pages de pôle : texte et rond ── */
body[data-pole] .hero { background: var(--p-seuil); }
.hero--rond { min-height: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero--rond::after { display: none; }                 /* le rond remplace le petit motif */
.hero--rond .hero-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 clamp(2rem, 6vw, 5rem);
}
.hero--rond .hero-inner > :not(.hero-rond) { grid-column: 1; }
.hero-rond {
  grid-column: 2; grid-row: 1 / span 8; position: relative;
  width: clamp(220px, 27vw, 330px); aspect-ratio: 1; margin: 1rem 1.5rem 1rem 0;
}
.hero-rond img {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--p-anneau), 0 30px 60px -30px rgba(0,0,0,0.55);
}
/* Ronds dans l'eau fixes autour de la photo (comme dans le logo) */
.hero-rond::before {
  content: ''; position: absolute; inset: -34%; z-index: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 21px, var(--p-anneau) 21px 22px);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%, transparent 70%);
          mask: radial-gradient(circle, transparent 36%, #000 37%, transparent 70%);
  opacity: 0.32;
}
/* Une onde qui part de la photo, de loin en loin */
.hero-onde, .hero-rond::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  border: 1px solid var(--p-anneau); opacity: 0;
  animation: onde-rond 9s cubic-bezier(.2,.6,.35,1) 1s infinite;
}
.hero-rond::after { animation-delay: 1.7s; }
@keyframes onde-rond { 0% { transform: scale(1); opacity: 0.75; } 45%, 100% { transform: scale(1.6); opacity: 0; } }

/* Sorties & cours : un fin anneau qui passe du rose à l'indigo, et tourne lentement */
/* Agenda : palette de marque, une touche de soleil pour l'événementiel ;
   un petit soleil jaune fait le tour du rond, comme une date qui approche */
/* Paysagiste & Co : des cernes de bois, plus serrés, verts */
body[data-pole="paysage"] .hero-rond::before {
  background: repeating-radial-gradient(circle, transparent 0 13px, var(--p-anneau) 13px 14px, transparent 14px 23px, var(--p-anneau) 23px 23.6px);
  opacity: 0.26;
}

/* Seuil clair (Animations, Paysagiste & Co) : textes et menu foncés */
body[data-seuil="clair"] .hero { color: var(--text-dark); }
body[data-seuil="clair"] .hero h1 { color: var(--teal-deep); }
body[data-seuil="clair"] .hero h1 .h1-sub { color: var(--text-mid); }
body[data-seuil="clair"] .hero-eyebrow { color: var(--f-color); }
body[data-seuil="clair"] .hero-pitch { color: var(--text-mid); }
body[data-seuil="clair"] .hero-marque { color: var(--teal-mid); }

body[data-seuil="clair"] #main-nav .marque--haut { display: none; }
body[data-seuil="clair"] #main-nav .marque--bas { display: flex; }
body[data-seuil="clair"] #main-nav .nav-links a { color: var(--text-mid); }
body[data-seuil="clair"] #main-nav .nav-links a:hover { color: var(--teal-mid); }
body[data-seuil="clair"] #main-nav .nav-links a.is-current { color: var(--teal-deep); border-bottom-color: var(--gold); }
body[data-seuil="clair"] #main-nav .nav-links .nav-formules { color: var(--gold); }
body[data-seuil="clair"] #main-nav .nav-links .nav-contact-btn { color: var(--canard-nuit); }
body[data-seuil="clair"] .nav-burger span { background: var(--teal-deep); }
body[data-pole] #main-nav.scrolled { background: color-mix(in srgb, var(--white) 94%, transparent); }

@media (max-width: 760px) {
  .hero--rond .hero-inner { grid-template-columns: 1fr; }
  .hero-rond { grid-column: 1; grid-row: auto; width: 150px; margin: 0 0 1.8rem 0.4rem; }
  .hero-rond::before { inset: -40%; }
}

/* ── Rondeur dans les pages de pôle ── */
body[data-pole] .hero-eyebrow::before {             /* une goutte et son rond, à la place du tiret */
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 2px, transparent 2.5px);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
/* Cartes plus douces */
/* ═══════════════════════════════════════════════════════════════════
   PAGES JURIDIQUES — mentions légales, conditions générales
   Une seule colonne centrée, longue et dense, posée sur un panneau à
   peine plus clair que la nuit qui l'entoure ; bords assombris, filet
   doré. Intertitres en capitales dorées, sans numéros ni encadrés.
   Une page qui ferme, où l'on ne s'attarde pas.
   ═══════════════════════════════════════════════════════════════════ */
.hero--juridique {
  min-height: 0; padding-bottom: 2.6rem;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, #10303d 0%, #0b1f28 55%, #071419 100%);
}
.hero--juridique::after { display: none; }
.hero--juridique .hero-inner { max-width: 760px; text-align: center; }
.hero--juridique .hero-eyebrow { justify-content: center; color: rgba(185,162,122,0.85); }
.hero--juridique h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0.01em; }
.hero--juridique .h1-sub { color: rgba(255,255,255,0.55); }
.juridique {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(16,48,61,0.55), transparent 70%),
    linear-gradient(180deg, #071419 0%, #08171d 40%, #050f13 100%);
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad-h) var(--space-section);
}
.juridique-inner { max-width: 760px; margin: 0 auto; }
.juridique-texte {
  background: linear-gradient(180deg, rgba(20,44,54,0.55) 0%, rgba(12,30,37,0.55) 100%);
  border: 1px solid rgba(185,162,122,0.22); border-top: 1px solid rgba(201,180,139,0.6); border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(5,15,19,0.6), 0 40px 80px -40px rgba(0,0,0,0.8);
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.3rem, 5vw, 3.4rem);
}
.juridique-texte section { padding: 1.35rem 0; border-top: 1px solid rgba(255,255,255,0.06); }
.juridique-texte section:first-child { border-top: none; padding-top: 0; }
.juridique-texte h2 {
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: #ece6d8;
  margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.8rem;
}
.juridique-texte h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(185,162,122,0.35), transparent); }
.juridique-texte p {
  font-size: 0.86rem; line-height: 1.8; color: rgba(232,236,236,0.72);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin-bottom: 0.6rem;
}
.juridique-texte p:last-child { margin-bottom: 0; }
.juridique a { color: #d8c9a8; text-decoration: none; border-bottom: 1px solid rgba(216,201,168,0.3); }
.juridique a:hover { color: #fff; border-bottom-color: currentColor; }
.a-completer {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap;
  color: #c9b48b; border-bottom: 1px dashed rgba(201,180,139,0.7); padding: 0 0.1rem;
}
.juridique-sceau { display: block; width: 38px; height: auto; margin: 2rem auto 0; opacity: 0.75; }
.juridique-texte .juridique-maj {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(185,162,122,0.22);
  text-align: center; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.32);
}
body:has(main.juridique) .site-footer { background: #050f13; border-top-color: rgba(185,162,122,0.12); }

/* ═══════════════════════════════════════════════════════════════════
   GUIDE — le g du logo, en bas à gauche. Il se balance comme une
   tige dans l'eau, son petit personnage s'agite de temps en temps,
   une onde part de lui. Fenêtre sombre, filet doré, réponses en ronds.
   ═══════════════════════════════════════════════════════════════════ */
.guide { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 95; --derive: 0px; --penche: 0deg; animation: g-flotte 9s ease-in-out infinite; }
/* Il nage sur place : une petite boucle lente, jamais tout à fait la même */
@keyframes g-flotte {
  0%, 100% { translate: 0 0; }
  25% { translate: 4px -5px; }
  50% { translate: -2px -8px; }
  75% { translate: -4px -3px; }
}
.guide.is-ouvert { animation-play-state: paused; }
.guide-g {
  position: relative; width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--gold-line);       /* version claire du logo, aux couleurs de la page */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 55%, transparent), 0 10px 24px -12px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(calc(16px + var(--derive))) scale(0.8); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1), border-color 0.25s;
}
.guide.is-present .guide-g { opacity: 1; transform: translateY(var(--derive)) rotate(var(--penche)); pointer-events: auto; }
/* Le saut : il bondit, se tourne vers le texte, retombe et rebondit */
.guide.is-saut .guide-g { animation: g-saut 1.5s cubic-bezier(.3,.7,.3,1); }
@keyframes g-saut {
  0% { translate: 0 0; rotate: 0deg; }
  22% { translate: 6px -34px; rotate: 14deg; }
  42% { translate: 10px 0; rotate: -6deg; }
  58% { translate: 12px -12px; rotate: 6deg; }
  74% { translate: 8px 0; rotate: -2deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
.guide.is-saut .guide-onde { animation-play-state: running; }
.guide-g:hover .guide-dessin .g-perso { animation: g-sursaut 1.4s ease-in-out infinite; }
.guide-g:hover, .guide-g:focus-visible, .guide.is-ouvert .guide-g { border-color: var(--gold-light); outline: none; }
.guide-dessin { width: 20px; height: auto; overflow: visible; }
.guide-dessin .g-corps path { fill: var(--gold); }
.guide-dessin .g-perso path { fill: var(--teal-mid); }
/* sur la trilogie : un rond de nuit verte, fondu dans le voile, g doré */
html.trilogie-ouverte body .guide-g { background: rgba(12,36,32,0.88); border-color: rgba(185,162,122,0.6); box-shadow: 0 0 0 4px rgba(12,36,32,0.35), 0 10px 26px -10px rgba(0,0,0,0.6); }
html.trilogie-ouverte body .guide-dessin .g-corps path { fill: #b9a27a; }
html.trilogie-ouverte body .guide-dessin .g-perso path { fill: #afd6d4; }
/* Balancement de la tige, depuis la boucle basse du g */
.guide-dessin .g-corps { transform-box: view-box; transform-origin: 50% 85%; animation: g-balance 6s ease-in-out infinite; }
@keyframes g-balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* Le petit personnage, plus malicieux : un sursaut de temps en temps */
.guide-dessin .g-perso { transform-box: fill-box; transform-origin: 30% 100%; animation: g-sursaut 11s ease-in-out 3s infinite; }
@keyframes g-sursaut {
  0%, 78%, 100% { transform: none; }
  82% { transform: translateY(-14%) rotate(-12deg); }
  86% { transform: translateY(0) rotate(8deg); }
  90% { transform: translateY(-6%) rotate(-4deg); }
  94% { transform: none; }
}
.guide-onde { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold-light); opacity: 0; animation: onde-guide 3.6s cubic-bezier(.2,.6,.35,1) 2s infinite; animation-play-state: paused; }
@keyframes onde-guide { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
.guide.is-invite .guide-onde, .guide-g:hover .guide-onde { animation-play-state: running; }

/* La bulle vit à part (.guide-bulle, déplacée par gwazh.js) : elle suit le personnage
   en douceur, toujours droite ; son coin pointe vers lui. */
.guide-bulle { position: fixed; left: 0; top: 0; z-index: 96; width: 0; height: 0; pointer-events: none; will-change: transform; }
.guide-invite {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-start; gap: 0.2rem;
  background: var(--paper); border-radius: 18px 18px 18px 4px;
  box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-card);
  transform-origin: 0 100%;
  opacity: 0; visibility: hidden; translate: -8px 0; pointer-events: none;
  transition: opacity 0.5s, translate 0.5s, visibility 0s linear 0.5s;
}
.guide-bulle.is-invite .guide-invite { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition: opacity 0.4s 0.05s, translate 0.4s 0.05s; }
.guide-invite-texte {
  background: none; border: none; cursor: pointer; text-align: left; white-space: nowrap;
  font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; color: var(--text-dark);
  padding: 0.45rem 0.2rem 0.5rem 0.95rem;
}
.guide-invite-texte span { display: block; font-family: var(--font-sans); font-style: normal; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 0.1rem; }
.guide-invite-texte:hover span, .guide-invite-texte:focus-visible span { color: var(--teal-mid); }
.guide-invite-texte:focus-visible, .guide-invite-fermer:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 12px; }
.guide-invite-fermer {
  width: 26px; height: 26px; margin: 0.3rem 0.3rem 0 0; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); color: var(--text-light); font-size: 0.95rem; line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.guide-invite-fermer:hover { border-color: var(--gold); color: var(--text-dark); }
.guide-bulle.bulle-gauche .guide-invite { left: auto; right: 0; border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; translate: 8px 0; }
.guide-bulle.bulle-gauche.is-invite .guide-invite { translate: 0 0; }
/* Il butine : petits tremblements d'ailes, le personnage s'affaire */
.guide.is-butine .guide-g { animation: butine 0.5s ease-in-out 3; }
@keyframes butine { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }
.guide.is-butine .guide-dessin .g-perso { animation: g-sursaut 1.2s ease-in-out infinite; }
.guide.is-invite .guide-dessin .g-corps { animation-duration: 1.6s; }

/* ── Espace de discussion : plein écran, sobre ──
   Une colonne centrée : emblème, titre, sous-titre, puis la zone
   d'écriture qui prend toute la place tant que rien n'est écrit ; les
   idées en ronds, centrées dessous. Dès le premier échange, la
   conversation occupe la hauteur et la zone d'écriture se resserre.
   Couleurs : celles de la page derrière (variables --e-*, réglées plus
   bas pour les pages claires et pour la trilogie). */
.espace-chat {                     /* une grande bulle posée sur la page, qui naît du g */
  /* thème sombre par défaut : la nuit de la page et son accent */
  --e-fond: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--teal-mid) 24%, transparent), transparent 70%), var(--grad-nuit);
  --e-texte: #fff; --e-texte-doux: rgba(255,255,255,0.88); --e-sous: var(--gold-pale);
  --e-bord: color-mix(in srgb, var(--gold-light) 45%, transparent);
  --e-bulle-g: rgba(255,255,255,0.09); --e-bulle-g-texte: rgba(255,255,255,0.92);
  --e-saisie: rgba(0,0,0,0.18); --e-placeholder: rgba(255,255,255,0.45);
  --e-rond: rgba(255,255,255,0.04); --e-rond-survol: color-mix(in srgb, var(--gold-light) 14%, transparent);
  --e-fermer: rgba(255,255,255,0.3); --e-note: rgba(255,255,255,0.38); --e-defil: rgba(255,255,255,0.25);
  --e-accent: var(--gold-light); --e-accent-texte: var(--canard-nuit); --e-accent-survol: var(--gold-pale);
  position: fixed; z-index: 96; left: 1.2rem; bottom: calc(1.2rem + 70px);
  width: min(640px, calc(100vw - 2.4rem)); height: min(620px, calc(100vh - 1.2rem - 70px - 5.5rem));
  display: flex; justify-content: center; color: var(--e-texte);
  padding: 1.6rem 1.6rem 1.1rem; border-radius: 28px 28px 28px 8px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px var(--e-bord), 0 40px 90px -30px rgba(0,0,0,0.6), 0 12px 30px -12px rgba(0,0,0,0.4);
  transform-origin: 28px calc(100% + 40px);
  animation: espace-ouvre 0.5s cubic-bezier(.2,.75,.25,1);
}
.espace-chat[hidden] { display: none; }
@keyframes espace-ouvre { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: none; } }
.espace-fond {
  position: absolute; inset: 0; z-index: -1;
  background: var(--e-fond);
}
.espace-fermer {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--e-fermer); color: var(--e-texte); font-size: 1.25rem; line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.espace-fermer:hover, .espace-fermer:focus-visible { border-color: var(--e-accent); background: var(--e-rond-survol); outline: none; }

.espace-colonne {
  width: 100%; height: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
}
.espace-embleme { width: 38px; height: auto; margin: 0 auto 0.7rem; opacity: 0.95; }
.espace-embleme--clair { display: none; }
.espace-titre {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 3vw, 1.95rem);
  color: var(--e-texte); line-height: 1.15; margin: 0;
}
.espace-sous-titre {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(0.88rem, 1.6vw, 0.98rem);
  color: var(--e-sous); margin: 0.5rem auto 1.2rem; max-width: 30rem; line-height: 1.55;
}
/* Fil de la conversation : vide et replié au départ */
.guide-fil {
  flex: 0 0 auto; min-height: 0; overflow-y: auto; text-align: left;
  display: flex; flex-direction: column; gap: 0.8rem; padding: 0 0.2rem;
  scrollbar-width: thin; scrollbar-color: var(--e-defil) transparent; scroll-behavior: smooth;
}
.espace-chat.a-commence .guide-fil { flex: 1 1 auto; padding: 0.4rem 0.2rem 1.2rem; }
/* une fois la discussion lancée, l'en-tête se fait discret pour lui laisser la place */
.espace-chat.a-commence .espace-embleme { width: 32px; margin-bottom: 0.4rem; }
.espace-chat.a-commence .espace-titre { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: 1rem; }
.espace-chat.a-commence .espace-sous-titre { display: none; }
/* Messages du fil (.guide-msg) — à ne pas confondre avec la petite bulle flottante (.guide-bulle) */
.guide-msg { max-width: 84%; font-size: 0.96rem; line-height: 1.6; padding: 0.7rem 1.05rem; animation: apparait-bulle 0.4s ease; }
.guide-msg--g { align-self: flex-start; background: var(--e-bulle-g); color: var(--e-bulle-g-texte); border-radius: 4px 18px 18px 18px; }
.guide-msg--vous { align-self: flex-end; background: var(--e-accent); color: var(--e-accent-texte); border-radius: 18px 4px 18px 18px; }
@keyframes apparait-bulle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Zone d'écriture : toute la place avant le premier échange */
.guide-saisie {
  position: relative; flex: 1 1 auto; min-height: 9rem; display: flex;
  border: 1px solid var(--e-bord); border-radius: 26px;
  background: var(--e-saisie); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.guide-saisie:focus-within { border-color: var(--e-accent); box-shadow: 0 0 0 4px var(--e-rond-survol); }
.espace-chat.a-commence .guide-saisie { flex: 0 0 auto; min-height: 0; }
.guide-saisie label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide-saisie textarea {
  flex: 1; min-height: 0; resize: none; font: inherit; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.6; color: var(--e-texte);
  background: transparent; border: none; padding: 1.3rem 4.4rem 1.3rem 1.5rem; text-align: left;
}
.espace-chat.a-commence .guide-saisie textarea { height: 4.6rem; padding-top: 0.95rem; padding-bottom: 0.95rem; font-size: 1rem; }
.guide-saisie textarea::placeholder { color: var(--e-placeholder); font-family: var(--font-serif); font-style: italic; }
.guide-saisie textarea:focus { outline: none; }
.guide-saisie button {
  position: absolute; right: 0.8rem; bottom: 0.8rem;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--e-accent); color: var(--e-accent-texte); border: none; font-size: 1.15rem; line-height: 1;
  transition: background 0.2s, transform 0.2s;
}
.guide-saisie button:hover, .guide-saisie button:focus-visible { background: var(--e-accent-survol); transform: scale(1.06); outline: none; }

/* Idées en ronds, centrées sous la zone d'écriture */
.espace-idees { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.8rem; margin: 1.1rem auto 0.3rem; }
.idee-rond, .guide-choix button {
  width: 5.8rem; height: 5.8rem; border-radius: 50%; padding: 0.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: inherit; font-size: 0.8rem; line-height: 1.3; color: var(--e-texte-doux);
  background: var(--e-rond); border: 1px solid var(--e-bord);
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.idee-rond:hover, .idee-rond:focus-visible, .guide-choix button:hover, .guide-choix button:focus-visible {
  border-color: var(--e-accent); background: var(--e-rond-survol); color: var(--e-texte); transform: translateY(-3px); outline: none;
}
.espace-chat.a-commence .espace-idees { margin-top: 0.9rem; gap: 0.5rem 0.7rem; }
.espace-chat.a-commence .idee-rond { width: 5.2rem; height: 5.2rem; font-size: 0.7rem; }
.guide-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.8rem; margin: 0.2rem 0 0.4rem; animation: apparait-bulle 0.4s ease 0.15s backwards; }
.guide-choix button { width: 5.6rem; height: 5.6rem; font-size: 0.74rem; }
.guide-note { margin-top: 0.5rem; font-size: 0.66rem; color: var(--e-note); }

/* Pages à seuil clair (Animations, Paysagiste & Co) : la bulle prend le fond clair du haut de page */
body[data-seuil="clair"] .espace-chat {
  --e-fond: var(--p-seuil);
  --e-texte: var(--teal-deep); --e-texte-doux: var(--text-mid); --e-sous: var(--gold);
  --e-bord: var(--gold-line);
  --e-bulle-g: rgba(255,255,255,0.78); --e-bulle-g-texte: var(--text-dark);
  --e-saisie: rgba(255,255,255,0.7); --e-placeholder: var(--text-light);
  --e-rond: rgba(255,255,255,0.55); --e-rond-survol: color-mix(in srgb, var(--gold-light) 18%, transparent);
  --e-fermer: var(--border); --e-note: var(--text-light); --e-defil: rgba(0,0,0,0.18);
}
body[data-seuil="clair"] .espace-embleme--sombre { display: none; }
body[data-seuil="clair"] .espace-embleme--clair { display: block; }

/* Sur la trilogie : la feuille de l'entrée sous son voile vert, l'or de la marque */
html.trilogie-ouverte body .espace-chat {
  --gold-light: #b9a27a; --gold-pale: #e3d9c4; --gold-line: rgba(185,162,122,0.55); --gold: #8c7650;
  --teal-deep: #1d5563; --teal-mid: #38818c; --canard-nuit: #0d394d; --paper: #fafbfa; --text-dark: #10222b; --text-mid: #3a4a51; --text-light: #56666c;
  --e-fond: radial-gradient(ellipse 80% 65% at 50% 30%, rgba(20,52,46,0.6), rgba(10,30,30,0.9) 65%, rgba(7,20,22,0.97) 100%),
            url(../feuille-nervure.jpg) center 40% / cover no-repeat, #0c2422;
  --e-texte: #fff; --e-texte-doux: rgba(255,255,255,0.88); --e-sous: #e3d9c4;
  --e-bord: rgba(185,162,122,0.45);
  --e-bulle-g: rgba(255,255,255,0.09); --e-bulle-g-texte: rgba(255,255,255,0.92);
  --e-saisie: rgba(8,26,26,0.5); --e-placeholder: rgba(255,255,255,0.45);
  --e-rond: rgba(255,255,255,0.04); --e-rond-survol: rgba(185,162,122,0.12);
  --e-fermer: rgba(255,255,255,0.3); --e-note: rgba(255,255,255,0.38); --e-defil: rgba(255,255,255,0.25);
  --e-accent: #b9a27a; --e-accent-texte: #0d394d; --e-accent-survol: #e3d9c4;
}
html.trilogie-ouverte body .espace-embleme--sombre { display: block; }
html.trilogie-ouverte body .espace-embleme--clair { display: none; }

@media (max-width: 560px) {
  .espace-chat { left: 0.6rem; right: 0.6rem; width: auto; bottom: calc(0.9rem + 62px); height: calc(100vh - 0.9rem - 62px - 4.6rem); height: calc(100svh - 0.9rem - 62px - 4.6rem); padding: 1.1rem 0.9rem 0.8rem; border-radius: 22px 22px 22px 8px; }
  .espace-fermer { top: 0.6rem; right: 0.6rem; width: 40px; height: 40px; }
  .espace-embleme { width: 36px; margin-bottom: 0.6rem; }
  .espace-sous-titre { margin-bottom: 1rem; }
  .guide-saisie { border-radius: 20px; min-height: 7rem; }
  .espace-idees { gap: 0.5rem; }
  .idee-rond { width: 5.4rem; height: 5.4rem; font-size: 0.7rem; }
  .espace-chat.a-commence .espace-titre, .espace-chat.a-commence .espace-sous-titre { display: none; }
  .espace-chat.a-commence .idee-rond { width: 4.4rem; height: 4.4rem; font-size: 0.62rem; }
}
.guide-carte { background: var(--paper); color: var(--text-dark); border-radius: 18px; padding: 1.1rem 1.2rem 1rem; animation: apparait-bulle 0.45s ease 0.1s backwards; }
.guide-carte-nom { font-family: var(--font-serif); font-size: 1.35rem; color: var(--teal-deep); line-height: 1.1; }
.guide-carte-quoi { font-size: 0.86rem; color: var(--text-mid); margin-top: 0.25rem; }
.guide-carte-prix { font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; color: var(--gold); margin-top: 0.5rem; }
.guide-carte-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.9rem; }
.guide-carte .btn-gold { padding: 0.65rem 1.2rem; font-size: 0.7rem; }
.guide-voir { font-size: 0.82rem; color: var(--teal-mid); }
.guide-encore { margin-top: 0.8rem; background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem; color: var(--text-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* sur la trilogie, le guide vole au-dessus des trois ronds ; sa bulle de discussion aussi */
html.trilogie-ouverte .guide { z-index: 215; }
html.trilogie-ouverte .guide-bulle { z-index: 216; }
html.trilogie-ouverte .espace-chat { z-index: 220; }
@media (max-width: 560px) {
  .guide { left: 0.9rem; bottom: 0.9rem; }
  .guide-g { width: 52px; height: 52px; }
  .guide-invite { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-dessin .g-corps, .guide-dessin .g-perso, .guide-onde, .guide, .guide-g { animation: none !important; }
}

/* Accueil : l'entrée suffit ; en haut à droite, seulement le contact */
/* pas de guide sur les pages juridiques : on ne s'y attarde pas */
body:has(main.juridique) .guide { display: none; }
/* pages juridiques : le menu reste sombre au défilement */
body:has(main.juridique) #main-nav.scrolled { background: rgba(7,20,25,0.96); border-bottom-color: rgba(185,162,122,0.18); }
body:has(main.juridique) #main-nav.scrolled .marque--haut { display: flex; }
body:has(main.juridique) #main-nav.scrolled .marque--bas { display: none; }
body:has(main.juridique) #main-nav.scrolled .nav-links a { color: rgba(255,255,255,0.82); }
body:has(main.juridique) #main-nav.scrolled .nav-links a:hover { color: #fff; }
body:has(main.juridique) #main-nav.scrolled .nav-links .nav-formules { color: var(--gold-light); }
body:has(main.juridique) #main-nav.scrolled .nav-links .nav-contact-btn { color: var(--canard-nuit); }
body:has(main.juridique) #main-nav.scrolled .nav-burger span { background: #fff; }
/* sur la trilogie, la bulle d'invitation prend aussi le ton du voile */
html.trilogie-ouverte .guide-invite { background: rgba(12,36,32,0.92); box-shadow: 0 0 0 1px rgba(185,162,122,0.5), 0 12px 28px -14px rgba(0,0,0,0.6); }
html.trilogie-ouverte .guide-invite-texte { color: #f1ece0; }
html.trilogie-ouverte .guide-invite-texte span { color: #b9a27a; }
html.trilogie-ouverte .guide-invite-fermer { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
html.trilogie-ouverte .guide-invite-fermer:hover { border-color: #b9a27a; color: #fff; }
/* pôle à seuil sombre (Sorties & cours) : le rond prend la nuit du pôle */
body[data-seuil="sombre"] .guide-g { background: var(--canard-nuit); border-color: var(--gold-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--canard-nuit) 35%, transparent), 0 10px 26px -10px rgba(0,0,0,0.55); }
body[data-seuil="sombre"] .guide-dessin .g-corps path { fill: var(--gold-light); }
body[data-seuil="sombre"] .guide-dessin .g-perso path { fill: var(--teal-light); }

/* La saison de chaque domaine, sous la ligne : pour choisir une date où il y a quelque chose à voir */
.ff-saison { display: block; font-family: var(--font-serif); font-style: italic; font-size: 0.86rem; color: var(--f-color); opacity: 0.85; margin-top: 0.1rem; }

.ff-prix { background: var(--off-white); padding: var(--space-section) var(--pad-h); text-align: center; }
.ff-prix-inner { max-width: 680px; margin: 0 auto; }
.ff-montants { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.5rem clamp(2.5rem, 7vw, 5rem); }
.ff-duree { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--f-color); margin-bottom: 0.3rem; }
.ff-somme { font-family: var(--font-serif); font-size: clamp(2.3rem, 5vw, 3.1rem); line-height: 1.05; color: var(--teal-deep); }
.ff-pour { font-size: 0.92rem; color: var(--text-mid); margin-top: 0.4rem; }
.ff-paliers { font-size: 0.84rem; color: var(--text-light); margin-top: 0.35rem; }
.ff-paliers em { font-family: var(--font-serif); }
.ff-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin: 2.4rem 0 2rem; }
.ff-actions .btn-ghost-teal { padding-left: 1.5rem; padding-right: 1.5rem; }
.ff-conditions { font-size: 0.82rem; color: var(--text-light); line-height: 1.8; max-width: 38em; margin: 0 auto; }
.ff-conditions a { color: var(--teal-mid); }

@media (max-width: 640px) {
  
  
  .ff-actions { flex-direction: column; align-items: stretch; }
}

/* Investissement / difficulté d'une formule : cinq petites feuilles ; la cinquième n'est jamais remplie (« 5, ce serait reprendre Gwazh »).
   Feuilles pleines à la teinte de la formule, les autres au trait. Via : toutes au trait. */
.niveau { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.2rem 0 1.7rem; }
.niveau-titre { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-light); }
.feuilles { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.feuilles i {
  display: block; width: 11px; height: 11px; border-radius: 0 100% 0 100%; transform: rotate(30deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f-color) 55%, transparent);
}
.feuilles i.on { background: var(--f-color); box-shadow: none; }
.niveau .feuilles { gap: 6px; }
.niveau .feuilles i { width: 15px; height: 15px; }
.niveau-libelle { font-family: var(--font-serif); font-size: 1.02rem; color: var(--f-color); }
.niveau-libelle small { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-light); margin-left: 0.6rem; }

/* ═══════════════════════════════════════════════════════════════════
   ROUE DES SAISONS (Cognitio) — la plante au centre, chaque domaine en
   rond autour, comme des ronds dans l'eau ; l'arc d'un rond couvre ses
   mois (janvier en haut, sens horaire) ; un point doré marque le jour.
   ═══════════════════════════════════════════════════════════════════ */
.roue {
  width: min(940px, calc(100vw - 2 * var(--pad-h))); position: relative; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 1.5rem clamp(2rem, 6vw, 4.5rem);
  margin: 2.6rem 0 2.8rem;
}
.roue-dessin { width: 100%; height: auto; display: block; overflow: visible; }
.roue-fonds circle { fill: none; stroke: color-mix(in srgb, var(--f-color) 14%, transparent); stroke-width: 1; }
.roue-arc { fill: none; stroke-linecap: round; }
.roue-arc--1 { stroke: var(--f-color); stroke-width: 9; }
.roue-arc--2 { stroke: color-mix(in srgb, var(--f-color) 55%, transparent); stroke-width: 7; }
.roue-arc--3 { stroke: color-mix(in srgb, var(--f-color) 45%, transparent); stroke-width: 3.2; stroke-dasharray: 0.1 10; }
.roue-arc--4 { stroke: var(--gold); stroke-width: 1.4; }
.roue-mois text { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em; fill: var(--text-light); text-anchor: middle; dominant-baseline: central; }
.roue-coeur { fill: var(--paper); stroke: var(--gold-line); stroke-width: 1; }
.roue-plante { font-family: var(--font-serif); font-style: italic; font-size: 15px; fill: var(--teal-deep); text-anchor: middle; dominant-baseline: central; }
.roue-maintenant[hidden] { display: none; }
.roue-maintenant circle { fill: var(--gold-light); stroke: var(--paper); stroke-width: 2; }
.roue-maintenant { animation: roue-pouls 3.2s ease-in-out infinite; transform-box: view-box; }
@keyframes roue-pouls { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.roue-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.roue-legende li {
  position: relative; padding-left: 2.2rem;
  font-family: var(--font-serif); font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.4; color: var(--teal-deep);
}
.roue-legende li::before {                 /* la pastille : le rond auquel la ligne répond */
  content: ''; position: absolute; left: 0; top: 0.32em; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
}
.roue-legende li[data-anneau="1"]::before { border: 4px solid var(--f-color); }
.roue-legende li[data-anneau="2"]::before { border: 3px solid color-mix(in srgb, var(--f-color) 55%, transparent); }
.roue-legende li[data-anneau="3"]::before { border: 2px dotted color-mix(in srgb, var(--f-color) 60%, transparent); }
.roue-legende li[data-anneau="4"]::before { border: 1.5px solid var(--gold); }
.roue-legende .ff-saison { display: block; font-size: 0.86rem; margin-top: 0.2rem; }

@media (max-width: 760px) {
  .roue { grid-template-columns: 1fr; width: 100%; left: 0; transform: none; }
  .roue-dessin { max-width: 340px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .roue-maintenant { animation: none; } }

/* Agenda : à part, tout à droite après Contact, séparé par un trait doré ;
   un reflet clair passe lentement sur le mot (plus de brillant, moins de jaune) ;
   masqué par gwazh.js s'il n'y a aucune sortie à venir. */
.nav-links .nav-agenda { margin-left: -0.2rem; padding-left: 1.4rem; border-left: 1px solid var(--gold-line); }
.nav-links .nav-agenda[hidden] { display: none; }
#main-nav .nav-links .nav-agenda a {
  color: transparent !important; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #c9b07a 0%, #c9b07a 38%, #fff6dc 50%, #c9b07a 62%, #c9b07a 100%);
  background-size: 260% 100%; animation: agenda-reflet 5.5s ease-in-out infinite;
}
#main-nav.scrolled .nav-links .nav-agenda a, body[data-seuil="clair"] #main-nav .nav-links .nav-agenda a, #main-nav .nav-links.open .nav-agenda a {
  background-image: linear-gradient(100deg, #8c7650 0%, #8c7650 38%, #e3c56e 50%, #8c7650 62%, #8c7650 100%);
}
@keyframes agenda-reflet { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
#main-nav .nav-links .nav-agenda a::after { background: #e8d39a; }
@media (max-width: 1080px) {
  .nav-links.open .nav-agenda { margin-left: 0; padding-left: 0; border-left: none; padding-top: 0.9rem; border-top: 1px solid var(--gold-line); }
}
@media (prefers-reduced-motion: reduce) { #main-nav .nav-links .nav-agenda a { animation: none; background-position: 50% 0; } }
/* Précisions sous chaque domaine de la roue : petites, discrètes */
.roue-legende .roue-precis { display: block; font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.6; color: var(--text-light); margin-top: 0.3rem; }
.roue-legende li { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }

/* ═══ OÙ SORTIR (sorties-cours.html) : secteurs et couleur d'état ═══ */
.lieux {
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(185,162,122,0.16), transparent 70%),
    radial-gradient(50rem 30rem at 0% 100%, rgba(56,129,140,0.08), transparent 70%),
    var(--lin);
  padding: clamp(3rem, 7vw, 5rem) var(--pad-h); border-top: 1px solid var(--gold-line);
}
.lieux-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--teal-deep); margin-bottom: 2.4rem; }
.lieux-titre::after { content: ""; display: block; width: 2.6rem; height: 2px; border-radius: 2px; background: var(--gold-light); margin-top: 0.9rem; }
.lieux-liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3.4rem; }
.lieux-liste li { display: grid; grid-template-columns: 92px 1fr; gap: 0 1.3rem; align-items: start; }
/* médaillon photo du milieu, cerclé d'or comme le logo ; la pastille d'état se pose sur son bord */
/* nombre impair de milieux : le dernier se centre sous les deux colonnes */
.lieux-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 3.4rem) / 2); }
.lieux-photo { position: relative; width: 92px; height: 92px; border-radius: 50%; padding: 4px; background: var(--lin); box-shadow: 0 0 0 1px var(--gold-light), 0 6px 18px rgba(80,60,30,0.12); }
.lieux-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lieux-liste h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.28rem; color: var(--teal-deep); margin: 0.6rem 0 0.4rem; }
.lieux-liste p { font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--encre); }
.lieux-noms { margin-top: 0.4rem; font-size: 0.88rem !important; color: #5a6a6f !important; }
.lieux-mot { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.04em; margin-left: 0.4rem; color: #5a6a6f; }
.lieux-mot:empty { display: none; }
/* pastille : un rond cerné, comme une onde ; vide tant qu'aucun état n'est donné */
.lieux-etat, .lieux-cles i {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--etat, transparent); box-shadow: 0 0 0 1px var(--border);
}
.lieux-etat { position: absolute; right: 4px; bottom: 6px; border: 2px solid var(--lin); }
[data-etat="vert"] { --etat: #4f8a5b; }
[data-etat="orange"] { --etat: #c98a2e; }
[data-etat="rouge"] { --etat: #a9452f; }
[data-etat="noir"] { --etat: #1b2328; }
[data-etat="ideal"] { --etat: var(--teal-mid); }
.lieux-liste [data-etat] .lieux-etat, .lieux-cles i[data-etat] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--etat) 18%, transparent); }
li[data-etat="ideal"] .lieux-etat, .lieux-cles i[data-etat="ideal"] {
  background: conic-gradient(from 0deg, var(--teal-mid), var(--gold-light), var(--teal-mid));
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 5px color-mix(in srgb, var(--gold-light) 25%, transparent);
  animation: lieux-scintille 3.2s ease-in-out infinite;
}
li[data-etat="ideal"] .lieux-mot { color: var(--gold); }
@keyframes lieux-scintille {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 5px color-mix(in srgb, var(--gold-light) 18%, transparent); }
  50%      { box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 8px color-mix(in srgb, var(--gold-light) 34%, transparent); }
}
.lieux-regle { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--gold-line); font-size: 0.95rem; font-weight: 400; color: var(--encre); }
.lieux-legende { margin-top: 0.8rem; font-size: 0.82rem; line-height: 1.9; color: #5a6a6f; }
.lieux-cles { display: inline-block; white-space: nowrap; margin: 0 0.3rem 0 0; }
@media (max-width: 520px) { .lieux-cles { white-space: normal; } }
.lieux-cles i { width: 9px; height: 9px; margin: 0 0.35rem 0 0.7rem; vertical-align: -0.05em; }
@media (max-width: 760px) {
  .lieux-liste { grid-template-columns: 1fr; gap: 1.8rem; }
  .lieux-liste li { grid-template-columns: 72px 1fr; gap: 0 1rem; }
  .lieux-liste li:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .lieux-photo { width: 72px; height: 72px; padding: 3px; }
  .lieux-liste h3 { margin-top: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) { li[data-etat="ideal"] .lieux-etat, .lieux-cles i[data-etat="ideal"] { animation: none; } }

/* Guide : liens sobres sous une réponse (calendrier, agenda, parler en direct) */
.guide-liens { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: -0.1rem 0 0.4rem; animation: apparait-bulle 0.4s ease 0.15s backwards; }
.guide-liens a {
  padding: 0.45rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--e-bord);
  font-size: 0.8rem; color: var(--e-texte); text-decoration: none; background: var(--e-rond);
  transition: border-color 0.25s, background 0.25s;
}
.guide-liens a:hover, .guide-liens a:focus-visible { border-color: var(--e-accent); background: var(--e-rond-survol); outline: none; }

/* ═══ PAGES COURTES CENTRÉES (Paysagiste & Co, expertise) ═══ */
.pcc {
  text-align: center;
  padding: calc(var(--nav-h, 76px) + clamp(2rem, 5vw, 3.5rem)) var(--pad-h) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(46rem 30rem at 50% 12%, color-mix(in srgb, var(--f-light, #a9c694) 30%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at 50% 100%, rgba(185,162,122,0.18), transparent 70%),
    var(--lin);
}
.pcc > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.pcc-rond { position: relative; width: 250px; height: 250px; display: grid; place-items: center; margin-bottom: 1.6rem; }
.pcc-rond i { position: absolute; inset: 28px; border-radius: 50%; border: 1px solid var(--gold-light); opacity: 0; animation: pcc-onde 6s ease-out infinite; }
.pcc-rond i:nth-child(2) { animation-delay: 2s; border-color: color-mix(in srgb, var(--f-color) 55%, transparent); }
.pcc-rond i:nth-child(3) { animation-delay: 4s; }
.pcc-rond span { position: relative; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 7px var(--lin), 0 0 0 8px var(--gold-line), 0 22px 44px -16px rgba(60,50,30,0.4); }
.pcc-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes pcc-onde { 0% { transform: scale(0.9); opacity: 0.85; } 100% { transform: scale(1.32); opacity: 0; } }
.pcc h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.1; color: var(--teal-deep); }
.pcc h1 span { display: block; font-size: 0.62em; margin-top: 0.3rem; color: var(--f-color); }

@media (max-width: 560px) {
  .pcc-rond { width: 210px; height: 210px; }
  .pcc-rond span { width: 160px; height: 160px; }
  
}
@media (prefers-reduced-motion: reduce) { .pcc-rond i { animation: none; display: none; } }

/* ═══ PAYSAGISTE & CO : COMPOSITION BOTANIQUE (terra-viva.html) ═══ */
/* Dessins au trait : se dessinent lentement, puis respirent */
.botanique { position: absolute; pointer-events: none; stroke-width: 0.9; }
.botanique .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace-dessin 3.2s cubic-bezier(.45,.1,.25,1) forwards; }
.botanique .trace:nth-child(3n) { animation-delay: 0.4s; }
.botanique .trace:nth-child(3n+1) { animation-delay: 0.8s; }
.botanique.fade-in .trace { animation: none; }
.botanique.fade-in.visible .trace { animation: trace-dessin 3.2s cubic-bezier(.45,.1,.25,1) forwards; }
@keyframes trace-dessin { to { stroke-dashoffset: 0; } }
.botanique--balance { transform-origin: 50% 100%; animation: balance 16s ease-in-out infinite; }
@keyframes balance { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
.botanique--gauche { left: max(1.5vw, calc(50% - 690px)); bottom: 0; width: clamp(96px, 9vw, 170px); color: color-mix(in srgb, var(--f-color) 55%, transparent); }
.botanique--droite { right: max(1.5vw, calc(50% - 690px)); bottom: 0; width: clamp(104px, 9.5vw, 210px); color: color-mix(in srgb, var(--gold) 60%, transparent); animation-delay: -6s; }

/* Entrée : emblème, titre, cinq prestations, contact */
.pc-entree { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.pc-entree > *:not(.botanique) { position: relative; z-index: 1; }
.pc-embleme span { background: var(--lin); display: grid; place-items: center; }
.pc-embleme img { width: 66% !important; height: auto !important; object-fit: contain; }
.pc-prestations { list-style: none; margin: 1.8rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0; max-width: 70rem !important; }
.pc-prestations li { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.75vw, 1.36rem); color: var(--encre); padding: 0 0.95rem; white-space: nowrap; position: relative; }
.pc-prestations li + li::before { content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-light) 22%, transparent); }

.pc-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem; }
.pc-contact--entree { margin-top: 1.2rem; }
.pc-coord {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border-radius: 999px; text-decoration: none;
  font-size: 1.02rem; color: var(--teal-deep); background: color-mix(in srgb, #fff 55%, var(--lin));
  box-shadow: inset 0 0 0 1px var(--gold-line); transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.pc-coord svg { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pc-coord:hover { box-shadow: inset 0 0 0 1px var(--gold-light), 0 8px 20px -10px rgba(80,60,30,0.4); transform: translateY(-1px); background: #fff; }

/* Photographies : carrousel à défilement natif */

.pc-infos { max-width: 44rem; margin: 2rem auto 0; padding: 0 var(--pad-h); text-align: center; font-size: 1rem; line-height: 1.75; color: var(--encre); }

/* Barre de contact, téléphone seulement */
.pc-barre { display: none; }
@media (max-width: 760px) {
  .botanique--gauche { left: -18px; width: 96px; opacity: 0.7; }
  .botanique--droite { right: -26px; width: 116px; opacity: 0.7; }
  .pc-prestations { flex-direction: column; gap: 0.55rem; }
  .pc-prestations li { padding: 0; font-size: 1.24rem; }
  .pc-prestations li + li::before { position: static; display: block; width: 5px; height: 5px; margin: 0 auto 0.55rem; }
  .pc-coord { width: 100%; max-width: 22rem; justify-content: center; font-size: 1.05rem; }
  
  
  .pc-barre {
    display: flex; position: fixed; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 96; gap: 0.5rem; padding: 0.45rem;
    border-radius: 999px; background: rgba(11,26,34,0.94); box-shadow: 0 0 0 1px rgba(216,196,155,0.5), 0 14px 30px -10px rgba(0,0,0,0.5);
    transform: translateY(140%); transition: transform 0.45s ease;
  }
  body.pc-barre-on .pc-barre { transform: none; }
  .pc-barre a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.7rem 0.4rem; border-radius: 999px; color: #f3e6c4; text-decoration: none; font-size: 0.98rem; }
  .pc-barre a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .pc-barre .pc-barre-devis { background: linear-gradient(135deg, #ecd9ad, #c2a774); color: #0b1a22; font-weight: 500; }
  body.pc-barre-on .guide { bottom: 5.4rem; }
  body.pc-barre-on .back-to-top { bottom: 5.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .botanique .trace, .botanique.fade-in .trace, .botanique.fade-in.visible .trace { animation: none; stroke-dashoffset: 0; }
  .botanique--balance { animation: none; }
  
}
/* Bloc contact unique, sous les prestations */
.pc-projet-haut { margin-top: 2.4rem !important; max-width: 44rem !important; padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.6rem); border-radius: 32px;
  background: color-mix(in srgb, #fff 42%, var(--lin)); box-shadow: 0 0 0 1px var(--gold-line), 0 22px 44px -30px rgba(60,50,30,0.45); }
.pc-projet-haut h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 2.8vw, 1.85rem); color: var(--teal-deep); }
.pc-projet-haut > p:first-of-type { margin: 0.6rem auto 1.4rem; font-size: 1.04rem; line-height: 1.7; color: var(--encre); }
.pc-projet-haut .pc-contact { margin-top: 1.1rem; }
.pc-projet-haut .pc-infos { margin: 1.3rem auto 0; padding: 0; font-size: 0.95rem; color: #5a6a6f; }
/* ═══ EXPERTISE : RÉCIT EN SEPT SÉQUENCES (expertise-jardin.html) ═══ */
/* 2. Terrain : fond lin */
/* 4. Imaginer : lin plus soutenu */
/* les dessins posés dans un bloc qui apparaît se tracent à ce moment-là */
.fade-in .botanique .trace { animation: none; }
.fade-in.visible .botanique .trace { animation: trace-dessin 3.4s cubic-bezier(.45,.1,.25,1) forwards; }
@media (prefers-reduced-motion: reduce) {  .fade-in .botanique .trace, .fade-in.visible .botanique .trace { animation: none; stroke-dashoffset: 0; } }
/* le vernis : un reflet qui traverse lentement la carte au survol */

  /* page Le jardin nourricier : l'emblème en attendant la photo du potager, trois temps en ronds */
.hero-rond--embleme img { object-fit: contain; padding: 18%; background: var(--paper); }

/* Terra Viva : section sous la présentation de Paysagiste & Co ; un fil d'or relie le titre à ses deux propositions */
.pc-terra { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad-h) clamp(4rem, 8vw, 6rem); background: var(--lin, var(--paper)); border-top: 1px solid var(--gold-line); text-align: center; }
.pc-terra-inner { max-width: 820px; margin: 0 auto; }
.pc-terra-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.1; color: var(--teal-deep); }
.pc-terra-titre span { display: block; margin-top: 0.45rem; font-family: var(--font-sans); font-size: 0.36em; color: var(--f-color); }
.pc-terra-texte { max-width: 34rem; margin: 1.1rem auto 0; font-size: 1rem; line-height: 1.75; color: var(--encre, var(--text-dark)); }

/* ═══ INDEX DES FORMULES (Sorties & cours, Animations) : une ligne par formule ═══ */
.index-formules { background: var(--white); padding: clamp(3rem, 7vw, 5rem) var(--pad-h) var(--space-section); }
.index-inner { max-width: 920px; margin: 0 auto; }
.index-groupe {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-light); margin: 3rem 0 0.7rem;
}
.index-groupe:first-child, .bandeau-agenda + .index-groupe { margin-top: 0; }
.index-liste { list-style: none; border-top: 1px solid var(--border); }
.index-ligne {
  display: grid; grid-template-columns: 76px 1fr 12rem 10rem; align-items: center; gap: 1.7rem;
  padding: 1.15rem 0.6rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: background 0.25s;
}
.index-ligne:hover, .index-ligne:focus-visible { background: var(--paper); outline: none; }
.index-rond {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--f-color), 0 0 0 4px var(--white), 0 0 0 5px color-mix(in srgb, var(--f-color) 30%, transparent);
}
.index-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.index-nom { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.1; color: var(--f-color); }
.index-nom span { display: block; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-mid); margin-top: 0.3rem; }
.index-duree { font-size: 0.9rem; color: var(--text-mid); }
.index-niveau { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; color: var(--f-color); margin-bottom: 0.1rem; }
.index-prix { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text-dark); text-align: right; }
.index-prix small { display: block; font-family: var(--font-sans); font-size: 0.72rem; color: var(--text-light); margin-top: 0.15rem; }
.index-pied { margin-top: 2.6rem; font-size: 0.88rem; color: var(--text-light); }
.index-pied a { color: var(--teal-mid); }
@media (max-width: 760px) {
  .index-ligne { grid-template-columns: 66px 1fr; grid-template-areas: "rond nom" "rond infos"; gap: 0.3rem 1.15rem; }
  .index-rond { grid-area: rond; width: 66px; height: 66px; align-self: start; }
  .index-nom { grid-area: nom; font-size: 1.35rem; }
  .index-duree, .index-prix { grid-area: infos; font-size: 0.82rem; }
  .index-duree { padding-right: 5.5rem; }
  .index-prix { justify-self: end; }
}

/* ═══ ANIMATIONS — Officina : même composition que Sorties & cours, quelques touches orangées et jaunes ═══ */

/* Officina : feuilles « possibles » selon l'atelier, en demi-teinte */
.feuilles i.peut { background: color-mix(in srgb, var(--f-color) 35%, transparent); box-shadow: none; }

/* Terra Viva : deux propositions en médaillons, comme les ronds du site ; ni encadré ni bouton */
.pc-terra-inner { position: relative; z-index: 1; }

/* Offres rattachées à une formule (Terra Viva) : en retrait, reliées par un filet d'or */

.index-rond--embleme { background: var(--paper); }
.index-rond--embleme img { object-fit: contain; padding: 14%; }

/* bloc de contact sans montant (pages pôles) : moins haut */
.ff-prix:not(:has(.ff-montants)) { padding-top: clamp(2.2rem, 5vw, 3rem); padding-bottom: clamp(2.2rem, 5vw, 3rem); }
.ff-prix:not(:has(.ff-montants)) .ff-actions { margin-top: 0; }

/* Terra Viva sur Paysagiste & Co : le titre de la formule, puis ses deux propositions en lignes, à gauche */
.pc-terra-liste { max-width: 760px; margin: 2rem auto 0; text-align: left; border-top-color: var(--gold-line); }
.pc-terra-liste .index-ligne { grid-template-columns: 76px 1fr 11rem 7rem; }
.pc-terra-liste .index-ligne:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
@media (max-width: 760px) { .pc-terra-liste .index-ligne { grid-template-columns: 66px 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   FICHE FORMULE (30 octobre 2026) — gabarit unique des pages formules :
   Initio, Immersio, Exploratio, Cognitio, Via, Officina, Le jardin nourricier, L'Expertise.
   haut de page rond → repères → récit et deux photos → En pratique + Tarif sur fond lin.
   La teinte de la formule (--f-color) ne colore que les libellés et le brin.
   ═══════════════════════════════════════════════════════════════════ */
.fiche { background: var(--paper); padding: clamp(2.6rem, 6vw, 4.2rem) var(--pad-h) clamp(3rem, 7vw, 4.8rem); }
.fiche-reperes { max-width: 1000px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.fiche-reperes div { padding: 1.1rem 1.4rem; }
.fiche-reperes div + div { border-left: 1px solid var(--gold-line); }
.fiche-reperes dt { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--f-color); margin-bottom: 0.3rem; }
.fiche-reperes dd { font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.45; color: var(--teal-deep); }
.fiche-corps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fiche-texte { max-width: 36rem; }
/* un brin au trait, à la teinte de la formule, ouvre le récit */
.fiche-texte::before { content: ''; display: block; width: 30px; height: 50px; margin-bottom: 0.9rem; background: color-mix(in srgb, var(--f-color) 75%, transparent);
  -webkit-mask: url('../trait/brin.svg') center bottom / contain no-repeat; mask: url('../trait/brin.svg') center bottom / contain no-repeat; }
.fiche-lead { font-family: var(--font-serif); font-size: clamp(1.18rem, 2.2vw, 1.36rem); line-height: 1.6; color: var(--teal-deep); margin-bottom: 1.3rem; }
.fiche-texte p:not(.fiche-lead) { font-size: 1.02rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 1rem; }
.fiche-texte strong { font-weight: 500; color: var(--teal-deep); }
.fiche-texte a { color: var(--teal-mid); }
/* deux photos : une grande, une plus petite en rond cerclé d'or qui la chevauche (place prévue pour un portrait) */
.fiche-images { position: relative; padding-bottom: 3.2rem; }
.fiche-img { margin: 0; overflow: hidden; }
.fiche-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-img--grande { aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: var(--shadow-soft); }
.fiche-img--petite { position: absolute; left: -2.2rem; bottom: 0; width: 42%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 6px var(--paper), 0 0 0 7px var(--gold-line), 0 16px 32px -14px rgba(13,32,42,0.45); }
/* ateliers d'Officina : une liste, pas des cartes */
.fiche-ateliers { list-style: none; margin: 0.4rem 0 1rem; padding: 0; border-left: 2px solid color-mix(in srgb, var(--f-color) 55%, transparent); }
.fiche-ateliers li { padding: 0.35rem 0 0.35rem 1.1rem; font-size: 0.98rem; line-height: 1.6; color: var(--text-mid); }
.fiche-ateliers span { display: block; font-family: var(--font-serif); font-size: 1.12rem; color: var(--teal-deep); }
.fiche-texte p.fiche-aussi { font-size: 0.96rem; }
/* fin de page : En pratique et Tarif côte à côte, fond lin, filet d'or */
.fiche-fin { background: var(--lin); border-top: 1px solid var(--gold-line); padding: clamp(2.8rem, 6vw, 4.2rem) var(--pad-h); }
.fiche-fin-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fiche-h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 1.75rem); color: var(--teal-deep); margin-bottom: 1.1rem; }
.fiche-infos div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.45rem 0; }
.fiche-infos dt { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--f-color); }
.fiche-infos dd { font-size: 0.96rem; line-height: 1.6; color: var(--encre, var(--text-dark)); }
.fiche-infos a { color: var(--teal-mid); }
.fiche-tarif { padding-left: clamp(0rem, 3vw, 2.6rem); border-left: 1px solid var(--gold-line); }
.fiche-tarif .ff-montants { justify-content: flex-start; gap: 1.6rem 2.6rem; }
.fiche-tarif .ff-actions { justify-content: flex-start; margin: 1.8rem 0 1.1rem; }
.fiche-tarif .ff-conditions { margin: 0; }
@media (max-width: 860px) {
  .fiche-reperes { grid-template-columns: 1fr; }
  .fiche-reperes div + div { border-left: 0; border-top: 1px solid var(--gold-line); }
  .fiche-reperes div { padding: 0.8rem 0.2rem; }
  .fiche-corps, .fiche-fin-inner { grid-template-columns: 1fr; }
  .fiche-images { max-width: 26rem; margin: 0 auto; padding-left: 1.6rem; }
  .fiche-img--petite { left: 0; }
  .fiche-tarif { padding-left: 0; border-left: 0; border-top: 1px solid var(--gold-line); padding-top: 2rem; }
  .fiche-infos div { grid-template-columns: 1fr; gap: 0; }
}

/* lecture : graisse normale pour les textes courants des fiches et du portrait */
main p, main li, main dd { font-weight: 400; }
/* Cognitio : la roue des saisons prend place dans la colonne du récit */
.fiche-texte .roue { width: auto; left: auto; transform: none; grid-template-columns: 1fr; gap: 1.6rem; margin: 2rem 0 0; }
.fiche-texte .roue-dessin { max-width: 320px; margin: 0 auto; }
/* sur ordinateur, les photos accompagnent la lecture quand le récit est long */
@media (min-width: 861px) { .fiche-images { position: sticky; top: 6.5rem; } }

/* ═══════════════════════════════════════════════════════════════════
   OFFICINA (animations.html) — page à part, joyeuse : crème et canard de Gwazh,
   jaunes chauds et orangés lumineux en aplats ; ronds, galets, rangées décalées,
   sections qui se chevauchent en arrondi. Ni soleil ni orbite.
   ═══════════════════════════════════════════════════════════════════ */
body[data-pole="animations"] {
  --o-orange: #b9803f; --o-orange-fonce: #8f5a22; --o-jaune: #d9b56a;
  --o-jaune-doux: color-mix(in srgb, #d9b56a 24%, var(--lin));
  --o-orange-doux: color-mix(in srgb, #b9803f 14%, var(--lin));
}
/* haut de page */

/* la grappe de ronds sur un aplat jaune */

/* titres de section expressifs */

/* contenu d'une prestation : liste numérotée, numéros dans de petits ronds cerclés d'or */
.fiche-h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; color: var(--teal-deep); margin: 1.6rem 0 0.8rem; }
.fiche-contenu { list-style: none; counter-reset: contenu; margin: 0 0 1.3rem; padding: 0; }
.fiche-contenu li { counter-increment: contenu; position: relative; padding: 0.55rem 0 0.55rem 2.9rem; font-size: 1.02rem; line-height: 1.6; color: var(--text-mid); }
.fiche-contenu li::before { content: counter(contenu); position: absolute; left: 0; top: 0.45rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-serif); font-size: 0.95rem; color: var(--teal-deep);
  background: var(--lin); box-shadow: 0 0 0 1px var(--gold-light); }
.fiche-contenu strong { font-weight: 500; color: var(--teal-deep); }

/* ═══════════════════════════════════════════════════════════════════
   QUI SUIS-JE — nuit verte : la feuille de l'entrée sous un voile profond,
   dessins botaniques au trait en vert, photos en arche, en galet, en rond ;
   « Gwazh » au milieu de ronds dans l'eau (le motif du logo).
   ═══════════════════════════════════════════════════════════════════ */
body[data-nav="presentation"] { --qs-nuit: #0b1d1a; --qs-vert: #8fbf86; --qs-vert-pale: #c9e2bf; --qs-creme: #f3ead7; background: var(--qs-nuit); }
.qs-haut { position: relative; overflow: hidden; min-height: min(86vh, 760px); display: flex; align-items: center;
  padding: calc(76px + clamp(2rem, 5vw, 3.5rem)) var(--pad-h) clamp(3.5rem, 8vw, 5.5rem);
  background: url('../feuille-nervure.jpg') center / cover no-repeat; }
.qs-voile { position: absolute; inset: 0; background: radial-gradient(60rem 36rem at 70% 40%, rgba(13,57,77,0.55), transparent 70%), linear-gradient(180deg, rgba(8,26,22,0.55), rgba(11,29,26,0.78) 65%, var(--qs-nuit)); }
.qs-haut-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.qs-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3rem); color: var(--qs-creme); line-height: 1.1; }
.qs-titre span { display: block; margin-top: 0.6rem; font-family: var(--font-sans); font-size: 0.36em; letter-spacing: 0.04em; color: var(--qs-vert-pale); }
.qs-exergue { margin-top: clamp(1.8rem, 4vw, 2.8rem); font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.2; color: #fff; }
.qs-exergue::after { content: ''; display: block; width: 5rem; height: 2px; margin-top: 1.4rem; background: linear-gradient(90deg, var(--gold-light), var(--qs-vert)); }
.qs-rond { position: relative; width: min(100%, 340px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.qs-rond i { position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(185,162,122,0.6); opacity: 0; animation: pcc-onde 6s ease-out infinite; }
.qs-rond i:nth-child(2) { animation-delay: 2s; border-color: rgba(143,191,134,0.55); }
.qs-rond i:nth-child(3) { animation-delay: 4s; }
.qs-rond span { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px #d8c49b, 0 0 0 8px rgba(11,29,26,0.9), 0 0 0 9px rgba(185,162,122,0.45), 0 30px 60px -20px rgba(0,0,0,0.7); }
.qs-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* dessins au trait, en vert, dans les marges */
.qs-trait { position: absolute; pointer-events: none; stroke-width: 0.9; z-index: 0; }
.qs-trait .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace-dessin 3.2s cubic-bezier(.45,.1,.25,1) forwards; }
.qs-trait--gauche { right: max(1vw, calc(50% - 640px)); bottom: 0; width: clamp(90px, 10vw, 170px); color: rgba(143,191,134,0.55); }
.qs-trait--droite { right: max(1vw, calc(50% - 700px)); top: 2rem; width: clamp(110px, 12vw, 210px); color: rgba(143,191,134,0.4); }
/* le corps de la page */
.qs { position: relative; background: var(--qs-nuit); color: rgba(255,255,255,0.86); }
.qs-mouvement { position: relative; overflow: hidden; padding: clamp(3.2rem, 7vw, 5rem) var(--pad-h); }
.qs-texte { position: relative; z-index: 1; max-width: 36rem; }
.qs-texte p { font-size: 1.06rem; line-height: 1.9; color: rgba(255,255,255,0.84); margin-bottom: 1.1rem; }
.qs-lead { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important; line-height: 1.4 !important; color: var(--qs-vert-pale) !important; }
.qs-h2 { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto 1.6rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 3.8vw, 2.6rem); color: var(--qs-creme); }
.qs-mouvement--pieds { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
/* le parcours : les mondes et les savoirs en bandeaux typographiques */
.qs-mouvement--mondes { background: linear-gradient(180deg, var(--qs-nuit), #0f2a26 40%, #0d394d); border-radius: 56px 56px 0 0; }
.qs-bandeau { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto 0.6rem; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.5; color: var(--qs-creme); }
.qs-bandeau span + span::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin: 0 0.6em 0.12em; border-radius: 0 100% 0 100%; transform: rotate(30deg); background: var(--gold-light); vertical-align: middle; }
.qs-bandeau--vert { color: var(--qs-vert-pale); font-style: italic; margin-bottom: clamp(2rem, 5vw, 3rem); }
.qs-bandeau--vert span + span::before { background: var(--qs-vert); }
.qs-deux { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.qs-galet { margin: 0; aspect-ratio: 1; border-radius: 52% 48% 46% 54% / 56% 50% 50% 44%; overflow: hidden; box-shadow: 0 0 0 1px rgba(143,191,134,0.5), 0 30px 60px -24px rgba(0,0,0,0.8); }
/* le partage, et Gwazh dans ses ronds d'eau */
.qs-mouvement--partage { background: #0d394d; }
.qs-mouvement--partage > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.qs-texte--large { max-width: 44rem; margin-left: 0; }
@media (min-width: 861px) { .qs-mouvement--partage > .qs-texte--large { margin-left: max(0px, calc((100% - 1120px) / 2)); } }
.qs-mouvement--partage .qs-h2 { text-align: left; }
.qs-gwazh { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; max-width: 52rem !important; margin-top: clamp(2.5rem, 6vw, 4rem) !important; }
.qs-gwazh p { font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.65; color: var(--qs-creme); }
/* l'invitation */
.qs-invitation { padding: clamp(3rem, 7vw, 4.5rem) var(--pad-h) clamp(3.5rem, 8vw, 5rem); text-align: center; background: linear-gradient(180deg, #0d394d, var(--qs-nuit)); }
.qs-invitation p { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: #fff; }
.qs-boutons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.8rem; margin-top: 1.6rem; }
.qs-lien { color: var(--qs-vert-pale); text-decoration: none; border-bottom: 1px solid rgba(143,191,134,0.6); padding-bottom: 2px; }
.qs-lien:hover { color: #fff; border-color: var(--gold-light); }
@media (max-width: 860px) {
  .qs-haut-inner, .qs-mouvement--pieds, .qs-deux { grid-template-columns: 1fr; }
  .qs-rond { width: 240px; order: -1; }
    .qs-galet { max-width: 280px; justify-self: center; }
  .qs-gwazh { grid-template-columns: 1fr; justify-items: center; text-align: center; }
 
  .qs-mouvement--mondes { border-radius: 36px 36px 0 0; }
  .qs-trait--droite { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) { .qs-rond i, .qs-trait .trace { animation: none; stroke-dashoffset: 0; } }

/* ═══ AGENDA (31 octobre 2026) — dans les codes des autres pages : en-tête rond,
   lignes de Sorties & cours ; le calendrier des prochains mois ; une touche de jaune doux
   (jours de sortie, jour même, anneau des dates), rien de plus. ═══ */
body[data-nav="agenda"] { --ag-jaune: #e2b440; --ag-jaune-doux: color-mix(in srgb, #e2b440 20%, var(--white)); --p-anneau: rgba(226,180,64,0.55); }
body[data-nav="agenda"] .ag-intro { max-width: 32rem; margin: 0.2rem 0 1.5rem; font-size: 1.02rem; line-height: 1.7; color: var(--text-mid); }
/* calendrier */
.ag-calendrier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); margin: 1.2rem 0 clamp(2.4rem, 5vw, 3.4rem); }
.ag-calendrier--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.ag-mois-nom { font-family: var(--font-serif); font-size: 1.15rem; color: var(--teal-deep); margin-bottom: 0.7rem; text-transform: capitalize; }
.ag-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; text-align: center; }
.ag-sem { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; color: var(--text-light); padding-bottom: 0.3rem; }
.ag-case { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 0.86rem; color: var(--text-mid); text-decoration: none; position: relative; }
.ag-case--passe { color: color-mix(in srgb, var(--text-light) 45%, transparent); }
.ag-case--auj { box-shadow: inset 0 0 0 1px var(--teal-mid); color: var(--teal-deep); font-weight: 500; }
.ag-case--sortie { background: var(--ag-jaune-doux); color: var(--teal-deep); font-weight: 500; transition: background .25s, transform .25s; }
.ag-case--sortie::after { content: ''; position: absolute; bottom: 14%; width: 4px; height: 4px; border-radius: 50%; background: var(--ag-jaune); }
.ag-case--sortie.ag-case--auj { box-shadow: inset 0 0 0 1.5px var(--ag-jaune); }
.ag-case--sortie:hover, .ag-case--sortie:focus-visible { background: color-mix(in srgb, var(--ag-jaune) 40%, var(--white)); transform: scale(1.08); outline: none; }
/* sorties en lignes */
.ag-sortie { scroll-margin-top: 6rem; }
.ag-sortie:target .ag-ligne { background: var(--ag-jaune-doux); }
.ag-ligne { transition: background .4s; }
.ag-ligne:hover { background: var(--paper); }
body[data-nav="agenda"] .ag-date { display: grid; place-content: center; text-align: center; line-height: 1; background: var(--white);
  box-shadow: 0 0 0 1.5px var(--ag-jaune), 0 0 0 5px var(--white), 0 0 0 6px color-mix(in srgb, var(--ag-jaune) 40%, transparent); }
.ag-date-jour, .ag-date-mois { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.ag-date-num { font-family: var(--font-serif); font-size: 1.9rem; color: var(--teal-deep); margin: 0.12rem 0; }
body[data-nav="agenda"] .ag-quand { color: var(--soleil-fonce); }
body[data-nav="agenda"] .index-nom { color: var(--teal-deep); overflow-wrap: break-word; hyphens: auto; }
.ag-places { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--text-light); }
body[data-nav="agenda"] .ag-action { display: grid; justify-items: end; gap: 0.15rem; }
.ag-prix { font-family: var(--font-serif); font-size: 1.3rem; color: var(--text-dark); }
.ag-action small { font-family: var(--font-sans); font-size: 0.74rem; color: var(--text-light); }
.ag-reserver { margin-top: 0.45rem; font-family: var(--font-sans); font-size: 0.86rem; color: var(--teal-mid); text-decoration: none; border-bottom: 1px solid var(--gold-line); padding-bottom: 1px; }
.ag-reserver:hover { color: var(--teal-deep); border-color: var(--ag-jaune); }
.ag-vide { margin-top: 1rem; color: var(--text-mid); }
.ag-vide a { color: var(--teal-mid); }
@media (max-width: 960px) { .ag-calendrier--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ag-calendrier, .ag-calendrier--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .ag-case { font-size: 0.74rem; }
  .ag-sem { font-size: 0.6rem; }
  .ag-mois-nom { font-size: 1rem; }
  body[data-nav="agenda"] .ag-ligne .index-nom { font-size: 1.16rem; }
  .ag-date-num { font-size: 1.55rem; }
  body[data-nav="agenda"] .ag-action { grid-area: auto; grid-column: 2; justify-items: start; justify-self: start; margin-top: 0.3rem; }
  body[data-nav="agenda"] .index-duree { padding-right: 0; }
}

/* Qui suis-je : la suite de l'exergue dans le haut de page ; la chenille en petit médaillon */
.qs-exergue::after { display: none; }
.qs-suite { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 2px solid; border-image: linear-gradient(90deg, var(--gold-light), var(--qs-vert), transparent) 1; max-width: 34rem; font-size: 1.08rem; line-height: 1.85; color: rgba(255,255,255,0.88); }
.qs-rond-petit { position: absolute; z-index: 2; margin: 0; width: 34%; aspect-ratio: 1; right: 0; bottom: 4%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--qs-vert), 0 0 0 6px rgba(11,29,26,0.95), 0 0 0 7px rgba(143,191,134,0.5), 0 20px 40px -14px rgba(0,0,0,0.7); }
.qs-rond-petit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-mouvement--mondes { border-radius: 0; }

/* Qui suis-je, 2e reprise : presque noir de bout en bout, sans bleu ; du végétal sur toute la page ;
   une seule police pour le texte courant ; du relief par les ombres et les textures de feuilles. */
body[data-nav="presentation"] { --qs-nuit: #090e0b; background: #090e0b; }
.qs-voile { background: radial-gradient(50rem 30rem at 72% 42%, rgba(40,80,50,0.35), transparent 70%), linear-gradient(180deg, rgba(6,12,8,0.62), rgba(9,14,11,0.86) 65%, #090e0b); }
.qs-mouvement--mondes { background: linear-gradient(180deg, #090e0b, #0c1611 55%, #0a120d); }
.qs-mouvement--partage { background: #090e0b; isolation: isolate; }
.qs-mouvement--partage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../feuille-gouttes.jpg') center / cover no-repeat; opacity: 0.16; filter: saturate(0.8);
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.qs-invitation { position: relative; overflow: hidden; background: #090e0b; border-top: 1px solid rgba(143,191,134,0.18); }
.qs-gwazh p { font-family: var(--font-sans); font-size: 1.06rem; line-height: 1.85; color: rgba(255,255,255,0.84); }
.qs-gwazh { grid-template-columns: 150px minmax(0, 1fr); }
.qs-h2 { color: var(--qs-vert-pale); }
.qs-trait { color: rgba(143,191,134,0.42); }
.qs-trait--partage { left: max(0.5vw, calc(50% - 720px)); bottom: 0; width: clamp(90px, 9vw, 150px); }
.qs-trait--fin { right: max(1vw, calc(50% - 640px)); bottom: -10px; width: clamp(80px, 8vw, 130px); color: rgba(143,191,134,0.3); }
.qs-galet, .qs-rond span { box-shadow: 0 0 0 1px rgba(143,191,134,0.45), 0 40px 70px -26px rgba(0,0,0,0.95), 0 0 60px -10px rgba(60,110,60,0.35); }
@media (max-width: 860px) { .qs-gwazh { grid-template-columns: 1fr; } .qs-trait--partage { opacity: 0.5; } }

/* Fiches formules : plus de bandeau en cases ni de colonnes libellé / valeur.
   Les repères deviennent une ligne de texte séparée par de petites feuilles ; « En pratique » se lit en phrases. */
.fiche-reperes { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 0; border: 0; text-align: center; }
.fiche-reperes div, .fiche-reperes div + div { padding: 0; border: 0; display: inline-flex; align-items: baseline; gap: 0.45rem; }
.fiche-reperes div + div::before { content: ''; display: inline-block; align-self: center; width: 9px; height: 9px; margin: 0 1.1rem; border-radius: 0 100% 0 100%; transform: rotate(30deg); background: color-mix(in srgb, var(--f-color) 70%, transparent); }
.fiche-reperes dt { margin: 0; font-size: 0.82rem; color: var(--f-color); }
.fiche-reperes dd { font-size: 1.12rem; }
.fiche-infos div { display: block; padding: 0.35rem 0; }
.fiche-infos dt { display: inline; font-family: var(--font-serif); font-style: italic; color: var(--f-color); }
.fiche-infos dt::after { content: ' — '; font-style: normal; color: var(--gold); }
.fiche-infos dd { display: inline; }
@media (max-width: 860px) {
  .fiche-reperes { justify-content: flex-start; text-align: left; flex-direction: column; gap: 0.5rem; }
  .fiche-reperes div + div::before { display: none; }
  .fiche-reperes div, .fiche-reperes div + div { border: 0; padding: 0; }
  .fiche-infos div { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   L'EXPERTISE NATURALISTE (expertise-jardin.html) — page vivante, verts de Terra Viva :
   grappe de ronds sur un aplat vert, la carte d'identité en cercles emboîtés,
   les six éléments en chemin décalé, sections qui se chevauchent en arrondi.
   ═══════════════════════════════════════════════════════════════════ */
body[data-nav="terra"] { --x-vert: #3f6e4a; --x-vert-clair: #a9c694; --x-vert-doux: color-mix(in srgb, #a9c694 30%, var(--lin)); --x-foret: #13261c; }
.ex2-haut { position: relative; overflow: hidden; background: var(--lin); padding: calc(76px + clamp(1.5rem, 4vw, 3rem)) var(--pad-h) clamp(4.5rem, 8vw, 6rem); }
.ex2-haut-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ex2-pole { font-size: 0.86rem; letter-spacing: 0.04em; }
.ex2-pole a { color: var(--x-vert); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.ex2-nom { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 4rem); line-height: 1.05; color: var(--teal-deep); margin: 0.4rem 0 1rem; }
.ex2-nom span { display: block; font-size: 0.55em; color: var(--x-vert); margin-top: 0.2rem; }
.ex2-accroche { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2.3vw, 1.5rem); line-height: 1.45; color: var(--teal-deep); }
.ex2-intro { margin-top: 0.9rem; max-width: 32rem; font-size: 1.04rem; line-height: 1.75; color: var(--text-mid); }
.ex2-boutons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.ex2-grappe { position: relative; aspect-ratio: 1 / 0.95; }
.ex2-aplat { position: absolute; inset: 4% 2% 0 6%; border-radius: 55% 45% 48% 52% / 46% 56% 44% 54%; background: var(--x-vert-doux); }
.ex2-rond { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--lin), 0 18px 40px -16px rgba(20,50,30,0.5); }
.ex2-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex2-rond--grand { width: 60%; aspect-ratio: 1; left: 18%; top: 2%; }
.ex2-rond--moyen { width: 36%; aspect-ratio: 1; right: 0; bottom: 6%; box-shadow: 0 0 0 5px var(--lin), 0 0 0 7px var(--x-vert-clair), 0 18px 40px -16px rgba(20,50,30,0.5); }
.ex2-rond--petit { width: 24%; aspect-ratio: 1; left: 2%; bottom: 10%; box-shadow: 0 0 0 5px var(--lin), 0 0 0 7px var(--gold-light), 0 14px 30px -14px rgba(20,50,30,0.5); }
.ex2-trait { position: absolute; pointer-events: none; stroke-width: 0.9; }
.ex2-trait .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace-dessin 3.2s cubic-bezier(.45,.1,.25,1) forwards; }
.ex2-trait--gauche { left: max(0.5vw, calc(50% - 720px)); bottom: 0; width: clamp(80px, 8vw, 140px); color: color-mix(in srgb, var(--x-vert) 50%, transparent); }
.ex2-trait--droite { right: max(1vw, calc(50% - 680px)); top: 2rem; width: clamp(90px, 10vw, 170px); color: rgba(169,198,148,0.45); }
.ex2-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; color: var(--teal-deep); }
.ex2-titre span { display: block; font-size: 0.62em; color: var(--x-vert); margin-top: 0.15rem; }
/* la carte d'identité : quatre cercles emboîtés, du sous-sol au centre */
.ex2-carte { position: relative; background: var(--paper); border-radius: 56px 56px 0 0; margin-top: -40px; padding: clamp(3.2rem, 7vw, 5rem) var(--pad-h);
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.ex2-carte > * { max-width: 560px; }
.ex2-cercles { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; }
.ex2-c { position: absolute; border-radius: 50%; display: flex; justify-content: center; }
.ex2-c em { font-style: normal; font-family: var(--font-serif); font-size: 0.98rem; margin-top: 0.7rem; }
.ex2-c--1 { inset: 0; background: #e9dcc3; box-shadow: inset 0 0 0 1px var(--gold-light); }
.ex2-c--1 em { color: #6d5734; }
.ex2-c--2 { inset: 13%; background: #c9b48b; }
.ex2-c--2 em { color: #4b3a1e; }
.ex2-c--3 { inset: 26%; background: var(--x-vert-clair); }
.ex2-c--3 em { color: #24402a; }
.ex2-c--4 { inset: 39%; background: var(--x-vert); align-items: center; }
.ex2-c--4 em { margin: 0; color: #fff; font-size: 0.86rem; }
.ex2-carte-texte p { margin-top: 1rem; font-size: 1.04rem; line-height: 1.8; color: var(--text-mid); }
.ex2-carte-texte .ex2-note { font-size: 0.9rem; color: var(--text-light); }
/* le chemin : six étapes décalées, de grands numéros dans des ronds verts */
.ex2-chemin { position: relative; overflow: hidden; background: var(--x-vert-doux); border-radius: 56px 56px 0 0; padding: clamp(3.2rem, 7vw, 5rem) var(--pad-h) clamp(4rem, 8vw, 5.5rem); }
.ex2-chemin > .ex2-titre { max-width: 1040px; margin: 0 auto 2rem; position: relative; z-index: 1; }
.ex2-etapes { position: relative; z-index: 1; list-style: none; padding: 0; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem clamp(2rem, 5vw, 4rem); }
.ex2-etapes li { display: flex; gap: 1.1rem; align-items: center; }
.ex2-etapes li:nth-child(even) { transform: translateY(2.2rem); }
.ex2-etapes b { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: #fff; background: var(--x-vert); box-shadow: 0 0 0 5px color-mix(in srgb, var(--x-vert-clair) 60%, transparent); }
.ex2-etapes span { font-size: 1.06rem; line-height: 1.55; color: var(--encre, var(--text-dark)); }
.ex2-etapes strong { font-weight: 500; color: var(--teal-deep); }
.ex2-galet { position: relative; z-index: 1; width: min(100%, 300px); aspect-ratio: 4 / 5; margin: clamp(3.5rem, 7vw, 4.5rem) auto 0; border-radius: 999px 999px 40px 40px; overflow: hidden; box-shadow: var(--shadow-soft); }
.ex2-galet img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ce que le jardin peut devenir : des mots qui poussent */
.ex2-devenir { background: var(--paper); border-radius: 56px 56px 0 0; margin-top: -40px; padding: clamp(3.2rem, 7vw, 4.5rem) var(--pad-h); text-align: center; position: relative; }
.ex2-pistes { max-width: 980px; margin: 1.6rem auto 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.9; color: var(--x-vert); }
.ex2-pistes span + span::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.7em 0.1em; border-radius: 0 100% 0 100%; transform: rotate(30deg); background: var(--gold-light); vertical-align: middle; }
.ex2-devenir-texte { max-width: 36rem; margin: 1.4rem auto 0; font-size: 1.04rem; line-height: 1.75; color: var(--text-mid); }
/* tarif */
.ex2-tarif { background: var(--lin); padding: clamp(2.8rem, 6vw, 4rem) var(--pad-h) clamp(4rem, 8vw, 5rem); text-align: center; }
.ex2-tarif p { max-width: 38rem; margin: 1rem auto 0; font-size: 1rem; line-height: 1.75; color: var(--text-mid); }
/* l'invitation, dans la forêt */
.ex2-parlons { background: linear-gradient(180deg, var(--x-foret), #0c1a13); color: #fff; border-radius: 56px 56px 0 0; margin-top: -40px; padding: clamp(3.2rem, 7vw, 4.8rem) var(--pad-h); text-align: center; position: relative; }
.ex2-parlons-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.9rem); color: #fff; }
.ex2-parlons-titre::after { content: ''; display: block; width: 4rem; height: 3px; margin: 0.9rem auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--x-vert-clair), var(--gold-light)); }
.ex2-parlons > p { max-width: 34rem; margin: 1.1rem auto 0; font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,0.88); }
.ex2-parlons .ff-actions { margin: 1.8rem 0 1rem; }
.ex2-coord a { color: var(--x-vert-clair); }
@media (max-width: 860px) {
  .ex2-haut-inner, .ex2-carte { grid-template-columns: 1fr; }
  .ex2-grappe { max-width: 24rem; width: 100%; margin: 0 auto; order: -1; }
  .ex2-cercles { justify-self: center; width: min(100%, 320px); }
  .ex2-etapes { grid-template-columns: 1fr; }
  .ex2-etapes li:nth-child(even) { transform: none; }
  .ex2-carte, .ex2-chemin, .ex2-devenir, .ex2-parlons { border-radius: 36px 36px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .ex2-trait .trace { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 560px) { .ex2-c--4 em { font-size: 0.68rem; } .ex2-c em { font-size: 0.9rem; } }
/* Qui suis-je : recadrage du galet rétabli ; bandeaux équilibrés */
.qs-galet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-bandeau span { white-space: nowrap; }


/* Qui suis-je : sans exergue, la phrase du propriétaire ouvre la page */
.qs-suite { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: 0; border-top: 0; font-size: clamp(1.15rem, 2vw, 1.3rem); line-height: 1.8; }
/* Qui suis-je : l'emblème à la place du mot, qui respire lentement ; les origines en plus discret */
.qs-gwazh { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
.qs-embleme { width: 110px; height: auto; display: block; opacity: 0.95; animation: qs-tour 12s cubic-bezier(.65,0,.35,1) infinite; transform-style: preserve-3d; }
/* un tour sur lui-même vers la gauche, une pause, puis un tour vers la droite */
@keyframes qs-tour { 0%, 15% { transform: perspective(600px) rotateY(0deg); } 40%, 55% { transform: perspective(600px) rotateY(-360deg); } 80%, 100% { transform: perspective(600px) rotateY(0deg); } }
.qs-gwazh p { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,0.62); max-width: 34rem; }
@media (prefers-reduced-motion: reduce) { .qs-embleme { animation: none; } }
@media (max-width: 860px) { .qs-gwazh { grid-template-columns: 1fr; } .qs-embleme { width: 90px; } }


/* ═══ ACCUEIL — les trois portes, entre la présentation et le bandeau photo ═══ */
.portes { position: relative; overflow: hidden; background: var(--lin); border-radius: 56px 56px 0 0; margin-top: -40px; padding: clamp(3.2rem, 7vw, 5rem) var(--pad-h) clamp(4rem, 8vw, 5.5rem); text-align: center; }
.portes::before { content: ''; position: absolute; left: max(1rem, calc(50% - 640px)); bottom: 0; width: clamp(60px, 7vw, 96px); aspect-ratio: 120 / 200;
  background: color-mix(in srgb, var(--vert-sombre) 45%, transparent); -webkit-mask: url('../trait/brin.svg') center bottom / contain no-repeat; mask: url('../trait/brin.svg') center bottom / contain no-repeat; }
.portes-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--teal-deep); }
.portes-liste { list-style: none; padding: 0; max-width: 1040px; margin: clamp(2rem, 5vw, 3rem) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.portes-liste li:nth-child(2) { transform: translateY(1.8rem); }
.porte { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.porte-rond { width: clamp(176px, 20vw, 248px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 1.3rem;
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 0 7px var(--lin), 0 0 0 8px var(--gold-line), 0 22px 44px -18px rgba(13,32,42,0.45); transition: transform 0.5s ease; }
.porte-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.porte:hover .porte-rond, .porte:focus-visible .porte-rond { transform: translateY(-4px); }
.porte-nom { font-family: var(--font-serif); font-size: 1.4rem; color: var(--teal-deep); }
.porte-desc { margin-top: 0.3rem; font-size: 0.96rem; color: var(--text-mid); }
.porte-lien { margin-top: 0.7rem; font-size: 0.9rem; color: var(--teal-mid); border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }
.porte:focus-visible { outline: none; }
.porte:focus-visible .porte-rond { box-shadow: 0 0 0 2px var(--teal-mid), 0 0 0 7px var(--lin); }
@media (max-width: 760px) { .portes-liste { grid-template-columns: 1fr; gap: 2.4rem; } .portes-liste li:nth-child(2) { transform: none; } .portes { border-radius: 36px 36px 0 0; } }
@media (prefers-reduced-motion: reduce) { .porte-rond { transition: none; } }

/* Logo complet avec la signature « Cultivons notre lien au vivant » (pied de page) :
   logo de la graphiste sans l'ancienne signature, la nouvelle écrite à la même place, à l'échelle du logo */
.logo-signature { position: relative; container-type: inline-size; }
.logo-signature img { display: block; width: 100%; height: auto; }
.logo-signature-texte { position: absolute; left: 41%; top: 71%; white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: 2.7cqw; letter-spacing: 0.03em; line-height: 1; color: #a8946b; }

/* ANIMATIONS (31 octobre 2026) — trois formules dans la liste de Sorties & cours,
   avec une ligne de description sous l'univers. */
body[data-pole="animations"] .index-prix { font-family: var(--font-sans); font-size: 0.86rem; color: var(--teal-mid); }
/* pointes acidulées, côté ludique : une couleur vive par formule (anneau, feuilles, survol),
   une teinte plus foncée pour le texte, trois pastilles qui flottent autour de la photo */
.anim-officina  { --f-color: #e07a2a; --f-fonce: #a2501a; }
.anim-creatio   { --f-color: #8db32a; --f-fonce: #557812; }
.anim-naturalia { --f-color: #e6b919; --f-fonce: #8c6a00; }
body[data-pole="animations"] .index-ligne .index-nom { color: var(--f-fonce); }
body[data-pole="animations"] .index-ligne .index-niveau { color: var(--f-fonce); }
body[data-pole="animations"] .index-ligne .index-rond { box-shadow: 0 0 0 2px var(--f-color), 0 0 0 5px var(--white), 0 0 0 6px color-mix(in srgb, var(--f-color) 45%, transparent); }
body[data-pole="animations"] .index-ligne:hover, body[data-pole="animations"] .index-ligne:focus-visible { background: color-mix(in srgb, var(--f-color) 9%, var(--paper)); }
body[data-pole="animations"] .index-ligne:hover .index-rond { transform: rotate(-6deg) scale(1.06); }
body[data-pole="animations"] .index-rond { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
body[data-pole="animations"] .index-prix { transition: color .25s; }
body[data-pole="animations"] .index-ligne:hover .index-prix { color: var(--f-fonce); }
.pastille { position: absolute; z-index: 3; border-radius: 50%; animation: pastille 5s ease-in-out infinite; }
.pastille--orange { width: 18px; height: 18px; background: #e07a2a; top: 4%; left: 8%; }
.pastille--anis   { width: 13px; height: 13px; background: #8db32a; bottom: 2%; right: 14%; animation-delay: -1.6s; }
.pastille--citron { width: 10px; height: 10px; background: #e6b919; top: 30%; right: -7%; animation-delay: -3.2s; }
@keyframes pastille { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -9px); } }
@media (prefers-reduced-motion: reduce) { .pastille { animation: none; } body[data-pole="animations"] .index-rond { transition: none; } }
body[data-pole="animations"] .index-niveau .feuilles { display: flex; width: max-content; margin-bottom: 0.3rem; }
.index-nom .index-desc { margin-top: 0.45rem; font-size: 0.86rem; line-height: 1.55; color: var(--text-light); max-width: 30rem; }
@media (max-width: 760px) {
  .index-nom .index-desc { font-size: 0.82rem; }
  body[data-pole="animations"] .index-duree { padding-right: 0; }
  body[data-pole="animations"] .index-prix { grid-area: auto; grid-column: 2; justify-self: start; margin-top: 0.2rem; }
}

/* ── Contact : tons verts de la board (canard → bleu profond), dans la suite de la photo ── */
#contact {
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, rgba(175,214,212,0.16), transparent 70%),   /* eau pâle */
    linear-gradient(172deg, #38818c 0%, #1d5563 48%, #0d394d 100%);                          /* canard → bleu profond */
  position: relative; overflow: hidden; padding: var(--space-section) var(--pad-h); border-top: 1px solid rgba(185,162,122,0.25);
}
#contact::after {                     /* un brin au trait, en eau pâle, qui pousse du bas */
  content: ''; position: absolute; right: clamp(1rem, 6vw, 6rem); bottom: 0; width: clamp(70px, 9vw, 110px); aspect-ratio: 120 / 200;
  background: rgba(175,214,212,0.35);
  -webkit-mask: url("../trait/brin.svg") center bottom / contain no-repeat;
          mask: url("../trait/brin.svg") center bottom / contain no-repeat;
  pointer-events: none;
}
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; }
.contact-left h2 { color: #fff; margin-bottom: 1.25rem; }
.contact-left h2 em { color: var(--gold-light); }
.contact-left .section-eyebrow { color: var(--teal-pale); }
.contact-intro { font-size: 0.95rem; color: rgba(255,255,255,0.68); line-height: 1.8; margin-bottom: 1.75rem; }
.contact-direct { font-size: 0.95rem; color: rgba(255,255,255,0.8); line-height: 1.9; margin-bottom: 2.25rem; }
.contact-direct a { color: var(--gold-pale); text-decoration: none; border-bottom: 1px solid rgba(227,217,196,0.35); }
.contact-direct a:hover { border-bottom-color: currentColor; }
.contact-territory { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; }
.contact-territory-label { font-family: var(--font-serif); font-size: 1rem; color: var(--teal-pale); margin-bottom: 0.6rem; }
.contact-territory p { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.7; }
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-pale); }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #fff; border-radius: var(--radius-s);
  font-family: var(--font-sans); font-weight: 300; font-size: 0.97rem; padding: 0.85rem 1.1rem;
  outline: none; transition: border-color 0.2s, background 0.2s; -webkit-appearance: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.38); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold-light); background: rgba(255,255,255,0.1); }
.form-group select option { background: var(--teal-deep); color: #fff; }
.form-group input, .form-group select, .form-group textarea { background: rgba(255,255,255,0.08); border-color: rgba(175,214,212,0.3); }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; flex-wrap: wrap; }
.form-notice { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
/* page Contact : le formulaire seul, plein écran, sous le menu */
#contact.contact-page { min-height: 100vh; display: flex; align-items: center; padding-top: calc(76px + clamp(2.5rem, 6vw, 4.5rem)); border-top: 0; }
#contact.contact-page .contact-layout { width: 100%; }
.contact-page h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.2; color: #fff; margin-bottom: 1.25rem; }

/* ═══ Sorties & cours, Animations (31 octobre 2026) — rééquilibrage :
   un en-tête plus compact, les formules plus grandes, car ce sont elles l'essentiel ═══ */
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .hero--rond { padding-top: calc(76px + clamp(1.2rem, 3vw, 2.2rem)); padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .hero-rond { width: clamp(160px, 17vw, 220px); margin: 0.4rem 1.5rem 0.4rem 0; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .hero-rond::before { inset: -26%; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-formules { padding-top: clamp(2rem, 4.5vw, 3.2rem); }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-inner { max-width: 1040px; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-groupe { font-size: 0.76rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-ligne { grid-template-columns: 92px 1fr 13rem 10rem; gap: 1.9rem; padding: 1.4rem 0.8rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-rond { width: 92px; height: 92px; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom { font-size: 2rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom span { font-size: 1.02rem; margin-top: 0.35rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom .index-desc { font-size: 0.97rem; line-height: 1.6; max-width: 34rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-duree { font-size: 1rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-niveau { font-size: 0.8rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-prix { font-size: 1.3rem; }
body[data-nav="animations"] .index-prix { font-size: 0.98rem; }
:is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-pied { font-size: 0.95rem; }
@media (max-width: 760px) {
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .hero--rond { padding-top: calc(70px + 1rem); }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .hero-rond { width: 112px; margin: 0 0 1.2rem 0.4rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-ligne { grid-template-columns: 76px 1fr; gap: 0.35rem 1.15rem; padding: 1.2rem 0.2rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-rond { width: 76px; height: 76px; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom { font-size: 1.65rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom span { font-size: 0.98rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-nom .index-desc { font-size: 0.92rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-duree { font-size: 0.92rem; }
  :is(body[data-nav="sorties"], body[data-nav="animations"], body[data-nav="agenda"]) .index-prix { font-size: 1.12rem; }
  body[data-nav="animations"] .index-prix { font-size: 0.92rem; }
}