/* ==========================================================================
   Koalasso — landing page
   Implementation of "Koalasso Landing.dc.html".
   All colour / type / spacing values come from the Koalasso design system
   tokens (_ds/.../tokens/*.css). Nothing here hard-codes a brand value that
   already exists as a token.
   ========================================================================== */

/* --- local layout constants ------------------------------------------- */
:root{
  --page-pad:32px;
  --section-gap:96px;
  --fs-hero:60px;
  --fs-section:38px;
}

*,*::before,*::after{box-sizing:border-box}

/* Le header est collant : sans scroll-padding, une ancre place sa cible
   sous le header. La valeur couvre la hauteur du header plus une respiration. */
html{scroll-behavior:smooth;scroll-padding-top:88px}

/* Grille de fond : deux jeux de lignes en dégradés répétés, posés sur le
   crème. Le vert de marque à 3,5 % reste sous le seuil de perception directe
   — la grille se devine, elle ne se lit pas.
   Pas de background-attachment:fixed : iOS Safari le rend mal, et sur un
   motif uniforme le défilement ne se voit pas. */
body{
  margin:0;
  background-color:var(--creme);
  background-image:
    linear-gradient(to right, rgba(23,85,51,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,85,51,.035) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:center top;
  color:var(--text-body);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

/* Les sections pleine largeur et les cartes doivent couvrir la grille,
   sinon elle transparaît sous les aplats. */
.kolaia,.cta,.site-header,.site-footer{position:relative}
.kolaia,.cta{background-color:var(--eucalyptus)}
.site-footer{background-color:var(--creme)}

img{max-width:100%}

a{color:var(--text-brand);text-decoration:none;border-bottom:0}
a:hover{color:var(--eucalyptus-700)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --- apparition au défilement -------------------------------------------
   « .reveal » est posée par scripts/site.js, jamais dans le HTML : sans
   JavaScript rien n'est masqué, et la page reste entièrement lisible.
   --reveal-i décale les voisins d'une même grille pour créer une vague. */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:calc(var(--reveal-i,0) * 70ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;will-change:auto}
/* Déjà défilé au-dessus de la fenêtre : on affiche sans rejouer l'animation,
   qui se déroulerait hors du champ de vision. */
.reveal--instant{transition:none;transition-delay:0s}

/* --- shared primitives ------------------------------------------------- */
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-pad)}

.eyebrow{
  margin:0;
  font-family:var(--font-data);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}

.num{font-family:var(--font-data);font-variant-numeric:var(--numeric-data)}

.h-section{
  margin:0;
  font-family:var(--font-brand);
  font-weight:var(--fw-medium);
  font-size:var(--fs-section);
  line-height:1.1;
  letter-spacing:var(--ls-h1);
  color:var(--text-heading);
}

.card{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--vert-clair);
  color:var(--eucalyptus-900);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
}

/* --- Button (mirrors KoalassoDesignSystem_9517a0.Button) ---------------- */
.btn{
  font-family:var(--font-ui);
  font-weight:var(--fw-medium);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  border:var(--border-width) solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  white-space:nowrap;
  font-size:var(--fs-body);
  padding:9px 16px;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}

/* Le relief du survol : le bouton se soulève d'un cheveu, l'appui le repose
   aussitôt. L'ombre est teintée du vert du bouton plutôt que grise — une
   ombre neutre sous un aplat de marque le ternit. Le contour de focus reste
   celui, global, déclaré en haut de ce fichier : on n'y touche pas. */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn--sm{font-size:var(--fs-sm);padding:6px 12px}
.btn--lg{font-size:var(--fs-body-lg);padding:12px 22px}
.btn--block{width:100%}

.btn--primary{background:var(--eucalyptus);color:var(--text-on-brand)}
.btn--primary:hover{
  background:var(--eucalyptus-700);color:var(--text-on-brand);
  box-shadow:0 4px 12px -2px rgba(23,85,51,.32);
}
.btn--primary:active{background:var(--eucalyptus-900)}

/* --surface-accent vaut déjà --vert-clair : le survol d'origine reposait la
   même couleur et ne se voyait pas. Il éclaircit maintenant d'un cran. */
.btn--secondary{background:var(--surface-accent);color:var(--eucalyptus-900)}
.btn--secondary:hover{
  background:var(--vert-clair-50);color:var(--eucalyptus-900);
  box-shadow:0 4px 12px -2px rgba(13,50,32,.32);
}
.btn--secondary:active{background:var(--vert-clair)}

.btn--outline{background:transparent;color:var(--text-brand);border-color:var(--border-brand)}
.btn--outline:hover{
  background:var(--vert-clair-50);color:var(--eucalyptus-700);
  border-color:var(--eucalyptus-700);
  box-shadow:0 4px 12px -2px rgba(23,85,51,.18);
}
.btn--outline:active{background:var(--vert-clair)}

/* --- header ------------------------------------------------------------ */
/* --- signature de marque -----------------------------------------------
   Le verrouillage PNG posait « koalasso » trop haut sur la tête — un peu
   plus d'un pixel à la taille du header. Le mot est donc composé en Nohemi
   à côté du mark seul : l'alignement se règle ici, et le tracé reste net à
   toutes les définitions. Tout est en em, une seule taille — font-size —
   commande le couple entier.
   Approche : celle du dessin d'origine, mesurée sur le PNG — soit le pas
   naturel de la fonte, et non --ls-wordmark, qui resserre de 5 % et donnait
   un mot visiblement plus court que le logo qu'il remplace. */
.wordmark{
  display:inline-flex;align-items:center;gap:.62em;
  font-family:var(--font-brand);font-weight:var(--fw-bold);
  line-height:1;letter-spacing:normal;
  color:var(--eucalyptus);
}
/* Le SVG est détouré au ras des oreilles : sa hauteur est celle de la tête. */
.wordmark__mark{height:1.19em;width:auto;display:block;flex:none}
/* « koalasso » n'a ni capitale ni jambage : son encre s'arrête sur la ligne
   de base, si bien qu'une boîte de ligne ordinaire la laisse haute. Rognée
   sur la hauteur de capitale, la boîte épouse l'encre et le centrage tombe
   juste — c'est exactement le défaut d'alignement du verrouillage. */
.wordmark__name{display:block;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){
  /* Sans rognage, l'écart dépend des métriques retenues par le moteur
     (hhea ou OS/2 win) : il vaut de 0,04 à 0,09 em. La valeur médiane le
     ramène partout sous le seuil du visible. */
  .wordmark__name{transform:translateY(.06em)}
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,247,244,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border-hairline);
  transition:box-shadow var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease-out);
}
/* Posée par scripts/site.js dès que la page a défilé : le header se détache
   du contenu qui passe dessous. */
.site-header.is-stuck{
  background:rgba(247,247,244,.96);
  box-shadow:0 1px 14px rgba(22,27,34,.07);
}
.site-header__inner{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:var(--space-8);
}
.site-nav{
  display:flex;
  gap:26px;
  font-size:var(--fs-sm);
  color:var(--text-body);
  margin-left:var(--space-2);
}
.site-nav a{color:inherit}
.site-nav a:hover{color:var(--text-brand)}
.site-header__spacer{flex:1}
.site-header__home{flex:none;font-size:15.5px}
.site-header__login{font-size:var(--fs-sm);color:var(--text-body);white-space:nowrap}
.site-header__login:hover{color:var(--text-brand)}

/* --- menu mobile (<details>, sans JavaScript) --------------------------- */
.menu{display:none;position:relative;flex:none}
/* Le marqueur par défaut de <summary> est une flèche. Chaque moteur l'expose
   autrement, d'où les quatre règles : sans elles Safari la laisse visible. */
.menu__toggle{
  list-style:none;cursor:pointer;
  width:44px;height:44px;                 /* cible tactile confortable */
  margin-right:-10px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.menu__toggle::marker{content:"";display:none}
.menu__toggle::-webkit-details-marker{display:none}
.menu__toggle::-moz-list-bullet{list-style-type:none}
.menu summary{list-style:none}
.menu__toggle:hover{background:var(--vert-clair-50)}
.menu__bars,.menu__bars::before,.menu__bars::after{
  display:block;width:20px;height:2px;border-radius:2px;
  background:var(--text-heading);
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out);
}
.menu__bars{position:relative}
.menu__bars::before,.menu__bars::after{content:"";position:absolute;left:0}
.menu__bars::before{top:-6px}
.menu__bars::after{top:6px}
.menu[open] .menu__bars{background:transparent}
.menu[open] .menu__bars::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .menu__bars::after{transform:translateY(-6px) rotate(-45deg)}

.menu__panel{
  position:absolute;top:calc(100% + 12px);right:0;
  transform-origin:top right;
  width:min(280px,calc(100vw - 2*var(--page-pad)));
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-overlay);
  padding:var(--space-2);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.menu__panel nav{display:flex;flex-direction:column}
.menu__panel nav a{
  padding:12px 10px;border-radius:var(--radius-sm);
  color:var(--text-body);font-size:var(--fs-body);
}
.menu__panel nav a:hover{background:var(--vert-clair-50);color:var(--text-brand)}
.menu__actions{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-2);border-top:1px solid var(--border-hairline);
}

/* Ouverture animée par le CSS ; fermeture pilotée par scripts/site.js, qui
   retarde le retrait de « open » le temps que menu-out se joue. */
@keyframes menu-in{
  from{opacity:0;transform:translateY(-8px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes menu-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-8px) scale(.97)}
}
.menu[open] .menu__panel{animation:menu-in var(--dur-base) var(--ease-out) both}
.menu.is-closing .menu__panel{animation:menu-out var(--dur-base) var(--ease-out) both}

/* Les traits du bouton glissent vers la croix, ils ne sautent pas. */
.menu__bars,
.menu__bars::before,
.menu__bars::after{
  transition:transform var(--dur-base) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}

/* --- hero -------------------------------------------------------------- */
.hero{padding-block:80px 0;position:relative}
.hero__copy{
  position:relative;
  max-width:720px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--vert-clair);
  color:var(--eucalyptus-900);
  font-family:var(--font-data);
  font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.hero__title{
  margin:0;
  font-family:var(--font-brand);
  font-weight:var(--fw-medium);
  font-size:var(--fs-hero);
  line-height:1.03;
  letter-spacing:var(--ls-display);
  color:var(--text-heading);
  text-wrap:balance;
}
.hero__lede{
  margin:0;
  max-width:560px;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body-lg);
  color:var(--text-body);
}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-1);flex-wrap:wrap;justify-content:center}

.hero__stage{margin-top:56px;position:relative}
.hero__illus{position:absolute;bottom:100%;display:flex}
.hero__illus img{height:120px;display:block}
.hero__illus--left{left:24px}
.hero__illus--right{right:24px}

/* --- app mockup -------------------------------------------------------- */
.app{
  border-radius:var(--radius-lg);
  border:1px solid var(--border-hairline);
  background:var(--blanc);
  box-shadow:var(--shadow-overlay);
  overflow:hidden;
}
.app__chrome{
  height:38px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding-inline:14px;
  border-bottom:1px solid var(--border-hairline);
  background:var(--gris-100);
}
.app__dots{display:flex;gap:6px}
.app__dots span{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--gris-300);display:block}
.app__url{
  margin-left:14px;flex:1;max-width:320px;height:22px;
  border-radius:var(--radius-sm);
  background:var(--blanc);
  border:1px solid var(--border-hairline);
  display:flex;align-items:center;padding-inline:10px;
  font-family:var(--font-data);font-size:var(--fs-xs);color:var(--text-muted);
}
.app__body{display:grid;grid-template-columns:216px 1fr;min-height:520px}

.app__sidebar{
  border-right:1px solid var(--border-hairline);
  padding:18px 14px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--creme);
}
.app__brand{display:flex;align-items:center;gap:9px;padding:0 var(--space-2) 14px}
.app__brand img{height:22px}
.app__brand span{
  font-family:var(--font-brand);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wordmark);font-size:15px;color:var(--text-heading);
}
.app__org{padding:6px var(--space-2)}
.app__nav-item{
  display:flex;align-items:center;gap:10px;
  padding:var(--space-2) 10px;border-radius:var(--radius-sm);
  font-size:var(--fs-sm);color:var(--text-body);
}
.app__nav-item::before{
  content:"";width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--gris-300);flex:none;
}
.app__nav-item.is-active{
  background:var(--vert-clair);color:var(--eucalyptus-900);font-weight:var(--fw-medium);
}
.app__nav-item.is-active::before{background:var(--eucalyptus)}

.app__main{padding:26px 28px;display:flex;flex-direction:column;gap:22px;min-width:0}
.app__title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.app__title{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h2);letter-spacing:var(--ls-h2);color:var(--text-heading);
}
.app__exercise{font-family:var(--font-data);font-variant-numeric:var(--numeric-data);font-size:var(--fs-sm);color:var(--text-muted)}
.app__title-row .app__spacer{flex:1}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
}
.stat__label{
  font-family:var(--font-data);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.stat__value{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:20px;font-weight:var(--fw-medium);color:var(--text-heading);
}

.ledger{border:1px solid var(--border-hairline);border-radius:var(--radius-md);overflow:hidden}
.ledger__scroll{overflow-x:auto}
.ledger__row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 118px 118px 106px;
  gap:var(--space-3);
  padding:12px 16px;
  border-top:1px solid var(--border-hairline);
  font-size:var(--fs-sm);
  align-items:center;
  min-width:640px;
}
.ledger__row--head{
  padding:10px 16px;border-top:0;background:var(--gris-100);
  font-family:var(--font-data);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.ledger__date{font-family:var(--font-data);font-variant-numeric:var(--numeric-data);color:var(--text-muted)}
.ledger__label{color:var(--text-heading);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger__doc{color:var(--text-brand)}
.ledger__doc--pending{color:var(--alerte)}
.ledger__doc--none{color:var(--text-muted)}
.ledger__amount{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  text-align:right;color:var(--text-heading);
}
.ledger__amount--in{color:var(--text-brand);font-weight:var(--fw-medium)}

/* L'écriture rejouée au défilement. Le script pose .is-armed — donc sans lui,
   ou si le visiteur demande moins d'animation, la ligne est simplement là.
   La hauteur repliée s'anime par max-height : le libellé étant en nowrap
   avec ellipse, la ligne tient sur une seule ligne de texte à tous les
   points de rupture, sa hauteur ne bouge pas et le plafond n'est jamais
   atteint. Le fond vert marque l'arrivée puis se retire. */
.ledger__row--new.is-armed{
  max-height:0;
  padding-block:0;
  border-top-width:0;
  opacity:0;
  overflow:hidden;
  background:var(--vert-clair);
  transition:max-height var(--dur-slow) var(--ease-out),
             padding var(--dur-slow) var(--ease-out),
             border-top-width var(--dur-slow) var(--ease-out),
             opacity var(--dur-slow) var(--ease-out),
             background 1s var(--ease-out) .35s;
}
.ledger__row--new.is-armed.is-in{
  max-height:64px;
  padding-block:12px;
  border-top-width:1px;
  opacity:1;
  background:transparent;
}

/* --- section head ------------------------------------------------------ */
.section{padding-block:var(--section-gap) 0}
.section--modules{padding-block:104px 0}
.section__head{display:flex;align-items:flex-end;gap:var(--space-8);margin-bottom:var(--space-8)}
.section__head .eyebrow{margin-bottom:var(--space-3)}
.section__note{margin:0 0 var(--space-1);max-width:340px;font-size:var(--fs-body);color:var(--text-muted)}
.section__head-illus{height:130px;margin-left:auto}

/* --- modules ----------------------------------------------------------- */
.modules{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5)}

.module{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  padding:26px;
  display:flex;flex-direction:column;gap:var(--space-5);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background-color var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out);
}
.module:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}

/* Cartes vertes — Comptabilité, Événements et Drive. Le vert secondaire en
   aplat, texte encre par-dessus. Les surfaces internes (filets, fonds de
   piste) passent par --sur-*, redéfinies plus bas quand la carte prend le
   vert de marque : les règles qui les consomment ne s'écrivent qu'une fois. */
.module--soft{
  background:var(--vert-clair);         /* #D6EBDC */
  border-color:var(--vert-clair);
  --sur-bord:rgba(23,85,51,.20);        /* le filet gris disparaîtrait ici */
  --sur-fond:rgba(255,255,255,.35);
  --sur-piste:rgba(23,85,51,.15);
}
.module--soft .eyebrow{color:var(--eucalyptus);opacity:.85}

/* La carte que le défilement amène face au lecteur : le vert clair se referme
   sur l'eucalyptus. L'état est posé par le script au passage de la ligne
   médiane de la fenêtre ; sans JavaScript, ou si le visiteur demande moins
   d'animation, la carte reste simplement en vert clair. */
.module--soft.is-focus{
  background:var(--eucalyptus);
  border-color:var(--eucalyptus);
  --sur-bord:rgba(214,235,220,.28);
  --sur-fond:rgba(214,235,220,.10);
  --sur-piste:rgba(214,235,220,.18);
}
.module--soft.is-focus .module__title{color:var(--creme)}
/* Deux classes : « .module p » est déclaré plus bas dans ce fichier et
   gagnerait l'égalité de spécificité, laissant le texte sombre sur le vert. */
.module--soft.is-focus p{color:var(--vert-clair)}
.module--soft.is-focus .eyebrow{color:var(--vert-clair);opacity:.75}

/* Barres de budget — carte Comptabilité. */
.module--soft .budget{border-color:var(--sur-bord)}
.module--soft .budget__row--accent{background:var(--sur-fond)}
.module--soft .budget__row--divided{border-top-color:var(--sur-bord)}
.module--soft .budget__bar{background:var(--sur-piste)}
.module--soft.is-focus .budget__row span:first-child{color:var(--creme)}
.module--soft.is-focus .budget__row .num{color:var(--vert-clair);opacity:.8}
.module--soft.is-focus .budget__bar > i{background:var(--vert-clair)}

/* Tuiles chiffrées — carte Événements. */
.module--soft .event-stat{border-color:var(--sur-bord);background:var(--sur-fond)}
.module--soft.is-focus .event-stat b{color:var(--creme)}

/* Le passage d'un vert à l'autre : la carte anime ses aplats plus haut, son
   contenu suit ici — couleurs de texte et surfaces internes sur la même durée. */
.module--soft .module__title,
.module--soft p,
.module--soft .eyebrow,
.module--soft .budget__row span,
.module--soft .event-stat b{
  transition:color var(--dur-slow) var(--ease-out);
}
.module--soft .budget,
.module--soft .budget__row,
.module--soft .budget__bar,
.module--soft .budget__bar > i,
.module--soft .event-stat{
  transition:background-color var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out);
}
.module--sm{padding:24px;gap:14px}
.module--span7{grid-column:span 7}
.module--span5{grid-column:span 5}
.module--span4{grid-column:span 4}
.module__head{display:flex;flex-direction:column;gap:var(--space-2)}
.module__title{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);color:var(--text-heading);
}
.module p{margin:0;font-size:var(--fs-body);color:var(--text-body)}
.module__illus{margin-top:auto;height:150px;align-self:center}
.module__foot{margin-top:auto}

.budget{border:1px solid var(--border-hairline);border-radius:var(--radius-sm);overflow:hidden}
.budget__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:10px 14px;font-size:var(--fs-sm);
}
.budget__row--accent{background:var(--vert-clair-50)}
.budget__row--divided{border-top:1px solid var(--border-hairline)}
.budget__row span:first-child{color:var(--text-heading)}
.budget__row .num{color:var(--text-muted)}
.budget__bar{height:8px;background:var(--gris-100)}
.budget__bar > i{display:block;height:100%;background:var(--eucalyptus)}

.roster{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-2)}
.roster__row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);
}
.roster__avatar{
  width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--vert-clair);color:var(--eucalyptus-900);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-size:var(--fs-xs);flex:none;
}
.roster__name{flex:1;color:var(--text-heading);min-width:0}
.roster__pole{color:var(--text-muted)}
.tag{padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--fs-xs);white-space:nowrap}
.tag--ok{background:var(--succes-fond);color:var(--succes)}
.tag--late{background:var(--alerte-fond);color:var(--alerte)}

.event-stats{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.event-stat{
  border:1px solid var(--border-hairline);border-radius:var(--radius-sm);
  padding:12px 14px;display:flex;flex-direction:column;gap:5px;
}
.event-stat b{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:19px;font-weight:var(--fw-regular);color:var(--text-heading);
}

/* --- Koal'ia ----------------------------------------------------------- */
.kolaia{margin-top:104px;background:var(--eucalyptus)}
.kolaia__inner{
  padding-block:76px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.kolaia__copy{display:flex;flex-direction:column;gap:var(--space-5)}
.kolaia .eyebrow{color:var(--vert-clair)}
.kolaia__title{color:var(--blanc)}
.kolaia__lede{margin:0;font-size:var(--fs-body-lg);color:var(--vert-clair);max-width:460px}
.kolaia__demo{
  border:1px solid rgba(214,235,220,.25);
  border-radius:var(--radius-md);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;max-width:480px;
}
.kolaia__attach{margin:0;font-size:var(--fs-sm);color:var(--vert-clair);opacity:.75}
.kolaia__prompt{margin:0;font-size:var(--fs-body);color:var(--blanc)}
.kolaia__chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.kolaia__chips span{
  padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(214,235,220,.14);color:var(--vert-clair);font-size:var(--fs-xs);
}
.kolaia__illus{display:flex;justify-content:center}
.kolaia__illus img{width:100%;max-width:420px}

/* --- onboarding steps -------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.step{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);padding:24px;
  display:flex;flex-direction:column;gap:10px;
}
.step__num{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);color:var(--text-brand);
}
.step h3{margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);font-size:var(--fs-h3);color:var(--text-heading)}
.step p{margin:0;font-size:var(--fs-body);color:var(--text-body)}

/* --- pricing ----------------------------------------------------------- */
.pricing__head{text-align:center;max-width:560px;margin:0 auto 36px}
.pricing__head .eyebrow{margin-bottom:var(--space-3)}
.pricing__head .h-section{margin-bottom:var(--space-3)}
/* :not(.eyebrow) — sinon ce sélecteur, plus spécifique que .eyebrow,
   remonterait le numéro de section à la taille du texte courant. */
.pricing__head p:not(.eyebrow){margin:0;font-size:var(--fs-body);color:var(--text-muted)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:start}
.plan{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);padding:28px;
  display:flex;flex-direction:column;gap:18px;
}
.plan__head{display:flex;flex-direction:column;gap:6px}
.plan__name{margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);font-size:var(--fs-h3);color:var(--text-heading)}
.plan__price{
  margin:0;font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-h1);letter-spacing:var(--ls-h1);color:var(--text-heading);
}
.plan__price small{font-size:var(--fs-sm);color:var(--text-muted);font-weight:inherit}
.plan__for{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.plan__limits{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-body);color:var(--text-body)}
.plan__limit{display:flex;justify-content:space-between;gap:var(--space-3)}
.plan__limit:not(:last-child){border-bottom:1px solid var(--border-hairline);padding-bottom:var(--space-2)}
.plan__limit b{font-weight:var(--fw-regular);color:var(--text-heading)}
.plan .btn{margin-top:auto}

.plan--featured{
  background:var(--eucalyptus);border-color:var(--eucalyptus);
  padding:32px 28px;margin-top:-16px;box-shadow:var(--shadow-overlay);
}
.plan--featured .plan__name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan--featured .plan__name{font-size:var(--fs-h2);color:var(--creme)}
.plan--featured .plan__price{font-size:var(--fs-section);color:var(--creme)}
.plan--featured .plan__price small{color:var(--vert-clair)}
.plan--featured .plan__for{color:var(--vert-clair)}
.plan--featured .plan__limits{color:var(--vert-clair)}
.plan--featured .plan__limit:not(:last-child){border-bottom-color:rgba(214,235,220,.25)}
.plan--featured .plan__limit b{color:var(--creme)}

.pricing__fineprint{margin:18px 0 0;font-size:var(--fs-sm);color:var(--text-muted);text-align:center}

/* --- démonstration vidéo ----------------------------------------------- */
.video__head{text-align:center;max-width:620px;margin:0 auto var(--space-8)}
.video__head .eyebrow{margin-bottom:var(--space-3)}
.video__lede{margin:var(--space-3) 0 0;font-size:var(--fs-body-lg);color:var(--text-muted)}

.video{max-width:900px;margin:0 auto}

/* .video__frame porte le format : le <video> — ou un <iframe> si la démo
   passe un jour par un hébergeur — reprend le ratio, les coins et l'ombre
   sans style supplémentaire. Le fond encre couvre les bandes d'une source
   qui ne serait pas en 16/9. */
.video__frame{
  display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay);
  background:var(--encre);
  object-fit:contain;
}

/* --- lecteur sur mesure -------------------------------------------------
   Les commandes natives ne se laissent pas habiller : chaque moteur expose
   ses propres pseudo-éléments, et aucun n'est standard. On les remplace donc
   entièrement — mais seulement quand le script tourne. Hors « .js », le bloc
   ci-dessous n'existe pas pour l'œil et la vidéo garde « controls ».

   Le repère : .player porte le cadre (.video__frame), la vidéo le remplit,
   et .player__ui se superpose sans intercepter le clic — seules les
   commandes elles-mêmes le reprennent, pour que cliquer l'image mette en
   pause comme partout ailleurs. */
.player{position:relative;overflow:hidden;isolation:isolate}
.player__video{display:block;width:100%;height:100%;object-fit:contain;background:var(--encre)}

.player__ui{display:none}
.js .player__ui{
  display:block;position:absolute;inset:0;pointer-events:none;
  font-family:var(--font-ui);
}
.player__big,.player__bar,.player__popover{pointer-events:auto}

/* Bouton central : la pastille du bloc d'attente d'avant, devenue commande. */
.player__big{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border:0;border-radius:var(--radius-pill);
  background:var(--eucalyptus);color:var(--creme);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-overlay);
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.player__big svg{width:32px;height:32px;fill:currentColor;margin-left:3px}
.player__big:hover{background:var(--eucalyptus-700)}
.player__big:active{transform:translate(-50%,-50%) scale(.96)}
.player.is-playing .player__big{opacity:0;transform:translate(-50%,-50%) scale(.9);pointer-events:none}

/* La barre s'efface pendant la lecture et revient au moindre mouvement. */
.player__bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-6) var(--space-4) var(--space-3);
  background:linear-gradient(to top,rgba(13,50,32,.88),rgba(13,50,32,.55) 55%,transparent);
  color:var(--creme);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.player.is-idle .player__bar{opacity:0;transform:translateY(8px);pointer-events:none}

.player__btn{
  flex:none;width:34px;height:34px;padding:0;border:0;border-radius:var(--radius-sm);
  background:none;color:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--dur-fast) var(--ease-out);
}
.player__btn svg{width:22px;height:22px;fill:currentColor}
.player__btn:hover,.player__btn.is-on{color:var(--vert-clair)}
.player__btn:focus-visible,.player__choice:focus-visible,
.player__seek:focus-visible,.player__vol:focus-visible{
  outline:2px solid var(--vert-clair);outline-offset:2px;
}

/* Deux icônes par bouton, l'état visible est choisi par la classe du lecteur :
   pas de reconstruction de SVG en JavaScript. */
.player__i--pause,.player__i--off,.player__i--exit{display:none}
.player.is-playing .player__i--play,
.player.is-muted   .player__i--on,
.player.is-full    .player__i--enter{display:none}
.player.is-playing .player__i--pause,
.player.is-muted   .player__i--off,
.player.is-full    .player__i--exit{display:block}

.player__time{
  flex:none;font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-sm);color:var(--vert-clair);
}

/* Barre de défilement : trois couches empilées — le rail, le tampon chargé,
   la part lue — et par-dessus un <input type=range> transparent, qui apporte
   gratuitement le clavier, le tactile et l'annonce vocale. */
.player__seekwrap{position:relative;flex:1;min-width:0;height:20px;display:flex;align-items:center}
.player__rail,.player__buffer,.player__played{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:4px;border-radius:var(--radius-pill);pointer-events:none;
}
.player__rail{right:0;background:rgba(247,247,244,.28)}
.player__buffer{width:0;background:rgba(247,247,244,.45)}
.player__played{width:0;background:var(--vert-clair)}
.player__seek,.player__vol{
  -webkit-appearance:none;appearance:none;background:none;margin:0;cursor:pointer;
}
.player__seek{position:relative;z-index:1;width:100%;height:20px}
.player__vol{width:78px;height:20px}
.player__seek::-webkit-slider-runnable-track,
.player__vol::-webkit-slider-runnable-track{height:4px;background:none}
.player__seek::-moz-range-track{height:4px;background:none}
.player__vol::-moz-range-track{height:4px;background:none}
.player__seek::-webkit-slider-thumb,.player__vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4px;border:0;border-radius:var(--radius-pill);
  background:var(--creme);
  transition:transform var(--dur-fast) var(--ease-out);
}
.player__seek::-moz-range-thumb,.player__vol::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:var(--radius-pill);background:var(--creme);
}
.player__seek:hover::-webkit-slider-thumb{transform:scale(1.25)}
.player__vol{background:linear-gradient(to right,var(--vert-clair) var(--vol,100%),rgba(247,247,244,.28) 0);
  background-size:100% 4px;background-position:0 center;background-repeat:no-repeat;
  border-radius:var(--radius-pill);
}
.player__volume{display:flex;align-items:center;gap:var(--space-2);flex:none}

/* Menu des sous-titres */
.player__menu{position:relative;flex:none}
.player__popover{
  position:absolute;bottom:calc(100% + 10px);right:0;min-width:150px;
  display:none;flex-direction:column;padding:var(--space-1);
  background:var(--creme);border-radius:var(--radius-md);
  box-shadow:var(--shadow-overlay);
}
.player__menu.is-open .player__popover{display:flex}
.player__choice{
  border:0;background:none;cursor:pointer;text-align:left;
  padding:9px var(--space-3);border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--fs-sm);color:var(--text-body);
}
.player__choice:hover{background:var(--vert-clair-50)}
.player__choice[aria-checked="true"]{color:var(--text-brand);font-weight:var(--fw-medium)}

/* Sous-titres rendus à la main : ::cue ne se positionne pas, et les cales
   natives passeraient sous la barre de commandes. */
.player__cues{
  position:absolute;left:0;right:0;bottom:76px;
  display:flex;justify-content:center;padding:0 var(--space-6);
  transition:bottom var(--dur-base) var(--ease-out);
}
.player.is-idle .player__cues{bottom:var(--space-6)}
.player__cues:empty{display:none}
.player__cues span{
  display:inline-block;max-width:min(44ch,100%);
  padding:6px var(--space-3);border-radius:var(--radius-sm);
  background:rgba(13,50,32,.82);color:var(--creme);
  font-size:var(--fs-body);line-height:1.4;text-align:center;text-wrap:balance;
}

/* Plein écran : le cadre lâche son ratio et ses coins, l'image prend tout. */
.player:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0;box-shadow:none}
.player:fullscreen .player__video{height:100%}
.player:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}

@media (prefers-reduced-motion:reduce){
  .player__big,.player__bar,.player__cues,.player__seek::-webkit-slider-thumb{transition:none}
}

.video__actions{
  display:flex;gap:var(--space-3);justify-content:center;
  margin-top:var(--space-6);flex-wrap:wrap;
}

/* --- trust ------------------------------------------------------------- */
.trust{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);padding:40px;
  display:grid;grid-template-columns:300px 1fr;gap:48px;
}
.trust__intro{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.trust__title{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:30px;line-height:var(--lh-h1);letter-spacing:var(--ls-h1);color:var(--text-heading);
}
.trust__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.trust__item{display:flex;flex-direction:column;gap:6px}
.trust__item h3{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-body-lg);color:var(--text-heading);
}
.trust__item p{margin:0;font-size:var(--fs-sm);color:var(--text-body)}

/* --- FAQ --------------------------------------------------------------- */
.faq{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.faq__intro{display:flex;flex-direction:column;gap:var(--space-4)}
.faq__title{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:34px;line-height:1.1;letter-spacing:var(--ls-h1);color:var(--text-heading);
}
.faq__intro p{margin:0;font-size:var(--fs-body);color:var(--text-muted)}
.faq__illus{height:160px;align-self:flex-start;margin-top:var(--space-2)}
.faq__list{display:flex;flex-direction:column;gap:10px}
.faq__item{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);padding:18px 22px;
}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--space-4);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-body-lg);color:var(--text-heading);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary > span:first-child{flex:1}
.faq__plus{color:var(--text-brand);transition:transform var(--dur-base) var(--ease-out)}
.faq__item[open] .faq__plus{transform:rotate(45deg)}
/* Pendant la fermeture animée, « open » est encore là — le contenu doit rester
   peint — mais la croix doit déjà repartir vers le plus. Même poids que la
   règle ci-dessus : c'est l'ordre qui tranche. */
.faq__item.is-closing .faq__plus{transform:none}
.faq__item p{margin:12px 0 0;font-size:var(--fs-body);color:var(--text-body)}

/* --- closing CTA ------------------------------------------------------- */
.cta{margin-top:var(--section-gap);background:var(--eucalyptus)}
.cta__inner{
  padding-block:88px;
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
.cta__mark{height:64px}
.cta__title{
  margin:0;font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:46px;line-height:1.06;letter-spacing:var(--ls-display);
  color:var(--creme);max-width:640px;
}
.cta__lede{margin:0;font-size:var(--fs-body-lg);color:var(--vert-clair);max-width:480px}

/* --- footer ------------------------------------------------------------ */
.site-footer{background:var(--creme);border-top:1px solid var(--border-hairline)}
.site-footer__inner{
  padding-block:var(--space-12);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8);
}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__brand .wordmark{align-self:flex-start;font-size:14.3px}
.site-footer__brand p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);max-width:240px}
.site-footer__mail{align-self:flex-start;font-size:var(--fs-sm)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-sm)}
.site-footer__col .eyebrow{margin-bottom:var(--space-1)}
.site-footer__legal{
  padding:0 var(--page-pad) var(--space-10);max-width:var(--page-max);margin:0 auto;
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);color:var(--text-muted);
}

/* ==========================================================================
   Responsive — the canvas design is a fixed 1180px desktop artboard; these
   rules carry it down to tablet and phone without changing its proportions.
   ========================================================================== */

@media (max-width:1080px){
  :root{--fs-hero:52px;--fs-section:34px}
  .hero__illus{display:none}
  .app__body{grid-template-columns:1fr}
  .app__sidebar{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--border-hairline);
    gap:var(--space-2);
  }
  .app__brand{padding:0 var(--space-2) 0}
  .app__org{display:none}
  .app__body{min-height:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modules{grid-template-columns:repeat(6,1fr)}
  .module--span7,.module--span5,.module--span4{grid-column:span 3}
  .kolaia__inner{gap:var(--space-10)}
  .trust{grid-template-columns:1fr;gap:var(--space-8);padding:32px}
  .faq{grid-template-columns:1fr;gap:var(--space-10)}
  .faq__illus{display:none}
}

@media (max-width:860px){
  :root{--page-pad:24px;--section-gap:72px;--fs-hero:42px;--fs-section:30px}

  /* La nav inline et le lien de connexion passent dans le menu déroulant :
     ils y sont conservés, pas supprimés. */
  .site-nav{display:none}
  .site-header__login{display:none}
  .site-header__inner > .btn{display:none}  /* enfant direct : épargne ceux du panneau */
  .menu{display:block}

  /* Aperçu de l'app. Sous 860 px, la barre latérale repliée en rangée de
     pastilles prend plus de place qu'elle n'informe, et le journal à cinq
     colonnes déborde de l'écran. On retire le châssis, puis la colonne la
     moins porteuse — le justificatif — pour tenir sans défilement latéral. */
  .app__sidebar{display:none}
  .ledger__row > :nth-child(4){display:none}          /* colonne Justificatif */
  .ledger__row{grid-template-columns:80px minmax(0,1fr) 104px 100px;min-width:420px}

  .section--modules{padding-top:72px}
  .video__actions .btn{width:100%;max-width:320px}
  .modules{grid-template-columns:1fr;gap:var(--space-4)}
  .module--span7,.module--span5,.module--span4{grid-column:auto}

  /* Empilées, les cartes alternent vert clair et blanc, une sur deux.
     L'ordre du DOM donne déjà l'alternance à partir de la troisième —
     Membres, Événements, Stratégie, Drive, Permissions : il ne reste qu'à
     inverser les deux premières. Le vert échoit donc aux rangs pairs.
     Les --sur-* sont les surfaces internes d'une carte verte (filets, fonds
     de piste) ; leur rendre les valeurs par défaut de .budget suffit à
     défaire le traitement vert sans le réécrire ligne à ligne. */
  .module--soft:nth-child(odd){
    background:var(--surface-card);
    border-color:var(--border-hairline);
    --sur-bord:var(--border-hairline);
    --sur-fond:var(--vert-clair-50);
    --sur-piste:var(--gris-100);
  }
  .module--soft:nth-child(odd) .eyebrow{color:var(--text-muted);opacity:1}
  .module:not(.module--soft):nth-child(even){
    background:var(--vert-clair);
    border-color:var(--vert-clair);
  }
  .kolaia{margin-top:72px}
  .kolaia__inner{grid-template-columns:1fr;padding-block:56px}
  .kolaia__illus img{max-width:320px}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--featured{margin-top:0}
  .trust__grid{grid-template-columns:1fr}
  .section__head{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .section__head-illus{margin-left:0;height:110px}
  .cta__title{font-size:34px}
  .cta__inner{padding-block:64px}
  .site-footer__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .player__bar{gap:var(--space-2);padding:var(--space-5) var(--space-3) var(--space-2)}
  .player__vol{display:none}
  /* Sur un lecteur haut de 200 px, la cale doit raser la barre : 64 px la
     posaient au tiers de l'image, et le saut vers 24 px à l'effacement de
     la barre se voyait plus que la cale elle-même. */
  .player__cues{bottom:54px;padding:0 var(--space-3)}
  .player.is-idle .player__cues{bottom:var(--space-3)}
  .player__cues span{font-size:var(--fs-sm);padding:5px var(--space-2)}
  .player__big{width:60px;height:60px}
  .player__big svg{width:26px;height:26px}

  :root{--page-pad:20px;--section-gap:56px;--fs-hero:34px;--fs-section:26px}
  .site-header__inner{gap:var(--space-4)}
  .site-header__home{font-size:13px}

  .hero{padding-top:48px}
  .hero__copy{gap:18px}
  .hero__actions{flex-direction:column;align-self:stretch}
  .hero__actions .btn{width:100%}
  .hero__stage{margin-top:36px}

  /* Aperçu de l'app, format téléphone. On garde ce qui porte le propos —
     un solde, une écriture qui tombe, un montant — et on retire le reste.
     Le journal passe à trois colonnes et cesse de défiler latéralement :
     le montant, qui est la chute de la démonstration, redevient visible
     sans que le lecteur ait à pousser le tableau du doigt. */
  .app__chrome{height:32px;padding-inline:10px}
  .app__dots span{width:7px;height:7px}
  .app__url{margin-left:10px;height:20px}
  .app__main{padding:14px;gap:14px}
  .app__title{font-size:19px}
  .app__exercise{display:none}          /* l'exercice se devine, la pastille non */
  .app__title-row{gap:var(--space-2)}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:10px 12px;gap:2px}
  .stat__value{font-size:17px}
  /* L'interlettrage large des libellés fait passer « Notes de frais » sur
     deux lignes dans une carte de 98 px, ce qui désaligne les montants d'une
     rangée à l'autre. Resserré, chaque libellé tient sur une ligne. */
  .stat__label{letter-spacing:.03em}

  .ledger__row > :nth-child(3){display:none}          /* colonne Pôle */
  .ledger__row{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--space-2);padding:10px 12px;min-width:0;
    font-size:var(--fs-xs);
  }
  .ledger__row--head{padding:8px 12px}
  /* Quatre écritures suffisent à faire un journal ; les deux dernières
     n'ajoutent que de la hauteur. */
  .ledger__scroll > .ledger__row:nth-last-child(-n+2){display:none}
  /* La ligne rejouée doit retrouver le padding de ce point de rupture,
     sans quoi l'animation la repose 2 px plus bas que ses voisines. */
  .ledger__row--new.is-armed.is-in{padding-block:10px}

  .event-stats{grid-template-columns:1fr}

  .module{padding:20px}
  .module--sm{padding:20px}
  .module__illus{height:120px}
  .roster__pole{display:none}          /* la ligne tient sans, le statut prime */

  .kolaia__inner{padding-block:44px}
  .plan{padding:22px}
  .plan--featured{padding:24px 22px}
  .trust{padding:22px}
  .video__actions{flex-direction:column;align-items:center}

  .site-footer__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .site-footer__col a{padding-block:6px}   /* cibles tactiles dans le pied */
  .faq__item{padding:16px 18px}
  .faq__item summary{font-size:var(--fs-body)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
  /* Le script s'abstient déjà de poser .reveal ici ; cette règle garantit que
     rien ne reste invisible si la préférence change en cours de route. */
  .reveal{opacity:1 !important;transform:none !important}
  .btn:hover{transform:none}
}

/* ==========================================================================
   Pages légales — mentions-legales, confidentialite, cgu, cgv
   Un seul gabarit pour les quatre pages : sommaire collant à gauche, colonne
   de texte à droite. Bloc autonome, ses points de rupture compris, pour que
   l'ajout d'une page légale ne demande pas de toucher au reste de la feuille.
   ========================================================================== */

.legal{
  --page-max:1000px;                    /* .wrap lit cette variable */
  padding-block:var(--space-16) var(--space-20);
}

.legal__back{
  display:inline-block;
  font-size:var(--fs-sm);
  color:var(--text-muted);
  margin-bottom:var(--space-8);
}
.legal__back:hover{color:var(--text-brand)}

.legal__head{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding-bottom:var(--space-10);
  border-bottom:1px solid var(--border-hairline);
}
.legal__title{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-display);line-height:1.06;letter-spacing:var(--ls-display);
  color:var(--text-heading);
}
.legal__lede{margin:0;font-size:var(--fs-body-lg);line-height:1.6;max-width:62ch}
.legal__meta{
  margin:0;
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}

.legal__layout{
  margin-top:var(--space-12);
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-16);
  align-items:start;
}

/* --- sommaire ---------------------------------------------------------- */
.legal__toc{
  position:sticky;top:104px;                    /* header collant + respiration */
  display:flex;flex-direction:column;gap:var(--space-2);
  font-size:var(--fs-sm);
}
.legal__toc .eyebrow{margin-bottom:var(--space-2)}
.legal__toc a{
  color:var(--text-muted);
  border-left:2px solid var(--border-hairline);
  padding:2px 0 2px var(--space-3);
  line-height:1.35;
}
.legal__toc a:hover{color:var(--text-brand);border-left-color:var(--border-brand)}

/* --- corps ------------------------------------------------------------- */
.legal__body{counter-reset:legal-section;overflow-wrap:break-word}
.legal__body > section{padding-block:var(--space-10) 0}
.legal__body > section:first-child{padding-top:0}

/* Le compteur numérote les titres : la renumérotation d'un document qui gagne
   ou perd une section se fait toute seule. */
.legal__body h2{
  counter-increment:legal-section;
  margin:0 0 var(--space-4);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  color:var(--text-heading);
  scroll-margin-top:104px;
}
.legal__body h2::before{
  content:counter(legal-section) ". ";
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  color:var(--text-brand);
}
.legal__body h3{
  margin:var(--space-8) 0 var(--space-3);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  color:var(--text-heading);
}
.legal__body p,
.legal__body li{font-size:var(--fs-body-lg);line-height:1.7;max-width:68ch}
.legal__body p{margin:0 0 var(--space-4)}
.legal__body ul,.legal__body ol{margin:0 0 var(--space-4);padding-left:var(--space-6)}
.legal__body li{margin-bottom:var(--space-2)}
.legal__body li::marker{color:var(--text-brand)}
.legal__body strong{font-weight:var(--fw-semibold);color:var(--text-heading)}
.legal__body a{text-decoration:underline;text-underline-offset:2px}
.legal__body code{
  font-family:var(--font-mono);font-size:.92em;
  background:var(--surface-sunken);color:var(--text-heading);
  padding:1px 5px;border-radius:var(--radius-xs);
}

/* Fiche d'identité (mentions légales) et couples terme/définition. */
.legal__dl{
  margin:0 0 var(--space-4);
  display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:var(--space-2) var(--space-6);
  font-size:var(--fs-body);
}
.legal__dl dt{
  font-family:var(--font-data);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);padding-top:3px;
}
.legal__dl dd{margin:0;color:var(--text-body)}

/* Encadré : un rappel qu'on ne veut pas voir fondu dans le flux. */
.legal__note{
  margin:var(--space-6) 0;
  padding:var(--space-5) var(--space-6);
  background:var(--surface-accent-soft);
  border-left:3px solid var(--border-brand);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.legal__note > :last-child{margin-bottom:0}

/* Tableaux (traitements, sous-traitants, durées) : ils débordent sur petit
   écran, ils défilent donc dans leur propre conteneur plutôt que d'écraser
   la page. */
.legal__table-scroll{overflow-x:auto;margin:0 0 var(--space-6);-webkit-overflow-scrolling:touch}
.legal__table{
  border-collapse:collapse;width:100%;min-width:560px;
  font-size:var(--fs-sm);text-align:left;
}
.legal__table th,.legal__table td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-hairline);
  vertical-align:top;
}
.legal__table thead th{
  font-family:var(--font-data);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);font-weight:var(--fw-medium);
  border-bottom-color:var(--border-strong);
}
.legal__table tbody tr:last-child th,
.legal__table tbody tr:last-child td{border-bottom:0}
.legal__table tbody th{font-weight:var(--fw-semibold);color:var(--text-heading)}

/* --- encadré « En clair » ------------------------------------------------
   Résumé en langage courant placé en tête de chaque section de la politique
   de confidentialité. L'article 12 du RGPD impose une information « concise,
   transparente, compréhensible, en des termes clairs et simples » ; le texte
   juridique suit en dessous, l'encadré ne le remplace pas. */
.plain{
  margin:0 0 var(--space-6);
  padding:var(--space-4) var(--space-5);
  background:var(--surface-sunken);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
}
.plain__label{
  display:block;
  margin:0 0 var(--space-2);
  font-family:var(--font-data);
  font-size:.72rem;font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-brand);
}
.plain p{
  margin:0 0 var(--space-2);
  color:var(--text-body);
}
.plain p:last-child{margin-bottom:0}
.plain strong{color:var(--text-heading);font-weight:var(--fw-semibold)}

/* --- marqueur de valeur manquante ---------------------------------------
   Rouge vif et volontairement laid : un champ oublié doit sauter aux yeux
   avant la mise en ligne. `grep -rn "À COMPLÉTER" *.html` les liste tous. */
.todo{
  background:var(--erreur-fond);color:var(--erreur);
  font-family:var(--font-data);font-size:.9em;font-weight:var(--fw-semibold);
  padding:1px 6px;border-radius:var(--radius-xs);
  border:1px dashed var(--erreur);
  white-space:nowrap;
}

/* ==========================================================================
   DOCUMENTATION
   Les pages légales et les articles partagent une colonne de texte, mais pas
   la même intention : un contrat se consulte, un article se lit. D'où un
   gabarit propre — héro teinté, encadrés typés, repères de lecture — plutôt
   qu'une variante de `.legal`, dont la sobriété est un choix pour un contrat
   et un défaut pour un article.
   ========================================================================== */

.doc{--page-max:1120px}                 /* .wrap lit cette variable */

/* --- héro ----------------------------------------------------------------
   Pleine largeur, teinté, avec l'illustration à droite : c'est le même
   accord que le héro de l'accueil, pour qu'un article n'ait pas l'air d'une
   annexe juridique. */
.doc-hero{
  position:relative;overflow:hidden;
  background:var(--surface-accent-soft);
  border-bottom:1px solid var(--border-hairline);
  padding-block:var(--space-12) var(--space-16);
}
.doc-hero__inner{
  display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:var(--space-12);align-items:center;
}
.doc-hero__copy{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.doc-hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
}
.doc-hero__title{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-display);line-height:1.06;letter-spacing:var(--ls-display);
  color:var(--text-heading);
  max-width:34ch;
}
.doc-hero__lede{
  margin:0;max-width:60ch;
  font-size:var(--fs-body-lg);line-height:1.6;
  color:var(--text-body);
}
.doc-hero__illus{align-self:center;justify-self:center}
.doc-hero__illus img{display:block;width:100%;max-width:240px;height:auto}

/* Pastille de rubrique : reprend le badge du héro d'accueil. */
.doc-tag{
  display:inline-flex;align-items:center;gap:var(--space-2);
  align-self:flex-start;width:fit-content;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--surface-brand);color:var(--text-on-brand);
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}
.doc-time{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}

/* --- barre de progression ------------------------------------------------
   Posée sous le header collant. Sa largeur est pilotée par --doc-progress,
   que le script met à jour ; sans JavaScript elle reste à zéro, donc
   invisible, ce qui est le bon état par défaut. */
.doc-progress{
  position:sticky;top:0;z-index:40;
  height:2px;background:transparent;
}
.doc-progress::after{
  content:"";display:block;height:100%;
  width:calc(var(--doc-progress,0) * 100%);
  background:var(--surface-brand);
  transition:width var(--dur-fast) linear;
}

/* --- corps de l'article --------------------------------------------------- */
.doc-layout{
  padding-block:var(--space-12) var(--space-20);
  display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:var(--space-16);align-items:start;
}

/* --- sommaire ------------------------------------------------------------- */
.doc-toc{
  position:sticky;top:96px;
  display:flex;flex-direction:column;gap:var(--space-1);
  font-size:var(--fs-sm);
}
.doc-toc .eyebrow{margin-bottom:var(--space-3)}
.doc-toc a{
  color:var(--text-muted);
  border-left:2px solid var(--border-hairline);
  border-bottom:0;
  padding:5px 0 5px var(--space-3);
  line-height:1.35;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.doc-toc a:hover{color:var(--text-brand);border-left-color:var(--border-strong)}
/* Section à l'écran. Posée par le script ; sans lui, tous les liens restent
   au repos et le sommaire fonctionne comme une simple liste d'ancres. */
.doc-toc a.is-current{
  color:var(--text-brand);font-weight:var(--fw-semibold);
  border-left-color:var(--border-brand);
}

/* --- texte ---------------------------------------------------------------- */
.doc-article > section{padding-block:var(--space-12) 0}
.doc-article > section:first-child{padding-top:0}

.doc-article h2{
  margin:0 0 var(--space-5);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
  color:var(--text-heading);
  scroll-margin-top:104px;
}
.doc-article h3{
  margin:var(--space-8) 0 var(--space-3);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);line-height:var(--lh-h3);
  color:var(--text-heading);
}
.doc-article p,
.doc-article li{
  font-size:var(--fs-body-lg);line-height:1.75;max-width:68ch;
}
.doc-article p{margin:0 0 var(--space-5)}
.doc-article ul,.doc-article ol{margin:0 0 var(--space-5);padding-left:var(--space-6)}
.doc-article li{margin-bottom:var(--space-2)}
.doc-article li::marker{color:var(--text-brand)}
.doc-article strong{color:var(--text-heading);font-weight:var(--fw-semibold)}
/* Première phrase du premier paragraphe : l'entrée en matière se lit plus
   grande, comme dans un magazine. */
.doc-article > section:first-child > p:first-of-type{
  font-size:var(--fs-h3);line-height:1.55;color:var(--text-heading);
}

/* --- chiffre-clé ---------------------------------------------------------
   Pour un seuil ou un montant qui structure le raisonnement. Détaché du
   texte, il donne un point d'accroche à qui parcourt la page. */
.doc-figure{
  margin:var(--space-8) 0;
  display:flex;flex-wrap:wrap;gap:var(--space-4);
}
.doc-figure__item{
  flex:1 1 180px;
  padding:var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.doc-figure__n{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-h1);line-height:1.05;font-weight:var(--fw-semibold);
  color:var(--text-brand);
}
.doc-figure__l{font-size:var(--fs-sm);line-height:1.45;color:var(--text-body);max-width:none}

/* --- citation détachée ---------------------------------------------------- */
.doc-quote{
  margin:var(--space-8) 0;padding-left:var(--space-6);
  border-left:3px solid var(--border-brand);
}
.doc-quote p{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);line-height:1.45;color:var(--text-heading);
  max-width:52ch;
}
.doc-quote cite{
  display:block;margin-top:var(--space-3);
  font-family:var(--font-data);font-size:var(--fs-xs);font-style:normal;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}

/* --- encadrés typés ------------------------------------------------------
   Trois intentions distinctes, trois couleurs : l'avertissement en rouge,
   le point de droit en bleu, l'exemple chiffré en neutre. Le lecteur repère
   la nature de l'encadré avant de l'avoir lu. */
.doc-box{
  margin:var(--space-8) 0;
  padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-md);
  border:1px solid var(--border-hairline);
  background:var(--surface-sunken);
}
.doc-box__label{
  display:flex;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-3);
  font-family:var(--font-data);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}
.doc-box p:last-child,.doc-box ul:last-child{margin-bottom:0}
.doc-box p,.doc-box li{font-size:var(--fs-body)}

.doc-box--warn{background:var(--erreur-fond);border-color:rgba(155,44,44,.25)}
.doc-box--warn .doc-box__label{color:var(--erreur)}
.doc-box--law{background:var(--info-fond);border-color:rgba(31,78,99,.25)}
.doc-box--law .doc-box__label{color:var(--info)}
.doc-box--example .doc-box__label{color:var(--text-muted)}

/* --- étapes numérotées --------------------------------------------------- */
.doc-steps{
  counter-reset:doc-step;list-style:none;
  margin:var(--space-8) 0;padding:0;
  display:flex;flex-direction:column;gap:0;
}
.doc-steps > li{
  counter-increment:doc-step;
  position:relative;
  padding:0 0 var(--space-6) calc(var(--space-12) + var(--space-1));
  font-size:var(--fs-body-lg);line-height:1.7;max-width:68ch;
  margin:0;
}
/* Filet vertical reliant les pastilles : la suite se lit comme une
   chronologie, pas comme une liste. */
.doc-steps > li::after{
  content:"";position:absolute;left:17px;top:38px;bottom:0;
  width:1px;background:var(--border-hairline);
}
.doc-steps > li:last-child{padding-bottom:0}
.doc-steps > li:last-child::after{display:none}
.doc-steps > li::before{
  content:counter(doc-step);
  position:absolute;left:0;top:0;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-brand);color:var(--text-on-brand);
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
}
.doc-steps > li > b{
  display:block;margin-bottom:var(--space-2);
  font-family:var(--font-brand);font-size:var(--fs-h3);
  font-weight:var(--fw-medium);color:var(--text-heading);
}

/* --- tableaux ------------------------------------------------------------- */
.doc-table-scroll{margin:var(--space-8) 0;overflow-x:auto}
.doc-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:520px}
.doc-table thead th{
  text-align:left;padding:var(--space-3) var(--space-4);
  background:var(--surface-brand);color:var(--text-on-brand);
  font-family:var(--font-data);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}
.doc-table thead th:first-child{border-radius:var(--radius-sm) 0 0 0}
.doc-table thead th:last-child{border-radius:0 var(--radius-sm) 0 0}
.doc-table td,.doc-table tbody th{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-hairline);
  vertical-align:top;line-height:1.5;
}
.doc-table tbody th{text-align:left;font-weight:var(--fw-semibold);color:var(--text-heading)}
.doc-table tbody tr:nth-child(even){background:var(--surface-sunken)}
.doc-table tbody tr:last-child td,
.doc-table tbody tr:last-child th{border-bottom:0}

/* --- encadré « Dans Koalasso » -------------------------------------------
   Le pont entre l'article et le produit. Fond de marque plein : c'est le
   moment où l'on assume de vendre, autant que la rupture soit franche. */
.doc-app{
  margin:var(--space-10) 0;
  padding:var(--space-8);
  background:var(--surface-brand);
  border-radius:var(--radius-lg);
  color:var(--text-on-brand);
}
.doc-app__label{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-5);
  padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);
  font-family:var(--font-data);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-on-brand);
}
.doc-app p,.doc-app li{color:var(--text-on-brand);font-size:var(--fs-body);max-width:66ch}
.doc-app strong{color:#fff;font-weight:var(--fw-semibold)}
.doc-app ul{margin:0 0 var(--space-4);padding-left:var(--space-5);list-style:none}
.doc-app li{position:relative;padding-left:var(--space-5);margin-bottom:var(--space-3);line-height:1.65}
.doc-app li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:var(--radius-pill);
  background:var(--vert-clair);
}
.doc-app li::marker{content:""}
.doc-app > :last-child{margin-bottom:0}
.doc-app a{color:var(--vert-clair);border-bottom-color:rgba(255,255,255,.35)}
.doc-app a:hover{color:#fff}

/* Variante en cours d'article : le grand bloc vert plein est réservé à une
   synthèse. Au fil du texte, un simple filet de marque suffit — l'argument
   arrive à l'endroit où le lecteur se pose la question, sans couper sa
   lecture. */
.doc-app--inline{
  margin:var(--space-6) 0;
  padding:var(--space-5) var(--space-6);
  background:var(--surface-accent-soft);
  border:0;border-left:3px solid var(--border-brand);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text-body);
}
.doc-app--inline .doc-app__label{
  margin-bottom:var(--space-2);padding:0;background:none;
  color:var(--text-brand);
}
.doc-app--inline p,.doc-app--inline li{color:var(--text-body);font-size:var(--fs-body)}
.doc-app--inline strong{color:var(--text-heading)}
.doc-app--inline a{color:var(--text-brand);border-bottom-color:rgba(23,85,51,.3)}
.doc-app--inline a:hover{color:var(--eucalyptus-700)}
.doc-app--inline li::before{background:var(--text-brand)}

/* --- à retenir ----------------------------------------------------------- */
.doc-takeaway{
  margin-top:var(--space-12);
  padding:var(--space-8);
  background:var(--surface-accent-soft);
  border:1px solid var(--border-brand);
  border-radius:var(--radius-lg);
}
.doc-takeaway__title{
  margin:0 0 var(--space-4);
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);color:var(--text-heading);
}
.doc-takeaway ul{margin:0;padding:0;list-style:none}
.doc-takeaway li{
  position:relative;padding-left:var(--space-8);margin-bottom:var(--space-3);
  font-size:var(--fs-body);line-height:1.6;
}
.doc-takeaway li:last-child{margin-bottom:0}
/* Coche dessinée en CSS : pas d'image à charger pour six puces. */
.doc-takeaway li::before{
  content:"";position:absolute;left:var(--space-2);top:.36em;
  width:11px;height:6px;
  border-left:2px solid var(--text-brand);
  border-bottom:2px solid var(--text-brand);
  transform:rotate(-45deg);
}

/* --- pied d'article ------------------------------------------------------- */
.doc-next{
  margin-top:var(--space-12);padding-top:var(--space-8);
  border-top:1px solid var(--border-hairline);
}
.doc-next .eyebrow{margin-bottom:var(--space-4)}

/* ==========================================================================
   INDEX DE LA DOCUMENTATION
   ========================================================================== */

.doc-index-hero{
  background:var(--surface-accent-soft);
  border-bottom:1px solid var(--border-hairline);
  padding-block:var(--space-16) var(--space-16);
}
.doc-index-hero__inner{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--space-12);align-items:center;
}
.doc-index-hero__copy{display:flex;flex-direction:column;gap:var(--space-5)}
.doc-index-hero__illus img{display:block;width:100%;max-width:280px;height:auto;justify-self:center}

/* --- familles ------------------------------------------------------------- */
.doc-family{padding-block:var(--space-16) 0}
.doc-family:last-of-type{padding-bottom:var(--space-6)}
.doc-family__head{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border-hairline);
}
.doc-family__head h2{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
  color:var(--text-heading);
}
.doc-family__head p{margin:0;font-size:var(--fs-body-lg);color:var(--text-muted);max-width:62ch}

/* --- cartes --------------------------------------------------------------
   La première carte d'une famille passe en pleine largeur avec son
   illustration : elle sert d'entrée en matière, les suivantes de rappel. */
.doc-index{
  margin-top:var(--space-8);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-6);
}
.doc-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  border-bottom:1px solid var(--border-hairline);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.doc-card:hover{
  border-color:var(--border-brand);
  box-shadow:0 10px 30px -18px rgba(13,50,32,.35);
  transform:translateY(-2px);
}
.doc-card__kicker{
  font-family:var(--font-data);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-brand);
}
.doc-card__title{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-h3);line-height:var(--lh-h3);
  color:var(--text-heading);
}
.doc-card__sub{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-body)}
.doc-card__foot{
  margin-top:auto;padding-top:var(--space-2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
}
.doc-card__meta{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}
.doc-card__go{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-brand);
  transition:transform var(--dur-base) var(--ease-out);
}
.doc-card:hover .doc-card__go{transform:translateX(3px)}

/* Carte en vedette : deux colonnes, illustration à droite. */
.doc-card--feature{
  grid-column:1 / -1;
  flex-direction:row;align-items:center;gap:var(--space-8);
  padding:var(--space-8);
  background:var(--surface-card);
}
.doc-card--feature .doc-card__body{
  display:flex;flex-direction:column;gap:var(--space-3);min-width:0;flex:1;
}
.doc-card--feature .doc-card__title{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.doc-card--feature .doc-card__sub{font-size:var(--fs-body)}
.doc-card--feature .doc-card__illus{width:160px;flex:none}
.doc-card--feature .doc-card__illus img{display:block;width:100%;height:auto}

/* --- points de rupture --------------------------------------------------- */
@media (max-width:1000px){
  .doc-hero__inner,.doc-index-hero__inner{grid-template-columns:1fr}
  .doc-hero__illus,.doc-index-hero__illus{display:none}
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  /* Le sommaire cesse d'être une colonne : il devient un bloc replié en tête
     d'article, ce qui évite de pousser le texte de 300 px vers le bas. */
  .doc-toc{
    position:static;
    /* `box-sizing` n'est pas hérité ici : sans lui le padding s'ajoute à la
       largeur de la grille et pousse la page à défiler latéralement. */
    box-sizing:border-box;width:100%;min-width:0;
    padding:var(--space-5);
    background:var(--surface-sunken);
    border-radius:var(--radius-md);
  }
}
@media (max-width:860px){
  .doc-index{grid-template-columns:1fr}
  .doc-card--feature{flex-direction:column;align-items:flex-start;padding:var(--space-6)}
  .doc-card--feature .doc-card__illus{width:120px;align-self:center}
  .doc-card--feature .doc-card__title{font-size:var(--fs-h3);line-height:var(--lh-h3)}
  .doc-hero__title{font-size:var(--fs-h1);line-height:var(--lh-h1)}
  .doc-article h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
  .doc-app{padding:var(--space-6)}
  .doc-takeaway{padding:var(--space-6)}
  .doc-steps > li{padding-left:var(--space-10)}
  .doc-steps > li::after{left:14px;top:32px}
  .doc-steps > li::before{width:30px;height:30px}
  .doc-steps > li > b{font-size:var(--fs-body-lg)}
}

/* --- renvois vers les autres documents ---------------------------------- */
.legal__related{
  margin-top:var(--space-16);padding-top:var(--space-10);
  border-top:1px solid var(--border-hairline);
}
.legal__related-grid{
  margin-top:var(--space-5);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
}
.legal__related-card{
  padding:var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:var(--space-1);
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.legal__related-card:hover{border-color:var(--border-brand);transform:translateY(-1px)}
.legal__related-card b{
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-body-lg);color:var(--text-heading);
}
.legal__related-card span{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}

@media (max-width:860px){
  .legal{padding-block:var(--space-12) var(--space-16)}
  .legal__title{font-size:34px}
  /* Le sommaire cesse d'être une colonne : il passe en tête, non collant.
     minmax(0,1fr) et non 1fr : une piste « 1fr » ne descend pas sous la
     largeur minimale de son contenu, et les tableaux (min-width 560px)
     élargissaient alors toute la page au lieu de défiler dans leur cadre. */
  .legal__layout{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .legal__toc{
    position:static;
    padding:var(--space-5);
    background:var(--surface-card);
    border:1px solid var(--border-hairline);
    border-radius:var(--radius-md);
  }
  .legal__related-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .legal__title{font-size:28px}
  .legal__body p,.legal__body li{font-size:var(--fs-body)}
  .legal__dl{grid-template-columns:1fr;gap:var(--space-1) 0}
  .legal__dl dd{margin-bottom:var(--space-3)}
  .legal__toc a{padding-block:5px}      /* cibles tactiles */
}

/* --- pages d'erreur ----------------------------------------------------- */
/*
   404 et 500 partagent tout sauf leur texte. Colonne centrée, plus étroite
   que les pages légales : il n'y a rien à lire ici, seulement à comprendre
   ce qui s'est passé et à repartir.

   Le symbole plutôt qu'une illustration : une page d'erreur n'a pas à être
   drôle, elle a à être reconnaissable — c'est le seul écran où l'on doute
   d'être encore sur le bon site.
*/
.error{
  --page-max:720px;                     /* .wrap lit cette variable */
  padding-block:var(--space-20);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  text-align:center;
}
.error__mark{height:64px;width:auto;margin-bottom:var(--space-2)}
.error__title{
  margin:0;
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-display);line-height:1.06;letter-spacing:var(--ls-display);
  color:var(--text-heading);
  text-wrap:balance;
}
.error__lede{
  margin:0;max-width:52ch;
  font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--text-body);
}
.error__actions{
  display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;
  margin-top:var(--space-2);
}

/* Une page d'erreur qui ne propose qu'un retour à l'accueil oblige à
   recommencer la navigation : on nomme les destinations réelles. */
.error__suggest{
  margin-top:var(--space-10);width:100%;
  padding:var(--space-6);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  text-align:left;
}
.error__suggest-grid{
  margin-top:var(--space-4);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-6);
}
.error__suggest-grid a{
  display:flex;justify-content:space-between;gap:var(--space-3);
  padding-block:var(--space-2);
  font-size:var(--fs-sm);color:var(--text-heading);text-decoration:none;
  border-bottom:1px solid var(--border-hairline);
}
.error__suggest-grid a span{color:var(--text-muted)}
.error__suggest-grid a:hover{color:var(--text-brand)}

@media (max-width:760px){
  .error{padding-block:var(--space-16)}
  .error__title{font-size:34px}
  .error__suggest-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .error__title{font-size:28px}
  .error__lede{font-size:var(--fs-body)}
}

/* --- schémas SVG ---------------------------------------------------------
   Les diagrammes des articles sont dessinés en SVG inline, pour rester nets
   à toute taille et pour que leur texte soit sélectionnable et lisible par
   un lecteur d'écran. Les couleurs viennent des tokens : un schéma ne doit
   jamais introduire une teinte que la charte ne connaît pas.

   Le viewBox fait 720 de large, la largeur du corps d'article. En dessous,
   le SVG se met à l'échelle tout seul — mais sous 560px le texte deviendrait
   illisible, alors on laisse le schéma déborder dans un conteneur qui défile
   plutôt que de le réduire jusqu'à l'illisible.
   ------------------------------------------------------------------------ */
.schema{
  margin:var(--space-8) 0;
  padding:var(--space-5) var(--space-5) var(--space-4);
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
}
.schema__svg{display:block;width:100%;height:auto}

/* Conteneurs de phase : le fond qui regroupe plusieurs boîtes. */
.schema__phase{fill:var(--surface-sunken);stroke:none}
.schema__phase--accent{fill:var(--surface-accent-soft)}

/* Boîtes. Quatre intensités : normale, accentuée, forte, estompée. */
.schema__box{fill:var(--surface-card);stroke:var(--border-strong);stroke-width:1}
.schema__box--accent{fill:var(--surface-accent);stroke:var(--border-brand)}
.schema__box--strong{fill:var(--surface-brand);stroke:var(--surface-brand)}
.schema__box--ghost{fill:var(--surface-sunken);stroke:var(--border-hairline);stroke-dasharray:3 3}

/* Textes. Le texte sur fond vert foncé passe en crème. */
.schema__box-text{
  font-family:var(--font-ui);font-size:13px;font-weight:var(--fw-medium);
  fill:var(--text-heading);text-anchor:middle;
}
.schema__box-text--strong{fill:var(--text-on-brand)}
.schema__box-sub{
  font-family:var(--font-data);font-size:11px;
  fill:var(--text-muted);text-anchor:middle;
}
.schema__box--strong .schema__box-sub,
.schema__box-text--strong + .schema__box-sub{fill:var(--vert-clair)}
.schema__phase-label{
  font-family:var(--font-data);font-size:10px;font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  fill:var(--text-muted);text-anchor:middle;
}
.schema__caption{
  font-family:var(--font-ui);font-size:11.5px;font-style:italic;
  fill:var(--text-muted);text-anchor:middle;
}

/* Traits. La flèche porte sa pointe, la ligne n'en a pas. */
.schema__line{stroke:var(--border-strong);stroke-width:1.5;fill:none}
.schema__arrow{
  stroke:var(--border-strong);stroke-width:1.5;fill:none;
  marker-end:url(#schema-arrowhead);
}
.schema__arrow--dashed{stroke-dasharray:5 4}

.schema__legend{
  margin:var(--space-4) 0 0;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);
}

@media (max-width:560px){
  .schema{padding:var(--space-4) 0;overflow-x:auto;border-left:0;border-right:0;border-radius:0}
  .schema__svg{min-width:520px}
  .schema__legend{padding:0 var(--space-4)}
}

/* --- liste de définitions ------------------------------------------------
   Le glossaire des articles : un terme, sa définition. Le terme est en vert
   pour qu'on le retrouve d'un coup d'œil en relisant.
   ------------------------------------------------------------------------ */
.doc-dl{margin:var(--space-6) 0;display:grid;gap:var(--space-4)}
.doc-dl dt{
  font-family:var(--font-brand);font-weight:var(--fw-medium);
  font-size:var(--fs-body);color:var(--text-brand);
}
.doc-dl dd{
  margin:var(--space-1) 0 0;
  color:var(--text-body);line-height:1.6;max-width:62ch;
}

/* Note sous une famille d'articles : ce qui n'est pas encore écrit. */
.doc-family__note{
  margin:var(--space-6) 0 0;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.doc-family__note a{color:var(--text-brand);text-decoration:underline;text-underline-offset:2px}
/* Libellé de phase aligné à gauche, quand il coiffe une bande pleine largeur. */
.schema__phase-label--start{text-anchor:start}

/* ==========================================================================
   MAQUETTES D'APPLICATION
   Des reproductions de l'interface, posées dans l'article. Ce ne sont pas
   des captures d'écran : une image se périme au premier changement de bouton
   et ne se lit pas au téléphone. Ici les écrans sont refaits en HTML, avec
   les vraies polices et les vraies couleurs du produit — et les formulaires
   réagissent, pour qu'on comprenne la règle en la touchant plutôt qu'en la
   lisant.

   Tout est préfixé `.ui-` et isolé du reste de la page : les règles de
   `.doc-article p` ne doivent pas repeindre le texte d'une maquette.
   ========================================================================== */

.ui{
  --ui-bg:#FBFBF9;
  --ui-card:#FFFFFF;
  --ui-line:#E6E7E2;
  --ui-muted:#6B7280;
  --ui-ink:#161B22;
  --ui-brand:#175533;
  --ui-accent:#F1F5F1;
  --ui-terracotta:#C4602C;
  --ui-vert:#2f8f5b;

  margin:var(--space-8) 0;
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  background:var(--ui-bg);
  overflow:hidden;
  font-family:var(--font-ui);
  color:var(--ui-ink);
  font-size:14px;line-height:1.45;
}
.ui *,.ui *::before,.ui *::after{box-sizing:border-box}
/* `.doc-article p` l'emporte sur une classe simple : sans ce doublement de
   sélecteur, les tailles posées plus bas dans la maquette étaient ignorées
   et tout s'affichait au corps du texte courant. */
.doc-article .ui p,.doc-article .ui li{
  margin:0;font-size:inherit;line-height:inherit;color:inherit;max-width:none;
}
.ui ul,.doc-article .ui ul{margin:0;padding:0;list-style:none}
.ui li::marker{content:""}
/* `color:inherit` reprenait la couleur du texte de l'article sur TOUS les
   boutons, y compris le bouton vert plein : encre sur eucalyptus, illisible.
   Seule la police est héritée ; chaque bouton pose sa propre couleur. */
.ui button{font:inherit}

/* Barre de titre : deux points et un chemin. Assez pour dire « c'est
   l'application », sans dessiner un navigateur entier. */
.ui__bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:var(--ui-card);
  border-bottom:1px solid var(--ui-line);
}
.ui__dot{width:9px;height:9px;border-radius:50%;background:var(--ui-line);flex:none}
.ui__path{
  margin-left:6px;
  font-family:var(--font-data);font-size:11px;letter-spacing:.02em;
  color:var(--ui-muted);
}
.ui__body{padding:var(--space-5)}

/* --- onglets ------------------------------------------------------------- */
.ui-tabs{
  display:flex;gap:2px;flex-wrap:wrap;
  padding:3px;margin-bottom:var(--space-5);
  background:var(--ui-accent);border-radius:10px;
}
.ui-tabs button{
  padding:6px 12px;border:0;border-radius:7px;background:transparent;
  font-size:13px;font-weight:500;color:var(--ui-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.ui-tabs button:hover{color:var(--ui-ink)}
.ui-tabs button[aria-selected="true"]{
  background:var(--ui-card);color:var(--ui-ink);
  box-shadow:var(--shadow-raised);
}
.ui-tabs .ui-pill{margin-left:6px}

/* Pastille de compteur — celle qui s'affiche sur « Notes de frais ». */
.ui-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--ui-brand);color:#fff;
  font-family:var(--font-data);font-size:10px;font-weight:600;
}

/* --- cartes d'indicateur ------------------------------------------------- */
.ui-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ui-stat{
  padding:14px;background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:14px;
}
.ui-stat__head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.ui-stat__head svg{width:15px;height:15px;stroke:var(--ui-muted);fill:none;stroke-width:1.8;flex:none}
.ui-stat__label{font-size:11.5px;color:var(--ui-muted);line-height:1.25}
.ui-stat__value{
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:19px;font-weight:600;letter-spacing:-.01em;
}
.ui-stat__value--pos{color:var(--ui-vert)}
.ui-stat__value--neg{color:var(--erreur)}

/* --- tableau de mouvements ----------------------------------------------- */
.ui-table-wrap{
  background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:14px;overflow:hidden;
}
.ui-table-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:8px 14px;border-bottom:1px solid var(--ui-line);
  font-size:11.5px;color:var(--ui-muted);
}
.ui-table-head b{font-weight:600;color:var(--ui-ink);font-family:var(--font-data)}
.ui-scroll{overflow-x:auto}
.ui-table{width:100%;border-collapse:collapse;min-width:620px}
.ui-table th{
  padding:7px 10px;text-align:left;
  background:var(--ui-accent);
  font-size:11px;font-weight:500;color:var(--ui-muted);
  border-bottom:1px solid var(--ui-line);white-space:nowrap;
}
.ui-table td{
  padding:9px 10px;border-bottom:1px solid var(--ui-line);
  font-size:12.5px;vertical-align:middle;white-space:nowrap;
}
/* Seul le libellé a le droit de passer à la ligne : c'est le seul champ
   librement saisi, et le tronquer cacherait ce que le lecteur vient
   d'écrire. */
.ui-table td.ui-label{white-space:normal;min-width:9.5rem}
.ui-table tr:last-child td{border-bottom:0}
.ui-table .ui-num{
  text-align:right;white-space:nowrap;
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);font-weight:500;
}
.ui-date{color:var(--ui-muted);font-family:var(--font-data);white-space:nowrap}
.ui-label{font-weight:500}
.ui-neg{color:var(--ui-terracotta)}
.ui-pos{color:var(--ui-vert)}

/* Pastille de catégorie : un rond de couleur et le nom, comme dans l'app. */
/* La pastille reprend la couleur de la catégorie en fond très dilué et en
   bordure discrète, comme dans le produit : un liseré plein couleur faisait
   de chaque ligne du tableau une étiquette criarde. */
.ui-cat{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:2px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 25%,transparent);
  background:color-mix(in srgb,currentColor 8%,transparent);
  font-size:11px;
}
.ui-cat i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-cat span{color:var(--ui-ink)}

/* `hidden` doit l'emporter sur le `display` de la classe, sans quoi un
   badge masqué en HTML reste affiché. */
.ui [hidden]{display:none !important}
.ui-chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:2px 8px;border-radius:999px;
  border:1px solid var(--ui-line);background:var(--ui-accent);
  font-size:11px;color:var(--ui-muted);
}
.ui-chip--ok{border-color:rgba(23,85,51,.25);background:var(--succes-fond);color:var(--ui-brand)}
.ui-chip--warn{border-color:rgba(155,44,44,.2);background:var(--erreur-fond);color:var(--erreur)}

/* --- boutons ------------------------------------------------------------- */
.ui-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:9px;border:1px solid transparent;
  background:var(--ui-brand);color:#fff;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.ui-btn:hover{background:var(--eucalyptus-700)}
.doc-article .ui-btn{color:#fff;font-size:13px}
.doc-article .ui-btn--ghost{color:var(--ui-ink)}
.ui-btn--ghost{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-ink)}
.ui-btn--ghost:hover{background:var(--ui-accent)}
.ui-btn[disabled]{opacity:.45;cursor:not-allowed;background:var(--ui-brand)}
.ui-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ui-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-bottom:12px}

/* --- la boîte de dialogue ------------------------------------------------
   Reproduite à plat, dans le flux de l'article : une vraie fenêtre modale
   par-dessus le texte demanderait de la fermer pour continuer à lire.
   ------------------------------------------------------------------------ */
/* Ces deux-là sont des <p> : `.doc-article p` l'emportait sur leur classe
   et le titre du dialogue retombait au corps du texte courant. */
.doc-article .ui-dialog__title{
  margin:0 0 4px;font-family:var(--font-brand);font-weight:500;
  font-size:17px;line-height:1.3;color:var(--ui-ink);
}
.doc-article .ui-dialog__sub{margin:0 0 16px;font-size:12.5px;line-height:1.5}
.doc-article .ui-input,
.doc-article .ui-select,
.doc-article .ui-file{font-size:13px;line-height:1.4}
.doc-article .ui-label-t{font-size:12.5px;line-height:1.4}
.doc-article .ui-missing{font-size:11.5px;line-height:1.4}

.ui-dialog{
  max-width:430px;margin:0 auto;
  background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:16px;
  box-shadow:var(--shadow-overlay);
  padding:var(--space-5);
}
.ui-dialog__title{
  margin:0 0 4px;
  font-family:var(--font-brand);font-weight:500;font-size:17px;color:var(--ui-ink);
}
.ui-dialog__sub{margin:0 0 16px;font-size:12.5px;color:var(--ui-muted);line-height:1.5}
.ui-dialog__foot{display:flex;justify-content:flex-end;margin-top:16px}

.ui-field{margin-bottom:12px}
.ui-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ui-label-t{display:block;margin-bottom:5px;font-size:12.5px;font-weight:500;color:var(--ui-ink)}
.ui-input,.ui-select{
  width:100%;padding:7px 10px;
  border:1px solid var(--ui-line);border-radius:9px;
  background:var(--ui-card);color:var(--ui-ink);
  font-family:var(--font-ui);font-size:13px;line-height:1.4;
}
.ui-input:focus,.ui-select:focus{outline:none;border-color:var(--ui-brand);box-shadow:var(--ring-focus)}
.ui-input::placeholder{color:#A3A8A5}
.ui-select{appearance:none;cursor:pointer;
  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='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.ui-input[type="file"]{padding:5px 10px;font-size:12px;color:var(--ui-muted);cursor:pointer}

/* Le choix recette / dépense : couleur ET icône, comme dans l'application —
   la flèche reste lisible pour qui ne distingue pas le vert du rouge. */
.ui-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.ui-seg button{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px;border:2px solid var(--ui-line);border-radius:11px;
  background:transparent;color:var(--ui-muted);
  font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.ui-seg button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ui-seg button:hover{background:var(--ui-accent)}
.ui-seg button[aria-pressed="true"][data-dir="income"]{
  border-color:var(--ui-vert);background:rgba(47,143,91,.09);color:var(--ui-vert);
}
.ui-seg button[aria-pressed="true"][data-dir="expense"]{
  border-color:var(--ui-terracotta);background:rgba(196,96,44,.09);color:var(--ui-terracotta);
}

/* La ligne qui dit ce qui manque encore, sous le pied du formulaire. */
.ui-missing{margin-top:10px;font-size:11.5px;color:var(--ui-muted);min-height:1.2em}
.ui-missing--done{color:var(--ui-brand)}

/* --- barres de budget ---------------------------------------------------- */
.ui-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ui-budget{
  padding:14px;background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:14px;
}
.ui-budget__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
.ui-budget__name{font-size:13px;font-weight:500}
.ui-budget__sub{font-size:11.5px;color:var(--ui-muted);margin-top:2px}
.ui-budget__amounts{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px;
  font-family:var(--font-data);font-variant-numeric:var(--numeric-data);font-size:13px;
}
.ui-budget__amounts b{font-weight:600}
.ui-budget__amounts span{color:var(--ui-muted);font-weight:400}
.ui-bar{height:7px;border-radius:999px;background:var(--ui-accent);overflow:hidden}
.ui-bar i{display:block;height:100%;border-radius:999px;background:var(--ui-brand);transition:width var(--dur-slow) var(--ease-out)}
.ui-bar i.is-over{background:var(--erreur)}
.ui-budget__pct{margin-top:6px;font-size:11.5px;color:var(--ui-muted);font-family:var(--font-data)}

/* --- lignes de rapprochement --------------------------------------------- */
.ui-rec{display:grid;gap:9px}
.ui-rec__line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:12px;
}
.ui-rec__left{min-width:0}
.ui-rec__left b{display:block;font-size:12.5px;font-weight:500}
.ui-rec__left span{font-size:11.5px;color:var(--ui-muted);font-family:var(--font-data)}
.ui-rec__right{display:flex;align-items:center;gap:9px}
.ui-rec__match{text-align:right;font-size:11px;color:var(--ui-muted);font-family:var(--font-data)}
.ui-rec__match b{display:block;font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--ui-ink)}
.ui-drop{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:22px;margin-bottom:14px;text-align:center;
  border:1px dashed var(--ui-line);border-radius:14px;background:var(--ui-card);
}
.ui-drop svg{width:22px;height:22px;stroke:var(--ui-brand);fill:none;stroke-width:1.7}
.ui-drop b{font-size:13px;font-weight:500}
.ui-drop span{font-size:11.5px;color:var(--ui-muted);max-width:42ch;line-height:1.5}

/* --- note explicative sous une maquette ---------------------------------- */
.ui-note{
  padding:11px 14px;border-top:1px solid var(--ui-line);
  background:var(--ui-card);
  font-size:12.5px;line-height:1.55;color:var(--ui-muted);
}
.ui-note b{color:var(--ui-ink);font-weight:600}

/* Légende posée sous la maquette, dans le ton de l'article.
   La marge haute remonte sur celle de `.ui` (--space-8) pour coller la
   légende à l'écran qu'elle commente : sans cela les deux flottaient à la
   même distance et on ne savait plus laquelle appartenait à quoi. */
.ui-caption{
  margin:calc(var(--space-6) * -1) 0 var(--space-8);
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);
  max-width:68ch;
}

/* --- essai guidé : les petits boutons qui remplissent le formulaire ------- */
.ui-try{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:10px 14px;border-top:1px solid var(--ui-line);
  background:var(--ui-accent);
}
.ui-try__label{font-size:11.5px;color:var(--ui-muted);margin-right:2px}
.ui-try button{
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--ui-line);background:var(--ui-card);
  font-size:12px;color:var(--ui-ink);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.ui-try button:hover{border-color:var(--ui-brand);background:var(--succes-fond)}

@media (max-width:760px){
  .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .ui__body{padding:var(--space-4)}
  .ui-row{grid-template-columns:1fr}
  .ui-stats{grid-template-columns:minmax(0,1fr)}
}

/* --- écran complet : la barre latérale et l'en-tête -----------------------
   La vue d'ensemble se reproduit entière, chrome compris : reconnaître
   l'écran compte autant que lire les chiffres, et quatre cartes seules
   pouvaient sortir de n'importe quel logiciel.
   ------------------------------------------------------------------------ */
/* Une maquette déborde de la colonne de texte — un écran d'application n'a
   pas la largeur d'un paragraphe — mais VERS LA DROITE seulement : la
   colonne est déjà décalée par le sommaire, et centrer sur elle poussait
   l'écran au-delà de la marge droite de la page.

   `--ui-bleed` est la place libre à droite, mesurée en JavaScript ; le
   repli à 0 vaut une maquette qui reste dans la colonne. */
.ui--app,.ui--wide{
  width:calc(100% + var(--ui-bleed,0px));
  max-width:none;
}
/* Le contenu est dessiné à la largeur réelle de l'application, puis réduit :
   les proportions restent celles du produit — quatre cartes sur une ligne,
   les onglets sur une seule rangée — quelle que soit la place disponible. */
.ui-app{
  display:grid;grid-template-columns:200px minmax(0,1fr);
  width:1360px;transform-origin:top left;
}
.ui-app__frame{overflow:hidden}

.ui-side{
  background:var(--eucalyptus);color:var(--vert-clair);
  padding:14px 12px;display:flex;flex-direction:column;gap:14px;
}
.ui-side__brand{display:flex;align-items:center;gap:7px;padding:0 4px}
.ui-side__brand svg{
  width:20px;height:20px;flex:none;
  stroke:#fff;fill:none;stroke-width:1.6;
}
.ui-side__brand span{
  font-family:var(--font-brand);font-weight:500;font-size:14px;
  letter-spacing:var(--ls-wordmark);color:#fff;
}
.ui-side__org{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:9px;
  background:rgba(255,255,255,.08);
}
.ui-side__org-mark{
  width:24px;height:24px;flex:none;border-radius:7px;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.ui-side__org-mark svg{
  width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.7;opacity:.9;
}
.ui-side__org b{display:block;font-size:11.5px;font-weight:500;color:#fff;line-height:1.3}
.ui-side__org span{font-size:10px;color:rgba(214,235,220,.7)}
.ui-side__nav{display:flex;flex-direction:column;gap:1px}
.ui-side__nav a{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:8px;
  font-size:12px;color:rgba(214,235,220,.82);text-decoration:none;
}
.ui-side__nav a.is-on{background:rgba(255,255,255,.12);color:#fff;font-weight:500}
.ui-side__nav svg{
  width:15px;height:15px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;
}
.ui-side__nav a.is-on svg{opacity:1}
.ui-side__badge{
  margin-left:auto;min-width:15px;height:15px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:#c0453f;color:#fff;
  font-family:var(--font-data);font-size:9px;font-weight:600;
}

.ui-main{display:flex;flex-direction:column;min-width:0}
.ui-topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-bottom:1px solid var(--ui-line);
  background:var(--ui-bg);
}
.ui-search{
  flex:1;max-width:280px;
  padding:6px 12px;border-radius:999px;
  background:var(--ui-accent);
  font-size:12px;color:#A3A8A5;
}
.ui-avatar{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  padding:3px 3px 3px 10px;border-radius:999px;border:1px solid var(--ui-line);
}
.ui-avatar i{
  width:22px;height:22px;border-radius:50%;
  background:var(--succes-fond);color:var(--ui-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:600;font-style:normal;
}
.ui-avatar svg{width:13px;height:13px;stroke:var(--ui-muted);fill:none;stroke-width:1.8}

.ui-page{padding:16px 18px;flex:1;min-width:0;background:var(--ui-bg)}
.ui-page__head{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:10px;margin-bottom:14px;
}
.ui-page__title{
  margin:0;font-family:var(--font-brand);font-weight:500;
  font-size:21px;letter-spacing:-.02em;color:var(--ui-ink);
}
.ui-page__sub{margin:2px 0 0;font-size:12px;color:var(--ui-muted)}
.ui-year{
  display:flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:9px;border:1px solid var(--ui-line);
  font-size:12px;color:var(--ui-ink);
}
.ui-year svg{width:12px;height:12px;stroke:var(--ui-muted);fill:none;stroke-width:2}

/* Cartes d'indicateur de l'écran complet : pastille d'icône à gauche du
   chiffre, comme dans le produit. */
.ui-stat--app{display:flex;align-items:center;gap:10px;padding:12px 13px;min-width:0}
/* Le libellé tient sur une ligne, en plus petit plutôt que coupé : « Recettes
   de l'... » ne dit plus de quoi il s'agit, et sur deux lignes les quatre
   cartes se décalaient entre elles. */
.ui-stat--app > div{min-width:0}
.doc-article .ui-stat--app .ui-stat__label{
  white-space:nowrap;font-size:10.5px;
}
.doc-article .ui-stat--app .ui-stat__value{font-size:16px}
@media (max-width:900px){
  /* Sous cette largeur, quatre cartes côte à côte ne tiennent plus : elles
     passent à deux par ligne, et le libellé retrouve sa taille. */
  .doc-article .ui-stat--app .ui-stat__label{white-space:normal;font-size:11.5px}
}
.ui-stat__tile{
  width:31px;height:31px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--succes-fond);color:var(--ui-brand);
}
.ui-stat__tile svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.ui-stat__tile--pos{background:rgba(12,163,12,.1);color:#0ca30c}
.ui-stat--app .ui-stat__label{margin-bottom:2px}
.ui-stat--app .ui-stat__value{font-size:17px}

/* --- le graphique de trésorerie ------------------------------------------
   Des barres en CSS plutôt qu'une bibliothèque : douze mois et deux séries
   ne valent pas 90 ko de JavaScript sur une page de documentation.
   ------------------------------------------------------------------------ */
.ui-chart{
  margin-top:12px;padding:14px;
  background:var(--ui-card);border:1px solid var(--ui-line);border-radius:14px;
}
.ui-chart__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ui-chart__title{
  font-family:var(--font-brand);font-weight:500;font-size:13.5px;color:var(--ui-ink);
}
.ui-chart__legend{display:flex;gap:11px;margin-left:auto;font-size:11px;color:var(--ui-muted)}
.ui-chart__legend span{display:flex;align-items:center;gap:5px}
/* Pastille ronde pour les recettes, carrée pour les dépenses : les deux
   barres d'un mois sont collées, et la forme distingue ce que la couleur
   seule ne distingue pas pour tout le monde. */
.ui-chart__legend i{width:7px;height:7px;flex:none}
.ui-chart__legend i.is-in{border-radius:50%;background:#3b6fd4}
.ui-chart__legend i.is-out{border-radius:1px;background:#c4602c}

.ui-plot{display:flex;align-items:flex-end;gap:0;height:150px;position:relative}
.ui-plot__axis{
  width:34px;flex:none;height:100%;position:relative;
  font-family:var(--font-data);font-size:9.5px;color:var(--ui-muted);
}
.ui-plot__axis span{position:absolute;right:6px;transform:translateY(-50%)}
.ui-plot__bars{
  flex:1;display:flex;align-items:flex-end;justify-content:space-between;
  gap:2px;height:100%;border-bottom:1px solid var(--ui-line);position:relative;
}
/* Les lignes horizontales, posées derrière les barres. */
.ui-plot__bars::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    to top, var(--ui-line) 0 1px, transparent 1px 25%);
}
.ui-month{
  display:flex;align-items:flex-end;justify-content:center;
  gap:2px;flex:1;height:100%;position:relative;z-index:1;
}
.ui-month i{
  /* Largeur fixe plutôt que `flex:1` : deux barres fines séparées par un
     vide, comme dans le produit — pas deux pavés qui remplissent le mois. */
  width:17px;display:block;border-radius:2px 2px 0 0;
  /* La hauteur est animée : les chiffres du haut changent en même temps,
     et le graphique doit suivre le même mouvement. */
  transition:height 600ms var(--ease-out);
}
.ui-month i.is-in{background:#3b6fd4}
.ui-month i.is-out{background:#c4602c}
.ui-plot__labels{
  display:flex;justify-content:space-between;gap:2px;
  margin:5px 0 0 34px;
  font-family:var(--font-data);font-size:9.5px;color:var(--ui-muted);
}
.ui-plot__labels span{flex:1;text-align:center}

/* --- encadré « attention » en SVG ----------------------------------------
   Le triangle est dessiné, pas écrit : un emoji change de dessin d'un
   système à l'autre et passe parfois en couleur pleine.
   ------------------------------------------------------------------------ */
.doc-box--warn .doc-box__label{display:flex;align-items:center;gap:7px}
.doc-box__icon{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2}

@media (max-width:760px){
  /* La barre latérale disparaît : 200 px de menu sur un téléphone prennent
     la place des chiffres, qui sont le sujet. */
  .ui-app{grid-template-columns:minmax(0,1fr)}
  .ui-side{display:none}
  /* Réduire un écran de 1160 px à la largeur d'un téléphone donnerait un
     quart de taille, illisible. On garde une échelle lisible et on laisse
     glisser latéralement — comme les schémas de la page. */
  .ui-app__frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ui--app,.ui--wide{
    width:auto;margin-inline:0;
    border-left:0;border-right:0;border-radius:0;
  }
}

/* --- pièce jointe simulée -------------------------------------------------
   Un <input type="file"> ouvrirait le sélecteur du système pour une
   maquette, et enverrait chercher un vrai ticket sur le disque. Un bouton
   qui bascule dit la même chose sans rien demander.
   ------------------------------------------------------------------------ */
.ui-file{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 11px;border-radius:9px;
  border:1px dashed var(--ui-line);background:var(--ui-card);
  font-size:12.5px;color:var(--ui-muted);cursor:pointer;text-align:left;
  transition:border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.ui-file svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.ui-file:hover{border-color:var(--ui-brand);color:var(--ui-ink)}
.ui-file[aria-pressed="true"]{
  border-style:solid;border-color:rgba(23,85,51,.3);
  background:var(--succes-fond);color:var(--ui-brand);font-weight:500;
}

/* --- boutons d'ajout sur une carte de budget ----------------------------- */
.ui-budget__add{display:flex;gap:6px;margin-top:10px}
.ui-budget__add button{
  padding:3px 10px;border-radius:999px;
  border:1px solid var(--ui-line);background:var(--ui-card);
  font-family:var(--font-data);font-size:11.5px;color:var(--ui-ink);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.ui-budget__add button:hover{border-color:var(--ui-brand);background:var(--succes-fond)}

/* La ligne qui vient d'être enregistrée s'annonce, puis se fond dans la
   liste : sans cela, le tableau apparaissait sans qu'on sache laquelle
   des lignes on venait d'ajouter. */
@keyframes ui-row-in{
  from{background:var(--succes-fond)}
  to{background:transparent}
}
.ui-table tr.is-new{animation:ui-row-in 1.6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .ui-table tr.is-new{animation:none}
  .ui-month i{transition:none}
}


/* Le contenu réduit garde sa largeur réelle pour que le cadre sache quoi
   faire glisser : `transform` ne change pas la place occupée dans le flux. */
.ui-app__frame::after{content:"";display:block;width:var(--app-w,0);height:0}

/* --- étiquette « à manipuler » --------------------------------------------
   Rien ne distinguait un écran qu'on peut toucher d'une simple image : on
   ne clique pas sur ce qu'on ne sait pas cliquable. L'étiquette se pose à
   droite du chemin, dans la barre de titre.
   ------------------------------------------------------------------------ */
.ui__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px 2px 7px;border-radius:999px;
  background:var(--succes-fond);color:var(--ui-brand);
  font-size:11px;font-weight:500;white-space:nowrap;
}
.ui__live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
/* Un écran figé le dit aussi, en gris : l'absence d'étiquette se lit mal. */
.ui__static{
  margin-left:auto;
  font-size:11px;color:var(--ui-muted);white-space:nowrap;
}
@media (max-width:520px){
  .ui__live,.ui__static{font-size:10px}
}

/* --- carte de réglage ------------------------------------------------------
   Le gabarit des cartes de l'écran Réglages : une icône, un titre, une
   description, l'état du compte et l'action. Sert aux maquettes du guide
   sur le compte connecté.
   ------------------------------------------------------------------------ */
.ui-card{
  padding:16px;background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:14px;
}
.ui-card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ui-card__head > svg{
  width:17px;height:17px;flex:none;margin-top:2px;
  stroke:var(--ui-ink);fill:none;stroke-width:1.7;
}
.doc-article .ui-card__title{
  margin:0;font-family:var(--font-brand);font-weight:500;
  font-size:14.5px;line-height:1.3;color:var(--ui-ink);
}
.doc-article .ui-card__sub{
  margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--ui-muted);max-width:60ch;
}
.doc-article .ui-card__state{
  margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--ui-muted);
}
.doc-article .ui-card__state--ok{
  display:flex;align-items:center;gap:7px;color:var(--ui-ink);
}
.ui-card__state--ok svg{
  width:15px;height:15px;flex:none;
  stroke:var(--ui-brand);fill:none;stroke-width:1.8;
}

/* Le pavé qui annonce les frais avant le raccordement. */
.ui-fees{
  padding:10px 12px;margin-bottom:12px;
  background:var(--ui-accent);border:1px solid var(--ui-line);border-radius:11px;
}
.ui-fees b{display:block;font-size:12.5px;font-weight:600;color:var(--ui-ink)}
.ui-fees span{
  display:block;margin-top:3px;
  font-size:11.5px;line-height:1.5;color:var(--ui-muted);
}

/* --- bandeau d'alerte dans une carte -------------------------------------- */
.ui-banner{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px;border-radius:12px;
}
.ui-banner--warn{
  border:1px solid rgba(138,106,17,.28);
  background:var(--alerte-fond);
}
.ui-banner > svg{
  width:16px;height:16px;flex:none;margin-top:1px;
  stroke:var(--alerte);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.doc-article .ui-banner p{
  margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--ui-ink);max-width:66ch;
}
.ui-banner b{font-weight:600}

/* --- lignes d'avancement (module Stratégie) --------------------------------
   Un intitulé, un compteur, une barre. Sert au suivi par objectif, par pôle,
   par personne et aux indicateurs : quatre cartes, un seul gabarit.
   ------------------------------------------------------------------------ */
.ui-prog{margin-bottom:11px}
.ui-prog:last-child{margin-bottom:0}
.ui-prog__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:5px;font-size:12.5px;
}
.doc-article .ui-prog__row span{font-size:12.5px;line-height:1.4}
.ui-prog__row > span:first-child{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ui-prog__n{
  flex:none;font-family:var(--font-data);font-variant-numeric:var(--numeric-data);
  font-size:11.5px;color:var(--ui-muted);
}

/* Une action dont l'échéance est passée. */
.ui-late{
  display:flex;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--ui-line);
}
.ui-late:last-child{border-bottom:0;padding-bottom:0}
.ui-late b{display:block;font-size:12.5px;font-weight:500;color:var(--ui-ink)}
.ui-late span{display:block;margin-top:2px;font-size:11.5px;color:var(--erreur)}

/* Un champ de saisie reproduit sans être saisissable : la maquette du module
   Stratégie montre un formulaire rempli, elle ne le fait pas remplir. */
.doc-article .ui-input--area{min-height:44px;white-space:pre-wrap}

/* --- conversation (Koal'ia) ------------------------------------------------
   Une question, une réponse. La question à droite sur le vert de marque, la
   réponse à gauche sur carte, comme dans l'application.
   ------------------------------------------------------------------------ */
.ui-chat{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto}
.ui-msg{
  max-width:88%;padding:10px 13px;border-radius:14px;
  font-size:13px;line-height:1.55;color:var(--ui-ink);
}
.ui-msg--me{align-self:flex-end;background:var(--ui-brand);color:#fff;border-bottom-right-radius:4px}
.ui-msg--bot{align-self:flex-start;background:var(--ui-card);border:1px solid var(--ui-line);border-bottom-left-radius:4px}
.doc-article .ui-msg p{margin:0 0 6px;font-size:13px;line-height:1.55;color:inherit;max-width:none}
.doc-article .ui-msg p:last-child{margin-bottom:0}
.doc-article .ui .ui-msg ul{margin:2px 0 6px;padding-left:18px;list-style:disc}
.ui .ui-msg li::marker{content:normal;color:var(--ui-muted)}
.doc-article .ui-msg li{margin:0 0 2px;font-size:13px;line-height:1.5}
.ui-msg__file{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.16);
  font-size:11.5px;
}