/* Vincent Bonisoli - styles personnalisés */

/* Léger mouvement de caméra sur l'image de fond hero (Jack-B) */
@keyframes hero-camera-move {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  25% {
    transform: scale(1.02) translate(-0.8%, -0.4%);
  }
  50% {
    transform: scale(1.015) translate(0.5%, 0.3%);
  }
  75% {
    transform: scale(1.025) translate(-0.3%, 0.5%);
  }
}

/* Léger mouvement de caméra sur une image en background */
@keyframes hero-camera-move-bg {
  0%, 100% {
    background-position: calc(50% - 1.9cm) center;
    background-size: 185.9085%;
  }
  25% {
    background-position: calc(50% - 1.9cm - 1.2vw) calc(50% - 0.6vh);
    background-size: 189%;
  }
  50% {
    background-position: calc(50% - 1.9cm + 0.8vw) calc(50% + 0.5vh);
    background-size: 187.5%;
  }
  75% {
    background-position: calc(50% - 1.9cm - 0.6vw) calc(50% + 0.8vh);
    background-size: 190%;
  }
}

.hero-bg-motion {
  animation: hero-camera-move 25s ease-in-out infinite;
  transform-origin: center;
}

.hero-bg-inner {
  width: 100%;
  height: 100%;
}

/* Mobile : photo complète visible, jamais coupée (pas de scale pour éviter tout recadrage) */
@media (max-width: 767px) {
  .hero-bg-inner {
    position: absolute;
    inset: 0;
    width: 90%;
    height: 90%;
    margin: auto;
    transform: scale(0.9);
    transform-origin: center;
  }
  /* Page d'accueil mobile : photo dans le wrap (background), pas d'img = pas de cadre, modifiable sans changement de couleur */
  body.page-accueil .hero-bg-inner {
    display: none;
  }
  body.page-accueil .hero-bg-wrap {
    overflow: hidden;
    background-image: url("../images/surmoi-accueil-mobile-vincent-bonisoli.jpg");
    background-size: 185.9085%;
    background-position: calc(50% - 1.9cm) center;
    background-repeat: no-repeat;
    background-color: #8a8d92;
    animation: hero-camera-move-bg 25s ease-in-out infinite;
  }
  .hero-bg-motion {
    object-fit: contain !important;
    object-position: calc(50% - 1.9cm) center;
    animation: none;
    min-width: 100%;
    min-height: 100%;
    transform: scale(1.111);
    transform-origin: center;
  }
  body.page-accueil .hero-bg-motion {
    object-fit: cover !important;
    object-position: calc(50% - 1.9cm) center;
    transform: none;
  }
  /* Autres pages mobile : même photo que l'accueil, même taille / proportion / emplacement */
  body:not(.page-accueil) .hero-bg-inner {
    display: none;
  }
  body:not(.page-accueil) .hero-bg-wrap {
    overflow: hidden;
    background-image: url("../images/surmoi-accueil-mobile-vincent-bonisoli.jpg");
    background-size: 185.9085%;
    background-position: calc(50% - 1.9cm) center;
    background-repeat: no-repeat;
    background-color: #8a8d92;
    filter: blur(8px);
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-accueil .hero-bg-wrap {
    animation: none !important;
  }
}

/* Bouton "Discover the collection" lisible sur la photo (mobile) */
@media (max-width: 767px) {
  body.page-accueil .fixed.bottom-0.right-0 a[href="collection.html"] {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
}

/* Mobile : autres pages = textes en noir très foncé, sauf le header (5 mots) — inclut fiche contact */
@media (max-width: 767px) {
  body:not(.page-accueil),
  body:not(.page-accueil) main,
  body:not(.page-accueil) section,
  body:not(.page-accueil) footer,
  body:not(.page-accueil) p,
  body:not(.page-accueil) h1,
  body:not(.page-accueil) h2,
  body:not(.page-accueil) h3,
  body:not(.page-accueil) a:not(header a),
  body:not(.page-accueil) label,
  body:not(.page-accueil) input,
  body:not(.page-accueil) textarea,
  body:not(.page-accueil) button {
    color: #000 !important;
  }
  body:not(.page-accueil) header,
  body:not(.page-accueil) header a,
  body:not(.page-accueil) header nav {
    color: #fff !important;
  }
}

html, body {
  min-height: 100%;
}

/* Page d'accueil : pas de scroll (PC + mobile) */
body.page-accueil {
  overflow: hidden;
  height: 100vh;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #8a8d92;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 90% 60% at 20% 5%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 40%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 88% 90%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 75% 15%, rgba(255,255,255,0.1) 0%, transparent 50%),
    linear-gradient(165deg, rgba(255,255,255,0.14) 0%, transparent 25%, transparent 65%, rgba(255,255,255,0.08) 100%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.05) 55%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 20%, transparent 40%, rgba(255,255,255,0.05) 60%, transparent 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

header.bg-white,
section.bg-white,
.bg-white {
  background-color: transparent !important;
}

/* Header toujours visible (PC + mobile) */
:root {
  --site-header-height: 120px;
}

header,
header.bg-white {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin-bottom: 0 !important;
}

/* Réserve de place pour ne pas masquer le contenu */
main,
body > section:first-of-type {
  padding-top: var(--site-header-height);
}

/* Accueil mobile : remonte le header de 4mm */
@media (max-width: 767px) {
  body.page-accueil header,
  body.page-accueil header.bg-white {
    top: -4mm !important;
  }

  body.page-accueil main,
  body.page-accueil > section:first-of-type {
    padding-top: calc(var(--site-header-height) - 4mm);
  }

  /* Descend uniquement Vincent... et Designer... de 1 cm */
  body.page-accueil section.bg-white > div:first-of-type {
    transform: translateY(1cm);
  }

  /* Masquer les textes noirs en bas (ENGAGEMENTS + footer) */
  body.page-accueil section.bg-white.p-16,
  body.page-accueil footer {
    display: none !important;
  }

  /* Descend "Je crée..." 1 cm ; agrandi 15 % ; or blanc ; plus de contraste */
  body.page-accueil img.hero-manifesto {
    transform: translateY(1cm) scale(1.15);
    filter: brightness(0) invert(1) sepia(0.12) saturate(1.15) brightness(1.2) contrast(1.25)
      drop-shadow(1px 0 0 rgba(0,0,0,0.7)) drop-shadow(-1px 0 0 rgba(0,0,0,0.7))
      drop-shadow(0 1px 0 rgba(0,0,0,0.7)) drop-shadow(0 -1px 0 rgba(0,0,0,0.7))
      drop-shadow(2px 2px 0 rgba(0,0,0,0.6));
  }
}

/* Configurateur : zoom au clic */
.config-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.config-zoom-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
}

#config-preview {
  cursor: zoom-in;
}

/* Collection : overlay + scroll au clic */
.collection-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.collection-overlay__panel {
  width: min(980px, 96vw);
  height: min(92vh, 920px);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.collection-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.collection-overlay__title {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
}

.collection-overlay__close {
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.collection-overlay__body {
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.collection-overlay__body img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.collection-overlay__hint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

/* Collection : zoom d'une image au clic */
.collection-img-zoom {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}

.collection-img-zoom img {
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

/* Mobile paysage : zoom en mode paysage (comme le configurateur) */
@media (max-width: 767px) and (orientation: landscape) {
  .collection-img-zoom {
    padding: 8px;
  }
  .collection-img-zoom img {
    max-width: 98vw;
    max-height: 98vh;
    object-fit: contain;
  }
}

.collection-overlay__body img {
  cursor: zoom-in;
}


/* Page Collection PC : fond en flou pour mettre en avant les photos */
/* Mode PC : flou + luminosité + opacité réduite sur le fond (toutes les pages sauf l'accueil) */
@media (min-width: 768px) {
  body:not(.page-accueil) .hero-bg-wrap {
    filter: blur(12px) brightness(0.88);
    opacity: 0.55;
  }
}

/* Mode PC : textes en noir sur toutes les pages sauf l'accueil, header reste blanc */
@media (min-width: 768px) {
  body:not(.page-accueil),
  body:not(.page-accueil) main,
  body:not(.page-accueil) section,
  body:not(.page-accueil) footer,
  body:not(.page-accueil) p,
  body:not(.page-accueil) h1,
  body:not(.page-accueil) h2,
  body:not(.page-accueil) h3,
  body:not(.page-accueil) a:not(header a),
  body:not(.page-accueil) label,
  body:not(.page-accueil) input,
  body:not(.page-accueil) textarea,
  body:not(.page-accueil) button {
    color: #000 !important;
  }
  body:not(.page-accueil) header,
  body:not(.page-accueil) header a,
  body:not(.page-accueil) header nav {
    color: #fff !important;
  }
}

/* Page Collection PC : grand format + scroll */
@media (min-width: 768px) {
  .collection-page {
    min-height: 100vh;
  }
  .collection-page .collection-img {
    max-height: 85vh;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .collection-page .collection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

img{

border-radius:4px;

}

a{

transition:0.3s;

}

.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Logo en blanc + ombre nette + contour très léger */
img.logo-header {
  filter: brightness(0) invert(1)
    drop-shadow(1px 0 0 rgba(0,0,0,0.6)) drop-shadow(-1px 0 0 rgba(0,0,0,0.6)) drop-shadow(0 1px 0 rgba(0,0,0,0.6)) drop-shadow(0 -1px 0 rgba(0,0,0,0.6))
    drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}

/* Hero manifesto : texte en blanc + ombre nette + contour très léger */
img.hero-manifesto {
  filter: brightness(0) invert(1)
    drop-shadow(1px 0 0 rgba(0,0,0,0.6)) drop-shadow(-1px 0 0 rgba(0,0,0,0.6)) drop-shadow(0 1px 0 rgba(0,0,0,0.6)) drop-shadow(0 -1px 0 rgba(0,0,0,0.6))
    drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}

/* Ombre nette + contour très léger sur les textes hero */
.hero-text-shadow {
  text-shadow: 1px 0 0 rgba(0,0,0,0.6), -1px 0 0 rgba(0,0,0,0.6), 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(0,0,0,0.6),
    2px 2px 0 rgba(0,0,0,0.5);
}