/* =======================================================
   NETTOYAGE ET RESET
   ======================================================= */

/* On s'assure que les images ne débordent jamais par défaut */
.reveal section img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
}

/* =======================================================
   LE LAYOUT MAGIQUE (.c50) - VERSION PIXELS FIXES
   ======================================================= */

/* Reveal.js a une hauteur par défaut de 700px.
   - Titre slide : environ 80-100px
   - Footer : environ 50px
   -> Il nous reste environ 500px à 550px de zone sûre.
*/

.reveal .grail-layout {
  display: flex;
  width: 100%;
  
  /* HAUTEUR FIXE : On verrouille la zone de contenu à 500px.
     Cela garantit qu'elle tient entre le titre et le footer 
     quel que soit le niveau de zoom de l'écran. */
  height: 500px; 
  max-height: 500px;
  
  margin-top: 10px; /* Petit espace sous le titre */
  align-items: stretch; /* Les colonnes font toute la hauteur */
  gap: 30px; /* Espace entre texte et image */
}

/* --- COLONNE GAUCHE (TEXTE) --- */
.reveal .grail-layout .scrolling-left {
  flex: 1; 
  
  /* On prépare le terrain pour le centrage */
  display: flex;
  flex-direction: column;
  
  /* Paramètres de Scroll et Hauteur */
  height: 100%;
  overflow-y: auto !important;
  
  /* Esthétique */
  padding-right: 15px;
  text-align: left;
  font-size: 0.9em;
}

/* MÉTHODE DU CENTRAGE SÉCURISÉ (Marge Auto) */
/* Au lieu d'utiliser des ressorts invisibles, on dit au 
   premier et au dernier élément du contenu : 
   "Poussez-vous l'un l'autre vers le centre" */

.reveal .grail-layout .scrolling-left > :first-child {
  margin-top: auto !important;
}

.reveal .grail-layout .scrolling-left > :last-child {
  margin-bottom: auto !important;
}



/* --- COLONNE DROITE (IMAGE) --- */
.reveal .grail-layout .fixed-right {
  flex: 1; /* Prend 50% de la largeur */
  
  /* Centre l'image parfaitement */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  height: 100%;
  overflow: hidden; /* Pas de scroll ici */
}

.reveal .grail-layout .fixed-right img {
  /* L'image ne doit pas dépasser la boîte de 500px */
  max-height: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: none; /* Retire les ombres par défaut de Reveal si besoin */
}

/* =======================================================
   RÈGLES UTILITAIRES CONSERVÉES (CREDITS & LUA)
   ======================================================= */

/* Crédits en bas de page */
.reveal .credits-two-cols ul {
  column-count: 2;
  font-size: 0.6em;
}

/* Scrollbar jolie et discrète (Firefox) */
.reveal .grail-layout .scrolling-left {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}
/* Scrollbar jolie (Chrome/Safari) */
.reveal .grail-layout .scrolling-left::-webkit-scrollbar {
  width: 8px;
}
.reveal .grail-layout .scrolling-left::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}