/* ================================
   VARIABLES GLOBALES
   Centralisation des couleurs,
   dimensions et transitions du site
================================ */
:root{
  --bg: #000000; /* Couleur de fond principale du site */
  --panel: #050505; /* Couleur secondaire pour certains blocs/panneaux */
  --line: rgba(255,255,255,0.06); /* Ligne de séparation visible mais discrète */
  --line-soft: rgba(255,255,255,0.035); /* Variante encore plus légère pour certaines bordures */
  --white: #f4f4f4; /* Blanc principal utilisé pour les textes et éléments clairs */
  --text: rgba(255,255,255,0.88); /* Couleur de texte standard */
  --muted: rgba(255,255,255,0.48); /* Couleur atténuée pour textes secondaires */
  --gold: #d1a91f; /* Couleur accent principale de la marque */
  --gold-soft: #c39b19; /* Variante plus douce du doré */
  --sidebar-width: 335px; /* Largeur de la barre latérale desktop */
  --content-max: 1180px; /* Largeur maximale prévue pour le contenu */
  --header-height: 82px; /* Hauteur du header desktop */
  --transition: 0.28s ease; /* Transition globale utilisée sur les effets hover */
}

/* ================================
   RESET CSS
   Suppression des styles natifs
   pour repartir sur une base propre
================================ */
*{
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les espacements internes par défaut */
  box-sizing: border-box; /* Inclut padding et border dans la taille totale des éléments */
}

html{
  scroll-behavior: smooth; /* Active un défilement fluide lors des ancres */
}

body{
  background: var(--bg); /* Fond principal noir */
  color: var(--white); /* Couleur de texte par défaut */
  font-family: "Inter", sans-serif; /* Police principale du site */
  overflow-x: hidden; /* Empêche le scroll horizontal parasite */
}

img{
  max-width: 100%; /* Empêche une image de dépasser de son conteneur */
  display: block; /* Supprime les espaces blancs liés aux images inline */
}

a{
  color: inherit; /* Les liens héritent de la couleur du parent */
  text-decoration: none; /* Supprime le soulignement par défaut */
}

/* Conteneur principal de toute la page */
.page-shell{
  width: 100%; /* Prend toute la largeur disponible */
  min-height: 100vh; /* La page prend au minimum toute la hauteur de l’écran */
  background: var(--bg); /* Fond noir uniforme */
}

/* ================================
   HEADER
================================ */
.site-header{
  height: var(--header-height); /* Hauteur fixe du header */
  width: calc(100% - 72px); /* Réduction de largeur pour créer des marges latérales */
  margin: 0 auto; /* Centre le header horizontalement */
  border-bottom: 1px solid var(--line); /* Ligne de séparation en bas */
  display: flex; /* Utilise Flexbox pour aligner les éléments */
  align-items: center; /* Aligne verticalement les éléments */
  justify-content: space-between; /* Sépare le logo et la navigation */
  position: relative; /* Sert de référence aux éléments positionnés */
}

/* Lien contenant le logo */
.logo{
  position: fixed; /* Le logo reste fixe à l’écran */
  top: -10px; /* Le logo remonte légèrement pour un effet visuel spécifique */
  left: 56px; /* Décale le logo depuis la gauche */
  z-index: 9999; /* Le place au-dessus de tous les autres éléments */
  display: flex; /* Permet un bon alignement interne */
  align-items: center; /* Centre verticalement son contenu */
}

.logo img{
  width: 160px; /* Largeur du logo */
  height: auto; /* Garde les proportions de l’image */
  object-fit: contain; /* Garantit que l’image reste entière dans son cadre */
}

/* Navigation principale à droite du header */
.header-right{
  display: flex; /* Aligne les liens sur une ligne */
  align-items: center; /* Centre verticalement */
  gap: 46px; /* Espace entre les éléments */
}

/* Style commun aux liens de header et au bouton checkout */
.header-link,
.checkout-btn{
  font-size: 0.7rem; /* Taille de texte réduite pour style premium */
  letter-spacing: 0.28em; /* Espacement entre lettres pour effet éditorial */
  font-weight: 500; /* Épaisseur moyenne */
  color: var(--gold); /* Couleur dorée de la charte */
  transition: var(--transition); /* Animation douce au survol */
}

.header-link:hover{
  opacity: 0.7; /* Léger effet de transparence au survol */
}

/* Bouton checkout plus travaillé visuellement */
.checkout-btn{
  border: 1px solid rgba(209,169,31,0.4); /* Bordure dorée semi-transparente */
  padding: 18px 28px; /* Espacement interne */
  min-width: 173px; /* Largeur minimale pour garder une cohérence visuelle */
  text-align: center; /* Centre le texte */
}

.checkout-btn:hover{
  background: rgba(209,169,31,0.08); /* Fond léger au survol */
}

/* ================================
   BOUTON MENU MOBILE
================================ */
.menu-toggle{
  display: none; /* Caché sur desktop */
  background: none; /* Pas de fond */
  border: none; /* Pas de bordure */
  width: 44px; /* Zone de clic confortable */
  height: 44px;
  cursor: pointer; /* Curseur main */
  position: relative; /* Référence pour les spans */
}

/* Lignes du burger */
.menu-toggle span{
  position: absolute; /* Positionnement libre dans le bouton */
  left: 9px; /* Décalage depuis la gauche */
  width: 26px; /* Longueur de chaque ligne */
  height: 1.5px; /* Épaisseur */
  background: var(--white); /* Couleur blanche */
  transition: var(--transition); /* Animation au changement d’état */
}

.menu-toggle span:first-child{
  top: 15px; /* Position de la première ligne */
}

.menu-toggle span:last-child{
  top: 24px; /* Position de la deuxième ligne */
}

/* Transformation en croix quand le menu est actif */
.menu-toggle.active span:first-child{
  transform: rotate(45deg); /* Rotation diagonale */
  top: 20px; /* Recentrage */
}

.menu-toggle.active span:last-child{
  transform: rotate(-45deg); /* Rotation inverse */
  top: 20px; /* Recentrage */
}

/* ================================
   MENU MOBILE
================================ */
.mobile-menu{
  display: none; /* Caché par défaut */
  width: calc(100% - 72px); /* Même logique de largeur que le header */
  margin: 0 auto; /* Centré */
  border-bottom: 1px solid var(--line); /* Ligne de séparation */
  background: #020202; /* Fond légèrement différent du body */
}

.mobile-menu.open{
  display: block; /* Le menu devient visible quand il est ouvert */
}

.mobile-nav{
  display: flex; /* Utilise flexbox */
  flex-direction: column; /* Colonne verticale */
  gap: 20px; /* Espace entre les liens */
  padding: 24px 0 28px; /* Espacement haut/bas */
}

.mobile-nav a{
  font-size: 0.86rem; /* Taille un peu plus grande qu’en desktop */
  letter-spacing: 0.22em; /* Style éditorial */
  color: var(--gold); /* Doré de la marque */
}

/* ================================
   STRUCTURE GÉNÉRALE DU LAYOUT
================================ */
.home-layout{
  width: calc(100% - 72px); /* Largeur globale avec marges latérales */
  margin: 0 auto; /* Centre la structure */
  display: grid; /* Utilise CSS Grid */
  grid-template-columns: var(--sidebar-width) 1fr; /* Sidebar fixe + contenu principal */
  min-height: calc(100vh - var(--header-height)); /* Hauteur minimale sous le header */
  border-left: 1px solid var(--line-soft); /* Ligne verticale très légère */
}

/* Barre latérale gauche */
.left-sidebar{
  position: sticky; /* Reste visible lors du scroll */
  top: 130px; /* Distance depuis le haut */
  align-self: start; /* Alignement en haut dans la grille */
  height: calc(100vh - 130px); /* Garde une hauteur liée à la fenêtre */
  border-right: 1px solid var(--line); /* Ligne de séparation avec le contenu */
  padding: 0 44px 34px 44px; /* Espacements internes */

  display: flex; /* Flexbox pour répartir les zones haut/bas */
  flex-direction: column; /* Organisation verticale */
  justify-content: space-between; /* Place une partie en haut et une en bas */
}

/* Navigation principale de la sidebar */
.category-nav{
  display: flex;
  flex-direction: column; /* Liens empilés verticalement */
  gap: 34px; /* Espacement entre les catégories */
}

/* Style des liens sidebar haut + bas */
.category-nav a,
.category-nav-bottom a{
  color: var(--gold); /* Doré de la marque */
  font-size: 0.72rem; /* Petite taille raffinée */
  letter-spacing: 0.42em; /* Fort espacement pour style premium */
  font-weight: 500;
  transition: var(--transition); /* Animation hover */
}

.category-nav a:hover,
.category-nav-bottom a:hover{
  opacity: 0.72; /* Réduction légère de visibilité */
  transform: translateX(2px); /* Décalage subtil vers la droite */
}

/* Partie basse de la sidebar */
.category-nav-bottom{
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 40px; /* Espace au-dessus */
}

.insta-link{
  display: inline-flex; /* Permet un alignement propre de l’icône */
  align-items: center;
}

.insta-link img{
  width: 18px; /* Taille de l’icône */
  height: 18px;
  display: block;
  object-fit: contain;
}

/* Zone de contenu principale */
.main-content{
  padding: 48px 54px 0 54px; /* Espacements internes */
  position: relative; /* Sert de repère pour certains éléments */
}

/* ================================
   HERO SECTION
================================ */
.hero-section{
  border-left: 1px solid var(--line-soft); /* Ligne décorative verticale */
  padding-left: 20px; /* Décalage interne */
  margin-bottom: 88px; /* Espace avec la suite de la page */
}

.hero-inner{
  position: relative; /* Référence pour le texte superposé */
  min-height: 620px; /* Hauteur minimale de la hero */
  display: flex;
  align-items: center; /* Centre le contenu verticalement */
}

.hero-visual{
  width: 100%; /* Prend toute la largeur disponible */
  max-width: none;
  height: 620px; /* Hauteur fixe desktop */
  margin-left: auto; /* Place le visuel vers la droite si besoin */
  position: relative;
}

.hero-visual img{
  width: 100%; /* Remplit la largeur du conteneur */
  height: 100%; /* Remplit la hauteur */
  object-fit: cover; /* Recadre l’image sans déformation */
  object-position: center center; /* Centre l’image */
  display: block;
}

/* Bloc texte superposé sur la hero */
.hero-overlay{
  position: absolute; /* Placé au-dessus de l’image */
  left: 28px; /* Décalage depuis la gauche */
  top: 50%; /* Position verticale centrale */
  transform: translateY(-50%); /* Centre parfaitement sur l’axe vertical */
  z-index: 2; /* Au-dessus de l’image */
  width: 100%;
  max-width: 980px; /* Limite la largeur du texte */
}

.brand-title{
  display: flex; /* Met le titre et éventuel symbole sur une ligne */
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.brand-title-main{
  font-family: "Cormorant Garamond", serif; /* Police plus premium */
  font-size: clamp(2.9rem, 4.8vw, 4.6rem); /* Taille responsive */
  line-height: 0.95; /* Resserre verticalement le titre */
  font-weight: 600;
  color: #ffffff;
}

.brand-title-logo{
  font-size: 1.9rem; /* Taille du petit symbole éventuel à côté du titre */
  color: #ffffff;
  line-height: 1;
}

.hero-tagline{
  font-size: clamp(3.3rem, 6vw, 5.8rem); /* Taille très visible et responsive */
  line-height: 0.9; /* Resserre les lignes */
  font-weight: 900; /* Très gras */
  color: var(--gold); /* Doré */
  letter-spacing: -0.055em; /* Resserre les lettres */
  text-transform: uppercase; /* Tout en majuscules */
  margin-bottom: 34px;
}

.hero-actions{
  display: flex; /* Aligne les boutons */
  gap: 18px; /* Espace entre eux */
  flex-wrap: wrap; /* Permet de passer à la ligne si besoin */
}

/* Boutons génériques */
.btn{
  display: inline-flex; /* Permet centrage parfait */
  align-items: center;
  justify-content: center;
  min-width: 255px; /* Largeur minimale pour cohérence */
  height: 58px; /* Hauteur fixe */
  padding: 0 24px;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
}

/* Bouton principal doré */
.btn-gold{
  background: var(--gold);
  color: #0c0c0c; /* Contraste fort avec le fond doré */
}

.btn-gold:hover{
  background: #ddb737; /* Doré plus clair au hover */
}

/* Bouton secondaire contour */
.btn-outline{
  border: 1px solid rgba(255,255,255,0.55); /* Bordure blanche semi-transparente */
  color: var(--white);
}

.btn-outline:hover{
  background: rgba(255,255,255,0.06); /* Léger fond au survol */
}

/* ================================
   ENTÊTES DE SECTION
================================ */
.section-head{
  display: flex; /* Titre à gauche, lien à droite */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}

.section-head h3{
  font-size: clamp(1.9rem, 2.7vw, 2.9rem); /* Taille responsive */
  font-weight: 800;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.view-all{
  color: var(--gold); /* Doré */
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold); /* Souligne le lien */
}

/* ================================
   SECTION PRODUITS
================================ */
.drops-section{
  padding-bottom: 100px; /* Espace sous chaque section produits */
}

.product-grid{
  display: grid; /* Organisation des cartes produits en grille */
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
  gap: 52px; /* Espace entre les cartes */
  align-items: start;
}

.product-card{
  display: flex;
  flex-direction: column; /* Image au-dessus, texte en dessous */
}

.product-image{
  background: transparent;
  display: flex;
  align-items: center; /* Centre l’image verticalement */
  justify-content: center; /* Centre l’image horizontalement */
  height: 420px; /* Hauteur fixe identique pour homogénéiser la grille */
  width: 100%;
  overflow: hidden; /* Cache le dépassement lors du zoom */
}

.product-image img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* Garde l’image entière visible */
  transition: transform 0.45s ease; /* Animation douce de zoom */
}

.product-card:hover .product-image img{
  transform: scale(1.02); /* Léger agrandissement au survol */
}

.product-info{
  padding-top: 20px; /* Espace entre image et texte */
}

.product-info h4{
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.product-info p{
  color: var(--gold); /* Prix en doré pour attirer l’œil */
  font-size: 0.92rem;
  font-weight: 500;
}

/* ================================
   SECTIONS ÉDITORIALES
================================ */
.editorial-section{
  display: grid;
  grid-template-columns: 1.18fr 0.9fr; /* Image plus large que le texte */
  gap: 72px;
  align-items: center;
}

.manifesto-section{
  grid-template-columns: 1fr 1fr; /* Répartition équilibrée pour cette variante */
}

.editorial-image{
  width: 100%;
}

.editorial-image img{
  width: 100%;
  height: auto;
  border-radius: 10px; /* Coins arrondis */
  object-fit: cover;
}

.editorial-content{
  max-width: 420px; /* Limite la largeur du bloc texte pour garder du confort de lecture */
}

.eyebrow{
  display: inline-block;
  color: var(--gold); /* Petit titre d’accent */
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  font-weight: 700;
  margin-bottom: 16px;
}

.editorial-content h3{
  font-size: clamp(2.6rem, 4.4vw, 4.9rem); /* Grand titre éditorial */
  line-height: 0.92;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.editorial-content p{
  color: var(--muted); /* Texte plus discret */
  font-size: 0.98rem;
  line-height: 1.75; /* Bonne lisibilité */
  max-width: 390px;
  margin-bottom: 34px;
}

.editorial-link{
  display: inline-block;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
}

/* ================================
   FOOTER
================================ */
.site-footer{
  padding-bottom: 52px; /* Espace final en bas de page */
}

.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Bloc marque plus large que bloc liens */
  gap: 120px;
  margin-bottom: 68px;
}

.footer-brand h4{
  font-family: "Cormorant Garamond", serif; /* Rappel de la typographie premium */
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 18px;
}

.footer-brand p{
  max-width: 420px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

.footer-links{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Deux colonnes de liens */
  gap: 70px;
}

.footer-column{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-column span{
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  margin-bottom: 8px;
}

.footer-column a{
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: var(--transition);
}

.footer-column a:hover{
  color: var(--white); /* Les liens deviennent plus visibles au survol */
}

.footer-bottom{
  border-top: 1px solid var(--line); /* Ligne de séparation */
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Texte à gauche, réseaux à droite */
  gap: 24px;
}

.footer-bottom p{
  color: rgba(255,255,255,0.28); /* Texte discret */
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.socials{
  display: flex;
  align-items: center;
  gap: 34px;
}

.socials a{
  color: rgba(255,255,255,0.28);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  transition: var(--transition);
}

.socials a:hover{
  color: var(--white);
}

/* ================================
   RESPONSIVE
   Adaptation tablette / mobile
================================ */
@media (max-width: 1280px){
  .hero-section{
    padding-left: 28px; /* Ajustement latéral */
  }

  .main-content{
    padding: 36px 30px 0 30px; /* Réduction des marges internes */
  }

  .product-grid{
    gap: 34px; /* Réduction de l’espace entre produits */
  }

  .editorial-section{
    gap: 48px; /* Réduction de l’espace entre image et texte */
  }
}

@media (max-width: 1080px){
  .home-layout{
    grid-template-columns: 1fr; /* La sidebar disparaît, le contenu prend toute la largeur */
  }

  .left-sidebar{
    display: none; /* Cache la sidebar sur tablette/mobile */
  }

  .main-content{
    padding: 34px 0 0; /* Simplifie les marges */
  }

  .hero-section{
    border-left: none; /* Supprime la ligne décorative */
    padding-left: 0;
    margin-bottom: 72px;
  }

  .hero-overlay{
    left: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .editorial-section{
    grid-template-columns: 1fr; /* Passe les blocs en colonne */
  }

  .editorial-image img{
    max-width: 100%;
  }

  .footer-top{
    grid-template-columns: 1fr; /* Footer verticalisé */
    gap: 56px;
  }
}

@media (max-width: 860px){
  .site-header{
    width: calc(100% - 32px); /* Marges réduites */
    height: 74px; /* Header plus compact */
  }

  .mobile-menu{
    width: calc(100% - 32px);
  }

  .home-layout{
    width: calc(100% - 32px);
  }

  .header-right{
    display: none; /* Cache la nav desktop */
  }

  .menu-toggle{
    display: block; /* Affiche le burger */
  }

  .hero-inner{
    min-height: auto;
  }

  .hero-visual{
    min-height: 470px; /* Hero plus compacte */
  }

  .hero-visual img{
    width: 100%;
    height: 470px;
    object-fit: cover;
    object-position: center top; /* Meilleur cadrage mobile */
  }

  .hero-overlay{
    top: auto;
    bottom: 20px; /* Positionne le texte en bas de l’image */
    transform: none;
  }

  .hero-tagline{
    margin-bottom: 22px;
  }

  .product-grid{
    grid-template-columns: 1fr; /* Une seule colonne en mobile */
    gap: 42px;
  }

  .section-head{
    align-items: flex-start;
    flex-direction: column; /* Titre + lien empilés */
  }

  .footer-links{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-bottom{
    flex-direction: column; /* Footer bas empilé */
    align-items: flex-start;
  }

  .socials{
    gap: 18px;
    flex-wrap: wrap; /* Retour à la ligne si besoin */
  }
}

@media (max-width: 560px){
  .site-header{
    width: calc(100% - 20px); /* Marges encore réduites */
  }

  .mobile-menu{
    width: calc(100% - 20px);
  }

  .home-layout{
    width: calc(100% - 20px);
    border-left: none; /* Retire la bordure inutile en mobile */
  }

  .logo img{
    width: 40px; /* Logo beaucoup plus petit sur petit écran */
  }

  .hero-overlay{
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-title{
    gap: 8px;
  }

  .brand-title-logo{
    font-size: 1.4rem;
  }

  .btn{
    width: 100%; /* Boutons pleine largeur */
    min-width: auto;
    height: 52px;
  }

  .hero-actions{
    flex-direction: column; /* Boutons empilés */
    gap: 12px;
  }

  .section-head h3{
    font-size: 1.9rem;
  }

  .editorial-section{
    padding: 58px 0 64px;
  }

  .editorial-content h3{
    font-size: 2.5rem; /* Titre réduit */
  }

  .footer-links{
    grid-template-columns: 1fr; /* Colonnes du footer empilées */
  }
}

/* ================================
   AJUSTEMENTS COMPLÉMENTAIRES
================================ */
.manifesto-section{
  margin-top: 120px; /* Espace avant la section manifeste */
}

.site-footer{
  margin-top: 140px; /* Espace avant le footer */
  padding-top: 40px; /* Espace interne supérieur */
}

.editorial-image{
  width: 100%;
  overflow: hidden; /* Cache le zoom de l’image au hover */
  border-radius: 10px;
}

.editorial-image img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease; /* Animation plus lente et fluide */
}

.editorial-image:hover img{
  transform: scale(1.06); /* Zoom léger au survol */
}

.drops-section{
  margin-top: 120px; /* Espace entre les sections produits */
}

.insta-link svg{
  width: 18px;
  height: 18px;
  fill: var(--gold); /* Couleur dorée */
  transition: var(--transition);
}

.insta-link svg:hover{
  opacity: 0.7; /* Effet discret au hover */
}