/* ==========================================================================
   Soluki — site vitrine (soluki.fr)

   Chargé APRÈS soluki.css, dont il reprend les tokens, la typographie de base,
   l'anneau de focus et le logo. Bootstrap n'est PAS chargé ici : la vitrine n'a
   ni formulaire ni composant complexe, et 230 Ko de CSS tiers pèsent
   directement sur le LCP, donc sur le référencement. Conséquence : tout ce que
   soluki.css délègue à Bootstrap (les boutons, la grille) est redéfini ci-
   dessous, préfixé « lp- » pour ne jamais entrer en collision avec le
   backoffice.
   ========================================================================== */

:root {
    /* soluki.css lit --bs-font-sans-serif, que Bootstrap fournit d'ordinaire. */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rythme vertical unique : toutes les sections y puisent, ce qui garde la
       page régulière quand on en ajoute une. */
    --lp-section-y: clamp(3.5rem, 8vw, 6.5rem);
    --lp-gap: clamp(1.5rem, 3vw, 2.5rem);
    --lp-max: 1140px;
}

/* ==========================================================================
   Socle
   ========================================================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface);
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    line-height: 1.6;
}

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

a { color: var(--brand-ink); }

.lp-wrap {
    width: 100%;
    max-width: var(--lp-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.lp-section { padding-block: var(--lp-section-y); }
.lp-section--tint { background: var(--bg); }
.lp-section--dark { background: var(--ink); color: #dfe5ec; }
.lp-section--dark h2,
.lp-section--dark h3 { color: #fff; }

/* Titres de section : un chapeau court, un titre, une accroche. */
.lp-eyebrow {
    display: inline-block;
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-ink);
}
.lp-section--dark .lp-eyebrow { color: var(--brand); }

.lp-h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.lp-lead {
    margin: 0;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    text-wrap: pretty;
}
.lp-section--dark .lp-lead { color: #a9b6c6; }

.lp-head { margin-bottom: var(--lp-gap); }
.lp-head--center { text-align: center; }
.lp-head--center .lp-lead { margin-inline: auto; }

/* ==========================================================================
   Boutons — Bootstrap étant absent, ils sont définis intégralement.
   L'action primaire est navy, comme dans le backoffice : le vert de marque
   plafonne à 2,3:1 sur blanc et ne porte jamais de texte.
   ========================================================================== */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8125rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast);
}
.lp-btn:active { transform: translateY(1px); }

.lp-btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.lp-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }

.lp-btn--brand { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.lp-btn--brand:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

.lp-btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.lp-btn--ghost:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }

/* Sur fond navy : le blanc plein en primaire, le contour clair en secondaire. */
.lp-btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.lp-btn--light:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--ink); }

.lp-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.lp-btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.lp-btn--sm { padding: .55rem 1rem; font-size: .9375rem; }

.lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.lp-head--center .lp-actions { justify-content: center; }

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

.lp-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.25rem;
}

.lp-header__brand { margin-right: auto; display: flex; }

/* Le logo est fourni en PNG à 298 × 98. La hauteur est fixée ici et la largeur
   suit : c'est la hauteur optique qui doit rester constante d'un écran à
   l'autre, pas la largeur du fichier. */
.lp-logo {
    display: block;
    height: 30px;
    width: auto;
}
.lp-logo--footer { height: 28px; }

.lp-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.lp-nav a {
    color: var(--text);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
}
.lp-nav a:hover { color: var(--brand-ink); }

/* Sous 900px la navigation disparaît : les sections restent atteignables par le
   défilement, et un menu déroulant pour six liens ne vaut pas son JavaScript. */
@media (max-width: 900px) {
    .lp-nav { display: none; }
}

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

.lp-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 7vw, 5.5rem) var(--lp-section-y);
}

/* Halo vert des supports de communication, tenu loin du texte. */
/* Le halo est tenu à gauche, derrière le texte : l'illustration du hero a un
   fond blanc opaque, et le halo passant dessous aurait dessiné le bord du
   rectangle. */
.lp-hero::before {
    content: '';
    position: absolute;
    top: -40vh;
    left: -25vw;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle at 50% 50%, var(--brand-soft), transparent 62%);
    pointer-events: none;
}

.lp-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.lp-hero__title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-wrap: balance;
}
.lp-hero__title em { font-style: normal; color: var(--brand-ink); }

.lp-hero__lead {
    margin: 0 0 1.75rem;
    max-width: 46ch;
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    color: var(--text-muted);
    text-wrap: pretty;
}

/* La ligne « Pour qui ? », collée sous le chapeau : elle répond à la troisième
   question du visiteur sans alourdir le chapeau lui-même. */
.lp-hero__for {
    margin: -1rem 0 1.75rem;
    max-width: 46ch;
    font-size: .9375rem;
    color: var(--text-muted);
}
.lp-hero__for strong { color: var(--ink); }

@media (max-width: 860px) {
    .lp-hero__grid { grid-template-columns: 1fr; }
    .lp-hero__media { order: -1; }
}

/* ==========================================================================
   Bandeau de réassurance
   ========================================================================== */

.lp-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2.5rem;
    padding-block: 1.25rem;
    border-block: 1px solid var(--border);
    background: var(--surface-2);
}
.lp-trust li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
}
.lp-trust svg { color: var(--brand-strong); flex: none; }

/* ==========================================================================
   Étapes
   ========================================================================== */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--lp-gap);
    counter-reset: step;
}

.lp-step { counter-increment: step; }

.lp-step__media {
    margin-bottom: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.lp-step__title {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
}
.lp-step__title::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-size: .8125rem;
    font-weight: 800;
    align-self: center;
}

.lp-step p { margin: 0; color: var(--text-muted); font-size: .9375rem; }

@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   Grille des jeux
   ========================================================================== */

.lp-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.25rem;
}

.lp-game {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.lp-game:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Fond blanc, et non --surface-2 : les illustrations des jeux sont livrées sur
   fond blanc opaque, et un gris même très clair dessinerait un rectangle visible
   autour de chacune. */
.lp-game__media { background: #fff; border-bottom: 1px solid var(--border); }
.lp-game__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.lp-game__body { padding: 1rem 1.125rem 1.25rem; }

.lp-game__name {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.lp-game p { margin: 0; font-size: .875rem; color: var(--text-muted); }

/* ==========================================================================
   Listes d'arguments (« Vous gardez la main », collecte)
   ========================================================================== */

.lp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.lp-split--reverse .lp-split__media { order: -1; }

@media (max-width: 860px) {
    .lp-split { grid-template-columns: 1fr; }
    .lp-split--reverse .lp-split__media { order: 0; }
}

.lp-facts { margin: 1.75rem 0 0; padding: 0; list-style: none; }
.lp-facts li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .75rem;
    padding-block: .75rem;
    border-top: 1px solid var(--border);
}
.lp-facts li:last-child { border-bottom: 1px solid var(--border); }
.lp-facts svg { color: var(--brand-strong); margin-top: .2rem; }
.lp-facts strong { display: block; color: var(--ink); }
.lp-facts span { color: var(--text-muted); font-size: .9375rem; }

/* Encadré de précision, pour les affirmations qui demandent une justification. */
.lp-note {
    margin-top: 1.75rem;
    padding: 1.125rem 1.25rem;
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--brand-softer);
    color: var(--text);
    font-size: .9375rem;
}
.lp-note p { margin: 0; }
.lp-note p + p { margin-top: .5rem; }

/* ==========================================================================
   Bandeau agences
   ========================================================================== */

.lp-agency {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: #dfe5ec;
    border-radius: var(--r-xl);
    padding: clamp(2rem, 5vw, 3.25rem);
}
.lp-agency__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 2rem;
    align-items: center;
}
.lp-agency h2 { margin: 0 0 .75rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; }
.lp-agency p { margin: 0 0 1.5rem; color: #a9b6c6; max-width: 52ch; }

@media (max-width: 860px) {
    .lp-agency__grid { grid-template-columns: 1fr; }
    .lp-agency__media { display: none; }
}

/* ==========================================================================
   Piliers — les trois temps d'une campagne.

   Traitement volontairement plus fort que les cartes ordinaires : c'est le
   passage qui doit rester en mémoire quand on quitte la page. D'où le numéro en
   grand, le verbe seul en titre, et rien d'autre dans le bloc.
   ========================================================================== */

.lp-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-pillar {
    position: relative;
}

/* L'illustration passe avant le numéro : c'est elle qu'on regarde, le numéro
   ne fait qu'ordonner.

   Le filet vert lui sert de soulignement plutôt que de chapeau : posé au-dessus
   il séparait la colonne de ce qui la précédait, posé dessous il rattache le
   texte à son image. */
.lp-pillar__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--brand);
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: #fff;
}

.lp-pillar__num {
    display: block;
    margin-bottom: .35rem;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
}

.lp-pillar h3 {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
}

.lp-pillar p { margin: 0; color: var(--text-muted); }

/* Sans illustration au-dessus, le filet vert remonte : c'est lui qui donne aux
   piliers leur poids, et un pilier sans filet redevient un paragraphe. */
.lp-pillars--texte .lp-pillar {
    padding-top: 1.5rem;
    border-top: 3px solid var(--brand);
}

@media (max-width: 820px) {
    .lp-pillars { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Colonnes d'arguments
   ========================================================================== */

.lp-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.lp-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.lp-card h3 {
    margin: 0 0 .625rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
}
.lp-card p { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.lp-card a { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.lp-card a:hover { text-decoration: underline; }
.lp-section--dark .lp-card a { color: var(--brand); }

.lp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.lp-section--dark .lp-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}
/* Le titre doit être repris explicitement : la règle générale des sections
   sombres et celle des cartes ont la même spécificité, et c'est la seconde,
   déclarée plus bas, qui l'emportait — d'où des titres navy sur fond navy. */
.lp-section--dark .lp-card h3 { color: #fff; }
.lp-section--dark .lp-card p { color: #a9b6c6; }
.lp-section--dark .lp-card__icon { background: rgba(32, 196, 95, .16); color: var(--brand); }

/* ==========================================================================
   Déclaration — une phrase seule, quand elle porte tout l'argument.
   ========================================================================== */

.lp-statement {
    max-width: 40ch;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
    text-wrap: balance;
}
.lp-statement + p {
    max-width: 54ch;
    margin: 1.25rem auto 0;
    text-align: center;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ==========================================================================
   Tarification
   ========================================================================== */

.lp-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
@media (max-width: 780px) { .lp-price { grid-template-columns: 1fr; } }

.lp-price__figure {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.1;
}
.lp-price__figure small {
    display: block;
    margin-top: .35rem;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* ==========================================================================
   FAQ — <details> natif : pliable sans une ligne de JavaScript, et le contenu
   reste dans le DOM, donc lisible par les moteurs et les lecteurs d'écran.
   ========================================================================== */

.lp-faq { max-width: 48rem; margin-inline: auto; }

.lp-faq details {
    border-bottom: 1px solid var(--border);
}
.lp-faq details[open] summary { color: var(--brand-ink); }

.lp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: '';
    flex: none;
    width: .625rem;
    height: .625rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t);
}
.lp-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.lp-faq__answer { padding-bottom: 1.25rem; color: var(--text-muted); }
.lp-faq__answer p { margin: 0; max-width: 62ch; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.lp-footer {
    background: var(--ink);
    color: #8e9cad;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    font-size: .9375rem;
}
.lp-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
}
.lp-footer a { color: #c3cddb; text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.lp-footer__legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #6f7f92;
    font-size: .875rem;
}

/* ==========================================================================
   Emplacements visuels

   Les visuels définitifs ne sont pas encore produits. Plutôt qu'une image
   cassée, un bloc au bon rapport d'aspect : la mise en page se juge dès
   maintenant, et le remplacement se fait sans toucher au CSS.
   ========================================================================== */

.lp-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio, 4 / 3);
    border-radius: var(--r-lg);
    background:
        repeating-linear-gradient(45deg,
            var(--surface-2) 0 10px,
            transparent 10px 20px),
        var(--bg);
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
}
.lp-media--dark {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.2);
    color: #8e9cad;
}
.lp-media__label { max-width: 22ch; }

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

.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
    padding: .75rem 1.25rem;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 var(--r-sm) 0;
}
.lp-skip:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

/* ==========================================================================
   Formulaire de contact

   Bootstrap étant absent de la vitrine, les champs sont définis intégralement.
   L'état d'erreur passe par une bordure et un message sous le champ concerné,
   jamais par la seule couleur : un daltonien ne verrait rien.
   ========================================================================== */

.lp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.lp-form__full { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .lp-form { grid-template-columns: 1fr; }
}

.lp-field { display: flex; flex-direction: column; gap: .375rem; }

.lp-field label {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
}
.lp-field label span { font-weight: 400; color: var(--text-muted); }

.lp-field input,
.lp-field select,
.lp-field textarea {
    width: 100%;
    padding: .7rem .875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lp-field textarea { min-height: 9rem; resize: vertical; }

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.lp-field--erreur input,
.lp-field--erreur select,
.lp-field--erreur textarea { border-color: var(--danger); }

.lp-field__erreur {
    font-size: .875rem;
    font-weight: 600;
    color: var(--danger);
}

/* Le leurre anti-robot : retiré du flux et de l'ordre de tabulation, mais pas
   masqué par display:none, que certains automates détectent. */
.lp-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-alerte {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--danger);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--danger-soft);
    color: var(--text);
    font-size: .9375rem;
}
.lp-alerte--ok {
    border-left-color: var(--brand-strong);
    background: var(--brand-softer);
}
.lp-alerte p { margin: 0; }
.lp-alerte strong { color: var(--ink); }

/* ==========================================================================
   Parcours du joueur

   Des cartes à icône reliées par des chevrons. Le schéma sert la démonstration :
   les plateformes concurrentes s'arrêtent à « gagné », et voir deux cases de
   plus vaut mieux que de l'affirmer — d'où les deux dernières, teintées.

   Il défile horizontalement sur petit écran plutôt que de se replier : un
   parcours qui passe à la ligne cesse d'être un parcours.
   ========================================================================== */

.lp-flux-cadre {
    margin-bottom: var(--lp-gap);
    padding: clamp(1.25rem, 3vw, 2rem) 0;
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--surface-2);
    overflow-x: auto;
}

.lp-flux {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: .625rem;
    min-width: max-content;
    margin: 0;
    padding-inline: 1.25rem;
    list-style: none;
}
.lp-flux li { display: flex; align-items: center; gap: .625rem; }

.lp-flux__etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    width: 8.25rem;
    padding: 1rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.lp-flux__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--ink);
}

.lp-flux__nom {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}
.lp-flux__detail {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Les deux étapes qu'aucun concurrent n'affiche. */
.lp-flux li:nth-last-child(-n+2) .lp-flux__etape {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
}
.lp-flux li:nth-last-child(-n+2) .lp-flux__icone {
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.lp-flux li:not(:last-child)::after {
    content: '';
    flex: none;
    width: .45rem;
    height: .45rem;
    border-top: 2px solid var(--border-strong);
    border-right: 2px solid var(--border-strong);
    transform: rotate(45deg);
}

/* ==========================================================================
   Objectifs — la promesse, le corps, et la phrase à retenir.
   ========================================================================== */

.lp-objectif + .lp-objectif {
    margin-top: var(--lp-gap);
    padding-top: var(--lp-gap);
    border-top: 1px solid var(--border);
}
.lp-objectif__rang {
    display: block;
    margin-bottom: .35rem;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-ink);
}
.lp-objectif h3 {
    margin: 0 0 .75rem;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.lp-objectif p { margin: 0; color: var(--text-muted); max-width: 62ch; }

/* Sélecteur porté à deux classes : « .lp-objectif p » l'emportait sur la seule
   classe .lp-retenir, et le texte de l'encadré sortait en gris sur le fond
   navy — illisible. */
.lp-objectif .lp-retenir {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    max-width: 52ch;
}

/* ==========================================================================
   Ressorts — pourquoi un jeu obtient ce qu'un formulaire n'obtient pas.
   ========================================================================== */

.lp-ressorts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: var(--lp-gap);
}
@media (max-width: 820px) { .lp-ressorts { grid-template-columns: 1fr; } }

.lp-ressort strong {
    display: block;
    margin-bottom: .375rem;
    font-size: 1.0625rem;
    color: var(--ink);
}
.lp-ressort p { margin: 0; color: var(--text-muted); font-size: .9375rem; }

/* ==========================================================================
   Onglets de fonctionnalités

   Une barre de choix, un panneau à la fois : capture à gauche, description et
   caractéristiques à droite. Le contenu masqué reste dans le document — il est
   donc lu par les moteurs, et accessible au clavier par les boutons radio, qui
   évitent d'écrire du JavaScript pour une bascule.
   ========================================================================== */

.lp-onglets input { position: absolute; opacity: 0; pointer-events: none; }

.lp-onglets__barre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    margin-bottom: var(--lp-gap);
}
.lp-onglets__barre label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 9.5rem;
    padding: 1rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast), background-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast);
}
.lp-onglets__barre label:hover { transform: translateY(-2px); }
.lp-onglets__barre svg { color: var(--brand-ink); transition: color var(--t-fast); }

.lp-onglets__panneaux {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--r-xl);
    background: var(--bg);
}

.lp-onglet { display: none; }
.lp-onglet[data-actif] {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
@media (max-width: 860px) {
    .lp-onglet[data-actif] { grid-template-columns: 1fr; }
}

.lp-onglet img {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
.lp-onglet h3 {
    margin: 0 0 .75rem;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lp-onglet > div > p { margin: 0 0 1.25rem; color: var(--text-muted); }

.lp-onglet__titre {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-ink);
}
.lp-onglet ul { margin: 0; padding: 0; list-style: none; }
.lp-onglet ul li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .625rem;
    padding-block: .375rem;
    font-size: .9375rem;
    color: var(--text);
}
.lp-onglet ul svg { color: var(--brand-strong); margin-top: .25rem; }

/* Bascule des onglets, écrite explicitement faute de sélecteur d'indice. */
.lp-onglets input:nth-of-type(1):checked ~ .lp-onglets__barre label:nth-of-type(1) { border-color: var(--ink); background: var(--ink); color: #fff; }
.lp-onglets input:nth-of-type(1):checked ~ .lp-onglets__barre label:nth-of-type(1) svg { color: var(--brand); }
.lp-onglets input:nth-of-type(1):checked ~ .lp-onglets__panneaux .lp-onglet:nth-of-type(1) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.lp-onglets input:nth-of-type(2):checked ~ .lp-onglets__barre label:nth-of-type(2) { border-color: var(--ink); background: var(--ink); color: #fff; }
.lp-onglets input:nth-of-type(2):checked ~ .lp-onglets__barre label:nth-of-type(2) svg { color: var(--brand); }
.lp-onglets input:nth-of-type(2):checked ~ .lp-onglets__panneaux .lp-onglet:nth-of-type(2) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.lp-onglets input:nth-of-type(3):checked ~ .lp-onglets__barre label:nth-of-type(3) { border-color: var(--ink); background: var(--ink); color: #fff; }
.lp-onglets input:nth-of-type(3):checked ~ .lp-onglets__barre label:nth-of-type(3) svg { color: var(--brand); }
.lp-onglets input:nth-of-type(3):checked ~ .lp-onglets__panneaux .lp-onglet:nth-of-type(3) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.lp-onglets input:nth-of-type(4):checked ~ .lp-onglets__barre label:nth-of-type(4) { border-color: var(--ink); background: var(--ink); color: #fff; }
.lp-onglets input:nth-of-type(4):checked ~ .lp-onglets__barre label:nth-of-type(4) svg { color: var(--brand); }
.lp-onglets input:nth-of-type(4):checked ~ .lp-onglets__panneaux .lp-onglet:nth-of-type(4) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.lp-onglets input:nth-of-type(5):checked ~ .lp-onglets__barre label:nth-of-type(5) { border-color: var(--ink); background: var(--ink); color: #fff; }
.lp-onglets input:nth-of-type(5):checked ~ .lp-onglets__barre label:nth-of-type(5) svg { color: var(--brand); }
.lp-onglets input:nth-of-type(5):checked ~ .lp-onglets__panneaux .lp-onglet:nth-of-type(5) { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) {
    .lp-onglets .lp-onglet { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Temps forts — les occasions de recommander une opération.
   ========================================================================== */

.lp-moments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-moments li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    aspect-ratio: 1 / 1;
    padding: .75rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.2;
}
.lp-moments svg { color: var(--brand-ink); }

@media (max-width: 480px) { .lp-moments { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Bandeau d'appel

   Un aplat pleine largeur, un titre centré et un seul bouton. Le fond est le
   vert soutenu et non le vert de marque : celui-ci plafonne à 2,3:1 avec du
   blanc et ne porte jamais de texte.

   Les deux arcs sont purement décoratifs, tracés en pseudo-éléments plutôt
   qu'en image : ils suivent la couleur du bloc et ne coûtent aucune requête.
   ========================================================================== */

.lp-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--r-xl);
    background: var(--brand-strong);
    text-align: center;
}
.lp-cta::before,
.lp-cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}
.lp-cta::before { inset: auto -6rem -14rem auto; right: -6rem; width: 26rem; height: 26rem; }
.lp-cta::after { inset: -16rem auto auto -8rem; width: 30rem; height: 30rem; }

.lp-cta > * { position: relative; }

.lp-cta__titre {
    max-width: 26ch;
    margin: 0 auto 2rem;
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    text-wrap: balance;
}
.lp-cta__titre strong { font-weight: 800; color: #fff; }

.lp-cta .lp-actions { justify-content: center; }
.lp-cta .lp-btn { border-radius: var(--r-pill); padding-inline: 1.75rem; }

/* ==========================================================================
   Trois colonnes de précisions, sous une illustration pleine largeur.
   ========================================================================== */

.lp-ressorts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 820px) { .lp-ressorts { grid-template-columns: 1fr; } }

.lp-ressort strong {
    display: block;
    margin-bottom: .375rem;
    font-size: 1.0625rem;
    color: var(--ink);
}
.lp-ressort p { margin: 0; color: var(--text-muted); font-size: .9375rem; }