/* --- Variables CSS (pour faciliter la customisation) --- */
:root {
    --primary-color: #00af8f; /* Texte principal */
    --secondary-color: white; /* Texte secondaire / légendes */
    --background-dark: black;
    --background-medium: #2a2a2a;
    --background-light: #f4f4f4;
    --accent-color: #00af8f;
    --header-height: 70px;
    --font-primary: 'Lato', sans-serif;
    --content-bg-alpha: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour les boîtes de contenu */
}

/* --- Réinitialisation et Styles de Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { font-family: var(--font-primary); background-color: var(--background-dark); color: var(--secondary-color); line-height: 1.7; font-size: 16px; }
h1, h2, h3 { font-weight: 700; margin-bottom: 1rem; color: var(--primary-color); letter-spacing: 1px; }
h1 { font-size: 2.8rem; text-align: left;}
h2 { font-size: 2rem; text-align: center; margin-bottom: 1.5rem; text-transform: uppercase; } /* Moins de marge basse pour H2 */
h3 { font-size: 1.4rem; color: var(--accent-color); }
p { margin-bottom: 1rem; color: var(--secondary-color); }
a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--primary-color); }
img { max-width: 100%; height: auto; display: block; }

/* Container principal (utilisé dans header/footer) */
.container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 0 15px; }

/* --- Header / Navigation --- */
.site-header { background-color: rgba(26, 26, 26, 0.9); position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; transition: background-color 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.header-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo img { max-height: calc(var(--header-height) - 20px); width: auto; }
.main-nav ul { list-style: none; display: flex; }
.main-nav li { margin-left: 1.5rem; } /* Un peu moins d'espace */
.main-nav a { color: var(--primary-color); text-transform: uppercase; font-weight: 400; font-size: 0.9rem; letter-spacing: 1px; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: border-color 0.3s ease, color 0.3s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.menu-toggle { display: none; background: none; border: none; color: var(--primary-color); font-size: 2rem; cursor: pointer; }

/* --- Styles pour TOUTES les sections Full Page avec BG Image --- */
.hero-section {
    position: relative; /* Pour l'overlay */
    width: 100%;
    min-height: 100vh; /* Hauteur plein écran */
    display: flex; /* Centrage du contenu */
    flex-direction: column; /* Permet au contenu de s'empiler */
    align-items: center; /* Centrage horizontal */
    justify-content: center; /* Centrage vertical */
    padding: var(--header-height) 20px 40px 20px; /* Espace haut pour header fixe + bas/côtés */
    color: var(--primary-color); /* Texte blanc par défaut */
    text-align: center;
    overflow: hidden; /* Cache tout dépassement éventuel de la section elle-même */

    /* Styles de fond (appliqués à toutes les sections .hero-section) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effet Parallaxe */
}

/* Overlay commun à toutes les sections hero */
.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Noir semi-transparent, ajustez l'opacité (0.0 à 1.0) */
    z-index: 1; /* Derrière le contenu */
}

/* Conteneur du contenu à l'intérieur des sections hero */
.section-content-wrapper {
    position: relative; /* Pour être au-dessus de l'overlay */
    z-index: 2;
    width: 100%; /* Prend la largeur du padding de la section */
    max-width: 1100px; /* Limite la largeur max du contenu */
    margin: 0 auto; /* Centrage */
    padding: 2.5rem; /* Espace intérieur généreux */
    background-color: var(--content-bg-alpha); /* Fond semi-transparent pour le bloc de contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ombre portée discrète */

    /* Gérer le contenu trop grand */
    max-height: calc(100vh - var(--header-height) - 80px); /* Hauteur max = écran - header - padding bas/haut du container */
    overflow-y: auto; /* Scrollbar interne si contenu dépasse */

     /* Styles de scrollbar (optionnel, webkit) 
    &::-webkit-scrollbar { width: 8px; }
    &::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
    &::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; }*/
}


.hero-section-accueil {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-section-accueil.visible {
    opacity: 1;
}





/* Conteneur du contenu à l'intérieur des sections hero */
.section-content-wrapper-bio {
	
    h2 {text-align: left;}
    position: relative; /* Pour être au-dessus de l'overlay */
	left: 30%;
    z-index: 2;
    width: 100%; /* Prend la largeur du padding de la section */
	height: 680px;
    max-width: 500px; /* Limite la largeur max du contenu */
    margin: 0 auto; /* Centrage */
    padding: 2.5rem; /* Espace intérieur généreux */
    background-color: var(--content-bg-alpha); /* Fond semi-transparent pour le bloc de contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ombre portée discrète */

    /* Gérer le contenu trop grand */
    max-height: calc(100vh - var(--header-height) - 80px); /* Hauteur max = écran - header - padding bas/haut du container */
    overflow-y: auto; /* Scrollbar interne si contenu dépasse */

     /* Styles de scrollbar (optionnel, webkit) */
    &::-webkit-scrollbar { width: 8px; }
    &::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
    &::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; }
}

.center-img {
    display: block;
    margin: 0 auto;
}


/* --- Images de fond spécifiques --- */
/* !! REMPLACEZ LES NOMS PAR VOS IMAGES !! */
#accueil { 
	/*background-image: url('images/pic01_A.jpg'); */
	transition: background-image 1s ease-in-out; /* Transition pour l'image de fond */
}
#bio { background-image: url('images/bio03_A.jpg'); }
/*#portfolio { background-image: url('images/1.jpg'); }  Ajoutez une image pour le portfolio */
#galerie { background-image: url('images/portfolio-bg-placeholder.jpg'); }
#tarifs { background-image: url('images/tarifs-bg-placeholder.jpg'); } /* Ajoutez une image pour les tarifs */
#video { background-image: url('images/facade04.jpg'); } /* Était 'a-propos' */
#contact { background-image: url('images/facade05.jpg'); }

/* --- Styles spécifiques au contenu (dans .section-content-wrapper) --- */

/* Accueil (pas besoin de .section-content-wrapper si juste titre/texte) */
#accueil .hero-content { /* Utiliser .hero-content si différent de .section-content-wrapper */
    background-color: transparent; /* Pas de fond pour le texte d'accueil */
    padding: 0;
    box-shadow: none;
    max-height: none; /* Pas de limite de hauteur */
    overflow: visible;
}
#accueil .hero-content h1 { font-size: 3.5rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
#accueil .hero-content p { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 2rem; font-weight: 300; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }

/*--------------------------------------------------------------------------------*/

/* --- Styles pour la nouvelle image logo dans la section accueil --- */
#accueil .hero-logo-img {
    display: block;       /* Permet d'utiliser margin: auto pour centrer */
    max-width: 100%;       /* Limite la largeur à 80% de la largeur du conteneur parent (.hero-content) */
    width: 1600px;         /* Définit une largeur de base *maximale* souhaitée sur les grands écrans. */
                          /* L'image ne dépassera jamais 500px de large OU 80% de son conteneur,
                             en prenant la valeur la plus petite. Ajustez 500px selon vos besoins. */
    height: auto;         /* Maintient le ratio hauteur/largeur de l'image originale */
    margin-left: auto;    /* Centre l'image horizontalement */
    margin-right: auto;   /* Centre l'image horizontalement */
    margin-bottom: 1.5rem; /* Ajoute un espace en dessous, avant le paragraphe */
    /* Optionnel: si vous voulez un espace au-dessus */
    /* margin-top: 1rem; */
}

/* --- Ajustements potentiels pour le conteneur hero-content --- */
#accueil .hero-content {
    /* Assurez-vous qu'il n'y a pas de styles conflictuels */
    /* Par exemple, si vous aviez un fond ou une ombre spécifique pour le H1 : */
     background-color: transparent; /* Ou une autre couleur/opacité si vous voulez un fond derrière logo+texte */
     box-shadow: none; /* Retirer l'ombre si elle ne s'applique plus */
     padding-top: 2rem; /* Ajustez si nécessaire pour l'espacement vertical */
     padding-bottom: 2rem; /* Ajustez si nécessaire */
}

/* --- Assurez-vous que le h1 (maintenant retiré) n'affecte pas la mise en page --- */
#accueil h1 {
     display: none; /* Bonne pratique pour s'assurer qu'il n'y a pas de résidu */
}

/* --- Styles pour le paragraphe et le bouton sous le logo --- */
#accueil .hero-content p {
    /* Vous pouvez ajuster la taille / l'ombre / la couleur si besoin */
    font-size: 1.1rem; /* Exemple */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Assurez la lisibilité */
    margin-top: 0; /* Assure qu'il n'y a pas d'espace excessif après le logo */
}

#accueil .hero-content .cta-button {
   /* Les styles existants devraient convenir */
   margin-top: 1rem; /* Ajustez l'espacement avant le bouton si nécessaire */
}

/*--------------------------------------------------------------------------------*/


/* Section Bio (exemple simple) */
#bio h2 { margin-top: 0; } /* Titre collé en haut du wrapper */
#bio p { text-align: left; /* Ou center si vous préférez */ }



/* --- Styles pour le Slideshow Portfolio FULLSCREEN --- */

/* Conteneur de la section portfolio */
#portfolio.portfolio-section-container {
    padding: 0; /* Pas de padding interne pour la section, le swiper prend tout */
    overflow: hidden; /* S'assurer que rien ne dépasse */
}

/* Conteneur Swiper */
.portfolio-swiper-fullscreen {
    width: 100%;
    height: 100vh; /* Prend toute la hauteur de la section */
    position: absolute; /* Se positionne par rapport à #portfolio */
    top: 0;
    left: 0;
}

/* Styles pour chaque slide fullscreen */
.portfolio-slide-fullscreen {
    position: relative; /* Pour overlay et contenu */
    width: 100%;
    height: 100%; /* Prend toute la hauteur du swiper container */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;

    /* Styles de fond (sera appliqué via JS) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; /* ATTENTION: 'fixed' dans un slider peut être problématique, surtout sur mobile. Préférer 'scroll' */
    background-attachment: scroll; /* Comportement normal de défilement avec le slide */
    color: var(--primary-color);
}

/* Overlay spécifique pour chaque slide */
.portfolio-slide-fullscreen .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Ajustez l'opacité */
    z-index: 1;
}

/* Contenu de la slide par-dessus l'overlay */
.portfolio-slide-content-fullscreen {
    position: relative;
    z-index: 2;
    max-width: 700px; /* Limite largeur du contenu */
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.4); /* Léger fond pour le contenu */
    border-radius: 8px;
}

.portfolio-slide-content-fullscreen h2 {
    font-size: 1.2rem; /* Titre section plus petit */
    text-transform: uppercase;
    color: var(--secondary-color);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.portfolio-slide-content-fullscreen h3 {
    font-size: 2.2rem; /* Titre projet plus grand */
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.portfolio-slide-content-fullscreen p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--primary-color); /* Texte plus clair */
}

.portfolio-slide-content-fullscreen .cta-button {
     /* Le style .cta-button existant devrait fonctionner */
     /* Adaptez si besoin */
}

/* --- Styles pour la Navigation Swiper (Ajustés pour Fullscreen) --- */

/* Pagination (Points) */
.portfolio-swiper-fullscreen .swiper-pagination {
    bottom: 30px !important; /* Remonte les points */
    z-index: 10; /* S'assurer qu'ils sont visibles */
}
.portfolio-swiper-fullscreen .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.6);
    width: 12px;
    height: 12px;
    opacity: 0.8;
    margin: 0 6px !important; /* Espace entre points */
}
.portfolio-swiper-fullscreen .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
    opacity: 1;
}

/* Navigation (Flèches) */
.portfolio-swiper-fullscreen .swiper-button-prev,
.portfolio-swiper-fullscreen .swiper-button-next {
    color: var(--primary-color); /* Flèches blanches */
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* S'assurer qu'elles sont visibles */
}
.portfolio-swiper-fullscreen .swiper-button-prev:hover,
.portfolio-swiper-fullscreen .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--accent-color); /* Change couleur au survol */
}
.portfolio-swiper-fullscreen .swiper-button-prev::after,
.portfolio-swiper-fullscreen .swiper-button-next::after {
    font-size: 20px;
    font-weight: 900;
}

.portfolio-swiper-fullscreen .swiper-button-prev { left: 20px; } /* Plus décalé du bord */
.portfolio-swiper-fullscreen .swiper-button-next { right: 20px; } /* Plus décalé du bord */

/*-------------------------------------------------------------------------*/

/* Section Galerie */
#galerie h2, #galerie { color: var(--primary-color); } /* Assurer couleur texte sur fond sombre wrapper */
.section-intro { color: var(--secondary-color);}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } /* Taille min images + petites */
.gallery-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 5px; transition: transform 0.3s ease, opacity 0.3s ease; border: 2px solid rgba(255,255,255,0.3); }
.gallery-item img:hover { transform: scale(1.05); opacity: 0.8; }

/* Section Tarifs */
#tarifs h2, #tarifs { color: var(--primary-color); }
.section-intro { color: var(--secondary-color);}
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.pricing-card { background-color: rgba(0,0,0,0.3); /* Fond plus subtil pour les cartes */ padding: 1.5rem; border-radius: 8px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; }
.pricing-card h3 { margin-bottom: 0.5rem; }
.pricing-card .price { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1.5rem; }
.pricing-card ul { list-style: none; margin-bottom: 1.5rem; text-align: left; padding-left: 1rem; flex-grow: 1; }
.pricing-card li { margin-bottom: 0.8rem; color: var(--secondary-color); position: relative; padding-left: 1.5rem; }
.pricing-card li::before { content: '✓'; color: var(--accent-color); position: absolute; left: 0; top: 0px; }
.pricing-card .cta-button-secondary { margin-top: auto; }

/* Section Vidéo */
#video h2, #video .section-intro { color: var(--primary-color); }

.section-content-wrapper-video{
    position: relative;/* Pour être au-dessus de l'overlay */
	margin-bottom: 20%;
	left: 26.6%;
    z-index: 2;
    width: 100%; /* Prend la largeur du padding de la section */
	
    max-width: 700px; /* Limite la largeur max du contenu */

    /* Gérer le contenu trop grand */
    max-height: calc(100vh - var(--header-height) - 80px); /* Hauteur max = écran - header - padding bas/haut du container */
    overflow-y: auto; /* Scrollbar interne si contenu dépasse */	
}


/* Section Contact */
#contact h2, #contact .section-intro { color: var(--primary-color); }
.contact-wrapper { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; /* Permet de passer en colonne sur mobile */ }
.contact-form { flex: 2; min-width: 300px; }
.contact-info { flex: 1; min-width: 250px; text-align: left;} /* Aligner texte à gauche */
.contact-form input, .contact-form textarea { width: 100%; padding: 0.8rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.1); color: var(--primary-color); border-radius: 4px; font-size: 1rem; font-family: inherit; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--secondary-color); opacity: 0.8; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent-color); background-color: rgba(255, 255, 255, 0.2); }
.contact-form textarea { resize: vertical; }
.contact-form button { width: auto; }
.contact-info h3 { margin-bottom: 1.5rem; color: var(--accent-color); /* Titre contact en couleur accent */ }
.contact-info p { margin-bottom: 0.8rem; color: var(--secondary-color); }
.contact-info strong { color: var(--accent-color); }
.social-links { margin-top: 1.5rem; }
.social-links a { margin-right: 1rem; display: inline-block; }
.social-links img { width: 32px; height: 32px; opacity: 0.7; transition: opacity 0.3s ease; filter: grayscale(30%); } /* Icônes un peu désaturées */
.social-links a:hover img { opacity: 1; filter: grayscale(0%); }

/* Boutons CTA */
.cta-button, .cta-button-secondary { display: inline-block; padding: 0.8rem 2rem; border-radius: 5px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: none; font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.cta-button { background-color: var(--accent-color); color: var(--background-dark); }
.cta-button:hover { background-color: var(--primary-color); color: var(--background-dark); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.cta-button-secondary { background-color: transparent; color: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: none; }
.cta-button-secondary:hover { background-color: var(--accent-color); color: var(--background-dark); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }


/* --- Footer --- */
.site-footer { background-color: var(--background-dark); padding: 2rem 0; text-align: center; color: var(--primary-color); font-size: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; /* S'assure qu'il est bien après le flux normal */ z-index: 5; /* Au cas où */ }

/* --- Responsive Design --- */

/* Pour toutes tailles : cacher checkbox */
#check {
    display: none;
}

/* Style de base des barres du burger */
.checkbtn {
    display: none;
    width: 35px;
    height: 25px;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 2000;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.checkbtn .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #00af8f;
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Animation quand menu est actif */
#check:checked + .checkbtn .top-bar {
    transform: rotate(45deg) translateY(8px);
}

#check:checked + .checkbtn .middle-bar {
    opacity: 0;
}

#check:checked + .checkbtn .bottom-bar {
    transform: rotate(-45deg) translateY(-8px);
}


/* Desktop (ex: < 1560px) */
@media (max-width: 1560px) {
	.section-content-wrapper-bio {
	    position: relative; /* Pour être au-dessus de l'overlay */
		left: 23%;
}

@media (max-width: 1400px) {
	.section-content-wrapper-video {
		    position: relative; /* Pour être au-dessus de l'overlay */
			left: 15.6%;
	
}

/* Tablette (ex: < 992px) */
@media (max-width: 991.98px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    #accueil .hero-content h1 { font-size: 3rem; }
	
	/* Conteneur du contenu à l'intérieur des sections hero */
	.section-content-wrapper-bio{
	    position: relative; /* Pour être au-dessus de l'overlay */
		left: 0;
	    z-index: 2;
	    width: 100%; /* Prend la largeur du padding de la section */
	    max-width: 1100px; /* Limite la largeur max du contenu */
	    margin: 0 auto; /* Centrage */
	    padding: 2.5rem; /* Espace intérieur généreux */
	    background-color: var(--content-bg-alpha); /* Fond semi-transparent pour le bloc de contenu */
	    border-radius: 8px; /* Coins arrondis */
	    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ombre portée discrète */

	    /* Gérer le contenu trop grand */
	    max-height: calc(100vh - var(--header-height) - 80px); /* Hauteur max = écran - header - padding bas/haut du container */
	    overflow-y: auto; /* Scrollbar interne si contenu dépasse */

	     /* Styles de scrollbar (optionnel, webkit) */
	    &::-webkit-scrollbar { width: 8px; }
	    &::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
	    &::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; }
	}

     /* Ajustement du padding du wrapper de contenu */
     .section-content-wrapper .section-content-wrapper-bio{ padding: 2rem; max-height: calc(100vh - var(--header-height) - 60px); }

     .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
     .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
	 
	.section-content-wrapper-video{
	    position: relative; /* Pour être au-dessus de l'overlay */
		left: 0;
	    z-index: 2;
	    width: 100%; /* Prend la largeur du padding de la section */
	    max-width: 1100px; /* Limite la largeur max du contenu */



	    /* Gérer le contenu trop grand */
	    max-height: calc(100vh - var(--header-height) - 80px); /* Hauteur max = écran - header - padding bas/haut du container */
	}

     /* Ajustement du padding du wrapper de contenu */
     .section-content-wrapper-video{ padding: 2rem; max-height: calc(100vh - var(--header-height) - 60px); } 

}



/* Mobile (ex: < 768px) */
@media (max-width: 767.98px) {
    :root { --header-height: 60px; }
    html { scroll-padding-top: var(--header-height); }

	/* --- Header / Navigation --- */
	.site-header { border-bottom: 0px solid; }
	
    .main-nav ul { display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--background-dark); flex-direction: column; padding: 1rem 0; border-top: 0px solid rgba(255, 255, 255, 0.1); }
    .main-nav li { margin: 0; text-align: center; }
	.main-nav a { color: var(--primary-color); text-transform: uppercase; font-weight: 400; font-size: 0.9rem; letter-spacing: 1px; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: border-color 0.3s ease, color 0.3s ease; }
	.main-nav a:hover, .main-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
    .menu-toggle { display: block; }

	
	.checkbtn {
		display: block;
	    flex-direction: column;
	    font-size: 30px;
	    cursor: pointer;
	    color: white;
	    position: absolute;
	    top: 15px;
	    right: 20px;
	    z-index: 2000;
	}

	/* Menu caché par défaut */
	.main-nav ul {
	    position: fixed;
	    width: 100%;
	    height: 100vh;
	    background-color: rgba(26, 26, 26, 0.9);
	    top: var(--header-height);
	    left: 0;
	    opacity: 0;
	    pointer-events: none;
	    transform: translateY(-20px);
	    transition: opacity 0.4s ease, transform 0.4s ease;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    z-index: 1000;
	}

	/* Chaque élément du menu */
	.main-nav ul li {
	    display: block;
	    margin: 30px 0;
	}

	.main-nav ul li a {
	    font-size: 20px;
	    color: #00af8f;
	    text-decoration: none;
	}

	/* Hover et actif */
	.main-nav ul li a:hover,
	.main-nav ul li a.active {
	    background: none;
	    color: var(--accent-color); /* remplace green par ta variable */
	}

	/* Quand la checkbox est cochée => le menu s'affiche avec animation */
	#check:checked ~ .main-nav ul {
	    opacity: 1;
	    pointer-events: auto;
	    transform: translateY(0);
	}
	
	
	
    .hero-section {
        background-attachment: scroll; /* !! Important pour mobile !! */
         /* Optionnel: réduire un peu la hauteur sur mobile si 100vh est trop */
         /* min-height: 85vh; */
         padding: var(--header-height) 15px 30px 15px; /* Moins de padding */
    }
    .section-content-wrapper {
        padding: 1.5rem; /* Moins de padding */
        max-height: calc(100vh - var(--header-height) - 50px); /* Ajuster max-height */
    }

    #accueil .hero-content h1 { font-size: 2.5rem; }
    #accueil .hero-content p { font-size: 1rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
	
    .portfolio-slide-content-fullscreen {
        max-width: 90%;
        padding: 1.5rem;
    }
    .portfolio-slide-content-fullscreen h3 { font-size: 1.8rem; }
    .portfolio-slide-content-fullscreen p { font-size: 1rem; margin-bottom: 1.5rem;}

    .portfolio-swiper-fullscreen .swiper-pagination { bottom: 20px !important; }
    .portfolio-swiper-fullscreen .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 4px !important; }

    .portfolio-swiper-fullscreen .swiper-button-prev,
    .portfolio-swiper-fullscreen .swiper-button-next {
        width: 40px;
        height: 40px;
    }
    .portfolio-swiper-fullscreen .swiper-button-prev { left: 10px; }
    .portfolio-swiper-fullscreen .swiper-button-next { right: 10px; }
    .portfolio-swiper-fullscreen .swiper-button-prev::after,
    .portfolio-swiper-fullscreen .swiper-button-next::after { font-size: 18px; }

    /* Très important: Désactiver background-attachment: fixed sur mobile si utilisé */
    .portfolio-slide-fullscreen {
         /* background-attachment: scroll !important; */ /* Assurez-vous qu'il est sur scroll */
    }

    .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem;} /* Encore plus petites images */
    .gallery-item img { height: 120px; border-width: 1px; }

    .pricing-grid { grid-template-columns: 1fr; } /* Une seule colonne */
    .pricing-card { padding: 1.2rem; }

    .contact-wrapper { flex-direction: column; gap: 1.5rem; } /* Passe en colonne */
    .contact-info { text-align: center; margin-top: 1rem;} /* Centre infos contact */
    .social-links { text-align: center; }
    .contact-form input, .contact-form textarea { font-size: 0.9rem; }
}

/* Très petits écrans (ex: < 480px) */
@media (max-width: 479.98px) {
    .section-content-wrapper { padding: 1rem; }
    #accueil .hero-content h1 { font-size: 2rem; }
    .cta-button, .cta-button-secondary { padding: 0.7rem 1.5rem; font-size: 0.8rem;}
	
    .portfolio-slide-content-fullscreen h3 { font-size: 1.5rem; }
    .portfolio-slide-content-fullscreen p { font-size: 0.9rem; }
    .portfolio-slide-content-fullscreen .cta-button { padding: 0.7rem 1.5rem; font-size: 0.8rem; }
	 
    .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .gallery-item img { height: 100px; }
}

/*--------------------------------------------------------------------------------*/