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

  body, html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
  }

  .header_blocnav {
    padding-top: 0px !important;
  }
  
  .groupe_header {
    min-height: auto !important; /* Ajuste automatiquement la hauteur */
    width: 100%;
  }
  
  .header_info {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Aligne le contenu en haut */
    align-items: center;
    min-height: auto !important; /* Retire la contrainte de hauteur minimale */
    padding:60px 0px !important;
    grid-template-columns: 1fr;
    width: 100%;
  }
  
  .header_logo {
    display: flex;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }
  
  .header_logo img {
    width: 100%; /* Ajuste l'image à la largeur disponible */
    max-width: 300px; /* Limite la taille maximale de l'image */
    height: auto; /* Conserve les proportions */
    padding: 0; /* Supprime les espaces autour de l'image */
  }

  .header_courbe::before {
    margin-top: -1%;
    content: none;
    background: none;
  }
  .has-xx-large-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
  }
 
  .rotating_slogan {
    display:none !important;
  }


  /********************************************/
  /* Portfolio */
  /********************************************/

  .portfolio_grid {
    grid-template-columns: 100% !important;
    gap: 0px;
    min-height: auto !important;
  }

  .portfolio_col1,
  .portfolio_col2,
  .portfolio_col3,
  .portfolio_col4 {
    margin-bottom: 0px !important;
    border-radius: 0px !important;
    filter: grayscale(100%) !important;
    transition: filter 0.5s ease-out, height 0.5s ease-out;
  }

  .portfolio_col1_titre,
  .portfolio_col2_titre,
  .portfolio_col3_titre,
  .portfolio_col4_titre {
    width: 100%; /* pour que toute la zone soit clicable*/
    min-height: 75px !important;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    z-index: 50;
  }
  .portfolio_grid .portfolio_col1_titre h2, /* On garde ce sélecteur sinon le format 1024 est conservé avec une marge */
  .portfolio_col2_titre h2,
  .portfolio_col3_titre h2,
  .portfolio_col4_titre h2 {
    padding: 0px !important;
  }

  .portfolio_col1_texte,
  .portfolio_col2_texte,
  .portfolio_col3_texte,
  .portfolio_col4_texte {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-out;
  }

  .portfolio_grid .portfolio_col1.expanded::before,
  .portfolio_col2.expanded::before,
  .portfolio_col3.expanded::before,
  .portfolio_col4.expanded::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 0,10 100,10 L100,100 L0,100 Z" fill="white"/></svg>');
    opacity: 0.5 !important;
  }

  /* Hauteur par défaut augmentée de 50% pour les blocs non étendus */
  .portfolio_col1:not(.expanded),
  .portfolio_col2:not(.expanded),
  .portfolio_col3:not(.expanded),
  .portfolio_col4:not(.expanded) {
    height: 75px; /* Ajustez la hauteur ici selon vos besoins */
    overflow: hidden;
  }

  /* Affichage etendu */
  /* Désactiver le filtre pour le bloc avec la classe expanded */
  .portfolio_col1.expanded,
  .portfolio_col2.expanded,
  .portfolio_col3.expanded,
  .portfolio_col4.expanded {
    height: auto;
    filter: grayscale(0%) !important;
  }
  .expanded .portfolio_col1_texte,
  .expanded .portfolio_col2_texte,
  .expanded .portfolio_col3_texte,
  .expanded .portfolio_col4_texte {
    display: block;
    opacity: 1;
    max-height: 1000px !important; /* Ajustez selon le contenu */
    padding: 20px;
    z-index: 50;
  }

  /********************************************/
  /* Methodologie */
  /********************************************/

  /* Container pour le slider */
  .methodo_group {
    padding-top: 3rem !important;
  }

  /* Container pour le slider */
  .methodo_grid {
    display: grid;
    grid-template-columns: 100%; /* Une seule colonne visible à la fois */
    grid-auto-rows: auto; /* Ajuste automatiquement la hauteur */
    width: 100%;
    height: auto; /* Ajuste la hauteur selon la slide visible */
    overflow: hidden; /* Cache les slides non visibles */
    scroll-behavior: smooth; /* Pour un défilement fluide */
    position: relative;
  }

  /* Style pour chaque slide */
  .methodo_slide1,
  .methodo_slide2,
  .methodo_slide3 {
    grid-column: 1; /* Toutes les slides occupent la même colonne */
    grid-row: 1; /* Toutes les slides occupent la même rangée */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 30px !important;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 0; /* Par défaut, invisible */
    position: absolute; /* Permet de superposer les slides */
    width: 100%;
    height: auto;
    pointer-events: none; /* Désactive les interactions */
  }

  .methodo_slide1.active,
  .methodo_slide2.active,
  .methodo_slide3.active {
    opacity: 1; /* Visible */
    pointer-events: auto; /* Interaction activée */
    transform: translateX(0); /* Remet la slide dans le viewport */
    position: relative; /* S'assurer qu'elle reste superposée correctement */
    z-index: 1; /* Assurez que l'élément est au-dessus des autres */
  }

  /* Assurer que le texte s'affiche sur plusieurs lignes */
  .methodo_slide1 h1,
  .methodo_slide2 h1,
  .methodo_slide3 h1,
  .methodo_slide1 p,
  .methodo_slide2 p,
  .methodo_slide3 p {
    line-height: 1.5; /* Espacement entre les lignes */
    white-space: normal; /* Assurer que le texte ne reste pas sur une seule ligne */
  }

  /* Navigation avec des pastilles */
  /* Affichage du bloc, caché pour grand format */
  .methodo_btn {
    display: flex !important; /* Affiche les boutons uniquement en mobile */
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Ajoute de l’espace au-dessus des boutons */
  }

  /********************************************/
  /* Articles */
  /********************************************/
  .articles_maincol {
    flex-direction: column !important;
  }
}

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

@media screen and (max-width: 1024px) {
  .rotating_slogan {
    padding-left: 0px;
  }
  .rotating_chg {
    height: 20em !important; /* Ajuste la hauteur pour s'adapter aux phrases */
    position: relative !important;
    overflow: hidden; /* Cache les phrases hors de la zone visible */
  }

  .rotating_chg p {
    position: absolute !important;
    left: 0;
    top: 38%; /* Aligne toutes les phrases au même point de départ */
    margin: 0 !important;
    opacity: 0;
    animation: pushRotate 15s infinite !important;
    line-height: 1.2em !important; /* Ajuste l'espacement pour les phrases multi-lignes */
    font-size: 2.2rem; /* Adapte la taille pour les petits écrans */
    text-align: left !important;
  }

  /********************************************/
  /* Portfolio */
  /********************************************/
  .portfolio_grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0px;
  }
  .portfolio_col1::before,
  .portfolio_col2::before,
  .portfolio_col3::before,
  .portfolio_col4::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 0,28 100,28 L100,100 L0,100 Z" fill="red"/></svg>');
  }

  .portfolio_grid .portfolio_col1::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 0,28 100,28 L100,100 L0,100 Z" fill="red"/></svg>');
  }
  .portfolio_col1_titre h2,
  .portfolio_col2_titre h2,
  .portfolio_col3_titre h2,
  .portfolio_col4_titre h2 {
    font-size: 28px !important;
  }
  .portfolio_col1_titre h2 {
    padding-bottom: 40px !important;
  }
  .portfolio_col1_texte,
  .portfolio_col2_texte,
  .portfolio_col3_texte,
  .portfolio_col4_texte {
    justify-content: center;
  }
  .portfolio_col1_texte p,
  .portfolio_col2_texte p,
  .portfolio_col3_texte p,
  .portfolio_col4_texte p {
    padding-bottom: 5px !important;
  }

  /********************************************/
  /* Articles */
  /********************************************/

  .article_courbe::before {
    pointer-events: none;
    background: none;
    z-index: 0;
    position: absolute;
  }

  .dernier-article-contenu {
    top: 50%;
    left: 50%;
    min-width: 80%;
    height: 60%;
    transform: translate(-50%, -50%);
    z-index: 60;
  }

  .articles_btn {
    display: block !important;
    position: relative;
    z-index: 10;
  }

  .articles_btn {
    content: "";
    position: absolute;
    right: 10%;
    bottom: 5%;
  }

  /* Conteneur principal pour les articles */
  .articles_maincol {
    display: flex;
    flex-direction: row; /* On affiche les articles l'un en dessous de l'autre, l article prend 100% de la largeur*/
    overflow: hidden;
    scroll-behavior: smooth; /* Transition fluide */
    width: 100%;
    transform: translateX(0); /* Position initiale */
    transition: transform 0.5s ease-in-out; /* Animation fluide */
  }

  /* Chaque article prend 100% de la largeur visible */
  .article {
    flex: 1 0 100% !important;
    box-sizing: border-box;
  }

  /* Styles pour les boutons */
  .articles_btn {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .nav-dot1 a,
  .nav-dot2 a,
  .nav-dot3 a,
  .nav-dot4 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  }

  /* Masquer les slides non sélectionnés avec :target */
  #last_article1:target ~ .articles_maincol {
    transform: translateX(0); /* Montre l'article 1 */
  }

  #last_article2:target ~ .articles_maincol {
    transform: translateX(-100%); /* Montre l'article 2 */
  }

  #last_article3:target ~ .articles_maincol {
    transform: translateX(-200%); /* Montre l'article 3 */
  }

  #last_article4:target ~ .articles_maincol {
    transform: translateX(-300%); /* Montre l'article 4 */
  }

  /* Bouton actif associé à l'article ciblé */
  .articles_btn .wp-block-button.active {
    background-color: orange !important; /* Couleur pour le bouton actif */
    border-radius: 50px;
    transition: background-color 0.3s ease;
  }

  /********************************************/
  /* Footer */
  /********************************************/
  .footer_colonne {
    flex-direction: column;
    align-items: flex-start;
  }
  .groupe_footer .footer_col1 p,
  .groupe_footer .footer_col4 p {
    text-align: center !important;
  }

  .footer_col3 .wp-block-navigation {
    display: block !important; /* Forcer l'affichage complet */
  }

  /* Empêcher le menu de se transformer en icône */
  .footer_col3 .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .footer_col3 .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  .footer_col3 .wp-block-navigation__responsive-container {
    display: block !important; /* Force l'affichage du menu complet */
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }

  .footer_col3 .wp-block-navigation ul {
    display: flex !important; /* Afficher les items comme une liste */
    flex-direction: column; /* Empiler les items verticalement */
    margin: 0;
    padding: 0;
  }

  /* Suppression des effets JavaScript éventuels */
  .footer_col3 .wp-block-navigation__responsive-container-content {
    display: block !important;
  }

  .footer_col1,
  .footer_col2,
  .footer_col3,
  .footer_col4 {
    padding-bottom: 30px;
  }
}