/* ==========================================================================
   Site public — « À propos », planche « Site · À propos »
   Chargee uniquement par templates/company/about.html.twig.
   Tout est ecrit contre public/css/tokens.css : aucune couleur brute, aucune
   police demandee ici. L'accent est celui du chassis, pas une couleur de
   module.
   ========================================================================== */

.ab {
    /* Cette page portait --brand sur --mod-documents, comme /contact le
       faisait pour --accent. Mais #5B4FCF est la couleur du module
       Documents : la donner au titre et au bouton d'une page « A propos »,
       c'est dire « Documents » la ou il n'en est pas question, et contredire
       le chassis — tokens.css pose body[data-module="none"] { --accent:
       var(--ink) }, que /login, /contact et l'accueil respectent. L'en-tete
       de cette page meme affiche deja son « Essai gratuit » a l'encre. */
    --brand:     var(--accent);
    --brand-ink: var(--accent-ink);

    --ab-max:    1344px;

    max-width: var(--ab-max);
    margin: 0 auto;
    padding: var(--space-10) var(--gutter-page) var(--gutter-section);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
    color: var(--ink);
}

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

/* Le chassis global stylise h1..h3, p, ul, dl. On repart de zero ici :
   `:where()` ne pese rien, chaque regle .ab-* qui suit gagne sans surenchere. */
.ab :where(h1, h2, h3, p, ul, li, dl, dt, dd) {
    margin: 0;
    padding: 0;
    color: inherit;
}

.ab :where(ul) { list-style: none; }

/* Le chassis ajoute un « © Stackly » minuscule sous la page aux visiteurs non
   connectes, en doublon du pied de page public. */
html body > footer:not(.home-footer) { display: none; }

/* ---------- Teintes des cartes « philosophie » ----------------------------
   Un outil, une teinte : le balisage pose data-tint, la feuille resout le
   jeton correspondant.
   -------------------------------------------------------------------------- */
.ab [data-tint="documents"] { --tint: var(--mod-documents); }
.ab [data-tint="stock"]     { --tint: var(--mod-stock); }
.ab [data-tint="finance"]   { --tint: var(--mod-finance); }

/* ---------- Vocabulaire commun -------------------------------------------- */

.ab-overline {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
}

.ab-overline--crm   { color: var(--mod-crm); }
.ab-overline--heard { color: var(--mod-crm-ink); }
.ab-overline--done  { color: var(--success); }

.ab-h1 {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: var(--weight-bold);
    line-height: 1.12;
    letter-spacing: var(--track-display);
    margin-top: var(--space-3);
}

.ab-h2 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-title);
    margin-top: var(--space-2);
}

.ab-lead {
    font-size: var(--text-body-lg);
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
    margin-top: var(--space-5);
}

.ab-section-note {
    font-size: 14px;
    color: var(--ink-muted);
    margin-top: var(--space-2);
    max-width: 78ch;
}

/* Chiffres, montants, limites : alignes et tabulaires. */
.ab-num { font-variant-numeric: tabular-nums; }

/* ---------- Entete de page ------------------------------------------------- */

.ab-intro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    padding: 56px 64px;
}

.ab-intro-text { max-width: 720px; }

/* ---------- Les quatre chiffres -------------------------------------------- */

.ab-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.ab-figure {
    padding: 22px 26px;
    border-right: 1px solid var(--border-subtle);
}

.ab-figure:last-child { border-right: none; }

.ab-figure-value {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    line-height: var(--lh-snug);
    margin-top: 7px;
}

.ab-figure-foot {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-top: var(--space-1);
}

/* ---------- Le probleme, en vis-a-vis -------------------------------------- */

.ab-problem { margin-top: var(--space-6); }

.ab-facing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
    align-items: start;
}

.ab-panel {
    padding: 26px 28px;
    border-radius: var(--radius-card-lg);
}

/* La colonne des reproches porte la teinte « CRM » : c'est la voix du client. */
.ab-panel--heard {
    background: var(--mod-crm-tint-2);
    /* La bordure se deduit de la teinte CRM, elle n'est pas recopiee. */
    border-color: var(--mod-crm-tint);
    border-color: color-mix(in srgb, var(--mod-crm) 24%, var(--surface));
}

.ab-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-4);
}

.ab-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: var(--lh-normal);
    padding: 7px 0;
}

.ab-item + .ab-item { border-top: 1px solid var(--border-subtle); }

.ab-panel--heard .ab-item { color: var(--ink-secondary); }

.ab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mod-crm);
    margin-top: 9px;
    flex: 0 0 auto;
}

.ab-check {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-chip);
    background: var(--success-tint);
    color: var(--success);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* ---------- Ce qui nous guide ---------------------------------------------- */

.ab-values { margin-top: var(--space-8); }

.ab-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: var(--space-5);
}

.ab-value {
    padding: 28px 30px;
    border-radius: var(--radius-card-lg);
    border-top: 3px solid var(--tint);
}

.ab-value-title {
    font-family: var(--font-display);
    font-size: var(--text-title-2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    line-height: var(--lh-snug);
}

.ab-value-text {
    font-size: 14px;
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
    margin-top: 11px;
}

/* ---------- Derriere Stackly ------------------------------------------------ */

.ab-founder { margin-top: var(--space-8); }

.ab-founder-card {
    padding: 28px 30px;
    border-radius: var(--radius-card-lg);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "over over" "title title" "text facts";
    gap: 0 var(--space-10);
}
.ab-founder-card .ab-overline { grid-area: over; }
.ab-founder-title { grid-area: title; margin-bottom: var(--space-4); }

.ab-founder-text {
    grid-area: text;
    font-size: 15px;
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
    margin: 0;
}
.ab-founder-text strong { color: var(--ink); }

.ab-founder-facts { grid-area: facts; display: grid; gap: var(--space-3); margin: 0; }
.ab-founder-facts dt {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
}
.ab-founder-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); }
.ab-founder-facts a { color: var(--ink); }

@media (max-width: 768px) {
    .ab-founder-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "over" "title" "text" "facts";
        gap: var(--space-4);
    }
}

/* ---------- Fin de page ----------------------------------------------------- */

.ab-cta {
    margin-top: var(--space-8);
    background: var(--ink);
    border-radius: var(--radius-card-lg);
    padding: var(--space-10) var(--space-12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
}

.ab-cta-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    line-height: var(--lh-snug);
    color: var(--ink-on-dark);
}

.ab-cta-sub {
    font-size: 14px;
    color: var(--ink-faint);
    margin-top: 9px;
}

.ab-cta-actions {
    display: flex;
    gap: 11px;
    flex: 0 0 auto;
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-lg);
    padding: 0 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                filter var(--duration) var(--ease);
}

.ab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mod-documents-tint);
}

.ab-btn--outline {
    border-color: var(--ink-secondary);
    color: var(--ink-on-dark);
}

.ab-btn--outline:hover {
    border-color: var(--ink-on-dark);
    color: var(--ink-on-dark);
}

/*  Ce bouton est pose sur .ab-cta, dont le fond est var(--ink). Tant que
    --brand valait le violet du module Documents, il se detachait. Depuis que
    --brand suit l'accent du chassis — donc l'encre — il avait exactement la
    couleur de son propre fond : le bouton devenait invisible, reduit a du
    texte a cote d'un « Voir les tarifs » qui, lui, garde sa bordure.
    Sur fond sombre l'action principale s'inverse, comme .hp-btn--light le
    fait deja sur le bandeau final de l'accueil.  */
.ab-btn--brand {
    background: var(--surface);
    color: var(--ink);
    font-weight: var(--weight-semibold);
    padding: 0 26px;
}

.ab-btn--brand:hover {
    filter: brightness(0.93);
    color: var(--ink);
}

/* ---------- Adaptations ------------------------------------------------------
   Jusqu'a 390 px sans debordement lateral : les grilles tombent, jamais le
   contenu.
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .ab-intro { padding: var(--space-10); }

    .ab-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ab-figure:nth-child(2n) { border-right: none; }
    .ab-figure:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }

    .ab-facing,
    .ab-values-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .ab { padding: var(--space-6) var(--gutter-page) var(--gutter-section); }

    .ab-h1 { font-size: 34px; }
    .ab-h2 { font-size: 25px; }
    .ab-lead { font-size: var(--text-body); }

    .ab-intro { padding: var(--space-6) var(--space-5); }

    .ab-figures { margin-top: var(--space-8); }
    .ab-figure { padding: var(--space-4); }
    .ab-figure-value { font-size: 26px; }

    .ab-panel { padding: var(--space-5); }
    .ab-value { padding: var(--space-5); }

    .ab-cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
        padding: var(--space-8) var(--space-5);
    }

    .ab-cta-title { font-size: 22px; }

    .ab-cta-actions { flex-direction: column; }

    .ab-btn { height: var(--touch-target); }
}

@media (max-width: 430px) {
    .ab-figures { grid-template-columns: minmax(0, 1fr); }

    .ab-figure {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .ab-figure:last-child { border-bottom: none; }
}