/*
Theme Name: mfr2026
Author: Christophe PLUMEL (FR MFR Centre IDF)
Version: 1.0
*/

h1 {
  font-family: "Bowlby One", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

h2 {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  text-transform: uppercase;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 1em !important;
}

hr {
  width: 100% !important;
  border: none !important;
  height: 4px !important;
  margin: none !important;
  margin-block-start: 10px !important;
  background-color: #ceab5d;
}

/* TABLE *******************/

.table {
  display: table !important;   
  height: 100%;
  width: 100%; 
  text-align: center;
}

.table-cell {
  display: table-cell;   
  position: relative;
  height: 50%;
  width: 100%; 
  vertical-align: middle;
}

.cell {
	display: table-cell;
	padding-left: 5px;
	padding-right: 5px;
}

.row {
	display: table-row;
}

.center {
  text-align: center !important;
}

/* HEADER ******************/

.header {
  width: 100%;  
  background-size: cover;
  background-position: center;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}

.header-no-image {
  width: 100%;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}

.header-brand .wp-block-site-logo img {
  height: 100px;
  width: auto;
}

/* overlay sombre */
/*
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 0;
}
  */

/* contenu au-dessus de l'overlay */
.header > * {
  position: relative;
  z-index: 1;
}



.wp-block-cover {
  position: relative;
}

.wp-block-cover__inner-container:has(.banniere-nom-mfr-group) {
  position: unset !important;
}

.wp-block-cover .banniere-logo-desktop {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  margin: 0;
}

.wp-block-cover .banniere-nom-mfr-group {
  z-index: 10;
}

.wp-block-cover .banniere-nom-mfr-group a {
  color: unset;
  text-decoration: unset;
}

.wp-block-cover .banniere-nom-mfr {
  font-family: "Bowlby One", sans-serif;
  font-weight: 600;
  font-size: 3em !important;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px #000000;
  line-height: 1.2;
}

.wp-block-cover .banniere-sous-titre {
  font-size: 1.4em !important;
}


/* CORE BLOCKS **********************/

.group-fullwidth {
  width: 100% !important;
  max-width: 100% !important;
}

.main-content-wrapper,
.accueil-groupe-bienvenue,
.accueil-groupe-pedagogie,
.groupe-formation-resultats  {
  width: 60% !important;
  max-width: 60% !important;
  margin: 0 auto;
}

.accueil-groupe-qualiopi {
  width: 100% !important;
  max-width: 100% !important;
}

.accueil-groupe-qualiopi-content {
  width: 80% !important;
  max-width: 80% !important;
}

.accueil-groupe-qualiopi-button-colonne-1 {

}

.accueil-groupe-qualiopi-button-colonne-2 {

}

.accueil-groupe-qualiopi-button-wrapper {

}

.accueil-groupe-qualiopi-button {

}

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

.footer {
  background: #000;
  color: #fff;
  padding: 20px 0;
}

.footer .footer-columns-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  gap: 40px;
}


.footer-column {

}
  
.footer-column-left {

}

.footer-column-right {

}

.footer h4 {
  color: #fff;
}

.footer-contact-adresse,
.footer-contact-cp,
.footer-contact-ville,
.footer-contact-telephone,
.footer-contact-email {
  font-family: 'Roboto', sans-serif;
  color:white !important;
  text-decoration: none !important;
  vertical-align: middle;
}

/*
.footer p,
.footer li,
.footer a {
  color: #ccc;
  font-size: 14px;
}

.footer a:hover {
  color: #fff;
}
*/

.icone-contact-wrapper {
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.icone-contact-element {

}

.icone-contact-element p{
  flex-basis: unset;
}

.icone-contact {
  text-align: right;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  min-width: 32px !important;
}

.icone-contact-link a {
  text-decoration: none;
  color: white;
  transition: color 0.2s;
}

.icone-contact-link a:hover {
  text-decoration: underline;
  color: #ceab5d;
}

/* PAGE **************************/

.header-wrapper,
.footer-wrapper {
  width: 100%;
}

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

.site-content {
  width: 60vw;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ACCUEIL **************************/

.accueil-titre-accroche {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.9em;
}

.accueil-groupe-bienvenue-titre {

}

.accueil-groupe-bienvenue-texte  {

}

.accueil-groupe-qualiopi-titre {

}

.accueil-groupe-qualiopi-texte {

}

/* PAGE FORMATION *******************/

.sur-titre {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  color: #ceab5d;
  text-align: center;
  font-weight: 800;
}

.sous-titre {
  color: #5C5C5C;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  margin-top: 0;  
}

.sur-titre p {
  font-size: 1.3em !important;
  margin: 0;
}

.sous-titre p {
  font-size: 1em !important;
  margin: 0;
}

.titre-post-title {
  margin-top: 0 !important;
}

.formation-presentation-groupe {

}

.formation-presentation-image {
  width: 35vw;
  height: auto;
}

.formation-presentation-image2 {
  width: 100%;
  height: auto;
}

.formation-presentation-texte {

}

.accordeon-formation {
  width: 100%;
  /*background-color: #ceab5d;*/
  color: #1C1C1C;
  padding: 10px;
}

.cpt-formation-file-wrapper {
  background-color: #ceab5d;
  padding: 10px;
  border-radius: 5px;
  color: #1C1C1C;
  text-align: center;
}

.cpt-formation-file-wrapper a {
  color: #1C1C1C;
  text-decoration: none;
}

.cpt-formation-file-wrapper a span {
  vertical-align: middle;
}

/* MENU *****************************/

.navigation-wrapper {
  background-color: #1C1C1C !important;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0 !important;
}

.wp-block-navigation .wp-block-navigation-submenu {  
  background-color: #1C1C1C !important;
}
/*
.wp-block-navigation .wp-block-navigation__submenu-container {
  top: 110% !important; 
  transition: all 0.2s ease-in-out; 
}*/

.wp-block-navigation .wp-block-navigation__submenu-icon {
  color: white !important;
}

/* navigation globale */
.wp-block-navigation {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;  
  text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* liens */
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content {
  color: white !important;
  transition: color 0.2s ease;
}

/* hover */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content:hover {
  color: #ceab5d !important;
}

/* layout */
.wp-block-navigation__container {
  display: flex;
  align-items: center;
}

/* séparateurs */
.wp-block-navigation .wp-block-navigation-item:not(:last-child)::after {
  content: "|";
  margin: 0 14px;
  color: white;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item::after {
  content: none;
}

/* ICONES RESEAUX SOCIAUX **********/
/* Force la couleur de la silhouette de l'icône par défaut */
.wp-block-social-links .wp-block-social-link a {
    color: inherit !important; /* Force l'icône à utiliser la couleur parente choisie dans Gutenberg */
}

/* Si tu as choisi le style "Logo uniquement" ou des couleurs personnalisées */
.wp-block-social-links.has-custom-icon-color .wp-block-social-link a {
    color: var(--wp--custom--color) !important; /* Fallback pour les anciennes versions */
}

/* Sécurité globale pour s'assurer que le SVG obéit à la couleur du texte */
.wp-block-social-links .wp-block-social-link svg {
    fill: currentcolor !important;
}

/* FORMATIONS (LISTE/CAROUSEL) *******************************/

.slider-formations-wrapper,
.slider-images-formation-wrapper {
  text-align: center;
  position: relative;
}

.slider-formations-wrapper .slider-formations,
.slider-images-formation-wrapper .slider-images-formation {
  display: inline-block;
}

.slider-formation-contenu .splide__slide {
  padding: 20px;
  overflow-y: auto;
}

.slider-formations .splide__slide,
.slider-images-formation  .splide__slide {
  visibility: visible !important;
  position: relative;
}

.liste-formations {
  text-align: center;
}

.liste-formations .formation-image,
.slider-formations .formation-image,
.slider-images-formation .image-formation {
  width: 25vw;
  height: auto;
  vertical-align: bottom;
}

.slider-images-formation .image-formation {
  width: 15vw;
}

.liste-formations .formation-element,
.slider-formations .formation-element,
.slider-images-formation .image-formation-element {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 25vw;
  vertical-align: top;
  text-align: center;
}

.slider-images-formation .image-formation-element {
  position: relative;
  width: 15vw;
}

.image-formation-element .image-texte-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.image-formation-element .image-texte-wrapper .image-texte {
  padding: 10px;
  background-color: #1C1C1C;
  color: white;
}

.liste-formations .formation-texte,
.slider-formations .formation-texte {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #1c1c1c;
  text-align: center;
  padding: 20px;
  z-index: 20;
}

.liste-formations .formation-texte .formation-nom,
.slider-formations .formation-texte .formation-nom {
  display: block;
  color: #ceab5d;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  text-align: right;
  font-weight: 600;
}

.liste-formations .formation-texte .formation-nom {
  font-size: 1em;
}

.liste-formations .formation-texte .formation-filiere,
.slider-formations .formation-texte .formation-filiere {
  display: block;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.liste-formations .formation-texte .formation-descr,
.slider-formations .formation-texte .formation-descr {
  display: block;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.liste-formations .formation-link,
.slider-formations .formation-link {
  display: block;
}

/* CUSTOM BLOCKS *************************/

/* MEDIA-TEXT */

.wp-block-media-text>.wp-block-media-text__content h2 {
  text-align: unset;
}

.media-texte-group {
  width: 60vw;
  max-width: 60vw;
  margin: 0 auto;
  margin-bottom: 70px;
  margin-top: 30px;
}

.media-texte-wrapper {

}

.media-texte-image {

}

.media-texte-title {
  margin-top: 0;
  margin-bottom: 0 !important;
}

.media-texte-separator {
  margin-top: 5px !important;
  margin-bottom: 20px !important;
}

.media-texte-text {

}

.media-texte-text p {

}

/* Banniere-texte */

.banniere-texte-group {
  width: 60vw;
  max-width: 60vw;
  margin: 0 auto;
}

.banniere-fullwidth-texte-group {

}

.banniere-texte-wrapper {
  max-width: unset;
}

.banniere-fullwidth-texte-wrapper {
  width: 60% !important;
  max-width: 60% !important; 
  padding: 30px !important;
  margin: 0 auto !important;
  background-color: rgba(28, 28, 28, 0.8);
  background-color: #1c1c1ccc;
  
}

.banniere-texte-title,
.banniere-fullwidth-texte-title {
  color : #ceab5d;
  font-size: 1.8em !important;
}

.banniere-texte-text,
.banniere-fullwidth-texte-text {

}

.banniere-texte-text p,
.banniere-fullwidth-texte-text p {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  text-shadow: 2px 2px 2px #000000;
  font-size: 1.6em;
}

/* Block titre et texte (séparateur) */
.block-titre-texte-group {
  width: 60vw;
  max-width: 60vw;
  margin: 0 auto;
}

.block-titre-texte-wrapper {
  
}

.block-titre-texte-title {
  width: 100%;
  max-width: 100%;
}

.block-titre-texte-separator {
  width: 100%;
  max-width: 100%;
}

.block-titre-texte-text {
  width: 100%;
  max-width: 100%;
}

.block-titre-texte-text p {
  
}

/* BLOCK BG-COLOR */

.block-bg-black,
.block-fullwidth-bg-black {
  background-color: #1C1C1C !important;
}

.block-bg-gold,
.block-fullwidth-bg-gold {
  background-color: #ceab5d !important;
}

.block-bg-color-group {
  width: 60vw;
  max-width: 60vw;
  margin: 0 auto;
}

.block-fullwidth-bg-color-group {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px;  
}

.block-fullwidth-bg-color-wrapper {

}

.block-bg-color-wrapper {
  
}

.block-bg-black .block-bg-color-title,
.block-fullwidth-bg-black .block-fullwidth-bg-color-title {
  color: #CEAB5D !important;
}

.block-bg-gold .block-bg-color-title,
.block-fullwidth-bg-gold .block-fullwidth-bg-color-title {
  color: white !important;
  text-shadow: 1px 1px 1px #000000;
}

.block-bg-black .block-bg-color-text p,
.block-fullwidth-bg-black .block-fullwidth-bg-color-text p {
  color: white !important;
}

.block-bg-gold .block-bg-color-text p,
.block-fullwidth-bg-black .block-fullwidth-bg-color-text p {
  color: #1C1C1C !important;
}

@media (max-width: 768px) {

  p {
    font-size: 1.2em !important;
  }

  /* MENU FULLPAGE ********************/

  /* 1er niveau : Liens principaux */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
    color: #ceab5d !important;
    /*font-size: 22px !important;*/
    font-size: 1.2em !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
    /*margin-bottom: 10px !important;*/
  }

  /* 2e niveau : Liens des sous-menus */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
    color: white !important;
    /*font-size: 16px !important;*/
    text-transform: none !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    padding: 0 !important;
    text-align: center;
  }

  /* 1. Espacement entre chaque bloc de niveau 1 (item + son sous-menu) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    margin-bottom: 0px !important;    /* Espace sous chaque lien principal */
  }

  /* Espacement vertical entre les liens du sous-menu (niveau 2) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin-bottom: 8px !important;     /* Espace entre chaque sous-lien */
  }

  /* 2. Espace entre le lien principal et le début de son sous-menu */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  /* CORE BLOCKS **********************/

  .main-content-wrapper,
  .accueil-groupe-bienvenue,
  .accueil-groupe-qualiopi-texte,
  .accueil-groupe-pedagogie,
  .accueil-groupe-qualiopi,
  .wp-block-media-text.is-stacked-on-mobile  {
    width: 90% !important;
    max-width: 90% !important;
  }
/*
  .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }*/

  .groupe-formation-resultats  {
    width: 95% !important;
    max-width: 95% !important;
  }

  .accueil-groupe-qualiopi-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .accueil-titre-group {
    padding: 0 !important;
  }

  .cpt-formation-image {
    display: block;
  }

  .wp-block-media-text>.wp-block-media-text__content {
    padding: unset !important;
  }
  
  /* Taille des titres H2 */
  /*
  .wp-block-group h2.wp-block-heading {
    font-size: 2rem !important;
  }*/

  /* caroussel */
  .kb-gallery-type-carousel .kb-slide-item img {
    object-fit: cover;
    height: 200px; /* ou ce qui te convient */
    width: 100%;
  }

  /* Réduit les marges définies dans le bloc (xxl / xl) */
  .kb-gallery-type-carousel {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /*
  .intro-flex { flex-direction: column !important; }
  .intro-flex p { width: 100% !important; }
  .bloc-carousel img { height: 180px; object-fit: cover; }
  */

  /* Conteneur plein écran quand le menu est ouvert */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #1C1C1C; /* ta couleur de fond */
    color: #ffffff;            /* couleur du texte par défaut */
  }

  /* Les liens du menu */
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation-item__content {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #ceab5d !important;
  }

  .wp-block-navigation__responsive-container {
    background-color: #1C1C1C !important;
  }

  .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
    background-color: blue;
  }

  .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    fill: white;
  }

  .wp-block-navigation .wp-block-navigation-item:not(:last-child)::after {
    content: none;
  }

  /* HEADER **************************/

  .wp-block-cover .banniere-nom-mfr {
  
  }

  .wp-block-cover .banniere-sous-titre {
    font-size: 1.2em !important;
  }

 
  /* ACCUEIL **************************/
  
  .accueil-groupe-bienvenue-titre {

  }

  .accueil-groupe-bienvenue-texte  {
    text-align:justify !important;
  }


  .accueil-groupe-qualiopi-text-group {
    flex-direction: row;
  }

  .accueil-groupe-qualiopi-titre {
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  .accueil-groupe-qualiopi-texte {
    text-align:justify !important;
  }

  /* FORMATION **********************/
  
  .sur-titre p {
    font-size: 1.6em !important;
  }

  .sous-titre p {
    font-size: 1.2em !important;
  }

  .formation-presentation-groupe {

  }

  .formation-presentation-image {
    width: 90vw;
  }

  .formation-presentation-texte {

  }

  /* FAQ *************************/
  .faq-item {
    padding: 0;
  }

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

  .footer-columns-wrapper {
    padding: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 60px !important;
  }

  .footer-column {

  }
  
  .footer-column-left {

  }

  .footer-column-right {

  }

  .contact-wrapper {
    width: 90vw !important;
  }

  .icone-contact-element {
    width: 100% !important;
  }

  .icone-contact-element p{
    flex-basis: unset;
  }  

  /* SPLIDE CAROUSEL ***************************/

  .splide__arrow {
    width: 4em !important;
    height: 4em !important;
  }

  .splide__arrow svg {
    fill: #000;
    height: 2em !important;
    width: 2em !important;
  }

  .splide__arrow--next {
    right: 1em !important;
  }

  .splide__arrow--prev {
    left: 1em !important;
  }

  .slider-formations .formation-element,
  .slider-images-formation .image-formation-element {
    margin-left: 0px;
    margin-right: 0px;
    width: 90vw;
  }

  .slider-formations .formation-image,
  .slider-images-formation .image-formation {
    width: 100%;
  }

  .liste-formations .formation-texte, 
  .slider-formations .formation-texte {
    top: 0;
    transform: unset;
  }

  /* CUSTOM BLOCKS *************************/

  /* MEDIA-TEXT */

  .media-texte-group {
    width: 90vw !important;
    max-width: 90vw !important;
    margin-bottom: 50px !important;
  }

  .media-texte-wrapper {

  }

  .media-texte-wrapper img {
    margin-bottom: 0 !important;
  }

  .media-texte-image {

  }

  .media-texte-wrapper h2,
  .media-texte-title {  
    margin-top: 10px !important;
    text-align: left;
  }

  .media-texte-separator {

  } 

  .media-texte-text p {
    text-align: justify;
  }

  /* Banniere-texte */

  .banniere-texte-group,
  .banniere-fullwidth-texte-wrapper {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 0 auto;
  }

  .banniere-texte-wrapper {

  }
 

  .banniere-texte-text {

  }

  .banniere-texte-text p {
    font-size: 1.2em !important;
  }

  /* Block titre et texte (séparateur) */
  .block-titre-texte-group {
    width: 90vw !important;
    max-width: 90vw !important;
  }

  .block-titre-texte-wrapper {
  
  }

  .block-titre-texte-title {
  
  }

  .block-titre-texte-separator {
  
  }

  .block-titre-texte-text {
    width: 100%;
    max-width: 100%;
  }

  .block-titre-texte-text p {
    text-align: justify;
  }

  /* BLOCK BG-COLOR */

  .block-bg-color-group {
    width: 90vw !important;
    max-width: 90vw !important;
  }

  .block-bg-color-wrapper {
    display: block !important;
  }

  .block-bg-color-wrapper h2,
  .block-bg-color-title {
    font-size: 1.6em !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }

  .block-bg-color-text p {
    width: 100% !important;
    max-width: 100% !important;
    text-align: justify;
  }
}