#fw-section-tiers-910900f5-064e-45bf-8178-2612e9d041d4 {
--color-primary: #251706;
--color-primary-rgb: 37, 23, 6;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-featured-collection-e90b1b01-fef6-4f56-a935-895ef591c85d {
--color-primary: #ffedd4;
--color-primary-rgb: 255, 237, 212;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #e14d16;
--color-on-primary-rgb: 225, 77, 22;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}




#fw-section-tiers-de90d223-50ea-4aea-9f76-fc2346779df4 {
--color-primary: #251706;
--color-primary-rgb: 37, 23, 6;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}













#fw-section-tiers-af56bce1-788a-4ad4-9485-ea82c2990a0f {
--color-primary: #251706;
--color-primary-rgb: 37, 23, 6;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-instagram-feed-9d2d82e1-ac29-45a6-94cd-bfc1a91de3b9 {
--color-primary: #251706;
--color-primary-rgb: 37, 23, 6;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #e14d16;
--color-on-primary-rgb: 225, 77, 22;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* --- CORRECTION FINALE BLOC INSTAGRAM (FONTS + ALIGNEMENT) --- */

/* 0. IMPORTATION DES POLICES (Sécurité) */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;700&display=swap');

/* 1. Le conteneur global : Force 1200px et retire les paddings latéraux */
section[class*="instagram"], 
.instagram-feed,
.fw-section-instagram {
  max-width: 1200px !important; 
  margin: 0 auto !important;
  padding: 60px 0 !important; /* 0 sur les côtés pour s'aligner parfaitement */
  background-color: transparent !important;
  box-sizing: border-box !important;
}

/* 2. Neutralisation des marges internes cachées */
section[class*="instagram"] > div,
section[class*="instagram"] .page-width,
section[class*="instagram"] .container,
section[class*="instagram"] .wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 3. L'EN-TÊTE FLEX (Titre à gauche / Bouton à droite) */
section[class*="instagram"] .section-header,
section[class*="instagram"] header,
.instagram-feed .header-wrap {
  display: flex !important;
  justify-content: space-between !important; 
  align-items: flex-end !important;
  width: 100% !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
  padding-bottom: 20px !important;
  padding-left: 0 !important; 
  padding-right: 0 !important;
}

/* 4. LE TITRE : Police ANTON */
section[class*="instagram"] h2,
.fw-instagram-title {
  /* ICI : On impose ANTON */
  font-family: 'Anton', sans-serif !important; 
  font-size: 48px !important;
  color: #e14d16 !important; /* VOTRE ORANGE CORRIGÉ */
  text-transform: uppercase !important;
  text-align: left !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: auto !important;
  letter-spacing: 1px !important;
}

/* 5. LE BOUTON : Police BARLOW */
section[class*="instagram"] a,
section[class*="instagram"] a.btn,
section[class*="instagram"] button,
.instagram-feed a {
  /* ICI : On impose BARLOW */
  font-family: 'Barlow', sans-serif !important; 
  font-weight: 700 !important; /* Gras */
  text-transform: uppercase !important;
  display: inline-block !important;
  margin: 0 !important;
  font-size: 16px !important; /* Ajustement pour lisibilité */
}

/* 6. MOBILE : Marges de sécurité */
@media (max-width: 768px) {
  section[class*="instagram"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  section[class*="instagram"] .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px;
  }
  
  section[class*="instagram"] h2 {
    font-size: 32px !important;
  }
}

}
#fw-section-footer {
--color-primary: #251706;
--color-primary-rgb: 37, 23, 6;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #e14d16;
--color-on-primary-rgb: 225, 77, 22;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-header {
--color-primary: #120a02;
--color-primary-rgb: 18, 10, 2;
--color-background: #251706;
--color-background-rgb: 37, 23, 6;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #e14d16;
--color-on-background-rgb: 225, 77, 22;
--color-product-image-background: #000000;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
/* Rendre le header fixe au scroll */
header, .header-container, .site-header {
    position: -webkit-sticky; /* Pour Safari */
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #ffffff; /* Important : ajustez la couleur */
}
}



#fw-section-password {
--color-primary: #e14100;
--color-primary-rgb: 225, 65, 0;
--color-background: #120a02;
--color-background-rgb: 18, 10, 2;
--color-on-primary: #e14d16;
--color-on-primary-rgb: 225, 77, 22;
--color-on-background: #784a3a;
--color-on-background-rgb: 120, 74, 58;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);
/* --- 1. FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

/* --- 2. GLOBAL --- */
body, .password-page {
  background-color: #050505 !important;
  font-family: 'Playfair Display', serif !important;
  text-align: center !important;
  color: #e14d16 !important;
}

/* --- 3. CONTENEUR DU TITRE (La scène 3D) --- */
h1, .h1, .password-page__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff !important;
  font-size: 38px !important;
  line-height: 1.2 !important;
  margin-bottom: 30px !important;
  
  /* Configuration 3D essentielle */
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  perspective: 1000px !important; /* Donne la profondeur 3D */
  
  /* Nettoyage */
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 4. CONFIGURATION COMMUNE FACE AVANT & ARRIÈRE --- */
h1::before, h1::after,
.password-page__title::before, .password-page__title::after {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  
  /* Pour que le texte soit centré au dos */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Style du cercle */
  border-radius: 50% !important;
  border: 3px solid #e14d16 !important;
  background-color: #111 !important;
  
  /* Animation fluide */
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  
  /* Cache le dos de l'élément quand il est retourné */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  
  /* Positionnement absolu pour qu'ils se superposent */
  position: absolute !important;
  top: -240px !important; /* Remonte les ronds au dessus du titre */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* --- 5. FACE AVANT (Le Portrait) --- */
h1::before, .password-page__title::before {
  content: "" !important;
  
  /* Image mise à jour */
  background-image: url('https://cdn.fourthwall.com/offer/sh_a574510a-c0c1-4b34-a55c-75bcaaf13032/c1247c37-85b7-4557-95d6-e21bf3494c7a.jpeg') !important;
  background-size: cover !important;
  background-position: center !important;
  
  /* État initial : Face visible */
  transform: translateX(-50%) rotateY(0deg) !important;
  z-index: 2 !important;
}

/* --- 6. FACE ARRIÈRE (Le Message Caché) --- */
h1::after, .password-page__title::after {
  /* Le texte à afficher au dos */
  content: "Thank you for your patience." !important;
  
  color: #e14d16 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  text-align: center !important;
  padding: 10px !important; /* Marge interne pour ne pas toucher les bords */
  box-sizing: border-box !important;
  background-color: #000 !important; /* Fond noir pour le dos */
  
  /* État initial : Retourné (invisible) */
  transform: translateX(-50%) rotateY(180deg) !important;
  z-index: 1 !important;
}

/* --- 7. L'ACTION (Survol ou Clic) --- */
/* Quand on survole ou clique sur le TITRE ou la zone du rond */
h1:hover::before, h1:active::before,
.password-page__title:hover::before, .password-page__title:active::before {
  /* Le portrait se retourne vers l'arrière (-180deg) */
  transform: translateX(-50%) rotateY(-180deg) !important;
}

h1:hover::after, h1:active::after,
.password-page__title:hover::after, .password-page__title:active::after {
  /* Le message revient vers l'avant (0deg) */
  transform: translateX(-50%) rotateY(0deg) !important;
}

/* --- 8. ESPACEMENT DU TITRE --- */
/* On ajoute une marge en haut du titre pour compenser le positionnement absolute des ronds */
h1, .password-page__title {
  margin-top: 250px !important; 
}

/* --- 9. TEXTES DU BAS --- */
p, .text-content, .password-message {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
}

/* SOUS-TITRE */
p::before, .text-content::before, .password-message::before {
  content: "UNDER CONSTRUCTION";
  display: block !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 3px !important;
  font-size: 14px !important;
  color: #e14d16 !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  line-height: 20px !important;
}

/* DESCRIPTION */
p::after, .text-content::after, .password-message::after {
  content: "Raw elegance is in the making. We are forging the ultimate experience for the bold and bearded.";
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #aaaaaa !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
}

/* --- 10. CLEANUP --- */
.password-page img:not(.kb-custom), .logo-wrapper, .password-logo, .shopify-section-footer, .powered-by, .icon-lock {
  display: none !important;
}

/* --- 11. INPUTS --- */
input {
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  margin-top: 40px !important;
}

button {
  background: transparent !important;
  border: 1px solid #e14d16 !important;
  color: #e14d16 !important;
  font-family: 'Lato', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px 30px !important;
  margin-top: 20px !important;
  transition: 0.3s !important;
}

button:hover {
  background: #e14d16 !important;
  color: #000 !important;
}
}