/* Le Mas des Cinq Fontaines — styles du site.
   Couleurs tirées du logo (le dégradé or) et du site actuel (ivoire, sable, encre). Polices : Cormorant Garamond
   (titres, police du site actuel, proche des capitales du logo), Corinthia (le mot mis en valeur, proche de l'écriture
   « Domaine de mariages en Provence » du logo), Barlow (texte et menu, proche du DIN du menu actuel).
   L'idée : la page d'accueil suit la lumière d'une journée de mariage, du matin clair à la nuit de la fête. */

/* Polices hébergées sur le site (fichiers « latin » de Google Fonts, licence SIL Open Font License, 30/09/2026). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Corinthia"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/corinthia.woff2") format("woff2"); }

/* Couleurs du thème : déclarées pour passer en douceur d'une section à l'autre (motion.js). */
@property --fond { syntax: '<color>'; inherits: true; initial-value: #f4f2ec; }
@property --titre { syntax: '<color>'; inherits: true; initial-value: #272724; }
@property --texte { syntax: '<color>'; inherits: true; initial-value: #4a463d; }
@property --texte-doux { syntax: '<color>'; inherits: true; initial-value: #6f695b; }
@property --filet { syntax: '<color>'; inherits: true; initial-value: #dcd6c6; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #7d5a2c; }
@property --carte { syntax: '<color>'; inherits: true; initial-value: #fbfaf6; }

:root {
  /* Le jour */
  --ivoire: #f4f2ec;
  --porcelaine: #fbfaf6;
  --sable: #e7e2d2;
  --sable-fonce: #d9d1bb;
  /* L'or du logo, du plus sombre au plus clair */
  --or-ombre: #6f4b20;
  --or-profond: #7d5a2c;
  --or: #a67940;
  --or-moyen: #bc8e4f;
  --or-clair: #e7bc76;
  --or-lumiere: #f4cd91;
  /* Le soir et la nuit */
  --crepuscule: #3a3226;
  --encre: #272724;
  --nuit: #1d1d1b;
  --nuit-carte: #2f2e2a;

  --dore: linear-gradient(100deg, #7e5626 0%, #b8864a 22%, #e9c283 44%, #f6d59c 50%, #c99a57 62%, #9a6b35 82%, #7e5626 100%);
  --dore-bouton: linear-gradient(100deg, #c99a57 0%, #ecc788 45%, #f6d9a4 55%, #d2a462 100%);

  --f-titre: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-texte: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-plume: "Corinthia", "Snell Roundhand", "Brush Script MT", cursive;

  --gouttiere: clamp(16px, 5vw, 64px);
  --page: min(1280px, 100% - 2 * var(--gouttiere));
  --etroite: min(860px, 100% - 2 * var(--gouttiere));
  --espace-section: clamp(84px, 12vw, 168px);
  --hauteur-entete: 84px;
  --rayon: 6px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ombre: 0 30px 70px -38px rgb(39 39 36 / 0.45);
}

/* Thème porté par <html data-fond>, changé par motion.js selon la section au milieu de l'écran. */
html {
  --fond: var(--ivoire);
  --titre: var(--encre);
  --texte: #4a463d;
  --texte-doux: #6f695b;
  --filet: #dcd6c6;
  --accent: var(--or-profond);
  --carte: var(--porcelaine);
  transition: --fond 0.9s ease, --titre 0.9s ease, --texte 0.9s ease, --texte-doux 0.9s ease, --filet 0.9s ease,
    --accent 0.9s ease, --carte 0.9s ease;
}
html[data-fond='porcelaine'] { --fond: var(--porcelaine); --carte: var(--ivoire); }
html[data-fond='sable'] { --fond: var(--sable); --carte: var(--porcelaine); --filet: #cfc6ae; --texte-doux: #655f50; }
html[data-fond='crepuscule'] {
  --fond: var(--crepuscule);
  --titre: #f7f1e6;
  --texte: #e2d9c8;
  --texte-doux: #b9ad96;
  --filet: #544a3b;
  --accent: var(--or-clair);
  --carte: #463c2e;
}
html[data-fond='nuit'] {
  --fond: var(--encre);
  --titre: #f7f3ea;
  --texte: #dcd6c8;
  --texte-doux: #a8a292;
  --filet: #43413a;
  --accent: var(--or-clair);
  --carte: var(--nuit-carte);
}

/* Sans animation (ou sans JavaScript), chaque section porte son propre fond. */
html:not(.js) [data-fond='ivoire'] { background: var(--ivoire); --fond: var(--ivoire); }
html:not(.js) [data-fond='porcelaine'] { background: var(--porcelaine); --fond: var(--porcelaine); --carte: var(--ivoire); }
html:not(.js) [data-fond='sable'] { background: var(--sable); --fond: var(--sable); --carte: var(--porcelaine); --filet: #cfc6ae; --texte-doux: #655f50; }
html:not(.js) [data-fond='crepuscule'],
html:not(.js) [data-fond='nuit'] {
  --titre: #f7f3ea;
  --texte: #dcd6c8;
  --texte-doux: #a8a292;
  --filet: #43413a;
  --accent: var(--or-clair);
  --carte: var(--nuit-carte);
  color: var(--texte);
}
html:not(.js) [data-fond='crepuscule'] { background: var(--crepuscule); --fond: var(--crepuscule); --carte: #463c2e; --filet: #544a3b; --texte: #e2d9c8; --texte-doux: #b9ad96; }
html:not(.js) [data-fond='nuit'] { background: var(--encre); --fond: var(--encre); }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hauteur-entete) + 16px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.66;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--or-clair); color: var(--encre); }
[hidden] { display: none !important; }
sup { font-size: 0.62em; line-height: 0; vertical-align: 0.62em; letter-spacing: 0; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 12px 18px; background: var(--porcelaine); color: var(--encre); border-radius: 4px;
}
.sans-coupure { white-space: nowrap; }
.sans-coupure .mot--groupe { white-space: normal; }

.page { width: var(--page); margin-inline: auto; }
.page--etroite { width: var(--etroite); margin-inline: auto; }
.section { position: relative; z-index: 1; padding-block: var(--espace-section); }
.section--serree { padding-block: clamp(64px, 8vw, 112px); }
/* Avec JavaScript, chaque section prend la couleur de la page : elle recouvre ainsi le haut de page épinglé. */
html.js .section { background: var(--fond); }

/* ---------- Typographie ---------- */

.titre-1, .titre-2, .titre-3 {
  font-family: var(--f-titre);
  font-weight: 400;
  color: var(--titre);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.titre-1 { font-size: clamp(2.75rem, 1.2rem + 5.6vw, 6.4rem); line-height: 0.98; font-weight: 300; }
.titre-2 { font-size: clamp(2.35rem, 1.3rem + 3.7vw, 4.6rem); line-height: 1.02; font-weight: 300; }
.titre-3 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.25rem); line-height: 1.1; font-weight: 500; }

/* Le mot mis en valeur : l'écriture du logo, dorée comme lui. */
.plume {
  font-family: var(--f-plume);
  font-weight: 400;
  font-size: 1.42em;
  line-height: 0.7;
  letter-spacing: 0;
  padding-inline: 0.04em 0.12em;
  color: var(--or);
  background: var(--dore);
  background-size: 220% 100%;
  background-position: 30% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-fond='nuit'] .plume, html[data-fond='crepuscule'] .plume, .sur-sombre .plume {
  background: linear-gradient(100deg, #c99a57 0%, #f1cf92 40%, #fbe3b6 52%, #d9aa66 70%, #b98a4b 100%);
  background-size: 220% 100%; /* pour le reflet qui passe sur le mot (motion.js) */
  background-position: 30% 50%;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (forced-colors: active) { .plume { -webkit-text-fill-color: currentColor; background: none; } }

/* Surtitre : les filets de part et d'autre, comme « Le Mas des » sur le logo. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.surtitre::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.centre .surtitre::after, .surtitre--centre::after { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.surtitre--clair { color: var(--or-lumiere); }

.chapeau { font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.38rem); line-height: 1.58; color: var(--texte); max-width: 58ch; font-weight: 400; }
.texte > * + * { margin-top: 1em; }
.texte { max-width: 64ch; }
.texte strong { color: var(--titre); font-weight: 600; }
.doux { color: var(--texte-doux); }
.petit { font-size: 0.95rem; line-height: 1.55; }
.credit { font-size: 0.8rem; color: var(--texte-doux); letter-spacing: 0.02em; }

.section-tete { display: grid; gap: 22px; margin-bottom: clamp(44px, 6vw, 84px); max-width: 880px; justify-items: start; }
.section-tete--centre, .centre { text-align: center; justify-items: center; margin-inline: auto; }
.section-tete .chapeau { color: var(--texte-doux); }
.centre .chapeau { margin-inline: auto; }

/* ---------- Boutons et liens ---------- */

.bouton {
  --b-fond: transparent;
  --b-texte: var(--titre);
  --b-bord: currentColor;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0.9em 1.9em;
  border: 1px solid var(--b-bord);
  border-radius: 2px;
  background: var(--b-fond);
  color: var(--b-texte);
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 0.4s var(--courbe), color 0.4s var(--courbe), border-color 0.4s var(--courbe), box-shadow 0.4s var(--courbe);
}
.bouton:hover { text-decoration: none; }
.bouton svg { flex: none; width: 18px; height: 18px; }
/* Le bouton principal : la feuille d'or du logo, un reflet qui passe au survol. */
.bouton--or { --b-texte: var(--encre); --b-bord: transparent; background: var(--dore-bouton); box-shadow: 0 10px 30px -14px rgb(111 75 32 / 0.55); }
.bouton--or::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--courbe);
}
.bouton--or:hover::after { transform: translateX(120%); }
.bouton--or:hover { box-shadow: 0 14px 34px -12px rgb(111 75 32 / 0.65); }
.bouton--plein { --b-fond: var(--titre); --b-texte: var(--fond); --b-bord: var(--titre); }
.bouton--plein:hover { --b-fond: var(--or-profond); --b-bord: var(--or-profond); --b-texte: #ffffff; }
html[data-fond='nuit'] .bouton--plein:hover, html[data-fond='crepuscule'] .bouton--plein:hover { --b-fond: var(--or-clair); --b-bord: var(--or-clair); --b-texte: var(--encre); }
.bouton--trait { --b-texte: var(--titre); --b-bord: color-mix(in srgb, var(--titre) 45%, transparent); }
.bouton--trait:hover { --b-fond: var(--titre); --b-texte: var(--fond); --b-bord: var(--titre); }
.bouton--clair { --b-texte: #ffffff; --b-bord: rgb(255 255 255 / 0.6); background: rgb(20 18 14 / 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bouton--clair:hover { --b-fond: #ffffff; --b-texte: var(--encre); --b-bord: #ffffff; }
.bouton--petit { min-height: 44px; padding: 0.7em 1.3em; font-size: 0.74rem; }
/* Le texte roule d'une ligne au survol (mouvement d'ONELLA). */
.bouton__texte { position: relative; display: inline-grid; overflow: hidden; }
.bouton__texte > span { grid-area: 1 / 1; transition: transform 0.55s var(--courbe); }
.bouton__texte > span + span { transform: translateY(115%); }
@media (hover: hover) {
  .bouton:hover .bouton__texte > span:first-child { transform: translateY(-115%); }
  .bouton:hover .bouton__texte > span + span { transform: translateY(0); }
}
.boutons { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.centre .boutons, .boutons--centre { justify-content: center; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--titre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 6px;
  transition: border-color 0.3s;
}
.lien-fleche svg { width: 18px; height: 18px; color: var(--accent); transition: transform 0.4s var(--courbe); }
.lien-fleche:hover { border-color: var(--accent); text-decoration: none; }
.lien-fleche:hover svg { transform: translateX(5px); }

/* ---------- En-tête ---------- */

.progression {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: var(--dore);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--hauteur-entete);
  color: var(--titre);
  background: rgb(244 242 236 / 0.9);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid rgb(39 39 36 / 0.08);
  transition: transform 0.5s var(--courbe), background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
html[data-fond='nuit'] .entete:not(.sur-photo), html[data-fond='crepuscule'] .entete:not(.sur-photo) { background: rgb(29 29 27 / 0.88); color: #f7f3ea; border-color: rgb(255 255 255 / 0.07); }
.entete.sur-photo { background: transparent; color: #ffffff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.entete.sur-photo::before {
  content: "";
  position: absolute;
  inset: 0 0 -50px;
  z-index: -1;
  background: linear-gradient(rgb(18 16 12 / 0.55), transparent);
  pointer-events: none;
}
.entete.cache { transform: translateY(-100%); }
.entete__in { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); height: 100%; }
.logo { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; margin-right: auto; }
.logo img { width: 52px; height: auto; }
/* Le monogramme : or du logo sur fond clair, or plus lumineux sur la photo et sur les fonds de soir et de nuit. */
.logo__clair { display: none; }
.entete.sur-photo .logo__sombre, html[data-fond='nuit'] .entete .logo__sombre, html[data-fond='crepuscule'] .entete .logo__sombre { display: none; }
.entete.sur-photo .logo__clair, html[data-fond='nuit'] .entete .logo__clair, html[data-fond='crepuscule'] .entete .logo__clair { display: block; }
.logo__nom { display: block; font-family: var(--f-titre); font-weight: 500; font-size: 1.05rem; line-height: 1.05; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.logo__nom small { display: block; font-family: var(--f-texte); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.3em; opacity: 0.75; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav a {
  position: relative;
  color: inherit;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 10px;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: var(--or-moyen);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--courbe);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: 0 50%; }
.entete__actions { display: flex; align-items: center; gap: 14px; }
.entete .bouton { min-height: 46px; padding: 0.7em 1.4em; font-size: 0.72rem; }

/* Le choix de la langue : toujours visible, sur ordinateur comme sur téléphone. */
.langues {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.langues a, .langues span { display: inline-grid; place-items: center; min-width: 40px; min-height: 34px; padding: 0 10px; border-radius: 999px; color: inherit; text-decoration: none; }
.langues span[aria-current] { background: var(--dore-bouton); color: var(--encre); }
.langues a { opacity: 0.8; transition: opacity 0.3s, background-color 0.3s; }
.langues a:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}
.burger span { position: absolute; left: 12px; right: 12px; height: 1.4px; background: currentColor; transition: transform 0.4s var(--courbe), opacity 0.3s; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 29px; }
.entete.ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.entete.ouvert .burger span:nth-child(2) { opacity: 0; }
.entete.ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu du téléphone */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--hauteur-entete) + 14px) var(--gouttiere) 28px;
  background: var(--encre);
  color: #f7f3ea;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--courbe), visibility 0s 0.45s;
}
.menu-mobile.ouvert { visibility: visible; opacity: 1; transition: opacity 0.45s var(--courbe), visibility 0s; }
.menu-mobile nav { display: grid; margin-bottom: 28px; }
.menu-mobile nav a {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  color: inherit;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(1.85rem, 8vw, 2.4rem);
  line-height: 1.1;
  text-decoration: none;
}
.menu-mobile nav a small { font-family: var(--f-texte); font-size: 0.9rem; font-weight: 400; line-height: 1.35; color: #b3ac9c; letter-spacing: 0.01em; }
.menu-mobile nav a[aria-current='page'] { color: var(--or-clair); }
.menu-mobile .boutons { margin-bottom: 26px; }
.menu-mobile .bouton { flex: 1 1 220px; }
.menu-mobile .bouton--trait { --b-texte: #ffffff; --b-bord: rgb(255 255 255 / 0.5); }
.menu-mobile__contact { display: grid; gap: 6px; margin-top: auto; color: #d6cfbf; }
.menu-mobile__contact a { color: #ffffff; text-decoration: none; font-weight: 500; }
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

/* Suggestion de langue : un visiteur dont le navigateur n'est pas en français se voit proposer l'anglais. */
.suggestion-langue {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px 18px;
  width: min(560px, calc(100% - 24px));
  padding: 12px 12px 12px 20px;
  border-radius: 4px;
  background: var(--encre);
  color: #f7f3ea;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6);
  transform: translateX(-50%);
  font-size: 0.98rem;
  line-height: 1.4;
  animation: suggestion 0.7s 1.2s var(--courbe) backwards;
}
.suggestion-langue p { flex: 1; }
.suggestion-langue .bouton { min-height: 42px; padding: 0.6em 1.1em; font-size: 0.72rem; flex: none; }
.suggestion-langue .fermer-suggestion { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #cfc8b8; }
.suggestion-langue .fermer-suggestion svg { width: 18px; height: 18px; }
@keyframes suggestion { from { opacity: 0; transform: translate(-50%, 20px); } }

/* ---------- Haut de page : la vidéo ou la photo. Au défilement (scenes.js), celle de l'accueil s'ouvre en deux portes,
   celle des autres pages se fond dans la lumière. ---------- */

.ouverture {
  position: relative;
  z-index: 0;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--hauteur-entete) + 40px) 0 clamp(64px, 11vh, 120px);
  color: #ffffff;
  isolation: isolate;
  background: var(--nuit);
}
.ouverture--page { min-height: 86vh; min-height: 86svh; }
.ouverture__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #2a2620; }
.ouverture__media img, .ouverture__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 50%); }
.ouverture__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(18 16 12 / 0.42) 0%, rgb(18 16 12 / 0) 30%),
    linear-gradient(0deg, rgb(18 16 12 / 0.8) 0%, rgb(18 16 12 / 0.38) 42%, rgb(18 16 12 / 0) 68%),
    radial-gradient(ellipse 60% 55% at 50% 58%, rgb(18 16 12 / 0.34), rgb(18 16 12 / 0) 70%);
}
.ouverture__contenu { display: grid; gap: 24px; justify-items: center; text-align: center; }
.ouverture--page .ouverture__contenu { justify-items: start; text-align: left; }
.ouverture__titre { color: #ffffff; max-width: 16ch; }
.ouverture--page .ouverture__titre { max-width: 17ch; }
.ouverture__titre .plume { background: linear-gradient(100deg, #d9aa66 0%, #f4d49c 42%, #fde7bd 52%, #e2b56f 72%, #c99a57 100%); -webkit-background-clip: text; background-clip: text; }
.ouverture .chapeau { color: rgb(255 255 255 / 0.92); max-width: 50ch; }
.ouverture__actions { margin-top: 6px; justify-content: center; }
.ouverture--page .ouverture__actions { justify-content: flex-start; }
.ouverture__etoiles { display: inline-flex; align-items: center; gap: 12px; color: rgb(255 255 255 / 0.9); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.etoiles { display: inline-flex; gap: 5px; color: var(--or-clair); }
.etoiles svg { width: 11px; height: 11px; }
.ouverture__defiler {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
}
.ouverture__defiler::after { content: ""; width: 1px; height: 38px; background: linear-gradient(#fff, rgb(255 255 255 / 0)); animation: descendre 2.4s ease-in-out infinite; }
@keyframes descendre { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.ouverture__credit { position: absolute; right: var(--gouttiere); bottom: 16px; color: rgb(255 255 255 / 0.66); font-size: 0.72rem; }
.ouverture__film {
  position: absolute;
  left: var(--gouttiere);
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ouverture__film span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 0.55); border-radius: 50%; transition: background-color 0.4s, border-color 0.4s, color 0.4s; }
.ouverture__film small { font-size: inherit; opacity: 0.7; letter-spacing: 0.1em; }
.ouverture__film svg { width: 14px; height: 14px; margin-left: 2px; }
.ouverture__film:hover span { background: #ffffff; border-color: #ffffff; color: var(--encre); }
.ouverture__media video { opacity: 0; transition: opacity 1.2s ease; }
.ouverture__media video.en-lecture { opacity: 1; }
/* Le film complet, dans une fenêtre */
.film { width: min(1280px, 100vw - 24px); max-width: none; padding: 0; border: 0; border-radius: var(--rayon); background: #0d0d0c; color: #cfc8b8; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6); overflow: hidden; }
.film::backdrop { background: rgb(18 16 12 / 0.9); backdrop-filter: blur(4px); }
.film[open] { animation: ouvrir 0.5s var(--courbe); }
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film__credit { padding: 10px 18px; font-size: 0.82rem; letter-spacing: 0.04em; }

/* La section qui suit le haut de page. */
.suite { padding-top: clamp(72px, 9vw, 128px); }

/* Accueil : les portes du domaine. L'image du haut se partage en son milieu, là où se rejoignent les deux grilles du
   portail, et ses deux moitiés s'écartent sur la section suivante, qui arrive derrière elles. */
html.js:not(.mouvement-reduit) .ouverture.a-ouvrants { z-index: 2; background: transparent; }
/* Portes ouvertes : le haut de page, transparent, laisse passer les clics vers la section qui arrive derrière. */
.ouverture.est-ouverte { pointer-events: none; }
.ouvrants { --filet: 0; position: absolute; inset: 0; z-index: -1; overflow: hidden; visibility: hidden; perspective: max(1200px, 130vw); pointer-events: none; }
.ouvrant { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; backface-visibility: hidden; will-change: transform; }
.ouvrant--gauche { left: 0; transform-origin: 0% 50%; }
.ouvrant--droite { right: 0; transform-origin: 100% 50%; }
.ouvrant canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Le même voile que sur la vidéo (« Accueil : un voile », plus bas), sur toute la largeur : les deux moitiés le partagent. */
.ouvrant__voile {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200%;
  background:
    linear-gradient(rgb(18 16 12 / 0.3), rgb(18 16 12 / 0.3)),
    linear-gradient(180deg, rgb(18 16 12 / 0.4) 0%, rgb(18 16 12 / 0) 30%),
    linear-gradient(0deg, rgb(18 16 12 / 0.75) 0%, rgb(18 16 12 / 0.3) 45%, rgb(18 16 12 / 0) 70%),
    radial-gradient(ellipse 60% 55% at 50% 58%, rgb(18 16 12 / 0.3), rgb(18 16 12 / 0) 70%);
}
.ouvrant--gauche .ouvrant__voile { left: 0; }
.ouvrant--droite .ouvrant__voile { right: 0; }
/* Un fil d'or sur le bord de chaque porte, là où entre la lumière. */
.ouvrant::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; opacity: var(--filet); background: linear-gradient(180deg, rgb(246 213 156 / 0), rgb(246 213 156 / 0.9) 30%, rgb(246 213 156 / 0.9) 70%, rgb(246 213 156 / 0)); }
.ouvrant--gauche::after { right: 0; }
.ouvrant--droite::after { left: 0; }
/* La lumière du domaine, entre les portes : douce, elle s'efface quand la section suivante arrive. */
.ouvrants__lumiere { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 22% 60% at 50% 50%, rgb(255 244 222 / 0.75), rgb(246 213 156 / 0.35) 50%, rgb(246 213 156 / 0) 85%); }
/* Autres pages : la couleur de la page monte sur la photo jusqu'à l'effacer. */
.ouverture__lumiere { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: linear-gradient(0deg, var(--fond) 0%, var(--fond) 35%, color-mix(in srgb, var(--fond) 70%, transparent) 100%); }

/* ---------- Le monogramme : un petit fleuron doré entre deux filets ---------- */

.fleuron { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--or-moyen); }
.fleuron::before, .fleuron::after { content: ""; width: min(120px, 22vw); height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.fleuron::after { transform: scaleX(-1); }
.fleuron svg { width: 34px; height: 20px; }

/* ---------- Promesse et chiffres clés, sous le haut de page ---------- */

.promesse { display: grid; justify-items: center; text-align: center; gap: 28px; }
.promesse .titre-2 { max-width: 20ch; }
.promesse .chapeau { margin-inline: auto; }
.faits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px);
  border-block: 1px solid var(--filet);
}
.fait { display: grid; gap: 6px; justify-items: center; align-content: start; padding: clamp(24px, 3vw, 38px) 16px; text-align: center; border-left: 1px solid var(--filet); }
.fait:first-child { border-left: 0; }
.fait dd { display: grid; gap: 6px; justify-items: center; margin: 0; }
.fait strong {
  font-family: var(--f-titre);
  font-weight: 300;
  font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem);
  line-height: 1;
  color: var(--titre);
  font-variant-numeric: lining-nums tabular-nums;
}
.fait strong small { font-size: 0.42em; letter-spacing: 0.02em; margin-left: 0.12em; }
.fait dd > span { color: var(--texte-doux); font-size: 0.98rem; line-height: 1.4; max-width: 22ch; }

/* ---------- Photos : elles sortent d'un léger voile de soleil (motion.js) ---------- */

.photo { position: relative; margin: 0; }
.photo .rideau { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--sable); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { margin-top: 10px; }
.photo--portrait .rideau { aspect-ratio: 4 / 5; }
.photo--haute .rideau { aspect-ratio: 3 / 4; }
.photo--paysage .rideau { aspect-ratio: 3 / 2; }
.photo--large .rideau { aspect-ratio: 16 / 9; }
/* Le cadre doré : un filet décalé derrière la photo, comme un cadre de salon. */
.photo--cadre { padding: 0 14px 14px 0; }
.photo--cadre::before { content: ""; position: absolute; inset: 14px 0 0 14px; border: 1px solid var(--or-moyen); border-radius: var(--rayon); opacity: 0.8; pointer-events: none; }
.photo--cadre .rideau { z-index: 1; }

/* ---------- Deux colonnes : texte et photos ---------- */

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.duo--inverse > :first-child { order: 2; }
.duo__texte { display: grid; gap: 26px; justify-items: start; }
.collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.collage > :first-child { grid-column: 1 / 10; grid-row: 1; }
.collage > :nth-child(2) { grid-column: 7 / 13; grid-row: 1; margin-bottom: -14%; z-index: 1; }
.collage > :nth-child(2) .rideau { box-shadow: var(--ombre); outline: 8px solid var(--fond); }

/* ---------- Portes d'entrée (accueil) ---------- */

.portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.porte {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 44vw, 600px);
  border-radius: var(--rayon);
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
  background: var(--nuit);
}
.porte__media { position: absolute; inset: 0; z-index: -1; }
.porte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--courbe); }
.porte__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(18 16 12 / 0.86) 0%, rgb(18 16 12 / 0.4) 42%, rgb(18 16 12 / 0.05) 75%); }
.porte:hover .porte__media img { transform: scale(1.06); }
.porte__corps { display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 34px); }
.porte__etiquette { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or-lumiere); }
.porte h3 { font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1.05; color: #ffffff; }
.porte p { color: rgb(255 255 255 / 0.86); font-size: 1rem; max-width: 36ch; }
.porte__lien { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.porte__lien svg { width: 18px; height: 18px; color: var(--or-clair); transition: transform 0.4s var(--courbe); }
.porte:hover .porte__lien svg { transform: translateX(5px); }

/* ---------- Votre journée au Mas : la photo et son ciel restent à l'écran, les moments défilent à côté ---------- */

.recit { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.recit__fenetre { display: grid; gap: 14px; }
.recit__visuel { position: relative; }
.recit__visuel .rideau { aspect-ratio: 4 / 5; }
.recit__liste { display: grid; }
.recit__phrase { display: grid; gap: 16px; align-content: center; }
.recit__phrase .recit__moment { font-family: var(--f-plume); font-weight: 400; font-size: clamp(3.2rem, 2.2rem + 3vw, 5rem); line-height: 0.9; color: var(--or); max-width: none; }
html[data-fond='nuit'] .recit__phrase .recit__moment, html[data-fond='crepuscule'] .recit__phrase .recit__moment { color: var(--or-clair); }
.recit__phrase p { font-family: var(--f-titre); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.8rem); line-height: 1.16; color: var(--titre); max-width: 22ch; }
/* Chaque moment occupe une bonne hauteur d'écran ; celui qu'on lit est net, les autres s'effacent. */
html.js .recit__phrase { min-height: 62vh; min-height: 62svh; }
html.js:not(.mouvement-reduit) .recit__phrase { opacity: 0.2; transition: opacity 0.8s var(--courbe); }
html.js:not(.mouvement-reduit) .recit__phrase.est-actif { opacity: 1; }
html:not(.js) .recit__phrase { padding-block: 20px; border-top: 1px solid var(--filet); }
/* Les visuels de chaque moment se superposent et passent en fondu. */
.recit__visuel .rideau img { position: absolute; inset: 0; transition: opacity 0.9s var(--courbe); }
.recit__visuel .rideau img:not(.est-actif) { opacity: 0; }
@media (min-width: 961px) {
  .recit__fenetre { position: sticky; top: calc(var(--hauteur-entete) + 3vh); }
  html.js .recit__visuel .rideau { aspect-ratio: auto; height: min(64vh, 640px); }
  html:not(.js) .recit__fenetre { top: calc(var(--hauteur-entete) + 24px); }
}

/* Le ciel au-dessus de la photo : le soleil fait sa course de la cérémonie au dîner, puis la lune et les étoiles se
   lèvent pour la fête (scenes.js, --nuit de 0 à 1). */
.ciel { --nuit: 0; color: var(--or-moyen); }
.ciel > svg { display: block; width: 100%; height: auto; max-height: 92px; overflow: visible; }
/* Le soleil se couche : il disparaît sous l'horizon. */
.ciel__jour { overflow: hidden; }
.ciel__course { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 0.1 7; stroke-linecap: round; opacity: 0.9; }
.ciel__horizon { stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.ciel__halo { fill: #f1c27a; opacity: 0.16; }
.ciel__halo + .ciel__halo { opacity: 0.3; }
.ciel__disque { fill: #f6d59c; }
.ciel__etoiles circle { fill: #f7e7c4; opacity: var(--nuit); }
.ciel__lune { fill: #f3e2bb; opacity: var(--nuit); }
html[data-fond='nuit'] .ciel, html[data-fond='crepuscule'] .ciel { color: var(--or-clair); }
html:not(.js) .ciel { display: none; }

/* ---------- Les jours : piste horizontale (ordinateur) ou frise verticale ---------- */

.deroule { position: relative; overflow: hidden; }
.deroule__piste { display: flex; gap: clamp(18px, 2.4vw, 34px); width: max-content; padding-right: var(--gouttiere); }
.jour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 30px;
  align-items: center;
  width: min(920px, 78vw);
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--rayon);
  background: var(--carte);
  border: 1px solid var(--filet);
}
.jour__media { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sable); }
.jour__media img { width: 100%; height: 100%; object-fit: cover; }
.jour__corps { display: grid; gap: 14px; }
.jour__nom { font-family: var(--f-plume); font-size: clamp(3rem, 2.2rem + 2vw, 4.2rem); line-height: 0.85; color: var(--or); }
.jour ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.jour li { position: relative; padding-left: 24px; line-height: 1.55; }
.jour li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--or); }
.jour li strong { color: var(--titre); font-weight: 600; }
.deroule__progres { position: relative; height: 1px; margin-top: 30px; background: var(--filet); overflow: hidden; }
.deroule__remplissage { position: absolute; inset: 0; background: var(--dore); transform: scaleX(0); transform-origin: 0 50%; }
.jour__media { transition: opacity 0.6s var(--courbe); }
html.js:not(.mouvement-reduit) .jour:not(.est-actif) .jour__media { opacity: 0.4; }
html:not(.js) .deroule__piste, html.mouvement-reduit .deroule__piste { flex-direction: column; width: auto; padding-right: 0; }
html:not(.js) .jour, html.mouvement-reduit .jour { width: auto; }
html:not(.js) .deroule__progres, html.mouvement-reduit .deroule__progres { display: none; }

/* ---------- Les lieux, en cartes qui s'empilent ---------- */

.lieux { display: grid; gap: clamp(18px, 3vw, 32px); }
.carte-lieu {
  position: sticky;
  top: calc(var(--hauteur-entete) + 24px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: min(580px, 74vh);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--carte);
  box-shadow: var(--ombre);
  transform-origin: 50% 0;
}
.carte-lieu::after { content: ""; position: absolute; inset: 0; background: rgb(29 29 27 / var(--voile-carte, 0)); pointer-events: none; }
.carte-lieu__media { position: relative; background: var(--sable); }
.carte-lieu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-lieu__corps { display: grid; gap: 18px; align-content: center; padding: clamp(28px, 4.4vw, 64px); }
.carte-lieu__etiquette { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.carte-lieu h3 { font-family: var(--f-titre); font-weight: 300; font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.2rem); line-height: 1.02; color: var(--titre); }
.carte-lieu .pastilles { margin-top: 4px; }
html.mouvement-reduit .carte-lieu, html:not(.js) .carte-lieu { position: relative; top: auto; }

/* ---------- Pastilles ---------- */

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { padding: 7px 14px; border: 1px solid var(--filet); border-radius: 999px; color: var(--titre); font-size: 0.9rem; font-weight: 500; }

/* ---------- Ce qui est compris : des cases qui se cochent ---------- */

.compris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); }
.compris__bloc { display: grid; gap: 22px; align-content: start; padding: clamp(28px, 4vw, 52px); border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); }
.compris__bloc--libre { background: transparent; }
.coches { display: grid; gap: 15px; }
.coche { position: relative; display: flex; align-items: flex-start; gap: 16px; line-height: 1.5; }
.coche::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border: 1px solid var(--or);
  border-radius: 50%;
  background: no-repeat center / 13px 13px;
  transition: background-color 0.5s var(--courbe), border-color 0.5s var(--courbe);
}
.coche.est-coche::before, html:not(.js) .coche::before {
  background-color: var(--or);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.libres { display: grid; gap: 12px; }
.libres li { display: flex; gap: 14px; align-items: flex-start; }
.libres li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.66em; transform: rotate(45deg); background: var(--or-moyen); }

/* ---------- Distinctions : les récompenses, sans les badges ronds ---------- */

.distinctions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--filet); }
.distinction { display: grid; justify-items: center; align-content: center; gap: 10px; padding: clamp(26px, 3.4vw, 42px) 18px; text-align: center; border-left: 1px solid var(--filet); }
.distinction:first-child { border-left: 0; }
.distinction__laurier { width: 70px; height: 30px; color: var(--or-moyen); }
.distinction strong { font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.15; color: var(--titre); }
.distinction span { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texte-doux); }
a.distinction { text-decoration: none; transition: background-color 0.4s; }
a.distinction:hover { background: color-mix(in srgb, var(--carte) 70%, transparent); }

/* ---------- Questions : accordéon ---------- */

.questions { display: grid; border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  color: var(--titre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background:
    linear-gradient(var(--or), var(--or)) center / 12px 1px no-repeat,
    linear-gradient(var(--or), var(--or)) center / 1px 12px no-repeat;
  transition: transform 0.5s var(--courbe), border-color 0.3s;
}
.question[open] summary::after { transform: rotate(135deg); border-color: var(--or); }
.question__reponse { padding: 0 0 28px; max-width: 68ch; }
.question__reponse > * + * { margin-top: 0.8em; }
.question__reponse ul { padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Galerie et défilé de photos ---------- */

.galerie { columns: 3 260px; column-gap: clamp(12px, 1.6vw, 22px); }
.galerie > * { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 22px); }
.galerie button { display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--sable); cursor: zoom-in; }
.galerie img { width: 100%; transition: transform 1.1s var(--courbe); }
.galerie button:hover img { transform: scale(1.04); }
.defile { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile__liste { display: flex; gap: 16px; width: max-content; animation: defile 80s linear infinite; }
.defile__liste img { height: clamp(220px, 28vw, 360px); width: auto; border-radius: 4px; }
.defile:hover .defile__liste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- Visionneuse (photos en grand) ---------- */

dialog { color: inherit; }
.visionneuse {
  width: min(1240px, 100vw - 24px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: #141412;
  color: #ffffff;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
  overscroll-behavior: contain;
}
.visionneuse::backdrop { background: rgb(18 16 12 / 0.86); backdrop-filter: blur(4px); }
.visionneuse[open] { animation: ouvrir 0.5s var(--courbe); }
@keyframes ouvrir { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
.visionneuse__cadre { position: relative; display: grid; place-items: center; min-height: min(70vh, 760px); }
.visionneuse__cadre img { max-height: calc(100dvh - 120px); width: auto; margin-inline: auto; object-fit: contain; }
.visionneuse__pied { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; font-size: 0.9rem; color: #cfc8b8; }
.fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--encre);
}
.fermer svg { width: 20px; height: 20px; }
.fleche-galerie {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--encre);
}
.fleche-galerie svg { width: 20px; height: 20px; }
.fleche-galerie--prec { left: 12px; }
.fleche-galerie--prec svg { transform: scaleX(-1); }
.fleche-galerie--suiv { right: 12px; }
html.dialogue-ouvert, html.dialogue-ouvert body { overflow: hidden; }

/* ---------- Appel final ---------- */

.appel { display: grid; justify-items: center; text-align: center; gap: 28px; }
.appel .titre-2 { max-width: 16ch; }
/* Sur téléphone, « Demander… » et « Appelez-nous » l'un sous l'autre, de la même largeur. */
@media (max-width: 640px) { .appel .boutons { flex-direction: column; align-items: stretch; width: min(100%, 340px); } }

/* ---------- Pied de page ---------- */

.pied { position: relative; z-index: 1; padding: clamp(72px, 9vw, 120px) 0 28px; background: var(--nuit); color: #d6cfbf; overflow: hidden; }
.pied a { color: #ffffff; text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied__logo { display: block; width: clamp(200px, 22vw, 280px); margin: 0 auto clamp(48px, 6vw, 80px); }
.pied__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid rgb(255 255 255 / 0.1); }
.pied h2 { margin-bottom: 16px; font-family: var(--f-texte); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or-clair); }
.pied ul { display: grid; gap: 10px; }
.pied__reseaux { display: flex; gap: 10px; }
.pied__reseaux a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 50%; transition: border-color 0.3s, color 0.3s; }
.pied__reseaux a:hover { border-color: var(--or-clair); }
.pied__reseaux svg { width: 19px; height: 19px; }
.pied .langues { color: #ffffff; margin-top: 4px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px; margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.86rem; color: #a8a292; }
.pied__bas a { color: #d6cfbf; }

/* Barre du téléphone : appeler, et l'action principale de la page */
.barre-mobile { display: none; }

/* ---------- Chambres ---------- */

.hebergements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.carte-heb { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rayon); overflow: hidden; background: var(--carte); border: 1px solid var(--filet); }
.carte-heb__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sable); }
.carte-heb__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.carte-heb:hover .carte-heb__media img { transform: scale(1.05); }
.carte-heb__type { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 2px; background: rgb(251 250 246 / 0.94); color: var(--encre); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.carte-heb__corps { display: grid; gap: 12px; align-content: start; padding: 24px 24px 28px; }
.carte-heb h3 { font-family: var(--f-titre); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--titre); }
.carte-heb p { color: var(--texte); font-size: 1rem; }
.carte-heb .pastilles li { font-size: 0.84rem; padding: 5px 11px; }
.infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; background: var(--filet); }
.info { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 2.8vw, 36px); background: var(--carte); }
.info svg { width: 28px; height: 28px; color: var(--or); margin-bottom: 4px; }
.info h3 { font-family: var(--f-titre); font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--titre); }
.info p { color: var(--texte); font-size: 1rem; }

/* ---------- Contact et accès ---------- */

.contact-grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-cartes { display: grid; gap: 12px; }
.contact-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 18px; align-items: center; padding: 18px 22px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); color: var(--texte); text-decoration: none; transition: border-color 0.3s, transform 0.4s var(--courbe); }
a.contact-carte:hover { border-color: var(--or); transform: translateY(-2px); }
.contact-carte svg { grid-row: span 2; width: 24px; height: 24px; color: var(--or); }
.contact-carte strong { color: var(--titre); font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-carte span { color: var(--texte-doux); font-size: 0.93rem; }
.acces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.acces__bloc { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 2.8vw, 34px); border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); }
.acces__bloc svg { width: 30px; height: 30px; color: var(--or); }
.acces__bloc h3 { font-family: var(--f-titre); font-weight: 500; font-size: 1.6rem; color: var(--titre); }
.acces__bloc ul { display: grid; gap: 6px; padding-left: 1.1em; }
.plan { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--sable); height: clamp(320px, 40vw, 520px); }
.plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__bouton { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; width: 100%; padding: 20px; border: 0; text-align: center; color: var(--encre); background: var(--sable); }
.plan__bouton strong { font-family: var(--f-titre); font-size: 1.7rem; font-weight: 500; }
.plan__bouton svg { width: 36px; height: 36px; color: var(--or); }

/* ---------- Le formulaire de mariage : en étapes ---------- */

.formulaire { display: grid; gap: 22px; padding: clamp(24px, 3.6vw, 48px); border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); box-shadow: var(--ombre); }
.formulaire__etapes { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.formulaire__etapes li { flex: 1; display: grid; gap: 8px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-doux); }
.formulaire__etapes li::before { content: ""; height: 2px; background: var(--filet); transition: background-color 0.5s var(--courbe); }
.formulaire__etapes li.est-faite::before, .formulaire__etapes li[aria-current='step']::before { background: var(--or); }
.formulaire__etapes li[aria-current='step'] { color: var(--titre); }
.etape { display: grid; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.etape > legend { padding: 0; margin-bottom: 4px; font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.2rem); line-height: 1.1; color: var(--titre); }
html.interactif .etape:not(.est-active) { display: none; }
html.interactif .etape.est-active { animation: etape 0.6s var(--courbe); }
@keyframes etape { from { opacity: 0; transform: translateY(12px); } }
.formulaire__ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.champ { display: grid; gap: 8px; min-width: 0; }
.champ label, .champ > legend, .champ__titre { font-weight: 500; font-size: 0.98rem; color: var(--titre); }
.champ .facultatif { font-weight: 400; color: var(--texte-doux); }
.champ__aide { font-size: 0.88rem; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--filet);
  border-radius: 3px;
  background: var(--fond);
  color: var(--titre);
  font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.champ textarea { min-height: 132px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgb(188 142 79 / 0.2); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a67940' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 42px; }
.champ input[aria-invalid='true'], .champ select[aria-invalid='true'], .champ textarea[aria-invalid='true'] { border-color: #a4332b; }
.champ__erreur { color: #a4332b; font-size: 0.9rem; font-weight: 500; }
.champ__erreur:empty { display: none; }
fieldset.champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; font-weight: 400; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--titre); font-size: 0.98rem; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.choix span:hover { border-color: var(--or); }
.choix input:checked + span { border-color: var(--titre); background: var(--titre); color: var(--fond); }
.choix input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
/* Grandes cases à choisir (le type de célébration) */
.choix--cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choix--cartes span { display: grid; gap: 4px; align-content: center; justify-items: start; min-height: 88px; padding: 14px 16px; border-radius: 4px; text-align: left; line-height: 1.3; }
.choix--cartes span small { font-size: 0.84rem; color: var(--texte-doux); }
.choix--cartes input:checked + span small { color: color-mix(in srgb, var(--fond) 75%, transparent); }
.curseur { display: grid; gap: 10px; }
.curseur__valeur { font-family: var(--f-titre); font-size: 2.2rem; font-weight: 400; line-height: 1; color: var(--titre); font-variant-numeric: lining-nums tabular-nums; }
.curseur input[type='range'] { width: 100%; min-height: 36px; padding: 0; border: 0; background: transparent; accent-color: var(--or); box-shadow: none; }
.curseur__bornes { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--texte-doux); }
.formulaire__navigation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.formulaire__navigation .bouton--retour { border: 0; padding-inline: 0; min-height: 44px; }
.formulaire__navigation .bouton--retour:hover { background: none; color: var(--accent); }
.formulaire__recap { display: grid; gap: 4px; padding: 16px 18px; border-radius: 4px; background: var(--fond); font-size: 0.95rem; }
.formulaire__recap strong { color: var(--titre); font-weight: 600; }
.formulaire__pied { display: grid; gap: 12px; justify-items: start; }
.formulaire__note { font-size: 0.88rem; color: var(--texte-doux); }
.formulaire__message { padding: 16px 18px; border-radius: 4px; background: var(--sable); color: var(--encre); font-weight: 500; }
.formulaire__message:empty { display: none; }
.formulaire__message--erreur { background: #f6e3df; color: #7f231c; }
.apercu-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 4px; background: #f7ecd4; color: #5a4212; font-size: 0.9rem; line-height: 1.45; }
.formulaire__merci { display: grid; gap: 16px; justify-items: center; text-align: center; padding: clamp(20px, 4vw, 40px) 0; }
.formulaire__merci .titre-3 { max-width: 20ch; }

/* ---------- Mentions légales ---------- */

.legal { max-width: 780px; }
.legal h2 { margin: 2em 0 0.5em; font-family: var(--f-titre); font-weight: 400; font-size: 2rem; color: var(--titre); }
.legal p, .legal ul { margin-top: 0.7em; }
.legal ul { padding-left: 1.2em; }

/* ---------- États d'animation (le JavaScript fait apparaître) ---------- */

html.js [data-reveal],
html.js [data-reveal-cascade] > * { opacity: 0; }
html.js:not(.mouvement-reduit) [data-split] { visibility: hidden; }
html.js:not(.mouvement-reduit) [data-split].est-decoupe { visibility: visible; }
html.js:not(.mouvement-reduit) [data-photo] .rideau { opacity: 0; }
/* Le voile de soleil des photos (--soleil, --soleil-x : motion.js). */
[data-photo] .rideau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 247 232) 0%, rgb(248 221 170) 34%, rgb(236 196 128 / 0.55) 52%, rgb(236 196 128 / 0) 74%);
  background-size: 260% 100%;
  background-position: var(--soleil-x, 0%) 50%;
  mix-blend-mode: screen;
  opacity: var(--soleil, 0);
}
/* Les titres apparaissent mot à mot (le mot en écriture reste entier, pour garder son dégradé). */
[data-split] .mot { will-change: opacity, filter; }

/* Mouvement réduit : pas de mouvement (les couleurs du thème restent animées). */
html.mouvement-reduit *,
html.mouvement-reduit *::before,
html.mouvement-reduit *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.mouvement-reduit .defile__liste { animation: none; flex-wrap: wrap; width: auto; }
html.mouvement-reduit .defile { mask-image: none; -webkit-mask-image: none; }
html.mouvement-reduit .defile__liste > [aria-hidden='true'] { display: none; }
@media (prefers-reduced-motion: reduce) { .defile__liste { animation: none; } }

/* ---------- Grands écrans et tablettes ---------- */

@media (min-width: 901px) { .collant { position: sticky; top: calc(var(--hauteur-entete) + 30px); } }

@media (max-width: 1180px) {
  .logo__nom small { display: none; }
  .entete__in { gap: 16px; }
  .nav { gap: 16px; }
  .nav a { letter-spacing: 0.1em; }
  .entete__actions { gap: 10px; }
  .entete .bouton { padding-inline: 1.05em; letter-spacing: 0.12em; }
}
@media (max-width: 1080px) {
  .logo__nom { display: none; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .hebergements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --hauteur-entete: 70px; }
  .nav, .entete__actions .bouton { display: none; }
  .burger { display: block; }
  html:not(.interactif) .nav { display: flex; flex-wrap: wrap; }
  html:not(.interactif) .burger { display: none; }
  .logo img { width: 46px; }
  .logo__nom { display: block; font-size: 0.92rem; letter-spacing: 0.16em; }
  .duo, .recit, .contact-grille, .compris { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .portes { grid-template-columns: 1fr; }
  .porte { min-height: 380px; }
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fait:nth-child(3) { border-left: 0; }
  .fait:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .jour { grid-template-columns: 1fr; width: auto; }
  .deroule__piste { flex-direction: column; width: auto; padding-right: 0; }
  .deroule__progres { display: none; }
  .jour__media { aspect-ratio: 3 / 2; }
  .carte-lieu { grid-template-columns: 1fr; min-height: 0; }
  .carte-lieu__media { aspect-ratio: 16 / 10; }
  .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acces { grid-template-columns: 1fr; }
  .recit__visuel { max-width: 460px; }
  .collage > :nth-child(2) { margin-bottom: -8%; }
}

/* ---------- Téléphones ---------- */

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .ouverture { padding-bottom: 96px; }
  .ouverture__actions .bouton { flex: 1 1 100%; }
  .ouverture__film { bottom: 22px; }
  .ouverture__defiler { display: none; }
  .hebergements, .infos, .pied__grille, .distinctions { grid-template-columns: 1fr; }
  .distinction { border-left: 0; border-top: 1px solid var(--filet); }
  .distinction:first-child { border-top: 0; }
  .formulaire__ligne { grid-template-columns: 1fr; }
  .choix--cartes { grid-template-columns: 1fr; }
  .choix--cartes span { min-height: 64px; }
  .formulaire__etapes li { font-size: 0; gap: 0; }
  .fait { padding: 22px 10px; }
  .collage { grid-template-columns: repeat(6, 1fr); }
  .collage > :first-child { grid-column: 1 / 6; }
  .collage > :nth-child(2) { grid-column: 3 / 7; }
  .galerie { columns: 2; column-gap: 10px; }
  .galerie > * { margin-bottom: 10px; }
  .suggestion-langue { flex-wrap: wrap; bottom: 12px; padding: 14px 14px 14px 18px; }
  .suggestion-langue p { flex: 1 1 calc(100% - 60px); }

  /* La barre du bas : appeler, et l'action principale de la page. */
  .barre-mobile {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgb(244 242 236 / 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgb(39 39 36 / 0.1);
  }
  .barre-mobile .bouton { min-height: 50px; }
  .barre-mobile .bouton--trait { --b-texte: var(--encre); --b-bord: rgb(39 39 36 / 0.35); padding-inline: 16px; }
  html.js .barre-mobile { transition: transform 0.35s var(--courbe), visibility 0s; }
  html.js .barre-mobile:not(.est-visible) { transform: translateY(100%); visibility: hidden; transition: transform 0.35s var(--courbe), visibility 0s 0.35s; }
  .pied { padding-bottom: calc(28px + 80px); }
}

@media (max-width: 520px) {
  .logo { gap: 10px; }
  .logo__nom { font-size: 0.74rem; letter-spacing: 0.12em; line-height: 1.2; }
  .logo__nom > span { display: block; }
  .entete__actions { gap: 8px; }
}
@media (max-width: 420px) {
  .langues a, .langues span { min-width: 36px; padding: 0 8px; }
}
@media (max-width: 360px) {
  .logo__nom { display: none; }
  .faits { grid-template-columns: 1fr; }
  .fait { border-left: 0 !important; border-top: 1px solid var(--filet); }
  .fait:first-child { border-top: 0; }
  .barre-mobile { grid-template-columns: 1fr; }
  .barre-mobile .bouton--trait { display: none; }
}

/* ---------- Impression ---------- */

@media print {
  .entete, .progression, .barre-mobile, .menu-mobile, .ouverture__defiler, .suggestion-langue { display: none !important; }
  .ouverture { min-height: 0; color: #000; background: none; padding-top: 20px; }
  .ouverture__media { display: none; }
  .ouverture__titre, .ouverture .chapeau { color: #000; }
  html.js [data-reveal], html.js [data-reveal-cascade] > *, html.js [data-intro] { opacity: 1 !important; }
  html.js [data-split] { visibility: visible !important; }
}

/* ---------- Entrée du haut de page, en CSS : elle démarre dès le premier affichage, sans attendre les scripts
   (le texte et l'image comptent pour la vitesse mesurée par Google). Mouvement repris d'ONELLA. ---------- */
@keyframes m5f-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
/* Départ à 0,01 d'opacité (invisible à l'œil) : le texte compte comme affiché dès la première image pour Google. */
@keyframes m5f-titre { from { opacity: 0.01; filter: blur(8px); letter-spacing: 0.03em; } to { opacity: 1; filter: blur(0); } }
@keyframes m5f-monter { from { opacity: 0.01; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes m5f-entete { from { transform: translateY(-100%); } to { transform: none; } }
html.js:not(.mouvement-reduit) .ouverture__media > img, html.js:not(.mouvement-reduit) .ouverture__media > video { animation: m5f-zoom 3s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture__titre { animation: m5f-titre 1.4s 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture [data-intro] { animation: m5f-monter 1s 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture [data-intro='1'] { animation-delay: 0.1s; }
html.js:not(.mouvement-reduit) .ouverture [data-intro='3'] { animation-delay: 0.7s; }
html.js:not(.mouvement-reduit) .ouverture [data-intro='4'] { animation-delay: 0.85s; }
html.js:not(.mouvement-reduit) .ouverture [data-intro='5'] { animation-delay: 1s; }
html.js:not(.mouvement-reduit) .entete { animation: m5f-entete 1s 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

/* ---------- Ajouts : valeurs, scène du récit sans animation ---------- */
.valeurs { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--f-titre); font-size: 1.35rem; font-weight: 500; color: var(--titre); }
.valeurs li { display: inline-flex; align-items: center; gap: 22px; }
.valeurs li + li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--or-moyen); }
html:not(.js) [data-fond-scene='sable'] { background: var(--sable); --fond: var(--sable); --carte: var(--porcelaine); --filet: #cfc6ae; }

/* ---------- Autour du Mas ---------- */
.environs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2.2vw, 28px); }
.environ { display: grid; gap: 10px; align-content: start; }
.environ__media { aspect-ratio: 3 / 2; margin-bottom: 8px; border-radius: var(--rayon); overflow: hidden; background: var(--sable-fonce); }
.environ__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.environ:hover .environ__media img { transform: scale(1.05); }
.environ__distance { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.environ h3 { font-family: var(--f-titre); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--titre); }
.environ p:last-child { font-size: 1rem; }
.environs__suite { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 960px) { .environs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .environs { grid-template-columns: 1fr; } }

/* ---------- Mariages : formules et critères du devis ---------- */
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); max-width: 1040px; margin-inline: auto; }
.formule { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(30px, 4vw, 56px); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--carte); text-align: center; justify-items: center; }
.formule::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--or-moyen) 45%, transparent); border-radius: 3px; pointer-events: none; }
.formule__quand { font-family: var(--f-plume); font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); line-height: 0.9; color: var(--or); }
.formule h3 { font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.3rem); line-height: 1.1; color: var(--titre); }
.formule p:last-child { max-width: 38ch; color: var(--texte); }
.formules__note { margin: clamp(28px, 3vw, 40px) auto 0; max-width: 60ch; text-align: center; color: var(--texte-doux); }
.criteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.criteres li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); color: var(--titre); font-weight: 500; line-height: 1.3; }
.criteres span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sable); color: var(--or-profond); }
.criteres svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .formules, .criteres { grid-template-columns: 1fr; } }

/* ---------- Chiffres qui comptent, bien-être ---------- */
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; width: 100%; }
.chiffre { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--filet); }
.chiffre dd { display: grid; gap: 4px; margin: 0; }
.chiffre strong { font-family: var(--f-titre); font-weight: 300; font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); line-height: 1; color: var(--titre); font-variant-numeric: lining-nums tabular-nums; }
.chiffre span { color: var(--texte-doux); font-size: 0.98rem; line-height: 1.45; }
.bien-etre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.soin { display: grid; gap: 10px; align-content: start; }
.soin__media { aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: var(--rayon); overflow: hidden; background: var(--sable-fonce); }
.soin__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.soin:hover .soin__media img { transform: scale(1.05); }
.soin__lieu { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.soin h3 { font-family: var(--f-titre); font-weight: 500; font-size: 1.6rem; line-height: 1.1; color: var(--titre); }
.soin p:last-child { font-size: 1rem; }
@media (max-width: 1080px) { .bien-etre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bien-etre { grid-template-columns: 1fr; } .soin__media { aspect-ratio: 3 / 2; } }

/* ---------- Contact : case à cocher, haut de page plus court, adresse et carte ---------- */
.ouverture--courte { min-height: 68vh; min-height: 68svh; }
.case { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; color: var(--titre); cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0; accent-color: var(--or); flex: none; }
.adresse-plan { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.adresse-plan__texte { display: grid; gap: 14px; justify-items: start; }
.plan__bouton span { font-size: 0.92rem; color: var(--texte-doux); max-width: 34ch; }
@media (max-width: 960px) { .adresse-plan { grid-template-columns: 1fr; } }

/* ---------- Spa (liste), mur de souvenirs, histoires des mariés, galerie ---------- */
.duo--haut { align-items: start; }
.soins { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.soins .soin { gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.soins .soin h3 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem); }
.mur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: clamp(10px, 1.4vw, 18px); }
.mur > button { position: relative; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--nuit-carte); cursor: zoom-in; }
.mur > button:nth-child(1) { grid-row: span 2; }
.mur > button:nth-child(4) { grid-row: span 2; }
.mur > button:nth-child(3) { grid-column: span 2; }
.mur > button:nth-child(6) { grid-column: span 2; }
.mur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe), opacity 0.6s; }
.mur > button:hover img { transform: scale(1.05); }
.mur__suite { margin: clamp(28px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); text-align: center; }
/* Accueil : les photos de nuit s'allument l'une après l'autre (scenes.js, --eteint et --eclat). */
[data-guirlande] > *::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0e0d0b; opacity: var(--eteint, 0); pointer-events: none; }
[data-guirlande] > *::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 42%, rgb(255 230 180 / 0.95), rgb(244 205 145 / 0.4) 45%, rgb(244 205 145 / 0) 78%);
  mix-blend-mode: screen;
  opacity: var(--eclat, 0);
  pointer-events: none;
}
html.js:not(.mouvement-reduit) [data-guirlande].est-eteint > * { --eteint: 0.9; }
.histoires { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(56px, 7vw, 96px); }
.histoire { display: grid; gap: 8px; align-content: start; }
.histoire__couverture { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 10px; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; background: var(--nuit-carte); cursor: zoom-in; }
.histoire__couverture img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.histoire__couverture:hover img { transform: scale(1.05); }
.histoire__nombre { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 2px; background: rgb(29 29 27 / 0.72); color: #ffffff; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.histoire h3 { font-family: var(--f-titre); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--titre); }
.histoire p { font-size: 0.95rem; color: var(--texte-doux); }
.galerie-titre { margin: clamp(56px, 7vw, 96px) 0 clamp(22px, 3vw, 34px); }
.distinction svg { width: 70px; height: 30px; color: var(--or-moyen); }
.distinction span { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--texte-doux); }
@media (max-width: 960px) { .histoires { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; } .mur > button:nth-child(n) { grid-column: auto; grid-row: auto; } .mur > button:nth-child(1), .mur > button:nth-child(6) { grid-column: span 2; } }
@media (max-width: 520px) { .histoires { grid-template-columns: 1fr; } }

/* Hauts de page intérieurs : un voile à gauche, sous le titre, pour la lisibilité sur les photos claires. */
.ouverture--page .ouverture__media::after {
  background:
    linear-gradient(180deg, rgb(18 16 12 / 0.42) 0%, rgb(18 16 12 / 0) 30%),
    linear-gradient(0deg, rgb(18 16 12 / 0.78) 0%, rgb(18 16 12 / 0.3) 45%, rgb(18 16 12 / 0) 70%),
    linear-gradient(90deg, rgb(18 16 12 / 0.55) 0%, rgb(18 16 12 / 0.25) 45%, rgb(18 16 12 / 0) 70%);
}
@media (max-width: 640px) {
  .ouverture__etoiles { flex-direction: column; gap: 8px; text-align: center; line-height: 1.6; letter-spacing: 0.2em; }
}
@media (max-width: 640px) {
  .barre-mobile .bouton { letter-spacing: 0.12em; padding-inline: 1em; }
}
@media (max-width: 960px) {
  .recit__visuel { max-width: none; }
  .recit__visuel .rideau { aspect-ratio: 4 / 3; }
  .recit { gap: 22px; }
  /* Téléphone et tablette : la photo et son ciel restent en haut de l'écran, les moments défilent dessous. */
  html.js .recit__fenetre {
    position: sticky;
    top: 10px;
    z-index: 2;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 6px var(--gouttiere) 14px;
    background: var(--fond);
    transition: top 0.5s var(--courbe);
  }
  html.js body:has(.entete:not(.cache)) .recit__fenetre { top: calc(var(--hauteur-entete) + 6px); }
  html.js .recit__visuel .rideau { aspect-ratio: auto; height: min(32vh, 300px); height: min(32svh, 300px); }
  .ciel > svg { max-height: 54px; }
  html.js .recit__phrase { min-height: 50vh; min-height: 50svh; }
  html.js .recit__phrase:last-child { margin-bottom: 10vh; }
}
html.menu-ouvert .suggestion-langue, html.dialogue-ouvert .suggestion-langue { display: none; }

/* Accueil : un voile sur la vidéo et l'image d'attente, pour que le texte blanc se lise sur les plans clairs
   (allée de gravier, ciel, enseigne du bar). Demande de Rachid, 01/10/2026. */
.ouverture:not(.ouverture--page) .ouverture__media::after {
  background:
    linear-gradient(rgb(18 16 12 / 0.3), rgb(18 16 12 / 0.3)),
    linear-gradient(180deg, rgb(18 16 12 / 0.4) 0%, rgb(18 16 12 / 0) 30%),
    linear-gradient(0deg, rgb(18 16 12 / 0.75) 0%, rgb(18 16 12 / 0.3) 45%, rgb(18 16 12 / 0) 70%),
    radial-gradient(ellipse 60% 55% at 50% 58%, rgb(18 16 12 / 0.3), rgb(18 16 12 / 0) 70%);
}

/* Accueil sur téléphone : tout le haut de page, jusqu'au bouton « Voir le film du domaine », tient dans l'écran,
   même avec la barre de Safari en bas (iPhone, environ 390 × 617). Demande de Rachid, 01/10/2026. */
@media (max-width: 640px) {
  .ouverture:not(.ouverture--page) { align-content: end; padding-top: calc(var(--hauteur-entete) + 16px); padding-bottom: 18px; }
  .ouverture:not(.ouverture--page) .ouverture__contenu { gap: 14px; }
  .ouverture:not(.ouverture--page) .ouverture__etoiles { display: block; text-align: center; }
  .ouverture:not(.ouverture--page) .ouverture__etoiles .etoiles { display: inline-flex; margin-right: 8px; vertical-align: 1px; }
  .ouverture:not(.ouverture--page) .ouverture__titre { font-size: clamp(2.05rem, 1rem + 5vw, 2.4rem); line-height: 1; }
  .ouverture:not(.ouverture--page) .chapeau { font-size: 1rem; line-height: 1.48; }
  .ouverture:not(.ouverture--page) .ouverture__actions { margin-top: 4px; gap: 10px; }
  .ouverture:not(.ouverture--page) .ouverture__actions .bouton { min-height: 48px; }
  /* Le film : dans le fil du contenu, centré sous les boutons (plus en bas à gauche, où la barre de Safari le cachait). */
  .ouverture:not(.ouverture--page) .ouverture__film { position: static; justify-self: center; margin-top: 12px; }
}

/* Petits iPhone (SE, mini) avec la barre de Safari en bas : on resserre un peu pour que le film tienne aussi. */
@media (max-width: 640px) and (max-height: 600px) {
  .ouverture:not(.ouverture--page) { padding-top: calc(var(--hauteur-entete) + 8px); padding-bottom: 14px; }
  .ouverture:not(.ouverture--page) .ouverture__contenu { gap: 10px; }
  .ouverture:not(.ouverture--page) .ouverture__actions .bouton { min-height: 44px; }
  .ouverture:not(.ouverture--page) .ouverture__film { margin-top: 8px; }
}

/* « Voir le film du domaine » : une pastille, avec la lecture en rond doré, pour qu'on la remarque (Rachid, 01/10/2026). */
.ouverture__film { padding: 5px 18px 5px 5px; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 999px; background: rgb(18 16 12 / 0.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; transition: background-color 0.4s, border-color 0.4s; }
.ouverture__film span { width: 36px; height: 36px; border: 0; background: var(--dore-bouton); color: var(--encre); }
.ouverture__film small { opacity: 0.8; }
.ouverture__film:hover { background: rgb(18 16 12 / 0.6); border-color: rgb(255 255 255 / 0.75); }
.ouverture__film:hover span { background: #ffffff; }