/* ===================================
   CSS BOILERPLATE
   =================================== */

/* ===================================
   FONT IMPORTS
   =================================== */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v19-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Variables CSS */
:root {
  --color-satin-black: #000a12;
  --color-slate-grey: #304248;
  --color-light-grey: #f5f7f9;
  --color-white: #fff;
  --color-patient: #ffca00;
  --color-manufacturing: #da3025;
  --color-education: #47ad4c;
  --color-navy: #ed5b9f;
  --color-knowledge-sharing: #118cd0;
  --linear-gradient: linear-gradient(
    104deg,
    #ffca00,
    #46ad4c 28%,
    #118cd0 50%,
    #d66c9e 75%,
    #e83828
  );

  /* Typography */
  --font-family-primary: 'Roboto', sans-serif;
  --font-family-secondary: 'Inter', serif;

  /* Font sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.375rem; /* 22px */
  --font-size-3xl: 1.5rem; /* 24px */
  --font-size-4xl: 1.875rem; /* 30px */
  --font-size-5xl: 2.25rem; /* 36px */
  --font-size-6xl: 2.8rem; /* 45px */

  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */

  /* Border radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===================================
   RESET & BASE STYLES
   =================================== */

/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margin & padding reset */
* {
  margin: 0;
  padding: 0;
}

/* HTML & body base */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Images responsive - par défaut */
img {
  max-width: 100%;
  height: auto;
}

/* Images dans les cards d'articles - toujours 100% */
.card-img-top img,
.card-img-top picture,
.card-img-top picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ===================================
   Button
   =================================== */

.button-primary {
  padding: 8px 40px;
  border-radius: 30px;
  background-color: var(--color-slate-grey);
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  text-transform: capitalize;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  display: inline-block;
  z-index: 50;
}

.button-primary-articles {
  padding: 6px 20px;
  border-radius: 20px;
  background-color: var(--color-slate-grey);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-transform: capitalize;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  display: inline-block;
  z-index: 50;
}

.button-primary-variant {
  background-color: var(--color-white);
  color: var(--color-slate-grey);
}
.button-primary-variant:hover {
  background-color: var(--color-slate-grey);
  color: var(--color-white);
}

/* ===================================
   Colors
   =================================== */

.color-patient {
  color: var(--color-patient);
}
.color-manufacturing {
  color: var(--color-manufacturing);
}

.color-education {
  color: var(--color-education);
}

.color-knowledge-sharing {
  color: var(--color-knowledge-sharing);
}
.color-satin-black {
  color: var(--color-satin-black);
}
.color-slate-grey {
  color: var(--color-slate-grey);
}
.color-light-grey {
  color: var(--color-light-grey);
}
.color-white {
  color: var(--color-white);
}

/* ===================================
   Home page
   =================================== */

.home-hero-section {
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  /* min-height (et non height) : sur petits écrans, le contenu dépasse 60vh et était coupé en haut */
  min-height: 60vh;
  color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-hero-section .container {
  padding-bottom: 4rem;
}

.home-hero-section h1 {
  font-size: var(--font-size-6xl);
  font-weight: 500;
  margin-bottom: 20px;
  font-family: var(--font-family-secondary);
  text-transform: uppercase;
}

.home-hero-section h4 {
  font-size: var(--font-size-4xl);
  font-weight: 400;
  max-width: 700px;
  margin: 30px auto;
}

.page-title {
  font-size: var(--font-size-6xl);
  font-weight: 700;
  margin-bottom: 20px;
  font-family: var(--font-family-primary);
  color: var(--color-satin-black);
  margin: 10px 0;
}

.page-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 400;
  font-family: var(--font-family-primary);
  color: var(--color-slate-grey);
  margin-bottom: 1.5rem;
}

.nav-link:hover {
  color: var(--color-satin-black);
}

/* Responsive */
/* Tablette : réduire la taille pour tenir sur une ligne et cohérence visuelle */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-hero-section {
    min-height: 45vh;
    padding-top: 2rem;
  }

  .home-hero-section h1 {
    font-size: 2rem; /* 32px - réduit pour tenir sur une ligne */
  }

  .home-hero-section h4 {
    font-size: 1.4rem; /* 22.4px - réduit proportionnellement au H1 */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .home-hero-section {
    padding-top: 2rem;
  }

  .home-hero-section h1 {
    font-size: 3rem;
  }

  .home-hero-section h4 {
    font-size: 1.2rem;
  }
}

.home-content-section {
  margin-top: -100px;
  z-index: 50;
}

@media (max-width: 768px) {
  .home-content-section {
    margin-top: -50px;
  }
}

.home-card-category {
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-base);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 auto;
  text-align: center;
}

.home-card-category-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  min-width: 80px;
  margin-bottom: 10px;
}

.home-card-category-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Styles pour les cartes de catégories */
.home-content-section .row {
  margin: 0 -8px;
}

.home-content-section [class*='col-'] {
  padding: 0 8px;
  margin-bottom: 16px;
}

/* Desktop (lg et plus) - 5 cartes par ligne */
@media (min-width: 1200px) {
  .home-card-category {
    max-width: 100%;
  }
}

/* Tablette (md) - 3 cartes par ligne */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-content-section .row {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-card-category {
    max-width: 100%;
  }
}

/* Mobile (sm et moins) - 2 cartes par ligne */
@media (max-width: 767.98px) {
  .home-card-category {
    max-width: 100%;
    min-height: 140px;
  }

  .home-card-category p {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
}

/* Effet de survol pour les cartes */
.home-card-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Styles spécifiques pour le formulaire de newsletter dans le footer */
.site-footer .afh-search-bar {
  max-width: 500px !important;
  margin: 0 auto;
}

.site-footer .afh-search-input-wrapper {
  border-radius: clamp(16px, 2.5vw, 20px) 0 0 clamp(16px, 2.5vw, 20px);
  background: #fff;
}

.site-footer .afh-search-input {
  height: 52px;
  padding-left: 16px;
  padding-right: 16px;
  border: none;
  font-size: 16px;
}

.site-footer .afh-search-submit {
  height: 52px;
  padding: 0 24px;
  white-space: nowrap;
  border-radius: 0 clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 20px) 0;
  font-size: 18px;
}

/* Ajustements pour mobile et tablette */
@media (max-width: 991.98px) {
  .site-footer .afh-search-bar {
    flex-direction: column;
    gap: 12px;
    max-width: 400px !important;
  }

  .site-footer .afh-search-input-wrapper {
    border-radius: clamp(16px, 2.5vw, 20px);
    width: 100%;
  }

  .site-footer .afh-search-input {
    width: 100%;
    height: 50px;
    font-size: 15px;
    text-align: center;
  }

  .site-footer .afh-search-submit {
    width: 100%;
    height: 50px;
    border-radius: clamp(16px, 2.5vw, 20px);
    font-size: 17px;
  }
}

/* Styles pour le footer */
.site-footer {
  position: relative;
  height: auto; /* annule la hauteur fixe de la règle générique "footer" */
  color: var(--color-white);
  padding: 0;
}

/* Vague du haut et rubans du bas : largeur 100 %, hauteur proportionnelle (aucune déformation) */
.site-footer .footer-wave,
.site-footer .footer-ribbons {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.site-footer .footer-wave {
  aspect-ratio: 1439.36 / 30;
}

.site-footer .footer-ribbons {
  aspect-ratio: 1439.36 / 150;
  background-color: var(--color-light-grey);
}

/* Zone de contenu, entre la vague et les rubans */
.site-footer .container-fluid {
  position: relative;
  z-index: 1;
  min-height: 290px;
  background-color: var(--color-light-grey);
}

.site-footer .row.h-100 {
  min-height: 290px;
}

.footer-logo-container {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.site-footer .footer-logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.site-footer h3 {
  color: var(--color-satin-black);
  font-size: var(--font-size-3xl);
  margin-bottom: 1rem;
}

/* Titre et sous-titre du footer : couleur réglable dans les options ACF (footer_text_color) */
.site-footer h2,
.site-footer .footer-subtitle {
  color: var(--footer-text-color, var(--color-satin-black));
}

.site-footer .footer-subtitle {
  margin-bottom: 1.5rem;
}

.site-footer .newsletter-form {
  max-width: 500px;
  margin: 0 auto;
}

.site-footer .newsletter-input {
  max-width: 250px !important;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.site-footer .btn-dark {
  background-color: var(--color-satin-black);
  border-color: var(--color-satin-black);
  transition: all 0.3s ease;
}

.site-footer .btn-dark:hover {
  background-color: var(--color-slate-grey);
  border-color: var(--color-slate-grey);
  transform: translateY(-2px);
}

/* Responsive styles */
@media (max-width: 767.98px) {
  .site-footer .container-fluid {
    min-height: 0;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }

  .site-footer .row.h-100 {
    min-height: 0;
  }

  .site-footer .row > div {
    margin-bottom: 1.5rem;
    text-align: center !important;
  }

  .footer-logo-container {
    max-width: 150px;
    padding: 0.5rem;
  }

  .site-footer .footer-logo {
    margin: 0 auto 1rem;
  }

  .site-footer h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .site-footer .footer-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .site-footer .newsletter-form .d-flex {
    flex-direction: column;
    gap: 1rem !important;
  }

  .site-footer .newsletter-input {
    max-width: 100% !important;
    width: 100%;
  }

  .site-footer .btn-dark {
    width: 100%;
  }

  .site-footer .afh-search-input {
    height: 44px;
    font-size: 0.9rem;
  }

  .site-footer .afh-search-submit {
    height: 44px;
    font-size: 0.95rem;
    padding: 0 16px;
  }
}

.home-category-tab-section {
  margin-top: 7rem;
  margin-bottom: 90px !important;
}

/* Onglets de catégories : répartis sur desktop, défilement horizontal quand ils ne tiennent pas (mobile) */
.afh-category-tabs-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.afh-category-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.afh-category-tabs {
  flex-wrap: nowrap;
}

.afh-category-tabs .nav-link {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .afh-category-tabs {
    justify-content: space-between;
  }
}

/* Fondu sur les bords pour signaler les onglets masqués (classes ajoutées par main.js) */
.afh-category-tabs-scroll.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  mask-image: linear-gradient(to right, #000 85%, transparent);
}

.afh-category-tabs-scroll.is-scrollable.is-scrolled {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.afh-category-tabs-scroll.is-scrollable.is-scrolled.is-scrolled-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%);
  mask-image: linear-gradient(to right, transparent, #000 15%);
}

/* ===================================
   Swiper Styles
   =================================== */

.swiper {
  width: 100%;
  height: 100%;
  padding-bottom: 50px !important;
}

/* Uniformiser la hauteur des cartes Swiper */
.swiper-slide .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Centrage des sliders avec moins de 4 éléments */
.swiper-centered .swiper-wrapper {
  justify-content: center !important;
}

.swiper-slide .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

/* Limiter le texte des titres et descriptions */
.swiper-slide .card-title {
  line-height: 1.2;
  word-wrap: break-word;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  padding-top: 8px;
}

.swiper-slide .card-text {
  position: relative;
  max-height: calc(1.4em * 3); /* line-height * nombre de lignes */
  line-height: 1.4;
  overflow: hidden;
  word-wrap: break-word;
  height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: center;
  flex-grow: 1;
  text-overflow: ellipsis;
}

.swiper-slide .card-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination {
  position: relative;
}

.swiper-pagination-bullet {
  background: white !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #304248 !important;
}

.swiper-pagination-bullet-active {
  background: #304248 !important;
}

.home-banner-section {
  background: linear-gradient(
    106deg,
    #ffca00,
    #46ad4c 28%,
    #118cd0 50%,
    #d66c9e 75%,
    #e83828
  );
  color: white;
  position: relative;
  padding: 100px 0;
  margin: 140px 0;
  /* Hauteur mini liée à la taille des images (largeur clamp(160px, 15vw, 320px), ratio 3/4) :
     sur grand écran, les images du bas ne dépassent que d'environ 60px au lieu de passer sous le footer */
  min-height: calc(90px + clamp(213px, 20vw, 427px));
}

/* WP Rocket (Automatic Lazy Rendering) applique content-visibility: auto à cette section,
   ce qui coupe les images qui débordent volontairement en haut et en bas : on le neutralise */
.home-banner-section[data-wpr-lazyrender] {
  content-visibility: visible;
}

.card {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

/* Positionnement des 3 images de la bannière */
.banner-image {
  position: absolute;
  display: block;
  width: clamp(160px, 15vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* S'assurer que les images à l'intérieur des balises picture héritent des styles */
.banner-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.banner-image-1 {
  right: 17%;
  top: -60px;
  transform: rotate(-5deg);
  z-index: 1;
}

.banner-image-2 {
  right: 28%;
  top: 150px;
  transform: rotate(5deg);
  z-index: 2;
}

.banner-image-3 {
  right: 4%;
  top: 140px;
  transform: rotate(-3deg);
  z-index: 2;
}

/* Utilitaire: gutter horizontal à 5rem */
.gx-5rem {
  --bs-gutter-x: 5rem;
}

/* Mobile : colonnes empilées, une gouttière de 5rem faisait déborder la page horizontalement */
@media (max-width: 767.98px) {
  .gx-5rem {
    --bs-gutter-x: 1.5rem;
  }
}

footer {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 450px;
}

/* ===================================
   Search bar component
   =================================== */
.afh-search-bar {
  display: flex;
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  /* Border-radius proportionnel : plus grand sur petits écrans pour une courbure visuellement équivalente */
  border-radius: clamp(16px, 2.5vw, 20px);
  overflow: hidden;
}

/* Sur mobile/tablette, ajouter des marges pour espacer du bord d'écran */
@media (max-width: 991.98px) {
  .afh-search-bar {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

.faq-cards-grid .faq-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  color: #304248;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.faq-cards-grid .faq-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.faq-card-icon img,
.faq-card-icon-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.faq-card-title {
  font-size: 1rem;
  line-height: 1.35;
}

.afh-search-input-wrapper {
  position: relative;
  flex: 1 1 auto;
  background: #fff;
  border-radius: clamp(16px, 2.5vw, 20px) 0 0 clamp(16px, 2.5vw, 20px);
}

.afh-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.afh-search-input {
  width: 100%;
  height: 62px;
  border: none;
  outline: none;
  padding: 0 18px 0 48px; /* place pour l'icône */
  font-size: 20px;
  color: #304248;
}

.afh-search-input::placeholder {
  color: #7a8a92;
}

.afh-search-submit {
  background: #304248;
  color: #fff;
  border: none;
  padding: 0 50px;
  height: 62px;
  font-size: 28px;
  font-weight: 700;
  border-radius: 0 clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 20px) 0;
}

/* Mobile: bouton de recherche plus petit */
@media (max-width: 768px) {
  .afh-search-submit {
    height: 48px;
    font-size: 20px;
    padding: 0 30px;
  }

  .afh-search-input {
    height: 48px;
  }
}

.afh-search-submit:hover,
.afh-search-submit:focus,
.afh-search-submit:active {
  background: #304248;
  color: #fff !important;
}

/* Override Bootstrap .btn active states */
.btn-check:checked + .btn.afh-search-submit,
.btn.afh-search-submit.active,
.btn.afh-search-submit.show,
.btn.afh-search-submit:first-child:active,
:not(.btn-check) + .btn.afh-search-submit:active {
  background-color: #304248 !important;
  color: #fff !important;
  border-color: #304248 !important;
}

.afh-search-submit:disabled {
  background: #304248;
  color: #fff;
  opacity: 0.7;
  cursor: not-allowed;
}

.common-hero-section {
  background: linear-gradient(
    105deg,
    #ffca00,
    #46ad4c 28%,
    #118cd0 50%,
    #d66c9e 75%,
    #e83828
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: auto;
  padding: 30px 0;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Tablette : ajouter du padding horizontal */
@media (min-width: 769px) and (max-width: 1024px) {
  .common-hero-section {
    padding: 30px 3rem;
  }
}

/* ===== FAQ ACCORDÉON ===== */

.faq-item {
  border: 0.5px solid #67747c;
  margin-bottom: 10px;
  padding: 10px 20px;
  border-radius: 5px;
}

.faq-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.faq-question {
  flex: 1;
  margin-right: var(--spacing-sm);
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.faq-question p {
  margin: 0;
}

.faq-icon {
  color: #304248;
  font-size: 1.5rem;
  font-weight: bold;
  transition: all var(--transition-fast);
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium);
}

.faq-answer {
  padding: 0 var(--spacing-md) var(--spacing-md) 0;
  color: #304248;
  line-height: 1.6;
  font-size: var(--font-size-base);
}

/* ===================================
   CONTENT IMAGES ALIGNMENT
   =================================== */

/* Alignement des images dans le contenu WordPress */
.post-content-full img,
.entry-content img,
.page-content img {
  max-width: 100%;
  height: auto;
}

/* Images centrées */
.post-content-full .aligncenter,
.entry-content .aligncenter,
.page-content .aligncenter,
.post-content-full img.aligncenter,
.entry-content img.aligncenter,
.page-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Images à gauche */
.post-content-full .alignleft,
.entry-content .alignleft,
.page-content .alignleft,
.post-content-full img.alignleft,
.entry-content img.alignleft,
.page-content img.alignleft {
  float: left;
  margin: 0 1rem 1rem 0;
}

/* Images à droite */
.post-content-full .alignright,
.entry-content .alignright,
.page-content .alignright,
.post-content-full img.alignright,
.entry-content img.alignright,
.page-content img.alignright {
  float: right;
  margin: 0 0 1rem 1rem;
}

/* Figures WordPress */
.post-content-full figure,
.entry-content figure,
.page-content figure {
  margin: 1rem 0;
}

.post-content-full figure.aligncenter,
.entry-content figure.aligncenter,
.page-content figure.aligncenter {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.post-content-full figure.alignleft,
.entry-content figure.alignleft,
.page-content figure.alignleft {
  float: left;
  margin: 0 1rem 1rem 0;
}

.post-content-full figure.alignright,
.entry-content figure.alignright,
.page-content figure.alignright {
  float: right;
  margin: 0 0 1rem 1rem;
}

/* Légendes d'images */
.post-content-full figcaption,
.entry-content figcaption,
.page-content figcaption,
.post-content-full .wp-caption-text,
.entry-content .wp-caption-text,
.page-content .wp-caption-text {
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Clear floats après les images flottantes */
.post-content-full::after,
.entry-content::after,
.page-content::after {
  content: '';
  display: table;
  clear: both;
}

/* Respecter les tailles définies par WordPress */
.page-content img[width],
.post-content-full img[width],
.entry-content img[width] {
  width: auto; /* Permet au width inline de fonctionner */
  max-width: 100%; /* Mais reste responsive */
}

/* Classes de taille WordPress */
.page-content .size-thumbnail,
.page-content .size-medium,
.page-content .size-large,
.page-content .size-full,
.post-content-full .size-thumbnail,
.post-content-full .size-medium,
.post-content-full .size-large,
.post-content-full .size-full,
.entry-content .size-thumbnail,
.entry-content .size-medium,
.entry-content .size-large,
.entry-content .size-full {
  height: auto;
}

.post-title {
  font-size: var(--font-size-6xl);
  font-weight: 700;
  font-family: var(--font-family-primary);
  color: var(--color-satin-black);
  margin-bottom: 20px;
}

/* ===================================
   HEADER RESPONSIVE
   =================================== */

/* Logo responsive */
.navbar-brand img {
  max-height: 40px;
  width: auto;
}

/* Mobile / tablette (burger jusqu'à 1400px, cf. navbar-expand-xxl) : logo plus petit pour s'aligner avec le burger */
@media (max-width: 1399.98px) {
  .navbar-brand img {
    max-height: 30px;
  }

  .navbar {
    padding: 0.75rem 1rem !important;
  }

  .navbar-brand {
    margin-right: 1rem !important;
  }

  /* Offcanvas body avec border-top sur mobile seulement */
  .offcanvas-body-custom {
    border-top: 1px solid #dee2e6;
  }
}

/* Desktop: pas de border sur offcanvas */
@media (min-width: 768px) {
  .offcanvas-body-custom {
    border-top: none;
  }
}

/* ===================================
   MENU NAVIGATION STYLES
   =================================== */

/* Styles pour tous les liens du menu */
.navbar-nav .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--color-satin-black) !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s ease !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-slate-grey) !important;
}

.navbar-nav .nav-link.active {
  color: var(--color-satin-black) !important;
}

/* ===================================
   FILTERS CHECKBOXES STYLES
   =================================== */

/* Styles pour les checkboxes des filtres */
.form-check-input:checked {
  background-color: var(--color-education) !important;
  border-color: var(--color-education) !important;
}

.form-check-input:focus {
  border-color: var(--color-education) !important;
  box-shadow: 0 0 0 0.25rem rgba(71, 173, 76, 0.25) !important;
}

/* Hover effect pour les checkboxes */
.form-check-input:hover {
  border-color: var(--color-education) !important;
}

/* ===================================
   FILTERS SIDEBAR STYLES
   =================================== */

/* Style de la sidebar des filtres */
.filters-sidebar {
  background: transparent;
  border: none;
  padding: 0;
}

.filters-header {
  padding: 0 0 1rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1.5rem;
}

.filters-header h5 {
  font-weight: 700;
  color: var(--color-satin-black);
  font-size: 1.25rem;
  margin-bottom: 0;
}

.filters-content {
  padding: 0;
}

/* Style des sections de filtres */
.filters-content .mb-4.pb-3.border-bottom {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef !important;
}

.filters-content .mb-4.pb-3.border-bottom:last-child {
  border-bottom: none !important;
  margin-bottom: 0;
}

/* Style des labels de sous-catégories */
.subcategories-container .form-check-label {
  color: var(--color-slate-grey) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important; /* 14px - plus petit que les catégories principales */
}

/* ===================================
   ARTICLE CARDS STYLES
   =================================== */

/* Centrer les textes dans les cards d'articles */
.article-card .card-body {
  text-align: center;
  padding: 1.5rem; /* Plus de padding général */
}

.article-card .card-title {
  text-align: center;
  margin-bottom: 1.5rem; /* Plus d'espace après le titre */
  margin-top: 0.5rem; /* Espace au-dessus du titre */
}

.article-card .card-text {
  text-align: center;
  margin-bottom: 2rem; /* Plus d'espace après le texte */
  line-height: 1.6; /* Améliorer la lisibilité */
}

/* Footer de la card avec date à gauche et lien à droite */
.article-card .card-body .mt-auto {
  text-align: left; /* Reset du centrage pour le footer */
  margin-top: 1.5rem; /* Espace au-dessus du footer */
  padding-top: 1rem; /* Padding interne du footer */
}

.article-card .card-body .mt-auto .d-flex {
  justify-content: space-between;
  align-items: center;
}

/* Espacement pour la date */
.article-card .card-body .mt-auto .text-muted {
  margin-bottom: 0;
}

/* Style du lien "Read more" comme un lien simple */
.article-card .read-more-link {
  color: var(--color-satin-black);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.article-card .read-more-link:hover {
  color: var(--color-education);
  text-decoration: underline;
}

/* ===================================
   PAGINATION CUSTOM STYLES
   =================================== */

/* Style personnalisé pour la pagination */
.pagination {
  gap: 0.5rem;
}

.pagination .page-item .page-link {
  color: var(--color-slate-grey);
  font-weight: 400;
  transition: all 0.3s ease;
  margin: 0 0.25rem;
  background-color: #fff;
  border: none;
}

.pagination .page-item.disabled .page-link {
  background-color: #fff;
  border-color: #dee2e6;
  color: var(--color-slate-grey);
  opacity: 1;
}

.pagination .page-item.disabled .page-link:hover {
  background-color: #fff;
  border-color: #dee2e6;
  color: var(--color-slate-grey);
}

/* Style pour les boutons de navigation */
.pagination .page-item .page-link[aria-label='First'],
.pagination .page-item .page-link[aria-label='Previous'],
.pagination .page-item .page-link[aria-label='Next'],
.pagination .page-item .page-link[aria-label='Last'] {
  font-weight: 600;
}

/* Style pour les icônes SVG des chevrons */
.pagination .page-item .page-link svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Ajouter des bordures seulement aux boutons de navigation (pas au texte central) */
.pagination .page-item:not(.active) {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  margin: 0 0.125rem;
}

/* Style pour l'élément central (texte d'information) - pas de bordure */
.pagination .page-item.active {
  border: none;
  margin: 0 0.125rem;
}

.pagination .page-item.active .page-link {
  border: none;
  background: transparent;
  color: var(--color-slate-grey);
}

/* ===================================
   CATEGORY PAGE CONTROLS STYLES
   =================================== */

/* Style pour les boutons de contrôle (Sort by et Results per page) */
.btn.btn-outline-secondary.dropdown-toggle {
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #495057;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 400;
  min-width: auto;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn.btn-outline-secondary.dropdown-toggle:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  color: #495057;
}

.btn.btn-outline-secondary.dropdown-toggle:focus,
.btn.btn-outline-secondary.dropdown-toggle:active {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  color: #495057;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.btn.btn-outline-secondary.dropdown-toggle::after {
  margin-left: auto;
}

/* Style pour les menus dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.375rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #1e2125;
  background-color: #f8f9fa;
}

/* ===================================
   SWIPER ALERT CENTERING
   =================================== */

/* Forcer le centrage des alertes dans les slides Swiper spécifiques */
.swiper-slide-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 250px !important;
}

.alert-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.alert-centered > div {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================
   CATEGORY PAGE RESPONSIVE
   =================================== */

/* Mobile et tablette: contrôles de tri et pagination */
@media (max-width: 991.98px) {
  /* Container principal des contrôles */
  .controls-container {
    flex-direction: column !important;
    padding-left: 0 !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  /* Section contrôles (Sort by et Results per page) - côte à côte et centrés */
  .controls-buttons {
    justify-content: center !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  /* Section pagination - en dessous et centrée */
  .controls-pagination {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Boutons plus compacts sur mobile et tablette */
  .btn.btn-outline-secondary.dropdown-toggle {
    min-width: 140px;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
  }

  /* Pagination centrée et compacte sur mobile et tablette */
  .pagination {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination .page-item .page-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    margin: 0 0.125rem;
  }

  /* Grille d'articles sans padding sur mobile et tablette */
  .row.g-5.ps-5 {
    padding-left: 0 !important;
  }

  /* Espacement réduit entre les cards sur mobile */
  @media (max-width: 768px) {
    .row.g-5.ps-5 {
      row-gap: 1rem !important;
      column-gap: 1rem !important;
    }
  }

  /* Sidebar en pleine largeur sur mobile et tablette */
  .filters-sidebar {
    margin-bottom: 2rem;
  }

  /* Toggle des filtres sur mobile et tablette */
  .mobile-filters-toggle {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--color-satin-black);
  }

  .mobile-filters-toggle:hover {
    background-color: transparent;
    color: var(--color-education);
  }

  /* Masquer les filtres par défaut sur mobile et tablette */
  .filters-content {
    display: block;
  }

  /* État masqué des filtres sur mobile et tablette */
  .filters-content.mobile-hidden {
    display: none !important;
  }

  /* Pagination du bas centrée sur mobile et tablette */
  .d-flex.justify-content-end.mt-5 {
    justify-content: center !important;
  }
}

/* Desktop: pagination du bas alignée à droite */
@media (min-width: 992px) {
  .d-flex.justify-content-end.mt-5 {
    justify-content: flex-end !important;
  }
}

/* ===================================
   HOME BANNER RESPONSIVE
   =================================== */

/* Mobile: masquer les images et centrer le texte */
@media (max-width: 768px) {
  .home-banner-section .banner-image {
    display: none !important;
  }

  .home-banner-section .row {
    justify-content: center;
    text-align: center;
  }

  .home-banner-section .col-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .home-banner-section .col-7 {
    display: none;
  }
}

/* ===================================
   BACK TO TOP BUTTON
   =================================== */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--linear-gradient);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top:hover {
  background-color: var(--color-satin-black);
  transform: translateY(0) scale(1.1);
}

.back-to-top svg {
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease;
}

.back-to-top.rotated svg {
  transform: rotate(45deg);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Conteneur des 3 boutons rapides */
.quick-buttons-container {
  position: fixed;
  bottom: 90px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
  z-index: calc(var(--z-fixed) - 1);
}

.quick-buttons-container.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Style des boutons rapides */
.quick-button {
  width: 180px;
  height: 50px;
  background: #fff;
  color: #4e595f;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  transform: scale(0);
  opacity: 0;
  text-decoration: none;
  text-transform: uppercase;
}

/* Animation en cascade pour les boutons */
.quick-buttons-container.visible .quick-button-1 {
  animation: popIn 0.3s ease forwards;
  animation-delay: 0.05s;
}

.quick-buttons-container.visible .quick-button-2 {
  animation: popIn 0.3s ease forwards;
  animation-delay: 0.1s;
}

.quick-buttons-container.visible .quick-button-3 {
  animation: popIn 0.3s ease forwards;
  animation-delay: 0.15s;
}

@keyframes popIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.quick-button:hover {
  background: #f8f9fa;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.quick-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #4e595f;
}

/* Mobile: boutons plus petits */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .quick-buttons-container {
    bottom: 75px;
    right: 20px;
    gap: 8px;
  }

  .quick-button {
    width: 150px;
    height: 45px;
    font-size: 14px;
    padding: 0 15px;
    gap: 10px;
  }
}

.clickable-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ===================================
   MODAL Z-INDEX FIX
   =================================== */

/* Corriger le z-index du backdrop Bootstrap pour qu'il soit derrière la modal */
.modal-backdrop {
  z-index: 99998 !important;
}

#newsletterModal.modal {
  z-index: 99999 !important;
  position: fixed !important;
}

#newsletterModal .modal-dialog {
  z-index: 100000 !important;
  position: relative !important;
}