/* Les polices : Inter, servie par MyHEPTA (aucun serveur extérieur). Les anciennes
   polices (Archivo, IBM Plex Mono) sont redirigées vers elle : un seul caractère partout. */
@font-face{font-family:"Inter";src:url("/public/polices/inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/public/polices/inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/public/polices/inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/public/polices/inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/public/polices/inter-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/public/polices/inter-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/public/polices/inter-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/public/polices/inter-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* MyHEPTA — l'identité HEPTA (07/11/2026, piste 3 « Marine, Noir & Or »).
   Chargé APRÈS app.css : il ne change que l'habillage, jamais le fonctionnement.
   Marine #0E2A47 : la structure (menu, boutons principaux, titres).
   Noir #111111 : le texte. Or #D09A22 : l'onglet en cours, les chiffres clés,
   l'action phare — avec parcimonie. Vert / ambre / rouge : les pastilles d'état. */

:root,:root[data-theme="dark"]{
  --marine:#0E2A47; --marine2:#163A5E; --or:#D09A22; --or-fonce:#B7861A; --or-clair:#FBF0D9;
  --ground:#EEF2F6; --panel:#F6F8FA; --paper:#FFFFFF; --carte2:#F7F9FB;
  --ink:#111111; --ink2:#46596D; --ink3:#7C8EA1;
  --line:#D5DEE7; --line2:#E6ECF2; --trait:#E0E6ED; --trait2:#EEF2F6;
  --accent:#0E2A47; --accent-soft:#EDF2F7; --accent-ink:#1B5C97;
  --bleu:#1B5C97; --bleu-clair:#E7F0F9;
  --signal:#C2410C; --signal-soft:#FDEBE3; --ok:#0F766E; --ok-soft:#E3F3EF;
  --alerte:#C2410C; --alerte-clair:#FDEBE3;
  --field:#FFFFFF; --field-line:#C9D3DE;
  --ombre:0 1px 2px rgba(14,34,56,.04),0 4px 14px rgba(14,34,56,.06);
  --rayon:8px; --rayon2:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --marine:#0E2A47; --or:#D09A22; --or-clair:#FBF0D9;
    --ground:#EEF2F6; --panel:#F6F8FA; --paper:#FFFFFF; --carte2:#F7F9FB;
    --ink:#111111; --ink2:#46596D; --ink3:#7C8EA1;
    --line:#D5DEE7; --line2:#E6ECF2; --trait:#E0E6ED; --trait2:#EEF2F6;
    --accent:#0E2A47; --accent-soft:#EDF2F7; --accent-ink:#1B5C97;
    --bleu:#1B5C97; --bleu-clair:#E7F0F9;
    --signal:#C2410C; --signal-soft:#FDEBE3; --ok:#0F766E; --ok-soft:#E3F3EF;
    --alerte:#C2410C; --alerte-clair:#FDEBE3; --field:#FFFFFF; --field-line:#C9D3DE;
  }
}

body.theme-hepta{font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--ground)}
.theme-hepta .chiffres,.theme-hepta .tableau td.chiffres,.theme-hepta .tableau th.chiffres{font-family:Inter,"Segoe UI",Arial,sans-serif; font-variant-numeric:tabular-nums}
.theme-hepta .tuile .chiffre,.theme-hepta .jeton{font-family:Inter,"Segoe UI",Arial,sans-serif}

/* --- L'en-tête : bandeau blanc, recherche, icônes ; menu marine --- */
.theme-hepta .bandeau.bandeau-clair{background:#fff; border-bottom:1px solid var(--line2); padding:10px 30px; gap:30px; flex-wrap:nowrap}
.theme-hepta .bandeau-clair .marque img{height:52px; width:auto; display:block}
.recherche-globale{flex:1; max-width:640px; display:flex}
.recherche-globale input{flex:1; min-width:0; font:inherit; font-size:14px; padding:11px 15px; border:1.5px solid var(--field-line);
  border-right:0; border-radius:var(--rayon) 0 0 var(--rayon); background:#fff; color:var(--ink)}
.recherche-globale input:focus{outline:none; border-color:var(--marine)}
.recherche-globale button{width:56px; border:0; background:var(--marine); color:#fff; border-radius:0 var(--rayon) var(--rayon) 0; cursor:pointer; display:grid; place-items:center}
.icones-tete{display:flex; gap:22px; margin-left:auto}
.ic-tete{position:relative; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--ink);
  font-size:12px; font-weight:600; min-width:60px; line-height:1.25}
.ic-tete svg{width:25px; height:25px; fill:none; stroke:var(--marine); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:3px}
.ic-tete small{font-size:10.5px; font-weight:400; color:var(--ink3); white-space:nowrap}
.ic-tete i{position:absolute; top:-7px; right:8px; background:var(--signal); color:#fff; font-style:normal; font-size:10.5px; font-weight:800;
  border-radius:10px; padding:1px 6px; border:2px solid #fff}
.ic-tete:hover{color:var(--marine)}
.theme-hepta .onglets.onglets-marine{display:flex; gap:0; margin:0; padding:0 30px; background:var(--marine); height:46px; align-items:stretch}
.theme-hepta .onglets-marine a,.theme-hepta .onglets-marine span{display:flex; align-items:center; padding:0 14px; border-radius:0;
  font-size:13.5px; font-weight:700; color:#D3DEE9; text-decoration:none}
.theme-hepta .onglets-marine a:hover{background:rgba(255,255,255,.08); color:#fff}
.theme-hepta .onglets-marine a.courant{background:rgba(255,255,255,.10); color:#fff; box-shadow:inset 0 -4px 0 var(--or)}
.theme-hepta .onglets-marine .ferme{color:#7F93A8}
.theme-hepta .sous-onglets{background:#fff; border-bottom:1px solid var(--line2); padding:0 30px; gap:4px}
.theme-hepta .sous-onglets a,.theme-hepta .sous-familles summary,.theme-hepta .sous-familles .famille-directe a{
  color:var(--ink2); font-size:13.5px; font-weight:600; padding:12px 13px; border-bottom:3px solid transparent}
.theme-hepta .sous-onglets a:hover,.theme-hepta .sous-familles summary:hover{color:var(--marine); border-bottom-color:var(--line)}
.theme-hepta .sous-onglets a.courant{color:var(--marine); border-bottom-color:var(--marine)}
.theme-hepta .sous-onglets .ferme{color:#A9B6C3}
.theme-hepta .sous-familles .menu{background:#fff; border:1px solid var(--line); border-radius:var(--rayon); box-shadow:var(--ombre)}
.theme-hepta .sous-familles .menu a{color:var(--ink)}

/* --- La page --- */
.theme-hepta main{padding:26px 30px 70px}
.theme-hepta h1{font-size:26px; font-weight:900; letter-spacing:-.015em; color:var(--ink)}
.theme-hepta h2{font-weight:900; color:var(--marine); letter-spacing:.01em}
.theme-hepta .aide{color:var(--ink2)}
.theme-hepta a{color:var(--accent-ink)}

/* --- Boutons --- */
.theme-hepta .bouton{border-radius:var(--rayon); font-weight:700; padding:9px 16px; border:1.5px solid var(--field-line); color:var(--marine); background:#fff}
.theme-hepta .bouton:hover{border-color:var(--marine); color:var(--marine)}
.theme-hepta .bouton.primaire{background:var(--marine); border-color:var(--marine); color:#fff}
.theme-hepta .bouton.primaire:hover{background:var(--marine2); opacity:1; color:#fff}
.theme-hepta .bouton.or,.theme-hepta .bouton.phare{background:var(--or); border-color:var(--or); color:var(--marine)}
.theme-hepta button:focus-visible,.theme-hepta a:focus-visible,.theme-hepta input:focus-visible,.theme-hepta select:focus-visible{outline:2px solid var(--or); outline-offset:2px}

/* --- Cartes, tuiles, encadrés --- */
.theme-hepta .tuile{border-radius:var(--rayon2); border:1px solid var(--trait); box-shadow:var(--ombre); padding:16px 18px}
.theme-hepta .tuile .chiffre{font-size:27px; font-weight:900; color:var(--marine)}
.theme-hepta .tuile .etiquette{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3)}
.theme-hepta .carte,.theme-hepta section.carte{border-radius:var(--rayon2); border:1px solid var(--trait); box-shadow:var(--ombre); background:#fff}
.theme-hepta .cadre-tableau{border-radius:var(--rayon2); overflow:hidden; border:1px solid var(--trait); box-shadow:var(--ombre); background:#fff}
.theme-hepta .alerte{border-radius:var(--rayon)}
.theme-hepta .succes{border-radius:var(--rayon)}

/* --- Tableaux --- */
.theme-hepta .tableau{box-shadow:none; background:#fff}
.theme-hepta .cadre-tableau .tableau{border:0}
.theme-hepta .tableau th{background:#F5F8FB; color:var(--ink3); font-size:10.5px; font-weight:800; letter-spacing:.07em; border-bottom:1px solid var(--line2); padding:11px 12px}
.theme-hepta .tableau td{padding:11px 12px; border-bottom:1px solid var(--line2); font-size:13.5px}
.theme-hepta .tableau tr[data-href]:hover{background:#F5F8FB}
.theme-hepta .tableau td b{font-weight:800}

/* --- Pastilles d'état --- */
.theme-hepta .statut{border:0; border-radius:20px; padding:4px 10px; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:none}
.theme-hepta .statut.oui{background:var(--ok-soft); color:var(--ok)}
.theme-hepta .statut.non{background:var(--signal-soft); color:var(--signal)}
.theme-hepta .statut.attente{background:#FBF0D9; color:#8A5A00}
.theme-hepta .statut.envoi{background:var(--bleu-clair); color:var(--bleu)}

/* --- Formulaires --- */
.theme-hepta legend{color:var(--marine); font-weight:900; letter-spacing:.08em}
.theme-hepta label.f input,.theme-hepta label.f select,.theme-hepta label.f textarea,
.theme-hepta .recherche input,.theme-hepta .recherche select{border-radius:var(--rayon); border:1.5px solid var(--field-line); padding:9px 11px}
.theme-hepta label.f input:focus,.theme-hepta label.f select:focus{border-color:var(--marine); outline:none}

@media (max-width:1100px){
  .icones-tete{gap:12px}.ic-tete{min-width:0}.ic-tete small{display:none}
  .theme-hepta .onglets-marine a{padding:0 9px; font-size:12.5px}
}

/* --- L'écran du devis : son bandeau marine garde sa place, aux couleurs HEPTA --- */
.theme-hepta.ecran-devis .bandeau{background:var(--marine); border-bottom:0}
.theme-hepta.ecran-devis .onglets-devis a.actif,.theme-hepta.ecran-devis .etapes a.actif{background:var(--marine)}
.theme-hepta.ecran-devis .bandeau a:not(.bouton):not(.btn){color:#C9D6E4}
.theme-hepta.ecran-devis .bandeau a:not(.bouton):not(.btn):hover{color:#fff}

/* --- Les tableaux « tbl » (Sécurité…) : même allure que les autres --- */
.theme-hepta table.tbl{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon2); overflow:hidden; box-shadow:var(--ombre)}
.theme-hepta table.tbl th{background:#F5F8FB; color:var(--ink3); font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; text-align:left; padding:11px 12px; border-bottom:1px solid var(--line2)}
.theme-hepta table.tbl td{padding:10px 12px; border-bottom:1px solid var(--line2); font-size:13.5px}
.theme-hepta table.tbl tr:last-child td{border-bottom:0}

/* La recherche globale : la liste sous la barre (v240) */
.recherche-globale{position:relative}
.rg-liste{position:absolute; left:0; right:56px; top:calc(100% + 6px); background:#fff; border:1px solid var(--trait,#E0E6ED); border-radius:10px;
  box-shadow:0 16px 40px rgba(14,34,56,.22); z-index:60; max-height:70vh; overflow:auto; padding:6px}
.rg-liste[hidden]{display:none}
.rg-g{padding:4px 0 6px; border-bottom:1px solid var(--trait,#E0E6ED)}
.rg-g:last-of-type{border-bottom:0}
.rg-g > b{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3,#7C8EA1); padding:6px 10px 2px}
.rg-g > b em{font-style:normal; color:var(--marine,#0E2A47); margin-left:4px}
.rg-g a{display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:6px; text-decoration:none; color:var(--ink,#111)}
.rg-g a:hover, .rg-g a:focus{background:#EDF2F7}
.rg-g a span{font-weight:700; white-space:nowrap}
.rg-g a small{color:var(--ink3,#7C8EA1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rg-tout{display:block; text-align:right; padding:8px 10px 4px; font-weight:700; font-size:13px}
.rg-rien{margin:0; padding:12px; color:var(--ink2,#46596D)}

/* La connexion (v241, choix A validé par Laurent) : fond blanc, le H en
   grand et en filigrane, rien d'autre que l'identifiant et le mot de passe. */
body.nue.theme-hepta{background:#fff; overflow:hidden}
.connexion-fond{position:fixed; left:50%; top:50%; height:min(115vh,170vw); width:auto; transform:translate(-50%,-50%); opacity:.10; pointer-events:none; user-select:none}
.theme-hepta .connexion.connexion-epure{position:relative; max-width:340px; background:transparent; border:0; box-shadow:none; padding:0}
.theme-hepta .connexion input{border-radius:8px; border:1.5px solid var(--field-line); padding:11px 12px; background:#fff}
.theme-hepta .connexion input:focus{outline:none; border-color:var(--marine)}
.theme-hepta .connexion label{font-weight:600; font-size:12.5px}
.theme-hepta .connexion button[type=submit]{border-radius:8px; background:var(--marine); font-weight:800; padding:13px}
.theme-hepta .connexion button[type=submit]:hover{background:var(--marine2)}
.theme-hepta .connexion .erreur{border-radius:8px}

/* Les champs des formulaires, plus grands et plus lisibles (v245, Laurent :
   « visuellement c'est trop petit »). Les champs DANS les tableaux (grilles
   de devis, pointage, saisies en ligne) gardent leur taille compacte. */
.theme-hepta label.f{font-size:13px; gap:6px; color:#22303E}
.theme-hepta label.f > span{font-weight:700; font-size:13.5px; color:#22303E}
.theme-hepta main label.f input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.theme-hepta main label.f select,
.theme-hepta main form label:not(td label):not(.chk-ag) > input:is([type=text],[type=number],[type=email],[type=tel],[type=date],[type=password],[type=search],[type=url],:not([type])),
.theme-hepta main form label:not(td label):not(.chk-ag) > select{
  min-height:44px; font-size:15px; padding:10px 13px; border:1.5px solid var(--field-line); border-radius:8px; background:#fff; color:var(--ink); box-sizing:border-box}
.theme-hepta main label.f textarea,
.theme-hepta main form label:not(td label) > textarea{font-size:15px; padding:10px 13px; border:1.5px solid var(--field-line); border-radius:8px; min-height:88px}
.theme-hepta main label.f select,.theme-hepta main form label:not(td label) > select{padding-right:34px}
.theme-hepta main label.f input:focus,.theme-hepta main label.f select:focus,.theme-hepta main label.f textarea:focus,
.theme-hepta main form label:not(td label) > input:focus,.theme-hepta main form label:not(td label) > select:focus,
.theme-hepta main form label:not(td label) > textarea:focus{border-color:var(--marine); outline:none; box-shadow:0 0 0 3px #DCE6F0}
.theme-hepta main td input,.theme-hepta main td select{min-height:0}

/* Les champs d'une même ligne s'alignent : un libellé qui passe sur deux lignes
   ou une aide sous un champ ne décalent plus les voisins (v246, v249) — la
   hauteur des libellés d'une même ligne est égalisée au chargement (vue.js). */
.theme-hepta .grille{align-items:start}
.theme-hepta .grille > label.f > span{line-height:1.3;display:flex;align-items:flex-end}