/* ==========================================================================
   Sandra Cussonneau · Communication animale · JBC Web Expansion (09/2026)
   DA (brief Sandra, 02/09/2026) : creme legerement rose en fond, vert sauge doux,
   roux ecureuil et ses degrades, ecriture ronde et douce, ambiance nature.
   Mecanique et harmonie : socle des sites JBC (Isabelle Chasles v2).
   ========================================================================== */

:root {
  /* Palette nommee d'apres l'univers de Sandra */
  --creme: #fbf4ee;            /* fond principal, creme legerement rose */
  --creme-fonce: #f5e9e0;      /* bande alternee */
  --rose-voile: #f3dfd3;       /* aplat rose tres doux */
  --blanc: #ffffff;

  --sauge: #a3b79f;            /* vert sauge doux */
  --sauge-clair: #c9d6c3;
  --sauge-voile: #e7ede3;      /* aplat sauge tres pale */
  --sauge-fonce: #7d9678;      /* sauge soutenu (boutons contour, pictos) */
  --sauge-profond: #557151;    /* footer, bandeaux */
  --sauge-nuit: #465f43;       /* bas de footer, texte fort sur sauge */

  --roux: #c4683a;             /* roux ecureuil */
  --roux-fonce: #a2502a;
  --roux-clair: #e2a583;
  --roux-voile: #f6e3d6;

  --encre: #3e332d;            /* texte courant, brun chaud */
  --encre-douce: #6b5e56;      /* texte secondaire */

  /* Teintes derivees (aucune couleur en dur plus bas) */
  --bordure: rgba(62, 51, 45, 0.1);          /* contour des cartes et encadres */
  --bordure-forte: rgba(62, 51, 45, 0.2);    /* champs de formulaire */
  --bordure-survol: rgba(196, 104, 58, 0.7); /* contour roux au survol / FAQ ouverte */
  --peche-clair: #ffd9c2;                    /* accent clair sur fonds sombres (kickers, icones) */
  --roux-sur-sombre: #ce652f;                /* le roux EXACT du logo, demandé par Julien le 08/09/2026
                                                pour les titres du pied. ⚠️ Mesuré à 1,02 de contraste sur
                                                le vert du pied : même luminance que le fond. */
  --texte-sur-sombre: #e5ecdf;               /* paragraphes sur sauge profond */
  --sauge-degrade: #648360;                  /* haut des degrades sauge profond */
  --creme-86: rgba(251, 244, 238, 0.86);     /* texte du footer */
  --creme-50: rgba(251, 244, 238, 0.5);      /* bordure des boutons contour sur sombre */
  --creme-10: rgba(251, 244, 238, 0.1);      /* survol des boutons contour sur sombre */
  --souligne: rgba(162, 80, 42, 0.35);       /* soulignement des liens */
  --erreur: #8a2e2e;
  --bordure-legere: rgba(62, 51, 45, 0.08);
  --bordure-moyenne: rgba(62, 51, 45, 0.12);
  --bordure-pointillee: rgba(62, 51, 45, 0.16);
  --bordure-sauge: rgba(79, 106, 75, 0.18);
  --header-fond: rgba(251, 244, 238, 0.94);

  --titre: 'Fredoka', 'Avenir Next Rounded', 'Nunito', Arial, sans-serif;
  --corps: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  --r-sm: 16px;
  --r: 22px;
  --r-lg: 30px;
  --r-pill: 999px;

  --ombre-douce: 0 14px 36px -22px rgba(62, 51, 45, 0.28);
  --ombre-carte: 0 28px 60px -34px rgba(62, 51, 45, 0.32);
  --transition: 0.35s ease;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 116px;

  /* Grain papier tres discret */
  --grain:
    repeating-linear-gradient(0deg, rgba(62, 51, 45, 0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(62, 51, 45, 0.016) 0 1px, transparent 1px 22px);
}

/* ---------- Base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overscroll-behavior: none;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: auto; /* regle JBC : les ancres sautent direct */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

/* PIEGE : jamais d'overscroll-behavior sur body (bloque la molette). */
body {
  font-family: var(--corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  color: var(--encre);
  background: var(--creme);
  background-image: var(--grain), url('../img/texture-papier.webp');
  background-size: auto, 640px 640px;
  background-repeat: repeat;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: var(--roux-fonce); text-decoration: none; transition: color var(--transition); }
strong { font-weight: 700; }
em { font-style: italic; }

.container { width: min(1140px, 92%); margin: 0 auto; }
.texte-centre { text-align: center; }
.texte-centre .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Typographie ---------- */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  color: var(--sauge-nuit);
  line-height: 1.16;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.5rem; }
h2 .mot-roux, h1 .mot-roux { color: var(--roux); }
h1 .mot-script, h2 .mot-script {
  font-family: var(--script);
  font-weight: 600;
  color: var(--roux);
  font-size: 1.22em;
  line-height: 1;
}

.eyebrow {
  font-family: var(--corps);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--roux);
  margin-bottom: 16px;
}
.kicker {
  display: block;
  font-family: var(--script);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--roux);
  line-height: 1.2;
  margin-bottom: 8px;
}
.section-tete h2, .chapitre-texte h2, .contact-grille h2, .cta-bloc h2, .offre-texte h2 { margin-bottom: 22px; }
.section-intro { max-width: 660px; color: var(--encre-douce); }
.section-tete { margin-bottom: 54px; }

/* Illustrations au trait continu (GetIllustrations, pack Continuous Line) au-dessus des eyebrows */
.eyebrow-illu { display: block; width: 348px; height: 348px; margin: 0 auto 12px; object-fit: contain; }
.chapitre-texte .eyebrow-illu, .contact-grille .eyebrow-illu, .histoire-texte .eyebrow-illu { margin: 0 0 10px; width: 294px; height: 294px; }
.eyebrow-illu--grand { width: 396px; height: 396px; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--corps);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 16px 34px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-plein { background: var(--roux); color: var(--blanc); }
.btn-plein:hover { background: var(--roux-fonce); color: var(--blanc); transform: translateY(-2px); }
.btn-contour { background: transparent; color: var(--sauge-profond); border-color: var(--sauge-fonce); }
.btn-contour:hover { background: var(--sauge-voile); border-color: var(--sauge-profond); transform: translateY(-2px); }
.btn-sauge { background: var(--sauge-profond); color: var(--blanc); }
.btn-sauge:hover { background: var(--sauge-nuit); color: var(--blanc); transform: translateY(-2px); }

/* ---------- Header / nav (pattern JBC : logo gauche, liens centres, CTA droite) ---------- */

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--sauge-nuit); color: var(--creme); padding: 10px 16px; border-radius: var(--r-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--roux); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* 🔴 Le flou de fond vit sur un pseudo-élément, PAS sur le header lui-même : un ancêtre
   qui porte un backdrop-filter devient le point de référence de tout descendant en
   position: fixed. Le menu mobile se retrouvait accroché au header au lieu de l'écran,
   il déroulait DEVANT la barre au lieu de sortir derrière, et il partait avec elle dès que
   la page bougeait (retour Julien, 08/09/2026). */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-fond);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Un dégradé sous la barre, qui la décolle de la page au lieu de la laisser flotter sur le
   crème. Il déborde vers le bas sans prendre de place ni intercepter les clics. */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(62, 51, 45, 0.10) 0%, rgba(62, 51, 45, 0.04) 42%, rgba(62, 51, 45, 0) 100%);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, 94%);
  margin: 0 auto;
  height: var(--header-h);
  gap: 20px;
  position: relative;   /* repère du centrage des liens sur grand écran */
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  color: var(--sauge-nuit);
  line-height: 1;
}
/* Le logo est retiré le 07/10/2026 (Sandra le fournira plus tard) : la marque tient au nom seul. */
.nav-logo-texte { display: flex; flex-direction: column; gap: 4px; }
.nav-logo-nom { font-family: var(--titre); font-size: 1.62rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.nav-logo-sous { font-family: var(--script); font-size: 1.7rem; font-weight: 500; color: var(--roux); white-space: nowrap; line-height: 1; }

.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; flex: 1; justify-content: center; }
.nav-links a {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--encre);
  padding: 6px 2px 4px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover, .nav-links a.actif { color: var(--roux-fonce); border-color: var(--sauge); }

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--roux);
  color: var(--blanc);
  white-space: nowrap;
  transition: background var(--transition);
}
.nav-cta-btn:hover { background: var(--roux-fonce); color: var(--blanc); }
.nav-cta-btn svg { width: 18px; height: 18px; }
.nav-mobile-only { display: none; }
.nav-desktop-only { display: inline-flex; align-items: center; }

.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 10px; background: none; border: 0; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* Valeurs en pixels ENTIERS (barre 2 px, écart 6 px, donc translation de 8 px) : à 2,5 px de
   haut et 7,5 px de course, certains téléphones laissaient des restes. Et la barre du milieu
   s'efface par opacité ET par écrasement : si l'une des deux ne prend pas, l'autre la cache,
   sinon ses deux bouts arrondis restaient visibles de part et d'autre de la croix (retour
   Julien, 08/09 : « deux petits points à côté de la croix »). */
.hamburger span { width: 24px; height: 2px; background: var(--sauge-nuit); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.hamburger.actif span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.actif span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.actif span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Brins botaniques decoratifs (GPT Image 2, calques transparents) ---------- */

.sprig { position: absolute; pointer-events: none; opacity: 0.9; z-index: 0; }
.sprig img { width: 100%; height: 100%; object-fit: contain; }
.sprig--hero-gauche { width: 252px; height: 308px; left: -30px; bottom: 30px; transform: rotate(-8deg); }
.sprig--hero-droite { width: 210px; height: 252px; right: 2%; top: 18px; transform: rotate(14deg); }
.sprig--section-droite { width: 238px; height: 280px; right: 1%; bottom: 20px; transform: rotate(10deg); }
.sprig--section-gauche { width: 210px; height: 252px; left: 1%; top: 40px; transform: rotate(-12deg); }

/* ---------- Hero accueil ---------- */

.hero {
  position: relative;
  padding: 84px 0 96px;
  overflow: hidden;
}
.hero-grille {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero h1 { margin-bottom: 24px; }
.hero-sous-titre { font-size: 1.14rem; color: var(--encre-douce); max-width: 540px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ancrage { margin-top: 40px; display: flex; gap: 22px 30px; flex-wrap: wrap; }
.hero-ancrage .ancrage-item { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 600; color: var(--encre); }
.hero-ancrage .ancrage-item svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--sauge-fonce); }

/* Photo en forme organique douce (reference DA de Sandra), avec un galet sauge derriere */
.hero-visuel {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 580px;
  justify-self: center;
  width: 100%;
  max-width: 470px;
}
.hero-visuel::before {
  content: "";
  position: absolute;
  inset: 6% -6% -5% 8%;
  background: var(--sauge-clair);
  border-radius: 46% 54% 48% 52% / 58% 42% 58% 42%;
  z-index: 0;
}
.hero-visuel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%;
}

/* ---------- Bande sauge : les trois piliers ---------- */

.bande-piliers {
  position: relative;
  background: var(--sauge-voile);
  padding: 52px 0;
  overflow: hidden;
}
.bande-piliers::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture-aquarelle.webp') center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.35;
}
.bande-piliers > .container { position: relative; z-index: 1; }
.piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pilier { text-align: center; padding: 8px 20px; border-left: 2px solid var(--bordure-sauge); }
.pilier:first-child { border-left: 0; }
.pilier .picto { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; background: var(--blanc); display: flex; align-items: center; justify-content: center; }
.pilier .picto svg { width: 30px; height: 30px; color: var(--sauge-profond); }
.pilier h3 { font-size: 1.28rem; margin-bottom: 6px; }
.pilier p { font-size: 1.1rem; color: var(--encre-douce); line-height: 1.6; }

/* ---------- Sections ---------- */

.section { position: relative; padding: 100px 0; overflow-x: clip; }
/* clip (pas hidden) : les galets decales derriere les photos et les brins botaniques ne doivent
   jamais elargir le body sur mobile (mesure du 02/09/2026 : body.scrollWidth = viewport + 5 px). */
.section-creme { background: transparent; }
.section-rose { background: var(--creme-fonce); }
.section-sauge { background: var(--sauge-voile); }
.section-rose::after, .section-sauge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture-aquarelle.webp') center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.32;
}
.section-rose > .container, .section-sauge > .container { position: relative; z-index: 1; }

/* ---------- Cartes generiques (survol translate seul) ---------- */

.carte {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.carte:hover { transform: translateY(-8px); border-color: var(--bordure-survol); }
.carte .picto {
  width: 62px; height: 62px; margin: 0 0 18px; border-radius: 50%;
  background: var(--sauge-voile); display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.carte .picto svg { width: 30px; height: 30px; color: var(--sauge-profond); }
.carte:hover .picto { background: var(--roux-voile); transform: scale(1.08) rotate(-4deg); }
.carte:hover .picto svg { color: var(--roux); }
.carte h3 { font-size: 1.3rem; margin-bottom: 10px; transition: color var(--transition); }
.carte:hover h3 { color: var(--roux-fonce); }
.carte p { font-size: 1.1rem; color: var(--encre-douce); line-height: 1.65; }
/* Cartes teintees : la bordure reste VISIBLE, dans la famille de la teinte. En
   border-color: transparent, la carte rose (#f6e3d6) se confondait avec la bande
   creme foncee (#f5e9e0) derriere elle : 1,04 de contraste, autant dire rien
   (retour de Julien, 07/09/2026, page Communication animale). Mesure apres :
   1,77 a 1,94 pour la rose, 1,79 a 1,96 pour la sauge, sur les trois fonds du site. */
.carte.teintee-sauge { background: var(--sauge-voile); border-color: var(--sauge); }
.carte.teintee-rose { background: var(--roux-voile); border-color: var(--roux-clair); }
.carte.teintee-sauge .picto, .carte.teintee-rose .picto { background: var(--blanc); }

.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grille-buts .carte { padding: 32px 22px; }
.grille-buts .carte h3 { font-size: 1.18rem; }
.grille-buts .carte p { font-size: 1.06rem; }

.section-actions { margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.section-actions.actions-gauche { margin-top: 28px; justify-content: flex-start; }
.section-actions.actions-gauche .btn { margin-top: 0; }

/* ---------- Bandeau citation (roux profond) ---------- */

.bandeau-citation {
  position: relative;
  background: linear-gradient(170deg, #b35f33 0%, var(--roux-fonce) 80%);
  color: var(--creme);
  padding: 78px 0;
  text-align: center;
  overflow: hidden;
}
.cta-bloc::after, .offre-carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture-papier.webp') repeat; background-size: 640px 640px;
  mix-blend-mode: soft-light; opacity: 0.5;
}
/* La matiere du bandeau orange : la MEME aquarelle que les bandes vertes (demande de
   Julien, 08/09). Le grain papier qu'il portait avant ne se voyait pas sur un aplat aussi
   sature. En multiply, l'aquarelle creuse le fond sans le salir. */
.bandeau-citation::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture-aquarelle.webp') center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.3;
}
.bandeau-citation > .container, .cta-bloc > *, .offre-carte > * { position: relative; z-index: 1; }
.bandeau-citation .citation {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  line-height: 1.4;
  max-width: 820px;
  margin: 0 auto;
  color: #fff4ec;
}
.bandeau-citation .citation .mot-clair { color: var(--peche-clair); }
.citation-note {
  margin-top: 22px;
  font-family: var(--script);
  font-size: 2rem;
  font-weight: 500;
  color: var(--peche-clair);
  line-height: 1.2;
}

/* ---------- Prestations (cartes avec prix) ---------- */

.grille-prestations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.presta {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition);
}
.presta:hover { transform: translateY(-8px); border-color: var(--bordure-survol); }
.presta-visuel { position: relative; aspect-ratio: 16 / 9; background: var(--sauge-voile); }
.presta-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.presta-corps { padding: 30px 32px 34px; display: flex; flex-direction: column; flex: 1; }
.presta-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.presta h3 { font-size: 1.58rem; }
.presta-prix {
  flex: 0 0 auto;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--roux-fonce);
  background: var(--roux-voile);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  white-space: nowrap;
  line-height: 1.2;
}
.presta .presta-duree { font-family: var(--script); font-size: 1.65rem; color: var(--sauge-profond); margin-bottom: 14px; line-height: 1.2; }
.presta p { font-size: 1.08rem; color: var(--encre-douce); line-height: 1.7; }
/* Retour Sandra 07/09 : deux paragraphes qui se suivent dans une carte se collaient, faute
   de respiration entre eux (« mettre un espace avant Le compte rendu »). */
.presta p + p { margin-top: 14px; }
.presta .presta-lien { margin-top: auto; padding-top: 20px; font-size: 1.05rem; font-weight: 700; color: var(--roux-fonce); display: inline-flex; align-items: center; gap: 8px; }
.presta .presta-lien svg { width: 18px; height: 18px; transition: transform var(--transition); }
.presta:hover .presta-lien svg { transform: translateX(4px); }

.note-douce {
  margin: 36px auto 0;
  max-width: 820px;
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 24px 28px;
  /* La note se lit centree, l'icone au-dessus du texte : alignee a gauche, elle avait
     l'air d'un avertissement plutot que d'un cadeau (retour Julien, 08/09). */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.note-douce svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--roux); }
.note-douce p { font-size: 1.08rem; color: var(--encre-douce); }
.note-douce p + p { margin-top: 10px; }
.note-douce strong { color: var(--encre); }

/* ---------- Chapitres texte / photo (Sandra, stages, deroulement) ---------- */

.chapitre-grille { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: center; }
.chapitre-grille.inverse { grid-template-columns: 0.9fr 1.1fr; }
.chapitre-grille.inverse .chapitre-texte { order: 2; }
.chapitre-texte .paragraphe { margin-bottom: 20px; color: var(--encre-douce); }
.chapitre-texte .paragraphe:last-of-type { margin-bottom: 0; }
.chapitre-texte .paragraphe strong { color: var(--encre); font-weight: 700; }
.chapitre-texte .btn { margin-top: 28px; }

/* Photo sur un galet sauge (ou roux) decale, legere inclinaison */
.chapitre-visuel {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 470px;
  width: 100%;
  justify-self: center;
  --rot: -1.4deg;
  transform: rotate(var(--rot));
}
.chapitre-grille.inverse .chapitre-visuel { order: 1; --rot: 1.4deg; }
.chapitre-visuel::before {
  content: "";
  position: absolute;
  inset: 4% -5% -5% 5%;
  background: var(--sauge-clair);
  border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}
.chapitre-visuel.galet-roux::before { background: var(--roux-clair); }
.chapitre-visuel img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.chapitre-visuel.paysage { aspect-ratio: 5 / 4; max-width: 560px; }
.chapitre-visuel.organique img { border-radius: 54% 46% 50% 50% / 48% 52% 48% 52%; }
.legende { margin-top: 16px; text-align: center; font-family: var(--script); font-size: 1.8rem; color: var(--sauge-profond); line-height: 1.2; }

.citation-lien {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.5;
  color: var(--sauge-profond);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px;
}
.citation-encart {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.5;
  color: var(--sauge-profond);
  border-left: 4px solid var(--roux-clair);
  padding: 4px 0 4px 22px;
  margin: 26px 0;
}
.citation-centre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  color: var(--sauge-profond);
  text-align: center;
  max-width: 780px;
  margin: 44px auto;
  padding: 32px 0;
  border-top: 3px solid var(--roux-clair);
  border-bottom: 3px solid var(--roux-clair);
}
/* Remarque informative, en retrait (demande de Sandra, 15/09) : plus petite, filets fins. */
.citation-centre.discrete { font-size: clamp(1.12rem, 1.6vw, 1.28rem); padding: 20px 0; margin: 34px auto; border-width: 2px; color: var(--encre-douce); }

/* ---------- Etiquettes (lieux, formats) ---------- */

.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.etiquettes li { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 700; color: var(--sauge-profond); background: var(--sauge-voile); border-radius: var(--r-pill); padding: 8px 16px; }
.etiquettes li svg { width: 17px; height: 17px; }
.section-sauge .etiquettes li { background: var(--blanc); }

/* ---------- Liste a coches ---------- */

.liste-coches { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.liste-coches li { display: flex; gap: 14px; align-items: flex-start; color: var(--encre-douce); font-size: 1.1rem; }
.liste-coches li svg { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 4px; color: var(--sauge-fonce); }
.liste-coches li strong { color: var(--encre); }

/* ---------- Etapes numerotees ---------- */

.etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.etapes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etape {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 38px 26px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.etape:hover { transform: translateY(-8px); border-color: var(--bordure-survol); }
/* La pastille du deroule porte un DESSIN, pas un chiffre (choix de Julien du
   07/09/2026, apres la remarque de Sandra : « je ne sais pas si je mettrais des
   numeros, peut on envisager une autre presentation ? »). Meme taille, memes
   couleurs alternees, meme rythme : seul le chiffre a laisse la place au picto. */
.etape-picto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sauge-profond); color: var(--creme);
  margin-bottom: 18px;
  transition: transform var(--transition);
}
.etape-picto svg { width: 26px; height: 26px; }
.etape:nth-child(2n) .etape-picto { background: var(--roux); }
.etape:hover .etape-picto { transform: scale(1.06); }
.etape h3 { font-size: 1.22rem; margin-bottom: 8px; }
.etape p { font-size: 1.06rem; color: var(--encre-douce); line-height: 1.65; }

/* ---------- Bloc offre (fond sauge profond) ---------- */

.offre-carte {
  position: relative;
  background: linear-gradient(165deg, var(--sauge-degrade) 0%, var(--sauge-profond) 70%);
  border-radius: var(--r-lg);
  color: var(--creme);
  display: grid;
  /* 1.1fr : la colonne de texte doit garder ses deux boutons cote a cote (mesure du 02/09/2026) */
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  overflow: hidden;
}
.offre-texte { padding: 70px 24px 70px 66px; }
.offre-carte .eyebrow { color: #f0d9c8; }
.offre-carte .kicker { color: var(--peche-clair); }
.offre-carte h2 { color: var(--creme); }
.offre-carte p { color: var(--texte-sur-sombre); }
.offre-details { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.offre-details li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.1rem; color: #eef2ea; }
.offre-details li svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 5px; color: var(--peche-clair); }
.offre-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.offre-carte .btn-plein { background: var(--roux); color: var(--blanc); }
.offre-carte .btn-contour { color: var(--creme); border-color: var(--creme-50); }
.offre-carte .btn-contour:hover { background: var(--creme-10); border-color: var(--creme); }
.offre-visuel { position: relative; min-height: 100%; background: #4a6346; }
.offre-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sessions de stages (module admin : data/stages.json) ---------- */

.sessions { list-style: none; display: grid; gap: 14px; }
.sessions-groupe { scroll-margin-top: 110px; }
.sessions-groupe + .sessions-groupe { margin-top: 44px; }
.sessions-groupe > h3 { font-size: 1.35rem; margin: 0 0 16px; text-align: center; }
.session {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: center;
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 20px 26px;
  transition: border-color var(--transition), transform var(--transition);
}
.session:hover { transform: translateY(-3px); border-color: var(--bordure-survol); }
.session-date { text-align: center; border-right: 2px solid var(--bordure); padding-right: 18px; }
.session-date .jour { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--roux); }
.session-date .mois { display: block; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sauge-profond); margin-top: 6px; }
.session h3 { font-size: 1.2rem; margin-bottom: 4px; }
.session-infos { font-size: 1.06rem; color: var(--encre-douce); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.session-infos span { display: inline-flex; align-items: center; gap: 6px; }
.session-infos svg { width: 17px; height: 17px; color: var(--sauge-fonce); }
.session-places { text-align: right; }
.session-places .badge { display: inline-block; font-size: 0.95rem; font-weight: 800; border-radius: var(--r-pill); padding: 7px 14px; background: var(--sauge-voile); color: var(--sauge-profond); white-space: nowrap; }
.session-places .badge.complet { background: var(--roux-voile); color: var(--roux-fonce); }
.session-places .badge.dernieres { background: #fff1e6; color: var(--roux-fonce); }
.session-places .btn { margin-top: 10px; padding: 10px 20px; font-size: 1.02rem; }
.sessions-vide { text-align: center; color: var(--encre-douce); background: var(--blanc); border: 2px dashed var(--bordure-pointillee); border-radius: var(--r); padding: 30px; }

/* ---------- Mes animaux (galerie de portraits) ---------- */

.grille-animaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.animal {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 28px 26px 30px;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.animal:hover { transform: translateY(-8px); border-color: var(--bordure-survol); }
.animal-photo { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; }
.animal-photo::before { content: ""; position: absolute; inset: 8% -8% -6% 6%; background: var(--sauge-clair); border-radius: 46% 54% 48% 52% / 58% 42% 58% 42%; }
.animal:nth-child(2n) .animal-photo::before { background: var(--roux-clair); }
.animal-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%; }
.animal-photo.sans-photo { display: flex; align-items: center; justify-content: center; }
.animal-photo.sans-photo::after { content: ""; position: absolute; inset: 0; border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%; background: var(--sauge-voile); }
.animal-photo.sans-photo svg { position: relative; z-index: 1; width: 64px; height: 64px; color: var(--sauge-profond); }
.animal h3 { font-size: 1.4rem; margin-bottom: 2px; }
.animal .animal-role { font-family: var(--script); font-size: 1.9rem; color: var(--roux); line-height: 1.15; margin-bottom: 14px; }
.animal p { font-size: 1.08rem; color: var(--encre-douce); line-height: 1.65; text-align: left; }
.animal p + p { margin-top: 10px; }

/* Voisins sauvages : photos prises par Sandra autour de la maison, legende manuscrite */
.grille-nature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.nature { margin: 0; }
/* Le cadre porte le rayon, l'ombre et le rognage ; l'image grandit à l'intérieur au
   survol. C'est le cadre qui reste immobile, l'image seule bouge. */
.nature-cadre { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--ombre-douce); }
/* 🔴 `height: auto` est indispensable : les attributs width/height du HTML posent une
   hauteur en dur (indices de présentation), qui l'emporte alors sur l'aspect-ratio. C'est
   ce qui rendait la renarde (height="484") plus courte que ses voisines (height="720").
   Les trois tuiles ont maintenant la même forme quelle que soit la taille du fichier. */
.nature img { display: block; width: 100%; aspect-ratio: 1 / 2; height: auto; object-fit: cover;
  transition: transform 0.6s var(--ease); }
.nature:hover img, .nature:focus-within img { transform: scale(1.07); }

/* ---------- Modale de réservation (pattern modale JBC) ----------
   🔴 Les règles posées par Julien le 06/08/2026, tenues ici :
   · le défilement intérieur est INVISIBLE : `.modal__content` ne défile pas, c'est
     `.modal__scroll` qui porte l'ascenseur, barres masquées ;
   · la croix est FIXE en haut à droite, posée dans `.modal__content` et donc hors de la
     zone qui défile, sinon elle disparaît dès qu'on descend ;
   · les champs sont en BLANC PUR (ils le sont déjà, `.champ input`), pour se détacher du
     fond crème de la carte ;
   · titres et textes d'intro centrés ;
   · fermeture par la croix, par le fond et par Échap, et la page ne défile plus derrière. */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.ouvert { display: flex; }
.modal__overlay { position: absolute; inset: 0; background: rgba(62, 51, 45, 0.5); }
.modal__content {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--creme);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.modal__scroll { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 40px 34px 34px; }
.modal__scroll::-webkit-scrollbar { display: none; width: 0; }
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordure-forte); border-radius: 50%;
  background: var(--blanc); color: var(--encre); cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.modal__close:hover { color: var(--roux); border-color: var(--roux); }
.modal__close svg { width: 18px; height: 18px; }
.modal .formulaire { background: none; border: 0; box-shadow: none; padding: 0; }
.modal .form-titre, .modal .form-intro, .modal .form-kicker, .modal .form-progres, .modal .form-rgpd { text-align: center; }
/* Les titres d'étape respirent davantage : ils annoncent un bloc de champs, pas un paragraphe. */
.modal .form-titre { margin-bottom: 30px; }
/* Le compteur d'étape et son chevron, sur une même ligne centrée. L'icône vient du pack
   Feather, celui des SVG déjà inlinés dans les pages : aucune pièce rapportée. */
.modal .form-progres { display: flex; align-items: center; justify-content: center; gap: 8px; }
.modal .form-progres svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--roux); }
/* 🔴 Une fois le message parti, c'est TOUTE la carte qui passe au vert : un encadré vert
   posé dans une carte crème faisait un cadre dans un cadre (retour Julien, 08/09). Le mot de
   confirmation perd donc son fond, son cadre et son alignement à gauche, et la modale se
   réduit à ce qu'il reste à lire. Même chose pour le message d'erreur, en rosé. */
.modal__content:has(.form-confirmation.visible) { background: var(--sauge-voile); }
.modal__content:has(.form-erreur.visible) { background: #fbeaea; }
.modal__content:has(.form-confirmation.visible) .form-confirmation,
.modal__content:has(.form-erreur.visible) .form-erreur {
  background: none; padding: 0; margin: 0;
  flex-direction: column; align-items: center; text-align: center; gap: 14px;
  font-size: 1.12rem; line-height: 1.7;
}
.modal__content:has(.form-confirmation.visible) .form-confirmation svg,
.modal__content:has(.form-erreur.visible) .form-erreur svg { width: 42px; height: 42px; margin: 0; }
.modal__content:has(.form-confirmation.visible) .modal__scroll,
.modal__content:has(.form-erreur.visible) .modal__scroll { padding: 54px 34px 48px; }
/* La prestation choisie, rappelée en tête : elle vient du bouton sur lequel on a cliqué. */
.modal-presta { font-family: var(--titre); font-weight: 600; color: var(--roux); }
.modal-presta:empty { display: none; }
@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal__content { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal__scroll { padding: 30px 20px 26px; }
}

/* ---------- FAQ (details/summary, deroule fluide, pattern Chasles) ---------- */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--blanc); border: 2px solid var(--bordure); border-radius: var(--r); padding: 0 28px; transition: border-color var(--transition); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font-family: var(--titre); font-size: 1.2rem; font-weight: 600; color: var(--sauge-nuit); }
.faq summary::-webkit-details-marker { display: none; }
/* Fleche : pointe a droite au repos, descend a l'ouverture */
.faq summary svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--roux); transition: transform 0.35s var(--ease); }
.faq .faq-reponse {
  color: var(--encre-douce);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq .faq-reponse > .faq-interieur {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease 0.05s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq .faq-reponse p + p { margin-top: 12px; }
.faq details.est-ouvert { border-color: var(--bordure-survol); }
.faq details.est-ouvert summary svg { transform: rotate(90deg); }
.faq details.est-ouvert .faq-reponse { grid-template-rows: 1fr; }
.faq details.est-ouvert .faq-reponse > .faq-interieur { padding-bottom: 22px; opacity: 1; transform: none; }
/* Sans JS : comportement natif de <details>, reponse visible d'un coup */
.faq details:not([data-js])[open] { border-color: var(--bordure-survol); }
.faq details:not([data-js])[open] summary svg { transform: rotate(90deg); }
.faq details:not([data-js]) .faq-reponse { grid-template-rows: 1fr; }
.faq details:not([data-js]) .faq-reponse > .faq-interieur { opacity: 1; transform: none; padding-bottom: 22px; }

/* ---------- Hero de page interne ---------- */

.page-hero { position: relative; padding: 104px 0 92px; background: var(--sauge-nuit); overflow: hidden; text-align: center; color: var(--creme); }
.page-hero-fond { position: absolute; inset: 0; --cadrage: center; }
.page-hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage); }
/* Cadrage vertical du bandeau : la photo est rognee par object-fit, le point d'ancrage decide
   de ce que l'on voit. --visage : Sandra ET Mahalo dans le cadre (retour Sandra 07/09 n. 7 sur
   la page Communication animale ; a 12 % on ne voyait que le haut du crane du chien).
   --haut : le sujet est dans le tiers superieur de la photo (le cocker du sentier, page Contact,
   retour n. 5 « photo de fond mal cadree » : sa tete etait coupee). */
.page-hero-fond--visage { --cadrage: center 35%; }
/* Contact : le cocker a la tête tout en haut de la photo. Centré, le cadrage la coupait ;
   tout en haut (0 %), le chien tombait trop bas dans la bande. 20 % est le point où la tête
   est entière et le chien encore haut (retour Julien, 08/09, mesuré à 12, 20 et 28 %). */
.page-hero-fond--haut { --cadrage: center 20%; }
/* Sur ordinateur, Julien veut le chien plus haut dans la bande : 40 % (08/09, « remonte encore
   de 20 % sur ordi »). Le mobile garde 20 %, la tête y est déjà entière. */
@media (min-width: 1025px) { .page-hero-fond--haut { --cadrage: center 35%; } }
.page-hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 80, 55, 0.55) 0%, rgba(58, 80, 55, 0.74) 55%, rgba(58, 80, 55, 0.9) 100%); }
/* Bandeau plus lumineux (Prestations, demande de Sandra 08/10) : photo eclaircie, voile allege */
.page-hero-fond--clair img { filter: brightness(1.15); }
.page-hero-fond--clair::after { background: linear-gradient(180deg, rgba(58, 80, 55, 0.3) 0%, rgba(58, 80, 55, 0.48) 55%, rgba(58, 80, 55, 0.7) 100%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .kicker { color: var(--peche-clair); font-size: 2.1rem; }
.page-hero h1 { color: var(--creme); margin-bottom: 26px; }
.page-hero-sous-titre { font-size: 1.14rem; color: var(--texte-sur-sombre); max-width: 680px; margin: 0 auto 36px; }
.page-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.page-hero .btn-contour { color: var(--creme); border-color: var(--creme-50); }
.page-hero .btn-contour:hover { background: var(--creme-10); border-color: var(--creme); }
.page-hero.petit { padding: 70px 0 58px; }
.page-hero.petit h1 { margin-bottom: 0; }

/* Bande de reperes sous le hero de page */
.reperes-bande { position: relative; background: var(--blanc); border-bottom: 2px solid var(--bordure-legere); }
.reperes-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reperes-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.repere { padding: 32px 22px 28px; text-align: center; border-left: 2px solid var(--bordure); }
.repere:first-child { border-left: 0; }
.repere .repere-chiffre { font-family: var(--titre); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--roux); white-space: nowrap; }
.repere .repere-chiffre .petit { font-size: 1.1rem; font-weight: 500; }
.repere .repere-label { margin-top: 10px; font-size: 1.02rem; font-weight: 600; color: var(--encre-douce); line-height: 1.5; }

/* ---------- Prose ---------- */

.prose { max-width: 780px; margin: 0 auto; }
.prose p { margin-bottom: 22px; color: var(--encre-douce); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--encre); }
.prose h3 { margin: 36px 0 12px; }

/* ---------- Bande photo pleine largeur avec citation ---------- */

.bande-photo { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--sauge-nuit); --cadrage: center; }
.bande-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage); }
/* Photo verticale dans une bande tres large : centree, on ne voit qu'une tranche du milieu.
   Le cadrage remonte sur le ciel, la mer et les oreilles du cheval (retour Sandra 07/09 n. 1). */
.bande-photo--haut { --cadrage: center 22%; }
/* Le cheval : on ne voyait que ses oreilles. La bande est recoupee plus bas dans la photo
   et le cadrage descend, pour qu'on lise le regard de l'animal et pas seulement sa criniere
   (retour Julien 08/09). */
.bande-photo--cheval { --cadrage: center 40%; }
.bande-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 80, 55, 0.5) 0%, rgba(58, 80, 55, 0.72) 100%); }
.bande-photo .container { position: relative; z-index: 1; padding: 80px 0; }
.bande-photo blockquote { font-family: var(--titre); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.45; color: var(--creme); max-width: 780px; margin: 0 auto; }
.bande-photo blockquote .mot-clair { color: var(--peche-clair); }
.bande-photo .citation-note { color: var(--peche-clair); }

/* ---------- Bloc d'appel final ---------- */

.cta-bloc { position: relative; background: linear-gradient(165deg, var(--sauge-degrade) 0%, var(--sauge-profond) 70%); border-radius: var(--r-lg); padding: 66px 60px; text-align: center; color: var(--creme); overflow: hidden; }
.cta-bloc .eyebrow-illu { width: 300px; height: 300px; margin: 0 auto 4px; }
.cta-bloc .kicker { color: var(--peche-clair); }
.cta-bloc h2 { color: var(--creme); margin-bottom: 18px; }
.cta-bloc p { color: var(--texte-sur-sombre); max-width: 640px; margin: 0 auto; }
.cta-bloc .cta-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-bloc .btn-contour { color: var(--creme); border-color: var(--creme-50); }
.cta-bloc .btn-contour:hover { background: var(--creme-10); border-color: var(--creme); }

/* ---------- Contact ---------- */

.contact-grille { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.contact-grille > div:first-child { display: block; }
/* La carte descend de la hauteur de l'illustration d'eyebrow (245 px + 10 de marge) :
   elle se centre ainsi sur le BLOC DE TEXTE de gauche, pas sur la colonne entiere. */
/* Les deux moyens de contact, harmonises (demande de Sandra 08/10 et 13/10) : deux cartes jumelles empilees */
.contact-cartes { margin-top: 255px; display: grid; gap: 24px; }
.contact-grille .formulaire { border-color: var(--roux); }
/* Le téléphone de Sandra, visible (vocal du 07/10 : « par SMS ou WhatsApp, même à plusieurs reprises »). */
.contact-tel { background: var(--blanc); border: 2px solid var(--roux); border-radius: var(--r-lg); padding: 58px 42px 52px; box-shadow: var(--ombre-douce); text-align: center; }
.contact-tel-numero { display: block; font-family: var(--titre); font-size: 1.7rem; font-weight: 600; color: var(--sauge-nuit); white-space: nowrap; line-height: 1.3; margin: 4px 0 24px; }
/* Sans encadré depuis le 07/10 (Sandra : « ce texte sans le pavé »). */
.contact-note { margin-top: 34px; display: flex; gap: 14px; align-items: flex-start; }
.contact-note svg { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 4px; color: var(--roux); }
.contact-note p { font-size: 1.06rem; color: var(--encre-douce); }
.contact-liste { list-style: none; display: grid; gap: 14px; margin: 26px 0 30px; }
.contact-liste li { display: flex; gap: 14px; align-items: flex-start; color: var(--encre-douce); }
.contact-liste li svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 5px; color: var(--sauge-fonce); }
.contact-liste a { border-bottom: 2px solid var(--souligne); overflow-wrap: anywhere; }
.contact-liste a:hover { border-color: var(--roux-fonce); }

.formulaire { background: var(--blanc); border: 2px solid var(--bordure); border-radius: var(--r-lg); padding: 42px 42px; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; }
.formulaire .form-etapes { width: 100%; }
.form-rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--encre); }
.champ input, .champ textarea, .champ select {
  width: 100%;
  min-width: 0;
  font-family: var(--corps);
  font-size: 16px; /* anti-zoom iOS */
  font-weight: 400;
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9678' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--sauge-fonce); box-shadow: 0 0 0 3px rgba(125, 150, 120, 0.2); }
.champ input::placeholder, .champ textarea::placeholder { color: #9a8f88; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ input.invalide, .champ textarea.invalide, .champ select.invalide { border-color: #b4544f; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp input { font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.form-etape { display: none; }
.form-etape.actif { display: block; }
.form-etapes:not([data-js]) .form-etape { display: block; }
.form-etapes:not([data-js]) .form-suivant, .form-etapes:not([data-js]) .form-precedent, .form-etapes:not([data-js]) .form-progres { display: none; }
.form-kicker { font-family: var(--script); font-size: 2.1rem; color: var(--roux); line-height: 1.2; margin-bottom: 8px; }
.form-progres { font-size: 0.94rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 12px; }
.form-titre { font-size: 1.7rem; margin-bottom: 10px; }
.form-intro { color: var(--encre-douce); margin-bottom: 24px; }
.form-etape[data-num="0"] { text-align: center; padding: 16px 0 10px; }
.form-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.form-nav .btn { flex: 1 1 auto; }
.form-fleche { font-size: 1.35em; line-height: 0; position: relative; top: 0.06em; }
.form-confirmation, .form-erreur { display: none; margin-top: 18px; font-size: 1.06rem; border-radius: var(--r-sm); padding: 16px 18px; gap: 12px; align-items: flex-start; }
.form-confirmation { color: var(--sauge-nuit); background: var(--sauge-voile); }
.form-erreur { color: var(--erreur); background: #fbeaea; }
.form-confirmation.visible, .form-erreur.visible { display: flex; }
.form-confirmation svg, .form-erreur svg { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 2px; }
.form-erreur a { color: var(--erreur); border-bottom: 2px solid rgba(138, 46, 46, 0.4); overflow-wrap: anywhere; }
.form-rgpd { margin-top: 16px; font-size: 0.94rem; line-height: 1.6; color: var(--encre-douce); }
.form-rgpd a { border-bottom: 2px solid var(--souligne); }

/* ---------- Pages legales ---------- */

.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--encre-douce); margin-bottom: 14px; overflow-wrap: anywhere; }
.legal ul { margin: 0 0 14px 22px; color: var(--encre-douce); }
.legal ul li { margin-bottom: 6px; }
.legal a { border-bottom: 2px solid var(--souligne); }
.legal .retour { display: inline-flex; margin-top: 30px; }

/* ---------- Footer (sauge profond, grain papier) ---------- */

/* Le vert du pied prenait 9 points de luminance entre son haut et son bas : à l'oeil,
   un aplat. Il descend maintenant en diagonale du sauge clair au sauge nuit, avec une
   lueur chaude en haut à gauche, comme une lumière qui entre. */
.footer {
  position: relative;
  background: linear-gradient(162deg, var(--sauge-degrade) 0%, var(--sauge-profond) 46%, var(--sauge-nuit) 100%);
  color: var(--creme);
  overflow: hidden;
}
/* La matière, en deux voiles très larges et décalés : ils empêchent l'oeil de retrouver
   un aplat, sans jamais devenir un motif qu'on remarque. */
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 88% 8%, rgba(255, 217, 194, 0.055) 0%, rgba(255, 217, 194, 0) 66%),
    radial-gradient(58% 66% at 16% 104%, rgba(42, 60, 40, 0.42) 0%, rgba(42, 60, 40, 0) 70%);
}
.footer > .footer-grille, .footer > .footer-bas { position: relative; z-index: 1; }
.footer-grille { display: grid; grid-template-columns: 1.3fr 0.8fr 1.05fr 1.1fr; gap: 40px; padding: 58px 0 48px; width: min(1140px, 92%); margin: 0 auto; }
.footer-marque { display: inline-flex; align-items: center; gap: 12px; line-height: 1; color: var(--creme); }
.footer-marque .nav-logo-nom { font-family: var(--titre); font-size: 1.4rem; font-weight: 600; }
.footer-marque .nav-logo-sous { font-family: var(--script); font-size: 1.6rem; color: var(--peche-clair); }
.footer-pitch { margin-top: 14px; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--creme-86); max-width: 300px; }
.footer-titre { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme); margin-bottom: 16px; }
.footer-titre svg { width: 19px; height: 19px; flex: 0 0 auto; }
.footer-liens, .footer-infos { list-style: none; display: grid; gap: 11px; font-size: 1.05rem; color: var(--creme-86); }
.footer-liens a, .footer-infos a { color: var(--creme-86); }
.footer-liens a:hover, .footer-infos a:hover { color: var(--peche-clair); }
.lien-reseau { display: inline-flex; align-items: center; gap: 8px; }
.lien-reseau svg { width: 18px; height: 18px; flex: 0 0 auto; }
.footer-bas { position: relative; background: var(--sauge-nuit); font-size: 0.98rem;
  letter-spacing: 0.035em; color: rgba(251, 244, 238, 0.82); }
.footer-bas-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 26px; padding: 15px 0; }
.footer-bas a { color: rgba(251, 244, 238, 0.9); }
.footer-bas a:hover { color: var(--roux-sur-sombre); }

/* ---------- Apparitions douces (posees et retirees par le JS, rien de masque sans JS) ---------- */

.anim { opacity: 0; transform: translateY(18px) rotate(var(--rot, 0deg)); }
.anim.anim-visuel { transform: translateY(18px) scale(0.985) rotate(var(--rot, 0deg)); }
.anim.anim-visible { opacity: 1; transform: rotate(var(--rot, 0deg)); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--roux); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .carte:hover, .presta:hover, .etape:hover, .animal:hover, .session:hover { transform: none; }
  .nature:hover img, .nature:focus-within img { transform: none; }
  .carte:hover .picto { transform: none; }
}

/* ---------- Sauts de ligne responsives (editeur visuel JBC) ----------
   4 tranches : petit mobile <=414 · grand mobile 415-768 · tablette 769-1024 · ordi >=1025. */
/* Mot compose que le navigateur ne doit pas couper sur son trait d'union (« mieux-etre »
   se cassait en « mieux- / etre. » a 390 px). */
.insecable { white-space: nowrap; }

.br-desktop, .br-tablet, .br-mobile-l, .br-mobile { display: inline; }
@media (max-width: 414px) {
  .br-desktop br, br.br-desktop, .br-tablet br, br.br-tablet, .br-mobile-l br, br.br-mobile-l { display: none; }
}
@media (min-width: 415px) and (max-width: 768px) {
  .br-desktop br, br.br-desktop, .br-tablet br, br.br-tablet, .br-mobile br, br.br-mobile { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .br-desktop br, br.br-desktop, .br-mobile br, br.br-mobile, .br-mobile-l br, br.br-mobile-l { display: none; }
}
@media (min-width: 1025px) {
  .br-mobile br, br.br-mobile, .br-tablet br, br.br-tablet, .br-mobile-l br, br.br-mobile-l { display: none; }
}

/* ---------- Responsive ---------- */

/* Barre de menu complete sur les ecrans intermediaires : elle doit tenir sans deborder
   (mesure du 02/09/2026 : logo + 4 liens + bouton = 1160 px pour 1110 px disponibles a 1181 px). */
@media (min-width: 1181px) and (max-width: 1400px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 1rem; }
  .nav-cta-btn { padding: 12px 21px; font-size: 0.95rem; }
}

/* Au-delà de 1400 px, la barre s'ouvre : le logo part plus à gauche, le bouton plus à
   droite, les liens s'écartent, et ils se centrent sur la PAGE et non entre leurs deux
   voisins (le logo et le bouton n'ont pas la même largeur, un centrage en flux les
   décalait de 33 px). Sous ce palier, rien ne bouge : mesuré, la barre débordait sinon
   de 3 px à 320 px et de 10 px à 1181 px. */
@media (min-width: 1401px) {
  .nav { width: min(1420px, 96%); gap: 26px; }
  .nav-links { flex: 0 0 auto; gap: 40px; position: absolute; left: 50%; transform: translateX(-50%); }
  .nav > .nav-cta-btn.nav-desktop-only { margin-left: auto; }
}

@media (max-width: 1180px) {
  .header .nav-links {
    flex: initial;
    justify-content: initial;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--sauge-voile);
    flex-direction: column;
    gap: 0;
    padding: 12px 0 22px;
    border-bottom: 2px solid var(--bordure-moyenne);
    /* 🔴 Le menu est un ENFANT du header : quel que soit son z-index, il ne peut pas passer
       derrière le fond du header. Glisser depuis le haut (translateY(-130%)) le faisait donc
       traverser la barre, devant elle. Il s'ouvre maintenant SOUS la barre, par un fondu et
       un petit glissé vers le bas, et ne la croise jamais (retour Julien, 08/09). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.3s;
    z-index: 99;
  }
  .nav-links.ouvert { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--transition), transform var(--transition), visibility 0s; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: inline-block; padding: 13px 0; font-size: 1.05rem; border-bottom: 0; }
  /* Le trait sous le lien actif : en border-bottom, il tombait 13 px sous le mot (le padding
     de la zone tactile). En soulignement de texte, il se cale juste sous les lettres, et le
     padding garde son rôle pour le doigt (retour Julien, 08/09). */
  .nav-links a:hover, .nav-links a.actif {
    text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
    text-decoration-color: var(--sauge);
  }
  .nav-links .nav-mobile-only { display: list-item; margin-top: 10px; }
  /* .nav-links a (classe + élément) bat .nav-cta-btn (une classe) : le bouton perdait son
     padding, son blanc, et gagnait le filet des liens. Le texte était bord à bord et brun
     (retour Julien, 08/09). Deux classes ici pour reprendre la main. */
  .nav-mobile-only .nav-cta-btn, .nav-mobile-only .nav-cta-btn:hover {
    display: inline-flex; padding: 13px 26px; color: var(--blanc); border-bottom: 0;
  }
  .nav .nav-desktop-only { display: none; }
  .hamburger { display: flex; }
  /* Les boutons restent cote a cote (retour Julien 02/09 : « je prefere les boutons cote a cote ») :
     sur ces largeurs, la colonne de texte prend le pas sur la photo plutot que de rapetisser les boutons. */
  .hero-grille { grid-template-columns: 1.2fr 0.8fr; gap: 44px; }
  .offre-carte { grid-template-columns: 1.2fr 0.8fr; }
  .offre-texte { padding: 60px 20px 60px 46px; }
  .hero-actions, .offre-actions { gap: 12px; }
  .hero-actions .btn, .offre-actions .btn { padding: 15px 24px; }
}

@media (max-width: 1024px) {

  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-visuel { max-width: 420px; }
  .piliers { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pilier { border-left: 0; border-top: 2px solid var(--bordure-sauge); padding-top: 22px; }
  .pilier:first-child { border-top: 0; padding-top: 8px; }
  .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-2, .grille-prestations { grid-template-columns: minmax(0, 1fr); }
  .chapitre-grille, .chapitre-grille.inverse { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .chapitre-grille.inverse .chapitre-texte { order: 1; }
  .chapitre-grille.inverse .chapitre-visuel { order: 2; }
  .chapitre-visuel { max-width: 420px; }
  .offre-carte { grid-template-columns: minmax(0, 1fr); }
  .offre-texte { padding: 52px 40px 44px; }
  .offre-visuel { aspect-ratio: 16 / 10; min-height: 0; }
  .grille-animaux, .grille-nature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes, .etapes.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
  .contact-cartes { margin-top: 0; }
  .contact-note { margin-top: 34px; }
  .reperes-grille, .reperes-grille.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repere:nth-child(3) { border-left: 0; }
  .repere:nth-child(n+3) { border-top: 2px solid var(--bordure); }
  .footer-grille { grid-template-columns: 1fr 1fr; gap: 34px; }
  .sprig--hero-gauche { width: 182px; height: 224px; }
  .sprig--section-gauche, .sprig--section-droite { width: 168px; height: 196px; opacity: 0.6; }
}

@media (max-width: 640px) {
  :root { --header-h: 88px; }
  body { font-size: 17px; }
  h1 { font-size: 1.75rem; }
  h1.h1-long { font-size: 1.35rem; }
  .cta-bloc h2, .offre-carte h2 { font-size: 1.3rem; }
  .carte h3, .pilier h3, .etape h3 { font-size: 1.15rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.32rem; }
  .eyebrow { font-size: 1.02rem; letter-spacing: 0.15em; }
  .kicker { font-size: 1.75rem; }
  .section { padding: 68px 0; }
  .hero { padding: 48px 0 64px; }
  .hero-sous-titre { font-size: 1.05rem; }
  .hero-actions .btn, .offre-actions .btn, .page-hero-actions .btn, .cta-bloc .cta-actions .btn, .section-actions .btn { width: 100%; }
  .btn { padding: 15px 22px; }
  .nav-logo-nom { font-size: 1.2rem; }
  .nav-logo-sous { font-size: 1.25rem; }
  .hero-ancrage { gap: 12px; flex-direction: column; }
  .hero-ancrage .ancrage-item { font-size: 1.08rem; }
  .bande-piliers { padding: 44px 0; }
  .grille-3, .grille-4, .grille-animaux, .grille-nature, .etapes, .etapes.trois { grid-template-columns: minmax(0, 1fr); }
  .carte, .etape { padding: 30px 22px; }
  .animal { padding: 26px 20px; }
  .presta-corps { padding: 24px 22px 26px; }
  .presta .presta-duree { font-size: 1.37rem; }
  .animal .animal-role { font-size: 1.7rem; }
  .presta-tete { flex-direction: column; gap: 10px; }
  .presta h3 { font-size: 1.36rem; }
  .bandeau-citation { padding: 58px 0; }
  .bandeau-citation .citation { font-size: 1.32rem; }
  .citation-note { font-size: 1.75rem; }
  .citation-encart { font-size: 1.18rem; padding-left: 16px; }
  .citation-centre { font-size: 1.22rem; margin: 34px auto; padding: 24px 0; }
  .offre-texte { padding: 40px 24px 34px; }
  .offre-visuel { aspect-ratio: 4 / 3; }
  .offre-carte, .cta-bloc { border-radius: var(--r); }
  .cta-bloc { padding: 44px 24px; }
  .cta-bloc .eyebrow-illu { width: 222px; height: 222px; }
  .session { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; text-align: center; }
  .session-date { border-right: 0; padding-right: 0; display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .session-date .mois { margin-top: 0; }
  .session-infos { justify-content: center; }
  .session-places { text-align: center; }
  .form-rangee { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .formulaire { padding: 32px 22px; }
  .form-titre { font-size: 1.3rem; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { width: 100%; }
  .reperes-grille, .reperes-grille.trois { grid-template-columns: minmax(0, 1fr); }
  .repere { border-left: 0; border-top: 2px solid var(--bordure); padding: 22px 16px 20px; }
  .repere:first-child { border-top: 0; }
  .repere .repere-chiffre { font-size: 1.9rem; }
  .page-hero { padding: 64px 0 58px; }
  .page-hero .kicker { font-size: 1.7rem; }
  .page-hero.petit { padding: 48px 0 40px; }
  .bande-photo { min-height: 320px; }
  .bande-photo .container { padding: 60px 0; }
  .bande-photo blockquote { font-size: 1.25rem; }
  .faq details { padding: 0 20px; }
  .faq summary { font-size: 1.05rem; padding: 18px 0; }
  .footer-grille { grid-template-columns: 1fr; gap: 30px; padding: 46px 0 38px; }
  .footer-bas-inner { flex-direction: column; text-align: center; }
  .eyebrow-illu { width: 258px; height: 258px; }
  .chapitre-texte .eyebrow-illu, .contact-grille .eyebrow-illu, .histoire-texte .eyebrow-illu { width: 228px; height: 228px; }
  .eyebrow-illu--grand { width: 294px; height: 294px; }
  .legende { font-size: 1.55rem; }
  .sprig { display: none; }
  .legal h2 { font-size: 1.25rem; }
  .chapitre-visuel, .chapitre-grille.inverse .chapitre-visuel { --rot: -1deg; }
}

/* Tres petits ecrans (<=340 px) : les sous-titres manuscrits des cartes prestation
   tiennent alors sur une ligne, ou se coupent a 3 mots + 3 mots. Meme taille pour
   les quatre cartes, comme partout ailleurs. */
@media (max-width: 340px) {
  .presta .presta-duree { font-size: 1.3rem; }
}