:root{
  --blue-night:#1f3d67;
  --orange:#ff9926;
  --white:#ffffff;
  --beige:#f6f0e8;
  --font-primary: "Arial Narrow", "Arial", sans-serif;
  --font-secondary: "Times New Roman", serif;
}

*{box-sizing:border-box}
body{font-family:var(--font-primary); margin:0; color:#222; background:var(--white); line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:1rem}
a{color:var(--blue-night); text-decoration:none}

/* Flash */
.flash{background:var(--beige);padding:.35rem 0;overflow:hidden; min-height:30px; line-height:30px;}
.flash-inner{
  white-space:nowrap;
  display:inline-block;
  padding-left:100%;
  animation:marquee 18s linear infinite;
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.logo{display:flex;align-items:center;gap:.6rem}
.logo-img{height:46px}
.slogan{display:block;font-style:italic;font-size:.85rem;color:#333}

/* Navigation desktop */
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav a{display:inline-block;padding:.5rem .6rem;text-decoration:none;color:var(--blue-night);font-weight:600}
.main-nav li{position:relative}
.main-nav li:hover > .sub{display:flex;flex-direction:column}

/* Sous-menu */
.main-nav .sub{display:none;position:absolute;top:100%;left:0;background:#fff;padding:.5rem;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.12);min-width:200px;z-index:10}

/* Extra nav (search) */
.nav-extras input{padding:.4rem .6rem;border:1px solid #ddd;border-radius:6px}

/* Hero */
.hero{display:flex;gap:1rem;padding-top:90px;padding-bottom:1rem}
.hero-left{flex:2}
.hero-right{flex:1;background:var(--beige);padding:1rem;border-radius:6px}

/* Slider */
.slider{position:relative;overflow:hidden;border-radius:6px}
.slide{display:none}
.slide.active{display:block}
.slide img{width:100%;height:320px;object-fit:cover}
.caption{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,0.45);color:#fff;padding:.4rem .6rem;border-radius:4px}

/* Slider controls */
.slider-controls{display:flex;gap:.5rem;margin-top:.4rem}
.slider-controls button{background:var(--blue-night);color:#fff;border:none;padding:.4rem .6rem;border-radius:4px}

/* Soft block */
.soft-block h3{margin-top:0}
.soft-items{display:flex;flex-direction:column;gap:.8rem}
.soft-line{display:flex;flex-direction:column;align-items:center;text-align:center}
.soft-line img{width:80%;height:80px;object-fit:cover;border-radius:6px}

/* Two-col */
.two-col{display:flex;gap:1rem;padding:2rem 0;flex-wrap:wrap}
.two-col .col{flex:1 1 45%}

/* Grid 4 */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.grid-4 article{background:#fff;border-radius:6px;padding:.8rem;box-shadow:0 6px 18px rgba(0,0,0,.04);text-align:center}
.grid-4 img{width:100%;height:140px;object-fit:cover;border-radius:6px}

/* Form */
label{display:block;margin:.6rem 0}
input, select, textarea{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:6px}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--blue-night);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:30px;text-decoration:none;font-weight:600;transition:background .3s, transform .2s; cursor:pointer}
.btn:hover{background:var(--orange);transform:translateY(-2px)}
.btn.small{padding:.35rem .6rem}
.btn.secondary{background:var(--orange)}
.btn.secondary:hover{background:var(--blue-night)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:6px}

/* Footer */
.site-footer{padding:1rem 0;background:var(--blue-night);color:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.socials a{color:#fff;margin-left:.4rem}

/* SIDEBAR DROITE */
.sidebar-right{position:fixed;right:0;top:100px;width:280px;background:#f9f9f9;border-left:2px solid var(--blue-night);height:calc(100% - 120px);overflow-y:auto;padding:1rem;box-shadow:-2px 0 6px rgba(0,0,0,0.1);z-index:900}
.sidebar-section{margin-bottom:1.5rem}
.sidebar-section h3{font-size:1.1rem;color:var(--blue-night);border-bottom:2px solid var(--orange);padding-bottom:.3rem;margin-bottom:.5rem}
.sidebar-section ul{list-style:none;padding:0;margin:0}
.sidebar-section ul li{margin-bottom:.6rem;display:flex;align-items:center}
.sidebar-section ul li a{flex:1;color:#333;text-decoration:none;font-size:.95rem}
.sidebar-section ul li a:hover{color:var(--orange)}
.partners img{width:100%;max-height:50px;object-fit:contain;margin-bottom:.5rem;border-radius:5px;border:1px solid #ddd;background:#fff}

/* Responsive général */
@media(max-width:1100px){
  .sidebar-right{position:static;width:100%;border-left:none;border-top:3px solid var(--blue-night);box-shadow:none;height:auto;margin-top:2rem}
  .sidebar-section h3{background:var(--blue-night);color:#fff;padding:.5rem;border:none;border-radius:5px}
  main{margin-right:0}
}

main{margin-right:300px}
@media(max-width:1100px){main{margin-right:0}}

/* HERO + Grilles responsive */
@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero{flex-direction:column;padding-top:120px}
  .two-col{flex-direction:column}
}

/* --- MENU MOBILE --- */
.hamburger{display:none;background:none;border:none;font-size:32px;cursor:pointer;color:var(--blue-night)}
@media(max-width:900px){
  .hamburger{display:block}
  .main-nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:90px;
    right:0;
    width:70%;
    background:white;
    padding:20px;
    border-left:2px solid var(--blue-night);
    border-bottom:2px solid var(--blue-night);
    z-index:1000;
    overflow:visible;
  }
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;gap:0}
  .nav-extras{display:none}

  .main-nav ul li.has-sub > a::after{content:"▼";float:right;margin-left:5px;font-size:0.7rem}
  .main-nav ul li.has-sub.open > .sub{display:flex;flex-direction:column;position:relative;box-shadow:none}
}
/* === MENU MOBILE === */
.menu-toggle {
  display: none; /* Caché sur PC */
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--blue-night);
  cursor: pointer;
}

@media (max-width: 900px) {
  /* Afficher le bouton burger */
  .menu-toggle {
    display: block; 
  }

  /* Cacher le menu par défaut */
  .main-nav ul {
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 100%; /* Juste en dessous du header */
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 1rem 0;
    text-align: center;
  }

  /* Quand la classe 'open' est ajoutée via JS, on affiche le menu */
  .main-nav.open ul {
    display: flex;
  }
  
  /* Ajustement des sous-menus pour mobile */
  .main-nav .sub {
    position: static; /* Plus de survol, on affiche en bloc */
    box-shadow: none;
    background: #f9f9f9;
    display: none; /* Caché par défaut */
  }
  
  /* Afficher sous-menu au clic (optionnel) ou toujours afficher sur mobile */
  .main-nav li:hover .sub {
    display: block;
  }
}