/* --- SECTION HEADER & NAVIGATION --- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
  margin: 0; 
  color: #302b2b; 
  background: #fffdfa; 
  font-family: Montserrat, Arial, sans-serif; 
  line-height: 1.7; 
}

a { 
  text-decoration: none; 
  color: inherit; 
}

/* --- HEADER & NAVIGATION --- */
.header { 
  position: fixed; 
  z-index: 50; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 108px; 
  padding: 10px 5.5vw; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  background: rgba(255, 253, 250, .94); 
  backdrop-filter: blur(12px); 
  border-bottom: 1px solid #eee5de; 
}

/* Alignement du logo et du texte côte à côte */
.logo-and-brand {
  display: flex;
  align-items: center;      /* Centre le texte verticalement par rapport au logo */
  gap: 15px;                /* Espace de 15px entre le logo et le texte */
  text-decoration: none;    /* Supprime le soulignement du lien */
  height: 100%;             /* S'adapte à la hauteur du header */
  max-width: 250px;
}

/* Gestion stricte de la taille de l'image du logo */
.logo-and-brand img {
  height: 65px;             /* Ajustez cette valeur (ex: 50px ou 70px) selon la taille voulue */
  width: auto;              /* Conserve le ratio d'aspect d'origine (pas de déformation) */
  display: block;
  object-fit: contain;      /* Sécurité anti-écrasement */
}

.brand-text {
  display: flex;
  flex-direction: column;         
}

.brand-script {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: #9c6a62; /* Uniformisation avec votre couleur rose/brune */
}

.brand-name {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 5px;
}

.header nav { 
  display: flex; 
  gap: 29px; 
  align-items: center; 
  font-size: 11px; 
  text-transform: uppercase; 
  letter-spacing: 1.5px; 
}

.header nav a { 
  padding: 12px 0; 
  border-bottom: 1px solid transparent; 
}

.header nav a:hover, 
.header nav a.active { 
  color: #9c6a62; 
  border-color: #9c6a62; 
}

.menu { 
  display: none; 
  border: 0; 
  background: transparent; 
  font-size: 26px; 
}



/* --- SECTION HERO (ACCUEIL) --- */
.hero-section {
  position: relative;
  width: 100%;
  /* La hauteur n'est plus figée, elle dépend de la hauteur naturelle de l'image */
  height: auto; 
  display: block;
  overflow: hidden;
}

/* Force l'image à occuper toute la largeur tout en gardant ses proportions exactes */
.hero-bg-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Le filtre sombre se calque exactement sur la taille de l'image */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* Ajustez l'opacité selon la clarté de votre photo */
  z-index: 1;
}

/* Conteneur du texte calé en haut à gauche */
.hero-container-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 850px; /* Limite la largeur pour que le texte ne traverse pas toute la photo */
  
  /* Marges pour décoller le texte des angles hauts et gauches de la photo */
  padding: 150px 50px; 
  text-align: left;
  color: #ffffff; /* Écrit en blanc pour ressortir sur le fond */
}

.hero-tagline {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #f5efe6; /* Teinte beige crème très douce */
}

.hero-description {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ffffff;
  margin: 0;
}

.eyebrow { 
  margin: 0 0 16px; 
  color: #9b665e; 
  text-transform: uppercase; 
  letter-spacing: 3px; 
  font-size: 10px; 
  font-weight: 600; 
}
.hero h1, h2, h3 { 
  font-family: "Cormorant Garamond", serif; 
  font-weight: 600; 
  line-height: 1.02; 
}

.hero h1 { 
  font-size: clamp(55px, 6.5vw, 76px); 
  letter-spacing: -2px; 
  margin: 0; 
}

.hero h1 em, h2 em { 
  font-weight: 400; 
}

/* --- CONTENEUR D'IMAGE RESPONSIVE AVEC LE TEXTE INCRUSTÉ --- */
.hero-art { 
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end; /* Aligne l'image à droite sur grand écran */
}

.responsive-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Le texte toujours ancré en bas à droite de la photo */
.brand-overlay {
  position: absolute;
  bottom: 1px;
  /*left: 15px;*/
  right: 15px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(77, 58, 51, 0.6); /* Ombre douce pour lisibilité */
}

.brand-overlay .brand-script {
  color: #ffffff;
  font-size: 24px;
}

.brand-overlay .brand-name {
  font-size: 14px;
  letter-spacing: 4px;
}


/* ==========================================
   MODIFICATIONS SPÉCIFIQUES POUR LE MOBILE
   ========================================== */
@media (max-width: 768px) {
  
  /* 1. Aligne les blocs verticalement : la photo en premier, le texte en dessous */
  .hero-section {
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  /* 2. Permet au conteneur de l'image de conserver sa hauteur naturelle */
  .hero-art {
    position: relative !important;
    width: auto !important;
    height: 100% !important;
    display: block !important; /* Block pour gérer l'incrustation interne */
  }

  /* 3. VISIBILITÉ ENTIÈRE DE LA PHOTO : s'adapte à la largeur du mobile sans aucune coupure */
  .hero-bg-image {
    width: 100% !important;
    height: auto !important; /* Laisse l'image calculer sa hauteur réelle */
    display: block !important;
    object-fit: contain !important; /* Garantit que 100% de l'image est visible */
  }

  /* 4. Le filtre sombre ne couvre que la zone exacte de la photo */
  .hero-overlay {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* 5. TEXTE EN BAS À DROITE : La signature reste ancrée sur le coin inférieur droit de la photo */
  .brand-overlay {
    position: absolute !important;
    bottom: 15px !important; /* Éloigné de 15px du bas de la photo */
    right: 15px !important;  /* Éloigné de 15px du bord droit */
    z-index: 10 !important;
    color: #f7f0e9 !important; /* Reste blanc sur la photo */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important; /* Ombre forte pour lisibilité mobile */
    text-align: right;
  }

  .brand-overlay .brand-script {
    color: #ffffff !important;
    font-size: 20px !important; /* Taille ajustée aux petits écrans */
  }

  .brand-overlay .brand-name {
    color: #ffffff !important;
    font-size: 11px !important;
  }

  /* 6. DEPLACEMENT DU TEXTE DESCRIPTION : se positionne automatiquement sous la photo */
  .hero-container-left {
    position: relative !important; /* Quitte le mode incrustation */
    top: auto !important;
    left: auto !important;
    padding: 35px 20px !important; /* Espace respirant sous l'image */
    max-width: 100% !important;
    background-color: #f7f0e9 !important; /* Fond blanc neutre pour la lecture */
    color: #2b2b2b !important; /* Passage du texte en sombre */
  }

  /* Couleurs de police optimisées pour le fond blanc de la description */
  .hero-tagline {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: #9b665e !important; /* Couleur terracotta de votre charte */
  }

  .hero-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4a4a4a !important; /* Gris anthracite doux */
  }
}







/* --- STRUCTURES RESTANTES --- */
.statement { text-align: center; padding: 120px 8vw; max-width: 850px; margin: auto; }
.statement h2 { font-size: 62px; margin: 0; }
.statement > p:last-child { color: #746a65; max-width: 700px; margin: 25px auto 0; }

.section { padding: 105px 7vw; }
.cream { background: #f7f0e9; }

.heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 45px; }
.heading h2 { font-size: 62px; margin: 0; }
.heading > p { max-width: 360px; color: #776e69; font-size: 13px; }

.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.collection-card { background: #fff; }

.visual { height: 330px; display: flex; align-items: flex-end; padding: 25px; background-size: cover; }
.visual span { color: #fff; font-size: 11px; letter-spacing: 2px; }

.card-accessoires .visual { background: linear-gradient(135deg, #7d5b4f, #d7b9a5 52%, #80665d); }
.card-bijoux .visual { background: radial-gradient(circle at 35% 38%, #e9d5bf 0 5%, transparent 6%), radial-gradient(circle at 65% 60%, #a87c72 0 7%, transparent 8%), linear-gradient(135deg, #534742, #c8aaa0); }
.card-custom .visual { background: linear-gradient(135deg, #b9a094, #eee1d7 50%, #886a62); }

.card-copy { padding: 25px 27px 30px; }
.mini { font-size: 9px; letter-spacing: 2px; color: #9b665e; margin: 0; }
.card-copy h3 { font-size: 31px; margin: 7px 0; }
.card-copy p:not(.mini) { font-size: 12px; color: #776e69; }
.card-copy a, .text-link { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #9b665e; font-weight: 600; }

/*.story { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.story-image { width: 100%; display: flex; justify-content: flex-end; }
.story-image img { width: 100%; height: auto; display: block; }*/

/* --- SECTION À PROPOS (#histoire) --- */
.story {display: flex;flex-direction: column-reverse; /* Sur mobile : place le texte au-dessus de la photo pour une lecture naturelle */gap: 40px;align-items: center;}

/* Bloc contenant l'image */
.story-image {width: 100%;display: flex;justify-content: center;}

.story-image img {width: 100%;max-width: 500px; /* Limite la taille maximale de la photo pour garder un bel équilibre */height: auto;display: block;border-radius: 4px;}

/* Bloc contenant le texte */
.story-copy {width: 100%;}

.photo-placeholder { height: 100%; min-height: 580px; background: linear-gradient(145deg, #d2b9aa, #9f786d); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 11px; letter-spacing: 2px; }
.photo-placeholder small { font-size: 9px; letter-spacing: 0; }

.story-copy h2 { font-size: 61px; margin: 0 0 20px; }
.story-copy > p:not(.eyebrow) { color: #756c67; font-size: 14px; margin: 15px 0; }
.story-copy .text-link { display: inline-block; margin-top: 20px; }

.atelier-band { background: #302b2b; color: #fff; padding: 90px 7vw; display: grid; grid-template-columns: 40% 60%; gap: 50px; }
.atelier-band h2 { font-size: 61px; margin: 0; }
.atelier-band .eyebrow { color: #d4a49b; }

.atelier-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; align-items: center; }
.atelier-points div { border-left: 1px solid #6b5b56; padding-left: 20px; }
.atelier-points b { display: block; color: #d4a49b; font-size: 11px; }
.atelier-points strong { display: block; font-family: "Cormorant Garamond"; font-size: 25px; margin: 8px 0; }
.atelier-points span { display: block; color: #c9c0bc; font-size: 11px; }

.custom { background: #f1e6df; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.custom-copy h2 { font-size: 64px; margin: 0 0 22px; }
.custom-copy > p:not(.eyebrow) { color: #746a65; max-width: 560px; margin-bottom: 28px; }

.custom-visual { height: 500px; position: relative; overflow: hidden; background: #e6d4c9; }
.custom-visual span { position: absolute; left: 12%; top: 14%; font: 600 12px/1.5 Montserrat; letter-spacing: 4px; color: #fff; }

.pattern { position: absolute; border-radius: 50%; border: 1px solid #fff8; }
.p1 { width: 420px; height: 420px; right: -70px; top: 90px; background: #ae7c70aa; }
.p2 { width: 300px; height: 300px; left: 90px; bottom: -100px; background: #c6a294aa; }
.p3 { width: 180px; height: 180px; right: 160px; top: 170px; background: #f4e7df88; }

.gallery { background: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 14px; }
.gallery-photo { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e3d4ca, #b88f82); color: #fff; font-size: 10px; letter-spacing: 2px; }
.gp1 { grid-column: span 5; grid-row: span 2; }
.gp2 { grid-column: span 3; }

/* --- RESPONSIVE TABLETTE & MOBILE --- */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr; /* Empilement vertical sur tablette/mobile */
    padding: 140px 7vw 60px;
    text-align: center;
    gap: 50px;
  }
  .hero-copy, .hero-intro { max-width: 100%; }
  .buttons { justify-content: center; }
  .hero-art { justify-content: center; } /* Centre l'image sur mobile */
  
  .story, .custom, .atelier-band { grid-template-columns: 1fr; gap: 40px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .header { height: 80px; }
  .logo-and-brand { height: 65px; }
  .logo-and-brand img { height: 45px; } /* Taille réduite sur smartphone */
  .header nav { display: none; } /* En attente du script du menu mobile */
  .menu { display: block; }
  
  .collection-grid { grid-template-columns: 1fr; }
  .atelier-points { grid-template-columns: 1fr; gap: 20px; }
  .statement h2, .heading h2, .story-copy h2, .atelier-band h2, .custom-copy h2 { font-size: 40px; }
  
  .brand-overlay { bottom: 15px; left: 15px; }
  .brand-overlay .brand-script { font-size: 18px; }
  .brand-overlay .brand-name { font-size: 11px; letter-spacing: 2px; }
}
@media (max-width: 768px) {
  /* Style initial du menu masqué sur mobile */
  .header nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 80px; /* Aligné sous la hauteur du header mobile */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(255, 253, 250, 0.98);
    backdrop-filter: blur(20px);
    gap: 40px;
    padding: 40px;
    font-size: 18px; /* Liens plus grands et faciles à cliquer sur mobile */
    
    /* Cache le menu par défaut en le poussant vers la droite */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

  /* Classe déclenchée par votre script JS (.classList.toggle('open')) */
  .header nav.open {
    display: flex; /* Force l'affichage si écrasé par un display d'origine */
    transform: translateX(0); /* Fait glisser le menu vers l'intérieur de l'écran */
  }
}

/* --- PIED DE PAGE (FOOTER) --- */
footer {
  background: #302b2b;
  color: #fffdfa;
  padding: 60px 7vw 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-top: 1px solid #3d3734;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Conteneur de la marque dans le footer */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

/* Redimensionnement précis du logo du footer */
.footer-brand img {
  height: 50px;             /* Taille plus discrète et élégante pour le bas de page */
  width: auto;              /* Conserve les proportions d'origine */
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Optionnel : force le logo en blanc si votre image d'origine est noire */
  opacity: 0.8;             /* Adoucit le contraste du logo blanc sur fond sombre */
}

.footer-brand span {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c9c0bc;
}

/* Liens ou textes secondaires du footer */
footer div:not(.footer-brand) {
  color: #9c928d;
}

@media (min-width: 768px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 50px 7vw;
  }

  .footer-brand {
    flex-direction: row;    /* Aligne l'image et le texte côte à côte sur grand écran */
    text-align: left;
  }
}

/* --- AJUSTEMENT GRAND ÉCRAN (Ordinateurs & Tablettes paysage) --- */
@media (min-width: 1025px) {
  .story {
    flex-direction: row; /* Aligne les blocs côte à côte sur grand écran */
    gap: 85px;
  }

  .story-copy {
    flex: 1; /* Le texte prend la moitié gauche de l'espace */
  }

  .story-image {
    flex: 1;
    justify-content: flex-end; /* La photo prend la moitié droite et se colle au bord droit */
  }
}

/* --- ENVELOPPE DE TOUTE LA SECTION ATELIER --- */
.atelier-section {
  background: #fffdfa; /* Fond clair global pour enchaîner sur la lecture de l'article */
}

/* --- TEXTE DE L'HISTOIRE DE L'ATELIER --- */
.atelier-story {
  padding: 105px 7vw;
  display: flex;
  justify-content: center;
  background: #f4ede7; /* Léger ton sur ton pour délimiter l'espace lecture */
}

.story-content {
  max-width: 750px; /* Largeur de lecture idéale pour les yeux */
  width: 100%;
}

.story-content .story-subtitle {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: #9b665e;
  font-size: 36px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 15px;
}

.story-content h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 4vw, 36px);
  line-height: 1.1;
  color: #9b665e;
  margin: 0 0 35px 0;
  font-weight: 600;
}

.story-content h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  color: #302b2b;
  margin: 40px 0 15px 0;
  font-weight: 600;
}

.story-content p {
  font-family: 'Montserrat', sans-serif;
  color: #625a55;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Style de l'introduction mis en valeur */
.story-content .lead-text {
  font-size: 17px;
  color: #4a433f;
  line-height: 1.8;
  font-style: italic;
  border-bottom: 1px solid #eee5de;
  padding-bottom: 30px;
  margin-bottom: 35px;
}

/* Liste des leçons apprises */
.lessons-list {
  margin: 25px 0;
  padding-left: 20px;
  list-style: none; /* On enlève les puces standards */
}

.lessons-list li {
  font-family: 'Montserrat', sans-serif;
  color: #625a55;
  font-size: 15px;
  position: relative;
  margin-bottom: 12px;
  padding-left: 20px;
}

/* Ajout d'une puce personnalisée couleur rose/marron */
.lessons-list li::before {
  content: "•";
  color: #9b665e;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

/* Phrase de conclusion mise en avant */
.story-content .conclusion-text {
  margin-top: 40px;
  padding: 25px;
  background: #f4ede7;
  border-left: 3px solid #9b665e;
  color: #302b2b;
  font-weight: 500;
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 768px) {
  .atelier-story {
    padding: 60px 7vw;
  }
  .story-content .lead-text {
    font-size: 15px;
  }
  .story-content .story-subtitle {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: #9b665e;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .story-content h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(32px, 4vw, 30px);
    line-height: 1.1;
    color: #9b665e;
    margin: 0 0 35px 0;
    font-weight: 600;
  }
}




/* ==========================================
   CONTACT
   ========================================== */
.contact {
  background: #c58b7d;
  color: #fff;
  padding: 95px 7vw;
  /* Modification : passage en flex-column pour tout empiler et centrer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px; /* Espace équilibré entre la description et le formulaire */
  text-align: center;
}
.contact .eyebrow {
  color: #fff;
}
.contact h2 {
  font-size: 61px;
  margin: 0;
  text-align: center;
}
/* Modification : centrage du bloc texte descriptif */
.contact-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.contact-copy>p:not(.eyebrow) {
  max-width: 600px;
  color: #fff0ec;
  font-size: 14px;
  margin: 25px auto; /* Centrage horizontal automatique */
  text-align: center;
}
/* Modification : centrage des éléments de coordonnées */
.contact-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  width: 100%;
}
.contact-list>div {
  display: flex;
  flex-direction: column; /* Aligne l'icône/titre au-dessus du texte sur mobile */
  align-items: center;
  gap: 8px;
  text-align: center;
}
.contact-list span:first-child {
  font-size: 20px;
}
.contact-list b {
  display: block;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-align: center;
}
.contact-list a, .contact-list div>span {
  display: block;
  color: #fff0ec;
  font-size: 12px;
  text-align: center;
}

/* Modification : centrage et calibrage du formulaire de contact */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 600px; /* Limite la largeur sur PC pour que ce soit élégant */
  margin: 0 auto;
  text-align: left; /* Garde l'alignement des étiquettes à gauche à l'intérieur du bloc centré */
}
.contact-form label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}
.contact-form input, .contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #e7bdb4;
  background: #ffffff14;
  color: #fff;
  padding: 13px;
  font: inherit;
  outline: none;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: #fff;
}
.contact-form small {
  font-size: 9px;
  color: #ffe9e4;
}
/* Modification : centrage du bouton d'envoi */
.contact-form .btn {
  width: max-content;
  margin: 10px auto 0 auto; /* Force le bouton à se mettre au milieu */
}

/* --- BLOC RÉSEAUX SOCIAUX AVEC SÉPARATEURS --- */

/* Modification : centrage de la ligne des liens sociaux */
.contact-list div div {
  display: flex;
  flex-wrap: wrap;       
  align-items: center;
  justify-content: center; /* Centre les liens sur la ligne */
}

/* Titre de la catégorie (force le passage au-dessus des liens) */
.contact-list b {
  display: block;
  width: 100%;           
  font-family: Montserrat, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #302b2b;
  margin-bottom: 8px;    
  font-weight: 600;
  text-align: center;
}

/* Style de chaque lien individuel */
.contact-list div a.placeholder-link,
.contact-list div a {
  display: inline-block;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  color: #fff0ec;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

/* Création automatique du gros point de séparation */
.contact-list div a.placeholder-link:not(:last-child)::after,
.contact-list div a:not(:last-child)::after {
  content: " \2022 ";    
  display: inline-block;
  margin-left: 12px;     
  margin-right: 12px;    
  color: #9b665e;        
  font-size: 16px;       
  pointer-events: none;  
}

/* Effets au survol (hover) */
.contact-list div a.placeholder-link:hover,
.contact-list div a:hover {
  color: #9b665e;
  border-color: #9b665e;
}


#galerie {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

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

.galerie-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  aspect-ratio: 1 / 1; /* Force un format carré harmonieux */
  background-color: #f9f9f9;
}

.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.galerie-item:hover img {
  transform: scale(1.05); /* Effet de zoom doux au survol */
}

/* Voile d'information au survol */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 40, 40, 0.4); /* Voile sombre subtil */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 1px;
}

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