/* BookRadar — feuille de style de l'interface web sur mesure.
   Toutes les valeurs proviennent du brief docs/BRIEF-frontend-bookradar.md (§4 « valeurs de
   design exactes »). Ne pas dériver : ces couleurs / tailles sont normatives. */

:root {
  /* Marque — valeurs de la maquette validée (design-F-bandeaux-amazon.html). */
  --encre: #131921;           /* BANDEAU 1 (barre haute, façon Amazon) */
  --marine: #232F3E;          /* BANDEAU 2 (navigation) + titres */
  --marine-clair: #37475A;    /* survol de nav, bandeau « sous-angles » */
  --orange: #FF9900;          /* soulignement de l'onglet actif — JAMAIS décoratif */
  --orange-btn: #FEBD69;      /* fond du bouton d'ACTION */
  --orange-fonce: #E57E00;    /* bord du bouton d'action */
  --orange-fonce-2: #7a4a00;
  --orange-fonce-3: #3D2600;  /* texte du bouton d'action */
  /* Couleurs des bandeaux de carte (une par critère) */
  --bleu: #1668C4;            /* Demande */
  --cramoisi: #A62B41;        /* Espace disponible */
  --vert: #12805A;            /* Émergence */
  /* Surfaces & texte */
  --fond-page: #F5F7F8;
  --carte: #FFFFFF;
  --champ: #F7F9FB;
  --texte: #232F3E;           /* texte principal (devient clair en sombre) */
  --txt-doux: #3F4A57;
  --txt-secondaire: #5f6b7a;
  --txt-discret: #8D97A3;
  --bordure: #E3E7EB;
  --bleu-amazon: #185FA5;
  /* Fiche */
  --verdict-fond: #FFF7ED;
  --barre-piste: #EDF1F5;
}

/* Mode SOMBRE (bascule 🌙 persistée) : l'orange et le bandeau marine restent identiques ;
   les badges pastel (notes, verdict) gardent leurs couleurs (chips lisibles sur sombre). */
html[data-theme="sombre"] {
  --fond-page: #141B24;
  --carte: #202B38;
  --champ: #1A2430;
  --texte: #E7EAEE;
  --txt-doux: #C6CFD8;
  --txt-secondaire: #A9B4C0;
  --txt-discret: #8A96A3;
  --bordure: rgba(255, 255, 255, .10);
  --bleu-amazon: #6FB0F0;
  --barre-piste: rgba(255, 255, 255, .12);
  /* Les bandeaux de carte sont ÉCLAIRCIS en sombre : sur fond foncé, les teintes
     pleines de la maquette perdent leur lisibilité. Les rôles restent identiques. */
  --bleu: #2E7FD4;
  --cramoisi: #C4405A;
  --vert: #17976B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 20px 40px;
}

.orange { color: var(--orange); }

/* ================= BANDEAU (hero) — identique à l'original ================= */
.br-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  min-height: 146px;
  border-radius: 14px;
  margin: 0 0 6px;
  overflow: hidden;
  background-color: var(--marine);
  /* Décor : WebP (30 Ko) avec REPLI PNG (886 Ko) pour les navigateurs anciens.
     Deux déclarations successives : celle qui suit écrase la première, et un navigateur
     qui ne comprend pas `image-set()` l'ignore purement et simplement — il garde le PNG.
     `--hero` (posé en ligne dans le HTML) reste le repli. */
  background-image:
    linear-gradient(90deg, rgba(35,47,62,.97) 0%, rgba(35,47,62,.86) 30%,
                    rgba(35,47,62,.55) 62%, rgba(35,47,62,.30) 100%),
    var(--hero);
  background-image:
    linear-gradient(90deg, rgba(35,47,62,.97) 0%, rgba(35,47,62,.86) 30%,
                    rgba(35,47,62,.55) 62%, rgba(35,47,62,.30) 100%),
    image-set(url('/assets/hero-bg.webp') type('image/webp'),
              url('/assets/hero-bg.png') type('image/png'));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  box-shadow: 0 2px 12px rgba(35,47,62,.28);
}
/* <picture> ne doit PAS devenir l'enfant flex à la place de l'image : `display:contents`
   efface sa boîte, l'<img> reste l'enfant direct et toutes les règles existantes
   (.br-mark, .br-footer img) s'appliquent à l'identique. */
picture { display: contents; }

.br-mark {
  height: 56px; width: auto; flex: 0 0 auto; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.br-titre { display: flex; flex-direction: column; justify-content: center; }
/* Bascule clair/sombre (en haut à droite du bandeau) — persistée en localStorage. */
.theme-toggle {
  margin-left: auto; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 18px; cursor: pointer;
  transition: background .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.22); }
/* Bascule de langue FR | EN (même famille que la bascule de thème). La bascule de
   thème garde margin-left:auto ; celle de langue se cale juste avant elle. */
.lang-toggle {
  width: auto; padding: 0 12px; font-size: 13px; font-weight: 800;
  letter-spacing: .4px; display: inline-flex; align-items: center; gap: 6px;
}
.lang-toggle .lg { opacity: .5; transition: opacity .15s ease; }
.lang-toggle .lg.actif { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-toggle .lg-sep { opacity: .4; font-weight: 400; }
.br-nom {
  color: #fff; font-size: 32px; font-weight: 800; line-height: 1.1;
  letter-spacing: .2px; text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.br-sous {
  color: #e6ebf1; font-size: 15px; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.sous-bandeau { color: var(--txt-secondaire); font-size: 13px; margin: 0 2px 18px; }

/* ================= CARTE ================= */
.carte {
  background: var(--carte);
  border: 0.5px solid var(--bordure);
  border-radius: 16px;
  box-shadow: 0 12px 30px -18px rgba(35,47,62,.35);
  padding: 20px;
}

/* ================= EN-TÊTE DE SECTION (eyebrow + titre) ================= */
.sec-head { margin: 26px 0 12px; }
.eyebrow {
  color: var(--orange-fonce);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 12px;
}
.sec-title {
  color: var(--texte);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.4px;
  margin-top: 3px;
}
/* Badge de FORMAT : dit en clair sur quoi porte l'écran (ebook / broché / low-content). */
.badge-format {
  /* Neutre : l'orange est réservé aux ACTIONS et au soulignement de l'onglet actif. */
  display: inline-block; margin-top: 10px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  color: var(--txt-secondaire);
  font-weight: 700; font-size: 12.5px;
  letter-spacing: .01em;
  padding: 5px 12px; border-radius: 999px;
}
.kindle-note { color: var(--txt-secondaire); font-size: 13px; margin: 8px 2px 0; }
.kindle-note .tag-rayon {
  font-weight: 700; color: var(--texte);
  background: var(--barre-piste); border-radius: 5px; padding: 1px 6px;
  font-size: 12px;
}

/* Sélecteur de FORMAT (segmented) : Ebook Kindle / Livre broché / Low-content. */
/* Intitulé au-dessus du sélecteur : guide l'utilisateur (mêmes deux modes). */
.seg-intitule { margin: 16px 0 0; }
.seg-label { font-weight: 700; font-size: 14px; color: var(--texte); }
.seg-aide { font-size: 12.5px; color: var(--txt-discret); margin-top: 1px; }
.seg { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.seg-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0.5px solid var(--bordure);
  background: var(--carte);
  border-radius: 10px; padding: 9px 16px;
  cursor: pointer; font-family: inherit; text-align: left;
}
.seg-btn strong { color: var(--texte); font-weight: 700; font-size: 14px; }
.seg-btn span { color: var(--txt-discret); font-size: 12px; }
.seg-btn.actif {
  border-color: var(--orange);
  background: var(--verdict-fond);
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.seg-btn.actif strong { color: var(--orange-fonce-3); }
.seg-btn.actif span { color: var(--orange-fonce-2); }

/* ================= ACCORDÉON (glossaire, domaines) ================= */
.accordeon { padding: 0; margin: 0 0 6px; }
.accordeon > summary {
  cursor: pointer; list-style: none;
  font-weight: 700; color: var(--texte);
  padding: 14px 20px;
}
.accordeon > summary::-webkit-details-marker { display: none; }
.accordeon > summary::after { content: "▾"; float: right; color: var(--txt-discret); }
.accordeon[open] > summary::after { content: "▴"; }
.accordeon-corps { padding: 0 20px 18px; color: var(--texte); }
.accordeon-corps ul { padding-left: 20px; }
.accordeon-corps li { margin: 6px 0; color: var(--txt-doux); }

/* ============ GLOSSAIRE structuré (guide du débutant) — valeurs exactes ============
   Les cartes suivent le thème (var(--carte)/var(--bordure)) ; les pastilles et encadrés
   colorés gardent leurs couleurs (chips à texte foncé, lisibles clair ET sombre). */
.gl-titre { font-size: 20px; font-weight: 800; color: var(--texte); margin: 4px 0 2px; }
.gl-sous { font-size: 14px; color: var(--txt-secondaire); margin: 0 0 14px; }

.gl-intro {
  background: #EAF1FB; border-left: 3px solid #185FA5; border-radius: 8px;
  padding: 12px 14px; font-size: 14px; color: #123c66; margin: 0 0 16px;
}

.gl-h { font-size: 13px; font-weight: 700; color: var(--texte); margin: 16px 0 8px; }

.gl-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pastille {
  font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 99px;
  white-space: nowrap;
}
.gl-note-A { background: #E7F3E1; color: #3B6D11; }
.gl-note-B { background: #EAF3DE; color: #3B6D11; }
.gl-note-C { background: #FAEEDA; color: #854F0B; }
.gl-note-D { background: #FAECE7; color: #993C1D; }
.gl-note-E { background: #FCEBEB; color: #A32D2D; }

.gl-echelle { display: flex; border-radius: 8px; overflow: hidden; }
.gl-seg { flex: 1; padding: 8px; font-size: 12.5px; font-weight: 600; text-align: center; }
.gl-seg.rouge { background: #FCEBEB; color: #A32D2D; }
.gl-seg.ambre { background: #FAEEDA; color: #854F0B; }
.gl-seg.vert  { background: #E7F3E1; color: #3B6D11; }

.gl-cartes { display: flex; flex-direction: column; gap: 11px; margin: 8px 0 0; }
.gl-carte {
  display: flex; align-items: center; gap: 13px;
  background: var(--carte); border: 0.5px solid var(--bordure);
  border-radius: 12px; padding: 14px 16px;
}
.gl-carte.avant { border: 2px solid #FF9900; }
.gl-ico {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  background: #FFF7ED; color: #e57e00;
  display: flex; align-items: center; justify-content: center;
}
.gl-ico svg { width: 20px; height: 20px; }
.gl-ico.plein { background: #FF9900; color: #3d2600; }
.gl-corps { flex: 1; min-width: 0; }
.gl-carte-titre { font-size: 15px; font-weight: 700; color: var(--texte); }
.gl-question { color: var(--txt-discret); font-weight: 500; }
.gl-exp { font-size: 13px; color: var(--txt-secondaire); margin-top: 2px; }
.gl-tag-cle {
  background: #FFF3E0; color: #7a4a00; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px;
}
.gl-exemples { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: 0 0 auto; }
.gl-ex { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.gl-ex.vert  { background: #E7F3E1; color: #3B6D11; }
.gl-ex.ambre { background: #FAEEDA; color: #854F0B; }
.gl-ex.rouge { background: #FCEBEB; color: #A32D2D; }

.gl-exemple-box { background: #232F3E; border-radius: 12px; padding: 16px 18px; margin: 16px 0 0; }
.gl-ex-eyebrow {
  color: #FF9900; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.gl-ex-terme { color: #fff; font-size: 15px; font-weight: 700; }
.gl-ex-scores { color: #c3ccd6; font-size: 13.5px; margin-top: 6px; }
.gl-ex-scores strong { color: #fff; }
.gl-ex-verdict { color: #c3ccd6; font-size: 13px; margin-top: 6px; }

.gl-note-bas { font-size: 12.5px; color: #98a2b0; margin: 14px 0 2px; }

/* Glossaire déplacé en BAS de page : présence discrète (l'aide reste à un clic). */
.accordeon-discret { margin-top: 36px; }
.accordeon-discret > summary { font-size: 13.5px; color: var(--txt-secondaire); padding: 12px 20px; }
.accordeon-discret > summary:hover { color: var(--texte); }
.accordeon-discret .accordeon-corps { font-size: 13.5px; }

/* ================= ONGLETS (sélecteur d'écran) ================= */
.onglets { display: flex; gap: 8px; margin: 22px 0 4px; }
.onglet {
  border: 0.5px solid var(--bordure);
  background: var(--carte);
  color: var(--txt-secondaire);
  font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit;
}
.onglet.actif {
  color: var(--orange-fonce-3);
  background: var(--verdict-fond);
  border-color: var(--orange);
}
.onglets-aide { color: var(--txt-secondaire); font-size: 13px; margin: 6px 2px 4px; }
/* Accès rapide au glossaire (ancré en bas de page) : bleu distinct, bien visible. */
.lien-aide {
  display: inline-block; margin-left: 10px;
  color: var(--bleu-amazon); font-weight: 700; font-size: 13px;
  text-decoration: none; border-bottom: 1px solid var(--bleu-amazon);
  cursor: pointer;
}
.lien-aide:hover { filter: brightness(.8); }

/* ================= FORMULAIRE « tester un terme » ================= */
.champ-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--txt-secondaire); margin-bottom: 5px;
}
.form-ligne { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 16px; }
.champ-wrap { flex: 1; }
.marche-wrap { flex: 0 0 120px; }
input[type="text"], select {
  width: 100%;
  background: var(--champ);
  border: 0.5px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px; font-family: inherit; color: var(--texte);
}
input[type="text"]:focus, select:focus { outline: 2px solid rgba(255,153,0,.35); border-color: var(--orange); }
select { cursor: pointer; }

/* ================= BOUTONS ================= */
.btn-principal {
  background: var(--orange);
  color: var(--orange-fonce-3);
  font-weight: 700; font-size: 15px;
  border: none; border-radius: 10px;
  height: 46px; padding: 0 22px; width: 100%;
  cursor: pointer; font-family: inherit;
}
.btn-principal:hover { filter: brightness(.97); }
.btn-principal.petit { width: auto; height: 40px; }
.btn-secondaire {
  background: var(--carte);
  color: var(--txt-secondaire);
  border: 0.5px solid var(--bordure);
  border-radius: 10px; height: 46px; padding: 0 18px;
  font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
}
.btn-secondaire:hover { border-color: var(--orange); color: var(--orange-fonce); }
.btn-secondaire.petit { height: 40px; }

/* Bouton PDF (contour orange sur fond crème). */
.btn-pdf {
  border: 1px solid var(--orange);
  background: var(--verdict-fond);
  color: var(--orange-fonce-2);
  border-radius: 10px; height: 46px; padding: 0 18px;
  font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn-pdf:hover { filter: brightness(.98); }

/* ================= ÉTATS VIDES & ERREURS (cartes soignées, jamais de texte brut) ===== */
.etat-carte {
  border-radius: 16px; padding: 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 14px 0;
}
.etat-icone {
  width: 72px; height: 72px; border-radius: 50%;
  background: #FFF7ED; color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.etat-icone svg { width: 40px; height: 40px; }
.etat-titre { font-size: 18px; font-weight: 700; color: var(--texte); }
.etat-msg { font-size: 14px; color: var(--txt-secondaire); max-width: 420px; }
.etat-carte .btn-principal { width: auto; margin-top: 12px; padding: 0 26px; }

/* ================= MESSAGES ================= */
.message { margin: 14px 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.message.attention { background: #FFF7ED; color: var(--orange-fonce-2); border-left: 3px solid var(--orange); }
.message.erreur { background: #FCEBEB; color: #A32D2D; border-left: 3px solid #A32D2D; }
.message.chargement { background: var(--verdict-fond); color: var(--orange-fonce-2); border-left: 3px solid var(--orange); }

/* ================= FICHE DE COTATION ================= */
.fiche { margin-top: 16px; }
.fiche-haut { display: flex; gap: 20px; align-items: center; }
/* Note mise en avant : pastille compacte en haut de fiche, lettre 38px/800. */
.badge-note {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: baseline; gap: 10px;
  border-radius: 14px; padding: 12px 20px;
}
.badge-note .lettre { font-size: 38px; font-weight: 800; line-height: 1; }
.badge-note .pct { font-size: 15px; font-weight: 700; opacity: .92; }
.fiche-txt { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.verdict-box {
  background: var(--verdict-fond);
  border-left: 3px solid var(--orange);
  border-radius: 10px; padding: 12px 16px;
}
.verdict-label { color: var(--marine); font-weight: 800; font-size: 18px; text-transform: capitalize; }
.verdict-txt { color: #3d4550; font-size: 14px; margin-top: 2px; }
.fiche-meta { color: var(--txt-secondaire); font-size: 13px; margin-top: 8px; }
/* Puces de tendance (à côté du badge de note — fiche de terme ET carte de niche).
   Pastels fixes, lisibles dans les deux thèmes (même parti pris que BADGE_NOTE). */
.fiche-puces {
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center; align-items: flex-start; flex: 0 0 auto;
}
.puce-tendance {
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 99px; white-space: nowrap;
}
.puce-tendance.hausse { background: #E7F3E1; color: #3B6D11; }
.puce-tendance.stable { background: #F1EFE8; color: #5F5E5A; }
.puce-tendance.baisse { background: #FCEBEB; color: #A32D2D; }
.puce-tendance.emergent { background: #FFF3E0; color: #7a4a00; }
/* Bloc VOLUME DE RECHERCHE GOOGLE, sous les critères. Pastels/bordure fixes (lisibles
   dans les deux thèmes, comme BADGE_NOTE) ; nombre en var(--texte) (= #232F3E en clair,
   clair en sombre — jamais illisible). */
.bloc-volume {
  background: var(--carte);
  border: 1px solid #FFE0B0;
  border-radius: 14px; padding: 15px 18px; margin: 16px 0 6px;
  box-shadow: 0 10px 26px -20px rgba(35, 47, 62, .4);
}
.bloc-volume-haut { display: flex; align-items: center; gap: 13px; }
.bloc-volume-icone {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px;
  background: #FFF7ED; display: flex; align-items: center; justify-content: center;
}
.bloc-volume-txt { flex: 1 1 auto; min-width: 0; }
.bloc-volume-label { font-size: 12px; color: #98a2b0; font-weight: 600; }
.bloc-volume-nombre { font-size: 26px; font-weight: 800; color: var(--texte); line-height: 1.15; }
.bloc-volume-pastilles {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto;
}
.pastille-vol {
  font-size: 12.5px; font-weight: 700; padding: 4px 11px;
  border-radius: 99px; white-space: nowrap;
}
.pastille-vol.niv-faible { background: #F1EFE8; color: #5F5E5A; }
.pastille-vol.niv-moyen { background: #FAEEDA; color: #854F0B; }
.pastille-vol.niv-eleve, .pastille-vol.niv-tres_eleve { background: #E7F3E1; color: #3B6D11; }
/* Échelle log (~100 → ~1M) : barre dégradée gris → ambre → vert + marqueur. */
.volume-echelle { margin-top: 13px; }
.volume-barre {
  position: relative; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #D8D5CC 0%, #E8C377 45%, #7FB069 100%);
}
.volume-point {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--carte); border: 3px solid var(--orange-fonce);
  box-shadow: 0 1px 4px rgba(35, 47, 62, .35);
}
.volume-reperes {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11px; color: var(--txt-discret); font-weight: 600;
}
.fiche-volume-nd { color: var(--txt-secondaire); font-size: 13px; margin: 12px 0 0; }
.fiche-volume-action { margin: 14px 0 4px; }
/* Résultat servi du cache : mention discrète + bouton-lien « Rafraîchir » (cotation live). */
.fiche-cache { color: var(--txt-secondaire); font-size: 12.5px; margin-top: 4px; font-style: italic; }
.btn-lien {
  background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer;
  color: var(--accent, #2563eb); font-size: 12.5px; text-decoration: underline; font-style: normal;
}
.btn-lien:hover { opacity: .8; }

.fiche h4 { color: var(--texte); font-size: 16px; font-weight: 800; margin: 22px 0 12px; }

/* Critères + barres */
.critere { margin: 0 0 16px; }
.crit-lib { font-weight: 700; color: var(--texte); margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.pastille {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--orange);
}
.pastille.grise { background: var(--txt-discret); }
.barre-piste { background: var(--barre-piste); border-radius: 8px; height: 16px; width: 100%; overflow: hidden; }
/* Les barres se REMPLISSENT en douceur : largeur animée 0 % → cible (voir animerBarres). */
.barre-val { height: 16px; border-radius: 8px; background: var(--orange);
             transition: width .6s ease-out; }

/* Icône devant chaque critère (SVG inline, trait courant — cohérent clair/sombre). */
.crit-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--orange-fonce); }
.crit-ico svg { width: 16px; height: 16px; display: block; }

/* Flèche de tendance à côté de l'Émergence : ↗ vert · → gris · ↘ rouge. */
.fleche-pente { font-weight: 800; }
.crit-exp { color: var(--txt-secondaire); font-size: 13px; margin: 6px 0 0; }

.autocomplete { color: var(--txt-secondaire); font-size: 13px; margin: 8px 0 0; }
/* Sous-angles à creuser : suggestions autocomplete en puces cliquables (relance une
   cotation, servie du cache si déjà testée). Variables du thème → clair ET sombre. */
.sous-angles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-angle {
  background: var(--carte); border: 0.5px solid var(--bordure); border-radius: 99px;
  padding: 6px 14px; cursor: pointer; font-family: inherit;
  color: var(--texte); font-weight: 600; font-size: 13px;
  transition: border-color .15s ease, color .15s ease;
}
.chip-angle:hover { border-color: var(--orange); color: var(--orange-fonce); }

/* Deux façons de trouver des niches : cartes de choix (un seul mode affiché). */
.modes-eyebrow { color: #e57e00; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; margin: 4px 0 8px; }
.modes-niches { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mode-niche {
  flex: 1 1 280px; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--carte); border: 0.5px solid #e7eaee; border-radius: 12px;
  padding: 14px 16px; cursor: pointer; font-family: inherit;
}
html[data-theme="sombre"] .mode-niche { border-color: var(--bordure); }
.mode-niche.actif { border: 2px solid #FF9900; padding: 12.5px 14.5px; }
.mode-ico { color: #e57e00; flex: 0 0 auto; display: flex; }
.mode-txt { display: flex; flex-direction: column; gap: 2px; }
.mode-txt strong { color: var(--texte); font-size: 14.5px; }
.mode-txt span { color: var(--txt-secondaire); font-size: 12.5px; }

/* Tranches de volume (choix unique) — « Tous » = pas de filtre (0 crédit). */
.ch-tranches { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.ch-tranche {
  border-radius: 99px; padding: 6px 13px; cursor: pointer; font-family: inherit;
  background: var(--carte); border: 0.5px solid #e7eaee; color: #98a2b0;
  font-weight: 600; font-size: 12.5px;
}
html[data-theme="sombre"] .ch-tranche { border-color: var(--bordure); }
.ch-tranche.actif {
  border: 2px solid #FF9900; color: var(--texte); font-weight: 700; padding: 4.5px 11.5px;
}

/* Glossaire — les mots à connaître. */
.gl-mots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 9px 14px; margin: 4px 0 0;
}
.gl-mot {
  background: var(--carte); border: 0.5px solid var(--bordure); border-radius: 10px;
  padding: 10px 13px; font-size: 13px; line-height: 1.45;
}
.gl-mot strong { color: var(--texte); display: block; margin-bottom: 2px; }
.gl-mot span { color: var(--txt-secondaire); }

/* Chercheur d'opportunités (mode niches) — spec exacte ; pastels/oranges fixes lisibles
   dans les deux thèmes, surfaces sur variables. */
.chercheur {
  border: 0.5px solid #e7eaee; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 10px 26px -20px rgba(35, 47, 62, .4); margin: 14px 0;
}
html[data-theme="sombre"] .chercheur { border-color: var(--bordure); }
.chercheur-eyebrow {
  color: #e57e00; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
}
.chercheur-titre { font-size: 17px; font-weight: 700; color: var(--texte); margin: 2px 0 14px; }
.chercheur-grille { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.ch-note-wrap { display: flex; flex-direction: column; gap: 6px; }
.ch-notes { display: flex; gap: 6px; }
.ch-note {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: var(--carte); border: 0.5px solid #e7eaee; color: #98a2b0;
  font-weight: 800; font-size: 14px;
}
.ch-note.actif { border: 2px solid #FF9900; color: var(--texte); }
.chercheur-curseurs {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 4px;
}
.ch-curseur { flex: 1 1 220px; display: flex; flex-direction: column; gap: 7px; }
.ch-curseur .champ-label { display: flex; justify-content: space-between; gap: 8px; }
.ch-val { color: #e57e00; font-weight: 800; }
.ch-curseur input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 99px; background: #f0f1f4; outline: none;
}
.ch-curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--carte); border: 3px solid #FF9900; cursor: pointer;
}
.ch-curseur input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--carte); border: 3px solid #FF9900; cursor: pointer;
}
.chercheur-ligne2 { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0 14px; }
/* Interrupteur « En hausse seulement » : piste grise → verte quand activé. */
.ch-switch-wrap { display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--texte); }
.ch-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.ch-switch-piste {
  flex: 0 0 40px; width: 40px; height: 22px; border-radius: 99px; position: relative;
  background: #d8dce2; transition: background .15s ease;
}
.ch-switch-piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s ease;
  box-shadow: 0 1px 3px rgba(35, 47, 62, .3);
}
.ch-switch:checked + .ch-switch-piste { background: #3B6D11; }
.ch-switch:checked + .ch-switch-piste::after { left: 21px; }
.ch-vol-wrap input[type="number"] { width: 140px; }
/* Filtres non applicables aux niches (émergence pas encore mesurée) : grisés, inertes. */
.ch-indispo { opacity: .45; cursor: not-allowed; }
.ch-indispo input, .ch-indispo .ch-switch-piste { cursor: not-allowed; }
.ch-bientot { font-weight: 500; color: var(--txt-discret); font-size: 11px; margin-left: 4px; }
.btn-chercheur {
  background: #FF9900; color: #3d2600; border: none; border-radius: 10px;
  height: 44px; padding: 0 26px; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 14.5px;
}
.btn-chercheur:hover { filter: brightness(.97); }
.btn-chercheur.confirme { background: var(--verdict-fond); color: var(--orange-fonce-2);
  border: 2px solid #FF9900; }
.ch-compteur { font-weight: 700; color: var(--texte); margin: 14px 2px 10px; }
.ch-cout { color: var(--txt-secondaire); font-weight: 600; font-size: 12.5px; }
.ch-carte .niche-scores .puce-tendance { margin-left: 4px; }

/* Watchlist : surveillance locale de termes dans le temps. Variables du thème. */
.watchlist-outils { margin: 0 0 14px; }
.btn-outil.attention { border-color: var(--orange); color: var(--orange-fonce); }
.watch-carte {
  display: flex; align-items: center; gap: 14px;
  background: var(--carte); border: 0.5px solid var(--bordure);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
}
.watch-corps { flex: 1 1 auto; min-width: 0; }
.watch-delta { font-size: 12.5px; color: var(--txt-secondaire); margin-top: 3px; }
.watch-carte .btn-retirer { flex: 0 0 auto; height: 34px; }
@media (max-width: 640px) { .watch-carte { flex-wrap: wrap; } }

/* Tableau des livres concurrents */
.lv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lv-table th {
  text-align: left; color: var(--txt-secondaire); font-weight: 700; font-size: 12px;
  border-bottom: 2px solid var(--barre-piste); padding: 6px 8px;
}
.lv-table td { padding: 7px 8px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.lv-table td.lv-b, .lv-table th.lv-b { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Liens livres (concurrents ET « livre phare ») : bleu Amazon souligné. */
.lien-amazon { color: var(--bleu-amazon); text-decoration: underline; }
.lien-amazon:hover { filter: brightness(.9); }

.fiche-actions { display: flex; gap: 12px; margin-top: 20px; }

/* ================= ÉCRAN NICHES ================= */
/* Barre d'outils des niches : les libellés de bouton ne se coupent JAMAIS ; quand la
   place manque, c'est le BLOC qui passe à la ligne, pas le texte. */
.niches-barre {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 8px; flex-wrap: wrap;
}
.niches-barre .marche-wrap { flex: 0 1 auto; min-width: 0; }
.niches-barre-droite {
  display: flex; align-items: center; gap: 10px 14px;
  flex-wrap: wrap; margin-left: auto; justify-content: flex-end;
}
.niches-barre-droite .btn-secondaire { flex: 0 0 auto; white-space: nowrap; }
/* La date est une PHRASE (« Données du 20/07/2026 à 07h33 · classement mis à jour… ») :
   elle doit pouvoir passer à la ligne. Seuls les LIBELLÉS DE BOUTON, courts et
   indivisibles, restent en `nowrap`. */
.date-donnees { color: var(--txt-secondaire); font-size: 13px; min-width: 0; }
.avertissement {
  background: #FFF7ED; border-left: 3px solid var(--orange); color: var(--orange-fonce-2);
  border-radius: 10px; padding: 14px 16px; margin: 10px 0; font-size: 14px;
}
.avertissement-actions { display: flex; gap: 10px; margin-top: 10px; }

.niches-recap { color: var(--txt-secondaire); font-size: 13px; margin: 12px 2px; }
.groupe-titre { color: var(--texte); font-size: 16px; font-weight: 800; margin: 22px 0 10px; }
.groupe-note { color: var(--txt-secondaire); font-size: 13px; margin: -4px 2px 12px; }

.domaine { margin: 0 0 8px; }
.domaine > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--texte); padding: 14px 20px; }
.domaine > summary::-webkit-details-marker { display: none; }
.domaine > summary .compte { color: var(--txt-secondaire); font-weight: 600; }
.domaine > summary::after { content: "▾"; float: right; color: var(--txt-discret); }
.domaine[open] > summary::after { content: "▴"; }
.domaine-corps { padding: 0 16px 16px; overflow-x: auto; }

.nz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nz-table th {
  text-align: left; color: var(--txt-secondaire); font-weight: 700; font-size: 12px;
  border-bottom: 2px solid var(--barre-piste); padding: 7px 8px; white-space: nowrap;
}
.nz-table td { padding: 7px 8px; border-bottom: 1px solid var(--bordure); }
.nz-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================= NICHES EN CARTES (mode « Trouver des niches ») ================= */
.niche-carte {
  display: flex; align-items: center; gap: 16px;
  background: var(--carte);
  border: 0.5px solid var(--bordure);
  border-radius: 14px;
  box-shadow: 0 10px 26px -20px rgba(35,47,62,.4);
  padding: 16px 18px;
  margin: 0 0 10px;
  transition: box-shadow .15s ease, transform .15s ease;
}
/* Survol doux (cohérence fine) : ombre renforcée + légère élévation. */
.niche-carte:hover, .domaine:hover, .accordeon:hover {
  box-shadow: 0 14px 32px -18px rgba(35,47,62,.5);
  transform: translateY(-1px);
}
.domaine, .accordeon { transition: box-shadow .15s ease, transform .15s ease; }
.niche-badge {
  flex: 0 0 auto; text-align: center;
  border-radius: 12px; padding: 8px 14px;
}
.niche-badge .lettre { font-size: 24px; font-weight: 800; line-height: 1.1; }
.niche-badge .pct { font-size: 12px; font-weight: 600; }
.niche-corps { flex: 1; min-width: 0; }
.niche-nom { font-size: 15px; font-weight: 700; color: var(--texte); }
.niche-sous { font-size: 12px; color: var(--txt-discret); margin: 1px 0 5px; }
.niche-scores { font-size: 12.5px; color: var(--txt-secondaire); }
.niche-scores strong { color: var(--texte); }
/* ================= JAQUETTES (miniatures de couverture Amazon) ================= */
.jaquette {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 66px; flex: 0 0 auto;
  border-radius: 6px; overflow: hidden;
  background: var(--barre-piste); color: var(--txt-discret);   /* placeholder icône livre */
  border: 0.5px solid var(--bordure);
  box-shadow: 0 3px 8px -4px rgba(35,47,62,.45);
}
.jaquette svg { width: 20px; height: 20px; }
.jaquette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jaquette-lien { display: inline-flex; flex: 0 0 auto; }
.livre-ligne { display: flex; align-items: center; gap: 10px; }

.niche-phare { flex: 0 0 34%; min-width: 0; cursor: help; display: flex; align-items: center; gap: 10px; }
.niche-phare-txt { min-width: 0; }

/* ================= FAVORIS (étoile + cartes « Mes favoris ») ================= */
.btn-etoile {
  flex: 0 0 auto; align-self: flex-start;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--txt-discret);          /* contour = non favori */
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, transform .15s ease;
}
.btn-etoile svg { width: 19px; height: 19px; }
.btn-etoile:hover { color: var(--orange); transform: scale(1.12); }
.btn-etoile.actif { color: var(--orange); }
.btn-etoile.actif svg { fill: var(--orange); }      /* pleine = favori */
.fiche { position: relative; }
.fiche > .btn-etoile { position: absolute; top: 14px; right: 14px; }

.carte-favori { cursor: pointer; }
.carte-favori .btn-retirer { flex: 0 0 auto; align-self: center; height: 34px; }
.phare-label { font-size: 11px; color: var(--txt-discret); }
/* Clarification honnête : c'est le classement AMAZON, pas un choix éditorial BookRadar. */
.phare-sous { font-size: 10.5px; color: var(--txt-discret); opacity: .85; margin: 0 0 3px; }
.niche-phare .lien-amazon, .niche-phare span { font-size: 13px; }

@media (max-width: 640px) {
  .niche-carte { flex-wrap: wrap; }
  .niche-phare { flex-basis: 100%; }
}

/* ================= ANIMATION RADAR (pendant l'analyse d'un terme) ================= */
.radar-carte { display: flex; align-items: center; gap: 18px; margin: 14px 0; }
.radar { position: relative; width: 78px; height: 78px; flex: 0 0 auto; }
.radar-cercle { position: absolute; border-radius: 50%; border: 1.5px solid #FFE3BC; }
.radar-cercle.c1 { inset: 0; }
.radar-cercle.c2 { inset: 16px; }
.radar-cercle.c3 { inset: 32px; border-color: #FFD79E; }
.radar-balayage {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,153,0,.55), rgba(255,153,0,.05) 55%, transparent 70%);
  animation: radar-rot 1.5s linear infinite;
}
@keyframes radar-rot { to { transform: rotate(360deg); } }
.radar-point {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.radar-titre { font-size: 17px; font-weight: 800; color: var(--texte); }
.radar-sous { font-size: 14px; color: var(--txt-secondaire); }

/* ================= PIED DE PAGE ================= */
.br-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 40px 0 8px; color: var(--txt-discret); font-size: 13px;
}
.br-footer img { height: 20px; width: auto; opacity: .85; }
.br-footer strong { color: var(--texte); }

@media (max-width: 640px) {
  .form-ligne { flex-direction: column; align-items: stretch; }
  .marche-wrap { flex: 1; }
  .fiche-haut { flex-direction: column; }
  .badge-note { flex-basis: auto; }
}

/* ================= HISTORIQUE des recherches récentes (chips) ================= */
/* Deux accès distincts sous le bouton Coter : « ↻ Nouvelle recherche » (reset) et
   « 🕘 Historique » (panneau). MÊME style que les boutons de format (.seg-btn) : fond
   carte, bordure fine, rayon 10px, padding confortable — et de l'air au-dessus, bien
   séparés du bouton orange. Variables du thème → clair ET sombre. */
.form-outils { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outil {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0.5px solid var(--bordure);
  background: var(--carte);
  border-radius: 10px; padding: 10px 16px;
  cursor: pointer; font-family: inherit;
  color: var(--texte); font-weight: 700; font-size: 14px;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-outil:hover { border-color: var(--orange); color: var(--orange-fonce); }
.btn-outil[aria-expanded="true"] {
  border-color: var(--orange);
  background: var(--verdict-fond);
  box-shadow: 0 0 0 1px var(--orange) inset;
  color: var(--orange-fonce-3);
}

.panneau-historique {
  margin-top: 10px; background: var(--carte); border: 0.5px solid var(--bordure);
  border-radius: 12px; overflow: hidden;
}
.hist-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 0.5px solid var(--bordure);
}
.hist-titre { font-weight: 700; font-size: 13.5px; color: var(--texte); }
.hist-vider {
  border: none; background: none; cursor: pointer; font-family: inherit;
  color: var(--txt-discret); font-size: 12.5px; text-decoration: underline;
}
.hist-vider:hover { color: var(--orange-fonce); }
.hist-vider.confirme { color: #A32D2D; font-weight: 700; text-decoration: none; }
.hist-liste { max-height: 320px; overflow-y: auto; }
.hist-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 0.5px solid var(--bordure);
  padding: 9px 14px; cursor: pointer; font-family: inherit;
}
.hist-ligne:last-child { border-bottom: none; }
.hist-ligne:hover { background: var(--fond-page); }
.hist-terme { font-weight: 600; font-size: 13.5px; color: var(--texte); flex: 1 1 auto; }
.hist-meta { font-size: 12px; color: var(--txt-secondaire); white-space: nowrap; }
.hist-note {
  font-weight: 700; font-size: 12px; border-radius: 8px; padding: 2px 8px;
  white-space: nowrap;
}
.hist-vide { padding: 14px; font-size: 13px; color: var(--txt-secondaire); }

/* ================= ACCUEIL (modale du 1er lancement) ================= */
.voile {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 27, 36, .62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* IMPORTANT : display:flex écraserait l'attribut hidden (le voile invisible bloquerait
   tous les clics de la page) — on le neutralise explicitement. */
.voile[hidden] { display: none; }
.accueil-carte { max-width: 460px; text-align: center; padding: 30px 28px; }
.accueil-titre { font-size: 20px; font-weight: 800; color: var(--texte); margin-bottom: 12px; }
.accueil-ligne { color: var(--txt-secondaire); font-size: 14px; margin: 6px 0; }
.accueil-ligne strong { color: var(--texte); }
.accueil-carte .btn-principal { width: auto; padding: 0 30px; margin-top: 16px; }
.lien-discret {
  border: none; background: none; cursor: pointer; font-family: inherit;
  color: var(--txt-discret); font-size: 12px; text-decoration: underline; margin-left: 8px;
}
.lien-discret:hover { color: var(--orange-fonce); }

/* Contrôles de tri / filtre du mode niches. */
.tri-wrap { flex: 0 0 150px; }

/* ================= ZONES (vente / auth / outil) ================= */
.zone[hidden] { display: none; }

/* --- (a) page de vente publique --- */
.vente-hero { text-align: center; max-width: 720px; margin: 22px auto 8px; }
.vente-eyebrow { color: var(--orange-fonce); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.vente-titre { font-size: 34px; font-weight: 800; color: var(--texte); line-height: 1.15; margin: 10px 0; }
.vente-sous { font-size: 16px; color: var(--txt-secondaire); line-height: 1.55; margin: 0 auto 22px; max-width: 620px; }
.vente-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vente-cta .btn-principal, .vente-cta .btn-secondaire { width: auto; padding: 0 26px; height: 48px; }
.vente-atouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; max-width: 900px; margin: 30px auto 0;
}
.vente-atout {
  background: var(--carte); border: 0.5px solid var(--bordure); border-radius: 14px;
  padding: 18px; text-align: center;
}
.vente-ico { font-size: 28px; }
.vente-atout-titre { font-size: 15.5px; font-weight: 700; color: var(--texte); margin: 8px 0 4px; }
.vente-atout-txt { font-size: 13px; color: var(--txt-secondaire); line-height: 1.5; }
.vente-note { text-align: center; color: var(--txt-discret); font-size: 13px; margin: 22px 0 0; }

/* --- (b) connexion / inscription --- */
.auth-carte {
  max-width: 420px; margin: 30px auto; background: var(--carte);
  border: 0.5px solid var(--bordure); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 10px 30px -22px rgba(35, 47, 62, .5);
}
.auth-onglets { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-onglet {
  flex: 1; height: 40px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: var(--carte); border: 0.5px solid var(--bordure);
  color: var(--txt-secondaire); font-weight: 700; font-size: 14px;
}
.auth-onglet.actif { border: 2px solid var(--orange); color: var(--texte); }
.auth-carte .champ-wrap { margin-bottom: 14px; }
.auth-carte input[type="email"], .auth-carte input[type="password"] {
  width: 100%; background: var(--champ); border: 0.5px solid var(--bordure);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--texte);
}
.auth-carte input:focus { outline: 2px solid rgba(255,153,0,.35); border-color: var(--orange); }
.auth-carte .btn-principal { width: 100%; margin-top: 4px; }
.auth-message { border-radius: 10px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 14px; }
.auth-message.erreur { background: #FCEBEB; color: #A32D2D; border-left: 3px solid #A32D2D; }
.auth-message.succes { background: #E7F3E1; color: #3B6D11; border-left: 3px solid #3B6D11; }
.auth-message.info { background: var(--verdict-fond); color: var(--orange-fonce-2); border-left: 3px solid var(--orange); }
.auth-carte .lien-discret { display: block; margin: 14px auto 0; text-align: center; }
/* Séparateur « ou » + bouton Google (OAuth Supabase) — variables du thème (clair+sombre). */
.auth-sep {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 14px;
  color: var(--txt-discret); font-size: 12px; font-weight: 600;
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 0.5px; background: var(--bordure); }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--carte); border: 0.5px solid var(--bordure); border-radius: 10px;
  height: 46px; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: 14px; color: var(--texte);
  transition: border-color .15s ease;
}
.btn-google:hover { border-color: var(--orange); }
.btn-google svg { flex: 0 0 auto; }

/* --- (c) mon compte --- */
.compte-carte { max-width: 560px; }
.compte-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 0.5px solid var(--bordure);
}
.compte-label { font-size: 13px; color: var(--txt-secondaire); font-weight: 600; }
.compte-valeur { font-size: 14.5px; color: var(--texte); font-weight: 600; }
.compte-plan {
  background: var(--verdict-fond); color: var(--orange-fonce-2); font-weight: 700;
  font-size: 12.5px; border-radius: 99px; padding: 4px 12px;
}
.compte-note { font-size: 12.5px; color: var(--txt-discret); line-height: 1.5; margin: 14px 0 16px; }

/* ================= OFFRES / QUOTAS (affichage — le serveur décide) ================= */
.barre-quotas {
  background: var(--carte); border: 0.5px solid var(--bordure); border-radius: 10px;
  padding: 9px 16px; margin: 10px 0 4px; font-size: 13px; color: var(--txt-secondaire);
}
.barre-quotas .q-essai { color: var(--orange-fonce); font-weight: 700; }
.barre-quotas .q-toast { color: var(--orange-fonce-2); font-weight: 700; }
.bandeau-apercu {
  position: sticky; top: 0; z-index: 60; text-align: center;
  background: var(--orange); color: #3d2600; font-weight: 800; font-size: 13.5px;
  padding: 8px 14px;
}
.apercu-quitter {
  margin-left: 12px; border: none; border-radius: 99px; padding: 3px 12px;
  background: #3d2600; color: #FFE0B0; font-weight: 700; cursor: pointer; font-family: inherit;
}
.refus-carte .btn-principal.petit { width: auto; height: 40px; margin-top: 12px; padding: 0 22px; }
/* cadenas : éléments visibles mais clairement verrouillés (le serveur refuse proprement) */
.verrou, .verrou-bloc { opacity: .45; }
.verrou { cursor: not-allowed !important; }
.fiche-volume-action.verrou { opacity: 1; }
.fiche-volume-action.verrou .btn-outil { opacity: .55; cursor: not-allowed; }
.volume-solde { font-size: 12.5px; color: var(--txt-secondaire); margin-left: 8px; }
/* mon compte : essai, barres de quotas, inclus, admin */
.compte-essai {
  background: var(--verdict-fond); color: var(--orange-fonce-2); font-weight: 700;
  border-left: 3px solid var(--orange); border-radius: 8px; padding: 10px 14px; margin: 12px 0;
  font-size: 13.5px;
}
.compte-essai.fini { font-weight: 500; }
.compte-sous-titre { font-weight: 800; font-size: 13.5px; color: var(--texte); margin: 16px 0 8px; }
.cq-ligne { display: flex; justify-content: space-between; font-size: 13px;
  color: var(--txt-secondaire); margin-top: 8px; }
.cq-val, .cq-illimite { font-weight: 700; color: var(--texte); }
.cq-barre { height: 6px; border-radius: 99px; background: var(--barre-piste, #eef1f4);
  margin-top: 4px; overflow: hidden; }
.cq-barre span { display: block; height: 100%; border-radius: 99px; background: var(--orange); }
.compte-inclus { margin: 4px 0 0; padding-left: 20px; font-size: 13px;
  color: var(--txt-secondaire); line-height: 1.7; }
.compte-admin { margin-top: 18px; border-top: 0.5px solid var(--bordure); padding-top: 6px; }
.admin-apercu { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--txt-secondaire); margin-bottom: 12px; }
.admin-totaux { font-size: 13px; color: var(--txt-secondaire); margin-bottom: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th, .admin-table td { text-align: left; padding: 6px 8px;
  border-bottom: 0.5px solid var(--bordure); color: var(--txt-secondaire); }
.admin-table th { font-weight: 700; color: var(--texte); }

.admin-incidents { margin: 6px 0 10px; font-size: 0.86rem; color: #A35B00; }
html[data-theme="sombre"] .admin-incidents { color: #E5A65A; }

.admin-budgets { margin: 6px 0 2px; font-size: 0.86rem; color: var(--texte-2, #5b6470); }

.admin-scans { margin: 2px 0 2px; font-size: 0.86rem; font-weight: 600; color: #A35B00; }
html[data-theme="sombre"] .admin-scans { color: #E5A65A; }

/* Nuance affichée quand la NOTE (moyenne des axes) et le VERDICT (axe bloquant)
   divergent : on l'explique au lieu de laisser l'utilisateur arbitrer seul. */
.verdict-nuance {
  margin-top: 6px; font-size: 13px; line-height: 1.45; color: #6b4a00;
  background: #FFF4E0; border-left: 3px solid var(--orange);
  padding: 6px 10px; border-radius: 0 6px 6px 0;
}
html[data-theme="sombre"] .verdict-nuance { color: #F0D5A8; background: #3a2f1c; }

.niches-maj { font-size: 0.86em; opacity: 0.75; }

/* ══════════════════════════════════════════════════════════════════════════
   REFONTE « double bandeau façon Amazon » — maquette design-F-bandeaux-amazon.html
   Bandeau 1 (#131921) : marque · recherche · drapeaux · compte
   Bandeau 2 (#232F3E) : navigation soulignée d'orange · compteur de quotas
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- BANDEAU 1 ---------- */
.bar1 {
  /* PAS d'`overflow:hidden` : il rognerait le menu déroulant du marché. Le décor est
     posé en ::before/::after avec `inset:0`, il ne déborde donc jamais. */
  position: relative; background: var(--encre);
  padding: 9px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
/* Décor : WebP (30 Ko) avec repli PNG — cf. `image-set()`, la 1re déclaration reste
   valable pour les navigateurs qui ne la comprennent pas. */
.bar1::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background: url('/assets/hero-bg.png') right center/cover no-repeat;
  background: image-set(url('/assets/hero-bg.webp') type('image/webp'),
                        url('/assets/hero-bg.png') type('image/png'))
              right center/cover no-repeat;
}
/* Voile dégradé vers la gauche : garantit la lisibilité du texte sur le décor. */
.bar1::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--encre) 32%, rgba(19,25,33,.82) 58%, rgba(19,25,33,.45));
}
.bar1 > * { position: relative; z-index: 2; }

.marque { display: flex; align-items: center; gap: 11px; }
.marque img { width: 48px; height: 48px; flex: none; display: block; }
.marque-nom { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.4px; line-height: 1; }
.marque-nom span { color: var(--orange); }
.marque-sous { font-size: 10.5px; color: #98A5B5; margin-top: 1px; }

/* Champ de recherche global (format · saisie · bouton orange) */
.recherche { flex: 1; min-width: 260px; display: flex; border-radius: 9px; overflow: hidden; height: 40px; }
.recherche .cat {
  background: #E6E6E6; color: #4A4A4A; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; padding: 0 10px 0 13px; gap: 6px; white-space: nowrap;
  border: 0; font-family: inherit; cursor: pointer; appearance: none;
}
.recherche input {
  flex: 1; border: 0; padding: 0 14px; font-size: 14px; font-family: inherit;
  outline: none; background: #fff; color: #131921; min-width: 0;
}
.recherche .go {
  background: var(--orange-btn); width: 52px; border: 0; display: flex;
  align-items: center; justify-content: center; cursor: pointer; color: var(--orange-fonce-3);
}
.recherche .go:hover { background: #F3B45F; }

/* Drapeaux = choix du marché. SVG inline (jamais d'emoji : non rendus sous Windows). */
.drapeaux { display: flex; gap: 5px; background: #1E2733; border-radius: 9px; padding: 4px; }
.drapeau {
  display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: #B6C0CC;
  transition: .15s; border: 0; background: none; font-family: inherit;
}
.drapeau:hover { background: #2B3646; color: #fff; }
.drapeau.actif { background: #fff; color: var(--encre); }
.drapeau svg {
  width: 21px; height: 14px; border-radius: 2px; display: block;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.35);
}

.compte-acces {
  color: #fff; font-size: 12.5px; line-height: 1.25; cursor: pointer; white-space: nowrap;
  border: 0; background: none; font-family: inherit; text-align: left; padding: 0;
}
.compte-acces small { display: block; color: #98A5B5; font-size: 11px; }
.compte-acces b { font-weight: 800; }

/* ---------- BANDEAU 2 : navigation ---------- */
.bar2 {
  background: var(--marine); padding: 0 20px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.bar2 .onglet {
  padding: 11px 15px; font-size: 13.5px; font-weight: 700; color: #DCE3EB;
  cursor: pointer; border: 0; border-bottom: 3px solid transparent; background: none;
  font-family: inherit; transition: .15s; display: inline-flex; align-items: center; gap: 7px;
}
.bar2 .onglet:hover { color: #fff; border-bottom-color: var(--marine-clair); }
.bar2 .onglet.actif { color: #fff; border-bottom-color: var(--orange); }
.bar2 .barre-quotas {
  margin-left: auto; font-size: 12.5px; color: #B6C0CC; font-weight: 600;
  padding: 11px 0; background: none; border: 0; display: flex; align-items: center; gap: 10px;
}
.bar2 .barre-quotas b, .bar2 .barre-quotas strong { color: var(--orange); }

/* ---------- ICÔNES SVG (héritent de la couleur du texte : clair ET sombre) ---------- */
.ico { width: 17px; height: 17px; flex: none; display: block; }
.ico-sm { width: 15px; height: 15px; }

/* ---------- CARTES À BANDEAU COLORÉ ---------- */
.carte-b {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 14px;
  overflow: hidden; box-shadow: 0 14px 32px -26px rgba(35,47,62,.55);
}
.carte-b > .bandeau {
  padding: 13px 20px; color: #fff; font-size: 14.5px; font-weight: 800;
  display: flex; align-items: center; gap: 9px;
}
.carte-b > .bandeau .droite { margin-left: auto; font-size: 12px; font-weight: 700; opacity: .9; }
.carte-b > .corps { padding: 20px; }
.carte-b.verdict > .bandeau { background: var(--marine); }
.carte-b.demande > .bandeau { background: var(--bleu); }
.carte-b.espace  > .bandeau { background: var(--cramoisi); }
.carte-b.emergence > .bandeau { background: var(--vert); }
.carte-b.angles  > .bandeau { background: var(--marine-clair); }

/* ---------- BOUTONS : l'orange est RÉSERVÉ à l'action ---------- */
.btn-principal, .btn.p {
  background: var(--orange-btn); color: var(--orange-fonce-3);
  border: 1px solid var(--orange-fonce); border-radius: 99px;
  padding: 12px 22px; font-size: 13.5px; font-weight: 800; cursor: pointer;
  font-family: inherit;
}
.btn-principal:hover { background: #F3B45F; }
.btn-secondaire, .btn.g {
  background: var(--carte); border: 1px solid var(--bordure); color: var(--marine);
  border-radius: 99px; padding: 12px 22px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.btn-secondaire:hover { border-color: var(--marine-clair); }
html[data-theme="sombre"] .btn-secondaire { color: var(--texte); }

/* Le bandeau d'aperçu admin reste au-dessus de tout */
.bandeau-apercu { position: sticky; top: 0; z-index: 60; }

/* ---------- ADAPTATION PAR ZONE (vente / connexion / outil) ---------- */
/* Un visiteur non connecté n'a ni recherche, ni marché, ni navigation d'outil. */
body[data-zone="vente"] .bar2,
body[data-zone="auth"] .bar2,
body[data-zone="vente"] .recherche,
body[data-zone="auth"] .recherche,
body[data-zone="vente"] .drapeaux,
body[data-zone="auth"] .drapeaux,
body[data-zone="vente"] .compte-acces,
body[data-zone="auth"] .compte-acces { display: none; }
body[data-zone="vente"] .bar1,
body[data-zone="auth"] .bar1 { padding: 14px 20px; }
/* Sur la page de vente, la marque occupe la place libérée. */
body[data-zone="vente"] .marque, body[data-zone="auth"] .marque { flex: 1; }

@media (max-width: 860px) {
  .bar1 { gap: 10px; padding: 9px 12px; }
  .bar2 { padding: 0 8px; }
  .bar2 .onglet { padding: 10px 10px; font-size: 12.5px; }
  .bar2-onglets { flex: 1 1 auto; }
  .bar2 .barre-quotas { margin-left: 0; width: 100%; padding: 0 0 9px; }
  .recherche { order: 3; width: 100%; flex: 1 0 100%; }
  .marque-sous { display: none; }
}

/* ---------- Fiche de cotation en cartes à bandeau (maquette design-F) ---------- */
.fiche { display: flex; flex-direction: column; gap: 16px; }
.fiche .carte-b > .corps { position: relative; }

.verdict-ligne { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.verdict-ligne .badge-note {
  flex: none; width: 92px; height: 92px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.verdict-ligne .badge-note .lettre { font-size: 38px; font-weight: 800; line-height: 1; }
.verdict-ligne .badge-note .pct { font-size: 13px; font-weight: 800; opacity: .85; }
.fiche .fiche-txt { flex: 1; min-width: 230px; }
.fiche .verdict-label {
  font-size: 20px; font-weight: 800; color: var(--marine); margin-bottom: 4px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
html[data-theme="sombre"] .fiche .verdict-label { color: var(--texte); }
.fiche .verdict-txt { font-size: 14px; margin: 0; color: var(--txt-doux); }
.fiche .fiche-meta { margin-top: 10px; font-size: 12.5px; color: var(--txt-discret); }

/* Grille des 3 critères */
.grille-criteres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .grille-criteres { grid-template-columns: 1fr; } }
.crit-valeur {
  font-size: 38px; font-weight: 800; color: var(--marine); line-height: 1; letter-spacing: -1px;
}
html[data-theme="sombre"] .crit-valeur { color: var(--texte); }
.crit-valeur.nd { font-size: 17px; color: var(--txt-discret); letter-spacing: 0; }
.grille-criteres .barre-piste {
  height: 8px; border-radius: 99px; background: var(--barre-piste);
  overflow: hidden; margin: 12px 0 10px;
}
.grille-criteres .barre-val { display: block; height: 100%; border-radius: 99px; }
.barre-val.teinte-demande { background: var(--bleu); }
.barre-val.teinte-espace { background: var(--cramoisi); }
.barre-val.teinte-emergence { background: var(--vert); }
.grille-criteres .crit-exp { font-size: 12.8px; color: var(--txt-discret); margin: 0; }
/* L'icône du bandeau est blanche sur fond coloré */
.carte-b > .bandeau .crit-ico, .carte-b > .bandeau .ico { color: #fff; }
.carte-b > .bandeau .crit-ico svg { width: 17px; height: 17px; display: block; }

.fiche-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fiche-actions .btn-secondaire { display: inline-flex; align-items: center; gap: 8px; }
.ico, .ico-sm, .crit-ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg, .ico-sm svg, .crit-ico svg { width: 100%; height: 100%; display: block; }

/* ---------- Correctifs de la refonte ---------- */
/* Le sélecteur de format ne doit pas manger la largeur du champ de recherche. */
.recherche .cat { flex: 0 0 auto; max-width: 170px; }
.recherche input { flex: 1 1 auto; }
/* « Aide » est un lien : pas de soulignement dans la barre de navigation. */
.bar2 a.onglet { text-decoration: none; }
/* Icônes des boutons secondaires (Nouvelle recherche, Historique…) */
.btn-outil { display: inline-flex; align-items: center; gap: 8px; }
.btn-outil .ico-sm { width: 15px; height: 15px; }
/* Icône des cartes de la page de vente (remplace les emojis) */
.ico-carte {
  display: inline-flex; width: 26px; height: 26px; color: var(--orange-fonce);
  margin-bottom: 4px;
}
.ico-carte svg { width: 100%; height: 100%; }
/* Cartes d'état (refus, quotas) : l'icône est un SVG, plus un emoji */
.etat-ico { display: inline-flex; width: 26px; height: 26px; color: var(--txt-secondaire); }
.etat-ico svg { width: 100%; height: 100%; }
.etat-ico .ico { width: 26px; height: 26px; }

/* Bandeaux de même hauteur quel que soit le nombre de lignes du titre. */
.grille-criteres { align-items: stretch; }
.grille-criteres .carte-b { display: flex; flex-direction: column; }
/* Hauteur commune : certains libellés de critère tiennent sur 2 lignes
   (« Espace disponible (concurrence faible) ») — les 3 corps doivent s'aligner. */
.grille-criteres .carte-b > .bandeau { min-height: 62px; align-items: center; }
.grille-criteres .carte-b > .corps { flex: 1; }
/* Puces de sous-angles sur la carte à bandeau */
.carte-b.angles .sous-angles { display: flex; flex-wrap: wrap; gap: 8px; }
.carte-b.angles .chip-angle {
  background: var(--fond-page); border: 1px solid var(--bordure); color: var(--marine);
  font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 99px;
  cursor: pointer; transition: .15s; font-family: inherit;
}
.carte-b.angles .chip-angle:hover {
  background: var(--marine); color: #fff; border-color: var(--marine); transform: translateY(-2px);
}
html[data-theme="sombre"] .carte-b.angles .chip-angle { color: var(--texte); }
.carte-b.angles .autocomplete { margin: 12px 0 0; font-size: 12.5px; color: var(--txt-discret); }


/* ---------- SÉLECTEUR DE MARCHÉ : menu déroulant (façon Amazon) ----------
   Compact au repos → la place gagnée profite au champ de recherche.
   ATTENTION : les drapeaux ne désignent QUE le marché Amazon ; la langue de
   l'interface (EN | FR) est un réglage distinct, volontairement sans drapeau. */
.marche-menu { position: relative; flex: none; }
.marche-bouton {
  display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px;
  background: #1E2733; border: 0; border-radius: 9px; cursor: pointer;
  color: #DCE3EB; font-family: inherit; font-size: 12.5px; font-weight: 700;
  transition: .15s;
}
.marche-bouton:hover { background: #2B3646; color: #fff; }
.marche-bouton[aria-expanded="true"] { background: #2B3646; color: #fff; }
.marche-bouton:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.marche-drapeau { display: block; width: 21px; height: 14px; flex: none; }
.marche-drapeau svg {
  width: 21px; height: 14px; border-radius: 2px; display: block;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.35);
}
.marche-chevron { width: 13px; height: 13px; opacity: .8; }

.marche-liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  min-width: 232px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--bordure); border-radius: 11px;
  box-shadow: 0 18px 40px -18px rgba(19,25,33,.55);
}
.marche-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--marine);
}
.marche-option:hover, .marche-option:focus-visible, .marche-option.survol {
  background: var(--fond-page); outline: none;
}
.marche-option[aria-selected="true"] { background: #FFF4E2; font-weight: 800; }
.marche-pays { flex: 1; font-weight: 700; }
.marche-ext { color: var(--txt-discret); font-size: 12.5px; font-weight: 600; }
html[data-theme="sombre"] .marche-liste { background: var(--carte); border-color: var(--bordure); }
html[data-theme="sombre"] .marche-option { color: var(--texte); }
html[data-theme="sombre"] .marche-option[aria-selected="true"] { background: rgba(255,153,0,.16); }

/* ---------- Règle générale : un libellé de bouton ne se coupe pas ----------
   Les boutons d'action portent des libellés courts et indivisibles (« Exporter (CSV) »,
   « Rafraîchir les données ») : les couper sur 2-3 lignes est illisible. Ils gardent
   leur texte sur une ligne et c'est le CONTENEUR qui se réorganise. */
.btn-principal, .btn-secondaire, .btn-outil, .btn.p, .btn.g,
.bar2 .onglet, .marche-bouton, .compte-acces b, .auth-onglet {
  white-space: nowrap;
}
/* Bande des ONGLETS : c'est elle qui défile sur mobile, pas toute la barre — le
   compteur de quotas doit rester visible (cf. .bar2 .barre-quotas plus bas). */
.bar2-onglets { display: flex; align-items: center; gap: inherit; min-width: 0; }

@media (max-width: 640px) {
  .bar2 { flex-wrap: wrap; row-gap: 0; }
  /* Seuls les onglets défilent horizontalement... */
  .bar2-onglets {
    flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .bar2-onglets::-webkit-scrollbar { display: none; }
  /* ...et le compteur prend sa propre ligne, pleine largeur, TOUJOURS visible. */
  .bar2 .barre-quotas {
    flex: 1 0 100%; margin-left: 0; width: 100%;
    padding: 8px 0 10px; justify-content: flex-start;
    border-top: 1px solid rgba(255, 255, 255, .09);
    white-space: normal;            /* le texte passe à la ligne au lieu de déborder */
    line-height: 1.4;
  }
}

/* ---------- Tableaux : défilement horizontal plutôt que débordement ----------
   Un tableau (conso admin, livres concurrents, niches écartées) ne peut pas se
   comprimer indéfiniment. Sur petit écran il défile DANS son cadre, au lieu de
   pousser la page entière en débordement horizontal. */
.table-defilante { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-defilante > table { min-width: max-content; }
@media (min-width: 861px) { .table-defilante > table { min-width: 100%; } }

/* Sous 700 px, le bloc date + actions prend toute la largeur : la date se place au-dessus
   des boutons au lieu de les comprimer. */
@media (max-width: 700px) {
  .niches-barre-droite { width: 100%; justify-content: flex-start; }
  .niches-barre-droite .date-donnees { width: 100%; }
}

/* Liens légaux du pied de page de l'outil → pages publiques du site.
   Passent à la ligne proprement et restent lisibles jusqu'à 375 px. */
.br-footer-liens {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  margin-top: 10px; font-size: 12.5px;
}
.br-footer-liens a { color: var(--txt-secondaire); text-decoration: none; }
.br-footer-liens a:hover { color: var(--texte); text-decoration: underline; }

/* Bandeau DISCRET « actualisation en arrière-plan » : informe sans jamais masquer la
   liste des niches, qui reste affichée juste en dessous (le cache prime toujours). */
.scan-bandeau {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px solid var(--bordure); border-left: 3px solid var(--orange);
  border-radius: 10px; background: var(--carte);
  color: var(--txt-secondaire); font-size: 13px; line-height: 1.45;
}
/* `display:flex` ci-dessus prime sur la feuille du navigateur : SANS cette règle,
   l'attribut `hidden` n'a plus aucun effet et le bandeau reste affiché en permanence. */
.scan-bandeau[hidden] { display: none; }
.scan-bandeau svg { flex: none; color: var(--orange-fonce); animation: scan-tourne 1.8s linear infinite; }
@keyframes scan-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-bandeau svg { animation: none; } }