/* ============================================================
   Gaëlle & Jonas — feuille de style
   Direction « Atelier » : ivoire froid, Archivo, prénoms manuscrits
   (Mayonice), danseurs de la peinture en éléments pop.
   ============================================================ */

@font-face{
  font-family:"Mayonice";
  src:url("fonts/Mayonice.woff2") format("woff2"),
      url("fonts/Mayonice.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --paper:#fbfaf7;     /* blanc très légèrement chaud */
  --paper2:#eceae1;
  --ink:#1c1c1a;
  --muted:#7a7870;
  --line:#dcdad1;

  --red:#c8553d;
  --blue:#2b4cd4;
  --yellow:#f2b52c;
  --green:#4a9d5b;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --label:"DM Mono","SFMono-Regular",Consolas,monospace;
  --hand:"Mayonice","Segoe Script",cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);line-height:1.62;
  -webkit-font-smoothing:antialiased;position:relative;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 30px}
a{color:var(--blue)}

.label,.kicker{
  font-family:var(--label);text-transform:uppercase;
  letter-spacing:.26em;font-size:.68rem;color:var(--muted);font-weight:400;
}

/* ---- Navigation ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);
  backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1040px;margin:0 auto;padding:14px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav .brand{font-family:var(--hand);font-size:1.9rem;line-height:1;text-transform:none;
  text-decoration:none;color:var(--ink)}
.nav .brand .x{color:var(--red)}
.nav ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--ink);text-decoration:none;padding:6px 11px;display:block}
.nav a:hover{color:var(--red)}
.nav a.active{color:var(--red)}
/* six entrées : on resserre pour garder les prénoms sur une ligne */
@media(max-width:460px){
  .nav-inner{padding:12px 18px;gap:8px}
  .nav .brand{font-size:1.5rem}
  .nav ul{gap:1px}
  .nav a{padding:5px 7px;letter-spacing:.08em;font-size:.62rem}
  .nav a.nav-rsvp{padding:5px 9px;margin-left:2px}
}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .55s ease-out,transform .55s ease-out;will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============ ACCUEIL — HERO ============ */
header.hero{max-width:1040px;margin:0 auto;padding:80px 30px 30px;position:relative;overflow:visible}
header.hero .kicker{display:block;margin-bottom:24px}
.names{
  font-family:var(--hand);font-weight:400;
  font-size:clamp(4.5rem,17vw,10.5rem);line-height:.9;letter-spacing:.01em;
}
.names .x{color:var(--red);font-family:var(--hand)}
.hero .meta{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;color:var(--ink)}
.hero-pop{position:absolute;right:-10px;top:40px;width:280px;z-index:-1;pointer-events:none}
.hero-pop img{width:100%;height:auto;display:block}
@media(max-width:820px){.hero-pop{width:170px;right:-6px;top:10px;opacity:.55}}

/* ============ FRISE ============ */
.intro-frise{position:relative;z-index:5;padding:80px 0 10px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,4.4vw,2.4rem);max-width:24ch;line-height:1.28}
.intro-frise em{font-style:normal;color:var(--red);font-weight:700}

.timeline{position:relative;padding:70px 0 40px;isolation:isolate;margin-top:16px}
.timeline .item:first-child,.timeline .item:nth-child(2){margin-top:0}
.item{position:relative;margin:0 0 26px}
.item img{width:100%;height:auto;display:block;border:1px solid var(--line)}
/* encart année + légende, dans le flux, chevauche le bas de l'image */
.item .tag{position:relative;z-index:3;background:var(--paper);border:1.5px solid var(--ink);
  margin:-22px 14px 0;padding:10px 14px;display:inline-block;max-width:calc(100% - 28px)}
.item .tag .year{font-family:var(--label);font-size:1.05rem;font-weight:500;letter-spacing:.08em;
  color:var(--ink);display:block}
.item .tag .cap{font-family:var(--body);font-size:.9rem;color:var(--muted);
  display:block;margin-top:4px;line-height:1.4}
.item:nth-child(6n+1){width:48%;margin-left:2%}
.item:nth-child(6n+2){width:40%;margin-left:54%;margin-top:-40px}
.item:nth-child(6n+3){width:52%;margin-left:6%;margin-top:0}
.item:nth-child(6n+4){width:38%;margin-left:58%;margin-top:-30px}
.item:nth-child(6n+5){width:46%;margin-left:0;margin-top:0}
.item:nth-child(6n+6){width:42%;margin-left:50%;margin-top:-40px}
.timeline::after{content:"";position:absolute;left:-30px;top:42%;
  width:160px;height:200px;background:url("img/pop-danseur-vert.png") no-repeat center/contain;
  transform:rotate(-6deg);opacity:.9;pointer-events:none;z-index:0}
@media(max-width:820px){
  .item:nth-child(6n+1){width:70%;margin-left:0}
  .item:nth-child(6n+2){width:64%;margin-left:36%;margin-top:-20px}
  .item:nth-child(6n+3){width:74%;margin-left:6%;margin-top:0}
  .item:nth-child(6n+4){width:60%;margin-left:40%;margin-top:-20px}
  .item:nth-child(6n+5){width:68%;margin-left:0;margin-top:0}
  .item:nth-child(6n+6){width:62%;margin-left:38%;margin-top:-20px}
  .timeline::after{display:none}
}

/* ============ BLOC FINAL (invitation) ============ */
.final{padding:120px 0 70px;text-align:center;position:relative}
.final::before{content:"";display:block;width:230px;height:250px;margin:0 auto 24px;
  background:url("img/pop-duo.png") no-repeat center/contain}
.final .lead{font-family:var(--display);color:var(--muted);
  font-size:clamp(1.1rem,3vw,1.4rem);max-width:26ch;margin:0 auto 10px}
.final .big{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.4rem,8vw,4.4rem);line-height:.98;margin-bottom:26px}
.final .big span{color:var(--red)}
.final .date{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:1rem}
.final .place{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--muted);margin-top:8px}
.final .couple{margin-top:34px;font-family:var(--hand);font-size:clamp(2rem,6vw,3rem)}
.final .couple .x{color:var(--red)}

/* ============ RSVP ============ */
.rsvp{padding:30px 0 90px}
.rsvp h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,5vw,2.6rem);margin:50px 0 30px}
.rsvp h2 span{color:var(--red)}
.rsvp iframe{width:100%;border:0;background:transparent}

/* ============ PAGES INTÉRIEURES ============ */
.page-head{padding:70px 0 10px;position:relative}
.page-head .kicker{display:block;margin-bottom:16px}
.page-title{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.4rem,8vw,4.2rem);line-height:1;text-transform:none}
.page-title span{color:var(--red)}

.section{padding:46px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.section h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.4rem,4.4vw,2rem);margin-bottom:16px}
.section h2 span{color:var(--red)}
.section p{margin-bottom:14px;max-width:62ch}
.section strong{font-weight:700}

figure.lieu-photo{margin:0 0 26px}
figure.lieu-photo img{width:100%;height:auto;display:block;border:1px solid var(--line)}

/* aperçu du domaine : bandeau que l'on fait glisser sur mobile,
   trois vignettes côte à côte dès qu'il y a la place. Aucun JS. */
.strip{display:flex;gap:14px;margin-top:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{margin:0;flex:0 0 84%;scroll-snap-align:center}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line)}
.strip-hint{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;
  font-size:.6rem;color:var(--muted);margin-top:14px}
@media(min-width:760px){
  .strip figure{flex-basis:calc((100% - 42px)/4);scroll-snap-align:none}
  .strip-hint{display:none}
}

/* ---- Programme : frise verticale des trois temps ----
   Le rail porte la distinction : pointillé gris = libre, chacun apporte ;
   trait plein rouge + aplat cerné = le mariage, on s'occupe de tout. */
.pm-chapo{font-family:var(--display);font-size:clamp(1.05rem,3.4vw,1.25rem);
  line-height:1.5;max-width:44ch;margin-bottom:26px}

.pm-legende{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pm-legende li{position:relative;padding-left:19px;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;
  line-height:1.5;color:var(--muted)}
.pm-legende li::before{content:"";position:absolute;left:0;top:3px;width:10px;height:10px}
.pm-legende-coeur{color:var(--ink)}
.pm-legende-coeur::before{background:var(--red)}
.pm-legende-libre::before{background:var(--paper);border:1px solid var(--muted)}

/* --- Recap d'un coup d'oeil ---------------------------------------------
   Les demi-journees sont des lignes distinctes : on voit ainsi que le
   mariage demarre au milieu du samedi et s'arrete au milieu du dimanche.
   Rail plein + encadre = on s'occupe de tout. Rail pointille = libre. */
.pmx{list-style:none;margin:26px 0 0}
.pmx-j{position:relative;padding:0 0 22px 26px}
.pmx-j:last-child{padding-bottom:0}

/* le rail vertical, en segments bout a bout */
.pmx-j::before{content:"";position:absolute;top:0;bottom:0;z-index:0}
.pmx-j:first-child::before{top:7px}
.pmx-j:last-child::before{bottom:auto;height:7px}
.pmx-j::after{content:"";position:absolute;left:0;top:7px;
  width:11px;height:11px;z-index:2}
.pmx-j--libre::before{left:5px;border-left:1px dashed var(--muted)}
.pmx-j--libre::after{background:var(--paper);border:1px solid var(--muted)}
.pmx-j--coeur::before{left:4px;width:3px;background:var(--red)}
.pmx-j--coeur::after{top:20px;background:var(--red)}

/* une demi-journee libre : deux lignes, rien de plus */
.pmx-quand{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem;line-height:1.5;color:var(--muted);margin:0}
.pmx-quoi{margin:3px 0 0;font-size:.95rem;line-height:1.45}

/* le coeur : encadre, il enjambe la fin du samedi et le debut du dimanche */
.pmx-j--coeur{padding-bottom:26px}
.pmx-j--coeur .pmx-quand,
.pmx-j--coeur .pmx-quoi,
.pmx-j--coeur .pmx-tag,
.pmx-j--coeur .pmx-titre,
.pmx-j--coeur .pmx-cle{position:relative;z-index:1}
.pmx-j--coeur > *{margin-left:0}
.pmx-j--coeur{background:none}
.pmx-j--coeur .pmx-tag{display:inline-block;margin:0 0 10px;padding:5px 9px 4px;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.58rem;line-height:1;color:#fff;background:var(--red)}
.pmx-titre{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;margin:0 0 6px;font-size:clamp(1.7rem,6.5vw,2.3rem)}
.pmx-titre span{color:var(--red)}
.pmx-j--coeur .pmx-quand{color:var(--ink)}
.pmx-j--coeur .pmx-quoi{font-size:1.02rem;margin-top:6px}
.pmx-cle{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(28,28,26,.16);
  font-size:.92rem;font-weight:700;line-height:1.45;max-width:46ch}

@media(min-width:700px){
  .pmx-j{padding:0 0 28px 40px}
  .pmx-j::after{width:13px;height:13px}
  .pmx-j--libre::before{left:6px}
  .pmx-j--coeur::before{left:5px}
  .pmx-j--coeur::after{top:24px}
  .pmx-j--coeur{padding-bottom:34px}
}


/* liste des hébergements autour : nom + temps de trajet, triés du plus proche */
.loger{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.loger li{padding:16px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:5px 18px;align-items:baseline}
.loger .nom{font-weight:700;font-size:1.02rem;line-height:1.3;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.loger a.nom:hover{color:var(--red);border-bottom-color:var(--red)}
.loger span.nom{border-bottom:0}
.loger .min{font-family:var(--label);font-size:.72rem;letter-spacing:.1em;
  color:var(--red);white-space:nowrap}
.loger .meta{grid-column:1/-1;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;line-height:1.5;color:var(--muted)}
.loger .type{color:var(--ink)}
.loger-note{margin-top:26px;font-size:.92rem;color:var(--muted);max-width:62ch}

/* ---- Se loger : les trois règles du camping sur place ---- */
.camp-abc{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.camp-abc li{padding:14px 0;border-bottom:1px solid var(--line)}
.camp-abc .h{display:block;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.14em;font-size:.62rem;line-height:1.5;color:var(--red)}
.camp-abc .d{display:block;margin-top:5px;max-width:58ch;font-size:.95rem;line-height:1.55}

/* ---- Bon à savoir : blocs courts, titres affirmatifs ---- */
.bas-chapo{font-family:var(--display);font-size:clamp(1.05rem,3.4vw,1.25rem);
  line-height:1.5;max-width:40ch;margin-bottom:10px}
.bas{list-style:none;margin-top:14px}
.bas > li{padding:28px 0;border-top:1px solid var(--line)}
.bas h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.2rem,4.2vw,1.65rem);line-height:1.14;margin-bottom:12px;max-width:20ch}
.bas h2 span{color:var(--red)}
.bas p{margin-bottom:12px;max-width:58ch;font-size:.98rem}
.bas p:last-child{margin-bottom:0}
/* Cadeaux : même liste, mais volontairement plus discret */
.bas > li.cadeaux h2{font-size:clamp(1.05rem,3.4vw,1.3rem)}
.bas > li.cadeaux p{color:var(--muted);font-size:.94rem}
.bas-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;max-width:56ch}

.btn{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.74rem;background:var(--ink);color:var(--paper);padding:14px 24px;
  text-decoration:none;border:1px solid var(--ink);transition:.15s}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}

.map-embed{margin-top:20px;border:1px solid var(--ink)}
.map-embed iframe{width:100%;height:380px;display:block;border:0}

/* ============ BANDE STOP-MOTION — LE BUS SUR LA ROUTE ============
   Le paysage est un fond ancré en bas (la route reste toujours au ras du
   bord inférieur, quelle que soit la largeur). Le bus passe par-dessus.
   Tout le mouvement est en steps() : c'est volontairement saccadé. */
.roadtrip{
  position:relative;
  overflow:hidden;
  height:clamp(168px,24vw,300px);
  margin:0;
  /* pas de bordure haute : le menu a déjà la sienne, ça ferait un double trait */
  border-bottom:1px solid var(--line);
  background:var(--paper) url("img/road-pano.jpg") center bottom / cover no-repeat;
}

.roadtrip-bus{
  position:absolute;
  left:100%;            /* départ collé au bord droit, hors cadre */
  bottom:6%;            /* les roues posées sur l'asphalte */
  height:46%;
  /* Un cran par seconde, mais un gros : le bus se pose, attend, se repose.
     C'est volontaire — à cette cadence l'œil renonce à suivre le mouvement et
     lit une suite de poses. Les réglages « presque continus » (beaucoup de
     petits crans) donnent du judder et mal au cœur : ne pas y revenir.
     Le nombre de crans fixe la taille du bond, la durée fixe la vitesse. */
  animation:rt-drive 24s steps(24,end) infinite;
  will-change:transform;
}
.roadtrip-bus img{
  display:block;height:100%;width:auto;
  transform-origin:bottom center;
  animation:rt-wobble .42s steps(1,end) infinite;   /* défaut de calage, image par image */
}

/* la traversée : du bord droit jusqu'à complètement sorti à gauche */
@keyframes rt-drive{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-100vw - 100%))}
}

/* le petit défaut de calage du stop-motion : 3 positions, pas d'interpolation */
@keyframes rt-wobble{
  0%  {transform:translateY(0)    rotate(-.35deg)}
  33% {transform:translateY(-3px) rotate(.45deg)}
  66% {transform:translateY(1px)  rotate(-.15deg)}
}

/* Même cadence sur mobile : c'est ce réglage-là qui a été validé à l'œil.
   Seule la taille du bus change. */
@media(max-width:699px){
  .roadtrip-bus{height:40%;bottom:7%}
}

/* Animation coupée si la personne préfère le calme : le bus se gare. */
@media (prefers-reduced-motion:reduce){
  .roadtrip-bus{animation:none;left:auto;right:8%}
  .roadtrip-bus img{animation:none;transform:none}
}

/* ============ PIED DE PAGE ============ */
footer{border-top:1px solid var(--line);margin-top:10px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;padding-bottom:60px;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--red)}

/* ---- Lien RSVP encadré dans le menu ---- */
.nav a.nav-rsvp{
  border:1.5px solid var(--red);color:var(--red);border-radius:3px;
  padding:6px 14px;margin-left:4px;
}
.nav a.nav-rsvp:hover{background:var(--red);color:#fff}

/* ---- Bouton RSVP principal ---- */
.btn-rsvp{background:var(--red);border-color:var(--red);color:#fff;font-size:.82rem;padding:16px 30px}
.btn-rsvp:hover{background:var(--ink);border-color:var(--ink)}