/* ==========================================================================
   CAPMEDIA · suite.css
   Le système de la suite Capmedia (Desk, Cockpit, Academy, Hub, Lab), repris
   trait pour trait de Capmedia Desk : la grammaire d'apple.com adaptée à un
   outil qu'on garde ouvert toute la journée.

   Chargée APRÈS hub.css, par le Cockpit seulement pour l'instant. Elle ne
   touche à aucun écran : elle redéfinit les jetons, puis redessine chaque
   composant du Hub avec le vocabulaire du Desk.

   Trois règles tiennent tout le reste :
   - la page est grise, le contenu vit dans des cartes blanches ;
   - la couleur ne va qu'à ce qui porte une donnée (un état, un retard, une
     jauge), jamais à un titre ni à une décoration ;
   - un repère visuel vient de la structure (surtitre en chasse fixe,
     chiffre en gras, référence en chasse fixe), jamais d'une icône posée
     dans une pastille.
   ========================================================================== */

:root {
  /* --- Le Desk, sous ses propres noms -------------------------------- */
  --page:          #F5F5F7;
  --blanc:         #FFFFFF;
  --eleve:         #FBFBFD;
  --rail:          #FAFAFC;
  --survol:        rgba(0, 0, 0, .04);
  --actif:         rgba(0, 0, 0, .06);
  --segments:      rgba(0, 0, 0, .055);
  --lisere-carte:  rgba(0, 0, 0, .025);
  --verre:         rgba(255, 255, 255, .72);
  --plein-survol:  #000000;
  --bleu-clair:    #F2F7FD;

  --trait-clair:   #E8E8ED;
  --trait-fin:     #F0F0F3;

  --accent-marque: #8E1D42;
  --accent-clair:  #F7EEF1;
  --accent-fonce:  #6E1634;
  --bleu:          #0066CC;
  --vert:          #248A3D;
  --vert-clair:    #EAF6EC;
  --orange:        #C93400;
  --orange-clair:  #FDF1EA;
  --rouge:         #D70015;
  --rouge-clair:   #FDECEE;
  --ambre:         #C26A08;
  --ambre-clair:   #FDF4E8;
  --violet-desk:   #8944AB;
  --violet-clair:  #F6EEFA;
  --sarcelle:      #0A7C86;

  --ombre-sm:      0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
  --ombre-survol:  0 4px 12px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .10);

  --titre: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --courbe: cubic-bezier(.25, .1, .25, 1);
  --ressort: cubic-bezier(.2, .8, .3, 1);

  /* --- Les jetons du Hub, recâblés sur le Desk ------------------------- */
  --fond:        var(--blanc);
  --fond-2:      #F5F5F7;
  --fond-3:      #EDEDF0;
  --fond-eleve:  var(--blanc);
  --voile-page:  rgba(0, 0, 0, .28);
  --voile-modale: rgba(0, 0, 0, .28);

  --encre:       #1D1D1F;
  --encre-2:     #6E6E73;
  --encre-3:     #86868B;
  --encre-4:     #AEAEB2;

  --trait:       var(--trait-clair);
  --trait-fort:  #D2D2D7;
  --pression:    var(--actif);

  --accent:        var(--bleu);
  --accent-survol: #0058B0;
  --bleu-systeme:  var(--bleu);
  --accent-voile:  var(--bleu-clair);
  --anneau:        rgba(0, 102, 204, .16);

  --ok:              var(--vert);
  --ok-voile:        var(--vert-clair);
  --attention:       var(--ambre);
  --attention-voile: var(--ambre-clair);
  --alerte:          var(--rouge);
  --alerte-voile:    var(--rouge-clair);
  --violet:          var(--violet-desk);
  --violet-voile:    var(--violet-clair);
  --gris-voile:      var(--trait-fin);

  --ombre-carte:  0 2px 8px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --ombre-levee:  var(--ombre-survol);
  --ombre-modale: 0 8px 20px rgba(0, 0, 0, .08), 0 20px 60px rgba(0, 0, 0, .18);

  --r-carte: 18px;
  --r-champ: 10px;
  --r-petit: 8px;

  --police: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --police-mono: var(--mono);

  --t-display:    600 40px / 1.08 var(--titre);
  --t-titre-1:    600 32px / 1.1 var(--titre);
  --t-titre-2:    600 22px / 1.2 var(--titre);
  --t-titre-3:    600 17px / 1.3 var(--titre);
  --t-corps:      400 14px / 1.47 var(--police);
  --t-corps-fort: 500 14px / 1.47 var(--police);
  --t-petit:      400 13px / 1.45 var(--police);
  --t-micro:      500 12px / 1.35 var(--police);
  --t-chiffre:    600 28px / 1.1 var(--titre);

  --ls-serre: -.03em;
  --ls-titre: -.022em;
  --ls-large: .09em;

  --lat: 252px;
  --haut: 52px;
  --contenu-max: 1240px;
  --marge-page: 44px;

  --vite: 150ms var(--courbe);
  --doux: 320ms var(--ressort);
}

/* --- Le sombre du Desk : automatique tant que rien n'est forcé -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #111113; --blanc: #1C1C1E; --eleve: #232326; --rail: #161618;
    --survol: rgba(255, 255, 255, .06); --actif: rgba(255, 255, 255, .1); --segments: rgba(255, 255, 255, .08);
    --lisere-carte: rgba(255, 255, 255, .06); --verre: rgba(28, 28, 30, .74); --plein-survol: #FFFFFF;
    --bleu-clair: rgba(77, 163, 255, .12);
    --trait-clair: #2C2C2E; --trait-fin: #242426;
    --accent-clair: rgba(214, 90, 130, .18);
    --bleu: #4DA3FF; --vert: #30D158; --vert-clair: rgba(48, 209, 88, .14);
    --orange: #FF9F0A; --orange-clair: rgba(255, 159, 10, .14);
    --rouge: #FF453A; --rouge-clair: rgba(255, 69, 58, .14);
    --ambre: #FF9F0A; --ambre-clair: rgba(255, 159, 10, .14);
    --violet-desk: #BF5AF2; --violet-clair: rgba(191, 90, 242, .14); --sarcelle: #40C8E0;
    --ombre-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-survol: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .4);
    --fond-2: #232326; --fond-3: #2C2C2E;
    --voile-page: rgba(0, 0, 0, .5); --voile-modale: rgba(0, 0, 0, .45);
    --encre: #F5F5F7; --encre-2: #A1A1A6; --encre-3: #8A8A8F; --encre-4: #5C5C61;
    --trait-fort: #3A3A3C;
    --accent-survol: #7AB8FF; --anneau: rgba(77, 163, 255, .3);
    --ombre-carte: 0 2px 8px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --ombre-modale: 0 8px 20px rgba(0, 0, 0, .5), 0 20px 60px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111113; --blanc: #1C1C1E; --eleve: #232326; --rail: #161618;
  --survol: rgba(255, 255, 255, .06); --actif: rgba(255, 255, 255, .1); --segments: rgba(255, 255, 255, .08);
  --lisere-carte: rgba(255, 255, 255, .06); --verre: rgba(28, 28, 30, .74); --plein-survol: #FFFFFF;
  --bleu-clair: rgba(77, 163, 255, .12);
  --trait-clair: #2C2C2E; --trait-fin: #242426;
  --accent-clair: rgba(214, 90, 130, .18);
  --bleu: #4DA3FF; --vert: #30D158; --vert-clair: rgba(48, 209, 88, .14);
  --orange: #FF9F0A; --orange-clair: rgba(255, 159, 10, .14);
  --rouge: #FF453A; --rouge-clair: rgba(255, 69, 58, .14);
  --ambre: #FF9F0A; --ambre-clair: rgba(255, 159, 10, .14);
  --violet-desk: #BF5AF2; --violet-clair: rgba(191, 90, 242, .14); --sarcelle: #40C8E0;
  --ombre-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-survol: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .4);
  --fond-2: #232326; --fond-3: #2C2C2E;
  --voile-page: rgba(0, 0, 0, .5); --voile-modale: rgba(0, 0, 0, .45);
  --encre: #F5F5F7; --encre-2: #A1A1A6; --encre-3: #8A8A8F; --encre-4: #5C5C61;
  --trait-fort: #3A3A3C;
  --accent-survol: #7AB8FF; --anneau: rgba(77, 163, 255, .3);
  --ombre-carte: 0 2px 8px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --ombre-modale: 0 8px 20px rgba(0, 0, 0, .5), 0 20px 60px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; }
body { background: var(--page); letter-spacing: -.012em; }
h1, h2, h3, h4 { font-family: var(--titre); letter-spacing: -.022em; }
a { color: var(--bleu); }
::selection { background: var(--accent-clair); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; box-shadow: none; }
svg[stroke-width="1.8"] { stroke-width: 1.6; }

.t-mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }

/* Le surtitre en chasse fixe : il annonce, il ne crie pas. */
.surtitre, .etage-sur, .af-sommaire-titre, .tb-section-titre, .bloc-tete, .chrono-jour,
.pouls .quoi, .palette-groupe, .menu .titre, .fait dt, .rideau-etat dt, .suivi-demande-faits dt {
  font: 500 11px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-3);
}
.page-tete .surtitre { margin-bottom: 10px; }

/* ==========================================================================
   2. La charpente : le rail, la barre haute, la page
   ========================================================================== */

.lat { background: var(--rail); border-right: 1px solid var(--trait-clair); }

.lat-tete {
  position: relative; display: block; height: auto;
  padding: 26px 24px 22px 24px;
}
.lat-marque--suite { display: block; color: var(--encre); font-weight: 400; }
/* La marque : le vrai logo, à gauche du mot. */
.lat-marque--suite .lat-logo { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -2px; }
.lat-mot {
  display: inline-block;
  font: 700 23px/1 var(--titre); letter-spacing: -.035em; color: var(--encre);
}
.lat-marque--suite .service {
  display: inline-block; margin-left: 7px; padding: 3px 8px 2px; border-radius: 980px; vertical-align: 4px;
  font: 600 10.5px/1.2 var(--titre); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0, 117, 222, .12); color: #0075DE;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lat-marque--suite .service { background: rgba(10, 132, 255, .2); color: #409CFF; } }
:root[data-theme="dark"] .lat-marque--suite .service { background: rgba(10, 132, 255, .2); color: #409CFF; }
/* Le trait sous le mot, tracé à la main : la seule signature de la marque. */
.lat-trait { display: block; width: 116px; height: 8px; margin-top: 3px; color: var(--accent-marque); }
.lat-enseigne { display: block; margin-top: 6px; font: 400 12px var(--police); letter-spacing: -.012em; color: var(--encre-3); }

.btn-plier {
  position: absolute; top: 22px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px; color: var(--encre-3);
}
.btn-plier svg { width: 18px; height: 18px; }

/* La recherche, dans le rail, comme dans le Desk. */
.lat .cherche {
  display: flex; align-items: center; gap: 9px; flex: none;
  width: calc(100% - 28px); height: 34px; margin: 0 14px 20px; padding: 0 10px;
  border: 1px solid var(--trait-clair); border-radius: 10px;
  background: var(--blanc); color: var(--encre-3);
  font: 400 13.5px var(--police); cursor: pointer;
  transition: border-color .15s var(--courbe);
}
.lat .cherche:hover { border-color: var(--trait-fort); }
.lat .cherche svg { width: 15px; height: 15px; }
.lat .cherche kbd { margin-left: auto; font: 400 11px var(--mono); color: var(--encre-3); }

.lat-corps { padding: 0 14px 14px; gap: 18px; }
.lat-groupe { gap: 0; }
.lat-titre {
  margin: 0 0 6px; padding: 0 10px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-3);
}
.lat-lien {
  gap: 11px; padding: 7px 10px; border-radius: var(--r-petit);
  font: 400 14.5px var(--police); letter-spacing: -.012em; color: var(--encre);
  transition: background .18s var(--courbe), color .18s var(--courbe), transform .18s var(--ressort);
}
.lat-lien svg { color: var(--encre-2); stroke-width: 1.5; }
.lat-lien:hover { background: var(--survol); color: var(--encre); }
.lat-lien:hover svg { transform: none; }
.lat-lien:active { transform: scale(.98); }
.lat-lien.actif { background: var(--actif); font-weight: 500; }
.lat-lien.actif svg { color: var(--encre); }
.lat-lien .compte { font: 400 12px var(--mono); color: var(--encre-3); }
.lat-lien.actif .compte { color: var(--encre-3); }
.lat-lien .compte.vif {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; box-shadow: none;
  background: var(--orange); color: #fff; font: 600 11px/18px var(--police); text-align: center;
}
.lat-lien .avatar-projet { border-radius: 5px; }
/* Les sections d'un projet, en retrait sous son nom : le retrait dit
   l'appartenance, sans trait ni bordure à gauche. */
.lat-sous-lien { color: var(--encre-2); border-left: 0; border-radius: var(--r-petit); margin-left: 22px; animation: none; }
.lat-sous-lien svg { color: var(--encre-3); }
.lat-sous-lien:hover { border-left: 0; }
.lat-sous-lien.actif { border-left: 0; background: var(--actif); }

.lat-pied { padding: 8px 14px 14px; border-top: 0; background: transparent; }
/* Le choix de l'apparence, en bas du rail. */
.theme-rail { display: flex; padding: 3px; gap: 2px; margin: 4px 10px 8px; border-radius: 9px; background: var(--segments); }
.theme-rail button {
  flex: 1; height: 26px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 500 12px var(--police); color: var(--encre-2);
  transition: background .18s var(--courbe), color .18s var(--courbe), box-shadow .18s var(--courbe);
}
.theme-rail button:hover { color: var(--encre); }
.theme-rail button[aria-pressed="true"] { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-sm); }
.lat-compte {
  gap: 11px; margin-top: 10px; padding: 12px 10px 4px; border-radius: 0;
  border-top: 1px solid var(--trait-clair);
}
.lat-compte:hover { background: none; }
.lat-compte:hover .nom { text-decoration: underline; text-underline-offset: 3px; }
.lat-compte .avatar {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-clair); color: var(--accent-marque);
  font: 600 13px var(--titre); letter-spacing: .02em;
}
.lat-compte .nom { font: 600 13.5px/1.3 var(--police); }
.lat-compte .role { font: 400 12px/1.3 var(--police); color: var(--encre-3); }
.lat-compte .pousse { display: none; }

/* La barre haute : transparente au repos, en verre dès qu'on défile. */
.haut {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .2s var(--courbe), border-color .2s var(--courbe);
}
.haut.decollee {
  background: var(--verre); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--trait-clair);
}
.ariane { font: 400 13px var(--police); color: var(--encre-3); }
.ariane a { color: var(--encre-2); }
.ariane .courant { font-weight: 500; color: var(--encre); }
.btn-icone { width: 32px; height: 32px; border-radius: 8px; color: var(--encre-3); }
.btn-icone svg { width: 18px; height: 18px; }
.btn-icone:hover { background: var(--survol); color: var(--encre); }
.btn-icone .point { top: 6px; right: 6px; background: var(--orange); box-shadow: 0 0 0 2px var(--page); }
.btn-recherche { border-color: var(--trait-clair); background: var(--blanc); }

.page { max-width: var(--contenu-max); margin: 0; padding: 22px 18px 60px; }
@media (min-width: 1024px) {
  .page { padding: 18px var(--marge-page) 90px; }
  .haut { padding: 0 var(--marge-page); }
  .lat-tete, .lat .cherche, .lat-corps, .lat-pied { min-width: 0; }
  .lat .cherche { min-width: calc(var(--lat) - 29px); }
}

.page-tete { align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.page-tete h1 { margin-top: 0; font: var(--t-titre-1); letter-spacing: -.028em; text-wrap: balance; }
.page-tete .chapo { margin-top: 9px; font-size: 15px; line-height: 1.47; color: var(--encre-2); max-width: 640px; }
.page-tete .chapo b, .page-tete .chapo strong { color: var(--encre); font-weight: 600; }
.page-tete .actions { gap: 9px; }

/* ==========================================================================
   3. Les cartes : tout ce qui porte un titre vit dans une carte blanche
   ========================================================================== */

.carte,
.page :is(section, div):has(> .section-tete):not(.grille, .carte, .section--alerte, .attente, :is(.carte, .modale, .feuille, .section--alerte, .attente) *):not(:is(section, div):has(> .section-tete) *),
.page .liste:not(:is(.carte, .section--alerte, .attente, .modale, .feuille, .liste, .bulle) *):not(:is(section, div):has(> .section-tete) *),
.page > .cadre-defile, .page > .tableau, .page > .chrono,
.metriques, .pouls, .frise, .forfait, .suivi-demande, .tb-tete, .tb-famille, .tb-personne, .af-carte, .kanban-col {
  background: var(--blanc); border: 0; border-radius: var(--r-carte);
  box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte);
}
.carte { padding: 22px 24px; transition: box-shadow .2s var(--courbe), transform .25s var(--ressort); }
.carte--serree { padding: 16px 18px; }
.page :is(section, div):has(> .section-tete):not(.grille, .carte, .section--alerte, .attente, :is(.carte, .modale, .feuille, .section--alerte, .attente) *):not(:is(section, div):has(> .section-tete) *) {
  padding: 20px 24px 18px;
}
.page .liste:not(:is(.carte, .section--alerte, .attente, .modale, .feuille, .liste, .bulle) *):not(:is(section, div):has(> .section-tete) *) { padding: 6px 24px; }
.page > .cadre-defile, .page > .tableau { padding: 14px 10px 8px; }
.page > .chrono { padding: 8px 24px 6px; }
/* Une carte pleine dans la page, une carte « creuse » dans une carte. */
.carte--creuse { background: var(--blanc); }
:is(.carte, .section, section, .modale, .feuille) .carte--creuse,
:is(.carte, .modale, .feuille) .carte,
:is(.carte, .modale, .feuille) :is(.frise, .forfait, .suivi-demande, .kanban-col) {
  background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair);
}
.carte--cliquable:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte), 0 0 0 1px var(--lisere-carte); border-color: transparent; }
.carte-tete h3, .section-tete h2, .section-tete h3 { font: 600 17px/1.3 var(--titre); letter-spacing: -.018em; }
.section-tete { align-items: center; margin-bottom: 12px; }
.section-tete .lien { font: 400 13px var(--police); color: var(--encre-2); }
.section-tete .lien:hover { color: var(--encre); text-decoration: none; }

/* L'espacement entre deux cartes : toujours 18 px, comme dans le Desk. */
.section { margin-top: 18px; }
.section:first-child { margin-top: 0; }
.page > * + * { margin-top: 18px; }
.page > .page-tete + * { margin-top: 0; }
.grille { gap: 18px; }
.grille-tiers > .pile { gap: 18px !important; }
.grille-tiers > aside.pile { gap: 18px !important; }
.page .pile > .carte + .carte { margin-top: 0; }

/* ==========================================================================
   4. Les chiffres
   ========================================================================== */

.metriques {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0; padding: 0; border-block: 0; overflow: hidden;
}
.metrique {
  display: flex; flex-direction: column; padding: 20px 22px;
  border-left: 1px solid var(--trait-fin);
}
.metrique:first-child { padding-left: 22px; }
.metrique-libelle { order: -1; margin: 0; font: 400 13px/1.35 var(--police); color: var(--encre-2); }
.metrique-valeur { margin-top: 6px; font: 600 28px/1.1 var(--titre); letter-spacing: -.03em; }
.metrique-nuance { margin-top: 5px; font: 400 12.5px var(--police); color: var(--encre-3); }
.metrique--rouge .metrique-valeur { color: var(--rouge); }
.metrique--ambre .metrique-valeur { color: var(--orange); }
.metrique--vert .metrique-valeur { color: var(--vert); }
.metrique--accent .metrique-valeur { color: var(--bleu); }

.chiffre {
  background: var(--blanc); border: 0; border-radius: var(--r-carte); padding: 16px 18px;
  box-shadow: var(--ombre-carte);
}
.chiffre-nom { order: -1; font: 400 12.5px var(--police); color: var(--encre-2); }
.chiffre-valeur { font: 700 24px/1.2 var(--titre); letter-spacing: -.02em; }
.chiffre--alerte .chiffre-valeur { color: var(--rouge); }

.prix .montant { font: 600 26px/1 var(--titre); }
.forfait-chiffre b, .tb-ligne-pc, .tb-pourcent b { font-family: var(--titre); }
.forfait-chiffres, .rideau-etat, .suivi-demande-faits { border-top-color: var(--trait-fin); }

/* ==========================================================================
   5. Les listes et les tableaux
   ========================================================================== */

.ligne {
  gap: 12px; padding: 12px; border-radius: var(--r-champ);
  transition: background .12s var(--courbe), transform .15s var(--ressort);
}
.ligne + .ligne::before { border-top-color: var(--trait-fin); }
.ligne:hover { background: var(--eleve); transform: none; }
.ligne:active:not(.ligne--inerte) { transform: scale(.998); }
.ligne--inerte:hover { background: transparent; }
.ligne:hover .ligne-fin svg { transform: none; }
.ligne-titre { font: 500 14px/1.4 var(--police); }
.ligne-sous { font: 400 12.5px/1.4 var(--police); color: var(--encre-3); }
.ligne-fin .chevron { color: var(--encre-4); }
.ligne.non-lu .ligne-titre::before { background: var(--bleu); }
/* L'icône d'une ligne porte sa couleur, sans pastille de fond. */
.ligne-icone { width: 22px; height: 22px; border-radius: 0; background: none; color: var(--encre-3); }
.ligne-icone svg { width: 19px; height: 19px; }
.ligne-icone--bleu { background: none; color: var(--bleu); }
.ligne-icone--vert { background: none; color: var(--vert); }
.ligne-icone--ambre { background: none; color: var(--ambre); }
.ligne-icone--rouge { background: none; color: var(--rouge); }
.ligne-icone--violet { background: none; color: var(--violet-desk); }

.tableau { font: 400 13.5px var(--police); }
.tableau th {
  padding: 0 14px 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-3); border-bottom: 1px solid var(--trait-clair);
}
.tableau td { padding: 13px 14px; border-bottom: 1px solid var(--trait-fin); }
.tableau tbody tr { transition: background .12s var(--courbe); }
.tableau tbody tr:hover td { background: var(--eleve); }

.ref, .scenario-ref, .t-scenario-ref, .frise-num {
  font: 400 12.5px var(--mono); letter-spacing: 0; color: var(--encre);
  background: none; border: 0; padding: 0;
}
.scenario-ref, .t-scenario-ref { color: var(--encre-2); }

.chrono-item::before { border-left-color: var(--trait-clair); left: 14px; top: 30px; }
.chrono-item { grid-template-columns: 30px minmax(0, 1fr); }
.chrono-point { width: 30px; height: 30px; background: var(--eleve); border: 0; box-shadow: inset 0 0 0 1px var(--trait-clair); }
.chrono-point--vert, .chrono-point--bleu, .chrono-point--ambre, .chrono-point--rouge, .chrono-point--violet { box-shadow: none; }
.chrono-texte strong { font-weight: 600; }
.chrono-date { font: 400 12.5px var(--police); color: var(--encre-3); }

.notif { border-radius: 10px; }
.notif.non-lu i { background: var(--bleu); }

/* ==========================================================================
   6. Onglets, filtres, segments : le contrôle segmenté de macOS
   ========================================================================== */

.onglets, .filtres:has(> .filtre), .segments, .selecteur-theme {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px;
  border: 0; border-radius: 10px; background: var(--segments);
}
.onglets { margin-bottom: 18px; }
.onglets-enveloppe { display: inline-block; max-width: 100%; margin-bottom: 18px; }
.onglets-enveloppe::after { display: none; }
.onglets-enveloppe:has(> .onglets) { position: relative; }
.onglets-enveloppe:has(> .onglets)::after { display: block; bottom: 1px; background: linear-gradient(to right, transparent, var(--page) 80%); }
.onglet, .filtre, .segments button, .segments a, .selecteur-theme button {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; margin: 0; padding: 0 13px; border: 0; border-radius: 8px;
  background: transparent; color: var(--encre-2);
  font: 500 13px var(--police); white-space: nowrap;
  transition: background .18s var(--courbe), color .18s var(--courbe), box-shadow .18s var(--courbe);
}
.onglet::after { display: none; }
.onglet:hover, .filtre:hover, .segments button:hover, .segments a:hover, .selecteur-theme button:hover { background: transparent; color: var(--encre); }
.onglet.actif, .filtre.actif, .segments [aria-pressed="true"], .segments .actif, .selecteur-theme button[aria-pressed="true"] {
  background: var(--blanc); color: var(--encre);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
}
.onglet .badge, .filtre .compte {
  min-width: 0; height: auto; padding: 0; margin-left: 0; border-radius: 0; opacity: 1;
  background: none; color: var(--encre-3); font: 400 11.5px var(--mono);
}
.onglet .badge--vif {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #fff; font: 600 11px/18px var(--police); text-align: center;
}

/* Les sections d'un projet : les onglets du tableau de bord du Desk, un
   trait sous l'actif, qui glisse. Ils défilent seuls, jamais la page. */
.onglets-enveloppe { display: block; margin-bottom: 22px; }
.onglets-enveloppe .onglets {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; margin: 0; padding: 0;
  border-radius: 0; background: none; border-bottom: 1px solid var(--trait-clair);
}
.onglets-enveloppe .onglet {
  position: relative; flex: none; height: auto; gap: 7px; padding: 10px 14px 12px; border-radius: 0;
  font: 500 14px var(--police); color: var(--encre-2); background: none; box-shadow: none;
}
.onglets-enveloppe .onglet:hover { color: var(--encre); }
.onglets-enveloppe .onglet::after {
  content: ''; display: block; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--encre); transform: scaleX(0); transition: transform .25s var(--ressort);
}
.onglets-enveloppe .onglet.actif { color: var(--encre); background: none; box-shadow: none; }
.onglets-enveloppe .onglet.actif::after { transform: scaleX(1); }

/* Les étages d'un écran : un surtitre et une phrase, sans filet. */
.etage { margin-top: 34px; }
.etage-tete { padding-bottom: 0; margin-bottom: 14px; border-bottom: 0; gap: 8px; }
.etage-resume { font: 400 15px/1.45 var(--police); color: var(--encre-2); }
.etage-resume b { font-weight: 600; }
.etage .section { margin-top: 18px; }

/* ==========================================================================
   7. Les états : un point et un mot, la même teinte partout
   ========================================================================== */

.pastille {
  height: auto; padding: 0; gap: 6px; border-radius: 0; background: none;
  font: 400 13px/1.3 var(--police); color: var(--encre-2);
}
.pastille::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--encre-4); }
.pastille i { display: none; }
.pastille--bleu   { background: none; color: var(--bleu); }
.pastille--vert   { background: none; color: var(--vert); }
.pastille--ambre  { background: none; color: var(--ambre); }
.pastille--rouge  { background: none; color: var(--rouge); }
.pastille--violet { background: none; color: var(--violet-desk); }
.pastille--gris   { background: none; color: var(--encre-2); }
.pastille--plein  { background: none; color: var(--encre); }
.pastille--bleu::before   { background: var(--bleu); }
.pastille--vert::before   { background: var(--vert); }
.pastille--ambre::before  { background: var(--ambre); }
.pastille--rouge::before  { background: var(--rouge); }
.pastille--violet::before { background: var(--violet-desk); }
.pastille--plein::before  { background: var(--encre); }

.puce { font: 400 13px/1.3 var(--police); gap: 6px; }
.puce i { width: 6px; height: 6px; }
.puce--rouge { color: var(--rouge); } .puce--rouge i { background: var(--rouge); }
.puce--ambre { color: var(--ambre); } .puce--ambre i { background: var(--ambre); }
.puce--vert i { background: var(--vert); }
.puce--bleu i { background: var(--bleu); }
.puce--violet i { background: var(--violet-desk); }

.badge {
  min-width: 0; height: auto; padding: 0; border-radius: 0;
  background: none; color: var(--encre-3); font: 400 11.5px var(--mono);
}
.badge--vif, .compte-section--vif {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #fff; font: 600 11px/18px var(--police); text-align: center;
}
.badge--accent { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bleu); color: #fff; font: 600 11px/18px var(--police); }
.btn .badge--accent { background: rgba(255, 255, 255, .22); }
.compte-section { padding: 0; background: none; font: 400 12px var(--mono); color: var(--encre-3); vertical-align: 2px; margin-left: 4px; }
.compte-section--vif { display: inline-block; vertical-align: 3px; }

.etiquette {
  height: auto; padding: 0; border-radius: 0; background: none;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3);
}
.etiquette--techno { font-family: var(--police); font-size: 12px; letter-spacing: 0; text-transform: none; }
.etiquette--lien { padding: 2px 8px; border-radius: 980px; background: var(--bleu-clair); color: var(--bleu); }

/* Les plateformes : l'icône en couleur, le nom en gris, un filet autour. */
.plateforme {
  height: 24px; padding: 0 9px 0 8px; border-radius: 980px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  font: 500 11.5px var(--police); color: var(--encre-2);
}
.plateforme svg { width: 13px; height: 13px; }
.plateforme--bleu, .plateforme--vert, .plateforme--ambre, .plateforme--rouge, .plateforme--violet, .plateforme--gris { background: transparent; color: var(--encre-2); }
.plateforme--bleu svg { color: var(--bleu); }
.plateforme--vert svg { color: var(--vert); }
.plateforme--ambre svg { color: var(--ambre); }
.plateforme--rouge svg { color: var(--rouge); }
.plateforme--violet svg { color: var(--violet-desk); }
.choix-plateformes .plateforme { height: 34px; padding: 0 14px; font-size: 13px; border: 0; }
.choix-plateformes input:checked + .plateforme { box-shadow: inset 0 0 0 1.5px var(--encre); color: var(--encre); font-weight: 600; }

.jeton { width: 20px; height: 20px; border-radius: 0; background: none !important; }
.jeton svg { width: 15px; height: 15px; }
.jeton--bleu { color: var(--bleu); } .jeton--vert { color: var(--vert); } .jeton--ambre { color: var(--ambre); }
.jeton--rouge { color: var(--rouge); } .jeton--violet { color: var(--violet-desk); } .jeton--gris { color: var(--encre-3); }

/* ==========================================================================
   8. Avatars et vignettes
   ========================================================================== */

.avatar { border-radius: 9px; background: var(--eleve); color: var(--encre-3); box-shadow: inset 0 0 0 1px var(--trait-clair); font: 600 12px var(--titre); }
.avatar[class*="avatar--t-"] { background: var(--eleve); color: var(--encre-2); }
.avatar--equipe { background: var(--accent-clair); color: var(--accent-marque); box-shadow: none; }
.avatar--petit { border-radius: 7px; font-size: 10px; }
.avatar--grand { border-radius: 12px; }
.avatar--xl { border-radius: 16px; }
.avatar-projet {
  background: var(--eleve); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--trait-clair);
  font-family: var(--titre); font-weight: 600;
}
.avatar-projet--logo { background: var(--blanc); border: 0; }
.pile-avatar-jeton .avatar-projet, .pile-badge { border-color: var(--blanc); }
.brique-icone, .suivi-demande-pastille, .rideau-icone, .carte-plateforme-tuile, .vide-icone {
  background: var(--eleve) !important; box-shadow: inset 0 0 0 1px var(--trait-clair);
}
.vide-icone { display: none; }
.carte-plateforme {
  border: 0; border-radius: 14px; background: var(--blanc);
  box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte);
}
.carte-plateforme:hover { box-shadow: var(--ombre-carte), 0 0 0 1px var(--lisere-carte); border-color: transparent; }

/* ==========================================================================
   9. Les jauges
   ========================================================================== */

.progression { height: 6px; background: var(--trait-fin); }
.progression > i { background: var(--encre); transition: width .6s var(--ressort); }
.progression--vert > i { background: var(--vert); }
.progression--ambre > i { background: var(--ambre); }
.anneau { background: conic-gradient(var(--encre) calc(var(--v) * 1%), var(--trait-fin) 0); }
.anneau::before { background: var(--blanc); }
.jauge { background: var(--trait-fin); border-radius: 5px; }
.jauge > i { transition: width .6s var(--ressort); }
.jauge > i[data-ton="bleu"] { background: var(--bleu); }
.barres-nom { font: 400 12px var(--mono); }
.barres-piste { background: var(--trait-fin); }
.barres-piste i { background: var(--encre); }
.frise-jauge { background: var(--trait-fin); }
.frise-jauge i, .testeur-jauge-barre { background: var(--vert); }
.tb-barre, .tb-mini { background: var(--trait-fin); }

/* ==========================================================================
   10. Boutons
   ========================================================================== */

.btn {
  height: 36px; padding: 0 17px; gap: 7px; border: 0;
  font: 500 14px var(--police); letter-spacing: -.012em;
  transition: background .15s var(--courbe), transform .12s var(--ressort), box-shadow .15s var(--courbe), color .15s var(--courbe);
}
.btn svg { width: 15px; height: 15px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-principal { background: var(--encre); color: var(--blanc); }
.btn-principal:hover { background: var(--plein-survol); }
.btn-secondaire { background: var(--blanc); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-clair), var(--ombre-sm); }
.btn-secondaire:hover { background: var(--eleve); }
.btn-doux { background: var(--actif); color: var(--encre); }
.btn-doux:hover { background: var(--segments); }
.btn-fantome { color: var(--encre-2); }
.btn-fantome:hover { background: var(--survol); color: var(--encre); }
.btn-danger { background: transparent; color: var(--rouge); }
.btn-danger:hover { background: var(--rouge-clair); color: var(--rouge); }
.btn-ok { background: var(--vert); color: #fff; }
.btn-petit { height: 30px; padding: 0 13px; font-size: 13px; }
.btn-grand { height: 44px; padding: 0 22px; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .35; }
.btn-charge::after { color: var(--blanc); }
.btn-info { color: var(--encre-4); }
.btn-info:hover, .btn-info:focus-visible { color: var(--bleu); background: var(--bleu-clair); }
.lien-sobre { color: var(--bleu); }

/* ==========================================================================
   11. Formulaires
   ========================================================================== */

.champ, .zone, .select {
  height: 38px; padding: 0 12px; border: 1px solid var(--trait-fort); border-radius: 10px;
  background-color: var(--blanc); font: 400 14px var(--police); letter-spacing: -.012em;
  transition: border-color .15s var(--courbe), box-shadow .15s var(--courbe);
}
.zone { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.5; }
.select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
}
.champ:hover, .zone:hover, .select:hover { border-color: var(--trait-fort); }
.champ:focus, .zone:focus, .select:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(0, 102, 204, .12); }
.champ:disabled, .zone:disabled, .select:disabled { background-color: var(--eleve); }
.etiquette-champ { font: 500 12.5px var(--police); color: var(--encre-2); }
.etiquette-champ .facultatif { color: var(--encre-3); }
.aide { font: 400 12px var(--police); color: var(--encre-3); }
.groupe { gap: 6px; }
.forme { gap: 14px; }
.forme-rang { gap: 12px; }

.case input, .coche input, .frise-case input { accent-color: var(--encre); }
.interrupteur i { width: 38px; height: 22px; border-radius: 11px; background: var(--trait-fort); transition: background .2s var(--courbe); }
.interrupteur i::after { width: 18px; height: 18px; transition: transform .22s var(--ressort); }
.interrupteur input:checked + i { background: var(--vert); }

.depot { border: 1.5px dashed var(--trait-fort); border-radius: 14px; background: var(--eleve); }
.depot:hover, .depot.survole { border-color: var(--bleu); background: var(--bleu-clair); }
.depot strong { color: var(--bleu); }
.piece { border-radius: 8px; background: var(--fond-2); }

/* ==========================================================================
   12. Surfaces flottantes : modale, feuille, menu, palette, souffle
   ========================================================================== */

.voile {
  background: var(--voile-modale);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  animation: fondu .18s var(--courbe) both;
}
.modale { border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre-modale); animation: monte .26s var(--ressort) both; }
.modale-tete { padding: 22px 24px 6px; }
.modale-tete h2 { font: 600 22px/1.2 var(--titre); letter-spacing: -.022em; }
.modale-tete p { font: 400 13.5px var(--police); }
.modale-corps { padding: 14px 24px 20px; }
.modale-pied { padding: 14px 24px 20px; border-top: 0; gap: 9px; }
.feuille { background: var(--blanc); box-shadow: -20px 0 60px rgba(0, 0, 0, .18); animation: tiroir-entree .3s var(--ressort) both; }

.menu {
  padding: 6px; border: 0; border-radius: 14px; background: var(--blanc);
  box-shadow: var(--ombre-modale), 0 0 0 .5px var(--trait-fort);
  animation: menu-entre .16s var(--ressort) both;
}
.menu button, .menu a { padding: 7px 10px; border-radius: 8px; font: 400 13.5px var(--police); }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--bleu); color: #fff; outline: 0; }
.menu button:hover svg, .menu a:hover svg { color: #fff; }
.menu .danger { color: var(--rouge); }
.menu .danger:hover { background: var(--rouge); color: #fff; }
.menu hr { border-top-color: var(--trait-fin); }

.palette { border-radius: 20px; background: var(--blanc); animation: monte .26s var(--ressort) both; }
.palette-champ { border-bottom-color: var(--trait-clair); padding: 0 22px; }
.palette-champ input { height: 56px; font: 400 18px var(--police); letter-spacing: -.015em; }
.palette-item { padding: 10px 14px; border-radius: 10px; font: 400 14px var(--police); }
.palette-item:hover, .palette-item.cible { background: var(--page); }
.palette-groupe { padding: 10px 14px 4px; font-size: 10.5px; }

.toasts { align-items: center; }
.toast {
  width: auto; max-width: 100%; padding: 11px 20px; border-radius: 980px;
  background: rgba(29, 29, 31, .92); color: #F5F5F7; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 400 14px var(--police); box-shadow: var(--ombre-modale);
  animation: souffle .3s var(--ressort) both;
}
.toast button { color: #4DA3FF; opacity: 1; }
.toast--ok svg { color: #30D158; }
.toast--erreur { background: var(--rouge); }
.toast--erreur svg { color: #fff; }
.astuce { background: rgba(29, 29, 31, .92); color: #F5F5F7; border-radius: 7px; font: 500 12px var(--police); }

/* ==========================================================================
   13. États vides, attente, encarts
   ========================================================================== */

.vide { padding: 48px 24px; gap: 8px; }
.vide--compact { padding: 28px 16px; }
.vide-titre { font: 600 17px/1.3 var(--titre); letter-spacing: -.018em; }
.vide-texte { font: 400 14px var(--police); color: var(--encre-2); max-width: 380px; }

.os { background: linear-gradient(90deg, var(--trait-fin), var(--trait-clair), var(--trait-fin)); background-size: 200% 100%; animation: reflet 1.2s linear infinite; }
.os--ligne, .os--carte { border-radius: var(--r-carte); }
@keyframes reflet { to { background-position: -200% 0; } }

.encart { border-radius: 12px; font: 400 13.5px var(--police); }
.attente { background: var(--ambre-clair); box-shadow: none; }
.attente .ligne:hover, :root[data-theme="dark"] .attente .ligne:hover { background: color-mix(in srgb, var(--blanc) 45%, transparent); }
.section--alerte { background: var(--rouge-clair); box-shadow: none; }
.rideau { background: transparent; border: 0; outline: 1.5px dashed var(--trait-fort); outline-offset: -1.5px; }

.message-corps { background: var(--fond-2); }
.message--moi .message-corps { background: var(--bleu-clair); }
.message--interne .message-corps { background: var(--ambre-clair); }
.composer { border-top-color: var(--trait-fin); }
.fichier, .lien-env { border: 0; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.fichier:hover, .lien-env:hover { background: var(--survol); }
.phase { background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.phase:hover { background: var(--blanc); border-color: transparent; box-shadow: inset 0 0 0 1px var(--trait-clair), var(--ombre-sm); }
.kanban-carte { background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.kanban-carte:hover { background: var(--blanc); box-shadow: var(--ombre-carte); }
.calendrier .jour { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--trait-fin); }
.calendrier .jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--encre); }
.calendrier .jour-nom { font: 500 10.5px var(--mono); letter-spacing: .08em; }
.pouls { gap: 0; }
.pouls > div { border-left-color: var(--trait-fin); }
.tb-tete, .tb-famille, .tb-personne { border-radius: var(--r-carte); }
.tb-deplier, .tb-passage, .tb-session, .tb-present { background: var(--eleve); border: 0; box-shadow: inset 0 0 0 1px var(--trait-clair); }
.af-carte:hover { box-shadow: var(--ombre-carte), 0 0 0 1px var(--lisere-carte); }
.t-scenario { border: 0; background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte); }
.scenario:hover { background: var(--eleve); }
.avis-verbatim { border-left: 0; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.bulle-pastille { background: var(--encre); color: var(--blanc); }
.bulle-panneau { border: 0; border-radius: 20px; box-shadow: var(--ombre-modale), 0 0 0 .5px var(--trait-fort); }
.bulle-tete { background: var(--eleve); border-bottom-color: var(--trait-clair); }
.bulle-envoyer { background: var(--encre); color: var(--blanc); }

.porte { background: var(--page); }
.porte-boite { border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre-carte), 0 0 0 1px var(--lisere-carte); }

/* ==========================================================================
   14. Le mouvement : court, sur un ressort doux, jamais plus de quelques px
   ========================================================================== */

@keyframes fondu { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes souffle { from { opacity: 0; transform: translateY(16px); } }
@keyframes menu-entre { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes tiroir-entree { from { transform: translateX(40px); opacity: .4; } }
@keyframes carte-entre { from { opacity: 0; transform: translateY(12px); } }
@keyframes ligne-entre { from { opacity: 0; transform: translateX(-6px); } }

/* Entre deux écrans : la zone de travail glisse, le rail ne bouge pas. */
#vue { view-transition-name: vue; }
::view-transition-old(vue) { animation: vue-sort .16s var(--courbe) both; }
::view-transition-new(vue) { animation: vue-entre .32s var(--ressort) both; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@keyframes vue-sort { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vue-entre { from { opacity: 0; transform: translateY(10px); } }

/* À l'arrivée sur un écran, ses cartes arrivent l'une après l'autre, et les
   lignes des listes en cascade brève. Seulement à l'arrivée : une donnée qui
   arrive en direct redessine la page sans que rien ne rejoue. */
#vue.arrivee .page > * { animation: carte-entre .45s var(--ressort) both; }
#vue.arrivee .page > *:nth-child(2) { animation-delay: .04s; }
#vue.arrivee .page > *:nth-child(3) { animation-delay: .08s; }
#vue.arrivee .page > *:nth-child(4) { animation-delay: .12s; }
#vue.arrivee .page > *:nth-child(5) { animation-delay: .16s; }
#vue.arrivee .page > *:nth-child(n+6) { animation-delay: .2s; }
#vue.arrivee .liste > .ligne { animation: ligne-entre .35s var(--ressort) both; }
#vue.arrivee .liste > .ligne:nth-child(2) { animation-delay: .03s; }
#vue.arrivee .liste > .ligne:nth-child(3) { animation-delay: .06s; }
#vue.arrivee .liste > .ligne:nth-child(4) { animation-delay: .09s; }
#vue.arrivee .liste > .ligne:nth-child(5) { animation-delay: .12s; }
#vue.arrivee .liste > .ligne:nth-child(n+6) { animation-delay: .15s; }
#vue.arrivee .metriques > .metrique { animation: carte-entre .5s var(--ressort) both; }
#vue.arrivee .metriques > .metrique:nth-child(2) { animation-delay: .05s; }
#vue.arrivee .metriques > .metrique:nth-child(3) { animation-delay: .1s; }
#vue.arrivee .metriques > .metrique:nth-child(4) { animation-delay: .15s; }
#vue.arrivee .metriques > .metrique:nth-child(n+5) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   15. L'application installée (Capmedia Cockpit pour Mac et Windows)
   ========================================================================== */

/* Sur Mac, la barre de titre est fondue dans la page : on laisse la place aux
   trois boutons de fenêtre, et le haut du rail déplace la fenêtre. */
.app-bureau.app-darwin .lat-tete { padding-top: 54px; }
.app-bureau.app-darwin .btn-plier { top: 50px; }
.app-bureau.app-darwin body::before {
  content: ''; position: fixed; top: 0; left: 0; width: var(--lat); height: 30px; z-index: 1000;
  -webkit-app-region: drag;
}
.app-bureau.app-darwin .coq.pliee ~ *, .app-bureau.app-darwin .haut { -webkit-app-region: drag; }
.app-bureau .haut :is(button, a, input, nav) { -webkit-app-region: no-drag; }
.app-bureau .voile { -webkit-app-region: no-drag; }

/* Sur un téléphone, une grille posée à la main (deux colonnes en ligne)
   passe en une seule colonne : rien ne sort de l'écran. */
@media (max-width: 700px) {
  .page .grille[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   16. L'espace Test : une colonne, la marque en tête
   ========================================================================== */

.page.page--testeur { max-width: 1040px; }
.testeur-tete h1 { margin-top: 0; }
.testeur-tete .chapo { margin-top: 8px; font-size: 14px; color: var(--encre-2); }
.t-choix { border: 0; border-radius: 980px; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); font: 500 14px var(--police); transition: background .15s var(--courbe), transform .12s var(--ressort); }
.t-choix:active { transform: scale(.97); }
.t-choix--ok[aria-pressed="true"] { background: var(--vert); box-shadow: none; }
.t-choix--ko[aria-pressed="true"] { background: var(--rouge); box-shadow: none; }
.t-choix--na[aria-pressed="true"] { background: var(--encre-3); box-shadow: none; }
.avis-cran, .avis-choix { border: 0; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.avis-cran[aria-pressed="true"], .avis-choix[aria-pressed="true"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
.bloc-scenarios .bloc-tete { margin: 0 0 8px; }
.bloc-scenarios .liste--serree { gap: 8px; }
.page--testeur .liste { background: none; box-shadow: none; padding: 0; border-radius: 0; }

/* ==========================================================================
   17. La porte : la connexion, puis les applications de la suite
   ========================================================================== */

main.porte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 48px 20px; }
/* Tout centré : la marque, les titres, le formulaire, le pied. */
.porte-boite { padding: 34px 34px 26px; text-align: center; }
.porte-marque { display: flex; flex-direction: column; align-items: center; margin: 0 0 26px; position: relative; z-index: 2; transform-origin: center; }
.porte-boite .forme .rang { justify-content: center; }
.porte-pied { flex-direction: column; justify-content: center; gap: 12px; }
.porte-site { font: 400 13px var(--police); color: var(--encre-3); text-decoration: none; }
.porte-site:hover { color: var(--encre); }
.porte-apps { text-align: center; }
.porte-app { text-align: left; }
/* Le départ vers l'espace : tout s'efface, la marque glisse seule au centre. */
.porte.depart .porte-boite { transition: background .5s var(--courbe), box-shadow .5s var(--courbe); background: transparent; box-shadow: none; }
.porte.depart .porte-boite > :not(.porte-marque), .porte.depart .porte-apps { transition: opacity .3s var(--courbe); opacity: 0; pointer-events: none; }
.porte.depart .porte-marque { transition: transform .85s var(--ressort); }
.porte-boite h1 { font: 600 32px/1.1 var(--titre); letter-spacing: -.028em; }
.porte-boite .surtitre { margin-bottom: 8px; }
.porte-boite .champ-code { height: 56px; font: 600 26px/1 var(--mono); letter-spacing: .34em; }
.porte-pied { border-top-color: var(--trait-fin); }
.porte-pied .selecteur-theme button { height: 26px; padding: 0 10px; font-size: 12px; }

.porte-apps {
  width: min(440px, 100%); padding: 20px 22px 16px; border-radius: 18px;
  background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte);
  animation: carte-entre .5s .12s var(--ressort) both;
}
.porte-apps[hidden] { display: none; }
.porte-apps-phrase { margin: 6px 0 12px; font: 400 13px/1.45 var(--police); color: var(--encre-2); }
.porte-apps-liste { display: grid; }
.porte-app { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait-fin); }
.porte-app img { flex: none; width: 40px; height: 40px; }
.porte-app-texte { flex: 1; min-width: 0; display: grid; }
.porte-app-texte b { font: 600 14px/1.3 var(--police); }
.porte-app-texte span { font: 400 12.5px/1.35 var(--police); color: var(--encre-3); }
.porte-app-liens { display: flex; gap: 6px; flex: none; }
.porte-app-liens .btn { height: 28px; padding: 0 12px; font-size: 12.5px; }
.app-bureau .porte-apps { display: none; }
@media (max-width: 420px) { .porte-app { flex-wrap: wrap; } .porte-app-liens { width: 100%; padding-left: 52px; } }

/* ==========================================================================
   18. L'espace Test : chiffres, astuces, pages
   ========================================================================== */

.testeur-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.testeur-chiffre {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-carte);
  background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte);
}
.testeur-chiffre span { font: 400 12.5px var(--police); color: var(--encre-2); }
.testeur-chiffre b { font: 700 24px/1.2 var(--titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.testeur-chiffre small { font: 400 12px var(--police); color: var(--encre-3); }
.testeur-chiffre--temps b { font-family: var(--mono); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.t-ok { color: var(--vert); } .t-ko { color: var(--rouge); } .t-revoir { color: var(--ambre); }
@media (max-width: 760px) { .testeur-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.astuce-testeur {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 14px;
  background: var(--bleu-clair); color: var(--encre);
}
.astuce-testeur-icone { flex: none; color: var(--bleu); display: grid; }
.astuce-testeur-icone svg { width: 18px; height: 18px; }
.astuce-testeur p { flex: 1; margin: 0; font: 400 13.5px/1.45 var(--police); }
.astuce-testeur b { font-weight: 600; }

.page--testeur > .encart, .page--testeur > .aide { margin-top: 18px; }

.installations { display: grid; }
.installation { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--trait-fin); }
.installation:first-child { border-top: 0; }
.installation-icone { flex: none; width: 22px; color: var(--encre-2); display: grid; }
.installation-icone svg { width: 20px; height: 20px; }
.installation-texte { flex: 1; min-width: 0; display: grid; }
.installation-texte b { font: 600 14px var(--police); }
.installation-texte span { font: 400 12.5px/1.4 var(--police); color: var(--encre-3); }

.avis-moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.avis-moment {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--r-carte);
  background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte);
}
.avis-moment h2 { font: 600 19px/1.25 var(--titre); letter-spacing: -.018em; }
.avis-moment .t-2 { font-size: 13.5px; }
.avis-moment-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.avis-note { padding: 20px 22px; border-radius: var(--r-carte); background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte); }
.avis-note-valeur { margin: 4px 0; font: 700 44px/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.avis-note-valeur small { font-size: 20px; color: var(--encre-3); font-weight: 600; }
@media (max-width: 760px) { .avis-moments { grid-template-columns: 1fr; } }

.guide-etapes { margin: 0; padding-left: 22px; display: grid; gap: 10px; font: 400 14px/1.5 var(--police); color: var(--encre-2); }
.guide-etapes b { color: var(--encre); font-weight: 600; }
.guide-verdicts { margin: 0; display: grid; gap: 10px; }
.guide-verdicts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.guide-verdicts dd { margin: 0; font: 400 14px/1.5 var(--police); color: var(--encre-2); }
.page--guide .prose, .page--guide section > p { max-width: 70ch; }
.guide-etapes { list-style: decimal; }
.guide-etapes li::marker { font: 600 13px var(--mono); color: var(--encre-3); }
.page .liste-points { list-style: disc; padding-left: 20px; }
.page .liste-points li::marker { color: var(--encre-4); }

/* ==========================================================================
   19. L'accueil du testeur : la marque qui s'assemble, puis sept écrans

   Par-dessus l'espace, la première fois (accueil-testeur.js). La porte :
   les quatre feuilles de la marque arrivent des quatre coins et se posent,
   un halo s'allume, puis le nom, le prénom, le texte et le bouton montent
   l'un après l'autre. Le guide : une carte au centre, des écrans qui
   glissent, et sur chacun l'illustration se dessine à l'arrivée. À la
   sortie, l'accueil s'efface en s'agrandissant pendant que le rail glisse
   en place et que les cartes de la campagne se posent.
   ========================================================================== */

html.accueil-ouvert { overflow: hidden; }
.accueil {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 24px;
  background: var(--page); color: var(--encre); overflow: hidden;
}
.accueil.sort { animation: accueil-sort .6s var(--courbe) both; pointer-events: none; }
@keyframes accueil-sort { to { opacity: 0; } }
.accueil-fond {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 38%, color-mix(in srgb, var(--bleu) 14%, transparent), transparent 70%);
  animation: fondu 1.4s var(--courbe) both;
}
.app-bureau.app-darwin .accueil::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; -webkit-app-region: drag; }

/* --- La porte ------------------------------------------------------------ */
.accueil-porte { position: relative; display: grid; justify-items: center; text-align: center; max-width: 540px; }
.accueil-porte.part { animation: porte-part .4s var(--courbe) both; pointer-events: none; }
@keyframes porte-part { to { opacity: 0; transform: translateY(-14px) scale(.97); } }

.accueil-logo { position: relative; width: 132px; height: 132px; margin-bottom: 30px; }
.accueil-logo .feuille {
  position: absolute; width: 66px; height: 66px;
  background: url(../../../assets/img/capmedia-digital.png) no-repeat; background-size: 132px 132px;
  animation: feuille-pose 1s var(--ressort) both;
}
/* Chaque feuille est un quart de l'image (la position de fond, posée
   après le raccourci « background » qui la remettrait à zéro). */
.accueil-logo .feuille--1 { top: 0; left: 0; background-position: 0 0; --dx: -44px; --dy: -44px; --r: -16deg; animation-delay: .08s; }
.accueil-logo .feuille--2 { top: 0; right: 0; background-position: -66px 0; --dx: 44px; --dy: -44px; --r: 16deg; animation-delay: .2s; }
.accueil-logo .feuille--3 { bottom: 0; left: 0; background-position: 0 -66px; --dx: -44px; --dy: 44px; --r: 16deg; animation-delay: .32s; }
.accueil-logo .feuille--4 { bottom: 0; right: 0; background-position: -66px -66px; --dx: 44px; --dy: 44px; --r: -16deg; animation-delay: .44s; }
@keyframes feuille-pose { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(var(--r)); } }
.accueil-logo .halo {
  position: absolute; inset: -44px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--bleu) 38%, transparent), transparent 66%);
  filter: blur(14px); animation: halo 1.6s .5s var(--courbe) both;
}
@keyframes halo { from { opacity: 0; transform: scale(.5); } 60% { opacity: 1; } to { opacity: .75; transform: scale(1); } }
.accueil-logo--petit { width: 88px; height: 88px; margin-bottom: 0; }
.accueil-logo--petit .feuille { width: 44px; height: 44px; background-size: 88px 88px; }
.accueil-logo--petit .feuille--2 { background-position: -44px 0; }
.accueil-logo--petit .feuille--3 { background-position: 0 -44px; }
.accueil-logo--petit .feuille--4 { background-position: -44px -44px; }

.accueil-marque { margin: 0; font: 500 16px var(--titre); letter-spacing: -.012em; color: var(--encre-2); animation: souffle .6s .85s var(--ressort) both; }
.accueil-marque span { margin-left: 7px; padding: 2px 8px; border-radius: 980px; background: rgba(10, 132, 255, .18); color: #409CFF; font: 600 12px var(--police); vertical-align: 2px; }
.accueil-porte h1 { margin: 14px 0 10px; font: 700 42px/1.06 var(--titre); letter-spacing: -.036em; text-wrap: balance; animation: souffle .7s 1.05s var(--ressort) both; }
.accueil-porte .texte { margin: 0; max-width: 46ch; font: 400 16.5px/1.5 var(--police); color: var(--encre-2); text-wrap: pretty; animation: souffle .7s 1.25s var(--ressort) both; }
.accueil-porte .btn-principal { margin-top: 30px; height: 46px; padding: 0 28px; font-size: 15.5px; animation: souffle .6s 1.55s var(--ressort) both; }
.accueil-porte .btn-fantome { margin-top: 14px; color: var(--encre-3); animation: souffle .6s 1.9s var(--ressort) both; }

/* --- Le guide ------------------------------------------------------------ */
.accueil-guide {
  position: relative; width: min(700px, 100%); height: min(700px, 100%);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); border-radius: 26px; overflow: hidden;
  background: var(--blanc); box-shadow: var(--ombre-carte), 0 0 0 1px var(--lisere-carte);
  animation: guide-entre .65s var(--ressort) both;
}
@keyframes guide-entre { from { opacity: 0; transform: translateY(28px) scale(.96); } }
.accueil.sort .accueil-guide { animation: guide-sort .5s var(--courbe) both; }
@keyframes guide-sort { to { opacity: 0; transform: scale(1.05); } }
/* La piste fait exactement la largeur de la carte (min-width: 0, sinon le
   texte des sept écrans l'élargit) et chaque écran en prend toute la largeur. */
.accueil-piste { display: flex; width: 100%; min-width: 0; height: 100%; min-height: 0; transition: transform .55s var(--ressort); user-select: none; touch-action: pan-y; cursor: grab; }
.accueil-piste.glisse { transition: none; cursor: grabbing; }
.ecran { flex: 0 0 100%; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden auto; padding: 30px 40px 10px; }
.ecran-visuel { display: grid; place-items: center; align-content: center; min-height: 220px; padding: 6px 0 22px; }
.ecran-texte { text-align: center; padding-bottom: 10px; }
.ecran-texte .surtitre { margin-bottom: 8px; }
.ecran-texte h2 { margin: 0 0 10px; font: 700 29px/1.1 var(--titre); letter-spacing: -.032em; text-wrap: balance; }
.ecran-texte p { margin: 0 auto; max-width: 52ch; font: 400 15.5px/1.5 var(--police); color: var(--encre-2); text-wrap: pretty; }
.ecran-texte p + p { margin-top: 8px; }
.ecran-texte .accroche { font-weight: 500; color: var(--encre); }
.ecran.actif .ecran-visuel > * { animation: monte .7s .08s var(--ressort) both; }
.ecran.actif .ecran-texte > * { animation: souffle .55s var(--ressort) both; }
.ecran.actif .ecran-texte > :nth-child(2) { animation-delay: .07s; }
.ecran.actif .ecran-texte > :nth-child(3) { animation-delay: .14s; }
.ecran.actif .ecran-texte > :nth-child(n+4) { animation-delay: .2s; }
.accueil-pied { display: flex; align-items: center; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--trait-fin); background: var(--blanc); }
.accueil-pied [hidden] { display: none; }
.accueil-points { display: inline-flex; gap: 6px; margin: 0 auto; }
.accueil-points i { width: 6px; height: 6px; border-radius: 3px; background: var(--trait-fort); transition: width .35s var(--ressort), background .2s var(--courbe); }
.accueil-points i.actif { width: 20px; background: var(--encre); }

/* Une icône qui se dessine : chaque forme mesure 1 (pathLength), le trait
   part de 0. */
.visuel-icone { width: 128px; height: 128px; color: var(--bleu); }
.visuel-icone svg { width: 100%; height: 100%; stroke-width: 1.1; }
.ecran.actif .visuel-icone svg :is(path, circle, rect, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 1.1s .15s var(--courbe) forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* L'application : un téléphone avec ses écrans, ou son initiale. */
.telephone {
  position: relative; width: 186px; height: 372px; padding: 9px; border-radius: 34px;
  background: #151517; box-shadow: 0 0 0 2px #3A3A3C, 0 20px 50px rgba(0, 0, 0, .28);
}
.telephone::before { content: ''; position: absolute; top: 16px; left: 50%; width: 58px; height: 16px; transform: translateX(-50%); border-radius: 8px; background: #000; z-index: 2; }
.telephone-ecran { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #F5F5F7; }
.telephone-ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--courbe), transform .7s var(--courbe); }
/* Une capture ne se montre qu'une fois son adresse résolue ; en attendant,
   ou si aucune ne se lit, l'initiale de l'application tient l'écran. */
.telephone-ecran img.actif[src] { opacity: 1; transform: none; }
.telephone-initiale { position: absolute; inset: 0; display: grid; place-items: center; font: 700 64px/1 var(--titre); letter-spacing: -.04em; color: var(--trait-fort); }
.telephone-points { position: absolute; left: 0; right: 0; bottom: -20px; display: flex; justify-content: center; gap: 5px; }
.telephone-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--trait-fort); transition: background .3s; }
.telephone-points i.actif { background: var(--encre-2); }
.appli-icone {
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 26px;
  background: linear-gradient(145deg, #4DA3FF, #0066CC); color: #fff; font: 700 54px/1 var(--titre); letter-spacing: -.04em;
  box-shadow: 0 16px 40px rgba(0, 102, 204, .28);
}
.appli-icone--vide { background: var(--eleve); color: var(--encre-3); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.appli-icone--vide svg { width: 44px; height: 44px; stroke-width: 1.3; }
/* L'application : le téléphone à gauche, le texte à droite, sur un grand
   écran ; l'un sous l'autre, et la page défile, sur un petit. */
.ecran--application { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 36px; align-items: center; }
.ecran--application .ecran-visuel { min-height: 0; padding: 10px 0 30px; }
.ecran--application .ecran-texte { text-align: left; }
.ecran--application .ecran-texte p { margin-left: 0; }
.ecran--application .atouts { margin-left: 0; }
.atouts { list-style: none; margin: 14px auto 0; padding: 0; display: grid; gap: 8px; width: fit-content; max-width: 100%; text-align: left; }
.atouts li { display: flex; align-items: flex-start; gap: 10px; font: 400 14.5px/1.4 var(--police); color: var(--encre); }
.atouts svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--vert); }

/* Le déroulé : quatre gestes, numérotés, qui s'allument l'un après l'autre. */
.frise-accueil { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: min(400px, 100%); }
.frise-accueil li { display: flex; align-items: center; gap: 14px; font: 600 15px/1.3 var(--police); color: var(--encre); }
.ecran.actif .frise-accueil li { animation: ligne-entre .55s var(--ressort) both; }
.ecran.actif .frise-accueil li:nth-child(2) { animation-delay: .12s; }
.ecran.actif .frise-accueil li:nth-child(3) { animation-delay: .24s; }
.ecran.actif .frise-accueil li:nth-child(4) { animation-delay: .36s; }
.frise-accueil-n { flex: none; font: 600 12px var(--mono); letter-spacing: .06em; color: var(--encre-3); }
.frise-accueil-i { flex: none; display: grid; color: var(--bleu); }
.frise-accueil-i svg { width: 22px; height: 22px; }
.frise-accueil small { display: block; margin-top: 1px; font: 400 13px/1.35 var(--police); color: var(--encre-3); }

/* Les trois réponses. */
.verdicts-accueil { display: grid; gap: 10px; width: min(400px, 100%); }
.verdicts-accueil > div {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px;
  background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair);
}
.ecran.actif .verdicts-accueil > div { animation: monte .55s var(--ressort) both; }
.ecran.actif .verdicts-accueil > div:nth-child(2) { animation-delay: .12s; }
.ecran.actif .verdicts-accueil > div:nth-child(3) { animation-delay: .24s; }
.verdict { flex: none; min-width: 92px; padding: 6px 12px; border-radius: 980px; text-align: center; color: #fff; font: 600 13px/1 var(--police); }
.verdict--ok { background: var(--vert); } .verdict--ko { background: var(--rouge); } .verdict--na { background: var(--encre-3); }
.verdicts-accueil span { font: 400 13.5px/1.4 var(--police); color: var(--encre-2); text-align: left; }

.verdict--attente { background: var(--rouge); } .verdict--demande { background: var(--bleu); } .verdict--message { background: var(--violet-desk); }

/* Le Hub : les projets du client tels qu'ils sont, une grille de cases de
   tests, et l'application sur l'ordinateur. */
.projets-accueil { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: min(420px, 100%); }
.projets-accueil li {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: 14px;
  background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair);
}
.ecran.actif .projets-accueil li { animation: monte .55s var(--ressort) both; }
.ecran.actif .projets-accueil li:nth-child(2) { animation-delay: .1s; }
.ecran.actif .projets-accueil li:nth-child(3) { animation-delay: .2s; }
.ecran.actif .projets-accueil li:nth-child(4) { animation-delay: .3s; }
.projets-accueil-texte { flex: 1; min-width: 0; display: grid; text-align: left; }
.projets-accueil-texte b { font: 600 14.5px/1.3 var(--police); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projets-accueil-texte small { font: 400 12.5px/1.3 var(--police); color: var(--encre-3); }
.cases-accueil { display: grid; grid-template-columns: repeat(8, 26px); gap: 6px; }
.cases-accueil i { width: 26px; height: 26px; border-radius: 7px; background: var(--trait-clair); }
.cases-accueil i[data-e="ok"] { background: var(--vert); }
.cases-accueil i[data-e="ko"] { background: var(--rouge); }
.cases-accueil i[data-e="revoir"] { background: var(--ambre); }
.cases-accueil i[data-e="na"] { background: var(--encre-3); }
.ecran.actif .cases-accueil i { animation: monte .4s var(--ressort) both; }
.ecran.actif .cases-accueil i:nth-child(8n+2) { animation-delay: .04s; } .ecran.actif .cases-accueil i:nth-child(8n+3) { animation-delay: .08s; }
.ecran.actif .cases-accueil i:nth-child(8n+4) { animation-delay: .12s; } .ecran.actif .cases-accueil i:nth-child(8n+5) { animation-delay: .16s; }
.ecran.actif .cases-accueil i:nth-child(8n+6) { animation-delay: .2s; } .ecran.actif .cases-accueil i:nth-child(8n+7) { animation-delay: .24s; }
.ecran.actif .cases-accueil i:nth-child(8n+8) { animation-delay: .28s; }
.ecran.actif .cases-accueil i:nth-child(n+9) { animation-duration: .5s; }
.apps-accueil { display: grid; justify-items: center; gap: 16px; }
.apps-accueil img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.apps-accueil-os { display: flex; gap: 8px; }
.apps-accueil-os span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 980px; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); font: 500 12.5px var(--police); color: var(--encre-2); }
.apps-accueil-os svg { width: 14px; height: 14px; }

/* Le signalement : une capture, puis les lignes du récit qui s'écrivent. */
.capture-accueil { display: grid; gap: 10px; width: min(300px, 100%); padding: 14px; border-radius: 18px; background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); }
.capture-accueil-image { display: grid; place-items: center; height: 118px; border-radius: 12px; background: var(--bleu-clair); color: var(--bleu); }
.capture-accueil-image svg { width: 30px; height: 30px; stroke-width: 1.4; }
.capture-accueil i { display: block; height: 10px; border-radius: 5px; background: var(--trait-clair); transform-origin: left center; }
.ecran.actif .capture-accueil i { animation: ligne-pousse .6s .35s var(--ressort) both; }
.ecran.actif .capture-accueil i:nth-of-type(2) { animation-delay: .5s; }
.ecran.actif .capture-accueil i:nth-of-type(3) { animation-delay: .65s; }
@keyframes ligne-pousse { from { transform: scaleX(0); } }

/* Le temps. */
.chrono-accueil { display: grid; justify-items: center; gap: 6px; }
.chrono-accueil b { font: 600 54px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chrono-accueil small { font: 400 13.5px var(--police); color: var(--encre-3); }

/* La sortie : le rail glisse, la barre s'allume. Les cartes de la campagne
   se posent par la classe « arrivee » de #vue (section 14). */
.coq.arrivee-suite .lat { animation: rail-entre .7s var(--ressort) both; }
@keyframes rail-entre { from { opacity: 0; transform: translateX(-18px); } }
.coq.arrivee-suite .haut { animation: fondu .6s .1s var(--courbe) both; }

@media (max-width: 640px) {
  .accueil { padding: 0; }
  .accueil-guide { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  .ecran { padding: 22px 20px 8px; }
  .ecran-visuel { min-height: 180px; }
  .ecran--application { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; row-gap: 8px; }
  .ecran--application .ecran-texte { text-align: center; }
  .ecran--application .ecran-texte p { margin-left: auto; }
  .ecran--application .atouts { margin-left: auto; }
  .ecran-texte h2 { font-size: 25px; }
  .telephone { width: 150px; height: 300px; border-radius: 28px; }
  .telephone-ecran { border-radius: 21px; }
  .accueil-porte h1 { font-size: 34px; }
  .accueil-logo { width: 104px; height: 104px; }
  .accueil-logo .feuille { width: 52px; height: 52px; background-size: 104px 104px; }
  .accueil-logo .feuille--2 { background-position: -52px 0; }
  .accueil-logo .feuille--3 { background-position: 0 -52px; }
  .accueil-logo .feuille--4 { background-position: -52px -52px; }
}
@media (max-height: 640px) {
  .ecran-visuel { min-height: 150px; }
  .telephone { width: 140px; height: 280px; border-radius: 26px; }
  .telephone-ecran { border-radius: 19px; }
  .visuel-icone { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .accueil-logo .feuille, .accueil-logo .halo, .accueil-marque, .accueil-porte h1, .accueil-porte .texte, .accueil-porte .btn,
  .accueil-porte .btn-principal, .accueil-porte .btn-fantome,
  .ecran.actif .ecran-visuel > *, .ecran.actif .ecran-texte > *, .ecran.actif .frise-accueil li, .ecran.actif .verdicts-accueil > div, .ecran.actif .capture-accueil i { animation: none; opacity: 1; }
  .accueil-piste { transition: none; }
}

/* ==========================================================================
   20. La fiche d'un scénario : une modale entière, la même partout

   Le testeur y pose son résultat, l'équipe et le client y lisent ce qui a
   été fait. Épurée comme l'accueil : la tête centrée, le corps en texte
   nu séparé par des filets, aucun bloc encadré, aucune couleur qui ne
   porte pas une donnée. Elle arrive du fond avec un ressort et repart de
   même. Jamais de feuille latérale ici.
   ========================================================================== */

.voile--scenario { padding: 24px; -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); animation: fondu .28s var(--courbe) both; }
.voile--scenario.sort { animation: voile-sort .26s var(--courbe) both; }
@keyframes voile-sort { to { opacity: 0; } }
.modale--scenario {
  width: min(640px, 100%); max-height: min(86vh, 100%); border-radius: 28px;
  animation: fiche-entre .5s var(--ressort) both;
}
@keyframes fiche-entre { from { opacity: 0; transform: translateY(28px) scale(.94); } }
.voile--scenario.sort .modale--scenario { animation: fiche-sort .26s var(--courbe) both; }
@keyframes fiche-sort { to { opacity: 0; transform: translateY(12px) scale(.96); } }

/* La tête, centrée : la référence et le bloc en chasse fixe, puis le titre. */
.modale--scenario .modale-tete { position: relative; display: block; padding: 40px 48px 6px; text-align: center; }
.modale--scenario .modale-tete > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; min-width: 0; }
.modale--scenario .modale-tete h2 { font: 700 28px/1.12 var(--titre); letter-spacing: -.032em; text-wrap: balance; }
.modale--scenario .modale-tete p { margin: 0; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.modale--scenario .modale-tete .btn-icone { position: absolute; top: 18px; right: 18px; }
.modale--scenario .modale-corps { padding: 16px 40px 30px; display: grid; gap: 0; }
.modale--scenario .modale-corps > * { animation: monte .5s var(--ressort) both; }
.modale--scenario .modale-corps > :nth-child(2) { animation-delay: .06s; }
.modale--scenario .modale-corps > :nth-child(3) { animation-delay: .12s; }
.modale--scenario .modale-corps > :nth-child(n+4) { animation-delay: .18s; }

/* L'état, sous le titre. */
.fs-etat { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font: 400 14px var(--police); color: var(--encre-2); }
.modale--scenario .tb-pourquoi { margin: 0 0 8px; text-align: center; font: 400 14.5px/1.5 var(--police); color: var(--encre-2); }
.modale--scenario .tb-pourquoi strong { color: var(--encre); }

/* Un bloc : une étiquette en chasse fixe, le texte en grand, un filet
   entre deux. Rien d'encadré. */
.fs-bloc { padding: 20px 0; border-top: 1px solid var(--trait-fin); background: none; box-shadow: none; border-radius: 0; }
.fs-bloc:first-child, .fs-etat + .fs-bloc, .tb-pourquoi + .fs-bloc { border-top: 0; }
.fs-bloc-sur { margin: 0 0 8px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.fs-bloc p:not(.fs-bloc-sur) { margin: 0; font: 400 17px/1.45 var(--police); letter-spacing: -.012em; color: var(--encre); text-wrap: pretty; }
.fs-bloc--attendu p:not(.fs-bloc-sur) { font-weight: 500; }
.fs-bloc--attendu .fs-bloc-sur { color: var(--bleu); }
.fs-bloc--alerte .fs-bloc-sur { color: var(--ambre); }
.fs-note { margin: 14px 0 0; font: 400 13px/1.5 var(--police); color: var(--encre-3); text-align: center; text-wrap: pretty; }
.fs-note + .fs-note { margin-top: 4px; }
.fs-note strong { color: var(--encre-2); font-weight: 500; }

/* Les passages, une ligne par personne, séparés par des filets. */
.modale--scenario .tb-sessions { display: grid; }
.modale--scenario .tb-passage { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--trait-fin); background: none; box-shadow: none; border-radius: 0; }
.modale--scenario .tb-passage:first-child { border-top: 0; }
.modale--scenario .tb-passage p { margin: 0; font: 400 14.5px/1.4 var(--police); }
.modale--scenario .tb-passage .aide { margin-top: 2px; }

/* Le pied : le verdict du testeur, trois choix égaux, l'état en point et
   texte. La croix en tête suffit à fermer : un pied qui n'aurait que
   « Fermer » ne s'affiche pas. */
.modale--scenario .modale-pied { padding: 6px 40px 34px; border-top: 0; gap: 10px; }
.modale--scenario .modale-pied [data-fermer] { display: none; }
.modale--scenario .modale-pied:not(:has(:not([data-fermer], .pousse))) { display: none; }
.modale--scenario .modale-pied .pousse { display: none; }
.modale--scenario .modale-pied .fs-verdict {
  flex: 1 1 0; height: 48px; padding: 0 12px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--eleve); box-shadow: inset 0 0 0 1px var(--trait-clair); color: var(--encre);
  font: 500 15px var(--police); letter-spacing: -.012em;
  transition: background .15s var(--courbe), transform .12s var(--ressort), box-shadow .15s var(--courbe);
}
.modale--scenario .modale-pied .fs-verdict i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.modale--scenario .modale-pied .fs-verdict--ok i { background: var(--vert); }
.modale--scenario .modale-pied .fs-verdict--ko i { background: var(--rouge); }
.modale--scenario .modale-pied .fs-verdict--na i { background: var(--encre-3); }
.modale--scenario .modale-pied .fs-verdict:hover { background: var(--actif); }
.modale--scenario .modale-pied .fs-verdict:active { transform: scale(.98); }
.modale--scenario .modale-pied .fs-verdict[aria-pressed="true"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
@media (max-width: 640px) {
  .voile--scenario { padding: 0; place-items: end stretch; }
  .modale--scenario { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .modale--scenario .modale-tete { padding: 30px 24px 4px; }
  .modale--scenario .modale-corps { padding: 12px 24px 20px; }
  .modale--scenario .modale-pied { padding: 4px 20px 26px; flex-wrap: wrap; }
  .modale--scenario .modale-pied .fs-verdict { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .modale--scenario, .modale--scenario .modale-corps > * { animation: none; } }

/* ==========================================================================
   21. L'écran de lancement : la marque s'assemble, puis rejoint sa place
   ========================================================================== */

.lancement {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; align-content: center; gap: 22px;
  background: var(--page); color: var(--encre);
}
.lancement::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 46%, color-mix(in srgb, var(--bleu) 14%, transparent), transparent 70%);
  animation: fondu 1.2s var(--courbe) both;
}
.lancement .accueil-logo { margin: 0; position: relative; z-index: 1; }
.lancement-mot { position: relative; margin: 0; font: 700 24px/1 var(--titre); letter-spacing: -.035em; animation: souffle .6s .85s var(--ressort) both; }
.lancement-mot .service { margin-left: 8px; padding: 3px 9px 2px; border-radius: 980px; vertical-align: 4px; font: 600 11px/1.2 var(--titre); letter-spacing: .06em; text-transform: uppercase; background: rgba(10, 132, 255, .2); color: #409CFF; }
/* Arrivée depuis la porte : la marque est déjà là, telle qu'elle a quitté
   la porte (logo, mot, badge sur une ligne, en plus grand) ; elle ne se
   réassemble pas, et glisse à sa place dès que la page est prête. */
.lancement--suite .feuille, .lancement--suite .halo, .lancement--suite .lancement-mot, .lancement--suite::before { animation: none; }
.lancement--suite { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; }
.lancement--suite .halo { display: none; }
.lancement--suite .lancement-mot { font-size: 34px; }
.lancement--suite .lancement-mot .service { margin-left: 10px; padding: 4px 11px 3px; font-size: 13px; vertical-align: 6px; }
.accueil-logo--mini { width: 34px; height: 34px; margin: 0; }
.accueil-logo--mini .feuille { width: 17px; height: 17px; background-size: 34px 34px; }
.accueil-logo--mini .feuille--2 { background-position: -17px 0; }
.accueil-logo--mini .feuille--3 { background-position: 0 -17px; }
.accueil-logo--mini .feuille--4 { background-position: -17px -17px; }
/* Le départ : tout s'efface, sauf la marque qui glisse (lancement.js). */
.lancement.part { transition: background .45s var(--courbe); background: transparent; pointer-events: none; }
.lancement.part::before, .lancement.part .lancement-mot, .lancement.part .halo { transition: opacity .3s var(--courbe); opacity: 0; }
.lancement.part .accueil-logo .feuille { animation: none; }
.app-bureau.app-darwin .lancement { -webkit-app-region: drag; }
@media (prefers-reduced-motion: reduce) { .lancement .feuille, .lancement .halo, .lancement-mot, .lancement::before { animation: none; } }

/* --------------------------------------------------------------------------
   La fin de test : l'état de l'accès en bas du rail, les scénarios
   verrouillés tant que le précédent n'est pas déroulé, les remarques
   d'après. Un texte coloré, pas de pastille ; une case verrouillée se
   reconnaît à sa transparence, pas à un cadenas.
   -------------------------------------------------------------------------- */
.lat-etat { margin: 0 10px 8px; padding: 0; font: 500 12px/1.4 var(--police); color: var(--encre-2); }
.lat-etat--vert { color: var(--vert); }
.lat-etat--ambre { color: var(--ambre); }
.lat-etat--rouge { color: var(--rouge); }
.coq.pliee .lat-etat { display: none; }

.t-scenario--verrou { opacity: .48; }
.t-scenario--verrou .t-scenario-corps { cursor: not-allowed; }
.t-scenario--verrou .t-choix, .t-scenario--fige .t-choix { display: none; }
.tb--testeur .tb-case[data-verrou] { opacity: .35; cursor: not-allowed; }
.tb--testeur .tb-case[data-verrou]:hover { transform: none; }

.fin-test { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--accent-voile); }
.fin-test h2 { margin: 0 0 4px; font: 600 16px/1.3 var(--titre); }
.fin-test p { margin: 0; color: var(--encre-2); font: 400 13.5px/1.5 var(--police); }
.fin-test .actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.fin-test--faite { background: var(--ok-voile); }
.remarques-fin { margin: 0 0 18px; }
.remarques-fin .remarque { padding: 10px 12px; border-radius: 10px; background: var(--fond-2); margin-bottom: 8px; }
.remarques-fin .remarque small { display: block; color: var(--encre-3); margin-top: 4px; }
.remarques-fin textarea { width: 100%; }

/* La fiche du testeur, les identifiants de test, les magasins. */
.fiche-bloc { margin-bottom: 22px; }
.fiche-bloc .bloc-tete { margin-bottom: 10px; }
.appareil-releve { padding: 12px 14px; border-radius: 10px; background: var(--fond-2); margin-bottom: 12px; }
.appareil-releve p { margin: 0; }
.identifiants-test { margin-top: 14px; }
.identifiants-bloc { margin: 6px 0 10px; padding: 12px 14px; border-radius: 10px; background: var(--fond-2); font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.fin-test--magasins { background: var(--fond-2); }
.fin-test--magasins .actions a { text-decoration: none; }
.bulle--testeur .bulle-tete .avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 600 13px var(--titre); }

/* Les conversations des testeurs, dans le Cockpit : la liste, le fil. */
.tm-deux { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tm-liste { display: flex; flex-direction: column; gap: 4px; }
.tm-liste .ligne--active { background: var(--actif); }
.tm-fil-cadre { display: flex; flex-direction: column; min-height: 480px; border-radius: 14px; background: var(--blanc); box-shadow: var(--ombre-sm), 0 0 0 1px var(--lisere-carte); }
.tm-tete { padding: 16px 18px 12px; }
.tm-tete h2 { margin: 0; font: 600 18px/1.3 var(--titre); }
.tm-fil { flex: 1; overflow-y: auto; padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; }
.tm-repondre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 18px 16px; }
.tm-vide { padding: 40px 18px; }
@media (max-width: 800px) { .tm-deux { grid-template-columns: 1fr; } }

/* Devis et factures : trois colonnes fixes en fin de ligne, le bouton
   Télécharger toujours au même endroit, blanc, arrondi. */
.piece-fin { display: grid; grid-template-columns: 132px 150px 104px; align-items: center; justify-items: end; gap: 14px; }
.piece-fin-voir { justify-self: start; width: 100%; display: flex; justify-content: flex-start; }
.piece-fin-statut { justify-self: start; }
.btn-voir { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: 10px; background: #FFFFFF; color: #111113; font: 500 13px var(--police); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); transition: transform .12s var(--ressort), box-shadow .15s var(--courbe); }
.btn-voir:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .18); }
.btn-voir:active { transform: scale(.97); }
.btn-voir svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .piece-fin { grid-template-columns: auto auto auto; gap: 8px; } }