/* =========================================================
   DUOZ_Weddings — feuille de style partagée
   Direction : pierre de Provence + terracotta & kaki + vagues
   ========================================================= */

:root{
  /* --- couleurs --- */
  --stone:        #E9E1D0;   /* pierre de Provence, fond principal */
  --stone-deep:   #DCD1B8;   /* fond secondaire / cartes */
  --stone-line:   #C9BC9E;   /* traits, bordures fines sur pierre */
  --ink:          #262319;   /* encre chaude, texte principal */
  --ink-dim:      #59543F;   /* texte secondaire sur pierre */

  --bleu:         #FF4643;   /* terracotta — accent principal */
  --bleu-vif:     #FF6B60;   /* terracotta plus clair — hover / accents secondaires */
  --bleu-pale:    #E6E2D2;   /* lavis kaki très clair, fonds de carte */

  --or:           #556247;   /* kaki mat — liserés, détails fins */
  --ivoire:       #F4EFE3;   /* texte clair sur fond terracotta/ink */

  /* rgb décomposé, pour ombres et voiles teintés (rgba()) */
  --bleu-rgb:  255,70,67;
  --ink-rgb:   38,35,25;
  --or-rgb:    85,98,71;

  --max-w: 1180px;
  --edge: clamp(24px, 6vw, 88px);
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------- reveal au scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal].d1{ transition-delay:.08s; }
[data-reveal].d2{ transition-delay:.16s; }
[data-reveal].d3{ transition-delay:.24s; }
[data-reveal].d4{ transition-delay:.32s; }
[data-reveal].d5{ transition-delay:.40s; }
[data-reveal].d6{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--bleu);
  outline-offset:3px;
}
img{ max-width:100%; display:block; }

h1,h2,h3,.display{
  font-family:'Italiana', serif;
  font-weight:400;
  letter-spacing:0.02em;
  margin:0;
  color:var(--ink);
}
h1, h2{
  text-transform:uppercase;
  letter-spacing:0.09em;
}

.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-size:0.7rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--bleu);
  font-weight:600;
}

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--edge); }

/* ---------- vague : séparateur signature ---------- */
.meander{
  height:14px;
  width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0,7 Q7,1 14,7 T28,7' fill='none' stroke='%23FF4643' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left center;
  opacity:0.75;
}
.meander.on-dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0,7 Q7,1 14,7 T28,7' fill='none' stroke='%23F4EFE3' stroke-width='1.6'/%3E%3C/svg%3E");
  opacity:0.55;
}

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(233,225,208,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stone-line);
}
.nav{
  max-width:var(--max-w); margin:0 auto; padding:18px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav .logo{
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--ink);
}
.nav .logo em{ font-style:italic; color:var(--bleu); }
.nav ul{
  list-style:none; display:flex; gap:30px; margin:0; padding:0;
  font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase;
}
.nav a{ text-decoration:none; color:var(--ink-dim); position:relative; padding-bottom:4px; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--bleu); }
.nav ul.links li a:not(.espace)::before{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--bleu);
  transition:right 0.3s var(--ease-out);
}
.nav ul.links li a:not(.espace):hover::before,
.nav ul.links li a[aria-current="page"]::before{ right:0; }
.nav .espace{
  border:1px solid var(--bleu); color:var(--bleu) !important; padding:8px 16px; border-radius:2px;
}
.nav .espace:hover{ background:var(--bleu); color:var(--ivoire) !important; }
.nav-toggle{ display:none; }
@media (max-width:820px){
  .nav ul.links{ display:none; }
  .nav-toggle{
    display:inline-flex; background:none; border:1px solid var(--stone-line);
    padding:8px 12px; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);
  }
  .nav ul.links.open{
    display:flex; flex-direction:column; gap:14px;
    position:absolute; top:100%; left:0; right:0; background:var(--stone);
    padding:22px var(--edge); border-bottom:1px solid var(--stone-line);
  }
}

/* ---------- hero commun ---------- */
.page-hero{
  padding:80px var(--edge) 64px;
  max-width:var(--max-w); margin:0 auto;
}
.page-hero h1{ font-size:clamp(1.8rem, 4.4vw, 2.8rem); line-height:1.08; }
.page-hero h1 em{ font-style:normal; color:var(--bleu); font-weight:400; }
.page-hero .lede{
  margin-top:22px; max-width:620px;
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 2vw, 1.3rem); color:var(--ink-dim);
}

section{ padding:64px 0; }
.section-head{
  max-width:var(--max-w); margin:0 auto; padding:0 var(--edge);
  display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
  margin-bottom:38px;
}
.section-head h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem); }
.section-head .note{ max-width:280px; font-size:0.88rem; color:var(--ink-dim); }

/* ---------- colonnes "Le déroulé" (Avant / Pendant / Après) : ligne de
   temps qui se dessine au scroll, éléments en cascade, réaction au survol ---------- */
.timeline-col{ position:relative; padding-left:28px; transition:transform .4s var(--ease-out); }
.timeline-col:hover{ transform:translateY(-4px); }
.timeline-col::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:var(--bleu); border-radius:2px;
  transform:scaleY(0); transform-origin:top;
  transition:transform 1s var(--ease-out), background .3s ease;
}
.timeline-col.in-view::before{ transform:scaleY(1); }
.timeline-col:hover::before{ background:var(--bleu-vif); }
.timeline-col .step-num{
  display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  color:var(--bleu); font-size:1.3rem; margin-bottom:2px; transition:color .3s ease;
}
.timeline-col:hover .step-num{ color:var(--bleu-vif); }
.timeline-col li{
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s ease;
}
.timeline-col.in-view li{ opacity:1; transform:translateX(0); }
.timeline-col.in-view li:nth-child(1){ transition-delay:.15s; }
.timeline-col.in-view li:nth-child(2){ transition-delay:.25s; }
.timeline-col.in-view li:nth-child(3){ transition-delay:.35s; }
.timeline-col.in-view li:nth-child(4){ transition-delay:.45s; }
.timeline-col.in-view li:nth-child(5){ transition-delay:.55s; }
.timeline-col.in-view li:nth-child(6){ transition-delay:.65s; }
.timeline-col:hover li{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .timeline-col::before{ transition:none; }
  .timeline-col li{ transition:none; opacity:1; transform:none; }
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; text-decoration:none; font-size:0.85rem;
  letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--bleu);
  color:var(--bleu); border-radius:2px;
  transition:background .3s var(--ease-out), color .3s var(--ease-out),
    border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover{
  background:var(--or); color:var(--ivoire); border-color:var(--or);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -10px rgba(var(--or-rgb),0.45);
}
.btn:active{ transform:translateY(-1px); }
.btn.solid{ background:var(--bleu); color:var(--ivoire); }
.btn.solid:hover{ background:var(--or); border-color:var(--or); }

/* ---------- swatch placeholders (photo) ---------- */
.swatch-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:6px;
  max-width:var(--max-w); margin:0 auto; padding:0 var(--edge);
}
.swatch{
  position:relative; border-radius:2px; overflow:hidden;
  display:flex; align-items:flex-end; padding:14px;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.6s ease, transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.swatch.in-view{ opacity:1; transform:translateY(0); }
.swatch::after{
  content:""; position:absolute; inset:0; opacity:1;
  background:linear-gradient(0deg, rgba(28,22,15,0.78) 0%, rgba(28,22,15,0.18) 45%, rgba(28,22,15,0.04) 100%);
  transition:opacity 0.45s var(--ease-out);
}
.swatch:hover{
  transform:translateY(-6px) scale(1.015); z-index:2;
  box-shadow:0 26px 44px -16px rgba(var(--ink-rgb),0.45);
}
.swatch:hover::after{ opacity:0.65; }
.swatch .cap{
  font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  position:relative; color:var(--ivoire); text-shadow:0 2px 8px rgba(0,0,0,0.6);
  transition:transform .4s var(--ease-out);
}
.swatch:hover .cap{ transform:translateY(-3px); }
.swatch .sub{ display:block; font-size:0.6rem; text-transform:none; letter-spacing:0.02em; opacity:0.8; margin-top:2px; }
@media (max-width:760px){
  .swatch-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
}

/* ---------- cartes "Nos univers" (index) ---------- */
.univers-card{
  background:var(--stone); text-decoration:none; position:relative; overflow:hidden;
  padding:38px 30px; display:flex; flex-direction:column; gap:14px;
  transition:background .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.univers-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--or);
  transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease-out);
}
.univers-card:hover{
  background:var(--stone-deep); transform:translateY(-6px);
  box-shadow:0 30px 50px -20px rgba(var(--ink-rgb),0.35);
  z-index:2;
}
.univers-card:hover::before{ transform:scaleY(1); }
.univers-card .go{ color:var(--bleu); font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; }
.univers-card .go .arrow{ display:inline-block; transition:transform .35s var(--ease-out); }
.univers-card:hover .go .arrow{ transform:translateX(6px); }
.univers-card-wide{
  background:var(--stone); border:1px solid var(--stone-line);
}

/* ---------- cartes "Nos réalisations" (photo pleine largeur + lien discret) ---------- */
.realisation-card{
  position:relative; display:block; aspect-ratio:2/1; overflow:hidden; text-decoration:none;
  background:var(--stone-deep);
}
@media (max-width:600px){
  .realisation-card{ aspect-ratio:1/1; }
}
.realisation-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease-out);
}
.realisation-card:hover img{ transform:scale(1.05); }
.realisation-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(28,22,15,0.45) 0%, rgba(28,22,15,0.22) 55%, rgba(28,22,15,0.4) 100%);
}
.realisation-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  color:var(--ivoire); font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; text-shadow:0 2px 10px rgba(0,0,0,0.5);
  white-space:nowrap;
}
.realisation-label .arrow{ display:inline-block; transition:transform .35s var(--ease-out); }
.realisation-card:hover .realisation-label .arrow{ transform:translateX(6px); }

/* ---------- cartes formules (offres) & mariages ---------- */
.plan, .couple-card{
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.plan:hover, .couple-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 55px -20px rgba(var(--ink-rgb),0.4);
  z-index:2;
}

/* ---------- cartes réalisations ---------- */
.real-card{
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.real-card .venue, .real-card .place{
  transition:transform .4s var(--ease-out);
}
.real-card:hover{
  transform:translateY(-6px) scale(1.015); z-index:2;
  box-shadow:0 30px 55px -20px rgba(var(--ink-rgb),0.45);
}
.real-card:hover .venue{ transform:translateY(-4px); }
.real-card:hover .place{ transform:translateY(-4px); }

/* ---------- hero cinématique (accueil) : vidéo en fond + texte révélé au scroll ---------- */
.hero-cinematic{
  position:relative; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:var(--ivoire);
  background:#1C160F;
}
.hero-video-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; will-change:transform;
}
.hero-video-bg iframe, .hero-video-bg video{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:177.78vh; height:56.25vw; /* ratio 16:9, quel que soit le côté contraignant */
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.hero-video-bg.is-playing iframe, .hero-video-bg.is-playing video{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-video-bg iframe, .hero-video-bg video{ transition:none; }
}
@media (max-width:780px){
  /* vidéo verticale/carrée sur mobile : privilégier le remplissage en hauteur */
  .hero-video-bg iframe, .hero-video-bg video{ width:250vh; height:56.25vw; }
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(28,22,15,0.35) 0%, rgba(28,22,15,0.55) 55%, rgba(28,22,15,0.92) 100%);
}
.hero-content{
  position:relative; z-index:2; max-width:var(--max-w); margin:0 auto; padding:0 var(--edge);
  width:100%; text-align:center;
}
.hero-tagline{
  font-family:'Fraunces',serif; font-weight:500; color:var(--ivoire);
  font-size:clamp(1.8rem, 4.4vw, 2.8rem); letter-spacing:0.04em; text-transform:uppercase;
  opacity:0; animation:hero-fade-up 1.1s var(--ease-out) 0.15s forwards;
}
.hero-links{
  margin-top:22px; display:flex; gap:30px; justify-content:center; flex-wrap:wrap;
  font-size:0.76rem; letter-spacing:0.09em; text-transform:uppercase;
  opacity:0; animation:hero-fade-up 1.1s var(--ease-out) 0.4s forwards;
}
@keyframes hero-fade-up{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-tagline, .hero-links{ opacity:1; animation:none; transform:none; }
}
.hero-links a{
  color:rgba(244,239,227,0.5); text-decoration:none; position:relative; padding-bottom:3px;
  transition:color .3s ease;
}
.hero-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bleu);
}
.hero-links a:hover{ color:var(--ivoire); }

/* ---------- titre de page par-dessus une vidéo de fond (ex. vidéo) ---------- */
.hero-cinematic .eyebrow{ color:var(--bleu); justify-content:center; display:flex; }
.hero-cinematic h1{ color:var(--ivoire); font-size:clamp(1.8rem, 4.4vw, 2.8rem); line-height:1.08; text-transform:uppercase; letter-spacing:0.04em; }
.hero-cinematic h1 em{ font-style:normal; color:var(--bleu); font-weight:400; }
.hero-cinematic .lede{
  margin:22px auto 0; max-width:620px;
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 2vw, 1.3rem); color:rgba(244,239,227,0.82);
}

[data-scroll-text]{ opacity:0; transform:translateY(18px); will-change:opacity, transform; }
@media (prefers-reduced-motion: reduce){ [data-scroll-text]{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  z-index:2; width:30px; height:48px; border:1px solid rgba(244,239,227,0.5);
  border-radius:20px; background:none; cursor:pointer; padding:0;
  transition:border-color .3s ease;
}
.scroll-cue:hover{ border-color:var(--ivoire); }
.scroll-cue-dot{
  display:block; width:4px; height:8px; margin:8px auto 0;
  background:var(--ivoire); border-radius:2px;
  animation:scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(14px); opacity:0.2; }
  100%{ transform:translateY(0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue-dot{ animation:none; }
}

/* ---------- footer ---------- */
footer.site{
  background:var(--or); color:var(--ivoire);
  padding:70px var(--edge) 34px; margin-top:80px;
}
footer.site .foot-grid{
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
footer.site h3{ color:var(--ivoire); font-size:1.3rem; font-style:normal; font-weight:400; }
footer.site h3 em{ font-style:normal; }
footer.site .col{ min-width:180px; }
footer.site .col .eyebrow{ color:var(--bleu-pale); opacity:0.8; }
footer.site a{ text-decoration:none; color:var(--ivoire); opacity:0.85; }
footer.site a:hover{ opacity:1; text-decoration:underline; }
footer.site ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:0.9rem; }
footer.site .bottom{
  max-width:var(--max-w); margin:50px auto 0; padding-top:22px; border-top:1px solid rgba(244,239,227,0.2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.75rem; opacity:0.7;
}

/* ---------- grilles à 2/3 colonnes : repli sur 1 colonne en mobile ---------- */
/* .cols-2 / .cols-3 utilisées par : index.html, videos.html, offres.html ;
   .film-row (videos.html) et .steps (espace-maries.html) ont leur propre grille */
@media (max-width:900px){
  .cols-3{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
}
@media (max-width:760px){
  .cols-2, .steps{
    grid-template-columns:1fr !important;
  }
}

/* ---------- galerie de vidéos embarquées (pages teaser 1 min / 3 min / film complet) ---------- */
.video-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  max-width:var(--max-w); margin:0 auto; padding:0 var(--edge);
}
@media (max-width:780px){
  .video-grid{ grid-template-columns:1fr; }
}
.video-embed{
  position:relative; aspect-ratio:16/9; border-radius:2px; overflow:hidden; background:#1C160F;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-grid-empty{
  max-width:var(--max-w); margin:0 auto; padding:20px var(--edge) 10px; color:var(--ink-dim);
}

/* ---------- sélecteur de formule (photo / vidéo / mixte) ---------- */
.offer-switch{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  max-width:var(--max-w); margin:40px auto; padding:0 var(--edge);
}
.offer-switch a{
  padding:10px 22px; border:1px solid var(--stone-line); border-radius:999px;
  font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-dim); transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.offer-switch a:hover{ border-color:var(--bleu); color:var(--bleu); }
.offer-switch a[aria-current="page"]{ background:var(--or); border-color:var(--or); color:var(--ivoire); }

/* ---------- panneau d'accès Espace mariés : garde une marge de sécurité en mobile ---------- */
.access-panel{
  width:calc(100% - (2 * var(--edge)));
}
@media (max-width:540px){
  .access-panel{ padding:34px 24px; }
}