/* Chantier de la refonte par catégories (lot 1, 16/10) : s'ajoute à ../cc/cc.css, n'en retire rien. */

/* ordinateur : la barre de côté porte toutes les pages, en groupes ; plus compacte que celle du Command Center actuel */
/* la liste défile seule : l'état de la machine reste en bas de l'écran (relecture du 16/10 : 1 219 px de barre pour 768) */
.chantier .cote { overflow: hidden; gap: 18px; }
.chantier .nav-tel { display: none; }
.chantier .nav-cat { gap: 2px; overflow-y: auto; min-height: 0; flex: 1 1 0; }
.chantier .nav-cat a { min-height: 38px; padding: 0 12px; font-size: 14.5px; border-radius: 11px; }
.chantier .nav-cat svg { width: 19px; height: 19px; }
.chantier .nav-cat .groupe { margin: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B1B4BC; }
.chantier .nav-cat .reglages { margin-top: 12px; }

/* page d'une catégorie (téléphone surtout) */
.cat-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cat-liste a.carte { display: block; text-decoration: none; color: inherit; }
.cat-liste a.carte:hover { outline: 2px solid var(--nuit-2); }
.cat-liste .cat-titre { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cat-liste .cat-titre b { font-size: 17px; }
.cat-liste p { margin: 6px 0 0; }
.pastille-lot { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #EDF0FB; color: #50555E; white-space: nowrap; }

/* charte : nuancier */
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nuance { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); background: #FFFFFF; }
.nuance i { display: block; height: 54px; }
.nuance span { display: block; padding: 6px 10px 8px; font-size: 13px; }
.nuance code { font-size: 12px; color: #545964; }

/* outils : demandes à coller dans Claude Code */
.demande { background: #FAF9F6; border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }

@media (max-width: 820px) {
  .chantier .nav-cat { display: none; }
  .chantier .nav-tel { display: flex; }
  .chantier .cote { overflow: visible; }
  /* au téléphone, la marque est cachée : un repère dit qu'on est dans le chantier (les gestes écrivent en production) */
  body.chantier #application::before { content: 'Chantier'; position: fixed; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 31;
    font: 600 11px/1 var(--texte); letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; background: #50555E; color: #FFFFFF; pointer-events: none; }
}
.apercu-email { background: #FAF9F6; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 10px; }

/* référentiel : légende, fiche d'une offre colorée par sa maturité (David, 17/10) */
.legende-ref { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 14px; font-size: 13.5px; }
.offres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 18px; }
a.offre-carte { display: block; text-decoration: none; color: inherit; }
a.offre-carte:hover, a.offre-carte:focus-visible { outline: 2px solid var(--nuit-2, #50555E); }
.offre-carte { border-top: 6px solid #BEC1C7; background: linear-gradient(#F6F4F0, var(--carte) 110px); }
.offre-carte.mat-prete { border-top-color: var(--vert); background: linear-gradient(var(--vert-pale), var(--carte) 110px); }
.offre-carte.mat-tendance { border-top-color: var(--orange); background: linear-gradient(var(--orange-pale), var(--carte) 110px); }
.offre-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.offre-tete b { font-size: 17px; }
.offre-promesse { margin: 8px 0 10px; }
.offre-bloc { display: grid; grid-template-columns: 92px 1fr; gap: 8px; margin: 8px 0; font-size: 14px; overflow-wrap: anywhere; }
.offre-bloc .etiq { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.fiche-bloc { margin: 10px 0; }
.fiche-bloc h3 { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--muet); }
.fiche-bloc p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .offre-bloc { grid-template-columns: 1fr; gap: 2px; } }

/* tons du référentiel (18/10) : un play en test en bleu, en hypothèse en jaune ; maturité de l'offre d'un play en un point */
.pill.ton-bleu { background: #E3E8FE; color: #2A43B8; }
.pill.ton-jaune { background: #FBEDC4; color: #5A4300; }
.point-mat { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #BEC1C7; }
.point-mat.mat-prete { background: var(--vert); }
.point-mat.mat-tendance { background: var(--orange); }
.explication-ref p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- Telvika (David, 18/10 : « tout dans ce nouveau command center doit
   être au nom et aux couleurs de Telvika ») : charte v0.2, docs/telvika/charte-graphique-v0.2/. La feuille de base est
   cc-telvika.css, tirée de ../cc/cc.css par scripts/chantier_telvika.py. */
.marque-telvika { flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 10px 0; }
.logo-telvika { display: block; width: 156px; height: auto; color: #F1F2F6; }   /* logo v3 avec sa signature (22/10) : 156 px de large pour que « Built for outcomes. » se lise */
.marque-telvika small { font: 500 11px/1.2 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #9DA3B1; }
.connexion .logo-telvika { color: #0C0E14; }
.connexion .marque-telvika small { color: #545964; }
.chantier .cote { background: #07080C; color: #9DA3B1; }
.chantier .nav a { color: #C9CCD4; }
.chantier .nav a:hover { background: #141722; color: #FFFFFF; }
.chantier .nav a.actif { background: #F3F1EC; color: #0C0E14; }
.chantier .nav-cat .groupe { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 500; color: #8F94A0; }
.chantier .etat-machine { background: #141722; color: #9DA3B1; }
/* titres serrés (charte : Inter Tight 600, approche négative), étiquettes en JetBrains Mono capitales */
.chantier h1, .chantier h2, .chantier h3 { font-weight: 600; letter-spacing: -.02em; }
.chantier h1 { letter-spacing: -.03em; }
.chantier .surtitre, .chantier .offre-bloc .etiq { font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.chantier code, .chantier .demande { font-family: "JetBrains Mono", Consolas, monospace; }
/* un seul accent, le bleu : les boutons principaux et le focus */
.chantier .bouton.principal { background: #4766F5; border-color: #4766F5; color: #FFFFFF; }
.chantier .bouton.principal:hover { background: #3D5BE8; border-color: #3D5BE8; }
.chantier :focus-visible { outline: 2px solid #3550D6; outline-offset: 3px; }
.chantier .cote :focus-visible { outline-color: #93A8FF; }

/* page Charte de Telvika */
.charte-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.charte-logos .petit { grid-column: 1 / -1; }
.charte-logo { margin: 0; border: 1px solid #E4E0D8; border-radius: 14px; padding: 22px 18px 12px; background: #F3F1EC; display: flex; flex-direction: column; gap: 12px; }
.charte-logo.sombre { background: #07080C; border-color: #07080C; color: #9DA3B1; }
.charte-logo.sombre a { color: #93A8FF; }
.charte-logo img { width: 100%; max-width: 300px; height: auto; display: block; }
.charte-logo figcaption { font-size: 13px; }
.charte-famille { margin: 14px 0 8px; font-size: 14px; }
.charte-polices .ex-titre { font: 600 30px/1.08 "Inter Tight", Arial, sans-serif; letter-spacing: -.035em; margin: 4px 0 6px; }
.charte-polices .ex-titre em { font: italic 400 1.06em "Instrument Serif", "Times New Roman", serif; letter-spacing: 0; color: #3550D6; }
.charte-polices .ex-corps { font: 400 17px/1.5 "Inter Tight", Arial, sans-serif; margin: 14px 0 4px; max-width: 65ch; }
.charte-polices .ex-mono { font: 500 12px/1.4 "JetBrains Mono", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 4px; }

/* au téléphone, le résumé d'une carte dépliable (cas, modèle, play) passe à la ligne au lieu de déborder (18/10) */
.chantier details.carte > summary { flex-wrap: wrap; }
.chantier details.carte > summary > * { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- typologies d'offres (David, 18/10 au soir, 0164) : « Fais une
   couleur par typologie, et à l'intérieur on garde le code couleur vert/orange/gris ». Quatre teintes loin du vert, de l'orangé et
   du gris de la maturité ; --typo pour les traits et les étiquettes, --typo-fonce pour le texte et les fonds sombres (lisible en
   blanc dessus), --typo-pale pour les fonds clairs. */
.typo-audit { --typo: #2D4FD6; --typo-fonce: #1E3AA8; --typo-pale: #E9EDFC; }
.typo-sur_mesure { --typo: #7A42A8; --typo-fonce: #5A2D80; --typo-pale: #F2EBF8; }
.typo-pilotage { --typo: #0F7590; --typo-fonce: #0B566A; --typo-pale: #E2F2F6; }
.typo-formation { --typo: #B5336A; --typo-fonce: #87224E; --typo-pale: #FBE9F0; }
.typo-autre { --typo: #6B707B; --typo-fonce: #3A3F4A; --typo-pale: #EFEDE8; }

/* Offres : quatre carrés */
.typo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.typo-carre, .typo-bande { border-radius: 18px; padding: 16px; background: var(--typo-pale); border: 1px solid color-mix(in srgb, var(--typo) 22%, transparent); min-width: 0; }
.typo-bande { margin-bottom: 18px; }
.typo-tete { border-left: 4px solid var(--typo); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.typo-tete h2 { margin: 2px 0 4px; font-size: 22px; color: var(--typo-fonce); }
.typo-tete p { margin: 0; font-size: 14px; color: var(--encre-2); }
.typo-etiq { font: 500 11px/1.2 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--typo-fonce); }
.typo-offres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* une offre par ligne dans chaque carré (David, 19/10) */
.offre-mini { background: var(--carte); border-radius: 12px; padding: 12px 14px; border: 1px solid #E4E0D8; border-left: 6px solid #BEC1C7; min-width: 0; }
.offre-mini.mat-prete { border-left-color: var(--vert); }
.offre-mini.mat-tendance { border-left-color: var(--orange); }
.offre-mini .offre-tete a { color: var(--encre); text-decoration: none; }
.offre-mini .offre-tete a:hover b, .offre-mini .offre-tete a:focus-visible b { text-decoration: underline; }
.offre-taille { display: inline-block; margin: 6px 0 2px; font: 500 12px/1.3 "JetBrains Mono", Consolas, monospace; color: var(--typo-fonce, #3A3F4A); background: var(--typo-pale, #EFEDE8); padding: 2px 8px; border-radius: 999px; }
.offre-ligne { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; margin: 7px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.offre-ligne .etiq { font: 500 10.5px/1.6 "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.cas-lien { color: var(--typo-fonce); font-weight: 600; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--typo) 45%, transparent); }
.cas-lien:hover, .cas-lien:focus-visible { border-bottom-color: var(--typo); }
@media (max-width: 900px) { .typo-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .offre-ligne { grid-template-columns: 1fr; gap: 1px; } .typo-carre, .typo-bande { padding: 12px; } }

/* Plays : un tableau, une ligne par play, bordée à la couleur de sa typologie */
.plays-table { display: grid; gap: 8px; margin-bottom: 14px; }
.pt-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px;
  background: var(--carte); border-radius: 12px; padding: 12px 14px; border: 1px solid #E4E0D8; border-left: 6px solid var(--typo, #BEC1C7); font-size: 14px; }
.pt-ligne > div { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 3px; }
.pt-ligne.pt-tete { background: transparent; border: 0; padding: 0 14px 0 20px; font: 500 11px/1.2 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muet); }
.pt-offre a { color: var(--typo-fonce); font-weight: 700; text-decoration: none; }
.pt-offre a:hover, .pt-offre a:focus-visible { text-decoration: underline; }
.pt-ligne small { font-size: 12.5px; line-height: 1.35; }
.pt-taille { color: var(--typo-fonce); font-weight: 600; }
.pt-etiq { display: none; }
@media (max-width: 1200px) {
  .pt-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-ligne.pt-tete { display: none; }
  .pt-etiq { display: block; font: 500 10.5px/1.4 "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
}
@media (max-width: 560px) { .pt-ligne { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Cas clients : des récits, un bandeau sombre à la couleur de la typologie qui porte les chiffres en grand, le texte à côté
   (différents des carrés des offres et du tableau des plays) */
.cas-liste { display: grid; gap: 22px; margin-bottom: 20px; }
.cas-recit { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: var(--carte);
  box-shadow: 0 1px 2px rgba(12, 14, 20, .06), 0 10px 30px -18px rgba(12, 14, 20, .35); scroll-margin-top: 16px; }
.cas-recit.cible { outline: 3px solid var(--typo); outline-offset: 3px; }
.cas-bandeau { background: var(--typo-fonce); color: #FFFFFF; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; position: relative;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 18px 18px; }
.cas-typo { font: 500 11px/1.3 "JetBrains Mono", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cas-chiffres { display: flex; flex-direction: column; gap: 14px; }
.cas-chiffre b { display: block; font: 600 34px/1.02 "Inter Tight", Arial, sans-serif; letter-spacing: -.035em; color: #FFFFFF; }
.cas-chiffre span { display: block; margin-top: 3px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
/* un chiffre qui décrit le client (0169) : il ne sort que d'un cas nommé ; un objectif (0173) : imaginé avant la mesure réelle, jamais
   montré comme un résultat (valeur en pointillés, la mention dessous) */
.cas-chiffre.objectif b { color: rgba(255, 255, 255, .86); text-decoration: underline dotted rgba(255, 255, 255, .6); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cas-chiffre.a-valider b { color: rgba(255, 255, 255, .7); }
.cas-objectif-geste { margin-top: 6px; min-height: 40px; padding: 4px 12px; font-size: 12px; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); background: transparent; }
.cas-chiffre-objectif, .cas-chiffre-client { display: block; margin-top: 4px; font: 500 10.5px/1.3 "JetBrains Mono", Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cas-sans-chiffre { margin: 0; font-style: italic; color: rgba(255, 255, 255, .7); }
.cas-bandeau .cas-champ .etiq { color: rgba(255, 255, 255, .66); }
.cas-bandeau .crayon-texte { color: #FFFFFF; }
.cas-bandeau .crayon-texte.crayon-vide { color: rgba(255, 255, 255, .55); }
.cas-bandeau .crayon { color: rgba(255, 255, 255, .8); }
.cas-bandeau .crayon:hover, .cas-bandeau .crayon:focus-visible { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.cas-champ-chiffres { margin-top: -6px; }
.cas-champ-chiffres .etiq { display: none; }
.cas-champ-chiffres:has(textarea:not([hidden])) .etiq { display: block; }
.cas-reperes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); }
.cas-corps { padding: 20px 24px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cas-tete { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.cas-tete .cas-champ { flex: 1; }
.cas-titre .crayon-texte { font: 600 24px/1.12 "Inter Tight", Arial, sans-serif; letter-spacing: -.03em; color: var(--encre); }
.cas-titre .etiq, .cas-anonyme .etiq { display: none; }
.cas-anonyme .crayon-texte { color: var(--encre-2); }
.cas-anonyme .crayon-texte::before { content: 'Sans nom : '; color: var(--muet); }
.cas-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cas-trois .cas-champ { border-top: 3px solid var(--typo); padding-top: 8px; }
.cas-citation { border-radius: 14px; background: var(--typo-pale); padding: 12px 14px; }
.cas-cite .crayon-texte { font: italic 400 20px/1.3 "Instrument Serif", "Times New Roman", serif; color: var(--typo-fonce); }
.cas-cite .crayon-texte:not(.crayon-vide)::before { content: '« '; }
.cas-cite .crayon-texte:not(.crayon-vide)::after { content: ' »'; }
.cas-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 6px; }
.cas-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px 14px; padding-top: 10px; border-top: 1px solid #E4E0D8; }
.cas-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; }
.cas-champ .etiq { font: 500 10.5px/1.4 "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.cas-champ textarea, .cas-champ select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #D9D6EE; border-radius: 10px; background: #FFFFFF; color: var(--encre); font-size: 14.5px; }
.cas-pret { margin: 0; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; }
.cas-pret.manque { background: var(--orange-pale); color: #8A4A0B; }
.cas-pret.pret { background: var(--vert-pale); color: #0B7A53; }
.cas-pied { margin: 0; font-size: 13px; color: var(--muet); }
@media (max-width: 860px) { .cas-recit { grid-template-columns: minmax(0, 1fr); } .cas-trois { grid-template-columns: minmax(0, 1fr); } .cas-chiffre b { font-size: 30px; } }
@media (max-width: 520px) { .cas-corps { padding: 16px; } .cas-bandeau { padding: 18px 16px 14px; } .cas-contact, .cas-reperes { grid-template-columns: minmax(0, 1fr); } }
/* téléphone (24/10) : le titre d'un cas client prend toute la ligne, les pastilles (avancement, niveau) passent dessous ; sans cela, « overflow-wrap: anywhere »
   (qui fait tomber la largeur minimale du titre à une lettre) le laissait écraser à ~100 px, coupé au milieu des mots, les pastilles gardant la leur */
@media (max-width: 520px) {
  .cas-tete { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
  .cas-tete .cas-champ { flex: 1 1 100%; }
  .cas-titre .crayon-texte { overflow-wrap: break-word; }
}

/* Cas d'usage (0173) : une carte par besoin, bordée à la couleur de la typologie de son offre ; le besoin en tête, l'état de son module
   de vidéo en pastilles, puis la fiche */
.usage-carte { background: var(--carte); border-radius: 18px; border: 1px solid #E4E0D8; border-left: 6px solid var(--typo, #BEC1C7); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 16px; }
.usage-carte.cible { outline: 3px solid var(--typo, #BEC1C7); outline-offset: 3px; }
.usage-typo { font: 500 11px/1.3 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--typo-fonce, var(--muet)); }
.usage-besoin .etiq { display: none; }
.usage-besoin .crayon-texte { font: 600 19px/1.25 "Inter Tight", Arial, sans-serif; letter-spacing: -.02em; color: var(--encre); }
.usage-pills { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0; }
.usage-pills .pill { white-space: normal; overflow-wrap: anywhere; max-width: 100%; padding-block: 3px; }   /* seuil d'un module (« ... annonces de ... employeurs ») : passe à la ligne au téléphone (21/10) */
.usage-corps { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.usage-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cas-champ input[type="number"] { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #D9D6EE; border-radius: 10px; background: #FFFFFF; color: var(--encre); font-size: 14.5px; }
@media (max-width: 760px) { .usage-deux { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .usage-carte { padding: 14px; } }

/* Cas d'usage (0248, David, 26/10 : « des petites cartes carrées ou légèrement allongées, 4 ou 5 par ligne ») : une grille de cartes rangées par
   fonction, filtrable ; un clic ouvre le détail (la carte complète ci-dessus) dans une fenêtre par-dessus la grille */
.usage-regle { margin: 0 0 12px; }
.usage-regle > summary { cursor: pointer; font-size: 13.5px; color: var(--muet); }
.usage-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 6px 0 14px; }
.usage-filtres label { display: flex; flex-direction: column; gap: 3px; font: 500 10.5px/1.4 "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.usage-filtres select { min-height: 40px; min-width: 190px; padding: 8px 10px; border: 1px solid #D9D6EE; border-radius: 10px; background: #FFFFFF; color: var(--encre); font: 400 14.5px "Inter Tight", Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.usage-compte { margin: 0 0 8px; }
.usage-groupe { margin-bottom: 22px; }
.usage-groupe-titre { margin: 0 0 10px; font: 600 19px/1.2 "Inter Tight", Arial, sans-serif; letter-spacing: -.02em; }
.usage-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.usage-tuile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; min-height: 176px; padding: 12px 14px 12px; background: var(--carte);
  border: 1px solid #E4E0D8; border-top: 5px solid var(--typo, #BEC1C7); border-radius: 14px; scroll-margin-top: 16px; }
.usage-tuile:hover { border-color: var(--typo, #BEC1C7); box-shadow: 0 6px 18px rgba(7, 8, 12, .08); }
.usage-tuile:focus-within { outline: 3px solid var(--typo, #BEC1C7); outline-offset: 2px; }
.usage-tuile.cible { outline: 3px solid var(--typo, #BEC1C7); outline-offset: 2px; }
.usage-tuile-ouvrir { all: unset; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; }
.usage-tuile-ouvrir::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }   /* toute la carte ouvre le détail ; le lien du cas client passe au-dessus */
.usage-tuile-ouvrir:focus-visible { outline: none; }
.usage-tuile-nom { font: 600 15.5px/1.22 "Inter Tight", Arial, sans-serif; letter-spacing: -.015em; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.usage-tuile-qui { font-size: 12.5px; line-height: 1.35; color: var(--muet); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.usage-tuile-pied { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; pointer-events: none; }
.usage-tuile-pied .pill { white-space: normal; padding-block: 2px; font-size: 11.5px; line-height: 1.3; }
.usage-tuile-cas { pointer-events: auto; flex-basis: 100%; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-voile { position: fixed; inset: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain; display: flex; justify-content: center; align-items: flex-start; padding: 4vh 16px; }
.usage-voile-fond { position: fixed; inset: 0; background: rgba(7, 8, 12, .5); }
.usage-panneau { position: relative; width: min(980px, 100%); display: flex; flex-direction: column; gap: 8px; outline: none; }
.usage-panneau-tete { display: flex; justify-content: flex-end; }
.usage-panneau .usage-carte { box-shadow: 0 24px 60px rgba(7, 8, 12, .3); }
.usage-tuile-demande { border-style: dashed; border-top-style: solid; border-top-color: #E0B93A; background: #FFFDF6; }   /* demandé : pas encore construit (jaune, comme une hypothèse) */
.usage-besoin-demande { margin: 4px 0 8px; font: 600 19px/1.25 "Inter Tight", Arial, sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.demande-valeur { font-size: 14.5px; overflow-wrap: anywhere; }
@media (max-width: 1180px) { .usage-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .usage-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .usage-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .usage-tuile { min-height: 164px; padding: 10px 11px; } .usage-voile { padding: 0; } .usage-panneau-tete { padding: 8px 12px 0; } .usage-filtres select { min-width: 0; width: 100%; } .usage-filtres label { flex: 1 1 100%; } }

/* le crayon (noyau.js, CC.crayons) : un champ rédigé se lit en texte, le crayon l'ouvre */
.crayon-lu { display: flex; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.crayon-texte { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding-block: 3px; }
.crayon-texte.crayon-vide { color: var(--muet); }
.crayon-lu.en-cours .crayon-texte { opacity: .55; }
.crayon { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muet); cursor: pointer; padding: 0; }
.crayon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crayon:hover, .crayon:focus-visible { background: #E9E5DD; color: var(--encre); }
.coord dd .crayon-lu { flex: 1; padding: 2px 0 2px 8px; }
@media (pointer: coarse) { .crayon { width: 40px; height: 40px; } }
.crayon:disabled { visibility: hidden; }   /* liste partagée de la todo : aucun geste */
.champ textarea.crayon-non-enregistre, .champ input.crayon-non-enregistre, .cas-champ textarea.crayon-non-enregistre, .coord .valeur.crayon-non-enregistre { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }

/* ---------------------------------------------------------------- interface globale à la charte de Telvika (David, 19/10 : « je veux
   que le command center reprenne la charte de Telvika, au moins pour l'interface globale » ; « Sur le panneau latéral sur PC, la
   barre de défilement devrait être à gauche plutôt qu'à droite. Voire même, ne pourrait-on pas avoir quelque chose de plus élégant
   qu'une barre de défilement ? »). Jetons et composants de la charte v0.2 (docs/telvika/charte-graphique-v0.2/) : rayons, puces,
   boutons en pilule, surtitre en `acc` suivi d'un filet pointillé, pas d'ombre sur une carte au repos, ligne mise en avant d'une
   interface en `accent` à 16 % avec un liseré de 3 px. */
/* le panneau latéral : la liste défile sans barre visible ; un fondu en haut ou en bas dit qu'il en reste (classes posées par
   chantier.js) ; la molette, le pavé tactile et le clavier la font défiler comme avant */
.chantier .nav-cat { scrollbar-width: none; overscroll-behavior: contain; gap: 1px; scroll-padding-block: 48px; padding-inline: 4px; }
/* l'anneau de focus d'un lien du panneau reste dans la liste (elle coupe ce qui déborde) */
.chantier .nav-cat a:focus-visible { outline-offset: -2px; }
.chantier .nav-cat::-webkit-scrollbar { width: 0; height: 0; }
.chantier .nav-cat.fondu-bas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
.chantier .nav-cat.fondu-haut { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 44px), transparent); }
.chantier .nav-cat.fondu-haut.fondu-bas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.chantier .nav-cat a { min-height: 36px; border-radius: 999px; color: #9DA3B1; font-weight: 500; }
.chantier .nav-cat .groupe { margin: 10px 12px 3px; color: #646A7A; }
.chantier .nav a:hover { background: #141722; color: #F1F2F6; }
.chantier .nav a.actif { background: rgba(92, 124, 255, .16); color: #F1F2F6; box-shadow: inset 3px 0 0 #93A8FF; }
.chantier .badge { background: #4766F5; color: #FFFFFF; border-radius: 999px; font-weight: 600; }
.chantier .etat-machine { background: #0E1017; border: 1px solid rgba(225, 230, 255, .10); border-radius: 18px; }
.chantier .cote { border-right: 1px solid rgba(225, 230, 255, .10); }
/* l'en-tête de page : la rubrique en `acc` suivie d'un filet pointillé (composant Surtitre), le titre serré */
.chantier .surtitre { display: flex; align-items: center; gap: 14px; font: 600 14px/1.3 var(--titre); letter-spacing: -.005em; text-transform: none; color: #3550D6; }
.chantier .surtitre::after { content: ""; flex: 0 0 96px; height: 1px; background-image: linear-gradient(90deg, rgba(12, 14, 20, .2) 2px, transparent 2px); background-size: 8px 1px; background-repeat: repeat-x; }
.chantier h1 { letter-spacing: -.035em; }
/* cartes : rayon de la charte, filet `trait-c`, pas d'ombre au repos */
.chantier .carte { border-radius: 22px; border-color: rgba(12, 14, 20, .12); box-shadow: none; }
/* boutons en pilule : le principal plein en `accent-btn`, le secondaire en contour `tr2` */
.chantier .bouton { border-radius: 999px; font-weight: 600; border-color: rgba(12, 14, 20, .2); background: transparent; transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s, border-color .25s, box-shadow .3s; }
.chantier .bouton:hover { border-color: #545964; }
.chantier .bouton.principal:hover { box-shadow: 0 10px 30px -8px rgba(92, 124, 255, .38); }
.chantier .bouton:not(:disabled):hover { transform: translateY(-2px); }
.chantier .bouton.discret { background: #E9E5DD; border-color: transparent; }
/* le secondaire sur fond blanc dans une carte claire ; jamais un contour d'une carte sombre (« Arrêter la machine », texte blanc), un
   bouton accentué ni un choix enfoncé (« Je connais »), qui gardent leur fond (troisième relecture du 19/10) */
.chantier .carte:not(.sombre) .bouton:not(.principal):not(.discret):not(.contour):not(.accent):not(.choisi) { background: #FFFFFF; }
.chantier .notification { background: #1B1E29; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .chantier .bouton { transition: none; } .chantier .bouton:not(:disabled):hover { transform: none; } }
/* téléphone : la barre du bas en noir, la page ouverte comme une ligne mise en avant */
@media (max-width: 820px) {
  .chantier .nav-tel a.actif { background: rgba(92, 124, 255, .16); box-shadow: none; color: #F1F2F6; }
  .chantier .cote { border-right: 0; border-top: 1px solid rgba(225, 230, 255, .10); }
}

/* calculateur (0184, 21/10) : colonnes de chiffres alignées à droite, champ de quantité étroit */
.calc-nombre { text-align: right; white-space: nowrap; }
.calc-qte { width: 5rem; min-height: 36px; text-align: right; }
.calc-synthese { margin: 12px 0; }
.calc-grille { table-layout: fixed; width: 100%; min-width: 520px; }
.calc-grille .calc-col-prix { width: 170px; }
.calc-grille .calc-col-qte { width: 150px; }
.calc-grille .calc-unite { display: block; }
@media (max-width: 600px) { .calc-grille { min-width: 0; } .calc-grille .calc-col-prix { width: 110px; } .calc-grille .calc-col-qte { width: 100px; } }
.calc-grille td:first-child { overflow-wrap: anywhere; }
.temps-titre { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.temps-titre b { font-size: 17px; }
.temps-lignes tfoot th, .temps-lignes tfoot td { border-top: 1px solid var(--trait); }

/* Vidéos de démonstration (0185) : le lien, son échéance et « Copier le lien » sur une ligne, qui passe à la ligne sur téléphone */
.ligne-video { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.video-geste { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); }
.video-geste p { margin: 0 0 4px; }

/* Pilotage IA (0202) : les trois vues de la page */
.sous-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sous-nav a { padding: 6px 14px; border-radius: 999px; background: var(--violet-pale); color: var(--violet-fonce); font-weight: 600; text-decoration: none; }
.sous-nav a.actif { background: var(--violet-fonce); color: #fff; }

/* Pilotage IA (0203, 22/10) : le tableau de bord de la page. Les couleurs viennent de regles.js (tons, séries) ; ici seulement la mise en page. */
.pil-tableau { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pil-alertes { display: flex; flex-direction: column; gap: 10px; }
.pil-tableau .ligne-etat p { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pil-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 4px; }
.pil-entete h2 { margin: 0; }
.pil-mois select { min-height: 44px; min-width: 200px; padding: 8px 12px; border: 1px solid #D9D6EE; border-radius: 12px; background: var(--carte); color: var(--encre); font: inherit; font-size: 15px; }
.pil-kpi { gap: 8px; }
.pil-kpi .kpi-tete { align-items: flex-start; gap: 8px; line-height: 1.25; }
.pil-kpi .kpi-valeur { font-size: 34px; font-variant-numeric: tabular-nums; }
.pil-inconnu { font: 600 20px/1.2 var(--texte); color: var(--muet); }
.pil-ecart { font-size: 13px; line-height: 1.35; min-height: 18px; }
.pil-ecart-val { font-weight: 700; color: var(--encre); white-space: nowrap; }
.pil-egal { color: var(--muet); }
.pil-def { font-size: 12.5px; line-height: 1.4; }
.pil-kpi .kpi-detail { display: block; }
.graphique-mois text.axe.choisi { fill: var(--encre); font-weight: 700; }
.graphique-mois text.axe { font-size: 12px; }
.graphique-mois text.total-mois { font-size: 12px; font-variant-numeric: tabular-nums; }
.pil-table th, .pil-table td { white-space: normal; }
.pil-table tfoot th, .pil-table tfoot td { border-top: 2px solid var(--trait); border-bottom: 0; font-weight: 600; color: var(--encre); font-size: 14px; }
.pil-table tfoot th { text-align: left; color: var(--encre); font-size: 14px; }
@media (max-width: 820px) {
  .pil-kpi .kpi-valeur { font-size: 26px; }
  .pil-kpi .kpi-detail, .pil-kpi .pil-def { display: block; }
  .pil-def { font-size: 12px; }
}
/* téléphone : un tableau devient une pile de lignes (le libellé de chaque colonne au-dessus de sa valeur), sans défilement de côté */
@media (max-width: 600px) {
  .pil-mois, .pil-mois select { width: 100%; }
  .pil-table, .pil-table tbody, .pil-table tfoot, .pil-table tr, .pil-table td, .pil-table th { display: block; }
  .pil-table thead { display: none; }
  .pil-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--trait-2); }
  .pil-table tfoot tr { border-bottom: 0; border-top: 2px solid var(--trait); }
  .pil-table td, .pil-table th { padding: 0; border: 0; text-align: left; }
  .pil-table tfoot th, .pil-table tfoot td { border-top: 0; }
  .pil-table td[data-label]::before, .pil-table th[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; color: var(--muet); }
  .pil-table td:first-child, .pil-table th:first-child { grid-column: 1 / -1; font-size: 15px; }
  .pil-table td:first-child::before, .pil-table th:first-child::before { display: none; }
  .pil-table .calc-nombre { text-align: left; white-space: normal; }
}
/* Pilotage IA, 22/10 au soir : la période commune, les cartes par process, le graphique des coûts variables */
.pil-selecteur { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin: 4px 0 12px; }
.pil-grain { display: inline-flex; gap: 6px; }
.pil-grain .bouton { min-height: 44px; }
.pil-periode-dit { flex-basis: 100%; margin: 0; }
.pil-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.pil-process { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; }
.pil-process-nom { overflow-wrap: anywhere; line-height: 1.3; }
.pil-process .kpi-valeur { font-size: 30px; font-variant-numeric: tabular-nums; }
.pil-process.non-collecte { background: transparent; border-style: dashed; }
.graphique-variables text.axe { font-size: 12px; }
.graphique-variables text.titre-axe { font-size: 12.5px; font-weight: 600; fill: var(--encre); }
.graphique-variables text.axe-cumul { fill: var(--encre); }
@media (max-width: 700px) {
  .pil-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pil-process { padding: 12px; }
  .pil-process .kpi-valeur { font-size: 24px; }
  .pil-selecteur .pil-mois, .pil-selecteur .pil-mois select { width: 100%; }
}
/* mode démonstration (demo.js) : le bandeau reste en haut, quoi qu'on fasse */
.bandeau-demo { position: sticky; top: 0; z-index: 100; padding: 8px 16px; background: #FDEEDF; color: #8A4A0B; border-bottom: 1px solid #E8C79B; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; }
.pil-collecte-attente { border-style: dashed; background: transparent; }
.pil-table td.calc-nombre { white-space: nowrap; }   /* un montant ne se coupe pas en deux (ordinateur) */
/* pack de réponse d'une candidature (todo) */
.pack-reponse{margin:12px 0}
.pack-reponse h4{margin:0 0 6px}
.pack-reponse .ligne-video{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0}
.pack-reponse a{overflow-wrap:anywhere}

/* « Regrouper » et « Marquer construite » (0248) : la liste et son bouton de confirmation, côte à côte */
.usage-geste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.usage-geste select { flex: 1 1 180px; width: auto; min-width: 0; }