/* Système de design de l'app.

   Tout passe par des variables. appliquerReglages() (public/js/outils.js) écrit les réglages sur :root :
   --r-accent, --r-encre, --r-base, --r-fond, --r-surface, --r-vert, --rayon, --police, --d.
   Le reste en découle, en clair comme en sombre : une couleur s'utilise par sa variable, jamais en dur.

   Variables à utiliser dans public/css/*.css :
   Fonds     --fond --surface --surface-2 --survol --accent-doux --accent-doux-2
   Texte     --encre (titres) --texte (corps) --encre-2 (second plan) --encre-3 (discret)
   Traits    --trait --trait-fort --accent-trait
   Actions   --vert --vert-fonce --vert-encre (bouton sombre) --accent --accent-encre (vert fluo, réservé aux accents)
   États     --ok --ko --attente --demo --bleu, chacun avec son --x-fond
   Formes    --rayon --rayon-s --rayon-m --rayon-l --ombre --ombre-survol --ombre-haute --anneau
   Espaces   --e1 (4) --e2 (8) --e3 (12) --e4 (16) --e5 (20) --e6 (24) --e8 (32), multipliés par la densité
   Rail      --rail --rail-fort --rail-texte --rail-doux --rail-trait --rail-survol --rail-actif

   Rien ne dépend d'une animation pour être visible : tout mouvement est rangé
   sous prefers-reduced-motion: no-preference, en bas de fichier. */

@font-face {
  font-family: 'Manrope';
  src: url('/polices/manrope-latin-wght.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* Réglages, valeurs d'origine */
  --r-accent: #73F480; --r-accent-encre: #0D2E36; --r-encre: #0D2E36; --r-base: #0D2E36;
  --r-fond: #FAFBFB; --r-surface: #FFFFFF; --r-vert: #0F5248; --r-vert-encre: #FFFFFF;
  --rayon: 12px; --d: 1;
  --police: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Fonds */
  --fond: var(--r-fond);
  --surface: var(--r-surface);
  --surface-2: color-mix(in srgb, var(--encre) 3.5%, var(--surface));
  --survol: color-mix(in srgb, var(--encre) 6.5%, var(--surface));

  /* Texte */
  --encre: var(--r-encre);
  --texte: color-mix(in srgb, var(--encre) 90%, var(--surface));
  --encre-2: color-mix(in srgb, var(--encre) 76%, var(--surface));
  --encre-3: color-mix(in srgb, var(--encre) 66%, var(--surface));

  /* Traits */
  --trait: color-mix(in srgb, var(--encre) 11%, var(--surface));
  --trait-fort: color-mix(in srgb, var(--encre) 20%, var(--surface));

  /* Accent et action */
  --accent: var(--r-accent);
  --accent-encre: var(--r-accent-encre);
  --accent-fonce: color-mix(in srgb, var(--accent) 88%, #000);
  --accent-doux: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-doux-2: color-mix(in srgb, var(--accent) 30%, var(--surface));
  --accent-trait: color-mix(in srgb, var(--accent) 42%, var(--surface));
  --vert: var(--r-vert);
  --vert-encre: var(--r-vert-encre);
  --vert-fonce: color-mix(in srgb, var(--vert) 82%, #000);

  /* États */
  --ok: #0F6B4A; --ok-fond: #E3F6EA;
  --ko: #B3321F; --ko-fond: #FDEDEB; --ko-trait: #F3C9C3;
  --attente: #8F590A; --attente-fond: #FFF4E0;
  --demo: #5B3FB0; --demo-fond: #F1EDFD;
  --bleu: #2D5BD7; --bleu-fond: #EAF0FD;
  --wa: #0B7A5F; --wa-encre: #FFFFFF;
  --s1: #2D5BD7; --s2: #E0792A; --s3: #17A673;

  /* Personnes */
  --p1: #174A87; --p1-fond: #DFEAFA;
  --p2: #8C3612; --p2-fond: #FDE7DC;

  /* Formes */
  --rayon-s: calc(var(--rayon) * .5);
  --rayon-m: calc(var(--rayon) * .67);
  --rayon-l: calc(var(--rayon) * 1.34);
  --ombre: 0 1px 2px color-mix(in srgb, var(--r-base) 5%, transparent);
  --ombre-survol: 0 1px 2px color-mix(in srgb, var(--r-base) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--r-base) 9%, transparent);
  --ombre-haute: 0 2px 6px color-mix(in srgb, var(--r-base) 7%, transparent), 0 18px 44px color-mix(in srgb, var(--r-base) 14%, transparent);
  --anneau: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent);
  --courbe: cubic-bezier(.2, .7, .2, 1);

  /* Espaces */
  --e1: calc(4px * var(--d)); --e2: calc(8px * var(--d)); --e3: calc(12px * var(--d)); --e4: calc(16px * var(--d));
  --e5: calc(20px * var(--d)); --e6: calc(24px * var(--d)); --e8: calc(32px * var(--d));

  /* Coquille */
  --largeur-cote: 252px;
  --hauteur-haut: 64px;
  --rail: color-mix(in srgb, var(--r-base) 88%, #000);
  --rail-fort: color-mix(in srgb, var(--r-base) 66%, #000);
  --rail-texte: rgb(255 255 255 / 80%);
  --rail-doux: rgb(255 255 255 / 62%);
  --rail-trait: rgb(255 255 255 / 10%);
  --rail-survol: rgb(255 255 255 / 7%);
  --rail-actif: color-mix(in srgb, var(--accent) 16%, transparent);
}

:root[data-mode="sombre"] {
  color-scheme: dark;
  --fond: color-mix(in srgb, var(--r-base) 62%, #060B0D);
  --surface: color-mix(in srgb, var(--r-base) 88%, #0A1114);
  --surface-2: color-mix(in srgb, var(--surface) 92%, #fff);
  --survol: color-mix(in srgb, var(--surface) 86%, #fff);
  --encre: #EEF4F3;
  --texte: #DAE3E1;
  --encre-2: #BCCAC8;
  --encre-3: #A4B5B3;
  --trait: color-mix(in srgb, var(--surface) 84%, #fff);
  --trait-fort: color-mix(in srgb, var(--surface) 72%, #fff);
  --vert-fonce: color-mix(in srgb, var(--vert) 84%, #fff);
  --accent-doux: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-doux-2: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --accent-trait: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --ok: #7BE3A6; --ok-fond: color-mix(in srgb, #7BE3A6 14%, var(--surface));
  --ko: #FF9F94; --ko-fond: color-mix(in srgb, #FF9F94 14%, var(--surface)); --ko-trait: color-mix(in srgb, #FF9F94 34%, var(--surface));
  --attente: #F2C76B; --attente-fond: color-mix(in srgb, #F2C76B 13%, var(--surface));
  --demo: #CFC0FF; --demo-fond: color-mix(in srgb, #CFC0FF 14%, var(--surface));
  --bleu: #A9C1FF; --bleu-fond: color-mix(in srgb, #A9C1FF 14%, var(--surface));
  --wa: #37C08F; --wa-encre: #06241E;
  --s1: #5F8BEF; --s2: #E98B46; --s3: #2FC48F;
  --p1: #B4CFF5; --p1-fond: color-mix(in srgb, #B4CFF5 15%, var(--surface));
  --p2: #F6C2A8; --p2-fond: color-mix(in srgb, #F6C2A8 15%, var(--surface));
  --ombre: none;
  --ombre-survol: 0 8px 24px rgb(0 0 0 / 28%);
  --ombre-haute: 0 18px 44px rgb(0 0 0 / 42%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--encre); font-weight: 700; line-height: 1.2; }
h1 { font-size: 28px; letter-spacing: -.035em; line-height: 1.12; }
h2 { font-size: 15.5px; letter-spacing: -.02em; }
h3 { font-size: 14.5px; letter-spacing: -.012em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
b, strong { font-weight: 700; color: var(--encre); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; flex: none; }
::selection { background: var(--accent-doux-2); color: var(--encre); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
#ecran:focus-visible { outline: none; }
kbd { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Coquille ---------- */
.coque { display: grid; grid-template-columns: var(--largeur-cote) minmax(0, 1fr); min-height: 100dvh; }
html[data-cote="replie"] { --largeur-cote: 72px; }
.colonne { min-width: 0; display: flex; flex-direction: column; }
main {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--e6) var(--e8) 64px;
  display: grid; gap: var(--e4); align-content: start; outline: none;
}
main > * { min-width: 0; }
#simu-resultats { display: grid; gap: var(--e4); }

.lateral {
  position: sticky; top: 0; z-index: 40; height: 100dvh; display: flex; flex-direction: column;
  padding: 12px; overflow-x: hidden; overflow-y: auto; color: var(--rail-texte);
  background: linear-gradient(180deg, var(--rail-fort) 0, var(--rail) 320px);
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent;
}
.cote-tete { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 2px 0 6px; margin-bottom: 6px; }
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; }
.marque:hover { text-decoration: none; }
.marque-nom { font-size: 15px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replier {
  width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--rail-trait); border-radius: var(--rayon-s); background: transparent; color: var(--rail-doux);
}
.replier:hover { color: #fff; background: var(--rail-survol); }
.lateral :focus-visible { outline-color: var(--accent); }

.nav { flex: 1 0 auto; display: flex; flex-direction: column; }
.nav-groupe {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 10px 6px; border: 0; background: none;
  color: var(--rail-doux); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.nav-groupe:hover { color: #fff; }
.nav-groupe[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-liens { display: flex; flex-direction: column; gap: 1px; }
.nav-lien {
  position: relative; display: flex; align-items: center; gap: 11px; height: calc(36px * (.5 + var(--d) / 2)); padding: 0 10px;
  border-radius: var(--rayon-m); color: var(--rail-texte); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
}
.nav-lien svg { color: var(--rail-doux); stroke-width: 1.7; }
.nav-lien .libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-lien:hover { background: var(--rail-survol); color: #fff; text-decoration: none; }
.nav-lien:hover svg { color: #fff; }
.nav-lien.actif { background: var(--rail-actif); color: #fff; font-weight: 600; }
.nav-lien.actif svg { color: var(--accent); stroke-width: 2; }
.nav-lien.actif::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.compteur {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-s); display: inline-flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 11%); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nav-lien.actif .compteur { background: var(--accent); color: var(--accent-encre); }
.cote-bas { flex: none; margin-top: 12px; padding: 10px 6px 2px; border-top: 1px solid var(--rail-trait); }
.direct { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rail-doux); }
.direct i { width: 8px; height: 8px; border-radius: 50%; background: #E9B949; flex: none; }
.direct.oui i { background: var(--accent); }

html[data-cote="replie"] .cote-tete { flex-direction: column; padding: 0; gap: 10px; margin-bottom: 8px; }
html[data-cote="replie"] .marque-nom, html[data-cote="replie"] .nav-lien .libelle, html[data-cote="replie"] .direct .libelle, html[data-cote="replie"] .nav-groupe { display: none; }
html[data-cote="replie"] .nav-lien { justify-content: center; padding: 0; }
html[data-cote="replie"] .nav-bloc + .nav-bloc { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rail-trait); }
html[data-cote="replie"] .compteur { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; background: var(--accent); color: var(--accent-encre); }
html[data-cote="replie"] .direct { justify-content: center; }

.haut {
  position: sticky; top: 0; z-index: 30; height: var(--hauteur-haut); display: flex; align-items: center; gap: 14px; padding: 0 var(--e8);
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--trait);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.fil { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; font-size: 13px; color: var(--encre-3); white-space: nowrap; }
.fil b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fil svg { color: var(--trait-fort); }
.haut-recherche {
  flex: 1; max-width: 400px; height: 38px; margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
  border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--fond); color: var(--encre-3); font-size: 13.5px; text-align: left;
}
.haut-recherche:hover { border-color: var(--trait-fort); background: var(--surface); box-shadow: var(--ombre); }
.haut-recherche-texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.touches { display: inline-flex; gap: 3px; flex: none; }
.touches kbd {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--surface); border: 1px solid var(--trait);
  box-shadow: 0 1px 0 var(--trait); color: var(--encre-3); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.haut-droite { display: flex; align-items: center; gap: var(--e2); flex: none; }
.menu-ancre { position: relative; }
.cloche, .bouton-compte {
  position: relative; width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--rayon-m); background: transparent; color: var(--encre);
}
.cloche:hover, .cloche[aria-expanded="true"], .bouton-compte:hover, .bouton-compte[aria-expanded="true"] { background: var(--survol); }
.cloche-nombre {
  position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--ko); color: var(--surface); font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: var(--c, var(--vert)); color: var(--c-encre, #fff); font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
.avatar.petit { width: 26px; height: 26px; font-size: 10px; }
.etiquette-demo {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--rayon-s);
  background: var(--demo-fond); color: var(--demo); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.etiquette-demo span { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
button.etiquette-demo:hover { box-shadow: inset 0 0 0 1px var(--demo); }

.menu-flottant {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 260px; max-width: calc(100vw - 24px);
  max-height: calc(100dvh - var(--hauteur-haut) - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-haute);
}
.menu-flottant.large { width: 360px; }
.menu-flottant .tete {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--trait); color: var(--encre); font-size: 13.5px; font-weight: 700;
}
.menu-flottant .tete a { font-size: 12.5px; font-weight: 600; }
.menu-flottant .compte-tete { justify-content: flex-start; }
.menu-flottant .compte-tete span:not(.avatar) { display: grid; }
.menu-flottant .compte-tete span span { font-size: 12px; font-weight: 500; color: var(--encre-3); }
.menu-flottant .item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--rayon-m);
  background: transparent; color: var(--texte); font-size: 13.5px; text-align: left; text-decoration: none;
}
.menu-flottant a.item:hover, .menu-flottant button.item:hover { background: var(--surface-2); text-decoration: none; }
.menu-flottant .item > svg { color: var(--encre-3); }
.menu-flottant .item b { font-weight: 600; }
.menu-flottant div.item { align-items: flex-start; }
.item-texte { display: grid; min-width: 0; }
.item-texte span { color: var(--encre-2); font-size: 12.5px; overflow-wrap: anywhere; }
.item-texte time { color: var(--encre-3); font-size: 11.5px; }
.menu-vide { padding: 14px 12px; color: var(--encre-3); font-size: 13px; }

/* ---------- En-tête d'écran ---------- */
.entete { display: flex; justify-content: space-between; gap: 14px 24px; align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--e1); }
.chapo { color: var(--encre-3); margin-top: 6px; font-size: 14.5px; max-width: 760px; }
.entete-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.entete-actions.droite { justify-content: flex-end; }
.surtitre {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vert);
}
.surtitre::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e5); box-shadow: var(--ombre); display: grid; gap: var(--e3); min-width: 0;
}
.carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.carte.cliquable:hover { border-color: var(--accent-trait); box-shadow: var(--ombre-survol); }
.grille { display: grid; gap: var(--e3); min-width: 0; }
.grille.deux, .grille.deux-fixe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pile { display: grid; gap: var(--e3); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.espace { flex: 1; }

/* ---------- Tuiles de chiffres ---------- */
.tuile {
  min-width: 0; padding: var(--e4) calc(18px * var(--d)); background: var(--accent-doux);
  border: 1px solid var(--accent-doux-2); border-radius: var(--rayon);
}
.tuile-label { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--encre-2); line-height: 1.3; }
.tuile-valeur {
  margin-top: var(--e2); color: var(--encre); font-size: 25px; font-weight: 700; letter-spacing: -.04em; line-height: 1.12;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tuile-valeur small { font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--encre-2); }
.tuile-detail { margin-top: 3px; font-size: 12.5px; color: var(--encre-2); }
.tuile.perte .tuile-valeur { color: var(--ko); }
.ico-tuile {
  width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: var(--rayon-m);
  background: var(--accent-doux); color: var(--vert);
}
.ico-tuile.petit { width: 32px; height: 32px; }
.ico-tuile.blanc { background: var(--surface); box-shadow: var(--ombre); }
.ico-tuile.rouge { background: var(--ko-fond); color: var(--ko); }
.ico-tuile.orange { background: var(--attente-fond); color: var(--attente); }
.ico-tuile.bleu { background: var(--bleu-fond); color: var(--bleu); }
.ico-tuile.violet { background: var(--demo-fond); color: var(--demo); }
.ico-tuile.gris { background: var(--surface-2); color: var(--encre-2); }

/* ---------- Bandeau d'accueil ---------- */
.heros {
  position: relative; overflow: hidden; display: grid; gap: 6px; padding: calc(26px * var(--d)) calc(28px * var(--d));
  border-radius: var(--rayon-l); color: #fff;
  background:
    radial-gradient(90% 150% at 100% 0, color-mix(in srgb, var(--accent) 26%, transparent) 0, transparent 62%),
    linear-gradient(120deg, var(--rail-fort), var(--rail));
}
.heros-date { font-size: 13px; color: rgb(255 255 255 / 78%); }
.heros-date::first-letter { text-transform: uppercase; }
.heros-titre { color: #fff; font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; }
.heros-sous { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.heros-barre { height: 8px; border-radius: 99px; background: rgb(255 255 255 / 22%); overflow: hidden; }
.heros-barre span { display: block; height: 100%; width: calc(var(--v) * 100%); background: currentColor; border-radius: 99px; }
.heros-barre.clair { background: var(--surface-2); color: var(--vert); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 14px;
  background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); box-shadow: var(--ombre);
  color: var(--encre); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--surface-2); border-color: var(--encre-3); text-decoration: none; }
.btn:disabled, .btn.inactif { opacity: .5; cursor: not-allowed; }
.btn.primaire { background: var(--vert); border-color: var(--vert); color: var(--vert-encre); }
.btn.primaire:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.btn.accent:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: var(--wa-encre); }
.btn.wa:hover { background: color-mix(in srgb, var(--wa) 86%, #000); }
.btn.danger { color: var(--ko); border-color: var(--ko-trait); }
.btn.danger:hover { background: var(--ko-fond); border-color: var(--ko-trait); }
.btn.fantome { background: transparent; border-color: transparent; box-shadow: none; color: var(--texte); }
.btn.fantome:hover { background: var(--survol); }
.btn.petit { min-height: 32px; padding: 4px 11px; font-size: 13px; border-radius: var(--rayon-s); }
.btn.grand { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.btn-icone {
  width: 38px; height: 38px; padding: 0; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--rayon-m); background: transparent; color: var(--encre);
}
.btn-icone:hover { background: var(--survol); }
.btn.btn-icone { width: 38px; min-height: 38px; }
.btn.primaire.btn-icone:hover { background: var(--vert-fonce); }
.micro { background: none; border: 0; padding: 6px 2px; color: var(--encre-2); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.micro:hover { color: var(--encre); }
.micro.clair { color: inherit; font-weight: 600; white-space: nowrap; }
.lien { font-size: 13.5px; font-weight: 600; }

/* ---------- Champs ---------- */
select, textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="password"], input[type="url"], input[type="email"], input:not([type]) {
  max-width: 100%; min-height: 38px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-m); color: var(--encre); font-size: 14px;
}
select:hover, textarea:hover, input:hover { border-color: var(--encre-3); }
select:focus, textarea:focus, input:focus { outline: none; border-color: var(--vert); box-shadow: var(--anneau); }
input::placeholder, textarea::placeholder { color: var(--encre-3); opacity: 1; }
select {
  appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F9396' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
textarea { width: 100%; resize: vertical; line-height: 1.5; }
.champ { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.champ input, .champ select, .champ textarea { font-weight: 400; width: 100%; }
.champ .aide { font-weight: 400; }
.champ-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.champ-ligne input { width: 110px; }
.coche { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 14px; min-width: 0; }
.coche input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--vert); }
.aide { font-size: 13px; color: var(--encre-3); }
.discret { font-size: 13px; color: var(--encre-3); }
.vide { color: var(--encre-3); font-size: 13.5px; }
.ko-texte { color: var(--ko) !important; font-size: 13px; }

/* ---------- États vides ---------- */
.etat-vide { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.etat-vide .ico-tuile { width: 48px; height: 48px; margin-bottom: 10px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.etat-vide b { font-size: 16px; letter-spacing: -.02em; }
.etat-vide p { max-width: 420px; color: var(--encre-3); font-size: 14px; }
.etat-vide .btn { margin-top: 10px; }

/* ---------- Étiquettes et badges ---------- */
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--rayon-s); vertical-align: 1px; letter-spacing: .02em; }
.tag-demo { background: var(--demo-fond); color: var(--demo); }
.tag-brief { background: var(--surface-2); color: var(--encre-2); }
.tag-prop { background: var(--accent-doux); color: var(--vert); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 8px; border-radius: var(--rayon-s);
  background: var(--survol); color: var(--encre-2); font-size: 12px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.badge.sans-point::before { display: none; }
.badge.ok, .badge.vert { background: var(--ok-fond); color: var(--ok); }
.badge.ko, .badge.rouge { background: var(--ko-fond); color: var(--ko); }
.badge.attente, .badge.orange { background: var(--attente-fond); color: var(--attente); }
.badge.bleu { background: var(--bleu-fond); color: var(--bleu); }
.badge.violet { background: var(--demo-fond); color: var(--demo); }
.badge.neutre, .badge.gris { background: var(--survol); color: var(--encre-2); }
.badge.reseau { background: var(--accent-doux); color: var(--vert); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.pastille { flex: none; padding: 2px 8px; border-radius: var(--rayon-s); background: var(--surface-2); color: var(--encre-2); font-size: 11.5px; font-weight: 700; }
.p-abdel { background: var(--p1-fond); color: var(--p1); }
.p-moha { background: var(--p2-fond); color: var(--p2); }
.p-ensemble { background: var(--accent-doux); color: var(--vert); }

/* ---------- Onglets, filtres ---------- */
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre {
  min-height: 34px; padding: 5px 13px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-m);
  color: var(--encre-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.filtre:hover { color: var(--encre); border-color: var(--trait-fort); }
.filtre.actif { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.semaines { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.semaines .filtre { flex: none; }
.segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--trait); border-radius: calc(var(--rayon-m) + 2px); }
.segment button, .segment a {
  min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--rayon-s);
  background: transparent; color: var(--encre-3); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.segment button:hover, .segment a:hover { color: var(--encre); }
.segment [aria-pressed="true"], .segment [aria-current="page"], .segment .actif { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px color-mix(in srgb, var(--r-base) 12%, transparent); }
.onglets { display: flex; gap: var(--e6); border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: none; }
.onglets a, .onglets button {
  padding: 10px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--encre-3); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.onglets a:hover, .onglets button:hover { color: var(--encre); }
.onglets [aria-selected="true"], .onglets [aria-current="page"], .onglets .actif { color: var(--encre); border-bottom-color: var(--vert); }

/* ---------- Listes ---------- */
.liste { display: flex; flex-direction: column; gap: 8px; }
.ligne {
  display: flex; align-items: center; gap: 14px; padding: var(--e3) var(--e4); background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); color: inherit; text-decoration: none;
}
a.ligne:hover, button.ligne:hover { border-color: var(--accent-trait); box-shadow: var(--ombre-survol); text-decoration: none; }
.ligne.active { border-color: var(--accent-trait); background: var(--accent-doux); box-shadow: inset 3px 0 0 var(--vert); }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-texte b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-texte span { display: block; font-size: 13px; color: var(--encre-3); }

.taches { display: grid; gap: 2px; }
.tache { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: var(--e2) 0; border-top: 1px solid var(--trait); flex-wrap: wrap; }
.tache:first-child { border-top: 0; }
.tache > .coche { flex: 1 1 200px; }
.tache-titre { display: block; font-weight: 600; color: var(--encre); }
.tache-pourquoi { display: block; font-size: 13px; color: var(--encre-3); }
.tache.faite .tache-titre, .tache-bloc.faite .tache-titre { text-decoration: line-through; color: var(--encre-3); font-weight: 500; }
.tache-bloc { padding: var(--e2) 0; border-top: 1px solid var(--trait); display: grid; gap: 4px; }
.tache-bloc:first-child { border-top: 0; }
.tache-bloc > .tache { border: 0; padding: 0; }
.tache-risque { font-size: 13px; color: var(--encre-3); }
.attend { padding: 5px 9px; border-radius: var(--rayon-s); background: var(--attente-fond); color: var(--attente); font-size: 13px; }
.sous-liste { display: grid; gap: 7px; margin-bottom: 4px; }
.alertes { display: grid; gap: 6px; }
.alertes a { display: block; padding: 8px 12px; border-radius: var(--rayon-m); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.alertes .alerte a { background: var(--attente-fond); color: var(--attente); }
.alertes .blocage a { background: var(--ko-fond); color: var(--ko); }
.alerte-info { padding: var(--e3) 14px; border-radius: var(--rayon); background: var(--accent-doux); border: 1px solid var(--accent-doux-2); color: var(--texte); font-size: 13.5px; }
.jour-courant { border-color: var(--accent-trait); box-shadow: inset 3px 0 0 var(--vert), var(--ombre); }
.num-jour { color: var(--vert); margin-right: 4px; }
.lignes { display: grid; }
.lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.lignes li:first-child { border-top: 0; }
.lignes li > div:first-child { min-width: 0; }
.ligne-droite { display: grid; justify-items: end; gap: 3px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.classement { display: grid; gap: 6px; }
.classement li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--trait); }
.classement li:first-child { border-top: 0; }
.points { display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: 14px; }
ol.points { list-style: decimal; }
.points li::marker { color: var(--encre-3); }

/* ---------- Actions du jour ---------- */
.actions48 { display: grid; }
.action48 { padding: var(--e3) 0; border-top: 1px solid var(--trait); display: grid; gap: 4px; }
.action48:first-child { border-top: 0; padding-top: 0; }
.action48:last-child { padding-bottom: 0; }
.action-tete { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--encre-3); }
.quand.retard { color: var(--ko); }
.action-corps { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.action-corps > .coche, .action-corps > .tache-titre { flex: 1 1 190px; }
.action-droite { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.decisions { display: grid; }
.decision { padding: var(--e3) 0; border-top: 1px solid var(--trait); display: grid; gap: 5px; }
.decision:first-child { border-top: 0; padding-top: 0; }
.titre-decision { margin-top: 6px; font-size: 18px; letter-spacing: -.025em; }
.proposition { border-color: var(--attente); }
.proposition h2 { margin-top: 6px; }
.urgences { border-color: var(--ko-trait); }
.verrous { display: grid; gap: 6px; font-size: 14px; }
.verrous li { display: flex; gap: 8px; align-items: baseline; }
.verrous span { padding: 1px 7px; border-radius: var(--rayon-s); background: var(--ko-fond); color: var(--ko); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.verrous .ouvert span { background: var(--ok-fond); color: var(--ok); }

/* ---------- CRM ---------- */
.outils-crm { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.outils-crm input { flex: 1 1 220px; }
.contact {
  display: grid; gap: var(--e2); padding: var(--e4); background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 0;
}
.carte .contact { box-shadow: none; background: transparent; padding: 10px 0 12px; border: 0; border-top: 1px solid var(--trait); border-radius: 0; }
.carte .contact:first-of-type { border-top: 0; padding-top: 0; }
.contact-tete { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.contact-meta { font-size: 13px; color: var(--encre-3); }
.prochaine { font-size: 14px; }
.prochaine b { margin-right: 4px; }
.prochaine.retard b { color: var(--ko); }
.prochaine.jourj b { color: var(--vert); }
.contact .btn { min-height: 34px; padding: 5px 11px; font-size: 13px; }
.colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--e3); overflow-x: auto; padding-bottom: 8px; }
.colonne-etape { display: grid; gap: 10px; align-content: start; padding: 10px; border-radius: var(--rayon); background: var(--surface-2); }
.colonne-etape h2 { font-size: 13.5px; }
.colonne-etape h2 span { color: var(--encre-3); font-weight: 500; }
.journal { display: grid; gap: 6px; font-size: 13px; }
.journal time { color: var(--encre-3); margin-right: 6px; }
details.plus summary, details.connecteur summary { cursor: pointer; }
details.plus summary { font-size: 13px; font-weight: 600; color: var(--encre-2); }
details.plus[open] summary { margin-bottom: 8px; }

/* ---------- Simulateur ---------- */
.choix-scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scenario { display: grid; padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--texte); text-align: left; cursor: pointer; }
.scenario:hover { border-color: var(--accent-trait); box-shadow: var(--ombre-survol); }
.scenario span { font-size: 12.5px; color: var(--encre-3); }
.scenario.choisi { border-color: var(--accent-trait); background: var(--accent-doux); }
.chaine { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.chaine div { display: grid; gap: 2px; align-content: center; min-width: 0; padding: var(--e3) 10px; background: var(--surface-2); }
.chaine div:first-child { border-radius: var(--rayon) 0 0 var(--rayon); }
.chaine div:last-child { border-radius: 0 var(--rayon) var(--rayon) 0; }
.chaine b { font-size: 19px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chaine span { font-size: 12px; color: var(--encre-3); }
.chaine .fin { background: var(--accent); color: var(--accent-encre); }
.chaine .fin b, .chaine .fin span { color: inherit; }
.hypotheses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.hyp { display: grid; gap: 3px; align-content: start; }
.hyp-label { font-size: 13px; font-weight: 600; color: var(--encre); }
.hyp input { width: 100%; font-variant-numeric: tabular-nums; }
.hyp-aide { font-size: 12px; color: var(--encre-3); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 500; color: var(--encre-3); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); }
.barres { display: flex; align-items: stretch; gap: 3px; height: 180px; border-bottom: 1px solid var(--trait); }
.barre { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; background: none; border: 0; padding: 0; cursor: pointer; }
.barre:hover { background: var(--surface-2); }
.seg { display: block; height: calc(var(--h) * 100%); }
.seg:first-child { border-radius: 4px 4px 0 0; }
.axe { display: flex; justify-content: space-between; font-size: 12px; color: var(--encre-3); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
th {
  padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--trait); color: var(--encre-3);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
th:first-child { border-top-left-radius: var(--rayon-m); }
th:last-child { border-top-right-radius: var(--rayon-m); }
td { padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; color: var(--texte); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.saisie-table { width: 110px; min-height: 34px !important; padding: 3px 8px !important; }

/* ---------- Trésorerie, entonnoir ---------- */
.jauge { display: grid; gap: 4px; }
.jauge-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.etape { display: grid; gap: 6px; align-content: start; padding: var(--e3); border: 1px solid var(--trait); border-radius: var(--rayon); }
.etape-tete { display: grid; font-size: 13.5px; }
.etape p { font-size: 13px; color: var(--encre-3); }
.cascade { display: grid; }
.cascade li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--trait); }
.cascade li:first-child { border-top: 0; }
.cascade b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cascade .fort { color: var(--vert); font-weight: 600; }
.taux { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.taux input { width: 74px; min-height: 32px; padding: 3px 6px; }
.etages { display: grid; gap: 5px; }
.etage { display: flex; justify-content: space-between; gap: 14px; width: calc(var(--l) * 100%); min-width: fit-content; padding: 8px 12px; border-radius: var(--rayon-m); background: var(--accent-doux); color: var(--encre); font-size: 13.5px; white-space: nowrap; }

/* ---------- Contenus ---------- */
.contenus { display: grid; }
.contenu { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--trait); }
.contenu:first-child { border-top: 0; }
.contenu-tete { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.contenu select { min-height: 34px; font-size: 13px; padding: 4px 30px 4px 8px; }
.contenu-corps { min-width: 0; display: grid; gap: 2px; }
.contenu-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.accroche { font-size: 14.5px; }
.temps-fort { border-left: 3px solid var(--attente); padding-left: 10px; }
.accroches { display: grid; }
.accroches li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--trait); align-items: baseline; }
.accroches li:first-child { border-top: 0; }
.controle { display: grid; gap: 4px; font-size: 13px; }
.controle li { position: relative; padding-left: 14px; }
.controle li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--encre-3); }
.controle .ko { color: var(--ko); }
.controle .ko::before { background: var(--ko); }
.controle .note { color: var(--encre-2); }
.message { margin: 0; padding: 11px 12px; background: var(--surface-2); border-radius: var(--rayon-m); color: var(--texte); font: inherit; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.boucle { display: grid; gap: 8px; counter-reset: b; }
.boucle li { counter-increment: b; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; font-size: 14px; }
.boucle li::before { content: counter(b); grid-row: span 2; width: 26px; height: 26px; border-radius: var(--rayon-s); display: grid; place-items: center; background: var(--accent-doux); color: var(--vert); font-size: 13px; font-weight: 700; }
.boucle span { color: var(--encre-3); font-size: 13px; }
.test { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--trait); }
.test:first-child { border-top: 0; padding-top: 0; }
.document { margin-top: 8px; }

/* ---------- Opérateurs, connecteurs ---------- */
.lien-affiliation { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.lien-affiliation code { overflow-wrap: anywhere; }
.lien-masque { font-size: 13px; color: var(--encre-3); font-style: italic; }
.connecteur summary { display: flex; align-items: center; gap: 12px; list-style: none; }
.connecteur summary::-webkit-details-marker { display: none; }
.rang { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--rayon-m); background: var(--accent-doux); color: var(--vert); font-size: 13px; font-weight: 700; }
.connecteur-nom { display: grid; flex: 1; min-width: 0; }
.fiche-c { margin: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 7px 14px; font-size: 13.5px; }
.fiche-c dt { color: var(--encre-3); font-size: 13px; }
.fiche-c dd { margin: 0; min-width: 0; }
.sources { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ---------- Stratégie ---------- */
.machine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: etape; }
.machine li { counter-increment: etape; display: grid; gap: 3px; align-content: start; padding: var(--e3); border-radius: var(--rayon); background: var(--surface-2); font-size: 13.5px; }
.machine li::before { content: counter(etape); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--rayon-s); background: var(--accent-doux); color: var(--vert); font-size: 12.5px; font-weight: 700; }
.machine b { font-size: 14.5px; }
.machine.tunnel { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.machine.tunnel .badge { justify-self: start; }
.machine .ou { font-size: 12px; color: var(--vert); font-weight: 600; }
.pilier { display: grid; gap: 3px; align-content: start; padding: var(--e3); border-radius: var(--rayon); background: var(--surface-2); }
.pilier p { font-size: 13.5px; color: var(--encre-2); }
.idees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.idee { display: grid; gap: 5px; align-content: start; justify-items: start; padding: var(--e3); border: 1px solid var(--trait); border-radius: var(--rayon); }
.idee p { font-size: 13px; color: var(--encre-3); }
.citation { color: var(--encre); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.nuancier { display: flex; flex-wrap: wrap; gap: 14px; }
.nuancier div { display: grid; gap: 2px; font-size: 12px; }
.nuancier i { width: 86px; height: 52px; border-radius: var(--rayon-m); border: 1px solid var(--trait); }
.nuancier span { color: var(--encre-3); }

/* ---------- Pour Moha ---------- */
.moha { display: grid; gap: var(--e8); }
.moha-une {
  display: grid; gap: 14px; padding: 40px 34px; border-radius: var(--rayon-l); color: #fff;
  background:
    radial-gradient(80% 130% at 100% 0, color-mix(in srgb, var(--accent) 24%, transparent) 0, transparent 62%),
    linear-gradient(135deg, var(--rail-fort), var(--rail));
}
.moha-une h1 { color: #fff; font-size: clamp(30px, 5vw, 48px); line-height: 1.06; letter-spacing: -.04em; max-width: 18ch; }
.moha-une .surtitre { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.moha-une .surtitre::before { display: none; }
.moha-chapo { color: rgb(255 255 255 / 88%); font-size: 17px; max-width: 52ch; }
.moha-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.moha-une .btn:not(.wa) { background: transparent; color: inherit; border-color: rgb(255 255 255 / 34%); }
.moha-une .btn:not(.wa):hover { background: rgb(255 255 255 / 10%); }
.moha-une .btn.wa { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.moha-bloc { display: grid; gap: var(--e3); }
.moha-bloc h2 { font-size: 21px; letter-spacing: -.03em; }
.moha-texte { color: var(--encre-2); max-width: 62ch; }

/* ---------- Parcours de 2 minutes ---------- */
.parcours { display: grid; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }
.parcours-tete { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--encre-3); }
.parcours-points { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.parcours-points i { height: 5px; border-radius: 99px; background: var(--survol); }
.parcours-points i.fait { background: var(--vert); }
.parcours-corps { display: grid; gap: 10px; min-height: 280px; align-content: start; }
.parcours-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deux-fixe .btn.grand { white-space: normal; text-align: center; padding: 10px; }

/* ---------- Panneau latéral ---------- */
dialog.panneau {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--trait);
  width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; overflow: hidden;
  background: var(--surface); color: var(--texte); box-shadow: var(--ombre-haute);
}
dialog.panneau::backdrop { background: color-mix(in srgb, var(--rail-fort) 42%, transparent); }
dialog.confirmation {
  margin: auto 16px 16px auto; width: min(380px, calc(100vw - 32px)); padding: var(--e5); border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface); color: var(--texte); box-shadow: var(--ombre-haute);
}
dialog.confirmation::backdrop { background: color-mix(in srgb, var(--rail-fort) 30%, transparent); }
dialog.confirmation p { font-size: 15px; font-weight: 600; line-height: 1.4; }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: var(--e4); }
.panneau-forme { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.panneau-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: var(--e5) calc(22px * var(--d)) var(--e4); border-bottom: 1px solid var(--trait); }
.panneau-titres { min-width: 0; }
.panneau-tete h2 { font-size: 18px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.panneau-tete p { margin-top: 3px; font-size: 13px; color: var(--encre-3); }
.panneau-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e5) calc(22px * var(--d));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start;
}
.panneau-corps > * { grid-column: 1 / -1; min-width: 0; }
.panneau-corps > .champ.court { grid-column: auto; }
.panneau-erreur { margin: 0 calc(22px * var(--d)) var(--e3); padding: 10px 12px; border-radius: var(--rayon-m); background: var(--ko-fond); border: 1px solid var(--ko-trait); color: var(--ko); font-size: 13.5px; }
.panneau-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px calc(22px * var(--d)); padding-bottom: max(14px, env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--trait); }
.recherche-panneau { position: relative; display: block; }
.recherche-panneau svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--encre-3); }
.recherche-panneau input { width: 100%; padding-left: 36px; }
.menu-plus { display: grid; gap: var(--e4); }
.menu-bloc { display: grid; gap: 4px; }
.nav-titre { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.menu-groupe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.menu-plus a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--rayon-m); color: var(--texte); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.menu-plus a svg { color: var(--encre-3); }
.menu-plus a:hover { background: var(--surface-2); }
.menu-plus a.actif { background: var(--accent-doux); color: var(--vert); font-weight: 600; }
.menu-plus a.actif svg { color: var(--vert); }

/* ---------- Bulle ---------- */
.toast {
  position: fixed; inset: auto auto 24px 50%; margin: 0; z-index: 90; border: 0; padding: 10px 16px; max-width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; overflow: visible;
  background: var(--encre); color: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-haute); font-size: 13.5px; font-weight: 500;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.erreur { background: var(--ko); color: var(--surface); }

/* ---------- Pages d'accès ---------- */
.page-acces { min-height: 100dvh; }
main.acces { min-height: 100dvh; max-width: none; padding: 0; gap: 0; align-content: stretch; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.acces-cote {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px; color: #fff;
  background:
    radial-gradient(90% 90% at 100% 0, color-mix(in srgb, var(--accent) 24%, transparent) 0, transparent 62%),
    linear-gradient(160deg, var(--rail-fort), var(--rail));
}
.acces-cote .marque { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.acces-cote h2 { color: #fff; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.04em; max-width: 14ch; }
.acces-cote p { margin-top: 14px; max-width: 40ch; color: rgb(255 255 255 / 80%); font-size: 15px; }
.acces-droite { display: grid; place-items: center; padding: 24px 16px; }
.acces-carte {
  width: 100%; max-width: 380px; display: grid; gap: 14px; padding: 32px 30px; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon-l); box-shadow: var(--ombre-haute);
}
.acces-carte h1 { font-size: 24px; }
.acces-champs { display: grid; gap: 14px; }
.acces-carte .btn { width: 100%; min-height: 44px; }
.acces-erreur { padding: 9px 12px; border-radius: var(--rayon-m); background: var(--ko-fond); border: 1px solid var(--ko-trait); color: var(--ko); font-size: 13.5px; }

/* ---------- Téléphone ---------- */
.barre-bas { display: none; }
@media (max-width: 1100px) {
  .haut-recherche { max-width: 280px; }
  .fil { display: none; }
  .haut-recherche { margin-left: 0; }
  .haut-droite { margin-left: auto; }
}
@media (max-width: 860px) {
  :root { --hauteur-haut: 56px; }
  .coque { display: block; }
  .lateral { display: none; }
  .haut { padding: 0 16px; gap: 8px; }
  .menu-ancre { position: static; }
  .menu-flottant, .menu-flottant.large { left: 12px; right: 12px; top: calc(100% + 6px); width: auto; max-width: none; max-height: calc(100dvh - var(--hauteur-haut) - 92px); }
  .haut-recherche { flex: none; width: 38px; max-width: 38px; padding: 0; justify-content: center; margin-left: auto; }
  .haut-recherche-texte, .touches { display: none; }
  .haut-droite { margin-left: 0; gap: 4px; }
  .etiquette-demo span { display: none; }
  main { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 24px; }
  select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="password"], input[type="url"], input[type="email"], input:not([type]) { font-size: 16px; min-height: 42px; }
  .btn { min-height: 42px; }
  .btn.petit, .contact .btn { min-height: 36px; }
  .grille.deux, .grille.trois, .hypotheses, .etapes { grid-template-columns: minmax(0, 1fr); }
  .grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille.trois.compacte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .grille.quatre.compacte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .compacte .tuile { padding: 9px 10px; }
  .compacte .tuile-valeur { font-size: 18px; margin-top: 4px; }
  .compacte .tuile-valeur small, .compacte .tuile-detail { display: none; }
  .compacte .tuile-label { font-size: 11.5px; line-height: 1.25; }
  .fiche-actions .btn.wa, .fiche-actions #message-lien { flex: 1 1 100%; order: -1; }
  .choix-scenarios { gap: 6px; }
  .scenario:not(.montant) span { display: none; }
  .chaine { grid-auto-flow: row; gap: 3px; }
  .chaine div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; }
  .chaine div:first-child { border-radius: var(--rayon) var(--rayon) 0 0; }
  .chaine div:last-child { border-radius: 0 0 var(--rayon) var(--rayon); }
  .machine { grid-template-columns: minmax(0, 1fr); }
  .idees { grid-template-columns: minmax(0, 1fr); }
  .fiche-c { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fiche-c dd { margin-bottom: 8px; }
  .moha-une { padding: 26px 20px; }
  .heros { padding: 20px; }
  .barre-bas {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: color-mix(in srgb, var(--surface) 95%, transparent); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .barre-bas a, .barre-bas button {
    min-height: 58px; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 2px; border: 0; background: none;
    color: var(--encre-3); font-size: 11px; font-weight: 600; text-decoration: none;
  }
  .barre-bas span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-bas .actif { color: var(--vert); }
  .barre-bas .actif svg { stroke-width: 2.1; }
  dialog.panneau { width: 100vw; border-left: 0; }
  .panneau-corps { grid-template-columns: minmax(0, 1fr); }
  .panneau-corps > .champ.court { grid-column: 1 / -1; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
  main.acces { padding: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .acces-cote { padding: 20px 20px 22px; gap: 14px; }
  .acces-cote h2 { font-size: 24px; max-width: none; }
  .acces-cote p { display: none; }
  .acces-droite { place-items: start center; }
}

/* ---------- Mouvement, seulement si la personne l'accepte ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-icone, .filtre, .nav-lien, .replier, .cloche, .bouton-compte, .haut-recherche, .ligne, .scenario, .carte.cliquable,
  select, textarea, input, .menu-flottant .item, .menu-plus a, .segment button, .segment a {
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  }
  .coque { transition: grid-template-columns .2s var(--courbe); }
  .nav-groupe svg { transition: transform .15s; }
  .toast { transition: opacity .15s, transform .15s; }
  .menu-flottant { animation: menu-entre .14s var(--courbe) backwards; }
  dialog.panneau[open] { animation: panneau-entre .24s var(--courbe) backwards; }
  dialog.panneau[open]::backdrop { animation: voile-entre .2s linear backwards; }
  #ecran.arrive > * { animation: ecran-entre .26s var(--courbe) backwards; }
}
@keyframes menu-entre { from { opacity: .4; transform: translateY(-4px); } }
@keyframes panneau-entre { from { transform: translateX(32px); opacity: .6; } }
@keyframes voile-entre { from { opacity: .3; } }
@keyframes ecran-entre { from { opacity: .4; transform: translateY(5px); } }

@media print {
  .lateral, .haut, .barre-bas, .moha-actions, .toast, .sans-impression, .filtres, .actions { display: none !important; }
  .entete .btn, .ligne-droite .btn, .ligne-droite .micro { display: none !important; }
  .coque { display: block; }
  main { max-width: none; padding: 0; }
  body { background: #fff; }
  .moha-une, .heros { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tuile, .carte, .pilier { box-shadow: none; break-inside: avoid; }
}

/* Documents */
.doc-section { margin: 18px 0 8px; font-size: 1rem; }
.doc-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.doc-texte { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0 0; }

/* Écran Comptes */
.compte { display: grid; gap: 8px; align-content: start; min-width: 0; }
.compte-chiffre { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.compte-chiffre .discret { font-weight: 500; letter-spacing: 0; }
.compte-courbe { display: block; width: 100%; height: 40px; color: var(--ok); }
.compte .btn { justify-self: start; }
@media (max-width: 720px) { .grille.deux:has(> .compte) { grid-template-columns: minmax(0, 1fr); } }