/*
Theme Name: BETO
Theme URI: https://beto.cd
Author: LEOPARDS GROUP SARL
Author URI: https://beto.cd
Description: Thème éditorial sur mesure pour BETO (éditeur LEOPARDS GROUP SARL) — architecture « tout en post », design system as.com, intégration Elementor Pro Theme Builder.
Version: 3.0.8
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beto
Tags: news, editorial, elementor, custom-logo, translation-ready
*/

/* ══════════════════════════════════════════════════════════════════════
   BETO DESIGN SYSTEM — Variables globales
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* Couleurs accent — aligned with editorial --red (#ce1021) */
    --beto-red: #ce1021;
    --beto-red-dark: #a80d1a;
    --beto-red-light: #fee2e2;

    /* Univers */
    --univ-info: #ce1021;
    --univ-edu: #0060df; /* was #007fff — darkened for WCAG AA (5.27:1 vs 3.83:1) */
    --gold-dk: #f7d618;

    /* Texte */
    --beto-text: #222;
    --beto-text-secondary: #3a3a3a;
    --beto-text-light: #666;
    --beto-text-muted: #767676; /* was #999 — adjusted for WCAG AA (4.54:1 vs 2.85:1) */

    /* Surfaces */
    --beto-bg: #fff;
    --beto-bg-light: #f7f7f7;
    --beto-bg-dark: #111827;
    --beto-border: #e9e9e9;
    --beto-border-light: #f2f2f2;

    /* Typographie */
    --beto-font-title: 'Sofia Sans', sans-serif;
    --beto-font-body: 'Source Sans 3', sans-serif;

    /* Layout */
    --beto-max-width: var(--page, 1400px);
    --beto-gap: 1.5rem;
    --beto-radius: 0; /* Style éditorial strict — pas de border-radius */

    /* ── Aliases courtes (utilisées par les <style> scoped des templates) ── */
    --navy: #24265b;
    --navy-lt: #2e3170;
    --blue: #0060df;
    --blue-dk: #004fb3;
    --red: #ce1021;
    --red-dk: #a80d1a;
    --gold: #f7d618;
    --gold-dk: #d4b800;
    --gray: #b3b3b3;

    --txt: #121212;
    --txt-2: #333;
    --txt-3: #666;
    --muted: #767676; /* WCAG AA — les fichiers legacy utilisent #999, corrigé ici */
    --border: #d6d6d6;
    --border-lt: #e9e9e9;
    --bg-lt: #f7f7f7;
    --bg-warm: #faf8f5;

    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Barlow Semi Condensed', Arial, sans-serif;
    --sans2: 'Barlow', Arial, sans-serif;
    --ui: 'Barlow', Arial, sans-serif;

    --page: 1400px;
    --header-h: 60px;
    --body-col: 760px;

    /* ── Typographic scale (major second · 1.125) ── */
    --fs-2xs: .625rem;    /* 10px — badges, super-tiny labels */
    --fs-xs:  .6875rem;   /* 11px — meta, timestamps */
    --fs-sm:  .75rem;     /* 12px — captions, sidebar text */
    --fs-base-sm: .8125rem; /* 13px — UI text, nav links */
    --fs-base: .875rem;   /* 14px — body text */
    --fs-md:  1rem;       /* 16px — large body, leads */
    --fs-lg:  1.125rem;   /* 18px — subheadings, intro */
    --fs-xl:  1.375rem;   /* 22px — section titles */
    --fs-2xl: 1.5rem;     /* 24px — page headings */
    --fs-3xl: 2rem;       /* 32px — hero titles */
    --fs-4xl: 2.5rem;     /* 40px — display titles */

    /* ── Breakpoint tokens ──
       NOTE: CSS @media cannot use var(), so these are for JS access
       (getComputedStyle) and documentation. @media rules still use literals.
       ─────────────────────────────────────────────
       Name         Value      Purpose
       ─────────────────────────────────────────────
       Desktop      1100px     Grid column reduction
       Tablet-lg    1000px     Sidebar collapse, nav switch
       Tablet       768px      Two-col → single-col
       Mobile       480px      Compact layout
       ───────────────────────────────────────────── */
    --bp-desktop: 1100px;
    --bp-tablet-lg: 1000px;
    --bp-tablet: 768px;
    --bp-mobile: 480px;

    /* Z-index scale — documented levels for the entire project.
       Usage: z-index: var(--z-header);
       ─────────────────────────────────────────────
       Layer                     Token          Value
       ─────────────────────────────────────────────
       Content stacking (hero)   --z-base       1
       Content overlays          --z-above      2
       Content top               --z-top        3
       Dropdowns / tooltips      --z-dropdown   100
       Reading progress bar      --z-sticky     900
       Site header               --z-header     1000
       Header elements above     --z-header-top 1001
       Mobile drawer overlay     --z-overlay    2000
       Mobile drawer panel       --z-drawer     2001
       Search overlay            --z-search     3000
       Skip-link (a11y)          --z-skip       100000
       ───────────────────────────────────────────── */
    --z-base: 1;
    --z-above: 2;
    --z-top: 3;
    --z-dropdown: 100;
    --z-sticky: 900;
    --z-header: 1000;
    --z-header-top: 1001;
    --z-overlay: 2000;
    --z-drawer: 2001;
    --z-search: 3000;
    --z-skip: 100000;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--beto-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--beto-text);
    background: var(--beto-bg);
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--beto-font-title);
    font-weight: 800;
    line-height: 1.15;
    color: var(--beto-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--beto-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--beto-red);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── 16:9 ratio guard for post thumbnails (covers cached wrong-ratio images) ── */
.srow__img,
.bis__art-img img,
.bst-row2__art-img img,
.ec__img,
.beto-card__image img,
.nf-popular__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT UTILITAIRES
   ══════════════════════════════════════════════════════════════════════ */

.beto-container {
    max-width: var(--beto-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.beto-section {
    padding: 2rem 0;
}

.beto-separator {
    border: 0;
    border-top: 1px solid var(--beto-border);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ÉLÉMENTS DE CONTENU (single post)
   ══════════════════════════════════════════════════════════════════════ */

.entry-content {
    font-family: var(--beto-font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--beto-text-secondary);
    max-width: 720px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.entry-content p {
    margin-bottom: 1.25rem;
}

.entry-content blockquote {
    border-left: 3px solid var(--beto-red);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--beto-text-light);
}

.entry-content figure {
    margin: 2rem 0;
}

.entry-content figcaption {
    font-size: 0.875rem;
    color: var(--beto-text-muted);
    margin-top: 0.5rem;
}

.entry-content ul,
.entry-content ol {
    margin: 1rem 0 1rem 1.5rem;
}

.entry-content li {
    margin-bottom: 0.375rem;
}

/* ══════════════════════════════════════════════════════════════════════
   WORDPRESS DEFAULTS (admin bar, alignments, etc.)
   ══════════════════════════════════════════════════════════════════════ */

.alignwide {
    max-width: calc(var(--beto-max-width) + 200px);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.aligncenter {
    text-align: center;
}

.screen-reader-text,
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   ELEMENTOR OVERRIDES
   ══════════════════════════════════════════════════════════════════════ */

/* Supprime les marges par défaut d'Elementor sur les sections pleine largeur */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--beto-max-width);
}

/* Force la typo BETO sur les widgets Elementor */
.elementor-widget-text-editor {
    font-family: var(--beto-font-body);
}

.elementor-widget-heading .elementor-heading-title {
    font-family: var(--beto-font-title);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (max-width: 767px) {
    :root {
        --beto-gap: 1rem;
    }

    html {
        font-size: 16px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }

    .beto-container {
        padding: 0 12px;
    }

    .entry-content {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ
   ══════════════════════════════════════════════════════════════════════ */

/* Skip-to-content link */
.beto-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: var(--z-skip, 100000);
    padding: .5rem 1rem;
    background: var(--beto-red, #ce1021);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top .15s ease;
}
.beto-skip-link:focus {
    top: 0;
    outline: 2px solid var(--beto-text, #222);
    outline-offset: 2px;
}

/* Focus visible for all interactive elements */
:focus-visible {
    outline: 2px solid var(--beto-red, #ce1021);
    outline-offset: 2px;
}

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   EMBEDS VIDÉO / AUDIO — conteneur responsive global
   ══════════════════════════════════════════════════════════════════════ */

/* Le wrapper .beto-embed s'insère entre le player container et l'iframe.
   Il doit être transparent pour ne pas casser le positionnement absolu
   de l'iframe ni bloquer la Fullscreen API. */
.beto-embed--video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.beto-embed--video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Permettre le plein écran natif sur mobile (iOS / Android) */
.beto-embed--video iframe,
.avideo__player iframe,
.vhero__player iframe {
    -webkit-full-screen: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   UTILITAIRES RÉUTILISABLES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Alertes / Notifications ── */
.beto-alert {
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    font: 500 .9375rem/1.4 var(--beto-font-body);
}

.beto-alert--success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.beto-alert--error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.beto-alert--error-warm {
    background: #fbe9e7;
    color: #c62828;
    border: 1px solid #ef5350;
}

.beto-alert--warning {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

/* ── Messages d'état vide ── */
.beto-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--beto-text-muted, #767676);
    font: 400 1rem/1.6 var(--beto-font-body);
}

.beto-empty--sm {
    padding: 24px 0;
    font-size: .9375rem;
    color: var(--beto-text-muted, #767676);
}

/* ── Icônes inline (SVG) ── */
.beto-icon--xs {
    width: 12px;
    height: 12px;
}

.beto-icon--sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.beto-icon--md {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Lien discret (hérite la couleur du parent) ── */
.beto-link-inherit {
    color: inherit;
    text-decoration: none;
}

/* ── Lien accent (rouge BETO) ── */
.beto-link-accent {
    color: var(--red, #ce1021);
    font-weight: 600;
}

/* ── Disabled / inactif ── */
.beto-disabled {
    opacity: .5;
    pointer-events: none;
}

.beto-disabled--light {
    opacity: .4;
    pointer-events: none;
}

/* ── Fallback header (Elementor non assigné) ── */
.beto-fallback-header .beto-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 16px;
}

.beto-fallback-header .beto-logo a {
    font-family: var(--beto-font-title);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--beto-text);
    text-decoration: none;
}

/* ── BETO PRO header CTA button ──
   Targets the Elementor header button via custom CSS class "beto-pro-btn"
   (must be set in Elementor > Widget Advanced > CSS Classes).
   Also targets any generic .elementor-button inside the site header
   whose text relates to PRO via the wrapper class.
   ─────────────────────────────────────────────────── */
.beto-pro-btn,
.elementor-location-header .beto-pro-btn,
.elementor-location-header .elementor-button.beto-pro-btn {
    background: var(--red, #ce1021);
    color: #fff;
    border: 2px solid var(--red, #ce1021);
    border-radius: 4px;
    font: 700 .8125rem/1 var(--sans, 'Barlow Semi Condensed', sans-serif);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 18px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.beto-pro-btn:hover,
.beto-pro-btn:focus-visible,
.elementor-location-header .beto-pro-btn:hover,
.elementor-location-header .beto-pro-btn:focus-visible {
    background: #fff;
    color: var(--red, #ce1021);
    border-color: var(--red, #ce1021);
    box-shadow: 0 2px 8px rgba(206, 16, 33, .2);
}

.beto-pro-btn:active,
.elementor-location-header .beto-pro-btn:active {
    background: var(--red-dk, #a80d1a);
    color: #fff;
    border-color: var(--red-dk, #a80d1a);
    box-shadow: none;
}