/* SIMTEC — thème commun. Carbone avec accents néon.
   La couleur du « S » et l'accent viennent de --accent, pour que chaque modèle
   (data-modele sur <html>) puisse changer la couleur et la présentation. */
:root {
  --accent: #2ea8ff;
  --accent-fort: color-mix(in srgb, var(--accent) 62%, #fff);
  --accent-encre: #04121f;
  --accent-doux: color-mix(in srgb, var(--accent) 14%, transparent);
  --lueur: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
  --fond: #0b0d10;
  --carbone-a: #121519;
  --carbone-b: #0e1013;
  --panneau: #161a1f;
  --panneau-2: #1c2128;
  --bord: #2a313a;
  --texte: #eef2f6;
  --texte-2: #a9b4c0;
  --ok: #3ddc97;
  --attention: #ffb547;
  --danger: #ff5d6c;
  --rayon: 14px;
  --police: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--police); font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--texte);
  background-color: var(--fond);
  background-image:
    linear-gradient(45deg, var(--carbone-a) 25%, transparent 25%, transparent 75%, var(--carbone-a) 75%),
    linear-gradient(45deg, var(--carbone-a) 25%, var(--carbone-b) 25%, var(--carbone-b) 75%, var(--carbone-a) 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-fort); }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 750; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Listes déroulantes lisibles partout : sans ça, un <select> hors d'un .champ garde le fond blanc du navigateur avec le texte blanc des modèles foncés. */
:root { color-scheme: dark; }
[data-theme="clair"] { color-scheme: light; }
select { background-color: var(--panneau-2); color: var(--texte); border: 1px solid var(--bord); border-radius: 8px; }
option, optgroup { background-color: var(--panneau); color: var(--texte); }

/* ---------- Logo ---------- */
.logo { display: block; height: 72px; width: auto; max-width: 100%; user-select: none; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.logo-s { display: none; width: 48px; height: auto; border-radius: 6px; }
.logo-produit { display: block; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-fort); margin-top: 4px; font-weight: 700; }

/* ---------- Charpente ---------- */
.appli { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.cote { background: rgba(10, 12, 15, .92); border-right: 1px solid var(--bord); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cote .logo-bloc { padding: 4px 10px 18px; }
.nav-lien { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--texte-2); text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.nav-lien svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-lien:hover { color: var(--texte); background: var(--panneau); }
.nav-lien.actif { color: var(--sb-fort, #d3e2f4); background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-lien .pastille { margin-left: auto; background: var(--danger); color: var(--sb-fort, #d3e2f4); font-size: .72rem; border-radius: 99px; padding: 1px 7px; }
.cote .pied { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--bord); font-size: .85rem; color: var(--texte-2); }
.principal-zone { min-width: 0; display: flex; flex-direction: column; }
.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: rgba(11, 13, 16, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
.barre .titre-page { font-weight: 750; font-size: 1.1rem; margin-right: auto; }
.contenu { padding: 24px; max-width: 1280px; width: 100%; }
.bandeau-demo { font-size: .8rem; color: var(--texte-2); padding: 6px 24px; border-bottom: 1px solid var(--bord); background: rgba(255,181,71,.06); }
.nav-bas { display: none; }

/* ---------- Composants ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--bord); background: var(--panneau-2); color: var(--texte); font-weight: 650; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.principal { background: linear-gradient(180deg, var(--accent-fort), var(--accent)); color: var(--accent-encre); border-color: transparent; box-shadow: var(--lueur); }
.btn.danger { color: var(--danger); }
.btn.petit { min-height: 34px; padding: 0 12px; font-size: .88rem; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-icone { background: none; border: 0; color: var(--texte-2); font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 4px 8px; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.carte { background: linear-gradient(180deg, rgba(28,33,40,.92), rgba(20,24,29,.92)); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; }
.carte + .carte { margin-top: 16px; }
.grille > .carte + .carte { margin-top: 0; }
td strong, td.nw { white-space: nowrap; }
.grille { display: grid; gap: 16px; }
.grille > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffre { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.chiffre-lib { color: var(--texte-2); font-size: .88rem; font-weight: 600; }
.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.kpi.attention::after { background: var(--attention); box-shadow: 0 0 12px var(--attention); }
.kpi.danger::after { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.etiquette { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 700; border: 1px solid var(--bord); color: var(--texte-2); white-space: nowrap; }
.etiquette.bleu { color: var(--accent-fort); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-doux); }
.etiquette.vert { color: var(--ok); border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.08); }
.etiquette.jaune { color: var(--attention); border-color: rgba(255,181,71,.4); background: rgba(255,181,71,.08); }
.etiquette.rouge { color: var(--danger); border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.08); }
.tableau-zone { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th { text-align: left; color: var(--texte-2); font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid rgba(42,49,58,.6); vertical-align: middle; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muet { color: var(--texte-2); }
.seul-mobile { display: none; }
.petit-texte { font-size: .85rem; }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.espace { flex: 1; }
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: .9rem; color: var(--texte-2); font-weight: 600; }
.champ input, .champ select, .champ textarea, .recherche { background: #0f1216; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; color: var(--texte); min-height: 42px; width: 100%; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .recherche:focus { outline: none; border-color: var(--accent); box-shadow: var(--lueur); }
.recherche { max-width: 320px; }
.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(42,49,58,.6); }
.liste-alertes li:last-child { border-bottom: 0; }
.point { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.point.jaune { background: var(--attention); box-shadow: 0 0 8px var(--attention); }
.point.rouge { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 16px; overflow-x: auto; }
.onglet { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--texte-2); font-weight: 650; cursor: pointer; white-space: nowrap; }
.onglet.actif { color: var(--sb-fort, #d3e2f4); border-color: var(--accent); }
.qr-boite { background: #fff; border-radius: 12px; padding: 8px; display: inline-block; line-height: 0; }
.vide { color: var(--texte-2); padding: 18px 0; text-align: center; }
.jauge { height: 8px; background: #0f1216; border-radius: 99px; overflow: hidden; border: 1px solid var(--bord); }
.jauge > span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.jauge.jaune > span { background: var(--attention); box-shadow: none; }
.jauge.rouge > span { background: var(--danger); box-shadow: none; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; }
.photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bord); }
.coche { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(42,49,58,.5); cursor: pointer; }
.coche input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 2px; flex: none; }
.chrono { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 800; color: var(--accent-fort); }

/* Planification annuelle */
.plan { border-collapse: separate; border-spacing: 3px; }
.plan th, .plan td { border: 0; padding: 6px; text-align: center; }
.plan td.case { background: #0f1216; border-radius: 6px; min-width: 52px; height: 38px; font-size: .74rem; font-weight: 700; }
.plan td.case.fait { background: rgba(61,220,151,.14); color: var(--ok); }
.plan td.case.prevu { background: var(--accent-doux); color: var(--accent-fort); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.plan td.case.retard { background: rgba(255,93,108,.14); color: var(--danger); }
.plan td.case.ce-mois { outline: 1px dashed var(--accent); }

/* Connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.connexion .carte { width: 100%; max-width: 440px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5), var(--lueur); }
.connexion .logo { height: 150px; margin: 0 auto; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.role-choix { overflow-wrap: anywhere; hyphens: auto; }
.role-choix { text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--bord); background: #0f1216; cursor: pointer; font-weight: 650; }
.role-choix small { display: block; color: var(--texte-2); font-weight: 500; margin-top: 2px; }
.role-choix.actif { border-color: var(--accent); box-shadow: var(--lueur); }

/* Modale */
.modale-fond { position: fixed; inset: 0; background: rgba(0,0,0,.66); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modale { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--panneau); border: 1px solid var(--bord); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modale-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.modale-tete h2 { margin: 0; }
.modale-corps { padding: 8px 18px; overflow-y: auto; }
.modale-pied { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--bord); }
.scan-cadre { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-cadre video { width: 100%; height: 100%; object-fit: cover; }
.scan-viseur { position: absolute; inset: 18%; border: 2px solid var(--accent); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35), 0 0 22px var(--accent); }
.scan-aide { color: var(--texte-2); }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; background: var(--panneau-2); border: 1px solid var(--accent); box-shadow: var(--lueur); padding: 12px 18px; border-radius: 12px; z-index: 60; transition: .25s; font-weight: 650; max-width: calc(100vw - 32px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.bandeau-avis { border: 1px solid rgba(255,181,71,.45); background: rgba(255,181,71,.08); color: var(--attention); border-radius: 10px; padding: 10px 14px; font-weight: 650; margin-bottom: 16px; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .appli { grid-template-columns: 1fr; }
  .cote { display: none; }
  .barre { padding: 10px 16px; }
  .barre .btn span { display: none; }
  .barre .titre-page { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .contenu { padding: 16px 16px 96px; }
  .bandeau-demo { padding: 6px 16px; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .recherche { max-width: none; }
  .nav-bas { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(10,12,15,.96); border-top: 1px solid var(--bord); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .nav-bas a, .nav-bas button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; font-weight: 650; color: var(--texte-2); text-decoration: none; background: none; border: 0; padding: 4px 0; }
  .nav-bas svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-bas .actif { color: var(--accent-fort); }
  .nav-bas .scan-central { color: var(--accent-encre); }
  .nav-bas .scan-central span.rond { width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--accent-fort), var(--accent)); box-shadow: var(--lueur); }
  .nav-bas .scan-central small { color: var(--texte-2); }
  .cache-mobile { display: none !important; }
  .seul-mobile { display: block; }
}

/* ---------- Impression (étiquettes QR, comptes rendus) ---------- */
@media print {
  body { background: #fff; color: #000; }
  .cote, .barre, .nav-bas, .bandeau-demo, .non-imprime { display: none !important; }
  .appli { display: block; }
  .carte { background: #fff; border: 1px solid #bbb; color: #000; break-inside: avoid; }
  .muet { color: #444; }
  .etiquettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---------- Coquille commune ---------- */
.logo-groupe { display: flex; align-items: center; gap: 12px; }
.modeles { display: grid; gap: 8px; }
.modele-choix { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bord); background: var(--panneau-2); cursor: pointer; font-weight: 650; text-align: left; }
.modele-choix.actif { border-color: var(--accent); box-shadow: var(--lueur); }
.pastille-s { font-weight: 900; font-size: 1.5rem; line-height: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #0f1216; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.suite-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px; }
.bandeau-avis-haut { background: rgba(255,181,71,.12); color: var(--attention); font-weight: 700; padding: 8px 24px; border-bottom: 1px solid rgba(255,181,71,.4); font-size: .9rem; }

/* ---------- Thème clair (modèles 2 et 4) ---------- */
[data-theme="clair"] {
  --fond: #eef2f7; --carbone-a: #eef2f7; --carbone-b: #e9eef4;
  --panneau: #ffffff; --panneau-2: #f5f8fb; --bord: #d8e0ea;
  --texte: #0f1a26; --texte-2: #586678;
  --accent-fort: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-encre: #ffffff;
  --lueur: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
  --ok: #0f9d66; --attention: #b86e00; --danger: #d42a3c;
}
[data-theme="clair"] body { background: linear-gradient(180deg, #f7f9fc, #e9eff6) fixed; }
[data-theme="clair"] .carte { background: #fff; box-shadow: 0 1px 2px rgba(16,32,56,.05), 0 8px 24px rgba(16,32,56,.06); }
[data-theme="clair"] .cote, [data-theme="clair"] .nav-bas { background: rgba(255,255,255,.96); }
[data-theme="clair"] .barre { background: rgba(255,255,255,.88); }
[data-theme="clair"] .nav-lien.actif { color: var(--accent-fort); }
[data-theme="clair"] .onglet.actif { color: var(--texte); }
[data-theme="clair"] .champ input, [data-theme="clair"] .champ select, [data-theme="clair"] .champ textarea, [data-theme="clair"] .recherche,
[data-theme="clair"] .role-choix, [data-theme="clair"] .jauge, [data-theme="clair"] .plan td.case { background: #f4f7fa; }
[data-theme="clair"] .pastille-s { background: #0f1216; }
[data-theme="clair"] .bandeau-demo { background: #fff7e8; }
[data-theme="clair"] .modale { background: #fff; }
[data-theme="clair"] .toast { background: #fff; }
[data-theme="clair"] .kpi::after { box-shadow: none; }
[data-theme="clair"] .point { box-shadow: none; }

/* ---------- Disposition « haut » (menu en haut, modèles 2 et 5) ---------- */
@media (min-width: 761px) {
  [data-disposition="haut"] .appli { grid-template-columns: 1fr; }
  [data-disposition="haut"] .cote { position: sticky; top: 0; z-index: 6; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 20px; border-right: 0; border-bottom: 1px solid var(--bord); }
  [data-disposition="haut"] .cote .logo-bloc { padding: 0 18px 0 0; flex: none; }
  [data-disposition="haut"] .cote .logo { height: 52px; }
  [data-disposition="haut"] .nav-liste { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
  [data-disposition="haut"] .nav-lien { padding: 9px 11px; white-space: nowrap; font-size: .92rem; }
  [data-disposition="haut"] .nav-lien.actif { box-shadow: inset 0 -3px 0 var(--accent); }
  [data-disposition="haut"] .cote .pied { margin: 0 0 0 auto; border: 0; padding: 0 0 0 12px; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; }
  [data-disposition="haut"] .cote .pied .btn { margin-top: 0 !important; }
  [data-disposition="haut"] .barre { top: 0; position: relative; }
  [data-disposition="haut"] .contenu { margin: 0 auto; }
}
/* ---------- Disposition « rail » (icônes seulement, modèle 3) ---------- */
@media (min-width: 761px) {
  [data-disposition="rail"] .appli { grid-template-columns: 84px 1fr; }
  [data-disposition="rail"] .cote { padding: 16px 10px; align-items: center; }
  [data-disposition="rail"] .cote .logo-bloc { padding: 0 0 14px; }
  [data-disposition="rail"] .logo-produit, [data-disposition="rail"] .cote .logo, [data-disposition="rail"] .nav-lien span:not(.pastille), [data-disposition="rail"] .cote .pied div { display: none; }
  [data-disposition="rail"] .cote .logo-s { display: block; }
  [data-disposition="rail"] .nav-lien { justify-content: center; padding: 12px; position: relative; }
  [data-disposition="rail"] .nav-lien .pastille { position: absolute; top: 2px; right: 2px; }
  [data-disposition="rail"] .nav-lien svg { width: 24px; height: 24px; }
  [data-disposition="rail"] .cote .pied { padding: 10px 0 0; }
  [data-disposition="rail"] .cote .pied .btn { padding: 4px; font-size: .68rem; white-space: normal; width: 64px; line-height: 1.1; }
}
/* Modèle 3 : graphite plus chaud. Modèle 5 : nuit plus profonde. */
/* Modèle 1 « Acier marine » : les couleurs du logo (bleu marine, acier brossé, argent). */
[data-modele="1"] {
  --fond: #dfe3e8; --carbone-a: #dfe3e8; --carbone-b: #d8dde3;
  --panneau: #fbfcfd; --panneau-2: #eef1f4; --bord: #c3cbd4;
  --texte: #10233f; --texte-2: #4f5f73;
  --accent-fort: #1b3f73;
}
[data-modele="1"] body {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px, rgba(0,0,0,.025) 3px 4px),
    linear-gradient(180deg, #eceff2 0%, #d5dae0 100%) fixed;
}
[data-modele="1"] .cote, [data-modele="1"] .nav-bas { background: linear-gradient(180deg, #f6f7f9, #e3e7ec); border-color: #c3cbd4; }
[data-modele="1"] .barre { background: rgba(240,242,245,.9); }
[data-modele="1"] .carte { background: linear-gradient(180deg, #ffffff, #f5f7f9); border-color: #cdd4dc; box-shadow: 0 1px 2px rgba(16,35,63,.06), 0 8px 24px rgba(16,35,63,.08); }
[data-modele="1"] .btn.principal { background: linear-gradient(180deg, #2a6cb8, #1b3f73); color: var(--sb-fort, #d3e2f4); }
[data-modele="1"] .nav-lien.actif { background: linear-gradient(90deg, rgba(31,95,168,.16), rgba(31,95,168,.04)); color: #1b3f73; }
[data-modele="3"] { --fond: #121212; --carbone-a: #1a1918; --carbone-b: #141312; --panneau: #1c1b1a; --panneau-2: #24221f; --bord: #35312c; }
[data-modele="5"] { --fond: #07080d; --carbone-a: #0d0f17; --carbone-b: #090a10; --panneau: #11131c; --panneau-2: #171a26; --bord: #262a3a; }

.note-barre { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: var(--bord); overflow: hidden; vertical-align: middle; }
.note-barre > span { display: block; height: 100%; background: var(--attention); }
.meilleur { color: var(--ok); font-weight: 800; }
.ecart { color: var(--danger); font-weight: 800; }
.etapes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.etapes .etape { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--bord); font-size: .78rem; font-weight: 700; color: var(--texte-2); }
.etapes .etape.fait { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.etapes .etape.actuelle { color: var(--accent-fort); border-color: var(--accent); box-shadow: var(--lueur); }
.vignette { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--bord); background: var(--panneau-2); display: grid; place-items: center; color: var(--texte-2); flex: none; }
.vignette svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- IA SIMTEC ---------- */
.ia-entete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panneau)), var(--panneau)); }
.ia-puce { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: var(--lueur); color: var(--accent-fort); flex: none; }
.ia-puce svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ia-anneaux { display: flex; gap: 18px; text-align: center; }
.ia-anneau { --pct: 100; --c: var(--ok); width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 4px;
  background: conic-gradient(var(--c) calc(var(--pct) * 1%), var(--bord) 0); }
.ia-anneau span { width: 70px; height: 70px; border-radius: 50%; background: var(--panneau); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
.ia-anneau small { font-size: .7rem; }
.ia-modules { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ia-module { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--bord); background: var(--panneau-2); font-size: .82rem; font-weight: 650; cursor: pointer; }
.ia-module.actif { border-color: var(--accent); box-shadow: var(--lueur); }
.ia-reponse { white-space: pre-line; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-doux); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ia-savoir { border-bottom: 1px solid var(--bord); padding: 10px 0; }
.ia-savoir summary { cursor: pointer; font-weight: 700; }
.ia-savoir p { margin: 8px 0 0; color: var(--texte-2); }

/* ---------- Drapeau du Québec ---------- */
.drapeau-qc { width: 27px; height: 18px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); vertical-align: middle; }
.fabrique { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--texte-2); letter-spacing: .02em; }
.cote .pied .fabrique { margin: 0 0 12px; }
.barre .barre-qc { width: 24px; height: 16px; }
[data-theme="clair"] .drapeau-qc { box-shadow: 0 0 0 1px rgba(16,32,56,.12), 0 1px 3px rgba(16,32,56,.15); }
[data-disposition="rail"] .cote .pied .fabrique span { display: none; }
@media print { .drapeau-qc { box-shadow: none; } }
.connexion .fabrique .drapeau-qc { width: 36px; height: 24px; }
.connexion .fabrique { font-size: .85rem; }
.etiquette.code-panne { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 760px) {
  .liste-alertes li { flex-wrap: wrap; row-gap: 6px; }
  .liste-alertes li > span[style*="flex:1"] { min-width: 55%; }
}

/* ---------- Répartition ---------- */
.point.vert { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.point.bleu { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.repartition { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(205px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-top: 12px; }
.colonne { background: var(--panneau); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; transition: border-color .15s, box-shadow .15s; }
.colonne-tete { padding: 2px 4px 6px; border-bottom: 1px solid var(--bord); }
.colonne-vide { color: var(--texte-2); text-align: center; padding: 18px 0; font-size: .9rem; }
.colonne.survol { border-color: var(--accent); box-shadow: var(--lueur); }
.colonne.atelier { border-color: rgba(255,93,108,.45); background: color-mix(in srgb, var(--danger) 6%, var(--panneau)); }
.voyage-carte { background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 10px; padding: 10px; cursor: grab; touch-action: manipulation; overflow-wrap: anywhere; }
.voyage-carte:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); }
.voyage-carte.alerte { border-left: 3px solid var(--attention); }
.voyage-carte.glisse { opacity: .45; }
.voyage-carte svg { width: 14px; height: 14px; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.voyage-alertes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.voyage-alertes .etiquette { white-space: normal; max-width: 100%; }
.carte-geo { height: 460px; border-radius: var(--rayon); border: 1px solid var(--bord); overflow: hidden; margin-bottom: 16px; background: #1a1f26; }
.signature { display: block; width: 100%; height: 160px; background: #fff; border-radius: 10px; border: 1px solid var(--bord); touch-action: none; cursor: crosshair; }
.signature-image { display: block; max-width: 300px; width: 100%; background: #fff; border-radius: 8px; margin-top: 8px; }
.grand-bouton { width: 100%; justify-content: center; padding: 16px; font-size: 1.05rem; margin-top: 12px; }
.ronde-points { display: flex; flex-direction: column; gap: 8px; }
.ronde-point { padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--panneau-2); }
.ronde-point.mineur { border-left: 3px solid var(--attention); }
.ronde-point.majeur { border-left: 3px solid var(--danger); }
.ronde-note { width: 100%; margin-top: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond); }
.btn.danger-plein { background: var(--danger); color: var(--sb-fort, #d3e2f4); border-color: transparent; }
.btn.attention-plein { background: var(--attention); color: #1d1300; border-color: transparent; }
.messagerie { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.canaux { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.canal { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; min-width: 0; }
.canal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal:hover { background: var(--panneau-2); }
.canal.actif { background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.fil { min-width: 0; }
.messagerie > .carte { margin-top: 0; }
.bulles { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.bulle { max-width: 80%; align-self: flex-start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--panneau-2); border: 1px solid var(--bord); overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.bulle.alerte { border-left: 3px solid var(--danger); max-width: 100%; }
[data-theme="clair"] .carte-geo { background: #e8ecf0; }
[data-theme="clair"] .point.vert { box-shadow: none; }
@media (max-width: 760px) {
  .repartition { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .colonne { min-height: 0; }
  .voyage-carte { cursor: pointer; }
  .carte-geo { height: 320px; }
  .messagerie { grid-template-columns: minmax(0, 1fr); }
  .canaux { flex-direction: row; overflow-x: auto; }
  .canal { flex: none; max-width: 200px; }
  .bulle { max-width: 92%; }
}

/* ---------- Tableaux sur téléphone : une fiche par ligne ---------- */
@media (max-width: 760px) {
  table.empile, table.empile tbody, table.empile tr, table.empile td { display: block; width: 100%; }
  table.empile thead { display: none; }
  table.empile tr { padding: 10px 0; border-bottom: 1px solid var(--bord); }
  table.empile tr:last-child { border-bottom: 0; }
  table.empile td { padding: 3px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  table.empile td::after { content: ""; display: table; clear: both; }
  table.empile td::before { content: attr(data-l); float: left; margin-right: 12px; color: var(--texte-2); font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; line-height: 1.9; text-align: left; }
  table.empile td:first-child { text-align: left; font-size: 1rem; padding-bottom: 4px; }
  table.empile td:first-child::before, table.empile td[data-l=""]::before { display: none; }
  table.empile td strong, table.empile td.nw { white-space: normal; }
  table.empile td.num { text-align: right; }
  table.empile .etiquette { white-space: normal; max-width: 100%; }
  .chiffre { font-size: 1.55rem; overflow-wrap: anywhere; }
}
/* Icône à côté d'un titre de carte */
.ic-titre { display: inline-flex; width: 22px; height: 22px; flex: none; color: var(--accent); }
.ic-titre svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Les 5 formats : chaque modèle a sa propre présentation, pas seulement sa couleur ---------- */
.logo-barre { display: none; height: 44px; width: auto; flex: none; border-radius: 6px; }
.modele-format { display: block; font-size: .76rem; font-weight: 550; color: var(--texte-2); margin-top: 2px; }

/* 3 · Graphite cuivre : atelier industriel, coins carrés, titres en capitales. */
[data-modele="3"] { --rayon: 4px; }
[data-modele="3"] .carte, [data-modele="3"] .btn, [data-modele="3"] .nav-lien, [data-modele="3"] .kpi, [data-modele="3"] .modale, [data-modele="3"] .champ input, [data-modele="3"] .champ select, [data-modele="3"] .champ textarea, [data-modele="3"] .recherche, [data-modele="3"] .etiquette, [data-modele="3"] .onglet { border-radius: 4px; }
[data-modele="3"] .carte h2, [data-modele="3"] th { text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
[data-modele="3"] .barre .titre-page { text-transform: uppercase; letter-spacing: .08em; }

/* 4 · Blanc émeraude : panneaux flottants, grands arrondis, beaucoup d'air. */
[data-modele="4"] { --rayon: 22px; }
[data-modele="4"] .carte, [data-modele="4"] .kpi, [data-modele="4"] .modale { border-radius: 22px; }
[data-modele="4"] .btn, [data-modele="4"] .onglet, [data-modele="4"] .recherche { border-radius: 99px; }
[data-modele="4"] .nav-lien { border-radius: 14px; }
[data-modele="4"] .nav-lien.actif { box-shadow: none; }
@media (min-width: 761px) { [data-modele="4"] .contenu { padding: 30px; } }
[data-modele="4"] .carte { box-shadow: 0 10px 30px rgba(15, 40, 30, .08); }
@media (min-width: 761px) {
  [data-disposition="flottant"] .appli { grid-template-columns: 266px 1fr; }
  [data-disposition="flottant"] .cote { margin: 16px 0 16px 16px; height: calc(100vh - 32px); top: 16px; border: 1px solid var(--bord); border-radius: 24px; box-shadow: 0 18px 50px rgba(15, 40, 30, .12); }
  [data-disposition="flottant"] .barre { margin: 16px 16px 0; border: 1px solid var(--bord); border-radius: 18px; top: 16px; }
  [data-disposition="flottant"] .nav-lien { padding: 9px 12px; }
  [data-disposition="flottant"] .bandeau-demo { margin: 10px 16px 0; border: 0; border-radius: 12px; }
}

/* 5 · Nuit rubis : logo dans la barre du haut, menu en dock flottant en bas, écran compact. */
[data-modele="5"] .contenu { padding: 16px 20px; max-width: none; }
[data-modele="5"] .carte { padding: 14px; }
[data-modele="5"] td, [data-modele="5"] th { padding-top: 7px; padding-bottom: 7px; }
[data-modele="5"] .btn { min-height: 36px; border-radius: 8px; }
@media (min-width: 761px) {
  [data-disposition="dock"] .appli { grid-template-columns: 1fr; }
  [data-disposition="dock"] .logo-barre { display: block; }
  [data-disposition="dock"] .barre .titre-page { padding-left: 14px; border-left: 1px solid var(--bord); }
  [data-disposition="dock"] .contenu { padding-bottom: 110px; }
  [data-disposition="dock"] .cote { position: fixed; top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 20; height: auto; max-width: calc(100vw - 28px); flex-direction: row; align-items: center; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 20px; background: rgba(14, 10, 14, .9); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), var(--lueur); overflow-x: auto; overflow-y: hidden; }
  [data-disposition="dock"] .cote .logo-bloc, [data-disposition="dock"] .cote .pied .fabrique, [data-disposition="dock"] .cote .pied div { display: none; }
  [data-disposition="dock"] .nav-liste { display: flex; gap: 2px; }
  [data-disposition="dock"] .nav-lien { flex-direction: column; gap: 3px; padding: 7px 8px; min-width: 66px; font-size: .66rem; text-align: center; line-height: 1.1; position: relative; }
  [data-disposition="dock"] .nav-lien span:not(.pastille) { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-disposition="dock"] .nav-lien.actif { box-shadow: inset 0 -3px 0 var(--accent); }
  [data-disposition="dock"] .nav-lien .pastille { position: absolute; top: 0; right: 4px; margin: 0; }
  [data-disposition="dock"] .cote .pied { margin: 0 0 0 6px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--bord); }
  [data-disposition="dock"] .cote .pied .btn { margin-top: 0 !important; white-space: nowrap; }
  [data-disposition="dock"] .toast { bottom: 110px; }
}

/* Téléphone : la barre du bas flotte en pilule pour les modèles 4 et 5. */
@media (max-width: 760px) {
  [data-modele="4"] .nav-bas, [data-modele="5"] .nav-bas { left: 10px; right: 10px; bottom: 10px; border: 1px solid var(--bord); border-radius: 22px; padding-bottom: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); }
  [data-modele="4"] .contenu, [data-modele="5"] .contenu { padding-bottom: 110px; }
  [data-modele="3"] .nav-bas { border-top: 2px solid var(--accent); }
}
[data-theme="clair"][data-disposition="dock"] .cote { background: rgba(255, 255, 255, .92); }

/* ---------- Rendez-vous ---------- */
.courriel-corps { white-space: pre-wrap; font: inherit; font-size: .92rem; background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 10px; padding: 12px; margin: 0; overflow-wrap: anywhere; }
.rv-page { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }
.rv-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-entete .logo { height: 64px; }
.rv-etapes { display: flex; gap: 6px; margin: 0 0 16px; }
.rv-etapes span { flex: 1; height: 5px; border-radius: 99px; background: var(--bord); }
.rv-etapes span.fait { background: var(--accent); }
.rv-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.rv-choix.petits { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.rv-bouton { text-align: left; padding: 14px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--panneau-2); color: var(--texte); cursor: pointer; font-weight: 650; min-height: 52px; }
.rv-bouton:hover, .rv-bouton.actif { border-color: var(--accent); box-shadow: var(--lueur); }
.rv-bouton small { display: block; color: var(--texte-2); font-weight: 550; margin-top: 3px; }
.rv-choix.petits .rv-bouton { text-align: center; padding: 12px 6px; }
.rv-recap { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.rv-recap dt { color: var(--texte-2); } .rv-recap dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.rv-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent-fort); margin-bottom: 10px; }
.rv-ok svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Page d'accueil et connexion haut de gamme (logiciel avec ecranAccueil) ---- */
.accueil-simtec, .connexion.co-marque { min-height: 100vh; color: #fff; position: relative;
  background: linear-gradient(115deg, rgba(10,22,48,.96) 0%, rgba(15,35,67,.88) 45%, rgba(27,61,110,.55) 100%), var(--photo) center/cover no-repeat, #0a1630; }
.accueil-simtec::after, .connexion.co-marque::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #5f7fb8 20%, #f4f7ff 50%, #5f7fb8 80%, transparent); }
.accueil-simtec { display: grid; align-items: center; padding: 48px clamp(20px, 6vw, 96px); }
.as-contenu { max-width: 620px; display: grid; gap: 18px; justify-items: start; }
.as-logo { width: 132px; height: auto; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1); }
.as-sur { font: 800 .8rem/1 inherit; letter-spacing: .34em; color: #9db8ff; margin-top: 6px; }
.accueil-simtec h1 { margin: -6px 0 0; font-size: clamp(3rem, 8vw, 5.4rem); line-height: .95; font-weight: 850; letter-spacing: -.04em;
  background: linear-gradient(180deg, #f2f6ff 0%, #9dbbff 55%, #3b74ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-accroche { margin: 0; font-size: 1.25rem; color: #d6e0f0; }
.as-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 6px; }
.as-points div { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(160,190,255,.25); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.as-points strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.as-points span { font-size: .85rem; color: #b4c2d6; }
.as-entrer { margin-top: 8px; padding: 16px 34px; border: 0; border-radius: 12px; cursor: pointer; font: 750 1.05rem/1 inherit; color: var(--sb-fort, #d3e2f4);
  background: linear-gradient(180deg, #4a86ff, #1550d4); box-shadow: 0 14px 36px rgba(36,96,255,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.as-entrer:hover { filter: brightness(1.08); }
.as-bas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.as-bas .fabrique { margin: 0; color: #c9d4e6; }
.as-langue { border: 1px solid rgba(255,255,255,.4); background: none; color: var(--sb-fort, #d3e2f4); padding: 7px 14px; border-radius: 999px; cursor: pointer; font: 650 .85rem/1 inherit; }
@media (max-width: 620px) { .as-points { grid-template-columns: 1fr; } .as-logo { width: 104px; } }
.connexion.co-marque .carte { color: var(--texte, #0f1b2d); background: linear-gradient(180deg, #ffffff, #eef2f6); border: 1px solid #c3cbd4; box-shadow: 0 40px 90px rgba(0,0,0,.55); position: relative; z-index: 1; }
.co-compte { display: grid; gap: 10px; margin: 16px 0 4px; padding: 14px; border-radius: 12px; background: rgba(27,61,110,.06); border: 1px solid #d3dae3; }
.co-compte input[readonly] { opacity: .85; }

/* ---- Intérieur haut de gamme : marine et acier brossé (html[data-lux]) ---- */
html[data-lux] .cote { color: #e6edf7; border-right: 1px solid var(--fb, #2b4a78);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--f1, #1b3d6e) 0%, var(--f2, #10284a) 55%, var(--f3, #0b1a33) 100%); }
html[data-lux] .cote .logo-produit { color: #9db8ff; }
html[data-lux] .cote .nav-lien { color: #c9d4e6; }
html[data-lux] .cote .nav-lien:hover { background: rgba(255,255,255,.06); color: var(--sb-fort, #d3e2f4); }
html[data-lux] .cote .nav-lien.actif { color: var(--sb-fort, #d3e2f4); background: linear-gradient(90deg, rgba(74,134,255,.35), rgba(74,134,255,.08)); box-shadow: inset 3px 0 0 #6d9bff, 0 0 18px rgba(59,116,255,.25); border-color: transparent; }
html[data-lux] .cote .pied { border-top-color: rgba(200,214,232,.2); color: #aebdd3; }
html[data-lux] .cote .pied strong { color: var(--sb-fort, #d3e2f4); }
html[data-lux] .cote .fabrique { color: #c9d4e6; }
html[data-lux] .cote .btn { background: transparent; color: var(--sb-fort, #d3e2f4); border-color: rgba(255,255,255,.4); }
html[data-lux] .barre { color: var(--sb-fort, #d3e2f4); border-bottom: 1px solid var(--fb, #2b4a78); backdrop-filter: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--f2, #10284a) 0%, var(--f1, #1b3d6e) 100%); }
html[data-lux] .barre .titre-page { color: var(--sb-fort, #d3e2f4); letter-spacing: -.01em; }
html[data-lux] .barre .btn:not(.principal) { background: rgba(255,255,255,.06); color: var(--sb-fort, #d3e2f4); border-color: rgba(255,255,255,.35); }
html[data-lux] .barre .btn.principal { background: linear-gradient(180deg, #4a86ff, #1550d4); border-color: transparent; box-shadow: 0 8px 22px rgba(36,96,255,.4); }
html[data-lux] .barre .etiquette { background: rgba(255,255,255,.08); color: #c9d4e6; border-color: rgba(255,255,255,.2); }
html[data-lux] .bandeau-demo { background: linear-gradient(90deg, rgba(216,169,59,.18), rgba(216,169,59,.04)); color: #f1d68f; border-bottom-color: rgba(216,169,59,.3); }
html[data-lux] .contenu > .ligne h1, html[data-lux] .contenu > h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; background: linear-gradient(180deg, #ffffff 0%, #b8cbea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-lux] .btn.principal { background: linear-gradient(180deg, #2f6fd8, #16408a); box-shadow: 0 10px 26px rgba(22,64,138,.35), inset 0 1px 0 rgba(255,255,255,.2); }
html[data-lux] .kpi { color: var(--sb-fort, #d3e2f4); border: 1px solid var(--fb, #2b4a78); padding: 20px 22px; box-shadow: 0 18px 40px rgba(11,26,51,.25);
  background: radial-gradient(400px 160px at 90% 0%, rgba(47,107,255,.35), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(135deg, var(--f1, #1b3d6e) 0%, var(--f2, #10284a) 60%, var(--f3, #0b1a33) 100%); }
html[data-lux] .kpi::after { height: 3px; }
html[data-lux] .kpi .chiffre { font-size: clamp(1.5rem, 2.3vw, 2.6rem); overflow-wrap: anywhere; letter-spacing: -.03em; background: linear-gradient(180deg, #ffffff 0%, #b8cbea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-lux] .kpi.danger .chiffre { background: linear-gradient(180deg, #ffd5d5 0%, #ff7a7a 100%); -webkit-background-clip: text; background-clip: text; }
html[data-lux] .kpi.attention .chiffre { background: linear-gradient(180deg, #fff2c4 0%, #e6b54a 100%); -webkit-background-clip: text; background-clip: text; }
html[data-lux] .kpi .chiffre-lib { color: #c9d4e6; }
html[data-lux] .carte > h2:first-child { display: flex; align-items: center; gap: 10px; color: var(--sb-fort, #d3e2f4); letter-spacing: -.01em; }
html[data-lux] .carte > h2:first-child::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: linear-gradient(180deg, #4a86ff, var(--f1, #1b3d6e)); }
html[data-lux] th { color: #9fb3cf; }
html[data-lux] .nav-bas { background: linear-gradient(180deg, var(--f2, #10284a), var(--f3, #0b1a33)); border-top: 1px solid var(--fb, #2b4a78); }
html[data-lux] .nav-bas a { color: #aebdd3; }
html[data-lux] .nav-bas a.actif { color: var(--sb-fort, #d3e2f4); }

/* ---- SIMTEC en bleu foncé partout à l'intérieur ---- */
html[data-lux], html[data-lux][data-modele], html[data-lux][data-theme] {
  --fond: var(--f3, #0a1630); --carbone-a: var(--f3, #0b1a33); --carbone-b: var(--f3, #0a1630); --panneau: #13294a; --panneau-2: #183259; --bord: var(--fb, #2b4a78);
  --texte: #eef3fb; --texte-2: #aebdd3; --accent-fort: #8fb4ff; color-scheme: dark; }
html[data-lux] body { background: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px), radial-gradient(1100px 500px at 85% 0%, rgba(47,107,255,.18), transparent 60%), linear-gradient(180deg, var(--f2, #0f2343) 0%, var(--f3, #0a1630) 100%) fixed; }
html[data-lux] .carte { background: linear-gradient(180deg, var(--f1, #16305a) 0%, var(--f2, #10264a) 100%); border-color: var(--fb, #2b4a78); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px rgba(0,0,0,.28); }
html[data-lux] .champ input, html[data-lux] .champ select, html[data-lux] .champ textarea, html[data-lux] .recherche,
html[data-lux] .role-choix, html[data-lux] .jauge, html[data-lux] .plan td.case, html[data-lux] select { background: var(--f3, #0d1f3d); border-color: var(--fb, #2b4a78); color: var(--sb-fort, #d3e2f4); }
html[data-lux] .modale, html[data-lux] .toast { background: #13294a; color: var(--sb-fort, #d3e2f4); border-color: var(--fb, #2b4a78); }
html[data-lux] .btn:not(.principal) { background: rgba(255,255,255,.06); border-color: rgba(160,190,255,.3); color: var(--sb-fort, #d3e2f4); }
html[data-lux] .nav-lien.actif { color: var(--sb-fort, #d3e2f4); }
html[data-lux] .carte-geo { background: var(--f3, #0d1f3d); }
html[data-lux] tr:hover td { background: rgba(255,255,255,.03); }
html[data-lux] .connexion.co-marque .carte { color: #0f1b2d; background: linear-gradient(180deg, #ffffff, #eef2f6); }
html[data-lux] .connexion.co-marque .role-choix, html[data-lux] .connexion.co-marque .champ input, html[data-lux] .connexion.co-marque select { background: #f4f7fa; color: #10233f; border-color: #c3cbd4; }
html[data-lux] .connexion.co-marque .btn:not(.principal) { background: #fff; color: #10233f; border-color: #c3cbd4; }

/* ---------- Documents officiels (bon de commande, fiches) : papier blanc, imprimables en PDF ---------- */
#impression { display: none; }
@media print {
  body.impression-doc > *:not(#impression) { display: none !important; }
  body.impression-doc #impression { display: block; }
  body.impression-doc { background: #fff !important; }
  @page { size: letter; margin: 14mm; }
}
.doc-officiel { background: #fff; color: #111; font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 28px; border-radius: 8px; position: relative; overflow: hidden; }
#impression .doc-officiel { padding: 0; border-radius: 0; }
.doc-officiel h1, .doc-officiel h2, .doc-officiel h3 { color: #0b2545; margin: 0; }
.doc-officiel .doc-tete { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 3px solid #0b2545; padding-bottom: 14px; flex-wrap: wrap; }
.doc-officiel .doc-tete img { max-height: 64px; max-width: 200px; display: block; margin-bottom: 6px; }
.doc-officiel .doc-titre { text-align: right; }
.doc-officiel .doc-titre h1 { font-size: 22px; letter-spacing: .04em; }
.doc-officiel .doc-titre .doc-num { font-size: 18px; font-weight: 700; color: #111; }
.doc-officiel .doc-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.doc-officiel .doc-bloc { border: 1px solid #c9d1db; border-radius: 6px; padding: 10px 12px; }
.doc-officiel .doc-bloc h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #55657a; margin-bottom: 4px; }
.doc-officiel table { width: 100%; border-collapse: collapse; }
.doc-officiel th { background: #0b2545; color: #fff; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 7px 8px; }
.doc-officiel td { border-bottom: 1px solid #dde3ea; padding: 7px 8px; color: #111; }
.doc-officiel .num { text-align: right; white-space: nowrap; }
.doc-officiel .doc-totaux { width: 280px; margin: 10px 0 0 auto; }
.doc-officiel .doc-totaux td { border: 0; padding: 3px 8px; }
.doc-officiel .doc-totaux tr:last-child td { font-weight: 700; font-size: 15px; border-top: 2px solid #0b2545; }
.doc-officiel .doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.doc-officiel .doc-signatures div { border-top: 1px solid #111; padding-top: 6px; font-size: 12px; }
.doc-officiel .doc-pied { margin-top: 20px; font-size: 11px; color: #55657a; }
.doc-officiel .doc-filigrane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 54px; font-weight: 800; color: rgba(200, 30, 30, .13); transform: rotate(-24deg); text-align: center; }
#po-apercu { min-width: 0; max-width: 100%; }
.doc-officiel .doc-tableau { overflow-x: auto; contain: inline-size; }
.doc-officiel { overflow-wrap: anywhere; }
@media (max-width: 600px) { .doc-officiel { padding: 14px; font-size: 12px; } .doc-officiel th, .doc-officiel td { padding: 6px 4px; } .doc-officiel .doc-tableau th:first-child, .doc-officiel .doc-tableau td:first-child, .doc-officiel .doc-tableau th:nth-child(5), .doc-officiel .doc-tableau td:nth-child(5) { display: none; } .doc-officiel .doc-blocs, .doc-officiel .doc-signatures { grid-template-columns: 1fr; } .doc-officiel .doc-totaux { width: 100%; } .doc-officiel .doc-titre { text-align: left; } }

/* =====================================================================
   Nouveau style SIMTEC : chaque logiciel a sa couleur (--app), comme les modes d'AXE.
   Téléphone ludique (tuiles, gros chiffres, bulle de l'IA) ; ordinateur : tableau de bord à icônes (TrackPark).
   ===================================================================== */
html[data-axe] { --accent: var(--app); --accent-fort: color-mix(in srgb, var(--app) 70%, #fff); --accent-encre: #05121a; --accent-doux: color-mix(in srgb, var(--app) 16%, transparent);
  --lueur: 0 0 0 1px color-mix(in srgb, var(--app) 40%, transparent), 0 0 20px color-mix(in srgb, var(--app) 30%, transparent); }
html[data-axe] .carte > h2:first-child::before { background: linear-gradient(180deg, var(--app), color-mix(in srgb, var(--app) 40%, var(--f3, #0a1630))); }
html[data-axe] .btn.principal, html[data-axe] .barre .btn.principal { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 82%, #fff), var(--app) 55%, color-mix(in srgb, var(--app) 72%, #000)); color: #04131a; border-color: color-mix(in srgb, var(--app) 70%, #000); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px color-mix(in srgb, var(--app) 28%, transparent); }
html[data-axe] .nav-lien.actif, html[data-axe] .cote .nav-lien.actif { border-color: transparent; background: linear-gradient(90deg, color-mix(in srgb, var(--app) 26%, transparent), transparent); box-shadow: inset 3px 0 0 var(--app), 0 0 18px color-mix(in srgb, var(--app) 20%, transparent); }
html[data-axe] .nav-lien.actif svg { stroke: var(--app); }
html[data-axe] .logo-produit { color: var(--app); }
html[data-axe] a { color: color-mix(in srgb, var(--app) 55%, #fff); }
html[data-axe] .axe-menu, html[data-axe] .axe-cloche, html[data-axe] .axe-avatar, html[data-axe] .axe-ia, html[data-axe] .axe-ia-haut { display: none; }

/* ---------- Ordinateur : tableau de bord à icônes ---------- */
.tp-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-tete h1 { margin: 0; font-size: 1.6rem; }
.tp-tete p { margin: 2px 0 0; }
.tp-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-kpi { --t: var(--app); position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 20px; border-radius: 16px; text-decoration: none; color: var(--texte);
  background: linear-gradient(180deg, var(--f1, #17325d) 0%, var(--f2, #10264a) 100%); border: 1px solid var(--fb, #2b4a78); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.25); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
a.tp-kpi:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 34px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--t) 45%, transparent); }
.tp-kpi.ton-rouge { --t: #ff5d6c; } .tp-kpi.ton-orange { --t: #ffa53a; } .tp-kpi.ton-vert { --t: #3ddc97; } .tp-kpi.ton-bleu { --t: #4f8dff; } .tp-kpi.ton-gris { --t: #9fb3cf; }
.tp-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 18%, transparent); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); }
.tp-ic svg { width: 22px; height: 22px; stroke: var(--t); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tp-txt { min-width: 0; }
.tp-lib { font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: #9fb3cf; }
.tp-val { font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin-top: 4px; color: var(--t); font-variant-numeric: tabular-nums; }
.tp-kpi.ton-app .tp-val, .tp-kpi.ton-gris .tp-val, .tp-kpi.ton-bleu .tp-val { color: var(--sb-fort, #d3e2f4); }
.tp-sous { font-size: .82rem; color: #aebdd3; margin-top: 2px; }
.tp-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--t) 18%, transparent); }
.tp-barre i { display: block; height: 100%; background: var(--t); box-shadow: 0 0 10px var(--t); }
.tp-deux { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.tp-deux .carte { margin: 0; }
.graph-annee { width: 100%; height: 240px; display: block; margin-top: 10px; }
.graph-annee .g-e { fill: var(--app); }
.graph-annee .g-s { fill: #6f86ad; }
.graph-annee text { fill: #9fb3cf; font-size: 12px; font-family: var(--police); }
.graph-legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: #aebdd3; margin-top: 6px; }
.graph-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.graph-legende i.g-e { background: var(--app); } .graph-legende i.g-s { background: #6f86ad; }
.tp-liste, .axe-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.tp-liste li + li, .axe-liste li + li { border-top: 1px solid rgba(160,190,255,.14); }
html[data-axe] .tp-liste a, html[data-axe] .axe-liste a, .tp-liste a, .axe-liste a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--texte); text-decoration: none; font-size: .9rem; }
.tp-liste a > span:nth-child(2), .axe-liste a > span:nth-child(2) { flex: 1; min-width: 0; }
.tp-liste svg, .axe-liste svg { width: 16px; height: 16px; stroke: #9fb3cf; fill: none; stroke-width: 2; flex: none; }
.point.rouge { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .point.jaune { background: var(--attention); } .point.bleu { background: #4f8dff; }
@media (max-width: 1100px) { .tp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-deux { grid-template-columns: 1fr; } }

/* ---------- Téléphone : le style d'AXE ---------- */
.axe-titre, .axe-fiches, .axe-hero, .axe-modes, .axe-grand, .axe-deux, .axe-progres, .axe-tuiles, .axe-section, .axe-liste { display: none; }
@media (max-width: 760px) {
  html[data-axe] body { background: radial-gradient(700px 360px at 50% -80px, color-mix(in srgb, var(--app) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--f2, #0f2343) 0%, var(--f3, #0a1630) 100%) fixed; }
  html[data-axe] .barre { display: grid; grid-template-columns: 44px 1fr auto auto auto; align-items: center; gap: 8px; padding: 10px 14px; background: color-mix(in srgb, var(--f3, #0a1630) 92%, transparent); border-bottom: 1px solid rgba(160,190,255,.12); }
  html[data-axe] .barre > *:not(.axe-menu):not(.logo-barre):not(.axe-cloche):not(.axe-avatar):not(.axe-ia-haut) { display: none !important; }
  html[data-axe] .barre .logo-barre { display: block; height: 34px; justify-self: center; border-radius: 8px; }
  html[data-axe] .axe-menu, html[data-axe] .axe-cloche { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--sb-fort, #d3e2f4); position: relative; }
  html[data-axe] .axe-menu svg, html[data-axe] .axe-cloche svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  html[data-axe] .axe-cloche .pastille { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: .68rem; display: grid; place-items: center; padding: 0 4px; border-radius: 9px; background: var(--danger); color: var(--sb-fort, #d3e2f4); font-weight: 800; }
  html[data-axe] .axe-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #04131a; text-decoration: none; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 75%, #fff), var(--app)); box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 4px 14px color-mix(in srgb, var(--app) 40%, transparent); }
  html[data-axe] .bandeau-demo { font-size: .72rem; padding: 4px 14px; }
  html[data-axe] .contenu { padding-bottom: 120px; }
  html[data-axe] .axe-ia { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; z-index: 19; color: var(--sb-fort, #d3e2f4);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app) 60%, #fff), var(--app) 55%, color-mix(in srgb, var(--app) 60%, #000)); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.12); }
  html[data-axe] .axe-ia svg { width: 28px; height: 28px; stroke: #04131a; fill: none; stroke-width: 2; }
  html[data-axe] .axe-ia-point { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #3ddc97; border: 2px solid var(--f3, #0a1630); }
  html[data-axe] .nav-bas { background: color-mix(in srgb, var(--f3, #0a1630) 97%, transparent); border-top: 1px solid rgba(160,190,255,.14); }
  html[data-axe] .nav-bas a.actif { color: var(--app); }
  html[data-axe] .nav-bas a.actif svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--app) 60%, transparent)); }
  html[data-axe] .nav-bas .scan-central span.rond { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app) 60%, #fff), var(--app) 60%); color: #04131a; box-shadow: 0 8px 22px color-mix(in srgb, var(--app) 45%, transparent), 0 0 0 4px var(--f3, #0a1630); }
  html[data-axe] .carte, html[data-axe] .kpi { border-radius: 20px; }
  html[data-axe] .tp-tete h1 { font-size: 1.35rem; }
  html[data-axe] .tp-tete .btn span, html[data-axe] .tp-tete .btn { font-size: .85rem; }
  html[data-axe] .tp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-axe] .tp-kpi { flex-direction: column; gap: 8px; padding: 14px 14px 18px; }
  html[data-axe] .tp-val { font-size: 1.35rem; }

  /* L'accueil du téléphone */
  .axe-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
  .axe-hero-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 75%, #fff), var(--app)); box-shadow: 0 8px 22px color-mix(in srgb, var(--app) 35%, transparent); }
  .axe-hero-ic svg { width: 30px; height: 30px; stroke: #04131a; fill: none; stroke-width: 2; stroke-linejoin: round; }
  .axe-hero h1 { margin: 0; font-size: 1.7rem; letter-spacing: .02em; font-weight: 850; }
  .axe-hero h1 span { color: var(--app); }
  .axe-hero p { margin: 2px 0 0; color: #aebdd3; font-size: .95rem; }
  .axe-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 20px; background: rgba(5, 14, 32, .55); border: 1px solid rgba(160,190,255,.12); margin-bottom: 16px; }
  .axe-modes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 15px; border: 0; background: transparent; color: #dbe5f5; font: inherit; font-weight: 750; font-size: .9rem; cursor: pointer; }
  .axe-modes svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linejoin: round; }
  .axe-modes button.actif { color: #04131a; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 70%, #fff), var(--app)); box-shadow: 0 6px 18px color-mix(in srgb, var(--app) 40%, transparent), 0 1px 0 rgba(255,255,255,.4) inset; }
  .axe-grand, .axe-stat, .axe-progres { display: flex; text-decoration: none; color: var(--texte) !important; border-radius: 22px; background: linear-gradient(180deg, var(--f1, #17325d), var(--f2, #10264a)); border: 1px solid var(--fb, #2b4a78); box-shadow: 0 12px 26px rgba(0,0,0,.25); }
  .axe-grand { align-items: center; justify-content: space-between; padding: 20px; margin-bottom: 12px; }
  .axe-grand strong { display: block; font-size: 2.15rem; font-weight: 850; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .axe-lib { color: #aebdd3; font-size: .95rem; } .axe-lib.petit { font-size: .82rem; }
  .axe-mini { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
  .axe-mini i { width: 10px; border-radius: 3px; background: var(--app); box-shadow: 0 0 10px color-mix(in srgb, var(--app) 50%, transparent); }
  .axe-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .axe-stat { flex-direction: column; align-items: center; padding: 16px 10px; }
  .axe-stat span { color: #aebdd3; font-size: .92rem; }
  .axe-stat strong { font-size: 2rem; font-weight: 850; margin-top: 4px; }
  .axe-stat.rouge strong { color: #ff6b78; } .axe-stat.orange strong { color: #ffb547; }
  .axe-progres { flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; }
  .axe-progres .ligne span:first-child { color: #aebdd3; } .axe-progres strong { font-size: 1.35rem; }
  .axe-barre { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
  .axe-barre i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--app) 70%, #fff), var(--app)); }
  .axe-progres small { color: var(--app); font-weight: 650; }
  .axe-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .axe-tuile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 124px; border-radius: 22px; text-decoration: none; color: var(--texte) !important;
    background: linear-gradient(180deg, var(--f1, #17325d), var(--f2, #10264a)); border: 1px solid var(--fb, #2b4a78); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 22px rgba(0,0,0,.25); transition: transform .12s ease; }
  .axe-tuile:active { transform: scale(.97); }
  .axe-tuile-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent), 0 1px 0 rgba(255,255,255,.45) inset; }
  .axe-tuile-ic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
  .axe-tuile strong { font-size: 1.08rem; }
  .axe-tuile small { color: #aebdd3; font-size: .84rem; line-height: 1.3; }
  .axe-tuile .pastille { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: grid; place-items: center; background: var(--danger); color: var(--sb-fort, #d3e2f4); font-weight: 800; font-size: .8rem; }
  .axe-section { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 4px; }
  .axe-section h2 { margin: 0; font-size: 1.15rem; }
  .axe-section a { font-weight: 700; text-decoration: none; }
  .axe-liste { display: block; border-radius: 20px; background: linear-gradient(180deg, var(--f1, #17325d), var(--f2, #10264a)); border: 1px solid var(--fb, #2b4a78); padding: 2px 14px; margin-top: 8px; }
  .axe-liste a { padding: 14px 0; font-size: .92rem; }
}

@media (max-width: 760px) {
  html[data-axe] .axe-titre { display: block; padding: 16px 16px 0; font-size: 1.55rem; font-weight: 850; letter-spacing: .01em; }
  html[data-axe] .axe-titre::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; margin-top: 6px; background: var(--app); box-shadow: 0 0 10px var(--app); }
  html[data-axe] .inv-table, html[data-axe] .axe-cache { display: none; }
  html[data-axe] .axe-fiches { display: flex; flex-direction: column; gap: 10px; }
  .axe-fiche { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; text-decoration: none; color: var(--texte) !important; background: linear-gradient(180deg, var(--f1, #17325d), var(--f2, #10264a)); border: 1px solid var(--fb, #2b4a78); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
  .axe-fiche:active { transform: scale(.98); }
  .axe-fiche > img, .axe-fiche-ic { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex: none; background: #fff; }
  .axe-fiche-ic { display: grid; place-items: center; background: color-mix(in srgb, var(--app) 18%, transparent); border: 1px solid color-mix(in srgb, var(--app) 40%, transparent); }
  .axe-fiche-ic svg { width: 28px; height: 28px; stroke: var(--app); fill: none; stroke-width: 1.9; stroke-linejoin: round; }
  .axe-fiche-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .axe-fiche-txt strong { font-size: 1rem; line-height: 1.25; }
  .axe-fiche-txt small { color: #9fb3cf; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .axe-fiche-txt em { font-style: normal; align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-fort, #d3e2f4); background: var(--danger); border-radius: 6px; padding: 1px 6px; }
  .axe-jauge { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 5px; overflow: hidden; }
  .axe-jauge i { display: block; height: 100%; border-radius: 4px; }
  .axe-jauge.vert i { background: #3ddc97; } .axe-jauge.orange i { background: #ffb547; } .axe-jauge.rouge i { background: #ff5d6c; }
  .axe-fiche-n { flex: none; min-width: 56px; text-align: center; padding: 6px 4px; border-radius: 14px; background: rgba(5,14,32,.5); }
  .axe-fiche-n b { display: block; font-size: 1.6rem; line-height: 1; font-weight: 850; }
  .axe-fiche-n small { color: #9fb3cf; font-size: .7rem; }
  .axe-fiche-n.rouge b { color: #ff6b78; } .axe-fiche-n.orange b { color: #ffb547; } .axe-fiche-n.vert b { color: #3ddc97; }
}

@media (max-width: 760px) {
  /* Le menu « Plus » devient un tiroir d'icônes de couleur */
  html[data-axe] .plus-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; padding: 18px 10px; }
  html[data-axe] .plus-liens .nav-lien { flex-direction: column; gap: 6px; padding: 4px 2px; text-align: center; font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--sb-fort, #d3e2f4); background: none; box-shadow: none; border-radius: 0; }
  html[data-axe] .plus-liens .nav-lien svg { width: 54px; height: 54px; padding: 13px; border-radius: 16px; stroke: #fff; stroke-width: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--app)) 70%, #fff), var(--c, var(--app))); box-shadow: 0 6px 14px color-mix(in srgb, var(--c, var(--app)) 35%, transparent), 0 1px 0 rgba(255,255,255,.4) inset; }
  html[data-axe] .plus-liens .nav-lien:nth-child(7n+1) { --c: #14c8b0; } html[data-axe] .plus-liens .nav-lien:nth-child(7n+2) { --c: #3b82f6; }
  html[data-axe] .plus-liens .nav-lien:nth-child(7n+3) { --c: #f59e0b; } html[data-axe] .plus-liens .nav-lien:nth-child(7n+4) { --c: #ef4444; }
  html[data-axe] .plus-liens .nav-lien:nth-child(7n+5) { --c: #8b5cf6; } html[data-axe] .plus-liens .nav-lien:nth-child(7n+6) { --c: #22c55e; }
  html[data-axe] .plus-liens .nav-lien:nth-child(7n+7) { --c: #ec4899; }
  html[data-axe] .plus-liens .nav-lien span { display: block; }
}

/* Cases avec un chiffre : on appuie dessus pour voir ce qu'il y a dedans */
.kpi-lien { display: block; cursor: pointer; color: inherit; text-decoration: none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.kpi-lien:hover { transform: translateY(-2px); border-color: var(--app, var(--accent)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.kpi-lien:active { transform: scale(.98); }
.kpi-lien:focus-visible { outline: 2px solid var(--app, var(--accent)); outline-offset: 2px; }
.kpi-lien.actif { border-color: var(--app, var(--accent)); box-shadow: 0 0 0 2px var(--app, var(--accent)) inset; }
.kpi-voir { position: absolute; right: 10px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--app, var(--accent)) 18%, transparent); color: var(--app, var(--accent)); }
.kpi.danger .kpi-voir { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.kpi.attention .kpi-voir { background: color-mix(in srgb, var(--attention) 18%, transparent); color: var(--attention); }
.kpi-voir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.kpi-liste li { align-items: flex-start; }
.contenu [id] { scroll-margin-top: 90px; }
@media (max-width: 760px) { html[data-axe] .contenu > .entete > h1 { display: none; } }

/* ---------- Haut de gamme : cases en couleur, gros chiffres, profondeur ---------- */
html[data-axe] .kpi { --k: var(--app); border-radius: 18px; padding: 16px 18px 18px; border: 1px solid color-mix(in srgb, var(--k) 50%, transparent);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--k) 18%, var(--f1, #142c52)) 0%, var(--f3, #0d1f3d) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 30px rgba(0,0,0,.30), 0 0 24px color-mix(in srgb, var(--k) 14%, transparent); animation: axe-monte .45s ease both; }
html[data-axe] .kpi.danger { --k: #ff5d6c; } html[data-axe] .kpi.attention { --k: #ffa53a; } html[data-axe] .kpi.ok { --k: #3ddc97; }
html[data-axe] .kpi::after { height: 4px; background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 30%, transparent)); box-shadow: 0 0 14px var(--k); }
html[data-axe] .kpi .chiffre { font-size: 2.3rem; font-weight: 850; letter-spacing: -.02em; color: color-mix(in srgb, var(--k) 78%, #fff); text-shadow: 0 2px 0 rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
html[data-axe] .kpi .chiffre-lib { color: #c9d6ea; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 750; }
html[data-axe] .kpi .kpi-voir { background: color-mix(in srgb, var(--k) 22%, transparent); color: var(--k); }
html[data-axe] .kpi-lien:hover { border-color: var(--k); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 18px 36px rgba(0,0,0,.36), 0 0 30px color-mix(in srgb, var(--k) 30%, transparent); }
html[data-axe] .kpi-lien.actif { box-shadow: 0 0 0 2px var(--k), 0 0 30px color-mix(in srgb, var(--k) 40%, transparent); }
html[data-axe] .grille > .kpi:nth-child(2) { animation-delay: .05s; } html[data-axe] .grille > .kpi:nth-child(3) { animation-delay: .1s; } html[data-axe] .grille > .kpi:nth-child(4) { animation-delay: .15s; }
@keyframes axe-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html[data-axe] .kpi, html[data-axe] .axe-fiche { animation: none; } }

@media (max-width: 760px) {
  html[data-axe] .kpi .chiffre { font-size: 2rem; }
  html[data-axe] .grille.g3:has(> .kpi), html[data-axe] .grille.g4:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-axe] .grille.g3 > .kpi:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .axe-fiche { --k: var(--app); position: relative; overflow: hidden; animation: axe-monte .4s ease both; background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--k) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--f1, #17325d), var(--f2, #0f2446)); border-color: color-mix(in srgb, var(--k) 35%, var(--fb, #2b4a78)); }
  .axe-fiche::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); box-shadow: 0 0 12px var(--k); }
  .axe-fiche.ton-rouge { --k: #ff5d6c; } .axe-fiche.ton-orange { --k: #ffa53a; } .axe-fiche.ton-vert { --k: #3ddc97; }
  .axe-fiche > img, .axe-fiche-haut > img { width: 70px; height: 70px; border-radius: 16px; object-fit: cover; flex: none; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
  .axe-fiche-n { background: color-mix(in srgb, var(--k) 14%, rgba(5,14,32,.55)); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
  .axe-fiche-n.app b { color: color-mix(in srgb, var(--app) 75%, #fff); }
  .axe-jauge.app i { background: var(--app); }
  .axe-jauge i { box-shadow: 0 0 8px currentColor; }
  .axe-fiche-txt em.ton-bleu { background: #3b6bff; } .axe-fiche-txt em.ton-vert { background: #1f9d6b; } .axe-fiche-txt em.ton-orange { background: #d97a12; } .axe-fiche-txt em.ton-gris { background: #4b5d7a; }
  .axe-fiche.avec-btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .axe-fiche-haut { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte) !important; }
  .axe-fiche-btns { display: flex; gap: 10px; }
  .axe-gros { --g: var(--app); flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 16px; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
    color: var(--sb-fort, #d3e2f4); border: 1px solid color-mix(in srgb, var(--g) 60%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--g) 85%, #fff), var(--g) 50%, color-mix(in srgb, var(--g) 70%, #000));
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 18px color-mix(in srgb, var(--g) 30%, transparent); transition: transform .1s ease; }
  .axe-gros:active { transform: scale(.96); }
  .axe-gros svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
  .axe-gros.ton-orange { --g: #f08a1c; } .axe-gros.ton-vert { --g: #1fb97a; } .axe-gros.ton-rouge { --g: #e5485a; } .axe-gros.ton-bleu { --g: #3b6bff; }
  .axe-gros.ton-app { color: #04131a; }
  .axe-gros:disabled { opacity: .4; }
}
.point.vert { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
html[data-axe] .kpi .chiffre.long { font-size: 1.7rem; white-space: nowrap; }
@media (max-width: 760px) {
  html[data-axe] .kpi .chiffre.long { font-size: 1.45rem; }
  html[data-axe] .liste-alertes li { display: grid; grid-template-columns: 12px 1fr auto; align-items: start; gap: 6px 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid rgba(160,190,255,.14); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
  html[data-axe] .liste-alertes li > .point { margin-top: 6px; }
  html[data-axe] .liste-alertes li > span[style*="flex:1"], html[data-axe] .liste-alertes li > span:not(.point) { min-width: 0; }
  html[data-axe] .liste-alertes li > .btn, html[data-axe] .liste-alertes li > button { grid-column: 2 / -1; justify-self: start; min-height: 40px; }
  html[data-axe] .liste-alertes a { color: var(--texte); text-decoration: none; font-weight: 650; }
}
/* Téléphone haut de gamme : chaque ligne de tableau devient une fiche en relief */
@media (max-width: 760px) {
  html[data-axe] table.empile tr { --k: var(--app); position: relative; margin: 0 0 10px; padding: 14px 14px 12px 18px; border: 1px solid color-mix(in srgb, var(--k) 30%, var(--fb, #2b4a78)); border-radius: 18px;
    background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--k) 13%, transparent), transparent 55%), linear-gradient(180deg, var(--f1, #17325d), var(--f2, #0f2446)); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
  html[data-axe] table.empile tr:last-child { border-bottom: 1px solid color-mix(in srgb, var(--k) 30%, var(--fb, #2b4a78)); margin-bottom: 0; }
  html[data-axe] table.empile tr::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--k); box-shadow: 0 0 10px var(--k); }
  html[data-axe] table.empile tr:has(.ecart), html[data-axe] table.empile tr:has(.etiquette.rouge) { --k: #ff5d6c; }
  html[data-axe] table.empile tr:has(.etiquette.jaune) { --k: #ffa53a; }
  html[data-axe] table.empile tr:has(.etiquette.vert):not(:has(.ecart)) { --k: #3ddc97; }
  html[data-axe] table.empile tr.cliquable:active { transform: scale(.98); }
  html[data-axe] table.empile td:first-child { font-size: 1.05rem; font-weight: 750; color: var(--sb-fort, #d3e2f4); }
  html[data-axe] table.empile td.num { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  html[data-axe] table.empile td::before { color: #8fa6c8; }
  html[data-axe] table.empile .meilleur { color: #3ddc97; } html[data-axe] table.empile .ecart { color: #ff6b78; }
  html[data-axe] .carte:has(> .tableau-zone > table.empile), html[data-axe] .carte:has(> .axe-fiches) { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
}
/* Ordinateur : tuiles du tableau de bord en couleur, comme TrackPark */
html[data-axe] .tp-kpi { background: radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--t) 26%, transparent), transparent 58%), linear-gradient(160deg, color-mix(in srgb, var(--t) 14%, var(--f1, #16305a)) 0%, var(--f3, #0e2142) 100%);
  border-color: color-mix(in srgb, var(--t) 45%, var(--fb, #2b4a78)); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 30px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--t) 12%, transparent); animation: axe-monte .45s ease both; }
html[data-axe] .tp-kpi .tp-val { font-size: 2rem; color: color-mix(in srgb, var(--t) 75%, #fff); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
html[data-axe] .tp-kpi.ton-app .tp-val, html[data-axe] .tp-kpi.ton-gris .tp-val, html[data-axe] .tp-kpi.ton-bleu .tp-val { color: color-mix(in srgb, var(--t) 60%, #fff); }
html[data-axe] .tp-kpi .tp-ic { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 40%, transparent), color-mix(in srgb, var(--t) 14%, transparent)); }
html[data-axe] .tp-kpi .tp-ic svg { width: 25px; height: 25px; }
html[data-axe] .tp-grille > .tp-kpi:nth-child(n+2) { animation-delay: .04s; } html[data-axe] .tp-grille > .tp-kpi:nth-child(n+5) { animation-delay: .1s; }
.graph-annee a { cursor: pointer; } .graph-annee a:hover rect { filter: brightness(1.25); }

/* =====================================================================
   « C'est quoi ce logiciel de dingue » : 3D, reflets, ombrages, lumière
   ===================================================================== */
/* Fond vivant : deux halos de la couleur du logiciel qui bougent lentement */
html[data-axe] body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 20% 15%, color-mix(in srgb, var(--app) 20%, transparent), transparent 70%), radial-gradient(35% 30% at 85% 70%, rgba(79,141,255,.16), transparent 70%), radial-gradient(30% 25% at 60% 30%, color-mix(in srgb, var(--app) 10%, transparent), transparent 70%);
  animation: fx-aurore 22s ease-in-out infinite alternate; }
@keyframes fx-aurore { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 3%, 0) rotate(8deg); } }

/* Cartes en relief : inclinaison 3D, bord lumineux, ombre portée profonde */
html[data-axe] :is(.kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres) { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%;
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .2s; }
/* La profondeur 3D seulement pendant qu'on touche la carte : sinon Safari (iPhone) dessine le texte par-dessus les barres du haut et du bas */
html[data-axe] .fx-incline { transform-style: preserve-3d; }
html[data-axe] :is(.kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres).fx-incline { transition: transform .08s linear, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 26px 50px rgba(0,0,0,.45), 0 0 40px color-mix(in srgb, var(--k, var(--t, var(--app))) 28%, transparent); }
/* Reflet de lumière qui suit le doigt, et un éclat qui traverse la carte à l'arrivée */
html[data-axe] :is(.kpi, .tp-kpi, .axe-tuile, .axe-grand, .axe-stat, .axe-progres)::before, html[data-axe] .axe-fiche::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 45%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 45%, transparent 60%) no-repeat;
  background-size: 100% 100%, 250% 100%; background-position: 0 0, 160% 0; animation: fx-eclat 1.6s .25s cubic-bezier(.3,.6,.3,1) both; mix-blend-mode: screen; }
@keyframes fx-eclat { to { background-position: 0 0, -60% 0; } }
html[data-axe] :is(.tp-kpi, .axe-tuile, .axe-grand, .axe-stat, .axe-progres) { position: relative; overflow: hidden; }
/* Bord biseauté : lumière en haut, ombre en bas, comme une pièce usinée */
html[data-axe] :is(.kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat) { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 14px 30px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.25); }
/* Le contenu flotte au-dessus de la carte (vraie profondeur quand on l'incline) */
html[data-axe] .fx-incline :is(.chiffre, .tp-val, .tp-ic, .axe-tuile-ic, .axe-fiche-n, .axe-fiche > img, .axe-fiche-haut > img) { transform: translateZ(28px); }
html[data-axe] .fx-incline :is(.chiffre-lib, .tp-lib, .tp-sous, .axe-tuile strong) { transform: translateZ(16px); }

/* Chiffres en relief, avec dégradé métallique de la couleur */
html[data-axe] .kpi .chiffre, html[data-axe] .tp-val { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--k, var(--t, var(--app))) 80%, #fff) 45%, var(--k, var(--t, var(--app))) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); text-shadow: none; }
html[data-axe] .axe-fiche-n b { text-shadow: 0 2px 0 rgba(0,0,0,.4); }

/* Icônes en relief : verre bombé avec reflet */
html[data-axe] :is(.axe-tuile-ic, .tp-ic, .axe-fiche-ic) { position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 0 10px 22px rgba(0,0,0,.35); }
html[data-axe] :is(.axe-tuile-ic, .tp-ic, .axe-fiche-ic)::after { content: ""; position: absolute; left: 10%; right: 10%; top: 6%; height: 42%; border-radius: 10px 10px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }

/* Boutons en 3D : ils s'enfoncent quand on appuie */
html[data-axe] :is(.btn.principal, .axe-gros) { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 0 color-mix(in srgb, var(--g, var(--app)) 55%, #000), 0 10px 22px color-mix(in srgb, var(--g, var(--app)) 35%, transparent); transition: transform .08s ease, box-shadow .08s ease; }
html[data-axe] :is(.btn.principal, .axe-gros):active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 color-mix(in srgb, var(--g, var(--app)) 55%, #000), 0 4px 10px color-mix(in srgb, var(--g, var(--app)) 25%, transparent); }

/* Les cartes arrivent en cascade */
html[data-axe] #page > * { animation: axe-monte .5s cubic-bezier(.2,.8,.2,1) both; }
html[data-axe] #page > *:nth-child(2) { animation-delay: .05s; } html[data-axe] #page > *:nth-child(3) { animation-delay: .1s; } html[data-axe] #page > *:nth-child(4) { animation-delay: .15s; } html[data-axe] #page > *:nth-child(n+5) { animation-delay: .2s; }
html[data-axe] .axe-fiches > .axe-fiche:nth-child(2) { animation-delay: .05s; } html[data-axe] .axe-fiches > .axe-fiche:nth-child(3) { animation-delay: .1s; } html[data-axe] .axe-fiches > .axe-fiche:nth-child(4) { animation-delay: .15s; } html[data-axe] .axe-fiches > .axe-fiche:nth-child(n+5) { animation-delay: .2s; }

/* Graphique de l'année en 3D : des colonnes avec dessus et côté, qui poussent */
.graph-annee .g3d { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-pousse .9s cubic-bezier(.2,.8,.2,1) both; }
.graph-annee .g3d-dessus { opacity: .95; } .graph-annee .g3d-cote { filter: brightness(.6); }
@keyframes fx-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  html[data-axe] body::before, html[data-axe] #page > *, html[data-axe] .axe-fiche, html[data-axe] :is(.kpi, .tp-kpi, .axe-tuile, .axe-grand, .axe-stat, .axe-progres)::before, html[data-axe] .axe-fiche::after, .graph-annee .g3d { animation: none; }
  html[data-axe] :is(.kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres) { transform: none; }
}
.graph-annee .g3d-dessus { filter: brightness(1.35); opacity: 1; }
.graph-annee .g3d-cote { filter: brightness(.55); }
.graph-annee .g3d rect { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }

/* ---------- Fond chrome : métal poli en dégradé, avec reflets ---------- */
html[data-fond="chrome"] body, html[data-axe][data-fond="chrome"] body {
  background:
    linear-gradient(118deg, transparent 22%, rgba(255,255,255,.10) 30%, transparent 38%, transparent 58%, rgba(255,255,255,.07) 66%, transparent 74%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #8a95a3 0%, #4c5662 18%, #262c34 42%, #1a1e24 60%, #323a44 82%, #5d6875 100%) fixed; }
html[data-fond="chrome"] body::before { background: radial-gradient(45% 35% at 15% 5%, rgba(255,255,255,.16), transparent 70%), radial-gradient(35% 30% at 85% 75%, color-mix(in srgb, var(--app) 18%, transparent), transparent 70%); }
html:is([data-fond="chrome"], [data-fond="acier"]) :is(.carte, .kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres, .axe-modes) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 38%, rgba(0,0,0,.12) 100%), linear-gradient(160deg, var(--f1) 0%, var(--f2) 55%, var(--f3) 100%); border-color: rgba(200,212,226,.32); }
html:is([data-fond="chrome"], [data-fond="acier"]) :is(.kpi, .tp-kpi) { background-image: radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--k, var(--t, var(--app))) 26%, transparent), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 40%, rgba(0,0,0,.14) 100%), linear-gradient(160deg, var(--f1) 0%, var(--f2) 60%, var(--f3) 100%); }
html[data-fond="chrome"] .cote, html[data-fond="chrome"] .barre, html[data-fond="chrome"] .nav-bas {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #59636f 0%, #353c46 45%, #1d2228 100%); border-color: rgba(200,212,226,.28); }
html[data-fond="chrome"] .barre { background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #5e6875 0%, #2c323a 100%); }
html[data-fond="chrome"] .bandeau-demo { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); }
html:is([data-fond="chrome"], [data-fond="acier"]) :is(.muet, .chiffre-lib, .tp-lib, .tp-sous, small, td::before) { color: #d3dbe4; }
html:is([data-fond="chrome"], [data-fond="acier"]) :is(.contenu > p, .contenu > .ligne .muet) { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (max-width: 760px) {
  html[data-axe]:is([data-fond="chrome"], [data-fond="acier"]) table.empile tr { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 40%, rgba(0,0,0,.12)), linear-gradient(160deg, var(--f1), var(--f2) 60%, var(--f3)); }
  html[data-axe][data-fond="chrome"] body { background-attachment: scroll; }
}

/* ---------- Fond acier brossé, blocs au bleu du logo SIMTEC ---------- */
html[data-fond="acier"] body, html[data-axe][data-fond="acier"] body {
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.16) 28%, transparent 40%, transparent 60%, rgba(255,255,255,.10) 70%, transparent 82%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #a3acb6 0%, #7f8994 22%, #5d6670 55%, #47505a 80%, #6a737d 100%) fixed; }
html[data-fond="acier"] body::before { background: radial-gradient(45% 30% at 20% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(35% 30% at 85% 80%, rgba(59,146,198,.18), transparent 70%); }
html[data-fond="acier"] .cote, html[data-fond="acier"] .barre, html[data-fond="acier"] .nav-bas {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px), linear-gradient(180deg, #3b92c6 0%, #0f4c7d 45%, #001b36 100%); border-color: rgba(108,182,226,.45); }
html[data-fond="acier"] .barre { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px), linear-gradient(180deg, #3b92c6 0%, #0b3a63 100%); }
html[data-fond="acier"] .bandeau-demo { background: linear-gradient(90deg, rgba(0,27,54,.75), rgba(0,27,54,.4)); }
html[data-fond="acier"] :is(.contenu > h1, .contenu > .ligne h1, .axe-titre, .tp-tete h1, .contenu > p, .contenu > .ligne .muet, .tp-tete p, .axe-section, .axe-hero) { text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 2px 10px rgba(0,27,54,.55); }
html[data-fond="acier"] .contenu > p.muet, html[data-fond="acier"] .contenu > .ligne .muet { color: #f4f7fa; }
html[data-fond="acier"] :is(.carte, .kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres, .axe-modes) { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 16px 32px rgba(0,18,40,.45), 0 3px 6px rgba(0,0,0,.3); }
html[data-fond="acier"] .axe-hero p { color: var(--sb-fort, #d3e2f4); font-weight: 650; }
html[data-fond="acier"] .axe-hero h1 span { background: linear-gradient(180deg, #8fd0ff 0%, #3b92c6 55%, #0d4d80 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 2px 4px rgba(0,27,54,.6)); text-shadow: none; }
/* Origine : bleu marine en dégradé, accents bleu fluo qui brillent */
html:is([data-fond="origine"], [data-fond="braise"]) { --neon: 0 0 6px color-mix(in srgb, var(--app) 80%, transparent), 0 0 18px color-mix(in srgb, var(--app) 45%, transparent); }
/* Texte net, sans lueur floue (demande d'Olivier) */
html:is([data-fond="origine"], [data-fond="braise"]) :is(.axe-hero h1 span, .nav-lien.actif span, .nav-bas a.actif, .axe-titre) { text-shadow: 0 2px 0 rgba(0,0,0,.35); }
html:is([data-fond="origine"], [data-fond="braise"]) :is(.btn.principal, .axe-gros.ton-app) { box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 4px 0 color-mix(in srgb, var(--app) 50%, #000), 0 0 22px color-mix(in srgb, var(--app) 55%, transparent); }
html:is([data-fond="origine"], [data-fond="braise"]) :is(.axe-progres i, .axe-jauge.app i, .tp-barre i) { box-shadow: 0 0 12px var(--app), 0 0 24px color-mix(in srgb, var(--app) 50%, transparent); }

/* =====================================================================
   Pas de contours en trait fin (demande d'Olivier, 2026-10-29) : des blocs pleins, en relief, avec de l'ombre.
   ===================================================================== */
html[data-axe] :is(.carte, .btn, .etiquette, .onglet, .onglets, .kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres, .axe-modes, .axe-liste li, .axe-liste a, .liste-alertes li, .recherche, .champ input, .champ select, .champ textarea, input, select, textarea, .modale, .connexion .carte, .connexion button, .cote, .barre, .nav-bas, .bandeau-demo) { border-color: transparent !important; }
html[data-axe] :is(.barre, .bandeau-demo) { border-bottom: 0 !important; }
html[data-axe] .nav-bas { border-top: 0 !important; }
/* Barres du haut et du bas pleines (rien ne paraît au travers) et au-dessus de tout */
html[data-axe] .barre { background: linear-gradient(180deg, var(--f2, #10284a), var(--f3, #0b1a33)) !important; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 30; }
html[data-axe] .nav-bas { background: linear-gradient(180deg, var(--f2, #10284a), var(--f3, #0a1630)) !important; box-shadow: 0 -8px 24px rgba(0,0,0,.45); z-index: 30; }
html[data-axe] .bandeau-demo { position: relative; z-index: 1; }
/* Cartes : bloc plein, lumière en haut, ombre en bas */
html[data-axe] .carte:not(.kpi) { background: linear-gradient(180deg, color-mix(in srgb, var(--f1, #1d3a66) 92%, #fff 8%), var(--f2, #13294d)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 14px 30px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.25); }
/* Boutons : pleins, bombés, avec ombre (plus de bouton « en contour ») */
html[data-axe] .btn:not(.principal):not(.danger) { background: linear-gradient(180deg, color-mix(in srgb, var(--f1, #1d3a66) 70%, #fff 30%), color-mix(in srgb, var(--f1, #1d3a66) 85%, #fff 6%)) !important; color: var(--sb-fort, #d3e2f4);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.3) inset, 0 6px 14px rgba(0,0,0,.35); }
html[data-axe] .btn:active { transform: translateY(1px); }
html[data-axe] .connexion :is(button, .btn):not(.principal) { background: linear-gradient(180deg, color-mix(in srgb, var(--f1, #1d3a66) 75%, #fff 18%), var(--f2, #13294d)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -2px 0 rgba(0,0,0,.3) inset, 0 8px 18px rgba(0,0,0,.35); }
html[data-axe] .connexion :is(button, .btn).actif, html[data-axe] .connexion :is(button, .btn)[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 80%, #fff), var(--app)) !important; color: #04131a; }
/* Étiquettes : pastilles pleines */
html[data-axe] .etiquette { background: rgba(255,255,255,.12); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 6px rgba(0,0,0,.25); }
html[data-axe] .etiquette.vert { background: color-mix(in srgb, var(--ok, #22c55e) 30%, transparent); }
html[data-axe] .etiquette.jaune { background: color-mix(in srgb, var(--attention, #ffb547) 30%, transparent); }
html[data-axe] .etiquette.rouge { background: color-mix(in srgb, var(--danger, #ff5d6c) 32%, transparent); }
html[data-axe] .etiquette.bleu { background: color-mix(in srgb, var(--app) 30%, transparent); }
/* Champs : creusés dans le bloc, sans trait */
html[data-axe] :is(input, select, textarea, .recherche) { background: rgba(0,0,0,.28) !important; box-shadow: 0 2px 6px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.06); }
html[data-axe] .onglet:not(.actif) { background: rgba(255,255,255,.07); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 10px rgba(0,0,0,.25); }
/* L'IA est dans la barre du haut (plus de bulle qui cache le contenu) */
@media (max-width: 760px) {
  html[data-axe] .axe-ia-haut { display: grid; place-items: center; position: relative; width: 40px; height: 40px; border-radius: 50%; color: #04131a;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app) 55%, #fff), var(--app) 60%, color-mix(in srgb, var(--app) 65%, #000)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px rgba(0,0,0,.45); }
  html[data-axe] .axe-ia-haut svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
  html[data-axe] .axe-ia-haut .axe-ia-point { top: 0; right: 0; width: 11px; height: 11px; }
}
/* Tableaux : pas de traits entre les lignes, des bandes douces à la place */
html[data-axe] :is(td, th) { border-color: transparent !important; }
html[data-axe] tbody tr:nth-child(even) { background: rgba(255,255,255,.035); }
/* Date sur sa propre ligne, au-dessus du texte */
.ia-quand { display: block; margin-bottom: 2px; }
/* Ligne de liste sans point de couleur : le texte prend toute la place (rien ne se chevauche) */
@media (max-width: 760px) { html[data-axe] .liste-alertes li:not(:has(> .point)) { grid-template-columns: 1fr auto; } }

/* =====================================================================
   PLEIN, UNI ET OPAQUE (règle d'Olivier, 2026-10-29, pour les 7 SIMTEC) :
   touches, tuiles, cartes et encadrés d'une couleur pleine, sans dégradé, sans transparence, sans effet verre,
   sans contour en trait fin. Seul le fond de la page garde son dégradé. Le relief vient des ombres noires.
   ===================================================================== */
html[data-axe] { --p-carte: #1b3763; --p-carte2: #16305a; --p-touche: #2b4b7e; --p-creux: #0e2142; --p-barre: #0b1a33;
  --ombre: 0 1px 0 rgba(255,255,255,.10) inset, 0 -2px 0 rgba(0,0,0,.28) inset, 0 10px 22px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25); }
html[data-axe] body::before { display: none !important; }
/* Aucun trait fin nulle part */
html[data-axe] :is(#page, .barre, .nav-bas, .modale, .connexion, .bandeau-demo, .axe-titre) :is(*, *::before, *::after),
html[data-axe] :is(.barre, .nav-bas, .modale, .bandeau-demo) { border-color: transparent !important; }
/* Barres pleines */
html[data-axe] :is(.barre, .nav-bas) { background: var(--p-barre) !important; backdrop-filter: none !important; }
html[data-axe] .bandeau-demo { background: #2a2b2a !important; color: #f1d68f; }
/* Cartes et encadrés : une seule couleur pleine */
html[data-axe] :is(.carte, .kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres, .axe-modes, .axe-liste a, .liste-alertes li, .modale, .connexion .carte, .bandeau-avis, .ia-module, .modele-choix) {
  background: var(--p-carte) !important; backdrop-filter: none !important; box-shadow: var(--ombre) !important; }
html[data-axe] .carte .carte, html[data-axe] .carte :is(.kpi, .liste-alertes li, .axe-fiche) { background: var(--p-carte2) !important; }
/* Plus de reflets ni d'éclats posés par-dessus (c'était de la couleur en transparence) */
html[data-axe] :is(.kpi, .tp-kpi, .axe-tuile, .axe-grand, .axe-stat, .axe-progres)::before,
html[data-axe] .axe-fiche::after, html[data-axe] :is(.axe-tuile-ic, .tp-ic, .axe-fiche-ic)::after { display: none !important; }
/* Couleur d'état : teinte pleine (mélangée à la carte, donc opaque) */
/* Touches : couleur pleine, sans dégradé ni lueur */
html[data-axe] .btn { background: var(--p-touche) !important; color: var(--sb-fort, #d3e2f4) !important; box-shadow: var(--ombre) !important; text-shadow: none; }
html[data-axe] :is(.btn.principal, .barre .btn.principal) { background: var(--app) !important; color: #04131a !important; }
html[data-axe] .btn.danger { background: #e5485a !important; color: var(--sb-fort, #d3e2f4) !important; }
html[data-axe] .axe-gros { background: var(--g, var(--app)) !important; color: var(--sb-fort, #d3e2f4); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.3) !important; }
html[data-axe] .axe-gros.ton-app { color: #04131a; }
html[data-axe] .axe-modes button { background: transparent !important; box-shadow: none !important; }
html[data-axe] .axe-modes button.actif { background: var(--app) !important; color: #04131a !important; box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; }
html[data-axe] .onglet { background: var(--p-touche) !important; color: var(--sb-fort, #d3e2f4) !important; box-shadow: 0 4px 10px rgba(0,0,0,.28) !important; }
html[data-axe] .onglet.actif { background: var(--app) !important; color: #04131a !important; }
html[data-axe] .connexion :is(button, .btn) { background: var(--p-touche) !important; color: var(--sb-fort, #d3e2f4) !important; box-shadow: var(--ombre) !important; }
html[data-axe] .connexion :is(button, .btn):is(.actif, .principal, [aria-pressed="true"]) { background: var(--app) !important; color: #04131a !important; }
/* Pastilles d'icônes : couleur pleine */
html[data-axe] .axe-tuile-ic { background: var(--c, var(--app)) !important; }
html[data-axe] .tp-kpi .tp-ic { background: var(--t, var(--app)) !important; }
html[data-axe] .tp-kpi .tp-ic svg { stroke: #fff !important; }
html[data-axe] .axe-fiche-ic { background: var(--k, var(--app)) !important; }
html[data-axe] .axe-fiche-ic svg { stroke: #fff !important; }
html[data-axe] :is(.axe-hero-ic, .axe-avatar, .axe-ia-haut, .scan-central .rond) { background: var(--app) !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important; }
/* Gros chiffres : couleur pleine (plus de dégradé dans le texte) */
html[data-axe] :is(.kpi .chiffre, .tp-val) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; filter: none !important; }
html[data-axe] .kpi .chiffre { color: color-mix(in srgb, var(--k, var(--app)) 75%, #fff) !important; }
html[data-axe] .tp-kpi .tp-val { color: color-mix(in srgb, var(--t, var(--app)) 70%, #fff) !important; }
html[data-axe] .tp-kpi:is(.ton-app, .ton-gris, .ton-bleu) .tp-val, html[data-axe] .kpi:not(.danger):not(.attention):not(.ok) .chiffre { color: var(--sb-fort, #d3e2f4) !important; }
html[data-axe] .axe-fiche-n { background: color-mix(in srgb, var(--k, var(--app)) 24%, var(--p-carte2)) !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important; }
/* Étiquettes et badges : pleins */
html[data-axe] .etiquette { background: var(--p-touche) !important; color: var(--sb-fort, #d3e2f4) !important; }
html[data-axe] .etiquette.vert { background: #1f9d6b !important; } html[data-axe] .etiquette.jaune { background: #d97a12 !important; }
html[data-axe] .etiquette.rouge { background: #d63b4d !important; } html[data-axe] .etiquette.bleu { background: #2f6fd6 !important; }
/* Barres de progression : couleur pleine, sans lueur */
html[data-axe] :is(.axe-barre, .axe-jauge, .tp-barre, .jauge) { background: var(--p-creux) !important; }
html[data-axe] :is(.axe-barre i, .axe-jauge i, .tp-barre i, .jauge span) { background: var(--k, var(--t, var(--app))) !important; box-shadow: none !important; }
html[data-axe] .axe-jauge.rouge i { background: #ff5d6c !important; } html[data-axe] .axe-jauge.orange i { background: #ffa53a !important; } html[data-axe] .axe-jauge.vert i { background: #3ddc97 !important; }
html[data-axe] .axe-mini i { background: var(--app) !important; box-shadow: none !important; }
/* Champs : creux, pleins */
html[data-axe] :is(input, select, textarea, .recherche) { background: var(--p-creux) !important; }
/* Tableaux : bandes pleines */
html[data-axe] tbody tr:nth-child(even) { background: var(--p-carte2); }
html[data-axe] { --lueur: 0 4px 12px rgba(0,0,0,.3); }
html[data-axe] .etapes .etape { background: var(--p-touche); color: #c9d6ea; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
html[data-axe] .etapes .etape.fait { background: #1f9d6b; color: var(--sb-fort, #d3e2f4); }
html[data-axe] .etapes .etape.actuelle { background: var(--app); color: #04131a; }
/* Listes au téléphone : le texte prend toute la largeur, les boutons et étiquettes passent dessous (rien ne se chevauche) */
@media (max-width: 760px) {
  html[data-axe] .liste-alertes li { grid-template-columns: 12px minmax(0, 1fr) !important; }
  html[data-axe] .liste-alertes li > :not(.point):not(:nth-child(2)) { grid-column: 2 / -1; justify-self: start; }
  html[data-axe] .liste-alertes li:not(:has(> .point)) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-axe] .liste-alertes li:not(:has(> .point)) > * { grid-column: 1 / -1; }
  html[data-axe] .liste-alertes .groupe-btn { display: flex; gap: 8px; flex-wrap: wrap; }
}
/* Couleur d'état : tons profonds et pleins */
/* Carte « L'IA a vu : à vous de décider » dans le tableau de bord */
.ia-decisions { margin: 14px 0; }
.ia-decisions .ligne { gap: 10px; margin-bottom: 8px; }
.ia-decisions-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--app, var(--accent)); flex: none; }
.ia-decisions-ic svg { width: 22px; height: 22px; stroke: #04131a; fill: none; stroke-width: 2; }
.ia-sous-titre { font-size: .95rem; margin: 14px 0 6px; color: var(--texte-2); }
/* Au téléphone, le titre de page est déjà en haut : pas de deuxième titre dans le tableau de bord */
@media (max-width: 760px) { html[data-axe] .tp-tete > div:first-child h1 { display: none; } }
html[data-axe] .toast { border: 0 !important; background: var(--p-touche) !important; box-shadow: 0 10px 26px rgba(0,0,0,.5) !important; }
/* Écran d'accueil du logiciel (photo) : mêmes règles, blocs pleins, sans verre ni trait fin */
html[data-axe] .accueil-simtec h1 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--app) !important; -webkit-text-fill-color: var(--app); }
html[data-axe] .as-sur { color: var(--sb-fort, #d3e2f4); }
html[data-axe] .as-points div { background: var(--p-carte) !important; border: 0 !important; backdrop-filter: none !important; box-shadow: var(--ombre); }
html[data-axe] .as-entrer { background: var(--app) !important; color: #04131a !important; box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.35) !important; }
html[data-axe] .as-langue { background: var(--p-touche) !important; border: 0 !important; box-shadow: var(--ombre); }
html[data-axe] .accueil-simtec::after { display: none; }
html[data-axe] .kpi .kpi-voir { background: color-mix(in srgb, var(--k, var(--app)) 30%, var(--p-carte2)) !important; }
html[data-axe] .kpi-lien .chiffre-lib { padding-right: 28px; }
/* Onglets au téléphone : une seule rangée qui défile, le bouton passe dessous */
@media (max-width: 760px) {
  html[data-axe] .ligne:has(> .onglets) { flex-wrap: wrap; row-gap: 10px; }
  html[data-axe] .ligne > .onglets { flex: 1 1 100% !important; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; }
  html[data-axe] .onglets > .onglet { flex: none; white-space: nowrap; }
}

/* =====================================================================
   LE CADRE BLEU ÉPAIS (choix d'Olivier, 2026-10-29 08h25) : carte marine pleine #04213f,
   coins arrondis de 14 px, bordure pleine de 3 px en bleu fluo, sans flou. Pas un trait fin : épais et visible.
   ===================================================================== */
html[data-axe] { --cadre: #1fa8ff; --p-carte: #04213f; --p-carte2: #0a2c52; }
html[data-axe] :is(#page > .carte, #page > * > .carte, #page > * > * > .carte, .kpi, .tp-kpi, .axe-fiche, .axe-tuile, .axe-grand, .axe-stat, .axe-progres, .axe-modes, .modale, .connexion .carte, .ia-decisions, .as-points div):not(.carte .carte) {
  border-radius: 14px !important; box-shadow: 0 0 0 3px var(--cadre), 0 12px 24px rgba(0,0,0,.4) !important; }
html[data-axe] .carte .carte, html[data-axe] .carte :is(.kpi, .axe-fiche, .tp-kpi) { box-shadow: 0 0 0 3px var(--cadre), 0 6px 14px rgba(0,0,0,.3) !important; }
html[data-axe] .axe-stat.rouge { box-shadow: 0 0 0 3px #ff5d6c, 0 12px 24px rgba(0,0,0,.4) !important; }
html[data-axe] .axe-stat.orange { box-shadow: 0 0 0 3px #ffa53a, 0 12px 24px rgba(0,0,0,.4) !important; }
/* Un peu plus d'air entre les blocs pour que le cadre respire */
html[data-axe] :is(.axe-tuiles, .axe-deux, .grille, .tp-grille) { gap: 14px !important; }
html[data-axe] .axe-fiches { gap: 14px !important; padding: 3px; }

/* Fond « dégradé de bleu » choisi par Olivier (2026-10-29) : marine plus clair au centre, plus foncé aux bords. Fixe, même au téléphone. */
html[data-axe][data-fond="origine"] { background: #081830; }
html[data-axe][data-fond="origine"] body { background: transparent !important; }
html[data-axe][data-fond="origine"] body::before { display: block !important; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; animation: none !important;
  background: radial-gradient(ellipse 75% 60% at 50% 30%, #1b3a68 0%, #16315b 30%, #0f2645 60%, #0a1c37 85%, #081830 100%) !important; }
html[data-axe] .role-choix { background: var(--p-touche, #2b4b7e) !important; background-image: none !important; }
html[data-axe] .role-choix.actif { background: #1f5fa8 !important; box-shadow: 0 0 0 3px var(--cadre, #1fa8ff) !important; }
html[data-axe] .btn:not(.principal):not(.danger-plein):not(.attention-plein) { background-image: none !important; background-color: var(--p-touche, #2b4b7e) !important; }
html[data-axe] .axe-liste { background-image: none !important; background-color: var(--p-carte, #04213f) !important; }
html[data-axe] .nav-lien.actif { background-image: none !important; background-color: #123a6b !important; }
html[data-axe] h1 { background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-axe] .cliquable:not(.ia-anneau) { background-image: none !important; }
html[data-axe] :is(.contenu > .ligne h1, .contenu > h1) { color: var(--sb-fort, #d3e2f4); -webkit-background-clip: border-box; background-clip: border-box; }
/* Une carte qui ne contient que des fiches (téléphone) : pas de deuxième cadre autour des fiches. */
@media (max-width: 760px) { html[data-axe] body #page .carte.carte:has(> .axe-fiches) { box-shadow: none !important; background: transparent !important; padding: 0 !important; } }
html[data-axe] tr { background-image: none !important; }
html[data-axe] .chiffre.long { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.15; }
/* Nouveau logo SIMTEC (mot chrome, barre bleue, « Logiciels de gestion ») : il est large, pas carré. */
.as-logo { width: 300px; border-radius: 14px; }
@media (max-width: 620px) { .as-logo { width: 240px; } }
.connexion .logo { height: auto; width: 100%; max-width: 340px; border-radius: 12px; }
html[data-axe] .barre .logo-barre { height: 40px; border-radius: 6px; }
html[data-axe] body .connexion :is(button, .btn):not(.principal):not(.actif):not([aria-pressed="true"]) { background: var(--p-touche, #2b4b7e) !important; background-image: none !important; }
html[data-axe] body .connexion :is(button, .btn):is(.actif, [aria-pressed="true"]):not(.principal) { background: var(--app) !important; background-image: none !important; color: #04131a !important; }
html[data-axe] .connexion.co-marque h2 { color: #eef3fb !important; }
html[data-axe] .cote { background: #0b1a33 !important; background-image: none !important; }
@media (max-width: 760px) { html[data-axe] body #page .carte.carte:has(> .tableau-zone > table.empile) { box-shadow: none !important; background: transparent !important; } }
@media (max-width: 760px) {
  html[data-axe] body #page table.empile tr { background: var(--p-carte, #04213f) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 0 0 3px var(--cadre, #1fa8ff), 0 10px 20px rgba(0,0,0,.35) !important; margin: 3px 3px 16px !important; width: calc(100% - 6px); }
}
@media (max-width: 760px) { html[data-axe] body #page table.empile :is(td, th) { background: transparent !important; } }
/* Tablette (Olivier : beau aussi sur tablette) : les cases se placent selon la place, le gros chiffre ne déborde jamais. */
@media (min-width: 761px) { html[data-axe] .tp-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 195px), 1fr)) !important; } }
html[data-axe] .tp-kpi .tp-val { font-size: clamp(1.25rem, 1.9vw, 2rem); white-space: nowrap; }
@media (max-width: 760px) { html[data-axe] .kpi .btn { white-space: normal; width: 100%; justify-content: center; } }
html[data-axe] .axe-hero h1.long { font-size: 1.38rem; white-space: nowrap; }
@media (max-width: 760px) { html[data-axe] .onglets.onglets-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; } html[data-axe] .onglets-grille > .onglet { white-space: normal; text-align: center; } }
/* Écran d'accueil à l'ouverture : logo SIMTEC et nom du logiciel en grand, style bleu */
#simtec-ouverture { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 34px); padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); cursor: pointer; -webkit-tap-highlight-color: transparent; background: radial-gradient(ellipse 75% 60% at 50% 34%, #1b3a68 0%, #16315b 30%, #0f2645 60%, #0a1c37 85%, #081830 100%); transition: opacity .5s ease, transform .5s ease; overflow: hidden; font-family: inherit; }
#simtec-ouverture.sortie { opacity: 0; transform: scale(1.05); pointer-events: none; }
#simtec-ouverture .so-carte { position: relative; background: #04213f; border-radius: 28px; box-shadow: 0 0 0 3px #1fa8ff, 0 30px 60px -20px rgba(0,0,0,.7); padding: clamp(24px, 5vw, 52px) clamp(22px, 6vw, 72px) clamp(22px, 4vw, 40px); text-align: center; width: min(92vw, 820px); animation: soIn .8s cubic-bezier(.2,.8,.2,1) both; overflow: hidden; }
#simtec-ouverture .so-logo { display: block; width: min(78vw, 560px); height: auto; margin: 0 auto; border-radius: 14px; }
#simtec-ouverture .so-barre { display: block; height: 8px; width: 70%; margin: clamp(14px, 2.4vw, 22px) auto 0; border-radius: 4px; background: #1fa8ff; }
#simtec-ouverture .so-nom { margin: clamp(14px, 2.4vw, 22px) 0 0; color: #1fa8ff; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: 1; font-size: min(92px, calc((min(92vw, 820px) - 12vw) / (var(--n, 8) * .7))); white-space: nowrap; text-shadow: 0 3px 0 #021226; }
#simtec-ouverture .so-accroche { margin: clamp(12px, 2vw, 18px) 0 0; color: #9fd4ff; font-weight: 700; font-size: clamp(15px, 2.2vw, 20px); }
#simtec-ouverture .so-bt { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 14px; background: #1fa8ff; color: #04213f; font-family: inherit; font-weight: 800; font-size: clamp(17px, 2.2vw, 21px); line-height: 1; padding: 18px 30px; box-shadow: 0 5px 0 #0b5f99, 0 16px 28px -12px rgba(0,0,0,.6); cursor: pointer; animation: soIn .8s .3s cubic-bezier(.2,.8,.2,1) both; }
#simtec-ouverture .so-bt:active { transform: translateY(4px); box-shadow: 0 1px 0 #0b5f99; }
#simtec-ouverture .so-bt svg { width: 22px; height: 22px; stroke: currentColor; }
#simtec-ouverture .so-aide { margin: 0; color: #9fd4ff; font-weight: 600; font-size: 15px; animation: soIn .8s .45s both; }
#simtec-ouverture .so-pied { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 10px; color: #9fd4ff; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
#simtec-ouverture .so-pied img { height: 20px; width: auto; border-radius: 3px; }
@keyframes soIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-height: 600px) { #simtec-ouverture .so-pied { display: none; } }
@media (prefers-reduced-motion: reduce) { #simtec-ouverture, #simtec-ouverture * { animation: none !important; transition: none !important; } }
/* Écran de connexion (modèle d'Olivier) : fond bleu acier brossé, logo, nom du logiciel, carte centrale, bas de page. */
.co-acier { position: fixed; inset: 0; z-index: 50; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(18px, 4vh, 40px) 16px 0; color: #e6edf7; font-family: inherit;
  background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(70,120,180,.45) 0%, rgba(30,70,120,.2) 45%, transparent 75%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px, rgba(0,0,0,.05) 3px 4px), linear-gradient(180deg, #12345c 0%, #0d2a4d 45%, #08203d 100%); }
.co-acier .co-haut { text-align: center; }
.co-acier .co-logo { display: block; width: min(80vw, 380px); height: auto; margin: 0 auto; border-radius: 10px; }
.co-acier .co-nom { margin: 10px 0 0; color: #f2f6fb; font-weight: 800; font-size: clamp(32px, 8vw, 46px); letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; text-shadow: 0 2px 6px rgba(0,0,0,.45); background: none !important; -webkit-text-fill-color: currentColor !important; }
.co-acier .co-carte { margin: clamp(16px, 3vh, 26px) 0 24px; width: min(100%, 380px); box-sizing: border-box; background: linear-gradient(180deg, rgba(20,48,84,.92), rgba(12,34,62,.94)); border: 1px solid rgba(140,180,230,.35); border-radius: 12px; padding: 22px 22px 18px; box-shadow: 0 0 22px rgba(60,140,230,.18), 0 18px 40px -16px rgba(0,0,0,.7); }
.co-acier .co-carte h2 { margin: 0 0 14px; text-align: center; color: #eef3fa; font-size: 1.15rem; font-weight: 600; }
.co-acier label { display: block; margin: 10px 0 6px; color: #e3eaf4; font-size: .9rem; font-weight: 600; }
.co-acier .co-champ { position: relative; }
.co-acier .co-champ svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: #9db4d3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
html[data-lux] body #app .co-acier .co-champ input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px 0 36px; border-radius: 7px; border: 1px solid rgba(140,180,230,.35) !important; background: #0b223f !important; color: #eef3fa; font: inherit; font-size: 1rem; letter-spacing: .04em; box-shadow: none; outline: none; }
html[data-lux] body #app .co-acier .co-champ input:focus { border-color: #4aa8ff !important; box-shadow: 0 0 0 1px #4aa8ff, 0 0 12px rgba(74,168,255,.45); }
.co-acier .co-msg { min-height: 1.2em; margin: 8px 0 0; color: #ff9b9b; font-size: .88rem; font-weight: 600; text-align: center; }
html[data-lux] body #app .co-acier .co-entrer { display: block; width: 100%; height: 42px; margin-top: 8px; border: 1px solid rgba(160,195,240,.35) !important; border-radius: 7px; background: #2a4f7e !important; background-image: none !important; color: #eef3fa !important; font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.3) !important; }
html[data-lux] body #app .co-acier .co-entrer:hover { background: #335d93 !important; }
.co-acier .co-oubli { display: block; margin: 16px 0 2px; text-align: center; color: #a9c3e4; font-size: .88rem; text-decoration: none; }
.co-acier .co-demo { margin-top: 14px; border-top: 1px solid rgba(140,180,230,.2); padding-top: 10px; }
.co-acier .co-demo summary { cursor: pointer; color: #8fb2dc; font-size: .82rem; text-align: center; list-style: none; }
.co-acier .co-demo summary::-webkit-details-marker { display: none; }
.co-acier .co-demo > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
html[data-lux] body #app .co-acier .co-demo button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px; border: 1px solid rgba(140,180,230,.25) !important; border-radius: 7px; background: #0b223f !important; background-image: none !important; color: #c9d8ec !important; font: inherit; text-align: left; cursor: pointer; box-shadow: none !important; }
.co-acier .co-demo button span { font-size: .74rem; }
.co-acier .co-demo button b { color: #6fc0ff; font-size: .95rem; letter-spacing: .1em; }
html[data-lux] body #app .co-acier .co-langue { display: block; margin: 12px auto 0; padding: 4px 10px; border: 0 !important; background: transparent !important; background-image: none !important; color: #8fb2dc !important; font: inherit; font-size: .8rem; cursor: pointer; box-shadow: none !important; }
.co-acier .co-pied { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-sizing: border-box; color: #d8e2ef; font-size: .8rem; }
.co-acier .co-pied .fabrique { margin: 0; color: #d8e2ef; } .co-acier .co-pied .fabrique span { color: #d8e2ef; }
@media (max-width: 700px) { .co-acier .co-pied { flex-direction: column; text-align: center; gap: 6px; } }
html[data-lux] body #app .co-acier .co-champ input.co-6 { height: 52px; font-size: 1.6rem; font-weight: 700; letter-spacing: .45em; text-align: center; padding-left: 36px; } html[data-lux] body #app .co-acier .co-champ input.co-6::placeholder { font-size: 1rem; letter-spacing: .05em; font-weight: 500; color: #7f97b8; }

/* Lignes d'alertes et « L'IA a vu » (Olivier 2026-10-29 13h02 : « les couleurs je n'en veux pas », texte collé au bord) :
   lignes sobres dans le bleu de la carte, un petit point de couleur pour l'urgence, de l'air à gauche. Téléphone, tablette et ordi. */
html[data-axe] body .liste-alertes li,
html[data-axe] body .liste-alertes li:has(> .point.rouge),
html[data-axe] body .liste-alertes li:has(> .point.jaune),
html[data-axe] body .liste-alertes li:has(> .point.vert) {
  display: grid !important; grid-template-columns: 10px minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px 14px !important;
  background: var(--p-carte2, #0a2c52) !important; background-image: none !important; border: 0 !important; border-radius: 12px !important;
  padding: 12px 16px !important; margin: 0 0 8px !important; box-shadow: none !important; }
html[data-axe] body .liste-alertes li:last-child { margin-bottom: 0 !important; }
html[data-axe] body .liste-alertes li > .point { margin: 0 !important; width: 10px; height: 10px; }
html[data-axe] body .liste-alertes li:not(:has(> .point)) { grid-template-columns: minmax(0, 1fr) auto !important; }
html[data-axe] body .liste-alertes li > span:not(.point) { min-width: 0; overflow-wrap: anywhere; }
html[data-axe] body .liste-alertes .groupe-btn { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) {
  html[data-axe] body .liste-alertes li { grid-template-columns: 10px minmax(0, 1fr) !important; align-items: start !important; }
  html[data-axe] body .liste-alertes li > .point { margin-top: 7px !important; align-self: start !important; }
  html[data-axe] body .liste-alertes li > :not(.point):not(:nth-child(2)) { grid-column: 2 / -1; justify-self: start; }
  html[data-axe] body .liste-alertes li:not(:has(> .point)) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-axe] body .liste-alertes li:not(:has(> .point)) > * { grid-column: 1 / -1; }
  html[data-axe] body .liste-alertes .groupe-btn { justify-content: flex-start; }
}
/* Logo SIMTEC 3D définitif (Olivier 2026-10-29 13h58) : large, jamais écrasé. */
html[data-axe] .cote .logo { height: auto !important; width: 100% !important; max-width: 230px; aspect-ratio: auto; object-fit: contain; }
html[data-axe] .barre .logo-barre { height: 32px !important; width: auto !important; }

/* =====================================================================
   SIMTEC bleu — passe d'Olivier du 2026-10-29 14h05 :
   pleine largeur, aucun texte blanc (titres chrome pâle, texte bleu pâle, sous-texte gris acier),
   une seule famille de bleus (un petit point rouge pour l'urgent), tuiles identiques et lisibles,
   bande « données inventées » marine, pas de titre en double. Vérifié par tests/audit-visuel.js.
   ===================================================================== */
html[data-axe] { --sb-titre: #cfe0f5; --sb-fort: #d3e2f4; --sb-texte: #bcd0e8; --sb-sous: #93a9c4; --sb-bleu: #3d8bfd; --sb-icone: #1d5fae; --texte: #bcd0e8; --texte-2: #93a9c4; }
html[data-axe] body #app { color: var(--sb-texte); }
html[data-axe] body #app :is(h1, h2, h3, h4, .titre-page, .axe-titre, .carte > h2:first-child) { color: var(--sb-titre) !important; -webkit-text-fill-color: currentColor !important; background-image: none !important; text-shadow: none !important; }
html[data-axe] body #app :is(.muet, small, .petit-texte, .tp-sous, .tp-lib, .chiffre-lib, th, .ia-quand) { color: var(--sb-sous) !important; }
html[data-axe] body #app :is(td, td strong, li, p, strong, .tp-txt, .liste-alertes span, .nav-lien, .nav-lien span, label, summary, ol > li) { color: var(--sb-texte); }
html[data-axe] body #app :is(td strong, strong, b) { color: var(--sb-fort); }

/* Pleine largeur, comme le modèle d'Olivier : le contenu utilise tout l'écran. */
@media (min-width: 761px) { html[data-axe] body .contenu { max-width: none !important; padding-left: 28px; padding-right: 28px; } }

/* Bande « Transports Démo inc. · Démo : données inventées » : marine, plus jamais brune. */
html[data-axe] body .bandeau-demo { background: #0b2545 !important; background-image: none !important; color: var(--sb-sous) !important; }

/* Pas de titre en double : à l'ordinateur, la barre du haut se tait quand la page a déjà son titre. */
@media (min-width: 761px) { html[data-axe] body .principal-zone:has(#page h1) .barre .titre-page { visibility: hidden; } }

/* Tuiles du tableau de bord : grille régulière, toutes identiques, texte plus grand, une seule famille de bleus. */
@media (min-width: 761px) {
  html[data-axe] body .tp-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important; grid-auto-rows: 1fr; }
}
html[data-axe] body .tp-kpi, html[data-axe] body .tp-kpi[class*="ton-"] { --t: var(--sb-bleu); }
html[data-axe] body .tp-kpi { min-height: 150px; }
html[data-axe] body .tp-kpi .tp-ic { background: var(--sb-icone) !important; background-image: none !important; border: 0 !important; }
html[data-axe] body .tp-kpi .tp-ic svg { stroke: var(--sb-titre) !important; }
html[data-axe] body .tp-kpi .tp-ic::after { display: none; }
html[data-axe] body .tp-kpi .tp-lib { font-size: .84rem !important; color: var(--sb-sous) !important; }
html[data-axe] body .tp-kpi .tp-val { font-size: 2.1rem !important; color: var(--sb-titre) !important; -webkit-text-fill-color: var(--sb-titre) !important; background: none !important; text-shadow: none !important; }
html[data-axe] body .tp-kpi .tp-sous { font-size: .95rem !important; color: var(--sb-texte) !important; }
html[data-axe] body .tp-kpi .tp-barre { background: rgba(61,139,253,.18) !important; }
html[data-axe] body .tp-kpi .tp-barre i { background: var(--sb-bleu) !important; box-shadow: none !important; }
html[data-axe] body .tp-kpi.ton-rouge::after { content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #ff5d6c; }
/* Mêmes règles pour les cases du téléphone et les petits chiffres. */
html[data-axe] body :is(.axe-tuile-ic, .axe-fiche-ic, .ia-decisions-ic) { background: var(--sb-icone) !important; background-image: none !important; }
html[data-axe] body :is(.axe-tuile-ic, .axe-fiche-ic, .ia-decisions-ic) svg { stroke: var(--sb-titre) !important; }
html[data-axe] body .kpi .chiffre, html[data-axe] body .axe-stat strong { color: var(--sb-titre) !important; -webkit-text-fill-color: var(--sb-titre) !important; background: none !important; }
/* Points : bleus, sauf l'urgent qui reste un petit point rouge. */
html[data-axe] body .point:not(.rouge) { background: var(--sb-bleu) !important; box-shadow: none !important; }
html[data-axe] body .point.rouge { background: #ff5d6c !important; box-shadow: none !important; }
/* Étiquettes : famille de bleus, rouge seulement pour l'urgent. */
html[data-axe] body .etiquette { background: #1d4f8f !important; color: var(--sb-fort) !important; }
html[data-axe] body .etiquette.vert { background: #1f6fbf !important; }
html[data-axe] body .etiquette.jaune { background: #2a5da0 !important; }
html[data-axe] body .etiquette.rouge { background: #8a2433 !important; color: #ffd9de !important; }
/* Boutons : texte bleu pâle (jamais blanc) ; le bouton principal garde son texte marine. */
html[data-axe] body .btn:not(.principal) { color: var(--sb-fort) !important; }

/* Carte des unités : grande, pleine largeur, bouton « Plein écran », légende en pastilles en bas. */
html[data-axe] body .carte-unites .cu-geo { height: min(62vh, 560px); }
html[data-axe] body .carte-unites .cu-leg { order: 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html[data-axe] body .carte-unites .cu-leg span { background: #0b2545; border-radius: 999px; padding: 4px 12px; color: var(--sb-texte); }
html[data-axe] body .carte-unites:fullscreen { background: #081830; padding: 16px; overflow: auto; }
html[data-axe] body .carte-unites:fullscreen .cu-geo { height: calc(100vh - 120px); }
/* Suite de l'audit : étiquette urgente en bleu avec un petit point rouge (pas de bordeaux), petits textes des fiches sur deux lignes au lieu d'être coupés, liens jamais blancs, pas de titre en double au téléphone. */
html[data-axe] body .etiquette.rouge { background: #1d4f8f !important; color: var(--sb-fort) !important; }
html[data-axe] body .etiquette.rouge::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5d6c; margin-right: 6px; vertical-align: 1px; }
html[data-axe] body .axe-fiche-txt small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
html[data-axe] body #app a:not(.btn):not(.principal) :is(span, strong):not(.pastille):not(.point):not(.etiquette) { color: var(--sb-texte); }
@media (max-width: 760px) { html[data-axe] body .principal-zone:has(#page h1) .axe-titre { display: none !important; } }
/* Messages : la liste des conversations ne coupe plus rien (deux lignes d'aperçu, en colonne au téléphone). */
html[data-axe] body .canal span { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip !important; }
@media (max-width: 760px) {
  html[data-axe] body .canaux { flex-direction: column !important; overflow-x: visible !important; max-height: none; }
  html[data-axe] body .canal { max-width: none !important; width: 100%; }
  html[data-axe] body .messagerie .carte > .btn, html[data-axe] body #msg-prive { white-space: normal; max-width: 100%; }
}
/* Les dernières touches orange deviennent bleues. */
html[data-axe] body :is(.axe-gros, .axe-fiche-txt em).ton-orange { --g: #1f6fbf; background: #1f6fbf !important; color: var(--sb-fort) !important; }
html[data-axe] body #app :is(.liste-alertes, .axe-liste) span a { color: var(--sb-texte) !important; }

/* ---------- SIMTEC bleu — téléphone de la couleur de son SIMTEC (Olivier, 2026-10-29 14h12 et 14h21) ----------
   Au téléphone seulement : en haut, en grand, le logo SIMTEC avec le S dans la couleur métal du logiciel,
   et cette couleur sur le cadre des cartes, la tuile active du menu du bas, les onglets actifs et le bouton principal.
   L'ordinateur garde le bleu commun. Aucun texte blanc : texte marine sur les métaux clairs. */
html[data-axe="atelier"]           { --metal: #6ea8f0; --metal-fonce: #2f6fc0; --metal-texte: #0b2545; }
html[data-axe="approvisionnement"] { --metal: #f0a072; --metal-fonce: #c9784a; --metal-texte: #2a1406; }
html[data-axe="repartition"]       { --metal: #3fd39a; --metal-fonce: #1fa577; --metal-texte: #062a1e; }
html[data-axe="rh"]                { --metal: #f5cf55; --metal-fonce: #c9a22c; --metal-texte: #2a1f02; }
html[data-axe="prevention"]        { --metal: #f2566e; --metal-fonce: #d23a55; --metal-texte: #2a0610; }
html[data-axe="comptabilite"]      { --metal: #d6dee9; --metal-fonce: #95a4ba; --metal-texte: #0b2545; }
html[data-axe="equipe"]            { --metal: #e4ad68; --metal-fonce: #b9803e; --metal-texte: #2a1806; }
.tel-marque { display: none; }
@media (max-width: 760px) {
  html[data-axe] .tel-marque { display: block; position: relative; margin: 0; padding: 0; background: #001f45; border-bottom: 3px solid var(--metal, #3d8bfd); }
  html[data-axe] .tel-marque img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 218; }
  html[data-axe] .barre .logo-barre { display: none !important; }
  /* La couleur du logiciel sur le téléphone */
  html[data-axe] body .axe-tuile-ic { --c: var(--metal-fonce) !important; background: var(--metal-fonce) !important; }
  html[data-axe] { --cadre: var(--metal) !important; --app: var(--metal) !important; --accent: var(--metal) !important; }
  html[data-axe] body .btn.principal, html[data-axe] body .groupe-btn .btn.principal { background: var(--metal) !important; color: var(--metal-texte) !important; border-color: var(--metal-fonce) !important; }
  html[data-axe] body .nav-bas a.actif, html[data-axe] body .nav-bas a[aria-current] { color: var(--metal) !important; }
  html[data-axe] body .nav-bas a.actif svg, html[data-axe] body .nav-bas a[aria-current] svg { stroke: var(--metal) !important; }
  html[data-axe] body .nav-bas .scan, html[data-axe] body .nav-bas .nav-scan { background: var(--metal) !important; color: var(--metal-texte) !important; }
  html[data-axe] body .tp-kpi .tp-icone, html[data-axe] body .axe-ico { background: var(--metal-fonce) !important; }
}

html[data-axe] .axe-role { display: inline-block; margin: 6px 0 4px; padding: 4px 14px; border-radius: 999px; background: var(--metal, #3d8bfd); color: var(--metal-texte, #0b2545); font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; }
/* Titre de l'accueil = statut de la personne : il peut être long (« Directeur de la maintenance ») */
html[data-axe] .axe-hero > div { min-width: 0; }
html[data-axe] .axe-hero > div[data-statut] h1 { white-space: normal !important; font-size: clamp(1.2rem, 6vw, 1.7rem); line-height: 1.15; overflow-wrap: anywhere; }

/* Mécanicien, conducteur et opérateur : vue téléphone seulement, même à l'ordinateur. « Signaler une panne » à l'ordinateur : dans un téléphone. */
.tel-seul { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 24px; background: radial-gradient(circle at 50% 30%, #12345f, #061528 70%); }
.tel-seul.tel-dans-page { min-height: 0; background: none; padding: 8px 0 24px; }
.tel-seul-cadre { width: 410px; height: min(864px, calc(100vh - 48px)); border-radius: 52px; padding: 10px; background: linear-gradient(145deg, #3b4f6b, #0d1c31 45%, #2a3d57); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 2px #5f7898 inset; flex: none; }
.tel-dans-page .tel-seul-cadre { height: min(820px, calc(100vh - 150px)); }
.tel-seul-cadre iframe { width: 100%; height: 100%; border: 0; border-radius: 42px; background: #061528; display: block; }
.tel-seul-txt { max-width: 300px; display: flex; flex-direction: column; gap: 12px; color: #b9cde6; }
.tel-seul-txt strong { font-size: 1.6rem; color: #d3e2f4; }
.tel-seul-txt .btn { align-self: flex-start; }

/* Logos SIMTEC détourés : aucun cadre, aucune ombre de boîte, le logo se fond dans le fond */
html body img.logo, html body img.logo-s, html body img.logo-barre, html body img.as-logo, html body img.so-logo, html body img.co-logo, html body .tel-marque img { box-shadow: none !important; border-radius: 0 !important; background: transparent !important; outline: 0 !important; }