/* ==========================================================
   MENU DEROULANT SANS jQuery - remplace ddsmoothmenu.js
   A ajouter dans css/more.css (ou nouveau fichier lié après)
   ========================================================== */

/* Force l'image de fond a rester responsive, meme si screen.js lui
   applique une largeur fixe en pixels (calculee au chargement) qui
   peut ne plus correspondre a l'ecran apres une rotation portrait/paysage */
#background {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Neutralise tout positionnement/float herite du theme sur
   l'ensemble du contenu de la page (titre, sous-titre, paragraphes,
   sections...) qui causait un decalage horizontal a certaines
   largeurs d'ecran intermediaires. Les marges ne sont pas touchees
   pour ne pas casser le centrage (margin:auto) utilise ailleurs. */
.pagetitle,
.pagetitle * {
  position: static !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

/* Empeche le sous-titre de flotter a cote du h1 (bug visible sur
   certaines largeurs d'ecran intermediaires ou .subtitle herite
   d'un float du theme d'origine) */
.pagetitle .subtitle,
.pagetitle h1 {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 0 15px 0 !important;
  text-align: left !important;
}

/* Force le titre et les paragraphes d'intro a toujours respecter
   la largeur de l'ecran et a revenir a la ligne normalement (evite
   le texte qui deborde en une seule ligne continue, notamment en
   mode paysage sur smartphone). IMPORTANT : on force "width" et pas
   seulement "max-width", car une regle du theme fixe une largeur
   explicite de 300px sur certains paragraphes (ex: .lead) - et
   max-width seul ne peut jamais agrandir une largeur deja plus
   petite que lui. */
.pagetitle,
.pagetitle h1,
.pagetitle h2,
.pagetitle h3,
.pagetitle .subtitle,
.pagetitle .lead,
.pagetitle p,
.pagetitle ul,
.pagetitle blockquote {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal !important;
}

/* Reset de base pour le menu et les sous-menus */
.cleanmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cleanmenu > ul {
  display: flex;
  flex-wrap: wrap;
}

.cleanmenu > ul > li {
  position: relative;
}

/* Sous-menus caches par defaut */
.cleanmenu ul ul {
  display: none;
}

/* ---------- DESKTOP (survol) ---------- */
@media (min-width: 769px) {
  /* Marge entre les liens du premier niveau */
  #mainmenu.cleanmenu > ul > li {
    margin-right: 4px;
  }

  #mainmenu.cleanmenu > ul > li > a {
    display: inline-flex;
    align-items: center;
  }

  /* Petite fleche pour signaler un sous-menu (desktop) */
  #mainmenu.cleanmenu > ul > li:has(> ul) > a::after {
    content: "\25BE"; /* ▾ */
    margin-left: 6px;
    font-size: 0.75em;
  }

  /* IMPORTANT necessaire pour surcharger d'anciennes regles
     du theme (ex: .ddsmoothmenu ul ul{display:none !important}
     ou visibility/opacity pilotees a l'origine par ddsmoothmenu.js) */
  #mainmenu.cleanmenu ul ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    z-index: 1000;
    padding: 6px 0;
  }

  #mainmenu.cleanmenu ul ul li {
    width: 100%;
  }

  #mainmenu.cleanmenu ul ul a {
    display: block;
    padding: 10px 16px;
    white-space: nowrap;
    color: #fff;
  }

  #mainmenu.cleanmenu ul ul a:hover {
    background: #b3121f; /* a adapter a votre rouge de marque */
  }

  /* Affiche le sous-menu au survol OU au clavier (accessibilite) */
  #mainmenu.cleanmenu > ul > li:hover > ul,
  #mainmenu.cleanmenu > ul > li:focus-within > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ---------- GRAND ECRAN uniquement (PC/tablette large) ----------
   Empeche "Galerie" de passer a la ligne. On limite ceci aux ecrans
   larges pour eviter le debordement horizontal sur un smartphone
   en mode paysage (largeur souvent 700-900px, superieure a 768px
   mais insuffisante pour caser tout le menu sur une seule ligne). */
@media (min-width: 1000px) {
  .cleanmenu > ul {
    flex-wrap: nowrap !important;
  }

  .cleanmenu > ul > li {
    flex-shrink: 0;
  }
}

/* ---------- MOBILE (clic / accordeon) ---------- */
@media (max-width: 768px) {
  .cleanmenu > ul {
    flex-direction: column;
  }

  /* Petite fleche pour les items qui ont un sous-menu (detection automatique) */
  .cleanmenu > ul > li:has(> ul) > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cleanmenu > ul > li:has(> ul) > a::after {
    content: "\25BE"; /* ▾ */
    margin-left: 10px;
    font-size: 0.8em;
    transition: transform 0.2s ease;
  }

  .cleanmenu > ul > li.open > a::after {
    transform: rotate(180deg);
  }

  .cleanmenu ul ul {
    background: #111;
  }

  .cleanmenu ul ul a {
    padding-left: 30px; /* leger decalage visuel du sous-menu */
    color: #eee;
  }

  /* Le sous-menu s'affiche seulement quand le parent a la classe .open */
  .cleanmenu > ul > li.open > ul {
    display: block !important;
  }
}