/* ==========================================================================
   Peggy Rodier, sage-femme libérale à Caen
   --------------------------------------------------------------------------
   La charte n'est pas inventée : elle est relevée sur le cabinet lui-même.
     · les deux verts viennent du logo            → #1C3423 et #3E694B
     · le blanc cassé chaud, des murs             → #FAF8F3
     · le vert très pâle, de la fresque végétale de la salle d'attente
     · le chêne clair, du sol
   Titres : Faune (Alice Savoie / Cnap) — servie par le Cnap, CC BY-ND 4.0
   Texte  : Luciole (CTRDV / typographies.fr) — dessinée pour la lisibilité
   ========================================================================== */

/* Un élément masqué par `hidden` doit l'être quoi qu'en dise le reste de la
   feuille : sans ce garde-fou, `.btn { display: inline-flex }` l'emporte sur la
   règle par défaut du navigateur et le bouton reste visible. */
[hidden] { display: none !important; }

/* --- 1. Jetons ----------------------------------------------------------- */
:root {
  --papier:     #FAF8F3;   /* fond principal — le blanc cassé des murs */
  --papier-2:   #F1EEE5;   /* aplat doux */
  --sauge:      #E7EDE6;   /* vert très pâle de la fresque */
  --craie:      #FFFEFB;   /* cartes, texte sur fond sombre */
  --foret:      #1C3423;   /* vert foncé du logo — titres, en-tête, boutons */
  --foret-2:    #122318;   /* survol */
  --vert:       #3E694B;   /* vert moyen du logo — liens, accents */
  --vert-2:     #2E5139;
  --vert-clair: #8AA492;   /* filets et signes, jamais du texte */
  /* L'ocre est la seule autre couleur franche des deux pièces du cabinet : elle
     passe de simple filet à véritable seconde couleur (surtitres, chiffres, fonds). */
  --ocre:       #7E5F34;   /* accent chaud, apte au texte (4,8:1 au pire fond) */
  --ocre-clair: #C8AE85;   /* filets bois, jamais du texte */
  --ocre-pale:  #F2E7D4;   /* fond de section */
  --ocre-vif:   #E3C89B;   /* accent sur fond forêt */
  --encre:      #20281F;
  --encre-2:    #55604F;
  --filet:      #DED8C9;
  --filet-fort: #C2BCA9;
  --clair-1:    #CBD8CC;   /* texte clair sur fond forêt */
  --clair-2:    #A8BCAB;

  /* Faune est servie par le Cnap (voir build.py) ; Luciole est hébergée sur le
     site dès que polices.py a été lancé, sinon le texte retombe sur le système. */
  --titre: "Faune", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --texte: "Luciole", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --largeur: 76rem;
  --lecture: 40rem;       /* ~65 caractères : la mesure de lecture confortable */
  --gouttiere: 1.5rem;
  --r: 3px;
  --ombre: 0 1px 2px rgba(32,40,31,.05), 0 6px 20px rgba(32,40,31,.05);
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.06rem;
  line-height: 1.62;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--titre); font-weight: 400; color: var(--foret);
  line-height: 1.18; margin: 0 0 .5em; text-wrap: balance;
}
/* Titres plus affirmés, texte courant inchangé : l'écart entre les deux fait
   davantage pour la tenue d'une page que n'importe quelle bordure. */
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); font-weight: 400; letter-spacing: -.018em; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.14; }
h3 { font-size: 1.22rem; }
h4 { font-family: var(--texte); font-size: .98rem; font-weight: 600; color: var(--encre); margin: 0 0 .4em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--vert); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { color: var(--foret); }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: var(--r); }
strong { font-weight: 600; }
sup { font-size: .68em; }
::selection { background: var(--sauge); }

.lien-evitement { position: absolute; left: -9999px; background: var(--foret); color: var(--craie); padding: .7rem 1.1rem; z-index: 300; text-decoration: none; }
.lien-evitement:focus { left: .5rem; top: .5rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 3. Trames ----------------------------------------------------------- */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.mesure { max-width: var(--lecture); }
/* Les sections se séparent par le blanc et, de loin en loin, par un changement de
   fond — jamais par un trait. C'est le parti pris de tous les sites cités en
   référence (Apple, Claude, Doctolib) et ce qui distingue le plus nettement une
   page tenue d'une page empilée. */
.bande { padding-block: clamp(3.4rem, 8vw, 6.5rem); }
.bande--sauge { background: var(--sauge); }
.bande--papier2 { background: var(--papier-2); }
.bande--ocre { background: var(--ocre-pale); }

/* Une seule section du site s'inverse : fond vert profond, texte clair. Un site
   qui n'ose jamais un renversement se reconnaît de loin. */
.bande--foret { background: var(--foret); color: var(--clair-1); }
.bande--foret h2, .bande--foret h3 { color: var(--craie); }
.bande--foret .surtitre { color: var(--ocre-vif); }
.bande--foret .surtitre svg { color: var(--ocre-vif); }
.bande--foret a { color: var(--craie); text-decoration-color: rgba(255,254,251,.45); }
.bande--foret a:hover { text-decoration-color: var(--craie); }
.bande--foret .ressources { border-top-color: rgba(255,254,251,.28); }
.bande--foret .ressources > li { border-bottom-color: rgba(255,254,251,.18); }
.bande--foret .ressources p { color: var(--clair-1); }
.bande--foret .chapo, .bande--foret .texte-secondaire, .bande--foret .note { color: var(--clair-1); }
.bande--foret .btn--secondaire { color: var(--craie); border-color: rgba(255,254,251,.45); }
.bande--foret .btn--secondaire:hover { background: var(--craie); color: var(--foret); border-color: var(--craie); }
.bande--foret .btn--primaire { background: var(--ocre-vif); color: var(--foret); }
.bande--foret .btn--primaire:hover { background: var(--craie); color: var(--foret); }
.bande--serree { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.bande > .conteneur > h2:first-child,
.bande > .conteneur > .surtitre:first-child { margin-top: 0; }

/* --- 4. État d'ouverture et en-tête ------------------------------------- */
/* Plus de bandeau en haut de page : script.js insère l'état d'ouverture juste
   au-dessus de chaque tableau d'horaires, là où l'information est utile. */
.statut {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .92rem; font-weight: 600; color: var(--foret); margin: 0 0 .7rem;
}
.statut__point {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--vert-clair);
  flex: none; align-self: center;
}
.statut--ouvert .statut__point { background: #3E8A5C; box-shadow: 0 0 0 3px rgba(62,138,92,.18); }
.statut--ferme .statut__point { background: var(--ocre); }
.statut__detail { font-weight: 400; color: var(--encre-2); }
.pied .statut { color: var(--craie); }
.pied .statut__detail { color: var(--clair-1); }

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,243,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--foret); }
.marque img { width: 42px; height: 42px; flex: none; }
.marque__texte { display: block; line-height: 1.12; }
.marque__nom { display: block; font-family: var(--titre); font-size: 1.16rem; white-space: nowrap; }
.marque__role { display: block; font-size: .88rem; color: var(--encre-2); margin-top: .15rem; white-space: nowrap; }

.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: .85rem; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--encre-2); font-size: .86rem; white-space: nowrap; font-weight: 500; padding-block: .3rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--foret); border-bottom-color: var(--vert-clair); }
.nav a[aria-current="page"] { color: var(--foret); border-bottom-color: var(--vert); }

.entete__actions { display: flex; align-items: center; gap: .8rem; }
.entete__tel { display: none; font-size: .9rem; font-weight: 600; color: var(--foret); text-decoration: none; white-space: nowrap; }
.entete__tel:hover { text-decoration: underline; }
@media (min-width: 92rem) { .entete__tel { display: inline; } }
.entete .btn--rdv { display: none; }
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 40px; padding: 0 10px; flex: none;
  background: transparent; border: 1px solid var(--filet-fort); border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; height: 1.5px; background: var(--foret); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menu-mobile { border-top: 1px solid var(--filet); background: var(--papier); }
.menu-mobile ul { list-style: none; margin: 0; padding: .3rem 0 1rem; }
.menu-mobile li + li { border-top: 1px solid var(--filet); }
.menu-mobile a { display: block; padding: .78rem .1rem; text-decoration: none; color: var(--encre); font-weight: 500; }
.menu-mobile a[aria-current="page"] { color: var(--foret); font-weight: 600; }
.menu-mobile .groupe-btn { margin-top: 1rem; }

@media (min-width: 64rem) {
  .nav { display: block; }
  .burger { display: none; }
  .menu-mobile { display: none !important; }
  .entete .btn--rdv { display: inline-flex; }
  .marque img { width: 46px; height: 46px; }
}

/* --- 5. Barre d'actions mobile ------------------------------------------ */
.actions-mobile {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 99;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--filet-fort);
  box-shadow: 0 -6px 18px rgba(32,40,31,.1);
}
.actions-mobile a { display: flex; align-items: center; justify-content: center; padding: .85rem .5rem; font-size: .96rem; font-weight: 600; text-decoration: none; }
.actions-mobile .appel { background: var(--craie); color: var(--foret); }
.actions-mobile .rdv { background: var(--foret); color: var(--craie); }
body { padding-bottom: 3.5rem; }
@media (min-width: 64rem) { .actions-mobile { display: none; } body { padding-bottom: 0; } }

/* --- 6. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--texte); font-size: .95rem; font-weight: 600;
  padding: .74rem 1.3rem; border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--primaire { background: var(--foret); color: var(--craie); }
.btn--primaire:hover { background: var(--foret-2); color: var(--craie); }
.btn--secondaire { background: transparent; color: var(--foret); border-color: var(--filet-fort); }
.btn--secondaire:hover { background: var(--foret); color: var(--craie); border-color: var(--foret); }
.btn--vert { background: var(--vert); color: var(--craie); }
.btn--vert:hover { background: var(--vert-2); color: var(--craie); }
.btn--petit { padding: .5rem .95rem; font-size: .88rem; }
.btn--lien { background: transparent; border-color: transparent; color: var(--encre-2);
  text-decoration: underline; text-underline-offset: .25em;
  text-decoration-color: var(--filet-fort); padding-left: .4rem; padding-right: .4rem; }
.btn--lien:hover { background: transparent; color: var(--foret); text-decoration-color: currentColor; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- 7. Titres secondaires et feuille de fougère ------------------------ */
/* Le petit signe végétal reprend la fresque de la salle d'attente : c'est le
   seul ornement du site, et il vient du lieu. */
.surtitre {
  font-size: .95rem; font-weight: 600; color: var(--ocre); margin: 0 0 .5rem;
}
.chapo { font-size: 1.15rem; line-height: 1.56; color: var(--encre-2); }
.texte-secondaire { color: var(--encre-2); }
.petit { font-size: .9rem; }
.note { font-size: .88rem; color: var(--encre-2); }

/* --- 8. Accueil : hero -------------------------------------------------- */
.hero { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(2.4rem, 5vw, 3.6rem); }
.hero__grille { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56rem) { .hero__grille { grid-template-columns: 1.15fr .85fr; } }
.hero h1 em { font-style: normal; color: inherit; white-space: nowrap; }
.hero__chapo { font-size: 1.17rem; line-height: 1.55; color: var(--encre-2); max-width: 34rem; }
.hero .groupe-btn { margin-top: 1.6rem; }
.hero__mentions { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--filet); }

.portrait-cadre { position: relative; z-index: 0; }
.portrait-cadre img { border-radius: var(--r); box-shadow: var(--ombre); }
@media (max-width: 56rem) { .portrait-cadre img { max-height: 55vh; width: auto; margin-inline: auto; } }


/* Bande photo pleine largeur. En version « couverte », un voile dégradé permet
   de poser le texte dessus tout en gardant un contraste largement suffisant. */
.bande-photo { position: relative; margin: 0; }
.bande-photo img { width: 100%; height: clamp(15rem, 32vw, 25rem); object-fit: cover; }
.bande-photo figcaption { font-size: .84rem; color: var(--encre-2); padding-top: .6rem; }

.bande-photo--couverte { display: grid; }
.bande-photo--couverte > picture,
.bande-photo--couverte > .bande-photo__texte { grid-area: 1 / 1; }
.bande-photo--couverte img { height: clamp(22rem, 46vw, 34rem); }
.bande-photo--couverte::after {
  content: ""; grid-area: 1 / 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(28,52,35,.10) 0%, rgba(28,52,35,.42) 52%, rgba(28,52,35,.88) 100%);
}
.bande-photo__texte {
  position: relative; z-index: 1; align-self: end;
  width: 100%; max-width: var(--largeur); margin-inline: auto;
  padding: 0 var(--gouttiere) clamp(1.8rem, 4vw, 3rem);
  color: var(--craie);
}
.bande-photo__texte h2 { color: var(--craie); margin-bottom: .4rem; max-width: 20ch; }
.bande-photo__texte p { color: rgba(255,254,251,.92); max-width: 46ch; font-size: 1.06rem; }
.bande-photo__texte .surtitre { color: #C6DCCB; }
.bande-photo__texte .surtitre svg { color: #9EC0A8; }

/* --- 9. Fiche pratique : libellé / valeur ------------------------------- */
/* Libellé / valeur, séparés par l'espace et non par des filets. */
.fiche { margin: 0; display: grid; gap: 1.6rem; }
.fiche > div { display: grid; gap: .3rem 2rem; }
@media (min-width: 40rem) { .fiche > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: .3rem 2.5rem; } }
.fiche > div > dt { font-size: .98rem; font-weight: 600; color: var(--foret); }
.fiche > div > dd { margin: 0; max-width: 40rem; }
.fiche--large { gap: 2rem; }

/* --- 10. Horaires -------------------------------------------------------- */
.horaires { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; font-size: .97rem; }
.horaires dt { font-weight: 600; }
.horaires dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .45rem; font-variant-numeric: tabular-nums; color: var(--encre-2); }
.horaires dd span { white-space: nowrap; }
.horaires dd span:not(:last-child)::after { content: " ·"; color: var(--vert-clair); }
.horaires .ferme { font-style: italic; opacity: .7; }
.horaires dt.aujourdhui, .horaires dd.aujourdhui { color: var(--vert); }
.horaires dt.aujourdhui::after { content: "aujourd'hui"; display: block; font-weight: 400; font-size: .78em; }

/* --- 11. Prestations par catégorie (celles de la prise de RDV) ---------- */
.categories { display: grid; gap: 3.2rem; }
.categorie__entete { border-bottom: 1px solid var(--filet-fort); padding-bottom: .5rem; margin-bottom: 1rem; }
.categorie__entete h2, .categorie__entete h3 { margin-bottom: .15rem; }
.categorie__note { font-size: .93rem; color: var(--encre-2); margin: 0; }
.motifs { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.motifs > li { padding: 1.05rem 0; border-bottom: 1px solid var(--filet); }
.motifs h3, .motifs h4 { font-family: var(--titre); font-weight: 500; font-size: 1.1rem; color: var(--foret); margin-bottom: .2rem; }
.motifs p { color: var(--encre-2); font-size: .98rem; margin-bottom: 0; }
.motifs .doctolib-lien { font-size: .84rem; }
@media (min-width: 52rem) {
  .categories { grid-template-columns: 1fr 1fr; gap: 3.4rem 4rem; }
  .categorie--large { grid-column: 1 / -1; }
}

/* Aperçu compact en accueil */
.apercu { display: grid; gap: 1.6rem; }
@media (min-width: 46rem) { .apercu { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.8rem; } }
@media (min-width: 68rem) { .apercu { grid-template-columns: repeat(3, 1fr); gap: 2.4rem 3.5rem; } }
.apercu > div { border-top: 2px solid var(--vert-clair); padding-top: .9rem; }
.apercu h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.apercu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .95rem; color: var(--encre-2); }
.apercu li { padding-left: 1rem; position: relative; }
.apercu li::before { content: ""; position: absolute; left: 0; top: .68em; width: .5rem; height: 1px; background: var(--vert-clair); }

/* --- 12. Encarts --------------------------------------------------------- */
/* Un aparté se signale par un léger retrait et une clé de couleur, pas par un cadre. */
.encart { padding: .2rem 0 .2rem 1.3rem; border-left: 2px solid var(--vert-clair); font-size: .98rem; }
.encart strong { color: var(--foret); }
.encart--craie { border-left-color: var(--vert); }
.encart--source { border-left-color: var(--ocre-clair); font-size: .9rem; color: var(--encre-2); }
.encart h2, .encart h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.bande--sauge .encart { border-left-color: var(--vert); }

/* --- 13. Tableaux -------------------------------------------------------- */
.tableau-enveloppe { overflow-x: auto; max-width: 54rem; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 28rem; }
caption { text-align: left; padding: 0 0 .8rem; color: var(--encre-2); font-size: .88rem; }
th, td { text-align: left; padding: .8rem 1.2rem .8rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { font-size: .88rem; color: var(--ocre); font-weight: 600; border-bottom: 1px solid var(--filet-fort); }
tbody tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody th { font-weight: 600; }

/* --- 14. Avis ------------------------------------------------------------ */
.avis { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .avis { grid-template-columns: auto 1fr; gap: 3rem; align-items: center; } }
.avis__note { text-align: center; }
.avis__chiffre { display: block; font-family: var(--titre); font-size: 4.2rem; line-height: .95; color: var(--foret); }
.avis__sur { font-size: .85rem; color: var(--encre-2); }
.etoiles { display: flex; gap: .12rem; justify-content: center; margin: .4rem 0 .3rem; color: var(--ocre); }
.etoiles svg { width: 17px; height: 17px; }

/* --- 15. Plan ------------------------------------------------------------ */
.carte-geo { border: 1px solid var(--filet); background: var(--papier-2); border-radius: var(--r); overflow: hidden; }
.carte-geo iframe { display: block; width: 100%; height: 360px; border: 0; }
.carte-geo__attente { display: grid; gap: .8rem; justify-items: start; padding: 1.4rem; }
.carte-geo__attente p { font-size: .92rem; color: var(--encre-2); margin: 0; max-width: 46ch; }

/* --- 16. FAQ ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--filet-fort); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; position: relative; font-family: var(--titre); font-size: 1.14rem; color: var(--foret); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--texte); font-size: 1.4rem; color: var(--vert); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--vert); }
.faq__reponse { padding: 0 0 1.3rem; color: var(--encre-2); max-width: 60rem; }

/* --- 17. Outils ---------------------------------------------------------- */
.outil { background: var(--craie); border: 1px solid var(--filet); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2rem); }
.outil__entree { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 36rem) { .outil__entree { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; } }
/* La note d'aide sous le champ de date ne doit pas décaler la colonne voisine. */
.champ { align-content: start; }
.champ .aide { min-height: 0; }
.outil__resultat[hidden] { display: none; }
.champ { display: grid; gap: .3rem; }
.champ label { font-size: .9rem; font-weight: 600; }
.champ .aide { font-size: .83rem; color: var(--encre-2); font-weight: 400; }
.champ input, .champ select {
  font-family: var(--texte); font-size: 1rem; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: var(--r);
  padding: .65rem .8rem; width: 100%;
}
.resume-terme {
  display: grid; gap: .8rem; padding: 1.05rem 1.15rem; margin: 1.4rem 0 1.3rem;
  background: var(--foret); color: var(--craie); border-radius: var(--r);
}
@media (min-width: 36rem) { .resume-terme { grid-template-columns: 1fr 1fr; } }
.resume-terme dt { font-size: .88rem; color: var(--clair-2); margin-bottom: .15rem; }
.resume-terme dd { margin: 0; font-family: var(--titre); font-size: 1.4rem; line-height: 1.15; }
.jalons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-fort); }
.jalons li { display: grid; gap: .1rem .9rem; padding: .7rem 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 40rem) { .jalons li { grid-template-columns: 9.5rem 1fr; } }
.jalons .date { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vert); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 0 .35rem; }
.jalons .date span { white-space: nowrap; }
.jalons .quoi { font-size: .99rem; }
.jalons .quoi small { display: block; color: var(--encre-2); font-size: .86rem; }
.jalons li.passe .date, .jalons li.passe .quoi { color: var(--encre-2); }
.reste-a-charge { font-family: var(--titre); font-size: 2.2rem; color: var(--foret); line-height: 1.1; }

/* --- 18. Listes et ressources ------------------------------------------- */
.liste-puces { padding-left: 1.15rem; margin: 0 0 1.05em; }
.liste-puces li { margin-bottom: .4rem; }
.liste-puces li::marker { color: var(--vert-clair); }
.liste-nue { list-style: none; padding: 0; margin: 0 0 1.05em; display: grid; gap: .5rem; }
.liste-nue li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.liste-nue .oui { color: var(--vert); font-weight: 700; }
.liste-nue .non { color: var(--ocre); font-weight: 700; }
.ressources { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-fort); }
.ressources > li { padding: 1.1rem 0; border-bottom: 1px solid var(--filet); }
.ressources h3 { margin-bottom: .2rem; font-size: 1.06rem; }
.ressources p { font-size: .93rem; color: var(--encre-2); margin: 0; }
.ressources .domaine { font-size: .77rem; color: var(--vert-clair); letter-spacing: .04em; }

/* --- 19. Fil d'Ariane, sommaire, pied ----------------------------------- */
.ariane { font-size: .84rem; color: var(--encre-2); padding-top: 1.1rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.ariane li + li::before { content: "›"; margin-right: .4rem; color: var(--vert-clair); }
.ariane a { color: var(--encre-2); }
.sommaire { border-left: 2px solid var(--vert); padding-left: 1.1rem; margin-bottom: 2rem; }
.sommaire p { font-size: .88rem; color: var(--encre-2); font-weight: 600; margin-bottom: .5rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .96rem; }

.pied { background: var(--foret); color: var(--clair-1); margin-top: clamp(2.5rem, 6vw, 4rem); }
.pied a { color: var(--craie); text-decoration-color: rgba(255,254,251,.45); }
.pied a:hover { text-decoration-color: var(--craie); }
.pied__grille { display: grid; gap: 2rem; padding-block: clamp(2.4rem, 5vw, 3.4rem); }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem 3rem; } }
.pied h2 { color: var(--craie); font-family: var(--texte); font-size: 1rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .75rem; }
.pied__marque { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.pied__marque img { width: 48px; height: 48px; background: var(--craie); border-radius: 50%; }
.pied__nom { font-family: var(--titre); font-size: 1.25rem; color: var(--craie); line-height: 1.1; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.pied .horaires dt { color: var(--craie); }
.pied .horaires dd { color: var(--clair-1); }
.pied .horaires dt.aujourdhui, .pied .horaires dd.aujourdhui { color: #E3D0AE; }
.pied__urgence { font-size: .9rem; background: rgba(255,254,251,.08); border-radius: var(--r); padding: .8rem 1rem; margin-top: 1rem; }
.pied__bas { border-top: 1px solid rgba(255,254,251,.18); padding-block: 1.1rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; }

/* --- 20. Bandeau de consentement ---------------------------------------- */
.cookies {
  position: fixed; z-index: 150; inset-inline: 0; bottom: 3.5rem;
  background: var(--craie); border-top: 2px solid var(--foret);
  box-shadow: 0 -10px 28px rgba(32,40,31,.14); padding: .95rem var(--gouttiere);
}
@media (min-width: 64rem) {
  .cookies { inset-inline: auto 1.5rem; bottom: 1.5rem !important; max-width: 26rem; border: 1px solid var(--filet-fort); border-top: 2px solid var(--foret); border-radius: var(--r); }
}
.cookies[hidden] { display: none; }
.cookies h2 { font-size: 1.05rem; margin-bottom: .3rem; }
.cookies p { font-size: .86rem; line-height: 1.5; color: var(--encre-2); margin-bottom: .8rem; }
body.cookies-ouvert { padding-bottom: 15rem; }
@media (min-width: 64rem) { body.cookies-ouvert { padding-bottom: 0; } }

/* --- 21. Divers ---------------------------------------------------------- */
.a-completer { background: #FBF0CF; border: 1px dashed #B79324; color: #6B5206; padding: .05rem .35rem; border-radius: var(--r); font-size: .93em; font-weight: 600; }
.badge { font-size: .95rem; color: var(--encre-2); }
.badge--ok { color: var(--foret); font-weight: 600; }
.rangee-badges { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.rangee-badges .badge:not(:last-child)::after { content: "·"; margin-left: .6rem; color: var(--vert-clair); }
.duo { display: grid; gap: 1.6rem; }
@media (min-width: 46rem) { .duo { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } }
.duo--large { grid-template-columns: 1fr; }
@media (min-width: 54rem) { .duo--large { grid-template-columns: 1.2fr 1fr; gap: 2.6rem; } }
.contenu-legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.contenu-legal h3 { font-size: 1.05rem; margin-top: 1.3rem; }
.contenu-legal ul { padding-left: 1.15rem; }
.contenu-legal li { margin-bottom: .35rem; }

/* --- 22. Impression : la page devient une fiche à afficher -------------- */
@media print {
  .bandeau, .entete, .actions-mobile, .cookies, .menu-mobile, .carte-geo,
  .groupe-btn, .ariane, .sommaire, .bande-photo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .bande { padding-block: .6rem; border: 0; }
  .pied { background: #fff; color: #000; margin: 0; border-top: 1px solid #999; }
  .pied a, .pied h2, .pied__nom { color: #000; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel"]::after { content: ""; }
  .outil, .encart, .avis { border: 1px solid #999; box-shadow: none; }
  h1, h2, h3 { color: #000; }
  .jalons li, .fiche > div, .motifs > li { break-inside: avoid; }
}

/* --- 23. Adresse e-mail et citations d'avis ----------------------------- */
/* L'adresse est assemblée par script.js ; on la laisse se couper proprement
   sur un petit écran plutôt que de déborder. */
.courriel { word-break: break-word; }

/* Style prêt pour les avis recopiés à la main (voir le commentaire dans le HTML) */
.avis-cite {
  margin: 0; padding: 1.1rem 1.2rem;
  background: var(--craie); border: 1px solid var(--filet);
  border-left: 3px solid var(--vert-clair); border-radius: var(--r);
}
.avis-cite p { font-size: .99rem; color: var(--encre); margin-bottom: .6rem; }
.avis-cite__etoiles { color: var(--ocre); letter-spacing: .12em; font-size: .95rem; margin-bottom: .5rem; }
.avis-cite cite { font-style: normal; font-size: .85rem; color: var(--encre-2); }
.avis-liste { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 48rem) { .avis-liste { grid-template-columns: 1fr 1fr; } }

/* --- 24. Préparer sa venue ---------------------------------------------- */
/* Situation → motif : deux colonnes, séparées par un filet fin, comme un
   tableau de correspondance qu'on parcourt du regard. */
.orientation { margin: 0; border-top: 1px solid var(--filet-fort); }
.orientation > div {
  display: grid; gap: .25rem 2.5rem; padding: .95rem 0;
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 48rem) { .orientation > div { grid-template-columns: 1fr 1fr; } }
.orientation dt { color: var(--encre); }
.orientation dd { margin: 0; color: var(--encre-2); font-size: .98rem; }
.orientation dd strong { color: var(--foret); font-weight: 600; }

.apporter { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .apporter { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }
@media (min-width: 70rem) { .apporter { grid-template-columns: repeat(3, 1fr); } }
.apporter__groupe { border-top: 2px solid var(--ocre-clair); padding-top: .9rem; }
.apporter__groupe h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.apporter__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .97rem; }
.apporter__liste li { color: var(--encre-2); }
/* De vraies cases : on prépare son sac en cochant, et le navigateur s'en
   souvient d'une visite à l'autre. Sans JavaScript, elles restent cochables
   pour la visite en cours, et s'impriment vides comme un pense-bête. */
.coche { display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; cursor: pointer; }
.coche input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: .95rem; height: .95rem; margin: .28em 0 0; border-radius: 3px;
  border: 1px solid var(--ocre-clair); background: var(--craie);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.coche input::before {
  content: ""; width: .5rem; height: .5rem; transform: scale(0);
  transition: transform .12s ease-out; background: var(--craie);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 18%, 86% 4%, 38% 72%);
}
.coche input:checked { background: var(--vert); border-color: var(--vert); }
.coche input:checked::before { transform: scale(1); }
.coche input:focus-visible { outline: 2px solid var(--foret); outline-offset: 2px; }
.coche:hover input:not(:checked) { border-color: var(--vert); }
.coche input:checked + span { color: var(--encre-2); opacity: .55;
  text-decoration: line-through; text-decoration-color: var(--ocre-clair); }
.apporter__liste strong { color: var(--encre); }

@media print {
  .coche input { appearance: auto; -webkit-appearance: none; }
  .coche input:checked + span { opacity: 1; text-decoration: none; }
  [data-coche-vider] { display: none; }
}

/* --- 25. Congé maternité (calendrier) ----------------------------------- */
.conge {
  background: var(--ocre-pale); border-radius: var(--r);
  padding: 1.2rem 1.35rem; margin-bottom: 1.6rem;
}
.conge[hidden] { display: none; }
/* Niveau h2 pour respecter la hiérarchie de la page, mais à la taille d'un h3 :
   c'est un encart dans un outil, pas une section. */
.conge h2 { margin-bottom: .9rem; font-size: 1.15rem; }
.conge__dates { margin: 0 0 .9rem; display: grid; gap: .8rem 2rem; }
@media (min-width: 40rem) { .conge__dates { grid-template-columns: 1fr 1fr; } }
.conge__dates dt { font-size: .88rem; color: var(--ocre); font-weight: 600; }
.conge__dates dd { margin: .15rem 0 0; font-family: var(--titre); font-size: 1.12rem; color: var(--foret); }
.conge .note { margin: 0; }

/* --- 26. Orienteur : quel rendez-vous prendre --------------------------- */
.orienteur { margin-bottom: 1.8rem; }
.orienteur__question { font-family: var(--titre); font-size: 1.3rem; color: var(--foret); margin-bottom: 1.1rem; }
.orienteur__choix { display: grid; gap: .6rem; }
@media (min-width: 46rem) { .orienteur__choix { grid-template-columns: 1fr 1fr; } }
.orienteur__bouton {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--texte); font-size: 1rem; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: var(--r);
  padding: .85rem 1rem; transition: background-color .15s, border-color .15s;
}
.orienteur__bouton:hover { background: var(--sauge); border-color: var(--vert-clair); }
.orienteur__bouton span { display: block; font-weight: 500; }
.orienteur__bouton small { display: block; margin-top: .15rem; font-size: .86rem; color: var(--encre-2); }
.orienteur__motif {
  font-family: var(--titre); font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--foret);
  line-height: 1.15; margin-bottom: .5rem;
}
.orienteur__precision { color: var(--encre-2); max-width: 52ch; }
.orienteur__precision[hidden], .orienteur [hidden] { display: none; }
.orienteur__apporter .apporter { gap: 1.4rem 2.5rem; }
.orienteur__apporter .apporter__groupe { border-top-width: 1px; }

/* Le tableau complet, replié sous le questionnaire */
.tout-voir { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.tout-voir > summary {
  cursor: pointer; list-style: none; padding: .95rem 1.8rem .95rem 0; position: relative;
  font-weight: 600; color: var(--vert); font-size: .96rem;
}
.tout-voir > summary::-webkit-details-marker { display: none; }
.tout-voir > summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; color: var(--ocre); line-height: 1;
}
.tout-voir[open] > summary::after { content: "–"; }
.tout-voir[open] > summary { border-bottom: 1px solid var(--filet); margin-bottom: .5rem; }
.orientation__fam dt {
  font-size: .88rem;
  color: var(--ocre); font-weight: 600; padding-top: 1rem;
}
.orientation__fam { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* --- 27. Garde-fous étroits ----------------------------------------------- */
/* Sur un écran de 360 px, un libellé de bouton un peu long dépassait de
   quelques pixels et faisait glisser toute la page horizontalement. */
@media (max-width: 28rem) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* --- 23. Finition « sites de référence » (écran seulement) ---------------
   Principes relevés sur des sites dessinés à la main (Apple, Stripe, bons
   sites de santé) : peu de traits et de cadres, des surfaces douces aux coins
   francs mais arrondis, des boutons en gélule, de l'air plutôt que des filets.
   Les listes longues (horaires, FAQ, ressources, tableaux) gardent un filet fin,
   comme les réglages d'un téléphone. */
@media screen {
  :root { --r: 14px; --surface: #FFFFFF; --ombre-douce: 0 1px 2px rgba(32,40,31,.04), 0 8px 28px rgba(32,40,31,.06); }

  .btn { border-radius: 999px; padding-inline: 1.35rem; }
  .btn--petit { border-radius: 999px; }
  .menu-bouton, .champ input, .champ select { border-radius: 10px; }

  .entete { background: rgba(250,248,243,.78); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }

  /* Surfaces : plus de bordures, un fond et une ombre très légère */
  .outil, .carte-geo, .orienteur__bouton, .avis-cite {
    border: 0; background: var(--surface); box-shadow: var(--ombre-douce);
  }
  .orienteur__bouton { border-radius: 12px; }
  .orienteur__bouton:hover { background: var(--sauge); box-shadow: none; }
  .avis-cite { border-left: 0; }

  /* Encarts et sommaire : un aplat doux au lieu du trait vertical */
  .encart, .sommaire {
    border-left: 0; background: var(--papier-2); border-radius: var(--r);
    padding: 1.1rem 1.35rem;
  }
  .bande--sauge .encart, .bande--papier2 .encart, .bande--ocre .encart { background: rgba(255,255,255,.62); }
  .encart--craie { background: var(--surface); box-shadow: var(--ombre-douce); }

  /* Moins de filets : les titres de catégorie et les motifs respirent */
  .hero__mentions { border-top: 0; padding-top: 0; }
  .categorie__entete { border-bottom: 0; padding-bottom: 0; margin-bottom: .6rem; }
  .motifs > li { border-bottom: 0; padding: .75rem 0; }
  .faq, .jalons, .ressources, .orientation { border-top-color: var(--filet); }
  thead th { border-bottom-color: var(--filet); }

  /* Titres un peu plus serrés, comme sur les grands sites */
  h1 { letter-spacing: -.025em; }
  h2 { letter-spacing: -.018em; }

  /* Photos : coins arrondis cohérents */
  .portrait-cadre img, .carte-geo { border-radius: var(--r); }
}
@media screen {
  /* Choix à l'intérieur d'une surface blanche : aplat, pas d'ombre en cascade */
  .outil .orienteur__bouton { background: var(--papier-2); box-shadow: none; }
  .outil .orienteur__bouton:hover { background: var(--sauge); }
}
@media screen {
  .apporter__groupe { border-top: 0; padding: 1.1rem 1.2rem 1.2rem; background: rgba(255,255,255,.62); border-radius: var(--r); }
}

/* --- 28. « Carnet de sage-femme » (22/09) ----------------------------------
   Parti pris : le site ressemble au cabinet, pas à un modèle. Le feuillage à
   l'aquarelle de la salle d'attente (photo du mur, délavée : images/feuillage.webp)
   revient derrière le portrait et au pied des pages ; le fond est un papier au
   grain à peine visible ; les cadres et les ombres cèdent la place à des filets
   couleur chêne, comme les lignes d'un carnet. Coins presque droits, boutons
   rectangulaires : une seule grammaire, tenue partout. Écran seulement. */
@media screen {
  :root {
    --r: 4px;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }

  /* Papier et texte */
  body { background: var(--grain), var(--papier); font-size: .98rem; line-height: 1.62; }
  h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); letter-spacing: -.02em; line-height: 1.04; }
  h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.015em; }
  h3 { font-size: 1.12rem; }
  .chapo, .hero__chapo { font-size: 1.06rem; }
  .bande--sauge { background: var(--grain), var(--sauge); }
  .bande--papier2 { background: var(--grain), var(--papier-2); }
  .bande--ocre { background: var(--grain), var(--ocre-pale); }

  /* Un titre de section se signale par un petit trait de chêne, comme au crayon */
  .bande > .conteneur > h2::before, .bande > .conteneur > .duo h2::before {
    content: ""; display: block; width: 2.6rem; height: 2px; margin-bottom: .9rem;
    background: var(--ocre-clair); border-radius: 2px;
  }
  .surtitre { font-weight: 500; letter-spacing: 0; }

  /* En-tête simple : papier plein et un filet, rien qui flotte */
  .entete { background: rgba(250, 248, 243, .97); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--filet); box-shadow: none; }

  /* Boutons : rectangles aux coins doux, pas de gélules */
  .btn, .btn--petit { border-radius: 6px; padding-inline: 1.15rem; box-shadow: none; }
  .btn--secondaire { background: transparent; border: 1px solid var(--ocre-clair); color: var(--foret); }
  .btn--secondaire:hover { background: var(--ocre-pale); border-color: var(--ocre); }

  /* Plus d'ombres ni de cartes flottantes : des filets fins */
  .outil, .carte-geo, .avis-cite, .apporter__groupe, .encart, .sommaire, .conge, .encart--craie,
  .bande--sauge .encart, .bande--papier2 .encart, .bande--ocre .encart {
    background: rgba(255, 254, 251, .6); border: 1px solid var(--filet); box-shadow: none;
    border-radius: var(--r);
  }
  .orienteur__bouton, .outil .orienteur__bouton { border-radius: var(--r); box-shadow: none;
    background: transparent; border: 1px solid var(--filet); }
  .orienteur__bouton:hover, .outil .orienteur__bouton:hover { background: var(--sauge); }
  .portrait-cadre img, .carte-geo { border-radius: 2px; box-shadow: none; }

  /* Fiche pratique : une page de carnet lignée, marge rouge comprise… en chêne */
  .fiche { border-top: 1px solid var(--ocre-clair); }
  .fiche > div { border-bottom: 1px dashed var(--filet-fort); padding-block: .85rem; }

  /* Le feuillage de la salle d'attente derrière le portrait, qui déborde du cadre */
  .hero__grille { position: relative; }
  .portrait-cadre { position: relative; isolation: isolate; }
  .portrait-cadre::before {
    content: ""; position: absolute; z-index: -1; inset: -12% -18% -10% -22%;
    background: url("images/feuillage.webp") center / cover no-repeat;
    mix-blend-mode: multiply; opacity: .9;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    pointer-events: none;
  }

  /* Et au pied de chaque page, comme une frise */
  .pied { position: relative; isolation: isolate; }
  .pied::before {
    content: ""; position: absolute; z-index: -1; right: 0; top: -16rem; width: min(34rem, 60vw); height: 16rem;
    background: url("images/feuillage.webp") right bottom / cover no-repeat;
    mix-blend-mode: multiply; opacity: .6;
    -webkit-mask-image: linear-gradient(to top, #000 20%, transparent), linear-gradient(to left, #000 45%, transparent);
            mask-image: linear-gradient(to top, #000 20%, transparent), linear-gradient(to left, #000 45%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    pointer-events: none;
  }
}

/* Accueil sur grand écran : la fiche pratique en deux colonnes de carnet,
   le titre dans la marge et le contenu à droite (navigateurs récents). */
@media screen and (min-width: 60rem) {
  .bande > .conteneur:has(> .fiche) { display: grid; grid-template-columns: 15rem 1fr; gap: 0 3rem; align-items: start; }
  .bande > .conteneur:has(> .fiche) > h2 { position: sticky; top: 6rem; }
  .bande > .conteneur:has(> .fiche) > :not(h2):not(.fiche) { grid-column: 1 / -1; }
}

/* --- 29. Téléphone : un premier écran clair ----------------------------------
   Avant : un bloc de texte, puis des boutons de largeurs différentes, puis une ligne
   de mentions qui se coupait n'importe où, et le portrait tout en bas. Désormais :
   le nom, le visage, deux phrases, deux boutons pleine largeur, les mentions en
   petite grille. Les horaires ne se coupent plus au milieu d'une journée. */
@media screen and (max-width: 55.99rem) {
  .hero { padding-block: 1.4rem 2.2rem; }
  .hero__grille { gap: 1rem; }
  .hero__grille > div:first-child { display: contents; }
  .hero__grille > div:first-child > .surtitre { order: 1; margin-bottom: 0; }
  .hero__grille > div:first-child > h1 { order: 2; margin-bottom: .2rem; }
  .hero__grille > .portrait-cadre { order: 3; }
  .hero__grille > div:first-child > .hero__chapo { order: 4; margin: .2rem 0 0; }
  .hero__grille > div:first-child > .groupe-btn { order: 5; }
  .hero__grille > div:first-child > .hero__mentions { order: 6; }
  .portrait-cadre img { width: 100%; max-height: 17rem; object-fit: cover; object-position: 50% 22%; }
  .groupe-btn { display: grid; gap: .6rem; margin-top: .4rem; }
  .groupe-btn .btn { width: 100%; justify-content: center; }
  .hero__mentions.rangee-badges { display: grid; grid-template-columns: repeat(2, max-content); gap: .3rem 1.1rem; margin-top: .6rem; }
  .hero__mentions .badge { white-space: nowrap; }
  .hero__mentions .badge::after { content: none !important; }
  .hero__mentions .badge--ok { grid-column: 1 / -1; }
  .hero__mentions .badge { font-size: .9rem; }
  .horaires dd { flex-direction: column; gap: 0; }
  .horaires dd span:not(:last-child)::after { content: none; }
  .fiche > div { padding-block: .75rem; }
}
/* Pied de page : colonne étroite, les deux plages d'une journée l'une sous l'autre */
@media screen {
  .pied .horaires dd { flex-direction: column; gap: 0; }
  .pied .horaires dd span:not(:last-child)::after { content: none; }
}

/* --- 30. Barre de verre et survols (22/09, demande de Paul) ------------------
   La barre du haut redevient une plaque de verre ; sur grand écran, une gélule
   qui flotte au-dessus de la page. Le reste du site garde le style « Carnet ». */
@media screen {
  :root {
    --verre: rgba(255, 255, 255, .55);
    --verre-arete: rgba(255, 255, 255, .8);
    --verre-flou: blur(22px) saturate(1.7);
    --verre-ombre:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(32, 40, 31, .05),
      0 1px 2px rgba(32, 40, 31, .05),
      0 12px 32px rgba(32, 40, 31, .10);
  }
  .entete {
    background: var(--verre); border-bottom: 1px solid var(--verre-arete);
    backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou);
    box-shadow: inset 0 -1px 0 rgba(32, 40, 31, .04);
  }
  @media (min-width: 60rem) {
    .entete {
      background: transparent; border-bottom: 0; box-shadow: none;
      backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: .7rem;
    }
    .entete__inner {
      background: var(--verre); border: 1px solid var(--verre-arete); border-radius: 999px;
      backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou);
      box-shadow: var(--verre-ombre); padding: .45rem .5rem .45rem 1rem;
    }
    .entete .btn { border-radius: 999px; }
  }

  /* Survols : le bouton se soulève à peine, l'ombre s'étire ; au clic, il se pose */
  .btn {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
                border-color .18s ease, color .18s ease;
    will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); transition-duration: .06s; }
  .btn--primaire:hover { background: var(--foret-2); box-shadow: 0 8px 20px rgba(28, 52, 35, .25); }
  .btn--secondaire:hover { box-shadow: 0 6px 16px rgba(126, 95, 52, .16); }
  .btn:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

  /* Menu : un trait qui se dessine de gauche à droite sous le lien survolé */
  .nav a { border-bottom: 0; background: linear-gradient(var(--vert), var(--vert)) left bottom / 0 2px no-repeat;
    transition: background-size .25s ease, color .15s ease; }
  .nav a:hover { background-size: 100% 2px; color: var(--foret); }
  .nav a[aria-current="page"] { background-size: 100% 2px; }

  /* Liens du texte : le soulignement s'épaissit doucement */
  main a:not(.btn) { transition: text-decoration-thickness .15s ease, color .15s ease; }
  main a:not(.btn):hover { text-decoration-thickness: 2px; }

  /* Choix de l'orienteur : même légère élévation que les boutons */
  .orienteur__bouton { transition: transform .18s ease, background-color .18s ease; }
  .orienteur__bouton:hover { transform: translateY(-1px); }
}

/* --- 31. Corrections du 22/09 (retours de Paul) ------------------------------
   · le feuillage derrière le portrait faisait déborder la page sur le côté
   · bouton secondaire illisible au survol (texte clair sur fond clair)
   · titre en marge de la page Contact qui chevauchait l'encart suivant
   · trop de gras : les polices n'ont que deux graisses, tout « 600 » devenait
     un gras franc. L'accent passe par la couleur, plus par l'épaisseur. */
@media screen {
  html, body { overflow-x: clip; }

  .btn--secondaire:hover { color: var(--foret); }
  .bande--foret .btn--secondaire:hover { color: var(--foret); }

  .bande > .conteneur:has(> .fiche) > h2 { position: static; font-size: clamp(1.45rem, 2.2vw, 1.85rem); }

  strong, b { font-weight: 400; color: var(--foret); }
  .bande--foret strong, .bande--foret b, .pied strong, .pied b, .bande-photo strong { color: inherit; }
  .btn, .btn--petit, .actions-mobile a, .badge--ok, .nav a, .surtitre, label, legend,
  dt, th, h4, .fiche > div > dt, .horaires dt, .categorie__note, .orientation dd strong,
  .apporter__liste strong, .etat, .etat strong { font-weight: 400; }
  .btn { font-size: .95rem; letter-spacing: .005em; }
  .fiche > div > dt, .horaires dt { color: var(--foret); }
  h4 { font-family: var(--titre); font-size: 1.06rem; color: var(--foret); }
  .pied h2, .pied h3, .pied h4 { font-weight: 400; font-family: var(--titre); }
}
/* Préparer : quand l'orienteur affiche son résultat (avec ses propres boutons),
   les boutons de secours du bas de section feraient doublon : on les masque. */
.conteneur:has([data-orient-etape="3"]:not([hidden])) > .groupe-btn { display: none; }
/* Le feuillage derrière un portrait ne doit jamais passer sous le texte voisin
   (il pâlissait la fin des lignes, page Cabinet) : il déborde surtout vers l'extérieur. */
@media screen {
  .portrait-cadre::before { inset: -10% -16% -8% -6%; }
  .hero__grille > div:first-child, .duo > div:not(.portrait-cadre) { position: relative; z-index: 1; }
}
/* Suite : état d'ouverture et « fermé » sans gras ; titres de la page Ressources
   aérés, avec le trait « au crayon », au lieu d'être pris entre deux filets. */
@media screen {
  .statut, .statut strong, .horaires .ferme { font-weight: 400; }
  .conteneur > section[id] + section[id] { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
  .conteneur > section[id] > h2::before {
    content: ""; display: block; width: 2.6rem; height: 2px; margin-bottom: .9rem;
    background: var(--ocre-clair); border-radius: 2px;
  }
  .conteneur > section[id] > h2 + .ressources { border-top: 0; }
}

/* --- 32. Accueil : les grandes spécialités (22/09) ---------------------------
   Repris des sites de consœurs, qui mettent leurs spécialités dès l'accueil, mais
   au style du site : pas de cartes à ombre, un simple filet de chêne et un titre
   qui verdit au survol. */
.specialites { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 46rem) { .specialites { grid-template-columns: 1fr 1fr; gap: 0 3rem; } }
.specialites li { border-top: 1px solid var(--filet); }
.specialites a { display: block; padding: 1.05rem 0; text-decoration: none; color: inherit; }
.specialites span { display: block; font-family: var(--titre); font-size: 1.16rem; color: var(--foret); }
.specialites em { display: block; font-style: normal; color: var(--encre-2); font-size: .95rem; margin-top: .15rem; }
@media screen {
  .specialites a { transition: padding-left .18s ease; }
  .specialites a:hover { padding-left: .5rem; }
  .specialites a:hover span { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; }
}

/* --- 33. Contrastes (audit du 22/09) ------------------------------------------
   Le vert pâle (--vert-clair, 2,5:1) est réservé aux filets : il servait aussi au
   petit texte des adresses de sites (Ressources). « fermé » perdait du contraste
   par transparence. Les deux passent au gris-vert de texte (6,2:1). */
.ressources .domaine { color: var(--encre-2); }
.horaires .ferme { opacity: 1; color: var(--encre-2); }
.pied .horaires .ferme { color: var(--clair-2); }

/* --- 34. Mise en scène (28/09, « encore plus beau ») ---------------------------
   Toujours le carnet, mais qui prend vie : le portrait s'ouvre en arche comme la
   fenêtre du cabinet, le mot « sage-femme » se souligne d'un trait de crayon, le
   feuillage respire derrière le visage, les sections apparaissent en douceur au
   fil de la lecture, la photo du cabinet glisse plus lentement que la page et ses
   bords ondulent comme une page d'aquarelle. Les spécialités se numérotent à la
   plume et se teintent d'un lavis au survol.
   Tout est décoratif : sans animation (réglage « réduire les animations » ou
   vieux navigateur), la page reste exactement lisible et complète. */
@media screen {
  /* Portrait en arche */
  .portrait-cadre img { border-radius: 999px 999px 4px 4px / 46% 46% 4px 4px; object-position: 50% 30%; }

  /* Un trait de crayon sous « sage-femme » */
  .hero h1 { position: relative; isolation: isolate; }
  .hero h1 em { position: relative; color: var(--foret); }
  .hero h1 em::after {
    content: ""; position: absolute; left: -2%; right: -3%; bottom: -.12em; height: .32em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 5, 120 16, 180 9 S 270 6, 297 11' fill='none' stroke='%23C8AE85' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    z-index: -1; pointer-events: none;
  }

  /* Les spécialités numérotées à la plume, et un lavis de sauge au survol */
  .specialites { counter-reset: spe; }
  .specialites li { counter-increment: spe; }
  .specialites a {
    display: grid; grid-template-columns: 3.2rem 1fr; column-gap: .4rem; align-items: baseline;
    background: linear-gradient(90deg, var(--sauge), rgba(231,237,230,0)) no-repeat 0 0 / 0% 100%;
    transition: background-size .45s ease, padding-left .18s ease;
  }
  .specialites a::before {
    content: counter(spe, decimal-leading-zero); grid-row: 1 / span 2;
    font-family: var(--titre); font-size: 1.9rem; line-height: 1; color: var(--ocre-clair);
    transition: color .3s ease;
  }
  .specialites span, .specialites em { grid-column: 2; }
  .specialites a:hover { background-size: 100% 100%; padding-left: .5rem; }
  .specialites a:hover::before { color: var(--ocre); }

  /* La photo du cabinet : bords ondulés, comme une feuille d'aquarelle */
  .bande-photo--couverte {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 160 0, 330 40, 500 18 S 840 2, 1000 24 L1000 978 C 830 1000, 660 962, 500 982 S 170 1000, 0 976 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 160 0, 330 40, 500 18 S 840 2, 1000 24 L1000 978 C 830 1000, 660 962, 500 982 S 170 1000, 0 976 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    overflow: hidden;
  }
  /* L'image qui glisse passe au-dessus du voile vert si on ne les empile pas */
  .bande-photo--couverte::after { position: relative; z-index: 1; }
  .bande-photo--couverte > .bande-photo__texte { z-index: 2; }
}

/* Le mouvement, seulement pour qui ne l'a pas désactivé */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes monter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes arche { from { clip-path: inset(100% 0 0 0); transform: scale(1.04); } to { clip-path: inset(0 0 0 0); transform: none; } }
  @keyframes crayon { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes respirer { from { transform: rotate(-1.2deg) scale(1); } to { transform: rotate(1.4deg) scale(1.035); } }

  /* Arrivée sur l'accueil : le texte monte, le portrait s'ouvre, le trait se dessine */
  .hero__grille > div:first-child > * { animation: monter .8s cubic-bezier(.2,.7,.2,1) both; }
  .hero__grille > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .hero__grille > div:first-child > :nth-child(3) { animation-delay: .18s; }
  .hero__grille > div:first-child > :nth-child(4) { animation-delay: .28s; }
  .hero__grille > div:first-child > :nth-child(5) { animation-delay: .38s; }
  .portrait-cadre img { animation: arche 1.2s cubic-bezier(.2,.7,.2,1) .15s both; }
  .hero h1 em::after { animation: crayon .9s ease-out .9s both; }
  .portrait-cadre::before { animation: respirer 9s ease-in-out infinite alternate; transform-origin: 60% 70%; }

  /* Au fil du défilement (navigateurs qui savent lier une animation au défilement) */
  @supports (animation-timeline: view()) {
    @keyframes apparaitre { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    @keyframes glisser { from { transform: translateY(-7%) scale(1.12); } to { transform: translateY(7%) scale(1.12); } }
    @keyframes trait { from { width: 0; } to { width: 2.6rem; } }
    /* Plage en pixels, pas en pourcentage : un long bloc de texte (liste des motifs,
       FAQ…) restait à moitié transparent pendant qu'on le lisait, car 22 % de son
       parcours représentait presque un écran entier. Là, tout est net 160 px après
       l'entrée dans l'écran, quelle que soit la hauteur du bloc. */
    main .bande:not(.hero):not(.manifeste) > .conteneur > * {
      animation: apparaitre linear both; animation-timeline: view(); animation-range: entry 0px entry 160px;
    }
    .bande > .conteneur > h2::before {
      animation: trait linear both; animation-timeline: view(); animation-range: entry 20px entry 180px;
    }
    .bande-photo--couverte img {
      animation: glisser linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    .specialites li { animation: apparaitre linear both; animation-timeline: view(); animation-range: entry 0px entry 140px; }
  }
}

/* --- 35. Mouvements « façon Apple » (28/09) --------------------------------------
   Trois gestes empruntés aux grandes pages produit, gardés sobres : le titre sort
   du flou, la photo du cabinet s'élargit jusqu'aux bords à mesure qu'on descend, et
   une phrase en grands caractères se remplit d'encre ligne après ligne pendant
   qu'on la lit. Sans prise en charge ou avec « réduire les animations », la phrase
   est simplement écrite en vert forêt. */
.manifeste { padding-block: clamp(3.5rem, 11vw, 8rem); }
.manifeste__texte {
  font-family: var(--titre); font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.16;
  letter-spacing: -.015em; color: var(--foret); max-width: 24ch; margin: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes net { from { opacity: 0; filter: blur(14px); transform: translateY(12px); }
                   to   { opacity: 1; filter: blur(0); transform: none; } }
  .hero h1 { animation: net 1.1s cubic-bezier(.2,.7,.2,1) both; }

  @supports (animation-timeline: view()) {
    @keyframes elargir { from { clip-path: inset(0 7% round 28px); } to { clip-path: inset(0 0 round 0); } }
    .bande-photo--couverte { animation: elargir linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }

    @keyframes encre { from { background-position: 0 100%; } to { background-position: 0 0; } }
    .manifeste__texte {
      background: linear-gradient(to bottom, var(--foret) 50%, var(--filet-fort) 50%) 0 100% / 100% 200% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: encre linear both; animation-timeline: view(); animation-range: cover 20% cover 60%;
    }
  }
}

/* --- 36. Accueil : « En pratique » en deux colonnes (BEAU4, 28/09) ---------------
   Sur grand écran, la fiche de l'accueil faisait près de deux écrans de haut. Elle
   passe en deux colonnes, chaque libellé au-dessus de sa valeur comme une étiquette
   de carnet. L'état d'ouverture devient une pastille qui bat doucement. */
@media screen and (min-width: 72rem) {
  .fiche--accueil { grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: stretch; }
  .fiche--accueil > div { grid-template-columns: 1fr; gap: .35rem; align-content: start; }
  .fiche--accueil > div > dt { font-family: var(--titre); font-size: 1.12rem; font-weight: 400; color: var(--ocre); }
}
@media screen {
  .statut { padding: .3rem .75rem .3rem .6rem; border-radius: 999px; background: rgba(255,254,251,.75);
    border: 1px solid var(--filet); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes battre { 0%, 100% { box-shadow: 0 0 0 3px rgba(62,138,92,.18); }
                      50% { box-shadow: 0 0 0 7px rgba(62,138,92,0); } }
  .statut--ouvert .statut__point { animation: battre 2.4s ease-in-out infinite; }
}

/* --- 37. Effets, deuxième passe (28/09 soir) --------------------------------------
   - D'une page à l'autre : fondu doux, la nouvelle page monte légèrement, l'en-tête
     et la barre d'actions du téléphone restent immobiles (comme une application).
   - Le titre de chaque page sort du flou, comme celui de l'accueil.
   - Les photos des autres pages se dévoilent de bas en haut au défilement.
   - Les réponses de la FAQ s'ouvrent en glissant.
   - Un reflet discret traverse le bouton principal au survol.
   Même règle qu'avant : rien de tout ça sans « réduire les animations » désactivé,
   et les navigateurs qui ne savent pas faire affichent simplement la page. */
@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .entete { view-transition-name: entete; }
  .actions-mobile { view-transition-name: actions-mobile; }
  @keyframes vt-sortie { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-entree { from { opacity: 0; transform: translateY(14px); } }
  ::view-transition-old(root) { animation: vt-sortie .22s ease-in both; }
  ::view-transition-new(root) { animation: vt-entree .45s cubic-bezier(.2,.7,.2,1) both; }

  @keyframes net2 { from { opacity: 0; filter: blur(12px); transform: translateY(10px); }
                    to   { opacity: 1; filter: blur(0); transform: none; } }
  main h1 { animation: net2 1s cubic-bezier(.2,.7,.2,1) both; }

  @supports (animation-timeline: view()) {
    @keyframes devoiler { from { clip-path: inset(22% 0 0 0); transform: scale(1.06); }
                          to   { clip-path: inset(0 0 0 0); transform: none; } }
    main .bande:not(.hero) picture img,
    main .bande-photo:not(.bande-photo--couverte) img {
      animation: devoiler linear both; animation-timeline: view(); animation-range: entry 0px entry 280px;
    }
  }

  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      height: 0; overflow: clip;
      transition: height .38s cubic-bezier(.2,.7,.2,1), content-visibility .38s allow-discrete;
    }
    .faq details[open]::details-content { height: auto; }
  }

  .btn--primaire { position: relative; overflow: hidden; isolation: isolate; }
  .btn--primaire::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.2) 50%, transparent 68%);
    transform: translateX(-130%); transition: transform .7s ease;
  }
  .btn--primaire:hover::after, .btn--primaire:focus-visible::after { transform: translateX(130%); }
}

/* --- 38. Correctif : fiche sans titre de section (page 404) -----------------------
   La mise en page « titre dans la marge + fiche à droite » (section 28) s'appliquait
   aussi quand la fiche n'a pas de titre : sur la page 404, elle tombait dans la
   colonne étroite de 15rem et les numéros se coupaient à chaque mot. */
@media screen and (min-width: 60rem) {
  .bande > .conteneur:has(> .fiche):not(:has(> h2)) { display: block; }
}

/* --- 39. Feuillage au trait (28/09) ------------------------------------------------
   Comme la silhouette tracée des grands sites de santé, mais à la main du cabinet :
   deux branches au crayon chêne, dessinées d'après les longues feuilles de la
   fresque. Sur l'accueil, elles se tracent d'elles-mêmes à l'arrivée ; à côté de la
   grande phrase, elles poussent au rythme du défilement. Décor pur (aria-hidden),
   jamais sous le texte sur téléphone, et dessinées d'emblée si les animations sont
   coupées. */
.feuillage-trait { display: none; }
@media screen {
  .feuillage-trait { display: block; position: absolute; pointer-events: none; z-index: -1;
    stroke: var(--ocre-clair); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .feuillage-trait path { vector-effect: non-scaling-stroke; }
  .feuillage-trait .trace--nervure { stroke-width: .9; opacity: .8; }
  .hero, .manifeste { position: relative; isolation: isolate; }
  .feuillage-trait--hero { display: none; }
  .feuillage-trait--manifeste { right: -2rem; top: 50%; transform: translateY(-50%); height: 118%; width: auto; opacity: .55; }
}
@media screen and (min-width: 64rem) {
  .feuillage-trait--hero { display: block; left: max(0rem, calc(50% - 40rem)); bottom: .4rem; width: min(40vw, 34rem); height: auto; }
  .feuillage-trait--manifeste { right: max(0rem, calc(50% - 40rem)); opacity: .9; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .feuillage-trait--hero .trace {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: tracer 1.6s cubic-bezier(.4,0,.2,1) calc(.5s + var(--i) * .09s) forwards;
  }
  @supports (animation-timeline: view()) {
    .manifeste { view-timeline-name: --manifeste; }
    .feuillage-trait--manifeste .trace {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: tracer linear both; animation-timeline: --manifeste;
      animation-range: cover calc(8% + var(--i) * 1.6%) cover calc(30% + var(--i) * 1.6%);
    }
  }
}

/* --- 40. Correctif : état d'ouverture dans le pied de page (28/09) -----------------
   La pastille claire ajoutée en section 36 passait aussi dans le pied vert forêt :
   texte blanc sur fond blanc, illisible, et étirée sur toute la colonne. */
@media screen {
  .statut { width: fit-content; }
  .pied .statut { background: none; border: 0; padding: 0; }
}

/* --- 41. Troisième passe d'effets (28/09 soir) ------------------------------------
   Repris des grands sites de santé (Normedis et consorts), mais au style du carnet :
   - surtitres précédés d'un petit trait qui se trace ;
   - mentions de l'accueil en pastilles de verre ;
   - bandeau de rendez-vous vert forêt en bas des pages de contenu, avec une branche
     au trait qui pousse ;
   - listes de motifs et questions de la FAQ qui arrivent une à une, lavis au survol. */
@media screen {
  .surtitre::before {
    content: ""; display: inline-block; width: 1.5rem; height: 1px; margin-right: .6rem;
    background: currentColor; opacity: .75; vertical-align: .3em; transform-origin: left;
  }

  .hero__mentions.rangee-badges { gap: .4rem; border-top: 0; padding-top: 0; }
  .hero__mentions .badge {
    padding: .26rem .68rem; border-radius: 999px; font-size: .86rem; white-space: nowrap;
    background: rgba(255,254,251,.6); border: 1px solid var(--filet);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hero__mentions .badge::after { content: none !important; }
  .hero__mentions .badge--ok { border-color: #A9C4B0; background: rgba(231,237,230,.8); }


  /* Au-dessus de la frise de feuillage du pied de page, qui la délavait */
  .bande-rdv { padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; z-index: 2; }
  .bande-rdv__carte {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--foret); color: var(--craie); border-radius: 18px;
    padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.4rem, 5vw, 3.6rem);
  }
  .bande-rdv__carte h2 { color: var(--craie); max-width: 18ch; }
  .bande-rdv__carte > p:not(.surtitre) { color: var(--clair-1); max-width: 46ch; }
  .bande-rdv__carte .surtitre { color: var(--ocre-vif); }
  .bande-rdv__carte .btn--primaire { background: var(--craie); color: var(--foret); }
  .bande-rdv__carte .btn--primaire:hover { background: #fff; }
  .bande-rdv__carte .btn--secondaire { color: var(--craie); border-color: rgba(255,255,255,.35); }
  .bande-rdv__carte .btn--secondaire:hover { background: rgba(255,255,255,.08); }
  .bande-rdv__carte .btn--primaire::after { background: linear-gradient(110deg, transparent 32%, rgba(28,52,35,.12) 50%, transparent 68%); }
  .feuillage-trait--rdv { display: block; stroke: #7FA08A; right: -3rem; bottom: -2rem; height: 115%; width: auto; opacity: .55; }
  @media (max-width: 45.99rem) { .feuillage-trait--rdv { opacity: .25; } }

  .motifs > li { transition: background-color .3s ease, padding-left .2s ease; }
  .motifs > li:hover { background: linear-gradient(90deg, rgba(231,237,230,.9), rgba(231,237,230,0)); padding-left: .5rem; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes trait-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .surtitre::before { animation: trait-x linear both; animation-timeline: view(); animation-range: entry 10px entry 140px; }
    .motifs > li, .faq details {
      animation: apparaitre linear both; animation-timeline: view(); animation-range: entry 0px entry 120px;
    }
    .bande-rdv { view-timeline-name: --rdv; }
    .feuillage-trait--rdv .trace {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: tracer linear both; animation-timeline: --rdv;
      animation-range: cover calc(5% + var(--i) * 1.4%) cover calc(28% + var(--i) * 1.4%);
    }
  }
}

/* --- 42. Quatrième passe (28/09 soir) ----------------------------------------------
   Chiffres clés retirés (demande de Paul : site d'information, pas commercial).
   Firefox (et donc Mullvad Browser, le navigateur de Paul) ne sait pas lier une
   animation au défilement : script.js pose .a-reveler / .a-tracer sur ce qui est
   sous l'écran, puis .vu quand ça arrive. Même rendu, par transitions.
   Durées de rendez-vous retirées du site (il n'y a pas de durée fixe). */
@media screen and (prefers-reduced-motion: no-preference) {
  .a-reveler { opacity: 0; transform: translateY(26px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .a-reveler.vu { opacity: 1; transform: none; }

  .a-tracer .feuillage-trait .trace { stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) calc(var(--i) * .06s); }
  .a-tracer.vu .feuillage-trait .trace { stroke-dashoffset: 0; }
  .manifeste.a-tracer .manifeste__texte { color: var(--filet-fort); transition: color 1.4s ease .2s; }
  .manifeste.a-tracer.vu .manifeste__texte { color: var(--foret); }
  .bande-photo--couverte.a-tracer { clip-path: inset(0 7% round 28px); transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
  .bande-photo--couverte.a-tracer.vu { clip-path: inset(0 0 round 0); }
}

/* --- 43. Taille du texte : A− / A+ (TEXTE+, 28/09) -----------------------------------
   On agrandit le contenu (main) et le pied de page avec zoom, qui recalcule la mise en
   page : tout reste dans l'écran. L'en-tête garde sa taille, sinon la barre de navigation
   débordait dès le deuxième palier. Paliers plus doux sur téléphone. */
html[data-taille="1"] { --echelle: 1.12; }
html[data-taille="2"] { --echelle: 1.25; }
html[data-taille="3"] { --echelle: 1.4; }
@media (max-width: 40rem) {
  html[data-taille="1"] { --echelle: 1.08; }
  html[data-taille="2"] { --echelle: 1.16; }
  html[data-taille="3"] { --echelle: 1.25; }
}
html[data-taille] main, html[data-taille] .pied { zoom: var(--echelle); }
.taille { display: inline-flex; gap: .15rem; margin-right: .4rem; }
.taille[hidden] { display: none; }
.taille button {
  font: inherit; font-family: var(--titre); font-size: 1rem; line-height: 1; cursor: pointer;
  min-width: 2.2rem; min-height: 2.2rem; padding: 0 .35rem; border-radius: 999px;
  background: transparent; color: var(--foret); border: 1px solid var(--filet);
}
.taille button span { font-family: var(--texte); font-size: .8em; }
.taille button:hover:not(:disabled) { background: var(--sauge); }
.taille button:disabled { opacity: .35; cursor: default; }
.taille button:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
@media print { .taille { display: none !important; } }

/* --- 44. Mode sombre automatique (SOMBRE1, 28/09) ------------------------------------
   Suit le réglage du téléphone ou de l'ordinateur. Même carnet, papier devenu nuit :
   fond vert-noir, texte crème, accents chêne et sauge éclaircis pour rester lisibles.
   --foret sert de couleur de TEXTE (titres) : il devient clair ; tout ce qui l'utilisait
   comme FOND (boutons, pied, bandeaux) est repris un par un en vert profond. */
/* THEME1 (28/09) : le mode sombre suit l'appareil, sauf choix contraire avec le bouton
   lune/soleil (data-theme sur <html>, mémorisé par taille.js). Même règles, deux portes. */
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --papier:     #121813;
    --papier-2:   #182019;
    --sauge:      #1A241C;
    --ocre-pale:  #231F17;
    --foret:      #E4EBE1;
    --foret-2:    #FFFFFF;
    --vert:       #98C4A3;
    --vert-2:     #B7D8BF;
    --vert-clair: #4F6A57;
    --ocre:       #D8BA8C;
    --ocre-clair: #8E7650;
    --encre:      #E2E5DD;
    --encre-2:    #AAB3A6;
    --filet:      #2A342C;
    --filet-fort: #3A463C;
    --fond-foret: #1A3222;
  }
  html:not([data-theme="light"]) body { color: var(--encre); }
  /* Ce qui était vert forêt en fond le reste (un vert plus profond que la page) */
html:not([data-theme="light"]) .lien-evitement, html:not([data-theme="light"]) .bande--foret, html:not([data-theme="light"]) .actions-mobile .rdv, html:not([data-theme="light"]) .resume-terme, html:not([data-theme="light"]) .bande-rdv__carte, html:not([data-theme="light"]) .btn--secondaire:hover { background: var(--fond-foret); }
  html:not([data-theme="light"]) .pied { background: #0C110D; }
  html:not([data-theme="light"]) .btn--primaire, html:not([data-theme="light"]) .actions-mobile .rdv { background: #D9E6D8; color: #102015; }
  html:not([data-theme="light"]) .btn--primaire:hover { background: #FFFFFF; }
  html:not([data-theme="light"]) .bande-rdv__carte .btn--primaire { background: #D9E6D8; color: #102015; }
  html:not([data-theme="light"]) .bande-rdv__carte .btn--secondaire { color: #F3F1EA; }
  html:not([data-theme="light"]) .btn--secondaire:hover { color: #F3F1EA; }
  html:not([data-theme="light"]) .actions-mobile { background: var(--papier-2); }
  /* Surfaces claires translucides -> voiles sombres */
html:not([data-theme="light"]) .entete { background: rgba(18, 24, 19, .9) !important; border-bottom-color: var(--filet); }
  html:not([data-theme="light"]) { --verre: rgba(28, 38, 30, .72); --verre-arete: rgba(255, 255, 255, .08); }
  html:not([data-theme="light"]) .outil, html:not([data-theme="light"]) .carte-geo, html:not([data-theme="light"]) .avis-cite, html:not([data-theme="light"]) .apporter__groupe, html:not([data-theme="light"]) .encart, html:not([data-theme="light"]) .sommaire, html:not([data-theme="light"]) .conge, html:not([data-theme="light"]) .encart--craie, html:not([data-theme="light"]) .bande--sauge .encart, html:not([data-theme="light"]) .bande--papier2 .encart, html:not([data-theme="light"]) .bande--ocre .encart {
    background: rgba(255, 255, 255, .035) !important; border-color: var(--filet) !important;
  }
  html:not([data-theme="light"]) .statut { background: rgba(255, 255, 255, .05); }
  html:not([data-theme="light"]) .hero__mentions .badge { background: rgba(255, 255, 255, .05); }
  html:not([data-theme="light"]) .hero__mentions .badge--ok { background: rgba(152, 196, 163, .14); border-color: #3E5A46; }
  html:not([data-theme="light"]) select, html:not([data-theme="light"]) input, html:not([data-theme="light"]) textarea { background: var(--papier-2); color: var(--encre); border-color: var(--filet-fort); }
  html:not([data-theme="light"]) .menu-mobile { background: var(--papier); }
  /* Le feuillage à l'aquarelle est une photo claire : sur fond sombre il faisait une tache
     grise (au-dessus du pied de page, autour du portrait). La nuit, on s'en passe : les
     branches au trait prennent le relais. */
html:not([data-theme="light"]) /* Le feuillage à l'aquarelle est une photo claire : sur fond sombre il faisait une tache
     grise (au-dessus du pied de page, html:not([data-theme="light"]) autour du portrait). La nuit, html:not([data-theme="light"]) on s'en passe : les
     branches au trait prennent le relais. */
  .portrait-cadre::before, html:not([data-theme="light"]) .pied::before { display: none; }
  html:not([data-theme="light"]) img { filter: brightness(.94); }
  html:not([data-theme="light"]) .marque img { filter: none; }
  /* CARTE1 : le plan OpenStreetMap (clair) passe en tons nuit */
html:not([data-theme="light"]) .carte-geo iframe { filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
}
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --papier:     #121813;
    --papier-2:   #182019;
    --sauge:      #1A241C;
    --ocre-pale:  #231F17;
    --foret:      #E4EBE1;
    --foret-2:    #FFFFFF;
    --vert:       #98C4A3;
    --vert-2:     #B7D8BF;
    --vert-clair: #4F6A57;
    --ocre:       #D8BA8C;
    --ocre-clair: #8E7650;
    --encre:      #E2E5DD;
    --encre-2:    #AAB3A6;
    --filet:      #2A342C;
    --filet-fort: #3A463C;
    --fond-foret: #1A3222;
  }
  html[data-theme="dark"] body { color: var(--encre); }
  /* Ce qui était vert forêt en fond le reste (un vert plus profond que la page) */
html[data-theme="dark"] .lien-evitement, html[data-theme="dark"] .bande--foret, html[data-theme="dark"] .actions-mobile .rdv, html[data-theme="dark"] .resume-terme, html[data-theme="dark"] .bande-rdv__carte, html[data-theme="dark"] .btn--secondaire:hover { background: var(--fond-foret); }
  html[data-theme="dark"] .pied { background: #0C110D; }
  html[data-theme="dark"] .btn--primaire, html[data-theme="dark"] .actions-mobile .rdv { background: #D9E6D8; color: #102015; }
  html[data-theme="dark"] .btn--primaire:hover { background: #FFFFFF; }
  html[data-theme="dark"] .bande-rdv__carte .btn--primaire { background: #D9E6D8; color: #102015; }
  html[data-theme="dark"] .bande-rdv__carte .btn--secondaire { color: #F3F1EA; }
  html[data-theme="dark"] .btn--secondaire:hover { color: #F3F1EA; }
  html[data-theme="dark"] .actions-mobile { background: var(--papier-2); }
  /* Surfaces claires translucides -> voiles sombres */
html[data-theme="dark"] .entete { background: rgba(18, 24, 19, .9) !important; border-bottom-color: var(--filet); }
  html[data-theme="dark"] { --verre: rgba(28, 38, 30, .72); --verre-arete: rgba(255, 255, 255, .08); }
  html[data-theme="dark"] .outil, html[data-theme="dark"] .carte-geo, html[data-theme="dark"] .avis-cite, html[data-theme="dark"] .apporter__groupe, html[data-theme="dark"] .encart, html[data-theme="dark"] .sommaire, html[data-theme="dark"] .conge, html[data-theme="dark"] .encart--craie, html[data-theme="dark"] .bande--sauge .encart, html[data-theme="dark"] .bande--papier2 .encart, html[data-theme="dark"] .bande--ocre .encart {
    background: rgba(255, 255, 255, .035) !important; border-color: var(--filet) !important;
  }
  html[data-theme="dark"] .statut { background: rgba(255, 255, 255, .05); }
  html[data-theme="dark"] .hero__mentions .badge { background: rgba(255, 255, 255, .05); }
  html[data-theme="dark"] .hero__mentions .badge--ok { background: rgba(152, 196, 163, .14); border-color: #3E5A46; }
  html[data-theme="dark"] select, html[data-theme="dark"] input, html[data-theme="dark"] textarea { background: var(--papier-2); color: var(--encre); border-color: var(--filet-fort); }
  html[data-theme="dark"] .menu-mobile { background: var(--papier); }
  /* Le feuillage à l'aquarelle est une photo claire : sur fond sombre il faisait une tache
     grise (au-dessus du pied de page, autour du portrait). La nuit, on s'en passe : les
     branches au trait prennent le relais. */
html[data-theme="dark"] /* Le feuillage à l'aquarelle est une photo claire : sur fond sombre il faisait une tache
     grise (au-dessus du pied de page, html[data-theme="dark"] autour du portrait). La nuit, html[data-theme="dark"] on s'en passe : les
     branches au trait prennent le relais. */
  .portrait-cadre::before, html[data-theme="dark"] .pied::before { display: none; }
  html[data-theme="dark"] img { filter: brightness(.94); }
  html[data-theme="dark"] .marque img { filter: none; }
  /* CARTE1 : le plan OpenStreetMap (clair) passe en tons nuit */
html[data-theme="dark"] .carte-geo iframe { filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
}

/* --- 45. Bouton clair / sombre (THEME1) ------------------------------------------------ */
.taille .theme svg { width: 1.05rem; height: 1.05rem; display: block; margin: auto; }
.taille .theme .lune { display: block; }
.taille .theme .soleil { display: none; }
html[data-theme="dark"] .taille .theme .lune { display: none; }
html[data-theme="dark"] .taille .theme .soleil { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .taille .theme .lune { display: none; }
  html:not([data-theme="light"]) .taille .theme .soleil { display: block; }
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* --- 46. Audit du 28/09 : en-tête sur petits téléphones ---------------------------------
   Depuis l'ajout de A− / A+ et du bouton jour/nuit, le bouton du menu sortait de l'écran
   sous 400 px de large (iPhone SE, la plupart des Android à 360 px) : menu inaccessible.
   Le menu ne rétrécit plus jamais ; le sous-titre puis le nom cèdent la place avant lui. */
.entete__actions, .burger, .taille { flex: none; }
.marque { min-width: 0; }
@media (max-width: 30rem) {
  .taille { gap: .1rem; margin-right: .15rem; }
  .taille button { min-width: 2rem; min-height: 2rem; padding: 0 .25rem; font-size: .92rem; }
  .marque__role { display: none; }
  .marque__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 22.6rem) {
  .marque__texte { display: none; }
}

/* --- 47. En-tête entre 1024 et 1190 px : menu complet (avec FAQ) + réglages ------------
   Le menu chevauchait le nom sur les petits portables. Dans cette plage, seul le logo reste
   (il ramène toujours à l'accueil) et les entrées du menu se resserrent. */
@media (min-width: 64rem) and (max-width: 74.5rem) {
  .marque__texte { display: none; }
  .nav ul { gap: .7rem; }
}
.nav ul { flex-wrap: nowrap; }
.nav { min-width: 0; }

/* --- 48. Mentions légales : titres décalés (28/09) ----------------------------------------
   La mise en page « titre dans la marge » (section 28) supposait une seule fiche par bloc.
   Avec plusieurs couples titre + fiche (mentions légales), les titres glissaient vers le bas
   et ne tombaient plus en face de leur fiche. Plusieurs fiches : titres au-dessus. */
@media screen and (min-width: 60rem) {
  .bande > .conteneur:has(> .fiche ~ .fiche) { display: block; }
  .bande > .conteneur:has(> .fiche ~ .fiche) > h2 { position: static; margin-top: 2.2rem; }
}

/* --- 49. Pied de page en mode sombre : état d'ouverture (28/09) -------------------------
   Les règles du mode sombre (plus précises) remettaient une pastille sous « Cabinet fermé ·
   réouverture… » dans le pied, qui passait sur deux lignes. Le pied garde un texte simple. */
html body .pied .statut { background: none; border: 0; padding: 0; width: auto; }
/* Avec les sept jours détaillés, le pied faisait quatorze lignes d'horaires : une journée
   tient désormais sur une ligne dès que la colonne le permet. */
@media screen and (min-width: 22rem) {
  .pied .horaires dd { flex-direction: row; flex-wrap: nowrap; gap: 0 .45rem; white-space: nowrap; }
  .pied .horaires dd span:not(:last-child)::after { content: " ·"; color: var(--clair-2); }
}
/* Mode sombre : le bouton « Appeler » de la barre du bas restait blanc, texte illisible */
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .actions-mobile .appel { background: var(--papier-2); color: var(--encre); border-top: 1px solid var(--filet); }
}
@media screen {
  html[data-theme="dark"] .actions-mobile .appel { background: var(--papier-2); color: var(--encre); border-top: 1px solid var(--filet); }
}