/* ===========================================================
   ARIIWA — Présentation (landing)
   Premium · lumineuse · caramel & crème — « Par nous, pour nous »
   =========================================================== */
:root{
  --night:   #1B110B;
  --night-2: #2A1A10;
  --night-3: #3A2718;

  --cream:   #F7EFE0;   /* page base */
  --cream-2: #FBF6EC;   /* lighter band */
  --cream-3: #F1E6D2;   /* darker band */
  --card:    #FFFDF8;   /* card surface */
  --paper:   #FFFFFF;

  --gold:    #E3A943;
  --gold-2:  #F2CC83;
  --gold-deep:#B9842C;
  --caramel: #B5694A;
  --caramel-2:#C97E5C;
  --caramel-soft:#E9C6AE;
  --green:   #2E9F69;
  --green-deep:#1F7B4F;
  --red:     #C9463A;

  --ink:   #2A1A12;
  --ink-2: #6E5849;
  --ink-3: #9C8B7C;

  --line:  rgba(42,26,18,.10);
  --line-2:rgba(42,26,18,.055);

  /* -- Aso-oké « lés » : le pagne cousu, fond de page --
     Le tissu arrive en bandes verticales — les lés — qu'on coud bord à bord.
     Ce motif reproduit la couture, pas le tissage : cinq lés de largeurs
     inégales sur onze unités (3/2/3/1/2), séparés par des coutures à double
     fil. L'inégalité est le point — un pagne n'a pas de lés réguliers, et une
     grille régulière se lirait comme un fond d'écran.
     `--voile` est l'encre : brune sur les fonds clairs, crème sur les fonds
     sombres. Elle vaut ici sa valeur claire, par défaut. */
  --voile: 42, 26, 18;

  --cream-on-dark: #F4EBDB;
  --muted-on-dark: rgba(244,235,219,.64);
  --faint-on-dark: rgba(244,235,219,.36);
  --line-on-dark:  rgba(244,235,219,.14);

  --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 30px; --r-2xl: 42px;
  --shadow-sm: 0 1px 2px rgba(42,26,18,.05), 0 3px 10px rgba(42,26,18,.05);
  --shadow:    0 6px 18px rgba(42,26,18,.07), 0 18px 44px rgba(42,26,18,.07);
  --shadow-lg: 0 30px 70px -22px rgba(80,46,20,.30);
  --shadow-phone: 0 40px 90px -28px rgba(40,22,8,.45), 0 16px 36px rgba(40,22,8,.20);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --maxw: 1180px;

  /* warm dark used for the app phone + accent panels */
  --deep-bg:
    radial-gradient(1100px 720px at 78% -8%, #3a260f 0%, rgba(52,35,15,0) 60%),
    radial-gradient(900px 600px at 6% 110%, #2a1a10 0%, rgba(42,26,16,0) 55%),
    #1B110B;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body{
  margin: 0; font-family: var(--font-body);
  background: var(--cream); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; letter-spacing: -.025em; line-height: 1.04; font-weight: 700; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: var(--font-body); cursor: pointer; border: none; background: none; color: inherit; }
input{ font-family: var(--font-body); }
::selection{ background: var(--gold); color: var(--night); }
.wrap{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.mono{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ============ LOGO ============ */
.logo-link{ display: inline-flex; align-items: center; }
.logo-img{ height: 34px; width: auto; display: block; }
.foot-logo{ height: 36px; margin-bottom: 18px; }
/* Repli texte (si aucune image) */
.logo-word{ font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: .14em; color: var(--gold-deep); display: inline-flex; align-items: center; line-height: 1; }
.logo-word::after{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 4px; align-self: flex-end; margin-bottom: 4px; }
.foot-brand .logo-word{ color: var(--gold-2); margin-bottom: 18px; }

/* ============ NAV ============ */
.nav{ position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--cream-2) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); }
.nav-in{ display: flex; align-items: center; gap: 26px; height: 72px; }
.nav .logo{ height: 34px; width: auto; }
.nav-links{ display: flex; align-items: center; gap: 26px; margin-left: 14px; }
.nav-links a{ font-size: 14.5px; font-weight: 550; color: var(--ink-2); transition: color .15s; white-space: nowrap; }
.nav-links a:hover{ color: var(--ink); }
.nav-cta{ margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* -- hamburger + tiroir mobile -- */
.nav-burger{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.nav-burger span{ display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav.open .nav-burger{ background: var(--night); border-color: var(--night); }
.nav.open .nav-burger span{ background: var(--cream-on-dark); }
.nav.open .nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity: 0; }
.nav.open .nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.nav-drawer{ display: none; flex-direction: column; padding: 8px 20px 22px; border-top: 1px solid var(--line); }
.nav-drawer a{ padding: 14px 4px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.nav-drawer a:hover{ color: var(--caramel); }
.nav-drawer .btn{ margin-top: 16px; border-bottom: none; width: 100%; }
.nav.open .nav-drawer{ display: flex; }
/* CTA dans le tiroir : affichés seulement quand retirés du topbar (cf. responsive) */
.nav-drawer .drawer-secondary, .nav-drawer .drawer-primary{ display: none; }

.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px;
  border-radius: 999px; font-size: 15px; font-weight: 650; white-space: nowrap;
  transition: transform .14s ease, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn:active{ transform: scale(.97); }
.btn-gold{ background: var(--gold); color: var(--night); box-shadow: 0 6px 18px -4px rgba(227,169,67,.5); }
.btn-gold:hover{ background: var(--gold-2); box-shadow: 0 10px 26px -6px rgba(227,169,67,.6); }
.btn-dark{ background: var(--night); color: var(--gold-2); }
.btn-dark:hover{ background: var(--night-2); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover{ background: var(--card); border-color: rgba(42,26,18,.22); box-shadow: var(--shadow-sm); }
.btn-caramel{ background: var(--caramel); color: #fff; box-shadow: 0 6px 18px -4px rgba(181,105,74,.5); }
.btn-caramel:hover{ background: var(--caramel-2); }
.btn-sm{ height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg{ height: 54px; padding: 0 28px; font-size: 16.5px; }

/* store badge button */
/* Badges des magasins : les fichiers officiels d'Apple et de Google, repris
   sans retouche (cf. static/landing/img/badges/PROVENANCE.txt). Rien n'est
   redessiné ici — les deux marques l'interdisent — on ne fait que les poser à
   la bonne taille.

   Le badge Google embarque 23 % de marge de protection verticale imposée par
   ses règles d'usage : sa toile fait 250 de haut pour un bouton de 192. D'où
   le facteur 1,302, sans quoi il paraîtrait plus petit qu'Apple à hauteur
   égale. Mesuré sur le fichier, pas estimé à l'œil. */
/* Les trois badges forment une rangée à eux. Sans ce conteneur, ils héritent
   de la direction de leur hôte : la bannière organisateur est en colonne, et
   ils s'y empilaient sous le bouton. */
.stores-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.store-badge{ display: inline-flex; align-items: center; position: relative; transition: transform .14s, filter .2s; }
.store-badge img{ display: block; width: auto; }
.store-apple img{ height: 56px; }
.store-google img{ height: 73px; }         /* 56 × 1,302 → bouton visible de 56px */
.store-badge[href]:hover{ transform: translateY(-2px); }
.store-badge[href]:active{ transform: scale(.97); }

/* Le troisième badge, celui qu'aucune marque ne fournit. Il reprend le gabarit
   des deux officiels — hauteur 56, noir, arrondi et liseré gris clair du badge
   Apple — pour que la rangée se tienne. Sans ça, un bouton maison à côté de
   deux badges officiels ressemble à une pièce rapportée. */
.store-web{ height: 56px; gap: 11px; padding: 0 18px; border-radius: 9px;
  background: #000; color: #fff; border: 1px solid #a6a6a6; }
.store-web-ic{ width: 25px; height: 25px; flex: 0 0 25px; }
.store-web-tx{ display: flex; flex-direction: column; text-align: left; line-height: 1.05; }
.store-web-tx small{ font-size: 10.5px; letter-spacing: .01em; opacity: .92; }
.store-web-tx b{ font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

/* Fiche pas encore publiée : pas de `href`, donc rien à cliquer, aucun curseur
   main, aucune tabulation.

   Le badge garde ses couleurs. Le désaturer effaçait le triangle Google Play,
   qui n'existe qu'en quatre couleurs — un logo officiel en gris n'est plus le
   logo officiel. C'est la pastille « Bientôt » et le léger retrait qui disent
   l'indisponibilité, pas la perte de la marque. */
.store-muet{ cursor: default; }
.store-muet img{ opacity: .72; }
.store-bientot{ position: absolute; top: -7px; right: -6px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--gold-2);
  border: 1px solid var(--gold-deep); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
  box-shadow: var(--shadow-sm); }

/* ============ HERO ============ */
.hero{ position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 82% -6%, rgba(242,204,131,.45) 0%, rgba(242,204,131,0) 60%),
    radial-gradient(760px 520px at -4% 8%, rgba(233,198,174,.5) 0%, rgba(233,198,174,0) 58%),
    var(--les),
    var(--cream-2); }
.hero::after{ content:""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(42,26,18,.05) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; mask-image: linear-gradient(180deg,#000,transparent 78%); }
.hero-in{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding-top: 70px; padding-bottom: 88px; }
.eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--caramel); font-size: 13px; font-weight: 600; margin-bottom: 26px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.eyebrow .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,159,105,.2); }
.eyebrow b{ color: var(--ink); font-weight: 700; }
.hero h1{ font-size: clamp(44px, 6vw, 82px); line-height: .96; letter-spacing: -.038em; color: var(--ink); }
.hero h1 .accent{ color: var(--caramel); }
.hero h1 .gold{ color: var(--gold-deep); }
.hero-sub{ margin-top: 24px; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; color: var(--ink-2); max-width: 540px; }
.hero-sub b{ color: var(--ink); font-weight: 600; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; }

.hero-phones{ position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.glow{ position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(227,169,67,.45), transparent 70%); filter: blur(50px); z-index: 0; }

/* ============ PHONE MOCKUP (dark app) ============ */
.statusbar{ display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 4px; color: #F4EBDB; font-size: 13px; font-weight: 600; }
.statusbar .dots{ display: flex; gap: 5px; align-items: center; }
.statusbar .dots span{ width: 4px; height: 4px; border-radius: 50%; background: #F4EBDB; }
.app-top{ display: flex; align-items: center; gap: 10px; padding: 6px 18px 12px; }
.city-pill{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(244,235,219,.08); border: 1px solid rgba(244,235,219,.13); color: #F4EBDB; font-size: 12.5px; font-weight: 600; }
.app-word{ font-family: var(--font-display); font-weight: 800; letter-spacing: .14em; font-size: 15px; color: #F4EBDB; margin: 0 auto; }
.app-ic{ width: 30px; height: 30px; border-radius: 50%; background: rgba(244,235,219,.08); border: 1px solid rgba(244,235,219,.13); display: grid; place-items: center; color: var(--gold-2); font-size: 13px; }
.app-ic.av{ background: var(--caramel); color: #1B110B; font-weight: 800; }
.app-greet{ padding: 4px 18px 0; }
.app-greet h4{ font-size: 21px; color: #F4EBDB; }
.app-greet p{ font-size: 12.5px; color: rgba(244,235,219,.62); margin-top: 4px; }
.app-search{ margin: 12px 18px; height: 42px; border-radius: 14px; background: rgba(244,235,219,.07); border: 1px solid rgba(244,235,219,.13); display: flex; align-items: center; gap: 9px; padding: 0 14px; color: rgba(244,235,219,.34); font-size: 12.5px; }
.app-cats{ display: flex; gap: 8px; padding: 0 18px 12px; overflow: hidden; }
.app-cat{ flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 999px; background: #FFFDF8; color: #2A1A12; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.app-cat.on{ background: var(--gold); }
.feat-card{ margin: 0 18px 14px; border-radius: 20px; overflow: hidden; position: relative; padding: 16px; color: #F4EBDB; background: linear-gradient(150deg,#5a3a22,#3a2415); border: 1px solid rgba(244,235,219,.08); }
.badge{ position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-gold{ background: var(--gold); color: #1B110B; }
.badge-green{ background: var(--green); color: #fff; }
.badge-caramel{ background: var(--caramel); color: #fff; }
.feat-card .meta{ position: relative; margin-top: 58px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--gold-2); text-transform: uppercase; }
.feat-card h5{ position: relative; font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-top: 5px; line-height: 1.1; }
.feat-card .crow{ position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.feat-card .price{ font-size: 13px; font-weight: 700; }
.mini-btn{ height: 34px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: #1B110B; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; }
.app-section-h{ display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px; }
.app-section-h .t{ font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #F4EBDB; }
.app-section-h .more{ font-size: 12px; color: var(--gold-2); font-weight: 600; }
.mini-cards{ display: flex; gap: 12px; padding: 0 18px; }
.mini-card{ flex: 1; border-radius: 16px; overflow: hidden; position: relative; height: 120px; }
.mini-card .body{ position: absolute; inset: 0; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start; }
.mini-card .lbl{ font-size: 10.5px; font-weight: 700; color: #fff; margin-top: auto; }
.app-nav{ position: absolute; bottom: 0; left: 0; right: 0; height: 64px; background: linear-gradient(180deg, rgba(20,12,7,0), #140c07 45%); display: flex; align-items: center; justify-content: space-around; padding: 0 16px 10px; }
.app-nav .item{ display: flex; align-items: center; gap: 7px; color: rgba(244,235,219,.4); font-size: 12px; font-weight: 600; }
.app-nav .item.on{ background: var(--gold); color: #1B110B; height: 40px; padding: 0 16px; border-radius: 999px; }
.ph-stripe{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 9px); }
.phone.p-back{ position: absolute; transform: rotate(6deg) translate(74px, 14px) scale(.86); opacity: .94; z-index: 1; filter: brightness(.86); }
.phone.p-front{ position: relative; z-index: 2; transform: rotate(-3deg); }

/* ============ STRIP (carrousel) ============ */
.strip{ background: var(--night); padding: 22px 0; color: var(--muted-on-dark); }
.strip-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip-track{ display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; will-change: transform;
  animation: marquee 36s linear infinite; }
.strip-marquee:hover .strip-track{ animation-play-state: paused; }
.strip .lbl{ color: var(--faint-on-dark); font-size: 12px; }
.strip .stat{ font-size: 15px; flex: 0 0 auto; }
.strip .stat b{ color: var(--gold-2); font-family: var(--font-display); font-size: 17px; }
.strip .sep{ width: 5px; height: 5px; border-radius: 50%; background: var(--faint-on-dark); flex: 0 0 auto; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============ SECTION SHELL ============ */
section{ position: relative; }
.sec{ padding: 104px 0; }

/* -- Les lés, posés sur chaque fond de section --

   `--les` est déclaré **ici et non à la racine**, et c'est délibéré : la valeur
   d'une propriété personnalisée est substituée là où elle est calculée. Écrite
   sur `:root`, elle y figerait le `--voile` de la racine, et redéfinir cette
   encre plus bas ne changerait plus rien — vérifié au navigateur. Déclarée sur
   les sections, elle se calcule sur chacune, avec l'encre qui y règne.

   Toutes les sections font la largeur du viewport et les lés sont en
   pourcentage : ils s'alignent donc d'une section à l'autre, coutures
   comprises, et la page se lit d'un seul tenant comme un pagne cousu — y
   compris à la traversée des bandeaux sombres. */
.s-cream, .s-cream-2, .s-cream-3, .s-deep, .hero{
  --les:
    linear-gradient(90deg,transparent 26.99%,rgba(var(--voile),.12) 26.99% 27.07%,transparent 27.07% 27.33%,rgba(var(--voile),.12) 27.33% 27.41%,transparent 27.41%),
    linear-gradient(90deg,transparent 45.17%,rgba(var(--voile),.12) 45.17% 45.25%,transparent 45.25% 45.51%,rgba(var(--voile),.12) 45.51% 45.59%,transparent 45.59%),
    linear-gradient(90deg,transparent 72.53%,rgba(var(--voile),.12) 72.53% 72.61%,transparent 72.61% 72.87%,rgba(var(--voile),.12) 72.87% 72.95%,transparent 72.95%),
    linear-gradient(90deg,transparent 81.54%,rgba(var(--voile),.12) 81.54% 81.62%,transparent 81.62% 81.88%,rgba(var(--voile),.12) 81.88% 81.96%,transparent 81.96%),
    linear-gradient(90deg,
      rgba(var(--voile),.018) 0% 27.27%,
      rgba(var(--voile),0) 27.27% 45.45%,
      rgba(var(--voile),.026) 45.45% 72.73%,
      rgba(var(--voile),.009) 72.73% 81.82%,
      rgba(var(--voile),.016) 81.82% 100%); }

.s-cream{ background: var(--les), var(--cream); }
.s-cream-2{ background: var(--les), var(--cream-2); }
.s-cream-3{ background: var(--les), var(--cream-3); }
/* Sur brun-nuit l'encre s'inverse : le voile passe au crème, sinon les lés
   seraient du brun sur du brun et le pagne s'arrêterait à chaque bandeau. Les
   alphas ne bougent pas — mesuré, le crème sur brun-nuit rend au moins autant
   que le brun sur crème, les lés y sont même un peu plus francs. */
.s-deep{ --voile: 244, 235, 219; background: var(--les), var(--deep-bg); color: var(--cream-on-dark); }
.sec-head{ max-width: 740px; margin: 0 auto 60px; text-align: center; }
.sec-head.left{ text-align: left; margin: 0 0 52px; }
.kicker{ display: inline-flex; align-items: center; gap: 8px; color: var(--caramel); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.s-deep .kicker{ color: var(--gold-2); }
.kicker .bar{ width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sec-head h2{ font-size: clamp(32px, 4vw, 56px); letter-spacing: -.032em; }
.sec-head .lede{ margin-top: 18px; font-size: clamp(16px,1.4vw,19px); line-height: 1.55; color: var(--ink-2); }
.s-deep .sec-head .lede{ color: var(--muted-on-dark); }
/* ============ COMMENT ÇA MARCHE — quatre temps, deux parcours ============
   Le fil vertical se tend au fil de l'avancement, le téléphone montre l'écran
   de l'étape en cours. Deux parcours, la même mécanique.
   Les deux jetons manquants à la charte sont posés sur la section : ils ne
   servent qu'ici et à « Pourquoi », qui fait de même. */
.hiw{ --fil-repos: #E7DAC5; --accent-texte: #8B5E2A; }

/* -- le sélecteur de point de vue -- */
.hiw-seg{ display: flex; justify-content: center; margin-bottom: 22px; }
.fseg{ display: inline-flex; padding: 5px; gap: 5px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--fil-repos);
  box-shadow: 0 1px 2px rgba(42,26,18,.05), 0 3px 10px rgba(42,26,18,.05); }
.fseg button{ height: 48px; padding: 0 28px; border-radius: 999px; font-size: 15px;
  font-weight: 650; color: var(--ink-2); background: transparent;
  display: inline-flex; align-items: center; gap: 9px;
  transition: color .3s linear, background-color .3s linear; }
.fseg button.on{ background: var(--gold); color: var(--ink); }
.fseg button:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* -- la scène : les étapes à gauche, le téléphone à droite -- */
.hiw-scene{ display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: center; }
.hiw-flots{ position: relative; }

/* Le fil, derrière les étapes. `preserveAspectRatio: none` l'étire sur toute
   la hauteur de la colonne quelle qu'elle soit ; `overflow: visible` laisse
   dépasser l'arrondi du bout de trait. */
.hiw-fil{ position: absolute; top: 0; left: 27px; width: 4px; height: 100%;
  overflow: visible; z-index: 1; }
.hiw-fil path{ transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }

.hiw-panneau{ position: relative; z-index: 2; }
.hiw-panneau[hidden]{ display: none; }

/* -- une étape -- */
.hiw-etape{ display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  align-items: start; padding: 11px 0; cursor: pointer; }
.hiw-etape:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 12px; }
.hiw-marge{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hiw-n{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--ink-3); transition: color .3s linear;
  /* Le fil passe dans cette colonne et barrait les numéros. La pastille de
     fond l'interrompt sous chacun — la même couleur que la bande, donc
     invisible autrement que par le trou qu'elle fait dans le trait. */
  background: var(--cream); padding: 1px 5px; border-radius: 5px; }
.hiw-ic{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; background: var(--card); border: 1px solid var(--fil-repos);
  transition: background-color .3s linear, border-color .3s linear; }
.hiw-ic .kolo-svg{ display: block; width: 26px; height: 26px; }
.hiw-dit h4{ font-family: var(--font-display); font-size: 18px; transition: color .3s linear; }
.hiw-dit p{ margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2);
  max-width: 48ch; text-wrap: pretty; transition: color .3s linear; }

/* L'étape active se marque par la couleur, jamais par l'effacement des
   autres : aucun texte ne descend sous l'opacité 1. Une étape estompée
   deviendrait illisible pour quelqu'un qui lit lentement, et la section a
   quatre temps de dix secondes. */
.hiw-etape[data-actif] .hiw-ic{ background: var(--gold); border-color: var(--gold); }
/* Le cauri ne change pas de couleur, lui : sur une pastille dorée il ne
   resterait qu'un liseré. Sa pastille passe donc au sombre — même inversion
   que dans « Pourquoi ». */
.hiw-etape[data-actif] .hiw-ic:has(.kolo-svg){ background: var(--night); border-color: var(--night); }
.hiw-etape[data-actif] .hiw-n,
.hiw-etape[data-actif] .hiw-dit h4{ color: var(--accent-texte); }
.hiw-etape[data-actif] .hiw-dit p{ color: var(--ink); }

/* -- le téléphone -- */
.hiw-tel{ justify-self: center; }
/* La silhouette du téléphone, sous les calques. Les maquettes ne se chargent
   qu'à l'approche de la section : sans elle, la colonne de droite serait un
   trou pendant le dépliage du premier écran. Le rayon est celui du châssis de
   la maquette — 60 px ramenés par son `scale(.6763)`. */
.hiw-fenetre{ position: relative; width: 280px; height: 587px;
  border-radius: 41px; background: rgba(42,26,18,.055); }
.hiw-ecran{ position: absolute; inset: 0; overflow: hidden;
  visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .5s linear; }
.hiw-ecran.on, .hiw-ecran[data-actif]{ visibility: visible; clip-path: inset(0 0 0 0); }
.hiw-ecran[data-sortant]{ visibility: visible; clip-path: inset(100% 0 0 0); transition-duration: .3s; }
/* La maquette porte son propre châssis — un 414 × 868 réduit par
   `scale(.6763)`, soit 280 × 587, la taille exacte de la fenêtre. Mais c'est
   l'export d'origine, et on n'y touche pas : il pose ce téléphone au milieu
   d'une page qui garde 30 px de marge au-dessus, et la légende de l'écran
   30 px en dessous. Le recadrage se fait donc ici.

   L'iframe est plus large que la fenêtre et centrée sur elle. La maquette
   centre son téléphone dans le document, quelle que soit la largeur : centrer
   l'iframe suffit à l'aligner, sans dépendre d'un décalage calculé à la main.
   Mesuré au navigateur, dans une iframe de 420 : le téléphone est à 70 px du
   bord gauche, 30 px du haut, en 280 × 587.

   La hauteur — 30 px de marge plus 587 px de téléphone — laisse la légende
   hors du cadre. La monter laisserait apparaître « 01 · Trouve ton event »
   sous le téléphone, en double du texte de l'étape affiché à gauche. */
.hiw-ecran iframe{ position: absolute; top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 420px; height: 617px; border: 0; background: transparent;
  /* Un export met une seconde à se déplier, et montre d'ici là sa vignette
     sombre et son bandeau « Unpacking… ». On ne le découvre qu'une fois
     déplié — le script pose `data-pret`. */
  opacity: 0; transition: opacity .45s ease; }
.hiw-ecran iframe[data-pret]{ opacity: 1; }

@media (max-width: 1000px){
  .hiw-scene{ grid-template-columns: 1fr; gap: 34px; }
  .hiw-tel{ order: 2; }
  .hiw-flots{ order: 1; }
}

/* ============ POURQUOI (benefit grid) ============ */
.why-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.why-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.why-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(42,26,18,.16); }
.why-card .wi{ width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; margin-bottom: 20px;
  background: rgba(227,169,67,.14); color: var(--gold-deep); }
.why-card.cm .wi{ background: rgba(181,105,74,.14); color: var(--caramel); }
.why-card.gr .wi{ background: rgba(46,159,105,.14); color: var(--green-deep); }
.why-card h4{ font-size: 20px; }
.why-card p{ margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.why-card .wtag{ display: inline-block; margin-top: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green-deep); background: rgba(46,159,105,.1); padding: 6px 11px; border-radius: 999px; }
.why-card.cm .wtag{ color: var(--caramel); background: rgba(181,105,74,.1); }
/* ============ POURQUOI — la preuve, écran par écran ============
   La section démontre au lieu d'affirmer : cinq raisons, et le téléphone
   montre l'écran de l'app qui correspond à la raison active.
   Deux valeurs du gabarit n'avaient pas de jeton dans la charte — le filet de
   repos et le brun doré du texte d'accent. Elles sont posées ici, sur la
   section, plutôt qu'à la racine : elles ne servent qu'à ce bloc. */
.pq{ --fil-repos: #E7DAC5; --accent-texte: #8B5E2A; }
#pourquoi{ overflow: hidden; }
.pq-grid{ display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: center; }

/* -- les cinq raisons -- */
.pq-raisons{ display: flex; flex-direction: column; gap: 12px; }
.pq-raison{
  display: flex; gap: 18px; align-items: flex-start;
  border-radius: 18px; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--fil-repos);
  cursor: pointer;
  transition: background .3s linear, border-color .3s linear,
              box-shadow .3s linear, transform .25s ease; }
.pq-raison:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.pq-ic{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(var(--voile),.08); color: var(--accent-texte);
  transition: background .3s linear, color .3s linear; }
.pq-ic .kolo-svg{ display: block; }
.pq-corps{ min-width: 0; }
.pq-tete{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pq-n{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-3); transition: color .3s linear; }
.pq-raison h3{ font-family: var(--font-display); font-size: 18px; transition: color .3s linear; }
.pq-role{
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(var(--voile),.10); color: var(--ink-2); }
.pq-raison p{ margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; transition: color .3s linear; }

/* La raison active. Les quatre autres reviennent d'elles-mêmes à l'état de
   repos ci-dessus — rien à défaire à la main. */
.pq-raison[aria-selected="true"]{
  background: rgba(227,169,67,.13);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -20px rgba(42,26,18,.45); }
.pq-raison[aria-selected="true"] .pq-ic{ background: var(--gold); color: var(--night); }
.pq-raison[aria-selected="true"] .pq-n,
.pq-raison[aria-selected="true"] h3{ color: var(--accent-texte); }
.pq-raison[aria-selected="true"] p{ color: var(--ink); }

/* -- le téléphone --
   Le châssis est dessiné à la taille réelle du device, 414 × 868, puis réduit
   par `scale`. Dessiner petit et agrandir ferait baver les rayons et les
   filets d'un pixel. 280/414 = 587/868 = 0,6763 : la fenêtre et le facteur
   d'échelle sont d'accord, sinon le châssis dépasserait ou flotterait. */
.pq-tel{ justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pq-fenetre{ position: relative; width: 280px; height: 587px; }
.pq-chassis{
  position: absolute; top: 0; left: 0;
  width: 414px; height: 868px;
  transform: scale(.6763); transform-origin: top left;
  padding: 12px; border-radius: 60px;
  background: linear-gradient(148deg,#7d7773,#332f2d 22%,#4d4745 48%,#221f1e 74%,#5c5653);
  box-shadow:
    0 44px 90px -30px rgba(40,22,8,.62),
    0 2px 4px rgba(0,0,0,.4),
    inset 0 0 0 1.5px rgba(255,255,255,.2),
    inset 0 -2px 6px rgba(0,0,0,.55); }
/* Les boutons de tranche : 3 px de large, posés sur le bord du châssis. */
.pq-btn{ position: absolute; width: 3px; border-radius: 2px; }
.pq-btn-silence, .pq-btn-vol-h, .pq-btn-vol-b{
  left: -1px; background: linear-gradient(90deg,#8d8783,#4b4644 42%,#2a2624); }
.pq-btn-veille{
  right: -1px; background: linear-gradient(270deg,#8d8783,#4b4644 42%,#2a2624); }
.pq-btn-silence{ top: 150px; height: 32px; }
.pq-btn-vol-h{ top: 216px; height: 62px; }
.pq-btn-vol-b{ top: 292px; height: 62px; }
.pq-btn-veille{ top: 236px; height: 96px; }

.pq-dalle{
  position: relative; width: 100%; height: 100%;
  border-radius: 48px; background: #000;
  box-shadow: inset 0 0 0 2px #0b0908; }
.pq-island{
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; border-radius: 999px; background: #000; z-index: 70; }
.pq-hublot{
  position: absolute; inset: 0;
  width: 390px; height: 844px;
  border-radius: 46px; overflow: hidden; background: #fffbf4; }

/* -- les écrans --
   Recopiés en ligne depuis `static/landing/embed/pourquoi-0*.html`. Leur
   feuille ne déclarait que `*`, `html` et `body` : les quatre règles tiennent
   ici, portées par `.pq-ecran` au lieu du document. */
.pq-ecran, .pq-ecran *{ margin: 0; padding: 0; box-sizing: border-box; }
.pq-ecran{
  position: absolute; inset: 0;
  width: 390px; height: 844px; overflow: hidden;
  background: #fffbf4;
  font-family: 'Lexend', system-ui, sans-serif; color: #2b1b17;
  /* L'essuyage est vertical, jamais un fondu croisé : deux écrans ne
     partagent jamais la bande visible. L'entrant s'ouvre vers le bas, le
     sortant se retire par le haut, plus vite. */
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s linear; }
.pq-ecran[data-actif]{ visibility: visible; clip-path: inset(0 0 0 0); }
.pq-ecran[data-sortant]{ visibility: visible; clip-path: inset(100% 0 0 0); transition-duration: .3s; }

.pq-legende{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; text-align: center;
  color: var(--ink-2); }

/* -- socle -- */
.proof-socle{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 46px; }
.proof-socle .ps-lbl{ font-size: 13px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.ps-chip{ display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ps-chip::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--caramel); }

/* ============ VALEURS — quatre lés de tissu ============

La seule section en colorway sombre posée sur la page claire. Les variables
sont redéfinies **sur le lé**, pas sur la section : autour, la page reste
crème. Un `.s-deep` sur la section aurait aussi retourné le chapeau et la
phrase-charnière.

La texture est le sujet. Chaque lé porte deux trames — une verticale, une
horizontale — dessinées par deux `repeating-linear-gradient` et posées en
deux calques : celui de repos, toujours là, et le dense, qui n'apparaît qu'au
survol. Les deux dérivent en continu.

Le pas et la durée sont des variables locales, et le sens vient de l'image-clé
choisie. Quatre lés réglés pareil se liraient comme un seul aplat : le pas va
de 11 à 23 px, la durée de 2,5 à 5,9 s, et un lé sur deux dérive à contresens.

`--tempo-tissage` est le réglage global de la page (1 par défaut). Le
`max(.6, …)` empêche qu'une valeur basse ne fige le tissage au lieu de le
ralentir.
============ */
.sec-val{ position: relative; padding: 96px 0;
  display: flex; flex-direction: column; justify-content: center; }
.val-wrap{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.val-head{ max-width: 740px; margin: 0 auto 60px; text-align: center; }
.val-head .kicker{ justify-content: center; margin-bottom: 16px; }
.val-head h2{ font-size: clamp(2rem,4vw,3rem); letter-spacing: -.01em; }
.val-lede{ margin-top: 18px; font-size: clamp(16px,1.4vw,19px); line-height: 1.65;
  color: var(--ink-2); text-wrap: pretty; }

/* Deuxième ligne du titre : même famille, même graisse, un cran en dessous en
   taille pour que « Par nous, pour nous. » reste la première chose lue. */
.val-charniere{ display: block; margin-top: 14px;
  font-size: clamp(1.4rem,2.8vw,2.1rem); line-height: 1.25; }
/* Un aplat franc, comme un coup de feutre : pas de `border-radius`. */
.val-marque{ background: var(--gold); color: var(--night); padding: .04em .18em; }

.val-grid{ position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; max-width: 960px; margin: 0 auto; }

.val-le{
  --fond-principal: #1B110B; --fond-surface: #241710; --fil-repos: #3A2416;
  --accent: #B9842C; --accent-clair: #E3A943; --accent-texte: #E3A943;
  --sur-accent: #1B110B; --texte: #F7EFE0; --texte-sourd: #A99280;
  --voile: 247,239,224;
  position: relative; overflow: hidden; border-radius: 24px;
  padding: 36px 34px 38px;
  background: linear-gradient(150deg, var(--fond-surface), var(--fond-principal));
  box-shadow: 0 14px 30px -18px rgba(43,27,23,.7);
  display: flex; flex-direction: column; gap: 16px; }

/* Les deux trames. `--pas` sert à la fois de longueur de répétition et de
   distance parcourue par l'image-clé : la dérive avance donc d'exactement une
   maille, et la boucle est invisible. */
.val-trame{ position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--voile),.08) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient( 0deg, rgba(var(--voile),.05) 0 1px, transparent 1px var(--pas));
  animation: var(--sens) calc(var(--duree) / max(.6, var(--tempo-tissage, 1))) linear infinite; }
.val-trame-dense{ opacity: 0; transition: opacity .2s linear;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--voile),.13) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient( 0deg, rgba(var(--voile),.09) 0 1px, transparent 1px var(--pas)); }
.val-le[data-serre] .val-trame-dense{ opacity: 1; }

@keyframes ar-tissu{ to{ background-position: 0 var(--pas), var(--pas) 0; } }
@keyframes ar-tissu-inv{ to{ background-position: 0 calc(var(--pas) * -1), calc(var(--pas) * -1) 0; } }

.val-le-1{ --pas: 14px; --duree: 3.4s; --sens: ar-tissu; }
.val-le-2{ --pas: 19px; --duree: 4.8s; --sens: ar-tissu-inv; }
.val-le-3{ --pas: 11px; --duree: 2.5s; --sens: ar-tissu; }
.val-le-4{ --pas: 23px; --duree: 5.9s; --sens: ar-tissu-inv; }

/* Le contenu passe au-dessus des deux calques. */
.val-le > .val-tete, .val-le > h4, .val-le > p{ position: relative; }
.val-tete{ display: flex; align-items: center; justify-content: space-between; }
.val-motif{ display: block; overflow: visible; }
.val-motif path{ fill: none; stroke: var(--accent-clair); stroke-width: 1.6;
  stroke-linecap: round; }
/* Tiré au dashoffset par le script. Un métier à tisser avance à vitesse
   constante : l'allure est linéaire, jamais adoucie. */
.val-motif path[data-val-path]{ transition: stroke-dashoffset .9s linear; }
.val-n{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--texte-sourd); }
.val-le h4{ font-size: clamp(22px,2.1vw,26px); color: var(--texte); text-wrap: balance; }
.val-le p{ font-size: 15px; line-height: 1.68; color: var(--texte-sourd); text-wrap: pretty; }

@media (max-width: 720px){
  /* Une colonne, et l'écart monte : empilés, les lés ne se séparent plus que
     par le vide, jamais par une couture horizontale. */
  .val-grid{ grid-template-columns: 1fr; gap: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .val-trame{ animation: none; }
  .val-motif path[data-val-path]{ transition: none; }
}

/* ============ BANNER CTA ============ */
.banner{ position: relative; overflow: hidden; }
.banner-in{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  border-radius: var(--r-2xl); padding: 56px; }
/* Les deux bandeaux d'appel à l'action reposent directement sur le fond sombre
   de leur section : plus de carte colorée par-dessus. Le texte garde le
   contraste du thème foncé, et les boutons portent seuls l'accent. */
.banner.part .banner-in{ background: none; color: var(--cream-on-dark); box-shadow: none; }
.banner.org .banner-in{ background: none; color: var(--cream-on-dark); box-shadow: none; }
.banner-copy{ position: relative; z-index: 2; }
.banner .bk{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.banner h3{ font-size: clamp(28px,3.4vw,42px); letter-spacing: -.03em; margin-top: 12px; line-height: 1.02; }
.banner p{ margin-top: 14px; font-size: 16.5px; line-height: 1.5; max-width: 460px; opacity: .9; }
.banner .banner-cta{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Dans les bannières, la colonne de droite est plus étroite que le hero : à
   56px de haut, les trois badges ne tiennent pas sur une ligne et le troisième
   passe dessous. On leur donne la moitié de la largeur au lieu de 0,9, et on
   les descend à 48px — mesuré, pas estimé : les trois font alors 458px de large
   plus 24px d'écart, pour une colonne qui en offre 494 à 1200px de fenêtre.
   En dessous de 1000px la grille passe à une seule colonne et la question ne
   se pose plus. */
.banner .banner-in{ grid-template-columns: 1fr 1fr; }
.banner .store-apple img{ height: 48px; }
.banner .store-google img{ height: 62px; }   /* 48 × 1,302 */
.banner .store-web{ height: 48px; gap: 9px; padding: 0 15px; }
.banner .store-web-ic{ width: 21px; height: 21px; flex: 0 0 21px; }
.banner .store-web-tx small{ font-size: 9.5px; }
.banner .store-web-tx b{ font-size: 16.5px; }

/* ============ POSITION AUJOURD'HUI ============ */
.pos-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Sans les compteurs, la seconde colonne n'existe pas : la copie prend toute
   la largeur au lieu de laisser un vide à droite. */
.pos-grid-seule{ grid-template-columns: 1fr; max-width: 760px; }
.pos-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pos-stat{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.pos-stat .num{ font-family: var(--font-display); font-size: clamp(34px,4vw,46px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.pos-stat .num .u{ font-size: 20px; color: var(--gold-deep); }
.pos-stat .lab{ margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.pos-now{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--night); color: var(--gold-2); font-size: 13.5px; font-weight: 600; margin-bottom: 22px; }
.pos-now .ld{ width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,159,105,.28); }
.pos-copy h2{ font-size: clamp(30px,3.6vw,46px); }
.pos-copy p{ margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.city-grid{ display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.city-chip{ display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.city-chip.live{ background: var(--caramel); color: #fff; border-color: var(--caramel); }
/* Version sombre de la section (thème .s-deep) : les cartes de chiffres et les
   pastilles de ville doivent se détacher du fond foncé, pas s'y fondre. */
.s-deep .pos-stat{ background: rgba(244,235,219,.05); border-color: var(--line-on-dark); box-shadow: none; }
.s-deep .pos-stat .num{ color: var(--cream-on-dark); }
.s-deep .pos-stat .num .u{ color: var(--gold-2); }
.s-deep .pos-stat .lab{ color: var(--muted-on-dark); }
.s-deep .pos-copy p{ color: var(--muted-on-dark); }
.s-deep .pos-now{ background: rgba(244,235,219,.08); }
.s-deep .city-chip{ background: rgba(244,235,219,.05); border-color: var(--line-on-dark); color: var(--cream-on-dark); }
.s-deep .city-chip.live{ background: var(--caramel); color: #fff; border-color: var(--caramel); }
.city-chip .ld{ width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.3); }
.city-chip.soon{ border-style: dashed; color: var(--ink-3); background: transparent; }

/* ============ TARIFS ============ */
.price-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
.price-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.price-card.feat{ background: linear-gradient(170deg,#2a1a10,#1b110b); color: var(--cream-on-dark); border-color: var(--night-3); box-shadow: var(--shadow-lg); transform: scale(1.03); }
.price-card .pl-name{ font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.price-card .pl-tag{ font-size: 13.5px; color: var(--ink-2); margin-top: 6px; min-height: 38px; }
.price-card.feat .pl-tag{ color: var(--muted-on-dark); }
.price-card .pl-price{ margin: 18px 0 4px; font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
.price-card .pl-price small{ font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.price-card.feat .pl-price small{ color: var(--muted-on-dark); }
.price-card .pl-badge{ align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--gold); color: var(--night); margin-bottom: 16px; }
.pl-list{ list-style: none; padding: 0; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pl-list li{ display: flex; gap: 11px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.price-card.feat .pl-list li{ color: var(--muted-on-dark); }
.pl-list li .ck{ flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: rgba(46,159,105,.14); color: var(--green-deep); display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.price-card.feat .pl-list li .ck{ background: rgba(227,169,67,.18); color: var(--gold-2); }

/* ============ FAQ ============ */
.faq-wrap{ max-width: 820px; margin: 0 auto; }
.faq{ border-bottom: 1px solid var(--line); }
.faq summary{ list-style: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker{ display: none; }
.faq .q-ic{ flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .25s, background .2s, color .2s; font-size: 16px; color: var(--caramel); }
.faq[open] .q-ic{ transform: rotate(45deg); background: var(--night); color: var(--gold-2); border-color: var(--night); }
.faq .a{ padding: 0 0 26px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 700px; }

/* ============ FOOTER ============ */
.footer{ background: #140c07; color: rgba(244,235,219,.62); padding: 70px 0 36px; }
.foot-top{ display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand .logo{ height: 34px; margin-bottom: 18px; }
.foot-brand p{ font-size: 14px; line-height: 1.55; max-width: 300px; }
.foot-col h5{ font-family: var(--font-display); color: #F4EBDB; font-size: 14px; margin-bottom: 16px; letter-spacing: .02em; }
.foot-col a{ display: block; font-size: 14px; padding: 6px 0; color: rgba(244,235,219,.62); transition: color .15s; }
.foot-col a:hover{ color: var(--gold-2); }
.foot-legal{ margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(244,235,219,.13); display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-legal a{ font-size: 13px; color: rgba(244,235,219,.62); transition: color .15s; }
.foot-legal a:hover{ color: var(--gold-2); }
.foot-bottom{ margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(244,235,219,.34); flex-wrap: wrap; }
.foot-fon{ color: var(--gold-2); font-style: italic; }

/* ============ REVEAL ============ */
.rev{ opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.rev.in{ opacity: 1; transform: none; }
.rev.d1{ transition-delay: .07s; } .rev.d2{ transition-delay: .14s; } .rev.d3{ transition-delay: .21s; } .rev.d4{ transition-delay: .28s; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1027px){
  .nav-links{ display: none; }
  .nav-burger{ display: flex; }
}
@media (max-width: 1000px){
  .hero-in{ grid-template-columns: 1fr; gap: 14px; padding-top: 52px; padding-bottom: 56px; }
  .hero-phones{ min-height: 0; margin-top: 26px; transform: scale(.92); }
  .why-grid{ grid-template-columns: 1fr; }
  .pq-grid{ grid-template-columns: 1fr; gap: 40px; }
  .pq-tel{ order: 2; }
  .pq-raisons{ order: 1; }
  .val-grid{ grid-template-columns: 1fr 1fr; }
  .pos-grid{ grid-template-columns: 1fr; gap: 40px; }
  .price-grid{ grid-template-columns: 1fr; }
  .price-card.feat{ transform: none; }
  .calc-body{ grid-template-columns: 1fr; }
  .calc-inputs{ border-right: none; border-bottom: 1px solid var(--line); }
  .banner-in{ grid-template-columns: 1fr; gap: 28px; padding: 40px; }
  .foot-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .wrap{ padding: 20px; }
  .nav-links{ display: none; }
  .sec{ padding: 70px 0; }
  .val-grid{ grid-template-columns: 1fr; }
  .pos-stats{ grid-template-columns: 1fr 1fr; }
  .foot-top{ grid-template-columns: 1fr; gap: 28px; }
  .hero h1{ font-size: clamp(38px,11vw,58px); }
  .calc-seg{ margin-left: 0; width: 100%; }
  .calc-seg button{ flex: 1; justify-content: center; padding: 0 10px; }
  .nav .nav-cta .hide-sm{ display: none; }
  .nav-drawer .drawer-secondary{ display: flex; }
}
@media (max-width: 560px){
  .proof-socle{ justify-content: flex-start; }
  /* Plus de place pour le bouton gold → on le déplace dans le hamburger */
  .nav-cta-primary{ display: none; }
  .nav-drawer .drawer-primary{ display: flex; }
}
/* Le "V" reste côte à côte sur mobile : on réduit sa taille (cadre + contenu)
   via `zoom` par paliers pour qu'il tienne toujours dans la largeur, sans rogner
   le téléphone de droite. Valeurs calées sur la largeur réelle du V. */
@media (max-width: 480px){
  .phone.p-back{ display: none; }
  .phone.p-front{ transform: none; }
}

/* eyebrow centré avec une barre de chaque côté */
.kicker-c{ justify-content: center; }

/* ============ TARIFS ORGANISATEUR ============

La feuille de la maquette `docs/section_tarif/tarifs-organisateur.html`, reprise
telle quelle à trois détails près. Tout ce qui y visait la page entière — `h2`,
`p`, `button`, `img`, le focus, et jusqu'au `*` du mode mouvement réduit — est
ramené à `#tarifs` : la même règle laissée globale redessinerait tout le site
depuis une section. Le `body`, le `box-sizing` et le `::selection` sont écartés,
la feuille les pose déjà plus haut ; `@keyframes ar-aso` aussi, puisque la nappe
vient de la section et non du bloc.

Le reste du dessin est en styles en ligne, dans le gabarit. C'est le choix de
l'export, et le tenir permet de rejouer une nouvelle version sans démêler deux
sources. Ne vivent ici que les règles qu'un attribut `style` ne peut pas porter :
les pseudo-éléments des curseurs, les images-clés, et les bascules d'écran.
============ */
#tarifs h2{ font-family:'Bricolage Grotesque',system-ui,sans-serif; margin:0; letter-spacing:-.025em; line-height:1.06; font-weight:700; }
#tarifs h3, #tarifs h4{ font-family:'Bricolage Grotesque',system-ui,sans-serif; margin:0; letter-spacing:-.025em; line-height:1.2; font-weight:700; }
#tarifs p{ margin:0; }
#tarifs b, #tarifs strong{ font-weight:600; }
#tarifs img{ max-width:100%; display:block; }
#tarifs button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
#tarifs a{ color:var(--accent-texte); text-decoration:none; }
#tarifs a:hover{ color:var(--accent-clair); }
#tarifs :focus-visible{ outline:2px solid var(--accent-texte); outline-offset:3px; }
#tarifs [data-num]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* Apparition au chargement — dans la landing complète c'est un ScrollTrigger ;
   ici la même valeur (22 px, .7s) est jouée une fois. */
#tarifs [data-reveal]{ animation:ariiwa-reveal .7s cubic-bezier(.2,.7,.2,1) both; }
#tarifs [data-reveal]:nth-of-type(2){ animation-delay:.12s; }
@keyframes ariiwa-reveal{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

/* curseurs du calculateur — un pseudo-élément, donc impossible en inline */
#tarifs input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--fil-repos); outline:none; transition:background .45s ease; }
#tarifs input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent); border:3px solid var(--fond-surface); box-shadow:0 2px 8px rgba(var(--voile),.25); cursor:pointer; }
#tarifs input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--accent); border:3px solid var(--fond-surface); box-shadow:0 2px 8px rgba(var(--voile),.25); cursor:pointer; }


/* Tarifs : la progression 0 % / 3 % / grille se rejoue en boucle, la navette du
   comparatif descend paire par paire. Aucun de ces mouvements n'est piloté au scroll. */
@keyframes ariiwa-halo{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.12); opacity:.85; } }
@keyframes ariiwa-fill{ 0%,24%{ transform:scaleX(0); opacity:1; } 33%,57%{ transform:scaleX(.5); } 66%,92%{ transform:scaleX(1); } 97%,100%{ transform:scaleX(1); opacity:0; } }
@keyframes ariiwa-comet{ 0%{ left:0%; opacity:0; } 4%{ opacity:1; } 24%{ left:0%; } 33%,57%{ left:50%; } 66%,92%{ left:100%; } 97%,100%{ left:100%; opacity:0; } }
@keyframes ariiwa-stop{ 0%{ opacity:.92; transform:translateY(0) scale(.985); } 5%{ opacity:1; } 10%,27%{ opacity:1; transform:translateY(-12px) scale(1.015); } 33%,100%{ opacity:.92; transform:translateY(0) scale(.985); } }
@keyframes ariiwa-node{ 0%,33%,100%{ transform:scale(1); background:var(--fond-surface); box-shadow:0 0 0 1px var(--fil-repos); color:var(--texte-sourd); } 7%,27%{ transform:scale(1.16); background:var(--accent); box-shadow:0 0 0 8px rgba(227,169,67,.18); color:var(--sur-accent); } }
@keyframes ariiwa-cardsheen{ 0%,3%{ transform:translateX(-150%) skewX(-14deg); opacity:0; } 7%{ opacity:1; } 24%{ transform:translateX(280%) skewX(-14deg); opacity:1; } 27%,100%{ transform:translateX(280%) skewX(-14deg); opacity:0; } }
@keyframes ariiwa-aura{ 0%,100%{ transform:scale(1); opacity:.4; } 50%{ transform:scale(1.16); opacity:.75; } }
@keyframes ariiwa-sweep{ 0%{ transform:translateX(-60%) rotate(8deg); opacity:0; } 12%{ opacity:.9; } 50%{ opacity:.9; } 88%{ opacity:0; } 100%{ transform:translateX(160%) rotate(8deg); opacity:0; } }
@keyframes ariiwa-glide{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes ariiwa-hl{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ariiwa-barin{ from{ transform:scaleY(.15); opacity:0; } to{ transform:scaleY(1); opacity:1; } }

@media (max-width: 900px){
  #tarifs [data-etapes]{ grid-template-columns:1fr !important; }
  #tarifs [data-rail]{ display:none !important; }
  #tarifs [data-calc-grid], #tarifs [data-duo-grid]{ grid-template-columns:1fr !important; }
  #tarifs [data-calc-grid] > div:first-child{ border-right:none !important; border-bottom:1px solid var(--fil-repos); }
  #tarifs [data-duo-grid]{ grid-template-rows:none !important; }
  #tarifs [data-duo-grid] > *{ grid-column:1 !important; grid-row:auto !important; }
  #tarifs [data-seam-col]{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  #tarifs *{ animation:none !important; transition:none !important; }
}

/* ============ CONTACT — WhatsApp d'abord ============ */
.sec-head h2 .wa{ color: var(--green); }
.contact-cols{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: stretch; }

/* Les deux numéros, à égalité — un au Bénin, un en France. */
.contact-pays{ display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.ct-pays{ display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .2s ease; }
.ct-pays:hover{ transform: translateY(-2px); border-color: var(--caramel-soft); }
.ct-lieu{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ct-num{ font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.ct-num:hover{ color: var(--caramel); }
.ct-liens{ display: flex; gap: 16px; margin-top: 4px; }
.ct-liens a{ font-size: 13.5px; font-weight: 600; color: var(--green-deep); text-decoration: none; }
.ct-liens a:hover{ text-decoration: underline; }

/* canal principal */
.contact-primary{ display: flex; flex-direction: column; justify-content: center; background: var(--card); border: 1px solid rgba(46,159,105,.32); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.cp-top{ display: flex; align-items: center; gap: 14px; }
.cp-ic{ flex: 0 0 50px; width: 50px; height: 50px; border-radius: 15px; background: var(--green); display: grid; place-items: center; box-shadow: 0 6px 16px -5px rgba(46,159,105,.55); }
.cp-ic svg{ width: 27px; height: 27px; fill: #fff; }
.cp-ht{ display: flex; flex-direction: column; gap: 3px; }
.cp-ht b{ font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.cp-ht span{ font-size: 13px; color: var(--ink-2); }
.cp-act{ display: flex; align-items: center; gap: 16px; margin: 20px 0 18px; flex-wrap: wrap; }
.btn-wa{ display: inline-flex; align-items: center; gap: 9px; background: var(--green); color: #fff; font-weight: 650; font-size: 15px; padding: 13px 22px; border-radius: 999px; box-shadow: 0 6px 18px -4px rgba(46,159,105,.5); transition: background .2s, box-shadow .2s; }
.btn-wa:hover{ background: var(--green-deep); box-shadow: 0 10px 26px -6px rgba(46,159,105,.6); }
.btn-wa svg{ width: 18px; height: 18px; fill: #fff; }
.cp-num{ font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 16px; }
.cp-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip{ font-size: 12px; color: var(--ink-2); background: var(--cream-2); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }

.contact-alt-label{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.contact-alt-label{ display: block; margin: 30px 0 12px; }
.contact-alt{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alt-card{ display: flex; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .2s; }
.alt-card:hover{ transform: translateY(-2px); border-color: var(--caramel-soft); }
.alt-ic{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: rgba(181,105,74,.12); display: grid; place-items: center; font-size: 17px; }
.alt-tx{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alt-tx b{ font-size: 14.5px; font-weight: 650; color: var(--ink); }
.alt-hi{ font-size: 13px; color: var(--caramel); font-weight: 600; }
.alt-tx small{ font-size: 11.5px; color: var(--ink-3); }

/* -- Demande de rappel : le seul formulaire du site -- */
/* Masqué au départ. C'est la carte « On te rappelle » de la rangée du dessus
   qui l'ouvre, par la case à cocher dont elle est l'étiquette. Le serveur
   coche cette case lui-même dans les deux cas où le clic ne peut pas décider :
   saisie refusée, et confirmation après envoi.

   Une règle `.rappel:target` ouvrait aussi ce bloc. Elle est partie, et il ne
   faut pas la remettre : le formulaire poste sur `…#rappel`, donc le moindre
   envoi dépose l'ancre dans l'adresse, et `:target` maintenait alors le bloc
   ouvert quoi qu'on clique. La carte devenait inerte juste après le premier
   envoi — la flèche pivotait, le formulaire ne bougeait plus, et à l'arrivée
   elle annonçait « ouvrir » sur un formulaire déjà ouvert. L'ancre reste dans
   l'`action` du formulaire, mais pour ce qu'elle sait faire : amener le
   navigateur au bon endroit d'une page de dix mille pixels. Elle ne décide
   plus de l'affichage. */
.rappel{ display: none; margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.rappel-bascule:checked ~ .rappel{ display: block; }

/* La case qui porte la bascule : hors de vue mais pas hors du parcours au
   clavier. `display:none` la retirerait de la tabulation et la carte ne
   serait plus actionnable qu'à la souris. */
.rappel-bascule{ position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alt-card-bascule{ cursor: pointer; }
.rappel-bascule:focus-visible ~ .contact-alt .alt-card-bascule{
  outline: 2px solid var(--caramel); outline-offset: 3px; }
/* Ouvert, la flèche pointe vers le haut : elle dit ce que le clic va faire. */
.rappel-bascule:checked ~ .contact-alt .alt-card-bascule .alt-ic{ transform: rotate(180deg); }
.alt-card-bascule .alt-ic{ transition: transform .2s; }

.rappel-form{ display: flex; flex-direction: column; gap: 14px; }
.rf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rf{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-l{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rf-l em{ font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); opacity: .75; }
/* 16px, et pas un pixel de moins : en dessous, Safari iOS zoome tout seul sur
   le champ dès qu'on le touche, et la page part de travers. C'est la raison
   pour laquelle ces tailles échappent aussi aux réductions du bloc 425px. */
.rappel-form input[type="text"],
.rappel-form input[type="tel"],
.rappel-form select,
.rappel-form textarea{
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.rappel-form textarea{ resize: vertical; min-height: 84px; }
.rappel-form input:focus, .rappel-form select:focus, .rappel-form textarea:focus{
  outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(181,105,74,.14);
}
.rf-h{ font-size: 11.5px; color: var(--ink-3); }
.rf-e{ font-size: 12px; color: var(--red); font-weight: 600; }
.rappel-form :is(input, select, textarea):has(~ .rf-e){ border-color: var(--red); }
.rappel-err{ font-size: 13px; color: var(--red); font-weight: 600; background: rgba(201,70,58,.07); border: 1px solid rgba(201,70,58,.22); border-radius: var(--r-sm); padding: 11px 14px; }

.rf-pied{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.rf-pied small{ flex: 1 1 240px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.rf-pied small a{ color: var(--caramel); text-decoration: underline; }

/* Le champ piège. Sorti du flux plutôt que `display:none` : certains robots
   ignorent précisément les champs cachés de cette façon-là. Invisible,
   sans surface, hors du parcours au clavier — personne ne le remplit par
   accident. */
.rappel-piege-wrap{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.rappel-ok{ display: flex; align-items: flex-start; gap: 14px; }
.rappel-ok-ic{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: rgba(46,159,105,.13); color: var(--green-deep); display: grid; place-items: center; font-size: 19px; font-weight: 700; }
.rappel-ok b{ font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.rappel-ok p{ margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }

@media (max-width: 1000px){
  .contact-cols{ grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px){
  .contact-alt{ grid-template-columns: 1fr; }
  .cp-act{ gap: 12px; }
  .rf-row{ grid-template-columns: 1fr; }
}

/* ===========================================================
   ANIMATIONS — futuriste à l'africaine
   Couche additive : motifs géométriques, lueurs, flottements,
   shimmer or. Tout est neutralisé en prefers-reduced-motion.
   =========================================================== */

/* -- Barre de progression du défilement -- */
.scroll-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; pointer-events: none;
  background: linear-gradient(90deg, var(--caramel), var(--gold), var(--gold-2));
  box-shadow: 0 0 14px rgba(227,169,67,.6); transition: width .12s linear; }

/* -- Nav : élévation au défilement -- */
.nav{ transition: box-shadow .3s ease, background .3s ease; }
.nav.scrolled{ box-shadow: 0 12px 32px -14px rgba(40,22,8,.28); background: color-mix(in srgb, var(--cream-2) 93%, transparent); }

/* -- Hero : aurora chaude animée -- */
.hero::before{ content:""; position: absolute; inset: -12% -12% 0 -12%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(420px 320px at 22% 28%, rgba(227,169,67,.30), transparent 60%),
    radial-gradient(360px 300px at 80% 18%, rgba(181,105,74,.26), transparent 62%),
    radial-gradient(400px 340px at 62% 82%, rgba(242,204,131,.24), transparent 60%);
  filter: blur(22px); animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora{
  0%  { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100%{ transform: translate3d(3%, -2%, 0) scale(1.04); }
}
/* dérive douce des points du hero */
.hero::after{ animation: dot-drift 30s linear infinite; }
@keyframes dot-drift{ to{ background-position: 26px 52px; } }

/* -- Bande "kente" animée en haut du bandeau sombre -- */
.strip{ position: relative; overflow: hidden; }
.strip::before{ content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0 22px, var(--caramel) 22px 44px, var(--green) 44px 60px, var(--red) 60px 76px, var(--gold-deep) 76px 96px);
  background-size: 96px 100%; animation: kente 7s linear infinite; }
@keyframes kente{ to{ background-position: 96px 0; } }

/* -- Motif géométrique africain dérivant (sections sombres) -- */
/* Le motif de croix ne sert plus qu'au footer. Il tenait aussi « Où nous en
   sommes » ; depuis que les lés du pagne courent sous toute la page, deux
   textures s'y disputaient le fond. Gardé ici parce que le footer est la seule
   surface sombre assez haute pour le porter sans bruit. */
.afro-band{ position: relative; overflow: hidden; }
.afro-band > .wrap{ position: relative; z-index: 1; }
.afro-band::before{ content:""; position: absolute; inset: 0; pointer-events: none; opacity: .08; color: var(--gold-2);
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 16px),
    radial-gradient(currentColor 1.4px, transparent 1.6px);
  background-size: 32px 32px, 32px 32px, 22px 22px;
  animation: afro-drift 26s linear infinite; }
@keyframes afro-drift{ to{ background-position: 64px 0, -64px 0, 44px 44px; } }
/* losanges "mudcloth" en surcouche, dérive inverse pour un fond plus riche */
.afro-band::after{ content:""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .06; color: var(--caramel-soft);
  background-image:
    repeating-linear-gradient(0deg, currentColor 0 1.5px, transparent 1.5px 40px),
    repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 40px);
  background-size: 40px 40px; animation: afro-drift-2 34s linear infinite; }
@keyframes afro-drift-2{ to{ background-position: -40px 40px, 40px -40px; } }

/* -- Motif africain doux (sections claires) -- */
.afro-soft{ position: relative; }
.afro-soft > .wrap{ position: relative; z-index: 1; }
.afro-soft::before{ content:""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .045; color: var(--caramel);
  background-image:
    repeating-linear-gradient(60deg, currentColor 0 1.5px, transparent 1.5px 20px),
    repeating-linear-gradient(-60deg, currentColor 0 1.5px, transparent 1.5px 20px),
    radial-gradient(currentColor 1.3px, transparent 1.5px);
  background-size: 34px 58px, 34px 58px, 26px 26px;
  animation: afro-drift 32s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }

/* Sous 720 px, les coutures tombent. Cinq lés dans la largeur d'un téléphone
   donneraient des bandes de quelques dizaines de pixels, et quatre coutures
   doublées par-dessus feraient une rayure, pas un pagne. Reste la seule
   variation de teinte. Jamais de couture horizontale : ça n'existe pas sur un
   pagne, les lés se cousent bord à bord dans le sens de la longueur. */
@media (max-width: 720px){
  .s-cream, .s-cream-2, .s-cream-3, .s-deep, .hero{
    --les: linear-gradient(90deg,
      rgba(var(--voile),.018) 0% 27.27%,
      rgba(var(--voile),0) 27.27% 45.45%,
      rgba(var(--voile),.026) 45.45% 72.73%,
      rgba(var(--voile),.009) 72.73% 81.82%,
      rgba(var(--voile),.016) 81.82% 100%); }
}

/* -- Carte de déploiement (voir static/landing/js/africa-map.js) --

   Le composant ne connaît aucune couleur de marque : il lit ces trois jetons
   sur son hôte. C'est ici, et nulle part dans le JavaScript, que le vocabulaire
   du composant rejoint la charte.

   `--fond-principal` sert au liseré qui détache le point de ville du pays doré.
   Sur ce panneau sombre c'est le brun-nuit qu'il faut, pas le crème : le point
   doit sembler découpé dans la carte, pas posé dessus. */
.pos-hote{ position: relative; overflow: hidden; }
.pos-hote > .wrap{ position: relative; z-index: 1; }
/* La carte est un fond : au-dessus des lés du pagne, sous le contenu. Elle ne
   prend jamais le pointeur — rien n'y est cliquable, et un survol fantôme sur
   du décor gênerait la lecture juste au-dessus. */
.pos-carte{
  --accent: var(--gold);
  --accent-clair: var(--gold-2);
  --fond-principal: var(--night);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  /* Le SVG garde son `overflow: visible` — sinon les anneaux qui battent et les
     traits épais seraient coupés au bord. C'est ce calque-ci qui contient : le
     cadrage se fait sur le périmètre, donc les 177 autres pays débordent
     forcément, et sans clip la planète s'étalerait hors de la section. */
  overflow: hidden;
  opacity: .85; }
/* Dimensionnée sur la hauteur, jamais sur la largeur. En pleine largeur de
   section la carte dépasse les mille pixels de haut et se fait couper par le
   bas — l'Afrique de l'Ouest disparaissait sous le bord. Sur la hauteur, le
   périmètre tient entier quelle que soit la largeur de l'écran. */
.pos-carte ariiwa-map{ display: block; height: 100%; }
.pos-carte svg{ height: 100%; width: auto; display: block; }
/* Sur téléphone la logique s'inverse. La section y fait plus de mille pixels de
   haut pour une fenêtre de 844 : dimensionner sur la hauteur donne une France
   grande comme le titre et un arc qui traverse le paragraphe. Sur la largeur,
   la carte redevient ce qu'elle doit être — un fond. Le voile baisse aussi :
   la même carte occupe proportionnellement bien plus de place derrière un
   texte qui, lui, ne rétrécit pas. */
@media (max-width: 720px){
  .pos-carte{ opacity: .45; align-items: flex-start; padding-top: 8%; }
  .pos-carte ariiwa-map{ height: auto; width: 100%; }
  .pos-carte svg{ height: auto; width: 100%; }
}
/* L'anneau qui bat sous les deux villes ouvertes. `fill-box` est indispensable :
   sans lui l'échelle se calcule sur le repère du SVG entier et l'anneau part à
   l'autre bout de la carte au lieu de battre sur place. */
@keyframes ar-ping{
  0%{ transform: scale(1); opacity: .7; }
  70%{ transform: scale(2.4); opacity: 0; }
  100%{ transform: scale(2.4); opacity: 0; } }
.pos-carte .ar-ping{
  transform-box: fill-box; transform-origin: center;
  animation: ar-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite; }

/* -- Fond aso-oké : la nappe tissée (voir partials/aso_defs.html) --

   Successeur de `.afro-soft` là où il est posé : même 4,5 %, même fondu
   vertical, même dérive lente, mais un vrai tissu en traits de 1 px plutôt
   qu'une superposition de dégradés. `.afro-soft` reste en service sur les
   sections que la nappe ne couvre pas.

   La section hôte porte `aso-hote` et la nappe est son premier enfant ; le
   contenu remonte au-dessus par le `z-index` de `.wrap`. Sans ça la nappe
   passerait par-dessus le texte. */
.aso-hote{ position: relative; }
.aso-hote > .wrap{ position: relative; z-index: 1; }
.aso-nappe{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
/* Deux sections nappées qui se suivent doivent se lire comme une seule : sans
   ça, leurs deux fondus se cumulent à la jointure et creusent une bande sans
   un fil — 424 px entre « Comment ça marche » et « Tarifs ». Celle du dessus
   ne fond pas en bas, celle du dessous ne fond pas en haut. */
.aso-nappe-joint-bas{
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 100%);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 100%); }
.aso-nappe-joint-haut{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent); }
/* Déborde d'exactement une tuile dans chaque axe : la dérive translate d'une
   tuile, donc le bord qui entre a toujours de la matière derrière lui. */
.aso-derive{ position: absolute; inset: -288px -256px; display: block;
  animation: ar-aso calc(34s / max(0.6, var(--tempo-tissage, 1))) linear infinite; }
/* Une tuile entière en x et en y : la boucle est invisible. */
@keyframes ar-aso{ to{ transform: translate3d(256px, 288px, 0); } }
/* Coupe la dérive et laisse la texture. Rien ne pose cet attribut aujourd'hui ;
   il est là pour un réglage utilisateur à venir. */
[data-motion-off] *{ animation: none !important; }

/* -- Titre : mot accent en dégradé chatoyant -- */
.hero h1 .accent{
  background: linear-gradient(100deg, var(--caramel) 0%, var(--gold) 34%, var(--gold-2) 50%, var(--gold) 66%, var(--caramel) 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer-text 7s linear infinite; }
@keyframes shimmer-text{ to{ background-position: 220% center; } }

/* -- Maquettes téléphone : flottement (transforms de base préservés) -- */
.hero-phones{ transition: transform .25s ease; }
.hero-phones .p-front{ animation: float-front 7s ease-in-out infinite; }
.hero-phones .p-back{ animation: float-back 9s ease-in-out infinite; }
@keyframes float-front{ 0%,100%{ transform: rotate(-3deg) translateY(0); } 50%{ transform: rotate(-3deg) translateY(-16px); } }
@keyframes float-back{ 0%,100%{ transform: rotate(6deg) translate(74px,14px) scale(.86); } 50%{ transform: rotate(6deg) translate(74px,3px) scale(.86); } }
/* "V" : chaque .phone pivote sur son coin bas INTÉRIEUR → les deux apex
   coïncident au centre-bas (gap 0). Rotation intégrée aux keyframes pour ne pas
   être écrasée par le flottement, et reprise en statique pour le reduced-motion. */

/* -- Lueur du hero qui respire -- */
.glow{ animation: glow-pulse 6s ease-in-out infinite; }
@keyframes glow-pulse{ 0%,100%{ opacity: .8; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.14); } }

/* -- Points "live" qui pulsent -- */
.eyebrow .dot, .pos-now .ld{ animation: pulse-green 2.2s ease-out infinite; }
@keyframes pulse-green{ 0%{ box-shadow: 0 0 0 0 rgba(46,159,105,.5); } 70%,100%{ box-shadow: 0 0 0 11px rgba(46,159,105,0); } }
.city-chip.live .ld{ animation: pulse-white 2.2s ease-out infinite; }
@keyframes pulse-white{ 0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70%,100%{ box-shadow: 0 0 0 11px rgba(255,255,255,0); } }

/* -- Reflet or qui balaie les boutons gold (sous le texte) -- */
.btn-gold{ position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after{ content:""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg);
  animation: sheen 5s ease-in-out infinite; }
@keyframes sheen{ 0%, 18%{ left: -60%; } 48%, 100%{ left: 135%; } }

/* -- Survol : élévation + lueur caramel -- */
.val-card, .pos-stat, .tier, .price-card{ transition: transform .25s ease, box-shadow .25s ease; }
.val-card:hover, .pos-stat:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px -18px rgba(181,105,74,.42); }
.pq-raison:hover{ transform: translateY(-3px); }

/* -- Reveal : ajout d'un léger flou + zoom pour un rendu plus "premium" -- */
.rev{ will-change: transform, opacity; }

/* Le contenu est dessiné à 414 × 868 px fixes : on le met à l'échelle,
   on ne le redimensionne jamais (sinon la maquette casse). */
.parcours{ --pw: 414; --ph: 868; --s: 1;
  width: 100%; max-width: calc(var(--pw) * 1px);
  aspect-ratio: var(--pw) / var(--ph);
  margin-inline: auto; overflow: hidden; }
.parcours iframe{ width: calc(var(--pw) * 1px); height: calc(var(--ph) * 1px);
  border: 0; display: block; transform-origin: top left; transform: scale(var(--s)); }

/* ===== Neutralisation mouvement (accessibilité) ===== */
@media (prefers-reduced-motion: reduce){
  .scroll-progress, .nav.scrolled{ transition: none; }
  .hero::before, .hero::after, .strip::before,
  .afro-band::before, .afro-band::after, .afro-soft::before, .aso-derive,
  .pos-carte .ar-ping,
  .hero h1 .accent, .hero-phones .p-front, .hero-phones .p-back,
  .glow,
  .eyebrow .dot, .pos-now .ld, .city-chip.live .ld, .btn-gold::after,
  .strip-track{
    animation: none !important;
  }
  .hero h1 .accent{ -webkit-text-fill-color: var(--caramel); color: var(--caramel); }
  /* Carrousel figé → rangée statique centrée, sans doublon */
  .strip-track{ flex-wrap: wrap; justify-content: center; }
  .strip-track .stat[aria-hidden="true"], .strip-track .sep[aria-hidden="true"]{ display: none; }
}

/* ===========================================================
   RESPONSIVE ≤425px — overrides ajoutés tout à la fin pour
   l'emporter par l'ordre source. NE modifie aucune règle existante.
   PARTIE A : texte de contenu lisible réduit de 3px (plancher 9px ;
              clamp → min & max −3px). Maquettes téléphone EXCLUES.
   PARTIE B : cartes de contenu → padding réduit de 10px/côté
              (plancher 6px). Maquettes téléphone EXCLUES.
   =========================================================== */
@media (max-width: 425px){

  /* ----------------- PARTIE A — texte −3px ----------------- */

  /* base / utilitaires */
  .mono{ font-size: 9px; }              /* 11 → 8 → plancher 9 */

  /* nav */
  .nav-links a{ font-size: 11.5px; }    /* 14.5 → 11.5 */
  .nav-drawer a{ font-size: 13px; }     /* 16 → 13 */

  /* boutons */
  .btn{ font-size: 12px; }              /* 15 → 12 */
  .btn-sm{ font-size: 11px; }           /* 14 → 11 */
  .btn-lg{ font-size: 13.5px; }         /* 16.5 → 13.5 */

  /* store badge (contenu lisible) */
  .store-apple img{ height: 44px; }             /* 56 → 44 */
  .store-google img{ height: 57px; }            /* 73 → 57, même facteur 1,302 */
  /* Le troisième suit les deux autres, sinon il dépasse d'un bon centimètre. */
  .store-web{ height: 44px; gap: 9px; padding: 0 14px; }
  .store-web-ic{ width: 20px; height: 20px; flex: 0 0 20px; }
  .store-web-tx small{ font-size: 8.5px; }      /* 10.5 → 8.5 */
  .store-web-tx b{ font-size: 15px; }           /* 19 → 15 */

  /* hero */
  .eyebrow{ font-size: 10px; }                       /* 13 → 10 */
  .hero h1{ font-size: clamp(23px, 7.2vw, 44px); }   /* mobile : tient sans déborder « monde » */
  .hero-sub{ font-size: clamp(14px,1.5vw,17px); }    /* clamp(17,..,20) −3 */
  /* Hero : la grille 1 colonne `1fr` grandissait au min-content du téléphone
     (300px) → plus large que l'écran → le téléphone centré tombait à droite.
     `minmax(0,1fr)` borne la piste à la largeur réelle → vrai centrage. */
  .hero-in{ grid-template-columns: minmax(0, 1fr); }
  .hero-phones{ transform: none; min-height: 0; margin-top: 12px; }

  /* strip / carrousel */
  .strip .lbl{ font-size: 9px; }        /* 12 → 9 */
  .strip .stat{ font-size: 12px; }      /* 15 → 12 */
  .strip .stat b{ font-size: 14px; }    /* 17 → 14 */

  /* sec-head */
  .kicker{ font-size: 10px; }                          /* 13 → 10 */
  .sec-head h2{ font-size: clamp(29px, 4vw, 53px); }   /* clamp(32,..,56) −3 */
  .sec-head .lede{ font-size: clamp(13px,1.4vw,16px); }/* clamp(16,..,19) −3 */

  /* comment ça marche / steps */
  .fseg button{ font-size: 12px; }   /* 15 → 12 */
  .hiw-n{ font-size: 9px; }          /* 12 → 9, plancher */
  .hiw-dit h4{ font-size: 15px; }    /* 18 → 15 */
  .hiw-dit p{ font-size: 11px; }     /* 14 → 11, plancher */

  /* pourquoi (why) */
  .why-card h4{ font-size: 17px; }      /* 20 → 17 */
  .why-card p{ font-size: 12px; }       /* 15 → 12 */
  .why-card .wtag{ font-size: 9px; }    /* 11.5 → 8.5 → plancher 9 */

  /* cartes preuve (CONTENU — à inclure) */
  .pq-n{ font-size: 9px; }              /* 11 → 9, plancher */
  .pq-raison h3{ font-size: 15px; }     /* 18 → 15 */
  .pq-raison p{ font-size: 11px; }      /* 14 → 11 */
  .pq-role{ font-size: 9px; }           /* 11 → 9, plancher */

  /* socle preuve */
  .proof-socle .ps-lbl{ font-size: 10px; } /* 13 → 10 */
  .ps-chip{ font-size: 10px; }             /* 13 → 10 */

  /* valeurs */
  .val-card .vn{ font-size: 9px; }      /* 12 → 9 */
  .val-card h4{ font-size: 18px; }      /* 21 → 18 */
  .val-card p{ font-size: 11.5px; }     /* 14.5 → 11.5 */

  /* banner CTA */
  .banner .bk{ font-size: 9px; }                       /* 12 → 9 */
  .banner h3{ font-size: clamp(25px,3.4vw,39px); }     /* clamp(28,..,42) −3 */
  .banner p{ font-size: 13.5px; }                      /* 16.5 → 13.5 */

  /* position aujourd'hui */
  .pos-stats{ grid-template-columns: 1fr; }            /* #4 : stats empilées (1 colonne) */
  .pos-stat .num{ font-size: clamp(31px,4vw,43px); }   /* clamp(34,..,46) −3 */
  .pos-stat .num .u{ font-size: 17px; }                /* 20 → 17 */
  .pos-stat .lab{ font-size: 11px; }                   /* 14 → 11 */
  .pos-now{ font-size: 10.5px; }                       /* 13.5 → 10.5 */
  .pos-copy h2{ font-size: clamp(27px,3.6vw,43px); }   /* clamp(30,..,46) −3 */
  .pos-copy p{ font-size: 13.5px; }                    /* 16.5 → 13.5 */
  .city-chip{ font-size: 11px; }                       /* 14 → 11 */

  /* tarifs — price cards */
  .price-card .pl-name{ font-size: 18px; }             /* 21 → 18 */
  .price-card .pl-tag{ font-size: 10.5px; }            /* 13.5 → 10.5 */
  .price-card .pl-price{ font-size: 39px; }            /* 42 → 39 */
  .price-card .pl-price small{ font-size: 12px; }      /* 15 → 12 */
  .price-card .pl-badge{ font-size: 9px; }             /* 11 → 8 → plancher 9 */
  .pl-list li{ font-size: 11.5px; }                    /* 14.5 → 11.5 */
  .pl-list li .ck{ font-size: 9px; }                   /* 11 → 8 → plancher 9 */

  /* tarifs — paliers (tiers) */
  .tier-val{ font-size: 37px; }                        /* 40 → 37 */
  .tier-val small{ font-size: 9px; }                   /* 12 → 9 */
  .tier-unit{ font-size: 9.5px; }                      /* 12.5 → 9.5 */
  .tier-cap{ font-size: 10.5px; }                      /* 13.5 → 10.5 */
  .tier-feat .tier-val{ font-size: 45px; }             /* 48 → 45 */
  .tier-badge{ font-size: 9px; }                       /* 11 → 8 → plancher 9 */
  .tier-free .tf-pill{ font-size: 17px; }              /* 20 → 17 */
  .tier-free p{ font-size: 11px; }                     /* 14 → 11 */

  /* tarifs — carte « entre nous » (duo) */
  .duo-ht h3{ font-size: 19px; }        /* 22 → 19 */
  .duo-ht p{ font-size: 10.5px; }       /* 13.5 → 10.5 */
  .duo-tx b{ font-size: 11.5px; }       /* 14.5 → 11.5 */
  .duo-tx span{ font-size: 9.5px; }     /* 12.5 → 9.5 */
  .duo-seal{ font-size: 9px; }          /* 12 → 9 */

  /* calculateur (hors maquette) */
  .calc-head .ct{ font-size: 17px; }                   /* 20 → 17 */
  .calc-head .cd{ font-size: 11px; }                   /* 14 → 11 */
  .calc-seg button{ font-size: 11px; }                 /* 14 → 11 */
  .cin .clab .k{ font-size: 11.5px; }                  /* 14.5 → 11.5 */
  .cin .clab .v{ font-size: 17px; }                    /* 20 → 17 */
  .cin .clab .v small{ font-size: 10px; }              /* 13 → 10 */
  .cin .crange-tags{ font-size: 9px; }                 /* 11.5 → 8.5 → plancher 9 */
  .cin .cnumber button{ font-size: 19px; }             /* 22 → 19 */
  .cin .cnumber input{ font-size: 16px; }              /* 19 → 16 */
  .calc-out .res-main .rk{ font-size: 10px; }          /* 13 → 10 */
  .calc-out .res-main .rv{ font-size: clamp(33px,4.2vw,49px); } /* clamp(36,..,52) −3 */
  .calc-out .res-main .rv small{ font-size: 15px; }    /* 18 → 15 */
  .calc-out .res-main .rsub{ font-size: 10px; }        /* 13 → 10 */
  .res-row{ font-size: 11.5px; }                       /* 14.5 → 11.5 */
  .res-row .rr{ font-size: 13px; }                     /* 16 → 13 */
  .res-row .rr small{ font-size: 9px; }                /* 11.5 → 8.5 → plancher 9 */
  .calc-note{ font-size: 9.5px; }                      /* 12.5 → 9.5 */
  .calc-kolo .cc-t{ font-size: 10.5px; }             /* 13.5 → 10.5 */

  /* FAQ */
  .faq summary{ font-size: 16px; }      /* 19 → 16 */
  .faq .a{ font-size: 12.5px; }         /* 15.5 → 12.5 */

  /* contact — cartes lisibles (la maquette .cc-* de chat reste figée) */
  .cp-ht b{ font-size: 16px; }                /* 19 → 16 */
  .cp-ht span{ font-size: 10px; }             /* 13 → 10 */
  .btn-wa{ font-size: 12px; }                 /* 15 → 12 */
  .cp-num{ font-size: 13px; }                 /* 16 → 13 */
  .cp-chip{ font-size: 9px; }                 /* 12 → 9 */
  .contact-alt-label{ font-size: 9px; }       /* 12 → 9 */
  .alt-tx b{ font-size: 11.5px; }             /* 14.5 → 11.5 */
  .alt-hi{ font-size: 10px; }                 /* 13 → 10 */
  .alt-tx small{ font-size: 9px; }            /* 11.5 → 8.5 → plancher 9 */

  /* footer */
  .foot-brand p{ font-size: 11px; }     /* 14 → 11 */
  .foot-col h5{ font-size: 11px; }      /* 14 → 11 */
  .foot-col a{ font-size: 11px; }       /* 14 → 11 */
  .foot-legal a{ font-size: 10px; }     /* 13 → 10 */
  .foot-bottom{ font-size: 10px; }      /* 13 → 10 */

  /* ----------------- PARTIE B — padding cartes −10px ----------------- */

  .pq-raison{ padding: 12px 14px; }             /* 20 22 → 12 14 */
  .why-card{ padding: 22px; }                   /* 32 → 22 */
  .val-card{ padding: 20px; }                   /* 30 → 20 */
  .pos-stat{ padding: 16px; }                   /* 26 → 16 */
  .price-card{ padding: 24px; }                 /* 34 → 24 */
  .calc-head{ padding: 16px 24px; }             /* 26 34 → 16 24 */
  .calc-inputs{ padding: 24px; }                /* 34 → 24 */
  .calc-out{ padding: 24px; }                   /* 34 → 24 */
  .calc-out .res-main{ padding: 16px; }         /* 26 → 16 */
  .calc-kolo{ padding: 6px 6px; }             /* 14 16 → 4 6 → plancher 6 */
  .banner-in{ padding: 46px; }                  /* 56 → 46 */
  .tier-free{ padding: 6px 12px; }              /* 16 22 → 6 12 */
  .duo{ padding: 38px clamp(26px,5vw,54px); }   /* 48 clamp(36,..,64) → 38 clamp(26,..,54) */
  .contact-primary{ padding: 14px; }            /* 24 → 14 */
  .alt-card{ padding: 6px; }                    /* 16 → 6 */
  .rappel{ padding: 14px; }                     /* 24 → 14 */
  .rappel-ok b{ font-size: 14px; }              /* 18 → 14 */
  .rappel-ok p{ font-size: 11px; }              /* 13.5 → 11 */
  .rf-l{ font-size: 9px; }                      /* 11 → 9 */
  .rf-pied small{ font-size: 10px; }            /* 11.5 → 10 */
  /* Les champs eux-mêmes restent à 16px : voir la note sur le zoom iOS. */
}