body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: white;
    color: black;
    text-align: center;
}

h1 {
    font-size: 50px;
    color: rgb(255, 0, 225);
    font-family: 'Cooper Black', sans-serif;
    margin-bottom: 10px;   /* espace sous chaque paragraphe */
    margin-top: 10px;   /* espace sur chaque paragraphe */
}


h2 {
    font-size: 40px;
    color: rgb(0, 0, 0);
    font-family: 'Courier New Bold', sans-serif;
    margin-top: 30px;   /* espace sur chaque paragraphe */
    margin-bottom: 30px;   /* espace sous chaque paragraphe */

}


h3 {
    font-size: 80px;
    color: rgb(0, 0, 0);
    margin-bottom: 10px;   /* espace sous chaque paragraphe */
    margin-top: 10px;   /* espace sur chaque paragraphe */
}

p {
    font-size: 28px;
    color: rgb(0, 0, 0);
    font-family: 'Courier New Bold', sans-serif;
    margin-top: 10px;   /* espace sur chaque paragraphe */
    margin-bottom: 30px;   /* espace sous chaque paragraphe */
}

p1 {
    font-size: 14px;
    color: rgb(255, 255, 255);
    margin-top: 5px;   /* espace sur chaque paragraphe */
    font-family: 'Courier New Bold', sans-serif;
}


img {
    width: 600px;
    margin-bottom: 0px;   /* espace sous chaque paragraphe */
    margin-top: 0px;   /* espace sous chaque paragraphe */
}


/* Barre de navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: black;
    font-family: 'Courier New Bold', sans-serif;
}

/* Logo */
.logo img {
    width: 120px;
}

/* Liens navigation */
nav a {
    color: white;
    text-decoration: none;
    margin-left: 25px;
    font-size: 16px;
}

/* Effet au survol */
nav a:hover {
    opacity: 0.6;
}

/* Section principale */
.hero {
    padding: 0px 0px; /* espace en haut */
    display: block;      /* plus besoin de flex */
    
}

html {
    scroll-behavior: smooth;
}

    .typing {
        display: inline-block;      /* important pour que le texte commence à gauche */
        overflow: hidden;
        white-space: nowrap;
        border-right: 3px solid rgb(0, 0, 0);
        animation: typing 3s steps(43, end) forwards, blink 0.7s step-end infinite;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 43ch; } /* nombre de caractères à afficher */
    }

    @keyframes blink {
        50% { border-color: transparent; }
    }

/* Cooper Black  */
@font-face {
    font-family: 'Cooper Black';
    src: url('Fonts/Cooper Black Regular.ttffonts/CooperBlack.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Courrier */
@font-face {
    font-family: 'Courier New Bold Italic';
    src: url('Fonts/Courier New Bold Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Courier New Bold';
    src: url('Fonts/Courier New Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Courier New';
    src: url('Fonts/Courier New.ttf') format('truetype');
    font-weight: bold;
}

hr {
    border: none;           /* supprime le style par défaut */
    height: 10px;            /* épaisseur */
    background-color: rgb(0, 0, 0); /* couleur de la ligne */
}



footer {
    background-color: #000000;  /* ou blanc si ton fond est blanc */
    color: white;            /* texte visible */
    text-align: center;
    padding: 30px 20px;
}

footer a {
    color: rgb(255, 0, 255);          /* couleur des liens réseaux */
    margin: 0 15px;          /* espacement entre les liens */
    text-decoration: none;
    font-size: 36px;

}

footer a:hover {
    opacity: 0.7;            /* effet au survol */
}

.texte-image {
    display: flex;          /* texte + image sur la même ligne */
    align-items: flex-start;/* aligne le haut du texte et de l’image */
    gap: 30px;              /* espace entre texte et image */
    padding: 50px 40px;
}

.texte {
    flex: 1;                /* prend tout l’espace disponible sauf celui de l’image */
    max-width: 1000px;       /* limite la largeur du texte */
    text-align: justify;     /* justifie le texte si tu veux */
}

.image img {
    width: 600px;           /* taille de l’image */
    height: auto;           /* garde les proportions */
    border-radius: 0px;    /* coins arrondis si tu veux */
}

.liste-2colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 8px 100px; /* espace vertical / horizontal */
    list-style: disc; /* puces classiques */
    padding-left: 400px; /* espace pour les puces */
    padding-right: 300px; /* espace pour les puces */
    font-size: 30px;   /* augmente ici si besoin */
    font-family: 'Cooper Black', sans-serif;
    margin-bottom: 30px;   /* espace sous chaque paragraphe */
    margin-top: 0px;   /* espace sur chaque paragraphe */
    text-align: left;  
    color: rgb(255, 0, 255);
}

.container {
    max-width: 800px;   /* ← diminue cette valeur */
    margin: 0 auto;     /* centre le bloc */
    padding: 0 20px;    /* respiration sur les côtés */
}

mark {
  background-color: rgb(255, 0, 255);
  color: white;
  padding: 2px 4px;
}


/* Grille 2x2 */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes */
  gap: 15px;
  max-width: 900px;  /* limite la largeur */
  margin: auto;
}

.portfolio-grid img {
  width: 100%;
  display: block;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.portfolio-grid img:hover {
  transform: scale(1.05);
}

/* Lightbox CSS-only */
.lightbox {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 100;
}

.lightbox:target {
  display: flex;
  flex-direction: column;
}

.lightbox img {
  max-width: 90%;
  max-height: 60%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.lightbox .description {
  color: white;
  max-width: 80%;
  margin: auto;
}

.lightbox .description h3 {
  margin-bottom: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  text-decoration: none;
}