/* Tadaksahak — feuille de style unique, sans dépendance. Propriétés logiques (inline/block)
   pour que la mise en page s'inverse d'elle-même en arabe (dir="rtl").
   Identité « Sable et crépuscule » : couleurs prises dans le logo Tadaksahak Learning
   (silhouette brun d'ombre, or olive du nom, sable de « Learning », couchant sur les dunes). */

/* Polices hébergées sur le site (licence SIL Open Font License, fichiers LICENSE-* à côté) :
   Alegreya (titres), Alegreya Sans (texte), Gentium Book Plus (mots tadaksahak, alphabet
   phonétique complet), Noto Naskh Arabic (arabe). Le navigateur ne télécharge que les
   sous-ensembles dont la page a besoin (unicode-range). */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/alegreya-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/alegreya-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 { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/alegreya-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/alegreya-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-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-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alegreya-sans-latin-400-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 { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alegreya-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-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-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/alegreya-sans-latin-500-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 { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/alegreya-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-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-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/alegreya-sans-latin-700-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 { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/alegreya-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-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-A7FF; }
/* ɣ, ʃ, ǝ… absents d'Alegreya : repris de Gentium, glyphe par glyphe. */
@font-face { font-family: "Tad IPA"; font-weight: 400 600; font-display: swap; src: url("../fonts/tad-ipa-400.woff2") format("woff2"); unicode-range: U+01DD, U+0250-02AF; }
@font-face { font-family: "Tad IPA"; font-weight: 700 900; font-display: swap; src: url("../fonts/tad-ipa-700.woff2") format("woff2"); unicode-range: U+01DD, U+0250-02AF; }
@font-face { font-family: "Gentium Book Plus"; font-weight: 400 600; font-display: swap; src: url("../fonts/gentium-book-plus-tad-regular.woff2") format("woff2"); }
@font-face { font-family: "Gentium Book Plus"; font-weight: 700 900; font-display: swap; src: url("../fonts/gentium-book-plus-tad-bold.woff2") format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2-variations"), url("../fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }

/* Jetons de conception. Thème sombre « Nuit du désert » par défaut ; thème clair « Sable »
   choisi par le système ou par l'utilisateur. Contrastes vérifiés (AA, ≥ 4,5:1). */
:root {
  --bg: #16110d; --bg-2: #1b150f; --surface: #201913; --surface-2: #2b221a; --text: #f2e7d5; --muted: #c2b29a;
  --gold: #d2c07a; --gold-strong: #e9db9f; --accent: #e39a63; --on-accent: #1a110b;
  --red: #ef6a55; --green: #4fae7f; --border: #3b2f25;
  --logo-mark: #f0e3cb; --logo-title: #d2c07a; --logo-sub: #d9bb8c;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .22);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .35), 0 18px 46px rgb(0 0 0 / .32);
  --radius: 16px; --radius-lg: 26px; --wrap: 74rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Alegreya Sans", "Tad IPA", "Gentium Book Plus", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Naskh Arabic", sans-serif;
  --font-display: "Alegreya", "Tad IPA", "Gentium Book Plus", Georgia, "Times New Roman", "Noto Naskh Arabic", serif;
  --font-tad: "Gentium Book Plus", "Alegreya", Georgia, serif;
  --font-ar: "Noto Naskh Arabic", "Alegreya Sans", "Tad IPA", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #f6efe3; --bg-2: #efe5d4; --surface: #fffaf2; --surface-2: #efe4d1; --text: #231c15; --muted: #5e5244; --gold: #6b5d22; --gold-strong: #514618; --accent: #9a4520; --on-accent: #fff8ee; --red: #b3261e; --green: #22694a; --border: #e2d4bd; --logo-mark: #28221c; --logo-title: #7a6b33; --logo-sub: #a07c48; --shadow-1: 0 1px 2px rgb(60 40 20 / .08), 0 6px 18px rgb(60 40 20 / .08); --shadow-2: 0 2px 6px rgb(60 40 20 / .1), 0 20px 48px rgb(60 40 20 / .14); color-scheme: light; }
}
:root[data-theme="light"] { --bg: #f6efe3; --bg-2: #efe5d4; --surface: #fffaf2; --surface-2: #efe4d1; --text: #231c15; --muted: #5e5244; --gold: #6b5d22; --gold-strong: #514618; --accent: #9a4520; --on-accent: #fff8ee; --red: #b3261e; --green: #22694a; --border: #e2d4bd; --logo-mark: #28221c; --logo-title: #7a6b33; --logo-sub: #a07c48; --shadow-1: 0 1px 2px rgb(60 40 20 / .08), 0 6px 18px rgb(60 40 20 / .08); --shadow-2: 0 2px 6px rgb(60 40 20 / .1), 0 20px 48px rgb(60 40 20 / .14); color-scheme: light; }

/* Contraste élevé : renforce texte, bordures et fonds dans chaque thème. */
:root[data-contrast="more"] { --bg: #000000; --bg-2: #000000; --surface: #0d0a07; --surface-2: #1c1610; --text: #ffffff; --muted: #f1e9dc; --gold: #ffe08a; --gold-strong: #fff0c2; --accent: #ffb37e; --on-accent: #000000; --border: #d9c7a5; --logo-mark: #ffffff; --logo-title: #ffe08a; --logo-sub: #ffd9a8; }
:root[data-theme="light"][data-contrast="more"] { --bg: #ffffff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1e9da; --text: #000000; --muted: #222222; --gold: #4a3f10; --gold-strong: #332b08; --accent: #6e2b0e; --on-accent: #ffffff; --border: #3a3320; --logo-mark: #000000; --logo-title: #4a3f10; --logo-sub: #5d3f13; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])[data-contrast="more"] { --bg: #ffffff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1e9da; --text: #000000; --muted: #222222; --gold: #4a3f10; --gold-strong: #332b08; --accent: #6e2b0e; --on-accent: #ffffff; --border: #3a3320; --logo-mark: #000000; --logo-title: #4a3f10; --logo-sub: #5d3f13; }
}
:root[data-contrast="more"] .tile, :root[data-contrast="more"] .card, :root[data-contrast="more"] .search input, :root[data-contrast="more"] .search select { border-width: 2px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: calc(106.25% * var(--fs, 1)); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.65 var(--font); }
:lang(ar), [dir="rtl"] { font-family: var(--font-ar); }
/* L'écriture arabe n'a pas d'italique (le navigateur pencherait artificiellement les lettres) : on reste en romain. */
:is(em, i, cite, dfn, var, address, .subtitle):lang(ar) { font-style: normal; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-strong); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
img { max-inline-size: 100%; block-size: auto; }
h1, h2, h3 { line-height: 1.25; margin-block: 1.4em .5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-block-start: .6em; }
.wrap { inline-size: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.lead { font-size: 1.12rem; color: var(--muted); max-inline-size: 48rem; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; background: var(--gold); color: #000; padding: .5rem 1rem; border-radius: 8px; z-index: 10; }
.skip:focus { inset-block-start: 1rem; }

/* En-tête */
.site-header { border-block-end: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); position: sticky; inset-block-start: 0; backdrop-filter: blur(8px); z-index: 5; }
.header-row { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.main-nav { display: flex; gap: .15rem; flex-wrap: wrap; margin-inline-start: auto; }
.main-nav a, .langs a { padding: .4rem .55rem; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem; }
.main-nav a[aria-current="page"] { background: var(--gold); color: var(--on-accent); }
.main-nav a:hover { background: var(--surface-2); color: var(--text); }
.langs { display: flex; gap: .15rem; }
.langs a { font-weight: 400; color: var(--muted); font-size: .85rem; }
.langs a[aria-current="true"] { color: var(--gold); font-weight: 700; }

/* Accueil */
.hero { text-align: center; padding-block: 1rem 2rem; }
.hero .lead { margin-inline: auto; }
.stats { display: flex; justify-content: center; gap: 1rem 2.5rem; flex-wrap: wrap; list-style: none; padding: 0; color: var(--muted); }
.stats strong { display: block; font-size: 1.8rem; color: var(--gold); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-block: 2rem; }
.tile, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.tile { color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--text); }
.tile h2 { margin-block-start: 0; color: var(--gold); }
.wotd h2 { margin-block-start: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* Recherche */
.search { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 1.25rem; max-inline-size: 48rem; }
.hero .search { margin-inline: auto; }
.search input, .search select { flex: 1 1 14rem; min-block-size: 3rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.search select { flex: 0 1 14rem; }
.search button, .button { min-block-size: 3rem; padding: .6rem 1.4rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-accent); font: 700 1rem var(--font); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.letters { display: flex; flex-wrap: wrap; gap: .25rem; margin-block: .5rem 1rem; }
.letters a { min-inline-size: 2.2rem; text-align: center; padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); text-decoration: none; font-weight: 600; }
.letters a[aria-current="true"] { background: var(--gold); color: var(--on-accent); }
.count { color: var(--muted); }

/* Entrées */
.entries { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.entry-card a { display: block; block-size: 100%; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.entry-card a:hover { border-color: var(--gold); }
.entry-card .mot { font-weight: 700; font-size: 1.15rem; color: var(--gold); }
.entry-card .defs { display: grid; gap: .1rem; margin-block-start: .35rem; font-size: .95rem; }
.entry-card [lang="ar"] { text-align: end; }
.tag { display: inline-block; padding: .05rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 600; margin-inline-start: .4rem; }
.entry h1 { font-size: clamp(2rem, 6vw, 3.2rem); color: var(--gold); margin-block-end: .2rem; }
.defs-table { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; font-size: 1.1rem; }
.defs-table dt { color: var(--muted); font-weight: 600; }
.defs-table dd { margin: 0; }
.crumbs { margin-block-start: 1.5rem; }

/* Grammaire, bibliothèque, lecture */
.lessons { list-style: none; padding: 0; display: grid; gap: .4rem; }
.lessons a { text-decoration: none; color: var(--text); }
.lessons a:hover { color: var(--gold); }
.lessons .num { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--gold); font-weight: 700; margin-inline-end: .5rem; }
.documents { list-style: none; padding: 0; display: grid; gap: 1rem; }
.documents h2 { margin-block-start: 0; font-size: 1.2rem; }
.subtitle { color: var(--muted); font-style: italic; }
.prose { max-inline-size: 46rem; }
.prose p { margin-block: .8em; }
.prose h2 { color: var(--gold); font-size: 1.3rem; }
.toc, .notes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1.4rem 1rem; }
.notes { font-size: .9rem; color: var(--muted); }
.notes h3 { font-size: .95rem; }
.keywords .tag { margin-block: .2rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block: 2rem; }
.error-page { text-align: center; padding-block: 3rem; }
.error-page .code { font-size: 4rem; font-weight: 700; color: var(--gold); margin: 0; }

/* Navigation : fil d'Ariane, plan du site, pages voisines */
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; font-size: .9rem; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "›"; margin-inline-start: .5rem; color: var(--muted); }
[dir="rtl"] .crumbs li:not(:last-child)::after { content: "‹"; }
.crumbs [aria-current] { color: var(--text); }
.footer-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 2rem; margin-block-end: 1.5rem; }
.footer-map h2 { font-size: .95rem; margin: 0 0 .4rem; }
.footer-map ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.footer-map a { color: var(--muted); text-decoration: none; }
.footer-map a:hover { color: var(--gold); }
ul.tiles { list-style: none; padding: 0; }
.tiles .tile { display: block; block-size: 100%; }
.tiles.compact { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-block: .75rem 1.5rem; }
.tiles.compact h3 { margin: 0 0 .3rem; color: var(--gold); font-size: 1.05rem; }
.tiles.compact p { margin: 0; font-size: .9rem; color: var(--muted); }
.section-title { margin-block-end: .2rem; }
.section-title a { text-decoration: none; }
.siblings { border-block-start: 1px solid var(--border); padding-block-start: 1rem; }

/* Tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; inline-size: 100%; }
th, td { padding: .55rem .9rem; text-align: start; border-block-end: 1px solid var(--border); vertical-align: top; }
thead th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:last-child > * { border-block-end: 0; }
.center { text-align: center; }
.big { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.ipa { font-family: "Charis SIL", "Doulos SIL", "Noto Sans", "Segoe UI", serif; }
.phonemes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; }
.phonemes li { display: grid; place-items: center; padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.vocab th a { text-decoration: none; }

/* Textes : interlinéaire, faits, puces */
.prose.wide { max-inline-size: 56rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; color: var(--muted); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.interlinear { padding-inline-start: 2.2rem; display: grid; gap: .9rem; }
.interlinear li::marker { color: var(--gold); font-weight: 700; }
.interlinear p { margin: 0; }
.interlinear .tad { font-weight: 700; color: var(--gold); font-style: italic; }
.interlinear .gloss { font-size: .85rem; color: var(--muted); font-variant: small-caps; letter-spacing: .02em; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { background: var(--surface-2); border-radius: 999px; padding: .2rem .8rem; font-size: .9rem; }
blockquote { margin: 0; padding: .8rem 1.2rem; border-inline-start: 4px solid var(--gold); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.strategy h3 { margin-block-start: 0; }
.strategy code { font-size: 1.1rem; color: var(--gold); }
details summary { cursor: pointer; font-weight: 600; color: var(--gold); }

/* Frise */
.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: 1rem; }
.timeline::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 4.6rem; inline-size: 2px; background: var(--border); }
.timeline li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: start; }
.timeline time { font-weight: 700; color: var(--gold); text-align: end; padding-block-start: 1.1rem; font-size: .95rem; }
.timeline h2 { font-size: 1.15rem; margin-block-start: 0; }
.timeline img { border-radius: 10px; max-block-size: 18rem; object-fit: cover; }

/* Galerie, actualités */
.gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.gallery figure { margin: 0; padding: 0; overflow: hidden; block-size: 100%; }
.gallery img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { display: grid; gap: .25rem; padding: .9rem 1.1rem; font-size: .92rem; }
.gallery-refs { font-size: .82rem; color: var(--muted); }
.gallery-refs a { overflow-wrap: anywhere; }
.news { list-style: none; padding: 0; display: grid; gap: 1rem; }
.news .card { display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: start; }
.news img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.news h2 { font-size: 1.15rem; margin: .2rem 0 .4rem; }

/* Quiz, cartes, assistant, formulaires */
.quiz fieldset { margin-block: 0 1rem; display: grid; gap: .45rem; }
.quiz legend { float: inline-start; inline-size: 100%; padding: 0; font-weight: 700; display: flex; gap: .4rem; align-items: center; }
.quiz .num { display: inline-grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; background: var(--surface-2); color: var(--gold); font-size: .85rem; flex: none; }
.quiz label { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.quiz .ok { border-color: #2e9e5b; }
.quiz .ko { border-color: var(--red); }
.verdict { margin: .3rem 0 0; font-weight: 600; }
.ok .verdict { color: #3cbf72; }
.ko .verdict { color: #ff6b7d; }
.score { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.flashcard { text-align: center; max-inline-size: 34rem; margin-block: 1.5rem; }
.flashcard .word { font-size: 2rem; font-weight: 700; margin: .5rem 0 1rem; }
.flashcard .answer { font-size: 2.2rem; font-weight: 700; color: var(--gold); font-style: italic; }
.form, .ask { display: grid; gap: .45rem; max-inline-size: 40rem; }
.form fieldset { border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: .35rem; }
.form label, .ask label { font-weight: 600; margin-block-start: .5rem; }
.form input:not([type=radio]), .form select, .form textarea, .ask textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; inline-size: 100%;
}
.form button, .ask button { margin-block-start: 1rem; justify-self: start; }
.form button, .ask button, .quiz button { min-block-size: 3rem; padding: .6rem 1.4rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-accent); font: 700 1rem var(--font); cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.button.secondary { background: var(--surface-2); color: var(--text); }
.notice { padding: .8rem 1.1rem; border-radius: 10px; border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.notice.success { border-color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 14%, transparent); }
.answer-box { margin-block: 1.5rem; }
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Pied de page */
.site-footer { border-block-start: 1px solid var(--border); margin-block-start: 3rem; padding-block: 1.5rem; font-size: .9rem; }

@media (max-width: 40rem) {
  .news .card { grid-template-columns: 1fr; }
  .timeline::before { inset-inline-start: .45rem; }
  .timeline li { grid-template-columns: 1fr; gap: .3rem; padding-inline-start: 1.5rem; }
  .timeline time { text-align: start; padding: 0; }
  .facts { grid-template-columns: 1fr; }
  .main-nav { margin-inline-start: 0; inline-size: 100%; }
  .defs-table { grid-template-columns: 1fr; gap: .1rem; }
  .defs-table dd { margin-block-end: .6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Pied de page : références et crédit de l'auteur */
.footer-bottom { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-block: 2rem 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.footer-bottom h2 { font-size: .95rem; margin: 0 0 .75rem; }
.footer-refs ol { margin: 0 0 .75rem; padding-inline-start: 1.2rem; display: grid; gap: .45rem; font-size: .88rem; line-height: 1.5; }
.footer-refs cite { font-style: italic; }
.credit-card { display: flex; gap: 1rem; align-items: flex-start; }
.credit-card img { border-radius: 50%; flex: none; border: 2px solid var(--gold); object-fit: cover; }
.credit-card p { margin: 0 0 .3rem; font-size: .9rem; }
.footer-bottom a { overflow-wrap: anywhere; }
.social-box { margin-block-start: 1rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, transparent); max-inline-size: 30rem; }
.copyright { font-size: .85rem; color: var(--muted); margin: 0; padding-block: 1rem 0; border-block-start: 1px solid var(--border); }
.footer-refs ol[dir="ltr"] { text-align: left; }

/* Encarts sourcés (Langue, Phonologie, Grammaire, Histoire) */
.encarts { display: grid; gap: 1rem; margin-block: 2rem; }
.encart h2 { font-size: 1.15rem; margin-block-start: 0; }
.encart p { margin-block: 0 .6rem; }
.encart .source { font-size: .85rem; margin: 0; }
.prose h3 { margin-block: 1.6rem .5rem; }

/* Page d'un mot : prononciations et photo */
.pronunciations { display: grid; gap: .6rem; margin-block: 1rem; }
.pronunciation { margin: 0; display: grid; gap: .3rem; }
.pronunciation figcaption { font-size: .9rem; color: var(--muted); }
.pronunciation audio { inline-size: min(100%, 26rem); }
.entry-photo { margin: 1rem 0; }
.entry-photo img { inline-size: min(100%, 28rem); max-block-size: 22rem; object-fit: cover; block-size: auto; border-radius: 14px; border: 1px solid var(--border); }

/* Rapports */
.reports { list-style: none; padding: 0; display: grid; gap: 1rem; }
.report h3 { margin-block: .2rem .5rem; font-size: 1.1rem; }
.report-meta { margin: 0; font-size: .88rem; }

/* Citer */
.cite { margin-block: 2rem 1rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cite summary { cursor: pointer; font-weight: 700; }
.cite h3 { font-size: .9rem; margin-block: 1rem .4rem; color: var(--muted); }
.cite-text { font-size: .92rem; overflow-wrap: anywhere; }
.cite-bib { font: .8rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: .75rem; border-radius: 8px; margin: 0; }
.bibliography { display: grid; gap: .6rem; padding-inline-start: 1.4rem; font-size: .95rem; }
.bibliography li { overflow-wrap: anywhere; }
.bibliography li[dir="auto"] { unicode-bidi: plaintext; }
[dir="rtl"] .bibliography { list-style-position: inside; padding-inline-start: 0; }
.rights { color: var(--muted); }

/* Assistant : mise en avant et réponse */
.main-nav a.nav-ask { border: 1px solid var(--gold); color: var(--gold); }
.main-nav a.nav-ask[aria-current] { background: var(--gold); color: var(--on-accent); }
.ask-promo { margin-block: 1.5rem; border-color: var(--gold); }
.ask-promo h2 { margin-block-start: 0; color: var(--gold); }
.ask-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.ask-inline textarea { flex: 1 1 18rem; min-block-size: 3rem; padding: .7rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.ask-inline button { min-block-size: 3rem; padding: .6rem 1.4rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-accent); font: 700 1rem var(--font); cursor: pointer; }
.ask-promo .chips, .answer-box + section .chips { margin-block-start: .9rem; }
.chips a { text-decoration: none; }
.answer-box h3 { font-size: 1rem; margin-block: 1.2rem .4rem; color: var(--muted); }
.answer-box ul { padding-inline-start: 1.2rem; }
.sources { font-size: .92rem; overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; }
.answer-photos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .6rem; }
.answer-photos a { display: grid; gap: .25rem; font-size: .85rem; text-decoration: none; }
.answer-photos img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.ask input[type=file] { font: inherit; max-inline-size: 100%; }
.file-help { margin: 0; font-size: .85rem; }
.pdf-viewer { display: block; inline-size: 100%; block-size: min(85vh, 60rem); border: 1px solid var(--border); border-radius: 12px; margin-block: 1rem; background: #fff; }
@media (max-width: 700px) { .pdf-viewer { display: none; } }
.reuse-notice { border-inline-start: 3px solid var(--gold); padding-inline-start: .7rem; }
.main-nav a.nav-support { border: 1px solid var(--red); color: var(--red); }
.main-nav a.nav-support[aria-current] { background: var(--red); color: #fff; }
.founder-word { display: grid; gap: 1rem; }
.founder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-block-end: 1.5rem; }
.founder-head img { inline-size: 160px; block-size: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold); }
.founder-head h1 { margin: 0; }
.founder-head .lead { margin: .3rem 0 0; }
.founder-word blockquote { margin: 0; padding-inline-start: 1.2rem; border-inline-start: 3px solid var(--gold); font-size: 1.05rem; }
.visions li { margin-block-end: .6rem; }
.support-way { padding: 1rem 1.25rem; margin-block: 1rem; }
.support-way dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.support-way dt { font-weight: 600; }
.paywall { padding: 1.1rem 1.25rem; margin-block: 1.25rem; border-inline-start: 4px solid var(--accent, #8a5a2b); }
.paywall h2 { margin-top: 0; }
.price-tag { font-size: 1.15rem; }
.locked-chapter { color: var(--muted, #666); }
.support-way dd { margin: 0; }
.mono { font-family: ui-monospace, monospace; letter-spacing: .02em; }

/* Médias des actualités : photos, vidéos et communiqués PDF */
.news-media { display: grid; gap: 1.2rem; margin-block: 1.5rem; }
.news-media figure { margin: 0; }
.news-media img, .news-media video { display: block; inline-size: 100%; block-size: auto; max-block-size: 80vh; object-fit: contain; border-radius: 8px; background: #000; }
.news-media figcaption { font-size: .9rem; color: var(--muted, #666); margin-block-start: .35rem; }
.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; border-radius: 8px; }
.news-pdf iframe { inline-size: 100%; block-size: 75vh; border: 1px solid var(--line, #ddd); border-radius: 8px; }
@media (max-width: 640px) { .news-pdf iframe { display: none; } }
.chips-inline { margin: .2rem 0; }

/* ============================================================
   Icônes, barre d'accessibilité et animations (ajout esthétique)
   ============================================================ */

/* Icônes en ligne : à la taille et à la couleur du texte. */
.icon { inline-size: 1em; block-size: 1em; vertical-align: -0.14em; flex: 0 0 auto; }
.search button, .button, .main-nav a.nav-ask, .main-nav a.nav-support { gap: .5em; }
.main-nav a.nav-ask, .main-nav a.nav-support { display: inline-flex; align-items: center; }

/* Sans JavaScript, les réglages d'affichage seraient inopérants : on les masque. */
.no-js .prefs { display: none; }

/* Barre de réglages d'affichage (thème, contraste, taille du texte). */
.prefs { position: relative; }
.prefs > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .9rem; -webkit-user-select: none; user-select: none; }
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary:hover { border-color: var(--gold); color: var(--gold); }
.prefs[open] > summary { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.prefs-toggle-label { font-size: .9rem; }
@media (max-width: 560px) { .prefs-toggle-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 560px) { .prefs-panel { inset-inline-start: 0; inset-inline-end: auto; } }

.prefs-panel { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: 20; min-inline-size: 15rem; max-inline-size: calc(100vw - 2rem); display: grid; gap: .9rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.prefs-row { display: grid; gap: .4rem; }
.prefs-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.segmented { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-block-size: 2.4rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .85rem var(--font); cursor: pointer; }
.seg .big-a { font-size: 1.15em; }
.seg:hover { border-color: var(--gold); }
.seg[aria-pressed="true"], .seg[data-active] { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.prefs-contrast { inline-size: 100%; }

/* Cœur du bouton « Soutenir » qui bat doucement. */
@media (prefers-reduced-motion: no-preference) {
  .nav-support { position: relative; }
  .main-nav a.nav-support .icon { transform-origin: center; animation: heart-beat 2.6s ease-in-out infinite; }
  @keyframes heart-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.22); } 86% { transform: scale(1.05); } 94% { transform: scale(1.16); } }
}

/* Page « hors ligne » servie par le service worker quand une page jamais consultée est demandée sans réseau. */
.offline-page { display: flex; min-block-size: 100vh; }
.offline { margin: auto; max-inline-size: 40rem; padding: 2.5rem 1rem; text-align: center; }
.offline img { margin-inline: auto; margin-block-end: 1rem; }
.offline h1 { margin-block: 0 .5rem; }
.offline p { color: var(--muted); margin-block: .5rem; }
.offline p[lang] { font-size: .95rem; }
.offline .button { margin-block-start: 1rem; }

/* Clavier des caractères spéciaux du tadaksahak, sous le champ de recherche. Masqué sans
   JavaScript (la recherche tolère déjà l'absence des signes : « shiden » trouve « ʃ-iḍǝn »). */
.no-js .kbd { display: none; }
.kbd { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-block-start: -.25rem; }
.kbd-label { color: var(--muted); font-size: .9rem; }
.kbd-keys { display: flex; flex-wrap: wrap; gap: .35rem; }
.kbd-key { min-block-size: 2.1rem; min-inline-size: 2.1rem; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); color: var(--text); font: 600 1.05rem var(--font); cursor: pointer; line-height: 1; }
.kbd-key:hover { border-color: var(--gold); color: var(--gold-strong); }
.kbd-key:active { transform: translateY(1px); }
.kbd-hint { flex: 1 1 100%; color: var(--muted); font-size: .85rem; }
:root[data-contrast="more"] .kbd-key { border-width: 2px; }

/* Version imprimable du dictionnaire : agréable à l'écran, optimisée pour l'impression / le PDF. */
.letters-print { margin-inline-start: auto; }
.print-doc { max-inline-size: 60rem; }
.print-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: .5rem 1.25rem; }
.print-dialog-hint { flex: 1 1 100%; font-size: .9rem; margin: 0; }
.print-head { margin-block-end: 1.5rem; }
.print-group { break-inside: avoid-column; }
.print-letter { color: var(--gold-strong); border-block-end: 1px solid var(--border); margin-block: 1rem .4rem; }
.print-entries { list-style: none; margin: 0; padding: 0; }
.print-entries li { margin-block: .3rem; line-height: 1.4; }
.print-entries .mot { font-weight: 700; }
.print-entries .tag { font-size: .8rem; color: var(--muted); }
.print-defs { color: var(--muted); }
@media (min-width: 48rem) {
  .print-entries { columns: 2; column-gap: 2.5rem; }
}
a.mot { color: inherit; text-decoration: none; }
a.mot:hover, a.mot:focus-visible { color: var(--gold-strong); text-decoration: underline; }
.print-filter { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.print-filter input { flex: 1 1 14rem; max-inline-size: 26rem; min-block-size: 2.75rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
:root[data-contrast="more"] .print-filter input { border-width: 2px; }
.print-filter-hint { flex: 1 1 100%; font-size: .85rem; margin: 0; }
.no-js .print-filter { display: none; }

/* Dictionnaire hors ligne complet (enregistrement à la demande). */
.offline-dico { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem 1.25rem; margin-block: 2rem 1rem; }
.offline-dico h2 { font-size: 1.1rem; margin-block-start: 0; display: flex; align-items: center; gap: .4rem; }
.offline-dico h2 .icon { color: var(--gold); }
.offline-dico-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.offline-dico progress { inline-size: 100%; margin-block-start: .75rem; accent-color: var(--gold); }
.offline-dico-status { font-size: .9rem; margin-block: .6rem 0; }
.offline-dico-status:empty, .offline-dico [hidden] { display: none; }

@media print {
  .site-header, .site-footer, .skip, .crumbs, .no-print { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .wrap { max-inline-size: none; margin: 0; padding: 0; }
  main { padding: 0 !important; }
  .print-letter { color: #000; break-after: avoid; }
  .print-entries { columns: 2; column-gap: 1.5rem; font-size: 10.5pt; }
  .print-entries .tag, .print-defs { color: #333; }
  .print-entries li { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  @page { margin: 1.4cm; }
}

/* Tudú : rappel du fil de conversation (mémoire d'un échange, sans cookie). */
.memory-note { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .95rem; }
.memory-note .icon { color: var(--gold); }

/* Sommaire du guide d'utilisation. */
.guide-toc { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem 1.25rem; margin-block: 1.25rem; }
.guide-toc ul { columns: 2; column-gap: 2rem; margin: 0; padding-inline-start: 1.1rem; }
.guide-toc li { margin-block: .2rem; }
.guide h2 { margin-block-start: 1.8rem; scroll-margin-top: 1rem; }
@media (max-width: 560px) { .guide-toc ul { columns: 1; } }

/* ===== Accueil « visuel d'abord » : pictogrammes, vidéos et photos avant le texte
   (personnes qui lisent peu, personnes sourdes ou malentendantes). ===== */

.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-block: 1rem 2rem; }
@media (min-width: 48rem) { .quick { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; } }
.quick-tile { --c: var(--gold); display: grid; justify-items: center; align-content: center; gap: .45rem; min-block-size: 7.5rem; padding: .9rem .5rem; border-radius: 22px; background: var(--surface); border: 2px solid color-mix(in srgb, var(--c) 45%, var(--border)); color: var(--text); text-decoration: none; font-weight: 700; text-align: center; line-height: 1.2; transition: transform .15s, border-color .15s; }
.quick-tile:hover { transform: translateY(-2px); border-color: var(--c); color: var(--text); }
.quick-icon { display: grid; place-items: center; inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%; background: var(--c); color: #fff; font-size: 1.8rem; }
.q-jt { --c: #c0392b; } .q-gallery { --c: #b8461b; } .q-news { --c: #2e7d5b; } .q-dict { --c: #9a7116; } .q-listen { --c: #6a4fb3; } .q-ask { --c: #1f6fa8; } .q-audio { --c: #a0522d; }

.shelf { margin-block: 1.5rem 2.5rem; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shelf-head h2 { display: flex; align-items: center; gap: .5rem; margin-block: 0 .9rem; font-size: clamp(1.25rem, 3.5vw, 1.6rem); }
.shelf-head h2 .icon { color: var(--gold); }
.shelf-head a { font-weight: 700; white-space: nowrap; }

/* Catalogue de vidéos : grandes vignettes 16:9 avec bouton lecture, langue et direct. */
.vgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.vgrid.scroller { grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: .6rem; }
@media (min-width: 64rem) { .vgrid.scroller { grid-auto-columns: calc((100% - 3 * 1.1rem) / 4); } }
.vgrid.scroller > li { scroll-snap-align: start; }
.vcard-link, .pcard a { display: grid; gap: .45rem; color: var(--text); text-decoration: none; }
.vthumb, .pthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #1c1511; }
.pthumb { aspect-ratio: 16 / 10; }
.vthumb img, .pthumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .25s; }
.vcard-link:hover img, .pcard a:hover img { transform: scale(1.04); }
.vthumb-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: rgba(255,255,255,.35); background: linear-gradient(135deg, #4a3326, #16110d); }
.vthumb-ph.lang-fr { background: linear-gradient(135deg, #3d4f86, #16110d); }
.vthumb-ph.lang-ar { background: linear-gradient(135deg, #2f6b46, #16110d); }
.vthumb-ph.lang-dsq { background: linear-gradient(135deg, #b8461b, #2a0f05); }
.vthumb-ph.lang-en { background: linear-gradient(135deg, #6b4e7a, #16110d); }
.vplay { position: absolute; inset: 0; margin: auto; inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 1.7rem; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.vplay .icon { margin-inline-start: .2rem; }
.vlang { position: absolute; inset-block-end: .55rem; inset-inline-start: .55rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; background: #3d4f86; }
.jt-tags .vlang, .tv-schedule .vlang { position: static; display: inline-block; }
.vlang.lang-ar { background: #2f6b46; } .vlang.lang-dsq { background: #a8461f; } .vlang.lang-en { background: #6b4e7a; }
.vcc { position: absolute; inset-block-end: .55rem; inset-inline-end: .55rem; padding: .05rem .4rem; border-radius: 4px; font-size: .75rem; font-weight: 800; color: #000; background: #fff; }
.vthumb .badge-live { position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem; }
.badge-live { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 999px; background: #d4261c; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.vtitle, .ptitle { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vmeta { color: var(--muted); font-size: .85rem; }

/* Galerie en mosaïque sur l'accueil. */
.mosaic { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mosaic li:first-child { grid-column: span 2; grid-row: span 2; } }
.mosaic a { position: relative; display: block; block-size: 100%; border-radius: 16px; overflow: hidden; }
.mosaic img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaic-cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.4rem .7rem .5rem; color: #fff; font-size: .85rem; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.75)); }

/* Actualités en images. */
.pcards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.pcard a { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: .6rem .6rem .9rem; }
.pcard .ptitle, .pcard .vmeta { padding-inline: .3rem; }
.compact-hero { padding-block: .5rem 1rem; }

/* Direct Facebook (chargé à la demande) et lecteur du JT. */
.live-block { margin-block: 1rem 2rem; }
.live-block h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: 0 .8rem; }
.fb-live { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #4a2414, #16110d 70%); color: #fff; }
.fb-live > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .45; }
.fb-live-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 1rem; text-align: center; }
.fb-live-play { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.6rem; border: 0; border-radius: 999px; background: #d4261c; color: #fff; font: 800 1.15rem var(--font); cursor: pointer; }
.fb-live-play .icon { font-size: 1.4rem; }
.fb-live .button { background: rgba(255,255,255,.14); color: #fff; }
.fb-live-note { margin: 0; max-inline-size: 30rem; font-size: .8rem; color: rgba(255,255,255,.8); }
.fb-live iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.player { border-radius: 18px; overflow: hidden; background: #000; }
.player video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.jt-item h1 { margin-block: .3rem 1rem; }
.jt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.page-head h1 { display: flex; align-items: center; gap: .5rem; }
.lang-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-block: 1rem 1.5rem; }
.lang-tabs a { padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; }
.lang-tabs a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }

/* Connexion avec Google. */
.login-card { max-inline-size: 34rem; margin: 2rem auto 3rem; padding: 2rem 1.5rem; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; }
/* Bandeau de bienvenue : coucher de soleil sur les dunes (ancien fond de l'accueil), logo en clair. */
.login-banner {
  --logo-mark: #f6ead3; --logo-title: #e4d189; --logo-sub: #ebcb97;
  margin: -2rem -1.5rem 1.2rem; padding: clamp(1.4rem, 5vw, 2.2rem) 1.5rem; border-radius: 23px 23px 0 0;
  background-color: #2a1d14;
  background-image: linear-gradient(180deg, rgb(22 17 13 / .15), rgb(22 17 13 / .5)), url("../images/couchant-900.jpg");
  background-image: linear-gradient(180deg, rgb(22 17 13 / .15), rgb(22 17 13 / .5)), image-set(url("../images/couchant-900.webp") type("image/webp"), url("../images/couchant-900.jpg") type("image/jpeg"));
  background-size: cover; background-position: center 40%;
}
.login-banner .logo-login { margin-block-end: 0; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .5)); }
.login-card h1 { margin-block: .8rem .4rem; }
.login-card .lead { margin-inline: auto; }
.google-button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; inline-size: min(100%, 22rem); min-block-size: 3.6rem; margin-block: 1rem; padding: .7rem 1.4rem; border-radius: 999px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font: 700 1.1rem var(--font); text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.google-button:hover { color: #1f1f1f; background: #f2f2f2; }
.google-button .icon { font-size: 1.6rem; }
.login-steps { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 1rem auto; max-inline-size: 22rem; text-align: start; }
.login-steps li { display: flex; align-items: center; gap: .7rem; }
.step-n { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--gold); color: var(--on-accent); font-weight: 800; flex: none; }
.login-privacy { font-size: .85rem; }
.login-skip { margin-block: .2rem 1.2rem; }
.account { display: flex; align-items: center; gap: .3rem; margin: 0; }
.avatar { display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--gold); color: var(--on-accent); font-weight: 800; }
.account-out { display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 1.05rem; }
.account-in { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: #fff; color: #1f1f1f; text-decoration: none; font-weight: 700; font-size: .9rem; border: 1px solid #dadce0; }
.account-in:hover { color: #1f1f1f; }

/* Tudú : interface de discussion (bulles, avatar, zone de saisie fixée en bas).
   Fonctionne sans JavaScript (envoi classique du formulaire) ; le script ajoute la saisie
   « Entrée pour envoyer », l'indicateur « Tudú écrit… » et le fil des échanges précédents. */
.chat { --bot: var(--surface); --me: var(--gold); --me-text: var(--on-accent); max-inline-size: 52rem; margin-inline: auto; display: flex; flex-direction: column; min-block-size: calc(100dvh - 9rem); }
.chat [hidden] { display: none !important; }
.chat-head { display: flex; align-items: center; gap: .8rem; padding-block: 1rem .6rem; border-block-end: 1px solid var(--border); }
.chat-avatar, .msg-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-strong), var(--gold)); color: var(--on-accent); }
.chat-avatar { inline-size: 3rem; block-size: 3rem; font-size: 1.5rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.chat-id { min-inline-size: 0; flex: 1; }
.chat-id h1 { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.5rem); }
.chat-status { margin: 0; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.chat-dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #3cbf72; box-shadow: 0 0 0 3px color-mix(in srgb, #3cbf72 25%, transparent); }
.chat-new { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.chat-new:hover { background: var(--surface-2); color: var(--text); }
.chat-about { margin-block: .6rem 0; font-size: .92rem; }
.chat-about summary { cursor: pointer; color: var(--muted); font-weight: 600; inline-size: fit-content; }
.chat-about[open] { padding: .2rem 1rem .4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.chat-about p { margin-block: .5rem; }

.chat-log { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-block: 1.2rem; }
.chat-turn { display: flex; flex-direction: column; gap: 1rem; }
.chat-turn { scroll-margin-block-start: 8rem; }
.msg { display: flex; align-items: flex-start; gap: .55rem; max-inline-size: 100%; }
.msg-avatar { inline-size: 2rem; block-size: 2rem; font-size: 1rem; }
.bubble { min-inline-size: 0; padding: .75rem 1rem; border-radius: 18px; overflow-wrap: anywhere; line-height: 1.6; }
.bubble > :first-child { margin-block-start: 0; }
.bubble > :last-child { margin-block-end: 0; }
.bubble p { margin-block: .55rem; }
.bubble ul { padding-inline-start: 1.2rem; margin-block: .5rem; }
.bubble h3 { font-size: 1.02rem; margin-block: 1rem .35rem; color: var(--text); }
.msg-bot .bubble { background: var(--bot); border: 1px solid var(--border); border-end-start-radius: 6px; max-inline-size: min(100%, 46rem); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.msg-user { justify-content: flex-end; }
.msg-user .bubble { background: var(--me); color: var(--me-text); border-end-end-radius: 6px; max-inline-size: min(85%, 36rem); font-weight: 500; white-space: pre-wrap; }
.msg-error .bubble { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
.bubble .bubble-label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-block: 1.1rem .45rem; padding-block-start: .8rem; border-block-start: 1px solid var(--border); }
.bubble .chat-sources, .bubble .chat-suggest { padding: 0; }
.chat-sources { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.chat-sources a { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: var(--surface-2); text-decoration: none; font-size: .85rem; line-height: 1.4; }
.chat-sources a:hover { text-decoration: underline; }
.bubble-foot { font-size: .78rem; color: var(--muted); margin-block-start: .9rem !important; }
.chat-file-note { font-size: .85rem; }
.chat-suggest-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-block: .9rem .4rem; }
.chat-suggest li { padding: 0; background: none; }
.chat-suggest a { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-size: .9rem; line-height: 1.4; }
.chat-suggest a:hover { background: var(--gold); color: var(--on-accent); }
.chat-system { align-self: center; text-align: center; margin: 0; padding: .3rem .9rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .8rem; max-inline-size: 90%; }

/* Zone de saisie : collée en bas de l'écran tant que la discussion est visible. */
.chat-composer { position: sticky; inset-block-end: 0; z-index: 4; padding-block: .6rem .7rem; background: linear-gradient(to bottom, transparent, var(--bg) 1.2rem); }
.chat-row { display: flex; align-items: flex-end; gap: .4rem; padding: .35rem; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: 0 4px 18px rgb(0 0 0 / .18); }
.chat-row:focus-within { border-color: var(--gold); }
.chat-row textarea { flex: 1; min-inline-size: 0; min-block-size: 2.75rem; max-block-size: 40vh; padding: .65rem .4rem; border: 0; background: transparent; color: var(--text); font: inherit; line-height: 1.45; resize: none; field-sizing: content; }
.chat-row textarea:focus-visible { outline: none; }
.chat-attach, .chat-send { display: grid; place-items: center; flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; font-size: 1.25rem; cursor: pointer; }
.chat-attach { color: var(--muted); }
.chat-attach:hover { background: var(--surface-2); color: var(--text); }
.chat-attach:has(+ .chat-file-input:focus-visible) { outline: 3px solid var(--gold); }
.chat-file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.chat-send { border: 0; background: var(--gold); color: var(--on-accent); }
.chat-send:hover:not(:disabled) { background: var(--gold-strong); }
[dir="rtl"] .chat-send .icon { transform: scaleX(-1); }
.chat-file { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; padding: .3rem .4rem .3rem .8rem; border-radius: 999px; background: var(--surface-2); font-size: .85rem; max-inline-size: 100%; }
.chat-file [data-chat-file-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-remove { display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.chat-file-remove:hover { background: var(--border); color: var(--text); }
.chat-hint { margin: .35rem .9rem 0; font-size: .75rem; color: var(--muted); text-align: center; }
.no-js .chat-hint-keys { display: none; }
@media (pointer: coarse) { .chat-hint-keys { display: none; } }
.chat.is-sending .chat-send { opacity: .6; pointer-events: none; }

/* « Tudú écrit… » */
.msg-typing .bubble { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .9rem; }
.typing-dots { display: inline-flex; gap: .25rem; }
.typing-dots i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--gold); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .typing-dots i { animation: typing 1.2s ease-in-out infinite; }
  .typing-dots i:nth-child(2) { animation-delay: .15s; }
  .typing-dots i:nth-child(3) { animation-delay: .3s; }
  .chat-turn > .msg, .msg-typing { animation: msg-in .25s ease-out both; }
}
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.25rem); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  /* Sur téléphone, l'en-tête du site ne reste pas collé en haut : toute la hauteur va à la discussion. */
  body:has(.chat) .site-header { position: static; }
  .chat-turn { scroll-margin-block-start: 1rem; }
  .chat-new span { display: none; }
  .chat-new { padding: .5rem; }
  .msg-avatar { display: none; }
  .msg-user .bubble { max-inline-size: 90%; }
}

/* Passages des ouvrages qui nourrissent une section (dictionnaire, grammaire, phonologie, contes…). */
.from-works { margin-block: 2rem 1rem; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.from-works h2 { display: flex; align-items: center; gap: .5rem; margin-block: 0 .3rem; font-size: 1.15rem; }
.from-works h2 .icon { color: var(--gold); }
.from-works > .muted { margin-block: 0 .8rem; font-size: .9rem; }
.from-works-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.from-works-list blockquote { margin: 0; padding-inline-start: .9rem; border-inline-start: 3px solid var(--gold); font-size: .95rem; overflow-wrap: anywhere; }
.from-works-list blockquote p { margin: 0; }
.from-works-source { margin: .3rem 0 0; font-size: .85rem; }
.not-in-dico { padding: .7rem 1rem; border-radius: 10px; background: var(--surface-2); }

/* Audio historique : voix de l'histoire, prêches et récits coraniques (à venir), appel à contributions. */
.badge-soon { display: inline-block; vertical-align: middle; margin-inline-start: .4rem; padding: .1rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); border: 1px solid var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.audio-section { margin-block: 1.5rem 2rem; }
.audio-sermons { padding: 1.2rem 1.3rem; border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--border)); border-radius: var(--radius); background: var(--surface); }
.audio-sermons h2 { margin-block-start: 0; }
.audio-soon { padding: .8rem 1rem; border-radius: 12px; background: var(--surface-2); }
.audio-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.audio-item { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: grid; gap: .5rem; align-content: start; }
.audio-head { display: flex; gap: .7rem; align-items: flex-start; }
.audio-head h3 { margin: 0; font-size: 1.05rem; }
.audio-head p { margin: .1rem 0 0; font-size: .85rem; }
.audio-icon { display: grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); font-size: 1.2rem; }
.audio-item audio { inline-size: 100%; }
.audio-item p { margin: 0; }
.audio-transcript { white-space: pre-wrap; margin-block-start: .4rem; font-size: .92rem; }
.audio-source { font-size: .82rem; }
.audio-call { margin-block-start: 1rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, #25d366 60%, var(--border)); background: color-mix(in srgb, #25d366 7%, var(--surface)); }
.audio-call h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: 1.02rem; }
.audio-call p { margin: 0 0 .8rem; }
.whatsapp-cta { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.9rem; padding: .55rem 1.2rem; border-radius: 999px; background: #17834a; color: #fff; font-weight: 700; text-decoration: none; }
.whatsapp-cta:hover { background: #126b3c; color: #fff; }
.whatsapp-cta .icon { font-size: 1.25rem; }

/* Bouton flottant WhatsApp : petit, dans le coin, discret ; masqué à l'impression et sur la page de Tudú. */
.wa-float { position: fixed; inset-inline-end: 1rem; inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 6; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 1.5rem; box-shadow: 0 4px 14px rgb(0 0 0 / .25); opacity: .9; transition: transform .15s, opacity .15s; }
.wa-float:hover, .wa-float:focus-visible { opacity: 1; transform: scale(1.06); color: #fff; }
@media print { .wa-float { display: none; } }
@media (max-width: 40rem) { .wa-float { inline-size: 2.75rem; block-size: 2.75rem; font-size: 1.35rem; inset-inline-end: .75rem; inset-block-end: calc(.75rem + env(safe-area-inset-bottom, 0px)); } }
/* Avec app.js : sur téléphone, le bouton n'apparaît qu'une fois la page entamée (il cachait l'accroche et
   les premiers liens) ; partout, il s'efface devant le cadre « Suivez-nous », qui a son propre lien WhatsApp. */
.wa-float.wa-cache { opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: transform .2s, opacity .2s, visibility 0s .2s; }
@media (max-width: 40rem) { .wa-float.wa-haut { opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: transform .2s, opacity .2s, visibility 0s .2s; } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float.wa-cache, .wa-float.wa-haut { transition: none; } }
/* Téléphone : trois colonnes ; la dernière tuile (Poser une question) occupe toute la ligne. */
@media (max-width: 47.99rem) {
  .quick-tile { min-block-size: 6.6rem; padding: .7rem .3rem; border-radius: 18px; font-size: .85rem; gap: .35rem; }
  .quick-tile .quick-icon { inline-size: 2.8rem; block-size: 2.8rem; font-size: 1.4rem; }
  .quick-tile.q-ask { grid-column: 1 / -1; min-block-size: 0; grid-auto-flow: column; justify-content: center; align-items: center; gap: .7rem; }
}

/* ===== Révision du design (octobre 2026) ===== */

/* En-tête sur deux lignes nettes : marque et réglages (affichage, compte, langues) en haut,
   navigation en dessous. Sur téléphone, la navigation tient sur une seule ligne qui défile. */
.header-row { row-gap: .35rem; padding-block: .55rem .4rem; }
.header-row .prefs { margin-inline-start: auto; }
.header-row .langs { align-items: center; }
.main-nav { order: 10; flex: 1 1 100%; margin-inline-start: 0; gap: .25rem; align-items: center; padding-block-start: .35rem; border-block-start: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.main-nav a.nav-ask { margin-inline-start: auto; }
@media (max-width: 47.99rem) {
  .brand small { display: none; }
  .header-row { padding-block: .45rem .3rem; }
  .main-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; inline-size: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%); }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: none; white-space: nowrap; }
  .main-nav a.nav-ask { margin-inline-start: 0; }
  .langs a { padding-inline: .45rem; font-weight: 700; }
  .langs .lang-full { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 48rem) { .langs .lang-short { display: none; } }

/* Clavier des caractères spéciaux : de petites touches, pas des boutons dorés pleine taille
   (la règle générale des boutons du formulaire de recherche s'y appliquait). */
.search .kbd-key { min-block-size: 2.25rem; min-inline-size: 2.25rem; padding: .2rem .45rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); color: var(--text); font: 600 1.05rem var(--font); justify-content: center; }
.search .kbd-key:hover { border-color: var(--gold); color: var(--gold); background: var(--surface-2); }
.search input[type="search"], .search input[name="q"] { flex: 3 1 18rem; }
.search:has(select) { max-inline-size: 62rem; }

/* Titres de rayon : « Tout voir » aligné sur le titre. */
.shelf-head { align-items: center; margin-block-end: .9rem; }
.shelf-head h2 { margin-block: 0; }
.shelf-head a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; font-size: .9rem; }
.shelf-head a:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* Tuiles de l'accueil : icônes alignées même quand le libellé tient sur deux lignes. */
.quick-tile { grid-template-rows: auto 2.4em; align-content: center; }
.quick-tile > span:last-child { display: grid; align-items: start; }
@media (max-width: 47.99rem) { .quick-tile.q-ask { grid-template-rows: none; } .quick-tile.q-ask > span:last-child { align-items: center; } }

/* Grand lecteur du direct : pas plus haut que l'écran, centré. */
.fb-live { max-inline-size: min(100%, calc(68vh * 16 / 9)); margin-inline: auto; }

/* Chiffres clés : une ligne de trois, même sur téléphone. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 10rem)); justify-content: center; gap: 1rem; text-align: center; line-height: 1.3; }
.stats strong { font-size: clamp(1.5rem, 5vw, 2rem); }
@media (max-width: 40rem) { .stats li { font-size: .85rem; } }

/* Mot du jour : la fiche occupe toute la carte au lieu d'un tiers. */
.wotd .entries { grid-template-columns: 1fr; }
.wotd .entry-card a { border: 0; padding: 0; background: none; }
.wotd .entry-card .mot { font-size: 1.6rem; }
.wotd .entry-card .defs { gap: .25rem; font-size: 1.02rem; }

/* Fiches du dictionnaire : la langue de chaque traduction est indiquée discrètement. */
.entry-card .defs > [lang]::before { display: inline-block; min-inline-size: 1.9rem; margin-inline-end: .4rem; padding: 0 .3rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); font: 700 .68rem/1.55 var(--font); letter-spacing: .04em; text-align: center; vertical-align: .12em; }
.entry-card .defs > [lang="fr"]::before { content: "FR"; }
.entry-card .defs > [lang="en"]::before { content: "EN"; }
.entry-card .defs > [lang="ar"]::before { content: "AR"; }

/* Grilles de rubriques : pas de carte orpheline sur la dernière ligne. */
@media (min-width: 64rem) {
  .tiles.compact:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.compact:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tiles.compact .tile { display: flex; flex-direction: column; gap: .2rem; }
.tiles.compact .tile:hover { box-shadow: 0 8px 22px rgb(0 0 0 / .08); }

/* Galerie de l'accueil : la mosaïque se remplit sans trou. */
@media (min-width: 48rem) { .mosaic { grid-auto-flow: dense; } }

/* Image introuvable : on cache l'icône d'image cassée et on laisse le fond de la vignette. */
img.img-broken { visibility: hidden; }

/* Cartes : profondeur légère et cohérente au survol. */
.vcard-link:hover .vthumb, .pcard a:hover .pthumb { box-shadow: 0 10px 26px rgb(0 0 0 / .18); }

/* Rythme vertical entre les grandes sections de l'accueil. */
.shelf + .shelf { border-block-start: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-block-start: 1.75rem; }

@media (prefers-reduced-motion: reduce) { .vcard-link:hover img, .pcard a:hover img, .tile:hover, .quick-tile:hover { transform: none; } }

/* Flèches « suivant / précédent / tout voir » : retournées en arabe (lecture de droite à gauche). */
.dir-arrow { display: inline-block; white-space: pre; }
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }

/* En page française ou anglaise, l'étiquette AR se place au début visuel de la ligne arabe (à gauche),
   comme FR et EN. */
html:not([dir="rtl"]) .entry-card .defs > [lang="ar"]::before { content: none; }
html:not([dir="rtl"]) .entry-card .defs > [lang="ar"]::after { content: "AR"; display: inline-block; min-inline-size: 1.9rem; margin-inline-start: .4rem; padding: 0 .3rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); font: 700 .68rem/1.55 var(--font); letter-spacing: .04em; text-align: center; vertical-align: .12em; }

/* Grammaire : les titres longs restent alignés à droite du numéro (retrait suspendu), lignes espacées. */
.lessons { gap: .15rem; }
.lessons li { position: relative; padding: .45rem .6rem .45rem 3.1rem; border-radius: 10px; }
[dir="rtl"] .lessons li { padding: .45rem 3.1rem .45rem .6rem; }
.lessons li:hover { background: var(--surface); }
.lessons .num { position: absolute; inset-inline-start: .55rem; inset-block-start: .4rem; margin: 0; }

/* Bibliothèque : deux colonnes sur grand écran, carte entière cliquable, titres sans soulignement
   permanent, textes resserrés. */
@media (min-width: 56rem) { .documents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.documents > .card { position: relative; display: flex; flex-direction: column; gap: .45rem; transition: border-color .15s, box-shadow .15s; }
.documents > .card:hover { border-color: var(--gold); box-shadow: 0 8px 22px rgb(0 0 0 / .08); }
.documents > .card > * { margin: 0; }
.documents h2 { font-size: 1.08rem; line-height: 1.35; }
.documents h2 a { text-decoration: none; }
.documents h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.documents h2 a:hover, .documents h2 a:focus-visible { text-decoration: underline; }
.documents .subtitle { font-size: .9rem; }
.documents .muted { font-size: .88rem; }
.documents > .card > p:last-child:not(.muted):not(.subtitle) { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Contraste : texte sur fond doré au-dessus de 4,5:1 dans les deux thèmes (or foncé + texte clair
   en thème clair, or lumineux + texte sombre en thème sombre). */
.main-nav a[aria-current="page"], .search button:not(.kbd-key), .button { background: var(--gold-strong); color: var(--bg); }
.main-nav a.nav-ask[aria-current] { background: var(--gold-strong); color: var(--bg); }
.search button:not(.kbd-key):hover, .button:hover { filter: brightness(1.08); color: var(--bg); }
.fb-live { max-inline-size: min(100%, calc(60vh * 16 / 9)); }

/* =====================================================================================
   IDENTITÉ VISUELLE « SABLE ET CRÉPUSCULE » (octobre 2026)
   Logo Tadaksahak Learning, typographie Alegreya / Gentium, motif saharien de losanges,
   galerie au premier plan. Ce bloc vient en dernier : il harmonise tous les composants.
   ===================================================================================== */

/* Motif inspiré des cuirs et nattes sahariens : losanges et triangles, en masque CSS
   (sa couleur suit le thème). */
:root {
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M20 1.5l5.5 5.5-5.5 5.5-5.5-5.5z'/%3E%3Cpath d='M0 13l5-5 5 5zM30 13l5-5 5 5z'/%3E%3Ccircle cx='10' cy='3.5' r='1.3'/%3E%3Ccircle cx='30' cy='3.5' r='1.3'/%3E%3C/svg%3E");
}
.motif-band, main > h1::after, .portal::after, .site-footer::before, .eyebrow::before {
  -webkit-mask: var(--motif) repeat-x left center / auto 100%; mask: var(--motif) repeat-x left center / auto 100%;
}

/* ---------- Typographie ---------- */
html { overflow-x: clip; }
body {
  font-size: 1rem; line-height: 1.62; font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  background: radial-gradient(70rem 32rem at 100% -8rem, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--bg);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.012em; }
h2 { line-height: 1.18; }
p, li, dd, figcaption { text-wrap: pretty; }
[dir="rtl"] :is(h1, h2, h3, h4), :is(h1, h2, h3, h4):lang(ar) { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.4; }
:lang(tad), [lang="tad"], .mot, .interlinear .tad, .flashcard .word, .flashcard .answer { font-family: var(--font-tad); }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); }
a { text-decoration-thickness: from-font; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: color-mix(in srgb, var(--gold) 45%, var(--surface-2)) var(--bg); }
.lead { font-size: 1.18rem; line-height: 1.55; }
.muted, .lead { color: var(--muted); }

/* Surtitre : petit motif + capitales espacées. */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font: 700 .78rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; inline-size: 2.6rem; block-size: .7rem; background: currentColor; opacity: .85; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .9rem; }

/* Titre des pages intérieures : motif sous le titre. */
main > h1::after { content: ""; display: block; inline-size: 6.5rem; block-size: .72rem; margin-block-start: .7rem; background: var(--gold); opacity: .75; }

/* ---------- Logo ---------- */
.logo { position: relative; display: inline-block; vertical-align: middle; aspect-ratio: 1167 / 343; inline-size: calc(var(--logo-h, 3rem) * 3.402); line-height: 0; }
.logo-img { display: block; inline-size: 100%; block-size: 100%; }
.logo-l { display: none; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .logo-img { visibility: hidden; }
  .logo-l { display: block; position: absolute; inset: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
  .logo-l-mark { --m: url("../images/logo/logo-calque-marque.svg"); background: var(--logo-mark); }
  .logo-l-title { --m: url("../images/logo/logo-calque-titre.svg"); background: var(--logo-title); }
  .logo-l-sub { --m: url("../images/logo/logo-calque-sous-titre.svg"); background: var(--logo-sub); }
  .logo-markonly { display: inline-block; inline-size: 2.6rem; block-size: 2.25rem; background: var(--logo-mark); -webkit-mask: url("../images/logo/logo-marque-masque.svg") center / contain no-repeat; mask: url("../images/logo/logo-marque-masque.svg") center / contain no-repeat; }
}
.brand { gap: 0; }
.brand .logo { --logo-h: 3.15rem; transition: transform .35s var(--ease); }
.brand:hover .logo { transform: translateY(-1px) scale(1.015); }
.brand .logo-l-mark { transition: background-color .3s; }
.brand:hover .logo-l-mark { background: var(--accent); }
@media (max-width: 47.99rem) { .brand .logo { --logo-h: 2.35rem; } }
.logo-login { inline-size: min(100%, 22rem); margin-block-end: 1rem; }
.offline-logo { inline-size: min(100%, 20rem); block-size: auto; }

/* ---------- En-tête ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-block-end: 1px solid color-mix(in srgb, var(--border) 85%, transparent); }
.main-nav { gap: .1rem; border-block-start-color: color-mix(in srgb, var(--border) 60%, transparent); }
.main-nav a { position: relative; padding: .45rem .75rem .55rem; border-radius: 10px; font-weight: 600; font-size: 1rem; letter-spacing: .005em; color: var(--text); background: none; transition: color .2s, background-color .2s; }
.main-nav a:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); color: var(--text); }
.main-nav a[aria-current="page"] { background: none; color: var(--gold); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: .1rem; inline-size: .42rem; block-size: .42rem; background: currentColor; transform: translateX(-50%) rotate(45deg); }
[dir="rtl"] .main-nav a[aria-current="page"]::after { transform: translateX(50%) rotate(45deg); }
.main-nav a.nav-ask { border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); color: var(--gold); border-radius: 999px; padding-block: .4rem; }
.main-nav a.nav-ask[aria-current] { background: var(--gold); color: var(--on-accent); }
.main-nav a.nav-ask[aria-current]::after, .main-nav a.nav-support[aria-current]::after { display: none; }
.main-nav a.nav-support { border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); color: var(--accent); border-radius: 999px; padding-block: .4rem; }
.main-nav a.nav-support:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.main-nav a.nav-support[aria-current] { background: var(--accent); color: var(--on-accent); }
.langs a { font-weight: 500; }
.langs a[aria-current="true"] { color: var(--gold); font-weight: 700; }
.prefs > summary { border-color: color-mix(in srgb, var(--border) 90%, transparent); }

/* ---------- Boutons et champs ---------- */
.button, .search button:not(.kbd-key), .form button, .ask button, .quiz button, .ask-inline button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-block-size: 3rem; padding: .65rem 1.45rem; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: 700 1.02rem/1.2 var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), var(--shadow-1); transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.button:hover, .search button:not(.kbd-key):hover, .form button:hover, .ask button:hover, .quiz button:hover, .ask-inline button:hover { color: var(--on-accent); filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), var(--shadow-2); }
.button:active, .search button:not(.kbd-key):active { transform: translateY(0); }
.button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 40%, transparent); }
.button.ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.button.secondary { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.search input, .search select, .form input:not([type=radio]):not([type=checkbox]), .form select, .form textarea, .ask textarea, .ask-inline textarea, .print-filter input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.search input:focus, .search select:focus, .form input:focus, .form select:focus, .form textarea:focus, .ask textarea:focus, .ask-inline textarea:focus, .print-filter input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.search input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.letters a { border-radius: 10px; background: var(--surface); transition: border-color .2s, background-color .2s; }
.letters a:hover { border-color: var(--gold); }
.letters a[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.tag { background: color-mix(in srgb, var(--gold) 13%, var(--surface-2)); color: var(--muted); font-weight: 600; letter-spacing: .02em; }

/* ---------- Cartes ---------- */
.card, .tile, .entry-card a, .documents > .card, .toc, .notes, .cite, .offline-dico, .guide-toc, .defs-table, .from-works {
  border-radius: var(--radius); border-color: var(--border); background: var(--surface);
}
.tile, .entry-card a, .documents > .card, .vcard-link .vthumb, .pcard a, .quick-tile, .mosaic a {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s;
}
.tile:hover, .entry-card a:hover, .documents > .card:hover, .pcard a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); }
.entry-card .mot { font-weight: 700; font-size: 1.3rem; color: var(--gold); letter-spacing: 0; }
.entry h1 { font-family: var(--font-tad); color: var(--gold); }
.tiles.compact h3 { font-family: var(--font-display); font-size: 1.18rem; color: var(--gold); }
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.section-title a { color: var(--text); }
.section-title a:hover { color: var(--gold); }

/* ---------- Accueil : le portail (galerie au premier plan) ---------- */
.portal {
  --bg: #16110d; --surface: #201913; --surface-2: #2b221a; --text: #f8eedd; --muted: #dccbb0; --gold: #e4d189; --gold-strong: #f2e4ac;
  --accent: #e8a06a; --on-accent: #1a110b; --border: rgb(255 238 214 / .16); --logo-mark: #f6ead3; --logo-title: #e4d189; --logo-sub: #ebcb97;
  position: relative; isolation: isolate; margin-inline: calc(50% - 50vw); margin-block: 0 2.5rem; padding-block: clamp(2rem, 5vw, 4.25rem) clamp(3rem, 6vw, 5rem);
  color: var(--text); background-color: #1a120d;
  /* Ménaka vue d'en haut : voile brun assez dense en haut et du côté du texte pour que le logo et le
     titre restent nets sur le ciel clair et les toits. */
  background-image: linear-gradient(90deg, rgb(22 17 13 / .45) 0%, rgb(22 17 13 / .1) 50%, transparent 70%), linear-gradient(180deg, rgb(22 17 13 / .22) 0%, rgb(22 17 13 / .42) 35%, rgb(22 17 13 / .88) 68%, #16110d 100%), url("../images/menaka-1600.jpg");
  background-image: linear-gradient(90deg, rgb(22 17 13 / .45) 0%, rgb(22 17 13 / .1) 50%, transparent 70%), linear-gradient(180deg, rgb(22 17 13 / .22) 0%, rgb(22 17 13 / .42) 35%, rgb(22 17 13 / .88) 68%, #16110d 100%), image-set(url("../images/menaka-1600.webp") type("image/webp"), url("../images/menaka-1600.jpg") type("image/jpeg"));
  background-size: cover, cover, cover; background-position: center, center top, center 30%; background-repeat: no-repeat;
}
[dir="rtl"] .portal { background-image: linear-gradient(270deg, rgb(22 17 13 / .45) 0%, rgb(22 17 13 / .1) 50%, transparent 70%), linear-gradient(180deg, rgb(22 17 13 / .22) 0%, rgb(22 17 13 / .42) 35%, rgb(22 17 13 / .88) 68%, #16110d 100%), image-set(url("../images/menaka-1600.webp") type("image/webp"), url("../images/menaka-1600.jpg") type("image/jpeg")); }
@media (max-width: 47.99rem) {
  .portal, [dir="rtl"] .portal { background-image: linear-gradient(180deg, rgb(22 17 13 / .38) 0, rgb(22 17 13 / .55) 26vw, #16110d 44.5vw), url("../images/menaka-900.jpg"); background-image: linear-gradient(180deg, rgb(22 17 13 / .38) 0, rgb(22 17 13 / .55) 26vw, #16110d 44.5vw), image-set(url("../images/menaka-900.webp") type("image/webp"), url("../images/menaka-900.jpg") type("image/jpeg")); background-size: cover, 100% auto; background-position: center top, center top; }
}
.portal::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: .8rem; background: var(--gold); opacity: .5; }
.portal-inner { inline-size: min(100% - 2rem, var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.75rem); align-items: center; }
.portal-copy { display: grid; justify-items: start; align-content: center; }
.logo-hero { inline-size: min(100%, 25rem); margin-block-end: 1.6rem; filter: drop-shadow(0 6px 22px rgb(0 0 0 / .45)); }
.portal h1 { margin: 0 0 .9rem; font-size: clamp(2rem, 3.9vw, 3.15rem); line-height: 1.06; color: #fff7ea; text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.portal-lead { margin: 0 0 1.6rem; max-inline-size: 34rem; font-size: 1.15rem; line-height: 1.55; color: var(--muted); }
.portal-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

.portal-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, clamp(3.1rem, 5.6vw, 5.1rem)); gap: clamp(.5rem, 1vw, .8rem); }
.portal-gallery li { position: relative; min-block-size: 0; }
.pg-1 { grid-column: 1 / 5; grid-row: 1 / 5; }
.pg-2 { grid-column: 5 / 7; grid-row: 1 / 3; }
.pg-3 { grid-column: 5 / 7; grid-row: 3 / 7; }
.pg-4 { grid-column: 1 / 3; grid-row: 5 / 7; }
.pg-5 { grid-column: 3 / 5; grid-row: 5 / 7; }
.portal-gallery a { position: relative; display: block; block-size: 100%; border-radius: 18px; overflow: hidden; background: #2b221a; box-shadow: 0 18px 40px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 240 220 / .1); color: #fff; text-decoration: none; }
.portal-gallery img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.portal-gallery a:hover img, .portal-gallery a:focus-visible img { transform: scale(1.06); filter: saturate(1.08); }
.pg-1::before { content: ""; position: absolute; inset: -.6rem .6rem .6rem -.6rem; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 22px; z-index: -1; }
[dir="rtl"] .pg-1::before { inset: -.6rem -.6rem .6rem .6rem; }
.pg-cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 2.2rem .8rem .6rem; font-size: .85rem; font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgb(12 8 5 / .82)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-1 .pg-cap { font-size: 1rem; padding: 3rem 1.1rem .9rem; }

@media (max-width: 47.99rem) {
  .portal { padding-block: 1.25rem 2.5rem; margin-block-end: 1.75rem; }
  .portal-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .portal-copy { display: contents; }
  .logo-hero { order: 1; inline-size: min(78%, 19rem); margin: .25rem auto 1rem; justify-self: center; }
  .portal .eyebrow { order: 2; justify-self: center; }
  .portal h1 { order: 3; text-align: center; font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .portal-gallery { order: 4; display: flex; gap: .65rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: .4rem -1rem 1.2rem; padding: .2rem 1rem .6rem; grid-template-rows: none; }
  .portal-gallery::-webkit-scrollbar { display: none; }
  .portal-gallery li { flex: 0 0 76%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .portal-gallery li.pg-1 { flex-basis: 84%; }
  .pg-1::before { display: none; }
  .portal-lead { order: 5; text-align: center; font-size: 1.02rem; margin-inline: auto; }
  .portal-actions { order: 6; justify-content: center; }
  .portal-actions .button { flex: 1 1 12rem; }
}

/* Direct du JT, sous le portail. */
.live-block { margin-block: 0 2rem; padding: clamp(.9rem, 2vw, 1.4rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.live-block h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .9rem; font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
.live-block h2 a { color: var(--text); text-decoration: none; }
.live-block h2 a:hover { color: var(--gold); }
.badge-live { background: #c8321f; font-family: var(--font); letter-spacing: .08em; box-shadow: 0 0 0 0 rgb(200 50 31 / .55); }
@media (prefers-reduced-motion: no-preference) { .badge-live { animation: live-pulse 2.4s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgb(200 50 31 / .55); } 70%, 100% { box-shadow: 0 0 0 .7rem rgb(200 50 31 / 0); } } }
.fb-live { border-radius: var(--radius); }

/* Pictogrammes d'accès rapide : couleurs de terre et de couchant. */
.quick { gap: clamp(.55rem, 1.2vw, .9rem); margin-block: 0 2.75rem; }
.quick-tile { border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface)); box-shadow: var(--shadow-1); font-family: var(--font); font-weight: 700; font-size: .98rem; }
.quick-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 65%, var(--border)); box-shadow: var(--shadow-2); }
.quick-icon { box-shadow: inset 0 0 0 3px rgb(255 255 255 / .16), 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }
.q-jt { --c: #b5532a; } .q-gallery { --c: #a8742b; } .q-audio { --c: #8e3b2a; } .q-news { --c: #5f6b2e; } .q-dict { --c: #8a7424; } .q-listen { --c: #6b4e7a; } .q-ask { --c: #2f5e78; }

/* Rayons de l'accueil : titres en Alegreya, motif en surtitre, lien « Tout voir ». */
.shelf { margin-block: 2.75rem; }
.shelf + .shelf { border-block-start: 0; padding-block-start: 0; }
.shelf-head h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); gap: .6rem; }
.shelf-head h2 .icon { inline-size: 1.15em; block-size: 1.15em; padding: .22em; border-radius: 50%; background: color-mix(in srgb, var(--gold) 15%, transparent); }
.shelf-head a { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); color: var(--gold); font-weight: 700; }
.vthumb, .pthumb { border-radius: var(--radius); box-shadow: var(--shadow-1); }
.vcard-link:hover .vthumb { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.vtitle, .ptitle { font-family: var(--font-display); font-size: 1.08rem; }
.mosaic a { border-radius: 18px; box-shadow: var(--shadow-1); }
.mosaic a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pcard a { border-radius: 20px; }

/* Bande « dictionnaire » : recherche, chiffres clés. */
.hero.compact-hero { margin-block: 3rem 1.5rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface) 60%); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.stats strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }

/* Mot du jour : le mot en grand, en Gentium. */
.wotd { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 55%); }
.wotd::after { content: "❝"; position: absolute; inset-inline-end: 1.2rem; inset-block-start: -.6rem; font: 700 7rem/1 var(--font-display); color: color-mix(in srgb, var(--gold) 16%, transparent); pointer-events: none; }
.wotd .entry-card .mot { font-size: clamp(1.9rem, 5vw, 2.6rem); }

/* Tudú : carte au crépuscule. */
.ask-promo { border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); background: radial-gradient(40rem 18rem at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface); box-shadow: var(--shadow-1); }
.ask-promo h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--text); }
.chips li { background: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
.chips li a { color: var(--gold-strong); }
.chips li a:hover { color: var(--text); }

/* ---------- Pied de page : toujours « nuit du désert », motif en lisière ---------- */
.site-footer {
  --bg: #120d0a; --surface: #1c1511; --surface-2: #271e17; --text: #efe3cf; --muted: #c5b49b; --gold: #d8c57e; --gold-strong: #ecdca0; --accent: #e8a06a; --on-accent: #1a110b; --border: #33281f;
  --logo-mark: #f0e3cb; --logo-title: #d8c57e; --logo-sub: #d9bb8c;
  position: relative; margin-block-start: 4.5rem; padding-block: 3rem 1.75rem; background: var(--bg); color: var(--text); border-block-start: 0;
}
.site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: .8rem; background: var(--gold); opacity: .55; }
.footer-logo { display: inline-block; margin-block-end: 2rem; }
.footer-logo .logo { --logo-h: 3.6rem; }
.footer-map h2 { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); }
.footer-map a { color: var(--muted); }
.footer-map a:hover { color: var(--text); }
.footer-bottom { border-block-start-color: var(--border); }
.footer-bottom h2 { font-family: var(--font-display); font-size: 1.05rem; }
.copyright { border-block-start-color: var(--border); }
.credit-card img { border-color: var(--gold); }

/* ---------- Mouvement (respecte « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
  .site-header { view-transition-name: entete; }
  .portal-gallery li { animation: pg-in .9s var(--ease) both; }
  .portal-gallery .pg-2 { animation-delay: .08s; } .portal-gallery .pg-3 { animation-delay: .16s; } .portal-gallery .pg-4 { animation-delay: .24s; } .portal-gallery .pg-5 { animation-delay: .32s; }
  .portal-copy > * { animation: rise .8s var(--ease) both; }
  .portal-copy > :nth-child(2) { animation-delay: .1s; } .portal-copy > :nth-child(3) { animation-delay: .18s; } .portal-copy > :nth-child(4) { animation-delay: .26s; } .portal-copy > :nth-child(5) { animation-delay: .34s; }
  .pg-1 img { animation: drift 24s ease-in-out infinite alternate; }
  .pg-1 a:hover img { animation-play-state: paused; }
  @supports (animation-timeline: view()) {
    .shelf, .tiles.compact > li, .pcards > li, .documents > li, .quick-tile { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes pg-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
}
@media (prefers-reduced-motion: reduce) { .tile:hover, .entry-card a:hover, .documents > .card:hover, .pcard a:hover, .button:hover, .quick-tile:hover, .mosaic a:hover, .vcard-link:hover .vthumb { transform: none; } }

/* Impression : pas de fonds sombres ni de motifs. */
@media print { .portal, .site-footer { background: none !important; color: #000 !important; } .portal::after, .site-footer::before, main > h1::after { display: none; } }

/* ---------- Galerie : mise en page éditoriale (une grande photo toutes les six) ---------- */
.gallery { gap: clamp(.8rem, 1.6vw, 1.25rem); }
.gallery figure.card { padding: 0; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.gallery figure.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.gallery figure > a { display: block; overflow: hidden; background: #1c1511; }
.gallery figure img { transition: transform .8s var(--ease); }
.gallery picture { display: contents; }
.gallery figure > a:hover img, .gallery figure > a:focus-visible img { transform: scale(1.05); }
.gallery figcaption strong { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .gallery > li:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
  .gallery > li:nth-child(6n + 1) figure > a { flex: 1 1 auto; display: flex; }
  .gallery > li:nth-child(6n + 1) img { flex: 1 1 auto; aspect-ratio: auto; min-block-size: 20rem; block-size: 100%; }
  .gallery > li:nth-child(6n + 1) figcaption strong { font-size: 1.35rem; }
}

/* ---------- Pictogrammes (Phosphor duotone) sur les tuiles et les rubriques ---------- */
.picto { inline-size: 1em; block-size: 1em; flex: none; }
.picto .picto-tone { opacity: .3; }
.quick-icon .picto { font-size: 1.95rem; }
@media (max-width: 47.99rem) { .quick-tile .quick-icon .picto { font-size: 1.5rem; } }
.tile-picto { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.tile-picto > :is(h2, h3) { margin-block-start: 0; }
.tile-icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: .55rem; border-radius: 14px; background: color-mix(in srgb, var(--gold) 15%, var(--surface-2)); color: var(--gold); font-size: 1.75rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent); transition: transform .35s var(--ease), background-color .3s, color .3s; }
.tile-picto:hover .tile-icon, .tile-picto:focus-visible .tile-icon { transform: rotate(-6deg) scale(1.06); background: var(--gold); color: var(--on-accent); }
.tile-picto:hover .tile-icon .picto-tone { opacity: .35; }
.section-title a { display: inline-flex; align-items: center; gap: .65rem; }
.section-picto { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 1.45rem; }
@media (prefers-reduced-motion: reduce) { .tile-picto:hover .tile-icon { transform: none; } }

/* ---------- Pied de page : liens avec les vrais logos des réseaux ---------- */
.social-box h3 { font-size: .85rem; margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font); }
.social-box { max-inline-size: none; padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border-color: var(--border); }
.social-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .55rem; }
.social-link { --sl: var(--gold); display: flex; align-items: center; gap: .75rem; min-inline-size: 0; block-size: 100%; padding: .55rem .8rem .55rem .6rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; transition: transform .2s var(--ease), border-color .2s, background-color .2s; }
.social-link:hover, .social-link:focus-visible { transform: translateY(-2px); color: var(--text); border-color: var(--sl); background: color-mix(in srgb, var(--sl) 12%, var(--surface-2)); }
.sl-badge { display: grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; font-size: 2.4rem; line-height: 0; }
.sl-badge .brand-logo { display: block; }
.sl-web .sl-badge, .sl-mail .sl-badge { font-size: 1.4rem; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.sl-tad .sl-badge { background: radial-gradient(120% 90% at 50% 38%, #d27a3e 0%, #9c4a24 45%, #2a1610 100%); }
.sl-tad .logo-markonly { inline-size: 1.6rem; block-size: 1.4rem; background: #f6ead3; }
.sl-text { display: grid; min-inline-size: 0; line-height: 1.25; }
.sl-text small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .sl-text small { letter-spacing: 0; font-size: .8rem; }
.sl-text bdi { font-weight: 600; font-size: .93rem; overflow-wrap: anywhere; }
.sl-fb { --sl: #0866FF; } .sl-in { --sl: #0A66C2; } .sl-wa { --sl: #25D366; } .sl-tad { --sl: var(--accent); }
.wa-float .brand-logo { inline-size: 1.65rem; block-size: 1.65rem; }
.social-links > li:has(> .sl-web, > .sl-mail, > .sl-tad) { grid-column: 1 / -1; }
.sl-mail bdi, .sl-tad bdi { overflow-wrap: normal; word-break: normal; }
@media (min-width: 64rem) { ul.tiles:not(.compact):has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Documents historiques : liste, fac-similés et transcription diplomatique. */
.documents > .card.historical { display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem; align-items: start; }
.documents > .card.historical img { inline-size: 100%; block-size: auto; border-radius: 8px; border: 1px solid var(--border); }
.documents > .card.historical h2 { font-size: 1.25rem; margin-block-start: 0; }
@media (max-width: 40rem) { .documents > .card.historical { grid-template-columns: 1fr; } .documents > .card.historical img { max-inline-size: 12rem; } }
.historical-document .scan { margin: 1rem 0; }
.historical-document .scan img { display: block; inline-size: 100%; max-inline-size: 42rem; block-size: auto; border: 1px solid var(--border); border-radius: 8px; background: #1c1511; }
.historical-document .scan figcaption { margin-block-start: .5rem; color: var(--muted); font-size: .95rem; }
.historical-document .badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--border); font-size: .75rem; font-weight: 700; letter-spacing: .03em; color: var(--text, inherit); }
.historical-document .badge.warn { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.historical-document .diplomatic { overflow-x: auto; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; line-height: 1.45; white-space: pre; }
.historical-document td, .historical-document th { padding: .4rem .6rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--border); font-size: .9rem; }
.historical-document section[id] { scroll-margin-block-start: 8rem; }

/* ---- Tadaksahak TV : direct de la plateforme et grille des programmes ---- */
.tv-live { border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #4a2414, #16110d 70%); color: #fff; }
.tv-live video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; background: #000; }
.tv-live:not(.is-loaded) video { visibility: hidden; }
.tv-live.is-loaded .tv-live-cover { pointer-events: none; }
.tv-live.is-loaded .tv-live-cover .fb-live-play { display: none; }
.tv-live.is-loaded .tv-live-cover .fb-live-note:empty { display: none; }
.tv-schedule { margin-block: 2rem; }
.tv-schedule ul { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.tv-schedule li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tv-day { min-inline-size: 11rem; color: var(--muted); }
.tv-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-show { font-weight: 600; flex: 1; }
@media (max-width: 40rem) { .tv-day { min-inline-size: 0; flex-basis: 100%; } }

/* ---------- Soutien de Tadaksahak TV : appel, page de soutien, achat d’un hebdo ---------- */
.tv-support-cta { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1.2rem; align-items: center; margin-block: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface)); }
.tv-support-cta h2 { margin: 0 0 .25rem; font-size: clamp(1.25rem, 3vw, 1.55rem); }
.tv-support-cta p { margin: .2rem 0; }
.tv-support-cta .button { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 48rem) { .tv-support-cta { grid-template-columns: auto 1fr auto; } .tv-support-cta .button { grid-column: auto; justify-self: end; } }
.tv-support-icon { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; border-radius: 50%; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-strong); font-size: 1.9rem; }
.tv-support-services { color: var(--muted); font-size: .95rem; }
.tv-support-services .badge, .tv-support-promise .badge { display: inline-block; padding: .05rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--text); font-weight: 700; font-size: .85rem; }
.tv-support-promise { color: var(--muted); }
.tv-pay { margin-block: 1.5rem; }
.tv-steps { padding-inline-start: 1.3rem; display: grid; gap: .35rem; }
.tv-pay-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tv-pay-card { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: grid; gap: .35rem; }
.tv-pay-card p { margin: 0; }
.tv-pay-service { font-weight: 800; font-size: 1.1rem; }
.tv-pay-number { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.copy-button { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.4rem; padding: .3rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 .9rem var(--font); cursor: pointer; }
.copy-button:hover { border-color: var(--gold); }
.tv-pay-holder { color: var(--muted); }
.tv-options { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-block: 1.5rem; }
.tv-option { padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tv-option h2 { display: flex; align-items: center; gap: .5rem; margin-block: 0 .4rem; font-size: 1.3rem; }
.tv-option .form { max-inline-size: none; }
.tv-amounts { border: 0; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.tv-amounts legend { font-weight: 600; margin-block-end: .35rem; }
.tv-amounts .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.tv-amounts .chip:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, var(--surface-2)); }
.tv-amount-other { display: inline-flex; align-items: center; gap: .4rem; }
.tv-amount-other input { inline-size: 8rem; }
.tv-hebdo-buy { margin-block: 1.2rem; padding: 1rem 1.2rem; border-inline-start: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); }
[dir="rtl"] .tv-hebdo-buy { border-radius: var(--radius) 0 0 var(--radius); }
.tv-hebdo-buy h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.2rem; }
.tv-privacy { max-inline-size: 60ch; }
/* Montants : pastilles en ligne (le fieldset des formulaires est une grille par défaut). */
.tv-option .tv-amounts { display: flex; flex-wrap: wrap; gap: .45rem; border: 0; padding: 0; margin: 0 0 .3rem; }
.tv-option .tv-amounts .chip { margin: 0; flex: 0 0 auto; }
.tv-option .tv-amount-other { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0 0; font-weight: 600; }
.tv-option .tv-amount-other input[type=number] { inline-size: 9rem; }

/* Lieux : liste des localités et carte Leaflet (chargée au clic). */
.places { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.places h3 { margin-block: 0 .4rem; }
.places p { margin-block: .3rem; }
.places .places-meta { font-size: .95rem; }
.places-map { margin-block-end: 2rem; }
.places-map [hidden] { display: none; }
.places-map-cover { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.places-map-cover p { margin: 0; }
.places-map-canvas { block-size: min(70vh, 32rem); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-block-start: 1rem; }
.places-map-canvas .leaflet-popup-content { color: #1a110b; }
.places-map-canvas .leaflet-popup-content strong { display: block; margin-block-end: .2rem; }

/* Version imprimable d'un ouvrage (bibliothèque) : couverture, page de droits, sommaire, un
   chapitre par page. Sert aussi à produire le PDF (scripts/livre-pdf.mjs). */
.book { max-inline-size: 44rem; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.6; }
.book[lang="ar"] { font-family: var(--font-ar); }
.book p { text-align: justify; hyphens: auto; }
.book-cover { text-align: center; padding-block: 4rem 3rem; }
.book .book-cover p { text-align: center; }
.book-cover h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-block: 1.5rem; }
.book-cover h1::after { display: none; }
.book-author { font-size: 1.25rem; letter-spacing: .04em; }
.book .book-subtitle { text-align: center; font-style: italic; color: var(--muted); }
.book-year { margin-block-start: 2.5rem; color: var(--muted); }
.book-colophon { font-size: .92rem; color: var(--muted); border-block: 1px solid var(--border); padding-block: 1rem; margin-block: 2rem; }
.book-colophon h2 { font-size: 1rem; margin-block: 1rem .3rem; }
.book .book-colophon p { text-align: start; hyphens: manual; overflow-wrap: anywhere; }
.book-toc ol { list-style: none; padding: 0; }
.book-toc li { margin-block: .3rem; }
.book-chapter h2 { margin-block-start: 2.5rem; }
.book .biblio li { margin-block: .35rem; text-align: start; }
@media print {
  .book { max-inline-size: none; font-size: 11pt; color: #000; }
  .book .book-subtitle, .book-year, .book-colophon { color: #222; }
  .book-cover { block-size: 24cm; display: flex; flex-direction: column; justify-content: center; padding: 0; break-after: page; }
  .book-colophon { border: 0; break-after: page; display: flex; flex-direction: column; justify-content: flex-end; block-size: 24cm; margin: 0; }
  .book-toc { break-after: page; }
  .book-chapter { break-before: page; }
  .book-chapter h2 { margin-block-start: 0; }
  .book h2, .book h3 { break-after: avoid; }
  .book p { orphans: 3; widows: 3; }
}
/* Accueil : ouvrage mis en avant (« À lire »). */
.book-feature .card { max-inline-size: 52rem; }
.book-feature h3 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-block: 0 .3rem; }
.book-feature .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 0; }

/* Couvertures photographiques (avant et quatrième) : la photo en pleine page sous un voile
   sombre, qui tient le texte lisible et adoucit le grain des images de petite taille. */
.book-cover.has-photo, .book-back { position: relative; overflow: hidden; color: #fbf3e4; background: #2a1d12; aspect-ratio: 210 / 297; max-inline-size: 34rem; margin-inline: auto; border-radius: var(--radius); padding: 0; display: flex; flex-direction: column; }
.book-cover.has-photo { justify-content: space-between; text-align: center; }
.book-cover-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 62% center; filter: saturate(1.08) contrast(1.04); }
.book-cover.has-photo::before, .book-back::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.book-cover.has-photo::before { background: linear-gradient(to bottom, rgb(20 12 6 / .7) 0%, rgb(20 12 6 / .42) 30%, rgb(20 12 6 / 0) 50%, rgb(20 12 6 / .1) 78%, rgb(20 12 6 / .72) 100%); }
.book-back::before { background: linear-gradient(to bottom, rgb(20 12 6 / .35), rgb(20 12 6 / .82) 45%, rgb(20 12 6 / .9)); }
.book-cover-text, .book-cover-foot, .book-back-text { position: relative; z-index: 2; }
.book-cover-text { padding: 12% 9% 0; }
.book .book-cover.has-photo p { text-align: center; }
.book-cover.has-photo .book-author { font-size: clamp(.8rem, 2.4vw, 1.05rem); letter-spacing: .32em; text-transform: uppercase; color: #e9d9a8; margin: 0; }
.book-cover.has-photo .book-author::after { content: ""; display: block; inline-size: 3rem; block-size: 1px; background: #d2c07a; margin: 1.1em auto 0; }
.book-cover.has-photo h1 { color: #fffaf0; font-size: clamp(2rem, 7.5vw, 3.6rem); line-height: 1.05; margin-block: .55em .4em; text-shadow: 0 2px 6px rgb(0 0 0 / .55), 0 4px 28px rgb(0 0 0 / .5); text-wrap: balance; }
.book-cover.has-photo .book-subtitle, .book-cover.has-photo .book-author { text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
/* Arabe : ni capitales ni espacement des lettres, qui briseraient les liaisons. */
.book[dir="rtl"] .book-cover.has-photo .book-author, .book[dir="rtl"] .book-cover-foot { letter-spacing: 0; text-transform: none; }
.book-cover.has-photo .book-subtitle { color: #f1e6cf; font-size: clamp(.85rem, 2.4vw, 1.1rem); line-height: 1.45; max-inline-size: 24em; margin-inline: auto; text-wrap: balance; }
.book-cover-foot { display: flex; justify-content: space-between; padding: 0 9% 7%; margin: 0; font-size: clamp(.75rem, 2vw, .95rem); letter-spacing: .18em; text-transform: uppercase; color: #efe2c4; }
.book-back { justify-content: flex-end; margin-block-start: 3rem; }
.book-back-text { padding: 0 11% 12%; font-size: clamp(.85rem, 2.2vw, 1.02rem); line-height: 1.6; }
.book .book-back-text p { text-align: start; hyphens: manual; color: #f4ead7; }
.book-back-title { font-family: var(--font-display); font-size: 1.5em; line-height: 1.2; color: #fffaf0 !important; margin-block-end: .9em; }
.book .book-back-text .book-back-site { font-size: .85em; letter-spacing: .04em; color: #d2c07a; overflow-wrap: anywhere; }
@media print {
  /* Pages de couverture à fond perdu, sans numéro ; les autres pages sont numérotées en bas. */
  @page { size: A4; margin: 2cm 2.2cm; @bottom-center { content: counter(page); font-family: Georgia, serif; font-size: 8.5pt; color: #555; } }
  @page cover { size: A4; margin: 0; @bottom-center { content: none; } }
  .book-cover.has-photo, .book-back { page: cover; inline-size: 210mm; block-size: 297mm; max-inline-size: none; aspect-ratio: auto; border-radius: 0; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .book-cover.has-photo { break-after: page; }
  .book-back { break-before: page; }
  .book-cover.has-photo h1 { font-size: 46pt; }
  .book-cover.has-photo .book-author { font-size: 12pt; }
  .book-cover.has-photo .book-subtitle { font-size: 13pt; }
  .book-cover-foot { font-size: 10pt; }
  .book-back-text { font-size: 11.5pt; }
}
/* Couverture d'un ouvrage : sur sa fiche, et dans l'encart « À lire » de l'accueil (forme et relief : voir « Couvertures » plus bas). */
.doc-cover { float: inline-end; inline-size: min(40%, 15rem); block-size: auto; margin: 0 0 1rem 1.5rem; }
[dir="rtl"] .doc-cover { margin: 0 1.5rem 1rem 0; }
@media (max-width: 40rem) { .doc-cover { float: none; display: block; inline-size: min(70%, 15rem); margin: 0 auto 1.25rem; } }
.book-feature .card.with-cover { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 40rem) { .book-feature .card.with-cover { grid-template-columns: 6.5rem 1fr; gap: 1rem; } }
@media print { .doc-cover { display: none; } }
/* Notice sur l'auteur, avec sa photo : quatrième de couverture et fiche de l'ouvrage. */
.book-back-author { display: flex; gap: 1.1em; align-items: flex-start; border-block-start: 1px solid rgb(210 192 122 / .5); padding-block-start: 1em; margin-block-start: 1.3em; }
.book-back-author img { flex: none; inline-size: 5.2em; block-size: 5.2em; border-radius: 50%; object-fit: cover; border: 2px solid #d2c07a; box-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.book .book-back-author p { margin: 0; font-style: italic; color: #e9d9a8; font-size: .94em; }
.author-note { display: flex; gap: 1.25rem; align-items: flex-start; margin-block: 2.5rem 1.5rem; clear: both; }
.author-note img { flex: none; inline-size: 6.5rem; block-size: 6.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.author-note h2 { margin-block: 0 .4rem; font-size: 1.2rem; }
.author-note p { margin: 0; }
@media (max-width: 40rem) { .author-note { flex-direction: column; align-items: center; text-align: center; } }
/* Lien entre la version complète et la version abrégée d'un ouvrage. */
.related-version { margin-block: .25rem 1.25rem; }
.related-version a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.related-version a::before { content: "→"; }
[dir="rtl"] .related-version a::before { content: "←"; }
@media print {
  /* Ouvrage court (version abrégée) : chapitres à la suite ; la quatrième garde sa page. */
  .book-flow .book-chapter { break-before: auto; }
  .book-flow .book-chapter h2 { margin-block-start: 1.6em; }
  .book-flow .book-toc { break-after: auto; }
  .book-flow .book-toc + .book-chapter { break-before: page; }
}

/* Livres : citation détachée (l'arabe garde sa direction dans un livre en français) et image de document. */
.block-quote { margin-block: 1.2em; }
.block-quote p { margin: 0; }
.block-quote[lang="ar"] { font-size: 1.2em; line-height: 2; }
.block-figure { margin: 1.5em 0; }
.block-figure img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.block-figure figcaption { margin-block-start: .5em; font-size: .9em; color: var(--muted); }
@media print {
  .block-quote, .block-figure { break-inside: avoid; }
  .block-figure img { border-radius: 0; }
}

/* ---- Couvertures ----
   Une même forme partout : publicité du livre à la une, rayon « À lire librement », encart « À lire » et fiche d'un
   ouvrage. Le dos du livre est du côté du début de ligne (propriétés logiques : il passe à droite en arabe). Un ouvrage
   sans couverture imprimée reçoit une couverture composée (partials/cover-fallback) de même proportion et de même relief. */
:root { --cover-ratio: 560 / 792; --cover-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 18px rgb(0 0 0 / .24); --cover-shadow-up: 0 2px 4px rgb(0 0 0 / .3), 0 16px 30px rgb(0 0 0 / .3); }
.bp-cover, .reading-cover, .book-feature-cover { position: relative; display: block; overflow: hidden; aspect-ratio: var(--cover-ratio); box-shadow: var(--cover-shadow); text-decoration: none;
  border-start-start-radius: 3px; border-end-start-radius: 3px; border-start-end-radius: 7px; border-end-end-radius: 7px; transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.bp-cover img, .reading-cover img, .book-feature-cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Pli du dos et filet de lumière : le même relief sur une couverture imprimée et sur une couverture composée. */
.bp-cover::after, .reading-cover::after, .book-feature-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  background: linear-gradient(to right, rgb(255 255 255 / .17) 0, rgb(255 255 255 / 0) 4%, rgb(0 0 0 / .14) 5%, rgb(0 0 0 / 0) 9%); }
.bp-cover:dir(rtl)::after, .reading-cover:dir(rtl)::after, .book-feature-cover:dir(rtl)::after { background: linear-gradient(to left, rgb(255 255 255 / .17) 0, rgb(255 255 255 / 0) 4%, rgb(0 0 0 / .14) 5%, rgb(0 0 0 / 0) 9%); }
.bp-cover:hover, .reading-cover:hover, .book-feature-cover:hover { transform: translateY(-3px); box-shadow: var(--cover-shadow-up); }
.bp-cover:active, .reading-cover:active, .book-feature-cover:active { transform: scale(.98); }
.doc-cover { box-shadow: var(--cover-shadow); border-start-start-radius: 3px; border-end-start-radius: 3px; border-start-end-radius: 7px; border-end-end-radius: 7px; }

/* Couverture composée : auteur en tête, titre au centre, année et nom du site en pied, comme sur les couvertures imprimées.
   Mêmes couleurs dans les deux thèmes : un livre ne change pas de couverture selon l'éclairage de l'écran. Les caractères
   et les marges suivent la largeur de la couverture (unités cqw), si bien que la composition est la même à toute taille. */
.no-cover { display: flex; color: #f6ecd9; --cv-a: #46321f; --cv-b: #20160e; background: linear-gradient(165deg, var(--cv-a), var(--cv-b)); }
.no-cover[data-tint="1"] { --cv-a: #3f4126; --cv-b: #1c1d10; }
.no-cover[data-tint="2"] { --cv-a: #4f2f27; --cv-b: #261612; }
.no-cover[data-tint="3"] { --cv-a: #2c3544; --cv-b: #151a24; }
.no-cover[data-tint="4"] { --cv-a: #4b3b25; --cv-b: #251c10; }
.no-cover::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgb(210 192 122 / .32); border-radius: 2px 5px 5px 2px; pointer-events: none; }
.no-cover:dir(rtl)::before { border-radius: 5px 2px 2px 5px; }
.cv-in { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding: 9% 10% 8%; text-align: center; }
.cv-top, .cv-foot { font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d2c07a; line-height: 1.4; }
.cv-top { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cv-foot { display: flex; justify-content: space-between; gap: .4rem; }
.cv-mid { flex: 1 1 0; display: flex; flex-direction: column; gap: .35rem; min-block-size: 0; overflow: hidden; }
.cv-mid::before { content: ""; align-self: center; flex: none; inline-size: 1.6rem; block-size: 1px; margin-block: auto .15rem; background: rgb(210 192 122 / .55); }
.cv-mid > :last-child { margin-block-end: auto; }
.cv-title { flex: none; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font: 700 clamp(.84rem, 3.5vw, .98rem)/1.2 var(--font-display); text-wrap: balance; color: #fff7e8; }
.cv-sub { flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .68rem; font-style: italic; line-height: 1.3; color: rgb(246 236 217 / .8); }
.cv-sub:lang(ar) { font-style: normal; }
.cv-top:lang(ar) { letter-spacing: 0; }
@supports (font-size: 1cqw) {
  .no-cover { container-type: inline-size; }
  .cv-in { gap: 5cqw; padding: 9cqw 10cqw 8cqw; }
  .cv-top, .cv-foot { font-size: clamp(.4rem, 3.7cqw, .66rem); }
  .cv-mid { gap: 2.4cqw; }
  .cv-mid::before { inline-size: 11cqw; margin-block: auto 1cqw; }
  .cv-title { font-size: clamp(.6rem, 9.4cqw, 1.2rem); }
  .cv-sub { font-size: clamp(.5rem, 5.4cqw, .82rem); }
}

/* Publicité intégrée du livre à la une (partials/book-promo) : une variante par langue, choisie
   d'après la langue du système. « hero » en tête de l'accueil, « bar » discrète sur les autres pages. */
.book-promo { margin-block: 1.25rem; }
.book-promo [hidden] { display: none !important; }
.bp-variant { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1.1rem 1.25rem;
  border-radius: 14px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.bp-kicker { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.bp-title { margin: .15rem 0 .35rem; line-height: 1.15; }
.bp-title a { color: inherit; text-decoration: none; }
.bp-hook { margin: 0 0 .5rem; max-inline-size: 42rem; }
.bp-price { margin: 0 0 .6rem; font-weight: 600; }
.bp-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.book-promo-hero .bp-cover { inline-size: clamp(7rem, 22vw, 12rem); }
.book-promo-hero .bp-title { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.book-promo-bar .bp-variant { gap: .9rem; padding: .7rem 2.6rem .7rem .9rem; border-inline-start: 4px solid var(--accent); }
.book-promo-bar .bp-variant[dir="rtl"] { padding: .7rem .9rem .7rem 2.6rem; }
.book-promo-bar .bp-cover { inline-size: 3.6rem; }
.book-promo-bar .bp-title { font-size: 1.1rem; font-weight: 700; }
.book-promo-bar .bp-price { margin-block-end: .4rem; font-size: .9rem; }
.book-promo-bar .bp-actions .button { padding-block: .35rem; font-size: .9rem; }
.book-promo-bar .no-cover .cv-top, .book-promo-bar .no-cover .cv-sub, .book-promo-bar .no-cover .cv-foot, .book-promo-bar .no-cover .cv-mid::before, .book-promo-bar .no-cover::before { display: none; }
.book-promo-bar .no-cover .cv-in { padding: 4px; }
.book-promo-bar .no-cover .cv-title { font-size: .5rem; -webkit-line-clamp: 6; }
.bp-close { position: absolute; inset-block-start: .35rem; inset-inline-end: .45rem; inline-size: 2rem; block-size: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bp-close:hover, .bp-close:focus-visible { background: var(--surface-2); color: var(--text); }

/* « À lire librement » (partials/reading-shelf) : œuvres de l'auteur et travaux de référence, en cartes. */
.reading-grid { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; }
.reading-card { position: relative; display: flex; flex-direction: column; padding: .75rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.reading-cover { margin-block-end: .6rem; }
.reading-kicker { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.reading-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: .2rem 0 .25rem; font-size: 1rem; line-height: 1.25; }
.reading-card h3 a { color: inherit; text-decoration: none; }
.reading-card .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 .6rem; font-size: .85rem; }
.reading-action { margin: auto 0 0; }
.reading-action .button { inline-size: 100%; justify-content: center; }
@media (max-width: 40rem) { .reading-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }

/* Téléphone : l'accueil montre des couvertures, rien d'autre. La publicité du livre à la une devient sa couverture
   sous la pastille « Nouveau livre », et le rayon « À lire librement » une rangée de couvertures qui défile au doigt.
   Le titre, l'auteur, le prix et les boutons restent dans la page, hors de vue, pour les lecteurs d'écran ; la
   couverture ouvre la fiche de l'ouvrage, où se trouvent le prix, l'achat et la version courte gratuite. */
@media (max-width: 40rem) {
  .book-promo-hero .bp-title, .book-promo-hero .bp-hook, .book-promo-hero .bp-price, .book-promo-hero .bp-actions,
  .book-promo-bar .bp-price, .book-promo-bar .bp-actions,
  .reading-row .reading-kicker, .reading-row .reading-card h3, .reading-row .reading-card .muted, .reading-row .reading-action {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .book-promo { margin-block: 1rem; }
  /* Bandeau discret des autres pages : la couverture, la pastille et le titre ; toute la bande ouvre la fiche. */
  .book-promo-bar .bp-variant { align-items: center; gap: .8rem; padding-block: .6rem; }
  .book-promo-bar .bp-cover { inline-size: 3rem; }
  .book-promo-bar .bp-title { margin-block: .1rem 0; font-size: 1.05rem; }
  .book-promo-bar .bp-title a::after { content: ""; position: absolute; inset: 0; }
  .book-promo-bar .bp-variant:has(.bp-title a:focus-visible) { outline: 3px solid var(--gold-strong); outline-offset: 2px; }
  .book-promo-hero .bp-variant { grid-template-columns: 1fr; justify-items: center; gap: .7rem; padding: .95rem 1rem 1.1rem; text-align: center; }
  .book-promo-hero .bp-copy { display: contents; }
  .book-promo-hero .bp-kicker { order: -1; padding: .16rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: .74rem; letter-spacing: .12em; }
  .book-promo-hero .bp-cover { inline-size: min(10rem, 48vw); }
  /* Ouvrage à la une sans publicité (encart « À lire » de l'accueil) : de même, sa couverture seule. */
  .book-feature .card.with-cover { position: relative; grid-template-columns: 1fr; justify-items: center; padding: .95rem 1rem 1.1rem; }
  .book-feature .card.with-cover > div { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .book-feature-cover { inline-size: min(10rem, 48vw); }
  .book-feature .card.with-cover:has(a:focus-visible) .book-feature-cover { outline: 3px solid var(--gold-strong); outline-offset: 3px; }
  .reading-row { margin-block: 1.75rem; }
  .reading-row > .muted { display: none; }
  .reading-row .reading-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(7.2rem, 38vw, 9.5rem); gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: .5rem -1rem 0; padding: .4rem 1rem 1rem; scroll-padding-inline: 1rem; overscroll-behavior-x: contain; }
  .reading-row .reading-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; scroll-snap-align: start; }
  .reading-row .reading-cover { margin: 0; }
  .reading-row .reading-card:has(a:focus-visible) .reading-cover, .book-promo-hero .bp-variant:has(a:focus-visible) .bp-cover { outline: 3px solid var(--gold-strong); outline-offset: 3px; }
}

/* Prochaine émission de la TV : cadre bien visible en haut de la page. */
.tv-next { display: grid; gap: .35rem; margin-block: 0 1.6rem; padding: clamp(1rem, 2.4vw, 1.5rem); border: 2px solid color-mix(in srgb, var(--gold) 70%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface) 62%); box-shadow: var(--shadow-1); }
.tv-next-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tv-next-tag { padding: .05rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tv-next-title { margin: 0; font: 700 clamp(1.25rem, 3.2vw, 1.8rem)/1.25 var(--font-display); }
.tv-next-title .vlang { position: static; display: inline-block; vertical-align: middle; }
.tv-next-when { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 700; }
.tv-next-when time, .tv-next-local time { font-variant-numeric: tabular-nums; }
.tv-next-local { margin: 0; color: var(--muted); }
.tv-next-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 0; }
.tv-next-none { border-style: dashed; background: var(--surface); }
.tv-next-none .tv-next-when { font-size: 1.05rem; font-weight: 500; color: var(--muted); }

/* Commentaires des spectateurs (page Tadaksahak TV pendant le direct, rediffusions) */
.tv-comments { display: grid; gap: .7rem; margin-block: 0 1.8rem; padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tv-comments h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: clamp(1.2rem, 3vw, 1.5rem); }
.tv-comments p { margin: 0; }
.tv-comments [data-c-note][data-state="ok"] { color: var(--green); }
.tv-comments [data-c-note][data-state="ko"] { color: var(--red); }
.tv-comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.tv-comments[data-live="1"] .tv-comment-list { max-block-size: 22rem; overflow-y: auto; padding-inline-end: .3rem; overscroll-behavior: contain; }
.tv-comment { display: grid; gap: .15rem; padding: .6rem .85rem; border-radius: 14px; background: var(--surface-2); }
.tv-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; font-size: .9rem; color: var(--muted); }
.tv-comment-name { color: var(--text); font-size: 1rem; }
.tv-comment-tag { padding: .02rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--text); font-size: .78rem; font-weight: 700; }
.tv-comment-body { white-space: pre-line; overflow-wrap: anywhere; }
.tv-comment-report { justify-self: start; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.tv-comment-report:disabled { text-decoration: none; cursor: default; }
.tv-comment-form { max-inline-size: none; }
.tv-comment-form textarea { inline-size: 100%; }
.tv-comment-left { font-size: .85rem; }
.tv-comments-rules { font-size: .85rem; color: var(--muted); }

/* Lecteur audio et vidéo commun à tout le site (public/js/player.js) */
.mp { --mp-fill: var(--accent); --mp-track: color-mix(in srgb, var(--text) 20%, transparent); --mp-buf: color-mix(in srgb, var(--text) 34%, transparent); --mp-to: right; position: relative; container: mp / inline-size; max-inline-size: 100%; color: var(--text); }
[dir="rtl"] .mp { --mp-to: left; }
/* Le conteneur de requêtes n'a pas de largeur propre : il remplit son parent, et prend de la place dans une rangée flex */
.mp { inline-size: 100%; }
.mp-audio { flex: 1 1 20rem; }
.mp-video { flex: 1 1 24rem; }
.mp[hidden], .mp [hidden] { display: none !important; }
.mp audio { display: none; }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
.mp-audio .mp-bar { padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.pronunciation .mp-audio { inline-size: min(100%, 32rem); }
.mp-btn, .mp-big { -webkit-tap-highlight-color: transparent; }
.mp-btn { display: inline-grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 700 .85rem var(--font); cursor: pointer; transition: background-color .15s; }
.mp-btn svg { inline-size: 1.45rem; block-size: 1.45rem; }
.mp-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.mp-btn:focus-visible, .mp-seek:focus-visible, .mp-vol:focus-visible, .mp-big:focus-visible, .mp-retry:focus-visible { outline: 3px solid var(--gold-strong); outline-offset: 2px; }
.mp-btn.is-on { background: color-mix(in srgb, currentColor 22%, transparent); }
.mp-play { background: var(--accent); color: var(--on-accent); }
.mp-play:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.mp-speed { inline-size: auto; min-inline-size: 2.9rem; padding-inline: .45rem; font-variant-numeric: tabular-nums; }
.mp-track { display: flex; flex: 1 1 12rem; align-items: center; gap: .5rem; min-inline-size: 0; }
.mp-t { flex: none; min-inline-size: 2.4rem; font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); text-align: center; }
.mp-live { display: none; align-items: center; gap: .35rem; margin-inline-end: auto; padding: .1rem .65rem; border-radius: 999px; background: #d4261c; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-live::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #fff; }
.mp.is-live .mp-live { display: inline-flex; }
.mp.is-live .mp-track, .mp.is-live .mp-speed, .mp.is-live .mp-back, .mp.is-live .mp-fwd { display: none; }
/* Curseurs : position (avec ce qui est déjà chargé) et volume */
.mp-seek, .mp-vol { -webkit-appearance: none; appearance: none; flex: 1 1 6rem; min-inline-size: 3rem; block-size: 1.5rem; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.mp-vol { flex: none; inline-size: 5.5rem; min-inline-size: 0; }
.mp-seek:disabled { opacity: .5; cursor: default; }
.mp-seek::-webkit-slider-runnable-track, .mp-vol::-webkit-slider-runnable-track { block-size: .4rem; border-radius: 999px; background: linear-gradient(to var(--mp-to), var(--mp-fill) var(--mp-pos, 0%), var(--mp-buf) var(--mp-pos, 0%) var(--mp-load, 0%), var(--mp-track) var(--mp-load, 0%)); }
.mp-seek::-moz-range-track, .mp-vol::-moz-range-track { block-size: .4rem; border-radius: 999px; background: linear-gradient(to var(--mp-to), var(--mp-fill) var(--mp-pos, 0%), var(--mp-buf) var(--mp-pos, 0%) var(--mp-load, 0%), var(--mp-track) var(--mp-load, 0%)); }
.mp-seek::-webkit-slider-thumb, .mp-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 1rem; block-size: 1rem; margin-block-start: -.3rem; border: 0; border-radius: 50%; background: var(--mp-fill); box-shadow: 0 0 0 2px var(--surface); }
.mp-seek::-moz-range-thumb, .mp-vol::-moz-range-thumb { inline-size: 1rem; block-size: 1rem; border: 0; border-radius: 50%; background: var(--mp-fill); box-shadow: 0 0 0 2px var(--surface); }
/* Message (fichier illisible, reprise de la lecture) et réessai */
.mp-status { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.mp.has-error .mp-status { color: var(--red); }
.mp-retry { margin-block-start: .35rem; padding: .35rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 700 .85rem var(--font); cursor: pointer; }
/* Attente de données : l'anneau remplace l'icône de lecture */
@keyframes mp-turn { to { transform: rotate(360deg); } }
.mp.is-waiting .mp-play svg { visibility: hidden; }
.mp.is-waiting .mp-play::after { content: ""; position: absolute; inline-size: 1.2rem; block-size: 1.2rem; border: 2.5px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: mp-turn .8s linear infinite; }
.mp-play { position: relative; }
/* Vidéo : commandes en surimpression, qui s'effacent pendant la lecture */
.mp-video { background: #000; }
.video-frame > .mp-video, .player > .mp-video, .tv-live > .mp-video { position: absolute; inset: 0; }
.mp-video video { display: block; inline-size: 100%; block-size: auto; max-block-size: 80vh; background: #000; }
.video-frame > .mp-video video, .player > .mp-video video, .tv-live > .mp-video video { block-size: 100%; max-block-size: none; object-fit: contain; }
.mp-video .mp-bar { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 2rem .75rem .4rem; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0)); transition: opacity .2s; pointer-events: none; }
.mp-video .mp-bar > * { pointer-events: auto; }
.mp-video .mp-t { color: #fff; }
.mp-video .mp-play { background: #fff; color: #111; }
.mp-video .mp-play:hover { background: #e9e9e9; }
.mp-video .mp-track { order: -1; flex: 1 1 100%; }
.mp-video .mp-seek { --mp-track: rgb(255 255 255 / .3); --mp-buf: rgb(255 255 255 / .5); --mp-fill: #ff7a59; }
.mp-video .mp-vol { --mp-track: rgb(255 255 255 / .3); --mp-buf: rgb(255 255 255 / .3); --mp-fill: #fff; }
.mp-video .mp-seek::-webkit-slider-thumb, .mp-video .mp-vol::-webkit-slider-thumb { box-shadow: 0 0 0 2px #000; }
.mp-video .mp-seek::-moz-range-thumb, .mp-video .mp-vol::-moz-range-thumb { box-shadow: 0 0 0 2px #000; }
.mp-video .mp-speed { margin-inline-start: auto; }
.mp-video.is-idle.is-playing .mp-bar { opacity: 0; }
.mp-video.is-idle.is-playing .mp-bar > * { pointer-events: none; }
.mp-video.is-idle.is-playing { cursor: none; }
.mp-video .mp-status { position: absolute; inset-block-start: .7rem; inset-inline: 0; inline-size: fit-content; max-inline-size: calc(100% - 1.5rem); margin: 0 auto; padding: .3rem .9rem; border-radius: 999px; background: rgb(0 0 0 / .75); color: #fff; text-align: center; }
.mp-video .mp-retry { position: absolute; inset-block-start: 3rem; inset-inline: 0; inline-size: fit-content; margin: 0 auto; }
.mp-big { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mp-big span { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: rgb(0 0 0 / .62); color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85); transition: transform .15s; }
.mp-big:hover span { transform: scale(1.06); }
.mp-big svg { inline-size: 2.3rem; block-size: 2.3rem; }
.mp-video.is-started .mp-big, .mp-video.has-error .mp-big, .mp-video.is-live .mp-big { display: none; }
.mp-video.is-waiting::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 3rem; block-size: 3rem; border: 4px solid #fff; border-inline-end-color: transparent; border-radius: 50%; animation: mp-turn .8s linear infinite; pointer-events: none; }
/* Sous-titres : remontés au-dessus des commandes tant qu'elles sont affichées (Chrome, Edge, Safari) */
.mp-video video::-webkit-media-text-track-container { transition: transform .2s; }
.mp-video:not(.is-idle) video::-webkit-media-text-track-container { transform: translateY(-4.6rem); }
.mp-video.is-fs { display: grid; align-content: center; }
.mp-video.is-fs video { max-block-size: none; block-size: 100%; object-fit: contain; }
.tv-live:not(.is-loaded) .mp-video { visibility: hidden; }
/* Petit espace (carte, téléphone) : la position passe sur sa propre ligne, le volume est laissé au système */
@container mp (max-width: 34rem) {
  .mp-track { order: -1; flex: 1 1 100%; }
  .mp-speed { margin-inline-start: auto; }
}
@container mp (max-width: 26rem) { .mp-vol { display: none; } }
/* Vidéo sur un petit écran : l'essentiel seulement (lecture, sous-titres, son, plein écran) ; l'image reste visible */
@container mp (max-width: 34rem) {
  .mp-video .mp-back, .mp-video .mp-fwd, .mp-video .mp-pip, .mp-video .mp-vol { display: none; }
  .mp-video .mp-bar { padding-block-start: 1.2rem; }
  .mp-big span { inline-size: 3.6rem; block-size: 3.6rem; }
  .mp-big svg { inline-size: 1.9rem; block-size: 1.9rem; }
  .mp-video:not(.is-started):not(:focus-within) .mp-bar { display: none; }
}
@media (pointer: coarse) { .mp-btn { inline-size: 2.75rem; block-size: 2.75rem; } .mp-speed { inline-size: auto; } }
@media (prefers-reduced-motion: reduce) { .mp-bar, .mp-btn, .mp-big span { transition: none; } .mp.is-waiting .mp-play::after, .mp-video.is-waiting::after { animation-duration: 3s; } }