/*
Theme Name: MegaBulle
Theme URI: https://github.com/eric/megabulle
Description: Thème WordPress ultra-moderne – Ajax + History + Bulles cosmiques – par Éric
Author: Éric
Author URI: https://eric.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: megabulle
Tags: one-column, custom-header, custom-logo, editor-style, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==================================================================
   RESET ULTIME – TOUT À ZÉRO – COMME UN VRAI PRO
   ================================================================== */

/* ==================================================================
   CORRECTION ÉDITEUR GUTENBERG — ON NE TOUCHE PAS À L'ÉDITEUR
   ================================================================== */
.block-editor-page .main-content,
.editor-styles-wrapper .main-content,
.block-editor-block-list__layout {
    all: revert !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    display: block !important;
    min-height: auto !important;
}

.block-editor-page body {
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
    min-height: auto !important;
    padding: 20px !important;
    font-size: 16px !important;
}




@font-face {
    font-family: 'Skywater';
    src: url('fonts/skywater-webfont.woff2') format('woff2'),
         url('fonts/skywater-webfont.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html,body {
         /* ou scroll */
    -ms-overflow-style: none;   /* IE / Edge */
    scrollbar-width: none;      /* Firefox */
}

body::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / Opera / Edge Chromium */
}
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
html {
    height: 100%;
    margin: 0;
}
/* Bonus : supprime aussi le padding que certains navigateurs ajoutent en mode clair */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Force le duotone même si l’attribut style a été perdu */



/* .wp-duotone-purple-green img {filter: url(#wp-duotone-purple-green);} */


body:not(.block-editor-page) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
  font-size: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
      min-height: 100vh;
  justify-content: center; /* Centre horizontalement */
  align-items: center;    /* Centre verticalement */
/*    min-height: 100vh!important; /* ← force la hauteur minimum = hauteur de la fenêtre */

}



.themeBg, .themeBgBefore {
    position: fixed;
    left: -.6vw;
    top: -.6vh;
    width: 101.2vw;
    height: 101.2vh;
    animation: ultraSubtilWobble 30s ease-in-out infinite;
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity:1;
}

.themeBg {transition: opacity 2s ;}

.themeBg.fading {opacity: 0!important;}

/* Ton wobble – inchangé */
@keyframes ultraSubtilWobble {
    0%, 100% {
        transform: perspective(1200px) 
                   rotateX(0.3deg) 
                   rotateY(-0.6deg) 
                   translate(0.3vw, 0.4vh);
    }
    25% {
        transform: perspective(1200px) 
                   rotateX(-0.2deg) 
                   rotateY(0.8deg) 
                   translate(-0.4vw, -0.6vh);
    }
    50% {
        transform: perspective(1200px) 
                   rotateX(0.6deg) 
                   rotateY(-0.5deg) 
                   translate(0.1vw, 0.4vh);
    }
    75% {
        transform: perspective(1200px) 
                   rotateX(-0.3deg) 
                   rotateY(0.3deg) 
                   translate(-0.2vw, 0.6vh);
    }
}





[id*="megabullemenu"] .body-clone {
        opacity:.8!important;
    /*    background:#00000011; */
mix-blend-mode: soft-light;
}
[id*="megabullemenu"] {
         z-index:60000!important;
}


.body-clone {
  position: absolute;
  z-index:1;
  left: 0px;
  top: 0px;
  filter:blur(0.4px);
    min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre horizontalement */
  align-items: center;    /* Centre verticalement */
  opacity:.8!important;
}
.main-content::after {
    display: block;
    position: relative;
    content: "";
    top: 28px;
    left: -39px;
    height: calc(2 * var(--mgb-size) / 12);
    width: calc(2 * var(--mgb-size) / 5);
    background: radial-gradient(#fffffffe 3%, #ffffff88 25%,#ffffff22 40%,#ffffff11 55%, #ffffff01 80%, transparent);
    border-radius: 50%;
    z-index: +1;
    transform: rotate(35deg);
    opacity: 65%;
}

.main-content::before {
    display: block;
    position: absolute;
    content: "";
    /* width: 100%; */
    bottom: 12px;
    right: 0%;
    height: calc(2 * var(--mgb-size) / 12);
    width: calc(2 * var(--mgb-size) / 5);
    background: radial-gradient(var(--megabulle_color_light_1_transp) 3%, var(--megabulle_color_light_2_transp) 25%,#ffffff22 40%,#ffffff11 55%, #ffffff01 80%, transparent);
    border-radius: 50%;
    z-index: +1;
    transform: rotate(-35deg);
    opacity: 65%;
}

.main-content {
    padding: 40px;
    width: 80vw;
    background: radial-gradient(
        ellipse closest-side, 
        var(--megabulle_color_dark_2_transp) 55%, 
        var(--megabulle_color_dark_1_transp) 70%,
        transparent     100%
    );
    background-size: 170% 300%;
    background-position: center;
    border-radius: 70px;
    filter: drop-shadow(-4px -4px 16px rgba(0, 0, 0, 0.5));
    animation: feuilleCalme 28s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(Calc(var(--bulle-scale) * -10px) Calc(var(--bulle-scale) * 10px) 3px rgba(2, 2, 4, 0.15));
}

@keyframes feuilleCalme {
    0%, 100% {
        transform: perspective(1200px) rotateX(0.75deg) rotateY(-0.5deg) translateY(0px);
    }
    25% {
        transform: perspective(1200px) rotateX(-0.375deg) rotateY(0.625deg) translateY(-0.625px);
    }
    50% {
        transform: perspective(1200px) rotateX(0.5deg) rotateY(-0.375deg) translateY(0.375px);
    }
    75% {
        transform: perspective(1200px) rotateX(-0.625deg) rotateY(0.5deg) translateY(-0.375px);
    }
}
#page, .page{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Optionnel : ton footer */
#footer, .cloneFooter {
    flex-shrink: 0; /* empêche qu’il se réduise */

}

#header, .cloneHeader {
    flex-shrink: 0; /* empêche qu’il se réduise */
    display: block;
    height: 100px;
}


hr{width:100%;}


html, body {
    scroll-behavior: smooth;
    color: var(--color-body-text);
    background: var(--color-body-bg);

}

html.dark-mode { filter: invert(1) hue-rotate(180deg); background:var(--color-body-bg-dark); }
html.dark-mode img, html.dark-mode video { filter: invert(1) hue-rotate(180deg); }
/* Ré-inverse les bulles pour qu'elles restent normales */
html.dark-mode .megabulle .la-bulle {
    filter: invert(1) hue-rotate(180deg);

}



.bulle-centered-text font {
    vertical-align: middle;
    display: inline-block;
    font-family: 'Skywater';
    font-weight: 600;
    /* 1. Anti-crénelage maximal */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; /* Safari/Firefox futur */

    /* 2. Rendu haute qualité */
    text-rendering: optimizeLegibility;

    /* 3. Force le rendu GPU (très efficace avec transform) */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    text-shadow: 0 .5px .5px rgba(255, 255, 255, 0.4);
}

.bulle-centered-text {
    position: absolute;
    z-index:2;
    height: var(--mgb-size);
    width: var(--mgb-size);
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; 
    background: var(--megabulle-background);  
    transform-origin: center ;
    transform:scale(1.4, 1.5);

    pointer-events: none;
  }

.megabulle {
  position: fixed;
  height: 1px;
  width: 1px;
  /*   background: var(--megabulle-background);   */
  background: transparent;
  background-size: contain;
  filter: drop-shadow( Calc(var(--bulle-scale) * -50px) Calc(var(--bulle-scale) * 50px) 3px  rgba(2, 2, 4, 0.15));


}

.clone-div{
  position: fixed;
  padding: 0;
  margin: 0;
  height: var(--mgb-size);
  width: var(--mgb-size);
  border: none!important;
/*  background: var(--color-body-bg)!important; */
  overflow: hidden;
  border-radius: 50%;
  transform-origin: center ;
  cursor:pointer;
  filter: drop-shadow(-2px -2px 10px rgba(0, 0, 0, 0.5));
}

.la-bulle {
  position: fixed;
  padding: 0;
  margin: 0;
  height: var(--mgb-size);
  width: var(--mgb-size);
  border: solid 1px rgba(0, 0, 0, 0.1);
  background: radial-gradient(#f5fcfc00 45%, gray);
  overflow: hidden;
  border-radius: 50%;
  transform-origin: center ;
  pointer-events: none;

}
.la-bulle::after {
  display: block;
  position: relative;
  content: "";
  top: calc( var(--mgb-size) / 20);
  left: calc(3 * var(--mgb-size) / 5.6);
  height: calc(2 * var(--mgb-size) / 12);
  width: calc(2 * var(--mgb-size) / 5);
  background: radial-gradient(#fffffffe 3%, #ffffff88 25%,#ffffff22 40%,#ffffff11 55%, #ffffff01 80%, transparent);
  border-radius: 50%;
  z-index: 10;
  transform: rotate(35deg);
  opacity: 65%;
      
}

/* VIDÉO EN PLEIN ÉCRAN – FONCTIONNE AVEC WP-CUSTOM-HEADER */
.wp-custom-header {
    position: fixed;
    top: -5vh;
    left: -5vw;
    width: 110vw;
    height: 110vh;
  
    overflow: hidden;
    pointer-events: none;
}


.wp-custom-header .iframe-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: none;
   /*   filter:blur(1.3px); */
}

/* BOUTON PLAY/PAUSE – DISCRET ET STYLÉ */
#wp-custom-header-video-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 20px;
    cursor: pointer !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wp-custom-header-video-button:hover {
    background: rgba(0,0,0,0.9);
    transform: scale(1.1);
}

/* Icônes Play / Pause */
.wp-custom-header-video-play::before   { content: "▶"; }
.wp-custom-header-video-pause::before  { content: "⏸"; }





/* Chaque bulle a ses propres variables → tout est aléatoire */
.megabulle-fixe {
    --wobble-x: calc(var(--rand-x, 0.5) * 30px);     /* amplitude horizontale aléatoire */
    --wobble-y: calc(var(--rand-y, 0.5) * 30px);     /* amplitude verticale aléatoire */
    --wobble-rot: calc(var(--rand-rot, 0.5) * 15deg); /* rotation aléatoire */
}

.megabulle-fixe {
    animation: flotteWobble calc(18s + var(--rand-duration, 0s)) ease-in-out infinite;
    animation-delay: var(--rand-delay, 0s); /* ← délai avant de commencer */
}

@keyframes flotteWobble {
    0%, 100% {
        transform: 
            translateX(-50%) 
            translateX(calc(-1 * var(--wobble-x))) 
            translateY(calc(-1 * var(--wobble-y))) 
            scale(var(--bulle-scale))
            rotate(calc(-1 * var(--wobble-rot)));
    }
    25% {
        transform: 
            translateX(-50%) 
            translateX(var(--wobble-x)) 
            translateY(calc(-0.5 * var(--wobble-y))) 
            scale(var(--bulle-scale))
            rotate(var(--wobble-rot));
    }
    50% {
        transform: 
            translateX(-50%) 
            translateX(0px) 
            translateY(var(--wobble-y)) 
            scale(var(--bulle-scale))
            rotate(0deg);
    }
    75% {
        transform: 
            translateX(-50%) 
            translateX(calc(-0.7 * var(--wobble-x))) 
            translateY(calc(0.3 * var(--wobble-y))) 
            scale(var(--bulle-scale))
            rotate(calc(0.8 * var(--wobble-rot)));
    }
}

.bulle-fixe font,.bulle-flottante font, .bulle-logo font { 
    transition: color 2s ease, text-shadow 2s ease !important;
}
.bulle-fixe   font {    color:var(--megabulle-bulles-fixes-color);}
.bulle-flottante   font {    color:var(--megabulle-bulles-flottantes-color);}
.bulle-logo  font {    color:var(--megabulle-bulles-logo-color);}

.apparition-grandissement {
    opacity: 0; 
    transform: scale(0.1); /* 1/3 de la taille */
    transform-origin:  calc(var(--mgb-size, 200px) / 2) calc(var(--mgb-size, 200px) / 2); /* grandit depuis le centre */
    animation: grandirApparaitre .4s ease-out forwards;
    animation-delay: var(--apparition-grandissement); 

}

/* L’animation entrée bulle */
@keyframes grandirApparaitre {
    to {
        opacity: 1;
        transform: scale(1); 
    }
}

.animation-wobble{

  animation: wobble var(--wobble-duration, 4s) ease-in-out infinite;
  animation-delay: var(--apparition-wobble);
}

/* Petit wobble pour plus de réalisme */
@keyframes wobble {
    0%, 100% { 
        transform: rotate(var(--wobble-start, 0deg)) scale(var(--bulle-scale));
    }
    25% { 
        transform: rotate(var(--wobble-peak-left, -5deg)) scale(var(--bulle-scale));
    }
    75% { 
        transform: rotate(var(--wobble-peak-right, 5deg)) scale(var(--bulle-scale));
    }
}

.oval-image {
    width: 24vw;
    height: 24vh;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
  }
  .oval-image:hover {
    transform: scale(1.05);
  }

  :root {

    /* ==================== SETUP MEGABULLE ==================== */
    --apparition-grandissement : 1s;
    --apparition-wobble  : 5s;
    --mgb-scale: 1;
    --mgb-size: 200px;
    --scrollbar-width: 36px;
    --megabulle-background:rgba(0, 0, 0, 0); /* rgba(0, 0, 0, 0) = transparent */
    --megabulle-font-color:rgba(37, 18, 124, 1);
    --bulle-scale: 1;

    /* ==================== COULEURS PRINCIPALES ==================== */
    --wp--preset--color--primary: #2271b1;      /* Bleu WordPress classique */
    --wp--preset--color--secondary: #135e96;
    --wp--preset--color--accent: #00a0d2;
    --wp--preset--color--success: #46b450-50;
    --wp--preset--color--warning: #ffb900;
    --wp--preset--color--danger: #d63638;
    --wp--preset--color--light: #f1f1f1;
    --wp--preset--color--dark: #06081d;
    --wp--preset--color--white: #ffffff;

    /* Fond et texte */
    --color-body-bg: #ffffff;
    --color-body-text: #333333;
    --color-heading: #1a1a1a;
    --color-link: #2271b1;
    --color-link-hover: #135e96;

    /* ==================== DARK MODE (facultatif mais génial) ==================== */
    --color-body-bg-dark: #1a1a1a;
    
    --color-body-bg-dark-transparent: #000000a9;
    
    --color-body-text-dark: #e0e0e0;
    --color-heading-dark: #ffffff;

    /* ==================== TYPOGRAPHIE ==================== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    --font-size-base: 16px;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    --font-size-5xl: 3rem;     /* 48px */

    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* ==================== ESPACEMENTS (systeme 8pt) ==================== */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem;  /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem;    /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem;  /* 24px */
    --spacing-8: 2rem;    /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem;   /* 48px */
    --spacing-16: 4rem;   /* 64px */
    --spacing-20: 5rem;   /* 80px */

    /* Container max-width */
    --container-width: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;

    /* ==================== RADIUS & SHADOWS ==================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);

    /* ==================== TRANSITIONS ==================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;

    /* ==================== Z-INDEX ==================== */
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
    --z-megabubble: 9999;
}

/* Dark mode automatique si l’utilisateur préfère le dark */
@media (prefers-color-scheme: dark) {
    :root {
        --color-body-bg: var(--color-body-bg-dark);
        --color-body-text: var(--color-body-text-dark);
        --color-heading: var(--color-heading-dark);
    }
}