/* Page d'accueil Talabat Tewssil (issues #73, #96) : charte v2, FR / AR (RTL), sans aucun script.
   Polices servies par le site (Plus Jakarta Sans, IBM Plex Sans Arabic), images sous /site/. */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  font-weight: 400 800;
  font-style: normal;
  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: 'IBM Plex Sans Arabic';
  src: url(fonts/ibm-plex-sans-arabic-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'IBM Plex Sans Arabic';
  src: url(fonts/ibm-plex-sans-arabic-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'IBM Plex Sans Arabic';
  src: url(fonts/ibm-plex-sans-arabic-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'IBM Plex Sans Arabic';
  src: url(fonts/ibm-plex-sans-arabic-700.woff2) format('woff2');
  font-weight: 700 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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;
}

/* ---------- Charte ---------- */
:root {
  --or: #e8722c;            /* orange de marque : décor et surfaces seulement */
  --or-strong: #b85217;     /* boutons à texte blanc (AA) */
  --or-strong-hover: #9a4512;
  --or-text: #a84a14;       /* texte orange sur fond clair (AA) */
  --or-light: #f4a574;      /* texte orange sur fond sombre */
  --or-50: #fdf1e8;
  --or-100: #fbe3d2;
  --ink: #0f1b2a;
  --ink-2: #2e3a4b;
  --muted: #5b6675;
  --line: #e7eaee;
  --field: #8c96a5;
  --bg: #f6f7f9;
  --navy: #13283d;
  --navy-deep: #0e1f31;
  --ok: #047857;
  --ok-50: #e6f4ee;
  --ok-light: #6ee7b7;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 32px;
  --sh-sm: 0 1px 2px rgba(15, 27, 42, 0.06), 0 2px 8px rgba(15, 27, 42, 0.05);
  --sh-md: 0 2px 4px rgba(15, 27, 42, 0.04), 0 12px 32px -8px rgba(15, 27, 42, 0.14);
  --sh-lg: 0 4px 10px rgba(15, 27, 42, 0.05), 0 28px 64px -16px rgba(15, 27, 42, 0.28);
  --font-latin: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --gutter: 20px;
  --hx: 100%;
  color: var(--ink);
  background: #fff;
}
[dir='rtl'] { --hx: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[lang='ar'] { font-family: var(--font-ar); }
[lang='fr'] { font-family: var(--font-latin); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0 0 0.5em; color: var(--ink); line-height: 1.1; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 18px; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3 { letter-spacing: 0; font-weight: 700; }
html[lang='ar'] h1 { line-height: 1.22; }
html[lang='ar'] h2 { line-height: 1.3; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] .ic.flip { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(780px, 100% - 2 * var(--gutter)); }
.section { padding-block: clamp(72px, 4rem + 4vw, 128px); }
.lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--muted); max-width: 36em; }
.note { font-size: 0.875rem; color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-text);
}
.eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
html[lang='ar'] .eyebrow { letter-spacing: 0; font-size: 0.9375rem; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head .lead { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.voice :focus-visible, .drivers-card :focus-visible, .final-card :focus-visible, .foot :focus-visible, .cat-other :focus-visible { outline-color: #fff; }

/* ---------- Téléphone (cadre CSS autour d'une capture de l'app) ---------- */
.phone {
  position: relative; margin: 0; padding: 9px; border-radius: 13% / 6.1%;
  background: linear-gradient(150deg, #34404f 0%, #0d1622 38%, #101a27 70%, #2a3544 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 5px #0a111b,
    0 2px 4px rgba(15, 27, 42, 0.14),
    0 40px 80px -28px rgba(15, 27, 42, 0.55),
    0 18px 36px -18px rgba(15, 27, 42, 0.4);
}
.phone::after { content: ''; position: absolute; top: 24%; inset-inline-end: -2px; width: 3px; height: 9%; border-radius: 0 3px 3px 0; background: #1d2836; }
[dir='rtl'] .phone::after { border-radius: 3px 0 0 3px; }
.phone img { width: 100%; height: auto; border-radius: 11.4% / 5.3%; background: #f4f5f7; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px; border: 0; border-radius: 999px;
  background: var(--or-strong); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 27, 42, 0.12), 0 10px 24px -8px rgba(184, 82, 23, 0.6);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover { background: var(--or-strong-hover); transform: translateY(-1px); }
.btn .ic { width: 20px; height: 20px; }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 0.9375rem; white-space: nowrap; box-shadow: none; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), 0 1px 2px rgba(15, 27, 42, 0.06); }
.btn-ghost:hover { background: var(--bg); }
.btn-ghost .ic { color: var(--or-text); }
.btn-light { background: #fff; color: var(--or-text); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35); }
.btn-light:hover { background: #fff4ec; }
.btn-dark { background: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.btn-dark:hover { background: #1f2f44; }
.btn-outline-light { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- En-tête ---------- */
.skip {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100; padding: 10px 16px;
  border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-200%); transition: transform 0.2s;
}
.skip:focus { transform: none; }
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(15, 27, 42, 0.07);
}
.bar { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
html[lang='ar'] .brand { letter-spacing: 0; font-weight: 700; font-size: 1.1875rem; }
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 4px 12px -4px rgba(232, 114, 44, 0.6); }
.links { display: flex; gap: 2px; margin-inline-start: auto; }
.links a { padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background-color 0.2s; }
.links a:hover { background: var(--bg); color: var(--ink); }
.actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.links + .actions { margin-inline-start: 0; }
.lang {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 999px;
  color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line);
}
.lang:hover { background: var(--bg); }
.lang .ic { width: 18px; height: 18px; color: var(--muted); }
.menu { display: none; }
.menu summary {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; list-style: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--bg); }
.menu-panel {
  position: absolute; top: calc(100% + 8px); inset-inline: var(--gutter); display: grid; gap: 2px; padding: 10px;
  border-radius: var(--r); background: #fff; box-shadow: var(--sh-lg);
}
/* Fermé : retiré du rendu (sinon Chrome le mesure quand même, hors écran) */
.menu:not([open]) .menu-panel { display: none; }
.menu-panel a { padding: 12px 14px; border-radius: 12px; color: var(--ink); font-weight: 600; text-decoration: none; }
.menu-panel a:hover { background: var(--bg); }
.menu-panel .btn { margin-top: 6px; color: #fff; }
.top .wrap { position: relative; }

/* ---------- Héros ---------- */
.hero {
  position: relative; overflow: hidden; padding-block: 56px 96px;
  background:
    radial-gradient(900px 560px at var(--hx) 0%, rgba(251, 227, 210, 0.95) 0%, rgba(251, 227, 210, 0) 62%),
    linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm); font-weight: 700; font-size: 0.875rem;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
.hero h1 { margin: 24px 0 22px; }
.hero h1 em, .voice h2 em { font-style: normal; white-space: nowrap; }
.hero h1 em {
  color: var(--or-strong); padding-bottom: 0.06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C55 5 140 3 196 9' fill='none' stroke='%23E8722C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% 0.26em no-repeat;
}
.hero .lead { margin: 0; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 28px; }
.points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; }
.points li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; }
.points .ic { width: 20px; height: 20px; color: var(--ok); stroke-width: 2.4; }
.soon { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 0.875rem; color: var(--muted); text-decoration: none; }
a.soon { width: fit-content; color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--or-100); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.soon:hover { text-decoration-color: var(--or); }
.soon .ic { width: 18px; height: 18px; color: var(--or-text); }

.hero-art { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1.06; margin-inline-start: auto; }
.hero-blob {
  position: absolute; bottom: -6%; inset-inline-start: 0; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 165, 116, 0.5) 0%, rgba(244, 165, 116, 0.18) 45%, rgba(244, 165, 116, 0) 70%);
}
.hero-photo { position: absolute; top: 0; inset-inline-end: 0; width: 72%; height: 86%; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-phone { position: absolute; bottom: 0; inset-inline-start: 4%; width: 43%; }
.float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px;
  border-radius: 18px; background: rgba(255, 255, 255, 0.97); box-shadow: var(--sh-lg); line-height: 1.3;
}
[dir='rtl'] .float { padding: 10px 10px 10px 16px; }
.float b { display: block; font-size: 0.875rem; font-weight: 700; }
.float small { display: block; font-size: 0.75rem; color: var(--muted); }
.float-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--or-50); color: var(--or-text); }
.float-ic.ok { background: var(--ok-50); color: var(--ok); }
.float-ic .ic { width: 20px; height: 20px; }
.float-voice { top: 7%; inset-inline-start: 0; animation: bob 6s ease-in-out infinite; }
.float-track { bottom: 9%; inset-inline-end: 0; animation: bob 7s ease-in-out -2s infinite; }
.bars { display: flex; align-items: center; gap: 3px; height: 22px; margin-inline-start: 4px; }
.bars i, .wave-bars i { display: block; width: 3px; height: 100%; border-radius: 3px; background: var(--or); transform-origin: center; animation: eq 0.9s ease-in-out infinite alternate; }
.bars i:nth-child(2), .wave-bars i:nth-child(3n + 2) { animation-delay: -0.3s; height: 70%; }
.bars i:nth-child(3), .wave-bars i:nth-child(3n) { animation-delay: -0.6s; height: 85%; }
.bars i:nth-child(4), .wave-bars i:nth-child(4n) { animation-delay: -0.15s; height: 55%; }

/* ---------- Bandeau de confiance ---------- */
.trust { background: #fff; border-block: 1px solid var(--line); }
.trust-list { list-style: none; display: flex; justify-content: space-between; gap: 20px; margin-block: 0; padding: 24px 0; }
.trust-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trust-list b { white-space: nowrap; }
.trust-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--or-50); color: var(--or-text); }
.trust-list b { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.trust-list small { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }

/* ---------- Catégories ---------- */
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 16px;
  grid-template-areas: 'meal meal market pharma' 'meal meal fast bakery' 'parcel gas other other';
}
.cat { position: relative; isolation: isolate; overflow: hidden; min-height: 230px; border-radius: 24px; background: var(--navy); color: #fff; }
.cat > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cat:hover > img { transform: scale(1.05); }
.cat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 18, 28, 0) 30%, rgba(10, 18, 28, 0.35) 55%, rgba(10, 18, 28, 0.86) 100%); }
.cat-text { position: absolute; inset-inline: 22px; bottom: 20px; }
.cat h3 { margin: 0 0 4px; color: #fff; font-size: 1.3125rem; }
.cat p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.cat-meal { grid-area: meal; }
.cat-meal h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.cat-meal p { font-size: 1rem; }
.cat-meal .cat-text { inset-inline: 28px; bottom: 26px; }
.cat-market { grid-area: market; }
.cat-pharma { grid-area: pharma; }
.cat-fast { grid-area: fast; }
.cat-fast > img { object-position: 50% 62%; }
.cat-bakery { grid-area: bakery; }
.cat-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 24px; }
.cat-tile::after { display: none; }
.cat-tile .cat-text { position: static; }
.cat-mark { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: -1; opacity: 0.09; pointer-events: none; }
.cat-mark .ic { width: 128px; height: 128px; stroke-width: 1.3; }
.cat-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); color: var(--or-light); }
.cat-ic .ic { width: 26px; height: 26px; }
.cat-parcel { grid-area: parcel; }
.cat-parcel > img { object-position: 50% 40%; }
.cat-gas { grid-area: gas; }
.cat-gas > img { object-position: 50% 50%; }
.cat-other {
  grid-area: other; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 18px; align-items: start;
  background: radial-gradient(340px 220px at 100% 100%, rgba(255, 255, 255, 0.14), transparent 70%), linear-gradient(135deg, #8f3f10 0%, #b85217 100%);
}
.cat-other .cat-ic { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cat-other h3 { font-size: 1.5rem; }
.cat-other .btn { grid-column: 2; justify-self: start; align-self: end; }

/* ---------- Comment ça marche ---------- */
.how { background: var(--bg); }
.how-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.how-art { position: relative; display: grid; place-items: center; padding-block: 24px; }
.how-disc {
  position: absolute; width: min(480px, 96%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--or-100) 0%, var(--or-50) 52%, rgba(253, 241, 232, 0) 71%);
}
.how-disc::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgba(232, 114, 44, 0.35); }
.how-phone { position: relative; width: min(290px, 68%); }
.float-price { top: 16%; inset-inline-end: 2%; animation: bob 6.5s ease-in-out infinite; }
.steps { list-style: none; display: grid; gap: 14px; margin: 36px 0 0; padding: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: var(--sh-sm); }
.step-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--or-50); color: var(--or-text); }
.step-ic .ic { width: 26px; height: 26px; }
.step-n {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--or-strong); color: #fff; font-size: 0.75rem; font-weight: 800; box-shadow: 0 0 0 3px #fff;
}
.steps h3 { margin: 4px 0 6px; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- Commande vocale ---------- */
.voice {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(720px 420px at var(--hx) 15%, rgba(232, 114, 44, 0.28), transparent 62%),
    radial-gradient(640px 420px at calc(100% - var(--hx)) 105%, rgba(110, 231, 183, 0.1), transparent 60%),
    var(--navy);
}
.voice-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; }
.voice h2 { color: #fff; }
.voice h2 em { color: var(--or-light); }
.voice .eyebrow { color: var(--or-light); }
.voice .lead { color: rgba(255, 255, 255, 0.8); }
.langs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; padding: 0; }
.langs li { padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); font-weight: 600; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 0 0 32px; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.ticks .ic { width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--ok-50); color: var(--ok); stroke-width: 2.6; }
.voice .ticks li, .drivers .ticks li { color: rgba(255, 255, 255, 0.92); }
.voice .ticks .ic, .drivers .ticks .ic { background: rgba(110, 231, 183, 0.16); color: var(--ok-light); }
.voice-art { position: relative; display: grid; place-items: center; min-height: 600px; }
.voice-rings i {
  position: absolute; inset: 0; margin: auto; width: min(340px, 64%); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(244, 165, 116, 0.35); animation: ring 4.5s ease-out infinite;
}
.voice-rings i:nth-child(2) { animation-delay: -1.5s; }
.voice-rings i:nth-child(3) { animation-delay: -3s; }
.voice-phone { position: relative; z-index: 1; width: min(290px, 66%); }
.wave {
  position: absolute; z-index: 2; bottom: 13%; inset-inline-start: 0; display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 12px; border-radius: 22px; background: #fff; box-shadow: var(--sh-lg);
}
[dir='rtl'] .wave { padding: 12px 12px 12px 20px; }
.wave-mic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--or-strong); color: #fff; box-shadow: 0 0 0 6px rgba(232, 114, 44, 0.18); }
.wave-bars { display: flex; align-items: center; gap: 3px; height: 34px; }

/* ---------- Suivi et paiement ---------- */
.duo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.duo-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 48px 48px 0; border-radius: var(--r-xl); }
.duo-card h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.duo-card > p:not(.eyebrow) { color: var(--muted); max-width: 34em; }
.track-card { background: linear-gradient(180deg, #e9f5ef 0%, #f3f8f5 100%); }
.track-card .eyebrow { color: var(--ok); }
.track-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 32px; padding: 0; }
.track-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 700; box-shadow: var(--sh-sm); }
[dir='rtl'] .track-steps li { padding: 6px 6px 6px 12px; }
.track-steps .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ok); color: #fff; stroke-width: 3; }
.peek { position: relative; display: flex; justify-content: center; height: 330px; margin-top: auto; overflow: hidden; }
.peek-phone { width: min(300px, 78%); align-self: flex-start; }
.pay-card { padding-bottom: 48px; background: linear-gradient(180deg, var(--or-50) 0%, #fff8f3 100%); }
.methods { list-style: none; display: grid; gap: 10px; margin: 6px 0 22px; padding: 0; }
.methods li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh-sm); }
.methods b { display: block; font-weight: 700; line-height: 1.3; }
.methods small { display: block; font-size: 0.8125rem; color: var(--muted); }
.method-badge { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.0625rem; }
.method-badge.is-cash { background: var(--ok-50); color: var(--ok); }
/* Logo officiel de l'app de la banque (issue #116), en icône d'app : coins arrondis et filet */
.method-badge:not(.is-cash) { overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(15, 27, 42, 0.18); }
.method-badge img { width: 100%; height: 100%; object-fit: cover; }
.method-ok { margin-inline-start: auto; width: 22px; height: 22px; color: var(--ok); stroke-width: 2.6; }
.pay-card .note { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.pay-card .note .ic { width: 20px; height: 20px; color: var(--or-text); }

/* ---------- Livreurs ---------- */
.drivers { padding-top: 0; }
.drivers-card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px;
  padding: 72px 0 0; padding-inline-start: 72px; border-radius: var(--r-xl); background: var(--navy); color: #fff;
}
.drivers-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0.6; }
[dir='rtl'] .drivers-bg { transform: scaleX(-1); }
.drivers-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(19, 40, 61, 0.98) 0%, rgba(19, 40, 61, 0.9) 48%, rgba(19, 40, 61, 0.45) 100%); }
[dir='rtl'] .drivers-card::before { background: linear-gradient(270deg, rgba(19, 40, 61, 0.98) 0%, rgba(19, 40, 61, 0.9) 48%, rgba(19, 40, 61, 0.45) 100%); }
.drivers-copy { padding-bottom: 72px; }
.drivers h2 { color: #fff; }
.drivers .eyebrow { color: var(--or-light); }
.drivers .lead { color: rgba(255, 255, 255, 0.8); }
.vehicles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; padding: 0; }
.vehicles li { padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-weight: 600; font-size: 0.875rem; }
.drivers-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.drivers-cta .note { max-width: 32ch; margin: 0; color: rgba(255, 255, 255, 0.78); }
.drivers-art { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.drivers-phone { width: min(300px, 82%); margin-bottom: -150px; }

/* ---------- Commerces ---------- */
.merchants { background: var(--bg); }
.merchants-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.merchants-copy .ticks { margin-top: 28px; }
.merchant-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-top: 8px; border-radius: 24px; box-shadow: var(--sh-md); }
.merchant-photo img { width: 100%; height: 100%; object-fit: cover; }
.wa-badge {
  position: absolute; bottom: 16px; inset-inline-start: 16px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 12px;
  border-radius: 14px; background: #fff; font-weight: 700; font-size: 0.875rem; box-shadow: var(--sh-md);
}
.wa-badge .ic { color: var(--ok); }
.form { position: relative; display: grid; gap: 18px; padding: 40px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-lg); }
.form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.form-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--or-50); color: var(--or-text); }
.form h3 { margin: 0; font-size: 1.375rem; }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--field); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font: inherit; font-weight: 500; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.form textarea { resize: vertical; min-height: 96px; }
.form select {
  appearance: none; padding-inline-end: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}
[dir='rtl'] .form select { background-position: left 16px center; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--or-strong); box-shadow: 0 0 0 4px rgba(232, 114, 44, 0.18); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form button { width: 100%; margin-top: 4px; }
.form .note { margin: 0; font-size: 0.8125rem; text-align: center; }
.form .note a { color: var(--or-text); font-weight: 600; }
/* Champ piège : invisible et hors du parcours au clavier, sans sortir de l'écran */
.form .trap { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------- Questions ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.faq-head { position: sticky; top: 112px; }
.faq-head .lead { font-size: 1.0625rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; list-style: none; cursor: pointer; font-weight: 700; font-size: 1.0625rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .faq-ic { background: var(--or-50); color: var(--or-text); }
.faq-ic { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--bg); color: var(--ink); transition: transform 0.25s, background-color 0.25s; }
.faq-list details[open] .faq-ic { transform: rotate(45deg); background: var(--or-strong); color: #fff; }
.faq-list details:not([open]) > p { display: none; }
.faq-list details p { margin: 0 0 24px; padding-inline-end: 54px; color: var(--muted); line-height: 1.7; }

/* ---------- Dernier appel ---------- */
.final { padding-bottom: clamp(72px, 4rem + 4vw, 128px); }
.final-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px; align-items: center;
  padding: 72px; border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(520px 380px at 100% 50%, rgba(232, 114, 44, 0.55), transparent 70%),
    linear-gradient(120deg, #7f370d 0%, #a84a14 55%, #b85217 100%);
}
[dir='rtl'] .final-card { background: radial-gradient(520px 380px at 0% 50%, rgba(232, 114, 44, 0.55), transparent 70%), linear-gradient(240deg, #7f370d 0%, #a84a14 55%, #b85217 100%); }
.final h2 { color: #fff; font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem); }
.final p { margin: 0; font-size: 1.1875rem; color: #fff; }
.final .ctas { margin-bottom: 0; }
.final-art { position: relative; height: 320px; }
.final-dot { position: absolute; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16), 0 24px 48px -12px rgba(0, 0, 0, 0.45); }
.final-dot img { width: 100%; height: 100%; object-fit: cover; }
.d1 { top: 0; inset-inline-end: 8%; width: 210px; height: 210px; }
.d2 { bottom: 0; inset-inline-start: 0; width: 160px; height: 160px; }
.d3 { bottom: 24px; inset-inline-end: 0; width: 118px; height: 118px; }

/* ---------- Pied de page ---------- */
.foot { padding-top: 80px; background: var(--navy-deep); color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot .brand { color: #fff; }
.foot-brand p { max-width: 30ch; margin: 20px 0; }
.foot-brand .soon-pill { display: inline-flex; align-items: center; gap: 8px; max-width: none; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.soon-pill .ic { width: 16px; height: 16px; color: var(--or-light); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-col h2 { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
html[lang='ar'] .foot-col h2 { letter-spacing: 0; font-size: 0.9375rem; }
.foot a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot a[aria-current='page'] { color: #fff; font-weight: 700; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-block: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
.made-by a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(244, 165, 116, 0.7); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.made-by a:hover { text-decoration-color: var(--or-light); }

/* ---------- Pages légales et remerciement ---------- */
.is-page main { background: #fff; }
.page-hero { padding-block: 72px 40px; background: radial-gradient(700px 360px at var(--hx) 0%, rgba(251, 227, 210, 0.8), transparent 65%), linear-gradient(180deg, #fff8f2, #fff); }
.page-hero h1 { margin: 0 0 18px; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -0.035em; }
html[lang='ar'] .page-hero h1 { letter-spacing: 0; line-height: 1.3; }
.updated { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.875rem; color: var(--muted); }
.updated .ic { width: 18px; height: 18px; }
.legal { padding-bottom: 104px; }
.legal-block { padding-block: 28px; border-top: 1px solid var(--line); }
.legal-block h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 1.3125rem; letter-spacing: -0.015em; line-height: 1.3; }
.legal-n { font-size: 0.8125rem; font-weight: 800; color: var(--or-text); font-variant-numeric: tabular-nums; }
.legal-block p { margin: 0; color: var(--ink-2); line-height: 1.75; }
.thanks { padding-block: 96px 120px; }
.thanks-card { padding: 64px 32px; border-radius: var(--r-lg); background: #fff; text-align: center; box-shadow: var(--sh-lg); }
.thanks-card .lead { margin-inline: auto; }
.thanks-card h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -0.035em; }
.big { display: inline-grid; place-items: center; width: 88px; height: 88px; margin-bottom: 24px; border-radius: 28px; background: var(--ok-50); color: var(--ok); }
.big .ic { width: 44px; height: 44px; stroke-width: 2.6; }

/* ---------- Animations (décor seulement) ---------- */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(4, 120, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes ring { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
/* ---------- Installer l'app (issues #111, #114) ---------- */
.install-card {
  --pad: clamp(20px, 4vw, 56px);
  position: relative; overflow: hidden; padding: var(--pad); border-radius: var(--r-xl);
  /* La lueur orange du coin est un halo qui respire (.aura-install, issue #117) */
  background:
    radial-gradient(520px 320px at calc(100% - var(--hx)) 100%, rgba(19, 40, 61, 0.07), transparent 70%),
    linear-gradient(180deg, #fff7f1 0%, #fff 55%);
  box-shadow: inset 0 0 0 1px var(--or-100), var(--sh-md);
}
.install-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.install-copy h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); letter-spacing: -0.035em; }
.install-copy .lead { margin: 0; }
.install-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.install-perks li { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
[dir='rtl'] .install-perks li { padding: 10px 10px 10px 14px; }
.perk-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--or-50); color: var(--or-text); }
.perk-ic .ic { width: 18px; height: 18px; }

/* Onglets sans script : boutons radio cachés (au clavier : flèches), étiquettes en contrôle segmenté */
.setup { min-width: 0; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border: 0; }
.setup-legend { float: inline-start; width: 100%; margin: 0 0 14px; padding: 0; font-weight: 600; color: var(--ink-2); }
.tab-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tabs { clear: both; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 18px; background: rgba(15, 27, 42, 0.06); }
.tabs label { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 14px; border-radius: 14px; color: var(--ink-2); line-height: 1.2; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
[dir='rtl'] .tabs label { padding: 8px 14px 8px 20px; }
.tabs label:hover { background: rgba(255, 255, 255, 0.65); }
.tabs label .ic { width: 20px; height: 20px; color: var(--muted); }
.tabs b { display: block; font-size: 0.9375rem; font-weight: 700; }
.tabs small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
#dev-iphone-safari:checked ~ .tabs [for='dev-iphone-safari'],
#dev-iphone-chrome:checked ~ .tabs [for='dev-iphone-chrome'],
#dev-android-chrome:checked ~ .tabs [for='dev-android-chrome'] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 27, 42, 0.08), 0 8px 18px -8px rgba(15, 27, 42, 0.28); }
#dev-iphone-safari:checked ~ .tabs [for='dev-iphone-safari'] .ic,
#dev-iphone-chrome:checked ~ .tabs [for='dev-iphone-chrome'] .ic,
#dev-android-chrome:checked ~ .tabs [for='dev-android-chrome'] .ic { color: var(--or-text); }
#dev-iphone-safari:focus-visible ~ .tabs [for='dev-iphone-safari'],
#dev-iphone-chrome:focus-visible ~ .tabs [for='dev-iphone-chrome'],
#dev-android-chrome:focus-visible ~ .tabs [for='dev-android-chrome'] { outline: 3px solid var(--ink); outline-offset: 2px; }
.swipe-hint { display: none; }
.panel { display: none; margin-top: 32px; }
#dev-iphone-safari:checked ~ .panels .panel-iphone-safari,
#dev-iphone-chrome:checked ~ .panels .panel-iphone-chrome,
#dev-android-chrome:checked ~ .panels .panel-android-chrome { display: block; animation: panel-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes panel-in { from { transform: translateY(12px); } to { transform: none; } }

/* Quatre écrans côte à côte, reliés par une flèche ; carrousel à faire glisser sur téléphone */
.mock-steps { --gap: clamp(18px, 2.6vw, 36px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mock-steps:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
.mock-step { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mock-step:not(:last-child)::after {
  content: ''; position: absolute; top: 30%; inset-inline-end: calc(var(--gap) / -2 - 6px); width: 12px; height: 12px;
  border-top: 2.5px solid var(--or); border-inline-end: 2.5px solid var(--or); border-radius: 2px; transform: rotate(45deg);
}
[dir='rtl'] .mock-step:not(:last-child)::after { transform: rotate(-45deg); }
.cap { display: flex; align-items: flex-start; gap: 12px; }
.cap-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 0.875rem; }
.is-done .cap-n { background: var(--ok); }
.cap-n .ic { width: 16px; height: 16px; stroke-width: 3; }
.cap b { display: block; margin: 3px 0 4px; font-size: 1rem; line-height: 1.3; }
.cap p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* Téléphone dessiné : tailles en cqw (largeur de l'écran), net à toutes les tailles */
.mock {
  position: relative; width: 100%; max-width: 236px; margin-inline: auto; aspect-ratio: 9 / 18.6; padding: 3.4%;
  border-radius: 16% / 7.7%; container-type: inline-size;
  background: linear-gradient(150deg, #3a4656 0%, #0d1622 40%, #111b28 70%, #2a3544 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #0a111b, 0 2px 4px rgba(15, 27, 42, 0.12), 0 32px 64px -28px rgba(15, 27, 42, 0.6), 0 14px 28px -16px rgba(15, 27, 42, 0.35);
}
.mock-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 13% / 6.2%; background: #f4f5f7; color: var(--ink); font-size: 4.4cqw; line-height: 1.25; }
.mock .ic { width: 6cqw; height: 6cqw; }
.m-status { position: relative; z-index: 4; display: flex; flex: none; align-items: center; justify-content: space-between; height: 12cqw; padding: 0 8cqw; background: #fff; font-size: 4.4cqw; }
.m-status b { font-weight: 700; }
.m-island { position: absolute; top: 2.8cqw; left: 50%; width: 27cqw; height: 7.6cqw; border-radius: 99px; background: #0b0f14; transform: translateX(-50%); }
.m-cam { position: absolute; top: 3.4cqw; left: 50%; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #0b0f14; transform: translateX(-50%); }
.m-batt { width: 7cqw; height: 3.6cqw; padding: 0.5cqw; border: 0.5cqw solid currentColor; border-radius: 1.2cqw; background: currentColor content-box; opacity: 0.85; }
.m-page { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.m-page img { width: 100%; height: auto; }
.m-bar { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 2cqw; padding: 2.4cqw 3.4cqw; background: rgba(249, 249, 251, 0.97); }
.m-bar-top { border-bottom: 1px solid rgba(15, 27, 42, 0.08); }
.m-bar-bottom { flex-direction: column; align-items: stretch; gap: 2cqw; padding: 3cqw 4cqw 5cqw; border-top: 1px solid rgba(15, 27, 42, 0.08); }
.m-url { display: flex; flex: 1; align-items: center; justify-content: center; gap: 1.6cqw; min-width: 0; height: 9.6cqw; padding: 0 3cqw; border-radius: 99px; background: #e8eaee; color: var(--ink-2); font-size: 4cqw; font-weight: 600; white-space: nowrap; }
.m-url span { overflow: hidden; text-overflow: ellipsis; }
.m-url .ic { width: 3.4cqw; height: 3.4cqw; stroke-width: 2.8; }
.m-bar-bottom .m-url { flex: none; background: #fff; box-shadow: 0 0.4cqw 2cqw rgba(15, 27, 42, 0.14); }
.m-tools { display: flex; align-items: center; justify-content: space-between; padding: 0 1cqw; }
.m-tools-alone { position: relative; z-index: 1; flex: none; padding: 2.4cqw 5cqw 5cqw; background: rgba(249, 249, 251, 0.97); border-top: 1px solid rgba(15, 27, 42, 0.08); }
.m-key { position: relative; display: grid; flex: none; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; color: var(--ink-2); }
.m-bar-bottom .m-key { color: #007aff; }
.m-gesture { position: relative; z-index: 1; flex: none; height: 6cqw; background: #fff; }
.m-gesture::after { content: ''; position: absolute; inset: 0; width: 30cqw; height: 1.2cqw; margin: auto; border-radius: 99px; background: #1f2937; }

/* Ce qu'il faut toucher : orange, avec une onde qui part du doigt */
.m-hl { z-index: 2; background: var(--or-strong) !important; color: #fff !important; box-shadow: 0 0 0 1.3cqw rgba(232, 114, 44, 0.26), 0 3cqw 6cqw -2cqw rgba(232, 114, 44, 0.75); }
.m-tap { position: absolute; inset: -1.6cqw; border: 0.8cqw solid var(--or); border-radius: inherit; pointer-events: none; animation: tap 1.8s ease-out infinite; }
@keyframes tap { 0% { transform: scale(0.85); opacity: 0.95; } 100% { transform: scale(1.65); opacity: 0; } }
.m-dim { position: absolute; inset: 0; z-index: 2; background: rgba(10, 16, 24, 0.4); }

/* iOS : feuille de partage et ajout à l'écran d'accueil */
.m-sheet { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; display: grid; gap: 3cqw; padding: 2.6cqw 4cqw 6cqw; border-radius: 7cqw 7cqw 0 0; background: #f2f2f7; box-shadow: 0 -4cqw 10cqw -4cqw rgba(0, 0, 0, 0.3); }
.m-sheet::before { content: ''; justify-self: center; width: 11cqw; height: 1.2cqw; border-radius: 99px; background: #c7c7cc; }
.m-sheet-head, .m-card { display: flex; align-items: center; gap: 3cqw; min-width: 0; padding: 2.6cqw; border-radius: 4cqw; background: #fff; }
.m-sheet-head b, .m-card b { display: block; font-size: 4.2cqw; font-weight: 700; }
.m-sheet-head small, .m-card small { display: block; font-size: 3.4cqw; color: var(--muted); }
.m-app { flex: none; width: 11cqw; height: 11cqw; border-radius: 2.8cqw; }
.m-apps { display: flex; justify-content: space-between; padding: 0 1.5cqw; }
.m-apps i { width: 13cqw; height: 13cqw; border-radius: 3.4cqw; background: #34c759; }
.m-apps i:nth-child(2) { background: #0a84ff; }
.m-apps i:nth-child(3) { background: #5e5ce6; }
.m-apps i:nth-child(4) { background: #ff9f0a; }
.m-list { display: grid; padding: 0.8cqw; border-radius: 4cqw; background: #fff; }
.m-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.8cqw 3.2cqw; border-radius: 3cqw; font-size: 3.9cqw; font-weight: 500; }
.m-row + .m-row { box-shadow: 0 -1px 0 #e5e5ea; }
.m-row .ic { width: 5.2cqw; height: 5.2cqw; }
.m-row-hl { z-index: 1; background: var(--or-50); color: var(--or-text); font-weight: 700; box-shadow: inset 0 0 0 0.7cqw var(--or) !important; }
.m-row-hl .m-tap { inset: -1cqw; animation-name: tap-row; }
@keyframes tap-row { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.08, 1.5); opacity: 0; } }
.m-modal { position: absolute; z-index: 3; inset-inline: 0; top: 12cqw; bottom: 0; display: grid; align-content: start; gap: 5cqw; padding: 0 4cqw; border-radius: 7cqw 7cqw 0 0; background: #f2f2f7; }
.m-modal-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2cqw; padding-top: 4cqw; color: #0060c7; font-size: 3.9cqw; }
.m-modal-bar b { color: var(--ink); font-size: 3.6cqw; font-weight: 700; line-height: 1.2; text-align: center; }
/* Clavier de l'iPhone, ouvert sur le nom de l'icône */
.m-kbd { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 2.2cqw; padding: 2.6cqw 1.6cqw 7cqw; background: #d1d4da; }
.m-kbd > span { display: flex; justify-content: center; gap: 1.4cqw; }
.m-kbd i { flex: 0 0 8.2cqw; height: 9.4cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0.4cqw 0 rgba(0, 0, 0, 0.18); }
.m-kbd > span:last-child i { flex-basis: 20cqw; background: #adb2bb; }
.m-kbd .m-space { flex: 1 1 auto !important; background: #fff !important; }
.m-hl-text { position: relative; padding: 1.6cqw 3.2cqw; border-radius: 99px; font-weight: 700; }

/* Android : menu ⋮ de Chrome et boîte « Installer l'application ? » */
.m-menu { position: absolute; z-index: 3; top: 12.5cqw; inset-inline-end: 2cqw; width: 70%; padding: 1.6cqw 0; border-radius: 3.6cqw; background: #fff; box-shadow: 0 4cqw 12cqw -2cqw rgba(0, 0, 0, 0.38); }
.m-menu-keys { display: flex; justify-content: space-around; padding: 0 1.6cqw 1.6cqw; box-shadow: 0 1px 0 #eceef1; }
.m-menu .m-row { flex-direction: row-reverse; justify-content: flex-end; gap: 3.4cqw; margin: 0 1.6cqw; padding-block: 2.6cqw; box-shadow: none; }
.m-dialog { position: absolute; z-index: 3; inset-inline: 6cqw; top: 50%; display: grid; gap: 4cqw; padding: 6cqw 5cqw 3.6cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 6cqw 16cqw -4cqw rgba(0, 0, 0, 0.45); transform: translateY(-50%); }
.m-dialog > b { font-size: 4.8cqw; font-weight: 700; line-height: 1.2; }
.m-dialog .m-card { padding: 0; background: none; }
.m-actions { display: flex; justify-content: flex-end; gap: 1.6cqw; color: #1558b0; font-size: 4cqw; font-weight: 700; }
.m-actions > span { position: relative; padding: 2cqw 3.6cqw; border-radius: 99px; }

/* Écran d'accueil : l'icône de l'app arrivée parmi les autres */
.m-home { display: flex; flex-direction: column; height: 100%; color: #fff; background: radial-gradient(120% 70% at 15% 0%, rgba(244, 165, 116, 0.75) 0%, rgba(244, 165, 116, 0) 60%), linear-gradient(170deg, #1c3550 0%, #13283d 50%, #7a3a12 100%); }
.m-home .m-status { background: none; }
.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7cqw 4.4cqw; padding: 8cqw 6cqw; }
.m-grid i, .m-dock i { aspect-ratio: 1; border-radius: 26%; background: rgba(255, 255, 255, 0.17); }
.m-ours { position: relative; display: grid; justify-items: center; gap: 1.6cqw; }
.m-ours .m-app { width: 100%; height: auto; aspect-ratio: 1; border-radius: 24%; box-shadow: 0 0 0 1.2cqw rgba(244, 165, 116, 0.55), 0 4cqw 8cqw -2cqw rgba(232, 114, 44, 0.95); animation: hs-pop 2.4s ease-in-out infinite; }
.m-ours small { position: absolute; top: 100%; margin-top: 1.4cqw; font-size: 2.7cqw; font-weight: 600; white-space: nowrap; }
.m-dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4.4cqw; margin: auto 4cqw 4cqw; padding: 3.4cqw; border-radius: 7cqw; background: rgba(255, 255, 255, 0.16); }
.is-android .m-dock { background: none; }
@keyframes hs-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.install-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--or-100); }
.install-cta .note { max-width: 34em; margin: 0; }
.install-bar { display: none; }

/* ---------- Revenir en haut et barre de lecture (issue #114) ---------- */
.to-top {
  position: fixed; z-index: 55; inset-inline-end: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 28px -10px rgba(15, 27, 42, 0.6); transition: background-color 0.2s;
}
.to-top:hover { background: var(--or-strong); }
.to-top .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  /* Apparaît après un écran de défilement ; sans prise en charge, il reste simplement visible */
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(root); animation-range: 0 640px; }
  .progress {
    display: block; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--or) 0%, #f4a574 100%); animation: progress linear both; animation-timeline: scroll(root);
  }
  [dir='rtl'] .progress { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--or) 0%, #f4a574 100%); }
}
@keyframes to-top-in { 0%, 55% { opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.85); } 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes progress { to { transform: scaleX(1); } }

/* ---------- Paiement : les autres transferts (issue #115) ---------- */
.more-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: -8px 0 22px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--or-100); }
.more-pay-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-text); }
html[lang='ar'] .more-pay-label { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.more-pay ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.more-pay li { display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 4px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm); font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.more-pay li img { flex: none; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- Fonds vivants aux couleurs de la marque (issue #117) ---------- */
/* Sans script : halos en dégradé radial (aucun flou) qui dérivent, lueur qui respire, reflet qui
   passe, grain fixe. Seuls transform et opacity sont animés. Chaque halo garde une marge sur les
   côtés plus grande que sa dérive : il reste dans la largeur de sa section à chaque instant (aucun
   débordement de 320 à 1440 px) et la section le coupe en hauteur. Près du texte, les halos sont
   plus sombres que le fond ou aussi clairs que l'ancien décor : le contraste reste AA. Animations
   réduites : chaque halo reste à sa place, à pleine intensité, comme un fond dessiné. */
:root { --sx: 1; }
[dir='rtl'] { --sx: -1; }
.hero, .voice, .install-card, .final-card { isolation: isolate; }
.aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.aura i {
  position: absolute; display: block; width: var(--w); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--c) / var(--a)) 0%, rgb(var(--c) / calc(var(--a) * var(--k, 0.45))) 48%, rgb(var(--c) / 0) 100%);
  animation: aura-drift var(--t, 26s) ease-in-out var(--d, 0s) infinite;
}
/* Lueur qui respire (comme l'icône de l'app sur l'écran d'accueil dessiné) : elle ne grandit jamais */
.aura-voice .aura-2, .aura-drivers .aura-1, .aura-final .aura-2, .aura-install .aura-1 { animation: aura-breathe var(--t, 7s) ease-in-out var(--d, 0s) infinite; }
/* Reflet de lumière qui traverse la carte de temps en temps, sans jamais en sortir */
.aura i.aura-sheen {
  top: 0; bottom: 0; inset-inline-start: 0; width: 36%; aspect-ratio: auto; border-radius: 0; opacity: 0;
  background: linear-gradient(calc(102deg * var(--sx)), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, var(--sheen, 0.1)) 50%, rgba(255, 255, 255, 0) 82%);
  animation: aura-sheen 11s cubic-bezier(0.45, 0, 0.25, 1) 3s infinite;
}
/* Grain très fin sur les fonds sombres et orange (une tuile SVG fixe, calculée une fois) */
.aura-voice::after, .aura-drivers::after, .aura-final::after {
  content: ''; position: absolute; inset: 0; opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
}
@keyframes aura-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35% { transform: translate3d(calc(var(--dx, 6%) * var(--sx)), calc(var(--dy, 10%) * -1), 0) scale(1.05); }
  70% { transform: translate3d(calc(var(--dx, 6%) * var(--sx) * -1), var(--dy, 10%), 0) scale(0.95); }
}
@keyframes aura-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
@keyframes aura-sheen {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  7%, 27% { opacity: 1; }
  34%, 100% { transform: translate3d(calc(177% * var(--sx)), 0, 0); opacity: 0; }
}

/* Héros : lumière pêche autour de la photo, braise orange sous le téléphone, voile clair sous le texte */
.aura-hero .aura-1 { --c: 244 165 116; --a: 0.5; --k: 0.55; --w: 56%; inset-inline-start: 40%; top: -20%; --dx: 3%; --t: 22s; }
.aura-hero .aura-2 { --c: 232 114 44; --a: 0.3; --w: 44%; inset-inline-start: 50%; top: 46%; --dx: 7%; --t: 28s; --d: -9s; }
.aura-hero .aura-3 { --c: 251 227 210; --a: 0.9; --w: 40%; inset-inline-start: 5%; top: 50%; --t: 26s; --d: -15s; }
.hero-blob { animation: aura-breathe 6s ease-in-out infinite; }

/* Commande vocale (nuit) : halo orange autour du téléphone, lueur pêche qui respire, touche menthe */
.aura-voice .aura-1 { --c: 232 114 44; --a: 0.55; --k: 0.55; --w: 54%; inset-inline-start: 43%; top: -6%; --dx: 2.5%; --t: 20s; }
.aura-voice .aura-2 { --c: 244 165 116; --a: 0.28; --w: 30%; inset-inline-start: 60%; top: 56%; --t: 6.5s; }
.aura-voice .aura-3 { --c: 110 231 183; --a: 0.13; --w: 38%; inset-inline-start: 6%; top: 60%; --dx: 5%; --t: 28s; --d: -10s; }

/* Installer l'app : la lueur orange du coin respire, halos pêche et orange entre les écrans (loin des légendes) */
.aura-install .aura-1 { --c: 232 114 44; --a: 0.2; --w: 64%; inset-inline-start: 36%; top: 0; margin-top: -19%; aspect-ratio: 1.7; --t: 6s; }
.aura-install .aura-2 { --c: 244 165 116; --a: 0.34; --w: 36%; inset-inline-start: 6%; top: 37%; --t: 24s; --d: -6s; }
.aura-install .aura-3 { --c: 232 114 44; --a: 0.16; --w: 34%; inset-inline-start: 60%; top: 38%; --t: 30s; --d: -18s; }

/* Livreurs (nuit) : braise qui respire derrière le téléphone, halo pêche en haut, reflet qui passe */
.aura-drivers .aura-1 { --c: 232 114 44; --a: 0.62; --k: 0.55; --w: 50%; inset-inline-start: 50%; top: 18%; --t: 6.5s; }
.aura-drivers .aura-2 { --c: 244 165 116; --a: 0.22; --w: 30%; inset-inline-start: 62%; top: -18%; --t: 22s; --d: -7s; }
.aura-drivers .aura-3 { --c: 232 114 44; --a: 0.16; --w: 30%; inset-inline-start: 34%; top: 70%; --t: 28s; --d: -16s; }

/* Dernier appel (orange) : soleil pêche qui respire derrière les photos, halo clair en haut, reflet */
.aura-final { --sheen: 0.09; }
.aura-final .aura-1 { --c: 255 214 180; --a: 0.16; --w: 36%; inset-inline-start: 54%; top: -50%; --t: 22s; }
.aura-final .aura-2 { --c: 244 165 116; --a: 0.55; --k: 0.55; --w: 40%; inset-inline-start: 60%; top: -6%; --t: 7s; --d: -2s; }
.aura-final .aura-3 { --c: 255 236 220; --a: 0.14; --w: 26%; inset-inline-start: 66%; top: 54%; --t: 20s; --d: -11s; }
/* Une colonne : les halos passent sous le texte, du côté des images ; dérive plus courte */
@media (max-width: 900px) {
  .aura-hero .aura-1 { --w: 90%; inset-inline-start: 5%; top: 56%; --dx: 2%; }
  .aura-hero .aura-2 { --w: 70%; inset-inline-start: 15%; top: 76%; }
  .aura-hero .aura-3 { --w: 80%; inset-inline-start: 10%; top: 26%; --dx: 3%; }
  .aura-voice .aura-1 { --w: 90%; inset-inline-start: 5%; top: 56%; --dx: 2%; }
  .aura-voice .aura-2 { --w: 70%; inset-inline-start: 15%; top: 72%; }
  .aura-voice .aura-3 { --w: 80%; inset-inline-start: 10%; top: 84%; --dx: 3%; }
  .aura-install .aura-1 { --a: 0.18; --w: 100%; inset-inline-start: 0; margin-top: -29%; }
  .aura-install .aura-2 { --w: 90%; inset-inline-start: 5%; top: 52%; --dx: 2%; }
  .aura-install .aura-3 { --w: 70%; inset-inline-start: 15%; top: 47%; }
  .aura-drivers .aura-1 { --w: 100%; inset-inline-start: 0; top: 60%; }
  .aura-drivers .aura-2 { --w: 70%; inset-inline-start: 15%; top: 46%; }
  .aura-drivers .aura-3 { --w: 80%; inset-inline-start: 10%; top: 84%; --dx: 3%; }
  .aura-final .aura-1 { --w: 80%; inset-inline-start: 10%; top: 70%; --dx: 3%; }
  .aura-final .aura-2 { --w: 100%; inset-inline-start: 0; top: 58%; }
  .aura-final .aura-3 { --w: 70%; inset-inline-start: 15%; top: 62%; }
}

/* ---------- Apparition au défilement (décor, mouvement seulement : le texte reste lisible) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cat, .steps li, .duo-card, .faq-list details, .final-card { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes rise { from { transform: translateY(40px) scale(0.97); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (min-width: 901px) {
  .hero-phone { transform: rotate(-4deg); }
  [dir='rtl'] .hero-phone { transform: rotate(4deg); }
  .float-voice { top: 3%; inset-inline-start: -9%; }
}
@media (max-width: 1120px) {
  .links { display: none; }
  .links + .actions { margin-inline-start: auto; }
  .menu { display: block; }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-list b { white-space: normal; }
}
@media (max-width: 900px) {
  .hero { padding-block: 40px 64px; }
  .hero-grid, .how-grid, .voice-grid, .duo-grid, .merchants-grid, .faq-grid, .final-card { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 48px; }
  .hero-art { max-width: 480px; margin-inline: auto; }
  .how-grid, .voice-grid { gap: 40px; }
  .how-art { order: 2; }
  .voice-art { min-height: 0; padding-block: 24px 8px; }
  .merchants-grid, .faq-grid { gap: 40px; }
  .faq-head { position: static; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); grid-template-areas: 'meal meal' 'market pharma' 'fast bakery' 'parcel gas' 'other other'; }
  .cat { min-height: 190px; }
  .cat-meal { min-height: 260px; }
  .drivers-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 48px 32px 0; }
  .drivers-copy { padding-bottom: 40px; }
  .drivers-art { height: 380px; align-items: flex-start; overflow: hidden; }
  .drivers-phone { width: min(280px, 76%); margin: 0; }
  .drivers-card::before, [dir='rtl'] .drivers-card::before { background: linear-gradient(180deg, rgba(19, 40, 61, 0.97) 0%, rgba(19, 40, 61, 0.9) 60%, rgba(19, 40, 61, 0.7) 100%); }
  .final-card, [dir='rtl'] .final-card {
    padding: 56px 40px;
    background: radial-gradient(460px 280px at 50% 100%, rgba(232, 114, 44, 0.5), transparent 70%), linear-gradient(160deg, #7f370d 0%, #a84a14 60%, #b85217 100%);
  }
  .final-art { height: 220px; }
  .d1 { width: 160px; height: 160px; inset-inline-end: 30%; }
  .d2 { width: 120px; height: 120px; }
  .d3 { width: 96px; height: 96px; bottom: 12px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .bar { gap: 12px; min-height: 64px; }
  .actions .btn-sm { display: none; }
  .trust-list { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .ctas .btn { flex: 1 1 100%; }
  .points { flex-direction: column; gap: 10px; }
  .float { padding: 8px 12px 8px 8px; gap: 10px; border-radius: 14px; }
  [dir='rtl'] .float { padding: 8px 8px 8px 12px; }
  .float-ic { width: 34px; height: 34px; border-radius: 10px; }
  .float b { font-size: 0.8125rem; }
  .float small { font-size: 0.6875rem; }
  .bars { display: none; }
  .float-track { bottom: 6%; }
  .section-head { margin-bottom: 32px; }
  .bento { gap: 12px; grid-auto-rows: minmax(170px, auto); }
  .cat { min-height: 170px; border-radius: 20px; }
  .cat-text { inset-inline: 16px; bottom: 14px; }
  .cat h3 { font-size: 1.125rem; }
  .cat p { font-size: 0.8125rem; }
  .cat-tile { padding: 18px; gap: 14px; }
  .cat-ic { width: 44px; height: 44px; border-radius: 14px; }
  .cat-mark .ic { width: 88px; height: 88px; }
  .cat-other { grid-template-columns: minmax(0, 1fr); }
  .cat-other .btn { grid-column: 1; }
  .steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .step-ic { width: 48px; height: 48px; border-radius: 14px; }
  .step-n { top: 10px; inset-inline-start: 10px; }
  .wave { bottom: 8%; gap: 10px; padding: 8px 14px 8px 8px; }
  [dir='rtl'] .wave { padding: 8px 8px 8px 14px; }
  .wave-mic { width: 38px; height: 38px; }
  .wave-bars { height: 26px; }
  .duo-card { padding: 32px 24px 0; border-radius: 24px; }
  .pay-card { padding-bottom: 32px; }
  .peek { height: 280px; }
  .drivers-card { padding: 40px 22px 0; border-radius: 24px; }
  .drivers-art { height: 320px; }
  .form { padding: 26px 20px; border-radius: 24px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .faq-list summary { font-size: 1rem; padding-block: 18px; }
  .faq-list details p { padding-inline-end: 8px; }
  .final-card { padding: 44px 24px; border-radius: 24px; }
  .final-art { height: 180px; }
  .d1 { width: 132px; height: 132px; inset-inline-end: 26%; }
  .d2 { width: 100px; height: 100px; }
  .d3 { width: 80px; height: 80px; }
  .foot { padding-top: 56px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .foot-bottom { margin-top: 44px; }
  .legal-block h2 { font-size: 1.1875rem; }
}
@media (max-width: 400px) {
  .lang .ic { display: none; }
  .lang { padding: 8px 12px; }
  .brand { font-size: 1rem; }
  .brand img { width: 36px; height: 36px; border-radius: 11px; }
}
@media (max-width: 359px) {
  .top .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Installer l'app, retour en haut, bandeau : tablette et téléphone (issues #111, #114) */
@media (max-width: 1000px) {
  .install-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .install-perks { display: flex; flex-wrap: wrap; }
  .install-perks li { padding-block: 8px; }
  .perk-ic { width: 30px; height: 30px; border-radius: 9px; }
  .perk-ic .ic { width: 16px; height: 16px; }
  /* Carrousel : on fait glisser les écrans, le suivant dépasse pour le montrer */
  .mock-steps {
    display: flex; gap: 16px; margin-inline: calc(var(--pad) * -1); padding: 6px var(--pad) 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .mock-steps::-webkit-scrollbar { display: none; }
  .mock-step { flex: 0 0 min(250px, 68%); scroll-snap-align: start; }
  .mock-step:not(:last-child)::after { display: none; }
  .swipe-hint { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; }
  .swipe-hint .ic { width: 18px; height: 18px; color: var(--or-text); animation: nudge 1.6s ease-in-out infinite; }
  .panel { margin-top: 14px; }
}
@keyframes bar-away {
  0%, 100% { transform: none; opacity: 1; visibility: visible; }
  6%, 94% { transform: translateY(130%); opacity: 0; visibility: hidden; }
}
@keyframes top-drop {
  0%, 100% { translate: 0 0; }
  6%, 94% { translate: 0 74px; }
}
@keyframes nudge { 0%, 100% { translate: 0; } 50% { translate: 5px; } }
[dir='rtl'] .swipe-hint .ic { animation-name: nudge-rtl; }
@keyframes nudge-rtl { 0%, 100% { translate: 0; } 50% { translate: -5px; } }
@media (max-width: 760px) {
  /* Barre « Installer » toujours à portée de pouce sur la page d'accueil, bouton « en haut » juste au-dessus */
  .is-home { padding-bottom: 86px; }
  .install-bar {
    position: fixed; z-index: 60; inset-inline: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 10px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.97); box-shadow: var(--sh-lg), inset 0 0 0 1px var(--line);
  }
  [dir='rtl'] .install-bar { padding: 10px 12px 10px 10px; }
  .install-bar-ic img { display: block; width: 40px; height: 40px; border-radius: 11px; }
  .install-bar-text { flex: 1; min-width: 0; font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
  .install-bar .btn { flex: none; display: inline-flex; }
  /* Dans la section d'installation, la barre s'efface : elle ferait doublon et cacherait les légendes */
  @supports (timeline-scope: --a) {
    .is-home { timeline-scope: --install; }
    #installer { view-timeline: --install block; }
    .install-bar { animation: bar-away linear both; animation-timeline: --install; animation-range: entry 40% exit 60%; }
    /* … et le bouton « en haut » descend à sa place */
    .is-home .to-top { animation: to-top-in linear both, top-drop linear both; animation-timeline: scroll(root), --install; animation-range: 0 640px, entry 40% exit 60%; }
  }
  .is-home .to-top { inset-inline-end: 14px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); width: 46px; height: 46px; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tabs label, [dir='rtl'] .tabs label { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 4px; text-align: center; }
  .tabs label .ic { display: none; }
}
@media (max-width: 640px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .trust-list li { align-items: flex-start; gap: 10px; }
  .trust-list li:last-child { grid-column: 1 / -1; }
  .trust-ic { width: 38px; height: 38px; border-radius: 12px; }
  .trust-ic .ic { width: 19px; height: 19px; }
  .install-copy h2 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem); }
  .cap b { font-size: 0.9375rem; }
}