/* --- MENU HORIZONTAL --- */

nav {
    background-color: #ffffff; /* Fond blanc propre */
    padding: 20px 0; /* Un peu d'espace en haut et en bas */
    border-bottom: 1px solid #eee; /* (Optionnel) Une ligne très fine de séparation */
}

.menu {
    display: flex; /* C'EST LA CLEF : Met les éléments en ligne */
    justify-content: center; /* Centre le groupe au milieu de la page */
    gap: 50px; /* Espace entre Accueil, Portfolio et Contact */
    
    list-style: none; /* Enlève les points devant les listes */
    margin: 0;
    padding: 0;
}

.menu a {
    text-decoration: none; /* Enlève le soulignement */
    color: #333333; /* Gris foncé élégant */
    font-family: sans-serif; /* Ou 'Montserrat' si vous l'avez installée */
    text-transform: uppercase; /* Met tout en MAJUSCULES automatiquement */
    font-size: 0.9rem; /* Taille discrète */
    letter-spacing: 2px; /* Espacement entre les lettres "A C C U E I L" */
    transition: color 0.3s;
}

.menu a:hover {
    color: #ff9900; /* Change de couleur au survol (mettez votre couleur préférée) */
}

/* --- STYLE MINIMALISTE CLAIR --- */

body {
    /* Fond blanc cassé très léger, moins agressif que le blanc pur */
    background-color: #f8f8f8;
    /* Texte gris très foncé, plus élégant que le noir pur */
    color: #222222;
    text-align: center;
    font-family: sans-serif; /* On changera la police juste après */
    margin: 0; /* Important pour enlever les bordures blanches par défaut */
}

/* Le Menu : plus discret sur fond clair */
nav {
    padding: 20px;
    text-align: center; /* Menu centré */
    background-color: white; /* Bande blanche en haut */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Légère ombre sous le menu */
}

.menu a {
    text-decoration: none;
    color: #555; /* Liens en gris moyen */
    font-size: 1rem; /* Un peu plus petit */
    font-weight: normal; /* Pas de gras */
    text-transform: uppercase;
    letter-spacing: 2px; /* Espace les lettres */
    transition: color 0.3s;
}

.menu a:hover {
    color: black; /* Devient noir au survol */
}
/* --- BANNIÈRE PRINCIPALE (Hero Section) --- */

.banner {
    /* Définit la hauteur de la bannière. 
       "60vh" veut dire "60% de la hauteur de l'écran du visiteur". 
       Vous pouvez changer ce chiffre (ex: 400px ou 80vh). */
    height: 40vh; 
    min-height: 400px; /* Sécurité pour les petits écrans */
    
    /* L'ASTUCE DU FILTRE NOIR + IMAGE : */
    /* On met deux "couches" dans le background : 
       1. Un dégradé de noir transparent (rgba(0,0,0, 0.5) = noir à 50% d'opacité)
       2. Votre image */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('Portfolio/Paris/Nature/photo66.jpg');
    
    /* IMPORTANT POUR L'IMAGE DE FOND : */
    background-size: cover; /* L'image couvre tout l'espace sans être déformée (elle sera rognée si besoin) */
    background-position: center; /* On centre l'image */
    background-repeat: no-repeat;

    /* CENTRER LE TEXTE : On utilise Flexbox pour centrer le contenu */
    display: flex;
    align-items: center; /* Centré verticalement */
    justify-content: center; /* Centré horizontalement */
    text-align: center;
    color: rgb(255, 255, 255); /* Tout le texte dedans sera blanc */
}

/* Le style du gros titre dans la bannière */
.banner h1 {
    font-size: 2.5rem; /* Très gros (adaptez le chiffre si besoin) */
    margin: 0; /* Enlève les marges par défaut */
    text-transform: uppercase;
    letter-spacing: 4px; /* Espace les lettres pour un look "cinéma" */
    font-weight: 700; /* Si vous utilisez Montserrat ou une police grasse */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Petite ombre portée pour améliorer la lecture */
}

/* Le style du petit sous-titre optionnel */
.banner p {
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 300; /* Plus fin */
    letter-spacing: 2px;
}

/* --- STYLE CINÉMA (Overlay) --- */

/* 1. La Boîte (Le cadre) */
.category-card {
    position: relative; /* CRUCIAL : Définit la zone de jeu pour le texte */
    display: block;     /* Le lien se comporte comme un bloc */
    overflow: hidden;   /* Si l'image zoome, elle ne dépasse pas du cadre */
    height: 400px;      /* On force une belle hauteur pour toutes les cartes */
    border-radius: 0;   /* Angles vifs (Style Art) */
}

/* 2. L'Image de fond */
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Remplit tout le cadre sans déformer */
    transition: all 0.6s ease; /* Vitesse de l'animation (0.6 secondes) */
    filter: brightness(1); /* Luminosité normale au début */
}

/* 3. Le Titre (Le texte par-dessus) */
.category-card h3 {
    /* Positionnement "Magique" au centre */
    position: absolute; /* Sort du flux normal pour flotter au-dessus */
    top: 50%;           /* Pousse le texte à 50% du haut */
    left: 50%;          /* Pousse le texte à 50% de la gauche */
    transform: translate(-50%, -50%); /* Recentre parfaitement le texte */
    z-index: 10;        /* S'assure que le texte est DEVANT l'image */
    
    /* Le Style du texte */
    color: white;       /* Blanc pour ressortir sur le fond sombre */
    font-size: 1.8rem;  /* Assez gros */
    text-transform: uppercase;
    letter-spacing: 5px; /* Espace large entre les lettres (très "Luxe") */
    font-weight: 300;   /* Police fine (élégant) */
    margin: 0;          /* Enlève les marges par défaut */
    
    /* L'Invisible */
    opacity: 1;         /* Caché par défaut ! (Mettez 1 si vous voulez le voir tout le temps) */
    transition: all 0.4s ease; /* Apparition douce */
}

/* --- L'ANIMATION (Quand on passe la souris) --- */

/* L'image zoome et s'assombrit */
.category-card:hover img {
    transform: scale(1.1); /* Zoom à 110% */
    filter: brightness(0.6); /* L'image devient sombre (60% de lumière) pour qu'on lise le blanc */
}

/* Le titre apparaît et monte légèrement */
.category-card:hover h3 {
    opacity: 1; /* Devient visible */
    /* On garde le centrage mais on peut ajouter un petit effet si on veut */
}
/* Le conteneur (la boîte qui tient les photos) */
.galerie-accueil {
    display: grid; /* On active le mode Grille */
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes de taille égale (1 fraction) */
    gap: 5px; /* Un espace de 20px entre chaque photo */
    max-width: 1000px; /* La grille ne fera pas plus de 1000px de large */
    margin: 0 auto; /* Centre la grille sur la page */
    padding: 20px;
}

/* Les images à l'intérieur */
.galerie-accueil img {
    width: 100%; /* L'image prend toute la largeur de sa colonne */
    height: 300px; /* On force une hauteur identique pour toutes */
    object-fit: cover; /* MAGIQUE : rogne l'image pour remplir le carré sans déformer */
    border-radius: 0px;
}
/* En-tête de la page portfolio */
.header-portfolio {
    text-align: center;
    padding: 40px 20px;
}

/* --- NOUVELLE GRILLE PORTFOLIO (Élégante et Adaptable) --- */

.categories-grid {
    display: grid;
    /* La Magie est ici : crée automatiquement des colonnes d'au moins 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Un bel espace aéré entre les affiches */
    padding: 30px 5%; /* Espace en haut/bas, et marges sur les côtés */
    max-width: 1400px; /* Limite la largeur max pour rester classe sur grand écran */
    margin: 0 auto; /* Centre la grille au milieu du site */
}

/* La Boîte de l'image */
.category-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4; /* On garde votre format portrait 3:4 très élégant */
    overflow: hidden;
    border-radius: 2px; /* Un angle presque vif, très "Galerie d'Art" */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Ombre très douce et luxueuse */
    text-decoration: none;
}


/* L'image à l'intérieur de la carte */
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* On assombrit TOUTE l'image de 30% pour que le texte blanc ressorte bien */
    filter: brightness(0.7); 
    transition: all 0.6s ease;
}

/* Le Titre par-dessus l'image */
.category-card h3 {
    position: absolute;
    /* Centrage parfait */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 100%;
    margin: 0;
    padding: 0;
    
    /* ON TUE LE DÉGRADÉ NOIR ICI */
    background: transparent; 
    
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    font-weight: 400;
    
    /* Une petite ombre juste derrière les lettres */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    
    transition: transform 0.4s ease;
}

/* --- EFFETS AU SURVOL --- */
.category-card:hover img {
    transform: scale(1.05); /* L'image zoome très légèrement */
    filter: brightness(0.4); /* L'image s'assombrit encore plus (très classe) */
}

.category-card:hover h3 {
    /* Le texte grossit un tout petit peu */
    transform: translate(-50%, -50%) scale(1.1); 
}

/* En-tête de l'album */
.album-header {
    text-align: center;
    padding: 30px;
}

/* Le bouton retour */
.btn-retour {
    text-decoration: none;
    color: #888;
    font-size: 0.9rem;
    border: 1px solid #888;
    padding: 8px 15px;
    border-radius: 20px; /* Bouton arrondi */
    transition: all 0.3s;
}

.btn-retour:hover {
    background-color: white;
    color: black;
    border-color: white;
}

/* --- GRILLE D'EXPOSITION (Style Pinterest / Sans rognage) --- */

/* Le grand conteneur de l'album */
.album-grid {
    column-count: 4; /* Divise la page en 3 colonnes */
    column-gap: 20px; /* L'espace entre les colonnes */
    padding: 40px 5%; /* Marges sur les côtés */
    max-width: 1400px;
    margin: 0 auto;
}

/* La boîte autour de chaque photo */
.photo-box {
    break-inside: avoid; 
    margin-bottom: 20px; 
    
    /* LES DEUX LIGNES MAGIQUES : */
    overflow: hidden; /* Empêche l'image de déborder sur les voisines quand elle zoome */
    border-radius: 2px; /* On met le bord aminci sur la boîte elle-même */
}

/* L'image elle-même */
.photo-box img {
    width: 100%; /* Prend toute la largeur de sa colonne */
    height: auto; /* LA CLÉ : La hauteur s'adapte à la photo (Zéro rognage, garde le format d'origine !) */
    display: block;
    border-radius: 2px; /* Rendu propre */
    transition: transform 0.3s ease; /* Prépare une animation fluide */
}

/* Petit effet sympa au survol */
.photo-box:hover img {
    transform: scale(1.1); 
}

/* --- RESPONSIVE (Pour que ça rende bien sur mobile et tablette) --- */
@media (max-width: 900px) {
    .album-grid {
        column-count: 3 /* Passe à 2 colonnes sur tablette */ }
}

@media (max-width: 500px) {
    .album-grid {
        column-count: 1; /* Passe à 1 colonne sur téléphone */
    }
}

/* Effet Zoom Artistique au survol */
.photo-box:hover img {
    transform: scale(1.1); /* Zoom à 110% */
    filter: brightness(1.1); /* Un peu plus lumineux */
}

/* --- SECTION PRÉSENTATION --- */

/* --- SECTION CLICHÉ ACCUEIL --- */

.intro-cliche {
    width: 100%;
    margin-top: 50px;      /* Espace sous le bandeau "AKM VISION" */
    margin-bottom: 30px;   /* Espace réduit pour rapprocher les premières photos */
    padding: 0 5%;         /* Marge de sécurité sur les côtés */
    text-align: center;
    box-sizing: border-box;
}

.intro-cliche h2 {
    font-size: 1.5rem;     /* Titre bien visible comme sur ta capture */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    color: #000;
}

.intro-cliche p {
    font-size: 1.05rem;    /* Lecture confortable */
    line-height: 1.6;
    font-weight: 300;
    color: #444;           /* Gris foncé élégant */
    
    /* On force l'étalement pour que ça fasse maximum 2 lignes sur ordi */
    width: 100% !important;
    max-width: 1000px !important; /* On garde une petite limite pour ne pas que ce soit illisible sur écrans géants */
    margin: 0 auto !important; 
}

/* Rapprochement de la grille de photos sur l'accueil */
.portfolio-grid, .album-grid {
    margin-top: 10px !important;
}

/* --- RÉGLAGE DE L'ESPACEMENT --- */

.intro-page {
    width: 100%;
    margin-top: 40px;      /* Espace réduit au-dessus du titre */
    margin-bottom: 20px;   /* Espace réduit sous le paragraphe pour remonter les box */
    padding: 0 40px;
    text-align: center;
    box-sizing: border-box;
}

.intro-page h2 {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;   /* On rapproche le titre du paragraphe */
    color: #000;
}

.intro-page p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #333;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;  /* Supprime toute marge parasite sous le texte */
}

/* On s'assure que la grille de photos n'a pas une marge haute trop grande */
.album-grid {
    margin-top: 10px !important;
}

/* --- GALERIE TEASER (3 Photos) --- */
.teaser-portfolio {
    display: grid;
    /* 3 colonnes égales, qui passent en une seule sur mobile automatiquement */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 0 5%; /* Marge de 5% sur les côtés */
    margin-bottom: 50px;
}

/* --- NOUVEAU CODE (Format Paysage Respecté) --- */

.teaser-item {
    height: auto; /* La boîte s'adapte à la taille de l'image */
    margin-bottom: 20px; /* Un petit espace en dessous au cas où */
}

.teaser-item img {
    width: 100%; /* Prend toute la largeur de la colonne */
    height: auto; /* Garde les proportions originales (pas de déformation) */
    display: block; /* Supprime l'espace blanc invisible sous l'image */
    border-radius: 4px; /* Optionnel : garde un petit arrondi sympa */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Optionnel : petite ombre pour le relief */
}

/* Petit effet zoom au survol pour dynamiser */
.teaser-item:hover img {
    transform: scale(1.05);
}

/* --- BOUTON FINAL --- */
.action-container {
    text-align: center;
    margin-bottom: 80px; /* Espace avant le pied de page */
}

.btn-main {
    display: inline-block;
    padding: 15px 40px;
    border: 2px solid #333; /* Bordure noire fine */
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.btn-main:hover {
    background-color: #333; /* Devient noir au survol */
    color: white; /* Texte devient blanc */
}
/* --- PAGE CONTACT --- */

/* L'arrière-plan grand écran */
.contact-hero {
    /* Mettez ici le nom de votre image de fond */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('Portfolio/streetphoto/invalide.jpg');
    background-size: cover;
    background-position: center;
    
    /* Prend presque toute la hauteur de l'écran (moins le menu) */
    min-height: 80vh; 
    
    /* Centre la carte blanche parfaitement au milieu */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Marge de sécurité pour mobile */
}

/* La Carte Blanche au milieu */
.contact-card {
    background-color: white;
    padding: 50px;
    max-width: 600px; /* Largeur max de la carte */
    width: 100%;
    text-align: center;
    border-radius: 8px; /* Coins un peu arrondis */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* Belle ombre portée pour l'effet flottant */
}

.contact-card h2 {
    margin-top: 0;
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif; /* Si vous utilisez cette police */
}

.contact-card p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- LES BOUTONS CONTACT --- */
.contact-buttons {
    display: flex;
    flex-direction: column; /* Les boutons l'un sous l'autre */
    gap: 15px; /* Espace entre les deux */
}

.btn-action {
    display: block;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.3s;
    letter-spacing: 1px;
}

/* Style spécifique Email (Noir) */
.email {
    background-color: #222;
    color: white;
    border: 2px solid #222;
}
.email:hover {
    background-color: #444; /* Un peu plus clair au survol */
}

/* Style spécifique Insta (Blanc avec bordure) */
.insta {
    background-color: white;
    color: #222;
    border: 2px solid #222;
}
.insta:hover {
    background-color: #222;
    color: white; /* Inverse les couleurs au survol */
}
/* --- PAGE BOUTIQUE --- */

.shop-header {
    text-align: center;
    padding: 60px 20px;
    background-color: #f9f9f9; /* Fond très léger pour séparer du menu */
}

.shop-header h1 {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* La Grille des Produits */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive auto */
    gap: 40px;
    max-width: 1200px;
    margin: 50px auto; /* Centré avec espace en haut/bas */
    padding: 0 20px;
}

/* La Carte Produit */
.product-card {
    border: 1px solid #eee; /* Bordure très fine */
    border-radius: 8px;
    overflow: hidden; /* Pour que l'image ne dépasse pas */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white;
}

/* Effet au survol de la carte */
.product-card:hover {
    transform: translateY(-5px); /* La carte monte un peu */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Ombre douce */
}

/* L'image du produit */
.product-image {
    position: relative; /* Pour pouvoir placer le prix par-dessus */
    height: 250px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'étiquette Prix */
.price-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: white;
    color: #222;
    padding: 5px 12px;
    font-weight: bold;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Les infos (Titre, Desc, Bouton) */
.product-info {
    padding: 25px;
    text-align: center;
}

.product-info h3 {
    margin-top: 0;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.product-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Liste des caractéristiques */
.features {
    list-style: none; /* Pas de puces */
    padding: 0;
    margin: 20px 0;
    color: #888;
    font-size: 0.85rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.features li {
    margin-bottom: 5px;
}

/* Le Bouton Acheter */
.btn-buy {
    display: inline-block;
    background-color: #222;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: background-color 0.3s;
    width: 80%; /* Bouton large */
}

.btn-buy:hover {
    background-color: #ff9900; /* Couleur d'accentuation (ou gris plus clair) */
    color: white;
}
/* La classe de base pour tes éléments */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px); /* L'élément commence un peu plus bas */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* La classe ajoutée par le JavaScript */
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0); /* L'élément revient à sa place */
}

html { scroll-behavior: smooth; }

/* --- GRILLE D'EXPOSITION (Style Pinterest / Sans rognage) --- */

.gallery-masonry {
    column-count: 3; /* On fait 3 colonnes de photos */
    column-gap: 20px; /* L'espace entre les colonnes */
    padding: 40px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-masonry img {
    width: 100%; /* Prend toute la largeur de sa colonne */
    height: auto; /* LA CLÉ : La hauteur s'adapte à la photo (Zéro rognage !) */
    display: block;
    margin-bottom: 20px; /* Espace en dessous de chaque photo */
    break-inside: avoid; /* Empêche une photo d'être coupée entre deux colonnes */
    border-radius: 2px; /* Rendu très propre */
    transition: transform 0.3s ease;
}

.gallery-masonry img:hover {
    transform: scale(1.02); /* Petit zoom sympa au passage de la souris */
}

/* --- RESPONSIVE (Pour les petits écrans) --- */
@media (max-width: 900px) {
    .gallery-masonry {
        column-count: 2; /* 2 colonnes sur tablette */
    }
}
@media (max-width: 500px) {
    .gallery-masonry {
        column-count: 2 ; /* 1 colonne sur téléphone */
    }
}
/* --- FOOTER (Pied de page) --- */
footer {
    text-align: center;
    padding: 40px 20px 20px 20px;
    margin-top: 50px; /* Espace avec le contenu du dessus */
    color: #888; /* Un gris doux et discret */
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Barre de navigation / Filtres */
.portfolio-filter {
    text-align: center;
    margin: 0px 0 0px 0;
}

.portfolio-filter ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne sur mobile */
    gap: 25px;
}

.portfolio-filter a {
    text-decoration: none;
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.portfolio-filter a:hover {
    color: #000;
}

/* Pour mettre en évidence la catégorie active */
.portfolio-filter a.active {
    color: #000;
    font-weight: 600;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

.portfolio-filter a.active {
    color: #000;
    font-weight: 600; /* Met le texte en gras pour qu'on le voit mieux */
    border-bottom: 2px solid #000; /* Le fameux souligné */
    padding-bottom: 5px; /* Petit espace entre le texte et le trait */
}

/* Container pour rapprocher le bouton du texte */
.back-wrapper {
    text-align: center;
    margin-top: 20px; /* On remonte encore un peu plus pour bien coller */
    margin-bottom: 40px; /* Espace avant la grille de photos */
}

/* Le design du bouton encadré affiné */
.btn-back {
    display: inline-block;
    border: 1px solid #444; /* Bordure fine gris foncé (moins agressive que noir) */
    
    /* LE RECADRAGE EST ICI */
    padding: 6px 20px;      /* 6px haut/bas, 20px gauche/droite (plus fin) */
    
    text-decoration: none;
    color: #444;
    font-size: 0.7rem;      /* Police légèrement plus petite pour plus de finesse */
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

/* Effet au survol : inversion élégante */
.btn-back:hover {
    background-color: #444;
    color: #fff;
    border-color: #444; /* Assure que la bordure reste de la même couleur */
}

/* Style épuré pour les descriptions */
.intro-text {
    max-width: 650px;        /* Limite la largeur pour que ce soit lisible */
    margin: 20px auto 10px;  /* Centre le bloc et ajoute de l'espace en bas */
    font-size: 0.95rem;      /* Taille légèrement plus petite */
    line-height: 1.8;        /* Interligne aéré (le secret de l'élégance) */
    color: #666;             /* Gris foncé doux au lieu de noir pur */
    font-weight: 300;        /* Typographie fine (pas en gras) */
    text-align: center;      /* Garde le centrage que tu avais */
    padding: 0 20px;         /* Sécurité pour le mobile */
}

/* Style pour les liens du footer */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espace entre les liens */
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #888; /* Gris discret */
    font-size: 0.75rem; /* Un peu plus petit que le copyright */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #000; /* Devient noir au survol */
}

/* Container des icônes du footer */
.footer-icons {
    display: flex;
    justify-content: center;
    gap: 30px;        /* Espace entre les logos */
    margin-bottom: 15px;
    font-size: 1.4rem; /* Taille des logos (facile à changer) */
}

/* Style de base des icônes */
.footer-icons a {
    text-decoration: none;
    color: #494949;       /* Gris discret par défaut */
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Effet au survol (hover) */
.footer-icons a:hover {
    color: #000;       /* Devient noir au survol */
    transform: translateY(-2px); /* Petit saut vers le haut pour le fun */
}

/* --- RÉPARATION MOBILE POUR LE FR | EN --- */

/* Cette règle s'applique uniquement sur les écrans de moins de 768px */
@media screen and (max-width: 768px) {
    .lang-switch {
        display: block !important; /* Force le switcher à prendre sa propre ligne */
        margin-left: 0 !important;   /* Enlève la marge de gauche de l'ordinateur */
        margin-top: 15px !important;  /* Crée de l'espace AU-DESSUS pour respirer */
        text-align: left;           /* Aligne à gauche comme tes autres liens */
        padding-left: 10px;         /* Aligne parfaitement avec le texte du menu */
    }

    /* Optionnel : On peut aussi grossir un peu le texte sur mobile */
    .lang-switch, .lang-switch a {
        font-size: 1rem !important;
    }
}