/* =====================================================================
   pro-pages.css — Thème factorisé des pages « Pro » (dark-aware)
   ---------------------------------------------------------------------
   Chargé globalement dans site/layouts/head.blade.php (après custom.css),
   mais TOUTES les règles sont scopées sous `.pro-page` (classe posée sur
   <body> via @section('body-class','pro-page') dans chaque page pro) :
   aucune fuite vers le reste du site.

   Mécanisme dark mode : la classe `.dark-style` est posée sur <html> par
   l'anti-FOUC de head.blade.php. On suit le pattern éprouvé de
   custom.css L43-50 : `.x { ... }` (light) + `.dark-style .x { ... }` (dark).
   Les sélecteurs `.dark-style .pro-page X` ont une spécificité supérieure
   aux `<style>` inline des pages, donc l'ordre de chargement n'importe pas.

   RÈGLE D'OR : les GRADIENTS colorés et les FONDS PLEINS de marque
   (boutons .btn-pc/.btn-rf, scène 3D, tuiles gradient) sont des INTENTS
   de design → on les garde dans les deux modes. Seuls les FONDS NEUTRES
   (#fff) et les TEXTES/ACCENTS foncés deviennent dark-aware.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Couche 1 — Variables (light par défaut, override en dark)
   --------------------------------------------------------------------- */
.pro-page {
    --pro-card-bg: #fff;
    --pro-card-border: rgba(115, 103, 240, .14);
    --pro-overlay: rgba(255, 255, 255, .15);
    --pro-text-secondary: #555;
    --pro-faq-bg: #fff;
    --pro-faq-text: #1c1d2c;
    /* Couleurs de marque tierces — accents adaptatifs */
    --pc-text: #2E1ED7;          /* Pass Culture (bleu officiel) */
    --pc-soft: rgba(46, 30, 215, .08);
    --rf-text: #000091;          /* République française (SIBIL) */
    --rf-soft: rgba(0, 0, 145, .08);
}

.dark-style .pro-page {
    --pro-card-bg: var(--bs-card-bg);
    --pro-card-border: rgba(115, 103, 240, .30);
    --pro-overlay: rgba(115, 103, 240, .12);
    --pro-text-secondary: var(--bs-secondary-color);
    --pro-faq-bg: var(--bs-card-bg);
    --pro-faq-text: var(--bs-body-color);
    --pc-text: #8b7dff;
    --pc-soft: rgba(139, 125, 255, .18);
    --rf-text: #6c7bff;
    --rf-soft: rgba(108, 123, 255, .18);
}

/* ---------------------------------------------------------------------
   Couche 2 — Classes factorisées (utilisées par les partials partagés)
   --------------------------------------------------------------------- */
.pro-page .pro-card {
    background: var(--pro-card-bg);
    border: 1px solid var(--pro-card-border);
}

.pro-page .pro-overlay {
    background: var(--pro-overlay);
}

.pro-page .pro-floating-icon {
    background: var(--pro-card-bg);
    box-shadow: 0 .25rem 1rem rgba(115, 103, 240, .25);
}

/* Accordéon FAQ factorisé (partial faq.blade.php) */
.pro-page .pro-faq .accordion-item {
    background: var(--pro-faq-bg);
    border: 1px solid var(--pro-card-border);
    border-radius: 1rem !important;
    overflow: hidden;
    margin-bottom: .75rem;
}
.pro-page .pro-faq .accordion-button {
    background: var(--pro-faq-bg);
    color: var(--pro-faq-text);
    font-weight: 600;
    box-shadow: none !important;
}
.pro-page .pro-faq .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background: rgba(115, 103, 240, .08);
}
.pro-page .pro-faq .accordion-button:focus {
    box-shadow: none;
}
.pro-page .pro-faq .accordion-body {
    color: var(--pro-text-secondary);
}

/* Fil d'ariane Pro (partial breadcrumb.blade.php) */
.pro-page .pro-breadcrumb {
    font-size: .875rem;
}
.pro-page .pro-breadcrumb .breadcrumb {
    margin-bottom: 0;
}

/* Grille écosystème (partial ecosystem-nav.blade.php) */
.pro-page .pro-eco-card {
    display: block;
    height: 100%;
    background: var(--pro-card-bg);
    border: 1px solid var(--pro-card-border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
}
.pro-page .pro-eco-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.5rem rgba(115, 103, 240, .15);
    border-color: var(--bs-primary);
}

/* Accents de marque adaptatifs — une règle, les deux modes via variables.
   La spécificité (0,2,0) écrase les `.text-pc { color:#xxx }` inline des pages. */
.pro-page .text-pc   { color: var(--pc-text); }
.pro-page .bg-pc-soft { background-color: var(--pc-soft); }
.pro-page .text-rf   { color: var(--rf-text); }
.pro-page .bg-rf-soft { background-color: var(--rf-soft); }
.pro-page .badge-pc  { background-color: var(--pc-soft); color: var(--pc-text); }
.pro-page .badge-rf  { background-color: var(--rf-soft); color: var(--rf-text); }

/* ---------------------------------------------------------------------
   Couche 3 — Overrides dark mode des classes existantes des pages
   (light = inchangé ; on ne corrige QUE le rendu sombre)
   --------------------------------------------------------------------- */

/* Filet de sécurité : toute carte #fff dans une page pro devient card-bg en dark */
.dark-style .pro-page .bg-white {
    background-color: var(--bs-card-bg) !important;
}

/* Icônes flottantes des héros (sibil/pass-culture forçaient background:#fff) */
.dark-style .pro-page .hero-floating-icons .floating-icon {
    background: var(--bs-card-bg);
}

/* Accordéons FAQ « legacy » (.faq-accordion) — tant que des pages les utilisent */
.dark-style .pro-page .faq-accordion .accordion-item {
    background: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}
.dark-style .pro-page .faq-accordion .accordion-button {
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
}
.dark-style .pro-page .faq-accordion .accordion-body {
    color: var(--bs-secondary-color);
}

/* ---- SIBIL (République française) ---- */
.dark-style .pro-page .quarter-tile {
    background: var(--bs-card-bg);
    border-color: var(--rf-text);
}
.dark-style .pro-page .quarter-tile .q-period { color: var(--rf-text); }
.dark-style .pro-page .quarter-tile .q-deadline { color: var(--bs-secondary-color); }
.dark-style .pro-page .legal-callout {
    background: linear-gradient(135deg, rgba(108, 123, 255, .12) 0%, rgba(225, 0, 15, .10) 100%);
    border-left-color: var(--rf-text);
}
.dark-style .pro-page .legal-callout .legal-label { color: var(--rf-text); }
.dark-style .pro-page .ba-card { background: var(--bs-card-bg); }
.dark-style .pro-page .ba-before { background: rgba(225, 0, 15, .14); }
.dark-style .pro-page .ba-after { background: rgba(40, 199, 111, .16); }

/* ---- Pass Culture ---- */
.dark-style .pro-page .stat-tile { /* tuile gradient de marque conservée — texte clair garanti */ }

/* ---- CRM (réseaux sociaux + comparatif) ---- */
.dark-style .pro-page .text-tiktok { color: var(--bs-body-color); }
.dark-style .pro-page .comparison-table .commupass-col {
    background-color: rgba(115, 103, 240, .16);
}

/* ---- club-culture ---- */
.dark-style .pro-page .cc-define-card,
.dark-style .pro-page .cc-eco-card {
    background: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

/* ---- plan-3d (thème immersif conservé, fonds neutres corrigés) ---- */
.dark-style .pro-page { --p3d-ink: var(--bs-body-color); }
.dark-style .pro-page .p3d-feature,
.dark-style .pro-page .btn-outline-p3d {
    background: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}
.dark-style .pro-page .p3d-feature,
.dark-style .pro-page .p3d-feature .p3d-feature-text {
    color: var(--bs-body-color);
}
/* La scène WebGL .p3d-stage et les CTA gradient sombres restent intentionnellement sombres. */

/* ---------------------------------------------------------------------
   Confort de lecture transverse en dark : les textes gris foncés
   hardcodés (#555, #1c1d2c) restant dans des paragraphes de cartes.
   --------------------------------------------------------------------- */
.dark-style .pro-page .text-dark-hardcoded { color: var(--bs-body-color) !important; }
