/* =============================================================
   PAGE D'ARTICLE (B10 / R-ART)
   Tout part des jetons du design system : aucune couleur, aucun rayon,
   aucune police n'est ecrite en dur ici. Les valeurs de repli qui suivent
   chaque `var()` sont celles de `mist-ds.css` — elles ne servent qu'a garder
   la page lisible si la feuille du design system n'a pas encore ete servie.
   ============================================================= */

/* ---------- Barre de progression de lecture ---------- */

.mist-lecture{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
.mist-lecture-jauge{
  display:block; height:100%; width:0;
  background:var(--grad-accent, linear-gradient(120deg,#E94E1B 0%,#F6A124 100%));
  /* ⚠️ PAS DE TRANSITION SUR LA LARGEUR. Le script la recalcule a chaque
     defilement : une transition ferait courir la jauge derriere le doigt,
     et le retard est tres visible au defilement rapide sur telephone. */
  will-change:width;
}
/* Le mouvement n'apporte rien ici, mais la jauge doit rester lisible. */
@media (prefers-reduced-motion:reduce){ .mist-lecture-jauge{ transition:none } }

/* ---------- Les deux colonnes ---------- */

.mist-article-aside{
  /* ⚠️ `position:sticky` ne mord QUE si aucun ancetre ne porte
     `overflow:hidden` et si l'element est plus court que la fenetre. Le
     sommaire peut etre long : on borne sa hauteur et on le fait defiler
     lui-meme, sinon la colonne cesse simplement de coller, sans rien dire. */
  position:sticky;
  /* 92px : la hauteur de l'en-tete, qui n'est PAS collant sur ce site — la
     valeur ne sert qu'a ne pas coller le bloc au bord haut de la fenetre. */
  top:24px;
  align-self:start;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  /* Barre de defilement discrete : la colonne est un element d'appui, pas un
     second contenu. */
  scrollbar-width:thin;
}
/* Sous le point de rupture d'Elementor, la colonne repasse dans le flux :
   un bloc collant sur un telephone masquerait le contenu qu'il resume. */
@media (max-width:1024px){
  .mist-article-aside{ position:static; max-height:none; overflow:visible }
}

/* ---------- Sommaire ---------- */

.mist-sommaire{
  border:1px solid var(--line,#E7E6F2);
  border-radius:var(--r-m,22px);
  background:var(--bg-mist,#F2F0F9);
  padding:16px 18px;
}
.mist-sommaire-titre{
  font-family:var(--mist-font-display,'Mulish',sans-serif);
  font-weight:800; font-size:var(--fs-small,13.5px);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink,#1F2444);
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.mist-sommaire-titre::-webkit-details-marker{ display:none }
/* Le chevron n'apparait que quand le bloc est repliable, c'est-a-dire sur
   telephone : au bureau il est toujours ouvert et un chevron mentirait. */
.mist-sommaire-titre::after{
  content:''; width:9px; height:9px; margin-left:12px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease; display:none;
}
.mist-sommaire[open] .mist-sommaire-titre::after{ transform:rotate(-135deg) }

.mist-sommaire-liste{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px }
.mist-sommaire-lien{
  display:block; padding:7px 10px; border-radius:var(--r-s,14px);
  font-size:var(--fs-small,13.5px); line-height:1.4;
  color:var(--ink-soft,#4A5076); text-decoration:none;
  border-left:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.mist-sommaire-lien:hover,.mist-sommaire-lien:focus-visible{
  background:#fff; color:var(--ink,#1F2444);
}
/* L'etat actif suit le defilement (voir mist-article.js). */
.mist-sommaire-lien.is-active{
  background:#fff; color:var(--blue,#3E4982); font-weight:600;
  border-left-color:var(--orange,#E94E1B);
}

@media (max-width:1024px){
  .mist-sommaire-titre::after{ display:block }
  .mist-sommaire{ margin:8px 0 4px }
}

/* ---------- Ligne auteur, date, temps de lecture ---------- */

.mist-article-avatar img,.mist-article-avatar .e-image img{
  border-radius:var(--r-pill,999px);
  background:#fff;
}

/* ---------- Bouton « document source » ----------
   ⚠️ LE VERROU DES 13 ARTICLES SANS PDF. Le gabarit pose le bouton pour tous
   les articles — les elements atomiques V4 n'ont pas de condition d'affichage.
   Sans cette regle, 13 des 46 afficheraient un bouton de telechargement qui ne
   telecharge rien : ni 404 ni erreur, juste un lien vers le vide.
   La classe de corps est posee par `mist_article_classe_corps()`, donc AVANT le
   rendu : pas de clignotement, pas de saut de mise en page. */
body.mist-article-sans-pdf [data-mist="pdf"]{ display:none !important }

/* ---------- Image mise en avant absente ----------
   Meme mecanisme, meme raison : sans vignette, `e-image` rend un `<img>` sans
   source et le navigateur reserve la boite du ratio 16:10 — environ 180 px de
   blanc en tete d'article. Mesure du 07/09 sur l'article 4867. */
body.mist-article-sans-image [data-mist="image"]{ display:none !important }

/* ---------- Sections qui n'ont rien a montrer ----------
   ⚠️ UNE SECTION VIDE N'EST PAS NEUTRE : elle laisse une bande de 96 px et,
   sur « articles lies », un fond degrade qui se lit comme un bloc en panne.
   Les widgets sortent proprement quand ils n'ont rien a rendre (un « A lire
   aussi » suivi du vide serait pire), mais l'enveloppe de section, elle, est
   posee par le gabarit et ne peut pas se retirer toute seule.

   `:has()` fait ce qu'aucun autre selecteur ne sait faire : remonter au
   parent. Non supporte, la regle est simplement ignoree et on retombe sur le
   comportement actuel — jamais pire. */
[data-mist="lies"]:not(:has(.mist-lies)),
[data-mist="nav"]:not(:has(.mist-artnav)){ display:none }

/* ---------- Partage ---------- */

.mist-partage{ display:grid; gap:8px }
.mist-partage-titre{
  font-family:var(--mist-font-display,'Mulish',sans-serif);
  font-weight:800; font-size:var(--fs-small,13.5px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted,#8B91AE);
}
.mist-partage-actions{ display:flex; flex-wrap:wrap; gap:8px }
.mist-partage-bouton{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:var(--r-pill,999px);
  border:1px solid var(--line,#E7E6F2); background:#fff;
  font-family:var(--body,'Inter',sans-serif); font-size:var(--fs-small,13.5px);
  color:var(--ink-soft,#4A5076); text-decoration:none; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.mist-partage-bouton:hover,.mist-partage-bouton:focus-visible{
  border-color:var(--blue-soft,#A69DCD); color:var(--blue,#3E4982);
  box-shadow:var(--shadow-soft,0 2px 8px -3px rgba(31,36,68,.08));
}
.mist-partage-bouton svg{ flex:none }
.mist-partage-retour{
  margin:0; min-height:1.2em;
  font-size:var(--fs-small,13.5px); color:var(--green,#6FBF8A); font-weight:600;
}

/* ---------- Partage compact (colonne de lecture) ----------
   Meme marquage que la variante complete, une classe de plus : rendre deux
   marquages ferait diverger l'accessible et le visible des la premiere
   retouche. Ici on ne masque QUE les libelles — les noms accessibles viennent
   des `aria-label`, qui restent. */

.mist-partage--compact{ gap:6px }
.mist-partage--compact .mist-partage-titre{ font-size:12px }
.mist-partage--compact .mist-partage-actions{ gap:6px }
.mist-partage--compact .mist-partage-bouton{ padding:9px; border-radius:50% }
/* `.mist-partage-retour` est un `<p>` frere, pas un enfant de bouton : il n'est
   pas vise ici, et le message « Lien copie » reste donc annonce. */
.mist-partage--compact .mist-partage-bouton span{ display:none }

/* 🔴 SOUS 1024 px, LA COLONNE REPASSE DANS LE FLUX. Les deux blocs de partage
   — celui du hero et celui-ci — se retrouveraient a trente pixels l'un de
   l'autre, ce qui se lit comme un doublon d'affichage. Le hero garde le sien,
   celui-ci s'efface. */
@media (max-width:1024px){
  .mist-partage--compact{ display:none }
}

/* ---------- Petit appel a l'action de la colonne ----------
   ⚠️ IL N'APPARAIT QUE SI LA HAUTEUR LE PERMET. La colonne est bornee a
   `100vh - 48px` et defile elle-meme au-dela : sur un portable a 768 px de
   haut, ajouter ce bloc sous le sommaire ferait apparaitre une barre de
   defilement dans un element d'appui, ce qui est pire que son absence. Il est
   donc masque par defaut et REVELE quand il y a la place — jamais l'inverse :
   si la feuille n'arrive pas, on retombe sur « absent », pas sur « a cheval ».

   ⚠️ La classe de base atomique est chainee : `.elementor .e-div-block-base`
   sort en (0,2,0), un selecteur d'attribut seul en (0,1,0), et il perdrait. */
[data-mist="aside-cta"],
.e-div-block-base[data-mist="aside-cta"]{ display:none }

@media (min-width:1025px) and (min-height:820px){
  [data-mist="aside-cta"],
  .e-div-block-base[data-mist="aside-cta"]{ display:block }
}

[data-mist="aside-cta"] a:hover,
[data-mist="aside-cta"] a:focus-visible{
  color:var(--orange,#E94E1B);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- Corps de l'article ---------- */

/* ⚠️ DEUX SELECTEURS, DEUX GABARITS. `[data-mist="corps"]` est celui du gabarit
   Theme Builder « MIST / Article » ; `.mist-article-corps` celui de l'ancien
   widget maison (#1155), conserve et reactivable. Jusqu'au 07/09 seul le
   second etait ecrit : sur le nouveau gabarit, `scroll-margin-top` ne
   s'appliquait donc a RIEN, et un clic dans le sommaire deposait l'intertitre
   sous l'en-tete. Le lien marchait, la cible etait juste hors de vue — aucune
   sonde ne mesure ca. */
[data-mist="corps"] :is(h2,h3),
.mist-article-corps :is(h2,h3){ scroll-margin-top:90px }

/* La largeur de lecture est portee par la piste de grille (720 px) depuis la
   version 2 du gabarit ; cette borne reste pour l'ancien gabarit, dont la
   colonne porte aussi l'image mise en avant. */
.mist-article-corps .elementor-widget-theme-post-content > .elementor-widget-container,
.mist-article-corps .mist-article-texte{ max-width:720px }

/* ---------- Typographie du corps ----------
   Ce bloc ne declare AUCUNE variable CSS. Le design system en porte deja les
   valeurs, et une variable declaree ici pourrait entrer en collision avec une
   propriete qu'Elementor lit — c'est le defaut `--display` du 06/09 :
   42 elements de l'accueil en serif, et pas une sonde pour broncher. */

[data-mist="corps"]{
  font-size:var(--fs-body,16.5px);
  /* 1.75 et non 1.6 : sur 720 px de large, une ligne porte environ 90
     caracteres, et c'est l'interligne qui rend la ligne suivante trouvable. */
  line-height:1.75;
  color:var(--ink-soft,#4A5076);
}

[data-mist="corps"] p{ margin:0 0 1.15em }
[data-mist="corps"] > *:first-child,
[data-mist="corps"] .elementor-widget-container > *:first-child{ margin-top:0 }

[data-mist="corps"] h2{
  font-family:var(--mist-font-display,'Mulish','Century Gothic','AppleGothic',sans-serif);
  font-weight:800;
  font-size:var(--fs-h3,clamp(21px, 2.1vw, 27px));
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink,#1F2444);
  /* L'espace AVANT est plus du triple de l'espace APRES : c'est lui qui separe
     deux sections, et c'est le seul repere de structure dans un texte de
     900 mots sans image intercalaire. */
  margin:clamp(38px,4.4vw,56px) 0 14px;
}
[data-mist="corps"] h3{
  font-family:var(--mist-font-display,'Mulish','Century Gothic','AppleGothic',sans-serif);
  font-weight:700;
  font-size:var(--fs-h4,19px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink,#1F2444);
  margin:clamp(26px,3vw,36px) 0 10px;
}

[data-mist="corps"] strong{ color:var(--ink,#1F2444); font-weight:700 }

/* ---------- Listes ----------
   La puce est dessinee : `list-style` ne sait pas colorer une puce
   independamment du texte, et `::marker` ne prend ni taille ni position fine
   sur tous les navigateurs vises. */
[data-mist="corps"] ul{
  list-style:none;
  margin:0 0 1.15em;
  padding:0;
}
[data-mist="corps"] ul li{
  position:relative;
  padding-left:1.6em;
  margin:0 0 .55em;
}
[data-mist="corps"] ul li::before{
  content:'';
  position:absolute;
  left:.35em;
  /* Cale sur la premiere ligne, pas sur la hauteur de l'element : une puce
     centree verticalement descend au milieu d'un item de trois lignes. */
  top:calc(.875em - 3px);
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange,#E94E1B);
}
[data-mist="corps"] ol{
  margin:0 0 1.15em;
  padding-left:1.5em;
}
[data-mist="corps"] ol li{ margin:0 0 .55em }
[data-mist="corps"] ol li::marker{
  color:var(--blue,#3E4982);
  font-weight:700;
}
[data-mist="corps"] li > ul,
[data-mist="corps"] li > ol{ margin:.5em 0 0 }
[data-mist="corps"] li:last-child{ margin-bottom:0 }

/* ---------- Citations ---------- */
[data-mist="corps"] blockquote{
  margin:clamp(26px,3vw,36px) 0;
  padding:2px 0 2px 22px;
  border-left:3px solid var(--orange,#E94E1B);
  /* La serif est la signature editoriale de la charte : gros titres de hero et
     citations, rien d'autre. */
  font-family:var(--serif,'Fraunces',Georgia,serif);
  font-size:var(--fs-lead,clamp(17px, 1.4vw, 19px));
  line-height:1.55;
  color:var(--ink,#1F2444);
}
[data-mist="corps"] blockquote p:last-child{ margin-bottom:0 }
[data-mist="corps"] blockquote cite{
  display:block;
  margin-top:10px;
  font-family:var(--body,'Inter',sans-serif);
  font-size:var(--fs-small,13.5px);
  font-style:normal;
  color:var(--ink-muted,#8B91AE);
}

/* ---------- Liens dans le texte ----------
   Le maillage interne pose 2 a 4 liens par article DANS les phrases : ils
   doivent se voir sans hacher la lecture. D'ou le soulignement decale plutot
   qu'une couleur seule — une couleur seule ne suffit pas a distinguer un lien
   pour un lecteur daltonien. */
[data-mist="corps"] a{
  color:var(--blue,#3E4982);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--blue-soft,#A69DCD);
  transition:color .15s ease,text-decoration-color .15s ease;
}
[data-mist="corps"] a:hover,
[data-mist="corps"] a:focus-visible{
  color:var(--orange,#E94E1B);
  text-decoration-color:var(--orange,#E94E1B);
}

/* ---------- Images et tableaux dans le corps ---------- */
[data-mist="corps"] :is(img,figure){ max-width:100% }
[data-mist="corps"] figure{
  margin:clamp(24px,3vw,32px) 0;
}
[data-mist="corps"] figure img{ border-radius:var(--r-m,22px); display:block }
[data-mist="corps"] figcaption{
  margin-top:10px;
  font-size:var(--fs-small,13.5px);
  color:var(--ink-muted,#8B91AE);
}
[data-mist="corps"] table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.15em;
  font-size:var(--fs-small,13.5px);
}
[data-mist="corps"] :is(th,td){
  border:1px solid var(--line,#E7E6F2);
  padding:9px 12px;
  text-align:left;
}
[data-mist="corps"] th{ background:var(--bg-mist,#F2F0F9); color:var(--ink,#1F2444) }

/* ---------- L'encadre « À retenir » garde SES metriques ----------
   🔴 SANS CE BLOC, LA TYPOGRAPHIE CI-DESSUS L'ECRASE. Ses regles vivent dans
   `mist-pages.css`, que cette feuille declare en dependance : elles sont donc
   emises AVANT. A specificite egale — `.mist-a-retenir p` et
   `[data-mist="corps"] p` valent toutes deux (0,1,1) — c'est la derniere
   servie qui gagne, et c'est la notre. Les 46 articles portent tous cet
   encadre : l'oubli se serait vu 46 fois. */
[data-mist="corps"] .mist-a-retenir{ font-size:var(--fs-small,13.5px); line-height:1.6 }
[data-mist="corps"] .mist-a-retenir p{ margin:0 0 8px }
[data-mist="corps"] .mist-a-retenir ul{ list-style:disc; margin:8px 0 0; padding-left:1.15em }
[data-mist="corps"] .mist-a-retenir ul li{ position:static; padding-left:0; margin:4px 0 }
[data-mist="corps"] .mist-a-retenir ul li::before{ content:none }
[data-mist="corps"] .mist-a-retenir :is(h2,h3,h4){
  font-size:15px;
  line-height:1.25;
  margin:0 0 8px;
  scroll-margin-top:0;
}
/* ⚠️ Le titre de l'encadre est un `<h3>` dans les 46 articles. Sans cette
   exclusion il entrerait dans le sommaire s'il etait un jour promu en `<h2>`,
   et il porterait la marge de 56 px d'un intertitre de section. */
[data-mist="corps"] .mist-a-retenir a{ text-decoration-color:currentColor }

/* ---------- Documents a telecharger (B7, 24/09) ----------
   Le bloc est ajoute a la fin du corps par `mist_article_documents_contenu()`
   quand l'article porte DEUX documents ou plus. Il vit donc sous
   `[data-mist="corps"]`, dont la typographie l'ecraserait : puce orange en
   `::before` sur chaque ligne, lien souligne bleu. D'ou le prefixe de chaque
   regle — meme partage que l'encadre « A retenir » ci-dessus.
   ⚠️ Le poids est en `--ink-soft`, PAS en `--ink-muted` : #8B91AE sur blanc
   rend 3,1:1, sous le seuil AA d'un texte de 13,5 px. #4A5076 rend 7,8:1. */
[data-mist="corps"] .mist-documents-liste{
  display:grid; gap:10px;
  list-style:none; margin:0; padding:0;
}
[data-mist="corps"] .mist-documents-liste li{ position:static; padding-left:0; margin:0 }
[data-mist="corps"] .mist-documents-liste li::before{ content:none }
[data-mist="corps"] a.mist-documents-lien{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:#fff;
  border:1px solid var(--line,#E7E6F2);
  border-radius:var(--r-s,14px);
  color:var(--ink,#1F2444);
  text-decoration:none;
  line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease;
}
[data-mist="corps"] a.mist-documents-lien:hover,
[data-mist="corps"] a.mist-documents-lien:focus-visible{
  color:var(--ink,#1F2444);
  border-color:var(--blue-soft,#A69DCD);
  box-shadow:var(--shadow-soft,0 2px 8px -3px rgba(31,36,68,.08));
}
[data-mist="corps"] a.mist-documents-lien:focus-visible{
  outline:2px solid var(--blue,#3E4982); outline-offset:2px;
}
.mist-documents-icone{
  flex:none; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--blue-mist,#F2F0F9); color:var(--blue,#3E4982);
}
.mist-documents-texte{ flex:1 1 auto; min-width:0; display:grid; gap:2px }
.mist-documents-nom{
  font-weight:600; color:var(--ink,#1F2444);
  /* Un titre de mediatheque sans espace (nom de fichier) ne doit pas faire
     deborder la ligne a 390. */
  overflow-wrap:anywhere;
}
[data-mist="corps"] a.mist-documents-lien:hover .mist-documents-nom{ color:var(--blue,#3E4982) }
.mist-documents-format{ font-size:var(--fs-small,13.5px); color:var(--ink-soft,#4A5076) }
.mist-documents-fleche{ flex:none; color:var(--orange,#E94E1B) }

/* ---------- Articles lies ---------- */

.mist-lies-titre{ margin:0 0 22px }

/* 🔴 DEPUIS LE 22/09, C'EST UN CARROUSEL, PAS `.grid.grid-3`.
   Le chrome (tete, chevrons, points, voie defilante) est generique et vit dans
   `mist-fiche.css`, qui est mise en file sur toutes les pages : ici on ne
   declare QUE la largeur de carte, parce qu'elle seule differe d'un bloc a
   l'autre. La gouttiere reste celle du design system (22 px, `mist-ds.css:177`)
   pour que ces cartes restent identiques a celles d'`/actualites/` — deux
   gabarits qui se ressemblent a 4 px pres se lisent comme une erreur. */
.mist-lies-grille{
  gap:22px;
  grid-auto-columns:calc((100% - 44px) / 3);
}
@media (max-width:900px){
  .mist-lies-grille{ grid-auto-columns:calc((100% - 22px) / 2) }
}
@media (max-width:600px){
  /* Le debord de la carte suivante est le seul signal de defilement qu'un
     telephone donne : ni barre au repos, ni survol. */
  .mist-lies-grille{ grid-auto-columns:86% }
}

/* ---------- Precedent / suivant ---------- */

.mist-artnav{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:8px 0 0;
}
.mist-artnav-lien{
  display:flex; flex-direction:column; gap:5px;
  padding:16px 18px; border-radius:var(--r-m,22px);
  border:1px solid var(--line,#E7E6F2); background:var(--grad-card,#fff);
  text-decoration:none; color:var(--ink,#1F2444);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.mist-artnav-lien:hover,.mist-artnav-lien:focus-visible{
  border-color:var(--blue-soft,#A69DCD);
  box-shadow:var(--shadow-soft,0 2px 8px -3px rgba(31,36,68,.08));
}
/* La case vide garde la colonne : sans elle, le lien restant se recentre et la
   navigation saute d'un cote a l'autre d'un article a l'autre. */
.mist-artnav-lien.is-vide{ border-color:transparent; background:none; pointer-events:none }
.mist-artnav-sens{
  font-size:var(--fs-small,13.5px); color:var(--ink-muted,#8B91AE);
}
.mist-artnav-suiv{ text-align:right }
.mist-artnav-titre{
  font-family:var(--mist-font-display,'Mulish',sans-serif);
  font-weight:700; font-size:var(--fs-h4,19px); line-height:1.25;
  letter-spacing:-.02em;
}
@media (max-width:600px){
  .mist-artnav{ grid-template-columns:1fr }
  .mist-artnav-lien.is-vide{ display:none }
  .mist-artnav-suiv{ text-align:left }
}