/* style.css */

/* Général */
body {
    font-family: sans-serif; /* Choisissez votre police */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Couleur de fond générale */
    color: #333; /* Couleur du texte par défaut */
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    background-color: #222; /* Couleur de fond du header par défaut */
    color: #fff;
    padding: 20px 0;
}

/* Nouveau style pour le header blanc */
.white-header {
    background-color: #fff; /* Fond blanc */
    color: #000; /* Écriture noire */
}

.white-header nav a {
    color: #000; /* Liens de navigation en noir */
}

.white-header nav a:hover {
    text-decoration: underline; /* L'effet de survol reste le même */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav a {
    color: #fff; /* Couleur par défaut des liens (sera surchargée par .white-header) */
    text-decoration: none;
}

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

/* Accueil */
.hero {
    background-color: #000; /* Fond noir profond */
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    padding-bottom: 5px; /* Ajouter un peu d'espace entre le texte et la bordure */
    border-bottom: 3px solid #ff9800; /* Ligne orange de 3 pixels d'épaisseur */
    display: inline-block; /* Pour que la bordure ne prenne que la largeur du texte */
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
    padding-bottom: 3px; /* Ajouter un peu d'espace */
    border-bottom: 2px solid #ff9800; /* Ligne orange de 2 pixels d'épaisseur */
    display: inline-block; /* Adapte la largeur à celle du texte */
}


/* Portfolio (sur la page d'accueil) */
.portfolio-home {
    padding: 80px 0 40px 0; /* Augmenter le padding en haut pour créer plus d'espace au-dessus du titre */
    text-align: center;
}

.portfolio-home h2 {
    font-size: 3.5em; /* Augmenter la taille de la police */
    text-align: center;
    margin-bottom: 60px; /* Augmenter la marge en bas pour créer plus d'espace entre le titre et les images */
    font-family: 'Permanent Marker', cursive; /* Applique la police originale */
    color: #ff9800; /* Optionnel : Couleur orange pour le titre */
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.project-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.project-item img {
    width: 100%;
    display: block;
    height: auto;
}

.project-info {
    padding: 15px;
    text-align: left;
}

.project-info h3 {
    margin-top: 0;
    margin-bottom: 5px;
}

.project-info p {
    font-size: 0.9em;
    color: #777;
}

.button {
    display: inline-block;
    background-color: #ff9800; /* Couleur orange */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.button:hover {
    background-color: #e68a00;
}

/* À propos (sur la page d'accueil) */
.about-home {
    background-color: #000; /* Fond noir */
    color: #fff;
    padding: 60px 0;
}

.about-container {
    display: flex;
    justify-content: space-between; /* Espacer le texte et l'image */
    align-items: center; /* Les aligner verticalement au centre */
}

.about-text {
    max-width: 50%; /* Prend la moitié de la largeur pour le texte */
    padding-right: 30px; /* Ajoute un peu d'espace entre le texte et l'image */
    text-align: left; /* Aligner le texte à gauche */
}

.about-text h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.about-image {
    max-width: 40%; /* Prend un peu moins de la moitié pour l'image */
}

.about-image img {
    width: 100%; /* L'image prend toute la largeur de son conteneur */
    height: auto;
    border-radius: 8px; /* Optionnel : pour des bords arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optionnel : pour une légère ombre */
}

.about-home .button {
    background-color: #fff;
    color: #000;
}

.about-home .button:hover {
    background-color: #eee;
}

/* Footer */
footer {
    background-color: #ff9800;
    color: #000000;
    padding: 20px 0;
    font-size: 0.8em;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icons a {
    margin-left: 10px;
    font-size: 1.5em;
    color: #ff9800;
    text-decoration: none;
}

.social-icons a:hover {
    opacity: 0.8; /* Légère indication de survol */
}

/* Portfolio Page */
.portfolio-page .portfolio-grid {
    margin-top: 20px;
}

/* Projet Page */
.project-details {
    padding: 40px 0;
}

.project-details h2 {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: center;
}

.project-details img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-details p {
    line-height: 1.8;
    margin-bottom: 15px;
}

/* À propos Page */
.about-page {
    padding: 40px 0;
}

.about-page .about-content {
    text-align: left;
}

.about-page .profile-image {
    max-width: 300px;
    border-radius: 50%;
    float: right;
    margin-left: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contact Page */
.contact-page {
    padding: 40px 0;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-button {
    background-color: #ff9800;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.submit-button:hover {
    background-color: #e68a00;
}

/* Styles pour les icônes de réseaux sociaux dans le header */
.white-header nav ul li.social-icons-header {
    display: flex; /* Pour aligner les icônes horizontalement */
    align-items: center; /* Pour les aligner verticalement au centre */
    margin-left: 20px; /* Ajouter un espace à gauche des icônes */
}

.white-header nav ul li.social-icons-header a {
    margin-left: 10px; /* Espacement entre les icônes */
}

.white-header nav ul li.social-icons-header a img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Styles pour la page audiovisuel.php */
.audiovisuel-page {
    padding: 40px 0;
    text-align: center;
}

.audiovisuel-page h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.category-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none; /* Enlever le soulignement des liens */
}

.category-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out; /* Pour un effet de zoom au survol */
}

.category-item h3 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.category-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond noir semi-transparent */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 1.2em;
    z-index: 1;
}

.category-item:hover img {
    transform: scale(1.1); /* Léger zoom au survol */
}

.category-item:hover .overlay {
    opacity: 1;
}

/* Styles pour la page graphisme.php */
.graphisme-page {
    padding: 40px 0;
    text-align: center;
}

.graphisme-page h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

/* Styles pour la page developpement.php */
.developpement-page {
    padding: 40px 0;
    text-align: center;
}

.developpement-page h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.category-single {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    position: relative;
}

.category-single a {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.category-single img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.category-single h3 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.8em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.category-single .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 1.4em;
    z-index: 1;
}

.category-single:hover img {
    transform: scale(1.05);
}

.category-single:hover .overlay {
    opacity: 1;
}
/* Style spécifique pour la page photographie */
.photo-gallery {
    padding: 40px 0;
    background-color: #ff9800; /* Fond orange */
    color: #fff;
    text-align: center;
}

.photo-gallery h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.image-item {
    background-color: rgba(255, 255, 255, 0.1); /* Léger fond pour les images */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.image-item:hover img {
    transform: scale(1.05);
}
/* Style spécifique pour la page vidéo */
.video-page {
    background-color: #000000; /* Fond orange */
}

.video-section {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column; /* Pour afficher les éléments vidéo les uns en dessous des autres */
    align-items: center; /* Centrer les éléments horizontalement */
}

.video-section h2 {
    font-size: 2em;
    text-align: center;
    color: #fff; /* Texte blanc sur fond orange */
    margin-bottom: 40px;
}

.video-item {
    background-color: rgba(255, 255, 255, 0.8); /* Fond légèrement transparent pour l'encadrement */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px; /* Espacement entre les vidéos */
    padding: 20px;
    width: 800px; /* Largeur de l'encadrement */
    max-width: 95%; /* Pour s'adapter aux écrans plus petits */
}

.video-player {
    width: 100%; /* Le lecteur vidéo prend toute la largeur de son conteneur */
    margin-bottom: 20px;
}

.video-synopsis {
    padding: 15px;
    text-align: left;
}

.video-synopsis h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.video-synopsis p {
    line-height: 1.6;
    color: #555;
}

/* Style spécifique pour la page compisition */
.composition-page {
    background-image: url('assets/images/votre_image_de_fond.jpg'); /* Remplacez par le chemin réel de votre image de fond */
    background-size: cover; /* Pour que l'image couvre tout l'arrière-plan */
    background-repeat: no-repeat; /* Pour éviter la répétition de l'image */
    background-attachment: fixed; /* Optionnel : pour un effet de fond fixe au défilement */
}

..composition-page .portfolio-grid {
    padding-top: 40px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes par ligne */
    gap: 20px;
}

.composition-page .portfolio-grid h2 {
    font-size: 2em;
    text-align: center;
    color: #fff; /* Couleur du texte du titre (ajustez selon la visibilité sur votre fond) */
    margin-bottom: 30px;
    grid-column: 1 / -1; /* Pour que le titre prenne toute la largeur */
    background-color: rgba(0, 0, 0, 0.5); /* Optionnel : un fond semi-transparent pour le titre */
    padding: 10px; /* Optionnel : espacement autour du titre */
    border-radius: 5px; /* Optionnel : bords arrondis pour le fond du titre */
}

.composition-page .project-item {
    background-color: rgba(255, 255, 255, 0.8); /* Fond légèrement transparent pour les encadrements des affiches */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

..composition-page .project-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ... autres styles ... */