/* =============================================
   BOOST'HAIR — Feuille de style partagée
   Version 1.0 — Juin 2026
   ============================================= */

/* FONTS AUTO-HÉBERGÉES (WOFF2 — sans dépendance Google) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../font/woff2/CormorantGaramond-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../font/woff2/CormorantGaramond-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/woff2/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/woff2/Inter-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* VARIABLES */
:root {
  --noir:        #090909;
  --noir-2:      #111111;
  --noir-3:      #181818;
  --creme:       #F5F0E8;
  --creme-2:     #EDE8DF;
  --framboise:   #de207d;
  --framboise-2: #D91E5C;
  --vert:        #1A4A1A;
  --or:          #C4A23A;
  --blanc:       #FFFFFF;
  --gris:        rgba(255,255,255,0.45);
  --gris-creme:  rgba(9,9,9,0.45);
}

/* RESET & BASE */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--noir); color:var(--blanc); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.serif { font-family:'Cormorant Garamond',serif; }

/* NAV PRINCIPALE */
.main-nav { position:fixed; top:0; left:0; right:0; z-index:500; background:rgba(9,9,9,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.06); padding:20px 64px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:60px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.3s; }
.nav-links a:hover { color:var(--blanc); }
.nav-cta { border:1px solid var(--framboise) !important; color:var(--framboise) !important; padding:11px 26px; transition:all 0.3s !important; }
.nav-cta:hover { background:var(--framboise) !important; color:var(--blanc) !important; }

/* CONTENU */
.page-content { padding-top:160px; }

/* EYEBROW */
.eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.eyebrow-line { width:32px; height:1px; background:var(--framboise); }
.eyebrow-label { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--framboise); }

/* FOOTER */
.site-footer { background:var(--noir-2); border-top:1px solid rgba(255,255,255,0.05); }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:64px; padding:64px 64px 48px; max-width:1400px; margin:0 auto; }
.footer-logo { height:52px; width:auto; display:block; margin-bottom:20px; }
.footer-tagline { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.3); line-height:1.8; margin-bottom:24px; }
.footer-contact { display:flex; flex-direction:column; gap:6px; }
.footer-email { font-size:14px; color:var(--framboise); text-decoration:none; font-weight:500; transition:opacity 0.2s; }
.footer-email:hover { opacity:0.75; }
.footer-zone { font-size:11px; color:rgba(255,255,255,0.25); letter-spacing:0.5px; }
.footer-socials { display:flex; align-items:center; gap:14px; margin-top:16px; }
.footer-social-link { color:#C4A23A; text-decoration:none; display:flex; align-items:center; opacity:0.7; transition:opacity 0.2s; }
.footer-social-link:hover { opacity:1; }
.footer-social-link svg { display:block; }
.footer-social-sep { color:rgba(255,255,255,0.12); font-size:10px; }
.footer-col-title { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.2); margin-bottom:16px; }
.footer-nav { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-nav a { font-size:13px; color:rgba(255,255,255,0.45); text-decoration:none; transition:color 0.2s; }
.footer-nav a:hover { color:var(--blanc); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding:20px 64px; display:flex; align-items:center; justify-content:space-between; }
.footer-bottom span { font-size:11px; color:rgba(255,255,255,0.2); letter-spacing:0.5px; }
.footer-bottom a { color:rgba(255,255,255,0.35); text-decoration:none; transition:color 0.2s; }
.footer-bottom a:hover { color:var(--framboise); }

/* HAMBURGER — caché par défaut (desktop) */
.hamburger { display:none; }
.mobile-menu { display:none; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  /* NAV */
  .main-nav { padding:16px 20px; }
  .nav-logo img { height:48px; }
  .nav-links { display:none; }

  /* HAMBURGER */
  .hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; z-index:600; }
  .hamburger span { display:block; width:24px; height:2px; background:var(--blanc); transition:all 0.3s; }
  .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* MOBILE MENU */
  .mobile-menu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(9,9,9,0.98); z-index:550; flex-direction:column; align-items:center; justify-content:center; gap:0; }
  .mobile-menu.open { display:flex; }
  .mobile-menu a { font-size:22px; font-weight:300; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.7); text-decoration:none; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.06); width:70%; text-align:center; transition:color 0.2s; font-family:'Cormorant Garamond',serif; }
  .mobile-menu a:hover { color:var(--framboise); }
  .mobile-menu .mobile-cta { color:var(--framboise) !important; border:1px solid var(--framboise); margin-top:16px; font-size:13px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:2px; }

  /* FOOTER */
  .footer-inner { grid-template-columns:1fr; gap:36px; padding:40px 20px 32px; }
  .footer-bottom { flex-direction:column; gap:8px; padding:16px 20px; text-align:center; }
}