/* =========================================================================
   ARNAUD MATTHEY — Photography
   Design system : minimaliste (réf. patrickguller.com)
   Accent noir #111 · Inter / Inter Tight · wordmark espacé · nav minuscules
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --ink:            #111111;   /* accent / texte principal */
  --ink-soft:       #4a4a4a;   /* texte secondaire */
  --ink-faint:      #8a8a8a;   /* légendes, méta */
  --line:           #ececec;   /* filets */
  --paper:          #ffffff;   /* fond */
  --paper-dim:      #f6f6f4;   /* fond alterné */

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;

  --wide: 0.28em;              /* letter-spacing wordmark / nav */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 68px;

  --t-fast: 160ms;
  --t: 320ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; }

/* ---------- Utilitaires ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 14px;
}
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border: 0;                       /* plat : ni ombre ni bordure */
}
.site-header .wrap {
  min-height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.wordmark {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--wide);
  text-transform: uppercase;
  font-size: clamp(15px, 2.2vw, 20px);
  white-space: nowrap;
  color: var(--ink);
  justify-self: center;
}
.primary-nav {
  grid-column: 3; justify-self: end;
  display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center;
}
.primary-nav a {
  font-size: 13px; letter-spacing: 0.02em;
  text-transform: lowercase;       /* directive : nav minuscules (style P. Güller) */
  color: var(--ink-soft);
  padding: 6px 0; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--ink); transition: width var(--t) var(--ease);
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { width: 100%; }

.nav-toggle { display: none; grid-column: 1; justify-self: start;
  background: none; border: 0; width: 40px; height: 40px; padding: 8px; }
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; transition: transform var(--t) var(--ease), opacity var(--t-fast); }

/* ---------- Hero (accueil) ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center;
  color: #fff; text-align: center;
  overflow: hidden;
  background: #111;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity 600ms var(--ease);
  opacity: 0;
}
.hero__bg.is-active { opacity: 1; }
.hero::after {                       /* voile pour lisibilité du texte */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding: var(--gutter); }
.hero__title {
  font-size: clamp(34px, 8vw, 92px);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800;
  margin: 0 0 10px;
}
.hero__subtitle {
  font-size: clamp(14px, 1.6vw, 18px); font-weight: 400;
  letter-spacing: 0.02em; color: rgba(255,255,255,.86);
  max-width: 44ch; margin: 0 auto;
}

/* Browse-by (Tâche B) */
.browse {
  position: relative; z-index: 2;
  margin-top: clamp(28px, 5vh, 56px);
  display: flex; gap: clamp(24px, 6vw, 72px); justify-content: center; flex-wrap: wrap;
}
.browse__link {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.82);
  padding-bottom: 6px; border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.browse__link:hover,
.browse__link:focus-visible { color: #fff; border-color: #fff; outline: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 13px 26px; border: 1px solid currentColor; border-radius: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--light { color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--ink { color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; }

/* ---------- Sections génériques ---------- */
.section { padding-block: clamp(56px, 9vw, 120px); }
.section--dim { background: var(--paper-dim); }
.section__head { max-width: 62ch; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section__title { font-size: clamp(26px, 4vw, 44px); letter-spacing: -0.01em; }
.section__lead { margin-top: 16px; color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); }

/* ---------- Filtre Photography ---------- */
.filterbar {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--paper);
  display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: center;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.filterbar button {
  background: none; border: 0; padding: 4px 0;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); position: relative;
  transition: color var(--t-fast) var(--ease);
}
.filterbar button::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--ink); transition: width var(--t) var(--ease);
}
.filterbar button:hover { color: var(--ink); }
.filterbar button[aria-pressed="true"] { color: var(--ink); }
.filterbar button[aria-pressed="true"]::after { width: 100%; }

/* Grille photo */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.4vw, 18px); }
.photo {
  position: relative; overflow: hidden; background: var(--paper-dim);
  aspect-ratio: 3 / 2;
}
.photo[hidden] { display: none; }
.photo img, .photo .ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease), filter var(--t) var(--ease);
}
.photo:hover img, .photo:hover .ph { transform: scale(1.04); }
.photo__cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  opacity: .9; transform: none;
  transition: opacity var(--t) var(--ease);
}
.photo:hover .photo__cap { opacity: 1; }
@media (max-width: 640px) { .photo__cap { font-size: 8.5px; left: 9px; bottom: 8px; letter-spacing: 0.1em; } }

/* ---------- Grille Destinations (cartes outline carrées) ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 34px); }

.dest-continent{display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.24em;text-transform:uppercase;color:#1c1c1c;
  margin:clamp(38px,5vw,60px) auto clamp(16px,2.2vw,24px);max-width:1100px}
.dest-continent::before,.dest-continent::after{content:"";height:1px;flex:0 0 auto;width:clamp(24px,7vw,84px);background:var(--line)}
#country-list>.dest-continent:first-child{margin-top:4px}

.dest-card { display: block; text-align: center; }
.dest-card__art {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--paper-dim); overflow: hidden;
  transition: background var(--t) var(--ease);
}
.dest-card:hover .dest-card__art { background: #eeeeec; }
.dest-card__art svg, .dest-card__art img { width: 66%; height: 66%; object-fit: contain;
  transition: transform var(--t) var(--ease); }
.dest-card:hover .dest-card__art svg { transform: scale(1.05); }
.dest-card__name {
  margin-top: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.01em;
}
.dest-card__cta {
  margin-top: 4px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.about-grid .portrait { aspect-ratio: 4 / 5; background: var(--paper-dim); filter: grayscale(1); overflow: hidden; }
.prose p { margin: 0 0 18px; color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 17px); }
.prose p:first-of-type { color: var(--ink); font-size: clamp(17px, 1.7vw, 20px); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); background: none;
  padding: 10px 0; transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 120px; }
.contact-detail { margin-bottom: 22px; }
.contact-detail dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.contact-detail dd { margin: 0; font-size: 16px; }

/* ---------- Journal ---------- */
.article-list { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 760px; margin-inline: auto; }
.article-card { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; padding-bottom: clamp(28px,4vw,44px); border-bottom: 1px solid var(--line); }
.article-card__thumb { aspect-ratio: 4 / 3; background: var(--paper-dim); overflow: hidden; }
.article-card__date { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.article-card__title { font-size: 21px; margin: 8px 0 10px; }
.article-card__excerpt { color: var(--ink-soft); font-size: 15px; }
.article { max-width: 720px; margin-inline: auto; }
.article h1 { font-size: clamp(28px, 5vw, 46px); margin-bottom: 12px; }
.article__meta { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 32px; }
.article p { color: var(--ink-soft); font-size: 17px; margin: 0 0 20px; }

/* ---------- Country page ---------- */
.country-hero { padding-block: clamp(48px, 8vw, 96px); text-align: center; }
.country-hero h1 { font-size: clamp(30px, 6vw, 60px); letter-spacing: 0.02em; }
.country-hero p { color: var(--ink-soft); max-width: 52ch; margin: 16px auto 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px; margin-top: clamp(40px,6vw,80px); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: lowercase; }
.site-footer a:hover { color: var(--ink); }
.footer-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; }
.lang-switch { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.lang-switch a { letter-spacing: 0.08em; }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang-switch .sep { color: var(--line); }
.colophon { width: 100%; margin-top: 24px; color: var(--ink-faint); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card { grid-template-columns: 1fr; }
  .article-card__thumb { max-width: 320px; }
}
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .site-header .wrap { grid-template-columns: auto 1fr auto; }
  .wordmark { grid-column: 2; font-size: 15px; letter-spacing: 0.2em; }
  .nav-toggle { display: block; }
  .primary-nav {
    grid-column: 1 / -1; justify-self: stretch;
    display: none; flex-direction: column; gap: 4px; padding: 12px 0 8px;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { font-size: 15px; }
  .photo-grid { grid-template-columns: 1fr; }
  .dest-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Motion / accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============ Retours visuels (18.07.2026) ============ */
/* Photography : 1 photo par ligne */
.photo-grid--one{grid-template-columns:1fr;width:76%;max-width:1240px;margin-inline:auto;gap:clamp(14px,2vw,24px)}
@media(max-width:760px){.photo-grid--one{width:100%}}
.photo-grid--one .photo{aspect-ratio:3/2}

/* Destinations : nom + Explore DANS le cadre + zoom hover */
.dest-card__art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.dest-card__art .outline-img{width:58%;height:auto;max-height:52%;object-fit:contain;transition:transform .35s var(--ease)}
.dest-card:hover .dest-card__art .outline-img{transform:scale(1.05)}
.dest-card__cap{text-align:center}
.dest-card__cap .nm{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.dest-card__cap .ex{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px;transition:color var(--t-fast)}
.dest-card:hover .dest-card__cap .ex{color:var(--ink)}

/* Contact : photo */
.contact-photo{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:22px;filter:grayscale(1)}

/* ===== Nav en menu hamburger déroulant à TOUTES les tailles ===== */
.nav-toggle{display:block}
.primary-nav{
  position:absolute; top:var(--header-h); left:var(--gutter);
  grid-column:auto; justify-self:auto;
  display:none; flex-direction:column; gap:2px;
  background:var(--paper); border:1px solid var(--line);
  padding:10px 18px; min-width:190px; z-index:60;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.primary-nav.is-open{display:flex}
.primary-nav a{font-size:14px; padding:9px 0; text-transform:lowercase; color:var(--ink-soft)}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--ink)}
.primary-nav a::after{display:none}

/* ===== Landing : boutons browse plus définis, espacés, mobile ===== */
.browse{gap:clamp(18px,3vw,40px);margin-top:clamp(34px,6vh,64px)}
.browse__link{border:1px solid rgba(255,255,255,.6);background:rgba(17,17,17,.22);
  padding:15px 30px;font-size:clamp(12px,1.2vw,14px);letter-spacing:.16em}
.browse__link:hover,.browse__link:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:640px){
  .browse{flex-direction:column;align-items:stretch;gap:14px;width:min(340px,84vw);margin-inline:auto}
  .browse__link{width:100%;text-align:center;padding:17px 20px}
}
/* ===== Photography : format naturel (pas de crop), verticales en portrait, plus large ===== */
.photo-grid--one{width:90%;max-width:1520px}
.photo-grid--one .photo{aspect-ratio:auto;background:none}
.photo-grid--one .photo img{width:100%;height:auto;display:block;object-fit:unset}
.photo-grid--one .photo--portrait{max-width:64%;margin-inline:auto}
@media(max-width:760px){.photo-grid--one{width:100%}.photo-grid--one .photo--portrait{max-width:90%}}

/* ===== Hero : lisibilité sur images claires (vignette + ombre + fond bouton) ===== */
.hero::after{background:
  radial-gradient(115% 85% at 50% 44%, rgba(0,0,0,.05), rgba(0,0,0,.40) 100%),
  linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34))}
.hero__title,.hero__subtitle{text-shadow:0 2px 20px rgba(0,0,0,.38)}
.browse__link{background:rgba(0,0,0,.34)}
.browse__link:hover,.browse__link:focus-visible{background:#fff;color:var(--ink);border-color:#fff}

/* ===== Photography : index par thèmes ===== */
.themes-head{padding-block:clamp(48px,7vw,90px) 0}
.filterbar{gap:10px 30px;padding-block:24px}
.filterbar button{font-size:14px;letter-spacing:.16em;padding:6px 2px}
.theme-hint{padding:40px 20px 90px;font-size:14px;letter-spacing:.02em}
.photo-grid[hidden]{display:none}

/* ===== Destinations : carte du monde interactive (N&B) ===== */
.worldmap-section{padding-block:clamp(40px,6vw,72px) 0}
.worldmap-lead{margin:10px auto 0;font-size:14px;max-width:52ch}
.worldmap{position:relative;max-width:1000px;margin:20px auto 0}
.worldmap-svg{width:100%;height:auto;display:block}
.worldmap .cc{fill:#eaeae8;stroke:#fff;stroke-width:.6;vector-effect:non-scaling-stroke}
.worldmap .cc.port{fill:#cdccc8;cursor:pointer;transition:fill .18s var(--ease)}
.worldmap .cc.port:hover,.worldmap .cc.port:focus,.worldmap .cc.port.hl{fill:#141414;outline:none}
.worldmap-tip{position:absolute;pointer-events:none;background:#111;color:#fff;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:2px;
  transform:translate(-50%,calc(-100% - 10px));white-space:nowrap;z-index:6}

/* Flèche "browse by countries" sous la carte */
.browse-countries{display:flex;flex-direction:column;align-items:center;gap:6px;
  width:max-content;margin:clamp(24px,4vw,42px) auto 0;color:var(--ink-faint);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:color .2s var(--ease)}
.browse-countries:hover{color:var(--ink)}
.browse-countries svg{animation:bcbounce 1.8s ease-in-out infinite}
@keyframes bcbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.browse-countries svg{animation:none}}

/* ===== Photography : sélecteur de thèmes (type landing) ===== */
.theme-hero{position:relative;min-height:calc(88svh - var(--header-h));display:grid;place-items:center;
  overflow:hidden;background:#111 url(/assets/img/photos/arctic/arctic-hero-bw.jpg) center/cover;text-align:center;color:#fff}
.theme-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s var(--ease)}
.theme-hero__bg.show{opacity:1}
.theme-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.5));pointer-events:none}
.theme-hero__inner{position:relative;z-index:2;padding:var(--gutter)}
.theme-hero .eyebrow{color:rgba(255,255,255,.72)}
.theme-hero__title{font-size:clamp(26px,4vw,44px);margin-bottom:clamp(24px,4vw,42px);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.theme-list{display:flex;flex-direction:column;gap:12px;align-items:center}
.theme-list button{width:min(360px,74vw);font-family:var(--font-display);font-weight:600;
  font-size:clamp(14px,1.6vw,17px);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.55);padding:15px 24px;border-radius:2px;
  cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.theme-list button:hover,.theme-list button:focus-visible,.theme-list button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.theme-hero .theme-hint{color:rgba(255,255,255,.7);margin-top:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0}

/* Logo studio dans le footer */
.footer-brand{display:inline-flex;align-items:center;gap:14px}
.footer-logo{height:74px;width:auto;display:block}
@media(max-width:640px){.footer-logo{height:58px}}
/* Aperçu thèmes : cadrage cohérent, favorise le haut (visages) */
.theme-hero__bg{background-position:center 32%}

/* Logo studio en haut à droite du header */
.header-logo{grid-column:3;justify-self:end;display:flex;align-items:center}
.header-logo img{height:46px;width:auto;display:block}
@media(max-width:640px){.header-logo img{height:34px}}
@keyframes logo-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.header-logo.spin img{animation:logo-spin .65s var(--ease)}
/* Fond iceberg par défaut sous le menu thèmes : désormais global (desktop + mobile) via .theme-hero.
   .theme-hero__bg reste la couche de survol (fondu des aperçus), transparente au repos → laisse voir l'iceberg. */

/* ---------- Lightbox (visionneuse galeries) ---------- */
.photo{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;background:rgba(12,12,12,.95);
  display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,44px);
  animation:lb-in .22s var(--ease)}
.lb[hidden]{display:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb__img{max-width:100%;max-height:calc(100vh - 96px);object-fit:contain;
  box-shadow:0 16px 50px rgba(0,0,0,.55);background:#0c0c0c}
.lb__cap{color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lb__close,.lb__nav{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.72;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.lb__close:hover,.lb__nav:hover,.lb__close:focus-visible,.lb__nav:focus-visible{opacity:1;outline:none}
.lb__close{top:clamp(8px,2vw,22px);right:clamp(10px,2.4vw,28px);width:46px;height:46px}
.lb__nav{top:50%;transform:translateY(-50%);width:64px;height:96px}
.lb__nav:hover{opacity:1}
.lb__prev{left:clamp(2px,1.4vw,22px)}
.lb__next{right:clamp(2px,1.4vw,22px)}
.lb__nav[hidden]{display:none}
body.lb-open{overflow:hidden}
@media(max-width:640px){.lb__nav{width:46px;height:76px}.lb__nav svg{width:26px;height:26px}.lb__img{max-height:calc(100vh - 76px)}}

/* ---------- Amélioration progressive : reveal + fondu images ---------- */
.enh .photo img{opacity:0;transition:opacity .7s var(--ease)}
.enh .photo img.is-loaded{opacity:1}
.enh .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease) var(--rd,0ms),transform .6s var(--ease) var(--rd,0ms)}
.enh .rv.in{opacity:1;transform:none}
.enh.enh-off .rv{opacity:1;transform:none;transition:none}
.enh.enh-off .photo img{opacity:1;transition:none}
@media (prefers-reduced-motion: reduce){.enh .rv,.enh .photo img{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- Hero cinématique : crossfade + Ken Burns ---------- */
.hero__bg{transition:opacity 1.1s var(--ease)}
@keyframes kenburns{from{transform:scale(1.015)}to{transform:scale(1.09)}}
.hero__bg.is-active{opacity:1;animation:kenburns 13s ease-out both}
@media (prefers-reduced-motion: reduce){.hero__bg.is-active{animation:none}}

/* ---------- Cartes destination : révèlent une vraie photo ---------- */
.dest-card__art .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);z-index:0}
.dest-card.has-cover .dest-card__art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.26),rgba(10,10,10,.52));
  opacity:0;transition:opacity .5s var(--ease);z-index:1}
.dest-card__art .outline-img,.dest-card__art .dest-card__cap{position:relative;z-index:2}
.dest-card.has-cover .outline-img{transition:opacity .4s var(--ease),transform .4s var(--ease)}
/* Desktop : au survol / focus clavier */
@media (hover:hover){
  .dest-card.has-cover:hover .cover-img,.dest-card.has-cover:focus-visible .cover-img{opacity:1}
  .dest-card.has-cover:hover .dest-card__art::after,.dest-card.has-cover:focus-visible .dest-card__art::after{opacity:1}
  .dest-card.has-cover:hover .outline-img,.dest-card.has-cover:focus-visible .outline-img{opacity:0}
  .dest-card.has-cover:hover .nm,.dest-card.has-cover:focus-visible .nm{color:#fff}
  .dest-card.has-cover:hover .ex,.dest-card.has-cover:focus-visible .ex{color:rgba(255,255,255,.9)}
}
/* Mobile : outline par défaut, aperçu "flip" vers la photo piloté par JS (.show-cover) */
@media (hover:none){
  .dest-card.has-cover.show-cover .cover-img{opacity:1}
  .dest-card.has-cover.show-cover .dest-card__art::after{opacity:1}
  .dest-card.has-cover.show-cover .outline-img{opacity:0}
  .dest-card.has-cover.show-cover .nm{color:#fff}
  .dest-card.has-cover.show-cover .ex{color:rgba(255,255,255,.9)}
}
/* Retour tactile au tap */
.dest-card,.photo{transition:transform .16s var(--ease)}
.dest-card:active{transform:scale(.984)}
.photo:active{transform:scale(.99)}

/* ---------- Badge "coming soon" sur les destinations sans photo ---------- */
.dest-card:not(.has-cover) .dest-card__art::before{
  content:"Coming soon";
  position:absolute;top:10px;left:10px;z-index:3;pointer-events:none;
  font-family:var(--font-sans);font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  padding:4px 8px;border-radius:2px;line-height:1;
}
:lang(fr) .dest-card:not(.has-cover) .dest-card__art::before{content:"Bientôt"}