:root {
    --miel: #E8930C; --miel-clair: #F6B93B; --miel-profond: #C6720A;
    --nuit: #17120B; --ivoire: #FBF6EC; --sauge: #4C6B54; --pierre: #8A7C68;
    --bg: var(--ivoire); --bg-alt: #F3EBDA; --surface: #FFFFFF;
    --ink: #241B10; --ink-soft: #6B5E49; --line: #E3D8C2;
    --accent: var(--miel-profond); --accent-ink: #3A2607;
    --halo: rgba(232,147,12,0.14); --shadow: 0 18px 40px -22px rgba(35,24,8,0.45);
    --radius: 12px;
    --serif: 'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
    --sans: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --mono: ui-monospace,'SFMono-Regular','Cascadia Code',Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--nuit); --bg-alt: #1F1810; --surface: #241C12;
        --ink: #F2E9D7; --ink-soft: #B6A488; --line: #362B1D;
        --accent: var(--miel-clair); --accent-ink: #17120B;
        --halo: rgba(246,185,59,0.16); --shadow: 0 22px 48px -24px rgba(0,0,0,0.7);
    }
}
:root[data-theme="light"] {
    --bg: var(--ivoire); --bg-alt: #F3EBDA; --surface: #FFFFFF;
    --ink: #241B10; --ink-soft: #6B5E49; --line: #E3D8C2;
    --accent: var(--miel-profond); --accent-ink: #3A2607;
    --halo: rgba(232,147,12,0.14); --shadow: 0 18px 40px -22px rgba(35,24,8,0.45);
}
:root[data-theme="dark"] {
    --bg: var(--nuit); --bg-alt: #1F1810; --surface: #241C12;
    --ink: #F2E9D7; --ink-soft: #B6A488; --line: #362B1D;
    --accent: var(--miel-clair); --accent-ink: #17120B;
    --halo: rgba(246,185,59,0.16); --shadow: 0 22px 48px -24px rgba(0,0,0,0.7);
}
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand svg { width: 32px; height: 32px; display: block; }
.brand b { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.brand b span { color: var(--accent); }

.btn { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; border-radius: 10px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform .12s ease, background .18s ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); background: var(--miel); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.editor { position: fixed; inset: 0; display: flex; flex-direction: column; }
.editor__toolbar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; background: #2b3440; color: #e8edf2; }
.editor__readonly-banner {
    position: absolute; z-index: 30; top: 8px; left: 50%; transform: translateX(-50%);
    background: #2d4d3c; color: #e8f1ec; padding: 6px 14px; border-radius: 999px; font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.editor__field { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.editor__presets { display: flex; gap: 6px; }
.editor__presets button { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.editor__presets button:hover { background: #485566; }
/* position: relative ancre le message sous la barre, quelle que soit sa hauteur. */
.editor__body { flex: 1; display: flex; min-height: 0; position: relative; }
.editor__canvas { flex: 1; display: block; min-width: 0; min-height: 0; }
.editor__gauche { width: 200px; background: #f6f8fa; border-right: 1px solid #d6dce2; overflow-y: auto; display: flex; flex-direction: column; font-size: 13px; }
.editor__right { width: 212px; background: #f6f8fa; border-left: 1px solid #d6dce2; overflow-y: auto; display: flex; flex-direction: column; font-size: 13px; }
.editor__elements { padding: 12px; }
.editor__elements-select { width: 100%; padding: 6px 8px; border: 1px solid #dfe4ea; border-radius: 5px; font-size: 12px; background: #fff; cursor: pointer; }
.editor__properties { padding: 12px; border-top: 1px solid #e4e9ee; font-size: 13px; }
.editor__prop-title { font-size: 15px; margin: 0 0 10px; }
/* UN LIBELLE NE TOUCHE PAS SA VALEUR (Damien, 01/09/2026). `justify-content: space-between` ne
   laisse aucun espace des que la valeur remplit la ligne : « Usage » et « Separer la cabine, fermer
   un dressing » se lisaient « UsageSeparer la cabine ». Le `gap` garantit la respiration, et le
   libelle cesse de se comprimer pour laisser passer une valeur longue. */
.editor__prop-list div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* SANS CETTE LIGNE, `hidden` NE FERAIT RIEN SUR UNE LIGNE DE PROPRIETE. La regle du navigateur
   `[hidden] { display: none }` pese (0,1,0) ; la regle juste au dessus pese (0,1,1) et gagne. Le
   piege a deja mordu le 01/09/2026 sur le panneau vertical : le DOM disait `hidden`, l'ecran
   montrait le contraire. */
.editor__prop-list div[hidden] { display: none; }
.editor__prop-list dt { color: #8a95a1; flex-shrink: 0; }
.editor__prop-list dd { margin: 0; font-weight: 600; text-align: right; }
.editor__delete { margin-top: 14px; width: 100%; padding: 8px; background: #fdecec; color: #c0392b; border: 1px solid #f3b6b6; border-radius: 6px; cursor: pointer; }
.editor__delete:hover { background: #f9d9d9; }
/* Le ton par défaut reste l'ancien rouge : un message sans data-ton doit rester lisible. */
.editor__message { position: absolute; z-index: 25; top: 12px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 6px; font-size: 0.9rem; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
/* Un message sans data-ton (code non encore migré) garde l'habillage rouge d'origine. */
.editor__message:not([data-ton]), .editor__message[data-ton="erreur"] { background: #fdecec; color: #c0392b; border: 1px solid #f3b6b6; }
.editor__message[data-ton="avertissement"] { background: #fdf3e3; color: #8a5a00; border: 1px solid #f0d9a8; }
.editor__message[data-ton="succes"] { background: #e9f6ee; color: #1f7a4d; border: 1px solid #bfe6ce; }
.editor__dims { display: flex; gap: 6px; margin: 4px 0 10px; }
/* `display: flex` d'une regle d'auteur l'emporte sur le `display: none` que le navigateur donne a
   [hidden] : sans cette ligne, la section restait a l'ecran alors que le DOM la disait cachee, et
   les cotes d'un produit source s'affichaient DEUX fois, en champs et en texte. */
.editor__dims[hidden] { display: none; }
.editor__dims label { display: flex; flex-direction: column; font-size: 11px; color: #8a95a1; gap: 2px; }
.editor__dims input { width: 54px; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; }
/* Les cotes d'un produit source : du texte, jamais un champ. */
.editor__dims-fixes { margin: 4px 0 10px; font-size: 13px; color: #4a5560; }
.editor__garage { margin-top: 8px; }
.editor__garage-liste { list-style: none; margin: 0; padding: 0; }
.editor__garage-objet { font-size: 11px; line-height: 1.5; padding-left: 14px; position: relative; color: #5b6a78; }
.editor__garage-objet::before { position: absolute; left: 0; }
.editor__garage-objet[data-rentre="1"]::before { content: "✓"; color: #1f7a4d; }
.editor__garage-objet[data-rentre="0"]::before { content: "✕"; color: #b8402f; }
.editor__garage-note { margin: 5px 0 0; font-size: 10px; color: #8a95a1; }
.editor__conseil-poids { margin: 6px 0 0; font-size: 11px; line-height: 1.35; color: #8a5a12;
    background: #fdf7ec; border: 1px solid #f0d9a8; border-radius: 5px; padding: 5px 8px; }
.editor__matieres-poids { margin: 4px 0 0; font-size: 11px; color: #5b6a78; }
.editor__poids-origine { display: block; font-size: 10px; color: #8a95a1; font-weight: 400; }
.editor__poids-saisi input { width: 62px; padding: 3px 4px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__pose { margin: 4px 0 10px; font-size: 11px; color: #8a95a1; }
.editor__pose label { display: flex; align-items: center; gap: 6px; }
.editor__pose input { width: 54px; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__soute { margin: 4px 0 10px; font-size: 11px; color: #8a95a1; }
.editor__soute label { display: flex; align-items: center; gap: 6px; }
.editor__soute input[type="range"] { flex: 1; min-width: 0; }
.editor__soute-couchage { margin-top: 2px; }
.editor__support { margin: 4px 0 10px; font-size: 11px; color: #8a95a1; }
.editor__support label { display: flex; align-items: center; gap: 6px; }
.editor__support-select { flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid #dfe4ea; border-radius: 5px; font-size: 12px; background: #fff; cursor: pointer; }
.editor__support-note { margin: 3px 0 0; line-height: 1.35; }
/* Tes chiffres : la valeur du produit reste en filigrane dans le champ, ce qui est saisi la
   remplace. Une valeur personnelle se voit d'un coup d'oeil, elle ne se confond jamais avec une
   valeur sourcee (bordure accentuee, et un retour a l'origine juste a cote). */
.editor__specsperso { margin: 4px 0 10px; font-size: 11px; color: #8a95a1; }
.editor__specperso { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.editor__specperso span { flex: 1; min-width: 0; }
.editor__specperso input { width: 78px; padding: 4px 6px; border: 1px solid #dfe4ea; border-radius: 5px; font-size: 12px; background: #fff; }
.editor__specperso--perso input { border-color: var(--accent); font-weight: 600; color: var(--ink); }
.editor__specperso-retour { flex-basis: 100%; text-align: left; background: none; border: 0; padding: 0; font-size: 10px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.editor__rotate { width: 100%; padding: 8px; margin-bottom: 8px; background: #eef4f8; border: 1px solid #cfe0ea; border-radius: 6px; cursor: pointer; }
.editor__rotate:hover { background: #e2edf4; }
.editor__masque { width: 100%; padding: 8px; margin-bottom: 8px; background: #f1f2f4; color: #4a5562; border: 1px solid #dfe4ea; border-radius: 6px; cursor: pointer; }
.editor__masque:hover { background: #e5e7ea; }
.editor__ptac { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.editor__ptac-track { width: 140px; height: 10px; background: #4a5562; border-radius: 5px; overflow: hidden; }
.editor__ptac-bar { height: 100%; width: 0; background: #3aa877; transition: width .15s; }
.editor__ptac[data-statut="proche"] .editor__ptac-bar { background: #e0a53a; }
.editor__ptac[data-statut="depasse"] .editor__ptac-bar { background: #e04a4a; }
.editor__ptac-text { color: #e8edf2; white-space: nowrap; }
.editor__reset { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.editor__reset:hover { background: #485566; }
/* Annuler / rétablir : discrets, ils ne doivent pas concurrencer les badges de conformité. */
.editor__historique { display: flex; gap: 4px; }
.editor__histo { background: transparent; color: #c8d1da; border: 1px solid #4a5562; border-radius: 4px; padding: 2px 8px; font-size: 15px; line-height: 1.2; cursor: pointer; }
.editor__histo:hover:not(:disabled) { background: #3a4552; color: #e8edf2; }
.editor__histo:disabled { opacity: .35; cursor: default; }
.editor__account { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.editor__account a, .editor__mesprojets { color: inherit; }
/* Déconnexion en formulaire POST (CSRF) : le bouton se fond dans la zone compte sombre. */
.editor__logout { margin: 0; display: inline-flex; }
.editor__logout button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
/* Le nom du projet ouvert, à côté du lien « Mes projets » : savoir DANS QUOI on travaille. */
.editor__projet-nom { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9c2cc; font-size: 0.9rem; }
.editor__projet-nom::before { content: '· '; }
/* Crayon de renommage, collé au nom. Discret par défaut : il ne doit concurrencer ni le nom
   ni « Mes projets ». Il ne paraît que si le projet a un identifiant (_majNomProjet). */
.editor__projet-renommer { background: transparent; border: 0; padding: 2px 4px; margin-left: 2px; cursor: pointer; font-size: 0.82rem; line-height: 1; opacity: 0.55; }
.editor__projet-renommer:hover { opacity: 1; }
.editor__projet-renommer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
/* Le champ prend la place exacte du nom dans la barre sombre, mêmes tons que « Mes projets ». */
.editor__projet-renomme { display: inline-flex; }
.editor__projet-renomme input { width: 22ch; background: #2b333d; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 3px 8px; font: inherit; font-size: 0.9rem; }
.editor__projet-renomme input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor__cotes dt { color: #8a95a1; }
.editor__label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #8a95a1; margin: 8px 0 4px; }
.editor__ptac { cursor: pointer; }
.editor__vasp, .editor__energie { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.editor__vasp:hover, .editor__energie:hover { background: #485566; }
.editor__vasp[data-statut="camping-car"], .editor__energie[data-statut="critique"] { background: #6e3b2a; border-color: #a45438; color: #ffd9c9; }
.editor__vasp[data-statut="amovible-ok"], .editor__energie[data-statut="ok"] { background: #2d4d3c; border-color: #3aa877; color: #c9f0dd; }
.editor__energie[data-statut="limite"] { background: #6e5a2a; border-color: #c99a3a; color: #ffe9c2; }
/* Le panneau flotte au dessus de la scène, donc rien ne le pousse : sans hauteur maximale, un
   onglet long (le bilan électrique en donne un : postes, production, hypothèses, verdict, achats
   et réserves) sortait par le bas de la fenêtre, et ses dernières lignes devenaient inatteignables. */
.editor__bilan { position: absolute; top: 46px; right: 12px; z-index: 20; width: 320px; max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #d6dce2; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 40, .18); padding: 12px 14px; font-size: 12px; }
/* Croix de fermeture du bilan : le panneau ne se refermait qu'en recliquant le badge qui
   l'avait ouvert. Posee en absolu dans le coin, au dessus des onglets, avec une zone de clic
   confortable sans elargir la barre d'onglets. */
.editor__bilan-close { position: absolute; top: 6px; right: 8px; z-index: 1; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: #6b7783;
    font-size: 18px; line-height: 1; cursor: pointer; }
.editor__bilan-close:hover { background: #eef2f5; color: #1f2329; }
.editor__bilan-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Les onglets s'arretent avant la croix, sinon le dernier passe dessous. */
.editor__tabs { padding-right: 30px; }
.editor__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 10px;
}
.editor__tab {
    border: 0;
    background: transparent;
    padding: 6px 10px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: 0.65;
}
.editor__tab:hover { opacity: 0.9; }
.editor__tab[data-active="1"] {
    opacity: 1;
    font-weight: 600;
    border-bottom-color: currentColor;
}
.editor__tab-pane[hidden] { display: none; }

/* Les deux onglets de la barre de droite. Colles en haut : la barre defile, et un onglet parti
   hors de l'ecran ne se retrouve qu'en remontant tout le panneau. */
.editor__onglets-droite {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f6f8fa;
    border-bottom: 1px solid #d6dce2;
}
.editor__onglet-droite {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 9px 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: 0.65;
}
.editor__onglet-droite:hover { opacity: 0.9; }
.editor__onglet-droite[data-active="1"] {
    opacity: 1;
    font-weight: 600;
    border-bottom-color: #2f6fed;
    background: #fff;
}
/* Explicite, parce qu'un display en cascade bat [hidden] sans prevenir : c'est ce qui avait fait
   afficher les cotes en double. */
.editor__panneau[hidden] { display: none; }

/* Le bloc produits vit maintenant a gauche, sous le catalogue : il n'herite plus du padding de
   .editor__properties et porte le sien. */
.editor__produits { padding: 12px; border-top: 1px solid #e4e9ee; }

/* LE PARCOURS D'AJOUT DE LA BARRE DE GAUCHE. Un seul des trois ecrans est visible a la fois : le
   bouton au repos, le catalogue, puis les produits du type choisi. */
.editor__ajouter {
    margin: 10px 12px;
    padding: 9px 10px;
    background: #2f6fed;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.editor__ajouter:hover { background: #245bc8; }
.editor__ajouter[hidden] { display: none; }

.editor__catalogue[hidden], .editor__choix[hidden] { display: none; }
.editor__catalogue-tete { display: flex; align-items: center; gap: 6px; padding: 10px 12px 6px; }
.editor__recherche {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #dfe4ea;
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
    background: #fff;
}
.editor__catalogue-fermer {
    border: 0;
    background: transparent;
    color: #8a95a1;
    font: inherit;
    cursor: pointer;
    padding: 4px 6px;
}
.editor__catalogue-fermer:hover { color: #3a4552; }
.editor__catalogue-vide { margin: 0 12px 12px; color: #8a95a1; font-size: 12px; }

/* En recherche, plusieurs categories s'affichent d'affilee : un filet les separe, sinon les
   resultats se lisent comme une seule liste ou l'on ne sait plus ce qu'on regarde. */
.editor__cat-pane[data-recherche="1"] + .editor__cat-pane[data-recherche="1"] {
    border-top: 1px solid #e4e9ee;
}
.editor__cat-pane button[hidden] { display: none; }
/* Encore le meme piege : .editor__cat-pictos est en display:flex, qui bat [hidden] sans prevenir.
   Les pictos restaient donc affiches pendant une recherche, ou ils n'ont plus rien a filtrer. */
.editor__cat-pictos[hidden] { display: none; }

.editor__choix { padding: 10px 12px 12px; }
.editor__choix-retour {
    border: 0;
    background: transparent;
    color: #2f6fed;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0 8px;
}
.editor__choix-retour:hover { text-decoration: underline; }
.editor__choix-intro { margin: 2px 0 8px; color: #8a95a1; font-size: 12px; }
.editor__choix-variante {
    margin: 10px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a95a1;
}
.editor__choix-variante:first-child { margin-top: 0; }

/* Le conseil de configuration nuit : une remarque, pas une alerte. Il ne reproche rien a un lit
   fixe, qui reste le meilleur couchage qui soit — il est simplement toujours deploye. */
.editor__conseil-nuit {
    margin: 8px 0 0;
    padding: 7px 8px;
    background: #f2f6ff;
    border-left: 2px solid #2f6fed;
    border-radius: 0 4px 4px 0;
    color: #3a4552;
    font-size: 12px;
    line-height: 1.35;
}
.editor__conseil-nuit[hidden] { display: none; }

/* D'ou viennent les chiffres du produit choisi. Discret a dessein : c'est une caution, pas un
   argument. On la cherche quand on doute d'un poids, on ne doit pas la lire tout le temps. */
.editor__source {
    margin: 6px 0 0;
    color: #8a95a1;
    font-size: 11px;
    line-height: 1.4;
}
.editor__source a { color: #2f6fed; text-decoration: none; }
.editor__source a:hover, .editor__source a:focus { text-decoration: underline; }
.editor__source[hidden] { display: none; }

.editor__bilan h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a95a1; }
.editor__bilan h3 + .editor__bilan-list { margin-top: 0; }
.editor__bilan-list { margin: 0 0 10px; }
.editor__bilan-list div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.editor__bilan-list dt { color: #8a95a1; }
.editor__bilan-list dd { margin: 0; font-weight: 600; text-align: right; }
.editor__bilan-total { border-top: 1px solid #e4e9ee; padding-top: 6px; margin-top: 6px; }
.editor__bilan-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.editor__bilan-options label { display: flex; align-items: center; gap: 6px; }
.editor__bilan-options select { padding: 2px 6px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__bilan-options input[type="number"] { width: 64px; padding: 2px 6px; border: 1px solid #dfe4ea; border-radius: 4px; }
/* Hypothèse figée (projet partagé) : encore lisible, mais visiblement hors de portée. Le lecteur
   doit voir sur quelle saison on a conclu, pas croire qu'il peut la changer. */
.editor__bilan-options :disabled { background: #f4f6f8; color: #5c6975; cursor: not-allowed; }
.editor__vasp-list { list-style: none; margin: 0 0 8px; padding: 0; }
.editor__vasp-list li { margin-bottom: 3px; }
.editor__vasp-list li[data-ok="1"] { color: #2d7a57; }
.editor__vasp-list li[data-ok="0"] { color: #9aa5b0; }
/* « warn » : critère rempli mais réserve à lever, seul le couchage en produit (largeur que les
   sources ne comptent pas pareil, ou nombre de couchages annoncé que la scène ne porte pas).
   Même orange que la liste du gabarit, qui sert déjà à ça. */
.editor__vasp-list li[data-ok="warn"] { color: #b3791f; }

/* CE QU'IL FAUT POSER pour lever une obligation. Le bouton est discret et suit sa ligne : c'est
   une porte vers le catalogue, pas un appel a l'achat. Il ne s'affiche que sur une obligation non
   remplie, donc sur une ligne deja grise. */
.editor__suggestion {
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid #cfd6dd;
    border-radius: 10px;
    background: #fff;
    color: #2f6fed;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}
.editor__suggestion:hover, .editor__suggestion:focus { border-color: #2f6fed; background: #f2f6ff; }
.editor__bilan-note { margin: 0 0 4px; color: #5c6975; line-height: 1.45; }
.editor__amovible { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12px; cursor: pointer; }
.editor__bilan-taille { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.editor__bilan-taille input { width: 60px; padding: 3px 6px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__bilan-taille select { padding: 3px 6px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__gabarit-list { list-style: none; margin: 0; padding: 0; }
.editor__gabarit-list li { margin-bottom: 3px; line-height: 1.35; }
.editor__gabarit-list li[data-ok="1"] { color: #2d7a57; }
.editor__gabarit-list li[data-ok="warn"] { color: #b3791f; }
.editor__gabarit-list li[data-ok="0"] { color: #b3492f; }
/* « na » : rien à dire pour l'instant (aucun couchage posé, aucun nombre annoncé). Gris, mais
   lisible : ces lignes portent une phrase entière à lire sur le fond blanc du bilan, et le gris
   clair des puces VASP (#9aa5b0) n'y donnait que 2,5:1, sous le seuil WCAG AA de 4,5:1. #5c6975,
   déjà le gris de texte des notes du bilan, en donne 5,6:1. */
.editor__gabarit-list li[data-ok="na"] { color: #5c6975; }
.editor__caract { margin-bottom: 6px; }
.editor__prix { margin: 2px 0 6px; font-weight: 600; color: #2d7a57; }
.editor__produits-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.editor__produits-list li { margin-bottom: 4px; }
.editor__produits-list button { display: block; width: 100%; text-align: left; padding: 5px 8px; background: #fff; border: 1px solid #e4e9ee; border-radius: 5px; color: #3a4552; cursor: pointer; }
.editor__produits-list button:hover { border-color: #6EC1E4; }
.editor__produits-list button[data-active="1"] { border-color: #2f6fed; background: #eef4ff; font-weight: 600; }
/* Premier etage du panneau produits : le genre d'appareil. Des pastilles en ligne, pour qu'on
   voie d'un coup d'oeil qu'il s'agit d'un autre choix que celui des modeles en dessous. */
.editor__variantes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.editor__variantes button { font-size: 11px; padding: 3px 9px; background: #f4f7fa; border: 1px solid #e4e9ee; border-radius: 999px; color: #55606e; cursor: pointer; }
.editor__variantes button:hover { border-color: #6EC1E4; }
.editor__variantes button[data-active="1"] { border-color: #2f6fed; background: #2f6fed; color: #fff; font-weight: 600; }
/* Un modele qui porte des chiffres constructeur : signale, parce qu'il ne se corrige pas. */
.editor__produits-list button[data-source="1"]::after { content: " ·  fiche constructeur"; color: #8a94a2; font-size: 10px; font-weight: 400; }
.editor__cat-pane button:disabled { opacity: .45; cursor: not-allowed; border-color: #e4e9ee; }
.editor__colonnes { margin: 4px 0 10px; }
.editor__col-add { float: right; font-size: 11px; padding: 1px 6px; background: #eef4f8; border: 1px solid #cfe0ea; border-radius: 4px; cursor: pointer; }
.editor__col-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.editor__col-row input { width: 46px; padding: 3px; border: 1px solid #dfe4ea; border-radius: 4px; }
.editor__col-row select { flex: 1; min-width: 0; padding: 3px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: 12px; }
/* La case du dessus se lit comme une caracteristique, pas comme un bouton. */
/* Le dessus se choisit parmi trois, il ne se coche plus. */
.editor__plan { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .8rem; color: var(--ink); }
.editor__plan select { flex: 1; min-width: 0; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .78rem; cursor: pointer; }
.editor__col-del { padding: 2px 6px; background: #fdecec; color: #c0392b; border: 1px solid #f3b6b6; border-radius: 4px; cursor: pointer; }
.editor__col-del:disabled { opacity: .4; cursor: not-allowed; }
.editor__etat { margin: 4px 0 10px; }
.editor__etat-select { width: 100%; padding: 6px 8px; border: 1px solid #dfe4ea; border-radius: 5px; font-size: 12px; background: #fff; cursor: pointer; }

/* --- Page d'accueil --- */
.home { width: min(1120px, 92vw); margin: 0 auto; }
.home .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 64px 0 72px; }
.home .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.home h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.015em; text-wrap: balance; }
.home h1 em { font-style: normal; color: var(--accent); }
.home .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 34ch; margin: 0 0 26px; line-height: 1.6; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
/* LES TROIS PORTES DE LA HOME (Nexus 702). Des cartes qui portent une phrase
   d'identification (« j'ai deja mon materiel ») et sa consequence. Aucune n'est mise en avant :
   on ne sait justement pas par ou les gens entrent, et c'est ce que ces portes mesurent.
   DEPUIS LE 06/09/2026 (Damien), chaque carte porte AUSSI un bouton d'action : la carte disait
   ou elle menait, rien ne disait qu'elle etait cliquable. Le bouton est decoratif (toute la
   carte reste le lien), il rend l'affordance visible sans choisir une porte a la place du
   visiteur : le meme « Commencer » sur les trois. */
.portes { margin-bottom: 22px; }
.portes__question { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.portes__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.porte {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    text-decoration: none; color: var(--ink);
}
.porte:hover { border-color: var(--accent); }
.porte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.porte__titre { font-weight: 600; }
.porte__texte { font-size: .82rem; color: var(--ink-soft); }
.porte__go {
    margin-top: auto; align-self: flex-start; padding: 5px 12px;
    background: var(--accent); color: var(--accent-ink); border-radius: 8px;
    font-size: .8rem; font-weight: 600;
}
.porte:hover .porte__go { filter: brightness(1.06); }
@media (max-width: 700px) { .portes__liste { grid-template-columns: 1fr; } }
.proof { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
.proof b { color: var(--accent); }
.hero__art { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.hero__art svg, .hero__art img { width: 100%; height: auto; display: block; border-radius: 10px; }
.steps-sec, .home-gallery { padding: 60px 0; }
.k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sauge); margin: 0 0 12px; }
.steps-sec h2, .home-gallery h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 32px; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.hexnum { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 16px; color: var(--accent-ink); font-family: var(--mono); font-weight: 700; background: var(--accent); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); }
.step h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; }
.step p { margin: 0; color: var(--ink-soft); }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.home-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); transition: transform .14s ease, box-shadow .18s ease; }
.home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.home-card__name { font-family: var(--serif); font-size: 1.05rem; }
.home-card__date { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }
@media (max-width: 820px) { .home .hero { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 52px; } .hero__art { order: -1; } .steps, .home-grid { grid-template-columns: 1fr; } }

/* --- Chrome de marque (pages site) --- */
header.site { display: flex; align-items: center; gap: 24px; width: min(1120px, 92vw); margin: 0 auto; padding: 14px 0; border-bottom: 1px solid var(--line); }
header.site .brand { margin-right: auto; }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a:not(.btn) { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--ink); }
/* La déconnexion est un formulaire POST (CSRF) : son bouton doit se lire comme un lien de nav. */
.site-nav__logout { margin: 0; display: inline-flex; }
.site-nav__logout button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
.site-nav__logout button:hover { color: var(--ink); }
.site-footer { width: min(1120px, 92vw); margin: 40px auto 0; padding: 32px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.site-footer small { color: var(--ink-soft); font-family: var(--mono); font-size: 0.74rem; }
/* Ne masquer que le lien d'appoint : masquer TOUS les liens rendait la déconnexion
   (et la connexion) inaccessibles sur mobile. */
@media (max-width: 720px) { .site-nav { gap: 14px; } .site-nav__optionnel { display: none; } }

/* --- Pages de contenu (/guides et /guides/{slug}) --- */
/* Colonne de lecture étroite : ces pages sont du texte long, pas une interface. */
.guides, .guide { width: min(720px, 92vw); margin: 0 auto; padding: 40px 0 64px; line-height: 1.65; }
.guides h1, .guide h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.015em; text-wrap: balance; }
.guides__intro, .guide__chapeau { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 32px; }
.guides__vide { color: var(--ink-soft); }
.guides__liste { list-style: none; margin: 0; padding: 0; }
.guides__item { border-top: 1px solid var(--line); padding: 20px 0; }
.guides__item h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 6px; }
.guides__item h2 a { color: var(--ink); text-decoration: none; }
.guides__item h2 a:hover { color: var(--accent); }
.guides__item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.guides__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }

.guide__fil { margin: 0 0 18px; font-size: 0.88rem; }
.guide__fil a, .guide__retour a { color: var(--ink-soft); text-decoration: none; }
.guide__fil a:hover, .guide__retour a:hover { color: var(--accent); }
.guide__corps h2 { font-family: var(--serif); font-size: 1.45rem; margin: 36px 0 12px; }
.guide__corps h3 { font-family: var(--serif); font-size: 1.15rem; margin: 26px 0 10px; }
.guide__corps p { margin: 0 0 16px; }
.guide__corps ul, .guide__corps ol { margin: 0 0 16px; padding-left: 22px; }
.guide__corps li { margin-bottom: 6px; }
.guide__corps a { color: var(--accent); }
/* Un tableau de cotes déborde vite sur un téléphone : c'est LUI qui défile, pas la page. */
.guide__tableau { overflow-x: auto; margin: 0 0 20px; }
.guide__tableau table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
.guide__tableau th, .guide__tableau td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.guide__tableau th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; }

.guide__cotes { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 0 0 34px; }
.guide__cotes h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 4px; }
.guide__cotes-variante { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.85rem; }
.guide__cotes-liste { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; }
.guide__cotes-liste div { display: flex; flex-direction: column; gap: 2px; }
.guide__cotes-liste dt { color: var(--ink-soft); font-size: 0.82rem; }
.guide__cotes-liste dd { margin: 0; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
/* La cote nette porte le gros chiffre, la cote de tôle passe en second plan sous elle :
   c'est la hiérarchie qui empêche de prendre une cote de tôle pour de la place disponible. */
.guide__cotes-precision { display: block; font-size: 0.72rem; font-style: italic; line-height: 1.35; }
.guide__cotes-nette { white-space: nowrap; }
.guide__cotes-brut { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 500; color: var(--ink-soft); }
.guide__estimee { font-family: var(--sans); font-size: 0.74rem; font-weight: 500; color: var(--ink-soft); }
.guide__cotes-source { margin: 18px 0 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.55; }

.guide__cta { border-top: 1px solid var(--line); margin: 40px 0 0; padding: 28px 0 0; }
.guide__cta h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 10px; }
.guide__cta p { margin: 0 0 18px; }
.guide__cta-liens { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.guide__retour { margin: 32px 0 0; font-size: 0.88rem; }

/* --- Pages légales (mentions, confidentialité, contact) --- */
/* Ces trois templates portaient `class="legal"` depuis leur création sans qu'aucune règle
   ne réponde à ce nom : le texte se rendait donc collé au bord, hors de toute colonne.
   Même colonne de lecture que les guides, pour la même raison qu'eux : c'est du texte
   suivi, pas une interface. */
.legal { width: min(720px, 92vw); margin: 0 auto; padding: 40px 0 64px; line-height: 1.65; }
.legal h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.015em; text-wrap: balance; }
.legal h2 { font-family: var(--serif); font-size: 1.3rem; margin: 34px 0 10px; }
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }

/* Le formulaire de contact se pose en carte, comme celui de connexion : sur une page de
   texte, le visiteur doit voir du premier coup d'oeil où écrire. Les champs se suivent sans
   conteneur intermédiaire dans le template, d'où l'espacement porté par les labels. */
.contact-form { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); margin: 28px 0 0; }
.contact-form label { font-size: 0.9rem; color: var(--ink-soft); }
.contact-form label:not(:first-of-type) { margin-top: 14px; }
.contact-form input, .contact-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; }
.contact-form textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form .btn { margin-top: 20px; justify-content: center; }
.contact-form small { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
/* La mention de conservation est figée au caractère près par LegalPagesTest (revue
   juridique) : elle se distingue par l'espace qui la précède, jamais par une reformulation. */
.contact-form__conservation { margin-top: 14px; }

/* Confirmation d'envoi : elle arrive après le formulaire, elle doit se voir sans crier. */
.flash { margin: 24px 0 0; padding: 12px 16px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); border-left: 3px solid var(--sauge); color: var(--ink); }

/* --- Widget feedback (languette du bord droit + modale, feedback_controller.js) --- */
/* Languette verticale collée au bord droit de l'écran, à mi-hauteur : point d'entrée par
   défaut (remplace l'ancien badge « Beta »). Coins arrondis côté gauche seulement (le bord
   droit reste flush avec la fenêtre), écriture verticale pour tenir dans une bande étroite. */
.feedback-widget__languette { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 40; display: flex; align-items: center; gap: 6px; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; color: #fff; background: var(--miel); border: none; border-radius: 10px 0 0 10px; padding: 18px 10px; cursor: pointer; box-shadow: var(--shadow); transition: background .15s ease, transform .15s ease; }
.feedback-widget__languette:hover { background: var(--miel-clair); transform: translateY(-50%) translateX(-2px); }
.feedback-widget__languette:focus-visible { outline: 2px solid var(--nuit); outline-offset: 2px; }
/* Mobile : on réduit à l'icône seule (même position), on ne supprime jamais le point d'entrée. */
@media (max-width: 820px) { .feedback-widget__languette { padding: 12px 8px; gap: 0; } .feedback-widget__languette-texte { display: none; } }
.feedback-widget__backdrop { position: fixed; inset: 0; background: rgba(23,18,11,0.45); z-index: 50; }
.feedback-widget__modal { position: fixed; right: 20px; bottom: 20px; z-index: 51; width: min(360px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; box-sizing: border-box; }
.feedback-widget__modal h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; }
.feedback-widget__intro { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 16px; }
.feedback-widget__modal form { display: flex; flex-direction: column; gap: 12px; }
.feedback-widget__honeypot { position: absolute; left: -9999px; }
.feedback-widget__type { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; }
.feedback-widget__type legend { font-size: 0.82rem; color: var(--ink-soft); padding: 0 0 6px; }
.feedback-widget__type label { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.feedback-widget__modal label { font-size: 0.88rem; color: var(--ink-soft); }
.feedback-widget__modal textarea, .feedback-widget__modal input[type="email"] { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }
.feedback-widget__modal textarea:focus-visible, .feedback-widget__modal input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-widget__connecte { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.feedback-widget__capture { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; }
.feedback-widget__statut { font-size: 0.85rem; color: var(--accent); margin: 0; }
.feedback-widget__actions { display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 480px) { .feedback-widget__modal { right: 10px; bottom: 10px; left: 10px; width: auto; } }

/* Variante discrète (bouton 💬 dans le toolbar sombre de l'éditeur) : reprend le style des
   autres boutons de la toolbar plutôt que la languette flottante utilisée partout ailleurs. */
.feedback-widget__badge--discret { position: static; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: normal; color: #e8edf2; background: #3a4552; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; box-shadow: none; line-height: 1.4; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.feedback-widget__badge--discret:hover { color: #e8edf2; background: #485566; border-color: #4a5562; }

/* Logo dans la toolbar sombre de l'éditeur */
.editor__toolbar .brand { color: #e8edf2; }
.editor__toolbar .brand svg { width: 26px; height: 26px; }
.editor__toolbar .brand b { font-size: 1.05rem; }

/* --- Auth (login / register) --- */
.auth { width: min(1120px, 92vw); margin: 0 auto; display: grid; place-items: center; padding: 56px 0; }
.auth__card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: var(--shadow); }
.auth__card h1 { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 20px; }
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.auth__form input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; }
.auth__form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth__form .btn { margin-top: 6px; justify-content: center; }
.auth__error { background: #fdecec; color: #c0392b; border: 1px solid #f3b6b6; border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) { .auth__error { background: #3a1d1d; color: #f0b4b4; border-color: #5a2b2b; } }
:root[data-theme="dark"] .auth__error { background: #3a1d1d; color: #f0b4b4; border-color: #5a2b2b; }
:root[data-theme="light"] .auth__error { background: #fdecec; color: #c0392b; border-color: #f3b6b6; }
.auth__alt { margin-top: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.auth__alt a { color: var(--accent); }
/* --- Galerie --- */
.gallery { width: min(1120px, 92vw); margin: 0 auto; padding: 44px 0 60px; }
.gallery h1 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 28px; }
.gallery__empty { color: var(--ink-soft); }
.gallery__empty a { color: var(--accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.gallery__card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); transition: transform .14s ease, box-shadow .18s ease; }
.gallery__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery__name { font-family: var(--serif); font-size: 1.1rem; }
.gallery__date { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }

/* --- Storytelling (accueil) --- */
.story { padding: 60px 0; border-top: 1px solid var(--line); }
.story__inner { max-width: 62ch; }
.story h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 20px; text-wrap: balance; }
.story p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; }
.story em { font-style: italic; color: var(--ink); }
.story__pledge { margin-top: 8px; font-size: 1.18rem; color: var(--ink); }
.story__pledge strong { color: var(--accent); }
.story__signature { margin-top: 20px; font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.05rem; }
.story__grille { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center; }
.story__photo { margin: 0; }
.story__photo img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 820px) { .story__grille { grid-template-columns: 1fr; gap: 28px; } .story__photo { order: -1; } }

/* --- Vérification e-mail --- */
.auth__notice { background: #e9f6ee; color: #1f7a4d; border: 1px solid #bfe6ce; border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) { .auth__notice { background: #16301f; color: #8fd6ab; border-color: #24512f; } }
:root[data-theme="dark"] .auth__notice { background: #16301f; color: #8fd6ab; border-color: #24512f; }

/* --- Back-office admin --- */
.admin { width: min(1120px, 92vw); margin: 0 auto; padding: 32px 0 60px; }
.admin__nav { display: flex; gap: 8px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.admin__nav a { padding: 10px 16px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.admin__nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.admin h1 { font-family: var(--serif); font-size: 1.8rem; margin: 0 0 24px; }
.admin__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.admin__stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-align: center; }
.admin__stat b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--accent); }
.admin__stat span { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.admin__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin__table th { text-align: left; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin__table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin__badge { font-family: var(--mono); font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-alt); color: var(--ink-soft); }
.admin__badge.ok { background: #e9f6ee; color: #1f7a4d; }
.admin__badge.admin { background: var(--halo); color: var(--accent); }
.admin__actions { display: flex; gap: 6px; }
.admin__actions button, .admin__actions a.btn-mini { font-family: var(--sans); font-size: 0.82rem; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.admin__actions .danger { color: #c0392b; border-color: #f0c4c4; }
.admin__confirm { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 480px; }
.admin h2 { font-family: var(--serif); font-size: 1.3rem; margin: 32px 0 8px; }
.admin__soustitre { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 16px; }
.admin__stats + .admin__table { margin-top: 20px; }
.admin__message { max-width: 420px; overflow-wrap: anywhere; }
.admin__capture { max-width: 140px; max-height: 100px; border: 1px solid var(--line); border-radius: 7px; display: block; }
.admin__table tr.is-traite td { opacity: 0.55; }
@media (max-width: 720px) { .admin__stats { grid-template-columns: repeat(2, 1fr); } }

/* Journal des nouveautés : badge de version, discret à côté de la date (champ facultatif). */
.nouveaute__version { font-family: var(--mono); font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: var(--halo); color: var(--accent); white-space: nowrap; }

/* --- Barre d'outils : 3 zones (fini les deux margin-left:auto concurrents) --- */
.editor__toolbar { justify-content: space-between; flex-wrap: wrap; }
.editor__toolbar-zone { display: flex; align-items: center; gap: 12px; min-width: 0; }
.editor__toolbar-zone--droite { margin-left: auto; }

/* --- Barre en deux étages (hors lecture seule) : Site au-dessus, Édition en dessous --- */
.editor__toolbar:not(.editor__toolbar--readonly) { flex-direction: column; align-items: stretch; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; }
.editor__siterow { display: flex; align-items: center; gap: 16px; }
.editor__siterow-left { display: flex; align-items: center; gap: 14px; }
.editor__siterow-center { flex: 1; display: flex; justify-content: center; }
.editor__siterow-right { display: flex; align-items: center; gap: 8px; }
.editor__editrow { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #3a4552; padding-top: 8px; }

/* Enregistrement : état + bouton */
.editor__save-etat { font-size: 12px; white-space: nowrap; color: #b9c2cc; }
.editor__save-etat[data-etat="enregistre"] { color: #7fd8a8; }
.editor__save-etat[data-etat="modifie"] { color: #f0c674; }
.editor__save-etat[data-etat="en-cours"] { color: #b9c2cc; }
.editor__save-etat[data-etat="echec"] { color: #f09a9a; font-weight: 600; }
.editor__save { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 4px; padding: 4px 12px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.editor__save:hover { background: var(--miel); }

/* La zone compte n'avait aucun style : e-mail qui étire la barre, bouton natif clair sur fond sombre. */
.editor__email { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor__mesprojets { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.editor__mesprojets:hover { background: #485566; }

/* --- Panneau Partager --- */
.editor__partage { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.editor__partage:hover { background: #485566; }
.editor__partage-panel {
    position: absolute; z-index: 20; top: 52px; right: 8px; width: 300px; max-height: 60vh; overflow: auto;
    background: #1f232a; color: #e8ecf1; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 10px;
    font-size: 0.9rem;
}
.editor__partage-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; }
.editor__partage-lien { display: flex; gap: 6px; margin: 8px 0; }
.editor__partage-lien input { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid #4a5562; border-radius: 4px; background: #2b3440; color: #e8edf2; font-size: 12px; }
.editor__partage-copier { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 4px; padding: 4px 10px; font-weight: 600; cursor: pointer; }
.editor__partage-public { display: flex; align-items: center; gap: 6px; margin: 10px 0; cursor: pointer; }
.editor__partage-actions { display: flex; gap: 6px; margin-top: 10px; }
.editor__partage-creer { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 4px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
.editor__partage-arret { background: #4a2f2f; color: #f0c9c9; border: 1px solid #6b4040; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.editor__partage-arret:hover { background: #5a3838; }
.editor__partage-aide { color: #b9c2cc; line-height: 1.4; margin: 0 0 10px; }
.editor__partage-invite { display: flex; gap: 6px; }
.editor__partage-invite a { background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 6px 12px; font-weight: 600; text-decoration: none; }
.editor__partage-invite a.secondaire { background: transparent; color: #e8ecf1; border: 1px solid #4a5562; }
/* Confirmation intégrée : remplace window.confirm */
.editor__confirme { background: #3a2f22; border: 1px solid #6b5330; border-radius: 4px; padding: 8px; margin-top: 8px; }
.editor__confirme p { margin: 0 0 8px; color: #f0d9a8; }
.editor__confirme-actions { display: flex; gap: 6px; }
.editor__confirme-oui { background: #a33; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.editor__confirme-non { background: transparent; color: #e8ecf1; border: 1px solid #4a5562; border-radius: 4px; padding: 4px 10px; cursor: pointer; }

/* --- Bandeau anonyme : rappelle que le travail est gardé sur l'appareil, pas sur un compte --- */
/* Dans le flux, sous la barre : le questionnaire occupe déjà l'overlay au 1er passage. */
.editor__bandeau { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 14px; background: #3a3018; color: #f0d9a8; border-bottom: 1px solid #5a4a28; font-size: 0.9rem; }
.editor__bandeau p { margin: 0; }
.editor__bandeau strong { color: #ffe9b8; }
.editor__bandeau-actions { display: flex; align-items: center; gap: 8px; }
.editor__bandeau-cta { background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 5px 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.editor__bandeau-alt { color: inherit; text-decoration: underline; white-space: nowrap; }
.editor__bandeau-fermer { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 4px; }

/* --- Avertissement mobile : l'atelier d'aménagement n'est utilisable que sur grand écran --- */
.editor__mobile { display: none; }
@media (max-width: 820px) {
    /* L'AVERTISSEMENT N'EST PLUS UNE BARRIERE. Il disait « ouvre Vagabee sur un ordinateur »,
       c'est a dire reviens plus tard, a quelqu'un venu amenager son van. L'editeur fonctionne
       desormais sur petit ecran ; le bloc et son envoi de lien par email restent joignables pour
       qui prefere continuer au clavier, mais ils ne s'imposent plus a l'arrivee. */
    .editor__mobile { display: none; }
    .editor__mobile[data-ouvert="1"] { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; background: #3a3018; color: #f0d9a8; border-bottom: 1px solid #5a4a28; text-align: center; }
    .editor__mobile-titre { margin: 0; font-weight: 700; font-size: 1rem; color: #ffe9b8; line-height: 1.35; }
    .editor__mobile-texte { margin: 0; font-size: 0.9rem; line-height: 1.45; }
    .editor__mobile-fermer { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 4px; padding: 7px 20px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
}
/* La fermeture (attribut hidden) doit l'emporter sur la règle d'affichage du media query. */
.editor__mobile[hidden] { display: none; }

/* ---- EDITEUR SUR PETIT ECRAN ------------------------------------------------------------
   Le van en 3D prend tout l'ecran, et les deux colonnes deviennent des tiroirs qui glissent par
   dessus. C'est la seule repartition qui tienne sous 820 px : a trois colonnes, la 3D tombait
   sous 300 px de large et l'on n'amenage pas un van dans un timbre poste.

   Tout est dans cette requete media : le poste de travail ne change pas d'un pixel. */
.editor__mode-nuit { background: #3a4552; color: #e8edf2; border: 1px solid #4a5562;
    border-radius: 4px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.editor__mode-nuit:hover { background: #485566; }
.editor__mode-nuit[data-mode="nuit"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.editor__tiroir-btn, .editor__vers-ordi { display: none; }

@media (max-width: 820px) {
    .editor__tiroir-btn {
        display: inline-flex; align-items: center; gap: 5px; background: #3a4552; color: #e8edf2;
        border: 1px solid #4a5562; border-radius: 4px; padding: 5px 10px; font: inherit;
        font-size: 12px; cursor: pointer;
    }
    .editor__tiroir-btn[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

    /* Les deux colonnes sortent du flux et glissent par dessus la scene. */
    .editor__gauche, .editor__right {
        position: absolute; top: 0; bottom: 0; z-index: 15; width: min(78vw, 300px);
        transition: transform 0.18s ease-out; box-shadow: 0 0 24px rgba(0,0,0,0.22);
    }
    .editor__gauche { left: 0; transform: translateX(-101%); }
    .editor__right { right: 0; transform: translateX(101%); }
    /* L'ouverture se marque SUR le tiroir, pas par un selecteur ancre sur le parent : la classe
       porte l'etat la ou il s'applique, et rien dans la cascade ne peut la contredire par
       inadvertance. */
    .editor__gauche--ouvert, .editor__right--ouvert { transform: translateX(0); }

    /* La barre se resserre : ce qui n'aide pas a amenager cede la place. */
    .editor__toolbar { gap: 8px; padding: 6px 8px; }
    .editor__siterow { display: none; }
    .editor__editrow { flex-wrap: wrap; gap: 6px; }
    .editor__presets, .editor__partage, .editor__reset { display: none; }
    /* La jauge garde sa barre, qui se lit d'un coup d'oeil, et perd son libelle chiffre, qui
       debordait de la ligne. Le detail reste a un doigt, dans le bilan. */
    .editor__ptac { min-width: 0; flex: 1; }
    .editor__ptac-text { display: none; }

    /* Le geste tactile appartient a la scene : sans ca le navigateur defile ou zoome la page
       au lieu de laisser tourner le van, et la 3D parait morte au doigt. */
    .editor__canvas { touch-action: none; }

    .editor__vers-ordi {
        display: block; margin: 10px 12px 0; padding: 6px 10px; font: inherit; font-size: 11px;
        border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; color: #5b6a78; cursor: pointer;
    }

    /* La modale du vehicule tenait dans une fenetre de bureau, pas dans une main. */
    .editor__modal { left: 8px; right: 8px; width: auto; max-width: none; max-height: 86vh; overflow-y: auto; }
}

/* --- CTA vue partagée : la barre en lecture seule n'a pas de zone compte, mais reste convertie --- */
.editor__partage-vu { font-size: 12px; color: #b9c2cc; white-space: nowrap; }

/* --- Panneau droit repensé : vues, Mon van, aménagement en accordéon --- */
.editor__vues { display: flex; gap: 6px; padding: 12px 12px 0; }
.editor__vue { flex: 1; padding: 8px 4px; font-size: 18px; line-height: 1; background: #fff; border: 1px solid #dfe4ea; border-radius: 6px; cursor: pointer; color: #3a4552; }
.editor__vue:hover { border-color: #6EC1E4; }

.editor__monvan { padding: 12px; border-bottom: 1px solid #e4e9ee; }
.editor__monvan-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor__monvan-nom { font-weight: 600; font-size: 13px; }
.editor__monvan-variante { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: #5b6a78; }
.editor__monvan-modifier { background: #eef4f8; border: 1px solid #cfe0ea; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.editor__monvan-modifier:hover { background: #e2edf4; }
/* Les trois blocs ci dessous vivent désormais chacun dans son onglet de la modale du véhicule
   (.editor__modal) et non plus empilés dans un accordéon de la colonne : plus de marge de
   séparation ni de filet entre eux, l'onglet fait ce travail. */
.editor__van-choix { display: flex; flex-direction: column; gap: 4px; }
.editor__van-choix-btn { display: block; width: 100%; text-align: left; padding: 6px 8px; background: #fff; border: 1px solid #dfe4ea; border-radius: 5px; cursor: pointer; font-size: 12px; }
.editor__van-choix-btn:hover { border-color: #6EC1E4; }
.editor__van-choix-btn[data-actif="1"] { border-color: var(--accent); background: var(--halo); font-weight: 600; }
.editor__van-options { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
/* Cotes utiles nettes : sobre, sous le nom du van, toujours visible. */
.editor__monvan-utile { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: #33505f; font-weight: 600; }
.editor__van-isolation { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.editor__van-isolation label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.editor__van-isolation input { width: 68px; padding: 2px 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: 12px; }
.editor__van-isolation-note { margin: 0; font-size: 11px; line-height: 1.35; color: #5b6a78; }

/* Cotes relevees par l'utilisateur dans son propre van. Une cote relevee se voit : elle ne vaut
   pas une cote sourcee, et les confondre reviendrait a donner a un releve l'autorite d'une fiche. */
.editor__van-mesures { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.editor__van-mesure { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.editor__van-mesure input { width: 68px; padding: 2px 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: 12px; }
.editor__van-mesure--releve input { border-color: #c98a2e; background: #fdf7ec; }
.editor__van-mesure--releve span { color: #8a5a12; font-weight: 600; }
.editor__van-mesures-note { margin: 8px 0 0; font-size: 11px; line-height: 1.35; color: #5b6a78; }
.editor__van-mesures-reset { margin-top: 8px; font: inherit; font-size: 11px; padding: 3px 10px;
    border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; color: #5b6a78; cursor: pointer; }
.editor__van-mesures-reset:hover { border-color: #b8c2cc; color: #35404b; }

/* ---- Modale du véhicule -------------------------------------------------------------
   Mêmes conventions que la modale du widget d'avis (fond assombri cliquable, panneau au
   dessus, fermeture explicite), mais dans le langage de l'éditeur : fond blanc, 12 px, filets
   #e4e9ee. Centrée et non ancrée dans un coin, parce qu'elle s'ouvre à l'arrivée sur un projet
   vierge et pose LA question du projet. z-index au dessus du bilan (20) et de la languette
   d'avis (40), sous rien d'autre. */
.editor__modal-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 40, .45); z-index: 60; }
.editor__modal-backdrop[hidden] { display: none; }
.editor__modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 61; box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #d6dce2; border-radius: 8px; box-shadow: 0 12px 32px rgba(20, 30, 40, .28); padding: 14px 16px 16px; font-size: 12px; }
.editor__modal[hidden] { display: none; }
.editor__modal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* LA POPIN DU BILAN ÉLECTRIQUE, plus large. Les 440 px de la fenêtre du véhicule tiennent trois
   sélecteurs ; un rapport électrique y remettrait le panneau de 300 px qu'il vient de quitter :
   des lignes de verdict qui font quatre lignes de texte chacune. 760 px, et le même garde fou
   de 32 px de marge que sa voisine sur un écran étroit.
   Son z-index passe au dessus (62 / 63) : les deux fenêtres ne s'ouvrent jamais ensemble
   (editor_controller.ouvrirElecDetail ferme l'autre), mais si l'une devait survivre à l'autre,
   c'est la dernière ouverte qui doit être lisible, pas celle du dessous. */
.editor__modal--large { width: min(760px, calc(100vw - 32px)); z-index: 63; }
.editor__modal-backdrop--large { z-index: 62; }
/* La fenêtre du véhicule range ses titres dans des onglets, un par panneau : chacun est le
   premier de sa boîte et n'a besoin d'aucune marge haute. Ici les cinq sections se suivent dans
   la même colonne, et sans respiration entre elles la liste précédente se lit comme le début de
   la section suivante. */
.editor__modal--large h3 { margin-top: 14px; }
.editor__modal--large .editor__modal-head + h3 { margin-top: 10px; }
.editor__modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.editor__modal-titre { margin: 0; font-size: 15px; font-weight: 600; }
.editor__modal-close { background: none; border: 0; padding: 2px 4px; font-size: 14px; line-height: 1; color: #5b6a78; cursor: pointer; }
.editor__modal-close:hover { color: #1d2a35; }
.editor__modal-intro { margin: 6px 0 12px; font-size: 11px; line-height: 1.4; color: #5b6a78; }
.editor__modal h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a95a1; }
.editor__modal h3 small { text-transform: none; letter-spacing: 0; }
.editor__modal-note { margin: 10px 0 0; font-size: 11px; line-height: 1.35; color: #5b6a78; }
.editor__modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e4e9ee; }
.editor__modal-ok { background: var(--accent); color: #fff; border: 0; border-radius: 5px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.editor__modal-ok:hover { filter: brightness(1.08); }
/* Onglet du panneau qui n'a pas le focus : le tabindex glissant le sort du parcours clavier,
   rien ne doit laisser croire qu'il est inatteignable pour autant. */
.editor__modal .editor__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Rappel des hypothèses élec, sous le RÉSUMÉ de l'onglet depuis que les cinq champs sont partis
   dans la popin : il dit le profil que le moteur a NORMALISÉ, là où les champs disent la frappe
   (0 h de route, un champ laissé vide). C'est la seule chose qui dise, popin fermée, sur quoi le
   verdict a été rendu. */
.editor__usage-resume { margin: 0 0 8px; font-size: 11px; line-height: 1.4; color: #33505f; font-weight: 600; }

/* LE RÉSUMÉ, tout ce que l'onglet Élec montre au premier coup d'œil. Un point plus gros que le
   reste du panneau : il n'a que trois ou quatre lignes à porter (la quatrième n'apparaît que
   lorsque la journée type et la nuit chaude divergent), et ce sont les seules que la plupart des
   gens liront. Les couleurs restent celles des listes de verdicts, il n'y a rien de nouveau à
   apprendre pour le lire. */
.editor__elec-resume { font-size: 13px; margin-bottom: 10px; }
.editor__elec-resume li { margin-bottom: 5px; }

/* Le bouton qui ouvre la preuve. Discret : il propose, il ne réclame pas. */
.editor__elec-detail-btn { background: #eef4f8; border: 1px solid #cfe0ea; border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; margin-bottom: 10px; }
.editor__elec-detail-btn:hover { background: #e2edf4; }
.editor__elec-detail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor__amenagement { padding: 12px; border-bottom: 1px solid #e4e9ee; font-size: 12px; }
.editor__cat-pictos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.editor__cat-picto { font-size: 16px; line-height: 1; padding: 6px 8px; background: #fff; border: 1px solid #dfe4ea; border-radius: 6px; cursor: pointer; }
.editor__cat-picto:hover { border-color: #6EC1E4; }
.editor__cat-picto[data-actif="1"] { border-color: var(--accent); background: var(--halo); }
.editor__cat-pane button { display: block; width: 100%; text-align: left; margin-bottom: 4px; padding: 6px 8px; background: #fff; border: 1px solid #dfe4ea; border-radius: 5px; cursor: pointer; }
.editor__cat-pane button:hover { border-color: #6EC1E4; }

/* --- Page « Trouver mon van » : quiz plein écran, une question par écran --- */
.vanfinder {
    box-sizing: border-box; min-height: 100vh; overflow-x: hidden;
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--ink);
    padding: 20px clamp(16px, 4vw, 40px) 40px;
}
.vanfinder *, .vanfinder *::before, .vanfinder *::after { box-sizing: border-box; }

.vanfinder__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.vanfinder__quitter {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
    text-decoration: none; font-size: 1.1rem; transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.vanfinder__quitter:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .vanfinder__quitter:hover { transform: none; } }

.vanfinder__progress-track {
    width: min(560px, 100%); margin: 0 auto; height: 8px; border-radius: 999px;
    background: var(--line); overflow: hidden;
}
.vanfinder__progress-fill {
    height: 100%; width: 14%; background: var(--accent); border-radius: 999px;
    transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) { .vanfinder__progress-fill { transition: none; } }
.vanfinder__progress-text {
    text-align: center; margin: 8px 0 0; font-family: var(--mono); font-size: 0.78rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}

.vanfinder__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.vanfinder__step { width: 100%; max-width: 680px; margin: 0 auto; text-align: center; animation: vanfinder-in .45s ease both; }
@keyframes vanfinder-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vanfinder__step, .vanfinder__resultat { animation: none !important; } }

.vanfinder__question {
    font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    line-height: 1.15; margin: 0 0 12px; text-wrap: balance;
}
.vanfinder__sous-texte { margin: 0 auto 26px; color: var(--ink-soft); max-width: 620px; line-height: 1.5; }

.vanfinder__choix-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px; width: 100%; max-width: 620px; margin: 0 auto;
}
.vanfinder__choix {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 30px 18px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
    cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.vanfinder__choix input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vanfinder__choix-emoji { font-size: 2.3rem; line-height: 1; }
.vanfinder__choix-label { font-weight: 600; font-size: 1.05rem; }
.vanfinder__choix-aide { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.3; text-align: center; margin-top: -4px; }
.vanfinder__choix:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
.vanfinder__choix:has(input:checked) { border-color: var(--accent); background: var(--halo); box-shadow: var(--shadow); }
.vanfinder__choix:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vanfinder__choix:hover { transform: none; } }

.vanfinder__taille { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vanfinder__taille input {
    width: min(240px, 70vw); text-align: center; font-family: var(--serif); font-weight: 700;
    font-size: clamp(2.2rem, 9vw, 3.6rem); color: var(--ink); background: var(--surface);
    border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 16px;
}
.vanfinder__taille input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vanfinder__taille span { color: var(--ink-soft); font-size: 1.1rem; }

.vanfinder__nav {
    display: flex; align-items: center; justify-content: space-between;
    width: min(620px, 100%); margin: 8px auto 0;
}
/* display:flex l'emporterait sur l'attribut [hidden] : on le rétablit pour masquer la nav sur l'écran résultat. */
.vanfinder__nav[hidden] { display: none; }
.vanfinder__precedent {
    background: transparent; border: 0; color: var(--ink-soft); font: inherit; font-size: 0.95rem;
    cursor: pointer; padding: 10px 4px;
}
.vanfinder__precedent:hover { color: var(--ink); }
.vanfinder__precedent[hidden] { visibility: hidden; }
.vanfinder__suivant {
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius);
    padding: 14px 30px; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow);
    transition: transform .15s ease, background .15s ease;
    margin-left: auto;
}
.vanfinder__suivant:hover { transform: translateY(-2px); background: var(--miel); }
.vanfinder__suivant:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .vanfinder__suivant:hover { transform: none; } }

.vanfinder__resultat {
    width: 100%; max-width: 640px; margin: 16px auto 0; text-align: center; animation: vanfinder-in .5s ease both;
}
.vanfinder__resultat-titre {
    font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 2.6rem);
    margin: 0 0 20px; text-wrap: balance;
}
.vanfinder__resultat-titre strong { color: var(--accent); }
.vanfinder__raisons {
    list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; text-align: left;
}
.vanfinder__raisons li {
    padding: 10px 16px; background: var(--surface); border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 4px); font-size: 0.95rem;
}
.vanfinder__gabarit { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 28px; }
/* Bandeau d'activation de fin de quiz (Nexus 560) : CTA fort vers l'éditeur préchargé. */
.vanfinder__pret {
    padding: 22px 24px; background: var(--surface); border: 1px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.vanfinder__pret-texte {
    font-family: var(--serif); font-weight: 700; font-size: 1.25rem; margin: 0 0 6px; text-wrap: balance;
}
.vanfinder__pret-aide { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 16px; }
.vanfinder__cta {
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius);
    padding: 18px 38px; font-size: 1.15rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
    transition: transform .15s ease, background .15s ease;
}
.vanfinder__cta:hover { transform: translateY(-2px); background: var(--miel); }
@media (prefers-reduced-motion: reduce) { .vanfinder__cta:hover { transform: none; } }

.vanfinder__alternatives { margin-top: 40px; }
.vanfinder__alternatives h2 {
    font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 14px;
}
.vanfinder__alt-carte {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 10px; text-align: left;
}
.vanfinder__alt-nom { font-weight: 600; }
.vanfinder__alt-choisir {
    background: transparent; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px);
    padding: 7px 16px; cursor: pointer; color: var(--ink); font: inherit;
}
.vanfinder__alt-choisir:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 560px) {
    .vanfinder__choix-grille { grid-template-columns: 1fr; }
    .vanfinder__choix { padding: 22px 16px; }
    .vanfinder__nav { flex-wrap: wrap; gap: 12px; }
    .vanfinder__suivant { flex: 1; margin-left: 0; text-align: center; }
}

/* --- Bloc « Conseillé pour toi » : suggestions d'équipement après le quiz --- */
.editor__suggestions { padding: 12px; border-bottom: 1px solid #e4e9ee; background: #fff7e8; }
.editor__suggestions-head { display: flex; justify-content: space-between; align-items: center; }
.editor__suggestions-titre { font-weight: 600; color: #8a5a00; font-size: 13px; }
.editor__suggestions-fermer { background: none; border: 0; color: #b08a3a; cursor: pointer; font-size: 14px; }
.editor__suggestions-intro { margin: 6px 0 8px; font-size: 11px; color: #8a7c68; }
.editor__suggestions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.editor__suggestions-list button { width: 100%; text-align: left; padding: 6px 8px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.editor__suggestions-list button:hover { background: var(--miel); }
.editor__suggestions-list li.editor__suggestions--fait { padding: 6px 8px; font-size: 12px; color: #9aa4ae; }

/* --- Mini-checklist d'activation (Nexus 560) : discrète, en bas à gauche du canvas,
   même palette que le bloc « Conseillé pour toi ». --- */
.editor__activation {
    position: absolute; z-index: 20; left: 216px; bottom: 16px; max-width: 230px;
    padding: 10px 14px; background: #fff7e8; border: 1px solid #f0d9a8; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12); font-size: 12px;
}
.editor__activation-titre { margin: 0 0 6px; font-weight: 600; font-size: 12px; color: #8a5a00; }
.editor__activation-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.editor__activation-liste li { color: #8a7c68; }
.editor__activation-liste li[data-fait="1"] { color: #1f7a4d; }

/* Journal des nouveautes : une entree est une LISTE de changements, pas un paragraphe.
   Puces discretes et interlignes aeres, on parcourt cette page en diagonale. */
.nouveaute__liste { margin: 8px 0 0; padding-left: 20px; }
.nouveaute__liste li { margin-bottom: 6px; line-height: 1.55; }

/* --- Mes projets : la page où l'on retrouve ses aménagements --- */
.mesprojets { width: min(1180px, 92vw); margin: 0 auto; padding: 40px 0 64px; }
.mesprojets__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.mesprojets h1 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; }
.mesprojets__nouveau {
    font-family: var(--sans); font-weight: 600; font-size: 0.95rem; border-radius: 10px; padding: 9px 16px;
    cursor: pointer; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink);
}
.mesprojets__nouveau:hover { background: var(--miel); }
.mesprojets__attente { color: var(--ink-soft); }

/* `min(320px, 100%)` et non 320px : sur un Galaxy Fold (280 px) le conteneur fait 258 px, sur
   un iPhone SE première génération (320 px) il en fait 294. Une carte de 320 px y débordait,
   et la page défilait en travers. À partir de 360 px, la largeur voulue tient d'elle même. */
.mesprojets__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.mesprojets__carte {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden; transition: transform .14s ease, box-shadow .18s ease;
}
.mesprojets__carte:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* L'aperçu est un plan : fond neutre et clair dans les deux thèmes, comme une feuille de calque.
   Les couleurs du dessin sont celles de la 3D, elles ne se relisent pas sur un fond sombre. */
.mesprojets__apercu { background: #eef2f5; border-bottom: 1px solid var(--line); line-height: 0; }
.mesprojets__apercu canvas { width: 100%; height: auto; display: block; }
.mesprojets__apercu[data-apercu="indisponible"] { min-height: 60px; }

.mesprojets__corps { padding: 16px 18px 6px; display: flex; flex-direction: column; gap: 6px; }
.mesprojets__nom { font-family: var(--serif); font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.mesprojets__date { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); margin: 0; }
.mesprojets__vide { color: var(--ink-soft); font-size: 0.9rem; margin: 6px 0; }
/* Un aménagement abîmé n'est pas un aménagement jamais commencé : il se signale, sans
   prendre le ton d'une alerte. Le van a peut être des mois de travail derrière lui. */
.mesprojets__illisible { color: var(--ink); font-size: 0.9rem; margin: 6px 0; }
.mesprojets__indispo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt);
}
.mesprojets__indispo p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.mesprojets__partage { font-size: 0.8rem; color: var(--ink-soft); margin: 2px 0 0; }

.mesprojets__caracts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 10px 0 4px; }
.mesprojets__caracts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mesprojets__caracts > div[data-caract="van"] { grid-column: 1 / -1; }
.mesprojets__caracts dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.mesprojets__caracts dd { margin: 0; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
/* Le poids et le score portent un verdict : la couleur le redit, elle ne l'explique pas. */
.mesprojets__caracts > div[data-statut="proche"] dd { color: #8a5a00; }
.mesprojets__caracts > div[data-statut="depasse"] dd,
.mesprojets__caracts > div[data-statut="camping-car"] dd { color: #c0392b; }
@media (prefers-color-scheme: dark) {
    .mesprojets__caracts > div[data-statut="proche"] dd { color: #e0b160; }
    .mesprojets__caracts > div[data-statut="depasse"] dd,
    .mesprojets__caracts > div[data-statut="camping-car"] dd { color: #f0a8a8; }
}
:root[data-theme="dark"] .mesprojets__caracts > div[data-statut="proche"] dd { color: #e0b160; }
:root[data-theme="dark"] .mesprojets__caracts > div[data-statut="depasse"] dd,
:root[data-theme="dark"] .mesprojets__caracts > div[data-statut="camping-car"] dd { color: #f0a8a8; }
:root[data-theme="light"] .mesprojets__caracts > div[data-statut="proche"] dd { color: #8a5a00; }
:root[data-theme="light"] .mesprojets__caracts > div[data-statut="depasse"] dd,
:root[data-theme="light"] .mesprojets__caracts > div[data-statut="camping-car"] dd { color: #c0392b; }

.mesprojets__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; margin-top: auto; }
.mesprojets__actions button {
    font-family: var(--sans); font-size: 0.88rem; border-radius: 8px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
}
.mesprojets__actions button:hover { border-color: var(--accent); color: var(--accent); }
.mesprojets__ouvrir { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: transparent !important; font-weight: 600; }
.mesprojets__ouvrir:hover { background: var(--miel) !important; }
.mesprojets__supprimer:hover { border-color: #c0392b !important; color: #c0392b !important; }

.mesprojets__renomme { display: flex; gap: 6px; padding: 0 18px 16px; }
.mesprojets__renomme input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.9rem; }
.mesprojets__renomme button { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 6px 12px; font-weight: 600; cursor: pointer; }

.mesprojets__confirme { margin: 0 18px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); }
.mesprojets__confirme p { margin: 0 0 8px; font-size: 0.9rem; }
.mesprojets__confirme-actions { display: flex; gap: 8px; }
.mesprojets__confirme-oui { background: #c0392b; color: #fff; border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.mesprojets__confirme-non { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.mesprojets__message { margin: 0 18px 16px; font-size: 0.88rem; color: #c0392b; }

.mesprojets__accueil { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.mesprojets__accueil p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.mesprojets__accueil-titre { font-family: var(--serif); font-size: 1.3rem; color: var(--ink) !important; }
.mesprojets__demarrer { margin-top: 6px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 10px; padding: 10px 18px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.mesprojets__demarrer:hover { background: var(--miel); }
.mesprojets__reessayer { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; cursor: pointer; font: inherit; }
.mesprojets__invite { margin-top: 24px; padding: 20px 24px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px; }
.mesprojets__invite p { margin: 0 0 12px; color: var(--ink-soft); max-width: 62ch; }
.mesprojets__invite-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mesprojets__secondaire { color: var(--accent); text-decoration: none; font-weight: 600; }

/* Le selecteur d ambiance, dans le panneau du van : il rhabille tout le van d un coup. */
.editor__ambiance { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: #8a95a1; }
.editor__ambiance select { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid #dfe4ea; border-radius: 5px; font-size: 12px; background: #fff; cursor: pointer; }

/* --- Atelier des modeles (page de developpement) --- */
.atelier { width: min(1400px, 94vw); margin: 0 auto; padding: 32px 0 64px; }
.atelier h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 8px; }
.atelier__intro { color: var(--ink-soft); max-width: 70ch; margin: 0 0 32px; }
.atelier__bloc { border-top: 1px solid var(--line); padding: 24px 0; }
.atelier__titre { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.atelier__titre h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0; }
.atelier__cotes { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }
/* Le rendu a gauche, les references a droite : c'est la comparaison qui est l'objet de la page. */
.atelier__comparaison { display: grid; grid-template-columns: 420px 1fr; gap: 20px; align-items: start; }
/* L'onglet vehicule a son propre cadrage : Three3DView dimensionne son canvas sur le conteneur,
   et sans largeur imposee la coque poussait la page a mille pixels de large. */
.atelier__rendu { margin: 0; }
.atelier__rendu canvas { border: 1px solid var(--line); border-radius: 10px; display: block; cursor: grab; }
.atelier__rendu figcaption, .atelier__ref figcaption { font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; }
.atelier__references { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.atelier__produit { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.atelier__ref { margin: 0; }
.atelier__ref img { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.atelier__sans-ref { color: var(--ink-soft); font-style: italic; }
/* Les angles des photos du constructeur, atteignables en un clic : a la souris on n'y arrive pas. */
/* Le vehicule en haut : il donne le contexte de tout le reste. */
    margin: 18px 0 10px; padding: 12px 14px; background: #f3f6f8; border: 1px solid var(--line); border-radius: 8px; }

    background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ink-soft); }

.atelier__filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.atelier__filtre { font: inherit; font-size: 0.78rem; padding: 4px 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); }
.atelier__filtre[data-actif="1"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.atelier__categorie { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.atelier__bloc[hidden] { display: none; }

/* L'ETAT DU MODELE, dans l'en tete de chaque bloc.
   Les couleurs vont du rouge au vert dans l'ordre d'avancement, et le gris est reserve a ce qui
   NE SE JUGE PAS : un meuble fabrique et un modele sans reference ne sont pas en retard, ils sont
   hors du classement. Les confondre avec « de memoire » ferait chercher un travail qui n'existe pas. */
.atelier__etat { font-size: 0.7rem; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent; letter-spacing: 0.02em; }
.atelier__etat[data-etat="absent"] { background: #fdecea; color: #a32b1c; border-color: #f2c2b8; }
.atelier__etat[data-etat="en_defaut"] { background: #fdecea; color: #a32b1c; border-color: #f2c2b8; }
.atelier__etat[data-etat="de_memoire"] { background: #fdf3e2; color: #8a5b12; border-color: #f0dcb4; }
.atelier__etat[data-etat="sur_photo"] { background: #eaf6ed; color: #1f6b39; border-color: #bfe0c9; }
.atelier__etat[data-etat="sur_plan"] { background: #e6f2ee; color: #14614c; border-color: #a9d6c8; }
.atelier__etat[data-etat="sans_reference"] { background: #f1f2f4; color: #5a616a; border-color: #dcdfe3; }
.atelier__etat[data-etat="hors_sujet"] { background: #f1f2f4; color: #7a8189; border-color: #e3e6e9; }

/* La rangee des etats se distingue de celle des categories : ce sont deux questions differentes,
   et les empiler sans marque visible faisait cliquer dans la mauvaise. */
/* Le bouton de validation, a cote du badge. Discret : il ne se clique qu'apres avoir regarde. */
.atelier__valider { font: inherit; font-size: 0.68rem; margin-left: 6px; padding: 1px 8px; cursor: pointer;
    border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); }
.atelier__valider:hover { border-style: solid; color: var(--ink); }
.atelier__etat[data-etat="a_revalider"] { background: #fdf3e2; color: #8a5b12; border-color: #e8c98a; font-weight: 600; }

/* La rangee des types se distingue de celle des categories : ce sont deux niveaux, et les empiler
   sans marque visible faisait cliquer dans la mauvaise. */
/* L'identifiant du modele : petit, monospace, et cliquable. Il remplace le numero de boucle,
   qui ne designait plus rien depuis que la page n'affiche qu'une categorie. */
.atelier__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem;
    color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--line); }
.atelier__ref:hover { color: var(--ink); border-bottom-style: solid; }
.atelier__bloc:target { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }

.atelier__filtres--type { margin-top: -8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.atelier__filtres a.atelier__filtre { text-decoration: none; }

.atelier__vues { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.atelier__vues button { font: inherit; font-size: 0.78rem; padding: 3px 10px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); }
.atelier__vues button:hover { border-color: var(--ink-soft); color: var(--ink); }
/* Un document (notice, fiche) porte le meme numero qu'une photo : on dit « le 5 » sans preciser. */
.atelier__doc { margin: 0; display: flex; flex-direction: column; justify-content: center;
    min-height: 90px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.atelier__doc a { font-size: 0.85rem; }
.atelier__doc figcaption { font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; }
.atelier__note { display: block; margin-top: 4px; font-size: 0.72rem; line-height: 1.35; }
@media (max-width: 900px) { .atelier__comparaison { grid-template-columns: 1fr; } }
/* Le numero d'un appareil dans l'atelier : assez gros pour se lire de loin, assez discret pour
   ne pas voler la vedette au nom. Il sert a se designer un modele a l'oral. */
.atelier__numero { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--accent); }


/* LA BARRE DES VUES (Nexus 699). Cinq portes de meme rang vers le meme projet. Elle se lit comme
   une navigation et non comme des onglets d'annexe : c'est tout le propos du chantier. */
/* flex 0 0 auto : `.editor` est une colonne flex qui remplit la fenetre, et sans cette ligne la
   barre se faisait comprimer a un pixel de haut par la scene qui reclame toute la place. */
.editor__vues { display: flex; flex: 0 0 auto; gap: 2px; padding: 0 12px; background: var(--surface, #fff);
    border-bottom: 1px solid var(--line); overflow-x: auto; }
.editor__vue { font-size: 0.9rem; padding: 9px 16px; color: var(--ink-soft); text-decoration: none;
    border-bottom: 2px solid transparent; white-space: nowrap; }
.editor__vue:hover { color: var(--ink); }
.editor__vue[data-actif="1"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.editor__synthese { margin-left: auto; align-self: center; font-size: 0.82rem; padding: 3px 10px;
    border-radius: 999px; white-space: nowrap; }
.editor__synthese[data-statut="ok"] { color: #1b6b3a; background: #e7f5ec; }
.editor__synthese[data-statut="attention"] { color: #8a5300; background: #fdf3e3; }


/* --- LES VUES SANS 3D (Nexus 700) ---
   Quatre vues sur cinq sont des listes et des chiffres. Tant qu'elles s'ouvraient en tiroir par
   dessus la scene, elles restaient des annexes du dessin : on les lisait dans une colonne de 340
   px pendant qu'un van occupait le reste de l'ecran. Elles prennent desormais la page.
   Consequence non cherchee mais precieuse : elles tiennent sur un telephone. */
/* Le corps N'EST PLUS MASQUE depuis le 28/08 : il porte les deux colonnes laterales de ces vues.
   Voir la regle « LES VUES SANS SCENE ONT DES COLONNES » plus bas. */
[data-vue-sans-3d="1"] .editor__bilan {
    display: block;
    position: static;
    width: auto;
    border: 0;
    box-shadow: none;
    max-height: none;
    /* LE FOND DE LA PAGE, PAS CELUI DU TIROIR (Damien, 29/08/2026 : « Masse il manque le fond
       jaune »). En tiroir flottant, ce panneau est une feuille blanche posee sur la scene, et son
       `background: #fff` est ce qui l'en detache. En pleine page il n'a plus rien a survoler : ce
       blanc recouvrait l'ivoire de la marque sur toute la vue des masses, seule des huit a le
       faire, et ses cartes blanches y devenaient invisibles faute de contraste. */
    background: transparent;
    font-size: inherit;
    /* La mise en page et le DEFILEMENT sont communs a toute vue en pleine page : voir la regle
       `.editor__etape, [data-vue-sans-3d="1"] .editor__bilan`. Cette declaration portait
       `overflow: visible`, qui rendait le panneau muet quand son contenu depassait l'ecran. */
}
/* Le tiroir se fermait par une croix : dans une page, la croix ne mene nulle part. */
[data-vue-sans-3d="1"] .editor__bilan-fermer { display: none; }
/* Les onglets du tiroir n'ont plus lieu d'etre : la barre des vues les a remplaces. Ils restent
   dans le DOM le temps que la 3D et les vues partagent le meme gabarit. */
[data-vue-sans-3d="1"] .editor__tabs { display: none; }

@media (max-width: 820px) {
    /* Le padding mobile est pose plus bas, avec celui des etapes : une regle hors media query
       ecrase celle d'un media query ecrit AVANT elle, a specificite egale. */
    [data-vue-sans-3d="1"] .editor__vues { padding: 0 4px; }
    [data-vue-sans-3d="1"] .editor__vue { padding: 9px 11px; font-size: 0.85rem; }
}


/* AJOUTER DEPUIS UNE VUE SANS 3D (Nexus 701). La colonne du catalogue est masquee avec la scene ;
   elle revient en panneau flottant, par dessus la vue, le temps de choisir. */
.editor__vues-ajouter { margin-left: 14px; align-self: center; font: inherit; font-size: 0.85rem;
    padding: 5px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff;
    color: var(--ink); cursor: pointer; white-space: nowrap; }
.editor__vues-ajouter:hover { border-color: var(--accent); }
/* --- LES VUES SANS SCENE ONT DES COLONNES, ELLES AUSSI (28/08/2026) ---
   Damien : « on ouvre a droite egalement », « ca me va pas le fait que ce soit au dessus, il faut
   faire comme dans Agencement ».

   Le catalogue s'ouvrait EN SURIMPRESSION, par dessus la page : on choisissait un equipement en
   masquant ce qui avait motive le choix. Agencement, lui, pose ses deux colonnes A COTE du
   contenu, et rien ne se recouvre. Les vues sans scene font desormais pareil.

   LE CORPS DEVIENT LA RANGEE : colonne de gauche, page de l'etape a la place du canevas, colonne
   de droite. Les deux colonnes restent repliees tant qu'on ne demande rien — une page de chiffres
   n'a pas besoin d'un catalogue ouvert en permanence. */
[data-vue-sans-3d="1"] .editor__body { display: flex; flex: 1; min-height: 0; }
[data-vue-sans-3d="1"] .editor__body .editor__etape,
[data-vue-sans-3d="1"] .editor__body .editor__bilan { flex: 1; min-width: 0; }
[data-vue-sans-3d="1"] .editor__gauche:not([data-flottant="1"]) { display: none; }
[data-vue-sans-3d="1"] .editor__right:not([data-ouvert="1"]) { display: none; }
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"],
[data-vue-sans-3d="1"] .editor__right[data-ouvert="1"] { display: flex; position: relative; }

/* LA SORTIE NE S'AFFICHE QUE QUAND IL Y A DE QUOI SORTIR : sur la vue qui dessine, ces colonnes
   font partie de l'ecran et n'ont rien a fermer. */
.editor__gauche-fermer { display: none; }
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__gauche-fermer {
    display: block; position: absolute; top: 8px; right: 8px; z-index: 1;
    width: 26px; height: 26px; padding: 0; line-height: 1;
    background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
    color: var(--ink-soft); font-size: 13px; cursor: pointer;
}
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__gauche-fermer:hover { color: var(--ink); }
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__gauche-fermer:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Ni camera ni bouton de pose ni bouton d'ajout generique dans une colonne ouverte depuis une vue
   sans scene : les deux premiers parlent d'un dessin absent, le troisieme ouvrirait le catalogue
   ENTIER alors qu'on vient d'en demander une part (« on ne met pas Ajouter un element a gauche »). */
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__vues-camera,
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__bac-placer,
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] .editor__ajouter { display: none; }

@media (max-width: 820px) {
    /* Sur un telephone, deux colonnes de 200 px ne laissent rien au milieu : la colonne demandee
       reprend la surimpression, seule mise en page qui tienne a cette largeur. */
    [data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"],
    [data-vue-sans-3d="1"] .editor__right[data-ouvert="1"] {
        position: fixed; top: 0; bottom: 0; z-index: 41; width: 88vw;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.22);
    }
    [data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] { left: 0; }
    [data-vue-sans-3d="1"] .editor__right[data-ouvert="1"] { right: 0; }
    .editor__vues-ajouter { margin-left: 8px; padding: 5px 9px; font-size: 0.8rem; }
}


/* LE BAC, DANS LA COLONNE DE GAUCHE (Nexus 697). Au dessus du bouton d'ajout : ce qu'on ajoute et
   ce qui attend d'etre pose se lisent au meme endroit. */
.editor__bac { padding: 10px 10px 12px; border-bottom: 1px solid #d6dce2; background: #fffdf6; }
.editor__bac-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-soft); margin-bottom: 6px; }
.editor__bac-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex;
    flex-direction: column; gap: 3px; }
.editor__bac-item { width: 100%; text-align: left; font: inherit; font-size: 12px; padding: 5px 7px;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
    cursor: pointer; }
.editor__bac-item:hover { border-color: var(--accent); }
.editor__bac-placer { width: 100%; font: inherit; font-size: 12px; padding: 6px; border: 0;
    border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 600;
    cursor: pointer; }

/* LA CONFIRMATION DANS LE BAC. Celle du panneau de partage est sombre, et son bouton est rouge :
   elle a ete faite pour arreter un partage, une action qu'on veut faire hesiter. Poser un meuble
   qu'on vient de choisir n'est pas de cette nature, et le bac est sur fond clair. */
.editor__bac .editor__confirme { background: #fff; border: 1px solid var(--accent); }
.editor__bac .editor__confirme p { color: var(--ink); font-size: 12px; }
.editor__bac .editor__confirme-oui { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.editor__bac .editor__confirme-non { color: var(--ink-soft); border-color: var(--line); }

/* --- LES ETAPES DU PARCOURS (Nexus 759) ---
   La barre des vues est devenue l'ordre d'un chantier : six etapes qui ecrivent dans le projet,
   trois bilans qui le lisent. Une etape prend la PAGE, comme les vues sans 3D depuis Nexus 700 :
   c'est ce qui a permis de demonter la fenetre du vehicule, qui n'existait que pour offrir de la
   place a des reglages coinces dans 300 px. */
/* UNE PAGE QUI NE DEFILE PAS EST UNE PAGE TRONQUEE (bug signale par Damien le 27/08/2026 :
   « je ne peux pas descendre pour saisir mes releves »).

   `.editor` est `position: fixed; inset: 0` — il le faut pour que la 3D occupe l'ecran sans que
   la page bouge sous elle. Consequence : LA PAGE ELLE MEME NE DEFILE JAMAIS. Tant que les vues
   s'ouvraient en tiroir, chaque tiroir portait son propre `overflow-y`. Depuis qu'elles prennent
   la page (Nexus 700, puis les etapes en 759), plus personne ne le portait : tout ce qui depassait
   la hauteur de la fenetre devenait INATTEIGNABLE. Les releves du van, replies tout en bas de la
   1ere etape, tombaient systematiquement dehors.

   Et `flex: 1` compte autant que `overflow-y` : sans lui, l'enfant d'un flex en colonne se laisse
   COMPRIMER sous sa hauteur naturelle, et son contenu deborde d'une boite qui ne defile pas.
   `min-height: 0` leve la taille minimale implicite qui empeche cette compression de fonctionner.

   Le centrage passe du couple `max-width` + `margin: auto` a un padding calcule : la barre de
   defilement reste ainsi au bord de la FENETRE, la ou on la cherche, et non a 1100 px du centre. */
.editor__etape,
[data-vue-sans-3d="1"] .editor__bilan {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: none;
    margin: 0;
    padding: 18px max(20px, calc((100% - 1100px) / 2)) 40px;
}
.editor__etape-titre { margin: 0 0 18px; font-size: 1.25rem; font-weight: 600; color: var(--ink); }
/* TOUT BLOC D'ETAPE EST UNE CARTE, ET ELLE EST CHAUDE (Damien, 28/08 : « je veux le fond jaune de
   la partie Electricite, et tout dans blocs comme Masse »).

   L'editeur a grandi sur des gris bleutes — #f7f9fa, #e3e8ec, #1f2329 — pendant que le site tenait
   une palette de miel et d'ivoire. Les deux se voyaient dans la meme page : des cartes froides sur
   un fond chaud. Les blocs prennent donc les jetons de la marque, et l'ecran cesse d'etre deux
   designs cousus ensemble.

   Une seule regle sert desormais les huit vues : ce qui etait pose a meme le fond sur Electricite,
   Eau et Gaz devient une carte comme sur Masses, sans qu'aucun gabarit ait a changer. */
.editor__etape-bloc {
    margin-bottom: 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.editor__etape-bloc h2 { color: var(--ink); }
.editor__etape-note { color: var(--ink-soft); }
.editor__etape-bloc h2 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: #1f2329; }
.editor__etape-note { margin: 8px 0 0; font-size: .82rem; color: #6b7783; }
/* Le texte d une vue qui n a pas encore de contenu : une phrase se lit mieux qu une ligne de
   tableau, et elle a droit a sa longueur de ligne confortable. */
.editor__dossier-texte { margin: 0 0 10px; max-width: 62ch; line-height: 1.5; color: var(--ink); }
/* LE VAN QUI MANQUE : UN APPEL, PAS UNE ALARME (Damien, 29/08/2026). Il se lit avant les chiffres
   qu'il nuance, mais il ne crie pas : personne n'a rien casse, il manque juste une reponse. Le
   fond chaud le distingue des cartes sans l'opposer a elles. */
.editor__van-absent {
    margin: 0 0 14px; padding: 10px 14px;
    background: var(--bg-alt); border-radius: 8px;
    font-size: .85rem; color: var(--ink);
}
.editor__van-absent a { color: inherit; font-weight: 600; }
/* L aide au choix, sous la liste : elle repond a qui n a pas trouve son van dedans, donc elle
   vient APRES, pas avant. */
.editor__van-aide { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: .85rem; color: var(--ink-soft); }
.editor__van-aide a { color: var(--ink); font-weight: 600; }
/* LE MATELAS : deux listes cote a cote, parce que la mousse et l'epaisseur se choisissent
   ensemble — changer l'une sans voir l'autre n'a pas de sens. La note dit ce que ca pese, seul
   endroit ou ce chiffre se lit (le total du meuble le noie). */
.editor__matelas { margin-bottom: 8px; }
.editor__matelas-choix { display: flex; gap: 8px; }
.editor__matelas-choix label { flex: 1; min-width: 0; }
.editor__matelas-choix select { width: 100%; }
.editor__matelas-note { margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); }
/* LE SENS D OUVERTURE, sous sa colonne : il n a de sens que pour ce qui s ouvre, et il vaut mieux
   une seconde ligne discrete qu une ligne de colonne surchargee de six controles. */
/* Les reglages se rattachent a LEUR colonne : sans ce filet a gauche, la seconde ligne parait
   appartenir a la colonne suivante, et on regle la mauvaise. */
.editor__col-sens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px 4px; padding-left: 6px; border-left: 2px solid #eef1f4; }
.editor__col-sens select { flex: 1; min-width: 84px; padding: 3px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .74rem; }
/* La cote porte sa lettre : H et P se lisent d un coup d oeil, sans mot dans un panneau etroit. */
.editor__col-cote { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--ink-soft); }
.editor__col-cote input { width: 42px; padding: 3px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .74rem; }
/* CELLE LA EST UNE ALERTE, et elle a le droit de le montrer : le meuble est deja rouge dans la
   scene, la phrase ne fait que dire ce que la couleur signifie. */
.editor__conflit {
    margin: 0 0 10px; padding: 8px 10px; border-radius: 6px;
    background: #fdecec; border-left: 3px solid #c0392b;
    font-size: .8rem; color: #8a2d20;
}
.editor__dossier-texte:last-child { margin-bottom: 0; }
/* LES RELEVES SONT REPLIES : ils ne servent qu'a ceux dont le modele manque au catalogue. Replies,
   ils restent a un clic sans occuper la page de tous les autres. */
.editor__etape-repli { margin-top: 12px; border-top: 1px solid #e3e8ec; padding-top: 12px; }
.editor__etape-repli > summary { cursor: pointer; font-size: .88rem; color: #3b4650; padding: 4px 0; }
.editor__etape-repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor__etape-repli h2 { margin: 12px 0 8px; font-size: .9rem; font-weight: 600; }

@media (max-width: 820px) {
    .editor__etape { padding: 14px 12px 32px; }
    [data-vue-sans-3d="1"] .editor__bilan { padding: 14px 12px 32px; }
}

/* --- LES SOUS ONGLETS D'UNE ETAPE (Nexus 759) ---
   La 3e etape rangeait son rapport dans une popin de 760 px ; il est maintenant derriere un sous
   onglet, dans la page. Meme grammaire visuelle que les onglets du bilan (data-active porte
   l'etat, le soulignement suit) pour qu'un utilisateur qui a appris a lire l'un lise l'autre sans
   rien reapprendre. */
.editor__sous-onglets {
    display: flex;
    gap: 4px;
    margin: 0 0 18px;
    border-bottom: 1px solid #e3e8ec;
}
.editor__sous-onglet {
    border: 0;
    background: transparent;
    padding: 8px 14px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: .65;
}
.editor__sous-onglet:hover { opacity: .9; }
.editor__sous-onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.editor__sous-onglet[data-active="1"] { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }
/* LE CONTENU D'UN SOUS ONGLET EST UNE CARTE, comme tout le reste (« tout dans blocs comme
   Masse »). Le rapport electrique restait pose a meme le fond, seul ilot sans cadre de la page. */
/* LE SOUS ONGLET N'EST PLUS UNE CARTE, IL EN CONTIENT. Les trois parties du reseau vivent dans le
   Resume depuis le 28/08 — sur Detail elles doublonnaient le rapport — et des cartes dans une carte
   se lisent mal. Le pane redevient un simple conteneur ; ce qu'il porte est encadre. */
.editor__sous-pane { margin-bottom: 0; }
.editor__sous-pane[hidden] { display: none; }

/* Ce que l'isolation coute, a cote de ce qui la commande. Le poids d'abord : c'est le chiffre qui
   decide, et il change du simple au double selon l'isolant. */
.editor__isolation-poids { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #1f2329; }
.editor__isolation-cotes { margin: 0; font-size: .88rem; color: #3b4650; }

/* --- LE BUDGET (Nexus 759, tache 580) ---
   Le total en premier et en gros : c'est la question qu'on vient poser. Les categories ensuite,
   avec leur sous total, et les types dedans. Un prix RELEVE et une ESTIMATION ne se distinguent
   pas par une legende mais par le poids du trait : l'estimation est plus pale, ce qui se lit sans
   qu'on l'explique. */
.editor__budget-total { margin: 0 0 20px; font-size: 1.3rem; font-weight: 600; color: #1f2329; }
.editor__budget-cat { margin-bottom: 18px; }
/* D OU VIENT CE PRIX (Damien, 29/08/2026). Un lien discret en fin de ligne : il ne dispute pas la
   place au chiffre, mais il est la pour qui veut verifier. Souligne au survol seulement, comme les
   autres liens sortants de l editeur. */
.editor__budget-source { font-size: .72rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted currentColor; }
.editor__budget-source:hover { color: var(--accent); }
.editor__budget-source:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor__budget-cat-titre {
    display: flex; justify-content: space-between; gap: 12px;
    font-weight: 600; font-size: .95rem; color: var(--ink);
    padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.editor__budget-ligne {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 0 5px 14px; font-size: .88rem; color: var(--ink);
}
.editor__budget-ligne[data-releve="0"] { color: var(--ink-soft); }

/* Ce que le van embarque dans un reseau, et le bouton qui en ajoute. Le bouton vit DANS le titre :
   ajouter est le geste attendu juste apres avoir lu la liste, pas une action de barre d'outils. */
.editor__etape-bloc h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Le detail est fait de sections de rang 3 : meme encadre que les parties, donc meme titre. Le
   rang dit la hierarchie du document, il n'a pas a se voir comme une difference de taille. */
.editor__etape-bloc h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.editor__etape-ajouter {
    border: 1px solid #d6dce2; border-radius: 6px; background: #fff;
    padding: 4px 10px; font: inherit; font-size: .82rem; color: #3b4650; cursor: pointer;
}
.editor__etape-ajouter:hover { background: #eef2f5; }
.editor__etape-ajouter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor__equipements { list-style: none; margin: 0; padding: 0; }
.editor__equipements li { padding: 5px 0; font-size: .9rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.editor__equipements-vide { color: var(--ink-soft); font-style: italic; }
/* LE TOTAL D'UNE PARTIE, dans son titre : il s'y lit sans peser autant que le titre lui meme, et
   pousse le bouton d'ajout a droite plutot que de s'intercaler entre les deux. */
/* CONTRE LE TITRE, ET NON A L'AUTRE BOUT DE LA LIGNE (Damien, 28/08/2026 : « le resume dans
   chaque bloc on le met entre parenthese juste a cote du titre »). Pousse a droite, le meme
   chiffre obligeait a traverser le bloc pour savoir de quoi il parlait ; contre le titre, entre
   parentheses, « Production (173 W · 389 €) » se lit d'un trait. */
.editor__bloc-titre { justify-content: flex-start; gap: 5px; }
.editor__bloc-total { font-weight: 500; font-size: .85rem; color: var(--ink-soft); }

/* LE COUT DANS LA BARRE, a cote du poids : les deux chiffres qu'on surveille en amenageant. */
.editor__cout {
    margin-left: 10px; padding: 3px 9px; border-radius: 5px;
    background: rgba(255, 255, 255, .07); border: 1px solid #4a5562;
    color: #e8edf2; font-size: 12px; text-decoration: none; white-space: nowrap;
}
.editor__cout:hover { border-color: var(--accent); }
.editor__cout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor__cout:empty { display: none; }
/* UNE LIGNE QUI OUVRE LE DETAIL A COTE. Elle porte ce qui decide — le nom, la grandeur qui
   definit l'appareil, son prix — et le reste s'ouvre dans la colonne de gauche, comme quand on
   choisit un objet dans la scene. C'est un bouton : il se tabule, et le curseur dit qu'il se
   clique. */
.editor__equipement {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; padding: 0; margin: 0;
    background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.editor__equipement:hover { color: var(--accent); }
.editor__equipement:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor__equipement-prix {
    font-size: .82rem; color: var(--ink-soft); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* L'avertissement du bilan de masse tant qu'aucun van n'est choisi. Assez visible pour etre lu
   avant les chiffres qu'il nuance, assez discret pour ne pas les remplacer. */
.editor__masses-sans-van {
    margin: 0 0 10px; padding: 8px 10px;
    background: #fff8e6; border: 1px solid #f0dCA0; border-radius: 6px;
    font-size: .82rem; color: #6b5a2a;
}

/* --- LA FICHE DU VAN RETENU (1ere etape) ---
   Elle REPOND a « quel est mon van » la ou la grille des treize boutons reposait la question. Le
   nom en premier et en grand : c'est ce qu'on vient verifier. */
.editor__van-fiche {
    padding: 14px 16px;
    background: #f7f9fa; border: 1px solid #e3e8ec; border-radius: 8px;
}
.editor__van-fiche-nom { font-size: 1.05rem; font-weight: 600; color: #1f2329; }
.editor__van-fiche-cotes { margin: 6px 0 12px; font-size: .88rem; color: #3b4650; }
.editor__van-fiche-changer {
    border: 1px solid #d6dce2; border-radius: 6px; background: #fff;
    padding: 6px 12px; font: inherit; font-size: .85rem; color: #3b4650; cursor: pointer;
}
.editor__van-fiche-changer:hover { background: #eef2f5; }
.editor__van-fiche-changer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- LES TROIS PAROIS, COTE A COTE (demande de Damien, 28/08/2026) ---
   Elles se lisent ENSEMBLE : on ne choisit pas l'isolant d'un mur sans regarder ce qu'on met au
   plafond, et la cote de l'un se compare a celle des autres. Empilees, il fallait faire defiler
   pour les confronter. Sur trois colonnes, la ligne des epaisseurs se lit d'un coup d'oeil.

   Sous 900 px elles reprennent une colonne : trois selecteurs cote a cote sur un telephone ne
   seraient plus des choix, mais des fentes. */
.editor__parois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.editor__paroi {
    display: flex; flex-direction: column;
    margin-bottom: 0; padding-bottom: 12px;
}
/* La cote est poussee en bas de carte : les trois se retrouvent alignees, quel que soit le
   nombre de selecteurs au dessus. C'est ce qui les rend comparables d'un regard. */
.editor__paroi .editor__paroi-cote { margin-top: auto; }
/* EN COLONNE ETROITE, LE LIBELLE PASSE AU DESSUS DU CHAMP. Cote a cote, « Contre la tôle »,
   « Par dessus » et « Habillage » n'ont pas la meme longueur : les trois selecteurs d'une meme
   carte commencaient chacun a une abscisse differente, et la carte se lisait de travers. */
.editor__paroi .editor__ambiance {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    margin-top: 10px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: #8a95a1;
}
.editor__paroi .editor__ambiance select { flex: none; width: 100%; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) {
    .editor__parois { grid-template-columns: 1fr; }
    .editor__paroi .editor__paroi-cote { margin-top: 14px; }
}

/* LA COTE DEDUITE, EN GRAND (« Épaisseur : 5 cm au plafond, cela doit plus ressortir »).
   C'est le RESULTAT du montage : trois choix entrent, un centimetrage sort, et c'est lui qu'on
   vient chercher. Il se lisait en 0,84 rem gris, dans la meme graisse que l'ossature juste au
   dessus — noye dans ce dont il decoule.

   Le chiffre passe donc en SERIF, la police du site que l'editeur n'utilisait nulle part. Les
   cotes cessent d'etre du texte d'interface pour devenir la matiere qu'on lit : sur les trois
   cartes et dans le bilan, c'est la meme ecriture, et elle ne sert qu'a ca. */
.editor__paroi-cote {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 2px;
}
.editor__paroi-cm {
    font-family: var(--serif); font-size: 1.65rem; line-height: 1.05;
    font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums;
}
.editor__paroi-quoi { font-size: .78rem; color: var(--ink-soft); }
/* Une paroi laissee nue n'a pas de cote : on le dit en toutes lettres, sans faux chiffre. */
.editor__paroi-cote[data-nue="1"] .editor__paroi-cm {
    font-size: .95rem; font-weight: 500; color: #6b7783;
}

/* --- CE QUE CA PESE, PREND ET COUTE ---
   Trois verbes, trois chiffres, dans l'ordre du titre. Les tuiles sont separees par un filet et
   non par des cadres : c'est une seule reponse en trois parts, pas trois encadres a comparer. */
/* EN TETE DE L'ETAPE DEPUIS LE 28/08, plus en bas : on arrive sur ce que le montage coute, et les
   choix qui le produisent viennent dessous. La marge haute disparait donc avec le titre d'etape. */
.editor__iso-bilan {
    margin: 0 0 22px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    border-left: 3px solid var(--accent);
}
.editor__iso-bilan h2 { margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.editor__iso-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.editor__iso-tuile {
    margin: 0; padding: 0 18px;
    display: flex; flex-direction: column; gap: 3px;
    border-left: 1px solid var(--line);
}
.editor__iso-tuile:first-child { padding-left: 0; border-left: 0; }
.editor__iso-chiffre {
    font-family: var(--serif); font-size: 1.9rem; line-height: 1;
    font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.editor__iso-quoi { font-size: .8rem; color: var(--ink-soft); }
/* Sans van, le bilan n'a rien a compter : il le dit sur toute la largeur plutot que d'aligner
   trois tirets. */
.editor__iso-tuiles[data-vide="1"] { grid-template-columns: 1fr; }
.editor__iso-tuiles[data-vide="1"] .editor__iso-tuile { padding: 0; border-left: 0; }
.editor__iso-tuiles[data-vide="1"] .editor__iso-chiffre { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: #6b7783; }
@media (max-width: 700px) {
    .editor__iso-tuiles { grid-template-columns: 1fr; gap: 12px; }
    .editor__iso-tuile { padding: 0; border-left: 0; }
}
/* LA LECTURE DES CHIFFRES, dans le meme encadre qu'eux (Damien, 28/08/2026). « Excedent de
   49 Wh/j » dit ce que « 671 consommes » et « 759 rentres » signifient ensemble : un filet l'en
   separe sans l'en detacher, parce qu'elle les conclut au lieu de s'ajouter a la liste.
   Certains bilans n'ont pas de verdict a rendre : vide, la liste ne laisse pas de blanc. */
.editor__elec-equilibre {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line); font-size: .85rem;
}
.editor__elec-equilibre:empty { display: none; }
.editor__elec-equilibre li { margin-bottom: 5px; }
.editor__elec-equilibre li:last-child { margin-bottom: 0; }

/* --- LE BILAN DES MASSES, AU STYLE DES ETAPES (28/08/2026) ---
   Deux cartes cote a cote : ce qui pese, et comment ca se repartit. Sous 900 px elles s'empilent,
   comme les parois de l'isolation. */
.editor__masses-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
@media (max-width: 900px) {
    .editor__masses-cartes { grid-template-columns: 1fr; }
}
.editor__masses-cartes .editor__paroi h2 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--ink); }
/* Le h3 du panneau bilan est en capitales espacees, ce qui allait quand il titrait un tiroir de
   340 px. Dans une carte, a cote d'un h2 en casse normale, il criait. */
.editor__masses-cartes h3 {
    margin: 18px 0 8px; font-size: .9rem; font-weight: 600; color: #1f2329;
    text-transform: none; letter-spacing: 0; color: var(--ink);
}

/* LA JAUGE SOUS LES TROIS CHIFFRES. Elle dit d'un coup ce que trois nombres demandent de comparer :
   ou se situe le total dans le PTAC. Sa couleur suit le statut, sans legende — le rouge d'une
   surcharge n'a pas besoin qu'on l'explique. */
.editor__masses-jauge {
    margin-top: 14px; height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--bg-alt);
}
.editor__masses-jauge-bar { height: 100%; width: 0; background: #3aa877; transition: width .15s; }
.editor__masses-jauge[data-statut="limite"] .editor__masses-jauge-bar { background: #d99120; }
.editor__masses-jauge[data-statut="depasse"] .editor__masses-jauge-bar { background: #c0392b; }

/* --- LE CAMEMBERT DE LA CHARGE UTILE (28/08/2026) ---
   QUATRE COULEURS DE POSTE, VALIDEES et non choisies a l'oeil : separation daltonienne verifiee sur
   TOUTES les paires (et pas seulement les voisines, puisqu'un poste absent change les voisinages),
   ecart normal au dessus du plancher, contraste tenu sur les deux surfaces. Les memes teintes
   servent en clair et en sombre : elles passent les deux.

   LA RESERVE AFNOR PORTE UN NEUTRE, et c'est un choix de sens : elle n'est pas un poste qu'on
   decide, c'est une obligation de calcul. Le gris la distingue de ce qui releve de l'amenageur
   sans qu'aucune legende ait a l'expliquer. */
.editor__camembert {
    --poste-0: #C6720A;  /* aménagement */
    --poste-1: #1B6CA8;  /* isolation */
    --poste-2: #2E8B57;  /* eau */
    --poste-3: #9B3A73;  /* passagers */
    --poste-imposee: #8A8078;
    margin: 0 0 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.editor__camembert-svg { width: 168px; height: 168px; flex: none; }
/* Le vide entre deux parts est du FOND, pas du blanc : sur la carte grise comme en sombre, c'est
   la meme couleur que ce qu'il y a derriere. */
.editor__camembert-svg circle { stroke: var(--poste-0); }
.editor__camembert-svg circle[data-poste="1"] { stroke: var(--poste-1); }
.editor__camembert-svg circle[data-poste="2"] { stroke: var(--poste-2); }
.editor__camembert-svg circle[data-poste="3"] { stroke: var(--poste-3); }
.editor__camembert-svg circle[data-poste="imposee"] { stroke: var(--poste-imposee); }
/* LA MARGE SE TRACE EN CREUX, et c'est ce qui la distingue d'un poste : elle n'est pas remplie,
   elle est ce qui RESTE a remplir. Un aplat pale plutot qu'un vide franc, sinon l'anneau parait
   casse la ou il est simplement libre. */
.editor__camembert-svg circle[data-poste="libre"] { stroke: #e3e8ec; }
.editor__camembert-legende li[data-poste="libre"]::before {
    background: transparent; border: 1.5px solid #cbd3da;
}
@media (prefers-color-scheme: dark) {
    .editor__camembert-svg circle[data-poste="libre"] { stroke: #362B1D; }
    .editor__camembert-legende li[data-poste="libre"]::before { border-color: #4a3f2e; }
}
/* Le texte porte des tokens de TEXTE, jamais la couleur d'une part. */
.editor__camembert-kg { font-family: var(--serif); font-size: 20px; font-weight: 600; fill: #1f2329; }
.editor__camembert-quoi { font-size: 10px; fill: #6b7783; }

.editor__camembert-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .82rem; color: #3b4650; }
.editor__camembert-legende li { display: flex; align-items: center; gap: 7px; }
.editor__camembert-legende li::before {
    content: ''; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--poste-0);
}
.editor__camembert-legende li[data-poste="1"]::before { background: var(--poste-1); }
.editor__camembert-legende li[data-poste="2"]::before { background: var(--poste-2); }
.editor__camembert-legende li[data-poste="3"]::before { background: var(--poste-3); }
.editor__camembert-legende li[data-poste="imposee"]::before { background: var(--poste-imposee); }

@media (prefers-color-scheme: dark) {
    .editor__camembert-kg { fill: #F2E9D7; }
    .editor__camembert-quoi { fill: #B6A488; }
}

/* --- LES CARTES DU BUDGET (28/08/2026) ---
   Memes cartes que le bilan des masses : une categorie par carte, deux colonnes sur desktop. La
   liste s'etalait sur toute la largeur sans rien qui la tienne, et douze categories faisaient une
   colonne de texte de deux ecrans de haut. */
.editor__budget-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) {
    .editor__budget-cartes { grid-template-columns: 1fr; }
}
.editor__budget-cartes .editor__budget-cat { margin-bottom: 0; }
/* Deux tuiles seulement : elles se partagent la largeur au lieu d'en laisser un tiers vide. */
.editor__iso-tuiles[data-colonnes="2"] { grid-template-columns: 1fr 1fr; }
/* QUATRE CHIFFRES (electricite, 28/08/2026) : trois grandeurs et ce que l'etage coute. Passe en
   deux lignes de deux avant de descendre en colonne, parce qu'un chiffre lu a cote d'un autre se
   compare, et qu'empile il ne se compare plus. Le filet de separation suit la meme logique : il
   n'a de sens qu'entre deux tuiles de la meme ligne. */
.editor__iso-tuiles[data-colonnes="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
    .editor__iso-tuiles[data-colonnes="4"] { grid-template-columns: 1fr 1fr; row-gap: 16px; }
    .editor__iso-tuiles[data-colonnes="4"] .editor__iso-tuile:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
    .editor__iso-tuiles[data-colonnes="4"] { grid-template-columns: 1fr; }
    .editor__iso-tuiles[data-colonnes="4"] .editor__iso-tuile { padding-left: 0; border-left: 0; }
}
/* Le bouton d'ajout des trois parties : au dessus d'elles, aligne a droite comme il l'etait dans
   chaque titre. */
.editor__etape-actions { margin: 0 0 12px; display: flex; justify-content: flex-end; }

/* --- LE MONTAGE D'UN MUR (Nexus 759) ---
   Ce qui est DEDUIT se distingue de ce qui est CHOISI, sans qu'on ait a l'ecrire : trait plus
   pale, pas de cadre, aucun controle. On lit une consequence, on ne remplit pas un champ. */
.editor__mur-deduit { margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); }
/* La reserve, elle, doit s'attraper l'oeil : elle dit que le calcul est approximatif. */
.editor__mur-reserve {
    margin: 10px 0 0; padding: 8px 10px;
    background: #fff8e6; border: 1px solid #f0dca0; border-radius: 6px;
    font-size: .82rem; color: #6b5a2a;
}

/* --- L'éditeur avancé : le meuble seul ---
   Damien, 31/08/2026. Dans le van, un meuble bas se règle à l'aveugle : vu de loin, à moitié caché,
   et la barre latérale n'a pas la place de montrer ce que porte chaque colonne. */
/* EN TETE DES REGLAGES, ET IL SE VOIT (Damien, 01/09/2026 : « plus visible, et plus haut »). En
   bas de la liste des colonnes, on ne le trouvait qu apres avoir fait defiler tout ce qu il sert
   justement a mieux regler. */
.editor__avance-ouvrir { display: block; width: 100%; margin: 10px 0; padding: 8px; background: var(--accent, #b3541e); border: 0; border-radius: 5px; font-size: .82rem; font-weight: 600; color: #fff; cursor: pointer; }
.editor__avance-ouvrir:hover { filter: brightness(1.08); }

.avance { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.avance[hidden] { display: none; }
.avance__fond { position: absolute; inset: 0; background: rgba(24, 26, 29, .45); }
.avance__panneau { position: relative; display: flex; flex-direction: column; width: min(1180px, 94vw); height: min(760px, 90vh); background: #fff; border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); overflow: hidden; }
.avance__tete { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e8ecef; }
.avance__titre { margin: 0; font-size: 1.05rem; }
.avance__cotes { margin: 0; font-size: .8rem; color: var(--ink-soft); font-family: var(--mono); }
.avance__fermer { margin-left: auto; padding: 5px 12px; background: #f2f4f6; border: 1px solid #dfe4ea; border-radius: 5px; font-size: .8rem; cursor: pointer; }
/* La scène prend la moitié gauche et les réglages le reste : le meuble doit rester grand, sinon
   la fenêtre ne répond pas à ce pour quoi elle existe. */
.avance__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(500px, 52%); flex: 1; min-height: 0; }
.avance__scene { position: relative; background: #eef1f3; min-height: 0; }
.avance__scene canvas { display: block; width: 100%; height: 100%; }
.avance__vues { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 5px; }
.avance__vue { padding: 4px 10px; background: rgba(255, 255, 255, .92); border: 1px solid #d5dbe1; border-radius: 4px; font-size: .74rem; cursor: pointer; }
.avance__vue:hover { background: #fff; border-color: #aab4bf; }
.avance__reglages { padding: 16px 18px; overflow-y: auto; overflow-x: hidden; border-left: 1px solid #e8ecef; }
/* Le tableau tient dans le panneau : une barre de defilement horizontale sous six colonnes de
   reglages cacherait la derniere, c'est a dire celle qui supprime. */
.avance__table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; }
/* PAS DE `box-sizing` GLOBAL DANS CE DEPOT : il est declare au cas par cas. Sans cette ligne, un
   `width: 100%` AJOUTE le padding et la bordure par dessus, chaque colonne deborde de quelques
   pixels, et la derniere — celle qui supprime — sort du panneau. C'est ce qui l'a fait disparaitre
   deux fois (Damien, 01/09/2026 : « les boutons de suppression dans l'editeur sortent »). */
.avance__reglages *, .avance__reglages *::before, .avance__reglages *::after { box-sizing: border-box; }
.avance__table th { padding: 4px 10px 4px 6px; text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid #e8ecef; }
.avance__table td { padding: 5px 6px; vertical-align: middle; border-bottom: 1px solid #f2f4f6; }
.avance__table input[type="number"] { width: 100%; max-width: 62px; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; }
/* LES SIX COLONNES DOIVENT TENIR, LA DERNIERE COMPRISE (Damien, 01/09/2026 : « je ne vois pas
   comment supprimer une colonne dans l'editeur »). Elargir « Ouverture » pour ses phrases avait
   pousse le bouton de suppression HORS du panneau : il existait, il repondait au clic, et personne
   ne pouvait le voir. Un bouton invisible est un bouton absent.

   La somme est donc tenue sous la largeur du panneau, et l'en-tete des cotes s'abrege plutot que
   d'imposer sa largeur a la colonne. */
.avance__table th:nth-child(1), .avance__table td:nth-child(1) { width: 4.2rem; }
.avance__table th:nth-child(2), .avance__table td:nth-child(2) { width: 6.8rem; }
/* L'OUVERTURE PORTE JUSQU'A DEUX LISTES EMPILEES (le sens, puis la face) et ses libelles sont des
   phrases : sans largeur reservee, « Charnieres a gauche » se lit « Charnieres a ga... ». */
.avance__table th:nth-child(3), .avance__table td:nth-child(3) { width: 9.6rem; }
.avance__table th:nth-child(4), .avance__table td:nth-child(4),
.avance__table th:nth-child(5), .avance__table td:nth-child(5) { width: 4.4rem; }
.avance__table th:last-child, .avance__table td:last-child { width: 2.6rem; }
.avance__table td:last-child { text-align: right; }
/* Un `select` porte une largeur minimale intrinseque : sans `min-width: 0` il refuse de se plier
   a sa colonne, et c'est le voisin de droite qui est pousse dehors. */
.avance__table select { width: 100%; min-width: 0; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .78rem; }
/* Dans le tableau, la cote n'a plus besoin de sa lettre : l'en-tête de colonne la nomme. */
.avance__table .editor__col-cote { font-size: 0; gap: 0; }
.avance__table .editor__col-cote input { font-size: .8rem; }
.avance__ouverture { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avance__ajout { margin-top: 12px; padding: 4px 10px; background: #eef4f8; border: 1px solid #cfe0ea; border-radius: 4px; font-size: .78rem; cursor: pointer; }
.avance__note { margin: 12px 0 0; font-size: .78rem; color: var(--ink-soft); font-family: var(--mono); }

/* Les cotes en tete de l'editeur avance : on regle un meuble en le regardant, et sa longueur est
   le premier chiffre qu'on veut changer. */
.avance__cotes-saisie { display: flex; gap: 10px; margin: 0 0 12px; }
.avance__cotes-saisie label { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--ink-soft); }
.avance__cotes-saisie input { width: 74px; padding: 5px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .82rem; }
.avance__cotes-saisie input:disabled { background: #f4f6f7; color: var(--ink-soft); }

/* Finition et matieres, en pied de fenetre : c'est un reglage du PROJET, et sa place derriere les
   colonnes le dit autant que la note qui l'accompagne. */
.avance__finition { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e8ecef; }
.avance__finition h3 { margin: 0 0 10px; font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.avance__finition .editor__ambiance { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .8rem; }
.avance__finition select { flex: 1; max-width: 62%; padding: 5px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .8rem; }
.avance__finition-note { margin: 10px 0 0; font-size: .74rem; color: var(--ink-soft); font-style: italic; }
/* « Cette piece seulement » est un SECOND bloc, et le trait le dit : au dessus les reglages du van,
   en dessous l exception. Colles l un a l autre, on ne voit pas ou l un s arrete. */
.avance__finition-propre { margin: 18px 0 10px; padding-top: 14px; border-top: 1px dashed #e3e8ec; font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }

/* --- Le calque « silhouette à l'échelle » ---
   Damien, 01/09/2026. Il se pose SUR la scène et non dans la barre des éléments : ce n'est pas un
   meuble, il ne pèse rien et n'entre dans aucun verdict. Sa place dit ce qu'il est — une règle
   qu'on pose sur le dessin pour le juger. */
/* La scene porte le calque : `position: relative` ici, et non sur le corps entier, sinon le calque
   se pose par dessus la barre de gauche et recouvre le catalogue. */
.editor__scene { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; }
/* Le calque descend sous les outils de scene, qui occupent desormais le coin. */
.calque { position: absolute; left: 16px; top: 60px; z-index: 5; padding: 10px 12px; background: rgba(255, 255, 255, .93); border: 1px solid #dfe4ea; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); font-size: .8rem; }
.calque__actif { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; color: var(--ink); }
.calque__reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; max-width: 320px; }
.calque__reglages select { padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .78rem; }
.calque__reglages label { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--ink-soft); }
.calque__reglages input { width: 58px; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; }
/* La note dit d'où vient la largeur : une mesure et un ordre de grandeur ne se valent pas. */
.calque__note { flex-basis: 100%; margin: 2px 0 0; font-size: .74rem; color: var(--ink-soft); font-style: italic; }

/* --- `hidden` DOIT GAGNER (Damien, 01/09/2026 : « panneau vertical et horizontal, on en fait des
   choses la ?? »).
   
   L'attribut `hidden` du HTML n'est qu'une regle de la feuille du NAVIGATEUR, `[hidden] {
   display: none }`, de specificite (0,1,0). Une regle d'auteur portant une classe a la MEME
   specificite et passe apres : `display: block` ou `display: flex` sur ces elements neutralisait
   donc `hidden` en silence. Le contrôleur les cachait, le DOM disait `hidden: true`, et ils
   restaient a l'ecran — le bouton « Editeur avance » apparaissait sur une cloison qui n'a pas de
   colonnes, et les reglages de la silhouette s'affichaient sans qu'on l'ait cochee.
   
   On ne peut pas s'en remettre a la feuille du navigateur des qu'on declare un `display` : il faut
   redire `none` soi meme, pour chaque classe concernee. */
.editor__avance-ouvrir[hidden],
.editor__plan[hidden],
.calque__reglages[hidden],
.avance__finition[hidden],
.calque[hidden] { display: none; }

/* La finition propre à une pièce, dans la barre : elle concerne TOUT ce qu'on fabrique, et pas
   seulement les meubles à colonnes qui ont un éditeur avancé. */
.editor__propre { margin: 12px 0; padding-top: 10px; border-top: 1px solid #eef1f4; }
.editor__propre .editor__ambiance { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: .78rem; color: var(--ink-soft); }
.editor__propre select { flex: 1; max-width: 60%; min-width: 0; box-sizing: border-box; padding: 4px; border: 1px solid #dfe4ea; border-radius: 4px; font-size: .76rem; }
.editor__propre[hidden] { display: none; }

/* La case d'entaille : elle vit au pied du conflit qu'elle fait taire, pas dans la fiche. */
.editor__entaille { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px; padding: 7px 9px; background: #fbf7ef; border: 1px solid #ecdfc4; border-radius: 5px; font-size: .76rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.editor__entaille input { margin-top: 2px; cursor: pointer; }
.editor__entaille[hidden] { display: none; }
/* OU VA LE MATELAS QUAND LE COUCHAGE EST REFERME. Meme presentation que l'entaille : un reglage de
   montage, encadre, qui n'apparait que quand il repond a quelque chose. */
.editor__repli { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 10px;
    padding: 7px 9px; background: #fbf7ef; border: 1px solid #ecdfc4; border-radius: 5px;
    font-size: .76rem; color: var(--ink); }
.editor__repli select { flex: 1; min-width: 130px; padding: 3px; border: 1px solid #dfe4ea;
    border-radius: 4px; font-size: .76rem; }
/* SANS CETTE LIGNE LE `hidden` NE FERAIT RIEN : la regle du navigateur `[hidden] { display: none }`
   a la meme specificite qu'une classe, et la derniere declaree gagne. Le reglage resterait visible
   sur tous les meubles. C'est arrive le 01/09/2026 sur le panneau vertical. */
.editor__repli[hidden] { display: none; }

/* Le geste se dit là où l'on cherche le réglage : un indice au survol ne se découvre jamais. */
.editor__astuce { margin: 3px 0 0; font-size: .72rem; color: var(--ink-soft); font-style: italic; }
.calque__orientation { flex-basis: 100%; }
/* Le curseur prend la largeur qui reste : la regle generale des reglages fixe 58px, taille d'un
   champ de saisie, sur laquelle on ne vise aucun angle. */
.calque__reglages .calque__orientation input[type="range"] { width: auto; flex: 1; min-width: 120px; padding: 0; border: 0; }
.calque__angle { min-width: 34px; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .76rem; }

/* --- L'outil de mesure ---
   Il se pose SUR la scène, comme le calque du personnage : c'est un instrument qu'on prend et qu'on
   repose, pas un réglage du projet. */
/* EN HAUT A DROITE, ET PAS EN BAS A GAUCHE (Damien, 02/09/2026 : « comment on fait une mesure ? »).
   Ancre sur le BAS de la scene, le bouton tombait sous le pli — et en dev, derriere la barre de
   debogage, qui interceptait meme le clic. Un outil qu'on ne peut pas atteindre n'existe pas. Le
   haut droit de la scene est la seule zone que rien ne survole : les calques tiennent la gauche. */
/* LE BOUTON MESURER VIT DANS LA BARRE D'ACTIONS, la seule de l'editeur qui ne defile pas. Il etait
   dans la barre des vues, pleine largeur mais en `overflow-x: auto` : des que les onglets ne
   tenaient plus, il sortait du champ sans rien dire. Il s'allume en orange pendant la mesure. */
/* LES OUTILS DE LA SCENE, poses a cote du calque : on les cherche la ou l'on regarde. Ils ont
   voyage quatre fois avant d'arriver ici — flottants en bas puis en haut a droite, tronques dans la
   barre des cameras, avales par le defilement de la barre des vues. */
.scene-outils { position: absolute; left: 16px; top: 16px; z-index: 6; display: flex;
    align-items: center; gap: 8px; }

/* LE SWITCH MONTRE SES DEUX ETATS (Damien, 07/09/2026 : « un switch ou on vois les deux etats
   possibles »). Un bouton qui change de texte oblige a se demander si le mot designe l'etat courant
   ou celui qu'on obtiendrait en cliquant ; deux segments cote a cote repondent sans qu'on y pense.
   Celui qui est allume, c'est ou l'on est. */
.scene-switch { display: inline-flex; background: rgba(255, 255, 255, .93); border: 1px solid #dfe4ea;
    border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.scene-switch__part { font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 12px;
    background: transparent; border: 0; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.scene-switch__part + .scene-switch__part { border-left: 1px solid #dfe4ea; }
.scene-switch__part:hover { color: var(--ink); }
.scene-switch__part[aria-pressed="true"] { background: #2b3440; color: #fff; }
/* En ACTION on ne deplace plus rien : la teinte le dit, et c'est celle de la mesure en cours. Les
   deux modes qui suspendent le glisser se signalent donc pareil. */
.scene-switch__part[data-mode="action"][aria-pressed="true"] { background: #d4622a; }

/* LA MESURE EST UNE REGLE, sans texte : un outil, pas une vue. */
.scene-outils__mesure { display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; background: rgba(255, 255, 255, .93);
    border: 1px solid #dfe4ea; border-radius: 6px; color: var(--ink); cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.scene-outils__mesure:hover { border-color: #b9c2cc; }
.scene-outils__mesure.mesure__bouton--actif { background: #d4622a; border-color: #d4622a; color: #fff; }
/* Les cotes de structure forment un second groupe : elles disent ce qui ENCOMBRE l'espace, la ou
   les trois premieres disent l'espace lui meme. Melangees, on chercherait la largeur du van parmi
   six lignes qui parlent de roues. */
.editor__van-mesures-groupe { grid-column: 1 / -1; margin: 10px 0 2px; font-size: .78rem;
    font-weight: 600; color: var(--ink-soft); }

.mesure { position: absolute; right: 16px; top: 16px; z-index: 5; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mesure__bouton { padding: 7px 14px; background: rgba(255, 255, 255, .93); border: 1px solid #dfe4ea; border-radius: 5px; font-size: .8rem; font-weight: 600; color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.mesure__bouton:hover { border-color: #b9c2cc; }
.mesure__bouton--actif { background: #d4622a; border-color: #d4622a; color: #fff; }
.mesure__resultat { margin: 0; padding: 6px 10px; background: rgba(255, 255, 255, .95); border: 1px solid #ecdfc4; border-radius: 5px; font-size: .78rem; color: var(--ink); font-family: var(--mono); }
.mesure__resultat[hidden] { display: none; }