/* global.css */

/* --- RESET CSS DE BASE ET STYLES GLOBAUX --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-color: #f4f4f4;
    position: relative;
    min-height: 100vh;
    margin-bottom: 60px; /* Espace pour footer ou bouton retour */
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: #1abc9c; /* Vert sarcelle NEBELIS */
    text-decoration: none;
}

a:hover {
    color: #16a085; /* Vert sarcelle plus foncé */
    text-decoration: underline;
}

/* --- STYLES POUR LE HEADER --- */
/* --- STYLES POUR LE HEADER --- */
header {
    background-color: #2c3e50; /* Bleu NEBELIS */
    color: #fff;
    padding: 20px; /* Ajustez le padding vertical et horizontal */
    border-bottom: #1abc9c 5px solid; /* Vert sarcelle NEBELIS */
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre le .header-content horizontalement si le header est plus large */
    align-items: center; /* Centre le .header-content verticalement si le header a une hauteur fixe ou plus de contenu */
}

.header-content {
    display: flex; /* Active Flexbox pour logo et title-group */
    align-items: center; /* Aligne verticalement le logo et le groupe de titres */
    gap: 40px; /* Espace entre le logo et le groupe de titres (ajustez) */
    /* Vous pouvez ajouter max-width et margin: auto ici si vous voulez limiter la largeur du contenu du header */
    /* max-width: 1200px; */
    /* margin: 0 auto; */
}

img.logo-header { /* Styles pour le logo DANS le header */
    max-height: 70px; /* Ajustez la taille du logo */
    margin-right: 20px;
    /* margin-bottom: 0; /* Plus besoin de margin-bottom si aligné avec flex */
    /* display: block; et margin:auto; ne sont plus nécessaires pour le centrage ici */
}

.title-group {
   
    text-align: left; /* Aligne le texte à gauche, puisque le groupe est maintenant à côté du logo */
}

.title-group h1 {
    margin: 0; /* Enlever les marges par défaut si elles existent */
    font-size: 2.5em; /* Ajustez si besoin */
    font-weight: 600;
    line-height: 1.1; /* Pour un meilleur alignement vertical avec le logo si le titre est sur plusieurs lignes */
}

.title-group p.subtitle {
    font-size: 1.1em; /* Ajustez si besoin */
    margin: 5px 0 0 0; /* Un peu de marge au-dessus */
    color: #ecf0f1;
    line-height: 1.2;
}

/* --- STYLES POUR LE MENU DE NAVIGATION PRINCIPAL (main-nav) --- */
nav.main-nav {
    background: #34495e;
    color: #fff;
    padding: 12px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    z-index: 100;
}

nav.main-nav ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

nav.main-nav ul li {
    display: inline-block;
    margin: 0 15px;
    position: relative;
}

nav.main-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s ease;
    padding: 10px 0;
    display: inline-block;
}

nav.main-nav ul li:not(.dropdown) > a:hover,
nav.main-nav ul li:not(.dropdown) > a.active {
    color: #1abc9c;
    border-bottom: 2px solid #1abc9c;
    padding-bottom: 8px;
}

/* Dropdown Styles */
nav.main-nav ul li.dropdown .dropbtn {
    cursor: pointer;
}

nav.main-nav ul li.dropdown .dropbtn .arrow {
    font-size: 0.8em;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

nav.main-nav ul li.dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #34495e;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 101;
    border-radius: 0 0 4px 4px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 5px;
    text-align: left;
}

nav.main-nav ul li.dropdown .dropdown-content a {
    color: #f0f0f0;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 1em;
    font-weight: normal;
    border-bottom: none !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav.main-nav ul li.dropdown .dropdown-content a:hover {
    background-color: #2c3e50;
    color: #1abc9c;
    text-decoration: none;
}

nav.main-nav ul li.dropdown:hover .dropdown-content {
    display: block;
}

nav.main-nav ul li.dropdown:hover .dropbtn .arrow {
    transform: rotate(180deg);
}

nav.main-nav ul li.dropdown > a.dropbtn:hover,
nav.main-nav ul li.dropdown > a.dropbtn.active {
    color: #1abc9c;
    border-bottom: none;
}


/* --- STYLES POUR LE CONTENEUR PRINCIPAL DE PAGE --- */
.container {
    width: 85%;
    margin: 0 auto; /* Raccourci pour margin-left et margin-right auto */
    overflow: hidden; /* Pour contenir les flottants si utilisé, bonne pratique */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* --- STYLES POUR LA SECTION HERO --- */
.hero-section {
    /* L'image de fond sera définie spécifiquement dans la page HTML si elle change par page */
    /* background: url('nebelis_hero_background_tech.jpg') no-repeat center center/cover; */
    color: #fff; /* Couleur du texte sur fond sombre */
    padding: 70px 40px; /* Espace intérieur */
    text-align: center;
    margin-bottom: 30px; /* Espace après la section */
}

.hero-section h2 {
    font-size: 2.3em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6); /* Ombre portée pour la lisibilité */
}

.hero-section .tagline {
    font-size: 1.3em;
    font-weight: 500;
    margin-bottom: 25px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.hero-section .strengths {
    font-size: 1.1em;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* --- STYLES POUR LE BOUTON D'APPEL À L'ACTION (CTA) --- */
.cta-button {
    display: inline-block;
    background-color: #1abc9c; /* Vert sarcelle NEBELIS */
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cta-button:hover {
    background-color: #16a085; /* Vert sarcelle plus foncé */
    transform: translateY(-2px); /* Léger effet de soulèvement */
    text-decoration: none; /* S'assurer qu'il n'y a pas de soulignement */
}

/* --- STYLES POUR LES SECTIONS DE COMPÉTENCES --- */
/* Titre général au-dessus des sections de compétences (s'il est stylé globalement) */
main#competences > h2.main-section-title, /* Si vous ajoutez cette classe au H2 */
h2.page-title-contact /* Pour la page contact */ {
    text-align:center;
    font-size: 2em; /* ou 2.5em pour titre de page */
    color: #2c3e50;
    margin-bottom:30px;
    padding-bottom: 10px; /* Optionnel, si une bordure est ajoutée */
    /* border-bottom: 3px solid #1abc9c; Optionnel */
}


.competence-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e0e0e0; /* Bordure de l'encadré */
    border-radius: 8px; /* Coins arrondis */
    background-color: #fdfdfd; /* Fond légèrement différent */
    transition: box-shadow 0.3s ease;
}

.competence-section:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Ombre au survol */
}

.competence-section h2 {
    color: #2c3e50; /* Couleur du titre de section */
    border-bottom: 3px solid #1abc9c; /* Soulignement du titre */
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.7em;
    display: flex;
    align-items: center;
}

.competence-section .icon {
    font-size: 1.5em;
    margin-right: 15px;
    color: #1abc9c; /* Couleur de l'icône */
    min-width: 30px;
    text-align: center;
}

.competence-section p, 
.competence-section ul {
    margin-left: 45px; /* Décalage si icône présente */
    /* Si pas d'icône ou si vous voulez un style différent sans icône,
       vous devrez ajouter une classe au H2 ou à la section pour conditionner ce margin-left */
}

.competence-section ul {
    list-style-type: disc;
    padding-left: 20px;
}

.competence-section ul li {
    margin-bottom: 8px;
}

.competence-section .highlight-point {
    font-weight: 600;
    color: #34495e;
}

/* --- STYLES POUR LA SECTION "À PROPOS" --- */
.about-nebelis {
    background-color: #eaf2f8; /* Fond bleu clair */
    padding: 25px;
    margin: 40px 0;
    border-radius: 8px;
    text-align: center;
}

.about-nebelis h2 {
    color: #2980b9; /* Bleu plus soutenu */
    margin-top: 0;
    margin-bottom: 15px; /* Ajouté pour espacement */
    font-size: 2em; /* Consistance avec autres titres de section */
}

.about-nebelis p {
    font-size: 1.1em;
    color: #34495e;
    max-width: 800px; /* Limiter la largeur pour meilleure lisibilité */
    margin-left: auto;
    margin-right: auto;
}

/* --- STYLES POUR LA SECTION CONTACT (si utilisée sur plusieurs pages) --- */
/* Ces styles peuvent être utilisés par la page contact.html et par une section #contact sur la page d'accueil */
.contact-section-wrapper {
    padding: 40px 20px;
    background-color: #f9f9f9;
    /* border-top: 1px solid #e0e0e0; Optionnel */
    text-align: center;
}
/* Le titre de la section contact (h2.section-title) est déjà couvert par main#competences > h2... plus haut */

.contact-section-wrapper p.intro-text {
    font-size: 1.1em;
    margin-bottom: 30px; /* Augmenté */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 20px; /* Réduit un peu */
}

.contact-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 250px;
    text-align: left;
    flex-basis: 300px; /* Pour aider à l'alignement et à la taille */
    flex-grow: 1;
}

.contact-item .icon {
    font-size: 1.8em;
    color: #1abc9c;
    margin-right: 15px;
    vertical-align: middle;
}

.contact-item h3 {
    font-size: 1.2em;
    color: #34495e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-item a {
    color: #333;
    word-break: break-all;
}

.contact-item a:hover {
    color: #1abc9c;
    text-decoration: underline;
}

/* Styles du formulaire de contact (si utilisés) */
.contact-form {
    max-width: 600px;
    margin: 40px auto 0 auto; /* Augmenté le margin-top */
    text-align: left;
}
.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #34495e;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1em;
}
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-form button[type="submit"] {
    background-color: #1abc9c;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.contact-form button[type="submit"]:hover {
    background-color: #16a085;
    text-decoration: none; /* Pas de soulignement pour le bouton */
}


/* --- STYLES POUR LE FOOTER --- */
footer {
    text-align: center;
    padding: 30px 20px;
    background-color: #2c3e50; /* Bleu NEBELIS */
    color: #ecf0f1; /* Gris clair */
    margin-top: 40px;
    border-top: #1abc9c 5px solid; /* Vert sarcelle NEBELIS */
}

footer p {
    margin: 5px 0;
}

footer a {
    color: #1abc9c; /* Liens dans le footer en vert sarcelle */
}

footer a:hover {
    text-decoration: underline;
}

/* Dans global.css */

/* ... (autres styles : reset, body, header, nav, .container, etc.) ... */

/* --- STYLES POUR ÉLÉMENTS COMMUNS DES PAGES DE COURS --- */

.module {
    margin-bottom: 30px;
    
    padding: 25px; /* J'avais 25px dans le cours expert, 20px dans les originaux */
    border: 1px solid #ddd;
    border-radius: 30px; /* J'avais 8px dans le cours expert, 5px dans les originaux */
    background-color: #fdfdfd; /* #f9f9f9 dans les originaux */
    /*background-color: #4675d1 /*dans les originaux */
}

.module h2 {
    color:#2c3e50;
    border-bottom: 3px solid #1abc9c; /* 3px dans expert, 2px dans originaux */
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.8em;
}

.module h3 {
    color: #34495e;
    margin-top: 25px; /* 20px dans originaux */
    font-size: 1.5em; /* Pas défini explicitement avant, mais c'est une bonne taille */
}

.module h4 { /* Style du cours Niveau 2 */
    color: #555;
    margin-top: 15px;
    font-style: italic;
    font-size: 1.2em; /* Pas défini explicitement avant, mais c'est une bonne taille */
}

.highlight { /* Style des cours Initiation et Niveau 2 */
    background-color: #fff3cd; /* Jaune clair */
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.exercise { /* Style des cours Initiation et Niveau 2, avec le fond vert souhaité */
    border-left: 5px solid #1abc9c; /* Vert sarcelle pour la bordure */
    padding: 15px; /* 10px 15px dans originaux */
    background-color: #e8f8f5; /* Fond vert très clair */
    margin-top: 20px; /* 15px dans originaux */
    border-radius: 5px; /* Ajouté pour la cohérence avec .module */
}

.exercise strong { /* Style des cours Initiation et Niveau 2 */
    color: #0e6251; /* Vert foncé pour le texte "Exercice" */
}

.tip { /* Style du cours Niveau 2 */
    background-color: #e6f7ff; /* Bleu très clair */
    border-left: 5px solid #007bff; /* Bleu */
    padding: 15px; /* 10px 15px dans originaux */
    margin-top: 20px; /* 15px dans originaux */
    border-radius: 5px; /* Ajouté */
}

.tip strong { /* Style du cours Niveau 2 */
    color: #0056b3; /* Bleu foncé pour le texte "Conseil" */
}

.important-note { /* Style du cours Initiation */
    background-color: #eaf2f8; /* Bleu clair (différent de .tip) */
    border-left: 5px solid #3498db; /* Bleu moyen */
    padding: 15px; /* 10px 15px dans originaux */
    margin-top: 20px; /* 15px dans originaux */
    border-radius: 5px; /* Ajouté */
}

.important-note strong { /* Style du cours Initiation */
    color: #2874a6; /* Bleu plus soutenu */
}

/* Styles pour les listes (si vous voulez les harmoniser) */
.module ul, .module ol {
    padding-left: 25px; /* Un peu plus que les 20px originaux pour plus d'aération */
    margin-top: 10px;
    margin-bottom: 10px;
}

.module li {
    margin-bottom: 8px;
}

/* Styles pour les figures et légendes (si vous voulez les harmoniser) */
figure {
    text-align: center;
    margin: 25px 0; /* 20px dans originaux */
}

figure img {
    max-width: 90%; /* Limite la largeur pour ne pas déborder, 100% dans initiation */
    height: auto;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px; /* Ajouté pour adoucir */
}

figure figcaption {
    font-style: italic;
    font-size: 0.9em;
    color: #555;
    margin-top: 8px; /* 5px dans originaux */
}

/* Styles pour les tableaux (si vous voulez les harmoniser) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0; /* 15px dans originaux */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Légère ombre pour les tableaux */
    border-radius: 4px; /* Coins arrondis pour le conteneur de la table si elle a une bordure externe */
    overflow: hidden; /* Pour que le border-radius fonctionne avec les cellules */
}

th, td {
    border: 1px solid #e0e0e0; /* Bordure plus claire que #ddd */
    padding: 10px 12px; /* Un peu plus de padding */
    text-align: left;
}

th {
    background-color: #34495e; /* Fond des en-têtes (Bleu gris) */
    color: white;
    font-weight: 600; /* Un peu plus en évidence */
}

/* Styles pour les blocs de code (du cours expert, peuvent être utiles ailleurs) */
.code-block {
    background-color: #2d2d2d;
    color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', Courier, monospace;
    font-size: 0.95em;
    margin: 20px 0; /* 15px dans expert */
    border: 1px solid #444;
}

.code-block pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* ... (autres styles : footer, bouton retour, etc.) ... */


/* --- STYLES POUR LE BOUTON DE RETOUR À L'ACCUEIL (FIXÉ, POSITION AJUSTÉE) --- */
.back-to-home {
    position: fixed; /* Reste visible même en scrollant, par rapport à la fenêtre */
    /* Choisissez UNE des options de positionnement vertical ci-dessous : */

    /* OPTION 1: Positionner depuis le HAUT de la fenêtre */
    top: 150px;      /* Exemple: 150px depuis le haut. Ajustez cette valeur. */
    /* bottom: auto; */   /* Important si vous utilisez 'top', pour annuler un 'bottom' précédent */

    /* OPTION 2: Augmenter la valeur de 'bottom' pour le remonter depuis le bas */
    /* bottom: 150px; */ /* Exemple: 150px depuis le bas. Ajustez. Plus la valeur est grande, plus il monte. */

    /* OPTION 3: Centrer verticalement (approximatif, peut nécessiter JS pour un centrage parfait dynamique) */
    /* top: 50%; */
    /* transform: translateY(-50%) scale(1); /* Pour le centrage vertical et pour s'assurer que 'scale' dans :hover fonctionne */
    /* Si vous utilisez cette option, ajustez la transition ci-dessous */


    right: 20px;     /* Positionné à 20px du bord droit */
    background-color: #2c3e50;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Ajustez la transition si vous avez utilisé transform pour le centrage vertical */
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.back-to-home:hover {
    background-color: #1abc9c;
    /* Si vous avez utilisé l'OPTION 3 pour le centrage, le transform dans :hover doit inclure translateY */
    /* transform: translateY(-50%) scale(1.1); */
    transform: scale(1.1); /* Si pas d'OPTION 3 */
    color: #fff;
    text-decoration: none;
}

.back-to-home::before {
    content: '\21A9';
    font-weight: bold;
}