/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee
 */

/* Force tous les liens du footer à être blancs semi-transparents */
.footer-top a {
  color: rgba(255,255,255,0.7) !important;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer-top a:hover {
  color: rgba(255,255,255,1) !important;
}


/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --spanish-gray: hsl(0, 0%, 60%);
  --sonic-silver: hsl(0, 0%, 47%);
  --eerie-black: hsl(0, 0%, 13%);
  --salmon-pink: hsl(353, 100%, 78%);
  --sandy-brown: hsl(29, 90%, 65%);
  --bittersweet: hsl(0, 100%, 70%);
  --ocean-green: hsl(152, 51%, 52%);
  --davys-gray: hsl(0, 0%, 33%);
  --cultured: hsl(0, 0%, 93%);
  --white: hsl(0, 100%, 100%);
  --onyx: hsl(0, 0%, 27%);
  --steelblue: hsl(207, 44%, 49%);

  /**
   * typography
   */

  --fs-1: 1.563rem;
  --fs-2: 1.375rem;
  --fs-3: 1.25rem;
  --fs-4: 1.125rem;
  --fs-5: 1rem;
  --fs-6: 0.938rem;
  --fs-7: 0.875rem;
  --fs-8: 0.813rem;
  --fs-9: 0.75rem;
  --fs-10: 0.688rem;
  --fs-11: 0.625rem;

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /**
   * border-radius
   */

  --border-radius-md: 10px;
  --border-radius-sm: 5px;

  /**
   * transition
   */

  --transition-timing: 0.2s ease;

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a { text-decoration: none; }

li { list-style: none; }

button {
  background: none;
  font: inherit;
  border: none;
  cursor: pointer;
}

img, ion-icon, button, a { display: block; }

span { display: inline-block; }

html {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}


input {
  display: block;
  width: 100%;
  font: inherit;
}

input::-webkit-input-placeholder { font: inherit; }

input::-moz-placeholder { font: inherit; }

input:-ms-input-placeholder { font: inherit; }

input::-ms-input-placeholder { font: inherit; }

input::placeholder { font: inherit; }

body {
  background-color: var(--eerie-black);
  margin: 0;
  padding: 0;
}

/**
 * scrollbar style
 */

body::-webkit-scrollbar { width: 15px; }

body::-webkit-scrollbar-track {
  background: var(--white);
  border-left: 1px solid var(--cultured);
}

body::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 80%);
  border: 3px solid var(--white);
  -webkit-border-radius: 10px;
          border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container {
  max-width: 1350px; /* Largeur maximale de 1350 px */
  margin: 0 auto; /* Centrer le conteneur */
  padding: 0 15px; /* Conserver le padding existant */
}

.has-scrollbar { padding-bottom: 5px; }

.has-scrollbar::-webkit-scrollbar {
  width: 12px; /* for vertical scroll */
  height: 12px; /* for horizontal scroll */
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid var(--white);
  -webkit-border-radius: 20px;
          border-radius: 20px;
}

.has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); }

.has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); }

.title {
  color: var(--eerie-black);
  font-size: var(--fs-5);
  font-weight: var(--weight-600);
  letter-spacing: 0.4px;
  text-transform: capitalize;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cultured);
  margin-bottom: 30px;
}





/*--------------------------------------------------------------
Box Module
--------------------------------------------------------------*/
  /* Header & Footer Element */
@media (min-width: 576px) {
    html.boxed header, html.boxed footer {
      margin-right: auto;
      margin-left: auto;
      width: 100%; } }

  @media (min-width: 576px) {
    html.boxed header, html.boxed footer {
      max-width: 456px; } }

  @media (min-width: 791px) {
    html.boxed header, html.boxed footer {
      max-width: 770px; } }

  @media (min-width: 1025px) {
    html.boxed header, html.boxed footer {
      max-width: 990px; } }

  @media (min-width: 1230px) {
    html.boxed header, html.boxed footer {
      max-width: 1200px; } }

  /* App Content exclude Header & Footer */
  @media (min-width: 576px) {
    html.boxed .app-content {
      margin: 0 auto;
      overflow: hidden; } }

  @media (min-width: 576px) {
    html.boxed .app-content {
      max-width: 546px; } }

  @media (min-width: 791px) {
    html.boxed .app-content {
      max-width: 770px; } }

  @media (min-width: 1025px) {
    html.boxed .app-content {
      max-width: 990px; } }

  @media (min-width: 1230px) {
    html.boxed .app-content {
      max-width: 1200px; } }

  /* App Content with container */
  @media (max-width: 1024px) {
    html.boxed .app-content .container {
      padding-left: 20px;
      padding-right: 20px; } }

  @media (min-width: 1025px) {
    html.boxed .app-content .container {
      padding-left: 40px;
      padding-right: 40px; } }

  /* Footer with container Element */
  @media (max-width: 1024px) {
    html.boxed footer .container {
      padding-left: 20px;
      padding-right: 20px; } }

  @media (min-width: 1025px) {
    html.boxed footer .container {
      padding-left: 40px;
      padding-right: 40px; } }

      @media (max-width: 768px) {
        .container {
          padding: 0 10px; /* Réduire le padding sur les petits écrans */
        }
      }

      @media (max-width: 480px) {
        .container {
          padding: 0 5px; /* Encore moins de padding sur les très petits écrans */
        }
      }




/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
 Outer-Footer */
.outer-footer {
    padding: 80px 0;
    background-color: #000000; }
    .outer-footer__content-title {
      display: block;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px; }
    .outer-footer__logo-wrap {
      margin-bottom: 4px; }
    .outer-footer__text-wrap {
      margin-bottom: 6px; }
      .outer-footer__text-wrap > i {
        margin-right: 6px;
        font-size: 14px;
        color: #ffffff; }
      .outer-footer__text-wrap span {
        font-size: 14px;
        color: #ffffff; }
    .outer-footer__social ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .outer-footer__social ul > li {
        margin-right: 16px; }
        .outer-footer__social ul > li > a {
          font-size: 14px;
          color: #ffffff;
          transition: color 0.6s; }
        .outer-footer__social ul > li:last-child {
          margin-right: 0; }
    .outer-footer__list-wrap ul {
      margin: 0;
      padding: 0;
      list-style: none; }
      .outer-footer__list-wrap ul > li {
        margin-bottom: 8px; }
        .outer-footer__list-wrap ul > li > a {
          transition: color 0.6s;
          color: #ffffff;
          font-size: 14px; }
          .outer-footer__list-wrap ul > li > a:hover {
            color: steelblue; }
        .outer-footer__list-wrap ul > li:last-child {
          margin-bottom: 0; }

  .newsletter__group {
    position: relative; }

  .newsletter__btn {
    position: absolute;
    padding: 14px;
    right: 0;
    font-weight: 600;
    font-size: 12px;
    top: 50%;
    border: none;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }

  .newsletter__text {
    margin-top: 10px;
    display: block;
    color: #ffffff;
    font-size: 14px; }

  .newsletter__radio {
    margin-right: 20px; }
    .newsletter__radio .radio-box__label {
      color: #ffffff; }
    .newsletter__radio:last-child {
      margin-right: 0; }

  #newsletter {
    width: 100%;
    padding: 0 100px 0 18px; }






  /**
   * footer nav    */

  /* Modifier la section footer-nav */
  .footer-nav {
    border-bottom: 1px solid var(--onyx);
    margin-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    width: 100%; /* Ajout de cette ligne */
  }

  footer-nav .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start; /* Ajout de cette ligne */
    -webkit-justify-content: flex-start; /* Ajout de cette ligne */
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 20px; /* Remplace row-gap et column-gap */
}


  .footer-nav-list:not(:last-child) { margin-bottom: 20px; }

  .footer-nav .nav-title {
    position: relative;
    color: var(--white);
    font-size: var(--fs-4);
    text-transform: uppercase !important;
    margin-bottom: 15px;
    padding-bottom: 5px;
  }

  .footer-nav .nav-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #2a7ae2; /* Fond bleu */
    width: 60px;
    height: 1px;
  }

  .footer-nav-item {
    padding: 3px 0;
    text-align: left; /* Ajout de cette ligne */
}

.footer-nav-link,
.footer-nav-item .content {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    color: var(--sonic-silver);
    font-size: var(--fs-6);
    text-transform: capitalize;
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
    text-align: left; /* Ajout de cette ligne */
}

  .footer-nav-link { color: white !important; transition: color 0.3s ease; }
  .footer-nav-link:link, .footer-nav-link:visited { color: white !important; }
  .footer-nav-link:hover { color: #2a7ae2 !important; /* Fond bleu */ }

  /* Force les liens à être blancs */
  .footer-nav-list a { color: white !important; }

  .footer-nav-item.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }

  .footer-nav-item .content {
    font-style: normal;
    margin-bottom: 5px;
  }

  .footer-nav-item .icon-box {
    color: var(--sonic-silver);
    font-size: 25px;
  }

  .footer-nav-item .icon-box ion-icon { --ionicon-stroke-width: 30px; }

  .footer-nav .social-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
  }

  .social-link .footer-nav-link { font-size: 25px; }

  .footer-bottom {
    margin-bottom: 50px;
    text-align: center;
  }

  .payment-img {
    max-width: 335px;
    width: 100%;
    margin: auto;
    margin-bottom: 15px;
  }

  .copyright {
    color: var(--sonic-silver);
    font-size: var(--fs-8);
    font-weight: var(--weight-500);
    text-transform: capitalize;
    letter-spacing: 1.2px;
  }

  .copyright a {
    display: inline;
    color: inherit;
  }


  /**
   * #FOOTER
   */

   footer {
     background: linear-gradient(135deg, #2c3e50, #4a6491) !important;
     color: white !important;
     padding: 40px 0 !important;
     margin-top: 40px !important;
     border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
     box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.2) !important;
   }

   .footer-category {
     width: 1350px !important;
     max-width: 100% !important;
     margin: 0 auto !important;
     padding: 20px !important;
   }

   .footer-nav { padding-bottom: 50px; }


     /**
   * #FOOTER
   */

  .footer-nav-list {
    min-width: -webkit-calc(20% - 16px);
    min-width: calc(20% - 16px);
    width: -webkit-calc(20% - 16px);
    width: calc(20% - 16px);
  }

  .footer-nav-list:last-child { display: none; }

  .footer-bottom { margin-bottom: 0; }


  /**
   * #FOOTER
   */

   .footer-nav .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    row-gap: 50px;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
  }

  .footer-nav-list {
    min-width: -webkit-calc(33.33% - 15px);
    min-width: calc(33.33% - 15px);
    width: -webkit-calc(33.33% - 15px);
    width: calc(33.33% - 15px);
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

  .footer-nav-list:not(:last-child) { margin-bottom: 0; }




/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

:root {
  --eerie-black: #1f1f1f;
  --fs-9: 11px;
  --fs-8: 13px;
  --fs-7: 15px;
  --fs-6: 17px;
}

footer {
  background: var(--eerie-black);
  padding: 10px 0 0;
}

  .footer-category {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--onyx);
  }

  /* Cibler spécifiquement le h2 pour la marge */
h2.footer-category-title {
    color: #2a7ae2; /* Couleur de fond du bouton */
    font-size: var(--fs-4);
    font-weight: var(--weight-600);
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 20px; /* Marge inférieure ajoutée/ajustée */
    line-height: 1.4;
  }

  /* Styles pour la structure GRID (laissant .footer-category-title pour la cellule) */
  .footer-category-box {
    display: grid !important;
    grid-template-columns: 150px 1fr !important; /* Largeur augmentée pour la colonne des titres */
    gap: 30px 120px !important;  /* Espacement horizontal encore plus important entre les colonnes */
    align-items: center !important; /* Aligné au centre pour aligner le titre avec la première ligne */
    margin-bottom: 35px !important;
    width: 100% !important;
    line-height: 1.6 !important;
  }

  .footer-category-title {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    transition: color 0.3s ease;
    margin-bottom: 10px !important;
    padding-right: 20px !important; /* Ajout d'un padding à droite pour plus d'espace */
    font-weight: bold !important;
    font-size: 1.1em !important;
    margin-right: 50px !important; /* Ajoute une marge à droite pour séparer le titre des liens */
  }

  .footer-category-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px 30px !important; /* Espace considérablement augmenté entre les liens */
    padding-left: 20px !important; /* Ajout d'un padding à gauche pour plus d'espace */
    align-items: center !important; /* Aligne les liens au centre pour correspondre au titre */
    /* justify-content: space-between !important; */ /* La justification est désactivée */

  }

  .footer-category-title-link {
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    display: inline-block;
    transition: color 0.3s ease;
    font-size: var(--fs-2); /* Augmentation de la taille pour correspondre aux liens */
    padding: 4px 0; /* Padding vertical pour aligner avec les liens */
    font-weight: bold; /* Ajout du gras pour mieux distinguer les titres */
  }

  .footer-category-link {
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-3); /* Augmentation de la taille de var(--fs-5) à var(--fs-3) */
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    padding: 4px 12px;
    margin-right: 15px;
    line-height: 1.8;
    transition: color 0.3s ease;
  }

  .category-box-title {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-transform: uppercase;
    font-size: var(--fs-1); /* Augmentation de la taille pour maintenir la hiérarchie visuelle */
    font-weight: var(--weight-600);
    color: white;
  }

  .footer-category-title-link:hover {
    color: var(--primary-color, #ff6b6b);
  }

  .footer-category-title-link h3 {
    margin: 0;
    display: inline-block;
  }

  .footer-category-link { color: white !important; transition: color 0.3s ease; }
  .footer-category-link:link, .footer-category-link:visited { color: white !important; }
  .footer-category-link:hover { color: #2a7ae2 !important; /* Fond bleu */ }

  /* Force les liens à être blancs */
  .footer-category-links a { color: white !important; }

  .footer-bottom-left {
    color: var(--spanish-gray);
    margin-bottom: 15px;
}

.footer-bottom-left p {
    color: var(--spanish-gray);
    transition: color 0.3s ease;
}

.footer-bottom-left p:hover {
    color: #2a7ae2;
}

  .lower-footer {
    background-color: var(--eerie-black);
    padding: 20px 0 5px;
    text-align: center;
  }

  .lower-footer__content {
    display: flex;
    flex-direction: column; /* Aligne le contenu verticalement */
    align-items: center;
  }

  .lower-footer__payment ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .lower-footer__payment ul > li {
    margin-right: 1cm; /* Espacement de 1 cm entre les éléments */
  }

  .lower-footer__payment ul > li:last-child {
    margin-right: 0;
  }

  .payment-img {
    display: block;
    width: 50px; /* Ajustez la taille selon vos besoins */
    height: auto;
  }

  /* Styles pour l'icône de direction */
  .lower-footer__direction {
    margin: 20px 0; /* Espacement au-dessus et en dessous de l'icône */
    font-size: 24px;
    color: var(--spanish-gray); /* Utiliser la couleur grise du thème */
  }

  /* Styles pour le bouton "Faire un don" */
  .lower-footer__donation {
    margin-top: 5px; /* Espacement au-dessus du bouton */
  }

  .donation-button {
    padding: 10px 20px;
    background-color: #2a7ae2; /* Couleur de fond du bouton */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .donation-button:hover {
    background-color: #0056b3;
  }

  .lower-footer__copyright span {
    font-size: 17px;
    color: var(--spanish-gray);
    display: block;
    margin-top: 20px; /* Ajout d'une marge au-dessus pour espacer le texte des images */
  }

  .lower-footer__copyright a {
    margin: 0 1px;
    font-size: 17px;
    color: var(--spanish-gray);
    transition: color 0.6s;
  }

  .lower-footer__copyright a:hover {
    color: steelblue;
  }

  @media (max-width: 767px) {
    .lower-footer__content {
      justify-content: center;
    }
    .lower-footer__copyright {
      margin-bottom: 8px;
    }
    .lower-footer__payment ul > li {
      margin-right: 1cm; /* Réduire l'espacement sur les petits écrans */
    }
  }


  /*-----------------------------------*\
    #RESPONSIVE
  \*-----------------------------------*/


  /**
   * responsive larger than 480px screen
   */

  @media (min-width: 480px) {

    /**
     * #CUSTOM PROPERTY
     */

    :root {

      /**
       * typography
       */

      --fs-1: 1.875rem;

    }


    /**
   * #TESTIMONIALS, CTA & SERVICE
   */

  .testimonials-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 30px;
  }

  .testimonial-card { margin-bottom: 0; }

  .testimonial, .cta-container {
    min-width: -webkit-calc(50% - 15px);
    min-width: calc(50% - 15px);
    width: -webkit-calc(50% - 15px);
    width: calc(50% - 15px);
    margin-bottom: 0;
  }


  /**
   * #BLOG
   */

  .blog-card { min-width: -webkit-calc(33.33% - 20px); min-width: calc(33.33% - 20px); }

  .blog-title { --fs-5: 1rem; }



  /**
   * #FOOTER
   */

   .footer-nav-list {
    min-width: -webkit-calc(20% - 20px);
    min-width: calc(20% - 20px);
    width: -webkit-calc(20% - 20px);
    width: calc(20% - 20px);
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    margin: 0;
    padding: 0;
    text-align: left; /* Ajout de cette ligne */
}


.footer-nav-list:not(:last-child) {
    margin-bottom: 0;
    margin-right: 0; /* Ajout de cette ligne */
}

  .footer-bottom { margin-bottom: 0; }

}



.footer-bottom-right {
    text-align: center; /* Centrer le contenu de la div */
}

.footer-social-media {
    list-style: none; /* Supprime les puces des éléments de liste */
    padding: 0; /* Supprime les marges internes */
    margin: 0 auto; /* Centre la liste horizontalement */
    display: flex; /* Utilise flexbox pour la mise en page */
    justify-content: center; /* Centre les éléments de la liste */
}

.footer-social-media li {
    margin: 0 10px; /* Ajoute de l'espace entre les icônes */
}

.footer-social-media li a {
    font-size: 24px; /* Taille des icônes */
    color: rgba(255,255,255,0.8) !important; /* Couleur des icônes */
    transition: color 0.3s; /* Transition pour un effet au survol */
}

.footer-social-media li a:hover {
    color: #2a7ae2 !important; /* Couleur au survol */
}

  /* Media Queries pour une meilleure réactivité */
@media (max-width: 1200px) {
  .footer-nav .container {
    gap: 30px;
  }

  .footer-nav-list {
    min-width: calc(25% - 22.5px);
    width: calc(25% - 22.5px);
  }

  .footer-category-box br + .footer-category-link {
    margin-left: 130px;
  }
}

@media (max-width: 991px) {
  .footer-nav .container {
    gap: 20px;
  }

  .footer-nav-list {
    min-width: calc(33.33% - 13.33px);
    width: calc(33.33% - 13.33px);
  }

  .footer-category-box {
    column-gap: 15px;
  }

  .footer-category-box br + .footer-category-link {
    margin-left: 100px;
  }
}

@media (max-width: 768px) {
  .footer-nav .container {
    gap: 15px;
  }

  .footer-nav-list {
    min-width: calc(50% - 7.5px);
    width: calc(50% - 7.5px);
  }

  .footer-category-box {
    column-gap: 10px;
  }

  .footer-category-box br + .footer-category-link {
    margin-left: 70px;
  }

  .lower-footer__payment ul > li {
    margin-right: 0.5cm;
  }

  .payment-img {
    width: 40px;
  }

  .footer-category-title {
    font-size: var(--fs-7);
  }

  /* Ajustements pour les petits écrans */
  .footer-category-box br + .footer-category-link {
    margin-left: 0; /* Pas de marge sur les petits écrans */
  }

  .footer-category-box {
    margin-bottom: 20px;
  }
}

@media (max-width: 575px) {
  .footer-nav .container {
    flex-direction: column;
    gap: 30px;
  }

  .footer-nav-list {
    min-width: 100%;
    width: 100%;
  }

  .footer-category {
    padding-bottom: 20px;
  }

  .lower-footer__content {
    padding: 0 15px;
  }

  .lower-footer__payment ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .lower-footer__payment ul > li {
    margin-right: 0;
  }

  .donation-button {
    padding: 8px 16px;
    font-size: 14px;
  }

  .footer-nav-item .icon-box {
    font-size: 20px;
  }

  .social-link .footer-nav-link {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .lower-footer__content {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }

  .lower-footer__copyright {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Styles mobile généraux pour éliminer les espaces sous le footer */
@media (max-width: 768px) {
  footer {
    position: relative !important;
    bottom: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .lower-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 100% !important;
  }
}

/* Variables supplémentaires pour la typographie responsive */

/* Styles pour les icônes de réseaux sociaux dans le footer */
.social-icon-link ion-icon,
.social-icon-link span {
  color: rgba(255,255,255,0.8) !important;
  transition: all 0.3s ease !important;
  font-size: 28px !important;
}

.social-icon-link:hover ion-icon,
.social-icon-link:hover span {
  color: white !important;
  transform: scale(1.2) !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
}
:root {
  --fs-9: 11px;
  --fs-8: 13px;
  --fs-7: 15px;
  --fs-6: 17px;
}

/* Import de la police Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ================================================== */
/* == Sections commentées car conflictuelles (début) == */
/* ================================================== */
/*
 Style pour les liens de titre de catégorie
.footer-category-title-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.footer-category-title-link:hover {
  color: var(--primary-color, #ff6b6b);
}

.footer-category-title-link h3 {
  margin: 0;
  display: inline-block;
}

 Style pour créer un alignement en "tableau"
.footer-category-box {
  padding-left: 0;
}

.footer-category-box a.footer-category-link {
  margin-left: 0;
}

 Nouvelle règle pour faire un retour à la ligne mais avec alignement
.footer-category-box {
  display: block;
}

.footer-category-title-link {
  display: inline-block;
  vertical-align: baseline;
}

.footer-category-link {
  display: inline-block;
  vertical-align: baseline;
}

 Ajustements pour les petits écrans
@media (max-width: 992px) {
  .footer-category-title {
    width: 120px;
  }

  .footer-category-links {
    width: calc(100% - 120px);
  }
}

@media (max-width: 768px) {
  .footer-category-box {
    display: block;
    margin-bottom: 20px;
  }

  .footer-category-title,
  .footer-category-links {
    display: block;
    width: 100%;
  }

  .footer-category-links {
    margin-top: 5px;
  }
}

 Réinitialisation des styles conflictuels
.footer-category-box,
.footer-category-title,
.footer-category-links,
.footer-category-title-link,
.footer-category-link {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  vertical-align: initial;
  position: static;
  flex: initial;
}
*/
/* ================================================ */
/* == Sections commentées car conflictuelles (fin) == */
/* ================================================ */

/* Commenter l'ancienne implémentation Flexbox */
/*
.footer-category-box {
// ... existing code ...
}
*/

/* ============================================ */
/* == Mise en page Catégories Footer (GRID) == */
/* ============================================ */

/* Réinitialisation de base pour les éléments de la catégorie */
.footer-category-box,
.footer-category-title,
.footer-category-links {
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les paddings par défaut */
  box-sizing: border-box; /* Inclut padding et bordure dans la taille de l'élément */
}

/* Réinitialisation et alignement vertical pour les liens et titres */
.footer-category-title-link,
.footer-category-link,
.category-box-title {
  margin: 0; /* Supprime les marges */
  padding: 0; /* Supprime les paddings */
  box-sizing: border-box; /* Gestion de la taille */
  vertical-align: baseline !important; /* Aligne le texte sur la même ligne de base */
}

/* Structure GRID pour chaque ligne de catégorie */
.footer-category-box {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 0 25px !important;
  align-items: start !important;
  margin-bottom: 15px !important;
  width: 100% !important;
  line-height: 1.6 !important;
}

/* Style pour la cellule contenant le titre */
.footer-category-title {
  /* Correspond à la première colonne de la grille (150px) */
  display: block !important; /* Assure qu'il occupe sa cellule */
  white-space: nowrap !important; /* Empêche le titre de passer à la ligne */
  /* La largeur est définie par grid-template-columns */
}

/* Style pour la cellule contenant les liens */
.footer-category-links {
  /* Correspond à la deuxième colonne de la grille (1fr) */
  display: flex !important; /* Utilise Flexbox A L'INTERIEUR de cette cellule Grid pour gérer les liens */
  flex-wrap: wrap !important; /* Permet aux liens de passer à la ligne suivante si l'espace manque */
  gap: 3px 8px !important; /* Espace entre les liens eux-mêmes (3px vertical, 8px horizontal) */
  align-items: baseline; /* Aligne la baseline des liens entre eux pour un rendu propre */
  /* justify-content: space-between !important; */ /* La justification est désactivée */
}

/* Style pour le lien contenant le titre de catégorie (<a>) */
.footer-category-title-link {
  text-decoration: none !important; /* Supprime le soulignement du lien */
  color: inherit !important; /* Hérite la couleur du texte parent */
  display: inline-block !important; /* Nécessaire pour que vertical-align fonctionne */
  vertical-align: baseline !important; /* Aligne avec la baseline des autres liens */
  transition: color 0.3s ease !important; /* Transition douce pour le changement de couleur au survol */
}

/* Effet de survol pour le lien du titre */
.footer-category-title-link:hover,
.footer-category-title-link:hover h3 { /* Cible aussi le h3 à l'intérieur */
  color: #2a7ae2 !important; /* Change la couleur en bleu au survol */
}

/* Style pour le titre lui-même (<h3>) et la classe .category-box-title */
.footer-category-title-link h3,
.category-box-title {
  margin: 0 !important; /* Supprime marges */
  padding: 0 !important; /* Supprime paddings */
  display: inline !important; /* S'affiche en ligne avec le reste du texte du lien */
  font-size: var(--fs-5) !important; /* Taille de police définie dans les variables */
  font-weight: var(--weight-600) !important; /* Met le titre en gras */
  line-height: inherit !important; /* Hérite la hauteur de ligne du parent */
  color: var(--white) !important; /* Couleur du texte en blanc */
  vertical-align: baseline !important; /* Alignement sur la ligne de base */
}

/* Style pour chaque lien de catégorie individuel (<a>) */
.footer-category-link {
  color: var(--sonic-silver) !important; /* Couleur gris clair définie dans les variables */
  font-size: var(--fs-5) !important; /* Taille de police */
  text-transform: capitalize !important; /* Met la première lettre en majuscule */
  display: inline-block !important; /* Permet padding/margin et alignement baseline */
  white-space: nowrap !important; /* Empêche le lien de passer à la ligne */
  padding: 0 5px !important; /* Petit padding horizontal pour l'espacement */
  margin: 0 !important; /* Supprime les marges par défaut */
  line-height: inherit !important; /* Hérite la hauteur de ligne */
  vertical-align: baseline !important; /* Alignement sur la ligne de base */
  transition: color 0.3s ease !important; /* Transition douce pour le survol */
}

/* Effet de survol pour les liens de catégorie */
.footer-category-link:hover {
  color: #2a7ae2 !important; /* Change la couleur en bleu au survol */
}

/* Section Responsive (Styles pour différentes tailles d'écran) */
/* -------------------------------------------------------------- */

/* Pour les écrans jusqu'à 992px de large */
@media (max-width: 992px) {
  .footer-category-box {
    grid-template-columns: 120px 1fr !important; /* Réduit la largeur de la colonne titre */
  }
}

/* Pour les écrans jusqu'à 768px de large (tablettes et mobiles) */
@media (max-width: 768px) {
  /* Change la disposition de Grid à Block pour empiler les éléments */
  .footer-category-box {
    display: block !important; /* Chaque box prend toute la largeur et s'empile */
    /* Les styles Grid sont désactivés par le display: block */
  }

  /* Le titre prend toute la largeur et a une marge en dessous */
  .footer-category-title {
    width: 100% !important; /* Prend toute la largeur */
    margin-bottom: 8px !important; /* Espace sous le titre avant les liens */
    white-space: normal !important; /* Permet au titre de passer à la ligne si trop long */
    /* flex-basis et margin-right ne sont plus pertinents avec display: block */
  }

  /* Le conteneur des liens prend toute la largeur */
  .footer-category-links {
    width: 100% !important;
     /* Flexbox interne fonctionne toujours pour gérer les liens */
  }
}

/* --- FIN de la section --- */

/* ========================== RESPONSIVE ========================== */
/* Laissez JavaScript gérer le comportement spécifique au responsive */

/* ========================== WIDGET MÉTÉO MOBILE ========================== */
/* Correction du positionnement du widget météo pour mobile */
@media (max-width: 768px) {
  /* Styles de base du widget météo */
  .nav-meteo-heure {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1070 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important; /* Suppression de l'ombre qui peut créer de l'espace */
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
    transform: translateY(-100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
    overflow: hidden !important; /* Éviter tout dépassement */
  }

  /* Widget visible */
  .nav-meteo-heure.widget-visible {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Ombre uniquement en bas */
  }

  /* Widget caché */
  .nav-meteo-heure.nav-meteo-heure--cache {
    transform: translateY(-100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* widget-meteo-heure (contenu interne) - Solution agressive */
  .widget-meteo-heure {
    margin: 0 !important;
    margin-top: -5px !important; /* Marge négative pour compenser tout espace */
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    border: none !important;
    background-color: #fff !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Icone météo et texte */
  .widget-meteo {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .widget-meteo i {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Styles spécifiques pour la première ligne avec météo & heure */
  .ligne-meteo-heure {
    margin: 0 !important;
    padding: 3px 0 0 0 !important; /* Padding minimal en haut */
    border: none !important;
    display: flex !important;
    align-items: flex-start !important; /* Aligner au début */
    min-height: 0 !important;
  }

  /* Forcer le retrait de tout espace supérieur */
  .nav-meteo-heure::before,
  .nav-meteo-heure::after,
  .nav-meteo-heure > *::before,
  .nav-meteo-heure > *::after,
  .widget-meteo-heure::before,
  .widget-meteo-heure::after,
  .ligne-meteo-heure::before,
  .ligne-meteo-heure::after,
  .widget-meteo::before,
  .widget-meteo::after,
  .widget-date-heure::before,
  .widget-date-heure::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Contenu texte météo et date/heure */
  .ville-pays, .widget-date, .widget-heure, .separateur {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important; /* Réduire la hauteur de ligne */
  }

  /* S'assurer que le contenu n'a pas de marge */
  .widget-meteo, .widget-date-heure {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Ligne d'actualités */
  .ligne-actualites {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* En-tête quand le widget est visible */
  /* body.widget-visible .en-tete {
    margin-top: var(--widget-meteo-height, 0) !important;
  } */

  /* Styles de l'en-tête */
  .en-tete {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transition: margin-top 0.3s ease !important;
  }

  /* Bouton toggle */
  .bouton-toggle-widget {
    position: fixed !important;
    z-index: 1080 !important;
    top: 5px !important;
    right: 5px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 123, 255, 0.5) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
  }

  /* Icône du bouton toggle */
  .bouton-toggle-widget i {
    color: #007bff !important;
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
  }

  /* Bouton toggle quand le widget est visible */
  body.widget-visible .bouton-toggle-widget {
    background-color: rgba(0, 123, 255, 0.9) !important;
  }

  body.widget-visible .bouton-toggle-widget i {
    color: white !important;
    transform: rotate(180deg) !important;
  }

  /* Masquer le bouton toggle quand le menu mobile est ouvert */
  body.menu-mobile-ouvert .bouton-toggle-widget {
    display: none !important;
  }

  /* CORRECTION DE L'ESPACE EN DESSOUS DU FOOTER SUR MOBILE */
  footer {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .lower-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .footer-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }

  /* S'assurer que HTML et BODY ne génèrent pas d'espace supplémentaire */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }
}

/* Styles spécifiques pour les très petits écrans */
@media (max-width: 480px) {
  footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .lower-footer__content {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }

  .lower-footer__copyright {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}