@charset "UTF-8";
/************************************************

Stylesheet: Main Stylesheet

*************************************************/
/*********************
COULEURS
*********************/

.txtBlc {color: rgb(255, 255, 255);}
.txtGris100 {color: rgb(100, 100, 100);}
.txtGris80 {color: rgb(80, 80, 80);}
.txtGris200 {color: rgb(200, 200, 200);}

.bckBlc {background-color: rgb(255, 255, 255);}
.bckNoir {background-color: rgb(0, 0, 0);}
.bckGris80 {background-color: rgb(80, 80, 80);}
.bckGris230 {background-color: rgb(230, 230, 230);}
.bckGris240 {background-color: rgb(240, 240, 240);}
.bckGrisCchaud {background-color: rgb(244, 238, 234);}
.bckBlc40 {background-color: rgba(255, 255,255, 0.4);}

/* Couleurs ACI */
.bckBleuACI {background-color: rgb(0, 160, 230);}
.bckGrisACI {background-color: rgb(110, 110, 110);}

.couleurCollectif {background-color: rgb(230, 187, 68);} /*Jaune*/
.couleurMaison {background-color: rgb(122, 175, 88);} /*Vert*/
.couleurTertiaire {background-color: rgb(165, 130, 126);} /*Marron*/

.couleurJauneFonce {background-color: rgb(212, 175, 74);} /*Jaune foncé*/
.couleurVertFonce {background-color: rgb(91, 140, 59);} /*Vert foncé*/
.couleurMarronFonce {background-color: rgb(148, 117, 112);} /*Marron foncé*/

/*********************
LINK STYLES
*********************/
a:link, a:visited:link {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/*********************
TITRES
*********************/

/* Regular 400 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  text-rendering: auto;
}

h1, .h1 {font-size: 3rem;}
h2, .h2 {font-size: 2.4rem;}
h3, .h3 {font-size: 1.4rem;}
h4, .h4 {font-size: 1.2rem;}
h5, .h5 {font-size: 0.75rem;}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none;
}


/*********************
GENERAL
*********************/

/*Usually default font-size of the browser is 16px.
Setting font-size: 100% will make 1rem = 16px.*/
/*https://nekocalc.com/fr/px-a-rem-convertisseur*/
html {
  font-size: 100%; /*affecte tous les rem en cascade derrière*/
}

body {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
  /*Ne marche pas sur Edge
  mais à mettre quand même
  pour contrer le légèr bleu de foundation*/
  background-color: rgb(255, 255, 255);
}

.fondSousHeaderIndex,
.fondSousHeader {
  background-image: url(../images/trait-gris-1x14.png);
  background-position: left -5px;
  background-repeat: repeat-x;
  display: block;
  height: 20px;
}

.fondSousHeaderIndex {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.fondSousHeader .traitBleu1 {
  background-image: url(../images/trait-gris-1x14.png);
  background-position: left -5px;
  background-repeat: repeat-x;
  display: block;
  width: 150px;
  height: 20px;
  background-color: rgb(0, 160, 230);
}

main.main {
  min-height: 800px;
}

p {
  /*line-height: 1.4rem;*/
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.petitTexte {
  font-size: 0.9rem;
}

.texteCentre {
  text-align: center;
}

.cell {
  /*border: 1rem solid rgba(150,150,150,0.5);*/
}

.paddingGD {padding-left: 1.5rem; padding-right: 1.5rem;}

.paddingH {padding-top: 2rem;}
.paddingB {padding-bottom: 2rem;}
.paddingHB {padding-top: 1.5rem; padding-bottom: 1.5rem;}
.paddingHB-grand {padding-top: 3rem; padding-bottom: 3rem;}

.marginB {margin-bottom: 2rem;}
.marginB-grand {margin-bottom: 4rem;}
.marginHB-grand {margin-top: 4rem; margin-bottom: 4rem;}

.fondSeparation {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.posRel {
  position: relative;
}

.boxArrondie {
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
  padding: 0rem;/*pour caler des fonds perdus*/
}

.imageTempBox {
  padding: 1rem;
  text-align: center;
  min-height: 300px;
  background-color: rgb(240, 240, 240);
  font-size: 2rem;
  color: rgb(218, 160, 160);
}

.cell.imageBox {
  text-align: center;
  overflow: hidden;
}

.imageBox img {
  width: 100%;
}

.legendeImage {
  font-size: 1.6rem;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  margin-top: 1rem;
}


/****************************************************
BOUTON GÉNÉRIQUE
****************************************************/

a.btGenerique {
  margin-top: 1.9rem;
  display: block;
  height: 40px;
  padding: 0px;
  text-align: right;
}

a.btGenerique .txtBt {
  display: inline-block;
  vertical-align: top;
  padding-top: 6px;
  margin-right: 12px;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  color: rgb(80, 80, 80);
  text-transform: uppercase;
}

a.btGenerique .iconeGenerique {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-image: url(../images/icone-bouton-fleche.png), url(../images/icone-bouton-fleche.png), url(../images/icone-bouton-plus.png);
  background-position: -20px top, -20px top, right top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: rgb(80, 80, 80);
  margin: 0px;
  transition: background-position 0.2s ease-in;
}

a.btGenerique.catCollectif .iconeGenerique {background-color: rgb(230, 187, 68);} /*Jaune*/
a.btGenerique.catCollectif .txtBt {color: rgb(230, 187, 68);}
a.btGenerique.catMaison .iconeGenerique {background-color: rgb(122, 175, 88);} /*Vert*/
a.btGenerique.catMaison .txtBt {color: rgb(122, 175, 88);}
a.btGenerique.catTertiaire .iconeGenerique {background-color: rgb(165, 130, 126);} /*Marron*/
a.btGenerique.catTertiaire .txtBt {color: rgb(165, 130, 126);}

a.btGenerique .iconeGenerique:hover,
a.btGenerique .iconeGenerique:focus,
a.btGenerique .iconeGenerique:active {
  background-position: 4px top, 16px top, left -40px;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

a.btGenerique.catCollectif .iconeGenerique:hover {
  background-color: rgb(148, 117, 112);/*Marron foncé*/
  color: rgb(148, 117, 112);
} 
a.btGenerique.catMaison .iconeGenerique:hover {
  background-color: rgb(91, 140, 59);/*Vert foncé*/
  color: rgb(91, 140, 59);
}
a.btGenerique.catRenov .iconeGenerique:hover {
  background-color: rgb(212, 175, 74);/*Jaune foncé*/
  color: rgb(212, 175, 74);
} 

.pasDeBt {
  display: block;
  width: 100%;
  height: 34px;
  background-color: rgb(0, 160, 230);
  margin-top: 1.9rem;
}


/****************************************************
MENU SECONDAIRE (Recrutement et Contact)
****************************************************/

a.btMenuSecondaire {
  background-repeat: no-repeat;
  display: block;
  height: 25px;
  color: rgba(0, 158, 226, 0.5);
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-size: 1.1rem;
  position: relative; /* Pour absolute qui suit */
  /*border: 1px solid rgb(0, 160, 230);*/
}

a.btMenuSecondaire.btRecrutement:hover,
a.btMenuSecondaire.btContact:hover {
  color: rgb(0, 160, 230);
}

span.iconeRecrute {
  background-image: url(../images/alerte-recrutement.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  height: 26px;
  width: 26px;
  position: absolute;
}

/*Small*/
/**************************************************/

#menuSecSmall a.btMenuSecondaire.btRecrutement {
  background-image: url(../images/icone-contact.png);
}

#menuSecSmall a.btMenuSecondaire.btContact {
  background-image: url(../images/icone-contact.png);
}

#menuSecSmall a.btMenuSecondaire {
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 30px;
  padding: 2px 0px 0px 40px;
  margin: 0px 200px 10px 15px;
}

#menuSecSmall a.btMenuSecondaire.btRecrutement:hover,
#menuSecSmall a.btMenuSecondaire.btContact:hover {
  background-position: left bottom;
}

#menuSecSmall span.iconeRecrute {
  left: 250px; 
  top: 12px;
}


/*Medium and up*/
/**************************************************/

#menuSecMedium a.btMenuSecondaire.btRecrutement {
  background-image: url(../images/icone-recrutement.png);
  right: 300px;
}

#menuSecMedium a.btMenuSecondaire.btContact {
  background-image: url(../images/icone-contact.png);
  right: 200px;
}

#menuSecMedium a.btMenuSecondaire {
  background-position: right top;
  display: block;
  height: 30px;
  padding: 2px 40px 0px 0px;
  position: absolute;
  right: 0;
  top: 1.5rem;
}

#menuSecMedium a.btMenuSecondaire.btRecrutement:hover,
#menuSecMedium a.btMenuSecondaire.btContact:hover {
  background-position: right bottom;
}

#menuSecMedium span.iconeRecrute {
  left: -35px;
  top: 10px;
}


/****************************************************
HEADER ET TITLE-BAR MENU
****************************************************/

.header {
  background-color: rgb(255, 255, 255);
  border-bottom: 8px solid rgb(0, 160, 230);
}

a.logoACI {
  margin-top: 10px; /* Voir aussi MQ */
  margin-bottom: 0px; /* Voir aussi MQ */
  display: block;
  text-align: center;
}

#responsive-menu,
#responsive-menu ul,
#off-canvas {
  background-color: transparent;
}

.top-bar {
  background-image: none;
  padding-bottom: 0px;
  padding-left: 0px;
}


/*Tous les éléments du menu*/
/**************************************************/

#responsive-menu .menuBox a {
  background-color : none;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
}


/*Uniquement le menu de niveau 1*/
/**************************************************/

/*Contre de foundation*/
.menu .active > a {
  background-color : transparent;
}

/* Voir aussi MQ */
#responsive-menu .menuBox > ul.menu {
  margin-top: 0px;
  margin-bottom: 10px;
  background-color: rgb(0,0,0); 
  padding-bottom: 15px;
}

#responsive-menu .menuBox > ul.menu > li.menu-item > a {
  display: block;
  text-align: left;/* Voir aussi MQ */
  font-size: 1.1rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 1rem;
  margin-right: 1rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top:  22px; /* Pour voir l'icône maison */
}

/*Gestion bordure oblique pour accordion et dropdown*/
#responsive-menu .menuBox > ul.menu > li.is-accordion-submenu-parent > a,
#responsive-menu .menuBox > ul.menu > li.is-dropdown-submenu-parent > a {
  position: relative;
}

/*Effacer les flèches*/
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
  border: none;
}

#responsive-menu .menuBox > ul.menu > li.menu-item > a:hover,
#responsive-menu .menuBox > ul.menu > li.menu-item > a:focus {
  color: rgb(255, 255, 255);
}


/*
.current_page_item {} // Class for Current Page
.current-cat {} // Class for Current Category
.current-menu-item {} // Class for any other current Menu Item
.menu-item-type-taxonomy {}// Class for a Category
.menu-item-type-post_type {} // Class for Post types
.menu-item-type-custom {} // Class for any custom links
.menu-item-home {} // Class for the home Link

.current-menu-parent is the element directly above
or to the left of the page that’s currently open
(.current-menu-item and .current_page_item).

.current-menu-ancestor are all the menu elements
that are above or to the left of the currently open page
(.current-menu-item and .current_page_item).

.current-menu-item {} ne mache pas, mais .current_menu_item {} marche ??????????????

*/

/*Page en cours + Page parent quand page enfant en cours
+ pas de :hover différent quand cette page est déjà en cours*/
/*current_menu_item is the active element in the menu,
independent from the type (page, archives, post, etc.)*/
#responsive-menu .menuBox > ul.menu > li.current_page_item a,
#responsive-menu .menuBox > ul.menu > li.current_page_item a:hover,
#responsive-menu .menuBox > ul.menu > li.current-menu-parent > a,
#responsive-menu .menuBox > ul.menu > li.current-menu-parent > a:hover,
#responsive-menu .menuBox > ul.menu > li.current-menu-item > a,
#responsive-menu .menuBox > ul.menu > li.current-menu-item > a:hover {
  color: rgb(0, 160, 230);
}


/*Cas particulier bouton accueil*/
#responsive-menu .menuBox > ul.menu > li.menu-item.btAccueil > a {
  background-image: url(../images/icone-maison.png);
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  min-width: 50px;
}

/*Cas particulier bouton accueil*/
#responsive-menu .menuBox > ul.menu > li.menu-item.btAccueil > a:hover,
#responsive-menu .menuBox > ul.menu > li.menu-item.btAccueil > a:focus {
  background-image: url(../images/icone-maison-hover.png);
}

/*Page en cours - Cas particulier bouton accueil
+ pas de :hover différent quand cette page est déjà en cours*/
#responsive-menu .menuBox > ul.menu > li.current_page_item.btAccueil a,
#responsive-menu .menuBox > ul.menu > li.current_page_item.btAccueil a:hover {
  background-image: url(../images/icone-maison-hover.png);
}

/*Désactiver la flèche pour les parents*/
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a:hover {
  cursor: default;
}

/*Couleur flèches*/
/*En small : accordion*/
#responsive-menu .menuBox > ul.menu > li.is-accordion-submenu-parent > a::after {
    /*Géré par la bordure oblique (voir ci-dessus)*/
}

/*En large : dropdown*/
#responsive-menu .menuBox > ul.menu > li.is-dropdown-submenu-parent > a::after {
  /*Géré par la bordure oblique (voir ci-dessus)*/
}


/*Uniquement les sous-menus*/
/**************************************************/
/*Sous-menu en small : accordion*/
/*Sous-menu en large : dropdown*/

#responsive-menu .menuBox ul.is-accordion-submenu {
  background-color: transparent;
}

#responsive-menu .menuBox ul.is-dropdown-submenu {
  background-color: rgb(255, 255, 255);
  margin-top: 0rem;/*Pas plus sinon bug rollover*/
  box-shadow: 0px 6px 8px rgba(80, 80, 80, 0.4);
  border: none;/*Contre de foundation*/
}

#responsive-menu .menuBox li.menu-item li.is-accordion-submenu-item a,
#responsive-menu .menuBox > ul.menu > li.current_page_item li.is-accordion-submenu-item a,
#responsive-menu .menuBox li.menu-item li.is-dropdown-submenu-item a,
#responsive-menu .menuBox > ul.menu > li.current_page_item li.is-dropdown-submenu-item a {
  padding: 1rem;
  color: rgb(80, 80, 80);
  font-size: 1.2rem;
  text-align: left;
}

/*Sous-menu en cours*/
/* + :hover sur les sous-menu*/
#responsive-menu .menuBox li.menu-item li.current_page_item a,
#responsive-menu .menuBox li.menu-item li.is-accordion-submenu-item a:hover,
#responsive-menu .menuBox > ul.menu > li.current_page_item li.is-accordion-submenu-item a:hover,
#responsive-menu .menuBox li.menu-item li.is-dropdown-submenu-item a:hover,
#responsive-menu .menuBox > ul.menu > li.current_page_item li.is-dropdown-submenu-item a:hover {
  background-color: rgb(80, 80, 80);
	color: rgb(255, 255, 255);
}


/*Bouton Hamburger*/
/* Clarifié le 02-09-25 */
/******************************************************************************************/

/* Important : on le masque par défaut pour éviter sa brève apparition
en attendant que foundation se charge */
.title-bar {
  display: none;
  background-color: transparent;
  margin-top: 0px;
  margin-bottom: 10px;
}

button.toggle-button .title-bar-title {
  color: rgb(0,0,0);
  font-family: prometo, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  margin-top: -16px;
}

.visuallyHidden {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px;
  padding: 0;
  border: 0; 
}

.hamburgerMenu {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  position: relative;
}

.hamburgerMenu .bar {
  position: absolute;
  display: block;
  width: 24px;
  height: 4px;
  background-color: rgb(0,0,0);
  padding: 0;
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
}

.hamburgerMenu .barHaut {
  top: 0px;
}
.hamburgerMenu .barMilieu {
  top: 10px; /*centrage*/
}
.hamburgerMenu .barBas {
  bottom: 0px;
}

/*La croix est cachée derrière le hamburger)*/
.hamburgerMenu .barVert,
.hamburgerMenu .barHoriz {
  top: 10px; /*centrage*/
  left: 10px;
  width: 1px;
}
.hamburgerMenu .barVert {transform: rotate(90deg);}


/* Au clic, le hamburger se centre en hauteur...  */
.checkbox4:checked + label > .hamburgerMenu > .barHaut {top: 10px;}
.checkbox4:checked + label > .hamburgerMenu > .barBas {bottom: 10px;}
/* ...disparaît...  */
.checkbox4:checked + label > .hamburgerMenu > .barHaut,
.checkbox4:checked + label > .hamburgerMenu > .barMilieu,
.checkbox4:checked + label > .hamburgerMenu > .barBas {
  background-color: transparent; 
}
/* ... la croix grandit (et du coup se recentre un peu)... */
.checkbox4:checked + label > .hamburgerMenu > .barVert,
.checkbox4:checked + label > .hamburgerMenu > .barHoriz {
  left: -3px;
  width: 30px;
}
/* ... et pivote */
.checkbox4:checked + label > .hamburgerMenu > .barVert {transform: rotate(45deg);}
.checkbox4:checked + label > .hamburgerMenu > .barHoriz {transform: rotate(-45deg);}


/*********************
PAGE NAVI (mieux structuré)
*********************/

/*.page-navigation {
  margin-top: 1rem; }*/

.page-navigation .pagination {
  background-color: rgb(230, 230, 230);
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  margin: 0rem;
  padding: 0.8rem 0rem 0.8rem 0rem;
  text-align: center;
}

.pagination li {display: inline-block;}/*Contre de foundation pour small*/

.pagination .blocPrecedent a,
.pagination .blocSuivant a {
  font-size: 1.5rem;
  color: rgb(181, 207, 49);
  display: inline-block;
  border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
}

.pagination .blocPrecedent a:hover,
.pagination .blocSuivant a:hover {
  color: rgb(110, 90, 90);
  background-color: rgb(181, 207, 49);
}

.pagination .blocPrecedent {
  float: left;
  text-align: left;
}

.pagination .blocSuivant {
  float: right;
  text-align: right;
}

.pagination a.btExtremite {color: rgba(110, 90, 90, 0.6);}
.pagination a.btExtremite:hover {color: rgba(110, 90, 90, 0.8);}

.pagination .lesNums ul {margin-bottom: 0rem;}/*Contre de foundation*/

.pagination .lesNums li.numPage {
  border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
  font-size: 1.5rem;
  overflow: hidden;
  line-height: -1rem;
}

.pagination .lesNums a.btNumPage {
  color: rgb(110, 90, 90);
}

.pagination .lesNums a.btNumPage:hover {
  background-color: rgba(146, 126, 122, 0.3);
}

.pagination .lesNums .current {
  background-color: rgb(146, 126, 122);
  color: rgb(255, 255, 255);
}


/*********************
CUSTOM PAGE NAVI (moins bien structuré)
*********************/

.custom-pagination {
  text-align: center;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  background-color: rgb(230, 230, 230);
  color: rgb(146, 126, 122);
  padding: 0.8rem 0rem 1.3rem 0rem;
}

/*Numéro en cours*/
.custom-pagination span.page-numbers.current {
  background-color: rgb(146, 126, 122);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #fff;
}

/*Bouton numéro pas en cours*/
.custom-pagination a.page-numbers {
  padding: 0.5rem;
}

.custom-pagination a.page-numbers:hover {
  color: rgb(146, 126, 122);
}

/*Bouton lien texte*/
.custom-pagination a.page-numbers.prev {float: left;}
.custom-pagination a.page-numbers.next {float: right;}
.custom-pagination a.page-numbers.prev,
.custom-pagination a.page-numbers.next {
  /*border: 1px solid green;*/
}

.custom-pagination span.dots {
  padding: 0;
  color: rgb(0, 0, 0);
}


/*********************
INDEX
*********************/

.titreIndex {
  margin-bottom: 0rem;
  padding-bottom: 0rem;
  text-align: center;
  color: rgb(0, 160, 230);
}

.ssTitreIndex {
  margin-top: 0rem;
  padding-top: 0rem;
  margin-bottom: 0rem;
  font-weight: 300; /*light*/
  color: rgb(0, 160, 230);;
}

.chapeauIndex {
  font-size: 1.2rem;
  font-weight: 700;
}

.bandeBlanche {
  background-image: url(../images/bande-blanche-index.png);
  background-position: left top;
  background-repeat: repeat-x;
}

.iconeIndexBox {
  text-align: center;
  margin-bottom: 1rem;
}

.txtGroupe {
  font-size: 1.2rem;
}

.temoignage.guillBleu {
  background-image: url(../images/guillemets-bleus.png);
  /* color: rgb(0, 160, 230); */
}

.temoignage.guillGris {
  background-image: url(../images/guillemets-gris.png);
  /* color: rgb(80, 80, 80); */
}

.temoignage {
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: 4rem;
  padding-left: 1.6rem;
}

.signTemoignage {
  text-align: right;
  font-size: 0.9rem;
  font-style: italic;
}

.photoMetiers {
  background-image: none; /*Voir aussi MQ*/
}



/*********************
INDEX : Slider
*********************/

.sliderIndex {
  position: relative;/*Pour absolute qui suit (fondSousHeaderIndex) */
}

/*Contre de foundation*/
.rsUni, .rsUni .rsOverflow, .rsUni .rsSlide, .rsUni .rsVideoFrameHolder, .rsUni .rsThumbs {
  background-color: rgb(255, 255, 255);
}

.royalSlider {
  min-height: 300px;/*Voir aussi mediaqueries*/
}

.royalSlider img {
  width: 100%;
}

/*Selecteur plus puissant*/
a.btGenerique.btSlider {
  margin-top: 1.3rem;
  width: 10rem;
  padding-right: 0.6rem;
  border: 1px solid rgba(194, 75, 57, 0.5);
}

/*Mediaqueries inutilisables ici*/
.sliderSmall {
  min-height: 300px;
}

.sliderLarge .boxDansSlider,
.sliderSmall .boxDansSlider {
  text-align: center;
  padding: 1.6rem 1.9rem 1.3rem 1.9rem;
  /*background-color: rgb(255, 255, 255);*/
  color: rgb(66, 62, 55);
}

/*Mediaqueries inutilisables ici*/
.sliderSmall .boxDansSlider {
  margin: auto;
  margin-top: 15.6rem;
}

/*Mediaqueries inutilisables ici*/
.sliderLarge .boxDansSlider {
  min-width: 15rem;
}

.texteSlider {
  color: rgb(66, 62, 55);
}

.texteSlider small {
  color: rgba(66, 62, 55, 0.8);
}



/*********************
INDEX : Clients
*********************/

.extraitClientBox .cellImgClient {
  width: 100%;       /* largeur fixe du bloc */
  height: 150px;      /* hauteur fixe du bloc */
  display: flex;
  align-items: center;  /* agit verticalement sur le contenu d’un conteneur flex */
  justify-content: center;
  overflow: hidden;   /* évite les débordements */
}

.extraitClientBox .cellImgClient img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* garde le ratio */
}

/*********************
PAGES
*********************/

.filAriane {
  color: rgb(0, 160, 230);
  margin-bottom: 0rem;
  font-style: italic;
}

/*.filAriane a.btAriane {
  color: rgba(8, 157, 191, 0.6);
  border-bottom: 2px solid rgb(255,255,255);
  transition: border-bottom 0.2s ease-in, color 0.2s ease-in;;
}

.filAriane a.btAriane:hover {
  color: rgb(0, 160, 230);
  border-bottom: 2px solid rgb(0, 160, 230);
}*/

.titrePage {
  color: rgb(0, 160, 230);
  margin-top: 0rem;
  margin-bottom: 1rem;
  font-weight: 700;
}


/*********************
UN ARTICLE
*********************/

.extraitArticle {
  background-color: rgb(240, 240, 240);
}

.imageArticle {
  overflow: hidden;
  text-align: center;
  /*max-height: 200px;*/
}

.imageArticle img {
  /*margin-bottom: 0.6rem;*/ /*Fait apparaître le jaune dessous*/
  min-width: 100%;
}

.titreExtrait {
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  color: rgb(0, 0, 0);
  font-size: 1.4rem;
  font-weight: 700;
}

a.lienArticle:hover .titreExtrait {color: rgb(99, 184, 198); /*BleuCUE*/}

/* ! Gestion dans cleanup.php */
a.excerpt-read-more {color: rgba(99, 184, 198, 0.6);}
a.excerpt-read-more:hover {color: rgb(99, 184, 198); /*BleuCUE*/}

.bylineContainer {
  background-color: rgba(255, 255, 255, 0.6);
}

p.byline {
  color: rgb(80, 80, 80);
  font-size: 0.9rem;
  margin-bottom: 0rem;
}

p.byline a {
  /*color: rgb(80, 80, 80);*/
}


/*********************
NOTRE ENTREPRISE
*********************/

.lesDates {
  background-color: rgb(240, 240, 240);
  padding-top: 1rem;
}

.uneDate {
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  text-align: right;
  padding-right: 1rem;
}

.uneDateTxt {
  padding-top: 0.3rem;
  padding-right: 1rem;
}

.guillemetsBox {
  background-image: url(../images/guillemets-bleus.png);
  background-position: left top;
  background-repeat: no-repeat;
}

.ruptureHoriz {
  background-image: url(../images/image-separation.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: rgb(240, 240, 240);
  margin-top: 3rem;
  margin-bottom: 3rem;
}


/*********************
L'ÉQUIPE
*********************/

.titreNom {
  margin-bottom: 0rem;
}
.ssTitreNom {
  color: rgba(0, 160, 230, 0.7);
  font-size: 1.6rem;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: italic;
}

.citation {
  font-size: 2rem;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
}

.question {
  color: rgb(165, 130, 126);
  font-size: 1.6rem;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: italic;
}

.reponse {

}

/*********************
UNE REALISATION
*********************/

.txtCatReal {
  font-size: 1.4rem;
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  color: rgb(255, 255, 255);
  margin-bottom: 0.6rem;
}

.lieuReal {
  background-image: url(../images/icone-geoloc.png);
  border-right: 2px solid rgba(255, 255, 255, 0.4);
}

.dateReal {
  background-image: url(../images/icone-chrono.png);
}

.lieuReal,
.dateReal {
  background-position: 10px top;
  background-repeat: no-repeat;
  color: rgb(255,255,255);
  padding-left: 40px;
  min-height: 26px;
  margin-top: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.coinCategorie.coinCollectif {background-image: url(../images/icone-collectif.webp);}
.coinCategorie.coinMaison {background-image: url(../images/icone-maison.webp);}
.coinCategorie.coinTertiaire {background-image: url(../images/icone-tertiaire.webp);}

.coinCategorie {
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  width: 180px;
  height: 180px;
  padding-top: 4px;
  padding-left: 0.7rem;
  font-style: italic;
  font-size: 1.1rem;
  color: rgb(255, 255, 255);
  line-height: 1.2rem;
}


/*********************
UNE ACTU
*********************/

.titreActu {
  margin-top: 0.3rem;
}

.chapeauActu {
  font-weight: 700;
  font-size: 1.1rem;
}

p.dateActu {
  color: rgb(0, 160, 230);;
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.6rem;
  margin-bottom: 0rem;
}


/*********************
OFFRES
*********************/

.extraitOffre {

}

.extraitOffre {
  
}

.lieuOffre {
  
}


/*********************
RESEAUX SOCIAUX
*********************/

.logosSociaux {
  margin-top: 2rem;
  border-radius: 0.6rem;
  margin-bottom: 1.3rem;
}

a.btSocial.logoFacebook {background-image: url(../images/logo-facebook.png); /*background-color: rgb(59, 87, 156);*/}
a.btSocial.logoInstagram {background-image: url(../images/logo-instagram.png); /*background-color: rgb(255, 98, 103);*/}
a.btSocial.logoPinterest {background-image: url(../images/logo-pinterest.png); /*background-color: rgb(240, 0, 117);*/}
a.btSocial.logoNeutre {background-image: url(../images/logo-lien.png); /*background-color: rgb(80, 80, 80);*/}

a.btSocial {
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgb(80, 80, 80);
  display: inline-block;
  width: 3.1rem;
  height: 3.1rem;
  font-size: 0.8rem;
  color: rgb(80, 80, 80);
  margin-right: 0.6rem;
  
}

a.btSocial:hover {
  border-radius: 1rem;
  animation: animBtReseau 0.2s;
}

@keyframes animBtReseau {
  0% {
    border-radius: 0rem;
  }
  100%{
    border-radius: 1rem;
  }
}


/*********************
SIDEBARS
*********************/

/*Sidebar Générique*/
/********************************/

.widget {
  border-bottom: 2px solid rgba(200, 200, 200, 0.5);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.widget:last-of-type {
  border-bottom: none;
  padding-bottom: 0rem;
}

.widget ul {
  margin: 0;
}

.widget ul li {
  list-style: none;
  font-size: 0.9rem;
}


/*********************
Gravity Form
*********************/

.donneesPerso {
  font-size: 0.8rem;
  font-style: italic;
  color: rgb(99, 184, 198);
  border-left: 0.2rem solid rgba(99, 184, 198, 0.5);
  padding-left: 0.5rem;
}


/*********************
Cases à cocher et boutons radio
*********************/
/*https://wpmonks.com/blog/how-to-style-checkbox-inputs-in-gravity-forms/*/
/*https://www.w3schools.com/howto/howto_css_custom_checkbox.asp*/

.gform_body .gform_fields .gfield .gfield_checkbox li,
.gform_body .gform_fields .gfield .gfield_radio li  {
/*  border: 1px solid blue;*/
}

.gfield_checkbox li input[type=checkbox],
.gfield_radio li input[type=radio] {
  opacity: 0;
  position: absolute;
}

/* Ensemble avec texte (bouton) */
.gfield_checkbox li input[type=checkbox] + label,
.gfield_radio li input[type=radio] + label {
  position: relative;
  overflow: hidden;
  padding: 0px 10px 0px 35px;
  cursor: pointer;
  display: inline-block;
}

/* Ensemble Récepteur + indicateur */
.gfield_checkbox li input[type=checkbox] + label::before,
.gfield_checkbox li input[type=checkbox] + label::after,
.gfield_radio li input[type=radio] + label::before,
.gfield_radio li input[type=radio] + label::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: 1;
  -webkit-transition: .2s;
  transition: .2s;
}

/* Les Récepteurs (les cases) -> + label::after */

/* COCHE et RADIO >>> Récepteurs éteints */
.gfield_checkbox li input[type=checkbox]:not(:checked) + label::after,
.gfield_radio li input[type=radio]:not(:checked) + label::after {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(99, 184, 198, 0.5);
  top: 1px;
}

/* COCHE et RADIO >>> Hover sur récepteurs éteints */
.gfield_checkbox li:hover input[type=checkbox]:not(:checked) + label::after,
.gfield_radio li:hover input[type=radio]:not(:checked) + label::after {
  border: 2px solid rgb(99, 184, 198);
}

/* RADIO >>> Récepteurs éteint : on arrondi en plus */
.gfield_radio li input[type=radio]:not(:checked) + label::after {border-radius: 50%}

/* COCHE et RADIO >>> Récepteurs allumés */
.gfield_checkbox li input[type=checkbox]:checked + label::after,
.gfield_radio li input[type=radio]:checked + label::after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(99, 184, 198);
  background-color: rgb(99, 184, 198);
  z-index: 0;
  border-radius: 2px
}

/* COCHE >>> Recepteur allumé : on arrondi un peu */
.gfield_checkbox li input[type=checkbox]:checked + label::after {border-radius: 2px}

/* RADIO >>> Recepteur allumé  on reste arrondi */
.gfield_radio li input[type=radio]:checked + label::after {border-radius: 50%}


/* Les Indicateurs -> + label:before */

/* COCHE >>> Indicateur éteint */
.gfield_checkbox li input[type=checkbox]:not(:checked) + label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* COCHE >>> Indicateur allumé */
.gfield_checkbox li input[type=checkbox]:checked + label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  margin-top:3px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* RADIO >>> Indicateur éteint */
.gfield_radio li input[type=radio]:not(:checked) + label:before {
  top: 10px;
  left: 10px;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: transparent;
}

/* RADIO >>> Indicateur allumé */
.gfield_radio li input[type=radio]:checked + label:before {
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}


/*********************
FOOTER STYLES
*********************/

footer {
  font-family: ubuntu, sans-serif; 
  font-weight: 400;
  font-style: normal;
}

#basPage {
  border-bottom: 6px solid rgb(0, 160, 230);
}

footer.footer {
  clear: both;
  background-color: rgb(80, 80, 80);
}

/* Ciblage du menu Wordpress : ul#menu-secondaire */
ul#menu-secondaire {
  padding-bottom: 10px;
  border-bottom: 2px solid rgb(140, 140, 140);
}

.menuFooterBox {
  background-image: url(../images/trait-gris-2x1.png);
  background-position: 9px top;
  background-repeat: repeat-y;
}

ul#menu-secondaire li.menu-item a {
  background-image: url(../images/bt-radio-footer.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  height: 21px;
  min-width: 400px;/* Pour forcer le passage à la ligne */
  padding: 4px 4px 4px 40px; 
  margin-top: 0.6rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

ul#menu-secondaire li.menu-item a:hover {
  background-position: left bottom;
  color: rgb(255, 255, 255);
}

.adresseFooter {
  text-align: right;
  color: rgb(240, 240, 240);
  border-right: 2px solid rgb(140, 140, 140);
  margin-top: 30px;
  padding-right: 1rem;
  padding-bottom: 0rem;
}

.adresseFooter .titreAdresseFooter {
  margin-bottom: 0rem;
}

.adresseFooter a.mailFooter {color: rgba(255, 255, 255, 0.6);}
.adresseFooter a.mailFooter:hover {color: rgb(255, 255, 255);}

button.btFooter {
  text-align: center;
  display: block;
  width: 100%;
  background-color: rgba(80, 80, 80, 0.8);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.8rem;
  text-transform: uppercase;
  font-size: 0.9rem;
}

button.btFooter:hover {
  background-color: rgb(80, 80, 80);
  color: rgb(255, 255, 255);
}


footer a.lienLinkedIn  {background-image: url(../images/logo-linkedin-footer.png);}
/* footer a.lienTwitter  {background-image: url(../images/logo-twitter-footer.png);} */
/* footer a.lienYoutube  {background-image: url(../images/logo-youtube-footer.png);} */

footer a.lienReseau {
  background-position: center top;
  background-repeat: no-repeat;
  display: block;
  height: 44px;
  margin-top: 20px;
  margin-bottom: 20px;
}

footer a.lienReseau:hover {
  background-position: center bottom;
}


/*********************
POP UP
*********************/

.blocBtPopUp {
  text-align: center;
  padding: 1.3rem 0rem;
}

a.btPopUp {
  color: rgba(255, 255, 255, 0.7);
}

a.btPopUp:hover {
  color: rgb(255, 255, 255);
}

.popUpMLBox {
  /*text-align: center;*/
}

.popUpML {
  /*width: 80%;*/
  background-color: rgb(255, 255, 255);
}


/*********************
VISUAL EDITOR
*********************/
body#tinymce {
  margin: 1.3rem; }


/*********************
PLUGIN
*********************/
.gform_body ul {
  list-style: none outside none;
  margin: 0; }

/*# sourceMappingURL=style.css.map */


/*********************
Media Queries

Foundation 6 for Sites has three core breakpoints:

Small: any screen.
Medium: any screen 640 pixels or wider.
Large: any screen 1024 pixels or wider.

*********************/

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {

  /*Cas particulier classe ".surDeuxLignes" directement dans WP*/
  #responsive-menu .menuBox > ul.menu > li.surDeuxLignes > a {
    /*padding-top: 13px;*/
  }

  .royalSlider {
    min-height: 0rem;
  }

  .titreMenuCarte {
    text-align: right;
    border-bottom: 8px solid rgb(255, 255, 255);
  }

}


/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

}


/* Large and up */
@media screen and (min-width: 64em) {

  a.logoACI {
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .top-bar {
    background-image: url(../images/cache-fond-header-G.png), url(../images/cache-fond-header-D.png), url(../images/bande-noire-header.png), url(../images/plan-fond-header-G.jpg), url(../images/plan-fond-header-D.jpg);
    background-position: left bottom, right bottom, left bottom, left bottom, right bottom;
    background-repeat: no-repeat, no-repeat, repeat-x, no-repeat, no-repeat;
    padding-bottom: 0px;
    padding-left: 40px;
    height: 180px; /* Logo + marges */
  }

  #responsive-menu .menuBox > ul.menu {
    margin-top: 120px;
    margin-bottom: 0px;
    background-color: transparent;
    padding-bottom: 0px;
  }

  #responsive-menu .menuBox > ul.menu > li.menu-item > a {
    text-align: left;
  }

  .txtExtraitBox {
    min-height: 350px; /*Alignement des hauteurs*/
  }

  .chapeauEquipes {
    text-align: right;
  }

  .photoMetiers {
    background-image: url(../images/photo-metiers-index.jpg);
    background-position: center bottom;
    background-repeat: no-repeat; 
  }

}


/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}

/* Extra Large only */
@media screen and (min-width: 74.9375em) {
}