@charset "utf-8";
/* CSS Document */
/* MES STYLES UTILES */
/* Couleurs de fond */
.fond-folio-1 {background-color: #dfe7e7;} /* #dcf0f5 */
.fond-folio-2 {background-color: #b4c0bc;} /* #9eb2c9 */
.fond-folio-3 {background-color: #5c7373;}
.fond-folio-4 {background-color: #667f74;}
.fond-folio-5 {
background-color: #a09fa7;
padding-top: 2%;
padding-bottom: 5%;
}
.fond-folio-6 {background-color: #6a7e7c;}
.fond-page-electra-1 { background-color: #505c74;}
.fond-page-electra-2 { background-color: #3c465f;}
.fond-page-electra-3 { background-color: #6f7692;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); }
.fond-page-electra-4 { background-color: #574f55;}
.fond-page-electra-5 { background-color: #f2bd9e;}
.fond-page-electra-6 { background-color: #a7afc0;}
.fond-page-atria-1 { background-color: #934253;}
.fond-page-atria-2 { background-color: #7d5e64;}
.fond-page-atria-3 { background-color: #c997a2;}
.fond-page-atria-4 { background-color: #c95b73;}
.fond-lightbox-artdeco {
background-color: #BAC8D4;
margin: 0;}
.fond-page-andromede-1 { background-color: #5b6178;}
.fond-page-andromede-2 { background-color: #78809e;}
.fond-page-andromede-3 { background-color: #41505a;}
.fond-page-erakis-1 { background-color: #3a5560;}
.fond-page-erakis-2 { background-color: #689aad;}
.fond-page-erakis-3 { background-color: #41505a;}
.fond-diapo-1 { background-color: #eaebed;}
.fond-diapo-2 { background-color: #d3d6e5;}
.fond-diapo-3 { background-color: #bbc3d8;}
.fond-diapo-4 { background-color: #a7afc0;}
.fond-flex-box-1 { background-color: #91a09f; margin: 0;} /* #b4c0bc #99b2c6 #dceff8 #a09fa7*/
.fond-flex-box-2 { background-color: #6b7e7c;} /* #bfc0d0 */
.fond-flex-box-3 { background-color: #b4c1ba;} /* #f0e2e5*/
.fond-flex-box-4 { background-color: #c0b7c6;}
.fond-flex-box-5 { background-color: #ae8e96;}
.fond-box-1 { background-color: #dbf1f4;}
.fond-box-2 { background-color: #ae8e96;}/* ae8e96*/
.fond-orange { background-color: #e67e22; } /* carrot */
.fond-bleu { background-color: #3498db; } /* peter river */
.fond-jaune { background-color: #f1c40f; } /* sun flower */
.fond-rouge { background-color: #e74c3c; } /* alizarin */
.fond-violet { background-color: #9b59b6; } /* amethyst */
.fond-noir { background-color: #000000; } /* black */
.fond-blanc { background-color: #ffffff;}
.fond-blanc-bis {
background-color: #ffffff;
padding-top: 5%;
padding-bottom: 5%;
}/* white */
.fond-gris { background-color: #3a3a3a; z-index: 5; } /* gris xboxe*/
.fond-vert { background-color: #398024; } /* vert */
.fond-projet-a {background-color: #eaebed;} /*#9eb2c9*/
.fond-projet-b {background-color: #bbc3d8;}
.fond-projet-c {background-color: #d3d6e5;}
.fond-projet-d {background-color: #c0b8bf;}
.fond-projet-d-bis {background-color: #A69FA5;}
.fond-projet-d-1 {background-color: #CCC4CB;}
.fond-projet-e {background-color: #849ba8;} /* #9ea4ba */
.fond-projet-f {background-color: #5c7373; z-index: 5; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);} /* #505c74 #6f7692 */
.fond-projet-g {background-color: #887b8e;}
.fond-projet-h {background-color: #8699af;}
.fond-projet-atria {background-color: #6a7e7c;}
.fond-bleu-box1 {background-color: #6a7e7c;} /* #dbe8eb #b4c1ba*/
.fond-bleu-box2 {background-color: #b4c1ba; z-index: 99999;} /* #dbe8eb */
.fond-bleu-box3 {background-color: #86a2a2 ;}
.fond-bleu4 {background-color: #689aad;}
.fond-bleu4-bis {background-color: #598394;}
.fond-bleu1 {background-color: #9fa4be;}
.fond-bleu1bis {background-color: #859ca7;} /* #dceff8 */
.fond-bleu3 {background-color: #7ba1bf;}
.fond-rose {background-color: #bf7d7b;}
.fond-rose1 {background-color: #c0b8bf;} /*#b08e93*/
.fond-trans {background: rgba(26,26,26,0.6); border-radius: 5px;}
.fond-trans-radius {
background: rgba(26,26,26,0.6);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
/* Couleurs pour les textes */
.blanc { color: #ffffff; }
.gris { color: #3a3a3a; }
.rouge { color: #dd0000; }
.orange { color: #ff9f00; }
.bleu { color: #0094da; }
.vert { color: #107c10 ; }
.rose { color: #FF00FF; }
.violet { color: #a939ff; }
.marron { color: #f8670e; }
.jaune { color: #f8670e; }
.noir { color: #000000; }
/* divers styles utiles pour le texte */
.rikiki { font-size: 0.6em; }
.mini { font-size: 0.7em; }
.petit2, .pluspetit { font-size: 0.75em; }
.petit { font-size: 0.8em; }
.moins-grand { font-size: 0.9em; }
.plus-grand { font-size: 1.1em; }
.large { font-size: 1.25em; }
.xlarge, .xl { font-size: 1.5em!important; }
.xxlarge, .xxl { font-size: 1.75em!important; }
.big, .xxxl { font-size: 2.5em; }
.bigger { font-size: 3em; }
.capitale, .majuscule { text-transform: uppercase; }
.minuscule { text-transform: lowercase; }
.gras { font-weight: bold !important; }
.italique { font-style: italic !important; }
.souligne { text-decoration: underline; }
.interlettrage { letter-spacing: 0.4em; }
.insecable, .nowrap { white-space: nowrap; }
.cadre-noir { border: 1px solid #000000; }
.cadre-arrondi, .arrondi { border-radius: 10px; }
.rond { border-radius: 50%; }
.ombre1 { /* pour creer une ombre texte
font-size: 60px;*/
text-shadow: 4px 4px 5px #666;
}
.ombre { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); }
.lumiere { box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.75); }
.transparent { opacity: 0.5; }
.taille100 { width: 100%; /* permet de forcer la dimension d'un element à toute la place disponible */
height: auto; /* de façon homothétique */
}
.taille30 { width: 30%; /* permet de forcer la dimension d'un element à toute la place disponible */
height: auto; /* de façon homothétique */
}
.taille10 { width: 10%; height: auto;}
.taille20 { width: 20%; height: auto;}
.taille40 { width: 40%; /* permet de forcer la dimension d'un element à toute la place disponible */
height: auto; /* de façon homothétique */
}
.taille50 { width: 50%; height: auto;}
.taille60 { width: 60%; height: auto;}
.taille70 { width: 70%; height: auto;}
.taille80 { width: 80%; height: auto;}
.taille85 { width: 85%; height: auto;}
.taille110 { width: 110%; height: auto;}
.taille120 { width: 120%; height: auto;}
.taille105 { width: 105%; height: auto;}
.taillemax {
max-width: 100%; /* permet de forcer la dimension d'un element JUSQU'A sa taille originale maximum */
height: auto;
}
.milieu { vertical-align: middle; } /* pour aligner les images verticalement sur une ligne de texte */
.enhaut { vertical-align: top; }
.enbas { vertical-align: bottom; }
.slide-top-section {
margin-top: 5%;
}
/* voici des classes pour les exemples */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}
/* pour centrer un block */
.central { margin-left: auto;
margin-right: auto;
}
.masquer { display: none!important; }
.invisible, .discret { visibility: hidden!important; }
.apparition { opacity: 0; }
.apparition:hover { opacity: 1; }
.texte-gauche { text-align: left; }
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }
.texte-justifie { text-align: justify; }
/* Les flottants */
.droite { float: right; }
.gauche { float: left; }
img.droite { margin-left: 20px; }
img.gauche { margin-right: 20px; }
/* LES 2 METHODES DE CLEARFIX : pour bien gérer les flottants */
/* 1) .clearfix a appliquer au bloc div qui contient les flottants pour qu'il les englobe correctement (et ne croit pas etre vide) */
.clearfix:before, .clearfix:after { content:"."; display:table; height: 0; font-size:0; line-height:0; visibility:hidden; }
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }
/* 2) .separation (ou .clear) : a appliquer a un <br> ou <hr> sous les blocs flottants (pour stopper des flottants situés apres de remonter) */
.clear, .separation { clear: both; visibility: hidden; }