/* Avaia — design tokens (charte « Identité visuelle Avaia »)
   Élément-clé : Sacramento (gratuite) remplace Boho Monoline (licence payante).
   Layout : vitrine plein cadre — hero typographique, réalisations en carrousel,
   prestations en trois colonnes, maison en arche, rendez-vous. Look clair unique, assumé. */
:root {
  color-scheme: light;

  /* Palette de la charte Avaia */
  --pearl: #F1ECE3;        /* Pearl — fond */
  --cream: #F1ECE3;
  --paper: #F8F5EF;
  --sand: #E6DDD0;
  --taupe: #A8957B;
  --ink: #26221F;          /* corps de texte (noir adouci) */
  --muted: #6F665E;
  --terra: #C4765B;        /* Mojo — titres */
  --terra-light: #D99C85;
  --line: #DCD3C6;
  --sage: #649990;         /* Patina — sous-titres, éléments-clés */
  --opal: #B1CDC2;         /* Opal */
  --cactus: #6F845D;       /* Cactus */
  --sage-soft: #DDE9E4;
  --sage-text: #4E8077;    /* Patina légèrement foncé pour les petits textes (contraste) */
  --gradient: linear-gradient(90deg, var(--sage), var(--opal));   /* Dégradé Patina → Opal */

  /* Typographie de la charte */
  --display: "Libre Baskerville", Baskerville, Georgia, serif;          /* titres */
  --body: "Open Sans", "Segoe UI", Calibri, Arial, sans-serif;          /* texte */
  --script: "Sacramento", "Snell Roundhand", cursive;  /* élément-clé (remplace Boho Monoline) */

  /* Mouvement */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Gouttières (zones sûres incluses) */
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 760px) {
  :root {
    --gut-l: max(40px, env(safe-area-inset-left, 0px));
    --gut-r: max(40px, env(safe-area-inset-right, 0px));
  }
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a, button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--terra); outline-offset: 4px; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terra);
}

h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 10px 0 0;
  text-wrap: balance;
}
h2 .char { display: inline-block; will-change: transform; }

.sec-head { text-align: center; display: grid; justify-items: center; gap: 4px; margin-bottom: 56px; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--terra);
  color: var(--terra);
  background: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--terra); color: var(--cream); }
.btn.solid { background: var(--terra); color: var(--cream); }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); }

.blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: radial-gradient(circle at 30% 30%, var(--terra-light), var(--terra) 70%);
  opacity: .85;
}
.loop { position: absolute; z-index: 0; pointer-events: none; fill: none; stroke: var(--terra); stroke-width: 1.4; opacity: .7; }

/* ---------- Header ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 5; color: var(--ink); }
.site-header .wrap { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; }
.mark { display: inline-flex; color: var(--terra); }
.wm-s { height: 20px; width: auto; display: block; }
.site-nav { display: flex; gap: 30px; align-items: center; }
.site-nav a { text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.site-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav .btn { color: var(--cream); background: var(--terra); padding: 10px 18px; }
.site-nav .btn:hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) { .site-nav a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(60% 70% at 50% 45%, var(--paper) 0%, transparent 70%),
    linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%);
}
.leaves { position: absolute; right: -6%; top: -4%; height: 115%; width: auto; color: #6B5845; opacity: .16; z-index: 0; pointer-events: none; }
.hero .inner {
  position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;
  padding-top: 150px; padding-bottom: 56px; padding-left: var(--gut-l); padding-right: var(--gut-r);
}
.hero .wm { width: min(860px, 100%); height: auto; color: var(--terra); overflow: visible; }
.hero .wm > g, .hero .wm circle { transform-box: fill-box; }
.tagline { display: grid; justify-items: center; margin-top: 26px; }
.tagline .rule { width: min(360px, 60vw); height: 1px; background: var(--terra); transform-origin: center; }
.tagline .t { font-family: var(--display); font-weight: 300; font-size: clamp(15px, 1.8vw, 21px); letter-spacing: .32em; text-transform: uppercase; margin-top: 14px; }
.tagline .bio { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(30px, 3.6vw, 44px); line-height: .9; color: var(--terra); margin-top: 2px; }
.scroll-cue { display: grid; justify-items: center; gap: 8px; margin-top: 52px; text-decoration: none; font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { display: block; width: 1px; height: 48px; background: currentColor; transform-origin: top; }

/* ---------- Réalisations (coverflow) ---------- */
.work { position: relative; overflow: hidden; padding-block: 96px 88px; }
.work .blob { width: 180px; height: 220px; left: -90px; bottom: 60px; }
.cf { position: relative; z-index: 1; height: clamp(400px, 52vw, 600px); --w: clamp(230px, 27vw, 350px); --step: min(25vw, 310px); touch-action: pan-y; outline: none; }
.cf .loop { left: 50%; top: 50%; width: calc(var(--w) * 1.55); height: calc(var(--w) * 1.85); transform: translate(-50%, -50%); }
.cf .slide {
  position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 3 / 4; max-width: 100%; margin: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, var(--sand), var(--taupe));
  transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * var(--step))) scale(var(--s, 1)) rotate(var(--r, 0deg));
  opacity: var(--o, 1); z-index: var(--z, 1); filter: saturate(var(--sat, 1)) brightness(var(--br, 1));
  transition: transform 1s var(--ease-io), opacity 1s, filter 1s, box-shadow 1s;
}
.cf .slide.on { box-shadow: 0 40px 70px -35px rgba(42, 34, 29, .55); cursor: default; }
.cf .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 6s ease-out; }
.cf .slide.on img { transform: scale(1); }
.cap { text-align: center; margin-top: 28px; min-height: 62px; display: grid; gap: 2px; justify-items: center; }
.cap b { font-family: var(--display); font-weight: 300; font-style: italic; font-size: 27px; line-height: 1.2; }
.cap small { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); }
.ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--terra); background: transparent; color: var(--terra); display: grid; place-items: center; transition: background .25s, color .25s, transform .25s; }
.arrow:hover { background: var(--terra); color: var(--cream); }
.arrow:active { transform: scale(.92); }
.arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dots { display: flex; gap: 10px; }
.dots button { width: 7px; height: 7px; border-radius: 99px; border: 0; padding: 0; background: var(--line); transition: width .5s var(--ease-io), background .5s; }
.dots button[aria-current="true"] { background: var(--terra); width: 28px; }
.bar { width: min(240px, 60%); height: 1px; background: var(--line); margin: 18px auto 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--terra); transform-origin: left; transform: scaleX(0); }
@media (max-width: 760px) { .cf { --w: min(62vw, 300px); --step: 52vw; height: clamp(360px, 96vw, 460px); } }

/* ---------- Prestations ---------- */
.services { position: relative; overflow: hidden; background: var(--paper); padding-block: 96px; }
.services .blob { width: 150px; height: 210px; right: -70px; top: 38%; }
.svc { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; }
.svc > div { min-width: 0; display: grid; justify-items: center; gap: 6px; }
.svc svg { width: 44px; height: 44px; fill: none; stroke: var(--terra); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.svc h3 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 0; }
.svc p { margin: 0; color: var(--muted); font-size: 15px; max-width: 30ch; }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; gap: 40px; } }
.menu { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .menu { grid-template-columns: 1fr; } }
.cat { margin-bottom: 36px; }
.cat h4 { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); margin: 0 0 6px; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: padding .25s, background .25s; }
.row:hover { padding-inline: 10px; background: rgba(184, 99, 76, .06); }
.row > span:first-child { font-family: var(--display); font-weight: 400; font-size: 19px; }
.row small { display: block; font-family: var(--body); font-size: 13px; color: var(--muted); }
.row .d { flex: 1; }
.row .p { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.note { font-size: 13px; color: var(--muted); text-align: center; margin: 8px 0 0; }
.center { text-align: center; margin-top: 40px; }

/* ---------- La maison ---------- */
.about { position: relative; overflow: hidden; padding-block: 104px; }
.about .grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about .figure { position: relative; }
.about .arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; overflow: hidden; max-width: 100%; background: var(--sand); }
.about .arch img { width: 100%; height: 118%; object-fit: cover; }
.about .loop { width: 120%; height: 70%; right: -30%; bottom: -18%; }
.about .txt { min-width: 0; }
.about h2 { text-align: left; }
.about p { max-width: 52ch; color: var(--muted); margin: 22px 0 0; }
.about p.lead { font-family: var(--display); font-weight: 300; font-size: 23px; line-height: 1.5; color: var(--ink); }
.about .btn { margin-top: 32px; }
.about .blob { width: 120px; height: 150px; right: 6%; top: -40px; opacity: .6; }
@media (max-width: 860px) { .about .grid { grid-template-columns: 1fr; gap: 48px; } .about .figure { max-width: 360px; margin: 0 auto; width: 100%; } }

/* ---------- Rendez-vous ---------- */
.contact { background: var(--sand); padding-block: 96px 80px; position: relative; overflow: hidden; }
.contact .leaves { color: var(--ink); opacity: .1; right: -14%; top: -20%; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.info { display: grid; gap: 30px; }
.info h3 { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); margin: 0 0 8px; }
.info p { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.5; }
.info .todo { font-family: var(--body); font-size: 14px; color: var(--muted); }
.hours { display: grid; gap: 4px; font-size: 15px; font-variant-numeric: tabular-nums; max-width: 280px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }


/* ---------- Footer & CTA mobile ---------- */
.site-footer { background: var(--ink); color: var(--sand); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 32px; font-size: 12px; letter-spacing: .1em; }
.site-footer .wm-s { color: var(--terra); height: 18px; }
.mcta { display: none; }
@media (max-width: 720px) {
  .mcta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; text-align: center; text-decoration: none;
    background: var(--terra); color: var(--cream); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
    padding-top: 17px; padding-bottom: calc(17px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gut-l); padding-right: var(--gut-r);
  }
  .site-footer .wrap { padding-bottom: 80px; }
}

/* ---------- Réservation ---------- */
.book-card { background: var(--paper); padding: clamp(28px, 4vw, 44px); display: grid; gap: 16px; align-content: start; }
.book-card h3 { font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1.15; margin: 0; }
.book-card p { margin: 0; color: var(--muted); }
.book-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.book-card li { display: flex; gap: 10px; align-items: baseline; }
.book-card li::before { content: ""; width: 14px; height: 1px; background: var(--terra); flex: none; transform: translateY(-4px); }
.book-card .btn { justify-self: start; margin-top: 8px; }
.book-card .small { font-size: 12px; }

.booking { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding-left: var(--gut-l); padding-right: var(--gut-r); }
.bk-scrim { position: absolute; inset: 0; background: rgba(42, 34, 29, .55); backdrop-filter: blur(4px); }
.bk-panel { position: relative; width: min(600px, 100%); max-height: 100%; overflow: auto; background: var(--cream); display: grid; grid-template-rows: auto auto 1fr; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .4); overscroll-behavior: contain; }
.bk-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--cream); z-index: 1; }
.bk-head .wm-s { height: 16px; color: var(--terra); }
.bk-step { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center; }
.bk-back, .bk-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; }
.bk-back:hover, .bk-close:hover { border-color: var(--terra); color: var(--terra); }
.bk-back svg, .bk-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bk-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 22px; margin-top: 14px; }
.bk-progress i { height: 2px; background: var(--line); transition: background .4s; }
.bk-progress i.on { background: var(--terra); }
.bk-body { padding: 22px 22px 28px; display: grid; gap: 16px; align-content: start; }
.bk-title { font-family: var(--display); font-weight: 300; font-size: 28px; line-height: 1.15; margin: 0; }
.bk-sub { margin: 4px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); }
.bk-list { display: grid; }
.bk-svc { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; transition: padding .25s, background .25s; }
.bk-svc:hover, .bk-svc:focus-visible { padding-inline: 12px; background: rgba(184, 99, 76, .07); }
.bk-svc b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; }
.bk-svc small { color: var(--muted); font-size: 13px; }
.bk-price { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bk-day { flex: none; width: 62px; display: grid; justify-items: center; gap: 0; padding: 10px 0; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); transition: background .25s, border-color .25s, color .25s; }
.bk-day small { font-size: 11px; color: var(--muted); }
.bk-day b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; }
.bk-day.on { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.bk-day.on small { color: var(--cream); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.bk-slot { font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; padding: 10px 0; color: var(--ink); background: transparent; border: 1px solid var(--terra); transition: background .2s, color .2s; }
.bk-slot:hover:not(:disabled) { background: var(--terra); color: var(--cream); }
.bk-slot:disabled { border-color: var(--line); color: var(--line); text-decoration: line-through; cursor: not-allowed; }
.bk-form { display: grid; gap: 16px; }
.bk-form .btn { justify-self: start; }
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; border-radius: 0; }
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--terra); }
.bk-recap { margin: 0; display: grid; border-top: 1px solid var(--line); }
.bk-recap div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bk-recap dt { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.bk-recap dd { margin: 0; text-align: right; font-family: var(--display); font-size: 17px; }
.bk-confirm, .bk-close-2 { justify-self: start; }
.bk-done { display: grid; justify-items: center; text-align: center; gap: 10px; }
.bk-done svg { width: 64px; height: 64px; fill: none; stroke: var(--terra); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-done p { margin: 0; color: var(--muted); font-size: 14px; max-width: 42ch; }

/* ---------- Végétal (flyer) ---------- */
.site-header .wrap { padding-block: 16px; }
.mark, .site-nav { background: rgba(244, 238, 228, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 99px; box-shadow: 0 6px 24px -12px rgba(42, 34, 29, .25); }
.mark { padding: 12px 18px; }
.site-nav { padding: 6px 6px 6px 22px; gap: 24px; }
.hero { background: radial-gradient(70% 70% at 50% 55%, var(--paper) 0%, transparent 75%), linear-gradient(180deg, #ECE6DB 0%, var(--cream) 100%); }
.vines { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: 0; pointer-events: none; }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.vine {
  position: absolute; top: -14px; width: min(46vw, 640px); aspect-ratio: 880 / 699; max-width: none;
  mix-blend-mode: multiply;              /* la vigne se fond dans le fond crème */
  --r: 100;                              /* révélation de haut en bas (animée par GSAP) */
  /* bas de l'image fondu : les tiges s'effacent au lieu d'être coupées net */
  /* + bord intérieur fondu pour éviter toute couture au centre */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--r) * .8%), transparent calc(var(--r) * .8% + 20%)), linear-gradient(to right, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 calc(var(--r) * .8%), transparent calc(var(--r) * .8% + 20%)), linear-gradient(to right, #000 82%, transparent 100%);
          mask-composite: intersect;
}
.vine img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* Profondeur : un second plan flou et plus clair, décalé, comme hors mise au point */
.vine .v-back { transform: translate(14%, -6%) scale(.82) rotate(-4deg); filter: blur(2.5px) saturate(.6) brightness(1.18); opacity: .55; }
/* Ombre portée douce sur le mur */
.vine .v-shadow { transform: translate(18px, 26px); filter: brightness(0) blur(7px); opacity: .14; }
.vine .v-front { filter: contrast(1.04); }
.vines.windy .vine { filter: url(#wind); }
.vine-l { left: -4vw; }
.vine-r { right: -4vw; transform: scaleX(-1); }
.vine-r .v-back { transform: translate(10%, -10%) scale(.78) rotate(5deg); }
.hero .inner { padding-top: clamp(170px, 20vw, 230px); }
.hero .wm { filter: drop-shadow(0 6px 22px rgba(244, 238, 228, .9)); }
.tagline .bio { color: var(--sage); }
@media (max-width: 720px) {
  .vine { width: 118vw; }
  .vine-l { left: -52vw; }
  .vine-r { right: -52vw; }
  .scroll-cue { margin-top: 36px; }
  .hero .inner { padding-top: 150px; }
}

/* ---------- Tarifs ---------- */
.cat h4, .extra h4 { color: var(--sage); font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .14em; margin: 0; }
.tagline-s { margin: 0 0 8px; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 17px; color: var(--muted); }
.row .p { color: var(--terra); font-weight: 600; }
.extras { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.extras > * { min-width: 0; }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }
.extra { background: var(--cream); padding: clamp(22px, 3vw, 32px); }
.extra .fine { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.extra .fine b { color: var(--ink); font-weight: 600; }
.extra .rate { margin: 16px 0 6px; font-weight: 600; color: var(--terra); font-size: 18px; }
.extra .rate small { font-weight: 400; color: var(--muted); font-size: 13px; }
.promises { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.promises li { display: flex; gap: 10px; align-items: baseline; }
.promises li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex: none; transform: translateY(-2px); }
.note { margin-top: 36px; }
.note b { color: var(--ink); font-weight: 600; }
.motto { text-align: center; font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(20px, 2.4vw, 26px); color: var(--sage); margin: 18px 0 0; }
.hours .today { color: var(--terra); font-weight: 600; }

/* ---------- Simulateur : catégories, compléments ---------- */
.bk-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; position: sticky; top: 72px; background: var(--cream); z-index: 1; padding-top: 4px; scrollbar-width: none; }
.bk-chip { flex: none; font: inherit; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.bk-chip.on, .bk-chip:hover { background: var(--sage); border-color: var(--sage); color: #fff; }
.bk-group { margin: 18px 0 2px; font-family: var(--display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.bk-group small { display: block; text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 300; font-size: 15px; color: var(--muted); }
.bk-price { color: var(--terra); font-weight: 600; }
.bk-lead { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.bk-fine { margin: 0; font-size: 12.5px; color: var(--muted); }
.bk-addons { display: grid; gap: 8px; }
.bk-addon { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s; }
.bk-addon:has(input:checked) { border-color: var(--terra); background: rgba(184, 99, 76, .06); }
.bk-addon input { width: 18px; height: 18px; accent-color: var(--terra); flex: none; }
.bk-addon span:nth-child(2) { flex: 1; }
.bk-addon b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; }
.bk-addon small { color: var(--muted); font-size: 13px; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-total span { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bk-total b { font-family: var(--display); font-weight: 400; font-size: 19px; text-align: right; }
.bk-recap dd small { display: block; font-family: var(--body); font-size: 12px; color: var(--muted); }

/* Bouton « Réserver » du menu : une seule pastille, sans double contour */
.site-nav .btn { border: 0; border-radius: 99px; padding: 11px 20px; box-shadow: none; }
@media (max-width: 720px) {
  .site-nav { background: none; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav .btn { box-shadow: 0 6px 20px -10px rgba(42, 34, 29, .45); }
}

/* Bouton « Réserver en ligne » toujours accessible : barre en bas sur mobile,
   pastille flottante en bas à droite sur ordinateur (apparaît après le haut de page) */
@media (min-width: 721px) {
  .mcta {
    display: block; position: fixed; z-index: 6; left: auto; top: auto;
    right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    text-decoration: none; background: var(--terra); color: var(--cream); border-radius: 99px;
    font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: 17px 28px;
    box-shadow: 0 14px 34px -14px rgba(42, 34, 29, .55);
    transition: transform .5s var(--ease-io), opacity .5s, background .25s;
  }
  .mcta:hover { background: var(--ink); }
  .mcta.is-off { transform: translateY(160%); opacity: 0; pointer-events: none; }
}

.info .small { font-family: var(--body); font-size: 13px; margin-top: 6px; }
.info .small a { color: var(--terra); }

/* ---------- Pop-up d'accueil (crowdfunding) ---------- */
.intro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding-left: var(--gut-l); padding-right: var(--gut-r); }
.in-scrim { position: absolute; inset: 0; background: rgba(42, 34, 29, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.in-panel { position: relative; width: min(980px, 100%); max-height: 100%; overflow: auto; background: var(--cream); display: grid; grid-template-columns: 1.1fr 1fr; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .5); overscroll-behavior: contain; }
.in-text { padding: clamp(28px, 4.5vw, 56px); display: grid; gap: 16px; align-content: center; min-width: 0; }
.in-text .wm-s { height: 22px; color: var(--terra); margin-bottom: 6px; }
.in-text h2 { text-align: left; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: .02em; text-transform: none; margin: 0; }
.in-text p { margin: 0; color: var(--muted); max-width: 42ch; }
.in-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.in-actions .btn { border-radius: 99px; padding: 15px 22px; letter-spacing: .16em; white-space: nowrap; }
.in-actions .in-support { border-color: var(--sage); color: var(--sage); }
.in-actions .in-support:hover { background: var(--sage); color: #fff; }
.in-fine { font-size: 12px; }
.in-media { position: relative; background: var(--ink); min-height: 320px; }
.in-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.in-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.in-video-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--sand); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  background: radial-gradient(80% 70% at 50% 40%, #3A302A, var(--ink)); }
.in-play { width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(231, 220, 203, .5); display: grid; place-items: center; }
.in-play svg { width: 22px; height: 22px; fill: var(--sand); transform: translateX(2px); }
.in-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(244, 238, 228, .9); color: var(--ink); display: grid; place-items: center; }
.in-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.in-close:hover { background: var(--terra); color: var(--cream); }
@media (max-width: 760px) {
  .in-panel { grid-template-columns: 1fr; }
  .in-media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .in-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Nos marques : noms composés dans la typo du site, sans logos ---------- */
.brands { padding-block: 88px 96px; border-top: 1px solid var(--line); }
.brands .sec-head { margin-bottom: 18px; }
.brands-lead { text-align: center; color: var(--muted); max-width: 52ch; margin: 0 auto 48px; }
.brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.brand-list li { display: flex; align-items: center; }
.brand-list li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); opacity: .7; margin-inline: clamp(14px, 2.2vw, 30px); }
.bn {
  font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); position: relative; padding-block: 6px; transition: color .35s;
}
.bn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-io); }
.brand-list li:hover .bn { color: var(--terra); }
.brand-list li:hover .bn::after { transform: scaleX(1); }
@media (max-width: 1000px) {
  .brand-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 10px clamp(24px, 6vw, 56px); }
  .brand-list li { justify-content: center; }
  .brand-list li + li::before { display: none; }
}
@media (max-width: 520px) {
  .brand-list { grid-template-columns: repeat(2, auto); }
}

/* =========================================================
   Charte « Identité visuelle Avaia » — titres Libre Baskerville (Mojo),
   éléments-clés en script (Patina), texte Open Sans, pictogrammes et colibri
   ========================================================= */
body { font-weight: 400; color: var(--ink); }
h2 { color: var(--terra); font-weight: 400; letter-spacing: .07em; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.2; }
.eyebrow { font-family: var(--script); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: 0; text-transform: none; color: var(--sage); line-height: 1.1; }
.sec-head { gap: 2px; }
.btn { font-family: var(--body); font-weight: 600; }

/* Hero : composition du logo principal */
.hero .inner { padding-top: clamp(150px, 17vw, 200px); }
.kicker { margin: 0 0 clamp(14px, 2vw, 26px); font-family: var(--display); font-size: clamp(11px, 1.15vw, 14px); letter-spacing: .18em; text-transform: uppercase; color: var(--terra); }
.tagline { margin-top: 22px; gap: 0; }
.sig-row { display: grid; grid-template-columns: auto minmax(120px, 260px) auto; align-items: center; gap: clamp(12px, 2vw, 22px); }
.sig { font-family: var(--display); font-size: clamp(10px, 1vw, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--terra); line-height: 1.35; }
.sig-row .rule { width: 100%; background: var(--terra); }
.tagline .t { font-family: var(--display); font-size: clamp(11px, 1.15vw, 14px); letter-spacing: .16em; color: var(--terra); margin-top: 12px; }
.tagline .bio { font-family: var(--script); font-style: normal; font-size: clamp(30px, 3.4vw, 42px); color: var(--sage); line-height: .8; margin-top: -2px; }
.slogan { margin: 26px 0 0; font-family: var(--display); font-size: clamp(10px, 1.05vw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.hero .colibri { width: clamp(64px, 7vw, 92px); height: auto; margin-top: 14px; }
.scroll-cue { margin-top: 32px; }
@media (max-width: 520px) { .sig-row { grid-template-columns: auto 60px auto; } .slogan { max-width: 30ch; line-height: 1.6; } }

/* Pictogrammes de la charte (masques recolorables) */
.picto-grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.picto-grid li { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; min-width: 0; }
.picto { width: 72px; height: 72px; background: var(--ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: background .35s, transform .45s var(--ease-out); }
.picto-grid li:hover .picto { background: var(--terra); transform: translateY(-4px) rotate(-3deg); }
.pl { font-family: var(--script); font-size: 22px; line-height: 1.15; color: var(--sage); max-width: 14ch; }
@media (max-width: 860px) { .picto-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .picto-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; } .picto { width: 60px; height: 60px; } }

/* Tarifs : sous-titres en élément-clé */
.cat h4, .extra h4 { color: var(--sage); }
.tagline-s { font-family: var(--script); font-style: normal; font-size: 23px; color: var(--sage); margin: 2px 0 6px; }
.bk-group small { font-family: var(--script); font-style: normal; font-size: 20px; color: var(--sage); }
.row > span:first-child, .bk-svc b, .bk-addon b, .svc h3 { font-family: var(--display); font-size: 16px; }
.motto { font-family: var(--display); font-style: italic; }

/* À propos */
.about .plante { position: absolute; right: -40px; top: 40px; width: min(36vw, 420px); height: auto; opacity: .7; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
.about p.lead { font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; }
.values { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.values li { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); border: 1px solid var(--opal); border-radius: 99px; padding: 6px 12px; }
.about p.fine-v { font-size: 14px; margin-top: 14px; }
.signature { font-family: var(--script); font-size: 34px; color: var(--terra); margin: 18px 0 0 !important; line-height: 1; }

/* Séparateur colibri de la charte */
.sep-wrap { max-width: 1140px; margin: 0 auto; padding-block: 28px 18px; padding-left: var(--gut-l); padding-right: var(--gut-r); display: flex; justify-content: flex-end; }
.sep { width: min(100%, 760px); height: auto; }

.bn { font-family: var(--display); font-weight: 400; letter-spacing: .1em; font-size: clamp(18px, 2.1vw, 28px); }
.cap b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.cap small { color: var(--sage); }

.about .loop { width: 90%; height: 55%; right: -18%; bottom: -14%; }

/* ---------- L'équipe ---------- */
.team { position: relative; padding-block: 96px 104px; background: var(--paper); border-top: 1px solid var(--line); }
.members { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.member { display: grid; gap: 26px; min-width: 0; }
.m-photo { aspect-ratio: 3 / 4; border-radius: 999px 999px 6px 6px; overflow: hidden; background: var(--sand); max-width: 100%; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease-out); }
.member:hover .m-photo img { transform: scale(1.03); }
.m-body { display: grid; gap: 10px; }
.member h3, .duo h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .08em; text-transform: uppercase; color: var(--terra); margin: 0; }
.m-role { font-family: var(--script); font-size: clamp(24px, 2.3vw, 30px); color: var(--sage); margin: -4px 0 4px; line-height: 1.1; }
.m-intro, .m-rest p, .duo p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.m-rest { display: grid; gap: 12px; padding-top: 12px; }
.m-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); padding-block: 6px; }
.m-more summary::-webkit-details-marker { display: none; }
.m-more summary::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: width .35s var(--ease-io); }
.m-more summary:hover::after { width: 44px; }
.m-more .when-open, .m-more[open] .when-closed { display: none; }
.m-more[open] .when-open { display: inline; }
.duo { margin: clamp(56px, 8vw, 96px) auto 0; max-width: 720px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.duo-colibri { width: 72px; height: auto; margin-bottom: 4px; }
.duo-end { font-family: var(--display); font-style: italic; color: var(--sage) !important; font-size: 19px !important; margin-top: 8px !important; }
@media (max-width: 760px) { .members { grid-template-columns: 1fr; gap: 64px; } .m-photo { max-width: 420px; } }
.duo .m-role { font-size: clamp(24px, 2.3vw, 30px); color: var(--sage); margin: -2px 0 6px; }

/* ---------- Effet mur (enduit à la chaux, inspiré du moodboard) ----------
   Pour désactiver : retirer la classe "wall" sur <html> dans index.html */
.wall body { background: var(--pearl) url("../brand/mur.webp") repeat; background-size: 640px 640px; }
.wall .hero { background: radial-gradient(60% 65% at 50% 52%, rgba(248, 245, 239, .75) 0%, transparent 72%); }
.wall .services, .wall .team { background: rgba(255, 253, 249, .42); }
.wall .contact { background: rgba(230, 221, 208, .55); }
.wall .work, .wall .brands, .wall .about { background: transparent; }
/* Mur continu : pas de bandes ni de filets entre les sections (évite les raccords visibles) */
.wall .services, .wall .team, .wall .contact { background: transparent; }
.wall .brands, .wall .team, .wall .menu { border-top: 0; }
.wall .extra, .wall .book-card { background: rgba(255, 253, 249, .6); backdrop-filter: blur(2px); }

/* ---------- Bande des marques : chaque nom dans une police proche de son logo,
   tous ramenés à la même couleur pour garder l'harmonie du site ---------- */
.brands { padding-block: 88px 80px; }
.brands-lead { margin-bottom: 40px; }
.brand-band { display: flex; overflow: hidden; padding-block: 26px; background: rgba(255, 253, 249, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bb-track { flex: none; display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); margin: 0; padding: 0 clamp(18px, 2.5vw, 36px); list-style: none; }
.bb { color: var(--ink); opacity: .82; white-space: nowrap; line-height: 1; transition: color .3s, opacity .3s; }
.bb:hover { color: var(--terra); opacity: 1; }
.bb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); opacity: .6; flex: none; }
.b-oway { font-family: "Josefin Sans", sans-serif; font-weight: 300; font-size: 40px; letter-spacing: .04em; text-transform: lowercase; }
.b-sante { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -.01em; text-transform: lowercase; }
.b-gopal { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 42px; }
.b-sodina { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 26px; letter-spacing: .22em; }
.b-madara { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 26px; letter-spacing: .42em; }
@media (prefers-reduced-motion: no-preference) {
  .bb-track { animation: bband 32s linear infinite; }
  .brand-band:hover .bb-track { animation-play-state: paused; }
  @keyframes bband { to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .brand-band { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .bb-track[aria-hidden="true"] { display: none; }
  .bb-track { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
}
@media (max-width: 640px) { .b-oway, .b-gopal { font-size: 32px; } .b-sante { font-size: 29px; } .b-sodina, .b-madara { font-size: 20px; } }
/* Logos officiels (SVG) ramenés à une seule couleur via masque */
.bl { display: flex; align-items: center; }
.blogo { display: block; height: var(--h); width: calc(var(--h) * var(--ar)); background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
@media (max-width: 640px) { .blogo { height: calc(var(--h) * .78); width: calc(var(--h) * var(--ar) * .78); } }

/* =========================================================
   Formes adaptées au mur et au moodboard : arches, angles doux,
   matières (pierre / lin) — plus de rectangles nets
   ========================================================= */
/* Réalisations : photos en arche comme l'équipe et la maison */
.cf .slide { border-radius: 999px 999px 10px 10px; }
.cf .slide.on { box-shadow: 0 40px 70px -40px rgba(38, 34, 31, .45); }

/* Blocs d'information : plaques de pierre claire aux angles doux */
.extra, .book-card, .wall .extra, .wall .book-card {
  border-radius: 28px;
  background: rgba(250, 247, 241, .62);
  border: 1px solid rgba(196, 118, 91, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.book-card { border-radius: 200px 200px 28px 28px; padding-top: clamp(64px, 7vw, 88px); text-align: center; justify-items: center; }
.book-card ul { justify-items: start; text-align: left; }
.book-card .btn { justify-self: center; }

/* Boutons : tous en pastilles, plus organiques */
.btn { border-radius: 99px; }

/* Bande des marques : sans bandeau rectangulaire, juste le défilé sur le mur */
.brand-band { background: transparent; }

/* Fenêtres (réservation, pop-up) : angles doux */
.bk-panel, .in-panel { border-radius: 26px; }
.in-media { border-radius: 0 26px 26px 0; overflow: hidden; }
@media (max-width: 760px) { .in-media { border-radius: 26px 26px 0 0; } }
.bk-day, .bk-slot, .bk-addon { border-radius: 14px; }
.bk-total { border-radius: 0; }

/* Taches terracotta : plus discrètes, comme des pigments sur l'enduit */
.blob { opacity: .28; filter: blur(1px); }

/* Vigne : teintes de la charte (Cactus / Patina), sans contraste forcé */
.vine .v-front { filter: none; }
.vine .v-back { filter: blur(2.5px) saturate(.7) brightness(1.1); opacity: .5; }
.nav-support { color: var(--sage); }

/* Lisibilité des textes manuscrits sur le mur */
.eyebrow { font-size: clamp(27px, 2.8vw, 34px); color: var(--sage-text); }
.pl { font-size: 25px; color: var(--sage-text); }
.tagline-s { font-size: 26px; color: var(--sage-text); }
.bk-group small { font-size: 22px; color: var(--sage-text); }
.m-role { color: var(--sage-text); }
.tagline .bio { color: var(--sage-text); }
.motto, .duo-end { color: var(--sage-text) !important; }
.cat h4, .extra h4, .bk-group { color: var(--sage-text); }
@media (max-width: 520px) { .pl { font-size: 23px; } .eyebrow { font-size: 28px; } }

/* ---------- Page mentions légales ---------- */
.legal-head .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; }
.legal-back { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--terra); }
.legal-colibri { width: 64px; height: auto; }
.legal { max-width: 760px; padding-block: 24px 40px; }
.legal h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); color: var(--terra); letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 4px; line-height: 1.2; }
.legal h2 { text-align: left; font-size: 20px; letter-spacing: .1em; margin: 40px 0 10px; }
.legal h3 { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--sage-text); margin: 24px 0 6px; }
.legal p { margin: 0 0 12px; color: var(--muted); line-height: 1.75; }
.legal p b { color: var(--ink); font-weight: 600; }
.legal-updated { font-size: 13px; }
.todo-note { font-size: 13px; color: var(--terra) !important; }

/* ---------- Avis ---------- */
.avis { padding-block: 88px; }
.avis-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.avis-item { margin: 0; padding: 32px 28px; border-radius: 28px; background: rgba(250, 247, 241, .62); border: 1px solid rgba(196, 118, 91, .14); display: grid; gap: 16px; }
.avis-item blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.7; color: var(--ink); }
.avis-item figcaption { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.avis-item figcaption span { color: var(--muted); }

/* ---------- Le salon (photos) ---------- */
.salon { padding-block: 88px; }
.salon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.salon-item { margin: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; overflow: hidden; background: var(--sand); }
.salon-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq { padding-block: 88px 72px; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border-radius: 22px; background: rgba(250, 247, 241, .6); border: 1px solid rgba(196, 118, 91, .14); transition: background .3s; }
.faq-item[open] { background: rgba(250, 247, 241, .85); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 26px; font-family: var(--display); font-size: 17px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; width: 14px; height: 14px; flex: none; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: var(--terra); transition: transform .35s var(--ease-io); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item summary:hover span { color: var(--terra); }
.faq-a { padding: 0 26px 22px; }
.faq-a p { margin: 0; color: var(--muted); line-height: 1.75; max-width: 64ch; }

/* ---------- Bon cadeau ---------- */
.gift { padding-block: 40px 88px; }
.gift-card { max-width: 640px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 12px; padding: clamp(56px, 7vw, 80px) clamp(24px, 5vw, 56px) clamp(36px, 5vw, 52px); border-radius: 320px 320px 32px 32px; background: rgba(250, 247, 241, .62); border: 1px solid rgba(196, 118, 91, .14); }
.gift-card .picto { width: 58px; height: 58px; background: var(--terra); margin-bottom: 4px; }
.gift-card h2 { margin: 0; }
.gift-card p { margin: 4px 0 8px; color: var(--muted); max-width: 46ch; }
.gift-fine { font-size: 13px; }
@media (max-width: 1240px) { .site-nav a[href="#maison"], .site-nav a[href="#faq"] { display: none; } }
@media (max-width: 980px) { .site-nav a[href="#equipe"], .site-nav a[href="#realisations"] { display: none; } }
.nav-lang { opacity: .7; } .nav-lang:hover { opacity: 1; }
.gift-contact { display: grid; gap: 6px; justify-items: center; margin-top: 6px; }
.gift-contact p { margin: 0 !important; }
.gift-mail { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 20px; color: var(--ink) !important; user-select: all; }
.gift-copy { font: inherit; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); background: transparent; border: 1px solid var(--terra); border-radius: 99px; padding: 6px 14px; cursor: pointer; user-select: none; }
.gift-copy:hover { background: var(--terra); color: var(--cream); }

/* ---------- Rythme vertical resserré ---------- */
:root { --sec-y: clamp(52px, 6.5vw, 76px); }
.work, .services, .about, .team, .avis, .salon, .faq, .contact, .brands { padding-block: var(--sec-y); }
.gift { padding-block: 0 var(--sec-y); }
.work { padding-top: calc(var(--sec-y) * .6); }
.sec-head { margin-bottom: clamp(28px, 3.5vw, 40px); }
.hero .inner { padding-bottom: 28px; }
.scroll-cue { margin-top: 22px; }
.scroll-cue i { height: 36px; }
.cf { height: clamp(380px, 46vw, 540px); }
.cap { margin-top: 18px; min-height: 0; }
.ctrl { margin-top: 14px; }
.bar { margin-top: 12px; }
.menu { margin-top: 44px; padding-top: 0; }
.picto-grid { gap: 30px 24px; }
.brands-lead { margin-bottom: 24px; }
.brand-band { padding-block: 16px; }
.duo { margin-top: clamp(44px, 6vw, 64px); }
.members { gap: clamp(28px, 4vw, 56px); }
.note { margin-top: 28px; }
.center { margin-top: 28px; }
.sep-wrap { padding-block: 8px 12px; }
@media (max-width: 760px) {
  :root { --sec-y: 48px; }
  .cf { height: clamp(330px, 88vw, 420px); }
  .members { gap: 48px; }
}

/* =========================================================
   V2 — Hero plein cadre : photo cheveux noirs + logo officiel vectoriel
   (le logo est posé exactement à l'emplacement prévu sur la photo)
   ========================================================= */
:root { --logo-mojo: #C4765B; --logo-sage: #5F938A; }
.wall .hero.hero-v2, .hero.hero-v2 {
  position: relative; overflow: hidden; padding: 0;
  height: min(100svh, 66.667vw); min-height: 560px; background: #D2AC86;
}
/* scène au ratio de la photo (3:2), recadrée comme un « cover », calée en bas */
.h-stage { position: absolute; left: 50%; bottom: 0; width: max(100%, calc(max(100svh, 560px) * 1.5)); aspect-ratio: 3 / 2; transform: translateX(-50%); }
.h-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; will-change: transform; }
.h-logo { position: absolute; margin: 0; left: 25.43%; top: 57.85%; width: 49.17%; }
.h-logo .logo { display: block; width: 100%; height: auto; overflow: visible; }
.h-logo .wm-l, .h-logo .wm-dot, .h-logo .wm-rule, .h-logo .wm-sub, .h-logo .wm-bio { transform-box: fill-box; }
.hero-v2 .scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; color: rgba(241, 236, 227, .75); z-index: 2; }
.hero-v2 .scroll-cue i { height: 40px; }

.h-intro { text-align: center; padding: clamp(46px, 6vw, 72px) 0 clamp(20px, 3vw, 34px); }
.h-intro .wrap { display: grid; justify-items: center; }
.h-intro .colibri { width: clamp(64px, 6vw, 84px); height: auto; margin-bottom: 14px; }
.h-intro .kicker { margin-bottom: 12px; }
.h-slogan { margin: 0 0 22px; font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; color: var(--ink); max-width: 26ch; }
.h-intro .sig-row { margin-bottom: 4px; }
.h-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 26px; }
.h-link { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .4s ease; }
.h-link:hover { background-size: 0 1px; background-position: 100% 100%; }

@media (max-width: 760px) {
  .wall .hero.hero-v2, .hero.hero-v2 { height: 124vw; min-height: 0; }
  .h-stage { width: 176vw; }          /* le logo occupe ~86 % de la largeur */
}

/* =========================================================
   V2 — Mur : enduit béton clair (famille du beige de la photo, en plus clair)
   + ombres de feuillage portées, ici et là, qui bougent doucement
   ========================================================= */
.wall body { background: #E5D7C5 url("../brand/mur.webp") repeat; background-size: 1024px 1024px; }
.has-shade { position: relative; overflow-x: clip; }
.has-shade > .wrap { position: relative; z-index: 1; }
.shade {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(380px, 54vw, 860px); aspect-ratio: 1;
  background: center / contain no-repeat; mix-blend-mode: multiply; opacity: .3;
  transform-origin: 100% 0; animation: sway 11s ease-in-out infinite alternate;
}
.shade.palme { background-image: url("../brand/ombre-palme.webp"); }
.shade.branche { background-image: url("../brand/ombre-branche.webp"); }
.shade.r { right: -16vw; top: -60px; }
.shade.l { left: -16vw; top: -40px; transform: scaleX(-1); }
.about .shade { top: 10%; }
.faq .shade { top: -12%; opacity: .24; }
.contact .shade { top: auto; bottom: -40px; transform: rotate(180deg); transform-origin: 0 100%; }
.services .shade { animation-duration: 13s; }
@keyframes sway {
  0%   { rotate: 0deg;   translate: 0 0;   filter: blur(0); }
  50%  { rotate: 1.4deg; translate: 8px 5px; filter: blur(.6px); }
  100% { rotate: -.8deg; translate: -4px 2px; filter: blur(0); }
}
@media (max-width: 760px) { .shade { width: 92vw; opacity: .24; } .shade.r { right: -24vw; } .shade.l { left: -24vw; } }
@media (prefers-reduced-motion: reduce) { .shade { animation: none; } }

/* =========================================================
   V2 — Lookbook : photos officielles en mosaïque (colonnes à la manière d'un magazine)
   ========================================================= */
.lookbook { padding: var(--sec-y, 64px) 0; }
.lk-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.5vw, 18px); }
.lk { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #E8DDCF; }
.lk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.04); transition: transform 1.2s var(--ease-out, ease); }
.lk:hover img { transform: scale(1.08); }
.lk.a { grid-column: span 8; aspect-ratio: 4 / 3; }
.lk.b { grid-column: span 4; border-radius: 999px 999px 6px 6px / 220px 220px 6px 6px; }
.lk.r { grid-column: span 3; aspect-ratio: 3 / 4; }
.lk.c { grid-column: span 6; aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .lk-grid { grid-template-columns: 1fr 1fr; }
  .lk.a, .lk.c { grid-column: span 2; }
  .lk.b { grid-column: span 2; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px / 160px 160px 6px 6px; }
  .lk.r { grid-column: span 1; }
}
.lk.c img { object-position: 50% 45%; }

/* =========================================================
   V2 — Plantes gravées au point (style planche botanique) à la place des ombres de palmes
   Illustrations originales : coquelicot, armoise, câprier, amla, indigo
   ========================================================= */
.shade.bota { width: clamp(280px, 36vw, 580px); opacity: .5; mix-blend-mode: multiply; filter: none;
  animation: botaDrift 14s ease-in-out infinite alternate; }
.bota.coquelicot { background-image: url("../brand/bota-coquelicot.webp"); }
.bota.armoise    { background-image: url("../brand/bota-armoise.webp"); }
.bota.caprier    { background-image: url("../brand/bota-caprier.webp"); }
.bota.amla       { background-image: url("../brand/bota-amla.webp"); }
.bota.indigo     { background-image: url("../brand/bota-indigo.webp"); }
/* ancrages : les plantes entrent par les bords, comme sur une planche */
.shade.bota.bl { left: -9vw; right: auto; top: auto; bottom: -4%; transform: none; transform-origin: 0 100%; }
.shade.bota.br { right: -9vw; left: auto; top: auto; bottom: -4%; transform: scaleX(-1); transform-origin: 100% 100%; }
.shade.bota.tr { right: -10vw; left: auto; top: 4%; bottom: auto; transform: none; transform-origin: 100% 0; }
.contact .shade.bota, .faq .shade.bota, .about .shade.bota { opacity: .4; }
.contact .shade.bota { left: -16vw; bottom: -8%; }
.faq .shade.bota { top: 14%; }
@keyframes botaDrift { from { rotate: 0deg; } to { rotate: .8deg; } }
@media (max-width: 760px) { .shade.bota { width: 78vw; opacity: .32; } }
@media (prefers-reduced-motion: reduce) { .shade.bota { animation: none; } }

/* =========================================================
   V2 — Hero triptyque (cuivré · noir · blond) + logo officiel animé
   ========================================================= */
.wall .hero.hero-v2, .hero.hero-v2 { height: auto; min-height: 0; background: #F1ECE3; padding: 0; }
.tri { position: relative; display: grid; grid-template-columns: 600fr 704fr 600fr; gap: clamp(3px, .42vw, 8px);
  width: 100%; aspect-ratio: 16 / 9; max-height: 100svh; background: #F1ECE3; overflow: hidden; }
.tri-p { position: relative; margin: 0; overflow: hidden; background: #CFA982; }
.tri-p img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%; display: block; max-width: none; will-change: transform; }
.tri-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,16,10,0) 48%, rgba(26,16,10,.26) 80%, rgba(26,16,10,.40) 100%); }
.tri .h-logo { position: absolute; left: 20%; top: 49%; width: 60%; margin: 0; z-index: 2; }
.tri .h-logo .logo { width: 100%; height: auto; display: block; overflow: visible; }
:root { --logo-mojo: #C4765B; --logo-sage: #6FA89A; }
@media (max-width: 760px) {
  .tri { aspect-ratio: auto; height: 128vw; max-height: none; grid-template-columns: 1fr 1.5fr 1fr; }
  .tri-l img { object-position: 62% 25%; }
  .tri-r img { object-position: 30% 25%; }
  .tri .h-logo { left: 2%; width: 96%; top: 62%; }
}
/* Logo du hero en blanc cassé (le reste du site garde la palette de la charte) */
.tri { --logo-mojo: #F6F1E8; --logo-sage: #F6F1E8; }
.tri .h-logo { filter: drop-shadow(0 2px 14px rgba(40, 24, 14, .28)); }
/* Lookbook compact : une seule rangée de 6 photos */
.lookbook { padding: clamp(36px, 4.5vw, 56px) 0; }
.lookbook .sec-head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.lk-grid { grid-template-columns: repeat(6, 1fr); gap: clamp(6px, .9vw, 12px); }
.lk.a, .lk.b, .lk.r { grid-column: span 1; aspect-ratio: 3 / 4; border-radius: 6px; }
.lk.b { border-radius: 999px 999px 6px 6px / 120px 120px 6px 6px; }
.lk.c { display: none; }
.lk.a img { object-position: 30% 30%; }
@media (max-width: 640px) {
  .lk-grid { grid-template-columns: repeat(3, 1fr); }
  .lk.a, .lk.b, .lk.r { grid-column: span 1; aspect-ratio: 3 / 4; }
  .lk.b { border-radius: 999px 999px 6px 6px / 60px 60px 6px 6px; }
}

/* =========================================================
   V2 — Page compactée : carte en onglets, pictos en bande, équipe en cartes,
   bon cadeau en bandeau, accueil resserré, carrousel plus bas
   ========================================================= */
/* Prestations */
.picto-grid { grid-template-columns: repeat(6, 1fr); gap: 22px 14px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.picto { width: 52px; height: 52px; }
.picto-grid .pl { font-size: 12.5px; line-height: 1.35; }
@media (max-width: 860px) { .picto-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .picto-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; } .picto { width: 44px; height: 44px; } }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto clamp(18px, 2.5vw, 28px); max-width: 980px; }
.tabs [role=tab] { font: inherit; font-size: 13px; letter-spacing: .04em; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(196, 118, 91, .35); background: rgba(255, 253, 249, .55); color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.tabs [role=tab]:hover { border-color: var(--terra); }
.tabs [role=tab][aria-selected=true] { background: var(--terra); border-color: var(--terra); color: #fff; }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.tab-panels { max-width: 720px; margin: 0 auto; }
.tab-panel .cat, .tab-panel .extra { margin: 0; }
.tab-panel .extra { background: rgba(255, 253, 249, .6); }
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; scrollbar-width: none; margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); padding-left: var(--gut-l); padding-right: var(--gut-r); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs [role=tab] { flex: 0 0 auto; }
}
.services .note { margin-top: 18px; }

/* Équipe : deux cartes côte à côte, photo à gauche du texte */
.members { gap: clamp(20px, 3vw, 40px); }
.member { grid-template-columns: 38% 1fr; gap: 20px; align-items: start; }
.m-photo { aspect-ratio: 3 / 4; }
.m-intro, .m-rest p { font-size: 14.5px; line-height: 1.65; }
.member h3 { font-size: clamp(20px, 2vw, 24px); }
.duo { margin-top: clamp(30px, 4vw, 44px); gap: 8px; max-width: 640px; }
.duo-colibri { width: 52px; }
.duo .m-role { font-size: clamp(20px, 2vw, 24px); margin: 0; }
.duo p:not(.m-role):not(.duo-end) { display: none; }
.duo-end { margin-top: 2px !important; }
@media (max-width: 900px) { .members { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 520px) { .member { grid-template-columns: 34% 1fr; gap: 14px; } }

/* Bon cadeau en bandeau */
.gift { padding: clamp(28px, 4vw, 44px) 0; }
.gift-card { max-width: 980px; border-radius: 24px; grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left;
  column-gap: 26px; row-gap: 2px; padding: 26px 32px; }
.gift-card .picto { grid-row: 1 / span 3; margin: 0; }
.gift-card .eyebrow { grid-column: 2; }
.gift-card h2 { grid-column: 2; font-size: clamp(24px, 2.6vw, 34px); }
.gift-card > p { grid-column: 2; margin: 2px 0 0; font-size: 14.5px; }
.gift-card > .btn, .gift-card > a.btn { grid-column: 3; grid-row: 1 / span 3; }
.gift-card .gift-contact { grid-column: 1 / -1; justify-self: center; text-align: center; }
@media (max-width: 760px) {
  .gift-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 22px; }
  .gift-card .picto, .gift-card .eyebrow, .gift-card h2, .gift-card > p, .gift-card > .btn, .gift-card > a.btn { grid-column: 1; grid-row: auto; }
}

/* Accueil sous le triptyque, resserré */
.h-intro { padding: clamp(28px, 3.5vw, 44px) 0 clamp(8px, 1.5vw, 16px); }
.h-intro .colibri { width: 54px; margin-bottom: 8px; }
.h-slogan { margin-bottom: 14px; font-size: clamp(20px, 2.2vw, 28px); }
.h-cta { margin-top: 16px; }

/* Réalisations : carrousel un peu plus bas */
.cf { height: clamp(340px, 38vw, 470px); --w: clamp(210px, 23vw, 300px); }
@media (max-width: 760px) { .cf { height: clamp(320px, 84vw, 400px); } }
.wall body { background-color: #E6D9C7; background-size: 1100px 1100px; }
.wall body { background-color: #EBE0D0; background-size: 1024px 1024px; }  /* 1:1 pour garder le grain net */
.wall .blob { display: none; }

/* Corrections d'affichage */
/* libellés des pictos lisibles (la police manuscrite était trop petite à cette taille) */
.picto-grid .pl { font-family: var(--body); font-size: 12.5px; letter-spacing: .02em; color: var(--sage-text); max-width: 16ch; }
/* lookbook : toutes les vignettes au même format (l'arche écrasée faisait un défaut) */
.lk.b, .lk.a, .lk.r { border-radius: 8px !important; }
.lookbook .sec-head { margin-bottom: 18px; }
/* plante du contact : ancrée proprement en bas à gauche, sans coupure nette */
.contact .shade.bota { transform: none !important; transform-origin: 0 100%; left: -6vw; top: auto; bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent); mask-image: linear-gradient(to top, #000 60%, transparent); }
.contact { overflow: hidden; }
/* pied de page : laisse la place au bouton flottant */
.site-footer .wrap { padding-right: clamp(0px, 14vw, 230px); }
@media (max-width: 720px) { .site-footer { padding-bottom: 72px; } .site-footer .wrap { padding-right: 0; } }

/* Hero mobile : les 3 photos ne sont plus écrasées côte à côte.
   Cheveux noirs en grand avec le logo, cuivré et blond côte à côte dessous. */
@media (max-width: 760px) {
  .tri { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "c c" "l r";
         height: auto; aspect-ratio: auto; max-height: none; gap: 4px; }
  .tri-c { grid-area: c; aspect-ratio: 4 / 5; }
  .tri-l { grid-area: l; aspect-ratio: 3 / 4; }
  .tri-r { grid-area: r; aspect-ratio: 3 / 4; }
  .tri-p img { object-position: 50% 22%; }
  .tri-l img { object-position: 55% 22%; }
  .tri-r img { object-position: 45% 22%; }
  .tri-shade { inset: 0 0 auto 0; height: calc(100vw * 1.25); }
  .tri .h-logo { left: 8%; width: 84%; top: calc(100vw * 1.25 * .58); }
}

/* =========================================================
   V4 — Accueil typographique (sans photo) : logo officiel sur le fond
   ========================================================= */
.wall .hero.hero-v4, .hero.hero-v4 { background: transparent; height: auto; min-height: min(78svh, 760px); display: grid; place-items: center; padding: 120px 0 40px; }
.v4-head { width: min(760px, 86vw); }
.hero-v4 .h-logo { position: static; width: 100%; margin: 0; }
.hero-v4 .h-logo .logo { width: 100%; height: auto; display: block; overflow: visible; }
.hero-v4 { --logo-mojo: #C4765B; --logo-sage: #5F938A; }

/* =========================================================
   V4 — Papier aquarelle + formes peintes (d'après le livret Avaia)
   ========================================================= */
.wall body { background: #EAE2D2 url("../brand/papier.webp") repeat; background-size: 1024px 1024px; }
.has-shade, .about, .services, .faq, .contact { position: relative; overflow-x: clip; }
.aq { position: absolute; z-index: 0; pointer-events: none; height: auto; user-select: none; }
.wrap { position: relative; z-index: 1; }

/* Accueil */
.wall .hero.hero-v4, .hero.hero-v4 { position: relative; overflow: hidden; min-height: min(100svh, 980px); padding: clamp(110px, 12vw, 150px) 0 0;
  display: grid; place-items: start center; background: transparent; }
.hero-v4 .aq-mojo { top: -14%; right: -12vw; width: clamp(340px, 42vw, 680px); }
.hero-v4 .aq-sable { left: -14vw; bottom: -22%; width: clamp(320px, 40vw, 620px); }
.v4-head { position: relative; z-index: 1; width: min(720px, 88vw); display: grid; justify-items: center; text-align: center; }
.hero-v4 .kicker { margin: 0 0 clamp(14px, 2vw, 22px); letter-spacing: .22em; }
.v4-logo { position: relative; width: 100%; }
.hero-v4 .h-logo { position: static; width: 100%; margin: 0; }
.hero-v4 .h-logo .logo { width: 100%; height: auto; display: block; overflow: visible; }
.hero-v4 { --logo-mojo: #C4765B; --logo-sage: #5F938A; }
/* « Douceur et respect » / « Soin et énergie » de part et d'autre du filet, comme sur le livret */
.v4-sig { position: absolute; top: 70%; transform: translateY(-50%); font-family: var(--display); font-size: clamp(8px, 1vw, 12px);
  line-height: 1.35; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.v4-sig-l { left: 6%; text-align: center; }
.v4-sig-r { right: 6%; text-align: center; }
.v4-port { margin-top: clamp(30px, 4.5vw, 54px); display: grid; justify-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.v4-port-t { font-family: var(--display); font-size: clamp(16px, 1.6vw, 20px); }
.v4-arch { display: block; width: clamp(170px, 19vw, 250px); aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; }
.v4-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transition: transform 1.2s var(--ease-out, ease); }
.v4-port:hover .v4-arch img { transform: scale(1.05); }
@media (max-width: 640px) {
  .wall .hero.hero-v4, .hero.hero-v4 { min-height: 0; padding-top: 110px; }
  .v4-sig { position: static; transform: none; display: inline-block; margin: 14px 10px 0; }
  .hero-v4 .aq-mojo { width: 70vw; right: -26vw; top: -6%; } .hero-v4 .aq-sable { width: 70vw; left: -30vw; bottom: -10%; }
}

/* Suite : formes complètes générées, qui débordent naturellement du bord de page */
.aq.s-tr  { top: -6%;  right: -14vw; width: clamp(260px, 30vw, 460px); opacity: .9; }
.aq.s-bl  { bottom: -10%; left: -16vw; width: clamp(300px, 34vw, 520px); opacity: .9; }
.aq.s-bl2 { bottom: -8%; left: -18vw; width: clamp(260px, 30vw, 440px); opacity: .85; }
.aq.s-tr2 { top: -4%;  right: -16vw; width: clamp(300px, 34vw, 520px); opacity: .85; }
@media (max-width: 640px) { .aq.s-tr, .aq.s-bl, .aq.s-bl2, .aq.s-tr2 { width: 58vw; opacity: .75; } .aq.s-tr, .aq.s-tr2 { right: -30vw; } .aq.s-bl, .aq.s-bl2 { left: -30vw; } }
.about .plante { display: none; }
/* les formes ne sont plus coupées net au bord des sections : seul le débord horizontal est masqué */
.wall .hero.hero-v4, .hero.hero-v4, .contact, .about, .services, .faq, .has-shade { overflow: visible; overflow-x: clip; }
.aq { z-index: 0; }
section > .wrap, .hero-v4 .v4-head { position: relative; z-index: 2; }
.site-footer { position: relative; z-index: 3; }
@media (max-width: 640px) {
  .hero-v4 .aq-mojo { width: 62vw; right: -34vw; top: -9%; }
  .hero-v4 .aq-sable { width: 60vw; left: -36vw; bottom: -8%; }
  .aq.s-tr, .aq.s-bl, .aq.s-bl2, .aq.s-tr2 { width: 46vw; opacity: .7; }
  .aq.s-tr, .aq.s-tr2 { right: -30vw; } .aq.s-bl, .aq.s-bl2 { left: -30vw; }
}

/* En-tête : logo réduit au « A », couleur Patina de la charte */
.mark .wm-a { height: 30px; width: auto; color: #649990; display: block; }
.mark:has(.wm-a) { padding-left: 16px; padding-right: 16px; }

/* V4 — Portfolio : arches façon livret, colonne centrale décalée */
.portfolio { padding: var(--sec-y, 64px) 0; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px) clamp(14px, 2.6vw, 36px); max-width: 980px; margin: 0 auto; }
.pf { margin: 0; display: grid; gap: 12px; justify-items: center; }
.pf:nth-child(3n+2) { transform: translateY(clamp(24px, 4vw, 56px)); }
.pf-arch { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; overflow: hidden; background: #E3D6C4; box-shadow: 0 24px 40px -30px rgba(80, 50, 30, .45); }
.pf-arch img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out, ease); }
.pf:hover .pf-arch img { transform: scale(1.05); }
.pf figcaption { font-family: var(--display); font-style: italic; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink); }
.portfolio .wrap { padding-bottom: clamp(24px, 4vw, 56px); }
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .pf:nth-child(3n+2) { transform: none; }
  .pf:nth-child(2n) { transform: translateY(28px); }
  .pf figcaption { font-size: 14px; text-align: center; }
}
.hero.hero-v4, .wall .hero.hero-v4 { min-height: min(72svh, 720px); padding-bottom: 40px; }

/* Club Avaia −10 % */
.site-nav .nav-promo { color: var(--cream) !important; background: #649990; border-radius: 99px; padding: 6px 12px; letter-spacing: .08em; }
.site-nav .nav-promo:hover { background: var(--terra); }
@media (max-width: 720px) { .site-nav .nav-promo { display: inline-block !important; font-size: 11px; padding: 8px 12px; } }
.promo { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; }
.promo[hidden] { display: none; }
.promo-panel { position: relative; width: min(460px, 100%); max-height: 100%; overflow: auto; background: #F4EEE3 url("../brand/papier.webp"); border-radius: 22px;
  padding: 38px clamp(22px, 5vw, 38px) 30px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); text-align: center; }
.promo-close { position: absolute; top: 14px; right: 14px; }
.promo-k { margin: 0; font-family: var(--script); font-size: 28px; color: var(--sage-text); }
.promo-t { margin: 2px 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 4vw, 30px); line-height: 1.2; color: var(--terra); }
.promo-l { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.promo-form { display: grid; gap: 12px; text-align: left; }
.promo-form label span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.promo-form input:not([type=checkbox]) { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid rgba(196,118,91,.35); border-radius: 12px; background: rgba(255,253,249,.8); color: var(--ink); }
.promo-form input:focus { outline: 2px solid #649990; outline-offset: 1px; }
.promo-ok { display: flex; gap: 10px; align-items: flex-start; }
.promo-ok span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 13px !important; line-height: 1.5; color: var(--muted); }
.promo-ok input { margin-top: 3px; accent-color: var(--terra); width: 18px; height: 18px; flex: 0 0 auto; }
.promo-err { margin: 0; color: #A04A2E; font-size: 13px; }
.promo-form .btn { justify-self: center; margin-top: 4px; }
.promo-fine { margin: 2px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.promo-fine a { color: var(--terra); }
.promo-code { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 6px 0 14px; }
.promo-code span { font-family: var(--display); font-size: 30px; letter-spacing: .14em; color: var(--ink); padding: 8px 18px; border: 1.5px dashed var(--terra); border-radius: 12px; }

/* V4 — Portfolio en carrousel, prestations, marques cliquables */
.portfolio .sec-head { margin-bottom: clamp(14px, 2vw, 24px); }
.sec-sub { margin: 10px auto 0; max-width: 40ch; font-family: var(--script); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--sage-text); text-align: center; }
.services .sec-head { display: grid; justify-items: center; margin-bottom: clamp(22px, 3vw, 34px); }
.brand-list { list-style: none; margin: clamp(14px, 2vw, 22px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(10px, 2vw, 22px); }
.bk-btn { display: grid; place-items: center; min-width: 120px; height: 84px; padding: 10px 20px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 253, 249, .55); border: 1px solid rgba(196, 118, 91, .2); color: var(--ink); transition: border-color .3s, background .3s, transform .3s, color .3s; }
.bk-btn:hover { transform: translateY(-2px); border-color: rgba(196, 118, 91, .5); }
.bk-btn[aria-expanded="true"] { background: #fff; border-color: var(--terra); color: var(--terra); box-shadow: 0 14px 30px -20px rgba(80, 50, 30, .5); }
.bk-btn .bt { font-size: 26px; line-height: 1; }
.bdescs { max-width: 620px; margin: 18px auto 0; min-height: 0; }
.bdesc { text-align: center; padding: 18px 22px; border-radius: 16px; background: rgba(255, 253, 249, .7); animation: bdIn .4s ease; }
.bdesc b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--terra); }
.bdesc p { margin: 6px 0 0; color: var(--muted); line-height: 1.65; }
@keyframes bdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bhint { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 640px) { .bk-btn { min-width: 0; width: 100%; height: 70px; } .brand-list { display: grid; grid-template-columns: 1fr 1fr; } .brand-list li:last-child { grid-column: 1 / -1; } }
.brand-list li + li::before { content: none; display: none; }
@media (min-width: 900px) { .brand-list { flex-wrap: nowrap; } }

/* Prestations : bloc « inclus » et compléments sous chaque catégorie */
.tab-panel .extra.addons { margin-top: 22px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 253, 249, .65); border: 1px dashed rgba(196, 118, 91, .35); }
.tab-panel .extra.addons h4 { margin-top: 0; }
.included { max-width: 720px; margin: clamp(26px, 3.5vw, 38px) auto 0; padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 44px); border-radius: 28px;
  background: linear-gradient(180deg, #EFE3CC, #E6D6BC); text-align: center; }
.included .inc-main { margin: 0; font-family: var(--display); font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--ink); }
.included .inc-sub { margin: 16px 0 0; font-family: var(--display); font-size: 15px; line-height: 1.8; color: var(--muted); }

/* Le futur salon : plan 3D en iframe */
.salon3d { padding: clamp(56px, 8vw, 110px) 0; }
.s3d-frame { position: relative; margin-top: clamp(22px, 3vw, 34px); height: min(72vh, 620px); min-height: 380px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #FBF8F2, #E9E0D2); box-shadow: 0 30px 60px -36px rgba(80, 50, 30, .45); }
.s3d-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.s3d-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.s3d-note a { color: var(--terra-d, #A85E45); }
@media (max-width: 760px) { .s3d-frame { height: 64vh; border-radius: 16px; } }

/* ===== Mobile : rythme resserré et tailles ajustées ===== */
@media (max-width: 640px) {
  :root { --sec-y: 40px; }
  .sec-head, .services .sec-head { margin-bottom: 22px; }
  .eyebrow { font-size: 24px; }
  .sec-sub { font-size: 21px; line-height: 1.25; }
  /* hero : plus de vide sous le logo, logo et signatures plus lisibles */
  .hero.hero-v4, .wall .hero.hero-v4 { min-height: 0; padding: 96px 0 26px; }
  .v4-head { width: 94vw; }
  .hero-v4 .kicker { font-size: 10.5px; margin-bottom: 12px; }
  .v4-sig { font-size: 10.5px; margin: 10px 14px 0; letter-spacing: .12em; }
  /* portfolio */
  .portfolio { padding: 30px 0 26px; }
  .portfolio .wrap { padding-bottom: 0; }
  /* prestations */
  .tab-panel .extra.addons { margin-top: 16px; padding: 16px 16px 14px; }
  .tab-panel .extra.addons .tagline-s { font-size: 19px; line-height: 1.3; }
  .included { margin-top: 20px; padding: 18px 18px; border-radius: 18px; }
  .included .inc-main { font-size: 15.5px; line-height: 1.55; }
  .included .inc-sub { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  /* la maison : photo moins haute */
  .about .grid { gap: 26px; }
  .about .figure { max-width: 280px; }
  /* futur salon */
  .salon3d { padding: 40px 0; }
  .s3d-frame { height: 56svh; min-height: 340px; margin-top: 0; }
  /* équipe */
  .members { gap: 30px; }
  .m-intro { font-size: 14px; line-height: 1.6; }
  .duo { margin-top: 28px; }
  /* FAQ */
  .faq-list { gap: 8px; }
  .faq-item summary { padding: 14px 18px; font-size: 15.5px; gap: 14px; }
  /* cadeau, contact, réservation */
  .gift { padding-bottom: 40px; }
  .book-card { padding: 24px 20px; }
  .book-card h3 { font-size: 26px; }
  /* pied de page : une seule marge pour la barre « Réserver » */
  .site-footer { padding-bottom: 0; }
  .site-footer .wrap { padding-block: 24px 84px; }
}