/* FourmiCurieuse — design system "Terrain / Field guide illustré".
   Polices auto-hébergées (RGPD : pas de Google Fonts CDN).
   Arima Koshi et FabfeltScript sont les polices de la charte d'origine, fournies par Bastien.
   Arima Koshi porte tout le texte courant (Regular 400, SemiBold 600, Bold 700) : sa hauteur
   d'x (0.509 em) est à 5 % de celle d'Open Sans, qui reste en repli. L'ExtraLight (200) sert
   uniquement aux gros caractères, il est trop fin pour un paragraphe.
   Fabfelt (manuscrite, celle du logo) est réservée aux accents courts : la recette signale
   qu'elle gêne la lecture sur des textes suivis. */
@font-face{font-family:"Arima Koshi";src:url("fonts/arimakoshi-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Arima Koshi";src:url("fonts/arimakoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arima Koshi";src:url("fonts/arimakoshi-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Arima Koshi";src:url("fonts/arimakoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fabfelt";src:url("fonts/fabfelt-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fonts/opensans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fonts/opensans-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fonts/opensans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fonts/opensans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Palette "Terrain" : tons terreux en filiation avec l'identité actuelle (terracotta/beige) */
  --terracotta:#a8542c; --terracotta-dark:#7d3d1f; --terracotta-light:#c97847;
  --moss:#4a5d3a; --moss-dark:#374428; --moss-light:#6b8256;
  --sand:#e8dcc3; --paper:#faf6ec; --cream:#f3ead9; --line:#ddccae;
  --amber:#c98a3d; --amber-dark:#a06c2b;
  --ink:#2b2318; --ink2:#6b5d47; --bg:#ffffff;
  --accent:var(--terracotta); --accent-dark:var(--terracotta-dark); --accent-light:var(--terracotta-light);
  --section:var(--paper);
  --display:"Arima Koshi","Bitter",Georgia,"Times New Roman",serif;
  --script:"Fabfelt","Arima Koshi",cursive;
  --sans:"Arima Koshi","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:1240px; --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);color:var(--terracotta-dark);line-height:1.15;margin:0;
  text-wrap:balance}
/* Pas de max-width global ici : une mesure en `ch` sert la lecture longue (cf. .prose), pas les
   titres. Appliquée aux h1 elle les bridait à ~36% de la largeur utile. Les blocs d'en-tête
   cadrent leur propre largeur plus bas, en % du conteneur. */
h1{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:700}

/* Fabfelt (manuscrite du logo) sur les grands titres uniquement — l'ancien site la mettait
   sur h1 à h6, y compris les sous-titres d'article : c'est ce que la recette signalait comme
   gênant à la lecture. Ici elle reste sur les titres de page et de section, jamais dans le
   corps d'un article. Elle a des jambages marqués, d'où le line-height plus généreux. */
h1, .section-head h2, .baba-theme-head h2{font-family:var(--script);line-height:1.25;
  font-weight:700;letter-spacing:.01em}
h1{font-size:clamp(2.3rem,4.7vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0;color:var(--ink2)}
a{color:var(--terracotta-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
/* padding fluide : à ~1280px le wrap atteint sa largeur max et touchait presque les bords */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,4vw,44px)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;font-weight:700;color:var(--amber-dark)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;flex-shrink:0}

/* ---- Séparateur pointillé, motif "carnet de terrain" ---- */
.dotted-sep{border:none;border-top:2px dotted var(--line);margin:40px 0}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;
  padding:.72em 1.5em;border-radius:999px;border:1.5px solid transparent;transition:.15s;
  cursor:pointer;line-height:1.2;font-family:var(--sans)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:var(--terracotta-dark)}
.btn-ghost{border-color:var(--line);color:var(--terracotta-dark);background:#fff}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--terracotta)}
.btn-light{background:#fff;color:var(--terracotta)}
.btn-light:hover{background:var(--cream)}

/* ---- Header ---- */
.site-header{display:flex;align-items:center;gap:24px;
  max-width:var(--maxw);margin:0 auto;padding:14px 24px}
.header-bar{position:sticky;top:0;z-index:30;background:rgba(250,246,236,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo:hover{text-decoration:none}
/* logo complet (fourmi + mot-symbole), détouré sur fond transparent */
.logo img{height:44px;width:auto;display:block}
@media (max-width:520px){.logo img{height:36px}}
/* Menu en Arima Koshi, casse normale et sans interlettrage : la version en capitales espacées
   durcissait la barre, alors que le reste de l'identité est rond et manuscrit. */
.nav{display:flex;align-items:center;gap:26px;flex:1;font-size:1rem;justify-content:flex-end}
.nav a{color:var(--ink);font-weight:600}
.nav a:hover{color:var(--terracotta);text-decoration:none}
.nav a[data-active]{color:var(--terracotta)}
.nav a.nav-cta{color:#fff;margin-left:8px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--terracotta-dark)}
.nav-toggle svg{width:26px;height:26px}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;background:#fff;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:88px 28px 28px;
    box-shadow:-18px 0 40px rgba(43,35,24,.16);transform:translateX(100%);transition:transform .22s ease;overflow-y:auto}
  .nav[data-open]{transform:translateX(0)}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-cta{margin-left:0;margin-top:12px;width:100%;justify-content:center}
  .nav-scrim{display:none;position:fixed;inset:0;background:rgba(43,35,24,.35);z-index:29}
  .nav-scrim[data-open]{display:block}
}

/* ---- Hero ---- */
.hero{padding:0;background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:20px;padding-top:56px;padding-bottom:56px}
/* Règle de composition : un bloc d'en-tête occupe 66-75% de la largeur du conteneur.
   En dessous, le texte flotte dans le vide — surtout quand la section est haute. */
.hero h1{max-width:75%}
.hero p.lede{font-size:1.12rem;max-width:72%}
@media (max-width:900px){.hero h1,.hero p.lede{max-width:100%}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ---- Hero banner (home) : bandeau photo pleine largeur, façon "bandeaux" du site d'origine.
   Hauteur pilotée par un clamp (pas d'aspect-ratio + max-height, qui se contredisaient et
   faisaient re-zoomer cover au-delà de ~1750px de large). L'image source doit être PLUS
   panoramique que le conteneur (>= 3.5:1, cf. docs/04) : cover rogne alors les côtés au lieu
   d'agrandir le sujet. ---- */
.hero-banner{position:relative;height:clamp(460px,38vw,720px);display:flex;align-items:center}
/* Variante page interne : même composition, moins haute que la home. */
.hero-banner-page{height:clamp(340px,26vw,460px)}
.hero-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% center;z-index:0}
.hero-banner-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(43,35,24,.86) 0%,rgba(43,35,24,.62) 34%,rgba(43,35,24,.18) 62%,rgba(43,35,24,0) 82%)}
.hero-banner-content{position:relative;z-index:2}
/* Le texte occupe la largeur utile du bandeau, en s'arrêtant avant le sujet placé à droite. */
/* Largeur élargie (le titre était bridé à 66%), taille laissée à celle des autres h1 :
   la grossir remplissait la ligne mais ne corrigeait rien à la mise en page.
   Pas de text-wrap:balance ici, il équilibre les 2 lignes et laisse un blanc à droite. */
.hero-banner h1{max-width:75%;text-wrap:normal}
.hero-banner p.lede{max-width:70%;font-size:1.18rem}
@media (max-width:1100px){.hero-banner h1,.hero-banner p.lede{max-width:100%}}
.hero-banner .kicker-light{color:var(--amber)}
.hero-banner h1,.hero-banner p.lede{color:#fff}
.hero-banner h1{text-shadow:0 2px 10px rgba(43,35,24,.45)}
.hero-banner p.lede{text-shadow:0 1px 6px rgba(43,35,24,.5)}
/* Terme de glossaire posé sur la photo : le terracotta n'y est pas lisible */
.hero-banner .gloss-term{color:#fff;border-bottom-color:var(--amber)}
@media (max-width:720px){
  /* En portrait, l'image panoramique est forcément très rognée : on recadre sur le sujet
     et on assombrit davantage pour garder le texte lisible. */
  .hero-banner{height:auto;min-height:520px;padding:48px 0}
  .hero-banner-img{object-position:78% center}
  .hero-banner-scrim{background:linear-gradient(180deg,rgba(43,35,24,.55) 0%,rgba(43,35,24,.86) 55%,rgba(43,35,24,.92) 100%)}
}

section{padding:56px 0}
section.alt{background:var(--section)}
.section-head{max-width:75%}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;max-width:80%}
@media (max-width:900px){.section-head,.section-head.center{max-width:100%}}
.section-head h2{text-wrap:balance}

/* ---- Cartes génériques (façon fiche cartonnée) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cream)}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:1.1rem}

/* ---- Cartes "entrées" (accueil) : photo + survol animé ---- */
.entry-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.entry-card{color:inherit;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.entry-card:hover{text-decoration:none;transform:translateY(-6px);box-shadow:0 18px 34px rgba(43,35,24,.16)}
.entry-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--cream)}
.entry-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.entry-card:hover .entry-media img{transform:scale(1.07)}
/* Repli si la photo n'est pas encore fournie : bandeau sable au lieu d'un trou blanc */
.entry-media.no-img{aspect-ratio:16/5;background:linear-gradient(135deg,var(--sand),var(--cream))}
.entry-media.no-img img{display:none}
.entry-card .card-body{gap:10px}
.entry-cta{margin-top:auto;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--amber-dark);display:inline-flex;align-items:center;gap:6px}
.entry-cta::after{content:"→";transition:transform .22s ease}
.entry-card:hover .entry-cta::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .entry-card,.entry-media img,.entry-cta::after{transition:none}
  .entry-card:hover{transform:none}
  .entry-card:hover .entry-media img{transform:none}
}

/* ---- Section "split" (image + texte, alterne) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:var(--cream);border:1px solid var(--line)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split.reverse .split-media{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr}.split.reverse .split-media{order:-1}}

/* ---- Badges (fiches de soin : catégorie) ---- */
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 12px;border-radius:999px;margin-bottom:6px}
.badge-endémique{background:var(--moss);color:#fff}
.badge-exotique{background:var(--amber);color:#fff}
.badge-autre{background:var(--ink2);color:#fff}

/* ---- Filtres partagés (blog, fiches) ---- */
.filter-toolbar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:20px}
.filter-search{position:relative;max-width:420px}
.filter-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink2)}
.filter-search input{width:100%;padding:11px 14px 11px 42px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.94rem;background:var(--paper);color:var(--ink)}
.filter-search input:focus{outline:none;background:#fff;border-color:var(--amber);box-shadow:0 0 0 3px rgba(201,138,61,.18)}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;border-top:1px dotted var(--line)}
.tag-chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--terracotta-dark);transition:.15s}
.tag-chip:hover{border-color:var(--amber)}
.tag-chip.on{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.tag-chip .n{font-size:.76rem;color:var(--ink2)}
.tag-chip.on .n{color:rgba(255,255,255,.75)}
.filter-countbar{display:flex;align-items:center;gap:16px;margin-top:16px}
.filter-count{font-size:.82rem;color:var(--ink2)}
.filter-reset{border:none;background:none;padding:0;cursor:pointer;font:inherit;font-size:.82rem;
  color:var(--amber-dark);font-weight:700}
.filter-reset:hover{color:var(--terracotta)}
.filter-reset[hidden]{display:none}
.filter-empty{text-align:center;color:var(--ink2);padding:40px 16px}

/* ---- B.A.-BA : hub par thème ---- */
.baba-theme{margin-bottom:52px}
.baba-theme:last-child{margin-bottom:0}
.baba-theme-head{display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;
  border-radius:999px;margin-bottom:26px}
.baba-theme-head h2{margin:0;font-size:1.35rem}
.baba-theme-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:42px;height:42px;border-radius:50%;background:#fff}
.baba-theme-icon svg{width:22px;height:22px}
.baba-swatch-sand{background:var(--sand)}
.baba-swatch-sand .baba-theme-icon{color:var(--terracotta-dark)}
.baba-swatch-moss{background:#e3e8da}
.baba-swatch-moss .baba-theme-icon{color:var(--moss-dark)}
.baba-swatch-amber{background:#f3e3c8}
.baba-swatch-amber .baba-theme-icon{color:var(--amber-dark)}
.baba-swatch-terracotta{background:#f0dcd0}
.baba-swatch-terracotta .baba-theme-icon{color:var(--terracotta-dark)}

/* Inclinaison franche : à moins de 1.5deg on dirait un défaut d'alignement, pas un parti pris. */
.baba-card{transition:transform .18s ease,box-shadow .18s ease}
.baba-tilt-r{transform:rotate(1.8deg)}
.baba-tilt-l{transform:rotate(-1.6deg)}
.baba-card:hover{transform:translateY(-6px) rotate(0deg) scale(1.02);
  box-shadow:0 18px 34px rgba(43,35,24,.18);z-index:2}

/* Grille par thème : colonnes fixées d'après le nombre de notions, pour ne jamais laisser
   une carte orpheline en bout de ligne. À 1 ou 2 notions, la carte passe à l'horizontale
   et occupe la largeur au lieu de flotter à gauche. */
.baba-grid{display:grid;gap:24px}
.baba-theme[data-count="4"] .baba-grid{grid-template-columns:repeat(4,1fr)}
.baba-theme[data-count="3"] .baba-grid{grid-template-columns:repeat(3,1fr)}
.baba-theme[data-count="2"] .baba-grid{grid-template-columns:repeat(2,1fr)}
.baba-theme[data-count="1"] .baba-grid{grid-template-columns:1fr}

/* Cartes horizontales pour les thèmes courts */
.baba-theme[data-count="2"] .baba-card,
.baba-theme[data-count="1"] .baba-card{display:grid;grid-template-columns:minmax(0,42%) 1fr;
  align-items:stretch}
.baba-theme[data-count="2"] .baba-card img,
.baba-theme[data-count="1"] .baba-card img{height:100%;aspect-ratio:auto;min-height:190px}
.baba-theme[data-count="1"] .baba-card{grid-template-columns:minmax(0,46%) 1fr}
.baba-theme[data-count="1"] .baba-card .article-body{justify-content:center;padding:28px 32px}
.baba-theme[data-count="1"] .baba-card h3{font-size:1.35rem}

@media (max-width:1080px){
  .baba-theme[data-count="4"] .baba-grid{grid-template-columns:repeat(2,1fr)}
  .baba-theme[data-count="3"] .baba-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .baba-theme[data-count="3"] .baba-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .baba-grid,
  .baba-theme[data-count="4"] .baba-grid,
  .baba-theme[data-count="3"] .baba-grid,
  .baba-theme[data-count="2"] .baba-grid{grid-template-columns:1fr}
  .baba-theme[data-count="2"] .baba-card,
  .baba-theme[data-count="1"] .baba-card{grid-template-columns:1fr}
  .baba-theme[data-count="2"] .baba-card img,
  .baba-theme[data-count="1"] .baba-card img{aspect-ratio:16/10;min-height:0}
  /* pas d'inclinaison en colonne unique : ça se lit comme un bug d'alignement */
  .baba-tilt-r,.baba-tilt-l{transform:none}
}

/* ---- Blog / articles ---- */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:28px}
.article-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;color:inherit}
.article-card:hover{text-decoration:none;box-shadow:0 10px 24px rgba(43,35,24,.1);transform:translateY(-2px)}
.article-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--cream)}
.article-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.article-meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-dark);font-weight:700}
.article-excerpt{font-size:.93rem}
/* Le corps était centré (margin auto) alors que titre, chapô et cartes sont calés à gauche :
   sur une même page le texte décrochait de ~226px vers la droite. Aligné à gauche, la mesure
   de lecture (72ch) reste inchangée. */
article.prose{max-width:72ch;margin:0}
.prose h2{margin-top:2em;margin-bottom:.5em;font-size:1.5rem}
.prose p{margin-bottom:1.2em;color:var(--ink)}
.prose ul,.prose ol{color:var(--ink);margin-bottom:1.2em;padding-left:1.4em}
.prose img{border-radius:var(--r);margin:1.5em 0}
.prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* Les tableaux des articles étaient convertis en listes par l'ancienne extraction ;
   ils sont désormais préservés et doivent être lisibles. */
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px dotted var(--line);
  vertical-align:top}
.prose thead th{background:var(--cream);border-bottom:2px solid var(--line);font-weight:700;
  color:var(--terracotta-dark)}
.prose tbody tr:nth-child(even){background:rgba(232,220,195,.28)}

/* Mot de fin d'article : rappel que le blog est sans publicité + lien boutique */
.article-outro{max-width:72ch;margin:44px 0 0;padding:26px 30px;background:var(--cream);
  border:1px dashed var(--line);border-radius:var(--r)}
.article-outro p{margin:0 0 16px;color:var(--ink);font-size:.98rem}
.article-outro-actions{display:flex;gap:12px;flex-wrap:wrap}
.article-outro strong{color:var(--terracotta-dark)}
.article-hero{width:100%;max-width:900px;margin:0;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);background:var(--cream)}
.breadcrumbs{font-size:.85rem;color:var(--ink2);margin-bottom:20px}
.breadcrumbs a{color:var(--ink2)}

/* ---- Glossaire ---- */
.gloss-list{display:grid;gap:2px;border-top:1px dotted var(--line)}
.gloss-row{display:flex;gap:20px;padding:16px 4px;border-bottom:1px dotted var(--line);color:inherit}
.gloss-row:hover{background:var(--cream);text-decoration:none}
.gloss-row-term{font-family:var(--display);font-weight:700;color:var(--terracotta-dark);flex:0 0 200px}
.gloss-row-def{color:var(--ink2);font-size:.95rem}
@media (max-width:640px){.gloss-row{flex-direction:column;gap:4px}.gloss-row-term{flex:none}}

/* Terme cliquable inline (remplace TooltipPro) : tooltip CSS pur au survol,
   + tap mobile (JS ajoute .open) */
.gloss-term{border-bottom:2px dotted var(--amber-dark);color:var(--terracotta-dark);font-weight:600;
  position:relative;cursor:help}
.gloss-term:hover{text-decoration:none}
.gloss-term::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);width:max-content;max-width:260px;
  background:var(--ink);color:#fff;font-size:.82rem;font-weight:400;line-height:1.4;
  padding:10px 12px;border-radius:10px;opacity:0;visibility:hidden;transition:.15s;pointer-events:none;z-index:20}
.gloss-term:hover::after,.gloss-term.open::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---- Fiches de soin ---- */
.fiche-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin-top:24px}
.fiche-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;color:inherit;transition:.15s}
.fiche-card:hover{text-decoration:none;box-shadow:0 10px 24px rgba(43,35,24,.1);transform:translateY(-2px)}
.fiche-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cream)}
.fiche-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:2px}
.fiche-scientific{font-size:.88rem}
/* margin-block seulement : un margin:0 complet écraserait le centrage horizontal de .wrap
   (la <figure> porte les deux classes) et collerait l'image au bord de la fenêtre. */
/* ---- En-tête de fiche : portrait carré + identité, façon planche d'espèce ----
   Les visuels d'origine sont des vignettes carrées de 245 à 860px. Affichés à 300px on
   reste sous leur taille native (donc nets) et le sujet n'est plus recadré. */
.fiche-head{background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
  padding-bottom:44px;border-bottom:1px solid var(--line)}
.fiche-id{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin-top:8px}
.fiche-portrait{margin:0}
.fiche-portrait img{width:300px;height:300px;object-fit:cover;border-radius:var(--r);
  background:var(--cream);border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(43,35,24,.14)}
.fiche-credit{margin:10px 0 0;font-size:.76rem;line-height:1.45;color:var(--ink2);
  font-style:italic;max-width:300px}
.fiche-id-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fiche-id-body h1{margin:2px 0 0}
.fiche-id-body .quick-card{margin:20px 0 22px;width:100%}
@media (max-width:820px){
  .fiche-id{grid-template-columns:1fr;gap:24px}
  .fiche-portrait img{width:220px;height:220px}
  .fiche-credit{max-width:none}
}

/* Une fiche est un document tabulaire, pas un texte de lecture longue : ses tableaux
   suivent la largeur de la carte rapide au lieu d'être bridés à 72ch. */
.fiche-page article.prose{max-width:none}
.quick-card{background:var(--cream);border:1px dashed var(--line);border-radius:var(--r);
  padding:18px 22px;margin-bottom:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px 24px}
.quick-item{display:flex;flex-direction:column;gap:2px}
.quick-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--amber-dark)}
.quick-value{font-size:.95rem;color:var(--ink)}
.fiche-table{width:100%;border-collapse:collapse;margin:0 0 32px}
.fiche-table th,.fiche-table td{text-align:left;padding:10px 14px;border-bottom:1px dotted var(--line);
  vertical-align:top;font-size:.94rem}
.fiche-table th{width:34%;color:var(--ink2);font-weight:700}
.fiche-sources{font-size:.85rem;color:var(--ink2)}

/* ---- Pages légales : sommaire collant + colonne de lecture ---- */
.legal-meta{margin-top:22px;font-family:var(--mono);font-size:.78rem;color:var(--ink2);
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 16px}
.legal-meta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terracotta);flex:none}
.legal-body{padding:clamp(26px,4vw,42px) 0 8px}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px 56px;align-items:start}
.legal-content{min-width:0;max-width:760px}
.legal-toc{position:sticky;top:96px;margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px;max-height:calc(100vh - 120px);overflow:auto}
.legal-toc-k{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--amber-dark);display:block;margin-bottom:13px}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc li{margin:.34em 0}
.legal-toc a{color:var(--ink2);text-decoration:none;font-size:.88rem;line-height:1.4;display:block}
.legal-toc a:hover{color:var(--terracotta);text-decoration:underline;text-underline-offset:2px}
.legal-callout{display:flex;gap:13px;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin:0 0 28px;font-size:.97rem;line-height:1.55}
.legal-callout svg{width:22px;height:22px;flex:none;color:var(--terracotta);margin-top:2px}
.legal-content .prose h2{scroll-margin-top:96px;border-top:1px solid var(--line);
  padding-top:1.4em;margin-top:1.7em;font-size:1.3rem}
.legal-content .prose h2:first-of-type{border-top:none;padding-top:0}
@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:0}
  .legal-toc{position:static;max-height:none;margin-bottom:30px}
  .legal-toc ol{columns:2;column-gap:30px}
  .legal-toc li{break-inside:avoid}
}
@media(max-width:560px){.legal-toc ol{columns:1}}

/* ---- Formulaire ---- */
.form-grid{display:grid;gap:16px;max-width:560px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{font:inherit;padding:.7em .9em;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta);outline:none}
.field-check{flex-direction:row;align-items:flex-start;gap:10px}
.field-check input{margin-top:3px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--terracotta)}
.form-hint{font-size:.85rem;color:var(--ink2);margin-top:-4px}
.form-hint[hidden]{display:none}

/* ---- Page contact ---- */
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px;align-items:start}
.contact-media{margin:0 0 28px}
.contact-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);background:var(--cream)}
.team-aside{margin-top:34px;padding:16px 20px;background:var(--cream);
  border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;color:var(--ink2)}

/* Photo d'équipe : masquée par onerror si le fichier venait à manquer. */
.team-photo{margin:34px 0}
.team-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line);background:var(--cream)}
.team-photo figcaption{margin-top:9px;font-size:.85rem;color:var(--ink2);font-style:italic}

.contact-block{margin-bottom:28px}
.contact-block h2{font-size:1.1rem;margin-bottom:12px}
.contact-list{margin:0;padding-left:1.1em;color:var(--ink2);display:grid;gap:7px;font-size:.95rem}
.contact-note{font-size:.88rem;margin-top:8px}
.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 34px;box-shadow:0 12px 30px rgba(43,35,24,.07)}
.contact-form-card .form-grid{max-width:none}
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:32px}
  .contact-form-card{padding:26px 22px;order:-1}
  .contact-aside{order:1}
}

/* Repli si le bandeau photo n'est pas encore fourni */
.hero-banner.no-banner{height:auto;padding:56px 0;background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%)}
.hero-banner.no-banner .hero-banner-img,
.hero-banner.no-banner .hero-banner-scrim{display:none}
.hero-banner.no-banner h1,.hero-banner.no-banner p.lede{color:var(--ink);text-shadow:none}
.hero-banner.no-banner h1{color:var(--terracotta-dark)}
.hero-banner.no-banner .kicker-light{color:var(--amber-dark)}
.hero-banner.no-banner .gloss-term{color:var(--terracotta-dark)}

.form-msg{border-radius:10px;padding:12px 16px;font-size:.92rem;display:none}
.form-msg[data-show]{display:block}
.form-msg.ok{background:#eaf1e6;color:#3a5a2c}
.form-msg.err{background:#f7e6df;color:#8a3d24}

/* ---- Footer ---- */
.site-footer{background:var(--terracotta-dark);color:#f6ede1;padding:52px 0 28px;margin-top:64px}
/* Les <p> héritaient de --ink2 (brun foncé) : contraste 1.28 sur le fond terracotta,
   soit un texte invisible. Forcé ici, 7.1:1. */
.site-footer p{color:#f6ede1}
.site-footer a{color:#f6ede1}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer-grid h4{font-family:var(--sans);color:#fff;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:14px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.footer-social{display:flex;gap:14px;margin-top:16px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;background:rgba(255,255,255,.14)}
.footer-social a:hover{background:rgba(255,255,255,.24);text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#e8d5c0}
.footer-bottom a{color:#e8d5c0}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---- 404/500 ---- */
.error-page{padding:120px 0;text-align:center}

/* ---- Bannière cookies (tarteaucitron) — habillage FourmiCurieuse ---- */
#tarteaucitronRoot #tarteaucitronAlertBig{
  background:var(--paper)!important;color:var(--ink)!important;font-family:var(--sans)!important;
  border-top:3px solid var(--terracotta)!important;
  box-shadow:0 -8px 30px rgba(43,35,24,.14)!important;padding:20px 24px!important}
#tarteaucitronRoot .tarteaucitronAllow{background:var(--terracotta)!important;color:#fff!important}
#tarteaucitronRoot .tarteaucitronAllow:hover{background:var(--terracotta-dark)!important;border-color:var(--terracotta-dark)!important}
#tarteaucitronRoot .tarteaucitronDeny{background:#fff!important;color:var(--terracotta-dark)!important}
#tarteaucitronRoot .tarteaucitronDeny:hover{background:var(--cream)!important;border-color:var(--terracotta)!important}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert{display:inline-flex!important;align-items:center!important;gap:12px!important}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert::before{
  content:"";display:inline-block;flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:url("img/logo-badge.png") center/cover no-repeat}
/* Pastille de réglage : badge rond FourmiCurieuse au lieu du cadenas jaune de la lib.
   La taille DOIT être fixée ici : sans width/height le bouton prend la taille native de
   l'image (512px) et couvre un quart de l'écran. Le badge est déjà un carré plein
   (tracé sable sur terracotta), border-radius:50% suffit à le rendre circulaire. */
#tarteaucitronRoot #tarteaucitronManager{
  box-sizing:border-box!important;display:block!important;padding:0!important;
  width:52px!important;height:52px!important;border-radius:50%!important;overflow:hidden!important;
  background:url("img/logo-badge.png") center/cover no-repeat!important;
  border:2px solid #fff!important;box-shadow:0 10px 26px rgba(43,35,24,.3)!important;
  transition:transform .18s ease}
#tarteaucitronRoot #tarteaucitronManager:hover{transform:scale(1.06)}
/* la lib colle la pastille dans l'angle : on la décolle des deux bords */
#tarteaucitronRoot #tarteaucitronIcon{padding:14px!important}
/* l'<img> injectée par la lib est remplacée par le background ci-dessus */
#tarteaucitronRoot #tarteaucitronManager img{display:none!important}

/* ---- Impression (fiches de soin "PDFables") ---- */
@media print{
  .header-bar,.site-footer,.no-print{display:none!important}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
  .quick-card{background:#fff;border:1px solid #999}
  .fiche-table th,.fiche-table td{border-bottom:1px solid #ccc}
}