@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
/* ==========================================================
   DIOUS.FR - Custom CSS for Cassiopeia (Joomla 6)
   Version 7 — Menu en position "menu", aligné à droite du logo
   
   IMPORTANT : Dans le backend, le module Menu doit être
   en position "menu" (pas "topbar")
   ========================================================== */

/* ----------------------------------------------------------
   1. VARIABLES
   ---------------------------------------------------------- */
:root {
  --dious-primary: #47c1a8;
  --dious-primary-dark: #3baa94;
  --dious-primary-light: #e8f8f4;
  --dious-secondary: #333333;
  --dious-text: #424242;
  --dious-text-light: #888888;
  --dious-bg: #ffffff;
  --dious-bg-alt: #f5f5f5;
  --dious-border: #e0e0e0;
}

/* ----------------------------------------------------------
   2. LISERÉ TURQUOISE HAUT + BAS
   ---------------------------------------------------------- */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background-color: var(--dious-primary);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

body {
  padding-top: 5px;
}

body::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background-color: var(--dious-primary);
}

/* ----------------------------------------------------------
   3. BASE — Fond texturé
   ---------------------------------------------------------- */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dious-text);
  background: #FDFDFD url('/images/templates/s5_bg.jpg');
  line-height: 1.7;
}

/* Fond blanc + ombre uniquement sur <main> */
main {
  background-color: var(--dious-bg);
  padding: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: var(--dious-secondary);
}

a { color: var(--dious-primary); transition: color 0.2s ease; }
a:hover { color: var(--dious-primary-dark); text-decoration: none; }

/* ----------------------------------------------------------
   4. HEADER — Logo gauche, menu aligné à droite (même ligne)
   Fond transparent pour laisser voir la texture du body
   ---------------------------------------------------------- */

.container-header nav {
  margin-top: 0 !important;
}

/* Le header : fond TRANSPARENT (texture visible) */
header.container-header,
header.container-header.full-width {
  background-color: transparent !important;
  background: transparent !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0.8rem 0 !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: none !important;
  grid-column: 1 / -1 !important;
}

/* Les enfants du header sur une seule ligne */
header.container-header > .grid-child {
  flex-shrink: 0;
}

/* Menu : prend l'espace restant mais ne pousse pas à l'extrême droite */
header.container-header > .grid-child.container-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0; /* empêche le débordement */
}

/* Logo : taille */
.navbar-brand img {
  max-height: none;
  width: 150px;
  height: auto;
  display: block;
}

/* ----------------------------------------------------------
   5. NAVIGATION — Desktop horizontal à droite, Mobile hamburger
   ---------------------------------------------------------- */

/* Écrans moyens : réduire l'espacement du menu */
@media (min-width: 992px) and (max-width: 1199px) {
  .mod-menu > li > a,
  .metismenu > li > a {
    padding: 0.8rem 0.4rem !important;
    font-size: 0.85rem;
  }
}

/* La navbar : pas de fond, pas de bordure */
.container-nav nav.navbar,
nav.navbar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ===== DESKTOP (>= 992px) ===== */
@media (min-width: 992px) {
  /* Le collapse est toujours visible en desktop */
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  /* Masquer le hamburger en desktop */
  .navbar-toggler {
    display: none !important;
  }

  /* Le menu : horizontal, aligné à droite */
  .mod-menu,
  .navbar-collapse > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Les items du menu en ligne */
  .mod-menu > li,
  .metismenu > li {
    display: inline-block !important;
    float: none !important;
  }

  /* Liens du menu — taille adaptative pour éviter le débordement */
  .mod-menu > li > a,
  .metismenu > li > a {
    color: var(--dious-secondary) !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0.8rem 0.7rem !important;
    display: block;
    background: transparent !important;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
  }

  /* Survol */
  .mod-menu > li > a:hover,
  .metismenu > li > a:hover {
    color: var(--dious-primary) !important;
    background-color: transparent !important;
    border-bottom-color: var(--dious-primary);
  }

  /* Actif */
  .mod-menu > li.current > a,
  .mod-menu > li.active > a,
  .metismenu > li.current > a,
  .metismenu > li.active > a {
    color: var(--dious-primary) !important;
    background-color: transparent !important;
    border-bottom-color: var(--dious-primary);
  }
}

/* ===== MOBILE / TABLETTE (< 992px) ===== */
@media (max-width: 991.98px) {

  /* Header : logo + hamburger sur une ligne */
  header.container-header,
  header.container-header.full-width {
    flex-wrap: wrap !important;
    position: relative;
    max-width: 100% !important;
    padding: 0.8rem 1rem !important;
    width: 100% !important;
  }

  /* Logo : conserver les proportions sur mobile */
  .navbar-brand img {
    width: auto;
    max-width: 100px;
    height: auto !important;
    max-height: none !important;
  }

  /* Logo prend sa place à gauche */
  header.container-header > .grid-child:first-child {
    flex: 0 0 auto;
    margin-right: auto;
  }

  /* Container nav : juste le hamburger à droite */
  header.container-header > .grid-child.container-nav {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* La navbar en flex pour le hamburger à droite */
  nav.navbar {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  /* === Bouton hamburger visible et stylé === */
  .navbar-toggler {
    display: block !important;
    background-color: var(--dious-secondary) !important;
    border: 1px solid var(--dious-border) !important;
    border-radius: 4px;
    padding: 6px 10px !important;
    cursor: pointer;
    order: -1;
    z-index: 100;
  }

  /* Icône hamburger visible (blanc sur fond sombre) */
  .navbar-toggler .icon-menu::before {
    color: #ffffff !important;
    font-size: 1.4rem;
  }

  /* === CORRECTION MetisMenu : forcer le menu replié === */
  .navbar-collapse {
    display: none !important;
    width: 100%;
    order: 10;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-collapse.collapsing {
    display: block !important;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  /* Le menu en liste verticale quand ouvert */
  .navbar-collapse .mod-menu,
  .navbar-collapse ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    background-color: var(--dious-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .navbar-collapse .mod-menu > li {
    display: block !important;
    border-bottom: 1px solid var(--dious-border);
  }

  .navbar-collapse .mod-menu > li:last-child {
    border-bottom: none;
  }

  .navbar-collapse .mod-menu > li > a {
    color: var(--dious-secondary) !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.8rem 1.2rem !important;
    display: block;
    background: transparent !important;
    text-decoration: none;
    border-bottom: none;
  }

  .navbar-collapse .mod-menu > li > a:hover,
  .navbar-collapse .mod-menu > li.current > a,
  .navbar-collapse .mod-menu > li.active > a {
    color: var(--dious-primary) !important;
    background-color: var(--dious-primary-light) !important;
  }
}

/* Dropdown sous-menus (desktop + mobile) */
.dropdown-menu {
  background-color: var(--dious-bg);
  border: 1px solid var(--dious-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dropdown-item { color: var(--dious-secondary) !important; }
.dropdown-item:hover {
  color: var(--dious-primary) !important;
  background-color: var(--dious-primary-light) !important;
}

.navbar-toggler { border-color: var(--dious-border) !important; }
.navbar-toggler-icon { filter: none !important; }

/* ----------------------------------------------------------
   5b. PAGE D'ACCUEIL — Masquer le bloc main vide
   ---------------------------------------------------------- */
body.itemid-101 main {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

body.itemid-101 .main-top.card {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

body.itemid-101 .main-top .card-body {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* ----------------------------------------------------------
   6. FIL D'ARIANE — FOND BLANC
   ---------------------------------------------------------- */
.mod-breadcrumbs,
nav[aria-label="Breadcrumbs"],
.container-breadcrumbs,
nav.mod-breadcrumbs__wrapper {
  background-color: var(--dious-bg) !important;
  font-size: 0.85rem;
  color: var(--dious-text-light);
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.mod-breadcrumbs a { color: var(--dious-primary); }

/* ----------------------------------------------------------
   7. ARTICLE — IMAGE FLOTTANTE GAUCHE + OMBRE
   ---------------------------------------------------------- */
.com-content-article .item-image {
  float: left;
  max-width: 45%;
  margin: 0 1.5rem 1rem 0;
}

/* Ombre + padding sur la balise <figure> */
.com-content-article .item-image figure,
.com-content-article figure.item-image {
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background-color: var(--dious-bg);
}

.com-content-article .item-image img {
  border-radius: 2px;
  width: 100%;
  height: auto;
  display: block;
}

.com-content-article .com-content-article__body::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767.98px) {
  .com-content-article .item-image {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

.com-content-article .com-content-article__body img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin: 0.5rem 0;
}

/* Titre */
.com-content-article h1,
.com-content-article h2,
.page-header h1 {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dious-secondary);
  margin-bottom: 1rem;
}

.article-info {
  font-size: 0.8rem;
  color: var(--dious-text-light);
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------
   8. BLOG LAYOUT — 2 colonnes, titre en haut, image gauche, texte droite
   ---------------------------------------------------------- */

/* Chaque article du blog */
.com-content-category-blog .blog-items .blog-item,
.blog .items-row .item {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--dious-border);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

/* Titre toujours en premier, pleine largeur */
.com-content-category-blog .blog-item h2,
.com-content-category-blog .blog-item .page-header,
.blog .items-row .item h2 {
  width: 100%;
  order: -1;
}

.com-content-category-blog h2 a,
.blog-item h2 a {
  color: var(--dious-secondary);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 400;
}

.com-content-category-blog h2 a:hover { color: var(--dious-primary); }

/* Image flottante à gauche sous le titre */
.com-content-category-blog .item-image {
  float: left;
  max-width: 40%;
  margin: 0 1.5rem 1rem 0;
  order: 0;
}

/* Ombre + padding sur figure dans les pages catégorie */
.com-content-category-blog .item-image figure,
.com-content-category-blog figure.item-image {
  padding: 10px;
  margin: 0 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background-color: var(--dious-bg);
}

.com-content-category-blog .item-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Texte à droite de l'image */
.com-content-category-blog .blog-item > div:not(.item-image):not(.page-header),
.com-content-category-blog .blog-item p,
.com-content-category-blog .blog-item .readmore {
  order: 1;
}

/* Texte commence 5px plus bas */
.com-content-category-blog .item-content > p:first-of-type {
  margin-top: 5px;
}

@media (max-width: 767.98px) {
  .com-content-category-blog .item-image {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* Lire la suite */
.readmore a {
  color: var(--dious-primary);
  font-weight: 600;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
}

.readmore a:hover {
  color: var(--dious-primary-dark);
  text-decoration: underline;
}

/* ----------------------------------------------------------
   9. MODULES (sidebar + page d'accueil)
   ---------------------------------------------------------- */
aside, .container-aside {
  background-color: transparent;
}

/* Le card global : pas de fond, pas de bordure, pas d'ombre */
.card,
aside .card,
aside .module,
.container-aside .module {
  background-color: transparent;
  border: none;
  margin-bottom: 1.5rem;
  overflow: visible;
  box-shadow: none;
}

/* Titre h3 : sans fond, sans contour, juste le texte */
h3.card-header,
aside h3,
aside .card-header,
.container-aside h3 {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--dious-secondary) !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 0;
  margin: 0;
  border: none !important;
  box-shadow: none;
}

/* Corps du module : fond blanc + ombre visible sur les 4 côtés */
.card-body {
  background-color: var(--dious-bg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  margin: 5px;
}

aside ul { list-style: none; padding: 0; margin: 0; }
aside ul li {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--dious-border);
  font-size: 0.9rem;
}
aside ul li:last-child { border-bottom: none; }
aside ul li a { color: var(--dious-text); text-decoration: none; }
aside ul li a:hover { color: var(--dious-primary); }

/* ----------------------------------------------------------
   Module "Qui sommes nous ?" — style ancien site
   Ajouter classe "qui-sommes-nous" dans Avancé > Classe CSS du module
   
   Images à copier depuis l'ancien site vers /images/templates/ :
   - s5_top_tear.png
   - s5_bottom_tear.png
   - s5_row2_mods.png
   ---------------------------------------------------------- */

/* Zone wrapper sombre autour du module — pleine largeur fenêtre */
.qui-sommes-nous {
  background-color: #2C2C2C;
  background-image: url('/images/templates/bokeh.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 48px 1.5rem 26px;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 1.5rem);
  padding-right: calc(50vw - 50% + 1.5rem);
}

/* Effet papier déchiré en haut */
.qui-sommes-nous::before {
  content: "";
  display: block;
  width: 100%;
  height: 24px;
  background: url('/images/templates/s5_top_tear.png') repeat-x top left;
  position: absolute;
  top: 0;
  left: 0;
}

/* Effet papier déchiré en bas */
.qui-sommes-nous::after {
  content: "";
  display: block;
  width: 100%;
  height: 24px;
  background: url('/images/templates/s5_bottom_tear.png') repeat-x bottom left;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Titre du module */
.qui-sommes-nous .card-header {
  color: #FFFFFF !important;
  font-size: 2.2em;
  font-weight: 400;
  padding-bottom: 8px;
  margin-bottom: 30px;
  border-bottom: dotted 3px #FFFFFF !important;
  background: transparent !important;
}

/* Corps du module : fond semi-transparent avec image ou fallback */
.qui-sommes-nous .card-body {
  background: url('/images/templates/s5_row2_mods.png'), rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: 30px;
  margin: 0;
  border-radius: 8px;
  color: #FFFFFF !important;
}

/* Image flottante à gauche */
.qui-sommes-nous .card-body img {
  float: left;
  max-width: 45%;
  margin: 0 20px 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Liens en blanc */
.qui-sommes-nous .card-body a {
  color: #FFFFFF !important;
}

/* Clear float */
.qui-sommes-nous .card-body::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767.98px) {
  .qui-sommes-nous .card-body img {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* ----------------------------------------------------------
   10. FOOTER
   ---------------------------------------------------------- */
.container-footer, footer {
  background-color: var(--dious-bg) !important;
  color: var(--dious-text-light);
  padding: 1.5rem 0;
  font-size: 0.85rem;
  border-top: 1px solid var(--dious-border);
}

footer a { color: var(--dious-primary); }
footer .container p { margin: 0; text-align: center; }

/* ----------------------------------------------------------
   11. PAGINATION
   ---------------------------------------------------------- */
.pagination .page-link { color: var(--dious-primary); border-color: var(--dious-border); }
.pagination .page-item.active .page-link {
  background-color: var(--dious-primary);
  border-color: var(--dious-primary);
  color: #fff;
}
.pagination .page-link:hover {
  background-color: var(--dious-primary-light);
  color: var(--dious-primary-dark);
}

/* ----------------------------------------------------------
   12. SOCIAL ICONS
   ---------------------------------------------------------- */
.social-icons { text-align: center; padding: 1rem; }
.social-icons a { display: inline-block; margin: 0 0.5rem; }
.social-icons a:hover { opacity: 0.7; }
.social-icons img { width: 40px; height: 40px; }

/* ----------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------- */

/* Vidéos YouTube responsive pleine largeur */
.video-container {
  position: relative;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden;
  margin: 1rem 0;
}

.video-container iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}
@media (max-width: 575.98px) {
  .page-header h1 { font-size: 1.3rem; }

  .container-component > *,
  .container-main > main,
  .com-content-article,
  .com-content-category-blog,
  .container-component {
    padding: 1rem;
  }

  /* Logo un peu plus petit sur petit écran */
  .navbar-brand img {
    max-height: 60px;
  }
}