/* Satoshi vient de Fontshare (licence libre, usage commercial), pas de
   Google Fonts — d'où deux @import. Les deux restent en tête de fichier,
   comme l'exige la règle : un @import placé après une autre règle est
   ignoré. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ink: #241C3D;
    --plum: #146E66;
    --coral: #00B37A;
    --gold: #FFB627;
    --cream: #FAF3E7;
    --line: rgba(36, 28, 61, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pas de `scroll-behavior: smooth` ici : Lenis anime lui-même le défilement,
   liens d'ancre compris (option `anchors`). Laisser les deux actifs revenait à
   faire animer le même défilement par deux moteurs concurrents — c'est
   exactement ce qui avait neutralisé le lissage maison précédent. */
html {
    scroll-behavior: auto;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--cream);
    background-image:
        radial-gradient(circle at 10% 0%, rgba(0, 179, 122, 0.07), transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(20, 110, 102, 0.07), transparent 40%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: 'Satoshi', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-weight: 700;
}

a {
    color: inherit;
}

.wrap {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ══ Les pages juridiques ════════════════════════════════════════════════
   Mentions légales, CGV, confidentialité. Elles partageaient un style en
   ligne recopié trois fois — d'où cette classe, qui peut porter le calcul.

   La colonne faisait 760px, soit 720 de texte, et la ligne y courait de 78
   à 94 signes selon la page — mesuré paragraphe par paragraphe. Au-delà de
   75, l'œil perd le début de la ligne suivante ; et ce sont précisément les
   pages qu'on lit ligne à ligne, pas en diagonale.

   Le plafond a été relevé par balayage : à 720px de texte on est à 78-86,
   à 680 encore à 78-86, à 620 on tombe à 64-78, à 600 à 62-72. On prend
   600 de texte — la valeur la plus large qui met TOUS les paragraphes sous
   la barre — soit 640 avec le padding.

   Sans effet sur téléphone : la colonne y vaut déjà la largeur de l'écran. */
.page-legale {
    max-width: 640px;
    padding: 60px 20px 80px;
    line-height: 1.7;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: inline-block;
    flex-shrink: 0;
}

.dot.filled {
    background: var(--coral);
    border-color: var(--coral);
}

.dot-row {
    display: flex;
    gap: 6px;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 243, 231, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

/* La barre de menu s'étend d'un bord à l'autre de l'écran : elle sort du
   gabarit de 1250 px, contrairement au contenu des pages qui le garde pour
   rester lisible. Le padding latéral reste celui de .wrap (32px), ce qui
   aligne le logo sur le titre du hero, lui aussi en pleine largeur. */
.site-nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    max-width: none;
}

.brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* Plus de pastille pleine : le libellé seul, en vert. Le bouton se
   distinguait déjà par sa couleur — le fond en plus l'isolait du reste de la
   barre au lieu de l'y intégrer. */
.nav-cta {
    color: var(--coral) !important;
    font-weight: 600 !important;
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px 20px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.mobile-menu a {
    padding: 12px 8px;
    text-decoration: none;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
}

.mobile-menu.open {
    display: flex;
}

.hero {
    padding: 100px 0 0;
}

.hero .wrap {
    display: block;
    padding-bottom: 60px;
    position: relative;
}

.hero-content {
    max-width: 640px;
}

.hero h1 {
    font-size: 68px;
    line-height: 1.02;
    margin-bottom: 28px;
    max-width: 620px;
}

.hero .dash-screenshot {
    position: absolute;
    top: -20px;
    right: 50px;
    max-width: 450px;
    transform: rotate(0deg);
}

.hero p.lead {
    font-size: 18px;
    color: rgba(36, 28, 61, 0.68);
    max-width: 460px;
    margin-bottom: 32px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
}

.btn-primary {
    background: var(--coral);
    color: #fff;
    padding: 15px 26px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    transition: transform 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--plum);
    padding: 15px 26px;
    border-radius: 14px;
    border: 1.5px solid var(--plum);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
}

.dash-screenshot {
    max-width: 300px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 50px -18px rgba(36, 28, 61, 0.28);
    border: 1px solid var(--line);
}

.dash-screenshot img {
    width: 100%;
    display: block;
}

section {
    padding: 84px 0;
}

.section-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 52px;
}

.section-head .eyebrow {
    margin-bottom: 16px;
}

.section-head h2 {
    font-size: 34px;
    margin-bottom: 12px;
}

.section-head p {
    color: rgba(36, 28, 61, 0.65);
    font-size: 16px;
}

.section-title-big {
    font-size: 38px;
    margin-bottom: 40px;
    max-width: 500px;
}

.section-title-big.centered {
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#fonctionnalites .section-title-big {
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 110, 102, 0.1);
    border: 1px solid rgba(20, 110, 102, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--plum);
    margin-bottom: 22px;
}

.stat-emphasis {
    font-family: 'Satoshi', sans-serif;
    font-style: italic;
    font-weight: 600;
    color: var(--coral);
}

.stat-source {
    font-size: 11px;
    color: rgba(36, 28, 61, 0.4);
    margin-top: 6px;
}

.steps-editorial {
    display: flex;
    flex-direction: column;
    max-width: 720px;
}

.step-row {
    display: flex;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.step-row:last-child {
    border-bottom: 1px solid var(--line);
}

.step-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--coral);
    flex-shrink: 0;
    width: 40px;
}

.step-row h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.step-row p {
    font-size: 15px;
    color: rgba(36, 28, 61, 0.65);
    max-width: 480px;
}

.product-screens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.product-screen img {
    width: 100%;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 36px -16px rgba(36, 28, 61, 0.22);
}

.product-screen-label {
    text-align: center;
    font-size: 13px;
    color: rgba(36, 28, 61, 0.55);
    margin-top: 12px;
}

.why-editorial {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-callout-inline {
    font-size: 16px;
    color: rgba(36, 28, 61, 0.65);
    max-width: 340px;
    margin-top: 12px;
}

.why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
}

.why-item h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.why-item p {
    font-size: 13px;
    color: rgba(36, 28, 61, 0.6);
}

.features-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
}

.features-col {
    padding: 0 40px 0 0;
}

.features-col.right {
    padding: 0 0 0 40px;
    border-left: 1px solid var(--line);
}

.feature-item {
    margin-bottom: 36px;
    padding-left: 16px;
    border-left: 3px solid var(--coral);
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-item h3 {
    font-size: 19px;
    margin-bottom: 8px;
    font-weight: 700;
}

.feature-item p {
    font-size: 14px;
    color: rgba(36, 28, 61, 0.65);
    line-height: 1.55;
}

.feature-item p em {
    font-style: italic;
    color: rgba(36, 28, 61, 0.5);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}

.price-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--gold);
    box-shadow: 0 20px 40px -20px rgba(255, 182, 39, 0.35);
}

.price-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 100px;
    white-space: nowrap;
}

.price-card .plan-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--plum);
    margin-bottom: 14px;
}

.price-card .price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.price-card .price span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(36, 28, 61, 0.5);
}

.price-card .commitment {
    font-size: 12px;
    color: rgba(36, 28, 61, 0.5);
    margin-bottom: 10px;
}

.price-card .savings {
    display: inline-block;
    background: rgba(255, 182, 39, 0.15);
    color: #92650E;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    align-self: center;
}

.price-card .mini-list {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    flex: 1;
}

.price-card .mini-list li {
    font-size: 13px;
    color: rgba(36, 28, 61, 0.7);
    padding-left: 20px;
    position: relative;
}

.price-card .mini-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--coral);
    font-weight: 700;
}

.price-card .btn-primary,
.price-card .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    font-size: 13px;
    color: rgba(36, 28, 61, 0.55);
    margin-top: 24px;
}

.cta-section {
    text-align: center;
}

.cta-section h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.cta-section p {
    color: rgba(36, 28, 61, 0.65);
    margin-bottom: 28px;
}

footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(36, 28, 61, 0.5);
}

@media (max-width: 860px) {
    .nav-links {
        display: none;
    }
    .nav-burger {
        display: flex !important;
        /* 44x44 : la cible tactile recommandee. Le bouton mesurait 32x32.
           `box-sizing: border-box` etant global, les 6px de marge interne
           rongent la boite au lieu de l'agrandir — les trois barres gardent
           donc leurs 32px de large, seule la zone touchable grandit. */
        width: 44px;
        height: 44px;
        padding: 6px;
    }

    /* ── Le pied de page ──────────────────────────────────────────────
       Il n'avait aucune adaptation : quatre blocs en `space-between` se
       partageaient 335px, et la ligne de liens legaux tombait a 16px de haut
       — impossible a viser au doigt.

       Empiles, ils tenaient debout mais se lisaient mal : quatre lignes du
       meme gris, du meme corps, collees sans ecart, avec un rythme vertical
       qui alternait 20px (les lignes sans lien) et 44px (celles qui en
       portent). Rien ne disait ou finissait l'identite et ou commencaient
       les liens.

       Trois blocs desormais, et non quatre lignes :

         « © 2026 TapBack · Fait pour les commerces independants »
              une seule ligne, plus petite et plus pale : c'est la mention,
              pas le contenu ;
         le contact, puis les mentions legales,
              a leur corps normal, chacun sa ligne, 44px de haut.

       L'ordre du document n'est pas touche — ce qu'on lit et ce qu'annonce
       un lecteur d'ecran restent identiques. */
    footer {
        padding: 28px 0 34px;
    }

    footer .wrap {
        display: block;
        text-align: left;
    }

    /* Les deux mentions se suivent sur une meme ligne : elles disent la meme
       chose — qui edite, pour qui — et aucune n'est un lien. */
    .pied-marque,
    .pied-note {
        display: inline;
        font-size: 12px;
        color: rgba(36, 28, 61, 0.42);
    }

    .pied-marque::after {
        content: ' · ';
    }

    .pied-contact,
    .pied-legal {
        display: block;
    }

    /* L'ecart se prend ici et non sur les mentions : le lien qui suit porte
       deja 12px de rembourrage, qu'il faut retrancher pour que l'espace VU
       soit celui qu'on croit. */
    .pied-contact {
        margin-top: 6px;
    }

    /* 12px de part et d'autre, et non 6 : la ligne de 13px donnait une
       cible de 32px de haut, quand tout le reste de la page tactile a ete
       cale a 44. Le `gap` de la colonne redescend d'autant, sinon l'ecart
       visible entre deux liens doublerait — le rembourrage ne se voit pas,
       lui. */
    footer .wrap a {
        display: inline-block;
        padding: 12px 0;
    }

    /* La marque etait la derniere cible sous la barre des 44px : 30px de
       haut, juste a cote d'un bouton de menu qui, lui, en fait 44. Le
       rembourrage vertical agrandit la zone sans deplacer le logo — la
       barre centre ses elements. */
    .site-nav .brand {
        padding: 8px 0;
    }
    .hero .dash-screenshot {
        position: static;
        max-width: 100%;
        width: 100%;
        margin: 0 0 20px 0;
        transform: rotate(0deg);
    }
    .hero-content {
        max-width: 100%;
    }
    .hero h1 {
        font-size: 32px;
    }
    .steps, .features, .why-grid, .pricing-grid {
        grid-template-columns: 1fr;
    }
    .why-editorial {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 4px;
    }
    .why-list {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .why-item {
        padding: 0 4px;
        box-sizing: border-box;
    }
    .features-columns {
        grid-template-columns: 1fr;
    }
    .features-col.right {
        border-left: none;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 24px;
        margin-top: 24px;
    }
    .product-screens {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .section-title-big {
        font-size: 26px;
        margin-bottom: 24px;
    }
    .stat-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    section {
        padding: 56px 0;
    }
    .wrap {
        padding: 0 20px;
    }
}