/* =========================================================================
   laboping.css — styles personnalisés de l'accueil (SPA index.html).
   Extrait des blocs <style> inline de index.html pour alléger le HTML et
   centraliser le design system éditorial. Chargé en <link> dans le <head>.
   ========================================================================= */
        body {
            font-family: 'DM Sans', sans-serif;
            background-color: #F6F3EA;
            background-image: radial-gradient(rgba(21,18,12,0.035) 1px, transparent 1.2px);
            background-size: 22px 22px;
        }
        html.dark body {
            background-color: #0c0a08;
            background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.2px);
        }

        /* ── Système éditorial « magazine » ─────────────────────────── */
        :root {
            --paper: #F6F3EA; --paper-2: #EFEBDF; --ink: #15120C; --hair: #D8D2C4;
            --brand: #D6708B;          /* rose « Ping » du logo (accent principal) */
            --brand-soft: #F3B6D1;     /* rose clair (tints, fills) */
            --brand-blue: #3B5BA9;     /* bleu roi du logo (accent secondaire) */
            --brand-blue-700: #2E4684; /* bleu foncé (hover / texte) */
        }
        /* Palette de marque dérivée du logo LaboPing : rose `--brand` + bleu
           `--brand-blue`. Tokens Tailwind équivalents : `brand`, `brandBlue`. */
        .text-brandblue   { color: var(--brand-blue); }
        .bg-brandblue     { background-color: var(--brand-blue); }
        .border-brandblue { border-color: var(--brand-blue); }
        .fill-brandblue   { fill: var(--brand-blue); }
        .text-brand       { color: var(--brand); }
        html.dark .text-brandblue { color: #8fa6e0; }   /* bleu clair lisible en sombre */

        /* Liens de navigation : couleur dark-aware + SURVOL BLEU.
           !important pour battre tout `color` inline résiduel posé par du JS. */
        #nav-links button, #nav-links a { color: var(--ink); border-radius:.5rem; padding:.35rem .6rem; transition: color .15s ease, background-color .15s ease; }
        html.dark #nav-links button, html.dark #nav-links a { color: #e2e8f0; }
        #nav-links button:hover, #nav-links a:hover { color: var(--brand-blue) !important; background-color: rgba(59,91,169,.10); }
        html.dark #nav-links button:hover, html.dark #nav-links a:hover { color: #8fa6e0 !important; background-color: rgba(143,166,224,.15); }

        /* Filet bleu en haut des cartes stats */
        .border-t-brandblue { border-top-color: var(--brand-blue); }
        /* Survol des filtres INACTIFS → teinte bleue (cohérence bicolore) */
        [class*="filter-btn"]:not(.bg-brandblue):hover,
        .occ-filter-btn:not(.bg-brandblue):hover,
        .sort-btn:not(.bg-brandblue):hover { background-color: rgba(59,91,169,.10) !important; color: var(--brand-blue) !important; }

        /* Menu mobile : survol bleu */
        #mobile-menu button:hover, #mobile-menu a:hover { color: var(--brand-blue) !important; }
        /* Bottom-nav : actif + survol en bleu (au lieu du rose) */
        #bottom-nav .bottom-nav-btn.bn-active,
        #bottom-nav .bottom-nav-btn:hover { color: var(--brand-blue) !important; }
        .font-display { font-family: 'Saira Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0; }
        .font-mono-lp { font-family: 'Space Mono', ui-monospace, monospace; }
        .bg-paper   { background-color: var(--paper); background-image: radial-gradient(rgba(21,18,12,0.035) 1px, transparent 1.2px); background-size: 22px 22px; }
        .bg-paper-2 { background-color: var(--paper-2); }
        .bg-hair    { background-color: var(--hair); }
        .text-ink   { color: var(--ink); }
        .border-hair { border-color: var(--hair); }
        .divide-hair > * + * { border-color: var(--hair); }
        .kicker { font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
        .dropcap::first-letter { font-family: 'Saira Condensed', 'Arial Narrow', sans-serif; font-weight: 800; float: left; font-size: 3.1em; line-height: .78; padding: .04em .14em 0 0; color: var(--ink); }
        html.dark .bg-paper   { background-color: #0c0a08 !important; background-image: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1.2px) !important; }
        html.dark .bg-paper-2 { background-color: #151310 !important; }
        html.dark .bg-hair    { background-color: #2a2620 !important; }
        html.dark .text-ink   { color: #F2EEE3 !important; }
        html.dark .border-hair, html.dark .divide-hair > * + * { border-color: #2a2620 !important; }

        /* ── Hero « fiche d'analyse » : blueprint paddle + jauges ─── */
        .bp-stroke { stroke: var(--ink); fill: none; }
        .bp-faint  { stroke: var(--hair); fill: none; }
        .bp-fill-soft { fill: #f1dde2; }
        .bp-fill-blue { fill: #dbe3f5; }
        html.dark .bp-fill-blue { fill: #1d2740; }

        /* ── Carte hero en PANNEAU BLEU (couleurs du logo : cercle bleu + raquette rose) ── */
        #hero-fiche-card.fiche-blue { background: var(--brand-blue); border-color: var(--brand-blue-700); color: #fff; }
        .fiche-blue .text-ink, .fiche-blue .text-slate-500, .fiche-blue .text-slate-300 { color: #fff !important; }
        .fiche-blue .border-hair { border-color: rgba(255,255,255,.18) !important; }
        .fiche-blue .bp-stroke { stroke: #F4EEF1; }
        .fiche-blue .bp-faint, .fiche-blue .gauge-track { stroke: rgba(255,255,255,.28); }
        .fiche-blue .bp-fill-blue { fill: var(--brand); }          /* lame rose sur le bleu */
        .fiche-blue .bp-fill-soft { fill: rgba(255,255,255,.12); }
        .fiche-blue .bp-fill-paper, .fiche-blue .bp-fill-paper2 { fill: rgba(255,255,255,.10); }
        .fiche-blue .gauge-fill { stroke: var(--brand-soft); } /* jauges rose clair */
        .fiche-blue .text-brandblue { color: var(--brand-soft) !important; } /* label No.05 → rose clair */
        .gauge-track { stroke: var(--hair); }
        .gauge-fill  { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.22,.68,0,1.2); }
        .bp-fill-paper  { fill: #F6F3EA; }
        .bp-fill-paper2 { fill: #EFEBDF; }
        html.dark .bp-stroke { stroke: #F2EEE3; }
        html.dark .bp-faint, html.dark .gauge-track { stroke: #2a2620; }
        html.dark .bp-fill-soft { fill: #2a1c20; }
        html.dark .bp-fill-paper  { fill: #0c0a08; }
        html.dark .bp-fill-paper2 { fill: #151310; }

        /* ── Cartes catalogue éditoriales : icône typée + mini-jauges ── */
        .cat-ico-soft { fill: #f1dde2; }
        html.dark .cat-ico-soft { fill: #2a1c20; }
        .gbar { height: 3px; background: var(--hair); border-radius: 2px; overflow: hidden; }
        html.dark .gbar { background: #2a2620; }
        .gbar > i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
        .prod-card { background-color: var(--paper); transition: transform .2s cubic-bezier(.22,.68,0,1.2), border-color .2s ease, box-shadow .2s ease; }
        .prod-card:hover { transform: translateY(-3px); border-color: #b9b1a0; box-shadow: 0 12px 28px rgba(21,18,12,.07); }
        html.dark .prod-card { background-color: #151310; }
        html.dark .prod-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.45); border-color: #3a352d; }
        .lp-link { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
        .lp-link .lbl { font-family: 'Saira Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--brand); padding-bottom: 1px; transition: border-color .18s ease; }
        .lp-link .arr { color: var(--brand); transition: transform .2s cubic-bezier(.22,.68,0,1.2); }
        .lp-link:hover .lbl { border-color: var(--ink); }
        .lp-link:hover .arr { transform: translateX(3px); }
        html.dark .lp-link .lbl { color: #F2EEE3; }
        /* Pastilles « Ta raquette » (hero) — dark-aware */
        .hero-dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; transform: translateY(-1px); }
        .hero-dot-bois { background: #10b981; }
        .hero-dot-cd   { background: #ef4444; }
        .hero-dot-rv   { background: #15120C; }
        html.dark .hero-dot-rv { background: #F2EEE3; }

        /* ── Transitions de sections ─────────────────────────────── */
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .section-animate {
            animation: fadeSlideIn 0.28s cubic-bezier(.22,.68,0,1.2) both;
        }

        /* ── Cartes catalogue en stagger ────────────────────────── */
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(16px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .catalog-card-animate {
            animation: cardIn 0.32s cubic-bezier(.22,.68,0,1.2) both;
        }

        /* ── Barre de progression ────────────────────────────────── */
        .seg-bar-fill {
            transition: background-color 0.25s ease;
        }

        /* ── Boutons : feedback clic ─────────────────────────────── */
        button:active:not([disabled]) { transform: scale(0.96); }
        button { transition: transform 0.1s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }

        /* ── Cartes catalogue : hover lift ───────────────────────── */
        .catalog-card-hover {
            transition: transform 0.2s cubic-bezier(.22,.68,0,1.2), box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .catalog-card-hover:hover { transform: translateY(-2px); border-color: #b9b1a0; }

        /* ── Fenêtres éditoriales : drawer « dossier » + panneau papier ── */
        @keyframes drawerIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
        .drawer-in { animation: drawerIn .34s cubic-bezier(.22,.68,0,1.2) both; }
        @keyframes paperIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .paper-in { animation: paperIn .28s cubic-bezier(.22,.68,0,1.2) both; }
        /* Sceau circulaire signature (hero) */
        .lp-seal { color: var(--ink); }
        .lp-seal-rotate { transform-origin: 60px 60px; animation: sealspin 26s linear infinite; }
        @keyframes sealspin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .lp-seal-rotate { animation: none; } }

        /* Tranche « dossier » (spine) du drawer : bande encre verticale à gauche */
        .dossier-spine { writing-mode: vertical-rl; transform: rotate(180deg);
            font-family: 'Space Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
            color: var(--paper); white-space: nowrap; }

        /* ── Résultats diagnostic : entrance ─────────────────────── */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .result-animate > * {
            animation: slideUp 0.35s cubic-bezier(.22,.68,0,1.2) both;
        }
        .result-animate > *:nth-child(2) { animation-delay: 0.06s; }
        .result-animate > *:nth-child(3) { animation-delay: 0.12s; }
        .result-animate > *:nth-child(4) { animation-delay: 0.18s; }

        @media print {
            /* Masquer tout sauf le contenu utile */
            nav, footer, #comparateur-bar, #comparateur-modal, #glossaire-modal { display: none !important; }
            .app-section { display: none !important; }
            #section-diagnostic { display: block !important; max-width: 100% !important; padding: 10pt !important; }
            #diag-section-header { display: none !important; }

            /* Masquer boutons interactifs */
            .combo-tab-btn, .print-hide { display: none !important; }

            /* Montrer tous les combos sur pages séparées */
            .combo-pane { display: block !important; break-before: page; }
            #combo-1 { break-before: avoid; }

            /* Conserver les couleurs de fond */
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

            /* Éviter les coupures dans les grilles */
            .grid { break-inside: avoid; }

            /* En-tête impression */
            #diagnostic-container::before {
                content: "laboping — Analyse Tactique Certifiée";
                display: block;
                font-size: 8pt;
                color: #94a3b8;
                font-weight: 700;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                margin-bottom: 14pt;
                padding-bottom: 8pt;
                border-bottom: 1pt solid #e2e8f0;
            }
        }
        /* ── Mode Clair : fond chaud, texte doux ────────────────── */
        html:not(.dark) body { background-color: #f5f4f1 !important; color: #1e293b; letter-spacing: 0.005em; }
        html:not(.dark) nav { background-color: #faf9f7 !important; border-color: #e8e6e1 !important; }
        #nav-links button, #nav-links a { color: #0f172a !important; }
        html.dark #nav-links button, html.dark #nav-links a { color: #e2e8f0 !important; }
        html:not(.dark) .bg-white { background-color: #faf9f7 !important; }
        html:not(.dark) .bg-slate-50 { background-color: #f5f4f1 !important; }
        html:not(.dark) .font-black { letter-spacing: 0.012em; font-weight: 800; }
        html:not(.dark) h1.font-black, html:not(.dark) h2.font-black { letter-spacing: -0.01em; font-weight: 900; }

        /* ── Mode Sombre ─────────────────────────────────────────── */
        html.dark body { background-color: #0f172a !important; color: #e2e8f0; letter-spacing: 0.012em; line-height: 1.6; }
        html.dark .font-black { letter-spacing: normal; }
        html.dark button { letter-spacing: 0.008em; }
        /* Hover nav : blanc au lieu de noir quasi-invisible */
        html.dark .hover\:text-slate-900:not(.hover\:bg-brand):hover { color: #f8fafc !important; }
        html.dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; }
        html.dark nav { background-color: #14181B !important; border-color: #1e293b !important; }
        html.dark #mobile-menu { background-color: #14181B !important; border-color: #1e293b !important; }
        html.dark .bg-white { background-color: #1e293b !important; }
        html.dark .bg-slate-50 { background-color: #0f172a !important; }
        html.dark .bg-slate-100 { background-color: #1e293b !important; }
        html.dark .bg-slate-200 { background-color: #334155 !important; }
        html.dark .text-slate-900, html.dark .text-gray-900 { color: #f1f5f9 !important; }
        html.dark .text-brandDark { color: #f1f5f9 !important; }
        html.dark .text-slate-800, html.dark .text-gray-800 { color: #e2e8f0 !important; }
        html.dark .text-slate-700, html.dark .text-gray-700 { color: #cbd5e1 !important; }
        html.dark .text-slate-600, html.dark .text-gray-600 { color: #94a3b8 !important; }
        html.dark .text-slate-500, html.dark .text-gray-500 { color: #94a3b8 !important; }
        html.dark .text-slate-400, html.dark .text-slate-500 { color: #94a3b8 !important; }
        html.dark .text-slate-300, html.dark .text-slate-400 { color: #64748b !important; }
        /* Couleurs d'accent lisibles en dark mode */
        html.dark .text-rose-500, html.dark .text-rose-500 { color: #38bdf8 !important; }
        html.dark .text-emerald-600, html.dark .text-emerald-500 { color: #34d399 !important; }
        html.dark .text-violet-600, html.dark .text-violet-500 { color: #a78bfa !important; }
        html.dark .text-purple-500 { color: #c084fc !important; }
        /* Bordures */
        html.dark .border-slate-100 { border-color: #1e293b !important; }
        html.dark .border-slate-200 { border-color: #334155 !important; }
        html.dark .border-gray-200 { border-color: #334155 !important; }
        html.dark .border-gray-300 { border-color: #475569 !important; }
        html.dark .border-gray-100 { border-color: #1e293b !important; }
        /* Fonds inputs / tags */
        html.dark .bg-gray-50 { background-color: #1e293b !important; }
        html.dark select, html.dark input { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
        /* Ombres portées sur fond sombre */
        html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; }
        html.dark .catalog-card-hover:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }
        html.dark .skeleton-card { background-color: #1e293b !important; border-color: #334155 !important; }
        html.dark .skeleton-card > div { background-color: #334155 !important; }
        html.dark #glossaire-modal > div { background-color: #1e293b !important; }
        html.dark #comparateur-modal > div { background-color: #1e293b !important; }
        html.dark #detail-modal > div { background-color: #1e293b !important; }
        html.dark #onboarding-modal > div { background-color: #1e293b !important; }
        html.dark #onboarding-modal button.bg-slate-50 { background-color: #0f172a !important; border-color: #334155 !important; }
        html.dark #onboarding-modal button.bg-slate-50:hover { background-color: #1e293b !important; }
        /* Transition fluide */
        html { transition: background-color 0.2s ease, color 0.2s ease; }

        /* ── Comparateur bar : au-dessus du bottom nav sur mobile ── */
        .comparateur-bar-pos { bottom: 0; }
        @media (max-width: 767px) {
            .comparateur-bar-pos { bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
        }

        /* ── Scrollbar invisible ─────────────────────────────────── */
        .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
        .no-scrollbar::-webkit-scrollbar { display: none; }

        /* ── Bottom nav dark mode ────────────────────────────────── */
        html.dark #bottom-nav { background-color: #14181B !important; border-color: #1e293b !important; }
        html.dark .bottom-nav-btn { color: #64748b; }
        html.dark .bottom-nav-btn.bn-active { color: var(--brand); }

        /* ── Animations Labo Synergie ─────────────────────────────── */
        @keyframes laboScoreIn {
            from { opacity: 0; transform: scale(0.55) translateY(6px); }
            to   { opacity: 1; transform: scale(1)   translateY(0);    }
        }
        @keyframes laboCircleIn {
            from { opacity: 0; transform: scale(0.7) translateY(10px); }
            to   { opacity: 1; transform: scale(1)   translateY(0);    }
        }
        @keyframes laboBarGrow {
            from { width: 0 !important; }
            to   { width: var(--labo-bar-w); }
        }
        @keyframes laboCardIn {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .labo-score-in   { animation: laboScoreIn  0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
        .labo-circle-in  { animation: laboCircleIn 0.38s ease-out both; }
        .labo-bar-grow   { animation: laboBarGrow  0.55s ease-out both; }
        .labo-card-in    { animation: laboCardIn   0.35s ease-out both; }

/* ── Onglets de résultats du Labo ── */
        .labo-tab-panel        { display: none; }
        .labo-tab-panel.lt-on  { display: block; }
        .labo-tab-panel.lt-on:empty { display: none; } /* panneaux conditionnels vides */
        #labo-tabbar { position: sticky; top: 0; z-index: 20; }
        .labo-tab-btn.lt-active { background:#0f172a; color:#fff; }
        html.dark #labo-tabbar { background:#0f172a; }
        html.dark .labo-tab-btn.lt-active { background:#334155; }

/* ── Dark mode overrides : section Profil (ex-<style> inline) ── */
            /* Dark mode overrides pour section-profil */
            html.dark #section-profil .profil-card { background:#1e293b; border-color:#334155; }
            html.dark #section-profil .profil-field { background:#0f172a; border-color:#334155; color:#f1f5f9; }
            html.dark #section-profil .profil-field::placeholder { color:#475569; }
            html.dark #section-profil .profil-label { color:#94a3b8; }
            html.dark #section-profil .profil-section-title { color:#64748b; }
            html.dark #section-profil .profil-tabs-bar { background:#0f172a; }
            html.dark #section-profil .profil-tab-btn.tab-active { background:#1e293b; color:#f1f5f9; box-shadow:0 1px 4px rgba(0,0,0,.4); }
            html.dark #section-profil .profil-tab-btn:not(.tab-active) { color:#64748b; }
            html.dark #section-profil .profil-stat-card { background:#1e293b; border-color:#334155; }
            html.dark #section-profil .profil-stat-num { color:#f1f5f9; }
            html.dark #section-profil .profil-page-title { color:#f1f5f9; }
            html.dark #section-profil .profil-field-hint { color:#475569; }

            /* Accessibilité — « réduire les animations » : neutralise les ~11
               keyframes/transitions de l'accueil (apparitions de cartes/sections
               rejouées à chaque navigation), au-delà du seul sceau déjà couvert. */
            @media (prefers-reduced-motion: reduce) {
                *, *::before, *::after {
                    animation-duration: .001ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: .001ms !important;
                    scroll-behavior: auto !important;
                }
            }
