/* BravRez visual identity: light/dark theme (preview only).
   Loaded after styles.css and custom.css so these values win the cascade.
   Without JS the dark values of :root apply. */

/* ---------- Dark (default, also the always-dark scenes) ---------- */
:root,
[data-theme=dark],
[data-scene],
[data-theme=light] [data-scene] {
  color-scheme: dark;

  /* Palette */
  --bv-fond: #05070D;
  --bv-surface: #0C111C;
  --bv-bordure: #1C2436;
  --bv-texte: #E8EEFF;
  --bv-gris: #8C97B3;
  --bv-orange: #FF7634;
  --bv-violet: #A58BFF;
  --bv-lien: #4FD1FF;
  --bv-bouton: #FF7634;
  --bv-bouton-texte: #05070D;
  --bv-trait: linear-gradient(90deg, #FF7634, #A58BFF 55%, #4FD1FF);

  /* Logo (read by includes/identite-logo.php) */
  --bv-n1: #FFF4EE;
  --bv-n2: #FF8A4C;
  --bv-ij: #8C72F2;
  --bv-ij-op: .6;
  --bv-vis: #22185E;
  --bv-vis-op: .8;
  --bv-fil: #C3B3FF;
  --bv-fil-op: .45;

  /* Template variables: only the text hue changes in dark (#F4F7F5 becomes #E8EEFF,
     alpha kept); every other template value stays as in styles.css and custom.css. */
  --text-main: #E8EEFFA3;
  --text-2: #E8EEFF;
  --text-3: #E8EEFF52;
  --text-4: #E8EEFF2E;
  --text-6: #E8EEFFB3;
  --text-7: #E8EEFF80;
}

/* ---------- Light (never inside a [data-scene]) ---------- */
[data-theme=light] {
  color-scheme: light;

  --bv-fond: #F6F7FB;
  --bv-surface: #FFFFFF;
  --bv-bordure: #DDE2EE;
  --bv-texte: #121A2E;
  --bv-gris: #4F5A75;
  --bv-orange: #C2410C;
  --bv-violet: #7E64F0;
  --bv-lien: #086B93;
  --bv-bouton: #C2410C;
  --bv-bouton-texte: #FFFFFF;

  --bv-n1: #151B30;
  --bv-n2: #E0561C;
  --bv-ij: #7E64F0;
  --bv-ij-op: 1;
  --bv-vis: #33248F;
  --bv-vis-op: 1;
  --bv-fil: #6A52E0;
  --bv-fil-op: 0;

  /* Template variables mapped to the light palette */
  --primary: #C2410C;
  --main: #FFFFFF;
  --text-main: #4F5A75;
  --text-2: #121A2E;
  --text-3: #121A2E80;
  --text-4: #121A2E2E;
  --text-5: #C2410C;
  --text-6: #3A4560;
  --text-7: #4F5A75;
  --bg: #F6F7FB;
  --bg-2: #FFFFFF;
  --bg-3: #FFFFFF;
  --bg-4: #EEF0F7;
  --bg-5: #DDE2EE;
  --bg-6: #E0561C;
  --bg-7: #C2410C;
  --bg-8: #9A3412;
  --bg-9: #7C2D12;
  --bg-10: #5E2A12;
  --bg-11: #3F1D0D;
  --bg-12: #F6F7FBA3;
  --line: #DDE2EE;
  --shadow-1: #121A2E26;
  /* The template uses --white as foreground and --black as background: swap them */
  --white: #121A2E;
  --black: #F6F7FB;
}

/* Scenes stay dark in light pages: they re-declare every template variable that light changes
   (values of styles.css and custom.css), so nothing inside them turns light. */
[data-theme=light] [data-scene] {
  --white: #ffffff;
  --black: #000000;
  --primary: #FF7634;
  --main: #141415;
  --text-5: #FF9A63;
  --bg: #FFF4EE;
  --bg-2: #141415D1;
  --bg-3: #FFE5D9;
  --bg-4: #FFD2BC;
  --bg-5: #FFB88E;
  --bg-6: #FF9A63;
  --bg-7: #FF7634;
  --bg-8: #F0611C;
  --bg-9: #C94F16;
  --bg-10: #A63C10;
  --bg-11: #5E2A12;
  --bg-12: #000000A3;
  --line: #FFFFFF1A;
  --shadow-1: #A3A3A340;
}
/* The window onto the night: the section has to bring its own dark background */
[data-theme=light] [data-scene]:not(.aa) {
  background-color: #05070D;
  color: var(--text-main);
}

/* The generated logo SVG hard-codes stroke 1 and opacity .75 for the dark look */
[data-theme=light] .bv-ijin polygon {
  stroke-width: 1.4;
  opacity: 1;
}
[data-theme=light] [data-scene] .bv-ijin polygon {
  stroke-width: 1;
  opacity: .75;
}

/* ---------- Page background and links ---------- */
body {
  background-color: var(--bv-fond);
}
[data-theme=light] .main-blog_detail a:not(.tf-btn):not([class*="btn"]):not([data-scene] *) {
  color: var(--bv-lien);
}

/* Instant theme switch: theme.js adds this class for one frame around the change */
.bv-sans-transition,
.bv-sans-transition *,
.bv-sans-transition *::before,
.bv-sans-transition *::after {
  transition: none !important;
}

/* Theme toggle button (markup arrives with the header work) */
.bv-theme {
  cursor: pointer;
}

/* =====================================================================
   Light version of the pages (outside the scenes)
   Hard-coded colours of styles.css, custom.css and the inline <style> blocks.
   Every selector is guarded with :not([data-scene] *) so nothing leaks into a scene.
   ===================================================================== */

/* Decorative dark layers of the template */
[data-theme=light] .overlay_body:not([data-scene] *) {
  display: none;
}
[data-theme=light] .texture_page .bg-texture:not([data-scene] *) {
  opacity: 0;
}

/* Headings painted with a text gradient */
[data-theme=light] .text-linear:not([data-scene] *) {
  background: linear-gradient(180deg, #121A2E 0%, #2A3552 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=light] .text-linear-2:not([data-scene] *) {
  background: linear-gradient(90deg, #5B3FD6 0%, #086B93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Bootstrap white text (breadcrumb, labels, headings) */
[data-theme=light] .text-white:not([data-scene] *) {
  color: var(--bv-texte) !important;
}
[data-theme=light] a.text-white:not([data-scene] *):not(.breadcrumbs-list *) {
  color: var(--bv-lien) !important;
}
[data-theme=light] .section-page-title .current-page:not([data-scene] *) {
  color: var(--bv-orange);
}

/* Primary buttons and active chips: white text on the dark orange */
[data-theme=light] .tf-btn.style-2:not([data-scene] *),
[data-theme=light] .tf-btn-tab.active:not([data-scene] *),
[data-theme=light] .tf-btn-tab:hover:not([data-scene] *),
[data-theme=light] .articles-pages .pagination-item.is-current:not([data-scene] *) {
  color: var(--bv-bouton-texte) !important;
  background-color: var(--bv-bouton);
}
[data-theme=light] .tf-btn.style-3:not([data-scene] *),
[data-theme=light] .tf-btn.style-4:not([data-scene] *),
[data-theme=light] .pagination-item:not([data-scene] *) {
  background: var(--bv-surface);
  border-color: var(--bv-bordure);
  box-shadow: none;
  color: var(--bv-texte);
}
[data-theme=light] .btn-ip:not([data-scene] *) {
  background: var(--bv-surface);
  box-shadow: none;
}
[data-theme=light] .animate-btn:not([data-scene] *)::after {
  opacity: .25;
}
[data-theme=light] #goTop:not([data-scene] *) {
  background: var(--bv-surface);
  color: var(--bv-texte);
  border: 1px solid var(--bv-bordure);
  border-radius: 8px;
}

/* Fade overlays that were black on the dark page */
[data-theme=light] .has-overlay_linear:not([data-scene] *)::after,
[data-theme=light] .tf-brand .infiniteslide_wrap:not([data-scene] *)::after {
  background: linear-gradient(90deg, var(--bv-fond) 0%, rgba(246,247,251,0) 18%, rgba(246,247,251,0) 82%, var(--bv-fond) 100%);
}
[data-theme=light] .has-overlay_linear.type-2:not([data-scene] *)::after {
  background: linear-gradient(90deg, var(--bv-fond) 0%, rgba(246,247,251,0) 28%, rgba(246,247,251,0) 72%, var(--bv-fond));
}
[data-theme=light] .hacker-text:not([data-scene] *),
[data-theme=light] .sect-bottom .hacker-text:not([data-scene] *) {
  color: #5E6985;
}
[data-theme=light] .block-quote:not([data-scene] *)::after {
  box-shadow: none;
}
[data-theme=light] .orther-overlay:not([data-scene] *) {
  display: none;
}
[data-theme=light] .section-faq .sect-main:not([data-scene] *) {
  background: radial-gradient(50% 50% at 50% 50%, rgba(194, 65, 12, .06) 0%, rgba(246, 247, 251, 0) 100%);
}

/* Home page and lists (inline styles of index.php) */
[data-theme=light] .svc-carte-lien .svc-decouvrir:not([data-scene] *) {
  color: var(--bv-orange);
}
[data-theme=light] a.svc-carte-lien:hover:not([data-scene] *),
[data-theme=light] a.svc-carte-lien:focus-visible:not([data-scene] *) {
  border-color: rgba(194, 65, 12, .4);
  background-color: rgba(194, 65, 12, .04);
}
[data-theme=light] .section-articles .genre-badge.badge-art:not([data-scene] *) {
  background: #C2410C;
}
[data-theme=light] .section-articles .row-label .dot-art:not([data-scene] *) {
  background: #C2410C;
}
[data-theme=light] .section-articles .row-seeall:not([data-scene] *) {
  border-color: var(--bv-bordure);
}
[data-theme=light] .section-articles .row-seeall:hover:not([data-scene] *) {
  color: #0B6B0B;
  border-color: #0B6B0B;
}
[data-theme=light] .articles-pages .pagination-item.is-current:not([data-scene] *) {
  border-color: var(--bv-bouton);
}
[data-theme=light] .articles-pages .articles-pages-trou:not([data-scene] *) {
  color: var(--bv-gris);
}

/* Client logo band: the white filter becomes a dark one */
[data-theme=light] .br-logos--mono .br-logos__item:not(.br-logos__item--couleur):not(.br-logos__item--inverse) img:not([data-scene] *) {
  filter: brightness(0);
}
[data-theme=light] .br-logos .br-logos__item--inverse img:not([data-scene] *) {
  filter: grayscale(1);
}
[data-theme=light] .br-logos__legende:not([data-scene] *),
[data-theme=light] .br-logos__nom:not([data-scene] *) {
  color: var(--bv-texte);
  opacity: .8;
}

/* Article body (custom.css and the inline block of article.php) */
[data-theme=light] .detail_text a:not([data-scene] *) {
  color: var(--bv-lien);
  text-decoration-color: rgba(8, 107, 147, .55);
}
[data-theme=light] .detail_text a:hover:not([data-scene] *),
[data-theme=light] .detail_text a:focus-visible:not([data-scene] *) {
  color: #064F6E;
}

/* Actus IA article (inline block of actu.php) */
[data-theme=light] .article-body:not([data-scene] *) {
  color: var(--bv-gris);
}
[data-theme=light] .article-body strong:not([data-scene] *) {
  color: var(--bv-texte);
}
[data-theme=light] .article-body code:not([data-scene] *) {
  background: rgba(194, 65, 12, .09);
  color: #9A3412;
}
[data-theme=light] .article-body a:not([data-scene] *) {
  color: var(--bv-lien);
}
[data-theme=light] .article-body a:hover:not([data-scene] *) {
  color: #064F6E;
}
[data-theme=light] .article-body blockquote:not([data-scene] *) {
  background: rgba(194, 65, 12, .05);
}
[data-theme=light] .article-chapo:not([data-scene] *) {
  color: var(--bv-gris) !important;
  border-left-color: var(--bv-orange) !important;
}
[data-theme=light] .recent-post span.text-body-3:not([data-scene] *) {
  color: var(--bv-gris) !important;
}

/* Search modal (inline dark styles in includes/footer.php) */
[data-theme=light] #searchModal:not([data-scene] *) .modal-content {
  background: rgba(255, 255, 255, .97) !important;
  border-color: var(--bv-bordure) !important;
}
[data-theme=light] #searchModal:not([data-scene] *) input {
  background: var(--bv-surface) !important;
  border-color: var(--bv-bordure) !important;
  color: var(--bv-texte) !important;
}
[data-theme=light] #searchModal:not([data-scene] *) .btn-close-white {
  filter: none;
}

/* 404 page cards (inline white borders) */
[data-theme=light] .section-404 a.d-block:not([data-scene] *) {
  border-color: var(--bv-bordure) !important;
  background: var(--bv-surface);
}

/* Cards: white surfaces with a soft shadow on the light page */
[data-theme=light] .blog-article:not([data-scene] *),
[data-theme=light] .sidebar-item:not([data-scene] *),
[data-theme=light] .main-blog_detail:not([data-scene] *),
[data-theme=light] .banner-image-v01:not([data-scene] *) {
  background-color: var(--bv-surface);
  border-color: var(--bv-bordure);
  box-shadow: 0 1px 2px rgba(18, 26, 46, .04), 0 8px 24px rgba(18, 26, 46, .05);
}
[data-theme=light] a.svc-carte-lien:not([data-scene] *) {
  background-color: var(--bv-surface);
  border-color: var(--bv-bordure);
  box-shadow: 0 1px 2px rgba(18, 26, 46, .04), 0 8px 24px rgba(18, 26, 46, .05);
}
[data-theme=light] .block-quote:not([data-scene] *) {
  background: rgba(194, 65, 12, .05);
  border-color: var(--bv-bordure);
}

/* Article page: summary, FAQ, code, share block (inline <style> of article.php) */
[data-theme=light] .article-toc:not([data-scene] *),
[data-theme=light] .faq-item:not([data-scene] *) {
  background: var(--bv-surface);
  border-color: var(--bv-bordure);
}
[data-theme=light] .article-toc:not([data-scene] *) {
  border-left-color: var(--bv-orange);
}
[data-theme=light] .article-toc:not([data-scene] *)::before {
  display: none;
}
[data-theme=light] .faq-item:hover:not([data-scene] *) {
  border-color: rgba(194, 65, 12, .45);
}
[data-theme=light] .toc-title:not([data-scene] *),
[data-theme=light] .faq-question:not([data-scene] *),
[data-theme=light] .share-cta-text:not([data-scene] *) {
  color: var(--bv-texte);
}
[data-theme=light] .toc-list a:not([data-scene] *),
[data-theme=light] .toc-list li.toc-faq-link a:not([data-scene] *) {
  color: var(--bv-texte);
}
[data-theme=light] .toc-list a:hover:not([data-scene] *),
[data-theme=light] .toc-list a.active:not([data-scene] *),
[data-theme=light] .toc-list li.toc-faq-link a:hover:not([data-scene] *) {
  color: var(--bv-orange);
}
[data-theme=light] .toc-list li:not([data-scene] *)::before,
[data-theme=light] .toc-list li.toc-faq-link:not([data-scene] *)::before,
[data-theme=light] .faq-icon:not([data-scene] *),
[data-theme=light] .faq-chevron:not([data-scene] *) {
  color: var(--bv-orange);
}
[data-theme=light] .faq-question:hover:not([data-scene] *) {
  background: rgba(194, 65, 12, .06);
}
[data-theme=light] .faq-answer p:not([data-scene] *),
[data-theme=light] .share-cta-sub:not([data-scene] *),
[data-theme=light] .share-label:not([data-scene] *) {
  color: var(--bv-gris);
}
[data-theme=light] code:not(pre code):not([data-scene] *) {
  background-color: rgba(194, 65, 12, .09);
  color: #9A3412;
  border-color: rgba(194, 65, 12, .2);
}
[data-theme=light] .share-buttons--bottom:not([data-scene] *) {
  background: var(--bv-surface);
  border-color: var(--bv-bordure);
}
[data-theme=light] .share-btn--copy:not([data-scene] *) {
  background: var(--bv-fond);
  border-color: var(--bv-bordure);
  color: var(--bv-texte);
}
[data-theme=light] .share-btn--copy:hover:not([data-scene] *) {
  background: var(--bv-bordure);
}
[data-theme=light] .share-floating:not([data-scene] *) {
  background: rgba(255, 255, 255, .96);
  border-top-color: var(--bv-bordure);
}
[data-theme=light] .article-paragraph .detail_image small:not([data-scene] *),
[data-theme=light] .detail_image small.text-muted:not([data-scene] *) {
  color: var(--bv-gris) !important;
}
[data-theme=light] .article-body h2:not([data-scene] *),
[data-theme=light] .article-body h3:not([data-scene] *) {
  color: var(--bv-texte);
}
[data-theme=light] .article-body blockquote:not([data-scene] *) {
  color: var(--bv-gris);
  border-left-color: var(--bv-orange);
}
/* A coloured logo with white lettering needs a dark chip on the light page */
[data-theme=light] .br-logos--mono .br-logos__item--couleur img:not([data-scene] *) {
  background: #1B2236;
  border-radius: 8px;
  padding: 5px 10px;
}

/* Facebook share button (article pages, both themes, scenes included): white on #1877F2 is 4.23, so a darker brand blue */
.share-btn--facebook:not(:hover) {
  background: #1464D2;
}

/* Qualification questionnaire (asset/qualif brick, not edited): light values for its variables */
[data-theme=light] .br-qualif:not([data-scene] *) {
  --br-qualif-texte: #3A4560;
  --br-qualif-titre: #121A2E;
  --br-qualif-discret: #4F5A75;
  --br-qualif-accent: #C2410C;
  --br-qualif-accent-clair: #9A3412;
  --br-qualif-sur-accent: #FFFFFF;
  --br-qualif-fond: #FFFFFF;
  --br-qualif-fond-option: #F6F7FB;
  --br-qualif-bord: #DDE2EE;
  --br-qualif-bord-fort: #B6BFD6;
  --br-qualif-piste: #E3E7F2;
  box-shadow: 0 1px 2px rgba(18, 26, 46, .04), 0 8px 24px rgba(18, 26, 46, .05);
}
/* Disabled step button: a flat grey instead of the faded orange (the fade left the label at 2.2:1) */
[data-theme=light] .br-qualif:not([data-scene] *) .br-qualif__bouton:disabled {
  opacity: 1;
  background: #E3E7F2;
  border-color: #DDE2EE;
  color: #4F5A75;
}