/* Design system DMS Capital Fund — fond blanc, accent rouge de marque.
   Extrait du <style> inline de base.html pour être mis en cache par le
   navigateur (WhiteNoise ajoute une empreinte au nom du fichier en prod). */

:root {
  /* Fond blanc : plateforme sobre et professionnelle. Les cartes sont
     blanches elles aussi, distinguées par un filet et une ombre douce
     plutôt que par un aplat. */
  --fond: #ffffff;
  --fond-alt: #f6f7f9;
  --surface: #ffffff;

  --texte: #16202e;
  --texte-doux: #5b6675;

  --rouge: #8a0605;
  --rouge-vif: #b5231f;
  --rouge-clair: #e8817c;
  --accent: var(--rouge);
  --accent-voile: rgba(138, 6, 5, 0.07);
  --accent-trait: rgba(138, 6, 5, 0.28);
  /* Texte posé sur un aplat rouge. */
  --sur-accent: #ffffff;

  /* Vert assombri : #2fb673 ne passait que 2,6:1 sur blanc. */
  --hausse: #1a7f4b;
  --erreur: #b3261e;

  /* Bleu des graphiques : le rouge est celui de la marque et des actions, il
     tirait l'œil sur chaque ligne du tableau. Même bleu que l'icône Word. */
  --graphique: #1f5fbf;

  --trait: #e4e7ec;
  --ombre: 0 1px 2px rgba(22, 32, 46, 0.04), 0 4px 14px rgba(22, 32, 46, 0.05);
  --maxw: 1160px;

  /* Polices : DM Serif Display pour les titres et le nom de l'entreprise ;
     Inter pour tout le reste, en deux graisses seulement — 400 pour le texte,
     600 (SemiBold) pour les boutons, la navigation et les étiquettes. Les
     chiffres sont alignés (tabular-nums) partout où l'on compare des
     montants : prix, cours, tableaux. */
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titres: "DM Serif Display", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 var(--police-texte);
}

/* DM Serif Display n'existe qu'en graisse 400 : la demander plus grasse
   ferait fabriquer un faux gras par le navigateur. */
h1,
h2,
h3 {
  font-family: var(--police-titres);
  font-weight: 400;
  line-height: 1.1;
}

/* Inter n'est chargée qu'en 400 et 600 : le gras, c'est le SemiBold. */
b,
strong {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accessibilité : un focus visible sur tout élément interactif. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--rouge);
  color: var(--sur-accent);
  font-weight: 600;
}

.saut-contenu:focus {
  left: 8px;
  top: 8px;
}

.wrap {
  max-width: var(--maxw);
  margin: auto;
  padding: 0 24px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}

.nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Inter SemiBold : en capitales, un nom de marque se lit mieux un peu
     plus petit et plus espacé qu'un titre. */
  color: var(--texte);
  font: 600 1.02rem var(--police-texte);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Le logo (logo-dms.png, carré rouge plein) aux coins arrondis de l'interface. */
/* Téléphone : le nom tient sur une ligne à côté de l'avatar et du ☰. */
@media (max-width: 420px) {
  .logo {
    gap: 10px;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
  }
}

.logo-image {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  /* Poussés à droite : l'avatar du membre connecté vient juste après. */
  margin-left: auto;
  font-size: 0.9rem;
}

.nav-links a {
  color: var(--texte-doux);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--accent);
}

/* Sélecteur de langue : deux pastilles FR | EN, la langue affichée pleine. */
.choix-langue {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--trait);
  border-radius: 99px;
}

.nav-links .choix-langue a {
  padding: 4px 9px;
  border-radius: 99px;
  color: var(--texte-doux);
  font: 600 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.nav-links .choix-langue a:hover {
  color: var(--accent);
}

.nav-links .choix-langue a[aria-current="true"] {
  background: var(--rouge);
  color: var(--sur-accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--rouge);
  color: var(--sur-accent);
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.btn:hover {
  background: var(--rouge-vif);
}

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

.btn-secondaire:hover {
  background: var(--accent-voile);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--trait);
  color: var(--texte);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 1.1rem;
  cursor: pointer;
}

main {
  min-height: calc(100vh - 68px);
}

/* Indicateur de chargement HTMX : masqué par défaut, affiché pendant la
   requête via la classe .htmx-request posée par htmx sur l'indicateur. */
.htmx-indicator {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  opacity: 1;
}

.hero {
  padding: 82px 0 62px;
  border-bottom: 1px solid var(--trait);
}

.eyebrow {
  color: var(--accent);
  font: 400 0.74rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  /* Un caractère d'affichage se resserre un peu en très grande taille. */
  letter-spacing: -0.01em;
  margin: 18px 0;
}

.hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero p {
  max-width: 690px;
  color: var(--texte-doux);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.chip {
  border: 1px solid var(--trait);
  border-radius: 99px;
  padding: 7px 14px;
  color: var(--texte-doux);
  font: 400 0.75rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.chip b {
  color: var(--accent);
}

section {
  padding: 72px 0;
}

.section-heading {
  max-width: 650px;
  margin-bottom: 38px;
}

.section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 12px 0;
}

.section-heading p {
  color: var(--texte-doux);
}

/* Catalogue de formations : grille par défaut, liste au choix. Le même
   conteneur porte les deux dispositions, comme pour les recommandations. */
.formations-affichage {
  display: grid;
  gap: 22px;
}

.formations-affichage-grille {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cours {
  box-shadow: var(--ombre);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
}

.cours-head,
.cours-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--accent-voile);
  font-size: 1.35rem;
}

.niveau {
  border: 1px solid var(--accent-trait);
  border-radius: 99px;
  padding: 4px 10px;
  color: var(--accent);
  font: 400 0.65rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Trois niveaux, trois tons : vert pour entrer, rouge de marque au milieu,
   encre pour le niveau le plus exigeant. */
.niveau.debutant {
  color: var(--hausse);
  border-color: rgba(47, 182, 115, 0.4);
}

.niveau.avance {
  color: var(--texte);
  border-color: var(--texte-doux);
}

.cours-populaire {
  border-color: var(--accent-trait);
}

.cours-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.cours h3 {
  font-size: 1.25rem;
  margin: 0;
}

.cours-description {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.94rem;
}

.specs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font: 400 0.73rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.specs b {
  color: var(--texte-doux);
}

.prix {
  color: var(--accent);
  font: 600 1.1rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.prix small {
  display: block;
  color: var(--texte-doux);
  font: 400 0.7rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.badge {
  position: absolute;
  top: -11px;
  right: 20px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--rouge);
  color: var(--sur-accent);
  font: 600 0.63rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Bande alternée : c'est le seul contraste de fond du site, il sert à
   séparer les sections sans introduire de couleur. */
.light,
.section-alt {
  background: var(--fond-alt);
}

.light p {
  color: var(--texte-doux);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature {
  box-shadow: var(--ombre);
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 12px;
}

.feature h3 {
  font-size: 1.05rem;
}

.feature p {
  font-size: 0.9rem;
}

.bloc-cta {
  margin-top: 28px;
}

.empty {
  padding: 28px;
  border: 1px dashed var(--trait);
  border-radius: 12px;
  color: var(--texte-doux);
  grid-column: 1 / -1;
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: 0.8rem;
}

.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pied a:hover {
  color: var(--accent);
}

/* Réseaux sociaux : deux pastilles rondes au milieu du pied de page. */
.reseaux {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reseaux a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--trait);
  border-radius: 50%;
  color: var(--texte-doux);
  transition:
    color 0.2s,
    border-color 0.2s;
}

.reseaux a:hover,
.reseaux a:focus-visible {
  border-color: var(--accent-trait);
  color: var(--accent);
}

.reseaux svg {
  fill: currentColor;
}

/* ---- Média « Analyse financière » ---- */

.filtres-rubriques {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
}

.puce {
  padding: 8px 15px;
  border: 1px solid var(--trait);
  border-radius: 99px;
  color: var(--texte-doux);
  font: 400 0.78rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.puce:hover {
  color: var(--accent);
  border-color: var(--accent-trait);
}

.puce-active {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--sur-accent);
}

.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
}

.article-carte {
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  overflow: hidden;
}

.article-visuel {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--fond);
}

.article-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  padding: 24px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rubrique {
  color: var(--accent);
  font: 400 0.68rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-une {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--rouge);
  color: var(--sur-accent);
  font: 600 0.6rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.article-carte h3 {
  margin: 0;
  font-size: 1.15rem;
}

.article-carte h3 a:hover {
  color: var(--accent);
}

.article-carte p {
  flex: 1;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.article-pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.article-illustration {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 34px;
}

/* Page d'un article : une seule colonne de lecture, centrée — titre, image,
   texte et documents y partagent les mêmes bords. Le texte s'arrêtait à
   760 px sous une image de toute la largeur, et laissait la moitié droite
   de la page vide. */
.article-article .wrap {
  max-width: 860px;
}

/* Un titre d'article est une phrase, souvent longue : à la taille des
   titres d'accueil, il prenait cinq lignes dans la colonne de lecture. */
.article-article .hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
}

/* Corps de l'article : mis en forme dans l'éditeur de l'administration,
   nettoyé à l'enregistrement (html_article.py). Les styles ciblent donc les
   balises brutes plutôt que des classes. */
.article-contenu {
  font-size: 1.04rem;
  line-height: 1.7;
}

.article-contenu > :first-child {
  margin-top: 0;
}

/* L'espace entre deux blocs vient d'une seule règle, la suivante : les
   marges du navigateur sous chaque paragraphe s'y ajouteraient. */
.article-contenu p,
.article-contenu ul,
.article-contenu ol,
.article-contenu blockquote,
.article-contenu table {
  margin-bottom: 0;
}

.article-contenu > * + * {
  margin-top: 1.1em;
}

.article-contenu ul,
.article-contenu ol {
  padding-left: 1.4em;
}

.article-contenu li + li {
  margin-top: 0.45em;
}

/* Un paragraphe dans une puce, une case de tableau ou une citation —
   Google Docs en met un partout — ne doit pas l'écarter de son cadre. */
.article-contenu :is(li, td, th, blockquote) > p {
  margin: 0;
}

.article-contenu blockquote > p + p {
  margin-top: 0.6em;
}

.article-contenu li::marker {
  color: var(--accent);
}

.article-contenu h4 {
  margin-top: 1.4em;
  font: 600 1.02rem var(--police-texte);
}

.article-contenu hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--trait);
}

.article-contenu h2 {
  margin-top: 1.9em;
  font-size: 1.55rem;
}

.article-contenu h3 {
  margin-top: 1.6em;
  font-size: 1.2rem;
}

.article-contenu a {
  color: var(--accent);
  text-decoration: underline;
}

.article-contenu img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.article-contenu blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  color: var(--texte-doux);
  font-style: italic;
}

.article-contenu table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.article-contenu th,
.article-contenu td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--trait);
  text-align: left;
}

.article-contenu th {
  color: var(--accent);
  font: 600 0.75rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Documents joints : une ligne par fichier, l'icône colorée selon le format
   (rouge PDF, bleu Word, orange PowerPoint), comme dans un explorateur. */
.documents-article {
  margin-top: 44px;
}

.documents-article h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
}

.liste-documents {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.document {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.document:hover {
  border-color: var(--accent-trait);
  box-shadow: var(--ombre);
}

.document-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: #5b6675;
  color: #ffffff;
  font: 600 0.66rem var(--police-texte);
  letter-spacing: 0.02em;
}

.document-pdf {
  background: #b3261e;
}

.document-word {
  background: #1f5fbf;
}

.document-powerpoint {
  background: #c4501b;
}

.document-texte {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.document-titre {
  overflow-wrap: anywhere;
  font-weight: 600;
  line-height: 1.35;
}

.document-meta {
  color: var(--texte-doux);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.document-action {
  flex: none;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 520px) {
  .document-action {
    display: none;
  }
}

.alerte-apercu {
  max-width: 690px;
  margin-top: 26px;
  background: var(--accent-voile);
  border: 1px solid var(--accent-trait);
  color: var(--accent);
}

/* Le menu passe au ☰ dès que la barre ne tient plus sur une ligne. Depuis
   que « Connexion » et « Créer un compte » y figurent tous deux, il lui faut
   environ 1 050 px : à 800 px, le seuil des autres mises en page, le bouton
   sortait de l'écran sur les tablettes et petits portables. */
@media (max-width: 1100px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px;
    background: var(--surface);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
  }

  .nav-links .choix-langue {
    align-self: flex-start;
    margin-top: 14px;
  }

  .nav-links .choix-langue a {
    padding: 8px 16px;
    border-bottom: 0;
    font-size: 0.8rem;
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 800px) {
  .features,
  .grille-articles {
    grid-template-columns: 1fr;
  }

  .article-contenu table {
    display: block;
    overflow-x: auto;
  }

  .hero {
    padding-top: 60px;
  }
}

/* ---- Authentification ---- */

.section-auth {
  display: grid;
  place-items: center;
  padding: 72px 0;
  background: var(--fond-alt);
  min-height: calc(100vh - 68px);
}

.carte-auth {
  box-shadow: var(--ombre);
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
}

.carte-auth h1 {
  margin: 12px 0 8px;
  font-size: clamp(1.9rem, 4vw, 2.4rem);
}

.carte-auth-intro {
  margin: 0 0 28px;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Formulaires d'authentification : deux colonnes sur les paires de champs
   courts, une seule dès que la place manque. */
.champs-paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 560px) {
  .champs-paire {
    grid-template-columns: 1fr;
  }
}

.form-auth {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.champ label {
  color: var(--texte-doux);
  font: 400 0.78rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.champ-saisie {
  width: 100%;
  padding: 13px 15px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 9px;
  color: var(--texte);
  /* 16px minimum : en dessous, iOS zoome à la mise au point du champ. */
  font: 400 1rem var(--police-texte);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.champ-saisie::placeholder {
  color: #98a1ad;
}

.champ-saisie:focus {
  outline: none;
  border-color: var(--accent);
  background: #fffdfd;
}

.champ-en-erreur .champ-saisie {
  border-color: var(--erreur);
}

/* Rouges d'erreur foncés : les teintes claires d'origine, pensées pour
   l'ancien thème sombre, tombaient sous 3:1 sur fond blanc. */
.champ-erreur {
  margin: 0;
  color: var(--erreur);
  font-size: 0.83rem;
}

.alerte {
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 0.9rem;
}

.alerte p {
  margin: 0;
}

.alerte-erreur {
  background: rgba(179, 38, 30, 0.07);
  border: 1px solid rgba(179, 38, 30, 0.3);
  color: var(--erreur);
}

.btn-bloc {
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
}

.carte-auth-pied {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: 0.88rem;
}

.carte-auth-pied a {
  color: var(--accent);
}

.carte-auth-pied a:hover {
  text-decoration: underline;
}

/* ---- Menu du compte : avatar et panneau déroulant ---- */

.menu-compte {
  position: relative;
}

.menu-compte > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 99px;
  color: var(--texte-doux);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

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

.menu-compte > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Initiales sur l'aplat rouge de la marque, cerclées d'un liseré qui se
   renforce au survol et à l'ouverture. */
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rouge-vif), var(--rouge));
  color: var(--sur-accent);
  font: 600 0.8rem var(--police-texte);
  letter-spacing: 0.03em;
}

.menu-compte > summary .avatar {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 3px var(--accent-trait);
  transition: box-shadow 0.2s;
}

.menu-compte > summary:hover .avatar,
.menu-compte[open] > summary .avatar {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--accent);
}

.menu-compte-chevron {
  transition: transform 0.2s;
}

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

.menu-compte-panneau {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 20;
  width: 290px;
  padding: 8px;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 2px 6px rgba(22, 32, 46, 0.06),
    0 18px 40px rgba(22, 32, 46, 0.14);
  animation: menu-compte-ouverture 0.16s ease-out;
}

@keyframes menu-compte-ouverture {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.menu-compte-identite {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 8px;
}

.menu-compte-identite > div {
  min-width: 0;
}

.avatar-grand {
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
}

.menu-compte-identite strong {
  display: block;
  color: var(--texte);
  font-size: 0.95rem;
  line-height: 1.3;
}

.menu-compte-email {
  display: block;
  overflow: hidden;
  color: var(--texte-doux);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-compte-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 10px 12px;
}

.etat-compte {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--accent-voile);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
}

.etat-compte-attente {
  background: #fdf3e1;
  color: #8a5a00;
}

/* Un membre porte la couleur de son palier : Bronze, Silver, Gold, Diamond. */
.etat-compte.palier-1 {
  background: #f7ede4;
  color: #8a4b1c;
}

.etat-compte.palier-2 {
  background: #eef0f3;
  color: #4b5563;
}

.etat-compte.palier-3 {
  background: #fbf1d6;
  color: #7a5b00;
}

.etat-compte.palier-4 {
  background: #e6f0fb;
  color: #1f5fbf;
}

.etat-compte-refuse,
.etat-compte-expire {
  background: var(--fond-alt);
  color: var(--texte-doux);
}

.menu-compte-echeance {
  color: var(--texte-doux);
  font-size: 0.76rem;
}

.menu-compte-liens {
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--trait);
  list-style: none;
}

.menu-compte-deconnexion {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--trait);
}

.menu-compte-liens a,
.menu-compte-deconnexion button {
  display: flex;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--texte);
  font: 400 0.88rem var(--police-texte);
  text-align: left;
  cursor: pointer;
}

.menu-compte-liens a:hover,
.menu-compte-liens a[aria-current="page"],
.menu-compte-deconnexion button:hover {
  background: var(--fond-alt);
  color: var(--accent);
}

/* Zone « compte » de la barre : les deux entrées côte à côte, avec leur
   hiérarchie — se connecter est un lien de plus, s'inscrire est l'action
   qu'on attend d'un visiteur. */
.nav-compte-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-links a.nav-connexion {
  white-space: nowrap;
  font-weight: 600;
}

.nav-links a.nav-inscription {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--rouge);
  border-radius: 8px;
  background: var(--rouge);
  color: var(--sur-accent);
  font: 600 0.85rem var(--police-texte);
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.nav-links a.nav-inscription:hover {
  background: var(--rouge-vif);
  border-color: var(--rouge-vif);
  color: var(--sur-accent);
}

/* Sur sa propre page, le bouton reste plein : un halo dit « vous y êtes »,
   là où les autres liens passent simplement au rouge. */
.nav-links a.nav-inscription[aria-current="page"] {
  box-shadow: 0 0 0 3px var(--accent-voile);
}

@media (max-width: 800px) {
  .carte-auth {
    padding: 28px 22px;
  }
}

/* Même seuil que le ☰ (voir plus haut) : le menu déroulant empile ses
   actions et l'avatar se cale à côté du bouton. */
@media (max-width: 1100px) {
  /* Le menu déroulant du téléphone empile : les deux actions de compte
     prennent toute la largeur, sous le sélecteur de langue. */
  .nav-links .nav-compte-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
  }

  .nav-links a.nav-inscription {
    justify-content: center;
    width: 100%;
    margin: 14px 0 4px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--rouge);
  }

  /* Sur mobile, l'avatar reste dans la barre, à côté du ☰ ; son panneau
     s'accroche à la barre entière (position: static ici) pour tenir dans
     l'écran même étroit. */
  .nav {
    gap: 14px;
  }

  .compte {
    margin-left: auto;
  }

  .menu-compte {
    position: static;
  }

  .menu-compte-panneau {
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ---- Espace membre ---- */

/* Première section d'une page sans héros : sans le bandeau d'accueil, les
   72 px du haut collaient le titre sous la barre de navigation. */
.section-premiere {
  padding-top: 40px;
}

.section-alt {
  border-block: 1px solid var(--trait);
}

.champ-aide {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.8rem;
}

/* Case à cocher : libellé à droite, pas au-dessus comme les autres champs. */
.champ-case {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
}

.champ-case label {
  grid-column: 2;
  grid-row: 1;
  /* Un libellé de case à cocher est une phrase, pas un intitulé de champ :
     casse normale et graisse courante. */
  font: 400 0.92rem var(--police-texte);
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte);
}

.champ-case input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  accent-color: var(--rouge);
}

.champ-case .champ-aide,
.champ-case .champ-erreur {
  grid-column: 2;
}

.liste-attente {
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.liste-attente li {
  margin-bottom: 6px;
}

/* Échéance d'adhésion : une ligne au-dessus des recommandations, visible
   seulement dans les 30 derniers jours. */
.bandeau-echeance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 28px;
  padding: 11px 16px;
  background: var(--accent-voile);
  border: 1px solid var(--accent-trait);
  border-radius: 9px;
  color: var(--texte);
  font-size: 0.9rem;
}

.bandeau-echeance a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Recommandations --- */

/* Barre de section : titre à gauche, bascule d'affichage à droite. */
.barre-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}

.barre-section .section-heading {
  margin-bottom: 0;
}

.bascule-vue {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--fond-alt);
  border: 1px solid var(--trait);
  border-radius: 99px;
}

.bascule-vue a {
  padding: 7px 15px;
  border-radius: 99px;
  color: var(--texte-doux);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}

.bascule-vue a:hover {
  color: var(--texte);
}

.bascule-vue a[aria-current="true"] {
  background: var(--accent);
  color: var(--sur-accent);
}

/* Le conteneur porte les deux dispositions : « grille » n'aurait plus été
   un nom honnête une fois la vue liste possible. */
.reco-affichage {
  display: grid;
  gap: 20px;
}

.reco-affichage-grille {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.carte-reco {
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--texte-doux);
  border-radius: 14px;
}

.carte-reco-achat {
  border-left-color: var(--hausse);
}

.carte-reco-vente {
  border-left-color: var(--rouge);
}

.reco-identite {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reco-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reco-symbole {
  color: var(--texte);
  font: 600 1rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.reco-place {
  margin-left: 8px;
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.reco-sens {
  padding: 4px 11px;
  border-radius: 99px;
  font: 600 0.68rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reco-sens-achat {
  background: rgba(47, 182, 115, 0.16);
  color: var(--hausse);
}

.reco-sens-vente {
  background: rgba(232, 129, 124, 0.16);
  color: var(--rouge);
}

.carte-reco h3 {
  margin: 0;
  font-size: 1.15rem;
}

.reco-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-block: 1px solid var(--trait);
}

.reco-chiffres dt {
  color: var(--texte-doux);
  font: 400 0.68rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reco-chiffres dd {
  margin: 3px 0 0;
  color: var(--texte);
  font: 600 0.95rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.reco-vide {
  color: var(--texte-doux);
  opacity: 0.55;
}

.reco-positif {
  color: var(--hausse);
}

.reco-negatif {
  color: var(--rouge);
}

/* Un argumentaire long étirait toute la rangée : les cartes d'une même ligne
   s'alignent sur la plus haute. Le texte est donc borné à quelques lignes,
   et le <details> le déplie sur place. */
.reco-argumentaire {
  flex: 1;
  margin: 0;
}

.reco-argumentaire > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.reco-argumentaire > summary::-webkit-details-marker {
  display: none;
}

.reco-argumentaire > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.reco-texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.6;
}

.reco-argumentaire[open] .reco-texte {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.reco-plus {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.reco-argumentaire:not([open]) .reco-plus-fermer,
.reco-argumentaire[open] .reco-plus-ouvrir {
  display: none;
}

/* Posée par dms.js quand le texte tient entièrement : l'invite n'aurait
   alors rien à révéler. Sans JavaScript, elle reste affichée — un repli
   sans effet est moins grave qu'un texte tronqué sans moyen de l'ouvrir. */
.reco-courte .reco-plus {
  display: none;
}

/* --- Disposition en liste --- */

.reco-affichage-liste {
  grid-template-columns: 1fr;
  gap: 12px;
}

.reco-affichage-liste .carte-reco {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  grid-template-areas:
    "identite chiffres"
    "identite argumentaire"
    "identite pied";
  align-items: start;
  column-gap: 26px;
  row-gap: 10px;
  padding: 18px 22px;
}

.reco-affichage-liste .reco-identite {
  grid-area: identite;
}

.reco-affichage-liste .reco-chiffres {
  grid-area: chiffres;
  padding: 0 0 12px;
  border-block-start: 0;
  /* Quatre colonnes fixes, et non `auto-fit` : c'est ce qui garantit que
     « Objectif » d'une ligne se trouve au-dessus de celui de la suivante. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reco-affichage-liste .reco-argumentaire {
  grid-area: argumentaire;
}

.reco-affichage-liste .reco-pied {
  grid-area: pied;
}

/* Deux lignes en liste : les rangées restent comparables d'un coup d'œil. */
.reco-affichage-liste .reco-texte {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.reco-pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.avertissement {
  margin: 28px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  color: var(--texte-doux);
  font-size: 0.85rem;
  line-height: 1.6;
}

.avertissement strong {
  color: var(--texte);
}

/* --- Vidéos --- */

.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.carte-video {
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 14px;
  overflow: hidden;
}

.video-cadre {
  position: relative;
  width: 100%;
  /* Réserve la place du lecteur avant son chargement : pas de saut de page. */
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lien-externe {
  display: block;
  padding: 32px 20px;
  background: rgba(232, 129, 124, 0.08);
  color: var(--accent);
  font-weight: 600;
  text-align: center;
}

.video-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.video-corps h3 {
  margin: 0;
  font-size: 1.05rem;
}

.video-corps p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.video-meta {
  display: flex;
  gap: 14px;
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .reco-affichage-grille,
  .grille-videos {
    grid-template-columns: 1fr;
  }

  /* Trop étroit pour deux colonnes : la liste retrouve l'empilement. */
  .reco-affichage-liste .carte-reco {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identite"
      "chiffres"
      "argumentaire"
      "pied";
  }

  .reco-affichage-liste .reco-chiffres {
    padding: 12px 0;
    border-block-start: 1px solid var(--trait);
  }

  .barre-section {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ---- Outils de section : filtre à gauche, disposition à droite ---- */

.outils-section {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}

/* Les puces portent une marge basse pensée pour la page Articles, où elles
   précèdent la grille. Dans une barre d'outils, elle décalait les puces
   vers le haut par rapport à la bascule grille / liste voisine. */
.outils-section .filtres-rubriques {
  margin-bottom: 0;
}

.puce-compte {
  margin-left: 5px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Le sens garde sa couleur même filtre inactif : c'est le repère de lecture
   des cartes, il doit être le même partout. */
.puce-achat.puce-active {
  background: var(--hausse);
  border-color: var(--hausse);
  color: #fff;
}

.puce-vente.puce-active {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--sur-accent);
}

/* ---- Fiche valeur : sélecteur et indicateurs ---- */

.selecteur-valeur {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.selecteur-valeur label {
  color: var(--texte-doux);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.selecteur-valeur select {
  flex: 1 1 320px;
  /* Sans « min-width », l'élément refuse de descendre sous la largeur de son
     option la plus longue : « BANQUE INTERNATIONALE POUR L'INDUSTRIE... »
     poussait la page en défilement horizontal sur téléphone. */
  min-width: 0;
  max-width: 460px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 10px;
  color: var(--texte);
  font: inherit;
  font-size: 0.95rem;
}

.selecteur-valeur select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Analyses : aucune valeur choisie --- */

/* Sans valeur sélectionnée il n'y a pas de tableau à montrer : l'invite et
   les dernières publications occupent la place, plutôt qu'un vide sous le
   sélecteur. */
.analyse-sans-valeur {
  display: grid;
  gap: 30px;
}

.analyse-invite {
  max-width: 60ch;
  margin: 0;
  color: var(--texte-doux);
}

/* La barre porte un h3 et non un h2 : le titre de la section reste
   « Analyse par valeur. ». */
.analyse-sans-valeur .barre-section h3 {
  margin: 0;
  font-size: 1.3rem;
}

.btn-discret {
  background: transparent;
  border: 1px solid var(--trait);
  color: var(--texte-doux);
}

.btn-discret:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fiche-societe {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
  overflow: hidden;
}

/* --- Tableau --- */

/* Le tableau défile dans son propre cadre : la page, elle, ne part jamais
   en défilement horizontal. */
.tableau-defilant {
  overflow-x: auto;
}

.tableau-indicateurs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

/* Bandeau de marque : l'en-tête pose le rouge en haut de la fiche, les
   intitulés en blanc. */
.tableau-indicateurs thead th {
  padding: 11px 10px;
  background: var(--accent);
  color: var(--sur-accent);
  font: 600 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
  vertical-align: bottom;
}

.tableau-indicateurs thead th:first-child {
  text-align: left;
}

/* Les millésimes commandent la lecture : plus grands, et sans l'interlettrage
   des intitulés, qui espaçait les chiffres. La graisse reste celle du site —
   Inter n'est chargée qu'en 400 et 600. */
.tableau-indicateurs thead th.col-exercice {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

/* Le libellé porte le texte long : il prend ce qu'il lui faut, sans
   descendre sous la largeur où « Résultat d'exploitation » se hacherait. */
.tableau-indicateurs th:first-child {
  min-width: 150px;
}

.col-note {
  display: block;
  margin-top: 3px;
  color: var(--texte-doux);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.tableau-indicateurs tbody th,
.tableau-indicateurs tbody td {
  padding: 8px 10px;
  /* Filet plus clair que les bords de la fiche : la trame du tableau se
     devine, elle ne quadrille pas. */
  border-top: 1px solid rgba(228, 231, 236, 0.75);
}

/* Hiérarchie du tableau : le poste et son chiffre portent la lecture, la
   variation qui suit n'est qu'un commentaire — d'où l'écart de taille. */
.tableau-indicateurs tbody th {
  color: var(--texte);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
  white-space: normal;
}

/* Unité rappelée une fois par ligne plutôt que dans chaque cellule. Elle ne
   se coupe jamais : « Md FCFA » sur deux lignes ne veut plus rien dire. */
.unite {
  margin-left: 7px;
  color: var(--texte-doux);
  font: 400 0.7rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau-indicateurs tbody td {
  text-align: right;
  white-space: nowrap;
}

.chiffre {
  color: var(--texte);
  font: 400 1rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  /* Chiffres de largeur fixe : les colonnes s'alignent au chiffre près. */
}

.tableau-indicateurs tbody tr:hover {
  background: var(--fond-alt);
}

/* Écart avec l'exercice précédent. Volontairement sans vert ni rouge : une
   baisse du ratio d'endettement est une bonne nouvelle, la couleur porterait
   un jugement que le chiffre seul ne permet pas. */
.ecart {
  display: block;
  margin-top: 3px;
  color: var(--texte-doux);
  font: 400 0.7rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.ecart span {
  margin-right: 3px;
  font-size: 0.6rem;
}

.cellule-vide {
  color: var(--texte-doux);
  opacity: 0.5;
  font-family: var(--police-texte);
  font-variant-numeric: tabular-nums;
}

/* Poste vide sur tous les exercices : conservé pour que le tableau se lise
   de la même façon d'une société à l'autre, mais mis en retrait. */
.tableau-indicateurs .ligne-vide th,
.tableau-indicateurs .ligne-vide td {
  opacity: 0.55;
}

/* Le chiffre d'affaires — ou le produit net bancaire — ouvre la lecture :
   libellé et montants en gras. */
.tableau-indicateurs tbody tr.ligne-principale th,
.tableau-indicateurs tbody tr.ligne-principale .chiffre {
  font-weight: 600;
}

/* Filet entre les fondamentaux, montants tirés des comptes, et les ratios
   et données par action qui suivent. Rouge du bandeau d'en-tête : il se lit
   comme une coupure du tableau, pas comme un trait de trame de plus. */
.tableau-indicateurs tbody tr.ligne-separation th,
.tableau-indicateurs tbody tr.ligne-separation td {
  border-top: 2px solid var(--accent);
}

/* --- Lignes de croissance --- */

/* Dérivée du poste qui la précède : elle s'y rattache visuellement plutôt
   que de former une ligne de plein exercice. */
/* Sélecteurs alignés sur ceux de la règle de base : à spécificité égale,
   c'est l'ordre dans le fichier qui tranche — pas besoin de `!important`. */
.tableau-indicateurs tbody tr.ligne-croissance th,
.tableau-indicateurs tbody tr.ligne-croissance td {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 12px;
}

.tableau-indicateurs tbody tr.ligne-croissance th {
  padding-left: 24px;
  color: var(--texte-doux);
  font-size: 0.76rem;
  font-weight: 400;
}

.croissance {
  font: 400 0.76rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

/* Case « ns » : le taux manque pour une raison — base nulle ou exercice
   déficitaire. Le pointillé signale l'infobulle qui l'explique ; seules ces
   cases portent un `title`. */
.croissance[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* --- Colonne de tendance --- */

/* Deux classes : l'emporte sur `.tableau-indicateurs tbody td`, qui aligne
   les cellules à droite. */
.tableau-indicateurs .col-tendance {
  width: 84px;
  text-align: center;
}

/* Histogramme de tendance : un exercice par barre, la plus récente pleine,
   les précédentes en voile. L'échelle épouse la série (voir
   AnalyseFinanciere._barres) ; la ligne du zéro n'apparaît que si un
   exercice est déficitaire. */
.tendance {
  display: block;
  margin: 0 auto;
}

.tendance-barre {
  fill: var(--graphique);
  opacity: 0.35;
}

.tendance-barre-derniere {
  opacity: 0.9;
}

.tendance-zero {
  stroke: var(--trait);
  stroke-width: 1;
}

.fiche-commentaire {
  margin: 0;
  padding: 20px 28px 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.fiche-pied {
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 28px;
  border-top: 1px solid var(--trait);
  background: var(--fond-alt);
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.fiche-societe .empty {
  margin: 0;
  padding: 40px 28px;
}

/* --- La société : présentation et fiche, au-dessus du tableau --- */

.info-societe {
  margin-bottom: 24px;
  padding: 20px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

.info-societe-tete h3 {
  margin: 0;
  font-size: 1.2rem;
}

.info-societe-tete .note-traduction {
  margin: 10px 0 0;
}

.info-presentation {
  color: var(--texte-doux);
  line-height: 1.6;
}

.info-presentation p {
  margin: 10px 0 0;
}

/* --- Fiche signalétique : une bande de repères, sous la présentation --- */

/* Trois colonnes sur toute la largeur du bloc, sans cadre propre : un filet
   la détache de la présentation, rien de plus. Les colonnes se partagent la
   place selon leur contenu — deux chiffres courts d'un côté, une adresse et
   des numéros de téléphone de l'autre — et passent à la ligne quand l'écran
   se resserre. */
.fiche-signaletique {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  font-size: 0.86rem;
}

/* Sans présentation, la fiche suit directement le titre : pas de filet
   au-dessus d'un vide. */
.info-societe-tete + .fiche-signaletique {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.signaletique-colonne {
  flex: 5 1 220px;
  min-width: 0;
}

/* Coefficients entiers : en dessous de 1, une colonne seule sur sa ligne
   ne la remplirait pas. */
.signaletique-bourse {
  flex: 4 1 200px;
}

.signaletique-coordonnees {
  flex: 8 1 280px;
}

.signaletique-dirigeants {
  flex: 6 1 240px;
}

/* Intitulés de colonne en petites capitales, comme ceux du tableau. */
.signaletique-colonne h4 {
  margin: 0 0 8px;
  color: var(--texte-doux);
  font: 600 0.66rem var(--police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signaletique-chiffres,
.signaletique-contacts {
  display: grid;
  gap: 5px;
  margin: 0;
}

/* Une paire par ligne, libellé à gauche : deux fois moins haut qu'un
   libellé posé au-dessus de sa valeur. */
.signaletique-chiffres div,
.signaletique-contacts div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.signaletique-chiffres dt,
.signaletique-contacts dt {
  flex: none;
  color: var(--texte-doux);
}

.signaletique-chiffres dd,
.signaletique-contacts dd {
  margin: 0 0 0 auto;
  color: var(--texte);
  line-height: 1.45;
  text-align: right;
}

/* Les repères du capital se comparent : chiffres alignés, en gras. */
.signaletique-chiffres dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.signaletique-chiffres small {
  color: var(--texte-doux);
  font-size: 0.7rem;
  font-weight: 400;
}

/* Les coordonnées sont du texte : alignées à gauche, sur une colonne de
   libellés de largeur fixe, une adresse sur trois lignes se lit comme un
   paragraphe et non comme une colonne de chiffres. */
.signaletique-contacts div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
}

.signaletique-contacts dd {
  margin: 0;
  text-align: left;
  /* Adresses et e-mails longs : coupés plutôt que de déborder. */
  overflow-wrap: anywhere;
}

/* Dirigeants : le nom d'abord, la fonction en petit dessous. */
/* Sur toute la largeur (tablette), les dirigeants se rangent sur plusieurs
   colonnes plutôt que de s'empiler. */
.signaletique-dirigeants ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 7px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signaletique-dirigeants li b {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

.signaletique-dirigeants li span {
  display: block;
  color: var(--texte-doux);
  font-size: 0.76rem;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .info-societe {
    padding: 18px 18px 18px;
  }
}

/* --- Documents de la société, sous la fiche --- */

.documents-societe {
  margin-top: 24px;
  padding: 24px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

.documents-societe-tete h3 {
  margin: 0;
  font-size: 1.2rem;
}

.documents-societe-tete p {
  margin: 6px 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.documents-exercice {
  margin-top: 22px;
}

/* L'exercice en intertitre discret. */
.documents-exercice h4 {
  margin: 0 0 10px;
  color: var(--texte-doux);
  font: 600 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liste-documents-grille {
  /* Deux colonnes au plus dans la largeur du site : au-delà, les titres
     longs (« Résolutions de l'assemblée générale… ») se brisaient mal. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

.documents-societe .document {
  background: var(--fond-alt);
}

.documents-societe .document:hover {
  background: var(--surface);
}

.documents-societe .empty {
  margin: 20px 0 0;
  padding: 22px;
}

@media (max-width: 700px) {
  .fiche-commentaire,
  .fiche-pied {
    padding-inline: 18px;
  }

  .documents-societe {
    padding: 20px 18px 22px;
  }
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Air entre la barre d'outils et les cartes : sans lui, le badge
   « Populaire », posé à cheval sur le bord de la carte, touchait les puces. */
#catalogue-formations .barre-section {
  margin-bottom: 36px;
}

/* ---- Formations : disposition en liste ---- */

.formations-affichage-liste {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Une rangée par formation : repères à gauche, texte au centre, prix et
   bouton à droite — la colonne que l'on parcourt pour comparer. */
.formations-affichage-liste .cours {
  display: grid;
  /* Colonnes de largeur fixe, pas `auto` : chaque carte est sa propre
     grille, et « Intermédiaire », plus large que « Débutant », décalait
     sinon le titre d'une rangée à l'autre. */
  grid-template-columns: 118px minmax(0, 1fr) 160px;
  grid-template-areas:
    "tete corps pied"
    "tete specs pied";
  align-items: center;
  column-gap: 24px;
  row-gap: 10px;
  padding: 18px 22px;
}

.formations-affichage-liste .cours-head {
  grid-area: tete;
  flex-direction: column;
  align-items: center;
  align-self: start;
  gap: 8px;
}

.formations-affichage-liste .cours-corps {
  grid-area: corps;
  gap: 4px;
}

.formations-affichage-liste .specs {
  grid-area: specs;
  padding-top: 0;
  border-top: 0;
}

.formations-affichage-liste .cours-foot {
  grid-area: pied;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.formations-affichage-liste .badge {
  right: auto;
  left: 22px;
}

@media (max-width: 700px) {
  .formations-affichage-liste .cours {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tete" "corps" "specs" "pied";
  }

  .formations-affichage-liste .cours-head,
  .formations-affichage-liste .cours-foot {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .formations-affichage-liste .cours-foot {
    justify-content: space-between;
  }
}

/* ---- Formations : inscription ---- */

.inscription-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .inscription-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.inscription-intro h2 {
  margin: 12px 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.inscription-intro p {
  color: var(--texte-doux);
}

.etapes-inscription {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes-inscription li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  counter-increment: etape;
}

.etapes-inscription li::before {
  content: counter(etape);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-trait);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font: 600 0.85rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.etapes-inscription b {
  color: var(--texte);
}

.etapes-inscription span {
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.carte-inscription {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
  /* Garde le haut de la carte sous la barre de navigation fixe. */
  scroll-margin-top: 90px;
}

@media (max-width: 560px) {
  .carte-inscription {
    padding: 22px 18px;
  }
}

/* Halo bref quand une carte « S'inscrire » amène au formulaire. */
.carte-inscription-signalee {
  animation: halo-inscription 1.4s ease-out;
}

@keyframes halo-inscription {
  from {
    box-shadow: 0 0 0 0 rgba(138, 6, 5, 0.35);
  }
  to {
    box-shadow: 0 0 0 16px rgba(138, 6, 5, 0);
  }
}

select.champ-saisie {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6675' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

textarea.champ-saisie {
  min-height: 90px;
  resize: vertical;
}

.mention {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.8rem;
  text-align: center;
}

/* Piège à robots : hors écran plutôt que `display: none`, que certains
   robots savent reconnaître. */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inscription-reussie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  text-align: center;
}

.inscription-reussie h3 {
  margin: 0;
  font-size: 1.4rem;
}

.inscription-reussie p {
  max-width: 440px;
  margin: 0;
  color: var(--texte-doux);
}

.pastille-ok {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(26, 127, 75, 0.12);
  color: var(--hausse);
  font-size: 1.6rem;
  font-weight: 600;
}

/* ---- Messages de l'application ---- */

/* Sous la barre de navigation, dans le flux : le message pousse la page au
   lieu de la recouvrir. Vide, la zone ne prend aucune place. */
.zone-messages .wrap {
  display: grid;
  gap: 10px;
  padding-block: 18px 0;
}

.message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--trait);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--ombre);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.message p {
  margin: 0;
  padding-top: 2px;
  color: var(--texte);
  font-size: 0.93rem;
  line-height: 1.5;
}

.message-icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--texte-doux);
}

.message-success {
  border-left-color: var(--hausse);
}

.message-success .message-icone {
  background: var(--hausse);
}

.message-warning {
  border-left-color: #b7791f;
}

.message-warning .message-icone {
  background: #b7791f;
}

.message-error {
  border-left-color: var(--erreur);
}

.message-error .message-icone {
  background: var(--erreur);
}

.message-info {
  border-left-color: var(--accent);
}

.message-info .message-icone {
  background: var(--accent);
}

.message-fermer {
  width: 30px;
  height: 30px;
  margin: -3px -4px 0 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--texte-doux);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.message-fermer:hover,
.message-fermer:focus-visible {
  background: var(--fond-alt);
  color: var(--texte);
}

.message-sortie {
  opacity: 0;
  transform: translateY(-6px);
}

/* ---- Accueil : en-têtes de section ---- */

/* La barre (titre + lien « Tout voir ») n'a pas de marge propre : elle
   collait sinon aux cartes qui la suivent. */
.section-actualites .barre-section,
#publications .barre-section {
  margin-bottom: 34px;
}

/* ---- Actualités ---- */

/* Accueil : une actualité en grand, les suivantes en regard. */
.actus-une {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Les petites cartes se partagent la hauteur de la grande : pas de vide
   sous la colonne de droite. */
.actus-secondaires {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
}

.grille-actus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.actu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: var(--ombre);
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.actu:hover {
  border-color: var(--accent-trait);
  box-shadow:
    0 1px 2px rgba(22, 32, 46, 0.05),
    0 10px 26px rgba(22, 32, 46, 0.09);
}

.actu-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-voile), var(--fond-alt));
}

.actu-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.actu:hover .actu-visuel img {
  transform: scale(1.03);
}

/* Sans photo : l'icône de la catégorie, sur un voile de la couleur de marque. */
.actu-sans-photo {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 2.6rem;
}

.actu-nb-photos {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(22, 32, 46, 0.75);
  color: #fff;
  font: 400 0.7rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.actu-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
}

.actu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-avenir {
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(26, 127, 75, 0.12);
  color: var(--hausse);
  font: 600 0.6rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Contenu affiché en français sur le site anglais, faute de traduction.
   Discret : une information, pas une alerte. */
.badge-francais {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid var(--trait);
  border-radius: 99px;
  background: var(--fond-alt);
  color: var(--texte-doux);
  font: 600 0.6rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cours-corps > .badge-francais {
  margin-bottom: 8px;
}

.note-traduction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 690px;
  margin: 20px 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.actu h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

/* Toute la carte cliquable, par le seul lien du titre. */
.actu h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.actu:hover h3 a {
  color: var(--accent);
}

.actu:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.actu h3 a:focus-visible {
  outline: none;
}

.actu-resume {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.actu-date {
  margin: auto 0 0;
  padding-top: 4px;
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.actu-vedette h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.actu-vedette .actu-corps {
  padding: 24px 26px;
}

.actu-vedette .actu-resume {
  font-size: 0.98rem;
}

/* Vignette à gauche, texte à droite : trois actualités tiennent à côté de
   la grande sans l'écraser. */
.actu-compacte {
  flex-direction: row;
  min-height: 108px;
}

.actu-compacte .actu-visuel {
  flex: none;
  width: 38%;
  max-width: 190px;
  aspect-ratio: auto;
}

.actu-compacte .actu-sans-photo {
  font-size: 1.8rem;
}

.actu-compacte .actu-corps {
  gap: 6px;
  padding: 14px 16px;
}

.actu-compacte h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.98rem;
}

/* Une seule actualité : elle prend toute la largeur, photo à gauche. */
.actus-une-seule {
  grid-template-columns: minmax(0, 1fr);
}

.actus-une-seule .actu-vedette {
  flex-direction: row;
}

.actus-une-seule .actu-vedette .actu-visuel {
  flex: 0 0 55%;
}

.actus-une-seule .actu-vedette .actu-corps {
  justify-content: center;
}

@media (max-width: 860px) {
  .actus-une {
    grid-template-columns: minmax(0, 1fr);
  }

  .actus-une-seule .actu-vedette {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .actu-compacte .actu-visuel {
    width: 104px;
  }

  .grille-actus {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 36px;
}

.pagination-position {
  color: var(--texte-doux);
  font: 400 0.78rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

/* --- Fiche d'une actualité --- */

.actu-illustration {
  display: block;
  margin-bottom: 34px;
  cursor: zoom-in;
}

.actu-illustration img {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: 14px;
}

.galerie-titre {
  margin: 46px 0 18px;
  font-size: 1.45rem;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--fond-alt);
  cursor: zoom-in;
}

.galerie img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.galerie a:hover img {
  transform: scale(1.05);
}

.galerie-legende {
  display: block;
  margin-top: 6px;
  color: var(--texte-doux);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* --- Visionneuse de photos (créée par dms.js) --- */

.visionneuse {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 14, 20, 0.95);
  color: #fff;
}

.visionneuse::backdrop {
  background: rgba(10, 14, 20, 0.95);
}

.visionneuse figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 56px 64px 28px;
}

.visionneuse img {
  max-width: 100%;
  max-height: calc(100% - 60px);
  object-fit: contain;
  border-radius: 6px;
}

.visionneuse figcaption {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  text-align: center;
}

.visionneuse-compteur {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.visionneuse button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.visionneuse button:hover,
.visionneuse button:focus-visible {
  background: rgba(255, 255, 255, 0.26);
}

.visionneuse button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.visionneuse button[hidden] {
  display: none;
}

.visionneuse-fermer {
  top: 14px;
  right: 14px;
}

.visionneuse-precedente,
.visionneuse-suivante {
  top: 50%;
  transform: translateY(-50%);
}

.visionneuse-precedente {
  left: 12px;
}

.visionneuse-suivante {
  right: 12px;
}

@media (max-width: 600px) {
  .visionneuse figure {
    padding: 64px 12px 84px;
  }

  /* Sur téléphone, les flèches descendent sous la photo, à portée de pouce. */
  .visionneuse-precedente,
  .visionneuse-suivante {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .visionneuse-precedente {
    left: calc(50% - 58px);
  }

  .visionneuse-suivante {
    right: calc(50% - 58px);
  }
}

/* ---- Accueil : demande de consultation ---- */

.atouts-consultation {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.atouts-consultation li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.atouts-consultation li > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--trait);
  font-size: 1.1rem;
}

.atouts-consultation b {
  display: block;
  color: var(--texte);
}

.atouts-consultation div span {
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.section-consultation .avertissement {
  background: var(--surface);
}

/* Le besoin, en tuiles : un <fieldset> dont on retire l'habillage natif. */
.tuiles-besoin {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tuiles-besoin legend {
  margin-bottom: 7px;
  padding: 0;
  color: var(--texte-doux);
  font: 400 0.78rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

/* Deux classes : l'emporte sur `.champ label`, pensé pour les libellés
   posés au-dessus des champs. */
.tuiles-besoin .tuile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 10px;
  color: var(--texte);
  font: 400 0.92rem var(--police-texte);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.tuiles-besoin .tuile:hover {
  border-color: var(--accent-trait);
}

/* Le bouton radio reste visible, à droite : il porte l'état même dans un
   navigateur qui ignore :has(). */
.tuile input {
  order: 3;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--rouge);
}

.tuile-icone {
  font-size: 1.25rem;
}

.tuiles-besoin .tuile:has(input:checked) {
  background: var(--accent-voile);
  border-color: var(--accent);
}

.tuiles-besoin .tuile:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.champ-en-erreur .tuile {
  border-color: var(--erreur);
}


/* --- Vitrine : la bannière de l'accueil --- */

/* Nom neutre à dessein : les bloqueurs de publicité masquent les éléments
   dont la classe contient « banniere », « pub » ou « ad », y compris les
   annonces de la maison. Voir app/templates/app/partials/_vitrine.html. */

/* En tête de page, juste sous la barre de navigation. Le bandeau d'accueil
   qui suit perd une partie de sa marge haute : la bannière occupe déjà cet
   espace, et le titre de l'académie reste visible sans défiler. */
.section-vitrine {
  padding: 28px 0 0;
}

.section-vitrine + .hero {
  padding-top: 52px;
}

/* Trois jeux de couleurs, choisis dans l'administration. Chacun ne fait que
   redéfinir ces variables : la mise en page, elle, est commune. */
.vitrine {
  --vitrine-fond: #16202e;
  --vitrine-texte: #ffffff;
  --vitrine-doux: rgba(255, 255, 255, 0.76);
  --vitrine-accent: var(--rouge-clair);
  --vitrine-trait: rgba(255, 255, 255, 0.34);
  --vitrine-motif: rgba(255, 255, 255, 0.12);
  --vitrine-bouton-fond: #ffffff;
  --vitrine-bouton-texte: #16202e;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 18px;
  /* Un halo discret en haut à gauche, derrière le texte. Il s'éteint avant
     la colonne du visuel, qui reste d'un aplat : le fondu de la photo s'y
     raccorde sans couture. */
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.07), transparent 40%),
    var(--vitrine-fond);
  color: var(--vitrine-texte);
  box-shadow: var(--ombre);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.vitrine-bordeaux {
  --vitrine-fond: var(--rouge);
  --vitrine-accent: #ffd2cf;
  --vitrine-motif: rgba(255, 255, 255, 0.14);
  --vitrine-bouton-texte: var(--rouge);
}

.vitrine-clair {
  --vitrine-fond: var(--fond-alt);
  --vitrine-texte: var(--texte);
  --vitrine-doux: var(--texte-doux);
  --vitrine-accent: var(--rouge);
  --vitrine-trait: var(--accent-trait);
  --vitrine-motif: rgba(138, 6, 5, 0.09);
  --vitrine-bouton-fond: var(--rouge);
  --vitrine-bouton-texte: var(--sur-accent);

  /* Un simple filet : un liseré rouge sur le côté épousait mal l'arrondi.
     Le rouge est déjà dans l'accroche, le bouton et le motif. */
  border: 1px solid var(--trait);
}

/* Soulèvement au survol : seulement si la carte mène quelque part. Une
   bannière sans lien reste immobile, sans curseur de lien. */
.vitrine-cliquable:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(22, 32, 46, 0.06),
    0 14px 34px rgba(22, 32, 46, 0.14);
}

/* Le lien recouvre toute la carte : c'est donc la carte qui montre le
   focus clavier, pas le seul bouton. */
.vitrine:has(.vitrine-bouton:focus-visible) {
  outline: 3px solid var(--graphique);
  outline-offset: 3px;
}

.vitrine-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px 42px;
}

.vitrine-etiquettes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}

.vitrine-partenaire {
  padding: 3px 10px;
  border: 1px solid var(--vitrine-trait);
  border-radius: 99px;
  color: var(--vitrine-doux);
  font: 600 0.68rem var(--police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vitrine-accroche {
  color: var(--vitrine-accent);
  font: 600 0.72rem var(--police-texte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vitrine-titre {
  max-width: 24ch;
  /* Lignes équilibrées : pas de « la » orphelin en bout de ligne. */
  text-wrap: balance;
  margin: 0;
  font: 400 clamp(1.6rem, 3vw, 2.3rem) / 1.12 var(--police-titres);
  letter-spacing: -0.005em;
}

.vitrine-texte {
  max-width: 52ch;
  margin: 12px 0 0;
  color: var(--vitrine-doux);
}

.vitrine-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--vitrine-bouton-fond);
  color: var(--vitrine-bouton-texte);
  font-weight: 600;
}

.vitrine-bouton:focus-visible {
  outline: none;
}

/* Toute la carte devient cliquable, sans second lien. */
.vitrine-bouton::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vitrine-fleche {
  transition: transform 0.2s;
}

.vitrine-cliquable:hover .vitrine-fleche {
  transform: translateX(3px);
}

.vitrine-mention {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--vitrine-doux);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* --- Visuel : photo en fondu, ou motif graphique --- */

.vitrine-visuel {
  position: relative;
  min-height: 230px;
}

.vitrine-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La photo se fond dans l'aplat côté texte, au lieu d'y couper net. Le
   fondu porte sur la photo elle-même — sa transparence laisse voir le fond
   de la carte — plutôt que sur un voile coloré posé par-dessus : un voile
   teintait tout ce qu'il couvrait, et il couvrait 38 % de la largeur, soit
   le logo et la moitié du sujet des affiches. La bande tombe à 14 %, et les
   arrêts rapprochés adoucissent le raccord qu'un dégradé nu laissait voir
   comme une barre. */
.vitrine-avec-image .vitrine-visuel img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    rgba(0, 0, 0, 0.35) 4%,
    rgba(0, 0, 0, 0.82) 9%,
    #000 14%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    rgba(0, 0, 0, 0.35) 4%,
    rgba(0, 0, 0, 0.82) 9%,
    #000 14%
  );
}

.vitrine-motif {
  position: absolute;
  right: 36px;
  bottom: 0;
  width: min(86%, 300px);
  height: auto;
}

.vitrine-motif-grille line {
  stroke: var(--vitrine-motif);
  stroke-dasharray: 2 5;
}

.vitrine-motif-barres rect {
  fill: var(--vitrine-motif);
}

.vitrine-motif .vitrine-motif-derniere,
.vitrine-motif-point {
  fill: var(--vitrine-accent);
}

.vitrine-motif-courbe {
  fill: none;
  stroke: var(--vitrine-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .vitrine,
  .vitrine-fleche {
    transition: none;
  }

  .vitrine-cliquable:hover,
  .vitrine-cliquable:hover .vitrine-fleche {
    transform: none;
  }
}

@media (max-width: 700px) {
  .section-vitrine {
    padding-top: 18px;
  }

  .section-vitrine + .hero {
    padding-top: 40px;
  }

  .vitrine {
    grid-template-columns: 1fr;
  }

  .vitrine-corps {
    padding: 28px 22px;
  }

  /* Sur téléphone, la photo passe au-dessus du texte, en bandeau ; le motif,
     simple décor, laisse la place au message. */
  /* Une proportion plutôt qu'une hauteur fixe : 150 px sur un écran de
     téléphone ne laissaient qu'un bandeau au milieu de l'image, et une
     affiche y perdait son en-tête comme son pied. */
  .vitrine-visuel {
    order: -1;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .vitrine-avec-image .vitrine-visuel img {
    -webkit-mask-image: linear-gradient(
      0deg,
      transparent 0,
      rgba(0, 0, 0, 0.35) 5%,
      rgba(0, 0, 0, 0.82) 11%,
      #000 18%
    );
    mask-image: linear-gradient(
      0deg,
      transparent 0,
      rgba(0, 0, 0, 0.35) 5%,
      rgba(0, 0, 0, 0.82) 11%,
      #000 18%
    );
  }

  .vitrine:not(.vitrine-avec-image) .vitrine-visuel {
    display: none;
  }
}


/* --- Simulateur d'intérêts composés --- */

/* Paramètres à gauche, résultats à droite : on voit l'effet d'un chiffre
   pendant qu'on le tape. Une seule colonne sur tablette et téléphone. */
.simulateur {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.simulateur-form,
.simulation-tete,
.simulation-graphique {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

/* Le formulaire accompagne la lecture des résultats, plus longs que lui. */
.simulateur-form {
  position: sticky;
  top: 88px;
}

.simulateur-form fieldset {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Le filet de séparation est porté par la légende, pleine largeur : sur la
   bordure du fieldset, le navigateur l'aurait posée à cheval sur le trait. */
.simulateur-form fieldset + fieldset {
  margin-top: 22px;
}

.simulateur-form fieldset + fieldset legend {
  padding-top: 20px;
  border-top: 1px solid var(--trait);
}

.simulateur-form legend {
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  color: var(--accent);
  font: 600 0.72rem var(--police-texte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Scénarios de rendement : trois boutons côte à côte, sous le champ du taux. */
.scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -6px;
}

.scenario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 10px;
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.scenario b {
  font: 600 0.92rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.scenario span {
  color: var(--texte-doux);
  font-size: 0.72rem;
  line-height: 1.3;
}

.scenario:hover {
  border-color: var(--accent-trait);
}

.scenario[aria-pressed="true"] {
  background: var(--accent-voile);
  border-color: var(--accent);
}

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

/* --- Résultats --- */

.simulation-resultats {
  display: grid;
  gap: 20px;
}

.simulation-intro {
  margin: 0;
  color: var(--texte-doux);
}

.simulation-total {
  margin: 4px 0 20px;
  color: var(--texte);
  font: 400 clamp(2.2rem, 5vw, 3.2rem) / 1.05 var(--police-titres);
}

.simulation-total span {
  color: var(--texte-doux);
  font: 600 1rem var(--police-texte);
}

/* Barre de répartition : versements en voile, intérêts en plein. */
.simulation-repartition {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
}

.part-verse,
.barre-verse,
.pastille-verse {
  fill: var(--graphique);
  opacity: 0.28;
}

.part-interets,
.barre-interets {
  fill: var(--graphique);
}

.barre-interets {
  opacity: 0.9;
}

.pastille {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--graphique);
}

.simulation-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 16px 0 0;
}

.simulation-legende dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-doux);
  font-size: 0.84rem;
}

.simulation-legende dd {
  margin: 3px 0 0 18px;
  color: var(--texte);
  font: 600 1.05rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.simulation-legende small {
  color: var(--texte-doux);
  font-size: 0.8rem;
  font-weight: 400;
}

/* Trois repères : pouvoir d'achat, doublement, coût de l'attente. */
.simulation-reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.simulation-reperes li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--fond-alt);
  border-radius: 12px;
}

.simulation-reperes span {
  color: var(--texte-doux);
  font: 600 0.68rem var(--police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.simulation-reperes b {
  color: var(--texte);
  font: 600 1.1rem var(--police-texte);
  font-variant-numeric: tabular-nums;
}

.simulation-reperes small {
  color: var(--texte-doux);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Le seul chiffre en rouge de la page : ce que coûte le fait d'attendre. */
.repere-attente b {
  color: var(--rouge);
}

/* --- Graphique --- */

.simulation-graphique {
  margin: 0;
  padding-bottom: 16px;
}

.simulation-graphique figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.simulation-graphique-legende {
  display: flex;
  gap: 16px;
  color: var(--texte-doux);
  font-size: 0.78rem;
}

.simulation-graphique-legende > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Axe des montants à gauche, tracé à droite : deux colonnes. */
.graphique-simulation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  --graphique-hauteur: 220px;
}

.graphique-axe {
  position: relative;
  min-width: 52px;
  height: var(--graphique-hauteur);
}

.graphique-axe span,
.graphique-annees span {
  position: absolute;
  color: var(--texte-doux);
  font: 400 0.72rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.graphique-axe span {
  right: 0;
  transform: translateY(-50%);
}

.graphique-trace svg {
  display: block;
  width: 100%;
  height: var(--graphique-hauteur);
  overflow: visible;
}

.graphique-grille {
  stroke: var(--trait);
  stroke-width: 1;
}

.graphique-annees {
  position: relative;
  height: 22px;
}

.graphique-annees span {
  top: 6px;
  transform: translateX(-50%);
}

/* --- Détail année par année --- */

.simulation-detail {
  padding: 0 4px;
}

.simulation-detail summary {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.tableau-simulation {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.tableau-simulation th,
.tableau-simulation td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--trait);
  text-align: right;
  white-space: nowrap;
}

.tableau-simulation thead th {
  color: var(--texte-doux);
  font: 600 0.7rem var(--police-texte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tableau-simulation th:first-child {
  text-align: left;
}

.tableau-simulation tbody th {
  font-weight: 400;
}

.simulation-resultats .avertissement {
  margin: 0;
}

/* Suite logique : passer à la pratique. */
.simulation-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

/* La phrase au-dessus, les deux boutons côte à côte en dessous. */
.simulation-suite p {
  flex-basis: 100%;
  margin: 0;
  color: var(--texte-doux);
}

.simulation-resultats .empty p,
.simulation-resultats .empty ul {
  margin: 0;
}

.simulation-resultats .empty ul {
  margin-top: 8px;
  padding-left: 18px;
}

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

  .simulateur-form {
    position: static;
  }
}

@media (max-width: 560px) {
  .simulateur-form,
  .simulation-tete,
  .simulation-graphique {
    padding: 20px 18px;
  }

  .graphique-simulation {
    --graphique-hauteur: 180px;
  }
}

/* --- Outils : profil investisseur --- */

.outil-promesses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.outil-promesses li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--fond-alt);
  color: var(--texte-doux);
  font-size: 0.82rem;
}

/* Le bloc est ramené en haut de l'écran à chaque échange HTMX : il ne doit
   pas finir sous l'en-tête collant. */
.outil-profil {
  max-width: 860px;
  scroll-margin-top: 96px;
}

/* Les boutons du site sont en inline-flex : sans cette règle, l'attribut
   hidden n'aurait aucun effet sur eux. */
.questionnaire [hidden] {
  display: none !important;
}

.questionnaire-erreurs {
  margin-bottom: 18px;
  border-color: var(--erreur);
  color: var(--erreur);
}

.questionnaire-erreurs a {
  margin-left: 6px;
  color: var(--erreur);
  font-weight: 600;
}

.questionnaire-progression {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.progression-piste {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--trait);
  overflow: hidden;
}

.progression-remplissage {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

.progression-texte {
  color: var(--texte-doux);
  font: 600 0.8rem var(--police-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.questions {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La carte est portée par l'élément de liste : sur le fieldset, la légende
   se poserait à cheval sur la bordure. */
.question-etape {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

.pas-a-pas .question-etape {
  animation: question-apparition 0.25s ease;
}

@keyframes question-apparition {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question:focus {
  outline: none;
}

.question legend {
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
}

.question-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--accent);
  font: 600 0.7rem var(--police-texte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pas à pas, la barre de progression donne déjà le numéro. */
.pas-a-pas .question-numero {
  display: none;
}

.question-numero {
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.question-texte {
  display: block;
  color: var(--texte);
  font: 400 clamp(1.2rem, 2.4vw, 1.45rem) / 1.3 var(--police-titres);
}

.question-aide {
  margin: -8px 0 16px;
  color: var(--texte-doux);
  font-size: 0.88rem;
}

.question .champ-erreur {
  margin: -8px 0 12px;
}

.reponses {
  display: grid;
  gap: 10px;
}

.reponse {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  color: var(--texte);
  line-height: 1.45;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

/* Le bouton radio reste dans la page, lisible au clavier et par les
   lecteurs d'écran ; la lettre en tient lieu à l'écran. */
.reponse input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.reponse-lettre {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--fond-alt);
  color: var(--texte-doux);
  font: 600 0.8rem var(--police-texte);
  transition:
    background 0.2s,
    color 0.2s;
}

.reponse:hover {
  border-color: var(--accent-trait);
  background: var(--fond-alt);
}

.reponse input:checked + .reponse-lettre {
  background: var(--accent);
  color: var(--sur-accent);
}

.reponse:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-voile);
}

.reponse input:focus-visible + .reponse-lettre {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.question-en-erreur .reponse {
  border-color: rgba(179, 38, 30, 0.35);
}

.questionnaire-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.questionnaire-actions [data-precedente] {
  margin-right: auto;
}

.questionnaire .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Résultat --- */

.profil-resultat {
  display: grid;
  gap: 22px;
}

.profil-tete {
  padding: 34px 34px 30px;
  border-radius: 20px;
  background: #16202e;
  color: #ffffff;
}

.profil-surtitre {
  margin: 0;
  color: var(--rouge-clair);
  font: 600 0.72rem var(--police-texte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profil-tete h2 {
  margin: 8px 0 6px;
  color: #ffffff;
  font: 400 clamp(2.4rem, 6vw, 3.4rem) / 1.05 var(--police-titres);
}

.profil-tete h2:focus {
  outline: none;
}

.profil-accroche {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 1.1rem;
}

.profil-description {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
}

/* Quatre segments, le repère posé sur la position du visiteur. */
.profil-echelle {
  position: relative;
  margin-top: 28px;
  padding-top: 14px;
}

.profil-echelle ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profil-echelle li {
  padding-top: 12px;
  border-top: 6px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
  font: 600 0.72rem var(--police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profil-echelle li.actif {
  border-top-color: var(--rouge-clair);
  color: #ffffff;
}

.profil-repere {
  position: absolute;
  top: 10px;
  left: var(--position);
  width: 14px;
  height: 14px;
  border: 3px solid var(--rouge-clair);
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
}

.profil-bloc {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

.profil-bloc h3,
.profil-suite h3 {
  margin: 0 0 18px;
  font-size: 1.3rem;
}

.profil-mesures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
}

.profil-mesures dt {
  color: var(--texte-doux);
  font: 600 0.7rem var(--police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profil-mesures dd {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
}

.profil-mesures b {
  margin-top: 4px;
  color: var(--texte);
  font-size: 1.05rem;
}

.profil-mesures small {
  color: var(--texte-doux);
  font-size: 0.78rem;
}

.mesure-jauge {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--fond-alt);
  overflow: hidden;
}

.mesure-jauge span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--graphique);
}

.mesure-connaissance span {
  opacity: 0.55;
}

.profil-explication {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  line-height: 1.65;
}

.profil-raisons {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--accent-voile);
}

.profil-raisons p {
  margin: 0;
  font-weight: 600;
}

.profil-raisons ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.6;
}

.repartition-barre {
  display: flex;
  gap: 3px;
  height: 14px;
  border-radius: 99px;
  overflow: hidden;
}

.part-liquidites,
.pastille.part-liquidites {
  background: #c3ccd9;
}

.part-obligations,
.pastille.part-obligations {
  background: rgba(31, 95, 191, 0.55);
}

.part-actions,
.pastille.part-actions {
  background: var(--graphique);
}

.repartition-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.repartition-legende li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-doux);
  font-size: 0.88rem;
}

.repartition-legende b {
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.repartition-baisse {
  margin: 18px 0 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.6;
}

.repartition-baisse strong {
  color: var(--texte);
}

.profil-a-clarifier {
  background: #fff8e8;
  border-color: #efd9a4;
}

.profil-a-clarifier ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

.profil-resultat > .avertissement {
  margin: 0;
}

/* Les sections du résultat ne sont pas des sections de page : pas de
   padding de 72 px (règle `section` générale). */
.profil-suite {
  padding: 0;
}

.profil-suite h3 {
  margin-top: 8px;
}

.profil-cartes {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profil-carte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
}

.profil-carte-principale {
  background: var(--accent-voile);
  border-color: var(--accent-trait);
}

.profil-carte-surtitre {
  color: var(--accent);
  font: 600 0.68rem var(--police-texte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profil-carte h4 {
  margin: 0;
  font: 400 1.3rem / 1.2 var(--police-titres);
}

.profil-carte p {
  flex: 1;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
  line-height: 1.55;
}

.profil-carte .btn {
  align-self: flex-start;
  margin-top: 8px;
}

.profil-recommencer {
  margin: 0;
  text-align: center;
}

.profil-recommencer a {
  color: var(--accent);
  font-weight: 600;
}

/* L'autre outil, sous le questionnaire. */
.autre-outil {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 860px;
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--fond-alt);
}

.autre-outil-icone {
  font-size: 1.8rem;
}

.autre-outil h3 {
  margin: 0;
  font-size: 1.1rem;
}

.autre-outil p {
  margin: 4px 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.autre-outil .btn {
  flex: none;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pas-a-pas .question-etape {
    animation: none;
  }

  .progression-remplissage {
    transition: none;
  }
}

@media (max-width: 860px) {
  .profil-cartes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .question-etape,
  .profil-bloc {
    padding: 20px 18px;
  }

  .profil-tete {
    padding: 26px 20px 24px;
  }

  .profil-echelle li {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
  }

  .profil-mesures {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .autre-outil {
    flex-wrap: wrap;
  }

  .autre-outil .btn {
    margin-left: 0;
  }
}

/* --- Menu « Outils » de la navigation --- */

.menu-outils {
  position: relative;
}

.menu-outils > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--texte-doux);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

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

.menu-outils > summary:hover,
.menu-outils[open] > summary,
.menu-outils.actif > summary {
  color: var(--accent);
}

.menu-outils > summary:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.menu-outils-chevron {
  transition: transform 0.2s;
}

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

.menu-outils-panneau {
  position: absolute;
  top: calc(100% + 22px);
  left: -18px;
  z-index: 20;
  width: 310px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 2px 6px rgba(22, 32, 46, 0.06),
    0 18px 40px rgba(22, 32, 46, 0.14);
  list-style: none;
  animation: menu-compte-ouverture 0.16s ease-out;
}

.nav-links .menu-outils-panneau a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  color: var(--texte);
}

.nav-links .menu-outils-panneau a:hover,
.nav-links .menu-outils-panneau a[aria-current="page"] {
  background: var(--fond-alt);
  color: var(--texte);
}

.menu-outils-panneau a:hover b,
.menu-outils-panneau a[aria-current="page"] b {
  color: var(--accent);
}

.menu-outils-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--fond-alt);
  font-size: 1.05rem;
}

.menu-outils-panneau a:hover .menu-outils-icone,
.menu-outils-panneau a[aria-current="page"] .menu-outils-icone {
  background: var(--surface);
}

.menu-outils-panneau b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s;
}

.menu-outils-panneau small {
  display: block;
  margin-top: 2px;
  color: var(--texte-doux);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Dans le panneau du ☰ : le menu se déplie sur place, sous son titre. */
@media (max-width: 1100px) {
  .menu-outils > summary {
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
  }

  .menu-outils-panneau {
    position: static;
    width: auto;
    padding: 6px 0 8px;
    border: 0;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  .nav-links .menu-outils-panneau a {
    padding: 10px 8px;
    border-bottom: 0;
  }
}

/* --- Forum des membres --- */

.forum-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.forum-tete .section-heading {
  margin-bottom: 0;
}

.forum-recherche {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 32px;
}

.forum-recherche .champ-saisie {
  flex: 1;
}

.forum-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.forum-principal {
  min-width: 0;
}

.forum-intertitre {
  margin: 0 0 14px;
  font-size: 1.25rem;
}

.forum-principal .forum-intertitre ~ .forum-intertitre {
  margin-top: 34px;
}

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--texte-doux);
  font-size: 0.85rem;
}

.fil-ariane a {
  color: var(--accent);
}

/* Thèmes : des tuiles, deux par rangée. */
.forum-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.forum-theme {
  display: flex;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.forum-theme:hover {
  border-color: var(--accent-trait);
  box-shadow: var(--ombre);
}

.forum-theme-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--fond-alt);
  font-size: 1.25rem;
}

.forum-theme-texte {
  display: grid;
  gap: 3px;
}

.forum-theme-texte b {
  font-weight: 600;
}

.forum-theme:hover b {
  color: var(--accent);
}

.forum-theme-texte span {
  color: var(--texte-doux);
  font-size: 0.86rem;
  line-height: 1.45;
}

.forum-theme-texte small {
  margin-top: 4px;
  color: var(--texte-doux);
  font-size: 0.76rem;
}

/* Listes de sujets. */
.liste-sujets {
  margin: 0;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  list-style: none;
  overflow: hidden;
}

.ligne-sujet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
}

.ligne-sujet + .ligne-sujet {
  border-top: 1px solid var(--trait);
}

.ligne-epinglee {
  background: var(--fond-alt);
}

.avatar-forum {
  width: 38px;
  height: 38px;
  background: #e6ebf2;
  color: var(--texte);
  font-size: 0.78rem;
}

.avatar-equipe {
  background: linear-gradient(135deg, var(--rouge-vif), var(--rouge));
  color: var(--sur-accent);
}

.ligne-sujet-corps {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ligne-sujet-titre {
  color: var(--texte);
  line-height: 1.4;
}

.ligne-sujet-titre:hover {
  color: var(--accent);
}

/* Du neuf depuis la dernière visite : le titre en gras, un point rouge. */
.du-neuf .ligne-sujet-titre {
  font-weight: 600;
}

.du-neuf .ligne-sujet-titre::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.1em;
}

.ligne-sujet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--texte-doux);
  font-size: 0.8rem;
}

.ligne-sujet-stats {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--texte-doux);
  font-size: 0.78rem;
  white-space: nowrap;
}

.ligne-sujet-stats b {
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.puce-valeur {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(31, 95, 191, 0.1);
  color: var(--graphique);
  font: 600 0.72rem var(--police-texte);
  letter-spacing: 0.04em;
}

.etiquette-forum,
.etiquette-equipe {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--fond-alt);
  color: var(--texte-doux);
  font: 600 0.7rem var(--police-texte);
  vertical-align: 0.1em;
}

.etiquette-equipe {
  background: var(--accent-voile);
  color: var(--accent);
}

.ligne-sujet-titre .etiquette-forum {
  margin-right: 6px;
}

.forum-resultats-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.forum-resultats-tete h3 {
  margin: 0;
  font-size: 1.2rem;
}

.forum-resultats-tete a {
  color: var(--accent);
  font-size: 0.88rem;
}

.forum-principal .empty {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.forum-principal .empty p {
  margin: 0;
}

/* Charte, dans la colonne de droite. */
.forum-charte {
  position: sticky;
  top: 88px;
  padding: 22px;
  border-radius: 16px;
  background: var(--fond-alt);
}

.forum-charte h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.forum-charte ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.forum-charte ol b {
  font-weight: 600;
}

.forum-charte-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* --- Un sujet --- */

.forum-etroit {
  max-width: 860px;
}

.sujet-tete h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.2;
}

.sujet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 26px;
  color: var(--texte-doux);
  font-size: 0.86rem;
}

.sujet-meta a {
  color: var(--accent);
}

.sujet-meta a.puce-valeur {
  color: var(--graphique);
}

.messages-forum {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.message-forum {
  padding: 20px 22px;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: var(--surface);
  scroll-margin-top: 96px;
}

.message-forum:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}

.message-nouveau {
  border-left: 3px solid var(--accent);
}

.message-masque {
  background: var(--fond-alt);
}

.message-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.message-qui {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

.message-qui b {
  font-weight: 600;
}

.message-quand {
  flex-basis: 100%;
  color: var(--texte-doux);
  font-size: 0.78rem;
}

.message-quand a {
  color: inherit;
}

.message-numero {
  color: var(--texte-doux);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pastille-neuf {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--sur-accent);
  font: 600 0.68rem var(--police-texte);
}

.message-contenu {
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.message-contenu p {
  margin: 0 0 10px;
}

.message-contenu p:last-child {
  margin-bottom: 0;
}

.message-contenu a {
  color: var(--accent);
  text-decoration: underline;
}

.message-masque-texte {
  margin: 0 0 10px;
  color: var(--texte-doux);
  font-size: 0.88rem;
  font-style: italic;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 0.82rem;
}

.message-actions:empty {
  display: none;
}

.message-lien {
  color: var(--texte-doux);
}

.message-lien:hover {
  color: var(--accent);
}

.message-utiles {
  color: var(--texte-doux);
}

.form-utile {
  margin: 0;
}

.bouton-utile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--trait);
  border-radius: 99px;
  background: var(--surface);
  color: var(--texte-doux);
  font: 600 0.8rem var(--police-texte);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}

.bouton-utile:hover {
  border-color: var(--accent-trait);
  color: var(--accent);
}

.bouton-utile[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--accent);
}

.bouton-utile-compte {
  font-variant-numeric: tabular-nums;
}

/* Réponse, nouveau sujet, modification, signalement. */
.forum-reponse {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.forum-reponse h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
}

.forum-formulaire {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.forum-reponse form {
  display: grid;
  gap: 14px;
}

.forum-reponse-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forum-reponse-pied p {
  flex: 1;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.82rem;
}

.forum-reponse-pied > a {
  color: var(--texte-doux);
}

.forum-verrouille {
  margin-top: 30px;
}

.signalement-extrait {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--trait);
  background: var(--fond-alt);
  border-radius: 0 12px 12px 0;
  color: var(--texte-doux);
}

.signalement-extrait p {
  margin: 0 0 6px;
}

.signalement-extrait footer {
  font-size: 0.8rem;
  font-weight: 600;
}

.signalement-motifs {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.signalement-motifs legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 600;
}

.signalement-motifs label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.signalement-motifs input {
  accent-color: var(--accent);
}

.forum-acces-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Depuis la fiche d'une valeur, dans « Analyses ». */
.lien-forum-valeur {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.lien-forum-valeur a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 960px) {
  .forum-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .forum-charte {
    position: static;
  }
}

@media (max-width: 560px) {
  .forum-recherche {
    flex-direction: column;
  }

  .ligne-sujet {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ligne-sujet-stats {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: start;
    gap: 12px;
  }

  .message-forum,
  .forum-reponse,
  .forum-formulaire {
    padding: 18px 16px;
  }
}