/* ===== Définition des variables de couleurs ===== */
:root {
    --fond-principal: rgba(10, 25, 80, 0.8);  /* Bleu foncé transparent */
    --fond-tableaux: rgba(255, 255, 255, 0.1); /* Fond translucide */
    --fond-survol: rgba(173, 216, 230, 0.5); /* Bleu clair semi-transparent */
    --texte-principal: white;
    --texte-titre: #1A5276; /* Bleu foncé */
    --texte-sous-titre: #119ff7; 
    --texte-liens: #119ff7;
    --texte-liens-survol: rgba(10, 25, 80, 0.8);
    --bordure-tableaux: white;
    --fond-bouton: #1A5276; /* Bleu foncé */
    --fond-bouton-survol: #FF5733; /* Orange rouge */
    --ombre: rgba(0, 0, 0, 0.3);
    --souligne-lien: #AED6F1; /* Bleu clair */
}

/* ===== Réinitialisation ===== */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif;
    font-size: 16px;
    background:var(--fond-principal);
    color: var(--texte-principal);
}

/* ===== Conteneur principal (table principale) ===== */
table.t {
    width: 90%;
    max-width: 1400px;
    margin: 120px auto 20px auto;
    background: var(--fond-tableaux);
    border-radius: 10px;
    box-shadow: 0px 4px 6px var(--ombre);
}

/* ===== Navigation améliorée ===== */
#bandeau {
    width: 100%;
    background: var(--fond-principal);
    padding: 15px 0;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    box-shadow: 0px 4px 6px var(--ombre);
}

/* Liste des liens en ligne */
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Éléments de menu bien alignés */
.nav li {
    display: inline-block;
}

/* Style des liens */
.nav a {
    display: inline-block;
    padding: 12px 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: var(--texte-principal);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
}

/* Effet au survol */
.nav a:hover {
    background: var(--fond-survol);
    transform: scale(1.1);
}

/* Effet au clic */
.nav a:active {
    transform: scale(0.95);
    box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}

/* Effet de soulignement animé */
.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0%;
    height: 3px;
    background: var(--souligne-lien);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav a:hover::after {
    width: 100%;
    left: 0;
}

/* ===== Bouton actif (page en cours) ===== */
.nav a.active {
    background: var(--fond-survol); /* Bleu clair */
    color: var(--texte-liens-survol); /* Texte en bleu foncé */
    cursor: default;
    pointer-events: none; /* Désactive le clic */
    font-weight: bold;
    box-shadow: inset 2px 2px 5px var(--ombre);
    transform: none;
}

.nav a.active:hover::after {
    width: 0%;
}

/* ===== Titres ===== */
h1 {
    font-size: 2.5em;
    text-align: center;
    color: var(--texte-titre);
}

h2 {
    font-size: 1.8em;
    color: var(--texte-sous-titre) !important; /* Bleu clair */
    padding: 10px 15px;
    border-left: 6px solid var(--souligne-lien);
    background: rgba(173, 216, 230, 0.2);
    border-radius: 5px;
    text-shadow: 1px 1px 3px var(--ombre);
    transition: background 0.3s ease-in-out, transform 0.2s;
}



h1, h2 {
    text-shadow: 2px 2px 4px var(--ombre);
}

/* ===== Paragraphes ===== */
p {
    font-size: 18px;
    line-height: 1.6;
}

/* ===== Liens ===== */
a {
    color: var(--texte-liens);
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: var(--texte-liens-survol);
    text-decoration: underline;
}

/* ===== Tableaux ===== */
.t2 {
    width: 100%;
    background: var(--fond-tableaux);
    border-collapse: collapse;
    color: var(--texte-principal);
    box-shadow: 3px 3px 5px var(--ombre);
}

.t2 th, .t2 td {
    border: 1px solid var(--bordure-tableaux);
    padding: 10px;
}

.t2 tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}

/* Correction du tableau t3 */
.t3 {
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1400px; /* Largeur max */
    background: var(--fond-tableaux);
    border-collapse: collapse;
    color: black; /* Texte en noir */
    margin: 20px auto; /* Centre le tableau */
}

/* Centrer le texte horizontalement mais l'aligner en haut verticalement */
.t3 td {
    text-align: center;
    vertical-align: top; /* Alignement en haut */
    padding: 1px; /* Réduit l'espacement */
}

/* Ajustement des images */
/* Corriger l'affichage des icônes avec le texte */
.t3 td img {
    display: inline-block; /* Garde l'image sur la même ligne */
    vertical-align: middle; /* Aligne l'image et le texte correctement */
    margin-right: 5px; /* Ajoute un petit espace après l'image */
}
  


/* ===== Images ===== */
.img1, .img2, .img3, .img4, .img5 {
    border-radius: 7px;
    max-width: 60%;
    height: auto;
}

/* ===== Blocs arrondis ===== */
.arrondie {
    border: none;
    color: black;
    background-color: #FAFAFA;
    box-shadow: 3px 3px 5px var(--ombre);
    padding: 10px;
}

/* ===== Styles pour les rubriques (paragraphes spéciaux) ===== */
.rubrique {
    background: var(--fond-principal);
    color: #d6edfa;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 2px 2px 5px var(--ombre);
    margin: 20px auto;
    width: 80%;
    max-width: 800px;
}

/* ===== Animation Smooth Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Responsive : Ajustements pour petits écrans ===== */
@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }
    .nav a {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
}