/* ============================================================
   Le Réfectoire · Feuille de style
   Design system + styles
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (variables) ---------- */
:root {
  /* Couleurs */
  --c-night:       #0E0E10;   /* fond principal */
  --c-night-2:     #14110F;   /* fond chaud alternatif */
  --c-night-3:     #1B1815;   /* surfaces / cartes */
  --c-night-4:     #232019;   /* surfaces élevées */
  --c-ivory:       #F5EFE6;   /* texte principal */
  --c-ivory-dim:   #C8C0B2;   /* texte secondaire */
  --c-ivory-faint: #8A8276;   /* texte tertiaire */
  --c-gold:        #C9A24B;   /* accent or champagne */
  --c-gold-soft:   #E0C079;   /* or clair (hover) */
  --c-terracotta:  #B5651D;   /* touche terracotta */
  --c-line:        rgba(245,239,230,.10); /* bordures */
  --c-line-strong: rgba(245,239,230,.18);

  /* Dégradés signature */
  --grad-gold:  linear-gradient(135deg, #E0C079 0%, #C9A24B 55%, #9d7a2f 100%);
  --grad-warm:  linear-gradient(160deg, #2a2018 0%, #14110F 60%, #0E0E10 100%);
  --grad-fall:  linear-gradient(135deg, #3a2a18 0%, #1B1512 100%);

  /* Typographies */
  --ff-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle d'espacement (base 8) */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Rayons */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 2px 10px rgba(0,0,0,.35);
  --sh-md: 0 14px 40px rgba(0,0,0,.45);
  --sh-lg: 0 30px 80px rgba(0,0,0,.55);
  --sh-gold: 0 12px 34px rgba(201,162,75,.28);

  /* Transitions */
  --t-fast: .2s ease;
  --t-mid:  .35s cubic-bezier(.4,.0,.2,1);
  --t-slow: .6s cubic-bezier(.16,1,.3,1);

  /* Layout */
  --maxw: 1200px;
  --header-h: 80px;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* clippe la gouttière de scrollbar pour le tiroir tablette (right:0) ; sûr : header fixed, aucun position:sticky */
}

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ivory);
  background: var(--c-night);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0 0 var(--sp-2); }

::selection { background: var(--c-gold); color: var(--c-night); }

/* Accessibilité : focus visible */
:focus-visible {
  outline: 2px solid var(--c-gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.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 d'évitement sur UNE ligne (22/09/2026) : placé à left: 50 %, il ne
   disposait que de la moitié de l'écran ; à 320 px, « Aller au contenu » passait
   sur deux lignes et dépassait de 14 à 17 px de sa cachette (top: -60px). */
.skip-link {
  position: absolute; left: 50%; top: -60px; white-space: nowrap;
  transform: translateX(-50%);
  background: var(--c-gold); color: var(--c-night);
  padding: .6rem 1.2rem; border-radius: var(--r-pill);
  font-weight: 600; z-index: 2000;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. LAYOUT UTILITAIRES ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

.eyebrow {
  font-family: var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-gold);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--c-gold);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--c-gold);
  display: inline-block;
}

.section-title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  color: var(--c-ivory);
  margin-bottom: var(--sp-3);
}
.section-title--center { text-align: center; }

.section-head { text-align: center; margin-bottom: var(--sp-6); }
.section-lead {
  max-width: 56ch; margin-inline: auto;
  color: var(--c-ivory-dim);
  font-size: 1.05rem;
}

/* ---------- 4. BOUTONS ---------- */
.btn {
  --pad-y: .9rem;
  --pad-x: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: var(--pad-y) var(--pad-x);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-mid), background var(--t-mid), color var(--t-mid), border-color var(--t-mid);
  position: relative;
  overflow: hidden;
}
.btn svg { transition: transform var(--t-fast); }

.btn--gold {
  background: var(--grad-gold);
  color: #1a1206;
  box-shadow: var(--sh-gold);
}
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(201,162,75,.4); }
.btn--gold:hover svg { transform: translateX(4px); }
.btn--gold:active { transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--c-ivory);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-soft);
  transform: translateY(-3px);
}
.btn--ghost:hover svg { transform: translateX(4px); }

.btn--sm { --pad-y: .65rem; --pad-x: 1.2rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* ---------- 5. HEADER ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid), backdrop-filter var(--t-mid), box-shadow var(--t-mid), height var(--t-mid), border-color var(--t-mid);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: 66px;
  background: rgba(14,14,16,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--c-gold);
}
.brand__mark { color: var(--c-gold); flex-shrink: 0; transition: transform var(--t-mid); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--c-ivory);
  letter-spacing: .01em;
}
.brand__sub {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--c-gold);
}
/* Nom long d'une démo dans l'en-tête de hauteur FIXE (18/09/2026) : deux lignes au
   plus, la suite en points de suspension (le nom complet reste dans la page), et
   sous-titre sur une ligne, abrégé s'il le faut ; sur trois lignes, le nom sortait
   de l'en-tête en haut et en bas. La marque peut rétrécir sous son contenu. */
.site-header .brand,
.site-header .brand__text { min-width: 0; }
.site-header .brand__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  /* Interlignage et marges compensées : le rognage ne coupe ni l'accent d'une
     capitale (« É ») ni les jambages (« g », « y »), mesuré au pixel. */
  line-height: 1.2;
  padding: .1em .06em .06em;
  margin: -.1em -.06em -.06em;
}
.site-header .brand__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation */
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-ivory-dim);
  padding: .4rem 0;
  white-space: nowrap; /* 18/09/2026 : « Ons verhaal », « De kaart » se repliaient à 900 px */
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid);
}
.nav__link:hover { color: var(--c-ivory); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--c-ivory); }
.nav__link.is-current::after { transform: scaleX(1); }

.nav__link--cta {
  border: 1px solid var(--c-gold);
  color: var(--c-gold-soft);
  padding: .55rem 1.2rem;
  border-radius: var(--r-pill);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  background: var(--c-gold);
  color: var(--c-night);
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  padding: 0 12px;
  position: relative;
  z-index: 1001; /* au-dessus de l'overlay du menu (z-index 900) */
  transition: border-color var(--t-fast);
}
.burger:hover { border-color: var(--c-gold); }
.burger.is-open { border-color: var(--c-gold); }
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--c-ivory);
  border-radius: 2px;
  transition: transform var(--t-mid), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5b. SÉLECTEUR DE LANGUE FR / NL ---------- */
/* Commutateur segmenté, intégré à la DA (mêmes variables, même or champagne) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: rgba(245,239,230,.04);
}
.lang-switch__btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--c-ivory-dim);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  line-height: 1;
  padding: .42rem .7rem;
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.lang-switch__btn:hover { color: var(--c-ivory); }
.lang-switch__btn.active {
  background: var(--grad-gold);
  color: #1a1206;
  box-shadow: var(--sh-gold);
}
.lang-switch__btn:focus-visible {
  outline: 2px solid var(--c-gold-soft);
  outline-offset: 2px;
}

/* Desktop : visible dans le header, masqué sur mobile (déplacé dans le menu burger) */
.lang-switch--desktop { margin-left: var(--sp-1); }
/* Mobile : par défaut masqué (visible uniquement dans le panneau burger) */
.lang-switch--mobile {
  display: none;
  margin-top: var(--sp-3);
  align-self: flex-start;
}

/* Téléphone du menu : masqué par défaut (visible uniquement dans le panneau burger) */
.nav__phone { display: none; }

/* ---------- 6. HERO ---------- */
/* En colonne (04/10/2026) : le contenu, seul élément en flux avec les deux espaces ci-dessous,
   reste centré dans les deux sens comme avant (align-items: center le centre en largeur). */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--grad-warm);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55) saturate(1.05);
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 30%, rgba(14,14,16,.55) 100%),
    linear-gradient(180deg, rgba(14,14,16,.55) 0%, rgba(14,14,16,.25) 35%, rgba(14,14,16,.92) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-top: var(--header-h);
}
.hero__title {
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: var(--sp-1) 0 var(--sp-3);
  text-shadow: 0 6px 40px rgba(0,0,0,.5);
}
.hero__tagline {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--c-ivory-dim);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--sp-4);
}
.hero__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: var(--sp-4); left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: .6rem;
  color: var(--c-ivory-dim);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .25em;
}
.hero__scroll-dot { animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: .3; }
}
/* Place réservée à l'indication « Défiler » (04/10/2026, décision de Charles, même remède que
   l'agence) : posée en bas d'un héros de la hauteur de l'écran, elle chevauchait les boutons dès
   que le contenu centré ne lui laissait plus la place (téléphone de 320 × 568 ou 360 × 640, tous
   les téléphones en paysage : la souris sur « Réserver une table »). Deux espaces flexibles égaux
   encadrent le contenu : tant qu'il reste de la place, le contenu reste centré au pixel près
   (rendu inchangé) ; sinon l'espace du bas garde au moins la hauteur de l'indication (retrait du
   bas, ligne de texte, écart, icône de 22 px) et 1rem d'air, et le héros s'allonge au besoin. */
.hero::before, .hero::after { content: ""; flex: 1 1 0; }
.hero::after { min-height: calc(var(--sp-4) + .68rem * 1.7 + .6rem + 22px + 1rem); }

/* ---------- 7. PHILOSOPHIE ---------- */
.philo {
  background: var(--c-night-2);
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-block: 1px solid var(--c-line);
}
.philo__inner { max-width: 880px; margin-inline: auto; text-align: center; }
.philo__quote { color: var(--c-gold); margin-bottom: var(--sp-1); }
.philo__text {
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-ivory);
  margin-bottom: var(--sp-3);
}
.philo__sign {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  color: var(--c-gold);
  margin: 0;
}

/* ---------- 8. SECTIONS GÉNÉRALES ---------- */
.story, .menu, .gallery, .reviews, .booking, .infos {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}

/* ---------- 9. NOTRE HISTOIRE ---------- */
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.story__media { position: relative; }
.story__media-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--grad-fall);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-lg);
}
.story__media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.story__media:hover .story__media-frame img { transform: scale(1.05); }
.story__media-frame::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.story__badge {
  position: absolute;
  right: -18px; bottom: 32px;
  background: var(--grad-gold);
  color: #1a1206;
  border-radius: var(--r-md);
  padding: 1rem 1.4rem;
  text-align: center;
  box-shadow: var(--sh-gold);
  line-height: 1.1;
}
.story__badge-num {
  display: block;
  font-family: var(--ff-serif);
  font-size: 2.6rem;
  font-weight: 700;
}
.story__badge-label {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .62rem;
  font-weight: 600;
}

.story__text p { color: var(--c-ivory-dim); }
.story__values {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.story__values li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--c-ivory-dim);
}
.story__values svg {
  color: var(--c-gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.story__values strong {
  display: block;
  color: var(--c-ivory);
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--ff-sans);
}

/* ---------- 10. MENU ---------- */
.menu { background: var(--c-night-2); border-block: 1px solid var(--c-line); }
.menu__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--sp-5);
}
.menu__tab {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ivory-dim);
  padding: .7rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  transition: all var(--t-fast);
}
.menu__tab:hover { border-color: var(--c-gold); color: var(--c-ivory); }
.menu__tab.is-active {
  background: var(--grad-gold);
  color: #1a1206;
  border-color: transparent;
  box-shadow: var(--sh-gold);
}

.menu__panel { animation: fadePanel .5s ease both; }
.menu__panel[hidden] { display: none; }
@keyframes fadePanel {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
  max-width: 980px;
  margin-inline: auto;
}
.menu-item { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.menu-item__name {
  font-size: 1.4rem;
  color: var(--c-ivory);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.menu-item:hover .menu-item__name { color: var(--c-gold-soft); }
.menu-item__dots {
  flex: 1;
  border-bottom: 1px dotted var(--c-line-strong);
  transform: translateY(-4px);
}
.menu-item__price {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-gold);
  white-space: nowrap;
}
.menu-item__desc {
  color: var(--c-ivory-faint);
  font-size: .92rem;
  margin: 0;
  line-height: 1.6;
}
.menu-item__tag {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-terracotta);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: .1rem .55rem;
  margin-left: .3rem;
  vertical-align: middle;
}
.menu__note {
  text-align: center;
  color: var(--c-ivory-faint);
  font-size: .85rem;
  margin-top: var(--sp-5);
  margin-bottom: 0;
}

/* ---------- 11. GALERIE ---------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: var(--sp-2);
}
/* Cadres de la galerie (recette du premier site client, 01/10/2026) :
   - `margin: 0` : un <figure> garde sinon les marges du navigateur (1em 40px), la
     photo ne remplissait pas sa case (80 px sur 160 en mobile, une bandelette) ;
   - bureau = mosaïque de QUATRE cadres (haut, deux, large : 3 × 2 cases pleines),
     le 5e resterait seul sur une 3e ligne : masqué ici, rendu en mobile ;
   - moins de 4 photos (la galerie d'une démo ne répète jamais une photo,
     render_restaurant) : 3 = une ligne de trois, 2 = le second sur deux colonnes,
     1 = toute la largeur ; jamais de case vide. */
.gallery__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-md);
  background: var(--grad-fall);
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item:nth-child(n+5) { display: none; }
.gallery__item--tall:first-child:nth-last-child(-n+3) { grid-row: span 1; }
.gallery__item:nth-child(2):last-child { grid-column: span 2; }
.gallery__item:only-child { grid-column: 1 / -1; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t-mid);
  filter: brightness(.85);
}
.gallery__item:hover img { transform: scale(1.08); filter: brightness(1); }
.gallery__item figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 1.4rem 1.2rem .9rem;
  width: 100%;
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--c-ivory);
  background: linear-gradient(0deg, rgba(14,14,16,.85), transparent);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.gallery__item:hover figcaption { transform: translateY(0); opacity: 1; }

/* ---------- 12. AVIS ---------- */
.reviews { background: var(--c-night-2); border-block: 1px solid var(--c-line); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.review {
  background: var(--c-night-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
.review:hover {
  transform: translateY(-6px);
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-md);
}
.review__stars { display: flex; gap: 3px; color: var(--c-gold); margin-bottom: var(--sp-2); }
.review__text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--c-ivory);
}
.review__author {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: var(--sp-3);
}
.review__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #1a1206;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.review__author span:last-child { display: flex; flex-direction: column; font-size: .85rem; color: var(--c-ivory-faint); }
.review__author strong { color: var(--c-ivory); font-size: .95rem; }

/* ---------- 13. RÉSERVATION ---------- */
.booking__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.booking__intro p { color: var(--c-ivory-dim); }
.booking__facts {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.booking__facts li {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--c-ivory-dim);
}
.booking__facts svg { color: var(--c-gold); flex-shrink: 0; }

.booking__form {
  background: var(--c-night-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--sh-md);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.field { margin-bottom: var(--sp-2); }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ivory-dim);
  margin-bottom: .45rem;
}
.field__opt { color: var(--c-ivory-faint); font-weight: 400; text-transform: none; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--c-night);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-ivory);
  font-family: var(--ff-sans);
  font-size: .95rem;
  padding: .8rem .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-ivory-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,.18);
}
/* Date/select : icônes lisibles sur fond sombre */
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A24B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
}
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); opacity: .7; cursor: pointer; }

.field.is-invalid input,
.field.is-invalid select { border-color: var(--c-terracotta); }
.field__error {
  display: block;
  color: #e08a4f;
  font-size: .78rem;
  margin-top: .35rem;
  min-height: 1px;
}

/* L'attribut hidden doit l'emporter sur le display ci-dessous. */
.booking__success[hidden] { display: none; }

.booking__success {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: var(--sp-3) 0 0;
  padding: 1rem 1.1rem;
  background: rgba(201,162,75,.10);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-sm);
  color: var(--c-gold-soft);
  font-size: .92rem;
  animation: fadePanel .4s ease both;
}
.booking__success svg { color: var(--c-gold); flex-shrink: 0; }

/* ---------- 14. INFOS PRATIQUES ---------- */
.infos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--sp-3);
}
.infos__card {
  background: var(--c-night-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.infos__card h3 {
  font-size: 1.6rem;
  color: var(--c-gold-soft);
  margin-bottom: var(--sp-3);
}
.hours li, .contact-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ivory-dim);
  font-size: .92rem;
}
.hours li:last-child { border-bottom: none; }
.hours li span:first-child { color: var(--c-ivory); font-weight: 500; }
.hours__closed { color: var(--c-terracotta); }

.contact-list li {
  justify-content: flex-start;
  align-items: center;
  gap: .9rem;
}
.contact-list svg { color: var(--c-gold); flex-shrink: 0; }
.contact-list a:hover { color: var(--c-gold-soft); }
.infos__card .btn { margin-top: var(--sp-3); }

.infos__map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  min-height: 240px;
}
.infos__map svg { width: 100%; height: 100%; display: block; }
.infos__map-pin {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  background: rgba(14,14,16,.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: .5rem 1rem;
  font-size: .8rem;
  color: var(--c-ivory);
}

/* ---------- 15. FOOTER ---------- */
.footer {
  background: var(--c-night-2);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-7);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}
.brand--footer { margin-bottom: var(--sp-2); }
.footer__tag { color: var(--c-ivory-faint); max-width: 32ch; font-size: .92rem; }
.footer__social { display: flex; gap: .7rem; margin-top: var(--sp-2); }
.footer__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  color: var(--c-ivory-dim);
  transition: all var(--t-fast);
}
.footer__social a:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
  transform: translateY(-3px);
}

.footer__col h4 {
  font-family: var(--ff-sans);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}
.footer__col ul { display: grid; gap: .6rem; }
.footer__col li, .footer__col a { color: var(--c-ivory-faint); font-size: .9rem; }
.footer__col a:hover { color: var(--c-ivory); }
.footer__newsletter p { color: var(--c-ivory-faint); font-size: .9rem; }

.newsletter__row {
  display: flex;
  gap: .5rem;
  margin-top: var(--sp-1);
}
.newsletter input {
  flex: 1;
  background: var(--c-night);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: var(--c-ivory);
  font-family: var(--ff-sans);
  padding: .7rem 1.1rem;
  font-size: .9rem;
  min-width: 0;
}
.newsletter input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(201,162,75,.18); }
.newsletter .btn--sm { --pad-x: 1rem; }
.newsletter__msg {
  margin: .7rem 0 0;
  font-size: .82rem;
  color: var(--c-gold-soft);
}
.newsletter__msg.is-error { color: #e08a4f; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  /* Bureau : la ligne du bas s'aligne sur les extrémités de son filet (marge
     intérieure du .container retirée), la marge extérieure du conteneur
     l'écarte du bord. Quand cette marge ne couvre plus la gouttière du
     .container (même clamp), la marge intérieure revient d'autant : le texte
     n'est jamais plus près du bord que la gouttière, et s'aligne sur les
     colonnes du pied sous 1200 px (constat du 03/10/2026 : copyright et liens
     légaux à x = 0 sur un téléphone de 390 px, au bord jusqu'à 1223 px).
     Rendu inchangé dès 1280 px de largeur utile ; de 1224 à 1279 px, le texte
     passe de 12-40 px du bord à 40 px. Le padding à zéro reste en repli pour
     les navigateurs sans padding-inline (rendu d'avant, rien de pire). */
  padding: var(--sp-3) 0;
  padding-inline: max(0px, clamp(1.2rem, 4vw, 2.5rem) - max(0px, (100% - var(--maxw)) / 2));
  border-top: 1px solid var(--c-line);
  color: var(--c-ivory-faint);
  font-size: .82rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--c-ivory); }

/* ---------- 16. ANIMATIONS REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 980px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { max-width: 460px; margin-inline: auto; }
  .booking__grid { grid-template-columns: 1fr; }
  .infos__grid { grid-template-columns: 1fr 1fr; }
  .infos__map { grid-column: 1 / -1; }
  .reviews__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* Menu replié (burger) jusqu'à 1023 px (18/09/2026, auparavant 860 px) : en
   néerlandais, la barre dépliée ne tient qu'à partir de 960 px environ ; à 900 px,
   « Ons verhaal » et « De kaart » se repliaient sur deux lignes. Seuil repris dans
   main.js (burgerMq). */
@media (max-width: 1023px) {
  /* Navigation mobile en panneau */
  .burger { display: flex; }
  /* Le sélecteur desktop disparaît, celui du menu burger apparaît */
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile { display: inline-flex; }
  /* ----------------------------------------------------------
     MENU MOBILE (base ≤1023px) — overlay PLEIN ÉCRAN sous le header.
     État fermé masqué via opacity/visibility (jamais hors-écran)
     => aucun scroll horizontal. La tranche TABLETTE (≥601px) le
     transforme en tiroir latéral (voir media query plus bas).
     ---------------------------------------------------------- */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    width: 100%;
    max-width: 100%;
    background: rgba(15, 13, 11, .98);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: clamp(1.5rem, 6vw, 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--t-mid), visibility var(--t-mid), transform var(--t-mid);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Menu ouvert : en-tête opaque et sans flou (18/09/2026, même correctif que le
     garage et l'artisan). L'en-tête densifié est flouté (backdrop-filter) : il
     devient alors la racine d'arrière-plan du panneau, dont le propre flou ne voit
     plus la page, et les 2 % que laisse passer le fond du menu la montraient nette
     sous les liens (« Réservez votre table », champs du formulaire). Classe du
     <body> posée par main.js en même temps que .nav.is-open. */
  body.nav-open .site-header {
    background: rgb(15, 13, 11);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* En-tête densifié (66 px, cf. .site-header.is-scrolled) : le panneau remonte
     d'autant, sinon une bande de page de 14 px restait visible entre les deux. */
  .site-header.is-scrolled .nav {
    top: 66px;
    height: calc(100vh - 66px);
    height: calc(100dvh - 66px);
  }

  /* Voile : utilisé uniquement par la version tablette (tiroir). Masqué ici. */
  .nav-scrim { display: none; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    width: 100%;
  }
  .nav__list li { width: 100%; }
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;            /* grande zone tactile */
    font-size: 1.2rem;
    padding: .6rem .9rem;        /* respiration horizontale pour le fond teinté */
    border-bottom: 1px solid var(--c-line);
    border-radius: var(--r-md);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .nav__link::after { display: none; } /* pas de soulignement animé en mode liste */

  /* État interactif des liens du menu (survol pointeur, APPUI tactile, focus clavier).
     Barre d'accent or qui se déploie + fond légèrement teinté + texte en or vif,
     lisibles sur le panneau sombre. Scope mobile/tablette uniquement. */
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 22px;
    border-radius: 3px;
    background: var(--c-gold);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform var(--t-fast);
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link:active {
    color: var(--c-gold-soft);
    background: rgba(201, 162, 75, .12);
  }
  .nav__link:hover::before,
  .nav__link:focus-visible::before,
  .nav__link:active::before {
    transform: translateY(-50%) scaleY(1);
  }
  /* Bord bas doré RENDU au bouton (01/10/2026) : `.nav__link` du menu mobile pose son
     filet de séparation en border-bottom, et le `border-bottom: none` d'ici effaçait
     aussi celui du bouton, devenu une boîte ouverte en bas (constat sur mobile). */
  .nav__link--cta {
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-top: var(--sp-2);
    border-bottom: 1px solid var(--c-gold);
    padding: .9rem 1.2rem;
  }
  /* La CTA garde son style pilule existant : on neutralise la barre/teinte. */
  .nav__link--cta::before { display: none; }
  .nav__link--cta:hover,
  .nav__link--cta:focus-visible,
  .nav__link--cta:active {
    background: var(--c-gold);
    color: var(--c-night);
  }

  /* Téléphone + sélecteur de langue, joliment intégrés dans le menu */
  .nav__phone {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    margin-top: var(--sp-2);
    color: var(--c-ivory);
    font-size: 1.05rem;
    font-weight: 500;
  }
  .nav__phone svg { color: var(--c-gold); flex-shrink: 0; }
  .nav__phone:hover { color: var(--c-gold-soft); }

  .lang-switch--mobile {
    margin-top: var(--sp-3);
    align-self: flex-start;
    padding: 4px;
  }
  /* Zones tactiles confortables pour la bascule FR / NL dans le menu */
  .lang-switch--mobile .lang-switch__btn {
    min-height: 44px;
    min-width: 56px;
    padding: .6rem 1rem;
    font-size: .85rem;
  }

  /* Verrou du scroll de la page quand le menu est ouvert. Porté aussi par <html>
     (18/09/2026) : son overflow-x: clip empêche l'overflow du <body> de remonter
     au viewport, et la page défilait sous le menu (et sous le voile du tiroir).
     Sans risque ici : en-tête fixe, aucun élément sticky. */
  body.nav-open { overflow: hidden; }
  html:has(body.nav-open) { overflow: hidden; }

  /* Le header étant fixed, on lui applique la même compensation de
     largeur de scrollbar que le body (variable posée en JS) afin
     d'éviter tout micro-saut horizontal à l'ouverture du menu. */
  body.nav-open .site-header { padding-right: var(--sb-comp, 0px); }
}

@media (max-width: 860px) {
  /* Garde-fou anti-scroll horizontal : le badge "25 ans" est posé en
     absolu avec right négatif (joli débord sur desktop). Sur mobile on
     le ramène DANS le cadre pour qu'aucun élément ne dépasse le viewport
     (scrollWidth === clientWidth), indépendamment de overflow-x:hidden. */
  .story__badge { right: 0; }
}

/* ============================================================
   TABLETTE (601–1023px) — le menu plein écran devient un TIROIR
   LATÉRAL droit + voile assombrissant. Pas de translateX (le
   panneau reste dans le viewport, masqué via opacity/visibility)
   => zéro scroll horizontal, compatible header fixed ET sticky.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1023px) {
  .nav {
    left: auto;
    right: 0;
    width: min(78vw, 400px);
    border-top: none;
    border-left: 1px solid var(--c-line);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .55);
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(8, 7, 6, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-mid), visibility var(--t-mid);
  }
  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 700px) {
  .menu__list { grid-template-columns: 1fr; }
  /* Mobile : deux colonnes en placement dense (le 5e cadre, rendu ici, comble la case
     que la large laisse sur sa ligne) ; 4 cadres = 2 × 2, 3 = le dernier sur toute la
     largeur, 2 = côte à côte, 1 = toute la largeur : jamais de case vide. */
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; grid-auto-flow: dense; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item:nth-child(5) { display: block; }
  .gallery__item--wide:nth-child(4):last-child { grid-column: span 1; }
  .gallery__item:nth-child(3):last-child { grid-column: span 2; }
  .gallery__item:nth-child(2):last-child { grid-column: span 1; }
  .infos__grid { grid-template-columns: 1fr; }
  /* minmax(0, 1fr) : une colonne 1fr ne descend pas sous la largeur minimale de son
     contenu (champ de la lettre à sa taille par défaut, e-mail d'un prospect dans une
     liste en grille) ; overflow-wrap: anywhere : un e-mail plus long que l'écran passe
     à la ligne au lieu de dépasser (03/10/2026, comme le commerce de bouche). */
  .footer__top { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .brand__sub { display: none; }
  .hero__actions .btn { width: 100%; }
  .menu-item__name { white-space: normal; }
}

/* ---------- 18. PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; transform: none; }
}


/* ============================================================
   DATE EN JJ-MM-AAAA — champ texte masqué + bouton calendrier
   Un <input type="date"> s'affiche dans la locale du NAVIGATEUR, pas dans
   celle du site : un visiteur dont le navigateur est en anglais lisait
   « 08/27/2026 » sur un site belge. Le champ date natif reste dans le DOM,
   transparent et neutralisé au clic — showPicker() refuse de s'ouvrir sur un
   display:none. Couleurs en currentColor + opacité : aucun jeton de palette,
   la règle tient sur un template clair comme sur un template sombre.
   ============================================================ */
.field-date { position: relative; }
.field-date > input[type="text"] { padding-right: 3rem; cursor: pointer; }
.field-date__btn {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: inherit;
  opacity: .55;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.field-date__btn:hover,
.field-date__btn:focus-visible { opacity: 1; }
/* Sélecteur porté à 2 classes : la règle d'input du template l'emporterait
   sinon et rendrait au champ natif sa largeur 100 % et son padding. */
.field-date > input.field-date__native {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Adresse e-mail affichée dans la page (04/10/2026, décision de Charles « E2 ») : le bot pose une
   coupure permise juste après « @ » (<wbr>) et enveloppe dans .itx-email une adresse écrite seule
   hors d'un lien. Cette coupure, et son filet (une partie encore trop longue se coupe n'importe
   où), ne jouent que dans les listes de contact, jusqu'à la largeur où leur section passe sur une
   colonne : une adresse longue y sortait de l'écran (démos du 04/10/2026 : jusqu'à 54 px à 320 px).
   Ailleurs (pied de page, colonnes qui s'élargissaient pour l'adresse en bureau), la coupure est
   neutralisée et le rendu reste celui d'avant. */
a[href^="mailto:"] wbr, .itx-email wbr { display: none; }
@media (max-width: 980px) {
  .booking__facts a[href^="mailto:"] wbr, .booking__facts .itx-email wbr { display: inline; }
  .booking__facts a[href^="mailto:"], .booking__facts .itx-email { overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .infos__card .contact-list a[href^="mailto:"] wbr, .infos__card .contact-list .itx-email wbr { display: inline; }
  .infos__card .contact-list a[href^="mailto:"], .infos__card .contact-list .itx-email { overflow-wrap: anywhere; }
}