/* ─────────────────────────────────────────────────────────────
   Galeries — Yacine Chergui
   Aucun blanc pur (#FFFFFF) : le blanc cassé #FAF8F5 le remplace partout.
   Palette : noir profond, blanc cassé, beige doré, et un seul
   orange brûlé, calme et profond, réservé au bouton de
   téléchargement, aux survols et aux petits détails.
   Pour changer l'orange, modifie les lignes --accent ci-dessous
   (et --accent-detail dans le bloc « Mode sombre »),
   puis relance « Generer les galeries ».
   ───────────────────────────────────────────────────────────── */

:root {
  /* L'orange brûlé */
  --accent: #B25628;        /* fond du bouton (mêmes valeurs dans les deux modes) */
  --accent-fonce: #9C4B26;  /* le même, plus profond, pour le survol du bouton */
  --sur-accent: #FAF8F5;    /* texte posé sur l'orange : blanc cassé */
  --accent-detail: #B25628; /* survols, liens, petits détails */

  /* Mode clair */
  --fond: #FAF8F5;          /* blanc cassé */
  --texte: #0A0A0A;         /* noir profond */
  --doux: #73634E;          /* beige chaud foncé : textes discrets */
  --filet: #DDD2C2;         /* beige : bordures et lignes fines */
  --fond-pied: #F2EBE0;     /* beige très clair : fond du bas de page */
  --pastille: rgba(250, 248, 245, 0.88);   /* fond de l'indice « Glissez pour parcourir » */
  --pastille-texte: #0A0A0A;
  color-scheme: light;

  --police: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --espace: clamp(6px, 0.7vw, 12px);       /* espace entre les photos du collage */
}

/* ── Mode sombre : noir profond, pour que les photos ressortent ── */

:root[data-theme="sombre"] {
  --fond: #0A0A0A;
  --texte: #FAF8F5;
  --doux: #B5A68F;          /* beige chaud clair : textes discrets */
  --filet: #2B2621;         /* beige très sombre : bordures */
  --fond-pied: #17140F;
  --accent-detail: #C8622A; /* un peu plus lumineux sur fond noir */
  --pastille: rgba(10, 10, 10, 0.8);
  --pastille-texte: #FAF8F5;
  color-scheme: dark;
}

/* Sans JavaScript : on suit simplement le réglage de l'appareil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fond: #0A0A0A; --texte: #FAF8F5; --doux: #B5A68F; --filet: #2B2621;
    --fond-pied: #17140F; --accent-detail: #C8622A; color-scheme: dark;
  }
}

@font-face {
  font-family: "Manrope";
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url(polices/manrope.woff2) format("woff2-variations"), url(polices/manrope.woff2) format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fond); }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ── Premier écran : logo, collage, bouton — sans avoir à défiler ── */

.scene {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;        /* hauteur visible réelle sur téléphone, barres du navigateur comprises */
  min-height: 460px;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── En-tête : logo du client ─────────────────────────────── */

.client {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 3.4vh, 40px) 64px clamp(12px, 2.2vh, 24px);  /* 64px : place pour le bouton clair/sombre */
  text-align: center;
}

.client-titre, .client-nom { margin: 0; }

.client-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(38px, 7vh, 72px);
  max-width: min(64vw, 300px);
  object-fit: contain;
}

/* Logo en mode sombre */
.logo-clair { display: none; }
:root[data-theme="sombre"] .a-logo-clair .logo-normal { display: none; }
:root[data-theme="sombre"] .a-logo-clair .logo-clair { display: block; }
:root[data-theme="sombre"] .logo-inverser .client-logo { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="sombre"] .logo-pastille .client-logo {
  box-sizing: content-box;
  padding: 8px 14px;
  background: #FAF8F5;
  border-radius: 6px;
}

.client-nom {
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.client-date {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--doux);
}

/* ── Collage horizontal qui défile ─────────────────────────── */

.collage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;          /* le doigt peut toujours faire défiler la page verticalement */
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.collage.pret { opacity: 1; }
html:not(.js) .collage { opacity: 1; overflow-x: auto; }

.bande {
  display: flex;
  gap: var(--espace);
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* Un bloc = une colonne du collage : 1 grande photo, ou 2 ou 3 photos empilées */
.bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace);
  flex: none;
  height: 100%;
}

.tuile {
  position: relative;
  display: block;
  flex: none;
  height: 100%;
  aspect-ratio: var(--r);       /* format d'origine, jamais recadré */
  background: var(--c, var(--filet));
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

:root[data-theme="sombre"] .tuile { background: var(--cs, var(--filet)); }

.bloc .tuile { aspect-ratio: auto; } /* dans le collage, largeur et hauteur sont calculées exactement */

.tuile img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tuile.chargee img { opacity: 1; }

@media (hover: hover) {
  .tuile:hover img { transform: scale(1.03); }
}

.collage.glisse, .collage.glisse .tuile { cursor: grabbing; }

.tuile:focus-visible { outline: 2px solid var(--accent-detail); outline-offset: -2px; }

/* ── Bouton de téléchargement : sous le logo, au-dessus du collage ── */

.telechargement {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px clamp(16px, 3vh, 34px);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  min-height: 56px;
  padding: 18px 34px 17px;
  background: var(--accent);
  color: var(--sur-accent);
  text-decoration: none;
  text-align: center;
  font-family: var(--police);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.bouton svg { flex: none; }
.bouton:hover { background: var(--accent-fonce); }
.bouton:active { transform: scale(0.98); }
.bouton:focus-visible { outline: 2px solid var(--accent-detail); outline-offset: 4px; }

.compte {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--doux);
}

@media (max-width: 700px) {
  .bouton {
    min-height: 50px;
    padding: 15px 28px 14px;
    font-size: 12px;
    letter-spacing: 0.14em;
    gap: 10px;
  }
}

/* Écrans très bas (téléphone à l'horizontale) : on gagne de la place pour les photos */
@media (max-height: 520px) {
  .client { padding-top: 10px; padding-bottom: 8px; }
  .client-date { display: none; }
  .client-logo { max-height: 32px; }
  .telechargement { padding-bottom: 10px; }
  .bouton { min-height: 0; padding-top: 11px; padding-bottom: 10px; }
  .compte { display: none; }
}

/* ── Indice « Glissez pour parcourir » ────────────────────── */

.indice {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--pastille);
  color: var(--pastille-texte);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;           /* ne bloque jamais un clic sur une photo */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.indice.visible { opacity: 1; transform: translate(-50%, -50%); }
.indice.visible.cache { opacity: 0; transition-duration: 0.8s; }
.indice.visible.cache.vite { transition-duration: 0.2s; }
html:not(.js) .indice { display: none; }

.indice-main { flex: none; }
.indice.visible .indice-main { animation: glisser 1.7s ease-in-out 0.3s 3 both; }

@keyframes glisser {
  0%   { transform: translateX(9px) rotate(0deg); opacity: 0.5; }
  20%  { opacity: 1; }
  60%  { transform: translateX(-9px) rotate(-10deg); opacity: 1; }
  85%  { opacity: 0.5; }
  100% { transform: translateX(9px) rotate(0deg); opacity: 0.5; }
}

/* ── Bouton mode clair / mode sombre ──────────────────────── */

.theme {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: var(--fond);
  color: var(--doux);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease, color 0.3s ease, border-color 0.4s ease, background-color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme:hover { opacity: 1; color: var(--accent-detail); border-color: var(--accent-detail); }
.theme:focus-visible { outline: 2px solid var(--accent-detail); outline-offset: 2px; }
.theme .icone-soleil { display: none; }
:root[data-theme="sombre"] .theme .icone-soleil { display: block; }
:root[data-theme="sombre"] .theme .icone-lune { display: none; }
html:not(.js) .theme { display: none; }

/* ── Bas de page discret ──────────────────────────────────── */

.signature {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--texte);
}

.pied {
  padding: 56px max(20px, calc((100% - 560px) / 2)) calc(56px + env(safe-area-inset-bottom));
  background: var(--fond-pied);
  border-top: 1px solid var(--filet);
  text-align: center;
  font-size: 13px;
  color: var(--doux);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.pied .merci { margin: 14px 0 0; }

.contact { margin: 10px 0 0; }

.contact a {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.contact a:hover { color: var(--accent-detail); border-color: var(--accent-detail); }
.contact .sep { margin: 0 10px; color: var(--filet); }

/* ── Message « Ce lien a expiré » ─────────────────────────── */

.message-expire { display: none; }

.expiree .scene,
.expiree .pied { display: none !important; }

.expiree .message-expire {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 20px;
  text-align: center;
  color: var(--doux);
}

.message-expire h1 {
  margin: 48px 0 20px;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texte);
}

.message-expire h1::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 26px auto 0;
  background: var(--accent-detail);
}

.message-expire p { margin: 0; max-width: 440px; }
.message-expire .contact { margin-top: 18px; }

/* ── Visionneuse plein écran ──────────────────────────────── */

.pswp {
  --pswp-bg: #0A0A0A;
  --pswp-placeholder-bg: #17140F;
  --pswp-icon-color: #FAF8F5;
  --pswp-icon-color-secondary: #0A0A0A;
  --pswp-preloader-color: rgba(181, 166, 143, 0.4);           /* doré, au lieu du gris d'origine */
  --pswp-preloader-color-secondary: rgba(250, 248, 245, 0.9); /* blanc cassé, au lieu du blanc pur */
}

.pswp__button:hover .pswp__icn { fill: #C8622A; } /* la visionneuse est toujours sur fond noir */

.pswp__counter {
  font-family: var(--police);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* ── Accessibilité : mouvements réduits ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tuile img { transition: opacity 0.4s ease; }
  .tuile:hover img { transform: none; }
  .indice.visible .indice-main { animation: none; }
}