/* Style sobre et technique (maquette_interface.html) :
   fond gris clair, bleu acier pour les actions, orange pour ce qui attend le dessinateur. */
:root {
  --fond: #F3F4F6;
  --encre: #1B1F24;
  --encre-douce: #5B6270;
  --bord: #DDE1E6;
  --filet: #ECEEF1;
  --acier: #1F5FAD;
  --acier-fonce: #163F73;
  --orange: #C2570C;
  --erreur: #B3261E;
  --carte: #FFFFFF;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.45 'IBM Plex Sans', 'Segoe UI', sans-serif;
}
a { color: var(--acier); }
a:hover { color: var(--acier-fonce); }
code, .mono, .chemin { font-family: 'IBM Plex Mono', Consolas, monospace; }
code { font-size: 13px; }

/* --- En-tête --- */
.entete {
  background: #1B1F24; color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 14px 28px;
}
.marque { color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; margin-right: auto; }
.marque:hover { color: #fff; }
.selecteurs { display: flex; flex-wrap: wrap; gap: 12px; margin-right: auto; }
.selecteurs label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #C9CED6; }
.selecteurs select {
  font: inherit; font-size: 14px; color: #fff; background: #2A3038;
  border: 1px solid #3C434D; border-radius: 6px; padding: 8px 10px; min-height: 40px; max-width: 260px;
}
.utilisateur { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #C9CED6; }
.langues { display: flex; border: 1px solid #3C434D; border-radius: 6px; overflow: hidden; }
.langues button {
  font: inherit; font-size: 13px; font-weight: 600; color: #C9CED6; background: #2A3038;
  border: 0; padding: 6px 12px; min-height: 32px; cursor: pointer;
}
.langues button + button { border-left: 1px solid #3C434D; }
.langues button[aria-pressed="true"] { background: #fff; color: #1B1F24; }
.pastille {
  width: 32px; height: 32px; border-radius: 16px; background: #3C434D; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500;
}

.bandeau-ajan { background: #FCEBDD; color: #8A3A06; border-bottom: 1px solid #F0C9A8; padding: 10px 28px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; font-size: 14px; }
.bandeau-ajan[hidden] { display: none; }
.bandeau-maj { background: #E4EEF7; color: #1F4E79; border-bottom: 1px solid #BCD3E8; padding: 10px 28px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; font-size: 14px; }
.bandeau-maj[hidden] { display: none; }
.bandeau-maj-urgent { background: #FCEBDD; color: #8A3A06; border-bottom-color: #F0C9A8; }

.ecran-connexion { max-width: 380px; margin-top: 48px; }
.form-connexion { display: flex; flex-direction: column; gap: 12px; }
.form-connexion label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--encre-douce); }
.lien-entete { color: #C9CED6; margin-left: 8px; }
.lien-entete:hover { color: #fff; }

/* --- Éléments communs --- */
h1 { font-size: 24px; margin: 4px 0 0; }
h2 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 8px; }
.titre-section { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); padding: 0 10px 6px; }

input {
  font: inherit; font-size: 15px; color: var(--encre);
  background: #fff; border: 1px solid var(--bord); border-radius: 6px;
  padding: 8px 10px; min-height: 40px; width: 100%;
}
input:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--acier); outline-offset: 2px; }

.bouton {
  font: inherit; font-weight: 500; color: #fff;
  background: var(--acier); border: 0; border-radius: 6px;
  padding: 8px 16px; min-height: 40px; cursor: pointer;
}
.bouton:hover:not(:disabled) { background: var(--acier-fonce); }
.bouton:disabled { background: #C5CBD3; color: #fff; cursor: not-allowed; }
.bouton-plein { width: 100%; }
.bouton-sec { color: var(--acier); background: #fff; border: 1px solid var(--acier); }
.bouton-sec:hover:not(:disabled) { background: #EEF3FA; color: var(--acier-fonce); }
.lien { font: inherit; font-size: 13px; color: var(--acier); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.lien:hover { color: var(--acier-fonce); text-decoration: underline; }
.bouton-petit { min-height: 36px; padding: 6px 14px; font-size: 14px; }

.message { min-height: 22px; margin: 8px 0 0; color: var(--erreur); font-size: 14px; }
.message.ok { color: #1E7A3C; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 16px 24px; }
.vide, .info { color: var(--encre-douce); font-size: 14px; }

/* --- Écran des projets --- */
.page { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.page h1 { margin: 8px 0 16px; }
.formulaire { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--encre-douce); flex: 1 1 220px; }
.liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste li { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; }
.liste li > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; font: inherit; color: inherit; text-align: left;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.liste li > button:hover { background: #EEF3FA; }
.detail { font-size: 13px; color: var(--encre-douce); }
.info { margin-top: 28px; }

/* --- Écran d'un projet : 3 colonnes --- */
.mise-en-page {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 24px 28px; max-width: 1480px; margin: 0 auto;
}
.colonne-niveaux { flex: 1 1 200px; max-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.centre { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.colonne-droite { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.centre > div { display: flex; flex-direction: column; gap: 16px; }

.niveaux { display: flex; flex-direction: column; gap: 6px; }
.niveau {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px; border-radius: 8px; text-decoration: none; color: var(--encre);
}
.niveau:hover { background: #E7EAEE; color: var(--encre); }
.niveau .nom { font-family: 'IBM Plex Mono', Consolas, monospace; }
.niveau .etat-niveau { font-size: 12px; color: var(--encre-douce); }
.niveau[aria-current="page"] { background: var(--acier); color: #fff; font-weight: 500; }
.niveau[aria-current="page"] .etat-niveau { color: #fff; }

.form-niveau { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ligne-champs { display: flex; gap: 8px; }
.ligne-champs label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--encre-douce); }
.ligne-champs label:first-child { flex: 0 0 70px; }
.ligne-champs label:last-child { flex: 1; min-width: 0; }
.colonne-niveaux .message { padding: 0 10px; }

/* Titre du niveau et progression */
.ligne-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sous-titre { font-size: 13px; color: var(--encre-douce); }
.compteur { font-size: 14px; color: var(--encre-douce); }
.compteur strong { color: var(--encre); font-size: 18px; }
.barre { height: 8px; background: var(--filet); border-radius: 4px; margin-top: 14px; overflow: hidden; }
.barre-remplie { height: 100%; width: 0; background: var(--acier); border-radius: 4px; transition: width .2s; }

/* Renommer */
.projet-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px 6px; }
.projet-nom { font-weight: 500; word-break: break-word; }
.espace-haut { margin-top: 18px; }
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--encre-douce); }
.boutons-ligne { display: flex; gap: 8px; }
.lien-titre { margin-top: 10px; font-size: 14px; }
.form-renommer { margin-top: 10px; }
.form-renommer label { flex: 0 1 160px; }
.form-renommer label:first-child { flex: 0 0 110px; }
.form-renommer .bouton { align-self: flex-end; }
.form-renommer-nav { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }

/* Étapes */
.etapes { padding: 8px 24px 16px; }
.groupe { padding-top: 16px; }
.groupe h2 { margin: 0 0 4px; }
.etape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 0; border-top: 1px solid var(--filet);
}
.etape.bientot { opacity: .62; }
.etape .num { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; color: var(--encre-douce); width: 24px; }
.etape .libelle { flex: 1 1 180px; min-width: 0; font-weight: 500; }
.etape .actions { display: flex; gap: 8px; min-width: 150px; justify-content: flex-end; }
.pastille-resp, .pastille-etat { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.pastille-etat { min-width: 76px; text-align: center; }
.resp-dessinateur { background: #EFEDEA; color: #3B3530; }
.resp-ia { background: #E4ECF7; color: #1A4D8F; }
.etat-valide { background: #E3F1E6; color: #1E5B2E; }
.etat-a_faire { background: #FCEBDD; color: #8A3A06; }
.etat-bientot { background: #fff; color: var(--encre-douce); border: 1px dashed #AEB5BF; }

/* Lien avec le coffrage */
.info-lien { flex: 0 0 100%; padding-left: 40px; font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; color: var(--encre-douce); word-break: break-all; }
.alerte { color: var(--erreur); font-family: inherit; }
.panneau-lien {
  background: #F7F9FC; border: 1px solid var(--bord); border-left: 3px solid var(--acier); border-radius: 8px;
  padding: 14px 16px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px;
}
.panneau-titre { font-weight: 600; }
.panneau-chemin { margin: 0; font-size: 12px; color: var(--encre-douce); font-family: 'IBM Plex Mono', Consolas, monospace; word-break: break-all; }
.panneau-lien p { margin: 0; }
.panneau-lien select {
  font: inherit; font-size: 14px; color: var(--encre); background: #fff;
  border: 1px solid var(--bord); border-radius: 6px; padding: 8px 10px; min-height: 40px; width: 100%;
}
.panneau-lien select:disabled { background: #EEF0F3; color: var(--encre-douce); }

/* Page de contrôle des calques */
.controle input[type="checkbox"], .controle input[type="radio"] { width: auto; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: #4A8FE0; }
.controle { display: flex; flex-direction: column; height: calc(100vh - 62px); background: #14181d; color: #D6DBE2; }
.controle-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; background: #1B1F24; border-bottom: 1px solid #2A3038; }
.controle-barre .lien { color: #8FB4E6; }
.controle-titre { font-size: 14px; }
.controle-etat { font-size: 12px; color: #9AA3B0; }
.controle-etat.alerte { color: #FFB259; }
.controle-espace { flex: 1; }
.controle-champ { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #C9CED6; }
.controle-champ select { font: inherit; font-size: 13px; color: #fff; background: #2A3038; border: 1px solid #3C434D; border-radius: 6px; padding: 4px 8px; min-height: 32px; }
.controle-corps { flex: 1; display: flex; min-height: 0; }
.controle-gauche, .controle-droite { width: 290px; flex: 0 0 290px; overflow-y: auto; background: #1B1F24; padding: 10px 12px; font-size: 13px; }
.controle-gauche { border-right: 1px solid #2A3038; display: flex; flex-direction: column; gap: 14px; }
.controle-droite { border-left: 1px solid #2A3038; width: 340px; flex-basis: 340px; }
.controle h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #9AA3B0; margin: 0 0 6px; }
.controle h4 { font-size: 12px; color: #C9CED6; margin: 14px 0 4px; }
.controle-ligne { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.controle-centre { flex: 1; position: relative; min-width: 0; }
.controle-centre canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.controle-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,24,29,.82); font-size: 15px; text-align: center; padding: 24px; }
.controle-info { position: absolute; left: 10px; bottom: 10px; max-width: 460px; background: rgba(27,31,36,.94); border: 1px solid #3C434D; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.controle-info:empty { display: none; }
.controle-info-titre { font-weight: 600; margin-bottom: 4px; color: #FFE14D; }
.controle-info-ligne { display: flex; gap: 8px; }
.controle-info-cle { flex: 0 0 64px; color: #9AA3B0; }
.controle-nb { margin-left: auto; color: #9AA3B0; font-size: 12px; padding-left: 6px; }
.controle-petit { font-size: 12px; color: #9AA3B0; margin: 2px 0 0; }
.controle-calques input[type="search"] { background: #2A3038; border-color: #3C434D; color: #fff; min-height: 34px; margin-bottom: 6px; }
.controle-boutons { flex-wrap: wrap; margin-bottom: 6px; }
.controle-boutons .bouton-sec { background: #1B1F24; color: #8FB4E6; border-color: #4A6FA5; }
.controle-liste { max-height: 46vh; overflow-y: auto; }
.controle-calque, .controle-categorie { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.controle-categorie { align-items: flex-start; }
.controle-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controle-cat-texte { flex: 1; min-width: 0; word-break: break-word; }
.controle-puce { flex: 0 0 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
.controle .lien { color: #8FB4E6; font-size: 12px; padding: 0 2px; }

.controle-barre2 { border-bottom: 1px solid #2A3038; padding-top: 6px; padding-bottom: 6px; }
.controle-separateur { width: 1px; height: 22px; background: #3C434D; }
.controle-bascule {
  font: inherit; font-size: 13px; font-weight: 500; color: #C9CED6; background: #232930;
  border: 1px solid #3C434D; border-radius: 999px; padding: 4px 14px; min-height: 30px; cursor: pointer;
}
.controle-bascule:hover { background: #2C343D; }
.controle-bascule[aria-pressed="true"] { background: #1F5FAD; border-color: #4A8FE0; color: #fff; }
.controle-bascule-fort { border-radius: 6px; }
.controle-interrupteur { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #C9CED6; cursor: pointer; }
.controle-interrupteur input { position: absolute; opacity: 0; width: 0; height: 0; }
.controle-glissiere { position: relative; width: 38px; height: 20px; border-radius: 10px; background: #3C434D; transition: background .15s; }
.controle-glissiere::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.controle-interrupteur input:checked + .controle-glissiere { background: #4A8FE0; }
.controle-interrupteur input:checked + .controle-glissiere::after { transform: translateX(18px); }
.controle-interrupteur input:focus-visible + .controle-glissiere { outline: 2px solid #8FB4E6; outline-offset: 2px; }
.controle-centre.attente-ligne canvas { cursor: copy; }
.controle-centre.outil-main canvas { cursor: grab; }
.controle-rect { position: absolute; border: 1px solid #4A8FE0; background: rgba(74,143,224,.15); pointer-events: none; }
.controle-rect.capture { border-style: dashed; border-color: #5ED68A; background: rgba(94,214,138,.12); }
.controle-edition { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #2A3038; display: flex; flex-direction: column; gap: 8px; }
.controle-edition .controle-boutons { margin: 0; }
.bouton-danger { background: #B3261E; }
.bouton-danger:hover:not(:disabled) { background: #8C1D17; }
.controle-outil { border-top: 1px solid #2A3038; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.controle-outil h4 { margin: 0; }
.controle-tolerance { flex-direction: row; align-items: center; justify-content: space-between; }
.controle-tolerance input { width: 90px; background: #2A3038; border-color: #3C434D; color: #fff; min-height: 32px; font-size: 13px; }
.controle-cible { flex-direction: column; align-items: stretch; gap: 4px; }
.controle-cible input { background: #2A3038; border-color: #3C434D; color: #fff; min-height: 34px; font-size: 13px; }
.snapbar { position: absolute; left: 10px; top: 10px; display: flex; gap: 3px; flex-wrap: wrap; align-items: center; background: rgba(23,32,42,.92); padding: 4px; border-radius: 7px; border: 1px solid #2E3B47; max-width: calc(100% - 20px); z-index: 2; }
.snapbar button { display: flex; align-items: center; gap: 5px; border: 1px solid transparent; background: none; color: #7F909F; border-radius: 5px; padding: 3px 7px; font-size: 12.5px; cursor: pointer; }
.snapbar button:hover { color: #D9E0E6; }
.snapbar button[aria-pressed="true"] { color: #FFD43B; border-color: rgba(255,212,59,.35); background: rgba(255,212,59,.08); }
.snapbar .sym { font-size: 13px; line-height: 1; }
.snap-sep { width: 1px; height: 16px; background: #2E3B47; margin: 0 3px; }
@media (max-width: 1180px) { .snapbar button { padding: 3px 5px; } }
.controle-dalle { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.controle-dalle:hover { background: #2A3038; }
.controle-dalle.choisie { background: #2F3A4A; outline: 1px solid #8FB4E6; }
.controle-dalle .controle-puce { margin-top: 2px; }
.controle-dalle small { display: block; color: #9AA3B0; }
.geo-liste { max-height: 260px; overflow: auto; margin-top: 6px; }
.geo-liste details { margin-bottom: 4px; }
.geo-liste summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.geo-liste .pastille-geo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.geo-ligne { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #2A3038; color: inherit; font: inherit; font-size: 12px; padding: 3px 4px; cursor: pointer; }
.geo-ligne:hover, .geo-ligne.choisie { background: rgba(255, 225, 77, 0.18); }
.controle-modif { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; padding: 2px 0; }
.controle-modif span:first-child { flex: 1; word-break: break-word; }
.controle-resume-sel { display: flex; justify-content: space-between; gap: 8px; }
.controle .alerte { color: #FFB259; }
.controle .ok { color: #7BD88F; }

/* Colonne de droite */
.colonne-droite p { margin: 0 0 12px; }
.chemin { font-size: 13px; background: #F3F4F6; border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; word-break: break-all; }
.paire { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.paire span:first-child { color: var(--encre-douce); }
.paire .mono { font-size: 13px; text-align: right; word-break: break-all; }
.info-petite { font-size: 13px; color: var(--orange); margin: 8px 0 12px !important; }
.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.journal li { display: flex; gap: 12px; }
.journal .heure { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; color: var(--encre-douce); flex: 0 0 84px; padding-top: 2px; }
.journal .agent { font-weight: 500; }
.journal-vide { color: var(--encre-douce); }

@media (max-width: 720px) {
  .mise-en-page { padding: 16px; }
  .colonne-niveaux, .colonne-droite { max-width: none; }
  .etape .actions { min-width: 0; }
}

/* --- Écran de contrôle : deux espaces de travail (Calques / Éléments) --- */
.controle[data-espace="calques"] .esp-elements,
.controle[data-espace="elements"] .esp-calques { display: none !important; }
.controle-onglets { display: flex; background: #14181d; border: 1px solid #3C434D; border-radius: 8px; padding: 2px; gap: 2px; }
.controle-onglets button { border: 0; background: none; color: #9AA3B0; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.controle-onglets button:hover { color: #D6DBE2; }
.controle-onglets button[aria-selected="true"] { background: #4A8FE0; color: #fff; }
.controle-menu { position: relative; }
.controle-menu summary { list-style: none; cursor: pointer; }
.controle-menu summary::-webkit-details-marker { display: none; }
.controle-menu-corps { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #1B1F24; border: 1px solid #3C434D; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.controle-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.controle-pli > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.controle-pli > summary::-webkit-details-marker { display: none; }
.controle-pli > summary::before { content: '▸'; color: #6B7686; font-size: 11px; transition: transform .15s; }
.controle-pli[open] > summary::before { transform: rotate(90deg); }
.controle-pli > summary h3 { margin: 0; display: inline; }
.controle-pli[open] > summary { margin-bottom: 6px; }
.controle-gauche .controle-pli > label { padding-left: 14px; }
.controle-cache { display: none !important; }
.controle-sep-haut { border-top: 1px solid #2A3038; margin-top: 8px; padding-top: 8px; }
.controle-entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.controle-entete-ligne h3 { margin: 0; }
.controle-outils { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.controle-outils .controle-bascule { justify-content: flex-start; text-align: left; }
.controle-options-outil { display: flex; flex-direction: column; gap: 6px; }
.controle-options-outil .controle-champ { justify-content: space-between; }
.controle-options-outil select { max-width: 210px; }
.controle-aide:empty { display: none; }
.controle-aide { background: #222A33; border-left: 3px solid #4A8FE0; padding: 6px 8px; border-radius: 4px; color: #C9CED6; }
.controle-droite > .controle-pli { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #2A3038; }
.controle-pli > summary ~ * { margin-top: 6px; }
#ecran-controle > .controle-barre { flex-wrap: nowrap; gap: 8px 12px; }
#ecran-controle > .controle-barre > * { flex-shrink: 0; }
#ecran-controle > .controle-barre .controle-titre { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ecran-controle > .controle-barre #ctl-etat { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ecran-controle > .controle-barre .controle-espace { flex: 1 1 0; min-width: 0; }
#ecran-controle > .controle-barre #ctl-orient-aide:empty { display: none; }

.controle-outil-large { grid-column: 1 / -1; }
.controle-fiche-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.controle-fiche-titre .controle-puce { margin-top: 0; }
.controle-fiche-lignes { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; margin-top: 4px; }
.controle-fiche-lignes dt { color: #9AA3B0; }
.controle-fiche-lignes dd { margin: 0; color: #D6DBE2; }
.controle-fiche .controle-boutons:not(:has(button:not([hidden]))) { display: none; }

.controle-validation { display: flex; flex-direction: column; gap: 6px; }
.controle-validation[hidden] { display: none; }
.controle-progression { height: 6px; background: #2A3038; border-radius: 3px; overflow: hidden; }
.controle-progression span { display: block; height: 100%; width: 0; background: #40C057; transition: width .2s; }
.controle .bouton-ok { background: #2F9E44; border-color: #2F9E44; color: #fff; }
.controle .bouton-ok:hover { background: #37B24D; }
.controle .bouton-attention { background: #1B1F24; color: #FFA94D; border-color: #E8590C; }
#ctl-fiche-commentaire { flex: 1 1 100%; background: #2A3038; border: 1px solid #3C434D; color: #fff; min-height: 30px; font-size: 12.5px; border-radius: 6px; padding: 4px 8px; }
#ctl-fiche-validation[hidden] { display: none; }
.controle-etat-validee { color: #69DB7C; font-weight: 600; }
.controle-etat-a_revoir { color: #FFA94D; font-weight: 600; }
.controle-etat-a_valider { color: #9AA3B0; }

/* --- Lot 1 de la refonte : légende dans le menu ⚙, outils du plan, liste des zones à gauche --- */
.controle-menu-corps { max-height: 75vh; overflow-y: auto; }
.controle-legende { border-top: 1px solid #2A3038; padding-top: 8px; }
.controle-outil-danger { color: #FF8787; }
.controle-outil-danger:disabled { color: #6B7686; }
.controle-bascule:disabled { opacity: .45; cursor: not-allowed; }
.controle-liste-zones .controle-liste { max-height: 40vh; }
.controle-liste-zones h3 { display: flex; align-items: baseline; gap: 6px; }
.controle-liste-zones .controle-nb { margin-left: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
#ecran-controle:not([data-outil]) .snapbar, #ecran-controle[data-outil=""] .snapbar { display: none; }

/* --- Lot 2 : valeurs modifiables, sélection de plusieurs zones, fusion --- */
.controle-fiche-champ { width: 100%; background: #2A3038; border: 1px solid #3C434D; color: #fff; min-height: 28px; font-size: 12.5px; border-radius: 6px; padding: 3px 8px; }
.controle-fiche-champ:focus { outline: 2px solid #4A8FE0; outline-offset: 1px; }
.controle-fiche-lignes dd.controle-modifie::after { content: ' (modifié)'; color: #FFA94D; font-size: 11px; }
.controle-multi { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; font-size: 12.5px; }
.controle-multi-ligne { display: flex; align-items: center; gap: 6px; }
.controle-multi-ligne .controle-puce { margin-top: 0; }
.controle-fusion-ok { color: #69DB7C; }
.controle-fusion-non { color: #FFA94D; }
.controle-aligner { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.controle-aligner button { grid-column: 1 / -1; }

/* --- Liste finale des zones : une ligne par zone, « Z01  417.88b / 20 », état à droite --- */
.controle-zones { max-height: 46vh; }
.controle-zone-ligne { align-items: center; gap: 8px; padding: 6px 6px; font-size: 13px; }
.controle-zone-ligne .controle-puce { margin-top: 0; }
.controle-zone-nom { font-weight: 700; color: #fff; min-width: 34px; }
.controle-zone-vals { flex: 1; min-width: 0; color: #C9CED6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controle-zone-etat { flex: 0 0 auto; font-size: 12px; min-width: 14px; text-align: center; }
.controle-zone-fusion { color: #ffa8c5; font-size: 12px; }
.controle-dalle.choisie.controle-zone-ligne { outline: 1px solid #4A8FE0; }