/*!
Theme Name: Adiral Formation
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: adiral-association
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Adiral Association is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

.wave-background {
    background-image: url('./assets/images/wave2.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

.clignote {
  animation: clignoter 1.2s infinite alternate;
}

.top-bar a:nth-child(4) {
  background: #A3C65E;
  color: #fff;
}

.top-bar a:nth-child(5) {
  background: #304F8F;
  color: white;
}

@keyframes clignoter {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}

body { font-family: 'Onest', sans-serif; }
        
/* Animation pour les menus déroulants */
.dropdown-menu, .submenu {
  transform-origin: top;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scaleY(0);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.dropdown-menu.show, .submenu.show {
  opacity: 1;
  transform: scaleY(1);
  max-height: 500px;
  visibility: visible;
}

/* Hauteur fixe pour les sous-menus avec images */
.submenu {
  min-height: 350px;
}

/* Animation pour les éléments du menu */
.dropdown-menu li, .submenu li {
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.2s ease;
  transition-delay: 0.1s;
}

.dropdown-menu.show li, .submenu.show li {
  transform: translateY(0);
  opacity: 1;
}

.dropdown-menu.show li:nth-child(1), .submenu.show li:nth-child(1) { transition-delay: 0.1s; }
.dropdown-menu.show li:nth-child(2), .submenu.show li:nth-child(2) { transition-delay: 0.15s; }
.dropdown-menu.show li:nth-child(3), .submenu.show li:nth-child(3) { transition-delay: 0.2s; }

/* Rotation de la flèche quand le menu est ouvert */
.menu-item.active i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* Largeur dynamique pour les sous-menus */
.submenu {
  width: calc(100vw - 312px);
}

/* Soulignement pour l'élément de menu actif */
.menu-item.active {
  position: relative;
}

.menu-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #304F8F;
  animation: slideIn 0.3s ease;
  transform-origin: left;
}

.menu-item:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #304F8F;
  transition: width 0.3s ease;
  transform-origin: left;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}


#main-menu p:hover::after {
  width: 100%;
}

/* Soulignement animé pour les liens des sous-menus */
.submenu a {
  position: relative;
  text-decoration: none;
}

.submenu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #304F8F;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.submenu a:hover::after {
  width: 100%;
}

/* Icône flèche dans un cercle */
.submenu a::before {
  content: '';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('./assets/images/arrow-right-circle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
}

.submenu a:hover::before {
  opacity: 1;
  right: 0px;
}

/* Styles pour la navigation qui se transforme au scroll */
header {
  transition: height 0.3s ease;
  height: auto;
}

header.collapsed {
  height: 80px;
}

/* État collapsed (après scroll) - uniquement sur desktop */
header.collapsed .top-bar {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  header.collapsed .logo-container {
    transform: scale(0.65);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header.collapsed .main-menu {
    transform: none;
    margin-top: 0;
    border-top: none;
    height: 80px;
  }
}

/* Transitions pour les éléments */
.top-bar {
  transition: all 0.3s ease;
}

.logo-container {
  transition: transform 0.3s ease, height 0.3s ease;
}

.main-menu {
  transition: all 0.3s ease;
}

.w-full {
  transition: height 0.3s ease;
}

/* Ajustement de la position des menus déroulants en mode collapsed */
header.collapsed .dropdown-menu,
header.collapsed .submenu {
  top: 79px !important;
}

body.admin-bar header {
    margin-top: 32px; /* Hauteur de la barre d'admin sur desktop */
}

@media screen and (max-width: 782px) {
    body.admin-bar header {
        margin-top: 46px; /* Hauteur de la barre d'admin sur mobile/tablette */
    }
}

/* Styles pour le menu nos-sites dynamique */
.nos-sites-menu li a {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: #000;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.nos-sites-menu li a:hover {
  background-color: #f3f4f6;
}

.nos-sites-menu li:first-child a {
  color: #304F8F;
}

.nos-sites-menu li a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 12px;
  background-image: url('./assets/images/arrow-right.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.2s;
}

.nos-sites-menu li:first-child a::before {
  opacity: 1;
}

.nos-sites-menu li a:hover::before {
  opacity: 1;
}

/* Classe spéciale pour l'élément highlight du top-menu */
.highlight-green {
  background-color: #BED056 !important;
}

.highlight-green:hover {
  background-color: #f3f4f6 !important;
}

/* ================================================================
   STYLES POUR LE CONTENU DES ARTICLES/PAGES - ADIRAL ASSOCIATION
================================================================ */

/* Variables CSS pour Adiral */
:root {
    --adiral-turquoise: #304F8F;
    --adiral-dark: #0f8a8c;
    --adiral-darker: #0d7a7c;
    --primaire-color: #304F8F;
}

/* Styles pour les listes à puces dans le contenu des articles/pages */
.entry-content ul:not([class]),
.comment-content ul:not([class]),
.widget-content ul:not([class]),
.prose ul,
.prose-gray ul,
.prose-lg ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.entry-content ul:not([class]) li,
.comment-content ul:not([class]) li,
.widget-content ul:not([class]) li,
.prose ul li,
.prose-gray ul li,
.prose-lg ul li {
    position: relative !important;
    padding-left: 1.2rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    list-style: none !important;
}

.entry-content ul:not([class]) li::before,
.comment-content ul:not([class]) li::before,
.widget-content ul:not([class]) li::before,
.prose ul li::before,
.prose-gray ul li::before,
.prose-lg ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0.2rem !important;
    top: 0.45rem !important;
    width: 0.4rem !important;
    height: 0.4rem !important;
    background-color: var(--adiral-turquoise) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

/* Styles pour les listes numérotées dans le contenu des articles/pages */
.entry-content ol:not([class]),
.comment-content ol:not([class]),
.widget-content ol:not([class]),
.prose ol,
.prose-gray ol,
.prose-lg ol {
    counter-reset: adiral-counter !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.entry-content ol:not([class]) li,
.comment-content ol:not([class]) li,
.widget-content ol:not([class]) li,
.prose ol li,
.prose-gray ol li,
.prose-lg ol li {
    counter-increment: adiral-counter !important;
    position: relative !important;
    padding-left: 3rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    list-style: none !important;
}

.entry-content ol:not([class]) li::before,
.comment-content ol:not([class]) li::before,
.widget-content ol:not([class]) li::before,
.prose ol li::before,
.prose-gray ol li::before,
.prose-lg ol li::before {
    content: counter(adiral-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 0.875rem !important;
    width: 2rem !important;
    height: 2rem !important;
    background: linear-gradient(135deg, var(--adiral-turquoise), var(--adiral-dark)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

/* Règles spécifiques pour surpasser Tailwind Typography complètement */
.prose.prose-gray.prose-lg ul,
.prose.prose-gray ul,
.prose.prose-lg ul,
div[class*="prose"] ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 1rem !important;
}

.prose.prose-gray.prose-lg ul li,
.prose.prose-gray ul li,
.prose.prose-lg ul li,
div[class*="prose"] ul li {
    position: relative !important;
    padding-left: 1.2rem !important;
    margin-bottom: 0.75rem !important;
    list-style: none !important;
    color: #000000 !important;
}

.prose.prose-gray.prose-lg ul li::before,
.prose.prose-gray ul li::before,
.prose.prose-lg ul li::before,
div[class*="prose"] ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0.2rem !important;
    top: 0.45rem !important;
    width: 0.4rem !important;
    height: 0.4rem !important;
    background-color: var(--adiral-turquoise) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

.prose.prose-gray.prose-lg ol,
.prose.prose-gray ol,
.prose.prose-lg ol,
div[class*="prose"] ol {
    counter-reset: adiral-counter !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 1.5rem !important;
}

.prose.prose-gray.prose-lg ol li,
.prose.prose-gray ol li,
.prose.prose-lg ol li,
div[class*="prose"] ol li {
    counter-increment: adiral-counter !important;
    position: relative !important;
    padding-left: 3rem !important;
    margin-bottom: 1rem !important;
    list-style: none !important;
    color: #000000 !important;
}

.prose.prose-gray.prose-lg ol li::before,
.prose.prose-gray ol li::before,
.prose.prose-lg ol li::before,
div[class*="prose"] ol li::before {
    content: counter(adiral-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 0.875rem !important;
    width: 2rem !important;
    height: 2rem !important;
    background: linear-gradient(135deg, var(--adiral-turquoise), var(--adiral-dark)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

/* Styles pour les paragraphes dans le contenu des articles/pages */
.entry-content p,
.comment-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: #000000;
}

/* Styles pour les titres dans le contenu des articles/pages */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Styles pour les liens dans le contenu des articles/pages */
.entry-content a:not([class]),
.comment-content a:not([class]) {
    color: var(--adiral-turquoise) !important;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.entry-content a:not([class]):hover,
.comment-content a:not([class]):hover {
    color: var(--adiral-dark) !important;
    text-decoration: none;
}

/* Styles pour les blockquotes dans le contenu des articles/pages */
.entry-content blockquote,
.comment-content blockquote {
    border-left: 4px solid var(--adiral-turquoise);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background-color: rgba(18, 163, 165, 0.05);
    border-radius: 0.5rem;
    font-style: italic;
    color: #000000;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Styles pour les images dans le contenu des articles/pages */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
}

/* Styles pour les tables dans le contenu des articles/pages */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background-color: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.entry-content table th {
    background: linear-gradient(135deg, var(--adiral-turquoise), var(--adiral-dark));
    color: white;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
}

.entry-content table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #000000;
}

.entry-content table tr:hover {
    background-color: rgba(18, 163, 165, 0.05);
}

/* Styles pour les codes dans le contenu des articles/pages */
.entry-content code {
    background-color: #f3f4f6;
    color: var(--adiral-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.entry-content pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Responsive pour le contenu des articles/pages */
@media (max-width: 768px) {
    .entry-content ul:not([class]),
    .entry-content ol:not([class]) {
        margin-left: 0.5rem !important;
    }
    
    .entry-content ul:not([class]) li {
        padding-left: 1rem !important;
    }
    
    .entry-content ol:not([class]) li {
        padding-left: 2.5rem !important;
    }
    
    .entry-content h1 { font-size: 1.875rem; }
    .entry-content h2 { font-size: 1.5rem; }
    .entry-content h3 { font-size: 1.25rem; }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
  }
  40% {
      transform: translateY(-10px) translateX(-50%);
  }
  60% {
      transform: translateY(-5px) translateX(-50%);
  }
}

.scroll-indicator {
  animation: scrollBounce 2s infinite;
  cursor: pointer;
  z-index: 20;
}

.scroll-indicator:hover {
  animation-play-state: paused;
}

/* --- Cercles décoratifs pour la page Gouvernance --- */
.circle-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  filter: blur(0.5px);
  animation: floatCircle 8s ease-in-out infinite alternate;
}

.circle-deco-1 {
  width: 180px; height: 180px;
  background: #304F8F;
  top: 120px; left: -60px;
  animation-delay: 0s;
}
.circle-deco-2 {
  width: 120px; height: 120px;
  background: #304F8F;
  bottom: 80px; right: 40px;
  animation-delay: 2s;
}
.circle-deco-3 {
  width: 80px; height: 80px;
  background: #304F8F;
  top: 60%; left: 60%;
  animation-delay: 4s;
}
.circle-deco-hero {
  width: 300px; height: 300px;
  background: #304F8F;
  left: 60%; top: 0;
  opacity: 0.10;
  z-index: 0;
  animation-delay: 1s;
}
.circle-deco-ca {
  width: 140px; height: 140px;
  background: #304F8F;
  left: 70%; top: 80%;
  opacity: 0.13;
  animation-delay: 3s;
}
.circle-deco-valeurs {
  width: 90px; height: 90px;
  background: #304F8F;
  right: -30px; bottom: 10px;
  opacity: 0.10;
  animation-delay: 2.5s;
}
@keyframes floatCircle {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-20px) scale(1.04); }
}

/* --- Encadrés doux sans ombre --- */
.bg-white\/15, .bg-white\/80, .bg-white {
  box-shadow: none !important;
  transition: background 0.3s;
}

/* Désactive le scale au hover sur les boutons et éléments interactifs */
.scroll-indicator > div,
[class*="hover:scale-"] {
  transform: none !important;
  transition: background 0.3s, color 0.3s;
}

/* Optionnel : effet de survol plus doux sur les liens principaux */
.scroll-indicator > div:hover,
.inline-flex.items-center.text-\[#304F8F\]:hover {
  background: #0f8a8c22;
  color: #0f8a8c;
}

/* Cercle décoratif pour le bloc de transition entre CA et Bureau */
.circle-deco-transition {
  width: 70px; height: 70px;
  background: #304F8F;
  left: 40%; top: 60%;
  opacity: 0.12;
  animation-delay: 2.2s;
}

/* --- Footer Adiral --- */
.footer-adiral {
  background: #304F8F;
  color: #fff;
  position: relative;
  margin-top: 0;
}
.footer-adiral .footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  color: #fff;
}
.footer-adiral .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-adiral .footer-links li {
  margin-bottom: 0.7rem;
}
.footer-adiral .footer-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
  transition: color 0.2s;
  opacity: 0.92;
}
.footer-adiral .footer-links a:hover {
  color: #e0f7fa;
  opacity: 1;
  text-decoration: underline;
}
.footer-adiral img {
  filter: brightness(0) invert(1);
  max-width: 600px;
}
.footer-adiral .circle-deco-footer-1 {
  width: 180px; height: 180px;
  background: #304F8F;
  left: -60px; bottom: -60px;
  opacity: 0.10;
  z-index: 0;
  position: absolute;
  animation: floatCircle 10s ease-in-out infinite alternate;
}
.footer-adiral .circle-deco-footer-2 {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, #fff 0%, #0f8a8c 100%);
  right: -40px; top: -40px;
  opacity: 0.10;
  z-index: 0;
  position: absolute;
  animation: floatCircle 12s ease-in-out infinite alternate;
}
.footer-adiral .text-xs {
  font-size: 0.85rem;
}
@media (max-width: 900px) {
  .footer-adiral .max-w-7xl {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .footer-adiral .max-w-7xl {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  .footer-adiral img {
    margin-bottom: 1.5rem;
  }
  .footer-adiral .footer-title {
    margin-top: 1.5rem;
  }
}

.nos-sites-dropdown {
  display: block;
  position: absolute;
  z-index: 200;
  min-width: 300px;
  padding: 0;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
}

.nos-sites-dropdown.hidden {
  display: none !important;
}

/* Bouton Button-51 avec couleurs jaunes Adiral */
.button-51 {
  background-color: transparent;
  border: 2px solid black;
  box-sizing: border-box;
  color: black;
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  padding: 18px 32px;
  position: relative;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block;
  transition: all 300ms ease-in;
}

.button-51:hover,
.button-51:active {
  border: 2px solid black;
  color: black;
}


.button-51:before {
  background-color: #f4b938;
  content: "";
  height: calc(100% + 6px);
  position: absolute;
  right: -8px;
  top: -10px;
  transition: background-color 300ms ease-in;
  width: 100%;
  z-index: -1;
}


@media (min-width: 768px) {
  .button-51 {
    padding: 20px 40px;
    font-size: 20px;
  }
}



/* Slider hero : n'affiche que le slide actif (hauteur pilotée par le contenu) */
#hero-slider .slide {
  display: none;
}

#hero-slider .slide.active {
  display: block;
}

/* Vagues animées pour le hero slider */
.hero-waves-container {
  position: absolute;
  text-align: center;
  background: transparent;
  color: white;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.hero-waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /* Fix for safari gap */
  min-height: 100px;
  max-height: 150px;
}

/* Animation des vagues */
.hero-parallax > use {
  animation: hero-move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.hero-parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.hero-parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.hero-parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.hero-parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes hero-move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Shrinking for mobile */
@media (max-width: 768px) {
  .hero-waves {
    height: 40px;
    min-height: 40px;
  }

  .scroll-indicator {
    display: none;
  }
}

.top-bar a:nth-child(3) {
  background: #f4b938;
  color: #fff;
}