:root{
  --ivoire:#fbf7ee;
  --papier:#fffdf8;
  --vert:#40563e;
  --vert2:#66765d;
  --or:#b88a3b;
  --orclair:#e2c98e;
  --texte:#27271f;
  --ombre:0 18px 45px rgba(60,58,42,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--ivoire);
  color:var(--texte);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit}
.page{
  width:min(100%,820px);
  margin:auto;
  padding:24px 18px 118px;
}
.page-head{
  text-align:center;
  padding:18px 8px 10px;
}
.eyebrow{
  color:var(--or);
  letter-spacing:.18em;
  font-size:13px;
}
h1{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--vert);
  font-size:clamp(36px,7vw,56px);
  margin:8px 0;
}
.subtitle{
  max-width:600px;
  margin:0 auto 18px;
  color:#696a61;
  line-height:1.55;
}
.card{
  margin:18px 0;
  padding:clamp(24px,5vw,40px);
  background:rgba(255,253,248,.97);
  border:1px solid rgba(184,138,59,.35);
  border-radius:26px;
  box-shadow:var(--ombre);
}
.btn{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  border-radius:999px;
  padding:15px 22px;
  font-weight:700;
  border:1px solid var(--orclair);
}
.btn-primary{
  background:linear-gradient(135deg,var(--vert2),var(--vert));
  color:white;
}
.btn-light{
  background:#fffdf8;
  color:#795b26;
}
.timeline{display:grid;gap:18px}
.event{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
}
.time{
  color:var(--or);
  font-weight:800;
  font-size:20px;
}
.event h2,.route h2{
  color:var(--vert);
  margin:0 0 6px;
}
.event p,.route p{
  margin:0;
  line-height:1.55;
  color:#62645c;
}
.route .btn{margin-top:15px}
.invitation{
  width:100%;
  display:block;
  height:auto;
  border-radius:20px;
  border:1px solid var(--orclair);
  box-shadow:var(--ombre);
}
.photo-box{
  min-height:260px;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px dashed var(--or);
  border-radius:20px;
  padding:30px;
}
.bottom-nav{
  position:fixed;
  z-index:40;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:min(calc(100% - 18px),780px);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:rgba(255,253,248,.97);
  border:1px solid rgba(184,138,59,.30);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(55,54,44,.18);
  backdrop-filter:blur(12px);
}
.nav-item{
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  color:var(--vert);
  font-size:10px;
}
.nav-item .icon{font-size:22px}
.nav-item.active{
  color:var(--or);
  background:rgba(184,138,59,.08);
}

/* Homepage image */
.home-body{
  background:#f8f3ea;
}
.home-wrap{
  width:min(100%,1100px);
  margin:auto;
  position:relative;
}
.home-image{
  display:block;
  width:100%;
  height:auto;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:18px;
  background:rgba(255,255,255,0);
}
.hotspot:focus{
  outline:3px solid rgba(184,138,59,.8);
  outline-offset:2px;
}
/* Coordinates based on the final generated homepage image */
.hs-enter{left:31.3%;top:79.3%;width:37.8%;height:5.9%}
.hs-calendar{left:36.7%;top:86.2%;width:29.4%;height:4.7%}
.hs-home{left:10.7%;top:91.2%;width:11.5%;height:7.4%}
.hs-programme{left:22.5%;top:91.2%;width:13.2%;height:7.4%}
.hs-routes{left:36.2%;top:91.2%;width:12.8%;height:7.4%}
.hs-rsvp{left:49.7%;top:91.2%;width:11.8%;height:7.4%}
.hs-photos{left:62.3%;top:91.2%;width:12.0%;height:7.4%}
.hs-invite{left:74.8%;top:91.2%;width:13.4%;height:7.4%}
.home-fallback{
  display:none;
  padding:22px;
  text-align:center;
}
@media(max-width:430px){
  .page{padding-left:11px;padding-right:11px}
  .event{grid-template-columns:70px 1fr}
  .nav-item{font-size:9px}
  .nav-item .icon{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}

/* Accueil portrait — conçu d'abord pour smartphone */
.portrait-home-body{
  min-height:100vh;
  background:#eee7dc;
  padding:0;
}
.portrait-home{
  position:relative;
  width:min(100%,540px);
  min-height:100vh;
  margin:0 auto;
  padding:28px 18px 22px;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(circle at 8% 18%,rgba(203,171,98,.15),transparent 22%),
    radial-gradient(circle at 94% 64%,rgba(77,101,67,.10),transparent 24%),
    linear-gradient(180deg,#fffdf8 0%,#fbf7ee 100%);
  box-shadow:0 0 45px rgba(45,42,32,.15);
}
.portrait-home::before,.portrait-home::after{
  content:"";
  position:absolute;
  z-index:0;
  width:180px;
  height:310px;
  opacity:.25;
  background:url("accueil.png") no-repeat;
  background-size:570px auto;
  pointer-events:none;
}
.portrait-home::before{left:-65px;top:-20px;background-position:left top}
.portrait-home::after{right:-70px;bottom:70px;background-position:right bottom}
.portrait-home>*{position:relative;z-index:1}
.floral-top{color:var(--or);font-size:34px;line-height:1;margin-bottom:14px}
.couple-portraits{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 14px}
.portrait-frame{
  width:42%;aspect-ratio:1;margin:0;border-radius:50%;overflow:hidden;
  border:4px solid #d4ae58;outline:3px solid #f5e4b5;
  box-shadow:0 8px 18px rgba(65,56,38,.18);background:#fff;
}
.portrait-frame img{width:100%;height:100%;display:block;object-fit:cover}
.portrait-frame:first-child img{object-position:50% 38%}
.portrait-frame:last-child img{object-position:50% 35%}
.heart-link{
  z-index:2;flex:0 0 42px;width:42px;height:42px;margin:0 -5px;
  display:grid;place-items:center;border-radius:50%;background:#fff7e8;
  border:3px solid #d4ae58;color:#b88a3b;font-size:29px;
  box-shadow:0 5px 13px rgba(65,56,38,.15)
}
.wedding-title h1{
  margin:8px -6px 2px;color:#ad7927;font-family:"Snell Roundhand","URW Chancery L",Georgia,serif;
  font-style:italic;font-weight:400;font-size:clamp(42px,11vw,65px);line-height:.98;letter-spacing:-.04em
}
.wedding-title h1 span{color:#b88a3b;font-size:.62em}
.date-line{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 4px;width:70%;color:#d3aa50}
.date-line i{height:1px;background:#d3aa50;flex:1}.date-line b{font-size:14px}
.wedding-title p{margin:0 0 16px;color:#40563e;font:700 17px Georgia,serif;letter-spacing:.23em}
.welcome-card{
  margin:0 auto 18px;padding:18px 14px 15px;border-radius:24px;
  background:rgba(255,253,248,.94);border:1px solid rgba(184,138,59,.23);
  box-shadow:0 13px 28px rgba(70,62,45,.13)
}
.small-heart{color:#d5ad57;font-size:17px}.welcome-card h2{margin:1px 0 8px;color:#40563e;font:700 clamp(34px,9vw,46px) Georgia,serif}
.welcome-card p{margin:0;color:#30322d;font:17px/1.45 Georgia,serif}.welcome-card em{display:block;margin-top:8px;color:#b88734;font:italic 28px "Snell Roundhand",Georgia,serif}.ornament{color:#c59a44;margin-top:5px}
.portrait-enter{
  display:flex;align-items:center;justify-content:center;gap:10px;width:94%;min-height:58px;margin:0 auto 11px;
  padding:13px 14px;border-radius:999px;text-decoration:none;color:#fff;font:600 17px Georgia,serif;letter-spacing:.06em;
  background:linear-gradient(135deg,#66765d,#40563e);border:2px solid #c89a43;
  box-shadow:0 9px 20px rgba(54,72,52,.23)
}
.portrait-enter span{color:#e5bc63}.portrait-calendar{display:inline-flex;align-items:center;gap:9px;margin:0 auto 17px;color:#b17e2d;text-decoration:none;font:600 15px Georgia,serif;letter-spacing:.06em}
.portrait-calendar span{font-size:21px}
.portrait-nav{
  display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;
  margin:0 -4px;padding:10px 3px 8px;border-radius:23px;background:rgba(255,253,248,.97);
  border:1px solid rgba(184,138,59,.24);box-shadow:0 13px 25px rgba(55,54,44,.14)
}
.portrait-nav a{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 1px;color:#40563e;text-decoration:none}
.portrait-nav .nav-icon{font-size:23px;line-height:1}.portrait-nav small{font:12px Georgia,serif;white-space:nowrap}
.portrait-nav a.active{color:#b88734}.portrait-nav a.active i{width:7px;height:7px;margin-top:2px;border-radius:50%;background:#b88734}
@media(max-width:390px){
  .portrait-home{padding:18px 10px 14px}.portrait-frame{width:40%}.heart-link{flex-basis:34px;width:34px;height:34px;font-size:23px}
  .wedding-title p{font-size:14px}.welcome-card p{font-size:15px}.welcome-card em{font-size:25px}
  .portrait-enter{font-size:14px;min-height:52px}.portrait-nav small{font-size:9px}.portrait-nav .nav-icon{font-size:19px}
}
@media(min-width:700px){.portrait-home{margin-top:20px;margin-bottom:20px;border-radius:28px;min-height:auto}}

/* Accueil portrait basé sur l'image finale validée */
.portrait-image-home{margin:0;background:#ebe5da;min-height:100vh}
.portrait-image-wrap{width:min(100%,832px);margin:0 auto;position:relative;box-shadow:0 0 35px rgba(45,42,32,.18)}
.portrait-image-wrap .home-image{display:block;width:100%;height:auto}
.portrait-image-wrap .hotspot{position:absolute;z-index:5;display:block;background:transparent;border-radius:18px}
.portrait-image-wrap .hotspot:focus-visible{outline:3px solid rgba(212,174,88,.95);outline-offset:2px}
.pih-enter{left:23.4%;top:63.2%;width:53.2%;height:4.6%}
.pih-calendar{left:10.0%;top:69.4%;width:24.9%;height:9.8%}
.pih-programme{left:36.9%;top:69.4%;width:25.8%;height:9.8%}
.pih-routes{left:64.8%;top:69.4%;width:24.8%;height:9.8%}
.pih-rsvp{left:10.0%;top:80.4%;width:24.9%;height:10.1%}
.pih-photos{left:36.9%;top:80.4%;width:25.8%;height:10.1%}
.pih-invite{left:64.8%;top:80.4%;width:24.8%;height:10.1%}
.pih-nav-home{left:6.3%;top:91.7%;width:17.4%;height:6.6%}
.pih-nav-calendar{left:23.7%;top:91.7%;width:18.2%;height:6.6%}
.pih-nav-programme{left:41.9%;top:91.7%;width:19.5%;height:6.6%}
.pih-nav-routes{left:61.4%;top:91.7%;width:17.8%;height:6.6%}
.pih-nav-rsvp{left:79.2%;top:91.7%;width:14.4%;height:6.6%}
@media (min-width:833px){.portrait-image-wrap{margin-top:18px;margin-bottom:18px;border-radius:18px;overflow:hidden}}