/*
 * Theme partage de Ciblotheque (architecture/Architecture.md, "Systeme de theme partage").
 * Un module ne definit jamais sa propre couleur ou son propre style de base :
 * il compose exclusivement a partir de ces variables et de ces classes communes.
 *
 * Valeurs alignees sur la Charte graphique Ciblotheque v1.0 (dossier "Charte Graphique",
 * mai 2024) : interface sombre, accent jaune reserve aux actions et etats-cles, trois
 * polices (Barlow Condensed / Inter / IBM Plex Mono) auto-hebergees pour fonctionner hors
 * ligne (voir DEMARRAGE.md).
 */

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/barlow-condensed-semibold.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/barlow-condensed-bold.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/fonts/barlow-condensed-extrabold.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/inter-medium.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/inter-semibold.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-regular.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-medium.woff2") format("woff2");
}

:root {
    /* Fond et surfaces */
    --couleur-fond: #0B0D10;
    --couleur-fond-secondaire: #14181D;
    --couleur-fond-carte: #1B2128;
    --couleur-bordure: #2B323B;

    /* Texte */
    --couleur-texte: #F3F5F7;
    --couleur-texte-attenue: #A9B2BD;

    /* Accent (reserve aux actions principales, selection, elements-cles - jamais un aplat decoratif) */
    --couleur-primaire: #E0B100;
    --couleur-primaire-survol: #F5C84C;
    --couleur-primaire-claire: rgba(224, 177, 0, 0.14);

    /* Couleurs d'etat, usage fonctionnel strict */
    --couleur-succes: #62C370;
    --couleur-succes-claire: rgba(98, 195, 112, 0.16);
    --couleur-alerte: #D98E04;
    --couleur-alerte-claire: rgba(217, 142, 4, 0.16);
    --couleur-danger: #C94A4A;
    --couleur-danger-claire: rgba(201, 74, 74, 0.16);
    --couleur-information: #4C8BF5;
    --couleur-information-claire: rgba(76, 139, 245, 0.16);

    /* Espacements (echelle de la charte : S1 a S5) */
    --espace-xs: 0.5rem;
    --espace-s: 1rem;
    --espace-m: 1.5rem;
    --espace-l: 2rem;
    --espace-xl: 3rem;

    /* Rayons */
    --arrondi: 0.5rem;
    --radius-carte: 0.625rem;
    --radius-pill: 999px;
    --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.35);

    /* Typographie */
    --police: "Inter", system-ui, -apple-system, sans-serif;
    --police-titre: "Barlow Condensed", sans-serif;
    --police-donnees: "IBM Plex Mono", Consolas, monospace;
    --taille-texte: 1rem;
    --taille-titre: 1.5rem;
}

* { box-sizing: border-box; }

/* Jamais de fleches incrementielles sur les champs numeriques (demande explicite du
   PO, partout sur le site) : la saisie se fait toujours au clavier. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Jamais le rendu natif "boite de liste" des select (demande explicite du PO) : juste
   une petite fleche discrete a droite pour indiquer qu'une liste est disponible, le
   champ ressemble sinon a un simple champ de saisie. */
/* !important sur les seules proprietes touchees par les raccourcis background/padding
   utilises un peu partout pour la couleur de fond des champs (ces raccourcis remettent
   sinon background-image a "none" et padding-right a leur propre valeur, quelle que
   soit la specificite) : la fleche doit rester visible partout, sans dupliquer cette
   regle dans chacun de ces blocs. */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B2BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 0.8rem !important;
    padding-right: 2rem !important;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: var(--taille-texte);
    line-height: 1.5;
    color: var(--couleur-texte);
    /* Toile exterieure au cadre : quasi noir pur, plus sombre que le fond du cadre lui-meme,
       pour bien detacher l'application (voir .app-cadre) du canevas autour. */
    background-color: #030405;
}

/* Cadre general de l'application : toute l'interface (nav + contenu) vit dans un seul
   cadre borde, pose sur le fond de page - jamais une suite de cadres empiles a l'interieur. */
.app-cadre {
    width: 80%;
    margin: var(--espace-m) auto;
    background-color: var(--couleur-fond);
    /* Grille technique tres discrete (charte "04. Fond et texture") : evite l'aplat, jamais sous du texte dense. */
    background-image:
        linear-gradient(rgba(243, 245, 247, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 245, 247, .035) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte);
    overflow: hidden;
    min-height: calc(100vh - 2 * var(--espace-m));
}

h1, h2, h3 {
    font-family: var(--police-titre);
    line-height: 1.2;
    text-wrap: balance;
}
h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

a { color: var(--couleur-primaire); }
a:hover { color: var(--couleur-primaire-survol); }

:focus-visible {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

.entete {
    display: flex;
    align-items: center;
    gap: var(--espace-l);
    padding: var(--espace-s) var(--espace-l);
    background: var(--couleur-fond);
    border-bottom: 1px solid var(--couleur-bordure);
}

.entete-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-xs);
    font-family: var(--police-titre);
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: var(--taille-titre);
    text-decoration: none;
    color: var(--couleur-texte);
}
.entete-logo img { width: 1.75rem; height: 1.75rem; }

.entete-nav { display: flex; gap: var(--espace-m); margin-left: auto; }
.entete-nav a { text-decoration: none; color: var(--couleur-texte-attenue); font-weight: 500; }
.entete-nav a:hover { color: var(--couleur-texte); }
.entete-nav {
    align-items: stretch;
    gap: 0.85rem;
    margin-left: 0;
    min-width: 0;
}
.entete-nav > a,
.entete-menu-groupe > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.entete-nav a.est-actif { color: var(--couleur-primaire); }
.entete-nav__importer {
    min-height: 2.55rem;
    padding: 0.65rem 1.05rem;
    border: 1px solid var(--couleur-primaire);
    border-radius: var(--arrondi);
    background: var(--couleur-primaire);
    color: var(--couleur-fond) !important;
    font-weight: 800 !important;
}
.entete-nav__importer:hover,
.entete-nav__importer:focus-visible {
    background: var(--couleur-primaire-survol);
    border-color: var(--couleur-primaire-survol);
    color: var(--couleur-fond) !important;
    outline: none;
}
.entete-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
    flex-shrink: 0;
}
.entete-actions .entete-contexte { margin: 0; }
.entete-langue-selecteur {
    position: relative;
}
.entete-langue-selecteur summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    background: var(--couleur-fond);
    cursor: pointer;
    list-style: none;
    font-size: 1.15rem;
}
.entete-langue-selecteur summary::-webkit-details-marker { display: none; }
.entete-langue-selecteur summary:hover,
.entete-langue-selecteur summary:focus-visible,
.entete-langue-selecteur[open] summary {
    border-color: var(--couleur-primaire);
    outline: none;
}
.entete-langue-selecteur__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1000;
    min-width: 10rem;
    padding: 0.4rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    background: var(--couleur-fond-carte);
    box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.entete-langue-selecteur__menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9rem;
}
.entete-langue-selecteur__menu a:hover,
.entete-langue-selecteur__menu a:focus {
    background: var(--couleur-fond-secondaire);
    color: var(--couleur-primaire);
    outline: none;
}
.entete-reglages-selecteur {
    position: relative;
}
.entete-reglages-selecteur summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 50%;
    background: var(--couleur-fond);
    color: var(--couleur-texte-attenue);
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
}
.entete-reglages-selecteur summary::-webkit-details-marker { display: none; }
.entete-reglages-selecteur summary:hover,
.entete-reglages-selecteur summary:focus-visible,
.entete-reglages-selecteur[open] summary {
    color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    outline: none;
}
.entete-reglages-selecteur__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1000;
    min-width: 13rem;
    padding: 0.4rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    background: var(--couleur-fond-carte);
    box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.entete-reglages-selecteur__menu a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9rem;
}
.entete-reglages-selecteur__menu a:hover,
.entete-reglages-selecteur__menu a:focus {
    background: var(--couleur-fond-secondaire);
    color: var(--couleur-primaire);
    outline: none;
}
@media (max-width: 86rem) {
    .entete { gap: var(--espace-s); padding-inline: var(--espace-s); }
    .entete-nav { gap: 0.6rem; }
    .entete-nav__reglages-libelle { display: none; }
}
@media (max-width: 68rem) {
    .entete { flex-wrap: wrap; }
    .entete-nav { order: 3; width: 100%; overflow-x: auto; padding-top: 0.25rem; }
    .entete-actions { margin-left: auto; }
}

.entete-profil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--couleur-texte-attenue);
    border: 1px solid var(--couleur-bordure);
}
.entete-profil:hover { color: var(--couleur-primaire); border-color: var(--couleur-primaire); }
.entete-profil svg { width: 1.2rem; height: 1.2rem; }
.entete-profil-dropdown { position: relative; }
.entete-profil-menu {
    position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20;
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); min-width: 11rem; padding: 0.4rem; display: flex; flex-direction: column;
}
.entete-profil-menu[hidden] { display: none; }
.entete-profil-menu a { display: block; padding: 0.5rem 0.7rem; border-radius: var(--arrondi); text-decoration: none; color: var(--couleur-texte); font-size: 0.9rem; }
.entete-profil-menu a:hover { background: var(--couleur-fond-secondaire); color: var(--couleur-primaire); }
.entete-profil-menu__deconnexion {
    margin: 0.25rem 0 0;
    padding-top: 0.25rem;
    border-top: 1px solid var(--couleur-bordure);
}
.entete-profil-menu__deconnexion button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: var(--arrondi);
    background: transparent;
    color: var(--couleur-texte);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.entete-profil-menu__deconnexion button:hover,
.entete-profil-menu__deconnexion button:focus-visible {
    background: var(--couleur-fond-secondaire);
    color: var(--couleur-primaire);
    outline: none;
}

.contenu {
    max-width: 90rem; /* 1440px, charte "05. Grille et mise en page" */
    margin: 0 auto;
    padding: var(--espace-l) var(--espace-l) var(--espace-xl);
}

/* Rupture visuelle entre grandes sections d'une page, sans les emprisonner dans une carte
   (charte : la carte est un composant reutilisable, pas un emballage systematique). */
.section-page { margin-top: var(--espace-xl); }
.section-page > h2 { margin-bottom: var(--espace-m); }

/* Fiche : gabarit commun pour presenter un objet documentaire */
.fiche {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte);
    padding: var(--espace-l);
}

.fiche h1 { margin-top: 0; }

.liste-fiches {
    display: grid;
    gap: var(--espace-m);
}

.liste-fiches__item {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte);
    padding: var(--espace-m);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Barre d'outils d'une liste catalogue : recherche + filtres (charte "07. Composants UI - Champs & filtres") */
.liste-barre {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    align-items: center;
    margin: var(--espace-m) 0;
}
.liste-barre input[type="search"],
.liste-barre select {
    background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    padding: var(--espace-xs) var(--espace-s);
    font-family: inherit;
    font-size: 0.9rem;
}
.liste-barre input[type="search"] { flex: 1 1 16rem; }
.liste-barre input[type="search"]:focus,
.liste-barre select:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 3px var(--couleur-primaire-claire);
}

/* Constructeur de filtres dynamique : choisir un critere, Ajouter, une ligne apparait. */
.liste-filtres { margin-bottom: var(--espace-m); }
.liste-filtres__ajout { display: flex; gap: var(--espace-s); align-items: center; }
.liste-filtres__ajout select {
    background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    padding: var(--espace-xs) var(--espace-s);
    font-family: inherit;
    font-size: 0.9rem;
}
.liste-filtres__ligne {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-xs);
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.3rem 0.3rem var(--espace-s);
    margin: var(--espace-s) var(--espace-xs) 0 0;
    font-size: 0.85rem;
}
.liste-filtres__ligne select {
    background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    padding: 0.2rem 0.5rem;
    font-family: inherit;
    font-size: 0.85rem;
}
.liste-filtres__retrait {
    background: transparent;
    border: none;
    color: var(--couleur-texte-attenue);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.3rem;
}
.liste-filtres__retrait:hover { color: var(--couleur-danger); }

/* Tableau catalogue (charte "07. Composants UI - Lignes de donnees") : densite moderee, entetes lisibles. */
.table-catalogue { width: 100%; border-collapse: collapse; }
.table-catalogue th {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--couleur-texte-attenue);
    font-weight: 600;
    padding: var(--espace-s);
    border-bottom: 1px solid var(--couleur-bordure);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.table-catalogue th:first-child { text-align: left; }
.table-catalogue th:not([data-tri]) { cursor: default; }
.table-catalogue th:not([data-tri]):hover { color: var(--couleur-texte-attenue); }
.table-catalogue th:hover { color: var(--couleur-texte); }
/* Colonne Carton : centree comme les autres colonnes (text-align:center herite de la
   regle par defaut ci-dessus) - width:1% retire seulement cette colonne de la
   redistribution d'espace excedentaire du tableau (table-layout:auto), sans quoi un
   navigateur peut lui affecter plus de place que ce dont la vignette a besoin des qu'une
   autre colonne (ex. Arme, Position) laisse passer du texte long a la ligne, creant un
   vide visible entre la vignette et la colonne suivante. */
.table-catalogue th.table-catalogue__th--carton,
.table-catalogue td.table-catalogue__td--carton { width: 1%; white-space: nowrap; }
.table-catalogue__th--tri-asc::after { content: ' \2191'; color: var(--couleur-primaire); }
.table-catalogue__th--tri-desc::after { content: ' \2193'; color: var(--couleur-primaire); }
.table-catalogue td {
    box-sizing: border-box;
    height: 95px;
    padding: 0.2rem var(--espace-s);
    border-bottom: 1px solid var(--couleur-bordure);
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}
.table-catalogue td:first-child { text-align: left; }
.table-catalogue tbody tr:hover td { background: var(--couleur-fond-secondaire); }
/* Variante compacte : tableaux purement textuels/numeriques (Statistiques) qui n'ont pas
   besoin des 95px reserves ailleurs a la vignette catalogue. */
.table-catalogue--compact td { height: auto; padding: 0.4rem var(--espace-s); }
.table-catalogue__ligne-lien {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-s);
    text-decoration: none;
    color: var(--couleur-texte);
    text-align: left;
}
.table-catalogue__vignette {
    width: 10rem;
    height: auto;
    max-height: 5.2rem;
    object-fit: contain;
    flex-shrink: 0;
}
.table-catalogue__nom {
    display: flex;
    flex-direction: column;
    max-width: 16rem;
    min-width: 0;
}
.table-catalogue__nom-texte,
.table-catalogue__sous-titre {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-catalogue__sous-titre { display: block; font-size: 0.8rem; color: var(--couleur-texte-attenue); }
.table-catalogue__drapeau { font-size: 1.5rem; cursor: default; }
/* Colonne Carton (liste des cartons) : vignette seule, sans texte - le nom de l'arme a
   sa propre colonne desormais. */
.table-catalogue__vignette-zone { position: relative; display: inline-flex; }
.table-catalogue__favori { position: absolute; top: 0.15rem; left: 0.3rem; color: var(--couleur-primaire); font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.table-catalogue__badges-empiles { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
/* Grand aperçu au survol de la vignette : previsualisation rapide sans ouvrir la fiche. */
.table-catalogue__apercu {
    position: fixed; top: 8vh; left: 50%; transform: translateX(-50%); z-index: 40;
    height: 80vh; max-width: 90vw; pointer-events: none;
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte); padding: var(--espace-xs);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.table-catalogue__apercu[hidden] { display: none; }
.table-catalogue__apercu img { display: block; height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: var(--arrondi); }
/* Vue seance : saisie libre du numero d'ordre - rien n'est enregistre avant le clic
   sur "Appliquer l'ordre" (le glisser-deposer s'est avere trop imprevisible en usage
   reel, retire au profit de cette saisie manuelle groupee). */
.table-catalogue__input-numero {
    width: 3.2rem; background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi); color: var(--couleur-texte); padding: 0.3rem 0.4rem;
    font-family: var(--police-donnees); font-size: 0.85rem; text-align: center;
}
.seance-numeros-actions {
    display: flex; align-items: center; justify-content: space-between; gap: var(--espace-m);
    margin-bottom: var(--espace-s); flex-wrap: wrap;
}

/* Fil d'Ariane */
.fil-ariane {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--couleur-texte-attenue);
    margin-bottom: var(--espace-s);
}
.fil-ariane a { color: var(--couleur-texte-attenue); text-decoration: none; }
.fil-ariane a:hover { color: var(--couleur-texte); }
.fil-ariane__separateur { opacity: 0.5; }
.fil-ariane__courant { color: var(--couleur-texte); font-weight: 600; }

/*
 * Fiche-specimen : en-tete d'un objet documentaire (arme, munition, carton...) avec sa photo.
 * Composant transversal du theme (DEC-054) : tout module presentant un objet avec photo
 * de profil doit composer a partir de ces classes plutot que reinventer sa propre mise en page.
 * Pas de carte/cadre autour : le bloc s'inscrit directement sur le fond de la page, seule la
 * grille de donnees techniques (cartouche) ci-dessous porte une bordure.
 */
.fiche-specimen {
    display: flex;
    gap: var(--espace-l);
    align-items: flex-start;
}
.fiche-specimen__corps { flex: 1 1 auto; min-width: 0; }
.fiche-specimen__titre { margin: 0 0 0.2rem; }
.fiche-specimen__sous-titre {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--couleur-primaire);
    font-size: 0.95rem;
}
.fiche-specimen__media {
    position: sticky;
    top: var(--espace-m);
    flex: 0 0 60%;
    min-height: 20rem;
}
.fiche-specimen__media img { width: 100%; height: 100%; object-fit: contain; }
/* Munitions : la photo est une petite boite de produit, pas une arme allongee - le
   gabarit 60%/20rem herite d'Armes la faisait beaucoup trop grande. La colonne de
   droite garde une largeur proche de l'original (40%) mais la photo elle-meme est
   plafonnee et centree dedans, plutot que de l'etirer pour remplir toute la colonne. */
.fiche-specimen__media--compact {
    flex: 0 0 40%;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fiche-specimen__media--compact img { width: auto; height: auto; max-width: 16rem; max-height: 12rem; }
/* Impacts superposes sur la photo de la fiche (consultation) : meme codage visuel que
   l'editeur (pastille + score au centre), en positionnement pourcentage puisque les
   coordonnees des impacts sont deja normalisees (0-1) par rapport a l'image. */
.carton-photo-zone { position: relative; }
.carton-impacts-overlay { position: absolute; inset: 0; pointer-events: none; }
.carton-impacts-overlay[hidden] { display: none; }
.carton-impact-marqueur {
    position: absolute; transform: translate(-50%, -50%);
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: rgba(57, 255, 20, 0.55); border: 2px solid #39ff14;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800; color: #07111f;
    /* Jamais la police mono (--police-donnees) : son zero barre/pointe rend "10"
       illisible (confondu avec "18"). Police standard sans cette ambiguite. */
    font-family: var(--police);
}
.fiche-specimen__media-vide {
    display: flex; align-items: center; justify-content: center;
    height: 11rem; border: 1px dashed var(--couleur-bordure); border-radius: var(--arrondi);
    color: var(--couleur-texte-attenue); font-size: 0.875rem;
}
.fiche-specimen__photo-action {
    position: absolute; top: 0.5rem; right: 0.5rem;
}
.fiche-specimen__actions { display: flex; gap: var(--espace-s); flex-wrap: wrap; margin-top: var(--espace-m); }
.bouton--deux-lignes { line-height: 1.25; text-align: center; padding-top: var(--espace-xs); padding-bottom: var(--espace-xs); }

/* Formulaire fin d'edition de carton : pas de gros container, la photo reste visible
   a cote des champs (sticky), libelles en jaune (accent charte) plutot que la couleur
   de texte par defaut. */
.formulaire-carton__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-m); flex-wrap: wrap; }
/* align-items:stretch (au lieu de start) : les deux colonnes prennent la meme hauteur
   (celle de la plus haute), pour que .formulaire-carton__reference-bas et le groupe de
   boutons du formulaire, tous deux pousses en bas via margin-top:auto, se retrouvent
   naturellement au meme niveau quel que soit le contenu de chaque colonne. */
.formulaire-carton { display: grid; grid-template-columns: 60% 40%; gap: var(--espace-l); align-items: stretch; margin: var(--espace-m) auto 0; max-width: 64rem; }
.formulaire-carton__reference { position: sticky; top: var(--espace-m); display: flex; flex-direction: column; gap: var(--espace-s); }
.formulaire-carton__reference-bas { margin-top: auto; display: flex; flex-direction: column; gap: var(--espace-s); }
.formulaire-carton__champs { display: flex; flex-direction: column; }
.formulaire-carton__champs-boutons { margin-top: auto; }
.formulaire-carton__reference > img {
    width: 100%; min-height: 20rem; border-radius: var(--radius-carte); border: 1px solid var(--couleur-bordure);
    max-height: 75vh; object-fit: contain; background: var(--couleur-fond-secondaire);
}
.formulaire-carton__reference form { margin: 0; }
.formulaire-carton__champs .champ label,
.champ-liste label {
    color: var(--couleur-primaire); font-family: var(--police-titre); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; margin-bottom: 0.3rem;
}
.formulaire-carton__champs .champ label span.texte-attenue { text-transform: none; letter-spacing: normal; font-family: var(--police); font-weight: 400; }
.champ-liste__nouveau { margin-top: var(--espace-xs); }

/* Champs de contexte du carton groupes deux par ligne (au lieu d'un empilement un par
   un) : formulaire nettement moins haut, tient sans scroller sur un ecran courant. */
.formulaire-carton__champs-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--espace-m); }
.formulaire-carton__champs-grille .champ { margin-bottom: var(--espace-s); }
.formulaire-carton__champs-grille .champ--pleine-largeur { grid-column: 1 / -1; }
.formulaire-carton__champs-grille .champ input,
.formulaire-carton__champs-grille .champ select,
.formulaire-carton__champs-grille .champ textarea {
    padding: 0.55rem var(--espace-s);
}
@media (max-width: 40rem) {
    .formulaire-carton__champs-grille { grid-template-columns: 1fr; }
}
/* Case "Date inconnue" : alignee avec le bas du champ date voisin (pas son libelle). */
.champ--case { display: flex; align-items: flex-end; }
.champ-case { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--couleur-texte-attenue); cursor: pointer; padding-bottom: 0.65rem; }
.champ-case input[type="checkbox"] { width: auto; margin: 0; }

/* Bouton favori (charte "07. Composants UI - Boutons") : fond sombre, bordure fine,
   etoile jaune remplie une fois actif - repris du modele fourni par le PO. */
/* Fond transparent (la grille technique du cadre general se voit au travers) plutot
   qu'un aplat colore - demande explicite du PO pour ce bouton et pour "Retour a la fiche". */
.bouton-favori {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 1.1rem; border-radius: var(--arrondi);
    background: transparent; border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte); font-family: var(--police-donnees);
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; white-space: nowrap;
}
.bouton-favori:hover { border-color: var(--couleur-primaire); }

/* Action discrete et peu frequente (ex. vider une corbeille) : un simple lien souligne,
   jamais un bouton plein qui attirerait l'oeil vers une action irreversible. */
.bouton-discret {
    background: none; border: none; padding: 0; margin: 0;
    font-size: 0.78rem; color: var(--couleur-texte-attenue); text-decoration: underline;
    cursor: pointer;
}
.bouton-discret:hover { color: var(--couleur-danger); }
.bouton-favori svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--couleur-texte-attenue); }
.bouton-favori--actif svg { color: var(--couleur-primaire); }
.formulaire-carton__entete-actions { display: flex; align-items: center; gap: var(--espace-s); }
.icone-bouton--danger:hover { border-color: var(--couleur-danger); color: var(--couleur-danger); }
.formulaire-lot__carton { padding: var(--espace-l) 0; border-bottom: 1px solid var(--couleur-bordure); }
.formulaire-lot__carton:first-of-type { padding-top: var(--espace-m); }
@media (max-width: 760px) {
    .formulaire-carton { grid-template-columns: 1fr; }
    .formulaire-carton__reference { position: static; }
}

/* Module Seances : vue agenda mensuel (inspire du calendrier du PoC TargetBook,
   public/sessions.php) */
.agenda-barre {
    display: flex; align-items: center; justify-content: space-between; gap: var(--espace-m);
    flex-wrap: wrap; margin: var(--espace-m) 0; padding: var(--espace-m);
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--radius-carte);
}
.agenda-navigation { display: flex; align-items: center; gap: var(--espace-s); }
.agenda-titre-mois { margin: 0; min-width: 11rem; text-align: center; }
.bouton-icone-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--arrondi);
    border: 1px solid var(--couleur-bordure); color: var(--couleur-texte); text-decoration: none;
}
.bouton-icone-nav:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.bouton-icone-nav svg { width: 1.1rem; height: 1.1rem; }
.agenda-filtre select { min-height: 2.5rem; }

.agenda-grille {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--couleur-bordure); border-left: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond-carte); border-radius: var(--radius-carte); overflow: hidden;
}
.agenda-jour-semaine {
    padding: var(--espace-s); border-right: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-attenue); text-align: center; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
}
.agenda-case {
    min-height: 8rem; padding: 0.5rem;
    border-right: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure);
}
.agenda-case--hors-mois { background: var(--couleur-fond-secondaire); }
.agenda-case__numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; font-family: var(--police-donnees);
}
.agenda-case--aujourdhui .agenda-case__numero { background: var(--couleur-primaire); color: var(--couleur-fond); }
.agenda-case__evenements { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.agenda-evenement {
    display: block; padding: 0.3rem 0.45rem; border-radius: 0.35rem;
    background: var(--couleur-primaire-claire); border-left: 3px solid var(--couleur-primaire);
    color: var(--couleur-texte); text-decoration: none; font-size: 0.75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-evenement:hover { background: var(--couleur-primaire); color: var(--couleur-fond); }
@media (max-width: 760px) {
    .agenda-grille { display: flex; flex-direction: column; }
    .agenda-jour-semaine { display: none; }
    .agenda-case { min-height: auto; }
    .agenda-case--hors-mois { display: none; }
}

/* Prise de visee (edition sur /armes/{id}/editer, lecture seule sur la fiche) : jusqu'a
   5 mini-cibles centrees sur une ligne, le bouton + partage la meme ligne, a droite. */
.prises-visee { display: flex; justify-content: center; align-items: center; gap: var(--espace-m); flex-wrap: wrap; margin-bottom: var(--espace-m); }
.prise-visee { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 8rem; position: relative; }
.prise-visee__retrait {
    position: absolute; top: -0.4rem; right: -0.4rem; z-index: 2;
    width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond-carte); color: var(--couleur-texte-attenue); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem; line-height: 1; padding: 0;
}
.prise-visee__retrait:hover { border-color: var(--couleur-danger); color: var(--couleur-danger); }
.prise-visee__cible {
    position: relative; width: 100%; border-radius: var(--arrondi); overflow: hidden;
    border: 1px solid var(--couleur-bordure); cursor: crosshair; user-select: none; background: #fff;
}
.prise-visee--lecture .prise-visee__cible { cursor: default; }
.prise-visee__cible img { display: block; width: 100%; height: auto; pointer-events: none; }
.prise-visee__marqueur {
    position: absolute; transform: translate(-50%, -50%);
    width: 1rem; height: 1rem; border-radius: 50%;
    background: rgba(57, 255, 20, 0.55); border: 2px solid #39ff14;
    pointer-events: none;
}
.prise-visee__distance {
    width: 100%; box-sizing: border-box; text-align: center; background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    color: var(--couleur-texte); padding: 0.3rem 0.4rem; font-size: 0.85rem; font-family: inherit;
}
.prise-visee__distance-lecture { font-size: 0.85rem; color: var(--couleur-texte-attenue); text-align: center; }
.prises-visee-actions { display: flex; align-items: center; gap: var(--espace-m); margin-top: var(--espace-s); }
.prise-visee__ajouter {
    align-self: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px dashed var(--couleur-bordure);
    background: transparent; color: var(--couleur-texte-attenue);
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0;
}
.prise-visee__ajouter:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.prise-visee__ajouter[hidden] { display: none; }
.prise-visee__ajouter svg { width: 1.2rem; height: 1.2rem; display: block; }

/* Page d'accueil */
.accueil-entete { margin-bottom: var(--espace-m); }
.accueil-entete h1 { margin-bottom: 0.2rem; }
.accueil-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--espace-m); margin-top: var(--espace-l); }
.accueil-tuile {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: var(--espace-l) var(--espace-m);
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte); text-decoration: none; color: var(--couleur-texte);
    transition: border-color 0.15s;
}
.accueil-tuile:hover { border-color: var(--couleur-primaire); }
.accueil-tuile__chiffre { font-family: var(--police-donnees); font-size: 2.2rem; font-weight: 700; color: var(--couleur-primaire); font-variant-numeric: tabular-nums; }
.accueil-tuile__chiffre--date { font-size: 1.5rem; }
.accueil-tuile__libelle { color: var(--couleur-texte-attenue); font-size: 0.9rem; }

/* Classement en barres (module Statistiques) : repartition par stand, sans bibliotheque de graphiques */
.stat-barres { display: flex; flex-direction: column; gap: var(--espace-xs); margin-top: var(--espace-s); }
.stat-barre { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; align-items: center; gap: var(--espace-s); }
.stat-barre__label { color: var(--couleur-texte-attenue); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-barre__piste { display: block; background: var(--couleur-fond-secondaire); border-radius: var(--arrondi); height: 0.6rem; overflow: hidden; }
.stat-barre__remplissage { display: block; background: var(--couleur-primaire); height: 100%; border-radius: var(--arrondi); }
.stat-barre__valeur { font-family: var(--police-donnees); font-variant-numeric: tabular-nums; color: var(--couleur-texte); min-width: 2rem; text-align: right; }
.stat-barre--top5 .stat-barre__label { color: var(--couleur-texte); font-weight: 600; }
.stat-barre--top5 .stat-barre__remplissage { background: var(--couleur-primaire); }
.stat-barre:not(.stat-barre--top5) .stat-barre__remplissage { background: var(--couleur-texte-attenue); }
.stat-barre__label a { color: inherit; text-decoration: none; }
.stat-barre__label a:hover { color: var(--couleur-primaire); }

/* Sous-navigation entre les 4 pages du module Statistiques (vue d'ensemble/armes/stands/munitions) */
.stats-sous-nav { display: flex; gap: var(--espace-s); flex-wrap: wrap; margin-top: var(--espace-m); }
.stats-sous-nav__lien {
    padding: var(--espace-xs) var(--espace-m); border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi); color: var(--couleur-texte-attenue); text-decoration: none; font-size: 0.9rem;
}
.stats-sous-nav__lien:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.stats-sous-nav__lien--actif { background: var(--couleur-primaire-claire); border-color: var(--couleur-primaire); color: var(--couleur-primaire); font-weight: 600; }

/* Arborescence categorie/calibre/arme (vue d'ensemble Statistiques) - meme mecanique que
   .arbo-seances (details/summary/chevron), un niveau de nesting en plus pour le calibre,
   masque quand un seul calibre existe dans la categorie (regle demandee par le PO). */
.arbo-armes { display: flex; flex-direction: column; gap: var(--espace-s); }
.arbo-armes__categorie, .arbo-armes__calibre {
    border: 1px solid var(--couleur-bordure); border-radius: var(--radius-carte); background: var(--couleur-fond-carte);
}
.arbo-armes__calibre { margin: var(--espace-xs) var(--espace-m); background: var(--couleur-fond-secondaire); }
.arbo-armes__resume {
    display: flex; align-items: center; gap: var(--espace-s); padding: var(--espace-s) var(--espace-m);
    cursor: pointer; list-style: none;
}
.arbo-armes__resume::-webkit-details-marker { display: none; }
.arbo-armes__resume:hover { color: var(--couleur-primaire); }
.arbo-armes__chevron { width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform 0.15s; }
.arbo-armes__categorie[open] > .arbo-armes__resume .arbo-armes__chevron,
.arbo-armes__calibre[open] > .arbo-armes__resume .arbo-armes__chevron { transform: rotate(90deg); }
.arbo-armes__nom { font-weight: 700; flex: 1; }
.arbo-armes__contenu { padding: 0 var(--espace-m) var(--espace-m); }
.liste-armes { display: flex; flex-direction: column; gap: var(--espace-xs); }
.liste-armes__ligne {
    display: grid; grid-template-columns: 1fr auto auto; gap: var(--espace-s); align-items: center;
    padding: var(--espace-s) var(--espace-m); background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
}
.arbo-armes__calibre .liste-armes__ligne { background: var(--couleur-fond-carte); }

/* Courbe de frequentation (SVG ecrit a la main, aucune librairie de graphique) */
.courbe-frequentation__svg { width: 100%; height: auto; max-height: 220px; }
.courbe-frequentation__axe { stroke: var(--couleur-bordure); stroke-width: 1; }
.courbe-frequentation__ligne { fill: none; stroke: var(--couleur-primaire); stroke-width: 2; }
.courbe-frequentation__point { fill: var(--couleur-primaire); }
.courbe-frequentation__label { fill: var(--couleur-texte-attenue); font-size: 9px; text-anchor: middle; font-family: var(--police-donnees); }

/* Mini-modules statistiques embarques dans les fiches Armes/Munitions : onglets (bascule
   JS sans rechargement, voir onglets.js), infobulle au survol, bouton de retour vers le
   module Statistiques (n'apparait que si on y est arrive via un lien depuis Statistiques). */
.onglets__barre { display: flex; gap: var(--espace-xs); flex-wrap: wrap; border-bottom: 1px solid var(--couleur-bordure); margin-bottom: var(--espace-m); }
.onglets__bouton {
    padding: var(--espace-xs) var(--espace-m);
    border: none; border-bottom: 2px solid transparent;
    background: none; cursor: pointer;
    color: var(--couleur-texte-attenue); font-size: 0.9rem; font-family: inherit;
}
.onglets__bouton:hover { color: var(--couleur-texte); }
.onglets__bouton--actif { color: var(--couleur-primaire); border-bottom-color: var(--couleur-primaire); font-weight: 600; }

.stat-infobulle { position: relative; cursor: help; border-bottom: 1px dotted var(--couleur-texte-attenue); }
.stat-infobulle__contenu {
    display: none;
    position: absolute; z-index: 20; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%);
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: var(--espace-xs) var(--espace-s);
    white-space: nowrap;
}
.stat-infobulle:hover .stat-infobulle__contenu,
.stat-infobulle:focus-within .stat-infobulle__contenu { display: block; }
.stat-infobulle__contenu table { border-collapse: collapse; font-size: 0.8rem; }
.stat-infobulle__contenu th, .stat-infobulle__contenu td { padding: 0.15rem 0.5rem; text-align: right; }
.stat-infobulle__contenu th:first-child, .stat-infobulle__contenu td:first-child { text-align: left; }

.lien-retour-stats {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--couleur-texte-attenue); text-decoration: none; font-size: 0.85rem;
    margin-bottom: var(--espace-xs);
}
.lien-retour-stats:hover { color: var(--couleur-primaire); }

/* Lien secondaire dans les tableaux recapitulatifs Statistiques : le nom mene a la vraie
   fiche catalogue, ce petit lien reste dans le module pour voir le detail statistique. */
.lien-detail-stats { margin-left: 0.5rem; font-size: 0.75rem; color: var(--couleur-texte-attenue); text-decoration: none; white-space: nowrap; }
.lien-detail-stats:hover { color: var(--couleur-primaire); }

/* Filtre de periode commun aux 4 pages Statistiques (remplace la case "Inclure les
   seances archivees"). */
.filtre-periode { display: flex; align-items: center; gap: var(--espace-m); flex-wrap: wrap; padding: var(--espace-s) var(--espace-m); background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi); }
.filtre-periode__option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; white-space: nowrap; }
.filtre-periode__mois { width: 3.5rem; }

/* Bandeau "a indexer" + regroupement par seance (liste des cartons) */
.bandeau-indexation {
    display: block; margin-top: var(--espace-m); padding: var(--espace-s) var(--espace-m);
    background: var(--couleur-alerte-claire); border: 1px solid var(--couleur-alerte);
    border-radius: var(--radius-carte); color: var(--couleur-texte); text-decoration: none;
}
.bandeau-indexation strong { color: var(--couleur-alerte); font-size: 1.1rem; }
.bandeau-indexation:hover { border-color: var(--couleur-primaire); }
.liste-seances { display: flex; flex-direction: column; gap: var(--espace-xs); }
.liste-seances__ligne {
    display: grid; grid-template-columns: 8rem 1fr 1fr auto; gap: var(--espace-s); align-items: center;
    padding: var(--espace-s) var(--espace-m); background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    color: var(--couleur-texte); text-decoration: none;
}
.liste-seances__ligne:hover { border-color: var(--couleur-primaire); }
.liste-seances__date { font-family: var(--police-donnees); color: var(--couleur-primaire); }
.liste-seances__stand { font-weight: 600; }
@media (max-width: 760px) {
    .liste-seances__ligne { grid-template-columns: 1fr 1fr; }
}

.galerie-photos__lot input,
.galerie-photos__lot select { background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi); color: var(--couleur-texte); padding: 0.4rem 0.6rem; font-family: inherit; font-size: 0.85rem; }

/* Carte de recherche (liste des cartons) : recherche libre + constructeur de filtres
   regroupes dans un seul bloc borde, au lieu de deux barres flottantes disjointes. */
.carte-recherche {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte); padding: var(--espace-m); margin: var(--espace-m) 0;
}
.carte-recherche__champ {
    width: 100%; background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi); color: var(--couleur-texte); padding: var(--espace-s); font-family: inherit; font-size: 0.9rem;
}
.carte-recherche__champ:focus { outline: none; border-color: var(--couleur-primaire); box-shadow: 0 0 0 3px var(--couleur-primaire-claire); }
.carte-recherche .liste-filtres { margin: var(--espace-s) 0 0; }
/* Repliee par defaut (<details>) : juste "Filtrer les cartons" + une fleche, pour ne
   pas monopoliser l'espace au-dessus de la liste tant qu'on n'a pas besoin de filtrer. */
.carte-recherche--repliable { padding: 0; }
.carte-recherche__resume {
    display: flex; align-items: center; justify-content: space-between; gap: var(--espace-s);
    padding: var(--espace-m); cursor: pointer; list-style: none; font-weight: 600;
}
.carte-recherche__resume::-webkit-details-marker { display: none; }
.carte-recherche__resume:hover { color: var(--couleur-primaire); }
.carte-recherche__chevron { width: 1.1rem; height: 1.1rem; transition: transform 0.15s; }
.carte-recherche--repliable[open] .carte-recherche__chevron { transform: rotate(90deg); }
.carte-recherche--repliable > .carte-recherche__champ,
.carte-recherche--repliable > .liste-filtres { margin-left: var(--espace-m); margin-right: var(--espace-m); }
.carte-recherche--repliable > .liste-filtres { padding-bottom: var(--espace-m); }
.carte-recherche--repliable > .carte-recherche__champ { width: calc(100% - 2 * var(--espace-m)); }

/* Backoffice Parametres : une carte par categorie de liste deroulante, valeurs en
   puces supprimables + petit formulaire d'ajout, meme pattern visuel que les puces
   du constructeur de filtres (.liste-filtres__ligne). */
.param-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--espace-m); margin-top: var(--espace-m); }
/* min-width:0 casse le min-width:auto implicite des enfants flex/grid (leur contenu,
   ex. le champ de saisie, forcait sinon la carte a deborder sur la carte voisine). */
.param-carte { min-width: 0; }
.param-carte h2 { margin: 0 0 var(--espace-s); font-size: 1rem; }
.param-carte__valeurs { display: flex; flex-wrap: wrap; gap: var(--espace-xs); margin-bottom: var(--espace-m); min-height: 2rem; }
.param-puce {
    display: inline-flex; align-items: center; gap: var(--espace-xs);
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-pill); padding: 0.3rem 0.3rem 0.3rem var(--espace-s); font-size: 0.85rem;
}
.param-puce form { display: contents; }
.param-puce__retrait { background: transparent; border: none; color: var(--couleur-texte-attenue); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0.3rem; }
.param-puce__retrait:hover { color: var(--couleur-danger); }
/* Valeur deja utilisee sur des cartons mais jamais ajoutee via ce backoffice (donnees
   anterieures a ce referentiel) : bordure en pointilles pour la distinguer visuellement. */
.param-puce--libre { border-style: dashed; }
.param-carte__ajout { display: flex; gap: var(--espace-s); }
.param-carte__ajout input {
    flex: 1; min-width: 0; background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi); color: var(--couleur-texte); padding: var(--espace-s); font-family: inherit; font-size: 0.9rem;
}
.param-carte__ajout input:focus { outline: none; border-color: var(--couleur-primaire); box-shadow: 0 0 0 3px var(--couleur-primaire-claire); }

/* Bloc d'affectation en lot (selection multiple) : carte distincte et propre,
   champs etiquetes en grille plutot qu'une ligne d'inputs sans nom qui s'empilent. */
.lot-actions {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-primaire);
    border-radius: var(--radius-carte); padding: var(--espace-m); margin-bottom: var(--espace-m);
}
.lot-actions__entete { display: flex; align-items: baseline; gap: var(--espace-s); margin-bottom: var(--espace-s); flex-wrap: wrap; }
.lot-actions__entete strong { color: var(--couleur-primaire); font-family: var(--police-titre); text-transform: uppercase; letter-spacing: 0.03em; }
/* 4 colonnes fixes, centrees : avec 8 champs, une seule ligne ne tient jamais a une
   largeur d'ecran raisonnable - plutot qu'un retour a la ligne inegal (auto-fill),
   toujours 4+4, harmonieux. */
.lot-actions__champs { display: grid; grid-template-columns: repeat(4, minmax(9rem, 14rem)); justify-content: center; gap: var(--espace-s); margin-bottom: var(--espace-m); }
.lot-actions__champ { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--couleur-texte-attenue); }
.lot-actions__champ input,
.lot-actions__champ select {
    background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    color: var(--couleur-texte); padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.85rem;
}
.lot-actions__boutons { display: flex; gap: var(--espace-s); flex-wrap: wrap; }
.icone-bouton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--arrondi);
    background: rgba(11, 13, 16, 0.55);
    border: 1px solid rgba(243, 245, 247, 0.25);
    color: var(--couleur-texte);
    cursor: pointer;
}
.icone-bouton:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.icone-bouton svg { width: 1.1rem; height: 1.1rem; }

/* Cartouche de donnees techniques : seule zone bordee sous l'en-tete. */
.cartouche {
    margin-top: var(--espace-l);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte);
    padding: var(--espace-m) var(--espace-l);
}

/* Grille de fiches techniques (icone + libelle + valeur) - reprend l'iconographie filaire de la charte. */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--espace-m); }
.spec-chip { display: flex; align-items: flex-start; gap: var(--espace-xs); }
.spec-chip__icone {
    width: 2rem; height: 2rem; border-radius: var(--arrondi); flex-shrink: 0;
    background: var(--couleur-primaire-claire); color: var(--couleur-primaire);
    display: flex; align-items: center; justify-content: center;
}
.spec-chip__icone svg { width: 1.1rem; height: 1.1rem; }
.spec-chip dt { font-size: 0.72rem; color: var(--couleur-texte-attenue); margin-bottom: 0.1rem; }
.spec-chip dd { margin: 0; font-weight: 600; font-size: 0.9rem; }
/* Reserve a la police mono aux valeurs reellement techniques (calibre, cotes, numeros) - charte "02. Typographie". */
.spec-chip--donnee dd { font-family: var(--police-donnees); font-variant-numeric: tabular-nums; }

/* Valeur deduite (ex. nombre de coups tires absent, remplace par le nombre d'impacts
   releves sur la cible) plutot que declaree explicitement - couleur d'info distincte pour
   ne jamais laisser croire a une saisie manuelle, + mention explicite sous la valeur. */
.spec-chip--deduit .spec-chip__icone { background: var(--couleur-information-claire); color: var(--couleur-information); }
.spec-chip--deduit dd { color: var(--couleur-information); }
.spec-chip__mention { display: block; font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }

/* Boutons (charte "07. Composants UI") */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--espace-s) var(--espace-m);
    border-radius: var(--arrondi);
    border: 1px solid transparent;
    font-family: var(--police);
    font-weight: 600;
    font-size: var(--taille-texte);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, filter 0.15s;
}

.bouton--primaire {
    background: var(--couleur-primaire);
    color: var(--couleur-fond);
}
/* Reaffirme explicitement la couleur du texte au survol : sans ca, un bouton qui est
   en realite un lien (<a class="bouton bouton--primaire">) se fait ecraser par la regle
   generale "a:hover" (plus specifique qu'une simple classe), le texte devient alors
   jaune sur fond jaune et disparait completement. */
.bouton--primaire:hover { background: var(--couleur-primaire-survol); color: var(--couleur-fond); }

.bouton--secondaire {
    background: var(--couleur-fond-secondaire);
    border-color: var(--couleur-bordure);
    color: var(--couleur-texte);
}
.bouton--secondaire:hover { border-color: var(--couleur-texte-attenue); color: var(--couleur-texte); }

.bouton--destructeur {
    background: var(--couleur-danger);
    color: var(--couleur-texte);
}
.bouton--destructeur:hover { filter: brightness(1.1); color: var(--couleur-texte); }

/* Formulaires */
.champ { margin-bottom: var(--espace-m); }
.champ label { display: block; margin-bottom: var(--espace-xs); font-weight: 600; }
.champ input, .champ select, .champ textarea {
    width: 100%;
    padding: var(--espace-s);
    background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi);
    color: var(--couleur-texte);
    font-size: var(--taille-texte);
    font-family: inherit;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 3px var(--couleur-primaire-claire);
}

/* Badges de statut : couleur fonctionnelle uniquement */
.badge {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire);
}
/* Largeur uniforme pour les badges de statut du tableau des cartons (calee sur
   "À indexer", le plus long des trois libelles) : sans ca, Recadre/Indexe/A indexer
   rendent des pilules de tailles differentes, cote a cote c'est inegal. Scope limite a
   cette colonne pour ne pas elargir les autres usages de .badge ailleurs sur le site. */
.table-catalogue__badges-empiles .badge { min-width: 5.5rem; text-align: center; }

.badge--archive {
    background: var(--couleur-bordure);
    color: var(--couleur-texte-attenue);
}
.badge--indexe {
    background: var(--couleur-succes-claire);
    color: var(--couleur-succes);
}
/* Rouge franc distinct de --couleur-danger (trop pale) et de --couleur-alerte (orange) :
   demande explicite du PO - net, tirant sur le bordeaux plutot que le rouge fluo pur. */
.badge--alerte {
    background: rgba(200, 16, 46, 0.14);
    color: #C8102E;
}

.texte-attenue { color: var(--couleur-texte-attenue); }

/* Donnees techniques (calibres, numeros de serie, dimensions) : police mono de la charte */
.donnee { font-family: var(--police-donnees); font-variant-numeric: tabular-nums; }

/* Galerie photo (service transversal, app/Noyau/Medias) */
.galerie-photos__grille {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin-bottom: var(--espace-m);
}

.galerie-photos__vignette {
    position: relative;
    width: 8rem;
    height: 8rem;
}

.galerie-photos__vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--arrondi);
    border: 1px solid var(--couleur-bordure);
    transition: border-color 0.15s;
    display: block;
}
.galerie-photos__vignette a:hover img,
.galerie-photos__vignette a:focus-visible img { border-color: var(--couleur-primaire); }

.galerie-photos__actions {
    position: absolute;
    bottom: var(--espace-xs);
    right: var(--espace-xs);
}

/* Case de selection (coin de vignette) et vignette selectionnee - pattern repris du PoC. */
.galerie-photos__case {
    position: absolute;
    top: var(--espace-xs);
    right: var(--espace-xs);
    z-index: 2;
}
.galerie-photos__case input { position: absolute; opacity: 0; width: 1.6rem; height: 1.6rem; margin: 0; cursor: pointer; }
.galerie-photos__case span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(11, 13, 16, 0.6);
    border: 1px solid rgba(243, 245, 247, 0.4);
    color: transparent;
    pointer-events: none;
}
.galerie-photos__case span svg { width: 1rem; height: 1rem; }
.galerie-photos__case input:checked + span {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: var(--couleur-fond);
}
.galerie-photos__vignette--selectionnee img { outline: 2px solid var(--couleur-primaire); outline-offset: 2px; }

.galerie-photos__lot {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    flex-wrap: wrap;
    margin-bottom: var(--espace-m);
    font-size: 0.9rem;
    color: var(--couleur-texte-attenue);
}

.galerie-photos__depot {
    border: 2px dashed var(--couleur-bordure);
    border-radius: var(--arrondi);
    padding: var(--espace-m);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.galerie-photos__depot--survol {
    border-color: var(--couleur-primaire);
    background: var(--couleur-primaire-claire);
}

.galerie-photos__depot-texte { margin: 0 0 var(--espace-s); }

.galerie-photos__lien {
    color: var(--couleur-primaire);
    text-decoration: underline;
    cursor: pointer;
}

/* Barre de progression d'import (affichee pendant l'envoi XHR, voir galerie-import.js) */
.galerie-photos__progression {
    height: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--couleur-fond-secondaire);
    overflow: hidden;
    margin: var(--espace-s) 0;
}
.galerie-photos__progression-barre {
    height: 100%;
    width: 0%;
    background: var(--couleur-primaire);
    transition: width 0.15s linear;
}
/* Etat "traitement serveur" : l'envoi reseau est fini mais GD travaille encore,
   la barre devient indeterminee (va-et-vient) plutot que de rester figee a 100%. */
.galerie-photos__progression--traitement .galerie-photos__progression-barre {
    width: 40% !important;
    animation: galerie-photos-traitement 1.1s ease-in-out infinite;
}
@keyframes galerie-photos-traitement {
    0% { margin-left: 0%; }
    50% { margin-left: 60%; }
    100% { margin-left: 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .galerie-photos__progression--traitement .galerie-photos__progression-barre { animation: none; width: 100% !important; }
}

/* Visionneuse plein ecran (DEC-054, service transversal - voir visionneuse.js) */
.visionneuse-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(3, 4, 5, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espace-xl);
}
/* [hidden] a la meme specificite que .visionneuse-overlay : sans cette regle,
   le display:flex ci-dessus l'emporte et la superposition reste visible a l'ecran
   meme quand l'attribut hidden est present. */
.visionneuse-overlay[hidden] { display: none; }
.visionneuse-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--arrondi);
    transition: transform 0.08s linear;
    user-select: none;
    -webkit-user-drag: none;
}
.visionneuse-image--zoomee { border-radius: 0; }
.visionneuse-image--deplacable { cursor: grab; }
.visionneuse-image--glissement { cursor: grabbing; transition: none; }
.visionneuse-zoom-indicateur {
    position: absolute;
    bottom: var(--espace-m);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(11, 13, 16, 0.7);
    color: var(--couleur-texte);
    font-size: 0.8rem;
    font-family: var(--police-donnees);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(243, 245, 247, 0.2);
}
.visionneuse-fermer,
.visionneuse-nav {
    position: fixed;
    /* L'image zoomee porte un transform: scale(...), ce qui lui cree sa propre pile
       d'affichage (stacking context) et la faisait passer AU-DESSUS de ces boutons
       fixed des que le zoom depassait 100% (meme z-index implicite, mais l'image
       vient apres eux dans le DOM). Un z-index explicite force ces boutons a rester
       au-dessus quel que soit le niveau de zoom. */
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    /* Fond sombre quasi-opaque (pas juste translucide clair) : la cible numerisee est
       un aplat blanc qui, une fois zoome plein ecran, ne laisse plus voir le fond
       sombre de la visionneuse derriere - un bouton translucide clair devenait alors
       quasi invisible sur ce fond blanc. Un cercle sombre + icone claire reste lisible
       quelle que soit l'image affichee derriere. */
    background: rgba(11, 13, 16, 0.78);
    border: 1px solid rgba(243, 245, 247, 0.35);
    color: #F3F5F7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.visionneuse-fermer:hover,
.visionneuse-nav:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); background: rgba(11, 13, 16, 0.92); }
.visionneuse-fermer svg,
.visionneuse-nav svg { width: 1.25rem; height: 1.25rem; }
.visionneuse-fermer { top: var(--espace-m); right: var(--espace-m); }
.visionneuse-nav--precedent { left: var(--espace-m); top: 50%; transform: translateY(-50%); }
.visionneuse-nav--suivant { right: var(--espace-m); top: 50%; transform: translateY(-50%); }
.visionneuse-nav[hidden] { display: none; }

/* Navigation precedent/suivant sur la fiche carton, dans l'ensemble d'ou vient
   l'utilisateur (recherche/filtres/vue "a indexer") - memes codes visuels que les
   fleches de la visionneuse, mais fixees aux bords de la page plutot que d'un overlay. */
.carton-nav-contexte {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte); cursor: pointer; text-decoration: none;
}
.carton-nav-contexte:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.carton-nav-contexte svg { width: 1.25rem; height: 1.25rem; }
.carton-nav-contexte--precedent { left: var(--espace-m); }
.carton-nav-contexte--suivant { right: var(--espace-m); }
@media (max-width: 60rem) {
    .carton-nav-contexte { display: none; }
}

/* Recadrage / correction de perspective (port du PoC TargetBook) */
.perspective-rotation { display: flex; align-items: center; gap: var(--espace-s); margin-top: var(--espace-s); flex-wrap: wrap; }
.perspective-rotation .bouton { gap: 0.4rem; }
.perspective-rotation svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.perspective-stage {
    position: relative;
    max-width: 100%;
    margin-top: var(--espace-m);
    background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte);
    overflow: hidden;
}
.perspective-stage img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; user-select: none; }
.perspective-overlay { position: absolute; inset: 0; pointer-events: none; }
.perspective-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.perspective-overlay polygon { fill: rgba(224, 177, 0, 0.12); stroke: var(--couleur-primaire); stroke-width: 2; }
.perspective-point {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.875rem;
    border-radius: 50%;
    background: var(--couleur-primaire);
    color: #0B0D10;
    border: 2px solid var(--couleur-fond);
    font-family: var(--police-donnees);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}
.perspective-point:active { cursor: grabbing; }
/* Loupe de placement des coins (voir carton-perspective.js) : position:fixed (jamais
   dans la scene, qui a overflow:hidden) et pointer-events:none pour ne jamais gener le
   glisser en cours sur la poignee sous-jacente. */
#perspective-loupe {
    position: fixed;
    z-index: 50;
    border-radius: 50%;
    border: 3px solid var(--couleur-primaire);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    background: var(--couleur-fond-secondaire);
}
#perspective-loupe[hidden] { display: none; }

/* Calibrage des zones + placement des impacts (port du PoC TargetBook) */
/* La barre d'outils vit desormais DANS la colonne de l'image (.impact-center-panel),
   pas au-dessus des deux colonnes : son bord droit s'aligne ainsi avec celui de la
   zone de visualisation de la cible, plutot qu'avec le bord du panneau lateral. */
/* Deux lignes plutot qu'une seule avec 3 groupes : la colonne image (~600px) n'est pas
   assez large pour Retour + zoom + les deux boutons de mode sur une seule rangee sans
   que ces derniers se retrouvent ecrases (texte qui retombe sur plusieurs lignes). */
/* Barre d'outils sur une seule ligne, dans la meme cellule de grille (colonne image)
   que .impact-center-panel : sa largeur disponible est donc celle de l'image, jamais
   celle de la page entiere - boutons compacts pour tenir sur cette largeur reduite.
   .impact-editor-grid__case-vide occupe la case du haut au-dessus du panneau de droite
   pour que celui-ci demarre exactement au meme niveau que la zone image en dessous. */
.impact-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: var(--espace-s); flex-wrap: wrap; }
.impact-editor-grid__case-vide { display: block; }
/* Propre ligne de grille (colonne gauche uniquement, .impact-editor-grid__case-vide tient
   la colonne droite) : garde le cadre photo et le panneau de droite au meme niveau malgre
   ce texte ajoute juste au-dessus de l'image. */
.impact-aide-navigation { margin: 0 0 0.15rem; color: var(--couleur-texte-attenue); font-size: 0.78rem; text-align: center; }
.impact-toolbar-group { display: flex; gap: 0.35rem; align-items: center; flex-shrink: 0; }
.impact-toolbar-group .bouton { white-space: nowrap; padding: 0.5rem 0.6rem; font-size: 0.82rem; min-height: 2.25rem; }
.impact-toolbar-group .bouton.is-active { background: var(--couleur-primaire); color: var(--couleur-fond); border-color: var(--couleur-primaire); }
.zoom-bouton {
    width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: var(--arrondi);
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte); cursor: pointer; font-family: var(--police-donnees); font-size: 0.8rem;
}
.zoom-bouton:hover { border-color: var(--couleur-primaire); }
.zoom-bouton.is-active { background: var(--couleur-primaire); color: var(--couleur-fond); border-color: var(--couleur-primaire); }
/* Retour a la fiche : bouton fantome (fond transparent), plus discret que les boutons
   pleins juxtaposes qui le faisaient paraitre enorme en comparaison. */
.bouton-retour {
    display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; white-space: nowrap;
    background: transparent; border: 1px solid transparent; border-radius: var(--arrondi);
    color: var(--couleur-texte-attenue); font-weight: 600; font-size: 0.85rem;
    padding: 0.5rem 0.4rem; cursor: pointer; text-decoration: none;
}
.bouton-retour:hover { color: var(--couleur-primaire); }
.bouton-retour svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
/* Column-gap seul (pas de row-gap) : le gap vertical vient uniquement du margin-bottom
   de .impact-toolbar, pour rester identique a celui entre l'image et la barre du bas
   (les deux valaient auparavant grid-gap + margin, deux fois plus grand en haut). */
.impact-editor-grid { display: grid; grid-template-columns: 1fr 20rem; column-gap: var(--espace-m); row-gap: 0; align-items: start; }
.impact-stage {
    position: relative; overflow: hidden; background: var(--couleur-fond-secondaire);
    border: 1px solid var(--couleur-bordure); border-radius: var(--radius-carte);
    max-height: 70vh; display: flex; align-items: center; justify-content: center;
}
.impact-scene { position: relative; transform-origin: center center; }
.impact-scene img { display: block; max-width: 100%; max-height: 68vh; user-select: none; }
.impact-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* Grille 3 colonnes (Effacer | score | Enregistrer+Valider) plutot qu'un flex avec
   margin-left:auto : le score se retrouve vraiment centre entre Effacer et Enregistrer
   au lieu de sembler colle au groupe de droite (boutons asymetriques). */
.impact-bottom-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--espace-m); margin-top: var(--espace-s); }
.impact-bottom-actions__droite { display: flex; gap: var(--espace-s); flex-wrap: wrap; justify-self: end; }
.live-score-chip {
    font-family: var(--police-donnees); background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure); border-radius: var(--radius-pill);
    padding: 0.4rem 0.9rem; justify-self: center;
}
@media (max-width: 48rem) {
    .impact-bottom-actions { grid-template-columns: 1fr; justify-items: start; }
    .live-score-chip { justify-self: start; }
}
.impact-right-panel { background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--radius-carte); padding: var(--espace-m); }
.impact-panel-mode { display: none; }
.impact-panel-mode.is-active { display: block; }
.impact-panel { margin-bottom: var(--espace-m); }
.impact-panel h3 { margin: 0 0 var(--espace-xs); font-size: 1rem; }
/* Reglages secondaires (diametre reel, personnalisation) : discrets, pas de gros
   bloc blanc ni de bouton pleine largeur - repliés derriere un <details>. */
.impact-panel--discret .champ select,
.impact-panel--discret .champ input { font-size: 0.85rem; padding: 0.5rem var(--espace-s); }
.impact-details-discretes { margin-top: var(--espace-s); font-size: 0.8rem; }
.impact-details-discretes summary { cursor: pointer; color: var(--couleur-texte-attenue); }
.impact-details-discretes summary:hover { color: var(--couleur-primaire); }
.impact-form-discrete { display: flex; gap: var(--espace-xs); align-items: center; margin-top: var(--espace-xs); }
.impact-form-discrete input {
    flex: 1; background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure);
    border-radius: var(--arrondi); color: var(--couleur-texte); padding: 0.35rem 0.5rem; font-size: 0.8rem; font-family: inherit;
}
.bouton-discret {
    background: var(--couleur-fond-secondaire); border: 1px solid var(--couleur-bordure); border-radius: var(--arrondi);
    color: var(--couleur-texte-attenue); padding: 0.35rem 0.7rem; font-size: 0.78rem; cursor: pointer;
}
.bouton-discret:hover { border-color: var(--couleur-primaire); color: var(--couleur-texte); }
.bouton-discret--danger:hover { border-color: var(--couleur-danger); color: var(--couleur-danger); }
.bouton-discret:disabled { opacity: 0.5; cursor: default; }
/* Icone d'information (i) qui ouvre un petit popup explicatif au clic - convention de
   mesure du groupement, notion qui n'est pas evidente sans exemple. */
.champ-label-avec-info { display: flex; align-items: center; gap: 0.35rem; position: relative; margin-bottom: var(--espace-xs); }
.champ-label-avec-info label { margin-bottom: 0; }
.bouton-info {
    width: 1.15rem; height: 1.15rem; border-radius: 50%; flex-shrink: 0;
    background: transparent; border: 1px solid var(--couleur-texte-attenue); color: var(--couleur-texte-attenue);
    font-size: 0.7rem; font-style: italic; font-family: Georgia, 'Times New Roman', serif;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; cursor: pointer;
}
.bouton-info:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
/* Popup modal centre (pas une infobulle positionnee dans un coin, illisible) : fond
   assombri plein ecran + carte centree, fermeture par le bouton OK, un clic sur le
   fond ou Echap - meme esprit que la visionneuse. */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(3, 4, 5, 0.75);
    display: flex; align-items: center; justify-content: center; padding: var(--espace-l);
}
.modal-overlay[hidden] { display: none; }
.modal-carte {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--radius-carte); padding: var(--espace-l); max-width: 30rem;
    max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); font-size: 0.9rem;
}
.modal-carte h3 { margin: 0 0 var(--espace-s); }
.modal-carte p { margin: 0 0 0.6rem; line-height: 1.4; }
.modal-carte__actions { display: flex; justify-content: flex-end; margin-top: var(--espace-m); }
.modal-carte--large { max-width: 40rem; width: 100%; }
.modal-carte__iframe-wrapper {
    position: relative; width: 100%; padding-bottom: 65%; border-radius: var(--arrondi);
    overflow: hidden; border: 1px solid var(--couleur-bordure);
}
.modal-carte__iframe-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Declenche la popup carte depuis les coordonnees GPS d'une fiche (Stands) - discret,
   integre au texte de la valeur plutot qu'un gros bouton a part. */
.lien-carte {
    background: none; border: none; padding: 0; margin-left: 0.4rem;
    color: var(--couleur-primaire); text-decoration: underline; font-size: inherit; cursor: pointer;
}
.lien-carte:hover { opacity: 0.8; }
.illustration-convention-mesure { display: block; width: 100%; height: auto; margin: var(--espace-s) 0; }
.impact-ligne-compacte { display: flex; align-items: center; gap: var(--espace-xs); margin: var(--espace-xs) 0; font-size: 0.85rem; }
.impact-ligne-compacte input[type="range"] { flex: 1; }
/* Diamètre : valeur stable et référence physique sur sa propre ligne. */
.impact-ligne-compacte--diametre {
    display: grid;
    grid-template-columns: minmax(5rem, 6.5rem) minmax(5rem, 1fr) minmax(3.5rem, auto);
    column-gap: var(--espace-xs);
    row-gap: .35rem;
    align-items: center;
}
.impact-ligne-compacte--diametre input[type="range"] { width: 100%; min-width: 0; }
.impact-ligne-compacte--diametre output {
    min-width: 3.5rem;
    text-align: right;
    font-family: var(--police-donnees);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.impact-ligne-compacte--diametre #impact-diameter-physical-status {
    grid-column: 1 / -1;
    margin: 0 !important;
    display: block !important;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.target-control-row { display: flex; align-items: center; gap: var(--espace-xs); margin: var(--espace-xs) 0; font-size: 0.9rem; }
.target-control-row strong { margin-left: auto; font-family: var(--police-donnees); }
.target-color-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; }
.target-color-dot--rouge { background: rgba(231,55,55,.98); }
.target-color-dot--bleu { background: rgba(43,118,232,.95); }
.selected-impact-card { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-s); background: var(--couleur-fond-secondaire); border-radius: var(--arrondi); padding: 0.5rem var(--espace-s); margin: var(--espace-s) 0; font-size: 0.85rem; }
.score-total { display: flex; align-items: baseline; gap: var(--espace-xs); font-family: var(--police-donnees); font-size: 1.5rem; margin-bottom: var(--espace-xs); }
.score-total span { font-size: 0.9rem; color: var(--couleur-texte-attenue); }
/* Marge a droite pour que l'ascenseur ne recouvre jamais les chiffres du score. */
.score-list { max-height: 12rem; overflow-y: auto; margin-top: var(--espace-s); padding-right: var(--espace-s); }
.score-row { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--couleur-bordure); font-size: 0.85rem; }
@media (max-width: 900px) {
    .impact-editor-grid { grid-template-columns: 1fr; }
    .impact-toolbar { grid-template-columns: 1fr; text-align: center; }
    .impact-toolbar > * { justify-self: center; }
}