/* Groupe Novahr · V3 « maison de fête Art déco » (piste N-B, poussée au niveau Awwwards).
   Règle générale : le mouvement n'existe que si html.anim est posé par script.js ou si
   la préférence système le permet ; sans JavaScript, tout le contenu reste visible et immobile. */

:root {
  --nuit: #0f1b33;
  --noir: #0a0d14;
  --laiton: #b08d57;
  --laiton-clair: #d4b47e;
  --blanc: #f2ede4;
  --blanc-doux: rgba(242, 237, 228, 0.86);
  --discret: rgba(242, 237, 228, 0.72);
  --filet: rgba(176, 141, 87, 0.45);
  --erreur: #ff9e92;
  --pans: 22px;
  --pans-chanfrein: polygon(
    var(--pans) 0, calc(100% - var(--pans)) 0, 100% var(--pans),
    100% calc(100% - var(--pans)), calc(100% - var(--pans)) 100%,
    var(--pans) 100%, 0 calc(100% - var(--pans)), 0 var(--pans)
  );
  --ease-out: cubic-bezier(.2, .6, .2, 1);
  --entete: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--blanc); }

h1, h2, h3 {
  font-family: 'Poiret One', 'Josefin Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.08;
  margin: 0 0 0.5em;
}
/* Titres : jamais de coupure à l'intérieur d'un mot (la taille est réglée pour que le mot le plus long tienne) */
h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
h1 { font-size: clamp(2.3rem, 10vw, 10rem); }
h2 { font-size: clamp(1.9rem, 7.2vw, 5.6rem); }
h3 { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: 0.12em; line-height: 1.25; }

.sr, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; }

/* Lien d'évitement */
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--laiton); color: var(--nuit); padding: 10px 16px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 16px; }

/* Mise en page commune */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  position: relative;
  z-index: 1;
}
.centre { text-align: center; }
.texte-centre { max-width: 36em; margin-inline: auto; }
.discret { color: var(--discret); }

.surtitre {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--laiton);
  margin-bottom: 1rem;
}

.bloc {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9.6vw, 122px);
}
.bloc.maisons, .bloc.fondateur, .bloc.contact, .bloc.reunir, .bloc.formulaire-bloc, .bloc.coordonnees { background: var(--nuit); }
.bloc.interlocuteur, .bloc.manifeste, .bloc.publics, .bloc.pin { background: var(--noir); }
.bloc.coordonnees { padding-block-end: clamp(45px, 6.4vw, 70px); }
.tete { margin-bottom: clamp(26px, 3.7vw, 45px); }

/* Fond décoratif : texture Art déco assombrie, en mélange, sous le contenu */
.fond-deco {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.fond-deco img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%;
  object-fit: cover; opacity: 0.2; mix-blend-mode: luminosity;
  filter: saturate(0.2) contrast(1.15);
}
.fond-deco::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--noir) 0%, rgba(10, 13, 20, 0.55) 45%, var(--noir) 100%);
}
.bloc.maisons .fond-deco::after, .bloc.fondateur .fond-deco::after, .bloc.contact .fond-deco::after {
  background: linear-gradient(180deg, var(--nuit) 0%, rgba(15, 27, 51, 0.6) 45%, var(--nuit) 100%);
}

/* Ornement : filets dorés qui se tracent */
.orn {
  display: block;
  width: min(320px, 74%);
  height: auto;
  margin: 1.3rem auto 1.6rem;
  overflow: visible;
}
.orn path { fill: none; stroke: var(--laiton); stroke-width: 1.2; stroke-linecap: round; }
.orn-hero { margin-top: 1.4rem; }

/* En-tête du site */
.entete {
  position: sticky; top: 0; z-index: 60;
  /* Fond bleu nuit quasi plein : le texte qui défile ne transparaît pas sous le logo et le menu */
  background: rgba(15, 27, 51, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--entete);
  padding-block: 0;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blanc);
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.95rem;
}
.marque-n {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--laiton);
  color: var(--nuit);
  font-family: 'Poiret One', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
}
.nav a {
  color: var(--blanc-doux);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--laiton-clair); border-bottom-color: var(--laiton); }
.nav-tel { display: none; }
.entete-appel { padding: 10px 16px; font-size: 0.72rem; }

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--laiton);
  color: var(--blanc);
  cursor: pointer;
  padding: 0;
}
.menu-barres, .menu-barres::before, .menu-barres::after {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--blanc);
  position: relative;
}
.menu-barres::before, .menu-barres::after { content: ""; position: absolute; left: 0; }
.menu-barres::before { top: -6px; }
.menu-barres::after { top: 6px; }
.entete.ouvert .menu-barres { background: transparent; }
.entete.ouvert .menu-barres::before { top: 0; transform: rotate(45deg); }
.entete.ouvert .menu-barres::after { top: 0; transform: rotate(-45deg); }

/* Boutons */
.btn, .btn--primary {
  display: inline-block;
  min-height: 48px;
  padding: 14px 30px;
  border: 1px solid var(--laiton);
  background: var(--laiton);
  color: var(--nuit);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.btn:hover, .btn--primary:hover { background: var(--laiton-clair); border-color: var(--laiton-clair); }
.btn-line { background: transparent; color: var(--blanc); }
.btn-line:hover { background: var(--laiton); color: var(--nuit); border-color: var(--laiton); }

.actions {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 1.6rem;
}

/* Lien texte : le filet se dessine au survol */
.lien {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--blanc);
  text-decoration: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  padding-bottom: 4px;
  background: linear-gradient(var(--laiton), var(--laiton)) left bottom / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
.lien:hover, .lien:focus-visible { background-size: 100% 1px; }

/* Bouton « Réduire les animations » (pied de page) */
.mk-motion {
  min-height: 44px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(176, 141, 87, 0.6);
  color: var(--blanc-doux);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.mk-motion:hover { border-color: var(--laiton); color: var(--blanc); }
.mk-motion[aria-pressed="true"] { background: var(--laiton); color: var(--nuit); border-color: var(--laiton); }

/* ============ Écran de chargement : soleil Art déco, puis ouverture des portes (JS, première visite, mouvement permis) ============ */
.ecran {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  overflow: hidden;
}
html.ecran-on .ecran { display: block; }
html.ecran-on { overflow: hidden; }
.ecran-porte {
  position: absolute; top: 0; bottom: 0;
  width: 50.1%;
  background-color: var(--nuit);
  background-image:
    repeating-linear-gradient(45deg, rgba(176, 141, 87, 0.08) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(176, 141, 87, 0.08) 0 1px, transparent 1px 26px);
  will-change: transform;
}
.ecran-porte::after {
  content: "";
  position: absolute; inset: clamp(14px, 2.4vw, 30px);
  border: 1px solid rgba(176, 141, 87, 0.6);
}
.ecran-gauche { left: 0; border-right: 1px solid var(--laiton); }
.ecran-droite { right: 0; border-left: 1px solid var(--laiton); }
.ecran-soleil {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(62vmin, 380px);
  text-align: center;
}
.ecran-soleil svg { display: block; width: 100%; height: auto; overflow: visible; }
.ecran-soleil .rayon { fill: none; stroke: var(--laiton-clair); stroke-width: 1.1; stroke-linecap: round; }
.ecran-soleil .demi { fill: var(--laiton); }
.ecran-soleil .horizon { fill: none; stroke: var(--laiton); stroke-width: 1.3; stroke-linecap: round; }
.ecran-pct {
  margin: clamp(14px, 3vmin, 26px) 0 0;
  font-family: 'Poiret One', sans-serif;
  font-size: clamp(2rem, 6vmin, 3.4rem);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.ecran-passer {
  position: absolute; z-index: 3;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  min-height: 48px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--laiton);
  color: var(--blanc);
  font: 600 0.8rem 'Josefin Sans', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.ecran-passer:hover { background: var(--laiton); color: var(--nuit); }

/* ============ Accueil : deux portes ============ */
.portes-page {
  position: relative;
  height: calc(100svh - var(--entete));
  min-height: max(540px, 86vh);
  background: var(--noir);
  overflow: hidden;
}
.portes {
  position: absolute; inset: 0;
  display: flex;
}
.porte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--blanc);
  text-decoration: none;
  outline-offset: -8px;
}
.porte + .porte { border-left: 1px solid rgba(176, 141, 87, 0.5); }
.porte-photo {
  position: absolute; inset: 0; z-index: -2;
}
.porte-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.94);
}
.porte::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 13, 20, 0) 0%, rgba(10, 13, 20, 0) 40%, rgba(10, 13, 20, 0.5) 66%, rgba(10, 13, 20, 0.9) 100%);
}
.porte-cadre {
  position: absolute;
  inset: clamp(14px, 2.4vw, 30px);
  z-index: 1;
  border: 1px solid rgba(176, 141, 87, 0.85);
  pointer-events: none;
}
.porte-cadre::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(176, 141, 87, 0.35);
}
.porte-eventail {
  position: absolute;
  left: 50%; top: 13%;
  transform: translateX(-50%);
  width: min(70%, 260px);
  height: auto;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.porte-eventail path {
  fill: none; stroke: var(--laiton); stroke-width: 1; stroke-linecap: round; opacity: 0.85;
  stroke-dasharray: 1;
}
.porte-texte {
  display: block;
  position: relative;
  z-index: 2;
  padding: clamp(28px, 5vw, 72px);
  padding-bottom: clamp(64px, 13vh, 132px);
  max-width: 22vw;
}
/* La porte de droite ancre son texte à son bord extérieur, loin du titre central */
.porte-fete { justify-content: flex-end; text-align: right; }
.porte h2, .porte .porte-titre { display: block;
  font-size: clamp(1.75rem, 2.3vw, 2.4rem);
  letter-spacing: 0.12em;
  margin-bottom: 0.4em;
  color: var(--blanc);
}
.porte-ligne {
  display: block;
  margin: 0;
  color: var(--blanc-doux);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 24em;
}
.porte-appel {
  display: inline-block;
  margin-top: 1.3rem;
  padding-bottom: 4px;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-clair);
  background: linear-gradient(var(--laiton-clair), var(--laiton-clair)) left bottom / 100% 1px no-repeat;
}

/* Porte active : elle s'élargit, l'autre s'assombrit */
.porte:focus-visible { flex-grow: 62; }
.portes:has(.porte:focus-visible) .porte:not(:focus-visible) { flex-grow: 38; }
.portes:has(.porte:focus-visible) .porte:not(:focus-visible) .porte-photo img { filter: saturate(0.4) brightness(0.42); }
.porte:focus-visible .porte-photo img { filter: saturate(1.05) brightness(0.95); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .porte:hover { flex-grow: 62; }
  html:not(.reduce-motion) .portes:has(.porte:hover) .porte:not(:hover) { flex-grow: 38; }
  html:not(.reduce-motion) .portes:has(.porte:hover) .porte:not(:hover) .porte-photo img { filter: saturate(0.4) brightness(0.42); }
  html:not(.reduce-motion) .porte:hover .porte-photo img { filter: saturate(1.05) brightness(0.95); }
  html:not(.reduce-motion) .porte:hover .porte-titre { transform: scale(1.06); }
}

/* Titre central, posé sur la jointure des deux portes */
.portes-centre {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(40vw, 540px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1a2b52 0%, var(--nuit) 72%);
  box-shadow: 0 0 0 1px var(--laiton), 0 0 0 9px var(--nuit), 0 0 0 10px rgba(176, 141, 87, 0.6), 0 24px 70px rgba(0, 0, 0, 0.5);
  padding: 8%;
  text-align: center;
  pointer-events: none;
}
.portes-centre::before {
  content: "";
  position: absolute; inset: -10% -6%;
  z-index: -1;
  background: none;
}
.portes-centre .surtitre { margin-bottom: 1.1rem; color: var(--laiton-clair); }
.portes-centre h1 {
  margin: 0 auto;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  line-height: 1.02;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);   /* « NOVAHR » tient sur une ligne dans le médaillon */
  max-width: none;
  overflow-wrap: normal;
  text-shadow: 0 2px 30px rgba(10, 13, 20, 0.6);
}
.identite {
  margin: 1.2rem 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.82rem, 1.4vw, 0.96rem);
  color: var(--blanc);
}
.identite .et {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--laiton-clair);
  font-size: 1.25em;
  letter-spacing: 0;
  padding-inline: 0.2em;
}
.portes-centre .orn { margin: 1.4rem auto 0; width: min(240px, 60%); }

/* Lettres : découpe par JS, révélation et déformation au défilement */
.mot { display: inline-block; white-space: nowrap; }
.lettre { display: inline-block; }

/* ============ Un seul interlocuteur (section épinglée sur grand écran) ============ */
.trois {
  list-style: none;
  display: grid;
  gap: clamp(22px, 2.4vw, 28px);
  margin-top: clamp(32px, 4.8vw, 51px);
}
.trois li {
  position: relative;
  padding: 66px clamp(20px, 2.4vw, 30px) 34px;
  border: 1px solid var(--laiton);
  background: linear-gradient(180deg, rgba(15, 27, 51, 0.8) 0%, rgba(10, 13, 20, 0.9) 100%);
}
.trois li::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(176, 141, 87, 0.32);
  pointer-events: none;
}
.trois .chiffre {
  position: absolute; top: 0; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border: 1px solid var(--laiton);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  color: var(--laiton);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  background: var(--noir);
}
.trois li > h3 { margin-top: 0.4em; }
.trois p { color: var(--blanc-doux); max-width: 22em; margin-inline: auto; }
.reunir .trois li > h3, .reunir .trois li > p { text-align: center; }
.pin .trois li > h3 { text-align: center; }
.pin .trois li > p { text-align: center; }

/* ============ Deux maisons : images révélées au masque ============ */
.maisons-grille {
  display: grid;
  gap: clamp(48px, 7.2vw, 80px);
}
.maison { position: relative; }
.maison-img {
  position: relative;
  margin: 0 0 28px;
  aspect-ratio: 4 / 3;
  overflow: visible;
}
.maison-img picture, .maison-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.maison-img .cadre-img {
  position: absolute; inset: 0;
  overflow: hidden;
}
.maison-img .cadre-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 20, 0) 40%, rgba(10, 13, 20, 0.55) 100%);
}
.maison-img::before {
  content: "";
  position: absolute; inset: -12px;
  border: 1px solid var(--laiton);
  pointer-events: none;
  z-index: 2;
}
.maison-num {
  position: absolute; left: 18px; bottom: 14px; z-index: 3;
  font-family: 'Poiret One', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--laiton-clair);
  line-height: 1;
  text-shadow: 0 2px 16px rgba(10, 13, 20, 0.7);
}
.maison h3 { font-size: clamp(1.25rem, 2.8vw, 1.9rem); margin-bottom: 0.3em; }
.maison p:not(.surtitre) { color: var(--blanc-doux); max-width: 28em; }
.maison .lien { margin-top: 0.8rem; }

/* ============ Fondateur : arche ============ */
.fond-grille {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.arche {
  position: relative;
  margin: 0 auto;
  width: min(100%, 380px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--nuit);
  border: 1px solid var(--laiton);
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
}
.arche picture { position: absolute; inset: 0; }
.arche img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.arche::before {
  content: "";
  position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(176, 141, 87, 0.85);
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
  pointer-events: none;
}
.fond-texte .surtitre { margin-bottom: 0.8rem; }
.fond-texte h2 { font-size: clamp(2.2rem, 7vw, 5.6rem); letter-spacing: 0.12em; }
.fond-texte p:not(.surtitre) { color: var(--blanc-doux); }
.reperes {
  list-style: none;
  margin-top: 1.6rem;
  border-top: 1px solid var(--filet);
}
.reperes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--blanc-doux);
}
.rep-titre {
  display: inline-block;
  min-width: 11.5em;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--laiton);
  font-size: 1.05rem;
}

/* ============ Teaser de la guinguette (accueil) ============ */
.teaser {
  min-height: min(92svh, 880px);
  display: flex;
  align-items: center;
  background: var(--nuit);
  text-align: center;
}
.teaser-fond {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.teaser-fond img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 40%;
}
.teaser-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(10, 13, 20, 0.84) 0%, rgba(10, 13, 20, 0.5) 60%, rgba(10, 13, 20, 0.25) 100%),
    linear-gradient(180deg, var(--nuit) 0%, transparent 18%, transparent 80%, var(--noir) 100%);
}
.teaser-in { max-width: 780px; }
.teaser-in p:not(.surtitre) { color: var(--blanc-doux); max-width: 30em; margin-inline: auto; }
.teaser-in .discret { color: var(--discret); }
.teaser-in .btn { margin-top: 1.2rem; }
.mention-visuel {
  position: absolute; z-index: 2;
  right: clamp(16px, 4vw, 40px); bottom: 22px;
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc-doux);
  background: rgba(10, 13, 20, 0.7);
  padding: 6px 10px;
}

/* ============ Contact (accueil) ============ */
.contact .texte-centre { color: var(--blanc-doux); }
.coordonnees .discret { margin-top: 1.4rem; }

/* ============ Guinguette : entrée plein écran, guirlandes, affiche ============ */
.gh {
  position: relative;
  min-height: 100svh;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--noir);
}
.gh-fond { position: absolute; inset: 0; z-index: 0; }
.gh-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.gh-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 20, 0.6) 0%, rgba(10, 13, 20, 0) 62%),
    linear-gradient(180deg, rgba(10, 13, 20, 0.7) 0%, rgba(10, 13, 20, 0.1) 30%, rgba(10, 13, 20, 0.2) 50%, rgba(10, 13, 20, 0.92) 100%);
}
.gh-in {
  padding-bottom: clamp(56px, 10vh, 110px);
  padding-top: 140px;
}
.gh-in h1 { font-size: clamp(2.3rem, 10vw, 10rem); letter-spacing: 0.12em; max-width: 12ch; }
/* Dégradé sombre discret derrière le titre : il reste lisible sur les guirlandes */
.gh-in::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -18%; bottom: -10%; left: -6vw; right: -6vw;
  background: radial-gradient(ellipse 65% 55% at 30% 52%, rgba(10, 13, 20, 0.6) 0%, rgba(10, 13, 20, 0.3) 55%, rgba(10, 13, 20, 0) 100%);
}
.gh-in .surtitre { color: var(--laiton-clair); }
.gh-in .lead { color: var(--blanc); max-width: 34em; font-size: 1.12rem; margin: 0 0 1.4rem; }
.gh-mention {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
  background: rgba(10, 13, 20, 0.72);
  border: 1px solid rgba(176, 141, 87, 0.6);
}
.gh-suite {
  position: absolute; z-index: 2;
  right: clamp(16px, 4vw, 40px); bottom: clamp(20px, 4vh, 36px);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-doux);
  text-decoration: none;
  padding-block: 8px;
}
.gh-suite:hover { color: var(--laiton-clair); }

/* Guirlande lumineuse : fil doré et ampoules, positionnées en CSS */
.guirlande {
  position: absolute; left: 0; right: 0; top: 0;
  height: 130px;
  z-index: 2;
  pointer-events: none;
}
.guirlande-fil {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.guirlande-fil path { fill: none; stroke: rgba(176, 141, 87, 0.75); stroke-width: 1.4; }
.guirlande > span {
  position: absolute;
  width: 12px; height: 17px;
  margin-left: -6px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 40% 35%, #fff7dc 0%, #f4cf86 42%, #b8862f 100%);
  box-shadow: 0 0 10px 3px rgba(242, 201, 122, 0.5);
  opacity: 0.85;
}
/* Positions des 14 ampoules (courbe de la guirlande), en % de la largeur et en px */
.guirlande > span:nth-of-type(1) { left: 6.67%; top: 25.4px; }
.guirlande > span:nth-of-type(2) { left: 13.33%; top: 35.3px; }
.guirlande > span:nth-of-type(3) { left: 20.0%; top: 43.4px; }
.guirlande > span:nth-of-type(4) { left: 26.67%; top: 50.0px; }
.guirlande > span:nth-of-type(5) { left: 33.33%; top: 54.9px; }
.guirlande > span:nth-of-type(6) { left: 40.0%; top: 58.2px; }
.guirlande > span:nth-of-type(7) { left: 46.67%; top: 59.8px; }
.guirlande > span:nth-of-type(8) { left: 53.33%; top: 59.8px; }
.guirlande > span:nth-of-type(9) { left: 60.0%; top: 58.2px; }
.guirlande > span:nth-of-type(10) { left: 66.67%; top: 54.9px; }
.guirlande > span:nth-of-type(11) { left: 73.33%; top: 50.0px; }
.guirlande > span:nth-of-type(12) { left: 80.0%; top: 43.4px; }
.guirlande > span:nth-of-type(13) { left: 86.67%; top: 35.3px; }
.guirlande > span:nth-of-type(14) { left: 93.33%; top: 25.4px; }

/* Affiche Art déco (manifeste) */
.affiche-bloc { background: var(--noir); }
.affiche {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(14px, 2vw, 22px);
  background: linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
  border: 1px solid var(--laiton);
}
.affiche::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(176, 141, 87, 0.45);
  pointer-events: none;
}
.affiche-cadre {
  position: relative;
  padding: clamp(40px, 7vw, 92px) clamp(24px, 6vw, 88px);
  text-align: center;
  background:
    repeating-conic-gradient(from -90deg at 50% 0%, rgba(176, 141, 87, 0.08) 0deg 0.6deg, transparent 0.6deg 7deg),
    transparent;
}
.affiche-cadre h2 { font-size: clamp(2rem, 7vw, 5.6rem); letter-spacing: 0.16em; }
.affiche-cadre .surtitre { margin-bottom: 0.8rem; }
.affiche .texte-long { text-align: center; }
.texte-long { max-width: 40em; margin-inline: auto; }
.texte-long p { color: var(--blanc-doux); font-size: 1.14rem; }
.manifeste h2 { margin-bottom: 1.2rem; }

.publics-liste {
  list-style: none;
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  margin-top: 0.5rem;
}
.publics-liste li {
  position: relative;
  padding: 26px 24px 28px;
  border-top: 1px solid var(--laiton);
}
.publics-liste h3 { color: var(--blanc); }
.publics-liste p { color: var(--blanc-doux); margin: 0; }

/* ============ Pages courtes (contact) ============ */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(176, 141, 87, 0.14), transparent 70%),
    var(--nuit);
  padding-block: clamp(51px, 7.2vw, 96px) clamp(38px, 4.8vw, 58px);
  text-align: center;
}
.page-hero h1 { font-size: clamp(2.3rem, 10vw, 9rem); }
/* Titre de page : taille juste assez pour que le mot le plus long (GOURMANDISES, INTROUVABLE) tienne dans la colonne */
@media (min-width: 720px) { .page-hero h1 { font-size: clamp(2.3rem, 8vw, 7rem); } }
@media (max-width: 379px) { .page-hero h1 { font-size: 2rem; } }
/* Nom composé qui ne doit pas être coupé en fin de ligne (ex. Île-de-France, Seine-et-Marne) */
.nw { white-space: nowrap; }
.page-hero .lead {
  max-width: 34em;
  margin: 0 auto;
  color: var(--blanc-doux);
  font-size: 1.1rem;
}
.page-hero .orn { margin-block: 1.2rem 1.4rem; }

/* Entête Art déco (contact, 404) : visuel de fond et éventail laiton */
.page-hero--deco, .page-hero--404 { background: var(--noir); padding-block: clamp(58px, 8vw, 109px) clamp(45px, 5.6vw, 77px); }
.page-hero--deco .fond-deco::after {
  background: linear-gradient(180deg, var(--nuit) 0%, rgba(15, 27, 51, 0.55) 50%, var(--noir) 100%);
}
.page-hero--deco .lead, .page-hero--404 .lead { color: var(--blanc-doux); }
.page-hero--deco .discret { margin-top: 1.2rem; letter-spacing: 0.06em; }
.page-hero .eventail { width: min(250px, 64%); margin-block: 0 1.4rem; }
.page-hero--404 .actions { margin-top: 2.4rem; }

/* ============ Formulaire ============ */
.formulaire-bloc .tete h2 { margin-bottom: 0.4em; }
.form {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  background: var(--noir);
  border: 1px solid var(--laiton);
  box-shadow: inset 0 0 0 5px var(--noir), inset 0 0 0 6px rgba(176, 141, 87, 0.35);
}
.form__legend { color: var(--blanc-doux); font-size: 0.98rem; margin-bottom: 1.4rem; }
.form__legend .req { color: var(--erreur); }
.form__summary {
  margin: 0 0 1.4rem;
  padding: 12px 16px;
  border: 1px solid var(--erreur);
  color: var(--erreur);
  background: rgba(255, 158, 146, 0.08);
}
.form__summary[hidden] { display: none; }
.form__grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 700px) {
  .form__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form__grid .field { margin-bottom: 0; }
.field label {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--laiton-clair);
}
.field__hint { margin: 0; font-size: 0.88rem; color: var(--discret); }
.field__error { margin: 0; font-size: 0.9rem; color: var(--erreur); }
.field__error[hidden] { display: none; }
.req { color: var(--laiton-clair); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(10, 13, 20, 0.7);
  border: 1px solid #9c8358;
  color: var(--blanc);
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color .3s ease, background-color .3s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--laiton-clair); }
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 237, 228, 0.5); }
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: auto; }
.field select option { background: var(--noir); color: var(--blanc); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--blanc);
  outline-offset: 2px;
  border-color: var(--blanc);
}
.field [aria-invalid="true"] { border-color: var(--erreur); }
.field [aria-invalid="true"]:focus { outline-color: var(--erreur); }

.field--check {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 14px;
  align-items: start;
  margin-top: 6px;
  margin-bottom: 24px;
}
.field--check input {
  width: 24px; height: 24px;
  min-height: 24px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--laiton);
}
.field--check label { font-weight: 400; font-size: 0.95rem; color: var(--blanc-doux); text-transform: none; letter-spacing: normal; line-height: 1.55; }
.field--check label a { color: var(--blanc); }
.field--check .field__error { grid-column: 1 / -1; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__submit {
  width: 100%;
  margin-top: 8px;
  min-height: 52px;
  cursor: pointer;
  letter-spacing: 0.22em;
}
@media (min-width: 700px) { .form__submit { width: auto; min-width: 280px; } }
.form__submit:disabled { opacity: 0.6; cursor: progress; }
.form__status { min-height: 1.5em; margin-top: 18px; color: var(--blanc-doux); }
.form__status:empty { min-height: 0; margin-top: 0; }
.form__status.is-ok { color: var(--laiton-clair); }
.form__status.is-error { color: var(--erreur); }

/* ============ Pages légales et 404 ============ */
.page-hero--legal { padding-block: clamp(45px, 6.4vw, 70px) clamp(29px, 4vw, 45px); background: var(--nuit); }
.page-hero--legal h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); letter-spacing: 0.12em; }
.page-hero--legal p { color: var(--blanc-doux); max-width: 34em; margin: 1.1rem auto 0; font-size: 1.02rem; }
.page-hero--legal::after {
  content: ""; display: block; width: min(200px, 50%); height: 1px;
  margin: 1.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--laiton), transparent);
}
/* Le soleil de séparation (marge haute de la section) doit rester au-dessus du texte : on réserve sa place */
.legal { padding-block: clamp(96px, 10vw, 128px) clamp(38px, 5.6vw, 70px); background: var(--noir); }
.prose { max-width: 70ch; margin-inline: auto; color: var(--blanc-doux); }
.prose h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0.12em; margin: 2.4rem 0 0.8rem; color: var(--blanc); }
.prose h2::before {
  content: ""; display: block; width: 44px; height: 1px;
  margin-bottom: 1rem; background: var(--laiton);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { line-height: 1.75; }
.prose ul:not(.ticks) { padding-left: 1.2em; margin-bottom: 1em; }
.prose ul:not(.ticks) li { margin-bottom: 0.4em; }
.prose a { color: var(--laiton-clair); text-underline-offset: 3px; }
.prose strong { color: var(--blanc); font-weight: 600; }
ul.ticks { list-style: none; margin: 0 0 1em; }
ul.ticks li { position: relative; padding-left: 1.6em; margin-bottom: 0.4em; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 6px; background: var(--laiton);
  transform: rotate(45deg);
}

/* ============ Pied de page ============ */
.pied {
  background: var(--noir);
  border-top: 1px solid var(--filet);
  padding-block: 56px 48px;
  text-align: center;
  color: rgba(242, 237, 228, 0.8);
  font-size: 1rem;
}
.pied-marque {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--blanc);
  margin-bottom: 0.6em;
}
.pied p { margin-bottom: 0.5em; }
.pied a { color: var(--blanc-doux); text-underline-offset: 3px; }
.pied-adresse { color: rgba(242, 237, 228, 0.65); font-size: 0.94rem; }
.pied-nav, .pied-legal {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
}
.pied-legal { margin-top: 1rem; }
.pied-legal a, .pied-nav a { font-size: 0.88rem; }
/* Mobile : liens du pied de page plus lisibles, zone tactile confortable */
@media (max-width: 719px) {
  .pied-legal a, .pied-nav a { font-size: 0.94rem; padding-block: 10px; }
}
.pied-marques { color: rgba(242, 237, 228, 0.7); font-size: 0.88rem; }
.pied-motion { margin-top: 1.8rem; }

/* ============ Responsive ============ */
@media (min-width: 640px) {
  .publics-liste { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
  .fond-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .arche { margin: 0; }
}
@media (min-width: 900px) {
  .trois { grid-template-columns: repeat(3, 1fr); }
  .publics-liste { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .maisons-grille { grid-template-columns: 1fr 1fr; }
  .maison:nth-child(2) { margin-top: 112px; }
}
@media (max-width: 859px) {
  .entete-appel { display: none; }
  .nav-tel { display: block; }
  .nav { display: flex; }
  .nav ul { display: flex; flex-direction: column; gap: 0; }
  .nav a { display: block; padding-block: 14px; border-bottom-color: rgba(176, 141, 87, 0.3); }
  .js .menu-btn { display: inline-flex; }
  .js .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: var(--noir);
    border-bottom: 1px solid var(--laiton);
    padding: 4px clamp(16px, 4vw, 40px) 16px;
  }
  .js .entete.ouvert .nav { display: block; }
  .entete { position: sticky; }
}
/* Mobile : les deux portes sont empilées, chacune une moitié d'écran */
@media (max-width: 719px) {
  .portes-page { height: auto; min-height: 0; }
  .portes { position: relative; inset: auto; flex-direction: column; }
  .porte, .porte:hover, .porte:focus-visible { flex: 0 0 50vh !important; }
  .porte + .porte { border-left: 0; border-top: 1px solid rgba(176, 141, 87, 0.5); }
  /* Le titre central occupe la jointure : le texte de la porte haute reste en haut, celui de la basse en bas */
  .porte { align-items: flex-start; }
  .porte-texte { max-width: 31em; padding-top: 28px; padding-bottom: 40px; }
  /* Repères « Pour qui » : libellé au-dessus de la description, aligné à gauche */
  .rep-titre { display: block; min-width: 0; margin-bottom: 0.25em; }
  .porte-fete { justify-content: flex-start; align-items: flex-end; text-align: left; }
  .porte-fete .porte-texte { padding-top: 0; }
  .porte h2, .porte .porte-titre { font-size: clamp(1.75rem, 6.4vw, 2.2rem); }
  .porte-eventail { display: none; }
  .portes-centre { width: 88vw; aspect-ratio: auto; border-radius: 0; padding: 22px 16px; background: var(--nuit); box-shadow: 0 0 0 1px var(--laiton), 0 0 0 6px var(--nuit), 0 0 0 7px rgba(176, 141, 87, 0.6); }
  .portes-centre::before { display: none; }
  .portes-centre .orn { display: none; }
  .gh-in { padding-top: 120px; }
  .guirlande { height: 110px; }
}

/* ============ Mouvement : seulement si la préférence et le réglage le permettent ============ */
/* Les états cachés ne s'appliquent que si script.js a posé html.anim (sans JS, rien n'est caché). */
html.anim .rev:not(.is-in) {
  opacity: 0;
  transform: translateY(14px);
}
/* Le masque porte sur l'image enfant : l'élément observé reste visible pour l'IntersectionObserver */
html.anim .masque:not(.is-in) > picture {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.04);
}
html.anim .revele:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}
html.anim .orn.draw path {
  stroke-dasharray: 1;
}
html.anim .orn.draw:not(.is-in) path {
  stroke-dashoffset: 1;
}
@media (min-width: 900px) {
  /* Section épinglée : les trois étapes s'allument une à une pendant le défilement */
  html.anim .pin { height: 260vh; padding-block: 0; overflow: clip; }
  html.anim .pin-in {
    position: sticky; top: 0;
    height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    /* place réservée au soleil de séparation posé en haut de la section (sinon il recouvre le surtitre) */
    padding-top: 128px; box-sizing: border-box;
  }
  html.anim .trois .etape {
    opacity: clamp(0.12, calc((var(--p, 0) - var(--k, 0)) * 4), 1);
    transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - var(--k, 0)) * 4, 1)) * 36px), 0);
  }
  html.anim .trois .etape:nth-child(1) { --k: 0; }
  html.anim .trois .etape:nth-child(2) { --k: 0.3; }
  html.anim .trois .etape:nth-child(3) { --k: 0.6; }
}

@media (prefers-reduced-motion: no-preference) {

  html:not(.reduce-motion) .lettre {
    animation: lettre-entree 1.1s var(--ease-out) both;
    animation-delay: calc(var(--i) * 55ms + 0.2s);
    transform: translate3d(0, calc(var(--p, 0) * (var(--i) - 5) * -16px), 0);
  }
  html:not(.reduce-motion) .identite,
  html:not(.reduce-motion) .portes-centre .surtitre,
  html:not(.reduce-motion) .porte-texte > * {
    animation: monter 1.1s var(--ease-out) both;
  }
  html:not(.reduce-motion) .porte-texte > :nth-child(2) { animation-delay: 0.12s; }
  html:not(.reduce-motion) .porte-texte > :nth-child(3) { animation-delay: 0.24s; }
  html:not(.reduce-motion) .porte-eventail path {
    animation: trace 1.4s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }

  html:not(.reduce-motion) .porte {
    transition: flex-grow 0.6s var(--ease-out);
  }
  html:not(.reduce-motion) .porte-photo img {
    transform: scale(1.06);
    transition: transform 1.8s var(--ease-out), filter 1s ease;
  }
  html:not(.reduce-motion) .porte:hover .porte-photo img,
  html:not(.reduce-motion) .porte:focus-visible .porte-photo img { transform: scale(1.0); }
  html:not(.reduce-motion) .porte::after {
    transition: background 1s ease;
  }
  html:not(.reduce-motion) .portes-centre h1 {
    transition: none;
  }

  html:not(.reduce-motion) .rev,
  html:not(.reduce-motion) .revele {
    transition: opacity 1.1s ease, transform 1.2s var(--ease-out);
  }
  html:not(.reduce-motion) .trois .etape {
    transition: opacity .3s linear, transform .3s linear;
  }
  html:not(.reduce-motion) .trois li.rev:nth-child(2) { transition-delay: .12s; }
  html:not(.reduce-motion) .trois li.rev:nth-child(3) { transition-delay: .24s; }
  html:not(.reduce-motion) .publics-liste li.rev:nth-child(2) { transition-delay: .12s; }
  html:not(.reduce-motion) .publics-liste li.rev:nth-child(3) { transition-delay: .24s; }
  html:not(.reduce-motion) .publics-liste li.rev:nth-child(4) { transition-delay: .36s; }

  html:not(.reduce-motion) .masque > picture {
    transition: opacity 2s var(--ease-out), filter 2s var(--ease-out), transform 2.2s var(--ease-out);
  }
  html:not(.reduce-motion) .orn.draw path {
    transition: stroke-dashoffset 1.8s cubic-bezier(.3, .6, .2, 1);
  }
  html:not(.reduce-motion) .orn.draw .p2 { transition-delay: .35s; }
  html:not(.reduce-motion) .orn.draw .p3 { transition-delay: .7s; }

  html:not(.reduce-motion) .btn {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--ease-out);
  }
  html:not(.reduce-motion) .lien {
    transition: background-size .6s var(--ease-out);
  }
  html:not(.reduce-motion) .maison-img .cadre-img img {
    transition: transform 1.6s var(--ease-out);
  }
  html:not(.reduce-motion) .maison:hover .cadre-img img { transform: scale(1.04); }

  /* Guirlandes : les ampoules scintillent doucement, à des rythmes différents */
  html:not(.reduce-motion) .guirlande > span {
    animation: scintille 2.8s ease-in-out infinite;
  }
  html:not(.reduce-motion) .guirlande > span:nth-of-type(3n+1) { animation-duration: 2.4s; animation-delay: -0.6s; }
  html:not(.reduce-motion) .guirlande > span:nth-of-type(3n+2) { animation-duration: 3.1s; animation-delay: -1.7s; }
  html:not(.reduce-motion) .guirlande > span:nth-of-type(3n) { animation-duration: 2.7s; animation-delay: -2.3s; }

  /* Transitions entre pages : fondu laiton (le CSS suffit, sans bibliothèque) */
  html:not(.reduce-motion)::view-transition-old(root) {
    animation: 0.45s ease-in both nv-sortie;
  }
  html:not(.reduce-motion)::view-transition-new(root) {
    animation: 0.8s ease-out both nv-entree;
  }
}

@keyframes trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes lettre-entree {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes monter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes scintille {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 4px 1px rgba(242, 201, 122, 0.25); }
  50% { opacity: 1; box-shadow: 0 0 14px 4px rgba(242, 201, 122, 0.7); }
}
@keyframes nv-sortie {
  to { opacity: 0; }
}
@keyframes nv-entree {
  from { opacity: 0; filter: sepia(0.55) saturate(1.5) brightness(1.25); }
  to { opacity: 1; filter: none; }
}

@view-transition { navigation: auto; }

/* Préférence « réduire les animations » du site : même effet que prefers-reduced-motion */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .lettre { transform: none !important; }
html.reduce-motion .masque > picture { clip-path: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============ V4 · classes de contenu : guides, sommaire, encarts, zones, réalisations, liens, configurateur ============ */

/* Article de guide */
.article {
  position: relative;
  max-width: 100%;
  background: var(--noir);
  padding-block: clamp(45px, 6.4vw, 83px);
}
.article__tete {
  max-width: 46rem;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding-inline: clamp(16px, 4vw, 40px);
  text-align: center;
}
.article__tete h1 { font-size: clamp(1.9rem, 6vw, 3.8rem); letter-spacing: 0.14em; }
.article__tete::after {
  content: "";
  display: block;
  width: min(240px, 60%);
  height: 1px;
  margin: 1.6rem auto 0;
  background: linear-gradient(90deg, transparent, var(--laiton), transparent);
}
.article__chapo {
  max-width: 36em;
  margin: 0 auto 1rem;
  color: var(--blanc-doux);
  font-size: 1.15rem;
}
.article__meta {
  margin: 0;
  color: var(--laiton-clair);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.article__corps {
  max-width: 70ch;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  overflow-wrap: break-word;
}
.article__corps h2 { font-size: clamp(1.75rem, 4vw, 2.2rem); letter-spacing: 0.12em; margin: 2.6rem 0 0.9rem; color: var(--blanc); }
.article__corps h2:first-child { margin-top: 0; }
.article__corps h3 {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--laiton-clair);
  margin: 1.8rem 0 0.6rem;
}
.article__corps h2 + p,
.article__corps h3 + p { margin-top: 0; }
.article__corps ol { padding-left: 1.4em; margin-bottom: 1em; }
.article__corps ol li { margin-bottom: 0.45em; }
.article__corps :is(p, li) { color: var(--blanc-doux); line-height: 1.75; }
.article__corps a { color: var(--laiton-clair); text-underline-offset: 3px; }

/* Sommaire */
.sommaire {
  position: relative;
  max-width: 70ch;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  border: 1px solid var(--laiton);
  background: linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
}
.sommaire::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176, 141, 87, 0.4);
  pointer-events: none;
}
.sommaire ol {
  position: relative;
  list-style: none;
  counter-reset: sommaire;
  display: grid;
  gap: 0.7rem;
}
.sommaire li {
  counter-increment: sommaire;
  display: flex;
  align-items: baseline;
  gap: 0.9em;
}
.sommaire li::before {
  content: counter(sommaire, upper-roman);
  flex: 0 0 auto;
  min-width: 2.4em;
  color: var(--laiton-clair);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sommaire a {
  color: var(--blanc);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-block: 2px;
  overflow-wrap: anywhere;
}
.sommaire a:hover,
.sommaire a:focus-visible { color: var(--laiton-clair); border-bottom-color: var(--laiton); }

/* Encart (aside) */
.encart {
  position: relative;
  margin: 2rem 0;
  padding: 22px 24px 22px 28px;
  border-left: 2px solid var(--laiton);
  background: rgba(15, 27, 51, 0.55);
  color: var(--blanc);
}
.encart > :last-child { margin-bottom: 0; }
.encart p, .encart li { color: var(--blanc-doux); }
.encart strong { color: var(--blanc); font-weight: 600; }

/* Liste de villes ou de zones */
.zones {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.2rem 0 1.8rem;
  padding: 0;
}
.zones li {
  padding: 8px 14px;
  border: 1px solid var(--filet);
  color: var(--blanc-doux);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Étude de cas / réalisation */
.cas {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
  max-width: 100%;
  margin-block: clamp(38px, 4.8vw, 70px);
  min-width: 0;
}
.cas__image {
  position: relative;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--laiton);
  background: var(--nuit);
  min-width: 0;
}
.cas__image img { width: 100%; height: auto; }
.cas__texte { min-width: 0; }
.cas__lieu {
  margin-bottom: 0.8rem;
  color: var(--laiton-clair);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cas h2 { font-size: clamp(1.75rem, 4.4vw, 2.6rem); letter-spacing: 0.12em; }
.cas__texte > p:not(.cas__lieu) { color: var(--blanc-doux); }
.cas__faits {
  display: grid;
  gap: 14px;
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet);
}
.cas__faits > div {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr;
  gap: 12px;
}
.cas__faits dt {
  color: var(--laiton-clair);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-top: 0.2em;
}
.cas__faits dd { margin: 0; color: var(--blanc); overflow-wrap: anywhere; }

@media (min-width: 860px) {
  .cas { grid-template-columns: 1.1fr 1fr; }
  .cas:nth-of-type(even) .cas__image { order: 2; }
}

/* Cartes de liens vers d'autres pages */
.liens-cartes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 1.6rem 0;
  padding: 0;
}
.liens-cartes li { margin: 0; min-width: 0; }
@media (min-width: 640px) { .liens-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .liens-cartes { grid-template-columns: repeat(3, 1fr); } }

.lien-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 28px 24px 24px;
  border: 1px solid var(--filet);
  background: linear-gradient(180deg, var(--nuit) 0%, var(--noir) 100%);
  color: var(--blanc);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.lien-carte::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 36px;
  height: 2px;
  background: var(--laiton);
}
.lien-carte__surtitre {
  color: var(--laiton-clair);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lien-carte__titre {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.lien-carte__texte { color: var(--blanc-doux); font-size: 1.02rem; line-height: 1.55; }
.lien-carte:hover,
.lien-carte:focus-visible { border-color: var(--laiton); }
.lien-carte:hover .lien-carte__titre,
.lien-carte:focus-visible .lien-carte__titre { color: var(--laiton-clair); }

/* Configurateur (slot de formulaire) */
.config {
  position: relative;
  max-width: 100%;
  min-width: 0;
  margin: 2rem 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--laiton);
  background: var(--nuit);
}
.config__titre {
  padding: 0 8px;
  color: var(--blanc);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.config__aide { color: var(--blanc-doux); font-size: 1rem; }
.config__groupe { margin-top: 1.4rem; }
.config__famille {
  margin: 0 0 0.6rem;
  color: var(--laiton-clair);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.config__ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
}
.config__ligne label { flex: 1 1 auto; min-width: 0; color: var(--blanc); overflow-wrap: anywhere; }
.config__ligne input[type="number"] {
  width: 76px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--filet);
  background: var(--noir);
  color: var(--blanc);
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.config__ligne input[type="number"]::-webkit-outer-spin-button,
.config__ligne input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.config__ligne input[type="number"]:hover { border-color: var(--laiton-clair); }
.config__ligne input[type="number"]:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.config__ligne button {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--laiton);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.config__ligne button:hover,
.config__ligne button:focus-visible { background: var(--laiton); color: var(--nuit); }
.config__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.2rem;
}
.config__choix label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--filet);
  color: var(--blanc-doux);
  cursor: pointer;
}
.config__choix input { accent-color: var(--laiton); width: 18px; height: 18px; margin: 0; }
.config__choix label:has(input:checked) {
  border-color: var(--laiton);
  background: rgba(176, 141, 87, 0.14);
  color: var(--blanc);
}
.config__recap {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--laiton);
  color: var(--laiton-clair);
  overflow-wrap: anywhere;
}
.config__recap[hidden] { display: none; }

/* Accès au dossier partenaires (guinguette) */
.dossier-acces { margin-top: clamp(40px, 6vw, 64px); }
.dossier-acces .btn { margin-block: 0.4rem 1rem; }

/* Mouvement : transitions seulement si ni la préférence système ni le bouton ne le refusent */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .lien-carte {
    transition: border-color 0.4s ease;
  }
  html:not(.reduce-motion) .lien-carte__titre {
    transition: color 0.4s ease;
  }
  html:not(.reduce-motion) .config__ligne button {
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  html:not(.reduce-motion) .config__choix label {
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
}

/* ============ V5 · finitions : soleil Art déco, dorure, logo d'en-tête ============ */
/* Séparateur soleil entre les grandes sections (demi-soleil, rayons, filets laiton) */
main > section { position: relative; }
main > section + section::before {
  content: "";
  position: absolute; z-index: 3;
  top: clamp(26px, 3.4vw, 42px); left: 50%;
  transform: translateX(-50%);
  width: min(300px, 70%);
  aspect-ratio: 300 / 44;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cg fill='none' stroke='%23b08d57' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M22 38H118M182 38H278'/%3E%3Cpath d='M129.0 38.0L118.0 38.0M129.7 32.6L119.1 29.7M131.8 27.5L122.3 22.0M135.2 23.2L127.4 15.4M139.5 19.8L134.0 10.3M144.6 17.7L141.7 7.1M150.0 17.0L150.0 6.0M155.4 17.7L158.3 7.1M160.5 19.8L166.0 10.3M164.8 23.2L172.6 15.4M168.2 27.5L177.7 22.0M170.3 32.6L180.9 29.7M171.0 38.0L182.0 38.0'/%3E%3C/g%3E%3Cpath d='M136 38A14 14 0 0 1 164 38Z' fill='%23b08d57'/%3E%3Cpath d='M8 38L11.5 34.5L15 38L11.5 41.5Z M285 38L288.5 34.5L292 38L288.5 41.5Z' fill='%23b08d57'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Titres en dorure laiton (repli : couleur pleine, contraste AA sur bleu nuit et noir) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1:not([data-split]), h2 {
    background-image: linear-gradient(180deg, #f2e6c9 0%, #d4b47e 48%, #b08d57 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  h1[data-split] .lettre {
    background-image: linear-gradient(180deg, #f2e6c9 0%, #d4b47e 48%, #b08d57 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .portes-centre h1 { text-shadow: none; }
  h1, h2 { padding-inline-end: 0.12em; }
}
.porte-photo picture { position: absolute; inset: 0; }
.porte-photo img { height: 100%; }
/* Logo d'en-tête */
.logo-entete { display: block; height: 40px; width: auto; }
@media (max-width: 859px) { .logo-entete { height: 32px; } }
/* Contact (accueil) : trois repères centrés */
.contact .trois li > h3, .contact .trois li > p { text-align: center; }
.contact .trois li > p { margin-inline: auto; }
/* Porte : titre qui grandit au survol ou au focus clavier */
.porte-fete .porte-titre { transform-origin: 100% 100%; }
.porte-gourmand .porte-titre { transform-origin: 0 100%; }
.porte:focus-visible .porte-titre { transform: scale(1.06); }
html:not(.reduce-motion) .porte-titre { transition: transform 0.6s var(--ease-out); }
/* Mobile : portes empilées, voile renforcé pour le texte sur photo */
@media (max-width: 719px) {
  .porte::after { background: linear-gradient(180deg, rgba(10, 13, 20, 0.3) 0%, rgba(10, 13, 20, 0.6) 45%, rgba(10, 13, 20, 0.92) 100%); }
}

/* Le séparateur soleil est posé dans la marge haute de la section : on lui garde toujours sa place. */
main > section + section, main > section.bloc + section.bloc { padding-top: 124px; }
@media (min-width: 860px) { main > section + section, main > section.bloc + section.bloc { padding-top: 128px; } }

/* ============ V6 · effets : guinguette vivante, salle de bal, trames, transitions ============ */
/* Canvas WebGL : posé par-dessus l'image déjà affichée, même cadrage, fondu une fois prêt */
.fx-canvas {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.fx-canvas.is-on { opacity: 1; }
/* Salle de bal : même traitement pour l'image et son canvas (pas de filtre, pour un fondu sans saut) */
.fond-salon img, .fond-salon .fx-canvas { opacity: 0.72; mix-blend-mode: normal; filter: none; }
.fond-salon .fx-canvas.is-on { opacity: 0.72; }
/* Trame de transition : couche Art déco posée sur chaque grande section, dissoute au défilement */
.trame-c {
  position: absolute; left: 0; top: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
}
/* Sous les effets, les révélations et les filets sont pilotés par GSAP : aucune transition CSS concurrente */
html.gsap-on .rev, html.gsap-on .revele { transition: none; }
html.gsap-on .masque > picture { transition: none; }
html.gsap-on .orn.draw path { transition: none; }

/* Film de présentation (chargé au clic) */
.film .wrap { text-align: center; }
.film__cadre { position: relative; width: min(1100px, 100%); margin: 2.4rem auto 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  clip-path: var(--pans-chanfrein); }
.film__cadre::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--filet); clip-path: var(--pans-chanfrein); pointer-events: none; }
.film__cadre--lecture::after { display: none; }
.film__cadre img, .film__cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__lire { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(14px, 3vw, 32px); gap: 1rem; width: 100%; border: 0; cursor: pointer;
  background: rgba(10, 13, 20, .25); color: var(--noir); font: 600 .85rem 'Josefin Sans', sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.film__lire svg { width: 64px; height: 64px; padding: 19px 17px 19px 22px; border-radius: 50%; background: var(--laiton-clair); box-shadow: 0 0 0 1px var(--laiton), 0 0 0 10px rgba(176, 141, 87, .22);
  transition: transform .35s var(--ease-out); }
.film__lire span { color: var(--blanc); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.film__lire:hover svg, .film__lire:focus-visible svg { transform: scale(1.08); }
.film__lire:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: -8px; }
.film__legende { margin-top: 1.1rem; color: var(--discret); letter-spacing: .1em; font-size: .9rem; }

.pied-signe { margin-top: 1.2rem; }

/* ===== Finitions luxe (23/10) : écran de chargement épuré (sans pourcentage) ===== */
#ecran .ecran-pct { visibility: hidden; }

/* Fluidité mobile : pas de flou animé ni de flou d'arrière-plan sous 900 px (coûteux sur téléphone, invisible à 94 % d'opacité). */
@media (max-width: 899.98px) {
  .masque:not(.is-in), .masque:not(.is-in) > picture { filter: none !important; }
  .site-head, .site-head::before, .entete, .vitrine__actions .btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Mobile : ces deux sections redéfinissaient leur marge haute et le soleil de séparation touchait le surtitre. */
@media (max-width: 899.98px) {
  main > section + section.pin, main > section + section.coordonnees { padding-top: 124px; }
}

/* ============ Accueil « cinéma » (24/10, piste A choisie par Kentin) ============ */
/* Le salon Art déco en plein écran (scène vivante WebGL par-dessus la photo), la devise au centre,
   les deux maisons en bas, chacune avec un médaillon en bichromie nuit et laiton qui reprend ses couleurs au survol. */
.cinema {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--entete));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px 200px; text-align: center; background: var(--noir);
}
.cinema-fond { position: absolute; inset: 0; z-index: -1; }
.cinema-fond picture, .cinema-fond img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cinema-fond img { filter: brightness(0.58) saturate(0.85); transform: scale(calc(1.05 + var(--p, 0) * 0.08)); }
.cinema-fond::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 44%, rgba(10, 13, 20, 0.5), rgba(10, 13, 20, 0.22) 70%, rgba(10, 13, 20, 0.86) 130%),
    linear-gradient(180deg, rgba(10, 13, 20, 0.4), transparent 28%, transparent 58%, rgba(10, 13, 20, 0.92));
}
.cinema-centre { max-width: 980px; transform: translateY(calc(var(--p, 0) * -48px)); opacity: calc(1 - var(--p, 0) * 1.3); }
.cinema-centre .surtitre { color: var(--laiton-clair); }
.cinema-centre h1 { font-size: clamp(2.5rem, 6.3vw, 6rem); line-height: 1.06; letter-spacing: 0.03em; text-transform: none; margin: 26px 0 28px; }
.cinema-ligne { display: block; }
.cinema-intro { font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.75; color: var(--blanc-doux); max-width: 30em; margin: 0 auto; }
.cinema-maisons {
  position: absolute; left: clamp(20px, 4.4vw, 64px); right: clamp(20px, 4.4vw, 64px); bottom: clamp(28px, 4.4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--filet);
}
.cinema-maison { display: flex; align-items: center; gap: 20px; padding-top: 24px; color: var(--blanc); text-decoration: none; }
.cinema-maison--droite { justify-content: flex-end; text-align: right; }
.cinema-vignette {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--nuit);
  box-shadow: 0 0 0 1px var(--laiton), 0 0 0 5px rgba(10, 13, 20, 0.6), 0 0 0 6px rgba(176, 141, 87, 0.35);
}
.cinema-vignette img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(0.8) !important; transition: filter 1.2s var(--ease-out); }
.cinema-vignette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0f1b33, #3a3550 45%, #b08d57 120%); mix-blend-mode: color; transition: opacity 1.2s var(--ease-out); }
.cinema-maison:hover .cinema-vignette img, .cinema-maison:focus-visible .cinema-vignette img { filter: grayscale(0) contrast(1.05) brightness(0.95) !important; }
.cinema-maison:hover .cinema-vignette::after, .cinema-maison:focus-visible .cinema-vignette::after { opacity: 0; }
.cinema-nom { font-family: 'Poiret One', serif; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: 0.06em; line-height: 1.15; }
.cinema-sur { display: block; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--laiton-clair); margin-bottom: 6px; }
.cinema-fleche { color: var(--laiton-clair); font-size: 1.2rem; transition: transform 0.9s var(--ease-out); }
.cinema-maison:hover .cinema-fleche { transform: translateX(6px); }
.cinema-maison--droite:hover .cinema-fleche { transform: translateX(-6px); }
.cinema-maison:focus-visible { outline: 1px solid var(--laiton-clair); outline-offset: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .cinema-centre > *, html:not(.reduce-motion) .cinema-maisons { animation: cinema-entree 1.8s var(--ease-out) both; }
  html:not(.reduce-motion) .cinema-centre > :nth-child(2) { animation-delay: 0.15s; }
  html:not(.reduce-motion) .cinema-centre > :nth-child(3) { animation-delay: 0.3s; }
  html:not(.reduce-motion) .cinema-maisons { animation-delay: 0.55s; }
}
@keyframes cinema-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.reduce-motion .cinema-centre { transform: none; opacity: 1; }
@media (max-width: 719px) {
  .cinema { min-height: calc(100svh - var(--entete)); justify-content: flex-start; padding: 64px 20px 36px; }
  .cinema-centre h1 { margin: 20px 0 22px; }
  .cinema-maisons { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 48px; grid-template-columns: 1fr; gap: 0; }
  .cinema-maison, .cinema-maison--droite { justify-content: flex-start; text-align: left; padding: 18px 0; border-bottom: 1px solid var(--filet); }
  .cinema-maison--droite { flex-direction: row-reverse; justify-content: flex-end; }
  .cinema-fleche { display: none; }
}
/* La scène vivante (canvas WebGL) et la photo dessous reçoivent le même assombrissement (sinon le titre se lit mal) */
main .cinema-fond[data-fx] img, main .cinema-fond .fx-canvas { filter: brightness(0.58) saturate(0.85) !important; }

/* ===== Accueil raccourci (24/10) : « Un seul interlocuteur » n'est plus épinglé (2,6 écrans) et réunit les deux maisons ===== */
.interlocuteur .trois .etape { opacity: 1 !important; transform: none !important; }
.interlocuteur .maisons-grille { margin-top: clamp(56px, 7vw, 96px); }

/* Signature « Site signé My Kutenova » : badge du bas de page, commun à tous les sites My Kutenova.
   Kuto garde toujours le bleu de la marque ; le reste prend les couleurs du site grâce à trois variables :
   --mk-accent : couleur du site au survol (Min-K : or) ;
   --mk-strong : couleur du nom « My Kutenova » (par défaut, celle du texte) ;
   --mk-line   : couleur du contour (par défaut, le texte à 15 %). */
.mk-sign {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border: 1px solid var(--mk-line, color-mix(in srgb, currentColor 15%, transparent));
  border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.85rem; line-height: 1.2;
  transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
}
.mk-sign:hover, .mk-sign:focus-visible {
  border-color: var(--mk-accent, #2457ff);
  background-color: color-mix(in srgb, var(--mk-accent, #2457ff) 8%, transparent);
  transform: translateY(-1px);
}
.mk-sign b { color: var(--mk-strong, currentColor); font-weight: 700; }
.mk-sign__kuto { width: 26px; height: 26px; flex: none; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mk-sign:hover .mk-sign__kuto, .mk-sign:focus-visible .mk-sign__kuto { transform: rotate(-8deg) scale(1.08); }
.mk-eye { transform-box: fill-box; transform-origin: center; }
.mk-sign:hover .mk-eye, .mk-sign:focus-visible .mk-eye { animation: mk-blink 0.9s ease-in-out 1; }
@keyframes mk-blink { 0%, 40%, 100% { transform: scaleY(1); } 50%, 60% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) {
  .mk-sign, .mk-sign__kuto { transition: none; }
  .mk-sign:hover, .mk-sign:focus-visible, .mk-sign:hover .mk-sign__kuto, .mk-sign:focus-visible .mk-sign__kuto { transform: none; }
  .mk-sign:hover .mk-eye, .mk-sign:focus-visible .mk-eye { animation: none; }
}

.mk-sign { --mk-accent: #d4b47e; }

/* Finitions « luxe » communes aux trois sites (décision de Kentin du 23/10 : sobre et lent, fondus doux,
   étalonnage cinéma, liens qui se soulignent, reflets lents sur les boutons, images qui respirent, curseur discret).
   Chaque site règle ses couleurs avec --lx-accent ; tout est coupé en mouvement réduit. */

/* Étalonnage cinéma des photos (les scènes WebGL et le héros gardent leur propre rendu). */
body.site-tga main img:not([src$=".svg"]) { filter: contrast(1.04) saturate(1.05) sepia(.07); }
body.site-haxler main img:not([src$=".svg"]) { filter: contrast(1.05) saturate(.93); }
body.site-novahr main img:not([src$=".svg"]) { filter: contrast(1.05) saturate(.94) sepia(.06); }
main [data-fx] img, main .vitrine img, main .scene img, main .accueil img, main .film__cadre img,
main .portes img, main .teaser-fond img { filter: none !important; }

/* Grain très fin, fixe (une seule couche, sans animation). */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

body.site-tga { --lx-accent: #c9a24a; --lx-reflet: rgba(255, 236, 190, .55); }
body.site-haxler { --lx-accent: #e9ecef; --lx-reflet: rgba(255, 255, 255, .5); }
body.site-novahr { --lx-accent: #d4b47e; --lx-reflet: rgba(255, 236, 200, .5); }

/* Liens de navigation et du pied de page : un fin trait qui se trace au survol. */
.site-tga .nav a, .site-tga .foot__liste a, .site-tga .foot__legal a,
.site-novahr .nav a, .site-novahr .pied a:not(.mk-sign), .site-novahr .lien {
  text-decoration: none;
  background-image: linear-gradient(var(--lx-accent), var(--lx-accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .9s cubic-bezier(.22, .61, .36, 1), color .6s;
}
.site-tga .nav a:hover, .site-tga .nav a:focus-visible, .site-tga .foot__liste a:hover, .site-tga .foot__legal a:hover,
.site-novahr .nav a:hover, .site-novahr .nav a:focus-visible, .site-novahr .pied a:not(.mk-sign):hover, .site-novahr .lien:hover {
  background-size: 100% 1px;
}
.site-novahr .nav a { border-bottom-color: transparent !important; }
.site-haxler .lien-souligne { transition-duration: .9s !important; }

/* Boutons : un reflet qui glisse lentement au survol. */
.btn, .bouton { position: relative; overflow: hidden; isolation: isolate; }
.btn::before, .bouton::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, var(--lx-reflet), transparent);
  transform: translateX(0) skewX(-18deg); opacity: 0;
}
.btn:hover::before, .btn:focus-visible::before, .bouton:hover::before, .bouton:focus-visible::before {
  animation: lx-reflet 1.6s cubic-bezier(.22, .61, .36, 1) 1;
}
@keyframes lx-reflet { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }

/* Images qui respirent : zoom très lent au survol (la classe est posée par luxe.js sur les photos cadrées). */
.lx-respire { transition: scale 2.4s cubic-bezier(.22, .61, .36, 1); }
.lx-cadre:hover .lx-respire { scale: 1.045; }

/* Curseur discret (ordinateur) : un point qui suit, un anneau qui s'ouvre sur les éléments cliquables. */
.lx-curseur { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; }
.lx-curseur__point, .lx-curseur__anneau { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.lx-curseur__point { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--lx-accent); }
.lx-curseur__anneau { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--lx-accent); opacity: .45;
  transition: width .6s cubic-bezier(.22, .61, .36, 1), height .6s cubic-bezier(.22, .61, .36, 1), margin .6s cubic-bezier(.22, .61, .36, 1), opacity .6s; }
.lx-curseur--lien .lx-curseur__anneau { width: 58px; height: 58px; margin: -29px 0 0 -29px; opacity: .8; }
.lx-curseur--cache .lx-curseur__point, .lx-curseur--cache .lx-curseur__anneau { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover::before, .bouton:hover::before { animation: none; }
  .lx-respire, .lx-cadre:hover .lx-respire { transition: none; scale: none; }
}
html.reduce-motion .btn:hover::before, html.reduce-motion .bouton:hover::before { animation: none; }
html.reduce-motion .lx-cadre:hover .lx-respire { scale: none; }
html.reduce-motion .lx-curseur { display: none; }
@media (pointer: coarse) { .lx-curseur { display: none; } }