/* =========================================
   1. TYPOGRAPHIES LOCALES
========================================= */

/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/space-grotesk-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/geist-900.woff2') format('woff2');
}

/* Geist */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-regular.woff2') format('woff2'); /* poppins - latin */
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-regular.woff2') format('woff2'); /* geist - latin */
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/geist-900.woff2') format('woff2');
}

/* Space Grotesk */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}

/* Titan One */
@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/titan-one-v17-latin-regular.woff2') format('woff2');
}

/* =========================================
   2. VARIABLES GLOBALES
========================================= */
:root {
  /* Couleurs de marque */
  --color-brand-primary: #222F54;
  --color-brand-secondary: #FF7934;
  --color-brand-secondary-hover: #e66625;

  /* Bleus */
  --color-blue-marine-95: #15244B;
  --color-blue-cobalt-80: #465B9B;
  --color-blue-indigo-10: #EAECF3;
  --color-blue-indigo-20: #D5DAE8;
  --color-blue-indigo-60: #808FB9;
  --color-blue-indigo-90: #415797;
  --color-blue-horizon-100: #4A72E8;
  --color-blue-horizon-20: #DBE3FA;
  --color-blue-horizon-10: #EDF1FD;

  /* Accent & neutres */
  --color-red-crimson-90: #CF4A1D;
  --color-sand-60: #F4F2EB;
  --color-sand-10: #FDFDFC;
  --color-noir-80: #3E3E3E;
  --color-neutral-20: #CFCFCF;
  --color-neutral-10: #E8E8E8;
  --color-gray-300: #CDCDD0;
  --color-brown-100: #584237;
  --color-green-100: #10B981;

  /* Raccourcis d'usage */
  --color-white: var(--color-sand-10);
  --background: var(--color-sand-60);
  --background-primary: var(--color-brand-primary);

  /* Familles de polices */
  --font-1: 'Inter', sans-serif;
  --font-2: 'Geist', sans-serif;
  --font-3: 'Space Grotesk', sans-serif;
  --font-4: 'Titan One';
  --font-5: "Poppins";

  /* Animation */
  --anim-delay: 0s;
}

/* =========================================
   3. BASE & ACCESSIBILITÉ
========================================= */
html, body {
  overscroll-behavior-y: none; 
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--background);
  font-family: var(--font-1);
  overflow-x: clip;
}

#page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}

.site-main {
  flex-grow: 1;
}

/* Cache pour les lecteurs d'écran (Standard WP) */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

.skip-link:focus {
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 12px 24px;
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  background-color: var(--color-brand-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  clip: auto !important;
  clip-path: none;
  z-index: 100000;
}

/* =========================================
   4. LAYOUT GÉNÉRIQUE (Le système de Grille)
========================================= */

/* Conteneur principal */
.container { 
  width: 100%; 
  max-width: 1280px; 
  padding: 0 64px; 
  margin: 0 auto; 
  box-sizing: border-box; 
}

/* Espacements de sections */
.section { width: 100%; padding: 80px 0; }
.section-sm { padding: 40px 0; }
.section-lg { padding: 100px 0 32px 0; }
.section-no-pad { padding: 0; }

/* Fonds utilitaires */
.bg-primary { 
  color: var(--color-white);
  background-color: var(--color-brand-primary); 
}

.bg-sand { 
  background-color: var(--color-sand-60); 
}

/* Grilles Automatiques */
.grid { display: grid; gap: 24px; width: 100%; }
.grid-3-cols { grid-template-columns: repeat(3, 1fr); }
.grid-4-cols { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-3-cols, .grid-4-cols { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 40px; }
}

@media (max-width: 768px) {
  .grid-3-cols, .grid-4-cols { grid-template-columns: 1fr; gap: 16px; }
  .container { padding: 0 24px; }
}

/* =========================================
   5. TYPOGRAPHIE STANDARD
========================================= */
.title {
  margin: 0 0 16px 0;
  color: var(--color-brand-primary);
  font-family: var(--font-1);
  font-size: 70px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4.5px;
}

.text-highlight { 
  color: var(--color-brand-secondary); 
}

/* En-têtes de section génériques */
.section-header {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin-bottom: 48px;
}

.section-header.is-centered {
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.kicker {
  margin-bottom: 12px;
  color: var(--color-brand-secondary);
  font-family: var(--font-2);
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: 0.195px;
  text-transform: uppercase;
}

.section-desc {
  margin: 16px 0 0 0;
  color: var(--color-blue-indigo-60);
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 32px;
}

/* =========================================
   6. COMPOSANTS UI (Boutons, Badges)
========================================= */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-1);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-icon { 
  width: 24px; 
  height: 24px; 
}

.btn-primary { 
  color: var(--color-white); 
  background-color: var(--color-brand-secondary); 
  border: 1px solid var(--color-brand-secondary); 
}

.btn-primary:hover { 
  background-color: var(--color-brand-secondary-hover); 
  box-shadow: 0 4px 12px rgba(255, 121, 52, 0.3); 
}

.btn-outline { 
  color: var(--color-noir-80); 
  background-color: var(--color-white); 
  border: 1px solid var(--color-gray-300); 
}

.btn-outline:hover { 
  background-color: #f8f8f8; 
  border-color: var(--color-noir-80); 
}

/* Badges */
.badge { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 999px; 
}

.blur { 
  box-shadow: 1px 1px 60px 0 #000; 
}

.small { 
  height: 24px; 
  padding: 0 8px; 
  font-family: var(--font-1); 
  font-size: 14px; 
  font-weight: 500; 
}

.large { 
  padding: 24px 200px 24px 32px;
  font-family: 'Titan One';
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 72px;
}

.outline-l { 
  color: var(--color-blue-cobalt-80); 
  background: var(--color-white); 
  border: 4px solid var(--color-blue-cobalt-80); 
}

.primary { 
  color: var(--color-blue-horizon-10); 
  background: var(--color-blue-horizon-100); 
}

.success { 
  color: var(--color-white); 
  background: var(--color-green-100); 
}

.danger { 
  color: var(--color-white); 
  background: var(--color-red-crimson-90); 
}

.warning { 
  color: var(--color-white); 
  background: var(--color-brand-secondary); 
}

.limit-400 { 
  max-width: 400px; 
}

/* =========================================
   7. HEADER
========================================= */
.site-header {
  position: relative;
  width: 100%;
  background-color: var(--color-brand-primary);
  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
}

.logo { 
  display: flex; 
  flex: 1; 
  justify-content: flex-start; 
}

.main-nav { 
  display: flex; 
  align-self: stretch; 
  justify-content: center; 
}

.nav-menu { 
  display: flex; 
  align-items: center; 
  gap: 64px; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}

.menu-item { 
  position: relative; 
}

.nav-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  color: var(--color-white); 
  font-size: 16px; 
  font-weight: 600; 
  text-decoration: none; 
  transition: color 0.3s ease; 
}

.nav-text { 
  position: relative; 
}

.nav-text::after { 
  content: ''; 
  position: absolute; 
  bottom: -10px; 
  left: 0; 
  width: 100%; 
  height: 2px; 
  background-color: var(--color-brand-secondary); 
  opacity: 0; 
  transition: opacity 0.3s ease; 
}

.menu-item:hover .nav-link, 
.menu-item:hover .icon-link { 
  color: var(--color-brand-secondary); 
}

.menu-item:hover .nav-text::after { 
  opacity: 1; 
}

.desktop-icons { 
  display: flex; 
  flex: 1; 
  justify-content: flex-end; 
}

.btn-navbar { 
  display: flex; 
  align-items: center; 
  gap: 24px; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}

.icon-link { 
  display: inline-flex; 
  color: var(--color-white); 
  transition: color 0.3s ease; 
}

.icon-link svg { 
  width: 24px; 
  height: 24px; 
}

.mobile-menu-btn { 
  display: none; 
  padding: 8px; 
  margin-left: auto; 
  color: var(--color-white); 
  background: none; 
  border: none; 
  cursor: pointer; 
}

/* Mega Menu */
.mega-menu {
  position: absolute; 
  top: calc(100% + 24px); 
  left: -20px; 
  min-width: 400px;
  visibility: hidden; 
  opacity: 0; 
  color: var(--color-brand-primary); 
  background-color: var(--color-white); 
  border-top: 2px solid var(--color-brand-secondary); 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(10px);
  transition: all 0.3s ease; 
  z-index: 999; 
}

.mega-menu-content { 
  padding: 30px; 
}

.menu-item-has-children:hover .mega-menu, 
.menu-item-has-children.active .mega-menu { 
  visibility: visible; 
  opacity: 1; 
  transform: translateY(0); 
}

/* Responsive Header */
@media (max-width: 1024px) {
  .header-inner { 
    padding: 16px 0; 
  }

  .mobile-menu-btn { 
    display: block; 
  }

  .desktop-icons { 
    display: none !important; 
  }

  .main-nav { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    display: none; 
    width: 100%; 
    padding: 24px 24px 48px 24px; 
    background-color: var(--color-brand-primary); 
    box-sizing: border-box; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
  }

  .main-nav.is-open { display: block; }

  .nav-menu { 
    flex-direction: column; 
    gap: 24px; 
    align-items: flex-start; 
  }

  .mega-menu { 
    position: relative; 
    top: 0; 
    left: 0; 
    display: none; 
    min-width: 100%; 
    padding-left: 20px; 
    color: var(--color-white); 
    background-color: transparent; 
    border-top: none; 
    box-shadow: none; 
  }
  
  .menu-item-has-children.active .mega-menu { 
    display: block; 
    visibility: visible; 
    opacity: 1; 
    transform: none; 
  }
}

/* =========================================
   8. HERO SECTION
========================================= */
.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.hero-content {
  flex: 1;
  min-width: 680px;
  margin-top: 50px;
}

.title-star {
    float: left;
    width: 88px;
    height: 88px;
    margin-right: 12px;
    margin-top: -18px;
    color: var(--color-brand-secondary);
  }

.hero-text {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-blue-indigo-60);
  margin: 0;
  max-width: 500px;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.hero-mascot-container {
  position: relative;
  flex: 0.8;
  display: flex;
  justify-content: flex-end;
}

.mascot-img { 
  width: 590px; 
  height: 448px; 
  object-fit: contain; 
  z-index: 1; 
}

.mascot-badge {
  position: absolute; 
  bottom: -43px; 
  left: 210px; 
  max-width: 209px; 
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--color-neutral-20) 0%, var(--color-white) 100%) padding-box,
              linear-gradient(180deg, var(--color-white) 0%, var(--color-neutral-20) 100%) border-box;
  border: 2px solid transparent;
  border-radius: 6px; 
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); 
  z-index: 2; 
}

.mascot-badge-title { 
  margin: 0 0 4px 0; 
  color: var(--color-noir-80); 
  font-size: 16px; 
  font-weight: 600; 
}

.mascot-badge-text { 
  margin: 0; 
  color: var(--color-noir-80); 
  font-size: 12px; 
  font-weight: 500; 
}

@media (max-width: 1024px) {
  .hero-mascot-container { 
    display: none; 
  }
  
  .hero-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-width: 100%; 
    text-align: center; 
  }
  
  .hero-text { 
    text-align: center; 
  }
  
  .actions { 
    justify-content: center; 
  }
  
  .title-star { 
    display: inline-block; 
    float: none; 
    width: 64px; 
    height: 64px; 
    margin: 0 12px 12px 0; 
    vertical-align: middle; 
  }
}

/* =========================================
   9. SECTION ABOUT (Features)
========================================= */
.feature-card {
  padding: 24px 20px 20px 20px;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.feature-icon { 
  width: 48px; 
  height: 48px; 
  margin-bottom: 24px; 
  color: var(--color-red-crimson-90); 
}

.feature-title { 
  margin: 0 0 12px 0; 
  color: var(--color-brand-primary); 
  font-size: 22px; 
  font-weight: 800; 
  line-height: 26px; 
}

.feature-text { 
  margin: 0; 
  color: var(--color-brown-100); 
  font-size: 16px; 
  line-height: 26px; 
}

/* =========================================
   10. SECTION GET START
========================================= */
.getstart-wrapper {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.getstart-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}

.getstart-step {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 24px;
  background: var(--color-brand-primary);
  border-radius: 16px;
  border: 3px solid var(--color-white);
  box-shadow: 0 4px 12px rgba(8, 20, 72, 0.2);
}

.step-number {
  display: flex; 
  flex-shrink: 0; 
  align-items: center; 
  justify-content: center; 
  width: 38px; 
  height: 38px; 
  color: var(--color-red-crimson-90); 
  font-size: 13px; 
  font-weight: 900;
  background: var(--color-white);
  border-radius: 14px;
}

.step-content { 
  display: flex; 
  flex-direction: column; 
}

.step-title { 
  margin: 0 0 4px 0; 
  color: var(--color-brand-secondary); 
  font-size: 22px; 
  font-weight: 800; 
}

.step-text { 
  margin: 0; 
  color: var(--color-blue-horizon-10); 
  font-size: 16px; 
}

@media (max-width: 1024px) {
  .getstart-wrapper { 
    flex-direction: column; 
    align-items: center; 
  }
}

/* =========================================
   11. SECTION SHOP
========================================= */
.shop-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  padding: 20px;
  background: var(--color-white);
  border-radius: 16px;
}

.shop-img { 
  width: 100%; 
  height: 140px; 
  object-fit: cover; 
  border-radius: 8px; 
}

.shop-title { 
  margin: 0; 
  color: var(--color-brand-primary); 
  font-size: 22px; 
  font-weight: 800; 
}

.card-text { 
  flex-grow: 1; 
  margin: 0; 
  color: var(--color-brown-100); 
  font-size: 16px; 
  line-height: 26px; 
}

.shop-cta {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  padding: 12px 24px; 
  color: var(--color-white);
  font-size: 14px; 
  font-weight: 700; 
  text-decoration: none; 
  text-transform: uppercase; 
  background: var(--color-brand-secondary); 
  border-radius: 12px; 
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(255, 121, 52, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.shop-cta:hover { 
  background-color: #e66625; 
  transform: translateY(-2px); 
}

/* =========================================
   12. SECTION GALLERY
========================================= */
.gallery-showcase {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 24px;
}

.gallery-artist-card {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  justify-content: space-between; 
  width: 100%; 
  max-width: 600px;
  min-height: 450px; 
  padding: 32px; 
  background: var(--color-white); 
  border-radius: 24px; 
  box-sizing: border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05); 
  z-index: 2; 
}

.artist-name { 
  margin: 16px 0; 
  color: var(--color-brand-primary); 
  font-family: var(--font-3); 
  font-size: 48px; 
  font-weight: 700; 
}

.artist-desc { 
  margin: 0; 
  color: var(--color-brown-100); 
  font-size: 16px; 
  line-height: 26px; 
}

.artist-meta { 
  display: flex; 
  gap: 24px; 
  align-items: center; 
  margin-top: 50px; 
  margin-bottom: 32px; 
}

.meta-item { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
}

.meta-label { 
  color: var(--color-blue-indigo-60); 
  font-size: 13px; 
}

.meta-value { 
  color: var(--color-brand-primary); 
  font-size: 16px; 
  font-weight: 700; 
}

.meta-divider { 
  width: 1px; 
  height: 40px; 
  background-color: var(--color-neutral-20); 
}

.artist-figurine {
  width: 475px; 
  height: 600px; 
  margin-left: -40px; 
  object-fit: cover; 
  border-radius: 24px; 
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  transform: rotate(3deg); 
  z-index: 1;
}

.artist-portrait {
  position: absolute; 
  top: 50%; 
  left: 500px; 
  width: 180px; 
  height: 180px; 
  object-fit: cover; 
  border: 6px solid #4A5A8B;
  border-radius: 16px; 
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) rotate(-5deg);
  z-index: 3; 
}

@media (max-width: 1024px) {
  .gallery-showcase { 
    flex-direction: column; 
  }
  
  .artist-figurine { 
    width: 100%; 
    height: auto; 
    margin-top: -30px; 
    margin-left: 0; 
    aspect-ratio: 1/1; 
  }
  
  .artist-portrait { 
    top: auto; 
    right: 20px; 
    bottom: 300px; 
    left: auto; 
    width: 120px; 
    height: 120px; 
  }
}

/* =========================================
   13. SECTION NEWS
========================================= */
.news-banner-group {
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 90px; 
}

.news-banner-group .badge { 
  padding: 12px 180px 12px 24px; 
}

.news-mascot-container { 
  position: absolute; 
  right: -70px; 
  bottom: 0px; 
  z-index: 2; 
}

.news-mascot-img { 
  display: block; 
  width: auto; 
  height: 200px; 
}

.news-card {
  position: relative; 
  display: flex; 
  width: 100%; 
  height: 330px; 
  text-decoration: none; 
  border-radius: 16px; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); 
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover { 
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15); 
  transform: translateY(-4px); 
}

.news-img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: 1; 
}

.news-overlay { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 60%; 
  background: linear-gradient(to bottom, rgba(14, 20, 36, 0) 0%, rgba(14, 20, 36, 0.95) 100%); 
  z-index: 2; 
}

.news-content { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  width: 100%; 
  padding: 16px; 
  box-sizing: border-box; 
  z-index: 3; 
}

.news-content .badge { 
  align-self: flex-start; 
}

.news-title { 
  margin: 0 0 8px 0; 
  color: var(--color-white); 
  font-size: 22px; 
  font-weight: 800; 
}

.news-text { 
  margin: 0; 
  color: var(--color-neutral-10); 
  font-size: 16px; 
}

@media (max-width: 768px) {
  .news-banner-group { 
    margin-bottom: 32px; 
  }
  
  .news-banner-group .badge { 
    padding: 12px 20px; 
    font-size: 24px; 
  }
  
  .news-mascot-container { 
    display: none; 
  }
}

/* =========================================
   14. SECTION NEWSLETTER
========================================= */
.newsletter-card {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%;
  padding: 40px 20px; 
  text-align: center; 
  color: var(--color-white); 
  background: var(--color-brand-primary);
  border: 5px solid var(--color-white); 
  border-radius: 38px; 
  box-sizing: border-box;
}

.newsletter-kicker { 
  margin-bottom: 8px;
  color: var(--color-brand-secondary); 
  font-family: var(--font-2); 
  font-size: 13px; 
  font-weight: 900; 
  text-transform: uppercase; 
}

.newsletter-title { 
  max-width: 600px;
  margin: 0 0 12px 0; 
  color: var(--color-white); 
  font-family: var(--font-1); 
  font-size: 24px; 
  font-weight: 800; 
  letter-spacing: -0.84px; 
}

.newsletter-text { 
  max-width: 760px; 
  margin: 0 0 24px 0; 
  color: var(--color-blue-horizon-10); 
  font-size: 16px; 
}

.newsletter-cta { 
  display: flex; 
  gap: 12px; 
}

@media (max-width: 768px) {
  .newsletter-cta { 
    flex-direction: column; 
    width: 100%; 
  }
  
  .newsletter-cta .btn { 
    width: 100%; 
  }
}

/* =========================================
   15. FOOTER
========================================= */
.site-footer {
  position: relative; 
  padding: 80px 0 140px 0; 
  color: var(--color-white);
  background-color: var(--color-brand-primary);
  background-image: radial-gradient(circle at 10% 30%, rgba(112, 105, 168, 0.15) 0%, transparent 50%), 
                    radial-gradient(circle at 90% 70%, rgba(112, 105, 168, 0.12) 0%, transparent 40%);
  overflow: hidden; 
}

.footer-container { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  gap: 88px; 
  z-index: 2; 
}

/* Newsletter Footer */
.footer-newsletter { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
  max-width: 600px; 
  margin: 0 auto; 
  text-align: center; 
}

.footer-newsletter .newsletter-title { 
  font-family: var(--font-2); 
  font-size: 16px; 
  font-weight: 800; 
}

.newsletter-form { 
  display: flex; 
  gap: 8px; 
  width: 100%; 
  max-width: 520px; 
  padding: 4px; 
  margin: 24px 0; 
  background-color: var(--color-white); 
  border-radius: 999px; 
}

.newsletter-input { 
  flex: 1; 
  padding: 0 24px; 
  color: var(--color-brand-primary); 
  font-family: var(--font-1); 
  font-size: 15px; 
  background: transparent; 
  border: none; 
  outline: none; 
}

.newsletter-input::placeholder { 
  color: var(--color-neutral-20); 
}

.newsletter-legal { 
  margin: 0; 
  color: var(--color-blue-indigo-20); 
  font-size: 12px; 
}

/* Main Footer */
.footer-main { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 64px; 
  justify-content: space-between; 
  width: 100%; 
}

.footer-brand { 
  display: flex; 
  flex-direction: column; 
  gap: 24px; 
  max-width: 300px; 
}

.footer-logo { 
  width: auto; 
  height: 100px; 
}

.footer-desc { 
  margin: 0; 
  color: var(--color-white); 
  font-size: 15px; 
  line-height: 24px; 
}

.footer-socials { 
  display: inline-flex; 
  gap: 24px; 
  width: fit-content; 
  padding: 12px 24px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 999px; 
}

.social-link { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--color-white); 
  transition: opacity 0.2s ease, transform 0.2s ease; 
}

.social-link svg { 
  width: 24px; 
  height: 24px; 
}

.social-link:hover { 
  opacity: 0.7; 
  transform: translateY(-2px); 
}

/* Liens Footer */
.footer-links-group { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 80px; 
}

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

.footer-col-title { 
  margin: 0; 
  color: var(--color-blue-horizon-20); 
  font-family: var(--font-3); 
  font-size: 18px; 
  font-weight: 600; 
  text-transform: uppercase; 
}

.footer-list { 
  display: flex; 
  flex-direction: column; 
  gap: 13px; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}

.footer-list a { 
  color: var(--color-white); 
  font-family: var(--font-2); 
  font-size: 18px; 
  text-decoration: none; 
  transition: color 0.2s ease; 
}

.footer-list a:hover { 
  color: var(--color-brand-secondary); 
}

/* Bottom Footer */
.footer-bottom { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%; 
  padding: 32px 0; 
  border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.copyright, 
.legal-links a { 
  margin: 0; 
  color: var(--color-white); 
  font-size: 14px; 
  text-decoration: none; 
}

.legal-links { 
  display: flex; 
  gap: 24px; 
}

.legal-links a:hover { 
  color: var(--color-brand-secondary); 
}

/* Watermark */
.footer-watermark { 
  position: absolute; 
  bottom: -15px; 
  left: 50%; 
  width: 100%; 
  max-width: 1200px; 
  height: auto; 
  transform: translateX(-50%); 
  pointer-events: none; 
  z-index: 1; 
}

@media (max-width: 768px) {
  .site-footer { 
    padding: 48px 0 80px 0; 
  }
  
  .footer-main { 
    flex-direction: column; 
    gap: 48px; 
  }
  
  .footer-links-group { 
    flex-direction: column; 
    gap: 40px; 
  }
  
  .footer-bottom { 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
  }
  
  .newsletter-form { 
    flex-direction: column; 
    background: transparent; 
    border-radius: 24px; 
  }
  
  .newsletter-input { 
    padding: 16px 24px; 
    margin-bottom: 8px;
    background: var(--color-white); 
  }
}

/* =========================================
   16. ANIMATIONS
========================================= */
@keyframes popIn { 0% { opacity: 0; transform: translateY(-100px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes popUp { 0% { opacity: 0; transform: translateY(70px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-70px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(70px); } 100% { opacity: 1; transform: translateX(0); } }

.animate-pop, .animate-popUp, .animate-slide-left, .animate-slide-right { opacity: 0; }
.animate-pop.is-visible { animation: popIn 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: var(--anim-delay, 0s); }
.animate-popUp.is-visible { animation: popUp 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: var(--anim-delay, 0s); }
.animate-slide-left.is-visible { animation: slideInLeft 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: var(--anim-delay, 0s); }
.animate-slide-right.is-visible { animation: slideInRight 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: var(--anim-delay, 0s); }