/* =========================================================
   La portée de Valencia — feuille de style principale
   ========================================================= */

/* Polices variables auto-hébergées (RGPD : aucun appel à Google Fonts).
   Un seul fichier par famille couvre toutes les graisses de 100 à 900. */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette « nuit chaude » : anthracite brun plutôt que noir bleuté, accent
       terre cuite et second accent sauge — la robe blanche du Dogue Argentin
       ressort sur ce fond sans l'agressivité d'un thème néon.
       Deux nuances par accent : une SOMBRE pour les aplats (texte blanc dessus)
       et une CLAIRE pour le texte posé sur le fond de la page. */
    --couleur-fond: #17130f;           /* anthracite chaud */
    --couleur-fond-2: #221c16;         /* survol / bandes alternées */
    --couleur-fond-carte: #1e1813;     /* surfaces / cartes */
    --couleur-texte: #f0e9e0;          /* ivoire (contraste 14:1 sur les cartes) */
    --couleur-texte-doux: #a89c8e;     /* texte secondaire (contraste 6.6:1) */
    --couleur-primaire: #b8543a;
    --couleur-primaire-sombre: #98422b;
    --couleur-primaire-claire: #e9a48f;
    --couleur-accent: #e2946f;
    --couleur-bordure: #352c23;
    --accent-voile: rgba(226, 148, 111, 0.14);
    /* Accents : aplats */
    --accent: #b8543a;                 /* terracotta — aplat, texte blanc dessus (4.8:1) */
    --accent-fort: #98422b;            /* terracotta foncé — survol d'un aplat */
    /* Accents : texte sur fond sombre */
    --accent-texte: #e2946f;           /* terracotta claire (contraste 6.4:1) */
    --accent-clair: #f0bda6;
    --sauge: #8fae86;                  /* vert sauge clair : mâles, coches, liens */
    --sauge-fort: #a6c29d;
    --sauge-aplat: #4d6647;            /* le même en aplat, texte clair dessus */
    --coucher-haut: rgba(192, 90, 62, 0.18);
    --coucher-bas: rgba(201, 155, 74, 0.10);
    --ombre-douce: 0 2px 10px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28);
    --ombre-forte: 0 8px 20px rgba(0, 0, 0, 0.40), 0 20px 48px rgba(0, 0, 0, 0.45);
    --rayon: 14px;
    --transition: 0.18s ease;
}

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

html { scroll-behavior: smooth; }

::selection { background: var(--accent); color: #fff; }
* { scrollbar-color: var(--accent) var(--couleur-fond-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--couleur-fond-2); }
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
    border: 2px solid var(--couleur-fond-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-fort); }

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

/* Titres : serif chaleureuse, optical sizing automatique (axe opsz) */
h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto;
    font-weight: 600;
}

/* ---------- En-tête des pages secondaires (galeries, pedigree, admin) ---------- */
.entete {
    position: relative;
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(1.75rem, 4vw, 2.75rem);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--coucher-haut), transparent 60%),
        var(--couleur-fond-2);
    border-bottom: 1px solid var(--couleur-bordure);
}
/* 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; }
}
/* Décor conservé pour compatibilité : plus de soleil synthwave */
.entete__soleil { display: none; }

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

/* Lien d'angle (← 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: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    color: var(--sauge-fort);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--ombre-douce);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.entete__lien-coin:hover {
    background: var(--sauge-aplat);
    color: #ffffff;
    border-color: var(--sauge-aplat);
}
.entete__lien-coin--gauche { left: 1.2rem; }

.entete__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    letter-spacing: -0.015em;
    color: var(--couleur-texte);
    line-height: 1.1;
}

.entete__sous-titre {
    margin-top: 0.5rem;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    color: var(--accent-texte);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.entete__ligne3 {
    margin-top: 0.35rem;
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--couleur-texte-doux);
}

/* Bouton d'accès au pedigree */
.entete__pedigree {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--accent);
    color: var(--accent-texte);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--ombre-douce);
    transition: background var(--transition), color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.entete__pedigree:hover,
.entete__pedigree:focus-visible {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--ombre-forte);
}
.entete__pedigree-icone { font-size: 1.2em; }

/* Accès à l'administration : discret, hors du champ visuel du visiteur */
.entete__lien-admin {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 30;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--couleur-texte-doux);
    font-size: 1.1rem;
    text-decoration: none;
    opacity: 0.18;
    transition: opacity var(--transition), background var(--transition),
                border-color var(--transition), color var(--transition);
}
.entete__lien-admin:hover,
.entete__lien-admin:focus-visible {
    opacity: 1;
    background: var(--couleur-fond-carte);
    border-color: var(--couleur-bordure);
    color: var(--accent-texte);
}

/* =========================================================
   Hero de la page d'accueil : photo et texte côte à côte.
   Le texte n'est jamais posé sur le portrait — il occupe sa propre
   colonne sombre, et la photo garde son cadrage d'origine.
   ========================================================= */
.hero {
    position: relative;
    min-height: min(86vh, 760px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
    background: var(--couleur-fond);
    border-bottom: 1px solid var(--couleur-bordure);
}
/* Colonne photo */
.hero__media {
    position: relative;
    overflow: hidden;
    background: var(--couleur-fond-2);
}
/* <picture> est inline par défaut : sans cette règle, la hauteur en % de
   l'image ne se rapporte à rien et la photo disparaît */
.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Décalé à droite : Valencia est légèrement à droite du centre de la photo.
       Aucun rognage vertical à cette géométrie — elle reste entière. */
    object-position: 61% 50%;
    display: block;
}
/* Raccord en dégradé du côté de la colonne de texte, pour que la photo
   se fonde dans le fond au lieu d'être coupée net */
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 76%,
        rgba(23, 19, 15, 0.40) 91%,
        var(--couleur-fond) 100%);
}
/* Colonne texte */
.hero__contenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
    background:
        radial-gradient(120% 100% at 100% 0%, var(--coucher-haut), transparent 55%),
        var(--couleur-fond);
    color: var(--couleur-texte);
}
.hero__marque {
    align-self: flex-start;
    margin-bottom: 1.2rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond-carte);
    color: var(--accent-texte);
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.hero__accroche {
    max-width: 32rem;
    margin-top: 1.1rem;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    color: var(--couleur-texte-doux);
    text-wrap: pretty;
}
/* Informations clés, en colonne pour rester lisibles */
.hero__faits {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.6rem;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    color: var(--couleur-texte);
    list-style: none;
}
.hero__faits li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}
/* Indicateur de défilement, dans la colonne de texte */
.hero__defiler {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    color: var(--couleur-texte-doux);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    animation: hero-descendre 2.4s ease-in-out infinite;
}
@keyframes hero-descendre {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50%      { transform: translate(-50%, 7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__defiler { animation: none; }
}

/* Écrans étroits : la photo passe au-dessus, le texte en dessous —
   toujours aucune superposition. */
@media (max-width: 56rem) {
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .hero__media { height: min(52vh, 420px); }
    .hero__media::after {
        background: linear-gradient(180deg,
            transparent 55%,
            rgba(23, 19, 15, 0.5) 80%,
            var(--couleur-fond) 100%);
    }
    .hero__contenu { padding: 1.75rem 1.25rem 2.5rem; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__defiler { display: none; }
}

/* ---------- 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: var(--ombre-forte), 0 0 0 1px var(--accent-voile);
}
/* 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: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    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(--sauge); font-weight: 700; }

/* Clin d'œil « Dogo Park » — décoratif. Atténué au repos pour qu'il ne tire pas
   l'œil au détriment des liens du pied, et rendu franc au survol. */
.pied__logo {
    display: block;
    width: 110px;
    margin: 0 auto 1.2rem;
    opacity: 0.7;
    transition: opacity var(--transition);
}
.pied__logo:hover { opacity: 1; }
.pied__logo img { display: block; width: 100%; height: auto; }

/* Fréquentation (admin) */
.stats-ligne { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: baseline; }
.stats-ligne strong { color: var(--sauge); 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(--accent), var(--accent-fort));
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(192, 90, 62, 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(95, 127, 91, 0.7); }

/* ---------- Focus clavier visible (accessibilité) ---------- */
:focus-visible {
    outline: 3px solid var(--accent);
    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 de présentation du parent (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(--accent-texte); }
@media (max-width: 48rem) {
    .signification-nom { margin-left: 1rem; margin-right: 1rem; }
}

.pedigree-conteneur {
    max-width: 1720px;
    margin: 0 auto;
    /* Marge en px (valeurs de base, comme sur garuda.joire.fr) : le pedigree ne suit pas
       l'agrandissement 4K du texte, il reste identique à toute résolution. */
    padding: clamp(24px, 4vw, 48px);  /* = clamp(1.5rem, 4vw, 3rem) à 16px */
    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 {
    /* Géométrie en px fixes (comme la galerie garuda.joire.fr) : l'arbre garde la même
       largeur à toutes les résolutions et tient à l'écran, sans ascenseur
       horizontal dû à l'agrandissement du texte sur grands écrans. */
    --carte-largeur: 215px;
    --colonne-gap: 46px;              /* écart horizontal entre 2 générations */
    --colonnes: 6;                    /* sujet + générations ; voir .pedigree--colonnes-N */
    min-width: calc(var(--carte-largeur) * var(--colonnes) + var(--colonne-gap) * (var(--colonnes) - 1));
}

/* Largeur de l'arbre selon la profondeur du pedigree connu (sujet + générations).
   Un étalon dont on ne connaît que 3 ou 4 générations donne un arbre plus court :
   la grille s'ajuste au lieu de laisser une colonne vide et un défilement inutile. */
.pedigree--colonnes-3 { --colonnes: 3; }
.pedigree--colonnes-4 { --colonnes: 4; }
.pedigree--colonnes-5 { --colonnes: 5; }
.pedigree--colonnes-6 { --colonnes: 6; }

/* 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(var(--colonnes), var(--carte-largeur));
    column-gap: var(--colonne-gap);
    /* Tout l'intérieur du pedigree est en px (pas rem) : la grille étant à
       largeur fixe, il ne doit PAS grossir avec l'agrandissement 4K du texte
       (media queries html{font-size}), pour un rendu identique à toute taille. */
    margin-bottom: 20.8px;               /* 1.3rem à la taille de base */
}
.pedigree__entete {
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15.2px;                   /* 0.95rem à la taille de base */
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--sauge);
    text-shadow: 0 0 9px rgba(95, 127, 91, 0.55);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(95, 127, 91, 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(--sauge), var(--accent));
    box-shadow: 0 0 6px rgba(95, 127, 91, 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(--sauge), var(--accent));
}
.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: 13.6px 15.2px;              /* 0.85rem 0.95rem à la taille de base */
    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(--sauge); }
.carte--f { border-left-color: var(--accent); }
.carte--m:hover { box-shadow: 0 0 18px rgba(95, 127, 91, 0.5); }
.carte--f:hover { box-shadow: 0 0 18px rgba(192, 90, 62, 0.5); }

/* Carte du sujet (Valencia) mise en vedette : photo, halo et nom plus grand */
.pedigree__carte--sujet {
    background: linear-gradient(160deg, rgba(192, 90, 62, 0.18), rgba(156, 66, 39, 0.18));
    border: 1px solid var(--accent);
    box-shadow: 0 0 28px rgba(192, 90, 62, 0.55);
    padding: 11.2px;                     /* 0.7rem à la taille de base */
}
.pedigree__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 11.2px;               /* 0.7rem à la taille de base */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(192, 90, 62, 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 {
    /* Les noms sont des <h3> : sans cette règle ils héritent de Fraunces,
       trop large pour une carte de 215 px. */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.7px;                   /* 0.92rem à la taille de base */
    font-weight: 700;
    line-height: 1.3;
    color: var(--couleur-texte);
}
.pedigree__carte--sujet .pedigree__nom { font-size: 17.6px; }   /* 1.1rem à la taille de base */
/* Nom d'usage du sujet, sous le nom officiel LOF */
.pedigree__usage {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15.2px;                   /* 0.95rem à la taille de base */
    font-style: italic;
    color: var(--accent-texte);
    margin: 1.6px 0 3.2px;
}
.pedigree__sexe { font-size: 0.9em; }
.carte--m .pedigree__sexe { color: var(--sauge); }
.carte--f .pedigree__sexe { color: var(--accent-texte); }
.pedigree__info {
    margin-top: 4.8px;                   /* 0.3rem à la taille de base */
    font-size: 12.8px;                   /* 0.8rem à la taille de base */
    color: var(--couleur-texte-doux);
}
.pedigree__id {
    font-size: 11.5px;               /* = 0.72rem à la taille de base */
    color: var(--couleur-texte-doux);
    opacity: 0.8;
}
.pied__lien { color: var(--sauge); 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: 'Fraunces', Georgia, 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', Georgia, 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-voile);
}
.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: #1d2a1a; color: #a6c29d; border: 1px solid #38512f; }
.alerte--erreur { background: #2e1a14; color: #e9a48f; border: 1px solid #5c2d1e; }

/* ---------- 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;
}

/* ---------- Très grands écrans (2K / 4K) ---------- */
/* Toute la maquette est en rem : agrandir la racine met le site à l'échelle
   de l'écran au lieu de le laisser flotter, minuscule, au centre.
   (Le pedigree, lui, est en px fixes : il ne suit PAS cet agrandissement,
   pour garder des cartes nettes et les numéros de puce sur une ligne.
   garuda.joire.fr obtient le même rendu autrement : ce site-là n'agrandit
   pas sa racine du tout. Ne pas reconvertir ce bloc en rem.) */
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2560px) { html { font-size: 21px; } }
@media (min-width: 3400px) { html { font-size: 25px; } }