/* ==========================================================================
   Vocabulaire commun des pages publiques
   Charge par les pages produit, l'Assistant IA, la facturation electronique :
   conteneur `.hp`, teintes [data-tint], titres `hp-h2`/`hp-sub`, section,
   boutons `hp-btn` et FAQ `hp-faq`. Extrait de l'ancien home-index.css, qui
   ne porte plus que l'accueil. Ecrit contre public/css/tokens.css.
   ========================================================================== */

html body {
    margin: 0;
    background: var(--canvas);
    font-family: var(--font-ui);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.hp {
    --hp-max: 1344px;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
    color: var(--ink);
}

.hp *,
.hp *::before,
.hp *::after {
    box-sizing: border-box;
}

/* Remise a zero du chassis. `:where()` ne compte pour rien dans la
   specificite : chaque regle .hp-* qui suit gagne sans avoir a surencherir. */
.hp :where(h1, h2, h3, p, ul, ol, li, figure, blockquote, details, summary) {
    margin: 0;
    padding: 0;
    color: inherit;
}

.hp :where(ul, ol) {
    list-style: none;
}

.hp img {
    max-width: 100%;
}

/* ---------- Teintes d'outil -----------------------------------------------
   Un outil = une teinte. Le balisage pose data-tint, la feuille resout le
   jeton. Aucune couleur n'est ecrite deux fois.
   -------------------------------------------------------------------------- */
.hp[data-tint="documents"], .hp [data-tint="documents"] { --tint: var(--mod-documents); --tint-ink: var(--mod-documents-ink); --tint-a: var(--mod-documents-tint); --tint-b: var(--mod-documents-tint-2); }
.hp[data-tint="stock"], .hp [data-tint="stock"]     { --tint: var(--mod-stock);     --tint-ink: var(--mod-stock-ink);     --tint-a: var(--mod-stock-tint);     --tint-b: var(--mod-stock-tint-2); }
.hp[data-tint="crm"], .hp [data-tint="crm"]       { --tint: var(--mod-crm);       --tint-ink: var(--mod-crm-ink);       --tint-a: var(--mod-crm-tint);       --tint-b: var(--mod-crm-tint-2); }
.hp[data-tint="planning"], .hp [data-tint="planning"]  { --tint: var(--mod-planning);  --tint-ink: var(--mod-planning-ink);  --tint-a: var(--mod-planning-tint);  --tint-b: var(--mod-planning-tint-2); }
.hp[data-tint="finance"], .hp [data-tint="finance"]   { --tint: var(--mod-finance);   --tint-ink: var(--mod-finance-ink);   --tint-a: var(--mod-finance-tint);   --tint-b: var(--mod-finance-tint-2); }
.hp[data-tint="expenses"], .hp [data-tint="expenses"]  { --tint: var(--mod-expenses);  --tint-ink: var(--mod-expenses-ink);  --tint-a: var(--mod-expenses-tint);  --tint-b: var(--mod-expenses-tint-2); }
.hp[data-tint="assistant"], .hp [data-tint="assistant"] { --tint: var(--mod-assistant); --tint-ink: var(--mod-assistant-ink); --tint-a: var(--mod-assistant-tint); --tint-b: var(--mod-assistant-tint-2); }


.hp-h2 {
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: var(--weight-semibold);
    line-height: 1.08;
    letter-spacing: -0.038em;
}

.hp-sub {
    font-size: var(--text-body-lg);
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
}

.hp-section {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: var(--gutter-section) var(--gutter-page);
}


/* ---------- Boutons -------------------------------------------------------- */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding: 0 var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.hp-btn--dark {
    background: var(--ink);
    color: var(--ink-on-dark);
}

.hp-btn--dark:hover {
    background: color-mix(in srgb, var(--ink) 88%, var(--ink-on-dark));
    color: var(--ink-on-dark);
}

.hp-btn--outline {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
}

.hp-btn--outline:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.hp-btn--light {
    background: var(--ink-on-dark);
    color: var(--ink);
}

.hp-btn--light:hover {
    background: var(--surface);
    color: var(--ink);
}

.hp-btn--block {
    display: flex;
    width: 100%;
}

.hp-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ==========================================================================
   10 · FAQ
   ========================================================================== */
.hp-faq {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--space-16);
    border-top: 1px solid var(--border-subtle);
}

.hp-faq-intro .hp-sub {
    margin-top: var(--space-5);
}

.hp-faq-intro .hp-btn {
    margin-top: var(--space-4);
}

.hp-faq-list details {
    border-bottom: 1px solid var(--border);
}

.hp-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 22px var(--space-1);
    font-size: 17px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    cursor: pointer;
    list-style: none;
}

.hp-faq-list summary::-webkit-details-marker {
    display: none;
}

/* Le chevron est dessine en CSS : pas de SVG a repeter neuf fois. */
.hp-faq-list summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--duration) var(--ease);
}

.hp-faq-list details[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
    border-color: var(--ink);
}

.hp-faq-list summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.hp-faq-list details p {
    max-width: 720px;
    padding: 0 var(--space-1) 22px;
    font-size: var(--text-body);
    line-height: 1.65;
    color: var(--ink-secondary);
}

@media (max-width: 1100px) {
    .hp-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-10);
    }
}

@media (max-width: 768px) {
    .hp-faq-intro .hp-btn {
        width: 100%;
    }

    .hp-faq-list summary {
        font-size: var(--text-body-lg);
        padding: 18px var(--space-1);
    }
}