: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; }
.editor__prop-list div { display: flex; justify-content: space-between; margin-bottom: 6px; }
.editor__prop-list dt { color: #8a95a1; }
.editor__prop-list dd { margin: 0; font-weight: 600; }
.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; }
.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; }
.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 { width: 100%; height: auto; display: block; }
.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. */
[data-vue-sans-3d="1"] .editor__body { display: none; }
[data-vue-sans-3d="1"] .editor__bilan {
    display: block;
    position: static;
    width: auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 20px 40px;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
}
/* 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) {
    [data-vue-sans-3d="1"] .editor__bilan { padding: 14px 12px 32px; }
    [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); }
/* Le corps est masque sur ces vues, et un parent en display:none neutralise le position:fixed
   de son enfant : le panneau s'ouvrait a zero pixel de large. On rend donc le corps present mais
   transparent, le temps que le catalogue soit demande. */
[data-vue-sans-3d="1"] .editor__body:has(.editor__gauche[data-flottant="1"]) {
    display: block; position: fixed; inset: 0; z-index: 40; pointer-events: none; background: none;
}
[data-vue-sans-3d="1"] .editor__body:has(.editor__gauche[data-flottant="1"]) .editor__canvas,
[data-vue-sans-3d="1"] .editor__body:has(.editor__gauche[data-flottant="1"]) .editor__right { display: none; }
[data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 41; width: 280px;
    pointer-events: auto; box-shadow: 0 0 24px rgba(0, 0, 0, 0.22);
}
@media (max-width: 820px) {
    [data-vue-sans-3d="1"] .editor__gauche[data-flottant="1"] { width: 88vw; }
    .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); }