/* ============================================================================
   CONTENU_ARTICLE.CSS — Mise en page et lisibilité des articles (Guide pratique, Législation)
   ============================================================================
   Feuille de style PARTAGÉE. Elle s'applique à tout bloc portant la classe « contenu-riche » :
   le texte d'un article lu par le public, l'aperçu et la zone d'écriture de l'éditeur visuel.
   À charger APRÈS commun_style.css.

   PRINCIPES (accessibilité) :
   - La POLICE n'est jamais choisie par l'auteur : elle vient du site (et du réglage « police à haute
     lisibilité » de chaque lecteur). Ici, tout hérite.
   - Les TAILLES sont relatives (em) : elles suivent le réglage de taille du texte du lecteur.
   - Les COULEURS du texte sont une palette fermée de 5 teintes dont le contraste (≥ 4,5:1, ≥ 7:1 en
     contraste élevé) est vérifié sur le fond de la page ET sur celui des encadrés, dans le thème
     clair, le thème sombre, le contraste élevé et les modes daltonisme. La couleur ne porte jamais
     seule une information : encadrés et titres portent aussi un libellé.
   - Confort de lecture : lignes limitées à environ 70 caractères, interligne généreux, paragraphes
     espacés, titres bien séparés, tableaux défilants, images qui passent sous le texte sur mobile.

   Sommaire :
   1. Palette (thèmes)   2. Texte   3. Tailles et couleurs   4. Images   5. Encadrés
   6. Tableaux           7. Fiches de fichiers   8. Sommaire   9. Écran étroit et impression
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. PALETTE DU TEXTE ET DES ENCADRÉS (adaptée à chaque thème)
   ---------------------------------------------------------------------------- */
:root {
  --c-vert: #1F5C3F;
  --c-rouge: #A8341F;
  --c-bleu: #234E7D;
  --c-ocre: #6F4F08;
  --c-discret: #5C5846;
  --e-info-fond: #E3ECF5;
  --e-astuce-fond: #E6EFE6;
  --e-attention-fond: #F7EBC8;
  --e-important-fond: #F8E4DE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-effectif="clair"]) {
    --c-vert: #86C9A3; --c-rouge: #F29A84; --c-bleu: #8FBFEA; --c-ocre: #E8C76E; --c-discret: #B5AF9C;
    --e-info-fond: #1E2F3F; --e-astuce-fond: #24352A; --e-attention-fond: #3A3118; --e-important-fond: #3A2620;
  }
}
html[data-theme-effectif="sombre"]:root {
  --c-vert: #86C9A3; --c-rouge: #F29A84; --c-bleu: #8FBFEA; --c-ocre: #E8C76E; --c-discret: #B5AF9C;
  --e-info-fond: #1E2F3F; --e-astuce-fond: #24352A; --e-attention-fond: #3A3118; --e-important-fond: #3A2620;
}
/* Contraste élevé (clair puis sombre) : contraste d'au moins 7:1 */
html[data-contraste="eleve"]:root {
  --c-vert: #0B4A2C; --c-rouge: #8F1D0B; --c-bleu: #12427A; --c-ocre: #5C4200; --c-discret: #333333;
  --e-info-fond: #EAF1F8; --e-astuce-fond: #EAF3EA; --e-attention-fond: #FBF0C8; --e-important-fond: #FBE7E1;
}
html[data-contraste="eleve"][data-theme-effectif="sombre"]:root {
  --c-vert: #8EE0B0; --c-rouge: #FFA894; --c-bleu: #9CD0FF; --c-ocre: #FFD966; --c-discret: #DDDDDD;
  --e-info-fond: #0D2233; --e-astuce-fond: #0F2A18; --e-attention-fond: #2E2400; --e-important-fond: #33130C;
}
/* Daltonisme (rouge/vert) : le « vert » devient bleu et le « rouge » devient brun-orangé, comme le reste du site */
html[data-daltonisme="protanopie"]:root,
html[data-daltonisme="deuteranopie"]:root { --c-vert: #1D4ED8; --c-rouge: #8F4300; }
html[data-daltonisme="protanopie"][data-theme-effectif="sombre"]:root,
html[data-daltonisme="deuteranopie"][data-theme-effectif="sombre"]:root { --c-vert: #9DB8FF; --c-rouge: #F4AE63; }


/* ----------------------------------------------------------------------------
   2. TEXTE : lisible, aéré, sans police imposée par l'auteur
   ---------------------------------------------------------------------------- */
.contenu-riche {
  max-width: 70ch;
  font-size: calc(17px * var(--echelle-texte, 1));
  line-height: 1.75;
  color: var(--ink);
  overflow-wrap: anywhere;      /* une longue adresse ne fait jamais déborder la page */
  display: flow-root;           /* contient les images flottantes */
}
html[data-interligne="large"] .contenu-riche {
  line-height: 2;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
}
.contenu-riche > :first-child { margin-top: 0; }
.contenu-riche > :last-child { margin-bottom: 0; }

.contenu-riche p { margin: 0 0 1.1em; }

/* Titres : de vrais titres (repérables au lecteur d'écran), nettement séparés du texte */
.contenu-riche h3 {
  clear: both;
  margin: 2em 0 0.55em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
  font-size: 1.45em;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.contenu-riche h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.contenu-riche h4 {
  clear: both;
  margin: 1.6em 0 0.4em;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 1.15em;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  scroll-margin-top: 90px;
}

.contenu-riche ul,
.contenu-riche ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.contenu-riche li { margin-bottom: 0.45em; padding-left: 0.2em; }
.contenu-riche li > ul,
.contenu-riche li > ol { margin: 0.45em 0 0; }
.contenu-riche li::marker { color: var(--ink-soft); }

.contenu-riche strong { font-weight: 700; color: inherit; }
.contenu-riche sup, .contenu-riche sub { font-size: 0.75em; line-height: 0; }

.contenu-riche a {
  color: var(--c-bleu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.contenu-riche a:hover { text-decoration-thickness: 3px; }
.contenu-riche a:focus-visible,
.contenu-riche .table-defilante:focus-visible {
  outline: 3px solid var(--c-bleu);
  outline-offset: 3px;
  border-radius: 3px;
}

.contenu-riche blockquote {
  clear: both;
  margin: 0 0 1.2em;
  padding: 0.4em 1.2em;
  border-left: 4px solid var(--line);
  color: var(--ink-soft);
}
.contenu-riche blockquote p:last-child { margin-bottom: 0; }

.contenu-riche hr {
  clear: both;
  margin: 2em 0;
  border: none;
  border-top: 1px solid var(--line);
}


/* ----------------------------------------------------------------------------
   3. TAILLES ET COULEURS DU TEXTE (palette fermée)
   ---------------------------------------------------------------------------- */
.contenu-riche .t-normal { font-size: 1em; }
.contenu-riche .t-petit { font-size: 0.875em; }
.contenu-riche .t-grand { font-size: 1.25em; line-height: 1.4; }
.contenu-riche .t-tres-grand { font-size: 1.55em; line-height: 1.3; }

.contenu-riche .c-normal { color: var(--ink); }
.contenu-riche .c-vert { color: var(--c-vert); }
.contenu-riche .c-rouge { color: var(--c-rouge); }
.contenu-riche .c-bleu { color: var(--c-bleu); }
.contenu-riche .c-ocre { color: var(--c-ocre); }
.contenu-riche .c-discret { color: var(--c-discret); }


/* ----------------------------------------------------------------------------
   4. IMAGES : à gauche, au centre, à droite ou pleine largeur
   ---------------------------------------------------------------------------- */
.contenu-riche .fig {
  margin: 1.4em 0;
  max-width: 100%;
}
.contenu-riche .fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.contenu-riche .fig figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--ink-soft);
}
.contenu-riche .fig-s { width: 30%; min-width: 150px; }
.contenu-riche .fig-m { width: 50%; min-width: 200px; }
.contenu-riche .fig-l { width: 75%; }
.contenu-riche .fig-pleine { width: 100%; clear: both; }
.contenu-riche .fig-centre { clear: both; margin-left: auto; margin-right: auto; }
.contenu-riche .fig-centre figcaption { text-align: center; }
.contenu-riche .fig-gauche { float: left; margin: 0.3em 1.6em 1em 0; }
.contenu-riche .fig-droite { float: right; margin: 0.3em 0 1em 1.6em; }
.contenu-riche img.img-ligne { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }


/* ----------------------------------------------------------------------------
   5. ENCADRÉS : « À retenir », « Bon à savoir », « Attention », « Important »
      (un libellé en toutes lettres : la couleur n'est jamais seule)
   ---------------------------------------------------------------------------- */
.contenu-riche .encadre {
  clear: both;
  display: flow-root;
  margin: 1.5em 0;
  padding: 0.9em 1.2em 0.6em;
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: 4px;
  background: var(--paper-raised);
}
.contenu-riche .encadre > :last-child { margin-bottom: 0.4em; }
.contenu-riche .encadre-etiquette,
.contenu-riche .encadre[data-etiquette]::before {
  display: block;
  margin: 0 0 0.35em;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.contenu-riche .encadre[data-etiquette]::before { content: attr(data-etiquette); }
.contenu-riche .encadre-info { background: var(--e-info-fond); border-color: var(--c-bleu); }
.contenu-riche .encadre-info .encadre-etiquette,
.contenu-riche .encadre-info[data-etiquette]::before { color: var(--c-bleu); }
.contenu-riche .encadre-astuce { background: var(--e-astuce-fond); border-color: var(--c-vert); }
.contenu-riche .encadre-astuce .encadre-etiquette,
.contenu-riche .encadre-astuce[data-etiquette]::before { color: var(--c-vert); }
.contenu-riche .encadre-attention { background: var(--e-attention-fond); border-color: var(--c-ocre); }
.contenu-riche .encadre-attention .encadre-etiquette,
.contenu-riche .encadre-attention[data-etiquette]::before { color: var(--c-ocre); }
.contenu-riche .encadre-important { background: var(--e-important-fond); border-color: var(--c-rouge); }
.contenu-riche .encadre-important .encadre-etiquette,
.contenu-riche .encadre-important[data-etiquette]::before { color: var(--c-rouge); }


/* ----------------------------------------------------------------------------
   6. TABLEAUX (en-têtes de colonnes, lignes alternées, défilement horizontal si besoin)
   ---------------------------------------------------------------------------- */
.contenu-riche .table-defilante {
  clear: both;
  margin: 1.5em 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.contenu-riche table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  line-height: 1.55;
}
.contenu-riche .table-defilante table { min-width: 420px; }
.contenu-riche caption {
  padding: 0.7em 0.9em;
  text-align: left;
  font-weight: 700;
  caption-side: top;
}
.contenu-riche th,
.contenu-riche td {
  padding: 0.6em 0.9em;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.contenu-riche thead th {
  background: var(--paper-raised);
  border-bottom: 2px solid var(--ink-soft);
  font-weight: 700;
}
.contenu-riche tbody tr:nth-child(even) { background: var(--paper-raised); }
.contenu-riche tbody th { font-weight: 700; }
.contenu-riche > table { margin: 1.5em 0; border: 1px solid var(--line); }   /* tableau non enveloppé (zone d'écriture de l'éditeur) */


/* ----------------------------------------------------------------------------
   7. FICHES DE FICHIERS : icône + nom ; un PDF s'ouvre, les autres fichiers se téléchargent
   ---------------------------------------------------------------------------- */
.contenu-riche .fiche-piece { clear: both; margin: 1.1em 0; }
.contenu-riche .fiche-lien {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;                    /* cible tactile confortable */
  padding: 0.7em 1.1em 0.7em 0.9em;
  border: 1px solid var(--line);
  border-left: 5px solid var(--c-vert);
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
}
.contenu-riche a.fiche-lien:hover { background: var(--e-astuce-fond); }
.contenu-riche a.fiche-lien:hover .fiche-nom { text-decoration: underline; text-underline-offset: 3px; }
.contenu-riche .fiche-icone { flex: 0 0 auto; color: var(--c-vert); }
.contenu-riche .fiche-texte { display: flex; flex-direction: column; min-width: 0; }
.contenu-riche .fiche-nom { font-weight: 700; line-height: 1.35; }
.contenu-riche .fiche-meta { font-size: 0.82em; color: var(--ink-soft); }
.contenu-riche .fiche-action { font-size: 0.82em; font-weight: 600; color: var(--c-bleu); }


/* ----------------------------------------------------------------------------
   8. SOMMAIRE « Dans cet article » (créé par le JavaScript de la page)
   ---------------------------------------------------------------------------- */
.sommaire-article {
  max-width: 70ch;
  margin: 0 0 1.8em;
  padding: 0.9em 1.2em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raised);
}
.sommaire-article-titre {
  margin: 0 0 0.4em;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: calc(14px * var(--echelle-texte, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sommaire-article ol { margin: 0; padding-left: 1.3em; }
.sommaire-article ol ol { margin-top: 0.2em; }
.sommaire-article li { margin: 0.25em 0; }
.sommaire-article a { color: var(--c-bleu); text-underline-offset: 3px; }
.sommaire-article a:focus-visible { outline: 3px solid var(--c-bleu); outline-offset: 2px; }


/* ----------------------------------------------------------------------------
   9. ÉCRAN ÉTROIT ET IMPRESSION
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Sur téléphone, plus de texte « qui entoure » une image : elle passe au-dessus, à sa propre largeur */
  .contenu-riche .fig-gauche,
  .contenu-riche .fig-droite,
  .contenu-riche .fig-centre,
  .contenu-riche .fig-s,
  .contenu-riche .fig-m,
  .contenu-riche .fig-l {
    float: none;
    width: 100%;
    min-width: 0;
    margin: 1.2em 0;
  }
  .contenu-riche .fig-s { width: 60%; }
  .contenu-riche .fig-gauche.fig-s { margin-right: auto; }
  .contenu-riche .fig-droite.fig-s { margin-left: auto; }
  .contenu-riche h3 { font-size: 1.3em; }
}
@media print {
  .contenu-riche { max-width: none; color: #000; }
  .contenu-riche a { color: #000; }
  .contenu-riche .fig, .contenu-riche .encadre, .contenu-riche .fiche-piece, .contenu-riche table { break-inside: avoid; }
}