/* ============================================================
   i360 · site vitrine
   Principe : sobre. Du blanc (ou du noir neutre), du texte, des filets fins.
   Une seule couleur d'accent, le vert i360, réservée aux boutons et aux petits repères.
   ============================================================ */

:root {
  --bg: #ffffff;
  --alt: #f7f7f8;
  --card: #ffffff;
  --line: #e7e7ea;
  --text: #0c0c10;
  --muted: #6a6a74;
  --accent: #00a86b;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 168, 107, 0.1);
  --phone: #0c0c10;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #0a0a0c;
  --alt: #101013;
  --card: #111114;
  --line: #232327;
  --text: #ededf0;
  --muted: #8b8b93;
  --accent: #1dc98a;
  --accent-ink: #04140d;
  --accent-soft: rgba(29, 201, 138, 0.12);
  --phone: #1a1a1f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.narrow { width: min(780px, 92vw); }
.center { text-align: center; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- typographie ---------- */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
h1 { font-size: clamp(38px, 4.9vw, 68px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 400; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; }
h3 { font-size: 19px; letter-spacing: -0.015em; font-weight: 700; }
.lead { margin-top: 16px; max-width: 620px; color: var(--muted); font-size: 18px; }
.center .lead { margin-inline: auto; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; white-space: nowrap; transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-lg .ic { width: 20px; height: 20px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(0.94); }
.btn-ghost { border-color: var(--line); background: var(--card); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

/* ---------- navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; pointer-events: none; }
.nav > * { pointer-events: auto; }
/* En haut de page : barre pleine largeur, transparente. Au scroll : elle se resserre en pilule flottante. */
.nav-in { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(1160px, 92vw); height: 68px; margin: 0 auto; gap: 24px; padding: 0; border: 1px solid transparent; border-radius: 999px;
  transition: width 0.6s var(--ease), height 0.5s var(--ease), margin-top 0.5s var(--ease), padding 0.5s var(--ease), background 0.4s, border-color 0.4s, box-shadow 0.5s; }
.nav.scrolled .nav-in { width: min(780px, 92vw); height: 58px; margin-top: 12px; padding: 0 9px 0 16px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.25); }
.nav.scrolled .links { gap: 22px; }
.nav.scrolled .brand img { width: 30px; height: 30px; }
.nav.scrolled .btn-sm { padding: 8px 15px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 2px; border: 1px solid var(--line); }
.links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; color: var(--muted); }
.links a { transition: color 0.2s; }
.links a:hover, .links a.act { color: var(--text); }
.nav-r { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: transparent; transition: background 0.2s; }
.icon-btn:hover { background: var(--alt); }
.icon-btn svg { width: 18px; height: 18px; }
.navprog { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity 0.4s; }
.nav.scrolled .navprog { opacity: 1; }
.burger { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: transparent; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.burger span:first-child { top: 14px; } .burger span:last-child { top: 21px; }
.burger[aria-expanded="true"] span:first-child { top: 17px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 17px; transform: rotate(-45deg); }
.mobile-menu { display: none; flex-direction: column; max-height: 0; overflow: hidden; width: min(92vw, 780px); margin: 8px auto 0; background: var(--bg); border: 1px solid transparent; border-radius: 20px; padding: 0 20px; transition: max-height 0.4s var(--ease), border-color 0.3s; }
.mobile-menu a { padding: 14px 0; font-weight: 500; border-top: 1px solid var(--line); }
.mobile-menu.open { max-height: 380px; border-color: var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 72px 0 0; overflow: hidden; z-index: 0; background: var(--bg); }
.hero-in { position: static; display: block; width: min(1160px, 92vw); margin-inline: auto; text-align: left; }
.hero .copy { position: relative; z-index: 2; max-width: 560px; padding-bottom: 40px; }
.hero h1 { margin: 0 0 20px; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.04; }
.sub { max-width: 470px; color: var(--muted); font-size: 18px; }
.cta-pair { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cta-pair.center { justify-content: center; }
.note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* la photo est grande, collée en bas à droite : elle sort de la page par le poignet, sous le trait du bandeau */
.hero-art { position: absolute; right: -9vw; bottom: 0; z-index: 1; width: min(78vw, 1320px); margin: 0; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 3.5%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 3.5%);
  mask-composite: intersect; }
.hero-art img { width: 100%; height: auto; display: block; filter: contrast(1.05); transform-origin: 65% 95%; animation: hero-in 1.6s var(--ease) both; }
@keyframes hero-in { from { transform: scale(1.05) translateY(30px); } to { transform: none; } }

/* deux versions de la photo : fond blanc (clair) et fond noir (sombre). Chacune se fond dans le fond de la page. */
.hero-art .art-d { display: none; }
[data-theme="dark"] .hero-art .art-l { display: none; }
[data-theme="dark"] .hero-art .art-d { display: block; }
[data-theme="dark"] .hero-art { mix-blend-mode: lighten; }
[data-theme="dark"] .hero-art img { filter: none; }

/* ---------- téléphone ---------- */
.phone { position: relative; width: 290px; aspect-ratio: 780 / 1688; padding: 9px; border-radius: 44px; background: var(--phone); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .phone { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; width: 72px; height: 19px; transform: translateX(-50%); background: #000; border-radius: 12px; z-index: 3; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease); }
.phone-screen img.on { opacity: 1; }
.phone.sm { width: 200px; border-radius: 34px; padding: 7px; }
.phone.sm .phone-screen { border-radius: 28px; }
.phone.sm::before { width: 54px; height: 14px; top: 11px; }

/* ---------- bandeau défilant ---------- */
.marquee { position: relative; z-index: 1; border-block: 1px solid var(--line); background: var(--bg); overflow: hidden; padding: 16px 0; }
.track { display: flex; gap: 48px; width: max-content; animation: scroll-x 45s linear infinite; color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; }
.track span::before { content: "·"; margin-right: 48px; color: var(--line); font-weight: 800; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { padding: 112px 0; }
section.alt { background: var(--alt); border-block: 1px solid var(--line); }
.hero + .marquee + main > section:first-child { padding-top: 130px; }
.reveal { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(10px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; }

/* services : bento monochrome, icônes de trait */
:root { --tile: #f1f1f3; --tile-alt: #e6e6e9; }
[data-theme="dark"] { --tile: #1b1b1e; --tile-alt: #2a2a2d; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; margin-top: 56px; }
.b { position: relative; display: flex; padding: 30px 28px; border-radius: 26px; background: var(--tile); overflow: hidden; isolation: isolate; transition: background 0.4s, opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.b-alt { background: var(--tile-alt); }
/* au survol : la tuile prend la couleur primaire */
.b.in:hover { background-color: var(--accent); }
.b h3, .b p { transition: color 0.35s; }
.b.in:hover h3 { color: #fff; }
.b.in:hover p { color: color-mix(in srgb, #fff 82%, transparent); }
.b-text { position: relative; z-index: 1; max-width: 230px; align-self: flex-end; }
.b h3 { font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 10px; }
.b p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.b-pay { grid-column: 1; grid-row: 1 / 3; }
.b-pay .b-text { align-self: flex-end; max-width: 100%; }
.b-pay h3 { font-size: 34px; }
.b-tra { grid-column: 2 / 4; grid-row: 1; }
.b-imm { grid-column: 4; grid-row: 1; }
.b-liv { grid-column: 2; grid-row: 2; }
.b-san { grid-column: 3; grid-row: 2; }
.b-ali { grid-column: 4; grid-row: 2; }
.b-edu { grid-column: 1 / 3; grid-row: 3; }
.b-tou { grid-column: 3 / 5; grid-row: 3; }
.b-tra h3, .b-edu h3, .b-tou h3 { font-size: 32px; }

/* icône : pastille arrondie en haut à droite, icônes de trait (Lucide) */
.b-ico { position: absolute; z-index: 1; top: 26px; left: 28px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); transition: background 0.35s, color 0.35s, transform 0.5s var(--ease); }
.b-ico svg { width: 28px; height: 28px; display: block; }
.b.in:hover .b-ico { background: rgba(255, 255, 255, 0.22); color: #fff; transform: translateY(-3px); }
.b-imm .b-text, .b-liv .b-text, .b-san .b-text, .b-ali .b-text { max-width: 100%; }

.b::before, .b::after { content: ""; position: absolute; z-index: 0; pointer-events: none; transition: transform 0.65s var(--ease), background 0.35s, border-color 0.35s; }
.b::before { opacity: 0.92; }
.b.in:hover::before { transform: translateY(-8px) rotate(-4deg) scale(1.04); }
.b.in:hover::after { transform: translate(8px, -8px) rotate(8deg); }
.b-pay::before { width: 150px; height: 104px; left: 28px; top: 114px; border-radius: 22px; background: linear-gradient(135deg, var(--accent), #70e0af); box-shadow: 16px 16px 0 rgba(12, 12, 16, 0.12); }
.b-pay::after { width: 74px; height: 44px; top: 140px; left: 66px; border-radius: 12px; border: 2px solid rgba(255,255,255,.9); background: linear-gradient(90deg, transparent 45%, rgba(255,255,255,.8) 45% 54%, transparent 54%); }
.b-tra::before { width: 230px; height: 130px; top: 40px; right: 32px; border: 2px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 46% 54% 52% 48% / 58% 38% 62% 42%; background: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--text) 7%, transparent) 19px 20px); }
.b-tra::after { width: 72px; height: 34px; top: 92px; right: 104px; border: 3px solid var(--accent); border-radius: 14px 18px 12px 12px; box-shadow: 19px 23px 0 -11px var(--text), -19px 23px 0 -11px var(--text); }
.b-imm::before { width: 112px; height: 126px; right: 18px; bottom: 18px; border-radius: 18px 18px 4px 4px; background: repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--text) 16%, transparent) 20px 28px), repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--text) 16%, transparent) 22px 28px); border: 2px solid color-mix(in srgb, var(--text) 22%, transparent); }
.b-imm::after { width: 54px; height: 40px; right: 47px; bottom: 18px; background: var(--accent); clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%); }
.b-liv::before { width: 116px; height: 90px; right: -14px; top: 24px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--text) 22%, transparent); background: linear-gradient(135deg, transparent 49%, color-mix(in srgb, var(--text) 18%, transparent) 50% 51%, transparent 52%); }
.b-liv::after { width: 52px; height: 52px; right: 49px; top: 43px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 15%, transparent); }
.b-san::before { width: 108px; height: 108px; right: 18px; top: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 7px, transparent 8px), var(--accent-soft); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.b-san::after { width: 46px; height: 46px; right: 49px; top: 63px; background: var(--accent); clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.b-ali::before { width: 120px; height: 120px; right: -24px; top: 18px; border-radius: 50%; background: conic-gradient(from 20deg, var(--accent), #d7f5e8, var(--accent)); opacity: .72; }
.b-ali::after { width: 66px; height: 42px; right: 35px; top: 58px; border: 3px solid color-mix(in srgb, var(--text) 60%, transparent); border-radius: 50% 50% 44% 44%; border-top: 0; }
.b-edu::before { width: 180px; height: 112px; right: 32px; top: 38px; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 18px, color-mix(in srgb, var(--text) 14%, transparent) 19px 20px), linear-gradient(135deg, #fff, var(--alt)); transform: rotate(-7deg); box-shadow: 12px 12px 0 color-mix(in srgb, var(--accent) 32%, transparent); }
.b-edu::after { width: 42px; height: 42px; right: 92px; top: 74px; border-radius: 50%; background: var(--accent); }
.b-tou::before { width: 142px; height: 142px; right: 34px; top: 28px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--text) 28%, transparent); background: radial-gradient(circle at 50% 50%, var(--accent) 0 10px, transparent 11px); animation: service-orbit 11s linear infinite; }
.b-tou::after { width: 64px; height: 64px; right: 73px; top: 67px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); }
@keyframes service-orbit { to { rotate: 360deg; } }

.country-section { position: relative; overflow: hidden; padding-top: 70px; background: #0a0a0c !important; color: #f4f4f6; border-block: 1px solid rgba(255,255,255,.06); padding-bottom: 96px; --bg: #0a0a0c; --grid: rgba(255,255,255,.1); --grid-node: rgba(255,255,255,.35); }
.country-section .lead { color: #9a9aa3; }
.cw-stage { position: relative; height: 440px; }
.cw-wall { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 46%, #000 18%, transparent 70%); mask-image: radial-gradient(ellipse 52% 56% at 50% 46%, #000 18%, transparent 70%); }
.cw-row { display: flex; gap: 16px; flex: none; }
.cw-row:nth-child(even) { transform: translateX(50px); }
.cw-row span { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(150deg, #1d1f1e, #141515); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.cw-row svg { width: 38px; height: 25px; border-radius: 4px; opacity: .8; filter: saturate(.75); }
.cw-hero { position: absolute; left: 50%; top: 50%; width: 138px; height: 138px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 34px; background: linear-gradient(150deg, #1e2321, #0f1110); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6), 0 0 90px rgba(29,201,138,.18); }
.cw-hero svg { width: 74px; height: 49px; border-radius: 7px; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.country-head { position: relative; z-index: 1; max-width: 760px; margin: 10px auto 0; display: grid; gap: 14px; text-align: center; }
.country-head .eyebrow { color: var(--accent); margin: 0; }
.country-head h2 { max-width: 680px; margin-inline: auto; }
.country-head .lead { max-width: 540px; margin: 0 auto; font-size: 15px; }
@media (max-width: 760px) { .cw-stage { height: 340px; } .cw-row span { width: 60px; height: 60px; border-radius: 16px; } .cw-row { gap: 12px; } .cw-row:nth-child(even) { transform: translateX(36px); } .cw-wall { gap: 12px; } .cw-row svg { width: 28px; height: 19px; } .cw-hero { width: 104px; height: 104px; border-radius: 26px; } .cw-hero svg { width: 56px; height: 37px; } }

.lang-switch { position: relative; }
.lang-menu { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: 145px; padding: 7px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 32px rgba(0,0,0,.16); }
.lang-menu button { display: block; width: 100%; padding: 10px 12px; background: transparent; border: 0; text-align: left; color: var(--text); }
.lang-menu button:hover, .lang-menu button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }

/* Nouvelle mosaïque éditoriale : panneaux rectangulaires, images pleine surface et cadres de texte. */
.bento { grid-auto-rows: 390px; gap: 8px; }
.b { border-radius: 0; padding: 18px; background-color: #f4f0e7; background-repeat: no-repeat; background-size: cover; background-position: center; transition: opacity 0.9s var(--ease), transform 0.45s var(--ease), filter 0.45s var(--ease), background-position 0.7s var(--ease); }
.b::before, .b::after, .b-ico { display: none; }
.b.in:hover { background-position: 56% center; transform: translateY(-5px); filter: saturate(1.08); }
.b-text { align-self: flex-end; max-width: min(100%, 290px); padding: 17px 18px 15px; background: rgba(255, 253, 247, 0.96); border: 2px solid #111; box-shadow: 7px 7px 0 #111; }
.b h3, .b-pay h3, .b-tra h3, .b-edu h3, .b-tou h3 { font-size: 25px; line-height: 1; margin-bottom: 8px; letter-spacing: -0.035em; color: #111; }
.b p { font-size: 13.5px; line-height: 1.38; color: #3d3a34; }
.b.in:hover h3, .b.in:hover p { color: #111; }
.b-pay { grid-column: 1 / 3; grid-row: 1; background-image: linear-gradient(90deg, rgba(247,244,235,.9) 0 30%, transparent 57%), url("../assets/services-mobility.png"); background-position: 72% center; }
.b-pay .b-text { align-self: flex-end; }
.b-tra { grid-column: 3 / 5; grid-row: 1; background-image: linear-gradient(0deg, rgba(247,244,235,.9) 0 32%, transparent 58%), url("../assets/services-mobility.png"); background-position: 83% center; }
.b-imm { grid-column: 1; grid-row: 2; background-image: linear-gradient(0deg, rgba(247,244,235,.94) 0 39%, transparent 66%), url("../assets/services-lifestyle.png"); background-position: 23% center; }
.b-liv { grid-column: 2; grid-row: 2; background-image: linear-gradient(0deg, rgba(247,244,235,.94) 0 39%, transparent 66%), url("../assets/services-wellbeing.png"); background-position: 75% center; }
.b-san { grid-column: 3; grid-row: 2; background-image: linear-gradient(0deg, rgba(247,244,235,.94) 0 39%, transparent 66%), url("../assets/services-wellbeing.png"); background-position: 86% center; }
.b-ali { grid-column: 4; grid-row: 2; background-image: linear-gradient(0deg, rgba(247,244,235,.94) 0 39%, transparent 66%), url("../assets/services-wellbeing.png"); background-position: 68% center; }
.b-edu { grid-column: 1 / 3; grid-row: 3; background-image: linear-gradient(90deg, rgba(247,244,235,.92) 0 35%, transparent 60%), url("../assets/services-lifestyle.png"); background-position: 14% center; }
.b-tou { grid-column: 3 / 5; grid-row: 3; background-image: linear-gradient(0deg, rgba(247,244,235,.9) 0 34%, transparent 60%), url("../assets/services-lifestyle.png"); background-position: 53% center; }

/* Les illustrations restent expressives en mode sombre, sans panneau blanc �blouissant. */
[data-theme="dark"] .b { background-color: #0e221b; background-blend-mode: multiply; }
[data-theme="dark"] .b::before { display: block; inset: 0; background: rgba(3, 10, 8, 0.38); opacity: 1; transform: none; }
[data-theme="dark"] .b.in:hover::before { transform: none; background: rgba(3, 10, 8, 0.22); }
[data-theme="dark"] .b-text { background: rgba(13, 17, 15, 0.93); border-color: rgba(255, 255, 255, 0.8); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.88); }
[data-theme="dark"] .b h3, [data-theme="dark"] .b-pay h3, [data-theme="dark"] .b-tra h3, [data-theme="dark"] .b-edu h3, [data-theme="dark"] .b-tou h3, [data-theme="dark"] .b.in:hover h3 { color: #fff; }
[data-theme="dark"] .b p, [data-theme="dark"] .b.in:hover p { color: #d2d9d4; }

/* Une image par service : l'image et le texte occupent deux zones distinctes. */
.b { display: grid; grid-template-rows: minmax(126px, 1fr) auto; padding: 0; background-image: none; background-color: #f4f0e7; }
.b::before, .b::after, [data-theme="dark"] .b::before { display: none; }
.b.in:hover { background-position: center; transform: translateY(-5px); }
.b-art { min-height: 220px; background-repeat: no-repeat; background-size: cover; background-color: #f7f2e7; background-position: center; transition: transform 0.65s var(--ease), filter 0.45s ease; }
.b.in:hover .b-art { transform: none; filter: saturate(1.1); }
.b-text, .b-pay .b-text { align-self: auto; max-width: none; padding: 15px 18px 16px; background: #fffdf7; border: 0; border-top: 2px solid #111; box-shadow: none; }
.b h3, .b-pay h3, .b-tra h3, .b-edu h3, .b-tou h3 { font-size: 23px; margin-bottom: 6px; }
.b p { max-width: 430px; }
.b-pay .b-art { background-image: url("../assets/service-payments.png"); background-position: center 58%; }
.b-pay .b-art { background-color: #103cc9; }
.b-tra .b-art { background-image: url("../assets/service-transport.png"); background-position: center 62%; background-color: #e5f1f5; }
.b-imm .b-art { background-image: url("../assets/service-realestate.png"); background-position: center 56%; background-color: #c98568; }
.b-liv .b-art { background-image: url("../assets/service-delivery.png"); background-position: center 59%; background-color: #e66052; }
.b-san .b-art { background-image: url("../assets/service-health.png"); background-position: center 58%; background-color: #aba9e7; }
.b-ali .b-art { background-image: url("../assets/service-food.png"); background-position: center 57%; background-color: #f1b432; }
.b-edu .b-art { background-image: url("../assets/service-education.png"); background-position: center 52%; background-color: #f5f4ef; }
.b-tou .b-art { background-image: url("../assets/service-tourism.png"); background-position: center 54%; background-color: #ddc18e; }
[data-theme="dark"] .b { background: #121715; background-blend-mode: normal; }
[data-theme="dark"] .b-art { filter: brightness(.72) saturate(.86); }
[data-theme="dark"] .b.in:hover .b-art { filter: brightness(.86) saturate(1); }
[data-theme="dark"] .b-text { background: #121715; border-color: rgba(255,255,255,.55); }

/* micro-mouvements déclenchés lorsque chaque carte arrive à l'écran */
.b-art { position: relative; overflow: hidden; }

/* aperçu : photo à gauche, texte à droite */
.feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.feature-img { position: relative; mix-blend-mode: multiply; }
.feature-img img { width: 100%; max-width: 600px; height: auto; margin-inline: auto; filter: contrast(1.05) brightness(1.03); -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 60%, transparent 100%); }
.feature-copy h2 { margin-top: 18px; }
.badge { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mini { display: grid; gap: 12px; margin-top: 26px; }
.mini li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.mini svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.feature-copy .cta-pair { margin-top: 32px; }

/* deux versions de chaque photo : claire et sombre */
.th-d { display: none; }
[data-theme="dark"] .th-l { display: none; }
[data-theme="dark"] .th-d { display: block; }
[data-theme="dark"] .feature-img { mix-blend-mode: lighten; }
[data-theme="dark"] .feature-img img { filter: none; }

/* vendeurs : grande carte, texte à gauche, photo qui remplit la moitié droite */
.seller { display: grid; grid-template-columns: 1fr 46%; overflow: hidden; border: 1px solid var(--line); border-radius: 36px; background: var(--card); }
.seller-copy { padding: 64px clamp(28px, 4.5vw, 64px); align-self: center; }
.seller-copy h2 { margin-top: 18px; }
.seller-img { position: relative; aspect-ratio: 1122 / 1402; }
.seller-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.step { padding: 28px 28px 8px 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.n { display: block; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 40px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; max-width: 300px; }

/* confiance */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.trust article { padding: 28px 24px 8px 0; }
.trust article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.trust .ico, .trust .ico-img { display: block; width: 28px; height: 28px; margin-bottom: 28px; }
.trust .ico { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-img { border-radius: 50%; }
.trust h3 { margin-bottom: 8px; }
.trust p { color: var(--muted); font-size: 14.5px; }

/* plateformes */
.plat { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 56px; padding: 14px; border: 1px solid var(--line); border-radius: 32px; background: var(--card); }
.p-main, .p-card { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 22px; overflow: hidden; }
.p-main { padding: 44px 40px; background: var(--alt); }
.p-card { padding: 26px; background: var(--card); border: 1px solid var(--line); }
.p-side { display: grid; gap: 14px; }
.p-info h3 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; font-weight: 800; margin: 14px 0 10px; }
.p-card .p-info h3 { font-size: 24px; margin: 12px 0 4px; color: var(--muted); }
.p-info p { color: var(--muted); max-width: 380px; }
.p-info .btn { margin-top: 24px; }
.p-note { margin-top: 14px; font-size: 12.5px; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--alt); border: 1px solid var(--line); color: var(--muted); }
.pill.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.gl { position: relative; flex: none; width: 164px; height: 164px; border-radius: 42px; display: grid; place-items: center; }
.gl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 50%); }
.gl svg { position: relative; width: 60%; height: 60%; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22)); }
.gl.small { width: 100px; height: 100px; border-radius: 28px; }
.gl-android { background: linear-gradient(160deg, #4fdc9c, #00a86b 65%, #008a58); box-shadow: 0 20px 36px -14px rgba(0, 168, 107, 0.55); }
.gl-ios { background: linear-gradient(160deg, #9aa3b5, #6b7488 65%, #4c5468); box-shadow: 0 16px 28px -12px rgba(76, 84, 104, 0.5); }
.gl-play { background: linear-gradient(160deg, #ffffff, #e6e9ef); box-shadow: 0 16px 28px -12px rgba(15, 20, 30, 0.35); }
[data-theme="dark"] .gl-play { background: linear-gradient(160deg, #2a2d36, #1a1c23); }

/* FAQ */
.faq { display: grid; margin-top: 48px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; transition: transform 0.35s var(--ease); flex: none; }
.faq details[open] summary svg { transform: rotate(135deg); }
.faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq details[open] .ans { grid-template-rows: 1fr; }
.faq .ans > div { overflow: hidden; }
.faq .ans p { padding: 0 0 22px; color: var(--muted); max-width: 640px; }

/* ---------- bas de page : CTA + pied de page. Clair en thème clair, noir en thème sombre ---------- */
.dark-zone { --z-card: #fbfaf7; --z-card-line: var(--line); --z-bar1: #cbeedc; --z-bar2: #d8f2e5; --z-bar3: #c2e9d4; --z-btn-bg: #0c0c10; --z-btn-ink: #fff; --z-line-btn: rgba(12, 12, 16, 0.3); --z-hair: #e2e2e6; --z-badge-bg: #fff;
  background: var(--alt); color: var(--text); padding-top: 110px; border-top: 1px solid var(--line); }
[data-theme="dark"] .dark-zone { --z-card: #0b0b0c; --z-card-line: rgba(255, 255, 255, 0.12); --z-bar1: #3a3a40; --z-bar2: #2c2c31; --z-bar3: #34343a; --z-btn-bg: #fff; --z-btn-ink: #0a0a0c; --z-line-btn: rgba(255, 255, 255, 0.4); --z-hair: rgba(255, 255, 255, 0.1); --z-badge-bg: transparent;
  background: var(--alt); color: #ededf0; border-top: 1px solid var(--line); }
.cta-sec { padding: 0 0 110px; }
.cta-card { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; min-height: 400px; padding: 0 clamp(28px, 5vw, 84px); border-radius: 30px; background: var(--z-card); border: 1px solid var(--z-card-line); overflow: hidden; }
.cta-left { position: relative; z-index: 2; padding: 56px 0; }
.cta-left h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; color: var(--text); }
[data-theme="dark"] .cta-left h2 { color: #fff; }
.cta-left p { margin-top: 18px; max-width: 400px; font-size: 15px; color: var(--muted); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.b-white, .b-line { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: transform 0.25s var(--ease), background 0.2s, border-color 0.2s; }
.b-white { background: var(--z-btn-bg); color: var(--z-btn-ink); }
.b-white:hover { filter: brightness(1.15); transform: translateY(-2px); }
.b-line { border: 1px solid var(--z-line-btn); color: var(--text); }
[data-theme="dark"] .b-line { color: #fff; }
.b-line:hover { border-color: var(--text); background: rgba(127, 127, 127, 0.08); transform: translateY(-2px); }
.b-white .ic, .b-line .ic { width: 16px; height: 16px; }
.cta-card { min-height: 460px; }
.cta-right { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; display: flex; justify-content: flex-end; }
.cta-right img { height: 100%; width: auto; max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }

/* En mode clair, le footer conserve le gris anthracite de la maquette. */
[data-theme="light"] .footer {
  background: #191919;
  color: #f5f5f5;
  --bg: #191919;
  --text: #f5f5f5;
  --muted: #b8b8b8;
  --line: rgba(255, 255, 255, 0.16);
  --grid: rgba(255, 255, 255, 0.12);
  --grid-node: rgba(255, 255, 255, 0.34);
}
[data-theme="light"] .footer .badges span:not(.ok) {
  background: #242424;
  border-color: #3e3e3e;
  color: #d8d8d8;
}
.footer { color: var(--text); }
.footer .wrap { position: relative; border-inline: 1px solid var(--grid); }
.f-top { display: block; padding: 0; border-top: 1px solid var(--grid); }
.f-logo-row { display: flex; align-items: center; padding: 28px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--grid); }
.f-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--text); }
.f-logo img { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 2px; border: 1px solid var(--line); }
.f-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.f-col { padding: 36px clamp(20px, 3vw, 36px) 48px; }
.f-col + .f-col { border-left: 1px solid var(--grid); }
/* petits nœuds aux angles du cadre, comme sur un plan */
.node-row { position: absolute; left: -5px; right: -5px; height: 9px; pointer-events: none; background: radial-gradient(circle, var(--bg) 2.5px, var(--grid-node) 3px 4px, transparent 4.5px) left / 9px 9px no-repeat, radial-gradient(circle, var(--bg) 2.5px, var(--grid-node) 3px 4px, transparent 4.5px) right / 9px 9px no-repeat; }
.f-col h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 20px; }
.f-col li + li { margin-top: 12px; }
.f-col li a, .f-plain { font-size: 13px; color: var(--muted); }
.f-col li a { transition: color 0.2s; }
.f-col li a:hover { color: var(--text); }
.f-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 26px clamp(20px, 3vw, 36px) 34px; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); font-size: 12.5px; color: var(--muted); }
.f-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.f-legal a { transition: color 0.2s; }
.f-legal a:hover { color: var(--text); }
.f-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.social { display: flex; gap: 8px; }
.social a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); transition: color 0.2s, border-color 0.2s; }
.social a:hover { color: var(--text); border-color: var(--text); }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badges span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--z-badge-bg); font-size: 11.5px; font-weight: 500; color: var(--text); }
[data-theme="dark"] .badges span { border-color: rgba(255, 255, 255, 0.16); color: #cfcfd6; }
.badges .ok { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
[data-theme="dark"] .badges .ok { color: #1dc98a; }

/* Apparition progressive du footer lorsqu'il entre dans la fenêtre. */
.footer-animate .f-logo-row,
.footer-animate .f-col,
.footer-animate .f-bottom {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.footer-animate.is-visible .f-logo-row,
.footer-animate.is-visible .f-col,
.footer-animate.is-visible .f-bottom { opacity: 1; transform: none; }
.footer-animate .f-logo-row { transition-delay: 0.05s; }
.footer-animate .f-col:nth-child(1) { transition-delay: 0.12s; }
.footer-animate .f-col:nth-child(2) { transition-delay: 0.2s; }
.footer-animate .f-col:nth-child(3) { transition-delay: 0.28s; }
.footer-animate .f-col:nth-child(4) { transition-delay: 0.36s; }
.footer-animate .f-bottom { transition-delay: 0.44s; }


/* ---------- assistant IA : carte coupée en deux. Gauche : texte, onde vocale, transcription. Droite : la mascotte ---------- */
.ai-split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 36px; background: var(--card); }
.ai-left { padding: 64px clamp(28px, 4.5vw, 64px); align-self: center; }
.ai-left h2 { margin: 18px 0 14px; }
.ai-left .lead { margin-top: 0; max-width: 480px; }

.wave { display: flex; align-items: center; gap: 11px; height: 120px; margin: 34px 0 22px; }
.wave i { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--text); opacity: 0.22; transition: height 0.45s var(--ease), opacity 0.45s; }
.wave i:nth-child(1), .wave i:nth-child(7) { --h: 34px; }
.wave i:nth-child(2), .wave i:nth-child(6) { --h: 62px; }
.wave i:nth-child(3), .wave i:nth-child(5) { --h: 92px; }
.wave i:nth-child(4) { --h: 116px; }
.wave.on i { height: var(--h); opacity: 1; animation: bar 0.9s ease-in-out infinite; }
.wave.on i:nth-child(2) { animation-delay: -0.15s; } .wave.on i:nth-child(3) { animation-delay: -0.3s; } .wave.on i:nth-child(4) { animation-delay: -0.45s; }
.wave.on i:nth-child(5) { animation-delay: -0.2s; } .wave.on i:nth-child(6) { animation-delay: -0.35s; } .wave.on i:nth-child(7) { animation-delay: -0.5s; }
@keyframes bar { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

.ai-line { display: flex; gap: 14px; align-items: baseline; max-width: 460px; min-height: 58px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; letter-spacing: -0.01em; }
.ai-line .who { flex: none; width: 48px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ai-line.you .txt { color: var(--text); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--text); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* moitié droite : toujours sombre, c'est là que vit la mascotte */
.ai-right { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 56px 32px 44px; background: var(--card); color: var(--text); border-left: 1px solid var(--line); }
[data-theme="dark"] .ai-right { background: #0a0a0c; border-left: 0; }
.ai-right { justify-content: flex-start; overflow: hidden; padding-bottom: 260px; }
/* la mascotte sort du coin inférieur droit de la carte : on n'en voit qu'une partie */
.orb { position: absolute; bottom: -150px; right: -150px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 30% 60%, #3fe08c 0, #18c96c 42%, #0d8f4c 82%, #0a6b3a 100%); box-shadow: 0 0 80px rgba(20, 196, 106, 0.18); }
.orb.speaking { box-shadow: 0 0 100px rgba(20, 196, 106, 0.45); }
.eye { position: absolute; top: 130px; width: 28px; height: 60px; border-radius: 16px; background: #fff; }
.eye:nth-child(1) { left: 118px; }
.eye:nth-child(2) { left: 168px; }
.ai-right .ai-line { width: 100%; max-width: 420px; justify-content: center; text-align: center; }
.ai-right .ai-line .who { display: none; }
.ai-right .ai-line .txt { color: var(--accent); }
.ai-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ai-chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 1020px) { .ai-split { grid-template-columns: 1fr; } .ai-right { padding-top: 40px; padding-bottom: 270px; } }
@media (max-width: 760px) { .orb { width: 300px; height: 300px; bottom: -90px; right: -90px; } .eye { top: 92px; width: 22px; height: 48px; } .eye:nth-child(1) { left: 64px; } .eye:nth-child(2) { left: 102px; } .ai-right { padding-bottom: 230px; } .ai-left { padding: 44px 24px; } }

/* ---------- modale ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s; }
.modal[hidden] { display: none; }
.modal.show { opacity: 1; }
.modal-box { position: relative; width: min(400px, 100%); padding: 36px 28px 28px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); text-align: center; transform: translateY(16px); transition: transform 0.4s var(--ease); }
.modal.show .modal-box { transform: none; }
.modal-box img { margin: 0 auto 16px; border-radius: 50%; background: #fff; padding: 3px; border: 1px solid var(--line); }
.modal-box h3 { font-size: 21px; margin-bottom: 10px; }
.modal-box p { color: var(--muted); margin-bottom: 22px; }
.modal-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--alt); font-size: 20px; line-height: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-in, .feature, .seller { grid-template-columns: 1fr; }
  .seller-img { width: 100%; max-height: 640px; aspect-ratio: auto; height: 560px; }
  .seller-img img { object-position: 50% 30%; }
  .hero { display: block; min-height: 0; }
  .hero .copy { max-width: none; padding-bottom: 8px; }
  .hero-art { position: relative; right: auto; bottom: auto; width: 124%; margin: 8px 0 0 -12%; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .b-pay, .b-tra, .b-imm, .b-liv, .b-san, .b-ali, .b-edu, .b-tou { grid-column: auto; grid-row: auto; }
  .b-pay, .b-tra, .b-edu, .b-tou { grid-column: 1 / -1; }
  .b-pay .b-text { align-self: flex-start; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust article:nth-child(3) { border-left: 0; padding-left: 0; }
  .plat { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .links, .nav-r .btn { display: none; }
  .burger { display: block; }
  .mobile-menu { display: flex; }
  section { padding: 80px 0; }
  .hero { padding-top: 112px; }
  .trust { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .b, .b-pay, .b-tra, .b-imm, .b-liv, .b-san, .b-ali, .b-edu, .b-tou { grid-column: auto; grid-row: auto; min-height: 200px; }
  .b-text { max-width: 62%; }
  .trust article + article, .trust article:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 20px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .n { margin-bottom: 14px; }
  .btn-lg { width: 100%; }
  .p-main { flex-direction: column-reverse; align-items: flex-start; padding: 28px 22px; }
  .gl { width: 120px; height: 120px; }
  .cta-sec { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .footer-animate .f-logo-row, .footer-animate .f-col, .footer-animate .f-bottom { opacity: 1; transform: none; }
}

@media (max-width: 1020px) {
  .cta-card { grid-template-columns: 1fr; padding: 0 28px; }
  .cta-left { padding: 48px 0 8px; }
  .cta-card { min-height: 0; }
  .cta-right { position: relative; width: auto; height: 340px; justify-content: center; margin: 0 -28px; }
  .cta-right img { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) {
  .dark-zone { padding-top: 72px; }
  .cta-sec { padding-bottom: 72px; }
  .b-white, .b-line { width: 100%; justify-content: center; }
  .f-legal { gap: 14px; }
}

/* ---------- guides de page : traits fins alignés sur le contenu, nœuds aux croisements ---------- */
:root { --grid: rgba(12, 12, 16, 0.08); --grid-node: rgba(12, 12, 16, 0.22); }
[data-theme="dark"] { --grid: rgba(255, 255, 255, 0.08); --grid-node: rgba(255, 255, 255, 0.28); }
body::before { display: none; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--grid), var(--grid)) calc(50% - min(580px, 46vw)) 0 / 1px 100% no-repeat, linear-gradient(var(--grid), var(--grid)) calc(50% + min(580px, 46vw) - 1px) 0 / 1px 100% no-repeat; }
main > section { position: relative; }
main > section + section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grid); }
main > section + section::after { content: ""; position: absolute; top: -4px; left: 50%; width: calc(min(1160px, 92vw) + 9px); height: 9px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, var(--bg) 2.5px, var(--grid-node) 3px 4px, transparent 4.5px) left / 9px 9px no-repeat, radial-gradient(circle, var(--bg) 2.5px, var(--grid-node) 3px 4px, transparent 4.5px) right / 9px 9px no-repeat; }
@media (max-width: 760px) { body::before, main > section + section::after, .node-row { display: none; } .footer .wrap { border-inline: 0; } .f-cols { grid-template-columns: 1fr 1fr; } .f-col:nth-child(odd) { border-left: 0; } .f-col:nth-child(n+3) { border-top: 1px solid var(--grid); } }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 248px; }
  .b-pay, .b-tra, .b-imm, .b-liv, .b-san, .b-ali, .b-edu, .b-tou { grid-column: auto; grid-row: auto; }
  .b-pay, .b-tra, .b-edu, .b-tou { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .b, .b-pay, .b-tra, .b-imm, .b-liv, .b-san, .b-ali, .b-edu, .b-tou { grid-column: auto; grid-row: auto; min-height: 230px; }
  .b-text { max-width: 92%; }
}

@media (max-width: 860px) {
  .bento { grid-auto-rows: 340px; }
  .b-art { min-height: 220px; }
}
@media (max-width: 560px) {
  .bento { grid-auto-rows: 320px; }
  .b-art { min-height: 210px; }
  .b-text { max-width: none; }
}

/* Composition bento asym�trique sur grand �cran. */
.service-group-head { display: flex; align-items: center; gap: 13px; margin-top: 52px; color: var(--muted); }
.service-group-head span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.service-group-head p { margin: 0; color: var(--text); font-size: 14px; font-weight: 750; letter-spacing: .01em; }
.service-group-head i { height: 1px; flex: 1; background: var(--line); }
.service-group-head + .bento { margin-top: 18px; }
.service-group-head-second { margin-top: 80px; }
@media (min-width: 861px) {
  .bento { grid-auto-rows: 310px; }
  .bento-life { margin-top: 18px; }
  .b-pay { grid-column: 1 / 3; grid-row: 1 / 3; }
  .b-tra { grid-column: 3 / 5; grid-row: 1; }
  .b-imm { grid-column: 3; grid-row: 2; }
  .b-liv { grid-column: 4; grid-row: 2; }
  .bento-life .b-san { grid-column: 1; grid-row: 1; }
  .bento-life .b-ali { grid-column: 4; grid-row: 2; }
  .bento-life .b-edu { grid-column: 2 / 5; grid-row: 1; }
  .bento-life .b-tou { grid-column: 1 / 4; grid-row: 2; }
}

@media (max-width: 760px) {
  .service-group-head { margin-top: 42px; }
  .service-group-head-second { margin-top: 56px; }
  .country-head { grid-template-columns: 1fr; gap: 18px; }
  .country-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; }
  .country-featured { grid-column: span 2; }
  .country-card, .country-card:nth-child(n) { min-height: 118px; transform: none; }
  .country-featured, .country-featured:hover { min-height: 145px; transform: none; }
  .country-card:hover, .country-card:nth-child(n):hover { transform: translateY(-4px); }
}
@media (min-width: 761px) and (max-width: 860px) {
  .country-card, .country-card:nth-child(n), .country-featured, .country-featured:hover { transform: none; }
}
@media (max-width: 420px) {
  .country-grid { grid-template-columns: 1fr; }
  .country-featured { grid-column: auto; }
}

/* Drapeaux en mosa�que, avec le S�n�gal en carte centrale au premier plan. */
.country-wall { display: none; }
.country-card .flag svg { width: 38px; height: 26px; border-radius: 3px; }
@media (min-width: 0px) {
  .country-grid { position: relative; display: block; width: min(760px, 100%); height: 360px; margin: 42px auto 0; padding: 0; }
  .country-grid::before { content: ""; position: absolute; inset: -24px -34px 0; z-index: 0; background: radial-gradient(ellipse at center 50%, rgba(29,201,138,.11), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 75%); pointer-events: none; }
  .country-wall { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(7, 78px); grid-template-rows: repeat(3, 78px); justify-content: center; align-content: start; gap: 12px; }
  .country-wall span { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: linear-gradient(145deg, #1a1d1b, #121413); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); font-size: 37px; opacity: .24; filter: saturate(.7); }
  .country-grid > .country-card:not(.country-featured) { display: none; }
  #pays .country-grid > .country-featured { position: absolute; z-index: 3; display: flex; width: 164px; height: 164px; min-height: 0; left: 50%; top: 62px; transform: translateX(-50%); flex-direction: column; gap: 9px; padding: 17px 12px; border: 1px solid rgba(29,201,138,.85); border-radius: 25px; background: linear-gradient(145deg, #173c2c, #10231b); box-shadow: 0 22px 58px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); }
  #pays .country-grid > .country-featured:hover { transform: translateX(-50%) translateY(-3px); }
  .country-featured .flag { width: 72px; height: 72px; border-radius: 19px; background: rgba(255,255,255,.96); font-size: 48px; box-shadow: 0 10px 24px rgba(0,0,0,.26); }
  .country-featured strong { font-size: 17px; }
  .country-featured small { margin-top: 2px; font-size: 11px; }
  #pays .wrap { display: flex; flex-direction: column; align-items: center; }
  #pays .country-grid { order: -1; height: 285px; margin: 0 auto 26px; opacity: 1; filter: none; transform: none; }
  #pays .country-grid::before { background: radial-gradient(ellipse at center, rgba(29,201,138,.07), transparent 65%); }
  .country-wall { mask-image: radial-gradient(ellipse 65% 85% at center, #000 35%, transparent 100%); }
  .country-wall span { opacity: .65; filter: saturate(.8); background: linear-gradient(145deg, #262927, #191c1a); }
  .country-wall span svg { width: 43px; height: 29px; border-radius: 4px; }
  #pays .country-grid > .country-featured { width: 148px; height: 148px; top: 57px; padding: 12px 8px; gap: 7px; border-color: rgba(255,255,255,.24); background: linear-gradient(145deg, #343b35, #18201b); box-shadow: 0 16px 40px #000b, 0 0 0 8px #10111088, inset 0 1px 0 #ffffff20; }
  #pays .country-featured .flag { width: 66px; height: 48px; border: 0; border-radius: 5px; background: none !important; box-shadow: none; }
  #pays .country-featured .flag svg { width: 66px; height: 44px; }
  #pays .country-featured small { max-width: 130px; font-size: 10px; }
  #pays .country-head { gap: 8px; }
  #pays .country-head h2 { font-size: clamp(30px, 4vw, 46px); }
}
@media (max-width: 760px) {
  #pays .country-grid { width: 100%; height: 245px; margin-bottom: 18px; }
  .country-wall { grid-template-columns: repeat(7, 58px); grid-template-rows: repeat(3, 58px); gap: 9px; align-content: center; }
  .country-wall span { width: 58px; height: 58px; border-radius: 13px; }
  .country-wall span svg { width: 34px; height: 23px; }
  #pays .country-grid > .country-featured { top: 49px; }
}


/* ---------- chargement : l'arobase se forme autour du i, le point tombe, puis le rideau se lève ---------- */
#loader { display: none; }
.js #loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; align-content: center; gap: 18px; background: var(--bg); color: var(--text);
  transition: transform 1.05s cubic-bezier(.77,0,.18,1), border-radius 1.05s cubic-bezier(.77,0,.18,1); }
.js.loading, .js.loading body { overflow: hidden; }
#loader.done { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 14vh 14vh; pointer-events: none; }
#loader.done .ld-mark, #loader.done .ld-word { transform: translateY(-40px); opacity: 0; transition: transform .7s cubic-bezier(.7,0,.2,1), opacity .45s; }
.ld-mark { position: relative; width: clamp(120px, 16vw, 168px); aspect-ratio: 1; }
.ld-logo { width: 100%; height: 100%; overflow: visible; }
.ld-dot { transform-box: view-box; opacity: 0; animation: ld-drop .7s cubic-bezier(.3,1.5,.5,1) 1.6s forwards; }
.ld-glint { transform: skewX(-18deg); animation: ld-glint 1s ease-in-out 2.15s forwards; }
.ld-logo { animation: ld-pop .5s cubic-bezier(.3,1.5,.5,1) 2.05s; }
@keyframes ld-drop { 0% { opacity: 0; transform: translateY(-70px) scale(.5); } 60% { opacity: 1; transform: translateY(0) scale(1.12, .9); } 100% { opacity: 1; transform: none; } }
@keyframes ld-glint { to { transform: skewX(-18deg) translateX(820px); } }
@keyframes ld-pop { 50% { transform: scale(1.06); } }
.ld-word { display: flex; justify-content: center; gap: .02em; margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.ld-word span { display: inline-block; opacity: 0; transform: translateY(.6em); animation: ld-letter .55s var(--ease) forwards; }
.ld-word span:nth-child(1) { animation-delay: 1.75s; } .ld-word span:nth-child(2) { animation-delay: 1.85s; } .ld-word span:nth-child(3) { animation-delay: 1.93s; } .ld-word span:nth-child(4) { animation-delay: 2.01s; }
@keyframes ld-letter { to { opacity: 1; transform: none; } }

/* ---------- titres mot par mot, parallaxe douce ---------- */
.js .split .sw { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js .split.in .sw { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .js #loader { display: none; } .js .split .sw { opacity: 1; transform: none; filter: none; } }

/* ---------- entrée du site après le chargement : la barre descend, le hero se met en place (les .reveal attendent la fin du loader) ---------- */
.js.loading .nav, .js.loading .marquee { opacity: 0; }
.js.loading .hero-art img { animation: none; }
@keyframes drop { from { opacity: 0; translate: 0 -40px; } }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
.js.entered .nav { animation: drop .9s var(--ease) .35s backwards; }
.js.entered .marquee { animation: rise 1s var(--ease) 1.1s backwards; }
@media (prefers-reduced-motion: reduce) { .js.loading .nav, .js.loading .marquee { opacity: 1; } .js.entered * { animation: none !important; } }

/* ---------- parallaxe intérieure des illustrations de services ---------- */
.b-art { transform: translateY(var(--py, 0px)) scale(1.12); transition: filter .45s ease; }
.b.in:hover .b-art { transform: translateY(var(--py, 0px)) scale(1.16); transition: transform .8s var(--ease), filter .45s ease; }
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .b-art, .b.in:hover .b-art { transform: none; } }

/* ---------- vol : l'avion relie Dakar, Bamako, Abidjan et Paris au fil du scroll ---------- */
.flight { position: relative; width: 100%; height: clamp(200px, 24vw, 300px); margin-top: 48px; }
.fl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-base { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.fl-trail { fill: none; stroke: #e2b443; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(226,180,67,.45)); }
.fl-plane path { fill: #fff; }
.fl-halo { fill: rgba(226,180,67,.14); stroke: rgba(226,180,67,.35); stroke-width: 1; }
.fl-city { position: absolute; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6f6f78; transition: color .4s; white-space: nowrap; }
.fl-city i { width: 12px; height: 12px; border-radius: 50%; background: #0a0a0c; border: 2px solid #5a5a62; transition: background .4s, border-color .4s, box-shadow .4s; }
.fl-city.on { color: #f4f4f6; }
.fl-city.on i { background: #e2b443; border-color: #e2b443; box-shadow: 0 0 0 6px rgba(226,180,67,.16); }
@media (max-width: 760px) { .flight { margin-top: 32px; } .fl-city { font-size: 10px; letter-spacing: .08em; gap: 8px; } .fl-city i { width: 10px; height: 10px; } }

/* ---------- illustrations dessinées au scroll : même langage partout (trait doré, points qui s'allument) ---------- */
:root { --gold: #d9a632; --gold-soft: rgba(217, 166, 50, .16); }
[data-theme="dark"] { --gold: #e2b443; --gold-soft: rgba(226, 180, 67, .16); }
[data-seg] { transition: opacity .2s; }

/* hub 360 */
.hub { width: min(600px, 100%); margin: 48px auto 8px; }
.hub svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-orbit-base { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.hub-spoke, .hub-orbit { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.hub-orbit { stroke-width: 3; filter: drop-shadow(0 0 6px var(--gold-soft)); }
.hub-core circle { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.hub-core { transform-box: fill-box; transform-origin: center; transform: scale(.7); opacity: 0; transition: transform .7s cubic-bezier(.3,1.5,.5,1), opacity .4s; }
.hub-core.on { transform: none; opacity: 1; }
.hub-node circle { fill: var(--card); stroke: var(--line); stroke-width: 1.5; transition: stroke .4s, fill .4s; }
.hub-node use { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.hub-node text { font-size: 19px; font-weight: 600; text-anchor: middle; fill: var(--muted); transition: fill .4s; }
.hub-node.on circle { stroke: var(--gold); fill: color-mix(in srgb, var(--gold) 10%, var(--card)); }
.hub-node.on use { stroke: var(--gold); }
.hub-node.on text { fill: var(--text); }
@media (max-width: 560px) { .hub { margin-top: 32px; } .hub-node text { font-size: 24px; } }

/* suivi en temps réel : trajet et livraison */
.live { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.live-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--card); }
.live-art { display: block; width: 100%; height: auto; background: var(--alt); border-bottom: 1px solid var(--line); }
.live-text { padding: 20px 24px 24px; }
.live-text h3 { font-size: 23px; letter-spacing: -.03em; margin-bottom: 6px; }
.live-text p { color: var(--muted); font-size: 14.5px; }
.ride-streets path { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.ride-streets path:last-child { stroke-width: 6; stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
.ride-base { fill: none; stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.ride-route { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--gold-soft)); }
.ride-pin circle { fill: var(--card); stroke: var(--text); stroke-width: 3; }
.ride-pin text { font-size: 15px; font-weight: 700; fill: var(--text); }
.ride-end text { text-anchor: middle; }
.ride-end circle { transition: fill .4s, stroke .4s; }
.ride-end.on circle { fill: var(--gold); stroke: var(--gold); }
.ride-car rect:first-child { fill: var(--gold); stroke: color-mix(in srgb, #000 25%, var(--gold)); stroke-width: 1.5; }
.ride-glass { fill: rgba(0,0,0,.45); }
.ride-eta rect { fill: var(--card); stroke: var(--line); }
.ride-eta text { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.ride-eta .ride-eta-n { font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-transform: none; fill: var(--text); font-variant-numeric: tabular-nums; }
.dl-head { font-size: 18px; font-weight: 700; fill: var(--text); }
.dl-badge { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.dl-badge.on { opacity: 1; transform: none; }
.dl-badge rect { fill: var(--accent-soft); }
.dl-badge text { font-size: 14px; font-weight: 700; text-anchor: middle; fill: var(--accent); }
.dl-base { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.dl-line { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.dl-node circle { fill: var(--card); stroke: var(--line); stroke-width: 3; transition: fill .4s, stroke .4s; }
.dl-node text { font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--muted); transition: fill .4s; }
.dl-node .dl-time { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; }
.dl-node.on circle { fill: var(--gold); stroke: var(--gold); }
.dl-node.on text { fill: var(--text); }
.dl-node.on .dl-time { opacity: 1; fill: var(--muted); }
.dl-box rect { fill: #c98a3a; stroke: #8a5a1d; stroke-width: 1.5; }
.dl-box path { fill: none; stroke: #8a5a1d; stroke-width: 1.5; }
@media (max-width: 860px) { .live { grid-template-columns: 1fr; } }

/* fil des étapes : une pièce dorée vous mène de 01 à 03 */
.steps-wrap { position: relative; --p: 0; margin-top: 56px; }
.steps-wrap .steps { margin-top: 0; border-top-color: transparent; }
.rail { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--line); }
.rail-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--gold); box-shadow: 0 0 10px var(--gold-soft); }
.rail-coin { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f8dd8b, var(--gold) 60%, #9c6b12); box-shadow: 0 0 0 5px var(--gold-soft), 0 4px 10px rgba(0,0,0,.25); }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s; }
.step + .step::before { left: -6px; }
.step.on::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.step .n { transition: color .4s; }
.step.on .n { color: var(--gold); }
@media (max-width: 760px) {
  .rail { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .rail-fill { inset: 0 0 auto 0; width: auto; height: calc(var(--p) * 100%); }
  .rail-coin { top: calc(var(--p) * 100%); left: 50%; margin: -9px 0 0 -9px; }
  .steps-wrap .step, .steps-wrap .step + .step { padding-left: 32px; }
  .step::before, .step + .step::before { top: 30px; left: 0; }
}

/* sécurité : empreinte qui se dessine, puis le bouclier ; flux de recharge vers le wallet */
.sec-visuals { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; margin-top: 56px; }
.sec-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--card); }
.sec-art { display: block; width: 100%; height: 280px; padding: 18px; background: var(--alt); border-bottom: 1px solid var(--line); }
.fp-line { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.fp { transition: opacity .6s; }
.fp-shield { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.fp-ok { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s, transform .6s cubic-bezier(.3,1.6,.5,1); }
.fp-ok.on { opacity: 1; transform: none; }
.fp-ok circle { fill: var(--accent); }
.fp-ok path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tf-base { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.tf-flow { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.tf-pulse { fill: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.tf-src rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; transition: stroke .4s; }
.tf-src text { font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--muted); transition: fill .4s; }
.tf-src.on rect { stroke: var(--gold); }
.tf-src.on text { fill: var(--text); }
.tf-wallet circle { fill: var(--card); stroke: var(--line); stroke-width: 2; transition: fill .4s, stroke .4s; }
.tf-wallet use { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.tf-wallet.on circle { stroke: var(--gold); fill: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.tf-wallet.on use { stroke: var(--gold); }
.tf-amount { font-size: 17px; font-weight: 800; text-anchor: middle; fill: var(--text); font-variant-numeric: tabular-nums; }
.tf-dest circle { fill: var(--card); stroke: var(--line); stroke-width: 2; transition: fill .4s, stroke .4s; }
.tf-dest path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.tf-dest text { font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--muted); }
.tf-dest.on circle { fill: var(--accent); stroke: var(--accent); }
.tf-dest.on path { stroke: #fff; }
.tf-dest.on text { fill: var(--text); }
@media (max-width: 860px) { .sec-visuals { grid-template-columns: 1fr; } .sec-art { height: 240px; } }
.ride-eta-done { opacity: 0; }
.ride-eta .ride-eta-done { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; fill: var(--accent); }
.ride-eta-l, .ride-eta-n, .ride-eta-done { transition: opacity .35s; }
.ride-eta.on .ride-eta-l, .ride-eta.on .ride-eta-n { opacity: 0; }
.ride-eta.on .ride-eta-done { opacity: 1; }
@media (max-width: 560px) {
  .dl-node text { font-size: 19px; } .dl-node .dl-time { font-size: 16px; } .dl-head { font-size: 22px; }
  .tf-src text { font-size: 16px; } .tf-amount { font-size: 21px; } .tf-dest text { font-size: 17px; }
  .ride-pin text { font-size: 19px; }
}

/* ---------- illustrations SVG des services : contours dessinés au scroll, couleurs qui se posent, puis une petite boucle ---------- */
.bento .b .b-art { background-image: none; display: grid; place-items: center; overflow: hidden; filter: none; }
.bento .b-pay .b-art, .bento .b-liv .b-art, .bento .b-edu .b-art { background-color: #f6efe0; }
.bento .b-tra .b-art, .bento .b-san .b-art, .bento .b-tou .b-art { background-color: #e6f3ec; }
.bento .b-imm .b-art, .bento .b-ali .b-art { background-color: #f8ebcf; }
[data-theme="dark"] .bento .b .b-art { background-color: #161a18; filter: none; }
[data-theme="dark"] .bento .b-tra .b-art, [data-theme="dark"] .bento .b-san .b-art, [data-theme="dark"] .bento .b-tou .b-art { background-color: #12201a; }
[data-theme="dark"] .bento .b.in:hover .b-art { filter: none; }
.ill { --ink: #17140f; --paper: #fffaf0; --g: #e8b64a; --a: #1dc98a; --c: #ec6a55; width: 100%; height: 100%; max-height: 300px; overflow: visible; }
[data-theme="dark"] .ill { --ink: #efe8da; --paper: #25231e; --g: #d9a632; --a: #17b07a; --c: #d85a47; }
.ill .o { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill .f-paper { fill: var(--paper); } .ill .f-g { fill: var(--g); } .ill .f-a { fill: var(--a); } .ill .f-c { fill: var(--c); } .ill .f-ink { fill: var(--ink); }
.ill [class*="f-"] { fill-opacity: 0; transition: fill-opacity .8s var(--ease), opacity .2s; }
.ill.on [class*="f-"] { fill-opacity: 1; }
.ill g { transform-box: fill-box; transform-origin: center; }
/* traits décoratifs (hors moteur) : ils apparaissent avec les couleurs */
.ill .ray, .ill .skyline, .ill .road, .ill .hub, .ill .speed, .ill .ecg, .ill .steam, .ill .lines, .ill .trip, .ill .chk { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .6s; }
.ill.on .ray, .ill.on .skyline, .ill.on .road, .ill.on .hub, .ill.on .speed, .ill.on .ecg, .ill.on .lines, .ill.on .trip, .ill.on .chk { opacity: 1; }
.ill .ray { stroke: var(--g); stroke-width: 4; }
.ill .chk { stroke: var(--paper); stroke-width: 6; }
.ill .skyline { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 2.5; }
.ill .road { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 18 16; }
.ill .hub { stroke: var(--paper); stroke-width: 3; }
.ill .speed { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 3; }
.ill .ecg { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 90 400; }
.ill .steam { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 3; }
.ill .lines { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 3; }
.ill .trip { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 9; }
.ill .nd-n { fill: var(--c); } .ill .nd-s { fill: var(--ink); }
.ill .needle { opacity: 0; transition: opacity .5s; } .ill.on .needle { opacity: 1; }

/* boucles : elles ne tournent qu'une fois l'illustration posée */
.ill.on .card { animation: ill-tap 3.4s var(--ease) .4s infinite; }
.ill.on .pop { animation: ill-pop 3.4s var(--ease) .4s infinite; }
.ill.on .rays { animation: ill-rays 3.4s ease-out .4s infinite; }
@keyframes ill-tap { 0%, 25%, 75%, 100% { transform: none; } 45%, 55% { transform: translate(-26px, -6px) rotate(-4deg); } }
@keyframes ill-pop { 0%, 40%, 100% { transform: none; } 50% { transform: scale(1.14); } 62% { transform: scale(.98); } }
@keyframes ill-rays { 0%, 42% { opacity: 0; transform: scale(.8); } 52% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.12); } }
.ill .rays { opacity: 0; }
.ill.on .wheel { animation: ill-spin 1.1s linear infinite; }
.ill.on .road { animation: ill-road .9s linear infinite; }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-road { to { stroke-dashoffset: -34; } }
.ill.on .win { animation: ill-light 4.8s ease-in-out infinite; }
.ill.on .win:nth-of-type(6) { animation-delay: .8s; } .ill.on .win:nth-of-type(7) { animation-delay: 1.6s; }
@keyframes ill-light { 0%, 100% { fill: var(--paper); } 30%, 60% { fill: var(--g); } }
.ill .drop { opacity: 0; }
.ill.on .drop { animation: ill-drop 2.8s cubic-bezier(.5,0,.6,1) .3s infinite; }
@keyframes ill-drop { 0% { opacity: 0; transform: translateY(-36px); } 15% { opacity: 1; } 62% { transform: translateY(70px); opacity: 1; } 72%, 100% { transform: translateY(70px); opacity: 0; } }
.ill.on .speed { animation: ill-speed 2.8s ease-in-out .3s infinite; }
@keyframes ill-speed { 0%, 100% { opacity: .2; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-10px); } }
.ill.on .beat { animation: ill-beat 1.6s ease-in-out infinite; }
@keyframes ill-beat { 0%, 100% { transform: none; } 14% { transform: scale(1.08); } 28% { transform: none; } 42% { transform: scale(1.05); } }
.ill.on .ecg { animation: ill-ecg 1.6s linear infinite; }
@keyframes ill-ecg { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -490; } }
.ill.on .steam { animation: ill-steam 2.6s ease-in-out infinite; }
.ill.on .steam:nth-child(2) { animation-delay: .5s; } .ill.on .steam:nth-child(3) { animation-delay: 1s; }
@keyframes ill-steam { 0% { opacity: 0; transform: translateY(10px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.ill .flip { transform-box: view-box; transform-origin: 200px 150px; }
.ill.on .flip { animation: ill-flip 5s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes ill-flip { 0%, 15% { transform: none; } 45%, 60% { transform: scaleX(-1); } 90%, 100% { transform: none; } }
.ill .needle { transform-box: view-box; transform-origin: 310px 188px; }
.ill.on .needle { animation: ill-seek 4.5s ease-in-out infinite; }
@keyframes ill-seek { 0% { transform: rotate(-40deg); } 22% { transform: rotate(28deg); } 40% { transform: rotate(-14deg); } 55% { transform: rotate(6deg); } 70%, 100% { transform: rotate(0deg); } }
.ill.on .trip { animation: ill-road 1.2s linear infinite; }
.bento .b .b-art { position: relative; }
.bento .b .b-art .ill { position: absolute; inset: 6% 4%; width: 92%; height: 88%; max-height: none; }

/* Paiements, version « illustrateur » : traits noirs uniques, aplats noirs, or en seul accent */
.bento .b-pay .b-art { background-color: #f3f1ec; }
.ill-pay .ray { stroke: var(--ink); stroke-width: 3; }
.ill-pay .chk { stroke: var(--ink); stroke-width: 4.5; }
.ill-pay .ridge { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.ill-pay.on .ridge { opacity: 1; }
.ill-pay .coin-drop { opacity: 0; transform-box: view-box; transform-origin: 84px 0; }
.ill-pay.on .coin-drop { animation: pay-coin 3.4s cubic-bezier(.5,0,.75,0) .4s infinite; }
@keyframes pay-coin {
  0%, 52% { opacity: 0; transform: translateY(40px); }
  56% { opacity: 1; transform: translateY(60px); }
  74% { opacity: 1; transform: translateY(171px) scale(1, 1); animation-timing-function: ease-out; }
  78% { transform: translateY(172px) scale(1.04, .9); }
  84% { opacity: 1; transform: translateY(171px); }
  96%, 100% { opacity: 0; transform: translateY(171px); }
}
/* les aplats d'ombre restent sombres dans les deux thèmes (seuls les contours s'éclaircissent en mode nuit) */
.ill { --shade: #17140f; }
[data-theme="dark"] .ill { --shade: #0b0c0b; }
.ill .f-ink { fill: var(--shade); }
/* réglages des boucles pour la version « illustrateur » */
.ill .needle { transform-box: view-box; transform-origin: 318px 178px; }
.ill .flip { transform-box: view-box; transform-origin: 290px 200px; }
@keyframes ill-drop { 0% { opacity: 0; transform: translateY(-30px); } 15% { opacity: 1; } 55% { transform: translateY(78px); opacity: 1; } 65%, 100% { transform: translateY(78px); opacity: 0; } }
@keyframes ill-flip { 0%, 15% { transform: none; } 45%, 60% { transform: scaleX(-1); } 90%, 100% { transform: none; } }
.ill .ecg { stroke-dasharray: none; }
.ill.on .ecg { animation: none; }
.ill-san.on .beat { transform-origin: 300px 90px; }

/* ---------- visite guidée : téléphone fixe, écrans et textes qui changent au scroll ---------- */
.tour { padding: 0; height: calc(var(--n) * 55vh + 100vh); }
.tour-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 70px; }
.tour h2 { margin-bottom: 28px; max-width: 520px; }
.tour-list { position: relative; min-height: 190px; max-width: 460px; }
.tour-step { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.tour-step.on { opacity: 1; transform: none; }
.tour-n { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.tour-k { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tour-step h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; margin-bottom: 8px; }
.tour-step p:last-child { color: var(--muted); font-size: 16.5px; }
.tour-bar { width: min(460px, 100%); height: 2px; margin-top: 34px; background: var(--line); }
.tour-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.tour-phone { justify-self: center; width: min(300px, 34vh * 0.462 * 2.4); width: clamp(220px, 35vh, 300px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.tour-phone .phone-screen img { transition: opacity .6s var(--ease); }
@media (max-width: 1020px) { .tour-stick { gap: 28px; } .tour h2 { font-size: clamp(26px, 4.4vw, 38px); } }
@media (max-width: 700px) {
  .tour { height: calc(var(--n) * 50vh + 100vh); }
  .tour-stick { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 14px; align-content: center; justify-items: center; padding-top: 76px; }
  .tour-phone { order: -1; width: clamp(104px, 21vh, 164px); border-radius: 24px; padding: 4px; }
  .tour-copy { width: 100%; }
  .tour h2 { font-size: 22px; margin-bottom: 12px; }
  .tour-copy .eyebrow { display: none; }
  .tour-list { min-height: 140px; }
  .tour-bar { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tour { height: auto; padding: 80px 0; } .tour-stick { position: static; height: auto; } .tour-list { min-height: 0; } .tour-step { position: static; opacity: 1; transform: none; margin-bottom: 20px; } .tour-phone, .tour-bar { display: none; } }
.tour-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #121212; }
/* visite guidée : pas d'encoche (elle masquait le prénom), interligne resserré */
.tour-phone::before { display: none; }
.tour-step h3 { line-height: 1.15; }
.tour-step p:last-child { line-height: 1.5; }

/* barre de navigation : plus large une fois réduite en pilule, et menu burger dès 900 px (rien ne déborde) */
.nav.scrolled .nav-in { width: min(980px, 94vw); }
.brand { flex: none; }
.links { flex: 1; justify-content: center; min-width: 0; }
@media (max-width: 1100px) { .links { gap: 20px; font-size: 14px; } .nav.scrolled .links { gap: 16px; } .nav-in { gap: 14px; } }
@media (max-width: 900px) {
  .links, .nav-r .btn { display: none; }
  .burger { display: block; }
  .mobile-menu { display: flex; }
  .nav-in { justify-content: space-between; }
}

/* bas de page, tablette et mobile : l'image remplit toute la carte et se fond avec le texte */
@media (max-width: 1020px) {
  .cta-right { display: block; height: clamp(300px, 52vw, 440px); margin: 12px -28px 0; }
  .cta-right img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 22%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%); }
  .cta-right .th-d { display: none; } [data-theme="dark"] .cta-right .th-d { display: block; } [data-theme="dark"] .cta-right .th-l { display: none; }
}

/* accueil : le contenu au-dessus de la ligne de flottaison apparaît toujours après le loader, même sans observateur */
.js.entered .hero .reveal { opacity: 1; transform: none; filter: none; }
.js.entered .hero .split .sw { opacity: 1; transform: none; filter: none; }

/* visite guidée : vrai cadre de téléphone (la vidéo contient sa barre d'état et sa barre d'accueil) */
.tour-phone { aspect-ratio: 446 / 1000; padding: 9px; border-radius: 15% / 6.4%; background: #0b0b0d; border: 1px solid #3a3a40; box-shadow: 0 0 0 3px #1c1c20, 0 0 0 4px #4a4a52, 0 40px 80px -30px rgba(0,0,0,.5); }
.tour-phone .phone-screen { border-radius: 13% / 5.6%; }
.tour-phone::before { display: block; top: 3.1%; width: 28%; height: 2.1%; min-height: 12px; background: #000; border-radius: 99px; z-index: 3; }
.tour-video { object-fit: fill; }

/* visite guidée : la liste prend la hauteur du texte le plus long (plus de ligne qui traverse le texte), îlot proportionné au téléphone */
.tour-list { display: grid; min-height: 0 !important; }
.tour-step { position: static; grid-area: 1 / 1; inset: auto; }
.tour-phone::before { top: 2.6%; width: 28%; height: auto; min-height: 0; aspect-ratio: 5.2 / 1; }
.tour-bar { margin-top: 22px; }

/* visite guidée : bezel fin, îlot posé dans la barre d'état (jamais collé au bord) */
.tour-phone { padding: 5px; border-radius: 16% / 7.2%; border: 1px solid #2c2c31; box-shadow: 0 0 0 1px #55555c, 0 36px 70px -30px rgba(0,0,0,.45); }
.tour-phone .phone-screen { border-radius: 14.2% / 6.4%; }
.tour-phone::before { top: calc(5px + 1.15%); width: 25%; }

/* plateformes : icônes plates, sans reflet ni ombre (plus d'effet 3D) */
.gl::before { display: none; }
.gl svg { filter: none; }
.gl-android { background: var(--accent); box-shadow: none; }
.gl-ios { background: #6b7488; box-shadow: none; }
.gl-play, [data-theme="dark"] .gl-play { background: var(--alt); box-shadow: none; border: 1px solid var(--line); }
[data-theme="dark"] .gl-play { background: var(--card); }

/* ---------- plateformes : trois cartes compactes sur une ligne, icônes plates ---------- */
.plat { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; margin-top: 44px; padding: 0; border: 0; border-radius: 0; background: none; }
.p-side { display: contents; }
.p-main, .p-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); overflow: visible; }
.p-main { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.p-main .gl, .p-card .gl { order: -1; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 0; background: none !important; box-shadow: none !important; border: 0 !important; display: block; }
.gl svg { width: 100%; height: 100%; }
.gl-android svg * { fill: var(--accent); } .gl-android svg circle { fill: var(--card); } .gl-android svg path[stroke] { fill: none; stroke: var(--accent); }
.gl-ios svg path { fill: var(--muted); }
.p-info { display: block; width: 100%; }
.p-info .pill { position: absolute; top: 26px; right: 26px; }
.p-info h3, .p-main .p-info h3, .p-card .p-info h3 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.03em; color: var(--text); }
.p-card .p-info h3 { color: var(--muted); }
.p-info > p:not(.p-note) { max-width: none; font-size: 14.5px; }
.p-info .btn { margin-top: 20px; }
.p-info .p-note { margin-top: 12px; }
.p-card { opacity: .8; }
@media (max-width: 900px) { .plat { grid-template-columns: 1fr; gap: 12px; } .p-main, .p-card { padding: 22px; } .p-info .pill { top: 22px; right: 22px; } }

/* ---------- navigation : barre pleine largeur, une seule ligne dorée (la progression), bouton inversé ---------- */
.nav-in, .nav.scrolled .nav-in { width: 100%; max-width: none; height: 66px; margin: 0; padding: 0 clamp(16px, 4vw, 56px); border-radius: 0; border: 0; border-bottom: 1px solid transparent; box-shadow: none; background: transparent;
  transition: background .35s, border-color .35s; }
.nav.scrolled .nav-in { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); }
.nav.scrolled .brand img { width: 32px; height: 32px; }
.brand img { border: 0; padding: 0; background: transparent; }
.links, .nav.scrolled .links { flex: 1; justify-content: center; gap: 34px; }
.links a { padding: 6px 0; }
.links a.act { color: var(--text); font-weight: 600; }
.nav-r .btn-primary { background: var(--text); color: var(--bg); border-radius: 10px; }
.nav-r .btn-primary:hover { filter: none; background: var(--gold); color: #17140f; }
.icon-btn { border-radius: 10px; }
.navprog { left: 0; right: 0; bottom: -1px; border-radius: 0; background: var(--gold); }
.mobile-menu { width: 100%; margin: 0; border-radius: 0 0 22px 22px; border: 0; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 0 clamp(16px, 4vw, 56px); }
.mobile-menu.open { border-bottom-color: var(--line); }
@media (max-width: 1100px) { .links, .nav.scrolled .links { gap: 24px; } }

/* ---------- domaines : pas d'ombre, carte de droite « fenêtre à moitié ouverte » (ni trait à droite ni en bas, elle sort de la page) ---------- */
.dom-tabs button[aria-selected="true"] { box-shadow: none; }
.dom-panels { border-right: 0; border-bottom: 0; border-radius: 28px 0 0 0; margin-right: calc((min(1160px, 92vw) - 100vw) / 2); padding-right: calc(clamp(22px, 3vw, 40px) + (100vw - min(1160px, 92vw)) / 2);
  padding-bottom: 64px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent); }
@media (max-width: 960px) {
  .dom-panels { margin-right: calc((min(1160px, 92vw) - 100vw) / 2); border-radius: 24px 0 0 0; }
}

/* ---------- repères de la carte i-GOLD : le conteneur sert au positionnement (MapLibre), l'intérieur s'anime */
.gmw { width: 40px; height: 34px; }
.gm { animation: gm-drop .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes gm-drop { from { opacity: 0; transform: translateY(-22px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .gm { animation: none; } }

/* ---------- appel à l'action : bande pleine largeur sur la savane, texte centré, collée au pied de page ---------- */
.dark-zone { padding-top: 0; border-top: 0; }
.cta-sec.cta-hero { position: relative; display: grid; place-items: start center; min-height: clamp(560px, 64vw, 780px); padding: clamp(64px, 9vw, 120px) 0 0; overflow: hidden; background: #2a1a0f; }
.cta-hero-bg { position: absolute; inset: -6% 0; background: url("../assets/cta-savane.jpg") 62% 70% / cover no-repeat; will-change: transform; }
.cta-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24,12,4,.62) 0%, rgba(24,12,4,.34) 34%, rgba(24,12,4,0) 62%); pointer-events: none; }
.cta-hero .wrap { position: relative; z-index: 2; }
.cta-hero-in { display: grid; justify-items: center; text-align: center; padding: 0; max-width: 820px; margin-inline: auto; }
.cta-kicker { margin: 0 0 18px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.cta-hero .cta-left h2, .cta-hero h2 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.045em; font-weight: 500; color: #fff; text-shadow: 0 2px 28px rgba(24,12,4,.35); }
.cta-hero .cta-left p:not(.cta-kicker) { max-width: 520px; margin-top: 20px; font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(24,12,4,.4); }
.cta-hero .cta-btns { justify-content: center; margin-top: 32px; }
.cta-hero .b-white { background: #fff; color: #17140f; padding: 15px 24px; font-size: 15px; border-radius: 12px; }
.cta-hero .b-white:hover { filter: none; background: #f6e3b2; }
.cta-hero .b-line { border-color: rgba(255,255,255,.65); color: #fff; padding: 15px 24px; font-size: 15px; border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cta-hero .b-line:hover { background: rgba(255,255,255,.2); border-color: #fff; }
[data-theme="dark"] .cta-hero::before { background: linear-gradient(180deg, rgba(8,5,2,.7) 0%, rgba(8,5,2,.42) 36%, rgba(8,5,2,.05) 64%); }
@media (max-width: 760px) { .cta-sec.cta-hero { min-height: 640px; padding-top: 72px; } .cta-hero-bg { background-position: 74% 78%; } .cta-hero .cta-btns { flex-direction: column; align-items: stretch; width: min(320px, 100%); } .cta-hero .b-white, .cta-hero .b-line { justify-content: center; } }

/* ---------- carte i-GOLD : « demi-fenêtre » comme les Domaines (ni trait à droite ni en bas, elle sort de la page, le bas s'estompe) ---------- */
.map { border-right: 0; border-bottom: 0; border-radius: 28px 0 0 0; margin-right: calc((min(1160px, 92vw) - 100vw) / 2); min-height: clamp(420px, 48vw, 580px);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
.map-badge { right: auto; left: 16px; top: 16px; }
.map .maplibregl-ctrl-bottom-right { right: 18px; bottom: 58px; }
.map-note { left: 16px; bottom: 64px; }
@media (max-width: 960px) { .map { margin-right: calc((min(1160px, 92vw) - 100vw) / 2); border-radius: 24px 0 0 0; } }
.cta-kicker { background: rgba(24,12,4,.34); border-color: rgba(255,255,255,.35); }

/* bande savane : l'image naît du fond de la page (aucune coupure franche) */
.cta-sec.cta-hero { min-height: clamp(660px, 72vw, 900px); padding-top: clamp(120px, 15vw, 210px); background: var(--bg); }
.cta-hero::before { background:
  linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 40%, transparent) 20%, transparent 36%),
  linear-gradient(180deg, rgba(24,12,4,0) 16%, rgba(24,12,4,.46) 40%, rgba(24,12,4,.2) 58%, rgba(24,12,4,0) 72%); }
[data-theme="dark"] .cta-hero::before { background:
  linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 40%, transparent) 20%, transparent 36%),
  linear-gradient(180deg, rgba(8,5,2,0) 16%, rgba(8,5,2,.56) 40%, rgba(8,5,2,.24) 58%, rgba(8,5,2,0) 72%); }
.cta-kicker { background: rgba(24,12,4,.5); border-color: rgba(255,255,255,.4); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 760px) { .cta-sec.cta-hero { min-height: 700px; padding-top: 120px; } }

/* ---------- domaines, profils et points i-GOLD ---------- */
.dom { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; margin-top: 56px; align-items: start; }
.dom-tabs { display: grid; gap: 6px; }
.dom-tabs button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 1px solid transparent; border-radius: 14px; background: none; text-align: left; font-size: 15px; font-weight: 600; color: var(--muted); transition: background .25s, color .25s, border-color .25s; }
.dom-tabs button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dom-tabs button:hover { color: var(--text); background: var(--alt); }
.dom-tabs button[aria-selected="true"] { color: var(--text); background: var(--card); border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.dom-tabs button[aria-selected="true"] svg { color: var(--gold); }
.dom-panels { border: 1px solid var(--line); border-radius: 28px; background: var(--card); padding: clamp(22px, 3vw, 40px); }
.dom-panel header { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.dom-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--gold-soft); color: var(--gold); flex: none; }
.dom-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dom-panel h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; }
.dom-panel header p { color: var(--muted); margin-top: 2px; }
.dom-panel:not([hidden]) .dom-col { animation: dom-in .5s var(--ease) both; } .dom-panel:not([hidden]) .dom-col.sell { animation-delay: .08s; }
@keyframes dom-in { from { opacity: 0; transform: translateY(12px); } }
.dom-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dom-col h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.role { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.buy .role, .role-tag.buy { background: var(--accent-soft); color: var(--accent); }
.sell .role, .role-tag.sell { background: var(--gold-soft); color: color-mix(in srgb, var(--gold) 82%, var(--text)); }
.dom-col li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 500; }
.dom-col li:first-child { border-top: 0; }

.prof { margin-top: 48px; --pc: var(--accent); }
.prof[data-mode="sell"] { --pc: var(--gold); }
.prof-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 680px; margin: 0 auto 44px; border-bottom: 1px solid var(--line); }
.prof-switch button { display: grid; gap: 3px; padding: 4px 0 18px; border: 0; background: none; text-align: center; color: var(--muted); transition: color .3s; }
.prof-switch button b { font-size: clamp(18px, 2vw, 22px); letter-spacing: -.02em; } .prof-switch button span { font-size: 13px; }
.prof-switch button[aria-selected="true"] { color: var(--text); }
.prof-knob { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--pc); transition: transform .5s var(--ease), background .3s; }
.prof[data-mode="sell"] .prof-knob { transform: translateX(100%); }

.journey:not([hidden]) .jstep { animation: j-in .55s var(--ease) both; }
.journey:not([hidden]) .jstep:nth-child(2) { animation-delay: .08s; } .journey:not([hidden]) .jstep:nth-child(3) { animation-delay: .16s; } .journey:not([hidden]) .jstep:nth-child(4) { animation-delay: .24s; }
@keyframes j-in { from { opacity: 0; transform: translateY(16px); } }
.jsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jstep { padding: 4px 26px 8px; border-left: 1px solid var(--line); text-align: left; }
.jstep:first-child { padding-left: 0; border-left: 0; } .jstep:last-child { padding-right: 0; }
.jn { display: block; margin-bottom: 30px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--pc); }
.jstep h3 { font-size: 21px; letter-spacing: -.03em; } .jstep > p { margin: 6px 0 22px; max-width: 250px; color: var(--muted); font-size: 14.5px; }
.mock { display: grid; gap: 12px; align-content: start; min-height: 196px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; }
.mock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mock small { color: var(--muted); font-size: 12px; }
.mk-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mk-input { display: flex; align-items: center; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.m-txt { display: block; overflow: hidden; white-space: nowrap; width: 0; animation: m-type 3.6s steps(26) .5s infinite; }
@keyframes m-type { 0% { width: 0; } 45%, 85% { width: 168px; } 100% { width: 0; } }
.m-caret { flex: none; width: 1.5px; height: 15px; background: var(--text); animation: caret 1s steps(1) infinite; margin-left: -6px; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 6px; } .mk-tags span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px; color: var(--muted); }
.mk-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.mk-row b { display: block; font-size: 13px; } .mk-row em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-row.is-best { border-color: var(--text); } .mk-row u { text-decoration: none; font-weight: 600; color: var(--accent); }
.mk-ph { width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--line) 0 1.5px, transparent 1.5px 7px); }
.mk-dl { display: grid; gap: 7px; margin: 0; } .mk-dl > div { display: flex; justify-content: space-between; gap: 10px; } .mk-dl dt { color: var(--muted); } .mk-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-dl .tot { margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--line); } .mk-dl .tot dt, .mk-dl .tot dd { color: var(--text); font-weight: 700; }
.mk-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; }
.mk-tl { display: grid; gap: 12px; margin: 2px 0 0; padding-left: 0; position: relative; }
.mk-tl::before { content: ""; position: absolute; left: 4.5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.mk-tl li { position: relative; display: flex; align-items: center; gap: 12px; color: var(--muted); } .mk-tl li small { margin-left: auto; font-variant-numeric: tabular-nums; }
.mk-tl i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); flex: none; }
.mk-tl .done, .mk-tl .now { color: var(--text); } .mk-tl .done i { background: var(--pc); border-color: var(--pc); }
.mk-tl .now i { border-color: var(--pc); animation: m-pulse 2s ease-out infinite; }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.mk-field { padding-bottom: 7px; border-bottom: 1px solid var(--line); } .mk-field small { display: block; } .mk-field span { font-size: 13.5px; font-weight: 500; }
.mk-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mk-photos span { aspect-ratio: 1.25; border-radius: 6px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--line) 0 1.5px, transparent 1.5px 7px); }
.mk-photos .add { display: grid; place-items: center; border-style: dashed; background: none; font-size: 18px; color: var(--muted); }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mk-two span { padding: 10px; text-align: center; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; } .mk-two .ok { background: var(--text); color: var(--bg); border-color: var(--text); }
.mk-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; } .mk-bar i { display: block; height: 100%; width: 100%; background: var(--pc); transform-origin: left; animation: m-fill 3.4s var(--ease) infinite; }
@keyframes m-fill { 0% { transform: scaleX(.1); } 70%, 100% { transform: scaleX(.8); } }
.mk-amount { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-okline { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; } .mk-okline svg { stroke-width: 2.6; }
@media (max-width: 960px) { .jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .jstep:nth-child(3) { padding-left: 0; border-left: 0; } .jstep:nth-child(2) { padding-right: 0; } }
@media (max-width: 620px) { .jsteps { grid-template-columns: 1fr; } .jstep, .jstep:first-child, .jstep:nth-child(3) { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); } .jstep:first-child { border-top: 0; padding-top: 4px; } .prof-switch button span { display: none; } .jstep > p { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .m-txt { animation: none; width: auto; } .m-caret, .mk-tl .now i, .mk-bar i { animation: none; } }

.igold { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.igold-copy h2 { margin-bottom: 4px; }
.tiers { display: grid; gap: 12px; margin-top: 28px; }
.tiers li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.tier-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; }
.tier-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-diamond { background: rgba(15,183,126,.14); color: #0a9a68; } .t-gold { background: rgba(224,168,46,.16); color: #b8801a; } .t-silver { background: rgba(139,151,168,.18); color: #6b7788; }
[data-theme="dark"] .t-diamond { color: #34d399; } [data-theme="dark"] .t-gold { color: #e9b94a; } [data-theme="dark"] .t-silver { color: #a6b0bf; }
.tiers b { display: block; font-size: 16px; } .tiers span { color: var(--muted); font-size: 14px; }
.map { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; min-height: clamp(380px, 46vw, 540px); background: #eef0f2; }
[data-theme="dark"] .map { background: #1f2329; }
#igold-map { position: absolute; inset: 0; }
.map .maplibregl-ctrl-attrib { font-size: 10px; }
.gm { width: 40px; height: 30px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); cursor: pointer; transition: transform .25s var(--ease); }
.gm:hover { transform: translateY(-3px) scale(1.1); }
.gm-in { position: relative; width: 100%; height: 26px; display: grid; place-items: center; background: #fff; border: 2px solid #1b1b1f; border-radius: 8px; }
.gm-in::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 8px; height: 8px; margin-left: -4px; background: #fff; border-right: 2px solid #1b1b1f; border-bottom: 2px solid #1b1b1f; transform: rotate(45deg) translate(-1px, -1px); }
.gm-in svg { width: 26px; height: 17px; }
[data-theme="dark"] .gm-in, [data-theme="dark"] .gm-in::after { background: #1b1c1f; border-color: #e9e4d6; }
.map .maplibregl-popup-content { padding: 12px 14px; border-radius: 14px; font-family: inherit; color: #17140f; min-width: 170px; }
.gp-n { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; } .gp-t { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(226,180,67,.2); color: #8a5a10; } .gp-a { display: block; margin-top: 6px; font-size: 13px; color: #555; } .gp-l { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #0a8f5d; }
.map-note { position: absolute; left: 16px; bottom: 16px; z-index: 2; max-width: calc(100% - 32px); margin: 0; padding: 7px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.map-badge { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 28px -14px rgba(0,0,0,.4); }
.map-badge b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--gold); } .map-badge span { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 960px) {
  .dom { grid-template-columns: 1fr; }
  .dom-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .dom-tabs::-webkit-scrollbar { display: none; }
  .dom-tabs button { width: auto; flex: none; padding: 10px 14px; border-color: var(--line); } .dom-tabs button span { white-space: nowrap; }
  .igold { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .dom-cols { grid-template-columns: 1fr; gap: 22px; } .sw-track { width: 200px; } .map { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) {  .pin, .pin-in { opacity: 1; transform: none; } .dom-panel:not([hidden]) .dom-col { animation: none; } }

/* ---------- repères de la carte : goutte pleine couleur + pictogramme blanc (plus de badge brillant) */
.gm { position: relative; width: 36px; height: 44px; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); transition: transform .25s var(--ease); }
.gm:hover { transform: translateY(-3px) scale(1.08); }
.gm-pin { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%; border: 2.5px solid #fff; box-sizing: border-box; top: 4px; }
[data-theme="dark"] .gm-pin { border-color: #17181a; }
.gm-ic { position: absolute; left: 8px; top: 10px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gmw { width: 36px; height: 44px; }

/* (ré-appliqué en fin de fichier : doit l'emporter sur le bloc généré) */
/* ---------- carte i-GOLD : « demi-fenêtre » comme les Domaines (ni trait à droite ni en bas, elle sort de la page, le bas s'estompe) ---------- */
.map { border-right: 0; border-bottom: 0; border-radius: 28px 0 0 0; margin-right: calc((min(1160px, 92vw) - 100vw) / 2); min-height: clamp(420px, 48vw, 580px);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
.map-badge { right: auto; left: 16px; top: 16px; }
.map .maplibregl-ctrl-bottom-right { right: 18px; bottom: 58px; }
.map-note { left: 16px; bottom: 64px; }
@media (max-width: 960px) { .map { margin-right: calc((min(1160px, 92vw) - 100vw) / 2); border-radius: 24px 0 0 0; } }
.cta-kicker { background: rgba(24,12,4,.34); border-color: rgba(255,255,255,.35); }

/* bande savane : l'image naît du fond de la page (aucune coupure franche) */
.cta-sec.cta-hero { min-height: clamp(660px, 72vw, 900px); padding-top: clamp(120px, 15vw, 210px); background: var(--bg); }
.cta-hero::before { background:
  linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 40%, transparent) 20%, transparent 36%),
  linear-gradient(180deg, rgba(24,12,4,0) 16%, rgba(24,12,4,.46) 40%, rgba(24,12,4,.2) 58%, rgba(24,12,4,0) 72%); }
[data-theme="dark"] .cta-hero::before { background:
  linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 9%, color-mix(in srgb, var(--bg) 40%, transparent) 20%, transparent 36%),
  linear-gradient(180deg, rgba(8,5,2,0) 16%, rgba(8,5,2,.56) 40%, rgba(8,5,2,.24) 58%, rgba(8,5,2,0) 72%); }
.cta-kicker { background: rgba(24,12,4,.5); border-color: rgba(255,255,255,.4); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 760px) { .cta-sec.cta-hero { min-height: 700px; padding-top: 120px; } }

/* ---------- domaines : pas d'ombre, carte de droite « fenêtre à moitié ouverte » (ni trait à droite ni en bas, elle sort de la page) ---------- */
.dom-tabs button[aria-selected="true"] { box-shadow: none; }
.dom-panels { border-right: 0; border-bottom: 0; border-radius: 28px 0 0 0; margin-right: calc((min(1160px, 92vw) - 100vw) / 2); padding-right: calc(clamp(22px, 3vw, 40px) + (100vw - min(1160px, 92vw)) / 2);
  padding-bottom: 64px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent); }
@media (max-width: 960px) {
  .dom-panels { margin-right: calc((min(1160px, 92vw) - 100vw) / 2); border-radius: 24px 0 0 0; }
}

/* ---------- pied de page : pleine largeur (on garde les lignes), colonne « Nous écrire » ---------- */
.footer .wrap { width: 100%; max-width: none; margin: 0; border-inline: 0; }
.node-row { display: none; }
.f-logo-row, .f-col, .f-bottom { padding-inline: clamp(20px, 4vw, 64px); }
.f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.9fr); }
.f-contact { border-left: 1px solid var(--grid); }
.f-lead { margin: 0 0 22px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.f-form { display: grid; gap: 4px; max-width: 520px; }
.f-form .f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f-form input, .f-form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; background: transparent; color: #f5f5f5; font: inherit; font-size: 15px; outline: none; resize: none; transition: border-color .25s; }
.f-form textarea { min-height: 64px; }
.f-form input::placeholder, .f-form textarea::placeholder { color: #8c8c95; }
.f-form input:focus, .f-form textarea:focus { border-bottom-color: #ecc660; }
.f-form .f-err { border-bottom-color: #e5484d; }
.f-send { justify-self: start; margin-top: 18px; padding: 12px 24px; border: 0; border-radius: 10px; background: #fff; color: #111; font-size: 15px; font-weight: 600; transition: transform .25s var(--ease), background .2s; }
.f-send:hover { transform: translateY(-2px); background: #f6e3b2; }
.f-hint { margin: 14px 0 0; font-size: 12.5px; color: #8c8c95; }
@media (max-width: 1180px) { .f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .f-contact { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--grid); } .f-form { max-width: 640px; } }
@media (max-width: 760px) { .f-contact { border-top: 1px solid var(--grid); } .f-form .f-two { grid-template-columns: 1fr; gap: 0; } }

/* bande savane en mode sombre : plus lumineuse, transition courte, plus de trait net ; texte de la pastille lisible */
[data-theme="dark"] .dark-zone { border-top: 0; }
.cta-hero .cta-left .cta-kicker { color: #fff; }
[data-theme="dark"] .cta-hero::before { background:
  linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 70%, transparent) 7%, color-mix(in srgb, var(--bg) 24%, transparent) 15%, transparent 27%),
  linear-gradient(180deg, rgba(8,5,2,0) 20%, rgba(8,5,2,.34) 40%, rgba(8,5,2,.14) 58%, rgba(8,5,2,0) 72%); }
[data-theme="dark"] .cta-hero-bg { filter: saturate(1.05) brightness(1.08); }

/* pied de page mobile : deux colonnes, contact en pleine largeur, rien ne déborde */
@media (max-width: 760px) {
  .f-cols { grid-template-columns: 1fr 1fr; }
  .f-col, .f-col + .f-col { padding-inline: clamp(16px, 5vw, 28px); min-width: 0; }
  .f-col:nth-child(odd) { border-left: 0; } .f-col:nth-child(n+3) { border-top: 1px solid var(--grid); }
  .f-contact { grid-column: 1 / -1; border-left: 0; }
  .f-col li a, .f-plain { overflow-wrap: anywhere; }
  .f-bottom { flex-direction: column; align-items: flex-start; }
}

/* bande savane, mode sombre : l'image se fond dans le noir par un fondu d'opacité long et progressif (plus de bande noire ni de gris boueux) */
[data-theme="dark"] .cta-hero-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.04) 8%, rgba(0,0,0,.14) 16%, rgba(0,0,0,.34) 26%, rgba(0,0,0,.62) 37%, rgba(0,0,0,.88) 48%, #000 58%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.04) 8%, rgba(0,0,0,.14) 16%, rgba(0,0,0,.34) 26%, rgba(0,0,0,.62) 37%, rgba(0,0,0,.88) 48%, #000 58%); }
[data-theme="dark"] .cta-hero::before { background: linear-gradient(180deg, rgba(8,5,2,0) 22%, rgba(8,5,2,.38) 42%, rgba(8,5,2,.16) 60%, rgba(8,5,2,0) 74%); }
[data-theme="dark"] .cta-sec.cta-hero { background: var(--bg); }

/* sécurité : une seule carte de visuel (recharge) */
.sec-visuals { grid-template-columns: minmax(0, 760px); justify-content: center; }
/* bande savane, mode sombre : le fondu part de zéro AVANT le bord de la bande (plus de marche visible) */
[data-theme="dark"] .cta-hero-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 13%, rgba(0,0,0,.03) 18%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.3) 34%, rgba(0,0,0,.58) 43%, rgba(0,0,0,.85) 52%, #000 62%); mask-image: linear-gradient(180deg, transparent 0, transparent 13%, rgba(0,0,0,.03) 18%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.3) 34%, rgba(0,0,0,.58) 43%, rgba(0,0,0,.85) 52%, #000 62%); }

.lang-switch[hidden] { display: none; }

/* illustrations des services, mode sombre : les objets restent « physiques » (corps crème, contours encre, or et vert) comme en mode clair ; seuls les traits posés sur le fond passent en crème */
.ill { --bgink: #17140f; }
[data-theme="dark"] .ill { --ink: #17140f; --paper: #efe7d4; --shade: #17140f; --g: #e0a82e; --a: #17b07a; --c: #e06a55; --bgink: #efe8da; }
.ill .o.gnd, .ill .road, .ill .speed, .ill .steam, .ill-pay .ray, .ill .ecg { stroke: var(--bgink); }
.ill .skyline { stroke: color-mix(in srgb, var(--bgink) 24%, transparent); }
.ill .speed { stroke: color-mix(in srgb, var(--bgink) 42%, transparent); }
.ill .steam { stroke: color-mix(in srgb, var(--bgink) 55%, transparent); }

/* illustrations des services, mode sombre : le dessin garde son fond pastel d'origine (légèrement atténué), le texte de la carte reste sombre — plus de formes noires qui se fondent dans le panneau */
[data-theme="dark"] .ill { --ink: #17140f; --paper: #fffaf0; --shade: #17140f; --g: #e8b64a; --a: #1dc98a; --c: #ec6a55; --bgink: #17140f; }
[data-theme="dark"] .bento .b-pay .b-art, [data-theme="dark"] .bento .b-liv .b-art, [data-theme="dark"] .bento .b-edu .b-art { background-color: #f1ebdd; }
[data-theme="dark"] .bento .b-tra .b-art, [data-theme="dark"] .bento .b-san .b-art, [data-theme="dark"] .bento .b-tou .b-art { background-color: #dcece3; }
[data-theme="dark"] .bento .b-imm .b-art, [data-theme="dark"] .bento .b-ali .b-art { background-color: #f1e3c4; }
[data-theme="dark"] .bento .b .b-art { filter: brightness(.9) saturate(.96); }
[data-theme="dark"] .bento .b.in:hover .b-art { filter: brightness(.97) saturate(1); }
[data-theme="dark"] .b-text { border-top-color: rgba(255,255,255,.18); }