/* Modern responsive navigation inspired by minimal Apple-like patterns
   - Desktop: horizontal menu with dropdowns
   - Mobile: full-screen overlay with large tap targets
   - Accessible: aria-expanded, keyboard support
*/
:root{
  --nav-bg: rgb(255, 255, 255);
  --nav-text:#ffffff;
  --nav-accent:#d70f20;
  --nav-height:72px;
  --nav-transition:0.28s cubic-bezier(.2,.9,.2,1);
}

/* Basic layout */
.headpart{background:var(--nav-bg);color:var(--nav-text);position:relative;z-index:1000}
#nav{max-width:1200px}
#logo-flamme img{height:52px}

/* Mainnav desktop */
#mainnav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center}
#mainnav ul li{position:relative}
#mainnav ul li a, #mainnav ul li span{color:var(--nav-text);text-decoration:none;padding:6px 2px;font-weight:600}
#mainnav ul li a:hover, #mainnav ul li.activ>a{color:var(--nav-accent)}

/* Dropdown submenu */
#mainnav ul li .submenu{position:absolute;left:0;top:calc(var(--nav-height) - 10px);background:#fff;color:#222;min-width:200px;padding:12px;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(6px);pointer-events:none;transition:var(--nav-transition);display:none}
#mainnav ul li.open > .submenu{opacity:1;transform:none;pointer-events:auto;display:block}
#mainnav ul li .submenu li{padding:6px 0}
#mainnav ul li .submenu li a{color:#222;font-weight:500}

/* submenu chevron toggle (desktop small) */
.submenu-toggle{background:transparent;border:0;color:var(--nav-text);margin-left:8px;cursor:pointer;padding:4px;display:inline-flex;align-items:center}
.has-children > span{display:inline-flex;align-items:center;gap:8px}

/* Hide mobile menu buttons on desktop */
#openmenu, #closemenu, .mobile-submenu-back, .mobile-submenu-panel, .mobile-submenu-header{display:none}

/* Mobile overlay */
@media (max-width:991px){
  /* burger and close should be visible on light backgrounds */
  #openmenu,#closemenu{display:block;font-size:28px;color:var(--nav-accent)}
  #mainnav{position:fixed;inset:0;top:0;left:0;right:0;background:var(--nav-bg);transform:translateY(-100%);transition:transform var(--nav-transition);padding:32px;z-index:1200;overflow:auto}
  #mainnav.nav-open{transform:none}
  #mainnav ul{flex-direction:column;gap:8px;padding-top:12vh;align-items:flex-start;padding-left:0}
  /* make main links readable on white background and left-aligned */
  #mainnav ul li{width:100%}
  #mainnav ul li a, #mainnav ul li span{font-size:20px;padding:7px 8px;color:var(--nav-accent);display:block;text-align:left;width:100%;transition:background-color 0.2s ease, transform 0.15s ease;border-radius:6px}
  #mainnav ul li a:active, #mainnav ul li span:active{background-color:rgba(215, 15, 32, 0.1);transform:scale(0.98)}
  #mainnav ul li .submenu{position:static;background:transparent;padding:0;box-shadow:none;transform:none;opacity:1;pointer-events:auto;display:none}
  #mainnav ul li.open > .submenu{display:block;padding-left:18px;margin-top:8px}
  .submenu li a{color:var(--nav-accent);padding:6px 0;display:block}
  #closemenu{position:absolute;right:18px;top:18px;color:var(--nav-accent);transition:transform 0.3s ease, color 0.2s ease}
  #closemenu:hover{transform:rotate(90deg);color:#a00c16}
  #closemenu:active{transform:rotate(90deg) scale(0.9)}
  /* Mobile: hide inline chevrons and add panel styles for submenus (Apple-like) */
  .submenu-toggle{display:none}
  .mobile-submenu-panel{
    display:block;
    position:fixed;inset:0;top:0;left:0;right:0;
    background:var(--nav-bg);z-index:1300;
    opacity:0;
    transition:opacity var(--nav-transition);
    overflow:auto;
    pointer-events:none;
  }
  .mobile-submenu-panel.open{
    opacity:1;
    pointer-events:auto;
  }
  .mobile-submenu-header{
    display:flex;
    height:56px;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid rgba(0,0,0,.06);
    position:relative;
    gap:8px;
  }
  .mobile-submenu-back{
    display:flex;
    position:static;
    font-size:22px;
    color:var(--nav-accent);
    transition:transform 0.2s ease, background-color 0.2s ease;
    border:0;
    background:transparent;
    padding:0 8px 0 0;
    border-radius:6px;
    flex-shrink:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    line-height:1;
    margin-top:2px;
  }
  .mobile-submenu-back:active{
    transform:translateX(-4px);
    background-color:rgba(215, 15, 32, 0.05);
  }
  .mobile-submenu-title{
    font-weight:700;
    color:var(--nav-accent);
    font-size:18px;
    text-align:left;
    margin:0;
    padding-left:4px;
    flex:1 1 auto;
    display:flex;
    align-items:center;
  }
  .mobile-submenu-list{padding:8px;padding-top:12px}
  .mobile-submenu-list a{
    display:block;
    padding:7px 8px;
    color:var(--nav-accent);
    font-size:20px;
    text-align:left;
    width:100%;
    font-weight:600;
    text-decoration:none;
  }
} 

/* Desktop overrides */
@media (min-width:992px){
    /* Décale le sous-menu du dernier item vers la gauche si il dépasse */
    #mainnav ul > li:last-child .submenu {
      left: auto;
      right: 0;
    }
  .menu-item{position:relative}
  #mainnav{background:#fff}
  #mainnav ul li a, #mainnav ul li span{color:#000;background:none;}
  .menu-item.has-children > span {
    color: #000 !important;
    background: none !important;
    cursor: pointer;
  }
  .menu-item.has-children:hover > span,
  .menu-item:hover > a,
  .menu-item.has-children:hover > a {
    color: var(--nav-accent) !important;
    background: none !important;
    cursor: pointer;
  }
  .menu-item.has-children:hover > .submenu,
  .menu-item.has-children > .submenu:hover {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  #mainnav ul li .submenu{
    background:#fff;
    color:#222;
    display:none;
    flex-direction:column;
    min-width:200px;
    padding:16px 0 12px 0;
    gap:0;
    left:0;
    top:100%;
    margin-top:-8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    position:absolute;
    z-index:1002;
  }
  #mainnav ul li .submenu li{
    padding:0;
    width:100%;
  }
  #mainnav ul li .submenu li a{
    color:#222;
    font-size:17px;
    font-weight:500;
    padding:10px 20px;
    border-radius:0;
    text-align:left;
    text-decoration:none;
    transition:background .18s;
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  #mainnav ul li .submenu li a:hover{
    background:rgba(215,15,32,0.08);
    color:var(--nav-accent);
  }
  /* show submenu on hover for desktop - doublon supprimé */
  /* hide the mobile-only submenu toggles on larger screens */
  .submenu-toggle{display:none}
}



/* chevron / toggle alignment */
.menu-item{position:relative}
.menu-item > a, .menu-item > span{display:inline-flex;align-items:center;gap:8px}
.submenu-toggle{margin-left:8px;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:transparent;border:0;color:var(--nav-text);cursor:pointer}
.menu-item.open > .submenu-toggle i{transform:rotate(180deg)}
/* on desktop, keep chevron visually aligned even if hidden */
@media (min-width:992px){
  .menu-item > a, .menu-item > span{padding-right:16px}
}

/* small touches */
.submenu-toggle i{transition:transform .2s}
.menu-item.open > .submenu-toggle i{transform:rotate(180deg)}

/* visually hidden for screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus outlines */