/* ============================================================================
   Simplif'IA · Effet global v5
   - Drapeau français UNIFORME partout (bleu/blanc/rouge Marianne · VERTICAL)
   - Bandeau tricolore en haut de chaque page (3px)
   - Lettres marbre RICHEMENT VEINÉES (texture Carrara / Calacatta)
   - 8 étoiles discrètes en fond
   ============================================================================ */


/* ============================================================================
   0. BANDEAU TRICOLORE en haut de chaque page · identité France globale
   ============================================================================ */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #0055A4 0% 33.33%,                 /* Bleu drapeau FR lumineux */
    #FFFFFF 33.33% 66.66%,
    #EF4135 66.66% 100%                /* Rouge drapeau FR */
  );
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}


/* ============================================================================
   1. DRAPEAU FRANÇAIS · uniforme sur tous les thèmes et toutes les pages
   ============================================================================ */
.site-nav-mark,
body[data-theme] .site-nav-mark,
body[data-theme="familial"] .site-nav-mark,
body[data-theme="marbre"] .site-nav-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: linear-gradient(90deg,
    #0055A4 0% 33.33%,                 /* Bleu drapeau FR · gauche · lumineux */
    #FFFFFF 33.33% 66.66%,             /* Blanc · milieu */
    #EF4135 66.66% 100%                /* Rouge drapeau FR · droite */
  ) !important;
  box-shadow:
    0 1px 4px rgba(9, 9, 11, 0.20),
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0;
}

/* Sur fond sombre (marbre), halo blanc subtil pour faire ressortir */
body[data-theme="marbre"] .site-nav-mark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(255, 255, 255, 0.12),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.55) !important;
}

/* Brand text · cohérent partout */
.site-nav-brand {
  color: #09090B;
}
body[data-theme="marbre"] .site-nav-brand {
  color: #F4F4F7;
}
body[data-theme="familial"] .site-nav-brand {
  color: #2D2820;
}

/* Le "France" en rouge Marianne TOUJOURS */
.site-nav-brand span,
body[data-theme] .site-nav-brand span {
  color: #E1000F !important;
  margin-left: -2px;
  font-weight: 700;
}


/* ============================================================================
   2. ÉTOILES EN FOND · 8 étoiles, scintillement doux
   ============================================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(120, 120, 140, 0.55), transparent 50%),
    radial-gradient(2px 2px at 78% 14%, rgba(120, 120, 140, 0.60), transparent 50%),
    radial-gradient(1px 1px at 28% 72%, rgba(120, 120, 140, 0.50), transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 58%, rgba(120, 120, 140, 0.55), transparent 50%),
    radial-gradient(2px 2px at 48% 86%, rgba(120, 120, 140, 0.60), transparent 50%),
    radial-gradient(1px 1px at 64% 32%, rgba(120, 120, 140, 0.45), transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 92%, rgba(120, 120, 140, 0.50), transparent 50%),
    radial-gradient(1px 1px at 84% 88%, rgba(120, 120, 140, 0.40), transparent 50%);
  animation: gentle-twinkle 6s ease-in-out infinite alternate;
}

@keyframes gentle-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

body > * { position: relative; z-index: 1; }

body[data-theme="marbre"]::before {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 50%),
    radial-gradient(2px 2px at 78% 14%, rgba(255, 255, 255, 0.9), transparent 50%),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 58%, rgba(255, 255, 255, 0.85), transparent 50%),
    radial-gradient(2px 2px at 48% 86%, rgba(255, 255, 255, 0.9), transparent 50%),
    radial-gradient(1px 1px at 64% 32%, rgba(255, 255, 255, 0.65), transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 92%, rgba(255, 255, 255, 0.75), transparent 50%),
    radial-gradient(1px 1px at 84% 88%, rgba(255, 255, 255, 0.6), transparent 50%);
}


/* ============================================================================
   3. LETTRES MARBRE · texture Calacatta avec VEINES MULTIPLES dramatiques
   - 5 couches de gradients superposés
   - Veines blanches diagonales NETTES
   - Speckles · highlights · ombres
   - Sur fonds clairs : marbre noir avec veines blanches
   - Sur fond sombre : marbre blanc avec veines grises
   ============================================================================ */
h1,
h2,
.hero h1 {
  background-image:
    /* Couche 1 · Veines blanches diagonales fines (style Calacatta) */
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 8%,
      rgba(255, 255, 255, 0.85) 9%,
      rgba(240, 240, 245, 0.7) 10%,
      transparent 11%,
      transparent 23%,
      rgba(255, 255, 255, 0.6) 24%,
      transparent 25%,
      transparent 38%,
      rgba(255, 255, 255, 0.9) 39%,
      rgba(230, 230, 240, 0.7) 40%,
      transparent 41%,
      transparent 54%,
      rgba(220, 220, 230, 0.5) 55%,
      transparent 56%,
      transparent 67%,
      rgba(255, 255, 255, 0.8) 68%,
      rgba(245, 245, 250, 0.6) 69%,
      transparent 70%,
      transparent 82%,
      rgba(255, 255, 255, 0.7) 83%,
      transparent 84%,
      transparent 100%
    ),
    /* Couche 2 · Veines diagonales inverses (croisement) */
    linear-gradient(
      75deg,
      transparent 0%,
      transparent 15%,
      rgba(255, 255, 255, 0.4) 16%,
      transparent 17%,
      transparent 45%,
      rgba(230, 230, 240, 0.5) 46%,
      transparent 47%,
      transparent 70%,
      rgba(245, 245, 250, 0.45) 71%,
      transparent 72%,
      transparent 100%
    ),
    /* Couche 3 · Speckles (petits éclats) */
    radial-gradient(0.5px 0.5px at 12% 25%, rgba(255, 255, 255, 0.9), transparent 50%),
    radial-gradient(0.5px 0.5px at 88% 40%, rgba(255, 255, 255, 0.85), transparent 50%),
    radial-gradient(0.5px 0.5px at 35% 65%, rgba(255, 255, 255, 0.8), transparent 50%),
    radial-gradient(0.5px 0.5px at 70% 80%, rgba(255, 255, 255, 0.9), transparent 50%),
    radial-gradient(0.5px 0.5px at 20% 90%, rgba(255, 255, 255, 0.75), transparent 50%),
    radial-gradient(1px 1px at 50% 15%, rgba(255, 255, 255, 0.8), transparent 50%),
    radial-gradient(1px 1px at 80% 55%, rgba(245, 245, 250, 0.7), transparent 50%),
    /* Couche 4 · Highlights (taches lumineuses) */
    radial-gradient(ellipse 30% 40% at 25% 35%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 25% 35% at 75% 60%, rgba(240, 240, 250, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 20% 30% at 50% 85%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
    /* Couche 5 · Base marbre noir (couleur principale) */
    linear-gradient(
      135deg,
      #08080C 0%,
      #16161E 12%,
      #08080C 24%,
      #1F1F2A 36%,
      #08080C 48%,
      #14141C 60%,
      #08080C 72%,
      #1A1A24 84%,
      #08080C 100%
    );
  background-size:
    250% 250%,                          /* Veines diagonales 1 */
    250% 250%,                          /* Veines diagonales 2 */
    100% 100%,                          /* Speckle 1 */
    100% 100%,                          /* Speckle 2 */
    100% 100%,                          /* Speckle 3 */
    100% 100%,                          /* Speckle 4 */
    100% 100%,                          /* Speckle 5 */
    100% 100%,                          /* Speckle 6 */
    100% 100%,                          /* Speckle 7 */
    100% 100%,                          /* Highlight 1 */
    100% 100%,                          /* Highlight 2 */
    100% 100%,                          /* Highlight 3 */
    200% 200%;                          /* Base */
  background-position:
    0% 50%, 100% 50%,
    center, center, center, center, center, center, center,
    center, center, center,
    0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-color: transparent;
  letter-spacing: -0.025em;
  animation: marble-flow 22s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 3px rgba(8, 8, 12, 0.12));
}

@keyframes marble-flow {
  0% {
    background-position:
      0% 50%, 100% 50%,
      center, center, center, center, center, center, center,
      center, center, center,
      0% 50%;
  }
  100% {
    background-position:
      100% 50%, 0% 50%,
      center, center, center, center, center, center, center,
      center, center, center,
      100% 50%;
  }
}

h3, h4 { color: #15151A; }


/* === Variante MARBRE BLANC pour thème dark (contraste) === */
body[data-theme="marbre"] h1,
body[data-theme="marbre"] h2,
body[data-theme="marbre"] .hero h1 {
  background-image:
    /* Veines grises diagonales (au lieu de blanches) */
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 8%,
      rgba(60, 60, 75, 0.6) 9%,
      transparent 11%,
      transparent 23%,
      rgba(80, 80, 95, 0.5) 24%,
      transparent 25%,
      transparent 38%,
      rgba(50, 50, 65, 0.65) 39%,
      transparent 41%,
      transparent 54%,
      rgba(90, 90, 105, 0.4) 55%,
      transparent 56%,
      transparent 67%,
      rgba(60, 60, 75, 0.55) 68%,
      transparent 70%,
      transparent 82%,
      rgba(70, 70, 85, 0.5) 83%,
      transparent 84%,
      transparent 100%
    ),
    linear-gradient(
      75deg,
      transparent 0%,
      transparent 15%,
      rgba(80, 80, 95, 0.3) 16%,
      transparent 17%,
      transparent 45%,
      rgba(60, 60, 75, 0.35) 46%,
      transparent 47%,
      transparent 70%,
      rgba(90, 90, 105, 0.3) 71%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(ellipse 30% 40% at 25% 35%, rgba(60, 60, 75, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 25% 35% at 75% 60%, rgba(80, 80, 95, 0.2) 0%, transparent 60%),
    linear-gradient(
      135deg,
      #FAFAFC 0%,
      #E8E8EE 12%,
      #FAFAFC 24%,
      #D8D8E0 36%,
      #FAFAFC 48%,
      #E0E0E8 60%,
      #FAFAFC 72%,
      #DDDDE5 84%,
      #FAFAFC 100%
    );
  background-size: 250% 250%, 250% 250%, 100% 100%, 100% 100%, 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.18));
}

body[data-theme="marbre"] h3,
body[data-theme="marbre"] h4 {
  color: #F4F4F7;
}


/* ============================================================================
   4. EXCEPTIONS LISIBILITÉ
   ============================================================================ */
.hero h1 .accent {
  -webkit-background-clip: text;
  background-clip: text;
  animation: none;
}

.upg-modal-bg h1, .upg-modal-bg h2,
.modal-bg h1, .modal-bg h2,
.ad-modal-bg h1, .ad-modal-bg h2,
table h1, table h2,
.kpi h1, .kpi h2,
.greeting-card h1, .greeting-card h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: inherit !important;
  animation: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  h1, h2 { animation: none !important; filter: none !important; }
  body::before { animation: none !important; }
}