/*
Theme Name: Salary Net Theme
Theme URI: https://votresite.fr
Author: VotreSite
Author URI: https://votresite.fr
Description: Thème WordPress optimisé SEO pour calculateur salaire brut en net. Design rapide, responsive, compatible Core Web Vitals.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salary-net-theme
Tags: calculator, salary, seo, responsive, fast
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Couleurs principales */
  --color-primary:       #0052CC;
  --color-primary-dark:  #003D99;
  --color-primary-light: #E6F0FF;
  --color-accent:        #00875A;
  --color-accent-light:  #E3FCEF;
  --color-warning:       #FF8B00;
  --color-danger:        #DE350B;

  /* Neutres */
  --color-bg:            #F4F5F7;
  --color-surface:       #FFFFFF;
  --color-border:        #DFE1E6;
  --color-border-focus:  #4C9AFF;
  --color-text:          #172B4D;
  --color-text-secondary:#5E6C84;
  --color-text-muted:    #97A0AF;

  /* Typographie */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Tailles */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --container-max:  1200px;
  --container-wide: 1400px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);

  /* Transitions */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-primary-dark); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin-bottom: var(--space-4); color: var(--color-text-secondary); line-height: 1.75; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--wide { max-width: var(--container-wide); }

.section { padding: var(--space-16) 0; }
.section--sm { padding: var(--space-10) 0; }
.section--lg { padding: var(--space-20) 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

#logo {
  flex-shrink: 0;
}

/* Le header est un flex row : logo | nav | search */
#masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo__icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 800;
}
.site-logo__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.1;
}
.site-logo__text span { color: var(--color-primary); }

/* ============================================================
   NAVIGATION PRINCIPALE
   Cible les vraies classes générées par WP + SNT_Nav_Walker :
   #navbar > nav > div.menu-principal-container > ul.nav-menu > li.menu-item
   ============================================================ */

#navbar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  min-width: 0; /* permet le rétrécissement */
  overflow: visible;
}

.navigation.main-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}

/* Container du menu WP */
.menu-principal-container {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* La liste UL principale */
ul.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque item de menu */
ul.nav-menu > li.menu-item {
  position: relative;
  list-style: none;
}

/* Wrapper div[itemprop="url"] autour du lien - pass-through */
ul.nav-menu li > div[itemprop="url"] {
  display: contents;
}

/* Lien principal */
ul.nav-menu > li.menu-item > div[itemprop="url"] > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

/* État hover et page active */
ul.nav-menu > li.menu-item > div[itemprop="url"] > a:hover,
ul.nav-menu > li.menu-item.current-menu-item > div[itemprop="url"] > a,
ul.nav-menu > li.menu-item.current-menu-ancestor > div[itemprop="url"] > a,
ul.nav-menu > li.menu-item.current-menu-parent > div[itemprop="url"] > a {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Chevron sur items avec enfants */
ul.nav-menu > li.menu-item-has-children > div[itemprop="url"] > a::after {
  content: '▾';
  font-size: 10px;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.2s;
  opacity: 0.6;
}
ul.nav-menu > li.menu-item-has-children:hover > div[itemprop="url"] > a::after,
ul.nav-menu > li.menu-item-has-children.open > div[itemprop="url"] > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* ============================================================
   DROPDOWN — sub-menu (ul.sub-menu)
   ============================================================ */
ul.nav-menu > li.menu-item-has-children > ul.sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: var(--space-2) 0;
  z-index: 500;
  flex-direction: column;
  list-style: none;
  margin: 0;
  /* Animation subtile */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

/* Ouverture hover desktop uniquement */
@media (min-width: 900px) {
  ul.nav-menu > li.menu-item-has-children:hover > ul.sub-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Ouverture JS mobile (classe open) */
ul.nav-menu > li.menu-item-has-children.open > ul.sub-menu {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Liens du sous-menu */
ul.sub-menu > li.menu-item {
  list-style: none;
}
ul.sub-menu > li > div[itemprop="url"] > a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}
ul.sub-menu > li > div[itemprop="url"] > a:hover,
ul.sub-menu > li.current-menu-item > div[itemprop="url"] > a {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding-left: 20px;
}

/* Séparateur optionnel entre items du submenu */
ul.sub-menu > li + li {
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* ============================================================
   FORMULAIRE DE RECHERCHE dans le header
   ============================================================ */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 4px 4px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,82,204,0.12);
}
.search-field {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  width: 140px;
  transition: width 0.3s ease;
}
.search-field:focus { width: 200px; }
.search-field::placeholder { color: var(--color-text-muted); }
.search-submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-submit:hover { background: var(--color-primary-dark); }

/* ============================================================
   HAMBURGER — visible en mobile uniquement
   ============================================================ */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  /* Supprime le délai 300ms sur iOS/Android */
  touch-action: manipulation;
  /* Reset styles natifs du <button> */
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  font-family: inherit;
}
.menu-toggle:hover { background: var(--color-bg); }
.menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Animation hamburger → X */
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   TABLETTE — 900px–1100px : nav compacte
   ============================================================ */
@media (max-width: 1100px) {
  ul.nav-menu > li.menu-item > div[itemprop="url"] > a {
    padding: 7px 9px;
    font-size: 13px;
  }
  .search-field { width: 110px; }
  .search-field:focus { width: 150px; }
}

/* ============================================================
   MOBILE — panneau vertical
   ============================================================ */
@media (max-width: 899px) {
  /* Par défaut : panneau caché */
  .menu-principal-container {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: var(--space-4) var(--space-5);
    overflow-y: auto;
    /* Fix iOS Safari : le scroll interne fonctionne même avec body:fixed */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 900;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Panneau ouvert via JS (toggle .open sur .menu-principal-container) */
  .menu-principal-container.open {
    display: flex !important;
  }

  /* Montrer le hamburger */
  .menu-toggle { display: flex; }

  /* Cacher la recherche dans le header */
  .search-form { display: none; }

  /* Items liste principale */
  ul.nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  ul.nav-menu > li.menu-item {
    width: 100%;
  }

  ul.nav-menu > li.menu-item > div[itemprop="url"] > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }

  /* Submenu mobile : statique et indenté */
  ul.sub-menu {
    position: static !important;
    display: none;
    flex-direction: column !important;
    background: var(--color-bg) !important;
    border: none !important;
    border-left: 3px solid var(--color-primary-light) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: var(--space-2) 0 var(--space-2) var(--space-3) !important;
    margin-left: var(--space-5) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  ul.nav-menu > li.menu-item-has-children.open > ul.sub-menu {
    display: flex !important;
  }

  ul.sub-menu > li > div[itemprop="url"] > a {
    padding: 9px 12px;
    font-size: 13.5px;
  }

  /* Skip link dupliqué dans nav : masqué */
  nav .skip-link { display: none; }
}


/* ============================================================
   BREADCRUMB — masqué (désactivé)
   ============================================================ */
.breadcrumb-bar { display: none !important; } /* sécurité si affiché par un plugin */
.breadcrumb-bar-DISABLED {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { color: var(--color-border); }
.breadcrumb__current { color: var(--color-text-secondary); font-weight: 500; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #001A6E 0%, #0052CC 50%, #0747A6 100%);
  padding: var(--space-8) 0 var(--space-12); /* ↓ était var(--space-12) 0 var(--space-16) */
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,135,90,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

/* hero__inner : voir règle complète dans le bloc "Calculateur intégré" ci-dessous */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.hero__badge::before { content: '✦'; font-size: 10px; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);   /* compact : ↓ était clamp(1.5rem, 3.5vw, 2.5rem) */
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.hero__title span { color: #4FC3F7; }

.hero__subtitle {
  font-size: 0.875rem;                     /* compact : ↓ était 1rem */
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-4);
  max-width: 520px;
  line-height: 1.5;
}

.hero__stats {
  display: flex;
  gap: var(--space-6);                     /* ↓ était var(--space-8) */
  flex-wrap: wrap;
}
.hero__stat { text-align: center; }
.hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;                       /* compact : ↓ était 1.25rem */
  font-weight: 800;
  color: #fff;
}
/* hero__stat-label — couleur blanche demandée */
.hero__stat-label {
  display: block;
  font-size: 0.68rem;
  color: #fff;
  margin-top: 0.1rem;
  opacity: 0.85;
}
/* ============================================================
   HERO — Calculateur full width intégré
   ============================================================ */

/* 1. hero__inner : zone texte centrée, compacte */
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 620px;                /* ↓ était 680px */
  margin: 0 auto;
  padding-bottom: var(--space-4);  /* ↓ était var(--space-6) */
}

/* Centrage du sous-titre et des stats */
.hero__subtitle {
  margin-left:  auto;
  margin-right: auto;
}
.hero__stats { justify-content: center; }

/* 2. hero__calculator : sort du .container, occupe 100% de .hero */
.hero__calculator {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Marges latérales confortables sur desktop/tablette */
  padding: 0 var(--space-6) var(--space-12);
}

/* 3. Wrapper interne : plafond sur très grands écrans */
.hero__calculator-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 4. Le .sc-calculator hérite de la largeur sans max-width propre */
.hero__calculator .sc-calculator {
  max-width: none;            /* ← annule le max-width: 900px du plugin */
  margin:    0;               /* déjà centré par hero__calculator-inner */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.22),
    0  8px 24px rgba(0, 52, 204, 0.18);
  border-radius: 20px;
}

/* 5. Header du plugin : reprend le dégradé bleu du hero */
.hero__calculator .sc-header {
  background: linear-gradient(135deg, #003D99 0%, #0052CC 60%, #0065E0 100%);
  border-radius: 20px 20px 0 0;
}

/* ── Responsive ─────────────────────────────────────────── */
/* Tablette */
@media (max-width: 1024px) {
  .hero__calculator { padding: 0 var(--space-4) var(--space-10); }
}
/* Mobile */
@media (max-width: 600px) {
  .hero {
    padding-top:    var(--space-6);
    padding-bottom: 0;
  }
  .hero__inner     { padding-bottom: var(--space-4); }
  .hero__title     { font-size: 1.1rem; }
  .hero__subtitle  { font-size: 0.8rem; margin-bottom: var(--space-3); }
  .hero__stats     { gap: var(--space-4); }
  .hero__stat-value{ font-size: 1rem; }
  .hero__calculator {
    padding: 0 var(--space-2) var(--space-6);
  }
  .hero__calculator .sc-calculator {
    border-radius: 14px;
  }
  .hero__calculator .sc-header {
    border-radius: 14px 14px 0 0;
  }
}


/* ============================================================
   CARDS & SURFACES
   ============================================================ */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.card--flat { box-shadow: none; }
.card--elevated { box-shadow: var(--shadow-lg); }

/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-title__tag {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.section-title h2 { margin-bottom: var(--space-3); }
.section-title p { max-width: 600px; margin: 0 auto; }

/* ============================================================
   QUICK LINKS (Liens montants populaires)
   ============================================================ */
.quick-links {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}
.quick-links__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.quick-links__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.quick-link {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: var(--transition);
  text-decoration: none;
}
.quick-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   INFO SECTIONS
   ============================================================ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

/* ============================================================
   TABLE DES COTISATIONS
   ============================================================ */
.cotisations-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cotisations-table thead {
  background: var(--color-primary);
  color: #fff;
}
.cotisations-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cotisations-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.cotisations-table tbody tr:last-child td { border-bottom: none; }
.cotisations-table tbody tr:nth-child(even) { background: var(--color-bg); }
.cotisations-table tbody tr:hover { background: var(--color-primary-light); }
.cotisations-table .total-row {
  background: var(--color-accent-light) !important;
  font-weight: 700;
  color: var(--color-accent) !important;
}
.cotisations-table .total-row td { color: var(--color-accent) !important; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}
.faq-item:hover { border-color: var(--color-primary-light); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  gap: var(--space-4);
  user-select: none;
}
.faq-question:hover { color: var(--color-primary); }

.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.faq-item.open { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(0,82,204,0.08); }

.faq-answer {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-secondary);
  line-height: 1.7;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.faq-item.open .faq-answer { display: block; }

/* ============================================================
   RELATED LINKS (pages SEO internes)
   ============================================================ */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.related-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
}
.related-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,82,204,0.08);
  transform: translateY(-2px);
}
.related-link__amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}
.related-link__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.related-link__net {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: var(--space-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0A0F1E;
  color: rgba(255,255,255,0.7);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p { font-size: var(--text-sm); line-height: 1.7; margin-top: var(--space-4); color: rgba(255,255,255,0.5); }
.footer-brand .site-logo__text { color: #fff; }

.footer-col h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col ul li a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  transition: var(--transition);
}
.footer-col ul li a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom a { color: rgba(255,255,255,0.35); }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-decoration: none;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,82,204,0.35); }

.btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ============================================================
   PROSE (contenu riche — guides, articles, pages)
   ============================================================ */
.prose { line-height: 1.75; color: var(--color-text); }

/* Titres */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}
.prose h1 { font-size: clamp(1.5rem, 3vw, 2rem);   margin: 0 0 var(--space-6); }
.prose h2 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin: var(--space-10) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.prose h3 { font-size: 1.125rem; margin: var(--space-8) 0 var(--space-3); }
.prose h4 { font-size: 1rem;     margin: var(--space-6) 0 var(--space-2); }

/* Paragraphes */
.prose p  { margin-bottom: var(--space-5); max-width: 72ch; }
.prose p:last-child { margin-bottom: 0; }

/* Liens */
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-primary-dark); }

/* Emphase */
.prose strong { color: var(--color-text); font-weight: 700; }
.prose em     { font-style: italic; }

/* Listes */
.prose ul, .prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.prose li::marker { color: var(--color-primary); }

/* Blockquote */
.prose blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.prose blockquote p { margin-bottom: 0; max-width: 100%; }

/* Code inline */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--color-primary-dark);
}

/* Bloc de code */
.prose pre {
  background: #1E2A3A;
  color: #E6F0FF;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Images */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
  display: block;
  box-shadow: var(--shadow-sm);
}
.prose figure {
  margin: var(--space-8) 0;
  text-align: center;
}
.prose figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* Tableaux */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.prose th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.prose tr:last-child td { border-bottom: none; }
.prose tr:nth-child(even) td { background: var(--color-bg); }

/* Séparateur horizontal */
.prose hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--space-10) 0;
}

/* ============================================================
   PAGE STANDARD (page.php)
   Fond blanc · contenu centré · typographie lecture
   Aucun hero automatique — aucun bloc ajouté par le thème
   ============================================================ */

/* Le body sur une page de contenu reçoit .page-template-default
   WordPress ajoute automatiquement cette classe. On force le fond
   blanc pour éviter le fond gris du body global. */
.page-template-default.page #main,
.page-template-default.page .page-content {
  background: var(--color-surface);
}

/* Zone principale */
.page-main {
  background: var(--color-surface);
  min-height: 60vh;
}

/* Centrage + largeur lecture */
.page-content {
  background: var(--color-surface);
  padding: var(--space-12) 0 var(--space-16);
}
.page-content__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Pas de style structurel sur l'article lui-même */
.page-article {}

/* ── Prose de page — typographie article propre ────────────
   Appliquée sur .page-prose dans page.php.
   Couvre tous les éléments Gutenberg courants.
   ──────────────────────────────────────────────────────── */
.page-prose {
  font-size: 1.0625rem;   /* 17px — confort de lecture */
  line-height: 1.8;
  color: var(--color-text);
}

/* Titres — hiérarchie claire */
.page-prose h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.02em;
}
.page-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-10) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  line-height: 1.3;
}
.page-prose h3 {
  font-family: var(--font-display);
  font-size: 1.175rem;
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
  line-height: 1.3;
}
.page-prose h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-2);
}
.page-prose h5, .page-prose h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 var(--space-2);
}

/* Paragraphes */
.page-prose p {
  margin-bottom: var(--space-5);
  max-width: 68ch;        /* ~65 caractères = confort maximal */
  color: var(--color-text-secondary);
}
.page-prose p:last-child { margin-bottom: 0; }

/* Liens */
.page-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-prose a:hover { color: var(--color-primary-dark); }

/* Gras, italique */
.page-prose strong { color: var(--color-text); font-weight: 700; }
.page-prose em     { font-style: italic; }

/* Listes */
.page-prose ul,
.page-prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.page-prose li::marker { color: var(--color-primary); }

/* Citation */
.page-prose blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.page-prose blockquote p { margin-bottom: 0; max-width: 100%; }

/* Images */
.page-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
  display: block;
  box-shadow: var(--shadow-sm);
}
.page-prose figure { margin: var(--space-8) 0; }
.page-prose figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
  font-style: italic;
}

/* Tableaux */
.page-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.page-prose th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}
.page-prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.page-prose tr:last-child td { border-bottom: none; }
.page-prose tr:nth-child(even) td { background: var(--color-bg); }

/* Séparateur */
.page-prose hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--space-10) 0;
}

/* Code inline */
.page-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--color-primary-dark);
}

/* Bloc de code */
.page-prose pre {
  background: #1E2A3A;
  color: #E6F0FF;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.page-prose pre code { background: none; border: none; padding: 0; color: inherit; }

/* Blocs Gutenberg courants dans .page-prose */
.page-prose .wp-block-image img   { margin: 0; }
.page-prose .wp-block-quote       { margin: var(--space-6) 0; }
.page-prose .wp-block-separator   { border-top: 2px solid var(--color-border); margin: var(--space-10) 0; }
.page-prose .wp-block-buttons     { margin: var(--space-5) 0; }
.page-prose .wp-block-button__link {
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.page-prose .wp-block-button__link:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-content              { padding: var(--space-8) 0 var(--space-12); }
  .page-content__inner       { padding: 0 var(--space-4); }
  .page-prose                { font-size: 1rem; }
  .page-prose h1             { font-size: 1.5rem; }
  .page-prose h2             { font-size: 1.2rem; margin-top: var(--space-8); }
  .page-prose h3             { font-size: 1.05rem; }
  .page-prose p              { max-width: 100%; }
}

/* ============================================================
   ALERTS / NOTICE
   ============================================================ */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.alert--info { background: var(--color-primary-light); border-left: 4px solid var(--color-primary); color: var(--color-primary-dark); }
.alert--success { background: var(--color-accent-light); border-left: 4px solid var(--color-accent); color: var(--color-accent); }
.alert--warning { background: #FFF3CD; border-left: 4px solid var(--color-warning); color: #7A4F01; }
.alert__icon { font-size: var(--text-lg); flex-shrink: 0; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.page-numbers {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition);
}
.page-numbers:hover, .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* nav mobile géré dans le bloc MOBILE MENU ci-dessus */
  .hero__stats  { gap: var(--space-6); }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom{ flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .hero { padding: var(--space-8) 0 var(--space-12); }
  .footer-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.02); }
}

.animate-fade-in { animation: fadeInUp 0.5s ease forwards; }
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }

/* ============================================================
   SKIP LINK (accessibilité)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 999;
}
.skip-link:focus { top: 0; }

/* ============================================================
   CALCULATEURS SECONDAIRES — licenciement, ARE, rupture
   ============================================================ */

.snt-calc-wrap {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 32px;
  margin-bottom: 32px;
}

.snt-calc-wrap h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}
.snt-calc-wrap .calc-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

/* Grille 2 colonnes */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .calc-grid { grid-template-columns: 1fr; }
  .snt-calc-wrap { padding: 20px; }
}

/* Champ label + input */
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-field label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.calc-field input[type="number"],
.calc-field input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  transition: border-color .15s;
  box-sizing: border-box;
}
.calc-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(231,76,60,.1);
}
.calc-field input[readonly],
.calc-field input[disabled] {
  background: #f9fafb;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 16px;
  border-color: var(--color-primary-light);
}

/* Slider */
.calc-slider-wrap {
  margin-bottom: 16px;
}
.calc-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}
.calc-slider-label strong {
  color: var(--color-primary);
  font-size: 15px;
}
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  box-shadow: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Résultat en évidence */
.calc-result-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.calc-result-box {
  background: var(--color-primary-light);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.calc-result-box label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: 6px;
  letter-spacing: .5px;
}
.calc-result-box input {
  background: transparent !important;
  border: none !important;
  text-align: center;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  width: 100%;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Actions */
.calc-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-reset {
  background: none;
  border: 1px solid #d1d5db;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Bloc détails */
.calc-details {
  margin-top: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
  font-size: 13px;
  line-height: 1.6;
}
.calc-details p { margin: 4px 0; }
.calc-details hr { border: none; border-top: 1px solid #e5e7eb; margin: 8px 0; }
.calc-notice {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Tag statutaire visible sur le champ mensuel */
.calc-tag {
  display: inline-block;
  font-size: 11px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 6px;
  font-weight: 600;
}

/* ============================================================
   NAVIGATION — desktop, laptop, tablette, mobile
   Design simple et robuste
   ============================================================ */

/* --- Barre principale --- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Liens directs (sans dropdown) */
.main-nav > a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.main-nav > a:hover,
.main-nav > a.active,
.main-nav > a[aria-current="page"] {
  background: #dde6f5;
  color: var(--color-primary);
}

/* --- Item avec dropdown --- */
.nav-item {
  position: relative;
}

/* Lien parent (trigger du dropdown) */
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.nav-item:hover > .nav-parent,
.nav-item.open  > .nav-parent {
  background: #dde6f5;
  color: var(--color-primary);
}

/* Chevron */
.nav-chevron {
  font-size: 9px;
  line-height: 1;
  display: inline-block;
  transition: transform .2s;
  color: #9ca3af;
}
.nav-item:hover > .nav-parent .nav-chevron,
.nav-item.open  > .nav-parent .nav-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* --- Panneau dropdown --- */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 6px 0;
  z-index: 9999;
  flex-direction: column;
}

/* Ouverture hover — desktop uniquement */
@media (min-width: 900px) {
  .nav-item:hover > .nav-dropdown {
    display: flex;
  }
}

/* Ouverture JS (clic) — toutes tailles */
.nav-item.open > .nav-dropdown {
  display: flex;
}

/* Liens dans le dropdown */
.nav-dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  text-decoration: none;
  white-space: normal;
  line-height: 1.5;
  transition: background .12s, color .12s;
}
.nav-dropdown a:hover,
.nav-dropdown a.active {
  background: #dde6f5;
  color: var(--color-primary);
}

/* --- Bouton CTA --- */
.header-cta {
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-left: 8px;
  transition: background .15s !important;
}
.header-cta:hover {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
}



/* ============================================================
   MOBILE / TABLETTE < 900px
   ============================================================ */
@media (max-width: 899px) {

  /* Masquer nav desktop, afficher burger */
  .main-nav    { display: none; }
  .menu-toggle { display: flex; }

  /* Panneau vertical déroulant */
  .main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    padding: 10px 0;
    gap: 0;
    z-index: 9998;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Liens directs mobiles */
  .main-nav.open > a,
  .main-nav.open .nav-parent {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    border-radius: 0;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* Item dropdown pleine largeur */
  .nav-item {
    width: 100%;
  }

  /* Dropdown mobile : statique, indenté */
  .nav-dropdown {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid #dde6f5 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 20px !important;
    background: transparent !important;
  }

  .nav-item.open > .nav-dropdown {
    display: flex;
  }

  .nav-dropdown a {
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #4b5563 !important;
  }
  .nav-dropdown a:hover {
    background: #dde6f5 !important;
    color: var(--color-primary) !important;
  }

  /* CTA pleine largeur */
  .header-cta {
    margin: 10px 20px !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
}

/* ============================================================
   BREADCRUMB — désactivé
   ============================================================ */
.breadcrumb-bar { display: none !important; }




/* ============================================================
   PATCH v1.1 — Corrections mobile + FAQ accordéon + a11y
   ============================================================ */

/* ── FAQ : reset du <button> et meilleure UX ─────────────────── */
.faq-question {
  /* Reset des styles natifs du <button> */
  width: 100%;
  background: transparent;
  border: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  /* Sécurité touch ≥ 44px (WCAG 2.5.5) */
  min-height: 44px;
}
.faq-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* Le HTML utilise [hidden] sur la réponse — JS retire l'attribut + ajoute .open au parent */
.faq-answer[hidden] { display: none; }
.faq-item.open .faq-answer { display: block; }

/* ── Touch targets globaux ≥ 44px ────────────────────────────── */
.quick-link,
.related-link,
.btn,
.menu-toggle {
  min-height: 44px;
}

/* ── Hero stats : 2x2 sur mobile au lieu de 4x1 ──────────────── */
@media (max-width: 600px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }
  .hero__stat-value {
    font-size: 1.5rem !important;
  }
  .hero__stat-label {
    font-size: 0.7rem !important;
  }
}

/* ── Breadcrumb : on garde la classe mais sans !important ────── */
/* (override doux pour pouvoir réactiver depuis un sous-thème) */

/* ── Tableaux dans la prose : scroll horizontal forcé ────────── */
.prose table,
.page-prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Hero salary_page : padding mobile réduit ────────────────── */
@media (max-width: 600px) {
  .salary-hero {
    padding-top: 1.5rem !important;
  }
  .salary-hero h1 {
    font-size: 1.75rem !important;
  }
}

/* ── iOS notch safe-area ─────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
  }
}

/* ── Skip-link visible au focus (a11y) ───────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  top: 0;
}

/* ============================================================
   SALARY HERO — page SEO single-salary_page (extrait depuis inline)
   ============================================================ */
.salary-hero {
  background: linear-gradient(135deg, #0A1628 0%, #0052CC 100%);
  padding: 3rem 0 0;
  color: #fff;
}
.salary-hero__inner {
  max-width: 900px;
}
.salary-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .8rem;
  padding: .25rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.salary-hero__title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}
.salary-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 2rem;
  max-width: 650px;
}
.salary-hero__hl   { color: #4FC3F7; }
.salary-hero__hl-2 { color: #69F0AE; }

.salary-hero__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding-bottom: 2.5rem;
}
.salary-hero__card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 1.25rem;
}
.salary-hero__card-label {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .5rem;
}
.salary-hero__card-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.2;
}
.salary-hero__card-value--green  { color: #69F0AE; }
.salary-hero__card-value--blue   { color: #4FC3F7; }
.salary-hero__card-value--yellow { color: #FFD54F; }
.salary-hero__card-value--pink   { color: #F48FB1; }

@media (max-width: 600px) {
  .salary-hero { padding-top: 1.5rem; }
  .salary-hero__title { font-size: 1.75rem; }
  .salary-hero__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }
  .salary-hero__card { padding: .875rem; }
  .salary-hero__card-value { font-size: 1.25rem; }
}