/* default.css */
/* Lien non visité */
a:link {
    text-decoration: none; /* Pas de soulignement */
    color: inherit; /* Utilise la couleur par défaut du texte */
}

/* Lien visité */
a:visited {
    text-decoration: none; /* Pas de soulignement */
    color: inherit; /* Utilise la couleur du div parent */
}

/* Lien au survol de la souris */
a:hover {
    text-decoration: none; /* Soulignement uniquement au survol */
}

/* Lien actif (lorsqu'il est cliqué) */
a:active {
    text-decoration: none; /* Pas de soulignement */
}


h1,
h2,
h3 {
    color: #333; /* Couleur du texte pour les titres de niveau 1, 2 et 3 */
}

li,
p {
    color: #010; /* Couleur du texte pour les éléments de liste et les paragraphes */
}

/* body.css */
body {
    font-family: "Raleway", sans-serif; /* Police de caractères par défaut */
    font-weight: 100; /* Utiliser le style "fine" de la police Raleway */
    background-color: #f4f4f4; /* Couleur de fond */
    background-image: url("../images/background.jpeg"); /* Image de fond */
    background-size: cover;
    background-repeat: no-repeat; /* Ne pas répéter l'image de fond */
    background-attachment: fixed; /* Rendre l'image de fond fixe */
    margin: 10; /* Marge extérieure de 10 pixels */
    padding: 0; /* Aucun espacement intérieur */
}

.container {
    width: 90%; /* Largeur du conteneur à 90% de la largeur du parent */
    margin: 20px auto; /* Marge de 20 pixels en haut et en bas, et centrage horizontal */
    margin-bottom: 50px; /* Marge de 200 pixels en bas */
    background-color: #f0f0f0; /* Gris très léger */
    border-radius: 8px; /* Bordures arrondies de 8 pixels */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre de boîte avec un flou de 10 pixels */
    overflow: hidden; /* Contenu débordant caché */
    display: flex; /* Utilisation du modèle de boîte flexible */
    flex-wrap: wrap; /* Les éléments flexibles passent à la ligne si nécessaire */
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333; /* Gris foncé */
  color: white; /* Blanc */
  text-align: left;
  padding: 10px 0;
  padding-left: 10px; /* Ajouter un espacement de 10px entre le texte et le bord gauche */
  opacity: 0.75;
}

/* partie cachée */
.hidden {
    display: none;
}

.left-column {
    flex: 1; /* Utilisation de tout l'espace disponible dans la direction principale (flexbox) */
    background-color: #7a9ab6; /* Couleur de fond de la colonne */
    color: #fff; /* Couleur du texte */
    padding: 30px; /* Espacement intérieur de 30 pixels autour du contenu */
    box-sizing: border-box; /* La largeur et la hauteur incluent le padding et la bordure */
    display: flex; /* Utilisation du modèle de boîte flexible */
    flex-direction: column; /* Les éléments sont disposés en colonne */
    align-items: left; /* Alignement des éléments enfants sur la gauche */
    min-width: 300px; /* Largeur minimale de la colonne de 200 pixels */
}

.right-column {
    flex: 4; /* Utilisation de quatre fois plus d'espace que les autres colonnes dans la direction principale (flexbox) */
    background-color: #f0f0f0; /* Gris très léger */
    color: #333; /* Couleur du texte */
    padding: 30px; /* Espacement intérieur de 30 pixels autour du contenu */
    box-sizing: border-box; /* La largeur et la hauteur incluent le padding et la bordure */
}

/* Bouton déployer / cacher */
.toggle-btn {
  margin-left: 30px;
  float: right; /* Aligner le bouton à droite */
  font-family: inherit; /* Utiliser la police de la classe section */
  font-size: 1.5em; /* Augmenter la taille du caractère */
}

/* header.css */

.illustration {
    text-align: center; /* Alignement du texte au centre pour les illustrations */
    margin-bottom: 15px; /* Marge inférieure de 15 pixels pour les illustrations */
}

.illustration img {
    max-width: 100%; /* La largeur maximale de l'image est de 100% de son conteneur */
    border-radius: 50%; /* Pour rendre l'image ronde */
    max-height: 200px; /* La hauteur maximale de l'image est de 200 pixels */
    width: 120px; /* Largeur de base de l'image */
    height: 120px; /* Hauteur de base de l'image */
    border: 2px solid #000; /* Bordure de 2 pixels solide de couleur noire */
}

/* maintenance.css */
.construction-logo {
    width: 450px; /* Largeur de l'élément avec la classe "construction-logo" */
    height: 450px; /* Hauteur de l'élément avec la classe "construction-logo" */
}

/* contacts.css */
.contact {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #010; /* Couleur du texte */
}

.contact-logo {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.contact span {
    margin: 0;
    text-align: center;
}

/* loisirs.css */
.loisir {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #010; /* Couleur du texte */
}

.loisir-logo {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.loisir span {
    margin: 0;
    text-align: center;
}

/* skills.css */

.skill {
    margin-bottom: 10px; /* Marge inférieure de 10 pixels pour espacer les compétences */
}

.skill-logo {
    width: 30px; /* Largeur de l'icône de compétence */
    height: 30px; /* Hauteur de l'icône de compétence */
    border-radius: 50%; /* Pour rendre le logo rond */
    border: 1px solid #000; /* Ajout d'une bordure noire de 1 pixel autour de l'icône */
    margin-right: 5px; /* Espacement à droite de 10 pixels pour séparer l'icône du texte */
    background-color: #fff; /* Couleur de fond blanc pour l'icône de compétence */
}

.rating {
    display: flex; /* Utilisation du modèle de boîte flexible */
    align-items: center; /* Alignement vertical des éléments enfants au centre */
}

.rating p {
    margin-left: 5px; /* Marge à gauche de 10 pixels entre le texte et les carrés */
    margin-top: 0; /* Réinitialisation de la marge supérieure pour les paragraphes */
    margin-bottom: 0; /* Réinitialisation de la marge inférieure pour les paragraphes */
}

.stars {
    display: inline-block;
    margin-right: 0; /* Espacement entre les étoiles et le texte */
}

.star {
    display: inline-block; /* Afficher les étoiles en ligne */
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-star'><path fill='%23ccc' d='M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21 L12 17.77 L5.82 21 L7 14.14 L2 9.27 L8.91 8.26 L12 2 z'/></svg>");
    background-repeat: no-repeat;
    margin-right: 0px; /* Pas de marge entre les étoiles */
}

.filled {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-star'><path fill='%23bf4628' d='M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21 L12 17.77 L5.82 21 L7 14.14 L2 9.27 L8.91 8.26 L12 2 z'/></svg>");
}

.empty {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-star'><path fill='%23ccc' d='M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21 L12 17.77 L5.82 21 L7 14.14 L2 9.27 L8.91 8.26 L12 2 z'/></svg>");
}

/* custom.css */

.custom-list {
    padding-left: 0px; /* Ajusté pour rapprocher la puce de gauche */
}

.custom-list li {
    list-style: none;
    background: url("../images/fleche-right.svg") no-repeat left center;
    background-size: 15px;
    padding-left: 25px; /* Réduire l'espace entre la puce et le texte */
    margin-left: 0; /* Réinitialiser la marge gauche */
    margin-bottom: 10px;
}

/* section.css */
.section {
    margin-bottom: 20px; /* Marge inférieure de 20 pixels pour les sections */
}

.section h2 {
    border-bottom: 2px solid #bf4628;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #bf4628;
}

.toggle-btn {
  margin-left: 30px;
  float: right; /* Aligner le bouton à droite */
  font-family: inherit; /* Utiliser la police de la classe section */
  font-size: 1.5em; /* Augmenter la taille du caractère */
}

/* experiences.css */
/* Classe parente */
.experience {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid black;
    padding-bottom: 15px;
    margin-bottom: 10px;
}
/* Première ligne de l'expérience */
.experience-info {
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

/* Nom du client */
.company-name {
    flex: 1; /* Correction de la syntaxe */
    width: auto; /* Ajustement automatique */
    display: flex;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
}

/* Logo */
.company-logo {
    width: 75px;
    height: 75px;
    margin-right: 10px; /* Ajustement de la marge */
}

/* Partie texte à droite du logo */
.experience-details {
    flex: 1; /* Prend tout le reste de l'espace disponible */
    display: flex;
    align-items: center; /* Alignement vertical */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Intitulé du poste */
.job-title {
    flex: 1; /* Prend la même taille que le nom du client */
    font-style: italic;
    margin-right: 30px;
}

/* Date du poste */
.dates {
    width: auto; /* Ajustement automatique */
    color: #666;
    justify-content: flex-end;
    margin-left: auto;
}


/* Styles pour décrire en quoi consiste le projet */
.experience-project-description {
    font-style: italic; /* Texte en italique */
    color: #99c2ff; /* Couleur du texte */
    margin-top: 5px; /* Marge en haut pour l'espacement */
}

.experience-project-description p {
    color: #99c2ff !important; /* Couleur du texte avec !important */
    color: #7a9ab6 !important; /* Couleur du texte avec !important */
}

.experience-details-description {
    width: 95%px;
    font-size: 1em; /* Taille de police normale */
    line-height: 1.5; /* Hauteur de ligne pour une meilleure lisibilité */
    color: #333; /* Couleur de texte sombre */
    margin-top: 10px; /* Marge en haut pour l'espacement */
}

.experience-details-description h3 {
    font-size: 1.2em !important;; /* Taille de police légèrement plus grande pour les titres de niveau 3 */
    font-weight: bold !important;; /* Texte en gras pour les titres */
    margin-top: 20px !important;; /* Marge en haut pour l'espacement des titres */
    margin-bottom: -10px !important;; /* Espacement vertical après les titres */
}

/* Premier niveau de liste */
.experience-details-description > ul,
.experience-details-description > ol {
    padding-left: 25px; /* Ajoute un retrait de 20 pixels à gauche pour le premier niveau de liste */
    margin-top: 10px; /* Ajoute une marge en haut de 10 pixels */
    margin-bottom: 10px; /* Ajoute une marge en haut de 10 pixels */
}

/* Niveaux de liste suivants */
.experience-details-description ul ul,
.experience-details-description ol ol {
    padding-left: 10px; /* Ajoute un retrait de 10 pixels à gauche pour les niveaux de liste suivants */
}

/* Éléments de liste */
.experience-details-description ul ul li,
.experience-details-description ol ol li {
    padding-left: 10px; /* Ajoute un retrait de 10 pixels à gauche pour les éléments de liste */
}

/* responsive.css */
@media (max-width: 768px) {
    .container {
        width: 100%; /* La largeur du conteneur est de 100% de son parent */
        flex-direction: column; /* Les éléments enfants sont empilés verticalement */
    }
    .left-column,
    .right-column {
        flex: 1; /* Les colonnes prennent autant d'espace que possible */
        width: 100%; /* La largeur des colonnes est de 100% */
    }
    .illustration img {
        max-height: 150px; /* La hauteur maximale de l'image est de 150 pixels */
        width: 150px; /* Largeur de l'image pour les petits écrans */
        height: 150px; /* Hauteur de l'image pour les petits écrans */
    }
    h1 {
        font-size: 24px; /* Taille de police réduite pour les petits écrans */
    }
    h2 {
        font-size: 20px; /* Taille de police réduite pour les petits écrans */
    }
    h3 {
        font-size: 14px; /* Taille de police réduite pour les petits écrans */
    }

    .hidden {
        display: block !important; /* ou inline */
    }

    /* Première ligne de l'expérience */
    .experience-info {
        max-width: 95%;
        display: flex;
        align-items: left;
        font-size: 0.75em; /* Taille du texte réduite pour les téléphones portables */
    }

    /* Partie texte à droite du logo */
    .experience-details {
        max-width: 95%;
        display: flex;
        justify-content: flex-start; /* Aligner verticalement au début */
        align-items: flex-start; /* Aligner horizontalement au début */
    }

    /* Logo */
    .company-logo {
        width: 50px;
        height: 50px;
        margin-right: 0px; /* Ajustement de la marge */
    }

    /* Nom du client, intitulé du poste et date du poste */
    .company-name,
    .job-title,
    .dates {
        margin-left: 5px;
        margin-top: 10px; /* Espace entre chaque élément */
        font-size: 1em; /* Taille du texte réduite pour les téléphones portables */
    }

    /* Nom du client */
    .company-name {
        font-weight: bold;
    }

    /* Intitulé du poste */
    .job-title {
        font-style: italic;
        margin-right: 5px; /* Marge à droite pour séparer le titre du poste de la date */
    }

    /* Date du poste */
    .dates {
        color: #666;
        align-items: center, left;
    }

    .experience-details-description {
        max-width: 95%;
    }

    .toggle-btn {
            display: none; /* Cacher l'élément lorsque la taille de l'écran est inférieure à 768px */
        }
}