/**
 * PentathlonMag Mobile — Layout Templates
 * Spécificité :root[attr] = (0,2,0) > [data-theme] (0,1,0)
 * Ce fichier est chargé après le bloc <style> de head_assets.php
 */

/* ════════════════════════════════════════════════════════
   SPORT DARK — fond noir profond · accent lime-vert
   ════════════════════════════════════════════════════════ */
:root[data-layout-template="sport-dark"] {
    --ink:       #0d0f14;
    --ink2:      #13181f;
    --ink3:      #1c2330;
    --rule:      #1f2a38;
    --rule2:     #2a3848;
    --blue:      #84cc16;
    --blue-dim:  rgba(132,204,22,0.12);
    --blue-hi:   #a3e635;
    --live:      #FF3040;
    --muted:     #4a6070;
    --muted2:    #2d3f52;
    --white:     #F0F6FF;
    --r:         14px;
    --pm-primary:        #84cc16;
    --pm-primary-dark:   #65a30d;
    --pm-accent:         #a3e635;
    --pm-bg-light:       #0d0f14;
    --pm-bg-card:        #13181f;
    --pm-bg-medium:      #1c2330;
    --pm-text-primary:   #F0F6FF;
    --pm-text-secondary: #4a6070;
    --pm-text-light:     #F0F6FF;
    --pm-text-muted:     #2d3f52;
    --pm-border:         #1f2a38;
    /* Bottom nav */
    --nav-bg:     rgba(13,15,20,0.97);
    --nav-border: rgba(132,204,22,0.12);
    --nav-text:   #4a6070;
    --nav-active: #84cc16;
}
:root[data-layout-template="sport-dark"] body { background-color:#0d0f14; color:#F0F6FF; }

/* Blocs */
:root[data-layout-template="sport-dark"] .pm-story-ring.active {
    background: linear-gradient(135deg, #84cc16, #a3e635);
}
:root[data-layout-template="sport-dark"] .pm-date-day    { color: #84cc16; }
:root[data-layout-template="sport-dark"] .pm-section-more { color: #84cc16; }
:root[data-layout-template="sport-dark"] .pm-tag         { color: #a3e635; }
:root[data-layout-template="sport-dark"] .pm-date-block  { background: rgba(132,204,22,0.08); border:1px solid rgba(132,204,22,0.18); }
:root[data-layout-template="sport-dark"] .pm-comp-strip  { background: #13181f; border-bottom:1px solid #1f2a38; }
:root[data-layout-template="sport-dark"] .pm-article-row { border-bottom-color: #1f2a38; }
:root[data-layout-template="sport-dark"] .pm-hero-overlay {
    background: linear-gradient(to top, #0d0f14 0%, rgba(13,15,20,.7) 55%, transparent 100%);
}
:root[data-layout-template="sport-dark"] .pm-section-title {
    color: #F0F6FF;
    letter-spacing: .1em;
}


/* Boutons */
:root[data-layout-template="sport-dark"] .btn-primary,
:root[data-layout-template="sport-dark"] [class*="bg-blue-6"],
:root[data-layout-template="sport-dark"] [class*="bg-blue-5"] { background-color:#84cc16 !important; color:#0d0f14 !important; }
:root[data-layout-template="sport-dark"] [class^="text-blue-"],
:root[data-layout-template="sport-dark"] [class*=" text-blue-"] { color:#84cc16 !important; }
/* Fonds bleus translucides (bg-blue-500/10…) : teinte légère, pas un aplat qui cache le texte de même couleur. */
:root[data-layout-template="sport-dark"] [class*="bg-blue-5"][class*="bg-blue-500/"],
:root[data-layout-template="sport-dark"] [class*="bg-blue-6"][class*="bg-blue-600/"] { background-color:rgba(132,204,22,0.12) !important; color:inherit !important; }

/* ════════════════════════════════════════════════════════
   CLASSIQUE — fond clair · accent bleu · look standard
   ════════════════════════════════════════════════════════ */
:root[data-layout-template="classique"] {
    --ink:       #F3F4F6;
    --ink2:      #FFFFFF;
    --ink3:      #E5E7EB;
    --rule:      #D1D5DB;
    --rule2:     #9CA3AF;
    --blue:      #2B5FFF;
    --blue-dim:  rgba(43,95,255,0.12);
    --blue-hi:   #4D7BFF;
    --live:      #FF3040;
    --muted:     #6B7280;
    --muted2:    #9CA3AF;
    --white:     #111827;
    --r:         14px;
    --pm-primary:        #2B5FFF;
    --pm-primary-dark:   #1e40af;
    --pm-accent:         #4D7BFF;
    --pm-bg-light:       #F3F4F6;
    --pm-bg-card:        #FFFFFF;
    --pm-bg-medium:      #E5E7EB;
    --pm-text-primary:   #111827;
    --pm-text-secondary: #4B5563;
    --pm-text-light:     #111827;
    --pm-text-muted:     #6B7280;
    --pm-border:         #D1D5DB;
    --pm-shadow:         0 4px 6px -1px rgba(0,0,0,.08);
    --pm-shadow-lg:      0 10px 15px -3px rgba(0,0,0,.08);
    /* Bottom nav */
    --nav-bg:     rgba(255,255,255,0.97);
    --nav-border: rgba(0,0,0,0.07);
    --nav-text:   #9CA3AF;
    --nav-active: #2B5FFF;
}
:root[data-layout-template="classique"] body { background-color:#F3F4F6; color:#111827; }

/* Blocs */
:root[data-layout-template="classique"] .pm-story-ring.active {
    background: linear-gradient(135deg, #2B5FFF, #4D7BFF);
}
:root[data-layout-template="classique"] .pm-date-day     { color: #2B5FFF; }
:root[data-layout-template="classique"] .pm-section-more { color: #2B5FFF; }
:root[data-layout-template="classique"] .pm-tag          { color: #2B5FFF; }
:root[data-layout-template="classique"] .pm-date-block   { background: #EEF2FF; border:1px solid #C7D2FE; }
:root[data-layout-template="classique"] .pm-comp-strip   { background:#FFFFFF; border-bottom:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(0,0,0,.06); }
:root[data-layout-template="classique"] .pm-article-row  { border-bottom-color:#E5E7EB; }
:root[data-layout-template="classique"] .pm-hero-overlay {
    background: linear-gradient(to top, rgba(17,24,39,.85) 0%, rgba(17,24,39,.4) 55%, transparent 100%);
}
:root[data-layout-template="classique"] .pm-section-title { color: #111827; }
:root[data-layout-template="classique"] .pm-section-header { border-bottom: 2px solid #E5E7EB; padding-bottom: 8px; }

/* ════════════════════════════════════════════════════════
   MINIMALISTE — blanc · gris anthracite · épuré
   ════════════════════════════════════════════════════════ */
:root[data-layout-template="minimaliste"] {
    --ink:       #FAFAFA;
    --ink2:      #FFFFFF;
    --ink3:      #F3F4F6;
    --rule:      #E5E7EB;
    --rule2:     #D1D5DB;
    --blue:      #374151;
    --blue-dim:  rgba(55,65,81,0.08);
    --blue-hi:   #1F2937;
    --live:      #EF4444;
    --muted:     #9CA3AF;
    --muted2:    #D1D5DB;
    --white:     #111827;
    --r:         6px;
    --pm-primary:        #374151;
    --pm-primary-dark:   #1F2937;
    --pm-accent:         #1F2937;
    --pm-bg-light:       #FAFAFA;
    --pm-bg-card:        #FFFFFF;
    --pm-bg-medium:      #F3F4F6;
    --pm-text-primary:   #111827;
    --pm-text-secondary: #6B7280;
    --pm-text-light:     #111827;
    --pm-text-muted:     #9CA3AF;
    --pm-border:         #E5E7EB;
    --pm-shadow:         0 1px 2px rgba(0,0,0,.04);
    --pm-shadow-lg:      0 2px 4px rgba(0,0,0,.06);
    /* Bottom nav */
    --nav-bg:     rgba(250,250,250,0.98);
    --nav-border: rgba(0,0,0,0.06);
    --nav-text:   #D1D5DB;
    --nav-active: #111827;
}
:root[data-layout-template="minimaliste"] body { background-color:#FAFAFA; color:#111827; }

/* Blocs */
:root[data-layout-template="minimaliste"] .pm-story-ring.active {
    background: linear-gradient(135deg, #374151, #1F2937);
}
:root[data-layout-template="minimaliste"] .pm-date-day     { color: #111827; font-size:22px; }
:root[data-layout-template="minimaliste"] .pm-section-more { color:#9CA3AF; font-weight:600; letter-spacing:.04em; }
:root[data-layout-template="minimaliste"] .pm-tag          { color:#374151; }
:root[data-layout-template="minimaliste"] .pm-date-block   { background:#F3F4F6; border:1px solid #E5E7EB; }
:root[data-layout-template="minimaliste"] .pm-comp-strip   { background:#FFFFFF; border-bottom:1px solid #F3F4F6; }
:root[data-layout-template="minimaliste"] .pm-article-row  { border-bottom-color:#F3F4F6; }
:root[data-layout-template="minimaliste"] .pm-hero-overlay {
    background: linear-gradient(to top, rgba(17,24,39,.9) 0%, rgba(17,24,39,.5) 55%, transparent 100%);
}
:root[data-layout-template="minimaliste"] .pm-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: #111827;
    text-transform: none;
}
:root[data-layout-template="minimaliste"] .pm-section-header {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 10px;
    margin-bottom: 4px;
}


/* ════════════════════════════════════════════════════════
   NUIT OLED — noir pur · bleu électrique · AMOLED
   ════════════════════════════════════════════════════════ */
:root[data-layout-template="nuit-oled"] {
    --ink:       #000000;
    --ink2:      #0a0a0a;
    --ink3:      #111111;
    --rule:      #1a1a1a;
    --rule2:     #222222;
    --blue:      #38bdf8;
    --blue-dim:  rgba(56,189,248,0.10);
    --blue-hi:   #7dd3fc;
    --live:      #FF3040;
    --muted:     #3a3a3a;
    --muted2:    #222222;
    --white:     #FFFFFF;
    --r:         14px;
    --pm-primary:        #38bdf8;
    --pm-primary-dark:   #0ea5e9;
    --pm-accent:         #7dd3fc;
    --pm-bg-light:       #000000;
    --pm-bg-card:        #0a0a0a;
    --pm-bg-medium:      #111111;
    --pm-text-primary:   #FFFFFF;
    --pm-text-secondary: #3a3a3a;
    --pm-text-light:     #FFFFFF;
    --pm-text-muted:     #222222;
    --pm-border:         #1a1a1a;
    --pm-shadow:         none;
    --pm-shadow-lg:      none;
    /* Bottom nav */
    --nav-bg:     rgba(0,0,0,0.98);
    --nav-border: rgba(56,189,248,0.10);
    --nav-text:   #2a2a2a;
    --nav-active: #38bdf8;
}
:root[data-layout-template="nuit-oled"] body { background-color:#000000; color:#FFFFFF; }

/* Blocs */
:root[data-layout-template="nuit-oled"] .pm-story-ring.active {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}
:root[data-layout-template="nuit-oled"] .pm-date-day     { color: #38bdf8; }
:root[data-layout-template="nuit-oled"] .pm-section-more { color: #38bdf8; }
:root[data-layout-template="nuit-oled"] .pm-tag          { color: #38bdf8; }
:root[data-layout-template="nuit-oled"] .pm-date-block   { background: rgba(56,189,248,.06); border:1px solid rgba(56,189,248,.15); }
:root[data-layout-template="nuit-oled"] .pm-comp-strip   { background:#000; border-bottom:1px solid #1a1a1a; }
:root[data-layout-template="nuit-oled"] .pm-article-row  { border-bottom-color:#1a1a1a; }
:root[data-layout-template="nuit-oled"] .pm-hero-overlay {
    background: linear-gradient(to top, #000000 0%, rgba(0,0,0,.7) 55%, transparent 100%);
}
:root[data-layout-template="nuit-oled"] .pm-section-title { color: #FFFFFF; }


/* Boutons */
:root[data-layout-template="nuit-oled"] .btn-primary,
:root[data-layout-template="nuit-oled"] [class*="bg-blue-6"],
:root[data-layout-template="nuit-oled"] [class*="bg-blue-5"] { background-color:#38bdf8 !important; color:#000 !important; }
:root[data-layout-template="nuit-oled"] [class^="text-blue-"],
:root[data-layout-template="nuit-oled"] [class*=" text-blue-"] { color:#38bdf8 !important; }
/* Fonds bleus translucides (bg-blue-500/10…) : teinte légère, pas un aplat qui cache le texte de même couleur. */
:root[data-layout-template="nuit-oled"] [class*="bg-blue-5"][class*="bg-blue-500/"],
:root[data-layout-template="nuit-oled"] [class*="bg-blue-6"][class*="bg-blue-600/"] { background-color:rgba(56,189,248,0.12) !important; color:inherit !important; }