:root{
      /* Thème sombre + accent orange moderne */
      --c-bg:#1f2023;
      --c-surface:#26282d;
      --c-surface-2:#1b1d21;
      --c-border:#353841;
      --c-text:#e7eaf0;
      --c-muted:#a9afba;
      --c-accent:#FF4D00;        /* orange principal */
      --c-accent-press:#E04400;  /* état hover/click (plus sombre) */
      --radius:14px;
      --container:1200px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--c-text); background:var(--c-bg); line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;height:auto}

    /* ===== Header (fond orange) ===== */
    .header{
      position:sticky; top:0; z-index:80;
      background:var(--c-accent); /* header orange */
      top: -1px;
    }
    .header__inner{
      max-width:var(--container); margin:auto;
      padding:16px 20px 10px;
      display:flex; flex-direction:column; align-items:center; gap:12px;
      position:relative;
    }

    /* Logo centré et + gros */
    .logo{display:flex; align-items:center; justify-content:center; gap:12px}
    .logo img{height:84px; width:auto}         /* ++ taille */
    .header.isSticky .logo img {
      height: 53px;
      transition: all 0.3s ease;
    }
    .logo__text{
      font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.5px; font-size:1.25rem; color:#fff;
    }

    /* Bouton hamburger (mobile) */
    .nav__toggle{
      position:absolute; right:16px; top:16px;
      display:inline-flex; align-items:center; justify-content:center;
      width:44px; height:44px; border:1px solid rgba(0,0,0,.15);
      background:rgba(0,0,0,.08); color:#fff; border-radius:10px; cursor:pointer;
    }
    .nav__toggle svg{width:22px;height:22px}

    /* ===== Menu desktop (centré) ===== */
    .nav--desktop{width:100%}
    .menu{
      list-style:none; margin:0; padding:0;
      display:flex; align-items:center; justify-content:center; gap:26px;
    }
    .menu > li > a,
    .menu > li > button{
      color:#fff; font-weight:600; padding:10px 10px; border:0; background:none; cursor:pointer; font:inherit;
    }
    .menu > li > a:hover,
    .menu > li > button:hover{opacity:.85}

    .has-mega{position:relative}
    .has-mega > button[aria-expanded="true"]{opacity:1; text-decoration:underline}

    /* ===== Mega menu (desktop) ===== */
    .mega{
      position:absolute; left:50%; transform:translateX(-50%); top:100%;
      width:min(100vw, var(--container));
      background:var(--c-surface-2); border:1px solid var(--c-border);
      border-top:none; display:none; z-index:100; /* au-dessus du header */
      border-bottom-left-radius:12px; border-bottom-right-radius:12px;
    }
    .mega__inner{
      padding:22px 20px; display:grid; gap:24px; grid-template-columns:repeat(4, minmax(0,1fr));
    }
    .mega h4{font-family:'Montserrat',sans-serif; margin:0 0 10px; font-size:.95rem; color:#fff}
    .mega ul{list-style:none; margin:0; padding:0}
    .mega a{display:block; padding:6px 0; color:var(--c-muted)}
    .mega a:hover{color:#fff}

    /* Ouverture stable : hover + focus-within */
    @media (hover:hover){
      .menu > li.has-mega:hover .mega{display:block}
      .menu > li.has-mega:focus-within .mega{display:block}
      .menu > li.has-mega .mega:hover{display:block} /* garde ouvert pendant le déplacement */
    }

    /* ===== Mobile drawer ===== */
    .nav--mobile{display:none}
    .nav__panel{
      position:fixed; inset:0 0 0 25%;
      background:var(--c-surface-2); color:var(--c-text);
      transform:translateX(100%); transition:transform .25s ease; z-index:90;
      padding:16px 16px 24px; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--c-border);
    }
    .nav__panel[aria-hidden="false"]{transform:translateX(0)}
    .nav__close{
      align-self:flex-end; border:1px solid var(--c-border); background:transparent; color:var(--c-text);
      border-radius:10px; padding:8px 10px; cursor:pointer; margin-bottom:8px;
    }
    .menu--mobile{flex-direction:column; align-items:flex-start; gap:6px}
    .accordion{width:100%; border:1px solid var(--c-border); border-radius:12px; overflow:hidden; background:var(--c-surface)}
    .accordion__btn{width:100%; text-align:left; padding:12px 14px; background:transparent; border:0; color:var(--c-text); font-weight:700; cursor:pointer}
    .accordion__panel{display:none; padding:0 14px 12px}
    .accordion__panel a{display:block; padding:8px 0; color:var(--c-muted)}
    .accordion[aria-expanded="true"] .accordion__panel{display:block}

    /* ===== Hero & cartes ===== */
    .hero{padding:64px 20px; background:var(--c-surface)}
    .hero__inner{max-width:var(--container); margin:auto; display:grid; gap:28px; grid-template-columns:1.1fr .9fr; align-items:center}
    .hero h1{font-family:'Montserrat',sans-serif; font-size:clamp(1.8rem,2.6vw,2.6rem); line-height:1.2; margin:0 0 10px}
    .hero p{max-width:58ch; color:var(--c-muted)}
    .btn{display:inline-flex; align-items:center; gap:8px; background:var(--c-accent); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700}
    .btn:hover{background:var(--c-accent-press)}
    .hero__art{border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); background:#1114; display:flex; align-items:center; justify-content:center; padding:14px}

    .section{padding:40px 20px}
    .container{max-width:var(--container); margin:auto}
    .grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .card{border:1px solid var(--c-border); border-radius:var(--radius); padding:14px; background:var(--c-surface); transition:transform .2s ease}
    .card:hover{transform:translateY(-3px)}
    .card h3{font-family:'Montserrat',sans-serif; font-size:1.05rem; margin:10px 0 8px; color:#fff}
    .card .card__meta{font-size:.9rem; color:var(--c-muted); margin-bottom:10px}
    .card .btn{font-size:.9rem; padding:10px 14px}

    /* ===== Footer ===== */
    .footer{background:var(--c-surface-2); color:var(--c-muted); padding:22px 20px; margin-top:30px; border-top:1px solid var(--c-border)}
    .footer__inner{max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
    .footer a{color:var(--c-muted)}
    .footer a:hover{color:#fff}

    /* ===== Responsive ===== */
    @media (max-width:980px){
      .nav--desktop{display:none}
      .nav--mobile{display:block}
      .hero__inner{grid-template-columns:1fr}
      .logo img{height:53px}             /* taille logo mobile */
    }

    /* Accessibilité focus */
    :focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:8px}