/* G'MA COM · Gwen
   Couleurs reprises du site d'origine, polices de l'Instagram :
   League Spartan (le gras arrondi) et Libre Caslon Condensed italique (le rouge). */

:root {
  --cream: #FAF6F2;
  --sand: #F2EBE3;
  --beige: #DCCAB9;
  --coral: #C96859;
  --coral-ink: #A84A3B;     /* corail assombri pour le petit texte sur fond clair */
  --coral-pale: #F7EDEB;
  --brown: #39150A;
  --brown-mid: #7A3A28;
  --ink: #39150A;
  --ink-soft: #6E4A3E;

  --f-sans: "League Spartan", system-ui, sans-serif;
  --f-serif: "Libre Caslon Condensed", Georgia, serif;

  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(88px, 12vw, 180px);
  --radius: 22px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* le dégradé de l'ancien site de Gwen (beige → corail, 135°) ; la version large
     sert aux boutons : au survol on fait glisser le fond vers sa partie plus soutenue */
  --grad: linear-gradient(135deg, #DCCAB9 0%, #C96859 100%);
  --grad-btn: linear-gradient(135deg, #D8B2A2 0%, #C96859 50%, #A84A3B 100%);
  --shadow: 0 18px 40px -18px rgba(57, 21, 10, 0.35), 0 4px 12px -4px rgba(57, 21, 10, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
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(--f-sans);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
.svgdefs { position: absolute; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--coral); color: var(--cream); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--coral);
}
.serif, .grad-text {
  background-image: linear-gradient(135deg, #DA9A88 0%, #C96859 50%, #A84A3B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  /* l'italique déborde de sa boîte (jambage du p, dernière lettre) : on élargit la zone peinte sans bouger le texte */
  padding: 0.05em 0.1em 0.12em; margin: -0.05em -0.1em -0.12em;
}
em.serif { font-size: 1.08em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brown); color: var(--cream); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

.h2 {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 30px;
  border-radius: 999px;
  background: var(--grad-btn) 0% 50% / 200% 100%;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border: 0; cursor: pointer;
  white-space: nowrap;
  /* verre : liseré clair en haut, creux plus sombre en bas, ombre colorée dessous */
  --btn-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -4px 10px rgba(122, 40, 28, 0.28);
  box-shadow: var(--btn-glass), 0 16px 30px -14px rgba(168, 74, 59, 0.9), 0 4px 10px -4px rgba(57, 21, 10, 0.25);
  text-shadow: 0 1px 2px rgba(122, 58, 40, 0.3);
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-position 600ms var(--ease), background-color 160ms var(--ease), box-shadow 300ms var(--ease), color 160ms var(--ease);
}
/* avec sa pastille, le bouton se resserre à droite autour d'elle */
.btn:has(.btn__ico) { padding: 9px 9px 9px 30px; }
.btn > span { position: relative; }
/* le reflet : une lueur douce qui tombe du haut, sans bord visible */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(85% 120% at 35% -25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 45%, transparent 62%);
}
/* l'éclat de lumière qui traverse au survol */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-110%);
}
/* la pastille de verre et sa flèche, qui sort à droite et revient par la gauche */
.btn__ico {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(122, 40, 28, 0.18), 0 2px 6px -2px rgba(57, 21, 10, 0.3);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.btn__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes btn-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(130%); } 46% { transform: translateX(-130%); } 100% { transform: translateX(0); } }
.btn:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-position: 100% 50%; box-shadow: var(--btn-glass), 0 22px 38px -16px rgba(168, 74, 59, 0.95), 0 6px 12px -4px rgba(57, 21, 10, 0.28); }
  .btn:hover::after { transform: translateX(110%); transition: transform 800ms var(--ease); }
  .btn:hover .btn__ico { background: #fff; color: var(--coral-ink); }
  .btn:hover .btn__ico svg { animation: btn-arrow 520ms var(--ease); }
}
.btn--small { padding: 12px 20px; font-size: 0.92rem; }
.btn--light { background: var(--cream); color: var(--brown); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(57, 21, 10, 0.12), 0 14px 28px -14px rgba(57, 21, 10, 0.6); text-shadow: none; }
.btn--light .btn__ico { background: var(--grad-btn) 100% 50% / 200% 100%; color: #fff; }
.btn--dark { background: var(--brown); text-shadow: none; }
.btn--dark .btn__ico { background: rgba(250, 246, 242, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover, .btn--dark:hover { background: var(--grad-btn) 100% 50% / 200% 100%; color: #fff; }
}

/* Lien secondaire : texte souligné et flèche dans un rond. Au survol le trait se retire,
   le rond se remplit du dégradé corail et la flèche pivote vers le haut. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 700; text-decoration: none;
  padding: 4px 0;
}
.link-arrow > span {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size 420ms var(--ease);
}
.link-arrow__ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform 380ms var(--ease), box-shadow 300ms var(--ease), color 200ms var(--ease);
}
.link-arrow__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.link-arrow__ico::before {
  content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; z-index: -1;
  background: var(--grad-btn) 100% 50% / 200% 100%;
  transform: scale(0); transition: transform 380ms var(--ease);
}
.link-arrow__ico { position: relative; isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover > span { background-size: 0 2px; background-position: 100% 100%; }
  .link-arrow:hover .link-arrow__ico { color: #fff; box-shadow: inset 0 0 0 1.5px transparent, 0 10px 20px -10px rgba(168, 74, 59, 0.9); transform: rotate(-45deg); }
  .link-arrow:hover .link-arrow__ico::before { transform: scale(1); }
}
.link-arrow--light { color: var(--cream); }

/* ---------- Écran d'ouverture ---------- */
.intro { display: none; }
/* Écran d'ouverture : un fond corail en dégradé, deux lumières qui dérivent, et un cadre
   intérieur aux coins arrondis, ombré vers l'intérieur, qui donne la profondeur.
   .intro est l'enveloppe qui remonte (sa hauteur rétrécit vraiment, pas un clip-path) :
   Safari iOS teinte ses barres d'après la boîte des éléments fixes collés au bord, et
   une boîte rognée par clip-path touche encore le bas, la barre restait corail. Le décor
   vit dans .intro__stage, à la hauteur de l'écran, et ne bouge pas pendant la remontée. */
.js .intro {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 100%; z-index: 90; overflow: hidden;
  background-color: var(--coral);
  pointer-events: none;
}
.intro__stage {
  position: absolute; top: 0; left: 0; width: 100%; height: var(--stage-h, 100vh);
  display: grid; place-items: center; align-content: center; gap: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  background-color: var(--coral);
  background-image:
    radial-gradient(80% 70% at 15% 10%, rgba(243, 194, 167, 0.55), transparent 60%),
    radial-gradient(70% 80% at 90% 95%, rgba(122, 40, 28, 0.6), transparent 62%),
    linear-gradient(140deg, #D9877A 0%, #C96859 45%, #A9493A 100%);
  box-shadow: inset 0 0 160px rgba(80, 22, 12, 0.45);
}
.intro__glow { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.intro__glow--a { width: 60vmax; height: 60vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, rgba(255, 220, 200, 0.5), transparent 65%); }
.intro__glow--b { width: 54vmax; height: 54vmax; right: -20vmax; bottom: -22vmax; background: radial-gradient(circle, rgba(57, 21, 10, 0.55), transparent 65%); }
.intro__vf { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vf-glow { opacity: 0.8; }
/* l'extérieur du cadre est légèrement assombri, l'intérieur creusé : la profondeur */
.intro__stage::after {
  content: ""; position: absolute; inset: var(--vf-in, 22px); border-radius: var(--vf-r, 40px); pointer-events: none;
  box-shadow: inset 0 0 90px rgba(80, 22, 12, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 100vmax rgba(57, 21, 10, 0.22);
}
.intro__hud { position: absolute; inset: calc(var(--vf-in, 22px) + 22px); pointer-events: none; font-size: clamp(0.7rem, 1vw, 0.86rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 246, 240, 0.85); }
.hud { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; }
.hud--tl { left: 0; top: 0; } .hud--tr { right: 0; top: 0; } .hud--bl { left: 0; bottom: 0; } .hud--br { right: 0; bottom: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.14em; }
.hud__rec { width: 9px; height: 9px; border-radius: 50%; background: #FFE3D8; box-shadow: 0 0 0 3px rgba(255, 227, 216, 0.25), 0 0 14px #fff; animation: rec 0.9s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
/* sous le logo : le lieu et la barre de chargement, au centre de l'écran */
.intro__load { position: relative; display: grid; justify-items: center; gap: 12px; margin-top: clamp(6px, 1.4vw, 16px); }
.intro__place { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(0.68rem, 0.95vw, 0.8rem); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 240, 232, 0.75); }
.intro__place::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s-7-6.4-7-12a7 7 0 0 1 14 0c0 5.6-7 12-7 12zm0-9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s-7-6.4-7-12a7 7 0 0 1 14 0c0 5.6-7 12-7 12zm0-9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z%27/%3E%3C/svg%3E") center / contain no-repeat; }
.hud__bar { position: relative; display: block; width: min(220px, 50vw); height: 2px; border-radius: 2px; background: rgba(255, 246, 240, 0.22); overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #FFE3D8, #fff); }
@media (max-width: 600px) { .intro__tag { gap: 8px; letter-spacing: 0.12em; font-size: 0.62rem; } }
.intro__logo { position: relative; width: min(64vw, 560px); color: var(--cream); filter: drop-shadow(0 18px 30px rgba(80, 22, 12, 0.45)); }
.intro__tag {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 246, 242, 0.9);
}
.intro__tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--cream); opacity: 0.7; }
.intro__logo svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.gm path { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px var(--gutter);
  transition: color 300ms var(--ease), padding 300ms var(--ease);
}
/* Le verre est dessiné à part : en haut de page il couvre toute la largeur, sans fond ;
   dès qu'on défile il se resserre en pilule flottante aux bords arrondis. */
.nav::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0;
  border-radius: 0;
  transition: inset 450ms var(--ease), border-radius 450ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.nav.is-scrolled { padding-top: 18px; padding-bottom: 18px; }
.nav.is-scrolled::before {
  inset: 9px max(12px, calc(50% - 490px));
  border-radius: 999px;
  background: rgba(250, 246, 242, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(57, 21, 10, 0.07), 0 14px 34px -18px rgba(57, 21, 10, 0.35);
}
/* au-dessus d'une section sombre ou corail */
.nav.on-dark { color: var(--cream); }
.nav.on-dark.is-scrolled::before { background: rgba(57, 21, 10, 0.4); box-shadow: 0 0 0 1px rgba(250, 246, 242, 0.14), 0 14px 34px -18px rgba(0, 0, 0, 0.5); }
.nav.on-dark .nav__brand { color: var(--cream); }
.nav.on-dark .nav__links a[aria-current="page"] { color: #F6D3C9; }
.nav.on-dark .nav__links a[aria-current="page"]::after { background: #F6D3C9; }
.nav.on-dark .nav__links a.nav__contact { background: var(--cream); color: var(--brown); text-shadow: none; box-shadow: none; }
.nav.on-dark .nav__burger { background: var(--cream); }
.nav.on-dark .nav__burger span { background: var(--brown); }
.nav .nav__brand, .nav .nav__links a, .nav__burger, .nav__burger span { transition: color 300ms var(--ease), background-color 300ms var(--ease), transform 220ms var(--ease); }
/* logo au centre, trois pages de chaque côté */
.nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.nav__brand { display: block; color: var(--coral); padding: 4px 8px; border-radius: 12px; transition: transform 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav__brand:hover { transform: scale(1.04) rotate(-1.5deg); } }
.nav__logo { width: 156px; height: auto; fill: currentColor; transition: width 300ms var(--ease); }
.nav.is-scrolled .nav__logo { width: 136px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links--left { justify-content: flex-end; }
.nav__links--right { justify-content: flex-start; }
.nav__links a {
  position: relative;
  text-decoration: none; font-weight: 500; font-size: 0.98rem; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.nav__links a[aria-current="page"] { color: var(--coral-ink); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--coral); transform: translateX(-50%);
}
.nav__links a.nav__contact { margin-left: 8px; background: var(--grad-btn) 0% 50% / 200% 100%; color: #fff; font-weight: 700; padding: 10px 20px; text-shadow: 0 1px 2px rgba(122, 58, 40, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(122, 40, 28, 0.3), 0 8px 18px -10px rgba(168, 74, 59, 0.9); transition: background-position 500ms var(--ease), color 160ms var(--ease); }
.nav__links a.nav__contact[aria-current="page"] { background: var(--brown); color: var(--cream); text-shadow: none; }
.nav__links a.nav__contact[aria-current="page"]::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: var(--sand); }
  .nav__links a.nav__contact:hover { background-position: 100% 50%; }
}
@media (hover: hover) and (pointer: fine) {
  .nav.on-dark .nav__links a:not(.nav__contact):hover { background: rgba(250, 246, 242, 0.16); }
  .nav.on-dark .nav__links a.nav__contact:hover { background: var(--grad-btn) 100% 50% / 200% 100%; color: #fff; }
}
@media (max-width: 1180px) and (min-width: 961px) {
  .nav__links a { padding: 8px 10px; font-size: 0.92rem; }
  .nav__logo { width: 128px; }
}
.nav__burger { display: none; }

.menu { display: none; }

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .nav__inner { grid-template-columns: 1fr; justify-items: center; min-height: 48px; }
  .nav__logo, .nav.is-scrolled .nav__logo { width: 120px; }
  .nav__burger {
    display: grid; place-content: center; gap: 7px;
    position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    border: 0; border-radius: 50%; background: var(--brown); cursor: pointer;
    z-index: 2;
  }
  .nav__burger span { display: block; width: 20px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform 260ms var(--ease); }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  /* menu plein écran : il s'ouvre en cercle depuis le bouton */
  .menu {
    position: fixed; inset: 0; z-index: 49;
    display: block; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--edge, 8px);
    /* autour de la carte, la page reste visible, assombrie et floutée */
    background: rgba(57, 21, 10, 0.28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--cream);
    clip-path: circle(0% at calc(100% - var(--gutter) - 24px) 38px);
    transition: clip-path 600ms var(--ease);
  }
  .menu[hidden] { display: block; visibility: hidden; }
  .menu.is-open { clip-path: circle(150% at calc(100% - var(--gutter) - 24px) 38px); visibility: visible; }
  /* le menu est une carte aux coins arrondis, comme les sections du site, avec son relief */
  .menu__inner {
    min-height: 100%; display: flex; flex-direction: column; gap: 28px;
    padding: 92px calc(var(--gutter) + 4px) max(26px, env(safe-area-inset-bottom));
    border-radius: 30px;
    background: radial-gradient(120% 60% at 100% 0%, rgba(201, 104, 89, 0.42), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(201, 104, 89, 0.16), transparent 60%), linear-gradient(170deg, #4A1D10 0%, var(--brown) 55%, #2A0F07 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(250, 246, 242, 0.08), inset 0 -18px 40px -20px rgba(0, 0, 0, 0.5), 0 30px 60px -20px rgba(30, 10, 4, 0.7);
  }
  .menu__nav a { padding-left: 2px; padding-right: 2px; }
  .menu__who { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.86rem; color: rgba(250, 246, 242, 0.7); }
  .menu__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--brown), 0 0 0 3px var(--coral); }
  .menu__who b { display: block; color: var(--cream); font-size: 0.98rem; }
  .menu__nav { display: grid; }
  .menu__nav a {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
    padding: 13px 0; border-bottom: 1px solid rgba(250, 246, 242, 0.12);
    text-decoration: none; font-size: clamp(1.8rem, 8.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  }
  .menu__nav a:first-child { border-top: 1px solid rgba(250, 246, 242, 0.12); }
  .menu__nav i { align-self: start; padding-top: 0.5em; font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(250, 246, 242, 0.45); }
  .menu__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
  .menu__nav a:active svg { transform: translate(3px, -3px); opacity: 1; }
  .menu__nav a[aria-current="page"] { color: #F0A898; }
  .menu__nav a[aria-current="page"] span { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
  .menu__nav a[aria-current="page"] svg { opacity: 1; }
  .menu__foot { margin-top: auto; display: grid; gap: 18px; }
  .menu__cta { justify-content: space-between; width: 100%; }
  .menu__social { display: flex; gap: 10px; margin: 0; }
  .menu__social a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; text-decoration: none; background: rgba(250, 246, 242, 0.08); box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.14); }
  .menu__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  html.menu-lock { overflow: hidden; }
  @media (max-height: 700px) {
    .menu__inner { padding-top: 80px; gap: 18px; }
    .menu__nav a { padding: 9px 0; font-size: 1.65rem; }
  }
  .nav.menu-open .nav__burger { background: var(--cream); }
  .nav.menu-open .nav__burger span { background: var(--brown); }
  .nav.menu-open::before, .nav.menu-open.is-scrolled::before, .nav.on-dark.menu-open.is-scrolled::before { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-scrolled::before { inset: 8px 10px; }
  .nav.menu-open .nav__brand { color: var(--cream); }
}

/* ---------- Sections en couleur : des cartes aux coins arrondis ----------
   Chaque fond brun, corail ou sable se détache du crème de la page par une fine marge
   et des coins arrondis, au lieu de couper la page en bandes droites. */
:root { --round: clamp(26px, 3.4vw, 52px); --edge: clamp(6px, 0.9vw, 14px); }
.manifesto, .about, .work, .backstage, .steps, .faq, .quotes, .cta, .contact, .footer {
  margin: var(--edge);
  border-radius: var(--round);
  overflow: clip;
}

/* ---------- Héros ---------- */
.hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 2vw;
  padding: 120px var(--gutter) 0;
  overflow: clip;
}
.hero__text { position: relative; z-index: 3; padding-bottom: 6vh; }
.hero__kicker {
  display: block; width: max-content; max-width: 100%;
  font-weight: 600; font-size: 0.95rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--coral-ink); margin: 0 0 22px;
}
.hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.hero__title .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: inline-block; }
.hero__title .serif { font-size: 1.12em; letter-spacing: -0.02em; }
.hero__lead { max-width: 30ch; font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--ink-soft); margin: 28px 0 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }

.hero__stage {
  position: relative;
  align-self: end;
  height: min(88svh, 860px);
  min-height: 560px;
}
/* un halo corail derrière l'arche, à la place du logo qui découpait la tête */
.hero__halo {
  position: absolute; z-index: 0; left: 50%; bottom: 8%;
  width: min(62vw, 820px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 55%, rgba(201, 104, 89, 0.28), rgba(232, 150, 128, 0.12) 42%, transparent 68%);
}
.hero__halo::before, .hero__halo::after {
  content: ""; position: absolute; border-radius: 50%; inset: 14%;
  box-shadow: inset 0 0 0 1px rgba(201, 104, 89, 0.16);
}
.hero__halo::after { inset: 2%; box-shadow: inset 0 0 0 1px rgba(201, 104, 89, 0.09); }
/* Tout se mesure en largeur d'arche (--w) : le découpage de la photo
   (#gwen-clip, en fractions de l'image) reste juste à toutes les tailles.
   Image 1,2 × l'arche en largeur, ses bords coupés tombent hors de l'arche. */
.hero__portrait {
  --w: min(51svh, 500px, 34vw);
  position: absolute; z-index: 1;
  /* décollé du bas de la section : l'arche se referme en bas, en coins arrondis */
  left: 50%; bottom: calc(var(--w) * 0.11 + 14px);
  width: var(--w); height: calc(var(--w) * 1.665);
  margin-left: calc(var(--w) / -2);
}
.hero__arch {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--w) * 1.238);
  background: var(--coral);
  border-radius: calc(var(--w) / 2) calc(var(--w) / 2) calc(var(--w) * 0.12) calc(var(--w) * 0.12);
  box-shadow: 0 30px 50px -30px rgba(57, 21, 10, 0.45);
}
.hero__gwen {
  position: absolute; top: 0;
  left: calc(var(--w) * -0.1);
  width: calc(var(--w) * 1.2); height: calc(var(--w) * 2.1347); max-width: none;
  clip-path: url(#gwen-clip);
}
.hero__portrait svg { position: absolute; }
/* Un second tracé d'arche, en filet, qui fait respirer le cadre */
.hero__portrait::before {
  content: ""; position: absolute; bottom: calc(var(--w) * -0.045);
  left: calc(var(--w) * -0.045); right: calc(var(--w) * -0.045);
  height: calc(var(--w) * 1.328);
  border: 1.5px solid var(--coral);
  border-radius: calc(var(--w) * 0.545) calc(var(--w) * 0.545) calc(var(--w) * 0.165) calc(var(--w) * 0.165);
}

/* ---------- Réactions qui montent dans le héros ---------- */
.fx { position: absolute; inset: -4% -6% 0; pointer-events: none; overflow: visible; }
.fx--back { z-index: 0; }
.fx--front { z-index: 3; }
.fx i {
  position: absolute; left: 0; bottom: 0; display: grid; place-items: center;
  width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%;
  background: #fff; color: var(--c, #E0434F);
  box-shadow: 0 10px 22px -10px rgba(57, 21, 10, 0.45), inset 0 -2px 4px rgba(57, 21, 10, 0.06);
  will-change: transform, opacity; opacity: 0;
}
.fx i.is-solid { background: var(--c); color: #fff; box-shadow: 0 10px 22px -10px var(--c), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.fx i svg { width: 52%; height: 52%; fill: currentColor; }
.fx i.is-line svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx--back i { filter: blur(0.6px); }
.comments { list-style: none; margin: 0; padding: 0; }
.comment {
  position: absolute; z-index: 4;
  display: grid; grid-template-columns: 38px 1fr 30px; gap: 12px; align-items: start;
  width: 300px;
  padding: 14px 14px 14px 14px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  box-shadow: var(--shadow);
  font-size: 0.9rem; line-height: 1.38;
}
.comment__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--cream); background: var(--brown);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--coral);
}
.comment__who { margin: 0 0 2px; font-weight: 700; font-size: 0.86rem; }
.comment__txt { margin: 0; color: #2a1610; }
.comment__like {
  width: 30px; height: 30px; padding: 4px; margin-top: 2px;
  background: none; border: 0; cursor: pointer; border-radius: 50%;
}
.comment__like svg { width: 100%; height: 100%; fill: none; stroke: var(--brown); stroke-width: 1.8; transition: transform 200ms var(--ease); }
.comment__like.is-liked svg { fill: #E0434F; stroke: #E0434F; }
.comment__like:active svg { transform: scale(0.85); }
.c1 { left: -6%; top: 16%; }
.c2 { right: -2%; top: 30%; width: 250px; }
.c3 { left: 2%; bottom: 14%; width: 320px; }
.c4 { right: 0%; bottom: 4%; }

.notif {
  position: absolute; z-index: 4; right: 10%; top: 9%;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 16px 10px 12px;
  background: var(--brown); color: var(--cream);
  border-radius: 999px; font-size: 0.92rem;
  box-shadow: var(--shadow);
}
.notif svg { width: 22px; height: 22px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
.notif strong { display: inline-block; min-width: 2.3em; font-weight: 800; font-variant-numeric: tabular-nums; }

.heart-burst { position: absolute; pointer-events: none; z-index: 6; width: 22px; height: 22px; }
.heart-burst svg { width: 100%; height: 100%; fill: #E0434F; }

@media (max-width: 1100px) {
  .comment { width: 260px; font-size: 0.84rem; }
  .c1 { left: -10%; }
  .c3 { left: -6%; width: 280px; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 96px; gap: 8px; min-height: 0; }
  .hero__text { padding-bottom: 0; }
  .hero__kicker { font-size: 0.66rem; letter-spacing: 0.06em; margin-bottom: 14px; }
  .hero__title { font-size: clamp(2.5rem, 11.4vw, 4.4rem); }
  .hero__lead { margin: 16px 0 22px; font-size: 1.02rem; }
  .hero__ctas { gap: 14px 24px; }
  .hero__stage { height: 122vw; max-height: 620px; min-height: 0; margin: 0 calc(var(--gutter) * -1); }
  .hero__portrait { --w: min(64vw, 380px); }
  .hero__halo { width: 120vw; bottom: 4%; }
  /* sur téléphone, deux commentaires seulement, posés sur le bas du portrait : le visage reste dégagé */
  .comment { width: min(60vw, 250px); grid-template-columns: 28px 1fr 22px; gap: 8px; padding: 9px 10px; font-size: 0.74rem; line-height: 1.3; border-radius: 14px; }
  .comment__avatar { width: 28px; height: 28px; font-size: 0.6rem; }
  .comment__who { font-size: 0.74rem; }
  .comment__txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .comment__like { width: 22px; height: 22px; padding: 2px; }
  .c1 { left: auto; right: 3%; top: auto; bottom: 4%; }
  .c2 { display: none; }
  .c3 { display: none; }
  .c4 { right: auto; left: 3%; top: auto; bottom: 23%; }
  .notif { right: 5%; top: 6%; font-size: 0.78rem; padding: 8px 13px 8px 10px; }
  .notif svg { width: 18px; height: 18px; }
}

/* ---------- Manifeste ---------- */
.manifesto {
  background: var(--brown);
  color: var(--cream);
  padding: var(--section) var(--gutter);
  min-height: 100svh;
  display: grid; align-items: center;
}
.manifesto__text {
  margin: 0;
  font-size: clamp(2.6rem, 8.2vw, 9rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.manifesto__text .serif { color: var(--coral); font-size: 1.14em; }
/* les mots y sont découpés et animés un par un : le dégradé passe sur chaque mot */
.manifesto__text .serif .w {
  background-image: inherit;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.05em 0.1em 0.12em; margin: -0.05em -0.1em -0.12em;
}
.manifesto__text .w { display: inline-block; }
@media (max-width: 860px) {
  /* sur téléphone la phrase tient en quelques lignes : pas besoin d'un écran entier de brun */
  .manifesto { min-height: 0; padding-top: clamp(90px, 22vw, 140px); padding-bottom: clamp(90px, 22vw, 140px); }
  .manifesto__text { font-size: clamp(2.4rem, 12vw, 4rem); }
}

/* ---------- À propos ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  padding: var(--section) var(--gutter);
  background: var(--sand);
}
.about__media { position: relative; height: clamp(560px, 62vw, 820px); }
.about__video {
  position: absolute; margin: 0; left: 0; top: 0;
  width: 62%; aspect-ratio: 9 / 16;
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow);
  z-index: 2;
  background: var(--brown);
}
.about__video video { width: 100%; height: 100%; object-fit: cover; }
.about__photo {
  position: absolute; right: 0; bottom: 0;
  width: 52%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
  z-index: 1;
}
.sound {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(250, 246, 242, 0.92); color: var(--brown);
  font-weight: 600; font-size: 0.9rem;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.sound:active { transform: scale(0.96); }
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound__on, .sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: block; }
.sound[aria-pressed="true"] { background: var(--coral); color: var(--cream); }

.about__text p { max-width: 54ch; color: var(--ink-soft); }
.about__text .about__big {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 600; color: var(--ink); max-width: 22ch; margin: 0 0 24px;
}
.tools { list-style: none; padding: 0; margin: 30px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.tools li { padding: 8px 14px; border-radius: 999px; background: var(--cream); font-size: 0.9rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.1); }
.about__where { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink) !important; }
.about__where svg { width: 22px; height: 22px; fill: none; stroke: var(--coral); stroke-width: 2; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__media { height: 128vw; max-height: 680px; order: 2; }
}

/* ---------- Services ---------- */
.services { padding-top: var(--section); background: var(--cream); }
.services__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px;
  padding: 0 var(--gutter) 48px;
}
.services__head .h2 { margin: 0; }
.services__head p { max-width: 34ch; margin: 0; color: var(--ink-soft); }
.services__pin { overflow: clip; }
.services__track {
  display: flex; gap: 24px;
  padding: 0 var(--gutter) var(--section);
  width: max-content;
}
.svc {
  position: relative;
  width: min(72vw, 430px);
  height: min(62svh, 560px);
  min-height: 440px;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: 26px;
  overflow: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.svc__n {
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.3rem);
  line-height: 0.92; font-weight: 800; letter-spacing: -0.04em;
}
.svc__sub { margin: 6px 0 0; font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.1; }
.svc ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 9px; }
.svc li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.35; }
.svc li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.svc__tag {
  align-self: flex-start; margin: 20px 0 0; padding: 9px 16px;
  border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; font-size: 0.85rem;
}
.svc .btn { align-self: flex-start; margin-top: 22px; }

.svc--coral { background: var(--coral); color: var(--cream); }
.svc--coral .serif { color: var(--brown); }
/* là où le mot change de couleur (brun sur corail, rose sur brun ou sur photo),
   il reste uni : un dégradé corail s'y fondrait dans le fond */
.svc--coral .serif, .svc--brand .serif, .svc--brown .serif, .svc--image .serif, .svc--video .serif,
.cta__title .serif, .contact__title .serif { background: none; -webkit-text-fill-color: currentColor; }
.svc--sand { background: var(--beige); color: var(--brown); }
.svc--sand li::before { background: var(--coral); }
.svc--brown { background: var(--brown); color: var(--cream); }
.svc--brown .serif { color: #F0A898; }
/* la carte devient elle-même une page de la charte : fond bleu nuit de la marque, pas d'encart */
.svc--brand, .detail__media.detail__media--logo {
  --kit-ink: #F4F6F8; --kit-soft: rgba(214, 222, 230, 0.66); --kit-line: rgba(214, 222, 230, 0.16);
  background-color: #041D37;
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(40, 80, 128, 0.55), transparent 65%), linear-gradient(170deg, #06254A 0%, #041D37 50%, #021327 100%);
  color: var(--kit-ink);
}
.svc--brand .svc__sub { color: #C3CDD8; }
.svc--brand li::before { background: #A3AEB9; }
.kit { display: flex; flex-direction: column; color: var(--kit-ink); }
.kit p { margin: 0; }
.kit__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--kit-line); font-size: 0.66em; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kit-soft); }
.kit__logo { position: relative; display: grid; place-items: center; padding: 22px 14%; }
.kit__logo img { position: relative; width: 100%; height: auto; }
.kit__guide { position: absolute; background: rgba(163, 174, 185, 0.22); }
.kit__guide--h { left: 0; right: 0; top: 52%; height: 1px; }
.kit__guide--v { top: 0; bottom: 0; left: 50%; width: 1px; }
.kit__tick { position: absolute; width: 10px; height: 10px; border: 0 solid rgba(163, 174, 185, 0.7); }
.kit__tick:nth-of-type(3) { top: 8px; left: 0; border-top-width: 1px; border-left-width: 1px; }
.kit__tick:nth-of-type(4) { top: 8px; right: 0; border-top-width: 1px; border-right-width: 1px; }
.kit__tick:nth-of-type(5) { bottom: 8px; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.kit__tick:nth-of-type(6) { bottom: 8px; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.kit__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--kit-line); }
.kit__sw { display: grid; gap: 2px; font-size: 0.76em; line-height: 1.25; }
.kit__sw--nuit { --c: #041D37; } .kit__sw--pierre { --c: #A3AEB9; } .kit__sw--blanc { --c: #FFFFFF; }
.kit__chip { display: block; aspect-ratio: 16 / 7; margin-bottom: 8px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.kit__sw b { font-weight: 600; }
.kit__sw code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72em; letter-spacing: 0.04em; color: var(--kit-soft); }
.kit__type { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kit-line); align-items: end; }
.kit__type p { display: grid; gap: 8px; }
.kit__lbl { font-size: 0.62em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kit-soft); }
.kit__type img { width: 100%; height: auto; }
.kit__sig { font-size: 0.64em; letter-spacing: 0.42em; text-transform: uppercase; white-space: nowrap; line-height: 1.6; }
.svc__line { margin: 12px 0 0; max-width: 36ch; font-size: 0.92rem; line-height: 1.4; color: #C3CDD8; }
.svc--brand .kit { margin-top: auto; padding-top: 16px; font-size: 1.02rem; }
.svc--brand .kit__logo { padding: 14px 18%; }
.svc--brand .kit__head { display: none; }
.svc--brand .kit__logo { border-top: 1px solid var(--kit-line); }
.svc--brand .kit__type { display: none; }
@media (max-height: 880px) and (min-width: 861px) {
  .svc--brand .svc__line { display: none; }
  .svc--brand .kit__logo { padding: 14px 20%; }
}
.detail__media.detail__media--logo { width: min(100%, 500px); aspect-ratio: auto; display: flex; align-items: center; padding: clamp(24px, 2.6vw, 36px); }
.detail__media--logo .kit { width: 100%; font-size: 0.95rem; }
.detail__media--logo .kit__logo { padding: 24px 16%; }
.detail__media .kit img { height: auto; object-fit: contain; }
/* pack lancement : les quatre livrables rangés dans un même cadre */
.detail__media.detail__media--pack { background: var(--sand); padding: 14px; }
.pack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.pack__tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.07); }
.pack__lbl { position: relative; z-index: 2; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.pack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__item .pack .serif { display: inline; margin: 0; font-size: inherit; }
.detail__item .pack__mark .serif { display: block; font-size: 1.7rem; }

.pack__tile--logo { background: var(--brown); color: var(--cream); }
.pack__tile--logo .pack__lbl { color: rgba(250, 246, 242, 0.6); }
.pack__mark { position: relative; flex: 1; display: grid; place-content: center; text-align: center; line-height: 0.9; }
.pack__mark b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; }
.pack__mark em { font-size: 1.7rem; color: #F0A898; background: none; -webkit-text-fill-color: currentColor; }
.pack__ring { position: absolute; left: 50%; top: 50%; width: 118px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(250, 246, 242, 0.16); }
.pack__ring::before, .pack__ring::after { content: ""; position: absolute; background: rgba(250, 246, 242, 0.12); }
.pack__ring::before { left: -16px; right: -16px; top: 50%; height: 1px; }
.pack__ring::after { top: -16px; bottom: -16px; left: 50%; width: 1px; }
.pack__dots { display: flex; gap: 6px; }
.pack__dots i:nth-child(1) { --c: #39150A; } .pack__dots i:nth-child(2) { --c: #C96859; } .pack__dots i:nth-child(3) { --c: #DCCAB9; } .pack__dots i:nth-child(4) { --c: #FAF6F2; }
.pack__dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(250, 246, 242, 0.3); }

.pack__posts { position: relative; flex: 1; margin-top: 8px; }
.pack__post { position: absolute; top: 50%; left: 50%; margin: 0; width: 34%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--brown); box-shadow: 0 10px 22px -10px rgba(57, 21, 10, 0.5); }
.pack__post:nth-child(1) { translate: -146% -46%; rotate: -6deg; }
.pack__post:nth-child(3) { translate: 46% -46%; rotate: 6deg; }
.pack__post:nth-child(2) { translate: -50% -52%; z-index: 1; background: var(--coral); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 8px; }
.pack__post figcaption { position: absolute; inset: auto 0 0; padding: 16px 6px 7px; font-size: 0.56rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--cream); background: linear-gradient(0deg, rgba(57, 21, 10, 0.85), transparent); }
.pack__post figcaption em, .pack__post p em { text-transform: none; font-size: 1.15em; font-weight: 400; color: #F7D3C9; background: none; -webkit-text-fill-color: currentColor; }
.pack__post--txt span { font-family: var(--f-serif); font-size: 1.6rem; line-height: 0.6; color: var(--brown); }
.pack__post--txt p { margin: 4px 0 0; font-size: 0.66rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.pack__post--txt p em { color: var(--brown); }

.pack__fmt { display: flex; justify-content: center; gap: 5px; }
.pack__fmt i { font-style: normal; padding: 4px 9px; border-radius: 999px; font-size: 0.6rem; font-weight: 600; background: var(--sand); color: var(--ink-soft); }
.pack__tile--folder { background: var(--beige); }
.pack__folder { position: relative; flex: 1; margin-top: 10px; }
.pack__back { position: absolute; inset: 14% 0 0; border-radius: 4px 12px 12px 12px; background: #B9826E; }
.pack__back::before { content: ""; position: absolute; left: 0; top: -12px; width: 44%; height: 14px; border-radius: 8px 8px 0 0; background: #B9826E; }
.pack__ph { position: absolute; bottom: 30%; width: 44% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: 5px; border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(57, 21, 10, 0.5); }
.pack__ph:nth-of-type(1) { left: 2%; rotate: -13deg; }
.pack__ph:nth-of-type(2) { left: 19%; bottom: 38%; rotate: -4deg; }
.pack__ph:nth-of-type(3) { left: 37%; bottom: 36%; rotate: 5deg; }
.pack__ph:nth-of-type(4) { left: 54%; rotate: 13deg; }
.pack__front { position: absolute; inset: 62% 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #D49A85, #C4846F); color: var(--cream); box-shadow: 0 -6px 14px -8px rgba(57, 21, 10, 0.45); }
.pack__front b { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pack__front small { margin-top: 3px; font-size: 0.62rem; opacity: 0.9; }

.pack__chart { width: 100%; height: auto; margin: auto 0; overflow: visible; }
.pack__grid { stroke: rgba(57, 21, 10, 0.1); stroke-width: 1; fill: none; }
.pack__bars rect { fill: var(--beige); }
.pack__bars rect:last-child { fill: var(--coral); }
.pack__line { fill: none; stroke: var(--brown); stroke-width: 2.5; stroke-linecap: round; }
.pack__pt { fill: var(--coral); stroke: var(--cream); stroke-width: 2.5; }
.pack__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; justify-items: center; font-size: 0.56rem; font-weight: 700; color: var(--ink-soft); }
.pack__cal i { width: 100%; aspect-ratio: 1; max-width: 18px; border-radius: 5px; background: rgba(57, 21, 10, 0.07); }
.pack__cal i.on { background: var(--beige); }
.pack__cal i.r { background: var(--coral); }
.svc__body { display: flex; flex-direction: column; flex: 1; }
/* petites illustrations qui remplissent le milieu des cartes sans photo */
.ill { position: relative; margin: auto 0; padding: 12px 0; display: grid; place-items: center; }
.ill + ul { margin-top: 0; }
.ill img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ill svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ill__feed { width: 52%; padding: 8px; border-radius: 16px; background: var(--cream); box-shadow: 0 16px 30px -16px rgba(57, 21, 10, 0.55); rotate: -4deg; }
.ill__prof { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.ill__prof i { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--coral); }
.ill__prof b { flex: 1; height: 6px; border-radius: 3px; background: rgba(57, 21, 10, 0.16); }
.ill__prof span { padding: 3px 8px; border-radius: 6px; background: var(--coral); color: var(--cream); font-size: 0.55rem; font-weight: 700; }
.ill__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 8px; overflow: hidden; }
.ill__grid img { aspect-ratio: 1; }
.ill__bubble { position: absolute; display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 11px 7px 8px; border-radius: 999px; background: var(--cream); color: var(--brown); font-size: 0.68rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(57, 21, 10, 0.5); }
.ill__bubble svg { width: 15px; height: 15px; color: var(--coral); fill: currentColor; stroke: none; }
.ill__bubble--b svg { fill: none; stroke: currentColor; }
.ill__bubble--a { right: 2%; top: 22%; }
.ill__bubble--b { left: 0; bottom: 16%; }

.ill__report { width: 70%; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; padding: 16px; border-radius: 16px; background: var(--cream); box-shadow: 0 16px 30px -16px rgba(57, 21, 10, 0.45); rotate: 3deg; }
.ill__ring { width: 52px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--coral) 0 68%, var(--beige) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.ill__rows { display: grid; gap: 7px; }
.ill__rows i { position: relative; height: 7px; margin-left: 16px; border-radius: 4px; background: rgba(57, 21, 10, 0.12); }
.ill__rows i:nth-child(2) { width: 76%; } .ill__rows i:nth-child(4) { width: 58%; }
.ill__rows i::before { content: ""; position: absolute; left: -16px; top: 50%; width: 9px; height: 9px; translate: 0 -50%; border-radius: 50%; background: rgba(57, 21, 10, 0.2); }
.ill__rows i.ok::before { background: #7FA07A; }
.ill__rows i.ko::before { background: var(--coral); }
.ill__spark { grid-column: 1 / -1; width: 100%; height: auto; color: var(--coral); stroke-width: 2.5; }
.ill__lens { position: absolute; right: 8%; bottom: 4%; display: grid; place-items: center; width: 58px; aspect-ratio: 1; border-radius: 50%; background: var(--brown); color: var(--cream); box-shadow: 0 12px 22px -10px rgba(57, 21, 10, 0.6); }
.ill__lens svg { width: 26px; height: 26px; stroke-width: 2.4; }

.ill--pack { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ill__t { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: rgba(250, 246, 242, 0.1); box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.16); }
.ill__t:nth-child(odd) { translate: 0 -8px; }
.ill__t--logo { background: var(--cream); color: var(--brown); text-align: center; align-content: center; gap: 0; }
.ill__t--logo b { font-size: 1.15rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.svc .ill__t--logo em { display: block; margin: 0; font-size: 1.05rem; line-height: 0.9; color: var(--coral); }
.ill__t--post img { position: absolute; inset: 0; }
.ill__t--post i { position: absolute; left: 8px; right: 30%; bottom: 8px; height: 6px; border-radius: 3px; background: var(--cream); }
.ill__t--folder { background: #C4846F; }
.ill__t--folder img { position: absolute; left: 18%; top: 14%; width: 64%; height: 52%; border: 2px solid #fff; border-radius: 4px; rotate: -6deg; }
.ill__t--folder i { position: absolute; inset: 52% 0 0; border-radius: 8px 8px 0 0; background: #D49A85; }
.ill__t--chart svg { width: 64%; fill: rgba(250, 246, 242, 0.4); stroke: none; }
.ill__t--chart .c { fill: #F0A898; }
@media (max-height: 760px) and (min-width: 861px) {
  .ill { padding: 6px 0; }
  .svc__tag { margin-top: 12px; }
  .ill__feed { width: 46%; }
  .ill__grid img:nth-child(n+4) { display: none; }
  .ill__bubble--a { top: 6%; }
  .ill__bubble--b { bottom: 4%; }
  .ill__report { width: 62%; padding: 12px; }
}
.svc--image, .svc--video { color: var(--cream); background: var(--brown); }
.svc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.svc--image .svc__body, .svc--video .svc__body { position: relative; z-index: 1; }
/* shooting : la photo d'un côté, l'appareil de l'autre, coupés en diagonale ; le reflet crème trace la coupe */
.svc__split { position: absolute; inset: 0; z-index: 0; filter: drop-shadow(-3px 0 0 rgba(250, 246, 242, 0.9)); }
.svc__split img { position: absolute; top: 0; left: 26%; width: 74%; height: 100%; object-fit: cover; object-position: 8% 50%; clip-path: polygon(52% 0, 100% 0, 100% 100%, 14% 100%); }
.svc--image::after, .svc--video::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(57, 21, 10, 0.82) 0%, rgba(57, 21, 10, 0.35) 30%, rgba(57, 21, 10, 0) 46%),
    linear-gradient(0deg, rgba(57, 21, 10, 0.94) 0%, rgba(57, 21, 10, 0.75) 32%, rgba(57, 21, 10, 0) 62%);
}
.svc--image .serif, .svc--video .serif { color: #F4B5A6; }

@media (max-width: 860px) {
  .services__track { flex-direction: column; width: auto; gap: 16px; }
  .svc { width: 100%; height: auto; min-height: 0; }
  .svc ul { margin-top: 28px; }
  .svc--image, .svc--video { min-height: 500px; }
  /* sur mobile la liste suit le titre, au milieu de la photo : voile uniforme plus soutenu */
  .svc--image::after, .svc--video::after {
    background:
      linear-gradient(180deg, rgba(57, 21, 10, 0.8) 0%, rgba(57, 21, 10, 0.55) 55%, rgba(57, 21, 10, 0.25) 100%);
  }
}

/* ---------- Résultats ---------- */
.results { padding: var(--section) var(--gutter); background: var(--cream); }
.results__intro { max-width: 820px; margin-bottom: 40px; }
.results__intro p { color: var(--ink-soft); max-width: 50ch; }
.results__kicker { margin: 0 0 14px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink) !important; }

.phone {
  margin: 0; position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 34px; overflow: hidden;
  background: var(--brown);
  box-shadow: 0 0 0 8px var(--brown), var(--shadow);
}
.phone video { width: 100%; height: 100%; object-fit: cover; }

/* trois chiffres, et la phrase d'une cliente : rien de plus */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat {
  position: relative; overflow: hidden; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(260px, 26vw, 360px); padding: clamp(24px, 2.6vw, 36px);
  border-radius: 30px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.06), 0 20px 40px -30px rgba(57, 21, 10, 0.5);
}
.stat--dark { background-color: var(--brown); background-image: var(--bg-brown); color: var(--cream); }
.stat__num {
  position: relative; z-index: 1; margin: 0;
  font-size: clamp(4.2rem, 8vw, 7.5rem); line-height: 0.85; font-weight: 900; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #DA9A88, #C96859 50%, #A84A3B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.stat__label { position: relative; z-index: 1; margin: 16px 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 600; line-height: 1.3; max-width: 18ch; }
.stat__label small { display: block; margin-top: 4px; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 1.05em; color: var(--coral-ink); }
.stat__curve { position: absolute; left: 0; right: 0; top: 18%; width: 100%; max-width: none; height: 38%; opacity: 0.9; }
.stat__curve path { fill: none; stroke: rgba(201, 104, 89, 0.35); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.proof {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap;
  margin: 20px 0 0; padding: clamp(24px, 3vw, 40px) clamp(26px, 3.4vw, 48px); border-radius: 30px;
  background-color: var(--coral); background-image: var(--bg-coral); color: #fff;
}
.proof blockquote { margin: 0; max-width: 30ch; font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.proof blockquote em { font-family: var(--f-serif); font-weight: 500; color: var(--brown); letter-spacing: -0.01em; }
.proof figcaption { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.proof .comment__avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--coral), 0 0 0 4px rgba(255, 255, 255, 0.6); }
/* la vidéo du resto à droite, les chiffres et l'avis à gauche */
.results__body {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 330px);
  grid-template-areas: "stats reel" "proof reel"; grid-template-rows: auto 1fr;
}
.results__body .stats { grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.results__body .stat { min-height: clamp(240px, 22vw, 320px); padding: clamp(20px, 2vw, 30px); }
.results__body .stat__num { font-size: clamp(3rem, 5.2vw, 5.4rem); }
.results__body .proof { grid-area: proof; margin: 0; align-self: stretch; }
.results__reel { grid-area: reel; margin: 0; }
.results__reel .phone { box-shadow: 0 0 0 7px var(--brown), 0 34px 60px -24px rgba(57, 21, 10, 0.55); }
.results__reel figcaption { margin-top: 20px; color: var(--ink-soft); font-size: 1rem; line-height: 1.4; }
.results__reel figcaption strong { color: var(--ink); }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr; gap: 14px; }
  .stat { min-height: 0; padding: 26px 24px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; }
  .stat__num { font-size: clamp(3.4rem, 15vw, 4.6rem); }
  .stat__label { margin: 0; font-size: 1rem; }
  .stat__curve { display: none; }
  .proof { margin-top: 14px; }
  .results__body { grid-template-columns: 1fr; grid-template-areas: "stats" "reel" "proof"; gap: 14px; grid-template-rows: none; }
  .results__body .stats { grid-template-columns: 1fr; }
  .results__body .stats { gap: 14px; }
  .results__body .stat { min-height: 0; padding: 26px 24px; }
  .results__body .stat__num { font-size: clamp(3.4rem, 15vw, 4.6rem); }
  .results__reel { width: min(300px, 78vw); margin: 14px auto; text-align: center; }
}

/* ---------- Réalisations ---------- */
.work { padding: var(--section) 0; background: var(--sand); }
.work__head { padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; align-items: end; margin-bottom: 64px; }
.work__head p { margin: 0 0 1em; color: var(--ink-soft); max-width: 44ch; }

.feed {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 var(--gutter);
  height: clamp(620px, 78vw, 1100px);
  overflow: clip;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.feed__col { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); will-change: transform; }
.feed__col img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: var(--beige); }
.feed__col:nth-child(2) { margin-top: -12%; }
.feed__col:nth-child(3) { margin-top: 6%; }

.projects { list-style: none; margin: 72px 0 0; padding: 0 var(--gutter); counter-reset: p; }
.projects li { border-top: 1px solid rgba(57, 21, 10, 0.16); }
.projects li:last-child { border-bottom: 1px solid rgba(57, 21, 10, 0.16); }
.project {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 30px;
  padding: 26px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: color 180ms var(--ease);
}
.project__name {
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em;
  transition: transform 300ms var(--ease);
}
.project__type { font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--coral-ink); text-align: right; }
.project__thumb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .project:hover .project__name { transform: translateX(18px); color: var(--coral); }
}
.preview {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 280px; aspect-ratio: 4 / 5;
  border-radius: 20px; overflow: hidden;
  pointer-events: none;
  box-shadow: var(--shadow);
  opacity: 0; transform: scale(0.9);
}
.preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .work__head { grid-template-columns: 1fr; }
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 150vw; }
  .feed__col:nth-child(3) { display: none; }
  .project { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 4px 18px; padding: 16px 0; }
  .project__thumb { display: block; grid-row: 1 / span 2; width: 96px; height: 120px; object-fit: cover; border-radius: 14px; }
  .project__name { grid-column: 2; font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .project__type { grid-column: 2; text-align: left; font-size: 1.1rem; }
}

/* ---------- Coulisses ---------- */
.backstage {
  background: var(--brown); color: var(--cream);
  padding: clamp(56px, 6vw, 88px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: center;
  overflow: clip;
}
.backstage__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15; max-width: 22ch; margin: 0 0 24px; color: #F0C9BE; }
.backstage__text .more { margin-top: 24px; }
.backstage__steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; max-width: 420px; }
.backstage__steps li {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0;
  border-top: 1px solid rgba(250, 246, 242, 0.14); font-weight: 600; font-size: 1.05rem;
}
.backstage__steps li:last-child { border-bottom: 1px solid rgba(250, 246, 242, 0.14); }
.backstage__steps span { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--coral); font-variant-numeric: tabular-nums; }

/* les trois vidéos dans le viseur d'une caméra, comme l'écran d'ouverture */
.backstage__stage { position: relative; display: grid; place-items: center; padding: 44px clamp(24px, 3vw, 48px) 40px; }
.backstage__stage::before {
  content: ""; position: absolute; inset: 8% 12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 104, 89, 0.42), rgba(201, 104, 89, 0) 100%);
  filter: blur(30px);
}
.backstage__vf { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.backstage__vf i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(250, 246, 242, 0.55); }
.backstage__vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.backstage__vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.backstage__vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.backstage__vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.backstage__rec, .backstage__tc {
  position: absolute; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(250, 246, 242, 0.75); font-variant-numeric: tabular-nums;
}
.backstage__rec { top: 10px; left: 48px; display: inline-flex; align-items: center; gap: 8px; }
.backstage__rec b { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 10px #E5484D; animation: bs-rec 1.6s steps(1) infinite; }
@keyframes bs-rec { 50% { opacity: 0.2; } }
.backstage__tc { bottom: 10px; right: 48px; }
/* trois téléphones de taille contenue : la section ne doit pas dépasser un écran */
.backstage__phones { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); align-items: start; width: 100%; max-width: 660px; }
.bs-clip { margin: 0; }
.bs-clip:nth-child(2) { margin-top: 9%; }
.bs-clip:nth-child(3) { margin-top: 4%; }
.bs-clip figcaption { margin-top: 14px; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; color: #F0C9BE; }
.backstage__phones .phone { border-radius: 26px; box-shadow: 0 0 0 6px #1f0b05, 0 26px 50px -20px rgba(0, 0, 0, 0.6); }
@media (max-width: 860px) {
  .backstage { grid-template-columns: 1fr; gap: 36px; }
  .backstage__stage { padding: 36px 18px; }
  .backstage__vf i { width: 24px; height: 24px; }
  .backstage__rec { left: 34px; top: 6px; } .backstage__tc { right: 34px; bottom: 6px; }
  .backstage__phones { gap: 12px; max-width: 460px; }
  .backstage__phones .phone { border-radius: 22px; box-shadow: 0 0 0 5px #1f0b05; }
  .bs-clip figcaption { font-size: 0.85rem; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .backstage__rec b { animation: none; } }

/* ---------- Profil Instagram : l'écran de l'appli, à l'identique ----------
   Police système et couleurs d'Instagram : c'est ce qui le rend crédible. */
.igc {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 8px; border-radius: 999px;
  background: rgba(250, 246, 242, 0.08);
  box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cream); text-decoration: none;
  transition: background-color 260ms var(--ease), transform 260ms var(--ease);
}
.igc:hover { background: rgba(250, 246, 242, 0.14); transform: translateY(-2px); }
.igc__avatar {
  width: 54px; height: 54px; flex-shrink: 0; padding: 2.5px; border-radius: 50%;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF);
}
.igc__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--brown); }
.igc__text { display: grid; gap: 2px; line-height: 1.2; }
.igc__text b { font-weight: 700; font-size: 1.05rem; }
.igc__text span { font-size: 0.9rem; color: #F0C9BE; }
.igc__logo {
  display: grid; place-items: center; width: 42px; height: 42px; margin-left: 10px; border-radius: 50%;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF); color: #fff;
  transition: transform 400ms var(--ease);
}
.igc:hover .igc__logo { transform: rotate(-12deg) scale(1.06); }
.igc__logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.igc__logo .f { fill: currentColor; stroke: none; }

/* ---------- En-tête des pages intérieures ---------- */
.page-head {
  position: relative; overflow: clip;
  padding: clamp(150px, 18vw, 230px) var(--gutter) clamp(64px, 8vw, 110px);
  background: var(--cream);
}
.page-head__crumbs { display: flex; gap: 10px; margin: 0 0 26px; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); }
.page-head__crumbs a { text-decoration: none; }
.page-head__crumbs a:hover { color: var(--coral-ink); }
.page-head__title {
  margin: 0; max-width: 15ch;
  font-size: clamp(3rem, 8vw, 8rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.05em;
}
.page-head__title .line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.page-head__title .line > span { display: inline-block; }
.page-head__lead { max-width: 46ch; margin: 30px 0 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--ink-soft); }
.page-head__mark {
  position: absolute; right: calc(var(--gutter) * -0.5); top: 18%;
  width: min(44vw, 640px); color: var(--sand); z-index: 0; pointer-events: none;
}
.page-head__mark svg { width: 100%; height: auto; fill: currentColor; }
.page-head > *:not(.page-head__mark) { position: relative; z-index: 1; }
@media (max-width: 860px) {
  /* sur téléphone, le grand logo en filigrane passe sous le texte au lieu de le traverser */
  .page-head { padding-top: 124px; padding-bottom: calc(19vw + 44px); }
  .page-head__mark { width: 86vw; top: auto; bottom: 22px; right: -12vw; }
  .page-head__crumbs { margin-bottom: 20px; }
  .page-head__lead { margin-top: 22px; font-size: 1.05rem; }
}

/* ---------- Lien « voir la page » sous une section de l'accueil ---------- */
.more { margin: 40px 0 0; }
.services .more { margin: 0; padding: 0 var(--gutter) var(--section); }
.services:has(.more) .services__track { padding-bottom: 48px; }
.work .more { padding: 0 var(--gutter); }

/* ---------- Méthode en étapes ---------- */
.steps { padding: var(--section) var(--gutter); background: var(--sand); }
.steps__list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps__list li { counter-increment: s; padding: 30px 26px 34px; background: var(--cream); border-radius: 26px; }
.steps__list li::before { content: counter(s); display: block; font-family: var(--f-serif); font-style: italic; font-size: 3.6rem; line-height: 1; color: var(--coral); margin-bottom: 18px; }
.steps__list h3 { margin: 0 0 10px; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; }
.steps__list p { margin: 0; color: var(--ink-soft); }
@media (max-width: 1000px) { .steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps__list { grid-template-columns: 1fr; } }

/* ---------- Atouts (à propos) ---------- */
.why { padding: var(--section) var(--gutter); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); }
.why__list { list-style: none; margin: 0; padding: 0; }
.why__list li { padding: 28px 0; border-top: 1px solid rgba(57, 21, 10, 0.14); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px 30px; }
.why__list li:last-child { border-bottom: 1px solid rgba(57, 21, 10, 0.14); }
.why__list h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -0.03em; }
.why__list p { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) { .why, .why__list li { grid-template-columns: 1fr; } }

/* ---------- Détail des services ---------- */
.detail { padding: var(--section) max(var(--gutter), (100% - 1240px) / 2); display: grid; gap: clamp(80px, 10vw, 150px); }
.detail__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; scroll-margin-top: 100px; }
.detail__item:nth-child(even) .detail__media { order: 2; justify-self: start; }
/* le visuel reste à taille humaine : jamais plus haut que l'écran, collé côté texte */
.detail__media { position: relative; margin: 0; width: min(100%, 460px, calc(76svh * 0.8)); justify-self: end; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--beige); box-shadow: var(--shadow); }
.detail__media img, .detail__media video { width: 100%; height: 100%; object-fit: cover; }
.detail__media--logo > img { width: 72%; height: auto; object-fit: contain; }
.detail__item h2 { margin: 0 0 6px; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 0.95; letter-spacing: -0.04em; }
.detail__item .serif { display: block; font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: 22px; }
.detail__item > div > p { color: var(--ink-soft); max-width: 50ch; }
.detail__item ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.detail__item li { position: relative; padding-left: 26px; }
.detail__item li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.detail__for { margin-top: 26px !important; padding-top: 20px; border-top: 1px solid rgba(57, 21, 10, 0.14); font-weight: 500; color: var(--ink) !important; }
@media (max-width: 860px) {
  .detail__item { grid-template-columns: minmax(0, 1fr); }
  .detail__item:nth-child(even) .detail__media { order: 0; }
  .detail__media, .detail__item:nth-child(even) .detail__media { width: 100%; justify-self: stretch; }
  .detail__media:not(.detail__media--logo):not(.detail__media--pack) { aspect-ratio: 4 / 3; }
  .detail__media.detail__media--logo { aspect-ratio: auto; padding: 24px 20px; width: 100%; }
  .detail__media.detail__media--pack { aspect-ratio: 4 / 5; padding: 10px; }
  .pack { gap: 8px; }
  .pack__tile { padding: 11px; border-radius: 14px; }
  .pack__lbl { font-size: 0.56rem; letter-spacing: 0.1em; }
  .pack__mark b { font-size: 1.5rem; }
  .detail__item .pack__mark .serif { font-size: 1.35rem; }
  .pack__ring { width: 96px; }
  .pack__post figcaption { font-size: 0.42rem; padding: 12px 4px 5px; }
  .pack__post--txt { padding: 5px !important; }
  .pack__post--txt span { font-size: 1.1rem; }
  .pack__post--txt p { font-size: 0.5rem; }
  .pack__fmt { gap: 3px; }
  .pack__fmt i { padding: 3px 6px; font-size: 0.5rem; }
  .pack__front { padding: 8px 9px; }
  .pack__front b { font-size: 0.8rem; }
  .pack__front small { font-size: 0.52rem; }
  .pack__cal { gap: 3px; font-size: 0.5rem; }
  .detail__media--logo .kit { font-size: 1rem; }
  .detail__media--logo .kit__logo { padding: 26px 10%; }
  .kit__type { grid-template-columns: minmax(0, 1fr); }
  .kit__type img { width: 62%; }
}

/* ---------- Questions fréquentes ---------- */
.faq {
  position: relative; overflow: clip;
  padding: var(--section) var(--gutter); background: var(--sand);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: start;
}
.faq__side { position: sticky; top: 120px; }
/* trois petites bulles « ? » à côté du sur-titre, qui rebondissent chacune à son tour */
.faq__kicker { display: flex; align-items: center; gap: 14px; }
.faq__bubbles { display: inline-flex; align-items: flex-end; gap: 5px; height: 40px; }
.faq__bubbles i {
  display: grid; place-items: center; width: 30px; height: 30px; padding-top: 2px;
  border-radius: 50% 50% 50% 6px;
  background: var(--grad-btn) 30% 50% / 200% 100%; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 16px -8px rgba(168, 74, 59, 0.9);
  font-family: var(--f-serif); font-style: italic; font-size: 1.1rem; line-height: 1; letter-spacing: 0; text-transform: none;
  transform-origin: 0 100%;
  animation: faq-bubble 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.faq__bubbles i:nth-child(2) { width: 24px; height: 24px; font-size: 0.9rem; background: var(--brown); animation-delay: 0.25s; }
.faq__bubbles i:nth-child(3) { width: 19px; height: 19px; font-size: 0.75rem; background: var(--cream); color: var(--coral-ink); box-shadow: inset 0 0 0 1px rgba(201, 104, 89, 0.4); animation-delay: 0.5s; }
@keyframes faq-bubble {
  0%, 55%, 100% { transform: translateY(0) rotate(0) scale(1); }
  12% { transform: translateY(-9px) rotate(-8deg) scale(1.08); }
  24% { transform: translateY(0) rotate(4deg) scale(0.97); }
  34% { transform: translateY(0) rotate(0) scale(1); }
}
.faq__kicker { margin: 0 0 14px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }
.faq__lead { margin: 0 0 34px; max-width: 32ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.faq__ask { display: grid; gap: 14px; padding: 22px 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.06); max-width: 380px; }
.faq__ask p { margin: 0; color: var(--ink-soft); }
.faq__ask b { color: var(--ink); }

.faq__list { display: grid; gap: 14px; counter-reset: faq; }
.faq details {
  counter-increment: faq; position: relative;
  border-radius: 26px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.06), 0 16px 34px -28px rgba(57, 21, 10, 0.5);
  transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease), color 400ms var(--ease);
}
.faq summary {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 22px 22px 22px 26px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* le numéro, puis la pastille « ? » qui se retourne en « × » à l'ouverture */
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 1.5em; line-height: 1; color: var(--coral); min-width: 1.4em;
}
.faq__toggle {
  position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-btn) 0% 50% / 200% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 18px -10px rgba(168, 74, 59, 0.9);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background-position 500ms var(--ease);
}
.faq__toggle::before, .faq__toggle::after {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  transition: opacity 250ms var(--ease), transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq__toggle::before { content: "?"; font-family: var(--f-serif); font-style: italic; font-size: 1.55rem; padding-top: 2px; }
.faq__toggle::after { content: "×"; font-size: 1.7rem; font-weight: 400; opacity: 0; transform: rotate(-90deg) scale(0.4); }
.js .faq details:not(.is-in) .faq__toggle { transform: rotate(-180deg) scale(0.4); }
.faq details[open] { background-color: var(--brown); background-image: var(--bg-brown); color: var(--cream); box-shadow: 0 26px 50px -28px rgba(57, 21, 10, 0.8); }
.faq details[open] summary::before { color: #F0A898; }
.faq details[open] .faq__toggle { transform: rotate(180deg); background: var(--cream); }
.faq details[open] .faq__toggle::before { opacity: 0; transform: scale(0.4); }
.faq details[open] .faq__toggle::after { opacity: 1; transform: rotate(180deg) scale(1); color: var(--coral-ink); }
.faq details p { margin: 0; padding: 0 76px 26px calc(26px + 1.4em * 1.5 + 18px); color: rgba(250, 246, 242, 0.85); max-width: 70ch; line-height: 1.65; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]):hover { box-shadow: inset 0 0 0 1px rgba(201, 104, 89, 0.35), 0 22px 40px -26px rgba(57, 21, 10, 0.55); }
  .faq details:not([open]):hover .faq__toggle { transform: rotate(-14deg) scale(1.08); background-position: 100% 50%; }
}
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq summary { gap: 12px; padding: 18px 16px 18px 18px; }
  .faq__toggle { width: 40px; height: 40px; }
  .faq details p { padding: 0 18px 22px; }
}

/* ---------- Témoignages ---------- */
.quotes { padding: var(--section) var(--gutter); background: var(--brown); color: var(--cream); }
.quotes__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.quote { position: relative; margin: 0; padding: clamp(28px, 3vw, 44px); border-radius: 30px; background: rgba(250, 246, 242, 0.06); box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.12); display: flex; flex-direction: column; gap: 26px; overflow: hidden; }
.quote:nth-child(1) { background: var(--coral); box-shadow: none; }
/* grand guillemet en filigrane, dans le coin */
.quote::before { content: "\201D"; position: absolute; right: clamp(20px, 2.6vw, 38px); top: clamp(14px, 1.6vw, 24px); font-family: var(--f-serif); font-size: clamp(6rem, 9vw, 8.5rem); line-height: 0.75; color: var(--coral); opacity: 0.35; pointer-events: none; }
.quote:nth-child(1)::before { color: var(--cream); opacity: 0.22; }
.quote blockquote { position: relative; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.18; }
.quote figcaption { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(250, 246, 242, 0.14); display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 1.02rem; }
.quote:nth-child(1) figcaption { border-top-color: rgba(250, 246, 242, 0.3); }
.quote figcaption > span:last-child span { display: block; margin-top: 2px; font-weight: 400; font-size: 0.9rem; opacity: 0.72; }
.quote .comment__avatar { flex-shrink: 0; width: 50px; height: 50px; font-size: 0.92rem; letter-spacing: 0.06em; line-height: 1; padding-top: 2px; color: var(--cream); background: var(--grad-btn); box-shadow: 0 0 0 3px var(--brown), 0 0 0 4px rgba(250, 246, 242, 0.35); }
.quote:nth-child(1) .comment__avatar { color: var(--coral-ink); background: var(--cream); box-shadow: 0 0 0 3px var(--coral), 0 0 0 4px rgba(250, 246, 242, 0.6); }
@media (max-width: 860px) { .quotes__grid { grid-template-columns: 1fr; } }

/* ---------- Reels des coulisses ---------- */
.reels { padding: var(--section) var(--gutter); }
.reels__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.reel { margin: 0; }
.reel .phone { box-shadow: 0 0 0 6px var(--brown), var(--shadow); border-radius: 28px; }
.reel figcaption { margin-top: 22px; font-size: 1rem; color: var(--ink-soft); }
.reel figcaption strong { display: block; color: var(--ink); font-size: 1.15rem; margin-bottom: 4px; }
.reel:nth-child(even) { margin-top: 12%; }
@media (max-width: 960px) { .reels__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .reels__grid { gap: 14px; } .reel figcaption { font-size: 0.9rem; } }

/* ---------- Appel à l'action ---------- */
.cta { background: var(--coral); color: var(--cream); padding: var(--section) var(--gutter); text-align: left; }
.cta__title { margin: 0; font-size: clamp(3rem, 8.4vw, 8.4rem); line-height: 0.9; font-weight: 800; letter-spacing: -0.05em; max-width: 12ch; }
.cta__title .serif { color: var(--brown); }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 44px; }
.cta__row p { margin: 0; max-width: 40ch; font-size: 1.15rem; }
/* sur le corail : un bouton de verre dépoli, la pastille crème porte la flèche */
.cta .btn {
  padding: 11px 11px 11px 36px; font-size: 1.1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -4px 10px rgba(122, 40, 28, 0.12), 0 18px 36px -18px rgba(90, 30, 18, 0.65);
  text-shadow: 0 1px 2px rgba(122, 40, 28, 0.25);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.cta .btn .btn__ico { width: 50px; height: 50px; background: var(--cream); color: var(--coral-ink); box-shadow: 0 4px 10px -4px rgba(90, 30, 18, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .cta .btn:hover { background: var(--cream); color: var(--brown); text-shadow: none; box-shadow: inset 0 1px 0 #fff, 0 22px 40px -18px rgba(90, 30, 18, 0.7); }
  .cta .btn:hover .btn__ico { background: var(--grad-btn) 100% 50% / 200% 100%; color: #fff; }
}

/* ---------- Page introuvable ---------- */
.lost { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 140px var(--gutter) 80px; }
.lost h1 { font-size: clamp(3rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.05em; margin: 0 0 20px; }
.lost p { color: var(--ink-soft); margin: 0 auto 30px; max-width: 40ch; }

/* ---------- Clients ---------- */
.clients {
  position: relative; background: var(--cream); overflow: clip;
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(30px, 4vw, 70px);
  padding: 0 0 0 var(--gutter); min-height: min(110vh, 1000px);
}
.clients__head { position: relative; z-index: 2; padding: var(--section) 0; }
.clients__kicker { margin: 0 0 14px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }
.clients__title { margin: 0; font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
.clients__lead { margin: 26px 0 0; max-width: 34ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
/* le mur : fondu en haut et en bas, incliné, et chaque colonne file à sa vitesse */
.wall {
  position: absolute; top: 0; bottom: 0; right: 0; width: 64%;
  -webkit-mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent);
}
.wall__tilt { position: absolute; inset: -18% -6% -18% 7%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); transform: rotate(-4deg); }
.wall__col { display: grid; gap: clamp(12px, 1.4vw, 20px); align-content: start; will-change: transform; }
.wall__col:nth-child(2) { margin-top: -14%; }
.wall__col:nth-child(3) { margin-top: -5%; }
.wcard {
  display: block; margin: 0; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.05), 0 22px 40px -28px rgba(57, 21, 10, 0.55);
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease);
}
.wcard img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: transform 700ms var(--ease); }
.wcard__body { display: grid; gap: 2px; padding: 14px 18px 16px; }
.wcard__body b { font-size: clamp(1.05rem, 1.4vw, 1.35rem); letter-spacing: -0.02em; }
.wcard__body .serif { font-size: clamp(0.95rem, 1.15vw, 1.1rem); }
.wcard--quote { padding: clamp(18px, 1.8vw, 26px); background-color: var(--brown); background-image: var(--bg-brown); color: var(--cream); }
.wcard--quote blockquote { margin: 0 0 14px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.2; color: #F4C3B6; }
.wcard--quote figcaption { font-weight: 700; font-size: 0.92rem; }
.wcard--quote figcaption::before { content: ""; display: inline-block; width: 18px; height: 1.5px; margin-right: 10px; vertical-align: middle; background: var(--coral); }
.wcard--stat { padding: clamp(18px, 1.8vw, 26px); background-color: var(--coral); background-image: var(--bg-coral); color: #fff; }
.wcard--stat b { display: block; font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.wcard--stat span { display: block; margin-top: 8px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.wcard--names { padding: clamp(18px, 1.8vw, 26px); background-color: var(--sand); background-image: var(--bg-sand); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.35; letter-spacing: -0.01em; }
.wcard--names span { display: block; margin-bottom: 8px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }
@media (hover: hover) and (pointer: fine) {
  a.wcard:hover { transform: translateY(-6px) rotate(1deg); box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.05), 0 34px 50px -26px rgba(57, 21, 10, 0.6); }
  a.wcard:hover img { transform: scale(1.06); }
}
@media (max-width: 860px) {
  .clients { grid-template-columns: 1fr; padding: 0; min-height: 0; }
  .clients__head { padding: var(--section) var(--gutter) 10px; }
  .wall { position: relative; width: auto; height: 150vw; max-height: 900px; }
  /* deux colonnes sur téléphone : la troisième serait illisible */
  .wall__tilt { inset: -10% 6% -10% 6%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__col:nth-child(3) { display: none; }
  .wcard--stat b { font-size: 1.45rem; }
  .wcard--quote blockquote { font-size: 1.05rem; }
  .wcard { border-radius: 18px; }
  .wcard__body { padding: 10px 12px 12px; }
}


/* ---------- Devis ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-contact .contact { padding-top: clamp(130px, 14vw, 190px); min-height: 100svh; }
.contact {
  background: var(--coral); color: var(--cream);
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.contact__title { font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.045em; margin: 0 0 24px; }
.contact__title .serif { color: var(--brown); }
.contact__intro p { max-width: 40ch; font-size: 1.12rem; }
.contact__info { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; font-weight: 500; }
.contact__info li { display: flex; align-items: center; gap: 14px; }
.contact__info svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.contact__info a { text-underline-offset: 4px; }

/* le portrait : Gwen détourée qui sort de son rond, texte qui tourne autour */
.hello { position: relative; container-type: inline-size; width: min(100%, 340px); aspect-ratio: 1; margin: 28px 0 40px clamp(0px, 2vw, 24px); }
.hello__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hello__ring text { fill: var(--cream); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.hello__disc { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #F6E3D8 0%, #E7C4B3 45%, #D69A86 100%); box-shadow: inset 0 -12px 30px rgba(122, 40, 28, 0.25), 0 24px 50px -24px rgba(57, 21, 10, 0.7); }
/* le haut dépasse du rond, le bas est coupé net sur son bord */
.hello__cut { position: absolute; left: 0; right: 0; top: -10cqw; height: 95cqw;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 60cqw no-repeat, radial-gradient(circle 35cqw at 50% 60cqw, #000 99.5%, transparent 100%);
  mask: linear-gradient(#000 0 0) top / 100% 60cqw no-repeat, radial-gradient(circle 35cqw at 50% 60cqw, #000 99.5%, transparent 100%); }
.hello__cut img { position: absolute; left: 50%; top: 5cqw; width: 74cqw; height: auto; translate: -50% 0; filter: drop-shadow(0 10px 18px rgba(57, 21, 10, 0.35)); }
.hello__bubble, .hello__chip { position: absolute; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(57, 21, 10, 0.6); }
.hello__bubble { left: 74%; top: 6%; padding: 10px 16px; background: var(--cream); color: var(--brown); font-size: 0.9rem; border-bottom-left-radius: 6px; }
.hello__chip { left: -6%; bottom: 14%; padding: 9px 14px; background: var(--brown); color: var(--cream); font-size: 0.82rem; }
.hello__chip i { width: 9px; height: 9px; border-radius: 50%; background: #8FD19E; box-shadow: 0 0 0 0 rgba(143, 209, 158, 0.6); }

@media (prefers-reduced-motion: no-preference) {
  .hello__ring { animation: hello-spin 32s linear infinite; }
  .hello__disc { animation: hello-pop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both 150ms; }
  .hello__cut img { animation: hello-rise 1100ms var(--ease) both 450ms; }
  .hello__bubble { animation: hello-in 700ms var(--ease) both 1200ms, hello-float 5s ease-in-out infinite 1.9s; }
  .hello__chip { animation: hello-in 700ms var(--ease) both 1450ms, hello-float 6s ease-in-out infinite 2.2s reverse; }
  .hello__chip i { animation: hello-ping 2s ease-out infinite 2s; }
}
@keyframes hello-spin { to { rotate: 360deg; } }
@keyframes hello-pop { from { scale: 0.4; opacity: 0; } }
@keyframes hello-rise { from { translate: -50% 60%; } }
@keyframes hello-in { from { opacity: 0; scale: 0.6; } }
@keyframes hello-float { 50% { translate: 0 -8px; } }
@keyframes hello-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(143, 209, 158, 0); } }

.form {
  position: relative;
  background: var(--cream); color: var(--ink);
  border-radius: 30px; padding: clamp(24px, 3.2vw, 44px);
  display: grid; gap: 24px;
  box-shadow: 0 30px 60px -30px rgba(57, 21, 10, 0.6);
}
.form__head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(57, 21, 10, 0.1); }
.form__head p { margin: 0; display: grid; gap: 2px; }
.form__head b { font-size: 1.15rem; letter-spacing: -0.01em; }
.form__head span { font-size: 0.88rem; color: var(--ink-soft); }
.form__avatar { flex-shrink: 0; width: 52px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--coral); }
.form__avatar img { width: 100%; height: 100%; object-fit: cover; }
.step { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.step legend i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 0.8rem; background: rgba(57, 21, 10, 0.08); color: var(--brown); transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.step.is-done legend i { background: var(--coral); color: var(--cream); font-size: 0; }
.step.is-done legend i::before { content: ""; width: 10px; height: 6px; margin-top: 0; border: solid var(--cream); border-width: 0 0 2px 2px; rotate: -45deg; }
.step__sub { margin: 6px 0 0; font-weight: 600; font-size: 0.92rem; }
.step__sub small { font-weight: 400; color: var(--ink-soft); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 8px; }
.field > span { font-weight: 600; font-size: 0.92rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(57, 21, 10, 0.14);
  background: #fff;
  caret-color: var(--coral);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(110, 74, 62, 0.5); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(201, 104, 89, 0.16); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid rgba(57, 21, 10, 0.16); background: #fff;
  font-size: 0.92rem; font-weight: 500; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.chips span:active { transform: scale(0.96); }
.chips input:checked + span { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.chips--soft input:checked + span { background: var(--coral); border-color: var(--coral); }
.chips input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chips span:hover { border-color: var(--coral); } }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 4px; }
.form__send[disabled] { opacity: 0.6; cursor: progress; }
.form__note { margin: 0; flex: 1; min-width: 200px; font-size: 0.82rem; color: #7a5a4f; }
.form__note a { color: inherit; }
.form__status { margin: -10px 0 0; font-weight: 600; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #2F7A4A; }
.form__status.is-err { color: var(--coral-ink); }
.hp { position: absolute; left: -9999px; }
/* une fois envoyé, le formulaire laisse place à un mot de Gwen */
.form__done { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 32px; text-align: center; border-radius: inherit; background: var(--cream); opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease), visibility 0s 500ms; }
.form__done p { margin: 0; color: var(--ink-soft); }
.form__done .form__done-t { margin-top: 18px; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.form__avatar--big { width: 110px; }
.form.is-sent .form__done { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; }
  .hello { margin-inline: auto; width: min(78%, 320px); }
}
@media (max-width: 760px) {
  /* téléphone : le titre, Gwen, puis tout de suite le formulaire ; les coordonnées passent après */
  .contact { display: flex; flex-direction: column; gap: 0; }
  .contact__intro { display: contents; }
  .contact__intro > p { margin: 0; }
  .hello { order: 1; width: min(66%, 250px); margin: 44px auto 34px; }
  .form { order: 2; margin-inline: calc(var(--gutter) * -0.4); padding: 22px 18px 24px; border-radius: 26px; gap: 22px; }
  .contact__info { order: 3; margin-top: 34px; padding: 18px 20px; border-radius: 22px; background: rgba(57, 21, 10, 0.12); box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.18); font-size: 0.95rem; }
  .form__head { gap: 12px; padding-bottom: 18px; }
  .form__head b { font-size: 1.05rem; }
  .form__head span { font-size: 0.8rem; }
  .form__avatar { width: 44px; }
  .step legend { margin-bottom: 12px; }
  /* les choix en grille régulière plutôt qu'en vrac */
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chips > label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .chips--soft { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .chips--soft > label, .chips--soft > label:last-child:nth-child(odd) { grid-column: span 2; }
  .chips--soft > label:nth-child(n+4), .chips--soft > label:nth-child(n+4):last-child { grid-column: span 3; }
  .chips label { display: grid; }
  .chips span { display: grid; place-items: center; min-height: 46px; padding: 8px 6px; text-align: center; font-size: 0.84rem; line-height: 1.2; border-radius: 14px; }
  .field input, .field textarea { padding: 13px 14px; }
  .form__foot { display: grid; gap: 12px; }
  .form__note { text-align: center; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .form__send { width: 100%; justify-content: space-between; }
  .hello { margin-top: 64px; }
  .hello__bubble { left: auto; right: -8%; top: -19%; font-size: 0.8rem; }
  .hello__chip { left: -8%; }
}

/* ---------- Pied de page ---------- */
.footer { background: var(--brown); color: var(--cream); padding: clamp(60px, 7vw, 110px) var(--gutter) 28px; overflow: clip; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 90px);
}
.footer__pitch { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; }
.footer__lead { margin: 0 0 28px; color: rgba(250, 246, 242, 0.7); max-width: 34ch; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__col h2 { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #F0A898; }
.footer__col a, .footer__bar a { text-decoration: none; color: rgba(250, 246, 242, 0.86); transition: color 160ms var(--ease); }
.footer__col a[aria-current="page"] { color: #F0A898; }
.footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: rgba(250, 246, 242, 0.86); }
.footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; line-height: 1.4; }
.footer__contact svg, .footer__social svg, .footer__up svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer__contact svg { color: #F0A898; margin-top: 1px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer__social a {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(250, 246, 242, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(250, 246, 242, 0.14);
  font-weight: 600; font-size: 0.92rem; color: var(--cream);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.footer__social .f { fill: currentColor; stroke: none; }
.footer__logo { color: var(--coral); }
.footer__logo svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid rgba(250, 246, 242, 0.16);
  font-size: 0.92rem;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__bar p { margin: 0; color: rgba(250, 246, 242, 0.6); }
/* La signature Weblio : le texte, puis la tuile bleue qui se soulève au survol */
.footer__bar a.weblio { display: inline-flex; align-items: center; gap: 7px; color: rgba(250, 246, 242, 0.7); }
.weblio b { font-weight: 800; color: var(--cream); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 350ms var(--ease); }
.weblio__logo { width: auto; height: 1.35em; margin-top: -0.1em; flex-shrink: 0; transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 350ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .footer__bar a.weblio:hover { color: var(--cream); }
  .weblio:hover b { background-size: 100% 1.5px; }
  .weblio:hover .weblio__logo { transform: translateY(-2px) rotate(-10deg) scale(1.12); filter: drop-shadow(0 5px 8px rgba(30, 70, 230, 0.55)); }
}
.footer__up { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.footer__up svg { width: 17px; height: 17px; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover, .footer__bar a:hover { color: #F0A898; }
  .footer__social a:hover { background: var(--cream); color: var(--brown); }
  .footer__up:hover svg { transform: translateY(-4px); }
}
@media (max-width: 1000px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__intro { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* téléphone : l'appel, la carte de contact, puis les liens sur deux colonnes */
  .footer { padding-top: 56px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 30px 18px; padding-bottom: 40px; }
  .footer__pitch { font-size: 2rem; }
  .footer__intro .btn { width: 100%; justify-content: space-between; }
  .footer__top > .footer__col:last-child {
    grid-column: 1 / -1; order: -1; grid-row: 2;
    padding: 20px; border-radius: 22px; background: rgba(250, 246, 242, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(250, 246, 242, 0.1);
  }
  .footer__top > nav.footer__col { grid-row: 3; padding-top: 4px; }
  .footer__col { gap: 9px; font-size: 0.95rem; }
  .footer__col h2 { margin-bottom: 4px; }
  .footer__social { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .footer__social a { justify-content: center; }
  .footer__bar { flex-direction: column; align-items: center; text-align: center; gap: 14px; font-size: 0.86rem; }
  .footer__bar nav { justify-content: center; gap: 6px 18px; }
  .footer__up { order: 5; padding: 10px 18px; border-radius: 999px; background: rgba(250, 246, 242, 0.08); box-shadow: inset 0 0 0 1px rgba(250, 246, 242, 0.14); }
}

/* ---------- Pages légales ----------
   Un sommaire collant à gauche, des cartes numérotées à droite. */
.legal {
  display: grid; grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding: 0 var(--gutter) var(--section);
}
.legal__date {
  display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0;
  padding: 8px 14px; border-radius: 999px; background: var(--sand);
  font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
}
.legal__date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.legal__aside { position: sticky; top: 110px; display: grid; gap: 14px; }
.legal__kicker { margin: 0 0 12px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }
.legal__summary {
  padding: 24px; border-radius: 24px; background: var(--brown); color: var(--cream);
  box-shadow: 0 20px 40px -26px rgba(57, 21, 10, 0.7);
}
.legal__summary .legal__kicker { color: #F0A898; }
.legal__summary p:last-child { margin: 0; line-height: 1.55; color: rgba(250, 246, 242, 0.88); }
.legal__toc { padding: 20px 14px 14px; border-radius: 24px; background: var(--sand); }
.legal__toc .legal__kicker { padding: 0 10px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal__toc a {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 12px;
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.legal__toc a span { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--coral); font-size: 1.05rem; min-width: 1.6em; }
.legal__toc a.is-on { background: #fff; color: var(--coral-ink); box-shadow: 0 6px 16px -10px rgba(57, 21, 10, 0.35); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { background: rgba(255, 255, 255, 0.7); } }

.legal__body { display: grid; gap: 16px; min-width: 0; }
.legal__card {
  position: relative; scroll-margin-top: 110px;
  padding: clamp(26px, 3vw, 44px); border-radius: 28px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(57, 21, 10, 0.06), 0 18px 40px -30px rgba(57, 21, 10, 0.45);
}
.legal__card .legal__num {
  position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(22px, 3vw, 40px); margin: 0;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: rgba(201, 104, 89, 0.28);
}
.legal__card h2 { position: relative; margin: 0 0 16px; padding-right: 2.4em; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; }
.legal__card p, .legal__card li { color: var(--ink-soft); line-height: 1.7; }
.legal__card > :last-child { margin-bottom: 0; }
.legal__card ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.legal__card li { position: relative; padding-left: 22px; }
.legal__card li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.legal__card a { color: var(--coral-ink); font-weight: 600; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
.legal dt, .legal dd { padding: 13px 0; border-top: 1px solid rgba(57, 21, 10, 0.08); }
.legal dt:first-of-type, .legal dd:first-of-type { border-top: 0; padding-top: 0; }
.legal dt { font-weight: 700; padding-right: 28px; }
.legal dd { margin: 0; color: var(--ink-soft); }
.legal__ask {
  margin-top: 8px; padding: clamp(28px, 3.4vw, 48px); border-radius: 28px;
  background: var(--coral); color: var(--cream);
}
.legal__ask-title { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.legal__ask-title .serif { color: var(--brown); background: none; -webkit-text-fill-color: currentColor; }
.legal__ask > p:not(.legal__ask-title) { margin: 0 0 24px; color: rgba(250, 246, 242, 0.9); }
.legal__ask .btn { background: var(--brown); text-shadow: none; }
/* une information que seule Gwen peut fournir : visible tant qu'elle n'est pas remplie */
.todo { background: #FCE7A8; color: #5a3b00; padding: 1px 7px; border-radius: 6px; font-weight: 600; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal__aside { position: static; }
  .legal__toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* sur téléphone, le sommaire devient une rangée de pastilles */
  .legal__toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal__toc a { padding: 7px 12px; background: #fff; border-radius: 999px; font-size: 0.86rem; gap: 6px; }
  .legal__toc a span { font-size: 0.9rem; min-width: 0; }
  .legal dl { grid-template-columns: 1fr; }
  .legal dt { padding-bottom: 0; }
  .legal dd { border-top: 0; padding-top: 4px; }
  .legal dt:first-of-type + dd { padding-top: 4px; }
  .legal__ask .btn { white-space: normal; }
}

/* ---------- Galerie ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(30, 10, 4, 0.94); color: var(--cream);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox__top { display: flex; align-items: center; gap: 20px; padding: 18px var(--gutter); }
.lightbox__title { margin: 0; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.lightbox__count { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; color: rgba(250, 246, 242, 0.7); }
.lightbox button { background: rgba(250, 246, 242, 0.1); border: 0; border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; transition: background-color 160ms var(--ease); }
.lightbox button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .lightbox button:hover { background: var(--coral); } }
.lightbox__stage { margin: 0; display: grid; place-items: center; padding: 0 clamp(16px, 8vw, 120px) 28px; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 14px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: var(--gutter); }
.lightbox__next { right: var(--gutter); }
@media (max-width: 700px) {
  .lightbox__nav { top: auto; bottom: 20px; transform: none; }
  .lightbox__stage { padding-bottom: 92px; }
  .lightbox__stage img { max-height: calc(100dvh - 200px); }
}

/* ---------- Apparitions (posées par le script) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js .no-motion [data-reveal], .no-motion [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .intro { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Fonds travaillés : des dégradés de lumière plutôt qu'un aplat ----------
   Chaque couleur garde son background-color (la barre de navigation le lit pour choisir
   sa teinte) ; seule une couche de halos et de dégradés est posée par-dessus. */
:root {
  --bg-brown:
    radial-gradient(70% 90% at 100% 0%, rgba(201, 104, 89, 0.30), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(122, 58, 40, 0.55), transparent 65%),
    linear-gradient(160deg, #4A1D10 0%, #39150A 45%, #2A0F07 100%);
  --bg-coral:
    radial-gradient(70% 90% at 0% 0%, rgba(243, 194, 167, 0.45), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(122, 40, 28, 0.45), transparent 65%),
    linear-gradient(135deg, #D27A6A 0%, #C96859 50%, #B4553F 100%);
  --bg-sand:
    radial-gradient(60% 80% at 100% 0%, rgba(201, 104, 89, 0.10), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(220, 202, 185, 0.55), transparent 65%),
    linear-gradient(180deg, #F5EFE8 0%, #F2EBE3 100%);
}
.manifesto, .backstage, .quotes, .footer, .svc--brown, .legal__summary { background-image: var(--bg-brown); }
.cta, .contact, .svc--coral, .legal__ask, .quote:nth-child(1) { background-image: var(--bg-coral); }
.about, .work, .steps, .faq, .legal__toc { background-image: var(--bg-sand); }
.svc--sand { background-image: radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, 0.45), transparent 60%), linear-gradient(150deg, #E5D6C8 0%, #DCCAB9 55%, #CDB7A3 100%); }
/* le crème de la page lui-même prend une lueur très douce en haut */
body { background-image: radial-gradient(90% 60% at 80% 0%, rgba(242, 235, 227, 0.9), transparent 70%); background-repeat: no-repeat; }

/* ---------- Lumières corail dans les coins des sections claires ----------
   Des halos très doux, posés en fond (aucun élément en plus, rien à animer) :
   le crème ne reste jamais un grand aplat blanc. */
:root {
  --glow-a: rgba(201, 104, 89, 0.26);
  --glow-b: rgba(232, 150, 128, 0.24);
}
.hero, .services, .results, .clients, .page-head, .why, .detail, .reels, .lost, .legal {
  background-repeat: no-repeat;
}
.hero {
  background-image:
    radial-gradient(42vw 42vw at 100% 0%, var(--glow-a), transparent 70%),
    radial-gradient(36vw 30vw at 0% 100%, var(--glow-b), transparent 70%);
}
.services, .why, .reels {
  background-image:
    radial-gradient(38vw 32vw at 0% 0%, var(--glow-b), transparent 70%),
    radial-gradient(34vw 34vw at 100% 100%, var(--glow-a), transparent 70%);
}
.results, .detail {
  background-image:
    radial-gradient(40vw 36vw at 100% 0%, var(--glow-a), transparent 70%),
    radial-gradient(34vw 24vw at 0% 80%, var(--glow-b), transparent 70%),
    radial-gradient(30vw 30vw at 0% 45%, rgba(201, 104, 89, 0.07), transparent 70%);
}
.clients {
  background-image:
    radial-gradient(40vw 40vw at 0% 100%, var(--glow-a), transparent 70%),
    radial-gradient(30vw 26vw at 100% 0%, var(--glow-b), transparent 70%);
}
.page-head {
  background-image:
    radial-gradient(44vw 38vw at 100% 0%, var(--glow-a), transparent 70%),
    radial-gradient(32vw 26vw at 0% 100%, var(--glow-b), transparent 70%);
}
.legal, .lost {
  background-image:
    radial-gradient(36vw 36vw at 100% 30%, var(--glow-b), transparent 70%),
    radial-gradient(34vw 30vw at 0% 100%, var(--glow-a), transparent 70%);
}
@media (max-width: 860px) {
  .hero, .services, .results, .clients, .page-head, .why, .detail, .reels, .lost, .legal { background-size: 100% 100%; }
  .hero { background-image: radial-gradient(90vw 70vw at 100% 0%, var(--glow-a), transparent 70%), radial-gradient(80vw 60vw at 0% 100%, var(--glow-b), transparent 70%); }
}

/* ouverture sur téléphone : la phrase sous le logo tient dans l'écran */
@media (max-width: 600px) {
  .js .intro .intro__tag { gap: 7px; letter-spacing: 0.1em; font-size: 0.6rem; }
}