/* GLOBAL */
* {margin:0; padding:0; box-sizing:border-box;}
html, body {width:100%; height:100%; min-height:100%; font-size:100%; background:#FFF; font-size:1em; letter-spacing:0.0115em; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; color:#0E0F0E; font-family:'Outfit', sans-serif; font-weight:400;}
ul, li {list-style:none; }
a, img {outline:none; border:none; text-decoration:none;}
img, video {display:block; max-width:100%; height:auto;}


/* BODY ID */
body#accueil a#accueil-a, body#individuel a#individuel-a, body#collectif a#collectif-a, body#prevention a#prevention-a, body#association a#association-a, body#contact a#contact-a, body#mentions a#mentions-a, body#confidentialite a#confidentialite-a {font-weight:600;}



/* TEXTES */
h1 {font-size:2em; font-weight:700; color:#4085C6;}
h2 {font-size:1.4em; font-weight:600;}
.s {font-size:0.8em;}
.m {font-size:1em;}
.l {font-size:1.2em;}
.xl {font-size:1.6em;}
.xxl {font-size:1.8em;}

.medium {font-weight:500;}
.semi {font-weight:600;}
.bold {font-weight:800;}

p {white-space:break-spaces; font-size:1.08em;}

/* LINK */
a:link {color:#4085C6;}
a:visited {color:#4085C6;}
a:hover {color:#6AA9E5; transition:0.3s;}
a:active {color:#6AA9E5;}

.rouge a:link {color:#D94363; transition:0.3s;}
.rouge a:visited {color:#D94363;}
.rouge a:hover {color:#fff; background-color:##D94363; transition:0.3s;}
.rouge a:active {color:#fff; background-color:##D94363;}

.blanc-bleu a:link {color:#FFF; transition:0.3s;}
.blanc-bleu a:visited {color:#FFF;}
.blanc-bleu a:hover {color:#6AA9E5; transition:0.3s;}
.blanc-bleu a:active {color:#6AA9E5;}

.blanc-vert a:link {color:#FFF; transition:0.3s;}
.blanc-vert a:visited {color:#FFF;}
.blanc-vert a:hover {color:#ADECDE; transition:0.3s;}
.blanc-vert a:active {color:#ADECDE;}


/* MAGINS PADDINGS */
.margin-bot-s {margin-bottom:1%;}
.margin-bot-m {margin-bottom:3%;}
.margin-bot-l {margin-bottom:5%;}
.padding-first {padding-left:0;}
.padding-bloc-centre {padding:10% 15% 10% 15%;}
.padding-centre {padding:0 10% 0 10%;}

.padding-bloc-texte {padding:5%;}


/* ALIGN */
.left {float:left;}
.align-gauche {text-align:left;}
.align-droite {text-align:right;}
.align-centre {text-align:center;}
.center img {margin:0 auto 20px auto; text-align:center;}
.center {margin:0 auto; text-align:center;}
.center-footer img {margin:0 auto 10px auto; text-align:center;}


/* LISTS */
.list ul li {display:list-item;}
.il ul li {display:inline;}

/* BOUTONS */
.bouton {display:table; border-radius:15px; border:2px solid; cursor:pointer; font-family:'Outfit', sans-serif; font-weight:600; font-size:0.9em; padding:6px 12px; min-width:180px; vertical-align: middle; text-decoration:none;}
.bouton:hover {color:#fff;}

/* COULEURS */
.rouge {color:#D94363; border-color:#D94363; transition:0.3s;}
.rouge:hover {background-color:#D94363; transition:0.3s;}
.rouge:active {background-color:#D94363; transition:0.3s;}
.rouge:focus {background-color:#D94363; transition:0.3s;}
.bleu {color:#3874AB; border-color:#3874AB; transition:0.3s;}
.bleu:hover {background-color:#3874AB; transition:0.3s;}

.vert {color:#5DB4A0;}

.blanc {color:#fff;}



/* BACKGROUNDS */
.bg-bleu {background-color:#3874AB; color:#FFF;}
.bg-vert {background-color:#5DB4A0; color:#FFF;}
.bg-rouge {background-color:#D94363; color:#FFF;}


/* STRUCTURE */
.global {position:relative; width:98%; min-height:100%; margin:0 auto; text-align:center;}
.header-wrap {width:100%; height:15%;}
.contenu-wrap {width:100%;}
.wrap {display:inline-block; margin:0; width:100%; height:auto; max-width:1200px;}


/* HEADER */
header {display:inline-block; padding:2% 0; width:100%; height:auto; max-width:1200px; text-align:center; margin:auto;}
.header-logo {width:100%; margin-bottom:1%;}
.logo {height:80px;}
.header-menu {display:inline-block; width:100%;}
.header-menu-gauche {float:left; width:40%; text-align:left;}
.header-nav {display:inline-block;}
.header-menu-droite {float:right; padding-top:8px; width:60%; text-align:right;}
.inline {display:inline-block;}


/* PHOTO ACCUEIL */
.photo-accueil {width:100%; height:700px; background-image:url("../images/photos/photo-header-monsieur-telephone.jpg"); background-repeat:no-repeat; background-position:center;  background-size:cover;}
.bloc-texte-accueil {float:left; width:40%; height:auto; background-color:#FFF; color:#4085C6; padding:2%; margin:5% 0;}


/* BLOC */
article {display:inline-block;}
.colonne-gauche {float:left; width:48%; margin:0 auto;}
.colonne-droite {float:right; width:48%; }
.bloc-texte {float:left; width:100%; text-align:left;}
.bloc-text-h {height:250px;}
.colonne {display:inline-block; width:30%; margin:0 auto;}
.colonne-partenaires {display:inline-block; width:12%; margin:0 auto; text-align:center;}

.colonne-100 {width:100%;}


/* FOOTER */
footer {float:left; width:100%; bottom:0; padding-top:65px; height:176px; background-color:#F8F8F8; color:#4085C6; font-size:0.7em;}
.footerfix {position:absolute;}

/* MENU */
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
li {float:left;}
li a, .dropbtn {display:inline-block; color:white; padding:14px 16px; text-decoration:none;}
li a:hover, .dropdown:hover .dropbtn {background-color:#FFF;}
li.dropdown {display:inline-block;  text-align:left;}
.dropdown-content {display:none; position:absolute; background-color:#fff; min-width:160px; z-index:1;}
.dropdown-content a {color:#0E0F0E; padding:12px 16px; text-decoration: none; display:block;}
.dropdown-content a:hover {color:#4085C6;}
.dropdown:hover .dropdown-content {display:block;}


@media only screen and (min-width:661px) and (max-width:1260px) {
.global {width:94%;}
}


@media only screen and (min-width:661px) and (max-width:1000px) {
header {padding:25px 0;}
.header-logo {margin-bottom:25px;}
.header-menu {width:100%; text-align:center;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
}



@media only screen and (min-width:661px) and (max-width:902px) {
h1 {font-size:1.8em; font-weight:700; color:#4085C6;}
h2 {font-size:1.2em; font-weight:600;}
.l {font-size:1.1em;}
.xxl {font-size:1.5em;}
.padding-bloc-centre {padding:15% 12% 8% 12%;}

}






@media only screen and (max-width:800px) and (orientation:landscape) {
h1 {font-size:1.6em; font-weight:700; color:#4085C6;}
h2 {font-size:1.1em; font-weight:600;}
header {padding:25px 0;}
.l {font-size:1.1em;}
.xl {font-size:1.2em;}
.xxl {font-size:1.5em;}
.padding-bloc-centre {padding:8% 12% 8% 12%;}

.header-logo {margin-bottom:25px;}
.header-menu {width:100%; font-size:0.9em; text-align:center;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
.bouton {min-width:10%; width:25%; margin-right:2%;}
.bouton-page {width:80%; margin:0 10% 0 10%;}

.colonne-gauche {float:left; width:100%; margin:0 auto;}
.colonne-droite {float:left; width:100%;}

.colonne-gauche img {width:100%; height:auto;}
.colonne-droite img {width:100%; height:auto;}

}







@media only screen and (max-width:660px) and (orientation:portrait) {
h1 {font-size:1.6em; font-weight:700; color:#4085C6;}
h2 {font-size:1.3em; font-weight:600;}
.l {font-size:1em;}
.xl {font-size:1em;}
.xxl {font-size:1.4em;}
.margin-bot-s {margin-bottom:4%;}
.margin-bot-m {margin-bottom:6%;}
.padding-first {padding-left:16px;}
.global {width:92%;}
header {padding:25px 0;}
.header-logo {margin-bottom:25px;}
.header-menu {width:100%; font-size:0.9em; text-align:center;}
.header-nav {display:inline-block;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
.bouton {min-width:10%; width:30%; margin-right:2%;}
.bouton-page {width:80%; margin:0 10% 0 10%;}
.colonne-gauche {float:left; width:100%; margin:0 auto;}
.colonne-droite {float:left; width:100%;}
.colonne-gauche img {width:100%; height:auto;}
.colonne-droite img {width:100%; height:auto;}
.colonne-partenaires {display:inline-block; width:30%; margin:0 auto;}
.photo-accueil {width:100%; height:350px;}
.bloc-texte-accueil {width:50%;}
.bloc-text-h {height:auto;}
}









@media only screen and (max-width:660px) and (orientation:landscape) {
h1 {font-size:1.4em; font-weight:700; color:#4085C6;}
h2 {font-size:1.2em; font-weight:600;}
.l {font-size:1em;}
.xl {font-size:1em;}
.xxl {font-size:1.4em;}
.margin-bot-s {margin-bottom:2%;}
.margin-bot-m {margin-bottom:6%;}
.padding-first {padding-left:16px;}
.global {width:92%;}
header {padding:25px 0;}
.header-logo {margin-bottom:25px;}
.header-menu {width:100%; font-size:0.9em; text-align:center;}
.header-nav {display:inline-block;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
.bouton {min-width:10%; width:30%; margin-right:2%;}
.bouton-page {width:80%; margin:0 10% 0 10%;}
.colonne-gauche {float:left; width:100%; margin:0 auto;}
.colonne-droite {float:left; width:100%;}
.colonne-gauche img {width:100%; height:auto;}
.colonne-droite img {width:100%; height:auto;}
.photo-accueil {width:100%; height:350px;}
.bloc-texte-accueil {width:50%;}
}







@media only screen and (max-width:420px) and (orientation:portrait) {
h1 {font-size:1.4em; font-weight:700; color:#4085C6;}
h2 {font-size:1.2em; font-weight:600;}
.l {font-size:1em;}
.xl {font-size:1em;}
.xxl {font-size:1.4em;}
.margin-bot-s {margin-bottom:2%;}
.margin-bot-m {margin-bottom:6%;}
.padding-first {padding-left:16px;}
.padding-bloc-centre {padding:5% 10% 5% 10%;}
.global {width:92%;}
header {padding:25px 0;}
.header-logo {margin-bottom:25px;}
.header-menu {width:100%; font-size:0.8em; text-align:center;}
.header-nav {display:inline-block;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
.bouton {min-width:10%; width:25%; margin-right:2%;}
.bouton-page {width:80%; margin:0 10% 0 10%;}
.colonne-gauche {float:left; width:100%; margin:0 auto;}
.colonne-droite {float:left; width:100%;}
.colonne-gauche img {width:100%; height:auto;}
.colonne-droite img {width:100%; height:auto;}
.photo-accueil {width:100%; height:350px;}
.bloc-texte-accueil {width:50%;}
.bloc-text-h {height:auto;}
}









@media only screen and (max-width:420px) and (orientation:landscape) {
h1 {font-size:1.4em; font-weight:700; color:#4085C6;}
h2 {font-size:1.2em; font-weight:600;}
.l {font-size:1em;}
.xl {font-size:1em;}
.xxl {font-size:1.4em;}
.margin-bot-s {margin-bottom:2%;}
.margin-bot-m {margin-bottom:6%;}
.padding-first {padding-left:16px;}
.global {width:92%;}
header {padding:25px 0;}
.header-logo {margin-bottom:25px;}
.header-menu {width:100%; font-size:0.9em; text-align:center;}
.header-nav {display:inline-block;}
.header-menu-gauche {float:left; text-align:center; width:100%; margin-bottom:2%;}
.header-menu-droite {float:right; padding-top:8px; width:100%; text-align: center;}
.bouton {min-width:10%; width:30%;}
.bouton-page {width:80%; margin:0 10% 0 10%;}
.colonne-gauche {float:left; width:100%; margin:0 auto;}
.colonne-droite {float:left; width:100%;}
.colonne-gauche img {width:100%; height:auto;}
.colonne-droite img {width:100%; height:auto;}
.photo-accueil {width:100%; height:350px;}
.bloc-texte-accueil {width:50%;}
}