@charset "UTF-8"; /* Indique l’encodage du fichier CSS (utile pour les accents) */

/* Style du header (titre en haut de page) */
header { /* Sélectionne l’en-tête de page */
        text-align: center;           /* Centre le texte */
        font-weight: bold;            /* Met le texte en gras */
        text-transform: uppercase;    /* Met le texte en majuscules */
        text-decoration: underline;   /* Souligne le texte */
        color: #fff;                  /* Couleur blanche */
        margin: 0;                    /* Supprime les marges par défaut */
}

/* Barre de navigation */
nav { /* Sélectionne la barre de navigation */
        width : 100%;                         /* Largeur totale */
        background-color: rgb(37, 37, 77);    /* Fond bleu foncé */
        padding: 15px 0;                      /* Espace intérieur haut et bas */
        border-radius: 30px;                  /* Coins arrondis */
}

/* Couleur par défaut de texte dans les sections */
section { /* Sélectionne les sections */
        color: black; /* Texte noir */
}

/* Style de base de l’aside */
aside { /* Sélectionne les aside */
        color: white;         /* Texte blanc */
        text-align: center;   /* Centre le texte */
}

/* couleur de texte du footer */
footer { /* Sélectionne le footer */
        color: #fff;          /* Texte blanc */
        font-size: 25px;      /* Taille texte */
}

/* Style du séparateur horizontal */
hr { /* Sélectionne les lignes horizontales */
        margin-left:0%; /* Ligne collée à gauche */
}

/* Titres h2 */
h2 { /* Sélectionne les titres h2 */
        font-weight: bold; /* Texte en gras */
}

/*MY FAVOURITE FILMS AND BOOKS (mise en page)*/ /* Section films et livres */

/* Grille pour la partie films : colonne images (petite) + texte (large) */
.conteneurfilms { /* Conteneur films */
        display: grid; /* Organisation en grille */
        grid-template-columns: 0.5fr 1.5fr; /* 2 colonnes : image + texte */
        grid-template-rows: auto auto;      /* Hauteur automatique */
        gap: 0px;                           /* Aucun espace entre cases */
}

/* Blocs films + livres : même style (bordure, padding, etc.) */
.partiefilms, .partieparagraphefilms, .partielivres, .partieparagraphelivres { /* Blocs */
        border-radius: 10px;        /* Coins arrondis */
        border: 3px solid black;    /* Bordure noire */
        padding: 20px;              /* Espace intérieur */
        display: block;             /* Élément en bloc */
}

/* Blocs de paragraphes (films + livres) */
.partieparagraphefilms, .partieparagraphelivres { /* Paragraphes */
        color: #fff;                                /* Texte blanc */
        text-align: center;                         /* Texte centré */
        font-size: 20px;                            /* Taille du texte */
        font-family: Verdana, Geneva, Tahoma, sans-serif; /* Police */
        margin-top: 10px;                           /* Espace au-dessus */
}

/* Images de films */
.imagefilm1, .imagefilm2 { /* Images films */
        width: 80%;            /* Largeur image */
        margin-left: 50px;     /* Décalage à droite */
        margin-top: 20px;      /* Espace au-dessus */
}

/* Petite marge en bas uniquement pour la 1ère image film */
.imagefilm1 { /* Première image */
        margin-bottom: 30px; /* Espace en bas */
}

/* Grille pour la partie livres : texte (large) + images (petite) */
.conteneurlivres { /* Conteneur livres */
        display:grid; /* Organisation en grille */
        grid-template-columns: 1.5fr 0.5fr; /* Texte + image */
        grid-template-rows: auto auto; /* Hauteur automatique */
        gap: 0px; /* Pas d’espace */
}

/* Images de livres */
.imagelivre1, .imagelivre2 { /* Images livres */
        width: 80%; /* Largeur image */
        margin-right: 30px; /* Espace à droite */
        margin-left: 30px; /* Espace à gauche */
        margin-bottom: 20px; /* Espace en bas */
}

/* Décalage supplémentaire pour la 2ème image livre */
.imagelivre2 { /* Deuxième image livre */
        margin-top: 20px; /* Décalage vertical */
}

/*NAV (liens)*/ /* Liens du menu */

/* Enlève les marges sur les liens (répété en double chez toi, mais ok) */
.accueil, .monécole, .maville, .moncv, .mespréférésoeuvres,.moncentredintérêts { /* Liens */
    margin: 0; /* Supprime les marges */
}

/* Style visuel des liens du menu */
.accueil, .monécole, .maville, .moncv, .mespréférésoeuvres, .moncentredintérêts { /* Liens menu */
        text-decoration: none; /* Pas de soulignement */
        color:white;          /* Texte blanc */
        font-family: cursive; /* Police manuscrite */
        font-weight: bold;    /* Texte en gras */
        font-size: 25px;      /* Taille texte */
}

/*FOND DE TOUTES LES PAGES SAUF ACCUEIL*/ /* Fond général */

/* Fond noir pour toutes les pages sauf accueil */
.monfond { /* Classe fond */
        background: black;         /* Fond noir */
        background-image: none;    /* Pas d’image de fond */
        text-align:left;           /* Texte à gauche */
}

/*PAGE MY CV*/ /* Page CV */

/* Photo du CV */
.photoducv { /* Photo CV */
        width: 70%; /* Largeur photo */
        margin-left: 50px; /* Décalage à droite */
}

/* Grille globale du CV : colonne gauche + colonne droite */
.conteneurcv { /* Conteneur CV */
        display: grid; /* Organisation en grille */
        grid-template-columns: 0.5fr 1.5fr; /* Colonnes gauche + droite */
        grid-template-rows: auto auto; /* Hauteur automatique */
        grid-gap: 0px; /* Pas d’espace */
}

/* Styles communs des 2 colonnes */
.partiegauche, .partiedroite { /* Colonnes */
    border-radius: 10px; /* Coins arrondis */
    border: 3px solid black; /* Bordure noire */
    padding: 20px; /* Espace intérieur */
    display: block; /* Élément en bloc */
}

/* Colonne droite : fond blanc */
.partiedroite { /* Colonne droite */
        background-color: #fff; /* Fond blanc */
}

/* Colonne gauche : fond gris */
.partiegauche { /* Colonne gauche */
        background-color: grey; /* Fond gris */
}

/* Taille du texte pour la liste contact */
.contact { /* Texte contact */
        font-size: 18px; /* Taille texte */
}

/* Quand on survole le lien d’adresse : on garde sans soulignement */
a.adresse:hover { /* Survol lien adresse */
        text-decoration: none; /* Pas de soulignement */
}

/* Centrage + points à l’intérieur du bloc (Formation/Expériences) */
.formationcv, .experiencepro { /* Listes */
        text-align: center; /* Texte centré */
        list-style-position: inside; /* Petits points à l’intérieur du bloc */
        font-size: 20px; /* Taille texte */
}

/*PAGE ACCUEIL (home)*/ /* Page accueil */

/* Conteneur du menu en flex : espace égal entre les liens */
.conteneuraccueil { /* Conteneur menu accueil */
    display: flex; /* Organisation horizontale */
    justify-content: space-around; /* Espacement égal entre liens */
    width: 100%; /* Largeur totale */
}

/* Fond de la page d’accueil */
.fondaccueil { /* Fond accueil */
      color: white; /* Texte blanc */
      background-image: url("images/fondaccueil.jpg"); /* Image de fond */
      background-size: cover; /* Image couvre tout */
      background-repeat: no-repeat; /* Pas de répétition */
      background-position: center; /* Image centrée */
      background-position-y: 80%; /* Ajustement vertical */
      background-position-x: 90%; /* Ajustement horizontal */
      background-attachment: fixed; /* Fond fixe lors du scroll */
}

/* Texte du paragraphe sur la page d’accueil */
.fondaccueil p { /* Texte accueil */
      padding-top: 200px; /* Descend le texte */
      color: #fff; /* Texte blanc */
      text-align: center; /* Texte centré */
      font-size: 40px; /* Taille texte */
      font-family: Arial, Helvetica, sans-serif; /* Police simple */
      text-decoration: underline; /* Souligné */
}

/*PAGE MY INTERESTS*/ /* Page intérêts */

/* Grille des 3 “boîtes” (muscu / openworld / art) */
.conteneurintérêts { /* Conteneur boîtes */
        display : grid; /* Organisation en grille */
        grid-template-columns: 2fr 2fr 2fr; /* 3 colonnes égales */
        grid-template-rows: 200px; /* Hauteur fixe */
        grid-gap: 15px; /* Espaces entre boîtes */
}

/* Conteneur pour accolade + vidéo */
.conteneuraccolade { /* Conteneur accolade */
        display : grid; /* Organisation en grille */
        grid-template-columns: 1fr; /* Une colonne */
        grid-template-rows: auto auto; /* Deux lignes automatiques */
        grid-gap: 0px; /* Pas d’espace */
}

/* Style commun des boîtes cliquables */
.boîtemuscu, .boîtearttraditionnel, .boîtemondesouverts { /* Boîtes */
  color: white; /* Texte blanc */
  height: 200px; /* Hauteur boîte */
  width: 100%; /* Largeur boîte */
  background-color: black; /* Fond noir */
  border-radius: 30px; /* Coins arrondis */
  border: 3px solid black; /* Bordure */
  font-weight: bold; /* Texte en gras */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Police */
  font-size: 30px; /* Taille texte */
  display: flex; /* Organisation flexible */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  background-size: cover; /* Image couvre la boîte */
  background-position: center; /* Image centrée */
  background-repeat: no-repeat; /* Image pas répétée */
}

/* Boîte musculation : image + réglage fin du cadrage */
.boîtemuscu { /* Boîte muscu */
       background-position-y: 10%; /* Ajustement vertical */
       background-image: url("images/musc.jpg"); /* Image fond */
}

/* Boîte art traditionnel */
.boîtearttraditionnel { /* Boîte art */
        background-position-y:45%; /* Ajustement vertical */
        background-image: url("images/narutosasuke.jpg"); /* Image fond */
}

/* Boîte openworld */
.boîtemondesouverts { /* Boîte openworld */
        background-position-y: 80%; /* Ajustement vertical */
        background-image: url("images/acodyssey.jpg"); /* Image fond */
}

/* Titres sous les boîtes */
.titreboîtearttraditionnel, .titreboîtemuscu, .titreboîtemondesouverts { /* Titres boîtes */
        text-align: center; /* Texte centré */
        color: white; /* Texte blanc */
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Police */
        font-size: 30px; /* Taille texte */
}

/* Image “accolade” (bannière) */
.accolade { /* Image accolade */
        height: 200px; /* Hauteur image */
        width: 100%; /* Largeur image */
        background-position: center; /* Image centrée */
        background-repeat: no-repeat; /* Pas répétition */
        background-image: url("images/accolade.jpg"); /* Image fond */
        border: 1px black; /* Bordure */
}

/* Vidéo : taille + centrage approximatif via marge gauche */
.vidéointérêts { /* Vidéo intérêts */
        width: 400px; /* Largeur vidéo */
        height: 300px; /* Hauteur vidéo */
        margin-left: 38%; /* Décalage horizontal */
}

/*PAGE MY TOWN*/ /* Page ville */

/* Conteneur en “relative” pour placer les images en absolu */
.villeguyancourt { /* Conteneur ville */
        position: relative; /* Sert de repère pour positionner les images */
        height: 100vh; /* Hauteur écran */
}

/* Bloc audio centré au milieu de la page */
.conteneuraudio { /* Audio bloc */
        position: absolute; /* Place le bloc par rapport au conteneur */
        top: 50%; /* Milieu vertical */
        left: 50%; /* Milieu horizontal */
        transform: translate(-50%, -50%); /* Centre parfaitement le bloc */
        font-size: 30px; /* Taille texte */
        text-align: center; /* Texte centré */
        color: white; /* Texte blanc */
        text-decoration: underline; /* Souligné */
}

/* Titres h3 dans la page “My Town” */
.villeguyancourt h3 { /* Titres ville */
        color: #fff; /* Texte blanc */
        text-align: center; /* Texte centré */
        font-size: 26px; /* Taille texte */
}

/* Classe de base des blocs images : positionnement absolu */
.image { /* Blocs images */
        position: absolute; /* Positionné par rapport au conteneur */
        width: 500px; /* Largeur image */
        height: auto; /* Hauteur auto */
}

/* Images à l’intérieur du bloc image */
.image img { /* Images internes */
        width: 90%; /* Largeur image */
}

/* Placement des 4 coins */
.hautgauche { top:0; left:0; } /* Coin haut gauche */
.hautdroit  { top:0; right:0; width: 31%; } /* Coin haut droit */
.basgauche  { bottom: 0; left: 0; } /* Coin bas gauche */
.basdroit   { bottom: 0; right: 0; } /* Coin bas droit */

/* PAGE MY SCHOOL (vidéo)*/ /* Page école */

/* Bloc vidéo positionné en absolu */
.vidéoécole { /* Vidéo école */
        top: 50%; /* Milieu vertical */
        left: 40%; /* Milieu horizontal */
        position: absolute; /* Placé par rapport au conteneur parent */
}

/* Titre de la section vidéo */
.vidéoécole h2 { /* Titre vidéo */
        color: black; /* Texte noir */
        font-size: 20px; /* Taille texte */
        text-decoration: underline; /* Souligné */
        text-align: center; /* Centré */
}