/* =========================================================================
   PunchArt — feuille de style du front public.

   Direction : un registre de relevé de terrain, pas un fil social.
   Noir goudron et blanc d'enduit la nuit, béton brut le jour, oxyde de fer
   en accent. Pas d'ombre, pas d'arrondi : des filets, des repères, du mono.
   ========================================================================= */

/* --- Jetons ------------------------------------------------------------- */

:root {
    /* Nuit : le mode natif du sujet, les murs relevés sont noirs. */
    --ground:    #0B0B0C;
    --surface:   #151517;
    --surface-2: #1E1E21;
    --line:      #2A2A2E;
    --line-fort: #3D3D43;
    --ink:       #E8E6E1;
    --ink-dim:   #8A8783;
    --oxide:     #B4442A;
    --oxide-vif: #D2593C;
    --patina:    #6E7B6A;

    --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
    --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --gouttiere: 1.5rem;
    --largeur:   78rem;
}

[data-theme="day"] {
    /* Jour : béton coulé, pas de crème. */
    --ground:    #D8D6D0;
    --surface:   #E6E4DE;
    --surface-2: #CFCCC5;
    --line:      #B5B2AA;
    --line-fort: #96938B;
    --ink:       #16161A;
    --ink-dim:   #5C5A55;
    --oxide:     #9C3A22;
    --oxide-vif: #7F2D18;
    --patina:    #556052;
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--ground);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Une règle d'auteur sur img l'emporte sur la feuille du navigateur : sans
   ceci, un élément portant l'attribut hidden reste affiché, et l'aperçu du
   dépôt montrait son texte alternatif avant même qu'une photo soit choisie. */
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--oxide-vif);
    outline-offset: 3px;
}

.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--oxide);
    color: #fff;
    padding: 0.75rem 1rem;
    z-index: 100;
    font-family: var(--mono);
    font-size: 0.8rem;
}
.saut-contenu:focus { left: 0; }

/* --- Barre supérieure --------------------------------------------------- */

.barre {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 var(--gouttiere);
    height: 4rem;
    border-bottom: 1px solid var(--line);
    background: var(--ground);
    position: sticky;
    top: 0;
    z-index: 20;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-right: auto;
}

.marque__plaque {
    width: 0.85rem;
    height: 0.85rem;
    background: var(--oxide);
    flex: none;
}

.marque__nom {
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.barre__nav {
    display: flex;
    gap: 1.25rem;
}

.lien-nav {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-dim);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}
.lien-nav:hover { color: var(--ink); }
.lien-nav.est-actif {
    color: var(--ink);
    border-bottom-color: var(--oxide);
}

.bascule-theme {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line-fort);
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.bascule-theme::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ink-dim);
}
.bascule-theme:hover {
    color: var(--ink);
    border-color: var(--ink);
}
.bascule-theme:hover::before { background: var(--oxide); }

/* --- Conteneur principal ------------------------------------------------ */

main {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 var(--gouttiere) 5rem;
}

/* --- Typographie partagée ----------------------------------------------- */

.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--oxide);
    margin: 0 0 0.9rem;
}

.titre-geant {
    font-family: var(--display);
    font-size: clamp(2.75rem, 9vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
}

.titre-section {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

.chapo {
    max-width: 34ch;
    color: var(--ink-dim);
    margin: 1.25rem 0 0;
    font-size: 1.02rem;
}

/* --- En-tête du relevé -------------------------------------------------- */

.entete-releve {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2.5rem;
    align-items: end;
    padding: 3.5rem 0 2rem;
    border-bottom: 2px solid var(--ink);
}

.entete-releve__texte { min-width: 0; }

/* --- Carte / constellation ---------------------------------------------- */

.carte {
    margin: 0;
    width: 12.5rem;
    flex: none;
}

.carte__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Deux cadres du même relevé sont rendus : le carré pour le grand écran, le
   16:9 pour le mobile. Un seul est affiché ; display:none retire l'autre de
   l'arbre d'accessibilité en plus de le masquer. */
.carte--mobile { display: none; }

.carte__fond {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 0.4;
}

.carte__coin {
    fill: none;
    stroke: var(--oxide);
    stroke-width: 0.9;
}

.carte__point {
    fill: var(--ink-dim);
}
.carte__point.est-dernier {
    fill: var(--oxide-vif);
}
.carte__point.est-pale {
    fill: var(--line-fort);
}
.carte__point.est-actif {
    fill: var(--oxide-vif);
}

.carte__cible {
    fill: none;
    stroke: var(--oxide-vif);
    stroke-width: 0.5;
}

/* Relevé situé hors du cadre, épinglé sur la bordure. */
.carte__hors {
    fill: none;
    stroke: var(--patina);
    stroke-width: 0.7;
}

.carte__legende {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 0.6rem;
}

/* --- Registre (listes de données) --------------------------------------- */

.registre {
    margin: 0;
    display: grid;
    gap: 0.55rem;
    min-width: 15rem;
}

.registre__ligne {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
}

.registre dt {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.registre dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink);
}

.registre--fiche { margin-top: 1.75rem; }

/* --- Filtres ------------------------------------------------------------ */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem 0;
}

.puce {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    border: 1px solid var(--line-fort);
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-dim);
}
.puce:hover { color: var(--ink); border-color: var(--ink); }
.puce.est-actif {
    background: var(--ink);
    color: var(--ground);
    border-color: var(--ink);
}

.puce__compte { opacity: 0.6; font-size: 0.7rem; }

/* --- Compteur ----------------------------------------------------------- */

.compteur {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 1.5rem auto 1rem;
}

/* --- Grille des pièces -------------------------------------------------- */

.grille {
    list-style: none;
    padding: 0;
    display: grid;
    /* Une pièce par ligne, sur toute la largeur de la colonne.
       Les photos gardant leur format, leurs hauteurs varient : en grille
       multi-colonnes chaque ligne se calait sur la plus haute et laissait des
       trous sous les autres. Une colonne unique supprime le problème au lieu
       de le compenser, et donne à chaque mur la place de se lire — c'est le
       texte peint qui compte, pas la vignette.
       La colonne est centrée et bornée : au-delà, une photo verticale
       dépasserait la hauteur de l'écran. */
    grid-template-columns: 1fr;
    gap: 3.5rem;
    max-width: 42rem;
    margin: 0 auto;
}

.grille--serree {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1.5rem 1rem;
    max-width: none;
    margin: 0;
    align-items: start;
}

.piece__lien {
    display: block;
    text-decoration: none;
}

/* Le cadre n'impose plus de format : c'est l'image qui donne sa hauteur.
   Rogner en carré coupait le haut ou le bas des murs, donc une partie du
   texte peint — or ce texte est tout l'intérêt de la pièce. */
.piece__cadre {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    line-height: 0;
}

/* Sans média, plus rien ne donne de hauteur : la plaque de substitution en
   impose une, dans le format portrait le plus courant du relevé. */
.piece__cadre--vide { aspect-ratio: 4 / 5; }

.piece__image {
    width: 100%;
    height: auto;
    filter: saturate(0.92) contrast(1.04);
    transition: filter 320ms ease;
}

.piece__lien:hover .piece__image {
    filter: saturate(1) contrast(1.1);
}

.piece__ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.piece__code {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.piece__code sup { font-size: 0.6em; }

.piece__date {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
}

.piece__coord {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--ink-dim);
    margin: 0.4rem 0 0;
}

.piece__lien:hover .piece__ligne { border-bottom-color: var(--oxide); }

/* --- Plaque de substitution (média absent) ------------------------------ */

.plaque {
    position: absolute;
    inset: 0;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: var(--surface);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 7px,
        var(--surface-2) 7px 8px
    );
    text-align: center;
    padding: 1rem;
}

.plaque__code {
    font-family: var(--mono);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
}

.plaque__note {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oxide);
}

.plaque--grande {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
}
.plaque--grande .plaque__code { font-size: 1.6rem; }

/* --- Vide --------------------------------------------------------------- */

.vide {
    border: 1px solid var(--line);
    padding: 2.5rem;
    text-align: center;
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 0.85rem;
    margin: 2.5rem 0;
}

/* --- Pagination --------------------------------------------------------- */

.pagination {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 3.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.pagination__lien {
    text-decoration: none;
    color: var(--ink);
    letter-spacing: 0.06em;
}
.pagination__lien:hover { color: var(--oxide); }
.pagination__lien.est-inactif { color: var(--line-fort); }

.pagination__etat {
    color: var(--ink-dim);
    letter-spacing: 0.08em;
}

/* --- Fiche -------------------------------------------------------------- */

.fiche {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: 3rem;
    padding: 3rem 0 3.5rem;
}

.fiche__media {
    border: 1px solid var(--line);
    background: var(--surface);
}

.fiche__image {
    width: 100%;
    height: auto;
}

/* Pas de text-transform ici : name_pu est sensible a la casse et sert
   d identifiant dans l URL. L afficher en capitales le falsifierait. */
.fiche__code {
    font-family: var(--display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: -0.01em;
    margin: 0;
}
.fiche__code sup { font-size: 0.45em; }

.carte--fiche {
    width: 10rem;
    margin-top: 2rem;
}

.retour {
    display: inline-block;
    margin-top: 2rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--line-fort);
    padding-bottom: 2px;
}
.retour:hover { color: var(--oxide); border-bottom-color: var(--oxide); }

.voisinage { padding-top: 1rem; }

/* --- Pages de texte ----------------------------------------------------- */

.page-texte {
    padding: 4rem 0 3rem;
    max-width: 46rem;
}

.prose {
    margin: 2rem 0 2.5rem;
    max-width: 44ch;
    color: var(--ink-dim);
}
.prose p { margin: 0 0 1.1rem; }

/* --- Pied de page ------------------------------------------------------- */

.pied {
    border-top: 1px solid var(--line);
    padding: 2.5rem var(--gouttiere);
    max-width: var(--largeur);
    margin: 0 auto;
    display: grid;
    gap: 0.5rem;
}

.pied__marque {
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.pied__note {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
    margin: 0;
}

.pied__nav {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
.pied__nav a { color: var(--ink-dim); text-decoration: none; }
.pied__nav a:hover { color: var(--oxide); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 62rem) {
    .entete-releve {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .entete-releve__texte { grid-column: 1 / -1; }

    .fiche {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 40rem) {
    :root { --gouttiere: 1rem; }

    .barre { gap: 0.85rem; }
    .barre__nav { gap: 0.85rem; }
    .lien-nav { font-size: 0.7rem; }
    .bascule-theme__etat { display: none; }
    .bascule-theme { padding: 0.4rem; }

    .entete-releve {
        grid-template-columns: 1fr;
        padding-top: 2.5rem;
    }
    /* Sur mobile la carte du relevé passe en 16:9 pleine largeur. Le carré
       reste la règle ailleurs (fiche punch), d'où la valeur de repli. */
    .carte { width: 9rem; }
    .carte--desktop { display: none; }
    .carte--mobile {
        display: block;
        width: 100%;
    }
    .registre { min-width: 0; }

    /* La grille mobile est définie plus bas, dans le bloc « une pièce par
       ligne » : elle y passe en colonne unique et pleine largeur. Rien ici,
       pour ne pas avoir deux règles concurrentes sur le même sélecteur. */
}

/* --- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .piece__lien:hover .piece__image { transform: none; }
}

/* --- Légende de la pièce ------------------------------------------------- */

/* Le texte que porte réellement le mur. C'est le seul contenu indexable de la
   fiche : il est donc en <h2>, pas en simple paragraphe. */
.legende {
    margin: 0;
    padding: 1.25rem 1.25rem 1.4rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.legende__texte {
    font-family: var(--display);
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0;
    text-wrap: balance;
}

.legende__source {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0.6rem 0 0;
}

.fiche__media { margin: 0; }

/* --- Chargement au défilement -------------------------------------------- */

.flux__sentinelle {
    height: 1px;
    margin-top: 2rem;
}

.flux__etat {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-align: center;
    margin: 1.25rem auto 0;
    min-height: 1.2em;
}

/* La pagination serveur reste dans le HTML pour les navigateurs sans script ;
   elle est masquée quand le chargement au défilement a pris la main, et
   réapparaît si celui-ci échoue. */
.pagination--remplacee { display: none; }

.flux__fin { display: none; }

/* --- Légende dans la grille ---------------------------------------------- */

.piece__legende {
    font-family: var(--body);
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0.5rem 0 0;
    /* Deux lignes au plus : la grille doit rester un registre régulier. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Barre de navigation basse (mobile) ---------------------------------- */

.barre-basse { display: none; }

/* --- Mobile : une pièce par ligne, pleine largeur ------------------------ */

@media (max-width: 40rem) {
    /* La barre basse est fixe : on réserve sa hauteur, encoche comprise. */
    body {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }

    .barre-basse {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background: var(--ground);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .barre-basse__lien {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.55rem 0.25rem 0.5rem;
        text-decoration: none;
        color: var(--ink-dim);
        min-height: 3.5rem;
    }
    .barre-basse__lien.est-actif { color: var(--ink); }
    .barre-basse__lien.est-actif .barre-basse__icone { color: var(--oxide); }

    .barre-basse__icone { display: block; line-height: 0; }

    .barre-basse__nom {
        font-family: var(--mono);
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* La grille devient une colonne, et les pièces débordent la gouttière pour
       occuper toute la largeur de l'écran, comme un fil de publications. */
    .grille {
        gap: 2.5rem;
        max-width: none;
        margin-left: calc(-1 * var(--gouttiere));
        margin-right: calc(-1 * var(--gouttiere));
    }

    .piece__cadre {
        border-left: 0;
        border-right: 0;
    }

    .piece__ligne,
    .piece__legende,
    .piece__coord {
        padding-left: var(--gouttiere);
        padding-right: var(--gouttiere);
    }

    /* Le voisinage garde sa grille serrée : ce n'est pas un fil, mais un index. */
    .grille--serree {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
        gap: 1.5rem 1rem;
        margin-left: 0;
        margin-right: 0;
    }
    .grille--serree .piece__cadre { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
    .grille--serree .piece__ligne,
    .grille--serree .piece__coord { padding-left: 0; padding-right: 0; }

    /* La fiche aussi passe pleine largeur. */
    .fiche__media {
        margin-left: calc(-1 * var(--gouttiere));
        margin-right: calc(-1 * var(--gouttiere));
    }
    .fiche { padding-top: 1.5rem; }
}

/* --- Formulaire de dépôt -------------------------------------------------- */

.page-depot { max-width: 40rem; }

.formulaire {
    display: grid;
    gap: 1.75rem;
    margin: 2rem 0 1rem;
}

.champ { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; }

.champ__label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 0;
}

.champ__option {
    color: var(--line-fort);
    letter-spacing: 0.06em;
}

.champ__mini {
    display: block;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.3rem;
}

.champ__saisie {
    width: 100%;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-fort);
    border-radius: 0;
    padding: 0.7rem 0.8rem;
    font-family: var(--body);
    font-size: 1rem;
    /* 16px minimum : en dessous, iOS zoome à la mise au point du champ. */
}
.champ__saisie:focus-visible { border-color: var(--oxide); }
.champ__saisie--mono { font-family: var(--mono); }

.champ__aide {
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
}

.champ__paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.champ--position { display: grid; gap: 0.5rem; }

.bouton {
    display: inline-block;
    background: var(--ink);
    color: var(--ground);
    border: 1px solid var(--ink);
    border-radius: 0;
    padding: 0.85rem 1.5rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    justify-self: start;
}
.bouton:hover { background: var(--oxide); border-color: var(--oxide); color: #fff; }

.bouton--secondaire {
    background: transparent;
    color: var(--ink-dim);
    border-color: var(--line-fort);
    padding: 0.55rem 0.9rem;
    font-size: 0.72rem;
}
.bouton--secondaire:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.depot__apercu {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

/* Pot de miel : sorti du flux sans display:none, que certains robots
   détectent, et retiré du parcours clavier comme de l'arbre d'accessibilité. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.message {
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.9rem 1rem;
    margin: 1.5rem 0 0;
    border-left: 3px solid;
}
.message--ok { border-color: var(--patina); color: var(--ink); background: var(--surface); }
.message--erreur { border-color: var(--oxide); color: var(--ink); background: var(--surface); }

/* --- État de la position (dépôt) ----------------------------------------- */

.position {
    border: 1px solid var(--line-fort);
    border-left-width: 3px;
    padding: 0.7rem 0.85rem;
    background: var(--surface);
}
.position[data-etat="attente"] { border-left-color: var(--line-fort); }
.position[data-etat="ok"]      { border-left-color: var(--patina); }
.position[data-etat="echec"]   { border-left-color: var(--oxide); }

.position__texte {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
}

.bouton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.bouton:disabled:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ground);
}

/* --- Carte OpenStreetMap -------------------------------------------------- */

.entete-carte {
    padding: 3.5rem 0 1.5rem;
    border-bottom: 2px solid var(--ink);
}

.carte-plan {
    height: min(70vh, 40rem);
    margin: 1.5rem 0 0.75rem;
    border: 1px solid var(--line-fort);
    background: var(--surface);
}

/* Le fond OSM est clair. Plutôt que de dépendre d'un fournisseur de tuiles
   sombres, on l'assombrit ici : les tuiles seules sont filtrées, les marqueurs
   et les bulles gardent leurs couleurs. */
.carte-plan--nuit .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.5);
}

.carte-plan__note,
.carte-plan__noscript {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--ink-dim);
    margin: 0 0 2rem;
}
.carte-plan__noscript { padding: 2rem; }

/* Bulle d'un point */
.bulle { display: block; text-decoration: none; color: inherit; }
.bulle__image {
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    display: block;
}
.bulle__code {
    display: block;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 500;
}
.bulle__legende {
    display: block;
    font-family: var(--body);
    font-size: 0.9rem;
    line-height: 1.35;
    margin-top: 0.25rem;
}
.bulle__meta {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: #666;
    margin-top: 0.35rem;
}

.leaflet-popup-content { margin: 0.7rem 0.8rem; }
.leaflet-container { font-family: var(--body); background: var(--surface); }

@media (max-width: 40rem) {
    .carte-plan {
        height: 65vh;
        margin-left: calc(-1 * var(--gouttiere));
        margin-right: calc(-1 * var(--gouttiere));
        border-left: 0;
        border-right: 0;
    }
    .entete-carte { padding-top: 2.5rem; }
}

/* --- Marques (likes) ------------------------------------------------------ */

.piece__pied {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
}
.piece__pied--fiche { margin-top: 1.5rem; }

.jaime {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink-dim);
    padding: 0.35rem 0.65rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}
.jaime:hover { color: var(--ink); border-color: var(--line-fort); }
.jaime:disabled { opacity: 0.6; cursor: wait; }

.jaime__icone { display: block; line-height: 0; }

.jaime.est-marquee {
    color: var(--oxide-vif);
    border-color: var(--oxide);
}
.jaime.est-marquee .jaime__icone svg {
    fill: var(--oxide-vif);
    stroke: var(--oxide-vif);
}

@media (max-width: 40rem) {
    .piece__pied {
        padding-left: var(--gouttiere);
        padding-right: var(--gouttiere);
    }
    .grille--serree .piece__pied { padding-left: 0; padding-right: 0; }
}

/* --- La marque, dans la ligne de registre --------------------------------- */

/* Le HTML place déjà la marque entre le code et la date : la ligne est un
   flex, il n'y a rien à repositionner. Le lien de l'image et la ligne sont
   frères, ce qui évite d'imbriquer un bouton dans un lien — invalide, et le
   clic déclencherait la navigation. */
.piece__ligne {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.piece__code {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
}
.piece__code:hover { color: var(--oxide-vif); }
.piece__code sup { font-size: 0.6em; }

/* La date se cale à droite, la marque reste collée au code. */
.piece__date { margin-left: auto; }

.piece .jaime {
    border: 0;
    padding: 0.15rem 0.2rem;
    font-size: 0.72rem;
    gap: 0.3rem;
}
.piece .jaime:hover { border: 0; }

.piece__pied { display: none; }

@media (max-width: 40rem) {
    /* Cible tactile confortable sans casser l'alignement de la ligne. */
    .piece .jaime { padding: 0.35rem 0.4rem; font-size: 0.8rem; }
    .piece__ligne { gap: 0.6rem; }
}

/* --- Barre du haut : entrées en picto ------------------------------------- */

/* À quatre libellés la barre débordait sur un écran de téléphone : le dernier
   passait à la ligne et la marge droite paraissait plus large que la gauche.
   Déposer et À propos sont donc réduits à leur picto, et rien ne peut plus
   revenir à la ligne. */
.barre { flex-wrap: nowrap; }
.barre__nav { flex-wrap: nowrap; align-items: center; }
.marque__nom { white-space: nowrap; }

.lien-nav--picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
}
.lien-nav--picto.est-actif { border-bottom-color: var(--oxide); color: var(--oxide); }

@media (max-width: 40rem) {
    .barre { gap: 0.7rem; padding-right: calc(var(--gouttiere) - 0.15rem); }
    .barre__nav { gap: 0.9rem; }
    .lien-nav { font-size: 0.68rem; }
    /* Cible tactile : la zone cliquable dépasse le picto sans pousser la barre. */
    .lien-nav--picto { padding: 0.4rem 0.15rem 0.35rem; }
}

/* --- Mini-carte de l'en-tête du relevé ------------------------------------ */

.mini-carte {
    margin: 0;
    width: 12.5rem;
    flex: none;
}

.mini-carte__lien {
    display: block;
    text-decoration: none;
    border: 1px solid var(--line-fort);
}

.mini-carte__plan {
    /* Carré sur grand écran ; le mobile passe en 16:9 plus bas. */
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--surface);
}

.mini-carte .carte__legende a {
    color: var(--ink-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--line-fort);
}
.mini-carte .carte__legende a:hover { color: var(--oxide); border-bottom-color: var(--oxide); }

/* La mini-carte n'est pas manipulable : le curseur annonce un lien, pas une
   carte que l'on pourrait déplacer. */
.mini-carte__plan .leaflet-container { cursor: pointer; }
.mini-carte__plan.leaflet-container { cursor: pointer; }

@media (max-width: 40rem) {
    .mini-carte {
        width: 100%;
        margin-left: calc(-1 * var(--gouttiere));
        margin-right: calc(-1 * var(--gouttiere));
        width: calc(100% + 2 * var(--gouttiere));
    }
    .mini-carte__lien { border-left: 0; border-right: 0; }
    .mini-carte__plan { aspect-ratio: 16 / 9; }
    .mini-carte .carte__legende {
        padding-left: var(--gouttiere);
        padding-right: var(--gouttiere);
    }
}

/* --- Confirmation en surimpression ---------------------------------------- */

.toast {
    position: fixed;
    left: var(--gouttiere);
    right: var(--gouttiere);
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line-fort);
    border-left: 3px solid var(--patina);
    /* Part du bas, hors écran, et remonte une fois la classe posée. */
    transform: translateY(140%);
    opacity: 0;
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 380ms ease;
}
.toast.est-entre { transform: translateY(0); opacity: 1; }
.toast.est-sorti { transform: translateY(140%); opacity: 0; }

.toast__marque {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.35rem;
    background: var(--patina);
}

.toast__texte {
    flex: 1;
    margin: 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink);
}

.toast__fermer {
    flex: none;
    background: transparent;
    border: 0;
    color: var(--ink-dim);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
}
.toast__fermer:hover { color: var(--ink); }

/* Sur mobile la barre basse occupe déjà le bas de l'écran. */
@media (max-width: 40rem) {
    .toast { bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* Sans animation demandée : le toast apparaît sans glisser. */
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 200ms ease; transform: none; }
    .toast.est-entre { transform: none; }
    .toast.est-sorti { transform: none; }
}

/* --- Pied de page : entrées secondaires en picto -------------------------- */

.pied__nav { align-items: center; flex-wrap: wrap; }

.pied__picto {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 0.2rem;
}
.pied__picto:hover { color: var(--oxide); }

/* Les mentions légales portent des passages que seul le responsable du site
   peut renseigner : ils sont signalés plutôt que laissés à deviner. */
.a-completer {
    border-left: 3px solid var(--oxide);
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.55;
}

.prose .titre-section {
    margin-top: 2.25rem;
    font-size: 1rem;
}
.prose h2:first-of-type { margin-top: 0; }