/* Salon Aurée : feuille de style.
   Couleurs : ivoire #FAF6EF (fond), prune #2E1A22 (texte, boutons pleins, blanc dessus),
   laiton #8A7550 (filets, prix, mèche dorée), blanc #FFFFFF (champs).
   Polices : Marcellus 400 pour les titres, Karla 400 et 700 pour le texte (fichiers locaux).
   Angles droits partout. Mouvement : motion.js (GSAP + Lenis) sous html.js-motion, signature
   « balayage » (révélation en biais des photos) et « mèche dorée » (filets qui se dessinent) ;
   tout se coupe sous prefers-reduced-motion. */

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivoire: #FAF6EF;
  --prune: #2E1A22;
  --laiton: #8A7550;
  --laiton-clair: #B89A64;
  --laiton-fonce: #6B5838;
  --prune-profond: #23131A;
  --ivoire-sombre: #F1EADF;
  --ease-meche: cubic-bezier(0.65, 0.05, 0.25, 1);
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --blanc: #FFFFFF;
  --filet: 1px solid var(--laiton);
  --colonne: 1180px;
  --etroite: 780px;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(56px, 7vw, 96px);
  /* Bornes en px : corps 17 à 18, H1 34 à 44, H2 26 à 32. */
  --corps: clamp(17px, 16px + 0.25vw, 18px);
  --h1: clamp(40px, 26px + 3.2vw, 76px);
  --h1-hero: clamp(46px, 22px + 5.6vw, 112px);
  --h2: clamp(32px, 20px + 2.6vw, 60px);
  --h3: 1.3rem;
  --titres: "Marcellus", Georgia, "Times New Roman", serif;
  --texte: "Karla", Arial, Helvetica, sans-serif;
}

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

html {
  background: var(--ivoire);
  color: var(--prune);
  font-family: var(--texte);
  font-size: var(--corps);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--prune);
  overflow-x: hidden;
}

body.menu-ouvert {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-family: var(--titres);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: var(--h3);
  margin-bottom: 0.5rem;
}

p,
ul,
ol,
dl,
blockquote,
table {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.35rem;
}

a {
  color: var(--prune);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--prune);
  outline-offset: 3px;
}

strong {
  font-weight: 700;
}

small {
  font-size: 0.9375rem;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

/* Fondu de 200 ms à l'arrivée de chaque image (classe posée par script.js). */
img {
  opacity: 0;
  transition: opacity 200ms;
}

img.est-chargee,
.no-js img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img {
    transition: none;
    opacity: 1;
  }
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.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;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: auto;
  padding: 0.75rem 1rem;
  background: var(--prune);
  color: var(--blanc);
  z-index: 100;
}

.lien-evitement:focus {
  left: 1rem;
  top: calc(var(--brnsg-barre, 0px) + 0.5rem);
}

[data-brnsg-horaires] {
  font-size: 0.9375rem;
}

/* Toute cible d'ancre reste sous la barre BRNSG collante de 36 px. */
[id] {
  scroll-margin-top: calc(var(--brnsg-barre, 0px) + 1rem);
}

/* ----------------------------- Mise en page ------------------------------ */
.colonne {
  width: 100%;
  max-width: calc(var(--colonne) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.colonne-etroite {
  max-width: calc(var(--etroite) + 2 * var(--gouttiere));
}

.section {
  padding-block: var(--section);
  border-top: var(--filet);
}

.section-premiere {
  border-top: 0;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.section-suite {
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Liens texte autonomes (fin de section, « Voir le plan ») : cible tactile de 44 px au moins. */
.section-suite a:not(.bouton),
.acces-texte p > a {
  display: inline-block;
  padding-block: 0.6rem;
}

.intro {
  max-width: 44rem;
}

/* Un seul style de bouton : plein prune, texte blanc, angles droits. */
.bouton {
  display: inline-block;
  min-height: 44px;
  padding: 12px 22px;
  background: var(--prune);
  color: var(--blanc);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.bouton:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.bouton:disabled,
.bouton[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

/* Action secondaire (retour) : un lien souligné, pas un second style de bouton. */
.bouton-texte {
  display: inline-block;
  min-height: 44px;
  padding: 12px 0;
  background: transparent;
  color: var(--prune);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.bouton-texte:hover {
  text-decoration-thickness: 2px;
}

/* -------------------------------- En-tête -------------------------------- */
.entete {
  border-bottom: var(--filet);
}

.entete-grille {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-block: 0.9rem;
}

.entete-marque {
  display: inline-block;
  padding-block: 0.65rem;
  font-family: var(--titres);
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.entete-marque:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.entete-nav {
  display: flex;
  gap: 1.5rem;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.entete-nav a {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration: none;
}

.entete-nav a:hover,
.entete-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.entete-tel {
  display: inline-block;
  padding-block: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.entete-tel:hover {
  text-decoration: underline;
}

.entete-menu {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--prune);
  color: var(--blanc);
  font-weight: 700;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* Menu mobile plein écran, sans animation d'apparition. */
.menu-mobile {
  position: fixed;
  inset: 0;
  top: var(--brnsg-barre, 0px);
  z-index: 90;
  overflow-y: auto;
  padding: 1.5rem var(--gouttiere) calc(2rem + var(--brnsg-onglet, 0px));
  background: var(--ivoire);
  border-top: var(--filet);
}

/* Ligne de tête du panneau : nom du salon et bouton Fermer, toujours visibles menu ouvert. */
.menu-mobile-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--filet);
}

.menu-mobile-titre {
  margin: 0;
  font-family: var(--titres);
  font-size: 1.25rem;
  line-height: 1.2;
}

.menu-mobile-fermer {
  flex: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--prune);
  color: var(--blanc);
  font-weight: 700;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.menu-mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.menu-mobile-nav li {
  margin: 0;
  border-bottom: var(--filet);
}

.menu-mobile-nav a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--titres);
  font-size: 1.5rem;
  text-decoration: none;
}

.menu-mobile-nav a:hover,
.menu-mobile-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.menu-mobile-contact {
  margin: 0;
}

.menu-mobile-contact a {
  display: inline-block;
  padding-block: 0.65rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 960px) {
  .entete-grille {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    padding-block: 0.6rem;
  }

  .entete-nav,
  .entete-reserver {
    display: none;
  }

  .entete-menu {
    display: inline-block;
  }

  .entete-marque {
    font-size: 1.25rem;
    white-space: normal;
  }
}

@media (max-width: 400px) {
  .entete-marque {
    font-size: 1.1rem;
  }

  .entete-tel {
    font-size: 0.9375rem;
  }
}

/* --------------------------------- Hero ---------------------------------- */
/* Composition éditoriale : grand titre sur toute la largeur, la photo principale à gauche,
   infos et quatre vignettes décalées à droite. La mèche dorée ondule derrière le titre. */
.hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4.5rem) var(--section);
  overflow: clip;
}

.hero-grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "titre titre titre titre titre titre titre titre titre titre titre titre"
    "grande grande grande grande grande grande . infos infos infos infos infos"
    "grande grande grande grande grande grande . petites petites petites petites petites";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.hero-titre {
  grid-area: titre;
  position: relative;
  z-index: 1;
  max-width: 15ch;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  font-size: var(--h1-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.hero-meche {
  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--gouttiere));
  right: calc(-1 * var(--gouttiere));
  top: clamp(1rem, 4vw, 3rem);
  width: calc(100% + 2 * var(--gouttiere));
  height: clamp(220px, 34vw, 520px);
  pointer-events: none;
  overflow: visible;
}

.meche-trait {
  fill: none;
  stroke: var(--laiton-clair);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.meche-trait-fin {
  stroke-width: 0.8;
  opacity: 0.55;
}

.hero-grande {
  grid-area: grande;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-infos {
  grid-area: infos;
  position: relative;
  z-index: 1;
  padding-top: 0.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-adresse {
  font-family: var(--titres);
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: var(--filet);
}

.hero-horaires,
.hero-creneau {
  margin-bottom: 0.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 0;
}

.hero-tel {
  font-weight: 700;
  text-decoration: none;
  padding-block: 0.6rem;
}

.hero-grande img,
.hero-petite img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.hero-petites {
  grid-area: petites;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Rythme éditorial : la colonne de droite des vignettes descend d'un cran. */
.hero-petite:nth-child(even) {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 3.5rem));
}

.hero-petite {
  overflow: hidden;
}

/* Sous 1200 px, les textes de repli (horaires, prochain créneau) et les textes calculés par
   horaires.js et script.js tiennent sur une ou deux lignes selon la largeur et le jour :
   deux lignes réservées pour que le bouton et la photo ne bougent pas quand les scripts passent. */
@media (max-width: 1200px) {
  .hero-horaires,
  .hero-creneau {
    min-height: 3em;
  }
}

@media (max-width: 960px) {
  .hero-grille {
    grid-template-areas:
      "titre titre titre titre titre titre titre titre titre titre titre titre"
      "grande grande grande grande grande grande grande infos infos infos infos infos"
      "petites petites petites petites petites petites petites petites petites petites petites petites";
  }

  .hero-petites {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.25rem;
  }

  .hero-petite:nth-child(even) {
    margin-top: 1.5rem;
    margin-bottom: 0;
  }
}

@media (max-width: 720px) {
  .hero-grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titre" "infos" "grande" "petites";
  }

  .hero-titre {
    margin-bottom: 1.25rem;
    line-height: 1.02;
  }

  .hero-infos {
    margin-bottom: 1.5rem;
  }

  .hero-adresse {
    font-size: 1.15rem;
  }

  .hero-meche {
    top: 0;
    height: 260px;
    opacity: 0.55;
  }

  /* Défilement horizontal des quatre petites photos, un cliché par cran. */
  .hero-petites {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-inline: calc(-1 * var(--gouttiere));
    padding-inline: var(--gouttiere);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-petite,
  .hero-petite:nth-child(even) {
    flex: 0 0 62vw;
    max-width: 320px;
    margin: 0;
    scroll-snap-align: start;
  }
}

/* ----------------------------- Réalisations ------------------------------ */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}

.filtre {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--prune);
  border: 0;
  border-bottom: var(--filet);
  border-radius: 0;
  cursor: pointer;
}

.filtre:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.filtre[aria-pressed="true"] {
  background: var(--prune);
  color: var(--blanc);
  border-bottom-color: var(--prune);
  font-weight: 700;
}

.realisations-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.realisations-grande {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

.realisation {
  margin: 0;
}

.realisation img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.realisation figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

@media (max-width: 960px) {
  .realisations-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .realisations-grande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .realisations-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  .realisations-grande {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* -------------------------------- Tarifs --------------------------------- */
.tarifs-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 1.5rem;
}

.tarifs-famille {
  margin-bottom: 2.5rem;
}

.liste-prix {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: var(--filet);
}

/* Ligne de conduite : des points entre le libellé et le prix. */
.prix-ligne {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  padding-block: 0.7rem;
  border-top: var(--filet);
}

.prix-nom {
  display: grid;
  min-width: 0;
}

.prix-nom small {
  font-size: 0.9375rem;
}

.prix-fil {
  flex: 1 1 1rem;
  min-width: 1rem;
  position: relative;
  top: -0.25em;
  border-bottom: 1px dotted var(--laiton);
}

/* Prix en laiton : 24 px au moins pour tenir le contraste sur l'ivoire. */
.prix-val {
  font-family: var(--titres);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--laiton);
  white-space: nowrap;
}

.prix-note {
  max-width: 44rem;
}

.montants {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.montants li {
  margin: 0;
  padding: 0.5rem 1rem;
  border: var(--filet);
  font-family: var(--titres);
  font-size: 1.45rem;
  color: var(--laiton);
}

@media (max-width: 960px) {
  .tarifs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 720px) {
  .tarifs-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------- Équipe --------------------------------- */
.equipe-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.membre {
  margin: 0;
}

.membre img,
.membre-fiche-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 1rem;
}

.membre h3 {
  margin-bottom: 0.25rem;
}

.membre-role,
.membre-depuis {
  margin-bottom: 0.25rem;
}

.membre-depuis {
  font-size: 0.9375rem;
}

.equipe-fiches {
  padding-top: 1rem;
}

.membre-fiche {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.5rem 3rem;
  align-items: start;
  padding-block: 2.5rem;
  border-top: var(--filet);
}

.membre-fiche h2 {
  margin-bottom: 0.25rem;
}

.membre-fiche-texte .membre-depuis {
  margin-bottom: 1rem;
}

.membre-fiche-situation {
  grid-column: 1 / -1;
}

/* Les trois photos de situation sont en 4/5 (manifeste) : ratio natif, largeur bornée. */
.membre-fiche-situation {
  max-width: 560px;
}

.membre-fiche-situation img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Bloc « Le salon » de la page équipe : texte et photo du bac côte à côte. */
.salon-grille {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

.salon-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 960px) {
  .equipe-grille {
    gap: 1.5rem;
  }
}

@media (max-width: 720px) {
  .equipe-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .membre-fiche {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .membre-fiche-portrait {
    max-width: 420px;
  }

  .salon-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .fermetures-liste {
    columns: 1;
  }
}

@media (max-width: 480px) {
  .equipe-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------- Avis ----------------------------------- */
.avis-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
}

.avis-chiffre {
  font-family: var(--titres);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 1.1;
}

.avis-liste {
  max-width: 44rem;
}

.avis-extrait {
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: var(--filet);
}

.avis-liste .avis-extrait + .avis-extrait {
  margin-top: 1.25rem;
}

.avis-extrait p {
  margin-bottom: 0.75rem;
}

.avis-extrait footer {
  font-size: 0.9375rem;
}

.avis-extrait cite {
  font-style: normal;
  font-weight: 700;
}

/* --------------------------- Horaires et accès --------------------------- */
.acces-grille {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: start;
}

.horaires-liste {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  border-top: var(--filet);
}

.horaires-liste li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: var(--filet);
}

.horaires-etat {
  font-weight: 700;
}

.fermetures-liste {
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
}

.fermetures-liste li {
  break-inside: avoid;
}

.acces-texte h3 {
  margin-top: 1.5rem;
}

.acces-visuels {
  display: grid;
  gap: 1.5rem;
}

.acces-visuels img {
  width: 100%;
}

.acces-visuels picture img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.acces-carte {
  border: var(--filet);
  background: var(--ivoire);
}

@media (max-width: 720px) {
  .acces-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ------------------------------ Réservation ------------------------------ */
.rdv {
  margin-bottom: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: var(--filet);
}

.rdv-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: var(--filet);
}

.rdv-etapes li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}

.rdv-etapes li[aria-current="step"] {
  font-weight: 700;
  border-bottom-color: var(--prune);
}

.rdv-creneau {
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.rdv-panneau {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.rdv-titre {
  display: block;
  padding: 0;
  margin: 0 0 1.25rem;
  font-family: var(--titres);
  font-size: var(--h3);
  line-height: 1.2;
}

.rdv-titre:focus {
  outline: 1px solid var(--prune);
  outline-offset: 4px;
}

.options {
  display: grid;
  gap: 0.6rem;
}

.options-prestations,
.options-personnes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.options-jours {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.options-heures {
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}

.options-famille {
  grid-column: 1 / -1;
  margin: 0.75rem 0 0;
  font-family: var(--titres);
  font-size: 1.1rem;
}

.options-famille:first-child {
  margin-top: 0;
}

/* Cartes radio : le bouton radio est masqué, la carte porte l'état. */
.option {
  position: relative;
  display: block;
  cursor: pointer;
}

.option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option input:disabled {
  cursor: not-allowed;
}

.option-carte {
  display: grid;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  background: var(--blanc);
  border: var(--filet);
}

.option:hover input:not(:disabled) + .option-carte {
  border-color: var(--prune);
}

.option input:checked + .option-carte {
  background: var(--prune);
  color: var(--blanc);
  border-color: var(--prune);
}

.option input:checked + .option-carte .option-prix {
  color: var(--blanc);
}

.option input:focus-visible + .option-carte {
  outline: 2px solid var(--prune);
  outline-offset: 3px;
}

/* Créneau ou jour complet : couleur pleine (contraste conservé), fond ivoire et texte barré ;
   l'état est aussi dans l'aria-label (« 11 h 30, complet »). */
.option input:disabled + .option-carte {
  background: var(--ivoire);
  color: var(--prune);
  text-decoration: line-through;
}

.option-nom {
  font-weight: 700;
}

.option-detail {
  font-size: 0.9375rem;
}

.option-prix {
  font-family: var(--titres);
  font-size: 1.1rem;
  color: var(--prune);
}

.options-jours .option-carte,
.options-heures .option-carte {
  text-align: center;
  justify-items: center;
  padding: 0.6rem 0.4rem;
}

.creneau-groupe {
  margin-bottom: 1.4rem;
}

.creneau-label {
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.creneau-note {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
}

.recap {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: var(--filet);
}

.recap-titre {
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.recap-texte {
  margin: 0;
}

.rdv-erreur {
  margin: 0.75rem 0 0;
  font-weight: 700;
  font-size: 0.9375rem;
}

.rdv-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.rdv-actions .bouton:only-child {
  margin-left: auto;
}

.rdv-confirmation .rdv-titre {
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.1rem;
}

.confirmation-recap {
  margin-bottom: 0;
}

.rdv-noscript {
  margin: 1rem 0 0;
}

.rdv-conditions {
  font-size: 0.9375rem;
}

@media (max-width: 600px) {
  .options-prestations,
  .options-personnes {
    grid-template-columns: minmax(0, 1fr);
  }

  .rdv-actions .bouton,
  .rdv-actions .bouton-texte {
    flex: 1 1 auto;
  }
}

/* ------------------------------ Formulaires ------------------------------ */
.formulaire {
  margin-bottom: 1.5rem;
}

.champ {
  margin-bottom: 1.25rem;
}

.champ label,
.champs-grille .champ label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.champ-optionnel {
  font-weight: 400;
}

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  background: var(--blanc);
  color: var(--prune);
  border: 1px solid var(--prune);
  border-radius: 0;
}

.champ textarea {
  resize: vertical;
  min-height: 6rem;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--prune);
  outline-offset: 2px;
}

.champ [aria-invalid="true"] {
  border-width: 2px;
}

.champ-erreur {
  margin: 0.35rem 0 0;
  font-weight: 700;
  font-size: 0.9375rem;
}

.formulaire-erreur {
  margin-top: 0.75rem;
}

.formulaire-erreur:empty {
  display: none;
}

/* Pot de miel : hors écran, jamais rempli par un humain. */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.champs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem 1rem;
}

.champs-grille .champ {
  margin-bottom: 0.5rem;
}

.champ-rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.champ-groupe {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  min-width: 0;
}

.champ-groupe legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.5rem;
}

.radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
}

.radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

.radio input,
.consentement input {
  accent-color: var(--prune);
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: none;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
  font-size: 0.9375rem;
}

.consentement input {
  margin-top: 0.25rem;
}

.formulaire-succes {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: var(--filet);
  background: var(--blanc);
}

.formulaire-succes p {
  font-weight: 700;
}

@media (max-width: 600px) {
  .champ-rangee,
  .radios {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------- Mariage --------------------------------- */
.formule {
  padding: 1.25rem 0;
  border-top: var(--filet);
}

.formule:last-of-type {
  border-bottom: var(--filet);
}

.formule h3 {
  margin-bottom: 0.5rem;
}

.formule-prix {
  margin: 0;
  font-weight: 700;
}

/* --------------------------------- FAQ ----------------------------------- */
.faq-item {
  border-top: var(--filet);
}

.faq-item:last-of-type {
  border-bottom: var(--filet);
}

.faq-item summary {
  padding: 0.9rem 0;
  font-weight: 700;
  cursor: pointer;
}

.faq-item p {
  margin: 0;
  padding: 0 0 1rem;
}

/* --------------------------- Pages légales et 404 ------------------------ */
.page-legale,
.page-404 {
  max-width: calc(var(--etroite) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gouttiere) var(--section);
}

.page-legale h2 {
  font-size: var(--h3);
  margin: 2rem 0 0.5rem;
}

.page-404 .bouton {
  margin-top: 0.5rem;
}

/* ---------------------------- Page de famille ---------------------------- */
/* coupe.html, couleur.html, soin.html : une fiche par prestation, séparées par un filet. */
.prestations-fiches {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border-top: var(--filet);
}

.prestation-fiche {
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: var(--filet);
}

.prestation-fiche h3 {
  margin-bottom: 0.5rem;
}

.prestation-fiche p {
  margin-bottom: 0.5rem;
  max-width: 44rem;
}

.prestation-fiche p:last-child {
  margin: 0.75rem 0 0;
}

.prestation-infos .prix-val {
  font-size: 1.25rem;
  vertical-align: -0.05em;
}

.prestation-reserver {
  display: inline-block;
  padding-block: 0.65rem;
  font-weight: 700;
}

.section-suite .bouton + a {
  margin-left: 1.25rem;
}

/* ------------------------------ Pied de page ----------------------------- */
/* Deux blocs de texte courant, sans titre de colonne : coordonnées et horaires à gauche,
   pages sur une ligne (points médians) et conditions à droite. */
.pied {
  border-top: var(--filet);
  padding-block: 2.5rem 2rem;
  font-size: 0.9375rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem 4rem;
  align-items: start;
}

.pied-marque {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.pied-coordonnees p,
.pied-coordonnees address,
.pied-pages p {
  margin-bottom: 0.5rem;
  max-width: 40rem;
}

.pied-etat {
  font-weight: 700;
}

.pied-coordonnees a,
.pied-liste a,
.pied-legal a {
  display: inline-block;
  padding-block: 0.65rem;
}

.pied-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  row-gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.pied-liste li {
  margin: 0;
}

.pied-liste li + li::before {
  content: "·";
  margin-right: 0.6rem;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: var(--filet);
}

.pied-legal p {
  margin: 0;
}

@media (max-width: 720px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ======================================================================== */
/* Finitions et mouvement (refonte du 13/10/2026)                            */
/* ======================================================================== */

::selection {
  background: var(--prune);
  color: var(--ivoire);
}

html {
  scrollbar-color: var(--laiton) var(--ivoire);
}

h1,
h2 {
  letter-spacing: -0.015em;
  line-height: 1.04;
}

h2 {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 18ch;
}

/* Titres de page des pages intérieures : grands, sur une ligne de laiton. */
.section-premiere h1 {
  position: relative;
  padding-bottom: 0.35em;
  margin-bottom: 1.5rem;
}

.section-premiere h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(9rem, 40%);
  height: 1px;
  background: var(--laiton);
  transform: scaleX(var(--trait, 1));
  transform-origin: left center;
}

/* Filet de laiton entre les sections : pseudo-élément pour pouvoir le dessiner au défilement. */
.section {
  position: relative;
  border-top: 0;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--laiton);
  transform: scaleX(var(--trace-filet, 1));
  transform-origin: left center;
}

.section-premiere::before {
  content: none;
}

/* ------------------------------- En-tête --------------------------------- */
:root {
  --entete-h: 84px;
}

@media (max-width: 960px) {
  :root {
    --entete-h: 66px;
  }
}

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease-sortie);
}

/* Le fond est sur un pseudo-élément : un backdrop-filter sur .entete enfermerait le menu mobile fixe. */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ivoire) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* Fil de progression de lecture, en laiton, sous l'en-tête (ajouté par motion.js). */
.progression {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.entete.entete-defile {
  border-bottom-color: color-mix(in srgb, var(--laiton) 70%, transparent);
}

[id] {
  scroll-margin-top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 1rem);
}

.entete-marque {
  letter-spacing: 0.01em;
}

/* Liens de navigation : soulignement en laiton qui se trace depuis la gauche. */
.entete-nav a,
.entete-tel,
.hero-tel {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--laiton), var(--laiton));
  background-repeat: no-repeat;
  background-position: 100% calc(100% - 0.35rem);
  background-size: 0% 1px;
  transition: background-size 450ms var(--ease-sortie);
}

.entete-nav a:hover,
.entete-tel:hover,
.hero-tel:hover,
.entete-nav a[aria-current="page"] {
  text-decoration: none;
  background-position: 0% calc(100% - 0.35rem);
  background-size: 100% 1px;
}

.entete-nav a[aria-current="page"] {
  background-image: linear-gradient(var(--prune), var(--prune));
  background-size: 100% 2px;
}

/* ------------------------------- Boutons --------------------------------- */
/* Remplissage laiton foncé qui balaie le bouton au survol (blanc dessus : contraste 6,3:1). */
.bouton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 14px 26px;
  letter-spacing: 0.02em;
  transition: color 300ms var(--ease-sortie);
}

.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--laiton-fonce);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 550ms var(--ease-meche);
}

.bouton:hover {
  text-decoration: none;
}

.bouton:hover::before,
.bouton:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.bouton-libelle {
  display: inline-block;
}

/* Liens « Voir la suite » : flèche dessinée en CSS qui avance au survol. */
.section-suite a:not(.bouton) {
  text-decoration: none;
  font-weight: 700;
  background-image: linear-gradient(var(--prune), var(--prune));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.45rem);
  background-size: 100% 1px;
  padding-right: 2.2rem;
  position: relative;
  transition: background-size 500ms var(--ease-meche);
}

.section-suite a:not(.bouton)::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  box-shadow: none;
  transition: transform 450ms var(--ease-sortie);
}

.section-suite a:not(.bouton)::before {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transform-origin: center;
  transition: transform 450ms var(--ease-sortie);
}

.section-suite a:not(.bouton):hover {
  background-size: 0% 1px;
  background-position: 100% calc(100% - 0.45rem);
}

.section-suite a:not(.bouton):hover::after {
  transform: translateX(0.5rem);
}

.section-suite a:not(.bouton):hover::before {
  transform: translateX(0.5rem) rotate(45deg) translate(-1px, 1px);
}

/* ------------------------------ Réalisations ------------------------------ */
.filtre {
  position: relative;
  transition: color 300ms var(--ease-sortie), background-color 300ms var(--ease-sortie);
}

.filtre:hover {
  text-decoration: none;
  background: var(--ivoire-sombre);
}

.filtre[aria-pressed="true"]:hover {
  background: var(--prune);
}

.realisation figure,
.membre > picture,
.prestation-photo,
.membre-fiche-portrait,
.membre-fiche-situation,
.salon-photo,
.acces-visuels picture {
  overflow: hidden;
}

.realisation picture,
.membre > picture {
  overflow: hidden;
  position: relative;
}

.realisation img,
.membre img {
  transition: transform 900ms var(--ease-sortie), opacity 200ms, filter 600ms var(--ease-sortie);
}

.realisation figure:hover img {
  transform: scale(1.06);
}

.realisation picture::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--ivoire) 85%, transparent);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 450ms var(--ease-sortie), transform 650ms var(--ease-sortie);
  pointer-events: none;
}

.realisation figure:hover picture::after {
  opacity: 1;
  transform: scale(1);
}

.realisation figcaption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--laiton) 45%, transparent);
  transition: border-color 400ms var(--ease-sortie);
}

.realisation figure:hover figcaption {
  border-top-color: var(--prune);
}

/* Grille de l'accueil : une colonne sur deux légèrement décalée pour casser la grille. */
@media (min-width: 961px) {
  .realisations-grille:not(.realisations-grande) .realisation:nth-child(4n + 2) figure,
  .realisations-grille:not(.realisations-grande) .realisation:nth-child(4n + 4) figure {
    transform: translateY(2.5rem);
  }

  .realisations-grille:not(.realisations-grande) {
    padding-bottom: 2.5rem;
  }

  .realisations-grande .realisation:nth-child(3n + 2) figure {
    transform: translateY(3rem);
  }

  .realisations-grande {
    padding-bottom: 3rem;
  }
}

/* ---------------------------- Plan du salon ------------------------------- */
.salon-plan {
  position: relative;
  background: var(--prune-profond);
  color: var(--ivoire);
}

.salon-plan-scene {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.salon-plan-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.salon-plan-media picture,
.salon-plan-media img {
  width: 100%;
  height: 100%;
}

.salon-plan-media img {
  object-fit: cover;
  object-position: 50% 55%;
}

/* Voile prune en bas de photo : le texte ivoire garde un contraste AA. */
.salon-plan-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 19, 26, 0) 30%, rgba(35, 19, 26, 0.55) 62%, rgba(35, 19, 26, 0.88) 100%);
  pointer-events: none;
}

.salon-plan-texte {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.salon-plan-texte h2 {
  color: var(--ivoire);
  font-size: clamp(44px, 20px + 5vw, 104px);
  margin-bottom: 1.25rem;
}

.salon-plan-texte p {
  max-width: 34rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ivoire) 92%, var(--laiton-clair));
}

.salon-plan-texte p:last-child {
  margin-bottom: 0;
}

/* -------------------------------- Bandeau --------------------------------- */
.bandeau {
  overflow: hidden;
  background: var(--prune);
  color: var(--ivoire);
  padding-block: clamp(1.1rem, 2.4vw, 1.8rem);
  border-block: 1px solid var(--laiton);
}

.bandeau-piste {
  display: flex;
  width: max-content;
}

.bandeau-groupe {
  display: flex;
  flex-shrink: 0;
}

.bandeau-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding-inline: 1.1em;
  font-family: var(--titres);
  font-size: clamp(26px, 14px + 2.4vw, 52px);
  line-height: 1.1;
  white-space: nowrap;
}

.bandeau-item::after {
  content: "";
  align-self: center;
  width: 0.32em;
  height: 0.32em;
  margin-left: 1.1em;
  border: 1px solid var(--laiton-clair);
  transform: rotate(45deg);
}

.bandeau-prix {
  color: var(--laiton-clair);
  font-size: 0.62em;
}

/* --------------------------------- Tarifs --------------------------------- */
.tarifs-famille h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--prune), var(--prune));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 450ms var(--ease-meche);
}

.tarifs-famille h3 a:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
}

.prix-ligne {
  transition: background-color 350ms var(--ease-sortie), padding 350ms var(--ease-sortie);
}

.prix-ligne:hover {
  background: var(--ivoire-sombre);
}

.prix-fil {
  transform-origin: left center;
}

.prix-val {
  transition: transform 400ms var(--ease-sortie), color 300ms;
}

.prix-ligne:hover .prix-val {
  color: var(--prune);
  transform: translateX(-0.25rem);
}

/* -------------------------------- Équipe ---------------------------------- */
.membre > picture {
  margin-bottom: 1rem;
}

.membre > picture img {
  margin-bottom: 0;
}

.membre:hover img {
  transform: scale(1.05);
}

.membre h3 {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
}

@media (min-width: 961px) {
  .equipe-grille .membre:nth-child(2) {
    margin-top: 4rem;
  }
}

/* --------------------------------- Avis ----------------------------------- */
#avis .colonne {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

#avis .colonne > :not(.avis-liste) {
  grid-column: 1;
}

#avis .avis-liste {
  grid-column: 2;
  grid-row: 1 / span 4;
  max-width: none;
}

#avis .avis-note {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

#avis .avis-chiffre {
  font-size: clamp(64px, 30px + 6vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.avis-extrait p {
  font-family: var(--titres);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
  line-height: 1.45;
}

@media (max-width: 860px) {
  #avis .colonne {
    grid-template-columns: minmax(0, 1fr);
  }

  #avis .avis-liste {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ------------------------------ Pied de page ------------------------------ */
/* Pied prune profond : la page se referme sur la couleur de la marque. */
.pied {
  background: var(--prune-profond);
  color: var(--ivoire);
  border-top: 1px solid var(--laiton);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}

.pied a {
  color: var(--ivoire);
  text-decoration-color: color-mix(in srgb, var(--laiton-clair) 80%, transparent);
  transition: color 250ms var(--ease-sortie), text-decoration-color 250ms var(--ease-sortie);
}

.pied a:hover {
  color: var(--laiton-clair);
  text-decoration-color: var(--laiton-clair);
}

.pied :focus-visible {
  outline-color: var(--ivoire);
}

.pied-marque {
  font-family: var(--titres);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.pied-legal {
  border-top-color: color-mix(in srgb, var(--laiton) 70%, transparent);
  color: color-mix(in srgb, var(--ivoire) 82%, var(--prune));
}

.pied [data-brnsg-horaires] {
  color: var(--laiton-clair);
}

/* ----------------------------- Mobile hero -------------------------------- */
@media (max-width: 720px) {
  .salon-plan-scene {
    min-height: 78vh;
  }
}

/* ======================================================================== */
/* États initiaux du mouvement : uniquement sous html.js-motion (posée par    */
/* le script d'amorce si prefers-reduced-motion n'est pas demandé).          */
/* ======================================================================== */
/* Entre 961 et 1180 px, la navigation tient sans défiler ni être rognée par le téléphone. */
@media (min-width: 961px) and (max-width: 1180px) {
  .entete-nav {
    gap: 0.85rem;
    font-size: 0.94rem;
  }
}

@media (min-width: 961px) and (max-width: 1010px) {
  .entete-nav {
    gap: 0.55rem;
    font-size: 0.88rem;
  }
}

/* Masques de lignes (SplitText) : un peu d'air sous la ligne pour ne pas rogner les jambages (g, q, p). */
*:has(> .ligne-masque) {
  padding-bottom: 0.26em;
  margin-bottom: -0.26em;
}

html.js-motion:not(.motion-pret) .hero-titre,
html.js-motion:not(.motion-pret) .section-premiere h1 {
  visibility: hidden;
}

html.js-motion:not(.motion-pret) .hero-infos > *,
html.js-motion:not(.motion-pret) .hero-petite,
html.js-motion:not(.motion-pret) .entete-grille > * {
  opacity: 0;
}

html.js-motion:not(.motion-pret) .hero-grande {
  clip-path: polygon(0% 0%, 0% 0%, -30% 100%, 0% 100%);
}

html.js-motion:not(.motion-pret) .meche-trait {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

html.js-motion:not(.motion-pret) .section-premiere h1::after {
  transform: scaleX(0);
}

/* Transitions entre pages (navigateurs compatibles) : rideau ivoire. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: 380ms var(--ease-meche) both auree-sortie;
  }

  ::view-transition-new(root) {
    animation: 620ms var(--ease-meche) both auree-entree;
  }
}

@keyframes auree-sortie {
  to {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes auree-entree {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

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

  .realisation figure:hover img,
  .membre:hover img {
    transform: none;
  }
}