/*!
Theme Name: Adiral Assistance V2
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: #343844;
  color: #fff;
}

.top-bar a:nth-child(5) {
  background: #d95a3b;
  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 {
  position: relative;
}

.menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #d95a3b;
  transition: width 0.3s ease;
}

.menu-item.active::after {
  width: 100%;
}


#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: #d95a3b;
  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) */
header.collapsed .top-bar {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
  margin: 0;
  padding: 0;
}

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

/* Transition fluide pour la barre mobile */
#mobile-header-bar {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Masquer la barre mobile quand le menu est ouvert */
.mobile-menu-open #mobile-header-bar {
  display: none !important;
}

/* S'assurer que le logo desktop est masqué sur mobile */
@media (max-width: 767px) {
  .logo-container {
    display: none !important;
  }

  /* Double vérification pour le logo desktop */
  header .logo-container {
    display: none !important;
  }

  /* S'assurer que la barre mobile reste visible */
  #mobile-header-bar {
    display: flex !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: #d95a3b;
}

.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: #d95a3b;
  --adiral-dark: #0f8a8c;
  --adiral-darker: #0d7a7c;
}

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

.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: linear-gradient(135deg, #d95a3b 60%, #0f8a8c 100%);
  top: 120px;
  left: -60px;
  animation-delay: 0s;
}

.circle-deco-2 {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #0d7a7c 60%, #d95a3b 100%);
  bottom: 80px;
  right: 40px;
  animation-delay: 2s;
}

.circle-deco-3 {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #d95a3b 60%, #0f8a8c 100%);
  top: 60%;
  left: 60%;
  animation-delay: 4s;
}

.circle-deco-hero {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #fff 0%, #d95a3b 100%);
  left: 60%;
  top: 0;
  opacity: 0.10;
  z-index: 0;
  animation-delay: 1s;
}

.circle-deco-ca {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #0f8a8c 60%, #d95a3b 100%);
  left: 70%;
  top: 80%;
  opacity: 0.13;
  animation-delay: 3s;
}

.circle-deco-valeurs {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #fff 60%, #d95a3b 100%);
  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-\[#d95a3b\]:hover {
  background: #0f8a8c22;
  color: #d95a3b;
}

/* Cercle décoratif pour le bloc de transition entre CA et Bureau */
.circle-deco-transition {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #fff 60%, #d95a3b 100%);
  left: 40%;
  top: 60%;
  opacity: 0.12;
  animation-delay: 2.2s;
}

/* --- Footer Adiral --- */
.footer-adiral {
  background: #d95a3b;
  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: linear-gradient(135deg, #fff 0%, #d95a3b 100%);
  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 {
  color: white;
  background-color: transparent;
  border: 2px solid black;
  box-sizing: border-box;
  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: white;
}


.button-51:before {
  background-color: #343844;
  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;
  }
}

/* ================================================================
   STYLES POUR LES CONSEILS SANTÉ - ADIRAL ASSOCIATION
================================================================ */

/* Styles pour les articles de conseils santé */
.conseil-sante-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.conseil-sante-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animation pour les images des articles */
.conseil-sante-card img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.conseil-sante-card:hover img {
  transform: scale(1.05);
}

/* Styles pour les badges de catégorie */
.category-badge {
  position: relative;
  overflow: hidden;
}

.category-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.conseil-sante-card:hover .category-badge::before {
  left: 100%;
}

/* Styles pour les métadonnées d'article */
.article-meta {
  transition: color 0.3s ease;
}

.article-meta:hover {
  color: var(--adiral-turquoise);
}

/* Styles pour les liens d'articles */
.article-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.article-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--adiral-turquoise);
  transition: width 0.3s ease;
}

.conseil-sante-card:hover .article-link::after {
  width: 100%;
}

/* Styles pour les boutons de filtres */
.filter-button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.filter-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.filter-button:hover::before {
  left: 100%;
}

/* Styles pour la pagination */
.pagination-button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pagination-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 90, 59, 0.3);
}

/* Styles pour les formulaires */
.newsletter-input {
  transition: all 0.3s ease;
}

.newsletter-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 90, 59, 0.1);
  border-color: var(--adiral-turquoise);
}

/* Styles pour les articles individuels */
.article-hero {
  background: linear-gradient(135deg, rgba(217, 90, 59, 0.05) 0%, rgba(15, 138, 140, 0.05) 100%);
}

.article-content {
  line-height: 1.8;
}

.article-content h2 {
  color: var(--adiral-turquoise);
  border-bottom: 2px solid rgba(217, 90, 59, 0.2);
  padding-bottom: 0.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

.article-content h3 {
  color: var(--adiral-dark);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Styles pour les blockquotes dans les articles */
.article-content blockquote {
  border-left: 4px solid var(--adiral-turquoise);
  background: linear-gradient(135deg, rgba(217, 90, 59, 0.05) 0%, rgba(15, 138, 140, 0.05) 100%);
  border-radius: 0 0.5rem 0.5rem 0;
  position: relative;
}

.article-content blockquote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-size: 4rem;
  color: var(--adiral-turquoise);
  opacity: 0.3;
  font-family: serif;
}

/* Styles pour les listes dans les articles */
.article-content ul li::before {
  background: linear-gradient(135deg, var(--adiral-turquoise), var(--adiral-dark));
}

.article-content ol li::before {
  background: linear-gradient(135deg, var(--adiral-turquoise), var(--adiral-dark));
}

/* Styles pour les liens dans les articles */
.article-content a {
  color: var(--adiral-turquoise);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.article-content a:hover {
  color: var(--adiral-dark);
  border-bottom-color: var(--adiral-dark);
}

/* Styles pour la sidebar */
.sidebar-widget {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid rgba(217, 90, 59, 0.1);
  transition: all 0.3s ease;
}

.sidebar-widget:hover {
  border-color: rgba(217, 90, 59, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Styles pour les articles connexes */
.related-article {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.related-article:hover {
  background-color: rgba(217, 90, 59, 0.05);
  transform: translateX(4px);
}

/* Styles pour les boutons de partage social */
.social-share-button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-share-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.social-share-button:hover::before {
  left: 100%;
}

.social-share-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Animation pour les éléments qui apparaissent au scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Styles responsive pour les conseils santé */
@media (max-width: 768px) {
  .conseil-sante-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-hero h1 {
    font-size: 2rem;
  }

  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .sidebar-widget {
    margin-top: 2rem;
  }
}

/* Styles pour les états de chargement */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Styles pour les notifications */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--adiral-turquoise);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.notification.show {
  transform: translateX(0);
}

.notification.success {
  background: #10b981;
}

.notification.error {
  background: #ef4444;
}

/* ========================================
   SLIDER SIMPLE
   ======================================== */

.slider-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-x: hidden;
  overflow-y: visible;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  opacity: 0;
}

.slide.active {
  opacity: 1;
}

.slider-dot {
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background-color: white !important;
}

.slider-dot:hover {
  background-color: white !important;
}

/* ========================================
   SLIDER PRESTATIONS
   ======================================== */

#prestations-slider-container {
  position: relative;
}

#prestations-slider {
  display: flex;
  align-items: stretch;
}

#prestations-slider>div {
  flex-shrink: 0;
  display: flex;
}

/* S'assurer que toutes les cartes ont la même hauteur */
#prestations-slider .group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: -180px;
  left: 0;
}

.wave {
  background: url('./assets/images/wave.svg') repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }

  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {

  0%,
  100% {
    transform: translate3d(0, -25px, 0);
  }

  50% {
    transform: translate3d(0, 5px, 0);
  }
}


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

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