/* BenzoPotes — style articles SEO (autonome, sans BeerCSS) */
:root {
    --bg: #f5f7f5;
    --fg: #1a2e23;
    --muted: #4a5e50;
    --accent: #2d6a4f;
    --accent-dark: #1b4332;
    --surface: #ffffff;
    --border: #d7e2db;
    --warn-bg: #fff7ed;
    --warn-fg: #7c2d12;
    --warn-border: #f59e0b;
    /* Gris « doux » des notes de bas de page (avertissement médical, note de
       sources). Utilisé en ligne dans 78 articles sous la forme
       var(--a-fg-soft,#7a8b7a) — mais la variable n'a jamais été déclarée, donc
       c'est le repli #7a8b7a qui s'appliquait partout : 3,62:1 sur blanc et
       3,36:1 sur --bg, sous le seuil AA de 4,5:1 (balayage du 2026-07-21).
       #586a5b = 5,79:1 sur blanc, 5,38:1 sur --bg. Même famille de vert, déjà
       retenu ailleurs le 2026-07-20. Les replis en ligne ont été alignés sur
       cette valeur pour que le code cesse de mentir. */
    --a-fg-soft: #586a5b;
    /* Fond/texte de la barre du haut (.a-topbar). Variable DÉDIÉE et NON
       inversée : --accent-dark bascule clair↔foncé entre les modes (rôle
       d'accent de texte), donc l'employer comme fond de barre donnait un fond
       clair + texte blanc = 1,69:1 en sombre (balayage 2026-07-22). La barre
       doit rester FONCÉE dans les DEUX modes. #1b4332 (vert foncé) + #fff =
       11:1 en clair comme en sombre. Le bloc @media sombre ne la redéfinit PAS,
       exprès. */
    --topbar-bg: #1b4332;
    --topbar-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1f17;
        --fg: #e6efe9;
        --muted: #a8bcb0;
        --accent: #52b788;
        --accent-dark: #95d5b2;
        --surface: #152a20;
        --border: #2a4334;
        --warn-bg: #3a2510;
        --warn-fg: #ffd39a;
        /* #586a5b serait illisible sur fond sombre (2,95:1 sur --bg, 2,62:1 sur
           --surface). On reprend la valeur déjà éprouvée de --muted en sombre :
           8,53:1 sur --bg, 7,58:1 sur --surface. Aucune couleur nouvelle
           introduite dans la palette. */
        --a-fg-soft: #a8bcb0;
    }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.a-topbar {
    /* Fond foncé fixe dans les deux modes (voir --topbar-bg). Visé : #fff sur
       #1b4332 = 11:1, clair comme sombre. */
    background: var(--topbar-bg);
    color: var(--topbar-fg);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.a-topbar > a {
    color: var(--topbar-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.a-topbar .a-cta {
    margin-left: auto;
    background: #52b788;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    color: #0f1f17;
}
.a-topbar .a-cta:hover { background: #74c69d; }
/* Téléphone : les trois éléments de la barre (logo + menu Ressources injecté par
   a-nav.js + bouton Application) totalisent 371 px de contenu, pour 326 px
   disponibles à 390 px de large. Le bouton finissait à 415 px, hors écran, et
   faisait défiler toute la page horizontalement (mesuré 2026-07-21, présent sur
   TOUS les articles, pas seulement les récents). On resserre l'espacement et la
   typo plutôt que de masquer un élément. */
@media (max-width: 480px) {
    .a-topbar { padding: 12px 12px; gap: 8px; }
    .a-topbar > a { font-size: 15px; gap: 6px; }
    .a-topbar .a-nav-resources__btn { padding: 6px 9px; font-size: 13px; gap: 4px; }
    .a-topbar .a-cta { padding: 7px 10px; font-size: 12px; }
}
main.a-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}
.a-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.a-breadcrumb a { color: var(--accent); text-decoration: none; }
.a-breadcrumb a:hover { text-decoration: underline; }
h1 {
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    line-height: 1.2;
    color: var(--accent-dark);
    margin: 8px 0 16px;
}
@media (prefers-color-scheme: dark) { h1 { color: var(--accent-dark); } }
h2 {
    font-size: 1.35rem;
    color: var(--accent);
    margin: 32px 0 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
h3 {
    font-size: 1.1rem;
    color: var(--fg);
    margin: 20px 0 8px;
}
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
.a-lead {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 24px;
}
.a-disclaimer {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-left: 4px solid var(--warn-border);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 0.92rem;
}
.a-disclaimer strong { color: var(--warn-fg); }
.a-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 0;
}
.a-box h3:first-child { margin-top: 0; }
table.a-tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}
.a-tbl th, .a-tbl td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.a-tbl th {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.a-tbl tr:last-child td { border-bottom: none; }
.a-tbl tr:nth-child(even) td { background: rgba(0,0,0,.02); }
@media (prefers-color-scheme: dark) {
    .a-tbl tr:nth-child(even) td { background: rgba(255,255,255,.03); }
}
details.a-faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
details.a-faq[open] { background: var(--bg); }
details.a-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-dark);
}
@media (prefers-color-scheme: dark) { details.a-faq summary { color: var(--accent-dark); } }
details.a-faq p { margin: 12px 0 4px; }
.a-cta-block {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    padding: 28px 24px;
    border-radius: 14px;
    text-align: center;
    margin: 36px 0 0;
}
.a-cta-block h3 { color: #fff; margin-top: 0; }
.a-cta-block .a-btn {
    display: inline-block;
    background: #fff;
    /* Pastille blanche sur le bloc CTA à dégradé vert. Le texte était
       var(--accent-dark) : #1b4332 sur blanc = 11:1 en clair, mais #95d5b2 sur
       blanc = 1,69:1 en sombre (--accent-dark s'inverse). On fige le vert foncé
       #1b4332 dans les deux modes → 11:1 partout, bouton clair lisible et
       cohérent avec le design. */
    color: #1b4332;
    padding: 12px 24px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 8px;
}
footer.a-foot {
    border-top: 1px solid var(--border);
    padding: 24px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}
footer.a-foot a { color: var(--muted); }
.a-related {
    background: var(--surface);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 28px 0 0;
}
.a-related h3 { margin-top: 0; font-size: 1rem; color: var(--muted); }
.a-related ul { margin: 0; padding-left: 18px; }

/* Filigrane décoratif injecté par a-nav.js (.a-ambient, position:fixed).
   Il était posé à right:-14px, et son animation le fait tourner de 4°, ce qui
   élargit encore sa boîte d'environ 4 px : à 390 px de large son bord droit
   tombait à 405-407 px. Étant en position fixe il ne provoque pas de défilement,
   mais il sort quand même de la fenêtre et le SVG qu'il contient est signalé
   comme hors écran. On le rentre : 8 px de marge absorbent la rotation
   (110 px × cos4° + 110 px × sin4° ≈ 117 px, soit ~3,7 px de débord de chaque
   côté). Le débord vertical, sans conséquence, est conservé.
   Sélecteur `body >` : la règle de a-nav.js est injectée APRÈS cette feuille,
   il faut donc une spécificité supérieure, pas seulement l'ordre. */
body > .a-ambient { right: 8px; }

/* Resources dropdown — injected by a-nav.js into .a-topbar */
.a-nav-resources { position: relative; }
.a-nav-resources__btn {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    padding: 6px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.a-nav-resources__btn:hover { background: rgba(255,255,255,.2); }
.a-nav-resources__btn[aria-expanded="true"] { background: rgba(255,255,255,.25); }
.a-nav-resources__chev { font-size: 10px; }
.a-nav-resources__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    max-width: min(90vw, 340px);
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 8px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 50;
}
.a-nav-resources__group { padding: 6px 4px; }
.a-nav-resources__group + .a-nav-resources__group {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 8px;
}
.a-nav-resources__cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 700;
    padding: 4px 8px 6px;
}
.a-nav-resources__item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}
.a-nav-resources__item:hover { background: rgba(45,106,79,.08); }
.a-nav-resources__item[aria-current="page"] {
    background: rgba(45,106,79,.12);
    color: var(--accent-dark);
    font-weight: 700;
}
/* Outil épinglé en tête du menu — séparé visuellement du reste du sommaire. */
.a-nav-resources__group--featured {
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border, #d7e2db);
}
.a-nav-resources__item--featured {
    background: rgba(45,106,79,.09);
    font-weight: 600;
}
.a-nav-resources__item--featured:hover { background: rgba(45,106,79,.16); }
@media (prefers-color-scheme: dark) {
    .a-nav-resources__item--featured { background: rgba(149,213,178,.14); }
    .a-nav-resources__item--featured:hover { background: rgba(149,213,178,.22); }
    .a-nav-resources__item:hover { background: rgba(149,213,178,.12); }
    .a-nav-resources__item[aria-current="page"] {
        background: rgba(149,213,178,.18);
        color: var(--accent-dark);
    }
}

/* "Continuer la lecture" footer block — injected by a-nav.js */
.a-continue-reading {
    margin: 40px 0 8px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.a-continue-reading h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.a-continue-reading__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.a-continue-reading__card {
    display: block;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--fg);
    transition: border-color .15s, transform .12s, box-shadow .15s;
}
.a-continue-reading__card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.a-continue-reading__cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.a-continue-reading__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-dark);
    line-height: 1.3;
}
@media (prefers-color-scheme: dark) {
    .a-continue-reading__title { color: var(--accent-dark); }
}


/* ---------------------------------------------------------------------------
   Cibles tactiles des pages d'articles (2026-08-07)
   Les regles equivalentes de css/style.css ne s'appliquent pas ici : les 124
   pages statiques chargent article.css et lui seul.
   La barre est en `sticky`, pas en `fixed` : elle occupe sa place dans le flux,
   donc la faire grandir ne masque aucun contenu. On ne touche qu'a la hauteur —
   la contrainte connue de cette barre est horizontale (371 px de contenu pour
   326 px disponibles a 390 px de large, voir le commentaire plus haut).
   --------------------------------------------------------------------------- */

.a-topbar > a,
.a-topbar .a-cta,
.a-nav-resources__btn {
    min-height: 44px;
}

/* Fil d'Ariane et pied de page : liens en ligne dans une phrase, donc couverts
   par l'exception « inline » de WCAG 2.5.8 (taille contrainte par l'interligne
   du texte voisin). Le remplissage elargit quand meme la zone cliquable sans
   deplacer la ligne — un element `inline` ne propage pas son remplissage
   vertical a la hauteur de la ligne. */
/* Le pied s'appelle .a-footer, pas .a-foot (verifie sur privacy.html le
   2026-08-07 : la premiere ecriture ne touchait rien). */
.a-breadcrumb a,
.a-footer a,
.a-foot a {
    padding: 15px 8px;
    margin: -15px -8px;
}

/* ---------------------------------------------------------------------------
   Numeros d'urgence (2026-08-07)
   Deux pages sur 128 rendaient un numero appelable, alors que 46 citaient le
   3114 et 81 le SAMU. Sur telephone, il fallait retenir le numero, quitter la
   page et le composer a la main — au pire moment possible.
   --------------------------------------------------------------------------- */

/* Numeros rendus cliquables dans le corps de l'article. Souligne en pointille
   pour se distinguer d'un lien de navigation : ce lien passe un appel. */
a.a-tel {
    color: inherit;
    font-weight: 700;
    text-decoration: underline dotted currentColor 2px;
    text-underline-offset: 3px;
    white-space: nowrap;
    padding: 10px 4px;
    margin: -10px -4px;
}
a.a-tel:hover, a.a-tel:focus-visible { text-decoration-style: solid; }

#a-urgence-wrap {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#a-urgence-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 9999px;
    background: #9d2235;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
#a-urgence-btn:hover { background: #b3283d; }
#a-urgence-btn:focus-visible { outline: 3px solid #9d2235; outline-offset: 3px; }

#a-urgence {
    width: min(300px, calc(100vw - 28px));
    background: var(--card-bg, #fff);
    color: var(--fg, #14211a);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 8px 26px rgba(0,0,0,.24);
}
#a-urgence a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
#a-urgence a:hover, #a-urgence a:focus-visible { background: rgba(157,34,53,.10); }
#a-urgence a strong { font-size: 19px; color: #9d2235; min-width: 46px; }
#a-urgence a span { font-size: 12.5px; line-height: 1.35; }
#a-urgence p {
    margin: 6px 10px 4px;
    font-size: 12px;
    color: var(--muted-fg, #5c6b62);
}

/* Le bouton flotte au-dessus du pied de page : on lui reserve sa place. */
.a-footer { padding-bottom: 76px; }

/* ---------------------------------------------------------------------------
   Tableaux larges (2026-08-08)
   `.a-tbl { width:100% }` ne suffit pas : un tableau a trois colonnes de prose
   ne peut pas descendre sous sa largeur min-content. A 390 px il elargissait la
   fenetre de rendu elle-meme (mesure : table 434 px, innerWidth passe a 454),
   ce qui degradait TOUTE la page et echappait aux detecteurs de debordement,
   lesquels comparent scrollWidth a innerWidth — qui grandit avec.
   Le defilement doit rester DANS le tableau, jamais dans la page.
   --------------------------------------------------------------------------- */
.a-tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
}
.a-tbl-wrap > .a-tbl { margin: 0; }
@media (max-width: 560px) {
    .a-tbl-wrap > .a-tbl { min-width: 480px; font-size: .9rem; }
    .a-tbl-wrap > .a-tbl th,
    .a-tbl-wrap > .a-tbl td { padding: 9px 11px; }
}

/* Filet pour les chaines insecables (2026-08-08).
   « physique/psychologique/sommeil/cognitif/sensoriel » — 416 px sans une seule
   espace — elargissait la fenetre de rendu de privacy.html a 458 px sur mobile.
   Une URL collee, un nom de molecule a rallonge ou une enumeration a slashes
   produiront le meme effet ; on casse plutot que d'elargir la page. */
.a-article p,
.a-article li,
.a-article td,
.a-article h1,
.a-article h2,
.a-article h3 {
    overflow-wrap: break-word;
}

/* Barre d'articles sous 380 px (2026-08-08).
   A 360 px de large — largeur tres repandue sur Android — le bouton d'appel a
   l'action depassait de 2 a 8 px selon les pages et elargissait la fenetre de
   rendu. Le palier existant s'arretait a 480 px, insuffisant ici. On resserre
   l'espacement et la typo plutot que de masquer un element : les trois reperes
   (marque, Ressources, Calculateur) restent visibles. */
@media (max-width: 380px) {
    .a-topbar { padding: 10px 8px; gap: 6px; }
    .a-topbar > a { font-size: 14px; gap: 5px; }
    .a-topbar > a svg { width: 18px; height: 18px; }
    .a-topbar .a-nav-resources__btn { padding: 5px 7px; font-size: 12px; gap: 3px; }
    .a-topbar .a-cta { padding: 6px 9px; font-size: 11.5px; }
}