/* Blog Au fil du jour — s'appuie sur les tokens de site.css (jamais de couleur en dur). */

/* ---------- Fil d'Ariane ---------- */
.ariane { font-size: .9375rem; color: var(--encre-douce); }
.ariane ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ariane li + li::before { content: "›"; margin-right: .35rem; color: var(--ligne-forte); }
.ariane a { color: var(--encre-douce); }
.ariane [aria-current] { color: var(--encre); }

/* ---------- En-tête d'article ---------- */
.article-tete { background: var(--nuit); color: var(--sur-nuit); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }
.article-tete .ariane, .article-tete .ariane a { color: var(--sur-nuit-doux); }
.article-tete .ariane [aria-current] { color: var(--sur-nuit); }
.article-tete .ariane li + li::before { color: var(--sur-nuit-doux); }
.article-tete-interieur { max-width: 780px; }
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.75rem; font-size: .9375rem; color: var(--sur-nuit-doux); }
.article-meta .categorie { color: var(--nuit); background: var(--fil); padding: .15rem .65rem; border-radius: 999px; font-weight: 700; }
.article-tete h1 { margin-top: 1rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); line-height: 1.08; }
.article-chapeau { margin-top: 1.25rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--sur-nuit-doux); max-width: 62ch; }

/* Photo de tête : chevauche le bas de l'aplat nuit, plus large que la colonne de texte */
.article-tete.avec-photo { padding-bottom: clamp(5rem, 12vw, 9rem); }
.article-photo { position: relative; margin-top: calc(-1 * clamp(3.5rem, 9vw, 6.5rem)); margin-bottom: 0; }
.article-photo img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-carte); background: var(--nuit-2); box-shadow: var(--ombre-objet); }
.article-photo figcaption, .blog-tete-photo figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--encre-douce); text-align: right; }
.article-photo figcaption a, .blog-tete-photo figcaption a { color: inherit; }
@media (max-width: 640px) { .article-photo img { aspect-ratio: 4 / 3; } }

/* ---------- Corps ---------- */
.article { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.article-colonne { max-width: 720px; }
.a-retenir { background: var(--sarcelle-pale); color: var(--sarcelle-texte); border-radius: var(--r-carte); padding: 1.25rem 1.4rem; }
.a-retenir h2 { font-family: var(--font-texte); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; color: var(--encre); }
.a-retenir ul { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.a-retenir li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; }
.a-retenir li::before { content: ""; width: .55rem; height: .55rem; margin-top: .6rem; border-radius: 50%; background: var(--sarcelle); }

.corps { margin-top: 2.5rem; font-size: 1.1875rem; line-height: 1.7; }
.corps h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.75rem 0 .9rem; }
.corps h3 { font-family: var(--font-texte); font-weight: 700; font-size: 1.2rem; letter-spacing: 0; margin: 1.75rem 0 .5rem; }
.corps p { margin: 0 0 1.1rem; }
.corps ul, .corps ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.corps li { margin-bottom: .45rem; padding-left: .2rem; }
.corps li::marker { color: var(--terre); }
.corps a { color: var(--sarcelle-texte); text-decoration-thickness: 1px; }
.corps strong { color: var(--encre); }

.avertissement-medical { margin-top: 2rem; font-size: 1rem; color: var(--encre-douce); padding-top: 1.25rem; border-top: 1px solid var(--ligne); }

.article-faq { margin-top: 3rem; }
.article-faq h2, .sources h2, .a-lire h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); }
.article-faq .faq-liste { margin-top: 1rem; }

.sources { margin-top: 3rem; font-size: 1rem; }
.sources ol { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--encre-douce); }
.sources a { color: var(--sarcelle-texte); word-break: break-word; }
.sources .editeur { color: var(--encre-douce); }
.sources-date { margin-top: .75rem; color: var(--encre-douce); font-size: .9375rem; }

/* Encadré produit : sobre, en fin d'article, jamais au milieu de l'information */
.encart-produit { margin-top: 3rem; background: var(--nuit); color: var(--sur-nuit); border-radius: var(--r-carte); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: .75rem; }
.encart-produit h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }
.encart-produit p { color: var(--sur-nuit-doux); max-width: 58ch; }
.encart-produit .bouton { justify-self: start; margin-top: .25rem; }

/* ---------- À lire aussi / listes d'articles ---------- */
.a-lire { margin-top: 3.5rem; }
.cartes-articles { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.carte-article { position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.25rem 1.3rem 1.35rem; display: grid; gap: .5rem; align-content: start; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.carte-article:hover { border-color: var(--ligne-forte); transform: translateY(-2px); }
.carte-article:focus-within { outline: 3px solid var(--sarcelle); outline-offset: 2px; }
.carte-article .cat { font-size: .875rem; font-weight: 700; color: var(--terre); }
.carte-article h3 { font-size: 1.3rem; line-height: 1.2; }
.carte-article h3 a { color: var(--encre); text-decoration: none; }
.carte-article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-carte); }
.carte-article h3 a:focus-visible { outline: none; }
.carte-article p { font-size: 1rem; color: var(--encre-douce); }
.carte-article .duree { font-size: .875rem; color: var(--encre-douce); }
/* Cartes avec vignette (page Guides et « À lire aussi ») ; l'accueil garde ses cartes texte */
.carte-article.avec-photo { padding: 0; overflow: hidden; gap: 0; }
.carte-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ligne); }
.carte-texte { display: grid; gap: .5rem; align-content: start; padding: 1.1rem 1.3rem 1.35rem; }
@media (min-width: 900px) {
  .rubrique .cartes-articles { grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); }
  .carte-une { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .carte-une .carte-photo { height: 100%; aspect-ratio: auto; min-height: 300px; }
  .carte-une .carte-texte { align-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .carte-une h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); }
  .carte-une p { font-size: 1.0625rem; max-width: 46ch; }
}
@media (prefers-reduced-motion: reduce) { .carte-article, .carte-article:hover { transition: none; transform: none; } }

/* ---------- Page d'accueil du blog ---------- */
.blog-tete { background: var(--nuit); color: var(--sur-nuit); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.blog-tete h1 { margin-top: 1.5rem; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); max-width: 18ch; }
.blog-tete p { margin-top: 1rem; max-width: 60ch; color: var(--sur-nuit-doux); font-size: 1.2rem; }
.blog-tete .ariane, .blog-tete .ariane a { color: var(--sur-nuit-doux); }
.blog-tete .ariane [aria-current] { color: var(--sur-nuit); }
.blog-tete-grille { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.blog-tete .blog-tete-compte { margin-top: 1.5rem; font-size: 1rem; color: var(--fil); font-weight: 700; }
.blog-tete-photo { margin: 0; }
.blog-tete-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-carte); background: var(--nuit-2); }
.blog-tete-photo figcaption { color: var(--sur-nuit-doux); }
@media (min-width: 768px) {
  .blog-tete-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .blog-tete-photo img { aspect-ratio: 720 / 860; }
}
.rubrique + .rubrique { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.rubrique h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.rubrique > p { margin-top: .4rem; color: var(--encre-douce); max-width: 60ch; }
.charte-redaction { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: clamp(1.25rem, 3vw, 2rem); max-width: 820px; }
.charte-redaction h2 { font-size: 1.6rem; }
.charte-redaction ul { margin: 1rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--encre-douce); }

/* ---------- Visuels éditoriaux dans le corps des guides ----------
   Infographies en HTML (texte réel, lisible par les lecteurs d'écran), sans boîte : un filet d'encre en tête,
   la source en pied. Les éléments teintés à l'intérieur ne sont donc jamais des cartes dans une carte.
   Mode d'emploi pour la rédaction : _redaction/BRIEF.md, section « Visuels ». */
.visuel { margin: 2.5rem 0; padding-top: 1rem; border-top: 2px solid var(--encre); font-size: 1.0625rem; line-height: 1.5; }
.corps .visuel ul, .corps .visuel ol { margin: 0; padding: 0; list-style: none; }
.corps .visuel li { margin: 0; padding: 0; }
.corps .visuel p { margin: 0; }
.visuel-titre { margin-bottom: 1.25rem; font-family: var(--font-titre); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); line-height: 1.2; color: var(--encre); text-wrap: balance; }
.visuel-titre small { display: block; margin-top: .35rem; font-family: var(--font-texte); font-size: .9375rem; line-height: 1.4; color: var(--encre-douce); }
.corps .visuel .visuel-source { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--ligne); font-size: .875rem; color: var(--encre-douce); }
.pastille { display: inline-block; margin-top: .4rem; padding: .1rem .65rem; border-radius: 999px; background: var(--terre-pale); color: var(--terre-texte); font-size: .875rem; font-weight: 700; }

/* Étapes numérotées reliées par le fil (parcours, démarches) */
.etapes { display: grid; gap: 1.25rem; counter-reset: etape; }
.corps .etapes > li { counter-increment: etape; position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.etapes > li::before { content: counter(etape); grid-row: 1 / span 4; position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--nuit); color: var(--sur-nuit); font: 700 1.05rem/2.5rem var(--font-texte); text-align: center; }
.etapes > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: -1.25rem; width: 2px; background: var(--terre); opacity: .5; }
.etapes > li > strong { padding-top: .45rem; color: var(--encre); }
.etapes .detail { color: var(--encre-douce); }
.etapes .pastille { justify-self: start; }

/* Enchaînement court (flux d'une alerte, d'une décision) */
.flux { display: grid; gap: 1.75rem; }
.corps .flux > li { position: relative; padding: .9rem 1rem; border-radius: var(--r); background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.flux > li strong { display: block; color: var(--encre); }
.flux > li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -1.35rem; width: .7rem; height: .7rem; border-right: 2px solid var(--terre); border-bottom: 2px solid var(--terre); transform: translateX(-50%) rotate(45deg); }
@media (min-width: 640px) {
  .flux { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.75rem; }
  .flux > li:not(:last-child)::after { left: auto; right: -1.3rem; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
}

/* Tableau comparatif : tableau vrai sur grand écran, fiches empilées sur mobile */
.comparatif { width: 100%; border-collapse: collapse; font-size: 1rem; }
.comparatif caption { text-align: left; }
.comparatif th, .comparatif td { padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.comparatif thead th { padding-top: 0; border-bottom: 2px solid var(--ligne-forte); font-size: .9375rem; color: var(--terre-texte); }
.comparatif tbody th { width: 26%; color: var(--encre); }
.comparatif td { color: var(--encre-douce); }
.comparatif td strong { color: var(--encre); }
@media (max-width: 639px) {
  .comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparatif tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--ligne); }
  .comparatif tbody th, .comparatif td { display: block; width: auto; padding: .2rem 0; border: 0; }
  .comparatif tbody th { padding-bottom: .45rem; font-size: 1.0625rem; }
  .comparatif td::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 700; color: var(--terre-texte); }
  .comparatif td + td { margin-top: .45rem; }
}

/* Barres proportionnelles (montants, estimations) ; --a = fin de barre, --de = début d'une plage */
.barres { display: grid; gap: 1rem; }
.corps .barres > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lib val" "piste piste" "note note"; gap: .3rem .75rem; align-items: baseline; }
.barre-libelle { grid-area: lib; font-weight: 700; color: var(--encre); }
.barre-valeur { grid-area: val; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--encre); text-align: right; }
.barre-piste { grid-area: piste; position: relative; height: .85rem; border-radius: 999px; background: var(--ligne); overflow: hidden; }
.barre, .barre-plage { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.barre { left: 0; width: var(--a); background: var(--sarcelle); }
.barre-plage { left: var(--de); width: calc(var(--a) - var(--de)); background: repeating-linear-gradient(-45deg, var(--sarcelle) 0 3px, var(--sarcelle-pale) 3px 6px); border-radius: 0 999px 999px 0; }
.barre-note { grid-area: note; font-size: .9375rem; color: var(--encre-douce); }
.barres .hors-champ .barre-valeur { color: var(--encre-douce); font-weight: 400; }

/* Chiffres clés : valeur typographique, libellé dessous, séparés par un filet (pas de cartes) */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem 1.5rem; }
.corps .chiffres > li { display: grid; gap: .35rem; align-content: start; padding-top: .75rem; border-top: 2px solid var(--fil); }
.chiffre-valeur { font-family: var(--font-titre); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); line-height: 1; color: var(--terre); }
.chiffre-libelle { font-size: .9375rem; color: var(--encre-douce); }

/* Frise d'une journée (ou d'un parcours dans le temps) : le fil passe du jour à la nuit */
.frise { position: relative; display: grid; gap: 1.1rem; }
.frise::before { content: ""; position: absolute; left: .5rem; top: .6rem; bottom: .6rem; width: 3px; border-radius: 3px; background: var(--terre); opacity: .55; transform: translateX(-50%); }
.frise-jour::before { opacity: 1; background: linear-gradient(to bottom, var(--fil), var(--terre) 55%, var(--nuit)); }
.corps .frise > li { position: relative; display: grid; gap: .15rem; padding-left: 2rem; }
.frise > li::before { content: ""; position: absolute; left: .5rem; top: .45rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--terre); transform: translateX(-50%); }
.frise-moment { font-weight: 700; color: var(--terre-texte); }
.frise > li > span:last-child { color: var(--encre-douce); }
@media (min-width: 640px) {
  .corps .frise > li { grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 1rem; }
}

/* « Plutôt que… / Essayez… » : des phrases réelles tirées des sources */
.phrases { display: grid; gap: 1rem; }
.phrase { display: grid; gap: .5rem; }
.phrase + .phrase { padding-top: 1rem; border-top: 1px solid var(--ligne); }
.corps .visuel .phrase-eviter { padding: .7rem 0; color: var(--encre-douce); }
.corps .visuel .phrase-dire { padding: .7rem .9rem; border-radius: var(--r); background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.phrase-etiquette { display: block; margin-bottom: .15rem; font-size: .8125rem; font-weight: 700; color: var(--encre); }
@media (min-width: 640px) { .phrase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } }

/* Liste à cocher (questions à poser, critères, documents) */
.checklist { display: grid; gap: .75rem; }
.corps .checklist > li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .8rem; }
.checklist > li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: .22rem; border: 2px solid var(--sarcelle); border-radius: 4px; }
.checklist strong { color: var(--encre); }
@media (min-width: 720px) { .checklist.deux-colonnes { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* Échelle graduée (du plus léger au plus protecteur, par âge, par durée) */
.echelle { display: grid; gap: .9rem; }
.corps .echelle > li { display: grid; gap: .25rem; align-content: start; padding-top: .7rem; border-top: 8px solid var(--niveau, var(--sarcelle)); }
.echelle-nom { font-weight: 700; color: var(--encre); }
.echelle-detail { font-size: .9375rem; color: var(--encre-douce); }
.echelle .n1 { --niveau: color-mix(in srgb, var(--sarcelle) 25%, var(--sarcelle-pale)); }
.echelle .n2 { --niveau: color-mix(in srgb, var(--sarcelle) 45%, var(--sarcelle-pale)); }
.echelle .n3 { --niveau: color-mix(in srgb, var(--sarcelle) 65%, var(--sarcelle-pale)); }
.echelle .n4 { --niveau: color-mix(in srgb, var(--sarcelle) 85%, var(--sarcelle-pale)); }
.echelle .n5 { --niveau: var(--nuit); }
@media (min-width: 640px) {
  .echelle { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; }
}

/* Deux colonnes séparées par un filet (sur place / à distance…) */
.duo { display: grid; gap: 1.5rem; }
.duo-titre { margin-bottom: .6rem !important; font-weight: 700; color: var(--terre-texte); }
.corps .duo li { position: relative; padding-left: 1.1rem; margin-bottom: .45rem; }
.duo li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sarcelle); }
@media (min-width: 640px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .duo > div + div { padding-left: 2rem; border-left: 1px solid var(--ligne); }
}

/* Les parts d'une facture */
.parts { display: grid; gap: .9rem; }
.corps .parts > li { display: grid; gap: .2rem; align-content: start; padding: .8rem .2rem 0 0; border-top: 10px solid var(--part, var(--sarcelle)); }
.parts > li:nth-child(1) { --part: var(--terre); }
.parts > li:nth-child(2) { --part: var(--fil); }
.parts > li:nth-child(3) { --part: var(--sarcelle); }
.part-nom { font-weight: 700; color: var(--encre); }
.part-payeur { color: var(--encre); }
.part-note { font-size: .9375rem; color: var(--encre-douce); }
@media (min-width: 640px) {
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
}

/* Modèle de cahier à recopier (carnet de liaison, notes d'observation) */
.carnet { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); border: 1px solid var(--ligne); font-size: .9375rem; }
.carnet th { padding: .6rem .6rem; border-bottom: 2px solid var(--terre); text-align: left; vertical-align: bottom; color: var(--encre); font-size: .875rem; line-height: 1.3; }
.carnet td { height: 2.4rem; padding: .5rem .6rem; border-bottom: 1px solid var(--ligne); color: var(--encre-douce); vertical-align: top; }
.carnet th + th, .carnet td + td { border-left: 1px solid var(--ligne); }

/* Encadré d'alerte (urgence) */
.visuel.alerte { padding: 1.1rem 1.25rem; border-top: 0; border-radius: var(--r); background: var(--terre-pale); color: var(--terre-texte); }
.visuel.alerte strong { color: var(--terre-texte); }
.visuel.alerte .visuel-titre { margin-bottom: .8rem; color: var(--terre-texte); }
.visuel.alerte .checklist > li::before { border-color: var(--terre); }
.corps .visuel .alerte-urgence { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--terre) 30%, transparent); font-weight: 700; }
.comparatif .th-detail { display: block; margin-top: .15rem; font-size: .875rem; font-weight: 400; color: var(--encre-douce); }
.numeros { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .6rem !important; }
.numeros b { font-family: var(--font-titre); font-weight: 400; font-size: 1.6rem; line-height: 1; margin-right: .35rem; }

/* Encadré pratique à recopier ou afficher (numéros utiles) */
.visuel.encadre { padding: 1.1rem 1.25rem; border-top: 0; border-radius: var(--r); background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.visuel.encadre .visuel-titre { margin-bottom: .6rem; }

/* Phrases à dire à un enfant : la citation d'abord, l'explication ensuite */
.messages { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .messages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.corps .messages > li { display: grid; gap: .5rem; align-content: start; padding-top: .8rem; border-top: 2px solid var(--fil); }
.message-phrase { font-family: var(--font-titre); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.35rem); line-height: 1.25; color: var(--encre); }
.message-detail { font-size: .9375rem; color: var(--encre-douce); }

/* Dos d'une photo légendée */
.dos-photo { display: grid; gap: 1.25rem; }
.dos-photo-carton { max-width: 30rem; padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--ligne); border-radius: 4px; box-shadow: 0 1px 2px rgb(14 53 51 / .08), 0 10px 24px -12px rgb(14 53 51 / .3); transform: rotate(-1.2deg); }
.dos-photo-texte { font-family: var(--font-titre); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.4; color: var(--encre); }
.dos-photo-texte span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .22em; }
.dos-photo .qui { text-decoration-color: var(--sarcelle); }
.dos-photo .ou { text-decoration-color: var(--terre); }
.dos-photo .quand { text-decoration-color: var(--ligne-forte); }
.dos-photo-cles { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.dos-photo-cles li { display: flex; align-items: center; gap: .5rem; }
.dos-photo-cles li::before { content: ""; width: 1.4rem; height: 4px; border-radius: 2px; background: var(--cle); }
.dos-photo-cles .qui { --cle: var(--sarcelle); }
.dos-photo-cles .ou { --cle: var(--terre); }
.dos-photo-cles .quand { --cle: var(--ligne-forte); }

/* Mémoire : ce qui s'efface d'abord (illustration qualitative, sans échelle) */
.memoire { display: grid; gap: 1.1rem; }
.memoire-ligne { display: grid; gap: .4rem; }
.memoire-quand { font-weight: 700; color: var(--encre); }
.memoire-bande { height: 1.1rem; border-radius: 999px; border: 1px dashed var(--ligne-forte); background: linear-gradient(to right, var(--sarcelle) 0, var(--sarcelle) var(--net), transparent var(--flou)); }
.memoire-reperes { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; color: var(--encre-douce); }
.memoire-reperes span:last-child { text-align: right; }

/* Liste numérotée en grille (facteurs, éléments d'une liste officielle) */
.grille-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: 1.75rem; counter-reset: item; }
.corps .grille-liste > li { counter-increment: item; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--ligne); }
.grille-liste > li::before { content: counter(item, decimal-leading-zero); min-width: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--terre); }
.grille-liste .pastille { margin: 0 0 0 auto; font-size: .8125rem; }

/* ---------- Section « Guides » de l'accueil ---------- */
.guides-accueil .cartes-articles { margin-top: clamp(2rem, 4vw, 2.75rem); }
.guides-lien { margin-top: 1.75rem; }