/* ============================================================
   RIVE PRIVÉE — version ultra · feuille de style commune
   Palette charte : encre pétrole, ivoire, champagne, ors
   Typographies : Cormorant Garamond (display) · Jost (utilitaire)
   ============================================================ */

/* ---------- Fontes locales ---------- */
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-500-italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Jost'; src:url('../fonts/jost-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Jost'; src:url('../fonts/jost-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Jost'; src:url('../fonts/jost-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Jetons ---------- */
:root{
  color-scheme: light;
  --encre:#0F1E27;
  --encre-prof:#0B161D;
  --ivoire:#F5F2EB;
  --creme:#F4EFE4;
  --champagne:#EDE6D8;
  --or:#BFA06A;
  --or-prof:#937239;
  --or-texte:#79602D;
  --or-clair:#C2A669;
  --sourdine:#5A5346;           /* texte secondaire sur ivoire */
  --sourdine-encre:#A9B4B5;     /* texte secondaire sur encre  */
  --filet:rgba(121,96,45,.22);  /* filets sur ivoire           */
  --filet-encre:rgba(191,160,106,.30);
  --mesure:62ch;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivoire); color:var(--encre);
  font-family:'Jost',system-ui,sans-serif; font-weight:300;
  font-size:1.05rem; line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--or); color:var(--encre-prof); }

/* ---------- Conteneurs ---------- */
.cadre{ max-width:1100px; margin:0 auto; padding:0 clamp(1.4rem,5vw,3rem); }
.mesure{ max-width:var(--mesure); }
.bloc{ padding:clamp(6rem,13vh,10.5rem) 0; }
.bloc--encre{ background:var(--encre); color:var(--creme); }
.bloc--champagne{ background:var(--champagne); }
.bloc--serre{ padding:clamp(4rem,8vh,6.5rem) 0; }
.centre{ text-align:center; }
.centre .mesure{ margin-left:auto; margin-right:auto; }

/* ---------- Typographie ---------- */
.surtitre{
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  font-weight:400; color:var(--or-texte); margin-bottom:1.6rem;
}
.bloc--encre .surtitre{ color:var(--or-clair); }
.titre-1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2.7rem,6.6vw,4.8rem); line-height:1.08; letter-spacing:.005em;
}
.titre-2{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.14;
}
.titre-3{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.2;
}
.titre-1 em,.titre-2 em,.titre-3 em{ font-style:italic; color:var(--or-texte); }
.bloc--encre .titre-1 em,.bloc--encre .titre-2 em{ color:var(--or-clair); }
.prose{ color:var(--sourdine); }
.prose + .prose{ margin-top:1.25rem; }
.bloc--encre .prose{ color:var(--sourdine-encre); }
.amorce{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.55rem); line-height:1.6; color:var(--encre);
}
.bloc--encre .amorce{ color:var(--creme); }
.espace-haut{ margin-top:2.4rem; }
.espace-haut-grand{ margin-top:4rem; }

/* ---------- Filets ---------- */
.filet{ width:74px; height:1px; background:var(--or); border:none; margin:2.6rem 0; }
.centre .filet{ margin-left:auto; margin-right:auto; }
.bloc--encre .filet{ background:var(--or-clair); }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(245,242,235,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet);
  transition:background .45s ease, border-color .45s ease;
}
.nav-int{
  max-width:1100px; margin:0 auto; padding:.85rem clamp(1.4rem,5vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-marque{ display:flex; align-items:center; gap:.8rem; }
.nav-marque svg{ width:40px; height:40px; }
.nav-marque span{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.15rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.nav-liens{ display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.4rem); }
.nav-liens a{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  padding:.35rem 0; position:relative;
}
.nav-liens a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--or); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.nav-liens a:hover::after,.nav-liens a:focus-visible::after,
.nav-liens a[aria-current="page"]::after{ transform:scaleX(1); }
/* Variante de verre : posée sur l'entrée sombre de l'accueil */
.nav--verre{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; color:var(--creme); }
.nav--verre .nav-liens a::after{ background:var(--or-clair); }

/* ---------- Entrée cérémonielle (accueil) ---------- */
.entree{
  min-height:100svh; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(191,160,106,.10) 0%, transparent 55%),
    radial-gradient(140% 110% at 50% 110%, #091219 0%, transparent 60%),
    var(--encre-prof);
  color:var(--creme);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem 4.5rem;
}
.entree::after{ /* grain discret */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}
.entree-medaillon{ width:clamp(120px,16vw,160px); height:auto; margin-bottom:2.6rem; }
.entree h1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(3rem,9vw,5.6rem); line-height:1.04; letter-spacing:.06em;
}
.entree-ligne{
  margin-top:1.4rem; font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--or-clair); font-weight:400;
}
.entree-mention{
  margin-top:3rem; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.1rem; color:var(--sourdine-encre);
}
.fil{
  position:absolute; bottom:0; left:50%; width:1px; height:72px;
  background:linear-gradient(to bottom, transparent, var(--or-clair));
}

/* Séquence d'ouverture — uniquement si le script est présent */
html.js .entree [data-acte]{ opacity:0; transform:translateY(16px); animation:lever 1.2s cubic-bezier(.22,.61,.36,1) forwards; }
html.js .entree [data-acte="1"]{ animation-delay:.2s; }
html.js .entree [data-acte="2"]{ animation-delay:.9s; }
html.js .entree [data-acte="3"]{ animation-delay:1.5s; }
html.js .entree [data-acte="4"]{ animation-delay:2.3s; }
html.js .fil{ transform-origin:top; transform:scaleY(0); animation:derouler 1.4s ease 2.9s forwards; }
@keyframes lever{ to{ opacity:1; transform:none; } }
@keyframes derouler{ to{ transform:scaleY(1); } }

/* ---------- Scènes d'anticipation ---------- */
.scenes{ display:grid; gap:clamp(4rem,9vh,6.5rem); margin-top:clamp(3.5rem,7vh,5.5rem); }
.scene{
  display:grid; grid-template-columns:minmax(140px,200px) 1fr;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:start;
  padding-top:clamp(2.5rem,5vh,4rem); border-top:1px solid var(--filet-encre);
}
.heure{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or-clair); font-weight:400; padding-top:.7rem; white-space:nowrap;
}
.recit{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.55; color:var(--creme);
  max-width:30em;
}
.recit strong{ font-weight:500; color:var(--or-clair); }

/* ---------- Visuels (photo ou matière d'attente) ---------- */
.visuel{
  aspect-ratio:16/9; border-radius:3px; border:1px solid var(--filet);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='220' viewBox='0 0 420 220'%3E%3Cg fill='none' stroke='%23BFA06A' stroke-opacity='.16' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M60 110 Q105 88 150 110 T240 110 T330 110 T372 110'/%3E%3Cpath d='M84 134 Q126 114 168 134 T252 134 T336 134' stroke-width='1.4' stroke-opacity='.11'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(115% 95% at 28% 8%, rgba(169,137,78,.16) 0%, transparent 58%),
    linear-gradient(165deg, var(--champagne) 0%, var(--ivoire) 100%);
  background-size:420px 220px, cover, cover;
  background-position:center, center, center;
  background-repeat:repeat, no-repeat, no-repeat;
}
.visuel--portrait{ aspect-ratio:4/5; }
.bloc--encre .visuel{ border-color:var(--filet-encre); }
.legende{
  margin-top:.9rem; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sourdine);
}
.bloc--encre .legende{ color:var(--sourdine-encre); }

/* ---------- Duo portrait / texte ---------- */
.duo{
  display:grid; grid-template-columns:minmax(260px,380px) 1fr;
  gap:clamp(2.4rem,6vw,4.5rem); align-items:center; margin-top:3rem;
}

/* ---------- Chapitres (art de servir) ---------- */
.chapitre{
  padding:clamp(3rem,6vh,4.5rem) 0; border-top:1px solid var(--filet);
  display:grid; grid-template-columns:minmax(90px,140px) 1fr;
  gap:clamp(1.4rem,4vw,3rem); align-items:start;
}
.chapitre:last-of-type{ border-bottom:1px solid var(--filet); }
.num-romain{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(1.8rem,3vw,2.4rem); color:var(--or); line-height:1; padding-top:.3rem;
}
.chapitre .titre-3{ margin-bottom:.9rem; }

/* ---------- Invitation & bouton fantôme ---------- */
.invitation-ligne{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.3;
}
.bouton-fantome{
  display:inline-block; margin-top:2.6rem;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; font-weight:400;
  color:var(--or-texte); border:1px solid var(--or);
  padding:1.05rem 2.4rem; border-radius:2px;
  transition:background .4s ease, color .4s ease;
}
.bouton-fantome:hover,.bouton-fantome:focus-visible{ background:var(--or); color:var(--encre-prof); }
.bloc--encre .bouton-fantome{ color:var(--or-clair); border-color:var(--or-clair); }
.bloc--encre .bouton-fantome:hover,.bloc--encre .bouton-fantome:focus-visible{ background:var(--or-clair); color:var(--encre-prof); }

/* ---------- Coordonnées (entretien) ---------- */
.coordonnee{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(1.6rem,4vw,2.5rem); color:var(--or-clair); line-height:1.5;
  transition:color .35s ease;
}
.coordonnee:hover,.coordonnee:focus-visible{ color:var(--creme); }
.signature{ margin-top:4rem; }
.signature svg{ width:84px; height:auto; margin:0 auto 1rem; }
.signature p{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--sourdine-encre); }

/* ---------- Pied de page ---------- */
.pied{
  background:var(--encre-prof); color:var(--sourdine-encre);
  padding:4.5rem 0 2.5rem; text-align:center;
}
.pied svg{ width:46px; height:46px; margin:0 auto 1.4rem; }
.pied-nom{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.1rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--creme);
}
.pied-terr{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; margin-top:.7rem; }
.pied-contact{ margin-top:1.8rem; font-size:.92rem; }
.pied-contact a{ color:var(--or-clair); }
.pied-contact a:hover{ color:var(--creme); }
.pied-legal{ margin-top:2.6rem; font-size:.7rem; letter-spacing:.06em; }
.pied-legal a{ text-decoration:underline; text-underline-offset:3px; }
.pied-legal a:hover{ color:var(--creme); }

/* ---------- Apparitions au défilement ---------- */
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
html.js .reveal.vu{ opacity:1; transform:none; }

/* ---------- Accessibilité & mouvement réduit ---------- */
a:focus-visible,button:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .entree [data-acte],html.js .fil,html.js .reveal{
    animation:none; opacity:1; transform:none; transition:none;
  }
}

/* ---------- Adaptation ---------- */
@media (max-width:880px){
  .duo{ grid-template-columns:1fr; }
  .duo .visuel--portrait{ max-width:380px; margin:0 auto; width:100%; }
}
@media (max-width:720px){
  .bloc{ padding:4.8rem 0; }
  .scene{ grid-template-columns:1fr; gap:1rem; }
  .heure{ padding-top:0; }
  .chapitre{ grid-template-columns:1fr; gap:.6rem; }
  .num-romain{ padding-top:0; }
  .nav-marque span{ display:none; }
}

/* ---------- Lien discret (coda des scènes) ---------- */
.lien-discret{
  color:var(--or-clair); white-space:nowrap;
  border-bottom:1px solid var(--filet-encre); padding-bottom:1px;
  transition:color .35s ease, border-color .35s ease;
}
.lien-discret:hover,.lien-discret:focus-visible{ color:var(--creme); border-color:var(--creme); }