/* Bonbouche, version A : « Éditorial chaleureux »
   Papier rosé, encre bleue, accent groseille (la bouche). Besley + Schibsted Grotesk. */

:root {
  --paper: #F2E6DE;
  --paper-deep: #E8D5C9;
  --sheet: #FBF7F3;
  --ink: #1E2334;
  --ink-soft: #4A4D5C;
  --ink-mute: #6A6B78;
  --line: rgba(30, 35, 52, .14);
  --line-strong: rgba(30, 35, 52, .28);
  --groseille: #9C1E3C;
  --groseille-deep: #7E1530;
  --blush: #EFCFCB;
  --moss: #4F5E3A;

  --tone-1: #E6C2B6;
  --tone-2: #C4CDB6;
  --tone-3: #D5CADF;
  --tone-4: #E9D3A3;

  --serif: "Besley", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --r-win: 14px;
  --r-in: 8px;
  --r-btn: 10px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --shadow-win: 0 1px 0 rgba(30,35,52,.06), 0 18px 40px -18px rgba(62, 30, 40, .35), 0 50px 90px -40px rgba(30, 35, 52, .28);
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.site-header { view-transition-name: site-header; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--groseille); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--groseille); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--blush); color: var(--ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.ico { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-btn);
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--groseille); color: #FFF7F4; }
.btn--primary:hover { background: var(--groseille-deep); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link-strong { font-weight: 600; text-decoration: underline; text-decoration-color: var(--groseille); text-decoration-thickness: 2px; text-underline-offset: .25em; display: inline-block; padding-block: 10px; }
.link-strong:hover { color: var(--groseille); }

/* ---------- en-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand__mark { width: 30px; height: 30px; color: var(--groseille); }
.brand__name { font-family: var(--serif); font-weight: 750; font-size: 1.45rem; letter-spacing: -.02em; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 500; font-size: 1rem; position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--groseille); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--groseille-deep); }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: var(--r-btn); background: transparent; font-weight: 600; cursor: pointer; }
.menu-btn__bars { display: grid; gap: 5px; width: 18px; }
.menu-btn__bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- menu mobile ---------- */
.menu { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--paper); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__in { min-height: 100%; display: flex; flex-direction: column; padding: 16px var(--gutter) 32px; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.brand--light { color: var(--paper); }
.brand--light .brand__mark { color: #D4546F; }
.menu-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; border: 1.5px solid rgba(242,230,222,.5); border-radius: var(--r-btn); color: var(--paper); font-weight: 600; cursor: pointer; }
.menu__list { margin: 28px 0 32px; }
.menu__list a { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 600; line-height: 1.15; text-decoration: none; color: var(--paper); border-bottom: 1px solid rgba(242,230,222,.14); }
.menu__list a[aria-current="page"] { color: #F0A7B6; }
.menu__list a[aria-current="page"]::after { content: "vous êtes ici"; font-family: var(--sans); font-size: .9rem; font-weight: 500; color: rgba(242,230,222,.75); }
.menu__foot { margin-top: auto; display: grid; gap: 18px; }
.menu__foot p { color: rgba(242,230,222,.8); font-size: 1rem; }
.menu__foot a:not(.btn) { color: var(--paper); }
.js .menu.is-open .menu__list li { animation: menu-in .5s var(--ease) both; }
.js .menu.is-open .menu__list li:nth-child(2) { animation-delay: .04s; }
.js .menu.is-open .menu__list li:nth-child(3) { animation-delay: .08s; }
.js .menu.is-open .menu__list li:nth-child(4) { animation-delay: .12s; }
.js .menu.is-open .menu__list li:nth-child(5) { animation-delay: .16s; }
.js .menu.is-open .menu__list li:nth-child(6) { animation-delay: .2s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(18px); } }
html.menu-open { overflow: hidden; }

/* ---------- barre CTA mobile ---------- */
.cta-bar { display: none; }

@media (max-width: 960px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header__in { min-height: 64px; }
  .cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 -1px 0 var(--line); transition: transform .35s var(--ease); }
  .cta-bar .btn { width: 100%; }
  .cta-bar.is-hidden { transform: translateY(110%); }
  body:has(.cta-bar) { padding-bottom: 76px; }
}

/* ---------- pied de page ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: clamp(64px, 9vw, 120px) 0 32px; }
.site-footer a { color: var(--paper); text-decoration-color: rgba(242,230,222,.4); }
.site-footer a:hover { text-decoration-color: #F0A7B6; }
.site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid rgba(242,230,222,.16); }
.site-footer__sign { font-family: var(--serif); font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.site-footer__status { display: grid; gap: 20px; justify-items: start; }
.site-footer__status p { color: rgba(242,230,222,.82); font-size: 1rem; max-width: 36ch; }
.site-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 44px 0; }
.site-footer h2 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: #F0A7B6; margin-bottom: 10px; letter-spacing: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; font-size: 1rem; }
.site-footer .btn--paper { color: var(--ink); }
.nw { white-space: nowrap; }
.site-footer__legal { font-size: .95rem; color: rgba(242,230,222,.7); }
@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid nav:last-child { grid-column: 1 / -1; }
}

/* ---------- typographie de page ---------- */
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.section { padding-block: clamp(72px, 10vw, 128px); }
.section--tight { padding-block: 24px clamp(56px, 8vw, 96px); }
.shead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.shead h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.shead p { color: var(--ink-soft); max-width: 42ch; }
@media (max-width: 860px) { .shead { grid-template-columns: 1fr; } }
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: block; }

/* ---------- héros ---------- */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 110px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: 48px; align-items: center; }
.hero__title { font-size: clamp(2.7rem, 4.8vw, 4.7rem); font-weight: 700; line-height: 1; letter-spacing: -.028em; }
.hero__lead { margin: 28px 0 32px; font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 36rem; }
.hero__note { margin-top: 28px; display: flex; gap: 12px; align-items: baseline; font-size: 1rem; color: var(--ink-soft); max-width: 34rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--groseille); flex: none; box-shadow: 0 0 0 5px rgba(156,30,60,.14); transform: translateY(-1px); }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- ÉLÉMENT SIGNATURE : mur d'avis en profondeur ---------- */
.wall-fig { margin: 0; position: relative; }
.wall { position: relative; height: clamp(460px, 62vh, 660px); }
.wall__stage {
  position: absolute; inset: -20px -8% -20px -4%; overflow: hidden; perspective: 1500px; perspective-origin: 30% 40%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  border-radius: 20px;
}
.wall__stage:focus-visible { outline-offset: -6px; }
.wall__plane {
  position: absolute; inset: -18% -2% -18% 4%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start;
  transform: rotateX(16deg) rotateY(-14deg) rotateZ(4deg); transform-style: preserve-3d;
}
.wall__col { transform-style: preserve-3d; }
.wall__col--front { transform: translateZ(70px); }
.wall__col--mid { transform: translateZ(-60px) translateY(-90px); opacity: .92; }
.wall__col--back { transform: translateZ(-200px) translateY(-30px); opacity: .72; filter: blur(.6px) saturate(.85); }
.wall__track, .wall__set { display: grid; gap: 20px; }
.wall__track { will-change: transform; }
.js .wall__track { animation: wall-up var(--dur, 46s) linear infinite; }
.js .wall__col--front .wall__track { --dur: 40s; }
.js .wall__col--mid .wall__track { --dur: 56s; animation-direction: reverse; }
.js .wall__col--back .wall__track { --dur: 72s; }
@keyframes wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - 10px), 0); } }
.wall__stage:hover .wall__track, .wall__stage:focus .wall__track, .wall.is-paused .wall__track, .wall.is-off .wall__track { animation-play-state: paused; }
.wall__url { position: absolute; right: 0; top: 6px; z-index: 2; font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: var(--sheet); padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(30,35,52,.35); }
.wall-cap { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wall-cap p { font-size: .98rem; color: var(--ink-soft); max-width: 52ch; }
.wall-cap b { color: var(--ink); }
.wall-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn); border: 1.5px solid var(--ink); background: transparent; font-weight: 600; font-size: .95rem; cursor: pointer; flex: none; }
.wall-toggle:hover { background: var(--ink); color: var(--paper); }
.wall-toggle .ico--play { display: none; }
.wall.is-paused + .wall-cap .ico--play, .wall-fig.is-paused .ico--play { display: block; }
.wall-fig.is-paused .ico--pause { display: none; }
.no-js-hide { display: none; }
html:not(.js) .wall-toggle { display: none; }
@media (max-width: 1000px) {
  .wall { height: 520px; }
  .wall__stage { inset: -10px -6vw; }
  .wall__plane { inset: -12% 4% -12% 2%; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: rotateX(12deg) rotateY(-8deg) rotateZ(3deg); gap: 14px; }
  .wall__col--back { display: none; }
  .wall__track, .wall__set { gap: 14px; }
  @keyframes wall-up { to { transform: translate3d(0, calc(-50% - 7px), 0); } }
}
@media (max-width: 560px) {
  .wall { height: 470px; }
  .wall-cap { flex-direction: column; }
}

/* ---------- carte d'avis (maquette) ---------- */
.rv { background: var(--sheet); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(30,35,52,.05), 0 14px 30px -18px rgba(62,30,40,.45); font-size: 14px; line-height: 1.5; color: var(--ink); }
.wall__col--front .rv { box-shadow: 0 1px 0 rgba(30,35,52,.05), 0 24px 44px -20px rgba(62,30,40,.55); }
.wall__col--back .rv { box-shadow: 0 8px 20px -14px rgba(62,30,40,.35); }
.rv__in { padding: 16px 16px 14px; display: grid; gap: 10px; }
.rv__t { font-family: var(--serif); font-size: 16px; line-height: 1.45; font-style: italic; font-weight: 450; }
.rv__t--sm { font-size: 14.5px; }
.rv__who { display: flex; gap: 10px; align-items: center; }
.rv__who b { display: block; font-size: 13.5px; }
.rv__who small { display: block; font-size: 12.5px; color: var(--ink-mute); line-height: 1.35; }
.rv__pro { display: block; font-size: 12px; color: var(--groseille-deep); margin-top: 2px; }
.rv__src { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #E9EEF6; color: #2A4A7F; }
.rv--ghost .rv__in { gap: 8px; padding: 18px; }
.stars { display: inline-flex; gap: 2px; color: #B8741A; }
.stars .st { width: 14px; height: 14px; }
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.av--lg { width: 54px; height: 54px; font-size: 17px; }
.tone-1 { background-color: var(--tone-1); }
.tone-2 { background-color: var(--tone-2); }
.tone-3 { background-color: var(--tone-3); }
.tone-4 { background-color: var(--tone-4); }

/* vignette vidéo : personne stylisée, pas de photo inventée */
.vthumb { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background-image: radial-gradient(120% 80% at 70% 10%, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, rgba(0,0,0,0), rgba(30,35,52,.35)); }
.vthumb__person, .sr__cam .vthumb__person { position: absolute; left: 50%; bottom: -8%; width: 58%; aspect-ratio: 1 / 1.15; transform: translateX(-50%); }
.vthumb__person::before { content: ""; position: absolute; left: 50%; top: 0; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(30,35,52,.55); }
.vthumb__person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 48% 48% 0 0; background: rgba(30,35,52,.55); }
.vthumb__play { position: absolute; left: 50%; top: 42%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(251,247,243,.92); color: var(--groseille); display: grid; place-items: center; }
.vthumb__play .ico { width: 18px; height: 18px; transform: translateX(1px); }
.vthumb__dur { position: absolute; right: 10px; top: 10px; background: rgba(30,35,52,.75); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.vthumb__sub { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 12px; line-height: 1.35; color: #fff; background: rgba(20,22,32,.72); padding: 5px 8px; border-radius: 6px; text-align: center; }
.vthumb--sm { aspect-ratio: 16 / 11; border-radius: 10px; }
.rv__photo { aspect-ratio: 4 / 3; background: linear-gradient(170deg, #EAD9C4, #CDB79B); display: grid; place-items: center; }
.rv__photo--sm { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 8px; flex: none; }
.candle { width: 38%; aspect-ratio: 1 / 1.1; background: linear-gradient(180deg, #F5EEE4 0 22%, #3F4A38 22% 100%); border-radius: 8px 8px 12px 12px; position: relative; box-shadow: 0 10px 20px -10px rgba(0,0,0,.45); }
.candle i { position: absolute; left: 50%; top: -18%; width: 3px; height: 18%; background: #2a2a2a; transform: translateX(-50%); }
.candle i::after { content: ""; position: absolute; left: 50%; bottom: 80%; width: 9px; height: 16px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFE7A3, #F3A33B 70%); }
.candle--lg { width: 42%; }
.sk { display: block; height: 9px; border-radius: 5px; background: rgba(30,35,52,.1); }
.sk--l { width: 92%; } .sk--m { width: 64%; } .sk--s { width: 40%; }
.sk--av { width: 30px; height: 30px; border-radius: 50%; flex: none; }

/* ---------- photos : même traitement partout ---------- */
.ph { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) sepia(.12) contrast(1.03); background: var(--paper-deep); border-radius: 4px; }
figure { margin: 0; }
figcaption { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin-top: 10px; }

/* ---------- problème ---------- */
.problem { background: var(--paper-deep); }
.problem__title { font-size: clamp(2.2rem, 4.8vw, 4rem); max-width: 18ch; }
.lost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: clamp(48px, 7vw, 88px) 0; align-items: start; }
.lost__item:nth-child(2) { margin-top: 64px; }
.lost__item:nth-child(3) { margin-top: 18px; }
.lost__item:nth-child(4) { margin-top: 90px; }
.lost__item figcaption { font-size: 1.05rem; margin-top: 16px; max-width: 26ch; }
.obj { background: var(--sheet); border-radius: 14px; padding: 18px; min-height: 170px; display: flex; flex-direction: column; justify-content: center; gap: 10px; box-shadow: 0 16px 34px -22px rgba(62,30,40,.5); position: relative; font-size: 14px; }
.obj--sms { transform: rotate(-2deg); }
.obj__meta { font-size: 12px; color: var(--ink-mute); text-align: center; }
.obj__meta--r { text-align: right; }
.obj__bubble { align-self: flex-start; background: #E4E6EC; padding: 10px 14px; border-radius: 18px 18px 18px 4px; font-size: 15px; max-width: 90%; }
.obj--said { background: transparent; box-shadow: none; padding: 0; transform: rotate(1deg); }
.obj__said { font-family: var(--serif); font-style: italic; font-size: 1.55rem; line-height: 1.2; font-weight: 500; color: var(--ink); }
.obj__said::before { content: "«\00a0"; } .obj__said::after { content: "\00a0»"; }
.obj__wave { display: flex; gap: 4px; align-items: center; height: 28px; opacity: .45; }
.obj__wave i { width: 4px; border-radius: 2px; background: var(--ink); height: 40%; }
.obj__wave i:nth-child(2n) { height: 90%; } .obj__wave i:nth-child(3n) { height: 60%; }
.obj--story { background: #2A2433; color: #fff; min-height: 220px; justify-content: flex-start; transform: rotate(2.5deg); }
.obj__bars { display: flex; gap: 4px; } .obj__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }
.obj__bars i:first-child { background: #fff; }
.obj__shot { display: grid; gap: 6px; margin-top: 18px; padding: 12px; border-radius: 10px; background: #ECE5DD; }
.obj__exp { margin-top: auto; font-size: 12px; opacity: .8; }
.b { display: block; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; max-width: 88%; }
.b--them { background: #fff; color: var(--ink); justify-self: start; border-radius: 14px 14px 14px 4px; }
.b--me { background: var(--ink); color: #fff; justify-self: end; margin-left: auto; border-radius: 14px 14px 4px 14px; }
.b--s { font-size: 12.5px; }
.obj--old { opacity: .62; filter: grayscale(.6); transform: rotate(-1deg); }
.problem__end { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.problem__body { font-size: 1.2rem; color: var(--ink-soft); max-width: 36ch; }
.problem__turn { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; font-weight: 600; text-wrap: balance; }
@media (max-width: 1000px) { .lost { grid-template-columns: 1fr 1fr; } .lost__item { margin-top: 0 !important; } .problem__end { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .lost { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- étapes ---------- */
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); counter-reset: none; }
.step { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; }
.step__n { font-family: var(--serif); font-size: clamp(4rem, 7vw, 6rem); line-height: .8; font-weight: 800; color: var(--groseille); }
.step h3 { font-size: 1.7rem; }
.step p { color: var(--ink-soft); }
@media (max-width: 900px) { .steps__list { grid-template-columns: 1fr; gap: 64px; } }
.smock { margin-top: 12px; }
.smock__in { background: var(--sheet); border-radius: var(--r-win); box-shadow: var(--shadow-win); padding: 18px; font-size: 14px; min-height: 210px; }
.sl__link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--paper); font-weight: 600; }
.sl__link .ico { color: var(--groseille); }
.sl__row { display: flex; gap: 16px; margin-top: 16px; align-items: center; }
.qr { color: var(--ink); width: 100%; }
.qr--sm { width: 110px; flex: none; }
.sl__ch { display: flex; flex-wrap: wrap; gap: 6px; }
.sl__ch span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; }
.smock__in--rec { padding: 0; overflow: hidden; }
.sr__cam { position: relative; height: 230px; background-image: radial-gradient(120% 80% at 70% 10%, rgba(255,255,255,.5), transparent 55%); }
.sr__rec { position: absolute; left: 14px; top: 14px; display: inline-flex; gap: 8px; align-items: center; background: rgba(20,22,32,.75); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.sr__rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF4B5C; animation: blink 1.2s steps(2) infinite; }
.sr__q { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(251,247,243,.94); padding: 10px 12px; border-radius: 10px; font-weight: 600; }
@keyframes blink { 50% { opacity: .2; } }
.smock__in--show { display: grid; gap: 10px; align-content: center; }
.ss__r { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--paper); }
.ss__r > span:nth-child(2) { flex: 1; }
.ss__r b { display: block; } .ss__r small { color: var(--ink-mute); font-size: 12.5px; }

/* interrupteur */
.tg { width: 38px; height: 22px; border-radius: 999px; background: #CFC6C2; position: relative; flex: none; transition: background-color .35s; display: inline-block; }
.tg i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .35s var(--ease); }
.tg.is-on { background: var(--moss); } .tg.is-on i { transform: translateX(16px); }
[data-step="1"] .tg--anim, [data-step="2"] .tg--anim, [data-step="3"] .tg--anim { background: var(--moss); }
[data-step="1"] .tg--anim i, [data-step="2"] .tg--anim i, [data-step="3"] .tg--anim i { transform: translateX(16px); }
.mock--db [data-step] .tg--anim, .mock--db .tg--anim { }
.mock--db[data-step="1"] .tg--anim { background: #CFC6C2; }
.mock--db[data-step="1"] .tg--anim i { transform: none; }

/* ---------- aperçu fonctionnalités ---------- */
.feat-overview__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.feat-overview__text h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.feat-overview__text .lead { margin: 20px 0 32px; }
.feat-overview__mock { position: sticky; top: 110px; }
.findex { border-top: 1px solid var(--line); margin-bottom: 20px; }
.findex li { border-bottom: 1px solid var(--line); }
.findex__a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; transition: padding .3s var(--ease); }
.findex__n { font-family: var(--serif); font-weight: 650; font-size: 1.35rem; }
.findex__t { color: var(--ink-soft); font-size: 1rem; }
.findex__a:hover .findex__n { color: var(--groseille); }
@media (max-width: 1000px) { .feat-overview__grid { grid-template-columns: 1fr; } .feat-overview__mock { position: static; order: -1; } }

/* ---------- cas d'usage ---------- */
.usecases { background: var(--sheet); }
.uc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 28px; }
.uc { grid-column: span 4; }
.uc--0 { grid-column: 1 / span 5; } .uc--1 { grid-column: 7 / span 6; margin-top: 80px; }
.uc--2 { grid-column: 1 / span 4; } .uc--3 { grid-column: 5 / span 4; margin-top: 48px; } .uc--4 { grid-column: 9 / span 4; margin-top: -40px; }
.uc--5 { grid-column: 3 / span 6; }
.uc a { display: block; text-decoration: none; }
.uc__img { display: block; overflow: hidden; border-radius: 4px; }
.uc__img img { transition: transform .8s var(--ease); }
.uc a:hover .uc__img img { transform: scale(1.035); }
.uc__name { display: block; font-family: var(--serif); font-weight: 650; font-size: 1.5rem; margin-top: 16px; }
.uc a:hover .uc__name { color: var(--groseille); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.uc__line { display: block; color: var(--ink-soft); margin-top: 6px; max-width: 40ch; }
@media (max-width: 900px) {
  .uc-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .uc, .uc[class] { grid-column: auto; margin-top: 0; }
}
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } }

/* ---------- formules ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 0; align-items: stretch; }
.plan { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--ink); background: transparent; }
.plan--gratuit { border-right: 0; border-radius: 14px 0 0 14px; }
.plan--business { border-left: 0; border-radius: 0 14px 14px 0; }
.plan--pro { background: var(--ink); color: var(--paper); border-radius: 14px; margin-block: -18px; padding-block: calc(clamp(28px, 3vw, 40px) + 18px); position: relative; z-index: 1; }
.plan__name { font-size: 1.9rem; }
.plan__who { color: var(--ink-soft); font-size: 1rem; min-height: 3.2em; }
.plan--pro .plan__who, .plan--pro .plan__unit { color: rgba(242,230,222,.8); }
.plan__p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.plan__price { font-family: var(--serif); font-size: clamp(2.8rem, 4vw, 3.6rem); font-weight: 750; line-height: 1; display: inline-block; overflow: hidden; }
.plan__num { display: inline-block; }
.plan__unit { font-size: .98rem; color: var(--ink-soft); }
.plan__f { display: grid; gap: 10px; align-content: start; margin: 8px 0 18px; font-size: 1rem; flex: 1; }
.plan__f li { display: flex; gap: 10px; align-items: flex-start; }
.plan__f .ico { color: var(--groseille); margin-top: .25em; }
.plan--pro .plan__f .ico { color: #F0A7B6; }
.plan .btn { align-self: stretch; }
.plan--pro .btn--paper { background: var(--paper); }
.offer { display: flex; align-items: center; gap: 18px; margin-top: 48px; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; max-width: 44ch; }
.offer__stamp { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--sans); font-weight: 700; font-size: .95rem; color: var(--groseille); border: 2px dashed var(--groseille); transform: rotate(-10deg); }
.pricing-sum__more { margin-top: 20px; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .plan, .plan--gratuit, .plan--business { border: 1.5px solid var(--ink); border-radius: 14px; }
  .plan--pro { margin-block: 0; padding-block: clamp(28px, 3vw, 40px); }
  .plan__who { min-height: 0; }
}

/* ---------- appel final ---------- */
.final { background: var(--paper-deep); padding-block: clamp(80px, 10vw, 140px); }
.final__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.final h2 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; }
.final__text > p { margin: 24px 0 32px; font-size: 1.2rem; color: var(--ink-soft); max-width: 44ch; }
.reassure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 1rem; color: var(--ink-soft); }
.reassure li { display: inline-flex; align-items: center; gap: 8px; }
.reassure li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
.final__ph img { aspect-ratio: 640 / 760; }
@media (max-width: 860px) { .final__grid { grid-template-columns: 1fr; } .final__ph { max-width: 420px; } }

/* =========== MAQUETTES PRODUIT =========== */
.mock { container-type: inline-size; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.mock__win { background: var(--sheet); border-radius: var(--r-win); box-shadow: var(--shadow-win); overflow: hidden; border: 1px solid rgba(30,35,52,.08); }
.mock__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #EFE7E1; border-bottom: 1px solid var(--line); }
.mock__dots { display: flex; gap: 6px; } .mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D8CBC3; }
.mock__url { flex: 1; max-width: 340px; margin-inline: auto; text-align: center; font-size: 12px; color: var(--ink-soft); background: var(--sheet); border-radius: 6px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__body { position: relative; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; white-space: nowrap; }
.chip em { font-style: normal; color: var(--ink-mute); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-on em { color: rgba(255,255,255,.7); }
.swap { display: inline-grid; } .swap > span { grid-area: 1 / 1; transition: opacity .4s, transform .4s var(--ease); }
.swap .n1 { opacity: 0; transform: translateY(6px); }
[data-step="3"] .swap .n0, [data-step="1"].mock--gi .swap .n0 { opacity: 0; transform: translateY(-6px); }
[data-step="3"] .swap .n1, [data-step="1"].mock--gi .swap .n1 { opacity: 1; transform: none; }
.mock--db[data-step="1"] .db__side .swap .n0, .mock--db[data-step="2"] .db__side .swap .n0,
.mock--db[data-step="1"] .db__chips .chip:first-child .swap .n0, .mock--db[data-step="2"] .db__chips .chip:first-child .swap .n0 { opacity: 0; }
.mock--db[data-step="1"] .db__side .swap .n1, .mock--db[data-step="2"] .db__side .swap .n1,
.mock--db[data-step="1"] .db__chips .chip:first-child .swap .n1, .mock--db[data-step="2"] .db__chips .chip:first-child .swap .n1 { opacity: 1; transform: none; }

/* tableau de bord */
.db { display: grid; grid-template-columns: 178px minmax(0, 1fr); min-height: 420px; }
.db__side { background: #F4ECE6; border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.db__brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 750; font-size: 16px; padding: 0 6px; }
.mk { width: 20px; height: 20px; color: var(--groseille); }
.db__acct { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: var(--sheet); font-weight: 600; font-size: 12.5px; }
.db__acct .av { width: 26px; height: 26px; font-size: 10.5px; }
.db__side ul { display: grid; gap: 2px; }
.db__side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; color: var(--ink-soft); }
.db__side li .ico { width: 16px; height: 16px; }
.db__side li.is-active { background: var(--sheet); color: var(--ink); font-weight: 600; }
.db__side li em { margin-left: auto; font-style: normal; font-size: 11.5px; background: var(--groseille); color: #fff; border-radius: 999px; padding: 0 7px; }
.db__main { padding: 16px 18px; position: relative; overflow: hidden; }
.db__head { display: flex; align-items: center; gap: 12px; }
.db__h { font-family: var(--serif); font-size: 20px; }
.db__search { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; background: #fff; white-space: nowrap; overflow: hidden; }
.db__search .ico { width: 14px; height: 14px; }
.db__btn { background: var(--groseille); color: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.db__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.db__list { display: grid; gap: 8px; }
.db__row { display: grid; grid-template-columns: auto 128px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; min-height: 64px; }
.db__who b { display: block; font-size: 13px; } .db__who small { display: block; font-size: 11.5px; color: var(--ink-mute); }
.db__txt { font-size: 12.5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.db__txt .stars { margin-right: 6px; vertical-align: -2px; } .db__txt .st { width: 11px; height: 11px; }
.db__tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--paper); color: var(--ink-soft); white-space: nowrap; }
.db__show { display: grid; justify-items: center; gap: 2px; min-width: 50px; } .db__show small { font-size: 10.5px; color: var(--ink-mute); }
.db__vid { width: 34px; height: 42px; border-radius: 6px; position: relative; overflow: hidden; }
.db__vid .vthumb__play { width: 18px; height: 18px; margin: -9px 0 0 -9px; top: 50%; } .db__vid .vthumb__play .ico { width: 9px; height: 9px; }
.db__vid .vthumb__dur { display: none; }
.db__vid .vthumb__person { width: 80%; }
.db__badge { font-size: 10px; font-weight: 700; color: #fff; background: var(--groseille); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; margin-left: 4px; }
.db__row--new { display: block; position: relative; padding: 0; border-style: dashed; background: transparent; }
.db__wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-mute); font-size: 12.5px; transition: opacity .4s; }
.db__arrive { display: grid; grid-template-columns: auto 128px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; min-height: 64px; background: #FFF6F3; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--groseille); opacity: 0; transform: translateY(-14px); transition: opacity .5s, transform .6s var(--ease); }
.mock--db:not([data-step="0"]) .db__arrive { opacity: 1; transform: none; }
.mock--db:not([data-step="0"]) .db__wait { opacity: 0; }
.lbl-on { display: none; }
.mock--db[data-step="2"] .lbl-on, .mock--db[data-step="3"] .lbl-on { display: inline; }
.mock--db[data-step="2"] .lbl-off, .mock--db[data-step="3"] .lbl-off { display: none; }
.db__row--ghost { display: flex; gap: 12px; opacity: .5; }
.db__row--ghost .sk--l { width: 30%; } .db__row--ghost .sk--m { width: 40%; }
.db__toast { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center; background: var(--ink); color: #fff; font-size: 12.5px; padding: 9px 14px; border-radius: 10px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); }
.mock--db[data-step="1"] .db__toast { opacity: 1; transform: none; }
@container (max-width: 760px) { .db { grid-template-columns: 150px minmax(0, 1fr); } .db__tag { display: none; } .db__row, .db__arrive { grid-template-columns: auto 110px minmax(0, 1fr) auto; } }
@container (max-width: 580px) {
  .db { grid-template-columns: 1fr; }
  .db__side { display: none; }
  .db__row, .db__arrive { grid-template-columns: auto minmax(0, 1fr) auto; }
  .db__txt, .db__tag { display: none; }
  .db__btn { display: none; }
}

/* collecte */
.col2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 18px; align-items: center; }
.cf { display: grid; gap: 10px; }
.cf__h { font-family: var(--serif); font-size: 17px; }
.cf__f { display: grid; gap: 3px; } .cf__f small, .we__lab { font-size: 11.5px; color: var(--ink-mute); font-weight: 600; }
.in { display: block; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: #fff; font-size: 12.5px; }
.in--focus { border-color: var(--groseille); box-shadow: 0 0 0 3px rgba(156,30,60,.14); }
.caret { display: inline-block; width: 1.5px; height: 1em; background: var(--groseille); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.cf__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.sw { display: inline-flex; gap: 6px; } .sw i { width: 18px; height: 18px; border-radius: 50%; }
.sw1 { background: #6B3FA0; } .sw2 { background: var(--groseille); } .sw3 { background: var(--moss); } .sw4 { background: #2F5E8C; }
.sw i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.cf__link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-weight: 600; font-size: 12.5px; }
.cf__link .ico { color: var(--groseille); width: 15px; } .cf__link em { margin-left: auto; font-style: normal; color: var(--groseille); }
.cf__qr { display: flex; gap: 12px; align-items: center; } .cf__qr .qr { width: 64px; } .cf__qr b { display: block; } .cf__qr small { color: var(--ink-mute); font-size: 11.5px; }
.col2__ph { display: grid; justify-items: center; gap: 8px; } .col2__cap { font-size: 11.5px; color: var(--ink-mute); }
.mini-phone { width: min(220px, 100%); border-radius: 28px; background: #1A1C24; padding: 8px; position: relative; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.mini-phone .phone__notch { top: 14px; }
.cp { background: #F7EEF6; border-radius: 21px; padding: 34px 14px 16px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.cp .av { background: #E3D3EE; } .cp b { font-family: var(--serif); font-size: 15px; } .cp small { font-size: 11px; color: var(--ink-mute); margin-top: -4px; }
.cp__q { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.35; margin: 6px 0; }
.cp__stars { height: 0; overflow: hidden; opacity: 0; transition: opacity .4s; } .mock--cf[data-step="1"] .cp__stars { height: auto; opacity: 1; }
.cp__b { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid #6B3FA0; color: #6B3FA0; font-weight: 600; font-size: 12px; }
.cp__b--1 { background: #6B3FA0; color: #fff; } .cp__b .ico { width: 14px; }
.cp__ok { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-soft); text-align: left; }
.cp__ok i { width: 14px; height: 14px; border-radius: 3px; background: #6B3FA0; color: #fff; display: grid; place-items: center; flex: none; } .cp__ok .ico { width: 10px; }
@container (max-width: 560px) { .col2 { grid-template-columns: 1fr; } }

/* téléphone */
.phone { display: flex; justify-content: center; }
.phone__frame { width: min(280px, 100%); aspect-ratio: 9 / 18.5; background: #15161C; border-radius: 40px; padding: 10px; position: relative; box-shadow: var(--shadow-win); }
.phone__notch { position: absolute; left: 50%; top: 18px; width: 70px; height: 20px; border-radius: 12px; background: #000; transform: translateX(-50%); z-index: 3; }
.phone__screen { height: 100%; border-radius: 31px; overflow: hidden; position: relative; background: #F4EFEA; font-size: 13px; }
.rec { position: absolute; inset: 0; color: #fff; }
.rec__cam { position: absolute; inset: 0; background: linear-gradient(170deg, #7B8C79, #3D4A3F); }
.rec__cam::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 45% at 70% 12%, rgba(255,235,210,.5), transparent 70%); }
.rec__person { position: absolute; left: 50%; bottom: 0; width: 76%; aspect-ratio: 1 / 1.1; transform: translateX(-50%); }
.rec__person::before { content: ""; position: absolute; left: 50%; top: 4%; width: 44%; aspect-ratio: 1 / 1.15; transform: translateX(-50%); border-radius: 50%; background: #2C3430; }
.rec__person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 50% 50% 0 0; background: #2C3430; }
.rec__top { position: absolute; top: 48px; left: 16px; display: flex; gap: 8px; align-items: center; background: rgba(20,22,32,.6); padding: 5px 10px; border-radius: 999px; font-size: 13px; }
.rec__dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4B5C; animation: blink 1.2s steps(2) infinite; }
.rec__ring { position: absolute; top: 44px; right: 16px; width: 36px; height: 36px; transform: rotate(-90deg); }
.rec__ring circle { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 4; }
.rec__ring .rec__prog { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 57)); transition: stroke-dashoffset .9s linear; }
.rec__q { position: absolute; left: 14px; right: 14px; top: 96px; background: rgba(251,247,243,.94); color: var(--ink); padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.rec__q small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-mute); }
.rec__sub { position: absolute; left: 18px; right: 18px; bottom: 112px; text-align: center; display: grid; gap: 2px; }
.rec__sub span { justify-self: center; background: rgba(0,0,0,.7); padding: 2px 8px; border-radius: 4px; font-size: 13px; }
.rec__stop { position: absolute; left: 50%; bottom: 36px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; }
.rec__stop i { width: 22px; height: 22px; border-radius: 5px; background: #FF4B5C; }
.rec__again { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 11.5px; opacity: .9; }
.rec-wrap .phone { flex: none; width: 280px; max-width: 100%; }
.rec-wrap { display: flex; gap: 24px; align-items: center; justify-content: center; }
.rec-side { display: grid; gap: 14px; width: 220px; }
.rs__card { background: var(--sheet); border-radius: 12px; padding: 14px; box-shadow: 0 14px 30px -18px rgba(62,30,40,.45); font-size: 13px; display: grid; gap: 8px; }
.rs__card p { display: grid; gap: 4px; } .rs__card p span { background: var(--paper); padding: 4px 8px; border-radius: 6px; }
.rs__card small { color: var(--groseille); font-weight: 600; }
.rs__thumbs { display: flex; gap: 6px; } .rs__thumbs i { flex: 1; aspect-ratio: 3 / 4; border-radius: 6px; opacity: .7; } .rs__thumbs i.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--groseille); }
@media (max-width: 640px) { .rec-wrap { flex-direction: column; } .rec-side { width: 100%; max-width: 300px; } }

/* widget */
.we__top { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.we__side { padding: 16px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; background: #F8F1EC; }
.we__lab { margin-top: 6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper); padding: 4px; border-radius: 8px; }
.seg span { text-align: center; padding: 5px 4px; border-radius: 6px; font-size: 12px; transition: background-color .3s, color .3s; }
.mock--we[data-step="0"] .s0, .mock--we[data-step="1"] .s1, .mock--we[data-step="2"] .s2, .mock--we[data-step="3"] .s3 { background: var(--ink); color: #fff; }
.slider { height: 4px; border-radius: 2px; background: var(--line-strong); position: relative; margin: 8px 0; } .slider i { position: absolute; left: 40%; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.we__prev { padding: 16px; background: #fff; min-height: 300px; overflow: hidden; }
.wp__site { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wp__logo { font-family: var(--serif); font-weight: 700; font-size: 14px; } .wp__nav { display: flex; gap: 6px; } .wp__nav i { width: 28px; height: 6px; border-radius: 3px; background: var(--line); }
.wp__h { display: block; font-family: var(--serif); font-size: 17px; margin: 14px 0 10px; }
.wp { display: grid; gap: 8px; transition: opacity .3s; }
.wp__c { background: #F7EEF6; border-radius: 10px; padding: 10px 12px; font-size: 12px; display: grid; gap: 4px; position: relative; }
.wp__c p { font-family: var(--serif); font-style: italic; } .wp__c b { font-size: 11.5px; color: #6B3FA0; }
.wp__v { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; } .wp__v .ico { width: 10px; }
.mock--we[data-step="1"] .wp { grid-template-columns: 78% 78% 78%; overflow: hidden; }
.mock--we[data-step="1"] .wp__c { grid-row: 1; }
.mock--we[data-step="2"] .wp { grid-template-columns: 1fr 1fr; }
.mock--we[data-step="3"] .wp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mock--we[data-step="3"] .wp__c p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.we__code { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--ink); color: #E8DCD4; }
.we__code code { flex: 1; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.we__copy { display: inline-grid; } .we__copy > span { grid-area: 1/1; display: inline-flex; align-items: center; gap: 4px; background: var(--paper); color: var(--ink); padding: 5px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; transition: opacity .3s; }
.we__copy .ico { width: 12px; } .we__copy .c1 { opacity: 0; } .mock--we[data-step="3"] .c1 { opacity: 1; } .mock--we[data-step="3"] .c0 { opacity: 0; }
@container (max-width: 600px) { .we__top { grid-template-columns: 1fr; } .we__side { border-right: 0; border-bottom: 1px solid var(--line); } .we__side .slider, .we__side .we__lab:nth-of-type(3), .we__side .we__lab:nth-of-type(4), .we__side .in { display: none; } }

/* mur sur site client */
.mw { background: #FAF8F4; padding: 16px 18px 12px; font-size: 13px; }
.mw__nav { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mw__logo { font-family: var(--serif); font-weight: 750; font-size: 17px; line-height: 1; } .mw__logo small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--ink-mute); margin-top: 3px; }
.mw__links { display: flex; gap: 12px; margin-left: auto; font-size: 12.5px; } .mw__links i { font-style: normal; } .mw__links i.is-on { text-decoration: underline; text-underline-offset: 4px; }
.mw__cta { background: #5A3E24; color: #fff; padding: 7px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.mw__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 12px; }
.mw__head b { font-family: var(--serif); font-size: 20px; } .mw__chips { display: flex; gap: 6px; }
.mw__chips .chip.is-on { background: #5A3E24; border-color: #5A3E24; }
.mw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.mw__stack { display: grid; gap: 12px; }
.mw .rv { box-shadow: 0 1px 0 rgba(30,35,52,.06), 0 8px 18px -12px rgba(62,30,40,.4); }
.mw .vthumb { background-color: #C9B79E; }
.mw__foot { display: block; text-align: right; margin-top: 10px; color: var(--ink-mute); font-size: 11px; }
.rv--wide .vthumb { aspect-ratio: 16 / 10; }
.mw .vthumb::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.js .mock.is-live .mw .vthumb::after, .js .mock.is-live.mock--bk .vthumb::after { animation: vprog 9s linear infinite; }
@keyframes vprog { to { transform: scaleX(1); } }
@container (max-width: 520px) { .mw__links { display: none; } .mw__grid { grid-template-columns: 1fr; } .mw__cta { margin-left: auto; } }

/* instagram */
.ig { padding: 16px; }
.ig__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ig__pick { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 180px; } .ig__pick b { display: block; font-size: 13px; } .ig__pick small { font-size: 11.5px; color: var(--ink-mute); }
.ig__tpl { display: flex; gap: 6px; } .ig__tpl i { width: 26px; height: 26px; border-radius: 6px; }
.t1 { background: #2B2330; } .t2 { background: #E8C9C0; } .t3 { background: #F4EEE6; border: 1px solid var(--line); }
.ig__tpl i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--groseille); }
.ig__row { display: grid; grid-template-columns: 1.1fr 1fr .78fr; gap: 14px; align-items: end; margin-top: 16px; }
.ig__f { display: grid; gap: 6px; justify-items: center; } .ig__f small { font-size: 11.5px; color: var(--ink-mute); transition: color .3s; }
.ig__img { width: 100%; background: #2B2330; color: #F6E9E4; border-radius: 8px; padding: 12% 10%; display: flex; flex-direction: column; justify-content: center; gap: 8px; position: relative; transition: box-shadow .35s, transform .35s var(--ease); }
.ig__f--sq .ig__img { aspect-ratio: 1; } .ig__f--pt .ig__img { aspect-ratio: 4 / 5; } .ig__f--st .ig__img { aspect-ratio: 9 / 16; }
.ig__q { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.3; }
.ig__n { font-size: 11px; font-weight: 600; color: #F0A7B6; } .ig__brand { position: absolute; left: 10%; bottom: 7%; font-size: 9.5px; opacity: .7; }
.mock--ig[data-step="0"] .ig__f--sq .ig__img, .mock--ig[data-step="1"] .ig__f--pt .ig__img, .mock--ig[data-step="2"] .ig__f--st .ig__img { box-shadow: 0 0 0 3px var(--groseille); transform: translateY(-4px); }
.mock--ig[data-step="0"] .ig__f--sq small, .mock--ig[data-step="1"] .ig__f--pt small, .mock--ig[data-step="2"] .ig__f--st small { color: var(--groseille); font-weight: 600; }
@container (max-width: 480px) { .ig__q { font-size: 10.5px; } .ig__row { gap: 8px; } .ig__bar .db__btn { display: none; } }

/* import google */
.gi { padding: 22px; background: rgba(30,35,52,.06); }
.gi__modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); max-width: 520px; margin-inline: auto; overflow: hidden; }
.gi__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); } .gi__head b { font-family: var(--serif); font-size: 16px; } .gi__x .ico { width: 16px; }
.gi__place { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: var(--paper); } .gi__place b { display: block; font-size: 13px; } .gi__place small { color: var(--ink-mute); font-size: 11.5px; }
.gi__pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3F6FB5; flex: none; }
.gi__list { padding: 6px 16px; }
.gi__r { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); } .gi__r:last-child { border-bottom: 0; }
.gi__r > div { flex: 1; display: grid; gap: 4px; } .gi__r b { font-size: 13px; } .gi__r p { font-size: 12.5px; color: var(--ink-soft); } .gi__r > small { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.gi__r.is-dim { opacity: .55; } .gi__r .sk--av { width: 34px; height: 34px; }
.cb { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; margin-top: 8px; transition: background-color .3s, border-color .3s; }
.cb i { opacity: 0; transition: opacity .3s; color: #fff; } .cb .ico { width: 12px; height: 12px; }
.cb.is-on, .cb--anim { background: var(--ink); border-color: var(--ink); } .cb.is-on i, .cb--anim i { opacity: 1; }
.mock--gi[data-step="1"] .cb--anim2 { background: var(--ink); border-color: var(--ink); } .mock--gi[data-step="1"] .cb--anim2 i { opacity: 1; }
.gi__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.gi__foot .cf__row { gap: 10px; } .gi__btn { background: var(--groseille); color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 12.5px; }

/* captures par métier */
.mock--bk { max-width: 760px; margin-inline: auto; }
.bk { padding: 20px; background: #FBF5F0; display: grid; gap: 12px; }
.bk__logo { font-family: var(--serif); font-weight: 700; font-size: 15px; } .bk__logo small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--ink-mute); }
.bk__h { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.bk__avis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.bk__v { display: grid; gap: 6px; } .bk__v small { font-size: 11.5px; color: var(--ink-mute); }
.bk__v .vthumb { background-color: var(--tone-2); }
.bk__quote { display: grid; gap: 6px; background: #fff; border-radius: 10px; padding: 12px; height: 100%; } .bk__quote p { font-family: var(--serif); font-style: italic; font-size: 13.5px; }
.bk__slots { display: flex; gap: 6px; flex-wrap: wrap; } .bk__slots i { font-style: normal; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; font-size: 12px; } .bk__slots i.is-on { border-color: #2F5E8C; color: #2F5E8C; font-weight: 600; }
.bk__btn { background: #2F5E8C; color: #fff; border-radius: 10px; padding: 12px; text-align: center; font-weight: 600; }
@container (max-width: 440px) { .bk__avis { grid-template-columns: 1fr; } }
.col2--fs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.fs__slide { aspect-ratio: 16 / 10; background: #1F3B2E; color: #F0EBDD; border-radius: 8px; padding: 18px; display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: center; --qr-bg: #F0EBDD; }
.fs__slide b { font-family: var(--serif); font-size: 18px; line-height: 1.15; display: block; } .fs__slide p { font-size: 12px; margin-top: 6px; opacity: .85; } .fs__slide small { display: block; margin-top: 10px; font-size: 10.5px; opacity: .7; }
.fs__slide .qr { color: #1F3B2E; border-radius: 4px; }
.fl { display: grid; gap: 8px; }
.fl__h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .fl__h b { font-family: var(--serif); font-size: 15px; } .fl__h span { font-size: 12px; color: var(--moss); font-weight: 600; } .fl__h em { font-style: normal; }
.fl__r { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .fl__r b { display: block; font-size: 12.5px; } .fl__r p { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.fl__r--sk > span:last-child { flex: 1; display: grid; gap: 6px; align-content: center; }
.em { padding: 14px 18px 18px; font-size: 13px; }
.em__f { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); } .em__f small { width: 44px; color: var(--ink-mute); }
.em__body { display: grid; gap: 10px; padding-top: 12px; line-height: 1.55; }
.em__card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; background: #FBF7F3; }
.em__url { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--groseille); font-size: 12.5px; } .em__url .ico { width: 15px; }
.em__card p { font-family: var(--serif); font-style: italic; font-size: 14px; } .em__card small { color: var(--ink-mute); font-size: 11.5px; }
.em__pdf { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; } .em__pdf b { background: var(--groseille); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px; }
.es { container-type: inline-size; }
.es__in { display: flex; gap: clamp(20px, 5vw, 56px); align-items: flex-end; justify-content: center; padding: 20px 0; }
.es__stand { width: min(260px, 48%); perspective: 800px; }
.es__card { background: #F6ECE4; border-radius: 10px 10px 4px 4px; padding: 18px; display: grid; gap: 12px; text-align: center; transform: rotateX(8deg); transform-origin: bottom; box-shadow: 0 30px 40px -24px rgba(62,30,40,.6); border-bottom: 10px solid #C9A98E; }
.es__card b { font-family: var(--serif); font-size: 17px; line-height: 1.2; } .es__card .qr { width: 70%; margin-inline: auto; } .es__card small { font-size: 12px; color: var(--ink-soft); }
.es__story { width: min(190px, 40%); } .es__story .ig__img { background: #3B2A35; box-shadow: var(--shadow-win); border-radius: 16px; }
.ig__bars { position: absolute; top: 6%; left: 8%; right: 8%; display: flex; gap: 3px; } .ig__bars i { flex: 1; height: 2px; background: rgba(255,255,255,.4); } .ig__bars i:first-child { background: #fff; }
.col2--art { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); padding: 0; gap: clamp(20px, 3vw, 40px); }
.phone--sms .phone__frame { width: min(250px, 100%); }
.sms-th { position: absolute; inset: 0; padding: 56px 12px 16px; display: flex; flex-direction: column; gap: 8px; background: #F4F1EE; }
.sms-th__who { text-align: center; font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.sms-th .b { font-size: 12.5px; } .sms-th .b--them { background: #E4E6EC; }
.sms-th__st { display: inline-flex; gap: 6px; align-items: center; align-self: center; margin-top: auto; font-size: 11.5px; color: var(--moss); font-weight: 600; background: #fff; padding: 5px 10px; border-radius: 999px; } .sms-th__st .ico { width: 14px; }
@media (max-width: 760px) { .col2--art { grid-template-columns: 1fr; } }
.sh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; padding: 20px; background: #fff; }
.sh__img { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(170deg, #EDE3D4, #D5C3A8); display: grid; place-items: center; }
.sh__info { display: grid; gap: 8px; align-content: start; } .sh__info > small { color: var(--ink-mute); font-size: 11.5px; } .sh__info > b { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.sh__price { font-size: 16px; font-weight: 600; } .sh__btn { background: #1E2334; color: #fff; text-align: center; padding: 9px; border-radius: 8px; font-weight: 600; font-size: 12.5px; }
.sh__rv { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; } .sh__rvh { font-size: 13px; }
.sh__r { display: flex; gap: 10px; } .sh__r p { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0; } .sh__r small { font-size: 11px; color: var(--ink-mute); }
.sh__by { font-size: 10.5px; color: var(--ink-mute); }
@container (max-width: 480px) { .sh { grid-template-columns: 1fr; } .sh__img { aspect-ratio: 16 / 9; } }

/* =========== PAGES =========== */
.page-hero { padding: clamp(40px, 7vw, 100px) 0 clamp(40px, 6vw, 80px); }
.page-hero h1 { font-size: clamp(2.5rem, 5.8vw, 5.2rem); line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; }
.page-hero .lead { margin-top: 24px; }

/* fonctionnalités */
.feat-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-bottom: clamp(60px, 8vw, 120px); }
.rail { position: sticky; top: 110px; align-self: start; padding-left: 16px; }
.rail ol { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.rail a { display: flex; align-items: center; min-height: 40px; padding-left: 16px; text-decoration: none; color: var(--ink-soft); font-size: .98rem; transition: color .3s; }
.rail a.is-current { color: var(--ink); font-weight: 600; }
.rail__bar { position: absolute; left: 16px; top: 0; width: 2px; height: var(--h, 40px); background: var(--groseille); transform: translateY(var(--y, 0)); transition: transform .5s var(--ease); }
.chapter { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 56px); align-items: start; }
.chapter__kicker { font-weight: 600; color: var(--groseille-deep); margin-bottom: 12px; }
.chapter h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.chapter__p > p { color: var(--ink-soft); }
.chapter__mock { margin-top: clamp(32px, 4vw, 52px); }
.ticks { display: grid; gap: 10px; margin-top: 20px; font-size: 1rem; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--groseille); border-bottom: 2px solid var(--groseille); transform: rotate(-45deg); }
@media (max-width: 760px) { .chapter__text { grid-template-columns: 1fr; } }
.page-hero__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 56px; align-items: end; }
.page-hero__split .lead { margin-top: 0; }
@media (max-width: 860px) { .page-hero__split { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .feat-layout { grid-template-columns: 1fr; } .rail { display: none; } }

/* pour qui */
.who-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: end; }
.who-index { margin-top: 40px; }
.who-index ul { border-top: 1px solid var(--line); }
.who-index li { border-bottom: 1px solid var(--line); }
.who-index a { display: flex; align-items: center; min-height: 64px; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; text-decoration: none; transition: color .3s, transform .4s var(--ease); }
.who-index a:hover, .who-index a:focus-visible, .who-index a.is-peek { color: var(--groseille); transform: translateX(12px); }
.peek { position: sticky; top: 110px; aspect-ratio: 4 / 5; }
.peek__i { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .8s var(--ease); }
.peek__i:first-child, .peek__i.is-on { opacity: 1; transform: none; }
.peek.has-on .peek__i:first-child:not(.is-on) { opacity: 0; }
@media (max-width: 860px) { .who-hero { grid-template-columns: 1fr; } .peek { display: none; } }
.metier { padding-block: clamp(64px, 9vw, 120px); scroll-margin-top: 70px; }
.metier:nth-of-type(odd) { background: var(--sheet); }
.metier__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.metier--flip .metier__ph { order: 2; }
.metier__ph img { aspect-ratio: 4 / 3; }
.metier__who { font-weight: 600; color: var(--groseille-deep); margin-bottom: 12px; }
.metier h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.usage { margin-top: 26px; padding-left: 20px; border-left: 3px solid var(--groseille); max-width: 60ch; }
.usage__label { font-family: var(--serif); font-style: italic; font-weight: 600; margin-bottom: 6px; }
.usage p { color: var(--ink-soft); }
.usage__note { font-size: .95rem; margin-top: 8px; color: var(--ink-mute) !important; }
.metier__cap { margin-top: clamp(36px, 5vw, 64px); max-width: 980px; margin-inline: auto; }
.fictif-note { font-family: var(--serif); font-style: italic; color: var(--ink-soft); padding: 48px 0; max-width: 60ch; }
@media (max-width: 860px) { .metier__head { grid-template-columns: 1fr; } .metier--flip .metier__ph { order: 0; } }

/* tarifs */
.billing { display: inline-flex; gap: 4px; margin-top: 32px; padding: 4px; border-radius: 12px; background: var(--paper-deep); }
.billing__b { min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 1rem; cursor: pointer; color: var(--ink-soft); }
.billing__b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html:not(.js) .billing { display: none; }
.price-note { margin-top: 40px; color: var(--ink-soft); font-size: 1rem; }
.cmp-sec { background: var(--sheet); }
.cmp__tabs { display: none; }
.cmp__scroll { overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 640px; }
.cmp th, .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--serif); font-size: 1.4rem; border-bottom: 2px solid var(--ink); }
.cmp tbody th { font-weight: 500; color: var(--ink-soft); width: 28%; }
.cmp .c-pro { background: rgba(156,30,60,.05); }
.cmp .no { color: var(--ink-mute); }
@media (max-width: 700px) {
  .js .cmp__tabs { display: flex; gap: 4px; padding: 4px; background: var(--paper-deep); border-radius: 12px; margin-bottom: 16px; }
  .js .cmp__tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; cursor: pointer; }
  .js .cmp__tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .js .cmp table { min-width: 0; }
  .js .cmp[data-plan="gratuit"] :is(.c-pro, .c-business), .js .cmp[data-plan="pro"] :is(.c-gratuit, .c-business), .js .cmp[data-plan="business"] :is(.c-gratuit, .c-pro) { display: none; }
  .js .cmp thead { display: none; }
  .js .cmp tbody th { width: 46%; }
  .js .cmp .c-pro { background: transparent; }
}
.faq-t__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
.faq-t__grid h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
@media (max-width: 860px) { .faq-t__grid { grid-template-columns: 1fr; } }

/* accordéon */
.acc { border-top: 1.5px solid var(--ink); }
.acc__i { border-bottom: 1px solid var(--line-strong); }
.acc__i summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.acc__i summary::-webkit-details-marker { display: none; }
.acc__i summary:hover { color: var(--groseille-deep); }
.acc__ic { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; position: relative; transition: transform .35s var(--ease), background-color .3s; }
.acc__ic::before, .acc__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; background: currentColor; transform: translate(-50%, -50%); }
.acc__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__i[open] .acc__ic { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.acc__i[open] summary { color: var(--ink); }
.acc__a { padding: 0 48px 24px 0; color: var(--ink-soft); max-width: 62ch; }
.js .acc__i[open] .acc__a { animation: acc-in .45s var(--ease); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } }
.acc--big summary { font-size: clamp(1.25rem, 2vw, 1.5rem); min-height: 76px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid__side { position: sticky; top: 110px; }
.faq-grid__side .lead { margin: 24px 0 8px; }
.page-hero--faq h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid__side { position: static; } }

/* manifeste */
.manif__hero { padding: clamp(48px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); }
.manif__label { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--groseille-deep); margin-bottom: 20px; }
.manif__hero h1 { font-size: clamp(2.5rem, 6.4vw, 6rem); line-height: 1; letter-spacing: -.03em; max-width: 20ch; }
.manif__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); }
.manif__ph { position: sticky; top: 110px; } .manif__ph img { aspect-ratio: 3 / 4; }
.manif__text { display: grid; gap: 1.2em; font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.55; font-weight: 420; max-width: 34em; }
.manif__text p:first-child::first-letter { float: left; font-size: 4.4em; line-height: .82; font-weight: 800; color: var(--groseille); margin: .06em .08em 0 0; }
.manif__for { font-weight: 700; font-size: 1.35em; line-height: 1.2; }
.w { opacity: var(--o, 1); transition: none; }
.beliefs { background: var(--ink); color: var(--paper); }
.beliefs h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: clamp(40px, 6vw, 72px); }
.beliefs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 6vw, 96px); counter-reset: bel; }
.beliefs__list li { counter-increment: bel; display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(242,230,222,.2); }
.beliefs__list li::before { content: counter(bel); font-family: var(--serif); font-size: 3rem; line-height: 1; font-weight: 800; color: #F0A7B6; }
.beliefs__list h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.beliefs__list p { color: rgba(242,230,222,.82); max-width: 44ch; }
@media (max-width: 760px) { .beliefs__list { grid-template-columns: 1fr; } }
.fr-side__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.fr-side h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.fr-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fr-list li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fr-list .ico { color: var(--moss); margin-top: .3em; }
@media (max-width: 860px) { .fr-side__grid, .manif__body { grid-template-columns: 1fr; } .manif__ph { position: static; max-width: 440px; } }
.now { background: var(--paper-deep); }
.now__in { max-width: 820px; }
.now h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); margin-bottom: 20px; }
.now p { font-size: 1.2rem; color: var(--ink-soft); }
.sign { font-family: var(--serif); font-style: italic; margin: 24px 0 32px; color: var(--ink) !important; }

/* liste d'attente */
.wl { padding: clamp(36px, 6vw, 88px) 0 clamp(64px, 9vw, 120px); }
.wl__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wl h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); line-height: 1; letter-spacing: -.025em; }
.wl .lead { margin: 24px 0 36px; }
.wl__h2 { font-size: 1.5rem; margin-bottom: 14px; }
.wl__get { display: grid; gap: 12px; } .wl__get li { display: flex; gap: 12px; } .wl__get .ico { color: var(--groseille); margin-top: .3em; }
.wl__ph { margin-top: 40px; max-width: 460px; } .wl__ph img { aspect-ratio: 4 / 3; }
.wl__card { background: var(--sheet); border-radius: 18px; padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--shadow-win); position: sticky; top: 100px; }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 1rem; }
.opt { font-weight: 400; color: var(--ink-mute); }
.field input, .field select { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1.05rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,35,52,.16); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--groseille); box-shadow: 0 0 0 3px rgba(156,30,60,.14); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__err { color: var(--groseille-deep); font-size: .98rem; font-weight: 500; }
.field__help { color: var(--ink-mute); font-size: .95rem; }
.form__alert { background: #F6DADA; color: #6E1026; padding: 12px 14px; border-radius: 10px; font-size: 1rem; }
.form__legal { font-size: .95rem; color: var(--ink-mute); }
.hp { display: none !important; }
.done { display: grid; gap: 16px; justify-items: start; }
.done:focus { outline: none; }
.done__h { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.done p { color: var(--ink-soft); }
.done__stamp { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 2px solid var(--groseille); border-radius: 999px; color: var(--groseille); font-weight: 700; transform: rotate(-4deg); }
.done__stamp .brand__mark { width: 34px; height: 34px; }
.js .done:not([hidden]) .done__stamp { animation: stamp .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@media (max-width: 900px) { .wl__grid { grid-template-columns: 1fr; } .wl__card { position: static; } .wl__ph { display: none; } }
.merci { padding: clamp(64px, 12vw, 160px) 0; }
.merci__in { max-width: 760px; display: grid; gap: 24px; justify-items: start; }
.merci h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.js .merci .done__stamp { animation: stamp .7s .2s cubic-bezier(.3,1.6,.5,1) both; }

/* =========== MOUVEMENT RÉDUIT =========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .wall__track { animation: none !important; }
  .wall__set + .wall__set { display: none; }
  .wall-toggle { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Vraies photos dans les maquettes (mise à jour) ---------- */
.vph { background-size: cover; background-position: center 30%; }
.vph--karim { background-image: linear-gradient(180deg, rgba(20,22,32,0) 45%, rgba(20,22,32,.45)), url("https://images.unsplash.com/photo-1725866546799-4cc16f6cba23?auto=format&fit=crop&w=640&h=640&q=70"); }
.vph--roux { background-image: linear-gradient(180deg, rgba(20,22,32,0) 45%, rgba(20,22,32,.45)), url("https://images.unsplash.com/photo-1606851447920-549ba0b02246?auto=format&fit=crop&w=800&h=560&q=70"); }
.vph--rec { background-image: url("https://images.unsplash.com/photo-1758874383966-08e2a123d438?auto=format&fit=crop&w=480&h=900&q=70"); background-position: center 20%; }
.vph--karim, .vph--roux, .vph--rec { filter: saturate(.85) sepia(.08); }
.sh__img img, .rv__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh__img { overflow: hidden; }
.rv__photo { overflow: hidden; }
.obj__t { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.db__row--ghost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; opacity: .75; }
.db__row--ghost .av { grid-row: span 2; }
.db__gt { font-size: 12px; color: var(--ink-mute); } .db__gt b { color: var(--ink); }
.db__gq { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi__r p { font-size: 12px; line-height: 1.35; color: var(--ink-soft); margin-top: 2px; }

/* Grille des métiers (accueil) : 9 entrées */
.uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
.uc, .uc[class] { grid-column: auto; margin-top: 0; }
.uc:nth-child(3n+2) { margin-top: 56px; }
.uc__img img { aspect-ratio: 4 / 3; }
.uc__name { font-size: 1.35rem; }
.uc-more { margin-top: 48px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; } .uc:nth-child(3n+2) { margin-top: 0; } .uc:nth-child(2n) { margin-top: 40px; } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } .uc:nth-child(2n) { margin-top: 0; } }
.who-index a { min-height: 56px; font-size: clamp(1.25rem, 2.4vw, 1.9rem); }

[hidden] { display: none !important; }

/* ---------- Formulaire Brevo et page confidentialité ---------- */
.form__legal { font-size: .92rem; line-height: 1.55; }
.form__legal a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--groseille); text-decoration-thickness: 1.5px; text-underline-offset: .2em; white-space: nowrap; }
.form__legal a:hover { color: var(--groseille); }
.btn[disabled] { opacity: .75; cursor: progress; }
.legal { padding-block: clamp(56px, 9vw, 120px); }
.legal__in { max-width: 760px; }
.legal h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.legal .lead { margin-top: 20px; }
.legal__date { margin-top: 14px; font-size: .95rem; color: var(--ink-mute); }
.legal__s { margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.legal__s h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 14px; }
.legal__s p { color: var(--ink-soft); max-width: 65ch; }
.legal__s p + p { margin-top: 12px; }
.legal__s a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--groseille); text-underline-offset: .2em; }