/* ==========================================================================
   LECTURE.CSS — Un Monde Tanzanie, V2 (retours Mathias 15/09/2026).
   Gabarits concernés : single.php, archive.php (rubriques), page-a-propos.php,
   page-les-dossiers.php. Enqueue fait par functions.php (autre designer) sur
   ces gabarits uniquement.

   Règle tenue : AUCUNE couleur en dur — uniquement les jetons var(--...) déjà
   déclarés dans style.css (la palette Savane leur est appliquée ailleurs).
   Les rares superpositions translucides utilisent color-mix() avec repli
   rgba(0,0,0,x) neutre (non teinté) pour les navigateurs plus anciens.
   ========================================================================== */

/* ---------- 1. ARTICLE — EN-TÊTE / MÉTA COURTE --------------------------- */
.u-lecture-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:1.1rem;
  font-size:13px;color:var(--sourde)}
.u-lecture-meta>*{display:inline-flex;align-items:center}
.u-lecture-meta>*:not(:first-child){margin-left:1rem;position:relative}
.u-lecture-meta>*:not(:first-child)::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--filet);margin-right:1rem;flex:none}
.u-lecture-meta-auteur{gap:.5rem}
.u-lecture-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.u-lecture-meta a{color:var(--sourde);text-decoration:underline;text-decoration-color:var(--kanga-clair,var(--kanga));text-underline-offset:.2em}
.u-lecture-meta a:hover{color:var(--kanga)}

/* Lettrine sur le tout premier paragraphe du corps — jamais sur un encadré */
.u-lecture-corps>p:first-of-type::first-letter{
  font-family:var(--titre);font-size:3.3em;line-height:.82;float:left;
  padding:.04em .1em 0 0;color:var(--kanga)}

/* ---------- 2. MISE EN DEUX COLONNES ≥1100px ------------------------------ */
.u-lecture-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;
  margin-top:2.2rem;align-items:start}
@media (min-width:1100px){
  .u-lecture-layout{grid-template-columns:minmax(0,700px) minmax(280px,340px);
    gap:3.4rem;justify-content:space-between}
}
.u-lecture-col-principale{min-width:0}
.u-lecture-aside{display:none}
@media (min-width:1100px){
  .u-lecture-aside{display:block;position:sticky;top:calc(var(--u-tete-h) + 1.6rem)}
}
.u-lecture-aside-carte{background:var(--feuille);border:1px solid var(--filet);
  border-radius:var(--u-rayon);padding:1.5rem}
.u-lecture-aside-carte + .u-lecture-aside-carte{margin-top:1.3rem}
.u-lecture-aside .u-sommaire{background:transparent;padding:0;margin-bottom:0}
.u-lecture-aside .u-sommaire a{transition:color .15s ease}
.u-lecture-aside .u-sommaire a.is-lu{color:var(--kanga);font-weight:700}
.u-lecture-aside-titre{font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sourde);margin-bottom:1rem}
.u-lecture-aside .u-form--reduit{border:0;padding:0;box-shadow:none}
.u-lecture-reassurance{display:flex;gap:.55rem;align-items:flex-start;margin-top:1.1rem;
  font-size:12.5px;line-height:1.5;color:var(--sourde)}
.u-lecture-reassurance svg{width:16px;height:16px;flex:none;margin-top:.15em;color:var(--kanga)}
.u-lecture-aside-bouton{margin-top:.2rem}

/* ---------- 3. IMAGE À LA UNE REPOSITIONNÉE DANS LE CORPS ------------------ */
.u-lecture-illu{margin:2.3rem 0}
.u-lecture-illu img{width:100%;height:auto;max-height:460px;object-fit:cover;
  border-radius:var(--u-rayon)}
.u-lecture-illu figcaption{margin-top:.6rem;font-family:var(--display);font-size:12px;
  letter-spacing:.02em;color:var(--sourde)}

/* ---------- 4. ENCADRÉS "LE SAVIEZ-VOUS / À SAVOIR / BON À SAVOIR / CONSEIL" -- */
.u-lecture-encadre{display:flex;gap:1rem;align-items:flex-start;margin:2.3rem 0;
  padding:1.3rem 1.5rem;background:var(--feuille);border:1px solid var(--filet);
  border-left:3px solid var(--kanga);border-radius:0 var(--u-rayon) var(--u-rayon) 0}
.u-lecture-encadre-icone{width:34px;height:34px;border-radius:50%;background:var(--natron);
  display:grid;place-items:center;flex:none;color:var(--kanga)}
.u-lecture-encadre-icone svg{width:17px;height:17px}
.u-lecture-encadre-corps{min-width:0}
.u-lecture-encadre-label{font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--kanga);margin-bottom:.3rem}
.u-lecture-encadre-corps p{margin-top:0;font-size:16px;line-height:1.6}

/* ---------- 5. ENCART DE CAPTURE DE LEAD IN-TEXTE (casse les murs de texte) -- */
.u-lecture-lead-intexte{margin:3.2rem 0;padding:1.9rem;background:var(--feuille);
  border:1px solid var(--filet);border-radius:var(--u-rayon);
  box-shadow:0 14px 34px rgba(0,0,0,.07)}
.u-lecture-lead-haut{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:1.3rem}
.u-lecture-lead-svg{width:52px;height:52px;flex:none;color:var(--kanga)}
.u-lecture-lead-haut h3{font-size:21px}
.u-lecture-lead-haut p{margin-top:.45rem;font-size:14.5px;color:var(--sourde)}
.u-lecture-lead-intexte .u-form--reduit{border:0;padding:0;box-shadow:none}

/* ---------- 6. TABLEAUX / LISTES DU CORPS ---------------------------------- */
.u-lecture-corps ul,.u-lecture-corps ol{margin-top:1.1rem;padding-left:1.5rem}
.u-lecture-corps ul{list-style:none}
.u-lecture-corps ul>li{position:relative;padding-left:1.4rem;margin-top:.55rem}
.u-lecture-corps ul>li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--kanga)}
.u-lecture-corps ol{list-style:decimal;margin-top:1.1rem}
.u-lecture-corps ol>li{margin-top:.55rem;padding-left:.3rem}
.sbs_tableau{border:1px solid var(--filet);border-radius:var(--u-rayon)}
.sbs_tableau table{margin:0}

/* ---------- 7. SIGNATURE AUTEUR (classes existantes de style.css réutilisées) */
.u-lecture-signature-lien{display:inline-block;margin-top:.4rem;font-size:12.5px;
  font-family:var(--display);font-weight:700;letter-spacing:.04em;color:var(--kanga);
  text-decoration:underline;text-underline-offset:3px}

/* ---------- 8. "DANS LA MÊME RUBRIQUE" — plus de vide, section resserrée --- */
.u-lecture-connexes{padding-block:2.6rem 0;margin-top:3.2rem;border-top:1px solid var(--filet)}
.u-lecture-connexes .u-h2{font-size:clamp(24px,2vw + 16px,32px);margin-top:0}

/* ---------- 9. PAGE HERO PHOTO (rubriques + à propos) ---------------------- */
.u-lecture-page-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;
  margin-top:calc(-1 * var(--u-tete-h));padding-top:var(--u-tete-h);color:var(--ecume)}
@media (max-width:780px){.u-lecture-page-hero{min-height:42vh}}
.u-lecture-page-hero-photo{position:absolute;inset:0;z-index:-2}
.u-lecture-page-hero-photo img{width:100%;height:100%;object-fit:cover}
.u-lecture-page-hero-voile{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.58);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--encre) 82%, transparent) 0%,
    color-mix(in srgb, var(--encre) 28%, transparent) 65%,
    color-mix(in srgb, var(--encre) 42%, transparent) 100%)}
.u-lecture-page-hero-in{padding-block:3.2rem 2.4rem}
.u-lecture-page-hero .u-sur-titre{color:var(--ecume);opacity:.92}
.u-lecture-page-hero h1{color:var(--ecume);font-size:clamp(34px,4vw + 16px,58px);
  margin-top:.5rem;max-width:18ch}
.u-lecture-page-hero p{color:var(--ecume);opacity:.94;margin-top:.9rem;font-size:17px;max-width:54ch}
.u-lecture-page-hero-compte{font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ecume);opacity:.85}
.u-lecture-page-hero-depliant{margin-top:1.1rem;max-width:54ch}
.u-lecture-page-hero-depliant summary{font-family:var(--display);font-size:12.5px;
  font-weight:700;letter-spacing:.05em;color:var(--ecume);cursor:pointer;opacity:.85}
.u-lecture-page-hero-depliant p{margin-top:.5rem;font-size:14.5px}

/* ---------- 10. ARTICLE "À LA UNE" DE RUBRIQUE ------------------------------ */
.u-lecture-une{display:grid;grid-template-columns:1.15fr 1fr;gap:2.4rem;align-items:stretch;
  margin-top:2.4rem}
@media (max-width:860px){.u-lecture-une{grid-template-columns:1fr}}
.u-lecture-une-photo{position:relative;overflow:hidden;border-radius:var(--u-rayon);aspect-ratio:4/3}
.u-lecture-une-photo img{width:100%;height:100%;object-fit:cover}
.u-lecture-une-corps{display:flex;flex-direction:column;justify-content:center;min-width:0}
.u-lecture-une-corps .u-sur-titre{color:var(--kanga)}
.u-lecture-une-corps h2{font-size:clamp(26px,2.4vw + 14px,38px);margin-top:.5rem}
.u-lecture-une-corps p{margin-top:.9rem;color:var(--sourde);font-size:16px}
.u-lecture-une-meta{margin-top:1.1rem;font-size:13px;color:var(--sourde)}

/* ---------- 11. GRILLE ÉDITORIALE À TAILLES ALTERNÉES ---------------------- */
.u-lecture-grille-mag{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;margin-top:2.8rem}
.u-lecture-grille-mag article:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.u-lecture-grille-mag article:nth-child(5n+1) figure{aspect-ratio:1/1}
.u-lecture-grille-mag figure{aspect-ratio:4/3;overflow:hidden;border-radius:var(--u-rayon)}
.u-lecture-grille-mag figure img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.u-lecture-grille-mag article:hover figure img{transform:scale(1.045)}
.u-lecture-grille-mag h3{margin-top:1rem;font-size:19px}
.u-lecture-grille-mag p{margin-top:.5rem;color:var(--sourde);font-size:14px}
.u-lecture-grille-mag time{display:block;margin-top:.5rem;font-size:12px;color:var(--sourde)}
@media (max-width:900px){
  .u-lecture-grille-mag{grid-template-columns:repeat(2,1fr)}
  .u-lecture-grille-mag article:nth-child(5n+1){grid-column:span 2;grid-row:auto}
  .u-lecture-grille-mag article:nth-child(5n+1) figure{aspect-ratio:4/3}
}
@media (max-width:560px){
  .u-lecture-grille-mag{grid-template-columns:1fr}
  .u-lecture-grille-mag article:nth-child(5n+1){grid-column:span 1}
}

/* ---------- 12. PAGE "LES DOSSIERS" — CARTES MAGAZINE ---------------------- */
.u-lecture-dossier-groupe{margin-top:3.4rem}
.u-lecture-dossier-groupe:first-child{margin-top:0}
.u-lecture-dossier-entete{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--encre)}
.u-lecture-dossier-entete h2{font-size:clamp(22px,2vw + 14px,30px)}
.u-lecture-dossier-entete h2 a{color:inherit}
.u-lecture-dossier-n{font-family:var(--display);font-size:12px;color:var(--sourde);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.u-lecture-dossier-chapo{margin-top:.6rem;color:var(--sourde);font-size:14.5px;max-width:64ch}
.u-lecture-dossier-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.8rem}
@media (max-width:900px){.u-lecture-dossier-grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.u-lecture-dossier-grille{grid-template-columns:1fr}}
.u-lecture-dossier-carte{background:var(--feuille)}
.u-lecture-dossier-carte figure{aspect-ratio:4/3;overflow:hidden}
.u-lecture-dossier-carte figure img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.u-lecture-dossier-carte:hover figure img{transform:scale(1.04)}
.u-lecture-dossier-carte-in{padding:1.1rem 1.2rem 1.4rem}
.u-lecture-dossier-carte h3{font-size:18px}
.u-lecture-dossier-carte p{margin-top:.5rem;font-size:13.5px;color:var(--sourde)}
.u-lecture-dossier-carte time{display:block;margin-top:.6rem;font-size:12px;color:var(--sourde)}

/* ---------- 13. PAGE "À PROPOS" -------------------------------------------- */
.u-lecture-piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem}
@media (max-width:780px){.u-lecture-piliers{grid-template-columns:1fr}}
.u-lecture-pilier{padding:1.8rem;background:var(--feuille);border:1px solid var(--filet);
  border-radius:var(--u-rayon)}
.u-lecture-pilier .u-glyphe{color:var(--kanga);width:32px;height:32px}
.u-lecture-pilier h3{margin-top:1rem;font-size:19px}
.u-lecture-pilier p{margin-top:.6rem;color:var(--sourde);font-size:14.5px}

.u-lecture-auteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2.4rem}
@media (max-width:780px){.u-lecture-auteurs{grid-template-columns:1fr}}
.u-lecture-carte-auteur{display:flex;gap:1.2rem;padding:1.8rem;background:var(--feuille);
  border:1px solid var(--filet);border-radius:var(--u-rayon);color:var(--encre)}
/* Carte claire posée sur bande sombre (équipe éditoriale) : on referme le
   contexte de couleur ici, sans dépendre de la bande qui l'entoure. */
.u-lecture-carte-auteur img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}
.u-lecture-carte-auteur h3{font-size:19px}
.u-lecture-carte-auteur h3 a{color:inherit}
.u-lecture-carte-auteur p{margin-top:.5rem;color:var(--sourde);font-size:14px}
.u-lecture-auteur-rubriques{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.u-lecture-auteur-rubriques span{font-size:11px;font-family:var(--display);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sourde);border:1px solid var(--filet);
  padding:.25rem .6rem;border-radius:var(--u-rayon)}
.u-lecture-carte-auteur .u-lien-cercle{margin-top:1.1rem}

.u-lecture-methode{margin-top:2rem;display:grid;gap:0}
.u-lecture-methode-item{display:flex;gap:1rem;align-items:flex-start;padding-block:1.3rem;
  border-bottom:1px solid var(--filet)}
.u-lecture-methode-item:last-child{border-bottom:0}
.u-lecture-methode-item .u-glyphe{color:var(--kanga);width:26px;height:26px;flex:none;margin-top:.2rem}
.u-lecture-methode-item h3{font-size:17px;font-family:var(--corps);font-weight:700}
.u-lecture-methode-item p{margin-top:.35rem;color:var(--sourde);font-size:14.5px}

.u-lecture-bandeau{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2.6rem}
.u-lecture-bandeau figure{aspect-ratio:1/1;overflow:hidden;border-radius:var(--u-rayon)}
.u-lecture-bandeau img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.u-lecture-bandeau{grid-template-columns:1fr 1fr}}

.u-lecture-apropos-texte{margin-top:1.6rem;max-width:68ch}

/* 15/09 (retour Mathias) : formulaire de la colonne droite — une colonne, libelles lisibles */
.u-lecture-aside-titre{font-size:20px;letter-spacing:0;text-transform:none;color:var(--encre);margin-bottom:.3rem}
.u-lecture-aside-sous{font-size:13.5px;line-height:1.5;color:var(--sourde);margin-bottom:1.1rem}
.u-lecture-aside .u-form--reduit .u-form-etape2{padding:0;gap:.8rem}
.u-lecture-aside .u-form-ligne{grid-template-columns:1fr;gap:.8rem}
.u-lecture-aside .u-form-etape2 label{font-family:var(--corps);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--encre);margin-bottom:.3rem}
.u-lecture-aside .u-form-etape2 input,.u-lecture-aside .u-form-etape2 textarea{padding:.6rem .75rem;font-size:15px;
  background:color-mix(in srgb, var(--feuille) 55%, #fff)}
.u-lecture-aside .u-form-etape2 textarea{min-height:84px;resize:vertical}
.u-lecture-aside .u-form-etape2 label.u-consentement{font-size:12px;font-weight:400;color:var(--sourde);margin:0}
.u-lecture-aside .u-btn{width:100%}

/* 15/09 : signature unique en carte */
div.u-signature{align-items:center;gap:1.2rem;margin-top:3rem;padding:1.5rem 1.6rem;border:1px solid var(--filet);
  border-radius:var(--u-rayon);background:var(--feuille)}
div.u-signature .u-signature-photo{width:78px;height:78px}
.u-signature-label{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kanga)}
div.u-signature .u-signature-nom{font-size:19px;margin-top:.1rem}

/* 15/09 : sommaire + formulaire doivent tenir ensemble dans l'ecran pendant la lecture */
.u-lecture-aside .u-lecture-aside-carte{padding:1.2rem 1.3rem}
.u-lecture-aside .u-sommaire ol{max-height:max(120px, calc(100vh - 640px));overflow-y:auto;overscroll-behavior:contain;padding-right:.3rem}
.u-lecture-aside .u-sommaire li{font-size:13.5px;line-height:1.4}
.u-lecture-aside .u-form-ligne:has(input[name="telephone"]){display:none}
.u-lecture-aside .u-form-etape2 textarea{min-height:64px}
.u-lecture-aside .u-lecture-aside-sous{margin-bottom:.8rem}
.u-lecture-aside .u-lecture-reassurance{margin-top:.8rem}
/* 15/09 (2) : le sommaire defile avec la page, seule la carte formulaire reste collee */
@media (min-width:1100px){
  .u-lecture-aside{position:static;align-self:stretch}
  .u-lecture-aside .u-sommaire ol{max-height:none;overflow:visible}
  .u-lecture-aside > .u-lecture-aside-carte:last-child{position:sticky;top:calc(var(--u-tete-h, 76px) + 1.2rem)}
}

/* 15/09 (Mathias, CM-0513) : plus de listes a puces — infographies et cartes animees */
.u-lecture-corps ul.u-infocartes{list-style:none;padding:0;margin:1.6rem 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;counter-reset:ic}
.u-lecture-corps ul.u-infocartes>li{counter-increment:ic;margin:0;padding:1rem 1.1rem 1rem 3.3rem;position:relative;
  background:var(--feuille);border:1px solid var(--filet);border-radius:var(--u-rayon);font-size:15.5px;line-height:1.5;
  transition-delay:calc(var(--i,0) * 70ms)}
.u-lecture-corps ul.u-infocartes>li::before{content:counter(ic,decimal-leading-zero);left:1.05rem;top:1rem;width:auto;height:auto;
  background:none;border-radius:0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--kanga)}

.u-info-sac{margin:2rem 0;padding:1.6rem;border-radius:calc(var(--u-rayon) * 2);background:var(--natron);border:1px solid var(--filet)}
.u-lecture-corps .u-info-sac p{margin:0}
.u-info-sac-sur{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kanga)}
.u-lecture-corps .u-info-sac .u-info-sac-titre{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.2;color:var(--encre);margin-top:.2rem}
.u-info-jauge{margin:1.3rem 0 1.5rem}
.u-lecture-corps .u-info-jauge-legende{font-size:13px;font-weight:600;color:var(--encre);margin-bottom:.5rem}
.u-info-jauge-barre{position:relative;height:16px;border-radius:99px;background:var(--feuille);border:1px solid var(--filet);overflow:hidden}
.u-info-jauge-rempli{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--kanga),color-mix(in srgb, var(--kanga) 55%, #e9b44c));transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.u-info-jauge-marge{position:absolute;left:75%;right:0;top:0;bottom:0;opacity:0;transition:opacity .6s ease 1.6s;
  background:repeating-linear-gradient(45deg,transparent 0 6px,color-mix(in srgb, var(--kanga) 30%, transparent) 6px 12px)}
.u-info-jauge.is-visible .u-info-jauge-rempli{width:75%}
.u-info-jauge.is-visible .u-info-jauge-marge{opacity:1}
.u-info-jauge-reperes{position:relative;height:2.4rem;font-size:12.5px;line-height:1.3;color:var(--sourde)}
.u-info-jauge-reperes span{position:absolute;top:.45rem;transform:translateX(-50%);white-space:nowrap}
.u-info-jauge-reperes strong{display:block;color:var(--encre);font-size:13.5px}
.u-info-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.u-info-zone{background:var(--feuille);border:1px solid var(--filet);border-radius:var(--u-rayon);padding:1.1rem 1.2rem;
  transition-delay:calc(var(--i,0) * 120ms)}
.u-info-zone--cabine{border-color:color-mix(in srgb, var(--kanga) 55%, var(--filet));box-shadow:inset 4px 0 0 var(--kanga)}
.u-info-zone-tete{display:flex;align-items:center;gap:.75rem;margin-bottom:.8rem}
.u-info-picto{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--natron);color:var(--kanga);flex:none;
  transition:transform .3s ease}
.u-info-zone:hover .u-info-picto{transform:rotate(-8deg) scale(1.08)}
.u-info-picto svg{width:21px;height:21px}
.u-lecture-corps .u-info-zone-titre{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25;color:var(--encre)}
.u-info-zone-titre small{display:block;font-family:var(--corps);font-weight:400;font-size:12.5px;color:var(--sourde);margin-top:.1rem}
.u-lecture-corps ul.u-info-items{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.u-lecture-corps ul.u-info-items>li{margin:0;padding:.4rem .75rem;border-radius:99px;background:var(--natron);font-size:13.5px;line-height:1.35;color:var(--encre)}
.u-lecture-corps ul.u-info-items>li::before{content:none}
.u-info-soute{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;padding:.8rem 1rem;border:1.5px dashed color-mix(in srgb, var(--sourde) 60%, transparent);
  border-radius:var(--u-rayon);font-size:14.5px;line-height:1.45;color:var(--encre)}
@media (max-width:640px){
  .u-info-sac{padding:1.2rem 1rem}
  .u-info-zones{grid-template-columns:1fr}
  .u-info-jauge-reperes span:nth-child(2) em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .u-info-jauge-rempli{transition:none;width:75%} .u-info-jauge-marge{transition:none;opacity:1}
}

/* Sources : cartes numerotees, nom + date */
.u-lecture-corps ol.u-sources{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;counter-reset:src}
.u-lecture-corps ol.u-sources>li{counter-increment:src;margin:0;display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .95rem;
  border:1px solid var(--filet);border-radius:var(--u-rayon);background:var(--feuille)}
.u-lecture-corps ol.u-sources>li::before{content:counter(src);flex:none;width:24px;height:24px;border-radius:50%;background:var(--natron);
  color:var(--kanga);font:700 12px/24px var(--display);text-align:center}
.u-lecture-corps ol.u-sources p{margin:0;font-size:14px;line-height:1.35}
.u-sources strong{display:block;color:var(--encre)}
.u-sources span{display:block;color:var(--sourde);font-size:12.5px;margin-top:.15rem}
/* 15/09 : titres de l'infographie dans la police des titres ; reperes de jauge empiles sur mobile */
.u-lecture-corps .u-info-sac .u-info-sac-titre{font-family:var(--titre);font-weight:400;font-size:28px}
.u-lecture-corps .u-info-zone-titre{font-family:var(--titre);font-weight:400;font-size:19px}
@media (max-width:640px){
  .u-info-jauge-reperes{height:auto;display:flex;justify-content:space-between;gap:.8rem;margin-top:.45rem}
  .u-info-jauge-reperes span{position:static;transform:none !important;white-space:normal}
  .u-info-jauge-reperes span:first-child{display:none}
  .u-info-jauge-reperes span:last-child{text-align:right}
}

/* 15/09 (Mathias) : plus aucun tableau — comparatif en cartes a jauges */
.u-cies{margin:1.8rem 0}
.u-cies-legende{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;font-size:12.5px;color:var(--sourde);margin-bottom:.8rem}
.u-cies-legende span{display:inline-flex;align-items:center;gap:.4rem}
.u-cies-echelle{margin-left:auto}
.u-pastille{width:12px;height:12px;border-radius:3px;display:inline-block}
.u-pastille--tout,.u-cie-seg--tout{background:linear-gradient(90deg,var(--kanga),color-mix(in srgb, var(--kanga) 60%, #e9b44c))}
.u-pastille--soute,.u-cie-seg--soute{background:var(--kanga)}
.u-pastille--cabine,.u-cie-seg--cabine{background:#e9b44c}
.u-cies-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.u-cie{background:var(--feuille);border:1px solid var(--filet);border-radius:calc(var(--u-rayon) * 1.6);padding:1.2rem 1.15rem 1rem;
  transition-delay:calc(var(--i,0) * 130ms);display:flex;flex-direction:column}
.u-lecture-corps .u-cie p{margin:0}
.u-cie-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.u-lecture-corps .u-cie-nom{font-family:var(--titre);font-size:20px;line-height:1.15;color:var(--encre)}
.u-lecture-corps .u-cie-kg{font-size:14px;color:var(--sourde);white-space:nowrap}
.u-cie-kg strong{font-family:var(--titre);font-weight:400;font-size:38px;line-height:1;color:var(--kanga)}
.u-cie-barre{display:flex;height:26px;margin:.8rem 0 .5rem;border-radius:8px;background:var(--natron);overflow:hidden}
.u-cie-seg{width:0;display:flex;align-items:center;padding-left:.5rem;overflow:hidden;transition:width 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 130ms + .25s)}
.u-cie.is-visible .u-cie-seg{width:var(--w)}
.u-cie-seg b{font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap}
.u-cie-seg--cabine b{color:var(--encre)}
.u-lecture-corps .u-cie-note{font-size:13px;line-height:1.45;color:var(--sourde);margin-bottom:.7rem}
.u-cie-ligne{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem 0;border-top:1px solid var(--filet)}
.u-cie-ico{width:30px;height:30px;border-radius:50%;background:var(--natron);color:var(--kanga);display:grid;place-items:center;flex:none}
.u-cie-ico svg{width:16px;height:16px}
.u-lecture-corps .u-cie-ligne p{font-size:13.5px;line-height:1.4;color:var(--encre)}
.u-cie-ligne em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sourde);margin-bottom:.1rem}
@media (max-width:900px){ .u-cies-grille{grid-template-columns:1fr} .u-cies-echelle{margin-left:0} }
@media (prefers-reduced-motion:reduce){ .u-cie-seg{transition:none;width:var(--w)} }

/* Tableaux restants du contenu (conversion automatique du theme) : une fiche par ligne */
.u-fiches-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin:1.8rem 0}
.u-fiche-tab{background:var(--feuille);border:1px solid var(--filet);border-radius:calc(var(--u-rayon) * 1.6);padding:1.1rem 1.15rem;
  transition-delay:calc(var(--i,0) * 110ms);box-shadow:inset 0 3px 0 var(--kanga)}
.u-lecture-corps .u-fiche-tab-titre{font-family:var(--titre);font-size:20px;line-height:1.2;color:var(--encre);margin:0 0 .5rem}
.u-fiche-tab dl{margin:0}
.u-fiche-tab dl>div{padding:.55rem 0;border-top:1px solid var(--filet)}
.u-fiche-tab dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sourde)}
.u-fiche-tab dd{margin:.1rem 0 0;font-size:14px;line-height:1.45;color:var(--encre)}

/* 15/09 (retour Mathias) : en-tete d'article en deux colonnes, image a la une a droite */
.u-art-tete-image{position:relative;margin:1.8rem 0 0;aspect-ratio:4 / 3;border-radius:calc(var(--u-rayon) * 2);overflow:hidden;
  box-shadow:0 22px 44px -28px rgba(40,25,10,.55)}
.u-art-tete-image img{display:block;width:100%;height:100%;object-fit:cover}
.u-art-tete-image figcaption{position:absolute;right:.6rem;bottom:.55rem;padding:.15rem .55rem;border-radius:99px;
  font-size:11px;color:#fff;background:rgba(20,14,8,.45)}
@media (min-width:1100px){
  .u-art-tete--image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:3.5rem;align-items:center}
  .u-art-tete--image .u-art-titre{max-width:18ch}
  .u-art-tete--image .u-art-tete-image{margin-top:0}
}
/* « Dans la meme rubrique » ne colle plus au pied de page */
.u-lecture-connexes{padding-bottom:5.5rem}

/* 15/09 : pub maison retraite-exacte — colonne (entre sommaire et formulaire colle) et corps */
.u-lecture-aside-pub{margin-top:1.3rem}
.u-lecture-aside-pub .sb-pub{margin:0}
.u-lecture-corps .sb-pub{margin:2.2rem 0}
.u-lecture-corps .sb-pub a,.u-lecture-corps .sb-pub a:hover{text-decoration:none;border-bottom:0;background-image:none}
/* La carte mobile de la regie porte une hauteur en ligne (300 px) qui rognait le bouton */
.u-lecture-corps .sb-pub .fmobile{height:auto !important}
.u-lecture-corps .sb-pub .fmobile .re__cta{margin-top:.6rem}

/* 15/09 (retour Mathias) : la pub de colonne prend la meme largeur que les cartes et respire */
.u-lecture-aside-pub{margin:1.3rem 0 0}
.u-lecture-aside-pub .sb-pub,.u-lecture-aside-pub .sb-pub .re{width:100% !important;max-width:none}
.u-lecture-aside-pub .sb-pub .re{height:auto !important;border-radius:var(--u-rayon);border-color:var(--filet)}
.u-lecture-aside-pub .sb-pub .f300x600 .re__img{height:210px;flex-basis:210px}
.u-lecture-aside-pub .sb-pub .f300x600 .re__body{padding:1rem 1.3rem 1.1rem}
.u-lecture-aside-pub .sb-pub .f300x600 .re__cta{margin-top:1rem}
.u-lecture-aside > .u-lecture-aside-pub + .u-lecture-aside-carte{margin-top:1.3rem}

/* 15/09 (retour Mathias) : cartes de liste — jamais d'orpheline sur une 2e ligne, texte pleine largeur */
.u-lecture-corps ul.u-infocartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.u-lecture-corps ul.u-infocartes--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-lecture-corps ul.u-infocartes--deux>li:last-child:nth-child(odd){grid-column:1 / -1}
.u-lecture-corps ul.u-infocartes>li{padding:1.15rem 1.25rem 1.2rem;font-size:15.5px;line-height:1.55;
  box-shadow:inset 0 3px 0 var(--kanga)}
.u-lecture-corps ul.u-infocartes>li::before{position:static;display:block;margin-bottom:.45rem;font-size:22px;line-height:1;
  font-family:var(--titre);font-weight:400}
.u-lecture-corps ul.u-infocartes>li>strong:first-child{display:block;font-family:var(--titre);font-weight:400;font-size:19px;
  line-height:1.25;color:var(--encre);margin-bottom:.3rem}
@media (max-width:760px){
  .u-lecture-corps ul.u-infocartes,.u-lecture-corps ul.u-infocartes--trois{grid-template-columns:1fr}
}
