/* ==========================================================================
   Oplé — Site vitrine & espace commerçant
   Langage visuel repris de l'application : fond « porcelaine » où dérivent des halos
   menthe, soleil et ciel, surfaces en verre dépoli, accent cyan de l'app, titres fins
   et serrés. Les captures de l'app et les animations (apparitions, parallaxe, survols)
   apportent le reste.
   ========================================================================== */

:root {
    /* Couleurs (reprises de l'application mobile) */
    --signal: #0e7490;                     /* Cyan de l'app, nuance foncée : liens, textes d'action (lisible) */
    --signal-press: #155e75;               /* Survol / appui */
    --signal-bright: #0891b2;              /* Cyan de l'app : boutons, dégradés, bordures actives */
    --signal-glow: #22d3ee;                /* Reflet des dégradés */
    --signal-tint: rgba(8, 145, 178, 0.1); /* Fond teinté */
    --signal-on-dark: #67e8f9;             /* Liens sur fond sombre */
    --carbon: #1e293b;                     /* Texte principal (ardoise, comme l'app) */
    --slate: #526072;                      /* Texte secondaire */
    --platinum: #dbe3ea;                   /* Filets, bordures */
    --ash: #94a3b8;                        /* Texte désactivé */
    --cloud: #f9f8f6;                      /* Fond « porcelaine » de l'app */
    --paper: #ffffff;                      /* Surfaces pleines */
    --glass: rgba(255, 255, 255, 0.66);    /* Cartes en verre dépoli */
    --glass-strong: rgba(255, 255, 255, 0.84);
    --glass-border: rgba(255, 255, 255, 0.78);
    --mint: 167, 243, 208;                 /* Halos du fond : mêmes teintes que l'app */
    --sun: 253, 224, 71;
    --sky: 186, 230, 253;
    --obsidian: #0e181c;                   /* Bandeau final (mode sombre de l'app) */
    --night: #131f24;                      /* Section sombre des offres (« anthracite » de l'app) */
    --danger: #a23b3b;                     /* Messages d'erreur uniquement */

    /* Typographie */
    --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-action: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Formes */
    --radius: 12px;         /* Boutons, champs (arrondis de l'app) */
    --radius-pill: 20px;    /* Pastilles */
    --radius-img: 28px;     /* Visuels, cartes */
    --radius-panel: 32px;   /* Grands panneaux */
    --shadow-btn: 0 10px 22px -12px rgba(8, 145, 178, 0.7);
    --shadow-card: 0 12px 30px -14px rgba(15, 23, 42, 0.14);
    --shadow-lift: 0 26px 50px -26px rgba(15, 23, 42, 0.32);

    /* Mouvement */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Mise en page */
    --max: 1200px;
    --gutter: 24px;
    --section: 96px;
    --header-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--cloud);
    color: var(--carbon);
    font: 400 16px/1.5 var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fond de l'application : halos menthe, soleil et ciel qui dérivent lentement derrière la page
   (dégradés doux sur deux calques fixes : aucune image, animation légère) */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: -10vmax;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
body::before {
    background:
        radial-gradient(36vmax 32vmax at 24% 22%, rgba(var(--mint), 0.42), transparent 70%),
        radial-gradient(34vmax 30vmax at 82% 26%, rgba(var(--sky), 0.5), transparent 70%),
        radial-gradient(34vmax 28vmax at 26% 80%, rgba(var(--sun), 0.24), transparent 70%);
    animation: ambient-a 26s ease-in-out infinite alternate;
}
body::after {
    background:
        radial-gradient(30vmax 26vmax at 78% 76%, rgba(var(--mint), 0.34), transparent 70%),
        radial-gradient(26vmax 22vmax at 52% 50%, rgba(var(--sky), 0.26), transparent 70%),
        radial-gradient(22vmax 20vmax at 90% 94%, rgba(var(--sun), 0.2), transparent 70%);
    animation: ambient-b 32s ease-in-out infinite alternate;
}
@keyframes ambient-a { to { transform: translate3d(5vw, 4vh, 0) scale(1.08); } }
@keyframes ambient-b { to { transform: translate3d(-6vw, -5vh, 0) scale(1.12); } }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-press); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

h1, h2, h3, p, ul, figure { margin: 0; }

/* Les éléments décalés avant leur apparition ne doivent pas élargir la page (clip garde l'en-tête collant) */
main { overflow-x: clip; }

.container {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--carbon);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius);
}
.skip-link:focus { top: 16px; color: #fff; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Typographie ---------- */
.display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 5.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.012em;
    font-feature-settings: "ss01" on;
}

.h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.012em;
}

.h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.19;
    letter-spacing: -0.012em;
}

.h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.lead { font-size: 18px; line-height: 1.55; color: var(--slate); }
.muted { color: var(--slate); }
.small { font-size: 14px; }

/* ==========================================================================
   Animations au défilement (activées seulement si le script tourne : classe .js)
   ========================================================================== */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity .8s var(--ease-out) var(--reveal-delay, 0ms),
        transform .8s var(--ease-out) var(--reveal-delay, 0ms),
        translate .45s var(--ease-out),
        box-shadow .45s ease,
        border-color .3s ease,
        background-color .3s ease;
}
.js [data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Titres révélés mot à mot (masqués le temps du découpage pour éviter un clignotement) */
.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-split] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.js [data-split] .w > span {
    display: inline-block;
    transform: translate3d(0, 108%, 0);
    transition: transform .9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms + var(--reveal-delay, 0ms));
}
.js [data-split].is-visible .w > span { transform: none; }

/* Barre de progression de lecture */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 3px;
    background: linear-gradient(90deg, var(--signal-bright), var(--signal-glow));
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ---------- Boutons & liens ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: 500 18px/1.1 var(--font-action);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .3s ease,
        transform .3s var(--ease-out);
}
.btn:active { transform: scale(0.97); }

/* Dégradé cyan de l'app (texte blanc lisible sur toute la hauteur du bouton) */
.btn--primary {
    background: linear-gradient(180deg, #0b88a8, #0e7490);
    color: #fff;
    box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn--primary:hover {
    background: linear-gradient(180deg, #0e7490, #155e75);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px rgba(8, 145, 178, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Reflet qui balaie le bouton au survol */
.btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost { background: rgba(255, 255, 255, 0.6); color: var(--signal); border-color: rgba(14, 116, 144, 0.5); }
/* Remplissage qui glisse de gauche à droite */
.btn--ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--signal-tint);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .4s var(--ease-out);
}
.btn--ghost:hover { color: var(--signal-press); border-color: var(--signal); transform: translateY(-2px); }
.btn--ghost:hover::before { transform: scaleX(1); }

.btn--light { background: #fff; color: var(--carbon); }
.btn--light:hover { background: #ececec; color: var(--carbon); }

.btn--sm { min-height: 38px; padding: 8px 14px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: wait; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.link-arrow { font-size: 16px; font-weight: 500; }
.link-arrow::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- En-tête (collant, effet verre au défilement) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(249, 248, 246, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled {
    background: rgba(249, 248, 246, 0.78);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px -24px rgba(15, 23, 42, 0.35);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 36px; width: auto; transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: scale(1.05) rotate(-2deg); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a, .header-link { position: relative; color: var(--carbon); font-size: 14px; font-weight: 500; }
.nav a { padding: 6px 0; }
.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .35s var(--ease-out);
}
.nav a:hover, .nav a.is-active, .header-link:hover { color: var(--signal); text-decoration: none; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--carbon);
    cursor: pointer;
}
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(249, 248, 246, 0.9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 12px var(--gutter) 28px;
    animation: menu-in .35s var(--ease-out);
}
.mobile-menu a:not(.btn) {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--platinum);
    color: var(--carbon);
    font-size: 18px;
}
.mobile-menu .btn-row { margin-top: 24px; }
.mobile-menu .btn { flex: 1 1 200px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section--cloud {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.2));
    border-block: 1px solid rgba(255, 255, 255, 0.7);
}

.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; }
.section-head .link-arrow { display: inline-block; margin-top: 18px; }

.tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--signal-tint);
    color: var(--signal);
    font-size: 13px;
    font-weight: 500;
}
.tag--dark { background: rgba(103, 232, 249, 0.12); color: var(--signal-on-dark); }

/* ---------- Téléphone (cadre des captures) ---------- */
.phone {
    --w: 260px;
    position: relative;
    flex-shrink: 0;
    width: var(--w);
    padding: calc(var(--w) * 0.032);
    background: #111418;
    border-radius: calc(var(--w) * 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform .6s var(--ease-out), rotate .6s var(--ease-out), translate .12s linear;
}
.phone img {
    width: 100%;
    aspect-ratio: 390 / 844;
    object-fit: cover;
    border-radius: calc(var(--w) * 0.12);
    background: #fff;
}
/* Parallaxe : propriété translate, indépendante des transformations d'animation */
[data-parallax] { translate: 0 var(--py, 0px); }

/* Écran à calques : capture + voile + pop-up d'offre animé */
.phone__screen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: calc(var(--w) * 0.12);
    background: #fff;
}
.phone__screen > img:first-child { border-radius: 0; }
.phone__dim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: opacity .5s ease;
}
.js .phone__dim { opacity: 0; }
.phone .phone__pop {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: fill;
    border-radius: 0;
    background: transparent;
    opacity: 0;
    transform-origin: 50% 35%;
    transition: opacity .3s ease, transform .75s var(--ease-spring);
    pointer-events: none;
}
.phone .phone__pop.is-active { opacity: 1; }
.js .phone .phone__pop { transform: translate3d(0, 10%, 0) scale(0.86); }
.js .phone .phone__pop.is-active { opacity: 0; }
.js .is-notified .phone__dim { opacity: 1; }
.js .is-notified .phone__pop.is-active { opacity: 1; transform: none; }
.js .is-notified .phone__pop.is-leaving { opacity: 0; transform: translate3d(0, -4%, 0) scale(0.94); transition-duration: .3s, .3s; }

/* Onde qui part du téléphone à l'arrivée d'une offre */
.phone__ripple {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--ripple, rgba(8, 145, 178, 0.5));
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.is-pinging .phone__ripple { animation: ripple 1.4s var(--ease-out); }
@keyframes ripple {
    0% { opacity: .9; transform: translate(-50%, -50%) scale(0.55); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

/* ---------- Hero ---------- */
.hero { padding: 40px 0 var(--section); }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: 48px;
    align-items: center;
}

.hero__copy .lead { margin-top: 20px; max-width: 32em; }
.hero__copy .btn-row { margin-top: 28px; }
.hero__note { margin-top: 18px; font-size: 14px; color: var(--slate); }

/* Arguments rassurants sous le texte d'accroche */
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; padding: 0; list-style: none; }
.hero__proof li { position: relative; padding-left: 27px; font-size: 15px; font-weight: 500; }
.hero__proof li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--signal-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230e7490' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 19px no-repeat;
}

.hero__visual {
    position: relative;
    aspect-ratio: 1 / 0.92;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
/* Lueur qui dérive lentement dans le fond du visuel */
.hero__visual::before {
    content: '';
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    left: 15%;
    top: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.3), rgba(var(--sky), 0.25) 40%, transparent 68%);
    animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: translate(-12%, -6%) scale(1); }
    to { transform: translate(14%, 10%) scale(1.15); }
}
.hero__stage { position: absolute; inset: 0; }
/* Trois téléphones : scan en caisse, carte de fidélité, notification reçue */
.hero__visual .phone { position: absolute; --w: clamp(170px, 15.5vw, 228px); }
.hero__visual .phone--scan { left: 3%; top: 17%; }
.hero__visual .phone--card { left: 32%; top: 6%; }
.hero__visual .phone--push { right: 3%; top: 13%; }

/* Entrée des téléphones l'un après l'autre, puis flottement */
.js .hero__visual .phone { animation: phone-in 1.1s var(--ease-out) both, float 7s ease-in-out 1.3s infinite; }
.js .hero__visual .phone--scan { animation-delay: .1s, 1.3s; animation-duration: 1.1s, 8s; }
.js .hero__visual .phone--card { animation-delay: .22s, 1.5s; }
.js .hero__visual .phone--push { animation-delay: .34s, 1.7s; animation-duration: 1.1s, 7.5s; }

/* Écran de verrouillage de la cliente */
.lock {
    position: relative;
    overflow: hidden;
    aspect-ratio: 390 / 844;
    border-radius: calc(var(--w) * 0.12);
    color: #fff;
    text-align: center;
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(94, 234, 212, 0.8), transparent 60%),
        radial-gradient(90% 55% at 100% 92%, rgba(253, 224, 71, 0.55), transparent 62%),
        linear-gradient(170deg, #0f3b46 0%, #0e7490 48%, #0a262d 100%);
    background-size: 150% 150%;
    animation: wallpaper 16s ease-in-out infinite alternate;
}
@keyframes wallpaper { to { background-position: 100% 100%; } }
.lock::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--w) * 0.03);
    width: 30%;
    height: calc(var(--w) * 0.075);
    transform: translateX(-50%);
    border-radius: 999px;
    background: #05070a;
}
.lock__date { padding-top: calc(var(--w) * 0.2); font-size: calc(var(--w) * 0.055); font-weight: 500; opacity: .92; }
.lock__time { margin-top: calc(var(--w) * 0.004); font: 500 calc(var(--w) * 0.27)/1 var(--font-display); letter-spacing: -0.03em; }

/* Notification push : elle tombe du haut de l'écran */
.push {
    position: absolute;
    left: 4.5%;
    right: 4.5%;
    top: 37%;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--w) * 0.035);
    padding: calc(var(--w) * 0.04);
    border-radius: calc(var(--w) * 0.075);
    background: rgba(250, 250, 252, 0.84);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    color: var(--carbon);
    text-align: left;
    box-shadow:
        0 calc(var(--w) * 0.04) 0 calc(var(--w) * -0.022) rgba(255, 255, 255, 0.38),
        0 14px 30px -14px rgba(0, 0, 0, 0.55);
    transition: transform .9s var(--ease-spring), opacity .35s ease;
}
.js .push { opacity: 0; transform: translate3d(0, -175%, 0) scale(0.92); }
.js .is-pushed .push { opacity: 1; transform: none; }
.push__icon {
    flex-shrink: 0;
    width: calc(var(--w) * 0.13);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 24%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.phone .push__icon img { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; background: transparent; object-fit: cover; }
.push__body { min-width: 0; }
.push__head { display: flex; justify-content: space-between; gap: 6px; font-size: calc(var(--w) * 0.042); line-height: 1.2; color: #6b6b6b; }
.push__app { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #3d3d3d; }
.push__title { margin-top: calc(var(--w) * 0.008); font-size: calc(var(--w) * 0.053); font-weight: 600; line-height: 1.25; }
.push__text { margin-top: calc(var(--w) * 0.004); font-size: calc(var(--w) * 0.049); line-height: 1.3; color: #2e2e2e; }

.lock__actions { position: absolute; left: 9%; right: 9%; bottom: 6.5%; display: flex; justify-content: space-between; }
.lock__btn {
    display: grid;
    place-items: center;
    width: calc(var(--w) * 0.14);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.lock__btn svg { width: 46%; height: 46%; }
.lock__bar {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 34%;
    height: calc(var(--w) * 0.014);
    transform: translateX(-50%);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.88);
}
@keyframes phone-in { from { opacity: 0; transform: translate3d(0, 70px, 0) rotate(-3deg); } }
@keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

/* Pastille « offre envoyée » */
.send-chip {
    position: absolute;
    left: 6%;
    bottom: 9%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--carbon);
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 16px 32px -16px rgba(16, 42, 66, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: opacity .5s ease, transform .7s var(--ease-spring);
}
.js .send-chip { opacity: 0; transform: translate3d(-24px, 0, 0) scale(0.9); }
.send-chip b { font-weight: 600; }
.send-chip__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1f9d63;
    color: #fff;
}
.send-chip__icon svg { width: 16px; height: 16px; }
.js .is-sent .send-chip { opacity: 1; transform: none; }

/* ---------- Bandeau défilant ---------- */
.marquee {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
}
.marquee__label {
    flex-shrink: 0;
    padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2));
    color: var(--slate);
    font-size: 14px;
    font-weight: 500;
}
.marquee__track {
    display: flex;
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__list {
    display: flex;
    flex-shrink: 0;
    gap: 44px;
    padding: 0 22px;
    list-style: none;
    animation: marquee 38s linear infinite;
}
.marquee__list li {
    font: 400 22px/1.2 var(--font-display);
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--carbon);
}
.marquee__list li::after { content: '·'; margin-left: 44px; color: var(--ash); }
.marquee:hover .marquee__list { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Cartes (3 colonnes) ---------- */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: var(--glass);
    box-shadow: var(--shadow-card);
    transition: translate .45s var(--ease-out), box-shadow .45s ease;
}
.card:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); }

.card__media {
    height: 300px;
    border-radius: calc(var(--radius-img) - 6px);
    background: linear-gradient(160deg, rgba(236, 253, 245, 0.95), rgba(224, 242, 254, 0.9) 55%, rgba(254, 249, 195, 0.75));
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding-top: 32px;
}
.card__media .phone { --w: 228px; }
.card:hover .card__media .phone { transform: translate3d(0, -14px, 0) rotate(-1.5deg); }

.card__step { font: 500 14px/1 var(--font-text); color: var(--signal); }
.card .h4 { margin-top: -8px; }
.card p { color: var(--slate); }

/* ---------- Offres & relances (section sombre) ---------- */
.section--dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(55% 45% at 0% 100%, rgba(217, 119, 6, 0.16), transparent 70%),
        radial-gradient(45% 40% at 100% 0%, rgba(45, 212, 191, 0.14), transparent 70%),
        var(--night);
    color: #fff;
}
.section--dark .lead { color: #a9bcc0; }

.notif-section__glow {
    position: absolute;
    right: -10%;
    top: 10%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.34), transparent 62%);
    animation: drift 16s ease-in-out infinite alternate;
    pointer-events: none;
}

.notif {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "head visual"
        "tabs visual"
        "note visual";
    grid-template-rows: auto auto 1fr;
    column-gap: 72px;
    align-items: start;
}
.notif__head { grid-area: head; }
.notif__head .lead { margin-top: 18px; max-width: 34em; }
.notif__tabs { grid-area: tabs; display: grid; gap: 12px; margin-top: 36px; }
.notif__note { grid-area: note; margin-top: 22px; font-size: 14px; color: #86999e; }
.notif__visual {
    grid-area: visual;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 680px;
    align-self: center;
}

.notif-tab {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.notif-tab:hover { background: rgba(255, 255, 255, 0.06); translate: 6px 0; }
.notif-tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.notif-tab__dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 22%, transparent);
}
.notif-tab[aria-selected="true"] .notif-tab__dot { animation: dot-pulse 1.6s ease-in-out infinite; }
@keyframes dot-pulse {
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dot) 10%, transparent); }
}
.notif-tab__body strong { display: block; font: 500 19px/1.3 var(--font-display); letter-spacing: -0.01em; }
.notif-tab__body span { display: block; margin-top: 4px; color: #a9bcc0; font-size: 15px; line-height: 1.45; }
.notif-tab__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--signal-on-dark);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.notif-tab[aria-selected="true"] .notif-tab__bar { animation: tab-progress var(--notif-duration, 5500ms) linear forwards; }
.notif-section.is-paused .notif-tab__bar,
.notif-section:not(.is-playing) .notif-tab__bar { animation-play-state: paused; }
@keyframes tab-progress { to { transform: scaleX(1); } }

/* Halo coloré (couleur de l'offre affichée) */
.notif__halo {
    position: absolute;
    width: 118%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--halo, #f97316);
    -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.35) 30%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.35) 30%, transparent 62%);
    opacity: .5;
    transition: background-color .9s ease;
    animation: halo 6s ease-in-out infinite;
}
@keyframes halo { 50% { transform: scale(1.08); opacity: .62; } }

.phone--notif {
    --w: 300px;
    background: linear-gradient(150deg, #3a414a, #14181d 45%, #20262d);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.phone--notif .phone__ripple { --ripple: color-mix(in srgb, var(--halo, #f97316) 70%, transparent); }

.notif-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    padding: 10px 16px 10px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--carbon);
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.92);
    transition: opacity .45s ease, transform .6s var(--ease-spring);
}
.notif-chip b { font-weight: 600; }
.notif-chip.is-visible { opacity: 1; transform: none; }
.notif-chip--a { left: -2%; top: 18%; }
.notif-chip--b { right: -2%; bottom: 17%; transition-delay: .12s; }
.notif-chip__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--halo, #f97316);
    color: #fff;
    transition: background-color .9s ease;
}
.notif-chip__icon svg { width: 16px; height: 16px; }

/* ---------- Fonctionnalités (lignes alternées) ---------- */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.feature + .feature { margin-top: 96px; }
.feature--reverse .feature__visual { order: -1; }

.feature__copy .h3 + p { margin-top: 18px; }
.feature__copy p { color: var(--slate); font-size: 17px; }

.checklist { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 32px; }
.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--signal-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230e7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform .5s var(--ease-spring);
}
.js .checklist li[data-reveal] { transform: translate3d(0, 12px, 0); }
.js .checklist li[data-reveal]::before { transform: scale(0.3); }
.js .checklist li[data-reveal].is-visible { transform: none; }
.js .checklist li[data-reveal].is-visible::before { transform: none; transition-delay: calc(var(--reveal-delay, 0ms) + .2s); }

.feature__visual {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    height: 540px;
    padding: 48px 32px 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: linear-gradient(160deg, rgba(236, 253, 245, 0.9), rgba(224, 242, 254, 0.85) 55%, rgba(254, 249, 195, 0.7));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.feature__visual .phone { --w: 236px; }
.feature__visual .phone:nth-child(2) { margin-top: 56px; }
.feature__visual:hover .phone:first-child { rotate: -2.5deg; transform: translate3d(-6px, -8px, 0); }
.feature__visual:hover .phone:nth-child(2) { rotate: 2.5deg; transform: translate3d(6px, -14px, 0); }

/* Fenêtre du logiciel Windows */
.window {
    flex-shrink: 0;
    width: 280px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    align-self: center;
    transition: transform .6s var(--ease-out), box-shadow .6s ease, translate .12s linear;
}
.window img { width: 100%; aspect-ratio: 800 / 940; }
.feature__visual--desk { align-items: center; padding: 40px 32px; gap: 28px; }
.feature__visual--desk .phone { --w: 196px; margin-top: 64px; }
.feature__visual--desk:hover .window { transform: translate3d(0, -8px, 0) rotate(-1deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--shadow-lift); }
.feature__visual--desk:hover .phone:nth-child(2) { rotate: 3deg; transform: translate3d(4px, -12px, 0); }

/* ---------- Vos clients (3 téléphones légendés) ---------- */
.phones-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.phone-figure {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 32px 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: var(--glass);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    height: 560px;
    transition: translate .45s var(--ease-out), box-shadow .45s ease;
}
.phone-figure figcaption { margin-bottom: 24px; }
.phone-figure figcaption p { color: var(--slate); margin-top: 8px; }
.phone-figure .phone { --w: 240px; align-self: center; }
/* Au survol, le téléphone remonte pour dévoiler l'écran */
.phone-figure:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); }
.phone-figure:hover .phone { transform: translate3d(0, -64px, 0); }

.section-foot { margin-top: 40px; }

/* ---------- Tarifs ---------- */
.pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: var(--glass);
    box-shadow: var(--shadow-card);
    transition: translate .45s var(--ease-out), box-shadow .45s ease, border-color .3s ease;
}
.plan:hover { translate: 0 -8px; border-color: rgba(8, 145, 178, 0.45); box-shadow: var(--shadow-lift); }
.plan--featured { border: 2px solid var(--signal-bright); padding: 31px; background: var(--glass-strong); }
.plan--featured:hover { border-color: var(--signal-bright); box-shadow: 0 28px 54px -26px rgba(8, 145, 178, 0.55); }
.plan.is-highlighted { border: 2px solid var(--signal-bright); padding: 31px; }

.plan__badge {
    position: absolute;
    top: -13px;
    left: 30px;
    overflow: hidden;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--signal-bright), var(--signal));
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 14px -6px rgba(8, 145, 178, 0.7);
}
/* Reflet périodique sur le badge */
.plan__badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: badge-shine 4.5s ease-in-out 1s infinite;
}
@keyframes badge-shine { 20%, 100% { transform: translateX(120%); } }

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 6px;
    font: 400 50px/1 var(--font-display);
    letter-spacing: -0.012em;
}
.plan__price span { font: 400 16px/1 var(--font-text); color: var(--slate); letter-spacing: 0; }
.plan__desc { color: var(--slate); }
.plan__intro { margin-top: 26px; font-size: 14px; font-weight: 500; }
.plan .checklist { margin: 14px 0 32px; flex: 1; align-content: start; }
.plan .btn { margin-top: auto; }

.pricing-note { margin-top: 28px; max-width: 820px; font-size: 14px; color: var(--slate); }

/* ---------- FAQ ---------- */
.faq {
    max-width: 880px;
    padding: 4px 28px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: var(--glass);
    box-shadow: var(--shadow-card);
}
.faq details + details { border-top: 1px solid var(--platinum); }

.faq summary {
    position: relative;
    padding: 24px 48px 24px 0;
    list-style: none;
    cursor: pointer;
    font: 400 21px/1.3 var(--font-display);
    letter-spacing: -0.01em;
    transition: color .2s ease, padding-left .35s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background:
        linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat;
    transition: transform .35s var(--ease-out);
}
.faq details[open]:not(.is-closing) summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--signal); padding-left: 8px; }
.faq__answer { overflow: hidden; }
.faq__answer p { max-width: 720px; padding: 0 48px 26px 0; color: var(--slate); }

/* ---------- Bandeau final sombre ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--obsidian); color: #fff; padding: var(--section) 0 40px; }
.site-footer__glow {
    position: absolute;
    left: -15%;
    bottom: -40%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.32), rgba(45, 212, 191, 0.1) 45%, transparent 64%);
    animation: drift 18s ease-in-out infinite alternate;
    pointer-events: none;
}
.site-footer .container { position: relative; }
.site-footer .h2 { max-width: 760px; }
.footer-lead { max-width: 620px; margin-top: 18px; color: #b3c3c6; font-size: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.footer-links a { color: var(--signal-on-dark); }
.footer-links a:hover { color: #fff; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 96px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
    color: #a0b1b5;
}
.footer-bottom .brand img { height: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-nav a { color: #d3dfe1; }
.footer-nav a:hover { color: #fff; }
.footer-meta { flex-basis: 100%; font-size: 13px; color: #8ba0a5; }

/* ==========================================================================
   Pages commerçant : connexion & espace
   ========================================================================== */
.page-muted { background: var(--cloud); min-height: 100vh; display: flex; flex-direction: column; }
.page-muted .site-header { background: transparent; }

.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px var(--gutter) 96px; }

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 40px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-img);
    background: var(--glass-strong);
    box-shadow: var(--shadow-lift);
    animation: rise .7s var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
.auth-card .h3 + p { margin-top: 10px; }
.auth-card form { margin-top: 28px; }
.auth-foot { margin-top: 24px; padding-top: 22px; border-top: 1px solid #eee; font-size: 14px; color: var(--slate); }

.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field label { font-size: 14px; font-weight: 500; }

.input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--platinum);
    border-radius: var(--radius);
    background: #fff;
    color: var(--carbon);
    font: 400 16px/1.4 var(--font-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #8f8f8f; }
.input:focus { outline: none; border-color: var(--signal-bright); box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.16); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 96px; }
.input-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--signal);
    font: 500 14px/1 var(--font-text);
    cursor: pointer;
}
.input-toggle:hover { background: var(--signal-tint); }

.alert {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.45;
    animation: rise .45s var(--ease-out);
}
.alert[hidden] { display: none; }
.alert--info { background: var(--signal-tint); color: var(--carbon); }
.alert--success { background: #eef6f1; color: #1d4d33; }
.alert--error { background: #fbeeee; color: var(--danger); }
.alert a { font-weight: 500; }
.alert .btn { margin-top: 12px; }

/* Espace commerçant : styles dans espace.css. Éléments partagés avec l'abonnement : */
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--signal-tint);
    color: var(--signal);
    font-size: 13px;
    font-weight: 500;
}
.status-pill--warn { background: #fbeeee; color: var(--danger); }
.plans-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }

.skeleton {
    display: block;
    height: 18px;
    margin-top: 14px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #e9eef2 25%, #f5f7f9 50%, #e9eef2 75%);
    background-size: 200% 100%;
    animation: skeleton 1.3s ease-in-out infinite;
}
.skeleton--lg { height: 44px; width: 60%; }
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1080px) {
    .nav { gap: 20px; }
    .feature { gap: 48px; }
    .feature__visual .phone { --w: 210px; }
    .feature__visual--desk .window { width: 250px; }
    .feature__visual--desk .phone { --w: 176px; }
    .phone-figure { padding: 28px 24px 0; }
    .phone-figure .phone { --w: 210px; }
    .notif { column-gap: 48px; }
    .phone--notif { --w: 270px; }
    .notif-chip { max-width: 210px; }
}

@media (max-width: 920px) {
    :root { --section: 72px; --header-h: 64px; }

    .nav, .header-actions .header-link, .header-actions .btn { display: none; }
    .menu-toggle { display: inline-flex; }

    /* Sur écran étroit, les blocs apparaissent par le bas plutôt que par les côtés */
    .js [data-reveal="left"], .js [data-reveal="right"] { transform: translate3d(0, 28px, 0); }

    .hero { padding-top: 16px; }
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .hero__visual { aspect-ratio: 1 / 0.9; max-width: 640px; }
    .hero__visual .phone { --w: clamp(150px, 24vw, 206px); }

    .marquee__list li { font-size: 19px; }

    .cards-3, .phones-row, .pricing { grid-template-columns: 1fr; max-width: 560px; }

    .notif {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "visual" "tabs" "note";
        grid-template-rows: none;
    }
    .notif__visual { min-height: 0; padding: 56px 0 40px; }
    .notif__tabs { margin-top: 8px; max-width: 560px; }
    .phone--notif { --w: 260px; }
    .notif-chip--a { left: 0; top: 10%; }
    .notif-chip--b { right: 0; bottom: 8%; }

    .feature { grid-template-columns: 1fr; gap: 32px; }
    .feature--reverse .feature__visual { order: 0; }
    .feature__visual { height: 460px; }
    .feature + .feature { margin-top: 72px; }

    .phone-figure { height: 540px; }
    .phone-figure .phone { --w: 240px; }

    .plans-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    :root { --gutter: 16px; --section: 64px; }

    .brand img { height: 30px; }

    .btn-row .btn { flex: 1 1 100%; }

    /* Sur téléphone : la carte et la notification (le scan en caisse est montré plus bas) */
    .hero__visual { aspect-ratio: 1 / 1.08; }
    .hero__visual .phone { --w: 45vw; }
    .hero__visual .phone--scan { display: none; }
    .hero__visual .phone--card { --w: 40vw; left: 4%; top: 17%; }
    .hero__visual .phone--push { --w: 50vw; left: auto; right: 4%; top: 5%; }
    .send-chip { left: 4%; bottom: 5%; font-size: 13px; }
    .hero__proof { gap: 8px 18px; }
    .hero__proof li { font-size: 14px; }

    .marquee { gap: 16px; padding: 18px 0; }
    .marquee__list { gap: 28px; }
    .marquee__list li { font-size: 17px; }
    .marquee__list li::after { margin-left: 28px; }

    .card__media { height: 260px; }
    .card__media .phone { --w: 200px; }

    .phone--notif { --w: 62vw; }
    .notif-chip { max-width: 180px; font-size: 13px; padding: 8px 12px 8px 8px; }
    .notif-chip__icon { width: 24px; height: 24px; }
    .notif-tab { padding: 16px; }
    .notif-tab__body strong { font-size: 17px; }

    .feature__visual { height: 400px; padding: 32px 16px 0; gap: 14px; }
    .feature__visual .phone { --w: 38vw; }
    .feature__visual .phone:nth-child(2) { margin-top: 40px; }
    .feature__visual--desk { height: auto; padding: 28px 16px; gap: 12px; }
    .feature__visual--desk .window { width: 46vw; }
    .feature__visual--desk .phone { --w: 32vw; margin-top: 40px; }

    .phone-figure { height: auto; padding: 24px 24px 0; max-height: 520px; }
    .phone-figure .phone { --w: 220px; margin-bottom: -120px; }

    .plan { padding: 26px; }
    .plan--featured, .plan.is-highlighted { padding: 25px; }

    .faq summary { font-size: 19px; padding-right: 40px; }

    .auth-card { padding: 26px 22px; }
}

/* Appareils tactiles : pas d'effets de survol qui restent « collés » après un appui */
@media (hover: none) {
    .card:hover, .plan:hover, .phone-figure:hover { translate: none; box-shadow: none; }
    .card:hover .card__media .phone, .phone-figure:hover .phone,
    .feature__visual:hover .phone, .feature__visual--desk:hover .window { transform: none; rotate: none; }
    .notif-tab:hover { translate: none; }
}

/* Réglage système « réduire les animations » : tout reste immobile */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .js [data-reveal], .js [data-split] .w > span { opacity: 1 !important; transform: none !important; }
    [data-parallax] { translate: none !important; }
    body::before, body::after { animation: none !important; }
    .marquee__list { animation: none !important; }
    .notif-tab__bar { display: none; }
}