/* Copilote IA Freelance — « registre de bord ».
   Une interface de travail sobre ; le seul élément expressif est le tampon de statut,
   parce que le produit tourne autour des décisions (approuvé, bloqué, prouvé). */

:root {
  --papier: #eef2f0;
  --surface: #ffffff;
  --encre: #1d2b36;
  --encre-douce: #4a5a66;
  --trait: #c5d0cc;
  --bleu: #2b5c88;
  --vert: #2e6b4f;
  --carmin: #a3243b;
  --ambre: #8a5a00;
  --focus: #2b5c88;
  --rayon: 6px;
  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Ubuntu, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #15202a;
    --surface: #1c2a35;
    --encre: #e4ebe8;
    --encre-douce: #a9b8c0;
    --trait: #33454f;
    --bleu: #8ab6de;
    --vert: #7cc4a1;
    --carmin: #f08a9c;
    --ambre: #e6b45c;
    --focus: #8ab6de;
  }
}

* { box-sizing: border-box; }
/* L’attribut hidden l’emporte toujours (sinon .champ { display: flex } l’annule : vu sur la page profil). */
[hidden] { display: none !important; }
html { font-size: 106.25%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--bleu); text-underline-offset: 0.18em; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6rem; }
h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 650; }
h3 { font-size: 1.02rem; font-weight: 650; margin-top: 1rem; }
h4 { font-size: 0.95rem; }
p { margin: 0 0 0.75rem; max-width: 72ch; }
code, pre { font-family: var(--mono); font-size: 0.86rem; }

.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--surface); padding: 0.5rem 1rem; z-index: 10; }

.bandeau-simulation {
  margin: 0;
  max-width: none;
  padding: 0.45rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.86rem;
  text-align: center;
}

.cadre { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: calc(100vh - 2.2rem); }
.cadre > * { min-width: 0; }
#navigation {
  border-right: 1px solid var(--trait);
  padding: 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
#navigation[hidden] { display: none; }
#navigation[hidden] + main { grid-column: 1 / -1; }
.marque { font-weight: 800; font-size: 1.25rem; line-height: 1.1; margin: 0; }
.marque span { font-weight: 500; color: var(--encre-douce); font-size: 0.95rem; }
.titre-groupe { color: var(--encre-douce); font-size: 0.82rem; margin: 0 0 0.25rem; }
.groupe-nav ul { list-style: none; margin: 0; padding: 0; }
.groupe-nav a {
  display: block;
  padding: 0.3rem 0.55rem;
  border-radius: var(--rayon);
  color: var(--encre);
  text-decoration: none;
}
.groupe-nav a:hover { background: var(--surface); }
.groupe-nav a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--bleu); font-weight: 600; }
.pied-nav { margin-top: auto; font-size: 0.9rem; color: var(--encre-douce); }

main { padding: 1.8rem clamp(1rem, 3vw, 2.6rem) 4rem; max-width: 70rem; }
main:focus { outline: none; }
.entete-page { margin-bottom: 1.4rem; }
.entete-page h1:focus { outline: none; }
.chapeau { color: var(--encre-douce); }

.bloc {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1.1rem;
}
.sous-bloc { border-top: 1px dashed var(--trait); margin-top: 1rem; padding-top: 0.8rem; }
.document { border-top: 1px solid var(--trait); padding-top: 0.9rem; margin-top: 0.9rem; }
.document:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

/* Le tampon : l'élément de caractère de l'interface. */
.tampon {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 0 0.45em;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.55;
  white-space: nowrap;
  transform: rotate(-1.5deg);
  background: color-mix(in srgb, currentColor 9%, transparent);
  vertical-align: 0.08em;
}
.tampon-ok { color: var(--vert); }
.tampon-bloque { color: var(--carmin); }
.tampon-attente { color: var(--ambre); }
.tampon-neutre { color: var(--encre-douce); }

.score { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.score-valeur { font-size: 3.2rem; font-weight: 800; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.score-valeur span { font-size: 1.1rem; font-weight: 500; color: var(--encre-douce); }
.score .tampon { font-size: 1.05rem; transform: rotate(-3deg); }
.sous { color: var(--encre-douce); font-size: 0.92rem; }
.note { color: var(--encre-douce); font-size: 0.88rem; }
.vide { color: var(--encre-douce); font-style: italic; }
.alerte { color: var(--carmin); font-weight: 600; }
q { quotes: "« " " »"; color: var(--encre-douce); }
q::before { content: open-quote; }
q::after { content: close-quote; }
li q { display: block; }
.categorie h3 { margin-top: 0.6rem; }

.defilement { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); }
th { font-weight: 650; color: var(--encre-douce); font-size: 0.86rem; }
td { font-variant-numeric: tabular-nums; }

.actions, .ligne-formulaire { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.6rem 0; }
.ligne-formulaire .champ { flex: 1 1 11rem; margin: 0; }
.champ { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
label { font-weight: 600; font-size: 0.93rem; }
.case { font-weight: 400; display: block; margin: 0.2rem 0; }
.aide { color: var(--encre-douce); font-size: 0.86rem; margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  font: inherit;
  color: inherit;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.5rem 0.6rem;
  min-height: 2.6rem;
  width: 100%;
}
textarea { resize: vertical; }
.actions select, .actions input { width: auto; max-width: 100%; }
fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); margin: 0 0 0.9rem; }
legend { font-weight: 600; padding: 0 0.3rem; }
details { border-top: 1px solid var(--trait); padding: 0.6rem 0; }
summary { cursor: pointer; font-weight: 600; }
meter { width: min(100%, 24rem); height: 1rem; vertical-align: middle; }

.bouton {
  font: inherit;
  font-weight: 650;
  border: 2px solid var(--bleu);
  background: var(--bleu);
  color: #fff;
  border-radius: var(--rayon);
  padding: 0.5rem 1rem;
  min-height: 2.6rem;
  cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.bouton-secondaire { background: transparent; color: var(--bleu); }
.bouton-discret { background: transparent; border-color: transparent; color: var(--bleu); text-decoration: underline; padding-inline: 0.4rem; }
.bouton-danger { background: transparent; border-color: var(--carmin); color: var(--carmin); }
@media (prefers-color-scheme: dark) { .bouton { color: #10202c; } .bouton-secondaire, .bouton-discret, .bouton-danger { color: var(--bleu); } .bouton-danger { color: var(--carmin); } }

pre.texte-source, pre.texte-document {
  white-space: pre-wrap;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.8rem;
  font-family: var(--police);
  font-size: 0.95rem;
  max-height: 26rem;
  overflow: auto;
}
.constats ul { margin: 0.2rem 0 0.6rem; padding-left: 1.1rem; }
.liste-decisions { padding-left: 1.1rem; }
.realisation { display: grid; gap: 0.4rem; border-left: 3px solid var(--trait); padding-left: 0.8rem; margin-bottom: 0.9rem; }
.test-exigence { display: grid; gap: 0.35rem; min-width: 14rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.4rem 0 0.8rem; font-size: 0.93rem; }
.details dt { color: var(--encre-douce); }
.details dd { margin: 0; }

.carte-connexion { max-width: 28rem; margin: 3rem auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem; }
.chargement { color: var(--encre-douce); }

.annonce {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  max-width: min(32rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--rayon);
  border: 2px solid currentColor;
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
  font-weight: 600;
}
.annonce-ok { color: var(--vert); }
.annonce-erreur { color: var(--carmin); }
.annonce-info { color: var(--encre); }

/* Guide flottant (fenêtre au premier plan, au-dessus de la plateforme). */
body.guide { margin: 0; padding: 0.9rem; background: var(--papier); color: var(--encre); font-family: var(--police); font-size: 0.95rem; }
.guide h1 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.guide-mission { font-weight: 600; margin: 0 0 0.4rem; }
.guide-etapes { padding-left: 1.2rem; display: grid; gap: 0.8rem; }
.guide-etape { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.6rem 0.7rem; }
.guide-etape p { margin: 0.35rem 0; }
.guide-titre { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.guide-titre input { width: 1.1rem; height: 1.1rem; }
.guide-valeur { font-size: 1.2rem; font-weight: 700; }
.guide-texte { max-height: 9rem; overflow: auto; white-space: pre-wrap; font-family: var(--police); background: var(--papier); padding: 0.5rem; border-radius: var(--rayon); margin: 0.4rem 0; }
.guide-verification { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.guide-verification textarea, .guide-verification input { width: 100%; box-sizing: border-box; font: inherit; }
.guide-resultat ul { padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.guide-statut { position: sticky; bottom: 0; margin: 0.8rem 0 0; padding: 0.4rem 0.6rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); min-height: 1.2em; }
.guide-statut:empty { display: none; }
.guide-erreur { color: var(--carmin); font-weight: 600; }
.guide-panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); overflow-y: auto; box-sizing: border-box; padding: 0.9rem; background: var(--papier); border-left: 2px solid var(--trait); box-shadow: -6px 0 20px rgb(0 0 0 / 0.15); z-index: 10; font-size: 0.95rem; }
.guide-fermer { float: right; }

@media (max-width: 760px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  main { padding-inline: 1rem; }
  #navigation { border-right: 0; border-bottom: 1px solid var(--trait); flex-direction: row; overflow-x: auto; gap: 0.8rem; padding: 0.8rem 1rem; }
  .groupe-nav ul { display: flex; gap: 0.2rem; }
  .groupe-nav a { white-space: nowrap; }
  .marque br { display: none; }
  .marque span::before { content: ' '; }
  .marque { white-space: nowrap; }
  .pied-nav { margin: 0; }
  .details { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Études de conception : contenu structuré, lisible sur mobile */
dl.etude { margin: 0.4rem 0; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.3rem 0.8rem; }
dl.etude dt { font-weight: 600; }
dl.etude dd { margin: 0; min-width: 0; }
dl.etude dl.etude { border-left: 3px solid var(--trait); padding-left: 0.6rem; }
dl.etude pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
@media (max-width: 40rem) { dl.etude { grid-template-columns: 1fr; } dl.etude dt { margin-top: 0.4rem; } }

/* AUTH-01 : lien à transmettre, lisible et coupé proprement sur mobile */
code.lien-compte { display: block; overflow-wrap: anywhere; padding: 0.5rem; }

/* SKILL-TRAD : original et version française côte à côte (l’un sous l’autre sur mobile) */
.message-bilingue { border-top: 1px solid var(--trait); padding-top: 0.8rem; margin-top: 0.8rem; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.deux-colonnes pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .deux-colonnes { grid-template-columns: 1fr; } }

/* ---------- Mon profil : une couleur par catégorie (EXT-PROFIL-01) ----------
   Couleurs lisibles sur fond clair et sombre (contraste ≥ 4,5:1 avec la surface) ; la couleur accompagne toujours
   un nom ou un libellé, jamais seule. */
:root {
  --cat-identite: #2b5c88;
  --cat-competences: #6b3fa0;
  --cat-realisations: #2e6b4f;
  --cat-prestations: #a14a0b;
  --cat-conditions: #0f6670;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cat-identite: #8ab6de;
    --cat-competences: #c3a3e8;
    --cat-realisations: #7cc4a1;
    --cat-prestations: #f0a868;
    --cat-conditions: #6cc9d0;
  }
}
.cat-identite { --cat: var(--cat-identite); }
.cat-competences { --cat: var(--cat-competences); }
.cat-realisations { --cat: var(--cat-realisations); }
.cat-prestations { --cat: var(--cat-prestations); }
.cat-conditions { --cat: var(--cat-conditions); }
.pastille { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--cat); margin-right: 0.45em; vertical-align: 0.02em; }

.page-profil { padding-bottom: 0.5rem; }
.nav-categories { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.nav-categories a {
  display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cat) 45%, var(--trait)); background: color-mix(in srgb, var(--cat) 8%, var(--surface));
  color: var(--encre); text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.nav-categories a:hover { background: color-mix(in srgb, var(--cat) 16%, var(--surface)); }

.profil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.1rem; align-items: start; }
.panneau-score { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.1rem; }
@media (max-width: 62rem) {
  .profil-grille { grid-template-columns: 1fr; }
  .panneau-score { position: static; order: -1; }
  .jauge { width: 6.5rem; }
  .jauge span { font-size: 1.8rem; }
}

.rubrique { border-left: 5px solid var(--cat); }
.rubrique h2 { display: flex; align-items: center; }
.rubrique h3 { color: var(--encre); }

.jauge {
  --valeur: 0;
  width: 8.5rem; aspect-ratio: 1; margin: 0.2rem auto 0.4rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--jauge, var(--bleu)) calc(var(--valeur) * 1%), var(--trait) 0);
}
.jauge-faible { --jauge: var(--ambre); }
.jauge-correct { --jauge: var(--bleu); }
.jauge-solide { --jauge: var(--vert); }
.jauge small { display: block; }
.detail-score { border-top: 1px solid var(--trait); margin-top: 0.4rem; }
.jauge span { font-size: 2.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.jauge small { color: var(--encre-douce); }
.centre { text-align: center; margin-inline: auto; }
.barres-categories { list-style: none; padding: 0; margin: 0.6rem 0 0.9rem; display: grid; gap: 0.45rem; }
.barre-libelle { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 600; }
.barre { display: block; height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--cat) 15%, var(--papier)); overflow: hidden; }
.barre > span { display: block; height: 100%; background: var(--cat); border-radius: inherit; }
.actions-profil { padding-left: 1.2rem; margin: 0.3rem 0 0.8rem; }
.actions-profil li { margin-bottom: 0.45rem; font-size: 0.9rem; padding-left: 0.4rem; border-left: 3px solid var(--cat); }
.alertes-profil { padding-left: 1.1rem; font-size: 0.88rem; color: var(--ambre); }

.compteur { font-size: 0.84rem; margin: -0.6rem 0 0.9rem; }
.compteur-vide, .compteur-court { color: var(--ambre); }
.compteur-bien { color: var(--vert); }
.compteur-long { color: var(--carmin); }

.etiquettes { list-style: none; padding: 0; margin: 0.2rem 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.etiquette {
  display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem 0.2rem 0.15rem 0.65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cat-competences) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cat-competences) 50%, var(--trait));
  font-size: 0.92rem;
}
.etiquettes-hypothese .etiquette { background: var(--papier); border-style: dashed; color: var(--encre-douce); }
.etiquette-action { font: inherit; border: 0; background: transparent; color: var(--encre-douce); cursor: pointer; min-width: 1.8rem; min-height: 1.8rem; border-radius: 50%; }
.etiquette-action:hover { background: color-mix(in srgb, var(--encre) 10%, transparent); color: var(--encre); }
.saisie-etiquette { display: flex; gap: 0.5rem; align-items: flex-start; }
.saisie-etiquette .champ { flex: 1; }
.saisie-etiquette .bouton { margin-top: 1.55rem; }

.cartes { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; }
.carte-profil { border: 1px solid var(--trait); border-left: 4px solid var(--cat); border-radius: var(--rayon); padding: 0.5rem 0.8rem; background: var(--papier); }
.carte-profil[open] { background: var(--surface); }
.carte-profil summary { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.2rem 0; }
.carte-titre { font-weight: 650; margin-right: auto; }
.badge { font-size: 0.78rem; font-weight: 650; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--trait); color: var(--encre-douce); background: var(--surface); }
.badge-ok { color: var(--vert); border-color: currentColor; }
.badge-attente { color: var(--ambre); border-color: currentColor; }

.langues { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; gap: 0.4rem; }
.ligne-langue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) auto; gap: 0.5rem; align-items: center; }
@media (max-width: 40rem) { .ligne-langue { grid-template-columns: 1fr 1fr; } .ligne-langue .bouton { grid-column: 1 / -1; justify-self: start; } }

.barre-enregistrement {
  position: sticky; bottom: 0; z-index: 5; margin-top: 1rem; border-radius: var(--rayon) var(--rayon) 0 0; border: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: flex-end;
  padding: 0.55rem 1rem; background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: 1px solid var(--trait); backdrop-filter: blur(4px);
}
.barre-enregistrement p { margin: 0 auto 0 0; }

/* ---------- Mes offres (SALES-02) ---------- */
.resume-offres { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; padding: 0; margin: 0.6rem 0 1rem; }
.carte-offre { border: 1px solid var(--trait); border-left: 5px solid var(--ambre); border-radius: var(--rayon); padding: 0.6rem 1rem; margin: 0 0 1rem; background: var(--surface); }
.carte-offre.offre-validee { border-left-color: var(--vert); }
.carte-offre.offre-archivee { border-left-color: var(--trait); opacity: 0.85; }
.carte-offre > summary { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; cursor: pointer; padding: 0.3rem 0; font-size: 1.05rem; }
.prix-offre { font-weight: 700; color: var(--bleu); }
.offre-grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.2rem; align-items: start; }
.estimation-offre { position: sticky; top: 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.6rem 0.9rem; background: var(--papier); }
.estimation-offre dl { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.6rem; margin: 0.4rem 0; }
.estimation-offre dt { color: var(--encre-douce); }
.estimation-offre dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.estimation-offre .positif { color: var(--vert); font-weight: 700; }
.estimation-offre .negatif { color: var(--carmin); font-weight: 700; }
.cases-plateformes { border: 1px solid var(--trait); border-radius: var(--rayon); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.5rem 0.8rem; }
.cases-plateformes .case { display: inline-flex; align-items: center; gap: 0.3rem; }
@media (max-width: 62rem) { .offre-grille { grid-template-columns: 1fr; } .estimation-offre { position: static; order: -1; } }
.tarif-conseille { border: 1px solid var(--trait); border-left: 5px solid var(--bleu); border-radius: var(--rayon); padding: 0.5rem 0.9rem; margin-bottom: 0.8rem; background: var(--papier); }
.tarif-principal strong { font-size: 1.4rem; color: var(--bleu); }
.tarif-conseille dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; }
.tarif-conseille dd { margin: 0; }

/* ---------- Rentabilité réelle (FIN-01) ---------- */
.chiffres-rentabilite { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0.6rem 0 1rem; }
.chiffre { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.5rem 0.8rem; background: var(--papier); display: flex; flex-direction: column; gap: 0.15rem; }
.chiffre span { color: var(--encre-douce); font-size: 0.9rem; }
.chiffre strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.chiffre small { color: var(--encre-douce); }
.chiffre .positif { color: var(--vert); }
.chiffre .negatif { color: var(--carmin); }
.detail-rentabilite dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; max-width: 32rem; }
.detail-rentabilite dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }