/* Boussole — feuille de style unique, sans framework, responsive mobile-first.
   Palette neutre inspirée de Mercury/Stripe Dashboard : la couleur est réservée
   à l'accent et aux signaux (hausse/baisse/neutre), le reste reste gris neutre
   pour ne pas fatiguer sur des tableaux denses (refonte du 28/07/2026). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cairo : réservée aux titres, à la marque et aux chiffres mis en avant (refonte
   du 02/08/2026, alignement visuel sur casablanca-bourse.com) — le corps de texte
   et les tableaux denses restent en Inter, plus lisible en petite taille et déjà
   en place partout. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/cairo-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/cairo-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/cairo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/cairo-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Subset arabe (Lot 34, ajouté le 18/08/2026) : les 4 faces latines ci-dessus
   ne couvrent aucun glyphe arabe (`unicode-range` limité à U+0000-02FF/1Dxx/
   1Exx/2Cxx/A7xx) — sourcées séparément depuis Google Fonts (Cairo, licence
   OFL), `unicode-range` copié tel quel depuis le CSS généré, pas retapé de
   mémoire. Même nom de famille que les faces latines : le navigateur choisit
   automatiquement la bonne face par plage Unicode, aucun sélecteur CSS à
   dupliquer pour l'arabe. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/cairo-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC,
    U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F,
    U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42,
    U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B,
    U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9,
    U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/cairo-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC,
    U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F,
    U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42,
    U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B,
    U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9,
    U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Palette alignée sur casablanca-bourse.com (refonte du 02/08/2026) : bleu de
   marque #1552EF (leur échelle primary-*), vert/rouge/ambre repris de leurs
   couleurs de statut. Tokens définis une seule fois ici et redéfinis par thème
   ci-dessous — jamais de couleur en dur ailleurs dans cette feuille. */
:root {
  --couleur-fond: #f7f9fc;
  --couleur-carte: #ffffff;
  --couleur-texte: #0b1220;
  --couleur-texte-att: #5b6b84;
  --couleur-bordure: #e1e6f0;
  --couleur-accent-teinte: #f5f8fe;
  --couleur-accent-teinte-forte: #cfdcfc;
  --couleur-accent: #1552ef;
  --couleur-accent-fonce: #0d3fbf;
  --couleur-accent-secondaire: #0d3fbf;
  --couleur-hausse: #12b76a;
  --couleur-baisse: #f04438;
  --couleur-neutre: #f79009;
  --couleur-info: #7c3aed;
  --couleur-bandeau: #f5f8fe;
  --couleur-avertissement: #fef3e2;
  --rayon: 6px;
  --rayon-petit: 4px;
  --ombre-carte: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 12px rgba(11, 18, 32, 0.04);
  --ombre-entete: 0 1px 2px rgba(11, 18, 32, 0.06);
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) laisse la bascule manuelle (bouton clair/sombre,
     app/static/js/theme.js) reprendre la main sur la préférence système. */
  :root:not([data-theme="light"]) {
    --couleur-fond: #0a0e17;
    --couleur-carte: #10161f;
    --couleur-texte: #e8edf7;
    --couleur-texte-att: #8a96ac;
    --couleur-bordure: #212a3a;
    --couleur-accent-teinte: #131b2e;
    --couleur-accent-teinte-forte: #1c2c55;
    --couleur-accent: #4c7aff;
    --couleur-accent-fonce: #7098ff;
    --couleur-accent-secondaire: #7098ff;
    --couleur-hausse: #34d399;
    --couleur-baisse: #fb6a5d;
    --couleur-neutre: #fbbf57;
    --couleur-info: #a78bfa;
    --couleur-bandeau: #131b2e;
    --couleur-avertissement: #33230c;
    --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 16px rgba(0, 0, 0, 0.3);
    --ombre-entete: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* Bascule manuelle (bouton clair/sombre) : l'emporte dans les deux sens sur la
   préférence système, `data-theme` posé sur <html> par app/static/js/theme.js. */
:root[data-theme="dark"] {
  --couleur-fond: #0a0e17;
  --couleur-carte: #10161f;
  --couleur-texte: #e8edf7;
  --couleur-texte-att: #8a96ac;
  --couleur-bordure: #212a3a;
  --couleur-accent-teinte: #131b2e;
  --couleur-accent-teinte-forte: #1c2c55;
  --couleur-accent: #4c7aff;
  --couleur-accent-fonce: #7098ff;
  --couleur-accent-secondaire: #7098ff;
  --couleur-hausse: #34d399;
  --couleur-baisse: #fb6a5d;
  --couleur-neutre: #fbbf57;
  --couleur-info: #a78bfa;
  --couleur-bandeau: #131b2e;
  --couleur-avertissement: #33230c;
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 16px rgba(0, 0, 0, 0.3);
  --ombre-entete: 0 1px 2px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --couleur-fond: #f7f9fc;
  --couleur-carte: #ffffff;
  --couleur-texte: #0b1220;
  --couleur-texte-att: #5b6b84;
  --couleur-bordure: #e1e6f0;
  --couleur-accent-teinte: #f5f8fe;
  --couleur-accent-teinte-forte: #cfdcfc;
  --couleur-accent: #1552ef;
  --couleur-accent-fonce: #0d3fbf;
  --couleur-accent-secondaire: #0d3fbf;
  --couleur-hausse: #12b76a;
  --couleur-baisse: #f04438;
  --couleur-neutre: #f79009;
  --couleur-info: #7c3aed;
  --couleur-bandeau: #f5f8fe;
  --couleur-avertissement: #fef3e2;
  --ombre-carte: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 12px rgba(11, 18, 32, 0.04);
  --ombre-entete: 0 1px 2px rgba(11, 18, 32, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  line-height: 1.5;
}

/* Lot 34 : Inter n'a aucun glyphe arabe. Pas de 4ᵉ fichier Cairo pour le
   corps de texte (garde la parité de portée avec la politique 600/700
   « titres seulement » ci-dessus, Cairo reste réservé aux titres même en
   arabe) — repli sur une pile système. */
[dir="rtl"] body {
  font-family:
    "Segoe UI",
    Tahoma,
    "Noto Sans Arabic",
    sans-serif;
}

a {
  color: var(--couleur-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

/* Cairo réservée aux titres/marque/chiffres mis en avant — jamais au corps de
   texte ni aux tableaux, où Inter reste plus lisible en dense (voir @font-face
   ci-dessus). */
h1,
h2,
h3,
.marque,
.chiffre,
.score-disque span {
  font-family:
    "Cairo",
    "Inter",
    system-ui,
    sans-serif;
}

.conteneur {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

header.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--couleur-bordure);
  background: var(--couleur-carte);
  box-shadow: var(--ombre-entete);
  margin-bottom: 1rem;
}

.entete-barre {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.entete-barre nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  flex: 1;
}

.entete-barre nav > a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--rayon-petit);
}

.entete-barre nav > a:hover {
  background: var(--couleur-accent-teinte);
  text-decoration: none;
  color: var(--couleur-accent-fonce);
}

/* Sous-menus déroulants (refonte du 02/08/2026) : <details>/<summary> plutôt que
   du JS — comportement natif au clic comme au tactile, cohérent avec
   `.panneau-technique` déjà utilisé ailleurs dans ce projet pour les mêmes
   raisons. Le survol (desktop uniquement) ouvre aussi le menu sans clic, en
   plus du comportement natif de <details>. */
.nav-menu {
  position: relative;
  margin: 0;
}

.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--rayon-petit);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--couleur-texte);
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary:hover,
.nav-menu[open] > summary {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent-fonce);
}

.nav-menu .chevron {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.nav-menu[open] .chevron {
  transform: rotate(180deg);
}

.nav-menu .menu-liste {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 230px;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 0.35rem;
  flex-direction: column;
  z-index: 30;
  margin-top: 0.25rem;
  display: none;
}

.nav-menu .menu-liste a {
  padding: 0.55rem 0.7rem;
  border-radius: var(--rayon-petit);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--couleur-texte);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu .menu-liste a:hover {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent-fonce);
}

.nav-menu[open] .menu-liste {
  display: flex;
}

@media (hover: hover) {
  .nav-menu:hover .menu-liste {
    display: flex;
  }
}

.nav-deconnexion {
  margin: 0;
  display: inline-flex;
}

.nav-deconnexion button {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

.bouton-theme {
  background: transparent;
  border: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte-att);
  border-radius: var(--rayon-petit);
  padding: 0.35rem 0.55rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.bouton-theme:hover {
  color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}

/* Lot 34 — sélecteur de langue fr/ar, à côté du bouton thème. Mêmes tokens
   que le reste du chrome, pas de nouvelle couleur. */
.langue-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-petit);
  padding: 0.15rem;
}

.langue-switch a {
  padding: 0.2rem 0.5rem;
  border-radius: calc(var(--rayon-petit) - 2px);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--couleur-texte-att);
  text-decoration: none;
}

.langue-switch a:hover {
  color: var(--couleur-accent);
  text-decoration: none;
}

.langue-switch a.actif {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent-fonce);
}

.barre-compte {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--couleur-texte);
  background: var(--couleur-accent-teinte);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.barre-compte:hover {
  color: var(--couleur-accent-fonce);
  text-decoration: none;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--couleur-texte);
  flex: none;
}

.marque-logo {
  flex: none;
  display: block;
}

.slogan {
  max-width: 1080px;
  margin: -0.35rem auto 0;
  padding: 0 1rem 0.6rem;
  font-size: 0.82rem;
  color: var(--couleur-texte-att);
}

.bandeau-etat {
  background: var(--couleur-bandeau);
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}

.bandeau-etat .conteneur {
  padding: 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-ok {
  background: color-mix(in srgb, var(--couleur-hausse) 18%, transparent);
  color: var(--couleur-hausse);
}

.badge-retard {
  background: color-mix(in srgb, var(--couleur-neutre) 20%, transparent);
  color: var(--couleur-neutre);
}

.badge-bloque {
  background: color-mix(in srgb, var(--couleur-baisse) 18%, transparent);
  color: var(--couleur-baisse);
}

/* Réservé aux badges purement informatifs, jamais un statut bloquant/positif/
   négatif (déjà couverts par -retard/-bloque/-ok) — introduit pour le stop
   suiveur (Lot 25) afin qu'il reste visuellement distinct de « Gelée »
   (-retard, orange) et « Apport recommandé » (-ok, vert) dans la même
   colonne du Bloc 3. */
.badge-info {
  background: color-mix(in srgb, var(--couleur-info) 18%, transparent);
  color: var(--couleur-info);
}

/* Indicateur d'analyse (remarque utilisateur du 05/08/2026, formulaire du
   Bloc 2, dashboard.html depuis la fusion avec l'ancien index.html le
   09/09/2026) : convention htmx standard (classe `.htmx-indicator`
   masquée par défaut, révélée par la classe `.htmx-request` posée par htmx
   sur l'élément ciblé par `hx-indicator` pendant la requête boostée). */
.htmx-indicator {
  display: none;
}

.htmx-request.htmx-indicator {
  display: block;
}

.indicateur-analyse {
  margin-top: 1rem;
}

.barre-progression {
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--couleur-accent) 15%, transparent);
  overflow: hidden;
}

.barre-progression-remplissage {
  height: 100%;
  width: 0%;
  background: var(--couleur-accent);
  border-radius: 999px;
  /* Ne prétend jamais connaître la durée exacte : ralentit à l'approche de
     92 % plutôt que d'atteindre 100 % avant la fin réelle du calcul (la
     navigation elle-même, à la réception de la réponse, referme la page). */
  animation: remplissage-analyse 75s cubic-bezier(0.1, 0.6, 0.4, 1) forwards;
}

@keyframes remplissage-analyse {
  0% {
    width: 0%;
  }
  100% {
    width: 92%;
  }
}

/* Pastille de notification (remarque utilisateur du 05/08/2026) : compte de
   demandes en attente (abonnement/couverture) sur le menu Administration
   (base.html) — rouge plein, contrairement aux `.badge-*` ci-dessus qui
   restent des pastilles de statut translucides, jamais un compteur urgent. */
.pastille-notif {
  display: inline-block;
  min-width: 1.2em;
  padding: 0 0.35em;
  margin-inline-start: 0.3rem;
  border-radius: 999px;
  background: var(--couleur-baisse);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
  vertical-align: middle;
}

/* Fiabilité insuffisante (Lot 31) : jamais `.badge-bloque` (rouge) — une
   donnée manquante n'est ni bonne ni mauvaise, juste inconnue, contrairement
   à un statut réellement bloquant. */
.badge-inconnu {
  background: color-mix(in srgb, var(--couleur-texte-att) 18%, transparent);
  color: var(--couleur-texte-att);
}

.badge-detenu {
  background: color-mix(in srgb, var(--couleur-accent-secondaire) 20%, transparent);
  color: var(--couleur-accent-secondaire);
  margin-inline-start: 0.4rem;
}

/* Distingue les valeurs déjà en portefeuille dans le tableau de prévisualisation
   d'import du récap — comparaison visuelle rapide de l'ancien et du nouveau cours
   (remarque utilisateur du 28/07/2026). */
tr.ligne-detenue {
  background: color-mix(in srgb, var(--couleur-accent-secondaire) 8%, transparent);
  border-inline-start: 3px solid var(--couleur-accent-secondaire);
}

tr.ligne-detenue:hover {
  background: color-mix(in srgb, var(--couleur-accent-secondaire) 14%, transparent);
}

.avertissement {
  background: var(--couleur-avertissement);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--couleur-texte-att);
  margin-bottom: 1.5rem;
}

.carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.carte h1,
.carte h2 {
  margin-top: 0;
}

/* Différenciation de hiérarchie entre blocs empilés (accueil, tableau de bord) :
   la carte qui porte l'action ou l'opportunité prioritaire se distingue par un
   liseré d'accent, sans toucher au contenu ni à la densité des tableaux. */
.carte-primaire {
  border-top: 3px solid var(--couleur-accent);
}

.carte-primaire > h1,
.carte-primaire > h2 {
  font-size: 1.35rem;
}

.grille-formulaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-petit);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  transition: border-color 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--couleur-accent);
}

button,
.bouton {
  background: var(--couleur-accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--rayon-petit);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition:
    filter 0.15s ease,
    transform 0.05s ease;
}

button:hover,
.bouton:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

button:active,
.bouton:active {
  transform: translateY(1px);
}

.bouton-secondaire {
  background: transparent;
  color: var(--couleur-accent);
  border: 1px solid var(--couleur-accent);
}

/* Pages publiques : CTA secondaires (Se connecter, Voir les offres) — fond
   blanc fixe, volontairement indépendant du thème clair/sombre pour rester
   lisible en toute circonstance, comme un bouton de marque. Bleu (accent) et
   forme pilule (.bouton-pill) depuis le 03/08/2026, sur maquette de
   référence transmise par l'utilisateur — remplace le style vert du
   02/08/2026 (`.bouton-vert`, supprimé). */
.bouton-contour-accent {
  background: #fff;
  color: var(--couleur-accent);
  border: 2px solid var(--couleur-accent);
}

.bouton-contour-accent:hover {
  background: var(--couleur-accent-teinte);
}

/* Forme pilule des CTA publics (Se connecter/Créer un compte/Voir les
   offres/Choisir cette offre), combinée à `.bouton`/`.bouton-contour-accent`
   — jamais généralisée à `.bouton` seul, qui reste carré ailleurs dans
   l'app (esthétique institutionnelle, cf. references/design.md). */
.bouton-pill {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 700;
}

/* Grand logo en tête des pages publiques pédagogiques (retour utilisateur du
   10/09/2026, `partials/_logo_page_intro.html`) : fond blanc fixe, même
   principe que `.bouton-contour-accent` ci-dessus — `logo-full.png` porte du
   texte marine en dur (fichier fourni tel quel), illisible sur une carte qui
   suivrait le thème sombre du reste de la page. */
.logo-page-intro {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--canva-rayon-carte, var(--rayon-petit));
  box-shadow: var(--canva-ombre-surface, var(--ombre-carte));
}

.logo-page-intro-image {
  width: min(100%, 220px);
  height: auto;
}

/* I3 : action destructive (suppression de compte) — même gabarit que .bouton,
   coloré avec le token déjà utilisé pour une moins-value. */
.bouton-danger {
  background: var(--couleur-baisse);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--rayon-petit);
  cursor: pointer;
  font-weight: 600;
}

.bouton-danger:hover {
  filter: brightness(1.08);
}

.bouton-petit {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.champ-marge {
  margin-top: 1rem;
}

.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

/* Colonne « Actions » du Bloc 1 (retour utilisateur du 10/09/2026) : Détails
   et Ticket d'ordre empilés en boutons distincts plutôt qu'en liens texte
   séparés d'un `<br/>`, ambigus dans une cellule étroite — voir dashboard.html. */
.actions-ligne--verticale {
  flex-direction: column;
  align-items: stretch;
}

.actions-ligne--verticale > .bouton-secondaire {
  text-align: center;
}

.form-action-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.champ-fichier {
  width: auto;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
}

.champ-renommer {
  width: 12rem;
  max-width: 100%;
  flex: 1 1 auto;
}

.conteneur-connexion {
  max-width: 420px;
  padding-top: 3rem;
}

.marque-connexion {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

.liens-connexion {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: start;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--couleur-bordure);
  vertical-align: top;
}

th {
  color: var(--couleur-texte-att);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

tbody tr {
  transition: background-color 0.1s ease;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--couleur-accent) 5%, transparent);
}

.tableau-scroll {
  overflow-x: auto;
}

/* `table { width: 100% }` empêche sinon une cellule de texte libre (phrase de
   justification, note) de forcer le débordement horizontal du `.tableau-scroll`
   parent : le texte s'écrase en escalier d'un mot par ligne au lieu de déclencher
   le défilement, comme les autres colonnes plus rigides (boutons, badges) le font
   déjà naturellement (repéré à l'audit visuel du 27/07/2026). */
td.rationale,
td.texte-libre {
  min-width: 220px;
}

/* Bloc 1 « À acheter » (retour utilisateur du 10/09/2026) : en `table-layout:
   auto` (comportement par défaut ci-dessus), les colonnes rigides (prix,
   note, recommandation, boutons) captaient plus de largeur que la colonne
   « Explication », pourtant la seule à contenir une vraie phrase — le
   `min-width` ci-dessus ne suffisait pas face à un tableau aussi dense.
   `table-layout: fixed` rend déterminant le `<colgroup>` posé dans
   dashboard.html (mêmes proportions quel que soit le contenu des cellules),
   avec une largeur plancher pour que les colonnes ne s'écrasent pas sous les
   petits écrans — `.tableau-scroll` prend alors le relais en défilement
   horizontal, comme les autres tableaux denses du site. */
.table-opportunites {
  table-layout: fixed;
  min-width: 920px;
}

.table-opportunites td.rationale {
  min-width: 0;
}

/* Thème Tabler (lot 48) : `.table thead th` impose `white-space: nowrap`,
   pensé pour des colonnes en largeur libre. Combiné aux colonnes étroites en
   pourcentage ci-dessus (6-9 %), les intitulés longs (« RECOMMANDATION »,
   « SEUIL DE VENTE », « HORIZON ESTIMÉ »…) débordaient sur les colonnes
   voisines et se chevauchaient (retour utilisateur du 11/09/2026). Autoriser
   le retour à la ligne dans l'en-tête, comme demandé, plutôt que d'élargir
   encore le tableau. */
.table-opportunites thead th {
  white-space: normal;
  vertical-align: bottom;
}

.gain-positif {
  color: var(--couleur-hausse);
  font-weight: 600;
}

.gain-negatif {
  color: var(--couleur-baisse);
  font-weight: 600;
}

/* Flèche de variation à côté du cours du Bloc 3 (demande utilisateur du
   19/08/2026) : sens du dernier cours par rapport à la séance précédente. */
.fleche-variation {
  display: inline-block;
  margin-inline-start: 0.35rem;
  font-size: 0.7rem;
}

.fleche-hausse {
  color: var(--couleur-hausse);
}

.fleche-baisse {
  color: var(--couleur-baisse);
}

.fleche-stable {
  color: var(--couleur-texte-att);
}

.score-barre-fond {
  background: var(--couleur-bordure);
  border-radius: 999px;
  height: 8px;
  width: 100%;
  overflow: hidden;
}

.score-barre-remplissage {
  height: 100%;
  border-radius: 999px;
  background: var(--couleur-accent);
}

.puce-recommandation {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.puce-garder {
  background: color-mix(in srgb, var(--couleur-neutre) 20%, transparent);
  color: var(--couleur-neutre);
}

.puce-vendre {
  background: color-mix(in srgb, var(--couleur-baisse) 18%, transparent);
  color: var(--couleur-baisse);
}

.puce-renforcer {
  background: color-mix(in srgb, var(--couleur-hausse) 18%, transparent);
  color: var(--couleur-hausse);
}

.compositions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.composition-carte {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1rem;
}

.composition-carte h3 {
  margin-top: 0;
}

details.panneau-technique {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

details.panneau-technique summary {
  cursor: pointer;
  font-weight: 600;
}

.breakdown-ligne {
  display: grid;
  grid-template-columns: 10rem 1fr 2.5rem;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0;
  font-size: 0.85rem;
}

.grille-lexique {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2rem;
}

.entree-glossaire {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.entree-glossaire:last-child {
  border-bottom: none;
}

/* Repli pour les pages dont les `.entree-glossaire` n'ont pas encore reçu
   d'icône — `.entree-glossaire-entete h3` ci-dessous, même spécificité mais
   déclarée après, prend le dessus là où le bloc icône+titre est posé. À
   retirer une fois toutes les pages alignées sur ce bloc. */
.entree-glossaire h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.entree-glossaire-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.entree-glossaire-entete h3 {
  margin: 0;
  font-size: 1rem;
}

.entree-glossaire-icone {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--couleur-accent);
}

.entree-glossaire-icone svg {
  display: block;
  width: 100%;
  height: 100%;
}

.entree-glossaire p {
  margin: 0;
  color: var(--couleur-texte-att);
  font-size: 0.9rem;
}

.resume-portefeuille {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.resume-portefeuille .chiffre {
  font-size: 1.4rem;
  font-weight: 700;
}

.resume-portefeuille .libelle {
  font-size: 0.8rem;
  color: var(--couleur-texte-att);
}

.grille-cartes-blocs {
  display: grid;
  gap: 1.5rem;
}

.rationale {
  color: var(--couleur-texte-att);
  font-size: 0.88rem;
}

.canvas-enveloppe {
  position: relative;
  width: 100%;
  height: 320px;
}

.canvas-enveloppe.petit {
  height: 180px;
}

.zoom-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: none;
  background: color-mix(in srgb, var(--couleur-accent) 15%, transparent);
  border-left: 1px solid var(--couleur-accent);
  border-right: 1px solid var(--couleur-accent);
  pointer-events: none;
}

.zoom-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.5rem;
}

.zoom-astuce {
  font-size: 0.8rem;
  color: var(--couleur-texte-att);
}

.zoom-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.liste-liens-valeurs a {
  display: inline-block;
  margin-block: 0.15rem;
  margin-inline-end: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
}

.message-alerte {
  background: var(--couleur-avertissement);
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.message-succes {
  background: color-mix(in srgb, var(--couleur-hausse) 15%, transparent);
  border: 1px solid var(--couleur-hausse);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

/* G6 : état vide -> onboarding (ex. Bloc 3 sans position enregistrée). */
.onboarding-vide {
  background: var(--couleur-bandeau);
  border: 1px dashed var(--couleur-bordure);
  border-radius: var(--rayon-petit);
  padding: 0.8rem 1rem;
}

.onboarding-vide p:first-child {
  margin-top: 0;
}

.onboarding-vide p:last-child {
  margin-bottom: 0;
}

/* Révélation discrète au scroll (animations.js) : opacité + léger décalage,
   jamais de mouvement qui déplace la lecture des chiffres. Le score et les
   graphiques Chart.js restent à animation désactivée (chandelier.js) — la
   précision des données prime sur l'effet. */
.carte-masquee {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.carte-masquee.carte-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .carte-masquee {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .entete-barre nav > a,
  .nav-menu > summary {
    font-size: 0.85rem;
  }

  .nav-menu .menu-liste {
    inset-inline: auto 0;
  }

  .insight-bande {
    grid-template-columns: repeat(2, 1fr);
  }

  .carte {
    padding: 1rem 0.75rem;
  }

  .resume-portefeuille {
    gap: 1rem;
  }

  th,
  td {
    padding: 0.4rem 0.35rem;
    font-size: 0.82rem;
  }

  .actions-ligne {
    align-items: flex-start;
  }
}

/* Bande d'insight (accueil, refonte du 02/08/2026) : met en avant les éléments
   propres à un robo-advisor (opportunités actives, meilleure note, statut du
   portefeuille) avant même le formulaire de simulation, plutôt que de les
   laisser émerger seulement après un aller-retour. */
.insight-bande {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--couleur-bordure);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--ombre-carte);
}

.insight-tuile {
  display: block;
  background: var(--couleur-carte);
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* Les 8 tuiles sont des liens (demande utilisateur du 23/08/2026) : chacune
   mène à la section qu'elle résume, jamais une simple donnée affichée sans
   suite possible. */
.insight-tuile:hover,
.insight-tuile:focus-visible {
  background: var(--couleur-fond);
}

.insight-tuile:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: -2px;
}

.insight-tuile .insight-libelle {
  font-size: 0.76rem;
  color: var(--couleur-texte-att);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.insight-tuile .insight-valeur {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.insight-tuile .insight-unite {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--couleur-texte-att);
}

.insight-tuile .insight-sous-ligne {
  font-size: 0.78rem;
  color: var(--couleur-texte-att);
  margin-top: 0.3rem;
}

/* Disque de score (remplace le simple texte « X/100 » du Bloc 1) : anneau
   `conic-gradient` proportionnel au score, jamais animé (chandelier.js/Chart.js
   restent la seule source d'animation de données). */
.score-disque {
  --pct: 0;
  --couleur-note: var(--couleur-accent);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--couleur-note) calc(var(--pct) * 1%), var(--couleur-bordure) 0);
  flex: none;
}

/* Couleur de la note selon sa valeur (demande utilisateur du 03/08/2026) :
   mêmes tokens sémantiques que le reste de l'app (badges, gains) — vert
   (excellente), bleu (bonne), orange (moyenne), rouge (faible). */
.score-disque.note-excellente {
  --couleur-note: var(--couleur-hausse);
}

.score-disque.note-bonne {
  --couleur-note: var(--couleur-accent);
}

.score-disque.note-moyenne {
  --couleur-note: var(--couleur-neutre);
}

.score-disque.note-faible {
  --couleur-note: var(--couleur-baisse);
}

.score-disque span {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--couleur-carte);
  color: var(--couleur-note);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Tons sémantiques des tuiles d'insight (Lot 24, demande utilisateur du
   02/08/2026) : liseré + couleur de la valeur, jamais la couleur d'accent
   (réservée à la marque/aux liens) — mêmes tokens hausse/baisse/neutre que le
   reste de l'app (badges, gains, puces de recommandation). */
.insight-positif {
  border-inline-start: 3px solid var(--couleur-hausse);
}

.insight-positif .insight-valeur {
  color: var(--couleur-hausse);
}

.insight-negatif {
  border-inline-start: 3px solid var(--couleur-baisse);
}

.insight-negatif .insight-valeur {
  color: var(--couleur-baisse);
}

.insight-neutre {
  border-inline-start: 3px solid var(--couleur-neutre);
}

/* 2e bande d'insight (demande utilisateur du 23/08/2026) : ton violet distinct
   pour une donnée purement informative (dividendes disponibles), ni gain ni
   perte — même token que le badge take-profit (Lot 25). */
.insight-info {
  border-inline-start: 3px solid var(--couleur-info);
}

.insight-info .insight-valeur {
  color: var(--couleur-info);
}

/* Checklist d'onboarding (accueil, Lot 24) : réutilise `.onboarding-vide`
   (déjà utilisée par le Bloc 3 vide, Lot G6) pour le même traitement visuel
   d'état « à compléter », plutôt qu'un nouveau style dédié. */
.liste-checklist {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.liste-checklist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

/* ---------- Pages publiques (landing, tarifs) ---------- */

.hero-landing {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.titre-hero {
  font-size: 2rem;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.sous-titre-hero {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  color: var(--couleur-texte-att);
  font-size: 1rem;
}

.cta-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Cadre blanc fixe autour de l'infographie (fond quasi blanc dans l'image
   fournie) : évite un bloc blanc discordant en thème sombre. */
.schema-fonctionnement-cadre {
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-top: 1rem;
}

.schema-fonctionnement {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-petit);
}

.galerie-captures {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.galerie-captures figure {
  margin: 0;
  width: 100%;
  max-width: 760px;
}

.galerie-captures img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-bordure);
  box-shadow: var(--ombre-carte);
  display: block;
}

.galerie-captures figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--couleur-texte-att);
  text-align: center;
}

.grille-avantages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .grille-avantages {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grille-avantages {
    grid-template-columns: 1fr;
  }
}

.avantage {
  padding: 1rem;
  border-radius: var(--rayon);
  background: var(--couleur-accent-teinte);
}

.avantage-icone {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.4rem;
}

.avantage h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.avantage p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--couleur-texte-att);
}

.cta-finale {
  text-align: center;
  padding: 2rem 1.5rem;
}

.grille-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.carte-plan {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.liste-particularites {
  text-align: start;
  margin: 0.75rem 0 0;
  padding-inline-start: 1.2rem;
  font-size: 0.85rem;
  color: var(--couleur-texte-att);
}

.liste-particularites li {
  margin-bottom: 0.35rem;
}

.liste-particularites li:last-child {
  margin-bottom: 0;
}

.mention-particularites {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--couleur-texte-att);
}

/* `margin-top: auto` (carte-plan en colonne flex) aligne les boutons des 2
   cartes en bas malgré la hauteur inégale des listes de particularités
   (la carte Gratuit n'a pas de section « particularités » de service). */
.carte-plan .bouton-pill {
  margin-top: auto;
  align-self: center;
}

/* Décalage sous l'en-tête collant (header.entete, position: sticky) pour que
   le formulaire ne soit pas masqué en arrivant depuis « Choisir cette
   offre ». */
#formulaire-rib {
  scroll-margin-top: 5.5rem;
}

.carte-plan-vedette {
  border: 2px solid var(--couleur-hausse);
  transform: scale(1.03);
}

.badge-plan {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  box-shadow: var(--ombre-carte);
}

.badge-plan-neutre {
  background: var(--couleur-neutre);
}

.badge-plan-hausse {
  background: var(--couleur-hausse);
}

.badge-plan-accent {
  background: var(--couleur-accent);
}

.prix-plan {
  font-family: "Cairo", "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}

.unite-plan {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte-att);
}

.avantage-sans-pub {
  color: var(--couleur-hausse);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.form-plan {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: start;
}

/* Lot 29 — encart publicitaire AdSense et bandeau de consentement cookies.
   Bordure en tirets + étiquette « Publicité » explicite : jamais confondu
   visuellement avec une `.carte` de recommandation. */
.pub-encart {
  border: 1px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.pub-etiquette {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-att);
  margin-bottom: 0.5rem;
}

.pub-gerer-consentement {
  background: none;
  border: none;
  color: var(--couleur-texte-att);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem 0 0;
}

.bandeau-consentement-pub {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 640px;
  margin: 0 auto;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1rem;
  z-index: 50;
}

.bandeau-consentement-pub p {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.bandeau-consentement-pub-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Aperçu du nouveau dashboard utilisateur.
   Le thème est volontairement encapsulé sous `.dashboard-shell--preview` :
   tant que l'utilisateur ne l'a pas validé, le dashboard réel conserve son
   rendu actuel. La palette reprend les tokens Boussole existants et ajoute
   seulement une hiérarchie plus proche d'un dashboard financier moderne. */
.bandeau-etat-apercu {
  background: var(--couleur-accent-teinte);
  border-bottom-color: var(--couleur-accent-secondaire);
}

.dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.dashboard-heading h1 {
  margin: 0;
  color: var(--couleur-texte);
  font-family: "Cairo", "Inter", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.dashboard-kicker,
.dashboard-preview-kicker {
  margin: 0 0 0.35rem;
  color: var(--couleur-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-context {
  margin: -0.35rem 0 0.25rem;
  color: var(--couleur-texte-att);
  font-size: 0.9rem;
}

.dashboard-preview-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--couleur-accent-secondaire);
  border-radius: 999px;
  color: var(--couleur-accent-fonce);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-preview-link:hover,
.dashboard-preview-link:focus-visible {
  background: var(--couleur-accent-teinte);
}

.dashboard-shell--preview {
  gap: 1.35rem;
}

.dashboard-preview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--couleur-accent-secondaire);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 92% 12%, rgba(21, 82, 239, 0.18), transparent 34%),
    linear-gradient(135deg, var(--couleur-accent-teinte), var(--couleur-carte));
  box-shadow: var(--ombre-carte);
}

.dashboard-preview-hero h1 {
  margin: 0;
  color: var(--couleur-texte);
  font-family: "Cairo", "Inter", sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.dashboard-preview-hero p {
  max-width: 58rem;
  margin: 0.55rem 0 0;
  color: var(--couleur-texte-att);
}

.dashboard-preview-hero .bouton-secondaire {
  flex: 0 0 auto;
  white-space: nowrap;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.dashboard-kpi {
  min-height: 8.3rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 1.1rem;
  background: var(--couleur-carte);
  box-shadow: var(--ombre-carte);
}

.dashboard-kpi-label {
  display: block;
  color: var(--couleur-texte-att);
  font-size: 0.8rem;
  font-weight: 700;
}

.dashboard-kpi strong {
  display: block;
  margin: 0.55rem 0 0.25rem;
  color: var(--couleur-texte);
  font-family: "Cairo", "Inter", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.1;
}

.dashboard-kpi small {
  color: var(--couleur-texte-att);
  font-size: 0.76rem;
}

.dashboard-kpi--positive {
  border-top: 3px solid var(--couleur-hausse);
}

.dashboard-kpi--positive strong {
  color: var(--couleur-hausse);
}

.dashboard-kpi--accent {
  border-top: 3px solid var(--couleur-accent);
}

.dashboard-kpi--status {
  border-top: 3px solid var(--couleur-info);
}

.dashboard-kpi--status strong {
  color: var(--couleur-info);
  font-size: 1.2rem;
}

.dashboard-shell--preview .dashboard-panel {
  border: 1px solid var(--couleur-bordure);
  border-radius: 1.25rem;
  box-shadow: var(--ombre-carte);
}

.dashboard-shell--preview .dashboard-panel > h2 {
  margin-bottom: 1rem;
  color: var(--couleur-texte);
  font-family: "Cairo", "Inter", sans-serif;
  font-size: 1.25rem;
}

.dashboard-shell--preview .dashboard-panel--opportunities {
  border-top: 3px solid var(--couleur-accent);
}

.dashboard-shell--preview .dashboard-panel--allocation {
  border-top: 3px solid var(--couleur-info);
}

.dashboard-shell--preview .dashboard-panel--portfolio {
  border-top: 3px solid var(--couleur-hausse);
}

.dashboard-shell--preview .dashboard-panel table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.dashboard-shell--preview .dashboard-panel th {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-texte-att);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-shell--preview .dashboard-panel td,
.dashboard-shell--preview .dashboard-panel th {
  border-bottom-color: var(--couleur-bordure);
}

.dashboard-shell--preview .composition-carte {
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(24, 52, 104, 0.08);
}

.dashboard-preview-disabled {
  color: var(--couleur-texte-att);
  font-size: 0.82rem;
}

html[data-theme="dark"] .dashboard-preview-hero {
  background:
    radial-gradient(circle at 92% 12%, rgba(93, 139, 255, 0.22), transparent 34%),
    linear-gradient(135deg, var(--couleur-accent-teinte), var(--couleur-carte));
}

@media (max-width: 900px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-heading,
  .dashboard-preview-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-preview-hero .bouton-secondaire {
    align-self: flex-start;
  }

  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}