:root{--accent:#007a6f;--bg:#89777d;--muted:#666}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.4;margin:0;color:#fff;background:var(--bg)}
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #fff; background-color: #001935;}
    .brand{display:flex;gap:12px;align-items:center}
    .brand img{height:80px}
    nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
    nav li{background-color: #e9c46b;}    
    nav li :hover{background-color: #007a6f;}
    nav li a{display:block;padding:8px 12px;color:#001935 ;text-decoration:none;font-weight:600;}
    .lang-toggle{display:flex;gap:8px;align-items:center}
    .flag{width:28px;height:18px;cursor:pointer}
    main{padding:0px;margin:0 auto}
    #map{height:360px;border:1px solid #ddd;background:#f6f6f6}
    footer{background:#001935;padding:18px;border-top:1px solid #eee;margin-top:24px}
    .footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
    a{color:var(--accent);text-decoration:none; color:#007a6f;}
    a:hover{text-decoration:underline}
    .hidden{display:none}
    @media(max-width:700px){nav ul{display:none}}

h1,h2,h3{color:#001935;margin-top:1.2em;margin-bottom:0.6em;font-weight:600}
    h1{font-size:2em}
    h2{font-size:1.5em}
    h3{font-size:1.2em}
    p{margin-top:0;margin-bottom:1em; color: #001935;}
    ul,ol{margin-top:0;margin-bottom:1em;padding-left:1.5em}
    button {  background: #e9c46b; color: #000; border: none; padding: 10px 16px; cursor: pointer; font-size: 1em; }

button:hover, button a:hover { background: #007a6f; color: #fff; }
/*HERO*/
/* Conteneur principal */
.hero-container { margin: auto;max-width: 1200px; background-color: #fff;}

/* Conteneur flex */
.hero-flex { display: flex; width: 100%; flex-wrap: wrap; }

/* Titre */
.hero-title { flex: 1 1 80px; min-height: 150px; display: flex; align-items: center; margin: 0; padding: 12px; background-color: #007a6f; }

.hero-title h1 { color: #fff; }

/* Texte */
.hero-text { flex: 1 1 300px; min-height: 150px; display: flex; align-items: center; margin: 10px; }

/* Image */
.hero-image { flex: 1 1 100px; min-height: 150px; margin: 0;}

.hero-image img { width: 100%; height: 100%; object-fit: cover;}

/* Dernière colonne vide */
.hero-empty { flex: 1 1 80px; min-height: 150px; margin: 0; background-color: #007a6f; }

/* Responsive : masquer les deux dernières colonnes en mobile */
@media (max-width: 768px) {
  .hero-image,
  .hero-empty {  display: none; }
}
/* FOCUS grid */
.focus-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 12px; max-width: 1100px; margin:0 auto; }
@media (min-width:700px) {
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1100px) {
  .focus-grid { grid-template-columns: repeat(3, 1fr); }
}

.focus-grid { display: grid;  gap: 18px; grid-template-columns: 1fr; margin-top: 12px;}
@media (min-width:700px) { .focus-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1100px) { .focus-grid { grid-template-columns: repeat(3,1fr); } }

.focus-card {
  background:#fff;border:1px solid #e6e6e6;overflow:hidden;
  display:flex;flex-direction:column;min-height:280px;box-shadow:0 1px 6px rgba(0,0,0,0.04);
}
.focus-card img { width:100%; height:160px; object-fit:cover; display:block; }
.focus-card .card-body { padding:12px; flex:1 1 auto; display:flex; flex-direction:column; }
.focus-card h3 { margin:0 0 8px 0; font-size:1.05rem; }
.focus-card p { margin:0 0 12px 0; color:#444; flex:1 1 auto; }
.more-btn { display:inline-block; padding:8px 12px; background:#e9c46b; color:#000; text-decoration:none; font-weight:600; align-self:flex-start; }
.more-btn:hover { background:#2a9d8f; color:#fff; text-decoration: none;}
.hidden { display:none !important; }

/* --- base menu (desktop) --- */
.main-menu { list-style:none; margin:0; padding:0; display:flex; gap:12px; align-items:center; }
.main-menu > li { position:relative; color: #001935; font-weight: 600;}
.main-menu > li :hover { color: #fff; text-decoration: none;}
.menu-toggle {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 8px 6px;
  color: #001935;
}

/* sous-menu (desktop) */
.submenu {
  position: absolute;
  left: 0;
  top: calc(100% + 0px);
  min-width: 200px;
  background: #e9c46b;
  border: 1px solid #e9c46b;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 8px 0;
  display: none;
  z-index: 40;
}
.submenu li { padding: 0; margin: 2px;}
.submenu a { display:block; padding:8px 14px; color:#222; text-decoration:none; }
.submenu a:hover, .submenu a:focus { background:#007a6f; color: #fff; }
.has-submenu.open > .submenu { display:block; }

/* hidden helper */
.hidden { display:none !important; }

/* --- Hamburger button --- */
.hamburger-toggle {
  display: none; /* shown on mobile via media query */
  background: none;
  border: 2px; border-radius: 4px; border-style: solid; border-color: #e9c46b;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  color: #e9c46b;
  align-items: center;
}
.hamburger-box { display:inline-block; width:28px; height:20px; position:relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  display:block;
  background:#e9c46b;
  height:2px;
  width:100%;
  border-radius:2px;
  position:absolute;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger-inner { top:50%; transform: translateY(-50%); }
.hamburger-inner::before { content:''; top:-8px; }
.hamburger-inner::after { content:''; top:8px; }
/* open state */
.hamburger-toggle[aria-expanded="true"] .hamburger-inner { transform: rotate(45deg); }
.hamburger-toggle[aria-expanded="true"] .hamburger-inner::before { transform: rotate(-90deg) translateX(-6px); top:0; }
.hamburger-toggle[aria-expanded="true"] .hamburger-inner::after { opacity:0; }

/* --- Mobile styles (hamburger replaces stack) --- */
@media (max-width:800px) {
  /* show hamburger */
  .hamburger-toggle { display:inline-flex; }

  /* hide desktop menu by default */
  .main-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #007a6f;
    padding: 12px;
    width: 90%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    position: absolute;
    left: 0;
    top: 74px; /* adjust to header height */
    z-index: 60;
    max-height: calc(100vh - 64px);
    overflow: auto;
    transform-origin: top;
    transition: transform .22s ease, opacity .18s ease;
  }

  /* visible when mobile-open */
  .main-menu.mobile-open { display:flex; }

  /* make submenu static and indented */
  .submenu {
    position: static;
    box-shadow:none;
    border:0;
    padding-left:12px;
    display:none;
    background: transparent;
  }
  .has-submenu.open > .submenu { display:block; }

  /* menu items full width */
  .main-menu > li { width:100%; }
  .main-menu a, .main-menu button.menu-toggle { width:90%; text-align:left; padding: 10px 14px; }

  /* optional overlay when menu open */
  .nav-mobile-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 50;
    pointer-events: auto;
  }
}


/* VIDEO PLAYER */
/* Basic layout */
.custom-player { max-width: 900px; margin: 0 auto; background:#000; color:#fff; font-family:system-ui,Segoe UI,Roboto,Arial; position:relative; }
.cp-video { width:100%; display:block; background:#000; height:auto; }

/* Controls bar */
.cp-controls { display:flex; align-items:center; gap:12px; padding:10px; background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2)); position:relative; }
.cp-left { display:flex; align-items:center; gap:8px; }
.cp-right { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Buttons */
.cp-btn { background:transparent; border:0; color:inherit; padding:6px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cp-btn:focus { outline:2px solid #fff; outline-offset:2px; }

/* Icon visibility toggles */
.icon-pause { display:none; }
.playing .icon-play { display:none; }
.playing .icon-pause { display:inline-block; }

/* Time */
.cp-time { font-size:13px; color:#ddd; margin-left:6px; }

/* Progress bar */
.cp-progress-wrap { flex:1 1 auto; padding:0 8px; }
.cp-progress { position:relative; height:10px; background:rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; display:block; }
.cp-progress-buffer { position:absolute; left:0; top:0; bottom:0; width:0%; background:rgba(255,255,255,0.12); border-radius:6px; }
.cp-progress-played { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#2a9d8f,#2a7d8f); border-radius:6px; }
.cp-handle { position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.4); pointer-events:auto; }

/* Make handle easier to hit on touch */
@media (pointer:coarse) {
  .cp-handle { width:22px; height:22px; }
}

/* Hide default video controls */
.cp-video::-internal-media-controls { display:none; }

/* Fullscreen adjustments */
.custom-player.fullscreen { position:fixed; inset:0; z-index:9999; background:#000; }

/*SLIDE SHOW*/
/* Slideshow container: full width, fixed height */
.slideshow-section {
  width: 100%;
  height: 460px;
  overflow: hidden;
  position: relative;
  background: #000;
}

/* Reset list */
.slideshow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Each slide occupies full container and stacks on top of each other */
.slideshow-list li {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: block;
  opacity: 0;
  transform: scale(1.02); /* slight scale for nicer crossfade */
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
  z-index: 1;
}

/* Active slide visible */
.slideshow-list li.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Image fills the slide and keeps aspect ratio (cover) */
.slideshow-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* clicks don't affect autoplay */
  user-select: none;
}

/* Optional: reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slideshow-list li,
  .slideshow-list li.active {
    transition: none;
  }
}