: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; position: relative;}    
    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; font-weight: bold;}
    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: 1400px; background-color: #fff;}
/* Conteneur flex */
.hero-flex { display: flex; width: 100%; flex-wrap: wrap; }
/* Titre */
.hero-title { flex: 1 1 100px; min-height: 150px; display: flex; align-items: center; margin: 0; padding: 12px; background-color: #007a6f; }
.hero-title h1 { color: #fff; font-size: 46px; }
/* 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; }
}

/*RESUME*/
/* Conteneur principal */
.resume-container { margin: auto; max-width: 100%; padding: 0; }
/* Titre */
.resume-title { margin: auto; width: 100%; background-color: #fff; text-align: center; }
/* Conteneur flex responsive */
.resume-flex { display: flex; flex-wrap: wrap;  width: 100%; max-width: 1400px; margin: 0 auto; padding: 12px; align-items: flex-start; }

/* Image */
.resume-image {
  flex: 0 0 450px; min-height: 450px; min-width: 450px; margin-right: 10px;  margin-bottom: 10px; }
.resume-image img {
  width: 100%; max-width: 450px; height: auto;  object-fit: cover; display: block; margin: 0 auto; }
/* Texte */
.resume-text {
  flex: 1; width: 100%; min-width: 300px; margin: 0 10px 10px 10px; background-color: #fff; padding: 12px; }
.resume-map {
  flex: 0 0 300px; min-height: 300px; max-width: 300px; margin-left: 10px;
  margin-bottom: 10px;  background-color: #f0f0f0; border-radius: 4px; overflow: hidden; }

/* Adaptation pour les écrans larges (tablette horizontale et desktop) */
@media (max-width: 1023px) {
  .resume-image { max-height: 350px; max-width: 350px; margin: 10px;}
  .resume-image img { max-width: 350px; margin: 10px; }
  .resume-text { max-width: 350px; margin: 10px; }
  .resume-map { flex: 1 1 100%; margin: 10px 0; } }

/* Conteneur du diaporama */
#resumeSlider { position: relative; overflow: hidden; flex: 0 0 300px; height: 300px; margin-right: 20px; }
/* Slides du diaporama */
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* Modale */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow: auto; }
.modal-content { margin: auto; display: block; max-width: 90%; max-height: 90%; margin-top: 5%; }
.close-modal { position: absolute; top: 20px; right: 30px; color: white; font-size: 35px; font-weight: bold; cursor: pointer; }
/* Flèches de navigation dans la modale */
.prev-modal, .next-modal { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 40px; font-weight: bold; cursor: pointer; user-select: none; padding: 0 10px;  background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; }
.prev-modal { left: 20px; }
.next-modal { right: 20px; }
.prev-modal:hover, .next-modal:hover { background-color: rgba(0, 0, 0, 0.8); }
/* Bloc de la carte */
.resume-map { flex: 1 1 300px; min-height: 300px; margin: 10px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden;}

/* Adaptation pour les écrans moyens et petits */
@media (max-width: 767px) {
  .resume-map { flex: 1 1 100%; max-width: 340px; margin: 10px; }
}


/* 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; }

/* ARIANE */
#ariane { font-size: 14px; color: #fff; background: #001935; border-bottom: #fff solid 1px; padding: 8px 0; margin: 0;}
#ariane a { color: #fff; text-decoration: underline; }
#ariane a:hover { color: #e9c46b; }

/* GENERALITES */
.contenu-general { width: 100%; max-width: 1400px; margin: 0 auto; background-color: #e9c46b; display: flex; padding: 0px; box-sizing: border-box; }
.text-column { flex: 55%; padding: 15px; box-sizing: border-box; }
.image-column { flex: 45%; padding: 0px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.image-column img { max-width: 100%; height: auto; }
/* Mode responsive */
@media (max-width: 768px) {
  .contenu-general { flex-direction: column;}
  .text-column,
  .image-column { flex: 100%; }
  .image-column { margin-top: 20px; order: 2; }
.text-column { order: 1;}
}

.carte { width: 100%; margin: 0 auto; background-color: #001935; display: flex; padding: 0px; box-sizing: border-box; display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;}

/* BANDE BG CUT */
#bg-cut {width: 100%; min-height: 300px; margin: 0;  padding: 0; background-size:contain ; background-position: center; background-repeat: no-repeat;}
@media (max-width: 768px) { #bg-cut {  display: none; } }

/* INTERNAL SECTION */
.section-container { max-width: 1400px; margin: 0 auto; padding: 20px; background-color: #fff; }
.content-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }
.content-box { flex: 1; min-width: 250px; padding: 20px; background-color: #f5f5f5; border-radius: 8px; }
@media (max-width: 768px) { .content-box { flex: 100%; } }

/* SECTION CHAPITRE */
.chapitre {  display: flex; flex-direction: column; max-width: 1000px; padding: 0; margin: 0 auto; width: 100%; }
/* Conteneur pour l'icône et le titre */
.chapitre-contenu { display: flex; align-items: center; gap: 15px; padding: 0; margin: 0; margin-top: 20px; background-color: #001935;}
/* Style pour l'icône */
.chapitre-icone { margin: 0; padding: 0; max-width: 120px; height: auto; }
/* Style pour le titre h2 */
.chapitre-titre {
    margin: 0; padding: 0; color: white; letter-spacing: 3px; text-transform: uppercase; }
.chapitre-titre a { text-decoration: none; color: inherit; transition: text-decoration 0.3s ease; letter-spacing: 3px; text-transform: uppercase; }
.chapitre-titre a:hover { text-decoration: underline; }
/* Style pour le texte */
.chapite-text { max-width: 1000px; background-color: white; margin: 0 auto; padding: 20px; box-sizing: border-box; }
/* Gestion du mode responsive */
@media (max-width: 768px) {
    .chapitre-icone { max-width: 60px; }
    .chapitre-contenu {
        flex-direction: column; align-items: flex-start; gap: 10px; }
    .chapitre { max-width: 100%; }
    .chapite-text { max-width: 100%; padding: 15px; }
}
/* Style général pour la liste des chapitres */
.chapitre-liste { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1400px; margin: 0 auto; background-color: #007a6f;  width: 100%;}
.liste-item { display: flex; flex-direction: column; align-items: center; width: 140px; margin: 10px; text-align: center; }
.liste-icone { width: 120px; height: auto; }
.liste-item a { text-decoration: none; color: inherit; }
.liste-item h4 { color: white; margin: 10px 0 0; }
.liste-item h4 a { color: white; text-decoration: none; transition: text-decoration 0.3s; font-weight: lighter; letter-spacing: 2px;}
.liste-item h4 a:hover { text-decoration: underline;  }

@media (max-width: 768px) {
    .liste-item { width: 80px; }
    .liste-icone { width: 60px; height: auto; }
    .liste-item h4 { font-size: 0.9em;  }
}


/* IMAGES CONTENUS */
/* Style de l'image dans le contenu */
#img-content { cursor: pointer; width: 300px; height: 300px; object-fit: cover;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); }

/* Style du modal (fond opaque noir) */
#full { display: none; position: fixed; top: 0; left: 0; width: 100%;  height: 100%;
    background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; text-align: center;
}
#full-img {  max-width: 90%; max-height: 90%; margin: auto; display: block; margin-top: 50px; }
.back {  position: absolute; top: 20px; right: 20px; color: white; background: none; border: none; font-size: 24px; cursor: pointer; }

/* Style de la croix pour fermer */
.back { position: absolute; top: 20px; right: 30px; background-color: #001935; color: white; font-size: 35px; font-weight: bold; cursor: pointer; }

/*SLIDE SHOW*/
/* Slideshow container: full width, fixed height */
.slideshow-section { width: 100%; height: 460px; overflow: hidden; position: relative; background: #000; }
.slideshow-list { list-style: none;margin: 0; padding: 0; height: 100%; width: 100%; position: relative; }
.slideshow-list li {
  position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.02); transition: opacity 1s ease, transform 1s ease;  will-change: opacity, transform; z-index: 1; }
.slideshow-list li.active { opacity: 1; transform: scale(1); z-index: 2; }
.slideshow-list img { width: 100%;  height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }

.slide-hero-title {
  position: absolute;  z-index: 3; bottom: 20px; left: 0; right: 0; text-align: center; color: white;
  font-size: 2rem; padding: 10px; background-color: rgba(0, 0, 0, 0.5); margin: 0 auto; max-width: 60%; border-radius: 5px; }

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