/* DCEGO Réception — application. Charte DCEGO, comme le site reception.dcego.com : bleu nuit, bleu, sarcelle, Fira Sans et
   Fira Code servies par l'application elle-même (aucun serveur tiers). Thème clair et thème sombre. */
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-display: swap; src: url('/static/fonts/fira-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 500; font-display: swap; src: url('/static/fonts/fira-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 600; font-display: swap; src: url('/static/fonts/fira-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 700; font-display: swap; src: url('/static/fonts/fira-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 500; font-display: swap; src: url('/static/fonts/fira-code-500.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 600; font-display: swap; src: url('/static/fonts/fira-code-600.woff2') format('woff2'); }
:root {
  --encre: #102a43; --encre-2: #243b53; --muted: #5b7388; --line: #d9e2ec;
  --fond: #f5f8fb; --fond-2: #e9eff5; --carte: #ffffff;
  --primaire: #1e40af; --primaire-soft: #e8efff; --focus: #3b82f6;
  --teal: #0b7a75; --teal-soft: #e5f6f2; --rouge: #c63434; --rouge-soft: #feeeee; --ambre: #b05f07; --ambre-soft: #fff4df;
  --info: #1e40af; --info-soft: #e8efff; --gris-soft: #eef2f6;
  --titre: 'Fira Sans', 'Segoe UI', Arial, sans-serif; --texte: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'Fira Code', ui-monospace, Consolas, monospace; --rayon: 14px;
  --ombre-1: 0 1px 2px rgba(16,42,67,.06), 0 10px 26px -18px rgba(16,42,67,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre: #e8eef5; --encre-2: #c9d5e2; --muted: #93a5b8; --line: #2c3e52; --fond: #0b1826; --fond-2: #122335; --carte: #10202f;
    --primaire: #8fb0ff; --primaire-soft: #17294d; --focus: #8fb0ff; --teal: #5fd4c4; --teal-soft: #0f3331; --rouge: #ff8a8a; --rouge-soft: #3a1c1c;
    --ambre: #f0b35a; --ambre-soft: #38290f; --info: #8fb0ff; --info-soft: #17294d; --gris-soft: #1a2c3f;
  }
  :root:not([data-theme="light"]) .bouton { color: #0b1826; }
  :root:not([data-theme="light"]) .bouton--second { color: var(--primaire); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 var(--texte); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--primaire); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -.02em; line-height: 1.12; font-weight: 600; margin: 0 0 10px; text-wrap: balance; }
h1 { font-size: clamp(26px, 3.4vw, 36px); }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 10px; }
small { color: var(--muted); font-size: 13px; display: inline-block; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--primaire); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.evitement:focus { top: 12px; }

/* en-tête */
.entete { display: flex; align-items: center; gap: 22px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--carte); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.marque { font-family: var(--titre); font-weight: 700; color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; font-size: 18px; letter-spacing: -.02em; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { color: var(--encre-2); text-decoration: none; padding: 8px 12px; border-radius: 9px; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
.nav a:hover { background: var(--fond-2); }
.nav a[aria-current="page"] { background: var(--primaire-soft); color: var(--primaire); font-weight: 600; }
.compte { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.compte-org { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien { background: none; border: 0; color: var(--primaire); font: inherit; cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px; min-height: 40px; }
.lien--rouge { color: var(--rouge); }

/* cadre */
.cadre { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 26px 0 60px; flex: 1; }
.message { background: var(--primaire-soft); color: var(--primaire); border: 1px solid color-mix(in srgb, var(--primaire) 30%, transparent); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-weight: 500; }
.fil { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.fil a { color: var(--muted); }
.sur-titre { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.intro { color: var(--encre-2); font-size: 17px; max-width: 62ch; margin: 0 0 18px; }
.note { color: var(--muted); font-size: 14px; max-width: 70ch; }
.vide { background: var(--carte); border: 1px dashed var(--line); border-radius: var(--rayon); padding: 18px; color: var(--encre-2); max-width: 70ch; }
.tete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.colonnes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
@media (max-width: 900px) { .deux-colonnes, .colonnes-3 { grid-template-columns: 1fr; } }
.lateral { position: sticky; top: 76px; display: grid; gap: 16px; }
.bloc { background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-1); margin-bottom: 16px; }
.bloc--danger { border-color: color-mix(in srgb, var(--rouge) 40%, var(--line)); }
.bloc .numero, .question .numero { font: 600 12px/1 var(--mono); color: var(--primaire); background: var(--primaire-soft); border-radius: 999px; padding: 6px 9px; display: inline-block; margin-bottom: 10px; }

/* boutons et formulaires */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 11px; border: 1px solid var(--primaire); background: var(--primaire); color: #fff; font: 600 15px/1.2 var(--titre); text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(30,64,175,.6); }
.bouton--second { background: var(--carte); color: var(--primaire); }
.bouton--rouge { background: var(--rouge); border-color: var(--rouge); }
.bouton--petit { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.formulaire { display: grid; gap: 12px; }
.formulaire label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--encre-2); }
.formulaire input:not([type="checkbox"]):not([type="radio"]), .formulaire select, .formulaire textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--fond); color: var(--encre); font: 400 16px/1.4 var(--texte); }
.formulaire textarea { resize: vertical; min-height: 64px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--primaire); outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 0; }
.formulaire .case { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 36px; }
.formulaire .case input { width: 20px; height: 20px; accent-color: var(--primaire); }
.formulaire fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0; display: grid; gap: 4px; }
.formulaire legend { font-weight: 600; font-size: 13px; color: var(--muted); padding: 0 6px; }
.formulaire--ligne { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 640px) { .formulaire--ligne { grid-template-columns: 1fr; } }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .grille-2 { grid-template-columns: 1fr; } }
.danger { margin-top: 24px; }
.connexion { max-width: 560px; margin: 40px auto; background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre-1); }
.connexion input { font-size: 17px; }

/* mesures, filtres */
.mesures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 760px) { .mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mesures article { background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 14px 16px; display: grid; gap: 2px; }
.mesures strong { font: 600 28px/1 var(--titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mesures span { color: var(--muted); font-size: 13px; }
.mesures .alerte strong { color: var(--rouge); }
.mesures .attention strong { color: var(--ambre); }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtres a { text-decoration: none; color: var(--encre-2); border: 1px solid var(--line); background: var(--carte); border-radius: 999px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; font-weight: 500; }
.filtres a[aria-current="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* tableaux */
.tableau-cadre { overflow-x: auto; background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); box-shadow: var(--ombre-1); }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th { text-align: left; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td small { display: block; }
.fort { font-weight: 600; color: var(--encre); }
.manque { color: var(--rouge); font-style: normal; }

/* puces et statuts */
.puce { display: inline-block; font: 600 12px/1 var(--mono); padding: 6px 9px; border-radius: 999px; background: var(--fond-2); color: var(--encre-2); white-space: nowrap; }
.puce--produit, .puce--public { background: var(--info-soft); color: var(--info); }
.puce--nda { background: var(--ambre-soft); color: var(--ambre); }
.statut { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.statut--valide { background: var(--primaire-soft); color: var(--primaire); }
.statut--a_revoir { background: var(--ambre-soft); color: var(--ambre); }
.statut--sans_responsable { background: var(--rouge-soft); color: var(--rouge); }
.statut--a_investiguer { background: var(--info-soft); color: var(--info); }
.drapeau { display: inline-block; font-size: 13px; font-weight: 600; color: var(--rouge); border: 1px solid color-mix(in srgb, var(--rouge) 35%, transparent); border-radius: 8px; padding: 3px 8px; margin-bottom: 4px; }
.etat-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.encart { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.encart ul { margin: 6px 0; padding-left: 18px; }
.encart--rouge { background: var(--rouge-soft); color: var(--encre); border-left: 4px solid var(--rouge); }
.encart--ambre { background: var(--ambre-soft); color: var(--encre); border-left: 4px solid var(--ambre); }
.historique, .journal, .liste-pieces, .client { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.historique li { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; }
.historique li p { margin: 4px 0 0; color: var(--encre-2); }
.journal li { font-size: 14px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.journal time { font: 500 12px/1 var(--mono); color: var(--muted); margin-right: 8px; }
.verdicts label { min-height: 36px; }

.pied { border-top: 1px solid var(--line); padding: 18px 20px 28px; color: var(--muted); font-size: 13px; text-align: center; }
.pied p { max-width: 80ch; margin: 0 auto 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- DCEGO Réception : marque, jauge, statuts, versions, dépôt ---- */
.marque-plan { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--primaire), var(--teal)); display: inline-block; position: relative; }
.marque-plan::after { content: ""; position: absolute; inset: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; border-radius: 0 0 0 3px; }
.bouton--teal { background: var(--teal); border-color: var(--teal); }
.bouton[disabled] { opacity: .6; cursor: progress; transform: none; }
.jauge { display: grid; gap: 8px; background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-1); margin-bottom: 18px; }
.jauge-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jauge-tete strong { font: 700 34px/1 var(--titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jauge-tete span { color: var(--muted); }
.jauge-barre { width: 100%; height: 12px; border: 0; border-radius: 999px; background: var(--gris-soft); overflow: hidden; appearance: none; -webkit-appearance: none; display: block; }
.jauge-barre::-webkit-progress-bar { background: var(--gris-soft); border-radius: 999px; }
.jauge-barre::-webkit-progress-value { background: var(--teal); border-radius: 999px; }
.jauge-barre::-moz-progress-bar { background: var(--teal); border-radius: 999px; }
.jauge-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--encre-2); }
.jauge-legende b { font-variant-numeric: tabular-nums; }
.statut--attendu { background: var(--gris-soft); color: var(--muted); }
.statut--recu { background: var(--primaire-soft); color: var(--primaire); }
.statut--a_verifier { background: var(--ambre-soft); color: var(--ambre); }
.statut--a_corriger { background: var(--rouge-soft); color: var(--rouge); }
.statut--accepte { background: var(--teal-soft); color: var(--teal); }
.statut--remplace { background: var(--gris-soft); color: var(--muted); text-decoration: line-through; }
.statut--programmee { background: var(--primaire-soft); color: var(--primaire); }
.statut--envoyee { background: var(--teal-soft); color: var(--teal); }
.statut--echec { background: var(--rouge-soft); color: var(--rouge); }
.statut--annulee { background: var(--gris-soft); color: var(--muted); }
.code { font: 600 12px/1 var(--mono); color: var(--primaire); background: var(--primaire-soft); border-radius: 6px; padding: 5px 7px; white-space: nowrap; }
.lot-titre { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.lot-titre h2 { margin: 0; }
.lot-titre small { font: 500 12px/1 var(--mono); color: var(--muted); }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.onglets a { text-decoration: none; color: var(--encre-2); padding: 10px 14px; border-radius: 10px 10px 0 0; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; }
.onglets a[aria-current="page"] { color: var(--primaire); border-bottom-color: var(--primaire); font-weight: 600; }
.onglets .compteur { font: 600 11px/1 var(--mono); background: var(--ambre-soft); color: var(--ambre); border-radius: 999px; padding: 4px 7px; }
.lien-depot { font: 500 13px/1.4 var(--mono); word-break: break-all; background: var(--fond); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; display: block; color: var(--encre-2); margin: 6px 0; }
.ligne-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.ligne-form > label { flex: 1 1 180px; }
.version { background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 16px; margin-bottom: 12px; box-shadow: var(--ombre-1); }
.version--retenue { border-left: 4px solid var(--teal); }
.version header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.version header h3 { margin: 0; flex: 1 1 220px; word-break: break-word; }
.alerte-ligne { color: var(--ambre); font-weight: 600; font-size: 14px; }
.decisions { display: grid; gap: 10px; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.decisions .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.mesures small { display: block; }
.en-ligne { display: inline; }
details.repli { background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 12px; }
details.repli summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details.repli[open] summary { margin-bottom: 12px; }

/* page de dépôt : pensée pour un téléphone sur le chantier */
.depot { width: min(620px, 100% - 24px); margin: 0 auto; padding: 18px 0 48px; flex: 1; }
.depot h1 { font-size: clamp(22px, 6vw, 30px); }
.depot-piece { background: var(--carte); border: 1px solid var(--line); border-radius: var(--rayon); padding: 16px; margin-bottom: 12px; box-shadow: var(--ombre-1); }
.depot-piece header { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 10px; }
.depot-piece h2 { font-size: 17px; margin: 0; }
.depot-piece .motif { background: var(--rouge-soft); border-left: 4px solid var(--rouge); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin-bottom: 10px; }
.choisir { display: grid; gap: 8px; }
.choisir input[type="file"] { width: 100%; min-height: 48px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--fond); font: inherit; color: var(--encre); }
.choisir .bouton { width: 100%; min-height: 48px; }

/* ==== Signature DCEGO Réception : le plan d'architecte =====================================================
   Skill UI/UX (style suisse, Fira Code pour les repères techniques, Fira Sans pour le texte), dans la charte DCEGO.
   Trois objets reviennent partout : la trame du plan, le cartouche (bloc-titre du plan) et le tampon. */
:root { --nuit: #0b2239; --nuit-2: #123354; --trait: rgba(108, 224, 206, .16); --trait-fort: rgba(108, 224, 206, .42); --cyan: #6ce0ce;
        --trame: linear-gradient(var(--trait-papier) 1px, transparent 1px), linear-gradient(90deg, var(--trait-papier) 1px, transparent 1px); --trait-papier: rgba(16, 42, 67, .045);
        --elan: cubic-bezier(.2, .8, .2, 1); --ombre-2: 0 2px 4px rgba(16,42,67,.06), 0 28px 54px -28px rgba(16,42,67,.42); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trait-papier: rgba(108, 224, 206, .05); --nuit: #07182a; --nuit-2: #0d2740; } }
body { background-image: var(--trame); background-size: 28px 28px; background-attachment: fixed; }

/* en-tête : barre bleu nuit, liseré cyan */
.entete { background: var(--nuit); border-bottom: 1px solid var(--trait-fort); box-shadow: 0 10px 30px -22px rgba(7, 24, 42, .9); }
.entete .marque { color: #fff; }
.entete .nav a { color: #c5d6e6; }
.entete .nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.entete .nav a[aria-current="page"] { background: rgba(108, 224, 206, .14); color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); }
.entete .compte-org { color: #e8eef5; }
.entete .lien { color: var(--cyan); }
.marque-plan { background: none; border: 2px solid var(--cyan); border-radius: 5px; }
.marque-plan::after { inset: 4px; border-color: var(--cyan); }

/* apparition : les blocs montent à l'ouverture de la page, une fois */
@media (prefers-reduced-motion: no-preference) {
  .cadre > *, .depot > * { animation: monter .42s var(--elan) both; }
  .cadre > *:nth-child(2), .depot > *:nth-child(2) { animation-delay: .05s; }
  .cadre > *:nth-child(3), .depot > *:nth-child(3) { animation-delay: .1s; }
  .cadre > *:nth-child(4), .depot > *:nth-child(4) { animation-delay: .15s; }
  .cadre > *:nth-child(n+5), .depot > *:nth-child(n+5) { animation-delay: .2s; }
  @keyframes monter { from { opacity: 0; transform: translateY(10px); } }
  @keyframes tracer { from { stroke-dasharray: 0 100; } }
  @keyframes tamponner { 0% { opacity: 0; transform: rotate(-4deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-4deg) scale(.94); } 100% { transform: rotate(-4deg) scale(1); } }
}

/* le cartouche : bloc-titre d'un plan, pour chaque chantier */
.cartouche { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; color: #fff; padding: 26px 26px 22px;
  border-radius: 18px; margin-bottom: 0; background: linear-gradient(var(--trait) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--trait) 1px, transparent 1px) 0 0 / 28px 28px,
  radial-gradient(120% 140% at 0% 0%, var(--nuit-2), var(--nuit) 62%); box-shadow: var(--ombre-2); border: 1px solid var(--trait-fort); }
.cartouche::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border: 1px dashed var(--trait-fort); border-radius: 50%; pointer-events: none; }
.cartouche .fil { color: #9fb6cb; margin-bottom: 10px; } .cartouche .fil a { color: #c5d6e6; }
.cartouche h1 { color: #fff; margin: 0; font-size: clamp(26px, 3.6vw, 40px); }
.cartouche .sur-titre { color: var(--cyan); }
.cartouche-bloc { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); border: 1px solid var(--trait-fort); border-radius: 10px; overflow: hidden; background: rgba(7, 24, 42, .5); backdrop-filter: blur(3px); }
.cartouche-bloc div { padding: 9px 14px; border-right: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait-fort); min-width: 0; }
.cartouche-bloc div:nth-child(2n) { border-right: 0; } .cartouche-bloc div:nth-last-child(-n+2) { border-bottom: 0; }
.cartouche-bloc dt { font: 500 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8fb0c9; }
.cartouche-bloc dd { margin: 3px 0 0; font: 600 14px/1.25 var(--titre); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cartouche-bloc .ok { color: var(--cyan); } .cartouche-bloc .attente { color: #ffc56b; }
@media (max-width: 820px) { .cartouche { grid-template-columns: 1fr; padding: 20px; } .cartouche-bloc dd { max-width: none; } }
.onglets { margin-top: 0; padding: 6px 8px 0; background: var(--carte); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; margin: -10px 0 22px; padding-top: 16px; box-shadow: var(--ombre-1); }
.onglets a { border-radius: 8px 8px 0 0; }

/* la jauge : un anneau qui se trace, la légende à côté */
.jauge { grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 24px; border-radius: 18px; box-shadow: var(--ombre-2); }
.anneau { position: relative; width: 148px; height: 148px; flex: none; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 11; stroke-linecap: butt; }
.anneau .a-fond { stroke: var(--gris-soft); }
.anneau .a-acceptees { stroke: var(--teal); animation: tracer 1s var(--elan) both; }
.anneau .a-a-voir { stroke: var(--primaire); opacity: .55; animation: tracer 1s .15s var(--elan) both; }
.anneau-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anneau-centre strong { font: 700 34px/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.anneau-centre span { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jauge-corps { display: grid; gap: 12px; }
.jauge-corps h2 { margin: 0; font-size: 22px; }
.jauge-lignes { display: grid; gap: 8px; }
.jauge-lignes li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.jauge-lignes { list-style: none; margin: 0; padding: 0; }
.jauge-lignes i { width: 12px; height: 12px; border-radius: 3px; }
.jauge-lignes .p-acceptees { background: var(--teal); } .jauge-lignes .p-a-voir { background: var(--primaire); opacity: .55; }
.jauge-lignes .p-manquantes { background: repeating-linear-gradient(135deg, var(--rouge) 0 3px, transparent 3px 6px); border: 1px solid var(--rouge); }
.jauge-lignes b { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.a-relancer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); }
.a-relancer .puce { background: var(--rouge-soft); color: var(--rouge); }
@media (max-width: 620px) { .jauge { grid-template-columns: 1fr; justify-items: center; text-align: left; } .jauge-corps { width: 100%; } }

/* le tampon : l'acceptation est un geste humain, elle se voit */
.tampon { display: inline-block; font: 600 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 9px 12px 8px; border: 2px solid currentColor; border-radius: 6px;
  color: var(--teal); transform: rotate(-4deg); box-shadow: inset 0 0 0 2px var(--carte), inset 0 0 0 3px currentColor; background: color-mix(in srgb, currentColor 6%, transparent); animation: tamponner .5s var(--elan) both; }
.tampon small { display: block; margin-top: 5px; font: 500 9px/1.2 var(--mono); letter-spacing: .1em; color: inherit; opacity: .85; }
.tampon--attendu { color: var(--muted); } .tampon--recu { color: var(--primaire); } .tampon--a_verifier { color: var(--ambre); } .tampon--a_corriger { color: var(--rouge); }

/* statuts : la couleur, plus un signe, jamais la couleur seule */
.statut { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.statut--accepte::before { width: 12px; height: 12px; border-radius: 0; background: currentColor; -webkit-mask: var(--coche) center / contain no-repeat; mask: var(--coche) center / contain no-repeat; }
.statut--a_corriger::before { border-radius: 2px; transform: rotate(45deg); }
.statut--attendu::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
:root { --coche: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6.4l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* tableaux : rail de statut à gauche, ligne qui répond au survol */
.tableau-cadre { border-radius: 16px; }
.tableau tbody tr { transition: background .18s ease; }
.tableau tbody tr:hover { background: color-mix(in srgb, var(--primaire-soft) 55%, transparent); }
.tableau tr[data-statut] td:first-child { box-shadow: inset 4px 0 0 var(--rail, transparent); }
.tableau tr[data-statut="accepte"] { --rail: var(--teal); } .tableau tr[data-statut="a_corriger"] { --rail: var(--rouge); }
.tableau tr[data-statut="a_verifier"] { --rail: var(--ambre); } .tableau tr[data-statut="recu"] { --rail: var(--primaire); } .tableau tr[data-statut="attendu"] { --rail: var(--line); }
.tableau input, .tableau select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--fond); color: var(--encre); font: inherit; }
.tableau input:focus, .tableau select:focus { border-color: var(--primaire); outline: 3px solid color-mix(in srgb, var(--focus) 40%, transparent); }
.lot-titre { align-items: center; gap: 14px; margin: 26px 0 12px; }
.lot-titre h2 { font-size: 19px; display: inline-flex; align-items: center; gap: 10px; }
.lot-titre h2::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--primaire); transform: rotate(45deg); }
.lot-titre progress { flex: 1 1 120px; max-width: 220px; height: 6px; }
.lot-titre progress, .depot-avance progress { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--gris-soft); overflow: hidden; }
.lot-titre progress::-webkit-progress-bar, .depot-avance progress::-webkit-progress-bar { background: var(--gris-soft); }
.lot-titre progress::-webkit-progress-value, .depot-avance progress::-webkit-progress-value { background: var(--teal); border-radius: 999px; }
.lot-titre progress::-moz-progress-bar, .depot-avance progress::-moz-progress-bar { background: var(--teal); }

/* cartes : du relief, pas de l'aplat */
.bloc, .version, .depot-piece, .mesures article { border-radius: 16px; transition: transform .2s var(--elan), box-shadow .2s var(--elan); }
.version:hover, .depot-piece:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.bloc h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.bloc h2::before { content: ""; width: 14px; height: 2px; background: var(--primaire); }
.bouton { border-radius: 10px; transition: transform .16s var(--elan), box-shadow .16s var(--elan), background .16s ease; cursor: pointer; letter-spacing: .01em; }
.bouton:active { transform: translateY(0) scale(.98); }
.bouton--teal:hover { box-shadow: 0 8px 20px -12px rgba(11, 122, 117, .8); }
.vide { border-radius: 16px; padding: 22px 22px 22px 68px; position: relative; background: var(--carte) var(--trame); background-size: 14px 14px; }
.vide::before { content: ""; position: absolute; left: 22px; top: 22px; width: 30px; height: 36px; border: 2px solid var(--primaire); border-radius: 4px; background: linear-gradient(var(--primaire), var(--primaire)) 6px 10px / 14px 2px no-repeat,
  linear-gradient(var(--primaire), var(--primaire)) 6px 17px / 14px 2px no-repeat, linear-gradient(var(--primaire), var(--primaire)) 6px 24px / 9px 2px no-repeat; opacity: .7; }
.mesures article { position: relative; overflow: hidden; }
.mesures strong { font-family: var(--mono); letter-spacing: -.04em; }
.message { border-radius: 12px; border-left: 4px solid var(--teal); background: var(--teal-soft); color: var(--encre); border-color: var(--teal); display: flex; align-items: center; gap: 10px; }
.message::before { content: ""; width: 14px; height: 14px; background: var(--teal); -webkit-mask: var(--coche) center / contain no-repeat; mask: var(--coche) center / contain no-repeat; flex: none; }
.encart { border-radius: 12px; }

/* frise des versions : la plus récente en haut, la retenue marquée */
.frise { position: relative; padding-left: 34px; }
.frise::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 10px); }
.frise .version { position: relative; }
.frise .version::before { content: attr(data-v); position: absolute; left: -34px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center;
  font: 600 10px/1 var(--mono); background: var(--carte); color: var(--muted); border: 2px solid var(--line); }
.frise .version--retenue::before { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.frise .version--retenue { border-left: 1px solid var(--line); box-shadow: 0 0 0 2px var(--teal-soft), var(--ombre-1); }
.exigence-tete { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* connexion : le plan à gauche, le formulaire à droite */
.entree { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; max-width: 980px; margin: 28px auto; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-2); border: 1px solid var(--line); background: var(--carte); }
.entree-plan { position: relative; color: #fff; padding: 34px 30px; display: grid; align-content: space-between; gap: 26px; min-height: 420px;
  background: linear-gradient(var(--trait) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--trait) 1px, transparent 1px) 0 0 / 28px 28px, radial-gradient(120% 120% at 0 0, var(--nuit-2), var(--nuit) 65%); }
.entree-plan h2 { color: #fff; font-size: 26px; margin: 0; }
.entree-plan p { color: #c5d6e6; margin: 8px 0 0; max-width: 34ch; }
.registre { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.registre li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: rgba(7, 24, 42, .55); font-size: 14px; }
.registre .statut { animation: monter .5s var(--elan) both; }
.registre li:nth-child(2) .statut { animation-delay: .5s; } .registre li:nth-child(3) .statut { animation-delay: 1s; } .registre li:nth-child(4) .statut { animation-delay: 1.5s; }
.entree-plan small { color: #8fb0c9; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.entree .connexion { margin: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none; padding: 34px 30px; align-self: center; }
@media (max-width: 800px) { .entree { grid-template-columns: 1fr; margin: 12px auto; } .entree-plan { min-height: 0; padding: 24px 20px; } .entree .connexion { padding: 24px 20px; } }

/* dépôt : le téléphone du sous-traitant, sur le chantier */
.depot-tete { position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 16px; border: 1px solid var(--trait-fort); box-shadow: var(--ombre-2);
  background: linear-gradient(var(--trait) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--trait) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(120% 140% at 0 0, var(--nuit-2), var(--nuit) 62%); }
.depot-tete .sur-titre { color: var(--cyan); } .depot-tete h1 { color: #fff; margin: 0 0 8px; } .depot-tete .intro { color: #d5e2ee; margin: 0; font-size: 16px; }
.depot-avance { display: grid; gap: 6px; margin-top: 14px; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; color: #c5d6e6; }
.depot-avance progress { width: 100%; height: 8px; background: rgba(255, 255, 255, .14); }
.depot-avance progress::-webkit-progress-bar { background: rgba(255, 255, 255, .14); } .depot-avance progress::-webkit-progress-value { background: var(--cyan); } .depot-avance progress::-moz-progress-bar { background: var(--cyan); }
.depot-piece[data-statut="accepte"] { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.depot-piece[data-statut="a_corriger"] { border-color: color-mix(in srgb, var(--rouge) 45%, var(--line)); }
.zone { position: relative; display: grid; place-items: center; gap: 4px; text-align: center; padding: 18px 12px; border: 2px dashed color-mix(in srgb, var(--primaire) 45%, var(--line)); border-radius: 14px;
  background: var(--fond) var(--trame); background-size: 14px 14px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s var(--elan); min-height: 92px; }
.zone:hover, .zone:focus-within { border-color: var(--primaire); transform: translateY(-1px); }
.zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0; padding: 0; border: 0; }
.zone strong { font-size: 16px; color: var(--primaire); } .zone span { font-size: 13px; color: var(--muted); word-break: break-word; }
.zone--prete { border-style: solid; border-color: var(--teal); background-color: var(--teal-soft); } .zone--prete strong { color: var(--teal); }
.zone-icone { width: 30px; height: 30px; border: 2px solid var(--primaire); border-radius: 8px; position: relative; }
.zone-icone::before, .zone-icone::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--primaire); transform: translate(-50%, -50%); }
.zone-icone::before { width: 14px; height: 2px; } .zone-icone::after { width: 2px; height: 14px; }
.zone--prete .zone-icone { border-color: var(--teal); } .zone--prete .zone-icone::before { width: 14px; height: 14px; background: var(--teal); -webkit-mask: var(--coche) center / contain no-repeat; mask: var(--coche) center / contain no-repeat; } .zone--prete .zone-icone::after { display: none; }
.serre, .serre small { white-space: nowrap; }
.lateral .mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lateral .mesures strong { font-size: 22px; }
.exigence-tete { margin: 18px 4px 8px; }
.exigence-tete .note { margin: 0; }