/* echoblic — feuille de style du site public (SITE-003, 10/10/2026), d'après la maquette de direction artistique
   `maquettes/codex_direction_artistique_2026-10-10/` et avec les exigences antérieures :
   - identité inchangée : anthracite (structure), bleu (interactions, Impact), citron (signal, jamais en texte sur blanc) ;
   - une seule police latine (ID-004) ; arabe de droite à gauche par propriétés logiques (LANG-002) ;
   - textes de 12 pixels au moins ; contour visible au clavier ; animations coupées si le lecteur le demande ;
   - panneau de filtres qui descend sous la barre des rubriques, fermé par défaut (FILTRE-002) ; publicité de taille
     réservée (PUB-002). */
:root {
  --encre: #181E23; --encre-2: #2A323A; --encre-3: #30383F;
  --texte: #181E23; --texte-2: #53616D; --texte-3: #65707B;
  --bleu: #0566F9; --bleu-fonce: #0450C4; --bleu-voile: #EEF5FF; --bleu-pale: #DFE8F4; --bleu-barre: #B4C9E7;
  --citron: #DBFB5E;
  --fond: #FFFFFF; --fond-2: #F4F6F8; --fond-3: #EEF2F5; --filet: #DFE5EA; --filet-fort: #C5CDD6;
  --erreur: #B3261E;
  --rayon: 4px; --rayon-l: 8px;
  --police: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-ar: "Noto Sans Arabic", "Segoe UI", sans-serif;
  --largeur: 1248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; font: 15px/1.6 var(--police); color: var(--texte); background: var(--fond); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { line-height: 1.24; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bleu-fonce); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a, button { transition: color .16s, background-color .16s, border-color .16s; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; }
svg.ic { flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"], .ar { font-family: var(--police-ar); }
[hidden] { display: none !important; }
.conteneur { width: min(var(--largeur), calc(100% - 80px)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.petit { font-size: 14px; } .tres-petit { font-size: 12px; } .discret { color: var(--texte-3); } .gras { font-weight: 700; }
.lien { color: var(--bleu-fonce); } .lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.aller-contenu { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--citron); color: var(--encre); padding: 8px 14px; border-radius: var(--rayon); z-index: 100; font-weight: 700; }
.aller-contenu:focus { top: 8px; }

/* ---- Repères typographiques ---- */
.surtitre { font-size: 12px; color: var(--texte-2); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.rubrique { font-size: 12px; font-weight: 700; color: var(--bleu-fonce); text-transform: uppercase; letter-spacing: .02em; }
.meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; color: var(--texte-2); font-size: 13px; }
.meta .trad { border: 1px solid var(--filet-fort); border-radius: 3px; padding: 0 5px; }
/* Marque oblique de la maquette (deux bandes, bleu puis citron) devant les titres de page. */
.titre-oblique { display: flex; align-items: center; gap: 15px; }
.titre-oblique::before { content: ""; flex: none; width: 9px; height: 23px; background: var(--bleu); transform: skewX(-28deg); box-shadow: 10px 0 0 var(--citron); margin-inline-end: 9px; }
[dir="rtl"] .titre-oblique::before { transform: skewX(28deg); box-shadow: -10px 0 0 var(--citron); }
.repere { }

/* ---- Boutons ---- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--rayon); background: var(--bleu); color: #fff; font-size: 14px; font-weight: 600; border: 1px solid var(--bleu); }
.bouton:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.bouton.citron { background: var(--citron); border-color: var(--citron); color: var(--encre); }
.bouton.citron:hover { background: #CBEF45; border-color: #CBEF45; color: var(--encre); }
.bouton.contour, .outil { background: #fff; color: var(--texte); border: 1px solid var(--filet); }
.bouton.contour:hover, .outil:hover, .outil[aria-pressed="true"] { background: var(--bleu-voile); color: var(--bleu-fonce); border-color: var(--bleu-pale); }
.bouton.danger { color: var(--erreur); border-color: #E7B4B0; }
.outil { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--rayon); font-size: 13px; font-weight: 600; }
.bouton-icone { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: inherit; }
.lien-bouton { color: var(--bleu-fonce); font-size: 13px; font-weight: 700; padding: 6px 0 0; }
.lien-bouton:hover { text-decoration: underline; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bleu-fonce); font-weight: 600; }
[dir="rtl"] .lien-fleche svg, [dir="rtl"] .fil-ariane svg { transform: scaleX(-1); }
.segmente { display: inline-flex; background: var(--fond-2); padding: 3px; border-radius: 5px; gap: 3px; flex-wrap: wrap; }
.segmente button, .segmente a { padding: 8px 13px; font-size: 13px; border-radius: 3px; color: var(--texte-2); }
.segmente [aria-pressed="true"], .segmente .actif { background: var(--encre); color: #fff; }
.segmente button:hover:not([aria-pressed="true"]), .segmente a:hover:not(.actif) { background: #fff; color: var(--texte); }
.choix { border: 1px solid var(--filet); min-height: 42px; border-radius: var(--rayon); padding: 0 10px; background: #fff; font-size: 13px; color: var(--texte-2); max-width: 100%; }

/* ---- En-tête (bande sombre) ---- */
.entete { background: var(--encre); color: #fff; }
.entete-ligne { height: 76px; display: flex; align-items: center; gap: 36px; }
.logo { flex: none; display: block; }
.logo img { height: 36px; width: auto; }
.nav { display: flex; gap: 28px; align-self: stretch; flex: 1; align-items: center; white-space: nowrap; }
.nav a { height: 100%; display: flex; align-items: center; position: relative; font-size: 14px; font-weight: 600; color: #D3D9DF; }
.nav a:hover { color: #fff; }
.nav a.actif { color: #fff; }
.nav a.actif::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--citron); }
.entete-actions { display: flex; gap: 8px; align-items: center; }
.entete .bouton-icone:hover { background: #ffffff16; color: var(--citron); }
.entete .bouton-icone.favoris { background: var(--encre-3); }
.langues { display: flex; align-items: center; gap: 2px; border-inline-start: 1px solid #48525C; padding-inline-start: 12px; margin-inline-start: 4px; }
.langues a { color: #C4CCD4; font-size: 12px; font-weight: 700; padding: 6px 7px; border-radius: 3px; line-height: 1; }
.langues a:hover { color: #fff; }
.langues a.actif { color: var(--encre); background: var(--citron); }
.langues a[lang="ar"] { font-family: var(--police-ar); font-size: 13px; }
.lien-compte.connecte { color: var(--citron); }

/* Recherche en boîte de dialogue (Échap ferme) */
.dialogue { padding: 0; border: 1px solid var(--filet); border-radius: var(--rayon-l); width: min(520px, calc(100% - 32px)); color: var(--texte); box-shadow: 0 20px 80px #0003; }
.dialogue::backdrop { background: #181E2370; }
.dialogue-tete { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--filet); }
.dialogue-tete h2 { font-size: 20px; }
.dialogue-corps { padding: 22px; display: grid; gap: 12px; }
.dialogue-corps input[type="search"] { height: 48px; width: 100%; padding: 0 14px; border: 1px solid #BFC9D2; border-radius: var(--rayon); }

/* ---- Tête de page et ligne des thèmes ---- */
main { padding-bottom: 56px; }
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 28px 0 20px; border-bottom: 1px solid var(--filet); }
.page-tete h1 { font-size: 30px; font-weight: 750; }
.page-date { font-size: 13px; color: var(--texte-2); text-align: end; }
.point-direct { width: 6px; height: 6px; display: inline-block; background: var(--bleu); border-radius: 50%; margin-inline-end: 6px; vertical-align: 2px; }
/* Barre des rubriques (RUBRIQUES-001) : liste fixe ; « Plus » sur ordinateur, tout à la suite (défilement) sur téléphone. */
.ligne-themes { display: flex; align-items: center; gap: 8px; padding: 14px 0 20px; }
.themes { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.themes::-webkit-scrollbar { display: none; }
.theme { height: 38px; padding: 0 15px; font-size: 13px; white-space: nowrap; border-radius: var(--rayon); color: var(--texte-2); display: inline-flex; align-items: center; flex: none; }
.theme:hover { background: var(--fond-3); color: var(--texte); }
.theme.actif { background: var(--encre); color: #fff; }
.theme-suite { display: none; }
.themes-plus { position: relative; flex: none; }
.themes-plus > summary { list-style: none; cursor: pointer; gap: 4px; }
.themes-plus > summary::-webkit-details-marker { display: none; }
.themes-plus .chevron-bas { transform: rotate(90deg); transition: transform .16s; }
.themes-plus[open] .chevron-bas { transform: rotate(-90deg); }
.menu-themes { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 200px; display: grid; gap: 2px; padding: 6px;
  background: var(--fond); border: 1px solid var(--filet-fort); border-radius: var(--rayon-l); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.bouton-filtres { border: 1px solid var(--filet-fort); height: 42px; padding: 0 14px; display: inline-flex; gap: 8px; align-items: center; border-radius: var(--rayon); font-size: 13px; font-weight: 600; flex: none; background: var(--fond); color: var(--texte); }
.bouton-filtres:hover, .bouton-filtres[aria-expanded="true"] { background: var(--bleu-voile); color: var(--bleu-fonce); border-color: var(--bleu-pale); }
.pastille-n { background: var(--bleu); color: #fff; border-radius: 10px; font-size: 12px; padding: 1px 7px; }

/* ---- Panneau des filtres (FILTRE-002, remplace la bande à gauche de SITE-004) ---- */
/* Ordinateur : il descend sous la barre des rubriques, pleine largeur, en trois colonnes, et repousse la liste sans la
   rétrécir ; ses boutons restent au bas de l'écran pendant qu'on le parcourt. Téléphone : plein écran (plus bas). */
.mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bande-filtres { display: none; }
body.filtres-ouverts .bande-filtres { display: flex; flex-direction: column; margin: -6px 0 24px; padding: 14px 20px 0; font-size: 14px;
  border: 1px solid var(--filet); border-radius: var(--rayon-l); background: var(--fond-2); }
.tete-filtres { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--filet-fort); }
.tete-filtres h2 { font-size: 16px; flex: 1; }
.fermer-filtres { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rayon); }
.fermer-filtres:hover { background: var(--fond); }
.filtres-contenu { padding: 6px 0 14px; }
.champ-principal { max-width: 520px; }
.colonnes-filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.colonne-filtres { min-width: 0; }
.aide-filtre { margin: 6px 0 0; }
.pied-filtres { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0 14px; border-top: 1px solid var(--filet-fort); background: var(--fond-2); }
.pied-filtres-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.ligne-resume { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: -6px 0 16px; }
.ligne-resume .resume-liste { margin: 0; }
.choix-tri { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); }
.choix-tri .choix { min-height: 38px; color: var(--texte); }
.lien-bouton.a-confirmer { background: var(--citron); color: var(--encre); padding: 4px 10px; border-radius: var(--rayon); }
.message-suivi { font-size: 13px; font-weight: 600; color: var(--texte); }
.zone-resultats { min-width: 0; }
.filtres-simples { display: grid; gap: 2px; }
.filtres-simples h2 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; color: var(--texte-2); }
.filtres-simples a { display: flex; justify-content: space-between; color: var(--texte-2); padding: 3px 6px; border-radius: var(--rayon); }
.groupe-filtre { border-bottom: 1px solid var(--filet); padding: 10px 0; }
.groupe-filtre > summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.groupe-filtre > summary::-webkit-details-marker { display: none; }
.groupe-filtre > summary::after { content: "+"; margin-inline-start: auto; color: var(--texte-3); font-weight: 600; }
.groupe-filtre[open] > summary::after { content: "–"; }
.cases { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.cases.court .case:nth-child(n+9) { display: none; }
.case { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--rayon); cursor: pointer; color: var(--texte-2); }
.case:hover { background: #fff; }
.case.choisi { color: var(--texte); font-weight: 700; background: var(--bleu-voile); }
.case input { accent-color: var(--bleu); margin: 0; flex: none; }
.case span:not(.compte) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.compte { color: var(--texte-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.champ-filtre { width: 100%; font-size: 14px; padding: 8px 10px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); margin-top: 8px; background: #fff; }
.dates-filtre { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.dates-filtre input { font-size: 13px; padding: 5px 6px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); min-width: 0; }
.sous-titre-filtres { margin: 18px 0 2px; font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--texte-2); display: grid; gap: 2px; }
.sous-titre-filtres .tres-petit { text-transform: none; font-weight: 500; }
.pastilles-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.pastille-filtre { border: 1px solid var(--filet-fort); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--texte); }
.pastille-filtre:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.actions-recherche { display: flex; flex-wrap: wrap; gap: 8px; }
.resume-liste { font-size: 13px; color: var(--texte-2); margin: -6px 0 16px; }
.intro-liste { margin: 0 0 16px; color: var(--texte-2); font-size: 14px; max-width: 760px; }
.plus-zone { text-align: center; margin: 28px 0 8px; }
.vide { padding: 40px 20px; text-align: center; color: var(--texte-2); border: 1px dashed var(--filet-fort); border-radius: var(--rayon-l); }
.vide b { display: block; color: var(--texte); font-size: 17px; margin-bottom: 4px; }

/* ---- À la une : sujet principal et colonne « À explorer aussi » ---- */
.une-grille { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 36px; }
.une-grille.sans-rail { grid-template-columns: minmax(0, 1fr); }
.photo { margin: 0; }
.photo .cadre { display: block; overflow: hidden; background: var(--fond-2); border-radius: 3px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.une .photo .cadre { aspect-ratio: 1.95; }
.credit { font-size: 12px; line-height: 1.5; color: var(--texte-2); margin-top: 6px; }
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.credit .archive { font-weight: 700; color: var(--texte); }
.une .meta { margin: 16px 0 10px; }
.une:not(.avec-photo) .meta { margin-top: 4px; }
.une h2 { font-size: 31px; font-weight: 750; }
.une:not(.avec-photo) h2 { font-size: 36px; line-height: 1.18; max-width: 900px; }
.une h2 a:hover, .breve h3 a:hover, .recul h3 a:hover { color: var(--bleu-fonce); }
.accroche { font-size: 15px; color: var(--texte-2); line-height: 1.75; margin-top: 12px; max-width: 680px; }
.une-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.couverture { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 14px; color: var(--texte-2); }
.couverture b { color: var(--texte); font-weight: 600; }
.couverture .sep { color: #AAB4BE; }
.pastille-impact { display: inline-flex; align-items: center; gap: 5px; background: var(--bleu-voile); color: var(--bleu-fonce); border-radius: 3px; padding: 3px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pastille-impact .ic { width: 13px; height: 13px; }
.rail { border-inline-start: 1px solid var(--filet); padding-inline-start: 28px; min-width: 0; }
.rail-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rail-tete h2 { font-size: 18px; }
.breve { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--filet); align-items: start; }
.breve.sans-image { grid-template-columns: minmax(0, 1fr); }
.breve h3 { font-size: 16px; font-weight: 700; margin: 7px 0 9px; line-height: 1.35; }
.breve .photo .cadre { width: 86px; height: 86px; }
.rail .breve:last-child { border-bottom: 0; }
.ligne-edito { padding: 28px 0 16px; margin-top: 26px; border-top: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ligne-edito h2 { font-size: 22px; }
.grille-recul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.recul .photo .cadre { aspect-ratio: 1.95; margin-bottom: 13px; }
.recul:not(.avec-photo) { border-top: 3px solid var(--encre); padding-top: 14px; }
.recul h3 { font-size: 18px; margin: 8px 0; line-height: 1.32; }
.liste-breves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.liste-breves .breve:nth-last-child(-n+2) { border-bottom: 0; }

/* ---- Emplacements publicitaires (PUB-002) : taille réservée, marqués, sans script ---- */
.pub { margin: 30px auto 22px; border-block: 1px solid var(--filet); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texte-3); }
.pub-etiquette { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pub-cadre { width: min(728px, 100%); height: 90px; background: var(--fond-2); display: grid; place-items: center; font-size: 12px; }
.pub-carre { border: 0; margin: 28px 0 0; padding: 0; }
.pub-carre .pub-cadre { width: 300px; max-width: 100%; height: 250px; }
/* PUB-003 : colonne 300 × 600 collée au défilement, emplacements propres à l'ordinateur ou au téléphone, bandeau fixé
   en bas de l'écran du téléphone (320 × 50, refermable). */
.pub-colonne { border: 0; margin: 28px 0 0; padding: 0; position: sticky; top: 84px; }
.pub-colonne .pub-cadre { width: 300px; max-width: 100%; height: 600px; }
.pub-laterale { display: none; }
/* REMARQUES-001 : bouton « Vos remarques », visible sur chaque page, discret. */
.bouton-remarques { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; background: var(--encre, #181E23); color: var(--fond, #fff); font-size: 13px; font-weight: 600;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bouton-remarques:hover, .bouton-remarques:focus-visible { filter: brightness(1.15); }
.chapeau-remarques { font-size: 17px; margin-bottom: 18px; }
@media (max-width: 1000px) { body:has(.pub-ancre:not(.fermee)) .bouton-remarques { bottom: 72px; } }
.pub-ancre { display: none; }
@media (min-width: 1360px) {
  .mise-en-page.avec-pub-laterale { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .pub-laterale { display: block; align-self: stretch; }
  .pub-laterale .pub-colonne { margin-top: 0; }
}
@media (min-width: 1001px) { .pub-seul-mobile { display: none; } }
@media (max-width: 1000px) {
  .pub-seul-ordi { display: none; }
  .pub-colonne { position: static; }
  .pub-colonne .pub-cadre { height: 250px; }
  .pub-ancre:not(.fermee) { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; margin: 0; padding: 4px 0;
    background: var(--fond); border-top: 1px solid var(--filet); flex-direction: row; justify-content: center; gap: 8px; }
  .pub-ancre .pub-etiquette { position: absolute; inset-inline-start: 8px; top: 2px; font-size: 9px; }
  .pub-ancre .pub-cadre { width: 320px; height: 50px; }
  .fermer-ancre { position: absolute; inset-inline-end: 6px; top: 6px; background: none; border: 0; padding: 4px; cursor: pointer; color: inherit; }
  body:has(.pub-ancre:not(.fermee)) { padding-bottom: 60px; }
}

/* ---- Page d'un événement ---- */
.fil-ariane { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 24px 0 20px; font-size: 13px; color: var(--texte-2); }
.fil-ariane .ic { width: 14px; height: 14px; color: var(--texte-3); }
.bandeau-info { background: var(--bleu-voile); border: 1px solid var(--bleu-pale); border-radius: var(--rayon-l); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.tete-article { max-width: 980px; }
.tete-article h1 { font-size: 38px; font-weight: 750; line-height: 1.16; margin: 12px 0 14px; }
.tete-article .accroche { font-size: 16px; max-width: 780px; margin-top: 0; }
.note-traduction { margin-top: 10px; font-size: 13px; color: var(--texte-2); }
.outils-article { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 22px; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--texte-2); }
.groupe-outils { display: flex; gap: 6px; position: relative; flex-wrap: wrap; }
.statut-evt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texte); }
.statut-evt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }
.statut-evt.stabilise::before { background: var(--filet-fort); }
.menu-partage { position: absolute; top: 48px; inset-inline-end: 0; z-index: 30; background: #fff; border: 1px solid var(--filet-fort); border-radius: var(--rayon-l); padding: 6px; display: grid; min-width: 210px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.menu-partage a, .menu-partage button { padding: 9px 10px; border-radius: var(--rayon); color: var(--texte); font-size: 14px; text-align: start; }
.menu-partage a:hover, .menu-partage button:hover { background: var(--fond-2); }
.message-action { flex-basis: 100%; color: var(--texte-2); font-size: 13px; }
.message-action:empty { display: none; }
.photo-article .cadre { height: 280px; }
.photo-article.portraits-2 .cadre, .photo-article.portraits-3 .cadre { height: 320px; }
.portraits { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 3px; height: 100%; background: #fff; }
.portraits > div { overflow: hidden; min-width: 0; }
.ancres { position: sticky; top: 0; z-index: 40; background: #fffffff5; border-bottom: 1px solid var(--filet); margin-top: 8px; }
.ancres .conteneur { display: flex; gap: 30px; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ancres .conteneur::-webkit-scrollbar { display: none; }
.ancres a { min-height: 56px; display: flex; align-items: center; border-bottom: 2px solid transparent; color: var(--texte-2); font-size: 14px; }
.ancres a:hover, .ancres a.actif { color: var(--bleu-fonce); }
.ancres a.actif { border-color: var(--bleu); font-weight: 700; }
.lecture { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding-top: 34px; }
.lecture > * { min-width: 0; }
.section-lecture { padding-bottom: 30px; border-bottom: 1px solid var(--filet); margin-bottom: 30px; scroll-margin-top: 72px; }
.section-lecture:last-child { border-bottom: 0; }
.section-lecture > h2 { font-size: 24px; margin-bottom: 18px; }
.section-lecture > .surtitre + h2 { margin-top: 0; }
.points { list-style: none; counter-reset: point; padding: 0; margin: 0; }
.points li { counter-increment: point; padding: 0 0 20px 44px; position: relative; font-size: 16px; line-height: 1.75; }
.points li::before { content: "0" counter(point); position: absolute; inset-inline-start: 0; top: 3px; font-size: 13px; font-weight: 700; color: var(--bleu); }
.points li:last-child { padding-bottom: 0; }
[dir="rtl"] .points li { padding: 0 44px 20px 0; }
.attribution { display: block; font-size: 12px; color: var(--texte-2); margin-top: 4px; line-height: 1.5; }
.attribution a { text-decoration: underline; text-underline-offset: 2px; }
.mention-ia { font-size: 12px; color: var(--texte-3); margin-top: 18px; display: flex; gap: 6px; align-items: flex-start; }
.mention-ia .ic { width: 15px; height: 15px; margin-top: 2px; }
.colonne { border-top: 3px solid var(--encre); padding-top: 18px; align-self: start; }
.colonne h3 { font-size: 16px; }
.grand-impact { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px; }
.grand-impact strong { font-size: 44px; line-height: 1; color: var(--bleu-fonce); font-weight: 700; }
.grand-impact span { font-size: 15px; color: var(--texte-3); }
.note-colonne { font-size: 12px; color: var(--texte-2); }
.jauge { height: 5px; margin: 14px 0 18px; background: var(--bleu-pale); }
.jauge i { display: block; height: 100%; background: var(--bleu); }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; border-bottom: 1px solid var(--filet); padding-bottom: 20px; margin-bottom: 14px; }
.chiffres strong { font-size: 24px; display: block; font-weight: 600; line-height: 1.2; }
.chiffres span { font-size: 12px; color: var(--texte-2); }
.divulgation { border-top: 1px solid var(--filet); padding-top: 14px; margin-top: 18px; font-size: 13px; color: var(--texte-2); }
.divulgation summary { cursor: pointer; color: var(--texte); font-weight: 600; min-height: 32px; }
.divulgation p, .divulgation .composantes { margin-top: 8px; }
.composantes { display: grid; gap: 6px; }
.composante { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--filet); padding: 6px 0; }
.composante b { color: var(--texte); }
.pays-barres h3 { font-size: 16px; margin: 22px 0 6px; }
.ligne-pays { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-top: 12px; }
.barre-pays { height: 4px; background: var(--fond-2); margin: 6px 0 4px; }
.barre-pays i { height: 100%; display: block; background: var(--bleu-barre); }

/* Sources : une par bloc, titre en grand (lisible dans sa langue, arabe à droite) */
.controles-sources { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; flex-wrap: wrap; }
.controles-sources .droite { display: flex; gap: 8px; flex-wrap: wrap; }
.compte-sources { font-size: 12px; color: var(--texte-3); margin: 12px 0; }
.source { padding: 22px 0; border-top: 1px solid var(--filet); display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 14px; align-items: start; }
.source .logo-boite-source { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--filet); border-radius: 5px; overflow: hidden; }
.source .logo-boite-source .logo-media { max-width: 38px; height: auto; max-height: 24px; margin: 0; }
.source .logo-boite-source .monogramme { border: 0; background: none; height: auto; font-size: 12px; margin: 0; }
.ligne-media { font-size: 12px; color: var(--texte-2); display: flex; gap: 4px 9px; flex-wrap: wrap; margin: 0 0 6px; }
.ligne-media b, .ligne-media a.nom { font-size: 13px; color: var(--texte); font-weight: 700; }
.source h3 { font-size: 18px; font-weight: 600; line-height: 1.42; overflow-wrap: anywhere; }
.source h3 + h3 { margin-top: 10px; }
.source h3 a:hover { text-decoration: underline; color: var(--texte); }
.source [lang="ar"] { font-family: var(--police-ar); font-size: 18px; }
.source time { font-size: 12px; color: var(--texte-3); display: block; margin-top: 8px; }
.source .lien-externe { width: 32px; height: 40px; display: grid; place-items: center; color: var(--texte-3); }
.source .lien-externe:hover { color: var(--bleu-fonce); }

/* Carte : bascule lieux / couverture, légende sous la carte */
.outils-carte { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; gap: 16px; flex-wrap: wrap; }
.action-texte { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--bleu-fonce); }
.carte-geo { height: 460px; position: relative; border: 1px solid #DBE2E7; border-radius: 5px; overflow: hidden; background: #EAF0F4; display: grid; place-items: center; }
.carte-geo.chargee { display: block; }
.carte-geo .maplibregl-ctrl-attrib { font-size: 11px; line-height: 1.5; }
.carte-geo[data-carte="erreur"] > * { display: none; }
.carte-geo[data-carte="erreur"]::after { content: attr(data-erreur); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--texte-2); font-size: 14px; }
.legende { display: flex; gap: 10px 26px; align-items: center; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 13px; color: var(--texte-2); }
.legende > span { display: inline-flex; align-items: center; gap: 8px; }
.losange { width: 10px; height: 10px; transform: rotate(45deg); background: var(--citron); border: 1.5px solid var(--encre); display: inline-block; }
.carre { width: 11px; height: 11px; border: 2px solid var(--encre); display: inline-block; background: #fff; }
.bulle { background: #617183; width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.trait { width: 18px; border-top: 2px dashed var(--encre); display: inline-block; }
.carte-bas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding-top: 24px; }
.carte-bas h3 { font-size: 18px; margin-bottom: 12px; }
.lieu-ligne { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 14px; }
.lieu-ligne .ic { color: var(--bleu-fonce); margin-top: 3px; }
.lieu-ligne p { font-size: 12px; color: var(--texte-2); }
.etiquette-lieu { padding: 6px 10px; background: var(--citron); color: var(--encre); border: 1px solid var(--encre); border-radius: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.etiquette-lieu::before { content: ""; width: 8px; height: 8px; background: var(--citron); border: 1px solid var(--encre); transform: rotate(45deg); }
.etiquette-lieu.secondaire { background: #fff; }
.etiquette-lieu.secondaire::before { transform: none; background: #fff; }

/* Chronologie */
.chrono { list-style: none; padding: 0; margin: 0; }
.chrono li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 14px; }
.chrono time { color: var(--texte-2); font-size: 12px; }
.methode-evt { font-size: 13px; color: var(--texte-2); }

/* ---- Logos des médias (LOGO-001) ---- */
.logo-media { display: inline-block; vertical-align: middle; height: 20px; width: auto; max-width: 96px; object-fit: contain; margin-inline-end: 6px; }
.monogramme { display: inline-grid; place-items: center; vertical-align: middle; min-width: 22px; height: 22px; padding: 0 4px; margin-inline-end: 6px; border-radius: var(--rayon); background: var(--fond-2); border: 1px solid var(--filet); color: var(--texte-2); font-size: 12px; font-weight: 700; line-height: 1; }
.titre-media { display: flex; align-items: center; gap: 14px; }
.titre-media .logo-media { height: 32px; max-width: 160px; margin: 0; }
.titre-media .monogramme { height: 36px; min-width: 36px; font-size: 14px; margin: 0; }
/* Page d'un média : l'introduction est séparée de la première rubrique. */
.titre-media + .meta + .accroche { line-height: 1.6; margin-bottom: 0; }
.tete-article + .section-lecture { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--filet); }
.logo-boite { flex: none; width: 84px; display: inline-flex; align-items: center; }
.logo-boite .logo-media { max-width: 84px; margin: 0; }
.logo-boite .monogramme { margin: 0; }

/* ---- Pages média, index, textes ---- */
.historique { list-style: none; padding: 0; margin: 0; }
.historique li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-top: 1px solid var(--filet); }
.historique b { font-weight: 700; }
.index-liens { columns: 3 260px; column-gap: 36px; margin-top: 18px; }
.index-liens a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--filet); break-inside: avoid; color: var(--texte); font-size: 14px; }
.index-liens a > span[dir] { flex: 1; min-width: 0; }
.index-groupe { column-span: all; margin: 24px 0 6px; font-size: 12px; text-transform: uppercase; color: var(--texte-2); }
.fiche-page { max-width: 900px; }
.fiche-page > h1 { font-size: 32px; font-weight: 750; margin: 26px 0 12px; }
.page-texte .texte { font-size: 16px; color: var(--texte-2); line-height: 1.75; max-width: 760px; }
.page-texte .section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--filet); scroll-margin-top: 20px; }
.page-texte .section > h2 { font-size: 22px; margin-bottom: 12px; }
.page-texte .section p, .page-texte .section ul { max-width: 760px; }
.page-texte p { margin: 0 0 10px; }
.sommaire { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px; }
.sommaire a { color: var(--bleu-fonce); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.tableau th, .tableau td { text-align: start; padding: 10px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau th { font-size: 12px; text-transform: uppercase; color: var(--texte-2); border-bottom: 2px solid var(--encre); }
.a-completer { background: #FFF4C2; color: var(--encre); padding: 0 4px; border-radius: 3px; }
.page-simple { margin-top: 30px; }
.page-simple .titre-simple { font-size: 22px; margin: 0 0 6px; }
.fiche-page h2 { margin: 26px 0 10px; font-size: 20px; }

/* ---- Formulaires, compte (COMPTE-001) ---- */
.formulaire { display: grid; gap: 8px; max-width: 520px; margin: 12px 0 18px; }
.formulaire label { font-weight: 700; font-size: 14px; }
.formulaire input:not([type="checkbox"]), .formulaire select, .formulaire textarea { font-size: 15px; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: #fff; width: 100%; }
.formulaire .bouton { justify-self: start; margin-top: 4px; }
.formulaire .sr { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.case-ligne { display: flex; align-items: center; gap: 8px; font-weight: 500 !important; }
.message { min-height: 1em; margin: 0; }
.message.erreur { color: var(--erreur); }
.liste-compte { list-style: none; padding: 0; margin: 8px 0 22px; }
.liste-compte li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 14px; }

/* ---- Inscription, pied de page, navigation du téléphone ---- */
.inscription { background: var(--fond-2); margin-top: 40px; border-top: 1px solid var(--filet); }
.inscription-ligne { padding: 28px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 24px; align-items: center; }
.inscription h2 { font-size: 20px; margin-bottom: 4px; }
.inscription p { color: var(--texte-2); font-size: 14px; }
.form-inscription { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.form-inscription input { padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); min-width: 0; background: #fff; }
.form-inscription .message { grid-column: 1 / -1; }
.pied { background: var(--fond-3); padding: 34px 0 40px; color: var(--texte-2); font-size: 13px; }
.pied-ligne { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.pied-ligne img { height: 30px; width: auto; margin-bottom: 12px; }
.pied-ligne a { display: block; padding: 3px 0; color: var(--texte-2); }
.pied-ligne a:hover { color: var(--bleu-fonce); }
.pied-ligne h3 { color: var(--texte); margin: 0 0 10px; font-size: 14px; }
.pied-ligne p { margin-bottom: 6px; }
/* Comptes d'echoblic sur les réseaux (SOCIAL-003) : marque et nom, simples liens. */
.pied-ligne .titre-suivre { margin: 18px 0 8px; }
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pied-ligne .reseau { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--fond); color: var(--texte); font-weight: 600; }
.pied-ligne .reseau:hover { color: var(--bleu-fonce); border-color: var(--bleu-barre); }
.menu-plus-titre { margin: 6px 0 0; padding: 12px 18px 4px; border-top: 1px solid var(--filet); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texte-2); }
.onglets-mobile { display: none; }
.consentement { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 90; max-width: 560px; background: #fff; border: 1px solid var(--filet-fort); border-radius: var(--rayon-l); padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.consentement .boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Écrans moyens ---- */
@media (max-width: 1100px) {
  .conteneur { width: calc(100% - 48px); }
  .entete-ligne { gap: 22px; } .nav { gap: 18px; } .nav a { font-size: 13px; }
  .une-grille { gap: 24px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .rail { padding-inline-start: 20px; }
  .une h2 { font-size: 27px; } .une:not(.avec-photo) h2 { font-size: 30px; }
  .lecture { gap: 36px; grid-template-columns: minmax(0, 1fr) 260px; }
  .tete-article h1 { font-size: 34px; }
}
@media (max-width: 1000px) {
  /* Téléphone et tablette : filtres en plein écran, titre et boutons fixes, contenu qui défile (FILTRE-002). */
  body.filtres-ouverts .bande-filtres { position: fixed; inset: 0; z-index: 80; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--fond); }
  body.filtres-ouverts { overflow: hidden; }
  .tete-filtres { padding: 10px 16px; }
  .filtres-contenu { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; overscroll-behavior: contain; }
  .colonnes-filtres { grid-template-columns: minmax(0, 1fr); }
  .pied-filtres { position: static; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--fond); }
  .pied-filtres-actions .bouton { min-height: 46px; }
  .champ-principal { max-width: none; }
  .liste-breves { grid-template-columns: minmax(0, 1fr); }
  .liste-breves .breve:nth-last-child(2) { border-bottom: 1px solid var(--filet); }
  .lecture { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .colonne { margin-bottom: 32px; }
  .carte-bas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .inscription-ligne { grid-template-columns: minmax(0, 1fr); }
  .pied-ligne { grid-template-columns: 1fr 1fr; }
}

/* ---- Téléphone ---- */
@media (max-width: 760px) {
  .conteneur { width: calc(100% - 32px); }
  body { font-size: 14px; }
  .entete-ligne { height: 60px; gap: 10px; justify-content: space-between; }
  .logo img { height: 28px; }
  .nav, .langues .sep { display: none; }
  .entete-actions { gap: 2px; }
  .entete .bouton-icone { width: 40px; height: 40px; }
  .entete .lien-compte { display: none; }
  .langues { padding-inline-start: 8px; margin-inline-start: 2px; }
  .langues a { padding: 6px 5px; }
  .page-tete { padding: 18px 0 14px; align-items: center; }
  .page-tete .surtitre { display: none; }
  .page-tete h1 { font-size: 24px; gap: 13px; }
  .page-date { font-size: 12px; max-width: 120px; }
  .ligne-themes { padding: 12px 0 16px; gap: 10px; }
  .theme { height: 36px; font-size: 13px; padding: 0 12px; }
  /* Téléphone : toutes les rubriques à la suite, la dernière coupée par un fondu pour montrer qu'on peut faire défiler ;
     bouton « Filtres » avec son libellé, hors de la zone qui défile (rapport du 12/10, constat 12). */
  .theme-suite { display: inline-flex; }
  .themes-plus { display: none; }
  .themes { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  [dir="rtl"] .themes { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
  .bouton-filtres { padding: 0 12px; min-height: 44px; }
  .ligne-resume { align-items: flex-start; }
  .une-grille { grid-template-columns: minmax(0, 1fr); }
  .une .photo .cadre { aspect-ratio: 2.1; }
  .une h2, .une:not(.avec-photo) h2 { font-size: 23px; line-height: 1.25; }
  .accroche { font-size: 14px; line-height: 1.7; }
  .rail { border-inline-start: 0; border-top: 1px solid var(--filet); padding: 18px 0 0; margin-top: 22px; }
  .breve { grid-template-columns: minmax(0, 1fr) 78px; gap: 16px; padding: 16px 0; }
  .breve .photo .cadre { width: 78px; height: 78px; }
  .grille-recul { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .recul.avec-photo { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
  .recul .photo .cadre { width: 100px; height: 95px; aspect-ratio: auto; margin: 0; }
  .recul h3 { font-size: 16px; }
  .pub { margin: 24px auto 10px; }
  .pub-cadre { width: min(320px, 100%); height: 100px; }
  .fil-ariane { font-size: 12px; padding: 16px 0 12px; }
  .tete-article h1 { font-size: 26px; line-height: 1.23; }
  .tete-article .accroche { font-size: 14px; }
  .outils-article { margin: 14px 0 16px; }
  .outils-article .outil { width: 44px; padding: 0; justify-content: center; }
  .outils-article .outil .libelle { display: none; }
  .photo-article .cadre, .photo-article.portraits-2 .cadre, .photo-article.portraits-3 .cadre { height: 180px; }
  .ancres .conteneur { gap: 22px; }
  .ancres a { min-height: 50px; font-size: 13px; }
  .lecture { padding-top: 22px; }
  .section-lecture > h2 { font-size: 21px; }
  .points li { font-size: 15px; padding-inline-start: 34px; }
  .grand-impact strong { font-size: 36px; }
  .chiffres { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .chiffres strong { font-size: 19px; }
  .source { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; padding: 18px 0; }
  .source .logo-boite-source { width: 34px; height: 34px; }
  .source h3, .source [lang="ar"] { font-size: 16px; }
  .source .lien-externe { width: 20px; }
  .carte-geo { height: 360px; border-radius: 0; border-inline: 0; margin-inline: -16px; }
  .chrono li { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .index-liens { columns: 1; }
  .fiche-page > h1 { font-size: 26px; }
  .form-inscription { grid-template-columns: minmax(0, 1fr); }
  .pied { padding-bottom: 100px; }
  .pied-ligne { grid-template-columns: minmax(0, 1fr); }
  main { padding-bottom: 24px; }
  /* Barre d'onglets fixe en bas de l'écran */
  .onglets-mobile { position: fixed; bottom: 0; inset-inline: 0; height: 64px; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--filet); display: flex; align-items: stretch; justify-content: space-around; z-index: 60; }
  .onglets-mobile a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--texte-2); position: relative; }
  .onglets-mobile a.actif { color: var(--bleu-fonce); font-weight: 700; }
  .onglets-mobile a.actif::before { content: ""; width: 24px; height: 3px; position: absolute; top: 0; background: var(--bleu); }
  .onglets-mobile .ic { width: 21px; height: 21px; }
}

/* ---- Arabe : lecture de droite à gauche (LANG-002) ---- */
[dir="rtl"] body { font-family: var(--police-ar), var(--police); }
[dir="rtl"] .rubrique, [dir="rtl"] .surtitre { letter-spacing: 0; }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Index des pays et des médias, page d'un média */
.intro-index { margin-top: 16px; }
.champ-index { max-width: 420px; margin: 0; }
.titre-section-media { font-size: 20px; margin-bottom: 8px; }

/* Sujet à la une sans photo : trois titres d'origine en langues différentes (SITE-003, IMG-013) */
.une-titres { list-style: none; margin: 24px 0 0; padding: 0; border-top: 3px solid var(--encre); }
.une-titres li { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.une-titres .ligne-media { align-items: center; margin-bottom: 4px; }
.une-titres .ligne-media .logo-media { height: 16px; max-width: 64px; margin: 0; }
.une-titres .ligne-media .monogramme { height: 18px; min-width: 18px; font-size: 12px; margin: 0; }
.une-titres a { display: block; font-size: 17px; font-weight: 600; line-height: 1.42; color: var(--texte); }
.une-titres a:hover { color: var(--bleu-fonce); }
.une-titres a[lang="ar"] { font-family: var(--police-ar); }
.pub + .ligne-edito { border-top: 0; margin-top: 0; }
@media (max-width: 760px) {
  .une-grille { gap: 0; }
  .rail { margin-top: 8px; }
  .ligne-edito h2 { font-size: 19px; }
  .ligne-edito .lien-fleche { font-size: 12px; text-align: end; }
  .une-titres a { font-size: 16px; }
}
.lecture .pub { border-top: 0; margin: 0 0 30px; padding-top: 0; }

/* Portraits (IMG-009) : format vertical à côté du titre, jamais une bannière qui couperait le visage */
.une.avec-portrait { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
.une.avec-portrait .une-texte .meta { margin-top: 4px; }
.une.avec-portrait h2 { font-size: 34px; line-height: 1.2; }
.photo-portrait .cadre { aspect-ratio: 4 / 5; }
.une.avec-portrait .une-titres { grid-column: 1 / -1; }
.tete-evt.avec-portrait { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: start; }
.tete-evt.avec-portrait .photo-portrait { margin-top: 12px; }
.recul.avec-portrait { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 16px; border-top: 3px solid var(--encre); padding-top: 14px; }
.recul.avec-portrait .photo .cadre { width: 86px; height: 86px; }
@media (max-width: 760px) {
  .une.avec-portrait, .tete-evt.avec-portrait { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .une.avec-portrait .photo-portrait, .tete-evt.avec-portrait .photo-portrait { order: -1; }
  .photo-portrait .cadre { aspect-ratio: 4 / 3; }
  .une.avec-portrait h2 { font-size: 23px; }
  .recul.avec-portrait { grid-template-columns: minmax(0, 1fr) 78px; }
  .recul.avec-portrait .photo .cadre { width: 78px; height: 78px; }
}
.source .logo-boite-source .logo-media { max-width: calc(100% - 6px); }

/* Photos d'un fait difficile (IMG-015) : floutées derrière un avertissement, ouvertes d'un clic ; cartes en entier. */
.photo .cadre { position: relative; }
.photo.difficile:not(.devoilee) img { filter: blur(26px) grayscale(.5); transform: scale(1.1); }
.devoiler { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; border: 0; background: rgba(24, 30, 35, .55); color: #fff; font: inherit; font-size: 14px; text-align: center; cursor: pointer; }
.devoiler b { margin-top: 4px; padding: 6px 14px; border: 1px solid #fff; border-radius: var(--rayon); font-size: 13px; }
.devoiler:hover b, .devoiler:focus-visible b { background: #fff; color: var(--encre); }
.photo.devoilee .devoiler { display: none; }
.photo-carte .cadre { background: #fff; }
.photo-carte img { object-fit: contain; }

/* Résumé rédigé (RESUME-003) : au-dessus des repères, avec sa mention. */
.resume-redige { margin: 4px 0 22px; padding: 16px 18px; border-inline-start: 3px solid var(--bleu); background: var(--fond-2); border-radius: 0 var(--rayon) var(--rayon) 0; }
.resume-redige .resume-texte { margin: 0 0 10px; font-size: 17px; line-height: 1.6; }
.resume-redige .mention-ia { margin: 0; }

/* ---- COMPTE-002 : confort de lecture (thème sombre, taille du texte), écran du compte, Ma une ---- */
[data-theme="sombre"] {
  --texte: #E7ECF0; --texte-2: #B7C1CA; --texte-3: #9AA6B1;
  --fond: #12171B; --fond-2: #1A2127; --fond-3: #212930; --filet: #2D363E; --filet-fort: #3C4650;
  --bleu: #3D8BFF; --bleu-fonce: #7DB0FF; --bleu-voile: #15253A; --bleu-pale: #1D3350; --bleu-barre: #2F4E78;
  color-scheme: dark;
}
[data-theme="sombre"] img:not(.logo img) { filter: brightness(.92); }
[data-taille="grande"] body { zoom: 1.1; }
[data-taille="tres_grande"] body { zoom: 1.22; }
.reserve-connecte { display: none; }
body.lecteur-connecte .reserve-connecte { display: inline; }
.carte-accueil { border: 1px solid var(--filet); border-radius: var(--rayon-l); padding: 18px; margin: 18px 0 8px; background: var(--fond-2); }
.carte-accueil h2 { font-size: 20px; margin-bottom: 8px; }
.puces-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.puce-choix { border: 1px solid var(--filet-fort); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--fond); }
.puce-choix[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.cases-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 14px; border: 0; padding: 0; margin: 10px 0; }
.cases-grille legend, fieldset > legend { font-weight: 600; margin-bottom: 6px; }
fieldset { border: 0; padding: 0; margin: 12px 0; }
.ligne-ajout { display: flex; gap: 8px; align-items: center; }
.ligne-ajout input { flex: 1; min-width: 0; }
.ma-une { margin-bottom: 26px; }

/* ---- FIDEL-001 : pastille « Nouveau », invitation à installer, écoute ---- */
.pastille-nouveau { background: var(--citron); color: var(--encre); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.invitation-installer { position: fixed; inset-inline: 16px; bottom: 84px; z-index: 70; max-width: 420px; margin-inline: auto; display: flex; gap: 12px; align-items: center;
  background: var(--fond); color: var(--texte); border: 1px solid var(--filet-fort); border-radius: var(--rayon-l); padding: 12px 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, .2); }
.invitation-installer img { border-radius: 9px; flex: none; }
.invitation-installer div { flex: 1; min-width: 0; font-size: 13px; }
.invitation-installer p { margin: 2px 0 0; color: var(--texte-2); }
.bouton-ecouter { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 13px; }
.montee { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--bleu-fonce); }
.chrono li.seuil > div { font-weight: 700; color: var(--bleu-fonce); }

/* Connexion par Google, Apple, Facebook (CONNEXION-001) : couleurs des chartes des fournisseurs ; logo « G » de Google
   posé (charte « Sign in with Google ») ; ceux d'Apple et de Facebook à poser à leur activation. */
.connexion-externe { display: grid; gap: 10px; max-width: 360px; margin: 14px 0 6px; }
.bouton-externe { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--rayon); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.bouton-externe[hidden] { display: none; }
.bouton-externe.google { background: #fff; color: #1F1F1F; border-color: #747775; }
.bouton-externe.apple { background: #000; color: #fff; }
.bouton-externe.facebook { background: #1877F2; color: #fff; }
.bouton-externe:hover { filter: brightness(.95); text-decoration: none; }
.bouton-externe.google:hover { background: #F8F9FA; filter: none; }
.separateur-ou { display: flex; align-items: center; gap: 10px; color: var(--texte-3); font-size: 13px; margin: 6px 0 0; }
.separateur-ou::before, .separateur-ou::after { content: ""; flex: 1; border-top: 1px solid var(--filet); }

/* ---- Audit externe du 11/10/2026, bloc 1 (AUDIT-001) ---- */
/* Écho médiatique (ECHO-001) : la pastille ouvre une courte explication, au clic comme au clavier. */
button.pastille-impact { border: 0; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
button.pastille-impact:hover, button.pastille-impact[aria-expanded="true"] { background: var(--bleu-pale); }
button.pastille-impact:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.pastille-impact .prov { font-weight: 500; }
.pastille-impact .prov::before { content: "· "; }
.bulle-echo { position: absolute; z-index: 95; background: var(--fond); color: var(--texte); border: 1px solid var(--filet-fort); border-radius: var(--rayon-l);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16); padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.bulle-echo b { font-size: 14px; }
.bulle-echo p { margin: 6px 0; }
/* Mise à jour en retard (constat 03). */
.bandeau-info.retard { margin-top: 16px; margin-bottom: 0; background: #FFF6E0; border-color: #F0D58A; }
/* Filtres en deux niveaux (constat 32). */
.filtres-avances { margin-top: 12px; border-top: 1px solid var(--filet); }
.filtres-avances > summary { cursor: pointer; padding: 12px 0 6px; font-weight: 700; color: var(--bleu-fonce); }
/* Cartes des séismes et des cyclones : affichées en entier et plus grandes (constat 17). */
.une .photo-carte .cadre, .photo-article.photo-carte .cadre, .recul .photo-carte .cadre { aspect-ratio: auto; height: auto; }
.une .photo-carte img, .photo-article.photo-carte img, .recul .photo-carte img { height: auto; max-height: 460px; width: auto; max-width: 100%; display: block; margin-inline: auto; }
/* Menu « Plus » de la barre du téléphone (constat 25). */
.onglet-plus { display: none; }
@media (max-width: 760px) {
  /* Libellés cachés à l'œil mais lus par les lecteurs d'écran (constat 26). */
  .outils-article .outil .libelle { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* PUB-004 : le bandeau fixe se place au-dessus de la barre du bas, jamais dessus (constat 21). */
  .pub-ancre:not(.fermee) { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .une .photo-carte img, .photo-article.photo-carte img { max-height: 380px; }
  .onglet-plus { display: flex; flex: 1; position: relative; }
  .onglet-plus > summary { list-style: none; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12px; color: var(--texte-2); cursor: pointer; position: relative; }
  .onglet-plus > summary::-webkit-details-marker { display: none; }
  .onglet-plus > summary .ic { width: 21px; height: 21px; }
  .onglet-plus > summary.actif { color: var(--bleu-fonce); font-weight: 700; }
  .onglet-plus > summary.actif::before { content: ""; width: 24px; height: 3px; position: absolute; top: 0; background: var(--bleu); }
  .menu-plus { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 8px; min-width: 220px; background: var(--fond); border: 1px solid var(--filet-fort);
    border-radius: var(--rayon-l); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); padding: 6px 0; display: grid; }
  .onglets-mobile .menu-plus a { display: block; flex: none; padding: 11px 18px; font-size: 15px; color: var(--texte); text-align: start; }
  .onglets-mobile .menu-plus a:hover, .onglets-mobile .menu-plus a:focus-visible { background: var(--fond-2); }
  .menu-plus { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Chronologie : la date, puis l'heure locale à la ligne (data-sep « \n »). */
.chrono time { white-space: pre-line; }
/* Tableaux : défilement dans leur cadre, jamais de page plus large que l'écran (constat 24). */
.tableau-defile { overflow-x: auto; max-width: 100%; margin: 8px 0; }
.tableau-defile:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.tableau-defile .tableau { margin: 0; min-width: 480px; }
/* Très petits écrans (320 px) : l'accès aux favoris passe par le menu « Plus » ; l'en-tête tient dans l'écran. */
@media (max-width: 360px) { .entete .favoris { display: none; } }

/* ==== Corrections visuelles du 13/10/2026 (VISUEL-001, contrôle visuel des 12 et 13/10) ====
   Logo, palette et contenus inchangés : bleu pour les actions et les liens, citron en accent, anthracite pour la
   structure. Mêmes arrondis et mêmes espacements ; animations courtes, coupées si le lecteur le demande (plus haut). */

/* 1. « Vos remarques » : jamais par-dessus un panneau, une fenêtre, une bulle ou la carte en plein écran ; sur
   téléphone, il n'est plus flottant (il reste dans le menu « Plus » et le pied de page). Sur ordinateur, le pied de page
   garde une marge pour que le bouton ne couvre pas ses derniers liens. */
body.filtres-ouverts .bouton-remarques, body.carte-plein-ecran .bouton-remarques, body:has(dialog[open]) .bouton-remarques,
body:has(.bulle-echo) .bouton-remarques, body:has(.consentement:not([hidden])) .bouton-remarques { display: none; }
@media (min-width: 761px) { .pied { padding-bottom: 84px; } }
@media (max-width: 760px) { .bouton-remarques { display: none; } }

/* 2. Bulle de l'écho : bouton de fermeture, apparition discrète (vers le bas, ou vers le haut si elle s'ouvre au-dessus). */
.bulle-echo { padding-inline-end: 44px; animation: apparaitre-bas .14s ease-out; }
.bulle-echo.au-dessus { animation-name: apparaitre-haut; }
.bulle-fermer { position: absolute; top: 4px; inset-inline-end: 4px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rayon); color: var(--texte-2); }
.bulle-fermer:hover { background: var(--fond-2); color: var(--texte); }
@keyframes apparaitre-bas { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes apparaitre-haut { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  /* 3. Barre du bas : cinq colonnes égales, libellés courts sur une ligne, zones tactiles d'au moins 56 px de haut,
     marge pour la barre du système du téléphone. */
  .onglets-mobile { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: auto; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); }
  .onglets-mobile > a, .onglet-plus > summary { min-width: 0; min-height: 56px; padding: 6px 2px 4px; }
  .onglets-mobile > a > span, .onglet-plus > summary > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
  .onglet-plus { min-width: 0; }
}
@media (max-width: 360px) {
  .onglets-mobile > a, .onglet-plus > summary { padding-inline: 0; }
  .onglets-mobile > a > span, .onglet-plus > summary > span { letter-spacing: -.02em; }
}
@media (max-width: 760px) {

  /* 7. Menu « Plus » : en-tête avec fermeture, réseaux en une rangée d'icônes, apparition discrète. */
  .onglet-plus[open] .menu-plus { animation: apparaitre-haut .14s ease-out; }
  .menu-plus { padding: 0 0 8px; }
  .menu-plus-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 2px; padding-inline: 18px 4px;
    border-bottom: 1px solid var(--filet); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texte-2); }
  .menu-plus-fermer { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rayon); color: var(--texte); }
  .menu-plus-fermer:hover { background: var(--fond-2); }
  .menu-plus-titre { margin: 4px 0 0; padding: 10px 18px 6px; }
  .reseaux-menu { display: flex; gap: 10px; padding: 2px 18px 4px; }
  .onglets-mobile .menu-plus a.reseau-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--filet-fort); border-radius: 50%; color: var(--texte); }
  .onglets-mobile .menu-plus a.reseau-menu:hover, .onglets-mobile .menu-plus a.reseau-menu:focus-visible { background: var(--bleu-voile); color: var(--bleu-fonce); border-color: var(--bleu-pale); }
}
.menu-plus-tete { display: none; }
@media (max-width: 760px) { .menu-plus-tete { display: flex; } }

/* 5. Actions après filtrage : critères et « Tout effacer » sur une rangée, « Créer une alerte » et « Partager » en
   boutons avec leur pictogramme sur la suivante ; plus aucun point séparateur isolé. */
.pastilles-filtres { gap: 8px 10px; }
.actions-recherche { flex-basis: 100%; gap: 8px; margin-top: 2px; }
.action-recherche { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  background: var(--fond); color: var(--bleu-fonce); font-size: 13px; font-weight: 600; }
.action-recherche:hover { background: var(--bleu-voile); border-color: var(--bleu-pale); }
.action-recherche .ic { width: 16px; height: 16px; }
.action-recherche.a-confirmer { background: var(--citron); border-color: var(--citron); color: var(--encre); }
.action-recherche.reserve-connecte { display: none; }
body.lecteur-connecte .action-recherche.reserve-connecte { display: inline-flex; }

/* 8. Haut des listes sur téléphone : date et mise à jour sur une ligne sous le titre, compteur et tri sur une même
   ligne, espaces resserrés ; les sujets apparaissent plus tôt. Rien n'est retiré. */
@media (max-width: 760px) {
  .page-tete { flex-wrap: wrap; align-items: flex-end; row-gap: 4px; padding: 14px 0 10px; }
  .page-tete h1 { font-size: 22px; }
  .page-date { flex-basis: 100%; max-width: none; text-align: start; font-size: 13px; }
  .page-date br { display: none; }
  .page-date .point-direct { margin-inline: 10px 6px; }
  .ligne-themes { padding: 10px 0 12px; }
  .ligne-resume { flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0 0 10px; }
  .ligne-resume .resume-liste { flex: 1; min-width: 0; }
  .choix-tri { flex: none; }
  .choix-tri > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .choix-tri .choix { max-width: 150px; }
  .pastilles-filtres { margin: 0 0 14px; }
}

/* 6. Tableaux sur un petit écran : chaque ligne devient une fiche « colonne : valeur » ; toutes les colonnes restent
   lisibles, sans défilement de côté. */
@media (max-width: 560px) {
  .tableau-defile { overflow: visible; }
  .tableau-defile .tableau { min-width: 0; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: 10px 0; border-bottom: 1px solid var(--filet); }
  .tableau td { display: grid; grid-template-columns: minmax(6.5em, 34%) minmax(0, 1fr); gap: 10px; padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  .tableau td::before { content: attr(data-label); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texte-2); padding-top: 2px; }
  .tableau td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .tableau td[data-label=""]::before { display: none; }
}

/* 11. Sommaire des longues pages : une liste numérotée et aérée, sur deux colonnes sur ordinateur. */
.sommaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: 760px; margin: 16px 0 8px; padding: 4px 0;
  border-block: 1px solid var(--filet); counter-reset: sommaire; }
.sommaire a { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; font-weight: 600; counter-increment: sommaire; }
.sommaire a::before { content: counter(sommaire, decimal-leading-zero); flex: none; min-width: 1.8em; font-size: 12px; font-weight: 700; color: var(--texte-3); }
.sommaire a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .sommaire { grid-template-columns: minmax(0, 1fr); } .sommaire a { padding: 7px 0; } }

/* 10. Petits textes : 13 px au moins pour les dates, lieux, compteurs et crédits (12 px pour les seules étiquettes en
   capitales) ; arabe un peu plus grand ; titres coupés de façon équilibrée. */
.tres-petit, .credit, .attribution, .compte, .compte-sources, .note-colonne, .chiffres span, .lieu-ligne p, .chrono time,
.source time, .ligne-media, .mention-ia, .pastille-impact, .legende .aide-disques { font-size: 13px; }
.meta, .credit, .attribution { line-height: 1.5; }
[dir="rtl"] :is(.meta, .tres-petit, .credit, .attribution, .compte, .page-date, .couverture, .note-colonne, .chiffres span, .lieu-ligne p,
.chrono time, .source time, .ligne-media, .mention-ia, .pastille-impact) { font-size: 14px; line-height: 1.6; }
h1, h2, h3 { text-wrap: balance; }

/* 4 et 9. Carte : disques de la couverture (contour, chiffres contrastés, liste au toucher), carte plus large sur
   ordinateur quand la colonne de droite le permet, plein écran sur téléphone, crédits repliés au premier geste. */
.disque-pays { cursor: pointer; border-radius: 50%; }
.disque-pays:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.liste-disques { list-style: none; margin: 0; padding: 0; min-width: 160px; font-size: 13px; }
.liste-disques li { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border-bottom: 1px solid var(--filet); }
.liste-disques li.choisi { font-weight: 700; }
.titre-disques { margin: 0 0 4px; padding-inline-end: 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texte-2); }
.legende .aide-disques { color: var(--texte-3); flex-basis: 100%; }
.actions-carte { display: inline-flex; gap: 6px 18px; flex-wrap: wrap; }
#agrandir-carte { display: none; }
.lecture { --col-lecture: 300px; --gap-lecture: 72px; }
@media (max-width: 1100px) { .lecture { --col-lecture: 260px; --gap-lecture: 36px; } }
@media (min-width: 1001px) {
  #carte.carte-large .outils-carte, #carte.carte-large .carte-geo, #carte.carte-large .legende { margin-inline-end: calc(-1 * (var(--col-lecture) + var(--gap-lecture))); }
  #carte.carte-large .carte-geo { height: 540px; }
}
.fermer-carte { position: absolute; z-index: 5; top: calc(10px + env(safe-area-inset-top)); inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--encre); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.fermer-carte:hover { background: var(--encre-2); color: #fff; }
.carte-geo.plein-ecran { position: fixed; inset: 0; z-index: 90; width: auto; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
body.carte-plein-ecran { overflow: hidden; }
@media (max-width: 760px) {
  #agrandir-carte:not([hidden]) { display: inline-flex; }
  .outils-carte { gap: 8px 12px; }
}

/* CNDP-002 : comptes fermés jusqu'au récépissé de la CNDP ; les actions liées à un compte sont masquées. */
[data-comptes-fermes] .actions-recherche, [data-comptes-fermes] [data-remarques] { display: none !important; }
/* COMPTES-003 : choix de la fréquence à la première alerte. */
.choix-frequence { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-basis: 100%; margin: 8px 0; }
.choix-frequence p { flex-basis: 100%; margin: 0; font-size: 14px; }