/* =====================================================================================================================
   NOVA — nouvelle interface (15/10/2026). Refonte complète demandée par Anthony : « supprimer ce qui existe pour refaire à
   la manière des meilleurs ». Direction choisie : « B · Tableau de bord » (Stripe, Triple Whale) de la maquette
   https://claude.ai/artifact/RdtEwhAQ5UP8N69fN11hE2, avec les vidéos de l'équipe là où elles servent.

   Règles de ce fichier :
   - tout ce qui est nouveau commence par .n- (pas de mélange avec les anciennes classes de style.css) ;
   - le cadre commun (Dock, barre du haut, onglets du téléphone, barre de l'équipe, tiroir) est redessiné sous body.nova ;
   - les couleurs vivent dans les variables ci-dessous, avec leur version sombre.
   ===================================================================================================================== */

body.nova {
  --n-fond: #F6F7F9;
  --n-surface: #FFFFFF;
  --n-surface-2: #FAFBFC;
  --n-bord: #E3E6EC;
  --n-bord-doux: #EEF0F4;
  --n-encre: #0E1324;
  --n-doux: #5B6478;
  --n-tres-doux: #8A93A8;
  --n-gris: #EEF1F6;
  --n-gris-fort: #E2E6EE;
  --n-accent: #3B5BDB;
  --n-nuit: #0E1324;
  --n-nuit-doux: #A9B1C6;
  --n-bon: #1F7A3A;
  --n-bon-fond: #E8F5EC;
  --n-attention: #B45309;
  --n-attention-fond: #FDF0E1;
  --n-mauvais: #B42318;
  --n-mauvais-fond: #FDECEC;
  --n-rayon: 14px;
  --n-rayon-petit: 10px;
  --n-ombre: 0 0 0 1px var(--n-bord);
  --n-ombre-haute: 0 18px 44px -16px rgba(14, 19, 36, .35), 0 0 0 1px var(--n-bord);
  --n-police: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --n-chiffres: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--n-fond);
  color: var(--n-encre);
  font-family: var(--n-police);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  body.nova {
    --n-fond: #0B0D14;
    --n-surface: #141824;
    --n-surface-2: #181D2B;
    --n-bord: #262C3D;
    --n-bord-doux: #1F2433;
    --n-encre: #E8EBF3;
    --n-doux: #9AA3B8;
    --n-tres-doux: #6F7891;
    --n-gris: #1F2534;
    --n-gris-fort: #2A3144;
    --n-accent: #7C93F0;
    --n-bon: #5CC683;
    --n-bon-fond: rgba(92, 198, 131, .14);
    --n-attention: #F2A851;
    --n-attention-fond: rgba(242, 168, 81, .14);
    --n-mauvais: #F07468;
    --n-mauvais-fond: rgba(240, 116, 104, .14);
    --n-ombre-haute: 0 18px 44px -16px rgba(0, 0, 0, .7), 0 0 0 1px var(--n-bord);
  }
}

/* ----------------------------------------------------------------------------------------------- l'ancien style, repeint
   Les écrans pas encore refaits prennent déjà les couleurs, la police et les formes de la nouvelle interface : on
   redonne aux variables de style.css les valeurs de la direction B (15/10/2026). */
body.nova {
  --fond: var(--n-fond); --fond-plein: var(--n-fond);
  --surface: var(--n-surface); --surface-plein: var(--n-surface); --surface-haute: var(--n-surface);
  --encre: var(--n-encre); --doux: var(--n-doux); --tres-doux: var(--n-tres-doux); --neutre: var(--n-doux);
  --trait: var(--n-bord); --trait-doux: var(--n-bord-doux); --trait-fort: var(--n-bord);
  --accent: var(--n-accent); --accent-fonce: var(--n-accent); --accent-fond: color-mix(in srgb, var(--n-accent) 10%, transparent); --lien: var(--n-accent);
  --degrade: var(--n-nuit); --degrade-clair: var(--n-nuit);
  --ok: var(--n-bon); --ok-fond: var(--n-bon-fond); --ok-bord: transparent;
  --warn: var(--n-attention); --warn-fond: var(--n-attention-fond); --warn-bord: transparent;
  --bad: var(--n-mauvais); --bad-fond: var(--n-mauvais-fond); --bad-bord: transparent;
  --gris-bouton: var(--n-gris); --gris-bouton-appui: var(--n-gris-fort); --puits: var(--n-gris);
  --rayon: var(--n-rayon); --rayon-moyen: 12px; --rayon-petit: var(--n-rayon-petit);
  --relief: var(--n-ombre); --relief-doux: var(--n-ombre); --relief-actif: var(--n-ombre); --bord-carte: 0 solid transparent;
  --police: var(--n-police); --mono: var(--n-chiffres);
}
body.nova h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
body.nova h2 { font-weight: 600; letter-spacing: 0; }
body.nova .chapo { font-size: 14px; color: var(--n-doux); }
body.nova .carte { padding: 18px 20px; }
body.nova .liste { padding-top: 14px; }
body.nova .kpi-valeur { font-family: var(--n-chiffres); font-weight: 600; letter-spacing: -0.02em; }
body.nova .prochaine { background: var(--n-surface); box-shadow: var(--n-ombre), inset 4px 0 0 var(--n-accent); }
body.nova .prochaine.bad { box-shadow: var(--n-ombre), inset 4px 0 0 var(--n-mauvais); }
body.nova .prochaine[data-scene], body.nova .contenu[data-qui] .prochaine[data-scene] { display: flex; flex-wrap: nowrap; align-items: center; padding: 14px 18px 14px 14px; gap: 18px; }
body.nova .prochaine[data-scene]::before { display: none; }
body.nova .prochaine[data-scene] .prochaine-boutons { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 46%; }
body.nova .prochaine[data-scene] > div:not(.prochaine-boutons) { flex: 1; min-width: 0; }
@media (max-width: 800px) { body.nova .prochaine[data-scene] { flex-wrap: wrap; } body.nova .prochaine[data-scene] .n-scene { width: 64px; } }
body.nova .bascule { background: var(--n-surface); box-shadow: var(--n-ombre); border-radius: var(--n-rayon-petit); }
body.nova .pastille { border-radius: 8px; font-weight: 600; color: var(--n-doux); }
body.nova .pastille.actif { background: var(--n-nuit); color: #FFFFFF; box-shadow: none; }
@media (prefers-color-scheme: dark) { body.nova .pastille.actif { background: #E8EBF3; color: #0E1324; } }
body.nova select, body.nova textarea, body.nova input[type=text], body.nova input[type=url], body.nova input[type=email], body.nova input[type=password],
body.nova input[type=date], body.nova input[type=number], body.nova input[type=search] { border-radius: 8px; border: 1px solid var(--n-bord); background-color: var(--n-surface); font-family: var(--n-police); }
body.nova .rangee { font-variant-numeric: tabular-nums; }
body.nova .barre-ia input, body.nova .barre-ia input[type=text], body.nova .guide-saisie textarea, body.nova .guide-saisie input { border: 0; background: transparent; }

/* ----------------------------------------------------------------------------------------------- bases */
/* style.css colore toute classe « ok » ou « warn » : les chiffres en couleur gardent un fond transparent. */
.n-camp-val.ok, .n-kpi-valeur.ok, .n-kpi-detail.ok, .n-crea-metriques .ok, .n-fil-ligne.ok { background: none; }

body.nova h1, body.nova h2, body.nova h3 { font-family: var(--n-police); color: var(--n-encre); }
body.nova a { color: var(--n-accent); }
body.nova main.contenu { background: transparent; }
.n-chiffre { font-family: var(--n-chiffres); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.n-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La page : une colonne large, bien aérée. */
.n-page { width: 100%; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }

/* En-tête d'écran : visage (facultatif), titre, une ligne, puis les réglages à droite. */
.n-entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.n-entete-texte { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.n-entete h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.n-entete-ligne { font-size: 14px; color: var(--n-doux); }
.n-entete-ligne strong { color: var(--n-encre); font-weight: 600; }
.n-entete-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Visages ronds (photos). */
.n-visage { width: var(--t, 36px); height: var(--t, 36px); border-radius: 50%; object-fit: cover; flex: none; background: var(--n-gris);
  box-shadow: 0 0 0 2px var(--n-surface), 0 0 0 3.5px var(--couleur, transparent); }
.n-visage-lettre { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--couleur); background: var(--fond, var(--n-gris)); }

.n-visage-bouton { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; transition: transform 120ms ease; }
.n-visage-bouton:hover { transform: scale(1.08); }

/* Boutons. */
.n-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0;
  border-radius: var(--n-rayon-petit); background: var(--n-nuit); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 120ms ease, filter 120ms ease; }
body.nova a.n-bouton { color: #FFFFFF; }
.n-bouton:hover { filter: brightness(1.15); }
.n-bouton:active { transform: scale(.97); }
.n-bouton.doux, body.nova a.n-bouton.doux { background: var(--n-gris); color: var(--n-encre); }
.n-bouton.doux:hover { filter: none; background: var(--n-gris-fort); }
.n-bouton.couleur, body.nova a.n-bouton.couleur { background: var(--couleur); color: #FFFFFF; }
.n-bouton.petit { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.n-bouton svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) { .n-bouton:not(.doux):not(.couleur) { background: #E8EBF3; color: #0E1324; } body.nova a.n-bouton:not(.doux):not(.couleur) { color: #0E1324; } }

/* Contrôle segmenté (périodes, filtres). */
.n-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--n-surface); border-radius: var(--n-rayon-petit); box-shadow: var(--n-ombre); }
.n-segment a, .n-segment button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--n-doux); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
body.nova .n-segment a { color: var(--n-doux); }
body.nova .n-segment a:hover, .n-segment button:hover { color: var(--n-encre); }
.n-segment .actif, .n-segment [aria-current="page"] { background: var(--n-nuit); color: #FFFFFF; }
body.nova .n-segment a.actif { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .n-segment .actif, .n-segment [aria-current="page"] { background: #E8EBF3; color: #0E1324; } body.nova .n-segment a.actif { color: #0E1324; } }
.n-segment b { font-weight: 600; opacity: .7; font-family: var(--n-chiffres); font-size: 12px; }

/* Pastilles d'état. */
.n-etat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--n-gris); color: var(--n-doux); white-space: nowrap; }
.n-etat.ok { background: var(--n-bon-fond); color: var(--n-bon); }
.n-etat.att { background: var(--n-attention-fond); color: var(--n-attention); }
.n-etat.ko { background: var(--n-mauvais-fond); color: var(--n-mauvais); }

/* Cartes. */
.n-carte { background: var(--n-surface); border-radius: var(--n-rayon); box-shadow: var(--n-ombre); overflow: hidden; min-width: 0; }
.n-carte-tete { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--n-bord-doux); }
.n-carte-tete h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 600; }
.n-carte-tete .n-compte { font-size: 13px; color: var(--n-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-carte-corps { padding: 16px 20px; }
.n-vide { padding: 18px 20px; color: var(--n-doux); font-size: 14px; }

/* Bandeau de chiffres clés (Stripe) : des tuiles séparées par un trait, une petite courbe sous chaque chiffre. */
.n-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--n-surface); border-radius: var(--n-rayon);
  box-shadow: var(--n-ombre); overflow: hidden; }
.n-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-width: 0; text-decoration: none; color: inherit; }
.n-kpi + .n-kpi { border-left: 1px solid var(--n-bord-doux); }
a.n-kpi:hover { background: var(--n-surface-2); }
.n-kpi-titre { font-size: 13px; color: var(--n-doux); font-weight: 500; }
.n-kpi-valeur { font-family: var(--n-chiffres); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: var(--n-encre); }
.n-kpi-valeur.ko { color: var(--n-mauvais); }
.n-kpi-valeur.ok { color: var(--n-bon); }
.n-kpi-detail { font-size: 12px; color: var(--n-doux); }
.n-kpi-detail.ko { color: var(--n-mauvais); font-weight: 600; }
.n-kpi-detail.ok { color: var(--n-bon); font-weight: 600; }
.n-courbe { width: 100%; height: 28px; margin-top: 4px; overflow: visible; }
.n-courbe polyline { fill: none; stroke: var(--couleur, var(--n-accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.n-courbe .n-courbe-aire { fill: var(--couleur, var(--n-accent)); opacity: .08; stroke: none; }

/* Listes : une ligne = un sujet, une barre de couleur à gauche, le visage du responsable, le texte, les boutons. */
.n-lignes { display: flex; flex-direction: column; }
.n-ligne { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--n-bord-doux); text-decoration: none; color: inherit; }
.n-lignes > .n-ligne:first-child { border-top: 0; }
a.n-ligne:hover { background: var(--n-surface-2); }
.n-ligne-barre { width: 4px; align-self: stretch; border-radius: 4px; background: var(--couleur, var(--n-gris-fort)); flex: none; }
.n-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.n-ligne-texte strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.n-ligne-texte span { font-size: 13px; color: var(--n-doux); line-height: 1.4; }
.n-ligne-texte .n-qui { color: var(--couleur, var(--n-doux)); font-weight: 600; }
.n-ligne-actions { display: flex; gap: 8px; flex: none; align-items: center; }
.n-ligne-actions form { margin: 0; }

/* Fil horodaté (« ce que l'équipe a fait »). */
.n-fil { display: flex; flex-direction: column; }
.n-fil-ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 20px;
  border-top: 1px solid var(--n-bord-doux); font-size: 14px; }
.n-fil > .n-fil-ligne:first-child { border-top: 0; }
.n-fil-heure { font-family: var(--n-chiffres); font-size: 12px; color: var(--n-tres-doux); margin-right: 2px; }
.n-fil-ligne .n-visage { --t: 26px; box-shadow: none; }
.n-fil-texte { min-width: 0; line-height: 1.4; }
.n-fil-texte b { color: var(--couleur); font-weight: 600; }
.n-fil-ligne.ko .n-fil-texte { color: var(--n-mauvais); }
.n-fil-actions { display: flex; gap: 6px; }
.n-fil-actions form { margin: 0; }

/* Ce qui est replié (crédits, lignes moins urgentes). */
.n-replie > summary, .n-plus > summary { cursor: pointer; list-style: none; }
.n-replie > summary::-webkit-details-marker, .n-plus > summary::-webkit-details-marker { display: none; }
.n-replie > summary::after, .n-plus > summary::after { content: "›"; margin-left: auto; color: var(--n-tres-doux); font-size: 18px; transition: transform 150ms ease; }
.n-replie[open] > summary::after, .n-plus[open] > summary::after { transform: rotate(90deg); }
.n-replie:not([open]) > summary { border-bottom: 0; }
.n-plus > summary { display: flex; border-top: 1px solid var(--n-bord-doux); }

/* Grilles de mise en page. */
.n-deux { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }

/* ----------------------------------------------------------------------------------------------- l'équipe en vidéo
   Chacun en pied dans son décor (vidéo « pause » qui respire ; un seul à la fois joue son geste : script de l'Accueil). */
.n-equipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
body.nova .n-equipe .equipe-membre { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; text-align: left;
  border-radius: var(--n-rayon); overflow: hidden; background: var(--n-surface); box-shadow: var(--n-ombre); font: inherit; color: var(--n-encre);
  cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
body.nova .n-equipe .equipe-membre:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--couleur), 0 14px 30px -18px rgba(14,19,36,.5); }
body.nova .n-equipe .equipe-scene { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--fond); margin: 0; border-bottom: 0; }
body.nova .n-equipe .equipe-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.nova .n-equipe .equipe-geste { opacity: 0; transition: opacity 250ms ease; }
body.nova .n-equipe .equipe-geste.joue { opacity: 1; }
body.nova .n-equipe .equipe-point { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #22A447;
  box-shadow: 0 0 0 2px var(--n-surface); }
body.nova .n-equipe .etat-att .equipe-point { background: #E8870C; }
body.nova .n-equipe .etat-ko .equipe-point { background: #D92D20; }
.n-equipe-texte { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px 11px; border-top: 3px solid var(--couleur); }
.n-equipe-texte strong { font-size: 14px; font-weight: 600; }
.n-equipe-texte small { font-size: 12px; color: var(--n-doux); }
.n-equipe-texte .n-statut { font-size: 12px; color: var(--n-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
body.nova .n-equipe .etat-att .n-statut { color: var(--n-attention); font-weight: 600; }
body.nova .n-equipe .etat-ko .n-statut { color: var(--n-mauvais); font-weight: 600; }
body.nova .n-equipe .equipe-membre.fait-la-fete { box-shadow: 0 0 0 3px var(--couleur), 0 0 26px color-mix(in srgb, var(--couleur) 55%, transparent); }
body.nova .fete-annonce { margin: 0; padding: 10px 16px; border-radius: var(--n-rayon-petit); background: var(--couleur); color: #FFFFFF; font-weight: 600; }

/* ----------------------------------------------------------------------------------------------- une décision qui attend
   Le membre en vidéo (il respire) à gauche, ce qu'il propose, les gestes à droite. */
.n-decision { display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; background: var(--n-surface); border-radius: var(--n-rayon);
  box-shadow: var(--n-ombre), inset 4px 0 0 var(--couleur); }
.n-decision.ko { box-shadow: var(--n-ombre), inset 4px 0 0 var(--n-mauvais); }
.n-scene { position: relative; flex: none; width: 84px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--fond, var(--n-gris)); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.n-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-scene:hover { box-shadow: 0 0 0 2px var(--couleur); }
.n-decision-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.n-decision-sur { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--n-doux); }
.n-decision-sur b { color: var(--couleur); }
.n-decision.ko .n-decision-sur { color: var(--n-mauvais); }
.n-decision-texte strong { font-size: 18px; font-weight: 600; line-height: 1.3; }
.n-decision-detail { font-size: 14px; color: var(--n-doux); line-height: 1.45; }
.n-decision-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.n-decision-gestes form { margin: 0; }

/* ----------------------------------------------------------------------------------------------- le tableau des campagnes
   Une ligne par campagne (Triple Whale) : nom, état, 4 chiffres alignés, budget, gestes. */
.n-camps { display: flex; flex-direction: column; }
.n-camp { display: grid; grid-template-columns: minmax(0, 2.6fr) 150px repeat(4, minmax(64px, .8fr)) minmax(80px, .9fr) minmax(170px, auto);
  align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--n-bord-doux); }
.n-camp[hidden] { display: none; }
.n-camp-tete { padding-top: 10px; padding-bottom: 10px; border-top: 0; font-size: 12px; font-weight: 600; color: var(--n-tres-doux); text-transform: uppercase; letter-spacing: .03em; }
.n-camp-tete span:nth-child(n+3):nth-child(-n+7) { text-align: right; }
.n-camp:not(.n-camp-tete):hover { background: var(--n-surface-2); }
.n-camp[data-pause="1"] .n-camp-nom strong, .n-camp[data-pause="1"] .n-camp-val { color: var(--n-doux); }
.n-camp-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: inherit; }
body.nova a.n-camp-nom { color: var(--n-encre); }
.n-camp-nom strong { font-size: 15px; font-weight: 600; }
.n-camp-nom:hover strong { color: var(--n-accent); }
.n-camp-nom span { font-size: 12px; color: var(--n-tres-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-camp-test { display: block; height: 4px; margin-top: 5px; max-width: 220px; border-radius: 4px; background: var(--n-gris); overflow: hidden; }
.n-camp-test i { display: block; height: 100%; background: var(--n-accent); border-radius: 4px; }
.n-camp-etat { display: flex; flex-wrap: wrap; gap: 4px; }
body.nova a.n-etat { text-decoration: none; }
.n-camp-val { font-family: var(--n-chiffres); font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-camp-val small { font-family: var(--n-police); font-weight: 500; color: var(--n-tres-doux); font-size: 11px; }
.n-camp-val.ok { color: var(--n-bon); } .n-camp-val.att { color: var(--n-attention); } .n-camp-val.ko { color: var(--n-mauvais); }
.n-camp-val.vide { color: var(--n-tres-doux); }
.n-camp-budget { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.n-jauge { display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--n-gris); overflow: hidden; }
.n-jauge i { display: block; height: 100%; background: var(--n-accent); }
.n-jauge.att i { background: var(--n-attention); } .n-jauge.ko i { background: var(--n-mauvais); }
.n-camp-gestes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.n-camp-gestes form { margin: 0; }
body.nova .n-camp-gestes .changer-budget[open] { flex-basis: auto; }
body.nova .n-camp-gestes .changer-budget[open] > summary { margin: 0; }
body.nova .n-camp-gestes .changer-budget[open] > .budget-fenetre { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px;
  padding: 14px 16px; border-radius: var(--n-rayon); background: var(--n-surface); box-shadow: var(--n-ombre-haute); text-align: left; }
body.nova .n-camp-gestes .budget-fenetre .aide { margin: 6px 0 0; font-size: 12px; }
.n-camp:has(.changer-budget[open]) { position: relative; z-index: 30; }
.n-pied { margin: -6px 4px 0; font-size: 12px; color: var(--n-tres-doux); }
.n-danger > summary h2 { color: var(--n-mauvais); }

/* ----------------------------------------------------------------------------------------------- les créas (Motion)
   Une grille de vignettes ; sous chacune, la dépense, les ventes, le ROAS, puis 3 chiffres comparés à la moyenne. */
.n-carte > .n-decision { border-radius: 0; box-shadow: inset 4px 0 0 var(--couleur); border-bottom: 1px solid var(--n-bord-doux); }
.n-defile { max-width: 100%; overflow-x: auto; scrollbar-width: none; align-self: flex-start; }
.n-defile::-webkit-scrollbar { display: none; }
.n-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; background: var(--n-surface); border-radius: var(--n-rayon); box-shadow: var(--n-ombre); }
.n-champ { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--n-doux); }
.n-champ select, .n-champ input { min-height: 34px; padding: 0 10px; border: 1px solid var(--n-bord); border-radius: 8px; background: var(--n-surface); color: var(--n-encre); font: inherit; font-size: 13px; }
.n-champ input[type="number"] { width: 90px; }
.n-champ-large { flex: 1; min-width: 220px; } .n-champ-large input { flex: 1; }
.n-champ { white-space: nowrap; }
.n-filtres { position: relative; }
.n-filtres > summary { list-style: none; } .n-filtres > summary::-webkit-details-marker { display: none; }
.n-filtres[open] > .n-filtres-champs { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 14px; border-radius: var(--n-rayon); background: var(--n-surface); box-shadow: var(--n-ombre-haute); min-width: 260px; }
.n-filtres-champs .n-champ { justify-content: space-between; }
body.nova .mot-ecran { max-width: 1260px; margin: 0 auto 16px; border-radius: var(--n-rayon); background: var(--n-surface); box-shadow: var(--n-ombre), inset 4px 0 0 var(--couleur, var(--n-accent));
  font-family: var(--n-police); font-size: 14px; color: var(--n-doux); }
body.nova .mot-ecran b { color: var(--couleur); }
body.nova .mot-ecran { width: 100%; box-sizing: border-box; }
body.nova a.n-ligne { color: var(--n-encre); }
a.n-ligne:hover strong { color: var(--n-accent); }
.n-case { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--n-encre); cursor: pointer; }
.n-case input { width: 16px; height: 16px; accent-color: var(--n-nuit); }
.n-kpis-fins .n-kpi { padding: 10px 16px; }
.n-kpis-fins .n-kpi-valeur { font-size: 19px; }
.n-sous-titre { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--n-doux); }
.n-sous-titre small { font-weight: 500; color: var(--n-tres-doux); }

.n-creas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.n-crea { display: flex; flex-direction: column; background: var(--n-surface); border-radius: var(--n-rayon); box-shadow: var(--n-ombre); overflow: hidden;
  text-decoration: none; color: inherit; transition: transform 160ms ease, box-shadow 160ms ease; }
body.nova a.n-crea { color: var(--n-encre); }
.n-crea:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--n-bord), 0 14px 30px -18px rgba(14,19,36,.45); }
.n-crea.choisie { box-shadow: 0 0 0 2px var(--n-accent); }
.n-crea-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--n-gris); overflow: hidden; color: var(--n-tres-doux); font-size: 13px; cursor: zoom-in; }
.n-crea-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-crea-rang { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(14,19,36,.78); color: #FFFFFF; font-family: var(--n-chiffres); font-size: 12px; }
.n-crea-badge { position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--n-surface); }
.n-crea-badge.ok { color: var(--n-bon); } .n-crea-badge.att { color: var(--n-attention); }
.n-crea-corps { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; min-width: 0; }
.n-crea-corps strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-crea-sous { font-size: 12px; color: var(--n-tres-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-crea-principal { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--n-doux); }
.n-crea-principal b { font-family: var(--n-chiffres); color: var(--n-encre); font-weight: 600; }
.n-crea-metriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 8px; border-top: 1px solid var(--n-bord-doux); }
.n-crea-metriques > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; background: none; box-shadow: none; padding: 0; }
.n-crea-metriques small { font-size: 11px; color: var(--n-tres-doux); }
.n-crea-metriques b { font-family: var(--n-chiffres); font-size: 13px; font-weight: 600; }
.n-crea-metriques em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--n-doux); line-height: 1.25; }
.n-crea-metriques .ok b, .n-crea-metriques .ok em { color: var(--n-bon); }
.n-crea-metriques .att b, .n-crea-metriques .att em { color: var(--n-attention); }
.n-crea-metriques .ko b, .n-crea-metriques .ko em { color: var(--n-mauvais); }

.n-crea-detail-corps { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding: 16px 20px; }
.n-crea-detail-corps .n-crea-media { border-radius: 12px; }
.n-lecture { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(14,19,36,.6); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px; }
.n-crea-detail-texte { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.n-mini-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1px; background: var(--n-surface); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--n-bord-doux); }
.n-mini-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--n-surface-2); }
.n-mini-kpis span { font-size: 11px; color: var(--n-tres-doux); }
.n-mini-kpis b { font-family: var(--n-chiffres); font-size: 15px; font-weight: 600; }
.n-barres { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.n-barres > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.n-barres i { display: block; width: 100%; max-width: 38px; border-radius: 6px 6px 2px 2px; background: var(--n-accent); opacity: .85; }
.n-barres small { font-size: 10px; color: var(--n-tres-doux); text-align: center; line-height: 1.2; }
.n-barres.serre { gap: 3px; }
.n-tableau { display: flex; flex-direction: column; padding: 0 20px 12px; }
.n-tableau > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 7px 0; border-top: 1px solid var(--n-bord-doux); font-family: var(--n-chiffres); font-size: 13px; }
.n-tableau > .n-tableau-tete { font-family: var(--n-police); font-size: 12px; font-weight: 600; color: var(--n-tres-doux); border-top: 0; }
.n-crea-iterer { border-top: 1px solid var(--n-bord-doux); }
.n-crea-iterer form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.n-angles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 20px; padding: 0 0 8px; }
.n-angles .n-sous-titre { padding: 0 20px; }
.n-ligne-fine { padding-top: 9px; padding-bottom: 9px; }

/* ----------------------------------------------------------------------------------------------- les produits (Linear)
   Groupés par « À faire » ; une ligne par produit ; ou des colonnes à glisser. */
.n-prod { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(150px, 1.1fr) 90px 80px 76px minmax(0, 2fr); align-items: center; gap: 12px;
  padding: 11px 20px; border-top: 1px solid var(--n-bord-doux); text-decoration: none; color: inherit; }
body.nova a.n-prod { color: var(--n-encre); }
a.n-prod:hover { background: var(--n-surface-2); }
a.n-prod:hover .n-camp-nom strong { color: var(--n-accent); }
.n-prod-tete { padding-top: 10px; padding-bottom: 10px; border-top: 0; font-size: 12px; font-weight: 600; color: var(--n-tres-doux); text-transform: uppercase; letter-spacing: .03em; }
.n-prod-tete span:nth-child(3), .n-prod-tete span:nth-child(4), .n-prod-tete span:nth-child(5) { text-align: right; }
.n-prod-etats { display: flex; flex-wrap: wrap; gap: 4px; }
.n-prod-faire { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.n-prod-faire b { font-weight: 600; }
.n-prod-faire span { color: var(--n-tres-doux); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-groupe-tete { display: flex; align-items: center; gap: 10px; padding: 14px 20px 8px; border-top: 1px solid var(--n-bord-doux); background: var(--n-surface-2); }
.n-groupe-resume { flex: 1; min-width: 0; font-size: 12px; color: var(--n-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-lien { padding: 0; border: 0; background: none; color: var(--n-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.n-lien:hover { text-decoration: underline; }
.groupe-produits[hidden] { display: none; }
.n-estompe { opacity: .5; }
.n-kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.n-kanban-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--n-rayon); background: var(--n-gris); min-height: 200px; }
.n-kanban-col.survol { box-shadow: inset 0 0 0 2px var(--n-accent); }
.n-kanban-col h2 { margin: 2px 4px 4px; font-size: 13px; font-weight: 600; color: var(--n-doux); text-transform: uppercase; letter-spacing: .03em; }
.n-kanban-col h2 b { font-family: var(--n-chiffres); color: var(--n-tres-doux); margin-left: 4px; }
.n-kanban-col .colonne-cartes { display: flex; flex-direction: column; gap: 8px; }
.n-kanban-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 12px; border-radius: 10px; background: var(--n-surface);
  box-shadow: var(--n-ombre); text-decoration: none; cursor: grab; }
body.nova a.n-kanban-carte { color: var(--n-encre); }
.n-kanban-carte strong { font-size: 14px; font-weight: 600; }
.n-kanban-carte:hover { box-shadow: 0 0 0 1px var(--n-accent); }
.n-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.n-formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--n-doux); }
.n-formulaire input, .n-formulaire select, .n-formulaire textarea { min-height: 40px; padding: 0 12px; font-size: 15px; color: var(--n-encre); }
.n-formulaire .n-large { grid-column: 1 / -1; }

/* ----------------------------------------------------------------------------------------------- la fiche d'un produit
   La frise des 6 étapes, puis un sujet à la fois en onglets. */
.n-frise { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none;
  background: var(--n-surface); border-radius: var(--n-rayon); box-shadow: var(--n-ombre); overflow: hidden; }
.n-frise li { position: relative; min-width: 0; }
.n-frise li + li { border-left: 1px solid var(--n-bord-doux); }
.n-frise a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: var(--n-doux); height: 100%; box-sizing: border-box; }
body.nova .n-frise a { color: var(--n-doux); }
.n-frise a:hover { background: var(--n-surface-2); }
.n-frise i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 12px; font-weight: 700; background: var(--n-gris); color: var(--n-doux); }
.n-frise span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; }
.n-frise small { font-size: 11px; font-weight: 500; color: var(--n-tres-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-frise li.fait i { background: var(--n-bon-fond); color: var(--n-bon); }
.n-frise li.en { box-shadow: inset 0 -3px 0 var(--n-accent); }
.n-frise li.en i { background: var(--n-accent); color: #FFFFFF; }
body.nova .n-frise li.en a { color: var(--n-encre); }
.n-fiche { display: flex; flex-direction: column; gap: 12px; }
.n-panneau[hidden] { display: none; }
.n-pile { display: flex; flex-direction: column; gap: 14px; }
.n-separe { border-top: 1px solid var(--n-bord-doux); }
.n-carte-tete form { margin: 0; }
.n-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; }
.n-liens a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.n-cases { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; margin: 0; }
.n-cases > .n-case:nth-of-type(2), .n-cases > button { grid-column: 1 / -1; justify-self: start; }
.n-cases input[type=url] { min-height: 38px; padding: 0 12px; }
.n-formulaire-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-formulaire .n-large-2 { grid-column: span 2; }
.n-formulaire textarea { padding: 10px 12px; min-height: 96px; }
.n-feuille { width: min(420px, calc(100vw - 32px)); right: 0; left: auto !important; }
.n-entete-actions .n-filtres[open] > .n-filtres-champs { left: auto; right: 0; }
.n-note { display: flex; gap: 10px; margin: 0; }
.n-note input { flex: 1; min-height: 40px; padding: 0 12px; }
.n-fil-simple { grid-template-columns: 52px minmax(0, 1fr); }
.n-fil-simple small { color: var(--n-tres-doux); }
.n-panneau .rangee { padding-left: 20px; padding-right: 20px; }
.n-panneau .n-ligne .n-camp-val { min-width: 84px; }

/* ----------------------------------------------------------------------------------------------- les finances (Stripe, Mercury)
   La cascade du CA au bénéfice, les graphiques en barres, les montants alignés. */
.n-cascade { display: flex; flex-direction: column; padding: 6px 20px 14px; }
.n-cascade-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--n-bord-doux); font-size: 14px; }
.n-cascade-ligne:first-child { border-top: 0; }
.n-cascade-ligne b { font-family: var(--n-chiffres); font-weight: 600; font-variant-numeric: tabular-nums; }
.n-cascade-ligne b.ko { color: var(--n-mauvais); } .n-cascade-ligne b.ok { color: var(--n-bon); background: none; }
.n-cascade-ligne > i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--n-gris); overflow: hidden; }
.n-cascade-ligne > i > i { display: block; height: 100%; background: var(--n-accent); border-radius: 4px; }
.n-cascade-ligne > i.moins > i { background: var(--n-mauvais); opacity: .75; }
.n-cascade-ligne.total { border-top: 2px solid var(--n-encre); font-weight: 600; font-size: 15px; }
.n-graphe { margin: 0 20px 16px; height: 200px; }
body.nova .n-graphe .barre.ca { background: var(--n-accent); border-radius: 4px 4px 1px 1px; }
body.nova .n-graphe .barre.dep { background: #E8870C; border-radius: 4px 4px 1px 1px; }
body.nova .n-graphe .barre.solde { background: var(--n-accent); }
body.nova .n-graphe .barre.sous-seuil { background: var(--n-mauvais); }
body.nova .n-graphe .etiquette { font-family: var(--n-chiffres); font-size: 11px; color: var(--n-tres-doux); }
.n-carte .graphe-valeur { margin: 0; padding-top: 10px; padding-bottom: 0; min-height: 20px; }
.n-legende { display: flex; gap: 12px; font-size: 12px; color: var(--n-doux); }
.n-legende span { display: inline-flex; align-items: center; gap: 5px; }
.n-legende i { width: 9px; height: 9px; border-radius: 3px; }
.n-suite { color: var(--n-tres-doux); display: inline-flex; }
.n-gris-txt { color: var(--n-tres-doux); font-weight: 500; }
.n-ancien > .carte, .n-ancien > details.carte, .n-ancien > section { margin: 0; }
.n-ancien { display: flex; flex-direction: column; gap: 12px; }

/* ----------------------------------------------------------------------------------------------- le SAV (Front, Help Scout)
   Une boîte de réception : la liste à gauche, le message et la réponse préparée à droite. */
.n-boite { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); background: var(--n-surface); border-radius: var(--n-rayon);
  box-shadow: var(--n-ombre); overflow: hidden; min-height: 520px; }
.n-boite-liste { display: flex; flex-direction: column; border-right: 1px solid var(--n-bord-doux); max-height: calc(100vh - 220px); overflow-y: auto; }
.n-boite-ligne { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--n-bord-doux); text-decoration: none; }
body.nova a.n-boite-ligne { color: var(--n-encre); }
.n-boite-ligne:hover { background: var(--n-surface-2); }
.n-boite-ligne.actif { background: color-mix(in srgb, var(--n-accent) 8%, var(--n-surface)); box-shadow: inset 3px 0 0 var(--n-accent); }
.n-boite-haut { display: flex; justify-content: space-between; gap: 8px; }
.n-boite-haut strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-boite-haut small { flex: none; font-size: 12px; color: var(--n-tres-doux); }
.n-boite-sujet { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-boite-extrait { font-size: 12px; color: var(--n-doux); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-boite-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.n-boite-lecture { min-width: 0; }
.n-boite-retour { display: none; }
.n-message { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; }
.n-message-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--n-bord-doux); }
.n-message-tete h2 { margin: 0; font-size: 19px; font-weight: 600; }
.n-bulle { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: var(--n-gris); font-size: 14px; line-height: 1.5; }
.n-bulle p { margin: 3px 0 0; white-space: pre-wrap; }
.n-bulle small { font-size: 11px; font-weight: 600; color: var(--n-tres-doux); }
.n-bulle.nous { margin-left: auto; background: color-mix(in srgb, var(--n-accent) 12%, var(--n-surface)); }
.n-bulle-grande { max-width: 100%; font-size: 15px; }
.n-historique { display: flex; flex-direction: column; gap: 8px; }
.n-historique > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--n-accent); }
.n-historique[open] { display: flex; }
.n-reponse { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; border-radius: var(--n-rayon); box-shadow: 0 0 0 1px var(--n-bord); }
.n-reponse:focus-within { box-shadow: 0 0 0 2px var(--n-accent); }
.n-reponse-qui { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--n-doux); }
.n-reponse-qui b { color: var(--n-encre); }
.n-reponse-qui .n-visage { box-shadow: none; }
body.nova .n-reponse textarea { border: 0; padding: 4px 2px; min-height: 120px; font-size: 15px; line-height: 1.55; resize: vertical; background: transparent; box-shadow: none; }
.n-reponse-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.n-espace { flex: 1; }

/* ----------------------------------------------------------------------------------------------- la fiche d'une campagne
   Le budget et ses gestes ; chaque ensemble de pubs en lignes avec vignette. */
.n-budget { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; }
.n-budget-texte { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.n-budget-texte b { font-size: 20px; font-weight: 600; }
.n-jauge-large { width: 240px; margin-top: 4px; }
.n-pubs { display: flex; flex-direction: column; }
.n-pub { display: grid; grid-template-columns: minmax(0, 2.4fr) 140px repeat(var(--colonnes, 5), minmax(64px, .7fr)) minmax(96px, auto); align-items: center; gap: 12px;
  padding: 10px 20px; border-top: 1px solid var(--n-bord-doux); }
.n-pub-tete { padding-top: 9px; padding-bottom: 9px; font-size: 12px; font-weight: 600; color: var(--n-tres-doux); text-transform: uppercase; letter-spacing: .03em; }
.n-pub-tete span:nth-child(n+3) { text-align: right; }
.n-pub:not(.n-pub-tete):hover { background: var(--n-surface-2); }
.n-pub-nom { display: flex; align-items: center; gap: 10px; min-width: 0; }
.n-pub-nom > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.n-pub-nom strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.n-pub-vignette { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--n-gris); cursor: zoom-in; }
.n-pub-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-pub-vignette i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #FFFFFF;
  background: rgba(14, 19, 36, .35); opacity: 0; transition: opacity 120ms ease; }
.n-pub-vignette:hover i { opacity: 1; }
.n-pub-examen { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.n-refus { font-size: 11px; color: var(--n-mauvais); }

/* ----------------------------------------------------------------------------------------------- les anciennes briques
   Formulaires et encadrés encore partagés avec l'ancienne interface (décisions Zecom, journal, confirmations) :
   habillés comme le reste de la nouvelle. */
body.nova .bouton { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--n-rayon-petit); background: var(--n-gris); color: var(--n-encre);
  font-family: var(--n-police); font-size: 14px; font-weight: 600; box-shadow: none; }
body.nova .bouton:hover { background: var(--n-gris-fort); }
body.nova .bouton.principal, body.nova .bouton.sombre { width: auto; background: var(--n-nuit); color: #FFFFFF; }
body.nova .bouton.bad { background: var(--n-mauvais-fond); color: var(--n-mauvais); }
body.nova .petit-bouton { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { body.nova .bouton.principal, body.nova .bouton.sombre { background: #E8EBF3; color: #0E1324; } }
body.nova .chip { font-family: var(--n-police); font-size: 12px; font-weight: 600; padding: 3px 9px; box-shadow: none; }
body.nova .alerte { border-radius: var(--n-rayon-petit); font-family: var(--n-police); }
body.nova .confirmation { border-radius: var(--n-rayon); box-shadow: var(--n-ombre); background: var(--n-surface); }
body.nova details.refus { position: relative; }
body.nova details.refus[open] > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; padding: 14px 16px;
  border-radius: var(--n-rayon); background: var(--n-surface); box-shadow: var(--n-ombre-haute); display: flex; flex-direction: column; gap: 8px; }
body.nova #journal { border-radius: var(--n-rayon); box-shadow: var(--n-ombre); }

/* ----------------------------------------------------------------------------------------------- le cadre commun */
body.nova .barre-mobile { background: color-mix(in srgb, var(--n-fond) 86%, transparent); border-bottom: 1px solid var(--n-bord-doux); }
body.nova .barre-mobile .logo span { font-family: var(--n-police); font-weight: 700; letter-spacing: .02em; }
body.nova .sous-menu { display: none; }                          /* les onglets de l'écran suffisent */
body.nova main.contenu { padding-top: 28px; }
/* Les écrans pas encore refaits prennent la même largeur que les nouveaux. */
body.nova main.contenu > *:not(script):not(style) { width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* La barre latérale (15/10/2026, Anthony : « le Dock statique finalement, ou mieux ») : toujours visible sur ordinateur, sombre
   (Triple Whale, Linear) ; le logo en haut, les écrans rangés par rubrique, « Réduire » en bas pour ne garder que les icônes. */
@media (min-width: 801px) {
  body.nova { --larg-dock: 228px; padding-left: var(--larg-dock); }
  html.dock-reduit body.nova { --larg-dock: 68px; }
  body.nova .dock-zone { display: none; }
  body.nova .dock { position: fixed; left: 0; top: 0; bottom: 0; right: auto; width: var(--larg-dock); transform: none !important; z-index: 40;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; pointer-events: auto;
    background: var(--n-nuit); border-right: 1px solid rgba(255, 255, 255, .06); transition: width 180ms ease; }
  body.nova .dock-marque { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: #FFFFFF; flex: none; }
  body.nova .dock-marque img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
  body.nova .dock-marque span { font-family: var(--n-police); font-size: 16px; font-weight: 700; letter-spacing: .04em; }
  body.nova .dock-barre { flex: 1; min-height: 0; max-height: none; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    padding: 4px 10px 12px; background: none !important; border: 0; border-radius: 0; box-shadow: none !important; backdrop-filter: none; }
  body.nova .dock-rubrique { display: block; padding: 14px 10px 6px; font-family: var(--n-police); font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: #6F7891; }
  body.nova .dock-separateur { display: none; }
  body.nova .dock-app { --taille: 28px; display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; min-width: 0; min-height: 36px;
    padding: 4px 10px 4px 6px; border-radius: 9px; color: var(--n-nuit-doux); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; }
  body.nova .dock-app:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
  body.nova .dock-app.actif { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--couleur); }
  body.nova .dock-app.actif::after { display: none; }
  body.nova .dock-tuile { width: var(--taille); height: var(--taille); flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: transparent !important; color: inherit !important; box-shadow: none !important; }
  body.nova .dock-app.actif .dock-tuile { background: var(--couleur) !important; color: #FFFFFF !important; }
  body.nova .dock-tuile .icone { width: 18px; height: 18px; stroke-width: 1.9; }
  body.nova .dock-nom { position: static; opacity: 1; transform: none; order: 0; margin: 0; padding: 0; max-width: none; background: none; box-shadow: none;
    font-family: var(--n-police); font-size: 13.5px; font-weight: 500; color: inherit !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nova .dock-app.actif .dock-nom { font-weight: 600; }
  body.nova .dock-app .pastille-rouge { position: static; margin-left: auto; }
  body.nova .dock-reduire { flex: none; display: flex; align-items: center; gap: 10px; margin: 6px 10px 14px; padding: 8px 10px; border: 0; border-radius: 9px;
    background: none; color: #6F7891; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  body.nova .dock-reduire:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
  body.nova .dock-reduire .icone { transform: rotate(180deg); transition: transform 180ms ease; flex: none; }
  /* Réduite : les icônes seules, le nom au survol (title). */
  html.dock-reduit body.nova .dock-marque span, html.dock-reduit body.nova .dock-nom, html.dock-reduit body.nova .dock-reduire span { display: none; }
  html.dock-reduit body.nova .dock-marque { justify-content: center; padding-left: 0; padding-right: 0; }
  html.dock-reduit body.nova .dock-rubrique { font-size: 0; padding: 8px 0 4px; }
  html.dock-reduit body.nova .dock-rubrique::before { content: ""; display: block; height: 1px; margin: 0 8px; background: rgba(255, 255, 255, .08); }
  html.dock-reduit body.nova .dock-barre { padding-left: 8px; padding-right: 8px; }
  html.dock-reduit body.nova .dock-app { justify-content: center; padding: 4px; position: relative; }
  html.dock-reduit body.nova .dock-app .pastille-rouge { position: absolute; top: 0; right: 2px; margin: 0; }
  html.dock-reduit body.nova .dock-reduire { justify-content: center; }
  html.dock-reduit body.nova .dock-reduire .icone { transform: none; }
  /* Le contenu, la barre du haut et la barre de l'équipe se calent à droite de la barre latérale. */
  body.nova .barre-mobile .logo { display: none; }
  body.nova .barre-ia { left: var(--larg-dock); width: min(640px, calc(100% - var(--larg-dock) - 200px)); }
  /* La fenêtre de l'équipe IA s'ouvre juste au-dessus de la barre d'écriture, centrée comme elle à droite de la barre latérale. */
  body.nova .guide-feuille.tiroir { left: var(--larg-dock); right: 0; margin: 0 auto; width: min(640px, calc(100vw - var(--larg-dock) - 200px)); }
}

/* Les onglets du téléphone, en sombre. */
@media (max-width: 800px) {
  body.nova .onglets { background: var(--n-nuit); box-shadow: 0 14px 30px -14px rgba(14, 19, 36, .6); border: 0; }
  body.nova .onglets a { color: var(--n-nuit-doux); }
  body.nova .onglets a.actif { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
  body.nova .onglets a.actif .onglet-icone { color: #FFFFFF; }
}

/* La barre de l'équipe : un champ net, façon palette de commandes (Linear, Stripe). */
body.nova .barre-ia { border-radius: var(--n-rayon); background: var(--n-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 16px 36px -16px rgba(14, 19, 36, .4), 0 0 0 1px var(--n-bord); }
body.nova .barre-ia:focus-within { box-shadow: 0 16px 36px -16px rgba(14, 19, 36, .4), 0 0 0 2px var(--couleur); }
body.nova .barre-ia input { font-family: var(--n-police); font-size: 15px; }
body.nova .barre-ia-envoyer { border-radius: var(--n-rayon-petit); }
body.nova .barre-ia-visage { width: 36px; height: 36px; }
body.nova .barre-ia-qui { width: 36px; height: 36px; }
body.nova .barre-ia-choix { border-radius: var(--n-rayon); box-shadow: var(--n-ombre-haute); background: var(--n-surface); }
body.nova .guide-bouton { background: var(--n-nuit); box-shadow: 0 14px 30px -12px rgba(14, 19, 36, .55); border-radius: 16px; }
@media (prefers-color-scheme: dark) { body.nova .guide-bouton { background: #262C3D; } }
body.nova .guide-feuille { border-radius: var(--n-rayon); box-shadow: var(--n-ombre-haute); background: var(--n-surface); border: 0; font-family: var(--n-police); }
body.nova .guide-feuille.tiroir { border-radius: var(--n-rayon); }

/* ----------------------------------------------------------------------------------------------- téléphone */
@media (max-width: 1100px) {
  .n-deux { grid-template-columns: minmax(0, 1fr); }
  .n-equipe { gap: 8px; }
  .n-equipe-texte { padding: 8px 9px 9px; }
}
@media (max-width: 800px) {
  .n-equipe { grid-template-columns: repeat(7, 116px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .n-equipe::-webkit-scrollbar { display: none; }
  body.nova .n-equipe .equipe-membre { scroll-snap-align: start; }
  body.nova main.contenu { padding-top: 12px; }
  .n-page { gap: 16px; }
  .n-entete h1 { font-size: 22px; }
  .n-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-kpi { padding: 12px 14px; }
  .n-kpi:nth-child(3) { border-left: 0; }
  .n-kpi:nth-child(n+3) { border-top: 1px solid var(--n-bord-doux); }
  .n-kpi-valeur { font-size: 21px; }
  .n-ligne { flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px; }
  .n-ligne-texte { flex-basis: calc(100% - 64px); }
  .n-ligne-actions { flex-basis: 100%; }
  .n-ligne-actions .n-bouton, .n-ligne-actions form { flex: 1; }
  .n-ligne-actions form .n-bouton { width: 100%; }
  .n-ligne-barre { display: none; }
  .n-fil-ligne { padding: 10px 16px; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .n-fil-actions { grid-column: 2; }
  .n-courbe { height: 18px; }
  .n-kpi { gap: 2px; }
  .n-equipe { grid-template-columns: repeat(7, 100px); }
  body.nova .n-equipe .equipe-scene { aspect-ratio: 4 / 5; }
  .n-equipe-texte .n-statut { display: none; }
  .n-carte-tete, .n-carte-corps { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1100px) {
  .n-camp { grid-template-columns: minmax(0, 1fr) repeat(5, minmax(56px, auto)); grid-template-areas: "nom etat etat etat etat etat" "nom v1 v2 v3 v4 v5" "gestes gestes gestes gestes gestes gestes"; row-gap: 6px; }
  .n-camp-tete { display: none; }
  .n-camp > :nth-child(3) { grid-area: v1; } .n-camp > :nth-child(4) { grid-area: v2; } .n-camp > :nth-child(5) { grid-area: v3; }
  .n-camp > :nth-child(6) { grid-area: v4; } .n-camp > :nth-child(7) { grid-area: v5; }
  .n-camp-nom { grid-area: nom; } .n-camp-etat { grid-area: etat; justify-content: flex-end; }
  .n-camp-val::before { content: attr(data-titre); display: block; font-family: var(--n-police); font-size: 11px; font-weight: 500; color: var(--n-tres-doux); }
  .n-camp-gestes { grid-area: gestes; justify-content: flex-start; }
  .n-camp-gestes:empty { display: none; }
  .n-camp-val { text-align: left; }
  body.nova .n-camp .n-camp-budget { align-items: flex-start; }
  body.nova .n-camp-gestes .changer-budget { flex: none; order: 0; }
  body.nova .n-camp-gestes .changer-budget > summary { width: auto; }
}
@media (max-width: 800px) {
  .n-decision { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .n-scene { width: 64px; }
  .n-decision-texte { flex-basis: calc(100% - 80px); }
  .n-decision-texte strong { font-size: 16px; }
  .n-decision-gestes { max-width: none; flex-basis: 100%; justify-content: stretch; }
  .n-decision-gestes > * { flex: 1; }
  .n-decision-gestes .bouton, .n-decision-gestes .n-bouton, .n-decision-gestes form button { width: 100%; }
  .n-camp { grid-template-columns: 1.35fr .75fr .8fr 1fr .85fr; column-gap: 8px; grid-template-areas: "nom nom nom etat etat" "v1 v2 v3 v4 v5" "gestes gestes gestes gestes gestes"; padding: 12px 16px; }
  .n-camp-val { font-size: 13px; }
  .n-camp-val::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .n-kpis .n-kpi:nth-child(5):last-child { grid-column: span 2; border-top: 1px solid var(--n-bord-doux); }
  .n-entete-actions { width: 100%; }
  .n-entete-actions .n-segment { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  body.nova .n-camp-gestes .changer-budget[open] > .budget-fenetre { left: 0; right: auto; width: min(320px, calc(100vw - 48px)); }
}
@media (max-width: 800px) {
  .n-creas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .n-kpis-fins { display: flex; overflow-x: auto; scrollbar-width: none; }
  .n-kpis-fins .n-kpi { flex: 0 0 auto; min-width: 104px; border-top: 0 !important; border-left: 1px solid var(--n-bord-doux); }
  .n-kpis-fins .n-kpi:first-child { border-left: 0; }
  .n-kpis-fins .n-kpi-valeur { font-size: 17px; }
  .n-filtres[open] > .n-filtres-champs { left: auto; right: 0; }
  .n-crea-corps { padding: 8px 10px 10px; }
  .n-crea-principal { flex-wrap: wrap; }
  .n-crea-detail-corps { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .n-crea-detail-corps .n-crea-media { max-width: 260px; }
  .n-outils { gap: 8px 10px; }
  .n-tableau { padding: 0 16px 12px; overflow-x: auto; }
  .n-tableau > div { min-width: 520px; }
}
@media (max-width: 1100px) {
  .n-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "nom nom nom etats" "v1 v2 v3 faire"; row-gap: 6px; }
  .n-prod-tete { display: none; }
  .n-prod > :nth-child(1) { grid-area: nom; } .n-prod > :nth-child(2) { grid-area: etats; justify-content: flex-end; }
  .n-prod > :nth-child(3) { grid-area: v1; } .n-prod > :nth-child(4) { grid-area: v2; } .n-prod > :nth-child(5) { grid-area: v3; }
  .n-prod > :nth-child(6) { grid-area: faire; }
  .n-prod .n-camp-val { text-align: left; }
  .n-prod .n-camp-val::before, .n-prod-faire::before { content: attr(data-titre); display: block; font-family: var(--n-police); font-size: 11px; font-weight: 500; color: var(--n-tres-doux); }
}
@media (max-width: 800px) {
  .n-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "nom nom etats" "v1 v2 v3" "faire faire faire"; padding: 12px 16px; }
  .n-prod-faire::before { display: none !important; }
  .n-groupe-tete { padding: 12px 16px 8px; }
  .n-formulaire { grid-template-columns: minmax(0, 1fr); }
  .n-kanban { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; }
  .n-kanban-col { scroll-snap-align: start; }
}
@media (max-width: 800px) {
  .n-frise { display: flex; overflow-x: auto; scrollbar-width: none; }
  .n-frise li { flex: 0 0 auto; }
  .n-frise small { display: none; }
  .n-formulaire-3 { grid-template-columns: minmax(0, 1fr); }
  .n-formulaire .n-large-2 { grid-column: auto; }
  .n-cases { grid-template-columns: minmax(0, 1fr); }
  .n-panneau .n-ligne { flex-wrap: wrap; }
  .n-panneau .rangee { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 800px) {
  .n-boite { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .n-boite-liste { border-right: 0; max-height: none; }
  .n-boite.lecture-ouverte .n-boite-liste { display: none; }
  .n-boite:not(.lecture-ouverte) .n-boite-lecture { display: none; }
  .n-boite-retour { display: inline-flex; margin: 12px 16px 0; font-weight: 600; text-decoration: none; }
  .n-message { padding: 12px 16px 16px; }
  .n-bulle { max-width: 92%; }
  .n-espace { display: none; }
}
@media (max-width: 1100px) {
  .n-pub { grid-template-columns: repeat(var(--colonnes, 5), minmax(0, 1fr)); row-gap: 8px; }
  .n-pub-tete { display: none; }
  .n-pub-nom { grid-column: 1 / -1; }
  .n-pub-examen { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .n-pub .n-camp-val { text-align: left; }
  .n-pub .n-camp-val::before { content: attr(data-titre); display: block; font-family: var(--n-police); font-size: 11px; font-weight: 500; color: var(--n-tres-doux); }
  .n-pub .n-camp-gestes { grid-column: 1 / -1; justify-content: flex-start; }
  .n-pub .n-camp-gestes:empty { display: none; }
}
@media (max-width: 800px) {
  .n-pub { padding: 12px 16px; }
  .n-pub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-budget { padding: 12px 16px; }
  .n-jauge-large { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .n-bouton, body.nova .n-equipe .equipe-membre { transition: none; }
}

/* ----------------------------------------------------------------------------------------------- les discussions
   15/10/2026 (Anthony : « bleu sur bleu, on ne voit plus les liens, les couleurs pas ouf ») : mes messages en encre sombre,
   ceux des autres en gris clair ; la couleur du manager seulement sur son nom ; un lien garde la couleur de son texte. */
body.nova .bulle-texte a, body.nova .guide-texte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.nova .moi .bulle-texte, body.nova .guide-message.de-moi .guide-texte { background: var(--n-nuit); color: #FFFFFF; }
body.nova .autre .bulle-texte, body.nova .guide-message.du-guide .guide-texte, body.nova .guide-message.du-manager .guide-texte,
body.nova .guide-message.equipe .guide-texte { background: var(--n-gris); color: var(--n-encre); }
@media (prefers-color-scheme: dark) {
  body.nova .moi .bulle-texte, body.nova .guide-message.de-moi .guide-texte { background: #3B4A75; }
}
body.nova .guide-manager { color: var(--couleur) !important; }
body.nova .guide-aller { background: var(--n-surface); color: var(--n-encre); box-shadow: 0 0 0 1px var(--n-bord); font-family: var(--n-police); font-weight: 600; }
body.nova .guide-aller:hover { background: var(--n-surface-2); box-shadow: 0 0 0 1px var(--n-encre); }
body.nova .guide-suggestions button, body.nova .guide-suggestion { background: var(--n-surface); color: var(--n-encre); box-shadow: 0 0 0 1px var(--n-bord); }
body.nova .bulle-lien { background: var(--n-surface); box-shadow: 0 0 0 1px var(--n-bord); color: var(--n-encre); }
body.nova .bouton-envoyer, body.nova .guide-envoyer { background: var(--n-nuit); }

/* Le panneau des messages entre humains : enfant de <html>, hors du body.nova (les couleurs sont donc écrites ici). */
@media (min-width: 801px) {
  .panneau-humains { position: fixed; right: 20px; bottom: 92px; z-index: 47; width: 400px; height: min(620px, calc(100vh - 140px)); display: flex;
    flex-direction: column; border-radius: 14px; overflow: hidden; background: #FFFFFF;
    box-shadow: 0 24px 60px -20px rgba(14, 19, 36, .45), 0 0 0 1px #E3E6EC; font-family: "IBM Plex Sans", system-ui, sans-serif; }
  .panneau-humains[hidden] { display: none; }
  .panneau-humains > header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: #0E1324; color: #FFFFFF; flex: none; }
  .panneau-humains > header strong { font-size: 14px; font-weight: 600; }
  .panneau-humains > header span { flex: 1; font-size: 12px; color: #A9B1C6; }
  .panneau-humains > header a, .panneau-humains > header button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: #A9B1C6; font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer; }
  .panneau-humains > header a:hover, .panneau-humains > header button:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
  .panneau-humains iframe { flex: 1; width: 100%; border: 0; background: #F6F7F9; }
}
@media (min-width: 801px) and (prefers-color-scheme: dark) {
  .panneau-humains { background: #141824; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px #262C3D; }
  .panneau-humains iframe { background: #0B0D14; }
}

/* La page seule chargée dans le panneau : la boîte des messages remplit le cadre. */
body.messages-seul { margin: 0; }
body.messages-seul main.seul { padding: 0 !important; margin: 0; max-width: none; width: 100%; height: 100vh; min-height: 0; display: block; }
body.messages-seul .boite-messages { display: flex; flex-direction: column; height: 100vh !important; min-height: 0 !important; margin: 0; gap: 0; }
body.messages-seul .boite-messages.fil-ouvert .fil { height: auto !important; min-height: 0 !important; }
body.messages-seul .boite-messages > .carte { border-radius: 0; box-shadow: none; margin: 0; padding: 0; }
body.messages-seul .liste-conversations { flex: 1; overflow-y: auto; max-height: none; position: static; }
body.messages-seul .boite-messages.fil-ouvert .liste-conversations { display: none; }
body.messages-seul .boite-messages:not(.fil-ouvert) .fil { display: none; }
body.messages-seul .fil { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.messages-seul .fil-tete { flex: none; padding: 8px 12px; }
body.messages-seul .retour-messages { display: inline-flex; }
body.messages-seul .fil-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
body.messages-seul .fil-saisie { flex: none; position: static; padding: 8px 10px; }
body.messages-seul .bulle-message { max-width: 84%; }

.n-lien-carte { display: block; text-decoration: none; color: inherit; }
body.nova a.n-lien-carte { color: var(--n-encre); }
.n-lien-carte:hover { box-shadow: 0 0 0 1px var(--n-accent); }
.n-lien-carte .n-carte-tete { border-bottom: 0; }

/* Planning sans le bloc de Plani (15/10/2026) : la grille en pleine largeur ; Plani répond dans la barre du bas. */
body.nova .plan-page.plan-sans-plani { grid-template-columns: minmax(0, 1fr); }
body.nova .grille-cadre { border-radius: var(--n-rayon); box-shadow: var(--n-ombre); background: var(--n-surface); }

/* Réseaux sociaux (15/10/2026, façon Later / Buffer) : un post se voit comme sur Instagram, images à gauche, légende à droite. */
.n-post { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); }
.n-post-media { background: var(--n-gris); min-height: 240px; }
.n-post-attente { padding: 24px; color: var(--n-doux); font-size: 14px; }
.n-post-galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: thin; }
.n-post-galerie a { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.n-post-galerie img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.n-post-galerie b { position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(14, 19, 36, .7); color: #FFFFFF; font-size: 12px; }
.n-post-texte { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; min-width: 0; }
.n-post-texte h2, .n-idee h2 { margin: 0; font-size: 17px; font-weight: 600; }
.n-legende-post { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; color: var(--n-encre); max-height: 260px; overflow-y: auto; }
.n-idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.n-slides { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.n-slides li { display: flex; flex-direction: column; gap: 1px; }
.n-slides span { font-size: 12px; color: var(--n-doux); }
.n-cocher { display: flex; flex-wrap: wrap; gap: 8px 14px; border: 0; padding: 0; margin: 0; }
.n-cocher legend { width: 100%; font-size: 13px; color: var(--n-doux); margin-bottom: 4px; }
.n-texte-long { font-size: 14px; line-height: 1.6; }
@media (max-width: 800px) {
  .n-post { grid-template-columns: minmax(0, 1fr); }
  .n-idees { grid-template-columns: minmax(0, 1fr); }
}

.n-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .n-trois { grid-template-columns: minmax(0, 1fr); } }
.n-fin-lot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: var(--n-doux); margin: 0; }
body.nova #rapport-controle { width: 100%; min-height: 220px; padding: 10px 12px; font-family: var(--n-chiffres); font-size: 12px; box-sizing: border-box; }

/* Messages, écran complet (15/10/2026) : conversations et fil dans une seule carte, la conversation ouverte en encre. */
.n-messages .boite-messages { gap: 0; margin: 0; background: var(--n-surface); border-radius: var(--n-rayon); box-shadow: var(--n-ombre); overflow: hidden; }
.n-messages .boite-messages > .carte { border-radius: 0; box-shadow: none; background: transparent; }
.n-messages .liste-conversations { border-right: 1px solid var(--n-bord-doux); padding: 8px; }
body.nova .conversation { border-radius: 10px; }
body.nova .conversation:hover { background: var(--n-surface-2); }
body.nova .conversation.actif { background: var(--n-nuit); color: #FFFFFF; }
body.nova .conversation.actif .non-lus { color: var(--n-nuit); }
@media (max-width: 800px) { .n-messages .liste-conversations { border-right: 0; } }

/* Produits en cours : une carte par produit, ses étapes en frise verticale. */
.n-parcours { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.n-parcours-carte { display: flex; flex-direction: column; text-decoration: none; }
body.nova a.n-parcours-carte { color: var(--n-encre); }
.n-parcours-carte:hover { box-shadow: 0 0 0 1px var(--n-accent); }
.n-parcours-carte .n-carte-tete h2 { font-size: 15px; }
.n-parcours-etapes { list-style: none; margin: 0; padding: 12px 20px 4px; display: flex; flex-direction: column; gap: 10px; }
.n-parcours-etapes li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--n-doux); }
.n-parcours-etapes i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 700; background: var(--n-gris); }
.n-parcours-etapes li > span { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.n-parcours-etapes b { font-weight: 500; }
.n-parcours-etapes small { font-size: 12px; color: var(--n-accent); font-weight: 600; }
.n-parcours-etapes li.fait i { background: var(--n-bon-fond); color: var(--n-bon); }
.n-parcours-etapes li.fait b { text-decoration: line-through; color: var(--n-tres-doux); }
.n-parcours-etapes li.en_cours { color: var(--n-encre); }
.n-parcours-etapes li.en_cours i { background: var(--n-accent); color: #FFFFFF; }
.n-parcours-etapes li.en_cours b { font-weight: 600; }

/* Réglages et pages d'admin (15/10/2026) : plus étroites, une ligne par réglage avec son icône. */
.n-etroite { max-width: 880px; }
.n-reglage-icone { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-gris); color: var(--n-encre); }
.n-decision input[type=text] { margin-top: 6px; width: 100%; min-height: 38px; padding: 0 10px; font-family: var(--n-chiffres); font-size: 13px; }
/* Les écrans d'admin pas refaits (profil, boutiques, connexions, coffre, notifications, idées) : même largeur que Réglages. */
body.nova main.contenu:has(.profil-form, .coffre, [aria-label="Connexions"]) > * { max-width: 880px; }
body.nova a.conversation { color: var(--n-encre); }
body.nova a.conversation.actif { color: #FFFFFF; }
.n-parcours-etapes li.fait b.n-sans-barre { text-decoration: none; }

/* Le bouton des messages entre humains reste là quand la fenêtre de l'équipe IA est ouverte (15/10/2026) : ce sont deux
   conversations séparées depuis que les humains ont leur panneau. */
html.guide-ouvert body.nova .guide-bouton { opacity: 1; pointer-events: auto; transform: none; }
.n-auto { margin: 0; }