/* Couleur de fond beige pour toute la page */
body {
    background-color: #f5f5dc; /* Beige */
    color: #003300; /* Couleur de texte par défaut pour lisibilité */
}


/* Personnalisation de l'image de bienvenue avec texte superposé */
.welcome-image {
    position: relative;
    text-align: center;
    color: white;
}

/* L'image de bienvenue occupe toute la largeur de l'écran */
.welcome-image img {
    width: 100%;
    height : auto;
    display: block; 
}

/* Positionnement et style du texte superposé sur l'image */
.welcome-text {
    font-family: 'Georgia', serif;  /* Police pour le titre */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5vw;
    font-weight: bold;
}

/* Style pour les images en forme de cercle dans la section "Parcours" et "Compétences" eet "Portfolio" */
.circle-image {
    border-radius: 50%; /* Rend l'image ronde */
    width: 23vw; /* Largeur de l'image */
    height: 23vw; /* Hauteur de l'image */
    object-fit: cover; /* Assure le recadrage correct de l'image */
    cursor: pointer; /* Change le curseur pour indiquer que l'image est cliquable */
}

/* Espacement entre les cercles */
.spacing {
    margin-bottom: 50px; /* Ajoute de l'espace entre les rubriques */
}

/* Style du pied de page */
footer {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

/* Couleur de fond de la barre de navigation en vert foncé et texte en blanc */
.navbar {
    background-color: #003300; /* Couleur plus vert foncé */
    border: none; /* Supprime la bordure */
}

.navbar .navbar-brand,
.navbar .nav > li > a {
    color: white !important; /* Texte blanc sur la barre de navigation */
}

/* Assure que les liens dans la barre de navigation ne changent pas de couleur lors du survol */
.navbar .navbar-brand:hover,
.navbar .nav > li > a:hover {
    color: #e0e0e0 !important; /* Légèrement plus clair au survol */
}

/* Texte sur l'image de bienvenue en vert foncé */
.welcome-text {
    color: #003300; /* Vert plus foncé */
    font-weight: bold;
}

/* Texte de présentation en vert */
.container p {
    color: #004d00; /* Vert foncé */
    font-size: 1.3em;
}

/* Bouton de CV en vert avec texte en beige  */
.btn-primary {
    font-family: 'Georgia', serif;
    background-color: #004d00; /* vert foncé */
    color: #f5f5dc; /* Beige */
    border: 1px solid #004d00; /* Bordure vert foncé */
    height: 37px;
}

/* Changer la couleur au survol du bouton de CV */
.btn-primary:hover {
    background-color: #e0e0d1; /* Beige un peu plus foncé au survol */
    color: #004d00;
}

/* Boutons de "Parcours" et "Compétences" et "Portfolio" en vert foncé avec texte beige clair */
.circle-image + p {
    font-family: 'Georgia', serif;
    color: #003300; /* vert plus foncé */
    font-weight: bold;
}

a:hover .circle-image + p {
    color: #337033; /* Texte vert un peu plus clair au survol */
}




/* =====Page Parcours ===== */


/* Bandeau image */
.header-banner img {
    width: 100%; /* L'image occupe toute la largeur */
    max-height: 300px; /* Limite la hauteur du bandeau */
    object-fit: cover; /* Préserve les proportions de l'image */
    margin-bottom: 20px; /* Ajoute un espacement sous le bandeau */
}

/* Responsivité pour petits écrans */
@media (max-width: 768px) {
    .header-banner img {
        max-height: 200px; /* Réduit la hauteur sur les écrans étroits */
    }
}


/* Conteneur principal de la timeline */
.timeline {
    position: relative;  /* Permet d'ajouter des éléments positionnés relativement à ce conteneur */
    max-width: 800px;  /* Largeur maximale de la timeline */
    margin: 0 auto;  /* Centre la timeline horizontalement */
    padding: 20px;  /* Ajoute un espace autour de la timeline */
}

/* Ligne verticale centrale de la timeline */
.timeline::before {
    content: '';  /* Crée une ligne sans contenu visible */
    position: absolute;  /* Positionne la ligne par rapport à la timeline */
    top: 0;  /* Aligne la ligne au début de la timeline */
    left: 70%;  /* Centre la ligne horizontalement */
    transform: translateX(-50%);  /* Ajuste pour centrer parfaitement la ligne */
    width: 8px;  /* Définit l'épaisseur de la ligne */
    height: 100%;  /* Fait en sorte que la ligne couvre toute la hauteur de la timeline */
    background-color: #004d00;  /* Couleur verte de la ligne */
    z-index: 0;  /* Place la ligne sous les autres éléments */
}

/* Chaque élément individuel de la timeline */
.timeline-item {
    position: relative;  /* Nécessaire pour positionner chaque élément */
    margin: 20px 0;  /* Ajoute un espace vertical entre les éléments */
    padding: 20px;  /* Ajoute un espace interne dans chaque bloc */
    width: 50%;  /* Chaque bloc occupe 50% de la largeur de la timeline */
    background-color: #f8f9fa;  /* Couleur de fond (gris clair) pour chaque bloc */
    border-radius: 8px;  /* Ajoute des coins arrondis pour un design moderne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Ajoute une ombre légère pour un effet de relief */
    z-index: 1;  /* Place les blocs au-dessus de la ligne verticale */
}

/* Positionnement alterné des blocs (gauche) */
.timeline-item:nth-child(odd) {
    left: 20%;  /* Positionne les blocs impairs à gauche */
}

/* Positionnement alterné des blocs (droite) */
.timeline-item:nth-child(even) {
    left: 50%;  /* Positionne les blocs pairs à droite */
    transform: translateX(-100%);  /* Ramène les blocs à droite vers l'intérieur */
}

/* Contenu textuel des blocs */
.timeline-content h3 {
    font-size: 20px;  /* Taille de la police pour les titres */
    color: #003300;  /* Couleur du titre (vert plus foncé) */
    margin-bottom: 10px;  /* Espace sous le titre */
}

.timeline-content p {
    font-size: 16px;  /* Taille de la police pour le texte descriptif */
    color: #337033;  /* Couleur du texte (vert clair) */
    line-height: 1.5;  /* Hauteur de ligne pour améliorer la lisibilité */
}

/* Styles pour les écrans plus petits (responsivité) */
@media (max-width: 768px) {
    /* Bloquer les éléments à 100% de largeur pour une colonne verticale */
    .timeline-item {
        width: 100%;  /* Chaque bloc occupe toute la largeur */
        left: 0;  /* Réinitialise le positionnement pour les petits écrans */
        transform: none;  /* Supprime l'effet de translation */
    }

    /* Ajuste la position de la ligne verticale pour s'adapter à une colonne */
    .timeline::before {
        left: 20px;  /* Place la ligne légèrement à gauche */
    }
    /* Conteneur principal : organisation en deux colonnes */
.container {
    display: flex;  /* Utilise Flexbox pour placer les éléments côte à côte */
    flex-wrap: wrap;  /* Permet le passage en mode empilé sur petits écrans */
    width: 100%;  /* Occupe toute la largeur de l'écran */
    height: 100vh;  /* Occupe toute la hauteur visible */
}

/* Section timeline (colonne gauche) */
.timeline {
    flex: 1;  /* Prend tout l'espace disponible à gauche */
    padding: 20px;  /* Ajoute un espace intérieur */
    position: relative;  /* Nécessaire pour la ligne verticale */
}

/* Ligne verticale de la timeline */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;  /* Place la ligne au milieu de la colonne */
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #007bff;
    z-index: 0;
}

/* Style des items de la timeline */
.timeline-item {
    position: relative;
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 80%;  /* Réduit la largeur des blocs pour ne pas occuper tout l'espace */
}

.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-item:nth-child(even) {
    left: 20%;  /* Décalage des blocs pairs */
}

/* Conteneur de l'image (colonne droite) */
.image-container {
    flex: 0 0 40%;  /* Réserve 40% de la largeur pour l'image */
    display: flex;
    align-items: center;  /* Centrer l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    background-color: #f8f9fa;  /* Couleur de fond pour délimiter la zone */
    padding: 20px;  /* Espacement autour de l'image */
}
/* Image portrait */
.portrait-image {
    max-width: 100%;  /* Limite la largeur à la taille du conteneur */
    max-height: 90%;  /* Empêche l'image de dépasser le conteneur en hauteur */
    border-radius: 8px;  /* Ajoute des coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Ombre pour un effet esthétique */
}

/* Responsivité pour les petits écrans */
@media (max-width: 768px) {
    .container {
        flex-direction: column;  /* Les éléments passent en mode vertical */
    }

    .image-container {
        flex: 0 0 auto;  /* La section image occupe toute la largeur */
        height: 300px;  /* Taille de l'image en hauteur sur les petits écrans */
    }

    .portrait-image {
        max-height: 100%;  /* Ajuste la hauteur de l'image pour les petits écrans */
    }
}

}


/* ==== Page Compétences === */
{
    font-family: Arial, sans-serif; /* Police de caractères */
    background-color: #f9f9f9; /* Couleur de fond de la page */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px; /* Ajoute un espace autour du contenu */
    display: flex; /* Active un conteneur flexible */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    height: 100vh; /* Hauteur de la page égale à la hauteur de la fenêtre */
}

/* Conteneur principal pour les carrés */
.grid-container {
    display: grid; /* Active une disposition en grille */
    grid-template-columns: 1fr 1fr; /* Crée deux colonnes de largeur égale */
    gap: 70px; /* Ajoute un espace de 70px entre les carrés */
    max-width: 800px; /* Limite la largeur totale de la grille */
    margin: auto; /* Centre horizontalement la grille */
}

/* Style des carrés individuels */
.square {
    background-color: #f5f5dc; /* Couleur de fond beige */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère autour des carrés */
    overflow: hidden; /* Empêche le contenu de déborder */
}

/* Style des titres des carrés */
.square-title {
    background-color: #003300; /* Couleur de fond vert plus foncé*/
    color: #f5f5dc; /* Couleur du texte beige */
    font-size: 18px; /* Taille de la police du titre */
    font-weight: bold; /* Texte en gras */
    text-align: center; /* Centre le texte du titre */
    padding: 10px; /* Ajoute un espace autour du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style du contenu à puces des carrés */
.square-content {
    color: #003300; /* Couleur du texte vert plus foncé */
    padding: 15px; /* Ajoute un espace autour du contenu */
    font-size: 16px; /* Taille de la police du contenu */
}

/* Style des listes à puces */
.square-content ul {
    padding-left: 20px; /* Ajoute un retrait pour les puces */
}

/* Style des éléments de la liste */
.square-content ul li {
    list-style-type: disc; /* Définit le style des puces (points) */
}


/* Pied de page en vert foncé avec texte beige clair */
footer {
    background-color: #003300; /* Vert plus foncé */
    color: #f5f5dc; /* Beige clair */
    padding: 20px;
    text-align: center;
}

/* Liens dans le pied de page en beige clair */
footer a {
    color: #f5f5dc; /* Beige clair */
}

footer a:hover {
    color: #e0e0d1; /* Légèrement plus foncé au survol */
}