/* ==========================================================
   RESET & BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif;
  background:#f7f7f7;
  color:#1a1a1a;
  line-height:1.6;
}

img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

a{ color:inherit; text-decoration:none; }
p, li, .section p, .card p, .message-blue{ text-align:justify; }

/* ==========================================================
   HEADER & NAVIGATION (DESKTOP)
   ========================================================== */
header{
  position:fixed;
  top:0; left:0;
  width:100%;
  background: linear-gradient(135deg, #00202A, #01455A);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index:1000;
}

.nav-container{
  max-width:1200px;
  margin:auto;
  padding: 14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
}

.logo img{
  width:151px;
  height:137px;
  object-fit:contain;
}

.main-nav{ position:relative; }

/* UL racine menu */
.menu-root{
  list-style:none;
  display:flex;
  gap: 25px;
  margin:0;
  padding:0;
  align-items:center;
}

.menu-root > li{ position:relative; }

.main-nav a{
  color:#c7e9f4;
  font-weight:500;
  font-size:15px;
  padding: 6px 4px;
  display:inline-block;
}

.main-nav a:hover{ color:#fff; }

/* ---------- Sous-menu desktop ---------- */
.submenu-desktop{
  position:absolute;
  top: 34px;
  left: 0;
  background:#003240;
  min-width: 230px;
  border-radius: 8px;
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  padding: 10px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.menu-root > li:hover > .submenu-desktop,
.menu-root > li:focus-within > .submenu-desktop{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* pont anti “perte hover” */
.submenu-desktop::before{
  content:"";
  position:absolute;
  top:-16px;
  left:0;
  width:100%;
  height:16px;
}

.submenu-desktop li{ padding: 6px 18px; }
.submenu-desktop li a{
  color:#c7e9f4;
  font-size:14px;
  display:block;
  padding: 4px 0;
}
.submenu-desktop li a:hover{ color:#fff; }

/* ---------- actions header ---------- */
.header-actions{
  display:flex;
  gap: 12px;
  align-items:center;
}

.theme-toggle{
  background: rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.4);
  padding: 6px 12px;
  border-radius: 999px;
  color:#fff;
  cursor:pointer;
  font-size:14px;
}
.theme-toggle:hover{ background: rgba(255,255,255,0.2); }

.hamburger{
  display:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
  background:none;
  border:none;
  line-height: 1;
  padding: 2px 6px;
}

/* ==========================================================
   LAYOUT
   ========================================================== */
main{ padding-top: 210px; }

.section{
  background:#fff;
  max-width:1200px;
  margin: 25px auto;
  padding: 40px 30px;
  border-radius: 8px;
}

.section h2{
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
  color:#00202A;
  position:relative;
}

.section h2::after{
  content:"";
  width:60px;
  height:4px;
  background:#17B9E8;
  border-radius:3px;
  margin-top:10px;
  display:block;
}

.section h3{ margin-top:25px; margin-bottom:10px; color:#00202A; }

.section-hero{ text-align:center; }
.section-hero-inner{ max-width: 900px; margin: 0 auto; text-align:center; }
.section-hero-inner p{ text-align:center; }
/* ==========================================================
   HERO — COULEUR + ESPACE INTERNE
   ========================================================== */
.section-hero{
  background: #C9E8F2;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Dark mode hero */
body.dark-mode .section-hero{
  background:#0f1f26;
}
.section-line-dark{ position:relative; padding-left:70px; }
.section-line-dark::before{
  content:"";
  position:absolute;
  top:30px;
  bottom:30px;
  left:30px;
  width:6px;
  background:#01455A;
  border-radius:4px;
}

.section-soft{
  border:1px solid #e1eef5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.flex{ display:flex; gap:40px; flex-wrap:wrap; }
.flex .text{ flex: 1 1 55%; }
.flex .image{
  flex: 1 1 40%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.row{ display:flex; gap:30px; flex-wrap:wrap; }

.card{
  background:#fdfdfd;
  flex: 1 1 260px;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  transition: .25s ease;
  overflow:hidden;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.card-media{
  padding:12px;
  border-bottom: 1px solid #e3e3e3;
  text-align:center;
}

.card-title, .card h3{
  background:#00202A;
  color:#fff;
  padding:10px;
  margin:0;
  text-align:center;
  font-size:18px;
}

.card p, .card ul{ padding-left:18px; padding-right:18px; }
.card ul{ padding-left:34px; }

.breadcrumb{
  max-width:1200px;
  margin: 20px auto;
  padding: 0 20px;
  font-size:14px;
  color:#555;
}
.breadcrumb a{ color:#01455A; }
.breadcrumb span{ font-weight:700; color:#00202A; }

/* ==========================================================
   SIDEBARS (inchangées)
   ========================================================== */
.sidebar-container{
  position: fixed;
  top:190px;
  right:40px;
  width:260px;
  z-index:900;
}
.sidebar{
  background:#fff;
  border-radius:12px;
  padding:20px;
  border:1px solid #e0e0e0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  margin-bottom:20px;
}
.sidebar h3{
  margin:0;
  border-bottom:2px solid #17B9E8;
  padding-bottom:6px;
  color:#00202A;
}
.sidebar ul{ padding:0; list-style:none; margin-top:15px; }
.sidebar ul li{ margin-bottom:8px; }
.sidebar ul li a{ color:#01455A; font-weight:500; }
.sidebar ul li.active a{ font-weight:700; color:#17B9E8; }

@media(max-width:992px){
  .sidebar-container{ display:none; }
}

/* ==========================================================
   FOOTER (si besoin on corrigera après)
   ========================================================== */
footer{
  background: linear-gradient(135deg, #00202A, #01455A);
  color:#fff;
  padding:50px 20px;
  margin-top:60px;
}

.footer-columns{
  max-width:1200px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
}
.footer-col{ flex: 1 1 220px; }
.footer-col h4{
  border-bottom: 1px solid #17B9E8;
  padding-bottom:6px;
  margin-top:0;
}
.footer-col p{
  margin:6px 0;
  color:#cfeaf7;
  text-align:left;
}
footer > p{
  text-align:center;
  margin-top:15px;
  font-size:14px;
}

/* ==========================================================
   COOKIE BANNER
   ========================================================== */
.cookie-banner{
  position:fixed;
  bottom:0; left:0;
  width:100%;
  background:#fff;
  border-top:1px solid #e0e0e0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.15);
  z-index:2000;
  padding: 18px 20px;
  display:none;
}
.cookie-banner.active{ display:block; }

.cookie-banner-inner{
  max-width:1200px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}
.cookie-text{ flex: 1 1 65%; font-size:14px; line-height:1.5; color:#1a1a1a; }
.cookie-text a{ color:#01455A; text-decoration:underline; }
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-btn{
  padding:8px 14px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  border:none;
}
.cookie-btn.accept{ background:#17B9E8; color:#00202A; font-weight:700; }
.cookie-btn.refuse{ background:#e0e0e0; color:#1a1a1a; }

/* ==========================================================
   MOBILE MENU — DIAMOND FIX
   menu UL devient panneau FIXE, donc jamais hors écran
   ========================================================== */
@media(max-width:768px){

  .logo img{ width:120px; height:110px; }
  .hamburger{ display:block; }

  /* IMPORTANT : panneau menu FIXE, plus ABSOLU */
  .menu-root{
    display:none;
    flex-direction:column;
    background:#002834;
    padding: 12px 14px;
    border-radius: 14px;

    position: fixed;               /* ✅ FIXE */
    top: 88px;                     /* sous le header */
    right: 10px;                   /* collé à droite */
    left: auto;                    /* ✅ jamais à gauche */
    width: min(92vw, 380px);       /* ✅ large + safe */
    max-height: calc(100vh - 110px);
    overflow: auto;                /* ✅ scroll si long */

    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    gap:0;
    z-index: 3000;
  }

  .menu-root.open{ display:flex; }

  /* niveau 1 */
  .menu-root > li{
    width:100%;
    padding: 2px 0;
  }

  .menu-root > li > a{
    width:100%;
    display:block;
    text-align:left;
    padding: 11px 8px;
    font-size:15px;
    font-weight:800;
    color:#c7e9f4 !important;
  }

  .menu-root > li > a:hover{ color:#fff !important; }

  /* on masque les sous-menus hover desktop */
  .submenu-desktop{ display:none !important; }

  /* panels OFFRES / ABOUT */
  .offers-panel{ display:none; margin-top:6px; }
  .offers-panel.active{ display:block; }

  #main-menu.offers-mode > li:not(.offers-entry){ display:none !important; }
  #main-menu.about-mode  > li:not(.about-entry){ display:none !important; }

  #main-menu.offers-mode .offers-entry > a.offers-toggle{ display:none !important; }
  #main-menu.about-mode  .about-entry  > a.about-toggle { display:none !important; }

  .offers-back{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:#c7e9f4;
    padding: 10px 8px;
    font-weight:900;
    cursor:pointer;
    margin:0 0 6px 0;
    font-size:14px;
  }

  /* arbre mobile */
  .tree-mobile{
    list-style:none;
    padding: 0 8px 10px 8px;
    margin:0;
  }

  .tree-mobile .hub{ margin: 0 0 14px 0; }

  .tree-mobile .hub-link{
    display:block;
    padding: 8px 0 6px 0;
    font-weight:900;
    font-size:14px;
    color:#c7e9f4;
  }

  .tree-mobile .hub-children{
    list-style:none;
    padding: 0 0 0 14px;
    margin:0;
    border-left: 2px solid #17B9E8;
  }

  .tree-mobile .hub-children a{
    display:block;
    padding: 7px 0;
    font-size:13px;
    font-weight:500;
    line-height:1.2;
    color:#c7e9f4;
    white-space: normal;
    word-break: break-word;
  }
}

/* patch : pas de panels en desktop */
@media(min-width:769px){
  .offers-panel,
  #offersPanel,
  #aboutPanel,
  .offers-back,
  #offersBack,
  #aboutBack{ display:none !important; }
}

/* ==========================================================
   DARK MODE
   ========================================================== */
body.dark-mode{
  background:#0b1418;
  color:#f1f6f8;
}
body.dark-mode .section{
  background:#0f1f26;
  border-color: rgba(255,255,255,0.08);
}
body.dark-mode .section h2,
body.dark-mode .section h3{ color:#e8f6fb; }
body.dark-mode .card{ background:#0f1f26; }
body.dark-mode .breadcrumb{ color:#cfeaf7; }
body.dark-mode .breadcrumb a{ color:#17B9E8; }
body.dark-mode .sidebar{ background:#0f1f26; border-color: rgba(255,255,255,0.08); }
body.dark-mode .sidebar h3{ color:#e8f6fb; }
body.dark-mode .sidebar ul li a{ color:#cfeaf7; }
body.dark-mode .footer-col p{ color:#cfeaf7; }
/* ==========================================================
   FIX DEFINITIF : mobile-nav-hub
   - Caché à 100% sur desktop
   - Visible uniquement mobile
   - Bloc propre (pas dans le texte)
   ========================================================== */

/* Desktop : jamais visible */
.mobile-nav-hub{
  display: none !important;
}

/* Mobile : visible + bloc structuré */
@media (max-width: 768px){
  .mobile-nav-hub{
    display: block !important;
    background: #f3f8fb;
    padding: 16px 18px;
    margin: 18px 12px;
    border-left: 6px solid #17B9E8;
    border-radius: 10px;
  }

  .mobile-nav-hub p{
    margin: 0 0 10px 0;
    font-weight: 800;
    color: #00202A;
    text-align: left;
  }

  .mobile-nav-hub ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav-hub li{
    margin: 0;
    padding: 0;
  }

  .mobile-nav-hub a{
    display: block;
    padding: 6px 0;
    color: #01455A;
    font-weight: 600;
    text-align: left;
  }

  .mobile-nav-hub a.active-page{
    font-weight: 900;
    color: #17B9E8;
  }
}
/* ==========================================================
   ==========================================================
   PATCH FINAL — ACCORDÉON
   AUCUNE DÉPENDANCE HEADER / NAV / MENU
   AUCUNE ANIMATION DE LAYOUT
   TESTÉ POUR NE RIEN CASSER
   ==========================================================
   ========================================================== */

/* Conteneur général */
.accordion {
  margin: 30px 0;
}

/* Item */
.accordion-item {
  background: #ffffff;
  border: 1px solid #e1eef5;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden; /* SAFE : contenu masqué uniquement */
}

/* Header cliquable */
.accordion-header {
  padding: 16px 20px;
  background: #00202A;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

/* Contenu fermé */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Contenu ouvert (clé JS) */
.accordion-content.open {
  max-height: 9999px; /* volontairement large */
}

/* Padding interne FIXE (ne bouge jamais) */
.accordion-content > p,
.accordion-content > ul,
.accordion-content > ol,
.accordion-content > div {
  padding-left: 20px;
  padding-right: 20px;
}

.accordion-content > p:first-child,
.accordion-content > ul:first-child,
.accordion-content > ol:first-child,
.accordion-content > div:first-child {
  padding-top: 20px;
}

.accordion-content > p:last-child,
.accordion-content > ul:last-child,
.accordion-content > ol:last-child,
.accordion-content > div:last-child {
  padding-bottom: 20px;
}

/* Listes propres */
.accordion-content ul {
  margin: 10px 0;
  padding-left: 40px;
}

.accordion-content li {
  margin-bottom: 6px;
}

/* ==========================================================
   DARK MODE — ACCORDÉON (ISOLÉ)
   ========================================================== */

body.dark-mode .accordion-item {
  background: #0f1e25;
  border-color: #003040;
}

body.dark-mode .accordion-header {
  background: #003040;
  color: #e5f3ff;
}

body.dark-mode .accordion-content {
  color: #e5f3ff;
}

/* ==========================================================
   MOBILE — AUCUNE SURCHARGE (SAFE)
   ========================================================== */
@media (max-width: 768px) {
  .accordion-header {
    font-size: 15px;
  }
}
/* ==========================================================
   MESSAGE BLEU — PATCH SAFE (LOGIQUE 14-01)
   Aucun impact layout global
   Compatible section / card / accordion
   ========================================================== */

.message-blue {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  background: #e7f6ff;
  border-left: 5px solid #17B9E8;
  border-radius: 6px;

  padding: 16px 18px;
  margin: 24px 0;

  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* Icône (emoji ou span) */
.message-blue > span {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}

/* Contenu texte */
.message-blue > div {
  flex: 1 1 auto;
}

/* Paragraphes internes */
.message-blue p {
  margin: 6px 0;
}

/* ==========================================================
   DARK MODE — MESSAGE BLEU
   ========================================================== */

body.dark-mode .message-blue {
  background: #003040;
  border-left-color: #17B9E8;
  color: #e5f3ff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

body.dark-mode .message-blue p {
  color: #e5f3ff;
}

/* ==========================================================
   MOBILE — SAFE (PAS DE FLEX CASSÉ)
   ========================================================== */

@media (max-width: 768px) {
  .message-blue {
    padding: 14px 16px;
    gap: 10px;
  }

  .message-blue > span {
    font-size: 18px;
  }
}
/* ==========================================================
   CARD — PATCH SAFE (LOGIQUE 14-01)
   Aucun changement structurel
   Compatible row / section / sidebar / accordion
   ========================================================== */

/* Aération interne contrôlée (SAFE) */
.card p,
.card ul,
.card ol {
  padding-left: 18px;
  padding-right: 18px;
}

.card ul {
  padding-left: 34px; /* indentation propre des puces */
}

/* Respiration verticale cohérente */
.card p {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ==========================================================
   CARD — VARIANTE DOUCE (OPT-IN)
   Usage : <article class="card card-soft">
   ========================================================== */

.card.card-soft {
  background: #ffffff;
  border: 1px solid #e1eef5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Hover léger, identitaire (SAFE) */
.card.card-soft:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}

/* ==========================================================
   DARK MODE — CARD
   ========================================================== */

body.dark-mode .card {
  background: #0c161b;
  box-shadow: 0 3px 16px rgba(0,0,0,0.6);
}

body.dark-mode .card-title,
body.dark-mode .card h3 {
  background: #003a4a;
  color: #ffffff;
}

/* Variante soft en dark mode */
body.dark-mode .card.card-soft {
  background: #0f1e25;
  border-color: #003040;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

body.dark-mode .card.card-soft:hover {
  box-shadow: 0 14px 38px rgba(0,0,0,0.7);
}

/* ==========================================================
   MOBILE — AUCUN OVERRIDE STRUCTUREL (SAFE)
   ========================================================== */
@media (max-width: 768px) {
  .card {
    transform: none; /* évite les micro-sauts au scroll */
  }
}
/* ==========================================================
   MICRO CTA — CARDS (SAFE)
   ========================================================== */

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 12px;
  font-weight: 700;
  font-size: 14px;

  color: #01455A;
  text-decoration: none;
  transition: all 0.2s ease;
}

.card-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

.card-cta:hover {
  color: #17B9E8;
}

.card-cta:hover::after {
  transform: translateX(4px);
}

/* Dark mode */
body.dark-mode .card-cta {
  color: #cfeaf7;
}

body.dark-mode .card-cta:hover {
  color: #17B9E8;
}
/* ==========================================================
   CTA CARD — SOFT & STIMULANT (SAFE)
   ========================================================== */

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 14px;
  padding: 8px 14px;

  font-size: 14px;
  font-weight: 700;

  color: #01455A;
  background: rgba(23, 185, 232, 0.08);

  border-radius: 999px;
  text-decoration: none;

  transition: all 0.25s ease;
}

/* Flèche dynamique */
.card-cta::after {
  content: "→";
  font-weight: 800;
  transition: transform 0.25s ease;
}

/* Hover */
.card-cta:hover {
  background: rgba(23, 185, 232, 0.18);
  color: #00202A;
}

.card-cta:hover::after {
  transform: translateX(4px);
}

/* Dark mode */
body.dark-mode .card-cta {
  color: #cfeaf7;
  background: rgba(23, 185, 232, 0.15);
}

body.dark-mode .card-cta:hover {
  background: rgba(23, 185, 232, 0.28);
}
/* ==========================================================
   MISE EN VALEUR STATISTIQUES
   ========================================================== */

.stat-highlight{
  color:#C00000;
  font-weight:700;
  font-size:1.25em;
}
/* =========================================
   CTA SAFE — NEUTRE, SANS INTERFÉRENCE
   ========================================= */

.cta-safe {
  text-align: center;
  margin: 36px 0;
}

.cta-safe-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
  font-family: inherit;
}

/* BLEU */
.cta-safe-blue {
  background: #17B9E8;
  color: #00202A;
}
.cta-safe-blue:hover {
  background: #12a7d2;
  transform: translateY(-2px);
}

/* ROUGE */
.cta-safe-red {
  background: #E63946;
  color: #ffffff;
}
.cta-safe-red:hover {
  background: #c52d39;
  transform: translateY(-2px);
}

/* BLEU LIGHT */
.cta-safe-light {
  background: #e7f6ff;
  color: #01455A;
  border: 1px solid #17B9E8;
}
.cta-safe-light:hover {
  background: #d6effa;
  transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 768px) {
  .cta-safe { margin: 28px 0; }
  .cta-safe-btn { font-size: 15px; padding: 12px 20px; }
}
/* ==========================================================
   MOBILE — HIDE LOGO ON SCROLL (LIÉ AU JS)
   ========================================================== */
@media (max-width: 768px){
  header.logo-hidden .logo,
  header.logo-hidden .logo img{
    display: none !important;
  }
}
/* ==========================================================
   FIL D’ARIANE — POSITIONNEMENT SOUS HEADER
   ========================================================== */
.breadcrumb{
  position: relative;
  top: -60px;
  margin-bottom: -80px;
  z-index: 1;
}
/* ==========================================================
   NAVIGATION SEQUENTIELLE — HUB ACTION COMMERCIALE (SAFE)
   Aucun impact hors breadcrumb
   ========================================================== */

.breadcrumb .page-nav{
  display:inline-flex;
  gap:6px;
  margin-left:8px;
  vertical-align:middle;
}

.breadcrumb .page-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:18px;
  height:18px;

  border-radius:50%;
  font-size:15px;
  color:#fff;              /* override du lien breadcrumb */
  text-decoration:none;

  flex-shrink:0;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Bouton précédent */
.breadcrumb .nav-left{
  background:#d10000;
}
.breadcrumb .nav-left::before{
  content:"←";
}

/* Bouton suivant */
.breadcrumb .nav-right{
  background:#0057b8;
}
.breadcrumb .nav-right::before{
  content:"→";
}

.breadcrumb .page-nav a:hover{
  transform:scale(1.1);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Dark mode */
body.dark-mode .breadcrumb .nav-left{
  background:#ff4d4d;
}
body.dark-mode .breadcrumb .nav-right{
  background:#3aa3ff;
}