/* Fidé’iti Pro showcase, version 3 (handoff "vitrine-12", light cream theme): the single stylesheet
   of index.html and merci.html. Values are those of the handoff README (sections 3 to 7 and 9) and of
   the inline styles of its reference mockup, which ARE the specification, amended by the visas of
   sprint 77 (security-privacy V4, rgpd-counsel, ip-counsel IP-C1 to IP-C9).

   The file name carries the version: nothing sets Cache-Control on the showcase, so a returning
   visitor could keep the previous sheet under the new HTML; a new name cannot be served stale.

   Static by design, zero JavaScript (ADR 0027). The showcase CSP (deploy/Caddyfile, snippet
   csp_showcase) sets script-src 'none' and style-src 'self': no inline stylesheet, no inline style
   attribute, so every declaration lives here. Each scripted behaviour of the mockup has a CSS-only
   equivalent (README section 6):
   - contact drawer: the hidden checkbox #contact-toggle plus <label> triggers (unchanged mechanism);
   - mobile menu: :target on #menu, closed by any other anchor (#fermer is deliberately absent);
   - programme carousel: three radios plus a 15 s keyframe cycle that stops once one is checked;
   - hero entrance: keyframes on the translate property, which leaves transform to the rotations;
   - FAQ: native <details>, unfold animated by ::details-content where supported.
   The pointer parallax of the mockup is dropped (impossible without script). */

/* ---- Fonts (self-hosted, OFL; URLs relative to this sheet, served at /site-assets/styles-v3.css) ---- */
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Variable.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

/* ---- Design tokens: the light theme of the design system ([data-theme="light"] values), declared
   at the root because the site has no theme switch. ---- */
:root{
  --bg:#F3F0E8; --surface:#FBF9F3; --surface-2:#E9E5DB;
  --surface-strong:#141311; --on-surface-strong:#FFFFFF;
  --text:#1C1C1A; --text-muted:#5C594F; --text-faint:#8C887E;
  --primary:#1C1C1A; --on-primary:#F5F3EC;
  --accent:#15D6C3; --on-accent:#06231F;
  --accent-soft:#C8F4EF; --on-accent-soft:#06544C;
  --aqua:#2BE6D2; --toast-sub:#B8B4AA;
  --line:rgba(26,25,23,.12); --line-strong:rgba(26,25,23,.24);
  --focus:#0E8A7E;
  --elev-1:0 1px 2px rgba(17,19,22,.06),0 1px 1px rgba(17,19,22,.04);
  --elev-2:0 6px 0 -6px rgba(17,19,22,.10),0 12px 28px -16px rgba(17,19,22,.28);
  --elev-3:0 18px 36px -18px rgba(17,19,22,.30);
  --ease:cubic-bezier(.2,0,0,1);
  --font-display:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --font-text:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  /* Fractal grain (design-system texture.css), inline data URI: no request, allowed by img-src data: */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* P: the reference size of the hero scene, reused by the closing collage phone. */
  --P:clamp(230px,27vw,330px);
  color-scheme:light;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
/* No horizontal overflow at any width (README section 5): clip on the root and on the body, so the
   guard holds whether or not the engine propagates the body value to the viewport. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-height:100vh;overflow-x:clip;
  font-family:var(--font-text);font-size:16px;line-height:1.35;color:var(--text);
  background-color:var(--bg);
  background-image:radial-gradient(120% 80% at 50% -10%,rgba(26,25,23,.015),transparent 60%),
                   radial-gradient(140% 120% at 50% 120%,rgba(26,25,23,.05),transparent 55%);
  isolation:isolate;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Paper grain over the cream ground, under the content (main and footer sit at z-index 1). */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);background-size:140px 140px;opacity:.03;mix-blend-mode:overlay}
main,footer,.header-spacer{position:relative;z-index:1}
h1,h2,h3,h4,p{margin:0}
img{display:block;max-width:100%}
a{color:#1C1C1A;text-decoration:none}
a:hover{color:#0E8A7E}
section{scroll-margin-top:80px}
::selection{background:var(--accent);color:var(--on-accent)}
/* Global focus ring, fields included (README section 9.2: #15D6C3 is too light on cream). */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Visually hidden, still read by assistive tech (and still focusable for the radios). */
.vh,.sr-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}

/* ---- Shared section classes (aligned with the FAQ snippet: .sec, .wrap, .kicker, .h2) ---- */
.sec{padding-left:24px;padding-right:24px}
.wrap{max-width:1240px;margin:0 auto}
.kicker{margin:0 0 14px;font-family:var(--font-display);font-size:clamp(18px,1.8vw,24px);font-weight:600;
  letter-spacing:-.01em;color:var(--on-accent-soft)}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1;
  letter-spacing:-.03em;text-wrap:balance}

/* ---- Buttons. Every "Nous contacter" is a <label> of the drawer checkbox. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;
  font-family:inherit;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform 140ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--primary);color:var(--on-primary)}
.btn-sec{background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.btn-lg{min-height:56px;padding:0 28px;font-size:16px}
.btn-pri.btn-lg{box-shadow:var(--elev-2)}
.btn-menu{min-height:52px;padding:0 18px;font-size:17px}

/* ---- Fixed header ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transform:translateZ(0);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:rgba(243,240,232,.82);background:color-mix(in oklab,#F3F0E8 82%,transparent);
  border-bottom:1px solid var(--line)}
.header-row{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.header-spacer{height:69px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:30px;height:30px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.brand-name .pro{font-weight:500;color:var(--text-muted)}
.nav-desktop{display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:15px;font-weight:500;white-space:nowrap}
.nav-link{color:var(--text-muted)}
.nav-link:hover{color:var(--focus)}
.burger{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}
.burger:hover{color:var(--text)}
.burger svg{width:20px;height:20px}
/* Mobile menu, opened by :target (README section 6.2). It scrolls on its own on a short landscape
   screen rather than running off the bottom of the viewport. */
.m-menu{display:none;flex-direction:column;gap:6px;padding:8px 24px 20px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;
  max-height:calc(100vh - 69px);overflow-y:auto}
.m-link{padding:12px 0}
.m-menu .btn-sec{margin-top:8px}

/* ---- 01 Hero ---- */
.hero{position:relative;padding-top:72px;padding-bottom:0;text-align:center}
.hero-text{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-accent-soft);background:var(--accent-soft);padding:8px 14px;border-radius:999px}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:.98;
  letter-spacing:-.035em;text-wrap:balance}
.hero-lead{max-width:660px;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--text-muted);text-wrap:pretty}
.cta-group{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
/* Informative small print in --text-muted, never --text-faint (README section 9.1). */
.cta-note{font-size:14px;color:var(--text-muted)}
/* Wallet line in text only (ip-counsel IP-C1: no Apple or Google artwork without a licence). */
.wallets{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--text-muted)}
.wallet{white-space:nowrap}
.wallet-sep{width:1px;height:16px;background:var(--line-strong)}

/* The exploded counter: P = clamp(230px,27vw,330px) drives the whole scene. */
.hero-scene{position:relative;z-index:3;max-width:1240px;margin:56px auto 0;padding-bottom:72px;
  height:calc(var(--P) * 2.3);overflow:hidden;text-align:left;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
/* -68.4 % centres the PHONE, not the picture: the hand overflows to the right. */
.hero-phone{position:absolute;left:50%;top:0;width:calc(var(--P) / .47);transform:translateX(-68.4%);
  z-index:2;line-height:0}
.hero-phone img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(26,25,23,.35))}
.hero-col{position:absolute;top:36px;bottom:20%;z-index:3;display:flex;flex-direction:column;justify-content:space-between}
.hero-col-r{right:0;width:clamp(280px,27vw,360px);align-items:flex-end}
.hero-col-l{left:0;width:clamp(300px,27vw,360px);align-items:flex-start}

/* "Vos paliers" card */
.tiers{position:relative;z-index:1;width:clamp(240px,22vw,300px);transform:rotate(4deg);
  display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(26,25,23,.45)}
.tiers-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.tier-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.tier-pts{flex:none;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tier-gift{font-size:14px;color:var(--text-muted);text-align:right}

/* "+1" toasts (hero and client step 4) */
.toast{position:relative;z-index:1;margin-right:4%;width:clamp(220px,22vw,260px);transform:rotate(-3deg);
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;
  background:var(--surface-strong);color:var(--on-surface-strong);box-shadow:0 30px 60px -24px rgba(26,25,23,.55)}
.plus1{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
  background:var(--aqua);color:#06231F;font-family:var(--font-display);font-weight:700;font-size:15px}
.toast-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast-title{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.toast-sub{font-size:13px;color:var(--toast-sub);white-space:nowrap}

/* Notifications, after an iOS notification. The merchant icon is the partner's logo (PO decision
   2026-10-05, Q7 reversed). */
.notif{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;
  background:rgba(36,35,33,.96);color:#F4F2EA;
  box-shadow:0 24px 50px -20px rgba(26,25,23,.55),inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.notif-a{transform:rotate(5deg)}
.notif-b{transform:rotate(-4deg)}
.notif-c{transform:rotate(-3deg)}
.notif-icon{flex:none;width:44px;height:44px}
.notif-icon img{display:block;width:44px;height:44px;border-radius:11px;object-fit:cover;background:#fff}
.notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-family:-apple-system,'SF Pro Text',var(--font-text);line-height:1.3}
.notif-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.notif-name{font-weight:600;font-size:14px;white-space:nowrap}
.notif-time{font-size:12px;color:rgba(244,242,234,.55);white-space:nowrap}
.notif-text{font-size:13.5px;color:rgba(244,242,234,.92);text-wrap:pretty}
/* Every .qr-box needs an explicit width: a size container never takes the width of its content. */
.hero-qr{position:relative;margin-left:6%;width:clamp(150px,17vw,240px);transform:rotate(-6deg)}
.hero-qr .qr-sticker{box-shadow:0 30px 60px -24px rgba(26,25,23,.55)}

/* Entrance (README section 6.4): fade up from 28px, 700ms, delay 80ms + 70ms per rank in DOM order.
   translate, not transform, which already carries the centring and the rotations. */
@keyframes rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
.hero-obj{animation:rise 700ms var(--ease) both}
.rise-1{animation-delay:80ms}
.rise-2{animation-delay:150ms}
.rise-3{animation-delay:220ms}
.rise-4{animation-delay:290ms}
.rise-5{animation-delay:360ms}
.rise-6{animation-delay:430ms}
.rise-7{animation-delay:500ms}

/* ---- QR sticker (README section 4.13), three placements. The box gives the width (container
   query units); the sticker carries the grain like the design-system tk-app-bg surface. ---- */
.qr-box{container-type:inline-size}
.qr-sticker{position:relative;isolation:isolate;aspect-ratio:1;border-radius:9cqw;padding:8cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4cqw;
  background:#121211;color:#F4F2EA;box-shadow:var(--elev-3)}
.qr-sticker::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;opacity:.03;mix-blend-mode:overlay}
.qr-top,.qr-code,.qr-bottom{position:relative;z-index:1}
.qr-top{font-family:var(--font-display);font-weight:500;font-size:6cqw;letter-spacing:-.01em;line-height:1}
.qr-code{width:60cqw;height:60cqw}
.qr-code>img{width:100%;height:100%}
/* The logo disc covers 15 / 60 = 25 % of the code, inside the 27 % hole the generator carved. */
.qr-disc{position:absolute;left:50%;top:50%;width:15cqw;height:15cqw;transform:translate(-50%,-50%);border-radius:50%;
  background:#121211;display:flex;align-items:center;justify-content:center}
.qr-disc img{width:12cqw;height:12cqw}
.qr-bottom{font-family:var(--font-display);font-weight:500;font-size:6.2cqw;letter-spacing:-.02em;line-height:1.1;
  text-align:center;text-wrap:balance}

/* ---- Banners ("Promesse", "Habitués"): a section with aria-label, the text is a p ---- */
.band-dark{padding:88px 24px;background:var(--surface-strong);color:var(--on-surface-strong)}
.band-dark p{max-width:1000px;margin:0 auto;text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;line-height:1.05;text-wrap:balance}

/* ---- 02 Comment ça fonctionne ----
   The auto-fit grids use minmax(min(280px,100%),1fr) instead of minmax(280px,1fr): identical from
   328px up, and no 8px overflow of the 272px container at 320px (README section 5). */
.sec-fonct{padding-top:104px;padding-bottom:96px}
.fonct-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:32px;align-items:end}
.done{justify-self:start;display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:18px;
  background:var(--accent-soft);color:var(--on-accent-soft);font-weight:600;font-size:16px;line-height:1.35}
.done svg{flex:none}
.mcards{list-style:none;margin:64px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.mcard{display:flex;flex-direction:column;gap:24px;padding:32px;border-radius:28px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev-1)}
.mcard-head{display:flex;flex-direction:column;gap:12px}
.mcard h3{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.mcard-head p{font-size:16.5px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}
/* Number chip: ink, or aqua on the last step of each journey. */
.num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;
  background:var(--primary);color:var(--on-primary);font-family:var(--font-display);font-weight:700;font-size:15px}
.num-aqua{background:var(--accent);color:var(--on-accent)}
.panel{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:22px;border-radius:22px;background:var(--bg)}
.panel-fill{flex:1}
.p-label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* Step 1: the logo file and the card visual */
.visuals{width:min(100%,300px);display:flex;flex-direction:column;gap:12px}
.visuals .p-label-2{padding-top:6px}
.file-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--surface)}
.file-tile{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:#121211}
.file-tile img{width:26px;height:26px}
.file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.file-name{font-weight:600;font-size:14px}
.file-hint{font-size:12.5px;color:var(--text-muted)}
.card-visual{position:relative;width:100%;aspect-ratio:1140/720;border-radius:16px;overflow:hidden;box-shadow:var(--elev-2)}
.card-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Step 3: the sticker, unrotated */
.mcard-qr{width:min(100%,240px)}

/* Step 2: the programme carousel (README section 6.3). Radios first, no checked attribute in the
   HTML: while none is checked the slides cycle every 5 s; a click on an arrow or a dot checks one
   and freezes it. .prog is positioned so the visually hidden radios stay inside it: a focused radio
   never scrolls the page to its top. */
.prog{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.prog-slides{display:grid;width:min(100%,300px)}
.prog-slide{grid-area:1/1;display:flex;flex-direction:column;gap:14px;opacity:0;visibility:hidden}
.prog-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prog-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer}
.prog-title{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.prog-idx{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.prog-name{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
/* Fixed height: the card keeps its size from one example to the next. */
.prog-body{display:flex;flex-direction:column;height:372px;overflow:hidden;font-size:16px}
.prog-body .p-label{padding:16px 0 8px}
.prog-body .p-label:first-child{padding:0 0 8px}
.prog-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.prog-row-cumul{padding:9px 0}
.prog-k{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.prog-v{color:var(--text);text-align:right}
.prog-dots{display:flex;align-items:center;gap:6px}
.dot{display:block;width:6px;height:6px;border-radius:999px;background:rgba(26,25,23,.24);cursor:pointer;
  transition:width 240ms var(--ease),background-color 240ms var(--ease)}
@keyframes progCycle{0%,32%{opacity:1;visibility:visible}33.4%,100%{opacity:0;visibility:hidden}}
@keyframes dotCycle{0%,32%{width:22px;background-color:#1C1C1A}33.4%,100%{width:6px;background-color:rgba(26,25,23,.24)}}
.prog:not(:has(:checked)) .prog-slide{animation:progCycle 15s infinite}
.prog:not(:has(:checked)) .s2{animation-delay:-10s}
.prog:not(:has(:checked)) .s3{animation-delay:-5s}
.prog:not(:has(:checked)) .dot{animation:dotCycle 15s infinite}
.prog:not(:has(:checked)) .d2{animation-delay:-10s}
.prog:not(:has(:checked)) .d3{animation-delay:-5s}
.prog:has(#prog-1:checked) .s1,.prog:has(#prog-2:checked) .s2,.prog:has(#prog-3:checked) .s3{opacity:1;visibility:visible}
.prog:has(#prog-1:checked) .d1,.prog:has(#prog-2:checked) .d2,.prog:has(#prog-3:checked) .d3{width:22px;background-color:#1C1C1A}
.prog:has(.sr-radio:focus-visible) .prog-dots{outline:3px solid var(--focus);outline-offset:4px;border-radius:999px}
/* An engine without :has drops every rule above that names it, which would leave all three slides
   hidden: it shows example 1, still (visa security-privacy, signal 5). */
@supports not selector(:has(*)){
  .prog-slide.s1{opacity:1;visibility:visible}
  .prog-dots .d1{width:22px;background-color:#1C1C1A}
}

/* ---- 03 Pour vos clients ---- */
.sec-clients{padding-top:0;padding-bottom:104px}
.clients-head{max-width:760px}
.clients-head .h2{line-height:1.02;margin-bottom:22px}
.clients-lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--text);text-wrap:pretty}
.csteps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;align-items:start}
.cstep{display:flex;flex-direction:column;gap:18px}
.cstep-title{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.cstep-cap{align-self:center;max-width:300px;text-align:center;font-size:16px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}

/* Phone (README section 4.14, made generic by ip-counsel IP-C5): shell, radius and screen as the
   handoff, no camera cut-out at the top of the screen, a single side button. The box is the size
   container; the shell and the screen scale in cqw. */
.phone{position:relative;width:100%;max-width:300px;align-self:center;container-type:inline-size}
.phone-shell{position:relative;width:100%;padding:3.5cqw;border-radius:16.4cqw;
  background:linear-gradient(155deg,#4A4846 0%,#232220 35%,#2C2B29 70%,#403E3B 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #141413,
             0 40px 90px -30px rgba(26,25,23,.5),0 12px 30px -12px rgba(26,25,23,.35)}
.phone-ring .phone-shell{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #141413,
             0 0 0 6px var(--accent-soft),0 40px 90px -30px rgba(26,25,23,.5)}
.pbtn{position:absolute;right:-1.6cqw;top:26%;width:1.6cqw;height:10%;border-radius:0 2px 2px 0;background:#2A2927}
.phone-screen{position:relative;width:100%;border-radius:13cqw;background:#000;overflow:hidden;line-height:0}
.phone-screen>picture>img{width:100%;height:auto}

/* Client step 1, drawn screen: the camera viewfinder over the sticker QR. Square boxes use
   aspect-ratio rather than a percentage height, which WebKit long resolved to auto against an
   aspect-ratio parent. */
.screen-scan{aspect-ratio:1320/2868;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9cqw;
  line-height:1.35;background:radial-gradient(120% 80% at 50% 40%,#3A3835 0%,#15140F 70%)}
.vf{position:relative;width:62%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.vf-c{position:absolute;width:18%;aspect-ratio:1;border:0 solid var(--aqua)}
.vf-tl{left:0;top:0;border-left-width:1.4cqw;border-top-width:1.4cqw;border-top-left-radius:3cqw}
.vf-tr{right:0;top:0;border-right-width:1.4cqw;border-top-width:1.4cqw;border-top-right-radius:3cqw}
.vf-bl{left:0;bottom:0;border-left-width:1.4cqw;border-bottom-width:1.4cqw;border-bottom-left-radius:3cqw}
.vf-br{right:0;bottom:0;border-right-width:1.4cqw;border-bottom-width:1.4cqw;border-bottom-right-radius:3cqw}
.vf-tile{width:78%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:3cqw;
  background:#121211;transform:rotate(-4deg);box-shadow:0 6cqw 10cqw -4cqw rgba(0,0,0,.6)}
.vf-qr{position:relative;width:76%;aspect-ratio:1}
.vf-qr>img{width:100%;height:100%}
/* 24 % of the CODE box (.vf-qr), as in the mockup, not of the tile: inside the 27 % hole. */
.vf-disc{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:#121211;display:flex;align-items:center;justify-content:center}
.vf-disc img{width:80%;height:80%}
.scan-pill{display:inline-flex;align-items:center;gap:2cqw;padding:3.2cqw 5cqw;border-radius:999px;
  background:#F4F2EA;color:#1C1C1A;font-weight:600;font-size:4cqw;line-height:1;white-space:nowrap}

/* Client step 4: the toast laid over the phone. */
.phone-toast{position:absolute;right:-6%;top:38%;z-index:1;width:min(230px,80%);transform:rotate(-3deg);
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;text-align:left;line-height:1.35;
  background:var(--surface-strong);color:var(--on-surface-strong);box-shadow:var(--elev-3)}
.phone-toast .plus1{width:32px;height:32px;font-size:14px}
.phone-toast .toast-txt{gap:1px}
.phone-toast .toast-title{font-size:15px}
.phone-toast .toast-sub{font-size:12.5px;white-space:normal}

.encart{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 48px;
  align-items:center;padding:32px;border-radius:28px;background:var(--surface);border:1px solid var(--line)}
.encart-big{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1;
  letter-spacing:-.04em;text-wrap:balance}
/* The title is a p too: :not() keeps this rule (one class plus one type, which outranks .encart-big)
   off it, so the title keeps its display size, its ink and its balance. */
.encart p:not(.encart-big){font-size:17px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}

/* ---- 04 Bénéfices: a ruled register ---- */
.sec-benef{padding-top:96px;padding-bottom:96px;border-top:1px solid var(--line)}
.benef-wrap{display:flex;flex-direction:column;gap:56px}
.benef-head{max-width:820px}
.ledger{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.ledger-row{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);gap:12px 32px;align-items:baseline;
  padding:30px 0;border-top:1px solid var(--line)}
.idx{min-width:28px;font-size:13px;font-weight:600;color:var(--text-faint);font-variant-numeric:tabular-nums}
.ledger-row h3{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;
  line-height:1.1;text-wrap:balance}
.ledger-row p{font-size:17px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}

/* ---- 05 FAQ (snippets/faq.css of the handoff, integrated as is; the only change is the min()
   guard of the head grid, see section 02) ----
   Full-width ruled index in three themed groups; the answer unfolds under its
   question. The default disclosure marker is removed in both engines and
   replaced by the +/x button inside each <summary>. The unfold is animated where
   ::details-content and interpolate-size exist (Chromium 131+); elsewhere the
   answer opens instantly, the native behaviour. */
.sec-faq{padding-top:104px;padding-bottom:96px}
.faq-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px 64px;align-items:end;margin-bottom:56px}
.faq-head .sec-head{display:flex;flex-direction:column;gap:14px}
.faq-head .kicker{margin:0}
.faq-more{margin:0;max-width:420px;font-size:17px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}
.lnk{font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lnk:hover{color:#0E8A7E}
.faq{display:flex;flex-direction:column;gap:48px;interpolate-size:allow-keywords}
.faq-group{border-bottom:1px solid var(--line)}
.faq-group-title{margin:0 0 14px;padding-left:88px;font-family:var(--font-text);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.qa{border-top:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;column-gap:40px;
  padding:26px 0;cursor:pointer;list-style:none;color:var(--text)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.q-idx{font-size:13px;font-weight:600;color:var(--text-faint);font-variant-numeric:tabular-nums}
.q-txt{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.2vw,29px);line-height:1.14;
  letter-spacing:-.02em;text-wrap:balance}
.qa-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;
  border-radius:999px;border:1px solid var(--line-strong);color:var(--text);
  transition:background-color 180ms var(--ease),color 180ms var(--ease)}
.qa-ico{display:block;transition:transform 180ms var(--ease)}
.qa[open] .qa-btn{background:var(--text);color:var(--bg)}
.qa[open] .qa-ico{transform:rotate(45deg)}
.qa::details-content{block-size:0;overflow:hidden;
  transition:block-size 260ms var(--ease),content-visibility 260ms var(--ease) allow-discrete}
.qa[open]::details-content{block-size:auto}
.qa-body{display:flex;flex-direction:column;gap:10px;max-width:728px;padding:0 0 30px 88px;
  opacity:0;transition:opacity 200ms var(--ease)}
.qa[open] .qa-body{opacity:1}
.qa-body p{margin:0;font-size:17px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}

/* ---- 06 Appel à l'action + decorative collage ---- */
.sec-cta{position:relative;padding-top:112px;padding-bottom:0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.cta-text{max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.h2-cta{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5.4vw,72px);line-height:.98;
  letter-spacing:-.035em;text-wrap:balance}
.cta-sub{font-size:19px;line-height:1.45;color:var(--text-muted)}
.collage{position:relative;max-width:1240px;height:clamp(280px,34vw,420px);margin:64px auto 0}
.collage-phone{position:absolute;left:50%;top:0;z-index:2;width:var(--P);max-width:none;transform:translateX(-50%)}
.collage-phone .phone-shell{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #141413,
             0 40px 90px -30px rgba(26,25,23,.45)}
.collage-qr{position:absolute;left:50%;top:8%;z-index:1;width:clamp(150px,17vw,230px);transform:translateX(-150%) rotate(-9deg)}
.collage-card{position:absolute;left:50%;top:6%;z-index:1;width:clamp(130px,16vw,220px);height:auto;border-radius:16px;
  box-shadow:var(--elev-2);transform:translateX(30%) rotate(9deg)}
.collage-card-dark{top:34%;width:clamp(110px,13vw,180px);border-radius:14px;transform:translateX(70%) rotate(5deg)}
.collage-fade{position:absolute;left:0;right:0;bottom:0;z-index:4;height:45%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#F3F0E8)}

/* ---- Footer. "Mentions légales" and "Confidentialité" stay visible at every width (second link of
   the three-link GDPR chain). ---- */
.site-footer{padding:40px 24px 48px;border-top:1px solid var(--line)}
.foot-row{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:8px}
.foot-mark{display:flex;align-items:center;gap:10px}
.foot-mark img{width:26px;height:26px}
.foot-name{font-family:var(--font-display);font-weight:700;font-size:17px}
.foot-copy{font-size:14px;color:var(--text-muted)}
/* Trademark credits (ip-counsel IP-C3). The measure caps the column, so the legal links keep their
   place beside it on a wide screen. */
.credits{max-width:62ch;font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.legal{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px;font-weight:500}
.legal a{color:var(--text-muted)}
.legal a:hover{color:var(--focus)}

/* ---- Contact drawer: CSS-only disclosure (mechanism of the previous version, new skin) ----
   The checkbox is the single keyboard control (Space toggles it); the labels are the pointer
   targets. It sits right after the header, so it comes after the header links in the tab order;
   position:fixed keeps a focus from scrolling the page. Its focus ring is painted on the labels.
   The overlay is a direct child of body: inside the header, whose backdrop-filter makes it the
   containing block of fixed descendants, the drawer would be 69px tall. */
.toggle{position:fixed;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body:has(.toggle:not(:checked):focus-visible) .btn-contact,
body:has(.toggle:not(:checked):focus-visible) .lnk,
body:has(.toggle:checked:focus-visible) .close{outline:3px solid var(--focus);outline-offset:3px}
.overlay{position:fixed;inset:0;z-index:100;display:none;justify-content:flex-end}
.toggle:checked ~ .overlay{display:flex}
.scrim{position:absolute;inset:0;background:rgba(20,19,17,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}
/* The panel keeps the DOM order of the previous version (close label, title, subtitle, form); a
   two-column grid puts the close button on the right of the title block. */
.drawer{position:relative;width:min(520px,100%);height:100%;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:16px;align-content:start;
  padding:28px 28px calc(28px + env(safe-area-inset-bottom));
  background:var(--bg);color:var(--text);box-shadow:-30px 0 80px -40px rgba(26,25,23,.5)}
.close{grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--text);cursor:pointer}
.drawer h2{grid-column:1;grid-row:1;font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.03em;line-height:1}
.drawer .sub{grid-column:1;grid-row:2;margin-top:8px;font-size:16px;color:var(--text-muted)}

/* ---- Contact form (plain POST, no JavaScript) ---- */
.contact-form{grid-column:1 / -1;grid-row:3;margin-top:22px;display:flex;flex-direction:column;gap:16px}
.contact-form label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form textarea{
  display:block;width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--surface);font:400 16px var(--font-text);color:var(--text)}
/* Four lines of message: 4 x 16px x 1.45 + 24px of padding + 2px of border. */
.contact-form textarea{min-height:119px;padding:12px 14px;line-height:1.45;resize:vertical}
.contact-form ::placeholder{color:#8C887E;opacity:1}
/* Optional markers and help lines: weight 400, --text-muted (README section 9.1). .opt sits inside a
   bold label, so it resets the weight it inherits. */
.contact-form .opt{font-weight:400;color:var(--text-muted)}
.contact-form .aide{margin-top:6px;font-size:13px;font-weight:400;color:var(--text-muted)}
/* The data protection line under the button (visa C1) is a direct item of the form column. */
.contact-form>.aide{margin-top:0}
.contact-form .aide a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* Request type. min-width:0 keeps the fieldset from taking its intrinsic width. */
.choice{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.choice legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:600}
/* label.opt-row, not .opt-row alone: .contact-form label is one class plus one type, so it would
   otherwise win and restore display:block and the bold. */
.contact-form label.opt-row{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 14px;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:15px;font-weight:400;cursor:pointer}
.opt-row input[type="radio"]{flex:none;width:18px;height:18px;margin:0;accent-color:#15D6C3}
/* TAHITI number: present only for an account request. No JavaScript, the form reacts to the state
   of the radio button through :has(). */
.champ-tahiti{display:none}
.contact-form:has(#rt-compte:checked) .champ-tahiti{display:block}
/* Submit: full width, 54px, primary ink, no icon (README section 4.11). */
.btn-send{width:100%;min-height:54px;padding:0 28px;font-size:16px;background:var(--primary);color:var(--on-primary)}
/* Scroll lock while the sheet is open: :has() reaches the root from the checkbox. */
html:has(#contact-toggle:checked){overflow:hidden}
/* Web3Forms honeypot: off screen, never focused */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Confirmation page (merci.html) ---- */
.thanks{min-height:100vh;min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:18px;
  padding:32px 24px;text-align:center}
.thanks img{width:72px;height:72px}
.thanks h1{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,48px);letter-spacing:-.03em;line-height:1.05}
.thanks .lead{max-width:34ch;font-size:17px;line-height:1.45;color:var(--text-muted)}

/* ---- Responsive (README section 5). Source order is load-bearing: wide first. ---- */
@media (max-width:1240px){
  .csteps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
}
@media (max-width:1100px){
  .nav-desktop{display:none}
  .burger{display:inline-flex}
  .m-menu:target{display:flex}
  header:has(.m-menu:target) .burger:not(.burger-close){display:none}
  .burger-close{display:none}
  header:has(.m-menu:target) .burger-close{display:inline-flex}
}
@media (max-width:860px){
  .faq-group-title{padding-left:42px}
  .qa summary{grid-template-columns:28px minmax(0,1fr) 44px;column-gap:14px;padding:20px 0}
  .qa-body{padding:0 0 24px 42px}
  .ledger-row{grid-template-columns:auto minmax(0,1fr)}
  .ledger-row p{grid-column:1 / -1}
  .drawer{width:100%}
  /* Touch target of 34px for the footer links: 18px line plus 8px above and below. */
  .legal a{display:inline-block;padding:8px 0;line-height:18px}
}
@media (max-width:720px){
  .hero-scene{height:480px;margin-top:40px}
  .hero-phone{width:calc(180px / .47)}
  .hero-col{top:28px;bottom:14%}
  .hero-col-l{width:230px;left:-2%}
  .hero-col-r{width:220px;right:-2%}
  .hero-qr{width:120px;margin-left:0}
  .tiers{width:170px}
  .toast{width:168px;margin-right:0}
  .notif-c{display:none}
  .cstep .phone{max-width:220px}
}
@media (max-width:560px){
  .csteps{grid-template-columns:minmax(0,1fr)}
}

/* ---- Reduced motion: every animation and transition is cut; the carousel freezes on example 1. ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-obj{animation:none}
  .btn,.dot{transition:none}
  .prog:not(:has(:checked)) .prog-slide,.prog:not(:has(:checked)) .dot{animation:none}
  .prog:not(:has(:checked)) .s1{opacity:1;visibility:visible}
  .prog:not(:has(:checked)) .d1{width:22px;background-color:#1C1C1A}
  .qa-btn,.qa-ico,.qa-body{transition:none}
  /* Own rule: an engine without ::details-content drops a whole selector list that names it. */
  .qa::details-content{transition:none}
}