/* Page d'accueil publique — charte PDF Protect Plus */
@font-face {
    font-family: Inter;
    src: url("/brand/Inter.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --blue: #0b5ed7;
    --blue-dark: #084bb0;
    --teal: #14b8a6;
    --ink: #0f172a;
    --muted: #475569;
    --faint: #94a3b8;
    --line: #e9edf3;
    --surface: #f8fafc;
}

* { box-sizing: border-box; }

.lp {
    margin: 0;
    font-family: Inter, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Exclure les boutons : « color: inherit » a une specificite superieure aux
   modificateurs .lp-btn-*, ce qui rendait le bouton du bandeau final blanc
   sur blanc, donc invisible. */
.lp a:not(.lp-btn) { color: inherit; }
.lp a { text-decoration: none; }
.lp h1, .lp h2, .lp h3 { letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.lp svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* ---------- boutons ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    /* Bordure transparente par defaut : sans elle, un bouton plein etait deux
       pixels plus court que le bouton fantome pose a cote. */
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgb(11 94 215 / 28%); }
.lp-btn-ghost { background: #fff; color: var(--ink); border: 1px solid #d8e0ea; }
.lp-btn-invert { background: #fff; color: var(--blue); box-shadow: 0 8px 22px rgb(0 0 0 / 18%); }
.lp-btn-sm { padding: 9px 16px; font-size: 13px; }
.lp-btn-block { display: flex; width: 100%; }

/* ---------- navigation ---------- */
.lp-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 34px;
    border-bottom: 1px solid var(--line);
}
.lp-brand { display: flex; align-items: center; }
.lp-brand img { display: block; height: 46px; width: auto; }
/* Le menu telephone est pilote par une case a cocher : pas de JavaScript, et le
   bouton reste actionnable au clavier. Elle est retiree du flux sur grand
   ecran pour ne pas laisser un arret de tabulation invisible. */
.lp-menu-state { display: none; }
.lp-menu-button { display: none; }
.lp-menu-close { display: none; }
.lp-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; color: var(--muted); }
.lp-links a:hover { color: var(--blue); }
.lp-lang { display: flex; gap: 4px; font-size: 12px; font-weight: 700; color: var(--faint); }
.lp-lang a { padding: 4px 7px; border-radius: 6px; }
.lp-lang a[aria-current] { background: var(--blue); color: #fff; }

/* ---------- hero ---------- */
.lp-hero {
    padding: 62px 24px 52px;
    text-align: center;
    background: radial-gradient(900px 340px at 50% -8%, #e8f1fe 0%, rgb(255 255 255 / 0%) 70%);
}
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 20px;
    padding: 7px 15px;
    border-radius: 20px;
    background: #defaf5;
    color: #0d6f66;
    font-size: 13px;
    font-weight: 700;
}
.lp-hero h1 { font-size: clamp(30px, 6vw, 50px); font-weight: 800; margin-bottom: 18px; }
.lp-hero h1 span {
    display: block;
    background: linear-gradient(120deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-lead { font-size: 17px; color: var(--muted); max-width: 620px; margin: 0 auto 28px; }
.lp-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-reassure { margin: 16px 0 0; font-size: 13px; color: var(--faint); }

.lp-shot {
    width: min(480px, 100%);
    margin: 40px auto 0;
    border: 9px solid #1f2937;
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 24px 50px rgb(15 23 42 / 22%);
}
.lp-shot-bar { display: block; height: 22px; background: #fff; border-bottom: 1px solid var(--line); }
.lp-shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.lp-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 74px;
    padding: 12px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    text-align: left;
}
.lp-tile svg { width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 8px; background: rgb(255 255 255 / 24%); }
.lp-tile-blue { background: var(--blue); }
.lp-tile-ink { background: #1f2937; }
.lp-tile-teal { background: #087f75; }
.lp-tile-indigo { background: #455cc2; }

/* ---------- bande de reassurance ---------- */
.lp-strip {
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--muted);
}
.lp-strip li { display: flex; align-items: center; gap: 8px; }
.lp-strip svg { width: 17px; height: 17px; color: var(--blue); }

/* ---------- sections ---------- */
.lp-sec { padding: 62px 24px; }
.lp-sec-alt { background: var(--surface); }
.lp-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    text-align: center;
}
.lp-sec h2 { font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; text-align: center; margin-bottom: 12px; }
.lp-sec > .lp-lead { margin-bottom: 34px; }

.lp-versus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1020px; margin: 0 auto; align-items: stretch; }
.lp-vs { border-radius: 16px; padding: 24px; }
.lp-vs h3 { font-size: 16px; margin-bottom: 14px; }
.lp-vs ul { margin: 0; padding: 0; list-style: none; }
.lp-vs li { font-size: 14px; line-height: 1.9; padding-left: 22px; position: relative; }
.lp-vs li::before { position: absolute; left: 0; font-weight: 800; }
.lp-vs-bad { background: #fff; border: 1px solid #fecaca; }
.lp-vs-bad h3 { color: #a8332e; }
.lp-vs-bad li::before { content: "✕"; color: #dc2626; }
/* La colonne du milieu n'est ni le repoussoir ni nous : un ton neutre et
   chaud la distingue des deux autres sans la condamner. Reconnaitre ce que
   les outils gratuits font bien est ce qui rend la comparaison credible. */
.lp-vs-mid { background: #fbfaf5; border: 1px solid #e6e2d4; }
.lp-vs-mid h3 { color: #7a6a3d; }
.lp-vs-mid li { color: var(--muted); }
.lp-vs-mid li::before { content: "•"; color: #b3a577; }
.lp-vs-good { background: linear-gradient(150deg, var(--blue), #1478d7); color: #fff; }
.lp-vs-good li::before { content: "✓"; color: #7ff0dc; }

.lp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.lp-feat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.lp-feat h3 { font-size: 16px; margin-bottom: 7px; }
.lp-feat p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.lp-feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    margin-bottom: 14px;
}
.lp-feat-icon svg { width: 21px; height: 21px; }
.lp-ico-blue { background: #e7f0fe; color: var(--blue); }
.lp-ico-teal { background: #defaf5; color: #0d9488; }
.lp-ico-cyan { background: #e7f6fc; color: #087e9b; }
.lp-ico-indigo { background: #eef2ff; color: #4f46e5; }
.lp-ico-amber { background: #fef3c7; color: #b45309; }
.lp-ico-slate { background: #f1f5f9; color: var(--muted); }

.lp-plats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.lp-plats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 128px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}
.lp-plats svg { width: 25px; height: 25px; color: var(--blue); }

/* ---------- packs ---------- */
/* Disposition en flex et non en grille : « auto-fit » calculait parfois
   cinq colonnes pour quatre cartes payantes, laissant une colonne vide a
   droite et decentrant la rangee. En flex, les cartes se centrent quel que
   soit leur nombre — un pack ajoute ou retire au catalogue ne casse rien. */
.lp-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
}
.lp-plan {
    display: flex;
    flex-direction: column;
    flex: 1 1 208px;
    max-width: 252px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.lp-plan-lead { border: 2px solid var(--blue); box-shadow: 0 14px 32px rgb(11 94 215 / 14%); }

/* L'offre sur devis n'est pas un pack de plus : elle occupe toute la largeur
   sous les autres, plutot que de laisser un vide a cote d'elle. */
.lp-plan-wide {
    flex: 1 1 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    background: var(--surface);
}
.lp-plan-wide .lp-plan-name,
.lp-plan-wide .lp-plan-seats { margin: 0; }
.lp-plan-wide .lp-plan-desc { margin: 0; flex: 1 1 260px; }
.lp-plan-wide .lp-plan-amount { margin: 0; white-space: normal; }
.lp-plan-wide .lp-btn { width: auto; flex: 0 0 auto; }
.lp-plan-name { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.lp-plan-seats { margin: 0 0 14px; font-size: 12.5px; color: var(--faint); }
/* Le suffixe passe sous le montant : en colonne etroite, « / mois » se
   detachait du chiffre et « 349,50 $US » debordait sur deux lignes. */
.lp-plan-amount {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    white-space: nowrap;
}
.lp-plan-amount span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
    margin-top: 2px;
}
.lp-plan-quote { font-size: 21px; color: var(--muted); }
.lp-plan-annual { margin: 5px 0 0; font-size: 12px; color: var(--faint); }
.lp-plan-desc { margin: 14px 0 20px; font-size: 13px; line-height: 1.65; color: var(--muted); flex: 1; }
.lp-plan .lp-btn { font-size: 14px; padding: 12px 18px; }

/* Ce que chaque pack comprend, dit une fois plutot que repete cinq fois. */
.lp-plan-included {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    max-width: 880px;
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
}
.lp-plan-included li { position: relative; padding-left: 22px; font-size: 13.5px; color: #334155; }
.lp-plan-included li::before { content: "✓"; position: absolute; left: 0; color: #0d9488; font-weight: 800; }

.lp-price {
    max-width: 420px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--blue);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgb(11 94 215 / 15%);
}
.lp-price-plan { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.lp-price-amount { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
.lp-price-amount span { font-size: 15px; font-weight: 600; color: var(--muted); }
.lp-price-annual { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.lp-price ul { list-style: none; margin: 20px 0 22px; padding: 0; text-align: left; }
.lp-price li { font-size: 14px; line-height: 2; padding-left: 22px; position: relative; color: #334155; }
.lp-price li::before { content: "✓"; position: absolute; left: 0; color: #0d9488; font-weight: 800; }
.lp-price-note { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--faint); }
.lp-all { text-align: center; margin: 22px 0 0; font-size: 14px; }
.lp-all a { color: var(--blue); font-weight: 600; text-decoration: underline; }

.lp-final { padding: 66px 24px; text-align: center; background: linear-gradient(150deg, var(--blue), var(--teal)); color: #fff; }
.lp-final h2 { font-size: clamp(23px, 4vw, 34px); font-weight: 800; margin-bottom: 12px; }
.lp-final p { margin: 0 0 26px; font-size: 16px; opacity: 0.93; }


/* ---------- captures du produit dans l'en-tete ---------- */
.lp-price-anchor { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.lp-price-anchor b { font-size: 15px; font-weight: 750; color: var(--ink); white-space: nowrap; }
.lp-price-anchor b span { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.lp-shots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 22px;
    max-width: 960px;
    margin: 34px auto 0;
}
.lp-shot-desktop, .lp-shot-mobile { margin: 0; }
.lp-shot-desktop {
    flex: 0 1 700px;
    min-width: 0;
    /* La capture porte en bas de sa barre laterale un numero de version qui
       contredit celui annonce au telechargement : on coupe cette bande plutot
       que de retoucher l'image, ce qui reste reversible. */
    height: 0;
    padding-bottom: 60.6%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgb(15 23 42 / 14%);
    background: #fff;
}
.lp-shot-desktop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    display: block;
}
.lp-shot-mobile {
    flex: 0 0 168px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgb(15 23 42 / 16%);
    background: #fff;
}
.lp-shot-mobile img { width: 100%; height: auto; display: block; }
.lp-shot-caption {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 13px;
    color: var(--faint);
}

/* ---------- comparaison avec les outils gratuits ---------- */
#gratuit { background: #fffdf5; }
.lp-compare-scroll { overflow-x: auto; max-width: 780px; margin: 26px auto 0; }
.lp-compare {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
    text-align: left;
}
.lp-compare thead th {
    padding: 14px 16px;
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.lp-compare tbody th {
    padding: 13px 16px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
.lp-compare tbody td {
    padding: 13px 16px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.lp-compare tbody tr:last-child th,
.lp-compare tbody tr:last-child td { border-bottom: 0; }
.lp-compare .lp-compare-us { background: #f6faff; }
.lp-compare thead .lp-compare-us { color: var(--blue); }
/* Une ligne sur deux est teintee, comme dans la maquette : sur six lignes de
   trois colonnes, l'oeil perd sa ligne sans ce reperage. */
.lp-compare tbody tr:nth-child(even) { background: #fafcff; }
.lp-compare tbody tr:nth-child(even) .lp-compare-us { background: #f1f7ff; }
/* La couleur dit la reponse avant qu'on la lise. */
.lp-val { font-weight: 600; }
.lp-val-yes { color: #0b7f63; }
.lp-val-no { color: #a8332e; }
.lp-val-meh { color: var(--faint); font-weight: 500; }
.lp-compare-us .lp-val-yes { color: var(--blue); font-weight: 650; }
.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- le chemin du document ---------- */
.lp-paths { display: grid; gap: 12px; max-width: 700px; margin: 26px auto 0; }
.lp-path { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; }
.lp-path-bad { border-color: #f0d3d3; background: #fdf7f7; }
.lp-path-good { border-color: #c8e6da; background: #f4fbf8; }
.lp-path-label { margin: 0 0 6px; font-size: 12px; font-weight: 750; letter-spacing: .4px; }
.lp-path-bad .lp-path-label { color: #a8332e; }
.lp-path-good .lp-path-label { color: #0b7f63; }
.lp-path-steps { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.lp-path-good .lp-path-steps { font-weight: 650; }

/* ---------- section equipe ---------- */
.lp-feats-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; }

/* ---------- questions frequentes ---------- */
.lp-faq { max-width: 720px; margin: 26px auto 0; text-align: left; }
.lp-faq-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0 18px;
    margin-bottom: 10px;
}
.lp-faq-item summary {
    padding: 16px 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--blue);
    line-height: 1;
}
.lp-faq-item[open] summary::after { content: "\2212"; }
.lp-faq-item p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

/* Bouton colle en bas, sur telephone uniquement : le visiteur ne remonte
   presque jamais chercher un bouton d'achat. */
.lp-sticky { display: none; }

@media (max-width: 860px) {
    .lp-versus, .lp-feats { grid-template-columns: 1fr; }
    .lp-feats-three { grid-template-columns: 1fr; }
    .lp-shots { gap: 14px; }
    .lp-feats { max-width: 460px; }
}

@media (max-width: 700px) {
    .lp-nav { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
    .lp-brand img { height: 34px; }
    .lp-menu-state {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
    }
    .lp-menu-button {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 8px;
        padding: 9px 13px;
        border: 1px solid #d8e0ea;
        border-radius: 10px;
        background: #fff;
        color: var(--ink);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }
    .lp-menu-state:focus-visible + .lp-menu-button { outline: 3px solid #60a5fa; outline-offset: 2px; }
    .lp-menu-state:checked + .lp-menu-button .lp-menu-open { display: none; }
    .lp-menu-state:checked + .lp-menu-button .lp-menu-close { display: inline; }
    .lp-lang { order: 1; margin-left: auto; }
    /* Sans selecteur de langue (blog), c'est le bouton qui part a droite. */
    .lp-brand + .lp-menu-state + .lp-menu-button:not(:has(~ .lp-lang)) { margin-left: auto; }
    /* Deplie sous la ligne du logo, pleine largeur. */
    .lp-links {
        order: 9;
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 4px 0 2px;
        font-size: 15px;
        color: var(--ink);
    }
    .lp-menu-state:checked ~ .lp-links { display: flex; }
    .lp-links a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
    .lp-links a[aria-current] { color: var(--blue); font-weight: 700; }
    .lp-links .lp-btn { justify-content: center; margin-top: 12px; border-bottom: 0; }
    .lp-hero { padding: 34px 18px 34px; }
    .lp-sec { padding: 40px 18px; }
    .lp-final { padding: 44px 18px; }
    .lp-lead { font-size: 15px; }
    .lp-strip { gap: 10px 20px; padding: 16px 18px; font-size: 12.5px; }
    .lp-vs, .lp-feat, .lp-price { padding: 18px; }
    .lp-plats li { flex: 1 1 calc(50% - 7px); min-width: 0; padding: 16px; }
    .lp-plans { gap: 10px; }
    .lp-plan { flex: 1 1 100%; max-width: none; }
    .lp-plan-wide { flex-direction: column; align-items: stretch; gap: 10px; }
    .lp-plan-wide .lp-btn { width: 100%; }
    /* En colonne, « flex: 1 » sur la description creusait un vide entre le
       texte et le bouton : elle ne doit plus grandir. */
    .lp-plan-wide .lp-plan-desc { flex: 0 0 auto; }
    .lp-plan { padding: 18px; }
    .lp-plan-included { gap: 6px 18px; margin-top: 20px; }
    .lp-shots { flex-direction: column; align-items: center; gap: 16px; margin-top: 26px; }
    .lp-shot-desktop { flex: 1 1 auto; width: 100%; padding-bottom: 60.6%; }
    .lp-shot-mobile { flex: 0 0 auto; width: 148px; }
    .lp-feats-three { grid-template-columns: 1fr; }
    /* Un tableau a trois colonnes se subit a 390 px : « Reprise de la licence
       au depart d'un salarie » y tenait sur quatre lignes dans une colonne
       etroite. Chaque ligne devient une carte, et l'en-tete de colonne se
       reaffiche devant sa valeur. */
    .lp-compare-scroll { overflow-x: visible; }
    .lp-compare { border: 0; background: transparent; display: block; }
    .lp-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .lp-compare tbody, .lp-compare tr, .lp-compare tbody th, .lp-compare tbody td { display: block; }
    .lp-compare tr {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 4px 16px 12px;
        margin-bottom: 10px;
    }
    .lp-compare tbody th {
        padding: 12px 0 10px;
        font-size: 14.5px;
        border-bottom: 1px solid var(--line);
    }
    .lp-compare tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0 0;
        border: 0;
        font-size: 13.5px;
        text-align: right;
    }
    .lp-compare tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--faint);
        font-size: 12.5px;
        font-weight: 500;
        text-align: left;
    }
    .lp-compare .lp-compare-us { background: transparent; }
    .lp-compare tbody tr:nth-child(even),
    .lp-compare tbody tr:nth-child(even) .lp-compare-us { background: #fff; }
    .lp-path-steps { font-size: 13.5px; }
    .lp-btn { width: 100%; }
    .lp-ctas { flex-direction: column; }

    .lp-sticky {
        display: block;
        position: sticky;
        bottom: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / 96%);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px rgb(15 23 42 / 8%);
    }
}

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

/* ---------- page de telechargement ---------- */
.lp-hero-compact { padding: 44px 24px 34px; }
.lp-hero-compact h1 { font-size: clamp(26px, 4.4vw, 38px); margin-bottom: 12px; }

/* Une teinte par constructeur : le visiteur repere son systeme a la couleur
   avant meme de lire le nom. */
.lp-plat-windows { --plat: #0f7bd8; --plat-wash: #e8f2fd; }
.lp-plat-macos, .lp-plat-ios { --plat: #1f2937; --plat-wash: #eef1f5; }
.lp-plat-android { --plat: #0b887b; --plat-wash: #e4f5f2; }
.lp-plat-glyph { width: 100%; height: 100%; display: block; }

/* Mise en avant de la plateforme detectee, dans l'en-tete de page. */
.lp-dl-mine {
    display: flex;
    align-items: center;
    gap: 18px;
    width: fit-content;
    max-width: 100%;
    margin: 26px auto 0;
    padding: 16px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgb(15 23 42 / 8%);
}
.lp-dl-mine-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 15px;
    background: var(--plat-wash);
    color: var(--plat);
}
.lp-dl-mine-text { min-width: 0; }
.lp-dl-mine-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.lp-dl-mine-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--faint); }
.lp-dl-mine .lp-btn { flex-shrink: 0; }
.lp-dl-alt { margin: 14px 0 0; font-size: 13px; }
.lp-dl-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.lp-dl-alt a:hover { color: var(--blue); }

/* Grille des plateformes. */
.lp-dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    max-width: 1020px;
    margin: 0 auto;
}
.lp-dl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 20px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: transform .15s, box-shadow .15s;
}
.lp-dl-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(15 23 42 / 8%); }
.lp-dl-detected { border-color: var(--blue); box-shadow: 0 14px 32px rgb(11 94 215 / 14%); }
.lp-dl-soon { background: var(--surface); }
.lp-dl-soon:hover { transform: none; box-shadow: none; }
.lp-dl-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
}
.lp-dl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 14px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--plat-wash);
    color: var(--plat);
}
.lp-dl-card h3 { font-size: 17px; margin: 0 0 6px; }
.lp-dl-meta { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.lp-dl-note {
    margin: 14px 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--faint);
    line-height: 1.6;
}
/* Le bouton absorbe la hauteur restante : les boutons des quatre cartes
   s'alignent alors sur la meme ligne, quelle que soit la longueur de la note
   (celle d'iOS tient sur trois lignes, les autres sur une). */
.lp-dl-card .lp-btn,
.lp-dl-card .lp-dl-pill-block { margin-top: auto; }
.lp-dl-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 12px;
    background: #eef1f5;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}
.lp-dl-pill-block { display: flex; width: 100%; }

.lp-dl-help {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    max-width: 720px;
    margin: 0 auto;
    padding: 26px;
    background: var(--surface);
    border-radius: 18px;
}
.lp-dl-help h2 { font-size: 18px; text-align: left; margin-bottom: 8px; }
.lp-dl-help p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.lp-dl-cta { margin-top: 12px !important; font-size: 13.5px; }
.lp-dl-cta a { color: var(--blue); font-weight: 700; text-decoration: underline; }

@media (max-width: 1040px) {
    .lp-versus { max-width: 720px; grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
    .lp-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; }
}

@media (max-width: 700px) {
    .lp-dl { grid-template-columns: 1fr; max-width: none; }
    .lp-dl-help { flex-direction: column; gap: 12px; padding: 18px; }
    .lp-dl-mine { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; width: auto; padding: 18px; }
    .lp-dl-mine-glyph { margin: 0 auto; }
    .lp-dl-note { margin-bottom: 14px; }
}

/* ---------- Pages legales ---------- */
/* Une politique de confidentialite se lit, elle ne se parcourt pas : colonne
   etroite, interligne genereux, aucune decoration qui distraie. */
.lp-legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 20px 72px;
}
.lp-legal-head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}
.lp-legal h1 {
    margin: 10px 0 14px;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.lp-legal-date {
    color: var(--faint);
    font-size: 13px;
}
.lp-legal section {
    padding-top: 36px;
}
.lp-legal h2 {
    margin: 0 0 12px;
    font-size: 19px;
    letter-spacing: -0.01em;
}
.lp-legal p {
    margin: 0 0 12px;
    color: var(--muted);
}
.lp-legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--muted);
}
.lp-legal li {
    margin-bottom: 8px;
}
.lp-legal-list {
    margin: 0;
}
.lp-legal-list dt {
    margin-top: 16px;
    font-weight: 600;
    color: var(--ink);
}
.lp-legal-list dd {
    margin: 4px 0 0;
    color: var(--muted);
}
/* Ce que le produit ne collecte pas est son argument le plus fort : la liste
   merite d'etre vue, pas enfouie dans un paragraphe. */
.lp-legal-never {
    list-style: none;
    padding: 0;
}
.lp-legal-never li {
    position: relative;
    padding: 10px 14px 10px 38px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
}
.lp-legal-never li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--teal);
}
.lp-legal .lp-btn {
    margin-top: 6px;
}

/* ---------- Blog ---------- */
/* L'index est une grille de cartes ; l'article reprend la colonne de lecture
   des pages legales, avec la hierarchie de titres d'un texte long. */
.lp-blog {
    max-width: 1040px;
    margin: 0 auto;
    padding: 56px 20px 72px;
}
.lp-blog-head {
    text-align: center;
    margin-bottom: 40px;
}
.lp-blog-head h1 {
    margin: 10px 0 14px;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.lp-blog-grid {
    display: grid;
    /* Deux colonnes : des vignettes assez grandes pour qu'on reconnaisse l'ecran. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 20px;
}
.lp-blog-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-blog-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 28px rgb(15 23 42 / 7%);
}
/* Vignette : une capture de l'interface reelle, cadree sur son coin haut gauche. */
.lp-blog-thumb {
    display: block;
    margin: -24px -24px 18px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--surface);
}
.lp-blog-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
.lp-blog-card h2 {
    margin: 8px 0 10px;
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.lp-blog-card h2 a {
    color: var(--ink);
    text-decoration: none;
}
.lp-blog-card h2 a:hover { color: var(--blue); }
.lp-blog-card p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15px;
}
.lp-blog-card .lp-blog-meta {
    margin: auto 0 0;
    color: var(--faint);
    font-size: 13px;
}
.lp-blog-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
}
.lp-article .lp-kicker { text-align: left; }
.lp-article-back {
    margin-bottom: 20px;
    font-size: 14px;
}
.lp-article-back a { color: var(--muted); text-decoration: none; }
.lp-article-back a:hover { color: var(--blue); }
.lp-article-body {
    padding-top: 28px;
    font-size: 17px;
    line-height: 1.75;
}
.lp-article-body h2 {
    margin: 40px 0 12px;
    font-size: 23px;
    line-height: 1.3;
}
.lp-article-body h3 {
    margin: 28px 0 8px;
    font-size: 18px;
}
.lp-article-body p { margin-bottom: 16px; }
.lp-article-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--muted);
}
.lp-article-body li { margin-bottom: 10px; }
.lp-article-body .lp-figure { margin: 26px 0 28px; }
.lp-article-body strong { color: var(--ink); }
.lp-article-body code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface);
    font-size: 0.9em;
}
.lp-article-body pre {
    margin: 0 0 18px;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.6;
}
.lp-article-body pre code { padding: 0; background: none; font-size: inherit; }
.lp-article-cta {
    margin-top: 48px;
    padding: 28px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.lp-article-cta p {
    color: var(--ink);
    font-weight: 500;
}
.lp-article-cta .lp-btn { margin: 6px 8px 0 0; }
.lp-article-reminder {
    margin: 32px 0;
    padding: 20px 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
}
.lp-article-reminder p { margin: 0 0 12px; color: var(--ink); font-weight: 500; }
.lp-article-related {
    padding-top: 40px;
}
.lp-article-related ul {
    list-style: none;
    padding: 0;
}
.lp-article-related li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.lp-article-related a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.lp-article-related a:hover { color: var(--blue); }

/* ---------- Pages de contenu (seo-page) ---------- */
/* Une colonne de lecture comme le blog, des blocs aeres, les memes boutons
   et couleurs que l'accueil. Aucune image ni police supplementaire. */
.lp-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 20px 72px;
}
.lp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--faint);
    margin-bottom: 28px;
}
.lp-crumbs a { color: var(--muted); text-decoration: none; }
.lp-crumbs a:hover { color: var(--blue); }
.lp-page-hero { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.lp-page-hero .lp-kicker { text-align: left; }
.lp-page-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(30px, 5.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}
.lp-page-hero p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0 0 14px; }
.lp-page-hero .lp-lead { margin: 0 0 14px; max-width: none; font-size: 19px; color: var(--ink); }
.lp-page-hero .lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lp-page-sec { padding-top: 46px; }
.lp-page-sec h2 {
    margin: 0 0 14px;
    font-size: clamp(22px, 3.4vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.lp-page-sec > p { color: var(--muted); font-size: 16.5px; line-height: 1.75; margin: 0 0 14px; }
.lp-page-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lp-page-steps li { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lp-page-steps span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--blue); color: #fff; font-weight: 800; font-size: 14px;
}
.lp-page-steps h3 { margin: 14px 0 6px; font-size: 17px; }
.lp-page-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.lp-page-local { margin-top: 46px; padding: 30px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.lp-page-local h2 { margin-top: 0; }
.lp-page-note { font-size: 13.5px; color: var(--faint); margin: 10px 0 0; }
.lp-page-list { margin: 6px 0 0; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.lp-page-list li { margin-bottom: 8px; }
.lp-page-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: 18px; }
.lp-page-cards article { padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
.lp-page-cards h3 { margin: 0 0 8px; font-size: 16.5px; }
.lp-page-cards p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.lp-page-example { margin-top: 46px; padding: 28px 30px; border-left: 4px solid var(--teal); background: #f0fdfa; border-radius: 0 14px 14px 0; }
.lp-page-example h2 { margin-top: 0; font-size: 21px; }
.lp-page-example p { color: var(--ink); }
.lp-page-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.lp-page-faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; list-style-position: outside; }
.lp-page-faq details p { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }
.lp-page-related { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.lp-page-related a { font-weight: 700; color: var(--blue); text-decoration: none; }
.lp-page-related a:hover { text-decoration: underline; }
.lp-page-cta {
    margin-top: 56px; padding: 40px 28px; border-radius: 18px; text-align: center; color: #fff;
    background: linear-gradient(150deg, var(--blue), var(--teal));
}
.lp-page-cta h2 { margin: 0 0 10px; font-size: clamp(22px, 3.6vw, 30px); }
.lp-page-cta p { margin: 0 auto 22px; max-width: 620px; opacity: 0.94; line-height: 1.6; }
.lp-page-cta .lp-page-note { color: #fff; opacity: 0.8; margin: 16px 0 0; }

/* Accueil : raccourcis vers les pages de solutions. */
.lp-solutions { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 1040px; margin: 0 auto; }
.lp-solutions a { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.lp-solutions a:hover { border-color: #cbd5e1; box-shadow: 0 10px 28px rgb(15 23 42 / 7%); }
.lp-solutions strong { display: block; margin-bottom: 6px; font-size: 16.5px; }
.lp-solutions span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- Pied de page ---------- */
/* Fond bleu nuit, comme le haut de l'accueil : il ferme la page et regroupe
   la navigation en colonnes lisibles d'un coup d'oeil. */
.lp-foot {
    margin-top: 0;
    background: #0b1424;
    color: #cbd5e1;
    font-size: 14px;
}
.lp-foot-inner {
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) 3fr;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 56px 24px 40px;
}
.lp-foot-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.lp-foot-logo b { color: #60a5fa; font-weight: 800; }
.lp-foot-brand p { margin: 16px 0 0; line-height: 1.65; color: #94a3b8; max-width: 340px; }
.lp-foot-brand .lp-foot-local {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 12px;
    border: 1px solid rgb(148 163 184 / 25%);
    border-radius: 999px;
    color: #e2e8f0;
    font-size: 13px;
}
.lp-foot-local svg { width: 15px; height: 15px; color: var(--teal); }
.lp-foot-brand .lp-btn { margin-top: 22px; }
.lp-foot-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
.lp-foot-cols h2 {
    margin: 4px 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.lp-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-foot-cols a,
.lp-foot-lang a {
    color: #cbd5e1;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s;
}
.lp-foot-cols a:hover,
.lp-foot-lang a:hover { color: #fff; }
.lp-foot a:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: 3px; }
.lp-foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    border-top: 1px solid rgb(148 163 184 / 18%);
    font-size: 13px;
    color: #94a3b8;
}
.lp-foot-bottom p { margin: 0; }
.lp-foot-lang { display: flex; gap: 16px; }
.lp-foot-lang a[aria-current] { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
    .lp-foot-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
    .lp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 700px) {
    .lp-foot-brand .lp-btn { width: auto; }
}

/* ---------- Menu Solutions de l'en-tete ---------- */
.lp-drop { position: relative; }
.lp-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.lp-drop-toggle svg { transition: transform 0.15s; }
.lp-drop:hover .lp-drop-toggle,
.lp-drop:focus-within .lp-drop-toggle,
.lp-drop-active .lp-drop-toggle { color: var(--blue); }
.lp-drop:hover .lp-drop-toggle svg,
.lp-drop:focus-within .lp-drop-toggle svg { transform: rotate(180deg); }
.lp-drop-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 50;
    width: 380px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgb(15 23 42 / 14%);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
/* Pont invisible entre le bouton et le panneau : le survol ne se perd pas. */
.lp-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.lp-drop:hover .lp-drop-menu,
.lp-drop:focus-within .lp-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.lp-drop-menu a {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.lp-drop-menu a:hover,
.lp-drop-menu a:focus-visible,
.lp-drop-menu a[aria-current] { background: var(--surface); }
.lp-drop-menu strong { display: block; font-size: 14px; font-weight: 700; }
.lp-drop-menu a:hover strong,
.lp-drop-menu a[aria-current] strong { color: var(--blue); }
.lp-drop-menu span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 700px) {
    .lp-drop { border-bottom: 1px solid var(--line); padding: 13px 4px 6px; }
    .lp-drop-toggle { cursor: default; font-weight: 700; color: var(--ink); }
    .lp-drop-toggle svg { display: none; }
    .lp-drop-menu,
    .lp-drop:hover .lp-drop-menu,
    .lp-drop:focus-within .lp-drop-menu {
        position: static;
        width: auto;
        margin-top: 6px;
        padding: 0;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .lp-drop-menu::before { display: none; }
    .lp-links .lp-drop-menu a { padding: 10px 10px; border-bottom: 0; }
    .lp-drop-menu span { display: none; }
    .lp-drop-menu strong { font-weight: 500; font-size: 14.5px; color: var(--muted); }
    .lp-drop-menu a[aria-current] strong { color: var(--blue); font-weight: 600; }
}

/* ---------- Captures tutoriels (figures des pages de contenu) ---------- */
.lp-figure { margin: 22px 0 6px; }
.lp-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgb(15 23 42 / 8%);
    background: #fff;
}
.lp-figure figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
/* Une capture etroite (colonne de reglages) garde sa taille naturelle. */
.lp-figure img[width] { width: auto; }
.lp-figure img[width="1194"], .lp-figure img[width="1200"] { width: 100%; }
.lp-support-form{display:grid;gap:16px;max-width:620px;margin:24px 0 64px}.lp-support-form label{display:grid;gap:6px;font-weight:600;font-size:14px}.lp-support-form input,.lp-support-form textarea{font:inherit;padding:12px 14px;border:1px solid #cfdbea;border-radius:10px;background:#fff}.lp-support-form .lp-btn{justify-self:start}.lp-support-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.lp-support-note{font-size:13px;color:#64748b;margin:0}.lp-support-status{padding:12px 16px;border-radius:10px;background:#ecfdf5;color:#08755a;max-width:620px}.lp-support-errors{padding:12px 16px;border-radius:10px;background:#fef3f2;color:#9d2635;max-width:620px}
.lp-dl-status{display:inline-block;margin:12px 0 0;padding:10px 16px;border-radius:12px;background:#ecfdf5;color:#08755a;font-weight:600}.lp-dl-android{max-width:760px}.lp-dl-android ol{display:grid;gap:10px;padding-left:22px;line-height:1.6}
.lp-subtitle{margin:48px 0 8px;font-size:1.35rem}.lp-who a em{display:block;margin-top:10px;font-style:normal;font-weight:600;font-size:.9rem;color:#0b5ed7}
.lp-dl-other{display:block;margin-top:10px;font-size:13px;color:#475569;text-decoration:underline}
/* Videos : page /videos, encadre du support, lien YouTube du pied de page. */
.vp{background:#f6f8fc}
.vp-hero{background:radial-gradient(900px 520px at 50% 0%,#17406f 0%,#0b1f3a 62%,#071428 100%);color:#fff;text-align:center;padding:64px 20px 72px}
.vp-hero-inner{max-width:760px;margin:0 auto}
.vp-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgb(255 255 255 / 10%);border:1px solid rgb(255 255 255 / 18%);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vp-kicker svg{color:#ff4d4d;width:18px;height:18px}
.vp-hero h1{margin:18px 0 16px;font-size:clamp(32px,6vw,54px);line-height:1.08;letter-spacing:-.03em}
.vp-hero p{margin:0 auto 6px;max-width:620px;color:#c9d6ea;font-size:17px;line-height:1.55}
.vp-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.vp-btn-light{background:rgb(255 255 255 / 8%);color:#fff;border:1px solid rgb(255 255 255 / 30%)}
.vp-btn-light:hover{background:rgb(255 255 255 / 16%)}
.vp-btn-light svg{width:18px;height:18px;margin-right:6px;vertical-align:-3px;color:#ff4d4d}
.vp-featured{max-width:980px;margin:-36px auto 0;position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:center;background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 60px rgb(15 23 42 / 12%)}
.vp-featured .vid-card figcaption{display:none}
.vp-label{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:#e8f0fe;border-radius:999px;padding:5px 12px}
.vp-featured-text h2{margin:14px 0 12px;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em}
.vp-featured-text p{margin:0 0 8px;color:var(--muted);font-size:16px;line-height:1.6}
.vp-featured-playlist{display:flex;align-items:center;gap:8px;margin-top:16px!important;font-weight:600;color:var(--ink)!important;font-size:14px!important}
.vp-library{max-width:1080px;margin:0 auto;padding:56px 20px 8px}
.vp-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vp-chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid #d8e0ea;background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.vp-chip span:last-child{font-size:12px;color:var(--faint);font-weight:700}
.vp-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.vp-chip[aria-pressed=true] span:last-child{color:#cbd5e1}
.vp-chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.vp-filter-lead{min-height:24px;text-align:center;color:var(--muted);margin:14px 0 18px}
.vid-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.vid-tag-protect{--tag:#0b5ed7}.vid-tag-dossier{--tag:#0d9488}.vid-tag-local{--tag:#7c3aed}.vid-tag-clear{--tag:#d97706}
.vid-dot{background:var(--tag)}
.vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:860px){.vid-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.vid-card{margin:0}
.vid-card[hidden]{display:none}
.vid-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0b1f3a;box-shadow:0 12px 30px rgb(15 23 42 / 16%);transition:transform .2s,box-shadow .2s}
.vid-card:hover .vid-frame{transform:translateY(-3px);box-shadow:0 18px 40px rgb(15 23 42 / 22%)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#0b1f3a;cursor:pointer}
.vid-facade img{width:100%;height:100%;object-fit:cover;display:block}
.vid-facade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgb(7 20 40 / 55%))}
.vid-play{position:absolute;z-index:1;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgb(255 255 255 / 94%);color:var(--blue);display:grid;place-items:center;box-shadow:0 10px 24px rgb(0 0 0 / 30%);transition:transform .15s}
.vid-facade:hover .vid-play,.vid-facade:focus-visible .vid-play{transform:scale(1.1)}
.vid-facade:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.vid-tag{position:absolute;z-index:1;left:10px;bottom:10px;right:10px;text-align:left;font-size:11.5px;font-weight:700;color:#fff;line-height:1.3}
.vid-tag::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tag);margin-right:6px;box-shadow:0 0 0 2px rgb(255 255 255 / 70%)}
.vid-card figcaption{margin-top:12px;font-size:14.5px;line-height:1.4;color:var(--ink);font-weight:650}
.vp-cta{max-width:980px;margin:56px auto 0;padding:44px 24px;text-align:center;color:#fff;border-radius:24px;background:linear-gradient(135deg,#0b5ed7 0%,#0b3f97 100%);box-shadow:0 20px 50px rgb(11 94 215 / 25%)}
.vp-cta h2{margin:0 0 10px;font-size:clamp(24px,4vw,34px);letter-spacing:-.02em}
.vp-cta p{margin:0;color:#dbe7fb;font-size:16px}
.vp-cta .vp-hero-actions{margin-top:24px}
.vid-note{text-align:center;font-size:13px;color:var(--faint);margin:20px auto 0;padding:0 20px 64px}
@media (max-width:700px){
  .vp-hero{padding:44px 18px 64px}
  .vp-featured{grid-template-columns:1fr;gap:20px;margin:-36px 16px 0;padding:18px}
  .vp-featured-video{max-width:240px;margin:0 auto;width:100%}
  .vp-featured-text{text-align:center}
  .vp-featured-playlist{justify-content:center}
  .vp-library{padding:40px 16px 8px}
  .vp-filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scrollbar-width:none}
  .vp-chip{flex:0 0 auto}
  .vp-cta{margin:40px 16px 0;padding:34px 20px}
}
.lp-support-videos{max-width:620px;margin:8px 0 40px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.lp-support-videos h2{margin:0 0 4px;font-size:20px}
.lp-support-videos p{margin:0 0 14px;color:var(--muted)}
.lp-support-videos .vid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-support-videos .vid-card figcaption{font-size:12.5px}
.lp-support-videos .lp-support-all{display:inline-block;margin-top:14px;font-weight:600;color:var(--blue)}
.lp-foot-social{display:flex;gap:10px;margin-top:14px}
.lp-foot-social a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:14px}
.lp-foot-social a:hover{color:#e11d1d}

/* Lot freins a l'achat : lien de demo, badges de forfait, comparatif, temoignages. */
.lp-demo-link { margin: 14px 0 0; font-weight: 600; }
.lp-demo-link a { color: var(--blue); text-decoration: none; }
.lp-demo-link a:hover { text-decoration: underline; }
.lp-plan-badge { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: #e4f5f2; color: #0b6b61; font-size: 12px; font-weight: 700; }
.lp-versus-grid, .lp-testimonial-grid { grid-column: 1 / -1; width: 100%; }
.lp-versus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 26px auto 0; }
.lp-versus-col { padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: left; }
.lp-versus-col h3 { margin: 0 0 12px; font-size: 17px; }
.lp-versus-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-versus-col li { position: relative; padding-left: 28px; color: var(--muted); line-height: 1.5; }
.lp-versus-bad li::before { content: "✕"; position: absolute; left: 0; color: #b62c3c; font-weight: 700; }
.lp-versus-good { border: 2px solid var(--blue); box-shadow: 0 16px 36px rgb(11 94 215 / 10%); }
.lp-versus-good li { color: var(--ink); }
.lp-versus-good li::before { content: "✓"; position: absolute; left: 0; color: #0b887b; font-weight: 800; }
@media (max-width: 720px) { .lp-versus-grid { grid-template-columns: 1fr; } }

/* ---------- accueil : sections de positionnement (lp-x-*) ---------- */
.lp-x-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.lp-x-head .lp-lead { margin-bottom: 0; }
.lp-x-head-sub { margin-top: 72px; margin-bottom: 28px; }
.lp-x-head-sub h3 { font-size: clamp(20px, 2.8vw, 26px); font-weight: 800; margin-bottom: 10px; }
.lp-x-head-sub p { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: 14.5px; }

/* Confidentialite : texte et appareil cote a cote */
.lp-x-privacy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding-left: max(24px, calc((100% - 1120px) / 2)); padding-right: max(24px, calc((100% - 1120px) / 2)); }
.lp-x-privacy-copy .lp-kicker, .lp-x-privacy-copy h2 { text-align: left; }
.lp-x-privacy-copy h2 { font-size: clamp(26px, 4vw, 40px); }
.lp-x-privacy-copy p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.lp-x-device { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -28px rgb(11 94 215 / 35%), 0 2px 6px rgb(15 23 42 / 5%); }
.lp-x-device::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgb(20 184 166 / 22%), transparent 70%); z-index: -1; }
.lp-x-device-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.lp-x-device-bar span { margin-left: auto; color: var(--faint); letter-spacing: 2px; }
.lp-x-device ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-x-device li { display: flex; align-items: center; gap: 14px; padding: 10px 6px; font-weight: 650; font-size: 15.5px; border-radius: 12px; }
.lp-x-device li + li { border-top: 1px dashed var(--line); border-radius: 0; }
.lp-x-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lp-x-platforms span { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--muted); }

/* Dossier client : video + etapes */
.lp-x-demo-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; max-width: 1160px; margin: 0 auto; align-items: stretch; }
.lp-x-video { margin: 0; }
.lp-x-video video { display: block; width: 100%; height: auto; border-radius: 18px; background: #0b1730; box-shadow: 0 30px 60px -30px rgb(15 23 42 / 55%); }
.lp-x-video figcaption { margin-top: 10px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.lp-x-same { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--surface, #f4f7fb); border: 1px solid var(--line, #e3e8f0); }
.lp-x-same strong { display: block; font-size: 15px; margin-bottom: 4px; }
.lp-x-same p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted, inherit); }
.lp-x-same a { white-space: nowrap; color: var(--blue); font-weight: 600; text-decoration: none; }
.lp-x-steps { display: flex; flex-direction: column; gap: 20px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--surface)); }
.lp-x-steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; flex: 1; }
.lp-x-steps ol::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--blue), var(--teal)); opacity: 0.25; }
.lp-x-steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.lp-x-steps li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 5px #e7f0fe; }
.lp-x-steps h3 { font-size: 16px; margin-bottom: 4px; }
.lp-x-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Trois exemples : apercu en tete de carte */
.lp-x-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1160px; margin: 0 auto; }
.lp-x-cases article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform 160ms ease, box-shadow 160ms ease; }
.lp-x-cases article:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgb(15 23 42 / 30%); }
.lp-x-case-preview { display: block; padding: 18px 18px 0; background: linear-gradient(160deg, #eef4ff, #e9faf7); }
.lp-x-case-preview img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 -2px 18px rgb(15 23 42 / 10%); }
.lp-x-case-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.lp-x-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #e7f0fe; color: var(--blue); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-x-case-body h3 { font-size: 18px; }
.lp-x-case-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
.lp-x-case-link { margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--blue) !important; }
.lp-x-case-link:hover { text-decoration: underline; }
.lp-x-honest { display: flex; gap: 16px; align-items: flex-start; max-width: 1160px; margin: 26px auto 0; padding: 20px 24px; border-radius: 16px; background: #eef4ff; border: 1px solid #d6e4fb; }
.lp-x-honest h3 { font-size: 16px; margin-bottom: 4px; }
.lp-x-honest p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Comparatif */
.lp-x-versus-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; max-width: 940px; margin: 0 auto; align-items: center; }
.lp-x-versus-grid article { padding: 26px 28px; border-radius: 18px; }
.lp-x-versus-grid h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 18px; }
.lp-x-versus-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-x-versus-grid li { position: relative; padding-left: 32px; line-height: 1.5; }
.lp-x-versus-grid li::before { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; }
.lp-x-versus-bad { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.lp-x-versus-bad h3 { color: var(--muted); }
.lp-x-versus-bad li::before { content: "✕"; background: #fdecee; color: #b62c3c; }
.lp-x-versus-good { padding: 32px 30px !important; background: linear-gradient(150deg, var(--blue), var(--blue-dark)); color: #fff; box-shadow: 0 28px 56px -24px rgb(11 94 215 / 55%); }
.lp-x-versus-good img { padding: 3px; border-radius: 8px; background: #fff; }
.lp-x-versus-good li { font-weight: 600; }
.lp-x-versus-good li::before { content: "✓"; background: rgb(255 255 255 / 18%); color: #fff; }

/* Prix : bandeau avec carte */
.lp-x-price { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 44px; border-radius: 24px; background: radial-gradient(circle at 0 0, rgb(20 184 166 / 14%), transparent 45%), linear-gradient(135deg, #0f172a, #12305f); color: #fff; }
.lp-x-price .lp-kicker, .lp-x-price h2 { text-align: left; }
.lp-x-price .lp-kicker { color: #7dd3c8; }
.lp-x-price h2 { font-size: clamp(26px, 3.8vw, 36px); }
.lp-x-price > div:first-child > p:last-child { margin: 0; color: #cbd5e1; font-size: 16px; line-height: 1.7; }
.lp-x-price-card { padding: 26px; border-radius: 18px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 24px 48px -20px rgb(0 0 0 / 45%); }
.lp-x-price-from { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 650; }
.lp-x-price-amount { margin: 2px 0 18px; font-size: 42px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }
.lp-x-price-amount span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lp-x-price-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Pour qui : 3 + 2 cartes equilibrees */
.lp-x-who { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.lp-x-who a { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.lp-x-who a:nth-child(4), .lp-x-who a:nth-child(5) { grid-column: span 3; }
.lp-x-who a:hover { transform: translateY(-3px); border-color: #c7d7f2; box-shadow: 0 20px 40px -22px rgb(11 94 215 / 35%); }
.lp-x-who strong { font-size: 17px; line-height: 1.3; }
.lp-x-who-body { color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.lp-x-who em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--blue); }

@media (max-width: 960px) {
    .lp-x-privacy, .lp-x-demo-grid, .lp-x-price { grid-template-columns: 1fr; }
    .lp-x-privacy { gap: 32px; }
    .lp-x-cases { grid-template-columns: 1fr; max-width: 560px; }
    .lp-x-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-x-who a, .lp-x-who a:nth-child(4), .lp-x-who a:nth-child(5) { grid-column: span 1; }
    .lp-x-who a:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .lp-x-versus-grid { grid-template-columns: 1fr; }
    .lp-x-price { padding: 28px 22px; gap: 26px; }
    .lp-x-who { grid-template-columns: 1fr; }
    .lp-x-who a:nth-child(5) { grid-column: auto; }
    .lp-x-steps { padding: 20px; }
    .lp-x-head-sub { margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-x-cases article, .lp-x-who a { transition: none; }
    .lp-x-cases article:hover, .lp-x-who a:hover { transform: none; }
}

/* ---------- engagements, outils inclus, pages de confiance ---------- */
.lp-x-commit-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-x-commit-grid li { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.lp-x-commit-grid strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
.lp-x-commit-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pp-plans .lp-x-commit { padding: 44px 0 8px; }
.pp-positioning { max-width: 760px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }

.lp-x-free-table { max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -32px rgb(15 23 42 / 30%); }
.lp-x-free-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.lp-x-free-row > span { padding: 15px 20px; font-size: 14.5px; line-height: 1.45; border-top: 1px solid var(--line); }
.lp-x-free-row > span:first-child { font-weight: 650; color: var(--ink); }
.lp-x-free-headrow > span { border-top: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); background: var(--surface); }
.lp-x-free-headrow > span:last-child { display: flex; align-items: center; gap: 8px; color: #fff; background: var(--blue); }
.lp-x-free-headrow img { padding: 2px; border-radius: 6px; background: #fff; }
.lp-x-free-them { color: var(--muted); }
.lp-x-free-us { font-weight: 650; color: var(--ink); background: #f3f8ff; }
.lp-x-free-row:not(.lp-x-free-headrow) .lp-x-free-us::before { content: "✓ "; color: #0b887b; font-weight: 800; }

.lp-legal-tail { padding-top: 0; }
.lp-x-text-link { font-weight: 700; color: var(--blue) !important; }
.lp-x-data { display: grid; gap: 14px; }
.lp-x-data article { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lp-x-data h3 { font-size: 16px; margin-bottom: 10px; }
.lp-x-data dl { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; }
.lp-x-data dt { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.lp-x-data dd { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 1040px) { .lp-x-commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .lp-x-commit-grid { grid-template-columns: 1fr; }
    .lp-x-free-row { grid-template-columns: 1fr 1fr; }
    .lp-x-free-row > span:first-child { grid-column: 1 / -1; padding-bottom: 4px; background: var(--surface); }
    .lp-x-free-headrow > span:first-child { display: none; }
    .lp-x-free-row > span:not(:first-child) { border-top: 0; padding-top: 8px; }
    .lp-x-data dl { grid-template-columns: 1fr; }
}
.lp-x-batch-video { max-width: 980px; margin: 0 auto; }
.lp-x-batch .lp-x-head-sub { margin-top: 64px; }
.lp-x-price-annual { margin: -10px 0 16px; color: #0d9488; font-size: 14px; font-weight: 700; }
.lp-x-guide-steps { display: grid; gap: 14px; padding-left: 22px; }
.lp-x-guide-steps strong { display: block; margin-bottom: 4px; }
.lp-x-guide-steps p { margin: 0; }
.lp-x-template { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.lp-x-template figcaption { padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.lp-x-template pre { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; font: 14.5px/1.6 Inter, sans-serif; color: var(--ink); user-select: all; }

/* ---------- temoignages : citation mise en avant, sans note ni etoile ---------- */
.lp-testimonials { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #f5f9ff 0%, #f1fbf9 100%); }
.lp-testimonials::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgb(20 184 166 / 14%), transparent 65%); z-index: -1; }
.lp-testimonials-head { max-width: 680px; margin: 0 auto; text-align: center; }
.lp-testimonials-head .lp-lead { margin-bottom: 0; }
.lp-testimonial-grid { display: grid; gap: 22px; max-width: 1080px; margin: 38px auto 0; }
.lp-testimonial-grid.is-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.lp-testimonial-grid.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; }
.lp-testimonial-grid.is-single { max-width: 820px; }
.lp-testimonial { position: relative; display: flex; flex-direction: column; margin: 0; padding: 34px 30px 26px; border-radius: 22px; background: #fff; border: 1px solid #e3eaf3; box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 18px 40px -18px rgb(11 94 215 / 22%); text-align: left; transition: transform .25s ease, box-shadow .25s ease; }
.lp-testimonial::after { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.lp-testimonial:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 26px 50px -20px rgb(11 94 215 / 30%); }
.lp-testimonial-mark { display: block; height: 44px; margin: -6px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 72px; line-height: 1; font-weight: 700; background: linear-gradient(135deg, var(--blue), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-testimonial blockquote { flex: 1; margin: 0 0 24px; color: var(--ink); font-size: 16.5px; line-height: 1.65; white-space: pre-line; }
.is-single .lp-testimonial { padding: 46px 52px 36px; }
.is-single .lp-testimonial blockquote { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; letter-spacing: -.1px; }
.lp-testimonial figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid #edf1f6; }
.lp-testimonial-img, .lp-testimonial-initials { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; }
.is-single .lp-testimonial-img, .is-single .lp-testimonial-initials { width: 72px; height: 72px; }
.lp-testimonial-img { object-fit: cover; border: 1px solid #e3eaf3; background: #fff; }
.lp-testimonial-img.is-logo { border-radius: 14px; object-fit: contain; padding: 6px; box-sizing: border-box; box-shadow: 0 4px 12px rgb(15 23 42 / 8%); }
.lp-testimonial-initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .5px; }
.lp-testimonial-who { display: grid; gap: 2px; min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.lp-testimonial-who strong { color: var(--ink); font-size: 15.5px; }
.lp-testimonial-in { justify-self: start; margin-top: 2px; color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.lp-testimonial-in:hover, .lp-testimonial-in:focus-visible { text-decoration: underline; }
.lp-testimonial-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 980px; margin: 36px auto 0; padding: 0; list-style: none; }
.lp-testimonial-logos li { display: grid; place-items: center; height: 64px; padding: 0 22px; border-radius: 16px; background: #fff; border: 1px solid #e3eaf3; box-shadow: 0 6px 18px -10px rgb(15 23 42 / 20%); }
.lp-testimonial-logos img { display: block; width: auto; max-width: 120px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.lp-testimonial-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 720px) {
    .lp-testimonial-grid.is-pair { grid-template-columns: 1fr; }
    .lp-testimonial, .is-single .lp-testimonial { padding: 30px 22px 22px; }
    .lp-testimonial::after { left: 22px; right: 22px; }
    .lp-testimonials::before { width: 320px; height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .lp-testimonial, .lp-testimonial-logos img { transition: none; } .lp-testimonial:hover { transform: none; } }