@charset "UTF-8";
/* ==========================================================================
   Cabinet Zenergy — feuille de style unique

   Vert profond comme couleur de marque, papier crème comme fond, terre cuite
   pour le seul bouton de rendez-vous. Polices système uniquement : aucune
   requête vers un service tiers.
   Parti pris de mise en page : des photographies à fond perdu, des listes
   réglées plutôt que des grilles de cartes, des blocs volontairement
   asymétriques.
   ========================================================================== */

/* --------------------------------------------------------- 1. Fondations */

:root {
  color-scheme: light;

  --vert-950: #0c1c15;
  --vert-900: #10281e;
  --vert-800: #163828;
  --vert-700: #1d4a35;
  --vert-600: #266044;
  --vert-500: #337a56;
  --vert-300: #8ab49b;
  --vert-200: #bcd6c5;
  --vert-100: #dcebe0;
  --vert-50:  #edf4ee;

  --creme:    #f7f3e9;
  --creme-2:  #efe8d8;
  --blanc:    #fffdf8;

  --encre:    #17231d;
  --encre-2:  #4d5b53;
  --encre-3:  #77837b;

  --ligne:    #ddd5c3;
  --ligne-2:  #c9bfa8;

  --sable:      #f8edd6;
  --sable-bord: #e0c795;
  --sable-encre:#6f4f0f;

  --terre:    #c2542c;
  --terre-dk: #a1401e;

  --focus:    #1b58d0;

  --w-page:  76rem;
  --w-prose: 39rem;

  --ombre:    0 1px 2px rgba(12, 28, 21, .06);
  --ombre-md: 0 10px 30px -18px rgba(12, 28, 21, .55);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --pas:    clamp(3rem, 1.5rem + 5.2vw, 5.75rem);
  --marge:  clamp(1.15rem, .6rem + 2vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--vert-900);
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.35rem + 3.5vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); margin-top: 2em; }
h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.4rem); margin-top: 1.8em; }
h4 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; margin: 1.7em 0 .4em;
     color: var(--vert-900); }
p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
li::marker { color: var(--vert-300); }
strong { font-weight: 650; color: var(--vert-900); }
hr { border: 0; border-top: 1px solid var(--ligne); margin: var(--pas) 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--vert-600); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .17em; text-decoration-color: var(--vert-200);
    transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--terre-dk); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--vert-200); }

.skip {
  position: absolute; left: .5rem; top: -4rem; z-index: 200;
  background: var(--vert-900); color: #fff; padding: .7rem 1.1rem; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: .5rem; color: #fff; }

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

/* ------------------------------------------------------- 2. Mise en page */

.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--marge); }
.prose { max-width: var(--w-prose); }
.prose > :first-child { margin-top: 0; }
.section { padding-block: var(--pas); }
.section--tint { background: var(--creme-2); }
.section--vert { background: var(--vert-800); color: #e8e4d6; }
.section--vert h2, .section--vert h3 { color: #fff; }
.section--vert a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.section--vert strong { color: #fff; }
.section--after-head { padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }

/* Intitulé de section : serif en italique, discret. Pas de capitales étirées. */
.eyebrow {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.02rem; color: var(--vert-500); margin: 0 0 .55rem; letter-spacing: 0;
  text-transform: none;
}
.section--vert .eyebrow { color: var(--vert-300); }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 0; }

.lead { font-size: clamp(1.1rem, 1.02rem + .38vw, 1.3rem); line-height: 1.55; color: var(--encre-2); }
.section--vert .lead { color: #cfd8ce; }

.grid { display: grid; gap: clamp(1rem, .5rem + 1.6vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Colonnes délibérément inégales. */
.split { display: grid; gap: clamp(1.8rem, 1rem + 3.5vw, 3.8rem); align-items: start; }
@media (min-width: 55rem) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--inverse { grid-template-columns: 5fr 7fr; }
  .split--egal { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------- 3. Boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none;
  padding: .85em 1.6em; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}

/* Rendez-vous — la seule couleur vive du site (cahier des charges §4.2). */
.btn--rdv { background: var(--terre); color: #fff; }
.btn--rdv:hover { background: var(--terre-dk); color: #fff; }
.btn--ghost { border-color: var(--ligne-2); color: var(--vert-900); background: transparent; }
.btn--ghost:hover { border-color: var(--vert-600); color: var(--vert-700); background: var(--vert-50); }
.section--vert .btn--ghost, .hero__texte .btn--ghost, .footer .btn--ghost {
  border-color: rgba(255,255,255,.4); color: #fff; }
.section--vert .btn--ghost:hover, .hero__texte .btn--ghost:hover, .footer .btn--ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn--sm { padding: .58em 1.05em; font-size: .9375rem; }
.btn--block { width: 100%; }

.cta-inline { margin: 2.5rem 0; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
  padding-top: 1.6rem; border-top: 2px solid var(--vert-800); }
.cta-inline__note { font-size: .9375rem; color: var(--encre-3); }

/* ------------------------------------------------------------ 4. En-tête */

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--vert-900); color: #ecefe8;
}
.header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 1.75rem; height: 1.75rem; flex: none; }
.brand__name {
  display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  letter-spacing: .07em; color: #fff; line-height: 1;
}
.brand__sub {
  display: block; font-family: var(--serif); font-style: italic; font-size: .78rem;
  color: var(--vert-300); margin-top: .18rem; letter-spacing: 0;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .5rem .68rem; white-space: nowrap; border-radius: 2px;
  font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav__link[aria-current] { color: #fff; font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--terre); border-radius: 0; }

.nav__item--has-menu { position: relative; display: flex; align-items: center; }
.nav__item--has-menu > .nav__link:first-child { padding-right: .2rem; }
.nav__toggle { display: inline-flex; align-items: center; border: 0; background: none;
  cursor: pointer; padding: .5rem .55rem .5rem .3rem; }
.nav__chevron { width: .48rem; height: .48rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.nav__sub {
  position: absolute; top: calc(100% + .3rem); left: 0; min-width: 14rem; z-index: 5;
  background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre-md);
  padding: .35rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .16s;
}
.nav__item--has-menu:hover .nav__sub,
.nav__item--has-menu:focus-within .nav__sub,
.nav__sub[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: .5rem .7rem; font-size: .9375rem;
  color: var(--encre-2); text-decoration: none; }
.nav__sub a:hover { background: var(--vert-50); color: var(--vert-700); }

.header__cta { display: none; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .55rem; border-radius: 2px;
  background: none; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
}
.burger span { display: block; height: 1.5px; background: #fff; transition: .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 4.5rem 0 0; z-index: 99; background: var(--vert-900); color: #fff;
  padding: 1.2rem var(--marge) 7rem; overflow-y: auto; overscroll-behavior: contain;
}
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-bottom: 1px solid rgba(255,255,255,.14); }
.drawer a { display: block; padding: .9rem .2rem; font-size: 1.1rem; font-family: var(--serif);
  font-weight: 500; color: #fff; text-decoration: none; }
.drawer .drawer__sub a { padding: .5rem .2rem .5rem 1.1rem; font-size: .96875rem;
  font-family: var(--sans); color: rgba(255,255,255,.72); }
.drawer__sub { padding-bottom: .5rem !important; }
.drawer__foot { margin-top: 1.6rem; display: grid; gap: .9rem; }
.drawer__meta { font-size: .9375rem; color: rgba(255,255,255,.75); }
.drawer__meta a { display: inline; padding: 0; font-family: var(--sans); font-size: inherit; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .drawer { display: none !important; }
}

/* Barre de rendez-vous fixe en bas d'écran, sur mobile (cahier des charges §4.2). */
.rdv-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
  padding: .6rem var(--marge) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--creme); border-top: 1px solid var(--ligne-2);
}
@media (min-width: 62rem) { .rdv-bar { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: 4.6rem; } }

/* ------------------------------------------------------------- 5. Héros */

.hero { display: grid; background: var(--vert-800); }
@media (min-width: 60rem) { .hero { grid-template-columns: 47fr 53fr; align-items: stretch; } }

.hero__texte {
  background: var(--vert-800); color: #eae6d8;
  padding: clamp(2.4rem, 1.6rem + 4vw, 5rem) var(--marge);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__texte > div { width: 100%; max-width: 33rem; margin-inline: auto; }
@media (min-width: 60rem) {
  .hero__texte > div { margin-right: clamp(1.5rem, 3vw, 3.5rem); margin-left: auto; }
}
.hero__titre { color: #fff; margin-bottom: .35em; }
.hero__baseline { font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.45; color: var(--vert-200);
  max-width: 30ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.hero__addr { font-size: .9375rem; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.1rem; }
.hero__addr strong { display: block; color: #fff; font-family: var(--serif);
  font-size: 1.08rem; font-weight: 600; margin-bottom: .15rem; }
.hero__addr a { color: #fff; }

.hero__media { position: relative; min-height: 16rem; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 60rem) { .hero__media img { position: absolute; inset: 0; } }

.page-head { padding-block: clamp(2rem, 1.3rem + 2.6vw, 3.5rem) 0; }
.page-head__title { margin-bottom: .4rem; max-width: 20ch; }
.page-head .lead { max-width: 44ch; }

.crumbs { font-size: .84375rem; color: var(--encre-3); padding-top: 1.2rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ligne-2); }
.crumbs a { color: var(--encre-3); text-decoration-color: var(--ligne-2); }
.crumbs a:hover { color: var(--vert-600); }

/* ------------------------------------------------------ 6. Photographies */

.photo { margin: 0; }
.photo img { width: 100%; }
.photo figcaption {
  font-family: var(--serif); font-style: italic; font-size: .9rem;
  color: var(--encre-3); margin-top: .55rem;
}
.section--vert .photo figcaption { color: var(--vert-300); }
.photo--bord { border: 1px solid var(--ligne); }
.photo--cadre img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Le portrait est un cadrage serré : au-delà de cette largeur il écrase le texte. */
.photo--portrait { max-width: 21rem; }
.photo--portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.photo--bande img { aspect-ratio: 21 / 8; object-fit: cover; }
/* Document photographié : posé dans la marge, le texte court à côté. */
.photo--doc { max-width: 25rem; }
@media (min-width: 52rem) {
  .prose > .photo--doc { float: right; width: 15rem; margin: .3rem 0 1.2rem 1.8rem; }
  .prose > h2, .prose > h3 { clear: both; }
}

/* Mosaïque volontairement déséquilibrée : une grande, deux petites. */
.mosaique { display: grid; gap: .8rem; margin: 2rem 0; }
@media (min-width: 46rem) {
  .mosaique { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, 1fr); }
  .mosaique > :first-child { grid-row: span 2; }
  .mosaique img { height: 100%; object-fit: cover; }
  .mosaique > :first-child img { aspect-ratio: auto; min-height: 24rem; }
  .mosaique > :not(:first-child) img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------- 7. Composants */

/* Entrées principales : une liste réglée, pas une rangée de cartes. */
.entrees { border-top: 1px solid var(--ligne); margin: 0; padding: 0; list-style: none; }
.entrees li { margin: 0; }
.entree {
  position: relative; display: grid; gap: .35rem 2rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--ligne);
  transition: background .15s;
}
@media (min-width: 48rem) {
  .entree { grid-template-columns: 3.5rem 16rem 1fr; align-items: baseline; }
}
.entree:hover { background: var(--vert-50); }
.entree__num { font-family: var(--serif); font-size: 1.7rem; line-height: 1;
  color: var(--vert-300); }
.entree__titre { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); margin: 0; }
.entree__titre a { color: inherit; text-decoration: none; }
.entree__titre a::after { content: ""; position: absolute; inset: 0; }
.entree p { margin: 0; color: var(--encre-2); font-size: .96875rem; }
.entree__lien { margin-top: .5rem !important; font-size: .9375rem; font-weight: 550;
  color: var(--vert-600); }
.entree__lien::after { content: " →"; }
.entree:hover .entree__lien { color: var(--terre-dk); }

/* Domaines : même principe, une table de matières. */
.domaines { border-top: 1px solid var(--ligne); margin: 1.8rem 0 0; padding: 0; list-style: none; }
.domaines li { margin: 0; }
.domaine {
  position: relative; display: grid; gap: .15rem 1.5rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--ligne); transition: background .15s;
}
@media (min-width: 48rem) {
  .domaine { grid-template-columns: 16rem 1fr 6rem; align-items: baseline; }
}
.domaine:hover { background: var(--vert-50); }
.domaine__nom { font-family: var(--serif); font-size: 1.28rem; color: var(--vert-900);
  margin: 0; font-weight: 600; }
.domaine__nom a { color: inherit; text-decoration: none; }
.domaine__nom a::after { content: ""; position: absolute; inset: 0; }
.domaine__desc { color: var(--encre-2); font-size: .9375rem; margin: 0; }
.domaine__n { font-size: .84375rem; color: var(--vert-500); margin: 0; }
@media (min-width: 48rem) { .domaine__n { text-align: right; } }
.domaine--vide .domaine__nom { color: var(--encre-3); }
.domaine--vide .domaine__n { color: var(--encre-3); font-style: italic; }

.card {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid var(--ligne); padding: clamp(1.2rem, .9rem + .9vw, 1.7rem);
  transition: border-color .16s, background .16s;
}
.card--link { position: relative; }
.card--link:hover { border-color: var(--vert-500); background: var(--vert-50); }
.card__title { font-size: 1.2rem; margin: 0 0 .4em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card p { color: var(--encre-2); font-size: .96875rem; margin-bottom: 1em; }
.card__more { margin-top: auto; font-size: .9375rem; font-weight: 650; color: var(--vert-600); }
.card__more::after { content: " →"; }
.card__count { font-family: var(--serif); font-style: italic; font-size: .95rem;
  color: var(--vert-500); margin-bottom: .35rem; }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid;
  gap: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: s; margin: 0; padding-top: 1.1rem;
  border-top: 2px solid rgba(255,255,255,.3); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block;
  font-family: var(--serif); font-size: 1.35rem; color: var(--vert-300); margin-bottom: .5rem; }
.steps h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.steps p { margin: 0; }

/* Encadrés */
.note {
  border-left: 3px solid var(--vert-500); background: var(--blanc);
  border-top: 1px solid var(--ligne); border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  padding: 1.05rem 1.3rem; margin: 1.8rem 0; font-size: .96875rem;
}
.note > :last-child { margin-bottom: 0; }
.note--warn { background: var(--sable); border-color: var(--sable-bord);
  border-left-color: var(--sable-encre); }
.note--warn strong { color: var(--sable-encre); }
.note__title { display: block; font-weight: 700; margin-bottom: .3rem; }

.retenir {
  background: var(--vert-800); color: #e8e4d6; padding: clamp(1.3rem, 1rem + .9vw, 1.9rem);
  margin: 2.4rem 0;
}
.retenir__label { font-family: var(--serif); font-style: italic; font-size: .95rem;
  color: var(--vert-300); margin: 0 0 .5rem; }
.retenir__slogan { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.35; margin: 0 0 .6rem; color: #fff; }
.retenir p:last-child { margin: 0; color: #cfd8ce; }

/* Marqueur de contenu manquant : volontairement visible. */
.todo {
  background: repeating-linear-gradient(135deg, #fbeed3, #fbeed3 8px, #f7e4be 8px, #f7e4be 16px);
  color: #6a480a; border: 1px dashed #d3a544; padding: .1em .45em; font-size: .9em;
}
.todo::before { content: "à compléter — "; font-weight: 700; text-transform: uppercase;
  font-size: .76em; letter-spacing: .05em; }
.todo--block { display: block; padding: .8rem 1rem; margin: 1.3rem 0; }

/* Tableaux */
.table-wrap { overflow-x: auto; margin: 1.7rem 0; border: 1px solid var(--ligne);
  background: var(--blanc); }
table { border-collapse: collapse; width: 100%; font-size: .96875rem; }
th, td { text-align: left; padding: .78rem 1rem; border-bottom: 1px solid var(--ligne);
  vertical-align: top; }
thead th { background: var(--vert-800); color: #fff; font-family: var(--sans);
  font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 650; white-space: nowrap; border-bottom: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--vert-50); }

.arrow-links { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; font-size: .96875rem;
  margin: 1.5rem 0; align-items: baseline; }
.arrow-links__label { color: var(--encre-3); }
.arrow-links a { font-weight: 550; }
.arrow-links a::before { content: "→\00A0"; color: var(--vert-500); }

/* Liste de fiches */
.fiches { list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: 0;
  border-top: 1px solid var(--ligne); }
.fiches li { margin: 0; }
.fiche-link {
  display: flex; align-items: baseline; gap: .7rem; padding: .85rem .2rem;
  border-bottom: 1px solid var(--ligne); text-decoration: none; color: var(--vert-900);
  font-weight: 550; transition: background .15s, padding-left .15s;
}
.fiche-link:hover { background: var(--vert-50); padding-left: .7rem; color: var(--vert-700); }
.fiche-link::after { content: "→"; margin-left: auto; color: var(--vert-300); }
.fiche-link:hover::after { color: var(--terre); }
.fiche-link--soon { color: var(--encre-3); font-weight: 400; font-style: italic; }
.fiche-link--soon::after { content: none; }
.fiche-link__soon { margin-left: auto; font-size: .8125rem; font-style: normal;
  color: var(--encre-3); }
@media (min-width: 46rem) {
  .fiches--multi { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}
@media (min-width: 70rem) { .fiches--multi { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------- 8. Fiche pathologie */

.fiche__layout { display: grid; gap: var(--pas); align-items: start; }
@media (min-width: 68rem) {
  .fiche__layout { grid-template-columns: minmax(0, 1fr) 17rem; }
  .fiche__aside { position: sticky; top: 6.2rem; }
}
.fiche__body > p, .fiche__body > h2, .fiche__body > h3,
.fiche__body > blockquote, .fiche__body > .lead { max-width: 39rem; }
.fiche__body > h2:first-of-type { margin-top: 1.5em; }

.syndromes td:first-child { font-weight: 650; color: var(--vert-900); }
.syndromes td:last-child { color: var(--encre-2); }
@media (max-width: 47.99rem) {
  .syndromes .table-wrap { border: 0; background: none; overflow: visible; }
  .syndromes table, .syndromes tbody, .syndromes tr, .syndromes td { display: block; width: 100%; }
  .syndromes thead { display: none; }
  .syndromes tr { background: var(--blanc); border: 1px solid var(--ligne);
    padding: .3rem .2rem; margin-bottom: .75rem; }
  .syndromes tr:hover { background: var(--blanc); }
  .syndromes td { border: 0; padding: .5rem .9rem; }
  .syndromes td + td { border-top: 1px dashed var(--ligne); }
  .syndromes td::before {
    content: attr(data-label); display: block; font-family: var(--serif); font-style: italic;
    font-size: .82rem; color: var(--vert-500); margin-bottom: .1rem;
  }
}

.alim { display: grid; gap: 1.2rem; margin: 1.8rem 0; }
@media (min-width: 42rem) { .alim { grid-template-columns: 1fr 1fr; } }
.alim__col { background: var(--blanc); border: 1px solid var(--ligne); padding: 1.2rem 1.35rem; }
.alim__col h3 { margin: 0 0 .8rem; font-size: 1.1rem; font-family: var(--serif); }
.alim__col--yes { border-top: 3px solid var(--vert-600); }
.alim__col--yes h3 { color: var(--vert-700); }
.alim__col--no { border-top: 3px solid var(--ligne-2); }
.alim__col--no h3 { color: var(--encre-3); }
.alim ul { margin: 0; padding: 0; list-style: none; font-size: .96875rem; }
.alim li { position: relative; padding-left: 1.15rem; margin-bottom: .45rem; color: var(--encre-2); }
.alim li::before { position: absolute; left: 0; font-weight: 700; }
.alim__col--yes li::before { content: "+"; color: var(--vert-500); }
.alim__col--no li::before { content: "–"; color: var(--ligne-2); }

.recettes { display: grid; gap: 1.2rem; margin: 1.8rem 0; }
@media (min-width: 42rem) { .recettes { grid-template-columns: 1fr 1fr; } }
.recette { background: var(--creme-2); padding: 1.3rem 1.4rem; }
.recette h3 { margin: 0 0 .7rem; font-size: 1.1rem; }
.recette ul { list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .96875rem; }
.recette li { padding-left: 1rem; position: relative; color: var(--encre-2); margin-bottom: .35rem; }
.recette li::before { content: "·"; position: absolute; left: .25rem; color: var(--vert-500);
  font-weight: 700; }
.recette__effet { margin: 0; padding-top: .8rem; border-top: 1px solid var(--ligne-2);
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--vert-700); }

.conseils { list-style: none; padding: 0; margin: 1.7rem 0; display: grid; gap: .7rem; }
.conseils li { position: relative; padding-left: 1.8rem; color: var(--encre-2); margin: 0; }
.conseils li::before {
  content: ""; position: absolute; left: .3rem; top: .6em; width: .45rem; height: .45rem;
  border-right: 1.5px solid var(--vert-500); border-bottom: 1.5px solid var(--vert-500);
  transform: rotate(45deg);
}

.aside-box { background: var(--blanc); border: 1px solid var(--ligne);
  padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.aside-box h2, .aside-box h3 { margin: 0 0 .7rem; font-size: 1rem; font-family: var(--serif);
  font-style: italic; font-weight: 400; color: var(--vert-500); letter-spacing: 0;
  text-transform: none; }
.aside-box ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.aside-box li { margin-bottom: .45rem; }
.aside-box p { font-size: .9375rem; color: var(--encre-2); }
.aside-box p:last-child { margin-bottom: 0; }
.aside-box--vert { background: var(--vert-800); border-color: var(--vert-800); color: #dfe4da; }
.aside-box--vert h2, .aside-box--vert h3 { color: var(--vert-300); }
.aside-box--vert p, .aside-box--vert strong { color: #fff; }
.toc a { display: block; padding: .22rem 0 .22rem .75rem; color: var(--encre-2);
  text-decoration: none; border-left: 2px solid var(--ligne); }
.toc a:hover { color: var(--vert-700); border-left-color: var(--vert-500); }

/* --------------------------------------------------------- 9. Ressources */

.filters { display: grid; gap: 1rem; margin: 2rem 0; padding: 1.3rem;
  background: var(--blanc); border: 1px solid var(--ligne); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filters__label { font-family: var(--serif); font-style: italic; font-size: .95rem;
  color: var(--vert-500); width: 100%; }
@media (min-width: 40rem) { .filters__label { width: 6rem; } }
.chip {
  font: inherit; font-size: .875rem; padding: .35em .9em; border-radius: 100px;
  border: 1px solid var(--ligne-2); background: var(--blanc); color: var(--encre-2);
  cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--vert-500); color: var(--vert-700); }
.chip[aria-pressed="true"] { background: var(--vert-700); border-color: var(--vert-700); color: #fff; }
.search {
  font: inherit; width: 100%; padding: .7em 1em; border: 1px solid var(--ligne-2);
  background: var(--blanc); color: var(--encre); border-radius: 2px;
}
.search::placeholder { color: var(--encre-3); }
.filters__count { font-size: .9375rem; color: var(--encre-3); }
.res-empty { padding: 2.5rem 1rem; text-align: center; color: var(--encre-3); }

/* --------------------------------------------------------- 10. Accordéon */

.faq { border-top: 1px solid var(--ligne); margin: 2rem 0; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--vert-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.5rem; width: .6rem; height: .6rem;
  border-right: 1.5px solid var(--vert-500); border-bottom: 1.5px solid var(--vert-500);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--vert-600); }
.faq__body { padding: 0 0 1.3rem; color: var(--encre-2); }
.faq__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------ 11. Bandeau final, formulaires */

.band { background: var(--vert-800); color: #e8e4d6; padding-block: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
.band__inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .band__inner { grid-template-columns: 1fr auto; } }
.band h2 { margin: 0 0 .4rem; color: #fff; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); }
.band__meta { font-size: .9375rem; color: #c6cfc4; margin: 0; }
.band__meta a { color: #fff; }

.form { display: grid; gap: .8rem; }
.form__row { display: grid; gap: .3rem; }
.form label { font-size: .875rem; font-weight: 650; }
.form input, .form textarea, .form select {
  font: inherit; padding: .68em .9em; border: 1px solid var(--ligne-2); border-radius: 2px;
  background: var(--blanc); color: var(--encre); width: 100%;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form__consent { display: flex; gap: .6rem; align-items: flex-start;
  font-size: .84375rem; color: var(--encre-2); font-weight: 400; line-height: 1.5; }
.form__consent input { width: auto; margin-top: .22rem; flex: none; }
.form__note { font-size: .8125rem; color: var(--encre-3); margin: 0; }
.form__status { font-size: .9375rem; color: var(--vert-700); font-weight: 650; margin: 0; }

.newsletter { background: var(--blanc); border: 1px solid var(--ligne);
  padding: clamp(1.3rem, 1rem + 1vw, 2rem); }
.newsletter h2, .newsletter h3 { margin-top: 0; }

/* Carte : chargement uniquement après consentement (RGPD). */
.map { border: 1px solid var(--ligne); overflow: hidden; background: var(--creme-2); }
.map__ph { display: grid; place-items: center; gap: .9rem; text-align: center;
  aspect-ratio: 16 / 10; padding: 1.5rem; position: relative; }
.map__ph::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("../img/plan.svg") center / cover; }
.map__ph > * { position: relative; }
.map__ph p { font-size: .875rem; color: var(--encre-2); max-width: 34ch; margin: 0; }
.map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }

/* ------------------------------------------------------ 12. Pied de page */

.footer { background: var(--vert-950); color: #c2cbc3; padding-block: var(--pas) 2rem;
  font-size: .9375rem; }
.band + .footer { margin-top: 0; }
.footer strong { color: #fff; }
.footer a { color: #e4eae2; text-decoration-color: rgba(228, 234, 226, .28); }
.footer a:hover { color: #fff; text-decoration-color: currentColor; }
.footer h2 { color: var(--vert-300); font-family: var(--serif); font-style: italic;
  font-size: 1rem; font-weight: 400; margin: 0 0 .9rem; letter-spacing: 0; }
.footer__grid { display: grid; gap: 2.2rem; }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; }
.footer__brand { font-family: var(--serif); font-size: 1.45rem; color: #fff;
  letter-spacing: .07em; margin: 0 0 .7rem; }
.footer__bio { color: #a2ada5; line-height: 1.6; }
.footer__portrait { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 50%;
  margin-bottom: .9rem; }
/* Avertissement médical : affiché une seule fois sur le site, ici. */
.footer__avertissement {
  margin: 2.4rem 0 0; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: #9aa59c;
}
.footer__avertissement + .footer__bottom { margin-top: 1.1rem; padding-top: 0; border-top: 0; }
.footer__bottom { margin-top: 2.6rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center;
  font-size: .84375rem; color: #8d978f; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; }
@media (min-width: 46rem) { .footer__bottom ul { margin-left: auto; } }
.footer__bottom li { margin: 0; }
.footer .form input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2);
  color: #fff; }
.footer .form input::placeholder { color: #838d85; }
.footer .form__consent, .footer .form__note, .footer .form label { color: #a2ada5; }
.footer .form__status { color: #fff; }

/* ---------------------------------------------------------- 13. Cookies */

.cookies {
  position: fixed; z-index: 150; left: var(--marge); right: var(--marge); bottom: var(--marge);
  max-width: 30rem; background: var(--blanc); border: 1px solid var(--ligne-2);
  border-top: 3px solid var(--vert-700); box-shadow: 0 16px 44px -18px rgba(12,28,21,.5);
  padding: 1.25rem 1.4rem; font-size: .9375rem;
}
@media (max-width: 61.99rem) { .cookies { bottom: 4.9rem; } }
.cookies h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.cookies p { color: var(--encre-2); margin: 0 0 1rem; font-size: .875rem; }
/* Refuser doit être aussi simple qu'accepter : trois boutons de poids identique (CNIL). */
.cookies__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cookies__actions .btn { padding: .6em .5em; font-size: .875rem; font-weight: 600;
  border-color: var(--ligne-2); background: var(--blanc); color: var(--encre); }
.cookies__actions .btn:hover { border-color: var(--vert-600); background: var(--vert-50);
  color: var(--vert-700); }

/* ------------------------------------------------------------ 14. Divers */

.badge { display: inline-block; font-family: var(--serif); font-style: italic;
  font-size: .9rem; color: var(--vert-500); }
.meta-line { font-size: .875rem; color: var(--encre-3); margin: 0 0 1.2rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.quote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; font-style: italic;
  color: var(--vert-900); border-left: 2px solid var(--vert-500); padding-left: 1.1rem;
  margin: 0 0 1rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .875em; background: var(--creme-2); border: 1px solid var(--ligne);
  padding: .1em .35em; }

/* --------------------------------------------------------- 15. Impression */

@media print {
  .header, .drawer, .rdv-bar, .cookies, .footer, .band, .btn, .cta-inline, .fiche__aside,
  .crumbs, .skip, .filters { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .section { padding-block: 0; }
  .card, .note, .retenir, .alim__col, .recette, .table-wrap, .photo { break-inside: avoid; }
  .retenir { background: #fff; color: #000; border: 1px solid #999; }
  .retenir__slogan, .retenir p:last-child, .retenir__label { color: #000; }
  thead th { background: #eee; color: #000; }
  a { text-decoration: none; color: #000; }
  .prose, .wrap, .fiche__body > * { max-width: none; }
  .fiche__layout { display: block; }
}