/******* Généralités ********/

#contenu {
    margin-block-start: 0;
}
.mb {
   margin-bottom:clamp(4rem, 3rem + 5vw, 7.5rem);
}
.grid {
    gap: clamp(2rem, 0.571rem + 3.81vw, 4rem);
}
.gap24 {
gap: 1.5rem;
}
.wp-block-buttons {
    gap: clamp(1.6rem, 1.143rem + 2.286vw, 3.2rem);
    }
.cta a {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    font-size: 1rem;
    border-color: 1px solid var(--wp--preset--color--contrast);
    border-top-left-radius: 8px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 20px;
}
.cta > a:hover,
.cta > a:focus,
.cta > a:active {
    background-color: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--accent) !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 8px !important;
    }
/**************** Menu Evitement ****************/
.menu-evitement {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    max-height: 0px;
    overflow: hidden;
    z-index: 100;
    transition: .3s ease-in;
}
.menu-evitement:focus-within {
    max-height: 100px;
}
.menu-evitement .evitement {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 2px solid #f69d1f;
    color: var(--wp--preset--color--contrast);
    text-align: center;
    padding: 1rem;
    margin: 2rem;
    transition: 0.3s ease-out;
}

.menu-evitement .evitement:hover, .menu-evitement .evitement:focus {
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--background);
}
/******** Navigation ********/
.wp-block-navigation__responsive-container {
    background-color: #ffffff; /* Fond blanc */
}
.wp-block-navigation__responsive-container.is-menu-open {
    padding: 20px;
}
header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: var(--wp--preset--color--bgbleu);
  color: var(--wp--preset--color--contrast);
}
#header {
    padding-block: 1.5rem;
}

/* Background au survol */

.wp-block-navigation a:hover {
    padding: 0.5rem;
    background-color: var(--wp--preset--color--accent); /* Couleur de fond semi-transparente */
    transition: background-color 0.3s ease-in-out;
	border-radius: 4px; /* Arrondi pour l’esthétique */
}

/* Style pour le focus */
.wp-block-navigation a {
    padding: 0.5rem;
}
.wp-block-navigation a:focus,
.wp-block-navigation a:active {
    padding: 0.5rem;
    /*background-color: var(--wp--preset--color--background); /* Fond plus marqué pour l’accessibilité */
    outline: 1px solid var(--wp--preset--color--contrast); /* Bordure pour bien voir le focus */
    border-radius: 4px; /* Arrondi pour l’esthétique */
    border: 1px solid var(--wp--preset--color--accent);
    display: block;
}
.wp-block-navigation-submenu > li > a {
    font-size: var(--wp--preset--font--size--small);
    background-image: var(--wp--preset--gradient--gradient);
}
.current-menu-item a {
    background-color: var(--wp--preset--color--bgbleu);
    transition: background-color 0.3s ease-in-out;
	border-radius: 4px; /* Arrondi pour l’esthétique */
}
/**** Nav Mobile ****/
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--bgbleu);
    color: var(--wp--preset--color--contrast);
    text-align: left;
    font-size: 1rem;
    gap: 2rem;
    }
    .wp-block-navigation-item {
        font-size: 1rem;
        text-align: center;
    }
    .wp-block-navigation-item a:hover {
        padding: 0.5rem;
    }
   
    
/**** Nav desktop ****/
    .wp-block-navigation-item__content {
        color: var(--wp--preset--color--contrast);
        font-size: clamp(1rem, 0.914rem + 0.429vw, 1.3rem);
    }


/**** Hero ******/
.hero-contenu {
    background-image: var(--wp--preset--gradient--gradient);
    color: var(--wp--preset--color--contrast);
}
.hero-contenu-text  {
    padding-block: 2rem;
    padding-inline: 4rem;
}

@media (min-width: 62em) {
.hero-contenu {
    max-width: 45vw;
    margin-left: 10rem;
}
}
/**** Contenu accueil *****/

/** Section about **/
.about-grid {
    display: grid;
  justify-items: center;
  gap: 4rem;
  padding-block: 2rem;

}
@media (min-width: 62em) {
.about-img {
    grid-area: 1/1/-1/-1 ;
}
.about-txt {
    grid-area: 1/2/-1/4;
}
}
/** Section romans **/
.grid-roman {
    display: grid;
    align-items: center;
    justify-items: center;
}
.img-roman {
    padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  object-fit: contain;
  width: 100%;
  height: auto;
  display: grid;
    align-items: center;
    justify-items: center;
}

.img-roman > a > img,
.img-roman > img {
    max-height: 480px;
    object-position: center;
}

.img-roman > a > img:hover,
.img-roman > img:hover {
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 4px 8px rgba(3, 42, 47, 0.082);
    background-image: var(--wp--preset--gradient--gradient);
    filter: grayscale(1);

}

.bandeau-titre {
    padding: 2rem;
    background-image: var(--wp--preset--gradient--gradient);
    width: 100vw;
    text-align: center;
}
@media (min-width: 62em) {
.bandeau-titre {
    width: 40vw;
}
}

/**** Section actu *****/
.card-article {
    border-radius: 4px;
    transition: all 0.3s ease;
    padding: clamp(1rem, 0.714rem + 1.429vw, 2rem);
    box-shadow: 0 4px 8px rgba(3, 42, 47, 0.082);
    border: 0.1px solid var(--wp--preset--color--accent);
}
.card-article:hover {
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 4px 8px rgba(3, 42, 47, 0.082);
    background-color: var(--wp--preset--color--background);
}
.categ-article {
  
    display: flex;
    gap: 2rem;
}
.categ-article > li {
    padding: 0.5rem;
    border: 0.5px solid var(--wp--preset--color--accent);
    border-radius: 20px;
    text-align: center;
}

/**** Contact ******/
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    border-bottom: 2px solid var(--wp--preset--color--contrast) !important;
padding-bottom: 16px;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
background-color: var(--wp--preset--color--background) !important;
padding-inline: 1rem !important;
margin-top: 1rem !important;
border-radius: 4px 4px 0px 0px !important ;
}
.wpcf7-form-control-wrap textarea {
    max-height: 160px !important;
}

.wpcf7-submit {
background-color: var(--wp--preset--color--contrast) !important;
color: var(--wp--preset--color--background) !important;
padding: 0.5rem 1rem 0.5rem 1rem !important;
border: 0px !important;
border-radius: 4px;
}
.wpcf7-submit:hover{
    background-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--contrast) !important;
    }
/**** Footer ******/
#footer {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--background);
}
#footer h2,
#footer p {
    color: var(--wp--preset--color--background);
}