/* =====================================================
   Zélie & Geoffrey — 3 juillet 2027
   Thème aquarelle florale, d'après le faire-part.
   Polices et images dans /assets.
   ===================================================== */

/* ---------- Polices locales ---------- */
@font-face {
	font-family: 'Edwardian';
	src: url('assets/fonts/ITCEDSCR.TTF') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'OldStyle';
	src: url('assets/fonts/OLDSH__.TTF') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'CenturyGothic';
	src: url('assets/fonts/GOTHIC.TTF') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'CenturyGothic';
	src: url('assets/fonts/GOTHICB.TTF') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'CenturyGothic';
	src: url('assets/fonts/GOTHICI.TTF') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'CenturyGothic';
	src: url('assets/fonts/GOTHICBI.TTF') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* --- Couleurs de base --- */
	--bg: #ffffff;
	--bg-alt: #fff6f2;
	--ink: #2b2926;
	--muted: #6f6a64;

	/* --- Palette du mariage --- */
	--coral: #db5f4a;
	--orange: #ee812f;
	--gold: #ffca68;
	--lime: #d7d460;
	--sage: #8da87c;
	--pink: #f0696f;
	--salmon: #f79f97;
	--blue: #b9d8e1;

	/* Dress code : couleurs réservées aux mariés (barrées) */
	--marie-blanc: #ffffff;
	--marie-beige: #ebd6c6;
	--cross: #e03737;
	/* Blanc cassé chaud des boutons sur fond de couleur */
	--paper: #f7f2ea;

	--accent: var(--coral);
	--line: rgba(43, 41, 38, 0.12);

	/* --- Polices --- */
	--font-script: 'Edwardian', cursive;
	--font-serif: 'OldStyle', Georgia, serif;
	--font-body: 'CenturyGothic', 'Century Gothic', Futura, system-ui, sans-serif;

	--maxw: 780px;
}

* {
	box-sizing: border-box;
}

/* Défilement animé pour les liens d'ancre (« Nous répondre » → #contact) */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--bg);
	font-family: var(--font-body);
	line-height: 1.7;
	overflow-x: hidden;
	font-weight: 500;
}

/* ---------- Décorations florales (PNG watercolor) ---------- */
.deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

/* ---------- Titres ---------- */
.section__title {
	font-family: var(--font-script);
	font-weight: 400;
	text-align: center;
	font-size: clamp(3rem, 8vw, 7.5rem);
	line-height: 1;
	color: var(--ink);
	margin: 0 0 2.5rem;
}
.subtitle {
	font-family: var(--font-serif);
	font-weight: 400;
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-block;
	border: 0;
	border-radius: 1em;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-body);
	font-size: 1.15rem;
	padding: 0.5em 1.25em;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
}
/* Bouton clair, sur fond de couleur (bandeau Confirmation) */
.btn--soft {
	background: var(--paper);
	color: var(--ink);
}
.btn--soft:hover {
	background: var(--ink);
	color: #fff;
}

/* ---------- Hero / Save the Date ---------- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: min(100svh, 100svw);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 7.5rem 1.5rem 3.5rem;
	background-image: url('assets/images/fondpapier.png');
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.hero__content {
	position: relative;
	z-index: 1;
}

/* "Save the Date" : deux mots en script, décalés, "the" en serif entre les deux */
.hero__save {
	font-family: var(--font-script);
	font-weight: 400;
	/* 34vw : le titre suit la largeur d'écran jusqu'à ~895px, puis se cale sur la maquette (19rem) */
	font-size: clamp(4.5rem, 34vw, 19rem);
	line-height: 0.66;
	color: var(--ink);
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hero__word--save {
	transform: translateX(-0.28em);
}
.hero__word--date {
	transform: translateX(0.28em);
}
.hero__the {
	font-family: var(--font-serif);
	font-size: 0.15em;
	line-height: 1;
	margin: 0.1em 0 0.16em;
	transform: translateX(-2.75em);
	margin-bottom: -0.5em;
}
.hero__names,
.hero__date {
	font-family: var(--font-serif);
	font-size: clamp(1.35rem, 2.7vw, 2.5rem);
	line-height: 1.3;
	margin: 0;
}
.hero__names {
	margin-top: 4.5rem;
}

/* Décors du hero, dans les angles (comme le faire-part) */
.deco--tl {
	top: 0%;
	left: 0%;
	width: clamp(120px, 26vw, 300px);
	transform: scale(-1, 1);
}
.deco--tr {
	top: 0%;
	right: 0%;
	width: clamp(130px, 33vw, 470px);
}
.deco--bl {
	bottom: 0%;
	left: 0%;
	width: clamp(120px, 26vw, 300px);
}
.deco--br {
	bottom: 0%;
	right: 0%;
	width: clamp(120px, 25vw, 275px);
}

/* ---------- Sections ---------- */
.section {
	position: relative;
	margin: 0 auto;
	padding: 5.5rem 1.5rem;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
.section.is-visible {
	opacity: 1;
	transform: none;
}
.section > *:not(.deco) {
	position: relative;
	z-index: 1;
}

/* Fond pleine largeur pour les sections alternées / le bandeau vert / le papier */
.section--alt::after,
.section--band::after,
.section--paper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--bg-alt);
	z-index: 0;
}
.section--band::after {
	background: var(--lime);
}
.section--paper::after {
	background: url('assets/images/fondpapier.png') center / cover no-repeat;
}

/* Section finale : photo pleine largeur, titre par-dessus */
/* height plutôt que aspect-ratio + min-height : le ratio reporterait le min-height
   en min-width (746px) et ferait déborder la section sur mobile. 56.3vw = 851/1512. */
.section--photo {
	padding: 0;
	height: max(420px, 56.3vw);
	max-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.section--photo .section__title {
	margin: clamp(1rem, 3vw, 2.5rem) 0 0;
}
.section__bg {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------- Programme ---------- */
/* overflow visible + z-index : la photo ronde débord dans le bandeau vert */
#programme {
	overflow: clip visible;
	z-index: 1;
	/* réserve la place de la photo ronde, calée en bas à droite */
	padding-bottom: clamp(230px, 38vw, 580px);
}
.programme {
	max-width: 740px;
	margin: 0 auto;
	display: grid;
	gap: 2.75rem;
	text-align: center;
}
.venue__name {
	font-family: var(--font-serif);
	font-size: clamp(1.35rem, 3.4vw, 1.75rem);
	line-height: 1.2;
	margin: 0;
}
.venue__city {
	font-size: 1rem;
	margin: 0.2rem 0 0;
}

/* Étapes : icône + heure + libellé, séparées par un filet vertical */
.steps {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 1.1rem 0 0;
	list-style: none;
}
.steps--single {
	max-width: 200px;
	margin-inline: auto;
}
.step {
	flex: 1 1 0;
	min-width: 0;
	max-width: 185px;
	padding: 0 0.85rem;
}
.step__icon {
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto 0.45rem;
}
.step__time {
	font-weight: 700;
	font-style: italic;
	font-size: 1rem;
	margin: 0;
}
.step__label {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0.15rem 0 0;
}

/* Photo ronde du couple (cercle + fleurs incrustées), en bas à droite.
   Le cercle fait 85 % de la largeur du PNG, qui déborde de ~11 % en bas (fleur). */
#programme .programme__figure {
	position: absolute;
	display: block;
	right: 1.5%;
	bottom: -1.25rem;
	z-index: 2;
	width: clamp(230px, 42vw, 640px);
	height: auto;
}

/* tache aquarelle derrière le programme */
.deco--blob {
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	height: min(80vh, 790px);
	opacity: 0.22;
}
.deco--prog-left {
	top: clamp(6rem, 18vw, 17rem);
	left: -4%;
	width: clamp(100px, 24vw, 370px);
}
.deco--prog-right {
	top: clamp(6rem, 14vw, 13rem);
	right: 8%;
	width: clamp(80px, 15vw, 215px);
}
.deco--prog-bottom {
	bottom: clamp(1rem, 4vw, 3.5rem);
	left: 1%;
	width: clamp(110px, 18vw, 250px);
}

@media (max-width: 540px) {
	.deco--prog-right {
		right: 2%;
	}
}

/* ---------- Confirmation (RSVP) ---------- */
/* Titre en serif (comme sur le faire-part) : le script est trop chargé ici */
#rsvp {
	text-align: center;
	padding: 1.6rem 1.5rem 1.9rem;
}
#rsvp .section__title {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 4vw, 2.15rem);
	margin: 0 0 0.5rem;
}
.rsvp__text {
	text-align: center;
	font-size: 1rem;
	line-height: 2;
	margin: 1.5rem 0 2rem;
}
.rsvp__text sup {
	font-size: 0.75em;
	vertical-align: super;
	line-height: 0;
	margin-bottom: 0.5em;
}
.rsvp__diet {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Dress code ---------- */
.dress__lead {
	max-width: 64ch;
	margin: 0 auto;
	text-align: center;
	font-size: 1rem;
}
.palette__label {
	text-align: center;
	font-size: 1.25rem;
	color: var(--ink);
	margin: 2.5rem 0 1.1rem;
}
.swatches {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(8px, 0.8vw, 11px);
	padding: 0;
	margin: 1.9rem 0 0;
	list-style: none;
}
.swatch {
	width: clamp(48px, 10vw, 80px);
	aspect-ratio: 1;
	border-radius: 28%;
}
.swatch--coral {
	background: var(--coral);
}
.swatch--orange {
	background: var(--orange);
}
.swatch--gold {
	background: var(--gold);
}
.swatch--lime {
	background: var(--lime);
}
.swatch--sage {
	background: var(--sage);
}
.swatch--pink {
	background: var(--pink);
}
.swatch--salmon {
	background: var(--salmon);
}
.swatch--blue {
	background: var(--blue);
}

/* Couleurs réservées aux mariés : barrées d'une croix rouge */
.dress__lead--reserved {
	margin-top: 3.25rem;
}
.swatches--reserved {
	gap: clamp(10px, 1vw, 14px);
}
.swatch--marie-blanc {
	background: var(--marie-blanc);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}
.swatch--marie-beige {
	background: var(--marie-beige);
}
.swatches--reserved .swatch {
	position: relative;
}
/* Croix "à ne pas porter" : deux diagonales en dégradé, débordant légèrement du carré */
.swatches--reserved .swatch::after {
	content: '';
	position: absolute;
	inset: 0%;
	pointer-events: none;
	background-image:
		linear-gradient(
			to top right,
			transparent calc(50% - 1px),
			var(--cross) calc(50% - 1px),
			var(--cross) calc(50% + 1px),
			transparent calc(50% + 1px)
		),
		linear-gradient(
			to bottom right,
			transparent calc(50% - 1px),
			var(--cross) calc(50% - 1px),
			var(--cross) calc(50% + 1px),
			transparent calc(50% + 1px)
		);
}

/* ---------- Carrousel Inspirations ---------- */
/* Déborde du padding de section pour être coupé par le bord de l'écran, comme la maquette */
.carousel {
	position: relative;
	margin: 1.5rem -1.5rem 0;
}
.carousel__track {
	display: flex;
	gap: 20px;
	padding: 0 1.5rem 0 clamp(1.5rem, 6vw, 90px);
	margin: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* sans ça, le snap initial colle la 1re carte au bord et annule le décalage de gauche */
	scroll-padding-left: clamp(1.5rem, 6vw, 90px);
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar {
	display: none;
}
.carousel__item {
	flex: 0 0 auto;
	width: clamp(150px, 15vw, 215px);
	scroll-snap-align: start;
}
.carousel__item img {
	display: block;
	width: 100%;
	aspect-ratio: 220 / 330;
	object-fit: cover;
	border-radius: 12px;
}

/* Flèches : masquées au clavier/souris tant qu'il n'y a rien à faire défiler */
.carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	cursor: pointer;
	transition:
		opacity 0.2s ease,
		transform 0.15s ease;
}
.carousel__nav::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}
.carousel__nav--prev {
	left: 12px;
}
.carousel__nav--prev::before {
	transform: translateX(2px) rotate(-135deg);
}
.carousel__nav--next {
	right: 12px;
}
.carousel__nav--next::before {
	transform: translateX(-2px) rotate(45deg);
}
.carousel__nav:hover {
	transform: translateY(-50%) scale(1.06);
}
.carousel__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.deco--dress {
	top: 0;
	right: -2%;
	width: clamp(90px, 15vw, 210px);
}
.deco--dress-2 {
	top: 42%;
	left: -5%;
	width: clamp(80px, 13vw, 200px);
}

/* ---------- Le lieu ---------- */
.place {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.place__name {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.2;
	margin: 0;
}
.place__address {
	font-size: 1rem;
	margin: 0.4rem 0 0;
}
/* Cadre de la carte : ratio constant, l'iframe s'y cale (elle porte ses propres dimensions) */
.place__map {
	position: relative;
	aspect-ratio: 4 / 3;
	margin-top: 2rem;
	border-radius: 12px;
	overflow: hidden;
}
.place__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.place__actions {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}
.deco--lieu {
	bottom: 0%;
	left: -4%;
	width: clamp(100px, 20vw, 280px);
}
.deco--lieu-2 {
    top: 20%;
    left: 50%;
    opacity: 0.35;
    width: clamp(90px, 50vw, 625px);
    transform: scale(-1, 1) translate(50%, 0);
}

#lieu {
	padding-top: 2.5rem;
}

#lieu .section__title {
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
	/* pas de place pour les fleurs à côté de la carte */
	#lieu .deco {
		display: none;
	}
	.place__map {
		aspect-ratio: 1;
	}
}

/* ---------- Hébergements ---------- */
#hebergements {
	padding-block: clamp(4rem, 10vw, 11rem);
}
.coming-soon {
	text-align: center;
	font-size: min(2.75rem, 7vw);
	color: var(--muted);
	margin: 0;
}
/* tranche5 miroir : la tranche d'orange arrive par le bord droit ; tranche14 pivotée pour l'angle bas gauche */
.deco--heberg {
	top: -8%;
	right: 0;
	width: clamp(110px, 22vw, 330px);
	transform: scale(-1, -1);
}
.deco--heberg-2 {
	bottom: -2%;
	left: 0;
	width: clamp(110px, 20vw, 300px);
	transform: rotate(180deg);
}

/* ---------- Voyage de noces ---------- */
.trip__lead {
	max-width: 64ch;
	margin: 0 auto;
	text-align: center;
	font-size: 1rem;
}
.trip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	max-width: 900px;
	margin: 2.75rem auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
/* Carte d'étape : photo en fond, texte posé en bas */
.trip__stop {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	padding: 1rem 0.9rem 1.25rem;
	border-radius: 12px;
	overflow: hidden;
	color: #fff;
}
.trip__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Voile sombre : sans lui le texte blanc se perd dans les ciels clairs.
   ::after vient après l'image dans l'ordre de peinture, donc au-dessus d'elle. */
.trip__stop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32) 45%, rgba(0, 0, 0, 0.08));
}
.trip__index {
	position: absolute;
	z-index: 1;
	top: 0.8rem;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--coral);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1;
}
.trip__city,
.trip__note {
	position: relative;
	z-index: 1;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.trip__city {
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	line-height: 1.2;
	margin: 0;
}
.trip__note {
	font-size: 0.9rem;
	line-height: 1.35;
	margin: 0.3rem 0 0;
}
.deco--voyage {
	top: -6%;
	left: -3%;
	width: clamp(90px, 18vw, 250px);
	transform: scale(-1, 1);
}
.deco--voyage-2 {
	bottom: -8%;
	right: -4%;
	width: clamp(90px, 16vw, 230px);
}

/* ---------- Boutons de contact (dans le bandeau Confirmation) ---------- */
.contact__actions {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

/* Tooltip "Copié dans le presse-papier" au clic sur un bouton de contact */
.js-contact {
	position: relative;
}
.js-contact::after {
	content: 'Copié dans le presse-papier';
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ink);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.8rem;
	line-height: 1;
	white-space: nowrap;
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}
.js-contact::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.js-contact.is-copied::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.js-contact.is-copied::before {
	opacity: 1;
}

/* ---------- Footer ---------- */
.footer {
	text-align: center;
	padding: 3.5rem 1.5rem;
	color: var(--muted);
}
.footer p {
	margin: 0.25rem 0;
}
.footer__names {
	font-family: var(--font-script);
	font-size: 2.5rem;
	color: var(--ink);
}
.footer__url {
	color: var(--coral);
}

/* ---------- Petits écrans ---------- */
@media (max-width: 640px) {
	/* les 4 étapes passent en 2 × 2 */
	.steps {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 0;
		max-width: 340px;
		margin-inline: auto;
	}
	.steps--single {
		grid-template-columns: 1fr;
	}
	.step {
		max-width: none;
		padding: 0 0.6rem;
	}

	/* palette en 4 × 2 plutôt qu'un retour à la ligne bancal (les 2 pastilles
     « mariés » restent en flex centré, sinon elles se collent à gauche de la grille) */
	.swatches--palette {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 340px;
		margin-inline: auto;
		justify-items: center;
	}
	.swatches--palette .swatch {
		width: 100%;
	}

	.deco--blob {
		display: none;
	}

	/* pas de place pour cette fleur sans passer sur le texte */
	.deco--dress-2 {
		display: none;
	}

	/* la photo repasse dans le flux, centrée */
	#programme {
		padding-bottom: 3.5rem;
	}
	#programme .programme__figure {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(340px, 88%);
		margin: 2rem auto 0;
	}

	/* les 4 étapes du voyage passent en 2 × 2 */
	.trip {
		grid-template-columns: 1fr 1fr;
		max-width: 420px;
	}
}

@media (max-width: 360px) {
	#programme .deco {
		display: none;
	}
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.section {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.js-contact::after,
	.js-contact::before {
		transition: none;
	}
}