@layer reset, tokens, base, components, utilities;

@layer tokens {
:root {
  /* ── Couleurs brief ── */
  --color-bg:        #FAFAFA;
  --color-primary:   #BC322B;
  --color-secondary: #295397;
  --color-neutral:   #212529;
  --color-amber:      #D68910;
  --color-amber-dark: #b8740e;

  /* ── Palette primaire 9 stops ── */
  --color-primary-50:  #fdf2f2;
  --color-primary-100: #fce8e7;
  --color-primary-200: #f8c8c6;
  --color-primary-300: #f19f9c;
  --color-primary-400: #e56f6b;
  --color-primary-500: #BC322B;
  --color-primary-600: #a82922;
  --color-primary-700: #8d201a;
  --color-primary-800: #741a14;
  --color-primary-900: #5c1410;

  /* ── Palette secondaire 9 stops ── */
  --color-secondary-50:  #eef3fb;
  --color-secondary-100: #d5e2f5;
  --color-secondary-200: #adc6ec;
  --color-secondary-300: #7da5de;
  --color-secondary-400: #4e83cc;
  --color-secondary-500: #295397;
  --color-secondary-600: #224784;
  --color-secondary-700: #1b3a6e;
  --color-secondary-800: #152e58;
  --color-secondary-900: #102244;

  /* ── Neutrals ── */
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f1f3f5;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd;
  --color-neutral-600: #6c757d;
  --color-neutral-700: #495057;
  --color-neutral-800: #343a40;
  --color-neutral-900: #212529;

  /* ── Surface roles ── */
  --color-surface-base:     #ffffff;
  --color-surface-page:     #FAFAFA;
  --color-surface-elevated: #ffffff;
  --color-surface-alt:      #f1f3f5;
  --color-surface-dark:     #0f1113;
  --color-surface-hover:    #f1f3f5;

  /* ── Text roles ── */
  --color-text-primary:   #212529;
  --color-text-secondary: #495057;
  --color-text-muted:     #6c757d;
  --color-text-inverse:   #ffffff;
  --color-text-brand:     #BC322B;
  --color-text-link:      #295397;

  /* ── Border ── */
  --color-border-subtle:  #f1f3f5;
  --color-border-default: #dee2e6;
  --color-border-strong:  #ced4da;
  --color-border-brand:   #BC322B;

  /* ── Semantic ── */
  --color-success-light: #d1fae5;
  --color-success:       #10b981;
  --color-success-dark:  #065f46;
  --color-error-light:   #fee2e2;
  --color-error:         #ef4444;
  --color-error-dark:    #991b1b;

  /* ── Focus ── */
  --color-focus:      #BC322B;
  --color-focus-ring: rgba(188, 50, 43, 0.25);

  /* ── Fonts ── */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Type scale ── */
  --size-h1:       clamp(2.5rem,  5vw,  4.5rem);
  --size-h2:       clamp(1.875rem, 3.5vw, 3rem);
  --size-h3:       clamp(1.5rem,  2.5vw, 2.25rem);
  --size-h4:       clamp(1.25rem, 2vw,  1.75rem);
  --size-h5:       clamp(1.125rem, 1.5vw, 1.375rem);
  --size-h6:       clamp(1rem,    1.2vw, 1.25rem);
  --size-body-xl:  clamp(1.25rem, 1.6vw, 1.5rem);
  --size-body-lg:  clamp(1.0625rem, 1.1vw, 1.125rem);
  --size-body-md:  clamp(1rem,    1vw,   1.0625rem);
  --size-body-sm:  clamp(0.875rem, 0.8vw, 0.9375rem);
  --size-body-xs:  clamp(0.75rem, 0.7vw, 0.8125rem);

  /* ── Spacing 8px grid ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Section spacing ── */
  --section-py: clamp(3.5rem, 5vw + 1rem, 7rem);
  --hero-py:    clamp(5rem, 8vw + 1rem, 10rem);

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03);
  --shadow-xl:    0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.03);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ── Z-index ── */
  --z-base:           0;
  --z-raised:        10;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-modal-back:   300;
  --z-modal:        400;
  --z-toast:        500;
  --z-tooltip:      600;

  /* ── Transitions ── */
  --transition-fast: 100ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 350ms ease-out;
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy:     cubic-bezier(0.4, 0, 0, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Header ── */
  --header-h:           72px;
  --header-h-sm:        56px;
  --header-bg:          rgba(250,250,250,0.95);
  --header-bg-scrolled: rgba(250,250,250,0.97);

  /* ── Container ── */
  --container-max: 960px;
  --container-px:  clamp(1.5rem, 5vw, 3rem);
}
}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; overflow-x: clip; }
  img, video, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  [id] { scroll-margin-top: var(--header-h-sm); }
}

@layer base {
  body {
    font-family:           var(--font-body);
    font-size:             var(--size-body-md);
    font-weight:           400;
    line-height:           1.65;
    color:                 var(--color-text-primary);
    background:            var(--color-surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ── Headings ── */
  h1 {
    font-family:    var(--font-display);
    font-size:      var(--size-h1);
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  h2 {
    font-family:    var(--font-display);
    font-size:      var(--size-h2);
    font-weight:    600;
    line-height:    1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  h3 {
    font-family:    var(--font-display);
    font-size:      var(--size-h3);
    font-weight:    600;
    line-height:    1.2;
    letter-spacing: 0.005em;
  }
  h4 {
    font-family: var(--font-body);
    font-size:   var(--size-h4);
    font-weight: 600;
    line-height: 1.3;
  }
  h5 {
    font-family: var(--font-body);
    font-size:   var(--size-h5);
    font-weight: 500;
    line-height: 1.4;
  }

  /* ── Body text ── */
  p { font-size: var(--size-body-md); line-height: 1.75; max-width: 68ch; }
  .lead { font-size: var(--size-body-xl); font-weight: 300; line-height: 1.5; color: var(--color-text-secondary); }
  .text-sm { font-size: var(--size-body-sm); color: var(--color-text-muted); }
  .text-xs { font-size: var(--size-body-xs); color: var(--color-text-muted); }

  /* ── Overline / label ── */
  .overline {
    font-family:    var(--font-body);
    font-size:      var(--size-body-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--color-text-muted);
  }

  /* ── Focus ── */
  :focus-visible {
    outline:        2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius:  inherit;
    box-shadow:     var(--shadow-focus);
  }

  /* ── Skip link ── */
  .skip-link {
    position:      absolute;
    top:           -100%;
    left:          var(--space-4);
    padding:       var(--space-2) var(--space-4);
    background:    var(--color-surface-elevated);
    color:         var(--color-text-primary);
    border-radius: var(--radius-md);
    font-weight:   600;
    font-size:     var(--size-body-sm);
    z-index:       var(--z-tooltip);
    border:        1px solid var(--color-border-default);
    transition:    top var(--transition-fast);
  }
  .skip-link:focus { top: var(--space-4); }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
      animation-duration:       0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration:      0.01ms !important;
    }
    [data-reveal], [data-reveal-stagger] > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
}

@layer utilities {
  /* ── Container ── */
  .container {
    max-width:       960px;
    margin-inline:   auto;
    padding-inline:  clamp(1.5rem, 5vw, 3rem);
  }

  /* ── Section ── */
  .section { padding-block: var(--section-py); }
  .section--alt { background: var(--color-surface-alt); }
  .section--dark {
    background: var(--color-surface-dark);
    color:      var(--color-text-inverse);
  }
  .section--dark h2, .section--dark h3 { color: var(--color-text-inverse); }
  .section--dark p { color: rgba(255,255,255,0.75); }
  .section--primary {
    background: var(--color-primary);
    color:      var(--color-text-inverse);
  }
  .section--primary h2, .section--primary p { color: var(--color-text-inverse); }
  .section--secondary {
    background: var(--color-secondary);
    color:      var(--color-text-inverse);
  }
  .section--secondary h2, .section--secondary p { color: var(--color-text-inverse); }

  /* ── Grids ── */
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  @media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  @media (min-width: 640px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }

  .grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  @media (min-width: 640px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  }

  .grid-2-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
  }
  @media (min-width: 768px) {
    .grid-2-col { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) {
    .grid-2-col { grid-template-columns: 1fr 1.2fr; }
  }

  /* ── Section header ── */
  .section-header {
    text-align:    center;
    margin-bottom: var(--space-12);
    max-width:     720px;
    margin-inline: auto;
  }
  .section-header .overline { display: block; margin-bottom: var(--space-3); }
  .section-header h2 { margin-bottom: var(--space-4); }
  .section-header p { margin-inline: auto; }

  /* ── Text align ── */
  .text-center { text-align: center; }
  .text-left   { text-align: left; }

  /* ── Visually hidden ── */
  .sr-only {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0,0,0,0);
    white-space: nowrap;
    border:    0;
  }

  /* ── Reveal animations ── */
  [data-reveal] {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity 550ms var(--ease-out-expo), transform 550ms var(--ease-out-expo);
  }
  [data-reveal].is-visible {
    opacity:   1;
    transform: none;
  }
  [data-reveal-stagger] > * {
    opacity:    0;
    transform:  translateY(16px);
    transition: opacity 450ms var(--ease-out-expo), transform 450ms var(--ease-out-expo);
  }
  [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay:   0ms; opacity:1; transform:none; }
  [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay:  70ms; opacity:1; transform:none; }
  [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; opacity:1; transform:none; }
  [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; opacity:1; transform:none; }

  /* ── Breadcrumb ── */
  .breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--size-body-xs);
    color:       var(--color-text-muted);
    padding-block: var(--space-4);
  }
  .breadcrumb a:hover { color: var(--color-primary); }
  .breadcrumb i { font-size: 12px; }

  /* ── Lien discret ── */
  .link-subtle {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--size-body-sm);
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color var(--transition-fast);
  }
  .link-subtle:hover { color: var(--color-primary); }
  .link-subtle i { font-size: 14px; }
}
@layer components {

/* ══════════════════════════════════════
   HEADER & NAVIGATION
══════════════════════════════════════ */
.site-header {
  position:         sticky;
  top:              0;
  left:             0;
  right:            0;
  z-index:          var(--z-sticky);
  height:           var(--header-h);
  background:       var(--header-bg-scrolled);
  border-bottom:    1px solid var(--color-border-subtle);
  transition:       height var(--transition-base), box-shadow var(--transition-slow);
}
.site-header.is-scrolled {
  height:           var(--header-h-sm);
  box-shadow:       0 1px 0 rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}

.header-inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-6);
}

/* Logo */
.header-logo {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
  transition:  transform var(--transition-base);
}
.site-header.is-scrolled .header-logo { transform: scale(0.92); transform-origin: left center; }
.logo-wordmark {
  font-family:    var(--font-display);
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--color-primary);
  letter-spacing: 0.04em;
  line-height:    1.1;
  text-transform: uppercase;
  max-width:      13ch;   /* 2 lignes : « KWANG MYUNG / DOJANG » */
}
.logo-sub {
  font-size:      var(--size-body-xs);
  font-weight:    500;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height:    1.2;
}
.logo-img {
  width:       44px;
  height:      44px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
}
.drawer-logo .logo-img { margin-bottom: var(--space-3); }
.footer-brand .logo-img { width: 56px; height: 56px; margin-bottom: var(--space-2); }

/* Nav desktop */
.header-nav {
  display:     none;
  align-items: center;
  gap:         var(--space-1);
}
@media (min-width: 1024px) {
  .header-nav { display: flex; }
}

/* Reset <button> utilisé comme toggle dropdown */
.nav-dropdown-toggle {
  background: none;
  border:     none;
  font:       inherit;
  cursor:     pointer;
}

.nav-link {
  font-family:  var(--font-body);
  font-size:    var(--size-body-sm);
  font-weight:  500;
  color:        var(--color-text-secondary);
  padding:      var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition:   color var(--transition-fast), background var(--transition-fast);
  white-space:  nowrap;
}
.nav-link:hover  { color: var(--color-primary); background: var(--color-primary-50); }
.nav-link.active { color: var(--color-primary); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display:     flex;
  align-items: center;
  gap:         4px;
  cursor:      pointer;
}
.nav-dropdown-toggle .ti-chevron-down {
  font-size:  12px;
  transition: transform var(--transition-base);
}
.nav-dropdown:hover .ti-chevron-down,
.nav-dropdown:focus-within .ti-chevron-down { transform: rotate(180deg); }

.nav-dropdown-menu {
  position:      absolute;
  top:           calc(100% + var(--space-2));
  left:          0;
  background:    var(--color-surface-elevated);
  border:        1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  min-width:     200px;
  padding:       var(--space-2);
  opacity:       0;
  visibility:    hidden;
  transform:     translateY(-8px);
  transition:    opacity var(--transition-base),
                 visibility var(--transition-base),
                 transform var(--transition-base);
  z-index:       var(--z-dropdown);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}
.nav-dropdown-menu a {
  display:       block;
  padding:       var(--space-2) var(--space-4);
  font-size:     var(--size-body-sm);
  font-weight:   500;
  color:         var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition:    background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown-menu a:hover { background: var(--color-primary-50); color: var(--color-primary); }

/* Header CTA — masqué en mobile (spécificité renforcée pour battre .btn) */
.site-header .header-cta { display: none; }
@media (min-width: 1024px) { .site-header .header-cta { display: inline-flex; } }

/* Burger */
.burger-btn {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            var(--space-1);
  width:          44px;
  height:         44px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        var(--space-2);
  border-radius:  var(--radius-md);
  transition:     background var(--transition-fast);
}
@media (min-width: 1024px) { .burger-btn { display: none; } }
.burger-btn:hover { background: var(--color-surface-hover); }

.burger-line {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--color-text-primary);
  border-radius: 2px;
  transition:    transform var(--transition-base), opacity var(--transition-base);
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.nav-drawer {
  position:   fixed;
  inset:      0;
  z-index:    var(--z-modal);
  display:    flex;
  visibility: hidden;
}
/* Clip the off-canvas panel while closed so translateX(100%) never
   creates a horizontal scroll / white band (visible < 360px). */
.nav-drawer:not(.is-open) { overflow: hidden; }
.nav-drawer.is-open { visibility: visible; }

.nav-drawer-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.45);
  opacity:    0;
  transition: opacity var(--transition-slow);
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }

.nav-drawer-panel {
  position:       relative;
  z-index:        1;
  width:          min(320px, 85vw);
  height:         100%;
  margin-left:    auto;
  background:     var(--color-surface-elevated);
  padding:        var(--space-6);
  overflow-y:     auto;
  transform:      translateX(100%);
  transition:     transform 300ms var(--ease-snappy);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

.drawer-logo {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom:  1px solid var(--color-border-default);
}
.drawer-link {
  display:       block;
  font-family:   var(--font-display);
  font-size:     var(--size-body-lg);
  font-weight:   500;
  color:         var(--color-text-primary);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border-subtle);
  transition:    color var(--transition-fast), background var(--transition-fast);
}
.drawer-link:hover { color: var(--color-primary); background: var(--color-primary-50); }
.drawer-sub {
  font-size:    var(--size-body-md);
  padding-left: var(--space-8);
  color:        var(--color-text-secondary);
}
.drawer-cta { margin-top: var(--space-6); }
.drawer-cta .btn { width: 100%; justify-content: center; }

.drawer-toggle {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  width:          100%;
  text-align:     left;
  cursor:         pointer;
  background:     none;
  border:         0;
  border-bottom:  1px solid var(--color-border-subtle);
}
.drawer-toggle .ti { transition: transform var(--transition-fast); }
.drawer-toggle[aria-expanded="true"] .ti { transform: rotate(180deg); }
.drawer-submenu { display: flex; flex-direction: column; gap: var(--space-2); }
.drawer-submenu[hidden] { display: none; }


/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-2);
  padding:       10px 24px;
  min-height:    44px;
  font-family:   var(--font-body);
  font-size:     var(--size-body-md);
  font-weight:   600;
  line-height:   1;
  border-radius: var(--radius-md);
  border:        2px solid transparent;
  cursor:        pointer;
  transition:    all var(--transition-base);
  white-space:   nowrap;
  max-width:     100%;
  text-decoration: none;
}
/* Under ~400px a long single-line label (nowrap) can grow past the
   viewport and stretch the ICB (white band on the right). Let labels
   wrap instead of overflowing. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: 18px; }

.btn-primary {
  background:   var(--color-primary);
  color:        var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background:   var(--color-primary-600);
  border-color: var(--color-primary-600);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}
.btn-primary:active { background: var(--color-primary-700); transform: scale(0.97); }

.btn-secondary {
  background:   transparent;
  color:        var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-50); transform: translateY(-2px); }

.btn-blue {
  background:   var(--color-secondary);
  color:        var(--color-text-inverse);
  border-color: var(--color-secondary);
}
.btn-blue:hover {
  background:   var(--color-secondary-600);
  border-color: var(--color-secondary-600);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}

.btn-amber {
  background:   var(--color-amber);
  color:        var(--color-text-inverse);
  border-color: var(--color-amber);
}
.btn-amber:hover {
  background:   var(--color-amber-dark);
  border-color: var(--color-amber-dark);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}

.btn-outline-white {
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.7);
}
.btn-outline-white:hover {
  background:   rgba(255,255,255,0.12);
  border-color: #fff;
}

.btn-white {
  background:   var(--color-surface-base);
  color:        var(--color-primary);
  border-color: var(--color-surface-base);
}
.btn-white:hover { background: var(--color-primary-50); transform: translateY(-2px); }

.btn-lg { padding: 14px 32px; min-height: 52px; font-size: var(--size-body-lg); }
.btn-sm { padding: 7px 16px; min-height: 36px; font-size: var(--size-body-sm); }


/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position:    relative;
  overflow:    hidden;
  padding-block: var(--hero-py);
  min-height:  80vh;
  display:     flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
  background: linear-gradient(135deg, #0a0d0f 0%, #12202e 55%, #0a0d0f 100%);
}
.hero-bg::after {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 55% 45% at 70% 50%, rgba(41,83,151,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 55% at 15% 60%, rgba(188,50,43,0.18) 0%, transparent 60%);
}

.hero--short { min-height: 40vh; padding-block: clamp(3rem, 5vw, 6rem); }

.hero-content {
  position: relative;
  z-index:  1;
  color:    var(--color-text-inverse);
}

.hero-eyebrow {
  display:        flex;
  align-items:    center;
  gap:            var(--space-4);
  font-size:      var(--size-body-xs);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          rgba(255,255,255,0.5);
  margin-bottom:  var(--space-5);
}
.hero-eyebrow::before {
  content:    '';
  display:    block;
  width:      32px;
  height:     2px;
  background: var(--color-primary);
  flex-shrink: 0;
}

.hero-content h1 {
  color:         var(--color-text-inverse);
  margin-bottom: var(--space-6);
}
.hero-content h1 em {
  color:      var(--color-primary);
  font-style: normal;
}

.hero-sub {
  font-size:     var(--size-body-lg);
  color:         rgba(255,255,255,0.65);
  margin-bottom: var(--space-10);
  max-width:     52ch;
}

.hero-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

/* ── Hero collage : bannière mosaïque N&B (toutes les pages) ── */
.hero-collage {
  position: absolute; inset: -7%; z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background: #0b1626;               /* fallback si les photos échouent */
}
.hero-collage figure {
  margin: 0; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
.hero-collage img {
  width: 176%; height: 166%; max-width: none; flex-shrink: 0;
  object-fit: cover;
  background: #fff; border: 5px solid #fff; border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  filter: grayscale(100%) contrast(1.05);
}
.hero-collage figure:nth-child(6n+1) img { transform: rotate(-3deg); }
.hero-collage figure:nth-child(6n+2) img { transform: rotate(4deg); }
.hero-collage figure:nth-child(6n+3) img { transform: rotate(-2deg); }
.hero-collage figure:nth-child(6n+4) img { transform: rotate(6deg); }
.hero-collage figure:nth-child(6n+5) img { transform: rotate(-7deg); }
.hero-collage figure:nth-child(6n+6) img { transform: rotate(3deg); }
.hero-collage figure:nth-child(even) { z-index: 2; }
.hero-collage figure:nth-child(3n)   { z-index: 3; }
.hero-collage figure:nth-child(7n)   { z-index: 4; }
.hero-collage::after {
  content: ""; position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(120deg, rgba(11,22,38,0.94) 0%, rgba(11,22,38,0.74) 42%, rgba(11,22,38,0.5) 100%);
}

/* Heros courts (pages intérieures) : demi-densité, tuiles mieux proportionnées */
.hero--short .hero-collage { grid-template-rows: repeat(2, 1fr); }
.hero--short .hero-collage figure:nth-child(n+13) { display: none; }

@media (max-width: 768px) {
  .hero-collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
  .hero-collage img { width: 178%; height: 168%; }
  .hero--short .hero-collage { grid-template-rows: repeat(3, 1fr); }
}


/* ══════════════════════════════════════
   STRIPS (bandes pleine largeur)
══════════════════════════════════════ */
.strip {
  padding-block: var(--space-6);
}
.strip--red    { background: var(--color-primary); }
.strip--blue   { background: var(--color-secondary); }
.strip--amber  { background: var(--color-amber); }
.strip--dark   { background: var(--color-surface-dark); }

.strip-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-6);
  flex-wrap:       wrap;
}
.strip-inner p {
  color:       var(--color-text-inverse);
  font-size:   var(--size-body-md);
  font-weight: 500;
  max-width:   none;
  margin:      0;
}


/* ══════════════════════════════════════
   DISCIPLINE CARDS
══════════════════════════════════════ */
.discipline-card {
  background:    var(--color-surface-elevated);
  border:        1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-4);
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--transition-base), box-shadow var(--transition-base);
  container-type: inline-size;
}
.discipline-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--color-primary);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.discipline-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.discipline-card:hover::before { transform: scaleX(1); }

.card-icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--radius-lg);
  background:      var(--color-primary-50);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       24px;
  color:           var(--color-primary);
  flex-shrink:     0;
}

.discipline-card h3 { margin: 0; font-size: var(--size-h4); }
.discipline-card p  { margin: 0; font-size: var(--size-body-sm); color: var(--color-text-secondary); flex: 1; }

/* Cartes discipline avec photo (page cours particuliers) */
.discipline-card--photo { padding: 0; overflow: hidden; gap: 0; }
.discipline-card--photo .discipline-card-photo {
  aspect-ratio: 4 / 3; position: relative;
  background: linear-gradient(135deg, #12202e, #1a3050);
}
.discipline-card--photo .discipline-card-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.03);
}
.discipline-card--photo .ph-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); font-size: 2.75rem;
}
.discipline-card--photo .discipline-card-body {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}

/* Tarifs & prise de rendez-vous (cours particuliers) */
.cp-rdv h3, .cp-tarif-card h3 { font-size: var(--size-h5); margin: 0 0 var(--space-4); }
.cp-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.cp-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-secondary); }
.cp-list i { color: var(--color-primary); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.cp-tarif-card {
  background: var(--color-surface-alt); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5);
}
.cp-price-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.cp-price-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-default);
}
.cp-price-list li:last-child { border-bottom: none; }
.cp-price-list strong { font-family: var(--font-display); font-size: var(--size-h5); color: var(--color-primary); white-space: nowrap; }
.cp-price--reco em { font-style: normal; color: var(--color-primary); font-weight: 600; font-size: var(--size-body-xs); }
.cp-payment { color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.cp-iban { color: var(--color-text-muted); margin-top: var(--space-4); font-variant-numeric: tabular-nums; }

.card-link {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--size-body-sm);
  font-weight: 600;
  color:       var(--color-primary);
}
.card-link i { transition: transform var(--transition-fast); }
.card-link:hover i { transform: translateX(4px); }


/* ══════════════════════════════════════
   PROFIL / SABOMNIM
══════════════════════════════════════ */
.profil-img-wrap {
  border-radius: var(--radius-xl);
  overflow:      hidden;
  background:    linear-gradient(135deg, #12202e, #1a3050);
  aspect-ratio:  4/5;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(255,255,255,0.15);
  font-size:     4rem;
}

.profil-img-wrap { position: relative; margin: 0; }
.profil-img-wrap .profil-photo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.grade-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  border-radius:   var(--radius-full);
  font-size:       var(--size-body-xs);
  font-weight:     600;
  background:      var(--color-primary-50);
  color:           var(--color-primary-800);
  border:          1px solid var(--color-primary-100);
  margin-inline-end: var(--space-2);
  margin-bottom:   var(--space-2);
}
.grade-badge--blue {
  background: var(--color-secondary-50);
  color:      var(--color-secondary-800);
  border-color: var(--color-secondary-100);
}


/* ══════════════════════════════════════
   REASSURANCE / BLOCS ICÔNE
══════════════════════════════════════ */
.reassurance-item {
  text-align:     center;
  padding:        var(--space-8);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}
.reassurance-icon {
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-xl);
  background:      var(--color-primary-50);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  color:           var(--color-primary);
  flex-shrink:     0;
}
.reassurance-item h2 { font-size: var(--size-h5); margin: 0; }
.reassurance-item p  { font-size: var(--size-body-sm); color: var(--color-text-secondary); margin: 0; max-width: 28ch; }


/* ══════════════════════════════════════
   SPEC GRID (grades, formats, etc.)
══════════════════════════════════════ */
.spec-item {
  background:    var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  text-align:    center;
}
.spec-item .overline { margin-bottom: var(--space-2); display: block; }
.spec-item strong {
  font-family: var(--font-display);
  font-size:   var(--size-h5);
  font-weight: 600;
  color:       var(--color-text-primary);
}

/* ── Grades du Maître : grille de dans + bande diplôme ── */
.dan-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2×2 sur mobile : compact */
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .dan-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.dan-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dan-cell::before {           /* filet rouge haut, signature premium */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0.4);
  transition: transform var(--transition-slow);
}
.dan-cell:hover::before { transform: scaleX(1); }
.dan-cell__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 3.75rem);
  line-height: 0.9;
  color: var(--color-primary);
}
.dan-cell__num sup { font-size: 0.4em; top: -0.7em; }
.dan-cell__label {
  margin-top: var(--space-1);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}
.dan-cell__disc {
  margin-top: var(--space-3);
  font-size: var(--size-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.maitre-diploma {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #12202e, #1a3050);
  color: #fff;
}
.maitre-diploma .diploma-item { display: flex; align-items: center; gap: var(--space-4); }
.maitre-diploma i { font-size: 2rem; color: #fff; opacity: 0.85; flex-shrink: 0; }
.maitre-diploma strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-h5);
  font-weight: 600;
}
.maitre-diploma span { font-size: var(--size-body-sm); color: rgba(255,255,255,0.6); }
.diploma-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.15); }
@media (max-width: 768px) {
  .maitre-diploma { flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); }
  .maitre-diploma .diploma-item { width: 100%; }
  .diploma-sep { width: 100%; height: 1px; align-self: auto; }
}

/* ── Bande chiffres / crédibilité du Maître ── */
.maitre-stats {
  background: linear-gradient(135deg, #12202e, #1a3050);
  color: #fff;
}
.maitre-stats .section-header h2 { color: #fff; }
.maitre-stats .overline { color: var(--color-primary); }
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-10);
}
.stat-card { flex: 0 1 220px; text-align: center; }
.stat-num {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8vw, 4rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-plus { color: var(--color-primary); margin-right: 0.05em; }
.stat-label {
  display: block;
  margin: var(--space-3) auto 0;
  max-width: 24ch;
  font-size: var(--size-body-sm);
  line-height: 1.45;
  color: rgba(255,255,255,0.65);
}


/* ══════════════════════════════════════
   NIVEAUX (2 blocs côte à côte)
══════════════════════════════════════ */
.niveau-card {
  background:    var(--color-surface-elevated);
  border:        1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-4);
}
.niveau-card-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}
.niveau-icon {
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-lg);
  background:      var(--color-primary-50);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  color:           var(--color-primary);
  flex-shrink:     0;
}
.niveau-card h3 { font-size: var(--size-h5); margin: 0; }
.niveau-card p  { font-size: var(--size-body-sm); color: var(--color-text-secondary); margin: 0; }


/* ══════════════════════════════════════
   TABLEAU HORAIRES
══════════════════════════════════════ */
.table-wrapper {
  overflow-x:    auto;
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-border-default);
}
table {
  width:           100%;
  border-collapse: collapse;
  table-layout:    auto;
}
thead th {
  padding:        var(--space-3) var(--space-4);
  background:     var(--color-surface-alt);
  font-family:    var(--font-body);
  font-size:      var(--size-body-xs);
  font-weight:    600;
  text-align:     left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-text-muted);
  border-bottom:  1px solid var(--color-border-default);
  white-space:    nowrap;
}
tbody tr { border-bottom: 1px solid var(--color-border-subtle); transition: background var(--transition-fast); }
tbody tr:hover { background: var(--color-surface-hover); }
tbody tr:last-child { border-bottom: none; }
td {
  padding:       var(--space-4);
  font-size:     var(--size-body-sm);
  color:         var(--color-text-primary);
  vertical-align: middle;
}
tbody th[scope="row"] { vertical-align: middle; }

/* Mobile : tableaux compacts, heures sur une seule ligne */
@media (max-width: 480px) {
  td, tbody th[scope="row"] { padding: var(--space-3) var(--space-2); font-size: 0.85rem; }
  thead th { padding: var(--space-2); }
  td[style*="tabular-nums"] { white-space: nowrap; }
}

.table-placeholder {
  padding:       var(--space-12) var(--space-6);
  text-align:    center;
  color:         var(--color-text-muted);
  font-size:     var(--size-body-sm);
  border:        2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
}


/* ══════════════════════════════════════
   FORMULAIRES
══════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap:    var(--space-5);
}
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }

.field-label {
  font-size:   var(--size-body-sm);
  font-weight: 500;
  color:       var(--color-text-primary);
}
.field-required { color: var(--color-error); margin-inline-start: 2px; }

.form-input,
.form-select,
.form-textarea {
  width:         100%;
  min-height:    48px;
  padding:       0 var(--space-4);
  font-family:   var(--font-body);
  font-size:     var(--size-body-md);
  color:         var(--color-text-primary);
  background:    var(--color-surface-base);
  border:        1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-textarea {
  min-height: 140px;
  padding:    var(--space-3) var(--space-4);
  resize:     vertical;
}
.form-select { appearance: none; cursor: pointer; padding-right: var(--space-10); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }
.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--color-border-strong); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-border-brand);
  box-shadow:   var(--shadow-focus);
}
.form-input.error { border-color: var(--color-error); }

@media (max-width: 767px) {
  .form-input, .form-select, .form-textarea { min-height: 56px; }
}

.field-error {
  font-size:   var(--size-body-xs);
  color:       var(--color-error);
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}
.field-error::before { content: '⚠'; font-size: 11px; }
.field-error[hidden] { display: none; } /* display:flex ci-dessus écraserait le [hidden] natif */

.form-error-summary {
  padding:       var(--space-4) var(--space-6);
  background:    var(--color-error-light);
  border:        1px solid var(--color-error);
  border-radius: var(--radius-lg);
  color:         var(--color-error-dark);
  font-size:     var(--size-body-sm);
  margin-bottom: var(--space-6);
}
.form-error-summary:focus { outline: 2px solid var(--color-error); }

.form-success {
  padding:       var(--space-8);
  background:    var(--color-success-light);
  border-radius: var(--radius-lg);
  text-align:    center;
  color:         var(--color-success-dark);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-2);
}
.form-success i { font-size: 40px; }
.form-success strong { font-size: var(--size-body-lg); font-weight: 600; }
.form-success p { margin: 0; max-width: 46ch; font-size: var(--size-body-sm); opacity: 0.85; }

.form-error-msg {
  padding:       var(--space-5);
  background:    var(--color-error-light, #fdecec);
  border-radius: var(--radius-lg);
  text-align:    center;
  color:         var(--color-error-dark, #a12020);
  font-size:     var(--size-body-sm);
}

.form-honeypot { display: none !important; }


/* ══════════════════════════════════════
   CARTE CONTACT / LOCALISATION
══════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap:    var(--space-12);
  align-items: start;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; }
}

.contact-info-item {
  display:     flex;
  gap:         var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.contact-info-icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  background:      var(--color-primary-50);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-primary);
  font-size:       20px;
  flex-shrink:     0;
}
.contact-info-item h3 { font-size: var(--size-body-md); margin-bottom: var(--space-1); }
.contact-info-item p,
.contact-info-item a  { font-size: var(--size-body-sm); color: var(--color-text-secondary); }
.contact-info-item a:hover { color: var(--color-primary); }

.map-container {
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  border:        1px solid var(--color-border-default);
}
.map-placeholder {
  background:      var(--color-surface-alt);
  height:          360px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  color:           var(--color-text-muted);
  border-radius:   var(--radius-xl);
}
.map-placeholder i { font-size: 48px; color: var(--color-primary); opacity: 0.5; }


/* ══════════════════════════════════════
   CTA SECTIONS PLEINE LARGEUR
══════════════════════════════════════ */
.cta-section {
  padding-block: var(--space-20);
  text-align:    center;
}
.cta-section h2 { color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.cta-section p  { color: rgba(255,255,255,0.8); margin-bottom: var(--space-8); margin-inline: auto; max-width: 52ch; }
.cta-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-4);
}


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
  background:    var(--color-surface-dark);
  color:         rgba(255,255,255,0.65);
  padding-top:   var(--section-py);
  padding-bottom: var(--space-8);
}
.footer-grid {
  display:       grid;
  grid-template-columns: 1fr;
  gap:           var(--space-12);
  margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-brand .logo-wordmark { color: var(--color-text-inverse); font-size: 1.25rem; max-width: 14ch; }
.footer-brand .logo-sub { color: rgba(255,255,255,0.4); }
.footer-brand p { font-size: var(--size-body-sm); max-width: 32ch; color: rgba(255,255,255,0.55); }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  font-size: 1.3rem;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.footer-social a:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

.footer-contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2);
  font-size:   var(--size-body-sm);
  color:       rgba(255,255,255,0.55);
}
.footer-contact-item i { color: var(--color-primary); margin-top: 2px; font-size: 16px; }
.footer-contact-item a:hover { color: #fff; }

.footer-col h2 {
  font-family:    var(--font-body);
  font-size:      var(--size-body-xs);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col ul a {
  font-size:  var(--size-body-sm);
  color:      rgba(255,255,255,0.55);
  transition: color var(--transition-fast);
}
.footer-col ul a:hover { color: #fff; }

.footer-bottom {
  border-top:  1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-6);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         var(--space-4);
  font-size:   var(--size-body-xs);
  color:       rgba(255,255,255,0.3);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.65); }


/* ══════════════════════════════════════
   PAGES PROFONDES — PRATIQUE
══════════════════════════════════════ */
.pratique-section {
  max-width:  800px;
  margin-inline: auto;
}
.pratique-section + .pratique-section { margin-top: var(--space-12); }

.pratique-block {
  padding:       var(--space-8);
  background:    var(--color-surface-elevated);
  border:        1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}
.pratique-block h2 {
  font-size:     var(--size-h4);
  color:         var(--color-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom:  1px solid var(--color-border-subtle);
}
.pratique-block p { margin-bottom: var(--space-4); }
.pratique-block p:last-child { margin-bottom: 0; }

.filiation-placeholder {
  padding:       var(--space-6);
  border:        2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  text-align:    center;
  color:         var(--color-text-muted);
  font-size:     var(--size-body-sm);
  font-style:    italic;
}

/* ══════════════════════════════════════
   UTILITAIRES INLINE → CSS
══════════════════════════════════════ */
.badges-row {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  margin-block: var(--space-6);
}

.sabomnim-actions {
  margin-top:  var(--space-8);
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
  flex-wrap:   wrap;
}

.strip--center-content {
  text-align:   center;
  padding-block: var(--space-12);
}
.strip--center-content h2 {
  color:         var(--color-text-inverse);
  margin-bottom: var(--space-4);
}
.strip--center-content p {
  color:          rgba(255,255,255,0.8);
  margin-bottom:  var(--space-8);
  margin-inline:  auto;
}

.flex-noshrink { flex-shrink: 0; }


/* ══════════════════════════════════════
   BANDE DÉCORATIVE (délimitation hero)
══════════════════════════════════════ */
.strip-deco {
  height:     4px;
  background: var(--color-primary);
}


/* ══════════════════════════════════════
   HOOK SECTION (stats pont hero→disciplines)
══════════════════════════════════════ */
.hook-section {
  padding-block: var(--space-10);
  background:    var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-default);
}

.hook-stats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-5);
  flex-wrap:       wrap;
}

.hook-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-1);
  text-align:     center;
}

.hook-stat-value {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    700;
  color:          var(--color-primary);
  line-height:    1;
}

.hook-stat-value sup {
  font-size:      0.55em;
  vertical-align: super;
}

.hook-stat-label {
  font-size:      var(--size-body-xs);
  font-weight:    500;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space:    nowrap;   /* pas de coupure des libellés sur desktop */
}

.hook-sep {
  width:      1px;
  height:     48px;
  background: var(--color-border-default);
  flex-shrink: 0;
}

/* Sous ~860px (tablette / fenêtre étroite) : empilement vertical propre,
   plutôt qu'un retour à la ligne bancal. Au-dessus : tout sur une ligne. */
@media (max-width: 860px) {
  .hook-stats { flex-direction: column; gap: var(--space-5); }
  .hook-sep { display: none; }
  .hook-stat-label { white-space: normal; }
}


/* ══════════════════════════════════════
   DISCIPLINE ROWS (alternées)
══════════════════════════════════════ */
.disciplines-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-16);
  margin-top:     var(--space-12);
}

.discipline-row {
  display:                 grid;
  grid-template-columns:   1fr 1fr;
  gap:                     var(--space-12);
  align-items:             center;
}

.discipline-row--reverse {
  direction: rtl;
}
.discipline-row--reverse > * {
  direction: ltr;
}

.discipline-row-img {
  aspect-ratio:    4 / 3;
  border-radius:   var(--radius-xl);
  background:      linear-gradient(135deg, #12202e, #1a3050);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       4rem;
  color:           rgba(255,255,255,0.2);
  overflow:        hidden;
}

.discipline-row-img--blue {
  background: linear-gradient(135deg, #102244, #1b3a6e);
}

.discipline-row-img img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
}

.discipline-row-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

/* Kyusho — pas de photo : bloc centré cohérent avec les autres rangées */
.discipline-row--full { grid-template-columns: 1fr; }
.discipline-row-content--center {
  align-items:   center;
  text-align:    center;
  max-width:     640px;
  margin-inline: auto;
}
.discipline-row-content--center p { max-width: none; }
.discipline-feature-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #102244, #1b3a6e);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-2);
}

.discipline-row-content .overline { margin-bottom: 0; }

.discipline-row-content h3 {
  font-size:   var(--size-h3);
  margin:      0;
  line-height: 1.1;
}

.discipline-row-content p {
  font-size: var(--size-body-md);
  color:     var(--color-text-secondary);
  margin:    0;
  max-width: 52ch;
}

@media (max-width: 768px) {
  .discipline-row,
  .discipline-row--reverse {
    grid-template-columns: 1fr;
    direction:             ltr;
    gap:                   var(--space-6);
  }
}


/* ══════════════════════════════════════
   COUNTER GRID (grades animés)
══════════════════════════════════════ */
.counter-grid {
  display:      flex;
  flex-wrap:    wrap;
  gap:          var(--space-3);
  margin-block: var(--space-6);
}

.counter-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  padding:        var(--space-4) var(--space-5);
  background:     var(--color-primary-50);
  border:         1px solid var(--color-primary-100);
  border-radius:  var(--radius-lg);
}

.counter-item--wide {
  flex-direction: row;
  align-items:    center;
  gap:            var(--space-3);
  flex:           1 1 100%;
}

.counter-number {
  font-family: var(--font-display);
  font-size:   clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color:       var(--color-primary);
  line-height: 1;
}

.counter-number sup {
  font-size:      0.5em;
  vertical-align: super;
}

.counter-label {
  font-size:      var(--size-body-xs);
  font-weight:    600;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ══════════════════════════════════════
   AVIS / TÉMOIGNAGES
══════════════════════════════════════ */
.avis-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-6);
  margin-top:            var(--space-10);
}

@media (max-width: 768px) {
  .avis-grid { grid-template-columns: 1fr; }
}

.avis-card {
  background:     var(--color-surface-elevated);
  border:         1px solid var(--color-border-default);
  border-radius:  var(--radius-xl);
  padding:        var(--space-8);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  position:       relative;
  margin:         0;
}

.avis-card::before {
  content:        '\201C';
  font-family:    var(--font-display);
  font-size:      4rem;
  line-height:    1;
  color:          var(--color-primary-200);
  position:       absolute;
  top:            var(--space-4);
  left:           var(--space-6);
  pointer-events: none;
}

.avis-card p {
  font-size:   var(--size-body-md);
  color:       var(--color-text-secondary);
  line-height: 1.65;
  margin:      0;
  padding-top: var(--space-6);
  max-width:   none;
}

.avis-card footer {
  margin-top:  auto;
  padding-top: var(--space-4);
  border-top:  1px solid var(--color-border-subtle);
}

.avis-card cite {
  font-style:  normal;
  font-weight: 600;
  font-size:   var(--size-body-sm);
  color:       var(--color-text-primary);
}


/* ══════════════════════════════════════
   FAQ ACCORDÉON
══════════════════════════════════════ */
.faq-list {
  max-width:  780px;
  margin-top: var(--space-10);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-default);
}

.faq-question {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-6) 0;
  background:      none;
  border:          none;
  cursor:          pointer;
  font-family:     var(--font-body);
  font-size:       var(--size-body-lg);
  font-weight:     600;
  color:           var(--color-text-primary);
  text-align:      left;
  transition:      color var(--transition-fast);
}

.faq-question:hover { color: var(--color-primary); }

.faq-question .ti-chevron-down {
  font-size:   20px;
  color:       var(--color-text-muted);
  flex-shrink: 0;
  transition:  transform var(--transition-base), color var(--transition-fast);
}

.faq-item.is-open .faq-question { color: var(--color-primary); }
.faq-item.is-open .faq-question .ti-chevron-down {
  transform: rotate(180deg);
  color:     var(--color-primary);
}

.faq-answer[hidden] { display: none; }

.faq-answer p {
  padding-bottom: var(--space-6);
  font-size:      var(--size-body-md);
  color:          var(--color-text-secondary);
  line-height:    1.7;
  margin:         0;
  max-width:      68ch;
}


/* ══════════════════════════════════════
   HAPKIDO PRATIQUE
══════════════════════════════════════ */

.pratique-techniques {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.pratique-technique-block {
  padding: var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.pratique-technique-block h3 {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.technique-korean {
  color: var(--color-primary);
}

.technique-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Grades grid */
.grades-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
  max-width: 900px;
}

.grade-level {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.grade-level--dan {
  border-color: var(--color-text);
  background: var(--color-surface-raised);
}

.grade-belt {
  width: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  align-self: stretch;
  min-height: 60px;
}

.grade-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.grade-rank {
  font-family: var(--font-heading);
  font-size: var(--size-body-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.grade-name {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: 700;
  color: var(--color-text);
}

.grade-desc {
  font-size: var(--size-body-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════
   MENTIONS LÉGALES
══════════════════════════════════════ */
.mentions-content {
  max-width: 720px;
}
.mentions-content h2 {
  font-size:     var(--size-h5);
  margin-top:    var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}
.mentions-content h2:first-child { margin-top: 0; }
.mentions-content p { margin-bottom: var(--space-4); }

/* ══════════════════════════════════════
   PAGES DISCIPLINE — composants landing
══════════════════════════════════════ */

/* Lien "En savoir plus sur la pratique" */
.link-pratique {
  color: #1a56a0;
  font-weight: 500;
  text-decoration: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-body-sm);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.link-pratique:hover { color: #1e40af; text-decoration: underline; }
.link-pratique:focus-visible { outline: 2px solid #1a56a0; outline-offset: 2px; border-radius: var(--radius-sm); }

/* Pitch 2 colonnes */
.pitch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 768px) { .pitch-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }

.pitch-points { display: flex; flex-direction: column; gap: var(--space-5); }

.pitch-point { display: flex; gap: var(--space-4); align-items: flex-start; }

.pitch-point-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: #fff1f1;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); font-size: 1.125rem;
}

.pitch-point-body h3 { font-size: var(--size-body-md); font-weight: 600; margin-bottom: var(--space-1); }
.pitch-point-body p { font-size: var(--size-body-sm); color: var(--color-text-muted); line-height: 1.6; }

/* Techniques grid */
.techniques-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
@media (min-width: 640px) { .techniques-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .techniques-grid { grid-template-columns: repeat(4, 1fr); } }

.technique-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); overflow: hidden;
}
.technique-img {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2); color: var(--color-text-muted);
  font-size: var(--size-body-xs);
  border-bottom: 1px solid var(--color-border-default);
}
.technique-img i { font-size: 2rem; opacity: 0.35; }
.technique-img { position: relative; overflow: hidden; }
.technique-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.technique-body { padding: var(--space-4) var(--space-5); }
.technique-body h3 { font-size: var(--size-body-md); font-weight: 600; margin-bottom: var(--space-1); }
.technique-body p { font-size: var(--size-body-sm); color: var(--color-text-muted); line-height: 1.55; }
.technique-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-2);
}

/* Section maître split */
.maitre-split {
  display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center;
}
@media (min-width: 768px) { .maitre-split { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }

.maitre-photo-placeholder {
  aspect-ratio: 3 / 4;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3); color: var(--color-text-muted); font-size: var(--size-body-sm);
}
.maitre-photo-placeholder i { font-size: 3rem; opacity: 0.25; }
.maitre-photo-placeholder { position: relative; overflow: hidden; }
.maitre-photo-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dan-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.dan-badge {
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-size: var(--size-body-xs); font-weight: 600; color: var(--color-text-muted);
}
.dan-badge--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Témoignage featured */
.testimonial-featured { max-width: 680px; margin: 0 auto; text-align: center; padding: var(--space-10) 0; }
.testimonial-featured blockquote {
  font-size: var(--size-h4); font-weight: 300; line-height: 1.6;
  color: var(--color-text-primary); position: relative; padding: 0 var(--space-6);
}
.testimonial-featured blockquote::before {
  content: '\201C'; position: absolute; left: -0.1em; top: -0.2em;
  font-size: 5rem; line-height: 1; color: var(--color-primary); opacity: 0.2;
  font-family: Georgia, serif;
}
.testimonial-featured cite {
  display: block; margin-top: var(--space-4);
  font-size: var(--size-body-sm); font-style: normal;
  font-weight: 600; color: var(--color-text-muted);
}
.testimonial-featured cite::before { content: '— '; }

} /* end @layer components */

/* Bio du Maître : photo alignée en haut et sticky face au long texte.
   Hors @layer pour battre .grid-2-col { align-items:center } (layer utilities). */
@media (min-width: 768px) {
  [aria-labelledby="maitre-bio"] .grid-2-col { align-items: start; }
  [aria-labelledby="maitre-bio"] .profil-img-wrap {
    position: sticky;
    top:      calc(var(--header-h) + var(--space-6));
  }
}

@font-face{font-family:"tabler-icons";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/tabler-icons-subset.woff2") format("woff2")}.ti{font-family:"tabler-icons"!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block}.ti-adjustments:before{content:"\ea03"}.ti-align-center:before{content:"\ea07"}.ti-arrow-left:before{content:"\ea19"}.ti-arrow-right:before{content:"\ea1f"}.ti-book:before{content:"\ea39"}.ti-brain:before{content:"\f59f"}.ti-brand-facebook:before{content:"\ec1a"}.ti-brand-instagram:before{content:"\ec20"}.ti-building:before{content:"\ea4f"}.ti-building-community:before{content:"\ebf6"}.ti-calendar:before{content:"\ea53"}.ti-calendar-check:before{content:"\f824"}.ti-calendar-event:before{content:"\ea52"}.ti-certificate:before{content:"\ed76"}.ti-chevron-down:before{content:"\ea5f"}.ti-circle-check:before{content:"\ea67"}.ti-clock:before{content:"\ea70"}.ti-door:before{content:"\ef4e"}.ti-download:before{content:"\ea96"}.ti-focus:before{content:"\eb8d"}.ti-hand-finger:before{content:"\ee94"}.ti-home:before{content:"\eac1"}.ti-info-circle:before{content:"\eac5"}.ti-layout-grid:before{content:"\edba"}.ti-mail:before{content:"\eae5"}.ti-map-pin:before{content:"\eae8"}.ti-package:before{content:"\eaff"}.ti-phone:before{content:"\eb09"}.ti-puzzle:before{content:"\eb10"}.ti-repeat:before{content:"\eb72"}.ti-send:before{content:"\eb1e"}.ti-shield:before{content:"\eb24"}.ti-shield-check:before{content:"\eb22"}.ti-shirt:before{content:"\ec0a"}.ti-star:before{content:"\eb2e"}.ti-train:before{content:"\ed96"}.ti-trophy:before{content:"\eb45"}.ti-user:before{content:"\eb4d"}.ti-user-star:before{content:"\f7d1"}.ti-users:before{content:"\ebf2"}.ti-wave-sine:before{content:"\ecd4"}.ti-weight:before{content:"\f589"}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/inter-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/inter-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/oswald-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/oswald-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/oswald-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/oswald-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}