/* ─────────────────────────────────────────────────────────────────────────
   Atelier du bâtiment : onglets à gauche, panneaux qui se déplient au survol,
   maquette animée au centre (templates/batiment/partials/atelier.html.twig,
   public/js/atelier-batiment.js, public/js/maquette-batiment.js).

   Les couleurs passent par les tokens du thème (--surface, --ink, --muted,
   --primary, --border-color…) ; la maquette a ses propres variables --mq-*,
   dans public/css/maquette.css (chargée juste avant cette feuille).
   ───────────────────────────────────────────────────────────────────────── */

.atelier {
    --atelier-rail: 228px;
    --atelier-gouttiere: 16px;
    position: relative;
    display: grid;
    grid-template-columns: var(--atelier-rail) minmax(0, 1fr);
    gap: var(--atelier-gouttiere);
    min-height: 600px;
    margin-bottom: 1.5rem;
    padding: var(--atelier-gouttiere);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* ─── Rail d'onglets ─────────────────────────────────────────────────── */

.atelier__rail {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.atelier__onglets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.atelier__onglet {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--panneau-bord);
    border-radius: var(--radius);
    background: var(--panneau-fond);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.atelier__onglet::after {
    /* Languette qui relie l'onglet actif à son panneau. */
    content: '';
    position: absolute;
    right: calc(-1 * var(--atelier-gouttiere) - 1px);
    top: 50%;
    width: var(--atelier-gouttiere);
    height: 2px;
    background: var(--primary);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.atelier__onglet:hover,
.atelier__onglet:focus-visible {
    border-color: var(--primary);
    transform: translateX(3px);
    outline: none;
    box-shadow: var(--shadow-focus-primary);
}
.atelier__onglet--actif {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    transform: translateX(3px);
}
.atelier__onglet--actif::after {
    transform: translateY(-50%) scaleX(1);
}
.atelier__onglet-icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 22px;
    transition: transform 0.25s ease;
}
.atelier__onglet:hover .atelier__onglet-icone,
.atelier__onglet--actif .atelier__onglet-icone {
    transform: scale(1.08) rotate(-4deg);
}
.atelier__onglet-libelle {
    flex: 1 1 auto;
    line-height: 1.2;
}
.atelier__onglet-etat {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.atelier__onglet-etat--ok { background: var(--teinte-vert-vif); }
.atelier__onglet-etat--partiel { background: var(--teinte-ambre); }
.atelier__onglet-etat--manque {
    background: var(--teinte-ambre);
    animation: atelier-pulsation 2.4s ease-in-out infinite;
}
@keyframes atelier-pulsation {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.atelier__aide {
    margin: 0;
    padding: 0 0.25rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ─── Panneaux ───────────────────────────────────────────────────────── */

.atelier__panneaux {
    position: absolute;
    z-index: 4;
    top: var(--atelier-gouttiere);
    bottom: var(--atelier-gouttiere);
    left: calc(var(--atelier-rail) + 2 * var(--atelier-gouttiere));
    right: var(--atelier-gouttiere);
    pointer-events: none;
}
.atelier__panneau {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(560px, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--panneau-fond);
    border: 1px solid var(--panneau-bord);
    border-radius: var(--panneau-rayon);
    box-shadow: var(--panneau-ombre-forte);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-16px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.atelier__panneau--large {
    width: min(900px, 100%);
}
.atelier__panneau--ouvert {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* `none` au repos : un transform garderait les fenêtres modales (position: fixed)
       du bloc caractéristiques prisonnières du panneau. */
    transform: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}
.atelier__panneau-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.atelier__panneau-entete h2 {
    margin: 0;
    font-size: 1.25rem;
    padding-top: 0.25rem;
}
.atelier__fermer {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    padding: 0;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.atelier__fermer .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}
.atelier__fermer:hover,
.atelier__fermer:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
    outline: none;
}
/* Le bloc caractéristiques garde sa carte d'origine : on l'aplatit dans le panneau. */
.atelier__panneau--large .caracteristiques {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.atelier__intro {
    margin: 0 0 1rem;
    color: var(--muted);
}
/* Messages de la carte modifiable (enregistré, erreur) : flottent en haut de la scène, au-dessus des panneaux. */
.atelier__messages {
    position: absolute;
    z-index: 6;
    top: calc(var(--atelier-gouttiere) + 0.5rem);
    right: calc(var(--atelier-gouttiere) + 0.5rem);
    max-width: min(420px, 60%);
    box-shadow: var(--shadow-2);
}
.atelier__fiche {
    margin: 0 0 1rem;
    display: grid;
    gap: 0.5rem;
}
.atelier__fiche > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.atelier__fiche dt {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: center;
}
.atelier__fiche dd {
    margin: 0;
    color: var(--ink);
}
.atelier__carte #map {
    height: 240px;
    border-radius: var(--radius);
}
.atelier__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.atelier__classement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.atelier__classement-libelle {
    font-weight: 700;
    color: var(--ink);
}
/* Carte modifiable (batiment.css, règles écrites pour .description_batiment) : mêmes règles dans l'atelier. */
.atelier .infos-rapides__ligne [hidden],
.atelier .infos-rapides__messages[hidden],
.atelier [data-ir-config],
.atelier .infos-rapides__ligne--edition [data-ir-valeur],
.atelier .infos-rapides__ligne--edition [data-ir-alerte],
.atelier .infos-rapides__ligne--edition [data-ir-crayon] {
    display: none !important;
}
.atelier .infos-rapides__voir-tous {
    font-size: 0.875rem;
    text-decoration: underline;
}

.atelier__choix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
.atelier__choix-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.1rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.atelier__choix-carte .material-symbols-outlined {
    font-size: 34px;
    color: var(--primary);
}
.atelier__choix-carte input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.atelier__choix-carte:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}
.atelier__choix-carte:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.atelier__choix-carte:has(input:focus-visible) {
    box-shadow: var(--shadow-focus-primary);
}

.atelier__contacts {
    display: grid;
    gap: 0.75rem;
}

/* ── Nom et adresse modifiés sur place (atelier_identite.html.twig) ── */
.atelier-identite { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.atelier-identite[hidden], [data-ai-ouvrir][hidden], [data-ai-vue][hidden] { display: none !important; }

/* ── Rubrique Contacts modifiable (atelier_contacts.html.twig, atelier-contacts.js) ── */
.atelier-contacts { display: grid; gap: 0.75rem; }
.atelier-contacts__messages {
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--success, var(--teinte-vert)) 12%, transparent);
    color: var(--ink);
    font-size: 0.9rem;
}
.atelier-contacts__messages--erreur { background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); }
.atelier-contact {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
}
.atelier-contact__tete { display: flex; gap: 0.9rem; align-items: flex-start; }
.atelier-contact__icone {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.atelier-contact__ident { min-width: 0; }
.atelier-contact__role { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.atelier-contact__nom { margin: 0.15rem 0 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.atelier-contact__adresse { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; }
.atelier-contact__vide { display: flex; align-items: center; gap: 0.3rem; margin: 0.2rem 0 0; color: var(--warning-border-color, #ffc107); font-weight: 600; font-size: 0.9rem; }
.atelier-contact__vide .material-symbols-outlined { font-size: 18px; }
.atelier-contact__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.atelier-contact__actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.atelier-contact__actions [hidden],
.atelier-contact [hidden] { display: none !important; }
.atelier-contact__actions .material-symbols-outlined { font-size: 17px; }
.atelier-contact__fiches,
.atelier-contact__form {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    animation: atelier-astuce 0.3s var(--glisse, ease) both;
}
.atelier-contact__fiches[hidden],
.atelier-contact__form[hidden] { display: none; }
.atelier-contact__aide { margin: 0; color: var(--muted); font-size: 0.85rem; }
.atelier-contact__liste { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; }
.atelier-contact__fiche {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.atelier-contact__fiche:hover,
.atelier-contact__fiche:focus-visible { border-color: var(--primary); transform: translateX(2px); }
.atelier-contact__fiche small { margin-left: auto; color: var(--muted); }
.atelier-contact__fiche .material-symbols-outlined { color: var(--primary); font-size: 18px; }
.atelier-contact__lien { font-size: 0.85rem; }
.atelier-contact__champ { position: relative; display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.atelier-contact__champ .form-control { width: 100%; }
.atelier-contact__ligne { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem; }
.atelier-contact__propositions {
    position: absolute;
    z-index: 6;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: 220px;
    margin: 2px 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panneau-fond);
    box-shadow: var(--shadow-2);
}
.atelier-contact__propositions li { padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--ink); cursor: pointer; }
.atelier-contact__propositions li:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.atelier-contact__case { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink); }
.atelier-contact__boutons { display: flex; gap: 0.5rem; }
@media (max-width: 520px) {
    .atelier-contact__ligne { grid-template-columns: 1fr; }
}
.atelier__contact {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.atelier__contact--vide {
    border-style: dashed;
}
.atelier__contact-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.atelier__contact-role {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.atelier__contact-nom {
    margin: 0.15rem 0 0;
    font-weight: 700;
    color: var(--ink);
}
.atelier__contact-adresse {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ─── Scène ──────────────────────────────────────────────────────────── */

.atelier__scene {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% 30%, var(--mq-ciel-haut) 0%, transparent 70%),
        linear-gradient(180deg, var(--mq-ciel) 0%, var(--mq-ciel-bas) 100%);
    overflow: hidden;
}
/* Ciel : un nuage qui dérive, en CSS pour rester fixe quand la caméra bouge. Le soleil (ou la lune) est un bouton, plus bas. */
.atelier__scene::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 90px;
    left: 18%;
    width: 120px;
    height: 34px;
    border-radius: 40px;
    background: var(--mq-nuage);
    opacity: 0.85;
    box-shadow: 34px -14px 0 4px var(--mq-nuage), 70px 2px 0 -4px var(--mq-nuage);
    animation: atelier-nuage 46s ease-in-out infinite alternate;
}
@keyframes atelier-nuage {
    from { transform: translateX(0); }
    to { transform: translateX(45vw); }
}
.atelier__scene-entete {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.atelier__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.4rem 0.85rem 0.4rem 0.5rem;
    border-radius: 999px;
    background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
}
.atelier__badge .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--encre-sur-primaire);
    font-size: 18px;
}
.atelier__maquette {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease, opacity 0.3s ease;
}
.atelier__maquette svg {
    width: 100%;
    height: 100%;
    max-height: 520px;
}
/* Un panneau ouvert pousse la maquette vers la droite, comme une table qu'on dégage. */
.atelier--panneau-ouvert .atelier__maquette {
    transform: translateX(min(220px, 18%)) scale(0.9);
}
.atelier--panneau-large .atelier__maquette {
    transform: translateX(min(360px, 30%)) scale(0.72);
    opacity: 0.55;
}

.atelier__chiffres {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0 1rem 1rem;
}

/* ─── Maquette SVG ───────────────────────────────────────────────────── */
/* Le dessin lui-même (variables --mq-*, faces, toits, décor, étiquettes, activités, « + », thème sombre, animations du
   décor) et les cartes de chiffres vivent dans public/css/maquette.css depuis le lot 2 d'optimisation du 19/10/2026.
   Toute page qui charge cette feuille-ci charge maquette.css juste avant : l'ordre des règles est le même qu'avant. */

/* ─── Sans JavaScript : tout à la suite ──────────────────────────────── */

.atelier--sans-js .atelier__panneaux {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
    pointer-events: auto;
}
.atelier--sans-js .atelier__panneau {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
}
.atelier--sans-js .atelier__fermer,
.atelier--sans-js .atelier__aide {
    display: none;
}

/* ─── Écrans étroits : onglets en bandeau, panneau sous le bandeau ──── */

@media (max-width: 900px) {
    .atelier {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 12px;
    }
    .atelier__onglets {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .atelier__onglet {
        flex-direction: column;
        gap: 0.35rem;
        min-width: 104px;
        padding: 0.6rem;
        text-align: center;
        font-size: 0.8rem;
    }
    .atelier__onglet::after { display: none; }
    .atelier__onglet:hover, .atelier__onglet--actif { transform: none; }
    .atelier__onglet-etat { position: absolute; top: 8px; right: 8px; }
    .atelier__aide { display: none; }
    .atelier__panneaux {
        position: static;
        pointer-events: auto;
    }
    .atelier__panneau {
        position: static;
        display: none;
        width: auto;
        max-height: none;
        box-shadow: none;
    }
    .atelier__panneau--ouvert { display: block; }
    .atelier--panneau-ouvert .atelier__maquette,
    .atelier--panneau-large .atelier__maquette { transform: none; opacity: 1; }
    .atelier__maquette { min-height: 300px; }
    .atelier__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0.75rem 0.75rem; }
    .atelier__contact { grid-template-columns: auto 1fr; }
    .atelier__contact .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ─── Mouvement réduit ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .atelier *,
    .atelier *::before,
    .atelier *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Maquette modifiable (public/js/atelier-edition.js) ════════════════════════════════════ */

/* Quand une fenêtre est ouverte, le reste du dessin s'efface un peu : l'œil va à l'élément choisi. */
.atelier__scene--focus .mq-batiment .mq-activite:not(.mq-selection) .mq-activite-face { fill-opacity: 0.05; }
.atelier__scene--focus .mq-plus { opacity: 0.35; }

/* ── Les cartes de chiffres deviennent des boutons ── */
.atelier__chiffre:not(.atelier__chiffre--change) { animation: atelier-carte 0.5s var(--glisse) both; animation-delay: calc(var(--rang, 0) * 60ms); }
.atelier__chiffre--actionnable {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    cursor: pointer;
    transition: transform 0.25s var(--ressort), box-shadow 0.25s ease;
    outline: none;
}
.atelier__chiffre--actionnable::after {
    content: 'edit';
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    font-family: 'Material Symbols Outlined';
    font-size: 15px;
    color: var(--primary);
    /* Toujours visible : on doit voir sans survoler que la carte se modifie. */
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.atelier__chiffre--actionnable:hover,
.atelier__chiffre--actionnable:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 45%, transparent), var(--shadow-1);
}
.atelier__chiffre--actionnable:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent); }
.atelier__chiffre--actionnable:hover::after,
.atelier__chiffre--actionnable:focus-visible::after { opacity: 1; transform: scale(1.15); }
.atelier__chiffre--actionnable:hover { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }
@keyframes atelier-carte {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ── Astuce, bulle, toast ── */
/* ── Soleil / lune : bouton de thème ──
   Un seul disque : en clair, un soleil plein ; en sombre, une ombre portée le creuse en croissant de lune. */
.atelier__astre {
    position: absolute;
    z-index: 2;
    top: 22px;
    left: 24px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.atelier__astre-disque {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--mq-soleil);
    box-shadow: 0 0 40px 10px color-mix(in srgb, var(--mq-soleil) 45%, transparent);
    opacity: 0.85;
    transition: transform 0.6s var(--glisse, ease), box-shadow 0.6s ease, background-color 0.6s ease, opacity 0.3s ease;
}
.atelier__astre:hover .atelier__astre-disque { opacity: 1; transform: scale(1.08) rotate(-12deg); }
.atelier__astre:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
html[data-theme="dark"] .atelier__astre-disque {
    background: transparent;
    box-shadow: inset -12px -6px 0 0 var(--mq-soleil), 0 0 26px 2px color-mix(in srgb, var(--mq-soleil) 25%, transparent);
    transform: rotate(-25deg);
}
html[data-theme="dark"] .atelier__astre:hover .atelier__astre-disque { transform: scale(1.08) rotate(-40deg); }
@media (prefers-reduced-motion: reduce) {
    .atelier__astre-disque { transition: none; }
}

.atelier__astuce {
    position: absolute;
    left: calc(1rem + 84px);
    top: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: min(420px, 55%);
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
    animation: atelier-astuce 0.7s var(--glisse) 1.2s both;
    pointer-events: none;
}
.atelier__astuce .material-symbols-outlined { color: var(--primary); font-size: 18px; }
@keyframes atelier-astuce {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.atelier__bulle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    max-width: 280px;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--ink, #0f172a);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
    transition: transform 0.08s linear;
}
html[data-theme="dark"] .atelier__bulle { background: #e2e8f0; color: #0f172a; }
.atelier__toast {
    position: absolute;
    left: 50%;
    bottom: 6.2rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: var(--ink, #0f172a);
    /* Encre inverse de --ink : le fond des panneaux (blanc en clair, marine en sombre, où --ink devient clair). */
    color: var(--panneau-fond, #fff);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3);
    transform: translateX(-50%);
    animation: atelier-toast 0.5s var(--ressort) both;
}
.atelier__toast .material-symbols-outlined { color: #4ade80; font-size: 20px; }
.atelier__toast--sort { opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.5s ease, transform 0.5s ease; }
@keyframes atelier-toast {
    from { opacity: 0; transform: translate(-50%, 16px) scale(0.92); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.atelier__recharger {
    position: absolute;
    right: 1rem;
    top: 4.2rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--panneau-bord);
    border-radius: 999px;
    background: var(--panneau-fond);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--panneau-ombre);
    animation: atelier-astuce 0.5s var(--glisse) both;
}
.atelier__recharger .material-symbols-outlined { font-size: 17px; }
/* Mode tiers : en haut à droite, la pastille recouvrirait le bouton « Agrandir » de la deuxième vue ; elle passe en bas à gauche. */
.atelier--fiche.atelier--mode-tiers .atelier__recharger { top: auto; right: auto; left: 1rem; bottom: 1rem; z-index: 5; }
/* ── Petite fenêtre ancrée ── */
.atelier__pop {
    position: absolute;
    z-index: 5;
    width: min(340px, calc(100% - 24px));
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--panneau-bord);
    border-radius: 16px;
    background: var(--panneau-fond);
    box-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.35), var(--shadow-1);
    transform-origin: left center;
    /* La fenêtre ne déborde jamais de la scène : le corps défile, les boutons restent visibles en bas (28/10/2026). */
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 24px);
}
.atelier__pop[hidden], .atelier__bulle[hidden] { display: none; }
.atelier__pop[data-cote="gauche"] { transform-origin: right center; }
.atelier__pop--entre { animation: atelier-pop 0.38s var(--ressort) both; }
@keyframes atelier-pop {
    from { opacity: 0; transform: scale(0.88) translateY(6px); }
    to { opacity: 1; transform: none; }
}
.atelier__pop-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.atelier__pop-entete h3 { margin: 0; color: var(--ink); font-size: 1rem; }
.atelier__pop-surtitre { margin: 0 0 0.15rem; color: var(--primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.atelier__pop-corps { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; min-height: 0; overflow-y: auto; align-content: start; }
.atelier__pop-entete, .atelier__pop-actions { flex: none; }
.atelier__pop-texte { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
/* Une case à la fois (atelier-edition.js, popCase) */
.atelier__pop-libelle { display: block; margin: 0.35rem 0 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.atelier__pop-champ { width: 100%; }
.atelier__pop-groupe:empty { display: none; }
/* Options d'un local (26/10/2026) : de vraies cases à cocher, dans la carte « Locaux » (locaux-risques-parcours.js). Couleurs par variables : mode sombre compris. */
.locaux-options__case { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
.locaux-options__case input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); cursor: pointer; }
.locaux-options__case input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.atelier__pop-apercu { min-height: 1.2em; margin: 0.4rem 0 0; color: var(--primary); font-weight: 600; font-size: 0.85rem; }
.atelier__pop-lecture { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.65rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.atelier__pop-lecture strong { font-size: 1.1rem; color: var(--ink); }
.atelier__pop-message { min-height: 1.1em; margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--muted); }
.atelier__pop-message--erreur { color: var(--danger, #dc2626); font-weight: 600; }
/* Nom du local laissé vide (26/10/2026) : le champ en erreur et son message dessous, comme le FormField du design system. */
.atelier__pop-champ.atelier__pop-champ--erreur, .atelier__pop-champ.atelier__pop-champ--erreur:focus { border-color: var(--danger-border-color-hover); box-shadow: var(--shadow-focus-danger); }
.atelier__pop-erreur { margin: 0.25rem 0 0; font-size: 0.8em; color: var(--danger-color-text); }
.atelier__pop-attente::after { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.4em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -0.1em; }
.atelier__pop-ligne {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    font-size: 0.85rem;
    animation: atelier-carte 0.4s var(--glisse) both;
}
.atelier__pop-ligne:nth-child(2) { animation-delay: 50ms; }
.atelier__pop-ligne:nth-child(3) { animation-delay: 100ms; }
.atelier__pop-ligne .material-symbols-outlined { color: var(--primary); font-size: 18px; }
.atelier__pop-libelle { color: var(--muted); }
.atelier__pop-ligne strong { color: var(--ink); text-align: right; }
.atelier__pop-ligne--manque strong { color: var(--warning-color, #b45309); }
.atelier__pop-choix {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s var(--ressort), background 0.2s ease;
}
.atelier__pop-choix:hover,
.atelier__pop-choix:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); transform: translateX(3px); }
.atelier__pop-choix .material-symbols-outlined { color: var(--primary); font-size: 18px; }
.atelier__pop-choix--manque strong { color: var(--warning-color, #b45309); font-weight: 600; }
.atelier__pop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.1rem; }
.atelier__pop-actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.atelier__pop-actions .btn .material-symbols-outlined { font-size: 17px; }

/* ── Tiroir : un écran existant, ouvert à droite de la maquette ── */
.atelier__tiroir {
    /* Toute la hauteur de l'écran : un tableau des effectifs a besoin de place. */
    position: fixed;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100vw - 2rem));
    border: 1px solid var(--panneau-bord);
    border-radius: var(--panneau-rayon);
    background: var(--panneau-fond);
    box-shadow: -24px 0 60px -20px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    opacity: 0;
    transform: translateX(40px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.42s var(--glisse);
}
.atelier__tiroir[hidden] { display: none; }
.atelier__tiroir--ouvert { opacity: 1; transform: none; }
.atelier--tiroir-ouvert .atelier__maquette { transform: translateX(-22%) scale(0.8); filter: saturate(0.8); }
.atelier--tiroir-ouvert .atelier__chiffres,
.atelier--tiroir-ouvert .atelier__astuce { opacity: 0.25; pointer-events: none; transition: opacity 0.3s ease; }
.atelier__tiroir-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.4rem;
}
.atelier__tiroir-entete h2 { margin: 0; color: var(--ink); font-size: 1.1rem; }
.atelier__tiroir-surtitre { margin: 0 0 0.15rem; color: var(--primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.atelier__tiroir-aide {
    margin: 0 1.1rem 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.4;
}
.atelier__tiroir-corps { position: relative; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--border-color); }
.atelier__tiroir-corps iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.atelier__tiroir-chargement {
    position: absolute;
    inset: 0;
    display: none;
    place-content: center;
    grid-auto-flow: column;
    gap: 0.4rem;
    background: var(--panneau-fond);
}
.atelier__tiroir--charge .atelier__tiroir-chargement { display: grid; }
.atelier__tiroir-chargement span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    animation: atelier-points 0.9s ease-in-out infinite;
}
.atelier__tiroir-chargement span:nth-child(2) { animation-delay: 0.12s; }
.atelier__tiroir-chargement span:nth-child(3) { animation-delay: 0.24s; }
@keyframes atelier-points {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-8px); opacity: 1; }
}

/* ── Fenêtre des tiers ── */
.atelier__dialogue {
    --ressort: cubic-bezier(.2, .9, .3, 1.25);
    --glisse: cubic-bezier(.22, 1, .36, 1);
    width: min(520px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--surface, #fff);
    color: var(--ink);
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.45);
}
.atelier__dialogue[open] { animation: atelier-pop 0.4s var(--ressort) both; }
.atelier__dialogue::backdrop { background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(3px); animation: atelier-fondu 0.3s ease both; }
@keyframes atelier-fondu { from { opacity: 0; } to { opacity: 1; } }
.atelier__dialogue-form { display: grid; gap: 0.9rem; padding: 1.25rem 1.35rem 1.1rem; }
.atelier__dialogue-entete { display: flex; align-items: center; gap: 0.75rem; }
.atelier__dialogue-entete h2 { margin: 0; font-size: 1.15rem; }
.atelier__dialogue-sous-titre { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.82rem; }
.atelier__dialogue-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.atelier__champ { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; font-size: 0.88rem; }
.atelier__champ > span, .atelier__champ legend { color: var(--ink); font-weight: 600; }
.atelier__champ small { color: var(--muted); font-size: 0.76rem; }
.atelier__champ input[type="text"], .atelier__champ input[type="number"], .atelier__champ select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--ink);
    font: inherit;
}
.atelier__champ input:focus-visible, .atelier__champ select:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); border-color: var(--primary); }
.atelier__champ[hidden] { display: none; }
/* Un bouton (.btn, inline-flex) masqué par l'attribut hidden reste masqué : « Supprimer » d'un tiers pas encore créé. */
.atelier__dialogue-actions [hidden], .atelier__dialogue [hidden] { display: none !important; }
.atelier__tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.atelier__tuile {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ressort);
}
.atelier__tuile input { position: absolute; opacity: 0; pointer-events: none; }
.atelier__tuile .material-symbols-outlined { color: var(--muted); transition: color 0.2s ease, transform 0.3s var(--ressort); }
.atelier__tuile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.atelier__tuile:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.atelier__tuile:has(input:checked) .material-symbols-outlined { color: var(--primary); transform: scale(1.15); }
.atelier__tuile:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
/* Modèles de tiers déjà faits : des puces, la choisie en couleur (aria-pressed, atelier-edition.js appliquerModele). */
.atelier__modeles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.atelier__modele {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.atelier__modele .material-symbols-outlined { font-size: 1.05rem; color: var(--muted); }
.atelier__modele:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.atelier__modele[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.atelier__modele[aria-pressed="true"] .material-symbols-outlined { color: var(--primary); }
.atelier__modele:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.atelier__radios { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 500; }
.atelier__dialogue-note { margin: 0; color: var(--muted); font-size: 0.76rem; }
/* Les questions d'un tiers qui dépendent de sa position et de son classement (01/11/2026, atelier-edition.js : QUESTIONS_TIERS). */
.atelier__questions-tiers { display: grid; gap: 0.75rem; }
.atelier__questions-tiers:not(:has(> :not([hidden]))) { display: none; }
.atelier-configs__questions:not(:has(> :not([hidden]))) { display: none; }
.atelier-configs__questions { margin-top: 0.5rem; }
.atelier__dialogue-erreur { margin: 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; font-size: 0.82rem; font-weight: 600; }
.atelier__dialogue-actions { display: flex; align-items: center; gap: 0.5rem; }
.atelier__dialogue-actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.atelier__dialogue-espace { flex: 1; }
.btn--attente { opacity: 0.7; cursor: progress; }

/* ── Configurations de tiers (27/10/2026, atelier-edition.js : construireGalerie, apercuConfiguration) ──
   La même fenêtre que celle des tiers (.atelier__dialogue), plus large : une galerie de cartes (comme les tuiles de la fenêtre des
   tiers), puis l'aperçu. Chaque 3D est une vignette (.ville__vignette, vignette-3d.css : ses couleurs --mq-*, l'icône de repli),
   immobile : aucune animation sous le flou de la fenêtre (LECONS, 26/10/2026). */
.atelier__mode-barre [hidden] { display: none !important; }
.atelier-configs { width: min(880px, calc(100vw - 2rem)); }
.atelier-configs__galerie { display: grid; gap: 0.6rem; }
.atelier-configs__section { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.atelier-configs__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.atelier-configs__carte {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.5rem 0.5rem 0.65rem;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ressort);
}
.atelier-configs__carte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.atelier-configs__carte:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.atelier-configs__vignette, .atelier-configs__vue {
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 50% 30%, var(--mq-ciel-haut) 0%, transparent 70%),
        linear-gradient(180deg, var(--mq-ciel) 0%, var(--mq-ciel-bas) 100%);
}
.atelier-configs__vignette { height: 118px; }
.atelier-configs__vue { height: clamp(190px, 34vh, 320px); border-radius: 14px; }
.atelier-configs__vue .ville__vignette-repli { font-size: 44px; }
.atelier-configs__maquette { height: 100%; }
.atelier-configs__scene, .atelier-configs__scene * { animation: none !important; transition: none !important; }
.atelier-configs__nom { font-size: 0.88rem; font-weight: 700; padding: 0 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.atelier-configs__resume { display: grid; gap: 0.1rem; padding: 0 0.15rem; color: var(--muted); font-size: 0.74rem; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.atelier-configs__apercu { display: grid; gap: 0.8rem; }
.atelier-configs__lignes { display: grid; gap: 0.5rem; }
.atelier-configs__ligne { margin: 0; padding: 0.35rem 0.75rem 0.7rem; border: 1px solid var(--border-color); border-radius: 12px; min-width: 0; }
.atelier-configs__place { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.3rem; color: var(--primary); font-size: 0.8rem; font-weight: 700; }
.atelier-configs__place .material-symbols-outlined { font-size: 1.05rem; }
.atelier-configs__champs { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.atelier-configs__champs > .atelier__champ { flex: 1 1 170px; min-width: 0; }
.atelier-configs__champs > .atelier-configs__nom-tiers { flex-grow: 1.6; }
.atelier-configs__champs > .atelier-configs__distance { flex: 0 1 120px; }
.atelier-configs__existants { display: grid; gap: 0.35rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 7%, transparent); font-size: 0.82rem; }
.atelier-configs__existants p { margin: 0; }
.atelier-configs__existants ul { margin: 0; padding-left: 1.2rem; }
.atelier-configs__existants-titre { font-weight: 700; }
.atelier-configs__actions { flex-wrap: wrap; }
/* ── Configurations ENREGISTRÉES (27/10/2026, partie 2 ; atelier-edition.js : remplirGalerie, carteEnregistree, ouvrirEnregistrement) ──
   Les mêmes cartes que les fournies, plus un badge de partage (« Privée », « Visible par tous », « Communauté » :
   jamais un nom d'auteur) et, SOUS la carte, les actions (partage, suppression) ; la carte « Créer une nouvelle configuration » a un bord
   en pointillés et son icône à la place de la 3D. La fenêtre d'enregistrement garde la largeur d'une fenêtre de formulaire. */
.atelier-configs--enreg { width: min(560px, calc(100vw - 2rem)); }
.atelier-configs__cartes--creer { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.atelier-configs__creer { border-style: dashed; }
.atelier-configs__creer-icone .material-symbols-outlined { color: var(--primary); font-size: 40px; }
.atelier-configs__element { display: grid; align-content: start; gap: 0.35rem; min-width: 0; }
.atelier-configs__actions-carte { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.atelier-configs__actions-carte .atelier-configs__action {
    display: inline-flex; align-items: center; gap: 0.25rem; width: auto; max-width: 100%; padding: 0.25rem 0.6rem; border-color: var(--border-color); background: transparent;
    box-shadow: none; color: var(--ink); font-size: 0.76rem; font-weight: 600; line-height: 1.3; text-align: left; white-space: normal;
}
.atelier-configs__actions-carte .atelier-configs__action .material-symbols-outlined { flex: none; font-size: 16px; }
.atelier-configs__actions-carte .atelier-configs__action:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.atelier-configs__actions-carte .atelier-configs__action--danger { color: var(--danger-color-text); }
.atelier-configs__actions-carte .atelier-configs__action--danger:hover { border-color: var(--danger-color-text); }
.atelier-configs__actions-carte .atelier-configs__action:disabled { cursor: progress; opacity: 0.6; }
.atelier-configs__badges { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.15rem; }
.atelier-configs__badge { padding: 0.1rem 0.55rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--muted); font-size: 0.68rem; font-weight: 700; line-height: 1.4; }
.atelier-configs__badge--public { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color)); color: var(--primary); }
.atelier-configs__badge--activite { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.atelier-configs__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.2rem 0 0; padding: 0.55rem 0.75rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--muted); font-size: 0.82rem; }
.atelier-configs__etat--erreur { background: color-mix(in srgb, #ef4444 10%, transparent); color: var(--ink); }
/* Le message d'un changement de partage ou d'une suppression reste en haut de la fenêtre quand la liste défile : on clique une carte
   tout en bas, le message doit se voir. Un fond opaque (la teinte posée sur celui de la fenêtre). */
.atelier-configs__avis { position: sticky; top: 0.5rem; z-index: 2; margin: 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--primary) 12%, transparent) 0 0), var(--surface, #fff);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.4); color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.atelier-configs__avis--erreur { background: linear-gradient(color-mix(in srgb, #ef4444 14%, transparent) 0 0), var(--surface, #fff); color: #b91c1c; }
.atelier-configs__avertissement { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: color-mix(in srgb, var(--teinte-ambre) 14%, transparent); color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.atelier-configs__avertissement[hidden] { display: none; }
.atelier-configs__avertissement .material-symbols-outlined { flex: none; font-size: 1.1rem; }
.atelier-configs__repris { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.atelier-configs__repris-ligne { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; padding: 0.4rem 0.65rem; border: 1px solid var(--border-color); border-radius: 10px; font-size: 0.86rem; }
.atelier-configs__repris-ligne .material-symbols-outlined { color: var(--primary); font-size: 1.1rem; }
.atelier-configs__repris-ligne small { color: var(--muted); font-size: 0.78rem; }
/* Barre du mode tiers : le bouton d'enregistrement, grisé tant que le bâtiment n'a aucun tiers (sa bulle dit pourquoi). */
.atelier__mode-configs[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 900px) {
    .atelier-configs__cartes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .atelier-configs__vignette { height: 96px; }
}
@media (max-width: 520px) {
    .atelier-configs .atelier__dialogue-form { padding: 1rem 0.9rem 0.9rem; }
    .atelier-configs__actions .atelier__dialogue-espace { display: none; }
    .atelier-configs__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 900px) {
    .atelier__astuce { display: none; }
    .atelier__tiroir { inset: 8vh 0 0 0; width: auto; border-radius: var(--panneau-rayon) var(--panneau-rayon) 0 0; transform: translateY(40px); }
    .atelier__tiroir--ouvert { transform: none; }
    .atelier--tiroir-ouvert .atelier__maquette { transform: none; }
    .atelier__pop { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .atelier__dialogue, .atelier__dialogue *, .atelier__dialogue::backdrop { animation: none !important; transition: none !important; }
    .atelier__maquette svg { transform: none; }
}

/* ── Neuf ou existant, dans la petite fenêtre de la carte « Bâtiment » ── */
.atelier__pop--large { width: min(420px, calc(100% - 24px)); }
.atelier__pop [data-ed-construction] .atelier__intro { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.atelier__pop [data-ed-construction] .atelier__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atelier__pop [data-ed-construction] .form-field { margin-top: 0.6rem; }
.atelier__pop [data-ed-construction] .atelier__actions { margin-top: 0.8rem; justify-content: flex-end; }
[data-ed-construction][hidden] { display: none; }

/* ── Carte compacte de la fiche (batiment.css, .description_batiment .informations) dans un panneau ── */
.atelier .description_batiment.atelier__carte-infos {
    display: block;
    padding: 0;
    margin: 0 -0.5rem;
}
.atelier .atelier__carte-infos .infos-batiment__corps { padding-left: 12px; }
.atelier .atelier__carte-infos .infos-batiment__groupe:last-child { border-bottom: 0; }

/* La pastille qui dit ce que décrivent les cartes : « Bâtiment entier », « Niveau RDC », « RDC › Magasins… ». */
.atelier__portee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 1rem 0.5rem;
    min-height: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}
.atelier__portee[hidden] { display: none; }
.atelier__portee .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.atelier__portee small { font-weight: 400; color: var(--muted); }
.atelier__portee--choisie > span:nth-child(2) {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    animation: atelier-pop 0.35s var(--ressort, ease) both;
}
.atelier__portee-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panneau-fond);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.atelier__portee-retour::before { content: '←'; }
.atelier__portee-retour:hover { color: var(--primary); border-color: var(--primary); }

/* Dans un panneau, une ligne garde son icône, son libellé et sa valeur côte à côte (seules les lignes des
   intervenants, qui portent les fiches favorites, passent à la ligne). */
.atelier .atelier__carte-infos p.infos-rapides__ligne:not([data-ir-ligne="moa"]):not([data-ir-ligne="moe"]) {
    flex-wrap: nowrap;
}
.atelier .atelier__carte-infos .infos-rapides__libelle { flex: 0 1 auto; min-width: 0; }
.atelier .atelier__carte-infos .infos-rapides__valeur { flex-shrink: 0; font-weight: 600; }
/* Pendant le choix d'une valeur (hauteur du plancher bas…), les boutons passent sous le libellé, sur toute la largeur : sans
   ce retour à la ligne, le libellé était écrasé mot par mot et la ligne défilait de côté. */
.atelier .atelier__carte-infos p.infos-rapides__ligne.infos-rapides__ligne--edition:not([data-ir-ligne="moa"]):not([data-ir-ligne="moe"]) {
    flex-wrap: wrap;
}
.atelier .atelier__carte-infos .infos-rapides__ligne--edition .infos-rapides__libelle { flex: 1 1 auto; }

/* ─── Fiche « à classer » (templates/batiment/a_classer.html.twig) ───────────────────────────── */
.atelier__badge--a-classer { color: var(--warning-border-color, #ffc107); }

/* ─── Page d'un site (templates/site/voir.html.twig) : le plan du site tient la place de la maquette ─── */
.atelier__scene--plan { padding: 0; }
.atelier__scene--plan .plan-site { flex: 1; margin: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.atelier__scene--plan .plan-site__entete { padding-left: 6.5rem; }
.atelier__liste-site .card__header { display: none; }
.atelier__liste-site .table { width: 100%; }

/* ─── Orientation de la maquette (atelier.html.twig, data-mq-orientation) ─── */
.atelier__orientation {
    position: absolute;
    z-index: 2;
    top: 4.2rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.45rem;
    border-radius: 999px;
    background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre);
    font-size: 0.78rem;
}
.atelier__orientation-bouton,
.atelier__orientation-entree {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--glisse, ease);
}
.atelier__orientation-bouton:hover,
.atelier__orientation-entree:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.atelier__orientation-bouton:active { transform: rotate(-20deg); }
.atelier__orientation-bouton[data-mq-tourner="1"]:active { transform: rotate(20deg); }
.atelier__orientation-bouton:focus-visible,
.atelier__orientation-entree:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.atelier__orientation-entree[aria-pressed="true"] { background: var(--primary); color: var(--encre-sur-primaire); }
.atelier__orientation-bouton .material-symbols-outlined { font-size: 19px; }
.atelier__orientation-vue { min-width: 9.5em; color: var(--muted); text-align: center; }
.atelier__orientation-sep { width: 1px; height: 20px; margin: 0 0.2rem; background: var(--border-color); }
.atelier__orientation-libelle { color: var(--muted); font-weight: 600; }
.atelier__orientation-entrees { display: inline-flex; gap: 0.1rem; }
@media (max-width: 760px) {
    .atelier__orientation { top: auto; bottom: 6.5rem; right: 0.5rem; }
    .atelier__orientation-vue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .atelier__orientation-bouton, .atelier__orientation-entree { transition: none; }
}
[data-mq-glisser] { cursor: grab; }
.mq-glisse { cursor: grabbing; opacity: 0.8; filter: drop-shadow(0 10px 12px rgba(15, 23, 42, 0.35)); }

/* ─── L'allure de chaque activité, la même dans la fiche et dans la ville (maquette-batiment.js, ACTIVITES) ─── */

/* ─── Tiers : chacun sa couleur d'après son classement incendie ─── */

/* ─── Signes de la nature du bâtiment (maquette-batiment.js, decor) ─── */

/* ─── Gestes directs (maquette-batiment.js, brancherGestes) ─── */
/* Le bâtiment se saisit pour tourner ; le terrain se trace case par case ; l'entrée se glisse. */
.mq--editable .mq-batiment { cursor: grab; }
.atelier__scene--geste, .atelier__scene--geste * { cursor: grabbing !important; }
.atelier__scene--case .mq-sol { cursor: crosshair; }
.mq-case { fill: color-mix(in srgb, var(--primary) 14%, transparent); stroke: color-mix(in srgb, var(--primary) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.mq-zone { fill: color-mix(in srgb, var(--primary) 22%, transparent); stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 5 3; pointer-events: none; }
.mq-zone--choisie { animation: mq-zone 1.2s ease-in-out infinite; }
@keyframes mq-zone { 50% { fill-opacity: 0.45; } }
.mq-zone-texte { fill: var(--primary); font-size: 12px; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; pointer-events: none; paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 3px; }
/* L'étiquette de la zone, au-dessus de la maquette (maquette-batiment.js, poserEtiquette) : une pastille du thème qui ne laisse
   rien passer à travers, posée à côté des « + », des lettres des faces et de la boussole. */
.mq-zone-etiquette { pointer-events: none; }
.mq-zone-etiquette-fond { fill: var(--surface, #fff); stroke: var(--primary); stroke-width: 1; }
html[data-theme="dark"] .mq-zone-etiquette-fond { fill: var(--bg-color, #131829); }
/* Mode tiers (20/10/2026) : le terrain se dessine en croix ; les poignées des tiers (poserPoignees) se saisissent pour redimensionner. */
.atelier--mode-tiers .mq-sol { cursor: crosshair; }
.mq-poignee { cursor: nwse-resize; }
.mq-poignee-prise { fill: transparent; }
.mq-poignee-point { fill: #fff; stroke: var(--primary); stroke-width: 2; }
.mq-poignee:hover .mq-poignee-point, .mq-poignee:focus-visible .mq-poignee-point { fill: var(--primary); }
@media (prefers-reduced-motion: reduce) { .mq-zone--choisie { animation: none; } }
/* ─── La parcelle, îlot de la ville (fiche plein écran, data-maquette-ville) ─── */

/* ─── Schéma de façade (onglet « Schéma » de la fiche ; maquette-batiment.js, dessinerSchema) ───────────────────────────────
   Un dessin à plat, sans ombre, sans flou, sans animation : traits et aplats seulement. */
.sch-svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: inherit; }
.sch-svg text { font-size: 14px; fill: var(--text-color-main); }
.sch-niveau-fond { fill: color-mix(in srgb, var(--surface, #fff) 92%, transparent); stroke: var(--border-color); stroke-width: 1.2; }
.sch-niveau--sous-sol .sch-niveau-fond { fill: color-mix(in srgb, #a16207 14%, var(--surface, #fff)); stroke: color-mix(in srgb, #a16207 45%, var(--border-color)); }
.sch-niveau-nom { font-weight: 700; fill: var(--muted) !important; }
.sch-activite-fond { fill: color-mix(in srgb, var(--primary) 16%, var(--surface, #fff)); stroke: var(--primary); stroke-width: 1.4; }
.sch-activite.mq-activite--c1 .sch-activite-fond { fill: color-mix(in srgb, var(--teinte-turquoise) 16%, var(--surface, #fff)); stroke: var(--teinte-turquoise); }
.sch-activite.mq-activite--c2 .sch-activite-fond { fill: color-mix(in srgb, #d97706 16%, var(--surface, #fff)); stroke: #d97706; }
.sch-activite.mq-activite--c3 .sch-activite-fond { fill: color-mix(in srgb, var(--teinte-violet) 14%, var(--surface, #fff)); stroke: var(--teinte-violet); }
.sch-activite.mq-activite--c4 .sch-activite-fond { fill: color-mix(in srgb, #db2777 14%, var(--surface, #fff)); stroke: #db2777; }
.sch-activite.mq-activite--c5 .sch-activite-fond { fill: color-mix(in srgb, var(--teinte-vert) 14%, var(--surface, #fff)); stroke: var(--teinte-vert); }
.sch-activite-nom { font-weight: 600; }
.sch-surface { fill: var(--muted) !important; font-size: 12px !important; }
.sch-surface--manque { fill: #b45309 !important; font-weight: 600; }
.sch-effectif { fill: var(--muted) !important; font-weight: 600; }
.sch-ajout rect { fill: transparent; stroke: var(--primary); stroke-width: 1.3; stroke-dasharray: 6 4; }
.sch-ajout text { fill: var(--primary) !important; font-weight: 600; }
.sch-plus circle { fill: var(--surface, #fff); stroke: var(--primary); stroke-width: 1.4; }
.sch-plus path { stroke: var(--primary); stroke-width: 2; stroke-linecap: round; fill: none; }
.sch-bouton rect { fill: var(--surface, #fff); stroke: var(--primary); stroke-width: 1.4; }
.sch-bouton text { fill: var(--primary) !important; font-weight: 700; }
.sch-toit { fill: var(--text-color-main); opacity: 0.75; }
.sch-terrain { stroke: var(--text-color-main); stroke-width: 2.5; }
.sch-limite { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 4; }
.sch-note { fill: var(--muted) !important; font-size: 12px !important; }
.sch-tiers rect { fill: color-mix(in srgb, var(--muted) 16%, var(--surface, #fff)); stroke: var(--muted); stroke-width: 1.3; }
.sch-tiers--vis-a-vis rect { fill: color-mix(in srgb, var(--muted) 7%, var(--surface, #fff)); stroke-dasharray: 6 4; }
.sch-tiers-nom { font-weight: 700; }
.sch-tiers-quoi { fill: var(--muted) !important; font-size: 12px !important; }
.sch-entree path { fill: none; stroke: var(--teinte-vert); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sch-entree text { fill: var(--teinte-vert) !important; font-weight: 700; }
/* Survol et choix : le contour s'épaissit, rien ne bouge. */
.sch-svg .mq-actionnable { cursor: pointer; }
.sch-svg .mq-actionnable:hover > rect, .sch-svg .mq-actionnable:focus-visible > rect,
.sch-niveau.mq-actionnable:hover .sch-niveau-fond, .sch-svg .mq-choisi > rect { stroke-width: 2.6; stroke: var(--primary); }
.sch-svg .mq-actionnable:focus-visible { outline: none; }
.sch-svg text.mq-actionnable:hover, .sch-svg text.mq-actionnable:focus-visible { text-decoration: underline; }
/* La caméra se manie au doigt (deux doigts : zoomer, tourner, se déplacer ; maquette-batiment.js, gestesCamera) :
   le navigateur ne doit ni défiler ni zoomer la page à la place. */
.atelier__maquette { touch-action: none; }

/* ─── Vue de dessus (onglet de la fiche, mode tiers ; maquette-batiment.js, dessinerDessus) et vues côte à côte (construireVues) ───── */
.sch-plan-rue { fill: var(--mq-rue, #cfd6e2); }
.sch-plan-terrain { fill: color-mix(in srgb, #10b981 9%, var(--surface, #fff)); }
.sch-plan-trame { stroke: color-mix(in srgb, var(--primary) 10%, transparent); stroke-width: 1; }
.sch-plan-ruelle { fill: var(--mq-rue, #cfd6e2); opacity: 0.8; }
.sch-plan-batiment rect { fill: color-mix(in srgb, var(--primary) 16%, var(--surface, #fff)); stroke: var(--primary); stroke-width: 2; }
.sch-plan-porte rect { fill: var(--surface, #fff); stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 2; }
.sch-plan-porte text { fill: var(--muted) !important; font-size: 12px !important; }
.sch-plan-porte[data-mq-entree] { cursor: pointer; opacity: 0.75; }
.sch-plan-porte[data-mq-entree]:hover, .sch-plan-porte[data-mq-entree]:focus-visible { opacity: 1; outline: none; }
.sch-plan-porte[data-mq-entree]:hover rect { stroke: var(--teinte-vert); }
.sch-plan-porte--entree rect { fill: var(--teinte-vert); stroke: var(--teinte-vert); stroke-dasharray: none; }
.sch-plan-porte--entree text { fill: var(--teinte-vert) !important; font-weight: 700; font-size: 13px !important; }
.sch-plan [data-mq-plan-glisser] { cursor: grab; }
.sch-plan-zone { fill: color-mix(in srgb, var(--primary) 18%, transparent); stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sch-plan-sol { cursor: crosshair; }
.sch-plan-rose circle { fill: var(--surface, #fff); stroke: var(--border-color); }
.sch-plan-rose path { fill: #dc2626; }
.sch-plan-rose text { font-weight: 700; }
/* Les deux vues côte à côte ; l'une sous l'autre quand la place manque (téléphone). */
.mq-vues { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.mq-vue {
    display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); border: 1px solid var(--panneau-bord); border-radius: 14px;
}
.mq-vue-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 0 12px; flex: none; }
.mq-vue-titre { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.mq-vue-titre .material-symbols-outlined { font-size: 18px; }
.mq-vue-agrandir {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--panneau-bord); border-radius: 999px;
    background: var(--surface, #fff); color: var(--text-color-main); font: inherit; font-size: 0.8rem; cursor: pointer; flex: none;
}
.mq-vue-agrandir .material-symbols-outlined { font-size: 16px; }
.mq-vue-agrandir:hover { border-color: var(--primary); color: var(--primary); }
.mq-vue-agrandir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mq-vue-corps { flex: 1 1 auto; min-height: 0; padding: 2px 8px 8px; display: flex; }
.mq-vue-corps > .sch-svg { width: 100%; height: 100%; flex: 1 1 auto; }
/* Une vue agrandie : par-dessus la page, sous la bande du haut, avec « Fermer » ; un voile assombrit le reste. */
.mq-vue--grande {
    position: fixed; z-index: 1200; inset: calc(var(--bande-haut, 56px) + 12px) 12px 12px 12px;
    background: var(--surface, #fff); box-shadow: 0 0 0 100vmax color-mix(in srgb, #0f172a 45%, transparent), 0 20px 50px rgba(15, 23, 42, 0.35);
}
.mq-vue--grande .mq-vue-tete { padding-top: 10px; }
.mq-vue--grande .mq-vue-titre { font-size: 1rem; }
.mq-vue--grande .mq-vue-agrandir { font-size: 0.9rem; padding: 6px 14px; background: var(--primary); border-color: var(--primary); color: var(--encre-sur-primaire); }
@media (max-width: 850px) {
    .mq-vues { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px; }
    .mq-vue--grande { inset: calc(var(--bande-haut, 56px) + 6px) 6px 6px 6px; }
}
/* Vue de dessus : le plan est à l'échelle du bâtiment, les textes grossissent d'autant. */
.sch-plan text { font-size: calc(14px * var(--sch-k, 1)); }
.sch-plan .sch-tiers-quoi, .sch-plan .sch-plan-porte text { font-size: calc(12px * var(--sch-k, 1)) !important; }
.sch-plan .sch-plan-porte--entree text { font-size: calc(14px * var(--sch-k, 1)) !important; }
.sch-plan-trame { pointer-events: none; }
.sch-plan { overflow: hidden; }
/* Les portes libres se proposent au survol seulement : leur texte ne cache pas un tiers accolé. */
.sch-plan-porte[data-mq-entree] text { opacity: 0; }
.sch-plan-porte[data-mq-entree]:hover text, .sch-plan-porte[data-mq-entree]:focus-visible text { opacity: 1; }

/* Les cases des bâtiments d'un site ou d'un groupement, sous les rubriques (batiment/partials/_rail.html.twig). */
.atelier__rail-titre { margin: 10px 4px 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.atelier__onglet--partie { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.atelier__onglet-sous { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; }

/* « Description manquante » : une pastille sous les rubriques (batiment/voir.html.twig), qui ne recouvre rien. Le « ? »
   fait expliquer le manque par le guide NORESA. */
.fiche-alerte {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 8px 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--teinte-ambre) 14%, var(--panneau-fond, #fff)); border: 1px solid color-mix(in srgb, var(--teinte-ambre) 45%, transparent);
    color: #92400e; font-size: 0.82rem; font-weight: 600;
}
.fiche-alerte[hidden] { display: none; }
.fiche-alerte__icone { font-size: 18px; }
.fiche-alerte__texte { flex: 1; }
.fiche-alerte__aide {
    width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor;
    background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 0;
}
.fiche-alerte__lien { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .fiche-alerte { color: #fcd34d; }

/* On tourne autour du bâtiment (maquette-batiment.js, orbiter) : chaque image est un nouveau dessin, sans animation. */
.mq-orbite .atelier__maquette *, .mq-orbite .atelier__maquette { animation: none !important; transition: none !important; }

/* ─── Classement depuis la maquette (atelier-classement.js, décision du pilote du 16/10/2026) ───────────────────
   Sous la maquette : l'activité du bâtiment (type, niveaux, activités), puis le tableau des effectifs en cases, dans
   le style des cartes chiffrées (.atelier__chiffre) ; les lignes ajoutées par un mode de calcul, grisées. */
/* Il ne se montre que prêté à la page « Activité » (parcours-classement.css). */
.atelier-classement { display: none; }
.atelier-classement__corps { display: grid; gap: 0.75rem; }
.atelier-classement__bloc { display: grid; gap: 0.6rem; }
.atelier-classement__titre { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1rem; color: var(--ink); }
.atelier-classement__titre .material-symbols-outlined { color: var(--primary); font-size: 20px; }
.atelier-classement__etapes { display: grid; gap: 0.75rem; }
.atelier-classement__etape { display: grid; gap: 0.45rem; }
.atelier-classement__sous-titre { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.atelier-classement__tuiles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* La tuile de choix (.atelier-classement__tuile) vit dans le socle commun : components/_socle.css (.tuile-choix). */
.atelier-classement__niveaux { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.atelier-classement__champ { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.atelier-classement__champ .form-control { width: 9rem; }
.atelier-classement__sous-sols { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.atelier-classement__question { font-weight: 600; color: var(--ink); }
.atelier-classement__choix { padding: 0.3rem 0.85rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--panneau-fond); color: var(--ink); font-weight: 600; cursor: pointer; }
.atelier-classement__choix[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--panneau-fond)); color: var(--primary); }
.atelier-classement__aide { margin: 0; color: var(--muted); font-size: 0.85rem; }
.atelier-classement__pastilles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.atelier-classement__pastille {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 0; border-radius: 999px; line-height: 1.25;
    background: color-mix(in srgb, var(--primary) 11%, transparent); color: var(--ink); font-size: 0.85rem;
}
.atelier-classement__pastille .material-symbols-outlined { font-size: 16px; color: var(--primary); }
.atelier-classement__pastille--retirer { cursor: pointer; }
.atelier-classement__activite--refusee { opacity: 0.45; cursor: not-allowed; }
/* L'activité (type d'établissement) et sa précision ne se confondent plus : la précision est en orange, avec sa légende. */
.atelier-classement__legende { margin: 0.5rem 0 0.2rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.atelier-classement__pastille--precision { background: color-mix(in srgb, var(--teinte-ambre) 14%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--teinte-ambre) 45%, transparent); }
.atelier-classement__pastille--precision .material-symbols-outlined { color: #b45309; }
/* La tuile de précision : components/_socle.css ; seul son petit texte reste ici (ambre fixe dans les deux thèmes). */
.atelier-classement__tuile--precision small { color: #b45309; font-weight: 700; }
/* Précision obligatoire d'une activité (Hôtel / Autres…), choisie dans la fenêtre Activité : ambre tant qu'elle manque. */
.atelier-classement__precisions { display: grid; gap: 0.6rem; }
.atelier-classement__precisions:empty { display: none; }
.atelier-classement__precision {
    display: grid; gap: 0.5rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border-color); border-radius: var(--radius);
    background: var(--panneau-fond); box-shadow: var(--panneau-ombre);
}
.atelier-classement__precision--attente { border-color: var(--teinte-ambre); background: color-mix(in srgb, var(--teinte-ambre) 9%, var(--panneau-fond)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teinte-ambre) 25%, transparent); }
.atelier-classement__precision-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.9rem; }
.atelier-classement__precision-titre .material-symbols-outlined { font-size: 18px; color: #b45309; }
.atelier-classement__obligatoire { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--teinte-ambre); color: #1f1300; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.atelier-classement__obligatoire--fait { background: color-mix(in srgb, var(--success-color, var(--teinte-vert)) 18%, transparent); color: var(--success-color, #15803d); }
.atelier-classement__pastille--attente { background: color-mix(in srgb, var(--teinte-ambre) 18%, var(--panneau-fond)); box-shadow: inset 0 0 0 1px var(--teinte-ambre); }
.atelier-classement__pastille--attente .material-symbols-outlined { color: #b45309; }
.atelier-classement__aide--attente { color: var(--warning-color, #b45309); font-weight: 600; }
.atelier-classement__actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.atelier-classement__pastille--retirer:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); }
.atelier-classement__resume { display: grid; gap: 0.5rem; }
.atelier-classement__resume-ligne { display: flex; gap: 0.6rem; align-items: baseline; }
.atelier-classement__activites { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.4rem; max-height: 260px; overflow-y: auto; padding: 2px; }
.atelier-classement__activite {
    display: grid; justify-items: center; gap: 0.1rem; padding: 0.45rem 0.35rem; border: 1px solid var(--border-color);
    border-radius: 10px; background: var(--panneau-fond); color: var(--ink); cursor: pointer; text-align: center;
}
.atelier-classement__activite:hover, .atelier-classement__activite:focus-visible { border-color: var(--primary); outline: none; }
.atelier-classement__activite[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--panneau-fond)); }
.atelier-classement__activite .material-symbols-outlined { color: var(--primary); }
.atelier-classement__activite small { font-size: 0.7rem; line-height: 1.2; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atelier-classement__lien { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; padding: 0; border: 0; background: none; color: var(--primary); font-size: 0.85rem; cursor: pointer; }
.atelier-classement__lien .material-symbols-outlined { font-size: 16px; }
/* Une ligne du tableau = une rangée de cases, comme les cartes sous la maquette. */
.atelier-classement__lignes { display: grid; gap: 0.5rem; }
.atelier-classement__ligne { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; padding-right: 2.2rem; }
.atelier-classement__case {
    display: grid; align-content: start; gap: 0.2rem; min-width: 0; padding: 0.55rem 0.7rem; border-radius: var(--radius);
    background: var(--panneau-fond); box-shadow: var(--panneau-ombre);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted);
}
.atelier-classement__case .form-control { width: 100%; min-width: 0; margin: 0; padding: 0.25rem 0.4rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Une saisie ne sort jamais de sa case, même plus étroite que sa largeur naturelle : la colonne de la case peut descendre à zéro, et
   une indication trop longue finit par « … » (20/10/2026, « Nombre de personnes » passait par-dessus la case « Public »). Les listes
   gardent leur largeur naturelle (page « Activité » : rien n'est coupé). */
.atelier-classement__case:has(> input) { grid-template-columns: minmax(0, 1fr); }
.atelier-classement__case > input.form-control { max-width: 100%; box-sizing: border-box; }
.atelier-classement__case > input.form-control::placeholder { text-overflow: ellipsis; }
/* Les cases calculées (article, effectif public) : grises, comme dans le tableau. */
.atelier-classement__case--calcul { background: color-mix(in srgb, var(--muted) 13%, var(--panneau-fond)); }
.atelier-classement__lu { font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-classement__ligne--grisee { margin-left: 1.5rem; opacity: 0.85; }
.atelier-classement__ligne--grisee .atelier-classement__case { background: color-mix(in srgb, var(--muted) 13%, var(--panneau-fond)); box-shadow: none; border: 1px dashed var(--border-color); }
.atelier-classement__retirer { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.atelier-classement__retirer:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); color: var(--danger, #dc2626); }
.atelier-classement__total { display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0.2rem; font-size: 0.95rem; }
/* Le tableau en grandes cartes, une par niveau, empilées comme les étages (décision du pilote du 15/10/2026). */
.atelier-classement__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.atelier-classement__entete .atelier-classement__lien { margin-top: 0; }
/* Tableau compact (décision du pilote du 16/10/2026, « trop grand, trop de place ») : une rangée fine par activité ; le niveau
   est un en-tête étroit à gauche de ses rangées (R+2, RDC…), les champs sont petits et serrés, rien n'est retiré. */
.atelier-classement__cartes { gap: 0.3rem; }
.atelier-classement__carte {
    display: flex; align-items: stretch; overflow: hidden;
    border: 1px solid var(--panneau-bord); border-radius: 10px; background: var(--panneau-fond);
}
/* La bande du niveau est la façade du schéma : à la couleur de son activité (la même que sur la 3D), le niveau écrit dessus. */
.atelier-classement__carte-titre {
    flex: 0 0 3.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; margin: 0; padding: 0.3rem 0.2rem;
    font-size: 0.9rem; font-weight: 700; color: var(--ink); text-align: center;
    background: color-mix(in srgb, var(--mq-act, var(--primary)) 20%, var(--surface, #fff)); border-right: 3px solid var(--mq-act, var(--primary));
}
.atelier-classement__carte-titre .material-symbols-outlined { font-size: 16px; color: var(--mq-act, var(--primary)); }
.atelier-classement__carte-corps { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.15rem; padding: 0.3rem 0.5rem; align-content: center; }
.atelier-classement__carte .atelier-classement__ligne { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.3rem; padding-right: 1.8rem; }
/* L'activité et son mode de calcul, les deux champs longs, prennent deux colonnes : une seule ligne de champs quand la place le permet. */
.atelier-classement__carte .atelier-classement__ligne > .atelier-classement__case:nth-child(-n+2) { grid-column: span 2; }
/* Une ligne garde sa couleur : un liseré à gauche, comme la bande de son activité sur la façade. */
.atelier-classement__carte .atelier-classement__ligne[class*="mq-activite--c"] { padding-left: 0.4rem; border-left: 3px solid var(--mq-act); border-radius: 4px; }
.atelier-classement__carte .atelier-classement__case { padding: 0.35rem 0.55rem 0.4rem; gap: 0.2rem; font-size: 0.6rem; border-radius: 8px; letter-spacing: 0.2px; line-height: 1.2; }
.atelier-classement__carte .atelier-classement__case .form-control { margin: 0; padding: 0.2rem 0.4rem; font-size: 0.82rem; height: auto; min-height: 0; line-height: 1.3; }
/* Une liste garde la place de sa flèche (la marge compacte ci-dessus l'effaçait : le texte passait dessous) ; un libellé trop long
   finit par « … » au lieu d'être coupé net. */
.atelier-classement__case select.form-control { padding-right: 2rem; background-position: right 0.5rem center; background-size: 12px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-classement__carte .atelier-classement__lu { font-size: 0.9rem; line-height: 1.3; padding: 0.2rem 0.4rem; border: 1px solid transparent; }
.atelier-classement__carte .atelier-classement__lien { margin-top: 0; justify-self: start; font-size: 0.78rem; }
.atelier-classement__carte .atelier-classement__ligne--grisee { margin-left: 0.8rem; }
.atelier-classement__carte .atelier-classement__retirer { width: 24px; height: 24px; }
.atelier-classement__carte .atelier-classement__retirer .material-symbols-outlined { font-size: 16px; }
/* Le niveau choisi (sur la 3D, ou survolé ici) : sa carte ressort. */
.atelier-classement__carte--choisie { border-color: var(--mq-act, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mq-act, var(--primary)) 35%, transparent); }
/* « + Ajouter un niveau » du tableau (comme le « + » de la 3D et du schéma) ; grisé à la limite. */
.atelier-classement__plus {
    display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; padding: 0.2rem 0.7rem 0.2rem 0.45rem; border: 1px dashed var(--primary);
    border-radius: 999px; background: color-mix(in srgb, var(--primary) 6%, var(--panneau-fond)); color: var(--primary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.atelier-classement__plus .material-symbols-outlined { font-size: 16px; }
.atelier-classement__plus:hover, .atelier-classement__plus:focus-visible { background: color-mix(in srgb, var(--primary) 14%, var(--panneau-fond)); outline: none; }
.atelier-classement__plus--grise { border-color: var(--border-color); color: var(--muted); background: transparent; opacity: 0.7; cursor: not-allowed; }
.atelier-classement__plus--grise:hover, .atelier-classement__plus--grise:focus-visible { background: transparent; }
@media (max-width: 600px) {
    .atelier-classement__carte { flex-direction: column; }
    .atelier-classement__carte-titre { flex: none; flex-direction: row; justify-content: flex-start; gap: 0.3rem; padding: 0.2rem 0.6rem; border-right: 0; border-bottom: 3px solid var(--mq-act, var(--primary)); }
    .atelier-classement__carte .atelier-classement__ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atelier-classement__carte .atelier-classement__ligne > .atelier-classement__case:nth-child(-n+2) { grid-column: 1 / -1; }
}
.atelier-classement__carte--vide { border-style: dashed; background: var(--panneau-fond); }
.atelier-classement__carte--vide .atelier-classement__carte-titre { background: color-mix(in srgb, var(--muted) 10%, var(--surface, #fff)); border-color: var(--border-color); }
.atelier-classement__carte--vide .atelier-classement__carte-titre .material-symbols-outlined { color: var(--muted); }
.atelier-classement__carte--a-preciser { --mq-act: var(--warning-border-color, #ffc107); }
.atelier-classement__cartes > .atelier-classement__total { justify-content: center; font-size: 1rem; padding: 0.1rem; }
.atelier-classement__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.atelier-classement__resultat { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; color: var(--success, var(--teinte-vert)); }
.atelier-classement__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.atelier-classement__actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.atelier-classement__message { margin: 0; padding: 0.5rem 0.8rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, transparent); font-size: 0.9rem; }
.atelier-classement__message[hidden] { display: none; }
.atelier-classement__message--erreur { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); color: var(--danger, #dc2626); font-weight: 600; }

/* ─── Les modes de la fiche (atelier-modes.js) : entrées sous la maquette, barre du mode en grand ─────────────── */
.atelier__modes { display: none; gap: 0.5rem; }
.atelier--mode-fiche .atelier__modes { display: flex; }
.atelier__mode {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.8rem;
    border: 1px solid var(--panneau-bord); border-radius: var(--radius); background: var(--panneau-fond); color: var(--ink);
    font-weight: 600; cursor: pointer; box-shadow: var(--panneau-ombre);
}
.atelier__mode .material-symbols-outlined { color: var(--primary); font-size: 20px; }
.atelier__mode:hover, .atelier__mode:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.atelier__mode-barre { display: none; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--panneau-bord); border-radius: var(--panneau-rayon); background: var(--panneau-fond); box-shadow: var(--panneau-ombre); }
.atelier--mode-tiers .atelier__mode-barre { display: flex; }
.atelier__mode-titre { color: var(--primary); }
.atelier__mode-aide { color: var(--muted); font-size: 0.85rem; flex: 1 1 260px; }
.atelier__mode-barre .btn { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Mode tiers : pas de « + » de niveau ou d'activité (le bâtiment ne bouge pas). */
.atelier--mode-tiers [data-action="ajout-niveau"], .atelier--mode-tiers [data-action="ajout-activite"] { display: none; }
/* L'aide « Survolez… » ne vaut que pour l'ancienne fiche sans modes. */
.atelier[data-atelier-modes] .atelier__aide { display: none; }

/* ─── Fiche d'un bâtiment (.atelier--fiche, décision du pilote du 16/10/2026) ──────────────────────────────────
   Comme l'ancienne fiche : à gauche les rubriques (des cases qui disent déjà ce qu'elles contiennent), à droite, à la
   place de la carte, la maquette (ou le schéma, animation éteinte), simple visuel. Une rubrique s'ouvre sous les cases,
   dans la page. La maquette ne passe en plein écran qu'en mode tiers (atelier-modes.js) ; la page « Activité » est un plein écran à
   part (parcours-classement.css). */
.atelier--fiche {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
    grid-template-areas: "rail scene" "panneaux panneaux";
    align-items: stretch;
    min-height: 0;
}
.atelier--fiche > .atelier__rail { grid-area: rail; }
.atelier--fiche .atelier__onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(72px, 1fr); gap: 0.5rem; flex: 1; }
.atelier--fiche > .atelier__rail { min-height: 320px; }
.atelier--fiche .atelier__onglet { height: 100%; box-sizing: border-box; }
.atelier--fiche .atelier__onglet-libelle { display: grid; gap: 0.1rem; }
.atelier--fiche .atelier__onglet-sous { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.atelier--fiche > .atelier__scene { grid-area: scene; min-height: 320px; }
.atelier--fiche > .atelier__panneaux { grid-area: panneaux; position: static; pointer-events: auto; }
.atelier--fiche .atelier__panneau {
    position: static; display: none; width: 100%; max-width: none; max-height: none; overflow: visible;
    opacity: 1; visibility: visible; transform: none; box-shadow: none; transition: none;
}
.atelier--fiche .atelier__panneau--ouvert { display: block; }
.atelier--fiche.atelier--panneau-ouvert .atelier__maquette { transform: none; opacity: 1; }

/* Mode fiche : l'aperçu est un visuel (la 3D vivante, ou son instantané image animation éteinte), avec trois onglets en haut : « 3D »,
   « Schéma » et « Vue de dessus » (partie 13a du 17/10/2026 ; maquette-batiment.js, brancherOnglets). Ni cartes, ni réglages. La fiche
   « à classer » n'a pas d'onglets : sa maquette se classe en cliquant dessus, et son bouton « Choisir l'activité » reste sous elle. */
.atelier--fiche.atelier--mode-fiche .atelier__maquette { min-height: 0; position: absolute; inset: 0 0 56px; }
.atelier--fiche.atelier--mode-fiche .atelier__scene[data-fiche-onglet-actif] .atelier__maquette { inset: 54px 0 0; }
/* Les onglets et leurs volets ne se voient qu'en mode fiche ; la 3D cède la place au volet d'un autre onglet. */
.atelier__vues-onglets, .atelier__fiche-vue { display: none; }
.atelier--fiche.atelier--mode-fiche .atelier__vues-onglets {
    display: flex; position: absolute; z-index: 4; top: 10px; left: 10px; right: 10px; gap: 0.25rem; padding: 0.2rem; box-sizing: border-box;
    border: 1px solid var(--panneau-bord); border-radius: 999px; background: var(--panneau-fond); box-shadow: var(--panneau-ombre);
}
.atelier__vues-onglet {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.6rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.88rem;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atelier__vues-onglet .material-symbols-outlined { font-size: 19px; flex: none; }
.atelier__vues-onglet:hover { color: var(--primary); }
.atelier__vues-onglet[aria-selected="true"] { background: var(--primary); color: var(--encre-sur-primaire); box-shadow: var(--shadow-1); }
.atelier__vues-onglet:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Téléphone : trois onglets sur la largeur de l'aperçu ; sans leur icône, « Vue de dessus » tient en entier. */
@media (max-width: 520px) {
    .atelier__vues-onglet { padding: 0.4rem 0.3rem; font-size: 0.82rem; }
    .atelier__vues-onglet .material-symbols-outlined { display: none; }
}
.atelier--fiche.atelier--mode-fiche .atelier__fiche-vue:not([hidden]) {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; position: absolute; z-index: 3; inset: 54px 10px 10px; min-height: 0;
}
.atelier--fiche.atelier--mode-fiche .atelier__scene[data-fiche-onglet-actif="schema"] .atelier__maquette,
.atelier--fiche.atelier--mode-fiche .atelier__scene[data-fiche-onglet-actif="dessus"] .atelier__maquette { display: none; }
.atelier__fiche-vue-corps {
    flex: 1 1 auto; min-height: 0; display: flex; padding: 0.4rem; box-sizing: border-box; overflow: hidden;
    border: 1px solid var(--panneau-bord); border-radius: 14px; background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}
.atelier__fiche-vue-corps > .sch-svg { width: 100%; height: 100%; flex: 1 1 auto; min-width: 0; }
.atelier__fiche-vue-corps[data-fiche-aller] { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.atelier__fiche-vue-corps[data-fiche-aller]:hover { border-color: var(--primary); box-shadow: var(--shadow-1); }
.atelier__fiche-vue-corps:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.atelier__fiche-vue-bouton { align-self: flex-end; flex: none; display: inline-flex; align-items: center; gap: 0.35rem; }
/* « Reprendre les questions » (20/10/2026) : en bas à droite de la 3D, en mode fiche seulement ; caché sous les onglets « Schéma » et
   « Vue de dessus », dont la vue occupe l'aperçu. */
.atelier__reprendre { display: none; }
.atelier--fiche.atelier--mode-fiche .atelier__reprendre { display: inline-flex; align-items: center; gap: 0.35rem; position: absolute; z-index: 4; right: 10px; bottom: 10px; margin: 0; }
.atelier--fiche.atelier--mode-fiche .atelier__scene:is([data-fiche-onglet-actif="schema"], [data-fiche-onglet-actif="dessus"]) .atelier__reprendre { display: none; }
/* « + » et « − » de la 3D (maquette-batiment.js, brancherCamera) : en bas à gauche, face à « Reprendre les questions ». */
.atelier__zoom { display: none; }
.atelier--fiche.atelier--mode-fiche .atelier__zoom { display: flex; flex-direction: column; gap: 6px; position: absolute; z-index: 4; left: 10px; bottom: 10px; }
.atelier--fiche.atelier--mode-fiche .atelier__scene:is([data-fiche-onglet-actif="schema"], [data-fiche-onglet-actif="dessus"]) .atelier__zoom { display: none; }
.atelier__zoom-bouton {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--panneau-bord); border-radius: 8px; background: var(--panneau-fond); color: var(--text-color-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.atelier__zoom-bouton:hover, .atelier__zoom-bouton:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.atelier__zoom-bouton .material-symbols-outlined { font-size: 20px; }
.atelier--fiche.atelier--mode-fiche .atelier__maquette svg { max-height: none; }
.atelier--fiche.atelier--mode-fiche :is(.atelier__chiffres, .atelier__portee, .atelier__orientation, .atelier__astuce, .atelier__astre, .atelier__scene-entete) { display: none; }
.atelier--fiche.atelier--mode-fiche .atelier__modes { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; }
/* Fiche « à classer » seulement : son bouton « Choisir l'activité » reste sous la maquette, en bas de sa carte (la fiche d'un bâtiment
   classé n'a plus ces grands boutons : ses onglets « Schéma » et « Vue de dessus » et la case « Activité » les remplacent, partie 13a). */
.atelier--fiche.atelier--mode-fiche .atelier__scene::after { display: none; }

/* Mode tiers : la maquette en plein écran, par-dessus la page. */
.atelier--fiche.atelier--mode-tiers > .atelier__scene {
    position: fixed; inset: var(--bande-haut) 0 0 0; z-index: 1000; border-radius: 0; min-height: 0;
}
body.fiche--mode-grand { overflow: hidden; }
.atelier--fiche.atelier--mode-tiers .atelier__maquette { position: absolute; inset: 52px 16px 16px; min-height: 0; }
.atelier--fiche.atelier--mode-tiers .atelier__maquette svg { max-height: none; }
.atelier--fiche.atelier--mode-tiers :is(.atelier__chiffres, .atelier__portee, .atelier__astuce) { display: none; }
/* La barre du mode, EN HAUT (décision du pilote du 16/10/2026) : posée dans la bande du haut (bande-haut.css), à droite du
   fil d'Ariane, au-dessus de la maquette plein écran. Seul le texte d'aide reste dans la scène, en pastille sous la bande. */
.atelier--fiche.atelier--mode-tiers .atelier__mode-barre {
    position: fixed; z-index: 1101; top: 6px; right: var(--bande-marge, 16px); left: auto; bottom: auto; height: calc(var(--bande-haut) - 12px);
    box-sizing: border-box; flex-wrap: nowrap; padding: 0 8px 0 14px; border: 1px solid var(--panneau-bord); border-radius: 999px;
    background: var(--panneau-fond); box-shadow: var(--panneau-ombre-forte, var(--panneau-ombre));
    max-width: calc(100vw - 340px);
}
.atelier--fiche.atelier--mode-tiers .atelier__mode-barre > * { flex: none; }
.atelier--fiche.atelier--mode-tiers .atelier__mode-aide {
    position: fixed; z-index: 1002; top: calc(var(--bande-haut) + 8px); left: 16px; max-width: min(560px, calc(100vw - 32px));
    padding: 0.3rem 0.8rem; border: 1px solid var(--panneau-bord); border-radius: 999px; background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre); font-size: 0.8rem;
}
/* Sous 1250px, le titre du mode laisse la place aux boutons (l'aide et le bouton actif disent déjà où l'on est). */
@media (max-width: 1250px) {
    .atelier--fiche.atelier--mode-tiers .atelier__mode-titre { display: none; }
}
/* Entre 851 et 1340px, seuls les libellés d'« Enregistrer et revenir » restent écrits : les autres boutons gardent leur icône
   et leur infobulle (title), pour que toute la barre tienne dans la bande. Elle comptait 4 boutons jusqu'au 1100 px ; « Enregistrer
   comme configuration » (27/10/2026) en fait 5 : tous les libellés demandent 985 px, la bande en offre largeur de la fenêtre moins 340. */
@media (min-width: 851px) and (max-width: 1340px) {
    .atelier__mode-barre .btn:not(.btn--primary) .atelier__mode-lib { display: none; }
}
/* Téléphone : la bande fait deux lignes (fil d'Ariane, puis boutons du mode en icônes seules). */
@media (max-width: 850px) {
    body.fiche--mode-grand { --bande-haut: 96px; }
    body.fiche--mode-grand .bande-haut { align-items: flex-start; }
    body.fiche--mode-grand .bande-haut .fil-ariane { height: 44px; align-items: center; }
    .atelier--fiche.atelier--mode-tiers .atelier__mode-barre {
        top: 44px; left: 0; right: 0; max-width: none; height: 52px; padding: 0 10px; gap: 0.4rem; overflow: hidden;
        justify-content: flex-end; border: 0; border-top: 1px solid var(--panneau-bord); border-radius: 0; background: transparent; box-shadow: none;
    }
    .atelier--fiche.atelier--mode-tiers .atelier__maquette { top: 76px; }
    .atelier__mode-barre .atelier__mode-lib { display: none; }
    .atelier__mode-barre .btn { padding: 0.45rem 0.6rem; }
    .atelier--fiche.atelier--mode-tiers .atelier__mode-aide {
        top: calc(var(--bande-haut) + 6px); left: 8px; right: 8px; max-width: none; border-radius: 12px;
    }
}
/* Mode fiche : l'activité du bâtiment (type, niveaux, activités, précision) se choisit dans la rubrique « Activité » du rail
   (atelier-classement.js, rendreActivite), plus sous l'atelier : le bloc du tableau n'est affiché que sur la page « Activité »
   (décision du pilote du 18/10/2026). Pendant l'édition, le résumé de la rubrique cède la place à l'étape. */
.atelier-classement__edition { display: grid; gap: 0.75rem; margin-bottom: 0.9rem; }
.atelier-classement__edition[hidden] { display: none; }
[data-acl-edition-ouverte] > :not(.atelier__panneau-entete):not([data-acl-edition]) { display: none; }
@media (max-width: 900px) {
    .atelier--fiche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "rail" "panneaux"; }
}

/* ─── Sous la fiche : Sécurité incendie et Accessibilité (fiche_notices.html.twig) ─── */
/* Deux onglets sobres (retour du 30/10/2026, « pas hyper fan de ces boutons ») : du texte, un trait sous l'onglet ouvert, rouge pour la
   sécurité incendie. Sur toute la largeur, moitié chacun. */
.fiche-notices .tab-list { display: flex; gap: 0; width: 100%; max-width: 100%; margin: 0 0 0.9rem; padding: 0; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; background: none; box-shadow: none; }
.fiche-notices .tab-item {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 0.5rem; margin-bottom: -1px;
    border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--muted);
    font: inherit; font-weight: 600; white-space: normal; text-align: center; cursor: pointer;
}
.fiche-notices .tab-item .material-symbols-outlined { font-size: 20px; color: inherit; }
.fiche-notices .tab-item:not(.active):hover { background: none; color: var(--ink); }
.fiche-notices .tab-item.active { background: none; border-bottom-color: var(--primary); color: var(--primary); }
.fiche-notices .tab-item[data-tab="securite-incendie"].active { border-bottom-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }
/* Le mode sombre pose ses fonds en !important sur .tab-item (mode_sombre.css, § 21) : ici ils restent à plat. */
html[data-theme="dark"] .fiche-notices .tab-list { background: none; border: 0; border-bottom: 1px solid var(--border-color); }
html[data-theme="dark"] .fiche-notices .tab-item { color: var(--muted); }
html[data-theme="dark"] .fiche-notices .tab-item:not(.active):hover { background: none !important; color: var(--ink) !important; }
html[data-theme="dark"] .fiche-notices .tab-item.active { background: none !important; color: var(--primary) !important; }
html[data-theme="dark"] .fiche-notices .tab-item[data-tab="securite-incendie"].active { color: var(--danger, #dc2626) !important; }
.fiche-notices .tab-pane { padding: 1.1rem 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.fiche-notices .card__header h2 { font-size: 1.05rem; }

/* ─── Fiche d'un bâtiment en colonne (.atelier--colonne, décision du pilote du 16/10/2026) ──────────────────────
   « Les 5 cases l'une sur l'autre ; un clic ouvre la case à droite, à la place du schéma. » Les cases, en une colonne
   plus large, disent ce qu'elles contiennent sans survol (details, extrait : batiment/partials/_rail.html.twig) ; la
   case ouverte prend la place de l'aperçu, sa croix remet l'aperçu (atelier-batiment.js). Style claude-design :
   cartes arrondies, ombres douces, icônes colorées, état en pastille écrite. La fiche « à classer » n'est pas concernée. */
.atelier--colonne {
    --onglet-teinte: var(--primary);
}
.atelier--colonne .atelier__onglets { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0.65rem; }
.atelier--colonne > .atelier__rail { min-height: 0; }
.atelier--colonne .atelier__onglet {
    align-items: flex-start; gap: 0.9rem; padding: 0.95rem 1rem 0.95rem 0.95rem;
    border-color: var(--panneau-bord); border-radius: var(--radius-lg, 18px);
    background: var(--panneau-fond); box-shadow: var(--shadow-1);
    cursor: pointer;
}
.atelier--colonne .atelier__onglet:hover,
.atelier--colonne .atelier__onglet:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2, var(--shadow-1)), var(--shadow-focus-primary); }
.atelier--colonne .atelier__onglet--actif {
    transform: none; border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--panneau-fond));
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-1);
}
.atelier--colonne .atelier__onglet::after { display: none; }
.atelier--colonne .atelier__onglet-icone { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
.atelier--colonne .atelier__onglet:hover .atelier__onglet-icone,
.atelier--colonne .atelier__onglet--actif .atelier__onglet-icone { transform: none; }
.atelier__onglet-icone--bleu { --onglet-teinte: var(--teinte-bleu); }
.atelier__onglet-icone--violet { --onglet-teinte: var(--teinte-violet); }
.atelier__onglet-icone--turquoise { --onglet-teinte: var(--teinte-turquoise); }
.atelier__onglet-icone--orange { --onglet-teinte: var(--teinte-orange); }
.atelier__onglet-icone--vert { --onglet-teinte: var(--teinte-vert); }
.atelier--colonne .atelier__onglet-icone[class*="atelier__onglet-icone--"] {
    color: var(--onglet-teinte); background: color-mix(in srgb, var(--onglet-teinte) 13%, transparent);
}
.atelier--colonne .atelier__onglet-libelle { display: grid; gap: 0.2rem; min-width: 0; font-size: 1.02rem; }
.atelier--colonne .atelier__onglet-sous {
    display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 0.86rem; font-weight: 500; color: var(--ink);
}
.atelier__onglet-details { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.2rem; }
.atelier__onglet-detail {
    display: inline-flex; align-items: flex-start; gap: 0.3rem; min-width: 0;
    font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: var(--muted);
}
.atelier__onglet-detail .material-symbols-outlined { font-size: 16px; line-height: 1.1; color: var(--onglet-teinte, var(--primary)); opacity: 0.85; }
.atelier__onglet-detail--vide { font-style: italic; }
.atelier__onglet-detail--vide .material-symbols-outlined { color: var(--muted); }
.atelier__onglet-extrait {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 0.15rem; font-size: 0.8rem; font-weight: 400; line-height: 1.4; color: var(--muted);
}
/* La teinte de la case colore aussi les petites icônes de ses lignes. */
.atelier--colonne .atelier__onglet:has(.atelier__onglet-icone--bleu) { --onglet-teinte: var(--teinte-bleu); }
.atelier--colonne .atelier__onglet:has(.atelier__onglet-icone--violet) { --onglet-teinte: var(--teinte-violet); }
.atelier--colonne .atelier__onglet:has(.atelier__onglet-icone--turquoise) { --onglet-teinte: var(--teinte-turquoise); }
.atelier--colonne .atelier__onglet:has(.atelier__onglet-icone--orange) { --onglet-teinte: var(--teinte-orange); }
.atelier--colonne .atelier__onglet:has(.atelier__onglet-icone--vert) { --onglet-teinte: var(--teinte-vert); }
/* L'état : une pastille écrite à la place du point. Son style (et ses couleurs) : components/_socle.css (.pastille-etat) ;
   ici, seulement : masquée hors du rail en colonne. */
.atelier__onglet-pastille { display: none; }
.atelier--colonne .atelier__onglet-etat { display: none; }

/* La case ouverte, à droite, à la place de l'aperçu ; sa croix remet l'aperçu. */
@media (min-width: 901px) {
    .atelier--colonne { grid-template-columns: minmax(340px, 42%) minmax(0, 1fr); grid-template-areas: "rail scene"; }
    .atelier--colonne > .atelier__panneaux { grid-area: scene; min-width: 0; }
    /* Rien d'ouvert : la zone des rubriques s'efface, elle couvrirait l'aperçu et ses deux boutons. */
    .atelier--colonne:not(.atelier--panneau-ouvert) > .atelier__panneaux { display: none; }
    .atelier--colonne.atelier--mode-fiche.atelier--panneau-ouvert > .atelier__scene { display: none; }
    .atelier--colonne .atelier__panneau--ouvert {
        padding: 1.1rem 1.35rem 1.35rem; border: 1px solid var(--panneau-bord); border-radius: var(--radius-lg, 18px);
        background: var(--panneau-fond); box-shadow: var(--shadow-1);
        animation: atelier-colonne-ouvre 0.18s ease-out;
    }
    .atelier--colonne > .atelier__scene { min-height: 420px; }
    /* Une rubrique longue (caractéristiques) n'étire pas les cases : elles gardent leur taille et restent à l'écran. */
    .atelier--colonne > .atelier__rail { align-self: start; position: sticky; top: 16px; }
    .atelier--colonne .atelier__onglets { flex: 0 0 auto; align-content: start; }
}
@keyframes atelier-colonne-ouvre { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
/* La croix du tiroir et des petites fenêtres, bien visible en colonne. */
.atelier--colonne .atelier__fermer { width: 38px; height: 38px; background: var(--panneau-fond); box-shadow: var(--shadow-1); }

/* ─── En-tête du bâtiment dans le style claude-design (batiment/voir.html.twig, .contenu__header--fiche) ───
   La carte, ses pastilles et ses icônes d'action : components/_socle.css. Restent ici le survol des icônes et l'icône
   « Supprimer » : à spécificité égale avec batiment.css (.actions_icones a.danger:hover, a.favoris:hover), chargée avant
   cette feuille mais après le socle, ils doivent passer après elle. */
.contenu__header--fiche .actions_icones > a:hover,
.contenu__header--fiche .actions_icones #add_lien:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); transform: translateY(-1px); }
.contenu__header--fiche .actions_icones > a.danger { background: color-mix(in srgb, #dc2626 8%, transparent); }
/* Téléphone : les cases restent des lignes (icône, texte, pastille), l'une sous l'autre, sous l'aperçu. */
@media (max-width: 900px) {
    .atelier--colonne .atelier__onglet { flex-direction: row; text-align: left; font-size: inherit; min-width: 0; padding: 0.8rem; }
    .atelier--colonne .atelier__onglet-libelle { font-size: 0.95rem; }
    .atelier--colonne .atelier__onglet-pastille { font-size: 0.68rem; padding: 0.15rem 0.5rem; }
}

/* La zone de la surface totale du bâtiment ([data-acl-choix], 01/11/2026 : plus de locaux à risques) ne se montre que prêtée à la page « Activité » (parcours-classement.css). */
.atelier-classement-choix { display: none; }
.atelier-classement__tete-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; }
/* Habitation, lieu de travail, IGH (17/10/2026) : les questions de l'écran caché (atelier-classement.js, blocQuestions). */
.atelier-classement__questions { display: grid; gap: 0.7rem; }
.atelier-classement__question-bloc { display: grid; gap: 0.35rem; }
.atelier-classement__question-bloc .atelier-classement__question { margin: 0; font-size: 0.88rem; }
.atelier-classement__questions .atelier-classement__tuile small { display: inline; }
.atelier-classement__tuiles--texte { display: grid; }
.atelier-classement__tuile--texte { align-items: flex-start; font-size: 0.82rem; }
.atelier-classement__tuile--texte strong { font-weight: 500; }
.atelier-classement__tuile[disabled] { cursor: progress; opacity: 0.6; }
.atelier-classement__etape--visee { border-radius: var(--radius); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
/* Rubriques ICPE : la définition de la rubrique choisie, puis une ligne par rubrique (rubrique, régime). */
.atelier-classement__rubriques { display: grid; gap: 0.45rem; }
.atelier-classement__rubriques .atelier-classement__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.45rem; }
.atelier-classement__rubriques .atelier-classement__case:first-child { flex: 1 1 16rem; min-width: 0; }
.atelier-classement__rubriques .atelier-classement__case select { width: 100%; }
.atelier-classement__seuil { display: grid; gap: 0.2rem; max-height: 9rem; overflow-y: auto; padding: 0.5rem 0.7rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.8rem; color: var(--muted); }
.atelier-classement__seuil strong { color: var(--ink); }
.atelier-classement__seuil p { margin: 0; white-space: pre-line; }
/* Le classement calculé, son « En savoir + » et les encarts « Notices disponibles » de l'écran (paires d'état du design system). */
.atelier-classement__avis { display: grid; gap: 0.45rem; }
.atelier-classement__explication { font-size: 0.85rem; color: var(--ink); }
.atelier-classement__explication summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.atelier-classement__explication p, .atelier-classement__explication ul { margin: 0.3rem 0 0; }
.atelier-classement__notice { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: var(--radius); font-size: 0.82rem; background: var(--info-bg-color); color: var(--info-color); }
.atelier-classement__notice .material-symbols-outlined { font-size: 18px; }
.atelier-classement__notice ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.atelier-classement__notice--succes { background: var(--success-bg-color); color: var(--success-color); }
.atelier-classement__notice--attention { background: var(--warning-bg-color); color: var(--warning-color); }
.atelier-classement__etat-choix { font-size: 0.8rem; color: var(--muted); }
.atelier-classement__etat-choix[data-acl-etat-choix="modifie"] { color: var(--warning-color, #b45309); font-weight: 600; }
/* Les messages de progression restent dans le schéma ; le panneau ne montre que les erreurs de ce qu'on vient d'appliquer. */
.atelier-classement__message--choix:not(.atelier-classement__message--erreur) { display: none; }
/* ─── Mode tiers : la 3D et la vue de dessus côte à côte (maquette-batiment.js, preparerDeux ; 8d, décision du pilote du 16/10/2026) ───
   Deux cases `.mq-vue` sur toute la zone. « Agrandir » donne toute la zone à l'une des deux. */
.atelier--fiche.atelier--mode-tiers .mq-vues--tiers {
    position: absolute; left: 16px; right: 16px; top: 64px; bottom: 16px; width: auto; height: auto; min-height: 0;
}
.atelier--fiche .mq-vues--deux .mq-vue-corps > .atelier__maquette {
    position: relative; inset: auto; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; height: 100%; transform: none; opacity: 1;
}
.mq-vues--deux .mq-vue-corps > .sch-svg { max-height: none; }
/* Le dessin 3D déborde volontiers de son cadre (sol, rues) : il est coupé à sa case, sans recouvrir l'en-tête. */
.mq-vues--deux .mq-vue-corps { overflow: hidden; }
/* La barre d'orientation de la 3D vit dans l'en-tête de sa case (elle suit donc la case agrandie) : la barre entière, entrée
   comprise (sur deux lignes si la case est étroite). */
.mq-vues--deux .mq-vue-tete .atelier__orientation {
    position: static; margin-left: auto; padding: 0 0.2rem; background: transparent; box-shadow: none; min-width: 0;
}
.mq-vues--deux .mq-vue-tete .atelier__orientation-vue { min-width: 0; }
.mq-vues--tiers .mq-vue--3d .mq-vue-tete { flex-wrap: wrap; row-gap: 2px; }
/* Mode tiers : la boussole de chaque vue dit déjà où est le nord ; la ligne du haut garde la place de l'entrée. */
.mq-vues--tiers .mq-vue-tete .atelier__orientation-vue { display: none !important; }
@media (max-width: 850px) {
    .atelier--fiche.atelier--mode-tiers .mq-vues--tiers { left: 8px; right: 8px; top: 52px; bottom: 8px; width: auto; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
    /* L'orientation de la 3D passe sous le titre et « Agrandir » : une ligne à elle, centrée. */
    .mq-vues--tiers .mq-vue--3d .mq-vue-tete .atelier__orientation { order: 3; flex: 1 0 100%; justify-content: center; margin-left: 0; }
    .mq-vues--deux .mq-vue-tete .atelier__orientation-vue { display: none; }
}
.sch-bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ── Le panneau des configurations de tiers, DANS le mode tiers (décision du pilote du 01/11/2026 ; atelier-edition.js :
   brancherPanneauConfigs). À gauche de la maquette plein écran, la même hauteur que les deux vues, qui se décalent pour lui laisser la
   place. Les cartes sont celles de la galerie (.atelier-configs__*), sur une colonne. Sur téléphone, il couvre les vues (fermé d'abord). */
.atelier__configs-panneau { display: none; }
.atelier--fiche.atelier--mode-tiers .atelier__configs-panneau:not([hidden]) {
    position: absolute; z-index: 6; left: 16px; top: 64px; bottom: 16px; width: 300px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem 0.85rem 0.9rem; overflow: hidden;
    border: 1px solid var(--panneau-bord); border-radius: var(--panneau-rayon); background: var(--panneau-fond); box-shadow: var(--panneau-ombre);
}
.atelier__configs-panneau-tete { display: flex; align-items: flex-start; gap: 0.6rem; }
.atelier__configs-panneau-icone {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 20px;
}
.atelier__configs-panneau-titres { flex: 1; min-width: 0; }
.atelier__configs-panneau-titre { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.atelier__configs-panneau-sous-titre { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.atelier__configs-panneau-fermer {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer;
}
.atelier__configs-panneau-fermer:hover, .atelier__configs-panneau-fermer:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); outline: none; }
.atelier__configs-panneau-aide {
    display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.4rem 0.6rem; border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--muted); font-size: 0.78rem; line-height: 1.35;
}
.atelier__configs-panneau-aide .material-symbols-outlined { flex: none; color: var(--primary); font-size: 18px; }
.atelier__configs-panneau-galerie { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: 2px; }
.atelier__configs-panneau-galerie .atelier-configs__cartes { grid-template-columns: 1fr; }
.atelier__configs-panneau-galerie .atelier-configs__vignette { height: 104px; }
.atelier__configs-panneau-galerie .atelier-configs__avis { top: 0; }
.atelier--fiche.atelier--mode-tiers .atelier__scene[data-configs-panneau] .mq-vues--tiers { left: calc(16px + 300px + 12px); }
@media (max-width: 850px) {
    .atelier--fiche.atelier--mode-tiers .atelier__configs-panneau:not([hidden]) { left: 8px; right: 8px; top: 52px; bottom: 8px; width: auto; }
    .atelier--fiche.atelier--mode-tiers .atelier__scene[data-configs-panneau] .mq-vues--tiers { left: 8px; }
    .atelier__configs-panneau-galerie .atelier-configs__cartes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── Le panneau « Tiers de cette notice », DANS le mode tiers (demande du pilote du 04/11/2026 ; public/js/notice-tiers-fiche.js). Il n'existe
   que si la fiche a été ouverte depuis une notice (`?mode=tiers&notice=<id>`). À droite de la maquette plein écran, que les deux vues
   laissent libre ; sur téléphone, une bande en bas, repliée d'abord, qui se déplie par-dessus les vues. Mêmes variables que le panneau des
   configurations (clair et sombre). */
.atelier__notice-tiers { display: none; }
.atelier--fiche.atelier--mode-tiers .atelier__notice-tiers {
    position: absolute; z-index: 6; right: 16px; top: 64px; width: 280px; max-height: calc(100% - 80px); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem 0.85rem 0.9rem; overflow: hidden;
    border: 1px solid var(--panneau-bord); border-radius: var(--panneau-rayon); background: var(--panneau-fond); box-shadow: var(--panneau-ombre);
}
.atelier__notice-tiers-tete { display: flex; align-items: flex-start; gap: 0.6rem; }
.atelier__notice-tiers-icone {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 20px;
}
.atelier__notice-tiers-titres { flex: 1; min-width: 0; }
.atelier__notice-tiers-titre { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.atelier__notice-tiers-sous-titre { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.atelier__notice-tiers-replier {
    flex: none; display: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer;
}
.atelier__notice-tiers-replier:hover, .atelier__notice-tiers-replier:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); outline: none; }
.atelier__notice-tiers-corps { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; overflow-y: auto; }
.atelier__notice-tiers-aide, .atelier__notice-tiers-compte { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.atelier__notice-tiers-compte { color: var(--ink); font-weight: 600; }
.atelier__notice-tiers-note {
    display: flex; align-items: flex-start; gap: 0.4rem; margin: 0; padding: 0.5rem 0.6rem; border-radius: 10px;
    background: var(--warning-bg-color); color: var(--warning-color); font-size: 0.8rem; line-height: 1.4;
}
.atelier__notice-tiers-note .material-symbols-outlined { flex: none; font-size: 18px; }
.atelier__notice-tiers-liste { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.atelier__notice-tiers-ligne {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.55rem 0.65rem;
    border: 1px solid var(--panneau-bord); border-radius: 10px; background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.atelier__notice-tiers-ligne--retire { background: var(--warning-bg-color); }
.atelier__notice-tiers-nom { color: var(--ink); font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.atelier__notice-tiers-resume { color: var(--muted); font-size: 0.76rem; }
.atelier__notice-tiers-etat { color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.atelier__notice-tiers-ligne--retire .atelier__notice-tiers-etat { color: var(--warning-color); }
.atelier__notice-tiers-ligne .btn { justify-self: start; margin-top: 0.15rem; }
.atelier__notice-tiers-message { margin: 0; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--success-bg-color); color: var(--success-color); font-size: 0.78rem; line-height: 1.4; }
.atelier__notice-tiers-message--erreur { background: var(--danger-bg-color); color: var(--danger-color-text); }
.atelier__notice-tiers-retour { align-self: flex-start; }
/* Section « Tiers d'une autre notice de ce bâtiment » : même liste que celle de la notice, sous un titre ; masquée par le script quand elle est vide. */
.atelier__notice-tiers-autres { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--panneau-bord); }
.atelier__notice-tiers-autres[hidden] { display: none; }
.atelier__notice-tiers-autres-titre { margin: 0; color: var(--ink); font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.atelier--fiche.atelier--mode-tiers .atelier__scene[data-notice-tiers] .mq-vues--tiers { right: calc(16px + 280px + 12px); }
@media (max-width: 850px) {
    .atelier--fiche.atelier--mode-tiers .atelier__notice-tiers {
        right: 8px; left: 8px; top: auto; bottom: 8px; width: auto; max-height: 52%;
    }
    /* Cible tactile de 44 px (06/11/2026, téléphone) : c'est le seul bouton qui déplie la bande. */
    .atelier__notice-tiers-replier { display: grid; width: 44px; height: 44px; margin: -6px -6px -6px 0; }
    /* La bulle d'aide du site (en bas à droite) couvre le coin de la bande : le titre et la flèche restent à sa gauche. */
    .atelier__notice-tiers-tete { padding-right: 64px; }
    .atelier__notice-tiers--replie .atelier__notice-tiers-corps, .atelier__notice-tiers--replie .atelier__notice-tiers-retour { display: none; }
    .atelier__notice-tiers--replie .atelier__notice-tiers-replier .material-symbols-outlined { transform: rotate(180deg); }
    .atelier__notice-tiers--replie .atelier__notice-tiers-sous-titre { display: none; }
    .atelier--fiche.atelier--mode-tiers .atelier__scene[data-notice-tiers] .mq-vues--tiers { right: 8px; bottom: 96px; }
}

/* ── Rubrique Description : le texte prend la plus grande part du panneau de droite (16/10/2026) ──
   (Hauteur imposée au panneau puis retirée le 06/11/2026 : voir plus bas.) Sur téléphone, l'éditeur garde une hauteur confortable et la page défile.
   06/11/2026 (retour du pilote) :
   - un seul cadre : la carte de la description (son liseré bleu en haut) ; le panneau qui la porte n'a plus ni bord, ni fond, ni
     ombre, ni marge intérieure, sur ordinateur comme sur téléphone ;
   - l'éditeur garde toujours une vraie hauteur (12rem au moins) : avec les champs du bâtiment et le message des « à compléter »,
     il se réduisait à une ligne (« Le bâtiment est composé de : ») sans qu'on puisse le faire défiler. Si tout ne tient pas, c'est
     le panneau qui défile. */
.atelier--fiche .atelier__panneau[data-atelier-vue="description"] { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.atelier__panneau[data-atelier-vue="description"] #description-batiment { margin-bottom: 0; }
.atelier__panneau[data-atelier-vue="description"] .description-batiment__actions { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.atelier__panneau[data-atelier-vue="description"] [data-carac-enregistrer-description] { margin-left: auto; }
.atelier .description-batiment #rich-editor { min-height: 50dvh; resize: none; }
/* 06/11/2026 (retour du pilote : un grand blanc sous la description, l'éditeur coupé à quelques lignes) : le panneau n'a plus de hauteur
   imposée (clamp(520px, 100dvh - 14rem, 1200px), posée le 01/11/2026). Elle laissait du vide sous les champs quand le texte est replié,
   et, avec les rappels des locaux à risques et de l'accessibilité venus s'ajouter aux champs du bâtiment, le plafond de 30 % de la
   fenêtre faisait défiler les champs pendant que l'éditeur se réduisait. Le panneau prend la hauteur de son contenu (la page défile, les
   cases restent à l'écran : le rail est collant) ; l'éditeur a une hauteur confortable, grandit avec le texte et ne défile en
   lui-même qu'au-delà de 70 % de la fenêtre ; les champs du bâtiment gardent leur hauteur naturelle, sans défilement propre. */
@media (min-width: 901px) {
    .atelier--colonne .atelier__panneau--ouvert[data-atelier-vue="description"] { height: auto; overflow: visible; }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .description-caracteristiques,
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] #description-batiment { height: auto; min-height: 0; box-sizing: border-box; }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] #description-batiment { display: flex; flex-direction: column; }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .rich-editor-wrapper { flex: 0 0 auto; display: flex; flex-direction: column; margin-bottom: 0; }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .description-batiment #rich-editor {
        flex: 0 0 auto;
        min-height: clamp(260px, 40dvh, 520px);
        max-height: 70dvh;
        overflow-y: auto;
    }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .description-batiment__champs,
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .description-batiment--texte-ouvert .description-batiment__champs { flex: 0 0 auto; max-height: none; overflow: visible; }
    .atelier--colonne .atelier__panneau[data-atelier-vue="description"] .description-batiment__texte:not([hidden]) { flex: 0 0 auto; display: flex; flex-direction: column; }
}

/* ─── Page « Activité » : le VRAI schéma du bâtiment, classement dedans (atelier-classement.js, cases() ; partie 11b du 16/10/2026) ───
   Un bâtiment en coupe, comme le schéma de façade de la fiche (dessinerSchema) : « + niveau » et le toit (trait épais) en haut,
   les étages empilés (chacun une bande à la couleur de son activité, son nom R+2 / R+1 / RDC à gauche), le trait du sol avec la flèche
   verte « Entrée », les sous-sols dessous (bande brune), « + sous-sol » en bas. Les champs de chaque étage (activité, mode de calcul,
   valeur, public, personnel, surface…) sont DANS sa bande ; à droite de l'étage, un petit ⊕ (une autre activité) et l'effectif.
   Seul le conteneur change : les champs sont ceux des cartes de 10c. */
.acl-batiment {
    --acl-entree: 4.2rem; --acl-nom: 2.6rem; --acl-cote: 4.6rem; --acl-gap: 0.4rem;
    --acl-gauche: calc(var(--acl-entree) + var(--acl-nom) + 2 * var(--acl-gap)); --acl-droite: calc(var(--acl-cote) + var(--acl-gap));
    gap: 0; padding: 0.3rem 0 0.5rem;
}
.acl-haut { display: flex; justify-content: flex-end; margin: 0 var(--acl-droite) 0.45rem var(--acl-gauche); }
.acl-toit { height: 8px; margin: 0 calc(var(--acl-droite) - 8px) 6px calc(var(--acl-gauche) - 8px); border-radius: 3px; background: var(--text-color-main); opacity: 0.75; }
.acl-batiment > .atelier-classement__carte {
    display: grid; grid-template-columns: var(--acl-entree) var(--acl-nom) minmax(0, 1fr) var(--acl-cote); column-gap: var(--acl-gap); align-items: stretch;
    overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.acl-batiment > .atelier-classement__carte + .atelier-classement__carte { margin-top: 6px; }
.acl-batiment .atelier-classement__carte-titre {
    grid-column: 2; grid-row: 1; flex: none; align-self: center; flex-direction: row; justify-content: flex-end; padding: 0; margin: 0;
    background: none; border: 0; font-size: 0.95rem; font-weight: 700; color: var(--muted); text-align: right;
}
.acl-batiment .atelier-classement__carte-titre .material-symbols-outlined { display: none; }
.acl-batiment .atelier-classement__carte-corps {
    grid-column: 3; grid-row: 1; align-content: center; gap: 0.25rem; padding: 0.4rem 0.5rem; min-width: 0;
    border: 2px solid var(--mq-act, var(--primary)); border-radius: 6px;
    background: color-mix(in srgb, var(--mq-act, var(--primary)) 14%, var(--surface, #fff));
}
.acl-batiment .atelier-classement__carte--vide .atelier-classement__carte-corps { border-style: dashed; border-color: var(--primary); background: transparent; }
.acl-batiment .atelier-classement__carte--sous-sol .atelier-classement__carte-corps {
    background: color-mix(in srgb, #a16207 14%, color-mix(in srgb, var(--mq-act, #a16207) 10%, var(--surface, #fff)));
    border-color: color-mix(in srgb, #a16207 55%, var(--mq-act, var(--border-color)));
}
.acl-batiment .atelier-classement__carte--a-preciser .atelier-classement__carte-corps { border-color: var(--warning-border-color, #ffc107); background: color-mix(in srgb, var(--warning-border-color, #ffc107) 12%, var(--surface, #fff)); }
/* Le niveau choisi sur la 3D (ou survolé ici) : la bande ressort, rien ne bouge. */
.acl-batiment .atelier-classement__carte--choisie { border: 0; box-shadow: none; }
.acl-batiment .atelier-classement__carte--choisie .atelier-classement__carte-corps { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mq-act, var(--primary)) 38%, transparent); }
.acl-batiment .atelier-classement__carte--choisie .atelier-classement__carte-titre { color: var(--ink); }
/* Une activité cliquée sur la 3D de la page « Activité » (atelier-classement.js, montrerNiveau) : sa ligne, mise en avant dans la carte. */
.atelier-classement__carte .atelier-classement__ligne--choisie { background: color-mix(in srgb, var(--mq-act, var(--primary)) 12%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mq-act, var(--primary)) 55%, transparent); border-radius: 6px; }
/* À droite de l'étage : le ⊕ (une autre activité à ce niveau) et l'effectif du niveau. */
.acl-cote { grid-column: 4; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 0; }
.acl-plus-activite {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--primary); border-radius: 50%;
    background: var(--surface, #fff); color: var(--primary); cursor: pointer;
}
.acl-plus-activite .material-symbols-outlined { font-size: 18px; }
.acl-plus-activite:hover, .acl-plus-activite:focus-visible { background: color-mix(in srgb, var(--primary) 14%, var(--surface, #fff)); outline: none; }
.acl-effectif { font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* L'entrée : une flèche verte, à gauche de l'étage de la porte. */
.acl-entree { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 0.1rem; margin-bottom: 0.2rem; color: var(--teinte-vert); font-size: 0.78rem; font-weight: 700; }
.acl-entree .material-symbols-outlined { font-size: 30px; font-weight: 700; }
/* Le trait du sol (le terrain), sous le rez-de-chaussée ; les sous-sols viennent dessous. */
.acl-terrain { position: relative; margin: 6px 0; border-top: 3px solid var(--text-color-main); }
.acl-terrain-note { position: absolute; left: calc(var(--acl-entree) + 0.4rem); top: 0.15rem; font-size: 0.75rem; color: var(--muted); }
.acl-terrain:has(.acl-terrain-note:not(:empty)) { margin-bottom: 1.2rem; }
.acl-batiment > .atelier-classement__plus[data-acl-plus-niveau="bas"] { justify-self: end; margin: 0.5rem var(--acl-droite) 0 var(--acl-gauche); }
.acl-batiment > .atelier-classement__total { margin: 0.6rem var(--acl-droite) 0 var(--acl-gauche); }
.acl-batiment .atelier-classement__ligne--grisee { margin-left: 0.8rem; }
/* Les intitulés longs (« Nombre de personnes dans les chambres ou appartements ») tiennent sur UNE ligne (deux sur téléphone) : l'étage ne
   grandit pas pour un libellé (l'intitulé entier est en infobulle). */
.acl-batiment .atelier-classement__case > span:first-child { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .acl-batiment .atelier-classement__case > span:first-child { -webkit-line-clamp: 2; } }
.acl-batiment .atelier-classement__carte .atelier-classement__ligne { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
@media (max-width: 600px) {
    /* Téléphone : le bâtiment reste un bâtiment (étages empilés, nom à gauche) ; les champs de l'étage passent en grille, et le ⊕ avec
       l'effectif se rangent sous la bande, à droite. */
    .acl-batiment { --acl-entree: 0px; --acl-nom: 2.6rem; --acl-cote: 0px; --acl-gap: 0.4rem; --acl-gauche: calc(var(--acl-nom) + var(--acl-gap)); --acl-droite: 0px; }
    .acl-batiment > .atelier-classement__carte { grid-template-columns: var(--acl-nom) minmax(0, 1fr); grid-template-rows: auto auto; flex-direction: initial; }
    .acl-batiment .atelier-classement__carte-titre { grid-column: 1; }
    .acl-batiment .atelier-classement__carte-corps { grid-column: 2; }
    .acl-cote { grid-column: 2; grid-row: 2; flex-direction: row; justify-content: flex-end; gap: 0.5rem; }
    .acl-cote:empty { display: none; }
    .acl-entree { grid-column: 1; grid-row: 1; align-self: end; font-size: 0.62rem; margin-bottom: 0; }
    .acl-entree .material-symbols-outlined { font-size: 20px; }
    .acl-terrain-note { left: calc(var(--acl-nom) + var(--acl-gap)); }
    .acl-haut { margin-left: var(--acl-gauche); margin-right: 0; }
    .acl-toit { margin: 0 -4px 6px calc(var(--acl-gauche) - 4px); }
}

/* ─── Partie 13b (17/10/2026) : la rubrique « Activité » de la fiche, et le parcours « nouveau bâtiment » ─── */
/* « Activité » : le schéma du bâtiment en grand (lecture seule, maquette-batiment.js, schemaActivite), UN seul bouton, puis le récapitulatif
   plus compact dessous. */
.atelier__activite-schema {
    margin: 0 0 0.9rem; padding: 0.5rem; box-sizing: border-box; overflow: hidden;
    border: 1px solid var(--panneau-bord); border-radius: 14px; background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}
.atelier__activite-schema > .sch-svg { display: block; width: 100%; height: auto; max-height: min(52vh, 480px); }
/* Le récapitulatif, en plus petit : titres de groupe, lignes et pastilles réduits d'un cran. */
.atelier__carte-infos--recap { font-size: 0.8rem; }
.atelier .atelier__carte-infos--recap .informations p { font-size: 0.8rem; padding-top: 3px; padding-bottom: 3px; }
.atelier .atelier__carte-infos--recap .infos-batiment__sous-titre { font-size: 0.82rem; padding-top: 4px; padding-bottom: 4px; }
.atelier .atelier__carte-infos--recap .infos-batiment__etat { font-size: 0.68rem; padding: 0 6px; }
.atelier .atelier__carte-infos--recap .informations span.material-symbols-outlined { font-size: 16px; }

/* Le schéma attend la première validation des activités (atelier-classement.js, majAssistant) : masqué. */
.atelier-classement[hidden] { display: none !important; }

/* Neuf ou existant dans la rubrique Informations (atelier_neuf_existant.html.twig) : un espace sous la carte, le formulaire en dessous. */
.atelier__fiche--construction { margin-top: 0.9rem; }
.atelier__construction-hote { margin-top: 0.75rem; }
.atelier__construction-hote .atelier__actions { display: flex; gap: 0.5rem; }

/* ─── Le schéma du bâtiment de la page « Activité » (décisions du pilote des 17 et 18/10/2026) ──────────────────────────────────────
   2. La « Surface totale du bâtiment », obligatoire, en tête du schéma (atelier-classement.js, blocSurfaceBatiment, 01/11/2026) ;
      elle remplace la carte « Locaux à risques » (plus aucun local dans le schéma). */
.acl-bloc-surface { display: grid; gap: 0.35rem; margin-top: 0.9rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface, #fff); }
.acl-bloc-surface .atelier-classement__titre { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.acl-bloc-surface .atelier-classement__titre .material-symbols-outlined { color: var(--primary); }
.acl-surface-batiment__champ.form-control { max-width: 12rem; }
.acl-surface-batiment__champ[aria-invalid="true"] { border-color: var(--danger-color, #dc2626); }
.acl-bloc-surface .atelier-classement__message, .acl-bloc-surface .atelier-classement__aide { margin: 0; }
.acl-surface-batiment__erreur[hidden] { display: none; }

/* 5. « + Activité » : un vrai bouton avec libellé, bien visible sur chaque niveau. */
.acl-ajouts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.acl-ajout { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 32px; padding: 0.25rem 0.7rem 0.25rem 0.45rem; border: 1.5px solid var(--primary);
    border-radius: 999px; background: var(--surface, #fff); color: var(--primary); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.acl-ajout .material-symbols-outlined { font-size: 18px; }
/* « + Activité » caché tant que la liste « — choisir — » du niveau est affichée (atelier-classement.js, plusActiviteMontre). */
.acl-ajout[hidden] { display: none; }
.acl-ajout:hover, .acl-ajout:focus-visible { background: color-mix(in srgb, var(--primary) 12%, var(--surface, #fff)); outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 1px; }

/* 6 et 7. La colonne de droite de chaque niveau (l'effectif). Plus de « Surface totale » par niveau depuis le 01/11/2026. */
.acl-batiment { --acl-cote: 6.2rem; }
@media (max-width: 600px) {
    .acl-batiment { --acl-cote: 0px; }
}

/* 6. Schéma du bâtiment (retour du pilote du 18/10/2026, point 4).
      a) Un message une seule fois : celui sous « Vérifier le classement ».
      b) Après « Vérifier », une case que master exige et qui est vide en rouge ; une case facultative vide (surface d'une activité,
         d'un local) en orange, comme la « Surface totale » d'un niveau sans aucune surface.
      c) Chaque ligne d'activité a sa case « Surface (m²) » à la même place : la rangée a toujours neuf colonnes (activité et article
         sur deux), les cases s'alignent d'une ligne à l'autre, sous-lignes comprises. */
.atelier-classement__ligne .atelier-classement__case.atelier-classement__case--manque { box-shadow: 0 0 0 2px var(--danger-color, #dc2626); background: var(--danger-bg-color, #fde8e8); color: var(--danger-color-text, #b91c1c); }
.atelier-classement__case--manque .form-control { border-color: var(--danger-color, #dc2626); }
.atelier-classement__ligne .atelier-classement__case.atelier-classement__case--facultatif { box-shadow: 0 0 0 2px var(--warning-color, #b45309); background: var(--warning-bg-color, #fff3cd); color: var(--warning-color, #b45309); }
@media (min-width: 901px) {
    .acl-batiment .atelier-classement__carte .atelier-classement__ligne { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

/* L'alternative texte de la 3D (maquette-batiment.js, majLecture) : masquée (.visually-hidden), elle se montre quand le clavier
   entre dans ses boutons, en carte posée en bas à gauche de la 3D, pour qu'on voie où est le focus. */
.mq-lecture:focus-within {
    width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
    left: 12px; bottom: 12px; z-index: 5; max-width: min(360px, calc(100% - 24px));
    padding: 10px 12px; background: var(--panneau-fond); color: var(--ink);
    border: 1px solid var(--panneau-bord); border-radius: var(--radius); box-shadow: var(--panneau-ombre-forte);
}
.mq-lecture p { margin: 0 0 6px; font-weight: 600; }
.mq-lecture ul { margin: 0; padding-left: 18px; }
.mq-lecture button { vertical-align: top; background: none; border: 0; padding: 2px 0; color: var(--primary); text-align: left; cursor: pointer; font: inherit; }
.mq-lecture button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══ Les cases de la fiche du 20/10/2026 (batiment/partials/atelier.html.twig, _rail.html.twig, public/js/cases-fiche.js) ═══
   Informations, Contacts, Classement : des cases-liens (une page, la page « Activité »). Tiers : une case-question Oui / Non.
   Dégagements : une case-lien qui ouvre la fenêtre du tableau. États de plus : « Facultatif » (neutre, gris) et « À renseigner » en
   rouge (bloquant) ; leurs pastilles sont dans components/_socle.css. */
.atelier__onglet-etat--neutre { background: var(--muted); }
.atelier__onglet-etat--bloquant { background: var(--danger-color-text); }
/* La case-question ne se clique pas en entier : seuls Oui et Non répondent. */
.atelier--colonne .atelier__onglet--question { cursor: default; }
.atelier--colonne .atelier__onglet--question:hover,
.atelier--colonne .atelier__onglet--question:focus-within { transform: none; box-shadow: var(--shadow-1); }
.atelier--colonne .atelier__onglet--question .atelier__onglet-libelle { cursor: default; }
.atelier__case-question { display: grid; gap: 0.45rem; margin: 0.35rem 0 0; }
.atelier__case-question-texte { font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.atelier__case-question-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.atelier__case-question-tuile { min-width: 4.5rem; justify-content: center; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.9rem; font-weight: 600; }
.atelier__case-question-tuile:disabled { opacity: 0.55; cursor: not-allowed; }
.atelier__case-question-tuile[aria-busy="true"] { cursor: progress; }
.atelier__case-question-message { font-size: 0.8rem; font-weight: 500; color: var(--danger-color-text); }
.atelier__case-question-message[hidden] { display: none; }
/* Case « Tiers » : le lien « Ouvrir le mode tiers » sous Oui / Non (01/11/2026, _rail.html.twig ; caché après Non, cases-fiche.js). */
.atelier__case-mode { display: inline-flex; align-items: center; gap: 0.3rem; justify-self: start; color: var(--primary); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.atelier__case-mode .material-symbols-outlined { font-size: 18px; }
.atelier__case-mode:hover, .atelier__case-mode:focus-visible { text-decoration: underline; }
.atelier__case-mode[hidden] { display: none; }
/* Une case-lien sans droit de modification (Dégagements en lecture) : elle informe, elle ne mène nulle part. */
.atelier--colonne .atelier__onglet--lien[aria-disabled="true"] { cursor: default; }
.atelier--colonne .atelier__onglet--lien[aria-disabled="true"]:hover { transform: none; box-shadow: var(--shadow-1); }

/* La fenêtre du tableau des dégagements depuis la fiche (batiment/partials/fiche_degagements.html.twig) : mêmes listes que dans la
   notice (batiment.css, .degagement-item) ; ici, seulement l'en-tête et la phrase d'aide. */
.fiche-degagements__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fiche-degagements__tete h2 { margin: 0; }
.fiche-degagements__aide { margin: 0.5rem 0 1rem; font-size: 0.9rem; color: var(--muted); }

/* ─── « Description et caractéristiques complémentaires », sous la fiche (batiment/partials/fiche_description_case.html.twig) ───
   Une carte du socle (surface, bord, rayon large, ombre douce), comme la fiche au-dessus ; ses deux textes côte à côte au bureau,
   l'un sous l'autre au téléphone. */
.fiche-case {
    margin: 0 0 1.5rem; padding: 1.1rem 1.35rem 1.25rem;
    background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-1);
}
.fiche-case__tete { display: flex; align-items: flex-start; gap: 0.9rem; }
.fiche-case__icone {
    display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; font-size: 24px;
    color: var(--teinte-orange); background: color-mix(in srgb, var(--teinte-orange) 13%, transparent);
}
.fiche-case__titres { flex: 1 1 auto; min-width: 0; }
.fiche-case__titre { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fiche-case__lien { color: inherit; text-decoration: none; }
.fiche-case__lien:hover, .fiche-case__lien:focus-visible { color: var(--primary); text-decoration: underline; }
.fiche-case__aide { margin: 0.25rem 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--muted); }
/* Une seule colonne, toute la largeur de la case (demande du pilote du 01/11/2026) : depuis le 28/10/2026 la case ne porte plus que
   le texte de la description, la seconde colonne (installations techniques) restait vide et coupait le texte en deux. */
.fiche-case__textes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fiche-case__texte {
    display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; padding: 0.8rem 1rem;
    border: 1px solid var(--panneau-bord); border-radius: var(--radius, 14px); background: var(--panneau-fond);
}
.fiche-case__texte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.fiche-case__texte-tete .material-symbols-outlined { font-size: 20px; color: var(--teinte-orange); }
.fiche-case__texte-tete strong { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; color: var(--ink); }
.fiche-case__extrait, .fiche-case__vide, .fiche-case__texte-complet {
    margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere;
}
.fiche-case__vide { font-style: italic; }
.fiche-case__lire summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--primary); }
.fiche-case__lire[open] summary { margin-bottom: 0.35rem; }
.fiche-case__texte-complet { color: var(--ink); white-space: pre-line; }
.fiche-case__texte-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.25rem; }
.fiche-case__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
/* Aucune notice possible pour ce domaine (batiment/partials/fiche_notice_indisponible.html.twig) : la même carte, en neutre, posée
   dans l'onglet Sécurité incendie ou Accessibilité. */
.fiche-notice-indispo { margin: 1rem 0 0; box-shadow: none; }
.fiche-notice-indispo__icone { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.fiche-notice-indispo__message { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
.fiche-notice-indispo__actions { justify-content: flex-start; margin-top: 0.85rem; }
.fiche-notice-indispo .notice-template-pending__subscribed { color: var(--etat-ok); }
@media (max-width: 900px) {
    .fiche-case { padding: 1rem; }
    .fiche-case__textes { grid-template-columns: minmax(0, 1fr); }
    .fiche-case__tete { flex-wrap: wrap; }
    .fiche-case__actions { justify-content: stretch; }
    .fiche-case__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* Bandeau vert « Description enregistrée » en haut de l'écran (caracteristiques-batiment.js, bandeauSucces ; pilote, 06/11/2026). */
.bandeau-succes {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: var(--teinte-vert);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .2);
    animation: bandeau-succes-entre .25s ease-out;
    transition: opacity .4s ease, transform .4s ease;
}
.bandeau-succes .material-symbols-outlined { font-size: 1.3rem; }
.bandeau-succes--sort { opacity: 0; transform: translate(-50%, -.6rem); }
@keyframes bandeau-succes-entre { from { opacity: 0; transform: translate(-50%, -.6rem); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-succes { animation: none; transition: none; } }