/* ════════════════════════════════════════════════════════════════════════════
   Massothérapie Maryse — feuille de style unique, sans dépendance.

   DIRECTION ARTISTIQUE. Tout vient de son vrai logo : un script manuscrit, deux
   mains ouvertes et deux branches d'eucalyptus, en vert sauge sur blanc. Les
   couleurs sont échantillonnées dessus — le vert profond du trait (#5a7e6c)
   devient l'accent, l'eucalyptus pâle devient le fond des sections douces. Le
   papier est un lin chaud, jamais un blanc clinique : on vend une heure de
   calme, pas un examen médical.

   Titres en Marcellus — un romain élégant, posé, qui laisse le script du logo
   être la seule écriture manuscrite de la page. Texte en Mulish, humaniste et
   très lisible. Arrondis généreux (20 px) et beaucoup d'air : la mise en page
   doit se lire comme le service se ressent.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #2c3a33;               /* vert-gris profond, repris du trait du logo */
  --ink-soft: #3b4d44;
  --paper: #f4f1ea;             /* lin chaud */
  --card: #ffffff;
  --line: #e5e0d6;
  --text: #2f3b35;
  --muted: #7b857d;
  --crust: #5a7e6c;             /* vert sauge du logo, mesuré sur le fichier d'origine */
  --crust-soft: #e7eee9;
  --wheat: #cbb68e;             /* beige doré, pour réchauffer les fonds sombres */
  --on-dark: #f3f1ea;
  --on-dark-muted: #bcc5bd;
  --shadow: 0 1px 2px rgba(44, 58, 51, .05), 0 8px 24px -12px rgba(44, 58, 51, .14);
  --shadow-lg: 0 2px 6px rgba(44, 58, 51, .06), 0 24px 60px -28px rgba(44, 58, 51, .26);
  --r: 20px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --serif: "Marcellus", "Iowan Old Style", Georgia, serif;
  --display: "Marcellus", "Iowan Old Style", Georgia, serif;
  --script: "Marcellus", Georgia, serif;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
* { 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(--paper);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--crust); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.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; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 10px 16px; border-radius: 8px; }

/* ── Écran d'ouverture ─────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  background: #ffffff; animation: splash-out .5s ease forwards; animation-delay: 1.5s;
}
.splash .brand__icon { width: 128px; height: 128px; margin-bottom: 4px; animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .02s; }
.splash .splash__logo { width: min(62vw, 250px); height: auto; }
.brand__logo { height: 62px; width: auto; display: block; }
.brand__logo--foot { height: 88px; margin-bottom: 14px; }
.foot .brand__icon { width: 64px; height: 64px; }
.foot .brand__word { color: var(--on-dark); }
.foot .brand__word small { color: var(--wheat); }
.foot .brand { display: inline-block; }
.splash .brand__word { display: none; font-size: 1.5rem; font-family: var(--display); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-top: 10px; animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .1s; text-align: center; line-height: 1.15; }
.splash .brand__sub { font: 400 1rem/1 var(--sans); font-style: italic; letter-spacing: .04em; color: var(--crust); animation: splash-logo-in .6s cubic-bezier(.22,1,.36,1) both .18s; }
@keyframes splash-logo-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation-duration: .01s; animation-delay: .3s; }
  .splash .brand__icon, .splash .brand__word, .splash .brand__sub { animation: none; }
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.8rem); }
h3 { font-size: 1.14rem; line-height: 1.3; }
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--crust); }

.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--crust);
  margin: 0 0 .9em;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6; color: var(--muted); }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .96rem/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; transition: transform .18s, background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--crust); color: #fff; box-shadow: 0 10px 24px -14px rgba(90, 126, 108, .6); }
.btn--gold:hover { background: #48675a; }
.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: var(--ink-soft); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--crust); color: var(--crust); }
.hero__actions .btn--ghost, .banner__actions .btn--ghost { border-color: rgba(246, 243, 236, .55); color: var(--on-dark); }
.hero__actions .btn--ghost:hover, .banner__actions .btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(246, 243, 236, .1); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn--outline:hover { border-color: var(--crust); color: var(--crust); }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }

.tag {
  display: inline-block; margin-left: .7em; padding: 3px 10px; border-radius: 999px;
  background: var(--crust-soft); color: var(--crust);
  font: 600 .66rem/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── Bandeau d'annonce ─────────────────────────────────────────────────── */
.announce { background: var(--crust); color: #fff; font-size: .92rem; padding: 10px 0; text-align: center; }
.announce a { color: #fff; font-weight: 700; text-decoration: underline; }
.announce[hidden] { display: none; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter: blur(12px);
  transition: box-shadow .25s, background-color .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.top.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(20, 33, 26, .55); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__icon { width: 46px; height: 46px; flex: none; }
.brand__word { display: none; }
.brand__word small { font: 600 .55rem/1 var(--sans); letter-spacing: .2em; color: var(--crust); text-transform: none; font-style: italic; }
.brand__word em { font-style: normal; color: var(--crust); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--muted); transition: color .18s; }
.nav a:hover { color: var(--text); }
.nav__cta {
  padding: 9px 18px; border-radius: 999px; background: var(--crust); color: #fff !important;
  font-weight: 600 !important; font-variant-numeric: tabular-nums;
}
.nav__cta:hover { background: #48675a; }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: absolute; inset: 100% 0 auto; display: none; flex-direction: column;
    align-items: stretch; gap: 0; padding: 10px var(--pad) 22px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__cta { margin-top: 14px; text-align: center; border-bottom: 0 !important; }
}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; color: var(--on-dark); background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 112%; object-fit: cover; filter: brightness(.5) saturate(1.05); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(34, 46, 40, .78) 0%, rgba(34, 46, 40, .26) 38%, rgba(34, 46, 40, .86) 100%),
    linear-gradient(95deg, rgba(34, 46, 40, .72) 0%, rgba(34, 46, 40, .08) 66%);
}
.hero__inner { position: relative; padding: clamp(84px, 15vh, 150px) 0 clamp(60px, 10vh, 104px); max-width: 860px; }
.hero h1 { color: #fff; margin-bottom: .34em; }
.hero h1 em { color: var(--wheat); }
.hero .eyebrow { color: rgba(240, 244, 238, .74); }
.hero .lede { color: rgba(240, 244, 238, .9); max-width: 60ch; }

.hero__status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(30, 26, 22, .55); border: 1px solid rgba(243, 244, 250, .22);
  font-size: .86rem; font-weight: 600; color: var(--on-dark);
  backdrop-filter: blur(6px);
}
.hero__status .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c27a; box-shadow: 0 0 0 0 rgba(103, 194, 122, .7); }
.hero__status:not(.is-closed) .dot { animation: dot-pulse 2.4s ease-out infinite; }
.hero__status.is-closed .dot { background: #cf7b5a; animation: none; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(103, 194, 122, .6); } 70% { box-shadow: 0 0 0 9px rgba(103, 194, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(103, 194, 122, 0); } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .9rem; color: rgba(240, 244, 238, .82); }
.hero__proof b { font-family: var(--serif); font-size: 1.18rem; font-weight: 400; color: var(--wheat); margin-right: .25em; font-variant-numeric: tabular-nums; }
.hero__proof i { width: 4px; height: 4px; border-radius: 50%; background: rgba(243, 244, 250, .35); }

/* ── Promo (publiée depuis l'admin) ────────────────────────────────────── */
.promo { background: var(--crust-soft); border-bottom: 1px solid var(--line); }
.promo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 30px 0; }
.promo h2 { font-size: 1.5rem; margin-bottom: .25em; }
.promo p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ── Valeurs ───────────────────────────────────────────────────────────── */
.values { padding: clamp(56px, 8vw, 88px) 0 0; }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.value { background: var(--card); padding: 30px 26px; }
.value h3 { font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: -.005em; margin-bottom: .55em; }
.value p { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.6; }

/* ── Services ──────────────────────────────────────────────────────────── */
.menus { padding: clamp(60px, 9vw, 104px) 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.tab {
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  font: 600 .93rem/1 var(--sans); color: var(--muted); cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.tab:hover { color: var(--text); border-color: var(--muted); }
.tab.is-active { background: var(--crust); border-color: var(--crust); color: #fff; }
.menu-panel[hidden] { display: none; }

.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.carte__intro { max-width: 68ch; color: var(--muted); margin-bottom: 30px; }
.carte__h { display: flex; align-items: baseline; flex-wrap: wrap; font-size: 1.32rem; margin: 34px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.carte__col > .carte__h:first-child { margin-top: 0; }
.carte__secnote { font-size: .88rem; color: var(--muted); margin: -6px 0 14px; line-height: 1.55; }
.carte__note { margin: 34px 0 0; font-size: .88rem; color: var(--muted); max-width: 78ch; }

.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px dotted var(--line); }
.dishes li:last-child { border-bottom: 0; }
.dish { flex: 1; }
.dish b { font-weight: 600; font-size: 1rem; }
.dish small { display: block; font-size: .875rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.price { font-family: var(--serif); font-weight: 400; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price:empty { display: none; }

.carte__photo { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.carte__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte__photo figcaption { padding: 12px 16px; font-size: .86rem; color: var(--muted); }

/* ── Réalisations ──────────────────────────────────────────────────────── */
.features { padding: 0 0 clamp(60px, 9vw, 104px); }
.features__note { max-width: 40ch; font-size: .92rem; color: var(--muted); margin: 0; }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.feature { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.feature:hover img { transform: scale(1.04); }
.feature figcaption { padding: 20px 22px 24px; }
.feature b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: .3em; }
.feature span { font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ── Histoire / Atelier ────────────────────────────────────────────────── */
.split { background: var(--paper); color: var(--text); padding: clamp(64px, 9vw, 110px) 0; }
.split__grid { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 5vw, 60px); }
.split__media { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__text { position: sticky; top: 104px; }
.split__text .eyebrow { color: var(--crust); }
.split__text h2 { color: var(--text); }
.split__text h2 em { color: var(--crust); }
.split__p { color: var(--muted); font-size: .97rem; margin: 22px 0 0; max-width: 48ch; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line); display: grid; gap: 20px; }
.timeline li { position: relative; display: grid; gap: 4px; }
.timeline li::before {
  content: ""; position: absolute; left: -30px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--crust);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline b { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--crust); }
.timeline span { font-size: .95rem; color: var(--muted); line-height: 1.55; }

/* ── Bandeau dépôt ─────────────────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; color: var(--on-dark); background: var(--ink-soft); overflow: hidden; }
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.36) saturate(1.05); }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(92deg, rgba(34, 46, 40, .9) 10%, rgba(34, 46, 40, .4) 92%); }
.banner__content { position: relative; padding: clamp(60px, 9vw, 104px) 0; max-width: 640px; }
.banner .eyebrow { color: var(--wheat); }
.banner h2 { color: #fff; }
.banner h2 em { color: var(--wheat); }
.banner p { color: rgba(240, 244, 238, .88); margin-bottom: 28px; }
.banner__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Avis ──────────────────────────────────────────────────────────────── */
.reviews { background: var(--crust-soft); padding: clamp(60px, 9vw, 104px) 0; }
.reviews__head { max-width: 620px; margin-bottom: 38px; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px 22px; box-shadow: var(--shadow); }
.review p { font-size: .96rem; line-height: 1.62; margin-bottom: 1.1em; }
.review footer { font-size: .82rem; color: var(--muted); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: baseline; gap: .45em; padding: 7px 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .87rem; color: var(--muted); }
.chip b { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: var(--crust); font-variant-numeric: tabular-nums; }
.chips__note { font-size: .82rem; color: var(--muted); }

/* ── Pourquoi nous confier vos vêtements ──────────────────────────────── */
.groups { padding: 0 0 clamp(60px, 9vw, 104px); }
.groups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-top: clamp(60px, 9vw, 104px); }
.groups__text p { color: var(--muted); max-width: 52ch; margin-bottom: 28px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--card); padding: 22px 20px; transition: background-color .2s; }
.facts div:hover { background: var(--paper); }
.facts dt { font: 700 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--crust); margin-bottom: .7em; }
.facts dd { margin: 0; font-size: .95rem; line-height: 1.5; }

/* ── Nous trouver ──────────────────────────────────────────────────────── */
.contact { background: var(--paper); color: var(--text); padding: clamp(60px, 9vw, 104px) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact .eyebrow { color: var(--crust); }
.contact h2 { color: var(--text); font-size: clamp(1.75rem, 3.1vw, 2.45rem); hyphens: none; }
.contact h2 em { color: var(--crust); }
.contact__lede { color: var(--muted); max-width: 48ch; }

.contact__list { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 16px; }
.contact__list li { display: grid; gap: 3px; }
.contact__list b { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--crust); }
.contact__list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); justify-self: start; transition: border-color .18s, color .18s; }
.contact__list a:hover { color: var(--crust); border-bottom-color: var(--crust); }

.hours { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .95rem; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; }
.hours th { font-weight: 500; color: var(--muted); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .closed { color: var(--muted); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--crust); font-weight: 600; }
.hours__exc { list-style: none; margin: 16px 0 0; padding: 0; font-size: .88rem; color: var(--muted); display: grid; gap: 6px; }

.contact__map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 420px; }
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.2); }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 72px) 0 28px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.foot__brand .brand { margin-bottom: 10px; }
.foot__brand .brand__icon { width: 44px; height: 44px; }
.foot__brand .brand__word { font-size: 1.6rem; }
.foot__brand p { font-size: .92rem; color: var(--muted); max-width: 34ch; }
.foot h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crust); margin-bottom: 1.1em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.foot a { text-decoration: none; color: var(--text); transition: color .18s; }
.foot a:hover { color: var(--crust); }
.foot li { color: var(--muted); }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.foot__credit a { color: var(--crust); font-weight: 600; }

/* ── Adaptation ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .split__grid, .groups__grid, .contact__grid { grid-template-columns: 1fr; }
  .split__text { position: static; }
  .split__media img { aspect-ratio: 16 / 9; }
  .contact__map, .contact__map iframe { min-height: 300px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__inner { padding-top: 58px; padding-bottom: 54px; }
  .hero__media { inset: -3% 0 0; }
  .facts { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__proof { gap: 10px; font-size: .84rem; }
  .btn { width: 100%; }
  .hero__actions .btn { width: auto; flex: 1 1 200px; }
  .banner__actions { flex-direction: column; }
  .banner__actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mouvement — voir anim.js.
   ════════════════════════════════════════════════════════════════════════ */
.js-anim [data-reveal]:not([data-revealed]) { opacity: 0; }
.js-anim [data-reveal-group]:not([data-revealed]) > :not([hidden]) { opacity: 0; }
.js-anim [data-reveal="media"]:not([data-revealed]) img { transition: none; }
.js-anim .hero__media { transform: translate3d(0, 0, 0); }

.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; will-change: transform; }

@media print {
  .top, .burger, .hero__actions, .contact__map, .tabs { display: none !important; }
  .hero { background: none; color: #000; }
  .hero__media, .banner__media { display: none; }
  body { background: #fff; color: #000; }
}

/* ════════════════════════════════════════════════════════════════════════
   Pack de mouvement — micro-interactions
   ────────────────────────────────────────────────────────────────────────
   Trois couches qui s'ajoutent à anim.js (révélations au défilement) :
   1. les liens de navigation tirent un trait sous eux ;
   2. les cartes se soulèvent avec une lueur interne jade ;
   3. tout élément cliquable s'enfonce franchement au clic.
   Chacune respecte « prefers-reduced-motion » via le bloc de fin.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Navigation : le trait qui s'étire ──────────────────────────────── */
.nav a:not(.nav__cta) { position: relative; padding-bottom: 3px; }
.nav a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--crust); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.nav a:not(.nav__cta):hover::after,
.nav a:not(.nav__cta):focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ── 2. Cartes : élévation + lueur interne ─────────────────────────────── */
.value, .feature, .review, .carte__photo, .facts > div {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
}
.value:hover, .feature:hover, .review:hover, .carte__photo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .7);
  border-color: color-mix(in srgb, var(--crust) 35%, var(--line));
}
/* Les valeurs forment une grille sans gouttière : l'élévation y créerait des trous.
   On s'y limite donc à un fond qui se teinte et à un filet jade à gauche. */
.value { position: relative; }
.value:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--crust-soft) 55%, var(--card)); }
.value::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--crust); transform: scaleY(0); transform-origin: bottom;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.value:hover::before { transform: scaleY(1); transform-origin: top; }

/* ── 3. Appui franc au clic ────────────────────────────────────────────── */
.btn:active { transform: translateY(1px) scale(.985); }
.tab:active, .burger:active { transform: scale(.96); }
.tab { transition: background-color .18s, color .18s, border-color .18s, transform .14s; }

/* La photo d'une fiche se rapproche doucement au survol de sa carte. */
.carte__photo img { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.carte__photo:hover img { transform: scale(1.035); }

/* Les puces de la frise se remplissent quand on survole la ligne. */
.timeline li { transition: color .25s; }
.timeline li::before { transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .25s; }
.timeline li:hover::before { transform: scale(1.5); }

@media (prefers-reduced-motion: reduce) {
  .nav a::after, .value::before { transition: none; }
  .value:hover, .feature:hover, .review:hover, .carte__photo:hover { transform: none; }
  .carte__photo:hover img, .feature:hover img { transform: none; }
  .btn:active, .tab:active, .burger:active { transform: none; }
}