/* ==========================================================================
   Azea : couche editoriale (theme "Encyclopedie")
   --------------------------------------------------------------------------
   Charge APRES theme.css. Tout est limite a html.az-ed : retirer la classe
   az-ed de <html> rend le site exactement tel qu'il etait (retour arriere en
   une ligne). Aucune modification d'app.js n'est necessaire : on s'appuie sur
   les id stables d'index.html et sur les jetons --color-* de theme.css.

   Principes : papier clair, encre noire, une seule serif de lecture, aplats
   au lieu de degrades et de halos, filets fins, vert du Togo pour les liens et
   les surtitres, jaune et rouge en touches rares.

   Polices : auto-hebergees (CSP font-src 'self', usage hors-ligne APK / Pi /
   cle USB). Noto Serif est retenue parce qu'elle couvre les lettres de l'ewe
   et du kabiye (ɖ ɛ ɔ ŋ ƒ ʋ ɣ), ce que ni Source Serif 4 ni Literata ne font.
   Licence : SIL OFL 1.1, voir vendor/fonts/OFL-noto-serif.txt.
   ========================================================================== */

/* ---- Polices ------------------------------------------------------------ */
@font-face {
    font-family: 'Azea Serif';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(vendor/fonts/noto-serif-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    /* Lettres ewe et kabiye, diacritiques : telecharge seulement si la page en contient. */
    font-family: 'Azea Serif';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(vendor/fonts/noto-serif-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7CA, U+A7D0-A7D1, U+A7D3, U+A7D5-A7D9, U+A7F2-A7FF;
}
@font-face {
    /* Italique latine. Pour ɛ ɔ ɖ en italique, le navigateur incline la romaine. */
    font-family: 'Azea Serif';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(vendor/fonts/noto-serif-latin-wght-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tout le reste ne concerne que l'ecran : les regles d'impression de theme.css
   restent seules maitresses du papier. */
@media screen {

/* ---- Jetons ------------------------------------------------------------- */
/* Declares sur <body> (et non sur <html>) : une variable qui en cite une autre
   est resolue la ou elle est declaree. Les trois blocs de couleurs et le bloc
   de correspondance vivent donc sur le meme element. */

/* Theme par defaut (sombre "Cauri d'Or") : anthracite chaud */
html.az-ed body {
    --ed-paper: #121412;
    --ed-surface: #1a1d1b;
    --ed-surface-2: #222623;
    --ed-rule: #2b302d;
    --ed-rule-strong: #3e4440;
    --ed-ink: #eeede8;
    --ed-ink-2: #c9cbc5;
    --ed-muted: #959a94;
    --ed-brand: #0b7a5a;
    --ed-brand-hover: #0e8f69;
    --ed-brand-ink: #6fd3a8;
    --ed-gold: #f2c94c;
    --ed-gold-ink: #f2c94c;
    --ed-red: #ff6b7d;
    --ed-focus: #f2c94c;
    --ed-right: #4fd18b;
    --ed-wrong: #ff7b72;
    --ed-overlay-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

/* "Journee au Lycee" (clair, theme par defaut des nouveaux lecteurs) : le papier */
html.az-ed body.theme-lycee {
    --ed-paper: #ffffff;
    --ed-surface: #f6f5f1;
    --ed-surface-2: #eeece5;
    --ed-rule: #e3e0d7;
    --ed-rule-strong: #c8c4b8;
    --ed-ink: #141614;
    --ed-ink-2: #3a3f3c;
    --ed-muted: #626864;
    --ed-brand: #006a4e;
    --ed-brand-hover: #005a42;
    --ed-brand-ink: #005a42;
    --ed-gold: #fcd116;
    --ed-gold-ink: #7a6000;
    --ed-red: #c8102e;
    --ed-focus: #005a42;
    --ed-right: #1a7f4b;
    --ed-wrong: #b42318;
    --ed-overlay-shadow: 0 18px 48px rgba(20, 22, 20, 0.16);
    color-scheme: light;
}

/* "Noir" : noir profond (ecrans OLED) */
html.az-ed body.theme-noir {
    --ed-paper: #000000;
    --ed-surface: #0e0e0e;
    --ed-surface-2: #171717;
    --ed-rule: #252525;
    --ed-rule-strong: #383838;
    --ed-ink: #f2f2ef;
    --ed-ink-2: #c8c8c3;
    --ed-muted: #8f8f8a;
    --ed-brand: #0b7a5a;
    --ed-brand-hover: #0e8f69;
    --ed-brand-ink: #7ddcb2;
    --ed-gold: #fcd116;
    --ed-gold-ink: #fcd116;
    --ed-red: #ff6b7d;
    --ed-focus: #fcd116;
    --ed-right: #4fd18b;
    --ed-wrong: #ff7b72;
    --ed-overlay-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
}

/* Correspondance avec les jetons de theme.css : tous les composants existants
   (card, theme-title, accent-text...) basculent sans autre retouche. */
html.az-ed body,
html.az-ed body.theme-lycee,
html.az-ed body.theme-noir {
    --ed-serif: 'Azea Serif', 'Noto Serif', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --ed-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --color-bg-pagne: var(--ed-paper);
    --color-pagne-grain-1: transparent;
    --color-pagne-grain-2: transparent;
    --color-pagne-gradient: transparent;
    --color-header: var(--ed-paper);
    --color-header-border: var(--ed-rule);
    --color-card-bg: var(--ed-paper);
    --color-card-bg-gradient-start: var(--ed-paper);
    --color-card-bg-gradient-end: var(--ed-paper);
    --color-card-border: var(--ed-rule);
    --color-card-inner-bg: var(--ed-surface);
    --color-card-inner-border: var(--ed-rule);
    --color-text-title: var(--ed-ink);
    --color-text-primary: var(--ed-ink);
    --color-text-secondary: var(--ed-ink-2);
    --color-text-muted: var(--ed-muted);
    --color-choice-bg: var(--ed-paper);
    --color-choice-hover: var(--ed-surface);
    --color-accent: var(--ed-brand-ink);
    --color-divider-opacity: 1;
    --color-primary: var(--ed-brand);
    --color-primary-hover: var(--ed-brand-hover);
    --color-primary-soft: var(--ed-surface-2);
    --color-hero-glow: transparent;
    --color-link: var(--ed-brand-ink);
    --color-right: var(--ed-right);
    --color-wrong: var(--ed-wrong);

    background-color: var(--ed-paper);
    background-image: none;
    color: var(--ed-ink);
}

/* ---- Fond, aplats, coins ------------------------------------------------ */
html.az-ed body.bg-pagne-grain::before,
html.az-ed body.bg-pagne-grain::after { content: none; }

html.az-ed .card {
    background: var(--ed-paper);
    border-color: var(--ed-rule);
    box-shadow: none;
}
html.az-ed .panel {
    background: var(--ed-surface);
    border-color: var(--ed-rule);
    box-shadow: none;
}
html.az-ed .theme-divide { border-color: var(--ed-rule); }
html.az-ed :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-inner, .card--interactive, .card--interactive:hover) { box-shadow: none; }
html.az-ed :is(.rounded-3xl, .rounded-2xl) { border-radius: 6px; }
html.az-ed :is(.rounded-xl, .rounded-lg) { border-radius: 4px; }

/* Les bandeaux degrades vert-jaune-rouge en tete de carte et de fenetre */
html.az-ed :is(.h-2, .h-1\.5).bg-gradient-to-r { display: none; }

/* Un seul rappel du drapeau, fin, tout en haut de la page */
html.az-ed .pagne-border-top {
    height: 3px;
    background: linear-gradient(90deg, var(--ed-red) 0 18%, var(--ed-brand) 18% 60%, var(--ed-gold) 60% 100%);
    background-size: auto;
    box-shadow: none;
}
html.az-ed .togolese-divider {
    height: 0;
    border: 0;
    border-top: 1px solid var(--ed-rule);
    background: none;
    opacity: 1;
}
html.az-ed #reading-progress { background: var(--ed-brand); height: 3px; }

/* Boutons */
html.az-ed .btn-chrome {
    background: transparent;
    border-color: var(--ed-rule-strong);
    color: var(--ed-ink-2);
    border-radius: 4px;
    box-shadow: none;
}
html.az-ed .btn-chrome:hover { background: var(--ed-surface); color: var(--ed-ink); }
html.az-ed .theme-choice-btn {
    background: var(--ed-paper);
    border-color: var(--ed-rule-strong);
    color: var(--ed-ink);
    border-radius: 4px;
    box-shadow: none;
}
html.az-ed .theme-choice-btn:hover { background: var(--ed-surface); }
html.az-ed .btn-primary {
    background: var(--ed-brand);
    background-image: none;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: none;
}
html.az-ed .btn-primary:hover { background: var(--ed-brand-hover); }
/* Boutons d'action verts en degrade (Copier, Continuer, Envoyer) : aplat */
html.az-ed .bg-gradient-to-r.from-togoGreen {
    background-image: none;
    background-color: var(--ed-brand);
    border-radius: 4px;
    box-shadow: none;
}
html.az-ed .bg-gradient-to-r.from-togoGreen:hover { background-color: var(--ed-brand-hover); }

/* Pastilles jaunes translucides : deviennent des etiquettes sobres */
html.az-ed .bg-togoYellow\/10 { background-color: transparent; }
html.az-ed :is(.border-togoYellow\/20, .border-togoYellow\/25, .border-togoYellow\/40) { border-color: var(--ed-rule-strong); }
html.az-ed body.theme-lycee .text-emerald-300 { color: var(--ed-right); }

/* Survols : pas de saut, un zoom a peine perceptible */
html.az-ed .hover\:-translate-y-1:hover { transform: none; }
html.az-ed .group:hover .group-hover\:scale-105 { transform: scale(1.02); }

html.az-ed :focus-visible { outline: 2px solid var(--ed-focus); outline-offset: 2px; }

html.az-ed .serif-display { font-family: var(--ed-serif); letter-spacing: -0.01em; }
/* Le logotype garde son dessin d'origine (Georgia), partout le meme que sur les visuels de marque */
html.az-ed .azea-wordmark { font-family: Georgia, 'Azea Serif', 'Iowan Old Style', 'Times New Roman', serif; }

/* ---- En-tete ------------------------------------------------------------ */
html.az-ed header .theme-header {
    background: var(--ed-paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--ed-rule);
    box-shadow: none;
}
html.az-ed .header-tagline {
    color: var(--ed-muted);
    letter-spacing: 0.14em;
}
html.az-ed .header-brand .panel {
    background: transparent;
    border-color: transparent;
}
html.az-ed .header-search-input {
    background: var(--ed-surface);
    border-color: var(--ed-rule-strong);
    border-radius: 4px 0 0 4px;
    color: var(--ed-ink);
    box-shadow: none;
}
html.az-ed .header-search-input::placeholder { color: var(--ed-muted); }
html.az-ed .header-search-input:focus {
    background: var(--ed-paper);
    border-color: var(--ed-brand-ink);
    outline: none;
}
html.az-ed .header-search-submit { border-radius: 0 4px 4px 0; }
html.az-ed .header-search-palette {
    background: var(--ed-paper);
    border: 1px solid var(--ed-rule-strong);
    border-radius: 4px;
    box-shadow: var(--ed-overlay-shadow);
}
html.az-ed :is(.header-search-option.is-active, .header-search-option:hover) { background: var(--ed-surface); }
html.az-ed .header-lang-code.is-on { color: var(--ed-ink); }

/* Bandeau des rubriques : un sommaire de journal */
html.az-ed .nav-strip {
    background: var(--ed-paper);
    border-bottom: 1px solid var(--ed-rule);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
html.az-ed #nav-strip-inner { gap: 0; scrollbar-width: none; }
html.az-ed #nav-strip-inner::-webkit-scrollbar { display: none; }
html.az-ed #nav-strip-inner > button {
    font-family: var(--ed-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ed-ink-2);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 12px 10px;
    white-space: nowrap;
    box-shadow: none;
}
html.az-ed #nav-strip-inner > button:hover,
html.az-ed #nav-strip-inner > button:focus-visible {
    color: var(--ed-ink);
    border-bottom-color: var(--ed-gold);
}

/* ---- Accueil ------------------------------------------------------------ */
html.az-ed .hb-section-title {
    font-family: var(--ed-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-ink);
    background: none;
    border-top: 2px solid var(--ed-ink);
    padding-top: 10px;
    margin-bottom: 18px;
}
html.az-ed .hb-section-title::before,
html.az-ed .hb-section-title::after { content: none; }
html.az-ed .hb-rule {
    height: 0;
    border: 0;
    border-top: 1px solid var(--ed-rule);
    background: none;
}

/* A la une */
html.az-ed #hub-lead > button { gap: 36px; align-items: center; }
html.az-ed #hub-lead > button > div:first-child {
    border: 0;
    border-radius: 2px;
    background: var(--ed-surface);
}
html.az-ed #hub-lead > button > div:first-child img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
html.az-ed #hub-lead > button > div:last-child { gap: 14px; }
html.az-ed #hub-lead > button > div:last-child > p:first-child {
    font-family: var(--ed-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ed-brand-ink);
}
html.az-ed #hub-lead h2 {
    font-family: var(--ed-serif);
    font-weight: 650;
    font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--ed-ink);
    text-wrap: balance;
    text-decoration-thickness: 2px;
}
html.az-ed #hub-lead h2 + p {
    font-family: var(--ed-serif);
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--ed-ink-2);
    max-width: 36em;
    text-wrap: pretty;
}
html.az-ed .hb-link { color: var(--ed-brand-ink); font-weight: 700; font-size: 14px; }
html.az-ed .group:hover .hb-link { text-decoration: underline; text-underline-offset: 3px; }

/* Grille des articles mis en avant */
html.az-ed #hub-featured-grid {
    column-gap: 28px;
    row-gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--ed-rule);
}
html.az-ed #hub-featured-grid > button > div:first-child {
    aspect-ratio: 3 / 2 !important; /* remplace le 3/4 pose en style en ligne */
    border: 0;
    border-radius: 2px;
}
html.az-ed #hub-featured-grid h3 {
    font-family: var(--ed-serif);
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
    text-wrap: balance;
}
html.az-ed #hub-featured-grid p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ed-ink-2);
}

/* Bandes thematiques (biographies, histoires, langues) */
html.az-ed #hub-bands button {
    border-bottom: 1px solid var(--ed-rule);
    padding-block: 12px;
}
html.az-ed #hub-bands button > span:first-child { border: 0; border-radius: 2px; }
html.az-ed #hub-bands button > span:last-child > span:first-child {
    font-family: var(--ed-serif);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* ---- Ecrans Rubrique et Decouverte -------------------------------------- */
html.az-ed :is(#browse-title, #discovery-title) {
    font-family: var(--ed-serif);
    font-weight: 650;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    letter-spacing: -0.015em;
}
html.az-ed :is(#screen-browse, #screen-discovery) > .card {
    border: 0;
    border-bottom: 2px solid var(--ed-ink);
    border-radius: 0;
    background: transparent;
}
html.az-ed :is(#screen-browse, #screen-discovery) > .card > div:not(.h-2) { padding-inline: 0; }
html.az-ed #search-input { border-radius: 4px; background: var(--ed-surface); border-color: var(--ed-rule-strong); }
html.az-ed #browse-content > .card { border-color: var(--ed-rule); }
html.az-ed #browse-content > .card:hover { border-color: var(--ed-ink-2); }
html.az-ed #browse-content h2 {
    font-family: var(--ed-serif);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.25;
}
html.az-ed #browse-content p { font-size: 14px; line-height: 1.5; }

/* Boutons de retour : de simples liens */
html.az-ed :is(#article-back-btn, #browse-back-btn, #discovery-back-btn) {
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ed-brand-ink);
}
html.az-ed :is(#article-back-btn, #browse-back-btn, #discovery-back-btn):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Article ------------------------------------------------------------ */
html.az-ed #article-breadcrumb { font-size: 13px; color: var(--ed-muted); }
html.az-ed #article-breadcrumb a,
html.az-ed #article-breadcrumb button { color: var(--ed-ink-2); }

/* L'article n'est plus une carte posee sur un fond : c'est la page. overflow
   visible rend aussi au sommaire son comportement "sticky". */
html.az-ed #screen-article > article {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
html.az-ed #screen-article > article > div:not(.h-2) {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
html.az-ed #screen-article > article > div:not(.h-2) > * { margin: 0; }
/* Ordre de lecture d'encyclopedie : titre et chapeau d'abord, puis l'image.
   Le titre et l'image ne sont plus ordonnes ici : index.html les porte desormais dans le bon
   ordre, le <header> puis #article-hero, pour que l'ordre lu par un lecteur d'ecran suive
   l'ordre vu (critere WCAG 1.3.2). Les deux regles qui les inversaient sont donc parties ;
   celles qui restent placent ce qui vient apres, et le flux naturel fait le reste. */
html.az-ed #article-audio { order: 3; }
html.az-ed #screen-article > article > div:not(.h-2) > .togolese-divider { order: 4; }
html.az-ed #screen-article > article > div:not(.h-2) > div:last-child { order: 5; }

html.az-ed #article-icon { display: none; }
html.az-ed #screen-article header > div.flex-grow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html.az-ed #screen-article header > div.flex-grow > * { margin: 0; }
html.az-ed #article-title { order: 1; }
html.az-ed #article-summary { order: 2; }
html.az-ed #screen-article header > div.flex-grow > div:first-child { order: 3; }
html.az-ed #article-actions { order: 4; }

html.az-ed #article-title {
    font-family: var(--ed-serif);
    font-weight: 650;
    font-size: clamp(2.1rem, 1.25rem + 3vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--ed-ink);
    text-wrap: balance;
}
html.az-ed #article-summary {
    font-family: var(--ed-serif);
    font-size: clamp(1.15rem, 1.03rem + 0.45vw, 1.375rem);
    line-height: 1.5;
    color: var(--ed-ink-2);
    max-width: 40em;
    text-wrap: pretty;
}

/* Ligne de confiance : rubrique · duree · auteur · mise a jour */
html.az-ed #screen-article header > div.flex-grow > div:first-child {
    gap: 0;
    row-gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--ed-rule);
}
html.az-ed #screen-article header > div.flex-grow > div:first-child > span {
    font-family: var(--ed-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ed-muted);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
html.az-ed #screen-article header > div.flex-grow > div:first-child > span:empty { display: none; }
html.az-ed #screen-article header > div.flex-grow > div:first-child > span:not(:empty):not(.hidden) ~ span:not(:empty):not(.hidden)::before {
    content: "\00B7";
    margin: 0 0.55em;
    color: var(--ed-rule-strong);
}
html.az-ed #article-category {
    color: var(--ed-brand-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
html.az-ed #screen-article header > div.flex-grow > div:first-child > #article-category {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-brand-ink);
}
html.az-ed #screen-article header > div.flex-grow > div:first-child > #article-byline { color: var(--ed-ink-2); font-weight: 600; }
html.az-ed #screen-article header > div.flex-grow > div:first-child > #article-read-chip { color: var(--ed-right); font-weight: 700; }

html.az-ed #article-actions { gap: 8px; padding-top: 0; }
html.az-ed #article-actions .btn-chrome { font-size: 13px; font-weight: 600; padding: 6px 12px; }
html.az-ed #article-bookmark-btn { font-size: 26px; color: var(--ed-muted); }
html.az-ed #article-bookmark-btn:hover { color: var(--ed-gold-ink); transform: none; }

/* Image d'ouverture */
html.az-ed #article-hero img {
    width: 100%;
    height: auto;
    max-height: min(70vh, 640px);
    object-fit: cover;
    border: 0;
    border-radius: 2px;
}
/* Image d'ouverture trop haute pour le cadre : montrée entière, posée sur une copie floutée
   d'elle-même, plutôt que coupée au front ou aux yeux. La classe est posée par frameHero
   (app.js) quand le recadrage garderait moins de 60 % de la hauteur. --hero-bg et
   --media-nat-h viennent de buildMediaFigure ; la hauteur native évite d'agrandir une petite
   image au-delà de sa taille réelle. */
html.az-ed #article-hero .hero-frame--whole .media-zoom {
    position: relative;
    overflow: hidden;
    height: min(70vh, 640px, var(--media-nat-h, 640px));
    border-radius: 2px;
}
html.az-ed #article-hero .hero-frame--whole .media-zoom::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--hero-bg) center / cover no-repeat;
    filter: blur(24px) brightness(0.55);
}
html.az-ed #article-hero .hero-frame--whole img {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    /* La boîte de l'image couvre toute la largeur : son fond (classe panel) masquerait le flou. */
    background: transparent;
}
html.az-ed #screen-article figcaption {
    font-family: var(--ed-sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ed-muted);
    margin-top: 8px;
    max-width: 72ch;
}

/* Colonnes : sommaire | texte | fiche */
@media (min-width: 1024px) {
    html.az-ed #screen-article > article > div:not(.h-2) > div:last-child { column-gap: 44px; }
}

/* Sommaire */
html.az-ed #article-toc .rail-box,
html.az-ed #article-factbox .rail-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
html.az-ed :is(#article-toc, #article-factbox) summary {
    font-family: var(--ed-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-ink);
}
html.az-ed :is(#article-toc, #article-factbox) summary > span[aria-hidden]:not(.rail-chevron) { display: none; }
html.az-ed #article-toc summary { padding-bottom: 8px; border-bottom: 2px solid var(--ed-ink); }
html.az-ed #article-toc ol { list-style: none; padding-left: 0; margin-top: 6px; column-gap: 24px; row-gap: 0; }
html.az-ed #article-toc li a {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--ed-rule);
    color: var(--ed-ink-2);
}
html.az-ed #article-toc li a:hover { color: var(--ed-ink); border-left-color: var(--ed-rule-strong); }
html.az-ed #article-toc li a.toc-active {
    color: var(--ed-ink);
    font-weight: 700;
    border-left-color: var(--ed-brand);
}

/* Fiche (l'equivalent des "Quick facts") */
html.az-ed #article-factbox .rail-box {
    background: var(--ed-surface);
    border-top: 3px solid var(--ed-brand);
    padding: 14px 16px 8px;
}
html.az-ed #article-factbox dl > * { border-color: var(--ed-rule); }
html.az-ed #article-factbox dl > div { padding-block: 9px; }
html.az-ed #article-factbox dt {
    font-family: var(--ed-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ed-muted);
}
html.az-ed #article-factbox dd {
    font-family: var(--ed-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ed-ink);
    margin-top: 2px;
}

/* Sur telephone et tablette, sommaire et fiche passent au-dessus du texte : on les encadre */
@media (max-width: 1023.98px) {
    html.az-ed #article-toc .rail-box {
        background: var(--ed-surface);
        border: 1px solid var(--ed-rule);
        padding: 14px 16px;
    }
    html.az-ed #article-toc .rail-box:not([open]) summary { padding-bottom: 0; border-bottom: 0; }
}

/* Corps du texte */
html.az-ed #article-sections { display: flex; flex-direction: column; gap: 2.25rem; }
html.az-ed #article-sections > section { margin: 0; }
html.az-ed #article-sections h2 {
    font-family: var(--ed-serif);
    font-weight: 650;
    font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ed-ink);
    padding-top: 18px;
    border-top: 1px solid var(--ed-rule);
    gap: 0;
    text-wrap: balance;
}
html.az-ed #article-sections > section:first-child h2 { border-top: 0; padding-top: 0; }
html.az-ed #article-sections h2 > .accent-text { display: none; }
html.az-ed #article-sections h3 {
    font-family: var(--ed-serif);
    font-weight: 650;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--ed-ink);
}
html.az-ed #article-sections .reading {
    font-family: var(--ed-serif);
    font-size: 1.125rem;
    line-height: 1.72;
    color: var(--ed-ink);
    font-feature-settings: "kern", "liga";
    text-wrap: pretty;
}
html.az-ed #article-sections .reading > * + * { margin-top: 1.05em; }
html.az-ed #article-sections .reading strong { font-weight: 650; color: var(--ed-ink); }
html.az-ed #article-sections .reading :is(ul, ol) { padding-left: 1.3em; }
html.az-ed #article-sections .reading ul { list-style: disc; }
html.az-ed #article-sections .reading ol { list-style: decimal; }
html.az-ed #article-sections .reading blockquote {
    border-left: 3px solid var(--ed-gold);
    padding-left: 1em;
    color: var(--ed-ink-2);
    font-style: italic;
}
html.az-ed :is(#article-sections .reading a, .wikilink) {
    color: var(--ed-brand-ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--ed-rule-strong);
    text-decoration-color: color-mix(in srgb, var(--ed-brand-ink) 40%, transparent);
}
html.az-ed :is(#article-sections .reading a, .wikilink):hover { text-decoration-color: currentColor; }
html.az-ed .ref-mark,
html.az-ed .ref-mark a { color: var(--ed-brand-ink); font-family: var(--ed-sans); font-weight: 700; }
html.az-ed #article-sections figure { margin-top: 1.5rem; }
html.az-ed #article-sections figure img { border: 0; border-radius: 2px; }

/* Etiquettes de rubrique en bas d'article */
html.az-ed :is(#article-didyouknow, #article-related, #article-sources, #article-tags) h2 {
    font-family: var(--ed-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-ink);
}
html.az-ed :is(#article-didyouknow, #article-related, #article-sources, #article-tags) h2 > .accent-text { display: none; }

/* Le saviez-vous ? */
html.az-ed #article-didyouknow {
    background: var(--ed-surface);
    border-left: 3px solid var(--ed-gold);
    padding: 18px 20px;
}
html.az-ed #article-didyouknow .panel {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ed-rule);
    border-radius: 0;
    padding: 10px 0;
    margin: 0;
    font-family: var(--ed-serif);
    font-size: 16px;
    line-height: 1.55;
}
html.az-ed #article-didyouknow .panel:first-child { border-top: 0; }
html.az-ed #article-didyouknow .panel > span:first-child { display: none; }

/* Programme scolaire */
html.az-ed #article-edu > section {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ed-rule);
    border-radius: 0;
    padding: 16px 0 0;
}

/* Quiz : l'appel a l'action principal de l'article */
html.az-ed #article-quiz-btn {
    background: var(--ed-ink);
    color: var(--ed-paper);
    border: 0;
    border-radius: 4px;
    padding-block: 14px;
}
html.az-ed #article-quiz-btn:hover { background: var(--ed-brand); color: #ffffff; }

/* Voir aussi */
html.az-ed #article-related > div { column-gap: 28px; row-gap: 0; }
html.az-ed #article-related button {
    background: none;
    border: 0;
    border-top: 1px solid var(--ed-rule);
    border-radius: 0;
    padding: 12px 0;
}
html.az-ed #article-related button > span:first-child { display: none; }
html.az-ed #article-related button > span:last-child {
    font-family: var(--ed-serif);
    font-size: 16px;
    font-weight: 600;
}

/* Mots-cles, pagination */
html.az-ed .tag-chip {
    border-radius: 4px;
    background: var(--ed-surface);
    border: 1px solid var(--ed-rule);
    color: var(--ed-ink-2);
}
html.az-ed .pager-link {
    border-radius: 4px;
    background: transparent;
    border-color: var(--ed-rule);
    box-shadow: none;
}

/* Sources et references : la preuve, mise en avant */
html.az-ed #article-sources { border-top: 2px solid var(--ed-ink); padding-top: 14px; }
html.az-ed #article-sources .ref-list {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ed-ink-2);
}
html.az-ed #article-sources .ref-list > li { padding-block: 4px; }
html.az-ed #article-sources .ref-title { color: var(--ed-brand-ink); }
html.az-ed .derived-notice {
    background: var(--ed-surface);
    border-color: var(--ed-rule);
    border-radius: 4px;
    box-shadow: none;
}

/* ---- Panneaux et fenetres ----------------------------------------------- */
html.az-ed .drawer-panel { box-shadow: var(--ed-overlay-shadow); }
html.az-ed .modal-in { box-shadow: var(--ed-overlay-shadow); }

/* ---- Pied de page ------------------------------------------------------- */
html.az-ed .site-footer {
    background: var(--ed-surface);
    background-image: none;
    border-top: 1px solid var(--ed-rule);
}
html.az-ed .site-footer-glow { display: none; }

/* ---- Infobulle de glossaire --------------------------------------------- */
/* Surfaces du parcours de lecture que le paquet d'origine ne traitait pas. Elles portent
   leur propre border-radius et box-shadow dans theme.css, hors d'atteinte de la regle
   d'aplatissement generale, qui ne vise que les utilitaires .shadow-*. Sans ces deux
   sections, un ilot au style application subsistait au milieu d'une page de papier.
   Les couleurs viennent des jetons --ed-*, jamais ecrites en dur, pour que les trois
   themes suivent. */
html.az-ed .az-tip {
    background: var(--ed-paper);
    border: 1px solid var(--ed-rule-strong);
    border-radius: 4px; /* meme valeur que .header-search-palette : l'autre calque flottant */
    box-shadow: var(--ed-overlay-shadow);
}
html.az-ed .az-tip-head {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--ed-rule);
}
/* --ed-brand-ink et non --ed-brand : le premier est la declinaison lisible du vert, le
   second sert d'aplat. Sur le theme sombre, --ed-brand tombe a 3,19:1 sur la surface. */
html.az-ed .az-tip-icon { color: var(--ed-brand-ink); }
html.az-ed .az-tip-lang {
    background: var(--ed-surface);
    border: 1px solid var(--ed-rule);
    border-radius: 2px;
    color: var(--ed-muted);
    font-family: var(--ed-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
html.az-ed .az-tip-def { font-family: var(--ed-serif); color: var(--ed-ink-2); }
html.az-ed .az-tip-meta { color: var(--ed-muted); }

/* ---- Assistant de lecture ----------------------------------------------- */
html.az-ed .assistant-panel { box-shadow: var(--ed-overlay-shadow); }
html.az-ed .assistant-box {
    background: var(--ed-paper);
    border: 1px solid var(--ed-rule-strong);
    border-radius: 4px;
}
html.az-ed .assistant-bubble {
    background: var(--ed-surface);
    border: 1px solid var(--ed-rule);
    border-radius: 2px;
    box-shadow: none;
    font-family: var(--ed-serif);
    color: var(--ed-ink);
}
/* La parole du lecteur se distingue par un filet vert en marge, comme une citation en
   colonne, et non par une bulle coloree aux angles arrondis. */
html.az-ed .assistant-bubble-user {
    background: var(--ed-surface-2);
    border-color: var(--ed-rule);
    border-left: 3px solid var(--ed-brand);
    border-radius: 0;
}
html.az-ed .assistant-bubble-note {
    background: transparent;
    border-color: var(--ed-rule);
    color: var(--ed-muted);
    font-family: var(--ed-sans);
}
html.az-ed .assistant-chip {
    background: var(--ed-surface);
    border: 1px solid var(--ed-rule);
    border-radius: 2px;
    color: var(--ed-ink-2);
    font-family: var(--ed-sans);
}
html.az-ed .assistant-chip:hover:not(:disabled) {
    background: var(--ed-surface-2);
    border-color: var(--ed-ink-2);
    color: var(--ed-ink);
}
html.az-ed .assistant-cite { color: var(--ed-brand-ink); font-family: var(--ed-sans); }
/* Les sources de l'assistant portent le meme filet epais que les references d'un
   article : c'est le meme geste editorial, montrer d'ou vient ce qui est affirme. */
html.az-ed .assistant-sources-title {
    border-top: 2px solid var(--ed-ink);
    color: var(--ed-ink);
    font-family: var(--ed-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
html.az-ed .assistant-sources { font-family: var(--ed-serif); }
html.az-ed .assistant-source-date { color: var(--ed-muted); }
html.az-ed .assistant-intro,
html.az-ed .assistant-footer { font-family: var(--ed-sans); color: var(--ed-muted); }
html.az-ed .assistant-search-cta { color: var(--ed-brand-ink); }
/* Le lanceur reste un disque : il porte le logo, et un logo carre se lirait comme une
   vignette. On aplatit son ombre, pas sa forme. */
html.az-ed .assistant-launcher {
    background: var(--ed-paper);
    border: 1px solid var(--ed-rule-strong);
    box-shadow: var(--ed-overlay-shadow);
}
html.az-ed .assistant-launcher:hover { background: var(--ed-surface); }
html.az-ed .assistant-launcher[aria-expanded="true"] {
    border-color: var(--ed-brand);
    box-shadow: 0 0 0 2px var(--ed-brand);
}

/* ---- Mouvement reduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.az-ed .group:hover .group-hover\:scale-105 { transform: none; }
}

} /* fin @media screen */