/*
 * Site de présentation d'E-BOUTIK.
 *
 * Servie telle quelle, sans passer par Vite : le déploiement n'exécute pas
 * `npm run build`, et une page dépendante d'un build absent s'afficherait nue.
 *
 * Les couleurs sont celles de l'application — vert, or et rouge du drapeau
 * malien — pour qu'un commerçant reconnaisse le produit d'un écran à l'autre.
 */

:root {
    --green: #0b7a33;
    --green-bright: #14b53a;
    --green-dark: #075a25;
    --green-wash: #f2f9f3;
    --gold: #fcd116;
    --gold-dark: #a8790a;
    --red: #ce1126;

    --ink: #12211a;
    --ink-soft: #4b5b52;
    --line: #dfe8e1;
    --surface: #ffffff;
    --bg: #f8fbf8;

    --radius: 16px;
    --wrap: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--green);
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* ------------------------------------------------------------------ Titres */

h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 700;
}

h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--ink-soft);
    margin: 16px 0 0;
    max-width: 46ch;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green);
    margin: 0 0 10px;
}

section {
    padding: clamp(56px, 9vw, 104px) 0;
}

section.tinted {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    max-width: 62ch;
    margin-bottom: 40px;
}

.section-head p {
    color: var(--ink-soft);
    margin: 12px 0 0;
}

/* ------------------------------------------------------------------ Boutons */

/*
 * La couleur du texte est déclarée sur `.btn` et non sur chaque variante : une
 * règle contextuelle comme `header nav a` pèse (0,1,2) et l'emporterait sinon
 * sur `.btn-primary` (0,1,0) — c'est ce qui peignait le bouton de l'en-tête en
 * gris-vert sur son fond vert.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 650;
    text-decoration: none;
    /* Un libellé de bouton ne se coupe jamais en deux lignes : il déborderait
       de sa pastille sur les écrans étroits. */
    white-space: nowrap;
    /* Un bouton est aussi un élément flex (de `.buttons`, `.cta .buttons`…) :
       sans ce `0`, son minimum par défaut vaut la largeur intégrale de son
       libellé figé par `nowrap`, et il refuse de rétrécir sous cette taille —
       il déborde alors de sa ligne au lieu de suivre `width: 100%`. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

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

.btn:focus-visible {
    outline: 3px solid var(--green-bright);
    outline-offset: 3px;
}

.btn-primary,
header.site nav .btn-primary,
.btn-primary:hover {
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    color: #fff;
    box-shadow: 0 10px 24px rgba(11, 122, 51, 0.28);
}

.btn-primary:hover {
    filter: brightness(1.06);
}

/* Action secondaire : contour sobre, pour ne pas disputer l'attention à
   l'action principale posée juste à côté. */
.btn-ghost,
.btn-ghost:hover {
    background: var(--surface);
    color: var(--green-dark);
    border-color: var(--line);
}

.btn-ghost:hover {
    border-color: var(--green);
}

.btn-whatsapp,
.btn-whatsapp:hover {
    background: #25d366;
    color: #06371a;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.25);
}

.btn-sm {
    padding: 10px 18px;
    font-size: 0.95rem;
}

/* Action principale du hero : c'est le seul geste qu'on attend vraiment du
   visiteur, il doit se distinguer de celles posées à côté. */
.btn-lg {
    padding: 17px 30px;
    font-size: 1.06rem;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* ------------------------------------------------------------------- Entête */

header.site {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(248, 251, 248, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

header.site .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.brand .mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}

.brand .suffix {
    color: var(--green);
}

header.site nav.nav-wide {
    display: flex;
    gap: 6px;
    margin-left: auto;
    align-items: center;
}

header.site nav.nav-wide a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.98rem;
}

header.site nav.nav-wide a:hover {
    background: var(--green-wash);
    color: var(--green-dark);
}

/* Raccourci vers la console, servi au seul exploitant identifié. Encadré et
   non simple lien : il ne fait pas partie du parcours du visiteur, et se
   confondre avec les autres rubriques ferait manquer sa nature. */
.nav-admin,
.nav-menu .panel a.nav-admin {
    border: 1px solid var(--green);
    color: var(--green-dark);
    font-weight: 600;
}

.nav-cta {
    margin-left: 12px;
}

/* ------------------------------------------------------- Menu des écrans étroits */

.nav-menu {
    display: none;
    margin-left: auto;
    position: relative;
}

.nav-menu summary {
    list-style: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.nav-menu summary::-webkit-details-marker {
    display: none;
}

/* Trois traits dessinés avec une seule boîte et ses pseudo-éléments. */
.nav-menu summary span,
.nav-menu summary span::before,
.nav-menu summary span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-menu summary span::before,
.nav-menu summary span::after {
    content: "";
    position: relative;
}

.nav-menu summary span::before {
    top: -6px;
}

.nav-menu summary span::after {
    top: 4px;
}

.nav-menu[open] summary span {
    background: transparent;
}

.nav-menu[open] summary span::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-menu[open] summary span::after {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-menu .panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(280px, calc(100vw - 32px));
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(9, 45, 24, 0.18);
}

.nav-menu .panel a:not(.btn) {
    color: var(--ink);
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 550;
}

.nav-menu .panel a:not(.btn):hover {
    background: var(--green-wash);
}

.nav-menu .panel .btn {
    margin-top: 6px;
}

/* --------------------------------------------------------------------- Hero */

.hero {
    padding-top: clamp(48px, 7vw, 88px);
    background:
        radial-gradient(1000px 420px at 85% -10%, rgba(20, 181, 58, 0.14), transparent 60%),
        radial-gradient(700px 320px at 5% 10%, rgba(252, 209, 22, 0.14), transparent 60%);
}

.hero .wrap {
    display: grid;
    /* `minmax(0, …)` et non `1.15fr 0.85fr` seuls : une piste de grille sans
       borne basse se refuse à descendre sous le contenu le plus large qu'elle
       porte — ici un bouton de téléchargement au libellé long — et pousse
       toute la page en débordement horizontal sur mobile plutôt que de le
       laisser rétrécir. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero .flag {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.hero .flag span {
    width: 26px;
    height: 6px;
    border-radius: 3px;
}

.reassure {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* Pas de flex ici : un conteneur flex supprime les blancs entre ses éléments
   anonymes, et « 30 jours d'essai » se serait affiché « 30 joursd'essai ». */
.reassure span {
    display: inline;
}

/* La coche vient du CSS : trois caractères de plus dans le HTML seraient lus à
   voix haute par un lecteur d'écran sans rien apporter. */
.reassure span::before {
    content: "";
    display: inline-block;
    vertical-align: -4px;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.reassure b {
    color: var(--ink);
}

.notice-test {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(252, 209, 22, 0.16);
    border: 1px solid rgba(168, 121, 10, 0.35);
    color: var(--ink);
    font-size: 0.95rem;
    max-width: 52ch;
}

/* Habille le QR code et la maquette du téléphone comme deux cartes d'une
   même colonne : le code se lit d'un coup d'œil, sans rivaliser avec l'écran
   qu'il précède. */
.hero-visual {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.qr-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 16px;
    border-radius: 18px;
    background: var(--green);
    box-shadow: 0 10px 24px rgba(9, 45, 24, 0.2);
}

.qr-badge-code {
    width: 88px;
    height: 88px;
    line-height: 0;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}

.qr-badge-code svg {
    width: 100%;
    height: 100%;
}

.qr-badge p {
    margin: 0;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 650;
    text-align: center;
}

/* Maquette de téléphone dessinée en CSS : aucune capture à maintenir. */
.phone {
    width: min(320px, 78vw);
    border-radius: 34px;
    padding: 12px;
    background: linear-gradient(160deg, #1b2b22, #0d1712);
    box-shadow: 0 30px 60px rgba(9, 45, 24, 0.28);
}

.phone .screen {
    background: var(--green-wash);
    border-radius: 26px;
    overflow: hidden;
}

.phone .bar {
    background: var(--green);
    color: #fff;
    padding: 16px 18px 18px;
    font-weight: 650;
}

.phone .bar small {
    display: block;
    opacity: 0.75;
    font-weight: 500;
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.phone .tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
}

.phone .tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
}

.phone .tile span {
    display: block;
    font-size: 0.66rem;
    color: var(--ink-soft);
}

.phone .tile strong {
    font-size: 0.98rem;
}

.phone .tile.good strong {
    color: var(--green);
}

.phone .tile.warn strong {
    color: var(--red);
}

.phone .rows {
    padding: 0 12px 14px;
}

.phone .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.phone .row > span {
    /* Le nom de l'article cède la place au prix, qui ne se coupe jamais
       (`.row b`) : sans ce `min-width`, par défaut à `auto` sur un élément
       flex, un nom un peu long refuse de rétrécir et pousse le prix hors de
       la carte. La ligne (le texte direct, avant le `<em>` en bloc) s'efface
       en points de suspension plutôt que de déborder. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone .row em {
    display: block;
    font-style: normal;
    font-size: 0.7rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone .row b {
    white-space: nowrap;
}

/* ----------------------------------------------------------- Fonctionnalités */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(11, 122, 51, 0.35);
    box-shadow: 0 18px 34px rgba(9, 45, 24, 0.09);
}

.card .icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--green-wash);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.card p {
    color: var(--ink-soft);
    margin: 8px 0 0;
    font-size: 0.98rem;
}

/* ------------------------------------------------------------------- Étapes */

.steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    position: relative;
}

/* --------------------------------------------------------- Démonstrations */

/*
 * Fond distinct de celui de la section (`--bg`, pas `--surface`) : en thème
 * sombre les deux valent presque la même teinte, et la carte se fondait dans
 * la section au point qu'un visiteur passait devant sans la voir.
 */
#demonstrations .card {
    background: var(--bg);
    border-color: rgba(11, 122, 51, 0.28);
}

.video-frame {
    position: relative;
    height: min(60vh, 460px);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, #05100a, #0b1310);
    margin-top: 4px;
}

.video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Une démonstration filmée au téléphone est verticale : `contain`, et non
       `cover`, garde l'écran entier au lieu d'en rogner les bords. */
    object-fit: contain;
    background: #000;
}

/*
 * Pastille de lecture posée sur la vidéo : sans aperçu (poster), un
 * `<video>` non chargé n'est qu'un rectangle noir — rien n'indique qu'il y a
 * quelque chose à regarder, encore moins que ça se déclenche d'un clic.
 */
.video-play {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, rgba(5, 16, 10, 0.15), rgba(5, 16, 10, 0.6));
    transition: background 0.18s ease;
}

.video-play:hover,
.video-play:focus-visible {
    background: linear-gradient(180deg, rgba(5, 16, 10, 0.25), rgba(5, 16, 10, 0.7));
}

.video-play-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    box-shadow: 0 14px 30px -8px rgba(20, 181, 58, 0.7);
}

.video-play-icon svg {
    margin-left: 3px;
}

.video-play-label {
    font-weight: 700;
    font-size: 0.98rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.video-frame.is-playing .video-play {
    display: none;
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -14px;
    left: 26px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: #4a3600;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
}

.step h3 {
    margin-top: 6px;
}

.step p {
    color: var(--ink-soft);
    margin: 8px 0 0;
    font-size: 0.98rem;
}

/* ------------------------------------------------------------------- Tarifs */

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
}

.plan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
}

.plan.featured {
    border-color: var(--green);
    box-shadow: 0 18px 40px rgba(11, 122, 51, 0.12);
}

.plan .badge {
    position: absolute;
    top: -13px;
    right: 22px;
    background: var(--green);
    color: #fff;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.74rem;
    font-weight: 700;
}

.plan .price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 14px 0 4px;
}

.plan .price strong {
    font-size: 2.15rem;
    letter-spacing: -0.03em;
}

.plan .price span {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.plan ul {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.plan li {
    padding: 7px 0 7px 28px;
    position: relative;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

.plan li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

.plan .btn {
    width: 100%;
    justify-content: center;
    margin-top: 22px;
}

.note {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-top: 22px;
}

/* --------------------------------------------------------------------- FAQ */

/* Les règles ci-dessous sont cadrées sur la FAQ : `summary` seul toucherait
   aussi le menu de l'en-tête, qui héritait de son « + ». */
#questions details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
}

#questions details[open] {
    border-color: var(--green);
}

/* Le marqueur est un élément de la ligne, non un flottant : en flottant, il
   descendait à la dernière ligne des questions tenant sur deux lignes et se
   retrouvait détaché de son titre. */
#questions summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-weight: 620;
    list-style: none;
}

#questions summary::-webkit-details-marker {
    display: none;
}

#questions summary::after {
    content: "+";
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-wash);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

#questions details[open] summary::after {
    content: "\2212";
}

#questions details p {
    color: var(--ink-soft);
    margin: 12px 0 0;
}

/* ------------------------------------------------------------------ Contact */

.cta {
    background: linear-gradient(140deg, var(--green-dark), var(--green));
    color: #fff;
    border-radius: 24px;
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
}

.cta h2,
.cta p {
    color: #fff;
}

.cta p {
    opacity: 0.9;
    margin: 14px auto 0;
    max-width: 52ch;
}

.cta .buttons {
    justify-content: center;
}

.cta .btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------- Pied */

footer.site {
    margin-top: 56px;
    padding: 48px 0 32px;
    background: var(--green-wash);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.94rem;
}

footer.site .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px 48px;
}

footer.site .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
}

footer.site .footer-brand .brand {
    color: var(--ink);
}

footer.site .footer-brand p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

footer.site .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    max-width: 460px;
    padding-top: 6px;
}

footer.site .footer-links a {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}

footer.site .footer-links a:hover {
    color: var(--green);
}

/* Rejetée en pleine largeur, sous les deux colonnes : une mention légale n'a
   pas le même poids qu'un lien vers Stock ou Tarifs, et les mélanger sur une
   ligne diluait les deux. */
footer.site .footer-copy {
    flex: 1 1 100%;
    order: 3;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--ink-soft);
    opacity: 0.75;
}

/* ---------------------------------------------------------------- Étroit */

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

    /* Le QR code et la maquette passent après le discours : sur un
       téléphone, les placer avant laissait le visiteur face à une fausse
       capture, titre hors écran. */
    .hero .hero-visual {
        order: 1;
        margin-top: 8px;
    }

    header.site nav.nav-wide {
        display: none;
    }

    .nav-menu {
        display: block;
    }

    /* La barre garde la marque et le menu ; l'appel à l'action tient dans le
       hero, immédiatement en dessous, et dans le panneau. */
    .nav-cta {
        display: none;
    }
}

@media (max-width: 560px) {
    .wrap {
        padding: 0 16px;
    }

    .buttons .btn {
        width: 100%;
    }

    /* Sur un téléphone, les boutons occupent toute la largeur : gardés à leur
       taille d'écran large, trois pastilles empilées mangeaient la moitié du
       premier écran et repoussaient le discours hors de vue. On les resserre
       sans descendre sous les 44 px de hauteur tactile. Le libellé le plus
       long porte la version et le poids du fichier (« — v1.0.15 · 145 Mo ») :
       la taille suit la largeur de l'écran pour tenir sans passer par
       l'ellipse, qui reste le filet de sécurité plutôt que la norme. */
    .btn {
        padding: 12px 18px;
        font-size: clamp(0.82rem, 3.6vw, 0.95rem);
    }

    /* Le libellé du téléchargement porte la version et le poids — « v1.0.7 ·
       56 Mo » — et ne se coupe pas : sa taille suit la largeur de l'écran pour
       tenir dans la pastille jusqu'aux plus étroits. */
    .btn-lg {
        padding: 14px 20px;
        font-size: clamp(0.9rem, 3.6vw, 1rem);
    }

    .buttons {
        gap: 10px;
        margin-top: 20px;
    }

    .reassure {
        gap: 10px 18px;
    }
}

/* Bouton de partage : flottant plutôt que dans l'en-tête, pour ne dupliquer
   ni la barre large ni le menu étroit du header. */
.share-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.share-toggle {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 10px 24px rgba(11, 122, 51, 0.35);
    cursor: pointer;
}

.share-toggle:hover,
.share-toggle:focus-visible {
    filter: brightness(1.05);
}

.share-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(18, 33, 26, 0.16);
}

/* `.share-menu` étant une règle d'auteur, elle l'emporterait sur le
   `display: none` de l'attribut `hidden` (règle de la feuille par défaut du
   navigateur) sans cette ligne — le menu s'afficherait ouvert au chargement. */
.share-menu[hidden] {
    display: none;
}

.share-menu a,
.share-menu button {
    display: block;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.share-menu a:hover,
.share-menu button:hover {
    background: var(--green-wash);
}

/* Écran sombre : la page suit le réglage du visiteur plutôt que de l'éblouir. */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #eaf3ec;
        --ink-soft: #a9bdb0;
        --line: #24352b;
        --surface: #121e17;
        --bg: #0b1310;
        --green-wash: #16281d;
    }

    header.site {
        background: rgba(11, 19, 16, 0.9);
    }

    .btn-ghost {
        background: var(--surface);
        color: #bfe9c9;
    }

    .phone {
        background: linear-gradient(160deg, #05100a, #020806);
    }

    .plan.featured {
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    }

    /* `--green` sur `--surface` quasi noir se lit à peine : ce repère de
       section doit rester lisible au premier coup d'œil. */
    #demonstrations .eyebrow {
        color: var(--green-bright);
    }
}

/* ------------------------------------------------- Pages de fond (SEO) */

/* Entête des pages filles : la même charpente que le hero de l'accueil, sans
   la maquette de téléphone qui n'y a pas sa place. */
.page-hero .wrap {
    display: block;
    max-width: 46rem;
}

/* Texte suivi. La largeur est bornée en `ch` et non en pixels : c'est le
   nombre de caractères par ligne qui fatigue l'œil, pas la largeur physique. */
.prose {
    max-width: 46rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.prose h2 {
    margin: 2.2rem 0 0.6rem;
    font-size: 1.35rem;
}

.prose p,
.prose li {
    line-height: 1.75;
    color: var(--ink-soft);
}

.prose ul {
    padding-left: 1.2rem;
    margin: 0.6rem 0 1rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose b {
    color: var(--ink);
}

.prose a {
    color: var(--green-dark);
}

/* Liens vers les pages voisines : ils tissent le site entre ses pages, ce
   qu'aucune d'elles ne fait toute seule. */
.prose-links {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line, #e3e8e4);
    font-size: 0.95rem;
}

.prose-legal .updated {
    color: var(--muted, #6b7280);
    font-size: 0.9rem;
    margin-top: -0.5rem;
}

.prose-legal h1 {
    margin-bottom: 0.4rem;
}

/* ------------------------------------------------- Partage d'une boutique */

/* Carte centrée, sans la maquette de téléphone du hero d'accueil : cette page
   n'a qu'une chose à montrer, la boutique qui l'a envoyée ici. */
.shop-share .wrap {
    max-width: 32rem;
}

.shop-share-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-share-card .flag {
    justify-content: center;
}

.shop-share-card .buttons {
    justify-content: center;
}

.shop-share-logo {
    width: 96px;
    height: 96px;
    border-radius: var(--radius);
    object-fit: cover;
    margin-bottom: 1.2rem;
    box-shadow: 0 8px 24px -12px rgba(18, 33, 26, 0.35);
}

/* Repli sans logo : même gabarit que la photo, pour que le titre tombe au
   même endroit qu'une boutique qui en a une. */
.shop-share-logo-fallback {
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    background: var(--green-wash);
}

.shop-share-note {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}