/* ============================================================ */
/* CORRECTIONS GLOBALES - TOUTES LES PAGES                      */
/* ============================================================ */
/* Fichier indépendant de Nicepage.                             */
/* Ne sera PAS écrasé en cas de réexportation du site.          */
/* À charger EN DERNIER dans le <head> de chaque page HTML.     */
/* ============================================================ */

@media (max-width: 767px) {
  
  /* ============================================== */
  /* HEADER : MENU HAMBURGER (toutes les pages)     */
  /* ============================================== */
  
  /* Marge intérieure du header : espace entre le bord et le menu */
  header .u-sheet-1 {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  /* On s'assure que le hamburger reste aligné à droite */
  .menu-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* On limite la taille du logo pour ne pas pousser le hamburger */
  .u-logo {
    max-width: 60px !important;
  }

   /* ============================================== */
  /* SÉCURITÉ : PAS DE DÉBORDEMENT HORIZONTAL       */
  /* ============================================== */
  /* Note : on ne met PAS overflow-x: hidden sur    */
  /* body, car cela casserait le header sticky.     */
  /* On le met uniquement sur html.                 */
  
 
	 html, body {
	  overflow-x: hidden !important;
	  width: 100% !important;
	  max-width: 100% !important;
	  position: relative !important;
	}
 
}




/* ============================================== */
/* PAGE ACCUEIL : CARTES DE LA SECTION 1          */
/* ============================================== */

@media (max-width: 767px) {
  
  /* Conteneur des 4 cartes : largeur relative */
  .u-section-1 .u-list-2 {
    width: 90% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Grille des cartes : hauteur auto */
  .u-section-1 .u-repeater-2 {
    min-height: auto !important;
    height: auto !important;
  }

  /* Chaque carte : hauteur auto */
  .u-section-1 .u-list-item-2,
  .u-section-1 .u-list-item-3,
  .u-section-1 .u-list-item-4,
  .u-section-1 .u-list-item-5 {
    height: auto !important;
    min-height: auto !important;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-list-2 {
    width: 92% !important;
    max-width: 340px !important;
  }
}


/* ============================================== */
/* CORRECTION : FLÈCHE "RETOUR EN HAUT"           */
/* ============================================== */

.u-back-to-top {
  right: 15px !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 64px !important;
}


/* ============================================== */
/* PAGE ACCUEIL : SECTION 2 (À PROPOS DE)         */
/* ============================================== */

@media (max-width: 767px) {

  /* 1. On masque la forme grise décorative */
  .u-section-2 .u-shape-1 {
    display: none !important;
  }

  /* 2. Hauteurs automatiques */
  .u-section-2,
  .u-section-2 .u-sheet-1,
  .u-section-2 .u-layout-cell-1,
  .u-section-2 .u-layout-cell-2 {
    min-height: auto !important;
  }

  /* 3. Wrapper : largeur 100% */
  .u-section-2 .u-layout-wrap-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 30px auto !important;
    box-sizing: border-box !important;
  }

  /* 4. Image : pleine largeur */
  .u-section-2 .u-image-1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }

  /* 5. Neutralisation du parent */
  .u-section-2 .u-container-layout-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;    /* ← Astuce : on centre tout le contenu du parent */
  }

     /* 6. LA CARTE : version stable et acceptable */
  .u-section-2 .u-group-1 {
    display: inline-block !important;
    width: 80% !important;
    max-width: 380px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
    vertical-align: top !important;
  }

  /* 7. Textes centrés dans la carte */
  .u-section-2 .u-text-1,
  .u-section-2 .u-text-2 {
    text-align: center !important;
  }
}


/* ============================================== */
/* PAGE ACCUEIL : SECTION 3 (ACCORDÉON "SUITE")   */
/* ============================================== */

@media (max-width: 767px) {

  /* 1. Le conteneur de l'accordéon : largeur relative */
  .u-section-3 .u-accordion-1 {
    width: 90% !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 2. Les liens (titres) : padding symétrique */
  .u-section-3 .u-accordion-link-1,
  .u-section-3 .u-accordion-link-2,
  .u-section-3 .u-accordion-link-3 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* 3. Les panneaux (contenus) : padding symétrique */
  .u-section-3 .u-accordion-pane-1,
  .u-section-3 .u-accordion-pane-2,
  .u-section-3 .u-accordion-pane-3 {
    box-sizing: border-box !important;
  }

  /* 4. Le container intérieur des panneaux : padding symétrique */
  .u-section-3 .u-container-layout-1,
  .u-section-3 .u-container-layout-2,
  .u-section-3 .u-container-layout-3 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* 5. Les textes : largeur 100% et marges propres */
  .u-section-3 .u-text-2,
  .u-section-3 .u-text-3,
  .u-section-3 .u-text-4 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
    /* 6. On force le centrage parfait du cadre */
  .u-section-3 .u-accordion-1 {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }

  /* 7. Le parent du cadre : on s'assure qu'il est bien centré */
  .u-section-3 .u-sheet-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
}

@media (max-width: 575px) {
  .u-section-3 .u-accordion-1 {
    width: 92% !important;
    max-width: 340px !important;
  }
}


/* ============================================== */
/* PAGE ACCUEIL : SECTION 5 (GALERIE D'ART)       */
/* ============================================== */

@media (max-width: 767px) {

  /* 1. Le conteneur de la galerie : hauteur FIXE pour éviter le flash noir */
  .u-section-5 .u-gallery-1 {
    margin-top: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 450px !important;          /* ← Hauteur fixe, pas de "auto" */
    max-width: 100% !important;
  }

  /* 2. La grille interne : centrée */
  .u-section-5 .u-gallery-inner-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    height: 100% !important;           /* ← Prend toute la hauteur du parent */
  }

  /* 3. Le parent : padding symétrique */
  .u-section-5 .u-sheet-1 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* 4. Le texte sous l'image : ne pas déborder */
  .u-section-5 .u-over-slide-1,
  .u-section-5 .u-over-slide-2,
  .u-section-5 .u-over-slide-3,
  .u-section-5 .u-over-slide-4,
  .u-section-5 .u-over-slide-5 {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 5. Les slides : largeur 100% */
  .u-section-5 .u-carousel-item-1,
  .u-section-5 .u-carousel-item-2,
  .u-section-5 .u-carousel-item-3,
  .u-section-5 .u-carousel-item-4,
  .u-section-5 .u-carousel-item-5 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 6. Les slides en général */
  .u-section-5 .u-carousel-item-6,
  .u-section-5 .u-carousel-item-7,
  .u-section-5 .u-carousel-item-8,
  .u-section-5 .u-carousel-item-9,
  .u-section-5 .u-carousel-item-10 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }
  
    /* 7. Les images s'affichent en entier, sans être coupées */
  .u-section-5 .u-back-image {
    object-fit: contain !important;
    background-color: #1a1a1a !important;   /* Fond gris foncé autour des images */
  }

  /* 8. On augmente un peu la hauteur pour laisser de la place au texte descriptif */
  .u-section-5 .u-gallery-1 {
    height: 500px !important;
  }
    /* 9. On réduit la hauteur de la section pour supprimer le vide */
  .u-section-5 {
    min-height: auto !important;
    padding-bottom: 30px !important;
  }
  
}

@media (max-width: 575px) {
  .u-section-5 .u-gallery-1 {
    margin-top: 30px !important;
    height: 350px !important;          /* ← Hauteur un peu plus petite sur très petits écrans */
  }
}


/* ============================================== */
/* PAGE ACCUEIL : SECTION 7 (CHIFFRES CLÉS)       */
/* ============================================== */

@media (max-width: 767px) {

  /* 1. La section : hauteur auto */
  .u-section-7 {
    min-height: auto !important;
  }

  /* 2. Le conteneur principal : largeur 100% */
  .u-section-7 .u-layout-wrap-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 3. Taille de police raisonnable pour les chiffres */
  .u-section-7 .u-text-1,
  .u-section-7 .u-text-3,
  .u-section-7 .u-text-5 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* 4. Les cellules des chiffres : padding symétrique */
  .u-section-7 .u-layout-cell-1,
  .u-section-7 .u-layout-cell-3,
  .u-section-7 .u-layout-cell-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  /* 5. Padding confortable pour les textes descriptifs */
  .u-section-7 .u-container-layout-2,
  .u-section-7 .u-container-layout-4,
  .u-section-7 .u-container-layout-6 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 6. Les cellules des textes : padding symétrique */
  .u-section-7 .u-layout-cell-2,
  .u-section-7 .u-layout-cell-4,
  .u-section-7 .u-layout-cell-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 7. Textes descriptifs : largeur auto avec marges */
  .u-section-7 .u-text-2,
  .u-section-7 .u-text-4,
  .u-section-7 .u-text-6 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 575px) {
  /* 8. Sur très petits écrans, on réduit encore la taille des chiffres */
  .u-section-7 .u-text-1,
  .u-section-7 .u-text-3,
  .u-section-7 .u-text-5 {
    font-size: 1.75rem !important;
  }
}