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

Codes couleurs : 

Jaune : #FFC440 
Rouge : #FF3333
Vert/bleu : #018382
Bleu foncé : #141735

Tous les PX ont été changés en EM (sauf dans délimitation des tailles d'écran pour le responsive
Convertisseur PX en EM si besoin :

https://nekocalc.com/fr/px-a-em-convertisseur


*/

:root {
  --progress-value: 0.5;
  /* Définition de la variable --progress-value */
}

@font-face {
  font-family: "poppinsbold";
  src: url("font/poppins-bold-webfont.eot");
  src: url("font/poppins-bold-webfont.eot?#iefix") format("embedded-opentype"),
    url("font/poppins-bold-webfont.woff2") format("woff2"),
    url("font/poppins-bold-webfont.woff") format("woff"),
    url("font/poppins-bold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinsmedium";
  src: url("font/poppins-medium-webfont.eot");
  src: url("font/poppins-medium-webfont.eot?#iefix") format("embedded-opentype"),
    url("font/poppins-medium-webfont.woff2") format("woff2"),
    url("font/poppins-medium-webfont.woff") format("woff"),
    url("font/poppins-medium-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinssemibold";
  src: url("font/poppins-semibold-webfont.eot");
  src: url("font/poppins-semibold-webfont.eot?#iefix") format("embedded-opentype"),
    url("font/poppins-semibold-webfont.woff2") format("woff2"),
    url("font/poppins-semibold-webfont.woff") format("woff"),
    url("font/poppins-semibold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/*******************************************************************/
/* BALISES HTML PURES */

body {
  color: #141735;
  margin: 0em;
  font-family: "poppinsmedium", Helvetica, Arial;
}

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  border-bottom: solid #FFC440 0.25em;
  background-color: #fff;
  padding: 1em 0em 1em 0em;
}

h1 {
  font-family: "poppinsbold", Helvetica, Arial;
  font-style: normal;
  font-weight: 200;
  font-size: 3em;
  line-height: 1.25em;
  color: #018382;
  margin: 0;
  padding: 0;
}

h2 {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 3.125em;
  font-style: normal;
  font-weight: 200;
  line-height: 1.25em;
  padding-top: 1em;
  padding-bottom: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

h3 {
  text-transform: uppercase;

  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.375em;
  font-style: normal;
  font-weight: 200;
  line-height: 1.25em;
  padding-top: 0.5em;
  /*padding-bottom: 1em;*/
  margin-top: 0;
  margin-bottom: 0;
}

h4 {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 700;

  line-height: 1.25em;
}

a {
  text-decoration: none;
  color: #018382;
}

a.fondBleu:link,
a.fondBleu:hover,
a.fondBleu:visited,
a.adress {
  color: #ffffff;
}

.titreFormationLien {
  color: #141735;
}

.liensdetail {
  color: #ffffff;
  text-decoration: underline;
  font-style: italic;
  font-size: 1em;
}

p {
  font-family: "poppinsmedium", Helvetica, Arial;
  font-size: 1em;
  font-style: normal;
  line-height: 1.75em;
  /*margin: 0em;*/
}

ol {
  padding: 0;
  line-height: 1.75em;
}

ol li {
  display: inline;
}

ol li a[href],
ol li a[href]:visited {
  color: #018382;
  text-decoration: underline;
}

/*******************************************************************/
/* CLASSES SPECIFIQUES */

/* COULEUR ET OMBRE DE TEXTE  */

.texte_blanc {
  color: #ffffff;
  font-size: 1em;
  line-height: 1.75em;
}

.texte_bleu {
  color: #141735;
}

.texte_ombre {
  text-shadow: 0.125em 0.188em 0.25em #141735;
}

/* JUSTIFICATION DE TEXTE */

.texte_gauche {
  text-align: left;
}

.texte_centre {
  text-align: center;
}

.texte_droite {
  text-align: right;
}

/* FOND DE COULEUR */

.fond_rouge {
  background-color: #ff3333;
}

.fond_jaune {
  background-color: #FFC440;
}

.fond_vert {
  background-color: #018382;
}

.fond_bleu {
  background-color: #141735;
}

/* BANDEAU DE COULEUR */

.bandeau {
  width: 100%;
  margin: 0 auto;
  margin-top: 0em;
}

.padding_s {
  padding-bottom: 5em;
}

.margin_t {
  margin-top: 5em;
}

.arrondi_nw {
  border-radius: 5em 0em 0em 0em;
}

.arrondi_ne {
  border-radius: 0em 5em 0em 0em;
}

.arrondi_se {
  border-radius: 0em 0em 5em 0em;
}

.arrondi_sw {
  border-radius: 0em 0em 0em 5em;
}

/* TITRE DE SECTION */

.titre_section {
  width: 100%;

  text-align: center;

  padding-top: 0.063em;
}

/* SVG DE SECTION */

.svg_section {
  height: 5em;

  text-align: center;

  padding: 1em;
}

/* CARTES DE SECTION */

.cartes_section {
  display: flex;
  justify-content: space-between;
}

#cartesNosSolutions p {
  font-size: 1em;
}

/* BOUTON DE COULEUR */

.bouton {
  display: inline-block;

  text-align: center;
  text-decoration: none;

  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;

  outline-offset: -0.125em;
  border-radius: 0.438em;

  padding: 0.938em 2em;
}

.bouton:hover {
  transition: 0.2s;
}

.b_rouge {
  color: #ffffff;
  background-color: #ff3333;
  outline: 0.125em solid #ff3333;
}

.b_rouge:hover {
  color: #ff3333;
  background-color: #ffffff;
}

.b_bleu {
  color: #ffffff;
  background-color: #141735;
  outline: 0.125em solid #141735;
}

.b_bleu:hover {
  color: #141735;
  background-color: #ffffff;
}

.b_rouge_invert,
.b_jaune,
.b_vert {
  color: #141735;
  background-color: #ffffff;
  outline: 0.125em solid #ffffff;
}

.b_rouge_invert:hover {
  color: #ffffff;
  background-color: #ff3333;
}

.b_jaune:hover {
  background-color: #FFC440;
}

.b_vert:hover {
  color: #ffffff;
  background-color: #018382;
}

.b_bleu_invert:hover {
  color: #141735;
  background-color: #ffffff;
  outline: #141735;
  border: 2px solid #141735;
}

/* BARRE DE SEPARATION ENTRE COLONNES DE CONTENU */

.barre:before {
  content: "";
  border: 0.125em solid #141735;
  align-self: stretch;
}

#cartesContrats:before {
  content: "";
  border: 0.125em solid white;
}

#cartesContrats {
  padding-bottom: 3.5em;
}

.pre_barre {
  order: -1;
}

/* JAUGES */

.jauge {
  height: 1em;
  border-radius: 3.125em;
}

.j_rouge {
  width: 100%;
  border: 0.125em solid #ff3333;
}

.j_jaune {
  width: 100%;
  border: 0.125em solid #FFC440;
}

.j_vert {
  width: 100%;
  border: 0.125em solid #018382;
}

.j_bleu {
  width: 100%;
  border: 0.125em solid #141735;
}

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

::selection {
  color: #ffffff;
  background-color: #018382;
}

#wrapper {
  max-width: 100%;
  margin: 0 auto;
}

main {
  width: 100%;
}

#logo img {
  width: 12.5em;
}

.margeHF {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 90%;
  margin: 0 auto;
}

#boutons {
  display: flex;
  justify-content: center;
  width: 25%;
}

#boutons a {
  font-size: 1.125em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43%;
}

.contact:hover,
.inscription:hover {
  svg {
    fill: #ff3333;
  }
}

.contact svg,
.inscription svg {
  height: 1.25em;
  padding-right: 1em;
}

.alignementBoutonsSVG {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.boutonAccueil {
  width: 15%;
  font-size: 1.25em;
}

#fil-ariane {
  padding-bottom: 1em;
}

mark {
  background-color: #ffcc66;
  color: #141735;
}

/*******************************************************************/
/* MARGE POUR LE CONTENU */

.margeContenu,
.margeContenuSolutions {
  max-width: 1920px;
  width: 70%;
  margin: 0 auto;
}

#form-prog .formLigne {
  width: 90%;
  padding-left: 13.9em;
}

#form-prog #formulaireLigne2,
#form-prog #checkRgpdContact {
  padding-left: 15.7em;
}

#form-prog #formulaireEnvoi {
  padding-left: 15.7em;
  align-items: start;
}

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

/* ELEMENTS CENTRES BANDEAUX DE COULEUR */
.bandeau-centre {
  text-align: center;
}

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

/* PAGE ACCUEIL : MENU PRINCIPAL */

nav#menu {
  display: flex;
  width: 65%;
  justify-content: center;
  align-items: center;
}

nav#menu ul {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding-left: 0;
}

nav#menu ul li {
  list-style: none;
  width: fit-content;
  /*margin-left: 0.313em;*/
  text-align: center;
}

nav#menu ul li a {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.1em;
  font-weight: 500;
  font-style: normal;
  color: #141735;
  text-decoration: none;
  display: block;
}

nav#menu ul li a:hover,
.active {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
  color: #018382;
}

.active {
  color: #018382 !important;
  border-bottom: 0.125em solid #018382;
}

/* Dropdown menu */
#menu ul li.has-dropdown {
  position: relative;
}

#menu ul li.has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 8px 0;
  z-index: 1000;
  list-style: none;
  margin: 0;
}

#menu ul li.has-dropdown:hover .dropdown {
  display: block;
}

#menu ul li.has-dropdown .dropdown li {
  display: block;
  width: 100%;
}

#menu ul li.has-dropdown .dropdown li a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
  color: inherit;
  text-align: left !important;
}

#menu ul li.has-dropdown .dropdown li a:hover {
  background-color: #f5f5f5;
}

#menu ul li.has-dropdown>a::after {
  content: ' ▾';
  font-size: 0.8em;
  display: inline-block;
  transition: transform 0.2s ease;
}

#menu ul li.has-dropdown:hover>a::after {
  transform: rotate(180deg);
}

/*******************************************************************/
/* PAGE ACCUEIL : ACCROCHE */

section#accroche {
  width: 100%;
  margin: 0 auto;
  min-height: 21.875em;
  padding-top: 9.375em;
}

#accroche h1 {
  margin-top: 0.5em;
  font-size: 3em;
}

.boutonPedagogie {
  margin-top: 2em;
}

p#accroche {
  margin-top: 1.25em;
  font-size: 1.5em;
  line-height: 1.5em;
}

#menu-phone {
  display: none;
}

.texteaccueil {
  max-width: 1920px;
  width: 70%;
  padding-left: 15%;
  padding-bottom: 1.5em;
  text-align: left;
}

/*******************************************************************/
/* PAGE ACCUEIL : NOS FORMATIONS */

#nosFormations {
  padding-bottom: 1em;
}

#cartesNosFormations {
  padding-bottom: 3em;
}

#cybersecurite,
#ia,
#developpement,
#design,
#web {
  width: 15%;
  text-align: center;
}

/*
Mis en commentaire après ajustement des zones cliquables sur la page, 24/01/2024
Peut normalement être supprimé, mais à garder par pure sécurité, on sait jamais
- Alexis

a.icons, a.icons:link, a.icons:hover, a.icons:visited {
    display: block;
    text-decoration: none;
}

a.icons:visited {
    color: #fff;
}

a.icons:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #018382;
} 

.lienIcons {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 1.25em 1.25em;
    border-radius: 0.625em;
}

.lienIcons:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #018382 !important;
    transition: 0.2s;
}
*/

#boutonNosFormations {
  text-align: center;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

/*******************************************************************/
/* PAGE ACCUEIL : NOS SOLUTIONS */

#elearning,
#certifiantes,
#entreprises,
#surmesure {
  width: 22%;
}

#elearningHaut,
#certifiantesHaut,
#entreprisesHaut,
#surmesureHaut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10.858vw;
  margin-top: 0.625em;
  padding-top: 1em;
  padding-bottom: 1em;
  color: #fff;
  border-radius: 1.563em 1.563em 0em 0em;
  text-align: center;
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
  text-shadow: #141735 0.063em 0 0.625em;
}

#elearningBas,
#certifiantesBas,
#entreprisesBas,
#surmesureBas {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10em;
  vertical-align: middle;
  box-shadow: 0.125em 0.125em 0.125em 0.063em rgba(143, 143, 143, 0.2);
  color: #141735;
  border-radius: 0em 0em 1.563em 1.563em;
  text-align: center;
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
}

#elearningBas p,
#certifiantesBas p,
#entreprisesBas p,
#surmesureBas p {
  text-align: left;
  padding-left: 1em;
}

.solution-lg {
  width: 80%;
  font-size: 1em;
}

.solution-sm {
  width: 20%;
}

#indicateursCartes {
  display: none;
}

/*******************************************************************/
/* PAGE ACCUEIL : NO STRESS */

.affichageTel {
  display: none;
}

#nostress {
  padding-bottom: 1em;
}

#cartesNoStress {
  padding-bottom: 3em;
}

#ecole,
#accompagnement,
#pedagogie {
  width: 25%;
}

#boutonNoStress {
  margin-bottom: 1em;
  padding-bottom: 1em;
}

/*******************************************************************/
/* PAGE ACCUEIL : TEMOIGNAGES */

/* étoiles avis google */
.star {
  font-size: 1em;
  /* Agrandit les étoiles */
  color: #FFC440;
  /* Change la couleur des étoiles */
}

.half-star:before {
  content: "\2605";
  position: absolute;
  opacity: 0;
}

#containerReviews {
  width: 70%;
  margin: 0 auto;
}

#starAll {
  font-size: 1.3em;
}

#reviewsAll img {
  width: 85%;
}

#reviewsAll p:nth-child(1) {
  font-size: 1.2em;
}

#reviewsAll p:nth-child(3) {
  font-size: 0.6em;
}

.flexReviews {
  display: flex;
  gap: 5%;
}

.flexReviews p {
  font-size: 0.8em;
}

.flexReviews h6 {
  margin: 0.2em;
  margin-left: 0;
  font-weight: bold;
}

#dateReviews {
  font-size: 0.6em;
  color: #cccccc;
}

#logo-google-reviews {
  max-width: 100%;
  height: auto;
}

#avatar {
  width: 30%;
}

#comp {
  width: 60%;
}

#reviewsAll {
  display: flex;
  align-items: center;
  text-align: center;
}

.read-more,
.read-less {
  font-size: 0.8em;
  color: #141735;
  text-decoration: underline;
}

/* PAGE ACCUEIL : TEMOIGNAGES */
/*******************************************************************/

/*******************************************************************/
/* PAGE ACCUEIL : PLUS D'INFOS */

#plusdinfos {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-size: 1.25em;
  margin-top: 5em;
}

#titrePlusdinfos,
#boutonPlusdinfos {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#titrePlusdinfos {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.375em;
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  line-height: 1.25em;
}

#boutonPlusdinfos {
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

#boutonPlusdinfos a {
  font-size: 0.9em;
}

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

/* PAGE ACCUEIL : FOOTER */

#liens {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 2em;
  width: 100%;
  min-height: 12.5em;
  background-color: #fff;
  /*font-family: "poppinssemibold", Helvetica, Arial;*/
  font-weight: 500;
  font-style: normal;
  font-size: 1em;
}

/*.lienFooter{
    width: 15%;
}*/

.lienFooter ul {
  padding: 0;
  list-style-type: none;
}

.lienFooter ul li {
  padding: 0.2em 0;
  font-weight: lighter;
}

.titreLiens {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1em;
}

#minilogo {
  text-align: center;
  width: min-content;
  font-family: "poppinsmedium", Helvetica, Arial;
  font-size: 0.75em;
}

#logo-footer {
  text-align: center;
}

.notation-etoiles {
  display: flex;
  justify-content: space-around;
}

/*#liens1, #liens2, #liens3 {
    width: 15%;
}*/

#contact {
  /*width: min-content;*/
  text-align: center;
}

#horaires {
  font-size: 1em;
  line-height: 1.75em;
  padding-top: 2%;
}

.marge-droite {
  padding-right: 1.125em;
}

#etreRappele {
  display: flex;
  width: 90%;
  margin: 0 auto;
}

.boutonRappel {
  width: 90%;
  color: #ffffff !important;
  font-size: 1.125em;
}

.boutonRappel:hover {
  color: #ff3333 !important;
}

#pictosRS {
  display: flex;
  justify-content: space-evenly;
}

#pictosRS svg {
  width: 3em;
}

#mailFooter {
  padding-right: 0.5em;
}

#piedpage {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  color: #fff;
  width: 100%;
  height: min-content;
  background-color: #141735;
  text-align: center;
  font-size: 0.875em;
}

#piedpage a {
  color: #ffffff;
}

#infos-officielles {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

#liens #minilogo img {
  width: 50%;
}

#liens a,
#liens a:link,
#liens a:hover,
#liens a:visited {
  color: #141735;
  text-decoration: none;
  font-size: 0.9em;
}

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

/* PAGE CEFII : NOS VALEURS */

section#accrocheCEFii,
section#accrocheCEFiiContact {
  width: 100%;
  margin: 0 auto;
  min-height: 21.875em;
  padding-top: 9.375em;
}

/*
#accrocheCEFii h1{
    margin-top: 1.875em;
}
*/

#passion,
#humain,
#innovation,
#alternanceDev,
#alternanceDesign,
#alternanceWeb {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

/* PAGE CEFII : NOTRE PEDAGOGIE ET QUELQUES CHIFFRES */

#cartePedagogieG,
#cartePedagogieD,
#carteChiffresG,
#carteChiffresD {
  width: 40%;
}

#titreIntegrerPedagogie,
#boutonIntegrerPedagogie {
  display: flex;
  justify-content: center;
}

/*#infosReussite {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5%;
}*/

#pourcentageReussite p {
  font-size: 1.375em;
}

#textePourcentageReussite p {
  font-size: 0.875em;
}

#pourcentageFormation {
  font-size: 1.375em;
}

.remplissageJaugeGlobale {
  width: 91%;
  background-color: #ff3333;
  animation: 2s jaugeGlobale;
  -webkit-animation: 2s jaugeGlobale;
}

.remplissageJaugeEcole {
  width: 91%;
  background-color: #FFC440;
  animation: 2s jaugeEcole;
}

.remplissageJaugeDistance {
  width: 91%;
  background-color: #018382;
  animation: 2s jaugeDistance;
}

@keyframes jaugeGlobale {
  from {
    width: 0%;
  }

  to {
    width: 91%;
  }
}

@keyframes jaugeEcole {
  from {
    width: 0%;
  }

  to {
    width: 91%;
  }
}

@keyframes jaugeDistance {
  from {
    width: 0%;
  }

  to {
    width: 89%;
  }
}

#jaugesInsertion2023 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#titresJaugesInsertion,
#jaugesInsertion {
  padding-top: 2em;
}

#titresJaugesInsertion p {
  width: 25%;
  text-align: center;
}

#jaugesInsertion {
  width: 100%;
}

#tauxDWWM,
#tauxCDUI,
#tauxCDA {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.progressBarDWWM,
.progressBarCDUI,
.progressBarCDA,
.progressBarCDACFA,
.progressBarCDUICFA {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.938vw;
  /* Valeur très spécifique, mais normale pour conserver un cercle parfait */
  border-radius: 50%;
}

/* Texte inséré à l'intérieur de la jauge */
.progressBarDWWM:before,
.progressBarCDUI:before,
.progressBarCDA:before,
.progressBarCDACFA,
.progressBarCDUICFA {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1.375em;
  color: #141735;
}

.progressBarDWWM:before {
  content: "79%";
}

.progressBarCDUI:before {
  content: "89%";
}

.progressBarCDUICFA:before {
  content: "100%";
}

.progressBarCDA:before {
  content: "95%";
}

.progressBarCDACFA:before {
  content: "100%";
}

.fillProgressBarDWWM,
.fillProgressBarCDUI,
.fillProgressBarCDA,
.fillprogressBarCDUICFA,
.fillprogressBarCDACFA {
  background: radial-gradient(closest-side, #ffffff 79%, transparent 80% 100%),
    conic-gradient(#FFC440 calc(var(--progress-value) * 1%), #ffffff 0);
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.fillProgressBarDWWM {
  animation-name: insertionDWWM;
}

.fillProgressBarCDUI {
  animation-name: insertionCDUI;
}

.fillProgressBarCDA {
  animation-name: insertionCDA;
}

.fillProgressBarCDACFA {
  animation-name: insertionCDACFA;
}

.fillProgressBarCDUICFA {
  animation-name: insertionCDUICFA;
}

@property --progress-value {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes insertionDWWM {
  to {
    --progress-value: 83;
  }
}

@keyframes insertionCDUI {
  to {
    --progress-value: 97;
  }
}

@keyframes insertionCDUICFA {
  to {
    --progress-value: 100;
  }
}

@keyframes insertionCDA {
  to {
    --progress-value: 85;
  }
}

@keyframes insertionCDACFA {
  to {
    --progress-value: 100;
  }
}

#boutonIntegrerPedagogie {
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.zoomChiffres {
  padding-top: 3.2em;
}

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

/* PAGE CEFII : LA TEAM DU CEFII */

#cartesTeamCEFii {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

figure {
  width: 25%;
  border-radius: 1.563em;
  position: relative;
  overflow: hidden;
}

figure:hover {
  .texte-explicatif {
    display: block;
    animation: textShow 1s forwards;
  }

  figcaption {
    animation: textUp 1s forwards;
  }
}

figure img {
  width: 100%;
  border-radius: 1.563em 1.563em 0em 0em;
}

figcaption {
  position: absolute;
  bottom: 0%;
  width: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  box-shadow: 0.125em 0.125em 0.125em 0.063em rgba(143, 143, 143, 0.2);
  background-color: #ffffff;
  color: #141735;
  border-radius: 0em;
  text-align: center;
  vertical-align: middle;
  transform: translateY(50%);
  transition: transform 0.5s ease;
}

/*classe du figcaption de la page LE CEFII*/
.cardTeam {
  position: absolute;
  bottom: 0%;
  width: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  box-shadow: 0.125em 0.125em 0.125em 0.063em rgba(143, 143, 143, 0.2);
  background-color: #ffffff;
  color: #141735;
  border-radius: 0em;
  text-align: center;
  vertical-align: middle;
  transform: translateY(59%);
  transition: transform 0.5s ease;
  -webkit-transform: translateY(59%);
  -moz-transform: translateY(59%);
  -ms-transform: translateY(59%);
  -o-transform: translateY(59%);
}

figcaption h3,
figcaption p:first-child {
  display: block;
  transform: translateY(0);
  padding-bottom: 0.1em;
  margin: auto;
}

.texte-explicatif {
  display: none;
  opacity: 0;
  font-family: "poppinsmedium", Helvetica, Arial;
  margin-left: 1em;
  margin-right: 1em;
}

@keyframes textUp {
  to {
    transform: translateY(0);
    opacity: 0.9;
  }
}

.text-show {
  animation: 2s textShow;
}

@keyframes textShow {
  to {
    opacity: 1;
  }
}

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

/* PAGE CEFII : LE CEFII EST CERTIFIE QUALIOPI */

#carteQualiopiG,
#carteQualiopiD {
  width: 40%;
}

#partenaires img {
  height: 6em;
}

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

/* PAGE CONTACT : FORMULAIRE */

#formulaire {
  margin-top: 2.5em;
}

#formulaireRappelLigne1,
#formulaireLigne2 {
  display: flex;
  margin-top: 1em;
  margin-bottom: 1em;
}

#formulaireRappelLigne1 {
  justify-content: center;
}

#formulaireLigne2 {
  flex-direction: column;
  width: 45.5%;
  padding-left: 17.8em;
}

#formulaireEnvoi {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 60%;
}

#formulaireRappelEnvoi {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formLigne {
  display: flex;
  /*justify-content: space-between;*/
  width: 60%;
  padding-left: 15.8em;
}

.formEncadre {
  display: flex;
  flex-direction: column;
  width: 35%;
  padding: 0 2em;
}

label {
  font-family: "poppinsbold", Helvetica, Arial;
  margin-top: 1em;
  margin-bottom: 1em;
}

#formulaireLigne1 .select {
  padding: 0.5em;
  border: 1px solid #141735;
  border-radius: 0.5em;
  font-size: 1.375em;
  height: 3.1em;
}

#formulaireEnvoi p {
  font-size: 0.875em;
  margin-bottom: 1em;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="select"] {
  /*width: 30em;*/
  height: 2em;
  padding: 0.5em;
  border: 1px solid #141735;
  border-radius: 0.5em;
  font-size: 1.375em;
  /* box-shadow: 0.125em 0.188em 0.25em #141735; */
}

input[type="submit"] {
  width: 40%;
  font-size: 1em;
}

textarea {
  height: 9em;
  padding: 0.5em;
  border: 1px solid #141735;
  border-radius: 0.5em;
  font-size: 1.375em;
  resize: none;
}

.retourAccueil {
  margin-top: 1.25em;
}

#telephone a,
active {
  color: white;
}

.error {
  color: #ff3333;
  padding-top: 0.3em;
}

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

/* PAGE CONTACT : INFOS PRATIQUES */

/*#horairesCEFii, #telephone, #transports, #adresse {
    width: 40%;
}*/

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

/* PAGE CONTACT : GOOGLE MAPS */

#nousSommesIci {
  display: flex;
}

#nousSommesIciDivOne {
  width: 50%;
}

#encadreMaps {
  display: flex;
  justify-content: center;
  align-items: end;
}

#encadreMaps iframe {
  width: 75%;
  height: 30em;
  border-radius: 0.5em;
}

#cartesInfosPratiques {
  width: 50%;
}

#photocefiiavrille {
  display: flex;
  justify-content: center;
  align-items: end;
}

#photocefiiavrille img {
  width: 75%;
  height: auto;
  border-radius: 0.5em;
}

/****************PAGE TEMOIGNAGES/AVIS***********************/

.cartetemoignage {
  width: 40%;
  border-radius: 2em;
  box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
  padding: 2em;
  margin: 2em;
  flex-direction: column;
}

#cartestemoignages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#phototemoignage1 img {
  width: 80%;
  margin: auto;
  display: flex;
}

#avisTemoignages {
  padding-bottom: 1em;
}


/****************PAGE CANDIDATER****************************/
.flexCandidater {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.flexCandidater div {
  width: 46%;
  border-color: #141735;
  margin-bottom: 2em;
}

.flexCandidater h2 {
  font-family: "poppinsbold", Helvetica, Arial;
  color: #141735;
  font-size: 1.5em;
  padding: 1em;
}

.flexCandidater .formEncadre {
  width: 70%;
}

.flexCandidater .select,
#formulaireLigne2 .select {
  padding: 0.5em;
  border: 1px solid #141735;
  border-radius: 0.5em;
  font-size: 1.375em;
}

#validationDemande {
  text-align: center;
  margin-top: 1em;
}

.txtItalique {
  font-size: 0.8em;
  padding-left: 1.7em;
}

#checkRgpdCandidater {
  padding-left: 3.7em;
  padding-bottom: 2em;
}

#checkRgpdContact {
  padding-left: 17.8em;
}

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

/* PAGE NOS FORMATIONS : PHRASE D'ACCROCHE */

/* colorer en rouge une partie des H1 */
.partieTitreRouge {
  color: #ff3333
}

#parcours-pedagogique,
#suivi-accompagnement,
#experts,
#avantageA,
#avantageB,
#avantageC,
#avantageD {
  width: 25%;
  display: flex;
  flex-direction: column;
}

#cartesNosAvantages h3 {
  text-align: center;
}

#avantageA,
#avantageB,
#avantageC,
#avantageD {
  width: 20%;
}

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

/* PAGE NOS FORMATIONS : NOS FORMATIONS */

#toutesNosFormations {
  width: 100%;
  margin-bottom: 5em;
}

#infosFormationsG,
#infosFormationsD {
  width: 40%;
}

#boutonsFormations,
#boutonsModules {
  margin-top: 5em;
  margin-bottom: 5em;
}

#boutonsModules {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 3em;
  margin-top: 0;
}

#boutonsFormations {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 3em;
}

.domaine-formation {
  width: 12em;
  height: 100%;
  margin: 0em 3em 0em 3em;
  background-color: #ff3333;
  color: #ffffff;
  outline: 0.125em solid #ff3333;
  outline-offset: -0.125em;
  border-radius: 0.5em;
  overflow: hidden;
  user-select: none;
}

.domaine-formation.selected {
  background-color: white;
  color: #ff3333;
}

/*
.domaine-formation:hover {
    background-color: #FFFFFF;
    color: #FF3333;
    transition: 0.2s;
}
*/

.domaine-formation label span {
  text-align: center;
  padding: 1em;
  display: block;
  cursor: pointer;
}

.domaine-formation label input {
  position: absolute;
  display: none;
  color: #ffffff;
}

/*.domaine-formation input:checked + span {
    background-color: #FFFFFF;
    color: #FF3333;
    outline: 0.125em solid #FF3333;
    outline-offset: -0.125em;
}*/

/*
.domaine-formation input:checked:hover + span {
    background-color: #FF3333;
    color: #FFFFFF;
    transition: 0.2s;
}
*/

#cartesFormations,
#cartesFormationsCertifiantes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#cartesFormationsCertifiantes {
  margin-top: 5em;
}

.carteFormation {
  width: 40%;
  border-radius: 2em;
  box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
  padding: 2em;
  margin: 2em;
  flex-direction: column;
}

.surligne-jaune {
  background: linear-gradient(#ffffff 60%, #FFC440 40%);
}

.savoirPlusFormation {
  margin-top: 1.25em;
  width: 80%;
}

/*#cartesNosAvantages{
    padding-top: 3em;
}*/

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

/* PAGE FORMATION : ACCROCHE */

section#accrocheFormation {
  width: 100%;
  margin: 0 auto;
  min-height: 21.875em;
  padding-top: 9.375em;
}



.typeFormation {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1.375em;
  text-transform: uppercase;
  color: #ff3333;
  padding-bottom: 1em;
}

.bigger_text {
  font-size: 1.1em;
}

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

/* PAGE FORMATION : INFOS FORMATION */

#infosFormation {
  padding-top: 5em;
}

#pre-requis,
#objectifs,
#diplome,
#debouches,
#certificat {
  width: 20%;
  padding-top: 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.label_programme {
  width: 80%;
}

#certificat svg {
  width: 7em;
}

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

/* PAGE FORMATION : INFORMATIONS */

#detailsFormation {
  width: 100%;
}

#carteDetailsG,
#carteDetailsD,
#carteInfosFormationG,
#carteInfosFormationD {
  width: 40%;
}

#cartesDetailsFormation ul,
#ensembleProgrammeFormation ul,
.detailsModalites ul {
  margin: 0;
}

#cartesDetailsFormation li,
#ensembleProgrammeFormation li,
.detailsModalites li {
  font-size: 1em;
  line-height: 1.75em;
}

.titre_3,
.titre_3_formation {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1.375em;
  font-style: normal;
  font-weight: 700;

  line-height: 1.25em;
}

.titre_3_formation {
  font-family: "poppinssemibold", Helvetica, Arial;
  text-transform: uppercase;
  padding: 0.5em 0em 0em 0em;
  margin: 0;
}

.svg_visuelpicto {
  width: 18em;
  padding: 7px;
}

.svg_pictofinancement {
  width: 13em;
  padding: 7px;
}

.visuelpictos {
  display: flex;
  align-items: center;
  gap: 3em;
}

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

/* PAGE FORMATION : JAUGES */
.remplissagejaugeGlobaleBackend,
.remplissageJaugeGlobaleInfographiste,
.remplissageJaugeGlobaleCFA,
.remplissageJaugeGlobaleDWWM,
.remplissageJaugeGlobaleCDUI,
.remplissageJaugeGlobaleCDA {
  background-color: #ff3333;
}

.remplissageJaugeEcoleCFA,
.remplissageJaugeEcoleDWWM,
.remplissageJaugeEcoleCDA,
.remplissageJaugeEcoleCDUI,
.remplissageJaugeInsertion2021 {
  background-color: #FFC440;
}

.remplissageJaugeDistanceCFA,
.remplissageJaugeDistanceDWWM,
.remplissageJaugeDistanceCDA,
.remplissageJaugeDistanceCDUI,
.remplissageJaugeReussite2021 {
  background-color: #018382;
}

.remplissagePoursuiteEtude,
.remplissageJaugeAlternanceCDUI,
.remplissageJaugeAlternanceCDA {
  background-color: #141735;
}

.remplissageJaugeDistanceCFA {
  width: 100%;
  animation: 2s jaugeDistanceCFA;
  -webkit-animation: 2s jaugeDistanceCFA;
}

.remplissageJaugeEcoleCFA {
  width: 100%;
  animation: 2s jaugeEcoleCFA;
  -webkit-animation: 2s jaugeEcoleCFA;
}

.remplissageJaugeGlobaleCFA {
  width: 100%;
  animation: 2s jaugeGlobaleCFA;
  -webkit-animation: 2s jaugeGlobaleCFA;
}

.remplissageJaugeGlobaleCDA {
  width: 100%;
  animation: 2s jaugeGlobaleCDA;
  -webkit-animation: 2s jaugeGlobaleCDA;
}

.remplissageJaugeGlobaleDWWM {
  width: 85%;
  animation: 2s jaugeGlobaleDWWM;
  -webkit-animation: 2s jaugeGlobaleDWWM;
}

.remplissageJaugeGlobaleCDUI {
  width: 95%;
  animation: 2s jaugeGlobaleCDUI;
  -webkit-animation: 2s jaugeGlobaleCDUI;
}

.remplissageJaugeEcoleDWWM {
  width: 82%;
  animation: 2s jaugeEcoleDWWM;
}

.remplissageJaugeDistanceDWWM {
  width: 87%;
  animation: 2s jaugeDistanceDWWM;
}

.remplissageJaugeDistanceCDUI {
  width: 86%;
  animation: 2s jaugeDistanceCDUI;
}

.remplissageJaugeAlternanceCDUI {
  width: 100%;
  animation: 2s jaugeAlternanceCDUI;
  -webkit-animation: 2s jaugeAlternanceCDUI;
}

.remplissageJaugeAlternanceCDA {
  width: 100%;
  animation: 2s jaugeAlternanceCDA;
  -webkit-animation: 2s jaugeAlternanceCDA;
}

.remplissagePoursuiteEtude {
  width: 20%;
  animation: 2s poursuiteEtude;
  -webkit-animation: 2s poursuiteEtude;
}

.remplissagejaugeGlobaleBackend,
.remplissageJaugeGlobaleInfographiste,
.remplissageEcoleCDA,
.remplissageJaugeDistanceCDA,
.remplissageJaugeEcoleCDUI {
  width: 100%;
  animation: 2s jaugeComplete;
  -webkit-animation: 2s jaugeComplete;
}

.remplissageJaugeInsertion2021 {
  width: 75%;
  animation: 2s jaugeInsertionEntreprise;
}

.remplissageJaugeReussite2021 {
  width: 72%;
  animation: 2s jaugeReussiteEntreprise;
}

@keyframes poursuiteEtude {
  from {
    width: 0%;
  }

  to {
    width: 15%;
  }
}

@keyframes jaugeDistanceCFA {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeEcoleCFA {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeGlobaleCFA {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeAlternanceCDA {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeAlternanceCDUI {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeGlobaleCDA {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeGlobaleCDUI {
  from {
    width: 0%;
  }

  to {
    width: 94%;
  }
}

@keyframes jaugeGlobaleDWWM {
  from {
    width: 0%;
  }

  to {
    width: 83%;
  }
}

@keyframes jaugeEcoleDWWM {
  from {
    width: 0%;
  }

  to {
    width: 82%;
  }
}

@keyframes jaugeDistanceDWWM {
  from {
    width: 0%;
  }

  to {
    width: 83%;
  }
}

@keyframes jaugeDistanceCDUI {
  from {
    width: 0%;
  }

  to {
    width: 94%;
  }
}

@keyframes jaugeComplete {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes jaugeInsertionEntreprise {
  from {
    width: 0%;
  }

  to {
    width: 75%;
  }
}

@keyframes jaugeReussiteEntreprise {
  from {
    width: 0%;
  }

  to {
    width: 72%;
  }
}

.noteSatisfaction {
  /*display: flex;*/
  align-items: center;
}

#Groupe_132 {
  margin-right: 1em;
}

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

/* PAGE FORMATION : QUEL EST LE PROGRAMME */

#programmeFormation {
  width: 100%;
}

#ensembleProgrammeFormation h3 {
  padding: 0.5em 1em 0.5em 1em;
  margin: 1em 0em 1em 0em;
}

#ensembleProgramme {
  display: flex;
  justify-content: space-between;
}

#ensembleProgrammeG,
#ensembleProgrammeD {
  width: 47%;
}

#boutonTelechargementProgramme {
  display: flex;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 5em;
}

.telechargementProgramme {
  margin-top: 1.25em;
  border: none;
  font-size: 1.125em;
}

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

/* PAGE FORMATION : MODALITES */

#modalites {
  height: auto;
  margin-top: 3em;
}

#cartesModalites {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*classe des tabs*/
.detailsModalites {
  position: relative;
}

/*bordure bas sur l'onglet cliqué*/
.borderBottom {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Ajouter cette propriété pour positionner correctement le pseudo-élément */
}

.borderBottom::after {
  content: "";
  width: 38%;
  height: 3px;
  background-color: #018382;
  /* Couleur de la bordure */
  position: absolute;
  /* Ajouter cette propriété pour positionner correctement le pseudo-élément */
  bottom: 0;
  /* Positionner la bordure en bas de l'onglet */
}

.content {
  display: block;
  /* position: absolute; */
  max-height: max-content;
  width: 100%;
  background-color: #ffffff;
  border-radius: 0em 0em 2em 2em;
}

#boutonsModalites {
  display: flex;
  justify-content: space-between;
  /*background-color: rgb(20, 23, 53, 0.2);*/
  border-radius: 1.5em 1.5em 0em 0em;
}

#boutonFonctionnementCentre,
#boutonFonctionnementDistance,
#boutonFonctionnementAlternance {
  width: 100%;
  border-radius: 0.5em 0.5em 0em 0em;
  background-color: #ffffff;
}

#boutonsModalites label {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  color: #ffffff;
  cursor: pointer;
  border: 1px solid white;
  border-radius: 1.7em 1.7em 0em 0em;
}

#boutonsModalites label input {
  display: none;
  color: #ffffff;
  padding: 1em;
  width: 100%;
  text-align: center;
}

#boutonsModalites label input:checked+span {
  background-color: #ffffff;
  color: #018382;
  border-radius: 1.5em 1.5em 0em 0em;
  padding: 1em 0em 1em 0em;
  width: 100%;
  letter-spacing: 0.1em;
  text-align: center;
}

#modalites p {
  padding: 1em 0em 1em 1em;
  margin: 0;
}

#fonctionnementCentreDwwm p,
#fonctionnementDistanceCda p,
#fonctionnementDistanceCdui p,
#fonctionnementDistanceInfo p,
#fonctionnementDistanceFront p,
#fonctionnementDistanceBack p,
#fonctionnementDistanceInte p,
#fonctionnementCentreModule p,
#fonctionnementDistance p,
#fonctionnementAlternance p {
  padding: 2em 1em 1em 3em;
}

#fonctionnementCentreDwwm,
#fonctionnementDistanceCda,
#fonctionnementDistanceCdui,
#fonctionnementDistanceInfo,
#fonctionnementDistanceFront,
#fonctionnementDistanceBack,
#fonctionnementDistanceInte,
#fonctionnementCentreModule {
  display: block;
}

#fonctionnementDistance,
#fonctionnementAlternance {
  display: none;
}

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

.lienSousProduit {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
  border: none;
  background-color: #018382;
  color: #ffffff;
  outline: 0.125em solid #018382;
  outline-offset: -0.125em;
  padding: 0.938em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  border-radius: 0.438em;
}

.lienSousProduit:hover {
  background-color: #ffffff;
  color: #018382;
  transition: 0.2s;
}

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

/* PAGE FORMATION : FINANCEMENT */

#financement {
  width: 100%;
  /* margin-top: 1.875em; */
}

#boutonFinancement {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.boutonFinancement {
  width: 15%;
  margin-top: 1.25em;
  border: none;
  font-size: 1.125em;
  box-shadow: 0em 0.125em 0.5em 0.063em rgba(143, 143, 143, 0.2);
  background-color: #141735;
  color: white;
}

.eligibleCPF {
  font-family: "poppinsbold", Helvetica, Arial;
}

.lienFinancement {
  color: #018382;
  text-decoration: underline;
}

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

/* PAGE CFA */

#groupes {
  margin-top: 3.5em;
}

#cartesNosValeurs h3 {
  text-align: center;
}

#entreprises-accueil,
#apprenants {
  width: 40%;
  padding-top: 4em;
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.infos-centrees {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cartesNosValeurs p {
  margin-bottom: 1.5em;
  text-align: center;
}

#entreprises-accueil img,
#apprenants img {
  height: 5em;
}

#boutonsPagesCFA {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#boutonEntreprises,
#boutonApprenants {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 1.5em;
}

#boutonEntreprises a,
#boutonApprenants a {
  width: 30%;
  border: none;
  font-size: 1.25em;
}

#boutonEntreprises a:hover,
#boutonApprenants a:hover {
  background-color: #018382;
  color: #ffffff;
  transition: 0.2s;
}

#quelquesChiffresCFA {
  margin-bottom: 2em;
  padding-bottom: 2em;
}

#pratiqueCFAG,
#pratiqueCFAD {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#pratiqueCFAD iframe {
  width: 100%;
}

h2.objectifs {
  padding-bottom: 0em;
  margin-bottom: 0.2em;
}

h3.pedago {
  padding-top: 0;
  padding-bottom: 3.5em;
}

#titresJaugesInsertionCFA {
  padding-top: 2em;
  width: 100%;
}

#titresJaugesInsertionCFA p {
  width: 25%;
  text-align: center;
}

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

/* PAGES CFA APPRENANT / CFA ENTREPRISE */

#experience-pro,
#statut-salarie,
#formation-remun {
  width: 25%;
  padding-top: 0em;
  font-family: "poppinssemibold", Helvetica, Arial;
  font-weight: 500;
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pratique a,
#pratique a:visited,
#aideAlternance a,
#aideAlternance a:visited,
#chiffresAlternance a,
#chiffresAlternance a:visited {
  color: #018382;
}

#choisirAlternance a:visited,
#choisirAlternance a {
  color: white;
  text-decoration: underline;
}

#cartesPratique {
  padding-bottom: 3em;
}

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

.engagement svg {
  height: 4em;
  padding-right: 2em;
}

#cartesSuivi:before {
  border: 0.125em solid #ffffff;
}

#carteChoixAltD,
#carteDroitsG,
#carteDroitsD,
#carteSuiviG,
#carteSuiviD,
#pratiqueG,
#pratiqueD,
#cartePrendreAltG,
#cartePrendreAltD,
#carteContratsG,
#carteContratsD,
#carteAidesG,
#carteAidesD,
#pratiqueCFAG,
#pratiqueCFAD {
  width: 40%;
}

#infoHandicap {
  font-family: "poppinsmedium", Helvetica, Arial;
  margin: 0 auto;
  margin-top: 3em;
  border-radius: 2em;
  box-shadow: 0em 0.5em 0.5em 0.5em rgba(143, 143, 143, 0.2);
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.75em;
}

#infoHandicap a {
  font-family: "poppinssemibold", Helvetica, Arial;
  width: 15%;
  font-weight: 500;
  font-style: normal;
  background-color: #ff3333;
  border: none;
  color: #ffffff !important;
  outline: 0.125em solid #ff3333;
  outline-offset: -0.125em;
  padding: 0.938em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 0.438em;
}

#infoHandicap a:hover {
  background-color: #ffffff;
  color: #ff3333 !important;
  transition: 0.2s;
}

#infoHandicap h3 {
  text-align: center;
}

#boutonInfoHandicap {
  display: flex;
  justify-content: center;
}

#logoshandicap img {
  width: 40%;
}

#logoshandicap {
  text-align: center;
}

#pratiqueTauxReussite,
#pratiqueTauxInsertion {
  display: flex;
  justify-content: space-between;
}

#jaugeInsertion2021,
#jaugeReussite2021,
#remplissageJaugeInsertion2021,
#remplissageJaugeReussite2021 {
  height: 1em;
  border-radius: 3.125em;
}

#jaugeInsertion2021 {
  width: 100%;
  border: 0.125em solid #FFC440;
}

#jaugeReussite2021 {
  width: 100%;
  border: 0.125em solid #018382;
}

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

/* PAGE FORMATIONS COURTES */

.carteModule {
  width: 40%;
  border-radius: 2em;
  box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
  padding: 2em;
  margin: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contenuModule {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contenuModule h3 {
  width: 100%;
  font-family: "poppinssemibold", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 1.375em;
  font-style: normal;
  text-transform: none;
  line-height: 1.25em;
  margin: 0em;
}

.contenuModule>div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.savoirPlusModule {
  margin-top: 1.25em;
  border: none;
  width: 50%;
}

.noMarginTop {
  margin-top: 0;
}

#boutonsModulesSelect {
  display: none;
}

/*Landing page IA*/
.badgeFormation {
  display: inline-block;
  background: #f05a22;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.contenu_programme .bouton {
  margin-top: 15px;
  display: inline-block;
}

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

/* PAGE FAQ */

#questionsOrganisation label input,
#questionsDistance label input,
#questionsFinancement label input,
#questionsPost label input,
#questionsIA label input,
.reponse_w,
.reponse_b {
  display: none;
}

.question_w svg,
.question_b svg {
  height: 2em;
  padding: 2em;
}

.question_w label,
.question_b label {
  display: flex;
  align-items: center;
  margin: 0;
}

.question_w input[type="checkbox"]:checked~svg,
.question_b input[type="checkbox"]:checked~svg {
  transform: rotate(90deg);
}

.question_w label span,
.question_b label span {
  user-select: none;
  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.375em;
  line-height: 1.75em;
  cursor: pointer;
}

.question_w label span {
  color: #ffffff;
}

.question_b label span {
  color: #141735;
}

.reponse_w,
.reponse_b {
  font-family: "poppinsmedium", Helvetica, Arial;
  line-height: 1.75em;
  padding-top: 1em;
  padding-left: 3em;
  padding-bottom: 2em;
}

.reponse_w,
.reponse_w a {
  color: #ffffff;
}

.reponse_b {
  color: #141735;
}

.reponse_b a {
  color: #018382;
}

#faqDistance,
#faqPost {
  width: 100%;
  margin-bottom: 5em;
}

#questionsOrganisation hr,
#faqFinancement hr,
#faqIA hr {
  color: white;
}

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

/* PAGE MENTIONS LEGALES */

#mentionsLegales {
  margin-top: 1.875em;
  margin-bottom: 5em;
  display: flex;
  justify-content: space-between;
}

#mentionsLegales a {
  color: #018382;
}

#mentionsG,
#mentionsD {
  width: 40%;
  line-height: 1.75em;
}

.titreMentions {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.375em;
  text-transform: uppercase;
}

#mentionsLegales:before {
  content: "";
  border: 0.125em solid #141735;
  align-self: stretch;
}

#mentionsG {
  order: -1;
}

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

/* PAGE POLITIQUE DE CONFIDENTIALITE */

#accrochePolitique {
  width: 50%;
  font-family: "poppinsmedium", Helvetica, Arial;
  font-size: 1em;
  line-height: 1.75em;
}

#accrochePolitique a {
  color: #018382;
}

#politiqueConfidentialite {
  margin-top: 1.875em;
  margin-bottom: 5em;
  display: flex;
  justify-content: space-between;
}

#politiqueG,
#politiqueD {
  width: 40%;
  line-height: 1.75em;
}

.definition {
  font-family: "poppinssemibold", Helvetica, Arial;
}

.titrePolitique {
  font-family: "poppinssemibold", Helvetica, Arial;
  font-size: 1.375em;
  text-transform: uppercase;
}

.sousTitrePolitique {
  font-family: "poppinsbold", Helvetica, Arial;
  font-size: 1em;
}

#accrocheCEFiiErreur404 {
  background: url(img/bandeau-charly-patrault-404.webp) no-repeat;
  background-size: cover;
  background-position-y: -6.25em;
  background-position: right 0%;
  margin: 0;
  padding-bottom: 5%;
  padding-top: 9.375em;
}

#accrocheCEFiiErreur404 h1 {
  padding-top: 1.5em;
}

/******************PAGE CANDIDATER****************************/
.sectionCandidater {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.sectionCandidater h3 {
  text-align: center;
}

.formation-handicap {
  width: 40%;
  display: flex;
  flex-direction: column;
}

/*******************PAGE NOS REFERENCES***************************/
#referencesClients {
  padding-bottom: 0;
}

#logosClients {
  display: flex;
  flex-wrap: wrap;
}

#logosClients div {
  width: 20%;
}

#references-formations div div,
#references-formations h3 {
  text-align: center;
}

/******************PAGE APRES LE CEFII***********************/
#mentionsG li {
  font-size: 1em;
}

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

/* TOUTES LES PAGES : BOUTON SCROLL HAUT */

#scrollBackUp {
  display: none;
  position: fixed;
  width: 5em;
  height: 5em;
  bottom: 1.25em;
  right: 1.25em;
  z-index: 999;
  border: none;
  outline: none;
  background-color: #141735;
  color: #ffffff;
  border: 0.125em solid #ffffff;
  cursor: pointer;
  padding: 1em;
  border-radius: 0.438em;
  font-size: 1em;
}

#scrollBackUp:hover {
  background-color: #ffffff;
  color: #141735;
  border: 0.125em solid #141735;
  transition: 0.2s;

  svg {
    fill: #141735;
    stroke: #141735;
  }
}

/******************PAGE FORMATION INTRA/INTER***************/

#nos-solutions {
  padding-top: 0;
}

/******************PAGE FORMATION A DISTANCE***************/

#slide {
  position: relative;
}

.slideshow-container {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: 8em;
}

.mySlides {
  display: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.slide-image {
  flex: 1;
  margin: 1em;
  object-fit: cover;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  color: white;
  font-weight: bold;
  font-size: 3.5em;
  transition: 0.6s ease;
  user-select: none;
}

.next {
  right: 12%;
}

.prev {
  left: 12%;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#bouton-decouvert-foad {
  display: flex;
  justify-content: center;
}

#titre-decouvert-foad h2 {
  padding-bottom: 0;
}

#cartesNosAvantages {
  padding-top: 1.7em;
}

#plateforme-interactive video {
  width: 80%;
}

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

/* TOUTES LES PAGES : BOUTON CONTACT (MOBILE) */

#autoContact {
  display: none;
  position: fixed;
  bottom: 1.25em;
  left: 1.25em;
  z-index: 999;
  border: none;
  outline: none;
  background-color: #ff3333;
  color: #ffffff;
  border: 0.125em solid #ffffff;
  cursor: pointer;
  padding: 1em;
  border-radius: 0.438em;
  font-size: 1em;
}

/***************************************BANDEAU COOKIES*******************************************************/
#cookieBanner {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #141735;
  color: white;
  text-align: center;
  z-index: 1000;
}

#cookieBanner button {
  cursor: pointer;
  width: auto;
  padding: 0.2em 0.5em;
  margin-bottom: 1em;
}

#cookieBanner a,
a:active {
  color: white;
  text-decoration: underline;
}

/* popup demander le programme */
.modal {
  display: none;
  /* Hide by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #ffffff;
  margin: 1.5em;
  padding: 2.5em;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: modalAppear 0.3s ease-out;
  overflow-y: auto;
  top: 50%;
  left: 50%;
  /* Customisation de la scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #018382 #f0f0f0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    /*transform: translateY(-20px);*/
  }

  to {
    opacity: 1;
    /*transform: translateY(0);*/
  }
}

.close-modal-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-modal-button:hover,
.close-modal-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#popupFormAsyncResponse.success-message {
  /* Style for success message */
  color: #018382;
  padding: 10px;
  border: 1px solid #018382;
  margin-top: 10px;
  background-color: #e6ffe6;
}

#popupFormAsyncResponse.error-message {
  /* Example error style */
  color: red;
  padding: 10px;
  border: 1px solid red;
  margin-top: 10px;
  background-color: #ffe6e6;
}

/* Ensure your existing .error class for field validation is distinct or compatible */
span.error {
  color: red;
  font-size: 0.9em;
}

/* Form styling within modal */
.modal-content form {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.modal-content .form-group {
  margin-bottom: 1.5em;
  width: 100%;
}

.modal-content .formLigne {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-left: 0;
}

.modal-content #formulaireLigne2 {
  padding-left: 1.8em;
  width: 91%;
}

.modal-content #checkRgpdContact {
  padding-left: 1.8em;
  margin: 1.5em 0 1.5em 0;
}

.modal-content .formEncadre {
  width: 41%;
}

.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content textarea {
  width: calc(100% - 2em);
  padding: 0.8em 1em;
  border: 1px solid #141735;
  border-radius: 10px;
  font-size: 1em;
}

.modal-content input[type="submit"] {
  width: inherit;
  width: 70%;
}

.modal-content #formulaireEnvoi {
  align-items: center;
  width: 100%;
}


/* Styles de scrollbar pour Webkit (Chrome, Safari, etc.) */
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #018382;
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #016e6d;
}


#checkRgpdContact label,
.modal-content p {
  font-size: 0.8em;
  font-family: "poppins", Helvetica, Arial;
}

.choixtype_popup label {
  font-size: 1em;
  font-family: "poppins", Helvetica, Arial;
}

.checkRgpdContact {
  padding: 0.8em;
}

/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/*
/*
/*                                                  R E S P O N S I V E
/* 
/*
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/

@media (min-width: 1440px) {
  #wrapper {
    /* max-width: 1440px; */
    width: 100%;
    margin: 0 auto;
  }

  /* Accroche pour la page d'accueil, image de l'homme avec lunettes */
  section#accroche {
    background: url("img/organisme-formation-accueil.webp") no-repeat;
    background-size: cover;
    background-position-y: -6.25em;
    background-position: right 0%;
    margin: 0;
    padding-bottom: 3%;
  }

  section#accrocheCEFii,
  section#accrocheFormation {
    background-image: url("img/fond-bandeau-cefii.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position-y: -6.25em;
    background-position: right 0%;
    margin: 0;
    padding-bottom: 5%;
    padding-top: 10%;
  }

  section#accrocheCEFiiContact {
    background-image: url("img/fond-bandeau-cefii.svg");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position-y: -23.25em;
    background-position-x: 120%;
    margin: 0;
    padding-bottom: 5%;
    padding-top: 10%;
  }

  p#accroche {
    width: 55%;
  }

  /**********************MAIN PAGE NOS FORMATIONS*******************************/

  .carteFormation {
    width: 36%;
  }

  #boutonsFormations,
  #boutonsModules {
    margin-bottom: 0;
  }
}

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

/* LARGEUR D'ECRAN <= 767 pixels 
petit smartphone et grand smartphone
*/

@media (max-width: 1023px) {
  /***************************************************************/

  /* TOUTES LES PAGES : HEADER, ACCROCHE, BOUTONS ET FOOTER */

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.9em;
    width: 80%;
    padding-left: 10%;
  }

  h3 {
    font-size: 1.275em;
  }

  .cartes_section {
    flex-direction: column;
    align-items: center;
  }

  #autoContact {
    display: block !important;
    padding-right: 0;
  }

  header {
    padding: 1em 0em 1em 0em;
  }

  header,
  footer#footerAccueil {
    width: 100%;
    max-width: 100%;
  }

  nav#menu,
  #menu li,
  #boutons {
    display: none;
  }

  #logo img {
    width: 6em;
  }

  #menu-burger svg {
    width: 3em;
    height: 3em;
  }

  #menu-phone {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 8.25em;
    width: 100%;
    height: calc(100% - 8.25em);
    background-color: #FFC440;
    border-radius: 0em 3em 0em 0em;
  }

  #menu-phone ul {
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
  }

  #menu-phone ul li {
    font-family: "poppinssemibold", Helvetica, Arial;
    list-style: none;
    width: 80%;
    text-align: start;
  }

  #menu-phone a {
    color: #141735;
    font-size: 1.2em;
  }

  #menu-phone a.contact,
  #menu-phone a.inscription {
    color: #ffffff;
    display: flex;
    align-items: center;
  }

  #menu-phone a.contact:hover,
  #menu-phone a.inscription:hover {
    background-color: #ffffff;
    color: #ff3333;
    transition: 0.2s;
  }

  .bouton {
    padding: 1em 1em;
    margin: 0.5em;
    display: flex;
    justify-content: center;
    width: 90%;
  }

  /* modifier espace autour du bouton bandeau accueil
  .boutonPedagogie .bouton .b_rouge {
    margin: 1em 0.5em 1em 0.5em;
  }*/

  /*#accroche p {
    display: none;
  }*/

  #accroche h1 {
    margin-top: 0;
  }

  /*section#accroche {
        padding-bottom: 5em;
    }*/

  #plusdinfos {
    height: fit-content;
  }

  #boutonPlusdinfos {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  #boutonPlusdinfos a {
    width: 55%;
  }

  #liens {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
  }

  #liens hr {
    background-color: #FFC440;
    margin-bottom: 1em;
  }

  #minilogo {
    padding-bottom: 3em;
  }

  #logo-footer {
    padding-bottom: 3em;
  }

  #liens #minilogo img {
    width: fit-content;
  }

  #liens1,
  #liens2,
  #liens3 {
    width: 90%;
    padding-left: 7.5%;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  #liens3 {
    border-bottom: 0.188em solid #FFC440;
    margin-bottom: 2em;
  }

  #liens1 a,
  #liens2 a,
  #liens3 a {
    opacity: 0.7;
  }

  #horaires {
    padding-bottom: 2em;
  }

  #logo-youtube {
    padding-right: 0;
  }

  #infos-officielles {
    width: 80%;
    justify-content: space-between;
  }

  #etreRappele {
    display: flex;
    justify-content: center;
  }

  .affichageTel {
    display: block;
  }

  .pasAffichageTel {
    display: none;
  }

  .barre:before {
    margin: 2em;
  }

  .noPhone {
    display: none;
  }

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

  /* PAGE ACCUEIL */

  #nosFormations {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #titreNosFormations h2 {
    width: 80%;
    padding-left: 10%;
  }

  #cartesNosFormations,
  #cartesNoStress {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #cartesNosSolutions {
    width: auto;
    padding-bottom: 1em;
  }

  #cartesNosFormations h3 {
    /*width: 55%;
    display: flex;*/
    align-items: center;
  }

  .sectionCandidater p {
    text-align: center;
  }

  .texteaccueil {
    width: 80%;
    padding-left: 10%;
    padding-bottom: 1.5em;
    text-align: left;
  }

  /*#cartesNosFormations p {
    text-align: left;
  }*/

  #cybersecurite,
  #ia,
  #developpement,
  #design,
  #web {
    width: 80%;
    height: fit-content;
    margin: 1em 0em 1em 0em;
  }

  #ia,
  #developpement,
  #design,
  #web {
    padding-top: 0;
  }

  /*#cybersecurite h3,
  #ia h3,
  #developpement h3,
  #design h3,
  #web h3 {
    text-align: left;
  }*/

  #boutonNosFormations {
    display: flex;
    justify-content: center;
  }

  .margeContenuSolutions {
    max-width: 100%;
  }

  .gallery {
    display: grid;
    overflow: scroll;
    scroll-snap-type: both mandatory;
    scroll-padding: 1rem;
    padding-left: 10%;
    padding-right: 10%;
    justify-items: center;
  }

  .gallery_4 {
    grid-template-columns: repeat(4, 80vw);
  }

  .gallery_6 {
    grid-template-columns: repeat(6, 80vw);
  }

  .actuel {
    scroll-snap-type: unset;
  }

  #elearning,
  #certifiantes,
  #entreprises,
  #surmesure {
    width: 80%;
    scroll-snap-align: center;
    display: inline-block;
    border-radius: 3px;
  }

  #elearning,
  #certifiantes,
  #entreprises,
  #surmesure,
  #ecole,
  #accompagnement,
  #pedagogie {
    padding-bottom: 2em;
  }

  #elearningHaut,
  #certifiantesHaut,
  #entreprisesHaut,
  #surmesureHaut {
    height: 40vw;
    padding: 1em 0em 1em 0em;
  }

  #elearningBas,
  #certifiantesBas,
  #entreprisesBas,
  #surmesureBas {
    padding: 1em 0em 1em 0em;
  }

  #indicateursCartes {
    display: flex;
    justify-content: space-evenly;
    padding-top: 1em;
  }

  #indicateursCartes svg {
    height: 2em;
    fill: none;
  }

  #indicateursCartes svg.plein {
    fill: #141735;
    /* Couleur lorsque la carte est visible */
  }

  #nostress {
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #ecole,
  #accompagnement,
  #pedagogie {
    width: 80%;
  }

  #boutonNoStress {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .boutonAccueil {
    width: 50%;
  }

  #titreTemoignages {
    display: none;
  }

  #containerReviews {
    transform: translateY(15%);
  }

  #reviews {
    display: none;
  }

  #reviewsAll {
    margin: 0 auto;
  }

  #reviewsAll p:nth-child(1) {
    font-size: 2em;
  }

  #starAll {
    font-size: 2.5em;
  }

  #reviewsAll p:nth-child(3) {
    font-size: 1.1em;
    margin-bottom: 1em;
  }

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

  /* PAGE PRESENTATION CEFII */

  p#accroche {
    margin-bottom: 1.25em;
  }

  section#accrocheCEFii {
    min-height: 0;
  }

  #cartesNosValeurs,
  #jaugesInsertion,
  #titresJaugesInsertion,
  #cartesQuelquesChiffres,
  #cartesNotrePedagogie,
  #teamLigne1,
  #teamLigne2,
  #cartesIntervenants,
  #cartesCertifieQualiopi {
    flex-direction: column;
  }

  #cartesNosValeurs,
  #jaugesInsertion,
  #titresJaugesInsertion {
    align-items: center;
  }

  #humain,
  #passion,
  #innovation {
    width: 80%;
    margin: 1em 0em 1em 0em;
  }

  #jaugesInsertion {
    padding-top: 0;
    text-align: center;
  }

  #tauxDWWM,
  #tauxCDUI,
  #tauxCDA {
    width: 50%;
  }

  .progressBarDWWM,
  .progressBarCDUI,
  .progressBarCDA,
  .progressBarCDACFA,
  .progressBarCDUICFA {
    height: 43vw;
  }

  .sousTitreJauge {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  #textePourcentageReussite p,
  #reussiteEcole,
  #reussiteDistance {
    text-align: center;
  }

  #reussiteEcole,
  #reussiteDistance {
    flex-direction: column;
    align-items: center;
  }

  #jaugeGlobale,
  #jaugeEcole,
  #jaugeDistance {
    display: none;
  }

  #titreIntegrerPedagogie {
    width: 80%;
    margin: 0 auto;
  }

  #cartesTeamCEFii,
  #cartesIntervenants {
    margin: 0 auto;
  }

  figure {
    width: fit-content;
  }

  figcaption {
    display: none;
  }

  .padding_soft {
    padding-bottom: 0.25em;
  }

  .padding_hard {
    padding-bottom: 0.75em;
  }

  #carteChiffresG,
  #carteChiffresD,
  #cartePedagogieG,
  #cartePedagogieD,
  #carteQualiopiG,
  #carteQualiopiD {
    width: 100%;
  }

  #partenaires {
    align-items: center;
    flex-wrap: wrap;
    margin: 2em 0em 2em 0em auto;
  }

  #partenaires img {
    width: 60%;
    height: fit-content;
    padding: 1em;
  }

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

  /* PAGE CONTACT */
  #formulaire {
    width: 80%;
  }

  #nousSommesIci {
    flex-direction: column;
    text-align: center;
  }

  .formLigne,
  #cartesInfosPratiques {
    flex-direction: column;
    width: 80%;
  }

  #cartesInfosPratiques {
    flex-direction: column;
    width: 100%;
  }

  .formLigne {
    padding-left: 0;
    margin: 0 auto;
    width: 90%;
  }

  input[type="text"],
  input[type="tel"],
  input[type="submit"],
  #horairesCEFii,
  #telephone,
  #transports,
  #adresse {
    width: 90%;
  }

  .formEncadre {
    width: 100%;
    padding: 0;
  }

  #formulaireEnvoi {
    width: 90%;
  }

  #formulaireLigne2 {
    width: 90%;
    padding-left: 0em;
    margin: 0 auto;
  }

  #checkRgpdContact {
    padding-left: 0;
    margin: 0 auto;
    width: 90%;
  }

  #form-prog .formLigne {
    padding-left: 0em;
  }

  #form-prog #formulaireLigne2,
  #form-prog #checkRgpdContact {
    padding-left: 0em;
    padding-top: 1em;
  }

  #form-prog #formulaireEnvoi {
    padding-left: 0em;
  }

  #encadreMaps,
  #photocefiiavrille {
    align-items: center;
  }

  #horairesCEFii,
  #telephone,
  #transports,
  #adresse {
    margin: 1em 0em 1em 0em;
  }

  #nousSommesIciDivOne {
    width: 100%;
  }

  iframe {
    width: 75%;
    height: 20em;
  }


  /*******************PAGE CANDIDATER***********************/
  .flexCandidater {
    width: 100%;
    margin: 0 auto;
  }

  .flexCandidater div {
    width: 100%;
  }

  .flexCandidater h2 {
    padding-left: 0;
    width: auto;
  }

  /*.select option {
    font-size: 0.5em;
  }*/
  .flexCandidater .formEncadre {
    width: 100%;
  }

  .sectionCandidater {
    width: 80%;
  }

  .txtItalique {
    padding-left: 0;
  }

  #checkRgpdCandidater {
    padding-left: 0;
  }

  /***************************************************************/
  /* PAGE NOS FORMATIONS */

  #cartesNosAvantages,
  #infosToutesNosFormations {
    flex-direction: column;
    align-items: center;
  }

  #parcours-pedagogique,
  #suivi-accompagnement,
  #experts,
  .carteFormation {
    width: 80%;
  }

  .carteFormation,
  .carteModule {
    margin: 1em 0em 1em 0em;
  }

  .carteFormation h3 {
    width: 100%;
  }

  #parcours-pedagogique,
  #suivi-accompagnement,
  #experts {
    margin: 1em 0em 1em 0em;
  }

  #infosFormationsG,
  #infosFormationsD {
    width: 100%;
  }

  #boutonsFormations {
    row-gap: 2em;
  }

  .domaine-formation {
    width: 11em;
    margin: 0;
  }

  .domaine-formation input:checked+span:active,
  .domaine-formation input:checked+span:not(:active) {
    background-color: #ffffff;
    color: #ff3333;
  }

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

  /* PAGE FORMATION */

  section#accrocheFormation {
    min-height: auto;
    /*padding-top: 22%;*/
    padding-bottom: 5%;
  }

  .typeFormation {
    margin-bottom: 1.25em;
  }

  #cartesInfosFormation,
  #cartesDetailsFormation,
  #ensembleProgramme,
  #boutonsModalites,
  #cartesFinancement {
    flex-direction: column;
  }

  #pre-requis,
  #objectifs,
  #diplome,
  #certificat,
  #debouches,
  #carteDetailsG,
  #carteDetailsD,
  #carteInfosFormationG,
  #carteInfosFormationD,
  #ensembleProgrammeG,
  #ensembleProgrammeD {
    width: 100%;
  }

  #pre-requis,
  #objectifs,
  #diplome,
  #certificat,
  #debouches {
    margin: 1em 0em 1em 0em;
  }

  #cartesDetailsFormation h3,
  #ensembleProgrammeFormation h3 {
    font-size: 1.125em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #carteDetailsG h3,
  #carteDetailsD h3 {
    color: #ffffff;
    background-color: #141735;
    padding: 0.5em 1em 0.5em 1em;
    margin: 1em 0em 1em 0em;
  }

  /*.montrer_programme + .contenu_programme, #jaugeEcoleDWWM, #jaugeDistanceDWWM, #jaugeEcoleCDA, #jaugeDistanceCDA, #jaugeEcoleCDUI, #jaugeDistanceCDUI, #boutonsModalites input {
        display: none;
    }*/


  .svg_visuelpicto {
    display: none;
  }

  .svg_pictofinancement {
    display: none;
  }

  .defilement_programme {
    height: 1.375em;
  }

  .pivot {
    transform: rotate(90deg);
  }

  #ensembleProgramme {
    padding: 0;
  }

  /*#carteDetailsD {
    text-align: center;
  }*/

  /*#carteDetailsD h3:last-of-type {
    justify-content: center;
  }*/

  #pourcentageFormation p {
    color: #ff3333;
  }

  #ensembleProgrammeG h3:first-of-type,
  #ensembleProgrammeD h3:first-of-type {
    margin-top: 0em;
  }

  #modalites p {
    padding: 1em;
  }

  #boutonsModalites label input:not(:checked)+span {
    padding: 1em 0em 1em 0em;
  }

  #boutonsModalites {
    background-color: #018382;
  }

  #boutonsModalites label,
  #boutonsModalites label input:checked+span {
    border-radius: 1.5em;
  }

  #boutonsModalites label {
    margin: 1em 0em 1em 0em;
    background-color: rgb(20, 23, 53, 0.2);
  }

  .content {
    /* background-color: #018382; */
    margin: 1em 0em 1em 0em;
    border-radius: 2em;
  }

  .lienSousProduit {
    /*
        background-color: #FFFFFF;
        color: #018382;
        outline: none;
        */
    border-radius: 1.25em;
  }

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

  /* PAGE CFA / CFA - APPRENANT / CFA - ENTREPRISE */

  #alternanceDev,
  #alternanceDesign,
  #alternanceWeb,
  #infoHandicap a {
    width: 80%;
  }

  #carteDroitsG,
  #carteDroitsD,
  #entreprises-accueil,
  #apprenants,
  #pratiqueCFAG,
  #pratiqueCFAD,
  #boutonEntreprises a,
  #boutonApprenants a,
  #experience-pro,
  #statut-salarie,
  #formation-remun,
  #carteSuiviG,
  #carteSuiviD,
  #pratiqueG,
  #pratiqueD,
  #cartePrendreAltG,
  #cartePrendreAltD,
  #carteContratsG,
  #carteContratsD,
  #carteAidesG,
  #carteAidesD {
    width: 100%;
  }

  #experience-pro,
  #statut-salarie,
  #formation-remun {
    margin: 1em 0em 1em 0em;
  }

  #boutonEntreprises a {
    margin-bottom: 1em;
  }

  #cartesGroupes p,
  #jaugeInsertion2021,
  #jaugeReussite2021 {
    display: none;
  }

  #pratiqueTauxReussite,
  #pratiqueTauxInsertion {
    flex-direction: column;
    align-items: center;
  }

  #cartesPratique {
    padding-bottom: 0;
  }

  #infoHandicap {
    width: 70%;
  }

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

  /* PAGE FORMATIONS COURTES */

  .carteModule,
  #avantageA,
  #avantageB,
  #avantageC,
  #avantageD {
    width: 80%;
  }

  #avantageA,
  #avantageB,
  #avantageC,
  #avantageD {
    margin: 1em 0em 1em 0em;
  }

  .contenuModule>div {
    flex-direction: column;
  }

  #boutonsModulesSelect {
    display: block;
    text-align: center;
  }

  #boutonsModules {
    display: none;
  }

  #boutonsModulesSelect select {
    height: 2.5em;
    padding: 0.5em;
    border: 1px solid #141735;
    border-radius: 0.5em;
    font-size: 1.375em;
  }

  /* PAGE A DISTANCE */
  #plateforme-interactive {
    flex-direction: column;
  }

  #plateforme-interactive ul {
    text-align: left;
  }

  #plateforme-interactive>div {
    width: 100%;
    text-align: center;
  }

  #plateforme-interactive> :nth-child(2) {
    margin: 0 auto;
    padding-top: 1em;
    width: 85%;
  }

  #plateforme-interactive video {
    width: 100%;
  }

  /* PAGE TEMOIGNAGES/AVIS */

  .cartetemoignage {
    width: 70%;
    margin: 1em;
  }

  #avisTemoignages {
    padding: 3em 0em 1em 0em;
  }


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

  /* PAGE MENTIONS LEGALES / POLITIQUE DE CONFIDENTIALITE */

  #mentionsG,
  #mentionsD,
  #accrochePolitique,
  #politiqueG,
  #politiqueD {
    width: 100%;
  }

  #politiqueConfidentialite.barre:before {
    display: none;
  }

  /*******************MODALITES**************************/
  .borderBottom::after {
    bottom: 8px;
  }

  #cookieBanner button {
    margin: 0 auto;
    margin-bottom: 1em;
  }

  .formation-handicap {
    width: 80%;
  }

  /*******************PAGE ERREUR404 **************************/
  #accrocheCEFiiErreur404 {
    background: none;
  }

  /*******************PAGE REFERENCES**************************/
  #logosClients div {
    width: 100%;
    text-align: center;
  }

  /*******************MODALE**************************/
  .modal-content {
    margin: 0;
    padding: 0.5em;
    /*transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);*/
  }

  .modal-content #formulaireLigne2,
  .modal-content #checkRgpdContact,
  .modal-content .formEncadre {
    padding: 0;
    margin: 0;
    width: 100%;
  }
}

/* 430 pixels MAX
petit smartphone
*/

@media (max-width: 432px) {

  /*******************ACCUEIL**************************/
  section#accroche {
    min-height: 17.875em;
  }

  #accroche h1 {
    font-size: 2.5em;
  }

  /*******************ENTREPRISES**************************/
  #boutonsModulesSelect {
    display: block;
  }

  #boutonsModules {
    display: none;
  }

  .margeContenu,
  .margeContenu {
    width: 90%;
  }

  /*******************MODALE**************************/
  .modal-content {
    margin: 0;
    padding: 0.5em;
    /*transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);*/
  }

  .modal-content #formulaireLigne2,
  .modal-content #checkRgpdContact,
  .modal-content .formEncadre {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .modal-content #checkRgpdContact {
    padding-left: 0.5em;
    margin: 1em 0 1em 0;
  }

  .checkRgpdContact {
    padding: 0.5em;
  }

  #modalFormContainer label {
    font-size: 0.8em;
    margin-bottom: 0.2em;
  }
}

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

/* <371 pixels très petite résolution smartphone
*/

@media (max-width: 371px) {

  .modal-content input[type="submit"] {
    width: inherit;
  }

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


}

/* 481 pixels < LARGEUR D'ECRAN <= 767 pixels 
petit smartphone paysage
*/

/*@media (min-width: 481px) and (max-width: 767px) {
    header {
        padding: 1em 0em 1em 0em;
    }

    header, footer#footerAccueil {
        width: 100%;
        max-width: 100%;
    }

    nav#menu, #menu li, #boutons {
        display: none;
    }

    #menu-burger svg {
        width: 3em;
        height: 3em;
    }

    #menu-phone {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 9.25em;
        width: 100%;
        height: calc(100% - 9.25em);
        background-color: #FFC440;
        border-radius: 0em 3em 0em 0em;
    }

    #menu-phone ul {
        text-align: start;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
    }
    
    #menu-phone ul li {
        font-family: 'poppinssemibold', Helvetica, Arial;
        list-style: none;
        width: 80%;
        text-align: start;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #menu-phone a {
        color: #141735;
        font-size: 1.5em;
    }

    #menu-phone a.contact, #menu-phone a.inscription {
        color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    #menu-phone a.contact:hover, #menu-phone a.inscription:hover {
        background-color: #ffffff;
        color: #FF3333;
        transition: 0.2s;
    }

    .bouton {
        padding: 0.938em 1em;
        display: flex;
        justify-content: center;
        width: fit-content;
    }

    #partenaires {
        flex-wrap: wrap;
        row-gap: 3em;
        justify-content: space-evenly;
    }
}*/

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

/* 768 pixels < LARGEUR D'ECRAN <= 1023 pixels 
Tablette et grand smartphone
*/

@media (min-width: 768px) and (max-width: 1023px) {}

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

/* 1024 pixels < LARGEUR D'ECRAN <= 1399 pixels 
Petit ordinateur et tablette en paysage
*/

@media (min-width: 1024px) and (max-width: 1439px) {

  /**********************HEADER*******************************/
  /*marge du header et footer*/
  .margeHF {
    max-width: 97%;
  }

  nav#menu,
  #menu li,
  #boutons {
    display: none;
  }

  /*#logo img {
    width: 6em;
  }*/

  #menu-burger svg {
    width: 3em;
    height: 3em;
  }

  #menu-phone {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 8.25em;
    width: 100%;
    height: calc(100% - 8.25em);
    background-color: #FFC440;
    border-radius: 0em 3em 0em 0em;
  }

  #menu-phone ul {
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
  }

  #menu-phone ul li {
    font-family: "poppinssemibold", Helvetica, Arial;
    list-style: none;
    width: 80%;
    text-align: start;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  #menu-phone a {
    color: #141735;
    font-size: 1.5em;
  }

  #menu-phone a.contact,
  #menu-phone a.inscription {
    color: #ffffff;
    display: flex;
    align-items: center;
  }

  #menu-phone a.contact:hover,
  #menu-phone a.inscription:hover {
    background-color: #ffffff;
    color: #ff3333;
    transition: 0.2s;
  }


  /*nav#menu ul li a {
    font-size: 1.1em;
  }

  nav#menu {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }*/

  /*positionnement des boutons rouges du header*/
  /*#boutons {
    width: 100%;
    align-items: start;
    justify-content: flex-end;
    padding-right: 0.3em;
  }

  #boutons a {
    width: 30%;
  }*/

  .contact {
    margin-bottom: 0.5em;
  }

  .contact svg,
  .inscription svg {
    padding-right: 0.5em;
  }

  /**********************MAIN PAGE ACCUEIL*******************************/

  .margeContenu,
  .margeContenuSolutions {
    width: 90%;
    padding-top: 2.5em;
  }

  #accroche {
    padding-bottom: 5%;
  }

  .cartes_section {
    flex-wrap: wrap;
  }

  #cartesNosFormations div {
    width: 30%;
  }

  #cartesNosFormations :nth-child(4) {
    margin-left: 10%;
  }

  #cartesNosFormations :nth-child(5) {
    margin-right: 10%;
  }

  #cartesNosSolutions p {
    font-size: 1em;
  }

  #containerReviews {
    width: 90%;
  }

  #starAll {
    font-size: 1.2em;
  }

  /**********************MAIN PAGE PRESENTATION*******************************/

  .accrochePresentationCefii h1 {
    margin-top: 0em;
  }

  .progressBarDWWM,
  .progressBarCDUI,
  .progressBarCDA,
  .progressBarCDACFA,
  .progressBarCDUICFA {
    height: 8.938vw;
  }

  /* selecteur présent sur plusieurs pages*/
  #titresJaugesInsertion {
    padding-bottom: 1.5em;
    width: 100%;
  }

  /**********************MAIN PAGE NOS FORMATIONS*******************************/

  .carteFormation {
    width: 36%;
  }

  #boutonsFormations,
  #boutonsModules {
    margin-bottom: 0;
  }

  /**********************MAIN PAGE CFA*******************************/
  #boutonEntreprises a,
  #boutonApprenants a {
    width: auto;
  }

  /**********************MAIN PAGE ENTREPRISES*******************************/
  .carteModule {
    width: 35%;
  }

  /************************MAIN PAGE CONTACT*****************************/
  .formLigne {
    width: 80%;
    padding-left: 1.7em;
  }

  #formulaireLigne2 {
    width: 61%;
    padding-left: 3.6em;
  }

  #formulaireEnvoi {
    width: 67%;
  }

  #encadreMaps {
    align-items: center;
  }

  #cartesInfosPratiques {
    width: 40%;
    align-items: center;
  }

  /**********************MAIN PAGE CANDIDATER*******************************/
  .flexCandidater .formEncadre {
    width: 89%;
  }

  /**********************PAGE ERREUR 404*******************************/
  #accrocheCEFiiErreur404 #accroche {
    width: 50%;
  }

  /**********************FOOTER*******************************/

  #minilogo {
    width: 20%;
  }

  #liens :nth-child(4) {
    display: none;
  }

  #contact {
    width: 20%;
  }

  #etreRappele {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding-top: 0.5em;
  }

  .boutonRappel {
    font-size: 1em;
  }

  .marge-droite {
    padding-right: 1.5em;
  }

  #pictosRS :nth-child(3) {
    padding-right: 0;
  }

  #plateforme-interactive {
    flex-direction: column;
  }

  #plateforme-interactive>div {
    text-align: center;
  }

  #plateforme-interactive> :nth-child(2) {
    margin: 0 auto;
    padding-top: 1em;
  }

  /*******************MODALE**************************/
  .modal-content {
    margin: 0;
    padding: 0.5em;
    /*transform: translate(25%, 0%);
    -webkit-transform: translate(25%, 0%);
    -moz-transform: translate(25%, 0%);
    -ms-transform: translate(25%, 0%);
    -o-transform: translate(25%, 0%);*/
  }
}

/* 1440 pixels < LARGEUR D'ECRAN <= 1700 pixels */

@media (min-width: 1440px) and (max-width: 1700px) {
  section#accroche {
    background: url("img/organisme-formation-accueil.webp") no-repeat;
    background-size: cover;
    /*background-position-y: -6.25em;*/
    background-position: 80%;
    margin: 0;
    padding-bottom: 5%;
  }

  section#accrocheCEFii,
  section#accrocheFormation {
    background-image: url("img/fond-bandeau-cefii.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 100%;
    margin: 0;
    padding-bottom: 5%;
    padding-top: 10%;
  }

  nav#menu {
    width: 50%;
  }

  #menu-burger {
    position: absolute;
  }

  #boutons {
    width: 30%;
  }

  #partenaires {
    flex-wrap: wrap;
    row-gap: 3em;
    justify-content: space-evenly;
  }

  .margeContenu,
  .margeContenuSolutions {
    width: 85%;
  }

  #containerReviews {
    width: 85%;
  }

  #starAll {
    font-size: 1.2em;
  }

  #contact {
    width: 19%;
  }

  #miniLogo {
    width: 14%;
  }

  #pictosRS a {
    padding: 0;
  }

  .progressBarDWWM,
  .progressBarCDUI,
  .progressBarCDA,
  .progressBarCDACFA,
  .progressBarCDUICFA {
    height: 6.938vw;
  }

  section#accrocheCEFiiContact {
    background-position: 160%;
  }

  /************************PAGE CONTACT*****************************/
  .formLigne {
    padding-left: 6em;
  }

  #formulaireLigne2 {
    padding-left: 8em;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {

  /* Accroche pour la page d'accueil, image de l'homme avec lunettes */
  section#accroche {
    background: url("img/organisme-formation-accueil.webp") no-repeat;
    background-size: cover;
    /*background-position-y: -6.25em;*/
    background-position: 80%;
    margin: 0;
    padding-bottom: 5%;
  }

  section#accrocheCEFii,
  section#accrocheFormation {
    background-image: url("img/fond-bandeau-cefii.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 100%;
    margin: 0;
    padding-bottom: 5%;
    padding-top: 10%;
  }

  section#accrocheCEFiiContact {
    background-image: url("img/fond-bandeau-cefii.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 210%;
    margin: 0;
    padding-bottom: 5%;
    padding-top: 10%;
  }

  #accroche {
    padding: 0;
  }

  p#accroche {
    width: 50%;
    font-size: 1.2em;
    line-height: 1.5em;
  }

  #fil-ariane {
    padding-bottom: 1em;
    padding-top: 1.5em;
  }

  /************************PAGE CONTACT*****************************/
  .formLigne {
    padding-left: 2.5em;
  }

  #formulaireLigne2 {
    padding-left: 4.5em;
  }
}

/**********/
/*JPO 2025*/
.jpo {
  width: 30%;
  color: #1D8382;
  font-size: 1.8em;
  margin-bottom: 0.3em;
}