/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Lenny Copau
Version: 1.0
Description: Thème enfant basé sur Hello Elementor, avec shortcode menu dynamique.
*/

@import url("css/sous-rubriques.css");
@import url("css/pages-missions.css");

header{
  font-family: 'Helvetica Neue', sans-serif;
}

h1{
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 3rem */

  margin-top : 1rem;
  margin-bottom: 2rem;

}

h2{
  width: fit-content;
  background: #C3D8FF;

  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 1.8rem */
  padding: 0.5rem;


  margin-top : 0.5rem;
  margin-bottom: 1rem;
}

h3{
  color: #3A7CF4;
  leading-trim: both;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%; /* 1.5625rem */

  margin-top : 0.5rem;
  margin-bottom: 1rem;
}

h3::before{
  content : "-";
  color: #3A7CF4;
  margin-right: 0.5rem;
}

h4{
  color: #1D1D1B;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 125%; /* 1.5625rem */
}

h5{
  color: #1D1D1B;
  leading-trim: both;
  text-edge: cap;
  font-family: "Helvetica Neue";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%; /* 1.5625rem */
  margin-top : 0.5rem;
  margin-bottom: 1rem;
}

p{
  margin : 1rem 0;
  line-height: 110%;
  font-weight: 400;
}

a{
  text-decoration: none;
  color : #3A7CF4;
}

a:hover{
  color : #2654A9;
}


/* ===== NAVIGATION DESKTOP ===== */
.menu-description {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 3.25rem;
  padding: 0;
  list-style: none;
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;

}

/* ÉLÉMENTS DE PREMIER NIVEAU */
.menu-description > .menu-item-depth-0 > a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  text-wrap: nowrap;
}

.menu-description > .menu-item-depth-0 > a:hover{
  color : #3A7CF4;
}

/* ===== SOUS-MENU DESKTOP ===== */
.sub-menu {
  display: inline-flex;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background-color: white;
  list-style: none;
  margin: 0;
}

/* LIENS DE SOUS-MENU */
.sub-menu > li > a {
  color: #3A7CF4;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
}

.sub-menu > li{
  transition: transform ease-out 200ms;
}

.sub-menu > li:hover{
  transform:translateX(5px);
}

.menu-item.menu-item-depth-1{
  margin-top: 0.5rem;
  margin-bottom : 0.5rem;
}

/* DESCRIPTIONS DYNAMIQUES */
.sub-menu > li > a small {
  color: #303031;  
  font-weight: 400;
  font-size: 0.875rem;
  display: block;
}

/* Cacher les sous-menus par défaut */

.menu-item .sub-menu {
  display: none;
}

.menu-item.open .sub-menu {
  display: block;
}

.menu-description .sub-menu {
  position: absolute;
  background-color: #FFFAF5;
  z-index: 10;
  padding: 1.5rem;
  min-width: 250px;
  max-width: 300px;
  top: 180%;
  left: 0;

  
}

/* Positionnement du parent */
.menu-description > .menu-item-depth-0 {
  position: relative;
}

/* FLÈCHE à droite du parent */
.menu-item-has-children > a::after {
  content: "▼";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  font-size: 0.75rem;
}

/* Quand ouvert : faire pivoter la flèche */
.menu-item.menu-item-depth-0.open > a::after {
  transform: rotate(180deg);
}

/* Cacher le sous-menu quand il y a pas .closed sur le parent */
.menu-item.menu-item-depth-0.closed .sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Afficher le sous-menu quand .open est sur le parent */
.menu-item.menu-item-depth-0.open .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}



/* ===== NAVIGATION BURGER MOBILE ===== */

.mobile-nav-bar{
  display: flex;
  flex-direction: row;
  width : 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #FFF;
  padding: 0 1.5rem;  
}

.mobile-nav-bar img{
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex-shrink: 0;
}

.mobile-nav-bar button#burger-button{
  background: none;
  color : #3A7CF4;
  border : none;
  font-size: 2rem;
}

.mobile-submenu-title {
  font-weight: bold;
  cursor: pointer;
}

.mobile-menu.open{
  display: block;
}

.mobile-menu.closed{
  display: none;
}

.mobile-menu{
  display: flex;
  padding: 2rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2.125rem;
  background: #FFF3D0;
  width : 100%
}

.mobile-menu button, .mobile-menu-list li{
  background: none;
  color : #000;
  padding : 0;
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

.mobile-menu button{
  display: flex;
  flex-direction: row;
}

.mobile-menu button:hover{
  background: none;
}

.mobile-menu button:after{
  content: "▼";
  display: inline-block;
  margin-left: 0.5rem;
  transition: 200ms ease;
}

.mobile-menu button[aria-expanded="true"]:after{
  transform: rotate(180deg);
}

.mobile-menu li{
  list-style: none;
  padding: 0;
  margin : 0;
}



.mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin : 1rem 0rem;
}

ul.mobile-menu-list{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding : 0;
  margin : 0;
}

ul.mobile-menu-list > li > a{
  color : #000;
}

.mobile-submenu.hidden {
  display: none;
}

.mobile-submenu-toggle {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.mobile-submenu li{
  display: flex;
  flex-direction: row;
  color : #3A7CF4 ; 
}

.mobile-submenu li:before{
  content: "→";
  margin-right : 1rem;
}

.extra-menu-mobile, .extra-menu-mobile ul, .extra-menu-mobile .liens-réseaux-mobile {
  display: flex;
  flex-direction: row;
  gap : 1rem;
  justify-content: space-between;
  align-items: center;
  margin : 0;
  padding : 0;
}

.extra-menu-mobile{
  margin-top : 2rem;
}

.extra-menu-mobile ul{
  width : 100%;
  justify-content: left;
  gap : 1rem;
}

.extra-menu-mobile .liens-réseaux-mobile{
  width : 10rem;
  justify-content: right;
}

.extra-menu-mobile .liens-réseaux-mobile img{
  min-height: 24px;
  min-width: 24px;
}

.extra-menu-mobile ul li a{
  color: #5C5C59;
  text-align: center;
  font-family: "Helvetica Neue";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 1rem */
}

/* SECTION FAQ */


.section-faq{
  display: flex;
  flex-direction: column;
  gap : 2rem;
  width : 100%;
}

.container-faq .question{
  display: flex;
  flex-direction: row;
  background-color: #FFF1C9;
  justify-content: space-between;
  align-items: center;
  width : 100%;

  padding: 3rem 5rem;

  font-size: 1.25rem;

  cursor : pointer;
}

.container-faq .question .croix, .container-faq .question{
  margin : 0;
}

.container-faq .question .croix{
  color : #3A7CF4;
  transition : 200ms ease;
}

.container-faq.open .question .croix {
  transform : rotate(135deg);
}

.container-faq.open .reponse {
  display: block;
  display: flex;
  flex-direction: column;
  background-color: #FFFCF2;
  padding: 4rem 5rem;
}

.container-faq.closed .reponse {
  display: none;
}



.container-faq .reponse a{
  color : #2556AE;
  width : fit-content;
}

/* BOUTONS */


/* CLAIR (info) */
.elementor-element.elementor-button-info .elementor-button {
  background-color: #FFFAF5E5;
  color : #2556AE;
}
.elementor-element.elementor-button-info .elementor-button:hover {
  background-color: #FFFAF5B2;
}

/* FONCÉ (success) */
.elementor-element.elementor-button-success .elementor-button {
  background-color: #1D1D1BE5;
  color: #FFFAF5;
}
.elementor-element.elementor-button-success .elementor-button:hover {
  background-color: #1D1D1BB2;
}

/* CONTOUR BLEU (warning) */
.elementor-element.elementor-button-warning .elementor-button {
  background: none;
  background-color : transparent;
  border: 3px solid #3A7CF4 ;
  color: #3A7CF4;
}
.elementor-element.elementor-button-warning .elementor-button:hover {
  border: 3px solid #2657B0 ;
  color: #2657B0;
}

/* CONTOUR BLANC (danger) */
.elementor-element.elementor-button-danger .elementor-button {
  background-color: transparent;
  color: #FFFAF5;
  border: 2px solid #FFFAF5;
}
.elementor-element.elementor-button-danger .elementor-button:hover {
  background-color: rgba(219, 215, 211, 0.2);
  color: rgba(219, 215, 211, 0.671);
}

/* FIL D'ARIANE */

.fil-ariane{
  color : #1D1D1B;

}

.fil-ariane a{
  color : #1D1D1B;
}

.fil-ariane .active{
  color : #3A7CF4;
}

.cat-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.chapo{
  /* display: flex; */
  padding: 2rem;
  justify-content: center;
  /* align-items: flex-start; */
  gap: 0.5rem;
  align-self: stretch;
  border: 2px dashed #3A7CF4;
  background: #FFF5D8;

  margin: 2rem 0;
}

.encart{
  padding: 3rem;
  background: rgba(255, 220, 115, 0.28);
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.contenu-actu{
  background-color: red; !important
}

.contenu-actu h1{
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.contenu-actu h2{
  display: flex;
  padding: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;

  background: #FFDC73;

  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "LEMON MILK";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 1.8rem */
}

blockquote{
  display: flex;
  position: relative;
  padding: 4.5rem 4.6875rem;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
}

blockquote::before,
blockquote::after {
  font-family: serif;
  font-size: 20rem;
  color: #ffebbc6b; /* jaune très clair comme sur ta capture */
  position: absolute;
  z-index: -1;
  line-height: 110%;
}

blockquote::before {
  content: '«';
  top: -6rem;
  left: -1rem;
}

.card-ressource{
  display: flex;
  min-width: 15rem;
  width:33%;
  max-width: 22rem;
  padding: 2.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  transition : 200ms ease-out;
}

.card-ressource-bleu{
  border : 4px #3A7CF4 solid;
}

.card-ressource-jaune{
  border : 4px #FFDC73 solid;
}

.card-ressource-bleu:hover{
  transform : scale(0.95);
  border-color : #C5D9FF;
}
.card-ressource-jaune:hover{
  transform : scale(0.95);
  border : 4px #fff5d8 solid;
}