/* =====================================================================
   Saucissetizen — css_theme.css
   Fichier : /volume1/web/saucissetizen/css/css_theme.css

   RÔLE : la charte graphique de toute l'application.

   Organisation du fichier :
     1. Variables (couleurs, tailles) — à modifier ici pour changer tout le thème
     2. Bases (page, textes, liens)
     3. Fond étoilé
     4. En-tête et menu
     5. Contenu, titres
     6. Panneaux et grilles
     7. Boutons
     8. Formulaires
     9. Messages (alertes) et badges
    10. Tableaux et statuts
    11. Pied de page
    12. Comptes : avatars, compte connecté, connexion (étape 2)
    12 bis. Encyclopédie : fiches, cartes, services, filtres (étape 4)
    12 ter. Recherche et menu Administration (étape 5)
    12 quater. Carnet de voyage : dépôt, recadrage, mosaïque, visionneuse (étape 6)
    12 quinquies. Visuels des fiches : bannière, visuel rond, changement d'image (étape 6 bis)
    12 sexies. Tableau de bord : accueil, chiffres, activité, raccourcis (étape 7)
    12 septies. Fiches modifiables : notes de terrain, services, respirable (étape 8a)
    12 octies. Fiches « Découverte », doublons, fusion, lieux disparus (étape 8b)
    12 nonies. Images du thème (configuration) et bloc Terminaux repliable (étape 9)
    12 decies. Fiche à imprimer / PDF (étape 10)
    12 undecies. Fiches cachées (étape 11 bis)
    13. Petits écrans (téléphone)

   Convention de nommage : toutes les classes commencent par "sz-"
   (pour SaucisSetiZen) afin de ne jamais entrer en conflit avec une
   bibliothèque externe.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABLES
   --------------------------------------------------------------------- */
:root {
    /* Fonds */
    --sz-fond: #05080e;              /* noir spatial */
    --sz-fond-entete: rgba(5, 8, 14, 0.82);
    --sz-panneau: #0b131d;           /* fond des panneaux */
    --sz-panneau-clair: #101c2a;     /* survol, champs */
    --sz-bord: #1d3346;              /* bordures */
    --sz-bord-clair: #2a4458;

    /* Textes */
    --sz-texte: #dbe7f0;             /* texte courant */
    --sz-texte-fort: #f2f8fc;        /* titres */
    --sz-texte-doux: #9fb4c4;        /* textes secondaires */
    --sz-texte-discret: #8197a8;     /* légendes */

    /* Accents */
    --sz-cyan: #3fd0f0;
    --sz-cyan-clair: #8fe6f8;
    --sz-cyan-fonce: #05121a;        /* texte posé sur un bouton cyan */
    --sz-ambre: #f2a93b;
    --sz-vert: #4ed696;
    --sz-rouge: #ff6b6b;

    /* Polices */
    --sz-police-titre: 'Oxanium', 'Segoe UI', sans-serif;
    --sz-police-texte: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --sz-police-mono: 'JetBrains Mono', Consolas, monospace;

    /* Dimensions */
    --sz-largeur-max: 1280px;
    --sz-rayon: 12px;
    --sz-rayon-petit: 8px;
    --sz-marge-cote: 24px;
}


/* ---------------------------------------------------------------------
   2. BASES
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sz-police-texte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sz-texte);
    background-color: var(--sz-fond);
}

a {
    color: var(--sz-cyan);
}
a:hover {
    color: var(--sz-cyan-clair);
}

/* Contour bien visible quand on navigue au clavier (touche Tab) */
:focus-visible {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 3px;
}

img {
    max-width: 100%;
}

code {
    font-family: var(--sz-police-mono);
    font-size: 0.9em;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--sz-cyan-clair);
    /* Un texte de code trop long peut passer à la ligne, mais en restant
       d'un seul bloc quand il tient sur la ligne (évite "gmail.co / m") */
    overflow-wrap: anywhere;
    white-space: nowrap;
}

/* Les longs blocs de code (commandes) ont le droit de passer à la ligne */
li code,
p code {
    white-space: normal;
}
.sz-champ__aide code {
    white-space: nowrap;
}

/* Zone de texte du rapport technique (police à chasse fixe).
   ".sz-champ .sz-rapport" pour passer devant la règle générale des champs. */
.sz-rapport,
.sz-champ .sz-rapport {
    width: 100%;
    padding: 14px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    color: var(--sz-texte);
    font-family: var(--sz-police-mono);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}


/* ---------------------------------------------------------------------
   3. FOND ÉTOILÉ
   Plusieurs "couches" de petits points (étoiles) répétées en mosaïque,
   plus deux grandes lueurs colorées très douces (nébuleuses).
   Le fond reste fixe quand on fait défiler la page.
   --------------------------------------------------------------------- */
body {
    background-image:
        radial-gradient(1px 1px at 12% 18%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 68% 9%, #cfe9ff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 84% 32%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 33% 41%, #9fc4dd 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 66%, #ffffff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 7% 77%, #cfe9ff 50%, transparent 51%),
        radial-gradient(1px 1px at 91% 84%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 24% 93%, #9fc4dd 50%, transparent 51%),
        radial-gradient(900px 520px at 88% -8%, rgba(63, 208, 240, 0.10), transparent 70%),
        radial-gradient(760px 520px at -12% 45%, rgba(242, 169, 59, 0.06), transparent 70%);
    background-size:
        420px 420px, 420px 420px, 420px 420px, 420px 420px,
        420px 420px, 420px 420px, 420px 420px, 420px 420px,
        100% 100%, 100% 100%;
    background-attachment: fixed;
}


/* ---------------------------------------------------------------------
   4. EN-TÊTE ET MENU
   --------------------------------------------------------------------- */
.sz-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sz-entete {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--sz-fond-entete);
    border-bottom: 1px solid var(--sz-bord);
    backdrop-filter: blur(8px);
}

.sz-entete__interieur {
    max-width: var(--sz-largeur-max);
    margin: 0 auto;
    padding: 12px var(--sz-marge-cote);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.sz-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--sz-texte-fort);
}
.sz-logo:hover {
    color: var(--sz-texte-fort);
}
.sz-logo__texte {
    font-family: var(--sz-police-titre);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 3px;
}

.sz-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-grow: 1;
}

.sz-menu__lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--sz-texte-doux);
    text-decoration: none;
    font-size: 15px;
    border-bottom: 2px solid transparent;
}
.sz-menu__lien:hover {
    color: var(--sz-texte-fort);
}
.sz-menu__lien--actif {
    color: var(--sz-cyan);
    border-bottom-color: var(--sz-cyan);
}


/* ---------------------------------------------------------------------
   5. CONTENU ET TITRES
   --------------------------------------------------------------------- */
.sz-contenu {
    flex-grow: 1;
    width: 100%;
    max-width: var(--sz-largeur-max);
    margin: 0 auto;
    padding: 40px var(--sz-marge-cote) 72px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Petite ligne au-dessus d'un titre, style "étiquette de cockpit" */
.sz-surtitre {
    margin: 0;
    font-family: var(--sz-police-mono);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sz-ambre);
}

h1,
h2,
h3 {
    font-family: var(--sz-police-titre);
    color: var(--sz-texte-fort);
    line-height: 1.15;
    margin: 0;
}
h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
}
h2 {
    font-size: 24px;
    font-weight: 600;
}
h3 {
    font-size: 19px;
    font-weight: 600;
}

p {
    margin: 0;
}

.sz-intro {
    max-width: 760px;
    font-size: 17px;
    color: var(--sz-texte-doux);
}

/* Bloc de titre de page : surtitre + titre + intro */
.sz-titre-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ---------------------------------------------------------------------
   6. PANNEAUX ET GRILLES
   Un panneau = un encadré sombre. Le petit trait cyan en haut à gauche
   rappelle les interfaces de vaisseau.
   --------------------------------------------------------------------- */
.sz-panneau {
    position: relative;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sz-panneau::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 24px;
    width: 56px;
    height: 2px;
    background: var(--sz-cyan);
}

.sz-panneau__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.sz-texte-doux {
    color: var(--sz-texte-doux);
}
.sz-petit {
    font-size: 14px;
}

/* Grille qui s'adapte toute seule à la largeur de l'écran */
.sz-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Liste simple sans puces, avec espacement */
.sz-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ---------------------------------------------------------------------
   7. BOUTONS
   --------------------------------------------------------------------- */
.sz-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-cyan);
    background: var(--sz-cyan);
    color: var(--sz-cyan-fonce);
    font-family: var(--sz-police-texte);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.sz-bouton:hover {
    background: var(--sz-cyan-clair);
    border-color: var(--sz-cyan-clair);
    color: var(--sz-cyan-fonce);
}

/* Bouton secondaire : contour seulement */
.sz-bouton--secondaire {
    background: transparent;
    color: var(--sz-texte-fort);
    border-color: var(--sz-bord-clair);
}
.sz-bouton--secondaire:hover {
    background: var(--sz-panneau-clair);
    border-color: var(--sz-cyan);
    color: var(--sz-texte-fort);
}

.sz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
}


/* ---------------------------------------------------------------------
   8. FORMULAIRES
   --------------------------------------------------------------------- */
.sz-formulaire {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 560px;
}

.sz-champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sz-champ label {
    font-weight: 600;
    color: var(--sz-texte-fort);
}

.sz-champ input[type="text"],
.sz-champ input[type="email"],
.sz-champ input[type="password"],
.sz-champ input[type="number"],
.sz-champ select,
.sz-champ textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-size: 16px;
}
.sz-champ input:focus,
.sz-champ select:focus,
.sz-champ textarea:focus {
    outline: none;
    border-color: var(--sz-cyan);
    box-shadow: 0 0 0 3px rgba(63, 208, 240, 0.18);
}

/* Champ au contenu "technique" (numéro de version, codes...) */
.sz-champ--mono input {
    font-family: var(--sz-police-mono);
    letter-spacing: 1px;
    max-width: 220px;
}

.sz-champ__aide {
    font-size: 14px;
    color: var(--sz-texte-doux);
}


/* ---------------------------------------------------------------------
   9. MESSAGES (ALERTES) ET BADGES
   --------------------------------------------------------------------- */
.sz-alerte {
    padding: 14px 18px;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid;
    font-weight: 500;
}
.sz-alerte--succes {
    background: rgba(78, 214, 150, 0.10);
    border-color: var(--sz-vert);
    color: #a6f3cc;
}
.sz-alerte--erreur {
    background: rgba(255, 107, 107, 0.10);
    border-color: var(--sz-rouge);
    color: #ffb3b3;
}
.sz-alerte--info {
    background: rgba(63, 208, 240, 0.08);
    border-color: var(--sz-cyan);
    color: var(--sz-cyan-clair);
}

.sz-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--sz-bord-clair);
    font-family: var(--sz-police-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sz-badge--ambre {
    border-color: var(--sz-ambre);
    color: var(--sz-ambre);
    background: rgba(242, 169, 59, 0.08);
}


/* ---------------------------------------------------------------------
   10. TABLEAUX ET STATUTS
   Les tableaux larges défilent horizontalement dans leur cadre au lieu
   de déborder de l'écran.
   --------------------------------------------------------------------- */
.sz-tableau-cadre {
    overflow-x: auto;
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
}

.sz-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.sz-tableau th,
.sz-tableau td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sz-bord);
}
.sz-tableau tr:last-child td {
    border-bottom: 0;
}
.sz-tableau th {
    background: var(--sz-panneau-clair);
    font-family: var(--sz-police-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-texte-doux);
}
.sz-tableau td:first-child {
    color: var(--sz-texte-fort);
    font-weight: 500;
}

/* Pastille de statut : OK / Attention / Erreur / En cours */
.sz-statut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
}
.sz-statut::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.sz-statut--ok { color: var(--sz-vert); }
.sz-statut--attention { color: var(--sz-ambre); }
.sz-statut--erreur { color: var(--sz-rouge); }
.sz-statut--attente { color: var(--sz-texte-discret); }

/* Résumé chiffré en haut de la page de vérification */
.sz-compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--sz-bord);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    overflow: hidden;
}
.sz-compteur {
    background: var(--sz-panneau);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sz-compteur__libelle {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sz-texte-doux);
}
.sz-compteur__valeur {
    font-family: var(--sz-police-titre);
    font-size: 30px;
    font-weight: 600;
    color: var(--sz-texte-fort);
}


/* ---------------------------------------------------------------------
   11. PIED DE PAGE
   --------------------------------------------------------------------- */
.sz-pied {
    border-top: 1px solid var(--sz-bord);
    background: rgba(5, 8, 14, 0.7);
    padding: 22px var(--sz-marge-cote);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sz-pied__ligne {
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-pied__mention {
    font-size: 12px;
    color: var(--sz-texte-discret);
}


/* ---------------------------------------------------------------------
   12. COMPTES : AVATARS, COMPTE CONNECTÉ, CONNEXION (étape 2)
   --------------------------------------------------------------------- */

/* Avatar rond (image ou initiale du pseudo) */
.sz-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sz-bord);
    border: 1px solid var(--sz-bord-clair);
}
.sz-avatar--initiale {
    font-family: var(--sz-police-titre);
    font-weight: 700;
    color: var(--sz-ambre);
}
.sz-avatar--petit {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.sz-avatar--moyen {
    width: 44px;
    height: 44px;
    font-size: 18px;
}
.sz-avatar--grand {
    width: 128px;
    height: 128px;
    font-size: 48px;
}

/* Bloc "compte connecté" à droite de l'en-tête */
.sz-compte {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.sz-compte form {
    margin: 0;
}
.sz-compte__lien {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 14px 4px 6px;
    border: 1px solid var(--sz-bord);
    border-radius: 999px;
    background: var(--sz-panneau);
    color: var(--sz-texte);
    text-decoration: none;
    font-size: 14px;
}
.sz-compte__lien:hover,
.sz-compte__lien--actif {
    border-color: var(--sz-cyan);
    color: var(--sz-texte-fort);
}

/* Bouton rond avec seulement une icône (ex. déconnexion) */
.sz-bouton-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sz-bord);
    background: var(--sz-panneau);
    color: var(--sz-texte-doux);
    cursor: pointer;
}
.sz-bouton-icone:hover {
    border-color: var(--sz-rouge);
    color: var(--sz-rouge);
}

/* Petit bouton (dans les tableaux) */
.sz-bouton--petit {
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
}

/* Bouton "danger" (suppression) */
.sz-bouton--danger {
    background: transparent;
    color: #ffb3b3;
    border-color: rgba(255, 107, 107, 0.55);
}
.sz-bouton--danger:hover {
    background: rgba(255, 107, 107, 0.12);
    border-color: var(--sz-rouge);
    color: #ffd0d0;
}

/* Pages publiques (connexion, installation) : contenu étroit et centré */
.sz-contenu--centre {
    max-width: 520px;
    justify-content: center;
}

/* Case à cocher avec son texte */
.sz-case {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    color: var(--sz-texte);
}
.sz-case input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--sz-cyan);
}

/* Interrupteur "Mot de passe perdu" (case à cocher dessinée en bouton glissant) */
.sz-interrupteur {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    color: var(--sz-texte-doux);
}
.sz-interrupteur input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.sz-interrupteur__piste {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--sz-bord);
    border: 1px solid var(--sz-bord-clair);
    flex-shrink: 0;
    transition: background-color 0.15s;
}
.sz-interrupteur__piste::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sz-texte-doux);
    transition: transform 0.15s, background-color 0.15s;
}
.sz-interrupteur input:checked + .sz-interrupteur__piste {
    background: rgba(63, 208, 240, 0.25);
    border-color: var(--sz-cyan);
}
.sz-interrupteur input:checked + .sz-interrupteur__piste::after {
    transform: translateX(20px);
    background: var(--sz-cyan);
}
.sz-interrupteur input:focus-visible + .sz-interrupteur__piste {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 3px;
}

/* Le bloc "mot de passe perdu" n'apparaît que si l'interrupteur est activé.
   ":has()" = "le panneau qui contient un interrupteur coché" : pas besoin
   de JavaScript pour afficher ou cacher le bloc. */
.sz-mdp-perdu {
    display: none;
}
.sz-bascule:has(.sz-interrupteur input:checked) .sz-mdp-perdu {
    display: flex;
}

/* Champ d'envoi de fichier (avatar) */
.sz-champ input[type="file"] {
    padding: 10px;
    background: var(--sz-panneau-clair);
    border: 1px dashed var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    color: var(--sz-texte-doux);
    font-family: var(--sz-police-texte);
    font-size: 15px;
}
.sz-champ input[type="file"]::file-selector-button {
    margin-right: 14px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-bord-clair);
    background: var(--sz-panneau);
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-weight: 600;
    cursor: pointer;
}

/* Encadré affichant un mot de passe temporaire (une seule fois) */
.sz-mdp-temporaire {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid var(--sz-ambre);
    border-radius: var(--sz-rayon-petit);
    background: rgba(242, 169, 59, 0.08);
}
.sz-mdp-temporaire__valeur {
    font-family: var(--sz-police-mono);
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--sz-texte-fort);
    word-break: break-all;
    user-select: all;   /* un clic sélectionne tout le mot de passe */
}

/* Identité (avatar + pseudo + e-mail) dans un tableau ou un profil */
.sz-identite {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sz-identite__textes {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sz-identite__email {
    font-size: 13px;
    font-weight: 400;
    color: var(--sz-texte-doux);
    word-break: break-all;
}

/* Boutons d'action côte à côte dans un tableau */
.sz-actions-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sz-actions-ligne form {
    margin: 0;
}

/* Deux colonnes (profil : avatar à gauche, formulaire à droite) qui
   passent l'une sous l'autre sur petit écran */
.sz-deux-colonnes {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.sz-deux-colonnes > :first-child {
    flex: 0 0 auto;
}
.sz-deux-colonnes > :last-child {
    flex: 1 1 320px;
    min-width: 0;
}


/* Texte lu par les lecteurs d'écran mais invisible à l'écran
   (ex. étiquette d'une liste déroulante dans un tableau) */
.sz-visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Formulaire compact "rôle" dans le tableau des comptes (étape 3b) */
.sz-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 6px;
}
.sz-role select {
    min-height: 38px;
    padding: 4px 10px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-size: 14px;
}
.sz-role select:disabled {
    opacity: 0.6;
}
.sz-role .sz-case {
    align-items: center;
    gap: 8px;
}
.sz-role .sz-case input {
    margin: 0;
}

/* Bloc dépliable (détails, listes longues) */
.sz-depliant {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sz-depliant > summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--sz-texte-fort);
    list-style-position: inside;
}
.sz-depliant > summary:hover {
    color: var(--sz-cyan);
}
.sz-depliant[open] > summary {
    margin-bottom: 12px;
}

/* Liste sur plusieurs colonnes (noms sans traduction) */
.sz-liste-colonnes {
    margin: 0;
    padding: 0 0 0 18px;
    columns: 260px;
    column-gap: 28px;
    font-size: 14px;
    color: var(--sz-texte-doux);
}
.sz-liste-colonnes li {
    break-inside: avoid;
    padding: 2px 0;
}


/* ---------------------------------------------------------------------
   12 bis. ENCYCLOPÉDIE (étape 4)
   --------------------------------------------------------------------- */

/* Icône SVG en ligne : prend la taille et la couleur du texte autour */
.sz-icone {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Fil d'Ariane : Encyclopédie › Stanton › microTech */
.sz-fil {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--sz-police-mono);
    font-size: 13px;
    color: var(--sz-texte-discret);
}
.sz-fil a {
    text-decoration: none;
}
.sz-fil a:hover {
    text-decoration: underline;
}
.sz-fil [aria-current] {
    color: var(--sz-texte);
}

/* En-tête d'une fiche : visuel + nom + pastilles */
.sz-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px 44px;
    padding: 36px;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    border-radius: 16px;
}
.sz-hero__visuel {
    flex-shrink: 0;
    display: flex;
}
.sz-hero__textes {
    flex: 999 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sz-hero h1 {
    overflow-wrap: anywhere;
}
.sz-hero__en {
    color: var(--sz-texte-doux);
    font-size: 15px;
}

/* Visuel d'un type de lieu (station, avant-poste...) dans un cercle */
.sz-visuel-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #16324a, #0a1622 70%);
    border: 1px solid var(--sz-bord-clair);
    color: var(--sz-cyan);
    box-shadow: 0 0 40px rgba(63, 208, 240, 0.12);
}
.sz-visuel-type .sz-icone {
    width: 46%;
    height: 46%;
}
.sz-visuel-astre {
    flex-shrink: 0;
}

/* Pastilles d'information (respirable, armistice, faction...) */
.sz-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sz-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--sz-bord-clair);
    background: var(--sz-panneau-clair);
    font-size: 14px;
    color: var(--sz-texte);
}
.sz-pastille--vert {
    border-color: var(--sz-vert);
    background: rgba(78, 214, 150, 0.1);
    color: #a6f3cc;
}
.sz-pastille--ambre {
    border-color: var(--sz-ambre);
    background: rgba(242, 169, 59, 0.1);
    color: #ffd08a;
}
.sz-pastille--cyan {
    border-color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.08);
    color: var(--sz-cyan-clair);
}
.sz-pastille--coche::before {
    content: '✓';
    color: var(--sz-vert);
    font-weight: 700;
}

/* Liste des systèmes */
.sz-grille-systemes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.sz-carte-systeme {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    text-decoration: none;
    color: var(--sz-texte);
    transition: border-color 0.15s, transform 0.15s;
}
.sz-carte-systeme:hover {
    border-color: var(--sz-cyan);
    color: var(--sz-texte);
    transform: translateY(-2px);
}
.sz-carte-systeme__textes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.sz-carte-systeme__nom {
    font-family: var(--sz-police-titre);
    font-size: 26px;
    color: var(--sz-texte-fort);
}
.sz-carte-systeme__chiffres {
    font-family: var(--sz-police-mono);
    font-size: 12px;
    color: var(--sz-ambre);
}

/* Grille des planètes / lunes */
.sz-grille-astres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.sz-carte-astre {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 10px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    text-decoration: none;
    color: var(--sz-texte);
}
.sz-carte-astre:hover {
    border-color: var(--sz-cyan);
    color: var(--sz-texte);
}
.sz-carte-astre__textes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sz-carte-astre__nom {
    font-family: var(--sz-police-titre);
    font-size: 18px;
    color: var(--sz-texte-fort);
}
.sz-carte-astre__designation {
    font-family: var(--sz-police-mono);
    font-size: 12px;
    color: var(--sz-ambre);
}
.sz-carte-astre__resume {
    font-size: 13px;
    color: var(--sz-texte-doux);
}

/* Liste des lieux */
.sz-liste-lieux {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-carte-lieu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    text-decoration: none;
    color: var(--sz-texte);
}
.sz-carte-lieu:hover {
    border-color: var(--sz-cyan);
    color: var(--sz-texte);
}
.sz-carte-lieu[hidden] {
    display: none;
}
.sz-carte-lieu__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord-clair);
    color: var(--sz-cyan);
    flex-shrink: 0;
}
.sz-carte-lieu__textes {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sz-carte-lieu__type {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-texte-discret);
}
.sz-carte-lieu__nom {
    font-weight: 600;
    color: var(--sz-texte-fort);
}
.sz-carte-lieu__en {
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-carte-lieu__services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sz-mini-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    color: var(--sz-ambre);
}
.sz-mini-service .sz-icone {
    width: 18px;
    height: 18px;
}
.sz-mini-service--plus {
    width: auto;
    padding: 0 8px;
    font-family: var(--sz-police-mono);
    font-size: 12px;
}

/* Boutons de filtre */
.sz-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sz-filtre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--sz-bord-clair);
    background: var(--sz-panneau-clair);
    color: var(--sz-texte);
    font-family: var(--sz-police-texte);
    font-size: 14px;
    cursor: pointer;
}
.sz-filtre:hover {
    border-color: var(--sz-cyan);
}
.sz-filtre--actif {
    background: var(--sz-cyan);
    border-color: var(--sz-cyan);
    color: var(--sz-cyan-fonce);
    font-weight: 600;
}
.sz-filtre__nombre {
    font-family: var(--sz-police-mono);
    font-size: 12px;
    opacity: 0.8;
}

/* Grille des services d'un lieu (icône + libellé) */
.sz-grille-services {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.sz-service {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    font-size: 15px;
}
.sz-service__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(242, 169, 59, 0.1);
    border: 1px solid rgba(242, 169, 59, 0.35);
    color: var(--sz-ambre);
    flex-shrink: 0;
}
.sz-service__icone .sz-icone {
    width: 24px;
    height: 24px;
}

/* Informations : libellé / valeur */
.sz-infos {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 24px;
}
.sz-infos__ligne {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sz-infos dt {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-texte-discret);
}
.sz-infos dd {
    margin: 0;
    color: var(--sz-texte-fort);
}

/* Panneau d'information secondaire */
.sz-panneau--discret {
    background: transparent;
    border-style: dashed;
}
.sz-panneau--discret::before {
    display: none;
}


/* ---------------------------------------------------------------------
   12 ter. RECHERCHE ET MENU ADMINISTRATION (étape 5)
   --------------------------------------------------------------------- */

/* Le menu ne pousse plus le reste : c'est la recherche qui prend la place libre */
.sz-menu {
    flex-grow: 0;
    align-items: center;
}
.sz-compte {
    margin-left: 0;
}

/* Menu déroulant "Administration" */
.sz-menu-admin {
    position: relative;
}
.sz-menu-admin > summary {
    list-style: none;
    cursor: pointer;
    gap: 6px;
}
.sz-menu-admin > summary::-webkit-details-marker {
    display: none;
}
.sz-menu-admin__fleche {
    width: 16px;
    height: 16px;
    transition: transform 0.15s;
}
.sz-menu-admin[open] .sz-menu-admin__fleche {
    transform: rotate(180deg);
}
.sz-menu-admin__liste {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.sz-menu-admin__lien {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--sz-texte);
    text-decoration: none;
    font-size: 15px;
}
.sz-menu-admin__lien:hover {
    background: var(--sz-panneau-clair);
    color: var(--sz-texte-fort);
}
.sz-menu-admin__lien--actif {
    color: var(--sz-cyan);
}

/* Barre de recherche de l'en-tête */
.sz-recherche {
    position: relative;
    flex: 1 1 220px;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.sz-recherche__loupe {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--sz-texte-discret);
    pointer-events: none;
}
.sz-recherche input[type="search"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 40px 8px 40px;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord-clair);
    border-radius: 999px;
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-size: 15px;
}
.sz-recherche input[type="search"]:focus {
    outline: none;
    border-color: var(--sz-cyan);
    box-shadow: 0 0 0 3px rgba(63, 208, 240, 0.18);
}
.sz-recherche__raccourci {
    position: absolute;
    right: 12px;
    padding: 1px 7px;
    border: 1px solid var(--sz-bord-clair);
    border-radius: 4px;
    font-family: var(--sz-police-mono);
    font-size: 12px;
    color: var(--sz-texte-discret);
    pointer-events: none;
}
.sz-recherche input:focus ~ .sz-recherche__raccourci {
    display: none;
}

/* Liste des résultats sous la barre */
.sz-recherche__liste {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    min-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-cyan);
    border-radius: var(--sz-rayon-petit);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.sz-recherche__liste[hidden] {
    display: none;
}
.sz-recherche__groupe {
    padding: 10px 10px 4px;
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sz-ambre);
}
.sz-recherche__option {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.sz-recherche__option:hover,
.sz-recherche__option--active {
    background: var(--sz-panneau-clair);
    box-shadow: inset 3px 0 0 var(--sz-cyan);
}
.sz-recherche__nom {
    font-weight: 600;
    color: var(--sz-texte-fort);
}
.sz-recherche__en,
.sz-recherche__contexte {
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-recherche__contexte {
    color: var(--sz-texte-discret);
}
.sz-recherche__vide {
    padding: 12px 10px;
    color: var(--sz-texte-doux);
}
.sz-recherche__tous {
    margin-top: 4px;
    padding: 10px;
    border-top: 1px solid var(--sz-bord);
    font-size: 14px;
}

/* Formulaire de la page de résultats */
.sz-recherche-page {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.sz-recherche-page input[type="search"] {
    flex: 1 1 280px;
    min-height: 48px;
    padding: 10px 16px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord-clair);
    border-radius: var(--sz-rayon-petit);
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-size: 17px;
}
.sz-recherche-page input[type="search"]:focus {
    outline: none;
    border-color: var(--sz-cyan);
}


/* ---------------------------------------------------------------------
   12 quater. CARNET DE VOYAGE (étape 6)
   --------------------------------------------------------------------- */

/* Zone de dépôt des captures */
.sz-depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px;
    border: 2px dashed var(--sz-bord-clair);
    border-radius: var(--sz-rayon);
    background: var(--sz-panneau-clair);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.sz-depot:hover,
.sz-depot--survol,
.sz-depot:focus-within {
    border-color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.06);
}
.sz-depot .sz-icone {
    width: 40px;
    height: 40px;
    color: var(--sz-cyan);
}

/* File des captures choisies */
.sz-file-captures {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.sz-file-captures:empty {
    display: none;
}
.sz-file-capture {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
}
.sz-file-capture--active {
    border-color: var(--sz-cyan);
}
.sz-file-capture__bouton {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--sz-texte);
    font-family: var(--sz-police-texte);
    text-align: left;
    cursor: pointer;
}
.sz-file-capture__bouton img {
    width: 84px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.sz-file-capture__textes {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sz-file-capture__nom {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-file-capture__etat {
    font-size: 12px;
    color: var(--sz-texte-doux);
}
.sz-file-capture__etat--ok { color: var(--sz-vert); }
.sz-file-capture__etat--erreur { color: var(--sz-rouge); }
.sz-file-capture__retirer {
    width: 36px;
    height: 36px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Boutons de format */
.sz-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Outil de recadrage : l'image et le cadre par-dessus */
.sz-recadreur {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-bord);
    user-select: none;
    touch-action: none;   /* le doigt déplace le cadre au lieu de faire défiler la page */
}
.sz-recadreur img {
    display: block;
    max-width: 100%;
    max-height: 62vh;
    pointer-events: none;
}
.sz-cadre {
    position: absolute;
    border: 2px solid var(--sz-cyan);
    box-shadow: 0 0 0 9999px rgba(5, 8, 14, 0.62);   /* assombrit ce qui est hors du cadre */
    cursor: grab;
    background-image:
        linear-gradient(to right, rgba(63, 208, 240, 0.35) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(63, 208, 240, 0.35) 1px, transparent 1px);
    background-size: 33.333% 33.333%;   /* quadrillage "règle des tiers" */
}
.sz-cadre--deplacement {
    cursor: grabbing;
}
.sz-cadre:focus-visible {
    outline: 3px solid var(--sz-ambre);
    outline-offset: 2px;
}

.sz-reglages-cadre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 28px;
}
.sz-reglages-cadre .sz-champ {
    flex: 0 1 320px;
}
.sz-reglages-cadre input[type="range"] {
    width: 100%;
    accent-color: var(--sz-cyan);
}

/* Liste des recadrages d'une capture */
.sz-decoupes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-decoupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 8px 12px 8px 8px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
}
.sz-decoupe img {
    height: 60px;
    width: auto;
    max-width: 210px;
    border-radius: 6px;
}
.sz-decoupe__textes {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
}

/* Barre de progression de l'envoi */
.sz-progression {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-progression[hidden] {
    display: none;
}
.sz-progression__barre {
    height: 10px;
    border-radius: 999px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    overflow: hidden;
}
.sz-progression__barre span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sz-cyan), var(--sz-cyan-clair));
    transition: width 0.2s;
}

/* Mosaïque "livre de voyage" */
.sz-mosaique {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 170px;
    grid-auto-flow: dense;   /* comble les trous laissés par les grandes cases */
    gap: 12px;
}
.sz-tuile {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sz-bord);
    border-radius: 10px;
    background: var(--sz-panneau-clair);
    cursor: zoom-in;
}
.sz-tuile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.sz-tuile:hover img,
.sz-tuile:focus-visible img {
    transform: scale(1.04);
}
.sz-tuile--grande {
    grid-column: span 2;
    grid-row: span 2;
}
.sz-tuile--panorama {
    grid-column: 1 / -1;
}
.sz-tuile__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 12px 10px;
    background: linear-gradient(transparent, rgba(5, 8, 14, 0.88));
    color: var(--sz-texte-fort);
    font-family: var(--sz-police-texte);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}
.sz-tuile__legende:empty {
    display: none;
}
.sz-tuile__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(5, 8, 14, 0.75);
    border: 1px solid var(--sz-ambre);
    color: var(--sz-ambre);
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Visionneuse plein écran */
.sz-visionneuse {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(3, 5, 9, 0.96);
    color: var(--sz-texte);
}
.sz-visionneuse[open] {
    display: flex;
    flex-direction: column;
}
.sz-visionneuse::backdrop {
    background: rgba(0, 0, 0, 0.8);
}
.sz-visionneuse__haut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
}
.sz-visionneuse__compteur {
    font-family: var(--sz-police-mono);
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-visionneuse__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.sz-visionneuse__actions [hidden] {
    display: none;
}
.sz-visionneuse__scene {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
}
.sz-visionneuse__image {
    max-width: calc(100% - 120px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    touch-action: pan-y;
}
.sz-visionneuse__nav {
    flex-shrink: 0;
    width: 48px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--sz-bord-clair);
    background: rgba(11, 19, 29, 0.8);
    color: var(--sz-texte-fort);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.sz-visionneuse__nav:hover {
    border-color: var(--sz-cyan);
    color: var(--sz-cyan);
}
.sz-visionneuse__bas {
    padding: 14px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sz-visionneuse__legende {
    font-size: 17px;
    font-weight: 600;
    color: var(--sz-texte-fort);
}
.sz-visionneuse__auteur {
    font-size: 13px;
    color: var(--sz-texte-doux);
}


/* ---------------------------------------------------------------------
   12 quinquies. VISUELS DES FICHES (étape 6 bis)
   --------------------------------------------------------------------- */

/* Visuel personnel d'un astre : une image carrée affichée en rond */
.sz-visuel-astre--image {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--sz-bord-clair);
    box-shadow: 0 0 0 6px rgba(63, 208, 240, 0.06), 0 0 46px rgba(63, 208, 240, 0.16);
    background: var(--sz-panneau-clair);
}

/* Bouton « Changer le visuel / la bannière » dans l'en-tête de la fiche */
.sz-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.sz-hero__actions .sz-icone {
    width: 18px;
    height: 18px;
}

/* En-tête avec bannière panoramique : l'image occupe tout le fond,
   un dégradé sombre garde le texte lisible */
.sz-hero--banniere {
    position: relative;
    overflow: hidden;
    align-items: flex-end;
    aspect-ratio: 32 / 9;      /* le format de tes captures 5120 × 1440 */
    min-height: 300px;
    background: var(--sz-fond);
}
.sz-hero__banniere {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.sz-hero--banniere::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(5, 8, 14, 0.94) 0%, rgba(5, 8, 14, 0.6) 38%, rgba(5, 8, 14, 0) 72%),
        linear-gradient(to right, rgba(5, 8, 14, 0.55) 0%, rgba(5, 8, 14, 0) 60%);
}
.sz-hero--banniere .sz-hero__visuel,
.sz-hero--banniere .sz-hero__textes {
    position: relative;
    z-index: 2;
}
.sz-hero--banniere .sz-hero__visuel .sz-visuel-type {
    background: rgba(5, 8, 14, 0.7);
    backdrop-filter: blur(4px);
}
.sz-hero--banniere h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.sz-hero--banniere .sz-hero__en {
    color: var(--sz-texte);
}
/* Boutons posés sur une bannière : fond sombre pour rester lisibles (étape 11) */
.sz-hero--banniere .sz-bouton--secondaire {
    background: rgba(5, 8, 14, 0.78);
}

/* Astre (planète, lune, système) sur sa bannière : le rond se détache
   bien du paysage (ombre portée + anneau lumineux) — étape 8a bis */
.sz-hero--banniere .sz-hero__visuel svg.sz-visuel-astre {
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 28px rgba(63, 208, 240, 0.25));
}
.sz-hero--banniere .sz-hero__visuel .sz-visuel-astre--image {
    border: 3px solid rgba(219, 231, 240, 0.85);
    box-shadow:
        0 0 0 6px rgba(5, 8, 14, 0.55),
        0 0 0 8px rgba(63, 208, 240, 0.45),
        0 12px 40px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(63, 208, 240, 0.25);
}

/* Page « Changer le visuel » : image actuelle */
.sz-visuel-actuel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
}
.sz-visuel-actuel__banniere {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 32 / 9;
    object-fit: cover;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-bord);
}
.sz-visuel-actuel__textes {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Choix d'une photo du carnet comme source */
.sz-choix-photos {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.sz-choix-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    background: var(--sz-panneau-clair);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.sz-choix-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sz-choix-photo:hover,
.sz-choix-photo:focus-visible {
    border-color: var(--sz-cyan);
    transform: translateY(-1px);
}
.sz-choix-photo:focus-visible {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 2px;
}
.sz-choix-photo--actif {
    border-color: var(--sz-ambre);
    box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25);
}
.sz-choix-photo__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 8px 6px;
    background: linear-gradient(to top, rgba(5, 8, 14, 0.9), transparent);
    color: var(--sz-texte-fort);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Recadrage + aperçu côte à côte (l'un sous l'autre sur petit écran) */
.sz-visuel-recadrage {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 28px;
}
.sz-visuel-recadrage .sz-recadreur {
    flex: 1 1 420px;
    align-self: flex-start;
}
.sz-visuel-recadrage .sz-recadreur img {
    width: 100%;
    height: auto;
    max-height: none;
}
.sz-visuel-apercu {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-apercu-rond {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid var(--sz-bord-clair);
    box-shadow: 0 0 40px rgba(63, 208, 240, 0.15);
    background: var(--sz-panneau-clair);
}
.sz-apercu-banniere {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 32 / 9;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-bord-clair);
    background: var(--sz-panneau-clair);
}

/* Cadre rond (visuel d'astre) : le cercle montre ce qui sera visible */
.sz-cadre--rond {
    border-radius: 50%;
    background-image: none;
}


/* ---------------------------------------------------------------------
   12 sexies. TABLEAU DE BORD (étape 7)
   --------------------------------------------------------------------- */

/* Alerte orange (ex. demandes de mot de passe en attente) */
.sz-alerte--attention {
    background: rgba(242, 169, 59, 0.10);
    border-color: var(--sz-ambre);
    color: #ffd59a;
}
.sz-alerte a {
    margin-left: 8px;
    color: inherit;
    text-decoration: underline;
}

/* Bloc d'accueil : avatar, salutation, rôle, grande recherche */
.sz-accueil {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 36px;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(63, 208, 240, 0.12), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(242, 169, 59, 0.08), transparent 50%),
        var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    border-radius: 16px;
}
.sz-accueil__identite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
}
.sz-accueil__avatar {
    width: 96px;
    height: 96px;
    font-size: 40px;
    border: 2px solid var(--sz-cyan);
    box-shadow: 0 0 0 6px rgba(63, 208, 240, 0.08), 0 0 36px rgba(63, 208, 240, 0.18);
    background: var(--sz-panneau-clair);
}
.sz-accueil__textes {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-accueil__textes h1 {
    overflow-wrap: anywhere;
}
.sz-accueil__role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* Badge du rôle : une couleur par rôle */
.sz-badge--role {
    font-size: 13px;
    padding: 6px 14px;
}
.sz-badge--role-admin {
    border-color: var(--sz-ambre);
    color: var(--sz-ambre);
    background: rgba(242, 169, 59, 0.08);
}
.sz-badge--role-explorateur {
    border-color: var(--sz-cyan);
    color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.08);
}
.sz-badge--role-voyageur {
    border-color: var(--sz-vert);
    color: var(--sz-vert);
    background: rgba(78, 214, 150, 0.08);
}

/* Grande barre de recherche (même apparence que celle de l'en-tête, en plus grand) */
.sz-recherche--grande {
    flex: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
}
.sz-recherche--grande input[type="search"] {
    min-height: 58px;
    padding-left: 52px;
    font-size: 18px;
    background: var(--sz-fond);
}
.sz-recherche--grande .sz-recherche__loupe {
    left: 18px;
    width: 22px;
    height: 22px;
    color: var(--sz-cyan);
}

/* Chiffres de l'encyclopédie */
.sz-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}
.sz-chiffre {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--sz-panneau);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    border-top: 2px solid var(--sz-cyan);
}
.sz-chiffre__valeur {
    font-family: var(--sz-police-titre);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sz-texte-fort);
}
.sz-chiffre--texte .sz-chiffre__valeur {
    color: var(--sz-ambre);
}
.sz-chiffre__libelle {
    font-family: var(--sz-police-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-texte-doux);
}
.sz-chiffre__detail {
    font-size: 13px;
    color: var(--sz-texte-discret);
}

/* Derniers lieux modifiés : cartes illustrées */
.sz-grille-activite {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.sz-carte-activite {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    text-decoration: none;
    color: var(--sz-texte);
    transition: border-color 0.15s, transform 0.15s;
}
.sz-carte-activite:hover,
.sz-carte-activite:focus-visible {
    border-color: var(--sz-cyan);
    color: var(--sz-texte);
    transform: translateY(-2px);
}
.sz-carte-activite__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 50% 40%, #13263a, var(--sz-fond) 75%);
    overflow: hidden;
}
.sz-carte-activite__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Visuel rond d'un astre : affiché en rond au centre, pas étiré */
.sz-carte-activite--ronde .sz-carte-activite__image img {
    width: auto;
    height: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--sz-bord-clair);
    box-shadow: 0 0 30px rgba(63, 208, 240, 0.18);
}
.sz-carte-activite__textes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 16px;
    min-width: 0;
}
.sz-carte-activite__type {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-ambre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-carte-activite__nom {
    font-family: var(--sz-police-titre);
    font-size: 18px;
    color: var(--sz-texte-fort);
    overflow-wrap: anywhere;
}
.sz-carte-activite__quoi {
    font-size: 14px;
    color: var(--sz-texte);
}
.sz-carte-activite__date {
    font-size: 13px;
    color: var(--sz-texte-discret);
}

/* Raccourcis d'administration */
.sz-raccourcis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.sz-raccourci {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    text-decoration: none;
    color: var(--sz-texte-fort);
    transition: border-color 0.15s;
}
.sz-raccourci:hover,
.sz-raccourci:focus-visible {
    border-color: var(--sz-ambre);
    color: var(--sz-texte-fort);
}

/* Feuille de route repliable */
.sz-feuille-route summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}
.sz-feuille-route summary::-webkit-details-marker {
    display: none;
}
.sz-feuille-route summary::before {
    content: '▸';
    color: var(--sz-cyan);
    margin-right: 4px;
    transition: transform 0.15s;
}
.sz-feuille-route[open] summary::before {
    transform: rotate(90deg);
}
.sz-feuille-route__titre {
    flex: 1 1 auto;
    font-family: var(--sz-police-titre);
    font-size: 18px;
    font-weight: 600;
    color: var(--sz-texte-fort);
}
.sz-feuille-route[open] summary {
    margin-bottom: 16px;
}


/* ---------------------------------------------------------------------
   12 septies. FICHES MODIFIABLES (étape 8a)
   --------------------------------------------------------------------- */

/* Notes de terrain affichées sur la fiche */
.sz-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-left: 3px solid var(--sz-ambre);
    border-radius: var(--sz-rayon-petit);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.sz-notes p,
.sz-notes ul {
    margin: 0;
}
.sz-notes ul {
    padding-left: 22px;
}
.sz-notes li + li {
    margin-top: 4px;
}
.sz-notes strong {
    color: var(--sz-texte-fort);
}
/* Auteur et date au bout de chaque ligne des notes (étape 10) */
.sz-note-auteur {
    font-size: 0.85em;
    font-style: italic;
    color: var(--sz-texte-discret);
    white-space: nowrap;
}

/* Formulaire de modification : sections espacées */
.sz-fiche-modifier {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sz-fiche-modifier textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    line-height: 1.55;
}
.sz-notes-outils {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Choix « respirable » : trois grandes options */
.sz-choix-respirable {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}
.sz-choix-respirable legend {
    width: 100%;
    margin-bottom: 10px;
}
.sz-choix-respirable__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--sz-bord-clair);
    border-radius: 999px;
    background: var(--sz-panneau-clair);
    cursor: pointer;
}
.sz-choix-respirable__option input {
    accent-color: var(--sz-cyan);
    width: 18px;
    height: 18px;
    margin: 0;
}
.sz-choix-respirable__option:has(input:checked) {
    border-color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.10);
    color: var(--sz-texte-fort);
}
.sz-choix-respirable__option--oui:has(input:checked) {
    border-color: var(--sz-vert);
    background: rgba(78, 214, 150, 0.10);
}
.sz-choix-respirable__option--non:has(input:checked) {
    border-color: var(--sz-ambre);
    background: rgba(242, 169, 59, 0.10);
}
.sz-choix-respirable__option:has(input:focus-visible) {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 2px;
}

/* Sélecteur de services à icônes : caché tant que l'interrupteur
   « Modifier les services » n'est pas activé (sans JavaScript, grâce à :has) */
.sz-choix-services {
    display: none;
    flex-direction: column;
    gap: 18px;
}
.sz-bascule:has(#interrupteur-services:checked) .sz-choix-services {
    display: flex;
}
.sz-choix-services__groupe {
    margin: 0;
    padding: 0;
    border: 0;
}
.sz-choix-services__groupe legend {
    margin-bottom: 10px;
    font-family: var(--sz-police-mono);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sz-ambre);
}
.sz-choix-services__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.sz-choix-service {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px;
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    background: var(--sz-panneau-clair);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.sz-choix-service input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.sz-choix-service__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--sz-bord-clair);
    color: var(--sz-texte-discret);
    opacity: 0.55;
}
.sz-choix-service__icone .sz-icone {
    width: 24px;
    height: 24px;
}
.sz-choix-service__libelle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--sz-texte-doux);
    font-size: 14px;
}
.sz-choix-service__uex {
    font-family: var(--sz-police-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--sz-texte-discret);
}
.sz-choix-service:hover {
    border-color: var(--sz-bord-clair);
}
/* Service coché : bordure cyan, icône en couleur, petite coche */
.sz-choix-service:has(input:checked) {
    border-color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.08);
}
.sz-choix-service:has(input:checked) .sz-choix-service__icone {
    color: var(--sz-ambre);
    border-color: var(--sz-ambre);
    opacity: 1;
}
.sz-choix-service:has(input:checked) .sz-choix-service__libelle {
    color: var(--sz-texte-fort);
}
.sz-choix-service:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 10px;
    color: var(--sz-cyan);
    font-weight: 700;
}
.sz-choix-service:has(input:focus-visible) {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 2px;
}


/* Bloc « Lieux » repliable (étape 8a bis) */
.sz-depliant-lieux__resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.sz-depliant-lieux__resume::-webkit-details-marker {
    display: none;
}
.sz-depliant-lieux__resume h2 {
    margin: 0;
}
.sz-depliant-lieux__action {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--sz-cyan);
}
.sz-depliant-lieux__action::before {
    content: 'Afficher la liste ▾';
}
.sz-depliant-lieux[open] .sz-depliant-lieux__action::before {
    content: 'Replier ▴';
}
.sz-depliant-lieux__resume:hover .sz-depliant-lieux__action {
    text-decoration: underline;
}
.sz-depliant-lieux__resume:focus-visible {
    outline: 2px solid var(--sz-cyan);
    outline-offset: 4px;
    border-radius: 4px;
}
.sz-depliant-lieux[open] > .sz-panneau__entete {
    margin: 16px 0 18px;     /* de l'air entre les filtres et la première carte (retour de Jack) */
}
.sz-depliant-lieux[open] > .sz-panneau__entete:empty {
    display: none;
}


/* ---------------------------------------------------------------------
   12 octies. FICHES « DÉCOUVERTE », DOUBLONS, FUSION (étape 8b)
   --------------------------------------------------------------------- */

/* Petites étiquettes : « Découverte », « N'existe plus en jeu » */
.sz-etiquette {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-family: var(--sz-police-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
.sz-etiquette--decouverte {
    border-color: var(--sz-vert);
    color: var(--sz-vert);
    background: rgba(78, 214, 150, 0.10);
}
.sz-etiquette--disparu {
    border-color: var(--sz-rouge);
    color: #ffb3b3;
    background: rgba(255, 107, 107, 0.10);
}
.sz-etiquette--cache {   /* fiche cachée par l'admin (étape 11 bis) */
    border-color: var(--sz-texte-doux);
    color: var(--sz-texte-doux);
    background: rgba(255, 255, 255, 0.06);
}
.sz-hero__mentions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--sz-texte-doux);
}

/* Lieux ressemblants (contrôle anti-doublon) */
.sz-doublons {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--sz-ambre);
    border-radius: var(--sz-rayon-petit);
    background: rgba(242, 169, 59, 0.08);
}
.sz-doublons__titre {
    margin: 0 0 8px;
    font-weight: 600;
    color: #ffd59a;
}
.sz-doublons-confirmer {
    border-color: var(--sz-ambre);
}
.sz-doublons__liste {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-doublon {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 12px;
    border-radius: var(--sz-rayon-petit);
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
}
.sz-doublon--meme-parent {
    border-color: var(--sz-ambre);
}
.sz-doublon__nom {
    font-weight: 600;
}
.sz-doublon__en {
    color: var(--sz-texte-doux);
    font-size: 14px;
}
.sz-doublon__description {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-doublon .sz-bouton {
    margin-top: 6px;
}

/* Choix de la fiche cible d'une fusion */
.sz-choix-fusion {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sz-choix-fusion legend {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--sz-texte-fort);
}
.sz-choix-fusion__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon-petit);
    background: var(--sz-panneau-clair);
    cursor: pointer;
}
.sz-choix-fusion__option input {
    margin-top: 4px;
    accent-color: var(--sz-cyan);
}
.sz-choix-fusion__option:has(input:checked) {
    border-color: var(--sz-cyan);
    background: rgba(63, 208, 240, 0.08);
}


/* ---------------------------------------------------------------------
   12 nonies. IMAGES DU THÈME, TERMINAUX REPLIABLES (étape 9)
   --------------------------------------------------------------------- */

/* Contenu d'un bloc repliable (ex. tableau des terminaux) : de l'air sous le titre */
.sz-depliant-lieux[open] > .sz-depliant-lieux__contenu {
    margin-top: 16px;
}

/* Page de configuration : une carte par image du thème */
.sz-theme-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.sz-theme-carte {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--sz-panneau-clair);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
}
.sz-theme-carte h3 {
    margin: 0;
}
.sz-theme-carte__apercu {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--sz-rayon-petit);
    border: 1px solid var(--sz-bord-clair);
    background:
        radial-gradient(1px 1px at 20% 30%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 60%, #cfe9ff 50%, transparent 51%),
        radial-gradient(1px 1px at 45% 80%, #ffffff 50%, transparent 51%),
        var(--sz-fond);
    background-size: 90px 90px, 110px 110px, 70px 70px, auto;
}
.sz-theme-carte__apercu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sz-theme-carte__apercu--logo img {
    width: 45%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}
.sz-theme-carte__origine {
    color: var(--sz-texte-doux);
    text-align: center;
}
.sz-theme-carte__formulaire {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sz-theme-carte input[type="file"] {
    width: 100%;
    max-width: 100%;
    color: var(--sz-texte-doux);
    font-size: 14px;
}
/* Le bouton « Choisir un fichier » sur sa propre ligne : le nom du fichier
   choisi s'affiche en entier dessous (au lieu de « Auc…oisi ») */
.sz-theme-carte input[type="file"]::file-selector-button {
    display: block;
    width: 100%;
    margin: 0 0 8px;
}


/* ---------------------------------------------------------------------
   12 decies. FICHE À IMPRIMER / PDF (étape 10)
   La fiche d'information (fiche_export.php) : à l'écran une feuille
   sombre centrée ; à l'impression (« Enregistrer au format PDF »), des
   pages A4 au fond sombre, sans l'en-tête ni le pied de l'application.
   --------------------------------------------------------------------- */
.sz-imp {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    background: var(--sz-fond);
    border: 1px solid var(--sz-bord);
    border-radius: var(--sz-rayon);
    color: var(--sz-texte);
    font-size: 15px;
    line-height: 1.5;
}
.sz-imp__entete {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
    border-radius: 14px;
    border: 1px solid var(--sz-bord);
    background: var(--sz-panneau);
}
.sz-imp__visuel {
    flex-shrink: 0;
    display: flex;
}
.sz-imp__titres {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sz-imp__surtitre {
    margin: 0;
    font-family: var(--sz-police-mono);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sz-ambre);
}
.sz-imp__nom {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.sz-imp__en,
.sz-imp__fil {
    margin: 0;
    color: var(--sz-texte-doux);
}
.sz-imp__pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.sz-imp__pastille {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--sz-bord-clair);
    background: var(--sz-panneau-clair);
    font-size: 13px;
}
.sz-imp__pastille--vert { border-color: var(--sz-vert); color: var(--sz-vert); }
.sz-imp__pastille--ambre { border-color: var(--sz-ambre); color: var(--sz-ambre); }
.sz-imp__pastille--cyan { border-color: var(--sz-cyan); color: var(--sz-cyan); }
.sz-imp__pastille--rouge { border-color: var(--sz-rouge); color: #ffb3b3; }

.sz-imp__bloc {
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid var(--sz-bord);
    background: var(--sz-panneau);
}
.sz-imp__bloc h3 {
    margin: 0 0 12px;
    font-size: 20px;
}
.sz-imp__compte {
    font-family: var(--sz-police-mono);
    font-size: 13px;
    color: var(--sz-texte-doux);
}
.sz-imp__doux { margin: 0; color: var(--sz-texte-doux); }
.sz-imp__petit { margin-top: 8px; font-size: 13px; }

.sz-imp__infos {
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 22px;
}
.sz-imp__infos dt {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sz-texte-discret);
}
.sz-imp__infos dd {
    margin: 0;
    color: var(--sz-texte-fort);
}

.sz-imp__services {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}
.sz-imp__services li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.sz-imp__service-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid rgba(242, 169, 59, 0.45);
    background: rgba(242, 169, 59, 0.1);
    color: var(--sz-ambre);
}
.sz-imp__service-icone .sz-icone {
    width: 20px;
    height: 20px;
}

.sz-imp__tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sz-imp__tableau th,
.sz-imp__tableau td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--sz-bord);
    text-align: left;
}
.sz-imp__tableau th {
    font-family: var(--sz-police-mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sz-texte-discret);
}
.sz-imp__liste-simple {
    margin: 0;
    padding-left: 20px;
}

.sz-imp__notes {
    padding-left: 14px;
    border-left: 3px solid var(--sz-ambre);
}
.sz-imp__notes p,
.sz-imp__notes ul {
    margin: 0 0 8px;
}
.sz-imp__notes strong {
    color: var(--sz-texte-fort);
}

/* Planètes / lunes */
.sz-imp__astres {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 16px;
}
.sz-imp__astres li {
    display: flex;
    align-items: center;
    gap: 10px;
    break-inside: avoid;
}
.sz-imp__astre-textes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
}
.sz-imp__astre-textes .sz-imp__doux {
    font-size: 12px;
}

/* Liste des lieux : une ligne par lieu, icônes de services à droite */
.sz-imp__lieux {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-imp__lieux li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--sz-bord);
    font-size: 14px;
    break-inside: avoid;
}
.sz-imp__lieux li:last-child {
    border-bottom: 0;
}
.sz-imp__lieu-textes {
    flex: 1 1 320px;
    min-width: 0;
}
.sz-imp__lieu-textes .sz-imp__doux {
    display: inline;
    font-size: 13px;
}
.sz-imp__lieu-services {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.sz-imp__mini-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(242, 169, 59, 0.4);
    color: var(--sz-ambre);
    vertical-align: middle;
}
.sz-imp__mini-service .sz-icone {
    width: 14px;
    height: 14px;
}
.sz-imp__etiquette {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--sz-cyan);
    color: var(--sz-cyan);
    font-family: var(--sz-police-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}
.sz-imp__etiquette--vert { border-color: var(--sz-vert); color: var(--sz-vert); }
.sz-imp__etiquette--rouge { border-color: var(--sz-rouge); color: #ffb3b3; }
.sz-imp__legende {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 14px;
    font-size: 12px;
    color: var(--sz-texte-doux);
}
.sz-imp__legende li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sz-imp__pied {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sz-bord);
    font-size: 12px;
}
.sz-imp__pied p {
    margin: 0;
}

/* Page de résultats : fiches trouvées dans les notes de terrain, avec extrait */
.sz-resultats-notes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sz-resultat-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sz-resultat-note__extrait {
    margin: 0 0 0 16px;
    padding-left: 12px;
    border-left: 3px solid var(--sz-ambre);
    font-size: 14px;
}
.sz-resultat-note__extrait a {
    color: var(--sz-texte-doux);
    text-decoration: none;
}
.sz-resultat-note__extrait a:hover {
    color: var(--sz-texte);
}
.sz-resultat-note__extrait mark {
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(242, 169, 59, 0.3);
    color: var(--sz-texte-fort);
}

/* --- Impression : pages A4, fond sombre, seulement la fiche --- */
@page {
    size: A4;
    margin: 12mm;
    background: #05080e;     /* marges de la page sombres elles aussi (fond jusqu'aux bords) */
}
@media print {
    html,
    body {
        background: var(--sz-fond) !important;     /* remplace le fond étoilé ou l'image du thème */
        -webkit-print-color-adjust: exact;          /* garder les fonds sombres et les couleurs */
        print-color-adjust: exact;
    }
    .sz-entete,
    .sz-pied,
    .sz-fil,
    .sz-imp-outils,
    .sz-alerte {
        display: none !important;
    }
    .sz-contenu {
        padding: 0 !important;
        max-width: none !important;
    }
    .sz-imp {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        gap: 12px;
        font-size: 11pt;
    }
    .sz-imp__entete,
    .sz-imp__bloc,
    .sz-imp__astres li,
    .sz-imp__lieux li,
    .sz-imp__pied {
        break-inside: avoid;
    }
    .sz-imp__bloc--lieux {
        break-inside: auto;          /* une longue liste de lieux continue sur la page suivante */
    }
    .sz-imp__bloc h3 {
        break-after: avoid;
    }
}


/* ---------------------------------------------------------------------
   13. PETITS ÉCRANS (téléphone)
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --sz-marge-cote: 16px;
    }
    .sz-contenu {
        padding-top: 28px;
        gap: 24px;
    }
    .sz-panneau {
        padding: 22px 18px;
    }
    .sz-logo__texte {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .sz-menu {
        order: 3;
        width: 100%;
    }
    .sz-hero {
        padding: 24px 18px;
    }
    .sz-hero__visuel .sz-visuel-astre {
        width: 140px;
        height: 140px;
    }
    .sz-carte-systeme {
        flex-direction: column;
        align-items: flex-start;
    }
    .sz-recherche {
        order: 4;
        flex-basis: 100%;
        max-width: none;
    }
    .sz-recherche__raccourci {
        display: none;
    }
    .sz-compte {
        margin-left: auto;
    }
    .sz-mosaique {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 120px;
    }
    .sz-visionneuse__image {
        max-width: 100%;
    }
    .sz-visionneuse__nav {
        display: none;   /* sur téléphone : on glisse le doigt */
    }
    .sz-hero--banniere {
        aspect-ratio: auto;
        min-height: 260px;
    }
    .sz-visuel-recadrage .sz-recadreur {
        flex-basis: 100%;
    }
    .sz-accueil {
        padding: 24px 18px;
    }
    .sz-accueil__avatar {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }
    .sz-recherche--grande input[type="search"] {
        font-size: 16px;
    }
    .sz-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sz-chiffre__valeur {
        font-size: 28px;
    }
}

/* =====================================================================
   12 undecies. Fiches cachées (étape 11 bis) : page Données
   ===================================================================== */
.sz-ligne-cachee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 6px 0;
}

/* « KEC » cliquable dans le pied de page (étape 12 ter) : discret, souligné au survol */
.sz-lien-kec {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.sz-lien-kec:hover,
.sz-lien-kec:focus-visible {
    color: var(--sz-cyan, #3fd0f0);
    text-decoration-style: solid;
}