/* Yokteka — page d'accueil et pages légales. Téléphone d'abord, aucune image lourde. */
@font-face { font-family: 'Jakarta'; src: url('/fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Cahier'; src: url('/fonts/caveat.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --vert: #0A5C47; --vert-fonce: #073F31; --vert-nuit: #062E24; --vert-clair: #E6F0EB; --orange: #F26522; --orange-clair: #FDEDE3;
  --encre: #0B1F1A; --encre-2: #2C3D37; --gris: #56655F; --creme: #F6F4EF; --creme-2: #EFECE4; --blanc: #FFFFFF;
  --papier: #F3EAD3; --stylo: #23356E;
  --trait: #E3DFD5; --r: 16px; --ombre: 0 1px 2px rgba(11, 31, 26, 0.05), 0 14px 34px -18px rgba(11, 31, 26, 0.28);
  --ombre-haute: 0 2px 4px rgba(11, 31, 26, 0.06), 0 40px 70px -30px rgba(7, 46, 36, 0.55);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); background: var(--creme); font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; }
::selection { color: var(--blanc); background: var(--vert); }
img, svg { display: block; max-width: 100%; }
a { color: var(--vert); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.saut { position: absolute; left: -999px; top: 8px; z-index: 20; padding: 10px 14px; border-radius: 10px; background: var(--blanc); }
.saut:focus { left: 12px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: rgba(246, 244, 239, 0.94); border-bottom: 1px solid var(--trait); }
.entete-dedans { display: flex; max-width: 1200px; min-height: 64px; margin: 0 auto; padding: 10px 20px; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--encre); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.menu-bouton { display: none; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--encre); font: inherit; font-weight: 700; }
.menu { display: flex; align-items: center; gap: 24px; }
.menu a:not(.bouton) { color: var(--encre-2); font-weight: 650; text-decoration: none; transition: color 150ms ease; }
.menu a:not(.bouton):hover { color: var(--vert); }

/* Boutons */
.bouton {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px;
  border: 0; border-radius: 12px; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer;
  transition: transform 140ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.bouton:active { transform: scale(0.98); }
.bouton-orange { color: var(--encre); background: var(--orange); box-shadow: 0 2px 0 rgba(11, 31, 26, 0.12), 0 12px 26px -12px rgba(242, 101, 34, 0.9); }
.bouton-orange:hover { background: #F47235; box-shadow: 0 2px 0 rgba(11, 31, 26, 0.12), 0 16px 30px -12px rgba(242, 101, 34, 0.95); }
.bouton-clair { color: var(--vert-fonce); background: var(--blanc); border: 1.5px solid var(--trait); }
.bouton-clair:hover { border-color: #CFC9BB; }
.bouton-grand { min-height: 56px; padding: 14px 26px; font-size: 1.04rem; }
.bouton[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Héros ---------- */
.heros { display: grid; max-width: 1200px; margin: 0 auto; padding: 40px 20px 56px; gap: 40px; align-items: center; }
.heros h1 { font-size: clamp(2.2rem, 9.4vw, 5.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; }
.h1-vert { color: var(--vert); }
.h1-l { display: block; white-space: nowrap; }
@media (min-width: 760px) { .h1-l { display: block; white-space: nowrap; } .heros h1 { font-size: clamp(3.4rem, 5.6vw, 5.2rem); } }
.chapeau { max-width: 34rem; margin-top: 22px; color: var(--encre-2); font-size: 1.12rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.actions-centre { justify-content: center; }
.demo-etat { min-height: 1.6em; margin-top: 10px; color: var(--gris); font-size: 0.92rem; }
.garanties { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--encre-2); font-size: 0.92rem; font-weight: 650; }
.garanties li { display: flex; align-items: center; gap: 7px; }
.garanties svg, .paye svg, .recu-envoi svg, .v-ecart svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--vert); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* La scène : le cahier derrière, le téléphone devant, le reçu qui sort */
.scene { position: relative; width: 100%; max-width: 520px; height: 600px; margin: 0 auto; }
.feuille {
  position: absolute; left: 0; top: 34px; width: 62%; padding: 34px 22px 26px 48px; border-radius: 6px;
  background: linear-gradient(90deg, transparent 34px, rgba(200, 50, 50, 0.38) 34px 36px, transparent 36px), repeating-linear-gradient(var(--papier) 0 38px, rgba(35, 53, 110, 0.18) 38px 40px), var(--papier);
  box-shadow: 0 30px 50px -30px rgba(11, 31, 26, 0.5); transform: rotate(-7deg); color: var(--stylo);
  font-family: 'Cahier', 'Segoe Print', cursive; font-size: 1.45rem; line-height: 40px;
}
.feuille p { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.feuille .rature { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(35, 53, 110, 0.7); opacity: 0.7; }
.tel {
  position: absolute; right: 6%; top: 0; width: 300px; padding: 11px; border-radius: 46px; background: #0B1612;
  box-shadow: var(--ombre-haute), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08); transform: rotate(2.5deg);
}
.tel-ecran { display: flex; flex-direction: column; gap: 11px; padding: 18px 14px 16px; border-radius: 36px; background: var(--creme); overflow: hidden; }
.tel-barre { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 1.1rem; }
.tel-reseau { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.tel-reseau i { display: block; width: 4px; border-radius: 1px; background: var(--vert); }
.tel-reseau i:nth-child(1) { height: 5px; } .tel-reseau i:nth-child(2) { height: 8px; } .tel-reseau i:nth-child(3) { height: 11px; } .tel-reseau i:nth-child(4) { height: 14px; }
.tel-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile { position: relative; display: flex; min-height: 76px; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 10px 11px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--blanc); font-size: 0.8rem; }
.tuile > b, .tuile > span:not(.tuile-fond):not(.doigt) { position: relative; }
.tuile > span:not(.tuile-fond):not(.doigt) { color: var(--vert-fonce); font-weight: 800; }
.tuile-fond { position: absolute; inset: -1.5px; border: 1.5px solid var(--vert); border-radius: 14px; background: var(--vert-clair); opacity: 0; }
.pastille { position: absolute; top: 7px; right: 7px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 999px; color: var(--blanc); background: var(--vert); font-size: 0.7rem; font-style: normal; font-weight: 800; opacity: 0; }
.doigt { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid var(--orange); border-radius: 50%; background: rgba(242, 101, 34, 0.16); opacity: 0; pointer-events: none; }
.tel-panier { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); font-size: 0.82rem; font-weight: 600; }
.ligne { display: flex; justify-content: space-between; height: 21px; opacity: 0; font-variant-numeric: tabular-nums; }
.moyens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.moyens span { position: relative; padding: 5px 9px; border: 1px solid var(--trait); border-radius: 9px; font-size: 0.7rem; font-weight: 700; }
.moyens em { position: absolute; inset: -1px; border: 1px solid var(--vert); border-radius: 9px; background: var(--vert-clair); opacity: 0; z-index: 0; }
.moyens span { isolation: isolate; } .moyens em { z-index: -1; }
.encaisser { position: relative; display: grid; height: 46px; place-items: center; overflow: hidden; border-radius: 13px; background: var(--orange); font-weight: 800; }
.encaisser > .lib-vide, .encaisser > .montant { grid-area: 1 / 1; }
.montant { opacity: 0; }
.paye { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--blanc); background: var(--vert); opacity: 0; }
.paye svg { stroke: var(--blanc); }
.recu {
  position: absolute; right: 0; bottom: 0; width: 232px; padding: 16px 16px 26px; background: var(--blanc); color: var(--encre);
  font-size: 0.8rem; font-weight: 600; box-shadow: 0 30px 50px -24px rgba(11, 31, 26, 0.55); opacity: 0; transform: translate(-40px, -30px) rotate(-4deg) scale(0.92);
}
/* Bord dentelé : deux dégradés sur un pseudo-élément (bien moins coûteux qu'un masque). */
.recu::after, .ticket::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 9px; background: linear-gradient(-45deg, var(--creme) 6px, transparent 0) 0 100% / 14px 9px repeat-x, linear-gradient(45deg, var(--creme) 6px, transparent 0) 0 100% / 14px 9px repeat-x; }
.ticket::after { height: 13px; background-size: 22px 13px, 22px 13px; background-image: linear-gradient(-45deg, var(--creme) 9px, transparent 0), linear-gradient(45deg, var(--creme) 9px, transparent 0); }
.recu p { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.recu-tete { flex-direction: column; gap: 0 !important; margin-bottom: 6px; padding-bottom: 8px !important; border-bottom: 1.5px dashed var(--trait); }
.recu-tete b { font-size: 0.95rem; } .recu-tete span { color: var(--gris); font-size: 0.72rem; }
.recu-total { margin-top: 4px; padding-top: 8px !important; border-top: 1.5px dashed var(--trait); font-weight: 800; }
.recu-envoi { justify-content: flex-start !important; align-items: center; margin-top: 6px; color: var(--vert); font-weight: 800; }

/* La vente, en boucle de 10 s */
.scene { --c: 10s; }
.t-riz .doigt { animation: tap1 var(--c) var(--sortie) infinite; }
.t-riz .tuile-fond { animation: on-riz var(--c) linear infinite; }
.p1 { animation: on-p1 var(--c) linear infinite; }
.p2 { animation: on-p2 var(--c) linear infinite; }
.l1 { animation: on-l1 var(--c) linear infinite; }
.t-sucre .doigt { animation: tap2 var(--c) var(--sortie) infinite; }
.t-sucre .tuile-fond, .p3 { animation: on-sucre var(--c) linear infinite; }
.l2 { animation: on-l2 var(--c) linear infinite; }
.m-wave em { animation: on-wave var(--c) linear infinite; }
.encaisser { animation: appui var(--c) var(--sortie) infinite; }
.paye { animation: on-paye var(--c) linear infinite; }
.montant { animation: on-l2 var(--c) linear infinite; }
.lib-vide { animation: off-l2 var(--c) linear infinite; }
@keyframes off-l2 { 0%, 30% { opacity: 1; } 32%, 92% { opacity: 0; } 95%, 100% { opacity: 1; } }
.recu { animation: sortie-recu var(--c) var(--sortie) infinite; }
@keyframes tap1 { 0%, 10% { opacity: 0; transform: scale(0.4); } 11% { opacity: 1; transform: scale(0.8); } 14% { opacity: 0; transform: scale(1.5); } 18% { opacity: 0; transform: scale(0.4); } 19% { opacity: 1; transform: scale(0.8); } 22%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap2 { 0%, 28% { opacity: 0; transform: scale(0.4); } 29% { opacity: 1; transform: scale(0.8); } 32%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes on-riz { 0%, 11% { opacity: 0; } 12%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes on-p1 { 0%, 11% { opacity: 0; } 12%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes on-p2 { 0%, 19% { opacity: 0; } 20%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes on-l1 { 0%, 12% { opacity: 0; } 14%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes on-sucre { 0%, 29% { opacity: 0; } 30%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes on-l2 { 0%, 30% { opacity: 0; } 32%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes on-wave { 0%, 41% { opacity: 0; } 43%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes appui { 0%, 52% { transform: scale(1); } 53.5% { transform: scale(0.95); } 56%, 100% { transform: scale(1); } }
@keyframes on-paye { 0%, 54% { opacity: 0; } 56%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes sortie-recu { 0%, 58% { opacity: 0; transform: translate(-40px, -30px) rotate(-4deg) scale(0.92); } 66%, 90% { opacity: 1; transform: translate(0, 0) rotate(3deg) scale(1); } 96%, 100% { opacity: 0; transform: translate(14px, 24px) rotate(5deg) scale(0.97); } }
/* La boucle ne démarre qu'après le chargement, et s'arrête hors de l'écran. */
.scene:not(.joue) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; }
  .t-riz .tuile-fond, .p2, .t-sucre .tuile-fond, .p3, .m-wave em, .paye, .ligne, .montant { opacity: 1; }
  .lib-vide { opacity: 0; }
  .recu { opacity: 1; transform: rotate(3deg); }
}

/* ---------- Avant / après ---------- */
.avant-apres { background: var(--vert-nuit); color: var(--blanc); }
.aa-dedans { display: grid; max-width: 1200px; margin: 0 auto; padding: 72px 20px; gap: 36px; }
.avant-apres h2 { font-size: clamp(2.1rem, 6.5vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; }
.douleurs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: d; }
.douleurs li { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.douleurs li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.douleurs .dit .g { font-family: 'Jakarta', sans-serif; font-weight: 700; font-size: 0.8em; }
.douleurs .dit { color: #FFB88F; font-family: 'Cahier', 'Segoe Print', cursive; font-size: 1.7rem; line-height: 1.2; }
.douleurs p:not(.dit) { max-width: 36rem; color: #CFE3DA; font-size: 1.05rem; }

/* ---------- Une journée ---------- */
.journee { max-width: 1200px; margin: 0 auto; padding: 80px 20px 64px; }
.journee h2, .questions h2, .afrique h2 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; }
.sous-titre { margin-top: 12px; color: var(--gris); font-size: 1.1rem; }
.moments { margin: 44px 0 0; padding: 0; list-style: none; }
.moment { display: grid; gap: 14px 40px; padding: 32px 0; border-top: 1px solid var(--trait); }
.heure { color: #B4440E; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.heure time { display: inline-flex; align-items: center; gap: 10px; }
.heure time::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--orange-clair); }
.moment h3 { font-size: clamp(1.45rem, 4vw, 1.9rem); font-weight: 800; }
.moment-texte p { max-width: 30rem; margin-top: 10px; color: var(--encre-2); font-size: 1.04rem; }
.vignette { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--trait); border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre); font-size: 0.92rem; }
.v-ligne { position: relative; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; min-height: 30px; font-variant-numeric: tabular-nums; }
.v-ligne > span:last-of-type { font-weight: 800; text-align: right; min-width: 52px; }
.v-jauge { height: 7px; border-radius: 4px; background: var(--creme-2); overflow: hidden; }
.v-jauge i { display: block; height: 100%; width: calc(var(--n) * 100%); border-radius: 4px; background: var(--vert); }
.v-alerte { padding: 26px 10px 8px; margin: 0 -10px; border-radius: 12px; background: var(--orange-clair); }
.v-alerte .v-jauge i { background: var(--orange); }
.v-alerte em { position: absolute; left: 10px; top: 5px; color: #8A3310; font-size: 0.75rem; font-style: normal; font-weight: 800; }
.v-bandeau { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; color: #8A3310; background: var(--orange-clair); font-weight: 750; }
.v-bandeau svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v-etats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; font-weight: 800; }
.v-attente, .v-ok { padding: 5px 11px; border-radius: 999px; }
.v-attente { color: #8A3310; background: var(--orange-clair); }
.v-ok { color: var(--vert); background: var(--vert-clair); }
.v-fleche { color: var(--gris); }
.v-client { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.v-client small { display: block; color: var(--gris); font-size: 0.78rem; }
.v-client strong { font-variant-numeric: tabular-nums; }
.v-initiale { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--vert); background: var(--vert-clair); font-weight: 800; }
.v-bouton { display: grid; min-height: 44px; place-items: center; margin-top: 4px; border-radius: 12px; color: var(--blanc); background: var(--vert); font-weight: 750; text-align: center; }
.v-ecart { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 4px; border-radius: 12px; color: var(--vert); background: var(--vert-clair); font-weight: 800; }
.vignette .v-ligne:not(.v-alerte) + .v-ligne:not(.v-alerte) { border-top: 1px solid var(--creme-2); padding-top: 8px; }

.aussi { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.aussi li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 24px 0; border-bottom: 1px solid var(--trait); }
.aussi svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--vert); background: var(--vert-clair); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aussi h3 { font-size: 1.12rem; }
.aussi p { color: var(--encre-2); }
.etiquette { margin-left: 6px; padding: 2px 8px; border-radius: 999px; color: var(--gris); background: var(--creme-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; vertical-align: middle; }

/* ---------- Démarrer ---------- */
.demarrer { max-width: 1200px; margin: 0 auto; padding: 16px 20px 88px; }
.demarrer h2, .confiance h2 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; }
.etapes { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.etapes li { position: relative; padding: 26px 24px 26px 92px; border-radius: 22px; background: var(--creme-2); }
.etape-num { position: absolute; left: 22px; top: 22px; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: var(--blanc); background: var(--vert); font-size: 1.35rem; font-weight: 800; }
.etapes h3 { font-size: 1.3rem; }
.etapes p { margin-top: 8px; color: var(--encre-2); }
.demarrer .actions { margin-top: 28px; }

/* ---------- Confiance ---------- */
.confiance { display: grid; max-width: 1200px; margin: 0 auto; padding: 88px 20px 16px; gap: 36px; }
.cf-tete p { max-width: 32rem; margin-top: 16px; color: var(--encre-2); font-size: 1.08rem; }
.cf-wa { flex-wrap: wrap; margin-top: 24px; min-height: 52px; row-gap: 0; }
.cf-num, .sans-coupure { white-space: nowrap; }
.cf-num { color: var(--gris); font-weight: 650; }
.cf-wa svg, .wa-flottant svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promesses { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.promesses li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--trait); }
.promesses svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; color: var(--vert); background: var(--vert-clair); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promesses h3 { font-size: 1.15rem; }
.promesses p { color: var(--encre-2); }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-flottant {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 18px 0 15px; border-radius: 999px;
  color: var(--blanc); background: var(--vert); box-shadow: 0 4px 10px rgba(7, 46, 36, 0.25), 0 18px 34px -14px rgba(7, 46, 36, 0.6);
  font-weight: 750; text-decoration: none; transition: transform 160ms var(--sortie), background-color 160ms ease;
}
.wa-flottant:hover { background: var(--vert-fonce); transform: translateY(-2px); }
.wa-flottant:active { transform: scale(0.97); }

/* ---------- Installer ---------- */
.installer { display: grid; max-width: 1200px; margin: 0 auto; padding: 8px 20px 88px; gap: 32px; }
.installer h2 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; }
.in-tete p { max-width: 38rem; margin-top: 16px; color: var(--encre-2); font-size: 1.08rem; }
.appareils { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.appareils li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--trait); }
.appareils svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; color: var(--vert); background: var(--vert-clair); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appareils h3 { font-size: 1.15rem; }
.appareils p { color: var(--encre-2); }
.appareils b { color: var(--encre); font-weight: 750; }
.installer .actions { margin-top: 0; }

/* ---------- Afrique ---------- */
.afrique { color: var(--blanc); background: var(--vert); }
.af-dedans { display: grid; max-width: 1200px; margin: 0 auto; padding: 72px 20px; gap: 36px; align-items: start; }
.af-texte p { max-width: 32rem; margin-top: 16px; color: #DCEDE5; font-size: 1.08rem; }
.af-texte .petit { font-size: 0.95rem; color: #BFDCCF; }
.af-listes h3 { margin: 0 0 12px; color: #BFDCCF; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
.af-listes h3 + .pastilles + h3 { margin-top: 26px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastilles li { padding: 9px 15px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-weight: 650; }
.pastilles-moyens li { color: var(--encre); background: var(--blanc); border-color: transparent; }

/* ---------- Questions ---------- */
.questions { display: grid; max-width: 1200px; margin: 0 auto; padding: 80px 20px 72px; gap: 28px; }
.q-titre p { margin-top: 14px; color: var(--encre-2); }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.08rem; font-weight: 750; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--vert-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230A5C47' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform 200ms var(--sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--vert); }
.faq details p { max-width: 42rem; padding-bottom: 22px; color: var(--encre-2); }

/* ---------- Appel final : un reçu ---------- */
.appel { padding: 24px 20px 96px; }
.ticket {
  max-width: 680px; margin: 0 auto; padding: 48px 28px 64px; text-align: center; background: var(--blanc); box-shadow: var(--ombre-haute);
}
.ticket { position: relative; }
.ticket h2 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.035em; }
.ticket > p:first-of-type { margin-top: 12px; color: var(--encre-2); font-size: 1.08rem; }
.avis { max-width: 30rem; margin: 34px auto 0 !important; padding-top: 22px; border-top: 1.5px dashed var(--trait); color: var(--gris); font-size: 0.92rem; }

/* Pied de page */
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 28px max(20px, calc((100% - 1160px) / 2)); color: #DCEDE5; background: var(--vert-fonce); font-size: 0.92rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pied a { color: var(--blanc); }

/* Pages légales */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }
.legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; }
.legal h2 { margin: 32px 0 10px; font-size: 1.25rem; }
.legal p, .legal li { color: var(--encre-2); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; }
.legal .maj { margin-top: 8px; color: var(--gris); font-size: 0.9rem; }
.legal .retour { display: inline-block; margin-bottom: 18px; font-weight: 700; }
.a-completer { padding: 2px 6px; border-radius: 6px; background: var(--orange-clair); color: #7A3410; font-weight: 700; }

@media (min-width: 760px) {
  .heros { grid-template-columns: 1.05fr 0.95fr; padding-top: 64px; padding-bottom: 80px; }
  .scene { height: 640px; }
  .tel { width: 318px; }
  .aa-dedans { grid-template-columns: 0.8fr 1.2fr; gap: 64px; padding: 96px 20px; }
  .douleurs li { grid-template-columns: 1fr 1fr; gap: 28px; align-items: baseline; }
  .moment { grid-template-columns: 90px 1fr minmax(300px, 380px); align-items: center; padding: 40px 0; }
  .aussi { grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 0; }
  .aussi li { border-top: 1px solid var(--trait); }
  .af-dedans { grid-template-columns: 1fr 1fr; gap: 64px; padding: 96px 20px; }
  .questions { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  .ticket { padding: 60px 48px 76px; }
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .etapes li { padding: 96px 26px 30px; }
  .etape-num { left: 26px; top: 26px; }
  .confiance { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  .appareils { grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 0; }
  .appareils li { grid-template-columns: 1fr; border-top: 1px solid var(--trait); }
  .appareils svg { grid-row: auto; margin-bottom: 10px; }
}
@media (max-width: 759px) {
  .wa-flottant { min-height: 48px; padding: 0 14px 0 12px; }
  .wa-flottant span { font-size: 0.92rem; }
  .pied { padding-bottom: 88px; }
}

@media (max-width: 759px) {
  .menu-bouton { display: inline-flex; align-items: center; }
  .menu { position: absolute; top: 64px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 20px 18px; border-bottom: 1px solid var(--trait); background: var(--creme); }
  .menu.ouvert { display: flex; }
  .menu a:not(.bouton) { display: flex; min-height: 44px; align-items: center; }
  .actions .bouton { flex: 1 1 100%; }
  .scene { height: 720px; max-width: 390px; }
  .tel { top: 92px; right: 0; width: 250px; }
  .tuile { min-height: 66px; padding: 8px 9px; font-size: 0.74rem; }
  .feuille { top: 0; left: 2%; width: 82%; transform: rotate(-4deg); font-size: 1.2rem; line-height: 34px; padding: 28px 14px 20px 42px; background: linear-gradient(90deg, transparent 30px, rgba(200, 50, 50, 0.38) 30px 32px, transparent 32px), repeating-linear-gradient(var(--papier) 0 32px, rgba(35, 53, 110, 0.18) 32px 34px), var(--papier); }
  .recu { width: 206px; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton, .faq summary::after { transition: none; }
}

/* Guides (pages de contenu pour les moteurs de recherche) */
.pied-guides { flex-basis: 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; }
.guide .fil { margin-bottom: 18px; color: var(--gris); font-size: 0.9rem; }
.guide .fil a { font-weight: 700; }
.guide h1 { line-height: 1.12; letter-spacing: -0.02em; }
.guide h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.guide .chapeau { margin-top: 18px; font-size: 1.12rem; line-height: 1.6; color: var(--encre); }
.guide ol, .guide ul { padding-left: 22px; }
.guide li + li { margin-top: 6px; }
.guide .note { padding: 12px 14px; border-radius: 12px; background: var(--vert-clair); color: var(--vert-fonce); font-size: 0.95rem; }
.tableau-defile { margin: 18px 0; overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r); background: var(--blanc); }
.tableau-defile table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; }
.tableau-defile caption { padding: 12px 14px 0; text-align: left; color: var(--gris); font-size: 0.88rem; }
.tableau-defile th, .tableau-defile td { padding: 10px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-defile thead th { border-top: 0; color: var(--vert-fonce); }
.tableau-defile tbody th { color: var(--encre); font-weight: 700; white-space: nowrap; }
.cta-guide { margin: 36px 0 8px; padding: 22px; border-radius: var(--r); color: var(--blanc); background: var(--vert-fonce); }
.cta-guide p { color: #DCEDE5; }
.cta-guide strong { color: var(--blanc); }
.cta-guide-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.guides-liens { display: flex; flex-direction: column; gap: 8px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--trait); }
.guides-titre { margin: 0; color: var(--gris); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.guides-liens a { font-weight: 700; }