/* =====================================================================
   WebApp — Styles du site (header, hero, sections, footer)
   ===================================================================== */

/* ---- Header / navigation ---- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; height: 70px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: var(--t-xl); color: var(--ink); }
.brand b { color: var(--brand); }
.brand__logo { width: 38px; height: 38px; border-radius: 10px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-weight: 800; }
.brand__img { max-height: 44px; max-width: 180px; width: auto; object-fit: contain; }

.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__link {
    font-family: var(--font-head); font-weight: 500; color: var(--ink);
    padding: .5em .85em; border-radius: var(--r-full); font-size: var(--t-base);
    /* Une entree de menu ne se coupe JAMAIS en deux lignes : « À propos »
       le faisait des que la barre manquait de place, ce qui poussait la
       hauteur de l'en-tete a 70 px et laissait le mot orphelin sous les
       autres. Faute de place, on prefere que le menu passe en version
       compacte (plus bas) plutot qu'il se disloque. */
    white-space: nowrap;
}
.nav__link:hover, .nav__link.is-active { color: var(--brand); background: var(--brand-050); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

/* Palier intermediaire : entre le bureau large et le tiroir mobile, il
   existe une zone (portables 1280-1440, tablettes en paysage) ou tout tient
   encore mais de justesse. On resserre plutot que de laisser deborder. */
@media (min-width: 981px) and (max-width: 1400px) {
    .nav__menu { gap: 2px; }
    .nav__link { padding: .5em .6em; font-size: var(--t-sm); }
    .nav__actions { gap: 7px; }
    /* Le libelle de l'espace client est long et redondant avec l'icone. */
    .nav__actions .btn--ghost { padding-inline: .7em; }
}

/* Sous-menus (dropdown) */
.nav__item { position: relative; }
.nav__item > .nav__link { display: inline-flex; align-items: center; gap: 4px; }
.nav__item > .nav__link .icon { width: 13px; height: 13px; transition: transform .2s; }
.nav__item:hover > .nav__link .icon,
.nav__item:focus-within > .nav__link .icon { transform: rotate(90deg); }
.nav__sub {
    position: absolute; top: 100%; inset-inline-start: 0;
    /* gap visuel via padding interne (PAS de marge -> aucun "trou" de survol) */
    padding-top: 10px;
    min-width: 220px; display: none; z-index: 60;
}
/* Pont invisible : couvre l'espace entre le lien et le menu pour garder le survol */
.nav__item::after {
    content: ""; position: absolute; top: 100%; inset-inline-start: 0;
    width: 100%; height: 12px;
}
.nav__sub__inner {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 6px;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { display: block; }
.nav__sub a { display: block; padding: .6em .8em; border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-sm); white-space: nowrap; }
.nav__sub a:hover { background: var(--brand-050); color: var(--brand); }

/* Sélecteur de langue */
.lang { position: relative; }
.lang__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1.5px solid var(--line);
    border-radius: var(--r-full); padding: .4em .8em; cursor: pointer;
    font: inherit; font-size: var(--t-sm); color: var(--ink);
}
.lang__btn .icon { width: 16px; height: 16px; }
.lang__menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-md); padding: 6px; min-width: 150px;
    /* Sans z-index explicite, le menu passait derriere le contenu de
       l'en-tete et n'etait pas cliquable. */
    z-index: 60;
    display: none;
}
.lang.open .lang__menu { display: block; }
.lang__menu a { display: block; padding: .5em .7em; border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-sm); }
.lang__menu a:hover, .lang__menu a.is-active { background: var(--brand-050); color: var(--brand); }

/* Bascule de thème clair/sombre */
.theme-toggle {
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    border: 1.5px solid var(--line); border-radius: var(--r-full);
    background: transparent; color: var(--ink); cursor: pointer; padding: 0;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: inline-grid; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline-grid; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* Burger mobile */
.nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px; }
.nav__toggle .icon { width: 28px; height: 28px; }

@media (max-width: 940px) {
    .nav__toggle { display: inline-flex; }
    .nav__menu {
        position: fixed; inset: 70px 0 auto 0;
        flex-direction: column; align-items: stretch;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: 14px var(--gutter); gap: 2px;
        transform: translateY(-130%); transition: transform .25s ease;
        box-shadow: var(--shadow-lg);
    }
    .nav__menu.open { transform: translateY(0); }
    .nav__link { padding: .7em .85em; }
    .nav__item { width: 100%; }
    .nav__sub { position: static; display: block; padding: 0 0 0 14px; min-width: 0; }
    .nav__sub__inner { border: none; box-shadow: none; padding: 0; background: transparent; }
    .nav__item::after { display: none; }
    .nav__item > .nav__link .icon { display: none; }
}

/* ---- Hero ---- */
.hero {
    position: relative; overflow: hidden;
    background: var(--grad-dark); color: #fff;
    padding: clamp(64px, 9vw, 130px) 0;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(800px 400px at 85% -10%, rgba(77,171,247,.30), transparent 60%);
    pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { color: #fff; }
.hero p { color: #BFD9D4; font-size: var(--t-lg); max-width: 540px; }
.hero .eyebrow { background: rgba(255,255,255,.12); color: #F2C078; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
/* --- LE HÉROS MONTRE LE PRODUIT ---------------------------------------
   Ce qu'il montrait : une seule image sur toute la page d'accueil, un SVG de
   200 × 150 étiré à 486 px de large. Une société qui fabrique du logiciel
   n'en montrait aucun, alors que les captures existaient, cadrées et
   vérifiées, sur la page Démonstrations.

   Le cadre devient une FENÊTRE D'APPLICATION : barre de titre à trois
   pastilles, fond blanc, l'écran posé dedans. Le rapport 668 / 404 est
   exactement celui de l'image, qui s'y inscrit donc entière — aucun
   recadrage du navigateur, donc aucune carte tranchée par un bord.

   Le fond passe au blanc et non au translucide : une capture d'interface
   claire posée sur un voile sombre prend un voile gris et perd son piqué. */
.hero__art {
    border-radius: var(--r-xl);
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: block;
}
/* La barre de titre : trois pastilles dessinées en fond, aucun balisage en
   plus. Elle dit « ceci est un écran », ce qu'une image nue ne dit pas. */
.hero__art::before {
    content: "";
    display: block;
    height: 30px;
    background-color: #F1F5F4;
    border-block-end: 1px solid #E2EAE7;
    background-image:
        radial-gradient(circle, #FF5F57 46%, transparent 50%),
        radial-gradient(circle, #FEBC2E 46%, transparent 50%),
        radial-gradient(circle, #28C840 46%, transparent 50%);
    background-size: 10px 10px;
    background-position: 14px 10px, 30px 10px, 46px 10px;
    background-repeat: no-repeat;
}
[dir="rtl"] .hero__art::before {
    background-position: right 14px top 10px, right 30px top 10px, right 46px top 10px;
}
.hero__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 668 / 404;   /* celui de l'image : rien n'est recadré */
}
/* Sans image, le cadre garde sa hauteur plutôt que de se réduire à sa barre. */
.hero__art-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 668 / 404;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--t-2xl);
    color: rgba(0, 0, 0, .12);
}
@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; }
    /* LE VISUEL RESTE SUR TÉLÉPHONE. Il était masqué — ce qui se défendait
       quand ce n'était qu'un pictogramme, et ne se défend plus maintenant
       qu'il montre le produit : la moitié des visiteurs n'en verraient rien.
       Il passe sous le texte, à pleine largeur, et coûte 68 Ko. */
    .hero__art { display: block; margin-block-start: 34px; }
}

/* ---- Bandeau de stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats .num { font-family: var(--font-head); font-weight: 800; font-size: var(--t-2xl); color: var(--brand); }
.stats .lbl { color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Logos (partenaires / tech) ---- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: center; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logo-cell {
    display: grid; place-items: center; padding: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    min-height: 92px; transition: box-shadow .2s, transform .15s;
}
.logo-cell:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.logo-cell img { max-height: 46px; max-width: 100%; object-fit: contain; opacity: 1; transition: transform .2s; }
.logo-cell:hover img { transform: scale(1.05); }
/* Logos toujours affichés en couleur (jamais de niveaux de gris, ni au survol). */
.logo-cell img, .client-cell__logo img { filter: none !important; opacity: 1 !important; }
.logo-cell:hover img, .client-cell:hover .client-cell__logo img { filter: none !important; opacity: 1 !important; }
.logo-cell .logo-name { font-family: var(--font-head); font-weight: 700; color: var(--muted); font-size: var(--t-base); }
.tech-cell .logo-name { color: var(--ink); }
.tech-cell span.cat { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 500; }

/* ---- CTA bandeau ---- */
.cta-band { background: var(--grad-brand); color: #fff; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 56px); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 560px; margin-inline: auto; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 18px; }
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info .item .ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-md); background: var(--brand-050); color: var(--brand); display: grid; place-items: center; }
.contact-info .item b { color: var(--ink); display: block; font-family: var(--font-head); }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm); }

/* ---- Page contenu (À propos, détails) ---- */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0; }
.prose { max-width: 760px; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose p { color: var(--body); font-size: var(--t-base); }
.prose .lead { font-size: var(--t-lg); color: var(--ink); font-weight: 500; }
.prose h2 { font-size: var(--t-xl); }
.prose ul { list-style: disc; padding-inline-start: 1.4em; margin-bottom: 1rem; }
.prose ul li { margin-bottom: .4em; }

/* Détail service/solution : sidebar */
.detail { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
@media (max-width: 820px) { .detail { grid-template-columns: 1fr; } }
.detail__aside { position: sticky; top: 90px; }
.aside-list { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.aside-list a { display: block; padding: .55em .7em; border-radius: var(--r-sm); color: var(--ink); }
.aside-list a:hover, .aside-list a.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

/* Fil d'ariane */
.crumbs { color: var(--muted); font-size: var(--t-sm); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }

/* ---- Footer ---- */
.site-footer { background: var(--bg-dark); color: #BFD9D4; padding: clamp(48px, 6vw, 72px) 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
/* Les intitulés de colonne étaient des <h4> placés après les <h2> des
   sections : un saut de niveau, seule erreur relevée par le validateur W3C
   sur la page d'accueil. Passés en <h2> — le pied de page est un repère de
   premier rang, ses intitulés sont donc frères de ceux des sections, pas
   leurs petits-enfants. L'apparence ne change pas : la taille était déjà
   fixée ici, et non héritée du niveau de titre. */
.site-footer h2 { color: #fff; font-size: var(--t-base); margin-bottom: 14px; font-weight: 700; }
.site-footer a { color: #BFD9D4; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.footer-links li { margin-bottom: 8px; }
.footer-contact .item { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; font-size: var(--t-sm); }
.footer-contact .item .icon { width: 18px; height: 18px; color: var(--accent); flex: 0 0 18px; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 20px; text-align: center; font-size: var(--t-sm); color: #88A5A0; }
/* Signature d'entreprise, au-dessus du copyright. Volontairement discrète :
   c'est une mention d'usage, pas un argument commercial, et elle ne doit pas
   concurrencer le reste du pied de page. */
.footer-signature { max-width: 620px; margin: 0 auto 10px; font-size: var(--t-sm); line-height: 1.55; color: #7E9B96; }

/* ---- Texte dégradé / badges ---- */
.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.badge-saas {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: var(--t-xs);
    letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--grad-brand);
    padding: .45em 1em; border-radius: var(--r-full);
    box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.badge-saas .icon { width: 16px; height: 16px; }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink); font-weight: 600; font-size: var(--t-sm);
    padding: .45em .85em; border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
}
.chip .icon { width: 16px; height: 16px; color: var(--brand); }

/* ---- Spotlight produit phare ---- */
.spotlight {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(77,171,247,.12), transparent 60%),
        linear-gradient(180deg, var(--surface), var(--bg-soft));
    border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 52px);
    box-shadow: var(--shadow-md);
}
.spotlight h2 { font-size: var(--t-2xl); }
.spotlight p { color: var(--muted); font-size: var(--t-lg); max-width: 520px; }
@media (max-width: 860px) { .spotlight { grid-template-columns: 1fr; } }

/* Mock visuel (tableau de bord stylisé, 100% CSS) */
.mock {
    background: var(--grad-dark); border-radius: var(--r-lg);
    padding: 18px; box-shadow: var(--shadow-lg);
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    transition: transform .4s ease;
}
.spotlight:hover .mock { transform: perspective(1200px) rotateY(0) rotateX(0); }
.mock__bar { display: flex; gap: 7px; margin-bottom: 16px; }
.mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.3); }
.mock__bar span:first-child { background: #ff5f57; }
.mock__bar span:nth-child(2) { background: #febc2e; }
.mock__bar span:nth-child(3) { background: #28c840; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.mock__kpis .kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 12px; text-align: center; }
.mock__kpis .kpi b { display: block; font-family: var(--font-head); font-size: var(--t-xl); color: #fff; }
.mock__kpis .kpi small { color: #7FD8CC; font-size: var(--t-xs); }
.mock__rows { display: grid; gap: 9px; }
.mock__rows i { display: block; height: 11px; border-radius: 6px; background: var(--grad-brand); }

/* Cartes module + bloc sécurité */
.card--module { display: block; }
.security-band {
    margin-top: 32px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
    background: var(--grad-dark); color: #fff; border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 36px);
}
.security-band h3 { color: #fff; }
.security-band p { color: #BFD9D4; margin: 0; max-width: 640px; }
.security-band .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.security-band .chip .icon { color: var(--accent); }
.security-band__icon { width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--grad-brand); display: grid; place-items: center; }
.security-band__icon .icon { width: 34px; height: 34px; color: #fff; }
@media (max-width: 640px) { .security-band { grid-template-columns: 1fr; text-align: center; } .security-band__icon { margin: 0 auto; } }

.page-hero--flagship { background: linear-gradient(180deg, var(--brand-050), var(--surface)); }

/* =====================================================================
   Aperçu produit SageWebApp (mockups redessinés, 100% CSS, nouvelle charte)
   ===================================================================== */
.appshow { margin-top: 8px; }
.appshow__tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.appshow__tabs label {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: .5em 1em; border-radius: var(--r-full); font-weight: 600; font-size: var(--t-sm);
    border: 1.5px solid var(--line); color: var(--muted); background: var(--surface); transition: all .15s;
}
.appshow__tabs label .icon { width: 16px; height: 16px; }
.appshow > input { position: absolute; opacity: 0; pointer-events: none; }
.appshow__pane { display: none; }
/* Tabs : sélection via radios (jusqu'à 5 onglets) */
.appshow > input:nth-of-type(1):checked ~ .appshow__panes .pane-1,
.appshow > input:nth-of-type(2):checked ~ .appshow__panes .pane-2,
.appshow > input:nth-of-type(3):checked ~ .appshow__panes .pane-3,
.appshow > input:nth-of-type(4):checked ~ .appshow__panes .pane-4,
.appshow > input:nth-of-type(5):checked ~ .appshow__panes .pane-5,
.appshow > input:nth-of-type(6):checked ~ .appshow__panes .pane-6,
.appshow > input:nth-of-type(7):checked ~ .appshow__panes .pane-7,
.appshow > input:nth-of-type(8):checked ~ .appshow__panes .pane-8 { display: block; }
.appshow > input:nth-of-type(1):checked ~ .appshow__tabs label:nth-of-type(1),
.appshow > input:nth-of-type(2):checked ~ .appshow__tabs label:nth-of-type(2),
.appshow > input:nth-of-type(3):checked ~ .appshow__tabs label:nth-of-type(3),
.appshow > input:nth-of-type(4):checked ~ .appshow__tabs label:nth-of-type(4),
.appshow > input:nth-of-type(5):checked ~ .appshow__tabs label:nth-of-type(5),
.appshow > input:nth-of-type(6):checked ~ .appshow__tabs label:nth-of-type(6),
.appshow > input:nth-of-type(7):checked ~ .appshow__tabs label:nth-of-type(7),
.appshow > input:nth-of-type(8):checked ~ .appshow__tabs label:nth-of-type(8) {
    background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm);
}

/* Copilote IA — mini chat */
.ai-chat { display: grid; gap: 10px; max-width: 560px; }
.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-msg .who { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: grid; place-items: center; color: #fff; }
.ai-msg .who.user { background: #94a3b8; }
.ai-msg .who.bot { background: var(--grad-brand); }
.ai-msg .who .icon { width: 16px; height: 16px; }
.ai-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--t-sm); color: var(--ink); }
.ai-msg.me { flex-direction: row-reverse; }
.ai-msg.me .ai-bubble { background: var(--brand-050); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ai-suggest span { font-size: var(--t-xs); border: 1px solid var(--line); border-radius: var(--r-full); padding: .3em .7em; color: var(--muted); background: var(--surface); }

/* Cadre navigateur */
.appframe { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--surface); }
.appframe__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #0B2320; }
.appframe__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.3); }
.appframe__bar i:nth-child(1){ background:#ff5f57 } .appframe__bar i:nth-child(2){ background:#febc2e } .appframe__bar i:nth-child(3){ background:#28c840 }
.appframe__url { margin-inline-start: 12px; flex: 1; background: rgba(255,255,255,.1); color: #7FD8CC; font-size: var(--t-xs); padding: .3em .8em; border-radius: var(--r-full); }

/* UI applicative redessinée */
.appui { display: grid; grid-template-columns: 64px 1fr; min-height: 360px; }
.appui__side { background: var(--grad-dark); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.appui__side .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-weight: 800; margin-bottom: 10px; }
.appui__side a, .appui__side label { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #BFD9D4; cursor: pointer; }
.appui__side a.on, .appui__side a:hover, .appui__side label.on, .appui__side label:hover { background: rgba(255,255,255,.14); color: #fff; }
.appui__side a .icon, .appui__side label .icon { width: 19px; height: 19px; }
.appui__main { padding: 18px; background: var(--bg-soft); }
.appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* Anciennement `.appbar h4`. Le <h4> a été remplacé par une <div> : ce
   n'est pas un titre de document mais la barre de titre d'une maquette.
   La famille, la couleur, l'interligne et la graisse venaient de la règle
   `h1, h2, h3, h4` de base.css ; ils sont repris ici pour que l'apparence
   ne bouge pas d'un pixel. */
.appbar .appbar__t {
    margin: 0; font-size: var(--t-base);
    font-family: var(--font-head); color: var(--ink);
    line-height: 1.2; font-weight: 700;
}
.appbar .search { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full); padding: .35em .9em; color: var(--muted); font-size: var(--t-xs); }
.appbar .av { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-brand); }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.kpi2 .lbl { color: var(--muted); font-size: var(--t-xs); }
.kpi2 .val { font-family: var(--font-head); font-weight: 800; font-size: var(--t-lg); color: var(--ink); }
.kpi2 .up { color: var(--success); font-size: var(--t-xs); font-weight: 700; }
@media (max-width: 700px){ .kpis { grid-template-columns: repeat(2,1fr); } }

/* Mini graphe en barres */
.spark { display: flex; align-items: flex-end; gap: 8px; height: 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.spark span { flex: 1; border-radius: 6px 6px 0 0; background: var(--grad-brand); opacity: .85; }

/* Tableau de données */
.dtable { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; border-collapse: collapse; }
.dtable th, .dtable td { text-align: start; padding: 9px 12px; font-size: var(--t-xs); border-bottom: 1px solid var(--line); }
.dtable th { background: var(--bg-soft, #f1f5f9); color: var(--muted); font-weight: 700; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .03em; }
.dtable tr:last-child td { border-bottom: none; }
.pill { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: .15em .6em; border-radius: var(--r-full); }
.pill--ok { background: var(--success-bg); color: var(--success); }
.pill--wait { background: var(--warning-bg); color: var(--warning); }
.pill--info { background: var(--info-bg); color: var(--info); }
.thumb-sq { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg,#e2e8f0,#cbd5e1); display: inline-block; vertical-align: middle; }

/* Pipeline CRM (kanban) */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; }
/* Anciennement `.kcol h6` — en-têtes de colonnes d'un kanban de maquette.
   Le <h6> n'héritait que de sa graisse par défaut (il ne figurait pas dans
   la règle `h1, h2, h3, h4`) : seule celle-ci est à reprendre. */
.kcol .kcol__t { margin: 0 0 8px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); display: flex; justify-content: space-between; }
.kcard { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 8px; }
.kcard b { font-size: var(--t-sm); color: var(--ink); }
.kcard small { color: var(--muted); font-size: var(--t-xs); display: block; }
.kbar { height: 5px; border-radius: 3px; background: var(--bg-soft, #e2e8f0); margin-top: 6px; overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--grad-brand); }
.kanban--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px){ .kanban--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .kanban, .kanban--4 { grid-template-columns: 1fr; } .appui { grid-template-columns: 1fr; } .appui__side { flex-direction: row; justify-content: center; } }
.kchip { display:inline-block; font-size: var(--t-xs); font-weight:700; padding:.1em .45em; border-radius:var(--r-full); background:var(--warning-bg); color:var(--warning); }
.kcard .pct { float: right; font-size: var(--t-xs); font-weight:700; color:var(--brand); }
[dir="rtl"] .kcard .pct { float: left; }

/* Zone OCR */
.ocrz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ocrz .drop { border: 2px dashed #AFC7C2; border-radius: var(--r-md); background: var(--surface); display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
.ocrz .drop .icon { width: 40px; height: 40px; color: var(--brand); margin: 0 auto 8px; }
@media (max-width: 640px){ .ocrz { grid-template-columns: 1fr; } }

/* =====================================================================
   Bande intégration Sage 100 & Sage X3
   ===================================================================== */
.integration { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.integration .node {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.integration .node--app { background: var(--grad-dark); color: #fff; border-color: transparent; }
.integration .node--app .logo { width: 48px; height: 48px; border-radius: 12px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-weight: 800; margin: 0 auto 10px; }
.integration .node b { font-family: var(--font-head); font-size: var(--t-lg); }
.integration .node .tag { display: block; color: var(--muted); font-size: var(--t-sm); }
.integration .node--app .tag { color: #7FD8CC; }
.integration .sage-badges { display: flex; flex-direction: column; gap: 10px; }
.integration .sage-badges .b {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-weight: 700; color: var(--ink); background: var(--surface);
}
.integration .sage-badges .b small { color: var(--muted); font-weight: 500; }
.sync { display: grid; place-items: center; gap: 6px; color: var(--brand); }
.sync .arrow-row { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); }
.sync .icon { width: 22px; height: 22px; }
.sync .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(21,128,61,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(21,128,61,.5) } 70%{ box-shadow:0 0 0 10px rgba(21,128,61,0) } 100%{ box-shadow:0 0 0 0 rgba(21,128,61,0) } }
@media (max-width: 760px){
    .integration { grid-template-columns: 1fr; }
    .sync { transform: none; }
    .sync > .icon { transform: rotate(90deg); }
    .sync .arrow-row { writing-mode: horizontal-tb; }
}
[dir="rtl"] .sync > .icon { transform: scaleX(-1); }
[dir="rtl"] .integration { direction: rtl; }

/* =====================================================================
   Section clients « Ils nous font confiance » — logos taille fixe homogène
   ===================================================================== */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.client-cell {
    /* Toutes les cellules ont EXACTEMENT la même taille (homogénéité) */
    height: 132px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px; text-align: center;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s;
}
.client-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BCD6D1; }

/* Zone logo de hauteur fixe : tous les logos s'alignent identiquement */
.client-cell__logo {
    height: 56px; width: 100%;
    display: grid; place-items: center;
}
.client-cell__logo img {
    max-height: 48px;          /* taille fixe homogène */
    max-width: 80%;
    object-fit: contain;
    opacity: 1;
    transition: transform .2s;
}
.client-cell:hover .client-cell__logo img { transform: scale(1.05); }

/* Monogramme de repli (même empreinte pour tous) */
.client-mono {
    width: 56px; height: 56px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--grad-brand); color: #fff;
    font-family: var(--font-head); font-weight: 800; font-size: var(--t-lg);
    box-shadow: var(--shadow-sm);
}
.client-cell__name {
    font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); color: var(--ink);
    line-height: 1.1;
}

/* ---- Notre démarche (étapes) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 28px 22px; box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .2s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step__num {
    position: absolute; top: -14px; inset-inline-end: 18px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad-brand); color: #fff; font-family: var(--font-head);
    font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.step__icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--brand-050); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px; }
.step__icon .icon { width: 26px; height: 26px; }
.step h3 { font-size: var(--t-lg); margin-bottom: .35em; }
.step p { color: var(--muted); margin: 0; font-size: var(--t-base); }

/* ---- Valeurs (pourquoi nous) ---- */
.value { text-align: center; padding: 10px; }
.value__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; box-shadow: var(--shadow-md); }
.value__icon .icon { width: 30px; height: 30px; }
.value h3 { font-size: var(--t-lg); margin-bottom: .3em; }
.value p { color: var(--muted); margin: 0; font-size: var(--t-base); }

/* ---- Bandeau cookies ---- */
.cookie-banner {
    position: fixed; inset-inline: 16px; bottom: 16px; z-index: 80;
    max-width: 760px; margin-inline: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cookie-banner p { margin: 0; color: var(--body); font-size: var(--t-sm); }

/* ---- FAQ (accordéon natif) ---- */
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq__item summary { cursor: pointer; padding: 16px 20px; font-family: var(--font-head); font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand); }
.faq__chevron .icon { width: 18px; height: 18px; transition: transform .2s; transform: rotate(90deg); color: var(--brand); }
.faq__item[open] .faq__chevron .icon { transform: rotate(-90deg); }
.faq__answer { padding: 0 20px 18px; color: var(--muted); }
.faq__answer p { margin: 0 0 .6rem; }

/* ---- Blog / Actualités ---- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s; height: 100%; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__cover { aspect-ratio: 16/9; background: var(--grad-dark); object-fit: cover; width: 100%; }
.post-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.post-card__date { color: var(--muted); font-size: var(--t-xs); }
/* Idem cartes d'article : le niveau est passé à <h2>, la taille reste celle
   d'une vignette. */
.post-card h2, .post-card h3 { font-size: var(--t-lg); margin: 0; }
.post-card p { color: var(--muted); margin: 0; font-size: var(--t-sm); }

/* Animations d'entrée */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
    .reveal.in { opacity: 1; transform: none; }
}