@charset "utf-8";
/* ==========================================================================
   1. LAYOUT GÉNÉRAL & DISPOSITION
   ========================================================================== */

#goto-avantages { 
  padding-top: 0 !important; /* Force 0px sur mobile / par défaut */
  padding-bottom: 35px;
}

#goto-statistiques { 
  padding: 35px 0 0 0; 
}

/*#goto-avantages{ background: #f7f7f7 }*/
#goto-avantages .accordions { 
  display: none; 
}

#goto-avantages .withimage-image { 
  width: 60%; 
}

#goto-avantages .withimage-image img { 
  width: 100%; 
  height: auto; 
}

/*#goto-statistiques{ background: #f7f7f7 }*/

/* ==========================================================================
   2. COMPOSANTS, ACCORDÉONS & LIENS
   ========================================================================== */

/* Arrière-plan de l'en-tête de l'accordéon */
#goto-avantages .accordion-head {
  background: #fff1e6 !important;
}

/* Séparateur rouge horizontal entre les sous-sections */
.accordion-bodyinner hr {
  margin: 15px 0;
  border: 0;
  border-top: 1px solid #e30613 !important;
}

.accordion-bodyinner .section-titre-spacing {
  padding-top: 5px;
}

/* Typographie et couleur des listes */
#goto-avantages li,
.bloccontenu li {
  margin-bottom: 10px !important;
  color: #494949 !important;
}

/* Gestion de la décoration des liens (WCAG / CSP) */
#goto-avantages a:not([href^="mailto:"]) {
  text-decoration: underline !important;
}

#goto-avantages a[href^="mailto:"] {
  text-decoration: none !important;
}

/* ==========================================================================
   3. TABLEAU RESPONSIVE (CALENDRIER)
   ========================================================================== */

/* Conteneur externe de défilement */
#goto-avantages .table-responsive,
.advantage-content .table-responsive {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 15px;
  border: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Structure de base du tableau */
.tableau-calendrier {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px;
  border: none !important;
  border-collapse: collapse;
  background-color: #ffffff !important;
}

/* Neutralisation des fonds alternés Bootstrap */
.tableau-calendrier > tbody > tr,
.tableau-calendrier > tbody > tr > td,
.tableau-calendrier > tbody > tr > th,
.tableau-calendrier > thead > tr > th {
  background-color: #ffffff !important;
}

/* En-têtes des colonnes */
.tableau-calendrier th.colonne-titre,
.tableau-calendrier thead tr th {
  padding: 12px 10px;
  color: #e30613 !important;
  font-weight: bold !important;
  text-transform: none !important;
  border-top: 0px solid #e30613 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Cellules & Séparateurs de rangées */
.tableau-calendrier > tbody > tr > td {
  padding: 15px 10px;
  border-top: 1px solid #e30613 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Paragraphes internes du tableau */
.tableau-calendrier td,
.tableau-calendrier td p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: #494949 !important;
}

.tableau-calendrier td p:last-child {
  margin-bottom: 0;
}

/* Verrouillage des puces du tableau */
.tableau-calendrier ul,
.tableau-calendrier li {
  font-size: 14px !important;
  line-height: 1.4;
  color: #494949 !important;
}

.tableau-calendrier td:first-child,
.tableau-calendrier th:first-child {
  width: 30%;
}

.tableau-calendrier hr {
  margin: 12px 0;
  border-top: 1px solid #e30613;
}

/* ==========================================================================
   4. MEDIA QUERIES (ADAPTATION RESPONSIVE & LAYOUT)
   ========================================================================== */

/* --- MOBILE (< 768px) --- */
@media (max-width: 767px) {
  #goto-avantages {
    padding-top: 0 !important; /* Zéro padding-top sur 767px et moins */
  }

  #goto-avantages ul,
  .bloccontenu ul {
    padding-left: 20px !important;
    padding-inline-start: 20px !important;
  }

  .tableau-calendrier {
    table-layout: fixed !important;
  }

  .tableau-calendrier th.colonne-titre,
  .tableau-calendrier thead tr th,
  .tableau-calendrier td,
  .tableau-calendrier td p {
    font-size: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .tableau-calendrier td, 
  .tableau-calendrier th {
    padding: 8px 5px;
  }

  .tableau-calendrier td:first-child,
  .tableau-calendrier th:first-child {
    width: 35% !important;
    max-width: 35% !important;
    min-width: 0 !important;
  }

  .tableau-calendrier td:last-child,
  .tableau-calendrier th:last-child {
    width: 65% !important;
    max-width: 65% !important;
  }
}

/* --- TABLETTE ET + (768px et +) --- */
@media (min-width: 768px) {
  #goto-avantages { 
    padding-top: 35px !important; /* S'applique UNIQUEMENT à partir de 768px */
    padding-bottom: 35px; 
  }
}

/* --- TYPOGRAPHIE TABLEAU TABLETTE / DESKTOP MEDIUM (768px à 1199px) --- */
@media (min-width: 768px) and (max-width: 1199px) {
  .tableau-calendrier th.colonne-titre,
  .tableau-calendrier thead tr th,
  .tableau-calendrier td,
  .tableau-calendrier td p {
    font-size: 18px !important;
  }
}

/* --- DESKTOP (992px et +) --- */
@media (min-width: 992px) {
  /*#goto-avantages{ background: #fff }*/
  #goto-avantages .accordions { 
    display: block; 
  }
  
  #goto-avantages .advantages { 
    display: none; 
  }
}

/* --- TRÈS GRANDS ÉCRANS (1200px et +) --- */
@media (min-width: 1200px) {
  .tableau-calendrier th.colonne-titre,
  .tableau-calendrier thead tr th,
  .tableau-calendrier td,
  .tableau-calendrier td p {
    font-size: 16px !important;
  }
}

/* --- MEDIA QUERIES CONSERVÉES POUR USAGE FUTUR --- */
@media (min-width: 1440px) {

}