/* ==========================================================================
   Page d'un outil — /logiciel-facturation, /logiciel-crm…

   Cette feuille faisait 385 lignes d'un habillage anterieur au systeme de
   design : hero sombre en degrade, violet #6022c4 ecrit en dur, boutons
   arrondis a 30 px, ombres colorees. La page detonnait avec l'accueil et les
   deux autres landing, qui partagent toutes `home-index.css`.

   Elle ne porte plus que la mise en page propre a cette page. Le vocabulaire
   — `.hp`, `hp-h2`, `hp-sub`, `hp-btn` — et les teintes viennent de
   `home-index.css`, charge avant elle. Aucune valeur de couleur n'est ecrite
   ici : tout passe par les jetons de tokens.css.

   ATTENTION A L'ECHELLE D'ESPACEMENT : elle saute. 1, 2, 3, 4, 5, 6, 8, 10,
   12, 16, 24 — ni 7 ni 9 n'existent. Une declaration qui invoque un jeton
   absent est ignoree en entier, sans rien signaler : c'est ainsi que le bloc
   final avait perdu son `margin: auto` et se collait au bord gauche.
   ========================================================================== */

/* ---------- L'outil ------------------------------------------------------- */

.md-hero {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-12);
    text-align: center;
}

/*  Le nom de l'outil, dans sa teinte. `--tint` est resolu par le `data-tint`
    pose sur `.hp`, comme partout sur le site public. */
.md-eyebrow {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid var(--tint-a, var(--border));
    border-radius: var(--radius-chip);
    background: var(--tint-b, var(--surface-muted));
    color: var(--tint-ink, var(--ink-secondary));
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.md-h1 {
    max-width: 18ch;
    margin: var(--space-5) auto 0;
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: var(--weight-bold);
    letter-spacing: -0.032em;
    line-height: 1.08;
    color: var(--ink);
    text-wrap: balance;
}

.md-lead {
    max-width: 62ch;
    margin: var(--space-5) auto 0;
    font-size: var(--text-body-lg);
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
}

.md-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.md-hero-note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ---------- Ce qu'il fait -------------------------------------------------
   Une capture, son intitule, ses benefices. Le sens de lecture alterne d'un
   bloc a l'autre pour que la page ne se lise pas en colonne unique.
   -------------------------------------------------------------------------- */

.md-bloc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-10);
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6);
}

.md-bloc--inverse .md-bloc-texte { order: 2; }

.md-bloc--liste {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
}

.md-bloc-texte .hp-sub {
    margin-top: var(--space-3);
}

.md-benefices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.md-benefices li {
    position: relative;
    padding-left: 26px;
    font-size: var(--text-body);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
}

/*  La coche est dessinee en CSS : deux traits, pas une image ni une police
    d'icones a charger pour six pages. */
.md-benefices li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 5px;
    height: 9px;
    border: solid var(--tint, var(--success));
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

/*  LES CAPTURES SONT DE VRAIES CAPTURES.

    C'etaient des illustrations de banque d'images — un personnage qui signe
    un contrat, en violet — qui ne montraient pas le produit et dont la
    couleur n'avait aucun rapport avec celle du module. Une capture de
    l'application resout les deux : elle porte deja la teinte de l'outil,
    puisque l'application est teintee par outil, et elle montre ce qu'on vend.

    Elles sont larges et courtes la ou les illustrations etaient carrees :
    la page perd la moitie de sa hauteur sans rien perdre de son contenu.
    Le plafond de hauteur evite qu'une capture inhabituellement haute
    reintroduise le defilement pour rien. */
.md-bloc-image {
    margin: 0;
}

.md-bloc-image img {
    display: block;
    width: 100%;
    max-height: 340px;
    height: auto;
    /*  `top` et non `center` : l'en-tete d'un ecran porte son titre et ses
        chiffres — c'est le haut qui informe, pas le bas. */
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    background: var(--surface);
}

/* ---------- Le prix ------------------------------------------------------- */

.md-prix {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.md-prix-carte {
    max-width: 440px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--tint-a, var(--border));
    border-radius: var(--radius-card-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    text-align: left;
}

.md-prix-montant {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: var(--space-5);
    font-variant-numeric: tabular-nums;
}

.md-prix-montant span {
    font-family: var(--font-display);
    font-size: var(--text-display-2);
    font-weight: var(--weight-bold);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--tint-ink, var(--ink));
}

.md-prix-montant small {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.md-prix-note {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-muted);
}

.md-benefices--prix {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.md-prix-carte .hp-btn { margin-top: var(--space-6); }

.md-prix-fine {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-align: center;
}

.md-prix-pack {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.md-prix-pack a { color: var(--ink-secondary); }
.md-prix-pack a:hover { color: var(--ink); }

/* ---------- Les autres outils ---------------------------------------------
   Sans ce bloc, ces pages ne sont atteignables que depuis l'accueil : six
   culs-de-sac qui ne se transmettent aucune autorite.
   -------------------------------------------------------------------------- */

.md-liens {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.md-liens .hp-sub { margin-top: var(--space-2); }

.md-liens-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.md-liens-liste a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

/*  La pastille porte la teinte du voisin : un point, pas un aplat. Sept
    couleurs cote a cote en aplat donneraient une guirlande. */
.md-liens-liste a::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tint, var(--ink-muted));
}

.md-liens-liste a:hover {
    border-color: var(--tint, var(--ink));
    color: var(--tint-ink, var(--ink));
}

/*  La resolution des teintes est portee par `.hp [data-tint]` dans
    home-index.css. Les liens voisins reposent un `data-tint` chacun, donc
    elle s'applique sans rien reecrire ici. */

/* ---------- Dernier appel ------------------------------------------------- */

.md-final {
    max-width: var(--hp-max);
    margin: var(--space-12) auto var(--space-16);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-card-lg);
    background: var(--ink);
    color: var(--ink-on-dark);
    text-align: center;
}

.md-final h2 {
    font-family: var(--font-display);
    font-size: var(--text-title-1);
    font-weight: var(--weight-bold);
    letter-spacing: -0.028em;
    color: var(--ink-on-dark);
    text-wrap: balance;
}

.md-final p {
    max-width: 52ch;
    margin: var(--space-3) auto var(--space-6);
    color: var(--ink-on-dark);
    opacity: 0.78;
}

/* ---------- Adaptation ---------------------------------------------------- */

@media (max-width: 900px) {
    .md-bloc {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
        padding-block: var(--space-6);
    }

    /*  L'alternance n'a plus de sens sur une colonne : le texte repasse
        toujours au-dessus de sa capture. */
    .md-bloc--inverse .md-bloc-texte { order: 0; }

    .md-hero { padding-block: var(--space-10) var(--space-8); }
    .md-h1 { max-width: none; }
}

@media (max-width: 560px) {
    .md-hero-actions { flex-direction: column; }
    .md-hero-actions .hp-btn { width: 100%; }
}

/*  « Pour qui » : une ligne qui nomme la cible a plat, comme le font Odoo et
    Sage — « Pour les artisans et TPE » — plutot que de mettre en scene une
    journee type. C'est le marqueur qui separe un editeur d'un petit SaaS. */
.md-pourqui {
    max-width: 62ch;
    margin: var(--space-4) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ── Le film de l'outil, sous le titre ─────────────────────────────────── */
.md-film { padding: 8px 24px 72px; }
.md-film-more { margin: 18px 0 0; text-align: center; font-size: 15px; }
.md-film-more a { color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
.md-film-more a:hover { color: var(--ink); }