/* ==========================================================================
   Page Galerie — mur de polaroids (vraies photos) ou guirlande « Bientôt »
   ========================================================================== */

/* ---------- Hero : polaroids en éventail + appareil photo ---------- */
.gal-hero-visuel { position: relative; height: 330px; max-width: 560px; width: 100%; justify-self: center; }
@media (min-width: 600px) { .gal-hero-visuel { height: 420px; } }
@media (min-width: 960px) { .gal-hero-visuel { height: 460px; } }

.polar-hero {
  position: absolute;
  width: 44%;
  background: var(--blanc);
  border: var(--trait);
  border-radius: 8px;
  padding: 9px 9px 0;
  box-shadow: var(--pop);
  text-align: center;
}
.polar-hero span { display: block; font-family: var(--f-script); font-size: clamp(16px, 2vw, 22px); padding: 6px 0 8px; line-height: 1.1; }
.polar-hero.p1 { left: 1%; top: 4%; rotate: -9deg; }
.polar-hero.p2 { right: 2%; top: 0; rotate: 7deg; }
.polar-hero.p3 { left: 27%; top: 38%; rotate: -3deg; z-index: 2; }
.gal-appareil {
  position: absolute;
  z-index: 3;
  width: 46%;
  right: -2%;
  bottom: -2%;
  rotate: 9deg;
  filter: drop-shadow(5px 6px 0 rgba(27, 21, 17, 0.25));
}
.gal-clic {
  position: absolute;
  z-index: 4;
  right: 34%;
  bottom: 30%;
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--rouge);
  background: var(--blanc);
  border: var(--trait);
  border-radius: 14px;
  padding: 4px 12px;
  box-shadow: var(--pop);
  rotate: -12deg;
  animation: clic 4s ease-in-out infinite;
}
.gal-flash {
  position: absolute;
  z-index: 2;
  right: 18%;
  bottom: 20%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0.85) 18%, rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  pointer-events: none;
  animation: flash 4s ease-out infinite;
}
@keyframes flash { 0%, 62% { opacity: 0; transform: scale(0.6); } 66% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes clic { 0%, 60% { transform: scale(1); } 66% { transform: scale(1.18); } 76%, 100% { transform: scale(1); } }

/* ---------- Photo façon polaroid ---------- */
.polar-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 2px solid var(--encre);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image: radial-gradient(rgba(27, 21, 17, 0.1) 1.5px, transparent 2px);
  background-size: 14px 14px;
}
.polar-photo img { width: 74%; height: auto; filter: drop-shadow(3px 4px 0 rgba(27, 21, 17, 0.18)); }
.t-orange { background-color: #ffd2a8; }
.t-creme { background-color: #ffe9bd; }
.t-violet { background-color: #4b3470; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 2px); }
.t-bleu { background-color: #cfe9f7; }
.t-jaune { background-color: #fff0a8; }
.t-rouge { background-color: #ffd0c9; }
.t-vert { background-color: #d5f0dc; }
.t-rose { background-color: #ffd6ea; }

/* ---------- Section photos ---------- */
.gal-section {
  padding-top: 44px;
  background:
    radial-gradient(rgba(27, 21, 17, 0.08) 1.6px, transparent 2px) 0 0 / 18px 18px,
    var(--creme);
}
#photos { scroll-margin-top: calc(var(--header-h) + 8px); }

.gal-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; }
.gal-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 16px;
  border: 2.5px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: 3px 3px 0 var(--encre);
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.gal-filtre:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); }
.gal-filtre.actif { background: var(--jaune); }
.gal-filtre small { font-family: var(--f-texte); font-size: 12px; font-weight: 800; text-transform: none; background: var(--encre); color: var(--blanc); border-radius: 99px; padding: 1px 8px; }
.gal-filtre small.bientot { background: var(--creme-2); color: var(--rouge); }
@media (max-width: 520px) {
  .gal-filtres { gap: 8px; }
  .gal-filtre { min-height: 42px; padding: 0 12px; font-size: 13px; }
}

/* ---------- État « bientôt » ---------- */
.gal-bientot { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.gal-tampon {
  display: inline-block;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--encre);
  color: var(--jaune);
  padding: 8px 16px;
  border-radius: 999px;
  rotate: -2deg;
  margin-bottom: 16px;
}
.gal-bientot p { color: var(--gris); font-weight: 500; font-size: 17px; margin: 16px auto 0; max-width: 560px; }

/* guirlande : chaque case porte son bout de ficelle, les bouts se rejoignent */
.gal-fil { --gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px var(--gap); }
.fil-case { position: relative; width: calc((100% - var(--gap)) / 2); padding-top: 30px; }
@media (min-width: 900px) { .fil-case { width: calc((100% - 3 * var(--gap)) / 4); } }
.fil-case::before {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(var(--gap) / -2);
  right: calc(var(--gap) / -2);
  height: 20px;
  border-bottom: 2.5px solid #8a6446;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.polar {
  position: relative;
  margin: 0;
  background: var(--blanc);
  border: var(--trait);
  border-radius: 8px;
  padding: 9px 9px 0;
  box-shadow: var(--pop);
}
.polar-vide { transform-origin: 50% -16px; rotate: var(--r); animation: balance 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes balance { 50% { rotate: calc(var(--r) * -0.5); } }
.polar-vide figcaption { font-family: var(--f-script); font-size: clamp(16px, 1.9vw, 21px); text-align: center; line-height: 1.15; padding: 9px 2px 11px; }
.pince {
  position: absolute;
  z-index: 2;
  top: -24px;
  left: 50%;
  translate: -50% 0;
  width: 13px;
  height: 32px;
  background: linear-gradient(90deg, #e9b983 0 45%, #d59b5f 45% 55%, #e9b983 55%);
  border: 2.5px solid var(--encre);
  border-radius: 4px;
}
.polar-bientot {
  position: absolute;
  right: 6px;
  bottom: 8px;
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge);
  background: rgba(255, 255, 255, 0.92);
  border: 2.5px solid var(--rouge);
  border-radius: 6px;
  padding: 2px 8px;
  rotate: -10deg;
}
.gal-note { text-align: center; font-family: var(--f-script); color: var(--rouge); font-size: clamp(19px, 2.2vw, 24px); margin: 34px 0 0; rotate: -1.5deg; }

/* ---------- Mur de vraies photos ---------- */
.gal-mur { columns: 2; column-gap: 16px; }
@media (min-width: 720px) { .gal-mur { columns: 3; column-gap: 22px; } }
@media (min-width: 1100px) { .gal-mur { columns: 4; } }
.polar-vraie {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 12px 0 24px;
  padding: 8px 8px 0;
  rotate: var(--r);
  cursor: zoom-in;
  text-align: center;
  transition: rotate 0.2s, transform 0.2s, box-shadow 0.2s;
}
.polar-vraie:hover { rotate: 0deg; transform: translate(-2px, -2px); box-shadow: var(--pop-l); }
.polar-vraie img { width: 100%; height: auto; border-radius: 4px; border: 2px solid var(--encre); margin-bottom: 8px; background: var(--creme-2); }
.polar-legende { display: block; font-family: var(--f-script); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.15; padding: 0 4px 10px; }
.scotch {
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  rotate: -4deg;
  width: 76px;
  height: 24px;
  background: rgba(250, 197, 5, 0.6);
  border-left: 2px dashed rgba(27, 21, 17, 0.18);
  border-right: 2px dashed rgba(27, 21, 17, 0.18);
}

/* ---------- Bloc partage ---------- */
.gal-partage-section { padding-top: 10px; }
.gal-partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--orange);
  border: var(--trait);
  border-radius: var(--r-l);
  box-shadow: var(--pop-l);
  padding: 30px clamp(22px, 4vw, 44px);
}
.gal-partage .surtitre { color: var(--encre); }
.gal-partage p:not(.surtitre) { font-weight: 600; max-width: 520px; margin: 14px 0 0; }

/* ---------- Visionneuse ---------- */
.visionneuse {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 15, 12, 0.95);
  color: var(--blanc);
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgba(20, 15, 12, 0.6); }
.vis-figure { margin: 0; padding: 70px 16px; display: grid; gap: 14px; justify-items: center; max-width: min(100vw, 1100px); }
.vis-figure img { max-width: 100%; max-height: 74vh; max-height: 74dvh; width: auto; height: auto; border: 6px solid var(--blanc); border-radius: 6px; box-shadow: 8px 8px 0 var(--jaune); }
.vis-figure figcaption { font-family: var(--f-script); color: var(--jaune); font-size: clamp(22px, 3vw, 30px); text-align: center; }
.vis-fermer, .vis-nav {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
  font-family: var(--f-titre);
  font-weight: 900;
  color: var(--encre);
}
.vis-fermer { top: 14px; right: 14px; width: 48px; height: 48px; background: var(--blanc); font-size: 20px; }
.vis-nav { top: 50%; translate: 0 -50%; width: 54px; height: 54px; background: var(--jaune); font-size: 34px; line-height: 1; padding-bottom: 4px; }
.vis-nav.prec { left: 12px; }
.vis-nav.suiv { right: 12px; }
.visionneuse.seule .vis-nav { display: none; }
@media (max-width: 700px) { .vis-nav { top: auto; bottom: 18px; translate: none; } }
.vis-compteur { position: fixed; bottom: 30px; left: 50%; translate: -50% 0; font-family: var(--f-titre); font-weight: 800; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .polar-vide, .gal-clic, .gal-flash { animation: none; }
}

/* titre du hero sur 2-3 lignes max */
.gal-hero h1 { font-size: clamp(44px, 6.6vw, 92px); }
.gal-hero h1 .pop-txt { white-space: nowrap; }
@media (max-width: 520px) { .gal-filtre small.bientot { display: none; } }