/* ==========================================================================
   Outfarer : feuille de style du site, tirée de la maquette v2 arrêtée le 19 octobre 2026
   (vert mousse, orange d'appui, titres en Barlow Semi Condensed, fond photo, clair par défaut).
   Les règles visuelles sont dans .claude/charte/ux-et-design.md.
   Les couleurs des rubriques arrivent de config/rubriques.json par la variable --c.
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  --font-texte: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titres: "Barlow Semi Condensed", "Noto Sans", sans-serif;
  --graisse-titres: 700;

  --vert: #3f441c;
  --appui: #b8541c;

  --texte: #1a1a1a;
  --texte-2: #4f5551;
  --texte-3: #5f6662;
  --texte-legende: #737874;
  --texte-credit: #8a8f8b;
  --fond: #ffffff;
  --fond-2: #f5f6f2;
  --filet: #e3e5de;
  --filet-fort: #cdd1c6;
  --lien: #0b57d0;
  --lien-visite: var(--vert);

  --accent: var(--vert);
  --accent-fort: color-mix(in srgb, var(--vert) 82%, #000);
  --accent-pale: color-mix(in srgb, var(--vert) 9%, #fff);
  --accent-contraste: #ffffff;
  --entourage: color-mix(in srgb, var(--vert) 7%, #f8f7f2);
  --entete-fond: #ffffff;
  --entete-texte: #1a1a1a;
  --entete-filet: color-mix(in srgb, var(--vert) 16%, #fff);
  --entete-survol: color-mix(in srgb, var(--vert) 8%, transparent);
  --pied-texte: #eef1ea;
  --pied-texte-2: #cdd4c8;
  --pied-filet: rgb(255 255 255 / .16);

  --rayon: 6px;
  --rayon-grand: 8px;
  --rayon-image: 6px;
  --rayon-puce: 4px;
  --ombre-carte: 0 1px 2px rgb(20 22 12 / .05), 0 10px 24px -14px rgb(20 22 12 / .24);
  --ombre-menu: 0 12px 32px -12px rgb(20 22 12 / .3), 0 2px 6px rgb(20 22 12 / .06);

  /* Encadrés : fond, encre (titre et icône), filet */
  --essentiel-fond: var(--accent-pale); --essentiel-encre: var(--accent-fort);
  --savoir-fond: #fdf6e2; --savoir-encre: #7a5200; --savoir-filet: #e3bf62;
  --conseil-fond: #ebf1e4; --conseil-encre: #3d5220; --conseil-filet: #9db27c;
  --attention-fond: #fdede8; --attention-encre: #9b2f17; --attention-filet: #e79c88;
  --pays-fond: #e9f1fa; --pays-encre: #1f4f8a; --pays-filet: #96b6e0;
  --methode-fond: #f1f2ee; --methode-encre: #3c4237; --methode-filet: #c5cabd;
  --bon-fond: #e8f0ea; --bon-encre: #2f4a37; --bon-filet: #9fbfa8;
  --securite-fond: #fbe8e8; --securite-encre: #8a1c1c; --securite-filet: #d05a5a;

  --entete-haut: 72px;
  --entete-haut-compact: 56px;
  --conteneur: 1280px;
  --marge: 16px;
  --decalage-ancre: 110px;
}
@media (min-width: 480px) { :root { --marge: 20px; } }
@media (min-width: 768px) { :root { --marge: 32px; } }
@media (max-width: 1023.98px) { :root { --entete-haut: 56px; --entete-haut-compact: 48px; --decalage-ancre: 104px; } }

/* Mode sombre (au choix du lecteur, mémorisé) */
[data-theme="dark"] {
  --texte: #e7eae6; --texte-2: #bcc3bd; --texte-3: #a7aea9; --texte-legende: #8e9690; --texte-credit: #737a75;
  --fond: #15171a; --fond-2: #1c1f22; --filet: #2c3033; --filet-fort: #3b4145;
  --lien: #8ab4f8; --lien-visite: #acb496;
  --accent: color-mix(in srgb, var(--vert) 32%, #dfe8cf);
  --accent-fort: color-mix(in srgb, var(--vert) 18%, #eef3e4);
  --accent-pale: color-mix(in srgb, var(--vert) 42%, #15171a);
  --accent-contraste: #15171a;
  --appui: #f0955e;
  --entourage: color-mix(in srgb, var(--vert) 22%, #0c0e0f);
  --entete-fond: #15171a; --entete-texte: #e7eae6; --entete-filet: #2c3033; --entete-survol: rgb(255 255 255 / .07);
  --savoir-fond: #2a2416; --savoir-encre: #f0c96a; --savoir-filet: #8a6a1f;
  --conseil-fond: #1f2717; --conseil-encre: #b9d18f; --conseil-filet: #5d7238;
  --attention-fond: #2e1c17; --attention-encre: #f2a28d; --attention-filet: #8f4430;
  --pays-fond: #172232; --pays-encre: #9cc0ef; --pays-filet: #3c5f8f;
  --methode-fond: #1e2124; --methode-encre: #cdd3c9; --methode-filet: #474e47;
  --bon-fond: #18241c; --bon-encre: #a9d1b4; --bon-filet: #3f6a4c;
  --securite-fond: #321a1b; --securite-encre: #f5a3a3; --securite-filet: #a23f40;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / .4), 0 10px 24px -14px rgb(0 0 0 / .7);
  --ombre-menu: 0 12px 32px -12px rgb(0 0 0 / .7);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--decalage-ancre); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Fond : photo de forêt passée, qui s'efface vers la couleur d'entourage */
body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--entourage) 58%, transparent) 0, color-mix(in srgb, var(--entourage) 78%, transparent) 240px, var(--entourage) 640px) no-repeat,
    url("../img/fond-foret.jpg") center top / max(100%, 1100px) auto no-repeat,
    var(--entourage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
[data-theme="dark"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--entourage) 80%, transparent) 0, color-mix(in srgb, var(--entourage) 90%, transparent) 240px, var(--entourage) 640px) no-repeat,
    url("../img/fond-foret.jpg") center top / max(100%, 1100px) auto no-repeat,
    var(--entourage);
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
/* Sans cela, <source> devient une case de grille quand <picture> est posé dans une grille (liste des guides de l'accueil) */
picture > source { display: none; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* Coordonnées masquées aux robots (moteur/rendu.php, masque) : leur texte n'existe qu'ici, en CSS */
.masque > span::before { content: var(--m); }
.masque > span { white-space: pre-wrap; }
button.masque > span { white-space: pre; }
button.masque { padding: 0; border: 0; background: none; font: inherit; color: var(--lien); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; white-space: nowrap; }
button.masque:hover { color: var(--appui); text-decoration-color: var(--appui); }
h1, h2, h3, h4 {
  font-family: var(--font-titres);
  font-weight: var(--graisse-titres);
  line-height: 1.15;
  margin: 0;
  color: var(--texte);
  text-wrap: balance;
}
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; border-radius: 4px; }

.conteneur { max-width: calc(var(--conteneur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--fond); color: var(--texte); border-radius: var(--rayon); box-shadow: var(--ombre-menu); }
.evitement:focus { top: 12px; }

/* ---------- 3. En-tête (collant, s'affine au défilement) ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--entete-fond); color: var(--entete-texte); border-bottom: 1px solid var(--entete-filet); transition: box-shadow .2s; }
.entete.est-compact { box-shadow: 0 6px 18px -12px rgb(0 0 0 / .35); }
.entete-in { display: flex; align-items: center; gap: 18px; height: var(--entete-haut); transition: height .2s ease; }
.entete.est-compact .entete-in { height: var(--entete-haut-compact); }

/* Logo : un seul SVG (theme/gabarits/icones.php, #logo-outfarer) ; couleurs du nom par variables, boussole fixe */
.logo { display: inline-flex; align-items: center; flex: none; color: var(--entete-texte); text-decoration: none; --logo-out: var(--vert); --logo-farer: #000; }
[data-theme="dark"] .logo { --logo-out: var(--accent); --logo-farer: var(--entete-texte); }
.logo-svg { display: block; width: auto; height: 36px; aspect-ratio: 4080.7 / 803.2; transition: height .2s; }
.est-compact .logo-svg { height: 30px; }
@media (max-width: 479.98px) { .logo-svg { height: 30px; } }

/* Menu : les rubriques qui ne tiennent pas passent dans « Plus » (voir le script) */
.nav-principale { display: none; flex: 1; min-width: 0; }
@media (min-width: 1024px) { .nav-principale { display: block; } }
.nav-liste { display: flex; justify-content: safe center; align-items: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.nav-liste > li { position: relative; flex: none; }
.nav-liste > li[hidden] { display: none; }
.lien-nav {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 8px 10px; border: 0; background: none; cursor: pointer;
  font-family: "Barlow Semi Condensed", "Noto Sans", sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  color: inherit; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s;
}
.lien-nav:hover, .lien-nav[aria-expanded="true"] { color: var(--accent-fort); box-shadow: inset 0 -2px 0 var(--appui); }
.lien-nav[aria-current], .lien-nav.contient-actif { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.lien-nav .icone { width: 14px; height: 14px; transition: transform .2s; }
.lien-nav[aria-expanded="true"] .icone { transform: rotate(180deg); }

.sous-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 300px; padding: 8px; list-style: none; margin: 0;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--filet); border-radius: var(--rayon-grand); box-shadow: var(--ombre-menu);
  display: none; z-index: 5;
}
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.a-sous-menu:hover > .sous-menu, .lien-nav[aria-expanded="true"] + .sous-menu { display: block; }
.nav-plus .sous-menu { left: auto; right: 0; transform: none; max-height: 70vh; overflow: auto; }
.sous-menu ul { list-style: none; margin: 0; padding: 0; }
.sous-menu li[hidden] { display: none; }
.sous-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--rayon); color: inherit; text-decoration: none; }
.sous-menu a:hover { background: var(--fond-2); }
.sous-menu a:hover .sm-titre, .sous-menu a[aria-current] .sm-titre { color: var(--appui); }
.sous-menu .sm-titre { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.sous-menu .sm-desc { display: block; font-size: .8125rem; color: var(--texte-3); line-height: 1.35; }
.sm-groupe { display: block; padding: 10px 12px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }

.outils { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
@media (min-width: 1024px) { .outils { margin-left: 0; } }
.outil {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer;
  font: 600 .875rem/1 var(--font-texte); text-decoration: none;
}
.outil:hover, .outil[aria-expanded="true"] { background: var(--entete-survol); }
.outil .icone { width: 21px; height: 21px; }
.drapeau { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.outil-menu { padding: 0 12px 0 10px; }
@media (min-width: 1024px) { .outil-menu { display: none; } }
/* Petit écran : l'en-tête doit tenir en 328 px (360 px moins les marges) ; le mot « Menu » reste lu par les lecteurs d'écran */
@media (max-width: 479.98px) {
  .entete-in { gap: 8px; }
  .outils { gap: 0; }
  .outil-menu { padding: 0 10px; }
  .outil-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Sous 360 px, le logo garde ses 26 px aussi dans l'en-tête affiné : la règle .est-compact (30 px) l'emportait, et les
   icônes débordaient de 16 px dès qu'on faisait défiler la page (22/10). */
@media (max-width: 359.98px) { .logo-svg, .est-compact .logo-svg { height: 26px; } .outil { min-width: 40px; padding: 0 8px; } }
/* Favoris : signet de l'en-tête dès 600 px (en dessous, il n'y a pas la place : le lien passe en tête du menu mobile),
   avec le nombre d'articles enregistrés, rien à zéro. Sur ordinateur, les outils se serrent de 2 px pour que le
   signet ne fasse pas passer une rubrique dans « Plus » à 1 280 px de large. */
.outil-favoris { position: relative; }
.outil-favoris[aria-current] { color: var(--accent); }
.outil-favoris[aria-current] .icone { fill: currentColor; }
.compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-contraste); font: 700 .6875rem/1 var(--font-texte); font-variant-numeric: tabular-nums; }
.outil-favoris .compteur { position: absolute; top: 4px; right: 2px; box-shadow: 0 0 0 2px var(--entete-fond); }
.compteur[hidden], .outil-favoris[hidden], .menu-favoris[hidden], [data-favori][hidden] { display: none; }
@media (max-width: 599.98px) { .outil-favoris { display: none; } }
@media (min-width: 1024px) { .outils { gap: 0; } }
.icone-soleil { display: none; }
[data-theme="dark"] .icone-soleil { display: block; }
[data-theme="dark"] .icone-lune { display: none; }

.langue { position: relative; }
.menu-flottant { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 240px; padding: 6px; margin: 0; list-style: none; background: var(--fond); color: var(--texte); border: 1px solid var(--filet); border-radius: var(--rayon-grand); box-shadow: var(--ombre-menu); }
.menu-flottant[hidden] { display: none; }
.menu-flottant a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon); color: inherit; text-decoration: none; font-size: .9375rem; }
.menu-flottant a:hover { background: var(--fond-2); }
.menu-flottant a[aria-current] { font-weight: 700; background: var(--accent-pale); }
.menu-flottant a[aria-current]::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--masque-coche) center / contain no-repeat; mask: var(--masque-coche) center / contain no-repeat; }

.panneau-recherche { position: absolute; left: 0; right: 0; top: 100%; background: var(--fond); color: var(--texte); border-bottom: 1px solid var(--filet); box-shadow: var(--ombre-menu); padding-block: 18px; }
.panneau-recherche[hidden] { display: none; }
.form-recherche { display: flex; gap: 8px; max-width: 760px; margin-inline: auto; }
.form-recherche input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 16px; color: var(--texte); background: var(--fond); border: 1.5px solid var(--filet-fort); border-radius: var(--rayon); }
.form-recherche input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-recherche-page { margin: 0 0 22px; }

/* Suggestions de recherche au fil de la frappe (theme/js/outfarer.js, moteur/pages.php : reponse_suggestions) */
.form-recherche.avec-suggestions { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--fond); color: var(--texte); border: 1px solid var(--filet); border-radius: var(--rayon-grand); box-shadow: var(--ombre-menu); text-align: left; }
.suggestions[hidden] { display: none; }
.suggestion { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: var(--rayon); color: inherit; text-decoration: none; }
.suggestion:hover, .suggestion.est-actif { background: var(--fond-2); }
.suggestion.est-actif { box-shadow: inset 3px 0 0 var(--accent); }
.suggestion img, .suggestion-vide { flex: none; display: block; width: 96px; height: 54px; object-fit: cover; border-radius: var(--rayon-puce); background: var(--fond-2); }
.suggestion-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.suggestion-titre { font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.0625rem; line-height: 1.25; }
.suggestion-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .8125rem; color: var(--texte-3); }
.suggestion-meta .puce-rubrique { padding: 1px 7px; font-size: .6875rem; }
.suggestion-meta .point { color: var(--filet-fort); }
.suggestion-extrait { font-size: .875rem; line-height: 1.45; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.suggestions mark { background: color-mix(in srgb, var(--appui) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.suggestions-vide { margin: 0; padding: 10px 8px 6px; font-size: .9375rem; color: var(--texte-3); }
.suggestion-tout { position: sticky; bottom: -6px; display: block; margin: 4px -6px -6px; padding: 12px 14px; background: var(--fond); border-top: 1px solid var(--filet); border-radius: 0 0 var(--rayon-grand) var(--rayon-grand); color: var(--lien); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.suggestion-tout::after { content: " \2192"; }
.suggestion-tout:hover, .suggestion-tout.est-actif { background: var(--fond-2); text-decoration: underline; }
@media (max-width: 599.98px) {
  .suggestion { gap: 10px; padding: 7px 4px; }
  .suggestion img, .suggestion-vide { width: 72px; height: 40.5px; }
  .suggestion-titre { font-size: 1rem; }
}
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--rayon); cursor: pointer; background: var(--accent); color: var(--accent-contraste); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.bouton:hover { background: var(--accent-fort); }
.bouton-discret { background: var(--fond-2); color: var(--texte); border: 1px solid var(--filet); }
.bouton-discret:hover { background: var(--filet); }

.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.progression span { display: block; height: 100%; width: 0; background: var(--appui); }

.barre-sommaire { display: none; position: relative; border-top: 1px solid var(--filet); background: var(--fond); color: var(--texte); }
@media (max-width: 1023.98px) { .barre-sommaire.est-visible { display: block; } }
.barre-sommaire-bouton { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px var(--marge); background: none; border: 0; cursor: pointer; text-align: left; font-size: .9375rem; }
.barre-sommaire-bouton .lbl { font-weight: 700; color: var(--accent-fort); flex: none; }
.barre-sommaire-bouton .cours { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte-2); }
.barre-sommaire-bouton .icone { width: 18px; height: 18px; }
.barre-sommaire-bouton .chevron { transition: transform .2s; }
.barre-sommaire-bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.barre-sommaire-liste { position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow: auto; margin: 0; padding: 8px var(--marge) 14px; list-style: none; background: var(--fond); border-bottom: 1px solid var(--filet); box-shadow: var(--ombre-menu); }
.barre-sommaire-liste[hidden] { display: none; }
.barre-sommaire-liste a { display: block; padding: 10px 0; color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--filet); font-size: .9375rem; }
.barre-sommaire-liste a.est-actif { color: var(--accent-fort); font-weight: 700; box-shadow: inset 3px 0 0 var(--appui); padding-left: 10px; }

.menu-mobile { position: fixed; left: 0; right: 0; bottom: 0; top: var(--entete-haut); z-index: 49; overflow: auto; background: var(--fond); color: var(--texte); padding: 18px var(--marge) 48px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile-titre { margin: 18px 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.menu-mobile-titre:first-child { margin-top: 0; }
.liens-simples { list-style: none; margin: 0; padding: 0; }
.liens-simples a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--filet); color: var(--texte); text-decoration: none; }
.menu-favoris { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0 0 18px; padding: 0 14px; border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--texte); text-decoration: none; font-weight: 650; }
.menu-favoris .icone { width: 20px; height: 20px; color: var(--accent); }
.menu-favoris .compteur { margin-left: auto; }
.menu-favoris[aria-current] { background: var(--accent-pale); }
@media (min-width: 600px) { .menu-favoris { display: none; } .menu-favoris + .menu-mobile-titre { margin-top: 0; } }
body.menu-ouvert { overflow: hidden; }

/* Suggestion de langue (créée par le script) et bandeau d'aperçu local */
.suggestion-langue { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 8px calc(var(--marge) + 40px); background: var(--accent-pale); color: var(--texte); border-bottom: 1px solid var(--filet); font-size: .9375rem; text-align: center; }
.suggestion-langue a { font-weight: 700; color: var(--accent-fort); }
.suggestion-langue button { position: absolute; right: calc(var(--marge) - 6px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texte-2); cursor: pointer; }
.suggestion-langue button:hover { background: var(--entete-survol); }
.suggestion-langue .icone { width: 18px; height: 18px; }
/* Calculateurs des articles (bloc « calculateur », theme/js/outfarer.js) : un encadré à champs, résultats en gros. */
.calculateur { margin: 1.6em 0; padding: 16px 18px 14px; background: var(--fond-2); border: 1px solid var(--filet-fort); border-left: 4px solid var(--accent); border-radius: var(--rayon-grand); }
.calculateur-titre { margin: 0 0 4px; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.25rem; line-height: 1.2; }
.calculateur-intro { margin: 0 0 10px; font-size: .9375rem; color: var(--texte-2); }
.calculateur-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin: 10px 0 14px; }
.calculateur-champ { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 4px; font-size: .875rem; color: var(--texte-2); }
.calculateur-libelle { font-weight: 600; }
.calculateur-saisie { display: flex; align-items: center; gap: 6px; }
.calculateur-saisie input, .calculateur-saisie select { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; font: inherit; font-size: 1rem; color: var(--texte); background: var(--fond); border: 1px solid var(--filet-fort); border-radius: var(--rayon); }
.calculateur-saisie input:focus-visible, .calculateur-saisie select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calculateur-unite { color: var(--texte-3); font-size: .875rem; white-space: nowrap; }
.calculateur-resultats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--filet); }
.calculateur-resultat { margin: 0; display: grid; gap: 2px; font-size: .875rem; color: var(--texte-2); }
.calculateur-valeur { font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.5rem; line-height: 1.15; color: var(--accent-fort); font-variant-numeric: tabular-nums; }
.calculateur-valeur .calculateur-unite { font-family: var(--font-texte); font-weight: 400; font-size: .9375rem; }
.calculateur-note { margin: 10px 0 0; font-size: .8125rem; color: var(--texte-3); }
/* Un résultat en texte (niveau de risque) : toute la largeur, en texte courant plutôt qu'en gros chiffres. */
.calculateur-resultat-texte { grid-column: 1 / -1; }
.calculateur-resultat-texte .calculateur-valeur { font-family: var(--font-texte); font-size: 1rem; line-height: 1.45; font-variant-numeric: normal; }

/* Bandeau de consentement à la mesure d'audience (theme/js/outfarer.js) : petit, en bas à gauche, sans voile ni blocage
   de la page ; « Refuser » et « Accepter » ont exactement le même style (exigence de la CNIL). */
.bandeau-mesure { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 380px; padding: 14px 16px; background: var(--fond); color: var(--texte); border: 1px solid var(--filet-fort); border-radius: var(--rayon-grand); box-shadow: var(--ombre-menu); font-size: .875rem; line-height: 1.45; }
.bandeau-mesure p { margin: 0 0 12px; }
.bandeau-mesure a { color: var(--lien); }
.bandeau-mesure-boutons { display: flex; gap: 8px; }
.bandeau-mesure-boutons button { flex: 1; min-height: 40px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--fond); color: var(--accent-fort); font: inherit; font-weight: 700; cursor: pointer; }
.bandeau-mesure-boutons button:hover { background: var(--accent-pale); }
@media (max-width: 599.98px) { .bandeau-mesure { left: 8px; right: 8px; bottom: 8px; max-width: none; } }
.lien-mesure { padding: 0; border: 0; background: none; color: var(--pied-texte-2); font: inherit; text-decoration: underline; cursor: pointer; }
.bandeau-apercu { margin: 0; padding: 8px var(--marge); text-align: center; font-size: .875rem; font-weight: 700; background: var(--attention-fond); color: var(--attention-encre); }

/* ---------- 4. Bandeau du fil d'Ariane et feuille de contenu ---------- */
.bandeau { position: relative; }
.bandeau-in { position: relative; z-index: 1; padding-block: 8px; }
@media (min-width: 1280px) {
  .avec-feuille .bandeau-in { padding-bottom: 38px; }
  .avec-feuille .feuille { margin-top: -30px; border-radius: var(--rayon) var(--rayon) 0 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--filet) 70%, transparent); padding-top: 24px; }
}

.feuille { position: relative; max-width: calc(var(--conteneur) + 2 * var(--marge)); margin-inline: auto; background: var(--fond); padding: 18px var(--marge) 0; }
.feuille-in { max-width: var(--conteneur); margin-inline: auto; }
/* Filet de sécurité (22/10) : ce qui dépasse à droite de la feuille, du bandeau ou du pied est coupé au lieu d'élargir
   la page. Une bulle de définition s'y trouve un instant, le temps d'être placée (son script la ramène dans l'écran) ;
   sur mobile, la page restait élargie ensuite. overflow: clip ne crée pas de zone de défilement : le sommaire et la
   colonne collants suivent toujours la page. */
.feuille, .bandeau, .pied { overflow-x: clip; }

.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--texte-2); }
.ariane li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ariane li + li::before { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; flex: none; }
.ariane a { color: var(--texte-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ariane a:hover { color: var(--appui); }
.ariane .icone { width: 16px; height: 16px; }
.ariane [aria-current] { color: var(--texte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
@media (max-width: 599.98px) { .ariane li[aria-current]:not(:first-child) { display: none; } }

/* ---------- 5. Pastilles, avatars, boutons ronds ---------- */
.puce-rubrique { --c: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: var(--rayon-puce); background: var(--c); color: #fff; text-decoration: none; font: 700 .75rem/1.4 var(--font-texte); letter-spacing: .06em; text-transform: uppercase; }
.puce-rubrique .icone { width: 15px; height: 15px; stroke-width: 2; }
[data-theme="dark"] .puce-rubrique { filter: brightness(1.15); }
.avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; background: var(--accent-pale); }
.avatar-mini { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.avatar-logo { display: block; background: none; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; border: 1px solid var(--filet); background: var(--fond); color: var(--texte-2); text-decoration: none; transition: color .15s, border-color .15s; }
.bouton-icone:hover { color: var(--appui); border-color: color-mix(in srgb, var(--appui) 45%, var(--filet)); }
.bouton-icone .icone { width: 18px; height: 18px; }
.bouton-icone.petit { width: 36px; height: 36px; }
.bouton-icone.petit .icone { width: 17px; height: 17px; }

/* Image absente : pictogramme de la rubrique sur sa teinte */
.sans-image { --c: var(--accent); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--c) 14%, var(--fond)); color: var(--c); border-radius: inherit; }
.sans-image .icone { width: 30%; height: 30%; max-width: 64px; max-height: 64px; stroke-width: 1.4; }

/* ---------- 6. Article : grille ---------- */
.grille-article { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "image" "corps"; }
.tete-article { grid-area: tete; }
.image-principale { grid-area: image; }
.corps { grid-area: corps; min-width: 0; }
.col-sommaire { grid-area: sommaire; display: none; }
.col-droite { grid-area: droite; display: none; }
@media (min-width: 1024px) {
  .grille-article { grid-template-columns: 196px minmax(0, 640px); column-gap: 40px; justify-content: center; grid-template-areas: "tete tete" "image image" "sommaire corps"; }
  .col-sommaire { display: block; }
}
@media (min-width: 1280px) {
  .grille-article { grid-template-columns: 216px minmax(0, 660px) minmax(260px, 1fr); column-gap: 48px; justify-content: stretch; grid-template-areas: "tete tete tete" "image image image" "sommaire corps droite"; }
  .col-droite { display: block; }
}

/* Tête d'article en pleine largeur */
.tete-article { padding: 6px 0 22px; }
.surtitre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.type-contenu { font-family: var(--font-titres); font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.titre-article { font-size: clamp(2rem, 1.25rem + 2.4vw, 3.125rem); line-height: 1.06; margin: 0 0 14px; text-wrap: pretty; }
.chapo { font-size: 1.125rem; line-height: 1.5; color: var(--texte); }
@media (min-width: 1024px) { .chapo { font-size: 1.1875rem; } }
.signature { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--filet); }
.signature-texte { min-width: 0; flex: 1 1 220px; }
/* Renvoi vers « Comment nous avons travaillé », sous le chapô */
.lien-methode { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .875rem; color: var(--texte-3); text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 3px; }
.lien-methode:hover { color: var(--appui); text-decoration-color: currentColor; }
.lien-methode .icone { width: 16px; height: 16px; flex: none; }
/* Encart d'ancienneté : la durée de validité de l'article est passée */
.anciennete { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 10px 14px; border-left: 4px solid var(--savoir-filet); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--savoir-fond); font-size: .9375rem; line-height: 1.45; color: var(--texte); }
.anciennete .icone { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--savoir-encre); }
.auteurs { font-size: .9375rem; font-weight: 600; color: var(--texte); }
.auteurs a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.auteurs a:hover { color: var(--appui); text-decoration-color: currentColor; }
.auteurs .relu { font-weight: 400; color: var(--texte-2); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; font-size: .875rem; color: var(--texte-3); }
/* Une mention reste d'un seul tenant tant qu'elle tient ; plus longue que l'écran (« Veröffentlicht am 20. Oktober
   2026 » à 320 px), elle passe à la ligne avant la date, qui ne se coupe jamais (débordement sur mobile, 22/10). */
.meta > span { display: inline-block; }
.meta time { white-space: nowrap; }
.meta .icone { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.actions-article { display: flex; gap: 6px; }
/* En-tête d'article compact sur mobile (27/10, analyse Perplexity ; charte UX, section 8 : logo, titre, chapô, signature
   et dates, puis l'image). Le fil d'Ariane visible s'efface : la puce de rubrique, juste dessous, mène à la même page,
   et le fil reste dans les données structurées. Le reste ne fait que resserrer les espacements, sans rien retirer. */
@media (max-width: 599.98px) {
  .page-article .bandeau { display: none; }
  .page-article .feuille { padding-top: 14px; }
  .tete-article { padding: 2px 0 16px; }
  .surtitre { gap: 6px 10px; margin-bottom: 10px; }
  .titre-article { margin-bottom: 10px; }
  .signature { align-items: flex-start; gap: 10px 12px; margin-top: 14px; padding-top: 12px; }
  .signature .avatar { width: 40px; height: 40px; }
  .meta { gap: 2px 14px; }
}
/* Bouton « Enregistrer » (favoris) : ses deux libellés occupent la même place, pour que le bouton ne change pas de
   largeur ; l'état suit aria-pressed, posé par le script. Même règle pour le bouton à icône de la barre de partage. */
.bouton-favori { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 13px; border: 1px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--texte-2); cursor: pointer; font: 600 .875rem/1 var(--font-texte); transition: color .15s, border-color .15s, background .15s; }
.bouton-favori:hover { color: var(--appui); border-color: color-mix(in srgb, var(--appui) 45%, var(--filet)); }
.bouton-favori .icone { width: 18px; height: 18px; }
.favori-libelles { display: grid; }
.favori-libelles > span { grid-area: 1 / 1; }
[data-favori][aria-pressed="true"] .favori-non, [data-favori]:not([aria-pressed="true"]) .favori-oui { visibility: hidden; }
[data-favori][aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--filet)); }
[data-favori][aria-pressed="true"] .icone { fill: currentColor; }
.bouton-favori[aria-pressed="true"] { background: var(--accent-pale); }
[data-favori][aria-pressed="true"]:hover { color: var(--appui); border-color: color-mix(in srgb, var(--appui) 45%, var(--filet)); }

/* Image principale en pleine largeur */
.image-principale { margin: 0 0 30px; }
.image-principale img { width: 100%; aspect-ratio: 16 / 9; max-height: 58vh; object-fit: cover; border-radius: var(--rayon-image); background: var(--fond-2); }
.image-principale figcaption, .figure figcaption, .galerie figcaption, .boite-photo figcaption { display: flex; flex-wrap: wrap; gap: 2px 14px; justify-content: space-between; margin-top: 6px; font-size: .75rem; line-height: 1.45; color: var(--texte-legende); }
/* Un crédit long (« Photo : Käthe u. Bernd Limburg, CC BY-SA 3.0 de, Wikimedia Commons ») passe à la ligne au lieu
   d'élargir la page sur mobile (22/10) ; l'icône reste à hauteur de sa première ligne. */
.credit { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; color: var(--texte-legende); }
/* Charte UX, section 1 : crédits au gris des légendes (4,5:1) ; seule la mention IA reste plus claire, choix assumé de l'éditeur (21/10). */
.credit-ia { color: var(--texte-credit); }
.credit .icone { width: 12px; height: 12px; flex: none; margin-top: calc(.725em - 6px); }
@media (max-width: 599.98px) {
  .image-principale { margin-inline: calc(-1 * var(--marge)); }
  .image-principale img { border-radius: 0; max-height: none; }
  .image-principale figcaption { padding-inline: var(--marge); }
}

/* Sommaire collant (ordinateur), après l'image */
.sommaire { position: sticky; top: calc(var(--entete-haut-compact) + 26px); max-height: calc(100vh - var(--entete-haut-compact) - 52px); overflow: auto; padding: 2px 4px 12px 0; }
.sommaire-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.sommaire-titre .icone { width: 16px; height: 16px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--filet); }
.sommaire a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: .9375rem; line-height: 1.35; color: var(--texte-2); text-decoration: none; transition: color .15s, border-color .15s; }
.sommaire a:hover { color: var(--appui); border-left-color: color-mix(in srgb, var(--appui) 45%, transparent); }
.sommaire a.est-actif { color: var(--accent-fort); border-left-color: var(--appui); font-weight: 650; }

/* Sommaire dans le texte (mobile et tablette) */
.sommaire-mobile { margin: 0 0 26px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); }
@media (min-width: 1024px) { .sommaire-mobile { display: none; } }
.sommaire-mobile summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; }
.sommaire-mobile summary::-webkit-details-marker { display: none; }
.sommaire-mobile summary .icone:last-child { margin-left: auto; transition: transform .2s; }
.sommaire-mobile[open] summary .icone:last-child { transform: rotate(180deg); }
.sommaire-mobile ol { margin: 0; padding: 0 16px 12px 40px; font-size: 1rem; }
.sommaire-mobile li { padding: 5px 0; }
.sommaire-mobile a { color: var(--texte); text-decoration: none; }

/* Colonne de droite */
.rail { position: sticky; top: calc(var(--entete-haut-compact) + 26px); display: grid; gap: 20px; }
.rail-bloc { padding: 0; }
.rail-titre { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--filet); font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.rail-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
/* Cartes (21/10) : grande image 16:9 avec la rubrique, auteur et date, titre complet sur trois lignes au plus. */
.rail-lien { display: block; color: var(--texte); text-decoration: none; }
.rail-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon-image); background: var(--fond-2); }
.rail-image picture, .rail-image img, .rail-image .sans-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-image img { transition: transform .4s ease; }
.rail-lien:hover .rail-image img { transform: scale(1.035); }
.rail-image .puce-rubrique { position: absolute; left: 10px; top: 10px; }
.rail-meta { display: flex; align-items: center; gap: 8px; margin: 11px 0 5px; font-size: .8125rem; line-height: 1.3; color: var(--texte-3); }
.rail-auteur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--texte-2); }
.rail-meta time { margin-left: auto; padding-left: 4px; white-space: nowrap; }
.rail-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.1875rem; line-height: 1.22; color: var(--texte); transition: color .15s; }
.rail-lien:hover .rail-nom { color: var(--appui); }
/* Écran peu haut : la colonne reste collante sans être coupée ; les cartes suivantes passent en version compacte. */
@media (max-height: 959.98px) {
  .rail-carte + .rail-carte .rail-lien { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "image nom" "image meta"; column-gap: 12px; align-items: start; }
  .rail-carte + .rail-carte .rail-image { grid-area: image; }
  .rail-carte + .rail-carte .rail-image .puce-rubrique, .rail-carte + .rail-carte .rail-meta .avatar-mini, .rail-carte + .rail-carte .rail-auteur { display: none; }
  .rail-carte + .rail-carte .rail-nom { grid-area: nom; font-size: 1.0625rem; }
  .rail-carte + .rail-carte .rail-meta { grid-area: meta; margin: 4px 0 0; }
  .rail-carte + .rail-carte .rail-meta time { margin-left: 0; padding-left: 0; }
  .rail-liste { gap: 18px; }
}
/* Étiquette d'état, vue par l'éditeur seul (aperçu) */
.etiquette-etat { display: inline-block; padding: 2px 8px; border-radius: var(--rayon-puce); background: var(--appui); color: var(--fond); font: 700 .6875rem/1.45 var(--font-texte); letter-spacing: .06em; text-transform: uppercase; }
.carte-image .etiquette-etat, .une-image .etiquette-etat, .rail-image .etiquette-etat { position: absolute; right: 10px; top: 10px; }
.lire-aussi .etiquette-etat { margin-left: 8px; }
.rail-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .875rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.rail-plus:hover { color: var(--appui); }
.emplacement-pub { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 250px; border-radius: var(--rayon); color: var(--texte-3); font-size: .8125rem; }
.emplacement-pub.dans-texte { min-height: 280px; margin: 1.6em 0; }

/* ---------- 7. Corps de l'article ---------- */
.corps p { margin: 0 0 1em; }
.corps h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); line-height: 1.12; margin: 1.9em 0 .55em; }
.corps h3 { font-size: clamp(1.25rem, 1.15rem + .35vw, 1.4375rem); line-height: 1.2; margin: 1.45em 0 .45em; }
.corps > h2:first-child { margin-top: 0; }
.corps h2.partie::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--appui); }
.corps ul, .corps ol { margin: 0 0 1em; padding-left: 1.3em; }
.corps li { margin: .35em 0; }
.corps li::marker { color: var(--accent); font-weight: 700; }
.corps a:visited { color: var(--lien-visite); }
.corps a:hover { color: var(--appui); text-decoration-color: var(--appui); }
.corps a.externe::after { content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .2em; vertical-align: -.02em; background: currentColor; -webkit-mask: var(--masque-externe) center / contain no-repeat; mask: var(--masque-externe) center / contain no-repeat; }

/* L'essentiel */
.essentiel { margin: 0 0 30px; padding: 20px 22px 16px; border-radius: var(--rayon-grand); background: var(--essentiel-fond); color: var(--texte); }
.essentiel-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.essentiel-icone { display: block; width: 36px; height: 36px; flex: none; }
.corps .essentiel-titre { margin: 0; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.25rem; color: var(--essentiel-encre); }
.essentiel ul { list-style: none; margin: 0; padding: 0; font-size: .95em; }
.essentiel li { position: relative; padding-left: 24px; margin: .5em 0; }
.essentiel li::before { content: ""; position: absolute; left: 0; top: .3em; width: 15px; height: 15px; background: var(--appui); -webkit-mask: var(--masque-coche-rond) center / contain no-repeat; mask: var(--masque-coche-rond) center / contain no-repeat; }

/* Encadrés typés */
.encart {
  --e-fond: var(--savoir-fond); --e-encre: var(--savoir-encre); --e-filet: var(--savoir-filet);
  position: relative; margin: 1.6em 0; padding: 16px 20px; font-size: .9em;
  background: var(--e-fond); border-left: 4px solid var(--e-filet); border-radius: 0 var(--rayon) var(--rayon) 0;
}
.encart > :last-child { margin-bottom: 0; }
.encart p { margin: 0 0 .7em; }
.encart-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 6px !important; font-weight: 700; color: var(--e-encre); }
.encart-titre .icone { width: 21px; height: 21px; }
.encart-conseil { --e-fond: var(--conseil-fond); --e-encre: var(--conseil-encre); --e-filet: var(--conseil-filet); }
.encart-attention { --e-fond: var(--attention-fond); --e-encre: var(--attention-encre); --e-filet: var(--attention-filet); }
.encart-pays { --e-fond: var(--pays-fond); --e-encre: var(--pays-encre); --e-filet: var(--pays-filet); }
.encart-methode, .encart-materiel { --e-fond: var(--methode-fond); --e-encre: var(--methode-encre); --e-filet: var(--methode-filet); }
.encart-bon-a-savoir { --e-fond: var(--bon-fond); --e-encre: var(--bon-encre); --e-filet: var(--bon-filet); }
/* Sécurité : obligatoire sur les sujets sensibles, cadré tout autour pour ne pas passer pour un simple aparté */
.encart-securite { --e-fond: var(--securite-fond); --e-encre: var(--securite-encre); --e-filet: var(--securite-filet); border: 1px solid var(--e-filet); border-left-width: 4px; }

/* Formule */
.formule { margin: 1.4em 0; padding: 16px 20px; text-align: center; border: 1.5px dashed var(--filet-fort); border-radius: var(--rayon-grand); background: var(--fond); }
.formule-lbl { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.formule-calc { font-family: var(--font-titres); font-weight: 700; font-size: 1.2em; color: var(--accent-fort); }

/* Citation */
.citation { margin: 1.8em 0; }
.citation blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-size: 1.05em; line-height: 1.5; }
.citation blockquote p { margin: 0; }
.citation figcaption { margin-top: 9px; padding-left: 23px; font-size: .8125rem; color: var(--texte-legende); }

/* Tableau */
.tableau { margin: 1.6em 0; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tableau table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .85em; font-variant-numeric: tabular-nums; }
.tableau caption { caption-side: top; padding: 11px 16px; text-align: left; font-weight: 700; color: var(--texte); background: var(--fond-2); border-bottom: 1px solid var(--filet); }
.tableau th, .tableau td { padding: 9px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
/* Six colonnes ou plus : marges resserrées, pour tenir dans la colonne de texte sans défiler */
.tableau table:has(tr > :nth-child(6)) :is(th, td) { padding-left: 10px; padding-right: 10px; }
.tableau thead th { font-size: .8em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.tableau tbody th { font-weight: 600; color: var(--texte); }
.tableau tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fond-2) 75%, transparent); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau .nombre { text-align: right; white-space: nowrap; font-weight: 700; }
/* L'en-tête d'une colonne de nombres peut passer à la ligne : long et sur une seule ligne, il élargissait le tableau */
.tableau thead .nombre { white-space: normal; }
.corps .tableau .tableau-note { margin: 0; padding: 9px 16px; font-size: .8em; color: var(--texte-legende); border-top: 1px solid var(--filet); }

/* Figures dans le texte */
.figure { margin: 1.7em 0; }
.figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-image); }

/* Galerie (23/10) : vraies photos d'un itinéraire ou d'une destination, deux colonnes dès 600 px, agrandies au clic */
.galerie { display: grid; gap: 20px 16px; margin: 1.7em 0; }
@media (min-width: 600px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galerie-photo { margin: 0; }
/* Schémas, photos du corps et de la galerie : agrandis au clic (24/10) ; une loupe dans un rond le signale, même au doigt */
.image-agrandir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; border-radius: var(--rayon-image); }
.image-agrandir img { display: block; }
.image-agrandir .loupe { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #1d2a20; stroke-width: 2.2; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .15s; }
.image-agrandir:hover .loupe, .image-agrandir:focus-visible .loupe { transform: scale(1.12); }
.galerie img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon-image); background: var(--fond-2); }

/* Article lié dans le texte */
.lire-aussi { margin: 1.7em 0; }
.lire-aussi a { display: flex; align-items: center; gap: 14px; padding: 11px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); color: var(--texte); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.lire-aussi a:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-carte); }
.lire-aussi a:hover .t { color: var(--appui); }
.lire-aussi img, .lire-aussi .sans-image { width: 108px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); flex: none; }
.lire-aussi .sur { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lire-aussi .t { display: block; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.1875rem; line-height: 1.25; transition: color .15s; }

/* Appels de source « texte [1] » (après une espace insécable posée par le moteur) et définitions au survol */
.appel { white-space: nowrap; font-size: calc(1em - 3px); font-weight: 500; color: var(--accent-fort); font-variant-numeric: tabular-nums; }
.corps .appel a, .appel a { padding: 0 1px; border-radius: 3px; color: inherit; text-decoration: none; }
.corps .appel a:hover, .appel a:focus-visible { color: var(--appui); text-decoration: underline; }
.terme-groupe { position: relative; }
.terme { padding: 0; border: 0; background: none; cursor: help; font: inherit; color: inherit; border-bottom: 1.5px dotted var(--appui); }
/* Bulle fermée en display: none : cachée seulement, elle gardait sa place, centrée sur le mot, et près du bord droit
   elle élargissait la page sur mobile (22/10). Ouverte, elle apparaît en fondu ; à la fermeture, display attend la
   fin du fondu (transition discrète), ce qui laisse le temps d'aller de la souris jusqu'à elle. */
.infobulle { display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(320px, 84vw); padding: 11px 13px; transform: translateX(calc(-50% + var(--decalage, 0px))); background: var(--texte); color: var(--fond); border-radius: var(--rayon); font-size: .8125rem; font-weight: 400; line-height: 1.5; text-align: left; box-shadow: var(--ombre-menu); opacity: 0; transition: opacity .15s, display .15s allow-discrete; }
.terme:hover + .infobulle, .terme:focus + .infobulle, .terme-groupe:hover .infobulle, .pied-google:focus-visible + .infobulle { display: block; opacity: 1; }
@starting-style {
  .terme:hover + .infobulle, .terme:focus + .infobulle, .terme-groupe:hover .infobulle, .pied-google:focus-visible + .infobulle { opacity: 0; }
}

/* FAQ en accordéon (pas de soulignement au survol) */
.faq { margin: 2.5em 0 1em; }
.corps .faq-titre { margin: 0 0 .55em; }
.faq-liste { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 14px 2px; cursor: pointer; list-style: none; font-weight: 600; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--accent-pale); color: var(--accent-fort); transition: background .15s, color .15s; }
.faq details[open] .faq-icone { background: var(--accent); color: var(--accent-contraste); }
.faq-icone .icone { width: 18px; height: 18px; }
.faq-q { flex: 1; font-size: .95em; }
.faq summary > .icone { width: 20px; height: 20px; color: var(--texte-3); transition: transform .2s; }
.faq details[open] summary > .icone { transform: rotate(180deg); }
.faq-r { padding: 0 2px 16px 52px; font-size: .95em; }
.faq-r p { margin: 0 0 .7em; }

/* Produits liés (moteur/produits.php ; .claude/charte/produits.md) : mini-fiches en fin de corps, sans prix.
   Une colonne de cartes horizontales ; deux cartes verticales côte à côte quand le bloc en compte plusieurs et que
   la largeur le permet. L'image reste sur fond blanc, cadre arrondi, en mode sombre aussi. */
.produits { margin: 2.2em 0 1em; container-type: inline-size; }
.corps .produits-titre { margin-top: 0; }
.produits-pub { display: inline-block; margin-left: 10px; padding: 1px 8px; vertical-align: .2em; border: 1px solid var(--filet-fort); border-radius: var(--rayon-puce); font-family: var(--font-texte); font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--texte-2); }
.corps .produits-mention { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: .8125rem; line-height: 1.5; color: var(--texte-2); }
.produits-mention .icone { width: 16px; height: 16px; flex: none; margin-top: .15em; color: var(--texte-3); }
.corps .produits-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.corps .produit { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); }
.produit-image { flex: none; width: 104px; aspect-ratio: 1; padding: 6px; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; }
.produit-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.produit-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.produit-marque { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); }
.corps .produit-nom { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.corps .produit-desc { margin: 0 0 6px; font-size: .875rem; line-height: 1.5; color: var(--texte-2); }
.corps a.produit-bouton, .corps a.produit-bouton:visited { min-height: 40px; padding: 0 14px; font-size: .875rem; color: var(--accent-contraste); text-decoration: none; }
.corps a.produit-bouton:hover { color: var(--accent-contraste); }
.produit-bouton .icone { width: 16px; height: 16px; }
.corps .produit-note { margin: 2px 0 0; font-size: .75rem; color: var(--texte-3); }
.corps .produits-imposee { margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: var(--texte-legende); }
@container (min-width: 520px) { .produit-image { width: 140px; } }
@container (min-width: 600px) {
  .corps .produits-liste:has(> .produit + .produit) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .produits-liste:has(> .produit + .produit) .produit { flex-direction: column; }
  .produits-liste:has(> .produit + .produit) .produit-image { align-self: center; width: 150px; }
  .produits-liste:has(> .produit + .produit) .produit-texte { height: 100%; }
  .produits-liste:has(> .produit + .produit) .produit-bouton { margin-top: auto; }
  /* Trois produits (25/10) : le premier en carte horizontale sur toute la largeur, les deux autres côte à côte
     dessous, plutôt qu'une troisième carte seule à côté d'un vide. */
  .corps .produits-liste > .produit:first-child:nth-last-child(3) { grid-column: 1 / -1; flex-direction: row; }
  .produits-liste > .produit:first-child:nth-last-child(3) .produit-image { align-self: flex-start; width: 140px; }
  .produits-liste > .produit:first-child:nth-last-child(3) .produit-texte { height: auto; }
}

/* Vidéo YouTube de fin d'article (moteur/videos.php, règle de l'éditeur du 28/10) : aperçu local en 16:9 et bouton de
   lecture ; rien ne vient de YouTube avant le clic, puis le lecteur sans cookie prend la place de l'aperçu. */
.video { margin: 2.2em 0 1em; }
.corps .video-titre { margin-top: 0; }
.corps .video-apport { margin: 0 0 14px; }
.corps .video-cadre { margin: 0; }
.video-lecteur, .video-iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rayon-grand); overflow: hidden; background: #14181c; }
.video-lecteur img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.video-lecteur:hover img { transform: scale(1.02); filter: brightness(.9); }
.video-lancer { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 14px; background: rgba(0, 0, 0, .72); color: #fff; transition: background .2s ease; }
.video-lecteur:hover .video-lancer, .video-lecteur:focus-visible .video-lancer { background: var(--accent); color: var(--accent-contraste); }
.video-lecteur:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.video-lancer .icone { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.video-cadre figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--texte-2); }
.video-nom { font-weight: 600; color: var(--texte); }
.corps .video-mention { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--texte-2); }
.video-mention .icone { width: 16px; height: 16px; flex: none; margin-top: .15em; color: var(--texte-3); }

/* Bloc de fin : sources, étiquettes, partage, auteur, suite */
.sources { margin-top: 2.3em; padding-top: 1em; border-top: 1px solid var(--filet); font-size: .8125rem; color: var(--texte-2); }
.corps .sources-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 .7em; font-family: var(--font-texte); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--texte); }
.sources-titre .icone { width: 17px; height: 17px; }
.sources ol { margin: 0; padding-left: 1.7em; }
@media (min-width: 768px) { .sources ol { columns: 2; column-gap: 40px; } }
.sources li { margin: 0 0 .55em; break-inside: avoid; }
.sources li:target { background: var(--savoir-fond); border-radius: 4px; }
.sources a { color: var(--texte-2); }
.retour-texte { margin-left: 4px; text-decoration: none; }
/* Corrections publiques, après les sources */
.corrections { margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--filet); font-size: .875rem; color: var(--texte-2); }
.corps .corrections-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 .6em; font-family: var(--font-texte); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--texte); }
.corrections-titre .icone { width: 17px; height: 17px; }
.corrections ul { list-style: none; margin: 0; padding: 0; }
.corrections li { margin: 0 0 .5em; }
.corrections strong { color: var(--texte); }
.corrections-politique { margin: .7em 0 0; }
.corrections-politique a { color: var(--texte-2); }
.etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.9em 0 0; font-size: .8125rem; }
.etiquettes-lbl { margin-right: 2px; font-weight: 700; color: var(--texte-2); }
.etiquette { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid var(--filet); border-radius: 999px; color: var(--texte); text-decoration: none; background: var(--fond); }
a.etiquette:hover { border-color: var(--appui); color: var(--appui); }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 1.5em 0 0; padding: 12px 0; border-block: 1px solid var(--filet); font-size: .8125rem; }
.partage-lbl { font-weight: 700; color: var(--texte-2); margin-right: 6px; }
.lien-google { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 12px; border: 1px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--texte); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lien-google:hover { border-color: color-mix(in srgb, var(--appui) 45%, var(--filet)); color: var(--appui); }
.lien-google .icone { width: 15px; height: 15px; }
.corps .lien-google:visited { color: var(--texte); }
.bio { display: flex; gap: 18px; align-items: flex-start; margin: 2em 0 0; padding: 20px; border-radius: var(--rayon-grand); background: var(--fond-2); }
.bio .avatar { width: 64px; height: 64px; }
.bio .bio-nom { margin: 0; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.25rem; }
.bio-nom a { color: inherit; text-decoration: none; }
.bio-nom a:hover { color: var(--appui); }
.bio .bio-role { margin: 1px 0 0; font-size: .8125rem; color: var(--texte-3); }
.bio-texte { margin: 8px 0 0 !important; font-size: .9375rem; color: var(--texte-2); }
.bio .bio-liens { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: .875rem; font-weight: 600; }
.bio-liens a, .corps .bio-liens a:visited { color: var(--accent); }
.bio-liens a:hover { color: var(--appui); }
/* Article précédent et suivant (25/10) : vignette carrée et texte toujours aligné à gauche ; côte à côte, la vignette
   de l'article suivant passe à droite, du côté où l'on avance. */
.suite { display: grid; gap: 12px; margin: 1.5em 0 0; }
@media (min-width: 600px) { .suite { grid-template-columns: 1fr 1fr; } .suite .apres { flex-direction: row-reverse; } .suite .apres:only-child { grid-column: 2; } }
.suite a, .corps .suite a:visited { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); color: var(--texte); text-decoration: none; background: var(--fond); transition: border-color .15s ease; }
.suite a:hover { border-color: var(--filet-fort); }
.suite a:hover .t { color: var(--appui); }
.suite-image { flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: var(--rayon-image); background: var(--fond-2); }
.suite-image picture, .suite-image img, .suite-image .sans-image { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.suite-image img { transition: transform .4s ease; }
.suite a:hover .suite-image img { transform: scale(1.06); }
.suite-texte { flex: 1; min-width: 0; }
.suite .sens { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.suite .sens .icone { width: 15px; height: 15px; flex: none; }
.suite .t { display: block; margin-top: 4px; font-size: .9375rem; font-weight: 600; line-height: 1.35; }

/* ---------- 8. Cartes d'articles, une, tuiles, guides, actualités ---------- */
.section { padding-block: 32px; }
.section + .section { padding-top: 6px; }
.feuille-in > .section:first-child { padding-top: 10px; }
.titre-section { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.titre-section a { font-family: var(--font-texte); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.titre-section a:hover { color: var(--appui); }
.titre-section a .icone { width: 18px; height: 18px; }
.titre-section .lien-flux { font-size: .75rem; letter-spacing: .04em; color: var(--texte-legende); gap: 5px; }
.titre-section .lien-flux:hover, .titre-section .lien-flux:focus-visible { color: var(--accent); }
.titre-section .lien-flux .icone { width: 16px; height: 16px; }
.grille-cartes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.carte { position: relative; display: flex; flex-direction: column; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon-grand); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.carte:hover { box-shadow: var(--ombre-carte); border-color: var(--filet-fort); }
.carte-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fond-2); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carte:hover .carte-image img { transform: scale(1.035); }
.carte-image .puce-rubrique { position: absolute; left: 12px; top: 12px; }
.carte-corps { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.carte-titre { font-size: 1.3125rem; line-height: 1.18; margin: 0 0 7px; }
.carte-titre a { color: var(--texte); text-decoration: none; transition: color .15s; }
.carte-titre a::after { content: ""; position: absolute; inset: 0; }
.carte:hover .carte-titre a, .carte:focus-within .carte-titre a { color: var(--appui); }
.carte-chapo { margin: 0 0 13px; font-size: .9375rem; line-height: 1.5; color: var(--texte-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.carte-meta { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: .8125rem; color: var(--texte-3); }
.carte-meta .point { opacity: .6; }

.une { position: relative; display: grid; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon-grand); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
/* Même survol que les cartes (27/10, demande de l’éditeur) : ombre, filet plus marqué et léger zoom de l’image (charte UX, section 10). */
.une:hover { box-shadow: var(--ombre-carte); border-color: var(--filet-fort); }
@media (min-width: 900px) { .une { grid-template-columns: 1.3fr 1fr; } }
.une-image { position: relative; min-height: 240px; overflow: hidden; background: var(--fond-2); }
.une-image img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.une:hover .une-image img { transform: scale(1.035); }
.une-corps { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 22px 26px; }
@media (min-width: 900px) { .une-corps { padding: 34px 38px; } }
.une-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.une-titre { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); line-height: 1.06; }
.une-titre a { color: var(--texte); text-decoration: none; transition: color .15s; }
.une-titre a::after { content: ""; position: absolute; inset: 0; }
.une:hover .une-titre a, .une:focus-within .une-titre a { color: var(--appui); }
.une-chapo { color: var(--texte-2); font-size: 1rem; line-height: 1.55; }

.tuiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); list-style: none; margin: 0; padding: 0; }
.tuile { --c: var(--accent); display: flex; align-items: center; gap: 11px; padding: 11px 13px; min-height: 60px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); color: var(--texte); text-decoration: none; font-weight: 650; font-size: .9375rem; line-height: 1.25; transition: border-color .15s, background .15s, color .15s; }
.tuile:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--fond)); color: var(--c); }
.picto { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--c) 13%, var(--fond)); color: var(--c); }
.picto .icone { width: 22px; height: 22px; }
[data-theme="dark"] .picto { color: color-mix(in srgb, var(--c) 55%, #fff); }
[data-theme="dark"] .tuile:hover { color: color-mix(in srgb, var(--c) 55%, #fff); }

.duo { display: grid; gap: 34px; }
@media (min-width: 1024px) { .duo { grid-template-columns: 1.8fr 1fr; gap: 46px; } }
.guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: g; }
/* Guides sans actualités à côté : deux par ligne quand la place le permet, un guide seul garde toute la largeur */
.solo .guides { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.guide { counter-increment: g; position: relative; display: grid; grid-template-columns: 52px 128px 1fr; gap: 16px; align-items: center; padding: 11px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); }
.guide::before { content: counter(g, decimal-leading-zero); font-family: var(--font-titres); font-weight: 800; font-size: 1.875rem; color: var(--appui); text-align: center; }
.guide img, .guide .sans-image { width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.guide-titre { font-size: 1.1875rem; line-height: 1.22; }
.guide-titre a { color: var(--texte); text-decoration: none; transition: color .15s; }
.guide-titre a::after { content: ""; position: absolute; inset: 0; }
.guide:hover .guide-titre a, .guide:focus-within .guide-titre a { color: var(--appui); }
.guide p { margin-top: 4px; font-size: .8125rem; color: var(--texte-3); }
@media (max-width: 599.98px) { .guide { grid-template-columns: 38px 1fr; } .guide img, .guide .sans-image { display: none; } .guide::before { font-size: 1.4rem; } }
.actus { padding: 18px 20px; border-radius: var(--rayon-grand); background: var(--fond-2); }
.actus ul { list-style: none; margin: 0; padding: 0; }
.actus li { padding: 11px 0; border-bottom: 1px solid var(--filet); }
.actus li:last-child { border-bottom: 0; }
.actus time { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--appui); }
.actus a { color: var(--texte); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.4; transition: color .15s; }
.actus a:hover, .actus a:focus-visible { color: var(--appui); }
.vide { padding: 18px 0; font-size: 1rem; color: var(--texte-2); }

/* Accueil : introduction */
.intro-accueil { padding-block: 28px 26px; }
.intro-accueil h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem); line-height: 1.04; text-wrap: pretty; }
.intro-accueil h1 em { font-style: normal; color: var(--accent); }
.presentation-accueil p { max-width: 72ch; margin: 0 0 1em; color: var(--texte-2); }
/* Sur grand écran, le texte prend toute la largeur en deux colonnes (demande de l'éditeur du 21/10) : pas de vide à
   droite, une page plus courte, des lignes de longueur confortable. */
@media (min-width: 1024px) {
  .presentation-texte { column-count: 2; column-gap: 56px; column-rule: 1px solid var(--filet); }
  .presentation-accueil .presentation-texte p { max-width: none; orphans: 3; widows: 3; }
}
.intro-accueil p { margin-top: 10px; font-size: 1rem; color: var(--texte-2); }

/* Pages de liste : rubrique, thème, lieu, auteur */
.tete-rubrique { --c: var(--accent); display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding-block: 12px 4px; }
.picto-rubrique { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c); color: #fff; }
.picto-rubrique .icone { width: 32px; height: 32px; stroke-width: 1.6; }
.tete-rubrique h1 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); line-height: 1.04; }
.tete-rubrique .sous { margin-top: 4px; font-size: .9375rem; color: var(--texte-3); }
.description-rubrique { grid-column: 1 / -1; font-size: 1rem; line-height: 1.6; color: var(--texte-2); }
.description-rubrique p + p, .description-rubrique p + div, .description-rubrique div p + p { margin-top: .8em; }
.lire-suite { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700; font-size: .9375rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.lire-suite:hover { color: var(--appui); }
.lire-suite .icone { width: 16px; height: 16px; transition: transform .2s; }
.lire-suite[aria-expanded="true"] .icone { transform: rotate(180deg); }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 36px 0 8px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 999px; color: var(--texte); text-decoration: none; font-weight: 700; font-size: .9375rem; background: var(--fond); }
.pagination [aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.pagination a:hover { border-color: var(--appui); color: var(--appui); }
.pagination .ellipse { min-width: 20px; padding: 0; border: 0; background: none; color: var(--texte-3); }
.pagination .icone { width: 16px; height: 16px; }

/* Page profil d'un auteur : portrait 4:5, présentation, domaines et langues, puis ses articles */
.profil { display: grid; gap: 18px 36px; padding: 6px 0 34px; margin-bottom: 8px; border-bottom: 1px solid var(--filet); }
@media (min-width: 720px) { .profil { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
/* Le portrait suit le texte dans le code (le nom d'abord pour les lecteurs d'écran), mais s'affiche avant lui */
.profil-portrait { order: -1; margin: 0; width: min(200px, 56vw); }
@media (min-width: 720px) { .profil-portrait { width: auto; } }
.profil-portrait img, .portrait-logo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon-image); background: var(--fond-2); }
.portrait-logo { display: flex; align-items: center; justify-content: center; background: var(--accent-pale); }
.portrait-logo .boussole { width: 56%; height: auto; }
.profil-portrait figcaption { margin-top: 6px; font-size: .75rem; line-height: 1.45; color: var(--texte-legende); }
.profil-texte { max-width: 680px; }
.profil h1 { margin: 0; font-size: clamp(2rem, 1.35rem + 2vw, 3rem); line-height: 1.04; }
.profil-role { margin: 6px 0 0; font-size: .9375rem; color: var(--texte-3); }
.profil-bio { margin: 16px 0 0; font-size: 1.1875rem; line-height: 1.5; }
.profil-texte > p:not(.profil-role):not(.profil-bio) { margin: 1em 0 0; color: var(--texte-2); }
.profil-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 22px 0 0; padding: 14px 18px; border-radius: var(--rayon-grand); background: var(--fond-2); font-size: .9375rem; }
.profil-details dt { font-weight: 700; color: var(--texte); }
.profil-details dd { margin: 0; color: var(--texte-2); }
.tete-profil-suite { padding: 6px 0 4px; }
.tete-profil-suite h1 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; }
.tete-profil-suite .sous { margin-top: 4px; font-size: .9375rem; color: var(--texte-3); }

/* Pages institutionnelles, équipe, plan du site, recherche, erreur */
.page-simple { max-width: 720px; margin-inline: auto; padding-bottom: 56px; }
.tete-page { padding: 6px 0 24px; margin-bottom: 26px; border-bottom: 1px solid var(--filet); }
.tete-page .titre-article { margin-bottom: 10px; }
.corps-page > :first-child { margin-top: 0; }
.corps .date-page { display: flex; align-items: center; gap: 6px; margin: 2em 0 0; font-size: .875rem; color: var(--texte-3); }
.date-page .icone { width: 16px; height: 16px; }
.liste-auteurs { list-style: none; display: grid; gap: 16px; }
.corps .liste-auteurs { margin: 0 0 1em; padding: 0; }
.corps .fiche-auteur { display: flex; gap: 18px; align-items: flex-start; margin: 0; padding: 20px; border-radius: var(--rayon-grand); background: var(--fond-2); }
.fiche-auteur .avatar { width: 64px; height: 64px; }
.corps .fiche-auteur-nom { margin: 0; font-size: 1.375rem; }
.fiche-auteur-nom a { color: inherit; text-decoration: none; }
.fiche-auteur-nom a:hover { color: var(--appui); }
.corps .fiche-auteur .bio-role { margin: 2px 0 0; font-size: .8125rem; color: var(--texte-3); }
.corps .plan-titre { margin: 1.4em 0 .4em; font-size: 1.375rem; }
.corps .plan-titre a { color: inherit; text-decoration: none; }
.corps .plan-titre a:hover { color: var(--appui); }
.corps .plan-liste { font-size: .9375rem; }
.liste-outils { list-style: none; display: grid; gap: 16px; }
.corps .liste-outils { margin: 1.4em 0 1em; padding: 0; }
.corps .fiche-outil { margin: 0; padding: 18px 20px; border-radius: var(--rayon-grand); background: var(--fond-2); border-left: 4px solid var(--accent); }
.corps .fiche-outil-rubrique { margin: 0 0 6px; }
.corps .fiche-outil-titre { margin: 0 0 6px; font-size: 1.375rem; }
.fiche-outil-titre a { color: inherit; text-decoration: none; }
.fiche-outil-titre a:hover { color: var(--appui); }
.corps .fiche-outil-texte { margin: 0 0 8px; }
.corps .fiche-outil-article { margin: 0; font-size: .875rem; color: var(--texte-3); }
/* Parcours (27/10) : étapes numérotées, chacune avec ses articles en cartes compactes. */
.corps .parcours { list-style: none; margin: 1.6em 0 0; padding: 0; counter-reset: etape; }
.corps .parcours-etape { position: relative; margin: 0 0 2.2em; padding-left: 50px; counter-increment: etape; }
.corps .parcours-etape::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-contraste); font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.0625rem; }
.corps .parcours-titre { margin: 0 0 .4em; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.3; }
.corps .parcours-articles { list-style: none; margin: .9em 0 0; padding: 0; display: grid; gap: 10px; }
.corps .parcours-carte { margin: 0; }
.parcours-carte a { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); color: var(--texte); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.parcours-carte a:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-carte); }
.parcours-carte a:hover .t { color: var(--appui); }
.parcours-carte img, .parcours-carte .sans-image { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); flex: none; }
.parcours-carte .sur { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.parcours-carte .t { display: block; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.0625rem; line-height: 1.25; transition: color .15s; }
@media (max-width: 599px) {
  .corps .parcours-etape { padding-left: 42px; }
  .corps .parcours-etape::before { width: 30px; height: 30px; font-size: 1rem; }
  .parcours-carte img, .parcours-carte .sans-image { width: 76px; }
}

/* Guide pas à pas (27/10) : intertitres d'étape numérotés, encadré « Étape n sur N » des articles cités, check-list. */
.corps h2.etape { display: flex; align-items: flex-start; gap: 14px; }
.corps h2.etape::before { display: none; }
.etape-numero { flex: none; width: 38px; height: 38px; margin-top: -2px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-contraste); font-size: 1.125rem; line-height: 1; }
.etape-texte { min-width: 0; }
.guide-etape { margin: 2em 0 1.6em; padding: 16px 18px; border: 1px solid var(--filet); border-left: 4px solid var(--accent); border-radius: var(--rayon-grand); background: var(--fond-2); }
.corps .guide-etape p { margin: 0; }
.guide-etape-tete { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.guide-etape-tete .icone { flex: none; width: 18px; height: 18px; color: var(--accent); }
.guide-etape-tete a { color: var(--accent); }
.corps .guide-etape-titre { margin-top: 4px; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.25rem; line-height: 1.25; }
.guide-etape-suite { display: grid; gap: 10px; margin-top: 12px; }
.guide-etape-suite a { display: block; padding: 9px 12px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); color: var(--texte); text-decoration: none; transition: border-color .15s; }
.guide-etape-suite a:hover { border-color: var(--filet-fort); }
.guide-etape-suite a:hover .t { color: var(--appui); }
.guide-etape-suite .sens { display: flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.guide-etape-suite .sens .icone { width: 14px; height: 14px; }
.guide-etape-suite .t { display: block; margin-top: 2px; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1rem; line-height: 1.25; transition: color .15s; }
@media (min-width: 600px) { .guide-etape-suite { grid-template-columns: 1fr 1fr; } .guide-etape-suite .apres { text-align: right; } .guide-etape-suite .apres .sens { justify-content: flex-end; } .guide-etape-suite .apres:only-child { grid-column: 2; } }
.corps ul.cases { list-style: none; padding-left: 0; }
.corps ul.cases > li { position: relative; padding-left: 30px; }
.corps ul.cases > li::before { content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border: 2px solid var(--filet-fort); border-radius: 4px; }
@media (max-width: 599px) { .etape-numero { width: 32px; height: 32px; font-size: 1rem; } .corps h2.etape { gap: 11px; } }

/* Module « Que préparez-vous ? » de l'accueil (27/10). */
.preparer { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.preparer a { --c: var(--accent); display: flex; align-items: flex-start; gap: 13px; height: 100%; padding: 15px 16px; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); color: var(--texte); text-decoration: none; transition: border-color .15s, background .15s; }
.preparer a:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 5%, var(--fond)); }
.preparer-titre { display: block; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.1875rem; line-height: 1.2; transition: color .15s; }
.preparer a:hover .preparer-titre { color: var(--c); }
[data-theme="dark"] .preparer a:hover .preparer-titre { color: color-mix(in srgb, var(--c) 55%, #fff); }
.preparer-texte { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--texte-2); }
.resultats-nombre { margin: 0 0 18px; color: var(--texte-2); }
.retour-accueil { margin: 22px 0 28px; }
.page-erreur .form-recherche { margin-inline: 0; }

/* Page « Mes favoris » : en-tête des pages de liste, cartes du site dessinées par le script, état vide, limites */
.page-favoris .tete-rubrique { --c: var(--vert); }
.page-favoris .tete-rubrique .sous { min-height: 1.6em; }
.favoris-annonce:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 20px; padding: 8px 10px 8px 16px; border-radius: var(--rayon); background: var(--accent-pale); font-size: .9375rem; }
.favoris-annuler { min-height: 40px; padding: 0 16px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--fond); color: var(--texte); font: 700 .875rem/1 var(--font-texte); cursor: pointer; }
.favoris-annuler:hover { color: var(--appui); border-color: var(--appui); }
.favoris-message { max-width: 720px; margin: 0; padding: 18px 20px; border-radius: var(--rayon-grand); background: var(--fond-2); color: var(--texte-2); }
.grille-cartes[hidden], .favoris-vide[hidden] { display: none; }
.carte-favori .carte-meta { flex-wrap: nowrap; gap: 8px; }
.carte-ajout { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.carte-ajout .icone { width: 15px; height: 15px; flex: none; }
/* « Retirer » passe au-dessus du lien qui couvre la carte ; cible de 44 px de haut sans agrandir la ligne */
.carte-retirer { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 44px; margin: -12px -10px -12px auto; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--texte-3); font: 600 .8125rem/1 var(--font-texte); cursor: pointer; }
.carte-retirer:hover { color: var(--appui); background: var(--fond-2); }
.carte-retirer .icone { width: 15px; height: 15px; }
/* État vide : dans la colonne de l'encadré des limites (720 px, à gauche), pictogramme à gauche du texte */
.favoris-vide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 18px; max-width: 720px; padding: 24px 24px 26px; border: 1px dashed var(--filet-fort); border-radius: var(--rayon-grand); color: var(--texte-2); }
.favoris-vide > :not(.favoris-vide-icone) { grid-column: 2; justify-self: start; }
.favoris-vide-icone { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); }
.favoris-vide-icone .icone { width: 24px; height: 24px; }
.favoris-vide-titre { margin-top: 2px; font-family: var(--font-titres); font-weight: var(--graisse-titres); font-size: 1.375rem; line-height: 1.2; color: var(--texte); }
.favoris-vide .bouton { margin-top: 10px; }
@media (max-width: 479.98px) { .favoris-vide { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 22px; } .favoris-vide > :not(.favoris-vide-icone) { grid-column: 1; } .favoris-vide-icone { grid-row: auto; } }
.favoris-vide .bouton .icone { width: 18px; height: 18px; }
.favoris-limites { max-width: 720px; padding-bottom: 48px; }

/* ---------- 9. Articles liés (fin de page) ---------- */
.a-lire { margin-top: 52px; padding-block: 40px 60px; border-top: 1px solid var(--filet); }
.grille-article:last-child { padding-bottom: 60px; }

/* ---------- 10. Pied de page : photo de la rubrique sous un voile de sa couleur ---------- */
.pied {
  --pied-teinte: var(--vert);
  --pied-sombre: color-mix(in srgb, var(--pied-teinte) 60%, #000);
  position: relative; color: var(--pied-texte);
  background-color: var(--pied-sombre);
  background-image: linear-gradient(180deg, var(--pied-sombre) 0, transparent 150px), var(--pied-photo, none);
  background-size: 100% 100%, cover;
  background-position: top, center 40%;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;
}
/* Photo en AVIF quand le navigateur sait choisir (image-set), sinon le JPEG ci-dessus */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .pied { background-image: linear-gradient(180deg, var(--pied-sombre) 0, transparent 150px), var(--pied-photo-avif, var(--pied-photo, none)); }
}
.pied-in { display: grid; gap: 32px; padding-block: 50px 34px; }
@media (min-width: 768px) { .pied-in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pied-in { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; gap: 44px; } }
.pied a { color: var(--pied-texte); text-decoration: none; }
.pied a:hover { color: color-mix(in srgb, var(--appui) 40%, #fff); text-decoration: underline; }
.pied .logo { color: var(--pied-texte); --logo-out: color-mix(in srgb, var(--vert) 30%, #e9eedc); --logo-farer: var(--pied-texte); }
.pied-presentation p { margin-top: 14px; max-width: 34em; font-size: .9375rem; line-height: 1.6; color: var(--pied-texte-2); }
.pied-titre { margin: 0 0 13px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pied-texte-2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; }
.pied-rubriques ul { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.pied-editions a { display: inline-flex; align-items: center; gap: 10px; }
.pied-editions a[aria-current] { font-weight: 700; }
.reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pied-filet); color: var(--pied-texte); background: rgb(0 0 0 / .12); }
.reseaux a:hover { background: rgb(255 255 255 / .1); border-color: color-mix(in srgb, var(--appui) 60%, transparent); text-decoration: none; }
.reseaux .icone { width: 18px; height: 18px; }
.pied-google { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 13px; border: 1px solid var(--pied-filet); border-radius: 999px; font-size: .8125rem; font-weight: 600; background: rgb(0 0 0 / .12); }
.pied-google .icone { width: 15px; height: 15px; }
.pied-google-groupe { display: inline-block; margin-top: 16px; }
.pied-google-groupe .pied-google { margin-top: 0; white-space: nowrap; }
.pied .infobulle { background: var(--pied-texte); color: var(--pied-sombre); }
.barre-copyright { border-top: 1px solid var(--pied-filet); background: rgb(0 0 0 / .22); }
.barre-copyright-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; padding-block: 16px 20px; font-size: .8125rem; color: var(--pied-texte-2); }
@media (min-width: 768px) { .barre-copyright-in { padding-right: calc(var(--marge) + 56px); } }
@media (max-width: 767.98px) { .barre-copyright-in { padding-bottom: 76px; } }
.barre-copyright ul { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; }
.barre-copyright a { color: var(--pied-texte-2); }

/* ---------- 11. Bouton haut de page, boîte de citation ---------- */
.haut-de-page { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; background: var(--accent); color: var(--accent-contraste); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .45); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s, transform .2s, background .15s; }
.haut-de-page:hover { background: var(--appui); color: #fff; }
.haut-de-page.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.haut-de-page .icone { width: 22px; height: 22px; stroke-width: 2.2; }

.boite { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--rayon-grand); background: var(--fond); color: var(--texte); box-shadow: var(--ombre-menu); }
.boite::backdrop { background: rgb(10 12 6 / .55); }
.boite-in { padding: 22px 24px 20px; }
.boite h2 { font-size: 1.5rem; margin: 0 0 12px; }
.boite textarea { width: 100%; min-height: 110px; padding: 12px; font: .9375rem/1.5 var(--font-texte); color: var(--texte); background: var(--fond-2); border: 1px solid var(--filet); border-radius: var(--rayon); resize: vertical; }
.boite-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.boite-photo { width: min(1100px, calc(100vw - 32px)); }
.boite-photo-in { padding: 14px 14px 0; }
.boite-photo img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: var(--rayon-image); }
.boite-photo [data-fermer] { display: block; margin: 10px 14px 14px auto; }
/* Petit écran (24/10) : la boîte prend tout l'écran ; un schéma y garde 1 100 px de large et se parcourt du doigt */
@media (max-width: 699px) {
  .boite-photo { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .boite-photo[open] { display: flex; flex-direction: column; }
  .boite-photo-in { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 0; }
  .boite-photo-in figcaption { padding: 0 14px; }
  .boite-photo-image { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .boite-photo img { max-height: none; border-radius: 0; }
  .boite-photo.est-schema img { width: 1100px; max-width: none; }
}

/* Page « bientôt » du pré-lancement */
.bientot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px var(--marge); text-align: center; }
.bientot .logo-svg { height: 46px; }
.bientot h1 { margin-top: 8px; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; }
.bientot-texte { max-width: 32em; font-size: 1.125rem; color: var(--texte-2); }

/* ---------- 12. Impression ---------- */
/* ---------- Fiche imprimée (27/10) ----------
   Même page, même adresse : le navigateur la remet en page pour l'A4, rien n'est à indexer. Restent l'adresse et la
   date de vérification (en tête), le titre, la signature et les dates, L'essentiel, le texte, les tableaux, les schémas,
   les calculateurs avec les valeurs saisies, la FAQ (ouverte par le script), la méthode, les sources avec leur adresse
   en clair et les corrections ; une case à cocher devant les éléments d'une liste de matériel (articles de type
   « liste »). Partent la navigation, les photos, les produits, les boutons et ce qui ne sert qu'à l'écran. Le script
   passe en thème clair le temps de l'impression. */
.seulement-impression { display: none; }
[data-imprimer][hidden] { display: none; }
.actions-page { margin-top: 14px; }
@media print {
  @page { margin: 14mm 15mm; }
  .entete, .menu-mobile, .bandeau, .pied, .col-sommaire, .col-droite, .sommaire-mobile, .partage, .suite, .a-lire, .haut-de-page, .suggestion-langue, .bandeau-mesure, .boite, .bouton-favori, .carte-retirer, .favoris-annonce,
  .bandeau-apercu, .emplacement-pub, .actions-article, .actions-page, .lien-methode, .signature .avatar, .image-principale, .figure:not(.figure-schema), .galerie, .produits, .video, .etiquettes, .bio,
  .sources a.externe, .retour-texte, .loupe, .faq summary > .icone, .faq-icone { display: none !important; }
  .seulement-impression { display: revert; }
  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .feuille { box-shadow: none !important; margin: 0 !important; padding: 0 !important; max-width: none; }
  .feuille-in { max-width: none; }
  .grille-article { display: block; }
  a { color: inherit; text-decoration: none; }
  .impression-tete { margin: 0 0 10pt; padding-bottom: 5pt; border-bottom: .75pt solid #999; font-size: 8.5pt; color: #444; overflow-wrap: anywhere; }
  .tete-article, .tete-page { padding: 0 0 6pt; }
  .surtitre { margin-bottom: 6pt; }
  .puce-rubrique { background: none !important; color: #000 !important; border: .75pt solid #000; }
  .titre-article { font-size: 22pt; line-height: 1.1; margin: 4pt 0 6pt; }
  .chapo { font-size: 11.5pt; }
  .signature { margin-top: 8pt; padding-top: 6pt; }
  .corps h2 { font-size: 15pt; margin: 14pt 0 5pt; break-after: avoid; }
  .corps h3 { font-size: 12pt; break-after: avoid; }
  .essentiel, .encart, .tableau, .figure, .formule, .citation, .calculateur, .anciennete, .faq details, .parcours-carte, .sources li { break-inside: avoid; }
  .essentiel { padding: 8pt 10pt; border: .75pt solid #999; }
  .encart, .anciennete { padding: 6pt 10pt; }
  .tableau-defile { overflow: visible !important; }
  .tableau table { width: 100%; font-size: 9pt; }
  .figure-schema img { width: auto; max-width: 100%; max-height: 95mm; }
  .calculateur { padding: 8pt 10pt; border: .75pt solid #999; }
  .calculateur-saisie input, .calculateur-saisie select { min-height: 0; padding: 2pt 4pt; border: .75pt solid #999; }
  .faq summary { padding: 6pt 0 2pt; }
  .faq-r { padding: 0 0 6pt; }
  .sources ol { font-size: 9pt; }
  .adresse-imprimee { color: #333; overflow-wrap: anywhere; }
  /* Liste de matériel : une case à cocher au stylo devant chaque élément des listes du texte. */
  .article-liste .corps > ul { list-style: none; padding-left: 0; }
  .article-liste .corps > ul > li { padding-left: 14pt; text-indent: -14pt; }
  .article-liste .corps > ul > li::before { content: ""; display: inline-block; width: 8pt; height: 8pt; margin-right: 6pt; border: 1pt solid #000; border-radius: 1pt; vertical-align: -.5pt; }
  .corps ul.cases > li::before { top: .2em; width: 8pt; height: 8pt; border: 1pt solid #000; border-radius: 1pt; }
  .guide-etape { display: none; }
  .etape-numero { background: none !important; color: #000 !important; border: 1pt solid #000; }
  /* Parcours : étapes numérotées en noir, chaque article avec son adresse. */
  .corps .parcours-etape::before { background: none !important; color: #000 !important; border: 1pt solid #000; }
  .parcours-carte a { padding: 2pt 0; border: 0; }
  .parcours-carte img, .parcours-carte .sans-image { display: none; }
  .parcours-carte .adresse-imprimee { display: block; margin-top: 1pt; font-size: 8.5pt; }
}

/* Masques (icônes en CSS) */
:root {
  --masque-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --masque-coche-rond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3Cpolyline points='7 12.5 10.5 16 17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --masque-externe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}