/* ════════════════════════════════════════════════════════════════ VITRINE STYLE — réplique exacte de references/dashformation_maquette.html. Appliqué sur TOUTES les pages publiques (index, formations, formateur-info, rejoindre, entreprises/*, mentions, cookies, politique-confidentialite, cgu, 404). N'affecte JAMAIS les espaces admin/learner/formateur/builder/ course/recruteur qui restent sur css/main.css. Convention : la page vitrine met + inclut cette feuille AVANT les styles spécifiques. Les helpers js/vitrine.js gèrent le nav scroll, le menu mobile, le reveal au scroll, l'auth state et le CMS. ════════════════════════════════════════════════════════════════ */ :root{ --sage:#4E9E7C; --sage-dark:#2F7A5F; --sage-deep:#1F5C46; --sage-light:#BCD9C9; --sage-pale:#E4F0EA; --bg:#F6F9F6; --dark:#16241E; --ink:#23302a; --muted:#5f6e66; --line:rgba(47,122,95,.16); --shadow:0 22px 60px -24px rgba(20,70,50,.42); --shadow-sm:0 10px 28px -16px rgba(20,70,50,.35); --r:22px; --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; } body.vitrine{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0} body.vitrine *{box-sizing:border-box} /* Force Bricolage Grotesque sur tous les titres des pages vitrine (y compris entreprises/* qui ont leur propre CSS inline). */ body.vitrine h1,body.vitrine h2,body.vitrine h3,body.vitrine h4{font-family:var(--display);letter-spacing:-.015em} /* Reset minimal comme la maquette : `a` simple = spécificité (0,0,1). IMPORTANT : pas de prefix `body.vitrine` ici sinon (0,1,2) battrait `.nav-links a` (0,1,1) et tous les liens hériteraient du noir. Cette feuille étant chargée UNIQUEMENT sur les pages .vitrine, le selecteur global `a` n'impacte rien d'autre. */ body.vitrine a{} a{color:inherit;text-decoration:none} body.vitrine img{display:block;max-width:100%} .wrap{width:min(1180px,92vw);margin-inline:auto} .eyebrow{font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);font-family:var(--body)} /* ── BOUTONS ── Spécificité bumpée (.btn.btn-X) pour battre tous les a {color:inherit} et les inline styles qui pourraient s'incruster. */ .btn,a.btn{display:inline-flex !important;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:.95rem; padding:.78em 1.4em;border-radius:999px;cursor:pointer;border:none;transition:transform .18s,box-shadow .2s,background .2s;text-decoration:none} .btn .ar{transition:transform .25s}.btn:hover .ar{transform:translateX(4px)} .btn.btn-primary,a.btn.btn-primary{background:var(--sage-dark) !important;color:#fff !important;box-shadow:0 12px 28px -12px rgba(31,92,70,.55)} .btn.btn-primary:hover,a.btn.btn-primary:hover{transform:translateY(-2px);background:var(--sage-deep) !important} .btn.btn-white,a.btn.btn-white{background:#fff !important;color:var(--sage-deep) !important} .btn.btn-white:hover,a.btn.btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(0,0,0,.35)} .btn.btn-glass,a.btn.btn-glass{background:rgba(255,255,255,.16) !important;color:#fff !important;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)} .btn.btn-glass:hover,a.btn.btn-glass:hover{transform:translateY(-2px);background:rgba(255,255,255,.26) !important} .btn.btn-ghost,a.btn.btn-ghost{background:#fff !important;color:var(--ink) !important;border:1px solid var(--line)} .btn.btn-ghost:hover,a.btn.btn-ghost:hover{transform:translateY(-2px);border-color:var(--sage)} /* ── NAV ── !important sur background/border/box-shadow par défaut pour battre les anciennes règles `.nav { background: white }` qui traînent dans les