/* article — peaufinage 24/09 (PE-0011, lot C)
   Tout est prefixe .sd-art-*/.sd-lat-*/.sd-som-pill.is-actif pour ne rien deborder
   ailleurs, sauf UNE regle scopee a .single-post (garde-fou sticky, cf mémoire
   "overflow-x:hidden tue le sticky" — corrigee ici en overflow-x:clip, jamais sur
   les autres lots). Jetons repris de style.css (--fond,--encre,--doux,--filet,
   --surf,--accent,--accent2,--rayon,--ombre…), aucune nouvelle couleur inventee. */

/* ---- garde-fou sticky : scope au seul gabarit article, jamais site-wide ---- */
body.single-post{overflow-x:clip}

/* ---- 1. La grille a deux colonnes : corps + colonne laterale --------------- */
.sd-art-grille{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(260px,320px);
  gap:2.6rem;
  justify-content:center;
  align-items:start;
}
.sd-art-corps{min-width:0}
.sd-art-lateral{align-self:stretch}
.sd-lat-sticky{
  /* Retour Mathias 24/09 16h20 : le bloc partait sous le header FIXE (position:sticky;top:92px
     en dur, jamais mesure). --sd-tete-h est posee par un petit script dans single.php, qui lit
     la VRAIE hauteur de .sd-tete au navigateur (77px a 1440, 65px sous 1080 — verifie deux
     largeurs, elle change au point de rupture du header) ; +24px de respiration demandes.
     92px en repli tant que le script n'a pas encore tourne (mesure quasi identique). */
  position:sticky;
  top:calc(var(--sd-tete-h, 76px) + 24px);
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  padding-bottom:1.6rem;
}

@media (max-width:1099px){
  .sd-art-grille{grid-template-columns:min(760px,100%);justify-content:center}
  .sd-art-lateral{order:2}
  .sd-lat-sticky{position:static;top:auto;padding-bottom:0}
}

/* ---- 2. Le sommaire deplace en colonne laterale : meme pastilles, plus etroites,
        + etat actif au defilement (script propre a single.php) --------------- */
.sd-sommaire--lat{margin-top:0}
.sd-sommaire-liste--lat{flex-direction:column;align-items:stretch;gap:.5rem}
.sd-sommaire-liste--lat .sd-som-pill{width:100%}
.sd-som-pill{transition:background-color .15s ease,border-color .15s ease}
.sd-som-pill.is-actif{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.sd-som-pill.is-actif .sd-som-n{background:var(--sur-accent);color:var(--accent)}

/* ---- 3. Bloc "Dans la rubrique" : petites cartes image propres, jamais de
        vignette carree minuscule perdue face a du texte -------------------- */
.sd-lat-bloc{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:1.3rem 1.3rem 1.4rem}
.sd-lat-titre{font-family:var(--courant);font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--doux);margin-bottom:1rem}
.sd-lat-cartes{display:flex;flex-direction:column;gap:1rem}
.sd-carte--mini{display:flex;align-items:center;gap:.85rem;padding:0}
.sd-carte--mini .sd-carte-img{flex:0 0 64px;width:64px;height:64px;border-radius:var(--rayon-s);
  overflow:hidden;display:block}
.sd-carte--mini .sd-carte-img img,.sd-carte--mini .sd-carte-img .jr-plaque{width:64px;height:64px;
  object-fit:cover;border-radius:var(--rayon-s);display:block}
.sd-carte--mini .sd-carte-txt{min-width:0;width:100%}
.sd-carte--mini .sd-carte-titre{font-size:14.5px;line-height:1.35;font-weight:600;
  color:var(--encre);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;width:100%;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.sd-carte--mini:hover .sd-carte-titre{color:var(--accent-txt);text-decoration:underline;
  text-underline-offset:3px}
.sd-lat-fil{display:inline-block;margin-top:1.1rem;font-size:14px;font-weight:600;
  color:var(--accent-txt)}
.sd-lat-fil:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- 4. Encadres poses par le mu-plugin dans le corps (the_content) --------
        Reutilisent la famille .sd-encadre existante (rayon 22, aplat surf,
        filet accent a gauche, ombre douce) : seule la couleur du filet et le
        label changent, jamais une nouvelle forme. ------------------------- */
.sd-texte .sd-encadre-label{font-family:var(--courant);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 .6rem;display:flex;align-items:center;
  gap:.5rem}
.sd-texte .sd-encadre-label::before{content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:0 0 8px}

.sd-texte .sd-encadre--essentiel{border-left-color:var(--accent2);margin-top:0;margin-bottom:2rem}
.sd-texte .sd-encadre--essentiel .sd-encadre-label{color:var(--accent2-txt)}
.sd-texte .sd-essentiel-liste{display:grid;gap:.6rem;margin:0;list-style:none}
.sd-texte .sd-essentiel-liste>li{position:relative;padding-left:1.6rem;font-size:16.5px;
  line-height:1.5;color:var(--encre)}
.sd-texte .sd-essentiel-liste>li::before{content:"";position:absolute;left:.1rem;top:.6em;
  width:9px;height:9px;border-radius:50%;background:var(--accent2);opacity:.9}

.sd-texte .sd-encadre--conseil{border-left-color:var(--accent)}
.sd-texte .sd-encadre--conseil .sd-encadre-label{color:var(--accent-txt)}
.sd-texte .sd-encadre--conseil p{margin-top:0}
.sd-texte .sd-encadre--conseil p+p{margin-top:.8rem}

.sd-texte .sd-encadre--attention{border-left-color:#8A4A1E;background:color-mix(in srgb, var(--surf) 88%, #8A4A1E 6%)}
.sd-texte .sd-encadre--attention .sd-encadre-label{color:#8A4A1E}
:root:not([data-theme="light"]) .sd-texte .sd-encadre--attention,
:root[data-theme="dark"] .sd-texte .sd-encadre--attention{
  border-left-color:#E3A26B;background:color-mix(in srgb, var(--surf) 88%, #E3A26B 10%)}
:root:not([data-theme="light"]) .sd-texte .sd-encadre--attention .sd-encadre-label,
:root[data-theme="dark"] .sd-texte .sd-encadre--attention .sd-encadre-label{color:#E3A26B}

/* ---- 5. Listes habillees en encadre propre (hors bloc Sources, voir §6) ---- */
.sd-texte .sd-liste-encadre{background:var(--surf);border-radius:var(--rayon);
  border:1px solid var(--filet);padding:1.4rem 1.6rem;margin:1.8rem 0}
.sd-texte .sd-liste-encadre ul,.sd-texte .sd-liste-encadre ol{margin:0}
.sd-texte .sd-liste-encadre ul>li:first-child,.sd-texte .sd-liste-encadre ol>li:first-child{margin-top:0}

/* ---- 6. Bloc Sources : liste visuelle sobre et compacte (modele
        manager-de-talent.fr/personio-avis) — jamais de pave de texte avec des
        liens nus, jamais de cellule de tableau ------------------------------ */
.sd-texte .sd-liste-sources{display:grid;gap:.7rem;margin:1.6rem 0;padding:1.2rem 1.4rem;
  background:var(--fond);border:1px solid var(--filet);border-radius:var(--rayon-s)}
.sd-texte .sd-liste-sources>li{font-size:14.5px;line-height:1.5;color:var(--doux);
  padding-left:1.1rem;position:relative}
.sd-texte .sd-liste-sources>li::before{content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--doux);opacity:.6}
.sd-texte .sd-liste-sources a{color:var(--accent-txt);font-weight:600;text-decoration-color:var(--filet)}
.sd-texte .sd-liste-sources a:hover{text-decoration-color:var(--accent)}
.sd-texte h2.sd-titre-sources{margin-top:3rem}

/* ---- 7. Infographies posees a la main sur les articles les plus recents ---- */

/* "frise" d'etapes — reprend la logique pastille/numero de la famille (sd-som-n,
   listes ordonnees) mais en composant AUTONOME pour l'article, distincte du
   "chemin" de l'accueil (en refonte separee, lot A) ---------------------------- */
.sd-texte .sd-frise{margin:2rem 0;display:grid;gap:0;position:relative;
  background:var(--surf);border-radius:var(--rayon);padding:1.6rem 1.7rem;border:1px solid var(--filet)}
.sd-texte .sd-frise-etape{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);
  gap:1rem;padding:0 0 1.4rem}
.sd-texte .sd-frise-etape:last-child{padding-bottom:0}
.sd-texte .sd-frise-etape:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;
  bottom:0;width:2px;background:var(--filet)}
.sd-texte .sd-frise-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--sur-accent);font-family:var(--courant);font-size:16px;
  font-weight:700;z-index:1}
.sd-texte .sd-frise-txt{padding-top:.35rem}
.sd-texte .sd-frise-txt>*+*{margin-top:1.25rem}
.sd-texte .sd-frise-titre{font-family:var(--titre);font-weight:600;font-size:18.5px;color:var(--encre)}
.sd-texte .sd-frise-txt p:not(.sd-frise-titre){font-size:16px;color:var(--doux)}

/* cartes "en un coup d'oeil" : jamais une simple liste habillee, chaque attribut a
   son propre repere visuel (pastille pleine, meme famille que le sommaire) ------ */
.sd-texte .sd-info-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;
  margin:1.8rem 0}
.sd-texte .sd-info-carte{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon-s);
  padding:1.2rem 1.3rem;box-shadow:var(--ombre)}
.sd-texte .sd-info-nom{font-family:var(--titre);font-weight:600;font-size:17px;color:var(--encre);
  margin-bottom:.7rem}
.sd-texte .sd-info-attrs{display:grid;gap:.55rem;margin:0}
.sd-texte .sd-info-attrs>li{display:flex;align-items:flex-start;gap:.6rem;font-size:14.5px;
  line-height:1.45;color:var(--doux)}
.sd-texte .sd-info-attrs>li strong{color:var(--encre);font-weight:700}
.sd-texte .sd-info-ico{flex:0 0 8px;width:8px;height:8px;margin-top:.4em;border-radius:50%;
  background:var(--accent2)}
/* Retour Mathias 24/09 : double puce (ex. /foam-roller-rouleau/, fiches TriggerPoint GRID,
   RumbleRoller...) — la regle generique .sd-texte ul>li::before (style.css) pose un point gris
   sur TOUT <li> direct d'un <ul> dans le corps ; ces li ont DEJA leur propre repere visuel
   (.sd-info-ico, span reel, pas un pseudo-element) -> les deux se superposaient. Neutralise ici,
   apres style.css dans l'ordre de chargement, sans toucher au fichier partage des autres lots. */
.sd-texte .sd-info-attrs>li::before{content:none}
.sd-texte .sd-info-source{margin-top:.8rem;font-size:12.5px;color:var(--doux);opacity:.8}

/* rangee de "chips" reperes cle/valeur — remplace le tableau d'alignement ------- */
.sd-texte .sd-info-criteres{margin:1.8rem 0}
.sd-texte .sd-info-titre{font-family:var(--courant);font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--doux);margin-bottom:.9rem}
.sd-texte .sd-info-chips{display:flex;flex-wrap:wrap;gap:.7rem}
.sd-texte .sd-info-chip{display:flex;flex-direction:column;gap:.25rem;padding:.7rem 1rem;
  background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon-s);flex:1 1 150px}
.sd-texte .sd-info-chip-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--doux)}
.sd-texte .sd-info-chip-val{font-size:14.5px;font-weight:600;color:var(--encre)}

@media (max-width:900px){
  .sd-texte .sd-info-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sd-lat-bloc{padding:1.1rem}
  .sd-carte--mini .sd-carte-img,.sd-carte--mini .sd-carte-img img,
  .sd-carte--mini .sd-carte-img .jr-plaque{width:58px;height:58px;flex:0 0 58px}
  .sd-texte .sd-info-cartes{grid-template-columns:1fr}
  .sd-texte .sd-frise-etape{grid-template-columns:32px minmax(0,1fr)}
  .sd-texte .sd-frise-n{width:32px;height:32px;font-size:14px}
  .sd-texte .sd-frise-etape:not(:last-child)::after{left:15px;top:32px}
}

/* ---- 8. Bloc auteur de fin d'article (retour Mathias 24/09 16h20, AR-0020) --------------
   Pose par le mu-plugin PARTAGE sb-auteur-bloc.php (354 sites) : jamais touche a ce fichier.
   L'embellissement est purement local, via un selecteur PLUS SPECIFIQUE (.sd-texte en tete)
   que celui du mu-plugin (simple classe) -> gagne quel que soit l'ordre de chargement, sans
   rien changer pour les 353 autres sites. Meme famille visuelle que les encadres (rayon 22,
   aplat surf, ombre douce), photo ronde jamais ecrasee (object-fit:cover). ---- */
.sd-texte .sb-auteur-fin{
  display:flex;gap:1.4rem;align-items:center;margin:3rem 0 2rem;
  padding:1.6rem 1.8rem;border-radius:var(--rayon);
  background:var(--surf);border:1px solid var(--filet);box-shadow:var(--ombre);
}
.sd-texte .sb-auteur-fin-av{
  width:84px;height:84px;min-width:84px;border-radius:50%;object-fit:cover;
  border:3px solid var(--fond);outline:2px solid var(--accent2);outline-offset:2px;
  box-shadow:var(--ombre);
}
.sd-texte .sb-auteur-fin-txt{min-width:0}
.sd-texte .sb-auteur-fin-nom{
  font-family:var(--titre);font-size:1.15rem;font-weight:700;color:var(--encre);margin:0 0 .4rem;
}
.sd-texte .sb-auteur-fin-role{
  display:inline-flex;align-items:center;margin:0 0 .75rem;padding:.3rem .8rem;
  border-radius:999px;background:color-mix(in srgb, var(--accent2) 16%, var(--surf));
  color:var(--accent2-txt);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  text-transform:none;
}
.sd-texte .sb-auteur-fin-bio{
  font-size:.98rem;line-height:1.6;color:var(--doux);margin:0 0 .9rem;max-width:54ch;
}
.sd-texte .sb-auteur-fin-lien a{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;
  color:var(--accent-txt);padding:.5rem 1rem;border-radius:999px;border:1px solid var(--filet);
  transition:background-color .15s ease,border-color .15s ease;text-decoration:none;
}
.sd-texte .sb-auteur-fin-lien a::after{content:"→";transition:transform .15s ease}
.sd-texte .sb-auteur-fin-lien a:hover{background:var(--fond);border-color:var(--accent)}
.sd-texte .sb-auteur-fin-lien a:hover::after{transform:translateX(3px)}

@media (max-width:640px){
  .sd-texte .sb-auteur-fin{flex-direction:column;text-align:center;padding:1.4rem}
  .sd-texte .sb-auteur-fin-bio{max-width:none}
}

/* ---- Sommaire unique (25/09/2026, livraison L-260925-159BB7) : le filtre the_content
        de functions.php injecte nav.sb-sommaire dans le texte ET single.php affiche
        « Dans cette page » en colonne laterale -> deux sommaires visibles.
        >= 1100px : on garde la colonne laterale, on masque celui du texte.
        <= 1099px (colonne laterale passee sous l'article) : on garde celui du texte, en haut.
        Retour arriere : ~/sauvegardes-relinking/article-2409.css.avant-sommaire-2509 */
@media (min-width:1100px){
  .sd-texte .sb-sommaire,[data-sd-texte] .sb-sommaire{display:none}
}
@media (max-width:1099px){
  nav.sd-sommaire.sd-sommaire--lat{display:none}
}

/* ---- 6b. Note de presentation des sources academiques laissees dans leur
        langue d'origine (lot B, 25/09, ui-ux-pro-max : reutilise --doux/6,5:1
        deja verifie contraste, aucune nouvelle couleur) --------------------- */
.sd-texte p.sd-sources-note{font-size:13px;font-style:italic;line-height:1.5;
  color:var(--doux);margin:0 0 .6rem}

/* ==========================================================================
   LOT G — /peaufiner 25/09/2026, restes de la recette finale. ui-ux-pro-max
   invoque pour : encart de capture de leads (milieu + laterale), listes
   visuelles, barre de progression, cibles tactiles du header/menu bas.
   Meme famille visuelle que le reste (rayon 22, aplat surf, ombre douce,
   jetons --accent/--accent2/--doux/--filet), aucune nouvelle couleur.
   ========================================================================== */

/* ---- 9. Listes du corps -> checklist visuelle, jamais un puce brute
        (CM-0513 : "Finis les listes a puces... infographies visuelles a la
        place"). Le PHP (anagraphe-article-enrichi.php) continue de les
        emballer dans .sd-liste-encadre, seul le rendu de la liste elle-meme
        change ici : coche pleine au lieu du marqueur navigateur, meme grammaire
        que .sd-ctc-confiance-liste (page Contact, deja validee). Le bloc
        Sources (.sd-liste-sources, §6) n'est jamais concerne : classe distincte,
        deja son propre traitement compact. ---------------------------------- */
.sd-texte .sd-liste-encadre ul,.sd-texte .sd-liste-encadre ol{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.sd-texte .sd-liste-encadre li{position:relative;padding-left:2rem;font-size:16px;
  line-height:1.5;color:var(--encre)}
.sd-texte .sd-liste-encadre li::before{content:"";position:absolute;left:0;top:.1em;
  width:22px;height:22px;border-radius:50%;background:var(--accent);flex:0 0 22px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- 10. Tableau ex-litteral -> cartes (CM-0514/0525) : chip "Source" (lien),
        jamais l'URL entiere affichee en clair (debordait a 390px). ---------- */
.sd-texte .sd-info-chip-lien{color:var(--accent-txt);font-weight:700;text-decoration:none;
  overflow-wrap:anywhere}
.sd-texte .sd-info-chip-lien:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- 11. Encart de capture de leads (CM-0481/0484) : meme famille que les
        encadres (rayon 22, aplat surf, ombre douce), pose au milieu du corps
        ET dans la colonne laterale (variante --lateral, masquee sous 1100px
        pour ne jamais doubler l'encart deja present dans le texte a cette
        largeur). Champ email seul (haute conversion), bouton >=44px. -------- */
.sd-lead{margin:2.2rem 0;padding:1.6rem 1.7rem;border-radius:var(--rayon);
  background:var(--surf);border:1px solid var(--filet);box-shadow:var(--ombre);
  position:relative}
.sd-lead-kicker{font-family:var(--courant);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-txt);margin:0 0 .5rem}
.sd-lead-titre{font-family:var(--titre);font-size:1.1rem;font-weight:700;color:var(--encre);
  margin:0 0 .5rem;line-height:1.3}
.sd-lead-txte{font-size:14.5px;line-height:1.55;color:var(--doux);margin:0 0 1.1rem;max-width:52ch}
.sd-lead-champ{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-start}
.sd-lead-champ input[type=email]{flex:1 1 200px;min-width:0;font:inherit;font-size:15px;
  padding:.75rem .95rem;border-radius:999px;border:1px solid var(--filet);
  background:var(--fond);color:var(--encre);min-height:44px}
.sd-lead-champ input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.sd-lead-label-visible{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.sd-lead-bouton{flex:0 0 auto;min-height:44px}
.sd-lead-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sd-lead-alerte{font-size:13.5px;margin:0 0 .8rem;padding:.6rem .9rem;border-radius:var(--rayon-s)}
.sd-lead-alerte--ok{background:color-mix(in srgb, var(--surf) 78%, var(--accent) 14%);
  color:var(--accent-txt)}
.sd-lead-alerte--err{background:color-mix(in srgb, var(--surf) 88%, #8A4A1E 8%);color:#8A4A1E}
.sd-lead-note{font-size:12px;color:var(--doux);margin:.9rem 0 0;opacity:.85}
.sd-lead--ok .sd-lead-txte{display:none}
@media (max-width:480px){
  /* 🪤 bug trouve en REGARDANT la capture 390 (jamais en confiance sur le CSS seul) :
     flex:1 1 200px (§11) donne un flex-basis de 200px, qui s'applique a l'axe PRINCIPAL —
     en flex-direction:column ce devient la HAUTEUR, pas la largeur : le champ e-mail
     s'etirait en ovale de ~380px de haut. flex:none remet une hauteur naturelle. */
  .sd-lead-champ{flex-direction:column;align-items:stretch}
  .sd-lead-champ input[type=email]{width:100%;flex:none}
  .sd-lead-bouton{flex:none;width:100%}
}
.sd-lead--lateral{margin:0}
@media (max-width:1099px){
  .sd-lead--lateral{display:none}
}

/* ---- 12. Barre de progression de lecture (CM-0484) : fixe en tete d'ecran,
        au-dessus du header sticky, ne prend jamais de place dans le flux. ---- */
.sd-progres{position:fixed;top:0;left:0;right:0;height:3px;z-index:75;
  pointer-events:none;background:transparent}
.sd-progres-barre{height:100%;width:0;background:var(--accent);transition:width .08s linear}

/* ---- 13. Cibles tactiles du header/menu bas >= 44x44 a 390px (recette finale
        bloquant #3 : "Ouvrir les rubriques" mesure a 39x40). Specificite
        .sd-tete plus forte que style.css pour gagner quel que soit l'ordre
        de chargement, sans y toucher (consigne : jamais style.css). --------- */
@media (max-width:760px){
  .sd-tete .sd-burger{display:inline-flex;flex-direction:column;align-items:center;
    justify-content:center;min-width:44px;min-height:44px;padding:0}
  .sd-tete .sd-marque a{min-height:44px}
}