@charset "UTF-8";
/*!
* Feuille de style site CPMG - @author: N.B.
*/
/* ----------------------------- */
/* ==Table Of Content            */
/* ----------------------------- */
/* 1- Couleurs */
/* 2- Fontes */
/* 3- Fonticon */
/* 4- Structure */
/* 5- Menu responsive */
/* 6- Pages */
/* ----------------------------- */
/* ==Couleurs                    */
/* ----------------------------- */
/*
/* Liens */
/* Change la couleur des éléments cliquables au survol */
/* Bouton Facebook */
/* Couleur texte menu principal*/
/* Accentuation */
/* Titres */
/* Villes*/
/* Erreur formulaire */
/* Fonds */
/* La texture ou la couleur de fond du contenu "main". */
/* La texture ou la couleur de fond de la page. Appliquée sur le "body" */
/* Mixins couleurs */
/* Définitions couleurs */
body {
  background: grey;
}

.wrapper {
  background: #E9E6C9;
}

/* Bouton */
/* Bouton Hello asso */
.assobtn {
  /* Mixin transition couleur div/boîtes */
  background-color: #CA6144;
  transition: background-color 1s;
  color: white;
  border: none;
}

.assobtn:hover {
  transition: background-color 1s;
  background-color: #e1a493;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  color: #393E51;
}

/* Autre */
.error {
  color: red;
}

/* ----------------------------- */
/* ==Fontes                      */
/* ----------------------------- */
/*
/* Font Mixins */
/* ------------*/
/* Font-face - Compatible Chrome, IE, Firefox */
/* Fontes de contenus */
/* ----------------------*/
@font-face {
  font-family: "Arima";
  src: url("../fonts/arimar.eot");
  /* Pour IE9 Compat mode */
  src: url("../fonts/arimar.woff") format("woff"), url("../fonts/arimar.svg#abcd") format("svg"), url("../fonts/arimar.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
}

@font-face {
  font-family: "ArimaBold";
  src: url("../fonts/arimab.eot");
  /* Pour IE9 Compat mode */
  src: url("../fonts/arimab.woff") format("woff"), url("../fonts/arimab.svg#abcd") format("svg"), url("../fonts/arimab.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-variant: normal;
}

@font-face {
  font-family: "ArimaExtraBold";
  src: url("../fonts/arimaeb.eot");
  /* Pour IE9 Compat mode */
  src: url("../fonts/arimaeb.woff") format("woff"), url("../fonts/arimaeb.svg#abcd") format("svg"), url("../fonts/arimaeb.ttf") format("truetype");
  font-weight: bolder;
  font-style: normal;
  font-variant: normal;
}

/* Fontes de titres */
/* ----------------------*/
@font-face {
  font-family: "Atma";
  src: url("../fonts/atmar.eot");
  /* Pour IE9 Compat mode */
  src: url("../fonts/atmar.woff") format("woff"), url("../fonts/atmar.svg#abcd") format("svg"), url("../fonts/atmar.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
}

@font-face {
  font-family: "AtmaBold";
  src: url("../fonts/atmab.eot");
  /* Pour IE9 Compat mode */
  src: url("../fonts/atmab.woff") format("woff"), url("../fonts/atmab.svg#abcd") format("svg"), url("../fonts/atmab.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-variant: normal;
}

/* ----------- */
/* Definitions */
body {
  font-family: "Arima", arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, nav {
  font-family: "Atma", arial, sans-serif;
}

nav {
  font-size: 1em;
}

p {
  line-height: 1.5em;
  font-size: 1.25em;
}

a {
  font-family: "ArimaBold", arial, sans-serif;
  text-decoration: none;
}

strong {
  font-weight: bold;
  color: #566683;
}

/* ---------------- */
/* Widget HelloAsso */
.helloasso {
  font-size: small;
}

.assobtn {
  font-family: "Atma", arial, sans-serif;
}

/* ----------------------------- */
/* ==Fonticons            */
/* ----------------------------- */
/*
/*----------------------------------*/
/* Elements de graphisme des menus et consort */
@font-face {
  font-family: "cpmg";
  src: url("../fonts/cpmg.eot");
  src: url("../fonts/cpmg.eot?#iefix") format("embedded-opentype"), url("../fonts/cpmg.woff") format("woff"), url("../fonts/cpmg.ttf") format("truetype"), url("../fonts/cpmg.svg#cpmg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "cpmg" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "cpmg" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-social-alt:before {
  content: "\61";
}

.icon-social:before {
  content: "\62";
}

.icon-social-places:before {
  content: "\63";
}

.icon-pinboard:before {
  content: "\64";
}

.icon-pin:before {
  content: "\65";
}

.icon-pill:before {
  content: "\66";
}

.icon-thumbs-down:before {
  content: "\69";
}

.icon-thumbs-up:before {
  content: "\6a";
}

.icon-login:before {
  content: "\6b";
}

.icon-logout:before {
  content: "\6c";
}

.icon-eye:before {
  content: "\6d";
}

.icon-social-1:before {
  content: "\6e";
}

.icon-social-circled:before {
  content: "\6f";
}

.icon-social-squared:before {
  content: "\70";
}

.icon-compass:before {
  content: "\71";
}

.icon-address:before {
  content: "\72";
}

.icon-book-open:before {
  content: "\73";
}

.icon-help:before {
  content: "\74";
}

.icon-target-two:before {
  content: "\75";
}

.icon-target:before {
  content: "\76";
}

.icon-lightbulb:before {
  content: "\77";
}

.icon-link:before {
  content: "\78";
}

.icon-home:before {
  content: "\79";
}

.icon-foot:before {
  content: "\7a";
}

.icon-map:before {
  content: "\67";
}

.icon-arrow-circle-o-right:before {
  content: "\68";
}

.icon-arrow-right:before {
  content: "\41";
}

.icon-arrow-circle-o-left:before {
  content: "\42";
}

.icon-arrow-circle-o-up:before {
  content: "\43";
}

.icon-arrow-circle-o-down:before {
  content: "\44";
}

.icon-arrow-left:before {
  content: "\45";
}

.icon-arrow-down:before {
  content: "\46";
}

.icon-arrow-up:before {
  content: "\47";
}

.icon-envelope-o:before {
  content: "\48";
}

.icon-envelope:before {
  content: "\49";
}

.icon-glass:before {
  content: "\4a";
}

.icon-heartbeat:before {
  content: "\4b";
}

.icon-transgender-alt:before {
  content: "\4c";
}

.icon-umbrella:before {
  content: "\4d";
}

.icon-university:before {
  content: "\4e";
}

.icon-alert:before {
  content: "\4f";
}

.icon-beer:before {
  content: "\50";
}

.icon-circle-slash:before {
  content: "\51";
}

.icon-megaphone:before {
  content: "\52";
}

.icon-pulse:before {
  content: "\53";
}

.icon-skull:before {
  content: "\54";
}

.icon-air:before {
  content: "\55";
}

.icon-envelope-1:before {
  content: "\56";
}

.icon-exclamation:before {
  content: "\57";
}

.icon-inject:before {
  content: "\58";
}

.icon-pen-eye:before {
  content: "\59";
}

.icon-unicorn-1:before {
  content: "\5a";
}

.icon-unicorn:before {
  content: "\30";
}

.icon-hand-block:before {
  content: "\31";
}

.icon-eye-disabled:before {
  content: "\32";
}

.icon-eye-view:before {
  content: "\33";
}

.icon-happy-smiley:before {
  content: "\34";
}

.icon-happy-smiley-very:before {
  content: "\35";
}

.icon-sad-smiley:before {
  content: "\36";
}

.icon-angry-smiley:before {
  content: "\37";
}

.icon-arrow-circle-1-down:before {
  content: "\38";
}

.icon-arrow-circle-1-right:before {
  content: "\39";
}

.icon-arrow-circle-1-left:before {
  content: "\21";
}

.icon-arrow-circle-1-up:before {
  content: "\22";
}

.icon-heart-broken:before {
  content: "\23";
}

.icon-light-up:before {
  content: "\24";
}

/* ----------------------------- */
/* ==Structure                   */
/* ----------------------------- */
/*
/*----------------------------------*/
/* Structure, variables */
/* Définition marges */
/* Padding gauche et droite, utilisé pour chaque grand block. */
/* Mode Responsive */
/* Mixins */
/*----------------------------------*/
/* Base */
html {
  height: 100vh;
}

body {
  min-height: 100vh;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: auto;
}

/* Mixin FB Button */
/* Taille max */
#main, .header-titre {
  max-width: 1280px;
  margin: 0 auto;
}

/* Code */
.header-titre > .logo, h1 {
  display: inline-block;
  vertical-align: top;
  padding-top: 0.5em;
}

.logo {
  width: 4em;
  margin: 1em 1em 0 0;
}

.header-titre {
  padding: 0 2em;
}

.header-titre-sm {
  padding: 0 2em;
}

.facebook-button span, .facebook-button-sm span {
  /* Mixin transition de l'icone Facebook uniquement */
  color: steelblue;
  transition: color 1s;
}

.facebook-button span:hover, .facebook-button-sm span:hover {
  transition: color 1s;
  color: #b2cce1;
}

.facebook-button {
  position: absolute;
  right: 0.75em;
  top: 0.5em;
  font-size: 2.5em;
}

.facebook-button-sm {
  position: absolute;
  right: 2.25em;
  top: 0.5em;
  font-size: 2.5em;
}

#main {
  padding: 0 2em;
}

footer {
  padding: 0 2em;
  margin-top: auto;
}

footer > p {
  padding: 1em 0;
  text-align: center;
}

/* Formulaires */
/* Variables */
/*----------------------------------*/
form {
  /* Pour le centrer dans la page */
  display: table;
  margin: 0 auto;
  /* Pour voir les limites du formulaire */
  /*border: 1px solid #CCC;*/
}

form .button {
  text-align: right;
}

#anonymous {
  margin-top: 0.25em;
}

.form-bubble {
  display: block;
  border-radius: 1em;
  max-width: 50vw;
  min-height: 10em;
}

/* Aère les blocs */
form div + div {
  margin-top: 1em;
}

label {
  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
  display: block;
  width: 100%;
  margin: 0.25em 0;
}

input {
  /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
  font: 1em sans-serif;
  /* Pour donner la même dimension à tous les champs textuels */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Pour harmoniser l'apparence des bordures des champs textuels */
  border: 1px solid #999;
}

/* Animation button */
@-webkit-keyframes dingading {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* Bouton */
form button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 10em;
}

form button:hover {
  -webkit-animation-name: dingading;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

/* ----------------------------- */
/* ==Menus responsive            */
/* ----------------------------- */
/*
/*----------------------------------*/
/* Eléments responsive : menu et menu hamburger,  top, disparition illustration en mobile */
#menu-hamburger {
  display: none;
}

/* Etat par défaut du menu Hamburger : non-déplié. */
@media screen and (max-width: 1025px) {
  /*Largeur à ajuster si icônes*/
  .menumobile, .header-titre-sm {
    display: block;
  }
  .menucomplet, .header-titre {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  /*Largeur à ajuster si icônes*/
  .menumobile, .header-titre-sm {
    display: none;
  }
  .menucomplet, .header-titre {
    display: block;
  }
}

/* Hierarchie des deux menus :
/*
/* .menucomplet > .mainmenu ---> le menu Desktop.
/* .menumobile > #menu-hamburger -----> le menu Mobile.
/* .mainmenuitem est commun aux deux menus. */
#navigation {
  background-color: #bf5436;
}

.menubox {
  max-width: 1280px;
  margin: 0 auto;
}

.mainmenu {
  display: flex;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}

/* -------------------------*/
/* -------------------------*/
/* Bouton = #hamburger */
#hamburger {
  position: absolute;
  top: 1em;
  right: 1em;
  float: right;
  border-radius: 0.5em;
  border: none;
  /* Mixin transition couleur div/boîtes */
  background-color: #CA6144;
  transition: background-color 1s;
}

#hamburger:hover {
  transition: background-color 1s;
  background-color: #e1a493;
}

#hamburger:focus {
  text-decoration: none;
}

/* -------------------------*/
/* Burger icon */
/* Burger Mixins */
/* Burger Variables */
/* -------------------------*/
/* Icone Burger éléments + animation */
#nav-icon1 {
  width: 2.75em;
  height: 2.75em;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 100%;
  background: white;
  border-radius: 0.2em;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0.5em;
}

#nav-icon1 span:nth-child(2) {
  top: 1.25em;
}

#nav-icon1 span:nth-child(3) {
  top: 2em;
}

#nav-icon1.open span:nth-child(1) {
  top: 1.25em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 1.25em;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/**/
/* -------------------------*/
.menumobile {
  margin-top: 0.5em;
  background-color: #bf5436;
}

/* -------------------------*/
/* Menu ouvert hamburger */
#menu-hamburger {
  margin: auto;
  list-style: none;
  padding: 0;
}

/* -------------------------*/
/* Commun aux deux menus */
.mainmenuitem {
  padding: 0.50em;
  color: white;
  /* Mixin transition couleur div/boîtes */
  background-color: #CA6144;
  transition: background-color 1s;
}

.mainmenuitem:hover {
  transition: background-color 1s;
  background-color: #e1a493;
}

a {
  /* Mixin transition de couleur texte uniquement */
  color: #CA6144;
  transition: color 1s;
}

a:hover {
  transition: color 1s;
  color: #e1a493;
}

/* Taille icones des menus */
.icon-home:before, .icon-help:before, .icon-compass:before, .icon-eye-view:before, .icon-transgender-alt:before, .icon-heart-broken:before, .icon-megaphone:before, .icon-envelope:before {
  font-size: 1.25em;
  margin-right: 0.25em;
  vertical-align: middle;
}

/* ----------------------------- */
/* ==Pages                       */
/* ----------------------------- */
button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.5em;
  padding: 0.5em;
}

/*----------------------------------*/
/* Accueil */
.information {
  margin: 0 auto;
  padding: 1em;
  border: 2px dotted #566683;
  border-radius: 1em;
  margin-bottom: 1em;
  background-color: white;
}

.information > h3 {
  margin: auto 0;
}

.googledoc {
  overflow-y: hidden;
  padding-bottom: 4em;
  position: relative;
  height: 0;
}

.googledoc iframe {
  left: 0;
  top: 0;
  height: 4em;
  width: 100%;
  border: none;
  overflow: hidden;
}

.img-responsive {
  max-width: 65%;
  margin: 0 auto;
}

.img-responsive img {
  max-width: 100%;
  height: auto;
}

.img-responsive img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}

.icon-exclamation:before {
  font-size: 1.25em;
  margin-right: 0.25em;
  vertical-align: middle;
}

/*----------------------------------*/
/* Où ? Quand ? */
@media screen and (min-width: 0) and (max-width: 1025px) {
  .bigflex {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 1025px) {
  .bigflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bigflex_left, .bigflex_right {
    width: 48%;
  }
}

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ouquand_menu {
  display: flex;
  justify-content: center;
}

.lillebtn, .lensbtn {
  border: none;
  font-family: "Atma";
  color: white;
  margin: 0.5em;
}

.lillebtn {
  /* Mixin transition couleur div/boîtes */
  background-color: teal;
  transition: background-color 1s;
}

.lillebtn:hover {
  transition: background-color 1s;
  background-color: #00b3b3;
}

.lensbtn {
  /* Mixin transition couleur div/boîtes */
  background-color: #843b62;
  transition: background-color 1s;
}

.lensbtn:hover {
  transition: background-color 1s;
  background-color: #a74b7c;
}

h2.lillebox, h2.lensbox {
  margin: 0 auto;
  padding: 1em;
}

h2.lillebox {
  border-bottom: 5px solid teal;
}

h2.lensbox {
  border-bottom: 5px solid #843b62;
}

.icon-arrow-right {
  vertical-align: middle;
  margin-right: 0.5em;
}

.googledate {
  overflow-y: hidden;
  padding-bottom: 4em;
  position: relative;
  height: 0;
}

.googledate iframe {
  left: 0;
  top: 0;
  height: 4em;
  width: 100%;
  border: none;
  overflow: hidden;
}

.map-responsive {
  overflow-y: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  margin-bottom: 1em;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.icon-map:before {
  font-size: 1.25em;
  margin-right: 0.25em;
  vertical-align: middle;
}

/*----------------------------------*/
/* Transfriendly - SafeUnsafe boxes */
.safe-unsafe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box-titre, .box-content, .box-button {
  padding-bottom: 0.5em;
}

.box-titre {
  font-size: 1.5em;
  border-left: 1px solid #566683;
  border-right: 1px solid #566683;
  border-top: 1px solid #566683;
  padding: 0.5em 1em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

.box-content {
  border-left: 1px solid #566683;
  border-right: 1px solid #566683;
  padding: 0em 1em 1em 1em;
}

.box-button {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0.2em;
  /* Mixin transition couleur div/boîtes */
  background-color: #CA6144;
  transition: background-color 1s;
  color: white;
  font-size: 1.5em;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.box-button:hover {
  transition: background-color 1s;
  background-color: #e1a493;
}

#box-unfold1, #box-unfold2, #box-unfold3 {
  display: none;
  border-bottom: 1px solid #566683;
  border-left: 1px solid #566683;
  border-right: 1px solid #566683;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.googlesafe {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  overflow-y: hidden;
  padding-bottom: 10em;
  position: relative;
  height: 0;
  background-color: white;
}

.googlesafe iframe {
  left: 0;
  top: 0;
  height: 10em;
  width: 100%;
  border: none;
  overflow: hidden;
}

.safe, .unsafe, .neutral {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.5em;
  max-width: 341.66667px;
  margin: 1em;
  flex: 1 1 auto;
}

.safe .box-titre {
  background: linear-gradient(#99cc66, transparent);
}

.unsafe .box-titre {
  background: linear-gradient(#ff6666, transparent);
}

.neutral .box-titre {
  background: linear-gradient(#ccc, transparent);
}

/* Box icones */
.icon-light-up:before, .icon-skull:before, .icon-air:before {
  font-size: 1.75em;
  margin-right: 0.25em;
  vertical-align: middle;
}

/*----------------------------------*/
/* Maltraitance + Contact -> Formulaire */