/* ==========================================================================
   1. VARIABLES GLOBALES
   ========================================================================== */

:root{

  --card-bg: #12181f;     /* fond d'une vignette tant que sa photo n'est pas chargée */
  --muted: #9aa4af;       /* gris pour les textes secondaires (sous-titre, crédits) */
  --gap: 12px;            /* espace entre les photos, et marge autour de la grille */
  --caption-height: 64px; /* hauteur réservée en bas de la lightbox pour la légende */
  --row-unit: 4px;        /* unité de mesure verticale de la mosaïque — posée par le
                             script. Ce n'est PAS la hauteur d'une vignette : chaque
                             photo occupe autant de ces fines rangées que ses
                             proportions l'exigent */

  /* Taille des pastilles interactives — augmente ou diminue ces valeurs
     pour les rendre plus ou moins visibles. */

  --dot-size: 32px;       /* diamètre du point posé sur la photo */
  --hotspot-font: 17px;   /* taille du texte du libellé qui se déploie */
  --hotspot-icon: 22px;   /* taille de l'icône affichée dans ce libellé */
  --flag-size: 52px;      /* diamètre du repère rond sur la vignette */
  --flag-icon: 30px;      /* taille de l'icône à l'intérieur de ce repère */
}


/* ==========================================================================
   2. BASES DU DOCUMENT
   ========================================================================== */

/* L'astérisque vise TOUS les éléments de la page. */
*{
  box-sizing:border-box;  /* les bordures et le padding sont comptés DANS la largeur
                             annoncée : un bloc en width:100% avec du padding ne
                             débordera pas de son parent. Réglage universel en CSS
                             moderne, il évite quantité de calculs faux. */
}




/* ==========================================================================
   3. EN-TÊTE DE LA PAGE (titre + sous-titre)
   ========================================================================== */
header{
  padding:0px 0px 0px;                      /* espace intérieur : 28 en haut,
                                                  20 à gauche/droite, 18 en bas */
  text-align:center;                           /* centre le texte horizontalement */
  border-bottom:1px solid rgba(255,255,255,0.08); /* fine ligne de séparation ;
                                                  rgba = rouge/vert/bleu + opacité,
                                                  ici du blanc à 8 % donc un trait
                                                  discret sur fond sombre */
}
header h1{
  margin:0 0 6px;      /* aucune marge sauf 6px en dessous, pour coller au sous-titre */
  font-size:22px;      /* taille du titre */
  font-weight:700;     /* graisse : 700 = gras */
  letter-spacing:.2px; /* très léger espacement entre les lettres, respire mieux */
}
header p{
  margin:0;              /* annule la marge par défaut des paragraphes */
  color:var(--muted);    /* gris : le sous-titre passe au second plan */
  font-size:14px;        /* plus petit que le titre */
}


/* ==========================================================================
   4. MISE EN PAGE 1 — MOSAÏQUE (par défaut, CONFIG.layout = 'mosaic')

   Grille dynamique dont les cases s'adaptent aux proportions RÉELLES de
   chaque photo : une photo portrait occupe une case haute, une photo paysage
   une case large, et certaines paysage sont mises en valeur sur 2 colonnes.
   Aucune photo n'est recadrée. Le nombre de colonnes (--cols), l'unité de
   mesure verticale (--row-unit) et les proportions de chaque photo (--ratio)
   sont calculés puis posés par le script.
   ========================================================================== */

/* Réglages communs au conteneur, quelle que soit la mise en page choisie. */
.gallery{
  max-width:1400px;   /* la grille ne s'étale pas au-delà : sur un très grand écran,
                         des photos démesurées seraient moins lisibles */
  margin:0 auto;      /* "auto" à gauche et à droite = bloc centré dans la page */
  padding:var(--gap); /* marge intérieure égale à l'espace entre les photos, pour
                         que la grille ne colle pas aux bords de l'écran */
}

.gallery.mosaic{
  display:grid;                                  /* active la grille CSS */
  grid-template-columns:repeat(var(--cols, 4), 1fr);
                        /* crée --cols colonnes de largeur égale.
                           1fr = "une part de l'espace disponible", donc toutes les
                           colonnes se partagent la largeur à parts égales.
                           Le "4" après la virgule est une valeur de secours,
                           utilisée uniquement si le script n'a pas encore posé
                           --cols (par exemple si le JavaScript est désactivé). */
  grid-auto-rows:var(--row-unit, 4px);           /* rangées TRÈS fines : elles ne
                                                    correspondent pas à une vignette
                                                    mais servent d'unité de mesure.
                                                    Le script fait occuper à chaque
                                                    photo le nombre de rangées
                                                    correspondant à sa hauteur réelle,
                                                    ce qui permet des hauteurs libres
                                                    et supprime tout recadrage. */
  grid-auto-flow:row dense;                      /* remplissage rangée par rangée.
                                                    "dense" autorise le navigateur à
                                                    remonter une photo pour combler un
                                                    vide laissé par une plus grande */
  column-gap:var(--gap);                         /* espace entre les colonnes */
  row-gap:0;                                     /* AUCUN espace entre les fines rangées :
                                                    il s'ajouterait à chacune des dizaines
                                                    de rangées qu'occupe une photo, faussant
                                                    complètement les hauteurs. L'espace
                                                    vertical est donc géré par la marge
                                                    basse des vignettes (voir plus bas) */
  align-items:start;                             /* une vignette ne s'étire pas pour
                                                    remplir les rangées qu'elle occupe :
                                                    elle garde sa hauteur naturelle */
}

.gallery.mosaic .tile{
  margin-bottom:var(--gap);   /* remplace le row-gap neutralisé ci-dessus */
}

.gallery.mosaic .tile img{
  width:100%;          /* la photo occupe toute la largeur de sa case... */
  height:auto;         /* ...et sa hauteur suit ses propres proportions : c'est ce qui
                          garantit qu'aucune tête n'est coupée. La case ayant été
                          dimensionnée pour elle, il n'y a ni rognage ni bande vide */
  aspect-ratio:var(--ratio, 3/2);
                       /* réserve la hauteur AVANT même que la photo soit téléchargée,
                          sinon la vignette serait plate et la grille sauterait au fur
                          et à mesure des chargements. Le script pose --ratio avec les
                          proportions réelles dès que la photo est connue */
  object-fit:cover;    /* filet de sécurité : --ratio valant exactement les proportions
                          de la photo, il n'y a rien à rogner ; cette ligne garantit
                          seulement qu'un arrondi au pixel ne déformera jamais l'image */
  display:block;
}


/* ==========================================================================
   5. MISE EN PAGE 2 — COLONNES (CONFIG.layout = 'masonry')

   Technique différente : au lieu d'une grille, le texte est réparti en
   colonnes journal. Chaque photo garde ses proportions d'origine, aucun
   recadrage. Les hauteurs varient donc librement.
   ========================================================================== */
.gallery.masonry{
  column-count:2;            /* 2 colonnes par défaut (petits écrans) */
  column-gap:var(--gap);     /* espace horizontal entre les colonnes */
}

/* Les "media queries" appliquent des règles seulement au-delà d'une certaine
   largeur d'écran. On ajoute donc des colonnes à mesure que l'écran s'élargit. */
@media (min-width:640px){  .gallery.masonry{ column-count:3; } } /* tablette */
@media (min-width:980px){  .gallery.masonry{ column-count:4; } } /* petit ordinateur */
@media (min-width:1300px){ .gallery.masonry{ column-count:5; } } /* grand écran */

.gallery.masonry .tile{
  break-inside:avoid;        /* interdit de couper une vignette en deux entre le bas
                                d'une colonne et le haut de la suivante */
  margin-bottom:var(--gap);  /* espace vertical entre deux photos d'une colonne
                                (en mode colonnes, "gap" ne gère que l'horizontal) */
}
.gallery.masonry .tile img{
  width:100%;      /* la photo prend toute la largeur de la colonne */
  height:auto;     /* la hauteur suit automatiquement : proportions respectées */
  min-height:80px; /* hauteur minimale tant que la photo n'est pas chargée, sinon la
                      page "sauterait" au fur et à mesure des chargements */
}


/* ==========================================================================
   6. VIGNETTES — réglages communs aux deux mises en page
   ========================================================================== */
.tile{
  position:relative;   /* ESSENTIEL : fait de la vignette le repère de position pour
                          tous ses enfants en position:absolute (le message d'erreur,
                          le repère rond...). Sans cela, ils se placeraient par
                          rapport à la page entière. */
  border-radius:10px;  /* coins arrondis */
  overflow:hidden;     /* rogne ce qui dépasse des coins arrondis — indispensable ici,
                          car la photo grossit au survol et déborderait sinon */
  background:var(--card-bg); /* fond visible pendant le chargement de la photo */
  cursor:zoom-in;      /* le curseur devient une loupe : indique que c'est cliquable */
  box-shadow:0 1px 3px rgba(0,0,0,0.4); /* ombre portée : décalage horizontal 0,
                          vertical 1px, flou 3px, noir à 40 % — détache la vignette
                          du fond */
}

.tile img{
  display:block;   /* supprime le petit espace parasite sous les images, dû au fait
                      qu'une image est traitée par défaut comme du texte */
  opacity:0;       /* invisible au départ : la photo apparaît en fondu une fois
                      chargée (la classe "loaded" est ajoutée par le script) */
  transition:opacity .4s ease, transform .5s ease;
                   /* anime les changements : 0,4 s pour l'apparition en fondu,
                      0,5 s pour l'agrandissement au survol. "ease" = démarrage et
                      arrêt en douceur */
  background:linear-gradient(135deg,#1a222b,#0e1319);
                   /* dégradé en diagonale (135°) visible avant chargement : plus
                      agréable qu'un aplat uni */
}
.tile img.loaded{ opacity:1; } /* photo chargée : elle devient visible (en fondu) */
.tile img.failed{ opacity:1; } /* photo en échec : on la rend visible aussi, pour
                                  laisser apparaître le message d'erreur en dessous */

.tile:hover img{
  transform:scale(1.05);  /* au survol, la photo grossit de 5 %. Le "overflow:hidden"
                             du parent la garde dans son cadre : effet de zoom */
}

/* Voile sombre qui apparaît au survol, pour l'effet "site de club".
   "::after" crée un élément décoratif qui n'existe pas dans le HTML. */
.tile::after{
  content:'';          /* obligatoire pour qu'un ::after existe, même vide */
  position:absolute;   /* se positionne par rapport à la vignette (voir position:relative) */
  inset:0;             /* raccourci pour top/right/bottom/left à 0 : recouvre tout le parent */
  background:linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0) 45%);
                       /* dégradé du bas vers le haut : noir à 35 % en bas, totalement
                          transparent à partir de 45 % de la hauteur */
  opacity:0;                       /* invisible tant qu'on ne survole pas */
  transition:opacity .3s ease;     /* apparition progressive en 0,3 s */
  pointer-events:none;             /* le voile laisse passer les clics : sans cela il
                                      intercepterait le clic destiné à la vignette */
}
.tile:hover::after{ opacity:1; }   /* au survol, le voile apparaît */

/* Message affiché à la place d'une photo qui n'a pas pu être chargée. */
.tile .error-msg{
  display:none;         /* masqué par défaut */
  position:absolute;    /* superposé à la vignette */
  inset:0;              /* occupe toute la surface */
  align-items:center;   /* centre verticalement (agit une fois en display:flex) */
  justify-content:center; /* centre horizontalement */
  text-align:center;    /* centre le texte s'il passe sur deux lignes */
  padding:10px;         /* évite que le texte touche les bords */
  font-size:12px;
  color:#ff8080;        /* rouge clair, lisible sur fond sombre */
  background:#1a1215;   /* fond très sombre légèrement rougi */
}
/* Le "+" vise l'élément situé JUSTE APRÈS un autre : si l'image porte la classe
   "failed", alors le message d'erreur qui la suit s'affiche. */
.tile img.failed + .error-msg{
  display:flex;  /* passe en flex, ce qui active les deux centrages ci-dessus */
}


/* ==========================================================================
   7. LIGHTBOX — la photo affichée en grand
   ========================================================================== */
.lightbox{
  position:fixed;     /* fixé par rapport à la fenêtre : reste en place même si la
                         page défile derrière */
  inset:0;            /* couvre tout l'écran */
  background:rgba(4,6,9,0.97); /* fond quasi opaque (97 %) : la grille reste
                         imperceptiblement visible derrière, ce qui aide à comprendre
                         qu'on est en surcouche et non sur une autre page */
  display:none;       /* masquée tant qu'aucune photo n'est ouverte */
  z-index:1000;       /* ordre d'empilement élevé : passe au-dessus de tout le reste */
  touch-action:pan-y; /* sur mobile, on laisse le navigateur gérer le défilement
                         vertical, et on récupère l'horizontal pour notre swipe */
  cursor:zoom-out;    /* curseur "loupe moins" : indique que cliquer à côté referme */
}
.lightbox.open{ display:block; } /* classe ajoutée par le script pour l'afficher */

/* Conteneur des diapos.
   Note technique importante : on ne construit PAS un long ruban de N × 100vw.
   Un tel élément dépasserait la taille maximale de texture que le processeur
   graphique sait peindre (souvent 8192 ou 16384 px) et les diapos au-delà de
   cette limite resteraient blanches, sans la moindre erreur. Chaque diapo est
   donc empilée au même endroit et déplacée par son propre transform : aucune
   couche ne dépasse jamais la taille de l'écran. */
.lightbox-track{
  position:absolute;
  inset:0;             /* occupe toute la lightbox */
  overflow:hidden;     /* masque les diapos voisines qui attendent hors écran */
}

.lightbox-slide{
  position:absolute;   /* toutes les diapos sont superposées au même endroit... */
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;            /* ...et chacune centre sa photo : */
  align-items:center;      /* centrage vertical */
  justify-content:center;  /* centrage horizontal */
  /* Espace intérieur : 10px en haut, 10px sur les côtés, et en bas la hauteur de la
     légende + 10px, pour que la photo ne passe jamais dessous.
     calc() permet de mélanger une variable et une valeur fixe. */
  padding:10px 10px calc(var(--caption-height) + 10px);
  backface-visibility:hidden; /* incite le navigateur à traiter la diapo comme une
                                 couche graphique stable : rend le défilement plus
                                 fluide et évite des scintillements */
}
.lightbox-slide.far{
  display:none;  /* les diapos éloignées de plus de 2 rangs sont retirées de
                    l'affichage : inutile de faire peindre 100 photos en permanence */
}

.lightbox-slide img{
  max-width:100%;        /* la photo ne dépasse jamais la largeur disponible... */
  max-height:100%;       /* ...ni la hauteur */
  object-fit:contain;    /* la photo ENTIÈRE est visible, jamais rognée — l'inverse du
                            "cover" utilisé sur les vignettes */
  user-select:none;      /* empêche de sélectionner l'image par accident en glissant */
  -webkit-user-drag:none;/* empêche de la faire glisser hors de la page (Safari/Chrome),
                            ce qui perturberait notre propre geste de swipe */
  border-radius:4px;     /* coins très légèrement arrondis */
  backface-visibility:hidden; /* même raison de fluidité que pour la diapo */
  cursor:default;        /* curseur normal sur la photo : elle ne referme pas la
                            lightbox, contrairement au fond */
}
.lightbox-slide img.failed{
  min-width:200px;   /* une image cassée n'a pas de dimensions : on lui en impose... */
  min-height:120px;  /* ...pour que le message reste lisible */
  background:#1a1215;
  color:#ff8080;
  font-size:14px;
}


/* ==========================================================================
   8. PASTILLES INTERACTIVES (tags cliquables posés sur la photo)
   ========================================================================== */

/* Calque transparent superposé EXACTEMENT à la photo affichée. Ses dimensions et
   sa position sont posées par le script, car la photo est centrée avec des bandes
   vides variables autour d'elle. Grâce à ce calque, une coordonnée exprimée en %
   suit la photo et non l'écran : une pastille posée sur un joueur reste sur lui
   quels que soient le format de l'écran ou l'orientation du téléphone. */
.hotspot-layer{
  position:absolute;
  pointer-events:none; /* le calque lui-même ignore les clics : sans cela, cette zone
                          invisible empêcherait de refermer la lightbox en cliquant
                          à côté de la photo */
  z-index:1015;        /* au-dessus de la photo (mais sous les boutons, à 1020) */
}

.hotspot{
  --dot-color: #d4af37;  /* couleur par défaut de la pastille, redéfinissable pour une
                            pastille précise via l'option "color" dans le script */
  position:absolute;     /* placée aux coordonnées left/top posées par le script */
  transform:translate(-50%,-50%);
                         /* décale la pastille de la moitié de sa taille vers la
                            gauche et vers le haut, pour que ce soit son CENTRE, et
                            non son coin, qui tombe sur les coordonnées voulues */
  pointer-events:auto;   /* rétablit la capture du clic, annulée sur le calque parent */
  display:flex;          /* aligne le point et son libellé côte à côte */
  align-items:center;    /* les centre verticalement l'un par rapport à l'autre */
  gap:8px;               /* espace entre le point et le libellé */
  text-decoration:none;  /* retire le soulignement du lien */
  cursor:pointer;        /* curseur "main" : c'est cliquable */
  /* Le padding agrandit la zone sensible au doigt, et la marge négative annule
     l'encombrement visuel correspondant : la pastille reste petite à l'œil, mais
     confortable à toucher. */
  padding:10px;
  margin:-10px;
}

/* Le point coloré */
.hotspot-dot{
  position:relative;        /* repère de position pour l'anneau ::before ci-dessous */
  flex:0 0 auto;            /* ne grandit pas, ne rétrécit pas : garde sa taille exacte
                               même si le libellé à côté est long */
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;        /* un carré avec 50 % d'arrondi devient un cercle */
  background:var(--dot-color);
  box-shadow:0 0 0 4px rgba(255,255,255,0.92),  /* halo blanc net : détache le point
                                                   de n'importe quelle photo, claire
                                                   comme sombre */
             0 3px 12px rgba(0,0,0,0.55);       /* ombre portée plus diffuse dessous */
}

/* L'anneau qui pulse autour du point, pour attirer l'œil. */
.hotspot-dot::before{
  content:'';
  position:absolute;
  inset:-6px;                        /* dépasse de 6px de tous les côtés du point */
  border-radius:50%;
  border:3px solid var(--dot-color); /* un cercle vide, seulement son contour */
  animation:hotspot-pulse 2s ease-out infinite;
                                     /* joue l'animation définie ci-dessous, sur 2
                                        secondes, en boucle infinie */
}

/* Définition de l'animation : les pourcentages sont des étapes dans le temps. */
@keyframes hotspot-pulse{
  0%   { transform:scale(1);   opacity:.9; }  /* départ : taille normale, bien visible */
  70%  { transform:scale(2.1); opacity:0; }   /* l'anneau s'écarte et s'efface */
  100% { transform:scale(2.1); opacity:0; }   /* pause invisible avant de recommencer,
                                                 pour espacer les pulsations */
}

/* Le libellé, replié par défaut, qui se déploie au survol. */
.hotspot-label{
  display:flex;           /* icône et texte côte à côte */
  align-items:center;     /* alignés verticalement */
  gap:9px;                /* espace entre l'icône et le texte */
  white-space:nowrap;     /* interdit le retour à la ligne : le libellé reste sur une
                             seule ligne, condition pour que l'animation de largeur
                             soit fluide */
  background:rgba(15,18,22,0.92); /* pastille sombre presque opaque */
  color:#fff;
  font-size:var(--hotspot-font);
  font-weight:600;        /* semi-gras : lisible par-dessus une photo */
  padding:11px 18px;      /* 11px en haut/bas, 18px à gauche/droite */
  border-radius:999px;    /* valeur volontairement énorme : donne des extrémités
                             parfaitement arrondies quelle que soit la hauteur */
  border:1px solid rgba(255,255,255,0.14); /* liseré clair très discret */
  box-shadow:0 4px 18px rgba(0,0,0,0.5);   /* ombre : décolle le libellé de la photo */
  backdrop-filter:blur(6px);               /* floute la photo derrière le libellé,
                                              pour garder le texte lisible même sur
                                              une zone chargée */

  /* --- état replié (par défaut) --- */
  max-width:0;        /* largeur nulle : le libellé est invisible... */
  padding-left:0;     /* ...et on annule aussi ses marges internes horizontales, sinon
                         il resterait une pastille vide de 36px de large */
  padding-right:0;
  opacity:0;          /* totalement transparent */
  overflow:hidden;    /* masque le texte qui dépasse pendant que la largeur est réduite */
  transition:max-width .35s cubic-bezier(.22,.61,.36,1), /* courbe de vitesse : départ
                                                            franc, arrivée en douceur */
             opacity .25s ease,
             padding .35s ease;
}

.hotspot-label svg{
  width:var(--hotspot-icon);
  height:var(--hotspot-icon);
  flex:0 0 auto;            /* l'icône garde sa taille, ne se comprime pas */
  color:var(--dot-color);   /* l'icône reprend la couleur de la pastille : les traits
                               du dessin sont réglés sur "currentColor" dans le script */
}

/* Déploiement du libellé dans trois situations :
   - :hover        au survol de la souris ;
   - :focus-visible en navigation au clavier (touche Tab) — important pour
                    l'accessibilité, sinon la pastille serait inutilisable sans souris ;
   - .open         classe posée par le script au premier appui sur mobile. */
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
.hotspot.open .hotspot-label{
  max-width:min(65vw, 380px); /* largeur maximale : la plus PETITE des deux valeurs,
                                 soit 65 % de la largeur d'écran, soit 380px. Sur
                                 mobile c'est 65vw qui gagne, sur ordinateur 380px */
  padding-left:18px;          /* rétablit les marges internes */
  padding-right:18px;
  opacity:1;                  /* devient visible */
}

/* Pastille située dans la moitié droite de la photo : le libellé se déploie vers la
   gauche pour ne pas sortir de l'écran. row-reverse inverse l'ordre point/libellé. */
.hotspot.to-left{ flex-direction:row-reverse; }

/* Pastille proche du bas : on aligne sur le bas pour rester lisible. */
.hotspot.to-top{ align-items:flex-end; }

/* Sur petit écran, on réduit un peu toutes les tailles : une pastille de 32px
   mangerait une part démesurée d'un écran de téléphone. */
@media (max-width:640px){
  :root{
    --dot-size: 26px;
    --hotspot-font: 15px;
    --hotspot-icon: 19px;
    --flag-size: 42px;
    --flag-icon: 24px;
  }
}

/* Repère rond affiché sur la vignette d'une photo qui contient des pastilles :
   il signale qu'il y a quelque chose à découvrir en ouvrant la photo. */
.tile-flag{
  position:absolute;   /* placé par rapport à la vignette */
  top:10px;            /* à 10px du haut... */
  right:10px;          /* ...et 10px du bord droit */
  width:var(--flag-size);
  height:var(--flag-size);
  border-radius:50%;       /* cercle */
  display:flex;            /* pour centrer l'icône à l'intérieur : */
  align-items:center;      /* verticalement */
  justify-content:center;  /* horizontalement */
  background:rgba(0,0,0,0.6);              /* pastille noire à 60 % */
  color:#e9c766;                            /* doré : couleur reprise par l'icône */
  border:2px solid rgba(233,199,102,0.55);  /* liseré doré translucide */
  box-shadow:0 2px 10px rgba(0,0,0,0.45);   /* ombre pour se détacher de la photo */
  backdrop-filter:blur(3px);                /* léger flou de la photo derrière */
  z-index:2;                                /* au-dessus de la photo et du voile */
  transition:transform .25s ease, background .25s ease; /* anime l'effet de survol */
}
.tile-flag svg{
  width:var(--flag-icon);
  height:var(--flag-icon);
}
.tile:hover .tile-flag{
  transform:scale(1.1);          /* grossit de 10 % au survol de la vignette */
  background:rgba(0,0,0,0.75);   /* et s'assombrit légèrement */
}

/* Mode d'aide au placement des pastilles : s'active en ajoutant ?tags à l'URL.
   Affiche une grille de coordonnées par-dessus la photo ouverte. */
.tag-helper{
  position:absolute;
  inset:0;              /* recouvre toute la photo */
  pointer-events:none;  /* purement indicatif : ne gêne aucun clic */
}
.tag-helper span{
  position:absolute;
  transform:translate(-50%,-50%); /* centre chaque étiquette sur son point exact */
  font-size:9px;                  /* minuscule : ces repères doivent rester discrets */
  color:rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.55);    /* fond sombre pour rester lisible sur toute photo */
  padding:1px 3px;
  border-radius:3px;
  line-height:1.1;                /* interligne serré : l'étiquette reste compacte */
}


/* ==========================================================================
   9. LÉGENDE ET COMMANDES DE LA LIGHTBOX
   ========================================================================== */

/* Barre de légende + compteur, en bas de la lightbox. */
.lb-caption{
  position:absolute;
  left:0;              /* collée aux deux bords... */
  right:0;
  bottom:0;            /* ...et au bas de l'écran */
  min-height:var(--caption-height); /* hauteur minimale = celle réservée par les
                          diapos, pour que la photo ne passe jamais dessous. Une
                          légende longue peut dépasser cette hauteur */
  display:flex;
  align-items:center;      /* centre le texte verticalement dans la barre */
  justify-content:center;  /* et horizontalement */
  padding:12px 70px;       /* 70px sur les côtés : réserve la place des boutons
                              précédent/suivant, pour que le texte ne passe pas
                              dessous */
  text-align:center;
  font-size:14px;
  line-height:1.4;         /* interligne confortable si la légende passe à la ligne */
  color:#e8e8e8;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
                           /* dégradé du noir vers le transparent en montant : le
                              texte reste lisible sans poser un bandeau opaque qui
                              amputerait la photo */
  z-index:1010;            /* au-dessus des photos */
  cursor:default;          /* pas de curseur "loupe" ici : cliquer la légende ne
                              referme pas la lightbox */
  font-variant-numeric:tabular-nums;
                           /* chiffres à largeur fixe : le compteur ne "tremble" plus
                              en passant de 9 à 10 */
}

/* Réglages communs aux trois boutons (fermer, précédent, suivant). */
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  background:rgba(255,255,255,0.08); /* blanc très transparent : visible sans être
                                        agressif par-dessus la photo */
  border:none;        /* supprime la bordure par défaut des boutons */
  color:#fff;         /* couleur du symbole (×, ‹, ›) */
  width:44px;         /* 44px : taille minimale recommandée pour une cible tactile
                         confortable au doigt */
  height:44px;
  border-radius:50%;  /* boutons ronds */
  font-size:20px;     /* taille du symbole */
  display:flex;
  align-items:center;      /* centre le symbole dans le rond : */
  justify-content:center;  /* les deux axes */
  cursor:pointer;
  z-index:1020;            /* au-dessus de tout le reste de la lightbox */
  transition:background .2s ease; /* adoucit l'effet de survol */
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:rgba(255,255,255,0.2); /* plus lumineux au survol */
}

/* Positions respectives des trois boutons. */
.lb-close{ top:16px; right:16px; }  /* en haut à droite */
.lb-prev{
  left:16px;
  top:50%;                     /* le HAUT du bouton à la moitié de l'écran... */
  transform:translateY(-50%);  /* ...puis on le remonte de la moitié de sa propre
                                  hauteur : il est ainsi parfaitement centré */
}
.lb-next{
  right:16px;
  top:50%;
  transform:translateY(-50%);  /* même principe, à droite */
}

/* Adaptations pour les petits écrans. */
@media (max-width:640px){
  :root{ --caption-height:74px; } /* un peu plus de place : les légendes passent plus
                                     souvent sur deux lignes sur un écran étroit */
  .lb-prev, .lb-next{ width:38px; height:38px; font-size:17px; } /* boutons resserrés */
  .lb-close{ width:38px; height:38px; font-size:17px; top:10px; right:10px; }
  .lb-prev{ left:6px; }   /* rapprochés des bords pour laisser de la place à la photo */
  .lb-next{ right:6px; }
  .lb-caption{
    padding:12px 16px;  /* moins de marge latérale : sur mobile les boutons sont plus
                           petits et plus près du bord */
    font-size:13px;
  }
}


/* ==========================================================================
   10. PIED DE PAGE (crédits)
   ========================================================================== */
footer{
  text-align:center;
  color:var(--muted);      /* gris discret */
  font-size:12px;
  padding:24px 12px 40px;  /* 40px en bas : évite que les crédits soient collés au
                              bord de l'écran après le défilement */
}