/* ==========================================================================
   FICHIER INTEGRAL STABILISÉ : SPECTACLE O'PRESSION
   Architecture : Mobile-First / Sans Cadres / Sans Filtres / Ancrages Fixes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STRUCTURE GLOBALE & ISOLEMENT (Nettoyage des cadres de texte)
   -------------------------------------------------------------------------- */
.section-spectacle {
  position: relative;
  overflow: hidden; /* Empêche les bulles de créer un scroll horizontal */
}

/* Suppression complète et forcée des bordures autour du texte */
.page-container {
  position: relative;
  width: 100%;
  margin: 20px auto;
  padding: 0; 
  /*border: none !important;
  box-shadow: none !important;
  background: transparent !important;*/
}

.opression-wrapper {
  position: relative;
  z-index: 5; /* Force le texte à passer AU-DESSUS des illustrations */
  padding: 0;
  margin:0 2vw;
  /*border: none !important;
  box-shadow: none !important;
  background: transparent !important;*/
}

/* --- Styles des contenus internes --- */

.opression-corps h3 {
  font-variant-caps: all-petite-caps;
  margin-top: var(--space-m);
  color: #382b4c;
}

.opression-formats { 
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column; 
  gap: var(--space-s); 
  margin: var(--space-s) 0; 
  position: relative;
  z-index: 6; 
}

.format-bloc { 
  background: rgba(255, 255, 255, 0.9); 
  padding: var(--space-s); 
  border-radius: 0.5rem; 
  border: 1px solid rgba(56, 43, 76, 0.15); 
}

.opression-tarifs { 
  font-weight: bold; 
  margin-top: var(--space-m); 
  text-align: center; 
  position: relative;
  z-index: 6; 
}

/* --------------------------------------------------------------------------
   2. CONFIGURATION DE BASE DES BULLES (100% Nettes, Sans Bordures ni Ombres)
   -------------------------------------------------------------------------- */
.page-container img.bulle-fond {
  display: block !important;
  visibility: visible !important;
  position: absolute !important; /* Positionnement absolu pour les bulles 1, 2 et 3 */
  border-radius: 50% !important;
  object-fit: cover !important;
  z-index: 1 !important;         /* Se glisse derrière le texte principal */
  pointer-events: none;
  
  /* Retrait total des filtres (Netteté d'origine complète) */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  
  /* ❌ NETTOYAGE : Suppression du cadre blanc et de l'ombre */
  border: none !important; 
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   3. RÉPARTITION DES TAILLES ET POSITIONS STABLES (ANCRAGE PAR LE HAUT)
   -------------------------------------------------------------------------- */

/* --- 📱 SMARTPHONES (Portrait de base) --- */

/* Bulle 1 */
.b-haut-gauche {
  width: 120px !important;
  height: 120px !important;
  top: -15px !important;       
  left: -20px !important;      
}

/* Bulle 2 : La plus grosse */
.b-milieu-droite {
  width: 140px !important;
  height: 140px !important;
  top: 90px !important;        
  right: 15px !important;      
}

/* Bulle 3 : Petite et fixe */
.b-objectifs-gauche {
  width: 90px !important;
  height: 90px !important;
  top: 360px !important;       
  left: 45px !important;       
}

/* --- 📱 SMARTPHONES (Paysage) --- */
@media screen and (min-width: 481px) and (max-width: 900px) and (orientation: landscape),
       screen and (max-width: 800px) and (max-height: 392px) and (orientation: landscape) {
  
  .b-haut-gauche { width: 110px !important; height: 110px !important; top: -10px !important; left: -15px !important; }
  .b-milieu-droite { width: 130px !important; height: 130px !important; top: 85px !important; right: 25px !important; }
  .b-objectifs-gauche { width: 85px !important; height: 85px !important; top: 320px !important; left: 50px !important; }
}

/* --- 📐 TABLETTES (Portrait) --- */
@media screen and (min-width: 768px),
       screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait),
       screen and (min-width: 1112px) and (max-width: 1504px) and (orientation: portrait) {
  
  .opression-formats { flex-direction: row; gap: var(--space-m); }
  
  .b-haut-gauche { width: 180px !important; height: 180px !important; top: -20px !important; left: -30px !important; }
  .b-milieu-droite { width: 220px !important; height: 220px !important; top: 140px !important; right: 40px !important; }
  .b-objectifs-gauche { width: 140px !important; height: 140px !important; top: 480px !important; left: 80px !important; }
}

/* --- 💻 ORDINATEURS & ECRANS LARGES (PC Desktop) --- */
@media screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: portrait),
       screen and (min-width: 1201px) and (orientation: landscape),
       screen and (min-width: 1920px) {
       
  .opression-formats { flex-direction: row; gap: var(--space-m); }
  
  .b-haut-gauche {
    width: 250px !important;
    height: 250px !important;
    top: -20px !important;
    left: 0px !important;
  }
  
  .b-milieu-droite {
    width: 310px !important;
    height: 310px !important;
    top: 90px !important;     
    right: 180px !important;    
  }
  
  .b-objectifs-gauche {
    width: 180px !important;
    height: 180px !important;
    top: 260px !important;     
    left: 240px !important;    
  }
}


/* --------------------------------------------------------------------------
   4. ANCRAGE DE LA BULLE FINALE (BULLE 4 EN FLUX RELATIF - SANS CADRE NI OMBRE)
   --------------------------------------------------------------------------
.bloc-bulle-finale {
  position: relative;
  width: 100%;
  height: 80px;         
  overflow: hidden;     
  margin-top: 20px;     
}*/

.page-container img.bulle-bas-centre {
  display: block !important;
  visibility: visible !important;
  position: relative !important; /* Reste ancrée sous le texte */
  border-radius: 50% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none;
  
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  
  /* ❌ NETTOYAGE : Suppression du cadre blanc et de l'ombre */
  border: none !important;
  box-shadow: none !important;

  width: 200px !important;
  height: 200px !important;
  margin: 0 auto !important; 
  top: 0 !important;         
}

@media screen and (min-width: 768px) {
  .bloc-bulle-finale { height: 100px; margin-top: 25px; }
  .page-container img.bulle-bas-centre { width: 300px !important; height: 300px !important; }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: portrait),
       screen and (min-width: 1201px) and (orientation: landscape),
       screen and (min-width: 1920px) {
  
  .bloc-bulle-finale { height: 120px; margin-top: 30px; }
  .page-container img.bulle-bas-centre { width: 440px !important; height: 440px !important; }
}