/* =========================================================
   Santé Mentale Positive — design system
   Palette (charte 10/07/2026, ancrée sur le logo) : bleu pétrole #0d5876, doré #e3a733, gris #44454f, rose poudré, fonds crème.
   Douceur, courbes et vraies vagues ondulées entre les sections.
   Titres : Lexend (graisse 500, lisibilité étudiée) · Texte et interface : Source Sans 3 (25/07/2026)
   ========================================================= */

:root {
  --teal: #0d5876;            /* couleur principale (actions, liens) : bleu de elisabethbelot.fr */
  --teal-fonce: #093f56;      /* bleu foncé assorti */
  --teal-vif: #5b9fb8;        /* décoratif : bleu ciel du logo */
  --teal-clair: #e6f1f6;      /* fond tinté doux, légère teinte bleue */
  --or: #e3a733;              /* accent doré */
  --or-fonce: #8a6320;        /* assombri pour un contraste suffisant en petit texte */
  --or-clair: #f9edcb;
  --rose: #b56576;            /* accent rose */
  --rose-fonce: #9e3f58;      /* assombri pour un contraste suffisant en petit texte */
  --rose-clair: #f9e7ec;
  --texte: #44454f;           /* gris du logo */
  --texte-doux: #6f7079;
  --alerte: #e0685e;          /* uniquement pour l'urgence */
  --blanc: #ffffff;
  --fond: #fdf5ea;            /* fond général : crème chaude et lumineuse */
  --fond-creme: #fffaf2;      /* sections claires : crème encore plus doux */
  /* Boutons : dégradé inspiré de radio-odyssey (violet→rose→orange), version pastel */
  --bouton-grad: linear-gradient(135deg, #0d5876 0%, #2a7c9e 100%);
  --bouton-grad-hover: linear-gradient(135deg, #0a4a64 0%, #267596 100%);
  --bouton-texte: #ffffff;    /* prune foncé : bien lisible sur les pastels */
  --ombre: 0 14px 40px rgba(13, 88, 118, 0.12);
  --ombre-forte: 0 22px 54px rgba(13, 88, 118, 0.18);
  --rayon: 28px;
  --vague-h: 56px;
  --max: 1120px;
  --transition: 0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.75;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.22;
  color: var(--texte);
  font-weight: 500; /* seule graisse chargée : pas de 600/700, le navigateur fabriquerait un faux gras */
}
h4 {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.18;
  color: var(--texte);
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
/* Intertitres colorés = couleur de l'icône de la dimension de la page */
h2 { color: var(--teal); }                 /* défaut (pages neutres) : bleu roi */
.cat-bio h2 { color: #96670a; }            /* biologiques : doré assombri, lisible */
.cat-cog h2 { color: #1f6379; }            /* cognitives : bleu        */
.cat-psy h2 { color: var(--rose-fonce); }  /* psychologiques : rose     */
h3 { font-size: 1.3rem; font-weight: 500; } /* Lexend : seule graisse 500 chargée */

p { margin-bottom: 1rem; color: var(--texte-doux); }

/* Un peu d'air entre un titre et le paragraphe qui le suit, sur tout le site.
   Pour agrandir ou réduire l'espace, changez la valeur 0.6rem ci-dessous. */
:where(h1, h2, h3, h4) + p { margin-top: 1.5rem; }
/* Les cartes gardent leur espacement compact d'origine. */
.carte h3 + p, .carte-ressource h3 + p { margin-top: 0; }

a { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-fonce); }

img { max-width: 100%; display: block; }

.contenu { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Icônes en trait, alignées dans les titres et textes */
.ico { width: 1.2em; height: 1.2em; vertical-align: -0.22em; margin-right: 0.45em; flex: 0 0 auto; }
.categorie > h2 .ico { margin-right: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  background: var(--bouton-grad);
  color: var(--bouton-texte);
  padding: 15px 34px;
  border-radius: 999px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 10px 24px rgba(13, 88, 118, 0.28);
}
.btn:hover { background: var(--bouton-grad-hover); color: var(--bouton-texte); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 88, 118, 0.30), 0 0 0 3px rgba(227, 167, 51, 0.38); }

.btn-clair { background: transparent; color: var(--teal); box-shadow: none; border-color: rgba(13, 88, 118, 0.28); }
.btn-clair:hover { background: rgba(13, 88, 118, 0.08); color: var(--teal-fonce); transform: translateY(-2px); }

/* ---------- En-tête / Navigation ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 245, 234, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 88, 118, 0.12);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: var(--max); margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--texte);
}
.logo svg, .logo img { flex-shrink: 0; display: block; }
.logo img { width: 75px; height: 75px; }
/* Symbole du nouveau logo à gauche du logo écrit (19/07/2026) :
   pétrole le jour, blanc en mode sombre. */
.logo .logo-jour, .logo .logo-nuit { width: 46px; height: auto; }
.logo .logo-nuit { display: none; }

.nav-liens { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-liens a {
  padding: 9px 18px; border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; color: var(--texte);
}
.nav-liens a:hover, .nav-liens a.actif { background: var(--teal-clair); color: var(--teal-fonce); }

.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 26px; height: 3px; background: var(--texte); margin: 5px 0; border-radius: 3px; transition: var(--transition); }

/* ---------- Hero (les 3 couleurs du logo en halos) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
  background:
    radial-gradient(circle at 15% 20%, rgba(111, 189, 216, 0.28), transparent 45%),
    radial-gradient(circle at 85% 12%, rgba(242, 184, 60, 0.30), transparent 44%),
    radial-gradient(circle at 72% 96%, rgba(235, 157, 177, 0.26), transparent 46%),
    linear-gradient(160deg, #0a4258 0%, #0d5876 48%, #2e83a6 100%);
}
.hero h1 { color: var(--blanc); }
.hero p.sous-titre b { color: #f6d488; }
.hero .note-cta { color: rgba(255, 255, 255, 0.78); }
.hero .btn:not(.btn-clair) {
  background: linear-gradient(135deg, #f2b83c 0%, #e3a733 100%);
  color: #3a2c08; border-color: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.hero .btn:not(.btn-clair):hover {
  background: linear-gradient(135deg, #eeb02c 0%, #d99c24 100%);
  color: #3a2c08;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.hero .btn-clair { color: var(--blanc); border-color: rgba(255, 255, 255, 0.55); }
.hero .btn-clair:hover { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.hero .contenu { max-width: 840px; text-align: center; position: relative; z-index: 1; }
.hero .surtitre {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal-fonce), var(--teal));
  color: var(--blanc);
  padding: 8px 22px; border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 26px;
  box-shadow: 0 10px 24px rgba(13, 88, 118, 0.32);
}
.hero p.sous-titre { font-size: 1.22rem; max-width: 640px; margin: 20px auto 34px; color: rgba(255, 255, 255, 0.92); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections + VRAIES VAGUES ondulées ---------- */
.section {
  position: relative;
  padding: clamp(78px, 9vw, 116px) 0 clamp(58px, 8vw, 96px);
}
.section-creme { background: var(--fond-creme); }
.section-vert  { background: var(--teal-clair); }
.section-blanc { background: var(--blanc); }

/* La vague : une bande de la couleur de la section, au bord supérieur
   ondulé, qui remonte par-dessus la section précédente. */
.section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--vague-h);
  transform: translateY(calc(-1 * var(--vague-h) + 1px));
  background-color: inherit;
  -webkit-mask: url("/assets/vague.svg") no-repeat top center;
  mask: url("/assets/vague.svg") no-repeat top center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}
/* Pas de vague pour la 1re section d'une page d'article (rien au-dessus) */
main > .section:first-child::before { display: none; }

.section-titre { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-titre p { font-size: 1.1rem; }

/* ---------- Grilles & cartes ---------- */
.grille { display: grid; gap: 28px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  background: var(--blanc);
  padding: 36px 32px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(13, 88, 118, 0.07);
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.carte .icone {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-clair);
  border-radius: 50%;
  margin-bottom: 22px;
  font-size: 30px;
}
.carte h3 { margin-bottom: 10px; }
.carte p { margin-bottom: 10px; }
.carte .lire { font-family: "Source Sans 3", sans-serif; font-weight: 600; color: var(--teal); }
.carte:hover .lire { color: #8a6320; }

/* Les 3 couleurs du logo sur les cartes en triade */
.grille-3 .carte:nth-child(3n+1) .icone { background: var(--teal-clair); }
.grille-3 .carte:nth-child(3n+2) .icone { background: var(--rose-clair); }
.grille-3 .carte:nth-child(3n+3) .icone { background: var(--or-clair); }

/* ===== Touche "joie" : mot-clé en dégradé + 3 dimensions colorées ===== */
.accent-grad {
  background: linear-gradient(100deg, #6FBBD4 0%, #EEB84B 48%, #E88BA8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* petit trait dégradé sous les titres de section (toutes les pages) */
.section-titre h2 { position: relative; display: inline-block; }
.section-titre h2::after {
  content: ""; display: block; width: 68px; height: 5px; border-radius: 5px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #6fbdd8, #f2b83c, #eb9db1);
}

/* signature joyeuse : trait tricolore sous le titre de chaque fiche */
.article h1::after {
  content: ""; display: block; width: 96px; height: 6px; border-radius: 6px;
  margin-top: 16px;
  background: linear-gradient(90deg, #f2b83c, #6fbdd8, #eb9db1);
}

/* cartes des trois dimensions */
.dim { position: relative; overflow: hidden; text-align: center; }
.dim .icone { margin-left: auto; margin-right: auto; }
.dim::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.dim .puce {
  display: inline-block; font-family: "Source Sans 3", sans-serif; font-weight: 600;
  font-size: .875rem; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.dim h3 { margin-bottom: 8px; }

/* Doré = le corps (ressources biologiques) */
.dim-bio::before { background: linear-gradient(90deg, #e0ab3d, #f4e5c2); }
.grille-3 .carte.dim-bio .icone { background: #f9edcb; }
.dim-bio .puce { background: #f9edcb; color: #8a6320; }
.dim-bio:hover { box-shadow: 0 22px 48px rgba(226, 167, 51, 0.32); }

/* Bleu = l'esprit (ressources cognitives) */
.dim-cog::before { background: linear-gradient(90deg, #78afc4, #e2f1f8); }
.grille-3 .carte.dim-cog .icone { background: #e2f1f8; }
.dim-cog .puce { background: #e2f1f8; color: #1f6379; }
.dim-cog:hover { box-shadow: 0 22px 48px rgba(47, 125, 153, 0.25); }

/* Rose = les liens (ressources psychologiques) */
.dim-psy::before { background: linear-gradient(90deg, #d494a4, #f3dfe5); }
.grille-3 .carte.dim-psy .icone { background: #f9e7ec; }
.dim-psy .puce { background: #f9e7ec; color: #b04a6c; }
.dim-psy:hover { box-shadow: 0 22px 48px rgba(181, 101, 118, 0.25); }

/* ===== Lisibilité (pensée pour les lecteurs TDAH) ===== */
/* Repère visuel (icône) devant chaque intertitre de contenu */
.article h2.h2-avec-ico, .bloc-texte h2.h2-avec-ico {
  display: flex; align-items: center; gap: 0.4em;
}
.h2-ico {
  flex: 0 0 auto; width: 1.35em; height: 1.35em; border-radius: 0.3em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-clair); color: var(--teal);  /* neutre : bleu roi */
}
.h2-ico svg { width: 0.74em; height: 0.74em; }
/* Couleur de l'icône selon la dimension de la page (comme les pétales du logo) */
.cat-bio .h2-ico { background: #f9edcb; color: #96670a; }  /* biologiques : doré assombri */
.cat-cog .h2-ico { background: #e2f1f8; color: #1f6379; }  /* cognitives : bleu   */
.cat-psy .h2-ico { background: #f9e7ec; color: #9e3f58; }  /* psychologiques : rose */
/* Texte de lecture plus contrasté et sections mieux séparées */
.article p, .article li, .bloc-texte p, .bloc-texte li { color: var(--texte); }
.article h2 { margin-top: 52px; }

/* ---------- Cartes ressources (hub) ---------- */
.categorie { margin-bottom: 56px; }
.categorie > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.categorie-intro { text-align: left; max-width: 720px; margin-bottom: 28px; }

.carte-ressource {
  display: flex; flex-direction: column;
  background: var(--blanc);
  padding: 30px 28px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border: 1px solid rgba(13, 88, 118, 0.07);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-ressource:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.carte-ressource .etiquette {
  align-self: flex-start;
  background: var(--teal-clair); color: var(--teal-fonce);
  padding: 6px 16px; border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px;
}
.carte-ressource h3 { margin-bottom: 8px; }
.carte-ressource p { flex-grow: 1; margin-bottom: 16px; }
.carte-ressource .lire { font-family: "Source Sans 3", sans-serif; font-weight: 600; color: var(--teal); }
.carte-ressource:hover .lire { color: #8a6320; }

/* Étiquettes en triade (couleurs du logo) */
.grille .carte-ressource:nth-child(3n+1) .etiquette { background: var(--teal-clair); color: var(--teal-fonce); }
.grille .carte-ressource:nth-child(3n+2) .etiquette { background: var(--rose-clair); color: var(--rose-fonce); }
.grille .carte-ressource:nth-child(3n+3) .etiquette { background: var(--or-clair); color: var(--or-fonce); }

/* ---------- Citation ---------- */
.citation { text-align: center; max-width: 800px; margin: 0 auto; }
.citation blockquote {
  font-family: "Source Sans 3", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600; color: var(--teal-fonce); line-height: 1.4; font-style: italic;
}
.citation cite { display: block; margin-top: 20px; font-style: normal; font-weight: 600; color: var(--texte-doux); font-family: "Source Sans 3", sans-serif; }

/* Citation à l'intérieur d'un article (auteur, ouvrage) */
.article blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 4px solid var(--teal, #2c7d8d);
  font-family: "Source Sans 3", sans-serif; font-size: 1.2rem; font-style: italic;
  color: var(--teal-fonce, #1f5a66); line-height: 1.5;
}
.article blockquote cite {
  display: block; margin-top: 12px; font-size: 0.95rem;
  font-style: normal; font-weight: 600; color: var(--texte-doux, #5b6770);
}
.article blockquote cite a { color: inherit; }

/* Glossaire (liste de définitions) */
.glossaire { margin: 28px 0; }
.glossaire dt {
  font-family: "Source Sans 3", sans-serif; font-weight: 600;
  font-size: 1.12rem; color: var(--teal-fonce, #1f5a66);
  margin-top: 22px; scroll-margin-top: 90px;
}
.glossaire dd { margin: 6px 0 0; padding: 0; color: var(--texte, #2a2a2a); }
.glossaire dd + dt { border-top: 1px solid #eee; padding-top: 20px; }

/* Date de mise à jour dans la signature de l'auteure */
.signature-auteure .date-maj {
  display: block; margin-top: 6px;
  font-size: 0.9rem; font-style: italic; color: var(--texte-doux, #5b6770);
}

/* ---------- Bloc texte ---------- */
.bloc-texte { max-width: 760px; margin: 0 auto; }
.bloc-texte h2 { margin: 36px 0 14px; }
.bloc-texte h3 { margin: 28px 0 10px; color: var(--texte); }
.bloc-texte ul { margin: 0 0 1rem 1.3rem; color: var(--texte-doux); }
.bloc-texte li { margin-bottom: 8px; }

/* ---------- En-tête de page ---------- */
.page-entete {
  text-align: center;
  padding: clamp(58px, 7vw, 92px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(circle at 25% 0%, rgba(242, 184, 60, 0.26), transparent 52%),
    radial-gradient(circle at 80% 18%, rgba(235, 157, 177, 0.22), transparent 50%),
    linear-gradient(160deg, #0a4258 0%, #0d5876 55%, #21719a 100%);
}
.page-entete h1 { color: var(--blanc); }
.page-entete p { color: rgba(255, 255, 255, 0.90); }
.page-entete strong, .page-entete b { color: #f6d488; }
.page-entete a { color: #f2c25e; text-decoration-color: rgba(242, 194, 94, 0.6); }
.page-entete a:hover { color: #ffd98a; }
.page-entete .btn-clair { color: var(--blanc); border-color: rgba(255, 255, 255, 0.55); }
.page-entete .btn-clair:hover { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.page-entete p { max-width: 620px; margin: 14px auto 0; font-size: 1.12rem; color: rgba(255, 255, 255, 0.92); }

/* ---------- Encadré urgence ---------- */
.encadre-urgence {
  background: linear-gradient(135deg, #fdeeec, #fbe2df);
  border: 2px solid var(--alerte);
  border-radius: var(--rayon);
  padding: 32px; margin: 30px 0;
}
.encadre-urgence h3 { color: #c14a40; margin-bottom: 12px; }
.encadre-urgence ul { list-style: none; margin: 0; }
.encadre-urgence li { margin-bottom: 12px; color: var(--texte); }
.encadre-urgence strong { color: var(--teal-fonce); }
.numero { font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 1.2rem; color: #b04a3f; }

/* ---------- Composants d'article ---------- */
.fil-ariane { font-size: 0.9rem; margin-bottom: 18px; color: var(--texte-doux); font-family: "Source Sans 3", sans-serif; }
.fil-ariane a { font-weight: 600; }

.article { max-width: 760px; margin: 0 auto; }
.article .etiquette {
  display: inline-block; background: var(--teal-clair); color: var(--teal-fonce);
  padding: 6px 16px; border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px;
}
/* Étiquettes des cartes teintées à la famille de la page */
.cat-bio .article .etiquette { background: var(--or-clair); color: var(--or-fonce); }
.cat-cog .article .etiquette { background: var(--teal-clair); color: var(--teal-fonce); }
.cat-psy .article .etiquette { background: var(--rose-clair); color: var(--rose-fonce); }
.article .chapo { font-size: 1.22rem; color: var(--texte); margin-bottom: 12px; font-weight: 600; }
.article h2 { margin: 40px 0 14px; }
.article h3 { margin: 26px 0 8px; color: var(--texte); }
.article ul, .article ol { margin: 0 0 1rem 1.3rem; color: var(--texte-doux); }
.article li { margin-bottom: 8px; }

.exercice {
  background: var(--teal-clair);
  border-left: 5px solid var(--teal);
  border-radius: 18px; padding: 26px 30px; margin: 28px 0;
}
.exercice h3 { margin: 0 0 10px; color: var(--teal-fonce); }
.exercice h2 { font-size: 1.3rem; font-weight: 500; margin: 0 0 10px; color: var(--teal-fonce); } /* même rendu que .exercice h3 : permet un h2 sans saut de titres (références) */
.exercice p:last-child, .exercice ul:last-child, .exercice ol:last-child { margin-bottom: 0; }

.a-retenir {
  background: linear-gradient(135deg, var(--or-clair), #f8e8c8);
  border: 1px solid rgba(230, 178, 90, 0.5);
  border-radius: var(--rayon); padding: 26px 30px; margin: 30px 0;
}
.a-retenir h3 { color: var(--or-fonce); margin: 0 0 10px; }
.a-retenir ul { margin-bottom: 0; color: var(--texte); }

.avertissement {
  font-size: 0.92rem; color: var(--texte-doux);
  background: var(--teal-clair);
  border: 1px dashed rgba(13, 88, 118, 0.3);
  border-radius: 18px; padding: 16px 20px; margin-top: 36px;
}

.signature-auteure {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(13, 88, 118, 0.14);
  font-size: 0.9rem; color: var(--texte-doux);
}
.signature-auteure img { width: 40px; height: 40px; flex: none; }
.signature-auteure svg { width: 32px; height: 32px; flex: none; }
.signature-auteure p { margin: 0; }
.signature-auteure a { white-space: nowrap; }

.nav-articles {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(13, 88, 118, 0.14);
}

/* Vidéos responsives (16:9) */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin: 28px 0;
}
.video-embed iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}

/* Lecteur podcast (Acast) */
.podcast-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin: 28px 0;
}

/* ---------- Lecteur Radio Odyssey ---------- */
.radio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
}
.radio-player iframe { max-width: 100%; }

/* ---------- Formulaire ---------- */
.formulaire { max-width: 600px; margin: 0 auto; }
.champ { margin-bottom: 20px; }
.champ label { display: block; font-family: "Source Sans 3", sans-serif; font-weight: 600; margin-bottom: 6px; color: var(--texte); }
.champ input, .champ textarea {
  width: 100%; padding: 15px 18px;
  border: 2px solid rgba(13, 88, 118, 0.18); border-radius: 16px;
  font-family: inherit; font-size: 1rem; background: var(--blanc); color: var(--texte);
  transition: border-color var(--transition);
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--teal); }
.champ textarea { resize: vertical; min-height: 140px; }
.contact-direct { text-align: center; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(13, 88, 118, 0.14); }

/* ---------- Appel à l'action ---------- */
.cta-final { text-align: center; }
.cta-final .carte {
  max-width: 740px; margin: 0 auto;
  background: linear-gradient(135deg, var(--teal-fonce), var(--teal));
  border: none; color: var(--blanc);
}
.cta-final h2 { color: var(--blanc); }
.cta-final p { color: rgba(255, 255, 255, 0.92); }
.cta-final .btn { background: var(--bouton-grad); color: var(--bouton-texte); border-color: transparent; box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.cta-final .btn:hover { background: var(--bouton-grad-hover); border-color: transparent; color: var(--bouton-texte); }

/* ---------- Pied de page (sommet ondulé) ---------- */
.pied {
  position: relative;
  padding: clamp(80px, 9vw, 110px) 0 30px;
  background: #143d50;
  color: rgba(255, 255, 255, 0.8);
}
.pied::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--vague-h);
  transform: translateY(calc(-1 * var(--vague-h) + 1px));
  background-color: inherit;
  -webkit-mask: url("/assets/vague.svg") no-repeat top center;
  mask: url("/assets/vague.svg") no-repeat top center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  pointer-events: none;
}
.pied .contenu { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.pied p { color: inherit; } /* sans quoi la règle générale p (gris doux) rend l'avertissement du pied illisible (2,35:1) */
.pied a { color: rgba(255, 255, 255, 0.85); }
.pied a:hover { color: var(--or); }
.pied h2, .pied h4 { font-family: "Source Sans 3", sans-serif; font-size: 1.05rem; color: var(--blanc); margin-bottom: 12px; font-weight: 600; }
.pied ul { list-style: none; }
.pied li { margin-bottom: 8px; }
.pied .pied-bas {
  text-align: center; margin-top: 38px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.9rem;
}
.pied-marque { max-width: 290px; text-align: center; }
.pied-logo { width: 96px; height: auto; display: block; margin: 0 auto 16px; }
.pied-marque p { color: rgba(255, 255, 255, 0.72); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grille-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  :root { --vague-h: 36px; }
  .nav-liens {
    position: fixed; top: 64px; right: 0; flex-direction: column;
    background: var(--teal-clair); width: min(78vw, 280px); height: calc(100vh - 64px);
    padding: 24px; gap: 6px; align-items: flex-start;
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    transform: translateX(110%); transition: transform var(--transition);
  }
  .nav-liens.ouvert { transform: translateX(0); }
  .nav-liens a { display: block; width: 100%; }
  .burger { display: block; }
  .grille-3, .grille-2 { grid-template-columns: 1fr; }
  .pied .contenu { flex-direction: column; gap: 24px; }
}

/* ---------- Lettre d'information ---------- */
.infolettre { max-width: 640px; text-align: center; }
.infolettre h2 { margin-bottom: 10px; }
.infolettre > p { color: var(--texte-doux); margin-bottom: 24px; }
.form-infolettre { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.form-infolettre input {
  flex: 1 1 260px; padding: 15px 18px;
  border: 2px solid rgba(13, 88, 118, 0.18); border-radius: 16px;
  font-family: inherit; font-size: 1rem; background: var(--blanc); color: var(--texte);
  transition: border-color var(--transition);
}
.form-infolettre input:focus { outline: none; border-color: var(--teal); }
.infolettre-message { font-weight: 600; color: var(--teal-fonce); margin-top: 14px; }
.infolettre-message:empty { display: none; }
.infolettre-note { font-size: 0.9rem; color: var(--texte-doux); margin-top: 14px; margin-bottom: 0; }

/* ---------- Accessibilité ---------- */
/* Lien d'évitement : invisible, sauf quand on navigue au clavier (touche Tab) */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal-fonce); color: var(--blanc);
  padding: 12px 24px; border-radius: 0 0 16px 0;
  font-family: "Source Sans 3", sans-serif; font-weight: 600;
}
.evitement:focus { left: 0; }

/* Contour bien visible pour la navigation au clavier */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px;
}

/* Petite note rassurante sous un bouton d'action */
.note-cta { margin-top: 14px; font-size: 0.95rem; color: var(--texte); }

/* Temps de lecture affiché en haut des fiches */
.temps-lecture {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: "Source Sans 3", sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--texte-doux);
}

/* ---------- Notes et références scientifiques ---------- */
/* Appel de note dans le texte : petit numéro cliquable */
sup.appel-note { line-height: 0; scroll-margin-top: 90px; }
sup.appel-note a {
  font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 0.78em;
  /* Grande zone tactile (confort mobile) sans décaler le texte : le
     rembourrage est compensé par des marges négatives équivalentes. */
  padding: 10px; margin: -10px -6px; border-radius: 10px;
  position: relative; z-index: 1;
}
sup.appel-note a:hover, sup.appel-note a:focus-visible { background: var(--teal-clair); }

/* Bloc « Fondements scientifiques » en bas des fiches */
.fondements {
  border-top: 1px solid rgba(13, 88, 118, 0.14);
  margin-top: 36px; padding-top: 18px;
}
.fondements h2 { font-size: 1.15rem; margin: 0 0 8px; }
.fondements p { font-size: 0.95rem; color: var(--texte-doux); margin: 0; }

/* Liste des références sur la page Références scientifiques */
.ref-liste { list-style: none; margin: 0 0 1.4rem 0 !important; }
.ref-liste li {
  margin-bottom: 16px; padding: 10px 14px; border-radius: 14px;
  color: var(--texte); scroll-margin-top: 90px;
}
.ref-liste li:target { background: var(--or-clair); outline: 2px solid var(--or); }
.ref-cite { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--texte-doux); }

/* Pas-à-pas « Premiers pas » : pastilles d'étapes numérotées, reliées
   par un trait vertical qui marque la progression (style « suivi d'étapes »).
   S'utilise dans les encadrés .exercice. */
ol.pas-a-pas { list-style: none; margin: 0 0 1rem 0 !important; counter-reset: etape; }
ol.pas-a-pas li {
  counter-increment: etape;
  position: relative; padding-left: 44px; min-height: 30px;
  margin-bottom: 16px; color: var(--texte);
}
ol.pas-a-pas li:last-child { margin-bottom: 0; }
ol.pas-a-pas li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; box-sizing: border-box;
  border-radius: 50%;
  background: var(--blanc); color: var(--teal-fonce);
  border: 2px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 0.9rem;
  line-height: 1;
}
/* Le trait qui relie chaque étape à la suivante */
ol.pas-a-pas li:not(:last-child)::after {
  content: ""; position: absolute;
  left: 14px; top: 34px; bottom: -12px; width: 2px;
  background: rgba(13, 88, 118, 0.3);
}
.exercice ol.pas-a-pas:last-child { margin-bottom: 0 !important; }

/* Chiffres clés : grands nombres issus des études référencées,
   chacun avec son appel de note vers la base documentaire.
   Teinte selon la famille de la page (doré, bleu, rose). */
.chiffres-cles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 24px 0; text-align: center;
}
.chiffres-cles > div { border-radius: 18px; padding: 16px 14px; background: var(--teal-clair); }
.chiffres-cles .chiffre {
  display: block; font-family: "Source Sans 3", sans-serif; font-weight: 700;
  font-size: 1.9rem; line-height: 1.15; color: var(--teal-fonce);
}
.chiffres-cles p { margin: 4px 0 0; font-size: 0.95rem; color: var(--teal-fonce); }
.cat-bio .chiffres-cles > div { background: #f9edcb; }
.cat-bio .chiffres-cles .chiffre, .cat-bio .chiffres-cles p { color: #8a6320; }
.cat-cog .chiffres-cles > div { background: #e2f1f8; }
.cat-cog .chiffres-cles .chiffre, .cat-cog .chiffres-cles p { color: #1f6379; }
.cat-psy .chiffres-cles > div { background: var(--rose-clair); }
.cat-psy .chiffres-cles .chiffre, .cat-psy .chiffres-cles p { color: var(--rose-fonce); }

/* Vrai / faux : une idée reçue corrigée par ce que dit la science */
.vrai-faux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.vrai-faux > div { border-radius: 18px; padding: 18px 20px; }
.vrai-faux h3 {
  margin: 0 0 8px !important; font-size: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.vrai-faux p { margin: 0; }
.vrai-faux .idee-recue { background: var(--rose-clair); }
.vrai-faux .idee-recue h3, .vrai-faux .idee-recue p { color: var(--rose-fonce); }
.vrai-faux .realite { background: var(--teal-clair); }
.vrai-faux .realite h3, .vrai-faux .realite p { color: var(--teal-fonce); }
@media (max-width: 720px) {
  .vrai-faux { grid-template-columns: 1fr; }
}

/* Résumé express en tête de fiche : l'essentiel en 30 secondes.
   Liseré en haut aux couleurs de la famille (comme les cartes de l'accueil) :
   doré = corps, bleu = mental, rose = liens, tricolore = pages générales. */
.essentiel {
  position: relative; overflow: hidden;
  background: var(--blanc);
  border: 1px solid rgba(13, 88, 118, 0.14);
  border-radius: var(--rayon);
  padding: 26px 26px 22px;
  margin: 26px 0 8px;
}
.essentiel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #6fbdd8, #f2b83c, #eb9db1);
}
.cat-bio .essentiel::before { background: linear-gradient(90deg, #e0ab3d, #f4e5c2); }
.cat-cog .essentiel::before { background: linear-gradient(90deg, #78afc4, #e2f1f8); }
.cat-psy .essentiel::before { background: linear-gradient(90deg, #d494a4, #f3dfe5); }
.essentiel h2 { font-size: 1.15rem; margin: 0 0 12px; }
.essentiel ul { list-style: none; margin: 0 !important; }
.essentiel li { position: relative; padding-left: 32px; margin-bottom: 8px; color: var(--texte); }
.essentiel li:last-child { margin-bottom: 0; }
.essentiel li .ico { position: absolute; left: 0; top: 0.3em; margin-right: 0; }

/* Cartouche de référence (citation académique) en fin de page */
.cartouche-ref {
  margin-top: 30px; padding: 22px 26px;
  background: var(--fond-creme);
  border: 1px solid rgba(13, 88, 118, 0.14);
  border-radius: 18px;
  font-size: 0.95rem;
}
.cartouche-ref h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--texte); }
.cartouche-ref p { margin-bottom: 10px; color: var(--texte); }
.cartouche-ref blockquote {
  margin: 10px 0; padding: 12px 16px;
  border-left: 3px solid var(--teal);
  background: var(--blanc); border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; font-style: normal;
  color: var(--texte); line-height: 1.6;
  overflow-wrap: break-word;
}
.cartouche-ref .cartouche-note { font-size: 0.9rem; color: var(--texte-doux); margin-bottom: 0; }

/* ---------- Médias ajoutés depuis la console ---------- */
figure.media-img { margin: 28px 0; }
figure.media-img img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
figure.media-img figcaption,
figure.media-embed figcaption {
  font-size: 0.92rem; color: var(--texte-doux);
  text-align: center; margin-top: 8px;
}
figure.media-embed { margin: 28px 0; }
video.media-video {
  width: 100%; height: auto; display: block;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}

/* ===== Tableau de niveau de preuve + jauge (composant commun des fiches) ===== */
.tableau-scroll{overflow-x:auto;margin:1.4rem 0}
.fiche-tableau{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;background:#fff;border:1px solid #dfe7ec;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(40,60,80,.07)}
.fiche-tableau caption{caption-side:top;text-align:left;font-weight:600;margin-bottom:.7rem;font-size:1.05rem}
.fiche-tableau th,.fiche-tableau td{border:0;border-bottom:1px solid #edf1f4;padding:.75rem .9rem;text-align:left;vertical-align:middle}
.fiche-tableau thead th{background:#eaf4f8;color:#28536b;font-size:.875rem;text-transform:uppercase;letter-spacing:.03em}
.fiche-tableau tbody tr:nth-child(even){background:#f6fafc}
.fiche-tableau tbody tr:last-child th,.fiche-tableau tbody tr:last-child td{border-bottom:0}
.fiche-tableau tbody th{font-weight:600;background:transparent}
.fiche-tableau td:last-child,.fiche-tableau thead th:last-child{text-align:center}
/* Déclinaison aux couleurs de la famille (classe posée sur body par main.js) */
.cat-bio .fiche-tableau{border-color:#ecdfc4;box-shadow:0 2px 10px rgba(140,110,50,.08)}
.cat-bio .fiche-tableau thead th{background:#faf1de;color:#6b4e13}
.cat-bio .fiche-tableau tbody tr:nth-child(even){background:#fbf7ee}
.cat-bio .fiche-tableau th,.cat-bio .fiche-tableau td{border-bottom-color:#f0e8d5}
.cat-cog .fiche-tableau{border-color:#c9dfe8;box-shadow:0 2px 10px rgba(40,100,120,.08)}
.cat-cog .fiche-tableau thead th{background:#e2f1f8;color:#1f6379}
.cat-cog .fiche-tableau tbody tr:nth-child(even){background:#eef5f8}
.cat-cog .fiche-tableau th,.cat-cog .fiche-tableau td{border-bottom-color:#e1eff4}
.cat-psy .fiche-tableau{border-color:#ecd3da;box-shadow:0 2px 10px rgba(150,60,90,.08)}
.cat-psy .fiche-tableau thead th{background:#f9e7ec;color:#9e3f58}
.cat-psy .fiche-tableau tbody tr:nth-child(even){background:#faf1f3}
.cat-psy .fiche-tableau th,.cat-psy .fiche-tableau td{border-bottom-color:#f5e3ea}
/* Jauge de preuve : couleurs fixes sur tout le site (gris = à confirmer, doré = moyen, vert = solide) */
.jauge{display:inline-flex;align-items:flex-end;gap:3px;height:18px;line-height:0;vertical-align:middle;margin-right:.15rem}
.jauge span{display:inline-block;width:6px;border-radius:2px;background:#e1e6ec}
.jauge span:nth-child(1){height:8px}
.jauge span:nth-child(2){height:13px}
.jauge span:nth-child(3){height:18px}
.jauge-piste span:nth-child(1){background:#7c8794}
.jauge-moyen span:nth-child(1),.jauge-moyen span:nth-child(2){background:#b07a1f}
.jauge-solide span{background:#1c7c4d}
.legende-jauge{margin:.7rem .2rem 0;font-size:.875rem;color:#4c5560}
@media (max-width:520px){.fiche-tableau{font-size:.94rem}.fiche-tableau th,.fiche-tableau td{padding:.55rem .6rem}}


/* ===== Bandeau des fiches, teinté par famille (charte 10/07/2026) ===== */
.entete-fiche { text-align: left; padding: clamp(46px, 6vw, 70px) 0 clamp(44px, 6vw, 62px); }
.entete-fiche h1, .entete-fiche .chapo { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.entete-fiche h1 { color: var(--blanc); }
.entete-fiche h1::after {
  content: ""; display: block; width: 96px; height: 6px; border-radius: 6px;
  margin-top: 16px;
  background: linear-gradient(90deg, #f2b83c, #6fbdd8, #eb9db1);
}
.entete-fiche .chapo { color: rgba(255, 255, 255, 0.92); max-width: 780px; margin-left: 0; margin-right: auto; }
.entete-fiche .fil-ariane, .entete-fiche .fil-ariane a { color: rgba(255, 255, 255, 0.85); }
.entete-fiche .fil-ariane a:hover { color: #ffd98a; }
.entete-fiche .etiquette { background: rgba(255, 255, 255, 0.18); color: var(--blanc); }
.entete-fiche .temps-lecture { color: rgba(255, 255, 255, 0.75); }
/* Appartenance : le bandeau prend la couleur de la dimension */
body.cat-bio .entete-fiche {
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 226, 138, 0.45), transparent 48%),
    radial-gradient(circle at 10% 95%, rgba(255, 244, 214, 0.22), transparent 45%),
    linear-gradient(160deg, #7c5a12 0%, #96701a 50%, #a1751b 100%);
}
body.cat-cog .entete-fiche {
  background:
    radial-gradient(circle at 80% 10%, rgba(111, 189, 216, 0.30), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(242, 184, 60, 0.14), transparent 45%),
    linear-gradient(160deg, #0a4258 0%, #0d5876 55%, #2e83a6 100%);
}
body.cat-psy .entete-fiche {
  background:
    radial-gradient(circle at 80% 10%, rgba(235, 157, 177, 0.30), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(242, 184, 60, 0.14), transparent 45%),
    linear-gradient(160deg, #6d3345 0%, #8e4359 55%, #a85a6d 100%);
}


/* ===== Lot 2 de l'audit : étiquettes de famille en ton plein dans les bandeaux ===== */
.entete-fiche .etiquette { background: var(--blanc); color: var(--teal-fonce); }
body.cat-bio .entete-fiche .etiquette { background: #f2b83c; color: #3a2c08; }
body.cat-cog .entete-fiche .etiquette { background: #7fb8d0; color: #062f40; } /* pétrole clair (26/07/2026, pilote validé) : la pastille du mental n'est plus un ciel étranger mais une nuance claire de la famille ; le trait tricolore garde #6fbdd8 */
body.cat-psy .entete-fiche .etiquette { background: #eb9db1; color: #4a1526; }

/* ===== Lot 2 : états formalisés (survol, focus, actif, désactivé) ===== */
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }
.entete-fiche :focus-visible, .page-entete :focus-visible, .hero :focus-visible, .pied :focus-visible { outline-color: #f6d488; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none;
  box-shadow: none; pointer-events: none;
}
main a:not(.btn):not(.carte):not(.carte-ressource):hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Lot 3 : filigrane de la dimension dans les bandeaux de fiche ===== */
.entete-fiche { position: relative; overflow: hidden; }
.entete-fiche .contenu { position: relative; z-index: 1; }
.entete-fiche::after {
  content: ""; position: absolute; right: -50px; top: 50%;
  width: 360px; height: 360px; transform: translateY(-50%) rotate(-8deg);
  opacity: 0.13; pointer-events: none;
  background: no-repeat center / contain;
}
body.cat-bio .entete-fiche::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 11 11 5 19 5c0 8-6 14-14 14z'/%3E%3Cpath d='M9.5 14.5c1.8-2.6 4.3-4.4 7-5.4'/%3E%3C/svg%3E");
}
body.cat-cog .entete-fiche::after {
  /* Les rouages du cerveau (remplace l'ampoule, demande d'Elisabeth du 14/07/2026) :
     deux engrenages encastrés, un grand en bas à gauche et un petit en haut à droite,
     la dent du petit venant s'insérer entre deux dents du grand. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.8' cy='14' r='3'/%3E%3Cpath d='M13.57 12.99l1.25-.34'/%3E%3Cpath d='M10.81 10.23l.34-1.25'/%3E%3Cpath d='M7.04 11.24l-.92-.92'/%3E%3Cpath d='M6.03 15.01l-1.25.34'/%3E%3Cpath d='M8.79 17.77l-.34 1.25'/%3E%3Cpath d='M12.56 16.76l.92.92'/%3E%3Ccircle cx='16.2' cy='8.4' r='2'/%3E%3Cpath d='M14.29 10.31l-.78.78'/%3E%3Cpath d='M16.9 11.01l.28 1.06'/%3E%3Cpath d='M18.81 9.1l1.06.28'/%3E%3Cpath d='M18.11 6.49l.78-.78'/%3E%3Cpath d='M15.5 5.79l-.28-1.06'/%3E%3Cpath d='M13.59 7.7l-1.06-.28'/%3E%3C/svg%3E");
}
body.cat-psy .entete-fiche::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5C12 20.5 4 15.8 4 9.8 4 7.2 6 5.3 8.4 5.3c1.6 0 2.8.8 3.6 2 .8-1.2 2-2 3.6-2C18 5.3 20 7.2 20 9.8c0 6-8 10.7-8 10.7z'/%3E%3C/svg%3E");
}
@media (max-width: 720px){ .entete-fiche::after { width: 220px; height: 220px; right: -70px; } }

/* ===== Bandeau des pages formation (pilote PSSM, 13/07/2026 ; ardoise le 14/07/2026) =====
   Même bandeau que les fiches, avec :
   - un fond ARDOISE (gris-bleu profond) propre aux formations : sérieux et professionnel,
     distinct de toutes les autres couleurs du site. L'ancien vert profond a été cédé à la
     marque Beau Bien-Bon® (charte BBB #2E4A43, choix d'Elisabeth du 14/07/2026) ;
     même construction que les autres : dégradé 160° + halos doré et ciel ;
   - un bouton d'action doré (charte « CTA doré sur le héros »), lisible en mode jour et nuit
     car le fond du bandeau reste foncé dans les deux modes ;
   - un filigrane « deux personnes » (l'entraide, trait blanc 1px comme feuille/rouages/cœur). */
.entete-formation {
  background:
    radial-gradient(circle at 80% 10%, rgba(242, 184, 60, 0.16), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(111, 189, 216, 0.14), transparent 45%),
    linear-gradient(160deg, #2b3644 0%, #3c4a5c 55%, #52657c 100%);
}
.entete-fiche .actions-entete { max-width: none; margin: 28px 0 0; }
.entete-fiche .btn:not(.btn-clair) {
  background: linear-gradient(135deg, #f2b83c 0%, #e3a733 100%);
  color: #3a2c08; border-color: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.entete-fiche .btn:not(.btn-clair):hover {
  background: linear-gradient(135deg, #eeb02c 0%, #d99c24 100%);
  color: #3a2c08;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.entete-formation::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* ===== Bandeau des pages de modèles publiés (pilote PERMA, 13/07/2026) =====
   Violet profond : la sagesse, le savoir publié (PERMA de Seligman, et les modèles à venir ;
   le flow reste une fiche cognitive bleue). Même construction que les familles :
   dégradé 160° + halos rose et doré ; filigrane « livre ouvert » (trait blanc 1 px). */
.entete-modele {
  background:
    radial-gradient(circle at 80% 10%, rgba(235, 157, 177, 0.20), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(242, 184, 60, 0.14), transparent 45%),
    linear-gradient(160deg, #3f2d5f 0%, #533f7a 55%, #6f5d99 100%);
}
.entete-modele::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

/* ===== Bandeau des fiches questions (terre cuite, choix d'Elisabeth du 17/07/2026 ; pilote buts-de-vie) =====
   Terre cuite : la chaleur de la conversation, la question que l'on pose.
   Même construction que les familles : dégradé 160° + halos doré et ciel ;
   filigrane « point d'interrogation dans un cercle » (trait blanc 1 px).
   Contraste vérifié : blanc sur #a35a3d (le point le plus clair du dégradé) = 5,1:1. */
.entete-question {
  background:
    radial-gradient(circle at 80% 10%, rgba(242, 184, 60, 0.18), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(111, 189, 216, 0.10), transparent 45%),
    linear-gradient(160deg, #6e3120 0%, #8a422c 55%, #a35a3d 100%);
}
.entete-question::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* ===== Lot 3 : apparition douce au défilement (activée par main.js, jamais sans lui) ===== */
@media (prefers-reduced-motion: no-preference) {
  .pret-a-apparaitre { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .pret-a-apparaitre.apparu { opacity: 1; transform: none; }
}


/* ===== Lot 4 de l'audit : mode sombre (11/07/2026) =====
   Le site s'ouvre TOUJOURS en mode jour (choix d'Elisabeth du 11/07/2026).
   Le mode sombre ne s'applique que si le visiteur clique sur la lune du menu :
   main.js pose alors data-theme="sombre" sur <html> (choix memorise en localStorage). */
html { color-scheme: light; }

/* Choix explicite du visiteur : mode sombre */
html[data-theme="sombre"] { --teal: #7fb8d0; --teal-fonce: #a9d3e5; --teal-clair: #1b3441; --or: #e0b25c; --or-fonce: #e2b568; --or-clair: #2a2312; --rose: #d998a7; --rose-fonce: #df9cae; --rose-clair: #2e1e24; --texte: #e4e1d8; --texte-doux: #aeb1ab; --fond: #0f1c25; --fond-creme: #142330; --ombre: 0 14px 40px rgba(0, 0, 0, 0.35); --ombre-forte: 0 22px 54px rgba(0, 0, 0, 0.45); color-scheme: dark; }
html[data-theme="sombre"] .section-blanc { background: #16262f; }
html[data-theme="sombre"] .carte, html[data-theme="sombre"] .carte-ressource, html[data-theme="sombre"] .essentiel, html[data-theme="sombre"] .exercice, html[data-theme="sombre"] .a-retenir, html[data-theme="sombre"] .fondements, html[data-theme="sombre"] .vrai-faux .idee-recue, html[data-theme="sombre"] .vrai-faux .realite, html[data-theme="sombre"] .cartouche-ref blockquote, html[data-theme="sombre"] input, html[data-theme="sombre"] textarea, html[data-theme="sombre"] select { background: #1a2b36; border-color: rgba(255, 255, 255, 0.10); }
html[data-theme="sombre"] .fiche-tableau { background: #1a2b36; border-color: #2c3f4b; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
html[data-theme="sombre"] .entete { background: rgba(15, 28, 37, 0.88); border-bottom-color: rgba(127, 184, 208, 0.15); }
html[data-theme="sombre"] .btn-clair { border-color: rgba(127, 184, 208, 0.45); }
html[data-theme="sombre"] .btn-clair:hover { background: rgba(127, 184, 208, 0.12); }
html[data-theme="sombre"] .cat-bio h2 { color: #e2b563; }
html[data-theme="sombre"] .cat-cog h2 { color: #8ec7db; }
html[data-theme="sombre"] .cat-bio .h2-ico { background: #2a2312; color: #e2b563; }
html[data-theme="sombre"] .cat-cog .h2-ico { background: #12303d; color: #8ec7db; }
html[data-theme="sombre"] .cat-psy .h2-ico { background: #2e1e24; color: #df9cae; }
html[data-theme="sombre"] .cat-psy .article .etiquette { background: #2e1e24; color: #e5aebd; }
html[data-theme="sombre"] .cat-bio .chiffres-cles > div { background: #2a2312; }
html[data-theme="sombre"] .cat-bio .chiffres-cles .chiffre, html[data-theme="sombre"] .cat-bio .chiffres-cles p { color: #e2b563; }
html[data-theme="sombre"] .cat-cog .chiffres-cles > div { background: #12303d; }
html[data-theme="sombre"] .cat-cog .chiffres-cles .chiffre, html[data-theme="sombre"] .cat-cog .chiffres-cles p { color: #9fd0e2; }
html[data-theme="sombre"] .cat-psy .chiffres-cles > div { background: #2e1e24; }
html[data-theme="sombre"] .cat-psy .chiffres-cles .chiffre, html[data-theme="sombre"] .cat-psy .chiffres-cles p { color: #e5aebd; }
html[data-theme="sombre"] .grille-3 .carte.dim-bio .icone, html[data-theme="sombre"] .dim-bio .puce { background: #2a2312; }
html[data-theme="sombre"] .dim-bio .puce { color: #e2b563; }
html[data-theme="sombre"] .grille-3 .carte.dim-cog .icone, html[data-theme="sombre"] .dim-cog .puce { background: #12303d; }
html[data-theme="sombre"] .dim-cog .puce { color: #9fd0e2; }
html[data-theme="sombre"] .grille-3 .carte.dim-psy .icone, html[data-theme="sombre"] .dim-psy .puce { background: #2e1e24; }
html[data-theme="sombre"] .dim-psy .puce { color: #e5aebd; }
html[data-theme="sombre"] .fiche-tableau thead th { background: #12303d; color: #9fd0e2; }
html[data-theme="sombre"] .fiche-tableau th, html[data-theme="sombre"] .fiche-tableau td { border-bottom-color: #24343f; }
html[data-theme="sombre"] .fiche-tableau tbody tr:nth-child(even) { background: #17242e; }
html[data-theme="sombre"] .cat-bio .fiche-tableau { border-color: #3a331c; }
html[data-theme="sombre"] .cat-bio .fiche-tableau thead th { background: #2a2312; color: #e2b563; }
html[data-theme="sombre"] .cat-bio .fiche-tableau tbody tr:nth-child(even) { background: #201d12; }
html[data-theme="sombre"] .cat-bio .fiche-tableau th, html[data-theme="sombre"] .cat-bio .fiche-tableau td { border-bottom-color: #33301c; }
html[data-theme="sombre"] .cat-psy .fiche-tableau { border-color: #3d2a31; }
html[data-theme="sombre"] .cat-psy .fiche-tableau thead th { background: #2e1e24; color: #e5aebd; }
html[data-theme="sombre"] .cat-psy .fiche-tableau tbody tr:nth-child(even) { background: #221820; }
html[data-theme="sombre"] .cat-psy .fiche-tableau th, html[data-theme="sombre"] .cat-psy .fiche-tableau td { border-bottom-color: #362229; }
html[data-theme="sombre"] .jauge span { background: #3c4a55; }
html[data-theme="sombre"] .jauge-piste span:nth-child(1) { background: #93a1ad; }
html[data-theme="sombre"] .legende-jauge { color: var(--texte-doux); }
html[data-theme="sombre"] .logo-img { background: #ffffff; border-radius: 10px; padding: 5px; }
html[data-theme="sombre"] .logo .logo-jour { display: none; }
html[data-theme="sombre"] .logo .logo-nuit { display: block; }
html[data-theme="sombre"] .bascule-theme .ico-lune { display: none; }
html[data-theme="sombre"] .bascule-theme .ico-soleil { display: block; }

/* ===== Bouton jour/nuit dans le menu (injecté par main.js) ===== */
.nav { justify-content: flex-start; }
.logo { margin-right: auto; }
.bascule-theme {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 6px; flex: 0 0 auto;
  background: none; border: none; border-radius: 999px; cursor: pointer;
  color: var(--texte);
  transition: background var(--transition), color var(--transition);
}
.bascule-theme:hover { background: var(--teal-clair); color: var(--teal-fonce); }
.bascule-theme svg { width: 22px; height: 22px; display: block; }
.bascule-theme .ico-soleil { display: none; }

/* ===== Loupe de recherche dans le menu (injectée par main.js, pages FR) ===== */
.nav-recherche {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 6px; flex: 0 0 auto;
  border-radius: 999px; color: var(--texte);
  transition: background var(--transition), color var(--transition);
}
.nav-recherche:hover { background: var(--teal-clair); color: var(--teal-fonce); }
.nav-recherche svg { width: 22px; height: 22px; display: block; }

/* ===== Bouton FR/EN dans le menu (injecté par main.js, seulement si la page a sa traduction) ===== */
.bascule-langue {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 34px; padding: 0 12px; margin-left: 6px; flex: 0 0 auto;
  border: 1.5px solid rgba(13, 88, 118, 0.35); border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 0.875rem;
  color: var(--teal); letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bascule-langue:hover { background: var(--teal-clair); color: var(--teal-fonce); border-color: var(--teal); }
html[data-theme="sombre"] .bascule-langue { border-color: rgba(127, 184, 208, 0.45); }

/* ---------- Héros : bouton du questionnaire groupé avec sa note ---------- */
/* La note « 2 minutes, gratuit... » suit le bouton du questionnaire, y compris sur mobile
   où les boutons s'empilent (sinon elle tombait après « Explorer les ressources »). */
.cta-quest { display: flex; flex-direction: column; align-items: center; }
.cta-quest .note-cta { margin-top: 10px; max-width: 52ch; }
.hero .hero-actions { align-items: flex-start; }

/* ---------- Mode sombre : étiquette des bandeaux généraux (correctif 13/07/2026) ----------
   L'étiquette blanche des bandeaux (pages sans famille : PERMA, Formation...) utilisait
   var(--teal-fonce), qui devient bleu clair en mode sombre : texte illisible sur blanc.
   Le fond du bandeau reste foncé dans les deux modes, on fige donc les deux couleurs. */
.entete-fiche .etiquette { background: #ffffff; color: #093f56; }
/* Sur les pages formation, le texte de l'étiquette prend le vert profond du bandeau
   (même logique que les familles : l'étiquette confirme la couleur du fond). */
.entete-formation .etiquette { color: #232d38; }
/* Sur les pages de modèles publiés, le texte de l'étiquette prend le violet profond du bandeau. */
.entete-modele .etiquette { color: #2e2148; }
/* Sur les fiches questions, le texte de l'étiquette prend la terre cuite profonde du bandeau. */
.entete-question .etiquette { color: #5c2a18; }

/* ===== Filigranes des pages générales (14/07/2026) =====
   Le langage des filigranes se complète : feuille = corps, ampoule = mental, cœur = liens,
   deux personnes = formation, livre ouvert = modèle publié. Ici :
   - une boussole pour la page Comprendre (le « repère », vocabulaire du site) ;
   - un presse-papiers coché pour les pages questionnaires (faire le point).
   Même dispositif que les autres filigranes : trait blanc 1 px, opacité 0.13,
   lisible dans les deux modes car le fond du bandeau reste foncé. */
.entete-boussole, .entete-coches { position: relative; overflow: hidden; }
.entete-boussole .contenu, .entete-coches .contenu { position: relative; z-index: 1; }
.entete-boussole::after, .entete-coches::after {
  content: ""; position: absolute; right: -50px; top: 50%;
  width: 360px; height: 360px; transform: translateY(-50%) rotate(-8deg);
  opacity: 0.13; pointer-events: none;
  background: no-repeat center / contain;
}
.entete-boussole::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
}
.entete-coches::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
@media (max-width: 720px){ .entete-boussole::after, .entete-coches::after { width: 220px; height: 220px; right: -70px; } }

/* ===== Signature Beau Bien-Bon® (niveau 2 de la charte BBB, décision d'Elisabeth du 14/07/2026) =====
   Le symbole de la marque (● le monde, — un trait qui arrive, · l'alignement à soi,
   — un trait qui part, ● l'autre) devient un élément graphique des DEUX pages Beau Bien-Bon
   (fiche méthode et page ateliers), sans changer leur famille : bandeau toujours rose.
   - filigrane du bandeau : le symbole en blanc remplace le cœur sur ces pages seulement ;
   - séparateur de sections : le symbole en vert profond désaturé #2E4A43 (charte BBB),
     décliné aussi en trois repères sur les fiches des forces (●— Beau, · Bien, —● Bon),
     vert sauge clair #B7C5BD en mode sombre pour rester lisible sur fond foncé. */
body .entete-fiche.entete-bbb::after {
  /* « body » en tête pour égaler la spécificité des règles de famille (body.cat-psy ...)
     et l'emporter par ordre d'apparition : le symbole remplace le cœur sur ces pages. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='2.6' cy='12' r='1.1' fill='white' stroke='none'/%3E%3Cpath d='M4.6 12h5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='white' stroke='none'/%3E%3Cpath d='M14.4 12h5'/%3E%3Ccircle cx='21.4' cy='12' r='1.1' fill='white' stroke='none'/%3E%3C/svg%3E");
}
/* Filigrane Félicia (demande d'Elisabeth du 28/07/2026) : sur le chapeau vert de la
   page de la collection des contes, le portrait de Félicia (bords fondus dans le PNG)
   remplace le symbole BBB. Le préfixe « body » égale la spécificité de la règle
   entete-bbb ci-dessus et l'emporte par ordre d'apparition. */
body .entete-fiche.entete-contes::after {
  background-image: url("/assets/felicia-filigrane.webp");
  width: 300px; height: 450px; right: 30px;
  transform: translateY(-50%);
  opacity: 0.22;
}
@media (max-width: 720px){ body .entete-fiche.entete-contes::after { width: 200px; height: 300px; right: -30px; } }
.separateur-bbb { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 6px auto 26px; color: #2E4A43; }
/* Variante « signature » des trois fiches dimensions (molécule puis repère, plus grande,
   avec un espace généreux sous la carte « L'essentiel ») : */
.separateur-bbb.signature-bbb { gap: 18px; margin: 44px auto 30px; }
.separateur-bbb.signature-bbb svg { width: auto; height: 30px; }
.separateur-bbb.signature-bbb .molecule { width: 42px; height: 42px; font-size: 16px; }
.separateur-bbb svg { width: 150px; height: 24px; }
html[data-theme="sombre"] .separateur-bbb { color: #B7C5BD; }

/* ===== Bandeau vert Beau Bien-Bon (demande d'Elisabeth du 14/07/2026) =====
   Depuis le 28/07/2026 (décision d'Elisabeth) : le bandeau vert est porté par la
   page de la collection contes-pour-etre-avec.html UNIQUEMENT ; la page des
   ateliers Beau Bien-Bon est repassée en rose (sa famille, body cat-psy), avec
   le filigrane du symbole BBB (entete-bbb). Le vert profond désaturé de la charte
   de la marque (#2E4A43) s'accompagne de halos or doux et vert sauge (palette BBB).
   Le préfixe « body » égale la spécificité des règles de famille (body.cat-psy ...)
   pour l'emporter par ordre d'apparition. L'étiquette suit la logique des autres
   bandeaux : fond blanc, texte de la couleur profonde du fond. */
body .entete-fiche.entete-vert-bbb {
  background:
    radial-gradient(circle at 80% 10%, rgba(198, 163, 90, 0.22), transparent 46%),
    radial-gradient(circle at 15% 90%, rgba(183, 197, 189, 0.16), transparent 45%),
    linear-gradient(160deg, #24382f 0%, #2e4a43 55%, #3e5f55 100%);
}
body .entete-fiche.entete-vert-bbb .etiquette { background: #ffffff; color: #24382f; }

/* ===== Pastilles molécule du repère D.O.S.E.® (demande d'Elisabeth du 14/07/2026) =====
   Son code personnel : +. = D (dopamine), +:+ = O (ocytocine), +... = S (sérotonine),
   ...+ = E (endorphines). Rond « façon molécule » en vert profond désaturé (la couleur
   de la marque Beau Bien-Bon, dont le repère D.O.S.E.® fait partie), symbole en blanc.
   Le liseré blanc translucide détache la pastille des bandeaux colorés et disparaît
   sur fond clair. Posées sur dose.html (titres des molécules, deux sections) et dans
   le bandeau des trois fiches dimensions Beau/Bien/Bon. */
.molecule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: #2e4a43;
  color: #ffffff; font-weight: 700; font-size: 12.5px; letter-spacing: 0;
  vertical-align: middle; margin: 0 8px 0 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}
h3 .molecule { margin-left: 0; }
/* Dans les bandeaux : liseré plus net et un espace après le temps de lecture. */
.entete-fiche .molecule {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  margin-left: 16px;
}

/* ===== Panneau « Et maintenant ? » : les suites d'exploration =====
   Pilote sommeil (15/07/2026). Un panneau directionnel à 3 voies, une par famille
   de ressources (corps/mental/liens). Le contenu vient d'un fichier central
   (assets/suites.js), les fiches ne sont pas modifiées. Règles d'or : pas de
   pression, on peut ne rien choisir. Toutes les couleurs passent par les variables,
   donc le mode sombre s'adapte tout seul. */
.suites {
  margin: 44px 0 6px; padding: 26px 24px 30px;
  border-radius: var(--rayon);
  background: var(--fond-creme);
  border: 1px solid rgba(13, 88, 118, 0.10);
}
.suites-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.suites-poteau { width: 46px; height: 46px; flex: 0 0 auto; color: var(--teal); }
.suites-tete h2 { font-family: "Source Sans 3", sans-serif; color: var(--teal); font-size: 1.35rem; margin: 0; }
.suites-tete p { margin: 5px 0 0; color: var(--texte-doux); font-size: 0.95rem; max-width: 62ch; }
.suites-voies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.voie {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px; text-decoration: none;
  background: var(--blanc); color: var(--texte);
  border: 1px solid rgba(13, 88, 118, 0.10);
  border-left: 6px solid var(--accent);
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.voie:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--accent); }
.voie:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.voie-bio { --accent: var(--or);   --accent-fonce: var(--or-fonce);   --accent-clair: var(--or-clair); }
.voie-cog { --accent: var(--teal); --accent-fonce: var(--teal-fonce); --accent-clair: var(--teal-clair); }
.voie-psy { --accent: var(--rose); --accent-fonce: var(--rose-fonce); --accent-clair: var(--rose-clair); }

.voie-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-clair); color: var(--accent-fonce);
}
.voie-ico svg { width: 27px; height: 27px; }
.voie-corps { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.voie-cap {
  font-family: "Source Sans 3", sans-serif; font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.04em;
  color: var(--accent-fonce);
}
.voie-titre { font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--texte); }
.voie-accroche { font-size: 0.9rem; color: var(--texte-doux); line-height: 1.4; }
.voie-fleche { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent-fonce); transition: transform var(--transition); }
.voie:hover .voie-fleche { transform: translateX(4px); }

.suites-retour {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 6px 4px;
  font-family: "Source Sans 3", sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--texte-doux); text-decoration: none;
  transition: color var(--transition), gap var(--transition);
}
.suites-retour:hover { color: var(--teal); gap: 10px; }
.suites-retour-ico { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 760px) { .suites-voies { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .suites-retour:hover { gap: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .voie, .voie-fleche { transition: none; }
  .voie:hover { transform: none; }
  .voie:hover .voie-fleche { transform: none; }
}
html[data-theme="sombre"] .suites { background: #16262f; border-color: #2c3f4b; }
html[data-theme="sombre"] .voie { background: #1a2b36; border-color: #2c3f4b; }
html[data-theme="sombre"] .voie:hover { border-color: var(--accent); }

/* ===== Emblème du symbole SMP au-dessus de « L'essentiel » (19/07/2026) =====
   Apparaît automatiquement sur toute page dont l'article commence par
   l'encadré « L'essentiel » : symbole centré entre la vague du bandeau et
   l'encadré, teinté à la couleur de la famille (classe cat-* posée sur body
   par main.js), pétrole sur les pages générales. Les navigateurs anciens
   sans :has() n'affichent simplement pas l'emblème. */
.contenu.article:has(> .essentiel:first-child)::before {
  content: "";
  display: block;
  width: 58px; height: 57px;
  margin: -42px auto 44px;
  background: url("/assets/logo-symbole-petrole.png") center / contain no-repeat;
}
body.cat-bio .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-ambre.png"); }
body.cat-cog .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-bleu.png"); }
body.cat-psy .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-rose.png"); }
html[data-theme="sombre"] .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-blanc.png"); opacity: 0.92; }
html[data-theme="sombre"] body.cat-bio .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-ambre-clair.png"); }
html[data-theme="sombre"] body.cat-cog .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-bleu-clair.png"); }
html[data-theme="sombre"] body.cat-psy .contenu.article:has(> .essentiel:first-child)::before { background-image: url("/assets/logo-symbole-rose-clair.png"); }

/* Étiquette des titres de section (pages Nos actions et Ateliers, 21/07/2026) :
   pastille posée sur sa propre ligne, centrée au-dessus du h2
   (sans cette règle, le h2 en inline-block la gardait sur la même ligne que lui) */
.section-titre .etiquette {
  display: table; margin: 0 auto 14px;
  background: var(--teal-clair); color: var(--teal-fonce);
  padding: 6px 16px; border-radius: 999px;
  font-family: "Source Sans 3", sans-serif; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
html[data-theme="sombre"] .section-titre .etiquette { background: #12303d; color: #8ec7db; }

/* Les deux définitions en regard sur l'accueil (22/07/2026) : cartes « La santé mentale » (OMS) et « La santé mentale positive ». Couleurs en variables : s'adaptent seules au mode sombre. */
.definitions-regard blockquote { margin: 10px 0 0; font-style: italic; color: var(--teal-fonce); line-height: 1.65; }
.definitions-regard cite { display: block; margin-top: 16px; font-style: normal; font-weight: 600; font-family: "Source Sans 3", sans-serif; font-size: 0.95rem; color: var(--texte-doux); }

/* Devise du site dans le pied de page (24/07/2026) : la raison d'etre actee
   par Elisabeth (« Donner a la sante mentale un langage commun : celui des
   ressources. »), affichee en italique discret sous la description. */
.pied-devise { font-style: italic; opacity: 0.92; margin-top: 10px; }

/* Bouton d'action dans l'en-tete d'une page (25/07/2026) : d'abord pour le
   « Commencer le parcours » de parcours-stress.html, sous le chapo. */
.page-entete .entete-action { margin-top: 30px; }

/* Fil du parcours (25/07/2026) : bandeau d'etapes injecte par main.js dans
   l'en-tete des fiches d'un parcours, uniquement quand le visiteur suit ce
   parcours (memoire locale du navigateur, rien de transmis). Les parcours
   sont decrits dans assets/explorations.json ; les fiches ne sont pas
   modifiees. Carte blanche posee sur le bandeau petrole de l'en-tete :
   couleurs fixes, identiques en mode jour et nuit. */
.fil-parcours {
  background: #ffffff; border-radius: 22px; box-shadow: var(--ombre);
  max-width: 660px; margin: 34px auto 0; padding: 18px 24px 16px;
  text-align: left;
}
.fil-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.fil-nom {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 0.95rem; color: #0d5876;
}
.fil-nom svg { width: 19px; height: 19px; flex: none; }
.fil-position { font-size: 0.875rem; color: #5a5b64; }
.fil-quitter {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.875rem; color: #0d5876; text-decoration: underline; padding: 2px 4px;
  margin-left: auto;
}
.fil-quitter:hover { color: #093f56; }
.fil-etapes { list-style: none; display: flex; margin: 0; padding: 0; }
.fil-etapes li { flex: 1; position: relative; text-align: center; }
.fil-etapes li:not(:last-child)::before {
  content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px;
  background: rgba(13, 88, 118, 0.22);
}
.fil-etapes a { text-decoration: none; display: inline-block; }
.fil-rond {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: #ffffff; border: 2px solid rgba(13, 88, 118, 0.45);
  font-size: 0.875rem; font-weight: 600; color: #44454f;
}
.fil-rond svg { width: 14px; height: 14px; }
.fil-fait .fil-rond { background: #0d5876; border-color: #0d5876; color: #ffffff; }
.fil-ici .fil-rond { border-color: #e3a733; border-width: 3px; color: #0d5876; }
.fil-mot { display: block; font-size: 0.875rem; line-height: 1.3; margin-top: 6px; color: #5a5b64; }
.fil-fait .fil-mot, .fil-ici .fil-mot { color: #0d5876; }
.fil-ici .fil-mot { font-weight: 600; }
.fil-etapes a:hover .fil-mot, .fil-etapes a:focus-visible .fil-mot { text-decoration: underline; }
@media (max-width: 680px) {
  .fil-parcours { padding: 16px 16px 14px; }
  .fil-mot { display: none; }
  .fil-ici .fil-mot { display: block; }
}

/* Carte « etape suivante » du fil du parcours, inseree en fin de fiche,
   avant le panneau « Et maintenant ? ». Couleurs en variables : s'adaptent
   seules au mode sombre. */
.fil-suite {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 22px; flex-wrap: wrap;
  background: var(--teal-clair); border-radius: 22px;
  padding: 22px 26px; margin: 36px 0 26px;
}
.fil-suite-sur { font-family: "Source Sans 3", sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--teal); margin: 0 0 2px; }
.fil-suite-titre { font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--texte); margin: 0; }
.fil-suite-accroche { font-size: 0.9rem; color: var(--texte-doux); margin: 3px 0 0; }
.fil-suite .btn { margin: 0; }

/* Bouton or en corps de page (25/07/2026, regle chromatique : or = agir).
   Cree pour « Continuer le parcours » de la carte etape suivante (main.js) ;
   memes couleurs que les boutons or des bandeaux, ombre standard des cartes
   claires. Texte #3a2c08 sur or : contraste 8,7:1, identique dans les deux
   modes (l'or ne change pas en mode sombre). */
.btn-or {
  background: linear-gradient(135deg, #f2b83c 0%, #e3a733 100%);
  color: #3a2c08; border-color: transparent;
}
.btn-or:hover {
  background: linear-gradient(135deg, #eeb02c 0%, #d99c24 100%);
  color: #3a2c08;
}