/* Minndiarabi – correctifs 2026 (chargés après main.css et responsive.css) */

/* 1. Défilement : overflow-x:hidden sur html ET body crée un second conteneur de défilement
      (défilement saccadé, surtout sur iPhone/iPad). "clip" coupe le débordement sans ce effet. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
body { overscroll-behavior-y: auto; }

/* 2. Pages intérieures : en-tête moins haut pour arriver plus vite au contenu */
body:not(.home) header { height: auto; }
body:not(.home) header .presentation { height: 52vh; min-height: 360px; }
body:not(.home) header .presentation h1 { margin-top: 6vh; }

/* 3. Sous-menus accessibles au clavier et sur tablette tactile */
header div .menuprincipal ul li:focus-within > ul { visibility: visible; opacity: 1; }

/* 4. Boutons d'inscription HelloAsso */
.mnd-ha { margin: 18px 0 30px; }
.mnd-btn, a.mnd-btn:link { display: inline-block; background: #c95555; color: #fff !important; font-weight: 900; padding: 14px 22px; border-radius: 999px; }
.mnd-btn:hover { background: #993333; }

/* 5. Contenus : vidéos et tableaux ne débordent plus */
main iframe { max-width: 100%; }
main .text table, main table.tablepress { display: block; max-width: 100%; overflow-x: auto; }

/* 6. Tablette et téléphone : vrai menu, en-tête compact */
.mnd-burger { display: none; }
@media screen and (max-width: 1024px) {
  header, body:not(.home) header { height: auto; }
  header div, header .presentation, body:not(.home) header .presentation {
    height: auto; min-height: 0; padding: 72px 0 34px; justify-content: flex-start;
  }
  body.home header .presentation { min-height: 72vh; justify-content: center; }
  header .presentation > a:not(.bouton-menu) { margin-top: 0; max-width: 170px; }
  header div h1, header .presentation h1 { font-size: 1.45rem; margin: 22px 6vw 0; text-align: center; line-height: 1.25; }

  /* bouton Menu fixe, toujours accessible */
  header .bouton-menu { display: none !important; }
  .mnd-burger {
    display: flex; align-items: center; gap: 8px; position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 1001;
    background: #3d2711; color: #fff; border: 0; border-radius: 999px; padding: 11px 18px; font: 900 16px/1 'Lato', sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer;
  }
  .mnd-burger span { display: block; width: 18px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }

  /* panneau de navigation plein écran */
  header div nav#navigation-principale, header div .menuprincipal {
    display: block !important; position: fixed; inset: 0; z-index: 1002; width: 100%; height: 100%;
    background: #3d2711; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(70px + env(safe-area-inset-top, 0px)) 0 40px; transform: translateX(-100%); transition: transform .3s ease; visibility: hidden;
  }
  html.mnd-menu-open header div nav#navigation-principale { transform: none; visibility: visible; }
  html.mnd-menu-open, html.mnd-menu-open body { overflow: hidden !important; }
  header div .menuprincipal .bouton-menu-close {
    display: block !important; position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 18px;
    color: #fff; font: 900 16px/1 'Lato', sans-serif; border: 2px solid #fff; border-radius: 999px; padding: 10px 16px;
  }
  header div .menuprincipal ul, header div .menuprincipal ul li, header div .menuprincipal ul ul {
    display: block !important; position: static !important; width: 100% !important; min-width: 0 !important; height: auto !important;
    visibility: visible !important; opacity: 1 !important; background: transparent !important; text-align: left !important; margin: 0; padding: 0; transform: none !important;
  }
  header div .menuprincipal ul li a {
    display: block; color: #fff !important; padding: 15px 26px; font-size: 1.15rem; font-weight: 900; line-height: 1.3; top: 0; height: auto;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  header div .menuprincipal ul ul li a { font-weight: 400; font-size: 1.05rem; padding-left: 44px; }
  header div .menuprincipal ul > li > a[href="#"] { color: #e8a559 !important; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; padding-top: 24px; }

  /* les photos du contenu redeviennent visibles et s'adaptent à l'écran */
  main .text img, main img.moyenne { display: block !important; max-width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  header div nav#navigation-principale { transition: none; }
}

/* 7. Ajustements en-tête des pages intérieures (ordinateur) */
@media screen and (min-width: 1025px) {
  body:not(.home) header .presentation { height: auto; min-height: 0; padding-top: 48px; justify-content: flex-start; gap: 22px; }
  body:not(.home) header .presentation > a { max-width: 210px; }
  body:not(.home) header .presentation h1 { margin-top: 0; }
}
@media screen and (max-width: 1024px) {
  header div .menuprincipal .bouton-menu-close { width: auto !important; left: auto !important; }
}

/* 8. Listes dans le contenu des pages */
main ul.wp-block-list { list-style: disc; padding-left: 1.4em; margin: .6em 0 1.2em; }
main ul.wp-block-list li { font-size: 1rem; line-height: 1.7; margin: .2em 0; }
main .wp-block-image img { display: block !important; height: auto; max-width: 100%; }
main ul.wp-block-list li strong { font-weight: 900; }

/* 9. Illustrations des modèles : les images à la une s'adaptent au cadre au lieu de déborder */
@media screen and (min-width: 1025px) {
  main .illustration img.grande, main .illustration img.moyenne, main .illustration img.petite,
  main .illustration img.petite-horizontale, main .illustration img.moyenne-horizontale {
    display: block; height: auto; object-fit: cover; aspect-ratio: 16 / 9;
  }
  main .horizontale-grande { height: calc(min(1000px, 70vw) * .5625 + 12vh); max-width: 100%; }
  main .horizontale-grande img.grande { width: min(1000px, 70vw); max-width: none; }
  main .horizontale-grande p:first-child img { width: min(1000px, 72vw); height: auto; }
  main .horizontale-grande .rectangle-horizontal-grand { width: min(1000px, 72vw); height: calc(min(1000px, 72vw) * .58); }
  main .illustration img.moyenne { width: 465px; max-width: 100%; aspect-ratio: 4 / 5; }
  main .illustration { max-width: 100%; }
}
/* 10. Mise en page en colonnes dans le contenu (texte + affiche) */
main .wp-block-columns { display: flex; gap: 40px; align-items: flex-start; margin: 10px 0 30px; }
main .wp-block-column { flex: 1 1 0; min-width: 0; }
main .mnd-affiche img { width: 100%; max-width: 380px; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(61,39,17,.18); margin: 0 auto; }
main .mnd-affiche figcaption { font-size: .85rem; text-align: center; margin-top: 8px; color: #666; }
@media screen and (max-width: 781px) {
  main .wp-block-columns { flex-direction: column; gap: 18px; }
  main .mnd-affiche img { max-width: 300px; }
}

/* 11. Bloc contact et partenaires sur tablette / téléphone */
@media screen and (max-width: 1024px) {
  main .info-contact { display: block; }
  main .info-contact .formulaire { padding: 26px 20px 6px; text-align: center; }
  main .info-contact .information { background-image: none !important; background-color: rgba(232,165,89,.18) !important; padding: 22px 20px 28px; text-align: left; }
  main .info-contact .information ul { padding-left: 0; list-style: none; margin: 6px 0 16px; }
  main .info-contact .information li, main .info-contact .information a { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.6; }
  footer .partenaires { padding: 26px 16px; }
  footer .carousel-client { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
  footer .carousel-client a { width: auto !important; float: none !important; }
  footer .carousel-client img { width: 90px; height: auto; display: block; }
  footer section, footer article { min-height: 0 !important; height: auto !important; }
}

/* 12. Partenaires : rangée de logos simple sur tous les écrans */
footer .partenaires { padding: 34px 16px; }
footer .carousel-client { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; }
footer .carousel-client a { width: auto !important; float: none !important; margin: 0 !important; }
footer .carousel-client img { width: 110px; height: auto; display: block; border-radius: 6px; }
footer section, footer article { min-height: 0 !important; height: auto !important; }