/* Black & Safran : feuille de style.

   Couleurs, les seules : noir brun #14100D (fond), ivoire #EFE7DA (texte,
   contraste 15,5:1 sur le fond), safran #C8842B, ivoire à 18 % pour les filets.
   Le safran n'habille qu'un seul élément visible à la fois : le bouton
   « Réserver » de l'en-tête au-dessus de 1080 px, la barre d'action fixée en bas
   en dessous. Les deux ne coexistent jamais, aucune section n'en porte.

   Polices locales : Bodoni Moda 400 pour le nom, les titres et la carte ;
   Figtree 400 et 600 pour le texte courant. Aucune police distante.

   Angles droits partout. Mouvement (octobre 2026) : motion.js orchestre l'entrée,
   les révélations au défilement et le fil de safran, la signature de la maison :
   un pistil tracé à l'encre safran qui court sous le nom, sous chaque titre de
   page et le long des récits, et un rideau safran qui infuse chaque photo avant
   de la découvrir. Tout ce qui est masqué avant animation l'est sous
   html.js-motion, posée par un script en tête et jamais avec
   prefers-reduced-motion. Sans JavaScript, tout reste visible. */

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

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

:root {
  --fond: #14100D;
  --texte: #EFE7DA;
  --safran: #C8842B;
  --filet: rgba(239, 231, 218, 0.18);
  /* Limite visible des champs de saisie. Composite #706A63 sur le fond :
     3,54:1, au-dessus du seuil de 3:1 du critère 1.4.11. Le filet décoratif
     reste à 18 % pour les séparateurs et les cadres. */
  --bord-champ: rgba(239, 231, 218, 0.42);

  --serif: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --large: 1240px;
  --etroit: 720px;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --entete-h: 64px;

  /* Bornes en pixels : la racine est fluide (17 à 18 px) et le rem ne suffit pas
     à tenir les fourchettes de la spécification. */
  --corps: clamp(17px, 16px + 0.25vw, 18px);
  --h1: clamp(40px, 28px + 2.6vw, 64px);
  --h2: clamp(32px, 22px + 2.4vw, 60px);
  --h2-legal: clamp(26px, 22px + 0.8vw, 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --surface: #1B1612;
  --texte-doux: rgba(239, 231, 218, 0.78);
  --h3: clamp(20px, 19px + 0.2vw, 22px);
  --section: clamp(56px, 6.5vw, 88px);

  color-scheme: dark;
}

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

html {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--corps);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

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

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

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

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

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

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

p,
li,
td,
th,
address,
figcaption,
label {
  overflow-wrap: break-word;
}

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

li {
  margin-bottom: 0.4rem;
}

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

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

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

strong {
  font-weight: 600;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

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

img {
  opacity: 0;
  transition: opacity 200ms linear;
}

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

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

[hidden] {
  display: none !important;
}

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2rem 0;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--texte);
  text-decoration: none;
}

.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 et sous l'en-tête. */
[id] {
  scroll-margin-top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 1rem);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

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

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

.section:first-of-type,
.ouverture + .section {
  border-top: 0;
}

.section-premiere {
  padding-top: calc(var(--section) * 0.6);
}

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

main > .section > .bande + .bande {
  margin-top: 2rem;
}

/* ------------------------------- En-tête --------------------------------- */
.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 50;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}

.entete-bande {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--entete-h);
}

.entete-marque {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
  flex: none;
}

.entete-nom {
  font-family: var(--serif);
  font-size: clamp(17px, 15px + 0.7vw, 24px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* La ville sous le nom : elle situe le restaurant dès le premier écran, sur
   toutes les pages, sans prendre de largeur dans la bande. */
.entete-ville {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(239, 231, 218, 0.7);
}

.entete-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.entete-nav li {
  margin: 0;
}

.entete-nav a {
  display: inline-block;
  padding: 0.5rem 0;
  text-decoration: none;
  font-size: 0.9375rem;
  /* Un lien ne se coupe jamais sur deux lignes : sous 1080 px la bande passe au menu. */
  white-space: nowrap;
}

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

.entete-tel {
  flex: none;
  white-space: nowrap;
  font-size: clamp(14px, 13px + 0.2vw, 15px);
  text-decoration: none;
  padding-block: 0.75rem;
}

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

.entete-reserver {
  display: none;
  flex: none;
  background: var(--safran);
  color: var(--fond);
  text-decoration: none;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  line-height: 1.7;
  border-radius: 0;
}

.entete-bascule {
  flex: none;
  background: none;
  border: 1px solid var(--filet);
  color: var(--texte);
  min-height: 44px;
  min-width: 44px;
  padding: 0 clamp(0.6rem, 2vw, 0.9rem);
  font-size: clamp(14px, 13px + 0.2vw, 16px);
  cursor: pointer;
  border-radius: 0;
}

/* Panneau de navigation sous l'en-tête, en dessous de 1080 px. */
@media (max-width: 1079.98px) {
  .entete-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--fond);
    border-bottom: 1px solid var(--filet);
  }

  .entete.nav-ouverte .entete-nav {
    display: block;
  }

  .entete-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gouttiere) 1rem;
  }

  .entete-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--filet);
    font-size: 1rem;
  }
}

@media (min-width: 1080px) {
  .entete-bascule {
    display: none;
  }

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

  .entete-nav {
    margin-right: 0.5rem;
  }
}

/* Accueil : en-tête transparent au-dessus de la photo, posé au défilement. */
html[data-page="accueil"] .entete {
  background: transparent;
  border-bottom-color: transparent;
}

html[data-page="accueil"] .entete.est-pose,
html[data-page="accueil"] .entete.nav-ouverte {
  background: var(--fond);
  border-bottom-color: var(--filet);
}

/* ------------------------------ Ouverture -------------------------------- */
html[data-page="accueil"] .ouverture {
  margin-top: calc(-1 * var(--entete-h));
}

.ouverture {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: calc(100svh - var(--brnsg-barre, 0px));
  overflow: hidden;
}

.ouverture-photo {
  position: absolute;
  inset: 0;
}

.ouverture-photo picture,
.ouverture-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ouverture-nom {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 var(--gouttiere) clamp(1.5rem, 5vh, 3rem);
  font-size: var(--h1);
  font-style: normal;
  letter-spacing: 0.01em;
}

/* --------------------------- Lignes d'accroche --------------------------- */
.lignes .ligne {
  margin: 0 0 0.35rem;
  font-size: clamp(19px, 17px + 0.5vw, 22px);
}

.lignes .ligne:last-child {
  margin-bottom: 0;
}

/* -------------------------------- Visuels -------------------------------- */
.visuel figcaption {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: var(--texte);
  opacity: 0.8;
}

.visuel-large img {
  width: 100%;
}

.carte-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 760px) {
  .carte-photos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------- Carte --------------------------------- */
.saison-bascule fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.saison-bascule legend {
  padding: 0;
  font-size: 0.9375rem;
}

.saison-choix {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
}

.saison-choix input {
  width: 18px;
  height: 18px;
  accent-color: var(--texte);
}

.saison-annonce {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  min-height: 1.4em;
}

/* Sans JavaScript comme avec, l'état des boutons radio commande l'affichage. */
.carte-liste[data-saison="automne"] {
  display: none;
}

.carte:has(#saison-automne:checked) .carte-liste[data-saison="ete"] {
  display: none;
}

.carte:has(#saison-automne:checked) .carte-liste[data-saison="automne"] {
  display: block;
}

.famille {
  margin-bottom: 2.5rem;
}

.famille-titre {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--filet);
}

.plats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plat {
  margin: 0 0 1.5rem;
}

.plat-ligne {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-family: var(--serif);
  font-size: clamp(18px, 17px + 0.35vw, 21px);
}

.plat-conduite {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--filet);
  position: relative;
  top: -0.3em;
  transform-origin: left center;
  transition: border-color 400ms var(--ease);
}

.plat-nom {
  min-width: 0;
  overflow-wrap: anywhere;
}

.plat-prix {
  flex: none;
  white-space: nowrap;
}

.plat-texte {
  margin: 0 0 0.2rem;
}

.plat-allergenes {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

.carte-date,
.carte-allergenes {
  margin-top: 2rem;
  font-size: 0.9375rem;
}

/* --------------------------------- Menus --------------------------------- */
.menus-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .menus-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.menu-nom {
  font-size: var(--h3);
  margin-bottom: 0.25rem;
}

.menu-prix {
  font-family: var(--serif);
  font-size: clamp(22px, 20px + 0.6vw, 28px);
  margin: 0 0 0.75rem;
}

.menu-plats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-plats li {
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--filet);
}

.menu-plats li:last-child {
  border-bottom: 0;
}

.menu-note {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  opacity: 0.8;
}

/* ------------------------------- Personnes ------------------------------- */
.personnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .personnes {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.personne img {
  width: 100%;
}

.personne-texte {
  margin-top: 1rem;
}

.personne-role {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  opacity: 0.8;
}

.fournisseurs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fournisseurs li {
  padding-block: 1.5rem;
  margin: 0;
  border-bottom: 1px solid var(--filet);
}

.fournisseurs li:last-child {
  border-bottom: 0;
}

.fournisseur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 760px) {
  .fournisseur {
    grid-template-columns: 300px 1fr;
    gap: 1.75rem;
    align-items: start;
  }

  /* Fournisseur sans photo : le texte occupe toute la ligne. */
  .fournisseur-sans-photo {
    grid-template-columns: 1fr;
  }
}

.fournisseur-meta {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  opacity: 0.8;
}

.fournisseur h3 {
  margin-bottom: 0.35rem;
}

/* --------------------------------- Avis ---------------------------------- */
.avis-note {
  font-family: var(--serif);
  font-size: var(--h3);
}

.avis-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

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

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

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

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

/* ------------------------------- Tableaux -------------------------------- */
.tableau-enveloppe {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau caption {
  text-align: left;
  font-size: 0.9375rem;
  opacity: 0.8;
  padding-bottom: 0.75rem;
}

.tableau th,
.tableau td {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

.tableau th {
  font-weight: 600;
  white-space: nowrap;
}

.fermetures,
.montants {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.fermetures li,
.montants li {
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--filet);
}

.plan {
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--filet);
}

.lien-inactif {
  opacity: 0.8;
}

.faq-item {
  border-bottom: 1px solid var(--filet);
  padding-block: 0.9rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

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

/* ------------------------------ Formulaires ------------------------------ */
.formulaire {
  margin-top: 2rem;
}

.champ {
  margin-bottom: 1.25rem;
}

.champ-rangee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.25rem;
}

@media (min-width: 600px) {
  .champ-rangee {
    grid-template-columns: 1fr 1fr;
  }
}

.champ label,
.champ-groupe legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
}

.champ-optionnel {
  opacity: 0.8;
}

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

.champ textarea {
  min-height: 88px;
  resize: vertical;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--texte);
}

.champ input[aria-invalid="true"] {
  border-color: var(--texte);
  border-width: 2px;
}

.champ-erreur,
.formulaire-erreur {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.formulaire-erreur:empty {
  margin: 0;
}

.champ-note {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
}

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

.champ-case {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.champ-case input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--texte);
}

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

.consentement input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.3rem;
  accent-color: var(--texte);
}

.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bouton {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  background: none;
  color: var(--texte);
  border: 1px solid var(--texte);
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover {
  background: var(--texte);
  color: var(--fond);
}

.bouton[disabled] {
  opacity: 0.6;
  cursor: default;
}

.bouton[disabled]:hover {
  background: none;
  color: var(--texte);
}

.formulaire-succes {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--filet);
}

.formulaire-recap {
  font-family: var(--serif);
  font-size: var(--h3);
}

.formulaire-note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

/* ------------------------------ Pied de page ----------------------------- */
.pied {
  border-top: 1px solid var(--filet);
  padding-top: var(--section);
}

.pied-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 760px) {
  .pied-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pied-titre {
  font-family: var(--serif);
  font-size: var(--h3);
  margin-bottom: 0.75rem;
}

.pied p {
  margin: 0 0 0.5rem;
}

.pied-bloc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied-bloc li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.35rem;
}

.pied-legal {
  margin-top: var(--section);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--filet);
  font-size: 0.9375rem;
}

/* ----------------------- Barre d'action fixée en bas ---------------------- */
/* Unique touche de safran tant que le bouton « Réserver » de l'en-tête est
   masqué. Elle laisse sa place à l'onglet BRNSG replié. */
.cta {
  display: none;
}

@media (max-width: 1079.98px) {
  .ouverture-contenu {
    padding-bottom: calc(5.5rem + var(--brnsg-onglet, 0px));
  }

  .cta {
    display: block;
    position: fixed;
    left: var(--gouttiere);
    right: var(--gouttiere);
    bottom: calc(1rem + var(--brnsg-onglet, 0px));
    z-index: 100;
    padding: 0.9rem 1rem;
    min-height: 44px;
    background: var(--safran);
    color: var(--fond);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
  }

  body {
    padding-bottom: calc(5rem + var(--brnsg-onglet, 0px));
  }
}

/* La page de réservation porte déjà le formulaire : la barre fixée en bas
   n'a rien à y ajouter et masquerait le bouton d'envoi. */
html[data-page="reserver"] .cta {
  display: none;
}

/* Même raison sur les pages qui portent un formulaire plus bas : script.js
   pose l'attribut dès que le formulaire entre dans l'écran, pour que la barre
   ne recouvre ni la case de consentement ni le bouton d'envoi. */
.cta[hidden] {
  display: none;
}

/* ---------------------------- Pages du gabarit --------------------------- */
.page-legale,
.page-404 {
  padding-block: var(--section);
  width: 100%;
  max-width: calc(var(--etroit) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.page-legale h1,
.page-404 h1 {
  font-size: var(--h2-legal);
  margin-bottom: 1.5rem;
}

.page-legale h2 {
  font-size: var(--h3);
  margin-top: 2.5rem;
}

.page-legale ul {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Composition et mouvement (octobre 2026)
   ========================================================================== */

::selection {
  background: var(--safran);
  color: var(--fond);
}

html {
  scrollbar-color: rgba(200, 132, 43, 0.6) var(--fond);
}

/* --------------------------- Fil de safran ------------------------------- */
.fil {
  display: block;
  overflow: visible;
  pointer-events: none;
}

.fil .fil-trace {
  fill: none;
  stroke: var(--safran);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fil .fil-pointe {
  stroke-width: 1.4;
}

.mot-w {
  white-space: nowrap;
}

.approche-w {
  margin-right: -0.13em;
}

.esperluette {
  color: var(--safran);
}

/* --------------------------- Liens et boutons ---------------------------- */
/* Lien souligné : un trait ivoire, puis un trait safran qui le recouvre de
   gauche à droite au survol. */
.lien-trait {
  text-decoration: none;
  padding-bottom: 3px;
  background:
    linear-gradient(var(--safran), var(--safran)) 0 100% / 0 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 600ms var(--ease), color 300ms;
}

.lien-trait:hover,
.lien-trait:focus-visible {
  background-size: 100% 1px, 100% 1px;
  text-decoration: none;
}

.section-suite a:not(.lien-trait) {
  text-decoration-color: rgba(239, 231, 218, 0.5);
  transition: text-decoration-color 300ms;
}

.section-suite a:not(.lien-trait):hover {
  text-decoration-color: var(--safran);
}

.bouton-safran {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.9rem;
  background: var(--safran);
  color: var(--fond);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.bouton-safran::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--texte);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 550ms var(--ease);
}

.bouton-safran:hover::before,
.bouton-safran:focus-visible::before {
  transform: scaleY(1);
}

.bouton-safran span {
  display: inline-block;
}

.bouton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 450ms var(--ease);
}

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

.bouton:hover {
  background: none;
  color: var(--fond);
}

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

.bouton[disabled]::before {
  display: none;
}

.entete-reserver {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 400ms var(--ease);
}

.entete-reserver::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--texte);
  transform: translateY(101%);
  transition: transform 500ms var(--ease);
}

.entete-reserver:hover::before {
  transform: translateY(0);
}

/* -------------------------------- En-tête -------------------------------- */
.entete {
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease);
}

@media (min-width: 1080px) {
  .entete-nav a {
    position: relative;
    text-decoration: none;
  }

  .entete-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    height: 1px;
    background: var(--safran);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 500ms var(--ease);
  }

  .entete-nav a:hover,
  .entete-nav a[aria-current="page"] {
    text-decoration: none;
  }

  .entete-nav a:hover::after,
  .entete-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.entete-progression {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--safran);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

html[data-page="accueil"] .entete.est-pose,
html[data-page="accueil"] .entete.nav-ouverte {
  background: rgba(20, 16, 13, 0.94);
}

/* ------------------------------- Ouverture ------------------------------- */
.ouverture {
  isolation: isolate;
  min-height: 100vh;
  min-height: calc(100svh - var(--brnsg-barre, 0px));
}

.ouverture-photo {
  overflow: hidden;
  z-index: -2;
}

.ouverture-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 16, 13, 0.6) 0%, rgba(20, 16, 13, 0) 20%, rgba(20, 16, 13, 0) 40%, rgba(20, 16, 13, 0.92) 100%),
    linear-gradient(90deg, rgba(20, 16, 13, 0.55) 0%, rgba(20, 16, 13, 0) 65%);
}

/* Lueur de bougie : suit le pointeur au-dessus de la photo (motion.js). */
.ouverture-lueur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 70vmin;
  height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 150, 52, 0.26), rgba(226, 150, 52, 0.08) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.ouverture-contenu {
  position: relative;
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

.ouverture-sur {
  margin: 0 0 1.1rem;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.ouverture-nom {
  margin: 0;
  padding: 0;
  overflow-wrap: normal;
  font-size: clamp(56px, 10.6vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  /* Les lettres montent depuis un masque : l'espace sous la ligne garde les jambages. */
  padding-bottom: 0.04em;
}

.fil-hero {
  width: min(560px, 62vw);
  height: auto;
  margin: 0.6rem 0 1.8rem;
}

.ouverture-faits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  margin: 0 0 2.2rem;
  padding: 0;
  font-size: clamp(16px, 14px + 0.35vw, 19px);
}

.ouverture-faits li {
  margin: 0;
  padding: 0 1.25rem;
  border-left: 1px solid rgba(239, 231, 218, 0.3);
}

.ouverture-faits li:first-child {
  padding-left: 0;
  border-left: 0;
}

.ouverture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.ouverture-tel {
  font-size: 1.05rem;
}

.ouverture-defiler {
  position: absolute;
  right: max(var(--gouttiere), calc((100vw - var(--large)) / 2 - 1.5rem));
  bottom: clamp(2.5rem, 8vh, 5rem);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.ouverture-defiler span {
  writing-mode: vertical-rl;
}

.ouverture-defiler i {
  position: relative;
  display: block;
  width: 1px;
  height: 72px;
  background: rgba(239, 231, 218, 0.25);
  overflow: hidden;
}

.ouverture-defiler i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--safran);
  animation: bs-goutte 2.2s var(--ease) infinite;
}

@keyframes bs-goutte {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (min-width: 1080px) {
  .ouverture-defiler {
    display: flex;
  }
}

@media (max-width: 1079.98px) {
  .ouverture-contenu {
    padding-bottom: calc(6rem + var(--brnsg-onglet, 0px));
  }

  .ouverture-sur {
    letter-spacing: 0.16em;
    font-size: 12px;
  }

  .ouverture-actions {
    display: none;
  }

  .ouverture-faits {
    flex-direction: column;
    margin-bottom: 0;
  }

  .ouverture-faits li,
  .ouverture-faits li:first-child {
    padding: 0 0 0 0.9rem;
    border-left: 1px solid var(--safran);
  }
}

/* --------------------------------- Récits -------------------------------- */
.editorial {
  position: relative;
  overflow: clip;
  padding-block: clamp(80px, 10vw, 160px);
  border-top: 0;
}

/* Le fil long court dans la marge gauche, à côté des récits, jamais sur le texte. */
.fil-long {
  position: absolute;
  top: 0;
  left: max(6px, calc((100vw - var(--large)) / 2 - 64px));
  width: 64px;
  height: 100%;
  opacity: 0.75;
  z-index: 0;
  display: none;
}

@media (min-width: 1240px) {
  .fil-long {
    display: block;
  }
}

.fil-long .fil-trace {
  stroke-width: 1.5;
}

.recit {
  position: relative;
  z-index: 1;
}

.recit + .recit {
  margin-top: clamp(96px, 12vw, 200px);
}

.recit-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
}

.recit-visuel {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.recit-visuel img {
  width: 100%;
}

.recit-texte h2 {
  margin-bottom: 1.5rem;
}

.recit-texte p {
  max-width: 34em;
  color: var(--texte-doux);
}

.recit-texte .recit-grand {
  max-width: 26em;
  font-family: var(--serif);
  font-size: clamp(21px, 15px + 1.15vw, 32px);
  line-height: 1.42;
  color: var(--texte);
}

@media (min-width: 900px) {
  .recit-grille {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 8rem);
  }

  .recit-inverse .recit-grille,
  .recit-grille.recit-inverse {
    grid-template-columns: 6fr 5fr;
  }

  .recit-inverse .recit-visuel {
    order: 2;
  }

  .recit-inverse .recit-grille {
    grid-template-columns: 5fr 7fr;
  }

  .recit-grille.recit-suite-panorama {
    grid-template-columns: 7fr 4fr;
  }

  .recit-petit {
    max-width: 420px;
    justify-self: end;
  }
}

.panorama {
  position: relative;
  height: 72svh;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.panorama-cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.panorama-cadre picture,
.panorama-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panorama-voile {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 16, 13, 0.55), rgba(20, 16, 13, 0.15) 70%);
}

.panorama-titre {
  position: relative;
  overflow-wrap: normal;
  margin: 0;
  padding-inline: var(--gouttiere);
  font-size: clamp(44px, 8.2vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 2px 30px rgba(20, 16, 13, 0.45);
}

@media (min-width: 900px) {
  .panorama {
    height: calc(100svh - var(--brnsg-barre, 0px) - var(--entete-h));
  }
}

.recit-suite-panorama {
  margin-top: clamp(56px, 8vw, 120px);
}

/* ------------------------------- Assiettes ------------------------------- */
.assiettes {
  overflow: clip;
  background: var(--surface);
  border-top: 0;
}

.assiettes-epingle {
  padding-top: clamp(0px, 3vw, 2.5rem);
}

.assiettes-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.assiettes-tete h2,
.assiettes-tete .section-suite {
  margin: 0;
}

.assiettes-liste {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0 var(--gouttiere) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.assiettes-liste::-webkit-scrollbar {
  display: none;
}

.assiette {
  flex: 0 0 clamp(230px, 70vw, 360px);
  margin: 0;
  scroll-snap-align: start;
}

.assiette-visuel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fond);
}

.assiette-visuel picture,
.assiette-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assiette-visuel img {
  transition: opacity 200ms linear, transform 1100ms var(--ease);
}

.assiette:hover .assiette-visuel img {
  transform: scale(1.06);
}

.assiette-nom {
  margin: 1rem 0 0.3rem;
  font-family: var(--serif);
  font-size: clamp(19px, 17px + 0.4vw, 23px);
  line-height: 1.25;
}

.assiette-meta {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--safran);
}

/* Piste épinglée (motion.js, écrans larges) : la liste défile à l'horizontale. */
.assiettes-liste.piste-active {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  padding-inline: clamp(1rem, 4.5vw, 4.5rem);
}

.assiettes-liste.piste-active .assiette {
  flex-basis: min(360px, 44vh);
}

/* --------------------------------- Carte --------------------------------- */
.carte-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}

.carte-apercu {
  display: none;
}

@media (min-width: 1000px) {
  .carte-grille {
    grid-template-columns: 4fr 6fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }

  .carte-cote {
    position: sticky;
    top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 2rem);
  }

  .carte-apercu {
    display: block;
    position: relative;
    max-width: 400px;
    aspect-ratio: 4 / 5;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--surface);
  }
}

.carte-apercu-photo {
  position: absolute;
  inset: 0;
  transition: opacity 700ms var(--ease), transform 1200ms var(--ease);
}

.carte-apercu-photo picture,
.carte-apercu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-apercu-photo[data-saison="automne"] {
  opacity: 0;
  transform: scale(1.08);
}

.carte:has(#saison-automne:checked) .carte-apercu-photo[data-saison="automne"] {
  opacity: 1;
  transform: scale(1);
}

.carte:has(#saison-automne:checked) .carte-apercu-photo[data-saison="ete"] {
  opacity: 0;
  transform: scale(1.08);
}

/* Bascule de saison : deux cases de texte, la saison choisie passe en ivoire. */
.saison-bascule fieldset {
  gap: 0;
  margin-bottom: 0.75rem;
}

.saison-bascule legend {
  margin-bottom: 0.6rem;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.saison-choix {
  position: relative;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--bord-champ);
  font-family: var(--serif);
  font-size: 1.1rem;
  transition: background-color 450ms var(--ease), color 450ms var(--ease), border-color 450ms;
}

.saison-choix + .saison-choix {
  border-left: 0;
}

.saison-choix input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.saison-choix:has(input:checked) {
  background: var(--texte);
  color: var(--fond);
  border-color: var(--texte);
}

.saison-choix:has(input:focus-visible) {
  outline: 2px solid var(--safran);
  outline-offset: 3px;
}

.saison-choix:hover {
  border-color: var(--texte);
}

.famille-titre {
  font-size: clamp(24px, 20px + 0.8vw, 32px);
}

.plat:hover .plat-conduite {
  border-bottom-color: var(--safran);
}

.plat-prix {
  font-variant-numeric: lining-nums;
}

.plat-texte {
  color: var(--texte-doux);
}

.carte-photos picture {
  overflow: hidden;
}

/* --------------------------------- Menus --------------------------------- */
.menus-grille {
  gap: 0;
}

.menu {
  position: relative;
  padding: 2rem 0;
  border-top: 1px solid var(--filet);
  transition: background-color 600ms var(--ease);
}

.menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--safran);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 700ms var(--ease);
}

.menu:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (min-width: 900px) {
  .menu {
    padding: 2.5rem clamp(1.25rem, 2.5vw, 2.5rem) 2.75rem;
    border-top: 1px solid var(--filet);
    border-left: 1px solid var(--filet);
  }

  .menu:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .menu:hover {
    background: rgba(239, 231, 218, 0.03);
  }
}

.menu-nom {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.9rem;
}

.menu-prix {
  font-size: clamp(56px, 40px + 3.4vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.menu-texte {
  color: var(--texte-doux);
}

/* ------------------------------- Réserver -------------------------------- */
.reserver-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}

.reserver-visuel {
  display: none;
}

@media (min-width: 1000px) {
  .reserver-grille {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }

  .reserver-cote {
    position: sticky;
    top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 2rem);
  }

  .reserver-visuel {
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    background: var(--surface);
  }

  .reserver-corps .formulaire {
    margin-top: 0;
  }
}

.champ input,
.champ select,
.champ textarea {
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: rgba(239, 231, 218, 0.7);
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline-color: var(--safran);
  background: var(--surface);
}

/* ---------------------------------- Avis --------------------------------- */
.avis {
  background: var(--surface);
  border-top: 0;
}

.avis-note {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  color: var(--texte-doux);
}

.avis-chiffre {
  display: block;
  font-size: clamp(110px, 16vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--texte);
  font-variant-numeric: lining-nums tabular-nums;
  /* La virgule de la Bodoni descend sous la ligne : place pour la phrase qui suit. */
  margin-bottom: 0.16em;
}

.avis-extrait p {
  font-family: var(--serif);
  font-size: clamp(18px, 16px + 0.4vw, 21px);
  line-height: 1.5;
}

.avis-extrait {
  border-top-color: var(--safran);
}

@media (min-width: 900px) {
  .avis .bande > h2 {
    margin-bottom: 0.5rem;
  }

  .avis-liste {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ---------------------------------- Infos -------------------------------- */
.infos-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}

.infos-adresse {
  font-family: var(--serif);
  font-size: clamp(24px, 20px + 1vw, 36px);
  line-height: 1.2;
}

@media (min-width: 900px) {
  .infos-grille {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}

/* --------------------------- Pages intérieures --------------------------- */
.section-premiere {
  padding-top: clamp(64px, 9vw, 140px);
}

.section-premiere h1 {
  font-size: clamp(48px, 30px + 4.6vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.04em;
}

.section-premiere .colonne {
  max-width: calc(880px + 2 * var(--gouttiere));
}

.fil-titre {
  width: min(320px, 70%);
  height: auto;
  margin: 0.4rem 0 2rem;
}

.visuel-large,
.personne picture,
.fournisseur picture,
.carte-photos picture {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.personne picture img,
.fournisseur picture img {
  transition: opacity 200ms linear, transform 1100ms var(--ease);
}

.personne:hover picture img,
.fournisseur:hover picture img {
  transform: scale(1.05);
}

.personne h3 {
  font-size: clamp(24px, 20px + 0.8vw, 30px);
}

.faq-item summary {
  transition: color 300ms;
}

.faq-item summary:hover {
  color: var(--safran);
}

/* Rideau safran posé par motion.js dans une figure avant de la découvrir. */
.infusion {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--safran);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* --------------------------------- Pied ---------------------------------- */
.pied-signature {
  margin: 0;
  padding: clamp(1rem, 3vw, 2.5rem) 0 0.06em;
  overflow: hidden;
  font-family: var(--serif);
  font-size: clamp(48px, 12.6vw, 230px);
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-align: center;
  white-space: nowrap;
  color: var(--texte);
}

/* ---------------------- État initial avant animation ---------------------- */
/* Seulement sous html.js-motion : sans JavaScript, ou si motion.js ne démarre
   pas, la classe est retirée et ces règles ne s'appliquent pas. */
html.js-motion .ouverture-photo {
  clip-path: inset(9% 7% 9% 7%);
}

html.js-motion .ouverture-photo img {
  transform: scale(1.22);
}

html.js-motion .ouverture-nom,
html.js-motion .ouverture-sur,
html.js-motion .ouverture-faits li,
html.js-motion .ouverture-actions,
html.js-motion .ouverture-defiler,
html.js-motion .section-premiere h1,
html.js-motion .fil {
  visibility: hidden;
}

/* --------------------------- Transitions de page -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: 420ms cubic-bezier(0.7, 0, 0.84, 0) both bs-page-sortie;
  }

  ::view-transition-new(root) {
    animation: 700ms cubic-bezier(0.16, 1, 0.3, 1) both bs-page-entree;
  }
}

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

@keyframes bs-page-entree {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

/* Photo d'en-tête des pages intérieures : un bandeau, jamais un portrait plein écran. */
.section-premiere .visuel-large img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}