@charset "utf-8";
/* CSS Document */
*,::before,::after {box-sizing: border-box; margin: 0; padding: 0;}

body {font-family: verdana, arial, sans-serif; margin : 0px; padding: 0px; height: 100%; color:#424242; font-size: small; background: #FFF; background-color: #f4f4f4;} 

#container {margin: auto; padding: 0px; max-width: 1200px; height: 100%; background-color: #fff;}

main {padding: 10px 25px 25px 25px; text-align: justify; line-height: 160%;}

#formulaire-contact-infos {background-image: url("/img/contact.png"); background-repeat: no-repeat; background-color: #FFF; border: 1px solid #999; 
	color: #999; max-width: 500px; margin-left: 10px; padding: 120px 20px 20px 20px;}

/*============= LIENS ==============================================================================================================*/
a {outline: none; text-decoration: none; padding: 2px 1px 0;} 
a:link {color: rgb(45, 91, 241);}
a:visited {color: rgb(45, 91, 241);}
a:hover {border-bottom: 1px solid;}
a.titres-infos3 {font-size: 90%;}

/*=======   Bas de page   =======*/ 
/*footer {display: flex; justify-content: center; margin: 1%; background-color: #f4f4f4;} */
.footer {display: flex; flex-flow: row wrap; padding: 30px 10px 30px 50px; color: #FFFFFF; background-color: #7C9EDB;}
.footer > * {flex:  1 100%;}
.footer ul {list-style: none; padding-left: 0;}
.footer li {line-height: 3em;}
.footer a {text-decoration: none;}
.footer a:hover {text-decoration: none;}

.r-footer {display: flex; flex-flow: row wrap;}
.r-footer > * {flex: 1 50%; margin-right: 1.25em;}
 
.box a {color: #fff;}  

#piedpage {margin: 0px 0 10px 0; padding: 15px 0 15px 0; background-color: #7C9EDB; text-align: center; font-size: 12px; color: #FFFFFF;}
#piedpage::before{content: "Copyright © 2026 Apiris | tous droits réservés";}	

/*============= Menu navigation ==========*/
nav {display: flex; width: auto; font-family: tahoma, verdana, arial, sans-serif;}
nav > a {display: block; color: #fff; background-color: #7C9EDB; width: 100%; text-align: center; box-sizing: border-box; 
	padding: 15px; margin: 1px; text-decoration: none; font-weight: bold; transition: all 0.3s ease;}
nav > a:link {color: #fff;}  
nav > a:visited {color: #fff;}  
nav > a:hover {background-color: #fff; text-decoration: none; color: #7C9EDB; transition: all 0.3s ease;}

/*======== gestion des boutons next et previous ============*/
a.test {background-color: #f1f1f1; padding: 10px 14px; text-decoration: none; border-radius:5%}
a.test:hover { background-color:#CDFEAA; }
#nextprevious{display: flex; justify-content: space-between;}

/*======== gestion du bouton télécharger  ============
a.bt-tester{background-color: #F6F6F6; color: #7C9EDB; font-size: 20px; padding: 10% 18%; text-decoration: none; border-radius:5%; box-shadow: 1px 1px 7px #999; }
a.bt-tester:hover {background-color: #99CC00; color: #fff;} */
a.bt-telecharger{background-color: #7C9EDB; color: #F6F6F6; width: 400px; padding: 2%; font-size: 20px; text-decoration: none;}
a.bt-telecharger:hover {background-color: #196ce0; color: #fff;}
#contenu-info1 {display: flex; justify-content: center; text-align: center;}  /*== cadre télécharger == */

/*============= Bouton burger menu ============*/
#ch {display: none;}
#menu {display: none;}
#lab {width: 30px;height: 30px;
  background: linear-gradient(#7C9EDB 0%, #7C9EDB 20%, transparent 21%, transparent 40%, #7C9EDB 41%, #7C9EDB 60%, transparent 61%, transparent 80%, #7C9EDB 81%, #7C9EDB 100%);
  margin: 4px;cursor: pointer;display: none;}  

/*============= Bouton remonter ============*/
html {scroll-behavior: smooth;}
#haut {display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99;
  border: none; outline: none; background-color: #C8D6F1;
  color: white; cursor: pointer; padding: 10px; border-radius: 10px; font-size: 20px;}
#haut:hover {background-color: #31708f;}

/*======= Gestion des images entête = bandeau + logo ======*/
.img-entete-home {height: 133px; width: 100%;
	background-image: url("/img/logokafeo.png"), url("/img/bandeau.png"); background-repeat: no-repeat, no-repeat; background-size: 20%, cover; background-position: left, right;}
.banniere {font-family: arial, sans-serif; color: white; font-size: 24px; font-weight: bold; padding: 50px 0 0 0;text-align: center;}

.img2 {max-width: 100%;}
/*======== carrousel d'images ============*/
@keyframes slidy {
	0% { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -400%; }
  }
  div#slider { width: 80%; max-width: 500px; overflow: hidden}
  div#slider figure img { width: 20%; float: left; }
  div#slider figure {position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; left: 0; text-align: left; animation: 20s slidy infinite;}
  
  div#slider2 { width: 80%; max-width: 400px; overflow: hidden}
  div#slider2 figure img { width: 20%; float: left; }
  div#slider2 figure {position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; left: 0; text-align: left; animation: 20s slidy infinite;}
  
/*======== Gestion des vidéos ============*/
/* width: clamp(60%, 800px, 500px); /* minimum de 800px, au-delà la vidéo passe à 50% de la largeur de l'élément parent */
.maVideo {width: max(50%, 800px); max-width: 100%; aspect-ratio: 16/9;}

/*======== Partie BLOG ============*/
#flex-container-blog {display: flex; margin: 20px 0 40px 0; box-shadow: 2px 2px 8px #aaa;}
#flex-item1-blog {flex: auto; min-width: 280px; min-height: 0px; padding: 20px 0px 20px 0px;}
#flex-item2-blog {flex: auto; text-align: justify; min-width: 0px; min-height: 0px; padding: 20px 20px 20px 30px;}
span.star {font-size: 1.5em; line-height: 1;}
span.star:before {content:"\2605\2605\2605\2605\2605"; color : #999999;}
.date {font-size:11px; }


p {margin-top:10px;}
p.moyen {margin-top:25px;}
p.grand {margin-top:40px;}
h1 {font-size: 160%; color: #99CC00; margin: 20px 0 20px 0;}
h2 {font-size: 140%; color: #7C9EDB; margin: 25px 0 10px 0;}
h2.titreblog{margin:0px;}
h3 {font-size: 110%; color: #fff; margin: 20px 0 0 0; font-weight:bold;}  /*menu bas de page */
h3.titreblog {font-size: 110%; color: #424242; margin: 20px 0 0 0; font-weight:bold;}  
h4 {font-size: 100%; color: #99CC00;}

/*== CADRE INFORMATION A DROITE == vert fonce #04AA6D  vert clair #CDFEAA */
#contenu-infos {width: 302px; margin: 0 0 20px 40px;} 
#contenu-info2 {width: 300px; background-color: #F6F6F6; padding: 15px; text-align: justify; border-radius: 15px;}
#contenu-info3 {width: 300px; background-color: #F6F6F6; padding: 15px; text-align: justify; border-radius: 15px;}
#contenu-info4 {width: 300px; margin: 40px 0 0 0;} /* Videos ou images - ne sert pas pour l'instant*/
#contenu-info5 {width: 300px; padding: 15px; text-align: justify; border-radius: 15px;}

#aide-info {width: 230px; margin: 0 0 20px 40px; background-image: url(img/fond4.jpg); background-repeat: no-repeat; padding: 20px; text-align: justify; font-size: 12px;}

/*== CADRE INFORMATION EN BAS == */
#C2 {background-color: #F6F6F6; margin: 40px 5% 20px 5%; padding: 15px; border-top: 4px dotted #999999; border-bottom: 4px dotted #999999;}
span.star2 {font-size: 1.5em; line-height: 1;}
span.star2:before {content:"\2605\2605\2605\2605\2605"; color : #fbbd00;}

/*================ Liste ================= */
ul {list-style-type: none; padding: 0; margin: 0;}
ul.espace {list-style-type: none; padding: 0 0 0 40px; margin: 0;}
li.doc {background-image: url('img/cross.gif'); background-repeat: no-repeat; background-position: 0 0.6em; padding: 0 0 2px 20px;}
li.docvert {background-image: url('img/cross.gif'); background-repeat: no-repeat; background-position: 0 0.6em; padding: 0 0 2px 20px;}

#flex-container {display: flex; margin: 20px; padding: 10px;}
#flex-item1 { flex: auto; min-width: 0px; min-height: 0px;}
#flex-item2 {flex: auto; min-width: 0px; min-height: 0px;}
#flex-item3 {flex: auto; min-width: 0px; min-height: 0px;}

#formulaire-tester {border: 1px solid #999999; background-color: #EBEBEB; width: 420px; margin: 20px; padding: 15px;}
.case {border:1px solid #999999; background-color:#F6F6F6; width: 370px; padding: 8px 0 8px 12px;}
.info1 {font-family:arial; font-size:10px;}
.boutonText {font-size:16px; background-color:#9C0; cursor: pointer; border-radius: 5px; padding: 18px;}
.boutonText:hover {background-color:#46921a; color: #fff;}

/* Couleurs à utiliser 
vert clair = #dff0d8
vert foncé = #3c763d
bleu clair = #d9edf7
bleu foncé = #31708f
gris foncé = #edecec
*/ 

/*== définitions des classes ==*/
.gras {font-weight:bold;}
.grand {font-size:16px;}
.temoignage {font-family:arial; font-size:11px; font-style:italic;}
.droite {float: right;}
.txtcouleur1 {color: #7C9EDB;}
.rouge {color:red;}
.vert {color:#99CC00;}
.gris {color:#edecec;}
.centrer {text-align: center;}
/*== tableau des versions ==*/
.bleu {background-color:#7C9EDB;}
.grisclair {background-color:#F6F6F6;}
.grisfonce {background-color:#C8D6F1;}
.blanc {color:white;}
.prix {color:#99CC00; font-size:18px; font-weight:bold; display: inline;}
/*== mise en forme  ==*/
.enligne {display:inline;} 
.arrondi {border-radius: 15px; }
.icon {width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle;}  

/*==== MEDIA QUERIES ==== */
/* ==== au dessus de 600 === */
@media all and (min-width: 600px) {
	.r-footer > * {flex: 1;}
	.r-footer {flex: 2 0px;}
  }
  
/*==== En dessous de 690px ==== */
@media all and (max-width: 690px) {
/*=== on adapte le menu qui devient une colonne ===*/
	nav {
	  display: block;
	  position: absolute;
	  transform: translate(-1000px, 0);
	  transition: all 0.5s ease;
	}
	nav > a {width: 200px; padding: 20px; font-size: 1.2em;}
	#lab {display: block;} 
	#ch:checked + nav {transform: translate(0, 0); transition: all 0.5s ease;} 
  
	#menu {display: block;}
  
	/*=== on adapte la taille des polices = plus petit ===*/
	h1 {font-size: 1.5em; margin: 10px 0 5px 0;}
	h2 {font-size: 1.2em; margin: 10px 0 5px 0;}
	h3 {font-size: 1.2em; margin: 10px 0 5px 0;}
	body {font-size: 0.8em;}
  
	/*=== on replace la boite 'contenu-info' dans le flow et on supprime l'affichage de certaines boites */
	.droite {float: none;}
	#contenu-infos {margin: 30px 0 0 0;}
	#contenu-info1 {display: none;}
	#contenu-info3 {display: none;}
	#contenu-info5 {display: none;}
	/*=== on force l'affichage du tableau sur toute la longueur ===*/
	.tableau {width: 100%;}
	#flex-container {display:block;}
	#flex-container-blog {display:block;}
  }
/*==== En dessous de 450px, on diminue la police des bouton next et previous ====*/
  @media only screen and (max-width: 450px) {
	a.test {font-size: 10px; padding: 8px 10px;}
  }
/*==== En dessous de 400px, on adapte la taille des polices = plus petit ====*/
@media only screen and (max-width: 400px) {
	main {padding: 10px 15px 15px 15px; text-align: justify;}
	h1 {font-size: 1.3em;}
	h2 {font-size: 1.1em;}
	body {font-size: 0.7em;}
	#flex-container {justify-content: space-between;}
  }