/* =========================================================================
   Senta'a — Site vitrine
   Design system : charte de marque officielle.
   Vert #A6CC41 = identité générale (60-30-10 : ~30%, chrome/structure/CTA).
   Bleu #5FA5C9 = confiance UNIQUEMENT (~10% : paiement protégé, badges
   vérifiés, sécurité). Sable chaud = canevas (~60%). Jamais d'alternance
   décorative vert/bleu — le bleu se justifie toujours par un contexte de
   confiance. Terracotta n'est plus une couleur Sentaa (c'était Orange Money).
   Motif d'auvent festonné (signature) + grain papier kraft.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Polices locales (aucun CDN — fichiers .woff2 dans assets/fonts/)
   ------------------------------------------------------------------------- */
/* Montserrat — famille unique (titres + corps), variable poids 100→900.
   Board de marque : Semibold Italic pour le wordmark (déjà dans le logo PNG,
   pas recréé ici). L'italique est réservée aux accroches qui font écho au
   wordmark — voir usage de .italic-echo. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Montserrat-latin.woff2") format("woff2");
  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: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Montserrat-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/Montserrat-Italic-latin.woff2") format("woff2");
  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: "Montserrat";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/Montserrat-Italic-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Variables de thème
   ------------------------------------------------------------------------- */
:root {
  /* --- Neutre chaud : ~60%, le canevas --- */
  --sable: #f6f1e7;
  --sable-2: #ece4d3;
  --creme-carte: #fffdf9;
  --texte: #26241c;
  --texte-doux: #6e6a5c;

  /* --- Vert de marque : ~30%, identité (chrome, structure, CTA) ---
     --green-brand est la teinte officielle EXACTE : fill/icônes/gros aplats
     seulement, jamais de texte dessus (contraste trop faible). */
  --green-brand: #a6cc41;
  --green-deep: #5c7a1f;   /* CTA plein, texte blanc, headings sur fond clair */
  --green-deep-2: #4a6519; /* hover/pressed de --green-deep */
  --green-tint: #eaf3d2;   /* fonds de badges/sections douces */
  --green-mid: #8fb733;    /* décoratif seulement (dégradés, auvent) */
  --green-light: #c6e08a;  /* décoratif seulement (dégradés) */

  /* --- Bleu de marque : ~10%, réservé au sens de confiance ---
     --blue-brand est la teinte officielle EXACTE : fill/icônes seulement,
     jamais de texte dessus. Ne s'utilise QUE dans un contexte de paiement
     protégé / vérification / sécurité — jamais en alternance décorative. */
  --blue-brand: #5fa5c9;
  --blue-brand-2: #4e93b8; /* hover/pressed de --blue-brand */
  --blue-deep: #3d7a9a;    /* texte blanc autorisé, badges "vérifié" */
  --blue-tint: #e4f1f6;    /* fonds de badges doux / texte clair sur fond sombre */
  --blue-mid: #86b4ce;     /* décoratif seulement */
  --blue-immersif: #12384b; /* fond sombre de la section paiement protégé */

  /* Sémantique hors marque (coche générique, indépendante des 2 couleurs) */
  --succes: #5fa850;

  --ligne: rgba(38, 36, 28, 0.12);

  /* Typographie */
  --font-titre: "Montserrat", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-corps: "Montserrat", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;

  /* Rayons */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Ombres chaudes (jamais de noir pur) */
  --ombre-douce: 0 6px 20px -8px rgba(38, 36, 28, 0.18),
    0 2px 6px -3px rgba(38, 36, 28, 0.12);
  --ombre-carte: 0 14px 34px -16px rgba(38, 36, 28, 0.28),
    0 4px 10px -6px rgba(38, 36, 28, 0.16);
  --ombre-forte: 0 26px 60px -22px rgba(18, 56, 75, 0.4),
    0 8px 20px -10px rgba(38, 36, 28, 0.22);
  /* Ombre « objet qui flotte » (mockup, cartes qui débordent) */
  --ombre-flottante: 0 40px 70px -28px rgba(18, 56, 75, 0.45),
    0 14px 30px -14px rgba(38, 36, 28, 0.28);

  /* Grain « papier kraft » : bruit fractal SVG, appliqué en overlay très léger.
     Donne la matière terreuse sans alourdir (une seule ressource inline). */
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");

  /* Motif géométrique africain (losange dans losange + dot, inspiration bogolan)
     en filigrane — texture indépendante des couleurs de marque, teinte
     neutre chaude (fond clair) et crème (fond sombre). */
  --motif: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%20fill='none'%20stroke='%23786f56'%20stroke-width='1.3'%3E%3Cpath%20d='M30%206L54%2030L30%2054L6%2030Z'/%3E%3Cpath%20d='M30%2019L41%2030L30%2041L19%2030Z'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='2.3'%20fill='%23786f56'%20stroke='none'/%3E%3Cpath%20d='M0%2030L6%2030M54%2030L60%2030M30%200L30%206M30%2054L30%2060'/%3E%3C/svg%3E");
  --motif-clair: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%20fill='none'%20stroke='%23dcecf3'%20stroke-width='1.3'%3E%3Cpath%20d='M30%206L54%2030L30%2054L6%2030Z'/%3E%3Cpath%20d='M30%2019L41%2030L30%2041L19%2030Z'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='2.3'%20fill='%23dcecf3'%20stroke='none'/%3E%3Cpath%20d='M0%2030L6%2030M54%2030L60%2030M30%200L30%206M30%2054L30%2060'/%3E%3C/svg%3E");

  /* Motif d'auvent festonné (signature) — une seule définition réutilisée.
     Un « feston » = une vaguelette qui pend vers le bas ; tuilé en repeat-x. */
  --festoon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'><path d='M0 0 H44 V11 A22 12 0 0 1 0 11 Z' fill='%23000'/></svg>");

  /* Largeur de contenu */
  --largeur: 1160px;
  --gouttiere: clamp(20px, 5vw, 48px);

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   3. Reset léger + base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sable);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--green-deep);
  color: var(--creme-carte);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

/* Grain « papier kraft » sur toute la page (overlay fixe, très discret) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}
/* le contenu passe au-dessus du grain */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   Fondations d'animation (GSAP) — états initiaux
   Cachés SEULEMENT si JS est actif (html.js) ET mouvement autorisé
   (:not(.reduce)). Sans JS ou en mouvement réduit : tout reste visible.

   Le titre cinétique (.kinetic) n'a PAS son état masqué ici : il est
   entièrement piloté par GSAP (immediateRender de .fromTo dans main.js), une
   seule source de vérité. Le dupliquer côté CSS créait deux mécanismes de
   masquage indépendants qui pouvaient se marcher dessus (le texte apparaît
   un instant puis se refait cacher quand GSAP démarre son tween). Sans GSAP,
   le titre reste simplement visible en permanence — dégradation sûre.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduce) [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
  }
}

/* Typographie cinétique : chaque mot dans un masque qui laisse « monter » son
   contenu. */
.kinetic .line {
  display: block;
}
.kinetic .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.kinetic .word > span {
  display: inline-block;
}

/* -------------------------------------------------------------------------
   4. Typographie
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--texte);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.3rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem);
}

h3 {
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
}

p {
  margin: 0 0 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--blue-brand);
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--texte-doux);
  max-width: 54ch;
}

/* -------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: clamp(64px, 8vw, 120px);
  position: relative;
}

.section--sable-2 {
  background: var(--sable-2);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head.center .lead {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   6. Motif d'auvent festonné (séparateur signature)
   ------------------------------------------------------------------------- */
.festoon {
  height: 22px;
  width: 100%;
  background-color: var(--green-brand);
  -webkit-mask: var(--festoon-mask) repeat-x top center / 44px 24px;
  mask: var(--festoon-mask) repeat-x top center / 44px 24px;
  position: relative;
  z-index: 3;
  pointer-events: none;
}
/* Variantes de couleur (doit matcher la section AU-DESSUS du feston) */
.festoon--sauge {
  background-color: var(--green-brand);
}
.festoon--sauge-2 {
  background-color: var(--green-mid);
}
.festoon--sable {
  background-color: var(--sable);
}
.festoon--sable-2 {
  background-color: var(--sable-2);
}
.festoon--olive {
  background-color: var(--green-deep);
}
.festoon--creme {
  background-color: var(--creme-carte);
}
/* Feston inversé : vaguelettes pointant vers le haut (bas de section) */
.festoon--up {
  transform: scaleY(-1);
}

/* -------------------------------------------------------------------------
   7. Boutons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95em 1.5em;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  transition: transform 0.18s ease, background-color 0.2s ease,
    box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--green-deep);
  color: var(--creme-carte);
  box-shadow: var(--ombre-douce);
}
.btn--primary:hover {
  background: var(--green-deep-2);
  box-shadow: var(--ombre-carte);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn--outline:hover {
  background: var(--green-deep);
  color: var(--creme-carte);
  transform: translateY(-2px);
}

.btn--blue {
  background: var(--blue-brand);
  color: #fff;
  box-shadow: var(--ombre-douce);
}
.btn--blue:hover {
  background: var(--blue-brand-2);
  transform: translateY(-2px);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
}

/* Boutons « stores » (Android / iOS) */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.2em;
  border-radius: var(--r-md);
  background: var(--green-deep);
  color: var(--creme-carte);
  box-shadow: var(--ombre-douce);
  transition: transform 0.18s ease, background-color 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease;
}
.store-btn:hover {
  background: var(--green-deep-2);
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}
.store-btn .store-ico {
  width: 26px;
  height: 26px;
  flex: none;
}
.store-btn .store-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.store-btn .store-top {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.store-btn .store-name {
  font-size: 1.02rem;
  font-weight: 700;
}
.store-btn--soon {
  background: transparent;
  color: var(--green-deep);
  border: 2px solid var(--ligne);
  box-shadow: none;
  opacity: 0.9;
}
.store-btn--soon:hover {
  background: var(--sable-2);
  transform: none;
  box-shadow: none;
}
.store-btn--light {
  background: var(--creme-carte);
  color: var(--green-deep);
}
.store-btn--light:hover {
  background: #fff;
}

/* -------------------------------------------------------------------------
   8. Cartes & badges
   ------------------------------------------------------------------------- */
.card {
  background: var(--creme-carte);
  border-radius: var(--r-lg);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-douce);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-carte);
}

/* Badge « vendeur vérifié » : pastille ronde + coche */
/* Badge de vérification = confiance → bleu de marque (jamais vert ici). */
.badge-verifie {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-deep);
}
.badge-verifie .pastille {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  display: grid;
  place-items: center;
}
.badge-verifie .pastille svg {
  width: 12px;
  height: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  background: var(--sable-2);
  color: var(--texte-doux);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Prix (olive foncé gras + « XAF » plus petit) */
.prix {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--green-deep);
  font-size: 1.35rem;
  line-height: 1;
  white-space: nowrap;
}
.prix .devise {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--texte-doux);
  margin-left: 0.25em;
  letter-spacing: 0.03em;
}

/* Vignette produit neutre (placeholder stylé sable/sauge + icône) */
.vignette {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sable-2), var(--green-light));
  color: rgba(38, 36, 28, 0.45);
  position: relative;
  overflow: hidden;
}
.vignette svg {
  width: 44%;
  max-width: 96px;
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   9. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header::after {
  /* feston sous le header, visible seulement une fois « dense » */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background-color: var(--creme-carte);
  -webkit-mask: var(--festoon-mask) repeat-x top center / 34px 18px;
  mask: var(--festoon-mask) repeat-x top center / 34px 18px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-header.scrolled {
  background: var(--creme-carte);
  box-shadow: 0 4px 18px -10px rgba(38, 36, 28, 0.28);
}
.site-header.scrolled::after {
  opacity: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.nav-links a {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--texte);
  position: relative;
  padding-block: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--green-brand);
  transition: width 0.22s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Bascule de langue FR / EN — liens réels vers / et /en/ (deux pages
   statiques indexables séparément), pas un simple toggle JS. */
.lang-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--sable-2);
  border: 1px solid var(--ligne);
}
.lang-toggle a {
  border: none;
  background: transparent;
  color: var(--texte-doux);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.35em 0.75em;
  border-radius: var(--r-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-toggle a[aria-current="true"] {
  background: var(--green-deep);
  color: var(--creme-carte);
}

/* Bouton menu mobile */
.nav-burger {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  color: var(--green-deep);
}
.nav-burger svg {
  width: 26px;
  height: 26px;
}

/* -------------------------------------------------------------------------
   10. Hero — split asymétrique, titre cinétique, mockup qui déborde
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: -74px; /* passe sous le header sticky transparent */
  padding-top: clamp(118px, 15vh, 172px);
  padding-bottom: clamp(84px, 11vw, 150px);
  background: linear-gradient(
    168deg,
    #c6e08a 0%,
    var(--green-brand) 32%,
    var(--green-mid) 76%,
    #5fa5c9 100%
  );
  overflow: clip;
}
/* Couches de fond (motif africain en filigrane + glow), cibles de parallaxe */
.hero-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  pointer-events: none;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--motif);
  background-size: 62px 62px;
  opacity: 0.1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      55% 55% at 82% 10%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    radial-gradient(48% 52% at 6% 94%, rgba(18, 56, 75, 0.22), transparent 60%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

.hero .eyebrow {
  color: var(--green-deep);
}
.hero h1 {
  color: var(--green-deep-2);
  font-weight: 600;
  font-size: clamp(2.7rem, 1.1rem + 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0.5rem 0 0.55em;
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--green-deep);
  font-style: italic;
}
.hero-sub {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.28rem);
  color: var(--texte);
  max-width: 42ch;
  margin: 0 0 1.7rem;
  font-weight: 500;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
/* Preuves : rangée de pastilles chaudes translucides */
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 1.7rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(38, 36, 28, 0.14);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--green-deep-2);
  backdrop-filter: blur(3px);
}
.hero-proof svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--green-deep);
}

/* Scène du mockup : panneau incliné + téléphone qui dépasse de la carte */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 50vw, 560px);
}
.stage-panel {
  position: absolute;
  inset: 13% 5%;
  border-radius: 30px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.3),
    rgba(38, 36, 28, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--ombre-carte);
  transform: rotate(3deg);
}
.stage-panel::before {
  /* petit auvent festonné au sommet du panneau (rappel signature) */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 14px;
  background-color: var(--blue-brand);
  -webkit-mask: var(--festoon-mask) repeat-x top center / 30px 16px;
  mask: var(--festoon-mask) repeat-x top center / 30px 16px;
  opacity: 0.9;
}
.phone-wrap {
  position: relative;
  z-index: 2;
  width: min(300px, 72%);
  transform: rotate(-3deg);
  filter: drop-shadow(0 42px 60px rgba(18, 56, 75, 0.42));
}
.phone-ui {
  width: 100%;
  height: auto;
}

/* Pastilles flottantes (débordent du téléphone) */
.hero-float {
  position: absolute;
  z-index: 3;
  background: var(--creme-carte);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-flottante);
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--texte);
}
.hero-float small {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--texte-doux);
}
.hero-float .ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(95, 168, 80, 0.16);
  color: var(--succes);
}
.hero-float .ico svg {
  width: 18px;
  height: 18px;
}
.hero-float--tl {
  top: 8%;
  left: -6%;
}
.hero-float--br {
  bottom: 10%;
  right: -8%;
}
.hero-float--br .ico {
  background: rgba(95, 165, 201, 0.18);
  color: var(--blue-brand);
}

/* -------------------------------------------------------------------------
   11. Paiement protégé — section immersive sombre + flux horizontal
   ------------------------------------------------------------------------- */
.escrow {
  position: relative;
  isolation: isolate;
  background: var(--blue-immersif);
  color: var(--creme-carte);
  padding-block: clamp(88px, 11vw, 148px);
  overflow: clip;
}
.escrow-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.escrow-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--motif-clair);
  background-size: 64px 64px;
  opacity: 0.06;
}
.escrow-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Lueurs 100% bleu (confiance) : jamais de vert dans cette section. */
  background: radial-gradient(
      50% 55% at 86% 6%,
      rgba(95, 165, 201, 0.22),
      transparent 60%
    ),
    radial-gradient(45% 55% at 4% 96%, rgba(95, 165, 201, 0.14), transparent 60%);
}
.escrow .eyebrow {
  color: var(--blue-tint);
}
.escrow .eyebrow::before {
  background: var(--blue-brand);
}
.escrow h2 {
  color: #fff;
}
.escrow .lead {
  color: rgba(255, 255, 255, 0.82);
}
/* Texte + illustration côte à côte (split asymétrique, comme .hero-inner). */
.escrow-top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}
.escrow-head {
  max-width: 60ch;
}
/* Logo blanc monochrome : repère de marque sur fond vert/bleu foncé. Hauteur
   limitée (asset matricé, natif 108×116) + marge ≥ hauteur du "S" tout autour. */
.logo-mark--white {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: 1.4rem;
}
.cta-final .logo-mark--white {
  margin-inline: auto;
}

/* Illustration Lottie « confiance » : chargée en différé par main.js
   (IntersectionObserver), rendue en SVG. Recolorée en duotone bleu par
   filtre CSS — jamais les couleurs multicolores d'origine de l'asset, pour
   rester dans la logique « bleu = confiance » de cette section. */
.escrow-visual {
  display: flex;
  justify-content: center;
}
.escrow-lottie {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* Halo toujours présent, même si le script Lottie ne charge jamais
     (asset volontairement lourd, chargé en différé) : l'emplacement reste
     un accent voulu plutôt qu'un vide. */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(95, 165, 201, 0.22),
    transparent 72%
  );
  /* grayscale d'abord (retire la palette d'origine) puis sepia + hue-rotate
     pour reteinter en bleu de marque, saturate pour compenser le délavage
     typique de cette recette. */
  filter: grayscale(1) brightness(0.96) sepia(1) hue-rotate(175deg)
    saturate(2.6);
}
.escrow-lottie svg,
.escrow-lottie canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Opérateurs Mobile Money */
.momo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}
.momo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--creme-carte);
}
.momo .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}
.momo--mtn .dot {
  background: #ffcc00;
  color: #1a1a1a;
}
.momo--orange .dot {
  background: #f07b21; /* marque Orange (conservée telle quelle) */
}

/* Flux horizontal en 4 étapes, avec ligne de progression tracée au scroll */
.flow {
  position: relative;
  margin-top: clamp(44px, 6vw, 76px);
}
.flow-track,
.flow-progress {
  position: absolute;
  top: 38px;
  height: 3px;
  border-radius: 3px;
}
.flow-track {
  left: 4%;
  right: 4%;
  background: rgba(255, 255, 255, 0.16);
}
.flow-progress {
  left: 4%;
  width: 92%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue-brand), var(--blue-deep));
  box-shadow: 0 0 18px rgba(95, 165, 201, 0.5);
}
/* Sans JS / mouvement réduit : la ligne est pleine ; avec JS : elle se trace */
html.js:not(.reduce) .flow-progress {
  width: 0;
}
.flow-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
.flow-step {
  text-align: center;
}
.flow-node {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.45s ease, color 0.45s ease,
    border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
}
.flow-node svg {
  width: 32px;
  height: 32px;
}
/* état d'attente (uniquement quand JS anime) */
html.js:not(.reduce) .flow-step:not(.on) .flow-node {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.14);
}
/* état allumé (séquentiel au scroll) */
.flow-step.on .flow-node {
  background: var(--blue-brand);
  border-color: var(--blue-tint);
  color: var(--blue-immersif);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4),
    0 0 0 6px rgba(95, 165, 201, 0.2);
}
.flow-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  display: grid;
  place-items: center;
  box-shadow: var(--ombre-douce);
}
.flow-step h3 {
  color: #fff;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.flow-step p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  margin: 0;
}

/* Chiffres-clés (compteurs animés) */
.escrow-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stat {
  text-align: center;
}
.stat .num {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1;
  color: var(--blue-brand);
  font-variant-numeric: tabular-nums;
}
.stat .num .suf {
  color: var(--blue-tint);
}
.stat .lbl {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

/* Encart QR + rassurance */
.escrow-note {
  margin-top: clamp(40px, 5vw, 60px);
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.3rem 1.6rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.escrow-note .qr {
  width: 64px;
  height: 64px;
  flex: none;
}
.escrow-note p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.86);
}
.escrow-note strong {
  color: #fff;
}

/* Feston positionné en surimpression du haut d'une section sombre/colorée */
.festoon--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
}
.festoon--olive-2 {
  background-color: var(--green-deep-2);
}

/* -------------------------------------------------------------------------
   11d. Pourquoi Sentaa — argumentaire (mise en page : voir .why-rows plus bas)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   11e. CTA final (bandeau olive)
   ------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  /* CTA de téléchargement = identité générale → vert, monochrome, se termine
     sur --green-deep (= couleur du feston du footer) pour un raccord invisible. */
  background: linear-gradient(158deg, var(--green-mid) 0%, var(--green-deep) 62%);
  color: var(--creme-carte);
  text-align: center;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 120px);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  /* une seule lueur vert clair diffuse */
  background: radial-gradient(
    120% 90% at 78% 0%,
    rgba(198, 224, 138, 0.22),
    transparent 60%
  );
  pointer-events: none;
}
.cta-final .container {
  position: relative;
  z-index: 1;
}
.cta-final h2 {
  color: #fff;
}
.cta-final .lead {
  color: rgba(255, 255, 255, 0.86);
  margin-inline: auto;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}
.store-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.store-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   11f. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--sable-2);
  color: var(--texte-doux);
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: 1.8rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--ligne);
}
.footer-brand .brand {
  margin-bottom: 0.9rem;
}
.footer-brand .brand-logo {
  height: 40px;
}
.footer-brand p {
  max-width: 34ch;
  font-size: 0.92rem;
  color: var(--texte-doux);
}
.footer-col h4 {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.9rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-col a {
  color: var(--texte);
  font-size: 0.94rem;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--green-deep);
}
.footer-store {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}
/* Chip « iOS bientôt » lisible sur le crème du footer */
.site-footer .chip {
  background: var(--creme-carte);
  border: 1px solid var(--ligne);
  color: var(--texte-doux);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.footer-bottom .made {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* -------------------------------------------------------------------------
   11g. Marketplace — bento (tuiles de tailles inégales)
   ------------------------------------------------------------------------- */
.festoon--immersif {
  background-color: var(--blue-immersif);
}
.market-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.market-head .lead {
  margin-top: 0.6rem;
}
.market-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  color: var(--green-deep);
  white-space: nowrap;
}
.market-link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.market-link:hover svg {
  transform: translateX(3px);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 188px;
  gap: clamp(12px, 1.5vw, 18px);
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-carte);
}
.tile--feature {
  grid-column: span 2;
  grid-row: span 2;
}
.tile--wide {
  grid-column: span 2;
}
.tile-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: rgba(18, 56, 75, 0.42);
}
.tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-media svg {
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: 66%;
  height: auto;
}
.tile--feature .tile-media svg {
  width: 52%;
  right: 5%;
  bottom: 8%;
}
/* Fallback sous les vraies photos (le temps du chargement) — famille verte
   uniquement, la marketplace n'est pas un contexte de confiance. */
.tile--elec .tile-media {
  background: linear-gradient(150deg, #cfe39a, #8fb733);
}
.tile--immo .tile-media {
  background: linear-gradient(150deg, #dde8b0, #5c7a1f);
}
.tile--mode .tile-media {
  background: linear-gradient(150deg, #e8f0c9, #a6cc41);
}
.tile--elme .tile-media {
  background: linear-gradient(150deg, #d3ead6, #8fb733);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18, 42, 54, 0) 38%,
    rgba(18, 42, 54, 0.62)
  );
}
.tile-cat {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--green-deep);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3em 0.7em;
  border-radius: var(--r-pill);
}
/* Badge « vendeur vérifié » = confiance → bleu de marque. */
.tile-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-deep);
  display: grid;
  place-items: center;
  box-shadow: var(--ombre-douce);
}
.tile-badge svg {
  width: 13px;
  height: 13px;
  color: #fff;
}
.tile-info {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1rem 1.1rem;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}
.tile-info h3 {
  color: #fff;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.tile-info .city2 {
  font-size: 0.8rem;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.tile-info .city2 svg {
  width: 13px;
  height: 13px;
}
.tile-info .prix {
  color: #fff;
}
.tile-info .prix .devise {
  color: rgba(255, 255, 255, 0.82);
}
.tile--feature .tile-info h3 {
  font-size: 1.3rem;
}

/* -------------------------------------------------------------------------
   11h. Emploi — split éditorial + liste (feed)
   ------------------------------------------------------------------------- */
.jobs-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.jobs-lead-col {
  position: sticky;
  top: 96px;
}
.jobs-pitch {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  color: var(--green-deep);
  line-height: 1.14;
  margin: 1rem 0 1.3rem;
  text-wrap: balance;
}
.job-list {
  display: flex;
  flex-direction: column;
}
/* Pastille avatar (initiales entreprise) : variété décorative, famille verte
   uniquement — un recruteur n'est pas un contexte de confiance/paiement. */
.job-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-titre);
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
}
.job-logo--1 {
  background: var(--green-deep);
}
.job-logo--2 {
  background: var(--green-mid);
}
.job-logo--3 {
  background: var(--green-deep-2);
}
.job-co {
  color: var(--texte-doux);
  font-size: 0.88rem;
}
.job-salary {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--green-deep);
  font-size: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.job-salary .devise {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--texte-doux);
}
.job-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem 1.2rem;
  align-items: center;
  padding: 1.3rem 0;
  border-top: 1px solid var(--ligne);
}
.job-row:last-child {
  border-bottom: 1px solid var(--ligne);
}
.job-row .job-mid h3 {
  margin: 0 0 0.15rem;
  font-size: 1.12rem;
}
.job-row .job-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}
.job-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.job-row .job-chips {
  grid-column: 2 / 3;
  margin-top: 0.55rem;
}
.job-row .apply {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green-deep);
}
.job-row .apply svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.job-row .apply:hover svg {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   11i. Pourquoi Sentaa — rangées éditoriales en zigzag
   ------------------------------------------------------------------------- */
.why-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
}
.why-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--r-xl);
  background: var(--creme-carte);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-douce);
}
.why-row:nth-child(even) {
  grid-template-columns: 1fr 132px;
}
.why-row:nth-child(even) .why-figure {
  order: 2;
}
/* Teinte par rangée justifiée par le sujet, jamais décorative : bleu
   uniquement sur les rangées qui parlent de confiance/vérification
   (vendeurs vérifiés, coursiers), vert sur le reste (identité générale). */
.why-figure {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 26px;
  /* Rangée 1 : vendeurs vérifiés & réputation → confiance */
  background: rgba(95, 165, 201, 0.22);
  color: var(--blue-deep);
}
.why-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* teinte duotone : unifie les photos avec l'accent de chaque rangée */
.why-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.why-row:nth-child(2) .why-figure {
  /* Mobile Money local → identité générale, pas un sujet de confiance */
  background: rgba(166, 204, 65, 0.22);
  color: var(--green-deep);
}
.why-row:nth-child(3) .why-figure {
  /* Coursiers de confiance → confiance */
  background: rgba(95, 165, 201, 0.16);
  color: var(--blue-deep);
}
.why-row:nth-child(4) .why-figure {
  /* Bilingue FR/EN → identité générale */
  background: rgba(166, 204, 65, 0.16);
  color: var(--green-deep);
}
.why-row h3 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  margin: 0 0 0.4rem;
}
.why-row p {
  color: var(--texte-doux);
  margin: 0;
  max-width: 60ch;
}

/* Responsive des layouts refondus */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 168px;
  }
  .jobs-layout {
    grid-template-columns: 1fr;
  }
  .jobs-lead-col {
    position: static;
  }
}
@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 182px;
  }
  .tile--feature,
  .tile--wide {
    grid-column: span 1;
  }
  .tile--feature {
    grid-row: span 1;
  }
  .why-row,
  .why-row:nth-child(even) {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .why-row .why-figure {
    order: 0;
    width: 96px;
    height: 96px;
  }
  .why-figure svg {
    width: 46px;
    height: 46px;
  }
  .job-row {
    grid-template-columns: auto 1fr;
  }
  .job-row .job-end {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin-top: 0.4rem;
  }
  .job-row .job-chips {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   11bis. FAQ — <details>/<summary> natifs (accessibles, sans JS)
   ------------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 860px;
}
.faq-item {
  background: var(--creme-carte);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  color: var(--texte);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::marker {
  content: "";
}
.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--green-deep);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-item .faq-answer {
  margin: 0;
  padding: 0 3.4rem 1.2rem 1.4rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   12. Animations d'entrée (reveal au scroll)
   ------------------------------------------------------------------------- */
.reveal {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* Caché seulement si JS actif ET mouvement autorisé (sinon visible) */
html.js:not(.reduce) .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}
.reveal[data-delay="4"] {
  transition-delay: 0.32s;
}

/* -------------------------------------------------------------------------
   13. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .eyebrow,
  .hero-cta,
  .hero-proof {
    justify-content: center;
  }
  .hero-sub {
    margin-inline: auto;
  }
  .hero-stage {
    order: -1;
    min-height: clamp(360px, 74vw, 470px);
  }
  .escrow-top {
    grid-template-columns: 1fr;
  }
  .escrow-head {
    margin-inline: auto;
  }
  .escrow-lottie {
    max-width: 280px;
    margin-inline: auto;
  }
  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 16px;
  }
  .flow-track,
  .flow-progress {
    display: none;
  }
  .escrow-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1rem;
  }
}

@media (max-width: 720px) {
  /* La bascule FR/EN reste visible ; seuls les liens + le CTA passent au burger */
  .nav-links,
  .nav .btn--primary {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
  }
  .nav-burger {
    display: inline-flex;
  }
  /* Menu mobile déplié */
  .site-header.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme-carte);
    padding: 0.6rem var(--gouttiere) 1.1rem;
    box-shadow: var(--ombre-carte);
    margin-left: 0;
  }
  .site-header.menu-open .nav-links a {
    width: 100%;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--ligne);
  }
  .site-header.menu-open .nav-links a::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-float {
    display: none;
  }
  .flow-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .escrow-note {
    flex-direction: column;
    text-align: center;
  }
}

/* Grilles des sections ajoutées */
@media (max-width: 980px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jobs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .jobs-grid {
    grid-template-columns: 1fr;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 460px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   14. Préférence de mouvement réduit (accessibilité — impératif)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .kinetic .word > span {
    transform: none !important;
  }
  .flow-progress {
    width: 92% !important;
  }
  /* Mouvement réduit : main.js ne charge pas le Lottie (4,7 Mo pour une
     animation en boucle) — on retire aussi son emplacement, sinon un carré
     vide reste dans la mise en page. */
  .escrow-visual {
    display: none;
  }
  .escrow-top {
    grid-template-columns: 1fr;
  }
}