/* Château de Picomtal — styles du site.
   Couleurs tirées de la charte du site actuel et du logo : bleu ardoise des toits, bleu ciel du disque du logo,
   bordeaux de l'écriture manuscrite. Polices : Cormorant Garamond (titres, comme les capitales du logo), Noto Sans
   (texte, police du site actuel), Babylonica (le mot mis en valeur, police manuscrite du site actuel). */

/* Polices hébergées sur le site (fichiers « latin » de Google Fonts, licence SIL Open Font License, 29/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: "Noto Sans"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("../fonts/noto-sans.woff2") format("woff2"); }
@font-face { font-family: "Babylonica"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/babylonica.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: #f6f7f9; }
@property --titre { syntax: '<color>'; inherits: true; initial-value: #231f20; }
@property --texte { syntax: '<color>'; inherits: true; initial-value: #423b3c; }
@property --texte-doux { syntax: '<color>'; inherits: true; initial-value: #6b6263; }
@property --filet { syntax: '<color>'; inherits: true; initial-value: #dcdfe3; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #33627b; }
@property --plume { syntax: '<color>'; inherits: true; initial-value: #924443; }
@property --carte { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

:root {
  --lin: #f6f7f9;
  --blanc: #ffffff;
  --brume: #e6eff5;
  --ciel: #b4d7ed;
  --ardoise: #467a97;
  --ardoise-fonce: #33627b;
  --bordeaux: #924443;
  --bordeaux-fonce: #7a3534;
  --vieux-rose: #dda3a1;
  --nuit: #1b2830;
  --nuit-2: #22323b;
  --encre: #231f20;

  --f-titre: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-texte: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-plume: "Babylonica", "Brush Script MT", cursive;

  --gouttiere: clamp(18px, 5vw, 56px);
  --page: min(1240px, 100% - 2 * var(--gouttiere));
  --espace-section: clamp(76px, 11vw, 150px);
  --hauteur-entete: 78px;
  --rayon: 22px;
  --rayon-petit: 12px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ombre: 0 18px 50px -24px rgb(27 40 48 / 0.35);
}

/* Thème porté par <html data-fond>, changé par motion.js selon la section au milieu de l'écran. */
html {
  --fond: var(--lin);
  --titre: var(--encre);
  --texte: #423b3c;
  --texte-doux: #6b6263;
  --filet: #dcdfe3;
  --accent: var(--ardoise-fonce);
  --plume: var(--bordeaux);
  --carte: var(--blanc);
  transition: --fond 0.8s ease, --titre 0.8s ease, --texte 0.8s ease, --texte-doux 0.8s ease, --filet 0.8s ease,
    --accent 0.8s ease, --plume 0.8s ease, --carte 0.8s ease;
}
html[data-fond='blanc'] { --fond: var(--blanc); --carte: var(--lin); }
html[data-fond='brume'] { --fond: var(--brume); --carte: #f8fbfd; --filet: #cbdbe6; }
html[data-fond='nuit'] {
  --fond: var(--nuit);
  --titre: #f4f6f8;
  --texte: #d5dde2;
  --texte-doux: #a3b1ba;
  --filet: #33434d;
  --accent: var(--ciel);
  --plume: var(--vieux-rose);
  --carte: var(--nuit-2);
}

/* Sans animation (ou sans JavaScript), chaque section porte son propre fond. */
html:not(.js) [data-fond='blanc'] { background: var(--blanc); --fond: var(--blanc); --carte: var(--lin); }
html:not(.js) [data-fond='brume'] { background: var(--brume); --fond: var(--brume); --carte: #f8fbfd; --filet: #cbdbe6; }
html:not(.js) [data-fond='lin'] { background: var(--lin); --fond: var(--lin); }
html:not(.js) [data-fond='nuit'] {
  background: var(--nuit);
  --fond: var(--nuit);
  --titre: #f4f6f8;
  --texte: #d5dde2;
  --texte-doux: #a3b1ba;
  --filet: #33434d;
  --accent: var(--ciel);
  --plume: var(--vieux-rose);
  --carte: var(--nuit-2);
  color: var(--texte);
}

/* ---------- 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); }
/* Fenêtre ouverte (page bloquée) sur un ordinateur où la barre de défilement est toujours visible : la barre disparaît,
   sa largeur (--barre-cachee, mesurée par site.js) est rendue à la page et aux éléments fixes, qui ne sautent plus de
   côté derrière la fenêtre (25/10/2026). */
html.dialogue-ouvert { padding-right: var(--barre-cachee, 0px); }
html.dialogue-ouvert .entete, html.dialogue-ouvert .progression, html.dialogue-ouvert .barre-mobile { right: var(--barre-cachee, 0px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.68;
  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.2em; 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(--ardoise); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ciel); color: var(--encre); }
.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(--blanc); color: var(--encre); border-radius: 8px;
}
.sans-coupure { white-space: nowrap; }
.sans-coupure .mot--groupe { white-space: normal; }

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

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

.titre-1, .titre-2, .titre-3, .titre-4 {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--titre);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.titre-1 { font-size: clamp(2.55rem, 1.15rem + 5.3vw, 5.5rem); line-height: 1.02; }
.titre-2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.05; }
.titre-3 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem); line-height: 1.12; }
.titre-4 { font-size: 1.35rem; line-height: 1.2; }

/* Le mot mis en valeur : l'écriture manuscrite bordeaux du site actuel. */
.plume {
  font-family: var(--f-plume);
  font-weight: 400;
  font-size: 1.28em;
  line-height: 0.8;
  letter-spacing: 0;
  /* L'espace de Babylonica est très étroit : « mille ans » se lisait « milleans ». */
  word-spacing: 0.12em;
  color: var(--plume);
  padding-inline: 0.03em 0.08em;
}
/* Classes posées à la construction (construire.mjs, plumes) : un groupe de mots manuscrits reste sur une ligne ;
   suivi d'une virgule, le mot n'a plus de marge à droite. */
.plume--groupe, .sans-coupure .plume--groupe { white-space: nowrap; }
.plume--ponctuee { padding-inline-end: 0; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-wrap: balance;
}
.surtitre::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
.surtitre--clair { color: #ffffff; }
.chapeau { font-size: clamp(1.12rem, 1rem + 0.45vw, 1.32rem); line-height: 1.6; color: var(--texte); max-width: 60ch; }
.texte > * + * { margin-top: 1em; }
.texte { max-width: 66ch; }
.texte strong { color: var(--titre); font-weight: 600; }
.doux { color: var(--texte-doux); }
.petit { font-size: 0.92rem; line-height: 1.55; }
.credit { font-size: 0.78rem; color: var(--texte-doux); letter-spacing: 0.02em; }

.section-tete { display: grid; gap: 20px; margin-bottom: clamp(38px, 5vw, 68px); max-width: 860px; }
.section-tete--centre { margin-inline: auto; text-align: center; justify-items: center; }
.section-tete .chapeau { color: var(--texte-doux); }

/* ---------- 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: 10px;
  min-height: 50px;
  padding: 0.85em 1.55em;
  border: 1.5px solid var(--b-bord);
  border-radius: 999px;
  background: var(--b-fond);
  color: var(--b-texte);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  /* Un bouton trop étroit passe sur deux lignes égales (« Organiser / votre mariage » sur téléphone). */
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 0.35s var(--courbe), color 0.35s var(--courbe), border-color 0.35s var(--courbe), transform 0.35s var(--courbe);
}
.bouton:hover { text-decoration: none; }
.bouton svg { flex: none; width: 18px; height: 18px; }
.bouton--principal { --b-fond: var(--bordeaux); --b-texte: #ffffff; --b-bord: var(--bordeaux); }
.bouton--principal:hover { --b-fond: var(--bordeaux-fonce); --b-bord: var(--bordeaux-fonce); }
.bouton--secondaire { --b-texte: var(--titre); --b-bord: var(--titre); }
.bouton--secondaire:hover { --b-fond: var(--titre); --b-texte: var(--fond); }
.bouton--clair { --b-texte: #ffffff; --b-bord: rgb(255 255 255 / 0.75); background: rgb(20 30 36 / 0.12); backdrop-filter: blur(6px); }
.bouton--clair:hover { --b-fond: #ffffff; --b-texte: var(--encre); --b-bord: #ffffff; }
/* Haut de l'accueil (25/10/2026, demande d'Asia) : quatre boutons, chacun de sa couleur, tirées de la charte. */
.bouton--ardoise { --b-fond: var(--ardoise); --b-texte: #ffffff; --b-bord: var(--ardoise); }
.bouton--ardoise:hover { --b-fond: var(--ardoise-fonce); --b-bord: var(--ardoise-fonce); }
.bouton--ciel { --b-fond: var(--ciel); --b-texte: var(--nuit); --b-bord: var(--ciel); }
.bouton--ciel:hover { --b-fond: #ffffff; --b-bord: #ffffff; }
.bouton--petit { min-height: 42px; padding: 0.6em 1.15em; font-size: 0.9rem; }
.bouton--large { width: 100%; }
/* 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.5s var(--courbe); }
.bouton__texte > span + span { transform: translateY(110%); }
@media (hover: hover) {
  .bouton:hover .bouton__texte > span:first-child { transform: translateY(-110%); }
  .bouton:hover .bouton__texte > span + span { transform: translateY(0); }
}
.boutons { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--titre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 4px;
  transition: border-color 0.3s, gap 0.3s var(--courbe);
}
.lien-fleche svg { width: 18px; height: 18px; transition: transform 0.35s var(--courbe); }
.lien-fleche:hover { border-color: currentColor; text-decoration: none; }
.lien-fleche:hover svg { transform: translateX(4px); }

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

.progression {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: var(--bordeaux);
  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(246 247 249 / 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgb(35 31 32 / 0.08);
  transition: transform 0.45s var(--courbe), background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
html[data-fond='nuit'] .entete:not(.sur-photo) { background: rgb(27 40 48 / 0.88); color: #f4f6f8; border-color: rgb(255 255 255 / 0.08); }
.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 -40px;
  z-index: -1;
  background: linear-gradient(rgb(12 20 25 / 0.5), transparent);
  pointer-events: none;
}
.entete.cache { transform: translateY(-100%); }
.entete__in { display: flex; align-items: center; gap: 24px; height: 100%; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.logo img { width: 54px; height: 54px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.12)); }
.logo__nom {
  display: grid;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.logo__nom small { font-family: var(--f-texte); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.16em; opacity: 0.8; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav a {
  position: relative;
  color: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 8px;
}
/* Sur une ligne dès que le menu s'affiche en entier (sans script, sur téléphone, il peut passer à la ligne). */
@media (min-width: 901px) { .nav a { white-space: nowrap; } }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--courbe);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: 0 50%; }
.langues { display: flex; align-items: center; gap: 2px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; }
.langues a, .langues span { padding: 6px 7px; color: inherit; text-decoration: none; border-radius: 6px; }
.langues span[aria-current] { opacity: 1; }
.langues a { opacity: 0.62; }
.langues a:hover { opacity: 1; }
.langues span + a::before, .langues a + span::before { content: none; }
.entete__actions { display: flex; align-items: center; gap: 14px; }
.entete .bouton--principal { min-height: 44px; padding: 0.6em 1.25em; font-size: 0.92rem; }
.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.6px; 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) + 18px) var(--gouttiere) 28px;
  background: var(--nuit);
  color: #f4f6f8;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--courbe), visibility 0s 0.4s;
}
.menu-mobile.ouvert { visibility: visible; opacity: 1; transition: opacity 0.4s var(--courbe), visibility 0s; }
.menu-mobile nav { display: grid; margin-bottom: 28px; }
.menu-mobile nav a {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  color: inherit;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  line-height: 1.1;
  text-decoration: none;
}
.menu-mobile nav a small { font-family: var(--f-texte); font-size: 0.85rem; font-weight: 500; line-height: 1.35; color: #a3b1ba; letter-spacing: 0.01em; }
.menu-mobile nav a[aria-current='page'] { color: var(--vieux-rose); }
.menu-mobile .boutons { margin-bottom: 26px; }
.menu-mobile .bouton { flex: 1 1 220px; }
.menu-mobile .bouton--secondaire { --b-texte: #ffffff; --b-bord: rgb(255 255 255 / 0.7); }
.menu-mobile__contact { display: grid; gap: 6px; margin-top: auto; color: #d5dde2; }
.menu-mobile__contact a { color: #ffffff; text-decoration: none; font-weight: 600; }
.menu-mobile .langues { margin-top: 18px; font-size: 0.95rem; }
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

/* ---------- Haut de page : la photo, puis la section suivante monte par-dessus en arche ---------- */

.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(56px, 9vh, 96px);
  color: #ffffff;
  isolation: isolate;
  background: var(--nuit);
  /* La photo grandit un peu en se refermant (scenes.js) : elle ne doit pas déborder sur les côtés. Le overflow-x de
     body ne suffit pas sur téléphone et tablette : la page s'élargissait (390 → 400 px), avec l'en-tête et la barre du
     bas (repasse du 25/10/2026). */
  overflow-x: clip;
}
.ouverture--page { min-height: 88vh; min-height: 88svh; }
.ouverture__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ouverture__media img { 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(12 20 25 / 0.35) 0%, rgb(12 20 25 / 0) 28%),
    linear-gradient(0deg, rgb(12 20 25 / 0.78) 0%, rgb(12 20 25 / 0.35) 38%, rgb(12 20 25 / 0) 62%),
    linear-gradient(90deg, rgb(12 20 25 / 0.4) 0%, rgb(12 20 25 / 0) 60%);
}
.ouverture__contenu { display: grid; gap: 22px; justify-items: start; }
.ouverture__titre { color: #ffffff; max-width: 15ch; }
.ouverture--page .ouverture__titre { max-width: 17ch; }
.ouverture__titre .plume { color: #f1d3d1; }
.ouverture .chapeau { color: rgb(255 255 255 / 0.92); max-width: 50ch; }
.ouverture__actions { margin-top: 8px; }
.ouverture__defiler {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(56px, 9vh, 96px);
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-rl;
}
.ouverture__defiler::after { content: ""; width: 1px; height: 64px; 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; left: var(--gouttiere); bottom: 16px; color: rgb(255 255 255 / 0.72); font-size: 0.72rem; }

/* La section qui monte par-dessus la photo : une arche, comme les voûtes du château. */
.suite { padding-top: clamp(64px, 8vw, 110px); }
html.js:not(.mouvement-reduit) .suite {
  margin-top: -1px;
  border-top-left-radius: 50% clamp(34px, 6vw, 86px);
  border-top-right-radius: 50% clamp(34px, 6vw, 86px);
}

/* Les chiffres clés, sous le haut de page */
.faits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.fait { display: grid; gap: 4px; padding: 26px 22px; border-left: 1px solid var(--filet); }
.fait dd { display: grid; gap: 4px; margin: 0; }
.fait:first-child { border-left: 0; padding-left: 0; }
.fait strong { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; color: var(--titre); }
.fait span { color: var(--texte-doux); font-size: 0.95rem; line-height: 1.4; }

/* ---------- Photos : dévoilement en rideau ---------- */

.photo { position: relative; margin: 0; }
.photo .rideau { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--brume); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage-photo, 50% 50%); }
.photo figcaption { margin-top: 10px; }
.photo--arche .rideau { border-radius: 999px 999px var(--rayon) var(--rayon); }
.photo--portrait .rideau { aspect-ratio: 4 / 5; }
.photo--paysage .rideau { aspect-ratio: 3 / 2; }
.photo--large .rideau { aspect-ratio: 16 / 9; }

/* ---------- Accueil : les trois portes ---------- */

.portes {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(14px, 2vw, 24px);
}
.porte {
  position: relative;
  display: grid;
  min-height: 300px;
  border-radius: var(--rayon);
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
  background: var(--nuit);
}
.porte--grande { grid-row: span 2; min-height: 620px; }
.porte__media { position: absolute; inset: 0; z-index: -1; }
.porte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.porte__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(12 20 25 / 0.9) 0%, rgb(12 20 25 / 0.55) 45%, rgb(12 20 25 / 0.12) 80%, rgb(12 20 25 / 0.05) 100%); }
.porte:hover .porte__media img { transform: scale(1.05); }
.porte__corps { align-self: end; display: grid; gap: 10px; padding: clamp(22px, 3vw, 36px); }
.porte__etiquette { font-family: var(--f-titre); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ciel); }
.porte h3 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.05; color: #ffffff; }
.porte--grande h3 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.5rem); }
.porte p { color: rgb(255 255 255 / 0.88); max-width: 42ch; }
.porte__lien { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 600; }
.porte__lien svg { width: 20px; height: 20px; transition: transform 0.4s var(--courbe); }
.porte:hover .porte__lien svg { transform: translateX(5px); }
/* Quatre portes de même taille (25/10/2026) : chambres, mariages, visites, événements. */
.portes--quatre { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
.portes--quatre .porte { min-height: clamp(300px, 32vw, 430px); }

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

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.duo--inverse > :first-child { order: 2; }
.duo__texte { display: grid; gap: 24px; 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: -12%; z-index: 1; }
.collage > :nth-child(2) .rideau { box-shadow: var(--ombre); border: 6px solid var(--fond); }

/* Chiffres qui comptent */
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin-top: 10px; }
.chiffre { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--filet); }
.chiffre strong { font-family: var(--f-titre); font-weight: 600; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.8rem); line-height: 1; color: var(--titre); font-variant-numeric: lining-nums tabular-nums; }
.chiffre span { color: var(--texte-doux); font-size: 0.97rem; line-height: 1.45; }

/* ---------- Scène épinglée : mille ans d'histoire, une date à la fois ---------- */

.histoire { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.histoire__visuel { position: relative; }
.histoire__visuel .rideau { aspect-ratio: 4 / 5; }
.histoire__liste { display: grid; }
.histoire__phrase { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; }
.histoire__date { font-family: var(--f-titre); font-weight: 600; font-size: clamp(3.4rem, 2rem + 5vw, 6.6rem); line-height: 0.95; color: var(--plume); font-variant-numeric: lining-nums; }
.histoire__phrase p { font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.22; color: var(--titre); max-width: 26ch; }
.histoire__jalons { display: flex; gap: 8px; margin-top: 28px; }
.histoire__jalons span { width: 28px; height: 3px; border-radius: 3px; background: var(--filet); transition: background-color 0.4s, width 0.4s var(--courbe); }
.histoire__jalons span.est-actif { width: 48px; background: var(--plume); }
.histoire__suite { margin-top: 32px; }
/* Avec animation, une seule date à la fois ; sans animation, toutes les dates l'une sous l'autre. */
html.js:not(.mouvement-reduit) .histoire__phrase { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--courbe), transform 0.8s var(--courbe); }
html.js:not(.mouvement-reduit) .histoire__phrase.est-actif { opacity: 1; transform: none; }
html:not(.js) .histoire__phrase, html.mouvement-reduit .histoire__phrase { grid-area: auto; padding-block: 18px; border-top: 1px solid var(--filet); }
html:not(.js) .histoire__jalons, html.mouvement-reduit .histoire__jalons { display: none; }
html.defilement-bloque, html.defilement-bloque body { overscroll-behavior: none; touch-action: none; }

/* ---------- Rail des chambres (accueil) ---------- */

.rail { position: relative; }
.rail__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30%);
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--filet) transparent;
}
.rail__piste > * { scroll-snap-align: start; }
.rail__commandes { display: flex; gap: 10px; }
.rail__bouton {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--filet);
  border-radius: 50%;
  background: transparent;
  color: var(--titre);
  transition: border-color 0.3s, background-color 0.3s;
}
.rail__bouton:hover { border-color: var(--titre); }
.rail__bouton:disabled { opacity: 0.35; cursor: default; }
.rail__bouton svg { width: 20px; height: 20px; }
.rail__bouton--prec svg { transform: scaleX(-1); }
.entete-rail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(30px, 4vw, 52px); }
.entete-rail .section-tete { margin-bottom: 0; }

/* Carte d'une chambre */
.carte-chambre {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--carte);
  color: var(--texte);
  box-shadow: 0 1px 0 rgb(35 31 32 / 0.04);
}
.carte-chambre__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brume); }
.carte-chambre__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--courbe); }
.carte-chambre:hover .carte-chambre__media img { transform: scale(1.05); }
.carte-chambre__type {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--encre);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Le bouton « Voir la chambre » se cale en bas de la carte : alignés d'une carte à l'autre, quelle que soit la longueur
   du texte (25/10/2026). */
.carte-chambre__corps { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
.carte-chambre h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.7rem; line-height: 1.08; color: var(--titre); }
.carte-chambre__infos { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texte-doux); font-size: 0.92rem; }
.carte-chambre__infos span { display: inline-flex; align-items: center; gap: 6px; }
.carte-chambre__infos svg { width: 17px; height: 17px; color: var(--accent); }
.carte-chambre__prix { color: var(--titre); font-weight: 600; }
.carte-chambre p { color: var(--texte); font-size: 0.97rem; }
.carte-chambre__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.carte-chambre .bouton { min-height: 44px; padding: 0.6em 1.1em; font-size: 0.9rem; }
a.carte-chambre { text-decoration: none; }

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

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li {
  padding: 8px 16px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--carte);
  color: var(--titre);
  font-size: 0.93rem;
  font-weight: 500;
}

/* ---------- Avis ---------- */

.avis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: clamp(26px, 4vw, 40px); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--carte); }
.avis p { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem); line-height: 1.2; color: var(--titre); max-width: 30ch; }

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

.appel { display: grid; justify-items: center; text-align: center; gap: 26px; }
.appel .titre-2 { max-width: 17ch; }
.appel__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1;
  color: var(--titre);
  text-decoration: none;
  white-space: nowrap;
}
.appel__tel svg { width: 0.7em; height: 0.7em; color: var(--plume); }
.appel__tel:hover { color: var(--plume); }

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

.pied { position: relative; z-index: 1; padding: clamp(64px, 8vw, 104px) 0 28px; background: var(--nuit); color: #d5dde2; overflow: hidden; }
.pied a { color: #ffffff; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pied__marque { display: grid; gap: 16px; align-content: start; justify-items: start; }
.pied__marque img { width: 92px; height: 92px; }
.pied__marque p { max-width: 34ch; }
.pied h2 { margin-bottom: 14px; font-family: var(--f-titre); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ciel); }
.pied ul { display: grid; gap: 9px; }
.pied__reseaux { display: flex; gap: 10px; }
.pied__reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; }
.pied__reseaux a:hover { background: rgb(255 255 255 / 0.1); text-decoration: none; }
.pied__reseaux svg { width: 20px; height: 20px; }
.pied__geant {
  margin: clamp(48px, 7vw, 90px) 0 18px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: min(12.5rem, calc((100vw - 2 * var(--gouttiere)) / 6.6));
  line-height: 0.8;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgb(180 215 237 / 0.16);
  white-space: nowrap;
  user-select: none;
}
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.86rem; color: #a3b1ba; }
.pied__bas a { color: #d5dde2; }

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

/* ---------- Mariages : le week-end, jour par jour ---------- */

.deroule { position: relative; overflow: hidden; }
.deroule__piste { display: flex; gap: clamp(18px, 2.4vw, 32px); width: max-content; padding-right: var(--gouttiere); }
.jour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  width: min(900px, 78vw);
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--rayon);
  background: var(--carte);
}
.jour__media { border-radius: var(--rayon-petit); overflow: hidden; aspect-ratio: 4 / 5; background: var(--brume); }
.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(2.8rem, 2rem + 2vw, 3.8rem); line-height: 0.9; color: var(--plume); }
.jour ol { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: moment; }
.jour li { position: relative; padding-left: 26px; line-height: 1.55; }
.jour li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border: 1.5px solid var(--accent); border-radius: 50%; }
.jour li strong { color: var(--titre); font-weight: 600; }
.deroule__progres { position: relative; height: 2px; margin-top: 28px; background: var(--filet); border-radius: 2px; overflow: hidden; }
.deroule__remplissage { position: absolute; inset: 0; background: var(--plume); transform: scaleX(0); transform-origin: 0 50%; }
html.js:not(.mouvement-reduit) .jour:not(.est-actif) .jour__media { opacity: 0.4; }
.jour__media { transition: opacity 0.6s var(--courbe); }
/* Sans animation : les trois jours l'un sous l'autre. */
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; }

/* ---------- Mariages : les lieux, en cartes qui s'empilent ---------- */

.lieux { display: grid; gap: clamp(18px, 3vw, 30px); }
.carte-lieu {
  position: sticky;
  top: calc(var(--hauteur-entete) + 24px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: min(560px, 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(27 40 48 / var(--voile-carte, 0)); pointer-events: none; }
.carte-lieu__media { position: relative; background: var(--brume); }
.carte-lieu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-lieu__corps { display: grid; gap: 16px; align-content: center; padding: clamp(26px, 4vw, 56px); }
.carte-lieu__num { font-family: var(--f-titre); font-weight: 600; font-size: 1rem; letter-spacing: 0.2em; color: var(--accent); }
.carte-lieu h3 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.04; color: var(--titre); }
html.mouvement-reduit .carte-lieu, html:not(.js) .carte-lieu { position: relative; top: auto; }

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

.compris { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.compris__bloc { display: grid; gap: 20px; align-content: start; padding: clamp(26px, 4vw, 44px); border-radius: var(--rayon); background: var(--carte); }
.compris__bloc--libre { background: transparent; border: 1px solid var(--filet); }
.coches { display: grid; gap: 14px; }
.coche { position: relative; display: flex; align-items: flex-start; gap: 14px; line-height: 1.5; }
.coche::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: no-repeat center / 14px 14px;
  transition: background-color 0.45s var(--courbe), border-color 0.45s var(--courbe);
}
.coche.est-coche::before {
  background-color: var(--accent);
  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='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-fond='nuit'] .coche.est-coche::before { 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='%231b2830' stroke-width='3' 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: 8px; height: 8px; margin-top: 0.62em; border-radius: 50%; background: var(--plume); }

/* ---------- Tarifs : onglets et tableaux ---------- */

.onglets { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--filet); border-radius: 999px; background: var(--carte); margin-bottom: 28px; }
.onglets button {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.35s var(--courbe), color 0.35s var(--courbe);
}
.onglets button[aria-selected='true'] { background: var(--titre); color: var(--fond); }
.tarif { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: start; }
.tarif[hidden] { display: none; }
.tableau-conteneur { overflow-x: auto; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); }
.tableau-prix { width: 100%; border-collapse: collapse; min-width: 440px; font-variant-numeric: lining-nums tabular-nums; }
.tableau-prix caption { padding: 22px 24px 4px; text-align: left; font-family: var(--f-titre); font-weight: 600; font-size: 1.4rem; color: var(--titre); }
.tableau-prix th, .tableau-prix td { padding: 16px 24px; text-align: right; border-top: 1px solid var(--filet); }
.tableau-prix thead th { border-top: 0; font-size: 0.86rem; font-weight: 600; color: var(--texte-doux); letter-spacing: 0.02em; }
.tableau-prix th[scope='row'] { text-align: left; font-weight: 500; color: var(--titre); }
.tableau-prix td { font-family: var(--f-titre); font-weight: 600; font-size: 1.45rem; color: var(--titre); white-space: nowrap; }
.tableau-prix thead th:first-child { text-align: left; }
/* Sur téléphone, plus de tableau à faire glisser : chaque tranche d'invités devient une petite carte, avec ses mois et
   ses prix (le nom du mois vient de data-label). */
@media (max-width: 599.98px) {
  .tableau-conteneur { overflow: visible; }
  .tableau-conteneur .tableau-prix { min-width: 0; }
  .tableau-conteneur .tableau-prix, .tableau-prix tbody, .tableau-prix tr, .tableau-prix th, .tableau-prix td { display: block; }
  .tableau-conteneur .tableau-prix caption { display: block; padding: 20px 20px 4px; }
  .tableau-conteneur .tableau-prix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-conteneur .tableau-prix tr { padding: 14px 20px 16px; border-top: 1px solid var(--filet); }
  .tableau-conteneur .tableau-prix th[scope='row'] { padding: 0 0 6px; border-top: 0; font-size: 0.95rem; }
  .tableau-conteneur .tableau-prix td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0 0; border-top: 0; font-size: 1.2rem; }
  .tableau-conteneur .tableau-prix td::before { content: attr(data-label); font-family: var(--f-texte, inherit); font-weight: 400; font-size: 0.9rem; color: var(--texte-doux); }
}
.dates { display: grid; gap: 16px; padding: clamp(24px, 3vw, 34px); border-radius: var(--rayon); background: var(--nuit); color: #d5dde2; }
.dates h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.55rem; color: #ffffff; }
.dates ul { display: flex; flex-wrap: wrap; gap: 10px; }
.dates li { padding: 9px 15px; border: 1px solid rgb(180 215 237 / 0.4); border-radius: 999px; color: #ffffff; font-weight: 500; font-size: 0.95rem; }
.dates .petit { color: #a3b1ba; }

/* ---------- 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: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.2;
  color: var(--titre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--filet);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform 0.45s var(--courbe), border-color 0.3s;
}
.question[open] summary::after { transform: rotate(135deg); border-color: currentColor; }
.question__reponse { padding: 0 0 26px; max-width: 70ch; }
.question__reponse > * + * { margin-top: 0.8em; }
.question__reponse ul { padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Galerie de photos ---------- */

.galerie { columns: 3 260px; column-gap: clamp(12px, 1.6vw, 20px); }
.galerie > * { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 20px); }
.galerie button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--rayon-petit); overflow: hidden; background: var(--brume); cursor: zoom-in; }
.galerie img { width: 100%; transition: transform 1s var(--courbe); }
.galerie button:hover img { transform: scale(1.04); }

/* Défilé de photos (mariages) */
.defile { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.defile__liste { display: flex; gap: 16px; width: max-content; animation: defile 70s linear infinite; }
.defile__liste img { height: clamp(200px, 26vw, 320px); width: auto; border-radius: var(--rayon-petit); }
.defile:hover .defile__liste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- Visionneuse (photos en grand) et fiche d'une chambre ---------- */

dialog { color: inherit; }
.visionneuse, .fiche {
  width: min(1180px, 100vw - 24px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: #423b3c;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
  overscroll-behavior: contain;
}
/* Fenêtres ouvertes depuis une section sombre (événements) : le surtitre garde la couleur des sections claires. */
.fiche { --accent: var(--ardoise-fonce); }
.visionneuse::backdrop, .fiche::backdrop { background: rgb(12 20 25 / 0.82); backdrop-filter: blur(4px); }
.visionneuse[open], .fiche[open] { animation: ouvrir 0.45s var(--courbe); }
@keyframes ouvrir { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.visionneuse { background: #0f171c; color: #ffffff; }
.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; transition: opacity 0.25s ease; }
/* La grande photo n'apparaît qu'une fois chargée, en fondu (au lieu de l'ancienne remplacée d'un coup). */
.visionneuse__cadre img.en-chargement { opacity: 0; }
.visionneuse__pied { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; font-size: 0.9rem; color: #c9d3d9; }
.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);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}
.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; }
.fiche__grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.fiche__galerie { position: relative; background: #0f171c; }
.fiche__photos { display: flex; height: 100%; min-height: 360px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fiche__photos::-webkit-scrollbar { display: none; }
.fiche__photos img { flex: none; width: 100%; height: 100%; max-height: calc(100dvh - 24px); object-fit: cover; scroll-snap-align: start; }
.fiche__compteur { position: absolute; left: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgb(12 20 25 / 0.7); color: #ffffff; font-size: 0.82rem; }
.fiche__corps { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3.4vw, 44px); overflow-y: auto; max-height: calc(100dvh - 24px); }
.fiche__corps h2 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem); line-height: 1.04; color: var(--encre); padding-right: 40px; }
.fiche__corps .carte-chambre__infos { color: #6b6263; }
.fiche__corps .petit { color: #6b6263; }
.fiche .bouton--secondaire { --b-texte: var(--encre); --b-bord: var(--encre); }
.fiche .bouton--secondaire:hover { --b-fond: var(--encre); --b-texte: #ffffff; }
html.dialogue-ouvert, html.dialogue-ouvert body { overflow: hidden; }

/* ---------- Chambres : filtres, grille, infos pratiques ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 40px); }
.filtres button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--carte);
  color: var(--titre);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.filtres button[aria-pressed='true'] { background: var(--titre); color: var(--fond); border-color: var(--titre); }
.chambres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.chambres-grille > [hidden] { display: none; }
.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); }
/* Page Chambres (25/10/2026, demande d'Asia) : six cases, en deux colonnes de trois. */
.infos--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info { display: grid; gap: 8px; align-content: start; padding: clamp(22px, 2.6vw, 32px); background: var(--carte); }
.info svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 4px; }
.info h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.4rem; line-height: 1.15; color: var(--titre); }
.info p { color: var(--texte); font-size: 0.97rem; }
.adresses { display: grid; gap: 0; }
.adresse { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--filet); }
.adresse:first-child { border-top: 0; }
.adresse strong { color: var(--titre); font-weight: 600; }
.adresse span { color: var(--texte-doux); font-size: 0.95rem; }
.adresse a { white-space: nowrap; font-weight: 500; }

/* ---------- Visites : faits, frise, salons, événements ---------- */

.fiche-visite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 8px; border-radius: var(--rayon); overflow: hidden; background: var(--filet); border: 1px solid var(--filet); }
.fiche-visite div { display: grid; gap: 4px; padding: 20px 22px; background: var(--carte); }
.fiche-visite dt { font-size: 0.85rem; color: var(--texte-doux); }
.fiche-visite dd { margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--titre); }
.frise { position: relative; display: grid; gap: 0; max-width: 980px; margin-inline: auto; }
.frise::before { content: ""; position: absolute; left: 150px; top: 0; bottom: 0; width: 1px; background: var(--filet); }
.frise__trait { position: absolute; left: 150px; top: 0; bottom: 0; width: 2px; margin-left: -0.5px; background: var(--plume); transform: scaleY(var(--p, 1)); transform-origin: 50% 0; }
html.js:not(.mouvement-reduit) .frise__trait { --p: 0; }
.frise__etape { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 44px; padding: 0 0 clamp(34px, 4vw, 52px); }
.frise__etape::after { content: ""; position: absolute; left: 150px; top: 0.55em; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--fond); border: 2px solid var(--plume); }
.frise__date { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; color: var(--plume); text-align: right; padding-right: 30px; }
.frise__texte { display: grid; gap: 10px; }
.frise__texte h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--titre); }
.frise__photo { max-width: 420px; margin-top: 8px; }
.frise__photo .rideau { border-radius: var(--rayon-petit); }
.salons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.salons > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
.salons > :nth-child(2), .salons > :nth-child(3) { grid-column: span 3; }
.salons > :nth-child(4), .salons > :nth-child(5), .salons > :nth-child(6) { grid-column: span 2; }
.salons figure { position: relative; margin: 0; border-radius: var(--rayon-petit); overflow: hidden; background: var(--brume); min-height: 220px; }
.salons figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--courbe); }
.salons figure:hover img { transform: scale(1.05); }
.salons figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: var(--encre); font-size: 0.85rem; font-weight: 600; }
.evenements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.carte-evenement { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rayon); overflow: hidden; background: var(--carte); }
.carte-evenement__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--brume); }
.carte-evenement__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--courbe); }
.carte-evenement:hover .carte-evenement__media img { transform: scale(1.05); }
.carte-evenement__corps { display: grid; gap: 10px; align-content: start; padding: 22px; }
.carte-evenement h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--titre); }
.carte-evenement p { font-size: 0.97rem; }
/* Toute la carte ouvre la fenêtre du programme (le bouton s'étend sur la carte). */
.carte-evenement { position: relative; }
.carte-evenement__corps { grid-template-rows: auto auto 1fr auto; }
.carte-evenement__ouvrir {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--titre);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.carte-evenement__ouvrir::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.carte-evenement__ouvrir svg { width: 20px; height: 20px; transition: transform 0.4s var(--courbe); }
.carte-evenement:hover .carte-evenement__ouvrir svg { transform: translateX(5px); }
.carte-evenement__ouvrir:focus-visible { outline: none; }
.carte-evenement__ouvrir:focus-visible::after { outline: 2px solid var(--ardoise); outline-offset: -5px; }
/* Fenêtre d'un événement : son programme de l'année. */
.programme { display: grid; gap: 16px; }
.programme li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid #e3e6ea; }
.programme__date { font-weight: 600; font-size: 0.9rem; color: var(--ardoise-fonce); }
.programme h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.4rem; line-height: 1.15; color: var(--encre); }
.programme p:not(.programme__date) { font-size: 0.95rem; }
.prochain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: center; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--rayon); background: var(--nuit); color: #d5dde2; }
.prochain[hidden] { display: none; }
.prochain__date { display: grid; justify-items: center; padding: 16px 22px; border: 1px solid rgb(180 215 237 / 0.35); border-radius: var(--rayon-petit); color: #ffffff; text-align: center; }
.prochain__date strong { font-family: var(--f-titre); font-weight: 600; font-size: 3rem; line-height: 1; }
.prochain__date span { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ciel); }
.prochain h3 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.12; color: #ffffff; }
.prochain .petit { color: #a3b1ba; }
.prochain ul { display: grid; gap: 4px; margin-top: 10px; padding-left: 1.1em; color: #d5dde2; font-size: 0.95rem; }
.film { position: relative; display: grid; align-items: end; min-height: 300px; border-radius: var(--rayon); overflow: hidden; color: #ffffff; text-decoration: none; isolation: isolate; }
.film img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--courbe); }
.film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(12 20 25 / 0.8), rgb(12 20 25 / 0.1)); }
.film:hover img { transform: scale(1.04); }
.film__corps { display: flex; align-items: center; gap: 18px; padding: 24px; }
.film__lecture { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #ffffff; color: var(--bordeaux); transition: transform 0.4s var(--courbe); }
.film:hover .film__lecture { transform: scale(1.08); }
.film__lecture svg { width: 24px; height: 24px; margin-left: 4px; }
.film strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.film span { font-size: 0.92rem; color: rgb(255 255 255 / 0.85); }

/* ---------- Contact ---------- */

.contact-grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-cartes { display: grid; gap: 14px; }
.contact-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 20px 22px; border-radius: var(--rayon-petit); 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(--accent); transform: translateY(-2px); }
.contact-carte svg { grid-row: span 2; width: 26px; height: 26px; color: var(--plume); }
.contact-carte strong { color: var(--titre); font-size: 1.12rem; 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(22px, 2.6vw, 30px); border-radius: var(--rayon); background: var(--carte); }
.acces__bloc svg { width: 30px; height: 30px; color: var(--accent); }
.acces__bloc h3 { font-family: var(--f-titre); font-weight: 600; font-size: 1.55rem; 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(--brume); 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; padding: 20px; text-align: center; color: var(--encre); background-color: var(--brume); background-position: center; background-size: cover; border: 0; width: 100%; }
.plan__bouton strong { font-family: var(--f-titre); font-size: 1.6rem; font-weight: 600; }

/* ---------- Formulaires ---------- */

.formulaire { display: grid; gap: 18px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--filet); container-type: inline-size; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Deux champs côte à côte seulement s'ils ont assez de place : entre 901 et 1 100 px, le formulaire est étroit, et
   « Votre téléphone (facultatif) » ou « Je ne sais pas encore » passaient sur deux lignes. */
@container (max-width: 500px) { .formulaire__ligne { grid-template-columns: 1fr; } }
/* align-content : un champ ne grandit plus quand son voisin affiche un message d'erreur. */
.champ { display: grid; gap: 7px; align-content: start; }
.champ label, .champ legend { font-weight: 600; font-size: 0.95rem; color: var(--titre); }
.champ .facultatif { font-weight: 400; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--filet);
  border-radius: 12px;
  background: var(--fond);
  color: var(--titre);
  font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--ardoise); box-shadow: 0 0 0 4px rgb(70 122 151 / 0.18); }
.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='%23467a97' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 42px; }
/* L'invite d'un menu (« Choisissez un sujet ») est plus discrète qu'un vrai choix. */
.champ select:has(option[value=''][disabled]:checked) { color: var(--texte-doux); }
/* Là où le navigateur le permet (Chrome, Edge), la liste ouverte prend aussi le style du site : coins arrondis, ombre
   douce, choix survolé en bleu ciel, coche bordeaux. Ailleurs (Safari, Firefox, iPhone), la liste reste celle du
   système, la plus simple au doigt ; le champ fermé est le même partout. */
@supports (appearance: base-select) {
  .champ select, .champ select::picker(select) { appearance: base-select; }
  .champ select { align-items: center; padding-right: 12px; background-image: none; cursor: pointer; }
  .champ select::picker-icon {
    content: "";
    width: 20px;
    height: 20px;
    margin-left: auto;
    background: 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='%23467a97' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: rotate 0.25s var(--courbe);
  }
  .champ select:open { border-color: var(--ardoise); box-shadow: 0 0 0 4px rgb(70 122 151 / 0.18); }
  .champ select:open::picker-icon { rotate: 180deg; }
  .champ select::picker(select) {
    /* La liste entière sous le champ, sinon la liste entière au-dessus (Chrome prendrait sinon le côté le plus grand,
       même quand elle tient dessous) ; si elle ne tient d'aucun côté, elle défile, du côté qui en montre au moins
       16 rem. */
    position-try-order: normal;
    position-try-fallbacks: flip-block, --liste-defilante-dessous, --liste-defilante-dessus;
    min-block-size: fit-content;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: var(--carte);
    box-shadow: 0 22px 48px -18px rgb(27 40 48 / 0.4);
  }
  .champ select option { min-height: 44px; padding: 10px 12px; border-radius: 9px; color: var(--titre); cursor: pointer; }
  .champ select option:hover, .champ select option:focus-visible { outline: none; background: rgb(180 215 237 / 0.45); }
  .champ select option:checked { font-weight: 600; }
  .champ select option::checkmark { order: 1; margin-left: auto; color: var(--bordeaux); }
  @position-try --liste-defilante-dessous { position-area: self-end span-self-end; min-block-size: calc-size(fit-content, min(size, 16rem)); }
  @position-try --liste-defilante-dessus { position-area: self-start span-self-end; min-block-size: calc-size(fit-content, min(size, 16rem)); }
}
.champ[aria-invalid='true'] input, .champ[aria-invalid='true'] select, .champ[aria-invalid='true'] textarea, .champ input[aria-invalid='true'], .champ select[aria-invalid='true'], .champ textarea[aria-invalid='true'] { border-color: #b3261e; }
.champ__erreur { color: #b3261e; font-size: 0.88rem; font-weight: 500; }
.champ__erreur:empty { display: none; }
fieldset.champ { margin: 0; padding: 0; border: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; font-weight: 500; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--titre); font-size: 0.95rem; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.choix input:checked + span { border-color: var(--titre); background: var(--titre); color: var(--fond); }
.choix input:focus-visible + span { outline: 2px solid var(--ardoise); outline-offset: 2px; }
.formulaire__pied { display: grid; gap: 12px; justify-items: start; }
.formulaire__note { font-size: 0.86rem; color: var(--texte-doux); }
.formulaire__message { padding: 16px 18px; border-radius: 12px; background: var(--brume); color: var(--encre); font-weight: 500; }
.formulaire__message:empty { display: none; }
.formulaire__message--erreur { background: #fbe9e7; color: #8c1d18; }
.apercu-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff6e0; color: #5c4400; font-size: 0.88rem; line-height: 1.45; }

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

.legal { max-width: 760px; }
.legal h2 { margin: 2em 0 0.5em; font-family: var(--f-titre); font-weight: 600; font-size: 1.9rem; 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 { clip-path: inset(100% 0 0 0); }
/* Les lignes découpées gardent de la place pour les boucles de l'écriture manuscrite. */
[data-split] .ligne-mask { padding-block: 0.08em 0.16em; margin-block: -0.08em -0.16em; }

/* 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; }
html.mouvement-reduit .defile__liste > [aria-hidden='true'] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .defile__liste { animation: none; }
}

/* ---------- Tablettes ---------- */

/* Cinq entrées de menu (25/10/2026) : le nom à côté du logo s'efface plus tôt, pour que le menu tienne sur une ligne. */
@media (max-width: 1180px) {
  .logo__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1080px) {
  .nav { gap: 16px; }
  .evenements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .chambres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --hauteur-entete: 68px; }
  .nav, .entete .langues, .entete__actions .bouton { display: none; }
  .burger { display: block; }
  html:not(.interactif) .nav { display: flex; }
  html:not(.interactif) .burger { display: none; }
  .logo img { width: 48px; height: 48px; }
  .logo__nom { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 0.9rem; }
  .duo, .histoire, .contact-grille, .tarif, .compris { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .portes { grid-template-columns: 1fr; }
  .porte--grande { grid-row: auto; min-height: 460px; }
  .porte { min-height: 320px; }
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fait:nth-child(3) { border-left: 0; padding-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; }
  .fiche__grille { grid-template-columns: 1fr; }
  .fiche__photos { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .fiche__photos img { height: auto; aspect-ratio: 4 / 3; }
  .fiche { overflow-y: auto; }
  .fiche__corps { max-height: none; overflow: visible; }
  .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-visite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-visite div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .acces { grid-template-columns: 1fr; }
  .rail__piste { grid-auto-columns: minmax(250px, 44%); }
  .collage > :nth-child(2) { margin-bottom: -8%; }
  .histoire__visuel { max-width: 420px; }
}

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

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .ouverture { padding-bottom: 92px; }
  .ouverture__defiler { display: none; }
  .ouverture__actions .bouton { flex: 1 1 100%; }
  /* Accueil : les quatre boutons en deux rangées de deux, plus petits, pour laisser voir la vidéo. */
  .ouverture--couple .ouverture__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; align-items: stretch; }
  .ouverture--couple .ouverture__actions .bouton { min-height: 44px; padding: 0.55em 0.7em; font-size: 0.86rem; }
  .chambres-grille, .evenements, .infos, .pied__grille { grid-template-columns: 1fr; }
  .formulaire__ligne { grid-template-columns: 1fr; }
  .rail__piste { grid-auto-columns: 82%; }
  .rail__commandes { display: none; }
  .salons { grid-template-columns: 1fr 1fr; }
  .salons > * { grid-column: span 1 !important; grid-row: auto !important; min-height: 160px; }
  .salons > :first-child { grid-column: span 2 !important; min-height: 260px; }
  .frise::before, .frise__trait { left: 6px; }
  .frise__etape { grid-template-columns: 1fr; gap: 6px; padding-left: 34px; }
  .frise__etape::after { left: 6px; }
  .frise__date { text-align: left; padding-right: 0; }
  .prochain { grid-template-columns: 1fr; }
  .prochain__date { justify-self: start; }
  .tableau-prix th, .tableau-prix td { padding: 13px 14px; }
  .tableau-prix td { font-size: 1.2rem; }
  .fait { padding: 20px 14px; }
  .fait:nth-child(odd) { padding-left: 0; }
  .avis { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  /* « Read the Tripadvisor reviews » tient sur une ligne dès 360 px. */
  .avis .bouton { padding-inline: 1.05em; gap: 8px; }
  .onglets { display: flex; width: 100%; }
  .onglets button { flex: 1; }
  .collage { grid-template-columns: repeat(6, 1fr); }
  .collage > :first-child { grid-column: 1 / 6; }
  .collage > :nth-child(2) { grid-column: 3 / 7; }

  /* 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(246 247 249 / 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgb(35 31 32 / 0.1);
  }
  .barre-mobile .bouton { min-height: 48px; }
  .barre-mobile .bouton--secondaire { --b-texte: var(--encre); --b-bord: rgb(35 31 32 / 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; }
  html.mouvement-reduit .barre-mobile, html.mouvement-reduit .barre-mobile:not(.est-visible) { transition: none; }
  .pied { padding-bottom: calc(28px + 76px); }
}

@media (max-width: 380px) {
  .logo__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .faits { grid-template-columns: 1fr; }
  .fait { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--filet); }
  .fait:first-child { border-top: 0; }
  /* Sur les plus petits téléphones, « Appeler » garde sa place, en icône seule (le mot reste pour les lecteurs d'écran). */
  .barre-mobile .bouton--secondaire { padding-inline: 14px; }
  .barre-mobile__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

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

@media print {
  .entete, .progression, .barre-mobile, .menu-mobile, .ouverture__defiler { 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; }
}

/* ---------- Ajouts : avis du haut de page, cases cochées sans animation, éléments masqués ---------- */
[hidden] { display: none !important; }
.ouverture__avis { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 500; color: rgb(255 255 255 / 0.9); }
.ouverture__avis svg { width: 17px; height: 17px; color: #f1d3d1; }
sup { font-size: 0.62em; line-height: 0; vertical-align: 0.62em; letter-spacing: 0; }
html:not(.js) .coche::before {
  background-color: var(--accent);
  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='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.salons button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.salons figcaption { pointer-events: none; }

/* ---------- Réservation des chambres : le moteur Amenitiz, dans une fenêtre du site ---------- */
.reservation {
  width: min(1120px, 100vw - 24px);
  height: calc(100dvh - 24px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: #423b3c;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
}
.reservation[open] { display: grid; grid-template-rows: auto 1fr; animation: ouvrir 0.45s var(--courbe); }
.reservation::backdrop { background: rgb(12 20 25 / 0.82); backdrop-filter: blur(4px); }
.reservation__entete { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 70px 12px 22px; border-bottom: 1px solid #e3e6ea; }
.reservation__titre { font-family: var(--f-titre); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--encre); margin-right: auto; }
.reservation__onglet { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 500; color: var(--ardoise-fonce); }
.reservation__onglet svg { width: 16px; height: 16px; }
.reservation .fermer { top: 50%; transform: translateY(-50%); right: 14px; box-shadow: none; background: var(--lin); }
.reservation__cadre { position: relative; background: #f4f6f8; }
.reservation__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reservation__attente { position: absolute; inset: 0; display: grid; place-items: center; color: #6b6263; font-size: 0.95rem; }
@media (max-width: 640px) {
  .reservation { width: 100vw; height: 100dvh; border-radius: 0; }
  .reservation__entete { padding: 10px 64px 10px 16px; flex-wrap: wrap; gap: 2px 12px; }
  .reservation__titre { font-size: 1.25rem; width: 100%; }
}

/* Colonne qui reste en place pendant qu'on lit la colonne voisine (ordinateur seulement). */
@media (min-width: 901px) { .collant { position: sticky; top: calc(var(--hauteur-entete) + 30px); } }
@media (max-width: 640px) { .galerie { columns: 2; column-gap: 10px; } .galerie > * { margin-bottom: 10px; } }
.plan__bouton svg { width: 36px; height: 36px; color: var(--bordeaux); }
.fiche-visite dd { font-size: clamp(1.12rem, 0.95rem + 0.7vw, 1.45rem); }

/* ---------- Entrée du haut de page, en CSS : elle démarre dès le premier affichage, sans attendre les scripts
   (le texte et la photo comptent pour la vitesse mesurée par Google). Mouvement repris d'ONELLA. ---------- */
@keyframes pic-zoom { from { transform: scale(1.16); } 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 pic-titre { from { opacity: 0.01; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
@keyframes pic-monter { from { opacity: 0.01; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pic-entete { from { transform: translateY(-100%); } to { transform: none; } }
html.js:not(.mouvement-reduit) .ouverture__media img { animation: pic-zoom 2.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture__titre { animation: pic-titre 1.25s 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture [data-intro] { animation: pic-monter 1s 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.js:not(.mouvement-reduit) .ouverture .surtitre[data-intro] { animation-delay: 0.1s; }
html.js:not(.mouvement-reduit) .ouverture .chapeau[data-intro] { animation-delay: 0.65s; }
html.js:not(.mouvement-reduit) .ouverture__actions[data-intro] { animation-delay: 0.78s; }
html.js:not(.mouvement-reduit) .ouverture__avis[data-intro], html.js:not(.mouvement-reduit) .ouverture__defiler[data-intro], html.js:not(.mouvement-reduit) .ouverture__credit[data-intro] { animation-delay: 0.9s; }
html.js:not(.mouvement-reduit) .entete { animation: pic-entete 1s 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

/* Photo du haut de page dans un <picture> (recadrage pour écran tenu droit) : l'image reste le seul enfant visible.
   Tenu droit, quelle que soit la largeur (téléphone, tablette jusqu'à l'iPad Pro) : sinon la photo en largeur,
   rognée sur les côtés, perd le couple. */
.ouverture__media picture { display: contents; }
@media (orientation: portrait) {
  .ouverture__media img { object-position: var(--cadrage-portrait, var(--cadrage, 50% 50%)); }
}

/* Accueil : la boucle vidéo, par-dessus l'image fixe (sa première image), apparaît en fondu quand elle joue (site.js,
   videoOuverture). Jamais de transform sur la vidéo : la photo du haut garde seule son entrée. */
.ouverture__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 50%); opacity: 0; transition: opacity 0.9s ease; }
.ouverture__video.est-prete { opacity: 1; }
@media (orientation: portrait) {
  .ouverture__video { object-position: var(--cadrage-portrait, var(--cadrage, 50% 50%)); }
}
/* Accueil, écran en largeur : la vidéo passe par des ciels clairs derrière le titre ; le voile est plus soutenu côté
   texte (contraste du titre mesuré plan par plan : 3,5 au moins sur les parties les plus claires). */
@media (orientation: landscape) {
  .ouverture--couple .ouverture__media::after {
    background:
      linear-gradient(180deg, rgb(12 20 25 / 0.35) 0%, rgb(12 20 25 / 0) 28%),
      linear-gradient(0deg, rgb(12 20 25 / 0.78) 0%, rgb(12 20 25 / 0.35) 38%, rgb(12 20 25 / 0) 62%),
      linear-gradient(90deg, rgb(12 20 25 / 0.62) 0%, rgb(12 20 25 / 0.42) 34%, rgb(12 20 25 / 0) 62%);
  }
}
/* Le bouton pause de la vidéo, en bas à gauche du haut de page ; caché tant que la vidéo ne joue pas. */
.ouverture__pause {
  position: absolute;
  left: var(--gouttiere);
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(12 20 25 / 0.3);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.ouverture__pause[hidden] { display: none; }
.ouverture__pause:hover { border-color: #ffffff; background: rgb(12 20 25 / 0.55); }
.ouverture__pause:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.ouverture__pause svg { width: 14px; height: 14px; }
.ouverture__pause svg:last-child, .ouverture__pause[aria-pressed='true'] svg:first-child { display: none; }
.ouverture__pause[aria-pressed='true'] svg:last-child { display: block; }

/* Le film d'un mariage au château (galerie d'Airmedia Films), après les photos de la page Mariages. */
.film-mariage { margin-top: clamp(56px, 8vw, 104px); }
.film-mariage .film { aspect-ratio: 16 / 9; min-height: 0; }
/* Le triangle du bouton lecture reste bordeaux (la règle « .film span » colore aussi ce rond en blanc). */
.film .film__lecture { color: var(--bordeaux); font-size: 0; }
/* Écran tenu droit (téléphone ou tablette) : le texte du haut de page passe sur la photo, le voile est plus soutenu
   sous le texte et plus léger en haut, sur les visages. */
@media (orientation: portrait) {
  .ouverture__media::after {
    background:
      linear-gradient(180deg, rgb(12 20 25 / 0.4) 0%, rgb(12 20 25 / 0.08) 22%),
      linear-gradient(0deg, rgb(12 20 25 / 0.9) 0%, rgb(12 20 25 / 0.72) 45%, rgb(12 20 25 / 0.25) 68%, rgb(12 20 25 / 0) 82%);
  }
}
/* Accueil, écran tenu droit (téléphone ou tablette) : le texte laisse voir le baiser des mariés, dans le haut de la
   photo. Le surtitre et la phrase d'introduction s'effacent (le nom du château est dans l'en-tête ; le titre et les
   boutons disent l'essentiel, les sections suivantes racontent le reste) ; sur téléphone, le texte descend un peu.
   Sur un écran court (iPhone SE dans Safari), les notes d'avis s'effacent aussi et le titre est un peu plus petit.
   Mesuré dans la zone réellement visible des navigateurs (barres comprises), de l'iPhone SE à l'iPad Pro. */
@media (orientation: portrait) {
  .ouverture--couple .surtitre, .ouverture--couple .chapeau { display: none; }
}
/* Depuis la vidéo de la visite (25/10/2026), plus de mariés à laisser voir : la phrase d'introduction revient sur les
   écrans tenus droits assez hauts (grands téléphones, tablettes). */
@media (orientation: portrait) and (min-height: 760px) {
  .ouverture--couple .chapeau { display: block; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .ouverture--couple { padding-bottom: 64px; }
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 600px) {
  .ouverture--couple .ouverture__avis { display: none; }
  .ouverture--couple .ouverture__titre { font-size: 2.2rem; }
}