/* Réinitialisation de certains styles de base */

body, ul {

    margin: 0;

    padding: 0;

}

html {

    scroll-behavior: smooth;

}



body {

    font-family: Arial, sans-serif;

    background-color:#000;

}



h1 {

    font-family: "Arapey", serif;

}



/* Styles du header */

.header {

    display: grid;

    grid-template-columns: auto 1fr auto auto;

    align-items: center;

    padding: 0.5em 1em;

    background-color:transparent;

    color: #fff;

    position: relative;

    margin-bottom: 2rem;

}



/* Logo */

.logo {

    font-size: 1.5em;

    font-weight: bold;

    margin-left: 1em;

}



.logo img{

    width:25%;

}



/* Barre de navigation */

.navbar {

    display: flex;

    justify-content: center;

    width: 100%;

}



.nav-links {

    list-style-type: none;

    display: flex;

    gap: 1em;

    margin: 0;

}



.nav-links li {

    position: relative;

}



.nav-links a {

    color: #fff;

    text-decoration: none;

    padding: 0.5em 1em;

    position: relative;

    display: inline-block;

    transition: color 0.3s;

    width: auto; /* Ajuste la largeur des liens pour qu'ils ne prennent pas toute la largeur */

  font-size: 1rem;

    color: #fff;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    text-transform: uppercase;

    position: relative;

    padding-bottom: 5px;

}



.nav-links a::before, .nav-links a::after {

    content: '';

    position: absolute;

    bottom: 0;

    height: 2px;

    background: yellow;

    transition: width 0.3s ease;

}



.nav-links a::before {

    left: 0;

    width: 0;

}



.nav-links a::after {

    right: 0;

    width: 0;

}



.nav-links a:hover::before, .nav-links a:hover::after {

    width: 50%; /* Ajuste la largeur au survol */

}



.nav-links a:hover::before {

    transition: left 0.3s ease;

    left: 0;

}



.nav-links a:hover::after {

    transition: right 0.3s ease;

    right: 0;

}





/* Bouton nav-toggle (hamburger) */

.nav-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 2em;

    color: white;

    cursor: pointer;

}



/* Menu Overlay */

.nav-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    z-index: 10;

    opacity: 0;

    transition: opacity 0.3s ease;

}



/* Menu Slide */

.nav-slide {

    display: none;

    position: fixed;

    top: 0;

    right: 0;

    width: 250px;

    height: 100%;

    background: #333;

    color: #fff;

    padding: 1em;

    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);

    transform: translateX(100%);

    transition: transform 0.3s ease;

    z-index: 11;

}



.nav-slide.active {

    display: block;

    transform: translateX(0);

}



.nav-slide .nav-links {

    display: flex;

    flex-direction: column;

    margin: 0;

}



.nav-slide li {

    margin: 1em 0;

}



.nav-slide a {

    color: #fff;

    text-decoration: none;

    padding: 0.5em;

    display: block;

    transition: background-color 0.3s;

}



/* Bouton nav-close (close) */

.nav-close {

    display: block;

    position: absolute;

    top: 1em;

    right: 1em;

    font-size: 2em;

    color: white;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 12;

}



/* Styles responsive pour les écrans de taille moyenne */

@media (max-width: 64em) {

    .header {

        grid-template-columns: auto 1fr auto;

        grid-template-areas:

            "logo phone toggle"

            "nav nav nav";

    }



    .logo {

        grid-area: logo;

    }



    .phone-number {

        grid-area: phone;

        display: none; /* Masquer le numéro de téléphone sur les petits écrans */

    }



    .nav-toggle {

        display: block;

        grid-area: toggle;

    }



    .navbar {

        display: none; /* Caché pour les petits écrans */

    }



    .nav-slide {

        display: none; /* Caché par défaut */

    }



    .nav-overlay {

        display: none; /* Caché par défaut */

    }



    .nav-slide.active,

    .nav-overlay.active {

        display: block; /* Affiché lorsque le menu slide est actif */

    }

}



/* Styles responsive pour les petits écrans */

@media (max-width: 48em) {

    .header {

        grid-template-columns: 1fr auto;

        grid-template-areas:

            "logo toggle"

            "nav nav";

        text-align: center;

    }



    .logo {

        text-align: left;

    }



    .phone-number {

        display: none; /* Masquer le numéro de téléphone sur les petits écrans */

    }



    .nav-slide {

        width: 100%; /* Menu slide occupe toute la largeur sur petits écrans */

    }



    .nav-links a {

        width: auto; /* Les liens ne doivent pas être à 100% sur les petits écrans */

        display: inline-block; /* Assure que les éléments ne prennent pas toute la largeur */

    }

  

  .nav-slide .nav-links {

    display: flex;

    flex-direction: column;

    margin: 0;

    margin-top: 60px;

}

}



/* Styles de base (déjà existants) */



/* Section Hero */

.hero {

    display: grid;

    place-items: flex-start;

    align-items: center;

    height: 130vh; /* Prend toute la hauteur de l'écran */

    background-image: url('https://cdn.animaapp.com/projects/66a0890038c7ec61db6d52da/releases/66c1b2d56410940ed9c1ca7b/img/hero-banner-1.png'); /* Image de fond par défaut */

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    color: white;

    margin-top:-115px;

    position: relative;

    padding: 0 1em;

   z-index: -1;

}



.hero::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5); /* Superposition sombre pour le texte lisible */

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    margin-left: 1em;

    margin-top:10rem;

}



.hero h1 {

    font-size: 3em;

    margin: 0.5em 0;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



.hero p {

    font-size: 1.5em;

    margin: 0.5em 0;

}



.span1-crTimB {

    color: #c8a678;

    font-size: 60px;

    font-family: "Arapey", serif;

}



.span0-crTimB {

    color: #fff;

    font-size: 60px;

    font-family: "Arapey", serif;

}



.btn-primary {

    display: inline-block;

    padding: 15px 40px;

    background-color: #c8a678;

    color: #202125;

    font-family: "Montserrat", sans-serif;

    font-size: 18px;

    font-weight: 600;

    border: 2px solid #c8a678;

    border-radius: 5px;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-top: 3rem;

    width: 25%;

}



.btn-primary:hover {

    background-color: #fff;

    color: #000;

}



/* Styles responsive pour la section hero */

@media (max-width: 64em) {

    .hero h1 {

        font-size: 2.5em;

    }



    .hero p {

        font-size: 1.3em;

    }



    .btn-primary {

        padding: 0.4em 1.2em;

        font-size: 1em;

    }

}



@media (max-width: 48em) {

    .hero {

        height: 130vh; /* Augmente la hauteur sur les petits écrans */

    }



    .hero h1 {

        font-size: 1.5em; /* Réduit la taille de la police des h1 sur petits écrans */

    }



    .hero p {

        font-size: 1em; /* Réduit la taille de la police des paragraphes sur petits écrans */

    }



    .btn-primary {

        padding: 0.3em 1em;

        font-size: 0.9em; /* Réduit la taille de la police du bouton sur petits écrans */

        width: 50%; /* Ajuste la largeur du bouton sur petits écrans */

    }

}







/* Section Services */

.services {

    padding: 2em 1em;

    background-color: #202125; /* Fond noir pour toute la section */

    text-align: center;

}



.service-intro {

    margin-bottom: 2em;

}



.service-main-img {

    max-width: 100%;

    height: auto;

    margin-bottom: 1em;

}



.service-title {

           font-size: 64px;

        font-family: "Arapey", serif;

        line-height: 56px;

        margin: 20px 0;

       color:#fff;

}



.service-subtitle {

    font-size: 1.2em;

    margin: 0.5em 0;

    color: #bbb; /* Texte gris clair pour le sous-titre */

}



.service-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 colonnes pour les grands écrans */

    gap: 1em;

}



.service-item {

    padding: 1em;

    transition: transform 0.3s ease;

    color: #fff; /* Texte blanc pour les items */

    display: flex;

    flex-direction: column;

    align-items: center;

}

.service-intro img {

  width:100px;

  height:100px;

}

.service-item img {

    width: 150px; /* Réduit la taille des images */

    height: 150px;

    border: 1px solid #c8a678; /* Bordure jaune autour des images */

    padding: 20px;

    box-sizing: border-box; /* Inclut padding et border dans la taille totale de l'image */

    border-radius: 8px; /* Angle légèrement arrondi pour le carré */

    margin-bottom: 1em;

}



.service-item p {

    font-size: 1em;

    color: #fff; /* Texte blanc pour les descriptions */

}



.service-item:hover {

    transform: translateY(-5px);

}



/* Responsive Styles */

@media (max-width: 64em) {

    .service-title {

        font-size: 1.8em;

    }



    .service-subtitle {

        font-size: 1.1em;

    }



    .service-grid {

        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les écrans moyens */

        gap: 0.8em;

    }



    .service-item {

        padding: 0.8em;

    }



    .service-item p {

        font-size: 0.9em;

    }

}



@media (max-width: 48em) {

    .service-title {

        font-size: 1.6em;

    }



    .service-subtitle {

        font-size: 1em;

    }

  

      .team-title {

        font-size: 1.6em;

    }

     .team-subtitle {

        font-size: 1em;

    }



    .service-grid {

        grid-template-columns: 1fr; /* 1 colonne pour les petits écrans */

        gap: 1em;

    }



    .service-item {

        padding: 1em;

    }



    .service-item p {

        font-size: 1em;

    }

}





/* Section Team */

.team {

    padding: 2em 1em;

    background-color: #202125;

    text-align: center;

    color: #fff;

}



.team-intro {

    margin-bottom: 2em;

}





.team-title {

    font-size: 64px;

        font-family: "Arapey", serif;

        line-height: 56px;

        margin: 20px 0;

       color:#fff;

}



.team-subtitle {

    font-size: 1.2em;

    color: #bbb;

}



/* Slider Container */

.team-slider {

    display: flex;

    overflow-x: auto;

    scroll-behavior: smooth;

    gap: 1em;

    padding: 1em 0;

  justify-content:center;

    -webkit-overflow-scrolling: touch;

}



.team-slider::-webkit-scrollbar {

    display: none; /* Masquer la barre de défilement */

}



/* Team Item */

.team-item {

    background-color: #333;

    border: 2px solid #fff;

    padding: 1em;

    color: #fff;

    width:220px;

    flex-shrink: 0;

    text-align: center;

    border-radius: 8px;

}

.team-intro img{

  width:100px;

  height:100px;

}

.team-item img {

    width: 100%;

    height: auto;

    margin-bottom: 1em;

   

}





.availability-section {

    display: grid;

    grid-template-areas: 

        "header header header"

        "title title title"

        "timing scissors form"

        "closing scissors form";

    grid-template-columns: 1fr auto 1fr;

    gap: 2em; /* Utilisation d'unités em pour le gap */

    padding: 2em; /* Utilisation d'unités em pour le padding */

    max-width: 1200px;

    margin: 0 auto;

    align-items: center;

}



.header-b {

    grid-area: header;

    text-align: center;

   display:flex;

  justify-content:center;

  color:#fff;

}



.header-b img {

    width: 6em; /* Utilisation d'unités em pour la largeur de l'image */

    height: 6em; /* Utilisation d'unités em pour la hauteur de l'image */

 

}



.title {

    grid-area: title;

    text-align: center;

}

.title h1,p {

  color:#fff;

}

.title h1{

    font-size: 64px;

        font-family: "Arapey", serif;

        line-height: 56px;

        margin: 20px 0;

       color:#fff;

}

.timing {

    grid-area: timing;

    text-align: left;

    color:#fff;

}



.closing {

    grid-area: closing;

    text-align: left;

    margin-top: -10em; /* Ajuste la marge en fonction de l'unité em */

  color:#ffff;

}



.scissors {

    grid-area: scissors;

    display: flex;

    justify-content: center;

    align-items: center;

}



.scissors img {

    max-width: 100%;

    height: auto;

}



.form {

    grid-area: form;

    display: flex;

    flex-direction: column;

    gap: 1em; /* Utilisation d'unités em pour le gap */

}



.form input, .form textarea {

    padding: 1em; /* Utilisation d'unités em pour le padding */

    border: 1px solid #ccc;

    border-radius: 0.5em; /* Utilisation d'unités em pour les coins arrondis */

    font-size: 1rem;

    color: #333;

}



.form button {

    padding: 1em; /* Utilisation d'unités em pour le padding */

    background-color: #c8a678;

    border: none;

    border-radius: 0.5em; /* Utilisation d'unités em pour les coins arrondis */

    color: #333;

    font-size: 1rem;

    cursor: pointer;

}



.form button:hover {

    background-color: #fff;

    color: #000;

}



/* Media Queries pour les écrans moyens */

@media (max-width: 64em) {

    .availability-section {

        grid-template-areas: 

            "header header header"

            "title title title"

            "timing timing timing"

            "closing closing closing"

            "scissors scissors scissors"

            "form form form";

        grid-template-columns: 1fr;

        padding: 1.5em; /* Réduit le padding pour les écrans moyens */

        gap: 1.5em; /* Réduit le gap pour les écrans moyens */

    }



    .header-b img {

        width: 5em; /* Réduit la taille de l'image pour les écrans moyens */

        height: 5em;

    }



    .closing {

        margin-top: 0; /* Réinitialise la marge pour les écrans moyens */

    }

}



/* Media Queries pour les petits écrans */

@media (max-width: 48em) {

    .availability-section {

        grid-template-areas: 

            "header"

            "title"

            "timing"

            "closing"

            "scissors"

            "form";

        grid-template-columns: 1fr;

        padding: 1em; /* Réduit encore le padding pour les petits écrans */

        gap: 1em; /* Réduit le gap pour les petits écrans */

    }



    .header-b img {

        width: 4em; /* Réduit la taille de l'image pour les petits écrans */

        height: 4em;

    }



    .closing {

        margin-top: 0; /* Réinitialise la marge pour les petits écrans */

    }

}





.happy-customers {

    padding: 2em 1em;

    background-color: #202125; /* Couleur de fond cohérente avec le reste du site */

    color: #fff;

    text-align: center;

    background-image: url('https://cdn.animaapp.com/projects/66a0890038c7ec61db6d52da/releases/66c1b2d56410940ed9c1ca7b/img/happy-client-bg.png');

    background-size: cover; /* Ajuste la taille de l'image pour couvrir toute la section */

    background-position: center; /* Centre l'image dans la section */

    background-repeat: no-repeat; /* Évite la répétition de l'image */

}





.happy-customers-intro {

    margin-bottom: 2em;

}



.happy-customers-title {

    font-size: 64px;

    font-family: "Arapey", serif;

    color: #fff;

    margin-bottom: 20px;

}



.happy-customers-subtitle {

    font-size: 1.2em;

    color: #bbb;

}



.testimonials-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour les grands écrans */

    gap: 2em;

}



.testimonial-item {

    background-color:#33333354;

    padding: 2em;

    border-radius: 8px;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    display: flex;

    flex-direction: column;

    align-items: center;



}



.testimonial-avatar {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    margin-bottom: 1em;

    border: 2px solid #c8a678; /* Bordure jaune pour harmoniser avec le thème */

}



.testimonial-name {

    font-weight: bold;

    color: #fff;

    margin-bottom: 0.5em;

}

.testimonial-content {

    display: flex;

    flex-direction: column;

    gap: 0.5rem; /* Espacement entre les éléments de contenu */

}



.testimonial-text {

    font-style: italic;

    color: #bbb; /* Texte gris clair */

}

.testimonial-rating {

    display: flex;

    gap: 0.2rem; /* Espacement entre les étoiles */

    margin-top: 0.5rem; /* Espacement entre le texte et les étoiles */

}



.testimonial-rating i {

    color: gold; /* Couleur des étoiles */

    font-size: 1.2rem; /* Taille des étoiles */

}



/* Responsive Styles */

@media (max-width: 64em) {

    .testimonials-grid {

        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les écrans moyens */

    }

}



@media (max-width: 48em) {

    .happy-customers-title {

        font-size: 1.6em; /* Réduit la taille du titre sur petits écrans */

    }



    .testimonials-grid {

        grid-template-columns: 1fr; /* 1 colonne pour les petits écrans */

    }



    .testimonial-item {

        padding: 1.5em;

    }



    .testimonial-avatar {

        width: 80px;

        height: 80px;

    }

}



.hero {

    position: relative;

    height: 100vh;

    overflow: hidden;

    background: #111;

}

.hero-photos {

    position: absolute;

    inset: 0;



    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    grid-auto-rows: 120px;



    gap: 6px;

    padding: 20px;



    z-index: 1;

}



.hero-photos img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(30%) contrast(1.05);

}

.scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;



    width: 24px;

    height: 40px;

    border: 2px solid rgba(255,255,255,0.6);

    border-radius: 20px;



    display: flex;

    justify-content: center;

    align-items: flex-start;



    cursor: pointer;

}



.scroll-indicator span {

    width: 6px;

    height: 6px;

    background: #fff;

    border-radius: 50%;

    margin-top: 6px;



    animation: scrollDot 1.5s infinite;

}



@keyframes scrollDot {

    0% {

        opacity: 0;

        transform: translateY(0);

    }

    30% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform: translateY(16px);

    }

}

.photo-panel {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.95);

    z-index: 99999;



    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

}



.photo-panel.is-open {

    opacity: 1;

    pointer-events: auto;

}



.photo-panel-inner {

    width: 90%;

    height: 80%;

    margin: auto;

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;



    transform: translateY(-30px);

    transition: transform 0.4s ease;

}



.photo-panel.is-open .photo-panel-inner {

    transform: translateY(0);

}



.hero {

    z-index: 0 !important;

}

.hero::before {

    pointer-events: none;

}

.hero-photos {

    position: relative;

    z-index: 2;

}



.hero-photos img {

    pointer-events: auto;

    cursor: pointer;

}

/* ======================

   HERO GALERIE PROPRE

====================== */

.hero {

    position: relative;

    height: 100vh;

    overflow: hidden;

    background: #000;

    margin-top: -60px !important;

    z-index: 0 !important;

}



.hero::before {

    content: none !important;

}

.hero-photos {

    position: absolute;

    inset: 0;



    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-auto-rows: 1fr;



    gap: 6px;

    padding: 20px;



    z-index: 2;

}



.hero-photos img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    cursor: pointer;

}

.hero-photos img:hover {

    filter: grayscale(0%) contrast(1.1);

    transform: scale(1.02);

    transition: transform 0.3s ease, filter 0.3s ease;

}



.photo-panel {

    cursor: zoom-out;

}

.photo-panel-inner {

    cursor: default;

}

.photo-panel-image {

    display: flex;

    align-items: center;

    justify-content: center;

}



.photo-panel-image img {

    width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

}





@media (max-width: 768px) {



    .photo-panel-inner {

        width: 100%;

        height: 100%;

        grid-template-columns: 1fr;

        grid-template-rows: auto auto;

        gap: 20px;

        padding: 20px;

    }



    .photo-panel-image {

        width: 100%;

        height: 60vh;

    }



    .photo-panel-image img {

        max-width: 100%;

        max-height: 100%;

    }



    .photo-panel-text {

        text-align: center;

        padding: 0 10px;

    }



    .photo-panel-text h2 {

        font-size: 1.8rem;

    }

}

@media (max-width: 768px) {



    .photo-panel-close {

        top: 15px;

        right: 15px;

        width: 40px;

        height: 40px;

        font-size: 1.5rem;

    }

}

@media (max-width: 768px) {

    .hero-photos {

        grid-template-columns: repeat(3, 1fr);

        grid-auto-rows: 100px;

        padding: 12px;

        gap: 4px;

    }

}

@media (max-width: 480px) {

    .hero-photos {

        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 90px;

    }

}







/* ======================

   SECTION QUI JE SUIS

====================== */

.about {

    background: #000;

    padding: 120px 0;

}



.about-inner {

    max-width: 1200px;

    margin: 0 auto;



    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;



    align-items: center;

}



.about-photo img {

    width: 100%;

    height: auto;

    display: block;

}



.about-text {

    color: #fff;

}



.about-text h2 {

    font-family: "Arapey", serif;

    font-size: 3rem;

    margin-bottom: 30px;

}



.about-text p {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #ccc;

    margin-bottom: 20px;

}



.about-photo img {

    filter: grayscale(10%) contrast(1.05);

}





@media (max-width: 768px) {



    .about {

        padding: 80px 20px;

    }



    .about-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .about-text h2 {

        font-size: 2.2rem;

        text-align: center;

    }



    .about-text {

        text-align: center;

    }

}





/* ======================

   SECTION GALLERY

====================== */

.gallery {

    background: #000;

    

}

.gallery-grid {

    transition: opacity 0.2s ease;

}



.gallery-grid.is-loading {

    opacity: 0.2;

    pointer-events: none;

}



.gallery-inner {

    max-width: 1300px;

    margin: 0 auto;

}



.gallery-title {

    text-align: center;

    font-family: "Arapey", serif;

    font-size: 3rem;

    color: #fff;

    margin-bottom: 40px;

}



/* Filtres */

.gallery-filters {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 50px;

}



.filter-btn {

    background: none;

    border: none;

    color: #aaa;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    cursor: pointer;

    position: relative;

}



.filter-btn.active,

.filter-btn:hover {

    color: #fff;

}



.filter-btn.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 20px;

    height: 1px;

    background: #fff;

    transform: translateX(-50%);

}



/* Grille */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}



.gallery-grid img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    cursor: pointer;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.gallery-grid img:hover {

    transform: scale(1.02);

}

@media (max-width: 1024px) {

    .gallery-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 768px) {

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 480px) {

    .gallery-grid {

        grid-template-columns: 1fr;

    }

}







.exhibition {

    padding: 120px 0;

    background: #000;

}



.exhibition-inner {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;



    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;



    align-items: center;

}



.exhibition-content {

    color: #fff;

}



.exhibition-content h2 {

    font-family: "Arapey", serif;

    font-size: 3rem;

    margin-bottom: 1.5rem;

}



.exhibition-date {

    font-size: 1.1rem;

    margin-bottom: 1rem;

    opacity: 0.8;

}



.exhibition-place {

    font-size: 1rem;

    line-height: 1.6;

    opacity: 0.7;

}



.exhibition-image img {

    width: 100%;

    height: auto;

    display: block;

}

@media (max-width: 900px) {

    .exhibition-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .exhibition-content h2 {

        font-size: 2.2rem;

    }

}







.contact-simple {

    position: relative;

    padding: 160px 0;

    text-align: center;



    background-image: url("https://picsum.photos/1600/900?contact");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.contact-simple::before {

    content: "";

    position: absolute;

    inset: 0;



    background: rgba(0,0,0,0.55);

}



.contact-simple a,

.contact-simple p {

    position: relative;

    z-index: 1;

}







.contact-mail {

    font-family: "Arapey", serif;

    font-size: 2.2rem;

    color: #fff;

    text-decoration: none;

    display: inline-block;

}



.contact-text {

    margin-top: 12px;

    font-size: 0.85rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.4);

}



.site-footer {

    background: #000;

    padding: 80px 0 60px;

}



.footer-inner {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;



    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 24px;

}



.footer-logo img {

    width: 140px;

    height: auto;

    opacity: 0.85;

}



.footer-meta {

    text-align: center;

    font-size: 0.75rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.4);

}



.footer-meta p {

    margin: 0;

}

.subfooter {

    background: #000;

    border-top: 1px solid rgba(255,255,255,0.08);

    padding: 20px 0;

}



.subfooter-inner {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;



    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;



    font-size: 0.7rem;

    color: rgba(255,255,255,0.45);

}



.subfooter a {

    color: rgba(255,255,255,0.6);

    text-decoration: none;

}



.subfooter a:hover {

    color: #fff;

}

@media (max-width: 768px) {

    .subfooter-inner {

        flex-direction: column;

        text-align: center;

    }

}

.cookie-banner {

    position: fixed;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);



    background: rgba(0,0,0,0.9);

    color: #fff;



    padding: 20px 24px;

    max-width: 420px;

    width: calc(100% - 40px);



    display: flex;

    flex-direction: column;

    gap: 14px;



    font-size: 0.85rem;

    line-height: 1.5;



    z-index: 99999;

    border: 1px solid rgba(255,255,255,0.1);

}



.cookie-banner a {

    color: rgba(255,255,255,0.7);

    text-decoration: underline;

}



/* actions */

.cookie-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

}



.cookie-btn {

    background: none;

    border: 1px solid rgba(255,255,255,0.4);

    color: #fff;



    padding: 6px 14px;

    font-size: 0.75rem;

    cursor: pointer;

}



.cookie-btn.accept {

    border-color: #fff;

}



.cookie-btn.settings {

    opacity: 0.7;

}



.cookie-btn:hover {

    background: #fff;

    color: #000;

}



/* ======================

   COOKIE SETTINGS (IMPORTANT)

====================== */



/* fermé par défaut */

.cookie-settings {

    display: none;



    border-top: 1px solid rgba(255,255,255,0.1);

    padding-top: 12px;



    flex-direction: column;

    gap: 8px;



    font-size: 0.75rem;

    color: rgba(255,255,255,0.7);

}



/* ouvert quand on clique sur Paramètres */

.cookie-settings.is-open {

    display: flex;

}



.cookie-settings label {

    display: flex;

    gap: 8px;

    cursor: pointer;

}



.cookie-settings input {

    accent-color: #fff;

}



.photo-panel {

    display: flex;

    align-items: center;

    justify-content: center;

}



.photo-panel-inner {

    max-width: 1200px;

    width: 90%;

    display: grid;

    grid-template-columns: 1fr 400px;

    gap: 40px;

    color: #fff;

    align-items: center; /* 🔥 clé */

}





.photo-panel.active {

    opacity: 1;

    pointer-events: auto;

}







.photo-panel-image img {

    width: 100%;

    height: auto;

    border-radius: 6px;

}



.photo-panel-text {

    font-size: 16px;

    line-height: 1.6;

    color: #fff;

}



.photo-panel-close,

.photo-panel-prev,

.photo-panel-next {

    position: absolute;

    background: none;

    border: none;

    color: #fff;

    font-size: 42px;

    cursor: pointer;

    z-index: 100000;

}



.photo-panel-close { top: 20px; right: 30px; }

.photo-panel-prev  { left: 30px; top: 50%; transform: translateY(-50%); }

.photo-panel-next  { right: 30px; top: 50%; transform: translateY(-50%); }





.photo-panel-counter {

    position: fixed;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);



             /* 🔥 GROS */

    font-weight: 700;

    



    color: #fff;

    background: rgba(0,0,0,0.6);  /* 🔥 contraste */

    padding: 10px 18px;

    border-radius: 30px;



    z-index: 100001;          /* 🔥 AU-DESSUS DE TOUT */

    pointer-events: none;

}



.photo-panel-counter {

    font-family: "SF Mono", "JetBrains Mono",

                 "Menlo", "Consolas", monospace;

    font-size: 15px;

    letter-spacing: 2px;

}

.exhibition-map-btn {

    display: inline-block;

    margin-top: 18px;



    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;



    color: #fff;

    text-decoration: none;



    border-bottom: 1px solid rgba(255,255,255,0.4);

    padding-bottom: 4px;



    transition: opacity 0.2s ease, border-color 0.2s ease;

}



.exhibition-map-btn:hover {

    opacity: 0.7;

    border-color: rgba(255,255,255,0.8);

}



.legal-panel {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.95);

    z-index: 100000;



    opacity: 0;

    pointer-events: none;

    transition: opacity 0.25s ease;

}



.legal-panel.active {

    opacity: 1;

    pointer-events: auto;

}



.legal-panel-inner {

    max-width: 900px;

    margin: 80px auto;

    padding: 0 40px;

    color: #fff;

}



.legal-panel-inner h2 {

    font-size: 36px;

    margin-bottom: 40px;

}



.legal-panel-inner h3 {

    font-size: 20px;

    margin: 40px 0 15px;

}



.legal-panel-inner p {

    line-height: 1.7;

    color: #ccc;

}



.legal-date {

    margin-top: 50px;

    font-size: 14px;

    opacity: 0.6;

}



.legal-close {

    position: fixed;

    top: 30px;

    right: 40px;

    font-size: 42px;

    background: none;

    border: none;

    color: #fff;

    cursor: pointer;

}