/* Ajout police SofadiOne-Regular */
@font-face {
    font-family:'SofadiOne-Regular';
    src: url('SofadiOne-Regular.eot');
	src: url('SofadiOne-Regular.eot?#iefix') format('embedded-opentype'),
	url('SofadiOne-Regular.woff2') format('woff2'),
	url('SofadiOne-Regular.woff') format('woff'),
	url('SofadiOne-Regular.otf') format('opentype'),
	url('SofadiOne-Regular.svg#SofadiOne-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FC;
}
/* Ajout police sari-regular */
@font-face {
    font-family:'sari-regular';
    src: url('sari-regular.ttf');
    src: url('sari-regular.otf');
}

//* Ajout police Dosis */
@font-face {
  font-family: 'Dosis-ExtraLight';
  src: url('fonts/Dosis-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-Light';
  src: url('fonts/Dosis-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-Regular';
  src: url('fonts/Dosis-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-Medium';
  src: url('fonts/Dosis-Medium.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-SemiBold';
  src: url('fonts/Dosis-SemiBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-Bold';
  src: url('fonts/Dosis-Bold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Dosis-Extrabold';
  src: url('fonts/Dosis-ExtraBold.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

/* -------------------------------------
   POLICE VARIABLE : Dosis VariableFont
   Emplacement : /css/fonts/Dosis-VariableFont_wght.ttf
-------------------------------------- */

@font-face {
  font-family: 'Dosis Variable';
  src: url('fonts/Dosis-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* plage complète disponible */
  font-display: swap;
}


/* Ajout police sari-extrabold */
@font-face {
    font-family:'sari-extrabold';
    src: url('sari-extrabold.ttf');
    src: url('sari-extrabold.otf');
}

/* Ajout police terminal-dosis */
@font-face {
    font-family:'terminal-dosis';
    src: url('terminal-dosis-extralight.ttf');
    src: url('terminal-dosis-light.ttf');
    src: url('terminal-dosis-regular.ttf');
}

/* Ajout police Eisenhower */
@font-face {
    font-family:'Eisenhower';
    src: url('Eisenhower.ttf');
}

/* div logo */
.logo {
	z-index:999;
	position: absolute;
}

/* Styles pour les zones de modules */
.modulehaut, .modulebas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.modulehaut > div, .modulebas > div {
    flex: 1 1 250px; /* Largeur minimale de 250px */
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0px;
}

.footer > div {
    flex: 1 1 333px; /* Largeur minimale de 333px */
}

.colonnegauche {
	float: left;
}

.content {
	padding:15px;
}

.colonnedroite {
	float: right;
}

.copyright {
	 clear:both;
	 margin-left :auto; 
	 margin-right :auto;
	 text-align: center;
	 bottom: 0;
}

/* css permettant de coller le footer en bas d'écran quand le contenu est trop petit */	 
html, body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}
#pageglobale {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.pageWrapper {
  flex-grow: 1;
} 

/* suppression des cadres et centrage vertical automatique des contenus dans l'affichage "GRID" */

.auto {

border : 0px solid transparent !important;

margin-top: auto !important;

margin-bottom: auto !important;

margin-left: auto !important;

margin-right: auto !important;

padding: 0 30px !important;

}

@media (max-width: 960px) {

	.cont_auto {

        display: flex !important;

        flex-wrap: wrap !important;

}

.cont_auto>* {

flex: 1fr 1fr 1fr 1fr 1fr 400px;

}

}
/* Version responsive - adaptation pour petits écrans */
@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }
    .colonnegauche,
    .colonnedroite {
        width: 100% !important;
        display: block !important;
        order: initial;
    }
    .content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 2;
    }
}
/* PLUGIN CANEVAS - Styles (layouts et responsive) */
.canevas-row {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.canevas-col {
  min-height: 100px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* Layouts */
.canevas-1col { grid-template-columns: 1fr; }
.canevas-2col { grid-template-columns: repeat(2, 1fr); }
.canevas-3col { grid-template-columns: repeat(3, 1fr); }
.canevas-4col { grid-template-columns: repeat(4, 1fr); }
.canevas-2-1 { grid-template-columns: 2fr 1fr; }
.canevas-1-2 { grid-template-columns: 1fr 2fr; }

/* RESPONSIVE - MOBILE */
@media (max-width: 768px) {
  .canevas-row, .canevas-1col, .canevas-2col, .canevas-3col,
  .canevas-4col, .canevas-2-1, .canevas-1-2 {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  .canevas-col {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* RESPONSIVE - TABLETTE */
@media (min-width: 769px) and (max-width: 1.24px) {
  .canevas-3col, .canevas-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Support des contenus */
.canevas-col img { max-width: 100%; height: auto; }
.canevas-col p { margin-bottom: 1em; }
.canevas-col p:last-child { margin-bottom: 0; }
.canevas-col h1, .canevas-col h2, .canevas-col h3,
.canevas-col h4, .canevas-col h5, .canevas-col h6 { margin-top: 0; }
.canevas-col ul, .canevas-col ol { padding-left: 20px; }

/* === Styles Canevas Vidéo === */
/* Conteneurs de base */
.canevasvideo-row {
    display: grid;
    gap: 20px;
    margin-bottom: 0px;
    width: 100%;
}
/* Layouts */
.canevasvideo-4vid { grid-template-columns: repeat(4, 1fr); }
.canevasvideo-3vid { grid-template-columns: repeat(3, 1fr); }
.canevasvideo-2vid { grid-template-columns: repeat(2, 1fr); }
.canevasvideo-1vid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
/* Item (vidéo + commentaire) */
.canevasvideo-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* Zone vidéo (OVALE) */
.canevasvideo-video {
    min-height: 200px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
}
/* Zone commentaire (RECTANGULAIRE) */
.canevasvideo-comment {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
/* Images/vidéos dans zones */
.canevasvideo-video img,
.canevasvideo-video video,
.canevasvideo-video iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}
.canevasvideo-comment img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Texte */
.canevasvideo-video p:last-child,
.canevasvideo-comment p:last-child {
    margin-bottom: 0px;
}
/* Listes */
.canevasvideo-comment ul,
.canevasvideo-comment ol {
    padding-left: 20px;
}
/* Liens vidéo */
.canevasvideo-video a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.canevasvideo-video a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
/* === RESPONSIVE === */
/* Tablette */
@media (min-width: 769px) and (max-width: 1024px) {
    .canevasvideo-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    .canevasvideo-video {
        padding: 0 !important;
    }
}
/* Mobile (smartphones) */
@media (max-width: 768px) {
    .canevasvideo-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .canevasvideo-video {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}