:root {
  /* Thème par défaut*/
  --color-light:#f9edcc;
  --color-mid-light:#f9df74;
  --color-medium:#edae49;
  --color-mid-dark:#7a361b;
  --color-dark:#4b0f0e;
  --color-complementary:#fadbaa;
  --font-title:Roboto; /*load in head of file*/
  --font-body:Nunito; /*load in head of file*/

}

.empty-footer{
  height:50vh;
}

html, body {
  margin: 0;
  padding: 0;
}

.page-content{
  max-width: 100%;
  padding-left: 4%;
  padding-right: 4%;

}

.text-defaut .wrapper-titre {
  position: sticky;
  /*top: 56px;*/
  top: var(--nav-height, 56px);
  z-index: 3;
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  width:100%;
  background-color: #ffffff;
}


.text-defaut h1, .text-defaut h2, .text-defaut h3{
  padding-left: 10px;
  border-radius: 150px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: normal;
  font-family: var(--font-title);
  font-size: medium;
  position:sticky;
  background-color: var(--color-light);
  border: 1px solid var(--color-mid-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}


.text-defaut h3{
  background-color: white;
  position:unset;
}

.text-defaut h4{
  background-color:unset;
  position:unset;
  border-style: none;
}


.text-defaut ul{
    font-family: var(--font-body);

}
.text-defaut li{
    font-family: var(--font-body);
    margin-bottom: 15px;
}

.text-defaut p{
    font-family: var(--font-body);
}

.defaut-text-pic {

  display: flex;
  align-items: stretch; /* Force l'alignement vertical strict */
  gap: 20px;
}

.text-part {
  flex: 1;
}

.pic-part {
  width: auto;
  max-width: 40%;
  max-height: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
}

/* --- S'applique uniquement sur les écrans de moins de 800px --- */
@media (max-width: 800px) {
  
  .defaut-text-pic {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne */
    align-items: stretch;
    gap: 0; /* On enlève l'espace pour que l'image et le texte se superposent bien */
    padding:5px;
  }

  /* On force le texte et l'image à aller dans la même cellule de la grille (ligne 1, colonne 1) */
  .text-part, .pic-part {
    grid-area: 1 / 1 / 2 / 2; 
  }

  .text-part {
    z-index: 2; /* Force le texte à passer DEVANT */
    
    /* Fond blanc transparent (le 0.85 correspond à 85% d'opacité, ajustable) */
    background-color: rgba(255, 255, 255, 0.85); 
    
    /* Optionnel : Ajoute un peu de confort visuel pour décoller le texte des bords de l'image */
    padding: 20px; 
  }

  .pic-part {
    z-index: 1; /* L'image reste DERRIÈRE */
    
    /* On change les règles de taille pour que l'image s'adapte à toute la zone du texte */
    max-width: 100%; 
    width: 100%;
    height: 100%;
    
    /* Cover est indispensable ici pour que l'image remplisse tout l'arrière-plan du texte */
    object-fit: cover; 
  }
}



/* Conteneur pour centrer et espacer le séparateur */
.separator-container {
    width: 100%;
    max-width: 50%; /* Tu peux ajuster la largeur maximale ici */
    margin: 7.5vh auto; /* Centre le bloc et ajoute de l'espace dessus/dessous */
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* La pilule fine */
.elastic-separator {
    width: 0%; /* Commence invisible (largeur à 0) */
    height: 5px; /* Épaisseur fine de la pilule */
    background: linear-gradient(90deg, var(--color-complementary), var(--color-mid-light)); /* Dégradé moderne, change les couleurs ici */
    border-radius: 9999px; /* Donne la forme de pilule parfaite */
    opacity: 0;
    
    /* Transition avec un effet "élastique" (rebond à la fin) */
    transition: width 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
}

/* Classe injectée par le JS quand on scroll dessus */
.elastic-separator.is-visible {
    width: 100%;
    opacity: 1;
}