/* ============================================================
   Yeen — refonte "test" : mêmes couleurs que la landing d'origine,
   direction visuelle plus travaillée (formes organiques, cartes
   flottantes, animations au scroll). Feuille de style autonome —
   ne dépend plus de assets/css/main.css, pour pouvoir diverger
   librement de la landing d'origine sans jamais la modifier.
   ============================================================ */

/* Polices auto-hébergées (voir test/assets/fonts/) plutôt que chargées
   depuis fonts.googleapis.com : plus aucune requête vers un domaine tiers
   pour le texte, donc plus de round-trip DNS/TLS supplémentaire ni de
   dépendance à la disponibilité de Google Fonts. Montserrat est une police
   variable chez Google (un seul fichier sert tous les graisses 500-900) ;
   Lato ne l'est pas, d'où un fichier par graisse. Les unicode-range
   limitent le téléchargement au sous-ensemble réellement utilisé par le
   texte affiché (uniquement "latin" pour du français dans la quasi-totalité
   des cas — "latin-ext" ne sera jamais chargé par le navigateur).
   Fichiers récupérés directement depuis fonts.gstatic.com pour ce
   déploiement local en une fois : à re-générer si la liste des graisses
   utilisées change. */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url('../fonts/montserrat-500to900-latin-ext.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url('../fonts/montserrat-500to900-latin.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #0f172a;
    --navy-deep: #080d1a;
    --navy-light: #1a2540;
    --ink-soft: #5b6577;
    --cream: #faf7f2;
    --cream-deep: #f1ebe0;
    --orange: #e65c00;
    --orange-light: #ff8a3d;
    --orange-wash: #fdece0;
    /* Même teinte que l'orange de marque, assombrie pour rester lisible
       en texte (voir la note de contraste plus bas). */
    --orange-text: #b5480a;

    --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.08);
    --shadow-lift: 0 30px 70px rgba(15, 23, 42, 0.14);
    --shadow-navy: 0 30px 60px rgba(8, 13, 26, 0.35);
}

* { box-sizing: border-box; }
/* "clip" et non "hidden" : hidden (sans overflow-y précisé) transforme
   l'élément en conteneur de défilement à part entière, et en poser un sur
   html ET body en même temps crée deux conteneurs de défilement imbriqués
   — ce qui casse le position:sticky du header (son ancêtre direct n'est
   plus perçu comme la fenêtre de défilement normale). "clip" empêche le
   débordement horizontal (et le rebond élastique iOS qui révélait le menu
   mobile) sans jamais créer de conteneur de défilement. */
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Le header est sticky et recouvre le haut de la page : sans ça, cliquer
   un lien d'ancre (nav, footer, CTA) amène le titre de la section pile
   sous le header, invisible. */
section[id] { scroll-margin-top: 96px; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--navy);
    font-family: 'Lato', sans-serif;
    overflow-x: clip;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; margin: 0; }
p { margin: 0; }
section { position: relative; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ============ Accessibilité ============ */

.skip-link {
    position: absolute;
    top: -60px; left: 12px;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pas de border-radius ici : appliqué globalement, ça déformait les
   boutons/pilules déjà arrondis pendant qu'ils recevaient le focus
   (coins qui changeaient de forme au clavier). L'anneau de focus suit de
   toute façon le rayon propre à chaque élément dans les navigateurs
   actuels. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* #e65c00 pur ne passe pas 4.5:1 sur fond clair à cette taille
       (3.3:1 mesuré) — cette teinte assombrie passe à 5:1. */
    color: var(--orange-text);
}
.eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--orange);
}

/* ============ Boutons ============ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 15px 30px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
    /* Blanc sur ce dégradé ne passe pas 4.5:1 (3.56:1, 2.35:1 côté clair) —
       texte navy à la place, 5:1 minimum sur tout le dégradé. */
    color: var(--navy);
    box-shadow: 0 14px 30px rgba(230, 92, 0, 0.32);
}
.btn-ghost {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid rgba(15, 23, 42, 0.12);
}
.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-3px); }
.btn-ghost:hover { box-shadow: var(--shadow-soft); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
    .btn::after { display: none; }
}

/* ============ Formulaire liste d'attente ============ */

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-form {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 7px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: var(--shadow-soft);
    max-width: 480px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* L'anneau de focus vit ici, sur le conteneur en pilule, et pas sur
   <input> lui-même : outline ne suit pas le border-radius d'un ancêtre,
   seulement le sien — posé sur l'input (rectangle sans rayon propre) il
   dessinait un carré net qui dépassait des coins arrondis de .cta-form.
   box-shadow, lui, épouse le border-radius de l'élément sur lequel il est
   posé. */
.cta-form:focus-within {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.35), var(--shadow-soft);
}
.cta-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 13px 18px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: var(--navy);
}
/* #9aa4b8 mesurait 2.51:1 sur fond blanc, sous le seuil de 4.5:1 — même
   gris que le reste des textes secondaires du site (--ink-soft, 5.88:1). */
.cta-form input::placeholder { color: var(--ink-soft); }
.hp { display: none; }
.cta-form button {
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
    color: var(--navy);
    border: none;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease;
}
.cta-form button:hover { transform: translateY(-1px); }
.cta-form button:disabled { opacity: 0.6; cursor: default; transform: none; }

.cta-success {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid rgba(230, 92, 0, 0.3);
    padding: 15px 26px; border-radius: 999px;
    box-shadow: var(--shadow-soft); color: var(--navy); font-size: 14.5px;
}
.cta-success strong { color: var(--orange-text); }
.cta-error { margin-top: 10px; color: var(--orange-text); font-size: 13px; }

@media (max-width: 480px) {
    .cta-form { flex-direction: column; border-radius: 22px; }
    .cta-form button { width: 100%; }
}

/* ============ Formes décoratives ============ */

.blob {
    position: absolute;
    border-radius: 44% 56% 62% 38% / 46% 40% 60% 54%;
    filter: blur(2px);
    z-index: 0;
    pointer-events: none;
}
.blob-orange { background: radial-gradient(circle at 35% 30%, var(--orange-wash) 0%, var(--cream-deep) 60%, transparent 100%); }
.blob-navy { background: radial-gradient(circle at 60% 40%, rgba(230, 92, 0, 0.18) 0%, rgba(15, 23, 42, 0) 70%); }

.divider {
    display: block;
    width: 100%;
    line-height: 0;
    /* Chevauchement volontaire avec la section suivante : sans ça, l'arrondi
       du SVG laisse parfois passer un filet de fond crème (sous-pixel) entre
       la vague et le bandeau qui suit. */
    margin-bottom: -2px;
    position: relative;
    z-index: 1;
}
.divider svg { width: 100%; height: auto; display: block; }

/* ============ En-tête ============ */

header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.3s ease;
}
header.is-scrolled { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }

header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand span { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--navy); }

.main-nav { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a:not(.nav-links-cta) {
    position: relative;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.2s;
    /* padding-top porte la zone cliquable à >=24px de haut (cible tactile
       minimale WCAG 2.5.8) ; le soulignement reste collé au texte grâce à
       padding-bottom. */
    padding: 5px 0 3px;
}
.nav-links a:not(.nav-links-cta)::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--orange);
    transition: width 0.25s ease;
}
.nav-links a:not(.nav-links-cta):hover { color: var(--navy); }
.nav-links a:not(.nav-links-cta):hover::after { width: 100%; }

/* La pilule "Rejoindre la liste" existe deux fois dans le balisage (une
   fois visible dans l'en-tête, une fois ici) : sur desktop c'est celle de
   l'en-tête qui compte, celle-ci reste cachée. Sur mobile c'est l'inverse
   (voir la media query plus bas) — sinon le bouton disparaissait
   complètement du menu mobile. */
.nav-links-cta { display: none; }

.menu-btn {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 26px; height: 26px; padding: 0; background: none; border: none; cursor: pointer;
    /* Le tiroir mobile (.nav-links, position:fixed, z-index:60) recouvre
       exactement ce bouton une fois ouvert : sans position+z-index ici, le
       bouton passe sous le tiroir et devient impossible à recliquer pour
       refermer (seuls les liens à l'intérieur du tiroir restent cliquables). */
    position: relative;
    z-index: 61;
}
.menu-btn span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .menu-btn { display: flex; }
    .nav-links {
        position: fixed; inset: 0 0 0 auto; top: 0; height: 100dvh; width: min(80vw, 320px);
        flex-direction: column; align-items: flex-start; gap: 6px; background: var(--cream);
        padding: 96px 28px 40px; box-shadow: -10px 0 30px rgba(15, 23, 42, 0.12);
        transform: translateX(100%); transition: transform 0.3s ease; z-index: 60;
    }
    .nav-links.is-open { transform: translateX(0); }
    .nav-links a:not(.nav-links-cta) { font-size: 17px; padding: 8px 0; }
    .main-nav > .btn { display: none; }
    .nav-links-cta { display: inline-flex; margin-top: 14px; }
}

/* ============ Hero ============ */

.hero {
    position: relative;
    padding: 76px 0 0;
    overflow: hidden;
}
.hero .wrap {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(50px, 8vw, 110px); align-items: center;
    padding-bottom: 90px;
}
.hero-blob-1 { width: 620px; top: -180px; right: -160px; }
.hero-blob-2 { width: 420px; bottom: -140px; left: -140px; }

.hero h1 {
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 18px 0 22px;
    color: var(--navy);
}
.hero h1 .accent {
    background: linear-gradient(100deg, var(--orange) 20%, var(--orange-light) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .lead { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 460px; margin-bottom: 30px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.trust-row span {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 8px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--navy);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}
.trust-row span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---- Téléphone ---- */
.hero-visual { position: relative; display: flex; justify-content: center; z-index: 1; padding-left: clamp(0px, 3vw, 32px); }
.phone-wrap { position: relative; }
.phone-frame {
    width: min(80%, 270px);
    margin: 0 auto;
    border-radius: 42px;
    background: linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%);
    padding: 12px;
    box-shadow: var(--shadow-navy);
    animation: floatSlow 7s ease-in-out infinite;
}
/* Le hero a déjà un téléphone qui flotte : en remettre un ici aurait fait
   redondant. Celui-ci reste immobile, il apparaît juste au scroll. */
.phone-frame-static { animation: none; margin: 0; }
.phone-buttons {
    position: absolute; left: -3px; top: 92px; width: 3px; height: 34px;
    border-radius: 2px 0 0 2px; background: var(--navy-light);
    box-shadow: 0 52px 0 0 var(--navy-light), 0 96px 0 0 var(--navy-light);
}
.phone-screen { border-radius: 32px; overflow: hidden; aspect-ratio: 864 / 1821; background: var(--navy-deep); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

.float-badge {
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 16px; padding: 10px 14px;
    box-shadow: var(--shadow-lift);
    animation: floaty 5s ease-in-out infinite;
}
.float-badge .dot { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--orange-wash); color: var(--orange-text); flex-shrink: 0; }
.float-badge .dot svg { width: 16px; height: 16px; }
.float-badge b { font-size: 12.5px; color: var(--navy); font-family: 'Montserrat', sans-serif; }
.float-badge span.sub { display: block; font-size: 10.5px; color: var(--ink-soft); }

.badge-1 { top: 6%; left: -4%; animation-delay: -1s; }
.badge-2 { bottom: 14%; left: -8%; animation-delay: -3s; }
.badge-3 { top: 42%; right: -6%; animation-delay: -2s; }

@keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; text-align: center; }
    .hero .lead { margin-left: auto; margin-right: auto; }
    .trust-row { justify-content: center; }
    .cta-actions { justify-content: center; }
    .float-badge { display: none; }
    .hero-blob-1, .hero-blob-2 { opacity: 0.6; }
}

/* ============ Bandeau défilant (valeurs, pas de faux logos clients) ============ */

.marquee {
    background: var(--navy);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 48px;
    animation: marquee 26s linear infinite;
    will-change: transform;
}
.marquee span {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
    color: rgba(255, 255, 255, 0.75); white-space: nowrap;
    flex-shrink: 0;
}
/* La distance par défaut (-50%) suppose que les deux moitiés du track ont
   une largeur rendue identique au pixel près, ce que le texte dupliqué ne
   garantit pas toujours (arrondi sous-pixel) et qui produisait un léger
   saut visible à chaque boucle. app.js mesure la largeur réelle d'une
   copie et pose --marquee-distance en pixels ; -50% ne reste qu'un repli
   pour le cas, rare, où JS est désactivé. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(var(--marquee-distance, -50%)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; overflow-x: auto; } }

/* ============ Intro ============ */

.intro { padding: 110px 0; }
.intro .wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.intro h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1.2; margin: 16px 0 18px; }
.intro p.body { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }

.app-mock {
    position: relative; z-index: 1;
    background: #fff; border-radius: 28px; padding: 26px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: var(--shadow-lift);
}
.app-mock-topbar { display: flex; gap: 6px; margin-bottom: 20px; }
.app-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 23, 42, 0.12); }
.app-mock-body { display: flex; gap: 16px; }
.app-mock-sidebar { display: flex; flex-direction: column; gap: 10px; }
.app-mock-channel { width: 36px; height: 36px; border-radius: 12px; background: var(--cream-deep); }
.app-mock-channel.active { background: linear-gradient(135deg, var(--orange), var(--orange-light)); }
.app-mock-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.bubble.received { align-self: flex-start; background: var(--cream-deep); color: var(--navy); border-bottom-left-radius: 4px; }
.bubble.sent { align-self: flex-end; background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: var(--navy); border-bottom-right-radius: 4px; }
.encrypted-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 7px 14px; border-radius: 999px; background: var(--orange-wash); color: var(--orange-text); font-size: 11px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.04em; }

.zk-note { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--orange); background: rgba(230, 92, 0, 0.05); border-radius: 0 16px 16px 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.zk-note strong { color: var(--navy); }

@media (max-width: 900px) {
    .intro .wrap { grid-template-columns: 1fr; }
    .app-mock { max-width: 420px; margin: 0 auto; }
}

/* ============ Fonctionnalités — grille bento ============ */

.features { padding: 100px 0; background: var(--cream-deep); position: relative; overflow: hidden; }
.section-head { max-width: 600px; margin: 0 auto 56px; text-align: center; }
/* .eyebrow est en display:inline-flex : text-align:center (hérité de
   .section-head) ne le centre pas lui-même, seulement son contenu textuel
   s'il était en display:block. */
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1.2; margin-top: 14px; }

.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* minmax plutôt qu'une hauteur fixe : une carte grandit si son texte a
       besoin de plus de place, au lieu de chevaucher l'icône. */
    grid-auto-rows: minmax(190px, auto);
    gap: 20px;
}
.bento-card {
    background: #fff;
    border-radius: 26px;
    padding: 30px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* L'icône fait partie du flux normal (voir .bento-icon) : elle,
       le titre et le texte s'empilent simplement de haut en bas, ce qui
       évite tout chevauchement quel que soit le nombre de lignes. */
    display: flex; flex-direction: column;
    position: relative;
}
.bento-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-2row { grid-row: span 2; }
.bento-card.dark { background: var(--navy); color: #fff; }
.bento-card.dark p { color: rgba(255, 255, 255, 0.65); }
.bento-card.orange { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); color: var(--navy); }
/* Solide plutôt qu'atténué : à 75% d'opacité le texte tombait à 3.74:1
   sur ce fond orange (mesuré), sous le seuil de 4.5:1. */
.bento-card.orange p { color: var(--navy); }

.bento-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.bento-icon {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--orange-wash); color: var(--orange-text);
}
.bento-card.dark .bento-icon, .bento-card.orange .bento-icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.bento-card.orange .bento-icon { background: rgba(15, 23, 42, 0.12); color: var(--navy); }
.bento-icon svg { width: 20px; height: 20px; }

/* Grande icône fantôme dans le coin : la carte "Illisible pour tout le
   monde, sauf vous" occupe 2 lignes de la grille mais son texte tient sur
   une seule — plutôt que de laisser un vide en bas, un accent visuel
   discret occupe l'espace, cohérent avec l'icône de la carte elle-même. */
.bento-decor {
    position: absolute;
    right: -34px; bottom: -34px;
    width: 230px; height: 230px;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}
.bento-decor svg { width: 100%; height: 100%; }

/* Téléphone miniature, incliné "en profondeur" à gauche de la grande
   icône fantôme — même style de cadre que celui du hero, juste réduit et
   glissé partiellement sous le bord de la carte (overflow:hidden la
   découpe proprement) pour donner un vrai effet de profondeur plutôt
   qu'un élément plaqué au premier plan. */
.bento-phone {
    position: absolute;
    left: 16px; bottom: -46px;
    width: 132px;
    z-index: 0;
    transform: perspective(700px) rotateY(14deg) rotateX(4deg) rotate(-9deg);
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}
.bento-phone .phone-frame {
    width: 100%;
    margin: 0;
    padding: 6px;
    border-radius: 22px;
    animation: none;
    box-shadow: none;
}
.bento-phone .phone-screen { border-radius: 16px; }
.bento-phone .phone-buttons { display: none; }

@media (max-width: 560px) {
    .bento-phone { display: none; }
}

.bento-card h3 { font-size: 19px; font-weight: 700; }
.bento-head h3 { margin-bottom: 0; }
.bento-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 980px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .bento-card { min-height: 190px; }
    .bento-card.span-2 { grid-column: span 2; }
    .bento-card.span-2row { grid-row: auto; }
    /* .span-2row perd sa 2e ligne ci-dessus : la carte redevient courte
       alors que .bento-phone reste positionné en absolu à bottom:-46px de
       cette carte désormais plus basse, ce qui le fait remonter par-dessus
       le texte. Pas de place propre pour lui à cette largeur : on le
       masque, comme déjà fait en dessous de 560px. */
    .bento-phone { display: none; }
}
@media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .bento-card.span-2 { grid-column: span 1; }
}

/* ============ Qui sommes-nous + carrousel ============ */

.about { padding: 110px 0; position: relative; }
.about .wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.about h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1.25; margin: 16px 0 18px; }
.about p.body { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }

.award-inline {
    display: flex; align-items: center; gap: 12px;
    margin-top: 20px; padding: 14px 20px;
    max-width: 100%;
    background: #fff; border-radius: 18px; border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-soft);
}
.award-inline .dot { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--orange-wash); color: var(--orange-text); flex-shrink: 0; }
.award-inline .dot svg { width: 20px; height: 20px; }
/* min-width:0 permet à ce bloc de rétrécir sous sa largeur "naturelle" :
   sans ça, le texte du placeholder pouvait forcer l'encart à déborder de
   sa colonne sur les écrans étroits. */
.award-inline > div { min-width: 0; }
.award-inline strong { display: block; font-size: 13.5px; color: var(--navy); }
.award-inline span { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Carrousel photo ---- */
.carousel {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    aspect-ratio: 4 / 3;
    background: var(--navy);
}
.carousel-track { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(.65,0,.35,1); }
.carousel-slide { min-width: 100%; height: 100%; position: relative; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-slide .placeholder-slide {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px;
    text-align: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: rgba(255, 255, 255, 0.55);
}
.carousel-slide .placeholder-slide svg { width: 40px; height: 40px; flex-shrink: 0; }
.carousel-slide .placeholder-slide span { font-size: 13px; font-family: 'Montserrat', sans-serif; font-weight: 700; max-width: 260px; }
.carousel-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 24px;
    background: linear-gradient(0deg, rgba(8,13,26,0.75) 0%, transparent 100%);
    color: #fff; font-size: 13.5px; font-weight: 700;
}
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.9); color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}
.carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.carousel-arrow.prev { left: 14px; }
.carousel-arrow.next { right: 14px; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.carousel-dots button {
    /* La zone cliquable dépasse largement le petit point visible
       (background-clip: content-box la limite au contenu) — cible tactile
       confortable sans agrandir le repère visuel. */
    width: 9px; height: 9px; padding: 8px;
    border-radius: 999px; border: none;
    background: rgba(15, 23, 42, 0.18);
    background-clip: content-box;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.carousel-dots button[aria-current="true"] { background: var(--orange); width: 22px; }

@media (max-width: 900px) {
    .about .wrap { grid-template-columns: 1fr; }
}

/* ============ Preuve (stats animées) ============ */

.proof { padding: 110px 0; background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.proof .section-head h2 { color: #fff; }
.proof .eyebrow { color: var(--orange-light); }
.proof .eyebrow::before { background: var(--orange-light); }

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; z-index: 1; }
.proof-num { font-size: clamp(34px, 4.2vw, 50px); font-weight: 800; }
.proof-num .accent { color: var(--orange-light); }
.proof-label { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.65); max-width: 220px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } }

/* ============ Pourquoi Yeen ============ */

.quotes { padding: 100px 0; }
.quotes .section-head h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 940px; margin: 50px auto 0; }
.quote-card {
    position: relative;
    background: #fff; border-radius: 24px; padding: 34px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: var(--shadow-soft);
}
/* Le caractère « est généré en CSS, pas en HTML : un scanner de contraste
   automatisé peut examiner un vrai nœud texte même masqué aux lecteurs
   d'écran (aria-hidden ne change rien à ce qui est visuellement affiché à
   l'écran). Une pure décoration générée par ::before est sans ambiguïté
   hors du champ de la règle de contraste du texte. */
.quote-mark { display: block; height: 46px; }
.quote-mark::before {
    content: '«';
    font-family: 'Montserrat', sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: var(--orange-wash);
    line-height: 1;
}
.quote-card p.text { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.quote-card p.detail { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.quote-card .author { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.quote-card .author img { width: 30px; height: 30px; border-radius: 50%; }
.quote-card .author span { font-size: 13px; font-weight: 700; color: var(--navy); }

@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }

/* ============ CTA final ============ */

.final-cta {
    margin: 0 20px 40px;
    border-radius: 36px;
    padding: 90px 5%;
    text-align: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.final-cta h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; margin-bottom: 14px; }
.final-cta-lead { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 480px; margin: 0 auto 30px; }
.final-cta .cta-form { margin: 0 auto; }
.final-cta .cta-success { margin: 0 auto; }

/* ============ Footer ============ */

footer.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.7); padding: 56px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: #fff; }
.footer-brand img { height: 24px; width: auto; }
.footer-tag { margin-top: 10px; font-size: 13px; max-width: 260px; color: rgba(255, 255, 255, 0.5); }
.footer-social-row { display: flex; gap: 10px; margin-top: 16px; }
.footer-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.2s ease, color 0.2s ease;
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social:hover { background: rgba(255, 255, 255, 0.16); color: var(--orange-light); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 26px; }
/* padding porte la zone cliquable à >=24px de haut (cible tactile minimale
   WCAG 2.5.8) ; le gap de la rangée est réduit d'autant pour garder le même
   espacement visuel global. */
.footer-links a { display: inline-block; padding: 4px 0; color: rgba(255, 255, 255, 0.7); font-size: 13.5px; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--orange-light); }
/* L'anneau de focus global est navy — quasi invisible sur ce fond déjà
   très sombre (1.09:1 mesuré, sous le seuil de 3:1 exigé pour un indicateur
   de focus). Anneau clair ici pour rester repérable au clavier. */
.footer-links a:focus-visible { outline-color: #fff; }
.footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }

/* ============ Apparition au défilement ============ */

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
    .phone-frame, .float-badge { animation: none; }
    .carousel-track { transition: none; }
}

@media (max-width: 600px) {
    .wrap { padding: 0 20px; }
    .intro, .features, .about, .proof, .quotes { padding: 64px 0; }
    .final-cta { padding: 64px 6%; margin: 0 12px 28px; }
}