body {
  background-color: FloralWhite;
}

footer {
    justify-content: center; /* alligne le texte au centre */
    padding: 0%; 
    background-color: #2C3E50; /* fond bleu */
    bottom : 0; /* collé en bas */
    left:0; /* collé sur le coté gauche */
    width: 100%; /* prend toute la largeur */
    height: 7.4em; /* la taille */
    position: fixed; /* fixé au dessus de la vidéo */
}


h1{
  font-family: Snell Roundhand, cursive;
  color: black;
}

p{
font-size: 25px;
text-align: center;
font-family: "Playpen Sans Hebrew", cursive;
}


article {
    max-width: 1000px;
    margin: 40px auto; /* marge sur le côté */
    padding: 30px;
    background-color: white; /* fond blanc */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);  /* espèce d'ombre autour du cadre */
    border-radius: 8px;
}

video{
    position: fixed;
    z-index: -1;
    top: -150px; /* les 4balises suivantes sont pour faire en sorte que la vidéo soit en fond et pour gérer sa position dans la page */
    left: 0;
    right: 0;
    bottom: 0; 
    min-width: 100%; /* prend tout la largeur */
    min-height: 100%; /* prend toute la longueur */
    width: auto;
    height: auto;
}

iframe {
    margin-top: 100px ; /* centre la video dans la page */
    margin-left: 350px ;
    height: 600px; /* on agrandit la video */
    width: 1200px; /* on agrandit la video */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Petite ombre portée */
}

/*==============================PAGE DE NAIVATION==============================*/


/* barre dans le fond de couleur bleu */
header nav {
    background-color: #34495E;
    width: 100%;
    margin: 0; /* fais en sorte que ce soit collé à droite et à gauche */
}

/* fais en sorte que les cases soient alligné horizontalement et non verticalement */
header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}

/* fais en sorte que l'ensemble des liens prennent la meme place et que ça fasse toute la page */
header nav li {
    flex-grow: 1;
    text-align: center;
}

/* STYLE DES ONGLETS TIERCES */
header nav a {
    display: block;
    color: white;
    padding: 16px 22px; /* ecart entre le coté de la case et le texte */
    text-decoration: none; /* pour pas que les textes soient soulignés * */
    font-weight: bold; /* en gras */
    font-size: 0.9em; /* taille de la police */
    transition: background-color 0.3s; /* pour fluidifier */
}

/* fais en sorte que la couleur change lorsque l'on passe sur un onglet */
header nav a:hover {
    background-color: #3498DB; /* Bleu ciel */
    color: #FFFFFF;
}

/* STYLE DE L'ONGLET ACTIF */
header nav a.active {
    /* Couleur plus foncée pour l'onglet actif */
    background-color: #2C3E50;
    /* on ne peut pas cliquer sur la page ou l'on est, et lorsque l'on passe dessus on a un curseur et pas le lien */
    cursor: default;
    pointer-events: none;
}

/* couleur de l'onglet actif */
header nav a.active:hover {
    background-color: #2C3E50;
}

/*==============================FIN BARRE DE NAVIGATION==============================*/


/*==============================INDEX==============================*/


/* encadrement en bleu du texte pour qu'il soit lisible sur la vidéo */
.texte-encadrement-index {
    z-index: 100;
    margin: 50px auto; 
    padding: 30px;
    background-color: #34495E;
    width: 1500px;
    height: 180px;
}

/* met le texte en blanc et l'alligne */
.texte-en-blanc{
    color: white;
    text-align: center;
}



/*==============================INDEX==============================*/


/*============================CV=============================*/


/*  En-tête du CV */
.cv-en-tete {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre le nom et la photo */
    flex-direction: column; 
    padding-bottom: 20px; /* ecart entre le bas de la case et le texte */
    border-bottom: 2px solid #ccc; /* baree séparant l'en-tête et le corps */
}

/* photo de profil ronde au centre de la page (la page qui est dans la page) */ 
.photo-de-profil {
    width: 100px;
    height: 100px;
    border-radius: 30%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* division en 2 colonnes pour par la suite pouvoir alligné certaines choses à droite ou à gauche */
.division-colonne {
    display: flex; 
    width: 100%;
    margin-top: 30px;
}

/* Colonne de gauche */
.colonne-gauche {
    padding: 0 20px;
    width: 30%; 
    box-sizing: border-box;
    border-left: 2px solid #ccc; /* la barre qui est présente pour séparer les 2 colonnes */
}

/* Colonne Principale (Formation, Expérience, plus large) */
.colonne-droite {
    padding-right: 20px;
    width: 70%; /* Prend 70% de la largeur du corps */
    box-sizing: border-box;
}

/* Styles des titres présent dans les différentes colonnes */
.colonne-droite h2 {
    color: #333; /* Noir pour les titres de la colonne principale */
    font-size: 1.5em;
    margin-top: 25px;
}

.colonne-gauche h2 {
    color: #555; /* Gris foncé pour les titres latéraux */
    font-size: 1.2em;
    margin-top: 25px;
}
/*============================FIN CV=============================*/




/*============================Localisation=============================*/

.centre { /* permet de centrer la photo  en resolution 90%*/
       margin: 70px 270px;
       border:5px solid #2C3E50;
}

/*============================Fin Localisation=============================*/

/*============================MY TOWN=============================*/

/* pour faire en sorte que les photos aient des bords arrondis qu'ils aient une bordure et qu'elles soient toutes alligné en 90% (en changant la taille notament ou encore lespace entre les photos) */
.cadrephoto {
    height: 400px;
    width: 400px;
    margin: 30px ;
    padding: 2px;
    background-color: #2C3E50;
    border-radius: 8px;
}

/*============================FIN MY TOWN=============================*/