/*
Theme Name: Twenty Eleven Child
Template: twentyeleven
*/

/* Import parent */
@import url("../twentyeleven/style.css");

/* --------- Ajustements généraux --------- */
#branding { border-top:0; padding-bottom:10px; position:relative; z-index:5; }
img, iframe, embed, object, video { max-width:100%; height:auto; }

/* Supprimer la recherche header */
#branding #searchform,
#branding .only-search { display:none !important; }


/* --------- Mobile & tablette --------- */
@media (max-width:782px){

  /* Conteneur menu + fond sombre */
  #access { position:relative; z-index:1000; background:#222 !important; text-align:left; }

  /* Bouton hamburger */
  #access .mobile-menu-toggle{
    -webkit-appearance:none; appearance:none;
    display:inline-flex; align-items:center; gap:.5em;
    margin:.5em 0; padding:.6em .9em; font-size:16px; line-height:1;
    border:0 !important; border-radius:6px; background:#111 !important; color:#fff !important;
    cursor:pointer;
  }
  #access .mobile-menu-toggle:focus{ outline:2px solid #ffd54d; outline-offset:2px; }
  #access .mobile-menu-toggle .burger{ width:20px; height:2px; background:currentColor; position:relative; display:inline-block; }
  #access .mobile-menu-toggle .burger::before,
  #access .mobile-menu-toggle .burger::after{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; }
  #access .mobile-menu-toggle .burger::before{ top:-6px; }
  #access .mobile-menu-toggle .burger::after{ top: 6px; }

  /* Neutraliser le :hover en mobile */
  #access ul li:hover > ul { display:none !important; }

  /* Palette et liens quand OUVERT (nav.toggled) */
  #access.toggled .menu, #access.toggled .menu > ul, #access.toggled > div.menu, #access.toggled > ul.menu{
    background:#222 !important; list-style:none; margin:0; padding:8px 0;
  }
  #access.toggled .menu > ul > li > a,
  #access.toggled > ul.menu > li > a{
    display:block !important; padding:10px 12px !important; color:#fff !important;
    background:transparent !important; border:0 !important; white-space:nowrap; text-decoration:none;
  }

  /* Sous-menus : fermés par défaut, ouverts si parent .open */
    #access ul.sub-menu, #access ul.children{
    display:none; position:static !important; width:100% !important;
    margin:0 !important; padding:0 !important; background:#222 !important; box-shadow:none !important;
  }
  #access li.open > ul.sub-menu, #access li.open > ul.children{ display:block !important; }
  #access ul.sub-menu li, #access ul.children li{ float:none !important; margin:0 !important; }
  #access ul.sub-menu a, #access ul.children a{
    display:block !important; padding:10px 12px !important; color:#fff !important;
    background:#222 !important; border-top:1px solid rgba(255,255,255,.12) !important; white-space:normal; text-decoration:none;
  }
  #access li.menu-item-has-children > a::after{ content:" ▾"; font-size:.9em; }
  #access li.open > a::after{ content:" ▴"; }

@media (max-width:782px){
  /* Sous-menus fermés par défaut… */
  #access.toggled ul.sub-menu,
  #access.toggled ul.children { display:none !important; }

  /* …ouvert uniquement si le parent a .open (au 1er tap) */
  #access.toggled li.open > ul.sub-menu,
  #access.toggled li.open > ul.children { display:block !important; }

  /* Et on neutralise le :hover en mobile */
  #access ul li:hover > ul { display:none !important; }
}

  /* Page layout */
  body{ padding:0 !important; }
  #page{ margin:6px auto; max-width:100% !important; width:100% !important; padding:0 12px; box-sizing:border-box; }
  .entry-content, #content{ width:auto !important; }
  #primary,#secondary{ float:none !important; width:100% !important; margin:0 auto !important; }
  #secondary{ margin-top:20px !important; }
}

/* --------- Desktop --------- */
@media (min-width:783px){
  body{ padding:0 2em; }
  #page{ min-width:1000px; }
  .entry-content{ width:600px; }
  #access ul li:hover > ul{ display:block; }
}
/* Centrer le menu en desktop */
#access { float:none !important; margin:0 auto !important; text-align:center !important; }
#access .menu, #access > div.menu, #access > ul.menu { display:inline-block !important; width:auto !important; text-align:left !important; }
#access .menu > ul, #access > ul.menu { display:inline-block !important; width:auto !important; }


/* ===== MOBILE : affichage contrôlé par .toggled ===== */
@media (max-width:782px){

  /* Quand on a cliqué (nav ouvert) : ré-afficher proprement */
  #access.toggled > *:not(#mobile-menu-toggle){
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Si la structure varie, on force l'ouverture sur ces sélecteurs */
  #access.toggled .menu-menu-mauvejeane-container,
  #access.toggled #menu-menu-mauvejeane{
    display:block !important;
  }

  /* Palette sombre lisible */
  #access.toggled .menu,
  #access.toggled .menu > ul,
  #access.toggled .menu-menu-mauvejeane-container,
  #access.toggled #menu-menu-mauvejeane{
    background:#222 !important;
    list-style:none;
    margin:0;
    padding:8px 0;
  }
  #access.toggled .menu > ul > li > a,
  #access.toggled #menu-menu-mauvejeane > li > a{
    display:block !important;
    padding:10px 12px !important;
    color:#fff !important;
    text-decoration:none;
  }

  /* Sous-menus fermés par défaut, ouverts si parent .open */
  #access ul.sub-menu,
  #access ul.children{
    display:none;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#222 !important;
    box-shadow:none !important;
  }
  #access li.open > ul.sub-menu,
  #access li.open > ul.children{ display:block !important; }

  #access ul.sub-menu a,
  #access ul.children a{
    display:block !important;
    padding:10px 12px !important;
    color:#fff !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    white-space:normal;
    text-decoration:none;
  }

  /* Neutraliser totalement le :hover en mobile */
  #access ul li:hover > ul { display:none !important; }
}

/* ===== Etat OUVERT du menu mobile : tout ré-afficher ===== */
@media (max-width:782px){

  /* Débloque absolument tout ce que l'anti-flash ou d'autres règles ont caché */
  nav#access.toggled > *:not(#mobile-menu-toggle),
  nav#access.toggled .menu-menu-mauvejeane-container,
  nav#access.toggled #menu-menu-mauvejeane,
  nav#access.toggled .menu,
  nav#access.toggled .menu > ul,
  nav#access.toggled ul,
  nav#access.toggled li {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Apparence lisible */
  nav#access.toggled .menu,
  nav#access.toggled .menu > ul,
  nav#access.toggled .menu-menu-mauvejeane-container,
  nav#access.toggled #menu-menu-mauvejeane {
    background: #222 !important;
    margin: 0;
    padding: 8px 0;
    list-style: none;
  }
  nav#access.toggled .menu > ul > li > a,
  nav#access.toggled #menu-menu-mauvejeane > li > a {
    display: block !important;
    padding: 10px 12px !important;
    color: #fff !important;
    text-decoration: none;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap;
  }

  /* Sous-menus fermés par défaut, ouverts si parent .open */
  #access ul.sub-menu,
  #access ul.children { display: none; }
  #access li.open > ul.sub-menu,
  #access li.open > ul.children { display: block !important; }

  /* Neutralise totalement le :hover en mobile */
  #access ul li:hover > ul { display:none !important; }
}

/* Mobile : masquer le petit titre "Menu principal" */
@media (max-width:782px){
  #access .assistive-text{ display:none !important; }
}

/* Mobile (menu ouvert) : forcer l'empilement vertical du 1er niveau */
@media (max-width:782px){
  /* Top-level UL prend toute la largeur */
  #access.toggled .menu > ul,
  #access.toggled #menu-menu-mauvejeane {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Chaque item du 1er niveau = bloc plein, sans float */
  #access.toggled .menu > ul > li,
  #access.toggled #menu-menu-mauvejeane > li{
    float:none !important;
    display:block !important;
    width:100% !important;
  }
}

/* Mobile : lisibilité et espacement */
@media (max-width:782px){
  /* Ligne de séparation douce entre les items du 1er niveau */
  #access.toggled .menu > ul > li > a,
  #access.toggled #menu-menu-mauvejeane > li > a{
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  /* Mettre un léger fond au survol/tap */
  #access.toggled a:active,
  #access.toggled a:focus{
    background:rgba(255,255,255,.06) !important;
  }
  /* Petits chevrons + alignement */
  #access li.menu-item-has-children > a{ position:relative; padding-right:28px !important; }
  #access li.menu-item-has-children > a::after{
    content:"▾"; position:absolute; right:10px; top:50%;
    transform:translateY(-50%);
    opacity:.8;
  }
  #access li.open > a::after{ content:"▴"; }
}

* --- Menu mobile en panneau overlay (ne pousse plus la page) --- */
@media (max-width:782px){
  /* Le header sert d’ancrage au panneau */
  #branding{ position:relative; z-index:5; }

  /* Nav au-dessus du contenu */
  #access{ position:relative; z-index:1000; background:#222 !important; }

  /* Panneau : conteneur du menu quand nav.toggled */
  #access.toggled .menu-menu-mauvejeane-container,
  #access.toggled > .menu,
  #access.toggled > ul.menu{
    position:absolute;
    left:0; right:0; top:100%;           /* collé sous le bouton */
    max-height:75vh;                     /* hauteur raisonnable */
    overflow:auto; -webkit-overflow-scrolling:touch;
    background:#222 !important;
    padding:8px 0;
    box-shadow:0 10px 18px rgba(0,0,0,.25);
    border-top:1px solid rgba(255,255,255,.15);
  }

  /* On s’assure que le panneau est bien masqué si pas .toggled */
  #access:not(.toggled) .menu-menu-mauvejeane-container,
  #access:not(.toggled) > .menu,
  #access:not(.toggled) > ul.menu{
    display:none !important;
  }

  /* 1er niveau : une seule colonne, pleine largeur */
  #access.toggled .menu > ul,
  #access.toggled #menu-menu-mauvejeane{
    display:block !important;
    width:100% !important;
    margin:0 !important; padding:0 !important;
  }
  #access.toggled .menu > ul > li,
  #access.toggled #menu-menu-mauvejeane > li{
    float:none !important; display:block !important; width:100% !important;
  }
  #access.toggled .menu > ul > li > a,
  #access.toggled #menu-menu-mauvejeane > li > a{
    display:block !important;
    padding:12px 14px !important;
    color:#fff !important; text-decoration:none;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  /* Sous-menus : fermés par défaut, visibles si parent .open */
  #access ul.sub-menu, #access ul.children{
    display:none !important; position:static !important;
    margin:0 !important; padding:0 !important; background:#222 !important; box-shadow:none !important;
    width:100% !important;
  }
  #access li.open > ul.sub-menu,
  #access li.open > ul.children{ display:block !important; }

  /* Indentation des niveaux */
  #access ul.sub-menu a{ padding-left:28px !important; }
  #access ul.sub-menu ul.sub-menu a{ padding-left:40px !important; }

  /* Chevrons indicateurs */
  #access li.menu-item-has-children > a{ position:relative; padding-right:28px !important; }
  #access li.menu-item-has-children > a::after{
    content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.85;
  }
  #access li.open > a::after{ content:"▴"; }

  /* Désactive le :hover en mobile pour éviter l'ouverture fantôme */
  #access ul li:hover > ul{ display:none !important; }

  /* Cache le petit titre "Menu principal" */
  #access .assistive-text{ display:none !important; }
}

/* --- Menu mobile en panneau overlay (ne pousse plus la page) --- */
@media (max-width:782px){
  /* Le header sert d’ancrage au panneau */
  #branding{ position:relative; z-index:5; }

  /* Nav : pas de fond ni de grande hauteur */
  #access{
    position:relative;
    z-index:1000;
    background:transparent !important; /* <--- important */
  }

  /* Panneau (= conteneur du menu) : overlay sous le bouton */
  #access.toggled .menu-menu-mauvejeane-container,
  #access.toggled > .menu,
  #access.toggled > ul.menu{
    position:absolute !important;
    left:0; right:0; top:100%;                 /* collé sous le bouton */
    max-height:75vh;                            /* hauteur raisonnable */
    overflow:auto; -webkit-overflow-scrolling:touch;
    background:#222 !important;                 /* fond ici, pas sur #access */
    padding:8px 0;
    box-shadow:0 10px 18px rgba(0,0,0,.25);
    border-top:1px solid rgba(255,255,255,.15);
  }

  /* Si nav n'est pas ouvert : panneau caché */
  #access:not(.toggled) .menu-menu-mauvejeane-container,
  #access:not(.toggled) > .menu,
  #access:not(.toggled) > ul.menu{
    display:none !important;
  }

  /* 1er niveau : pleine largeur, une seule colonne */
  #access.toggled .menu > ul,
  #access.toggled #menu-menu-mauvejeane{
    display:block !important;
    width:100% !important;
    margin:0 !important; padding:0 !important;
  }
  #access.toggled .menu > ul > li,
  #access.toggled #menu-menu-mauvejeane > li{
    float:none !important; display:block !important; width:100% !important;
  }
  #access.toggled .menu > ul > li > a,
  #access.toggled #menu-menu-mauvejeane > li > a{
    display:block !important;
    padding:12px 14px !important;
    color:#fff !important; text-decoration:none;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  /* Sous-menus fermés par défaut, visibles si le parent a .open */
  #access ul.sub-menu, #access ul.children{
    display:none !important;
    position:static !important;
    margin:0 !important; padding:0 !important;
    background:#222 !important; box-shadow:none !important;
    width:100% !important;
  }
  #access li.open > ul.sub-menu,
  #access li.open > ul.children{ display:block !important; }

  /* Indentation claire des niveaux */
  #access ul.sub-menu a{ padding-left:28px !important; }
  #access ul.sub-menu ul.sub-menu a{ padding-left:40px !important; }

  /* Chevrons indicateurs */
  #access li.menu-item-has-children > a{ position:relative; padding-right:28px !important; }
  #access li.menu-item-has-children > a::after{
    content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.85;
  }
  #access li.open > a::after{ content:"▴"; }

  /* Pas d'ouverture au :hover en mobile */
  #access ul li:hover > ul{ display:none !important; }

  /* Cacher le petit titre “Menu principal” */
  #access .assistive-text{ display:none !important; }
}

/* --- Fix superposition / captures des clics pour le panneau mobile --- */
@media (max-width:782px){

  /* Le nav sert d’ancrage et reste sous le panneau */
  #access{
    position: relative !important;
    z-index: 100 !important;          /* le panneau passera au-dessus */
    background: transparent !important;
  }

  /* Le panneau (= conteneur du menu) doit être AU-DESSUS et capter les clics */
  #access.toggled .menu-menu-mauvejeane-container,
  #access.toggled > .menu,
  #access.toggled > ul.menu{
    position: absolute !important;
    left: 0; right: 0; top: 100%;
    max-height: 75vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #222 !important;

    z-index: 9999 !important;         /* << clé : au-dessus de tout */
    pointer-events: auto !important;   /* << capte les taps */
    box-shadow: 0 10px 18px rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.15);
  }

  /* Par sécurité, tout ce qui est hors .toggled est bien caché */
  #access:not(.toggled) .menu-menu-mauvejeane-container,
  #access:not(.toggled) > .menu,
  #access:not(.toggled) > ul.menu{
    display: none !important;
    pointer-events: none !important;
  }
}

@media (max-width:782px){
  #mobile-menu-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9990;              /* juste sous le panneau (9999) */
  }
}