/* MAHSEN GEN Z — feuille de style (v19, refonte complète ; v26 : tabac à la place du vert acide). Noir, blanc cassé, tabac ; Sillage en corail. */
@font-face { font-family: 'Unbounded'; src: url(/assets/fonts/unbounded-latin.woff2) format('woff2'); font-weight: 500 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Darija : Lalezar pour les titres, Cairo pour le texte (chargées seulement si la page contient de l'arabe) */
@font-face { font-family: 'Lalezar'; src: url(/assets/fonts/lalezar-arabic.woff2) format('woff2'); font-weight: 400 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; src: url(/assets/fonts/cairo-arabic.woff2) format('woff2'); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --ink: #0b0b0c; --ink-2: #151517; --ink-3: #1f1f23; --line-d: #2c2c32;
  --paper: #f4f2ec; --paper-2: #e8e4d9; --white: #ffffff; --line: #d6d1c4;
  --text: #0b0b0c; --text-2: #4a4a52; --text-d: #f1f1f3; --text-d2: #a9a9b3;
  --volt: #b07d4a; /* tabac (ex-vert acide #d4ff3a, demande de Yacine le 30/10) */ --coral: #ff5c39; --lilac: #b9a6ff; --sky: #8fd3ff;
  --accent: var(--volt); --accent-soft: rgba(176, 125, 74, .16); --on-accent: #0b0b0c;
  --r: 22px; --r-sm: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: 'Unbounded', 'Lalezar', system-ui, sans-serif;
  --sans: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --top-h: 64px;
  --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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.page-sillage { --accent: var(--coral); --accent-soft: rgba(255, 92, 57, .16); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 56px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .top :focus-visible, .foot :focus-visible, .quicknav :focus-visible { outline-color: var(--accent); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.dark { position: relative; isolation: isolate; background: var(--ink); color: var(--text-d); }
.dark::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }

/* ---------- Typographie ---------- */
.h1, .h2, h3 { font-family: var(--display); text-wrap: balance; }
.h1 { margin: 18px 0 16px; font-size: clamp(38px, 6.6vw, 82px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; }
.h2 { margin: 0 0 16px; font-size: clamp(30px, 4.6vw, 58px); font-weight: 900; line-height: 1.03; letter-spacing: -.02em; }
.h2.xl { font-size: clamp(36px, 6vw, 76px); }
/* Surlignage en bande : il ne déborde pas sur la ligne du dessus */
.hl { padding: 0 .12em; background: linear-gradient(var(--accent), var(--accent)) 0 72% / 100% 84% no-repeat; color: var(--on-accent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.kicker::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 3px; background: var(--accent); rotate: 45deg; }
.dark .kicker { color: var(--text-d2); }
.dark .kicker::before { border-color: var(--accent); }
.sub { margin: 0; max-width: 40em; font-size: clamp(16px, 1.35vw, 18px); color: var(--text-2); }
.dark .sub { color: var(--text-d2); }
.big { margin: 0 0 14px; font: 700 clamp(20px, 2.2vw, 28px)/1.3 var(--display); letter-spacing: -.01em; }
.sec { position: relative; padding: clamp(68px, 9vw, 124px) 0; }
.sec-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sub { margin-inline: auto; }

/* ---------- Boutons : à-plat vif, bordure franche, ombre décalée qui s'enfonce à l'appui ---------- */
.btn { --sh: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 22px; border: 2px solid var(--ink); border-radius: 14px; background: var(--accent); color: var(--on-accent); font: 800 15.5px/1.15 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 0 var(--sh); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s; }
.dark .btn, .top .btn, .sticky-cta .btn { --sh: var(--text-d); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--sh); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--sh); transition-duration: .06s; }
.btn svg { width: 18px; height: 18px; flex: none; stroke-width: 2.6; transition: translate .2s var(--ease); }
.btn:hover svg { translate: 3px 0; }
html[dir="rtl"] .btn svg { scale: -1 1; }
html[dir="rtl"] .btn:hover svg { translate: -3px 0; }
.btn-xl { padding: 16px 24px; border-radius: 16px; font-size: 17px; }
.btn-sm { padding: 9px 14px; border-radius: 11px; font-size: 14px; box-shadow: none; }
.btn-sm:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.btn-block { display: flex; width: 100%; }
.btn-txt { display: grid; gap: 4px; text-align: start; }
.btn-txt small { font: 600 12px/1.1 var(--sans); opacity: .72; }
.btn-ink { background: var(--ink); color: var(--accent); --sh: var(--white); }
.btn-soft { background: var(--white); color: var(--ink); }
.btn-wa { background: #25d366; color: #0b0b0c; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.loading { pointer-events: none; }
.btn.loading svg { display: none; }
.btn.loading::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(11, 11, 12, .25); border-top-color: currentColor; animation: spin .7s linear infinite; }
.btn-ghost { display: inline-flex; align-items: center; gap: 12px; padding: 6px 2px; border: 0; background: none; color: inherit; font: 700 15px/1.2 var(--sans); cursor: pointer; }
.ghost-ico { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--text-d); color: var(--ink); transition: scale .25s var(--ease), background .25s; }
.ghost-ico svg { width: 18px; height: 18px; margin-inline-start: 3px; }
.ghost-ico::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: ring 2.4s var(--ease) infinite; }
.btn-ghost:hover .ghost-ico { scale: 1.08; background: var(--accent); }
.btn-ghost:hover { color: var(--accent); }

/* ---------- En-tête ---------- */
.scrollbar { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.scrollbar i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
html[dir="rtl"] .scrollbar i { transform-origin: 100% 50%; }
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: var(--top-h); padding: 0 max(16px, calc((100vw - 1240px) / 2)); background: rgba(11, 11, 12, .9); color: var(--text-d); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.scrolled { border-bottom-color: var(--line-d); }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; color: inherit; text-decoration: none; white-space: nowrap; }
.wm { font: 900 18px/1 var(--display); letter-spacing: .01em; }
/* Logo et badge tournant en lettres latines : toujours de gauche à droite, même en darija */
.brand { direction: ltr; }
.wm-tag { padding: 5px 7px 4px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font: 800 10.5px/1 var(--display); letter-spacing: .04em; rotate: -5deg; }
.top-nav { display: none; gap: 24px; }
.top-nav a { color: var(--text-d2); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color .2s; }
.top-nav a:hover { color: var(--text-d); }
.top-nav .top-alt { color: var(--accent); }
.lang { display: flex; padding: 3px; border: 1px solid var(--line-d); border-radius: 999px; }
.lang a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; color: var(--text-d2); font: 700 13px/1 var(--sans); text-decoration: none; }
.lang a[aria-current] { background: var(--text-d); color: var(--ink); }
@media (min-width: 980px) { .top-nav { display: flex; } }
@media (max-width: 430px) { .top > .btn-sm { display: none; } .wm { font-size: 16px; } }

/* Raccourcis de sections (téléphone) */
.quicknav { position: fixed; inset: var(--top-h) 0 auto; z-index: 49; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; background: rgba(11, 11, 12, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-d); scrollbar-width: none; opacity: 0; translate: 0 -110%; pointer-events: none; transition: opacity .25s, translate .3s var(--ease); }
.quicknav::-webkit-scrollbar { display: none; }
.quicknav.show { opacity: 1; translate: none; pointer-events: auto; }
.quicknav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-d); border-radius: 999px; color: var(--text-d2); font: 600 13.5px/1 var(--sans); text-decoration: none; }
.quicknav a.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (min-width: 980px) { .quicknav { display: none; } }

/* ---------- Héros ---------- */
.hero { overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 clamp(84px, 9vw, 120px); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(42% 52% at 82% 22%, var(--accent-soft), transparent 70%), radial-gradient(38% 46% at 6% 96%, rgba(185, 166, 255, .14), transparent 70%); }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 56px; min-height: min(720px, calc(100svh - var(--top-h) - 110px)); } }
.pill { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px; border: 1px solid var(--line-d); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text-d2); font: 600 12.5px/1.3 var(--sans); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: blink 2s ease-in-out infinite; }
.hero .h1 { color: var(--white); }
.hero-rot { margin: 0 0 18px; font: 700 clamp(19px, 2.2vw, 27px)/1.3 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.rot { display: inline-block; }
/* Le mot qui change peut faire passer la ligne sur deux lignes : la place est réservée pour que rien ne bouge */
@media (max-width: 600px), (min-width: 980px) and (max-width: 1120px) { .hero-rot { min-height: 2.6em; } }
.rot b { display: inline-block; color: var(--accent); }
.rot b.out { animation: rot-out .3s var(--ease) forwards; }
.rot b.in { animation: rot-in .4s var(--ease); }
.lead { margin: 0; max-width: 36em; color: var(--text-d2); font-size: clamp(16px, 1.4vw, 18.5px); }
.lead strong { color: var(--white); font-weight: 700; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 28px 0 22px; }
.social-proof { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-d2); font-size: 14px; }
.social-proof b { color: var(--white); }
.pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84; animation: ping 2s ease-out infinite; }
.hero-visual { position: relative; justify-self: center; width: min(300px, 70vw); margin: 10px 0; }
.phone { margin: 0; rotate: 3deg; }
.stk { position: absolute; z-index: 3; padding: 9px 14px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--ink); font: 800 13px/1 var(--display); white-space: nowrap; box-shadow: 3px 3px 0 0 var(--ink); animation: float 5s ease-in-out infinite; }
.stk-1 { top: 9%; inset-inline-start: -22%; rotate: -8deg; }
.stk-2 { top: 48%; inset-inline-end: -20%; background: var(--white); rotate: 6deg; animation-delay: -1.6s; }
.stk-3 { bottom: 10%; inset-inline-start: -14%; background: var(--lilac); rotate: -4deg; animation-delay: -3.2s; }
.page-sillage .stk-2 { background: var(--volt); }
@media (max-width: 600px) { .stk-1 { inset-inline-start: -12%; } .stk-2 { inset-inline-end: -10%; } .stk-3 { inset-inline-start: -8%; } }
.spin { position: absolute; z-index: 4; top: -38px; inset-inline-end: -42px; width: 124px; height: 124px; animation: spin 20s linear infinite; }
.spin-bg { fill: var(--ink); stroke: var(--accent); stroke-width: 2; }
.spin-txt { fill: var(--accent); stroke: none; font: 800 15.5px var(--display); letter-spacing: .12em; }
.spin-star { color: var(--accent); }
@media (max-width: 600px) { .spin { width: 96px; height: 96px; top: -26px; inset-inline-end: -18px; } }

/* ---------- Bandes qui défilent ---------- */
.tape { position: relative; z-index: 5; margin: -46px 0 -14px; padding: 18px 0 28px; overflow: hidden; pointer-events: none; }
.tape-row { display: flex; overflow: hidden; border-block: 2px solid var(--ink); pointer-events: auto; }
.tape-a { margin-inline: -20px; background: var(--accent); color: var(--on-accent); rotate: -2deg; }
.tape-b { position: relative; z-index: -1; margin: -8px -20px 0; background: var(--ink); color: var(--paper); border-color: var(--paper); rotate: 1.4deg; }
.tape-track { flex: none; display: flex; align-items: center; margin: 0; padding: 13px 0; list-style: none; animation: marquee 34s linear infinite; }
.tape-b .tape-track { animation-duration: 42s; animation-direction: reverse; }
.tape-track li { display: flex; align-items: center; padding-inline: 18px 0; font: 800 clamp(15px, 1.7vw, 21px)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.tape-track li::after { content: '✦'; padding-inline-start: 18px; font-size: .8em; }
.tape-track .you { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tape-row:hover .tape-track { animation-play-state: paused; }
html[dir="rtl"] .tape-track { animation-name: marquee-rtl; }
html[dir="rtl"] .tape-track li { text-transform: none; }

/* ---------- Le concept / le coach ---------- */
.concept-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .concept-grid { grid-template-columns: 1.15fr .85fr; gap: 72px; } }
.ticks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ticks svg { flex: none; width: 34px; height: 34px; padding: 7px; border: 2px solid var(--ink); border-radius: 10px; background: var(--accent); color: var(--ink); stroke-width: 2.4; }
.ticks-2 { max-width: 920px; margin: 48px auto 0; }
@media (min-width: 760px) { .ticks-2 { grid-template-columns: 1fr 1fr; gap: 16px 28px; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.stat { display: grid; align-content: start; gap: 6px; padding: 18px 16px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--white); box-shadow: 4px 4px 0 0 var(--ink); }
.stat b { font: 900 clamp(26px, 3.4vw, 44px)/1 var(--display); letter-spacing: -.02em; }
.stat span { color: var(--text-2); font-size: 13.5px; line-height: 1.35; }
.stat:nth-child(2) { background: var(--accent); }
@media (max-width: 480px) { .stat { padding: 14px 12px; } .stat span { font-size: 13.5px; } }
.concept-video { justify-self: center; width: min(340px, 78vw); margin: 0; }
.concept-video .vslot { rotate: -2.5deg; }
.concept-video figcaption, .st-phone figcaption { display: grid; gap: 2px; margin-top: 18px; text-align: center; }
.concept-video figcaption b { font: 800 17px/1.2 var(--display); }
.concept-video figcaption span { color: var(--text-2); font-size: 14px; }

/* ---------- Emplacements vidéo ---------- */
.vslot { position: relative; display: block; margin: 0; overflow: hidden; background: #111; }
.vslot > img, .vslot > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vslot-phone { aspect-ratio: 9 / 16; border: 8px solid #000; border-radius: 34px; box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .85), 0 0 0 2px var(--ink-3); }
.concept-video .vslot-phone > img { object-position: 78% 50%; }
.vslot-card { aspect-ratio: 9 / 16; border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 5px 5px 0 0 var(--ink); }
.dark .vslot-card { border-color: var(--text-d); box-shadow: 5px 5px 0 0 var(--text-d); }
.vslot.has-preview > video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.vslot.has-preview.rolling > video { opacity: 1; }
.vslot.has-play { cursor: pointer; }
.vslot.has-play::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5)); pointer-events: none; }
.vplay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; width: 68px; height: 68px; margin: auto; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 0 var(--ink); transition: scale .2s var(--ease); }
.vplay svg { width: 24px; height: 24px; margin-inline-start: 3px; fill: currentColor; stroke: none; }
.vplay::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ring 2.4s var(--ease) infinite; }
.vslot.has-preview .vplay { inset: auto 0 16px; width: 56px; height: 56px; }
.vslot.has-preview .vplay svg { width: 20px; height: 20px; }
@media (hover: hover) { .vslot.has-play:hover .vplay { scale: 1.08; } }
.vplay:active { scale: .94; }
.vslot-apercu { outline: 3px dashed var(--coral); outline-offset: 5px; }
.vslot-label { position: absolute; inset-inline: 8px; bottom: 8px; z-index: 6; padding: 8px 10px; border: 2px dashed var(--coral); border-radius: 10px; background: rgba(11, 11, 12, .9); color: #fff; font: 600 12px/1.35 var(--sans); }
/* Couvertures des vidéos à tourner : à-plat de couleur et titre, en attendant le tournage */
.cover { display: grid; align-content: end; padding: 20px 18px; background: var(--c, var(--accent)); color: var(--ink); }
.cover-t { position: relative; z-index: 1; font: 900 clamp(19px, 1.9vw, 25px)/1.08 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.soon { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; padding: 6px 10px 5px; border: 2px solid currentColor; border-radius: 999px; font: 800 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.vslot.has-video .soon { display: none; }
.cover::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .14; mix-blend-mode: multiply; }
.c-volt { --c: var(--volt); }
.c-ink { --c: var(--ink); color: var(--volt); }
.c-coral { --c: var(--coral); }
.c-paper { --c: var(--white); }
.c-sky { --c: var(--sky); }
.c-lilac { --c: var(--lilac); }
.reel { margin: 0; list-style: none; }
.reel-cap { display: grid; gap: 3px; margin: 16px 2px 0; }
.reel-cap b { font: 800 16.5px/1.2 var(--display); letter-spacing: -.01em; }
.reel-cap span { color: var(--text-2); font-size: 13.5px; }
.dark .reel-cap span { color: var(--text-d2); }

/* ---------- Parcours (tuiles) ---------- */
.bento { display: grid; gap: 16px; }
@media (min-width: 980px) { .bento { grid-template-columns: 1fr 300px; align-items: stretch; } }
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } .steps > .t-0 { grid-column: 1 / -1; } }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 172px; padding: 22px; overflow: hidden; border: 1px solid var(--line-d); border-radius: var(--r); background: var(--ink-2); transition: transform .3s var(--ease), border-color .3s; }
.tile:hover { transform: translateY(-4px); border-color: var(--accent); }
.tile .n { position: absolute; top: 12px; inset-inline-end: 18px; font: 900 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .24); }
.tile h3 { margin: 10px 0 6px; color: var(--white); font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.15; }
.tile p { margin: 0; color: var(--text-d2); font-size: 15px; }
.tile .tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 9px 5px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--text-d); font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tile .tag svg { width: 13px; height: 13px; }
.tile.t-0 { border: 2px solid var(--ink); background: var(--accent); }
.tile.t-0 h3, .tile.t-0 p, .tile.t-0 .tag { color: var(--ink); }
.tile.t-0 .tag { background: rgba(11, 11, 12, .1); }
.tile.t-0 .n { -webkit-text-stroke-color: rgba(11, 11, 12, .3); }
.bento-video { display: flex; flex-direction: column; }
.bento-video .vslot { width: min(300px, 100%); margin-inline: auto; }
@media (max-width: 979px) { .bento-video { width: min(250px, 64vw); margin: 22px auto 0; } }
/* Version claire des étapes (page Sillage) */
.steps-light .tile { border: 2px solid var(--ink); background: var(--white); box-shadow: 4px 4px 0 0 var(--ink); }
.steps-light .tile h3 { color: var(--ink); }
.steps-light .tile p { color: var(--text-2); }
.steps-light .tile .tag { background: var(--paper-2); color: var(--ink); }
.steps-light .tile .n { -webkit-text-stroke-color: rgba(11, 11, 12, .2); }
.steps-light .tile.t-0 { background: var(--accent); }
.steps-light .tile.t-0 p { color: var(--ink); }
/* 5 étapes sur ordinateur : 3 puis 2, sans trou */
@media (min-width: 980px) { .steps-light { grid-template-columns: repeat(6, 1fr); } .steps-light > * { grid-column: span 2; } .steps-light > .t-0 { grid-column: span 2; } .steps-light > :nth-child(4), .steps-light > :nth-child(5) { grid-column: span 3; } }
/* Agents (page Sillage) */
.agents { display: grid; gap: 14px; }
@media (min-width: 900px) { .agents { grid-template-columns: repeat(3, 1fr); } }
.agents .tile { justify-content: flex-start; min-height: 0; }
.vico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 13px; background: var(--accent); color: var(--ink); }
.vico svg { width: 22px; height: 22px; stroke-width: 2.2; }
.agents .tile.t-0 .vico { background: var(--ink); color: var(--accent); }

/* ---------- Mur de vidéos ---------- */
.vwall, .reel-wall { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.vwall { grid-template-columns: repeat(5, 1fr); }
.reel-wall { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-inline: auto; gap: 30px; }
.reel-wall .reel:nth-child(2) { margin-top: 30px; }
.reel-wall .reel-cap { text-align: center; }
@media (hover: hover) { .vwall .reel:hover .vslot { translate: -3px -3px; box-shadow: 8px 8px 0 0 var(--ink); } }
.vwall .vslot { transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.videos { background: var(--paper-2); }
.reels { background: var(--paper); }

/* Carrousels au doigt (téléphone et tablette) */
@media (max-width: 979px) {
  .snap { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; gap: 16px; margin-inline: -16px; padding: 4px 16px 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { scroll-snap-align: start; }
  .vwall.snap, .reel-wall.snap { grid-auto-columns: min(66%, 280px); }
  .reel-wall .reel:nth-child(2) { margin-top: 0; }
  .agents.snap { grid-auto-columns: 80%; }
}
.snap-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.snap-dots:empty { display: none; }
.snap-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .3s var(--ease), background .3s; }
.snap-dots i.on { width: 24px; background: var(--ink); }
.dark .snap-dots i { background: var(--line-d); }
.dark .snap-dots i.on { background: var(--accent); }
@media (min-width: 980px) { .snap-dots { display: none; } }

/* ---------- Pour qui ---------- */
.qgrid { display: grid; gap: 18px; }
@media (min-width: 860px) { .qgrid { grid-template-columns: 1.15fr .85fr; } }
.qcol { padding: clamp(22px, 3vw, 34px); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 0 var(--ink); }
.qyes { background: var(--accent); }
.qno { background: var(--ink); color: var(--text-d); box-shadow: 6px 6px 0 0 var(--accent); }
.qtitle { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 900 clamp(20px, 2.2vw, 26px)/1.1 var(--display); }
.qtitle svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--ink); color: var(--accent); stroke-width: 3; }
.qno .qtitle svg { background: var(--coral); color: var(--ink); }
.qcol ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qcol li { position: relative; padding-inline-start: 26px; font-size: 16px; font-weight: 500; }
.qcol li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); rotate: 45deg; }
.qno li { color: var(--text-d2); }
.qno li::before { background: var(--coral); }

/* ---------- Équipe ---------- */
.equipe { background: var(--paper-2); }
.page-sillage .concept, .page-sillage .qualif { background: var(--paper-2); }
.equipe-grid { display: grid; gap: 52px; align-items: center; }
@media (min-width: 900px) { .equipe-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }
.polaroid { position: relative; justify-self: center; width: min(360px, 80vw); margin: 0; padding: 14px 14px 60px; border: 2px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 10px 10px 0 0 var(--ink); rotate: -3deg; }
.polaroid::before { content: ''; position: absolute; top: -16px; left: 50%; width: 120px; height: 32px; translate: -50% 0; rotate: 4deg; background: rgba(176, 125, 74, .75); border: 1px solid rgba(11, 11, 12, .15); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 1px solid rgba(11, 11, 12, .12); }
.polaroid figcaption { position: absolute; inset-inline: 0; bottom: 16px; text-align: center; font: 800 18px/1 var(--display); }
.stk-ig { top: 22px; inset-inline-end: -26px; background: var(--coral); rotate: 9deg; }
.facts { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.facts svg { flex: none; width: 34px; height: 34px; padding: 7px; margin-top: -4px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); }
.ig-row { margin: 24px 0 0; }
.ig-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 3px 3px 0 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.ig-link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--ink); }
.ig-link svg { width: 18px; height: 18px; }

/* ---------- Sillage (encart) ---------- */
.sillage-teaser { --accent: var(--coral); --accent-soft: rgba(255, 92, 57, .16); --on-accent: #0b0b0c; }
.st-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .st-grid { grid-template-columns: 1.2fr .8fr; } }
.st-copy .btn { margin-top: 28px; }
.st-phone { justify-self: center; width: min(300px, 74vw); margin: 0; }
.st-phone .vslot { rotate: 2.5deg; }
.st-phone figcaption { color: var(--text-d2); font-size: 14px; }

/* ---------- Questions : fil de discussion ---------- */
.faq { background: var(--paper); }
.chat { display: grid; gap: 22px; max-width: 780px; margin: 0 auto; }
.qa { display: grid; gap: 8px; margin: 0; }
.qa dt { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 20px; border-end-end-radius: 6px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 15.5px; }
.qa dd { position: relative; justify-self: start; max-width: 88%; margin: 0; margin-inline-start: 48px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 20px; border-end-start-radius: 6px; background: var(--white); font-size: 15.5px; box-shadow: 3px 3px 0 0 var(--ink); }
.qa dd::before { content: ''; position: absolute; bottom: -2px; inset-inline-start: -50px; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink-3) url(/assets/img/avatar-yacine.webp) 50% 50% / cover; }

/* ---------- Appel final ---------- */
.final { overflow: hidden; background: var(--accent); color: var(--ink); }
.final::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
.final .hl { background-image: linear-gradient(var(--ink), var(--ink)); color: var(--accent); }
.final .kicker, .final .sub { color: var(--ink); }
.final .kicker::before { background: var(--ink); }
.final-grid { position: relative; display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 1.25fr .75fr; } }
.final-gets { display: grid; gap: 10px; margin: 24px 0 30px; padding: 0; list-style: none; font-weight: 600; }
.final-gets li { display: flex; align-items: center; gap: 10px; }
.final-gets svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ink); color: var(--accent); stroke-width: 3; }
.final .social-proof { margin-top: 22px; color: var(--ink); }
.final .social-proof b { color: var(--ink); }
.trust-mini { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; font-weight: 600; }
.trust-mini svg { flex: none; width: 16px; height: 16px; }
.trust-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; }
.trust-links a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.final-photo { justify-self: center; width: min(440px, 86vw); margin-bottom: calc(-1 * clamp(68px, 9vw, 124px)); }
.final-photo img { width: 100%; height: auto; filter: drop-shadow(10px 10px 0 rgba(11, 11, 12, .9)); }

/* ---------- Pied de page ---------- */
.foot { padding: 52px 0 calc(110px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--text-d2); font-size: 14px; }
@media (min-width: 980px) { .foot { padding-bottom: 52px; } }
.foot-inner { display: grid; gap: 26px; }
@media (min-width: 860px) { .foot-inner { grid-template-columns: 1.4fr 1fr auto; align-items: start; } }
.foot .brand { color: var(--text-d); }
.foot-brand p { margin: 14px 0 0; }
.foot a { color: var(--text-d); }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-links svg { width: 16px; height: 16px; }
.foot-copy { margin: 0; }

/* Barre d'appel (téléphone) */
.sticky-cta { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; translate: 0 150%; transition: translate .35s var(--ease); }
.sticky-cta.show { translate: none; }
.sticky-cta .btn { padding: 15px 20px; border-color: var(--ink); }
.sticky-sub { margin-inline-start: -4px; font-size: 12.5px; font-weight: 600; opacity: .75; }
@media (min-width: 980px) { .sticky-cta { display: none; } }

/* ---------- Apparitions ---------- */
.reveal-js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal-js .reveal.in { opacity: 1; translate: none; }
.reveal-js .hero .reveal { opacity: 1; translate: none; transition: none; animation: rise .6s var(--ease) both; }
.hero .reveal:nth-child(2) { animation-delay: .05s; }
.hero .reveal:nth-child(3) { animation-delay: .1s; }
.hero .reveal:nth-child(4) { animation-delay: .15s; }
.hero .reveal:nth-child(5) { animation-delay: .2s; }
.hero .reveal:nth-child(6) { animation-delay: .25s; }
.hero-visual { animation: pop-in .9s var(--ease) both; }

/* ---------- Lecteur plein écran ---------- */
.vbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.vbox[open] { display: grid; place-items: center; }
.vbox::backdrop { background: rgba(11, 11, 12, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vbox-video { display: block; width: min(92vw, calc(86vh * 9 / 16)); width: min(92vw, calc(86dvh * 9 / 16)); aspect-ratio: 9 / 16; border: 2px solid var(--accent); border-radius: 20px; background: #000; box-shadow: 8px 8px 0 0 var(--accent); }
.vbox[open] .vbox-video { animation: pop .4s var(--ease) both; }
.vbox-close { position: fixed; top: max(16px, env(safe-area-inset-top)); inset-inline-end: 16px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 0 var(--white); transition: rotate .25s var(--ease); }
.vbox-close svg { width: 20px; height: 20px; stroke-width: 2.6; }
.vbox-close:hover { rotate: 90deg; }

/* ---------- Inscription : fenêtre en étapes ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; align-items: end; }
@media (min-width: 640px) { .sheet { place-items: center; } }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(11, 11, 12, .65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s ease; }
.sheet-panel { position: relative; width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); border: 2px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--paper); color: var(--ink); animation: sheet-up .38s var(--ease); }
.sheet-panel:focus { outline: none; }
@media (min-width: 640px) { .sheet-panel { width: min(520px, calc(100% - 32px)); max-height: min(780px, 90dvh); border-bottom: 2px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 0 var(--accent); } }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 0 12px; background: var(--paper); }
.progress { flex: 1; height: 9px; overflow: hidden; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); }
.progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .45s var(--ease); }
.step-count { margin: 0; color: var(--text-2); font: 700 12px/1 var(--mono); white-space: nowrap; }
.icon-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
html[dir="rtl"] [data-back] svg { scale: -1 1; }
.icon-btn.solid { background: var(--ink); color: var(--accent); }
.pane { padding-top: 4px; animation: pane-in .35s var(--ease); }
.pane.back { animation-name: pane-back; }
.pane-title { margin: 8px 0 6px; font: 900 clamp(22px, 5.4vw, 28px)/1.15 var(--display); letter-spacing: -.01em; }
.pane-sub { margin: 0 0 16px; color: var(--text-2); }
.choices { display: grid; gap: 10px; margin: 16px 0; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); color: var(--ink); text-align: start; cursor: pointer; transition: translate .12s, box-shadow .12s, background .15s; }
.choice:hover { translate: -1px -1px; box-shadow: 3px 3px 0 0 var(--ink); }
.choice > svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--paper-2); stroke-width: 2.2; }
.choice > span { flex: 1; display: grid; gap: 2px; }
.choice b { font-size: 15.5px; font-weight: 700; }
.choice small { color: var(--text-2); font-size: 13px; }
.choice.on, .choice[aria-pressed="true"] { background: var(--accent); box-shadow: 3px 3px 0 0 var(--ink); }
.choice.on > svg, .choice[aria-pressed="true"] > svg { background: var(--ink); color: var(--accent); }
.choice.on small, .choice[aria-pressed="true"] small { color: #2b1d10; }
.tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-inline-start: auto; border: 2px solid var(--ink); border-radius: 7px; background: var(--white); }
.tick svg { width: 14px; height: 14px; opacity: 0; stroke: var(--accent); stroke-width: 3.4; }
.choice[aria-pressed="true"] .tick { background: var(--ink); }
.choice[aria-pressed="true"] .tick svg { opacity: 1; }
.choices.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .choice { width: auto; padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; }
.form { margin: 0; }
.field { display: grid; gap: 6px; margin: 12px 0 0; }
.field > span { font-size: 14px; font-weight: 700; }
.field em { margin-inline-start: 4px; color: var(--text-2); font-style: normal; font-weight: 500; }
input, select { width: 100%; min-width: 0; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; }
input:focus, select:focus { outline: none; box-shadow: 4px 4px 0 0 var(--accent), 0 0 0 1px var(--ink); }
input[aria-invalid="true"] { border-color: #c4261a; }
select { -webkit-appearance: none; appearance: none; padding-inline-end: 34px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
html[dir="rtl"] select { background-position: left 10px center; }
.phone-row { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--ink); }
.consent a { color: var(--ink); font-weight: 600; }
.err { margin: 6px 0 0; color: #b42318; font-size: 13.5px; font-weight: 600; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn-block, .pane > .btn-block { margin-top: 18px; }
.fine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: var(--text-2); font-size: 13.5px; }
.fine svg { flex: none; width: 15px; height: 15px; }
.pane-center { text-align: center; }
.badge-rank { display: grid; place-items: center; width: 66px; height: 66px; margin: 8px auto 10px; border: 2px solid var(--ink); border-radius: 18px; background: var(--accent); box-shadow: 4px 4px 0 0 var(--ink); rotate: -6deg; }
.badge-rank svg { width: 34px; height: 34px; }
.rank-line { margin: 4px 0 8px; font-size: 16px; }
.rank { padding: 2px 8px; border-radius: 8px; background: var(--ink); color: var(--accent); font: 900 17px/1.4 var(--display); }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px; border: 0; background: none; color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ghost-btn svg { width: 18px; height: 18px; }
.boost { margin: 18px 0 6px; padding: 18px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); text-align: start; box-shadow: 4px 4px 0 0 var(--ink); }
.boost-title { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 17px/1.2 var(--display); }
.boost-title svg { width: 20px; height: 20px; }
.boost-sub { margin: 6px 0 12px; color: var(--text-2); font-size: 14.5px; }
.ref-box { display: flex; gap: 8px; }
.ref-box input { padding: 10px 12px; font-size: 14px; }
.share-row { display: grid; gap: 8px; margin-top: 10px; }
.share-row .btn { box-shadow: 3px 3px 0 0 var(--ink); }

/* Petit message, confettis, accord des traceurs */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 250; padding: 12px 18px; border: 2px solid var(--accent); border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 14.5px; opacity: 0; translate: -50% 20px; pointer-events: none; transition: opacity .25s, translate .3s var(--ease); }
.toast.show { opacity: 1; translate: -50% 0; }
.confetti { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; pointer-events: none; }
.consent-bar { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 12px; max-width: 560px; margin-inline: auto; padding: 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 4px 4px 0 0 var(--ink); font-size: 14px; }
.consent-bar p { margin: 0; }
.consent-bar div { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Pages simples (confidentialité, mentions, désinscription, 404) ---------- */
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(16px, calc((100vw - 780px) / 2)); background: var(--ink); color: var(--text-d); }
.doc-top .ghost { padding: 8px 14px; border: 1px solid var(--line-d); border-radius: 999px; color: var(--text-d); font-size: 14px; font-weight: 600; text-decoration: none; }
.doc-top .ghost:hover { border-color: var(--accent); color: var(--accent); }
.doc { width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 44px 0 84px; }
.doc h1 { margin: 0 0 8px; font: 900 clamp(30px, 6vw, 50px)/1.05 var(--display); letter-spacing: -.02em; }
.doc h2 { margin: 36px 0 10px; font: 800 clamp(18px, 2.4vw, 22px)/1.2 var(--display); }
.doc p, .doc li { font-size: 16px; }
.doc ul { padding-inline-start: 22px; }
.doc li { margin: 4px 0; }
.doc a { color: var(--ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc .updated { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }
.doc .box { margin: 24px 0; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 18px; background: var(--accent); box-shadow: 4px 4px 0 0 var(--ink); }
.doc .box p { margin: 0; }
.doc .btn { margin-top: 10px; }
.doc-404 { padding-top: 12vh; text-align: center; }
.doc .num404 { margin: 0 0 18px; font: 900 clamp(96px, 24vw, 210px)/1 var(--display); letter-spacing: -.04em; color: var(--accent); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink); }
.center { text-align: center; }

/* ---------- Darija (droite à gauche) : pas d'espacement entre les lettres, lignes plus hautes ---------- */
html[dir="rtl"] :is(.h1, .h2, h3, .big, .hero-rot, .pane-title, .wm, .cover-t, .reel-cap b, .qtitle, .boost-title, .tape-track li, .stat b, .kicker, .soon, .tile .tag, .step-count) { letter-spacing: 0; }
html[dir="rtl"] .h1 { line-height: 1.32; font-size: clamp(36px, 6.2vw, 76px); }
html[dir="rtl"] .h2 { line-height: 1.3; }
html[dir="rtl"] .hl { padding: 0 .16em .04em; }
html[dir="rtl"] :is(.big, .hero-rot, .cover-t, .pane-title) { line-height: 1.45; }
html[dir="rtl"] .kicker, html[dir="rtl"] .soon, html[dir="rtl"] .tile .tag, html[dir="rtl"] .step-count { font-family: var(--sans); font-size: 13px; }

/* ---------- Animations ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes ring { from { scale: 1; opacity: .9; } to { scale: 1.6; opacity: 0; } }
@keyframes ping { from { scale: 1; opacity: .7; } to { scale: 2.6; opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes marquee-rtl { to { transform: translateX(100%); } }
@keyframes rise { from { opacity: .001; translate: 0 18px; } }
@keyframes pop { from { opacity: 0; scale: .92; } }
@keyframes pop-in { from { scale: .94; } }
@keyframes rot-out { to { opacity: 0; translate: 0 -.4em; } }
@keyframes rot-in { from { opacity: 0; translate: 0 .4em; } }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-up { from { translate: 0 40px; opacity: 0; } }
@keyframes pane-in { from { opacity: 0; translate: 24px 0; } }
@keyframes pane-back { from { opacity: 0; translate: -24px 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tape-row { flex-wrap: wrap; }
  .tape-track { flex-wrap: wrap; }
  .tape-track[aria-hidden], .tape-b { display: none; }
  .reveal-js .reveal { opacity: 1; translate: none; }
}

/* ===================== v20 · plateforme gratuite : 4 parcours, communauté, entraide (29/10/2026) ===================== */
:root { --miel: #ffb22e; --din: #0f4f40; --din-2: #ece3cc; }
.h1-xl { font-size: clamp(46px, 7.2vw, 96px); line-height: .98; }
html[dir="rtl"] .h1-xl { font-size: clamp(54px, 9vw, 120px); line-height: 1.2; }
@media (min-width: 980px) { .hero-v20 .hero-grid { grid-template-columns: 1.05fr .95fr; } }
/* Héros : trois vidéos de Yacine en éventail */
.tri { position: relative; display: flex; justify-content: center; align-items: center; padding: 34px 0 26px; }
.tri .vslot-phone { flex: none; width: 31%; max-width: 200px; border-width: 6px; border-radius: 24px; }
.tri .tri-2 { width: 37%; max-width: 240px; z-index: 2; }
.tri-1 { z-index: 1; rotate: -7deg; margin-inline-end: -7%; }
.tri-3 { z-index: 1; rotate: 7deg; margin-inline-start: -7%; }
.tri .stk { z-index: 4; }
.tri .stk-1 { top: 2%; inset-inline-start: 2%; }
.tri .stk-2 { top: 48%; inset-inline-end: 0; }
.tri .stk-3 { bottom: 0; inset-inline-start: 12%; }
/* Les 4 parcours */
.sectors { display: grid; gap: 20px; }
@media (min-width: 900px) { .sectors { grid-template-columns: 1fr 1fr; } }
.sector { --c: var(--volt); position: relative; display: grid; grid-template-columns: 1fr 40%; min-height: 320px; overflow: hidden; border: 2px solid var(--ink); border-radius: 26px; background: var(--c); color: var(--ink); box-shadow: 6px 6px 0 0 var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) { .sector:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--ink); } }
.sector-txt { position: relative; display: flex; flex-direction: column; padding: 24px; }
.sector-tag { align-self: flex-start; margin: 0 0 16px; padding: 6px 10px 5px; border: 2px solid currentColor; border-radius: 999px; font: 800 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sector h3 { margin: 0 0 10px; font-size: clamp(24px, 2.5vw, 33px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.sector p { margin: 0; font-size: 15.5px; }
.sector .sector-meta { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 700; opacity: .8; }
.sector-media { height: 100%; border-inline-start: 2px solid var(--ink); }
.s-ia { --c: var(--volt); }
.s-sport { --c: var(--coral); }
.s-food { --c: var(--miel); }
/* Islam : registre posé, sans autocollant, motif géométrique discret */
.s-din { --c: var(--din); color: var(--din-2); }
.s-din .sector-txt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ece3cc' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M28 6l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px; }
.s-din .sector-tag { border-color: rgba(236, 227, 204, .55); }
.s-din h3 { color: #fff8e8; }
.food-art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #fff3d6 0 34%, transparent 35%), #f39c12; }
.food-ico { width: 64px; height: 64px; color: var(--ink); stroke-width: 1.6; }
.dish { position: absolute; padding: 7px 11px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); font: 800 12px/1 var(--display); box-shadow: 2px 2px 0 0 var(--ink); }
.d1 { top: 14%; inset-inline-start: 8%; rotate: -8deg; }
.d2 { top: 30%; inset-inline-end: 6%; rotate: 6deg; }
.d3 { bottom: 26%; inset-inline-start: 6%; rotate: 5deg; }
.d4 { bottom: 10%; inset-inline-end: 10%; rotate: -5deg; background: var(--volt); }
@media (max-width: 640px) {
  .sector { grid-template-columns: 1fr; min-height: 0; }
  .sector-media { order: -1; height: 210px; border-inline-start: 0; border-bottom: 2px solid var(--ink); }
  .sector-media > img, .sector-media > video { object-position: 50% 35%; }
}
/* Le mot de Yacine */
.quote-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1.3fr .7fr; } }
.h2.quote { font-size: clamp(32px, 4.4vw, 60px); }
.quote-video { justify-self: center; width: min(300px, 74vw); margin: 0; }
.quote-video .vslot { rotate: 2deg; }
.quote-video figcaption { display: grid; gap: 2px; margin-top: 18px; text-align: center; }
.quote-video figcaption b { font: 800 17px/1.2 var(--display); color: var(--white); }
.quote-video figcaption span { color: var(--text-d2); font-size: 14px; }
.quote-sec .ig-link { background: transparent; color: var(--text-d); border-color: var(--text-d); box-shadow: 3px 3px 0 0 var(--accent); }
/* Communauté */
.community-sec { background: var(--paper-2); }
.events { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .events { grid-template-columns: repeat(3, 1fr); } }
.event { padding: 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); box-shadow: 5px 5px 0 0 var(--ink); }
.event-day { display: inline-block; margin: 0 0 14px; padding: 6px 10px 5px; border: 2px solid var(--ink); border-radius: 8px; background: var(--lilac); font: 800 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.event h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.15; }
.event p:last-child { margin: 0; color: var(--text-2); }
.values { display: grid; gap: 18px; align-items: center; margin-top: 40px; padding: 28px; border: 2px solid var(--ink); border-radius: 26px; background: var(--ink); color: var(--text-d); box-shadow: 6px 6px 0 0 var(--lilac); }
@media (min-width: 860px) { .values { grid-template-columns: 1fr 1fr; } }
.values-big { margin: 0; font: 900 clamp(30px, 4vw, 52px)/1.05 var(--display); color: var(--lilac); }
.values-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.values-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.values-list svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lilac); color: var(--ink); stroke-width: 3; }
/* Entraide */
.helps { display: grid; gap: 18px; }
@media (min-width: 860px) { .helps { grid-template-columns: 1fr 1fr; } }
.help { padding: 26px; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 0 var(--ink); }
.h-ramadan { background: var(--sky); }
.h-pro { background: var(--white); }
.help .vico { background: var(--ink); color: var(--white); }
.help h3 { margin: 12px 0 8px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.help p { margin: 0; }
/* Offre membre */
.plus-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .plus-grid { grid-template-columns: .9fr 1.1fr; align-items: center; } }
.plus-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plus-list li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-d); border-radius: 18px; background: var(--ink-2); }
.plus-list b { font: 800 18px/1.2 var(--display); color: var(--white); }
.plus-list li > span { color: var(--text-d2); font-size: 15px; }
.plus-list .plus-cta { padding: 8px 0 0; border: 0; background: none; }
html[dir="rtl"] :is(.sector-tag, .event-day) { letter-spacing: 0; font-family: var(--sans); font-size: 13px; }
html[dir="rtl"] :is(.sector h3, .values-big, .event h3, .help h3, .plus-list b) { letter-spacing: 0; line-height: 1.35; }

/* ===== v21 — Côté business : apps de commerces (maquettes codées, pas d'images) ===== */
.biz-sec { overflow: hidden; }
.biz-sec::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(176, 125, 74, .13), transparent 70%); pointer-events: none; }
.biz-sec .wrap { position: relative; }
.apps { display: grid; gap: 24px; }
@media (min-width: 980px) { .apps { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; } }
.app-card { margin: 0; display: grid; gap: 26px; align-content: start; }
.app-phone { position: relative; width: min(100%, 272px); margin: 18px auto 0; aspect-ratio: 9 / 18.6; border: 7px solid #000; border-radius: 38px; background: #000; box-shadow: 0 0 0 2px var(--ink-3), 0 44px 80px -34px rgba(0, 0, 0, .95); }
.app-screen { --bg: #fff; --fg: #111; --mute: #6b6b74; --card: #f1f1f4; --line-a: rgba(0, 0, 0, .12); --a: var(--volt); --on-a: #0b0b0c;
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 13px 14px; overflow: hidden; border-radius: 31px; background: var(--bg); color: var(--fg); font: 500 12px/1.3 var(--sans); letter-spacing: 0; text-align: start; }
.app-screen::before { content: ''; position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 70px; height: 20px; border-radius: 20px; background: #000; }
.ap-bar { display: flex; justify-content: space-between; align-items: center; height: 20px; padding: 0 8px; font: 700 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ap-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.ap-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.ap-sig i:nth-child(1) { height: 5px; } .ap-sig i:nth-child(2) { height: 7px; } .ap-sig i:nth-child(3) { height: 10px; }
.ap-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ap-head b { display: block; font: 800 14px/1.15 var(--sans); }
.ap-head small { display: block; font-size: 10.5px; color: var(--mute); }
.ap-logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--a); color: var(--on-a); font: 900 12px/1 var(--sans); letter-spacing: .02em; }
.ap-title { margin: 2px 0 0; font: 800 16px/1.15 var(--sans); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chips span { padding: 6px 10px; border: 1px solid var(--line-a); border-radius: 999px; font: 700 11px/1 var(--sans); }
.ap-chips .on, .ap-days .on, .ap-slots .on { border-color: var(--a); background: var(--a); color: var(--on-a); }
.ap-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ap-days span { display: grid; gap: 2px; padding: 7px 0; border-radius: 12px; background: var(--card); text-align: center; font: 800 15px/1 var(--sans); }
.ap-days small { font: 600 9.5px/1 var(--sans); opacity: .7; }
.ap-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-slots span { padding: 8px 0; border: 1px solid var(--line-a); border-radius: 10px; text-align: center; font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ap-slots .off { opacity: .32; text-decoration: line-through; }
.ap-btn { display: block; margin-top: auto; padding: 12px 8px; border-radius: 14px; background: var(--a); color: var(--on-a); text-align: center; font: 800 12.5px/1.1 var(--sans); }
.ap-barber { --bg: #101114; --fg: #f4f4f6; --mute: #9a9aa6; --card: #1d1e23; --line-a: rgba(255, 255, 255, .16); --a: #e9c46a; --on-a: #101114; }
.ap-snack { --bg: #fff6ea; --fg: #1d1714; --mute: #7d6f66; --card: #fff; --a: #e63946; --on-a: #fff; }
.ap-coach { --bg: #eef3ff; --fg: #0d1b2a; --mute: #5d6b80; --card: #dfe7fb; --a: #3a5bff; --on-a: #fff; }
.ap-loyal { padding: 10px 12px 11px; border-radius: 16px; background: var(--a); color: var(--on-a); }
.ap-loyal p { margin: 0; }
.ap-loyal b { display: block; font: 800 13px/1.2 var(--sans); }
.ap-loyal small { font-size: 10.5px; opacity: .9; }
.stamps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; }
.stamps i { aspect-ratio: 1; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 50%; }
.stamps .f { background: #fff; }
.ap-menu { display: grid; gap: 7px; }
.ap-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; background: var(--card); }
.ap-item b { display: block; font: 800 12px/1.2 var(--sans); }
.ap-item small { font-size: 10px; color: var(--mute); }
.qty { display: inline-flex; align-items: center; gap: 7px; font: 800 12px/1 var(--sans); }
.qty i { display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid var(--a); border-radius: 50%; color: var(--a); font: 800 13px/1 var(--sans); font-style: normal; }
.qty i:last-child { background: var(--a); color: var(--on-a); }
.ap-ring { position: relative; display: grid; place-items: center; width: 92px; aspect-ratio: 1; margin: 2px auto 0; border-radius: 50%; background: conic-gradient(var(--a) 0 66.6%, var(--card) 0); }
.ap-ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg); }
.ap-ring span { position: relative; z-index: 1; display: grid; text-align: center; }
.ap-ring b { font: 900 20px/1 var(--sans); }
.ap-ring small { font-size: 10px; color: var(--mute); }
.ap-ex { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; }
.ap-ex i { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid var(--a); border-radius: 7px; }
.ap-ex.done i { background: var(--a); }
.ap-ex.done i::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.ap-ex b { display: block; font: 800 12px/1.2 var(--sans); }
.ap-ex small { font-size: 10px; color: var(--mute); }
.ap-ex.done b { color: var(--mute); }
.ap-sub { display: grid; gap: 1px; padding: 8px 10px 8px 26px; border-radius: 12px; background: var(--card); position: relative; }
.ap-sub::before { content: ''; position: absolute; inset-inline-start: 11px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #1fb85b; }
html[dir="rtl"] .ap-sub { padding: 8px 26px 8px 10px; }
.ap-sub b { font: 800 12px/1.2 var(--sans); }
.ap-sub small { font-size: 10px; color: var(--mute); }
.app-notif { position: absolute; z-index: 2; top: 30px; inset-inline: -16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(248, 248, 250, .94); color: #111; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .7); text-align: start; letter-spacing: 0; }
.an-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--volt); color: var(--ink); }
.an-ico svg { width: 17px; height: 17px; stroke-width: 2.2; }
.an-txt b { display: block; font: 800 12.5px/1.2 var(--sans); }
.an-txt span { display: block; font: 500 11.5px/1.3 var(--sans); color: #45454d; }
.app-value { color: var(--text-d); }
.app-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.app-tag svg { width: 18px; height: 18px; }
html[dir="rtl"] .app-tag { letter-spacing: 0; font-family: var(--sans); font-size: 13px; }
.app-value ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.app-value li { position: relative; padding-inline-start: 28px; font-size: 15.5px; line-height: 1.45; }
.app-value li::before { content: ''; position: absolute; inset-inline-start: 0; top: .2em; width: 18px; height: 18px; border-radius: 6px; background: var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.apps-note { margin: 18px 0 0; text-align: center; font: 600 12px/1.4 var(--mono); color: var(--text-d2); }
html[dir="rtl"] .apps-note { font-family: var(--sans); }
.biz-path { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-d); }
.biz-path-title { margin: 0 0 26px; font: 900 clamp(24px, 3vw, 38px)/1.08 var(--display); letter-spacing: -.01em; color: var(--white); }
html[dir="rtl"] .biz-path-title { letter-spacing: 0; }
.biz-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .biz-steps { grid-template-columns: repeat(3, 1fr); } }
.biz-steps li { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border: 2px solid var(--text-d); border-radius: 20px; background: var(--ink-2); box-shadow: 5px 5px 0 0 var(--volt); }
.biz-steps b { font: 800 18px/1.2 var(--sans); color: var(--white); }
.biz-steps li > span:last-child { font-size: 15px; line-height: 1.45; color: var(--text-d2); }
.bs-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: var(--volt); color: var(--ink); font: 900 16px/1 var(--display); }
.biz-steps li:last-child { background: var(--volt); box-shadow: 5px 5px 0 0 var(--text-d); }
.biz-steps li:last-child b, .biz-steps li:last-child > span:last-child { color: var(--ink); }
.biz-steps li:last-child .bs-n { background: var(--ink); color: var(--volt); }
.biz-honest { display: flex; align-items: flex-start; gap: 10px; max-width: 48em; margin: 24px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-d2); }
.biz-honest svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--volt); }
.biz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
@media (max-width: 979px) {
  .apps.snap { grid-auto-columns: min(78%, 300px); }
  .app-phone { width: min(100%, 260px); }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-js .app-card .app-notif { opacity: 0; translate: 0 -14px; }
  .reveal-js .app-card.in .app-notif { animation: notif-in .65s var(--ease) .55s both; }
  .reveal-js .app-card.in .ap-slots .on, .reveal-js .app-card.in .qty i:last-child { animation: ap-pulse 2.4s ease-in-out 1.4s infinite; }
  .reveal-js .app-card.in .stamps .f { animation: stamp .35s var(--ease) both; }
  .reveal-js .app-card.in .stamps .f:nth-child(2) { animation-delay: .08s; } .reveal-js .app-card.in .stamps .f:nth-child(3) { animation-delay: .16s; }
  .reveal-js .app-card.in .stamps .f:nth-child(4) { animation-delay: .24s; } .reveal-js .app-card.in .stamps .f:nth-child(5) { animation-delay: .32s; }
  .reveal-js .app-card.in .stamps .f:nth-child(6) { animation-delay: .4s; } .reveal-js .app-card.in .stamps .f:nth-child(7) { animation-delay: .48s; }
  .reveal-js .app-card.in .stamps .f:nth-child(8) { animation-delay: .56s; }
  .reveal-js .app-card.in .ap-ring { animation: ring-in 1.1s var(--ease) .3s both; }
}
@keyframes notif-in { from { opacity: 0; translate: 0 -14px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ap-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); } }
@keyframes stamp { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes ring-in { from { scale: .8; opacity: 0; } to { scale: 1; opacity: 1; } }
/* v21b : notification au-dessus du téléphone (le nom de l'app reste visible), écrans plus remplis */
.app-phone { margin-top: 40px; aspect-ratio: 9 / 17.8; }
.app-notif { top: -30px; }
.ap-lbl { margin: 2px 0 -2px; font: 700 10.5px/1 var(--sans); color: var(--mute); }
.ap-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-team span { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border: 1px solid var(--line-a); border-radius: 12px; font: 700 10.5px/1 var(--sans); }
.ap-team i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card); font: 800 12px/1 var(--sans); font-style: normal; }
.ap-team i svg { width: 14px; height: 14px; }
.ap-team .on { border-color: var(--a); }
.ap-team .on i { background: var(--a); color: var(--on-a); }
.hero-biz { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px; padding: 6px 14px 6px 6px; border: 1.5px solid var(--line-d); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text-d); font: 600 14px/1.25 var(--sans); text-decoration: none; transition: border-color .2s, background .2s; }
html[dir="rtl"] .hero-biz { padding: 6px 6px 6px 14px; }
.hero-biz:hover { border-color: var(--volt); background: rgba(176, 125, 74, .08); }
.hb-tag { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--volt); color: var(--ink); font: 800 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
html[dir="rtl"] .hb-tag { font-family: var(--sans); letter-spacing: 0; }
.hero-biz svg { flex: none; width: 16px; height: 16px; stroke-width: 2.4; color: var(--volt); }
html[dir="rtl"] .hero-biz svg { scale: -1 1; }

/* ===== v22 — Simulation « 100 commerces équipés » (cartes qui défilent) et programme 360 ===== */
.sim { margin-top: clamp(56px, 7vw, 96px); }
.sim-head { display: grid; gap: 14px; margin-bottom: 22px; }
.sim-title { margin: 0; font: 900 clamp(24px, 3vw, 38px)/1.08 var(--display); letter-spacing: -.01em; color: var(--white); }
.sim-sub { margin: 0; max-width: 44em; font-size: 16px; line-height: 1.5; color: var(--text-d2); }
html[dir="rtl"] .sim-title, html[dir="rtl"] .biz-path-title { letter-spacing: 0; }
.sim-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.sim-n { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1.5px solid var(--line-d); border-radius: 999px; }
.sim-n button { min-width: 54px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-d); font: 800 14px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.sim-n button[aria-pressed="true"] { background: var(--volt); color: var(--ink); }
.sim-n span { padding-inline: 4px 10px; font-size: 14px; color: var(--text-d2); }
.sim-arrows { display: flex; gap: 10px; }
.sim-arrows button { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--text-d); border-radius: 14px; background: var(--ink-2); color: var(--text-d); box-shadow: 3px 3px 0 0 var(--volt); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.sim-arrows button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--volt); }
.sim-arrows button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--volt); }
.sim-arrows svg { width: 18px; height: 18px; stroke-width: 2.6; }
html[dir="rtl"] .sim-arrows svg { scale: -1 1; }
@media (max-width: 640px) { .sim-arrows { display: none; } }
.sim-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 430px); gap: 18px; margin-inline: -4px; padding: 4px 4px 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sim-track::-webkit-scrollbar { display: none; }
.sim-card { display: grid; gap: 14px; align-content: start; padding: 24px; border: 2px solid var(--text-d); border-radius: 24px; background: var(--ink-2); box-shadow: 6px 6px 0 0 var(--volt); color: var(--text-d); scroll-snap-align: start; }
.sim-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.sim-tag svg { width: 18px; height: 18px; }
html[dir="rtl"] .sim-tag { font-family: var(--sans); font-size: 13px; letter-spacing: 0; }
.sim-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 4px 0 0; }
.sim-big b { font: 900 clamp(40px, 5vw, 56px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--white); }
.sim-big span { font: 700 15px/1.2 var(--sans); color: var(--text-d2); }
.sim-for { margin: 0; font-size: 15px; color: var(--text-d2); }
.sim-for b { color: var(--volt); }
.sim-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin: 2px 0; }
.sim-grid i { aspect-ratio: 1; border-radius: 3px; background: var(--line-d); transition: background .25s; }
.sim-grid i.on { background: var(--volt); transition-delay: calc(var(--i, 0) * 7ms); }
.sim-rows { display: grid; margin: 0; border-top: 1px solid var(--line-d); }
.sim-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-d); font-size: 14.5px; line-height: 1.35; }
.sim-rows dt { color: var(--text-d2); }
.sim-rows dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-d); }
.sim-rows .sum { padding-top: 12px; border-bottom: 0; }
.sim-rows .sum dt { font-weight: 700; color: var(--white); }
.sim-rows .sum dd { font-size: 16px; color: var(--volt); }
.sim-note { display: flex; align-items: flex-start; gap: 12px; max-width: 44em; margin: 10px 0 0; padding: 14px 16px; border: 1.5px solid var(--line-d); border-radius: 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-d2); }
.sim-note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--volt); }
.sim-note b { display: block; margin-bottom: 3px; font-weight: 800; color: var(--white); }
.sim-once { margin: -2px 0 0; font: 700 15px/1.3 var(--sans); color: var(--volt); }
.sim-once b { font-variant-numeric: tabular-nums; }
@media (min-width: 860px) { .biz-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .biz-steps { grid-template-columns: repeat(4, 1fr); } }
.biz-steps a { color: var(--volt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.plus-cta .btn { width: 100%; }
.sim-title, .biz-path-title { padding-inline: 2px; text-wrap: balance; }
.sim-arrows[hidden] { display: none; }
@media (min-width: 1100px) { .sim-track { grid-auto-columns: calc((100% - 44px) / 3); } }

/* ===== v23 — De vraies solutions (captures réelles, sans les noms) + projet sur mesure ===== */
.sol-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 2px solid var(--text-d); border-radius: 24px; background: var(--ink-2); box-shadow: 6px 6px 0 0 var(--volt); color: var(--text-d); scroll-snap-align: start; }
.sol-media { position: relative; display: grid; place-items: end center; min-height: 236px; padding: 48px 22px 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, rgba(176, 125, 74, .2), transparent 62%), var(--ink-3); }
.sol-media img { display: block; width: 100%; height: auto; }
.sol-desk img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border: 2px solid #000; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.sol-top img { aspect-ratio: 16 / 10; }
.sol-phones { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.sol-phones img { width: 42%; max-width: 150px; aspect-ratio: 440 / 700; object-fit: cover; object-position: top; border: 5px solid #000; border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.sol-phones img:first-child { translate: 0 22px; }
.sol-soon { position: absolute; top: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--volt); color: var(--ink); font: 800 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 3px 3px 0 0 var(--ink); }
.sol-soon::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
html[dir="rtl"] .sol-soon { font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
.sol-lock { min-height: 236px; place-items: center; padding: 22px; color: var(--volt); }
.sol-lock svg { width: 64px; height: 64px; stroke-width: 1.6; }
.sol-more { border-style: dashed; }
.sol-body { display: grid; gap: 12px; align-content: start; padding: 20px 22px 22px; }
.sol-body h3 { margin: 0; font: 900 clamp(20px, 2vw, 24px)/1.12 var(--display); letter-spacing: -.01em; color: var(--white); }
html[dir="rtl"] .sol-body h3 { letter-spacing: 0; line-height: 1.35; }
.sol-points { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sol-points li { position: relative; padding-inline-start: 26px; font-size: 14.5px; line-height: 1.45; color: var(--text-d2); }
.sol-points li::before { content: ''; position: absolute; inset-inline-start: 0; top: .22em; width: 16px; height: 16px; border-radius: 5px; background: var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sol-money { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.sol-money .sim-big b { font-size: clamp(32px, 3.4vw, 40px); }
.sol-quote p { display: grid; gap: 4px; margin: 0; }
.sol-quote b { font: 800 18px/1.2 var(--sans); color: var(--white); }
.sol-quote span { font-size: 14px; line-height: 1.45; color: var(--text-d2); }
.sim-n span:first-child { padding-inline: 12px 6px; color: var(--text-d); font-weight: 700; }
.sim-ctrl { margin-bottom: 20px; }
@media (max-width: 640px) { .sim-n { flex-wrap: wrap; justify-content: center; border-radius: 22px; } .sim-n span:first-child { flex-basis: 100%; padding: 6px 10px 4px; text-align: center; } }
.biz-custom { position: relative; display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(26px, 4vw, 48px); border: 2px solid var(--ink); border-radius: 26px; background: var(--volt); color: var(--ink); box-shadow: 8px 8px 0 0 var(--white); }
@media (min-width: 900px) { .biz-custom { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 36px; } .biz-custom-cta { justify-self: end; } }
.biz-custom .kicker { color: var(--ink); }
.biz-custom .kicker::before { border-color: var(--ink); background: var(--ink); }
.biz-custom h3 { margin: 0 0 12px; font: 900 clamp(26px, 3.4vw, 44px)/1.04 var(--display); letter-spacing: -.02em; }
html[dir="rtl"] .biz-custom h3 { letter-spacing: 0; line-height: 1.3; }
.biz-custom h3 .hl { background-image: linear-gradient(var(--ink), var(--ink)); color: var(--volt); }
.biz-custom p:last-child { margin: 0; font-size: 16px; line-height: 1.5; }

/* v25 téléphone : sections plus rythmées, titres qui ne passent pas sous la barre, liens du pied confortables */
@media (max-width: 640px) {
  .sec { padding: clamp(52px, 13vw, 72px) 0; }
  section[id] { scroll-margin-top: calc(var(--top-h, 64px) + 60px); }
  .foot-links a, .trust-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .trust-links { gap: 0 18px; }
  .sim-n { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 640px) { .pill { font-size: 13.5px; } .btn-txt small { font-size: 12.5px; } .tile p, .choice small, .trust-mini { font-size: 14px; } }

/* ---------- Porte d'entrée : le site se découvre une fois inscrit (v26) ---------- */
.gate-hero { min-height: calc(100dvh - var(--top-h)); padding-bottom: clamp(48px, 8vw, 96px); }
.gate-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .gate-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } }
.gate-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; max-width: 34em; color: var(--text-d2); font-size: 15px; }
.gate-note svg { flex: none; width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-card { background: var(--paper); color: var(--text); border-radius: var(--r); padding: 22px 20px 24px; box-shadow: 6px 6px 0 0 var(--accent); }
@media (min-width: 600px) { .gate-card { padding: 28px 28px 30px; } }
.gate-card .pane-title { font-size: clamp(20px, 4.6vw, 26px); }
.gate-card .err { margin: 6px 0 0; color: #a31f1f; font-size: 14px; }
.gate-card .err:empty { display: none; }
.gate-card .ghost-btn { margin-top: 10px; }
.gate-foot { padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); }


/* ===================== v27 · « Noir et or » : fond noir chaud, or champagne, grand serif en majuscules, étiquettes fines, cartes à filet (30/10/2026) ===================== */
/* La structure et les textes sont ceux des versions précédentes ; seule la peau change. Les règles ci-dessous sont lues après les autres et l'emportent. */
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-latin.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/assets/fonts/cormorant-italic-latin.woff2) format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; src: url(/assets/fonts/jost-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; src: url(/assets/fonts/amiri-arabic.woff2) format('woff2'); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Amiri'; src: url(/assets/fonts/amiri-bold-arabic.woff2) format('woff2'); font-weight: 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

:root {
  --ink: #0d0b09; --ink-2: #15120e; --ink-3: #1d1914; --line-d: rgba(201, 166, 110, .18);
  --paper: #100e0b; --paper-2: #14110d; --white: #1a1611; --line: rgba(201, 166, 110, .2);
  --text: #efe6d6; --text-2: #b9ae9b; --text-d: #efe6d6; --text-d2: #b9ae9b;
  --gold: #c9a56b; --gold-2: #e4c994; --gold-soft: rgba(201, 166, 110, .12);
  --volt: #b07d4a; --accent: var(--volt); --accent-soft: var(--gold-soft); --on-accent: #15110c;
  --lilac: #d8c3a0; --sky: #cdb98f; --miel: #c9a56b; --din: #1d1914; --din-2: #efe6d6;
  --r: 12px; --r-sm: 8px;
  --display: 'Cormorant Garamond', 'Amiri', Georgia, 'Times New Roman', serif;
  --label: 'Jost', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Jost', 'Cairo', system-ui, sans-serif;
  --sans: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --grad: linear-gradient(135deg, #e4c994 0%, #c9a56b 48%, #b07d4a 100%);
}
.page-sillage { --accent: var(--coral); --accent-soft: rgba(255, 92, 57, .14); }
body { color: var(--text); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible, .dark :focus-visible, .top :focus-visible, .foot :focus-visible, .quicknav :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dark::after { opacity: .07; }

/* Typographie : serif en majuscules, or sur la fin de phrase, étiquettes fines espacées */
.h1, .h2, h3, .big, .pane-title, .doc h1, .doc h2, .biz-path-title, .sim-title, .values-big, .cover-t, .reel-cap b, .boost-title, .quote-video figcaption b, .concept-video figcaption b, .stat b, .qtitle, .sim-big b, .polaroid figcaption { font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
.h1, .h2 { text-transform: uppercase; font-weight: 500; letter-spacing: .03em; line-height: 1.02; }
.h1 { font-size: clamp(40px, 6.2vw, 84px); }
.h1-xl { font-size: clamp(44px, 7vw, 92px); line-height: .98; }
.h2 { font-size: clamp(30px, 4.2vw, 56px); }
.h2.xl { font-size: clamp(36px, 5.6vw, 72px); }
.hero .h1, .final .h2, .quote-copy .h2 { color: var(--text); }
.hl { padding: 0; background: none; color: var(--gold-2); -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.kicker, .dark .kicker, .final .kicker, .biz-custom .kicker { gap: 12px; font: 500 11.5px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.kicker::before, .dark .kicker::before, .final .kicker::before, .biz-custom .kicker::before { width: 28px; height: 1px; border: 0; border-radius: 0; background: var(--gold); rotate: 0deg; }
.sub, .dark .sub, .final .sub, .lead, .pane-sub, .sector p, .event p:last-child, .help p, .tile p, .sol-points li, .plus-list li > span, .biz-steps li > span:last-child, .sim-sub, .biz-custom p:last-child { color: var(--text-2); }
.lead strong, .social-proof b, .final .social-proof b, .sim-for b { color: var(--text); }
.hero-rot, .big { font: italic 500 clamp(21px, 2.2vw, 28px)/1.3 var(--display); letter-spacing: 0; color: var(--text); }
.rot b { color: var(--gold-2); }
.pill { padding: 8px 14px; border: 1px solid var(--line-d); border-radius: 999px; background: rgba(13, 11, 9, .5); color: var(--gold); font: 500 11px/1.3 var(--label); letter-spacing: .2em; text-transform: uppercase; }
.dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.pulse, .pulse::after { background: var(--gold); }
.social-proof, .final .social-proof { color: var(--text-2); }

/* Boutons : dégradé or à bords fins ; variante contour or ; plus d'ombre décalée */
.btn, .dark .btn, .top .btn, .sticky-cta .btn { --sh: transparent; padding: 15px 24px; border: 1px solid transparent; border-radius: 6px; background: var(--grad); color: var(--on-accent); font: 600 12.5px/1.15 var(--label); letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 18px 40px -22px rgba(201, 166, 110, .7); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 22px 44px -22px rgba(201, 166, 110, .8); }
.btn:active { transform: translateY(0); box-shadow: 0 10px 24px -18px rgba(201, 166, 110, .7); }
.btn svg { stroke-width: 1.8; }
.btn-xl { padding: 18px 26px; border-radius: 6px; font-size: 13px; }
.btn-sm { padding: 10px 16px; border-radius: 6px; font-size: 11px; letter-spacing: .16em; }
.btn-txt { gap: 6px; }
.btn-txt small { font: 500 11.5px/1.1 var(--label); letter-spacing: .02em; text-transform: none; opacity: .78; }
.btn-ink, .biz-custom .btn-ink, .btn-soft, .top .btn-sm { background: transparent; color: var(--gold); border-color: rgba(201, 166, 110, .6); box-shadow: none; }
.btn-ink:hover, .btn-soft:hover, .top .btn-sm:hover { background: rgba(201, 166, 110, .1); color: var(--gold-2); filter: none; }
.final .btn-ink { background: var(--grad); color: var(--on-accent); border-color: transparent; }
.btn-wa { background: #25d366; color: #0b0b0c; border-color: transparent; }
.btn[disabled] { filter: grayscale(.4); }
.btn.loading::before { border-color: rgba(21, 17, 12, .25); border-top-color: var(--on-accent); }
.btn-ghost { color: var(--text); font: 500 13px/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.ghost-ico { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.ghost-ico::after { border-color: rgba(201, 166, 110, .6); }
.btn-ghost:hover .ghost-ico { background: var(--gold); color: var(--ink); }
.btn-ghost:hover { color: var(--gold-2); }
.ghost-btn { color: var(--text-2); font: 500 13px/1.2 var(--label); letter-spacing: .06em; }
.ghost-btn:hover { color: var(--gold); }

/* En-tête : marque en serif, liens en petites capitales espacées, langue en pilule fine */
.scrollbar i { background: var(--gold); }
.top { gap: 22px; background: rgba(13, 11, 9, .72); color: var(--text); }
.top.scrolled { border-bottom-color: var(--line-d); background: rgba(13, 11, 9, .9); }
.wm { font: 500 21px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.wm-tag { padding: 5px 7px 4px; border: 1px solid rgba(201, 166, 110, .55); border-radius: 3px; background: transparent; color: var(--gold); font: 500 9.5px/1 var(--label); letter-spacing: .2em; rotate: 0deg; }
.top-nav { gap: 28px; }
.top-nav a { color: var(--text-2); font: 500 11.5px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; }
.top-nav a:hover { color: var(--gold-2); }
.top-nav .top-alt { color: var(--gold); }
.lang { border-color: var(--line-d); }
.lang a { color: var(--text-2); font: 500 11px/1 var(--label); letter-spacing: .12em; }
.lang a[aria-current] { background: var(--gold); color: var(--ink); }
.quicknav { background: rgba(13, 11, 9, .9); border-bottom-color: var(--line-d); }
.quicknav a { border-color: var(--line-d); color: var(--text-2); font: 500 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.quicknav a.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }
@media (max-width: 430px) { .wm { font-size: 18px; } }

/* Héros : la photo de Yacine dans le salon capitonné, assombrie et réchauffée ; texte à gauche, trois vidéos à droite sans autocollants */
.hero-v20::before { background: linear-gradient(90deg, rgba(13, 11, 9, .97) 0%, rgba(13, 11, 9, .86) 38%, rgba(13, 11, 9, .5) 70%, rgba(13, 11, 9, .35) 100%), linear-gradient(180deg, rgba(13, 11, 9, .2) 0%, rgba(13, 11, 9, 0) 40%, rgba(13, 11, 9, .9) 100%), url(/assets/img/hero-atelier.webp) 50% 45% / cover no-repeat; }
.gate-hero::before { background: linear-gradient(90deg, rgba(13, 11, 9, .97) 0%, rgba(13, 11, 9, .86) 38%, rgba(13, 11, 9, .5) 70%, rgba(13, 11, 9, .35) 100%), linear-gradient(180deg, rgba(13, 11, 9, .2) 0%, rgba(13, 11, 9, 0) 40%, rgba(13, 11, 9, .9) 100%), url(/assets/img/porte-atelier.webp) 68% 30% / cover no-repeat; }
@media (max-width: 979px) { .hero-v20::before { background: linear-gradient(180deg, rgba(13, 11, 9, .9) 0%, rgba(13, 11, 9, .82) 55%, rgba(13, 11, 9, .96) 100%), url(/assets/img/hero-atelier.webp) 46% 40% / cover no-repeat; } .gate-hero::before { background: linear-gradient(180deg, rgba(13, 11, 9, .9) 0%, rgba(13, 11, 9, .82) 55%, rgba(13, 11, 9, .96) 100%), url(/assets/img/porte-atelier.webp) 66% 24% / cover no-repeat; } }
.hero { padding-top: clamp(40px, 6vw, 84px); }
.hero-copy .pill { margin-bottom: 6px; }
.hero .reveal:nth-child(2) { animation-delay: .1s; }
.tri { padding: 20px 0 10px; }
.tri .vslot-phone, .vslot-phone { border: 5px solid #0a0907; border-radius: 22px; box-shadow: 0 0 0 1px rgba(201, 166, 110, .4), 0 50px 90px -40px rgba(0, 0, 0, .95); }
.tri-1 { rotate: -4deg; } .tri-3 { rotate: 4deg; }
.stk, .stk-2, .stk-3, .page-sillage .stk-2, .stk-ig { padding: 8px 12px; border: 1px solid rgba(201, 166, 110, .45); border-radius: 3px; background: rgba(13, 11, 9, .78); color: var(--gold-2); font: 500 10.5px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; box-shadow: none; rotate: 0deg; animation: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[dir="rtl"] .stk { letter-spacing: 0; font-size: 12px; }
.hero-biz { border: 1px solid var(--line-d); background: rgba(13, 11, 9, .5); color: var(--text); font: 500 13px/1.3 var(--label); }
.hero-biz:hover { border-color: var(--gold); background: rgba(201, 166, 110, .08); }
.hb-tag { background: var(--gold); color: var(--ink); font: 600 10px/1 var(--label); letter-spacing: .16em; }
.hero-biz svg { color: var(--gold); }
.spin-bg { fill: var(--ink-2); stroke: var(--gold); stroke-width: 1; } .spin-txt { fill: var(--gold); font: 500 14px var(--label); letter-spacing: .2em; } .spin-star { color: var(--gold); }

/* Bande : une seule ligne, filets fins, mots en serif espacés, séparés d'un point médian */
.tape { margin: 0; padding: 0; }
.tape-row, .tape-a { margin-inline: 0; border-block: 1px solid var(--line-d); background: transparent; color: var(--gold); rotate: 0deg; }
.tape-b { display: none; }
.tape-track { padding: 16px 0; }
.tape-track li { font: 500 clamp(14px, 1.4vw, 19px)/1 var(--display); letter-spacing: .24em; text-transform: uppercase; }
.tape-track li::after { content: '·'; padding-inline-start: 18px; color: var(--gold); font-size: 1em; }
.tape-track .you { text-decoration: none; color: var(--gold-2); }

/* Les quatre parcours : cartes numérotées 01 à 04, image en haut, filet fin, titre en serif, flèche en bas à droite */
.sectors { counter-reset: sector; gap: 18px; }
@media (min-width: 700px) { .sectors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sector, .s-ia, .s-sport, .s-food, .s-din { --c: var(--ink-2); grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); color: var(--text); box-shadow: none; counter-increment: sector; }
@media (hover: hover) { .sector:hover { transform: translateY(-4px); border-color: rgba(201, 166, 110, .5); box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .9); } }
.sector::before { content: counter(sector, decimal-leading-zero); position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 6px 9px 5px; border: 1px solid rgba(201, 166, 110, .4); border-radius: 3px; background: rgba(13, 11, 9, .72); color: var(--gold-2); font: 500 11px/1 var(--label); letter-spacing: .22em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sector-media { order: -1; height: 220px; border: 0; border-bottom: 1px solid var(--line-d); }
.sector-media > img, .sector-media > video { object-position: 50% 30%; filter: saturate(.78) contrast(1.05) brightness(.86); }
.sector-txt { padding: 22px 22px 56px; }
.sector-txt::after { content: '→'; position: absolute; bottom: 18px; inset-inline-end: 22px; color: var(--gold); font: 400 22px/1 var(--display); transition: translate .25s var(--ease); }
html[dir="rtl"] .sector-txt::after { content: '←'; }
.sector:hover .sector-txt::after { translate: 4px 0; } html[dir="rtl"] .sector:hover .sector-txt::after { translate: -4px 0; }
.sector .sector-tag, .s-din .sector-tag { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; color: var(--gold); font: 500 11px/1 var(--label); letter-spacing: .22em; }
.sector h3, .s-din h3 { margin: 0 0 10px; color: var(--text); font: 600 clamp(19px, 1.6vw, 22px)/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.sector .sector-meta { color: var(--gold); font: 500 11px/1.4 var(--label); letter-spacing: .08em; opacity: 1; }
.s-din .sector-txt { background-image: none; }
.food-art { background: radial-gradient(circle at 50% 50%, rgba(201, 166, 110, .22) 0 34%, transparent 35%), var(--ink-3); }
.food-ico { color: var(--gold); stroke-width: 1.2; }
.dish, .d4 { border: 1px solid rgba(201, 166, 110, .45); border-radius: 3px; background: rgba(13, 11, 9, .7); color: var(--gold-2); font: 500 10.5px/1 var(--label); letter-spacing: .18em; text-transform: uppercase; box-shadow: none; rotate: 0deg; }
/* Puces des plats : en quinconce, à l'écart du numéro « 03 » (en haut, côté début). */
.d1 { top: 30%; inset-inline-start: 7%; } .d2 { top: 11%; inset-inline-end: 7%; } .d3 { bottom: 11%; inset-inline-start: 9%; } .d4 { bottom: 30%; inset-inline-end: 8%; }
@media (max-width: 640px) { .sector-media { height: 200px; border-bottom: 1px solid var(--line-d); } }

/* Côté business : cartes sobres, captures d'écran encadrées sans effet, chiffres en serif */
.biz-sec::before { background: radial-gradient(closest-side, rgba(201, 166, 110, .1), transparent 70%); }
.sol-card, .sim-card { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); color: var(--text); box-shadow: none; }
.sol-media { background: radial-gradient(120% 90% at 50% 100%, rgba(201, 166, 110, .16), transparent 62%), var(--ink-3); }
.sol-desk img, .sol-phones img { border-color: #0a0907; box-shadow: 0 0 0 1px rgba(201, 166, 110, .25), 0 30px 60px -30px rgba(0, 0, 0, .9); filter: saturate(.82) contrast(1.04); }
.sol-soon { border: 1px solid rgba(201, 166, 110, .45); background: rgba(13, 11, 9, .78); color: var(--gold-2); font: 500 10.5px/1 var(--label); letter-spacing: .18em; box-shadow: none; }
.sol-soon::before { background: var(--gold); }
.sol-lock { color: var(--gold); } .sol-lock svg { stroke-width: 1.1; }
.sol-more { border-style: dashed; }
.sol-body h3 { font: 600 clamp(19px, 1.7vw, 22px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.sol-points li::before, .app-value li::before { border: 1px solid var(--gold); border-radius: 50%; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a56b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sim-tag, .app-tag { color: var(--gold); font: 500 11px/1 var(--label); letter-spacing: .22em; }
.sim-big b, .sol-money .sim-big b { font: 600 clamp(36px, 4.4vw, 52px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; color: var(--text); }
.sim-big span, .sim-for, .sim-rows dt { color: var(--text-2); }
.sim-rows, .sim-rows div, .sol-money { border-color: var(--line-d); }
.sim-rows dd, .sim-rows .sum dt, .sol-quote b { color: var(--text); }
.sim-rows .sum dd, .sim-once, .sim-for b { color: var(--gold-2); }
.sim-n { border-color: var(--line-d); }
.sim-n button { color: var(--text-2); font: 500 12px/1 var(--label); letter-spacing: .1em; }
.sim-n button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.sim-n span, .sim-n span:first-child { color: var(--text-2); font-family: var(--label); font-weight: 500; }
.sim-arrows button { border: 1px solid var(--line-d); border-radius: 50%; background: transparent; color: var(--gold); box-shadow: none; }
.sim-arrows button:hover { transform: none; border-color: var(--gold); box-shadow: none; }
.sim-arrows button:active { transform: scale(.96); box-shadow: none; }
.sim-note { border-color: var(--line-d); }
.sim-note svg { color: var(--gold); }
.sim-note b { color: var(--text); }
.biz-custom { border: 1px solid rgba(201, 166, 110, .4); border-radius: 12px; background: linear-gradient(135deg, rgba(201, 166, 110, .16), var(--ink-2) 55%); color: var(--text); box-shadow: none; }
.biz-custom h3 { color: var(--text); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.biz-custom h3 .hl { background: none; color: var(--gold-2); }
.biz-path { border-top-color: var(--line-d); }
.biz-path-title, .sim-title { color: var(--text); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.biz-steps li, .biz-steps li:last-child { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); box-shadow: none; }
.biz-steps b, .biz-steps li:last-child b { color: var(--text); font: 600 17px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.biz-steps li:last-child > span:last-child { color: var(--text-2); }
.bs-n, .biz-steps li:last-child .bs-n { width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); font: 500 16px/1 var(--display); }
.biz-steps a { color: var(--gold-2); }
.biz-honest svg { color: var(--gold); }
.apps-note { font-family: var(--label); }

/* Communauté, entraide, programme 360 */
.event, .help, .h-ramadan, .h-pro, .plus-list li, .values { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); color: var(--text); box-shadow: none; }
.event-day { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--gold); font: 500 11px/1 var(--label); letter-spacing: .22em; }
.event h3, .help h3 { color: var(--text); font: 600 clamp(19px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.values { padding: 30px; }
.values-big { color: var(--gold-2); font: 500 clamp(28px, 3.6vw, 48px)/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.values-list li { color: var(--text-2); font-weight: 500; }
.values-list svg, .final-gets svg, .ticks svg, .facts svg { border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); stroke-width: 2.2; }
.vico, .help .vico, .agents .tile.t-0 .vico { border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); }
.vico svg { stroke-width: 1.6; }
.plus-list b { color: var(--text); font: 600 19px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }

/* Le mot de Yacine : citation en italique serif */
.h2.quote { font: italic 500 clamp(32px, 4.4vw, 60px)/1.1 var(--display); letter-spacing: 0; text-transform: none; }
.quote-video .vslot { rotate: 0deg; }
.quote-video figcaption b, .concept-video figcaption b { color: var(--text); font: 600 18px/1.2 var(--display); letter-spacing: .04em; }
.ig-link, .quote-sec .ig-link { border: 1px solid var(--line-d); border-radius: 999px; background: transparent; color: var(--text); font: 500 12px/1 var(--label); letter-spacing: .12em; box-shadow: none; }
.ig-link:hover, .quote-sec .ig-link:hover { transform: none; border-color: var(--gold); color: var(--gold-2); box-shadow: none; }

/* Questions : bulles à filet */
.qa dt { border: 1px solid var(--line-d); background: transparent; color: var(--text); font-weight: 600; }
.qa dd { border: 1px solid var(--line-d); background: var(--ink-2); color: var(--text-2); box-shadow: none; }
.qa dd::before { border: 1px solid var(--line-d); }

/* Appel final : la photo du café passée en sépia derrière un voile sombre, or sur les points, portrait sans ombre dure */
.final { background: var(--ink) url(/assets/img/final-marche.webp) 42% 50% / cover no-repeat; color: var(--text); }
.final-photo { display: none; }
.final::before { background: linear-gradient(90deg, rgba(13, 11, 9, .94) 0%, rgba(13, 11, 9, .86) 50%, rgba(13, 11, 9, .7) 100%); opacity: 1; mix-blend-mode: normal; -webkit-backdrop-filter: sepia(1) saturate(.5) brightness(.7); backdrop-filter: sepia(1) saturate(.5) brightness(.7); }
.final .hl { background: none; color: var(--gold-2); }
.final .kicker, .final .sub, .final .social-proof, .final .trust-mini { color: var(--text-2); }
.final .social-proof b { color: var(--text); }
.final-gets { color: var(--text); }
.trust-links a { color: var(--text-2); font: 500 11.5px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.trust-links a:hover { color: var(--gold-2); }
.final-photo img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)) saturate(.85); }

/* Pied de page */
.foot { border-top: 1px solid var(--line-d); background: var(--ink); color: var(--text-2); }
.foot .brand, .foot a { color: var(--text); }
.foot-links a { font: 500 11.5px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.foot-links a:hover { color: var(--gold-2); }
.foot-copy { font: 500 11.5px/1.4 var(--label); letter-spacing: .08em; }

/* Inscription : fenêtre sombre à filet or, choix en cartes fines, champs sombres */
.sheet-backdrop { background: rgba(8, 7, 6, .72); }
.sheet-panel { border: 1px solid var(--line-d); border-radius: 14px 14px 0 0; background: var(--ink-2); color: var(--text); box-shadow: 0 -30px 90px -40px rgba(0, 0, 0, .9); }
@media (min-width: 640px) { .sheet-panel { border: 1px solid var(--line-d); border-radius: 14px; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95); } }
.sheet-head { background: var(--ink-2); }
.progress { border: 1px solid var(--line-d); background: var(--ink-3); }
.progress i { background: var(--grad); }
.step-count { color: var(--gold); font: 500 11px/1 var(--label); letter-spacing: .16em; }
.icon-btn { border: 1px solid var(--line-d); border-radius: 8px; background: transparent; color: var(--text); }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-2); }
.icon-btn.solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.pane-title, .gate-card .pane-title { font: 600 clamp(24px, 5vw, 30px)/1.15 var(--display); letter-spacing: .01em; text-transform: none; color: var(--text); }
.choice { border: 1px solid var(--line-d); border-radius: 8px; background: var(--ink-3); color: var(--text); }
.choice:hover { translate: none; border-color: rgba(201, 166, 110, .5); box-shadow: none; }
.choice > svg { background: var(--ink-2); color: var(--gold); stroke-width: 1.7; }
.choice b { font-weight: 600; }
.choice small, .choice.on small, .choice[aria-pressed="true"] small { color: var(--text-2); }
.choice.on, .choice[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 166, 110, .12); box-shadow: none; }
.choice.on > svg, .choice[aria-pressed="true"] > svg { background: var(--gold); color: var(--ink); }
.tick { border: 1px solid var(--line-d); border-radius: 50%; background: transparent; }
.tick svg { stroke: var(--ink); }
.choice[aria-pressed="true"] .tick { background: var(--gold); border-color: var(--gold); }
.chips .choice { border-radius: 999px; }
.field > span { color: var(--text-2); font: 500 11.5px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.field em { color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: 11.5px; }
input, select { border: 1px solid var(--line-d); border-radius: 8px; background: var(--ink-3); color: var(--text); }
input::placeholder { color: rgba(185, 174, 155, .55); }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 166, 110, .18); }
input[aria-invalid="true"] { border-color: #d9826f; }
select { background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a56b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
html[dir="rtl"] select { background-position: left 12px center; }
.consent { color: var(--text-2); }
.consent input { accent-color: var(--gold); }
.consent a { color: var(--gold-2); }
.err, .gate-card .err { color: #e8a08f; }
.fine { color: var(--text-2); }
.badge-rank { border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); box-shadow: none; rotate: 0deg; }
.badge-rank svg { stroke-width: 1.6; }
.rank { background: var(--gold); color: var(--ink); font: 600 17px/1.4 var(--display); }
.boost { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-3); box-shadow: none; }
.boost-title { color: var(--text); font: 600 18px/1.2 var(--display); letter-spacing: .04em; }
.boost-title svg { color: var(--gold); }
.boost-sub { color: var(--text-2); }
.ref-box input { font-family: var(--mono); }
.share-row .btn { box-shadow: none; }
.toast { border: 1px solid var(--gold); background: var(--ink-2); color: var(--text); font-weight: 600; }
.consent-bar { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); color: var(--text); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.consent-bar .btn-soft { color: var(--text-2); }

/* Porte d'entrée : même héros, carte sombre à filet or */
.gate-card { border: 1px solid var(--line-d); border-radius: 12px; background: rgba(21, 18, 14, .92); color: var(--text); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gate-note { color: var(--text-2); }
.gate-note svg { stroke: var(--gold); }
.gate-foot { border-top: 0; }

/* Vidéos, lecteur, vignettes */
.vplay, .vslot.has-preview .vplay { border: 1px solid var(--gold); background: rgba(13, 11, 9, .7); color: var(--gold); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vplay::after { border-color: rgba(201, 166, 110, .6); }
.vslot-card { border: 1px solid var(--line-d); border-radius: 10px; box-shadow: none; }
.dark .vslot-card { border-color: var(--line-d); box-shadow: none; }
.vslot-apercu { outline-color: var(--gold); }
.vslot-label { border: 1px dashed var(--gold); background: rgba(13, 11, 9, .9); color: var(--text); font-family: var(--label); }
.vbox-video { border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95); }
.vbox-close { border: 1px solid var(--gold); background: rgba(13, 11, 9, .8); color: var(--gold); box-shadow: none; }
.snap-dots i, .dark .snap-dots i { background: var(--line-d); }
.snap-dots i.on, .dark .snap-dots i.on { background: var(--gold); }
@media (hover: hover) { .vwall .reel:hover .vslot { translate: 0 -4px; box-shadow: none; } }
.cover, .c-volt, .c-coral, .c-paper, .c-sky, .c-lilac, .c-ink { --c: var(--ink-3); color: var(--text); }
.cover::before { opacity: .1; mix-blend-mode: overlay; }
.cover-t { font: 500 clamp(18px, 1.8vw, 24px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.soon { border: 1px solid rgba(201, 166, 110, .45); background: rgba(13, 11, 9, .7); color: var(--gold-2); font: 500 10.5px/1 var(--label); letter-spacing: .18em; }
.reel-cap b { color: var(--text); font: 600 17px/1.2 var(--display); letter-spacing: .04em; }
.reel-cap span, .dark .reel-cap span, .concept-video figcaption span, .quote-video figcaption span, .st-phone figcaption { color: var(--text-2); }

/* Page Sillage et pages simples : tuiles, étapes, équipe, colonnes « pour qui », documents */
.tile, .steps-light .tile, .tile.t-0, .steps-light .tile.t-0 { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); box-shadow: none; }
.tile.t-0, .steps-light .tile.t-0 { border-color: rgba(201, 166, 110, .55); }
.tile:hover { border-color: rgba(201, 166, 110, .5); }
.tile h3, .tile.t-0 h3, .steps-light .tile h3 { color: var(--text); font: 600 clamp(18px, 1.6vw, 22px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tile p, .tile.t-0 p, .steps-light .tile p, .steps-light .tile.t-0 p { color: var(--text-2); }
.tile .tag, .tile.t-0 .tag, .steps-light .tile .tag { border: 1px solid rgba(201, 166, 110, .4); background: transparent; color: var(--gold); font: 500 10.5px/1 var(--label); letter-spacing: .18em; }
.tile .n, .tile.t-0 .n, .steps-light .tile .n { color: transparent; -webkit-text-stroke: 1px rgba(201, 166, 110, .35); font: 400 64px/1 var(--display); }
.polaroid { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); box-shadow: none; rotate: 0deg; }
.polaroid::before { display: none; }
.polaroid img { border-color: rgba(201, 166, 110, .2); filter: saturate(.85); }
.polaroid figcaption { color: var(--text); font: 600 18px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.stat, .stat:nth-child(2) { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); box-shadow: none; }
.stat b { color: var(--gold-2); font: 500 clamp(28px, 3.4vw, 44px)/1 var(--display); letter-spacing: 0; }
.stat span { color: var(--text-2); }
.ticks li { color: var(--text); }
.facts li { color: var(--text-2); }
.qcol, .qyes, .qno { border: 1px solid var(--line-d); border-radius: 12px; background: var(--ink-2); color: var(--text); box-shadow: none; }
.qno { background: var(--ink-3); }
.qtitle { color: var(--text); font: 600 clamp(20px, 2.2vw, 26px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.qtitle svg, .qno .qtitle svg { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 50%; stroke-width: 2.2; }
.qcol li { color: var(--text-2); font-weight: 500; }
.qcol li::before, .qno li::before { border-radius: 50%; background: var(--gold); rotate: 0deg; width: 7px; height: 7px; top: .6em; }
.doc-top { border-bottom: 1px solid var(--line-d); }
.doc-top .ghost { border-color: var(--line-d); color: var(--text); font: 500 11.5px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.doc a { color: var(--gold-2); }
.doc .box { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); box-shadow: none; }
.doc .updated { color: var(--text-2); }
.doc .num404 { color: var(--gold); -webkit-text-stroke: 0; text-shadow: none; font-weight: 400; }
.doc h1 { text-transform: uppercase; letter-spacing: .03em; font-weight: 500; }

/* Darija : Amiri pour les titres, pas de majuscules ni d'espacement, lignes plus hautes */
html[dir="rtl"] :is(.h1, .h2, h3, .big, .hero-rot, .pane-title, .wm, .cover-t, .reel-cap b, .qtitle, .boost-title, .tape-track li, .stat b, .kicker, .soon, .tile .tag, .step-count, .sector h3, .event h3, .help h3, .sol-body h3, .plus-list b, .biz-steps b, .values-big, .sector-tag, .event-day, .pill, .btn, .top-nav a, .lang a, .quicknav a, .field > span, .foot-links a, .trust-links a, .stk, .dish, .sol-soon, .sim-tag, .app-tag, .wm-tag, .sector::before, .hb-tag, .btn-ghost, .polaroid figcaption, .doc-top .ghost) { letter-spacing: 0; }
html[dir="rtl"] :is(.h1, .h2) { font-family: var(--display); font-weight: 700; line-height: 1.28; }
html[dir="rtl"] .h1-xl { font-size: clamp(44px, 7.4vw, 96px); line-height: 1.2; }
html[dir="rtl"] :is(h3, .sector h3, .event h3, .help h3, .sol-body h3, .tile h3, .plus-list b, .biz-steps b) { font-weight: 700; line-height: 1.4; }
html[dir="rtl"] :is(.btn, .pill, .kicker, .top-nav a, .lang a, .quicknav a, .field > span, .sector-tag, .event-day, .sim-tag, .app-tag, .foot-links a, .trust-links a, .stk, .dish, .sol-soon, .wm-tag, .btn-ghost, .step-count, .doc-top .ghost) { font-family: var(--sans); font-size: 13px; }
html[dir="rtl"] .btn { font-size: 14px; font-weight: 700; }
html[dir="rtl"] .hero-rot, html[dir="rtl"] .big, html[dir="rtl"] .h2.quote { font-style: normal; font-weight: 700; line-height: 1.45; }
html[dir="rtl"] .wm { font-family: var(--display); font-size: 20px; }
html[dir="rtl"] .hl { padding: 0; }

/* Téléphone */
@media (max-width: 640px) {
  .h1 { font-size: clamp(38px, 11vw, 48px); }
  .h1-xl { font-size: clamp(40px, 12vw, 52px); }
  .h2 { font-size: clamp(27px, 7.6vw, 34px); }
  .btn, .dark .btn, .sticky-cta .btn { font-size: 12px; letter-spacing: .14em; }
  .sector-txt { padding: 20px 20px 54px; }
  .top { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sector:hover, .btn:hover { transform: none; } }

/* v29 — Le groupe WhatsApp : maquette codée, conversation qui se joue */
.groupe-sec { background: var(--ink); }
.groupe-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .groupe-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.groupe-plus { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.groupe-plus li { display: flex; gap: 14px; align-items: flex-start; }
.groupe-plus .vico { flex: none; width: 42px; height: 42px; margin: 0; }
.groupe-plus b { display: block; font: 600 17px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.groupe-plus li > div > span { display: block; margin-top: 4px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.chat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chat-tabs button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-d); border-radius: 999px; background: transparent; color: var(--text-2); font: 500 12px/1 var(--label); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
.chat-tabs button:hover { border-color: var(--gold); color: var(--text); }
.chat-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.groupe-txt .fine { margin-top: 14px; }
.groupe-phone { justify-self: center; width: min(360px, 100%); }
.wa { display: flex; flex-direction: column; height: 640px; border-radius: 36px; border: 8px solid #000; box-shadow: 0 0 0 2px var(--ink-3), 0 40px 90px -36px rgba(0, 0, 0, .85); overflow: hidden; background: #0b141a; color: #e9edef; font-family: var(--sans); text-align: start; }
@media (max-width: 640px) { .wa { height: 580px; } }
.wa-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1f2c34; }
.wa-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ink-3); } .wa-avatar img { display: block; width: 100%; height: 100%; }
.wa-title b { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; } .wa-title span { display: block; font-size: 12.5px; color: #8696a0; }
.wa-body { flex: 1; overflow: hidden; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; background: #0b141a; }
.wa-body[hidden] { display: none; }
.msg { max-width: 86%; padding: 7px 10px 6px; border-radius: 10px; background: #202c33; font-size: 14px; line-height: 1.35; align-self: flex-start; animation: msg-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.msg:not(.in) { display: none; }
.msg.me { align-self: flex-end; background: #005c4b; }
.msg b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-2); } .msg.admin b { color: #53bdeb; }
.msg p { margin: 0; color: inherit; font-size: inherit; } .msg time { display: block; margin-top: 2px; text-align: end; font-size: 10.5px; color: #8696a0; font-variant-numeric: tabular-nums; }
.msg.typing { display: flex; gap: 4px; padding: 11px 12px; } .msg.typing[hidden] { display: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: typing 1s infinite ease-in-out; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes typing { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 0 -3px; } }
.wa-input { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1f2c34; } .wa-input > span:first-child { flex: 1; padding: 10px 14px; border-radius: 999px; background: #2a3942; color: #8696a0; font-size: 14px; } .wa-mic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #00a884; }
.wa-replay { display: flex; margin: 16px auto 0; }
@media (prefers-reduced-motion: reduce) { .msg, .typing i { animation: none; } }

/* v33 : mot-clé de la story et valeur ajoutée (porte et site) */
.kw { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; font-size: 15px; color: var(--text-d); }
.kw-tag { padding: 6px 12px 5px; border-radius: 4px; background: var(--grad, var(--gold)); color: var(--ink); font: 600 13px/1 var(--label); letter-spacing: .14em; direction: ltr; }
.gate-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--gold-2); font: 500 14px/1.2 var(--label); text-underline-offset: 4px; }
.gate-more svg { width: 16px; height: 16px; rotate: 90deg; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-card:focus { outline: none; }
.valeur-sec { background: var(--ink-2); }
.vs-wrap { border: 1px solid var(--line-d); border-radius: 12px; overflow: hidden; }
.vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vs th { padding: 14px 16px; border-bottom: 1px solid var(--line-d); color: var(--text-d2); font: 500 11.5px/1.3 var(--label); letter-spacing: .18em; text-align: start; text-transform: uppercase; }
.vs td { padding: 15px 16px; border-bottom: 1px solid var(--line-d); color: var(--text-d2); font-size: 15px; line-height: 1.45; text-wrap: pretty; vertical-align: top; }
.vs tbody tr:last-child td { border-bottom: 0; }
.vs th + th, .vs td + td { background: var(--gold-soft); }
.vs th + th { color: var(--gold-2); }
.vs td + td { color: var(--text-d); }
html[dir="rtl"] .vs th { letter-spacing: 0; font-size: 13px; }
.parcours-court { background: var(--ink); color: var(--text-d); }
.vp { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: vp; }
.vp-i { position: relative; display: grid; grid-template-columns: 112px 1fr; overflow: hidden; border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); counter-increment: vp; }
.vp-i::before { content: counter(vp, decimal-leading-zero); position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; padding: 4px 7px 3px; border-radius: 3px; background: rgba(13, 11, 9, .72); color: var(--gold-2); font: 500 11px/1 var(--label); }
.vp-i img { width: 100%; height: 100%; min-height: 124px; object-fit: cover; object-position: 50% 30%; filter: saturate(.78) contrast(1.05) brightness(.86); }
.vp-t { padding: 16px; align-self: center; }
.vp-tag { margin: 0 0 7px; color: var(--gold); font: 500 11px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; }
.vp-i h3 { margin: 0 0 7px; color: var(--text); font: 600 19px/1.15 var(--display); text-wrap: balance; }
.vp-m { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
html[dir="rtl"] .vp-tag { letter-spacing: 0; font-size: 13px; }
html[dir="rtl"] .vp-i h3 { line-height: 1.4; }
.vz-grid { display: grid; gap: 40px; }
.vz-t { margin: 0 0 22px; font: 600 clamp(25px, 3.1vw, 36px)/1.12 var(--display); text-wrap: balance; }
html[dir="rtl"] .vz-t { line-height: 1.4; }
.vz-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.vz-list li { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 8px 0; border-top: 1px solid var(--line-d); }
.vz-list b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.vz-list img { flex: none; width: 56px; height: 56px; object-fit: cover; object-position: 50% 0; border-radius: 8px; outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; }
.vz-ic { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-2); }
.vz-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vf-sec { background: var(--ink-2); color: var(--text-d); }
.vf { display: grid; justify-items: center; text-align: center; }
.vf .h2 { margin-bottom: 26px; text-wrap: balance; }
@media (max-width: 420px) { .vs th, .vs td { padding-inline: 12px; } .vs td { font-size: 14px; } }
@media (min-width: 620px) { .vp { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .vz-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .vp { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .vp-i { grid-template-columns: 1fr; grid-template-rows: 200px auto; }
  .vp-i img { min-height: 0; }
  .vp-t { align-self: start; }
}

/* v38 : porte plus vivante — parcours en affiches, solutions en vraies captures, groupe dans un téléphone */
.gate-proof { margin: 16px 0 0; }
.vs td + td { position: relative; padding-inline-start: 42px; }
.vs td + td::before { content: ''; position: absolute; inset-inline-start: 14px; top: 17px; width: 17px; height: 17px; border: 1px solid var(--gold); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a56b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
@media (max-width: 420px) { .vs td + td { padding-inline-start: 36px; } .vs td + td::before { inset-inline-start: 10px; } }
.reveal-js .vs tbody tr { opacity: 0; translate: 0 12px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.reveal-js .vs-wrap.in tbody tr { opacity: 1; translate: none; }
.reveal-js .vs-wrap.in tbody tr:nth-child(2) { transition-delay: .1s; } .reveal-js .vs-wrap.in tbody tr:nth-child(3) { transition-delay: .2s; }
.reveal-js .vs-wrap.in tbody tr:nth-child(4) { transition-delay: .3s; } .reveal-js .vs-wrap.in tbody tr:nth-child(5) { transition-delay: .4s; }
.vp, .vb { display: grid; grid-auto-flow: column; grid-template-columns: none; gap: 14px; margin-inline: -16px; padding: 4px 16px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vp::-webkit-scrollbar, .vb::-webkit-scrollbar { display: none; }
.vp { grid-auto-columns: 72%; }
.vb { grid-auto-columns: min(84%, 400px); gap: 16px; }
.vp-i { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 3 / 4; border-radius: 14px; scroll-snap-align: center; }
.vp-i img { position: absolute; inset: 0; height: 100%; min-height: 0; filter: saturate(.85) contrast(1.05) brightness(.9); transition: scale .8s var(--ease); }
.vp-i:hover img { scale: 1.04; }
.vp-i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 11, 9, 0) 34%, rgba(13, 11, 9, .62) 62%, rgba(13, 11, 9, .96) 100%); }
.vp-i::before { top: 12px; inset-inline-start: 12px; z-index: 2; padding: 6px 9px 5px; border: 1px solid rgba(201, 166, 110, .45); font-size: 12px; }
.vp-t { position: relative; z-index: 1; align-self: end; padding: 18px; }
.vp-i h3 { font-size: 25px; line-height: 1.08; }
.vp-m { color: var(--text-d); opacity: .82; }
.vb .sol-card { scroll-snap-align: center; }
.vb .sol-media { min-height: 220px; }
.vb .sim-tag { letter-spacing: .14em; line-height: 1.4; }
@media (min-width: 620px) { .vp { grid-auto-columns: 40%; grid-template-columns: none; } .vb { grid-auto-columns: 46%; } }
@media (min-width: 1000px) {
  .vp, .vb { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin-inline: 0; padding: 0; overflow: visible; }
  .vp-i { grid-template-rows: 1fr; }
  .vp-i h3 { font-size: 22px; }
  .reveal-js .vb .sol-card:nth-child(2) { --d: .08s; } .reveal-js .vb .sol-card:nth-child(3) { --d: .16s; } .reveal-js .vb .sol-card:nth-child(4) { --d: .24s; }
}
/* v39 : prénom et WhatsApp dès le premier écran, bouton d'inscription toujours à portée */
.pane-q { margin: 18px 0 0; color: var(--text); font: 600 20px/1.2 var(--display); }
.pane-center .choices { text-align: start; }
.gate-sticky .btn { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
@media (min-width: 900px) { .gate-sticky { inset-inline-start: auto; inset-inline-end: 24px; bottom: 24px; width: 300px; } }
.gate-foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }