@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');


body {
    color: #171d3a;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: linear-gradient(to bottom, #e0e9e4, #ffffff);
    height: 100vh; /* Assure que le dégradé couvre toute la hauteur de la page */
    margin: 0; /* Enlève les marges par défaut */
}


.custom-container {
        background-color: #f4f5f5;
        border-radius:8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        min-height: 40vh; /* Hauteur minimale de 40% de la hauteur de la fenêtre */
}

.custom-row {
        background-color: #fcfcfc;
}


.headercontent {
    padding: 20px;
    /*border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
    /* Background image */
   /* background-image: url("horizon-cloud-sky-sunlight-raindrop-atmosphere-1014853-pxhere.com.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;*/    
}

.headercontent .col-md-8 h1 {
  margin-top:40px;
}




nav {

    border-bottom: 8px solid transparent; /* Définit la bordure mais la rend transparente */
    border-image: linear-gradient(to right, 
        rgba(228, 3, 3, 0.7), 
        rgba(255, 140, 0, 0.7), 
        rgba(255, 237, 0, 0.7), 
        rgba(0, 128, 38, 0.7), 
        rgba(36, 64, 142, 0.7), 
        rgba(115, 41, 130, 0.7)) 1; /* Applique l'arc-en-ciel sur la bordure avec transparence */

}



.elegant-title {
    font-family: 'Dancing Script', cursive;
    /* font-size: 36px; /* Ajuste la taille de la police selon tes besoins */
    color: #4A4A4A; /* Choisis une couleur adaptée au design de ton site */
    font-weight: bold; /* Donne un poids audacieux pour rendre le texte plus lisible */
    letter-spacing: 1px; /* Ajoute un peu d'espacement entre les lettres */
    line-height: 1.2; /* Augmente l'espacement des lignes pour un meilleur affichage */
}

h1 {
    color: #007bff;
    font-size: 60px;
    margin-bottom: 20px;
}

h2 {
    color: #007bff;
    font-size: 25x;
    padding-top: 20px;
    padding-bottom: 20px;
}



#countdown {
    font-family: 'Roboto', sans-serif; /* Applique la police Roboto à tout le compteur */
    color: #D3D3D3; /* Définit la couleur en gris très clair pour le texte */
    padding-top:50px;
    
}

#countdown span {
    font-size: 45px; /* Taille de la police pour une meilleure visibilité */
    font-weight: bold; /* Rend le texte plus lisible avec un poids audacieux */
    color: #5a5a5a;
}


.title-separator {
    position: relative; /* Positionnement relatif pour les éléments enfants */
    margin: 0 auto 20px; /* Centre la séparation et ajoute de l'espace en dessous */
    width: 70%; /* Largeur de la séparation */
    height: 4px; /* Hauteur de la séparation */
}


.title-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to left, transparent 0%, rgba(192, 192, 192, 1) 50%, transparent 100%); /* Dégradé avec couleur grise au centre */
    transform: translateY(-50%);
}


/* Nouveau style pour le fond de page */
.papyrus {
    margin-top : 10px; 
    border-radius: 7px;
    width: 100%; /* Ajuste la largeur pour remplir la colonne Bootstrap */
    max-width: 1200px; /* Largeur maximale souhaitée */
    background-image: url('fond-papier-grunge-vintage.jpg');
    background-size: cover;
    opacity: 0.5;
}


.article {
    padding: 7px;
    color: #0F056B;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
}

/* Style pour aligner PlanHeure et PlanSujet sur la même ligne */
.PlanHeure,
.PlanSujet {
    display: inline-block;
    font-weight: bold;
}

/* Style pour afficher PlanDetail en dessous avec un décalage de 30px */
.PlanDetail {
    display: block;
    margin-left: 30px; /* Décalage de 30px par rapport à gauche */
    font-size: 18px;
    font-family: 'Dancing Script', cursive;
}

.PlanHeure i::before {
    margin-right: 5px; /* Ajustez la marge à droite selon vos préférences */
}