/* =========================================================
   Galerie de Garuda — feuille de style principale
   ========================================================= */

/* Polices auto-hébergées (RGPD : aucun appel à Google Fonts) */
@font-face {
    font-family: 'The Last Shuriken';
    src: url('../fonts/the-last-shuriken.woff2') format('woff2'),
         url('../fonts/the-last-shuriken.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 100 900;           /* police variable */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces.woff2') format('woff2');
    font-weight: 100 900;           /* police variable */
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette reprise du site famille.joire.fr (thème Séries) */
    --couleur-fond: #09090f;           /* fond page quasi-noir bleuté */
    --couleur-fond-2: #17172a;         /* survol / dégradés */
    --couleur-fond-carte: #13131e;     /* surfaces / cartes */
    --couleur-texte: #eef0f6;          /* texte clair */
    --couleur-texte-doux: #8892a4;     /* texte secondaire */
    --couleur-primaire: #c026d3;       /* magenta-violet (ex-bleu roi) */
    --couleur-primaire-sombre: #a21caf;
    --couleur-primaire-claire: #e879f9;
    --couleur-accent: #e879f9;         /* magenta clair pour les accents */
    --couleur-bordure: #241a3a;
    --accent-glow: rgba(177, 74, 237, 0.30);
    /* Palette néon « Miami 1984 » (synthwave) */
    --neon-rose: #ff3ca6;              /* rose fluo */
    --neon-rose-clair: #ffe3f2;        /* cœur quasi-blanc rosé du tube néon */
    --neon-cyan: #2de2e6;              /* cyan Miami */
    --neon-violet: #b14aed;            /* violet électrique */
    --coucher-haut: rgba(255, 60, 166, 0.40);   /* halo rose en haut */
    --coucher-bas: rgba(123, 77, 240, 0.28);    /* violet vers le bas */
    --ombre-douce: 0 6px 22px rgba(0, 0, 0, 0.45);
    --ombre-forte: 0 16px 48px rgba(0, 0, 0, 0.65);
    --rayon: 12px;
    --transition: 0.18s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Sélection de texte et barre de défilement aux couleurs néon */
::selection { background: var(--neon-rose); color: #0a0a12; }
* { scrollbar-color: var(--neon-violet) #0d0b16; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0d0b16; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--neon-rose), var(--neon-violet));
    border-radius: 10px;
    border: 2px solid #0d0b16;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--neon-cyan), var(--neon-violet)); }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---------- En-tête « Miami 1984 » ---------- */
.entete {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--coucher-haut), transparent 55%),
        radial-gradient(140% 120% at 50% 120%, var(--coucher-bas), transparent 60%),
        linear-gradient(180deg, #120a1f 0%, var(--couleur-fond) 70%);
    border-bottom: 1px solid var(--neon-violet);
    box-shadow: 0 1px 24px rgba(177, 74, 237, 0.35);
}
/* Sur téléphone, les boutons d'angle (retour, admin) chevauchent le titre :
   on abaisse le contenu de l'en-tête pour qu'il passe dessous. */
@media (max-width: 40rem) {
    .entete { padding-top: 4.6rem; }
}
/* Soleil rétro synthwave, derrière le titre */
.entete__soleil {
    position: absolute;
    top: clamp(1rem, 5vw, 3rem);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 36vw, 360px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(to bottom,
        #ffe680 0%, #ffae5c 26%, #ff6ec7 52%, #ff2d9b 72%, #b14aed 100%);
    filter: drop-shadow(0 0 70px rgba(255, 90, 180, 0.45));
}

/* Le contenu passe au-dessus du décor */
.entete__contenu,
.entete__lien-admin,
.entete__lien-coin { position: relative; z-index: 2; }

/* Lien d'angle néon (← retour, Pedigree…) */
.entete__lien-coin {
    position: absolute;
    top: 1.2rem;
    display: inline-grid;
    place-items: center;
    height: 42px;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: rgba(19, 19, 30, 0.7);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(45, 226, 230, 0.4);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.entete__lien-coin:hover {
    background: var(--neon-cyan);
    color: #07121a;
    box-shadow: 0 0 22px rgba(45, 226, 230, 0.85);
}
.entete__lien-coin--gauche { left: 1.2rem; }

.entete__titre {
    font-family: 'The Last Shuriken', 'Fraunces', Georgia, serif;
    font-weight: normal;
    font-size: clamp(3.8rem, 12vw, 7rem);
    letter-spacing: 0.02em;
    color: var(--neon-rose-clair);     /* cœur clair = tube néon allumé */
    line-height: 1.05;
    text-shadow:
        0 0 4px var(--neon-rose-clair),
        0 0 11px var(--neon-rose),
        0 0 24px var(--neon-rose),
        0 0 46px var(--neon-rose),
        0 0 88px rgba(255, 60, 166, 0.65);
    animation: neon-scintille 2s infinite steps(1),
               neon-pulse 3.2s ease-in-out infinite;
}
/* Halo qui « respire » en plus du scintillement */
@keyframes neon-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 60, 166, 0.45)); }
    50%      { filter: drop-shadow(0 0 24px rgba(255, 60, 166, 0.95)); }
}

.entete__sous-titre {
    margin-top: 0.5rem;
    font-family: 'The Last Shuriken', 'Fraunces', Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    color: #d6fdfe;                    /* cœur clair cyan */
    font-weight: normal;
    letter-spacing: 0.08em;
    text-shadow:
        0 0 4px #d6fdfe,
        0 0 12px var(--neon-cyan),
        0 0 26px var(--neon-cyan),
        0 0 52px rgba(45, 226, 230, 0.6);
}

/* Scintillement discret et occasionnel d'un tube néon */
@keyframes neon-scintille {
    0%, 88%, 100% { opacity: 1; }
    89% { opacity: 0.72; }
    90% { opacity: 1; }
    92% { opacity: 0.84; }
    93% { opacity: 1; }
}

.entete__ligne3 {
    margin-top: 0.25rem;
    font-family: 'The Last Shuriken', 'Fraunces', Georgia, serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #d6fdfe;                    /* cœur clair cyan, comme le sous-titre */
    font-weight: normal;
    letter-spacing: 0.06em;
    text-shadow:
        0 0 4px #d6fdfe,
        0 0 12px var(--neon-cyan),
        0 0 26px var(--neon-cyan),
        0 0 52px rgba(45, 226, 230, 0.6);
}

/* Bouton d'accès au pedigree, centré dans l'axe du titre */
.entete__pedigree {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Descend le bouton sous le disque du soleil (qui s'étend en vw,
       comme le texte) — l'écart à combler suit donc aussi le vw. */
    margin-top: clamp(2.5rem, 11vw, 7rem);
    padding: 0.7rem 1.8rem;
    border-radius: 999px;
    background: rgba(19, 19, 30, 0.55);
    border: 1px solid var(--neon-rose);
    color: var(--neon-rose-clair);
    font-family: 'The Last Shuriken', 'Fraunces', Georgia, serif;
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-shadow:
        0 0 4px var(--neon-rose-clair),
        0 0 12px var(--neon-rose),
        0 0 26px var(--neon-rose);
    box-shadow:
        0 0 12px rgba(255, 60, 166, 0.45),
        inset 0 0 12px rgba(255, 60, 166, 0.15);
    transition: background var(--transition), color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.entete__pedigree:hover,
.entete__pedigree:focus-visible {
    background: var(--neon-rose);
    color: #1a0712;
    text-shadow: none;
    transform: translateY(-2px);
    box-shadow: 0 0 26px rgba(255, 60, 166, 0.85);
}
.entete__pedigree-icone {
    font-size: 1.2em;
    filter: drop-shadow(0 0 6px rgba(255, 60, 166, 0.7));
}

.entete__lien-admin {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(19, 19, 30, 0.7);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(45, 226, 230, 0.45);
    transition: transform var(--transition), background var(--transition),
                box-shadow var(--transition), color var(--transition);
}
.entete__lien-admin:hover {
    transform: scale(1.1) rotate(90deg);
    background: var(--neon-cyan);
    color: #07121a;
    box-shadow: 0 0 22px rgba(45, 226, 230, 0.85);
}

/* ---------- Galerie masonry ---------- */
.galerie-conteneur {
    max-width: 2260px;            /* élargi pour conserver la taille des images en 6 colonnes */
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* Repli sans JavaScript : mosaïque en colonnes CSS (remplissage vertical). */
.galerie {
    column-count: 6;
    column-gap: 16px;
}

/* Avec JS (masonry.js) : la galerie devient un assemblage de colonnes flex
   remplies en round-robin → même aspect mosaïque mais lecture PAR LIGNE. */
.galerie--colonnes {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.galerie__colonne {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* En mode colonnes flex, l'espacement est géré par « gap » */
.galerie--colonnes .galerie__item { margin-bottom: 0; }

.galerie__item {
    position: relative;           /* pour la légende date en surimpression */
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-douce);
    cursor: zoom-in;
    background: var(--couleur-fond-carte);
    transition: transform var(--transition), box-shadow var(--transition), opacity 0.5s ease;
}
.galerie__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(45, 226, 230, 0.6),
                0 0 22px rgba(255, 60, 166, 0.55);
}
/* Anti-saut : la mosaïque est masquée tant que masonry.js ne l'a pas disposée,
   puis chaque photo apparaît en fondu quand elle entre dans la fenêtre. */
.js .galerie { opacity: 0; }
.js .galerie--prete { opacity: 1; transition: opacity 0.35s ease; }
.js .galerie__item { opacity: 0; }
.js .galerie__item.est-visible { opacity: 1; }
.galerie__item picture { display: block; }
.galerie__item img {
    display: block;
    width: 100%;
    height: auto;                 /* + width/height sur la balise = aucun saut de page */
}

/* Légende date, révélée au survol (et au focus pour l'accessibilité) */
.galerie__date {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.7rem 0.7rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d6fdfe;               /* cyan clair façon étiquette néon */
    text-shadow: 0 0 8px rgba(45, 226, 230, 0.7);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;         /* le clic passe à l'image (ouverture visionneuse) */
}
.galerie__item:hover .galerie__date,
.galerie__item:focus-within .galerie__date { opacity: 1; }

.galerie-vide {
    text-align: center;
    padding: 4rem 1rem;
    font-size: 1.2rem;
    color: var(--couleur-texte-doux);
}

@media (max-width: 1900px) { .galerie { column-count: 5; } }
@media (max-width: 1500px) { .galerie { column-count: 4; } }
@media (max-width: 1100px) { .galerie { column-count: 3; } }
@media (max-width: 760px)  { .galerie { column-count: 2; column-gap: 12px; } .galerie__item { margin-bottom: 12px; } }
@media (max-width: 420px)  { .galerie { column-count: 1; } }

/* ---------- Pied de page ---------- */
.pied {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--couleur-texte-doux);
    font-size: 0.9rem;
    border-top: 1px solid var(--couleur-bordure);
    margin-top: 2rem;
}
.pied__visites { white-space: nowrap; }
.pied__visites strong { color: var(--neon-cyan); font-weight: 700; }

/* Fréquentation (admin) */
.stats-ligne { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: baseline; }
.stats-ligne strong { color: var(--neon-cyan); font-size: 1.7rem; font-weight: 700; }

/* ---------- Bouton « haut de page » ---------- */
.haut-page {
    position: fixed;
    right: clamp(1rem, 3vw, 1.8rem);
    bottom: clamp(1rem, 3vw, 1.8rem);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--neon-rose), var(--neon-violet));
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 60, 166, 0.6);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    z-index: 900;
}
.haut-page.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.haut-page:hover { box-shadow: 0 0 26px rgba(45, 226, 230, 0.7); }

/* ---------- Focus clavier visible (accessibilité) ---------- */
:focus-visible {
    outline: 3px solid var(--couleur-primaire-claire);
    outline-offset: 3px;
}
.galerie__item img:focus-visible { outline-offset: -3px; }

/* ---------- Respect de « mouvement réduit » ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Pedigree (arbre généalogique) ---------- */
/* ---------- Encart « pourquoi Garuda ? » (page pedigree) ---------- */
.signification-nom {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    max-width: 46rem;
    margin: 1.6rem auto 0;
    padding: 1rem 1.3rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: 12px;
    color: var(--couleur-texte-doux);
    font-size: 0.95rem;
    line-height: 1.65;
}
.signification-nom p { text-wrap: pretty; }
.signification-nom__emoji { font-size: 1.5rem; line-height: 1; margin-top: 0.15rem; }
.signification-nom strong { color: var(--neon-rose-clair); }
@media (max-width: 48rem) {
    .signification-nom { margin-left: 1rem; margin-right: 1rem; }
}

.pedigree-conteneur {
    max-width: 1720px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow-x: auto;                 /* défilement horizontal sur petit écran */
}
/* Métriques de l'arbre — pilotent À LA FOIS les cartes, les connecteurs et
   les en-têtes, garantissant l'alignement parfait des colonnes. */
.pedigree {
    --carte-largeur: 215px;
    --colonne-gap: 46px;              /* écart horizontal entre 2 générations */
    /* 6 colonnes + 5 écarts */
    min-width: calc(var(--carte-largeur) * 6 + var(--colonne-gap) * 5);
}

/* Rangée d'en-têtes : même grille horizontale que l'arbre (cartes + écarts),
   donc chaque titre se centre exactement au-dessus de sa colonne. */
.pedigree__entetes {
    display: grid;
    grid-template-columns: repeat(6, var(--carte-largeur));
    column-gap: var(--colonne-gap);
    margin-bottom: 1.3rem;
}
.pedigree__entete {
    text-align: center;
    font-family: 'The Last Shuriken', 'Fraunces', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--neon-cyan);
    text-shadow: 0 0 9px rgba(45, 226, 230, 0.55);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(45, 226, 230, 0.3);
}

/* Arbre = listes imbriquées (chaque chien contient ses 2 parents) */
.arbre, .arbre ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.arbre__li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 0;
}
.arbre .pedigree__carte {
    flex: 0 0 auto;
    width: var(--carte-largeur);
}
/* Sous-liste des deux parents, décalée à droite pour loger les connecteurs.
   Sélecteur volontairement spécifique (.arbre .arbre__enfants) pour passer
   AVANT le reset « .arbre ul { margin: 0 } » qui sinon annule cet écart. */
.arbre .arbre__enfants {
    position: relative;
    margin-left: var(--colonne-gap);
}
/* Connecteurs de filiation : dégradé néon cyan → rose avec léger halo */
.arbre__enfants::before,
.arbre__enfants > .arbre__li::before,
.arbre__enfants > .arbre__li::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-rose));
    box-shadow: 0 0 6px rgba(45, 226, 230, 0.45);
    border-radius: 2px;
}
/* Tronc : de la carte de l'individu vers la barre verticale */
.arbre__enfants::before {
    left: calc(-1 * var(--colonne-gap));
    top: 50%;
    width: calc(var(--colonne-gap) / 2);
    height: 2px;
}
/* Barre verticale reliant les deux parents (dégradé vertical) */
.arbre__enfants > .arbre__li::after {
    left: calc(-1 * var(--colonne-gap) / 2);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--neon-cyan), var(--neon-rose));
}
.arbre__enfants > .arbre__li:first-child::after { top: 50%; }
.arbre__enfants > .arbre__li:last-child::after { bottom: 50%; }
/* Branche horizontale de la barre vers chaque parent */
.arbre__enfants > .arbre__li::before {
    left: calc(-1 * var(--colonne-gap) / 2);
    top: 50%;
    width: calc(var(--colonne-gap) / 2);
    height: 2px;
}

/* Indice de défilement sur petit écran (l'arbre est large par nature) */
@media (max-width: 760px) {
    .pedigree-conteneur::before {
        content: "↔ Faites défiler pour parcourir tout l'arbre";
        display: block;
        margin-bottom: 0.8rem;
        font-size: 0.8rem;
        color: var(--couleur-texte-doux);
    }
}
.pedigree__carte {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-left: 3px solid var(--couleur-bordure);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    box-shadow: var(--ombre-douce);
    transition: transform var(--transition), box-shadow var(--transition);
}
.pedigree__carte:hover { transform: translateY(-2px); }
.carte--m { border-left-color: var(--neon-cyan); }
.carte--f { border-left-color: var(--neon-rose); }
.carte--m:hover { box-shadow: 0 0 18px rgba(45, 226, 230, 0.5); }
.carte--f:hover { box-shadow: 0 0 18px rgba(255, 60, 166, 0.5); }

/* Carte du sujet (Garuda) mise en vedette : photo, halo et nom plus grand */
.pedigree__carte--sujet {
    background: linear-gradient(160deg, rgba(255, 60, 166, 0.18), rgba(177, 74, 237, 0.18));
    border: 1px solid var(--neon-rose);
    box-shadow: 0 0 28px rgba(255, 60, 166, 0.55);
    padding: 0.7rem;
}
.pedigree__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.7rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 60, 166, 0.5);
}
.pedigree__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;     /* recentre le cadrage sur la tête */
    display: block;
}
.pedigree__nom {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--couleur-texte);
}
.pedigree__carte--sujet .pedigree__nom { font-size: 1.1rem; }
/* Nom d'usage du sujet, sous le nom officiel LOF */
.pedigree__usage {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--neon-rose-clair);
    margin: 0.1rem 0 0.2rem;
}
.pedigree__sexe { font-size: 0.9em; }
.carte--m .pedigree__sexe { color: var(--neon-cyan); }
.carte--f .pedigree__sexe { color: var(--neon-rose); }
.pedigree__info {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--couleur-texte-doux);
}
.pedigree__id {
    font-size: 0.72rem;
    color: var(--couleur-texte-doux);
    opacity: 0.8;
}
.pied__lien { color: var(--neon-cyan); text-decoration: none; }
.pied__lien:hover { text-decoration: underline; }

/* ---------- Visionneuse (lightbox) ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(28, 22, 16, 0.92);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition);
}
.lightbox.ouvert { display: flex; opacity: 1; }

/* Spinner pendant le chargement de la pleine résolution */
.lightbox.chargement::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tourner 0.8s linear infinite;
    z-index: 1;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.lightbox__image {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: apparition 0.3s ease;
    cursor: zoom-in;
    transition: transform var(--transition);
}
.lightbox__image.zoom {
    transform: scale(1.8);
    cursor: zoom-out;
}
@keyframes apparition {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Barre d'outils en haut à droite (diaporama, téléchargement, fermeture) */
.lightbox__barre {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    display: flex;
    gap: 0.6rem;
    z-index: 2;
}

.lightbox__bouton,
.lightbox__nav {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    user-select: none;
}
.lightbox__bouton:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox__bouton {
    width: 46px;
    height: 46px;
    font-size: 1.4rem;
}
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 2.4rem;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.1); }
.lightbox__nav--prec { left: 1.2rem; }
.lightbox__nav--suiv { right: 1.2rem; }

.lightbox__infos {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}
.lightbox__date {
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.lightbox__compteur {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* Message éphémère (« Lien copié ») */
.lightbox__toast {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 3;
}
.lightbox__toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .lightbox__nav { width: 44px; height: 44px; font-size: 1.8rem; }
    .lightbox__nav--prec { left: 0.5rem; }
    .lightbox__nav--suiv { right: 0.5rem; }
}

/* =========================================================
   Espace d'administration
   ========================================================= */
.page-admin { background: var(--couleur-fond); }

.entete--admin {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
}
.entete--admin .entete__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--couleur-accent);
    text-shadow: none;
}
.entete--admin .entete__sous-titre {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--couleur-texte-doux);
}

.admin-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.admin-conteneur {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------- Boutons ---------- */
.bouton {
    display: inline-block;
    background: var(--couleur-primaire);
    color: #fff;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--couleur-primaire-sombre); transform: translateY(-2px); }
.bouton--fantome {
    background: transparent;
    color: var(--couleur-accent);
    border: 1px solid var(--couleur-bordure);
    padding: 0.5rem 1rem;
}
.bouton--fantome:hover { background: var(--couleur-fond-carte); transform: none; }

/* ---------- Cartes ---------- */
.carte-connexion, .carte-upload, .carte-gestion {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: clamp(1.4rem, 4vw, 2.2rem);
    box-shadow: var(--ombre-douce);
}
.carte-connexion h2, .carte-upload h2, .carte-gestion h2 {
    font-family: 'Fraunces', serif;
    color: var(--couleur-accent);
    margin-bottom: 0.6rem;
}
.carte-connexion p, .carte-upload__aide { color: var(--couleur-texte-doux); margin-bottom: 1.2rem; }

.carte-connexion { max-width: 420px; margin: 3rem auto; text-align: center; }
.form-connexion { display: flex; flex-direction: column; gap: 0.8rem; }
.form-connexion input {
    padding: 0.8rem 1rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 10px;
    font: inherit;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}
.form-connexion input::placeholder { color: var(--couleur-texte-doux); }
.form-connexion input:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 1px;
    background: var(--couleur-fond-2);
}

.compteur {
    display: inline-block;
    background: var(--couleur-primaire);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* ---------- Zone de dépôt (upload) ---------- */
.form-upload { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.zone-depot {
    width: 100%;
    border: 2px dashed var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 2.5rem 1rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color var(--transition), background var(--transition);
}
.zone-depot:hover, .zone-depot--actif {
    border-color: var(--couleur-primaire);
    background: var(--accent-glow);
}
.zone-depot__icone { font-size: 2.5rem; }
.zone-depot__texte { font-weight: 600; color: var(--couleur-texte); }
.zone-depot__detail { color: var(--couleur-primaire); font-size: 0.9rem; font-weight: 600; }

/* ---------- Alertes ---------- */
.alerte {
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
    font-weight: 500;
}
.alerte--succes { background: #052e1f; color: #6ee7b7; border: 1px solid #0c5e3f; }
.alerte--erreur { background: #3a1212; color: #fecaca; border: 1px solid #7f1d1d; }

/* ---------- Grille de gestion (sélection multiple) ---------- */
.barre-gestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.case-tout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--couleur-texte-doux);
    cursor: pointer;
    user-select: none;
}
.case-tout input { width: 16px; height: 16px; accent-color: var(--couleur-primaire); }

.bouton--danger { background: #dc2626; color: #fff; }
.bouton--danger:hover:not(:disabled) { background: #b91c1c; }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.carte-gestion__aide {
    color: var(--couleur-texte-doux);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.grille-gestion {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.grille-gestion__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Zone image cliquable = case à cocher de sélection */
.grille-gestion__coche-zone {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: var(--ombre-douce);
    cursor: pointer;
}
.grille-gestion__coche-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition), opacity var(--transition);
}
/* La case réelle est masquée visuellement (le rond sert d'indicateur),
   mais reste dans le flux pour le clic via le label et l'accès clavier */
.grille-gestion__coche-zone .case-photo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    opacity: 0;
    pointer-events: none;
}
.grille-gestion__coche {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: transparent;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* État sélectionné */
.case-photo:checked ~ img { transform: scale(0.9); opacity: 0.7; }
.case-photo:checked ~ .grille-gestion__coche {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
}
.grille-gestion__coche-zone:has(.case-photo:checked) {
    outline: 3px solid var(--couleur-primaire);
    outline-offset: -3px;
}

/* Éditeur de date sous chaque vignette */
.form-redater {
    display: flex;
    gap: 4px;
}
.form-redater input[type="datetime-local"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.72rem;
    border-radius: 6px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    color-scheme: dark;
}
.bouton--mini {
    padding: 4px 8px;
    font-size: 0.72rem;
    border-radius: 6px;
}