/* ============================================================
   M&R Lashes
   Système : vert forêt profond + os + ambre.
   Rayons  : 0 partout (angles vifs). Seule exception documentée :
             les boutons et le chip .todo sont en pilule (999px).
   Thème   : verrouillé sur une seule identité, décliné sombre/clair.
   ============================================================ */

/* ── Jetons ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --ink:        #F2E5D7;
  --ink-2:      #F9EFE4;
  --ink-3:      #E7D5C4;
  --bone:       #2A1F17;
  --bone-dim:   #725A46;
  --amber:      #825835;
  --amber-soft: rgba(130, 88, 53, .11);
  --line:       rgba(42, 31, 23, .17);
  --line-2:     rgba(42, 31, 23, .32);
  --scrim:      linear-gradient(to top, rgba(26, 18, 13, .88) 8%, rgba(26, 18, 13, .3) 55%, rgba(26, 18, 13, .05) 100%);
  --grain-op:   .035;

  --serif: "Cormorant", "Didot", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --btn-bg: #2A1F17;
  --btn-fg: #F5E8DA;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 4.5rem;

  color-scheme: light;
  --r:      18px;   /* rayon des surfaces */
  --lift:   0 18px 40px -22px rgba(42, 31, 23, .45);
  --lift-2: 0 30px 70px -28px rgba(42, 31, 23, .55);
  --r-sm:   12px;   /* rayon des petits éléments */
  --z-grain: 90;
  --z-nav: 80;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0;
}

::selection { background: var(--amber); color: var(--ink); }

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

.wrap { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--amber); color: #F5E8DA;
  padding: .75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typo utilitaires ───────────────────────────────────── */
.eyebrow {
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--bone-dim);
  margin: 0 0 1.25rem;
}

.section-title {
  font-size: clamp(2.28rem, 4.1vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 clamp(2.25rem, 4vw, 3.5rem);
}

.lede {
  font-size: clamp(1.075rem, 1rem + .5vw, 1.3rem);
  line-height: 1.55;
  color: var(--bone);
  max-width: 46ch;
}

.todo {
  display: inline-block;
  border: 1px dashed var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-size: .8em;
  letter-spacing: .04em;
  padding: .05em .6em;
  white-space: nowrap;
}

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  --btn-pad: .95rem 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-pad);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .18s var(--ease);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: color-mix(in srgb, var(--btn-bg) 86%, var(--amber)); }
.btn--ghost { border-color: var(--line-2); color: var(--bone); background: transparent; }
.btn--ghost:hover { border-color: var(--bone); background: var(--amber-soft); }
.btn:active { transform: translateY(1px); }
.btn--sm { --btn-pad: .7rem 1.35rem; font-size: .78rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Le verrou est monotypographique : « M&R » et « Lashes » sont posés dans le
   même Cormorant, séparés par la seule graisse et l'interlettrage. Le texte
   hérite de la couleur du thème en cours, un seul jeu de règles sert donc au
   mode sombre comme au mode clair. Seul l'arc de cils est un tracé, appliqué
   en masque pour prendre lui aussi la couleur courante. */
/* Verrou officiel : le fichier fourni par le studio, détouré sur fond
   transparent. Le trait gravé étant très fin, il est légèrement épaissi à
   l'export — en dessous de 44 px de haut il s'efface. */
.wordmark {
  display: flex;
  align-items: center;
  color: var(--bone);
}
/* Le verrou est appliqué en masque : il prend la couleur courante, donc
   crème au-dessus de la vidéo et encre dès que la barre se colle. */
.wordmark__img {
  display: block;
  height: 3rem;
  width: calc(3rem * 906 / 270);
  max-width: 100%;
  background: currentColor;
  -webkit-mask: url("assets/logo-mr-lashes.png") left center / contain no-repeat;
  mask: url("assets/logo-mr-lashes.png") left center / contain no-repeat;
}

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: .35rem;
  position: relative;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__end { display: flex; align-items: center; gap: .85rem; }


.burger {
  display: none;
  width: 2.35rem; height: 2.35rem;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute; left: 50%; width: 15px; height: 1px;
  background: var(--bone);
  transform: translateX(-50%);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

/* Menu plein écran. Il se glisse SOUS la barre (z-index inférieur) : le
   logo et la croix restent visibles et cliquables pendant l'ouverture. */
.drawer {
  position: fixed;
  inset: 0;
  /* Juste sous la barre (80) : le logo et la croix restent visibles.
     Le menu est un frère du <header>, pas un enfant — `.nav.is-stuck` pose
     un backdrop-filter, qui ferait du <header> le bloc conteneur de tout
     descendant en position:fixed et écraserait le menu dans la barre. */
  z-index: 79;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  padding: calc(var(--nav-h) + 2rem) 1.5rem max(2rem, env(safe-area-inset-bottom));
  background: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: drawer-in .45s var(--ease) both;
}
.drawer[hidden] { display: none; }
@keyframes drawer-in { from { opacity: 0; } to { opacity: 1; } }

.drawer__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
}
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 11vw, 2.9rem);
  line-height: 1.1;
  padding-block: .45rem;
  border-bottom: 1px solid var(--line);
  animation: drawer-item .5s var(--ease) both;
  animation-delay: calc(60ms + var(--i, 0) * 45ms);
}
.drawer__nav a:last-child { border-bottom: 0; }
.drawer__nav a i {
  font-style: normal;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--amber);
}
@keyframes drawer-item {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.drawer__foot {
  display: grid;
  gap: 1.1rem;
  animation: drawer-item .5s var(--ease) both;
  animation-delay: .38s;
}
.drawer__contact {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .92rem;
}
.drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-block: .35rem;
}
.drawer__hours {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--bone-dim);
}
/* La pastille flottante ne doit pas se superposer au menu ouvert. */
html:has(.drawer:not([hidden])) .wa { opacity: 0; pointer-events: none; }
html:has(.drawer:not([hidden])) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer__nav a, .drawer__foot { animation: none; }
}

/* ── Hero ───────────────────────────────────────────────
   Vidéo plein cadre, muette et en boucle, sous un voile sombre.
   Le texte passe en crème : c'est le seul bloc du site à contraste
   inversé, la palette reste celle de la charte. */
.hero {
  position: relative;
  min-height: min(92vh, 46rem);
  display: grid;
  align-content: center;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 5.5rem;
  overflow: hidden;
  isolation: isolate;
  color: #F5E8DA;
}
.hero__film {
  position: absolute; inset: 0; z-index: -2;
  background: #241B14 url("assets/hero-3.jpg") center 58% / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(26, 18, 13, .86) 0%,
      rgba(26, 18, 13, .64) 44%,
      rgba(26, 18, 13, .2) 100%),
    linear-gradient(to bottom,
      rgba(26, 18, 13, .5), transparent 30%, rgba(26, 18, 13, .74));
}
.hero__in { max-width: 46rem; }
.hero .eyebrow { color: #DCB894; }
.hero__title {
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: 1;
  margin: 1rem 0 1.35rem;
}
.hero__title em { font-style: italic; color: #E8CBAA; }
.hero__sub {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem);
  line-height: 1.65;
  color: #E3D5C4;
  max-width: 42ch;
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero .btn--primary { background: #F5E8DA; color: #2A1F17; border-color: #F5E8DA; }
.hero .btn--primary:hover { background: var(--amber); border-color: var(--amber); color: #F5E8DA; }
.hero .btn--ghost { color: #F5E8DA; border-color: rgba(245, 232, 218, .55); }
.hero .btn--ghost:hover { background: rgba(245, 232, 218, .12); }

/* Tant que la barre flotte au-dessus de la vidéo, elle s'éclaircit. */
.nav:not(.is-stuck) { color: #F5E8DA; }
.nav:not(.is-stuck) .wordmark { color: #F5E8DA; }
.nav:not(.is-stuck) .nav__links a { color: rgba(245, 232, 218, .82); }
.nav:not(.is-stuck) .nav__links a:hover { color: #F5E8DA; }
.nav:not(.is-stuck) .burger span { background: #F5E8DA; }
.nav:not(.is-stuck) .btn--primary {
  background: #F5E8DA; color: #2A1F17; border-color: #F5E8DA;
}

@media (max-width: 720px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 4.5rem;
  }
  /* En portrait, le voile descend au lieu d'aller de gauche à droite. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(26, 18, 13, .88) 0%,
      rgba(26, 18, 13, .72) 44%,
      rgba(26, 18, 13, .44) 74%,
      rgba(26, 18, 13, .82) 100%);
  }
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .hero__sub { font-size: 1rem; margin-bottom: 1.6rem; }
  .hero__cta { display: grid; gap: .7rem; }
  .hero__cta .btn { width: 100%; }
  .wordmark__img { height: 2.5rem; width: calc(2.5rem * 906 / 270); }
}

.ribbon {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 1.15rem;
}
.ribbon__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: slide 44s linear infinite;
}
.ribbon__track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
}
.ribbon__track span::after {
  content: "";
  width: 1px; height: 1.1em;
  background: var(--line-2);
}
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; }
}

/* ── Emplacements photo ─────────────────────────────────── */
/* Tant que le fichier n'est pas déposé dans assets/, un aplat
   texturé de marque s'affiche avec le libellé de la photo attendue. */
.ph-slot {
  --img: none;
  --ratio: 3 / 4;
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.ph-slot::before {
  content: "";
  display: block;
  aspect-ratio: var(--ratio);
  background-image: var(--img),
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 60%),
    repeating-linear-gradient(128deg, rgba(249,234,217,.05) 0 2px, transparent 2px 11px),
    linear-gradient(155deg, var(--ink-3), var(--ink-2) 60%, var(--ink));
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--ease);
}
.ph-slot:hover::before { transform: scale(1.03); }
.ph-slot figcaption {
  font-weight: 500;
  position: absolute;
  inset: auto 1rem 1rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}
.ph-slot figcaption::before {
  content: "photo à déposer · ";
  color: var(--bone-dim);
}
.ph-slot.has-img figcaption { display: none; }

.ph-slot--hero { --ratio: 3 / 4; }
.ph-slot--tall { --ratio: 4 / 5; }

/* ── L'atelier ──────────────────────────────────────────── */
.atelier { padding-block: clamp(5rem, 11vw, 9.5rem); }
.atelier__grid {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.atelier__copy h2 {
  font-size: clamp(2.28rem, 4.3vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 1.75rem;
}
.atelier__copy .lede { margin-bottom: 1.5rem; }
.atelier__copy p:not(.lede):not(.signature) { color: var(--bone-dim); max-width: 54ch; }
.signature {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
}
.signature span:last-child {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--bone-dim);
  margin-top: .35rem;
}

/* ── Prestations (bento) ────────────────────────────────── */
.prestations { padding-bottom: clamp(5rem, 11vw, 9.5rem); }
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--lift);
  transform-style: preserve-3d;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  transition: background-color .5s var(--ease);
}
.tile:hover { background: var(--ink-2); }
.tile h3 {
  font-size: clamp(1.48rem, 2.2vw, 2rem);
  margin-bottom: .6rem;
}
.tile p {
  color: var(--bone-dim);
  font-size: .95rem;
  max-width: 38ch;
}
.tile__meta {
  font-weight: 500;
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}
.tile__body { position: relative; z-index: 1; }

.tile--a { grid-column: span 7; min-height: 26rem; }
.tile--c { grid-column: span 5; min-height: 26rem; }
.tile--e { grid-column: span 12; min-height: 22rem; }

/* Tuiles photo : l'image occupe le fond, un voile garde le texte lisible. */
.tile.ph-slot {
  --img: none;
  background-image: var(--img),
    radial-gradient(110% 80% at 70% 10%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 62%),
    repeating-linear-gradient(128deg, rgba(249,234,217,.05) 0 2px, transparent 2px 11px),
    linear-gradient(155deg, var(--ink-3), var(--ink-2) 60%, var(--ink));
  background-size: cover;
  background-position: center;
}
.tile.ph-slot::before {
  content: "";
  position: absolute; inset: 0;
  aspect-ratio: auto;
  background: var(--scrim);
}
.tile.ph-slot h3, .tile.ph-slot p { color: #F2E5D7; }
.tile.ph-slot .tile__meta { color: #D9AE84; }

/* ── Tarifs ─────────────────────────────────────────────── */
.tarifs { padding-block: clamp(5rem, 11vw, 9.5rem); background: var(--ink-2); border-block: 1px solid var(--line); }
.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
  align-items: stretch;
}
/* Chaque famille de prestations tient dans sa propre carte : la carte
   des tarifs se lit alors comme trois offres, pas comme un tableau. */
.menu__col {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  box-shadow: var(--lift);
}
.menu__head {
  font-weight: 500;
  font-size: .92rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--amber);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
/* La note reste collée en bas quelle que soit la hauteur des voisines. */
.menu__col .menu__note { margin-top: auto; padding-top: 1.5rem; }
/* Deux rangs plutôt qu'une seule ligne : le nom et le prix se font face,
   la durée se range dessous. Un libellé long passe à la ligne sans jamais
   désaligner la colonne des prix — c'est ce qui cassait en colonne étroite. */
.price li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: baseline;
  padding-block: .8rem;
}
.price li + li { border-top: 1px solid var(--line); }
.price__name {
  grid-column: 1;
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}
.price__dur {
  grid-column: 1;
  margin-top: .15rem;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.price__val {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--serif);
  font-size: 1.45rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu__note {
  margin-top: 1.75rem;
  font-size: .88rem;
  color: var(--bone-dim);
  max-width: 40ch;
}

/* ── L'offre mixte ──────────────────────────────────────
   Un seul encart, posé sous la carte : le duo se lit comme une
   proposition, pas comme une ligne de plus dans une colonne. */
.duo {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--lift-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.duo__txt { flex: 1 1 22rem; }
.duo__titre {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: .5rem;
}
.duo__txt p { margin: 0; color: rgba(245, 232, 218, .7); max-width: 46ch; font-size: .95rem; }

/* Le prix se lit d'un bloc : durée, montant, référence barrée, action. */
.duo__prix {
  margin: 0;
  display: grid;
  justify-items: end;
  gap: 1rem;
  text-align: right;
}
.duo__chiffres { margin: 0; display: grid; justify-items: inherit; gap: .15rem; }
/* Sur l'encart sombre, le bouton s'inverse pour rester le point le plus clair. */
.duo .btn--primary {
  background: var(--btn-fg);
  color: var(--btn-bg);
  border-color: var(--btn-fg);
}
.duo .btn--primary:hover { background: var(--amber); border-color: var(--amber); color: #F5E8DA; }
.duo__dur {
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #DCB894;
}
.duo__val {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.duo__ref {
  font-size: .82rem;
  color: rgba(245, 232, 218, .55);
  text-decoration: line-through;
  text-decoration-color: rgba(245, 232, 218, .4);
}

/* ── Déroulé ────────────────────────────────────────────── */
.deroule { padding-block: clamp(5rem, 11vw, 9.5rem); }
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
.rail__step { position: relative; }
.rail__step::before {
  content: "";
  position: absolute;
  top: -2.5rem; left: 0;
  width: 1px; height: 1.35rem;
  background: var(--amber);
}
.rail__step h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.rail__step p { color: var(--bone-dim); font-size: .95rem; }

/* ── Galerie ────────────────────────────────────────────── */
.galerie { padding-bottom: clamp(5rem, 11vw, 9.5rem); }
.galerie__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.galerie__head .section-title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.galerie__hint {
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(1.25rem, calc((100vw - 1240px) / 2));
  padding-block: .5rem 1.25rem;
  scroll-padding-inline-start: max(1.25rem, calc((100vw - 1240px) / 2));
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.ph-slot--card {
  --ratio: 4 / 5;
  flex: 0 0 clamp(14rem, 21vw, 18.5rem);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
}
.ph-slot--card[hidden] { display: none; }
.ph-slot--card figcaption {
  position: static;
  display: block;
  padding: .9rem 1rem 1rem;
  color: var(--bone-dim);
  letter-spacing: .1em;
}
.ph-slot--card figcaption::before { content: none; }
.ph-slot--card.has-img figcaption { display: block; }

/* ── Avis ───────────────────────────────────────────────── */
.avis { padding-block: clamp(5rem, 11vw, 9rem); background: var(--ink-2); border-block: 1px solid var(--line); }
.avis__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 2.75rem;
  align-content: start;
  align-items: start;
}
.quote { margin: 0; }
.quote p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.quote--lead {
  grid-row: span 2;
  border-left: 1px solid var(--amber);
  padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
}
.quote--lead p {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.34;
  letter-spacing: -.01em;
}
.quote cite {
  font-style: normal;
  font-size: .84rem;
  letter-spacing: .06em;
}
.quote cite span {
  font-weight: 500;
  display: block;
  color: var(--bone-dim);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .2rem;
}
.avis__grid .quote:not(.quote--lead) + .quote { margin-top: .5rem; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { padding-block: clamp(5rem, 11vw, 9.5rem); }
.faq__grid {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq__aside .section-title { margin-bottom: 0; }

.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.46rem);
  transition: color .3s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.25rem;
  color: var(--amber);
  transition: transform .4s var(--ease);
}
.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa summary:hover { color: var(--amber); }
.qa__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--bone-dim);
  font-size: .97rem;
  max-width: 62ch;
}
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa__body { animation: qa-in .45s var(--ease) both; }
  @keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* ── Réserver ───────────────────────────────────────────── */
.reserver { padding-block: clamp(5rem, 11vw, 9.5rem); background: var(--ink-2); border-top: 1px solid var(--line); }
.reserver__grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.infos {
  margin: 2.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}
.infos dt {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: .5rem;
}
.infos dt i { font-size: 1rem; color: var(--amber); }
.infos dd { margin: 0; font-size: .97rem; line-height: 1.5; }

.form {
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.35rem;
}
.field { display: grid; gap: .5rem; }
.field label {
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--bone);
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .8rem .95rem;
  width: 100%;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--bone-dim); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--ink);
}
.field select { appearance: none; background-image: none; cursor: pointer; }
.hint { font-size: .8rem; color: var(--bone-dim); margin: 0; }
.err { font-size: .8rem; color: var(--amber); margin: 0; }
.field.is-invalid input,
.field.is-invalid select { border-color: var(--amber); }

.form__status {
  margin: 0;
  font-size: .92rem;
  padding: .9rem 1rem;
  border: 1px solid var(--amber);
  background: var(--amber-soft);
}

/* ── Pied de page ───────────────────────────────────────── */
.footer { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
/* L'emblème est posé en masque, comme le verrou de la barre : il prend la
   couleur courante, donc crème au repos et ambre au survol. */
.logo-full { display: inline-block; color: var(--bone); }
.logo-full__img {
  display: block;
  width: clamp(10rem, 16vw, 14rem);
  max-width: 100%;
  aspect-ratio: 566 / 478;
  background: currentColor;
  -webkit-mask: url("assets/logo-mr-lashes-embleme.png") left center / contain no-repeat;
  mask: url("assets/logo-mr-lashes-embleme.png") left center / contain no-repeat;
}
.logo-full { transition: color .35s var(--ease); }
.logo-full:hover, .logo-full:focus-visible { color: var(--amber); }
.footer__line { margin-top: 1rem; color: var(--bone-dim); font-size: .92rem; }
.footer__nav { display: grid; gap: .6rem; }
.footer__nav a { font-size: .88rem; color: var(--bone-dim); transition: color .3s var(--ease); }
.footer__nav a:hover { color: var(--bone); }
.footer__legal { font-size: .82rem; color: var(--bone-dim); }
.footer__legal p { margin-bottom: .5rem; }

/* ── Apparitions au défilement ──────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ── Adaptations ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .hero__grid { grid-template-columns: 1fr .85fr; }
  .atelier__grid { grid-template-columns: 1fr; }
  .atelier__grid .ph-slot { max-width: 26rem; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .reserver__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Trois colonnes de tarifs ne tiennent plus : deux, la troisième dessous. */
  .menu { grid-template-columns: 1fr 1fr; }

  .tile--a, .tile--c { grid-column: span 6; min-height: 24rem; }
  .tile--e { grid-column: span 12; }
}

@media (max-width: 760px) {
  .hero { padding-top: 5.5rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Cadrage paysage au-dessus du titre : le bouton reste visible sans défiler. */
  .hero__frame { order: -1; }
  .hero__frame .ph-slot { --ratio: 5 / 4; }
  .hero__title { font-size: clamp(2.6rem, 13vw, 3.6rem); margin-bottom: 1.15rem; }
  .hero__sub { max-width: none; margin-bottom: 1.75rem; }
  .hero__cta .btn { flex: 1 1 auto; }

  .menu { grid-template-columns: 1fr; }
  /* Le prix passe sous le texte : à cette largeur, côte à côte, il se
     retrouvait seul sur une ligne trop courte pour être lu. */
  .duo { display: grid; justify-items: start; }
  .duo__prix { justify-items: start; text-align: left; }
  .duo__chiffres { justify-items: start; }
  /* Les cartes s'empilent : elles gagnent en respiration ce qu'elles
     perdent en largeur. */
  .menu__col { padding: 1.35rem 1.25rem; }
  .price li { padding-block: .85rem; }
  .price__name { font-size: 1.06rem; }
  .price__val { font-size: 1.5rem; }

  .rail { grid-template-columns: 1fr; border-top: 0; padding-top: 0; gap: 2rem; }
  .rail__step { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .rail__step::before { top: .35rem; left: -1px; width: 1px; height: 1.35rem; }

  .avis__grid { grid-template-columns: 1fr; }
  .quote--lead { grid-row: auto; }

  .bento { grid-template-columns: 1fr; }
  .tile--a, .tile--c, .tile--e { grid-column: span 1; min-height: 0; }
  .tile--a, .tile--c, .tile--e { min-height: 20rem; }

  .infos { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* La barre tient sur une ligne : le regard suffit à identifier la marque. */
  .nav__inner { gap: .75rem; }
  .btn--sm { --btn-pad: .62rem 1.05rem; font-size: .72rem; letter-spacing: .08em; }
  .burger { width: 2.1rem; height: 2.1rem; }
  .burger span:nth-child(1) { top: 12px; }
  .burger span:nth-child(2) { top: 18px; }
  .logo-full__img { width: 11rem; }
}

/* ── WhatsApp ────────────────────────────────────────────
   Le vert de la marque WhatsApp est volontairement écarté : la charte
   n'admet aucune couleur hors de l'axe nude. Seule l'icône signale le
   canal, la pastille reste dans la palette. */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 75;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .78rem 1.3rem .78rem 1.05rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  box-shadow: 0 12px 34px rgba(42, 31, 23, .22);
  transition: transform .45s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), box-shadow .45s var(--ease);
}
.wa:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #F5E8DA;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(42, 31, 23, .28);
}
.wa i { font-size: 1.22rem; line-height: 1; }
.wa__txt {
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Bloc de contact dédié, dans la colonne d'informations. */
.wa-card {
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--ink-2);
}
.wa-card__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  margin-bottom: .5rem;
}
.wa-card p {
  color: var(--bone-dim);
  font-size: .92rem;
  margin-bottom: 1.1rem;
  max-width: 34ch;
}
.wa-card__num {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .04em;
  margin-bottom: 1.1rem;
}

@media (max-width: 600px) {
  .wa { padding: .7rem; gap: 0; }
  .wa .wa__txt { display: none; }
}

/* Emplacements photo encore vides : le repère disparaît de lui-même dès que
   le fichier correspondant est déposé dans assets/. */
.ph-slot--card:not(.has-img) figcaption::before {
  content: "Photo à déposer · ";
  color: var(--amber);
}
.tile.ph-slot .tile__slot {
  display: block;
  margin-bottom: .7rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #D9AE84;
}
.tile.ph-slot.has-img .tile__slot { display: none; }

/* ══ Profondeur ═══════════════════════════════════════════
   Trois effets, tous en transform seul (pas de reflow) et tous coupés si
   l'utilisateur a demandé moins d'animation.

   1. Inclinaison au pointeur, sur les appareils qui en ont un.
   2. Entrée en perspective, pilotée par le défilement natif quand le
      navigateur sait le faire — aucun écouteur de scroll.
   3. Parallaxe lente sur les photos de section.
   ══════════════════════════════════════════════════════════ */

.bento, .strip { perspective: 1400px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile, .ph-slot--card {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    transform:
      perspective(1400px)
      rotateX(calc(var(--ry, 0) * -3.2deg))
      rotateY(calc(var(--rx, 0) * 3.2deg))
      translateZ(0);
  }
  .tile:hover, .ph-slot--card:hover {
    box-shadow: var(--lift-2);
    transform:
      perspective(1400px)
      rotateX(calc(var(--ry, 0) * -3.2deg))
      rotateY(calc(var(--rx, 0) * 3.2deg))
      translateZ(14px);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile, .ph-slot--card, .rail__step, .quote {
      animation: depth-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 78%;
    }
    /* La photo de section dérive lentement dans son cadre. */
    .ph-slot--hero::before, .ph-slot--tall::before {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes depth-in {
  from { opacity: 0; transform: perspective(1400px) rotateX(7deg) translateY(34px) scale(.965); }
  to   { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0) scale(1); }
}
@keyframes drift {
  from { transform: scale(1.1) translateY(-2.2%); }
  to   { transform: scale(1.1) translateY(2.2%); }
}

/* ══ Mobile ═══════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Le relief coûte cher au défilement tactile : on le réduit. */
  .tile { box-shadow: 0 10px 24px -18px rgba(42, 31, 23, .4); }
  .bento, .strip { perspective: none; }

  /* Galerie sur deux colonnes : douze vignettes empilées font un mur. */
  .strip { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .ph-slot--card figcaption { padding: .6rem .7rem .75rem; font-size: .62rem; letter-spacing: .08em; }
  .galerie__hint { display: none; }

  .wrap { padding-inline: 1.15rem; }
  .section-title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .tile h3 { font-size: 1.55rem; }
  .tile p { font-size: .9rem; }
  .tile { padding: 1.25rem; }
  .tile--a, .tile--c, .tile--e { min-height: 17rem; }

  /* Cibles tactiles : 44 px minimum sur tout ce qui se touche. */
  .qa summary { padding-block: 1.15rem; }
  .footer__nav a, .drawer__contact a { padding-block: .5rem; }

  .wa-card { padding: 1.25rem 1.25rem 1.4rem; }
  .wa { right: 1rem; bottom: 1rem; }

  /* Le voile du hero passe à la verticale : en pleine largeur, le dégradé
     latéral laissait le titre sur la partie claire de la photo. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(26, 18, 13, .88) 0%,
      rgba(26, 18, 13, .72) 38%,
      rgba(26, 18, 13, .58) 62%,
      rgba(26, 18, 13, .86) 100%);
  }

  /* Rythme vertical : au pouce, les grands blancs deviennent des couloirs
     vides. On resserre les sections sans jamais coller les blocs. */
  .atelier, .tarifs, .deroule, .avis, .faq, .reserver { padding-block: clamp(3.25rem, 12vw, 5rem); }
  .prestations, .galerie { padding-bottom: clamp(3.25rem, 12vw, 5rem); }
  /* La pastille WhatsApp flotte au-dessus du pied de page : on lui laisse
     sa place plutôt que de laisser le dernier lien passer dessous. */
  .footer { padding-block: 2.75rem 7rem; }

  /* Cibles tactiles : 44 px minimum sur tout ce qui se touche, la mesure
     retenue par les recommandations d'accessibilité mobile. */
  .burger { width: 2.75rem; height: 2.75rem; }
  .burger span:nth-child(1) { top: 18px; }
  .burger span:nth-child(2) { top: 24px; }
  .btn--sm { --btn-pad: .82rem 1.2rem; }
  .chip { padding: .72rem 1.1rem; }
  .rond { width: 3rem; height: 3rem; }
  .footer__nav a, .drawer__contact a { padding-block: .62rem; }
  .wa-card__num { display: inline-block; padding-block: .55rem; }
  .infos dd a { display: inline-block; padding-block: .35rem; }

  /* Lecture : le texte courant gagne une ligne un peu plus aérée, et les
     titres cessent de mordre sur les bords. */
  body { font-size: 1.02rem; line-height: 1.7; }
  .hero__sub { font-size: 1.05rem; }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.5rem, 13.5vw, 3.3rem); }
  .hero__cta { display: grid; gap: .7rem; }
  .hero__cta .btn { width: 100%; }
  .ribbon__track { gap: 2rem; }
  .strip { grid-template-columns: 1fr; }
  .ph-slot--card figcaption { font-size: .68rem; }
  .footer__grid { gap: 2rem; }
}

/* Confort tactile général. */
@media (pointer: coarse) {
  a, button, summary { -webkit-tap-highlight-color: rgba(130, 88, 53, .12); }
  .ph-slot:hover::before { transform: none; }
}

/* ── Galerie : filtres, flèches, jauge ────────────────────── */
.galerie__head { align-items: flex-end; }
.galerie__filtres { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.chip {
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: .5rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  transition: color .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease);
}
.chip:hover { color: var(--bone); }
.chip.is-on {
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}

.galerie__ctrl { display: flex; gap: .5rem; }
.rond {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--bone);
  font-size: 1.05rem;
  background: transparent;
  transition: color .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.rond:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.rond:disabled { opacity: .3; pointer-events: none; }

/* Jauge de progression : pilotée par le défilement du rail lui-même,
   sans écouteur, quand le navigateur sait le faire. */
.galerie__jauge {
  height: 2px;
  background: var(--line);
  margin-top: 1.5rem;
  border-radius: 999px;
  overflow: hidden;
}
.galerie__jauge span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(var(--p, .15));
  transition: transform .25s linear;
}
@media (max-width: 760px) {
  .galerie__ctrl { display: none; }
  .ph-slot--card { flex-basis: min(78vw, 20rem); }
  .galerie__filtres { margin-top: .9rem; }
}

.footer__credit { margin-top: .55rem; }
.footer__credit a {
  color: var(--bone-dim);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__credit a:hover { color: var(--amber); border-color: var(--amber); }

/* ══ Mobile · derniers réglages ═══════════════════════════
   Placé en fin de feuille à dessein : les filtres de la galerie et les
   flèches sont déclarés plus bas que le bloc mobile principal, ces
   règles-ci doivent donc passer après pour les atteindre. */
@media (max-width: 760px) {
  /* Les filtres de la galerie se touchent au pouce comme des boutons.
     La hauteur est posée en dur : le remplissage seul dépend de la
     hauteur de ligne et retombe sous la barre des 44 px. */
  .chip { padding: .55rem 1.15rem; min-height: 44px; display: inline-flex; align-items: center; }
  .galerie__filtres { gap: .45rem; }

  /* Le numéro de téléphone et le crédit sont des liens : même règle. */
  .infos dd a, .footer__credit a, .footer__legal a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Le bandeau défilant : deux fois moins de course, il reste lisible
     sans transformer la section en ruban interminable. */
  .ribbon__track span { font-size: 1.05rem; }
}