html{font-size:100%;}
body{ font-size: 100%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; text-align: left; background-color: #FFF;}/*il faut mettre font-size à 0 pour ne pas avoir de marge avec display inline_block, ne pas oublier d'ajouter des polices pour les blocs*/
ul {list-style-type:none;margin-left:0;padding-left:0;}/*supprime les puces*/
li {list-style-type:none;
margin-left:0;
padding-left:0;}/*supprime les puces*/
img{max-width:100%;max-height:100%; }
/**POLICE**/
h1,h2,h3,h4,h5,h6 { font-family: "Times New Roman", Times, serif; font-style: normal;margin:0px; }
h1{font-size: 2.25rem;}/*36px*/
h2{font-size: 1.7rem;}/*24px*/
h3{font-size: 1.375rem;}/*22px*/
h4{font-size: 1.25rem;}/*20px*/
h5{font-size: 1rem;}/*16px*/
h6{font-size: 0.875rem;}/*14px*/
.police16{font-size:1rem;}/**ok**/
.police14{font-size:0.875rem;}/**ok**/
.police12{font-size:0.750rem;}
.police18{font-size:1.125rem;}/**ok**/
.police20{font-size:1.250rem;}/**ok**/
.couleur_rouge{ color: #F06;}
.container{ width: 100%; height: auto; max-width:98%; background-color: #FFF; margin: auto; justify-content: center; align-items: center;}
/**pour page**/
.col16_header,.col3_header_photor,.col13_header_texte,.col3_header_photol,.col16_menu_header,
.col12_texte,
.col2_index_vignette_encadre,.col2_index_vignette,
.col12_photo,.col2ph_vignette_encadre,.col2ph_vignette,.col2_vignette_texte,
.col12_photov,.col2_photov_encadre,.col2_photov,.col2_photov_texte,
.col12a_vignette,.col2pha_vignette_encadre,.col2pha_vignette,.col2a_vignette_texte,
.col12,
.col12_vignette,.col2_vignette_encadre,.col2_vignette,.col2_photo_encadre,.col2_photo,.col2_photo_texte,.col12_photop,.col2_photop_encadre,.col2_photop,.col2_photop_texte,.col16_footer
{width:100%;float: left;margin-bottom: 1%;}
/**pour titre et texte de présentation de l'ensemble des pages**/
.col12_texte{ width:75%; margin-left: 12.5%; margin-top: 2%; margin-bottom: 2%; padding: 2%;}
/**pour les vignettes page index uniquement**/
.col12_vignette{width:75%; margin-left: 12.5%; margin-top: 10px;}
.col2_index_vignette_encadre{ height: 200px; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2_index_vignette{ height: 200px; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
/**pour les vignettes a propos**/
.col12a_vignette{width:75%; margin-left: 12.5%; margin-top: 10px; background-color: #999;}
.col2pha_vignette_encadre{ height: 300px; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%; text-align: center; background-color: #FFF;}
.col2pha_vignette{ height: 300px; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2a_vignette_texte{height: auto; width:94.4%; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
/**pour les vignettes pages photos**/
.col12_photo{ width:90%; height:auto; margin-left: 5%; margin-top: 10px;}
.col2ph_vignette_encadre{ height: 250px; width:18%; margin-top: 1%; margin-bottom:2%; margin-left:3.5%; margin-right:3.5%; text-align: center;}
.col2ph_vignette{ height: auto; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2_vignette_texte{height: auto; width:94.4%; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
/**pour les photos horizontal**/
.col12_photo{ height: auto; width:90%; margin-left: 5%; margin-top:10px; }
.col2_photo_encadre{ height: auto; width:31.33%; margin-left:1%; margin-right:1%; text-align: center; }
.col2_photo{ height: 250px; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%; padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photo_texte{height: 120px; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
/**pour photos vertical**/
.col12_photov{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photov_encadre{ height: auto; width:31.33%; margin-left:1%; margin-right:1%; }
.col2_photov{ height: 400px; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%; padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photov_texte{height:80px; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
/**pour les photo panoramique**/
.col12_photop{ width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photop_encadre{height:auto; width:31.33%; margin-left:1%; margin-right:1%; text-align: center;}
.col2_photop{height: 150px; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2_photop_texte{height: 65px; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
/**footer**/
.col16_footer{ width :100%; background-color: #FFF; height: auto; font-family: "Times New Roman", Times, serif; color: #000; text-align: center; border-top-width: 1px; border-top-style: solid; border-top-color: #000;}
/* page_index MOBILE : jusqu’à 640px */
@media (max-width: 640px) {
/*pour les texte haut de page*/
.col12_texte{ width:92%; margin-left: 2%;margin-right: 2%; margin-top: 2%; margin-bottom: 2%; padding: 2%;}
/**pour les vignettes page index uniquement**/
.col2_index_vignette_encadre{ height: auto; width:45%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2_index_vignette{ height: auto; width:auto; margin-top: 2%; margin-bottom: 2%; margin-left:3%; margin-right:3%; padding:2%; padding-top: 5%; padding-left: 2%;padding-right: 2%; padding-bottom: 5%;}
}
/* TABLETTE : 641 → 799px */
@media (min-width: 641px) and (max-width: 799px) {
/*pour les texte haut de page*/
.col12_texte{ width:auto; margin-left: 1%;margin-right: 1%; margin-top: 2%; margin-bottom: 2%; padding: 2%;}
/**pour les vignettes page index uniquement**/
.col2_index_vignette_encadre{ height: auto; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2_index_vignette{ height: auto; width:auto; margin-top: 2%; margin-bottom: 2%; margin-left:3%; margin-right:3%; padding-top: 5%;padding-left: 2%;padding-right: 2%; padding-bottom: 5%;}
}
/* DESKTOP : 800px et + */
@media (min-width: 800px)and (max-width: 999px) {
/*pour les texte haut de page*/
.col12_texte{ width:auto;margin-left: 1%;margin-right: 1%; margin-top: 2%; margin-bottom: 2%; padding: 2%;}
/**pour les vignettes page index uniquement**/
.col2_index_vignette_encadre{ height: auto; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2_index_vignette{height: auto;width:auto;margin-top: 2%; margin-bottom: 2%; margin-left:3%; margin-right:3%;padding:2%; padding-top: 5%; padding-left: 2%;padding-right: 2%; padding-bottom: 5%;}
}
/* page_photo vignette */
@media (max-width: 640px) {
/**pour les vignettes pages photos**/
.col12_vignette{width:92%; margin-left: 2%; margin-top: 10px;}
.col2ph_vignette_encadre{ height: auto; width:98%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2ph_vignette{height: auto;width:90%;margin-top: 2%; margin-bottom: 2%;margin-left:2.8%; margin-right:2.8%; padding:2%;padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2_vignette_texte{height: auto; width:auto; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}
/* TABLETTE */
@media (min-width: 641px) and (max-width: 799px) {
/**pour les vignettes pages photos**/
.col12_vignette{width:92%; margin-left: 2%; margin-top: 10px;}
.col2ph_vignette_encadre{ height:400px; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2ph_vignette{ height:auto; width:auto; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2_vignette_texte{height: auto; width:auto; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}
/* DESKTOP */
@media (min-width: 800px) and (max-width: 900px){
/**pour les vignettes pages photos**/
.col12_vignette{width:92%; margin-left: 2%; margin-top: 10px;}
.col2ph_vignette_encadre{ height: 185px; width:21%; margin-top: 1%; margin-bottom:5%; margin-left:2%; margin-right:2%;}
.col2ph_vignette{ height:auto; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%; padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2_vignette_texte{height: auto; width:auto; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}
/* page photo horizontale MOBILE */
@media (max-width: 640px) {
.col12_photo{ height: auto; width:90%; margin-left: 5%; margin-top:10px; }
.col2_photo_encadre{ height: auto; width:98%; margin-left:1%; margin-right:1%; text-align: center; }
.col2_photo{ height: auto; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:2%; margin-right:2%; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; }
.col2_photo_texte{height: auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
/* TABLETTE */
@media (min-width: 641px) and (max-width: 799px) {
.col12_photo{ height: auto; width:90%; margin-left: 5%; margin-top:10px; }
.col2_photo_encadre{ height: 350px; width:48%; margin-left:1%; margin-right:1%; text-align: center; }
.col2_photo{ height: auto; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:2%; margin-right:2%; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; }
.col2_photo_texte{height: auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
/* DESKTOP */
@media (min-width: 800px)and (max-width: 999px) {
.col12_photo{ height: auto; width:90%; margin-left: 5%; margin-top:10px; }
.col2_photo_encadre{ height: 350px; width:45%; margin-left:2%; margin-right:2%; }
.col2_photo{ height: auto;width:90%;margin-top: 2%; margin-bottom: 2%; margin-left:2%; margin-right:2%;padding-top: 2%;padding-right: 2%;padding-bottom: 2%; padding-left: 2%; }
.col2_photo_texte{height: auto; width:96%; margin-top: 1%; margin-bottom: 2%; margin-left:2%; margin-right:2%; text-align: left;}
}
/* page photo verticale MOBILE */
@media (max-width: 640px) {
/**pour photos vertical**/
.col12_photov{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photov_encadre{ height: 700px; width:90%; margin-left:5%; margin-right:5%; }
.col2_photov{ height:auto; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photov_texte{height:80px; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
@media (min-width: 641px) and (max-width: 799px) {
.col12_photov{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photov_encadre{ height: 540px; width:40%; margin-left:5%; margin-right:5%; }
.col2_photov{ height: auto; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photov_texte{height:auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
@media (min-width: 800px) and (max-width: 999px) {
.col12_photov{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photov_encadre{ height: 550px; width:46%; margin-left:2%; margin-right:2%; }
.col2_photov{ height: 550; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photov_texte{height:auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
/* page photo panoramique MOBILE */
@media (max-width: 640px) {
/**pour photos vertical**/
.col12_photop{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photop_encadre{ height: 225px; width:96%; margin-left:2%; margin-right:2%; }
.col2_photop{ height:auto; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photop_texte{height:auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
@media (min-width: 641px) and (max-width: 799px) {
.col12_photop{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photop_encadre{ height: 210px; width:46%; margin-left:2%; margin-right:2%; }
.col2_photop{ height: auto; width:93%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photop_texte{height:auto; width:auto; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
@media (min-width: 800px) and (max-width: 999px) {
.col12_photop{height: auto; width:90%; margin-left: 5%; margin-top: 10px; }
.col2_photop_encadre{ height: 250px; width:46%; margin-left:2%; margin-right:2%; }
.col2_photop{ height: 550; width:93.4%; margin-top: 2%; margin-bottom: 2%; margin-left:1%; margin-right:1%;padding-top: 4%; padding-right: 2%; padding-bottom: 4%; padding-left: 2%; }
.col2_photop_texte{height:auto; width:98%; margin-top: 1%; margin-bottom: 1%; margin-left:1%; margin-right:1%; text-align: left;}
}
/* a propos*/
@media (max-width: 640px) {
/**pour les vignettes a propos**/
.col12a_vignette{width:75%; margin-left: 12.5%; margin-top: 10px;}
.col2pha_vignette_encadre{ height: 290px; width:45%; margin-top: 1%; margin-bottom:2%; margin-left:2%; margin-right:2%;}
.col2pha_vignette{ height: auto; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%;padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2a_vignette_texte{height: auto; width:94.4%; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}
@media (min-width: 641px) and (max-width: 799px) {
/**pour les vignettes a propos**/
.col12a_vignette{width:75%; margin-left: 12.5%; margin-top: 10px;}
.col2pha_vignette_encadre{ height: 500px; width:45%; margin-top: 1%; margin-bottom:2%; margin-left:2%; margin-right:2%;}
.col2pha_vignette{ height: auto; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%;bpadding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2a_vignette_texte{height: auto; width:94.4%; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}
@media (min-width: 800px) and (max-width: 999px) {
/**pour les vignettes a propos**/
.col12a_vignette{width:75%; margin-left: 12.5%; margin-top: 10px;}
.col2pha_vignette_encadre{ height: 340px; width:29%; margin-top: 1%; margin-bottom:2%; margin-left:2%; margin-right:2%;}
.col2pha_vignette{ height: auto; width:90%; margin-top: 2%; margin-bottom: 2%; margin-left:2.8%; margin-right:2.8%; padding:2%;padding-top: 5%; padding-right: 2%; padding-bottom: 5%; padding-left: 2%;}
.col2a_vignette_texte{height: auto; width:94.4%; margin-top: 1%; margin-bottom: 1%; margin-left:2.8%; margin-right:2.8%; text-align: left;}
}