.elementor-3520 .elementor-element.elementor-element-33a79095:not(.elementor-motion-effects-element-type-background), .elementor-3520 .elementor-element.elementor-element-33a79095 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://tutorat-ttep.org/wp-content/uploads/2026/06/books-bookshelf-bookcase-library-study-literature-knowledge-learning-university-bookshelf-bookshelf-bookshelf-bookshelf-bookshelf-bookcase-bookcase-library-library-library-7284837.jpg");background-position:center center;background-repeat:no-repeat;background-size:120% auto;}.elementor-3520 .elementor-element.elementor-element-33a79095 > .elementor-background-overlay{background-color:#000000;opacity:0.4;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3520 .elementor-element.elementor-element-33a79095{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:230px 0px 190px 0px;}.elementor-3520 .elementor-element.elementor-element-537de1f{text-align:center;}.elementor-3520 .elementor-element.elementor-element-537de1f .elementor-heading-title{color:#ffffff;}.elementor-3520 .elementor-element.elementor-element-5c7d0b9{--divider-border-style:solid;--divider-color:#288A47;--divider-border-width:3px;}.elementor-3520 .elementor-element.elementor-element-5c7d0b9 .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-3520 .elementor-element.elementor-element-5c7d0b9 .elementor-divider{text-align:center;padding-top:15px;padding-bottom:15px;}.elementor-3520 .elementor-element.elementor-element-157f427{--divider-border-style:solid;--divider-color:#288A47;--divider-border-width:3px;}.elementor-3520 .elementor-element.elementor-element-157f427 .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-3520 .elementor-element.elementor-element-157f427 .elementor-divider{text-align:center;padding-top:15px;padding-bottom:15px;}.elementor-3520 .elementor-element.elementor-element-83876b4{--divider-border-style:solid;--divider-color:#288A47;--divider-border-width:3px;}.elementor-3520 .elementor-element.elementor-element-83876b4 .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-3520 .elementor-element.elementor-element-83876b4 .elementor-divider{text-align:center;padding-top:15px;padding-bottom:15px;}.elementor-3520 .elementor-element.elementor-element-814952c{--divider-border-style:solid;--divider-color:#288A47;--divider-border-width:3px;}.elementor-3520 .elementor-element.elementor-element-814952c .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-3520 .elementor-element.elementor-element-814952c .elementor-divider{text-align:center;padding-top:15px;padding-bottom:15px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-3520 .elementor-element.elementor-element-33a79095{padding:100px 0px 120px 0px;}}@media(max-width:767px){.elementor-3520 .elementor-element.elementor-element-33a79095{padding:85px 0px 75px 0px;}}/* Start custom CSS for html, class: .elementor-element-afa35f4 *//* ===================================
   STYLES DU CARROUSEL
   =================================== */

/* Conteneur principal : positionne les flèches par rapport à lui */
.carousel-container {
  position: relative;
  max-width: 700px;
  margin: 40px auto; /* centre le carrousel horizontalement */
  display: flex;
  align-items: center;
}

/* Conteneur qui masque le débordement des slides */
.carousel-track-container {
  overflow: hidden; /* cache les images qui dépassent */
  width: 100%;
}

/* La piste qui contient toutes les images côte à côte */
/* On la déplace horizontalement via transform:translateX() en JS */
.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out; /* animation fluide du glissement */
}

/* Chaque slide prend toute la largeur du conteneur */
.carousel-slide {
  min-width: 100%; /* IMPORTANT : une image = 100% de la largeur visible */
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  justify-content: center;
}

/* Image à l'intérieur du slide */
.carousel-img {
  width: 100%;
  max-width: 350px;    /* 👉 change ici la largeur max souhaitée */
  max-height: 500px;   /* 👉 change ici la hauteur max souhaitée */
  object-fit: contain;  /* recadre l'image pour remplir l'espace sans déformer */
  aspect-ratio: 9 / 16;  /* 👉 change ici le format (16/9, 1/1, etc.) */
  height: auto;
  border-radius: 8px;
  cursor: pointer; /* indique que l'image est cliquable */
  display: block;
  transition: transform 0.2s ease; /* petit effet zoom au survol */
}

.carousel-img:hover {
  transform: scale(1.02);
}

/* Boutons flèches gauche/droite (carrousel principal) */
.carousel-arrow {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0; /* empêche les flèches de rétrécir */
  transition: background 0.2s ease;
  display: flex;              /* active flexbox à l'intérieur du bouton */
  align-items: center;        /* centre verticalement */
  justify-content: center;    /* centre horizontalement */
  padding: 0;                 /* supprime le padding par défaut du <button> qui peut décaler le symbole */
  line-height: 1;             /* évite les espaces verticaux parasites liés au texte */
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.arrow-left {
  margin-right: 10px;
}

.arrow-right {
  margin-left: 10px;
}


/* ===================================
   STYLES DE LA POP-UP (LIGHTBOX)
   =================================== */

/* Overlay qui recouvre tout l'écran en fond noir semi-transparent */
.lightbox-overlay {
  display: none; /* caché par défaut, passé à "flex" en JS */
  position: fixed; /* reste fixe même si on scrolle */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999; /* passe au-dessus de tout le reste du site */
  justify-content: center;
  align-items: center;
}

/* Image affichée en grand dans la popup */
.lightbox-content {
  max-width: 90%;
  max-height: 85%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Bouton de fermeture (la croix) */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.lightbox-close:hover {
  color: #ccc;
}

/* NOUVEAU : Boutons flèches gauche/droite DANS la lightbox */
/* Positionnés en absolu par rapport à .lightbox-overlay (qui a position:fixed) */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* centre verticalement le bouton */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000; /* doit rester au-dessus de l'overlay (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.2s ease;
}

.lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-prev {
  left: 20px; /* collée au bord gauche de l'écran */
}

.lightbox-next {
  right: 20px; /* collée au bord droit de l'écran */
}

/* ===================================
   RESPONSIVE - Petits écrans (mobile)
   =================================== */
@media (max-width: 600px) {
  .carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  /* Flèches de la lightbox un peu plus petites et plus proches du bord sur mobile */
  .lightbox-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-834d033 *//* ===================================
   STYLES DU CARROUSEL
   =================================== */

/* Conteneur principal : positionne les flèches par rapport à lui */
.carousel-container {
  position: relative;
  max-width: 700px;
  margin: 40px auto; /* centre le carrousel horizontalement */
  display: flex;
  align-items: center;
}

/* Conteneur qui masque le débordement des slides */
.carousel-track-container {
  overflow: hidden; /* cache les images qui dépassent */
  width: 100%;
}

/* La piste qui contient toutes les images côte à côte */
/* On la déplace horizontalement via transform:translateX() en JS */
.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out; /* animation fluide du glissement */
}

/* Chaque slide prend toute la largeur du conteneur */
.carousel-slide {
  min-width: 100%; /* IMPORTANT : une image = 100% de la largeur visible */
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  justify-content: center;
}

/* Image à l'intérieur du slide */
.carousel-img {
  width: 100%;
  max-width: 350px;    /* 👉 change ici la largeur max souhaitée */
  max-height: 500px;   /* 👉 change ici la hauteur max souhaitée */
  object-fit: contain;  /* recadre l'image pour remplir l'espace sans déformer */
  aspect-ratio: 9 / 16;  /* 👉 change ici le format (16/9, 1/1, etc.) */
  height: auto;
  border-radius: 8px;
  cursor: pointer; /* indique que l'image est cliquable */
  display: block;
  transition: transform 0.2s ease; /* petit effet zoom au survol */
}

.carousel-img:hover {
  transform: scale(1.02);
}

/* Boutons flèches gauche/droite (carrousel principal) */
.carousel-arrow {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0; /* empêche les flèches de rétrécir */
  transition: background 0.2s ease;
  display: flex;              /* active flexbox à l'intérieur du bouton */
  align-items: center;        /* centre verticalement */
  justify-content: center;    /* centre horizontalement */
  padding: 0;                 /* supprime le padding par défaut du <button> qui peut décaler le symbole */
  line-height: 1;             /* évite les espaces verticaux parasites liés au texte */
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.arrow-left {
  margin-right: 10px;
}

.arrow-right {
  margin-left: 10px;
}


/* ===================================
   STYLES DE LA POP-UP (LIGHTBOX)
   =================================== */

/* Overlay qui recouvre tout l'écran en fond noir semi-transparent */
.lightbox-overlay {
  display: none; /* caché par défaut, passé à "flex" en JS */
  position: fixed; /* reste fixe même si on scrolle */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999; /* passe au-dessus de tout le reste du site */
  justify-content: center;
  align-items: center;
}

/* Image affichée en grand dans la popup */
.lightbox-content {
  max-width: 90%;
  max-height: 85%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Bouton de fermeture (la croix) */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.lightbox-close:hover {
  color: #ccc;
}

/* NOUVEAU : Boutons flèches gauche/droite DANS la lightbox */
/* Positionnés en absolu par rapport à .lightbox-overlay (qui a position:fixed) */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* centre verticalement le bouton */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000; /* doit rester au-dessus de l'overlay (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.2s ease;
}

.lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-prev {
  left: 20px; /* collée au bord gauche de l'écran */
}

.lightbox-next {
  right: 20px; /* collée au bord droit de l'écran */
}

/* ===================================
   RESPONSIVE - Petits écrans (mobile)
   =================================== */
@media (max-width: 600px) {
  .carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  /* Flèches de la lightbox un peu plus petites et plus proches du bord sur mobile */
  .lightbox-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fee50e8 *//* ===================================
   STYLES DU CARROUSEL VIDÉO
   ===================================
   Ce fichier est le pendant "vidéo" de CSS Carroussel image finale.txt.
   Il reprend EXACTEMENT la même logique visuelle (piste qui glisse,
   flèches rondes, popup plein écran) mais avec des noms de classes
   différents (préfixe "video-"), pour deux raisons :

   1. Ce bloc doit pouvoir être collé sur la même page qu'un carrousel
      d'images SANS que les styles se marchent dessus.
   2. Ce fichier est autonome : tu peux le coller sur une page qui n'a
      jamais eu de carrousel d'images, il fonctionnera seul.
   =================================== */

/* Conteneur principal : positionne les flèches par rapport à lui */
.video-carousel-container {
  position: relative;
  max-width: 700px;
  margin: 40px auto; /* centre le carrousel horizontalement */
  display: flex;
  align-items: center;
}

/* Conteneur qui masque le débordement des slides */
.video-carousel-track-container {
  overflow: hidden; /* cache les vidéos qui dépassent */
  width: 100%;
}

/* La piste qui contient toutes les vidéos côte à côte */
/* On la déplace horizontalement via transform:translateX() en JS */
.video-carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out; /* animation fluide du glissement */
}

/* Chaque slide prend toute la largeur du conteneur */
/* flex-direction:column => empile la vidéo (+ icône) au-dessus, et la
   légende (nom de l'intervenant) juste en dessous */
.video-carousel-slide {
  min-width: 100%; /* IMPORTANT : une vidéo = 100% de la largeur visible */
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Regroupe la vidéo-vignette + l'icône ▶ */
/* position:relative est nécessaire pour pouvoir centrer l'icône ▶
   par-dessus la vidéo grâce à position:absolute (voir plus bas) */
.video-carousel-media {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Vidéo miniature à l'intérieur du slide (sert de "vignette") */
/* On utilise ici la balise <video> avec l'attribut poster="..." plutôt
   qu'une <img> : le navigateur affiche l'image poster tant que la vidéo
   n'a pas été lancée, exactement comme une vignette classique. */
.video-carousel-thumb {
  width: 100%;
  max-width: 350px;    /* 👉 change ici la largeur max souhaitée */
  max-height: 500px;   /* 👉 change ici la hauteur max souhaitée */
  object-fit: cover;    /* remplit le cadre sans déformer (recadre si besoin) */
  aspect-ratio: 16 / 9;  /* 👉 change ici le format (9/16 pour du vertical, 1/1, etc.) */
  height: auto;
  border-radius: 8px;
  cursor: pointer; /* indique que la vidéo est cliquable */
  display: block;
  background: #000; /* évite un flash blanc pendant le chargement du poster */
  transition: transform 0.2s ease; /* petit effet zoom au survol */
}

.video-carousel-thumb:hover {
  transform: scale(1.02);
}

/* Icône "lecture" (triangle ▶) centrée par-dessus la vignette */
/* pointer-events:none => les clics traversent l'icône et arrivent
   directement sur la vidéo en dessous : pas besoin de dupliquer le
   gestionnaire de clic sur l'icône elle-même. */
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px; /* recentre visuellement le triangle ▶ qui n'est pas symétrique */
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.video-carousel-media:hover .video-play-icon {
  background: rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Légende sous la vignette (ex: nom et sujet de l'intervenant) */
.video-carousel-caption {
  margin: 8px 0 0;
  max-width: 350px; /* 👉 aligne avec le max-width de .video-carousel-thumb */
  text-align: center;
  font-size: 0.95rem;
  color: #333; /* 👉 change ici la couleur du texte si besoin */
}

/* Si la légende est laissée vide (widget copié sans texte renseigné),
   on n'affiche pas un espace vide inutile sous la vignette */
.video-carousel-caption:empty {
  display: none;
}

/* Boutons flèches gauche/droite (carrousel principal) */
.video-carousel-arrow {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0; /* empêche les flèches de rétrécir */
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.video-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.video-arrow-left {
  margin-right: 10px;
}

.video-arrow-right {
  margin-left: 10px;
}


/* ===================================
   STYLES DE LA POP-UP (LECTEUR VIDÉO)
   =================================== */

/* Overlay qui recouvre tout l'écran en fond noir semi-transparent */
.video-lightbox-overlay {
  display: none; /* caché par défaut, passé à "flex" en JS */
  position: fixed; /* reste fixe même si on scrolle */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999; /* passe au-dessus de tout le reste du site */
  justify-content: center;
  align-items: center;
}

/* Regroupe la vidéo agrandie + sa légende, centré dans l'overlay */
.video-lightbox-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  max-height: 90%;
}

/* Vidéo affichée en grand dans la popup */
/* controls (posé en HTML) donne play/pause/volume/plein écran natifs */
.video-lightbox-content {
  max-width: 100%;
  max-height: 78vh; /* laisse de la place à la légende en dessous */
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Légende sous la vidéo agrandie (reprend le texte de la vignette) */
.video-lightbox-caption {
  margin: 14px 0 0;
  color: white;
  text-align: center;
  font-size: 1.05rem;
  max-width: 100%;
}

.video-lightbox-caption:empty {
  display: none;
}

/* Bouton de fermeture (la croix) */
.video-lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.video-lightbox-close:hover {
  color: #ccc;
}

/* Boutons flèches gauche/droite DANS la popup vidéo */
.video-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* centre verticalement le bouton */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000; /* doit rester au-dessus de l'overlay (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.2s ease;
}

.video-lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.video-lightbox-prev {
  left: 20px; /* collée au bord gauche de l'écran */
}

.video-lightbox-next {
  right: 20px; /* collée au bord droit de l'écran */
}

/* ===================================
   RESPONSIVE - Petits écrans (mobile)
   =================================== */
@media (max-width: 600px) {
  .video-carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  .video-play-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  /* Flèches de la popup un peu plus petites et plus proches du bord sur mobile */
  .video-lightbox-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }

  .video-lightbox-prev {
    left: 10px;
  }

  .video-lightbox-next {
    right: 10px;
  }
}/* End custom CSS */