/*
 * Feuille de styles publique de Garbi.
 * Composition calquée fidèlement sur documents-garbi/ecrans/accueil.png :
 * header fin, hero à deux colonnes, panneaux violet clair denses, cartes fines,
 * bandeau formules compact, CTA violet foncé horizontal. Les visuels proviennent
 * des mockups provisoires fournis (aucune interface, donnée ou illustration
 * inventée) ; les pictogrammes sont des cellules des planches 4 × 4 intégrées en
 * sprites CSS. Jetons centralisés en variables (cf. INTEGRATION.md). Aucune
 * police distante, aucun framework, aucun CDN.
 */

/* ------------------------------------------------------------------ */
/* Police de marque : Satoshi (self-hostée, variable 300–900)          */
/* Un seul fichier woff2, servi localement (aucun CDN, aucun Node).    */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Variable-q0hK3j7.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Jetons de design (relevés sur accueil.png)                          */
/* ------------------------------------------------------------------ */
:root {
    --garbi-white: #ffffff;
    --garbi-page: #fefefe;
    --garbi-ink: #101640;
    --garbi-ink-strong: #080f38;
    --garbi-text: #24274a;
    --garbi-muted: #666985;

    --garbi-violet: #4130d8;
    --garbi-violet-hover: #3425bd;
    --garbi-violet-dark: #281898;
    --garbi-violet-dark-2: #3024a3;
    --garbi-violet-soft: #f0f0fd;
    --garbi-violet-soft-2: #e9e8f8;

    --garbi-border: #e6e6ef;
    --garbi-green: #199447;
    --garbi-green-soft: #eaf6ed;
    --garbi-orange: #ff681b;
    --garbi-orange-soft: #fff0e6;
    --garbi-blue: #2468d8;
    --garbi-blue-soft: #ebf3fd;

    /* Dimensions et formes */
    --container-max: 1180px;
    --container-inline: clamp(20px, 3.2vw, 48px);
    --header-height: 72px;
    --radius-button: 6px;
    --radius-card: 10px;
    --radius-panel: 14px;
    --border-subtle: 1px solid var(--garbi-border);
    --shadow-product: 0 12px 32px rgb(28 25 70 / 12%);
    --shadow-card: 0 4px 16px rgb(28 25 70 / 6%);

    /* Typographie */
    --font-sans: "Satoshi", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;

    /* Échelle d'espacement */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;

    --section-gap: clamp(1rem, 1.8vw, 1.55rem);

    --focus-ring: 0 0 0 3px rgb(65 48 216 / 35%);
    --transition: 170ms ease;
}

/* ------------------------------------------------------------------ */
/* Réinitialisation légère                                            */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--garbi-text);
    background-color: var(--garbi-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: var(--garbi-violet);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3 {
    color: var(--garbi-ink);
    line-height: 1.16;
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

p {
    margin: 0 0 var(--space-3);
}

strong {
    color: var(--garbi-ink);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-button);
}

/* ------------------------------------------------------------------ */
/* Utilitaires de structure                                           */
/* ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-inline);
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    background: var(--garbi-violet);
    color: var(--garbi-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    transition: top var(--transition);
}

.skip-link:focus {
    top: var(--space-4);
    text-decoration: none;
}

.section {
    padding-block: var(--section-gap);
}

.section__intro {
    max-width: 42rem;
    margin-bottom: var(--space-6);
}

.section__intro--center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--garbi-violet);
    margin-bottom: var(--space-2);
}

.section__title {
    font-size: clamp(1.55rem, 3.6vw, 2.05rem);
    margin-bottom: var(--space-2);
}

.section__subtitle {
    font-size: 1.0625rem;
    color: var(--garbi-muted);
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Sprites d'icônes (planches provisoires 4 × 4)                       */
/* ------------------------------------------------------------------ */
.icon-sprite {
    display: inline-block;
    width: 46px;
    aspect-ratio: 1;
    flex: none;
    background-repeat: no-repeat;
    background-size: 400% 400%;
}

.icon-sprite--sm { width: 34px; }
.icon-sprite--lg { width: 54px; }
.icon-sprite--xl { width: 64px; }

.icon-sprite--communes {
    background-image: url("../images/sprites/icones-communes-provisoires-WDpMyRH.webp");
}
.icon-sprite--fonctionnelles {
    background-image: url("../images/sprites/icones-fonctionnelles-provisoires-BcphhPv.webp");
}
.icon-sprite--securite {
    background-image: url("../images/sprites/icones-securite-contenus-provisoires-sSR6fM-.webp");
}
.icon-sprite--utilitaires {
    background-image: url("../images/sprites/icones-utilitaires-provisoires-UWExQcC.webp");
}

/* Planches colorées par page (v1) : icônes de sections, garanties, flux, FAQ et
   CTA, chacune dans son cercle teinté (violet, bleu, vert, orange). */
.icon-sprite--accueil {
    background-image: url("../images/sprites/icones-accueil-couleurs-v1-b2dLLaQ.webp");
}
.icon-sprite--a-propos {
    background-image: url("../images/sprites/icones-a-propos-couleurs-v1-0a1LXVr.webp");
}
.icon-sprite--prospection {
    background-image: url("../images/sprites/icones-prospection-couleurs-v1-ALk1kzS.webp");
}
.icon-sprite--gestion-client {
    background-image: url("../images/sprites/icones-gestion-client-couleurs-v1-ef1B7kV.webp");
}
.icon-sprite--gestion-equipe {
    background-image: url("../images/sprites/icones-gestion-equipe-couleurs-v1-owLkErw.webp");
}
.icon-sprite--site-contenus {
    background-image: url("../images/sprites/icones-site-contenus-couleurs-v1-r7dEqzF.webp");
}
.icon-sprite--assistant-ia {
    background-image: url("../images/sprites/icones-assistant-ia-couleurs-v1-m7Lh46-.webp");
}
.icon-sprite--orchestrateur {
    background-image: url("../images/sprites/icones-orchestrateur-couleurs-v1-51tMMM5.webp");
}
.icon-sprite--conformite {
    background-image: url("../images/sprites/icones-conformite-couleurs-v1-n1HK-3U.webp");
}
.icon-sprite--tarifs {
    background-image: url("../images/sprites/icones-tarifs-couleurs-v1-pGLLww4.webp");
}
.icon-sprite--demonstration {
    background-image: url("../images/sprites/icones-demonstration-couleurs-v1-mKQYAF3.webp");
}

/* Colonnes (X) et lignes (Y) : grille 4 × 4 */
.sp-c1 { background-position-x: 0%; }
.sp-c2 { background-position-x: 33.333%; }
.sp-c3 { background-position-x: 66.666%; }
.sp-c4 { background-position-x: 100%; }
.sp-r1 { background-position-y: 0%; }
.sp-r2 { background-position-y: 33.333%; }
.sp-r3 { background-position-y: 66.666%; }
.sp-r4 { background-position-y: 100%; }

/* Emplacement d'icône « pastille » (panneaux, formules) */
.tile-icon {
    display: inline-flex;
    margin-bottom: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Images provisoires                                                 */
/* ------------------------------------------------------------------ */
.mock {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

.mock--dashboard {
    border-radius: var(--radius-panel);
    border: var(--border-subtle);
    box-shadow: var(--shadow-product);
}

.mock--assistant {
    width: min(200px, 60%);
    margin-inline: auto;
    border-radius: 0;
}

/* Cards conformité / histoire (accueil) : deux colonnes internes —
   média (picto ou image) À GAUCHE, titre + texte (+ lien) À DROITE. */
.split-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

.split-card__media {
    flex: none;
}

.split-card__media .tile-icon {
    margin-bottom: 0;
}

.split-card__content > :last-child {
    margin-bottom: 0;
}

.mock--histoire {
    width: 100%;
    border-radius: var(--radius-card);
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .split-card {
        grid-template-columns: auto 1fr;
        gap: var(--space-5);
    }

    /* Largeur de la colonne image (l'icône, elle, reste à sa taille propre). */
    .split-card__media .mock--histoire {
        width: 150px;
    }
}

/* ------------------------------------------------------------------ */
/* Boutons / liens d'action (rectangulaires, jamais en pilule)         */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
        border-color var(--transition);
}

.btn:hover {
    text-decoration: none;
}

.btn--block {
    width: 100%;
}

.btn--primary {
    background-color: var(--garbi-violet);
    color: var(--garbi-white);
}

.btn--primary:hover {
    background-color: var(--garbi-violet-hover);
}

.btn--outline {
    background-color: var(--garbi-white);
    color: var(--garbi-violet);
    border-color: var(--garbi-violet);
}

.btn--outline:hover {
    background-color: var(--garbi-violet-soft);
}

.btn--light {
    background-color: var(--garbi-white);
    color: var(--garbi-violet);
}

.btn--light:hover {
    background-color: var(--garbi-violet-soft);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--garbi-violet);
}

.link-arrow::after {
    content: "\2192";
    transition: transform var(--transition);
}

.link-arrow:hover {
    text-decoration: none;
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

/* Accent du lien accordé à la couleur de son pictogramme (cf. maquettes). */
.link-arrow--violet { color: var(--garbi-violet); }
.link-arrow--blue { color: var(--garbi-blue); }
.link-arrow--green { color: var(--garbi-green); }
.link-arrow--orange { color: var(--garbi-orange); }

/* ------------------------------------------------------------------ */
/* En-tête / navigation                                               */
/* ------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgb(255 255 255 / 92%);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: var(--border-subtle);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.brand__logo {
    /* Calé sur accueil.png : logo ~72 px sur canevas 864 → ≈ 8 % de la largeur. */
    width: clamp(112px, 9vw, 140px);
    height: auto;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: var(--border-subtle);
    border-radius: var(--radius-button);
    color: var(--garbi-ink);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.primary-nav {
    flex: 1 1 auto;
}

.primary-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.primary-nav__link {
    color: var(--garbi-text);
    font-weight: 600;
    font-size: 0.9375rem;
}

.primary-nav__link:hover {
    color: var(--garbi-violet);
    text-decoration: none;
}

.primary-nav__cta {
    margin: 0;
}

/*
 * Espace client : le texte conserve exactement la boîte et la ligne de base
 * d'un lien de navigation normal. L'icône est sortie du flux (position
 * absolue) pour ne pas peser sur la hauteur de ligne ; un padding dédié lui
 * réserve la place à gauche du libellé.
 */
.primary-nav__account {
    position: relative;
}

/* Compound pour survivre au raccourci `padding` du lien en version mobile. */
.primary-nav__link.primary-nav__account {
    padding-left: calc(18px + var(--space-2));
}

.primary-nav__account-icon {
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}

/* ------------------------------------------------------------------ */
/* Hero (deux colonnes, fond blanc)                                    */
/* ------------------------------------------------------------------ */
.hero {
    padding-block: clamp(1.25rem, 3vw, 2.15rem);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
}

.hero__title {
    font-size: clamp(1.85rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: var(--space-3);
}

.hero__title span {
    color: var(--garbi-violet);
}

.hero__lead {
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--garbi-text);
    margin-bottom: var(--space-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Panneaux violet clair (temps réel, assistant)                       */
/* ------------------------------------------------------------------ */
.panel-lav {
    background-color: var(--garbi-violet-soft);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-panel);
    padding: clamp(1.25rem, 2.2vw, 1.85rem);
}

.panel-lav__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

.panel-lav__title {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    margin-bottom: var(--space-3);
}

/* Reprend le rendu de h1/h2/h3 pour un titre de panneau qui n'est pas un Hn. */
.panel-lav__title--text {
    color: var(--garbi-ink);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section__note {
    margin-top: var(--space-5);
    padding-block: var(--space-4);
    border-top: 1px solid var(--garbi-border);
    border-bottom: 1px solid var(--garbi-border);
    text-align: center;
    color: var(--garbi-text);
    max-width: 62ch;
    margin-inline: auto;
}

.panel-lav__foot {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--garbi-violet-soft-2);
    text-align: center;
    color: var(--garbi-text);
    margin-bottom: 0;
}

.realtime-map {
    align-self: stretch;
}

/* ------------------------------------------------------------------ */
/* Listes de questions (marqueurs neutres)                             */
/* ------------------------------------------------------------------ */
.benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.benefits li {
    position: relative;
    padding-left: var(--space-5);
    color: var(--garbi-text);
    font-size: 0.9375rem;
}

.benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--garbi-violet);
}

.benefits__item-title {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ------------------------------------------------------------------ */
/* Assistant                                                          */
/* ------------------------------------------------------------------ */
.assistant-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Action de conclusion du panneau assistant : bouton centré sous la phrase de
   synthèse, en bas du panneau (cf. accueil.png). */
.assistant-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.guarantees {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.guarantees__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);
    font-size: 0.9375rem;
    color: var(--garbi-text);
}

/* ------------------------------------------------------------------ */
/* Cartes métiers                                                     */
/* ------------------------------------------------------------------ */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.card {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
}

.card__icon {
    display: inline-flex;
}

.card__title {
    font-size: 1.125rem;
    margin-bottom: 0;
}

.card__text {
    margin-bottom: 0;
    color: var(--garbi-text);
    font-size: 0.9375rem;
}

.card__link {
    margin-top: auto;
    padding-top: var(--space-1);
}

/* ------------------------------------------------------------------ */
/* Panneaux côte à côte (conformité / histoire)                       */
/* ------------------------------------------------------------------ */
.duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.panel {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
}

.panel--tint {
    background-color: var(--garbi-violet-soft);
    border-color: var(--garbi-violet-soft-2);
    box-shadow: none;
}

.panel__title {
    font-size: 1.3rem;
    margin-bottom: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Bandeau formules (compact)                                         */
/* ------------------------------------------------------------------ */
.band-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

/* Bande formules compacte (cf. accueil.png : bandeau bas, pas un grand panneau). */
.band-plans.panel-lav {
    padding-block: var(--space-4);
}

.band-plans__text p {
    font-size: 0.875rem;
    line-height: 1.5;
}

.band-plans .tile-icon {
    margin-bottom: 0;
}

.band-plans__title {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    margin-bottom: var(--space-2);
}

.band-plans__text p {
    margin-bottom: 0;
    color: var(--garbi-text);
    font-size: 0.9375rem;
}

.band-plans__action {
    display: flex;
    justify-content: flex-start;
}

/* ------------------------------------------------------------------ */
/* CTA final (violet foncé, horizontal)                               */
/* ------------------------------------------------------------------ */
.cta-final {
    background: linear-gradient(100deg, var(--garbi-violet-dark), var(--garbi-violet-dark-2));
    border-radius: var(--radius-panel);
    padding: clamp(1.35rem, 2.6vw, 1.9rem);
    color: rgb(255 255 255 / 90%);
    box-shadow: var(--shadow-product);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
}

.cta-final__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
}


/* Bloc titre + texte : empilé sur mobile, titre à gauche et texte à droite
   sur desktop (cf. PNG). Alignement à gauche, jamais justifié. */
.cta-final__body {
    display: grid;
    gap: var(--space-2);
    text-align: left;
}

.cta-final__title {
    color: var(--garbi-white);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.cta-final__text {
    margin-bottom: 0;
    font-size: 1rem;
    max-width: 48ch;
}

.cta-final__action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cta-final__action .btn {
    flex: 1 1 auto;
}

/* Bandeau CTA presque accolé au pied de page : espace inférieur minimal, sans
   toucher au padding interne du bandeau. Le pied de page voisin voit sa marge
   haute réduite en conséquence (desktop comme mobile). */
.section--cta-flush {
    padding-bottom: 0;
}

main:has(.section--cta-flush) + .site-footer {
    margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                       */
/* ------------------------------------------------------------------ */
.site-footer {
    background-color: var(--garbi-ink);
    color: rgb(255 255 255 / 82%);
    padding-block: var(--space-7) var(--space-5);
    margin-top: var(--section-gap);
}

.site-footer a {
    color: rgb(255 255 255 / 82%);
}

.site-footer a:hover {
    color: var(--garbi-white);
    text-decoration: underline;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.site-footer__logo {
    width: 150px;
    height: auto;
    margin-bottom: var(--space-3);
}

.site-footer__baseline {
    color: var(--garbi-white);
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: var(--space-2);
}

.site-footer__desc {
    max-width: 42ch;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 70%);
    margin-bottom: 0;
}

.site-footer__title {
    color: var(--garbi-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    font-size: 0.9375rem;
}

.site-footer__bottom {
    border-top: 1px solid rgb(255 255 255 / 18%);
    padding-top: var(--space-4);
    font-size: 0.8125rem;
    color: rgb(255 255 255 / 70%);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
}

/* ------------------------------------------------------------------ */
/* Navigation mobile (accessible sans JavaScript)                     */
/* ------------------------------------------------------------------ */
@media (max-width: 1099px) {
    .primary-nav {
        margin-top: var(--space-4);
        width: 100%;
        flex-basis: 100%;
    }

    .site-header.has-js .nav-toggle {
        display: inline-flex;
    }

    .site-header.has-js .primary-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 0;
        background-color: var(--garbi-white);
        border-bottom: var(--border-subtle);
        box-shadow: var(--shadow-product);
        padding: var(--space-5);
        display: none;
    }

    .site-header.has-js .primary-nav.is-open {
        display: block;
    }

    .site-header__inner {
        flex-wrap: wrap;
        position: relative;
    }

    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .primary-nav__link {
        display: block;
        padding: var(--space-2) 0;
        font-size: 1rem;
    }

    .primary-nav__cta {
        margin-left: 0;
    }

    .primary-nav__cta .btn {
        width: 100%;
    }
}

@media (min-width: 1100px) {
    .nav-toggle {
        display: none;
    }

    /* Desktop : liens centrés dans la barre, CTA à droite, marque à gauche. */
    .primary-nav {
        display: flex !important;
        align-items: center;
        gap: var(--space-4);
    }

    .primary-nav__list {
        flex: 1 1 auto;
        justify-content: center;
    }

    .primary-nav__cta {
        flex: none;
    }
}

/* ------------------------------------------------------------------ */
/* Ajustements mobile                                                 */
/* ------------------------------------------------------------------ */
/* Sous le seuil du menu (tablette + mobile) : disposition mobile complète. */
@media (max-width: 899px) {
    .mock--assistant {
        width: 150px;
    }

    .hero__actions .btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------------ */
/* Points de rupture montants                                         */
/* ------------------------------------------------------------------ */
@media (min-width: 900px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .duo {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}


@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: 44fr 56fr;
        gap: var(--space-6);
    }

    .hero__actions {
        flex-wrap: nowrap;
    }

    .cards {
        grid-template-columns: repeat(4, 1fr);
    }

    .panel-lav__grid--3 {
        grid-template-columns: 1.05fr 1.05fr 0.9fr;
        gap: var(--space-6);
    }

    .panel-lav__grid--assistant {
        grid-template-columns: 0.85fr 1.4fr 1fr;
        gap: var(--space-6);
        align-items: center;
    }

    .band-plans {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .band-plans__action {
        justify-content: flex-end;
    }

    .cta-final {
        grid-template-columns: auto 1fr auto;
        gap: var(--space-6);
    }

    .cta-final__body {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-6);
        align-items: center;
    }

    .cta-final__action {
        flex-direction: column;
        align-items: stretch;
        min-width: 220px;
    }

    .cta-final__action .btn {
        flex: 0 0 auto;
    }

    .site-footer__grid {
        grid-template-columns: 1.7fr 1fr 1fr 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Page À propos                                                      */
/* ------------------------------------------------------------------ */
/* Cartes de profil (binôme + assistant) */
.profile-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.profile-card {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    height: 100%;
}

.profile-card__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--garbi-violet-soft);
    margin-bottom: var(--space-3);
}

.profile-card__name {
    font-size: 1.125rem;
    margin-bottom: var(--space-1);
}

.profile-card__role {
    color: var(--garbi-violet);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
}

.profile-card__text {
    margin-bottom: 0;
    color: var(--garbi-text);
    font-size: 0.9375rem;
}

/* Bandeau éditeur (deux colonnes) */
.editor__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

.editor__text p {
    color: var(--garbi-text);
    margin-bottom: var(--space-3);
}

.editor__text p:last-child {
    margin-bottom: 0;
}

.editor__card {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
}

.editor__card .tile-icon {
    margin-bottom: var(--space-3);
}

.editor__card-title {
    color: var(--garbi-ink);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.editor__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: 0.9375rem;
    color: var(--garbi-text);
}

.editor__facts li {
    position: relative;
    padding-left: var(--space-5);
}

.editor__facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--garbi-violet);
}

@media (min-width: 900px) {
    .profile-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    /* Hero À propos : environ 36 % texte / 64 % visuel */
    .hero--about .hero__grid {
        grid-template-columns: 45fr 55fr;
    }

    .profile-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Grille de valeurs : trois cartes sur une ligne */
    .cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .editor__grid {
        grid-template-columns: 1.5fr 0.9fr;
        gap: var(--space-7);
    }
}

/* ================================================================== */
/* Pages internes (fonctionnelles, tarifs, démonstration)              */
/* ================================================================== */

/* Bouton fantôme : contour clair sur le CTA violet foncé */
.btn--ghost {
    background-color: transparent;
    color: var(--garbi-white);
    border-color: rgb(255 255 255 / 55%);
}

.btn--ghost:hover {
    background-color: rgb(255 255 255 / 12%);
    border-color: var(--garbi-white);
}

/* Section resserrée (bande de garanties sous le hero) */
.section--tight {
    padding-block: 0 var(--section-gap);
}

/* Hero de page interne : 34 % texte / 66 % visuel sur desktop */
.hero--page {
    padding-block: clamp(1.4rem, 3.2vw, 2.35rem);
}

/* Titre resserré sur la colonne étroite du hero interne : moins de lignes,
   visuel qui gagne en présence (cf. audit — mockups trop petits). */
.hero--page .hero__title {
    font-size: clamp(1.95rem, 4.4vw, 2.75rem);
}

/* ------------------------------------------------------------------ */
/* Bande de garanties horizontale                                      */
/* ------------------------------------------------------------------ */
/*
 * Rangée de garanties placée directement sous le hero, sans grand fond teinté
 * (cf. maquettes : pictogrammes colorés + libellés courts alignés sur le fond
 * de page). Un mince filet haut/bas la sépare du hero et des cartes.
 */
.guarantee-strip {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-5);
    border-block: var(--border-subtle);
}

.guarantee-strip__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--garbi-text);
}

.guarantee-strip__item .icon-sprite {
    width: 46px;
}

/* ------------------------------------------------------------------ */
/* Grilles de panneaux (transverses)                                   */
/* ------------------------------------------------------------------ */
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

.split > .panel,
.split > .assistant-panel {
    height: 100%;
}

.panel__link {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Panneaux transverses à deux colonnes internes (liste + aperçu)      */
/* cf. site-et-contenus.png : texte/liste ~58 %, aperçu ~42 %.          */
/* ------------------------------------------------------------------ */
.transverse-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.transverse-panel__preview {
    align-self: center;
}

@media (min-width: 900px) {
    .transverse-panel {
        grid-template-columns: 58% 42%;
        gap: var(--space-5);
        align-items: center;
    }
}

.mini-panel {
    background-color: var(--garbi-white);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
}

.mini-panel__title {
    font-weight: 700;
    color: var(--garbi-ink);
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
}

.scored-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.scored-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--garbi-text);
    border-bottom: 1px solid var(--garbi-border);
    padding-bottom: var(--space-2);
}

.scored-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.scored-list .score {
    flex: none;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--garbi-violet);
    background-color: var(--garbi-violet-soft);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ------------------------------------------------------------------ */
/* Panneau assistant compact (réutilisable)                            */
/* ------------------------------------------------------------------ */
.assistant-panel {
    background-color: var(--garbi-violet-soft);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-card);
    padding: var(--space-6);
}

.assistant-panel__icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.assistant-panel__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.assistant-panel__title {
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.assistant-panel__text {
    color: var(--garbi-text);
    font-size: 0.9375rem;
    margin-bottom: var(--space-4);
}

.assistant-panel__link {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Schéma de flux (prospect → client → projet → facture)               */
/* ------------------------------------------------------------------ */
.flow {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.flow__step {
    flex: 1 1 auto;
    text-align: center;
    padding: var(--space-3) var(--space-2);
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-button);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--garbi-ink);
}

.flow__step:not(:last-child)::after {
    content: "\2192";
    display: inline-block;
    margin-left: var(--space-2);
    color: var(--garbi-violet);
}

/* ------------------------------------------------------------------ */
/* FAQ (cartes dépliables, sans JavaScript)                            */
/* ------------------------------------------------------------------ */
/*
 * FAQ en cartes statiques ouvertes (cf. PNG) : pictogramme en haut, question,
 * puis réponse toujours visible. Aucun repli, aucun JavaScript : la réponse
 * est lisible d'emblée sur desktop comme sur mobile.
 */
.faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.faq__item {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.faq__icon {
    display: inline-flex;
}

.faq__question {
    font-weight: 700;
    color: var(--garbi-ink);
    font-size: 1rem;
    margin: 0;
}

.faq__answer {
    margin: 0;
    color: var(--garbi-text);
    font-size: 0.8125rem;
    line-height: 1.45;
}

@media (min-width: 900px) {
    .guarantee-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .faq {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .hero--page .hero__grid {
        grid-template-columns: 45fr 55fr;
    }

    .hero--wide .hero__grid {
        grid-template-columns: 45fr 55fr;
    }

    .guarantee-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }

    /* FAQ : rangée de cartes ouvertes comme dans les PNG. */
    .faq {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .split--2-1 {
        grid-template-columns: 2fr 1fr;
    }

    .split--1-1 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Grilles denses : 5 ou 6 cartes sur une rangée desktop               */
/* ------------------------------------------------------------------ */
/*
 * Les pages fonctionnelles alignent leurs cartes sur une seule rangée
 * (5 ou 6 selon la maquette), et non en 3 + 2 ou 3 + 3. Étape intermédiaire
 * à 3 colonnes sur tablette ; cartes resserrées (rembourrage, pictogramme et
 * typographie) pour tenir la largeur sans écraser le contenu.
 */
.cards--5 .card,
.cards--6 .card {
    padding: var(--space-4);
    gap: var(--space-2);
}

.cards--5 .card__head,
.cards--6 .card__head {
    gap: var(--space-2);
}

.cards--5 .card__title,
.cards--6 .card__title {
    font-size: 1rem;
}

.cards--5 .card__text,
.cards--6 .card__text {
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Rangées denses (5 ou 6 fonctions) : 3 colonnes sur desktop → deux lignes
   (3+2 ou 3+3), plutôt qu'une seule ligne où les cartes sont écrasées. */
@media (min-width: 900px) {
    .cards--5,
    .cards--6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------------------------------ */
/* Utilitaire lecteurs d'écran                                         */
/* ------------------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Grands panneaux : dossier / usages (texte + aparté)                 */
/* ------------------------------------------------------------------ */
.panel-lav__grid--dossier {
    grid-template-columns: 1fr;
}

.panel-lav__aside {
    background-color: var(--garbi-white);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}

.panel-lav__aside-title {
    font-weight: 700;
    color: var(--garbi-ink);
    margin-bottom: var(--space-2);
}

.panel-lav__aside-note {
    margin-top: var(--space-3);
    margin-bottom: 0;
    color: var(--garbi-muted);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Assistant IA : panneau hébergement (image + texte)                  */
/* ------------------------------------------------------------------ */
.hosting__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mock--hosting {
    width: min(320px, 80%);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-product);
}

/* ------------------------------------------------------------------ */
/* Tarifs : hero centré et tableau comparatif                          */
/* ------------------------------------------------------------------ */
.hero__content--center {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.hero__content--center .hero__lead {
    max-width: none;
}

.hero__content--center .hero__actions {
    justify-content: center;
}

/* Tarifs : petit tableau des 3 formules dans le hero + un seul bouton démo. */
.mini-plans {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}

.mini-plans__table {
    width: 100%;
    border-collapse: collapse;
}

.mini-plans__table th,
.mini-plans__table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: var(--border-subtle);
    text-align: left;
    vertical-align: middle;
}

.mini-plans__table tr:last-child th,
.mini-plans__table tr:last-child td {
    border-bottom: 0;
}

.mini-plans__table .is-featured th,
.mini-plans__table .is-featured td {
    background-color: var(--garbi-violet-soft);
}

.mini-plans__name {
    font-weight: 700;
    color: var(--garbi-ink);
    font-size: 0.9375rem;
}

.mini-plans__price {
    white-space: nowrap;
    color: var(--garbi-muted);
    font-size: 0.8125rem;
}

.mini-plans__price strong {
    color: var(--garbi-ink);
    font-size: 1.15rem;
}

.mini-plans__note {
    color: var(--garbi-text);
    font-size: 0.8125rem;
}

.mini-plans__action {
    margin-top: var(--space-4);
}

.mini-plans__action .btn {
    width: 100%;
}

.pricing-scroll {
    overflow-x: auto;
    border-radius: var(--radius-panel);
    border: var(--border-subtle);
    -webkit-overflow-scrolling: touch;
}

.pricing-scroll:focus-visible {
    box-shadow: var(--focus-ring);
}

.pricing-table {
    width: 100%;
    min-width: 620px;
    table-layout: fixed;
    border-collapse: collapse;
    background-color: var(--garbi-white);
    font-size: 0.9375rem;
}

.pricing-table th,
.pricing-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-subtle);
    text-align: center;
    vertical-align: middle;
}

/* Colonne de libellés : large, lisible et alignée à gauche (cf. maquette).
   Sélecteur qualifié pour primer sur le centrage générique des cellules. */
.pricing-table .pricing-table__row-head {
    width: 46%;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
    color: var(--garbi-text);
    background-color: var(--garbi-page);
    position: sticky;
    left: 0;
}

.pricing-table__plan {
    width: 18%;
}

.pricing-table thead .pricing-table__plan {
    font-size: 1.0625rem;
    color: var(--garbi-ink);
    background-color: var(--garbi-violet-soft);
    border-bottom: 2px solid var(--garbi-violet-soft-2);
}

/* Colonne Premium mise en avant : encadré violet pleine hauteur (cf. tarifs.png). */
.pricing-table .is-featured {
    background-color: var(--garbi-violet-soft);
    border-left: 2px solid var(--garbi-violet);
    border-right: 2px solid var(--garbi-violet);
}

.pricing-table thead .is-featured {
    color: var(--garbi-white);
    background-color: var(--garbi-violet);
    border-top: 2px solid var(--garbi-violet);
    border-bottom-color: var(--garbi-violet);
}

.pricing-table tbody tr:last-child .is-featured {
    border-bottom: 2px solid var(--garbi-violet);
}

.pricing-table__price {
    font-size: 1rem;
    color: var(--garbi-ink);
}

/* Coches et exclusions en pastilles rondes (cf. tarifs.png). */
.pricing-yes,
.pricing-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.pricing-yes {
    color: var(--garbi-green);
    background-color: var(--garbi-green-soft);
}

.pricing-no {
    color: var(--garbi-muted);
    background-color: var(--garbi-border);
}

.pricing-note {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--garbi-muted);
}

/* Comparatif responsive : tableau large sur desktop, cartes empilées sous 900px. */
.pricing-cards {
    display: none;
    gap: var(--space-4);
}

@media (max-width: 899px) {
    .pricing-scroll {
        display: none;
    }

    .pricing-cards {
        display: grid;
    }
}

.pricing-card {
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}

.pricing-card.is-featured {
    border: 2px solid var(--garbi-violet);
}

.pricing-card__title {
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
    color: var(--garbi-ink);
}

.pricing-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--garbi-border);
    font-size: 0.875rem;
}

.pricing-card__row:last-child {
    border-bottom: 0;
}

.pricing-card__label {
    color: var(--garbi-text);
}

.pricing-card__value {
    flex: none;
    text-align: right;
    color: var(--garbi-ink);
}

/* ------------------------------------------------------------------ */
/* Démonstration : note et formulaire                                  */
/* ------------------------------------------------------------------ */
.demo__form-note {
    font-size: 0.875rem;
    color: var(--garbi-muted);
    background-color: var(--garbi-violet-soft);
    border-radius: var(--radius-button);
    padding: var(--space-3) var(--space-4);
}

.form__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.form__field {
    display: grid;
    gap: var(--space-2);
}

.form__field label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--garbi-ink);
}

.form__optional {
    font-weight: 400;
    color: var(--garbi-muted);
}

.form__field input,
.form__field select,
.form__field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--garbi-text);
    background-color: var(--garbi-white);
    border: var(--border-subtle);
    border-radius: var(--radius-button);
}

.form__field textarea {
    resize: vertical;
}

.form__fieldset:disabled input,
.form__fieldset:disabled select,
.form__fieldset:disabled textarea {
    background-color: var(--garbi-page);
    color: var(--garbi-muted);
    cursor: not-allowed;
}

.form__fieldset:disabled .btn--primary {
    background-color: var(--garbi-muted);
    cursor: not-allowed;
}

.form__legal {
    margin-top: var(--space-4);
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--garbi-muted);
}

/* Piège anti-robot : retiré du flux, invisible et non focalisable, sans display:none
   (certains robots ignorent les champs cachés par display:none). */
.form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Message d'erreur par champ. */
.form__error {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--garbi-danger, #b42318);
}

.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] {
    border-color: var(--garbi-danger, #b42318);
}

/* Alerte de niveau formulaire (limite de débit, indisponibilité). */
.form__alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    color: var(--garbi-danger, #b42318);
    background-color: var(--garbi-danger-soft, #fef3f2);
    border: 1px solid var(--garbi-danger, #b42318);
    border-radius: var(--radius-button);
}

.form__alert p {
    margin: 0;
}

/* Confirmation neutre après envoi. */
.form__success p {
    margin-top: var(--space-3);
    color: var(--garbi-text);
}

@media (min-width: 900px) {
    .panel-lav__grid--dossier {
        grid-template-columns: 42fr 58fr;
        gap: var(--space-6);
        align-items: center;
    }
}

/* ------------------------------------------------------------------ */
/* Conteneur étroit (pages légales et textes longs)                   */
/* ------------------------------------------------------------------ */
.container--narrow {
    max-width: 820px;
}

/* ------------------------------------------------------------------ */
/* Navigation — sous-menu « Fonctionnalités » accessible              */
/* ------------------------------------------------------------------ */
.primary-nav__disclosure {
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--garbi-text);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
}

.primary-nav__disclosure:hover {
    color: var(--garbi-violet);
}

.primary-nav__link[aria-current],
.primary-nav__sublink[aria-current="page"] {
    color: var(--garbi-violet);
}

.primary-nav__chevron {
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

[data-nav-submenu].is-open .primary-nav__chevron {
    transform: rotate(-135deg);
}

.primary-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav__sublink {
    color: var(--garbi-text);
    font-weight: 600;
    font-size: 0.9375rem;
}

.primary-nav__sublink:hover {
    color: var(--garbi-violet);
    text-decoration: none;
}

/* Avec JavaScript : sous-menu masqué puis révélé à l'ouverture. */
.site-header.has-js .primary-nav__submenu {
    display: none;
}

.site-header.has-js [data-nav-submenu].is-open > .primary-nav__submenu {
    display: block;
}

@media (min-width: 1100px) {
    .primary-nav__item.has-submenu {
        position: relative;
    }

    .primary-nav__submenu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 230px;
        background-color: var(--garbi-white);
        border: var(--border-subtle);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-product);
        padding: var(--space-3);
        display: grid;
        gap: 2px;
        z-index: 60;
    }

    /*
     * Pont invisible comblant les 8 px entre le déclencheur et le panneau.
     * L'espacement visuel est conservé (le panneau reste à 100% + 8px), mais
     * la zone reste survolable : le pointeur qui descend vers un lien ne quitte
     * plus l'élément [data-nav-submenu], donc « mouseleave » ne referme plus le
     * menu. Pas de pointer-events:none : le pont doit rester cliquable au survol.
     */
    .primary-nav__submenu::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
    }

    .primary-nav__sublink {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-button);
        font-size: 0.9rem;
    }

    .primary-nav__sublink:hover {
        background-color: var(--garbi-violet-soft);
    }

    /* Sans JavaScript : révélation au survol et au focus clavier. */
    .site-header:not(.has-js) .primary-nav__submenu {
        display: none;
    }

    .site-header:not(.has-js) .has-submenu:hover > .primary-nav__submenu,
    .site-header:not(.has-js) .has-submenu:focus-within > .primary-nav__submenu {
        display: grid;
    }

    /* Avec JavaScript : ouverture pilotée par le bouton (aria-expanded). */
    .site-header.has-js .has-submenu.is-open > .primary-nav__submenu {
        display: grid;
    }
}

@media (max-width: 1099px) {
    .primary-nav__disclosure {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-2) 0;
        font-size: 1rem;
    }

    .primary-nav__submenu {
        display: grid;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding-left: var(--space-4);
        border-left: var(--border-subtle);
    }

    .primary-nav__sublink {
        display: block;
        padding: var(--space-2) 0;
        font-size: 1rem;
    }

    /* Avec JavaScript : accordéon replié jusqu'à l'ouverture. */
    .site-header.has-js .primary-nav__submenu {
        display: none;
    }

    .site-header.has-js [data-nav-submenu].is-open > .primary-nav__submenu {
        display: grid;
    }
}

/* ------------------------------------------------------------------ */
/* Pages légales                                                      */
/* ------------------------------------------------------------------ */
.legal-header {
    padding-block: clamp(2rem, 5vw, 3.25rem) var(--space-5);
    background-color: var(--garbi-violet-soft);
    border-bottom: var(--border-subtle);
}

.legal-header__title {
    margin-bottom: var(--space-3);
}

.legal-header__intro {
    max-width: 60ch;
    color: var(--garbi-text);
}

.legal-header__updated {
    margin-top: var(--space-2);
    color: var(--garbi-muted);
    font-size: 0.875rem;
}

.legal-article h2,
.legal-article__heading {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: 1.25rem;
}

.legal-article h2:first-child,
.legal-article__heading:first-child {
    margin-top: 0;
}

.legal-article p {
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

.legal-list {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-2);
    line-height: 1.6;
}

.legal-todo {
    padding: 0 0.35em;
    background-color: var(--garbi-orange-soft);
    color: var(--garbi-orange);
    border-radius: 4px;
    font-weight: 600;
    font-style: normal;
}

/* Formulaire d'opposition Matomo intégré (iframe optOut). Habillage neutre et
   responsive ; les couleurs définitives seront revues ultérieurement. */
.legal-optout {
    margin: 0 0 var(--space-4);
    max-width: 100%;
}

.legal-optout__frame {
    display: block;
    width: 100%;
    min-height: 220px;
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background-color: #fff;
}

/* ------------------------------------------------------------------ */
/* Pictogramme empilé AU-DESSUS du titre, puis le texte                */
/* (cartes et panneaux — disposition des maquettes : picto → titre →   */
/* texte, aligné à gauche, sur toutes les pages)                       */
/* ------------------------------------------------------------------ */
/* Cartes : pictogramme EMPILÉ au-dessus du titre (cf. maquettes). */
.card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Panneaux : pictogramme/média À CÔTÉ du titre, sur la même ligne (cf.
   maquettes : coup d'œil, conformité, histoire, scènes assistant…). */
.tile-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card__head .card__icon,
.card__head .card__title,
.card__head .assistant-panel__icon,
.tile-head .tile-icon,
.tile-head .assistant-panel__icon,
.tile-head :where(h2, h3),
.tile-head .editor__card-title {
    margin-bottom: 0;
}

/* ================================================================== */
/* Lot 2 — Scènes illustrées (conversations, frise, choix, encart)     */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* Aperçu conversationnel (composant _conversation)                    */
/* ------------------------------------------------------------------ */
.conversation {
    margin: 0;
    background-color: var(--garbi-white);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
}

.conversation__caption {
    font-size: 0.75rem;
    color: var(--garbi-muted);
    margin-bottom: var(--space-2);
}

.conversation__thread {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.conversation__msg {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: end;
}

.conversation__msg--user {
    grid-template-columns: 1fr;
    justify-items: end;
}

.conversation__avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--garbi-violet-soft);
}

.conversation__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation__initials {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--garbi-violet-dark);
}

.conversation__bubble {
    display: block;
    max-width: 84%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-panel);
    background-color: var(--garbi-violet-soft);
}

.conversation__msg--assistant .conversation__bubble,
.conversation__msg--team .conversation__bubble {
    border-bottom-left-radius: 4px;
}

.conversation__msg--user .conversation__bubble {
    background-color: var(--garbi-violet);
    color: var(--garbi-white);
    border-bottom-right-radius: 4px;
}

.conversation__author {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--garbi-muted);
    margin-bottom: 2px;
}

.conversation__msg--user .conversation__author {
    color: rgb(255 255 255 / 75%);
}

.conversation__text {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--garbi-text);
}

.conversation__msg--user .conversation__text {
    color: var(--garbi-white);
}

.conversation__text strong {
    color: inherit;
}

.conversation__link {
    margin: var(--space-6) 0 0;
    padding: 0 var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Grande scène assistant (composant _assistant_scene)                 */
/* Orchestrateur, Gestion d'équipe : illustration / exemples / fil     */
/* ------------------------------------------------------------------ */
.assistant-scene {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
}

.assistant-scene__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.assistant-scene__illus {
    display: flex;
    justify-content: center;
    flex: none;
}

.assistant-usages__media {
    display: flex;
    justify-content: center;
}

.mock--assistant {
    width: min(220px, 60%);
    height: auto;
}

.assistant-scene__intro {
    color: var(--garbi-text);
    margin-bottom: 0;
}

/* Demandes types en pastilles (cf. maquette). */
.example-pills {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.example-pills li {
    background-color: var(--garbi-white);
    border: 1px solid var(--garbi-violet-soft-2);
    border-radius: var(--radius-button);
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--garbi-text);
}

.assistant-scene__action {
    margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Assistant IA — panneau « au quotidien »                             */
/* illustration + usages en haut, aperçu conversationnel en bas         */
/* ------------------------------------------------------------------ */
.assistant-usages {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

/* ------------------------------------------------------------------ */
/* Démonstration — grand panneau : frise illustrée + formulaire        */
/* ------------------------------------------------------------------ */
.demo-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

.flow-steps {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.flow-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
}

.flow-steps__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background-color: var(--garbi-white);
    border: 1px solid var(--garbi-violet-soft-2);
    z-index: 1;
}

/* Ligne verticale reliant les pastilles de la frise (cf. maquette). */
.flow-steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 27px;
    width: 2px;
    bottom: calc(-1 * var(--space-4));
    background-color: var(--garbi-violet-soft-2);
    z-index: 0;
}

.flow-steps__text {
    margin: 0;
    padding-top: var(--space-3);
    color: var(--garbi-text);
}

.flow-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: var(--space-2);
    border-radius: 50%;
    background-color: var(--garbi-violet);
    color: var(--garbi-white);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: -0.35em;
}

/* Encart équipe sous la frise (provisoire). */
.demo-team {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--garbi-violet-soft-2);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
}

.demo-team__media {
    display: inline-flex;
}

.mock--team {
    width: 128px;
    height: auto;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.demo-team__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--garbi-text);
}

/* Choix illustrés du formulaire (« ce qui vous intéresse »). */
.form__choices {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.form__field-legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--garbi-ink);
}

/* Champs sur deux colonnes (prénom/entreprise, email/téléphone). */
.form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Centres d'intérêt : simples cases à cocher sur deux colonnes (cf. maquette). */
.check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-4);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--garbi-text);
}

.check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.check__box {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--garbi-border);
    border-radius: 5px;
    background-color: var(--garbi-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition), border-color var(--transition);
}

.check__box::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--garbi-white);
    border-bottom: 2px solid var(--garbi-white);
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
}

.check__input:checked + .check__box {
    background-color: var(--garbi-violet);
    border-color: var(--garbi-violet);
}

.check__input:checked + .check__box::after {
    opacity: 1;
}

.check__input:focus-visible + .check__box {
    box-shadow: var(--focus-ring);
}

.demo__form-phone {
    margin-top: var(--space-4);
    margin-bottom: 0;
    font-size: 0.9375rem;
    color: var(--garbi-text);
}

.demo__form-phone a {
    font-weight: 700;
}

.contact-note {
    margin-top: var(--space-4);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--garbi-text);
}

.contact-note a {
    font-weight: 700;
}

@media (min-width: 640px) {
    .form__row {
        grid-template-columns: 1fr 1fr;
    }

    .check-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    /* Deux zones : (illustration + texte) à gauche, conversation à droite. */
    .assistant-scene {
        grid-template-columns: 44% 1fr;
        gap: var(--space-6);
        align-items: center;
    }

    .assistant-scene__main {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .assistant-scene__illus {
        width: 92px;
    }

    .assistant-scene__illus .mock--assistant {
        width: 92px;
    }

    .assistant-usages__media .mock--assistant {
        width: 100%;
    }

    .assistant-scene__preview {
        align-self: stretch;
    }

    .assistant-usages {
        grid-template-columns: 26% 1fr;
        column-gap: var(--space-6);
        align-items: center;
    }

    .assistant-usages__media {
        align-self: start;
    }

    .assistant-usages__preview {
        grid-column: 1 / -1;
    }

    .demo-panel {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .demo-panel__form {
        align-self: start;
    }
}

/* ------------------------------------------------------------------ */
/* Préférence de mouvement réduit                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}