/*
Theme Name: Os à l'épreuve
*/

/* ==========================================================================
   OS À L'ÉPREUVE — refonte du 07/09/2026 (CM-0218/CM-0219)
   Direction : DIRECTION-ARTISTIQUE.md. « Le calme d'un centre de rééducation
   baigné de lumière du matin. » Sauge + ivoire d'os + craie + grès, jamais de
   bleu hôpital ni de rose lifestyle. Composé pour une vue de 65 ans : rien
   sous 15px, corps 18,5px/1,75, cibles tactiles 48px, focus visible 3px sauge.
   Remplace ENTIÈREMENT l'ancien gabarit « papier glacé » (.pg-*, rose #9D2E5A
   + laiton #6C5538) : cette peau générique de revue partagée par le réseau
   disparaît en totalité de ce fichier (direction §10).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS — palette claire par défaut, sombre en @media ET [data-theme]
      (aucune couleur définie SEULEMENT dans un bloc media/attribut).
   -------------------------------------------------------------------------- */
:root{
  --os:     #F4F0E6;  /* ivoire d'os — fond principal, jamais #fff */
  --craie:  #E7E0D0;  /* craie — cartes, encadrés, bandes claires */
  --encre:  #2A2520;  /* noisette brûlée — tout le texte, jamais #000 */
  --gres:   #726A5D;  /* le neutre CHOISI — métadonnées, légendes, crédits */
  --sauge:  #3E6157;  /* accent unique — liens, boutons, filets, pastilles */
  --nuit:   #22322D;  /* nuit de sauge — bandes sombres + pied de page */
  --brique: #A8452F;  /* sémantique — avertissement médical UNIQUEMENT */
  --filet:  #DCD4C3;  /* séparateurs, bordures fines */
  --ombre:  0 1px 2px rgba(42,37,32,.06); /* une seule ombre, très basse */
  /* --nuit reste sombre dans les DEUX modes : le sauge clair (constante, pas de bascule)
     est le SEUL accent lisible dessus. Contraste vérifié ≈ 4.7:1 sur #22322D et #121614. */
  --sauge-clair: #7FB39F;
  /* idem pour le texte : --nuit ne devient JAMAIS clair, donc le texte posé dessus
     (bandes nuit, pied de page, tableaux, hero sur photo assombrie) ne peut pas
     suivre --os/--encre qui, eux, s'inversent avec le mode. Constantes dédiées. */
  --clair:  #F4F0E6;
  --sombre: #2A2520;

  --f-serif: 'Piazzolla', Georgia, 'Times New Roman', serif;
  --f-sans:  'Signika', 'Helvetica Neue', Arial, sans-serif;

  /* la trame trabéculaire — alvéoles hexagonales, honeycomb tileable exact */
  --ap-trame-craie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%233E6157' stroke-width='1.6'%3E%3Cpolygon points='26,0 52,15 52,45 26,60 0,45 0,15'/%3E%3Cpolygon points='52,45 78,60 78,90 52,105 26,90 26,60'/%3E%3Cpolygon points='0,45 26,60 26,90 0,105 -26,90 -26,60'/%3E%3Cpolygon points='52,-45 78,-30 78,0 52,15 26,0 26,-30'/%3E%3Cpolygon points='0,-45 26,-30 26,0 0,15 -26,0 -26,-30'/%3E%3C/g%3E%3C/svg%3E");
  --ap-trame-nuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23F4F0E6' stroke-width='1.6'%3E%3Cpolygon points='26,0 52,15 52,45 26,60 0,45 0,15'/%3E%3Cpolygon points='52,45 78,60 78,90 52,105 26,90 26,60'/%3E%3Cpolygon points='0,45 26,60 26,90 0,105 -26,90 -26,60'/%3E%3Cpolygon points='52,-45 78,-30 78,0 52,15 26,0 26,-30'/%3E%3Cpolygon points='0,-45 26,-30 26,0 0,15 -26,0 -26,-30'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --os:     #1B1F1D;
    --craie:  #232A27;
    --encre:  #EFEAE0;
    --gres:   #A79E90;
    --sauge:  #7FB39F;
    --nuit:   #121614;
    --brique: #E08A72;
    --filet:  #3A4038;
    --ombre:  0 1px 3px rgba(0,0,0,.45);
    --ap-trame-craie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%237FB39F' stroke-width='1.6'%3E%3Cpolygon points='26,0 52,15 52,45 26,60 0,45 0,15'/%3E%3Cpolygon points='52,45 78,60 78,90 52,105 26,90 26,60'/%3E%3Cpolygon points='0,45 26,60 26,90 0,105 -26,90 -26,60'/%3E%3Cpolygon points='52,-45 78,-30 78,0 52,15 26,0 26,-30'/%3E%3Cpolygon points='0,-45 26,-30 26,0 0,15 -26,0 -26,-30'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --os:     #1B1F1D;
  --craie:  #232A27;
  --encre:  #EFEAE0;
  --gres:   #A79E90;
  --sauge:  #7FB39F;
  --nuit:   #121614;
  --brique: #E08A72;
  --filet:  #3A4038;
  --ombre:  0 1px 3px rgba(0,0,0,.45);
  --ap-trame-craie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%237FB39F' stroke-width='1.6'%3E%3Cpolygon points='26,0 52,15 52,45 26,60 0,45 0,15'/%3E%3Cpolygon points='52,45 78,60 78,90 52,105 26,90 26,60'/%3E%3Cpolygon points='0,45 26,60 26,90 0,105 -26,90 -26,60'/%3E%3Cpolygon points='52,-45 78,-30 78,0 52,15 26,0 26,-30'/%3E%3Cpolygon points='0,-45 26,-30 26,0 0,15 -26,0 -26,-30'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET & TYPOGRAPHIE DE BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--os);color:var(--encre);
  font-family:var(--f-serif);font-size:18.5px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--sauge);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--sauge);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-serif);font-weight:700;margin:0;line-height:1.2;text-wrap:balance;color:var(--encre)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--sauge);color:var(--os)}

/* utilitaire d'accessibilité : lien d'évitement + labels visuellement masqués
   (jamais un piège de formulaire visible : le champ-piège du honeypot). */
.sb-oeil,.sb-oeil-txt,.ap-form-piege{position:absolute!important;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden}
.sb-oeil:focus{left:.6rem;top:.6rem;width:auto;height:auto;padding:.6rem 1rem;
  background:var(--encre);color:var(--os);z-index:99;border-radius:6px;font-family:var(--f-sans);font-size:15px}

/* --------------------------------------------------------------------------
   3. STRUCTURE — enveloppe, colonne de lecture, bandes, trame
   -------------------------------------------------------------------------- */
.ap-enveloppe,.sb-enveloppe{width:min(1180px,100% - 3.2rem);margin-inline:auto}
/* ⚠️ 07/09, jugement design : sans marge propre, .ap-lecture touche les deux bords de
   l'écran sous 660px (fil d'ariane, H1 et filet brique de l'avertissement collés à x=0,
   capture article-mobile.png) alors que l'en-tête et le hero gardent leur ap-enveloppe. */
.ap-lecture{width:min(660px,100%);margin-inline:auto;padding-inline:1.4rem;box-sizing:border-box}
@media (min-width: 700px){ .ap-lecture{padding-inline:0} }
.sb-lecture{width:min(660px,100% - 3.2rem);margin-inline:auto}

.ap-bande{padding-block:clamp(2.4rem,5vw,4rem)}
.ap-bande--craie{background:var(--craie)}
.ap-bande--nuit{background:var(--nuit);color:var(--clair)}
.ap-bande--nuit a{color:var(--clair);text-decoration-color:var(--sauge-clair)}

.ap-trame{position:relative;overflow:hidden}
.ap-trame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-size:78px 135px;opacity:.07}
.ap-bande--craie.ap-trame::before{background-image:var(--ap-trame-craie)}
.ap-bande--nuit.ap-trame::before{background-image:var(--ap-trame-nuit);opacity:.06}
.ap-trame>*{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   4. BOUTONS, FORMULAIRES, PICTO
   -------------------------------------------------------------------------- */
.ap-picto{display:block;fill:currentColor}
.ap-marque-picto{width:34px;height:34px;color:var(--sauge);flex-shrink:0}
.ap-pied-picto{width:40px;height:40px;color:var(--sauge);margin-inline:auto}

.ap-bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.5rem;border-radius:6px;border:2px solid transparent;
  font-family:var(--f-sans);font-weight:600;font-size:17px;line-height:1.2;
  text-decoration:none!important;transition:background-color .15s,color .15s,border-color .15s}
.ap-bouton--plein{background:var(--sauge);color:var(--os);border-color:var(--sauge)}
.ap-bouton--plein:hover{background:color-mix(in srgb, var(--sauge) 85%, black)}
.ap-bouton--filaire{background:transparent;color:var(--encre);border-color:var(--encre)}
.ap-bouton--filaire:hover{background:var(--encre);color:var(--os)}

.ap-form{display:flex;flex-direction:column;gap:.35rem;max-width:520px}
.ap-form label{font-family:var(--f-sans);font-weight:600;font-size:15px;margin-top:.8rem}
.ap-form input,.ap-form textarea{font-family:var(--f-serif);font-size:16px;padding:.75rem .9rem;
  border:1px solid var(--filet);border-radius:6px;background:var(--craie);color:var(--encre);
  min-height:48px}
.ap-form textarea{min-height:140px;resize:vertical}
.ap-form input:focus,.ap-form textarea:focus{outline:3px solid var(--sauge);outline-offset:1px;border-color:var(--sauge)}
.ap-form button{margin-top:1.3rem;align-self:flex-start}
.ap-confirmation{background:var(--craie);border-left:4px solid var(--sauge);padding:1rem 1.2rem;
  border-radius:0 8px 8px 0;font-size:16px;margin-bottom:1.5rem}

/* --------------------------------------------------------------------------
   5. EN-TÊTE & NAVIGATION
   -------------------------------------------------------------------------- */
.ap-tete{background:var(--os);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:30}
.ap-tete-in{display:flex;align-items:center;gap:1.6rem;min-height:76px;padding-block:.6rem}
.ap-marque{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.ap-marque-mot{font-family:var(--f-serif);font-weight:700;font-size:clamp(19px,2.4vw,23px);color:var(--encre)}
.ap-marque:hover{text-decoration:none}

.ap-nav{display:flex;align-items:center;gap:1.6rem;list-style:none}
.ap-nav a{font-family:var(--f-sans);font-weight:600;font-size:16px;color:var(--encre);
  padding:.6rem .1rem;border-bottom:2px solid transparent}
.ap-nav a:hover{text-decoration:none;border-bottom-color:var(--sauge)}

.ap-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:1px solid var(--filet);border-radius:6px}
.ap-burger span{display:block;width:20px;height:2px;background:var(--encre);margin-inline:auto}

.ap-recherche{display:flex;align-items:center;gap:.4rem;background:var(--craie);
  border-radius:24px;padding:.35rem .35rem .35rem 1rem;min-width:0}
.ap-recherche input{font:inherit;font-family:var(--f-sans);font-size:15px;border:0;
  background:transparent;color:var(--encre);width:clamp(90px,14vw,180px);min-height:auto}
.ap-recherche input:focus{outline:none}
.ap-recherche button{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--sauge);color:var(--os);border:0}
.ap-recherche button:hover{background:color-mix(in srgb, var(--sauge) 85%, black)}

/* ⚠️ 07/09 : DEUX formulaires de recherche existent (retour Mathias — la barre flottait
   à cheval sur le bas de l'en-tête et le haut du hero en mobile, l'en-tête ne s'agrandissant
   pas assez pour la contenir proprement) : .ap-recherche--tete dans l'en-tête (desktop
   seulement), .ap-recherche--nav DANS le menu burger (mobile seulement). Jamais les deux
   visibles à la fois. */
.ap-recherche--nav{display:none}
@media (max-width: 899px){
  .ap-burger{display:flex}
  .ap-nav{position:absolute;left:0;right:0;top:100%;background:var(--os);
    border-bottom:1px solid var(--filet);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 0;max-height:0;overflow:hidden;transition:max-height .2s ease}
  .ap-nav.is-ouvert{max-height:70vh;overflow-y:auto}
  .ap-nav a{padding:.9rem 1.6rem;border-bottom:1px solid var(--filet)}
  .ap-recherche--tete{display:none}
  .ap-recherche--nav{display:flex;margin:.4rem 1.2rem .8rem}
  .ap-tete-in{position:relative}
}

/* --------------------------------------------------------------------------
   6. HERO (accueil)
   -------------------------------------------------------------------------- */
.ap-hero{position:relative;background:var(--os);overflow:hidden;
  min-height:62vh;display:flex;align-items:flex-end}
.ap-hero-photo{position:absolute;inset:0}
.ap-hero-img,.ap-hero-photo .ap-vignette-vide{width:100%;height:100%;object-fit:cover}
.ap-hero-voile{position:absolute;inset:0;
  background:linear-gradient(to top, rgba(34,50,45,.72), rgba(34,50,45,0) 65%)}
.ap-hero-texte{position:relative;z-index:1;padding-block:clamp(2rem,6vw,3.6rem);color:var(--clair)}
.ap-hero-titre{font-size:clamp(34px,4.4vw,52px);line-height:1.15;color:var(--clair)}
.ap-hero-baseline{font-family:var(--f-sans);font-size:19px;line-height:1.5;margin-top:1rem;
  max-width:46ch;color:var(--clair)}
.ap-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.ap-hero-actions .ap-bouton--filaire{color:var(--clair);border-color:var(--clair)}
.ap-hero-actions .ap-bouton--filaire:hover{background:var(--clair);color:var(--sombre)}
@media (max-width: 619px){
  .ap-hero{min-height:46vh}
}

/* --------------------------------------------------------------------------
   7. SECTIONS GÉNÉRIQUES
   -------------------------------------------------------------------------- */
.ap-section{padding-block:clamp(2.4rem,5vw,4rem)}
.ap-section--suite{border-top:1px solid var(--filet)}
.ap-section-titre{font-size:clamp(28px,3vw,36px);line-height:1.15;position:relative;
  padding-top:1.4rem;margin-bottom:1.8rem}
.ap-section-titre::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;background:var(--sauge)}
.ap-section-sous{font-family:var(--f-sans);font-size:16px;color:var(--gres);margin-top:-1.2rem;margin-bottom:1.8rem;max-width:52ch}
.ap-fiches{background:var(--os)}

/* --------------------------------------------------------------------------
   8. GRILLES & CARTES
   -------------------------------------------------------------------------- */
.ap-grille,.sb-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
.ap-grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 979px){
  .ap-grille,.sb-grille,.ap-grille--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 619px){
  .ap-grille,.sb-grille,.ap-grille--4{grid-template-columns:1fr}
}

.ap-carte,.sb-carte{display:flex;flex-direction:column;background:var(--os);
  border-radius:8px;box-shadow:var(--ombre);overflow:hidden;min-width:0}
.ap-bande--craie .ap-carte,.ap-bande--craie .sb-carte{background:var(--os)}
.ap-bande--nuit .ap-carte{background:var(--os);color:var(--encre)}
.ap-carte-photo{display:block;position:relative;aspect-ratio:4/3;background:var(--craie);overflow:hidden}
.ap-carte-photo img,.ap-carte-photo .ap-vignette-vide{width:100%;height:100%;object-fit:cover;border-radius:0}
.ap-carte h3{font-size:22px;line-height:1.3;padding:1.1rem 1.1rem 0}
.ap-carte h3 a{color:var(--encre)}
.ap-carte h3 a:hover{color:var(--sauge)}
.ap-carte-texte,.sb-chapo{font-family:var(--f-sans);font-size:16px;line-height:1.6;color:var(--gres);
  padding:.5rem 1.1rem 0}
.ap-carte-meta,.sb-date{font-family:var(--f-sans);font-size:15px;color:var(--gres);
  padding:.7rem 1.1rem 1.1rem;margin-top:auto}

/* pastille de rubrique en surimpression de chaque photo (direction §7, procédé 7) */
.ap-pastille{position:absolute;left:.8rem;bottom:.8rem;background:color-mix(in srgb, var(--craie) 92%, transparent);
  color:var(--encre);font-family:var(--f-sans);font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:.3rem .75rem;border-radius:5px;z-index:1}
.ap-pastille--seule{position:static;display:inline-block;background:var(--craie);margin-bottom:1rem}

/* fallback textile — le repli est déclaratif, il ne prétend représenter aucun contenu.
   ⚠️ Une carte qui affiche ce repli n'est PAS une carte livrable (direction §10) : voir rapport. */
.ap-vignette-vide{display:flex;align-items:center;justify-content:center;background:var(--craie);
  background-image:var(--ap-trame-craie);background-size:60px 104px;opacity:1;min-height:100%}

.ap-carte--porte{background:var(--craie)}
.ap-carte--porte h3{font-size:20px}
.ap-carte--rubrique .ap-carte-photo{aspect-ratio:4/3}
.ap-carte--fiche{background:var(--craie)}
.ap-carte--fiche h3{font-size:19px;padding-bottom:1.1rem}
.ap-carte--temoignage{background:var(--craie)}
.ap-temoignage-texte{font-style:italic;font-size:18.5px;line-height:1.6;padding:1.1rem 1.1rem 0}
.ap-temoignage-note{font-family:var(--f-sans);font-size:15px;color:var(--gres);padding:.4rem 1.1rem 1.1rem}

/* --------------------------------------------------------------------------
   9. « L'ESSENTIEL EN 3 POINTS » (accueil bloc 2)
   -------------------------------------------------------------------------- */
.ap-essentiel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.ap-essentiel-item{text-align:left}
.ap-chiffre{font-family:var(--f-sans);font-weight:700;font-size:clamp(40px,6vw,72px);
  line-height:1;font-variant-numeric:tabular-nums;color:var(--sauge)}
.ap-chiffre-unite{font-size:18px;font-weight:600;margin-left:.3rem;color:var(--encre)}
.ap-essentiel-phrase{font-family:var(--f-sans);font-size:17px;line-height:1.5;margin-top:.7rem}
.ap-source{font-family:var(--f-sans);font-size:15px;color:var(--gres);margin-top:.5rem}
@media (max-width: 619px){.ap-essentiel{grid-template-columns:1fr;gap:2.2rem}}

/* --------------------------------------------------------------------------
   10. « CE QUE DISENT LES PROFESSIONNELS » (bande nuit)
   -------------------------------------------------------------------------- */
.ap-pro blockquote{margin:0}
.ap-pro p{font-family:var(--f-serif);font-style:italic;font-size:24px;line-height:1.5;color:var(--clair)}
.ap-pro cite{display:block;font-family:var(--f-sans);font-style:normal;font-size:16px;
  color:var(--sauge-clair);margin-top:1.2rem}

/* --------------------------------------------------------------------------
   11. ARTICLE — tête, photo, corps, sommaire, encadré essentiel, FAQ
   -------------------------------------------------------------------------- */
.ap-article{padding-block:clamp(1.8rem,4vw,3rem)}
.ap-art-tete{margin-bottom:1.4rem}
.ap-fil{font-family:var(--f-sans);font-size:15px;color:var(--gres);margin-bottom:1rem;display:flex;gap:.5rem}
.ap-fil a{color:var(--gres)}
.ap-art-titre{font-size:clamp(34px,4.4vw,52px);line-height:1.15;margin-top:.6rem}
.ap-art-meta{font-family:var(--f-sans);font-size:15px;color:var(--gres);margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}

.ap-art-photo{width:min(1180px,100% - 3.2rem);margin:2rem auto;aspect-ratio:16/9;overflow:hidden;border-radius:8px}
.ap-art-photo img{width:100%;height:100%;object-fit:cover}
.ap-art-photo figcaption{font-family:var(--f-sans);font-size:15px;color:var(--gres);margin-top:.6rem}

.ap-art-corps{padding-block:.5rem 2rem}
.ap-art-corps-in{width:min(1040px,100% - 3.2rem);margin-inline:auto}
.ap-texte{font-size:18.5px;line-height:1.75}
.ap-texte>*{max-width:660px;margin-inline:auto}
.ap-texte>p,.ap-texte>ul,.ap-texte>ol,.ap-texte>blockquote,.ap-texte>figure,.ap-texte>.sbs_tableau{margin-bottom:1.4rem}
.ap-texte h2{font-size:clamp(28px,3vw,36px);line-height:1.2;margin:2.6rem auto 1rem;position:relative;padding-top:1.3rem;max-width:660px}
.ap-texte h2::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;background:var(--sauge)}
.ap-texte h2,.ap-texte h3{scroll-margin-top:100px}
.ap-texte h3{font-family:var(--f-sans);font-weight:600;font-size:22px;margin:2rem auto .7rem;max-width:660px}
.ap-texte a{color:var(--sauge);text-decoration:underline;text-underline-offset:3px}
.ap-texte ul li{position:relative;padding-left:1.4rem;margin-bottom:.6rem}
.ap-texte ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--sauge)}
.ap-texte ol{counter-reset:ap-num}
.ap-texte ol li{counter-increment:ap-num;position:relative;padding-left:2rem;margin-bottom:.6rem}
.ap-texte ol li::before{content:counter(ap-num);position:absolute;left:0;top:0;
  font-family:var(--f-sans);font-weight:700;color:var(--sauge);font-variant-numeric:tabular-nums}
.ap-texte blockquote{border-left:4px solid var(--sauge);padding-left:1.5rem;font-style:italic;font-size:21px;color:var(--encre)}
.ap-texte figure{margin:2rem auto}
.ap-texte figure img{border-radius:8px}
.ap-texte figcaption{font-family:var(--f-sans);font-size:15px;color:var(--gres);margin-top:.6rem}

/* l'encadré « L'essentiel en 3 points » (généré par functions.php) */
.ap-encadre-essentiel{max-width:660px;margin:0 auto 2rem;background:var(--craie);
  border-left:4px solid var(--sauge);border-radius:0 8px 8px 0;padding:1.3rem 1.5rem}
.ap-oeil{font-family:var(--f-sans);font-weight:600;font-size:15px;letter-spacing:.04em;
  color:var(--sauge);margin-bottom:.8rem}
.ap-encadre-essentiel ul{margin:0}
.ap-encadre-essentiel ul li{padding-left:1.8rem}
.ap-encadre-essentiel ul li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--sauge)}

/* sommaire ancré : colonne collante à droite au-dessus de 1100px, pleine largeur en dessous */
.ap-sommaire{background:var(--craie);border-radius:8px;padding:1.2rem 1.4rem;margin:0 auto 2rem;max-width:660px}
.ap-sommaire summary{font-family:var(--f-sans);font-weight:600;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between}
.ap-sommaire summary::after{content:"›";transform:rotate(90deg);transition:transform .15s;color:var(--sauge);font-size:20px}
.ap-sommaire[open] summary::after{transform:rotate(-90deg)}
.ap-sommaire ol{counter-reset:ap-som;margin-top:1rem}
.ap-sommaire ol li{counter-increment:ap-som;padding:.4rem 0 .4rem 1.6rem;border-top:1px solid var(--filet);position:relative}
.ap-sommaire ol li:first-child{border-top:0}
/* ⚠️ 07/09 : .ap-texte ol li::before (position:absolute;left:0;top:0) est une règle
   PLUS ANCIENNE et de même poids qui s'applique AUSSI ici (le sommaire est injecté dans
   .ap-texte par functions.php) : sans ce reset, elle laissait le numéro du sommaire
   absolu à left:0/top:0, superposé au texte au lieu de le précéder (trouvé au jugement
   design du 07/09, capture zoom-sommaire3.png). On force ici les 4 propriétés en jeu. */
.ap-sommaire ol li::before{content:counter(ap-som) ".";font-weight:700;color:var(--sauge);
  font-family:var(--f-sans);position:absolute;left:0;top:.4rem;font-variant-numeric:tabular-nums}
.ap-sommaire a{font-family:var(--f-sans);font-size:16px;color:var(--encre);text-decoration:none}
.ap-sommaire a:hover{color:var(--sauge)}
@media (min-width: 1100px){
  .ap-sommaire{float:right;width:300px;margin:0 0 1.5rem 2.4rem;position:sticky;top:96px}
}

/* FAQ accordéon (CM-0119) */
.ap-faq{max-width:660px;margin:0 auto 1.5rem}
.ap-faq details{border-top:1px solid var(--filet);padding:1rem 0}
.ap-faq details:last-child{border-bottom:1px solid var(--filet)}
.ap-faq summary{font-family:var(--f-sans);font-weight:600;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none}
.ap-faq summary::-webkit-details-marker{display:none}
.ap-faq summary::after{content:"›";transform:rotate(90deg);transition:transform .15s;color:var(--sauge);
  font-size:22px;flex-shrink:0}
.ap-faq details[open] summary::after{transform:rotate(-90deg)}
.ap-faq-reponse{padding-top:.9rem;font-size:17px;line-height:1.7}
.ap-faq-reponse p{margin-bottom:1rem}

/* --------------------------------------------------------------------------
   12. AVERTISSEMENT MÉDICAL — organe du gabarit, jamais discret
   -------------------------------------------------------------------------- */
.ap-avertissement{display:flex;gap:1rem;align-items:flex-start;background:var(--os);
  border-left:4px solid var(--brique);border-radius:0 8px 8px 0;padding:1.2rem 1.4rem;
  max-width:660px;margin:0 auto 2rem;box-shadow:var(--ombre)}
.ap-avertissement-picto{display:flex;flex-shrink:0}
.ap-avertissement-picto-svg{width:28px;height:28px;color:var(--brique);flex-shrink:0}
.ap-avertissement p{font-size:16px;line-height:1.6;color:var(--encre)}
.ap-avertissement a{color:var(--brique);text-decoration:underline}
.ap-avertissement--pied{max-width:none;background:var(--os);margin:2rem 0 1.5rem}
/* ⚠️ 07/09, jugement design : dans le pied de page, .ap-pied a{color:var(--clair)}
   (même poids, plus bas dans le fichier) peignait ce lien en ivoire SUR SON PROPRE
   fond ivoire — invisible, il ne restait que le point final visible (capture
   zoom-footer-disclaimer.png). Sélecteur à 2 classes pour gagner sans ambiguïté. */
.ap-pied .ap-avertissement p,.ap-pied .ap-avertissement--pied p{color:var(--encre)}
.ap-pied .ap-avertissement a,.ap-pied .ap-avertissement--pied a{color:var(--brique)}

/* --------------------------------------------------------------------------
   13. TABLEAUX COMPARATIFS — pas de verdict, défilement mobile (socle)
   -------------------------------------------------------------------------- */
.sbs_tableau{overflow-x:auto;max-width:660px;margin:0 auto 1.6rem;border-radius:8px;box-shadow:var(--ombre)}
.sbs_tableau table,.ap-texte table{width:100%;min-width:520px;border-collapse:collapse;font-size:16px}
.sbs_tableau th,.ap-texte th{font-family:var(--f-sans);font-weight:600;font-size:15px;
  letter-spacing:.02em;text-align:left;background:var(--nuit);color:var(--clair);padding:.8rem 1rem}
.sbs_tableau td,.ap-texte td{padding:.8rem 1rem;border-bottom:1px solid var(--filet)}
.sbs_tableau tr:nth-child(even) td{background:var(--craie)}

/* --------------------------------------------------------------------------
   14. GABARIT FICHE PRATIQUE (page.php)
   -------------------------------------------------------------------------- */
.ap-fiche{border-top:4px solid var(--sauge)}
.ap-fiche-meta{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.ap-fiche-pourqui{font-family:var(--f-serif);font-style:italic;font-size:19px;color:var(--gres);margin-top:.8rem}
.ap-texte--fiche ul li{padding-left:2.1rem}
.ap-texte--fiche ul li::before{content:"";width:20px;height:20px;border-radius:4px;
  border:2px solid var(--sauge);background:var(--os);top:0}
.ap-encadre-imprimer{background:var(--craie);border-radius:8px;padding:1.3rem 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.ap-encadre-imprimer p{font-size:16px}

/* --------------------------------------------------------------------------
   15. SIGNATURE AUTEUR — mu-plugin réseau (sb-auteur-bloc.php, HORS thème).
   Classes RÉELLES lues dans le mu-plugin le 07/09 (corrige un bug trouvé en
   capture : l'ancien sélecteur [class^="sb-auteur-fin"] attrapait AUSSI
   .sb-auteur-fin-nom/-role/-bio/-lien et les passait en display:flex, ce qui
   empêchait leur texte de se replier et faisait déborder la carte de 288px
   en mobile (sw=678 pour cw=390, mesuré sur /information-densite-osseuse/).
   On cible désormais UNIQUEMENT le conteneur exact, jamais ses enfants nommés
   par préfixe. -------------------------------------------------------------------------- */
/* ⚠️ 07/09, jugement design : le <style> du mu-plugin est injecté DANS the_content (donc
   plus bas dans le DOM que ce fichier, chargé en <head>) avec des sélecteurs de même poids
   (une classe) — à égalité de spécificité, le dernier dans le document gagne, donc SES
   couleurs de repli (var(--accent,#1f4e79) bleu, fond #f6f5f2, avatar 64px) écrasaient
   les nôtres alors que ce fichier semblait "correct" à la lecture. On force ici avec
   !important : c'est justifié, on neutralise délibérément le style d'un plugin tiers,
   pas une classe à nous. */
.sb-auteur-fin{
  display:flex!important;gap:1.2rem!important;align-items:flex-start!important;
  background:var(--craie)!important;border:1px solid var(--gres)!important;
  border-radius:8px!important;padding:1.4rem!important;max-width:660px!important;
  margin:2.5rem auto!important;font-family:var(--f-sans)!important;overflow-wrap:anywhere}
.sb-auteur-fin-av{
  width:80px!important;height:80px!important;border-radius:50%!important;object-fit:cover;
  flex-shrink:0;border:2px solid var(--os);box-shadow:0 0 0 1px var(--sauge);background:var(--craie)!important}
.sb-auteur-fin-txt{min-width:0;flex:1 1 auto}
.sb-auteur-fin-nom{font-family:var(--f-serif)!important;font-size:20px!important;margin:0 0 .2rem!important;color:var(--encre)!important}
.sb-auteur-fin-nom a{color:inherit!important}
.sb-auteur-fin-role{font-size:13px!important;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--sauge)!important;margin:0 0 .5rem!important}
.sb-auteur-fin-bio{font-size:15px!important;color:var(--gres)!important;line-height:1.6;margin:0 0 .5rem!important}
.sb-auteur-fin-lien a,.sb-auteur-fin a{color:var(--sauge)!important;font-weight:600}
@media (max-width: 480px){
  .sb-auteur-fin{padding:1rem!important;gap:.85rem!important}
  .sb-auteur-fin-av{width:64px!important;height:64px!important}
}

/* --------------------------------------------------------------------------
   16. RUBRIQUE / ARCHIVE (archive.php) + génériques de liste partagés
       (index.php, search.php, 404.php : classes .sb-* historiques, mêmes règles)
   -------------------------------------------------------------------------- */
.ap-rub-tete{background:var(--craie)}
.ap-rub-panorama{aspect-ratio:21/9;overflow:hidden;background:var(--os)}
.ap-rub-panorama img,.ap-rub-panorama .ap-vignette-vide{width:100%;height:100%;object-fit:cover}
.ap-rub-tete-in{padding-block:clamp(1.8rem,4vw,2.6rem)}
.ap-compte,.sb-compte{font-family:var(--f-sans);font-weight:600;font-size:15px;letter-spacing:.04em;
  color:var(--sauge);text-transform:uppercase}
.ap-rub-titre{font-size:clamp(32px,4.6vw,44px);line-height:1.1;margin-top:.5rem}
.ap-rub-chapo,.sb-heros-chapo{font-family:var(--f-sans);font-size:18px;line-height:1.6;color:var(--gres);margin-top:.8rem;max-width:62ch}
.ap-rub-depliant,.sb-depliant{margin-top:1rem}
.ap-rub-depliant summary,.sb-depliant summary{font-family:var(--f-sans);font-weight:600;font-size:15px;
  color:var(--sauge);cursor:pointer}
.ap-rub-depliant p,.sb-depliant p{font-family:var(--f-sans);font-size:16px;color:var(--gres);margin-top:.6rem;max-width:62ch}
.ap-rub-corps{padding-block:clamp(2rem,4vw,3rem)}

.ap-pagination,.sb-pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:2.4rem}
.ap-pagination ul,.sb-pagination ul{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.ap-pagination .page-numbers,.sb-pagination .page-numbers{font-family:var(--f-sans);font-weight:600;font-size:16px;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--encre)}
.ap-pagination .page-numbers.current,.sb-pagination .page-numbers.current{background:var(--sauge);color:var(--os)}
.ap-pagination .page-numbers:hover,.sb-pagination .page-numbers:hover{background:var(--craie);text-decoration:none}

.sb-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sb-form label{font-family:var(--f-sans);font-size:15px}
.sb-form input[type="search"]{font:inherit;font-size:16px;padding:.7rem 1rem;border:1px solid var(--filet);
  border-radius:6px;background:var(--craie);color:var(--encre);min-height:48px;min-width:200px}
.sb-form button{min-height:48px;padding:0 1.3rem;border-radius:6px;background:var(--sauge);color:var(--os);
  border:0;font-family:var(--f-sans);font-weight:600}
.sb-form button:hover{background:color-mix(in srgb, var(--sauge) 85%, black)}

/* --------------------------------------------------------------------------
   17. PIED DE PAGE
   -------------------------------------------------------------------------- */
.ap-pied{background:var(--nuit);color:var(--clair);padding-block:clamp(2.6rem,5vw,4rem) 0}
.ap-pied a{color:var(--clair)}
.ap-pied a:hover{color:var(--sauge-clair)}
.ap-pied-marque{text-align:center;padding-bottom:2rem}
.ap-pied-nom{font-family:var(--f-serif);font-weight:700;font-size:28px;margin-top:.6rem;color:var(--clair)}
.ap-pied-baseline{font-family:var(--f-sans);font-size:16px;color:color-mix(in srgb, var(--clair) 75%, transparent);margin-top:.5rem}
.ap-pied-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;
  padding-block:2rem;border-top:1px solid color-mix(in srgb, var(--clair) 18%, transparent)}
.ap-pied-col{min-width:0}
.ap-pied-titre{font-family:var(--f-sans);font-weight:700;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sauge-clair);margin-bottom:1rem}
.ap-pied-liste li{padding:.35rem 0;font-family:var(--f-sans);font-size:16px;display:flex;justify-content:space-between;gap:.5rem}
.ap-pied-compte{font-family:var(--f-sans);font-size:15px;color:color-mix(in srgb, var(--clair) 70%, transparent);font-variant-numeric:tabular-nums}
.ap-pied-note{font-family:var(--f-sans);font-size:15px;color:color-mix(in srgb, var(--clair) 70%, transparent);margin-top:.6rem}
.ap-ours{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:1.4rem;border-top:1px solid color-mix(in srgb, var(--clair) 14%, transparent);
  font-family:var(--f-sans);font-size:15px;color:color-mix(in srgb, var(--clair) 70%, transparent)}
.ap-bascule{background:transparent;border:1px solid color-mix(in srgb, var(--clair) 30%, transparent);
  color:var(--clair);border-radius:20px;padding:.5rem 1.1rem;font-family:var(--f-sans);font-weight:600;font-size:15px}
.ap-bascule:hover{border-color:var(--sauge-clair);color:var(--sauge-clair)}

@media (max-width: 979px){.ap-pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width: 619px){.ap-pied-grille{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   18. RESPONSIVE — grands ajustements transverses
   -------------------------------------------------------------------------- */
@media (max-width: 619px){
  body{font-size:17px}
  .ap-hero-titre{font-size:clamp(30px,8vw,40px)}
  .ap-art-photo{width:100%;border-radius:0}
  .ap-fil{flex-wrap:wrap}
}

/* --------------------------------------------------------------------------
   19. IMPRESSION & MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media print{
  .ap-tete,.ap-pied,.ap-bascule,.ap-sommaire,.ap-recherche,.ap-hero-actions{display:none!important}
  body{background:#fff;color:#000}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}