/*=================================================================================================================================================
                                                                 RESPONSIVE DESIGN
=================================================================================================================================================*/


/*######################################
  autres styles responsive spécifiques
######################################*/
/* Helper classes */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

/* Empêcher le zoom sur mobile */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 12px !important; /* Taille minimale pour éviter le zoom sur iOS */
    transform: none !important;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Désactiver le zoom sur focus */
  input:focus,
  textarea:focus,
  select:focus {
    transform: none !important;
    -webkit-transform: none !important;
  }
}
/* ======================
   Responsive: Comportement natif des details/summary
   ====================== */
   @media (max-width: 991.98px) {
    /* En responsive, activer le comportement natif des details/summary */
    .faq__answer {
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      visibility: visible !important;
    }
  
    .faq__item[open] .faq__answer {
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      visibility: visible !important;
    }
  
    /* Masquer la zone dédiée en responsive */
    .faq__content-zone {
      display: none !important;
    }
  
    /* Ajuster le titre FAQ en responsive */
    .faq__subtitle {
      margin-left: 0;
      text-align: center;
      font-size: 2.5rem;
      padding: 0 1rem ;
    }

    /* En responsive, activer le comportement natif des features_item */
    .features__item-content {
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      visibility: visible !important;
    }
  
    .features__item:not([open]) .features__item-content {
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      visibility: visible !important;
    }

    /* Masquer la zone dédiée des features en responsive */
    .features__content-zone {
      display: none !important;
    }

    /* Masquer l'image des features en responsive (≤992px) */
    .features__content-image {
      display: none !important;
    }
  }

/*###############################################################
                    fin des spécifiques
###############################################################*/

/*======================
  Mobile (up to 575px)
======================*/
/* Petits smartphones (≤ 575px)*/
@media (max-width: 575px) {
  :root {
    --font-size-hero: 24px;
    --font-size-xxl: 20px;
    --font-size-xl: 18px;
    --font-size-lg: 16px;
    --font-size-md: 14px;
    --font-size-sm: 12px;
    --spacing-xxxl: 40px;
    --spacing-xxl: 24px;
    --spacing-xl: 20px;
    --spacing-lg: 16px;
    --spacing-Vl: 60px;
  }

  /* Header mobile */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }



.navbar {
    padding: 0 15px;
    height: 100px;
    border-radius: 0;
  }

  .header__logo--img {
    margin-top: 2px;
  }

  .header__logo--img:hover {
    opacity: 0.8;
  }


  /* Styles mobile spécifiques au header */
  .logo-background  {
    display: none;
  }
    
  .header__beta-link--text {
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    padding: 8px;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  /* Navbar toggler mobile */
  .navbar-toggler {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 1.25rem;
    background: transparent;
    color: var(--vert-texte);
    margin-left: auto;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(45, 90, 61, 0.25);
    border-color: var(--vert-texte);
  }

  .navbar-toggler:hover {
    border-color: var(--vert-texte);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5em;
    height: 1.5em;
    transition: transform 0.2s ease;
  }

  /* Animation hamburger mobile */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
  }

  /* Menu mobile */
  .navbar-collapse {
    background: var(--blanc);
    margin: 0;
    padding: 1rem;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    /* transform: translateY(0%);
    transition: transform 0.3s ease; */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
  }

  .navbar-collapse.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav {
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-item {
    margin-bottom: 0.25rem;
    width: 100%;
  }

  .nav-item:last-child {
    margin-bottom: 0;
  }

  .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vert-texte);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-link.active {
    color: var(--blanc) !important;
    font-weight: 700;
    background-color: var(--vert-colline);
  }

  /* Supprimer le hover en mobile pour les nav-link uniquement */
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background-color: transparent;
    color: none;
  }


  /*======================
 Page Accueil (index.html)
======================*/

  /* Hero section */
  .hero {
    margin-top: 0;
    flex-direction: column;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    text-align: left !important;
    min-height: 100vh;
  }

  .hero__content {
    flex: none;
    padding: var(--spacing-xl) 0;
    margin-top: 150px;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 50px !important;
  }

  .hero__title {
    font-size: 2.1rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-align: left !important;
    margin-left: 0 !important;
    /* Animation gérée par JavaScript dans index.js */
  }

  .hero__subtitle {
    font-size: 1rem;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .hero__lune {
    position: absolute;
    right: 0.5px;
    object-fit: contain;
    bottom: 35px;
    width: 99%;
    height: 250px;
    margin-top: 0;
  }

  .hero__download {
    margin-top: 2rem;
    justify-content: flex-start;
    gap: 1rem;
    margin-left: 0 !important;
  }

  .download__img {
    height: 32px;
    width: auto;
  }

  /* Content spacing */
  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Features mobile adjustments */
  .features__hello-image, .features__content-image {
    display: none !important;
  }



  .features__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 62px 20px;
    position: relative; /* Nécessaire pour le positionnement absolu des enfants */
  }
  

  .features__item {
    margin: 0 auto !important;
    width: 100%;
    max-width: 400px;
    background: var(--blanc);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .features__item-content {
    position: static;
    width: 100%;
    margin-top: var(--spacing-sm);
    text-align: left;
    /* Comportement natif en responsive */
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  
  .features__item:not([open]) .features__item-content {
    /* En responsive, on garde le comportement natif des details/summary */
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .features__item-title{
    font-size: 17px;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Style pour les flèchettes en responsive mobile */
  .features__arrow {
    width: 1.2rem;
    height: 1.5rem;
    margin-left: 10px;
    flex-shrink: 0;
  }

  /* Aligner les images du footer à gauche en mobile */
  .footer-image__footer {
    display: block ;
    margin-left: 0;
    margin-right: auto;
    top: 25px;
  }

  .subscription h1 {
    font-size: 1.1rem;
    margin-right: 1rem;
  } 

  /* Typography */
  .display-1 { font-size: 1.8rem; }
  .display-2 { font-size: 1.6rem; }
  .display-3 { font-size: 1.4rem; }
  .display-4 { font-size: 1.2rem; }

  /* Cards */
  .card-body {
    padding: 1rem;
  }

  /* Forms */
  .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  /* Newsletter responsive */
.newsletter {
  margin-bottom: 100px;
}



  .newsletter__container {
    margin-bottom: clamp(60px, 15vw, 250px);
    padding: clamp(1rem, 3vw, var(--spacing-xxxl));
    padding-right: clamp(45%, 50vw, 55%);
    position: relative;
    z-index: 1;
  }
  
  .newsletter__image {
    position: absolute;
    top: clamp(90px, 10vw, 100px);
    right: clamp(20px, 4vw, 50px);
    width: 45%;
    height: clamp(50%, 60vw, 70%);
    object-fit: cover;
    border-radius: clamp(15px, 3vw, 25px);
    z-index: 1000;
    opacity: 1;
  }
  
  .newsletter__title {
    font-size: 20px;
    margin-left: 3px;
    margin-bottom: clamp(1rem, 3vw, var(--spacing-xl));
  }
  
  .newsletter__form {
    max-width: clamp(200px, 50vw, 350px);
    gap: clamp(0.5rem, 2vw, var(--spacing-md));
    padding: 1px;
    align-items: flex-start;
    margin-left: 1px;
  }

  /* Boutons dans les formulaires responsive */
  .btn--uni {
    max-height: 5px !important;
  }

  .newsletter__form .btn--uni,
  .podcast__description .btn--uni,
  .subscription__button {
    padding: 12px 24px;
    font-size: 1rem;
    max-height: 20px;
    width: auto;
    max-width: none;
    min-width: auto;
  }
  
  .newsletter__email {
    padding: clamp(0.5rem, 2vw, var(--spacing-md));
    font-size: clamp(0.8rem, 2.5vw, var(--font-size-md));
  }

  .newsletter__submit {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    padding: clamp(8px, 2vw, 12px) clamp(16px, 3vw, 24px);
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    min-width: auto;
    max-width: 200px;
  }

  .footer-image__wrapper {
    margin-top: 10px;
  }

  
/*======================
  Illustrations animées - Disposition 2x2 avec Flexbox
======================*/

.animation__container {
  display: block;
  gap: 5px;                               /* espacement vertical minimal entre les lignes */
  width: 100%;                            /* largeur max du conteneur */
  max-width: 90%;                      /* augmenter la largeur max pour plus d'espace */
  margin: 10px auto;                      /* marges minimales */
  padding: 0 5px;                         /* padding minimal pour éviter les bords */
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  /* SOLUTION FINALE : Assurer que le conteneur s'adapte aux changements */
  position: relative;
  height: auto;
  overflow: visible;
}

/* Première ligne : pois et frigo */
.animation__row--top {
  gap: 5px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 100px;
}

/* Deuxième ligne : slogan et bras */
.animation__row--bottom {
  gap: 5px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 100px;
}

/* Chaque bloc individuel */
.animation__container--bloc1,
.animation__container--bloc2,
.animation__container--bloc3,
.animation__container--bloc4 {
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  padding: 2px;                           /* padding minimal */
  position: relative;                      /* pour le positionnement des overlays */
  overflow: visible;                        /* éviter les débordements */
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 100px;
}

  /* Podcast mobile */
  #podcast {
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .podcast__latest {
    margin-top: 70px;
    margin-left: 10px;
    flex: 0 0 68%;
    max-width: 110%;
  }
  
  .podcast__latest h1{
    font-size: 18px;
    margin-left: 0;
    white-space: nowrap;
    z-index: 1000;
  }

  .podcast__img {
    width: 75%;
    height: auto;
    margin-left: 0;
    margin-right: auto;
  }

  .podcast__description {
    flex: 0 0 28%;
    width: 100%;
    margin-left: -60px;
    margin-right: 0;
    text-align: left;
    margin-top: 105px;
    margin-right: 4px;
    padding: 0;
    white-space: nowrap;
  }


  .podcast__description p {
    font-size: 0.9rem;
    margin-top: 40px;
    margin-right: 7px;
  }



.btn--uni.podcast__button {
    margin-right: 14px !important;
    bottom: 10px;
  }

  /* Newsletter mobile */
  .newsletter__form {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  /* Footer mobile */
  .footer {
    padding: 40px 20px;
    border-radius: 20px 20px 0 0;
  }

  .footer__title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .footer__button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .footer__button:hover {
    padding-right: 45px;
  }

  .footer__download {
    flex-direction: column;
    gap: 16px;
  }

  .footer__download .download__img {
    height: 30px;
    border-radius: 8px;

  }

  .footer__bottom {
    text-align: center;
    gap: 16px;
    padding-top: var(--spacing-lg);
  }

  .footer__bottom .row {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
  }

  .footer__nav {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }


  .footer__links {
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .footer__links a {
    white-space: nowrap;
    display: block;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    padding: 0.25rem 0;
  }

  /* affichage du footer social en responsive */
  .footer__social {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: -10px;
  }

  .footer__social--list {
    display: flex !important;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    text-align: right;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__social--list a {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    white-space: nowrap;
    color: #000000;
    text-decoration: none;


    justify-content: flex-end;
    font-weight: 600;
    padding: 0.25rem 0;
  }

  .footer__social--list a i {
    font-size: 14px;
    flex-shrink: 0;
  }

  .footer .col-md-6 {
    width: auto;
    flex: 1;
  }

  .footer .col-md-6:first-child {
    text-align: left;
  }

  .footer .col-md-6:last-child {
    text-align: right;
  }

  .footer .text-md-end {
    text-align: right;
  }

  .footer .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.25rem;
  }

  



/*======================
 Page Accès Bêta
======================*/

  .beta__container {
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .beta__content {
    max-width: none;
    width: 100%;
    margin-left: 1px;
  }

  .beta__description, .beta__benefits li {
    font-size: 14px;
    font-weight: 510;
    max-width: 100%;
    padding: 10px;
    line-height: 1;
    margin: 0;
}
  .beta__description p {
    margin-bottom: 5px;
    margin-top: 15px;
  }
  
  .beta__benefits {
    margin-bottom: 1px;
    margin-top: 0px;
    margin-left: 30px;
    padding: 0;
  }

  .beta__sidebar {
    margin-top: 10px;
    min-height: 100vh;
    max-height: none;
    max-width: 100%;
    width: 100%;
    overflow-y: visible;
    justify-self: start;
    margin-left: 0;
    margin-right: 0;
  }

  .beta__access-counter {
    padding: 10px 20px;
    margin-top: 15px;
    margin-bottom: 2px;
    margin-left: 10%;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: fit-content;

  }

  .access-label, .access-count {
    font-size: 18px;
    font-weight: 510;
}

  .beta__title {
    font-size: 36px;
    margin-left: 0;
    margin-top: 10px;
  }
  .beta__note {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-weight: 510;
    max-width: 100%;
    padding: 10px;
    line-height: 1.2;
    margin: 0;
}
  .beta__form {
    padding: var(--spacing-xs);
  }
  
  h2.form__subtitle {
    font-size: 36px;
  }

.form__input {
    font-size: 0.1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 12px;
    border-radius: 16px;
    height: 40px;
  }
  
.form__input--textarea {
    /* font-size: 0.5rem; */
    margin-bottom: 2px;
    min-height: 60px;
    height: 150px;
    width: 100%;
    box-sizing: border-box;
  }
  .form__input--textarea:focus {
    /* font-size: 0.5rem;   */
    margin-bottom: 2px;
    min-height: 60px;
    height: 150px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .invite-pair {
    gap: var(--spacing-xxs);
  }
  
  .invite-pair .form__input {
    min-width: 0;
    flex: 1;
  }

  /* .form__input--normal {
    width: 241px;
     height: 62px;
} */

  
.form__group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form__group--invites {
    margin-top: 0;
  }

  .plus-button {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .form__submit.btn--uni {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 36px;
    width: 70%;
    max-width: 250px;
  }




/*======================
 Page Contact (contact.html)
======================*/
.contact__content {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
}

.contact__content1 {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  margin: 0;
  max-width: none;
}

.contact__info {
  border-radius: 0;
}

.form__type {
  gap: 0.5rem;
  margin-left: -15px;
}

.form__type::before {
  font-size: 1.2rem;
  white-space: nowrap;
  margin-right: 0;
}


.form__radio {
  gap: 0.2rem;
  font-size: 0.1rem;
  padding: 0.1rem 0.1rem;
  border-radius: 5px;
}
.form__radio span {
  font-size: 0.9rem;
}


.form__input--objet {
  margin-bottom: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 16px;
  height: auto;
  min-height: 50px;
}

.form__group--textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  min-height: 200px;
}

.form__textarea {
  padding: 0.2rem;
  border-radius: 16px;
  width: 100%;
}



.form__submit {
  padding: 0.8rem 1rem;
  border-radius: 16px;
  flex-shrink: 0;
  margin-top: 5px;
}

.form__title {
  font-size: 1.2rem;
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  width: 100%;
}

.faq {
  margin : 4px;
}

/* Optimiser la largeur de la liste FAQ en responsive */
  .faq__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .faq__item {
    padding: 20px;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    background: var(--blanc);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
  }

  .faq__question {
    font-size: 17px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    white-space: normal;
    width: 100%;
  }

  /* Style pour les flèchettes FAQ en responsive mobile */
  .faq__arrow {
    width: 1.2rem;
    height: 1.5rem;
    margin-left: 10px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
  }

  .faq__item[open] .faq__arrow {
    transform: rotate(0deg);
  }

  .faq__answer {
    position: static;
    width: 100%;
    margin-top: var(--spacing-sm);
    text-align: left;
  }

.faq__item[open] .faq__answer  {
  opacity: 1;
  pointer-events: auto;
}

/*======================
 Page Blog (blog.html)
======================*/

.hero__bloc {
  padding-top: 60px;
}
.section__container {
  padding: 50px 0;
}
.section__container--title {
  font-size: 2rem;
  text-align: center;
  margin-left: 0;
  margin-bottom: 0;
}
#blog {
  padding: 40px 15px;
}
.section__article {
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 30px;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.section__article--img {
  width: 100%;
  height: 280px;
  margin-left: 0;
  order: -1;
}
.section__article--content {
  text-align: center;
}
.section__article--header {
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}
.section__article--title {
  font-size: 1.25rem;
  text-align: center;
}
.section__article--date {
  align-self: center;
}
.section__article--description {
  font-size: 0.9rem;
  text-align: center;
}
.section__article--btn {
  align-self: center;
  padding: 10px 20px;
  font-size: 0.9rem;
  /* Désactiver complètement les transitions et animations en responsive */
  transition: none !important;
  transform: none !important;
}


/*======================
 Page Article (article.html)
======================*/

.article__main {
  padding-top: 60px;
}
.article__back {
  padding: 20px 20px 0 20px;
}
.article__container {
  padding: 20px;
  margin: auto;
}
.article__title {
  display: flex;
  align-items: left;
  font-size: 1.3rem;
  margin: 6px;
  white-space: normal;
  text-align: left;

}
.article__meta {
  font-size: 0.1rem;
  font-weight: 200;
  flex-direction: row;
  align-items: flex-start;
  margin-left: 10px;
  white-space: nowrap;
}
.article__reading-time, .article__author, .article__separator {
  font-size: 16px;
  font-weight: 600;
}

.article__reading-time i {
  font-size: 16px;
  font-weight: 900;
  margin-right: 10px;
}

.article__image-placeholder {
  height: 250px;
}
/* Stack columns on mobile */
.article__content {
  flex-direction: column;
  gap: 20px;
}

/* Text Column - left side */
.article__text-column {
  flex: 1;
  max-width: 98%;
}

.article__text-column h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 10px 0;
  padding-top: 10px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column h4,
.article__sources h4  {
  font-size: 16px;
  font-weight: 600;
  margin: 2px 0 2px 0;
  padding-top: 1px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column p,
.article__text-column ul,
.article__text-column ol,
.article__text-column li,
.article__sources li,
.article__sources ul {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin: 8px 0 2px 0;
  max-width: 100%;
  text-align: left;
  word-wrap: break-word;
}

/* Section sources */
.article__sources {
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
  margin-right: 30px;
  border-left: 4px solid var(--vert-texte);
  max-width: 100%;
}

.article__image--secondary {
  display: none; /* désactiver l'image à coté du texte en mobile */
  width: 100%;
  flex-shrink: 0;
}
.article__image-placeholder--small {
  height: 180px;
  width: 40%;
  top: -600px;
  margin-left: 220px;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.back-link {
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: left;
  position: relative;
  overflow: hidden;
  margin-left: -5px;
  margin-right: auto;
}

.article__navigation {
  flex-direction: row;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
}

.nav-button {
  font-size: 0.8rem;
  padding: 5px 8px;
  width: 40%;
}
.nav-button--prev,
.nav-button--next {
  margin: 0;
  text-align: center;
}

.nav-button:hover {
  color: none;
  border-color: none;
  background-color: none;
  text-decoration: none;
}

}




/* Mobiles (≤ 768px) */
@media (min-width: 576px) and (max-width: 767px) {
  :root {
    --font-size-hero: 26px;
    --font-size-xxl: 22px;
    --font-size-xl: 20px;
    --font-size-lg: 18px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --spacing-xxxl: 44px;
    --spacing-xxl: 28px;
    --spacing-xl: 24px;
    --spacing-lg: 20px;
    --spacing-Vl: 66px;
  }

  /* Header mobile */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }

  .navbar {
    padding: 0 18px;
    height: 110px;
    border-radius: 0;
  }


  .header__logo--img {
    margin-top: 2px;
  }

  .header__logo--img:hover {
    opacity: 0.8;
  }
  /* Styles mobile spécifiques au header */
  .logo-background  {
    display: none;
  }
    
  .header__beta-link--text {
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    padding: 8px;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  /* Navbar toggler mobile */
  .navbar-toggler {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 0.375rem;
    padding: 0.45rem 0.7rem;
    font-size: 1.3rem;
    background: transparent;
    color: var(--vert-texte);
    margin-left: auto;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(45, 90, 61, 0.25);
    border-color: var(--vert-texte);
  }

  .navbar-toggler:hover {
    border-color: var(--vert-texte);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.6em;
    height: 1.6em;
    transition: transform 0.2s ease;
  }

  /* Animation hamburger mobile */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
  }

  /* Menu mobile */
  .navbar-collapse {
    background: var(--blanc);
    margin: 0;
    padding: 1.2rem;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
  }

  .navbar-collapse.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav {
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-item {
    margin-bottom: 0.3rem;
    width: 100%;
  }

  .nav-item:last-child {
    margin-bottom: 0;
  }

  .nav-link {
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vert-texte);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  /*======================
   Page Accueil (index.html)
  ======================*/

  /* Hero section */
  .hero {
    margin-top: 0;
    flex-direction: column;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    text-align: left !important;
    min-height: 85vh;
  }

  .hero__content {
    flex: none;
    padding: var(--spacing-xl) 0;
    margin-top: 250px;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 55px !important;
  }

  .hero__title {
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 1.7rem;
    text-align: left !important;
    margin-left: 0 !important;
    /* Animation gérée par JavaScript dans index.js */
  }

  .hero__subtitle {
    font-size: 0.9rem;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .hero__lune {
    position: absolute;
    right: 0.5px;
    object-fit: contain;
    bottom: 74px;
    width: 99%;
    height: 310px;
    margin-top: 0;
    
  }

  .hero__download {
    margin-top: 11rem;
    justify-content: flex-start;
    gap: 1.2rem;
    margin-left: 0 !important;
  }

  .download__img {
    height: 35px;
    width: auto;
  }

  /* Content spacing */
  .container,
  .container-fluid {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* Features mobile adjustments */
  .features__hello-image, .features__content-image {
    display: none !important;
  }

  .features__list {
    padding: 24px;
  }

  .features__item {
    margin-left: 0 !important;
  }

  .features__item-content {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .features__item:not([open]) .features__item-content {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  /* Aligner les images du footer à gauche en mobile */
  .footer-image__footer {
    display: block;
    margin-left: 24px;
    margin-right: auto;
    top: 5px;

  }

  .subscription h1 {
    font-size: 1.2rem;
    margin-right: 1.2rem;
  } 

  /* Typography */
  .display-1 { font-size: 2rem; }
  .display-2 { font-size: 1.8rem; }
  .display-3 { font-size: 1.6rem; }
  .display-4 { font-size: 1.4rem; }

  /* Cards */
  .card-body {
    padding: 1.4rem;
  }

  /* Forms */
  .form-control-lg {
    padding: 0.85rem 1.2rem;
    font-size: 0.9rem;
  }

  /* Newsletter responsive */
  .newsletter__container {
    margin-bottom: clamp(66px, 16vw, 275px);
    padding: clamp(1.2rem, 3.3vw, var(--spacing-xxxl));
    padding-right: clamp(47%, 52vw, 57%);
    position: relative;
    z-index: 1;
  }
  
  .newsletter__image {
    position: absolute;
    top: 110px;
    right: 25px;
    width: 50%;
    height: 82%;
    object-fit: cover;
    border-radius: clamp(17px, 3.3vw, 27px);
    z-index: 1000;
    opacity: 1;
  }
  
  .newsletter__title {
    font-size: clamp(1.3rem, 4.4vw, var(--font-size-xxl));
    margin-left: 2px;
    margin-bottom: clamp(1.2rem, 3.3vw, var(--spacing-xl));
  }
  
  .newsletter__form {
    display: flex;
    flex-direction: column;
    max-width: clamp(220px, 52vw, 385px);
    gap: clamp(0.6rem, 2.2vw, var(--spacing-md));
    padding: clamp(0.6rem, 2.2vw, var(--spacing-md));
    align-items: flex-start;
    margin-left: -15px;
  }

  /* Boutons dans les formulaires responsive */
  .newsletter__form .btn--uni,
  .podcast__description .btn--uni,
  .subscription__button {
    padding: 13px 26px;
    font-size: 1.1rem;
    min-height: 48px;
    width: auto;
    max-width: none;
    min-width: auto;
  }
  
  .newsletter__email {
    padding: clamp(0.6rem, 2.2vw, var(--spacing-md));
    font-size: clamp(0.9rem, 2.7vw, var(--font-size-md));
  }

  .newsletter__submit {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    padding: clamp(9px, 2.2vw, 13px) clamp(18px, 3.3vw, 26px);
    font-size: clamp(0.9rem, 2.7vw, 1.1rem);
    min-width: auto;
    max-width: 220px;
  }

  
/*======================
  Illustrations animées - Disposition 2x2 avec Flexbox
======================*/

.animation__container {
  gap: 15px;                               /* espacement vertical minimal entre les lignes */
  width: 100%;                            /* largeur max du conteneur */
  max-width: 90%;                      /* augmenter la largeur max pour plus d'espace */
  margin: 10px auto;                      /* marges minimales */
  padding: 0 5px;                         /* padding minimal pour éviter les bords */
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 15px;
}

/* Première ligne : pois et frigo */
.animation__row--top {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  height: 200px;                           /* hauteur fixe et uniforme */
}

/* Deuxième ligne : slogan et bras */
.animation__row--bottom {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  height: 200px;                           /* hauteur fixe et uniforme */
}

/* Chaque bloc individuel */
.animation__container--bloc1,
.animation__container--bloc2,
.animation__container--bloc3,
.animation__container--bloc4 {
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  padding: 2px;                           /* padding minimal */
  position: relative;                      /* pour le positionnement des overlays */
  overflow: visible;                        /* éviter les débordements */
  height: 200px;                          /* hauteur fixe et uniforme */
}



  /* Podcast mobile */
  #podcast {
    flex-direction: row;
    gap: 1.2rem;
    align-items: flex-start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .podcast__latest {
    margin-left: 18px;
    flex: 0 0 70%;
    margin-bottom: 40px;
  }

  .podcast__latest h1 {
    font-size: 1.8rem;
    margin-top: 10px;
    margin-right: 8px;
    margin-left: 5px;
  }

  .podcast__img {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: auto;
  }

  .podcast__description {
    flex: 0 0 30%;
    margin-left: 0;
    margin-right: 18px;
    text-align: left;
  }

  .podcast__description p {
    font-size: 1rem;
    margin-top: 230px;
    margin-right: 8px;
  }

  .btn--uni.podcast__button {
    margin-right: 15px !important;
    bottom: 11px;
  }

  /* Newsletter mobile */
  .newsletter__form {
    flex-direction: column;
    gap: 1.2rem;
    align-items: stretch;
  }

  /* Footer mobile */
  .footer {
    padding: 44px 22px;
    border-radius: 22px 22px 0 0;
  }

  .footer__title {
    font-size: 22px;
    margin-bottom: 22px;
  }

  .footer__button {
    padding: 11px 22px;
    font-size: 1rem;
  }

  .footer__button:hover {
    padding-right: 49px;
  }

  .footer__download {
    flex-direction: column;
    gap: 18px;
  }

  .footer__download .download__img {
    height: 44px;
  }

  .footer__bottom {
    text-align: center;
    gap: 18px;
    padding-top: var(--spacing-lg);
  }

  .footer__bottom .row {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__nav {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  .footer__social {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    margin-right: 0;
  }

  .footer__links {
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    margin-left: -90px;
    padding-left: 0;
  }

  .footer__links a {
    white-space: nowrap;
    display: block;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
  }

  .footer__social--list {
    flex-direction: column;
    gap: 0.3rem;
    text-align: right;
    align-items: flex-end;
    margin-right: -90px;
  }

  .footer__social--list a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    font-size: 10px;
  }

  .footer__social--list a i {
    flex-shrink: 0;
  }

  .footer .col-md-6 {
    width: auto;
    flex: 1;
  }

  .footer .col-md-6:first-child {
    text-align: left;
  }

  .footer .col-md-6:last-child {
    text-align: right;
  }

  .footer .text-md-end {
    text-align: right;
  }

  .footer .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.3rem;
  }

  /*======================
   Page Accès Bêta
  ======================*/

  .beta__container {
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .beta__content {
    max-width: none;
    width: 100%;
    margin-left: 2px;
  }

  .beta__description p {
    margin-bottom: 6px;
    margin-top: 17px;
  }
  
  .beta__benefits {
    margin-bottom: 6px;
    margin-top: 0px;
    margin-left: 33px;
    padding: 0;
  }

  .beta__sidebar {
    margin-top: 11px;
    min-height: 100vh;
    max-height: none;
    max-width: none;
    width: 100%;
    overflow-y: visible;
    justify-self: start;
    margin-left: 0;
    margin-right: 0;
  }

  .beta__access-counter {
    margin-top: 17px;
    margin-bottom: 3px;
    margin-left: 55px;
    margin-right: auto;
    justify-content: center;
    align-items: center;
  }
  
  .beta__title {
    font-size: 40px;
    margin-left: 0;
    margin-top: 50px;
  }
  
  .beta__form {
    padding: var(--spacing-xs);
  }
  
  h2.form__subtitle {
    font-size: 40px;
  }

  .form__input {
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 15px;
    border-radius: 22px;
  }
  
  .form__input--textarea {
    font-size: 0.9rem;
    margin-bottom: 4px;
    min-height: 66px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .invite-pair {
    gap: var(--spacing-xxs);
  }
  
  .invite-pair .form__input {
    min-width: 0;
    flex: 1;
  }
  
  .form__group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form__group--invites {
    margin-top: 0;
  }

  .plus-button {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .form__submit.btn--uni {
    padding: 9px 18px;
    font-size: 0.9rem;
    min-height: 40px;
    width: 75%;
    max-width: 275px;
  }

  /*======================
   Page Contact (contact.html)
  ======================*/
  .contact__content {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .contact__content1 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin: 0;
    max-width: none;
  }

  .contact__info {
    border-radius: 0;
  }

  .form__type {
    gap: 0.6rem;
  }

  .form__type::before {
    font-size: 1.7rem;
    font-weight: 550;
  }

  .form__radio {
    gap: 0.6rem;
    font-size: 1.1rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
  }

  .form__input--objet {
    margin-bottom: 0.6rem;
    width: 100%;
    padding: 0.6rem;
    border-radius: 22px;
    height: auto;
    min-height: 60px;
  }

  .form__group--textarea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    min-height: 260px;
  }

  .form__textarea {
    padding: 0.35rem;
    border-radius: 22px;
    width: 100%;
  }

  .form__submit {
    padding: 1rem 1.2rem;
    border-radius: 22px;
    flex-shrink: 0;
    margin-top: 8px;
  }

  .form__title {
    font-size: 2.6rem;
    font-weight: 750;
    margin: 0;
    padding: 2.1rem 1.3rem;
    text-align: center;
    width: 100%;
  }

  .faq__item {
    padding: 26px;
  }

  .faq__item {
    margin-left: 0 !important;
  }

  .faq__answer {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }

  .faq__item[open] .faq__answer {
    opacity: 1;
    pointer-events: auto;
  }

  /*======================
   Page Blog (blog.html)
  ======================*/

  .hero__bloc {
    padding-top: 66px;
  }
  .section__container {
    padding: 55px 0;
  }
  .section__container--title {
    font-size: 2.2rem;
    text-align: center;
    margin-left: 0;
    margin-bottom: 0;
  }
  #blog {
    padding: 44px 17px;
  }
  .section__article {
    flex-direction: column;
    gap: 22px;
    padding: 22px;
    width: 100%;
    max-width: none;
    margin-bottom: 28px;
    align-items: center;
    justify-content: center;
    margin: auto;
  }
  .section__article--img {
    width: 100%;
    height: 505px;
    margin-left: 0;
    order: -1;
  }
  .section__article--content {
    text-align: center;
  }
  .section__article--header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
  }
  .section__article--title {
    font-size: 1.6rem;
    text-align: center;
  }
  .section__article--date {
    align-self: center;
  }
  .section__article--description {
    font-size: 1.1rem;
    text-align: center;
  }
  .section__article--btn {
    align-self: center;
    padding: 13px 26px;
    font-size: 1.1rem;
    transition: none !important;
    transform: none !important;
  }

  /*======================
   Page Article (article.html)
  ======================*/

  .article__main {
    padding-top: 66px;
  }
  .article__back {
    padding: 26px 26px 0 26px;
  }
  .article__container {
    padding: 0px;
    width: 100%;
    max-width: none;
  }
  .article__title {
    font-size: 2.3rem;
    margin-left: -30px;
    margin-top: 20px;
    max-width: 90%;

  }
  .article__meta {
    font-size: 1.1rem;
    flex-direction: row;
    align-items: flex-start;
    margin-left: -30px;
    gap: 8px;
    white-space: nowrap;
  }

  /* .article__reading-time, .article__author, .article__separator {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
  } */

  .article__image-placeholder {
    height: 300px;
    max-width: 90%;
  }
  .article__content {
    flex-direction: column;
    gap: 26px;
    max-width: 90%;
    margin-left: -20px;
  }
  .article__text-column p {
    font-size: 1.1rem;
    max-width: 100%;
    width: 95%;
    text-align: left;
    margin-left: -10px;
  }
  .article__text-column h3 {
    white-space: nowrap;
  }
  .article__image--secondary {
    display: none; /* désactiver l'image à coté du texte en mobile */
    width: 100%;
    flex-shrink: 0;
  }
  .article__image-placeholder--small {
    height: 234px;
  }
  .article__navigation {
    flex-direction: row;
    gap: 21px;
    justify-content: space-between;
    align-items: center;
  }

  .back-link {
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: left;
    position: relative;
    overflow: hidden;
    margin-left: -5px;
    margin-right: auto;
  }

  .nav-button {
    font-size: 1.1rem;
    padding: 8px 11px;
    width: 46%;
  }
  .nav-button--prev,
  .nav-button--next {
    margin: 0;
    text-align: center;
  }

  .nav-button:hover {
    color: none;
    border-color: none;
    background-color: none;
    text-decoration: none;
  }
}

/* Tablettes portrait (≤ 992px) */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --font-size-hero: 28px;
    --font-size-xxl: 24px;
    --font-size-xl: 22px;
    --font-size-lg: 20px;
    --font-size-md: 18px;
    --font-size-sm: 16px;
    --spacing-xxxl: 48px;
    --spacing-xxl: 32px;
    --spacing-xl: 28px;
    --spacing-lg: 24px;
    --spacing-Vl: 72px;
  }

  /* Header mobile */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }

  .navbar {
    padding: 0 20px;
    height: 120px;
    border-radius: 0;
  }


  .header__logo--img {
    margin-top: 2px;
  }

  .header__logo--img:hover {
    opacity: 0.8;
  }
  /* Styles mobile spécifiques au header */
  .logo-background  {
    display: none;
  }
    
  .header__beta-link--text {
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    padding: 8px;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  /* Navbar toggler mobile */
  .navbar-toggler {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 0.375rem;
    padding: 0.5rem 0.8rem;
    font-size: 1.4rem;
    background: transparent;
    color: var(--vert-texte);
    margin-left: auto;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(45, 90, 61, 0.25);
    border-color: var(--vert-texte);
  }

  .navbar-toggler:hover {
    border-color: var(--vert-texte);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.7em;
    height: 1.7em;
    transition: transform 0.2s ease;
  }

  /* Animation hamburger mobile */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 90, 61, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
  }

  /* Menu mobile */
  .navbar-collapse {
    background: var(--blanc);
    margin: 0;
    padding: 1.4rem;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
  }

  .navbar-collapse.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav {
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-item {
    margin-bottom: 0.35rem;
    width: 100%;
  }

  .nav-item:last-child {
    margin-bottom: 0;
  }

  .nav-link {
    padding: 0.95rem 1.4rem;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--vert-texte);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }


  /*======================
   Page Accueil (index.html)
  ======================*/

  /* Hero section */
  .hero {
    margin-top: 0;
    flex-direction: column;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    text-align: left !important;
    min-height: 90vh;
  }

  .hero__content {
    flex: none;
    padding: var(--spacing-xl) 0;
    margin-top: 120px;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 60px !important;
    max-width: 90%;
  }

  .hero__title {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 1.9rem;
    text-align: left !important;
    margin-left: 0 !important;
    margin-top: 100px;
    /* Animation gérée par JavaScript dans index.js */
  }

  .hero__subtitle {
    font-size: 1rem;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .hero__lune {
    position: absolute;
    right: 0.5px;
    object-fit: contain;
    bottom: 75px;
    width: 99%;
    height: 300px;
    margin-top: 0;
    margin-right: -100px;
  }

  .hero__download {
    margin-top: 8rem;
    justify-content: flex-start;
    gap: 1.4rem;
    margin-left: 0 !important;
  }
  .download__img {
    height: 58px;
    width: auto;
    border-radius: 12px;
  }


  /* Content spacing */
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Features mobile adjustments */
  .features__hello-image, .features__content-image {
    display: none !important;
  }

  .features__list {
    padding: 28px;
  }

  .features__item {
    margin-left: 0 !important;
  }

  .features__item-content {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .features__item:not([open]) .features__item-content {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  /* Aligner les images du footer à gauche en mobile */
  .footer-image__footer {
    display: block;
    margin-left: 20px;
    margin-right: auto;
    top: 7px;
  }

  .subscription h1 {
    font-size: 1.3rem;
    margin-right: 1.4rem;
  } 

  /* Typography */
  .display-1 { font-size: 2rem; }
  .display-2 { font-size: 1.8rem; }
  .display-3 { font-size: 1.6rem; }
  .display-4 { font-size: 1.4rem; }

  /* Cards */
  .card-body {
    padding: 1.4rem;
  }

  /* Forms */
  .form-control-lg {
    padding: 0.95rem 1.4rem;
    font-size: 1rem;
  }

  /* Newsletter responsive */
  .newsletter__container {
    margin-bottom: clamp(72px, 17vw, 300px);
    padding: clamp(1.4rem, 3.6vw, var(--spacing-xxxl));
    padding-right: clamp(49%, 54vw, 59%);
    position: relative;
    z-index: 1;
  }
  
  .newsletter__image {
    position: absolute;
    top: clamp(120px, 12vw, 120px);
    right: clamp(28px, 4.8vw, 60px);
    width: 50%;
    height: 85%;
    object-fit: cover;
    border-radius: clamp(19px, 3.6vw, 29px);
    z-index: 1000;
    opacity: 1;
  }
  
  .newsletter__title {
    font-size: clamp(1.4rem, 4.8vw, var(--font-size-xxl));
    margin-left: 5px;
    margin-bottom: clamp(1.4rem, 3.6vw, var(--spacing-xl));
  }
  
  .newsletter__form {
    display: flex;
    flex-direction: column;
    max-width: clamp(240px, 54vw, 420px);
    gap: clamp(0.7rem, 2.4vw, var(--spacing-md));
    padding: clamp(0.7rem, 2.4vw, var(--spacing-md));
    align-items: flex-start;
    margin: 0;
  }

  /* Boutons dans les formulaires responsive */
  .newsletter__form .btn--uni,
  .podcast__description .btn--uni,
  .subscription__button {
    padding: 14px 28px;
    font-size: 1.2rem;
    min-height: 52px;
    width: auto;
    max-width: none;
    min-width: auto;
  }
  
  .newsletter__email {
    padding: clamp(0.7rem, 2.4vw, var(--spacing-md));
    font-size: clamp(1rem, 2.9vw, var(--font-size-md));
  }

  .newsletter__submit {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    padding: clamp(10px, 2.4vw, 14px) clamp(20px, 3.6vw, 28px);
    font-size: clamp(1rem, 2.9vw, 1.2rem);
    min-width: auto;
    max-width: 240px;
  }

  
/*======================
  Illustrations animées - Disposition 2x2 avec Flexbox
======================*/
.animation__container {
  display: block;
  gap: 15px;                               /* espacement vertical minimal entre les lignes */
  width: 100%;                            /* largeur max du conteneur */
  max-width: 90%;                      /* augmenter la largeur max pour plus d'espace */
  margin: 10px auto;                      /* marges minimales */
  padding: 0 5px;                         /* padding minimal pour éviter les bords */
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 25px;
  /* SOLUTION FINALE : Assurer que le conteneur s'adapte aux changements */
  position: relative;
  height: auto;
  overflow: visible;
}

/* Première ligne : pois et frigo */
.animation__row--top {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  margin-bottom: 15px;
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 200px;
}

/* Deuxième ligne : slogan et bras */
.animation__row--bottom {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 200px;
}

/* Chaque bloc individuel */
.animation__container--bloc1,
.animation__container--bloc2,
.animation__container--bloc3,
.animation__container--bloc4 {
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  padding: 2px;                           /* padding minimal */
  position: relative;                      /* pour le positionnement des overlays */
  overflow: visible;                        /* éviter les débordements */
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 200px;
}



  /* Podcast mobile */
  #podcast {
    flex-direction: row;
    gap: 1.4rem;
    align-items: flex-start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .podcast__latest {
    margin-left: 21px;
    flex: 0 0 72%;
  }

  .podcast__latest h1{
    font-size: 30px;
    margin-left: 0;
    white-space: nowrap;
    z-index: 1000;
  }

  .podcast__img {
    width: 80%;
    height: auto;
    margin-left: 0;
    margin-right: auto;
  }

  .podcast__description {
    flex: 0 0 32%;
    margin-left: -100px;
    text-align: left;
    margin-top: 100px;
  }

  .podcast__description p {
    font-size: 1.1rem;
    margin-top: 120px;
    margin-right: 9px;
  }

  .btn--uni.podcast__button {
    margin-right: 16px !important;
    bottom: 12px;
  }

  /* Newsletter mobile */
  .newsletter__form {
    flex-direction: column;
    gap: 1.4rem;
    align-items: stretch;
    margin-left: -20px;
  }

  /* Footer mobile */
  .footer {
    padding: 48px 24px;
    border-radius: 24px 24px 0 0;
  }

  .footer__title {
    font-size: 44px;
    margin-bottom: 24px;
  }

  .footer__button {
    padding: 12px 24px;
    font-size: 1.1rem;
  }

  .footer__button:hover {
    padding-right: 53px;
  }

  .footer__download {
    flex-direction: column;
    gap: 20px;
  }

  .footer__download .download__img {
    height: 48px;
  }

  .footer__bottom {
    text-align: center;
    gap: 20px;
    padding-top: var(--spacing-lg);
  }

  .footer__bottom .row {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__nav {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  .footer__social {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    margin-right: 0;
  }

  .footer__links {
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    padding-left: 0;
    margin-left: -10px;
  }

  .footer__links a {
    white-space: nowrap;
    display: block;
    overflow: visible;
    text-overflow: clip;
    font-size: 16px;
  }

  .footer__social--list {
    flex-direction: column;
    gap: 0.35rem;
    text-align: right;
    align-items: flex-end;
    margin-right: -50px;
  }

  .footer__social--list a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    font-size: 16px;
  }

  .footer__social--list a i {
    flex-shrink: 0;
  }

  .footer .col-md-6 {
    width: auto;
    flex: 1;
  }

  .footer .col-md-6:first-child {
    text-align: left;
  }

  .footer .col-md-6:last-child {
    text-align: right;
  }

  .footer .text-md-end {
    text-align: right;
  }

  .footer .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.35rem;
  }

  /*======================
   Page Accès Bêta
  ======================*/

  .beta__container {
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .beta__content {
    max-width: none;
    width: 100%;
    margin-left: 3px;
  }

  .beta__description p {
    margin-bottom: 7px;
    margin-top: 19px;
  }
  
  .beta__benefits {
    margin-bottom: 7px;
    margin-top: 0px;
    margin-left: 36px;
    padding: 0;
  }

  .beta__sidebar {
    margin-top: 12px;
    min-height: 100vh;
    max-height: none;
    max-width: none;
    width: 100%;
    overflow-y: visible;
    justify-self: start;
    margin-left: 0;
    margin-right: 0;
  }

  .beta__access-counter {
    margin-top: 19px;
    margin-bottom: 4px;
    margin-left: 60px;
    margin-right: auto;
    justify-content: center;
    align-items: center;
  }
  
  .beta__title {
    font-size: 40px;
    margin-left: 0;
    margin-top: 50px;
  }
  
  .beta__form {
    padding: var(--spacing-xs);
  }

  h2.form__subtitle {
    font-size: 40px;
  }
  
  .form__input {
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 15px;
    border-radius: 22px;
  }
  
  .form__input--textarea {
    font-size: 1rem;
    margin-bottom: 5px;
    min-height: 78px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .invite-pair {
    gap: var(--spacing-xxs);
  }
  
  .invite-pair .form__input {
    min-width: 0;
    flex: 1;
  }
  
  .form__group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form__group--invites {
    margin-top: 0;
  }

  .plus-button {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .form__submit.btn--uni {
    padding: 9px 18px;
    font-size: 0.9rem;
    min-height: 40px;
    width: 75%;
    height: 58px;
    max-width: 275px;
  }

  /*======================
   Page Contact (contact.html)
  ======================*/
  .contact__content {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .contact__content1 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin: 0;
    max-width: none;
  }

  .contact__info {
    border-radius: 0;
  }

  .form__type {
    gap: 0.8rem;
  }

  .form__type::before {
    font-size: 1.8rem;
    font-weight: 550;
  }

  .form__radio {
    gap: 0.8rem;
    font-size: 1.3rem;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
  }

  .form__input--objet {
    margin-bottom: 0.8rem;
    width: 100%;
    padding: 0.8rem;
    border-radius: 22px;
    height: auto;
    min-height: 65px;
  }

  .form__group--textarea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    min-height: 260px;
  }

  .form__textarea {
    padding: 0.35rem;
    border-radius: 22px;
    width: 100%;
  }

  .form__submit {
    padding: 1rem 1.2rem;
    border-radius: 22px;
    flex-shrink: 0;
    margin-top: 8px;
  }

  .form__title {
    font-size: 2.4rem;
    font-weight: 750;
    margin: 0;
    padding: 2.1rem 1.3rem;
    text-align: center;
    width: 100%;
  }



  .faq__item {
    padding: 26px;
    justify-content: center;
  }

  .faq__item {
    margin-left: 0 !important;
  }

  .faq__answer {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }

  .faq__item[open] .faq__answer {
    opacity: 1;
    pointer-events: auto;
  }

  /*======================
   Page Blog (blog.html)
  ======================*/

  .hero__bloc {
    padding-top: 72px;
  }
  .section__container {
    padding: 55px 0;
  }
  .section__container--title {
    font-size: 2.2rem;
    text-align: center;
    margin-left: 0;
    margin-bottom: 0;
  }
  #blog {
    padding: 44px 17px;
  }
  .section__article {
    flex-direction: column;
    gap: 22px;
    padding: 22px;
    margin-bottom: 28px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: auto;
  }
  .section__article--img {
    width: 100%;
    height: 645px;
    margin-left: 0;
    order: -1;
  }
  .section__article--content {
    text-align: center;
  }
  .section__article--header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
  }
  .section__article--title {
    font-size: 1.6rem;
    text-align: center;
  }
  .section__article--date {
    align-self: center;
  }
  .section__article--description {
    font-size: 1.1rem;
    text-align: center;
  }
  .section__article--btn {
    align-self: center;
    padding: 13px 26px;
    font-size: 1.1rem;
    transition: none !important;
    transform: none !important;
  }

  /*======================
 Page Article (article.html)
======================*/

.article__main {
  padding-top: 60px;
}
.article__back {
  padding: 20px 20px 0 20px;
}
.article__container {
  padding: 20px;
  margin: auto;
}
.article__title {
  display: flex;
  align-items: left;
  font-size: 1.3rem;
  margin: 6px;
  white-space: normal;
  text-align: left;

}
.article__meta {
  font-size: 0.1rem;
  font-weight: 200;
  flex-direction: row;
  align-items: flex-start;
  margin-left: 10px;
  white-space: nowrap;
}
.article__reading-time, .article__author, .article__separator {
  font-size: 16px;
  font-weight: 600;
}

.article__reading-time i {
  font-size: 16px;
  font-weight: 900;
  margin-right: 10px;
}

.article__image-placeholder, .article__image--main {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Stack columns on mobile */
.article__content {
  flex-direction: column;
  gap: 20px;
}

/* Text Column - left side */
.article__text-column {
  flex: 1;
  max-width: 98%;
}

.article__text-column h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 10px 0;
  padding-top: 10px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column h4,
.article__sources h4  {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 2px 0;
  padding-top: 1px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column p,
.article__text-column ul,
.article__text-column ol,
.article__text-column li,
.article__sources li,
.article__sources ul {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  margin: 8px 0 2px 0;
  max-width: 100%;
  text-align: left;
  word-wrap: break-word;
}

/* Section sources */
.article__sources {
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
  margin-right: 30px;
  border-left: 4px solid var(--vert-texte);
  max-width: 100%;
}

.article__image--secondary {
  display: none; /* désactiver l'image à coté du texte en mobile */
  width: 100%;
  flex-shrink: 0;
}
.article__image-placeholder--small {
  height: 180px;
  width: 40%;
  top: -600px;
  margin-left: 220px;
}
  .article__navigation {
    flex-direction: row;
    gap: 21px;
    justify-content: space-between;
    align-items: center;
  }


  .back-link {
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: left;
    position: relative;
    overflow: hidden;
    margin-left: -5px;
    margin-right: auto;
  }

  .nav-button {
    font-size: 1.1rem;
    padding: 8px 11px;
    width: 46%;
  }
  .nav-button--prev,
  .nav-button--next {
    margin: 0;
    text-align: center;
  }

  .nav-button:hover {
    color: none;
    border-color: none;
    background-color: none;
    text-decoration: none;
  }
}

/* Tablettes et petits laptops (≤ 1200px) */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --font-size-hero: 30px;
    --font-size-xxl: 26px;
    --font-size-xl: 24px;
    --font-size-lg: 22px;
    --font-size-md: 20px;
    --font-size-sm: 18px;
    --spacing-xxxl: 52px;
    --spacing-xxl: 36px;
    --spacing-xl: 32px;
    --spacing-lg: 28px;
    --spacing-Vl: 78px;
  }

  /* Header desktop normal */
  .header {
    background-color: var(--blanc);
    position: sticky;
    top: 50px;
    z-index: 9999;
    border-radius: 26px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    width: 90%;
  }
  
  .navbar {
    padding: 0 23px;
    height: 72px;
    border-radius: 26px;
  }

  .navbar-brand {
    position: relative;
    margin-left: -20px;
  }


  .header__logo--img {
    margin-top: 20px;
    margin-left: -2px;
  }

  .logo-background {
    position: absolute;
    width: 180px;
    height: 85px; 
    background-color: var(--blanc);
    border-radius: var(--border-radius-xl);
    top: 50px;
    left: -30px;
    z-index: -1;
    transition: all 0.1s ease;
    overflow: hidden;
    margin-left: -3px;
  }
    
  .header__beta-link--text {
    font-size: 0.6rem;
    padding: 4px;
    margin-left: clamp(0.8rem, 1.5vw, 1rem);

  }

  .navbar-nav {
    flex-direction: row;
    width: 95%; /*gérer l'espacement de links */
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    margin : 0;
  }

  .nav-item {
    margin-bottom: 0;
    width: auto;
  }

  .nav-link {
    padding: 0.75rem 1.2rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vert-texte);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block;
    text-align: center;
    width: auto;
    box-sizing: border-box;
  }



  /*======================
   Page Accueil (index.html)
  ======================*/

  /* Hero section */


  .hero {
    padding: 0 var(--spacing-xxl);
    background-color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: var(--spacing-xl);
    margin-top: -100px;
    padding-top: 72px;
    min-height: 100vh;
  }

  .hero__content {
    flex: none;
    padding: var(--spacing-xl) 0;
    margin-top: 20px;
    text-align: left !important;
    margin-left: 22px !important;
  }

  .hero__title {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 2.1rem;
    text-align: left !important;
    margin-left: 0 !important;
    /* Animation gérée par JavaScript dans index.js */
  }

  .hero__subtitle {
    font-size: 1.1rem;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .hero__subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    max-width: 600px;
  }
  

  .hero__lune {
    position: absolute;
    right: 0px;
    bottom: 75px;
    width: 80%;
    height: auto;
    align-items: baseline;
    z-index: 1;
    opacity: 0.95;
  }

  .hero__download {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    align-items: center;
    filter: drop-shadow(var(--ombre-douce));
    margin-left: 0px;
  }

  /* Content spacing */
  .container,
  .container-fluid {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* Features mobile adjustments */
  /* .features__hello-image {
    display: none;
  } */

  .features__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 570px;
    width: 100%;
    margin: 50px auto 0 0;
    padding: 40px 20px 40px 60px;
    position: relative; /* Nécessaire pour le positionnement absolu des enfants */
  }

  .features__item-title{
   font-size: 20px;
  }

  .features__item {
    margin-left: 0 !important;
  }

  .features__item-content {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .features__item:not([open]) .features__item-content {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .features__content-zone {
    position: absolute;
    left: 100%;
    top: 3%;
    transform: translateY(-50%);
    width: 1200px;
    max-width: 100%;
    padding: var(--spacing-md);
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    color: var(--vert-menu);
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    background: transparent;
    transition: all 0.3s ease;
    z-index: 100;
    max-height: 170px;
  }
  .features__text-content{
    max-width: 55%;
    width: 100%;
  }
  .features__content-image {
    position: relative;
    width: 50%;
    height: 420px;
    margin-right: -60px;
    margin-left: 10px;
    flex-shrink: 0;
    object-fit: contain;
    align-self: flex-end;
    margin-top: 80px;
    overflow: visible;
    display: block !important;
    max-height: 100%;
  }
 

  .subscription h1 {
    font-size: 1.4rem;
    margin-right: 1.6rem;
  } 

  /* Typography */
  .display-1 { font-size: 2.4rem; }
  .display-2 { font-size: 2rem; }
  .display-3 { font-size: 1.8rem; }
  .display-4 { font-size: 1.6rem; }

  /* Cards */
  .card-body {
    padding: 1.6rem;
  }

  /* Forms */
  .form-control-lg {
    padding: 1.05rem 1.6rem;
    font-size: 1.1rem;
  }

  /* Newsletter responsive */
  .newsletter__container {
    margin-bottom: clamp(78px, 18vw, 325px);
    padding: clamp(1.6rem, 3.9vw, var(--spacing-xxxl));
    padding-right: clamp(51%, 56vw, 61%);
    position: relative;
    z-index: 1;
  }
  
  .newsletter__image {
    position: absolute;
    top: 115px;
    right: clamp(32px, 5.2vw, 65px);
    width: 50%;
    height: 80%;
    object-fit: cover;
    border-radius: clamp(21px, 3.9vw, 31px);
    z-index: 1000;
    opacity: 1;
  }
  
  .newsletter__title {
    font-size: clamp(1.5rem, 5.2vw, var(--font-size-xxl));
    margin-left: 6px;
    margin-bottom: clamp(1.6rem, 3.9vw, var(--spacing-xl));
  }
  
  .newsletter__form {
    display: flex;
    flex-direction: column;
    max-width: clamp(260px, 56vw, 455px);
    gap: clamp(0.8rem, 2.6vw, var(--spacing-md));
    padding: clamp(0.8rem, 2.6vw, var(--spacing-md));
    align-items: flex-start;
    margin: 0;
  }

  /* Boutons dans les formulaires responsive */
  .newsletter__form .btn--uni,
  .podcast__description .btn--uni,
  .subscription__button {
    padding: 15px 30px;
    font-size: 1.3rem;
    min-height: 56px;
    width: auto;
    max-width: none;
    min-width: auto;
  }
  
  .newsletter__email {
    padding: clamp(0.8rem, 2.6vw, var(--spacing-md));
    font-size: clamp(1.1rem, 3.1vw, var(--font-size-md));
    border-radius: var(--border-radius-lg);
    margin-left: -10px;
  }

  .newsletter__submit {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    padding: clamp(11px, 2.6vw, 15px) clamp(22px, 3.9vw, 30px);
    font-size: clamp(1.1rem, 3.1vw, 1.3rem);
    min-width: auto;
    max-width: 260px;
    margin-left: -10px;
  }

  
/*======================
  Illustrations animées - Disposition 2x2 avec Flexbox
======================*/
.animation__container {
  display: block;
  gap: 15px;                               /* espacement vertical minimal entre les lignes */
  width: 100%;                            /* largeur max du conteneur */
  max-width: 90%;                      /* augmenter la largeur max pour plus d'espace */
  margin: 10px auto;                      /* marges minimales */
  padding: 0 5px;                         /* padding minimal pour éviter les bords */
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
  /* SOLUTION FINALE : Assurer que le conteneur s'adapte aux changements */
  position: relative;
  height: auto;
  overflow: visible;
}

/* Première ligne : pois et frigo */
.animation__row--top {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  margin-bottom: 15px;
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 250px;
}

/* Deuxième ligne : slogan et bras */
.animation__row--bottom {
  gap: 15px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 250px;
}

/* Chaque bloc individuel */
.animation__container--bloc1,
.animation__container--bloc2,
.animation__container--bloc3,
.animation__container--bloc4 {
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  padding: 2px;                           /* padding minimal */
  position: relative;                      /* pour le positionnement des overlays */
  overflow: visible;                        /* éviter les débordements */
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 250px;
}

  /* Podcast mobile */
  #podcast {
    flex-direction: row;
    gap: 1.6rem;
    align-items: flex-start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .podcast__latest {
    margin-left: 56px;
    flex: 0 0 74%;
  }
  .podcast__latest h1{
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    margin-right: 0;
    padding: 0;
  }

  .podcast__img {
    width: 80%;
    height: auto;
    margin-left: 0;
    margin-right: auto;
  }

  .podcast__description {
    flex: 0 0 34%;
    margin-left: -120px;
    margin-right: 0px;
    text-align: left;
  }

  .podcast__description p {
    font-size: 1.1rem;
    margin-top: 230px;
    margin-right: 0px;
  }

  .btn--uni.podcast__button {
    margin-right: 17px !important;
    bottom: 13px;
  }

  /* Newsletter mobile */
  .newsletter__form {
    flex-direction: column;
    gap: 1.6rem;
    align-items: stretch;
  }

  .newsletter__title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: var(--spacing-lg);
    margin-left: 10px;
  }
  

  /* Aligner les images du footer à gauche en mobile */
 

  .footer-image__footer{
    width: 30%;
    margin-left: 75px;
    margin-top: 100px;
    position: relative;
    bottom: 0;
  }
  /* Footer mobile */
  .footer {
    padding: 52px 26px;
    border-radius: 26px 26px 0 0;
  }

  .footer__title {
    font-size: 52px;
    font-weight: 900;
  }

  .footer__button {
    padding: 13px 26px;
    font-size: 1.2rem;
  }

  .footer__button:hover {
    padding-right: 57px;
  }

  .footer__download {
    flex-direction: column;
    gap: 22px;
  }

  .footer__download .download__img {
    height: 48px;
  }

  .footer__bottom {
    text-align: center;
    gap: 22px;
    padding-top: var(--spacing-lg);
  }

  .footer__bottom .row {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__nav {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  .footer__social {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    margin-right: -60px;
    margin-left: 0;
  }

  .footer__links {
    flex-direction: row;
    gap: 0.4rem;
    text-align: left;
    margin-left: -30px;
    margin-right: 0;
    padding-left: 0;
  }

  .footer__links a {
    white-space: nowrap;
    display: block;
    overflow: visible;
    text-overflow: clip;
    font-size: 16px;
  }

  .footer__social--list {
    flex-direction: column;
    gap: 0.4rem;
    text-align: right;
    align-items: flex-end;
    margin-right: 0;
  }

  .footer__social--list a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    font-size: 16px;
  }



  .footer__social--list a i {
    flex-shrink: 0;
  }

  .footer .col-md-6 {
    width: auto;
    flex: 1;
  }

  .footer .col-md-6:first-child {
    text-align: left;
  }

  .footer .col-md-6:last-child {
    text-align: right;
  }

  .footer .text-md-end {
    text-align: right;
  }

  .footer .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.4rem;
  }
 

  /*======================
   Page Accès Bêta
  ======================*/

  .beta__container {
    display: grid;
    /* Colonne de droite responsive: min 440px, 42vw, max 640px */
    grid-template-columns: minmax(0, 1fr) clamp(440px, 42vw, 640px);
    width: 100%;
    margin: 0;
    gap: var(--spacing-xxl);
    align-items: start;
}

  .beta__content {
    max-width: 88%;
    width: 100%;
    margin-left: 25px;
    margin-right: 0;
  }

  .beta__description, .beta__benefits li {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.beta__access-counter {
  margin-top: 23px;
  margin-bottom: 6px;
  margin-left: 2px;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

  .beta__description p {
    font-size: 0.8rem;
    margin-bottom: 9px;
    margin-top: 30px;
  }
  
  .beta__benefits {
    margin-bottom: 9px;
    margin-top: 0px;
    margin-left: 42px;
    padding: 0;
  }

  .beta__benefits li {
    font-size: 0.8rem;
  }


  /*======================
  Sidebar & Form Styles
======================*/
.beta__sidebar {
  /* background: var(--violet); */
  -webkit-backdrop-filter: blur(10px); /*  pour la compatibilité Safari. */
  backdrop-filter: blur(10px);
  border: 6px solid rgba(50, 50, 50, 0.85);
  border-radius: 15px;
  padding: var(--spacing-lg);
  margin-top: 100px;
  margin-left: -65px;
  margin-right: 0;
  height: 88%;
  max-height: 100vh;
  width: 110%;
  max-width: 110%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 129, 129, 0.3) transparent;
  justify-self: start;
}
.beta__note {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
}

  .beta__title {
    font-size: 56px;
    margin-left: 0;
  }
  
  .beta__form {
    padding: var(--spacing-xs);
  }

  h2.form__subtitle {
    font-size: 56px;
  }
  .form__input--textarea {
    font-size: 0.6rem;
    margin-bottom: 6px;
    height: 195px;
    min-height: 74px;
    width: 100%;
    box-sizing: border-box;
  }
  .form__input {
    font-size: 0.75rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 16px;
    border-radius: 24px;
  }
  
  .invite-pair {
    gap: var(--spacing-xxs);
  }
  
  .invite-pair .form__input {
    min-width: 0;
    flex: 1;
  }
  
  .form__group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form__group--invites {
    margin-top: 0;
  }

  .form__input--normal {
    /* width: 241px; */
    height: 62px;
}

.form__input--moyen {
    /* width: 516.5px; */
    height: 62px;
}

  .plus-button {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  
  .form__submit.btn--uni {
    padding: 12px 24px;
    font-size: 1.2rem;
    min-height: 52px;
    width: 90%;
    max-width: 350px;
  }

  .form__submit--accesbeta {
    margin-top: 15px !important;
  }


  /*======================
   Page Contact (contact.html)
  ======================*/
  
  .contact__form {
    padding: 2rem;
    width: 100%;
    max-width: 900px;
    min-height: 55%;
    margin-top: 120px;
    margin-left: 40px;
}


  .contact__content {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .contact__content1 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-left: -20px;
    max-width: none;
  }

  .contact__info {
    border-radius: 0;
  }

  .form__type {
    gap: 0.5rem;
  }

  .form__type::before {
    font-size: 2rem;
    font-weight: 550;
  }

  .form__radio {
    gap: 1rem;
    font-size: 1.5rem;
    padding: 0.45rem 1rem;
    border-radius: 10px;
  }

  .form__input--objet {
    margin-bottom: 0.5rem;
    width: 87%;
    padding: 1rem;
    border-radius: 26px;
    height: auto;
    min-height: 75px;
  }

  .form__group--textarea {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

  .form__textarea {
    padding: 0.45rem;
    border-radius: 26px;
    width: 90%;
  }

  .form__submit {
    padding: 1rem;
    border-radius: 26px;
    flex-shrink: 0;
    margin-top: 185px;
  }

  .form__title {
    font-size: 2.2rem;
    font-weight: 750;
    margin: 1px 0 0 0;
    padding: 0.8rem 1.8rem;
    text-align: left;
    width: 100%;
  }

  .faq__question{
    font-size: 26px;
  }

  .faq__item {
    position: relative;
    padding: 16px 24px;
    margin-bottom: var(--spacing-xs);
    margin-left: 15px;
    margin-right: 0px;
    width: 70%;
  }

  .faq__content-zone {
    width: 900px;
    max-width: 35%;
    margin-right: 4px;
    margin-left: -210px;
    top: 40px;
    padding: var(--spacing-xs);
    font-size: 18px;
    max-height: 400px;
  }
 

  .faq__list {
    margin: 50px 0 0 -50px;
  }

  /*======================
   Page Blog (blog.html)
  ======================*/

  .hero__bloc {
    padding-top: 84px;
  }
  .section__container {
    padding: 20px 0;
  }
  .section__container--title {
    font-size: 42px;
    text-align: left;
    margin-left: 58px;
    margin-bottom: 0;
  }
  #blog {
    padding: 56px 23px;
  }
  .section__article {
    flex-direction: row;
    gap: 28px;
    padding: 28px;
    margin-bottom: 37px;
    margin-left: 10px;
    max-width: 95%;
  }
  .section__article--img {
    width: 40%;
    height: 320px;
    margin-left: 0;
    order: -1;
  }
  .section__article--content {
    text-align: center;
  }
  .section__article--header {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 23px;
  }
  .section__article--title {
    font-size: 20px;
    text-align: left;
    max-width: 70%;
  }

  .section__article--description {
    font-size: 0.9rem;
    text-align: left;
    max-width: 100%;
  }

  .section__article--date {
    margin-left: 10px;
  }

  
  /*======================
   Page Article (article.html)
  ======================*/

  .article__main {
    padding-top: 84px;
  }
  .article__back {
    padding: 28px 28px 0 28px;
  }

  .article__container {
    max-width: 100%;
    margin: 0 50px;
    padding: 40px;
  }

  /* Article Header */
.article__header {
  margin-bottom: 40px;
}
.article__title {
  font-size: 42px;
}
  .article__meta {
    font-size: 18px;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }
.article__reading-time, .article__author, .article__separator {
  font-size: 16px;
  font-weight: 600;
}
.article__reading-time i {
  font-size: 16px;
  font-weight: 900;
  margin-right: 10px;
}
  .article__image-placeholder {
    height: 350px;
  }
  /* .article__content {
    flex-direction: column;
    gap: 28px;
  } */
/* Text Column - left side */
.article__text-column {
  flex: 1;
  margin-left: -30px;
  /* max-width: 70%; */
}

.article__text-column h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 10px 0;
  padding-top: 10px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column h4,
.article__sources h4  {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 2px 0;
  padding-top: 1px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column p,
.article__text-column ul,
.article__text-column ol,
.article__text-column li,
.article__sources li,
.article__sources ul {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 8px 0 2px 0;
  max-width: 80%;
  text-align: left;
  word-wrap: break-word;
}

/* Section sources */
.article__sources {
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
  margin-right: 30px;
  border-left: 4px solid var(--vert-texte);
  max-width: 100%;
}

.article__image--secondary {
  flex-shrink: 0;
  max-width: none;
  width: 340px;
  height: auto;
  margin-top: 70px;
}
  .article__image-placeholder--small {
    flex: 2;
    height: 468px;
    width: 110%;
    margin-left: -40px;
    margin-right: 0;
  }


  .article__navigation {
    flex-direction: row;
    gap: 23px;
    justify-content: space-between;
    align-items: center;
  }

  .nav-button {
    font-size: 18px;
    padding: 9px 2px;
    width: 20%;
  }
  .nav-button--prev,
  .nav-button--next {
    margin: 0;
    text-align: center;
  }

  .nav-button:hover {
    color: none;
    border-color: none;
    background-color: none;
    text-decoration: none;
  }
  .back-link {
    padding: 12px 24px;
    margin-top: 10px;
    margin-left: 31px;
    margin-right: auto;
  }
}

/* Laptops & desktops (≥ 1200px) */
@media (min-width: 1200px) and (max-width: 1536px) {

  /* Header desktop */
  .header {
    position: sticky;
    top: 50px;
    z-index: 9999;
    border-radius: 26px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    width: 90%;
  }

  .navbar {
    padding: 0 23px;
    height: 72px;
    border-radius: 26px;
  }

  .header__logo--img {
    margin-top: 20px;
    margin-left: -2px;
  }


  /* Styles desktop spécifiques au header */
  .logo-background {
    position: absolute;
    width: 180px;
    height: 85px; 
    border-radius: var(--border-radius-xl);
    top: 50px;
    left: -30px;
    z-index: -1;
    transition: all 0.1s ease;
    overflow: hidden;
  }
    

  .header__beta-link--text {
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 30px;
    padding: 4px;
  }


  .navbar-nav {
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 98%; /*gérer l'espacement de links */
    margin-left: 100px;
    margin-right: 5px;
  }

  .nav-item {
    margin-bottom: 0.4rem;
    width: auto;
  }

  .nav-item:last-child {
    margin-bottom: 0;
  }

  .nav-link {
    padding: 4px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
    text-align: center;
    width: auto;
    box-sizing: border-box;
    white-space: nowrap;
  }


  /*======================
   Page Accueil (index.html)
  ======================*/

  /* Hero section */
  .hero {
    padding: 0 var(--spacing-xxl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: var(--spacing-xl);
    margin-top: -72px;
    padding-top: 72px;
    min-height: 100vh;
  }

  .hero__content {
    flex: none;
    padding: var(--spacing-xl) 0;
    margin-top: 10px; /* pour fixer la page à 100vh, bouger le texte depuis le bloc(.hero__title) sans bouger la page entière */
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 75px !important;
    z-index: 1000;
    min-height: 100vh;
  }

  .hero__title {
    font-size: var(--font-size-hero);
    font-weight: 900;
    line-height: 1;
    text-align: left !important;
    letter-spacing: 0.5px;
    margin-top: 130px;
    margin-left: 0 !important;
    margin-bottom: var(--spacing-md);
    /* Animation gérée par JavaScript dans index.js */
  }
  
  .hero__subtitle {
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: left !important;
    line-height: 1.5;
    opacity: 0.95;
    margin-left: 0 !important;
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
  }

  .hero__lune {
    position: absolute;
    right: 0px;
    bottom: 75px;
    width: 80%;
    height: auto;
    align-items: baseline;
    z-index: 1;
    opacity: 0.95;
  }

  .hero__download {
    margin-top: 1rem;
    justify-content: flex-start;
    gap: 2rem;
    margin-left: 0 !important;
  }

  .download__img {
    height: 48px;
    width: auto;
  }

  /* Content spacing */
  .container,
  .container-fluid {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  /* Features desktop adjustments */
  .features__hello-image {
    position: absolute;
    top: 30%;
    width: 300px;
    height: 300px;
    z-index: 1;
    overflow: visible;
    object-fit: contain;
    display: block !important;
    max-height: 100%;
  }


  .features__list {
  
    max-width: 700px;
    width: 100%;
    margin: 50px auto 0 0;
    margin-left: -10px !important;
    padding: 40px 20px 40px 60px;
  }

  .features__item {
    position: relative;
    padding: 16px 24px;
    margin-bottom: var(--spacing-xs);
    margin-left: 15px;
  }

  .features__item-title{
    font-size: 26px;
  }

  .features__item:not([open]) .features__item-content {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .features__content-zone {
    width: 1200px;
    max-width: 95%;
    top: 40px;
    padding: var(--spacing-xs);
    font-size: 18px;
    max-height: 500px;
    margin-left: 10px;
  }

  .features__text-content{
    max-width: 55%;
  }

  .features__content-image {
    position: relative;
    width: 40%;
    height: 400px;
    margin-right: 10px;
    margin-left: -10px;
    flex-shrink: 0;
    object-fit: contain;
    align-self: flex-end;
    margin-top: 70px;
    overflow: visible;
    display: block !important;
    max-height: 100%;
  }


  .subscription h1 {
    font-size: 1.5rem;
    margin-right: 1.8rem;
  } 

  /* Typography */
  .display-1 { font-size: 2.6rem; }
  .display-2 { font-size: 2.2rem; }
  .display-3 { font-size: 2rem; }
  .display-4 { font-size: 1.8rem; }

  /* Cards */
  .card-body {
    padding: 1.8rem;
  }

  /* Forms */
  .form-control-lg {
    padding: 1.15rem 1.8rem;
    font-size: 1.2rem;
  }

 
  .newsletter__container{
    margin: 0;
    width: 100%;
    padding: var(--spacing-xxxl);
    margin-bottom: 250px;
  }


  .newsletter__image {
    position: absolute;
    top: 110px;
    right: 125px;
    width: 50%;
    height: 98%;
    max-width: 800px;
    margin-right: -52px;
    object-fit: cover;
    border-radius: 25px;
    z-index: 1000;
    opacity: 1;
  }
  
  .newsletter__title {
    font-size: 42px;;
    margin-left: -20px;
    margin-bottom: clamp(1.8rem, 4.2vw, var(--spacing-xl));
  }
  
  .newsletter__form {
    display: flex;
    flex-direction: column;
    max-width: clamp(280px, 58vw, 490px);
    gap: clamp(0.9rem, 2.8vw, var(--spacing-md));
    padding: clamp(0.9rem, 2.8vw, var(--spacing-md));
    align-items: flex-start;
    margin-left: -45px;
  }

  /* Boutons dans les formulaires responsive */
  .newsletter__form .btn--uni,
  .podcast__description .btn--uni,
  .subscription__button {
    padding: 16px 32px;
    font-size: 1.2rem;
    min-height: 50px;
    width: auto;
    max-width: none;
    min-width: auto;
  }
  
  .newsletter__email {
    padding: clamp(0.9rem, 2.8vw, var(--spacing-md));
    font-size: 1.2rem;
    height: 68px;
  }

  .newsletter__submit {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    padding: clamp(12px, 2.8vw, 16px) clamp(24px, 4.2vw, 32px);
    font-size: clamp(1.2rem, 3.3vw, 1.4rem);
    min-width: auto;
    max-width: 280px;
  }

  
/*======================
  Illustrations animées - Disposition 2x2 avec Flexbox
======================*/

.animation__container {
  display: block;
  gap: 20px;                               /* espacement vertical minimal entre les lignes */
  width: 100%;                            /* largeur max du conteneur */
  max-width: 90%;                      /* augmenter la largeur max pour plus d'espace */
  margin: 10px auto;                      /* marges minimales */
  padding: 0 5px;                         /* padding minimal pour éviter les bords */
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 40px;
  /* SOLUTION FINALE : Assurer que le conteneur s'adapte aux changements */
  position: relative;
  height: auto;
  overflow: visible;
}

/* Première ligne : pois et frigo */
.animation__row--top {
  gap: 20px;                               /* espacement horizontal minimal entre les colonnes */
  margin-bottom: 25px;
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 300px;
}

/* Deuxième ligne : slogan et bras */
.animation__row--bottom {
  gap: 20px;                               /* espacement horizontal minimal entre les colonnes */
  width: 105%;
  min-height: 100px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 300px;
}

/* Chaque bloc individuel */
.animation__container--bloc1,
.animation__container--bloc2,
.animation__container--bloc3,
.animation__container--bloc4 {
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  padding: 2px;                           /* padding minimal */
  position: relative;                      /* pour le positionnement des overlays */
  overflow: visible;                        /* éviter les débordements */
  min-height: 200px;                      /* hauteur minimale au lieu de fixe */
  /* height: auto;                            s'adapte au contenu */
  height: 300px;
}



  /* Podcast desktop */
  #podcast {
    flex-direction: row;
    gap: 1.8rem;
    align-items: flex-start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start;
  }

  .podcast__latest {
    margin-top: 80px;
    margin-left: 27px;
    flex: 0 0 76%;
  }
  .podcast__latest h1{
    font-size: 42px;
    font-weight: 900;
    margin-left: 45px;
    max-width: 80%;
  }


  .podcast__img {
    display: flex;
    flex: 0 0 40%;
    width: 800px;
    height: 520px;
    border-radius: var(--border-radius-lg);
    margin-left: 45px;
  }


  .podcast__description p {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: auto;
    margin-bottom: var(--spacing-xl);
    margin-top: 320px;
    margin-right: 4px;
    margin-left: -150px;
    letter-spacing: -0.5px;
    text-align: left;
    white-space: nowrap;
  }

  .btn--uni.podcast__button {
    margin-right: 4px !important;
    margin-left: -150px;
    bottom: 14px;
  }

  /* Newsletter desktop */
  .newsletter__form {
    flex-direction: column;
    gap: 1.8rem;
    align-items: stretch;
  }

  /* Footer desktop */
   /* Aligner les images du footer à gauche en mobile */


  .footer-image__footer{
    width: 30%;
    margin-left: 75px;
    margin-top: 100px;
    position: relative;
    bottom: 0;
  }
  /* Footer mobile */
  .footer {
    padding: 52px 26px;
    border-radius: 26px 26px 0 0;
  }

  .footer__title {
    font-size: 52px;
    font-weight: 900;
  }

  .footer__button {
    padding: 13px 26px;
    font-size: 1.2rem;
  }

  .footer__button:hover {
    padding-right: 57px;
  }

  .footer__download {
    flex-direction: column;
    gap: 22px;
  }

  .footer__download .download__img {
    height: 48px;
  }

  .footer__bottom {
    text-align: center;
    gap: 22px;
    padding-top: var(--spacing-lg);
  }

  .footer__bottom .row {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__nav {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }

  .footer__social {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    margin-right: -60px;
    margin-left: 0;
  }

  .footer__links {
    flex-direction: row;
    gap: 0.4rem;
    text-align: left;
    margin-left: -50px;
    margin-right: 0;
    padding-left: 0;
  }

  .footer__links a {
    white-space: nowrap;
    display: block;
    overflow: visible;
    text-overflow: clip;
    font-size: 16px;
  }

  .footer__social--list {
    flex-direction: column;
    gap: 0.4rem;
    text-align: right;
    align-items: flex-end;
    margin-right: 0;
  }

  .footer__social--list a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    font-size: 16px;
  }



  .footer__social--list a i {
    flex-shrink: 0;
  }

  .footer .col-md-6 {
    width: auto;
    flex: 1;
  }

  .footer .col-md-6:first-child {
    text-align: left;
  }

  .footer .col-md-6:last-child {
    text-align: right;
  }

  .footer .text-md-end {
    text-align: right;
  }

  .footer .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.4rem;
  }
 
  /*======================
   Page Accès Bêta
  ======================*/



  .beta__container {
    display: grid;
    /* Colonne de droite responsive: min 440px, 42vw, max 640px */
    grid-template-columns: minmax(0, 1fr) clamp(440px, 42vw, 640px);
    width: 100%;
    margin: 0;
    gap: var(--spacing-xxl);
    align-items: start;
}

  .beta__content {
    max-width: 88%;
    width: 100%;
    margin-left: 40px;
    margin-right: 0;
  }

  .beta__description, .beta__benefits li {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.beta__access-counter {
  margin-top: 23px;
  margin-bottom: 6px;
  margin-left: 2px;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

  .beta__description p {
    margin-bottom: 9px;
    margin-top: 30px;
  }
  
  .beta__benefits {
    margin-bottom: 9px;
    margin-top: 0px;
    margin-left: 42px;
    padding: 0;
  }


  /*======================
  Sidebar & Form Styles
======================*/
.beta__sidebar {
  /* background: var(--violet); */
  -webkit-backdrop-filter: blur(10px); /*  pour la compatibilité Safari. */
  backdrop-filter: blur(10px);
  border: 6px solid rgba(50, 50, 50, 0.85);
  border-radius: 15px;
  padding: var(--spacing-lg);
  margin-top: 100px;
  margin-left: -35px;
  margin-right: 0;
  height: 88%;
  max-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 129, 129, 0.3) transparent;
  justify-self: start;
}
.beta__note {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

  .beta__title {
    font-size: 56px;
    margin-left: 0;
  }
  
  .beta__form {
    padding: var(--spacing-xs);
  }
  
  h2.form__subtitle {
    font-size: 56px;
  }

  .form__input--textarea {
    font-size: 1rem;
    margin-bottom: 6px;
    height: 150px;
    min-height: 74px;
    width: 100%;
    box-sizing: border-box;
  }
  .form__input {
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 16px;
    border-radius: 24px;
  }
  
  .invite-pair {
    gap: var(--spacing-xxs);
  }
  
  .invite-pair .form__input {
    min-width: 0;
    flex: 1;
  }
  
  .form__group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form__group--invites {
    margin-top: 0;
  }

  .form__input--normal {
    /* width: 241px; */
    height: 62px;
}

.form__input--moyen {
    /* width: 516.5px; */
    height: 62px;
}

  .plus-button {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  
  .form__submit.btn--uni {
    padding: 12px 24px;
    font-size: 1.2rem;
    min-height: 52px;
    width: 90%;
    max-width: 350px;
    margin-top: 10px;
  }


  /*======================
   Page Contact (contact.html)
  ======================*/

  .contact__form {
    padding: 2rem;
    width: 90%;
    max-width: 900px;
    min-height: 55%;
    margin-top: 120px;
    margin-left: 40px;
}


  .contact__content {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .contact__content1 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin: 0;
    max-width: none;
  }

  .contact__info {
    border-radius: 0;
  }

  .form__type {
    gap: 0.5rem;
  }

  .form__type::before {
    font-size: 2rem;
    font-weight: 550;
  }

  .form__radio {
    gap: 1rem;
    font-size: 1.5rem;
    padding: 0.45rem 1rem;
    border-radius: 10px;
  }

  .form__input--objet {
    margin-bottom: 0.5rem;
    width: 87%;
    padding: 1rem;
    border-radius: 26px;
    height: auto;
    min-height: 75px;
  }

  .form__group--textarea {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

  .form__textarea {
    padding: 0.45rem;
    border-radius: 26px;
    width: 90%;
  }

  .form__submit {
    padding: 1rem;
    border-radius: 26px;
    flex-shrink: 0;
    margin-top: 190px;
  }

  .form__title {
    font-size: 2.2rem;
    font-weight: 750;
    margin: 1px 0 0 0;
    padding: 0.8rem 1.8rem;
    text-align: left;
    width: 100%;
  }

  .faq__question{
    font-size: 26px;
  }

  .faq__item {
    position: relative;
    padding: 16px 24px;
    margin-bottom: var(--spacing-xs);
    margin-left: 15px;
    margin-right: 0px;
    width: 75%;
  }

  .faq__content-zone {
    width: 900px;
    max-width: 45%;
    margin-right: 4px;
    margin-left: -200px;
    top: 40px;
    padding: var(--spacing-xs);
    font-size: 18px;
    max-height: 500px;
  }
 

  .faq__list {
    margin: 50px 0 0 -50px;
  }
  /*======================
   Page Blog (blog.html)
  ======================*/

  .hero__bloc {
    padding-top: 84px;
  }
  .section__container {
    padding: 20px 0;
  }
  .section__container--title {
    font-size: 42px;
    text-align: left;
    margin-left: 68px;
    margin-bottom: 0;
  }
  #blog {
    padding: 56px 23px;
  }
  .section__article {
    flex-direction: row;
    gap: 28px;
    padding: 28px;
    margin-bottom: 37px;
    margin-left: 20px;
    max-width: 95%;
  }
  .section__article--img {
    width: 30%;
    height: 280px;
    margin-left: 0;
    order: -1;
  }
  .section__article--content {
    text-align: center;
  }
  .section__article--header {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 23px;
  }
  .section__article--title {
    font-size: 20px;
    text-align: left;
    max-width: 70%;
  }

  .section__article--description {
    font-size: 0.9rem;
    text-align: left;
    max-width: 100%;
  }

  .section__article--date {
    margin-left: 10px;
  }

  /*======================
   Page Article (article.html)
  ======================*/

  .article__main {
    padding-top: 84px;
  }
  .article__back {
    padding: 28px 28px 0 28px;
  }

  .article__container {
    max-width: 100%;
    margin: 0 50px;
    padding: 40px;
  }

  /* Article Header */
.article__header {
  margin-bottom: 40px;
}
.article__title {
  font-size: 42px;
}
  .article__meta {
    font-size: 18px;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }
.article__reading-time, .article__author, .article__separator {
  font-size: 16px;
  font-weight: 600;
}
.article__reading-time i {
  font-size: 16px;
  font-weight: 900;
  margin-right: 10px;
}
  .article__image-placeholder {
    height: 350px;
  }
  /* .article__content {
    flex-direction: column;
    gap: 28px;
  } */
/* Text Column - left side */
.article__text-column {
  flex: 1;
  margin-left: -13px;
}

.article__text-column h3 {
  font-size: 26px;
  font-weight: 700;
  margin: 10px 0 10px 0;
  padding-top: 10px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column h4,
.article__sources h4  {
  font-size: 24px;
  font-weight: 600;
  margin: 2px 0 2px 0;
  padding-top: 1px;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.article__text-column p,
.article__text-column ul,
.article__text-column ol,
.article__text-column li,
.article__sources li,
.article__sources ul {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  margin: 8px 0 2px 0;
  max-width: 85%;
  text-align: left;
  word-wrap: break-word;
}

/* Section sources */
.article__sources {
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
  margin-right: 30px;
  border-left: 4px solid var(--vert-texte);
  max-width: 100%;
}

.article__image--secondary {
  flex-shrink: 0;
  max-width: none;
  width: 380px;
  margin-top: 90px;
}
  .article__image-placeholder--small {
    flex: 2;
    height: 468px;
    width: 110%;
    margin-left: -40px;
    margin-right: 0;
  }

  .article__navigation {
    flex-direction: row;
    gap: 23px;
    justify-content: space-between;
    align-items: center;
  }

  .nav-button {
    font-size: 18px;
    padding: 9px 2px;
    width: 16%;
  }
  .nav-button--prev,
  .nav-button--next {
    margin: 0;
    text-align: center;
  }

  .nav-button:hover {
    color: none;
    border-color: none;
    background-color: none;
    text-decoration: none;
  }
  .back-link {
    padding: 12px 24px;
    margin-top: 10px;
    margin-left: -30px;
    margin-right: auto;
  }

  
}