/* ========================================================== */
/* VIRAGE.MA — Complete stylesheet                             */
/* ========================================================== */

/* ---------- Design tokens ---------- */
:root {
    --noir-route: #0F1115;
    --noir-route-soft: #1A1D23;
    --ocre-marrakchi: #C47B2A;
    --ocre-dark: #9E6220;
    --papier-sable: #F2ECDE;
    --papier-sable-soft: #FAF6EC;
    --rouge-frein: #C1432A;
    --blanc: #FFFFFF;
    --gris-ligne: rgba(15, 17, 21, 0.08);
    --gris-ligne-sombre: rgba(242, 236, 222, 0.12);

    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);

    --container-pad: 24px;
    --section-pad: 96px;
}

@media (min-width: 1025px) {
    :root {
        --container-pad: 48px;
        --section-pad: 140px;
    }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--noir-route);
    background: var(--papier-sable);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* Focus styles */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
    outline: 2px solid var(--ocre-marrakchi);
    outline-offset: 2px;
}

/* ---------- TOP NAVIGATION (64px) ----------
   Transparent over the hero, solid Noir Route when scrolled.
   Always fixed at top; always visible.
---------------------------------------------- */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 84px;
    background: transparent;
    border-bottom: 0.5px solid transparent;
    transition: background-color 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}
@media (max-width: 768px) {
    .topnav { height: 72px; }
}
@media (max-width: 480px) {
    .topnav { height: 64px; }
}
.topnav.is-scrolled {
    background: var(--noir-route);
    border-bottom-color: rgba(242, 236, 222, 0.08);
}
/* Three-zone topnav using a positioning trick:
   - Inner is a relative flex row with the WhatsApp CTA on the right (margin-left:auto).
   - Logo is absolutely anchored to the LEFT edge of the bar.
   - Language dropdown is absolutely centered using left:50% + translateX(-50%),
     so it sits in the TRUE center of the navbar regardless of logo or CTA width.
   This guarantees: logo flush left, dropdown perfectly centered, CTA flush right. */
.topnav__inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: visible;
}
.topnav__inner > .topnav__logo--brand {
    position: absolute;
    left: var(--container-pad, 24px);
    top: 0;
    bottom: 0;
}
.topnav__inner > .lang-dropdown {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.topnav__inner > .topnav__cta {
    margin-left: auto;
    position: relative;
    z-index: 1;
}
/* Hide the legacy nav links list — they were never shown on this layout
   anyway, but make sure they don't take any horizontal space. */
.topnav__inner > .topnav__links { display: none; }
.topnav__logo {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--papier-sable);
    transition: color 200ms var(--ease-premium);
    flex-shrink: 0;
    text-decoration: none;
}
.topnav__logo:hover { color: var(--ocre-marrakchi); }

/* Brand-logo variant of the topnav anchor: houses the full SVG wordmark
   + switchback line + dot. Sized to fit comfortably inside the 64px bar. */
.topnav__logo--brand {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0;
    line-height: 0;
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    z-index: 2;
}
/* Override the global img { max-width: 100% } so the brand can render at its
   designed size and overflow the (narrow) flex slot horizontally without
   being clipped to the slot width. */
.topnav__logo--brand .topnav-brand {
    max-width: none !important;
    width: auto !important;
    height: auto;
    flex-shrink: 0;
}

/* ==========================================================
   TOPNAV BRAND LOGO — Virage logo image (PNG, transparent)
   Sized to fit the 64px navbar; larger variant in footer.
   ========================================================== */
.topnav-brand {
    display: block !important;
    height: 130px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 230px;
    object-fit: contain;
    margin-top: -32px;
    margin-bottom: -32px;
    margin-left: 0;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    transition: transform 0.25s var(--ease-premium, ease-out), filter 0.25s ease-out;
}
/* Mobile: keep the visible wordmark roughly the same height as the WhatsApp
   pill on the right (~32–36px). The PNG has ~30% transparent padding top/bottom,
   so an image height of ~110px renders ~34px of visible artwork. The negative
   top/bottom margins absorb that padding without changing the navbar height.
   No negative left margin — the PNG already has internal padding so the "V" stays
   inside the visible area. Width must be forced (with !important) to override
   the global `img { max-width: 100% }` rule. */
@media (max-width: 768px) {
    .topnav-brand {
        height: 95px !important;
        max-width: 175px !important;
        min-width: 0 !important;
        width: auto !important;
        margin-top: -25px;
        margin-bottom: -25px;
        margin-left: 0;
    }
}
@media (max-width: 480px) {
    .topnav-brand {
        height: 82px !important;
        max-width: 150px !important;
        margin-top: -21px;
        margin-bottom: -21px;
        margin-left: 0;
    }
}
@media (max-width: 380px) {
    .topnav-brand {
        height: 72px !important;
        max-width: 130px !important;
        margin-top: -18px;
        margin-bottom: -18px;
        margin-left: 0;
    }
}
.topnav__logo:hover .topnav-brand,
.topnav__logo:focus-visible .topnav-brand {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* Pull the entire logo link slightly left so the PNG's internal left padding
   doesn't waste space against the container edge. This is applied to the
   anchor (not the image), so the visible artwork can never be clipped
   regardless of intrinsic image padding. */
.topnav__inner > .topnav__logo--brand { margin-left: -8px; }

/* Mobile: anchor the brand link closer to the viewport's left edge by
   overriding the absolute `left` (which uses --container-pad = 24/16/12 px)
   with a smaller offset, plus a stronger negative margin to nudge the
   visible "V" toward the left corner. */
@media (max-width: 768px) {
    .topnav__inner > .topnav__logo--brand {
        left: 8px;
        margin-left: -10px;
    }
}
@media (max-width: 480px) {
    .topnav__inner > .topnav__logo--brand {
        left: 4px;
        margin-left: -12px;
    }
}
@media (max-width: 380px) {
    .topnav__inner > .topnav__logo--brand {
        left: 2px;
        margin-left: -14px;
    }
}

/* Footer variant — bigger and bolder so the brand anchors the footer */
.footer-brand {
    height: 110px;
    max-width: 320px;
    margin-bottom: 10px;
    margin-left: -8px; /* compensate for the PNG's internal left padding */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
@media (max-width: 600px) {
    .footer-brand { height: 130px; max-width: 320px; }
}

.topnav-brand__letter {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: 0;
    fill: var(--ocre-marrakchi);
    opacity: 0;
    transform: translateY(10px);
    transform-box: fill-box;
    transform-origin: center;
    animation: topnavBrandLetterIn 0.6s var(--ease-premium) forwards;
}
.topnav-brand__letter:nth-child(1) { animation-delay: 0.20s; }
.topnav-brand__letter:nth-child(2) { animation-delay: 0.26s; }
.topnav-brand__letter:nth-child(3) { animation-delay: 0.32s; }
.topnav-brand__letter:nth-child(4) { animation-delay: 0.38s; }
.topnav-brand__letter:nth-child(5) { animation-delay: 0.44s; }
.topnav-brand__letter:nth-child(6) { animation-delay: 0.50s; }
@keyframes topnavBrandLetterIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Switchback road — matches brand-logo.html exactly */
.topnav-brand__switchback {
    fill: none;
    stroke: var(--ocre-marrakchi);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: topnavBrandDraw 2.4s var(--ease-draw) 0.9s forwards;
}
@keyframes topnavBrandDraw {
    0%   { stroke-dashoffset: 720; }
    100% { stroke-dashoffset: 0; }
}

/* Destination dot — pops at the end of the line */
.topnav-brand__dot {
    fill: var(--ocre-marrakchi);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: topnavBrandDotPop 0.5s var(--ease-premium) 3.1s forwards;
}
@keyframes topnavBrandDotPop {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Soft pulse ring around the dot (infinite, subtle) */
.topnav-brand__dot-ring {
    fill: none;
    stroke: var(--ocre-marrakchi);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: topnavBrandDotRing 2.4s ease-out 3.4s infinite;
}
@keyframes topnavBrandDotRing {
    0%   { opacity: 0.7; transform: scale(0.5); }
    100% { opacity: 0;   transform: scale(2.4); }
}

/* Ochre car — visible almost immediately, drives the switchback in a loop. */
.topnav-brand__car {
    opacity: 0;
    animation: topnavBrandCarFadeIn 0.2s ease-out 0.15s forwards;
}
@keyframes topnavBrandCarFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Car removed from topnav logo — was parking on the curve between laps
   and creating a yellow shape artifact. Keep the logo minimal. */
.topnav-brand__car {
    display: none !important;
}

/* Hover: subtle brightness lift on the whole mark */
.topnav__logo--brand:hover .topnav-brand__letter,
.topnav__logo--brand:focus-visible .topnav-brand__letter {
    fill: var(--ocre-glow, #E09347);
}
/* Switchback is a stroke-only path — never fill it on hover (would create a yellow shape). */
.topnav__logo--brand:hover .topnav-brand__switchback,
.topnav__logo--brand:focus-visible .topnav-brand__switchback {
    stroke: var(--ocre-glow, #E09347);
    fill: none;
    transition: stroke 200ms;
}
.topnav__logo--brand:hover .topnav-brand__dot,
.topnav__logo--brand:focus-visible .topnav-brand__dot {
    fill: var(--ocre-glow, #E09347);
    transition: fill 200ms;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .topnav-brand__letter     { opacity: 1; transform: none; animation: none; }
    .topnav-brand__switchback { stroke-dashoffset: 0;       animation: none; }
    .topnav-brand__dot        { opacity: 1; transform: none; animation: none; }
    .topnav-brand__dot-ring   { display: none; }
    .topnav-brand__car        { display: none; }
}

/* Mobile: slightly smaller */
@media (max-width: 767px) {
    .topnav-brand { height: 36px; }
}

/* ==========================================================
   BRAND LOGO — "The Risky Turn"
   An ochre hairpin line draws itself under the VIRAGE wordmark
   on page-load, replays on hover. Reusable component.
   Scales from parent font-size so it works in nav AND footer.
   ========================================================== */
.brand-logo {
    position: relative;
    display: inline-block;
    padding-bottom: 0.35em; /* room for the swoop below baseline */
    line-height: 1;
    white-space: nowrap;
}
.brand-logo__swoop {
    position: absolute;
    left: -0.25em;
    right: -0.25em;
    bottom: -0.18em;
    width: calc(100% + 0.5em);
    height: 0.7em;
    overflow: visible;
    pointer-events: none;
    display: block;
}
.brand-logo__swoop path.brand-logo__track {
    fill: none;
    stroke: var(--ocre-marrakchi);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: brandTurnDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
/* The little ochre car that drives along the curve.
   Starts invisible, fades in just as the line reaches it,
   parks at the destination. */
.brand-logo__car {
    opacity: 0;
    animation: brandCarFadeIn 0.4s ease-out 0.8s forwards;
}
/* Replay on hover: restart both the line and the car */
.brand-logo:hover .brand-logo__swoop path.brand-logo__track,
.brand-logo:focus-visible .brand-logo__swoop path.brand-logo__track {
    animation: brandTurnDraw 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.brand-logo:hover .brand-logo__car,
.brand-logo:focus-visible .brand-logo__car {
    animation: brandCarFadeIn 0.3s ease-out forwards;
}
@keyframes brandTurnDraw {
    0%   { stroke-dashoffset: 280; }
    100% { stroke-dashoffset: 0; }
}
@keyframes brandCarFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .brand-logo__swoop path.brand-logo__track {
        stroke-dashoffset: 0;
        animation: none;
    }
    .brand-logo__car { opacity: 1; animation: none; }
}

.topnav__links {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.topnav__links a {
    font-size: 14px;
    font-weight: 400;
    color: rgba(242, 236, 222, 0.75);
    letter-spacing: -0.005em;
    transition: color 200ms var(--ease-premium);
    position: relative;
    padding-bottom: 2px;
}
/* Underline reveal: left → right, 200ms */
.topnav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--ocre-marrakchi);
    transition: width 260ms var(--ease-premium);
}
.topnav__links a:hover::after { width: 100%; }
.topnav__links a:hover { color: var(--papier-sable); }
html[dir="rtl"] .topnav__links a::after { left: auto; right: 0; }

.topnav__cta {
    padding: 10px 18px;
    font-size: 13px;
    background: transparent;
    color: var(--papier-sable);
    border: 0.5px solid rgba(242, 236, 222, 0.35);
    flex-shrink: 0;
    white-space: nowrap;
    transition: background-color 200ms var(--ease-premium),
                color 200ms var(--ease-premium),
                border-color 200ms var(--ease-premium),
                box-shadow 200ms var(--ease-premium);
}
/* WhatsApp green hover — official WhatsApp brand green (#25D366). */
.topnav__cta:hover,
.topnav__cta:focus-visible {
    background: #25D366;
    color: #FFFFFF;
    border-color: #25D366;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* ---------- Language dropdown (Virage variant — FR · EN · ES · DE · AR) ---------- */
.lang-dropdown--virage {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0;
    font-family: inherit;
}

.lang-dropdown--virage .lang-dropdown__trigger {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 9px;
    background: rgba(242, 236, 222, 0.04);
    border: 1px solid rgba(242, 236, 222, 0.14);
    border-radius: 999px;
    color: var(--papier-sable);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: background 200ms var(--ease-premium),
                border-color 200ms var(--ease-premium),
                color 200ms var(--ease-premium);
}
.lang-dropdown--virage .lang-dropdown__trigger:hover {
    background: rgba(242, 236, 222, 0.08);
    border-color: rgba(242, 236, 222, 0.22);
}
.lang-dropdown--virage .lang-dropdown__trigger:focus-visible {
    outline: 2px solid var(--ocre-marrakchi);
    outline-offset: 2px;
}

.lang-dropdown--virage .lang-dropdown__globe,
.lang-dropdown--virage .lang-dropdown__caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}
.lang-dropdown--virage .lang-dropdown__caret {
    transition: transform 180ms var(--ease-premium);
}
.lang-dropdown--virage .lang-dropdown__trigger[aria-expanded="true"] .lang-dropdown__caret {
    transform: rotate(180deg);
}
.lang-dropdown--virage .lang-dropdown__current {
    min-width: 18px;
    text-align: center;
}

/* Menu */
.lang-dropdown--virage .lang-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #1a1d23;
    border: 1px solid rgba(242, 236, 222, 0.10);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
                0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 80;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 140ms var(--ease-premium), transform 140ms var(--ease-premium);
}
.lang-dropdown--virage .lang-dropdown__menu:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lang-dropdown--virage .lang-dropdown__menu li { margin: 0; padding: 0; }

.lang-dropdown--virage .lang-dropdown__menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: rgba(242, 236, 222, 0.78);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms var(--ease-premium), color 120ms var(--ease-premium);
}
.lang-dropdown--virage .lang-dropdown__menu button:hover,
.lang-dropdown--virage .lang-dropdown__menu button:focus-visible {
    background: rgba(242, 236, 222, 0.07);
    color: var(--papier-sable);
    outline: none;
}
.lang-dropdown--virage .lang-dropdown__menu button[aria-selected="true"] {
    background: rgba(196, 123, 42, 0.16);
    color: var(--ocre-marrakchi);
}
.lang-dropdown--virage .lang-dropdown__code {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(242, 236, 222, 0.50);
}
.lang-dropdown--virage .lang-dropdown__menu button[aria-selected="true"] .lang-dropdown__code {
    color: var(--ocre-marrakchi);
}
.lang-dropdown--virage .lang-dropdown__name {
    flex: 1;
    text-align: right;
}
.lang-dropdown--virage .lang-dropdown__menu button[lang="ar"] .lang-dropdown__name {
    font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
    font-size: 14px;
    direction: rtl;
}

/* RTL — Arabic active */
html[dir="rtl"] .lang-dropdown--virage {
    margin-right: 0;
    margin-left: 8px;
}
html[dir="rtl"] .lang-dropdown--virage .lang-dropdown__menu {
    right: auto;
    left: 0;
}
html[dir="rtl"] .lang-dropdown--virage .lang-dropdown__menu button { text-align: right; }
html[dir="rtl"] .lang-dropdown--virage .lang-dropdown__name { text-align: left; }

@media (min-width: 768px) {
    .topnav__links { display: flex; }
}
@media (max-width: 640px) {
    .topnav__cta { padding: 10px 14px; font-size: 12px; }
    .lang-dropdown--virage { margin-right: 6px; }
    .lang-dropdown--virage .lang-dropdown__trigger {
        padding: 6px 8px;
        font-size: 11.5px;
        gap: 4px;
    }
    .lang-dropdown--virage .lang-dropdown__globe,
    .lang-dropdown--virage .lang-dropdown__caret { width: 12px; height: 12px; }
    .lang-dropdown--virage .lang-dropdown__menu { min-width: 170px; }
}

/* ==========================================================
   LANGUAGE-SPECIFIC TYPOGRAPHY
   ========================================================== */
body.lang-ar {
    font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Keep numbers LTR even inside RTL context (dates, amounts, percentages) */
html[dir="rtl"] .hero__price,
html[dir="rtl"] .probleme__number,
html[dir="rtl"] .calculator__result-number,
html[dir="rtl"] .calculator__value,
html[dir="rtl"] .process__num,
html[dir="rtl"] .hero-proof__num,
html[dir="rtl"] .hero-calc__slider-value {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ==========================================================
   RTL ADJUSTMENTS
   Most layouts flip automatically thanks to flex + grid +
   logical properties. These rules fix a few edge cases where
   symbols or arrows are direction-specific.
   ========================================================== */

/* Flip the "→" arrow suffix in CTAs that contain it. We don't
   change the translated string (keeps copy stable across locales);
   we mirror the character on-screen for the RTL reading order. */
html[dir="rtl"] .hero__cta-row .btn--ghost-light,
html[dir="rtl"] .demo-site__cta,
html[dir="rtl"] .demo-mobile__cta {
    /* The glyph "→" already flips visually in most Arabic fonts; no CSS needed.
       Kept as a named hook for future overrides. */
}

/* Process step numbers sit on the left by default; in RTL, shift to the right */
html[dir="rtl"] .process__step {
    text-align: right;
}

/* Solution + garantie cards alignment */
html[dir="rtl"] .solution-card,
html[dir="rtl"] .garantie-card {
    text-align: right;
}

/* Footer columns + lists align right in RTL */
html[dir="rtl"] .footer__col,
html[dir="rtl"] .footer__links {
    text-align: right;
}

/* Hero proof dividers: borders flip sides automatically via grid;
   only the mobile 2×2 alternating-right-border rule needs mirroring. */
html[dir="rtl"] .hero-proof__item {
    border-right: 0;
    border-left: 0.5px solid rgba(242, 236, 222, 0.12);
}
html[dir="rtl"] .hero-proof__item:nth-child(2n) { border-left: 0; }
@media (min-width: 768px) {
    html[dir="rtl"] .hero-proof__item {
        border-left: 0.5px solid rgba(242, 236, 222, 0.12);
        border-right: 0;
    }
    html[dir="rtl"] .hero-proof__item:first-child { border-left: 0; }
    html[dir="rtl"] .hero-proof__item:last-child { border-left: 0.5px solid rgba(242, 236, 222, 0.12); }
    html[dir="rtl"] .hero-proof__item:nth-child(2n) { border-left: 0.5px solid rgba(242, 236, 222, 0.12); }
}

/* FAQ "+" icon sits on the right in LTR, should sit on the left in RTL */
html[dir="rtl"] .faq__q {
    flex-direction: row-reverse;
}

/* Compare arrow (if it ever returns) — not currently used */

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* ---------- Typography ---------- */
.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 40px;
}
.eyebrow--ocre { color: var(--ocre-marrakchi); }
.eyebrow--center { text-align: center; }

/* Arabic: eyebrow needs more weight and size — Arabic glyphs visually
   read smaller than Latin at the same px, and uppercase/letter-spacing
   don't apply to Arabic script. */
html[dir="rtl"] .eyebrow {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.h2 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--noir-route);
}
@media (min-width: 768px) {
    .h2 { font-size: 56px; }
}
.h2--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 800px; }
.h2--light { color: var(--papier-sable); }

/* Thin ochre line that draws itself beneath centered H2s when in view.
   Triggered by the .is-visible class added by the IntersectionObserver. */
.h2--line {
    position: relative;
    padding-bottom: 32px;
}
.h2--line::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--ocre-marrakchi);
    transform: translateX(-50%);
    transition: width 900ms var(--ease-draw) 200ms;
}
.h2--line.is-visible::after { width: 48px; }

.h3 {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 32px;
}

.h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.body { font-size: 16px; line-height: 1.6; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 0.5px solid transparent;
    transition:
        background-color 200ms var(--ease-premium),
        border-color    200ms var(--ease-premium),
        color           200ms var(--ease-premium),
        transform       200ms var(--ease-premium),
        box-shadow      200ms var(--ease-premium);
    white-space: nowrap;
    letter-spacing: -0.005em;
    will-change: transform;
}
/* Micro-interaction: small lift on hover, settle on active */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }

.btn--primary {
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
}
.btn--primary:hover {
    background: var(--ocre-dark);
    /* Soft ochre halo — 12% opacity, no drop-shadow feel */
    box-shadow: 0 6px 20px -8px rgba(196, 123, 42, 0.5);
}
.btn--danger-hover:hover { background: var(--rouge-frein); color: var(--papier-sable); box-shadow: 0 6px 20px -8px rgba(193, 67, 42, 0.45); }

.btn--ghost-light {
    background: transparent;
    color: var(--papier-sable);
    border-color: rgba(242, 236, 222, 0.3);
}
.btn--ghost-light:hover {
    background: rgba(242, 236, 222, 0.06);
    border-color: rgba(242, 236, 222, 0.55);
}

.btn--lg {
    padding: 16px 32px;
    font-size: 15px;
}

/* Attention pulse for the hero/final primary CTA when it enters view.
   Single 2s pulse, then stops — never loops (avoid looking like a broken site). */
.btn--pulse {
    animation: btnPulse 2.4s var(--ease-premium) 1 both;
}
@keyframes btnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 123, 42, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(196, 123, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 123, 42, 0); }
}

/* ---------- Scroll animations ---------- */
.fade-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .fade-up { opacity: 1; transform: none; }
}

/* ========================================================== */
/* SECTION 1 — HERO                                            */
/* ========================================================== */
.hero {
    position: relative;
    background: var(--noir-route);
    color: var(--papier-sable);
    padding-top: 84px; /* offset for fixed topnav */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clip the absolutely-positioned background video */
}
@media (max-width: 768px) {
    .hero { padding-top: 72px; }
}
@media (max-width: 480px) {
    .hero { padding-top: 64px; }
}

/* --- Split layout (55/45 desktop, stacked mobile) --- */
.hero-split {
    position: relative;
    z-index: 2; /* above .hero-video and .hero-overlay */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1025px) {
    .hero-split {
        grid-template-columns: 55fr 45fr;
        min-height: calc(92vh - 64px - 80px);
    }
}

.hero-split__content {
    position: relative; /* anchor for .hero-graphic--left absolute fill */
    padding: 64px var(--container-pad) 48px;
    max-width: 640px;
    width: 100%;
    justify-self: start;
    isolation: isolate; /* creates a local stacking context so the road never leaks behind sibling columns */
}
@media (min-width: 1025px) {
    .hero-split__content {
        padding: 80px var(--container-pad) 80px;
    }
}

/* Every direct child of the content column sits on z-index 1,
   ABOVE the road SVG (which sits on z-index 0). */
.hero-split__content > *:not(.hero-graphic--left) {
    position: relative;
    z-index: 1;
}

.hero-split__media {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: block;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero-split__media { min-height: 320px; }
}
@media (min-width: 1025px) {
    .hero-split__media { min-height: 520px; }
}
/* Mobile (<768px): right column hosts only the laptop mockup,
   which defines its own height. Let it size naturally. */
@media (max-width: 767px) {
    .hero-split__media {
        height: auto;
        min-height: 0;
        padding-bottom: 24px;
    }
}

/* ==========================================================
   HERO GRAPHIC — animated switchback SVG
   Fills the entire 45% right column, background matches hero.
   ========================================================== */
.hero-graphic {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0F1115;
    overflow: hidden;
}
.hero-graphic svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Left-column variant: the switchback SVG sits BEHIND the hero text
   as an ambient backdrop. A radial fade from the top-left keeps the
   headline area clear and readable, while the road/car still glow on
   the right edge, visually leading the eye toward the laptop mockup. */
.hero-graphic--left {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent; /* keep the hero's --noir-route visible */
    opacity: 0.55;
    pointer-events: none;
    /* Fade the road toward the top-left (where the eyebrow+H1 live) so
       text always reads cleanly, while the right-bottom stays vivid. */
    -webkit-mask-image: radial-gradient(
        ellipse 90% 80% at 85% 65%,
        #000 30%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.15) 85%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 90% 80% at 85% 65%,
        #000 30%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.15) 85%,
        transparent 100%
    );
}
.hero-graphic--left svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Mobile: keep the ambient road visible behind the text, but dim it
   a bit more and re-center the radial mask so the text stays readable
   on a narrow viewport. */
@media (max-width: 767px) {
    .hero-graphic--left {
        opacity: 0.32;
        -webkit-mask-image: radial-gradient(
            ellipse 110% 90% at 50% 60%,
            #000 25%,
            rgba(0, 0, 0, 0.6) 60%,
            rgba(0, 0, 0, 0.15) 85%,
            transparent 100%
        );
                mask-image: radial-gradient(
            ellipse 110% 90% at 50% 60%,
            #000 25%,
            rgba(0, 0, 0, 0.6) 60%,
            rgba(0, 0, 0, 0.15) 85%,
            transparent 100%
        );
    }
}
.hero-split__media {
    position: relative;
}

/* ==========================================================
   HERO TRUST ROW — stars + social proof above eyebrow
   ========================================================== */
.hero__trust-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin-bottom: 22px;
    background: rgba(196, 123, 42, 0.08);
    border: 1px solid rgba(196, 123, 42, 0.28);
    border-radius: 999px;
    font-size: 13px;
    color: var(--papier-sable);
}
.hero__trust-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero__trust-stars {
    display: inline-flex;
    gap: 1px;
}
.hero__trust-stars svg {
    width: 14px;
    height: 14px;
    fill: var(--ocre-marrakchi);
}
.hero__trust-rating strong {
    font-weight: 600;
    color: var(--papier-sable);
    letter-spacing: 0.01em;
}
.hero__trust-sep-dot {
    color: rgba(242, 236, 222, 0.4);
    font-weight: 700;
}
.hero__trust-text {
    color: rgba(242, 236, 222, 0.85);
    font-weight: 500;
}
@media (max-width: 480px) {
    .hero__trust-row { font-size: 12px; padding: 7px 12px; gap: 8px; }
    .hero__trust-stars svg { width: 12px; height: 12px; }
}

/* ==========================================================
   HERO LAPTOP MOCKUP — live preview of atlas-auto.html
   ========================================================== */
.hero-laptop {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 24px 40px;
    text-decoration: none;
    color: inherit;
    animation: laptopFloat 6s ease-in-out 1.2s infinite;
    transition: transform 400ms var(--ease-premium);
}
.hero-laptop:hover,
.hero-laptop:focus-visible {
    transform: translateY(-4px);
}
.hero-laptop:focus-visible {
    outline: 2px solid var(--ocre-marrakchi);
    outline-offset: 8px;
    border-radius: 12px;
}

/* "EXEMPLE LIVE" badge — floats top-left of the laptop */
.hero-laptop__badge {
    position: absolute;
    top: 12px;
    left: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(196, 123, 42, 0.35);
    transform: rotate(-3deg);
}
.hero-laptop__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0F1115;
    animation: laptopLiveDot 1.6s ease-in-out infinite;
}
@keyframes laptopLiveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.7); }
}

/* Laptop body — screen + base */
.hero-laptop__frame {
    position: relative;
    background: linear-gradient(180deg, #1C1F26 0%, #0F1115 100%);
    border: 1px solid rgba(242, 236, 222, 0.14);
    border-radius: 16px 16px 4px 4px;
    padding: 14px 14px 18px;
    box-shadow:
        0 2px 0 rgba(242, 236, 222, 0.06) inset,
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 10px 30px -10px rgba(196, 123, 42, 0.15);
}
.hero-laptop__notch {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    background: #0A0B0E;
    border-radius: 999px;
}
.hero-laptop__screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #0F1115;
    border-radius: 4px;
    overflow: hidden;
}
.hero-laptop__screen iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 0;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
}
/* Subtle glare over the iframe so it reads as "behind glass" */
.hero-laptop__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(0, 0, 0, 0) 70%,
        rgba(15, 17, 21, 0.18) 100%
    );
}

/* Laptop base / hinge */
.hero-laptop__base {
    position: relative;
    width: 118%;
    height: 14px;
    margin: 0 -9%;
    background: linear-gradient(180deg, #1C1F26 0%, #0A0B0E 100%);
    border-radius: 0 0 14px 14px;
    box-shadow:
        0 2px 0 rgba(242, 236, 222, 0.05) inset,
        0 20px 40px -12px rgba(0, 0, 0, 0.55);
}
.hero-laptop__hinge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 5px;
    background: #0A0B0E;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 1px 0 rgba(242, 236, 222, 0.06) inset;
}

/* "Voir le site live →" CTA under the laptop */
.hero-laptop__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ocre-marrakchi);
    transition: gap 300ms var(--ease-premium), color 300ms var(--ease-premium);
}
.hero-laptop__cta svg {
    width: 14px;
    height: 14px;
    transition: transform 300ms var(--ease-premium);
}
.hero-laptop:hover .hero-laptop__cta {
    gap: 10px;
    color: #E09347;
}
.hero-laptop:hover .hero-laptop__cta svg {
    transform: translate(2px, -2px);
}

/* ==========================================================
   HERO STAGE — laptop + overlapping phone mockup
   ========================================================== */
.hero-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.hero-stage .hero-laptop {
    /* Laptop becomes the canvas; phone overlaps its bottom-right corner */
    margin: 0 auto;
}

/* Phone mockup — absolutely positioned so it overlaps the laptop */
.hero-phone {
    position: absolute;
    right: -8px;
    bottom: -28px;
    z-index: 5;
    display: block;
    width: 28%;
    max-width: 150px;
    text-decoration: none;
    color: inherit;
    transform: rotate(-4deg);
    transition: transform 400ms var(--ease-premium);
    animation: phoneFloat 6.5s ease-in-out 1.6s infinite;
}
.hero-phone:hover,
.hero-phone:focus-visible {
    transform: rotate(-4deg) translateY(-4px) scale(1.02);
}
.hero-phone:focus-visible {
    outline: 2px solid var(--ocre-marrakchi);
    outline-offset: 6px;
    border-radius: 22px;
}

@keyframes phoneFloat {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-4deg) translateY(-6px); }
}

.hero-phone__frame {
    position: relative;
    background: linear-gradient(180deg, #1C1F26 0%, #0A0B0E 100%);
    border: 1.5px solid rgba(242, 236, 222, 0.18);
    border-radius: 22px;
    padding: 8px 6px;
    box-shadow:
        0 2px 0 rgba(242, 236, 222, 0.07) inset,
        0 30px 60px -18px rgba(0, 0, 0, 0.7),
        0 12px 28px -10px rgba(196, 123, 42, 0.22);
}
.hero-phone__notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 5px;
    background: #0A0B0E;
    border-radius: 999px;
    z-index: 2;
}
.hero-phone__screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19;
    background: #0F1115;
    border-radius: 16px;
    overflow: hidden;
}
.hero-phone__screen iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 250%;
    height: 250%;
    border: 0;
    transform: scale(0.4);
    transform-origin: 0 0;
    pointer-events: none;
}

/* Mobile: stack phone underneath instead of overlapping the corner,
   so neither device is squeezed off-screen on narrow viewports. */
@media (max-width: 767px) {
    .hero-stage {
        max-width: 480px;
    }
    .hero-phone {
        position: relative;
        right: auto;
        bottom: auto;
        width: 38%;
        max-width: 140px;
        margin: -12px auto 0;
        transform: rotate(-3deg);
    }
    @keyframes phoneFloat {
        0%, 100% { transform: rotate(-3deg) translateY(0); }
        50%      { transform: rotate(-3deg) translateY(-4px); }
    }
}

/* Smooth fade during demo switching */
.hero-stage.is-swapping .hero-laptop__screen,
.hero-stage.is-swapping .hero-phone__screen {
    opacity: 0.4;
    transition: opacity 220ms var(--ease-premium);
}

/* Trust pill sits under the laptop — center it inside the media column */
.hero-split__media .hero__trust-row {
    margin: 36px auto 0;
    justify-content: center;
}
@media (max-width: 767px) {
    .hero-split__media .hero__trust-row {
        margin-top: 26px;
    }
}

@keyframes laptopFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero-laptop,
    .hero-laptop__badge-dot { animation: none; }
}

/* Responsive sizing of the laptop inside the 45% column */
@media (max-width: 1024px) {
    .hero-laptop {
        max-width: 460px;
        padding: 24px 20px 32px;
    }
}
@media (max-width: 767px) {
    .hero-split__media {
        height: auto;
        min-height: 0;
    }
    .hero-laptop {
        max-width: 380px;
        padding: 16px 16px 24px;
    }
    .hero-laptop__badge {
        font-size: 9px;
        padding: 5px 10px;
    }
}

.path-primary {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: draw 3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

.path-secondary {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation: draw 3s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}

.path-tertiary {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: draw 3s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}

.dot {
    opacity: 0;
    animation: pop 0.5s ease-out 3.2s forwards;
}

.dot-ring {
    opacity: 0;
    transform-origin: 460px 60px;
    animation: ring 2s ease-out 3.5s infinite;
}

/* Ambient glow behind the destination dot.
   Fades in slightly before the dot pops (3.0s), then gently "breathes"
   forever so the arrival point feels alive without drawing focus. */
.dot-glow {
    opacity: 0;
    transform-origin: 460px 60px;
    animation:
        glowFadeIn 1s ease-out 3.0s forwards,
        glowBreathe 6s ease-in-out 4.2s infinite;
}

@keyframes glowFadeIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes glowBreathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

@keyframes pop {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ring {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* Car traveling the primary path (animateMotion handles position;
   this fades it in once the primary path has been drawn). */
.car {
    opacity: 0;
    animation: carFadeIn 0.4s ease-out 3.5s forwards;
}
@keyframes carFadeIn {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .path-primary, .path-secondary, .path-tertiary {
        stroke-dashoffset: 0;
        animation: none;
    }
    .dot {
        opacity: 1;
        animation: none;
    }
    .dot-ring {
        display: none;
    }
    /* Keep the glow visible — it's a static composition element, not motion */
    .dot-glow {
        opacity: 1;
        animation: none;
        transform: none;
    }
    /* Hide the car entirely when motion is reduced — static paths + dot tell the story */
    .car {
        display: none;
    }
}

.hero__title {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--papier-sable);
    margin: 0 0 24px;
}
@media (min-width: 768px) {
    .hero__title { font-size: 56px; }
}
@media (min-width: 1025px) {
    .hero__title { font-size: 64px; }
}

.hero__sub {
    font-size: 18px;
    color: rgba(242, 236, 222, 0.78);
    line-height: 1.5;
    margin: 0 0 32px;
    letter-spacing: -0.005em;
    max-width: 520px;
}
@media (min-width: 1025px) {
    .hero__sub { font-size: 20px; }
}

.hero__price {
    color: var(--ocre-marrakchi);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    text-decoration: none;
    background-image: linear-gradient(var(--ocre-marrakchi), var(--ocre-marrakchi));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 260ms var(--ease-premium), color 200ms var(--ease-premium);
    padding-bottom: 1px;
}
a.hero__price:hover { background-size: 100% 1px; }
html[dir="rtl"] a.hero__price { background-position: right bottom; }

.hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Mobile: stack the two hero CTAs vertically and center them so the
   secondary "Calculer mes pertes →" button reads as a balanced link,
   not awkwardly left-aligned under the primary WhatsApp button. */
@media (max-width: 767px) {
    .hero__cta-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .hero__cta-row .btn { width: 100%; max-width: 360px; }
    .hero__cta-row .btn--ghost-light {
        width: auto;
        background: transparent;
        border: 0;
        padding: 6px 8px;
    }
}

.hero__trust {
    margin: 28px 0 0;
    font-size: 13px;
    color: rgba(242, 236, 222, 0.45);
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 520px;
}
.hero__trust-sep {
    color: var(--ocre-marrakchi);
    opacity: 0.7;
    margin: 0 6px;
}

/* --- Hero background video (full-bleed, sits behind hero content) --- */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    background: var(--noir-route); /* fills any letterbox space on mobile */
    filter: brightness(0.7); /* darken for text readability */
}
/* Mobile: the source video is composed for desktop (16:9 horizontal),
   so cover-cropping it on a narrow viewport hides the important visuals.
   Switch to "contain" with a top alignment so the full frame is visible
   under the hero copy, and the dark backdrop fills the letterbox bands. */
@media (max-width: 768px) {
    .hero-video {
        object-fit: contain;
        object-position: center top;
        filter: brightness(0.55); /* stronger darkening since less of the frame is filled */
    }
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
}
/* Mobile: stronger gradient at top + bottom so hero copy and proof strip
   stay legible against whatever portion of the video is visible. */
@media (max-width: 768px) {
    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 17, 21, 0.55) 0%,
            rgba(15, 17, 21, 0.35) 35%,
            rgba(15, 17, 21, 0.55) 70%,
            rgba(15, 17, 21, 0.85) 100%
        );
    }
}

/* --- Proof strip (bottom of hero, 80px) --- */
.hero-proof {
    position: relative;
    z-index: 2; /* above .hero-video and .hero-overlay */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 0.5px solid rgba(242, 236, 222, 0.12);
    background: rgba(15, 17, 21, 0.55); /* readability over the video */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 768px) {
    .hero-proof {
        grid-template-columns: repeat(4, 1fr);
        height: 80px;
    }
}
.hero-proof__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px var(--container-pad);
    gap: 2px;
    border-right: 0.5px solid rgba(242, 236, 222, 0.12);
    border-bottom: 0.5px solid rgba(242, 236, 222, 0.12);
}
.hero-proof__item:nth-child(2n) { border-right: 0; }
/* Last row on mobile (2×2 grid): remove bottom border on items 3 & 4 */
.hero-proof__item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) {
    .hero-proof__item {
        align-items: flex-start;
        border-bottom: 0;
        border-right: 0.5px solid rgba(242, 236, 222, 0.12);
    }
    .hero-proof__item:last-child { border-right: 0; }
    .hero-proof__item:nth-child(2n) { border-right: 0.5px solid rgba(242, 236, 222, 0.12); }
}
.hero-proof__num {
    font-size: 24px;
    font-weight: 500;
    color: var(--ocre-marrakchi);
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .hero-proof__num { font-size: 28px; }
}
.hero-proof__label {
    font-size: 11px;
    color: rgba(242, 236, 222, 0.6);
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: none;
}

@keyframes fadeIn { to { opacity: 1; } }

/* ========================================================== */
/* SECTION 2 — LE PROBLÈME                                     */
/* ========================================================== */
.probleme {
    background: var(--papier-sable);
    padding: var(--section-pad) 0;
}
.probleme__container {
    max-width: 900px;
    text-align: center;
}
@media (min-width: 1025px) {
    .probleme__container { text-align: left; }
}

.probleme__number {
    font-size: 120px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--noir-route);
    margin: 0 0 40px;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 1025px) {
    .probleme__number { font-size: 200px; }
}

.probleme__lead {
    font-size: 22px;
    color: var(--noir-route);
    line-height: 1.5;
    max-width: 700px;
    margin: 0 0 20px;
}
@media (min-width: 1025px) {
    .probleme__lead { margin: 0 0 20px; }
}

.probleme__body {
    font-size: 18px;
    color: rgba(15, 17, 21, 0.75);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 0 32px;
}
@media (min-width: 1025px) {
    .probleme__body { margin: 20px 0 32px; }
}

.probleme__emphasis {
    font-size: 22px;
    font-weight: 500;
    color: var(--rouge-frein);
    margin: 0 0 40px;
    max-width: 700px;
}
.probleme__cta {
    margin-top: 8px;
}

/* ========================================================== */
/* ============================================================ */
/* SECTION 2b — AVANT / AVEC VIRAGE (transformation block)      */
/* ============================================================ */
.transform {
    background: var(--noir-route);
    padding: var(--section-pad) 0;
    position: relative;
    overflow: hidden;
}
.transform::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1100px;
    height: 700px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(196, 123, 42, 0.07) 0%, transparent 60%);
    pointer-events: none;
}
.transform__sub {
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(242, 236, 222, 0.72);
    max-width: 720px;
    margin: 0 auto 40px;
    position: relative;
}

/* Transformation video — split-screen visual sitting between the subtitle
   and the before/after comparison grid. Centered, framed, ochre-accented. */
.transform-video {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 56px;
}
.transform-video__frame {
    position: relative;
    width: 100%;
    background: rgba(15, 17, 21, 0.6);
    border: 1px solid rgba(196, 123, 42, 0.35);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.transform-video__frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ocre-marrakchi);
    z-index: 2;
}
.transform-video__media {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}
@media (max-width: 768px) {
    .transform-video {
        margin: 0 auto 40px;
    }
}

.transform__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .transform__grid {
        grid-template-columns: 1fr 56px 1fr;
        gap: 0;
    }
}

.transform__col {
    border: 1px solid rgba(242, 236, 222, 0.1);
    border-radius: 16px;
    padding: 32px 28px;
    background: rgba(242, 236, 222, 0.025);
    transition: transform 360ms var(--ease-premium), border-color 360ms var(--ease-premium);
}
.transform__col--before {
    border-color: rgba(193, 67, 42, 0.22);
    background: rgba(193, 67, 42, 0.04);
}
.transform__col--after {
    border-color: rgba(196, 123, 42, 0.32);
    background: rgba(196, 123, 42, 0.06);
    box-shadow: 0 18px 48px rgba(196, 123, 42, 0.12);
}
.transform__col--after:hover {
    transform: translateY(-3px);
    border-color: rgba(196, 123, 42, 0.5);
}

.transform__col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(242, 236, 222, 0.1);
}
.transform__col-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.transform__col-mark--before {
    background: rgba(193, 67, 42, 0.18);
    color: #E07650;
    border: 1px solid rgba(193, 67, 42, 0.4);
}
.transform__col-mark--after {
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
}
.transform__col-title {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--papier-sable);
    margin: 0;
    text-align: center;
}
.transform__col--before .transform__col-title { opacity: 0.78; }

.transform__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.transform__list li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(242, 236, 222, 0.82);
}
.transform__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 1.5px;
    background: var(--ocre-marrakchi);
}
.transform__col--before .transform__list li {
    color: rgba(242, 236, 222, 0.6);
}
.transform__col--before .transform__list li::before {
    background: rgba(193, 67, 42, 0.55);
}
.transform__col--after .transform__list li strong {
    color: var(--papier-sable);
    font-weight: 700;
}

.transform__arrow {
    display: none;
    color: var(--ocre-marrakchi);
    align-items: center;
    justify-content: center;
}
@media (min-width: 900px) {
    .transform__arrow { display: flex; }
    .transform__arrow svg {
        width: 48px;
        height: 24px;
        animation: transformArrowDrift 2.6s ease-in-out infinite;
    }
}
@keyframes transformArrowDrift {
    0%, 100% { transform: translateX(0); opacity: 0.65; }
    50%      { transform: translateX(4px); opacity: 1; }
}

.transform__footnote {
    text-align: center;
    margin: 56px auto 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ocre-marrakchi);
    font-style: italic;
    font-weight: 500;
}

/* RTL: flip the arrow direction */
html[dir="rtl"] .transform__arrow svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
    .transform__arrow svg { animation: none; }
}

/* ============================================================ */
/* SECTION 3 — LA SOLUTION                                     */
/* ========================================================== */
.solution {
    background: var(--blanc);
    padding: var(--section-pad) 0;
}
.solution .h2 { margin-bottom: 80px; }

.solution__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .solution__grid { gap: 32px; }
}
@media (min-width: 1025px) {
    .solution__grid { grid-template-columns: repeat(3, 1fr); }
}

.solution-card {
    padding: 32px;
    background: var(--papier-sable-soft);
    border-radius: 12px;
    border: 0.5px solid var(--gris-ligne);
    transition: transform 300ms var(--ease-premium), border-color 300ms var(--ease-premium), background-color 300ms var(--ease-premium);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.solution-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 123, 42, 0.3);
    background: var(--blanc);
}
.solution-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solution-card .h4 { text-align: center; }
.solution-card .body { color: rgba(15, 17, 21, 0.75); text-align: center; }

/* ========================================================== */
/* SECTION 4 — EXEMPLE                                         */
/* ========================================================== */
.exemple {
    background: var(--noir-route);
    padding: var(--section-pad) 0;
    color: var(--papier-sable);
    overflow: hidden;
}
.exemple__sub {
    font-size: 18px;
    color: rgba(242, 236, 222, 0.7);
    max-width: 600px;
    margin: 0 auto 72px;
    text-align: center;
    line-height: 1.6;
}

.showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1100px;
}

/* Laptop mockup */
.mockup-laptop {
    flex: 0 1 62%;
    min-width: 280px;
    max-width: 700px;
}
.mockup-laptop__frame {
    background: #2A2D33;
    border-radius: 14px 14px 4px 4px;
    padding: 16px 16px 18px;
    border: 0.5px solid rgba(242, 236, 222, 0.1);
}
.mockup-laptop__screen {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
}
.mockup-laptop__base {
    height: 12px;
    background: linear-gradient(to bottom, #2A2D33 0%, #1F2126 100%);
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
    width: 104%;
    transform: translateX(-2%);
    border: 0.5px solid rgba(242, 236, 222, 0.08);
    border-top: none;
}

/* Phone mockup — no overlap, clean adjacent placement */
.mockup-phone {
    flex: 0 1 28%;
    min-width: 180px;
    max-width: 240px;
    position: relative;
}
@media (max-width: 768px) {
    .mockup-phone { max-width: 200px; }
}
.mockup-phone__frame {
    background: #1A1D23;
    border-radius: 32px;
    padding: 10px;
    border: 0.5px solid rgba(242, 236, 222, 0.15);
    position: relative;
    aspect-ratio: 9 / 19;
}
.mockup-phone__notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 18px;
    background: #0F1115;
    border-radius: 12px;
    z-index: 2;
}
.mockup-phone__screen {
    background: #fff;
    border-radius: 24px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* ===== Live iframe showcase ===== */
.mockup-laptop--live,
.mockup-phone--live {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.mockup-laptop--live:hover,
.mockup-phone--live:hover {
    transform: translateY(-2px);
}
.mockup-laptop--live .mockup-laptop__screen,
.mockup-phone--live .mockup-phone__screen {
    position: relative;
}
.mockup-laptop--live iframe,
.mockup-phone--live iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none; /* iframe is non-interactive; click opens new tab */
    background: #FAF6EC;
    /* Scale so a 1280px-wide site fits nicely in the small frame */
    transform-origin: top left;
}
/* Laptop: show the site at ~40% zoom so the layout reads clearly */
.mockup-laptop--live iframe {
    width: 250%;
    height: 250%;
    transform: scale(0.4);
}
/* Phone: show the site at ~25% zoom — mobile breakpoint triggers in iframe */
.mockup-phone--live iframe {
    width: 400%;
    height: 400%;
    transform: scale(0.25);
}

/* LIVE badge on laptop */
.live-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #C47B2A;
    color: #F5F1E4;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    border-radius: 3px;
}
.live-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F5F1E4;
    box-shadow: 0 0 0 0 rgba(245, 241, 228, 0.9);
    animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 241, 228, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 241, 228, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-badge__dot { animation: none; }
}

/* Hover overlay on laptop */
.mockup-laptop__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, 0.55);
    color: #F2ECDE;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.mockup-laptop--live:hover .mockup-laptop__overlay,
.mockup-laptop--live:focus-visible .mockup-laptop__overlay {
    opacity: 1;
}

/* Hide the phone frame on very small screens to save data + space */
@media (max-width: 540px) {
    .mockup-phone--live { display: none; }
    .mockup-laptop--live { flex: 0 1 100%; }
}

/* Demo site (inside laptop) */
.demo-site {
    width: 100%;
    height: 100%;
    background: #FAF6EC;
    color: #0F1115;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    gap: 12px;
    font-size: 8px;
}
.demo-site__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 0.5px solid rgba(15,17,21,0.08);
}
.demo-site__brand { font-weight: 600; letter-spacing: 0.1em; font-size: 9px; }
.demo-site__links { display: flex; gap: 10px; color: rgba(15,17,21,0.6); }
.demo-site__hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    gap: 12px;
}
.demo-site__hero-text { flex: 1; }
.demo-site__eyebrow { font-size: 6px; letter-spacing: 0.2em; color: #C47B2A; margin: 0 0 6px; font-weight: 600; }
.demo-site__title { font-size: 16px; font-weight: 500; margin: 0 0 10px; line-height: 1.1; letter-spacing: -0.02em; }
.demo-site__cta {
    display: inline-block;
    background: #C47B2A;
    color: #0F1115;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 500;
}
.demo-site__car {
    width: 120px;
    height: 60px;
    background: linear-gradient(135deg, #0F1115 0%, #2A2D33 100%);
    border-radius: 6px;
    position: relative;
}
.demo-site__car::before {
    content: '';
    position: absolute;
    inset: 20% 15% 20% 15%;
    background: linear-gradient(to bottom, rgba(196,123,42,0.4), transparent);
    border-radius: 3px;
}
.demo-site__cars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
}
.demo-site__car-card {
    background: #fff;
    padding: 6px;
    border-radius: 4px;
    border: 0.5px solid rgba(15,17,21,0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.demo-site__car-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0F1115 0%, #2A2D33 100%);
    border-radius: 2px;
}
.demo-site__car-card span { font-size: 6px; color: rgba(15,17,21,0.7); }
.demo-site__car-card strong { font-size: 7px; color: #C47B2A; font-weight: 600; }

/* Demo mobile (inside phone) */
.demo-mobile {
    padding: 40px 10px 10px;
    background: #FAF6EC;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 6px;
    color: #0F1115;
}
.demo-mobile__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 7px;
    letter-spacing: 0.08em;
    padding-bottom: 4px;
    border-bottom: 0.5px solid rgba(15,17,21,0.08);
}
.demo-mobile__eyebrow { font-size: 5px; letter-spacing: 0.2em; color: #C47B2A; margin: 4px 0 0; font-weight: 600; }
.demo-mobile__title { font-size: 11px; font-weight: 500; margin: 2px 0 4px; line-height: 1.1; letter-spacing: -0.02em; }
.demo-mobile__cta {
    background: #C47B2A;
    color: #0F1115;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 6px;
    font-weight: 500;
    align-self: flex-start;
}
.demo-mobile__card {
    background: #fff;
    padding: 4px;
    border-radius: 3px;
    border: 0.5px solid rgba(15,17,21,0.08);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.demo-mobile__car {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0F1115 0%, #2A2D33 100%);
    border-radius: 2px;
}
.demo-mobile__card span { font-size: 5px; color: rgba(15,17,21,0.7); }
.demo-mobile__card strong { font-size: 6px; color: #C47B2A; font-weight: 600; }

/* ========================================================== */
/* Trusted agencies marquee (inside .exemple)                  */
/* Muted wordmarks scrolling infinitely, with a centered       */
/* "TRUSTED BY…" style label flanked by hairlines. Colors      */
/* adapted to Virage: Noir Route + Papier Sable @ ~35% opacity */
/* (no pure white, no pure black — stays on-brand).            */
/* ========================================================== */
/* ==========================================================
   RÉALISATIONS — two real-project cards (replaces the old
   trusted-by marquee). Each card links to a live demo site
   we built. Sand on dark, ochre/terracotta accents.
   ========================================================== */
.realisations {
    margin-top: 96px;
    padding-top: 48px;
    border-top: 0.5px solid rgba(242, 236, 222, 0.08);
}
.realisations__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}
.realisations__rule {
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: rgba(242, 236, 222, 0.12);
}
.realisations__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(242, 236, 222, 0.45);
    white-space: nowrap;
    line-height: 1;
}
@media (max-width: 640px) {
    .realisations__label {
        font-size: 10px;
        letter-spacing: 0.14em;
        white-space: normal;
        text-align: center;
        max-width: 260px;
    }
    .realisations__rule { max-width: 40px; }
}

.realisations__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .realisations__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Real client transformation story (Karim Loc Auto / Tarik Loc Voiture → Atlas / Medina) */
.realisations__story {
    max-width: 760px;
    margin: 28px auto 0;
    padding: 18px 24px;
    border: 1px solid rgba(196, 123, 42, 0.28);
    border-radius: 12px;
    background: rgba(196, 123, 42, 0.06);
    text-align: center;
}
.realisations__story-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(242, 236, 222, 0.78);
    margin: 0;
}
.realisations__story-text strong {
    color: var(--papier-sable);
    font-weight: 600;
}
.realisations__story-kpi {
    color: var(--ocre-marrakchi) !important;
    font-weight: 700 !important;
    white-space: nowrap;
}
@media (max-width: 540px) {
    .realisations__story {
        padding: 14px 18px;
        margin-top: 22px;
    }
    .realisations__story-text {
        font-size: 13px;
    }
}

.realisation-card {
    display: block;
    padding: 28px 28px 24px;
    background: rgba(242, 236, 222, 0.04);
    border: 1px solid rgba(242, 236, 222, 0.12);
    border-radius: 14px;
    text-decoration: none;
    color: var(--papier-sable);
    transition: transform 260ms var(--ease-premium),
                background 260ms var(--ease-premium),
                border-color 260ms var(--ease-premium),
                box-shadow 260ms var(--ease-premium);
}
.realisation-card:hover,
.realisation-card:focus-visible {
    transform: translateY(-3px);
    background: rgba(242, 236, 222, 0.07);
    border-color: rgba(196, 123, 42, 0.5);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.realisation-card--medina:hover,
.realisation-card--medina:focus-visible {
    border-color: rgba(198, 93, 58, 0.55);
}

.realisation-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.realisation-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.realisation-card__mark--medina { background: #C65D3A; }

.realisation-card__title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.realisation-card__title strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--papier-sable);
}
.realisation-card__title span {
    font-size: 12px;
    color: rgba(242, 236, 222, 0.55);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.realisation-card__open {
    font-size: 22px;
    color: rgba(242, 236, 222, 0.4);
    line-height: 1;
    transition: color 220ms, transform 220ms var(--ease-premium);
}
.realisation-card:hover .realisation-card__open {
    color: var(--ocre-marrakchi);
    transform: translate(2px, -2px);
}
.realisation-card--medina:hover .realisation-card__open {
    color: #E07650;
}

.realisation-card__desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(242, 236, 222, 0.72);
    margin: 0 0 14px;
}

.realisation-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.realisation-card__tags li {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(242, 236, 222, 0.06);
    color: rgba(242, 236, 222, 0.7);
    border: 1px solid rgba(242, 236, 222, 0.1);
}

/* ============================================ */
/* TRUSTED LOGO MARQUEE — premium dark SaaS strip */
/* ============================================ */
.trusted {
    margin: 88px auto 0;
    max-width: 1100px;
    padding: 0 16px;
}

.trusted__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 36px;
}
.trusted__rule {
    flex: 1 1 auto;
    max-width: 160px;
    height: 1px;
    background: rgba(242, 236, 222, 0.14);
}
.trusted__label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(242, 236, 222, 0.45);
    white-space: nowrap;
    flex-shrink: 0;
}

.trusted__marquee {
    position: relative;
    overflow: hidden;
    /* Soft vignette: fade edges into the section background */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.trusted__track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    padding-right: 72px;
    animation: trustedScroll 38s linear infinite;
    will-change: transform;
}
.trusted__marquee:hover .trusted__track {
    animation-play-state: paused;
}

@keyframes trustedScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.trusted__logo {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ocre-marrakchi);
    opacity: 0.72;
    white-space: nowrap;
    transition: opacity 240ms var(--ease-premium), letter-spacing 240ms var(--ease-premium);
}
.trusted__logo:hover {
    opacity: 1;
    letter-spacing: 0.08em;
}

/* RTL: scroll the other way so logos enter from the right side */
html[dir="rtl"] .trusted__track {
    animation-name: trustedScrollRtl;
}
@keyframes trustedScrollRtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Tablet & smaller: tighten gap and font, narrow the rules */
@media (max-width: 768px) {
    .trusted { margin-top: 64px; }
    .trusted__header { gap: 12px; margin-bottom: 28px; }
    .trusted__rule { max-width: 60px; }
    .trusted__label { font-size: 10px; letter-spacing: 0.14em; }
    .trusted__track { gap: 48px; padding-right: 48px; animation-duration: 30s; }
    .trusted__logo { font-size: 15px; }
}
@media (max-width: 480px) {
    .trusted__label { font-size: 9.5px; max-width: 200px; white-space: normal; text-align: center; line-height: 1.4; }
    .trusted__track { gap: 36px; }
    .trusted__logo { font-size: 14px; }
}

/* Reduced motion: freeze the track, let the user scroll manually */
@media (prefers-reduced-motion: reduce) {
    .trusted__track { animation: none; }
    .trusted__marquee { overflow-x: auto; }
    .trusted__logo { transition: none; }
}

.exemple__cta {
    text-align: center;
    margin-top: 64px;
}
.exemple__cta-note {
    font-size: 14px;
    color: rgba(242, 236, 222, 0.6);
    margin: 0 0 20px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.exemple__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* ========================================================== */
/* SECTION 5 — PROCESSUS                                       */
/* ========================================================== */
.process {
    background: var(--papier-sable);
    padding: var(--section-pad) 0;
    position: relative;
    overflow: hidden;
}
.process .container { position: relative; }

/* ---- Process car: rides along the connector line on desktop ---- */
.process__car {
    display: none; /* mobile: hidden — connector line is hidden too */
    color: var(--ocre-marrakchi);
    pointer-events: none;
    z-index: 2;
}
@media (min-width: 1025px) {
    /* Car is anchored to the timeline OL — that's the element whose
       ::before is the connector line, so coordinates align perfectly. */
    .process__timeline { position: relative; }

    .process__car {
        display: block;
        position: absolute;
        /* The car sits ABOVE the connector line (line top: 56px in OL).
           Wheel center in viewBox is y=19. With CAR_H = 24, we want the
           wheel center to land on y=56, so element top = 56 - 19 = 37. */
        top: 37px;
        left: 0;
        width: 56px;
        height: 24px;
        transform: translate3d(var(--car-x, -200px), 0, 0);
        transition: transform 90ms linear;
        will-change: transform;
        filter: drop-shadow(0 2px 6px rgba(196, 123, 42, 0.28));
        z-index: 3;
    }
    /* RTL: flip the car horizontally so it faces the direction of travel */
    html[dir="rtl"] .process__car { transform: translate3d(var(--car-x, -200px), 0, 0) scaleX(-1); }
    /* Subtle shadow pulse while moving for life — frozen when reduced motion */
    .process__car-shadow {
        transform-origin: center;
        animation: processCarShadowPulse 1.6s ease-in-out infinite;
    }
}
@keyframes processCarShadowPulse {
    0%, 100% { opacity: 0.55; transform: scaleX(1); }
    50%      { opacity: 0.35; transform: scaleX(0.85); }
}
/* Subtle ochre wash radiating from center for visual depth */
.process::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(196, 123, 42, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
.process__sub {
    font-size: 18px;
    color: rgba(15, 17, 21, 0.7);
    text-align: center;
    margin: 0 0 80px;
    position: relative;
}

.process__timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 1025px) {
    .process__timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

.process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 20px 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(15, 17, 21, 0.06);
    transition: transform 420ms var(--ease-premium),
                box-shadow 420ms var(--ease-premium),
                border-color 420ms var(--ease-premium),
                background 420ms var(--ease-premium);
}
.process__step:hover {
    transform: translateY(-6px);
    background: #FFFFFF;
    border-color: rgba(196, 123, 42, 0.28);
    box-shadow: 0 18px 38px rgba(15, 17, 21, 0.08),
                0 4px 12px rgba(196, 123, 42, 0.10);
}

/* When the card enters the viewport, draw the ring + pop the icon */
.process__step.fade-up.is-visible .process__num-ring circle {
    animation: processRingDraw 1.1s var(--ease-premium) forwards;
    animation-delay: var(--step-delay, 0ms);
}
.process__step.fade-up.is-visible .process__icon {
    animation: processIconPop 600ms var(--ease-premium) forwards;
    animation-delay: calc(var(--step-delay, 0ms) + 600ms);
}
.process__step.fade-up.is-visible .process__num-text {
    animation: processNumFadeIn 500ms var(--ease-premium) forwards;
    animation-delay: calc(var(--step-delay, 0ms) + 200ms);
}
.process__step.fade-up.is-visible .process__duration,
.process__step.fade-up.is-visible .h4,
.process__step.fade-up.is-visible .body {
    animation: processCopyRise 600ms var(--ease-premium) backwards;
}
.process__step.fade-up.is-visible .process__duration { animation-delay: calc(var(--step-delay, 0ms) + 350ms); }
.process__step.fade-up.is-visible .h4               { animation-delay: calc(var(--step-delay, 0ms) + 450ms); }
.process__step.fade-up.is-visible .body             { animation-delay: calc(var(--step-delay, 0ms) + 550ms); }

/* The icon/number medallion */
.process__num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--ocre-marrakchi);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.process__num-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--ocre-marrakchi);
}
.process__num-text {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--ocre-marrakchi);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    opacity: 0;
    transform: scale(0.5);
    box-shadow: 0 2px 6px rgba(196, 123, 42, 0.35);
}
.process__icon {
    width: 28px;
    height: 28px;
    color: var(--ocre-marrakchi);
    opacity: 0;
    transform: scale(0.6);
}
.process__step:hover .process__icon {
    animation: processIconBob 1.4s ease-in-out infinite;
}

.process__duration {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: var(--ocre-marrakchi);
    background: rgba(196, 123, 42, 0.10);
    border: 1px solid rgba(196, 123, 42, 0.22);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.process__step .h4 { margin-bottom: 6px; }
.process__step .body {
    color: rgba(15, 17, 21, 0.72);
    font-size: 14.5px;
    line-height: 1.55;
}

/* Animated connector line (desktop only) — draws across as cards appear */
@media (min-width: 1025px) {
    .process__timeline::before {
        content: '';
        position: absolute;
        top: 56px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent 0%,
            rgba(196, 123, 42, 0.4) 12%,
            rgba(196, 123, 42, 0.4) 88%,
            transparent 100%
        );
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1.8s var(--ease-premium) 200ms;
        pointer-events: none;
        z-index: 0;
    }
    .process__timeline.is-visible::before { transform: scaleX(1); }
    /* Per-step dot on the connector line */
    .process__step::before {
        content: '';
        position: absolute;
        top: 52px;
        left: 36px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ocre-marrakchi);
        box-shadow: 0 0 0 4px var(--papier-sable);
        opacity: 0;
        transform: scale(0.4);
        transition: opacity 360ms var(--ease-premium), transform 360ms var(--ease-premium);
        transition-delay: calc(var(--step-delay, 0ms) + 800ms);
        z-index: 1;
    }
    .process__step.is-visible::before { opacity: 1; transform: scale(1); }
}

/* Keyframes */
@keyframes processRingDraw {
    from { stroke-dashoffset: 182; }
    to   { stroke-dashoffset: 0; }
}
@keyframes processIconPop {
    0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes processNumFadeIn {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes processCopyRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes processIconBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.process__cta {
    margin-top: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}
.process__cta-note {
    font-size: 13px;
    color: rgba(15, 17, 21, 0.55);
}

/* Reduced motion: keep everything visible, kill animations */
@media (prefers-reduced-motion: reduce) {
    .process__num-ring circle { stroke-dashoffset: 0 !important; animation: none !important; }
    .process__icon { opacity: 1 !important; transform: none !important; animation: none !important; }
    .process__num-text { opacity: 1 !important; transform: none !important; animation: none !important; }
    .process__duration, .process__step .h4, .process__step .body {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .process__timeline::before { transform: scaleX(1) !important; transition: none !important; }
    .process__step::before { opacity: 1 !important; transform: scale(1) !important; transition: none !important; }
    .process__step:hover { transform: none; }
    .process__step:hover .process__icon { animation: none; }
    .process__car { display: none !important; }       /* hide the riding car */
    .process__car-shadow { animation: none !important; }
}

/* Mobile / tablet: cards stack vertically — center the icon, badge,
   duration pill and title for a balanced, premium look. The body
   description stays left-aligned for natural reading flow. */
@media (max-width: 1024px) {
    .process__step {
        padding: 28px 22px 26px;
        align-items: center;
        text-align: center;
    }
    .process__step .body {
        text-align: left;
        align-self: stretch;
    }
    .process__num { margin-bottom: 10px; }
    .process__duration { align-self: center; }
}

/* ========================================================== */
/* SECTION 6 — CALCULATEUR                                     */
/* ========================================================== */
.calcul {
    background: var(--noir-route);
    padding: var(--section-pad) 0;
    color: var(--papier-sable);
}
.calcul__sub {
    font-size: 18px;
    color: rgba(242, 236, 222, 0.7);
    text-align: center;
    margin: 0 0 80px;
}

.calculator {
    max-width: 720px;
    margin: 0 auto;
    background: var(--noir-route-soft);
    border: 0.5px solid var(--gris-ligne-sombre);
    border-radius: 16px;
    padding: 32px;
}
@media (min-width: 768px) {
    .calculator { padding: 48px; }
}

.calculator__label {
    display: block;
    font-size: 14px;
    color: rgba(242, 236, 222, 0.7);
    margin-bottom: 16px;
}
.calculator__value {
    font-size: 32px;
    font-weight: 500;
    color: var(--ocre-marrakchi);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
}
.calculator__value-unit {
    font-size: 16px;
    color: rgba(242, 236, 222, 0.7);
    font-weight: 400;
    margin-left: 4px;
}
.calculator__input + .calculator__input {
    margin-top: 32px;
}

/* Slider */
.calculator__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(242, 236, 222, 0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.calculator__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    cursor: grab;
    border: 0.5px solid var(--ocre-dark);
    transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
    box-shadow: 0 0 0 0 rgba(196, 123, 42, 0);
}
.calculator__slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px rgba(196, 123, 42, 0.15);
}
.calculator__slider:focus::-webkit-slider-thumb,
.calculator__slider:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px rgba(196, 123, 42, 0.22);
    cursor: grabbing;
    transform: scale(1.15);
}
.calculator__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    cursor: grab;
    border: 0.5px solid var(--ocre-dark);
    transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
}
.calculator__slider:hover::-moz-range-thumb {
    box-shadow: 0 0 0 6px rgba(196, 123, 42, 0.15);
}
.calculator__slider:focus::-moz-range-thumb,
.calculator__slider:active::-moz-range-thumb {
    box-shadow: 0 0 0 8px rgba(196, 123, 42, 0.22);
    cursor: grabbing;
    transform: scale(1.15);
}

/* Calculator result "kick" — tiny scale pulse when the number changes.
   Applied via JS by toggling the .is-kicking class for 220ms. */
.calculator__result-number {
    transform-origin: left center;
    transition: transform 220ms var(--ease-premium);
}
.calculator__result-number.is-kicking {
    transform: scale(1.025);
}
html[dir="rtl"] .calculator__result-number { transform-origin: right center; }
/* Results */
.calculator__results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
    border-top: 0.5px solid var(--gris-ligne-sombre);
    padding-top: 40px;
}
@media (min-width: 768px) {
    .calculator__results {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

.calculator__result {
    min-width: 0;
}
.calculator__result-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--ocre-marrakchi);
    text-transform: uppercase;
    margin: 0 0 12px;
    font-weight: 500;
}
.calculator__result-number {
    font-size: 40px;
    font-weight: 500;
    color: var(--papier-sable);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: color 300ms var(--ease-premium);
    line-height: 1.05;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .calculator__result-number { font-size: 44px; }
}
@media (min-width: 1200px) {
    .calculator__result-number { font-size: 56px; }
}
.calculator__result-number--red { color: var(--rouge-frein); }
.calculator__result-sub {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.6);
    margin: 0;
    line-height: 1.5;
}

.calculator__footnote {
    font-size: 12px;
    color: rgba(242, 236, 222, 0.5);
    margin-top: 32px;
    line-height: 1.5;
}
.calculator__cta {
    text-align: center;
    margin-top: 48px;
}
.calculator__cta-sub {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.55);
    margin: 16px 0 0;
}
/* ROI one-liner beneath the calculator footnote — ties the loss calc to the Tarif section. */
.calculator__roi {
    font-size: 13px;
    font-weight: 400;
    color: var(--ocre-marrakchi);
    text-align: center;
    margin: 24px 0 0;
    line-height: 1.6;
}

/* ========================================================== */
/* SECTION 6b — TARIF (single offer, all-inclusive)            */
/* ========================================================== */
.tarif {
    background: var(--noir-route);
    padding: 96px 0;
}
@media (min-width: 1025px) {
    .tarif { padding: 140px 0; }
}
.tarif__container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 1025px) {
    .tarif__container { padding-left: 48px; padding-right: 48px; }
}

/* Header */
.tarif .eyebrow {
    margin-bottom: 24px;
}
.tarif__h2 {
    font-size: 40px;
    font-weight: 500;
    color: var(--papier-sable);
    letter-spacing: -0.02em;
    line-height: 1.1;
    max-width: 800px;
    margin: 0 auto 24px;
    text-align: center;
}
@media (min-width: 768px) {
    .tarif__h2 { font-size: 56px; }
}
.tarif__sub {
    font-size: 18px;
    font-weight: 400;
    color: rgba(242, 236, 222, 0.7);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 80px;
    text-align: center;
}

/* Pricing card */
.tarif-card {
    position: relative;
    max-width: 720px;
    margin: 0 16px;
    background: var(--noir-route-soft);
    border: 0.5px solid rgba(196, 123, 42, 0.3);
    border-radius: 16px;
    padding: 32px;
    box-shadow: none;
}
@media (min-width: 480px) {
    .tarif-card { margin: 0 auto; }
}
@media (min-width: 768px) {
    .tarif-card { padding: 56px; }
}

.tarif-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
}

.tarif-card__name {
    font-size: 32px;
    font-weight: 500;
    color: var(--papier-sable);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    text-align: center;
    line-height: 1.1;
}
.tarif-card__desc {
    font-size: 16px;
    font-weight: 400;
    color: rgba(242, 236, 222, 0.6);
    font-style: italic;
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.5;
}

/* Price block */
.tarif-price {
    text-align: center;
    margin-bottom: 56px;
}
.tarif-price__row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Force LTR rendering of "10 000 DH" / "499 DH/mois" even when
       the page direction is RTL (Arabic), otherwise flex reverses
       the children and the bidi space inside "10 000" flips digits. */
    direction: ltr;
    unicode-bidi: isolate;
}
.tarif-price__num,
.tarif-price__cur {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Arabic: currency word "درهم" leads the number — e.g. "درهم 9999" — by
   reversing the flex order while keeping the digits LTR-rendered to
   prevent bidi flipping of the thousands separator. */
.lang-ar .tarif-price__row,
.lang-ar .fomo__price-value,
.lang-ar .tarif-incl__price,
.lang-ar .tarif-incl__totals-value {
    flex-direction: row-reverse;
}
.lang-ar .tarif-incl__price,
.lang-ar .tarif-incl__totals-value {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}
.tarif-price__num {
    font-weight: 500;
    color: var(--papier-sable);
    line-height: 1;
    letter-spacing: -0.01em;
}
.tarif-price__num--setup { font-size: 48px; }
@media (min-width: 768px) {
    .tarif-price__num--setup { font-size: 64px; }
}
.tarif-price__num--monthly {
    font-size: 36px;
    color: var(--ocre-marrakchi);
}
@media (min-width: 768px) {
    .tarif-price__num--monthly { font-size: 48px; }
}
.tarif-price__cur {
    font-size: 24px;
    font-weight: 500;
}
.tarif-price__cur--setup { color: rgba(242, 236, 222, 0.7); }
.tarif-price__cur--monthly {
    font-size: 20px;
    color: rgba(196, 123, 42, 0.8);
}
.tarif-price__label {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.6);
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.5;
}
.tarif-price__divider {
    width: 60px;
    height: 1px;
    background: rgba(196, 123, 42, 0.4);
    margin: 32px auto 0;
}
.tarif-price__connector {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.5);
    text-align: center;
    margin: 16px 0;
    font-style: italic;
    line-height: 1;
}

/* ============================================================
   FLEXIBLE PAYMENT BLOCK
   Small panel below the price block. Contains:
   - A short "pay in 1, 3 or 5" lead line
   - Three chip toggles (1× / 3× / 5×) — interactive
   - A live-updating "Vous payez : X DH × N" result row
   - A reassuring footnote
   ============================================================ */
.tarif-flex {
    margin: 28px auto 0;
    max-width: 420px;
    padding: 18px 18px 16px;
    background: rgba(196, 123, 42, 0.06);
    border: 1px solid rgba(196, 123, 42, 0.22);
    border-radius: 14px;
    text-align: center;
}
.tarif-flex__lead {
    font-size: 13.5px;
    color: rgba(242, 236, 222, 0.85);
    margin: 0 0 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tarif-flex__icon {
    font-size: 16px;
    line-height: 1;
}
.tarif-flex__toggle {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: rgba(15, 17, 21, 0.45);
    border: 1px solid rgba(242, 236, 222, 0.10);
    border-radius: 999px;
    margin-bottom: 14px;
}
.tarif-flex__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 78px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: rgba(242, 236, 222, 0.7);
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms var(--ease-premium), color 200ms var(--ease-premium);
    font-family: inherit;
}
.tarif-flex__chip:hover {
    color: var(--papier-sable);
}
.tarif-flex__chip.is-active {
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
}
.tarif-flex__chip-num {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.tarif-flex__chip-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
    line-height: 1.1;
}
.tarif-flex__result {
    font-size: 14px;
    color: rgba(242, 236, 222, 0.9);
    margin: 0 0 6px;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tarif-flex__amount {
    font-weight: 600;
    color: var(--papier-sable);
    font-size: 18px;
    direction: ltr;
    unicode-bidi: isolate;
}
.tarif-flex__amount-value {
    font-variant-numeric: tabular-nums;
}
.tarif-flex__amount-detail {
    color: rgba(242, 236, 222, 0.6);
    font-size: 13px;
    font-weight: 500;
}
.tarif-flex__amount-detail[hidden] { display: none; }
.tarif-flex__note[hidden] { display: none; }
.tarif-flex__note {
    font-size: 11.5px;
    color: rgba(242, 236, 222, 0.5);
    margin: 8px 0 0;
    line-height: 1.45;
    font-style: italic;
}

/* RTL: flip the row-reverse so the currency word leads in Arabic */
html[dir="rtl"] .tarif-flex__amount {
    direction: ltr;
}
html[dir="rtl"] .tarif-flex__lead,
html[dir="rtl"] .tarif-flex__result {
    direction: rtl;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .tarif-flex { padding: 16px 14px 14px; }
    .tarif-flex__chip { min-width: 70px; padding: 7px 10px; }
    .tarif-flex__chip-num { font-size: 14px; }
    .tarif-flex__chip-label { font-size: 10px; }
    .tarif-flex__amount { font-size: 17px; }
}

/* Inclusions */
.tarif-incl { }
.tarif-incl__header {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ocre-marrakchi);
    margin: 0 0 24px;
    text-align: left;
    line-height: 1;
}
.tarif-incl__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tarif-incl__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 0.5px solid rgba(242, 236, 222, 0.06);
}
.tarif-incl__item:last-child { border-bottom: 0; }

.tarif-incl__dash {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--ocre-marrakchi);
    margin-top: 10px;
    flex-shrink: 0;
}
.tarif-incl__text {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 400;
    color: rgba(242, 236, 222, 0.9);
    line-height: 1.5;
}

/* Value-stack additions: per-line price tag, bonus subhead, totals, money-back */
.tarif-incl__price {
    flex-shrink: 0;
    align-self: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(242, 236, 222, 0.55);
    letter-spacing: 0.02em;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    margin-left: 12px;
}
.tarif-incl__price-num {
    color: var(--papier-sable);
    font-weight: 700;
}
/* Bonus subheader sits between core list and bonus list */
.tarif-incl__header--bonus {
    margin-top: 28px;
    margin-bottom: 18px;
    color: var(--ocre-marrakchi);
    position: relative;
}
.tarif-incl__header--bonus::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: rgba(196, 123, 42, 0.35);
    margin-bottom: 14px;
}
.tarif-incl__item--bonus .tarif-incl__dash {
    background: var(--ocre-marrakchi);
    opacity: 0.7;
}

/* Totals block — assembled-value reveal */
.tarif-incl__totals {
    margin-top: 28px;
    padding: 20px 0 4px;
    border-top: 1px solid rgba(242, 236, 222, 0.12);
}
.tarif-incl__totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
}
.tarif-incl__totals-label {
    font-size: 14px;
    color: rgba(242, 236, 222, 0.7);
    letter-spacing: 0.01em;
}
.tarif-incl__totals-value {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--papier-sable);
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}
.tarif-incl__totals-value--strike {
    text-decoration: line-through;
    text-decoration-color: rgba(193, 67, 42, 0.7);
    text-decoration-thickness: 1.5px;
    color: rgba(242, 236, 222, 0.55);
    font-weight: 500;
}
.tarif-incl__totals-value--final {
    font-size: 17px;
    font-weight: 700;
}
.tarif-incl__totals-row--save {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(196, 123, 42, 0.12);
    border: 1px solid rgba(196, 123, 42, 0.28);
    border-radius: 10px;
}
.tarif-incl__totals-row--save .tarif-incl__totals-label {
    color: var(--ocre-marrakchi);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.tarif-incl__totals-value--save {
    color: var(--ocre-marrakchi);
    font-weight: 800;
    font-size: 18px;
}

/* Money-back guarantee — sits below totals, before the CTA */
.tarif-incl__moneyback {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    background: rgba(242, 236, 222, 0.04);
    border: 1px solid rgba(242, 236, 222, 0.1);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(242, 236, 222, 0.82);
}
.tarif-incl__moneyback strong {
    color: var(--papier-sable);
    font-weight: 700;
}
.tarif-incl__moneyback-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
    font-size: 12px;
    font-weight: 800;
    margin-top: 1px;
}

/* Mobile: stack price under text instead of pushing it off the right */
@media (max-width: 540px) {
    .tarif-incl__item {
        flex-wrap: wrap;
    }
    .tarif-incl__price {
        margin-left: 32px; /* aligns under text after the dash gap */
        margin-top: 2px;
        font-size: 12.5px;
    }
    .tarif-incl__totals-value--final { font-size: 16px; }
    .tarif-incl__totals-value--save  { font-size: 16px; }
}

/* Card CTA */
.tarif-card__cta {
    margin-top: 48px;
}
.tarif-card__btn {
    width: 100%;
    padding: 18px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    /* Inherits .btn--primary colors + :hover :active from the base system */
}
.tarif-card__note {
    font-size: 12px;
    color: rgba(242, 236, 222, 0.5);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.5;
}

/* Persuasion line (outside the card) */
.tarif__persuasion {
    font-size: 17px;
    font-weight: 400;
    color: rgba(242, 236, 222, 0.75);
    line-height: 1.6;
    font-style: italic;
    text-align: center;
    max-width: 600px;
    margin: 56px auto 0;
}

/* Three trust microblocks */
.tarif-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 64px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .tarif-trust { grid-template-columns: repeat(3, 1fr); }
}
.tarif-trust__block {
    text-align: center;
    padding: 20px;
}
.tarif-trust__head {
    font-size: 15px;
    font-weight: 500;
    color: var(--papier-sable);
    margin: 0;
    line-height: 1.4;
}
.tarif-trust__sub {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.6);
    line-height: 1.5;
    margin: 8px 0 0;
}

/* RTL overrides for Arabic */
html[dir="rtl"] .tarif-incl__header,
html[dir="rtl"] .tarif-incl__text {
    text-align: right;
}

/* ========================================================== */
/* SECTION 6b — FOMO STRIP (cohort scarcity)                   */
/* Sits between Tarif and Garanties. Real urgency, no fakery.  */
/* ========================================================== */
.fomo {
    background: var(--noir-route);
    padding: 40px 0 64px;
}
.fomo__card {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 32px;
    background: linear-gradient(180deg,
        rgba(196, 123, 42, 0.08) 0%,
        rgba(196, 123, 42, 0.02) 100%);
    border: 1px solid rgba(196, 123, 42, 0.45);
    border-radius: 4px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.fomo__card::before {
    /* Top ochre accent line */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ocre-marrakchi);
}

.fomo__top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.fomo__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    box-shadow: 0 0 0 0 rgba(196, 123, 42, 0.7);
    animation: fomoPulse 1.8s var(--ease-premium) infinite;
}
@keyframes fomoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 123, 42, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(196, 123, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 123, 42, 0); }
}
.fomo__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ocre-marrakchi);
}

.fomo__h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 600;
    color: var(--papier-sable);
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 8px 14px;
}
.fomo__h2-sep {
    color: rgba(242, 236, 222, 0.3);
    font-weight: 300;
}
.fomo__slots {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.fomo__slots-num {
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    color: var(--ocre-marrakchi);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fomo__why {
    font-size: 14px;
    color: rgba(242, 236, 222, 0.65);
    margin: 0 auto 32px;
    line-height: 1.55;
    max-width: 560px;
}

/* ----- Price compare row ----- */
.fomo__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto 32px;
}
.fomo__price {
    padding: 18px 14px;
    border-radius: 4px;
}
.fomo__price--now {
    background: rgba(196, 123, 42, 0.1);
    border: 1px solid rgba(196, 123, 42, 0.4);
}
.fomo__price--after {
    background: rgba(242, 236, 222, 0.03);
    border: 1px dashed rgba(242, 236, 222, 0.2);
    opacity: 0.85;
}
.fomo__price-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(242, 236, 222, 0.55);
}
.fomo__price--now .fomo__price-label {
    color: var(--ocre-marrakchi);
}
.fomo__price-value {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.fomo__price-num {
    font-size: clamp(26px, 5vw, 34px);
    font-weight: 700;
    color: var(--papier-sable);
    line-height: 1;
}
.fomo__price--now .fomo__price-num {
    color: var(--ocre-marrakchi);
}
.fomo__price-cur {
    font-size: 14px;
    font-weight: 500;
    color: rgba(242, 236, 222, 0.6);
    letter-spacing: 0.02em;
}
.fomo__price-sub {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(242, 236, 222, 0.5);
}
.fomo__price-sub--lost {
    color: var(--rouge-frein);
}
.fomo__price-sub--lost strong {
    font-weight: 700;
    color: var(--rouge-frein);
}
.fomo__arrow {
    font-size: 22px;
    color: rgba(242, 236, 222, 0.35);
    line-height: 1;
}

/* ----- Countdown ----- */
.fomo__countdown {
    margin: 0 auto 28px;
    max-width: 480px;
}
.fomo__countdown-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 236, 222, 0.5);
    margin: 0 0 12px;
}
.fomo__countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.fomo__countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: rgba(242, 236, 222, 0.04);
    border: 0.5px solid rgba(242, 236, 222, 0.12);
    border-radius: 3px;
}
.fomo__countdown-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 600;
    color: var(--papier-sable);
    line-height: 1;
}
.fomo__countdown-unit {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(242, 236, 222, 0.5);
}

/* ----- CTA + guarantee ----- */
.fomo__cta {
    margin: 0 auto 16px;
    min-width: 280px;
}
.fomo__guarantee {
    margin: 0;
    font-size: 12px;
    color: rgba(242, 236, 222, 0.55);
    line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .fomo { padding: 32px 0 48px; }
    .fomo__card { padding: 28px 18px; }
    .fomo__compare {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .fomo__arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
    .fomo__cta { min-width: 0; width: 100%; }
}

/* RTL */
html[dir="rtl"] .fomo__arrow { transform: scaleX(-1); }
@media (max-width: 600px) {
    html[dir="rtl"] .fomo__arrow { transform: rotate(90deg) scaleX(-1); }
}

/* ========================================================== */
/* SECTION 7 — GARANTIES                                       */
/* ========================================================== */
.garanties {
    background: var(--papier-sable-soft);
    padding: var(--section-pad) 0;
}
.garanties .h2 { margin-bottom: 16px; }
.garanties__sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(15, 17, 21, 0.7);
    max-width: 640px;
    margin: 0 auto 64px;
    text-align: center;
}
.garanties__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .garanties__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}
@media (min-width: 1025px) {
    .garanties__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}
.garantie-card {
    background: var(--blanc);
    border: 0.5px solid rgba(15, 17, 21, 0.08);
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.garantie-card__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.garantie-card .h4 {
    font-size: 18px;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}
.garantie-card .body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(15, 17, 21, 0.72);
    margin: 0;
    text-align: center;
}
.garanties__footnote {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(15, 17, 21, 0.55);
    max-width: 640px;
    margin: 48px auto 0;
    text-align: center;
    font-style: italic;
}

/* Remove obsolete .apropos / founder-photo styles (section deleted) */

/* ==========================================================
   SECTION 8b — COMPARATIF (Virage vs Booking vs Wix vs Agence)
   Light section, editorial table, Virage column highlighted
   in subtle ochre. Mobile: horizontally scrollable.
   ========================================================== */
/* ==========================================================
   PROJECTION AN 1 — Before/after table for year 1
   Light section, "Avec Virage" column highlighted in ochre,
   "Avant Virage" column dimmed for visual contrast.
   ========================================================== */
.projection {
    background: var(--papier-sable);
    padding: var(--section-pad) 0;
}
.projection__sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(15, 17, 21, 0.7);
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}
.projection__wrap {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--gris-ligne);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 36px -28px rgba(15, 17, 21, 0.18);
}
.projection__table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(11px, 2.4vw, 15px);
    line-height: 1.45;
    table-layout: fixed;
}
.projection__table thead th {
    color: var(--noir-route);
    font-size: clamp(10px, 1.9vw, 12px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: clamp(10px, 2.2vw, 22px) clamp(8px, 2vw, 20px);
    border-bottom: 1px solid var(--gris-ligne);
    vertical-align: bottom;
    background: rgba(15, 17, 21, 0.04);
    word-break: break-word;
    hyphens: auto;
}
.projection__table thead th.projection__col--before {
    color: rgba(15, 17, 21, 0.55);
    background: rgba(15, 17, 21, 0.04);
}
.projection__table thead th.projection__col--after {
    background: rgba(196, 123, 42, 0.12);
    color: var(--ocre-marrakchi);
}
.projection__table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--noir-route);
    padding: clamp(10px, 2vw, 18px) clamp(8px, 2vw, 20px);
    border-bottom: 1px solid var(--gris-ligne);
    background: #fff;
    vertical-align: top;
    width: 36%;
    word-break: break-word;
    hyphens: auto;
}
.projection__cell {
    padding: clamp(10px, 2vw, 18px) clamp(8px, 2vw, 20px);
    border-bottom: 1px solid var(--gris-ligne);
    color: rgba(15, 17, 21, 0.78);
    vertical-align: top;
    width: 32%;
    word-break: break-word;
    hyphens: auto;
}
.projection__table tbody tr td:last-child {
    background: rgba(196, 123, 42, 0.06);
    color: var(--noir-route);
    font-weight: 500;
}
.projection__table tbody tr td:last-child strong {
    color: var(--ocre-marrakchi);
    font-weight: 700;
}
.projection__cell--ok {
    color: var(--noir-route);
}
.projection__cell--bad {
    color: rgba(193, 67, 42, 0.78);
    text-decoration: line-through;
    text-decoration-color: rgba(193, 67, 42, 0.35);
    text-decoration-thickness: 1px;
}
.projection__cell--bad strong {
    text-decoration: line-through;
    text-decoration-color: rgba(193, 67, 42, 0.55);
}
.projection__table tbody tr:last-child th,
.projection__table tbody tr:last-child td {
    border-bottom: 0;
}
.projection__note {
    font-size: 13px;
    color: rgba(15, 17, 21, 0.55);
    text-align: center;
    margin-top: 32px;
    font-style: italic;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

html[dir="rtl"] .projection__table thead th,
html[dir="rtl"] .projection__table tbody th {
    text-align: right;
}

/* ==========================================================
   TESTIMONIALS (Virage) — hidden until first real client quote.
   Remove `hidden` attribute on the <section> to publish.
   ========================================================== */
.testimonials-virage {
    background: var(--blanc);
    padding: var(--section-pad) 0;
}
.testimonials-virage[hidden] {
    display: none !important;
}
.testimonials-virage .h2 {
    margin-bottom: 56px;
}
.testimonials-virage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.testimonial-virage {
    padding: 32px 28px;
    background: var(--papier-sable);
    border: 1px solid var(--gris-ligne);
    border-radius: 14px;
}
.testimonial-virage__quote {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--noir-route);
    font-weight: 400;
    quotes: none;
}
.testimonial-virage__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--gris-ligne);
    padding-top: 16px;
}
.testimonial-virage__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--noir-route);
}
.testimonial-virage__role {
    font-size: 13px;
    color: rgba(15, 17, 21, 0.6);
    letter-spacing: 0.02em;
}

/* ========================================================== */
/* SECTION 8 — FAQ                                             */
/* ========================================================== */
.faq {
    background: var(--blanc);
    padding: var(--section-pad) 0;
}
.faq__container { max-width: 800px; }
.faq .h2 { margin-bottom: 64px; }

.faq__list {
    border-bottom: 0.5px solid rgba(15, 17, 21, 0.12);
}
.faq__item {
    border-top: 0.5px solid rgba(15, 17, 21, 0.12);
    padding: 0;
}
.faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    color: var(--noir-route);
    transition: color 200ms var(--ease-premium);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ocre-dark); }

.faq__icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--ocre-marrakchi);
    font-weight: 400;
    line-height: 1;
    transition: transform 300ms var(--ease-premium);
    display: inline-block;
}
.faq__item[open] .faq__icon {
    transform: rotate(45deg);
}

.faq__a {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(15, 17, 21, 0.75);
    padding: 0 0 24px;
    max-width: 700px;
}

/* Emphasis FAQ item (the "problème" answer) — refined: ochre left-border, one phrase in Rouge Frein */
.faq__item--emphasis[open] .faq__a {
    border-left: 2px solid var(--ocre-marrakchi);
    padding-left: 16px;
    margin-left: -18px;
    margin-top: 4px;
}
.faq__emphasis {
    color: var(--rouge-frein);
    font-weight: 500;
}

/* ========================================================== */
/* SECTION 9 — FINAL CTA                                       */
/* ========================================================== */
.final-cta {
    background: var(--noir-route);
    padding: calc(var(--section-pad) + 40px) 0 var(--section-pad);
    color: var(--papier-sable);
}
.final-cta__container {
    max-width: 900px;
    text-align: center;
}
.final-cta__icon {
    margin: 0 auto;
    height: auto;
}
.final-cta .h2 { margin-top: 32px; margin-bottom: 24px; }
.final-cta__sub {
    font-size: 18px;
    color: rgba(242, 236, 222, 0.7);
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.6;
}
.final-cta__row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.final-cta__note {
    font-size: 13px;
    color: rgba(242, 236, 222, 0.5);
    margin: 32px 0 0;
}

/* ========================================================== */
/* FOOTER                                                      */
/* ========================================================== */
/* ========================================================== */
/* FOOTER (redesigned — 4-column grid, ordered)                */
/* ========================================================== */
.footer {
    background: var(--noir-route);
    color: var(--papier-sable);
    padding: 64px 0 32px;
    border-top: 0.5px solid rgba(242, 236, 222, 0.08);
}

/* ---- Grid layout ---- */
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

/* ---- Mobile (< 640px) — 2-column row: Navigation on the left
   (compact), Contact + Légal stacked on the right (wider so the
   phone number fits on a single line). Brand block now lives in
   the separate .brand-strip section above the footer. ---- */
@media (max-width: 639px) {
    .footer__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        column-gap: 20px;
        row-gap: 32px;
    }
    /* Navigation: left column, spans the height of Contact + Légal */
    .footer__grid > nav.footer__col {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    /* Contact: right column, top */
    .footer__grid > .footer__col:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }
    /* Légal: right column, below Contact */
    .footer__grid > .footer__col:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }
    /* Allow contact text to shrink slightly if needed but stay one-line */
    .footer__contact-line {
        font-size: 13px;
        gap: 8px;
    }
}

/* Very narrow phones (< 380px) — slightly smaller font keeps the
   phone number on one line without wrapping. */
@media (max-width: 379px) {
    .footer__contact-line { font-size: 12px; gap: 6px; }
    .footer__icon { width: 14px; height: 14px; }
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }
}
@media (min-width: 1024px) {
    .footer__grid {
        /* 3 ordered columns: Navigation · Contact · Legal (brand moved to brand-strip above) */
        grid-template-columns: 1fr 1fr 1fr;
        gap: 56px;
        align-items: start;
    }
}

/* ============================================================
   BRAND STRIP — small horizontal section above the footer
   Houses the Virage logo, tagline and "Chat on WhatsApp" CTA.
   ============================================================ */
.brand-strip {
    background: var(--noir-route);
    border-top: 0.5px solid rgba(242, 236, 222, 0.08);
    padding: 28px 0;
}
.brand-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 28px;
    text-align: center;
}
.brand-strip__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.brand-strip__img {
    height: 96px;
    width: auto;
    max-width: 320px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.brand-strip__tagline {
    margin: 0;
    color: rgba(242, 236, 222, 0.72);
    font-size: 13px;
    line-height: 1.5;
}
.brand-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: transparent;
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.45);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.brand-strip__cta:hover {
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
}
.brand-strip__cta-icon {
    width: 16px;
    height: 16px;
}
@media (max-width: 639px) {
    .brand-strip {
        padding: 22px 0;
    }
    .brand-strip__inner {
        gap: 14px 20px;
    }
    .brand-strip__img {
        height: 76px;
        max-width: 260px;
    }
    .brand-strip__tagline {
        flex-basis: 100%;
        font-size: 12.5px;
    }
}

/* ---- Brand column ---- */
.footer__col--brand {
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (max-width: 639px) {
    .footer__col--brand {
        align-items: center;
    }
    .footer__col--brand .footer__tagline {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}
.footer__logo {
    display: inline-block;
    margin-bottom: 14px;
}
.footer__tagline {
    font-size: 14px;
    color: rgba(242, 236, 222, 0.55);
    margin: 0 0 22px;
    line-height: 1.55;
}
.footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: rgba(37, 211, 102, 0.10);
    border: 1px solid rgba(37, 211, 102, 0.40);
    border-radius: 999px;
    color: #25D366;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 200ms var(--ease-premium), border-color 200ms var(--ease-premium), color 200ms var(--ease-premium);
}
.footer__cta:hover {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.footer__cta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Column heading ---- */
.footer__heading {
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--ocre-marrakchi);
    margin: 0 0 18px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ---- Link lists ---- */
.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer__links li {
    font-size: 13.5px;
    color: rgba(242, 236, 222, 0.72);
    line-height: 1.5;
}
.footer__links a {
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
    color: rgba(242, 236, 222, 0.78);
    background-image: linear-gradient(var(--ocre-marrakchi), var(--ocre-marrakchi));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: color 200ms var(--ease-premium), background-size 260ms var(--ease-premium);
}
.footer__links a:hover {
    color: var(--papier-sable);
    background-size: 100% 1px;
}
html[dir="rtl"] .footer__links a { background-position: right bottom; }

/* ---- Contact lines (icon + text on the same line, never wraps) ---- */
.footer__links--contact {
    gap: 12px;
}
.footer__contact-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    white-space: nowrap;       /* keep the phone number on one line */
}
.footer__contact-line > span {
    white-space: nowrap;
}
.footer__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ocre-marrakchi);
    opacity: 0.85;
}

/* ---- Bottom bar ---- */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 0.5px solid rgba(242, 236, 222, 0.08);
    font-size: 12px;
    color: rgba(242, 236, 222, 0.42);
    flex-wrap: wrap;
    gap: 12px;
}
.footer__copyright {
    letter-spacing: 0.02em;
}
.footer__made {
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    .footer__bottom {
        justify-content: center;
        text-align: center;
    }
}

/* ========================================================== */
/* TESTIMONIAL (hidden by default, reveal when ready)          */
/* ========================================================== */
.testimonial {
    background: var(--papier-sable);
    padding: var(--section-pad) 0;
    border-top: 0.5px solid var(--gris-ligne);
}
.testimonial__container {
    max-width: 800px;
    text-align: center;
}
.testimonial__quote {
    width: 32px;
    height: 32px;
    margin: 0 auto 24px;
    opacity: 0.7;
}
.testimonial__text {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--noir-route);
    margin: 0 0 32px;
    font-style: normal;
}
@media (min-width: 1025px) {
    .testimonial__text { font-size: 36px; }
}
.testimonial__author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.testimonial__name {
    font-size: 15px;
    font-weight: 500;
    color: var(--noir-route);
}
.testimonial__role {
    font-size: 13px;
    color: rgba(15, 17, 21, 0.6);
}

/* ========================================================== */
/* SECTION TRANSITION — FAQ → FINAL CTA                        */
/* ========================================================== */
.final-cta {
    border-top: 0.5px solid rgba(196, 123, 42, 0.2);
}

/* ========================================================== */
/* LEGAL PAGES (mentions-legales.html, confidentialite.html)   */
/* ========================================================== */
.legal-page { background: var(--papier-sable); }
.legal-main {
    padding: 128px 0 96px;
    min-height: 80vh;
}
.legal-container {
    max-width: 780px;
}
.legal-h1 {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--noir-route);
    margin: 16px 0 16px;
    line-height: 1.15;
}
@media (min-width: 768px) {
    .legal-h1 { font-size: 48px; }
}
.legal-intro {
    font-size: 14px;
    color: rgba(15, 17, 21, 0.55);
    margin: 0 0 56px;
    font-style: italic;
}
.legal-section {
    margin-bottom: 40px;
}
.legal-h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--noir-route);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    line-height: 1.3;
}
.legal-section p,
.legal-section li {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(15, 17, 21, 0.8);
    margin: 0 0 12px;
}
.legal-list {
    padding-left: 20px;
    margin: 0 0 12px;
}
.legal-list li {
    list-style: disc;
    margin-bottom: 8px;
}
.legal-list li::marker {
    color: var(--ocre-marrakchi);
}
.legal-section strong {
    color: var(--noir-route);
    font-weight: 500;
}
.legal-section em {
    color: rgba(15, 17, 21, 0.55);
    font-style: italic;
}
.legal-section code {
    font-family: 'Menlo', 'Courier New', monospace;
    font-size: 13px;
    background: rgba(196, 123, 42, 0.08);
    color: var(--ocre-dark);
    padding: 1px 6px;
    border-radius: 3px;
}
.legal-note {
    font-size: 13px;
    color: rgba(15, 17, 21, 0.55);
    font-style: italic;
    border-left: 2px solid var(--ocre-marrakchi);
    padding: 4px 0 4px 14px;
    margin: 16px 0 0;
}
.legal-back {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 0.5px solid rgba(15, 17, 21, 0.1);
}
.legal-back a {
    font-size: 14px;
    color: var(--ocre-marrakchi);
    transition: color 200ms var(--ease-premium);
}
.legal-back a:hover {
    color: var(--ocre-dark);
}

/* ========================================================== */
/* SCROLL PROGRESS INDICATOR                                   */
/* 1px ochre bar anchored to the top of the viewport, under    */
/* the 64px nav. Width driven by --scroll-progress (0→100%)    */
/* set in JS with a CSS custom property — no layout thrash.    */
/* ========================================================== */
.scroll-progress {
    position: fixed;
    top: 64px;
    left: 0;
    height: 1px;
    width: var(--scroll-progress, 0%);
    background: var(--ocre-marrakchi);
    z-index: 99;
    pointer-events: none;
    transition: width 60ms linear, opacity 200ms var(--ease-premium);
    opacity: 0;
}
.scroll-progress.is-active {
    opacity: 1;
}
html[dir="rtl"] .scroll-progress {
    left: auto;
    right: 0;
}

/* ========================================================== */
/* REDUCED-MOTION OVERRIDES FOR NEW MICRO-INTERACTIONS         */
/* ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active { transform: none; }
    .btn--pulse { animation: none; }
    .h2--line::after { transition: none; }
    .h2--line.is-visible::after { width: 48px; }
    .calculator__result-number,
    .calculator__result-number.is-kicking { transition: none; transform: none; }
    .scroll-progress { transition: none; }
    .topnav__links a::after { transition: none; }
    .footer__links a { transition: color 200ms var(--ease-premium); }
}

/* ========================================================== */
/* DEMO SWITCHER — Atlas ⇄ Medina (Exemple section)            */
/* ========================================================== */
.demo-switcher {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    margin: 0 auto 36px;
    background: rgba(242, 236, 222, 0.08);          /* sand tint on dark */
    border: 1px solid rgba(242, 236, 222, 0.22);    /* visible outline on dark */
    border-radius: 999px;
    justify-content: center;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Center the switcher within the section */
.exemple .demo-switcher {
    display: flex;
    margin-bottom: 36px;
}
.demo-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--papier-sable);                      /* light text on dark section */
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    transition: background 200ms var(--ease-premium), color 200ms var(--ease-premium),
                box-shadow 200ms var(--ease-premium);
}
.demo-switcher__btn:hover {
    background: rgba(242, 236, 222, 0.12);           /* sand wash on hover */
    color: #fff;
}
.demo-switcher__btn.is-active {
    background: var(--papier-sable);                 /* sand pill */
    color: var(--noir-route);                        /* dark text inside */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.demo-switcher__btn.is-active .demo-switcher__text span {
    color: rgba(15, 17, 21, 0.65);                   /* muted dark sub-label */
}
.demo-switcher__mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.demo-switcher__mark--medina {
    background: #C65D3A; /* terracotta */
}
.demo-switcher__text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.demo-switcher__text strong {
    font-weight: 700;
    font-size: 14px;
}
.demo-switcher__text span {
    font-size: 11px;
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* ==========================================================
   DEMO NUDGE — two-step instruction above the agency switcher
   "1. Choose the agency  →  2. Click the screen ↓"
   Sits on the dark .exemple section. Subtle, guides the eye
   without competing with the actual switcher buttons below.
   ========================================================== */
.demo-nudge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 auto 18px;
    padding: 0 16px;
    color: rgba(242, 236, 222, 0.85);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    width: fit-content;
    max-width: 100%;
    text-align: center;
}
.demo-nudge__step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.demo-nudge__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    color: var(--noir-route);
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(196, 123, 42, 0.45);
    animation: demoNudgePulse 2.4s ease-in-out infinite;
}
.demo-nudge__step:nth-child(3) .demo-nudge__num {
    /* Stagger pulse on the second number */
    animation-delay: 1.2s;
}
.demo-nudge__text {
    color: var(--papier-sable);
    font-weight: 500;
}
.demo-nudge__sep {
    color: rgba(242, 236, 222, 0.4);
    font-size: 16px;
    font-weight: 400;
    user-select: none;
}
.demo-nudge__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--ocre-marrakchi);
    animation: demoNudgeBounce 1.6s ease-in-out infinite;
}
@keyframes demoNudgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 123, 42, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(196, 123, 42, 0); }
}
@keyframes demoNudgeBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Mobile: stack the two steps vertically, hide the separator */
@media (max-width: 600px) {
    .demo-nudge {
        flex-direction: column;
        gap: 10px;
        font-size: 13px;
    }
    .demo-nudge__sep {
        display: none;
    }
    .demo-nudge__arrow {
        margin-left: 0;
    }
}

/* Reduced motion: disable pulse / bounce */
@media (prefers-reduced-motion: reduce) {
    .demo-nudge__num    { animation: none; }
    .demo-nudge__arrow  { animation: none; }
}

/* ---------- HERO DEMO CHIPS — mini switcher above laptop ----------
   Sits on the dark hero background, so colors are inverted from the
   light .demo-switcher used in the "Exemple en direct" section. */
.hero-demo-chips {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 auto 14px;
    background: rgba(242, 236, 222, 0.08);          /* sand tint on dark */
    border: 1px solid rgba(242, 236, 222, 0.22);    /* visible outline on dark */
    border-radius: 999px;
    align-self: center;
    width: fit-content;
}
.hero-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--papier-sable);                      /* light text on dark hero */
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background 200ms var(--ease-premium), color 200ms var(--ease-premium);
}
.hero-demo-chip small {
    font-weight: 400;
    opacity: 0.75;
    margin-left: 2px;
}
.hero-demo-chip:hover {
    background: rgba(242, 236, 222, 0.12);           /* sand wash on hover */
    color: #fff;
}
.hero-demo-chip.is-active {
    background: var(--papier-sable);                 /* sand pill */
    color: var(--noir-route);                        /* dark text inside */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.hero-demo-chip.is-active small {
    opacity: 0.7;
}
.hero-demo-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ocre-marrakchi);
    box-shadow: 0 0 0 2px rgba(196, 123, 42, 0.25);
}
.hero-demo-chip__dot--medina {
    background: #C65D3A;
    box-shadow: 0 0 0 2px rgba(198, 93, 58, 0.25);
}

/* Iframe swap fade transition */
#demoLaptopFrame,
#demoPhoneFrame,
#heroLaptopFrame {
    transition: opacity 220ms var(--ease-premium);
}
.is-swapping #demoLaptopFrame,
.is-swapping #demoPhoneFrame,
.is-swapping #heroLaptopFrame {
    opacity: 0;
}

@media (max-width: 540px) {
    .demo-switcher {
        flex-direction: column;
        border-radius: 18px;
        gap: 4px;
        width: 92%;
    }
    .demo-switcher__btn {
        width: 100%;
        justify-content: flex-start;
    }
    .hero-demo-chip {
        font-size: 11px;
        padding: 6px 10px;
    }
    .hero-demo-chip small {
        display: none;
    }
}

/* Center the hero switcher pill on tablet & mobile.
   On desktop it stays left-aligned with align-self:center inside the flex column;
   on smaller screens we force it horizontally centered above the laptop. */
@media (max-width: 900px) {
    .hero-split__media {
        text-align: center;
    }
    .hero-demo-chips {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }
}

/* ==========================================================
   MISSION SECTION — "Notre mission"
   Short, centered editorial statement on a sand background.
   No photo, no bio — pure positioning.
   ========================================================== */
.mission {
    background: var(--papier-sable);
    padding: var(--section-pad) 0;
    border-top: 0.5px solid rgba(15, 17, 21, 0.06);
    border-bottom: 0.5px solid rgba(15, 17, 21, 0.06);
}
.mission__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 0 16px;
}
.mission .eyebrow {
    margin-bottom: 14px;
}
.mission .h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    margin-bottom: 26px;
    color: var(--noir-route);
}
.mission__lead {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.65;
    color: rgba(15, 17, 21, 0.78);
    margin: 0 auto 28px;
    max-width: 600px;
}
.mission__signature {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 17, 21, 0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 17, 21, 0.12);
    margin: 0;
}
@media (max-width: 600px) {
    .mission .h2 { font-size: 26px; }
    .mission__lead { font-size: 15px; }
}

/* ==========================================================
   COMPARATIF — Virage vs alternatives
   Editorial-style comparison table, the Virage column is
   highlighted with a soft sand band so the reader's eye
   anchors on it without the table feeling boastful.
   ========================================================== */
.comparatif {
    background: var(--noir-route);
    color: var(--papier-sable);
    padding: var(--section-pad) 0;
}
.comparatif .h2 {
    color: var(--papier-sable);
}
.comparatif__sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(242, 236, 222, 0.7);
    max-width: 580px;
    margin: 0 auto 56px;
    text-align: center;
}
.comparatif__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    max-width: 1080px;
    padding-bottom: 8px;
}
.comparatif__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 720px;
    background: rgba(242, 236, 222, 0.02);
    border-radius: 12px;
    overflow: hidden;
}
.comparatif__table thead th {
    text-align: left;
    padding: 18px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(242, 236, 222, 0.55);
    border-bottom: 1px solid rgba(242, 236, 222, 0.12);
    background: rgba(242, 236, 222, 0.03);
}
.comparatif__th-feature {
    width: 26%;
}
.comparatif__th-virage {
    color: var(--ocre-marrakchi) !important;
    background: rgba(196, 123, 42, 0.08) !important;
    font-weight: 700 !important;
}
.comparatif__table tbody th {
    text-align: left;
    padding: 18px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--papier-sable);
    background: rgba(242, 236, 222, 0.03);
    border-bottom: 1px solid rgba(242, 236, 222, 0.08);
    line-height: 1.4;
}
.comparatif__table tbody td {
    padding: 18px 16px;
    color: rgba(242, 236, 222, 0.8);
    border-bottom: 1px solid rgba(242, 236, 222, 0.08);
    line-height: 1.4;
    vertical-align: middle;
}
.comparatif__table tbody tr:last-child th,
.comparatif__table tbody tr:last-child td {
    border-bottom: 0;
}
.comparatif__td--virage {
    background: rgba(196, 123, 42, 0.06);
    color: var(--papier-sable) !important;
    font-weight: 600;
    border-left: 1px solid rgba(196, 123, 42, 0.2);
    border-right: 1px solid rgba(196, 123, 42, 0.2);
}
.comparatif__td--virage strong {
    color: var(--ocre-marrakchi);
}
.comparatif__td--good {
    /* Subtle positive cue (green-ish hairline only, no garish color) */
}
.comparatif__td--good::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6FA28A;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.comparatif__td--virage.comparatif__td--good::before {
    background: var(--ocre-marrakchi);
}
.comparatif__td--bad {
    color: rgba(242, 236, 222, 0.5) !important;
}
.comparatif__td--bad::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(193, 67, 42, 0.7);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.comparatif__td--mid {
    color: rgba(242, 236, 222, 0.65) !important;
}
.comparatif__td--mid::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(242, 236, 222, 0.35);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.comparatif__note {
    margin: 32px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(242, 236, 222, 0.6);
    font-style: italic;
}

/* Mobile: keep horizontal scroll, hint at it */
@media (max-width: 760px) {
    .comparatif__table {
        font-size: 13px;
    }
    .comparatif__table thead th,
    .comparatif__table tbody th,
    .comparatif__table tbody td {
        padding: 14px 12px;
    }
}

/* ==========================================================
   FLOATING WHATSAPP BUBBLE
   Mobile-first persistent CTA. Pulses gently to draw the eye
   without being annoying. Hidden on large desktops where the
   topnav already has a clear WhatsApp link.
   ========================================================== */
.wa-bubble {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 95;                                /* under scroll-progress */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(18, 140, 126, 0.4),
                0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 220ms var(--ease-premium), box-shadow 220ms var(--ease-premium);
}
.wa-bubble:hover,
.wa-bubble:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 36px rgba(18, 140, 126, 0.55),
                0 6px 14px rgba(0, 0, 0, 0.25);
}
.wa-bubble svg {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 2;
}
.wa-bubble__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.45);
    animation: waBubblePulse 2.4s ease-out infinite;
    z-index: 1;
}
@keyframes waBubblePulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0;    }
    100% { transform: scale(1.6); opacity: 0;    }
}
/* RTL: flip to the left side */
html[dir="rtl"] .wa-bubble {
    right: auto;
    left: 18px;
}
/* Hide on large desktops — the navbar already has a WhatsApp link */
@media (min-width: 1025px) {
    .wa-bubble { display: none; }
}
/* Reduced motion: kill the pulse */
@media (prefers-reduced-motion: reduce) {
    .wa-bubble__pulse { animation: none; opacity: 0; }
}