/* ==========================================================================
   Stamelio — site vitrine
   Titres : Nunito (900/800), la famille dont le lettrage du logo A17 reprend les formes.
   Texte courant : Nunito Sans, même squelette, terminaisons nettes, plus lisible en paragraphe.
   ========================================================================== */

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F5EDDC;
  --cream-deep: #EBDDC2;
  --paper: #FFFBF3;
  --cacao: #4B342B;
  --cacao-deep: #3A2820;
  --ink: #3A2620;
  --muted: #6E564A;
  --line: #D9C8AA;
  --accent: #A9563D;          /* point du logo A17 : mots mis en avant et boutons */
  --accent-strong: #8F4430;   /* survol des boutons */
  --on-accent: #FFFBF3;       /* texte sur l'accent (contraste 5:1) */
  --accent-on-dark: #D2A68A;  /* point du logo sur fond sombre */
  --eyebrow: #8E553B;
  --coral: #C4553D;
  --green: #3F6B4A;
  --teal: #2F7C77;
  --plum: #5B3A63;
  --mustard: #D9A23A;
  --focus: #C4553D;

  --font-display: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4.5vw, 40px);
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-print: 5px 6px 0 var(--ink);
  --nav-h: 64px;
  /* Espace identique : menu → carte du hero → bande des chiffres → « Comment ça marche » */
  --top-gap: clamp(26px, 3.7vw, 47px);
  /* Haut et bas de chaque section, et écart entre deux grands blocs d'une même section. */
  --section-gap: clamp(44px, 5.6vw, 72px);
  --nav-top: 14px;

  /* Grain d'impression : bruit SVG très léger, réservé aux surfaces illustrées. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .15 0 0 0 0 .12 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--cacao);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.06; margin: 0; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(2.45rem, 5.6vw, 4.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.15; }
h4 { font-size: 1.15rem; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[data-nav-theme="dark"], .footer { --focus: #F2B79A; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cacao); color: var(--cream); padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  letter-spacing: .02em; color: var(--eyebrow); margin-bottom: .6rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before {
  content: ""; width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: url("/img/logo/cachet-a17.svg") center / contain no-repeat;
          mask: url("/img/logo/cachet-a17.svg") center / contain no-repeat;
}
[data-nav-theme="dark"] .eyebrow { color: var(--accent-on-dark); }

/* ---------------------------------------------------------------- boutons */
/* Tous les boutons d'action reprennent la couleur du point du logo. */
.btn {
  --bg: var(--accent); --fg: var(--on-accent); --bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.2;
  padding: .9rem 1.5rem; border-radius: 999px; border: 2.5px solid var(--bd);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  text-align: center;
}
.btn:hover { --bg: var(--accent-strong); --bd: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn-large { font-size: 1.12rem; padding: 1.05rem 1.7rem; }
.btn-small { font-size: .95rem; padding: .6rem 1.1rem; box-shadow: 0 3px 0 var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--cacao); --bd: var(--cacao); }
.btn-ghost:hover { --bg: rgba(75, 52, 43, .07); --bd: var(--cacao); }
.btn .ic { width: 1.1em; height: 1.1em; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }

/* ---------------------------------------------------------------- navigation */
/* Bulle flottante : sombre en haut de page, puis suit la section visible. */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: var(--nav-top) var(--gutter) 0;
  pointer-events: none;
  color: var(--cacao);
}
.nav-inner {
  pointer-events: auto; position: relative;
  height: var(--nav-h); max-width: calc(var(--wrap) + 24px); margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 10px 0 22px; border-radius: 999px;
  background: rgba(255, 251, 243, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink), 0 14px 30px -16px rgba(58, 38, 32, .5);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease;
}
.nav-logo { position: relative; display: block; width: 148px; height: 38px; flex: none; border-radius: 8px; }
.nav-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s ease; }
.nav-logo .logo-on-dark { opacity: 0; }
.nav-links { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav-links a:not(.btn) {
  font-family: var(--font-display); font-weight: 800; font-size: .98rem; text-decoration: none;
  padding: .5rem .75rem; border-radius: 999px; transition: background-color .2s ease;
}
.nav-links a:not(.btn):hover { background: rgba(75, 52, 43, .08); }
.nav-cta, .nav-cta-menu { white-space: nowrap; }
.nav-cta-menu { display: none; }
.nav-toggle { display: none; }

.nav[data-theme="dark"] { color: var(--cream); --focus: #F2B79A; }
.nav[data-theme="dark"] .nav-inner {
  background: rgba(58, 40, 32, .97);
  border-color: rgba(245, 237, 220, .28);
  box-shadow: 0 4px 0 #1d130e, 0 16px 34px -14px rgba(20, 12, 8, .6);
}
.nav[data-theme="dark"] .logo-on-light { opacity: 0; }
.nav[data-theme="dark"] .logo-on-dark { opacity: 1; }
.nav[data-theme="dark"] .nav-links a:not(.btn):hover { background: rgba(245, 237, 220, .1); }
.nav[data-theme="dark"] .btn { box-shadow: 0 3px 0 #1d130e; }
@media (prefers-reduced-motion: reduce) { .nav-inner, .nav-logo img { transition: none; } }

@media (max-width: 940px) {
  .nav-inner { gap: .6rem; padding-left: 18px; }
  .nav-cta { margin-left: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; border: 2px solid currentColor;
    background: transparent; color: inherit; cursor: pointer; flex: none;
  }
  .nav-toggle .ic { width: 22px; height: 22px; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: .75rem 1.25rem 1.25rem;
    background: var(--paper); color: var(--cacao);
    border: 2px solid var(--ink); border-radius: 24px;
    box-shadow: 0 4px 0 var(--ink), 0 18px 30px -18px rgba(58, 38, 32, .45);
    display: none;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: .8rem .5rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-links .nav-cta-menu { display: inline-flex; margin-top: .75rem; }
  .nav[data-theme="dark"] .nav-links { background: var(--cacao-deep); color: var(--cream); border-color: rgba(245, 237, 220, .28); box-shadow: 0 4px 0 #1d130e, 0 18px 30px -18px rgba(0, 0, 0, .6); }
  .nav[data-theme="dark"] .nav-links a:not(.btn) { border-bottom-color: rgba(245, 237, 220, .15); }
}
@media (max-width: 520px) {
  :root { --nav-h: 56px; --nav-top: 10px; }
  .nav { padding-inline: 10px; }
  .nav-inner { gap: .4rem; padding: 0 6px 0 14px; }
  .nav-logo { width: 112px; height: 29px; }
  .nav-cta { font-size: .82rem; padding: .48rem .75rem; box-shadow: 0 2px 0 var(--ink); }
  .nav-toggle { width: 40px; height: 40px; }
}
@media (max-width: 350px) {
  .nav-cta { display: none; }
}

/* ---------------------------------------------------------------- hero */
/* Une seule grande carte : le mur et le sol de l'illustration se prolongent derrière le texte. */
.hero { --hero-pt: var(--top-gap); --hero-pb: var(--top-gap); padding: var(--hero-pt) 0 var(--hero-pb); }
/* Sur ordinateur, la carte occupe l'écran : la bande des chiffres n'apparaît qu'à moitié en bas. */
@media (min-width: 901px) {
  .hero-card { min-height: clamp(500px, calc(100svh - var(--nav-h) - var(--nav-top) - var(--hero-pt) - var(--hero-pb) - 60px), 860px); }
}
.hero-card {
  --sw: 35;                                   /* largeur de la scène, en % de la carte */
  container-type: inline-size;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sw) * 1%); align-items: center;
  border: 3px solid var(--ink); border-radius: 34px; box-shadow: var(--shadow-print);
  background-color: #EBDCC0;
}
.hero-copy { padding: clamp(28px, 4cqw, 52px) 12px clamp(28px, 4cqw, 52px) clamp(24px, 4cqw, 48px); position: relative; z-index: 1; }
/* Taille calculée sur la largeur de la colonne de texte : le titre tient toujours sur 2 lignes (≈ 11,7 em par ligne). */
.hero-title { font-size: clamp(2.2rem, calc(((100 - var(--sw)) * 1cqw - 72px) / 11.8), 4.4rem); letter-spacing: -0.018em; line-height: 1.04; margin: 0 0 clamp(16px, 2cqw, 26px); }
/* Épaissit le Nunito Black pour rejoindre la graisse du logo : contour de la même couleur,
   peint sous le remplissage pour n'élargir les lettres que vers l'extérieur. */
.hero-title { -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.hero-title .hl { color: var(--accent); }
/* Sous-titre sur une seule ligne : taille calculée sur la colonne de texte (≈ 26,8 em de long). */
.hero-sub { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, calc(((100 - var(--sw)) * 1cqw - 72px) / 26.8), 1.9rem); line-height: 1.2; letter-spacing: -.01em; color: var(--cacao); margin: 0 0 clamp(26px, 3.2cqw, 42px); white-space: nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin-bottom: clamp(22px, 2.8cqw, 36px); }
.hero-actions .btn { flex: 1 1 auto; font-size: 1.04rem; padding-inline: 1.35rem; }
.hero-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .98rem; font-weight: 600; color: var(--cacao); }
.hero-checks li { display: flex; align-items: center; gap: .45rem; }
.hero-checks .ic { width: 1.25em; height: 1.25em; padding: .18em; border-radius: 50%; background: var(--green); color: var(--cream); stroke-width: 3; }

.scene { margin: 0; position: relative; align-self: end; }
.scene-svg { width: 100%; height: auto; aspect-ratio: 640 / 600; overflow: visible; }
@media (max-width: 900px) {
  .hero-card { --sw: 100; grid-template-columns: 1fr; }
  .hero-copy { padding: 28px 22px 8px; }
  .hero-title { font-size: clamp(1.85rem, 9.2cqw, 3.6rem); }
  .hero-sub { font-size: clamp(1.15rem, 5.4cqw, 1.5rem); white-space: normal; text-wrap: balance; }
  .hero-checks { flex-direction: column; }
  .scene-svg { overflow: hidden; }
}

/* textes de la scène */
.t-url { font: 700 9px var(--font-body); fill: #6E564A; }
.t-card-name { font: 900 15px var(--font-display); fill: #F5EDDC; letter-spacing: -.01em; }
.t-card-sub { font: 700 8.6px var(--font-body); fill: #F5EDDC; fill-opacity: .88; }
.t-count { font: 900 66px var(--font-display); fill: #F5EDDC; }
.t-bubble-big { font: 900 31px var(--font-display); fill: #B4472F; letter-spacing: -.01em; }
.t-bubble-1 { font: 900 22.5px var(--font-display); fill: #3A2620; letter-spacing: -.012em; }
.t-bubble-2 { font: 800 19px var(--font-display); fill: #6E564A; }
.t-pill { font: 900 14px var(--font-display); fill: #FFFBF3; }

/* état statique (par défaut, et si l'utilisateur réduit les animations) */
.s-beam, .s-qr, .s-bubble-a, .s-count-before { opacity: 0; }
.s-stamp3, .s-check, .s-bubble-b, .s-count-after, .s-pill { opacity: 1; }
.s-client, .s-stamp3, .s-check, .s-barista, .s-bubble, .s-q1, .s-q2, .s-bubble-frame { transform-box: fill-box; transform-origin: 50% 50%; }
.s-bubble { transform-origin: 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .scene:not(.is-static) .s-pill { opacity: 0; }
  .scene:not(.is-static) :is(.s-client, .s-beam, .s-qr, .s-qr-line, .s-check, .s-stamp3, .s-count-before, .s-count-after, .s-bubble-frame, .s-bubble-a, .s-bubble-b, .s-barista) {
    animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1);
  }
  .scene:not(.is-static) .s-client { animation-name: sc-client; }
  .scene:not(.is-static) .s-beam { animation-name: sc-beam; animation-timing-function: linear; }
  .scene:not(.is-static) .s-beam g path { animation: sc-dash .6s linear infinite; }
  .scene:not(.is-static) .s-qr { animation-name: sc-beam; animation-timing-function: linear; }
  .scene:not(.is-static) .s-qr-line { animation-name: sc-sweep; animation-timing-function: ease-in-out; }
  .scene:not(.is-static) .s-check { animation-name: sc-check; }
  .scene:not(.is-static) .s-stamp3 { animation-name: sc-stamp; }
  .scene:not(.is-static) .s-count-before { animation-name: sc-before; animation-timing-function: steps(1, end); }
  .scene:not(.is-static) .s-count-after { animation-name: sc-after; animation-timing-function: steps(1, end); }
  .scene:not(.is-static) .s-bubble-frame { animation-name: sc-frame; }
  .scene:not(.is-static) .s-bubble-a { animation-name: sc-a; }
  .scene:not(.is-static) .s-bubble-b { animation-name: sc-b; }
  .scene:not(.is-static) .s-barista { animation-name: sc-nod; }
  .scene:not(.is-static) .s-q1 { animation: sc-sway 4.6s ease-in-out infinite alternate; }
  .scene:not(.is-static) .s-q2 { animation: sc-sway 5.4s ease-in-out -2s infinite alternate; }
  .scene.is-paused :is(.s-client, .s-beam, .s-beam path, .s-qr, .s-qr-line, .s-check, .s-stamp3, .s-count-before, .s-count-after, .s-bubble-frame, .s-bubble-a, .s-bubble-b, .s-barista, .s-q1, .s-q2) { animation-play-state: paused; }
}
@keyframes sc-client {
  0%, 12% { transform: translate(0, 0) rotate(0); }
  22%, 44% { transform: translate(24px, -20px) rotate(3deg); }
  56%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes sc-beam { 0%, 24% { opacity: 0; } 27%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes sc-dash { to { stroke-dashoffset: -20; } }
/* la ligne balaie le QR code de droite à gauche, puis revient (unités du repère du QR : 1 = sa largeur) */
@keyframes sc-sweep { 0%, 26% { transform: translateX(0); } 31.5% { transform: translateX(-.94px); } 37%, 100% { transform: translateX(0); } }
@keyframes sc-check {
  0%, 35% { opacity: 0; transform: scale(.4); }
  39%, 54% { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes sc-stamp {
  0%, 37% { opacity: 0; transform: scale(1.9) rotate(-24deg); }
  40% { opacity: 1; transform: scale(.9) rotate(0); }
  43% { transform: scale(1.04); }
  46%, 93% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes sc-before { 0% { opacity: 1; } 40% { opacity: 0; } 97% { opacity: 1; } }
@keyframes sc-after { 0% { opacity: 0; } 40% { opacity: 1; } 97% { opacity: 0; } }
@keyframes sc-frame {
  0%, 40% { opacity: 0; transform: translateY(10px) scale(.94); }
  44%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes sc-a { 0%, 41% { opacity: 0; } 45%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes sc-b { 0%, 60% { opacity: 0; } 63%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes sc-nod { 0%, 37% { transform: translateY(0); } 41% { transform: translateY(-5px); } 46%, 100% { transform: translateY(0); } }
@keyframes sc-sway { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }

/* ---------------------------------------------------------------- pourquoi */
/* Bande compacte : trois chiffres lisibles d'un coup d'œil. */
.why { background: var(--cream-deep); border-block: 2px solid var(--ink); padding: clamp(18px, 2.4vw, 26px) 0; }
.why-band { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.why-title { flex: none; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.15; max-width: 7.5em; }
.stats { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.stat { display: flex; align-items: center; gap: .6rem; padding-left: clamp(10px, 1.6vw, 20px); border-left: 2px dashed rgba(58, 38, 32, .3); }
.stat-num { flex: none; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); -webkit-text-stroke: .02em currentColor; paint-order: stroke fill; }
.stat-text { font-size: .9rem; line-height: 1.35; }
.stat-text strong { font-weight: 800; color: var(--cacao); }
/* Bande des chiffres : titre au-dessus sous 1100 px, chiffres empilés sous 960 px. */
@media (max-width: 1100px) {
  .why-band { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .why-title { max-width: none; }
  .stats { width: 100%; }
  .stat:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 960px) {
  .stats { grid-template-columns: 1fr; gap: .7rem; }
  .stat { border-left: 0; padding: 0; }
  .stat-num { width: 3.1em; }
}

/* ---------------------------------------------------------------- sections */
.how, .who, .pricing, .faq { padding: var(--section-gap) 0; }
.how { padding-top: var(--top-gap); padding-bottom: var(--section-gap); }
/* Même écart entre la carte « Trois façons de compter » et « Pour qui » qu'entre les 3 gestes et cette carte. */
.who { padding-top: 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 40rem; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-lead { font-size: 1.15rem; margin: 1rem 0 0; max-width: 36em; }

/* ---------------------------------------------------------------- comment */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: step; position: relative; }
.step { position: relative; }
/* Illustrations des 3 gestes : cadre coloré + éléments découpés, téléphones inclinés qui débordent du cadre. */
.step-art { position: relative; aspect-ratio: 320 / 240; container-type: inline-size; }
.art-frame { position: absolute; inset: 10% 6.25% 6.67%; border-radius: 8.75cqw; background: #EADCC2; border: 2.5px solid var(--ink); }
.art-frame-2 { background: #E5DDEB; }
.art-frame-3 { background: #DDB69B; }
.art-img { position: absolute; height: auto; }
.art-phone-1 { left: 32%; top: 1%; width: 35.8%; transform: rotate(-4deg); }
.art-reader-2 { left: 44%; top: 30%; width: 50.4%; }
.art-phone-2 { left: 9%; top: 9%; width: 33.7%; transform: rotate(9deg); }
.art-phone-3 { left: 15%; top: 1%; width: 40.9%; transform: rotate(4deg); }
.art-cup-3 { left: 62%; top: 47%; width: 26.5%; }
.art-chip {
  position: absolute; z-index: 2;
  font: 900 4.1cqw/1 var(--font-display); color: var(--ink); white-space: nowrap;
  padding: .6em 1.05em; border-radius: 999px; background: #FFFBF3; border: 2px solid var(--ink);
}
.art-chip-accent { background: var(--accent); color: var(--on-accent); }
.step-num {
  width: 52px; height: 52px; margin: -26px 0 .9rem 1.25rem; position: relative;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cacao); color: var(--cream); border: 3px solid var(--cream);
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1;
}
.step h3 { margin-bottom: .5rem; }
.step p:last-child { margin: 0; max-width: 26em; }

.mechanics { margin-top: var(--section-gap); padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--paper); border: 2px solid var(--ink); }
.mechanics h3 { margin-bottom: 1.5rem; }
.mech-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.mech h4 { margin-bottom: .3rem; font-size: 1.3rem; }
.mech p { margin: 0; color: var(--cacao); }
.mech-visual { height: 56px; display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.mech-stamps .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed rgba(75, 52, 43, .4); }
.mech-stamps .dot.on {
  border: 0; background: var(--green);
  -webkit-mask: url("/img/logo/cachet-a17.svg") center / contain no-repeat; mask: url("/img/logo/cachet-a17.svg") center / contain no-repeat;
}
.chip-pts { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; background: var(--green); color: var(--cream); padding: .35rem .8rem; border-radius: 999px; }
.mech-eg { font-size: .9rem; color: var(--muted); }
.amount { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; padding: .3rem .7rem; border: 2px solid var(--cacao); border-radius: 10px; background: #fff; }
.mech-visual .ic { width: 1.4em; height: 1.4em; color: var(--muted); }
.mech-note { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 2px dashed var(--line); font-size: .95rem; color: var(--muted); }

/* ---------------------------------------------------------------- pour qui */
.who { background: linear-gradient(var(--cream), var(--cream)); }
.who-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.trade {
  position: relative; overflow: hidden;
  background-color: var(--panel);
  border-radius: var(--radius-lg); border: 2px solid var(--ink);
  padding: clamp(20px, 2.6vw, 32px);
}
.trade h3 { margin-bottom: .5rem; }
.trade-feature { grid-column: 1 / span 7; grid-row: span 2; min-height: 560px; display: flex; flex-direction: column; }
.trade-feature .trade-text { max-width: 22rem; }
.trade-feature .trade-text p { margin: 0; }
.trade-feature .lcard-big { margin-top: auto; width: min(64%, 360px); transform: rotate(-3deg); transform-origin: 0 100%; position: relative; z-index: 1; }
.char-patissiere { position: absolute; right: clamp(4px, 2vw, 28px); bottom: -6px; width: min(48%, 300px); z-index: 2; filter: drop-shadow(0 2px 0 rgba(58, 38, 32, .08)); }

.trade-coiffeur, .trade-fleuriste { grid-column: 8 / span 5; display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 0; min-height: 268px; }
.trade-coiffeur .trade-body, .trade-fleuriste .trade-body { flex: 1; align-self: center; padding-bottom: clamp(20px, 2.6vw, 32px); min-width: 0; }
.char-coiffeur { width: 128px; flex: none; margin-left: -6px; margin-bottom: -4px; }
.char-fleuriste { width: 108px; flex: none; margin-right: -4px; margin-bottom: -4px; }

/* Bande « Et beaucoup d'autres commerces » : texte + étiquettes à gauche, personnages debout à droite. */
.trade-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(20px, 3vw, 48px); padding-bottom: 0; }
.more-text { align-self: center; padding-bottom: clamp(20px, 2.6vw, 32px); max-width: 44rem; }
.more-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .5rem; }
.more-text p { margin: 0 0 1.1rem; max-width: 36em; }
.more-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.more-tags li { font-family: var(--font-display); font-weight: 800; font-size: .92rem; line-height: 1; padding: .5rem .85rem; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); }
.more-tags li:nth-child(-n+4) { background: var(--green); color: var(--cream); border-color: var(--green); }
.more-tags li.more-etc { background: transparent; border-style: dashed; border-color: rgba(58, 38, 32, .55); color: var(--muted); font-style: italic; }
.more-cast { display: flex; align-items: flex-end; margin-bottom: -4px; }
.more-cast img { height: clamp(150px, 15vw, 196px); width: auto; margin-left: -14px; }
.more-cast img:first-child { margin-left: 0; }
.more-cast img:nth-child(even) { height: clamp(140px, 14vw, 184px); }

.lcard {
  background: var(--card); color: #FFFBF3; border-radius: 16px; padding: 14px 16px 12px;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.lcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .8rem; }
.lcard-name { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; line-height: 1.15; }
.lcard-mech { font-family: var(--font-display); font-weight: 800; font-size: .74rem; background: rgba(255, 251, 243, .18); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.lcard-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 44px)); justify-content: start; gap: 8px; margin-bottom: .75rem; }
.lcard-big .lcard-slots { grid-template-columns: repeat(4, minmax(0, 56px)); }
.lcard-slots span { aspect-ratio: 1; border-radius: 50%; border: 1.6px dashed rgba(255, 251, 243, .55); display: grid; place-items: center; max-width: 44px; }
.lcard-slots span svg { width: 58%; height: 58%; fill: none; stroke: rgba(255, 251, 243, .5); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lcard-slots span.on { background: #FFFBF3; border: 0; }
.lcard-slots span.on svg { stroke: var(--card); stroke-width: 2.1; }
.lcard-big { padding: 18px 20px 16px; }
.lcard-big .lcard-name { font-size: 1.3rem; }
.lcard-big .lcard-slots { gap: 10px; }
.lcard-big .lcard-slots span { max-width: 56px; }
/* Tampons illustrés (pâtisserie) : l'image remplace la pastille ronde. */
.lcard-slots-img span { border: 0; background: none; }
.lcard-slots-img img { width: 100%; height: auto; display: block; }
.lcard-bar { height: 12px; border-radius: 999px; background: rgba(255, 251, 243, .22); overflow: hidden; margin-bottom: .75rem; }
.lcard-bar span { display: block; height: 100%; background: #FFFBF3; border-radius: inherit; }
.lcard:not(.lcard-big) .lcard-top { flex-direction: column-reverse; align-items: flex-start; gap: .35rem; }
.lcard-foot { font-size: .86rem; line-height: 1.4; margin: 0; }
.lcard-foot strong { font-family: var(--font-display); font-weight: 900; font-size: 1.05em; }

/* ---------------------------------------------------------------- commerçant */
.merchant { background: var(--cacao); color: var(--cream); padding: var(--section-gap) 0; position: relative; }
.merchant-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.merchant h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.merchant-lead { color: #EADFCB; font-size: 1.1rem; margin: .8rem 0 0; }
/* Fonctions numérotées : les mêmes numéros sont posés sur l'aperçu du tableau. */
.features { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.features li { display: flex; gap: .9rem; align-items: center; color: #E2D5BE; font-size: .98rem; line-height: 1.3; }
.features strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--cream); }
.mk {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 900 15px/1 var(--font-display);
  border: 2px solid #22160f; box-shadow: 0 2px 0 #22160f;
}
.has-mk { position: relative; }
.dash-window .mk { position: absolute; z-index: 2; width: 22px; height: 22px; font-size: 12px; top: -10px; right: -10px; box-shadow: none; }
.dash-title .mk { right: -28px; top: -4px; }
.st-reward .mk { top: -14px; right: -8px; }
.dash-side .mk { top: 50%; right: -23px; transform: translateY(-50%); }
/* Survol lié : une fonction à gauche et son repère dans l'aperçu s'allument ensemble. */
.mk { transition: scale .18s ease, background-color .18s ease, color .18s ease; }
.features li, .dash-window .has-mk { transition: color .18s ease, box-shadow .18s ease; }
[data-mk].is-hot .mk { scale: 1.22; background: var(--cream); color: var(--accent); }
.features li.is-hot strong { color: #F2B79A; }
.dash-window .has-mk.is-hot { box-shadow: 0 0 0 2px #FFFBF3, 0 0 0 4px var(--accent); border-radius: 9px; }
.dash-window .st-reward.is-hot { border-radius: 999px; }
.dash-title.is-hot { box-shadow: none; text-decoration: underline 2px var(--accent); text-underline-offset: 4px; }
.features li, .dash-window .has-mk { cursor: default; }
@media (prefers-reduced-motion: reduce) { [data-mk].is-hot .mk { scale: 1; } .mk { transition: none; } }

.dash { margin: 0; }
.dash-window { background: var(--paper); color: var(--cacao); border-radius: 18px; border: 3px solid #22160f; box-shadow: 8px 9px 0 #22160f; overflow: hidden; font-size: 13px; }
.dash-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #EFE5D2; border-bottom: 2px solid #E0D2B8; }
.dash-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D7C6A8; }
.dash-chrome span { margin-left: 10px; font-weight: 700; font-size: 12px; color: var(--muted); }
.dash-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); }
/* Menu latéral de l'aperçu (devient une rangée d'onglets sur mobile). */
.dash-side { padding: 16px 12px; border-right: 2px solid #EFE5D2; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.dash-side img { width: 92px; margin: 0 0 14px 6px; }
.dash-side > span { padding: 7px 10px; border-radius: 9px; color: var(--muted); white-space: nowrap; }
.dash-side > span.is-active { background: var(--cacao); color: var(--cream); }
.dash-side em { font-style: normal; font-size: 10px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 999px; margin-left: 2px; }
.dash-main { padding: 16px; min-width: 0; }
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-title { font-family: var(--font-display); font-weight: 900; font-size: 18px; }
.dash-search { border: 1.5px solid #E0D2B8; border-radius: 999px; padding: 5px 12px; color: #9A8576; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px 70px 78px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid transparent; }
.dash-list li.is-selected { border-color: var(--cacao); background: #F7EFE0; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--av); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 13px; }
.lv { font-size: 12px; color: #9A8576; white-space: nowrap; }
.nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg { height: 8px; border-radius: 999px; background: #EFE5D2; overflow: hidden; }
.pg span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.st { font-family: var(--font-display); font-weight: 900; text-align: right; font-size: 13px; }
.st-reward { font-size: 10.5px; white-space: nowrap; background: var(--coral); color: #fff; border-radius: 999px; padding: 3px 8px; text-align: center; }

/* ---------------------------------------------------------------- tarifs */
/* Trois formules compactes ; Pro au centre, mise en avant. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 1040px; margin-inline: auto; align-items: stretch; padding-top: 14px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 24px;
  padding: clamp(20px, 2.4vw, 28px);
}
.plan h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.price { margin: 0 0 .35rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.price .amount { all: unset; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.035em; }
.price .per { font-family: var(--font-display); font-weight: 800; font-size: .88rem; }
.plan-lead { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.plan-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; font-size: .93rem; line-height: 1.4; }
.plan-list li { display: flex; gap: .55rem; align-items: flex-start; }
.plan-list .ic { width: 1.15em; height: 1.15em; margin-top: .14em; color: var(--green); stroke-width: 2.6; }
/* Encadré « Plus de 4 établissements ? Sur devis » : bien visible, avec un lien vers le formulaire. */
.plan-extra {
  margin: -.4rem 0 1.2rem; padding: .6rem .8rem; border-radius: 14px;
  background: #F6E5DA; border: 2px dashed var(--accent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem;
  font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--cacao);
}
.plan-extra a { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.plan-extra a:hover { color: var(--cacao); }
.plan-extra a .ic { width: 1em; height: 1em; transition: transform .15s ease; }
.plan-extra a:hover .ic { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .plan-extra a .ic { transition: none; } .plan-extra a:hover .ic { transform: none; } }
.plan .btn { margin-top: auto; align-self: stretch; font-size: .98rem; padding: .75rem 1.2rem; }
.plan-pro { background: var(--cacao); color: var(--cream); box-shadow: var(--shadow-print); --focus: #F2B79A; transform: translateY(-10px); }
.plan-pro .plan-lead { color: #E2D5BE; }
.plan-pro .plan-list .ic { color: var(--accent-on-dark); }
.plan-pro .btn { box-shadow: 0 4px 0 #1d130e; }
.plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: .4rem .95rem; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: .85rem; letter-spacing: .01em;
}
.pricing-note { text-align: center; color: var(--muted); font-size: .92rem; margin: 1.75rem 0 0; }

/* ---------------------------------------------------------------- faq */
.faq { background: var(--cream-deep); border-top: 2px solid var(--ink); }
.faq { padding: var(--section-gap) 0; }
.faq-head { margin-bottom: clamp(28px, 3.5vw, 44px); max-width: none; }
/* Personnage à gauche, à la hauteur de la liste de questions (fermées). */
.faq-grid { display: grid; grid-template-columns: auto minmax(0, 760px); justify-content: center; gap: clamp(28px, 4vw, 64px); align-items: start; }
/* La fleuriste qui se pose une question, avec une bulle « ? » dessinée dans le site. */
.faq-thinker { position: relative; }
.faq-thinker img { height: 380px; width: auto; }
.q-bubble {
  position: absolute; top: -4%; left: 72%; z-index: 1;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--accent);
}
.q-bubble::after {
  content: ""; position: absolute; left: 4px; bottom: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .q-bubble { animation: q-float 3.2s ease-in-out infinite alternate; }
}
@keyframes q-float { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-6px) rotate(4deg); } }
.faq-list { display: grid; gap: 12px; }
.faq details { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; }
.faq details[open] { box-shadow: 4px 4px 0 var(--ink); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.1rem 1.3rem; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.3; border-radius: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cacao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EDDC' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 1.3rem 1.25rem; max-width: 40em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------------------------------------------------------------- démo */
.demo { background: var(--cacao); color: var(--cream); padding: var(--section-gap) 0; }
.demo:focus { outline: none; }
.demo-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.demo .section-lead { color: #EADFCB; }
.demo-mail { margin: 2rem 0 0; font-size: 1.02rem; color: #EADFCB; }
.demo-mail a { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--cream); text-decoration-color: var(--accent-on-dark); text-decoration-thickness: 2px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.street { margin-top: 2.5rem; max-width: 540px; border-bottom: 3px solid var(--accent-on-dark); padding: 0 6px; }
.street img { width: 100%; height: auto; margin-bottom: -3px; }

.form-card { background: var(--cream); color: var(--cacao); border-radius: var(--radius-lg); border: 3px solid #22160f; box-shadow: 8px 9px 0 #22160f; padding: clamp(22px, 3.2vw, 40px); --focus: #C4553D; }
.demo-form { display: grid; gap: .85rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 340px) { .form-row-keep { grid-template-columns: 1fr; } }
.field { display: grid; gap: .3rem; min-width: 0; }
.field label, .field legend { font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.optional { font-family: var(--font-body); font-weight: 600; color: var(--muted); font-size: .9rem; }
.field input, .field textarea {
  width: 100%; font: 500 1.02rem/1.4 var(--font-body); color: var(--cacao);
  background: var(--paper); border: 2px solid #B9A385; border-radius: 12px; padding: .55rem .85rem; min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:hover, .field textarea:hover { border-color: var(--cacao); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cacao); box-shadow: 0 0 0 3px rgba(196, 85, 61, .35); }
.field [aria-invalid="true"] { border-color: #A3341F; background: #FFF4EF; }
.field-error { margin: 0; font-size: .9rem; font-weight: 700; color: #A3341F; min-height: 0; }
.field-error:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; }
/* Offre envisagée : petites pastilles sur une ou deux lignes. */
.offers legend { margin-bottom: .35rem; }
.offer-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.offer { position: relative; cursor: pointer; }
.offer input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.offer span {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .92rem; line-height: 1;
  padding: .55rem .9rem; border: 2px solid #B9A385; border-radius: 999px; background: var(--paper);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.offer:hover span { border-color: var(--cacao); }
.offer input:checked + span { border-color: var(--cacao); background: var(--cacao); color: var(--cream); }
.offer input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Message facultatif replié derrière un lien. */
.msg-toggle summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--accent-strong); border-radius: 6px;
}
.msg-toggle summary::-webkit-details-marker { display: none; }
.msg-toggle summary::before { content: "+"; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid currentColor; font-size: .85em; line-height: 1; }
.msg-toggle[open] summary::before { content: "−"; }
.msg-toggle summary:hover { color: var(--cacao); }
.msg-toggle .field { margin-top: .6rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 12px; padding: .9rem 1rem; font-weight: 600; background: #FBE4DC; color: #7E2412; border: 2px solid #A3341F; }
.form-status a { font-weight: 800; }
.btn-submit { width: 100%; margin-top: .25rem; position: relative; }
.btn-submit .spinner { display: none; width: 1.1em; height: 1.1em; border-radius: 50%; border: 3px solid rgba(245, 237, 220, .35); border-top-color: var(--cream); animation: spin .8s linear infinite; }
.btn-submit[aria-busy="true"] .spinner { display: inline-block; }
.btn-submit[aria-busy="true"] { cursor: progress; opacity: .92; }
.btn-submit:disabled { transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-submit .spinner { animation-duration: 2.4s; } }
.form-privacy { font-size: .86rem; color: var(--muted); margin: 0; text-align: center; }

.form-success { text-align: center; padding: clamp(24px, 4vw, 48px) clamp(8px, 2vw, 24px); }
.form-success:focus { outline: none; }
.success-stamp { display: block; width: 96px; height: 96px; margin: 0 auto 1.25rem; color: var(--coral); transform: rotate(-10deg); }
.success-stamp svg { width: 100%; height: 100%; }
.form-success h3 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: .75rem; }
.form-success p { margin: 0 auto; max-width: 28em; }
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) .success-stamp { animation: stamp-in .5s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes stamp-in { from { transform: scale(1.8) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(-10deg); opacity: 1; } }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--cacao-deep); color: var(--cream); padding: 56px 0 28px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; padding-bottom: 32px; border-bottom: 1px solid rgba(245, 237, 220, .18); }
.footer-brand img { width: 190px; margin-bottom: 1rem; }
.footer-brand p { color: #E2D5BE; margin-bottom: .5rem; }
.footer-mail { font-family: var(--font-display); font-weight: 800; text-underline-offset: 4px; overflow-wrap: anywhere; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: .5rem 2.5rem; align-content: start; }
.footer-links a { font-family: var(--font-display); font-weight: 800; text-decoration: none; padding: .25rem 0; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { padding-top: 20px; font-size: .88rem; color: #CDBFA8; }
.footer-legal p { margin: 0; }
.footer-legal a, .form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .form-privacy a:hover { color: var(--cream, #fff); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .merchant-grid, .demo-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 18px; }
  .faq-thinker { justify-self: center; margin-right: 40px; }
  .faq-thinker img { height: 150px; }
  .q-bubble { width: 36px; height: 36px; font-size: 21px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .q-bubble::after { width: 9px; height: 9px; bottom: -5px; border-width: 2px; }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-feature { grid-column: 1 / -1; grid-row: auto; min-height: 500px; }
  .trade-coiffeur, .trade-fleuriste { grid-column: span 1; }
  .plans { grid-template-columns: 1fr; max-width: 440px; gap: 26px; }
  .plan-pro { transform: none; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .mech-list { grid-template-columns: 1fr; gap: 1.5rem; }
  .who-grid { grid-template-columns: 1fr; }
  .trade-feature { min-height: 0; }
  .trade-feature .lcard-big { width: 68%; margin-top: 1.5rem; }
  .char-patissiere { width: 42%; }
  .trade-coiffeur, .trade-fleuriste { grid-column: auto; }
  .trade-more { grid-template-columns: 1fr; }
  .more-text { padding-bottom: 1rem; }
  .more-cast { justify-content: center; }
  .more-cast img { height: 128px; margin-left: -10px; }
  .more-cast img:nth-child(even) { height: 120px; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 2px solid #EFE5D2; padding: 10px 12px; }
  .dash-side img { display: none; }
  .dash-side .mk { top: -10px; right: -10px; transform: none; }
  .dash-list li { grid-template-columns: 28px minmax(0, 1fr) 40px 78px; gap: 8px; }
  .dash-list .lv { display: none; }
  .dash-search { display: none; }
  .form-row:not(.form-row-keep) { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .s-queue { display: none; }
  .s-bubble { transform: scale(1.3); transform-origin: 0 100%; }
  .s-door { opacity: .7; }
  .trade-feature .lcard-big { width: 74%; }
  .char-patissiere { width: 40%; right: -4px; }
  .lcard-big .lcard-name { font-size: 1.1rem; }
  .faq summary { font-size: 1.04rem; padding: 1rem 1.1rem; }
  .faq details p { padding: 0 1.1rem 1.1rem; }
}


/* ==========================================================================
   Tablette et téléphone — ajustements dédiés (l'ordinateur n'est pas concerné)
   ========================================================================== */
.chip-pts, .amount { white-space: nowrap; }

/* ---------- Tablette en portrait (601–900 px) : hero sur deux niveaux ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-card { grid-template-columns: minmax(0, 1fr) minmax(0, min(430px, 60%)); align-items: end; }
  .hero-copy { display: contents; }
  .hero-title, .hero-sub, .hero-actions { grid-column: 1 / -1; margin-inline: 30px; }
  .hero-title { margin-top: 34px; font-size: clamp(2.2rem, calc((100cqw - 66px) / 11.8), 3.6rem); }
  .hero-sub { white-space: nowrap; text-wrap: nowrap; font-size: clamp(1.05rem, calc((100cqw - 66px) / 26.8), 1.6rem); }
  .hero-actions { margin-bottom: 4px; }
  .hero-actions .btn { font-size: .98rem; padding-inline: 1.1rem; }
  /* la réassurance occupe le mur libre, à gauche de la scène */
  .hero-checks { grid-column: 1; align-self: center; margin: 0 0 0 30px; padding-right: 14px; gap: .7rem; }
  .scene { grid-column: 2; }
}

/* ---------- Tablette (601–960 px) ---------- */
@media (min-width: 601px) and (max-width: 960px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 18px; }
  .step h3 { font-size: 1.12rem; }
  .step p { font-size: .94rem; }
  .mech-visual { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: .35rem; }
  .mech-visual { gap: .35rem; }
  .mech-visual .chip-pts, .mech-visual .amount { font-size: .95rem; padding: .3rem .6rem; }
  .mech-visual .ic { width: 1.1em; height: 1.1em; }
  .features { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
  .faq-grid { grid-template-columns: auto minmax(0, 1fr); gap: 28px; }
  .faq-thinker { justify-self: start; margin-right: 0; }
  .faq-thinker img { height: 300px; }
}

/* ---------- Tablette et téléphone : le formulaire juste après le titre ---------- */
@media (max-width: 960px) {
  .demo-grid { display: flex; flex-direction: column; gap: 0; }
  .demo-copy { display: contents; }
  .demo-copy .eyebrow { order: 1; align-self: flex-start; }
  .demo-copy h2 { order: 2; }
  .demo-copy .section-lead { order: 3; }
  .form-card { order: 4; margin-top: 1.75rem; }
  .demo-mail { order: 5; margin-top: 2.25rem; }
  .street { order: 6; margin-top: 1.25rem; width: 100%; }
}


/* ---------- Téléphone : retouches (menu, hero, chiffres, modes de comptage, tableau) ---------- */
/* Bouton du menu bien visible dans la barre */
@media (max-width: 940px) {
  .nav-toggle { background: rgba(75, 52, 43, .08); }
  .nav[data-theme="dark"] .nav-toggle { background: rgba(245, 237, 220, .1); border-color: rgba(245, 237, 220, .55); }
}

/* Les trois façons de compter, séparées par « ou » quand elles sont empilées */
@media (max-width: 760px) {
  .mech-list { gap: 0; }
  .mech + .mech { position: relative; margin-top: 1.4rem; padding-top: 1.7rem; border-top: 2px dashed var(--line); }
  .mech + .mech::before {
    content: "ou" / "";
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
    padding: .1rem .75rem; border-radius: 999px; border: 2px solid var(--line);
    background: var(--paper); color: var(--muted);
    font-family: var(--font-display); font-weight: 800; font-size: .85rem; line-height: 1.3;
  }
}

@media (max-width: 600px) {
  /* Hero : boutons plus discrets, le principal tient sur une ligne dès 425 px */
  .hero-actions { gap: .7rem; }
  .hero-actions .btn {
    font-size: clamp(.9rem, calc((100vw - 126px) / 20), 1rem);
    padding: .8rem .9rem; line-height: 1.2; text-wrap: balance;
  }


  /* Tableau commerçant : une ligne de moins */
  .dash-list .dash-extra { display: none; }
}

/* ---------- Tablette : retouches (rideau, chiffres, modes de comptage, tarifs) ---------- */
/* Rideau du hero : les deux cordons tombent sur le bouton « Voir comment ça marche » */
@media (min-width: 601px) and (max-width: 900px) {
  .s-noren, .s-cords { transform: translateX(-62px); }
}

@media (min-width: 601px) and (max-width: 960px) {
  /* Chiffres : trois cartes côte à côte */
  .why { padding: 22px 0 24px; }
  .why-band { gap: .8rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .stat {
    flex-direction: column; align-items: flex-start; gap: .35rem;
    padding: 14px 16px 16px; background: var(--paper);
    border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 3px 0 var(--ink);
  }
  .stat:first-child { border-left: 2px solid var(--ink); padding-left: 16px; }
  .stat-num { width: auto; font-size: 2.3rem; }
  .stat-text { font-size: .92rem; }

}

/* Trois façons de compter, en colonnes : séparées par un trait pointillé */
@media (min-width: 761px) and (max-width: 960px) {
  .mech-list { gap: 0; }
  .mech { padding-inline: 24px; }
  .mech:first-child { padding-left: 0; }
  .mech:last-child { padding-right: 0; }
  .mech + .mech { border-left: 2px dashed var(--line); }
}

/* ---------- Tout en défilement vertical : rien n'est caché sur le côté ---------- */
/* Tablette : les trois formules côte à côte, en plus serré */
@media (min-width: 601px) and (max-width: 960px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 12px; }
  .plan-pro { transform: none; }
  .plan { padding: 18px 16px; border-radius: 20px; }
  .plan h3 { font-size: 1.2rem; }
  .price .amount { font-size: 2rem; }
  .price .per { font-size: .8rem; }
  .plan-lead { font-size: .88rem; margin-bottom: .8rem; }
  .plan-list { font-size: .86rem; gap: .4rem; margin-bottom: 1.1rem; }
  .plan-extra { font-size: .82rem; padding: .5rem .6rem; }
  .plan .btn { font-size: .88rem; padding: .7rem .6rem; text-wrap: balance; }
  .plan-badge { font-size: .78rem; padding: .32rem .75rem; }
}

@media (max-width: 600px) {
  /* Étapes : illustration réduite à gauche, texte à droite */
  .steps { max-width: none; gap: 26px; }
  .step { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .step-art { grid-row: 1 / span 3; }
  .step-art .art-chip { display: none; }
  .step-num { width: 34px; height: 34px; margin: 4px 0 .45rem; border-width: 2px; font-size: 1.05rem; }
  .step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
  .step p { font-size: .9rem; line-height: 1.45; }

  /* Chiffres : trois cartes empilées, chiffre à gauche */
  .why { padding: 20px 0 22px; }
  .why-band { gap: .7rem; }
  .stats { gap: 10px; }
  .stat {
    flex-direction: row; align-items: center; gap: .85rem;
    padding: 12px 14px; background: var(--paper);
    border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink);
  }
  .stat:first-child { border-left: 2px solid var(--ink); padding-left: 14px; }
  .stat-num { width: 2.9em; font-size: 1.9rem; }
  .stat-text { font-size: .9rem; }
}