/*
Theme Name: Global News
Theme URI: https://example.com/global-news
Author: Éric
Author URI: https://example.com
Description: Thème news moderne avec navigation AJAX et chargement dynamique du contenu dans une seule page.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: global-news
Tags: news, blog, ajax, one-page
*/

:root {
    --gbn-primary: #0d6efd;
    --gbn-secondary: #6c757d;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
}


.gbn_container {
    position:relative;
    z-index:1;
    max-width: var(--gbn-max-width);
    margin: 0 auto;
    padding: 15px 10px;

}

.gbn_header_inner{
    position:relative;
    top:-10px;
    backdrop-filter:blur(12px);
    background:var(--gbn_color_dark_3_transp);
 /*   filter: drop-shadow(0px 10px 5px var(--gbn_color_dark_2_transp)); */
    padding: 0!important;
    margin: 0!important;
/*    box-shadow: 0px 40px 40px 10px var(--gbn_color_dark_1); */
    box-shadow: 0px 40px 40px 10px #000000aa;
    overflow:hidden;

}


.main-content {
    position:relative;
    z-index:1;
    min-height: 70vh;
    padding: 40px 0;
    max-width: var(--gbn-max-width-main);
}

/* Classes utilitaires préfixées */
.gbn_btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--gbn_color_dark_1);
    color: var(--gbn_color_light_3);
    text-decoration: none;
    border-radius: 4px;
}
.gbn_btn:hover {
    opacity: 0.9;
}

.gbn_duotone-logo{

    padding: 0!important;
    margin: 0!important;
    margin-bottom: -10px !important;
}

/* Transition douce pour les filtres SVG (duotone) */
.gbn_duotone img,
.gbn_duotone-logo img,
.gbn_postImg {                  /* ou toute autre classe d'image duotone */
    transition: filter 3s ease-in-out;
    /* Optionnel : pour un effet encore plus fluide sur les navigateurs récents */
    will-change: filter;
}

/* --------------------------------------------------------------
   Backgrounds globaux (directement dans #page)
   → animation + transform → GPU
   -------------------------------------------------------------- */
.themeBgBefore,
.themeBg {
    /****** !! GPU USAGE !! ******/
  /*  animation: ultraSubtilWobbleTheme 30s ease-in-out infinite; */
}

/* --------------------------------------------------------------
   @keyframes ultraSubtilWobbleTheme
   → transform + perspective → GPU
   -------------------------------------------------------------- */
@keyframes ultraSubtilWobbleTheme {
    0%, 100% { /****** !! GPU USAGE !! ******/ transform: perspective(1200px) rotateX(0.3deg) rotateY(-0.6deg) translate(0.3vw, 0.4vh); }
    25%      { /****** !! GPU USAGE !! ******/ transform: perspective(1200px) rotateX(-0.2deg) rotateY(0.8deg) translate(-0.4vw, -0.6vh); }
    50%      { /****** !! GPU USAGE !! ******/ transform: perspective(1200px) rotateX(0.6deg) rotateY(-0.5deg) translate(0.1vw, 0.4vh); }
    75%      { /****** !! GPU USAGE !! ******/ transform: perspective(1200px) rotateX(-0.3deg) rotateY(0.3deg) translate(-0.2vw, 0.6vh); }
}

/* --------------------------------------------------------------
   Backgrounds globaux (position, taille, etc.)
   → opacity + transition → GPU
   -------------------------------------------------------------- */
.themeBg,
.themeBgBefore {
    position: fixed;
    left: -1.5vw;
    top: -1.5vh;
    width: 103vw;
    height: 103vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 1;
    --gbn-bg-scale: 1;
}
.themeBg {
    /****** !! GPU USAGE !! ******/
    transition: opacity 2s;
}
.themeBg.fading { opacity: 0!important; }


a       {color: var(--gbn_color_menu1);text-decoration: none;}
a:active{color: var(--gbn_color_menu1);text-decoration: none;}
a:hover {color: var(--gbn_color_menu3);text-decoration: none;}

h1,
h2 { color: var(--gbn_color_light_1); }
h3,
h4,
h5,
h6,
h7 { color: var(--gbn_color_light_1); }
p { color: var(--gbn_color_light_3); }



:root {
    /* Taille de référence : 1920×1080 (Full HD) */
    --ref-size: 1920;
    /* Facteur d'échelle global — mis à jour par JS */
    --font-scale-factor: 1;
    /* Toutes les tailles de police sont maintenant relatives à ce facteur */
    font-size: calc(18px * var(--font-scale-factor));
}

/* Toutes les polices du site utilisent maintenant cette échelle */
html, body {
    font-size: calc(18px * var(--font-scale-factor));
}



h1 { font-size: calc(36px * var(--font-scale-factor))!important; }
h2 { font-size: calc(24px * var(--font-scale-factor))!important; }
h3 { font-size: calc(22px * var(--font-scale-factor))!important; }
h4 { font-size: calc(20px * var(--font-scale-factor))!important; }