/* 
DEBUG Padding's
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

a::before {content: "♥"; }

*/

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}



body {
    font-family: "Source Sans Pro", sans-serif;
    line-height: 1.5;
    background: #f9f9f9;
    color: #2e2e2e;
    padding: 1rem;
}

img {
    max-width: 100%;
}

/* Icons (liens web, mail, téléphone) */
.icon {
    width: 18px;
    height: 18px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

a {
    color: #336699;
    text-decoration: none;
}

a:hover {
    color: #254d73;
    text-decoration: underline;
}

.container {
    max-width: 960px;
    margin: 40px auto;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;
    padding: 24px;
    border-bottom: 1px solid #dcdcdc;
    /*animation: fadeInUp 1s ease both;*/
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe de base pour sections invisibles au départ */
.section-hidden {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}

/* Quand l'élément devient visible */
.section-visible {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(white, #f9f9f9);
}

section:last-child {
    border-bottom: none;
}

.section-title {
    font-weight: bold;
    font-size: 20px;
    color: #2a4b6a;
}

.section-title i {
    margin-right: 8px;
}

/*************************
* Main Info
**************************/

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #336699; /* le même bleu foncé que les titres */
    transition: transform 0.3s ease-in-out;
}

/* Effet sur l'avatar (léger zoom au survol) */
.avatar:hover {
    transform: scale(1.05);
    border-color: #254d73; /* un ton un peu plus profond au hover */
}

.my-name {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.my-title {
    font-size: 1.2rem;
    color: #555;
}

.my-subtitle {
    color: #888;
}

p {
    text-align: justify;
    text-justify: inter-word;
}

#presentation {
    text-align: center;
    font-style: italic;
    padding: 1rem;
}

#presentation .quote-icon {
    color: #aaa;
    font-size: 1.2em;
    margin: 0 0.5rem;
    vertical-align: middle;
}

.links {
    display: flex;
    margin: 10px 0 20px 0;
    justify-content: space-between;
}

.link-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

i {
    margin: 0 4px;
    font-size: 1em;
    color: #555;
}

/*************************
* Elements de sections : competences, expériences, engagements, education, references.
**************************/

.element {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #dcdcdc;
}

.element:last-child {
    border-bottom: none;
}

.element-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 18px;
}

.element-title {
    font-weight: bold;
    line-height: 1.2;
}

/*************************
* TEST
**************************/

ul {
    margin-left: 20px;
    list-style-type: disc;
}

/* Dans l'original c'était .link-item svg */
.link-inline img {
    margin-right: 6px;
}

/*************************
* Interests
**************************/

.interests-container {
    display: flex;
    justify-content: space-between;
}

.interests-container img {
    height: 35px;
    opacity: 0.75;
}

/*************************
* References
**************************/

.references {
    font-size: 18px;
}

.references-details {
    margin-bottom: 20px;
}

/*************************
* Tools
**************************/

.tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 3rem;
    margin-bottom: 24px;
}

/*************************
* Barres de progression des Outils
**************************/

/* Plus de point ni de retrait */
.tools-container ul {
    margin-left: 0;
    list-style-type: none;
}

/* Conteneur des outils avec flex et alignement à droite */
.tools-group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre chaque barre de progression */
}

/* Style de la barre de progression */
.progress-bar {
    background-color: #e0e0e0; /* Fond pour la barre vide */
    border-radius: 6px;
    height: 14px;
    width: 3rem; /* Largeur uniforme pour toutes les barres */
    margin-top: 4px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start; /* Aligne la barre de progression à droite */
}

/* Conteneur au survol : déclenche l’animation */
.progress-bar:hover .progress-fill {
    width: 100%; /* ou une largeur fixe si tu veux simuler une valeur */
}

.progress-fill {
    height: 100%;
    background-color: #2a75bb; /* Couleur pour la barre remplie */
    width: 0%; /* La largeur sera définie dynamiquement avec le style inline */
    border-radius: 6px;
    transition: transform 0.3s ease-in-out;
}

/* Hover simple : un petit effet de grossissement */
.tool-item:hover .progress-fill {
    transform: scaleX(1.05);

    transform-origin: left;
}

/* Conteneur de chaque outil */
.tool-item {
    display: flex;
    justify-content: space-between; /* Noms à gauche et barres à droite */
    align-items: center; /* Aligne verticalement les éléments */
    width: 100%; /* Prendre toute la largeur disponible */
}

/* Nom de l'outil (aligné à gauche) */
.tool-name {
    flex: 1; /* Cela fait en sorte que le nom prenne toute la place restante */
    padding-right: 10px; /* Espacement entre le nom et la barre */
}

/*************************
* Contact Formulaire
**************************/

label {
    display: block;
    margin: 1rem 0 0.5rem;
}
input,
textarea,
button {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}


/* Hover sur le bouton */
button:hover {
    background-color: #336699;
    color: white;
    border: 1px solid #2a4b6a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Style du texte placeholder */
input::placeholder,
textarea::placeholder {
    color: #888;
    font-style: italic;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.95rem;
}

#form-message {
    margin-top: 1rem;
    font-weight: bold;
    padding: 0.75rem;
    border-radius: 6px;
}
.hidden-field {
    display: none;
}
button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
.success {
    background-color: #e6f3ea;
    color: #2e654b;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
}
.error {
    background-color: #fbeaea;
    color: #993333;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
}

/*************************
* Responsive Tablets
**************************/

@media only screen and (max-width: 800px) {
    .links,
    .sect-container {
        flex-direction: column;
    }
    .tools-container {
        grid-row-gap: 3rem;
        grid-template-columns: 1fr 1fr;
    }
    .progress-bar {
        width: 6rem;
    }
}

/*************************
* Responsive Phones
**************************/

@media only screen and (max-width: 660px) {
    body {
        padding: 0;
    }

    .container {
        margin: 0;
        padding: 0;
    }
    section {
        grid-template-columns: 1fr;
        border-bottom: none;
    }

    .section-title {
        border-bottom: 1px solid lightgray;
        padding: 18px 0;
        text-align: right;
        text-transform: uppercase;
    }

    .links,
    .sect-container {
        flex-direction: column;
    }

    .interests-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .interests-container img {
        margin-right: 32px;
        margin-bottom: 16px;
    }

    .progress-bar {
        width: 100%; /* Utilisez toute la largeur pour les petits écrans */
    }
}

/* permet de définir un défilement fluide (smooth scrolling)
 * lorsqu’un lien d’ancrage (comme href="#contact-form") est cliqué. */

/* Fonctionne pas toujours
html {
  scroll-behavior: smooth;
}

*/