/* ==========================================================================
   style.CSS - Fichier central (Thèmes & Base)
   ========================================================================== */

/* 1. VARIABLES DE THÈMES (Si vous avez besoin de variables CSS pures) */
:root {
    /* Mode Clair */
    --theme-bg: #f8fafc;
    --theme-surface: #ffffff;
    --theme-border: #e2e8f0;
    --theme-text: #0f172a;
    --theme-text-muted: #64748b;

    /* Couleurs sémantiques Tailwind (canaux RGB pour supporter les opacités : bg-primary/10...) */
    --c-primary: 26 43 72;     /* navy WeClain #1A2B48 */
    --c-accent: 255 127 50;    /* orange WeClain #FF7F32 */
    --c-surface: 255 255 255;  /* white */
    --c-secondary: 226 232 240; /* slate-200 */
}

html.dark {
    /* Mode Sombre */
    --theme-bg: #0f172a;
    --theme-surface: #1e293b;
    --theme-border: #334155;
    --theme-text: #f8fafc;
    --theme-text-muted: #94a3b8;

    --c-primary: 147 197 253;  /* bleu clair, lisible sur fond sombre */
    --c-accent: 255 127 50;    /* orange WeClain */
    --c-surface: 30 41 59;     /* slate-800 */
    --c-secondary: 51 65 85;   /* slate-700 */
}

/* 2. RÉGLAGES GLOBAUX */
body {
    /* Supprime le surlignage bleu au tap sur mobile pour une sensation d'app native */
    -webkit-tap-highlight-color: transparent;
}

/* Fond quadrillé commun aux sites WeClain (maille de 44 px, navy à 3 %, légèrement incliné) */
body::before {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(26, 43, 72, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 43, 72, 0.032) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: rotate(-1deg);
}
html.dark body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* Charte WeClain : titres en navy (mode clair) et interlettrage serré */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}
html:not(.dark) .text-slate-900 {
    color: #1A2B48;
}

/* Titre de section : trait orange de 4 px sous le titre (un tiers de la largeur, 140 px maximum) */
.section-title {
    position: relative;
    padding-bottom: 0.6rem;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33%;
    max-width: 140px;
    height: 4px;
    background: #FF7F32;
    border-radius: 2px;
}

/* Liens dans le texte : soulignés en pointillé, orange au survol */
p a:not([class*="bg-"]):not([class*="inline-flex"]),
li a:not([class*="bg-"]):not([class*="inline-flex"]) {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
p a:not([class*="bg-"]):not([class*="inline-flex"]):hover,
li a:not([class*="bg-"]):not([class*="inline-flex"]):hover {
    color: #C2410C;
}
html.dark p a:not([class*="bg-"]):not([class*="inline-flex"]):hover,
html.dark li a:not([class*="bg-"]):not([class*="inline-flex"]):hover {
    color: #FF7F32;
}

/* 3. SCROLLBAR MODERNE (Design épuré façon MacOS/Mobile) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* 4. ANIMATIONS GLOBALES (Ex: Surlignage) */
.mark-animate {
    background-image: linear-gradient(to right, #fef08a 100%, transparent 0);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 1s cubic-bezier(0.22, 1, 0.36, 1);
    background-color: transparent !important;
}
html.dark .mark-animate {
    background-image: linear-gradient(to right, rgba(234, 179, 8, 0.3) 100%, transparent 0);
}
.mark-animate.is-active {
    background-size: 100% 100%;
}