/*****************************************************************************************
/* Fichier ...................... : custom.css
/* Type ......................... : Document CSS
/* Titre ........................ : Feuille de style pour "Inventaide"
/* Auteur ....................... : Myriam L., Myriam M., Cynthia P., Nathalie R.
/* Date de création ............. : 2021-10-05
/*****************************************************************************************/

/************************************/
/**** Mise en forme général *********/
/************************************/
* {
  color: inherit; /*  font: inherit; */
}

*:focus {
  outline: 0;
}

html {
  font-family: "Montserrat", sans-serif;
  color: black;
  font-weight: 400;
  font-size: 125%;
}

body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.2rem;
  font-weight: 400;
}

menu,
nav ul,
nav ol,
menu ul,
menu ol {
  padding: 0;
}

nav li {
  display: inline-block;
}

/*
svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}
*/

.grille {
  display: grid;
}

hr,
img,
legend,
iframe,
a img {
  border: 0 none;
}

img {
  max-width: 100%;
}

a {
  /* background: transparent; */
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: underline;
}
a:active,
a:hover {
  outline: 0;
  text-decoration: none;
}


.a-center {
  text-align: left;
  width: 80%;
  margin: auto;
}

h1 {
  margin: none;
  color: #ffffff;
  padding: 40px;
  font-size: 3em;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  background-color: #0a0a37;
  padding: 40px;
}

h1,
.h1 {
 /* font-size: 2.5rem;
  line-height: 2.8rem;
  font-weight: 700;*/
}

h2,
.h2 {
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 700;
}

h2, h3 {
  color: #0a0a37;
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 1.7rem;
  font-weight: 700;
}

h4,
.h4 {
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: 400;
  margin-bottom: 0;
}

small,
.small {
  font-size: 0.7rem;
  line-height: 1rem;
} /* 14 / 15 */

big,
.big {
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 700;
} /* 100 / 100 */

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

b,
strong,
.strong,
.bold {
  font-weight: 700;
}

.font40px {
  font-size: 40px;
}

.font7pt {
  font-size: 7.5pt;
}

.font9pt {
  font-size: 7.5pt;
}

.font10pt {
  font-size: 10pt;
}

.underline {
  border-bottom: 1px solid;
}
.strike {
  text-decoration: line-through;
}

.normal-style {
  font-style: normal;
}
.italic,
em {
  font-style: italic;
}

input, select, textarea {
  padding: 5px;
  border: 1px solid #666666;
  border-color: #999;
}

.textLabel {
  margin-top: 10px;
}

label {
  margin-top: 20px;
}

#bouton1, #bouton2, #bouton3, #bouton4, #boutons5, #bouton6 {
  text-align: center;
}

.text_align_justify {
  text-align: justify;
}

.previous_button, .next_button  {
    background-color: #0a0a37;
    color: #ffffff;
    padding: 10px 20px; 
    font-size: 16px;
    border: none; 
    margin: 20px;
}

.previous_button:hover, .next_button:hover {
  background-color: #ffffff;
  color: #0a0a37;
  border: 1px solid #0a0a37;
}

#bouton_envoyer {

  background-color: #ffffff;
  color: #0a0a37;
  padding: 20px 30px; 
  font-size: 24px;
  border: none; 
  text-transform: uppercase;
  margin: 20px;
  display: flex;
  justify-content: center

}

input:focus, select:focus, textarea:focus {
  box-shadow: 0px 0px 10px 1px #0a0a37;
}

fieldset {
  margin: 50px 0;
  padding: 0;
  border: none;
}

legend {
  color: #0a0a37;
  font-weight: 700;
  margin: 0;
}

.wrongInput{
border-color: red !important;
}

#entreprise1, #entreprise2, #entreprise3, #contact4, #confidentielle5, #emploi6, .emploi6 {
  width: 80%;
  margin: auto;
}

.infobulle-trigger img {
  width: 1%;
  margin-top: 0px;
}

.left {
  float: left;
}

.small-info {
  max-width: 12px;
  display: inline-block;
  vertical-align: top;
}

.a-right {
  text-align: left;
}


/*****************************************/
/**** Mise en forme margin et padding ****/
/*****************************************/
.box {
  padding: 1rem;
}

.pad-top,
.pad-vertical {
  padding-top: 1rem;
}

.pad-bottom,
.pad-vertical {
  padding-bottom: 1rem;
}

.pad-left,
.pad-horizontal {
  padding-left: 1rem;
}

.pad-right,
.pad-horizontal {
  padding-right: 1rem;
}

.margin-top,
.margin-vertical {
  margin-top: 1rem;
}

.margin-bottom,
.margin-vertical {
  margin-bottom: 1rem;
}

.margin-left,
.margin-horizontal,
.align-right,
.alignright {
  margin-left: 1rem;
}

.margin-right,
.margin-horizontal,
.align-left,
.alignleft {
  margin-right: 1rem;
}

.box-x2 {
  padding: 2rem;
}

.pad-top-x2,
.pad-vertical-x2 {
  padding-top: 2rem;
}
.pad-bottom-x2,
.pad-vertical-x2 {
  padding-bottom: 2rem;
}

.pad-right-x2,
.pad-horizontal-x2 {
  padding-right: 2rem;
}

.margin-x2 {
  margin: 2rem;
}
.margin-top-x2,
.margin-vertical-x2 {
  margin-top: 2rem;
}
.margin-bottom-x2,
.margin-vertical-x2 {
  margin-bottom: 2rem;
}
.margin-left-x2,
.margin-horizontal-x2,
.align-right-x2,
.alignright-x2 {
  margin-left: 2rem;
}
.margin-right-x2,
.margin-horizontal-x2,
.align-left-x2,
.alignleft-x2 {
  margin-right: 2rem;
}

hr.pad-left-x2,
hr.pad-horizontal-x2 {
  padding-left: 0;
  margin-left: 2rem;
}
hr.pad-right-x2,
hr.pad-horizontal-x2 {
  padding-right: 0;
  margin-right: 2rem;
}


/****************************/
/********* Couleurs *********/
/****************************/
.bkg-blanc {
  background-color: #fff;
}
.bkg-noir {
  background-color: #000;
}

.blanc,
.focus-blanc .focus {
  color: #fff;
}

.noir,
.focus-noir .focus,
.focus-noir.focus {
  color: #000000;
}

.gris,
.focus-gris .focus,
.focus-gris.focus {
  color: #4d4d4f;
}

.vert-fonce,
.focus-vert-fonce .focus,
.focus-vert-fonce.focus {
  color: #0a0a37;
}

.emerald,
.focus-emerald .focus,
.focus-emerald.focus {
  color: #0a0a37;
}
.vert-pale,
.focus-vert-pale .focus,
.focus-vert-pale.focus {
  color: #a6ce39;
}
.gris-pale,
.focus-gris-pale .focus,
.focus-gris-pale.focus {
  color: #f1f2f2;
}

.red {
  color: red;
}

.orange {
  color: orange;
}

.green {
  color: green;
}

.purple {
  color: purple;
}

.blue {
  color: blue;
}

.color660000 {
  color: #660000;
}

.color336600 {
  color: #336600;
}

.color006600 {
  color: #006600;
}

.color_windowtext {
  color: windowtext;
}


/**********************************/
/**** Mise en forme du header ****/
/********************************/
#logo_sinnopole {
  max-width: none;
  margin: 100% 0% 0% 100%;
}

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s;
  z-index: 10;
}
.c-header__small {
  padding: 0.5rem 1rem;
}
.flex > .c-header__menu.grid {
  flex: 100%;
  max-width: 1rem;
}
.flex > .c-header__logo.grid {
  flex: 100%;
  max-width: 20rem;
}
.flex > .c-header__utility.grid {
  flex: 100%;
  max-width: calc(100% - 21rem);
}
.l-svg__logo {
  width: 12rem;
  max-width: 100%;
  transition: all 0.3s;
}
.l-svg__logo span {
  padding-bottom: 27.72%;
}
.c-header__small .l-svg__logo {
  width: 8rem;
}


/***************************************************************/
/**** Balises <style> supprimées des pages et déposées ici  ****/
/***************************************************************/
.class_gwp_my_template_file {
  cursor: help;
}

.display_none {
  display: none;
}


/**************************************=********/
/*** Mise en forme de la section entreprise1 ***/
/***********************************************/


#field_apropos {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "label_nom_entreprise label_annee_fondation"
    "input_nom_entreprise  input_annee_fondation"
    "label_siege_social label_siege_social"
    "input__siege_social input__siege_social";
  row-gap: 5px;
  column-gap: 10%;
}

#nom_entreprise {
  grid-area: label_nom_entreprise;
}

#annee_fondation {
  grid-area: label_annee_fondation;
}

#name_entreprise {
  grid-area: input_nom_entreprise;
}

#new_annedefondation {
  grid-area: input_annee_fondation;
}

#siege_social_label {
  grid-area: label_siege_social;
}

#new_paysdusigesocial {
  grid-area: input__siege_social;
}

#field_coordonnees {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(10, auto);
  grid-template-areas:
    "label_adresse_entreprise label_adresse_entreprise"
    "input_adresse_entreprise input_adresse_entreprise"
    "label_ville_entreprise label_ville_entreprise"
	"input_ville_entreprise input_ville_entreprise"
    "label_telephone1 "
    "input_telephone1 ";
  row-gap: 5px;
  column-gap: 10%;
}

#adresse_entreprise_label {
  grid-area: label_adresse_entreprise;
}

#line1 {
  grid-area: input_adresse_entreprise;
}

#label_ville_entreprise {
  grid-area: label_ville_entreprise;
}

#label_province_entreprise {
  grid-area: label_province_entreprise;
}

#city {
  grid-area: input_ville_entreprise;
}

#province {
  grid-area: input_province_entreprise;
}

#pays_label {
  grid-area: label_pays;
}

#postalcode_label {
  grid-area: label_postalcode;
}

#country {
  grid-area: input_pays;
}

#postalcode {
  grid-area: input_postalcode;
}

#arrondissement_label {
  grid-area: label_arrondissement;
}

#parc_label {
  grid-area: label_parc;
}

#new_ArrondissementLookup {
  grid-area: input_arrondissement;
}

#new_parcindustriellookup {
  grid-area: input_parc;
}

#telephone_label {
  grid-area: label_telephone1;
}

#telephone2_label {
  grid-area: label_telephone2;
}

#telephone1 {
  grid-area: input_telephone1;
}

#telephone2 {
  grid-area: input_telephone2;
}

#field_web {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-template-areas:
    "label_siteweb label_siteweb_carriere"
    "input_siteweb input_siteweb_carriere"
    "label_linkedin label_linkedin"
    "input_linkedin input_linkedin"
    "label_facebook label_instagram"
    "input_facebook input_instagram"
    "a_ajout_succursale . ";
  row-gap: 5px;
  column-gap: 10%;
}

#site_web_label {
  grid-area: label_siteweb;
}

#site_web_carriere_label {
  grid-area: label_siteweb_carriere;
}

#WebSiteURL {
  grid-area: input_siteweb;
}

#inno_Sectioncarriresdusiteinternet {
  grid-area: input_siteweb_carriere;
}

#linkedin_label {
  grid-area: label_linkedin;
}

#inno_PageLinkedIn {
  grid-area: input_linkedin;
}

#fbk_label {
  grid-area: label_facebook;
}

#insta_label {
  grid-area: label_instagram;
}

#inno_PageFacebook {
  grid-area: input_facebook;
}

#inno_Instagram {
  grid-area: input_instagram;
}

#a_ajout_succursale {
  grid-area: a_ajout_succursale;
  display: flex;
  justify-content: start;
  margin: 20px 0 0 0;
  text-decoration: underline;
}

/* section caché succursale */
.divAddSucc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;

}

.divDivAddSucc {
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.divInputAddSucc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.divAjoutAddSucc {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.divAjoutAddSucc a {
  text-decoration: underline;
}

.divAjoutAddSucc img {
  max-width: 7%;
  padding-left: 7px;
}


/**************************************=*********/
/**** Mise en forme de la section entreprise2 ***/
/************************************************/
#field_entreprise2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "label_descripFR"
    "new_descriptionfr"
    "label_descripEN"
    "new_descriptionen";
  row-gap: 5px;
  column-gap: 10%;
}

#label_descripFR {
  grid-area: label_descripFR;
}

#new_descriptionfr {
  grid-area: new_descriptionfr;
}

#label_descripEN {
  grid-area: label_descripEN;
}

#new_descriptionen {
  grid-area: new_descriptionen;
}


/**************************************=*********/
/**** Mise en forme de la section entreprise3 ***/
/************************************************/
#field_entreprise3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "para_rep_1 para_rep_1"
    "div_rep_ouinon div_rep_ouinon"
    "ul_rep ul_rep"
    "para_rep_2 para_rep_2";
  row-gap: 5px;
  column-gap: 10%;
  background-color: #f1f2f2;
  border-radius: 20px;
  padding: 3% 5%;
  box-shadow: 3px 3px 5px #0a0a37;
}

#field_entreprise3 p:first-child {
  grid-area: para_rep_1;
}

#field_entreprise3 div {
  grid-area: div_rep_ouinon;
}

#field_entreprise3 ul {
  grid-area: ul_rep;
}

#field_entreprise3 p:last-child {
  grid-area: para_rep_2;
}

.repertoire-entreprise-choix {
  display: flex;
  justify-content: space-around;
  margin-left: 30%;
  margin-right: 30%;
}


/*******************************************/
/*** Mise en forme de la section contact ***/
/*******************************************/
.cont_flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-row-succursale {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-row- {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.information_ponctuelle {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; 
}

.infolettre_check {
  display: flex;
  order: 1;
  margin: 5px;
}

.container-categorie {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; 
  align-items: center;
}

#interetTitle, #interetTitle2 {
  color: #0a0a37;
}

#title_contact {
  margin-top: 0;
}

.contactDisplay {
  display: grid;
  grid-template-rows: repeat(8, auto);
  grid-template-columns: 1fr 0.5fr 1fr 1fr 0.5fr;
  grid-template-areas:
      "prenom_f4 prenom_f4 . nom_f4 nom_f4"
      "titre_f4 titre_f4 . courriel_f4 courriel_f4"
      "homme_f4 . . . ."
      "femme_f4 . . . ."
      "noresponse_f4 . . . ."
      "phone_f4 phone_f4 . ext_f4 ext_f4"
      "cell_f4 cell_f4 . . .";
}

.contactDisplay div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

.contactDisplay div:first-child {
  grid-area: prenom_f4;
}

.contactDisplay div:nth-child(2) {
  grid-area: nom_f4;
}

.contactDisplay div:nth-child(3) {
  grid-area: titre_f4;
}

.contactDisplay div:nth-child(4) {
  grid-area: courriel_f4;
}

.contactDisplay div:nth-child(5) {
  grid-area: homme_f4;
}

.contactDisplay div:nth-child(6) {
  grid-area: femme_f4;
}

.contactDisplay div:nth-child(7) {
  grid-area: noresponse_f4;
}

.contactDisplay div:nth-child(8) {
  grid-area: phone_f4;
}

.contactDisplay div:nth-child(9) {
  grid-area: ext_f4;
}

.contactDisplay div:nth-child(10) {
  grid-area: cell_f4;
}

.demandeInfoContact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
}


/**************************************************/
/*** Mise en forme de la section confidentielle ***/
/**************************************************/
#confidentielle5 {
  grid-template-columns: auto;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: 'confidentielles_head'
                       'mot_cles'
                       'produits_services'
                       'espace_industriel';
  row-gap: 50px;
}

#confidentielle_head {
  grid-area: confidentielles_head;
}

#mot_cles {
  grid-area: mot_cles;
}

#produits_services {
  grid-area: produits_services;
}

#espace_industriel {
  grid-area: espace_industriel;
}


.custom-sex-radio {
  display: flex;
  align-items: baseline;
  margin: 5px 0;
}

/****************************************************/
/****** Mise en forme de la section 6 - Emploi ******/
/****************************************************/

#infobulle_emploi {
  width: 2%;
  display: flex;
  flex-direction: row;
  padding-bottom: 20%;
}

#img_cadenas {
    width: 2%;
    padding-right: 2%;
    padding-left: 2%;
    align-items: center;
}

.img_cadanas_box {
    display: flex;
    flex-direction: row;
}

#grille_emploi {
    grid-template-rows: repeat(8, auto);
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        'Label_01 Label_01 Label_01 Case_01 Case_01 Case_01'
        'Label_02 Label_02 Label_02 Label_02 Label_02 Label_02'
        'Label_03 Label_03 Label_03 Case_03 Case_03 Chekbox_03'
        'Label_04 Label_04 Label_04 Case_04 Case_04 Chekbox_04'
        'Label_05 Label_05 Label_05 Case_05 Case_05 Chekbox_05'
        'Label_06 Label_06 Label_06 Case_06 Case_06 Chekbox_06'
        'Label_07 Label_07 Label_07 Case_07 Case_07 Chekbox_07'
        'Label_08 Label_08 Label_08 Label_08 Label_08 Label_08';
}

.size_input{
  width: 60%;
}

#label_1 {
  grid-area: Label_01;
}

#case_1 {
  grid-area: Case_01;
  padding-top: 20px;
}

#label_2 {
  grid-area: Label_02;
}

#label_3 {
  grid-area: Label_03;
}

#case_3 {
  grid-area: Case_03;

}

#chekbox_3 {
  grid-area: Chekbox_03;
 
}

#label_4 {
  grid-area: Label_04;
}

#case_4 {
  grid-area: Case_04;
}

#chekbox_4 {
  grid-area: Chekbox_04;
}

#label_5 {
  grid-area: Label_05;
}

#case_5 {
  grid-area: Case_05;
}

#chekbox_5 {
  grid-area: Chekbox_05;
}

#label_6 {
  grid-area: Label_06;
}
#case_6 {
  grid-area: Case_06;
}

#chekbox_6 {
  grid-area: Chekbox_06;
}

#label_7 {
  grid-area: Label_07;
}

#case_7 {
  grid-area: Case_07;
}

#chekbox_7 {
  grid-area: Chekbox_07;
}

#label_8 {
  grid-area: Label_08;
  padding-top: 20px;
    background-color: #f1f2f2;
  border-radius: 20px;
  padding: 3% 5%;
  box-shadow: 3px 3px 5px #0a0a37;
  margin-top: 50px;
}

.cont_ColumnEmploi {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

}

.ChiffreAffaire  {
  display: flex;
  flex-direction: column;
  
}

.ContElementRowEmploi {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.ElementRowEmploi {
  display: flex;
  flex-direction: row;
}




/******************************/
/********* BREADCRUMB *********/
/******************************/
.l-bc a:not(:last-child):after {
  content: "»";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  text-align: center;
}
.l-bc__mobile .l-select {
  margin: auto;
}


/**********************************/
/**** Mise en forme du footer ****/
/********************************/
footer {
  font-size: 0.8rem;
}

.c-footer {
  display: flex;
}

footer a:link {
  text-decoration: none;}

.img50pourcent {
  width: 50%;
  padding-left: 8%;
  padding-top: 8%;
}

.img60pourcent {
  width: 60%;
}

.padding1pourcent {
  padding-left: 1%;
}

.padding2pourcent {
  padding-left: 2%;
}

.padding3pourcent {
  padding-left: 3%;
}

.padding_top_15pourcent {
padding-top: 15%;
}
.rond {
  width: 2.5rem;
  height: 2rem;
  row-gap: 100%;
  border-radius: 50%;
  border: 1px solid;
}

.flex_align_center {
  display: flex;
  align-items: center;
}

.c-futility__menu li,
.c-footer__menu li {
  display: flex;

}
/*
	.c-footer__menu li .l-svg__tel						{ display: inline-block; vertical-align: middle; margin-right: .5rem; }
	.c-footer .l-svg__nl								{ width: 1.75rem; border: 1px solid; border-radius: 50%; }*/
/*
	.c-footer  .l-svg__tel								{ width: 1.2rem; }
	.c-footer .l-svg__partner							{ width: 1.5rem; }
	.c-footer .l-svg__partner span						{ padding-bottom: 70.7%; }
	.c-footer__logo svg									{ max-width: 12rem; }	
	*/

/* SOCIAL */
.c-social__menu li {
   padding: 0 0.25rem; 
} /*
		.l-svg__social										{ width: 1.25rem; }
	.c-social__menu li>a								{ display: block; border: 1px solid; border-radius: 50%; padding: .25rem; }*/
	.c-social__menu li>a:hover							{ background-color: #50c25a; border-color: #fff; color: rgb(0, 0, 0); }
	

/* PARTENAIRES */
.c-partner__menu > li {
  padding-right: 1rem;
}
.c-footer .l-svg__ville-de-sherbrooke {
  width: 4.25rem;
}
.c-footer .l-svg__ville-de-sherbrooke span {
  padding-bottom: 37.04%;
}
.c-footer .l-svg__commerce-sherbrooke,
.c-footer .l-svg__destination-sherbrooke {
  width: 6.5rem;
}
.c-footer .l-svg__commerce-sherbrooke span {
  padding-bottom: 33.333%;
}
.c-footer .l-svg__destination-sherbrooke span {
  padding-bottom: 26.36%;
}


/*************************************/
/**** Mise en forme du Responsive ****/
/*************************************/
@media screen and (max-width: 1450px) {
  .c-footer .flex > .pad-horizontal-x2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 1150px) {
  .c-mobile__menu > li {
    padding: 1rem 1rem 0;
  }

  .flex > .c-footer__logo {
    flex: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
  }
  .flex > .c-footer__links,
  .flex > .c-footer__tools {
    flex: 100%;
    max-width: 50%;
    order: 2;
  }
  .flex > .c-footer__admin {
    flex: 100%;
    max-width: 50%;
    order: 4;
    align-self: start;
  }
  .flex > .c-footer__partner {
    flex: 100%;
    max-width: 50%;
    order: 3;
    align-self: start;
  }
  .flex > .c-footer__copy {
    flex: 100%;
    max-width: 100%;
    order: 6;
    padding-top: 0;
  }
}

@media screen and (max-width: 1000px) {
  .c-mobile__menu {
    max-height: 100vh;
    overflow: auto;
  }
  .c-mobile__menu > li {
    flex: 100%;
    max-width: 50%;
    border: 0;
    padding: 1rem;
    position: relative;
  }
  .c-mobile__menu > li:nth-child(odd):before {
    content: "";
    display: block;
    width: 2px;
    position: absolute;
    right: -1px;
    top: 1rem;
    bottom: 1rem;
    background-color: #50c25a;
  }
  .c-mobile__menu > li:nth-child(1):after,
  .c-mobile__menu > li:nth-child(2):after {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 1rem;
    right: 1rem;
    background-color: #50c25a;
  }
}

@media screen and (max-width: 950px) {
  .c-partner__menu li:not(:last-child) {
    display: block;
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 800px) {
  .c-mobile__in:checked ~ .c-mobile__pan {
    padding-top: 5.85rem;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .c-mobile__in:checked ~ .c-mobile__pan.scroll {
    padding-top: 5.2rem;
  }
  .c-mobile__close {
    top: 7.85rem;
  }
  .c-mobile__pan.scroll .c-mobile__close {
    top: 7.2rem;
  }

  .c-mobile__menu > li:last-child,
  .c-mobile__menu > li {
    max-width: 100%;
  }
  .c-mobile__menu > li:nth-child(odd):before {
    display: none;
  }
  .c-mobile__menu > li:nth-child(3):after {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 1rem;
    right: 1rem;
    background-color: #50c25a;
  }
  .c-mobile__close {
    left: 0.5rem;
  }
}

@media screen and (max-width: 700px) {
  .l-bc__inner {
    display: none;
  }
  .l-bc__mobile {
    display: block;
  }
}

@media screen and (max-width: 650px) {
  .c-footer {
    text-align: center;
  }
  .flex > .c-footer__logo {
    text-align: left;
    margin-bottom: 1rem;
  }
  .flex > .c-footer__links,
  .c-futility__ttl,
  .c-futility__nav {
    display: none;
  }
  .flex > .c-footer__tools,
  .flex > .c-footer__admin {
    max-width: 100%;
  }
  .flex > .c-footer__partner {
    max-width: 100%;
  }
  .c-partner__menu li {
    display: inline-block !important;
    vertical-align: top;
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 500px) {
  .c-partner__menu li {
    display: block !important;
    padding: 0;
  }
  .c-utility__form {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .c-mobile__menu {
    padding-left: 0; /* padding-right: 0; */
  }
  .c-mobile__close {
    left: auto;
    right: 1rem;
    top: 1rem;
  }
  .flex > .c-header__logo {
    max-width: 100%;
    padding-left: 0;
    text-align: left;
  }
  .flex > .c-header__menu {
    flex: 100%;
    max-width: 100%;
    padding-bottom: 1rem;
    text-align: right;
  }
  .c-utility__menu {
    text-align: center;
  }
  .c-utility__menu li {
    padding: 0 0.5rem;
  }
  .c-utility__form .l-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
  }
  .c-utility__form .l-btn__vert {
    width: 100%;
  }
}


@media screen and (max-width: 1000px) {
  h1,
  .h1 {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
  big,
  .big {
    font-size: 4.5rem;
    line-height: 4.5rem;
  }
}

@media screen and (max-width: 600px) {
  h1,
  .h1 {
    font-size: 1.6rem;
    line-height: 1.8rem;
  }
  h2,
  .h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
  big,
  .big {
    font-size: 3rem;
    line-height: 3rem;
  }
  h3,
  .h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}

@media screen and (max-width: 450px) {
  h1,
  .h1 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
  h2,
  .h2 {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
}

@media screen and (max-width: 600px) {

  .infobulle-trigger img {
    width: 40%;
    margin-top: 0px;
    margin-left: 2%;
  }

  .infobulle-trigger img {
    width: 20%;
    margin-top: 0px;
    margin-left: 2%;
  }

  .logo img {
    margin-top: 20px;
  }

  input {
    width: 100%;
  }

  input[type="checkbox"] {
    width: auto;
  }

  .custom-sex-radio {
    display: flex;
    align-items: baseline;
    margin: 5px 0;
  }

    /* section entreprise  */

    #field_apropos {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, auto);
      grid-template-areas:
        "label_nom_entreprise"        
        "input_nom_entreprise"
        "label_annee_fondation"
        "input_annee_fondation"
        "label_siege_social"
        "label_siege_social"
        "input__siege_social"
        "input__siege_social";
      column-gap: 10%;
    }

    #field_coordonnees {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(17, auto);
      grid-template-areas:
      "label_adresse_entreprise"
      "input_adresse_entreprise"
      "label_ville_entreprise"
      "input_ville_entreprise"
      "label_telephone1"
      "input_telephone1"
      "label_telephone2"      
      "input_telephone2";
      column-gap: 10%;
    }

    #field_web {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(11, auto);
      grid-template-areas:
        "label_siteweb"
        "input_siteweb"
    
        "a_ajout_succursale";
      row-gap: 5px;
      column-gap: 10%;
    }

    .cont_surcusale {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

    .divInputAddSucc {
      flex-direction: column;
      align-items: start;

    }


    /* Répertoire entreprise */

    .repertoire-entreprise-choix {
      margin: 0px;
    }
    
    /* Informations confidentielles */

    #produits_services {
      display: flex;
      flex-direction: column;
    }

}


/*********************/
/******** SVG ********/
/*********************/
[class*="l-svg"] {
  display: block;
  line-height: 0;
  width: 2rem;
}
[class*="l-svg"].inline-block {
  display: inline-block;
  vertical-align: middle;
}
[class*="l-svg"] span {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 10%;
  
}
[class*="l-svg"] svg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}



/**************************************************/
/**** Mise en forme de la barre de progression ****/
/**************************************************/

#formProgressiveBar {
	text-align: center;
	position: relative;
	margin-top: 20px;
}

.containerProgressiveBar {
  width: 80%;
  margin: auto;
}

#formProgressiveBar section:not(:first-of-type) {
	display: none;
}

#progressbar {
	margin-bottom: 30px;
  text-align: center;
	overflow: hidden;
	color: lightgrey;
}

#progressbar .active {
	color: #0a0a37;
}

#progressbar li {
	list-style-type: none;
	font-size: 15px;
	width: 15%;
	float: left;
	position: relative;
	font-weight: 400;
}

#progressbar #step1:before {
	content: "1";
}

#progressbar #step2:before {
	content: "2";
}

#progressbar #step3:before {
	content: "3";
}

#progressbar #step4:before {
	content: "4";
}

#progressbar #step5:before {
	content: "5";
}

#progressbar #step6:before {
	content: "6";
}

#progressbar li:before {
	width: 50px;
	height: 50px;
	line-height: 45px;
	display: block;
	font-size: 20px;
	color: #ffffff;
	background: lightgray;
	border-radius: 50%;
	margin: 0 auto 10px auto;
	padding: 2px;
}

#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: lightgray;
	position: absolute;
	left: 0;
	top: 25px;
	z-index: -1;
}

#progressbar li.active:before,
#progressbar li.active:after {
	background: #0a0a37;
}

.progress {
	height: 20px;
}

.progress-bar {
	background-color: #0a0a37;
}

/******************/
/****** FLEX ******/
/******************/
.flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
}

/* WRAP */
.custom-wrap,
.flex.slow-wrap,
.flex.medium-wrap,
.flex.wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }

.flex > .grid,
.flex > [class^="grid-"],
.flex > [class*="grid-"] {
  -ms-flex: 0;
  flex: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  box-sizing: border-box;
}

/* GRID ALIGN SELF */

.flex > .grid {
  -ms-flex: auto;
  flex: auto;
}
.flex > .grid-5 {
  max-width: 5%;
}
.flex > .grid-10 {
  max-width: 10%;
}
.flex > .grid-15 {
  max-width: 15%;
}
.flex > .grid-20 {
  -ms-flex: 20%;
  flex: 20%;
  max-width: 20%;
}
.flex > .grid-25 {
  -ms-flex: 25%;
  flex: 25%;
  max-width: 25%;
}
.flex > .grid-30 {
  -ms-flex: 30%;
  flex: 30%;
  max-width: 30%;
}
.flex > .grid-33 {
  -ms-flex: 33.333333%;
  flex: 33.333333%;
  max-width: 33.3333%;
}
.flex > .grid-35 {
  -ms-flex: 35%;
  flex: 35%;
  max-width: 35%;
}
.flex > .grid-40 {
  -ms-flex: 40%;
  flex: 40%;
  max-width: 40%;
}
.flex > .grid-45 {
  -ms-flex: 45%;
  flex: 45%;
  max-width: 45%;
}
.flex > .grid-50 {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}
.flex > .grid-55 {
  -ms-flex: 55%;
  flex: 55%;
  max-width: 55%;
}
.flex > .grid-60 {
  -ms-flex: 60%;
  flex: 60%;
  max-width: 60%;
}
.flex > .grid-65 {
  -ms-flex: 65%;
  flex: 65%;
  max-width: 65%;
}
.flex > .grid-66 {
  -ms-flex: 66.66666%;
  flex: 66.66666%;
  max-width: 66.666%;
}
.flex > .grid-70 {
  -ms-flex: 70%;
  flex: 70%;
  max-width: 70%;
}
.flex > .grid-75 {
  -ms-flex: 75%;
  flex: 75%;
  max-width: 75%;
}
.flex > .grid-80 {
  -ms-flex: 80%;
  flex: 80%;
  max-width: 80%;
}
.flex > .grid-85 {
  -ms-flex: 85%;
  flex: 85%;
  max-width: 85%;
}
.flex > .grid-90 {
  -ms-flex: 90%;
  flex: 90%;
  max-width: 90%;
}
.flex > .grid-95 {
  -ms-flex: 95%;
  flex: 95%;
  max-width: 95%;
}
.flex > .grid-100 {
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}

@media screen and (max-width: 1200px) {
  .flex.wrap > .grid,
  .flex.wrap > [class^="grid-"],
  .flex.wrap > [class*="grid-"] {
    max-width: 100%;
  }
  .flex.wrap > .grid-5 {
    -ms-flex: 3rem;
    flex: 3rem;
  }
  .flex.wrap > .grid-10 {
    -ms-flex: 3rem;
    flex: 3rem;
  }
  .flex.wrap > .grid-15 {
    -ms-flex: 9rem;
    flex: 9rem;
  }
  .flex.wrap > .grid-20 {
    -ms-flex: 12rem;
    flex: 12rem;
  }
  .flex.wrap > .grid-25 {
    -ms-flex: 15rem;
    flex: 15rem;
  }
  .flex.wrap > .grid-30 {
    -ms-flex: 18rem;
    flex: 18rem;
  }
  .flex.wrap > .grid-33 {
    -ms-flex: 20rem;
    flex: 20rem;
  }
  .flex.wrap > .grid-35 {
    -ms-flex: 21rem;
    flex: 21rem;
  }
  .flex.wrap > .grid-40 {
    -ms-flex: 24rem;
    flex: 24rem;
  }
  .flex.wrap > .grid-45 {
    -ms-flex: 27rem;
    flex: 27rem;
  }
  .flex.wrap > .grid-50 {
    -ms-flex: 30rem;
    flex: 30rem;
  }
  .flex.wrap > .grid-55 {
    -ms-flex: 33rem;
    flex: 33rem;
  }
  .flex.wrap > .grid-60 {
    -ms-flex: 36rem;
    flex: 36rem;
  }
  .flex.wrap > .grid-65 {
    -ms-flex: 39rem;
    flex: 39rem;
  }
  .flex.wrap > .grid-66 {
    -ms-flex: 40rem;
    flex: 40rem;
  }
  .flex.wrap > .grid-70 {
    -ms-flex: 42rem;
    flex: 42rem;
  }
  .flex.wrap > .grid-75 {
    -ms-flex: 45rem;
    flex: 45rem;
  }
  .flex.wrap > .grid-80 {
    -ms-flex: 48rem;
    flex: 48rem;
  }
  .flex.wrap > .grid-85 {
    -ms-flex: 51rem;
    flex: 51rem;
  }
  .flex.wrap > .grid-90 {
    -ms-flex: 54rem;
    flex: 54rem;
  }
  .flex.wrap > .grid-95 {
    -ms-flex: 57rem;
    flex: 57rem;
  }
  .flex.wrap > .grid-100 {
    -ms-flex: 60rem;
    flex: 60rem;
  }
}