/* ==========================================================================
   MES PHOTOS — globe, liste des pays, panneau de série, agrandissement
   ========================================================================== */

main { max-width: 1280px; margin: 0 auto; width: 100%; }

.photos-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 60px); align-items: center; margin-top: clamp(16px, 3vw, 36px); }

/* ---------- Globe ---------- */
#gw { position: relative; aspect-ratio: 1; max-width: 620px; width: 100%; margin: 0 auto; touch-action: none; cursor: grab; }
#gw:active { cursor: grabbing; }
#cv { width: 100%; height: 100%; display: block; }
.gzb { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.gzb button { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--bleu); background: var(--creme); color: var(--bleu); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.gzb button:focus-visible { background: var(--bleu); color: var(--creme); } @media (hover: hover) and (pointer: fine) { .gzb button:hover { background: var(--bleu); color: var(--creme); } }
.indice { text-align: center; font-size: .8rem; opacity: .65; margin: 6px 0 0; }

/* ---------- Liste des pays ---------- */
.lieux-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--chocolat) 22%, transparent); }
.lieux-liste li { border-bottom: 1px solid color-mix(in srgb, var(--chocolat) 22%, transparent); }
.pays-btn { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; gap: 12px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 16px 4px; cursor: pointer; transition: padding .25s, color .25s; }
.pays-btn.on, .pays-btn:focus-visible { padding-left: 14px; color: var(--bleu); } @media (hover: hover) and (pointer: fine) { .pays-btn:hover { padding-left: 14px; color: var(--bleu); } }
.pays-btn .n { font-size: .75rem; opacity: .85; }
.pays-btn .t { font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; }

/* ---------- Panneau de série ---------- */
#ser { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#ser .voile { position: absolute; inset: 0; background: color-mix(in srgb, var(--chocolat) 35%, transparent); opacity: 0; transition: opacity .4s; }
#ser .panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--creme); transform: translateX(100%); transition: transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .5s; overflow-y: auto; padding: 18px clamp(16px, 3vw, 36px) 30px; outline: none; visibility: hidden; }
#ser.on { pointer-events: auto; }
#ser.on .voile { opacity: 1; }
#ser.on .panneau { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.panneau h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; margin: 22px 0 4px; }
.panneau .meta { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; opacity: .65; min-height: 1em; }
.panneau .phrase-serie { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; margin: 14px 0 20px; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.onglets button { border: 1.5px solid var(--bleu); background: none; color: var(--bleu); border-radius: 99px; padding: 6px 13px; font: inherit; font-size: .85rem; cursor: pointer; }
.onglets button.on { background: var(--bleu); color: var(--creme); }
.mosaique { columns: 2 140px; column-gap: 12px; }
.vignette { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; border: 0; padding: 0; border-radius: 4px; overflow: hidden; cursor: zoom-in; position: relative; transition: transform .3s; }
.vignette:focus-visible { transform: scale(1.015); } @media (hover: hover) and (pointer: fine) { .vignette:hover { transform: scale(1.015); } }
.vignette img { display: block; width: 100%; height: auto; }
.vignette .cale { display: block; width: 100%; }
.serie-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.serie-nav .bouton { padding: .7em 1.1em; }

/* ---------- Agrandissement ---------- */
#lb { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--chocolat) 94%, transparent); display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
#lb[hidden] { display: none; }
.lb-cadre { max-width: min(92vw, 1200px); max-height: 86vh; display: grid; place-items: center; }
.lb-cadre img { max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 4px; display: block; }
.lb-cale { width: min(80vw, 900px); aspect-ratio: 3 / 2; border-radius: 4px; display: grid; place-items: center; font-size: .75rem; letter-spacing: .2em; color: var(--chocolat); }
.lb-bouton { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--creme); background: transparent; color: var(--creme); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb-bouton:focus-visible { background: var(--creme); color: var(--chocolat); } @media (hover: hover) and (pointer: fine) { .lb-bouton:hover { background: var(--creme); color: var(--chocolat); } }
.lb-fermer { top: 16px; right: 16px; }
.lb-prec { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-suiv { right: 16px; top: 50%; transform: translateY(-50%); }
#lb :focus-visible { outline-color: var(--creme); }
body.verrou { overflow: hidden; }

@media (max-width: 820px) {
  .photos-grille { grid-template-columns: 1fr; }
  .lb-prec { left: 6px; } .lb-suiv { right: 6px; }
  .lb-bouton { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { #ser .panneau, #ser .voile, .vignette, .pays-btn { transition: none; } }

/* ==========================================================================
   ÉCHELLE DE TEXTE UNIQUE — téléphone (≤ 700 px), Mes photos : 12 · 14 · 16 · 20 · 24 · 32 px, zones tactiles ≥ 44 px
   ========================================================================== */
@media (max-width: 700px) {
  .page-titre h1, .panneau h2 { font-size: 2rem; }
  .pays-btn .t { font-size: 1.5rem; }
  .pays-btn { min-height: 56px; }
  .panneau .phrase-serie { font-size: 1.25rem; }
  .indice { font-size: .875rem; }
  .panneau .meta, .pays-btn .n { font-size: .75rem; }
  .onglets button { font-size: .875rem; min-height: 44px; padding: 8px 16px; }
}

@media (max-width: 700px) { .gzb button { width: 44px; height: 44px; } }   /* zoom du globe : zone tactile de 44 px */

@media (max-width: 700px) {
  .pays-btn .t { font-size: 1.25rem; }     /* noms de pays plus petits */
  .gzb { display: none; }                  /* le globe se zoome à deux doigts */
}