xmp {margin: 0;}

.tabfichiers {
        border: 3px solid #666666;
        text-align: center;
        width: 100%; height: 100px;
		max-width: 1170px;
    }
    .tabfichiers td {
        padding: 0px;
        vertical-align: middle;
      /*  border: 1px solid rgb(221, 221, 221);*/
    }
    .tabfichiers img {
        width: 78px;
        cursor: pointer;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
/*----------------*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
/*padding-top: 25px;*/
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#TheEditeur {
cursor: url('cursor2.png') 0 10, auto;
}

.legend {
color: #000;
margin-top: 4px;
margin-bottom: 10px;
font-weight: bold;
font-size: 17px;
/*text-align: center;*/
}
h7{
	/*background: red;*/
}
.accord {
display: flex;
overflow: hidden;
}
.col {
flex-shrink: 0;  /* Empêche les éléments .col de réduire leur largeur */	
}
/*  AJOUT spaceX ===========================================================================*/

.spaceX {
clear: both;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
border: 0;
outline: 0;
font-size: 100%;
box-sizing: border-box;
position: relative;
max-width: 1200px;
min-height:40px;
}

.modeflex {display: flex;
flex-wrap: wrap;
} 

.vertigo {
display: flex;
align-items: center;
}

/*---------------------------- ACCORDIONS--*/

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.1em;
  border-bottom: 1px solid #c5c5c5;
}

.active, .accordion:hover {
 /* background-color: #ccc;*/
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
  .panp {
  Padding-top:8px; font-family: arial; color: #5c5a5a; hyphens:none; text-align: justify;
}

/* Diaporama image unique */
        .diaporama_unique {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .slidex {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: left 0.6s ease-in-out;
            z-index: 0;
        }
        .controls {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3; display: none;
        }
        .controls button {
            margin: 0 5px;
        }
/*    image unique côté TheEditeur */

#TheEditeur .diapo1 img {
	width:80px !important; height:auto !important;
}
#TheEditeur .diapo1 .nodrop {
	display:none !important;
}
/* ==========================================
   LAZY LOADING YOUTUBE - SOLUTION SIMPLE
   À ajouter dans votre fichier CSS principal
   ========================================== */

/* Lazy loading pour toutes les iframes YouTube */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    loading: lazy;
}

/* Amélioration bonus : Optimisation générale des iframes */
iframe {
    loading: lazy;
    /* Améliore la performance pour toutes les iframes */
}

/* Bonus : Lazy loading pour toutes les images */
img {
    loading: lazy;
}

/* Exception pour les images critiques (logo, hero, etc.) */
img.no-lazy,
.logo img,
.hero img {
    loading: eager !important;
}