/* ============================================================
   Soldilnvolo — Swiss Design System
   ============================================================ */

/* ── Google Fonts Inter import ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Tokens de design ───────────────────────────────────── */
:root {
  --c-primary   : #1E2A35;
  --c-accent    : #00B4D8;
  --c-success   : #00C896;
  --c-bg        : #F5F7F9;
  --c-text      : #1A1A2E;
  --c-separator : #DDE3EA;
  --c-white     : #FFFFFF;
  --c-dark-footer: #111827;
  --c-muted     : #6B7280;
  --c-light     : #A0AEC0;
  --c-amber     : #F59E0B;
  --c-rose      : #F43F5E;

  --radius      : 4px;
  --radius-lg   : 8px;
  --shadow-sm   : 0 2px 8px rgba(30,42,53,.06);
  --shadow      : 0 4px 20px rgba(30,42,53,.10);
  --shadow-lg   : 0 8px 40px rgba(30,42,53,.16);
  --transition  : .25s ease;

  --font        : 'Inter', system-ui, -apple-system, sans-serif;
  --grid-gap    : 24px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Typographie Swiss ───────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font); color: var(--c-text); line-height: 1.2; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: -1px; }
h2 { font-size: clamp(2rem, 4vw, 3rem);     font-weight: 800; letter-spacing: -.5px; }
h3 { font-size: 1.5rem;  font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
h5 { font-size: 1.1rem;  font-weight: 600; }
h6 { font-size: .9rem;   font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
p  { margin-bottom: 1rem; }

/* Chiffres/taux */
.num {
  font-family: var(--font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}
.accent-text { color: var(--c-accent); }
.text-muted  { color: var(--c-muted) !important; }


/* ── Barre de progression de lecture ────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: var(--c-accent);
  transition: width .1s linear;
}

/* ── Bouton retour en haut ──────────────────────────────── */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 44px; height: 44px;
  background: var(--c-primary); color: var(--c-white);
  border: none; border-radius: var(--radius);
  cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(1rem);
  transition: var(--transition);
  box-shadow: var(--shadow);
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover { background: var(--c-accent); }


/* ── Navigation ─────────────────────────────────────────── */
.navbar {
  background: var(--c-primary);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 3px solid var(--c-accent);
  box-shadow: 0 2px 16px rgba(30,42,53,.12);
  padding: .9rem 0;
  transition: var(--transition);
}
.navbar-brand {
  display: flex; flex-direction: column;
  gap: 1px;
}
.navbar-brand .brand-name {
  font-size: 1.5rem; font-weight: 800;
  color: var(--c-white);
  letter-spacing: -.5px;
  line-height: 1;
}
.navbar-brand .brand-name span { color: var(--c-accent); }
.navbar-brand .brand-tagline {
  font-size: .65rem; font-weight: 400;
  color: rgba(255,255,255,.55);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.navbar-nav .nav-link {
  color: rgba(255,255,255,.8) !important;
  font-weight: 500; font-size: .95rem;
  padding: .5rem 1rem !important;
  border-radius: var(--radius);
  transition: var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--c-white) !important;
  background: rgba(255,255,255,.08);
}
.btn-nav-cta {
  background: var(--c-accent) !important;
  color: var(--c-white) !important;
  font-weight: 600 !important;
  padding: .5rem 1.25rem !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}
.btn-nav-cta:hover { background: #0099BF !important; transform: translateY(-1px); }

/* GTranslate widget — visibilité sur fond sombre */
.navbar-collapse {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.gtranslate_wrapper {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap !important;
  flex-shrink: 0;
  margin-left: 1rem;
}
.gtranslate_wrapper * { white-space: nowrap !important; }
.gtranslate_wrapper a,
.gtranslate_wrapper a:link,
.gtranslate_wrapper a:visited {
  color: rgba(255,255,255,.8) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: .15rem .35rem !important;
  border-radius: 3px !important;
  transition: var(--transition) !important;
}
.gtranslate_wrapper a:hover { color: var(--c-white) !important; background: rgba(255,255,255,.1) !important; }
.gtranslate_wrapper select {
  background: rgba(255,255,255,.1) !important;
  color: var(--c-white) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--radius) !important;
  font-size: .85rem !important;
  padding: .25rem .5rem !important;
  cursor: pointer;
}
.gtranslate_wrapper select option { background: var(--c-primary); color: var(--c-white); }

.navbar-toggler { border-color: rgba(255,255,255,.3) !important; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* ── Boutons Swiss ──────────────────────────────────────── */
.btn-primary-mu {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-primary); color: var(--c-white);
  font-weight: 600; font-size: 1rem;
  padding: .85rem 2rem; border-radius: var(--radius);
  border: 2px solid var(--c-primary);
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-primary-mu:hover {
  background: transparent; color: var(--c-primary);
  transform: translateY(-2px); box-shadow: var(--shadow);
}

.btn-accent-mu {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-accent); color: var(--c-white);
  font-weight: 600; font-size: 1rem;
  padding: .85rem 2rem; border-radius: var(--radius);
  border: 2px solid var(--c-accent);
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-accent-mu:hover {
  background: #0099BF; border-color: #0099BF;
  transform: translateY(-2px); box-shadow: var(--shadow);
}

.btn-outline-mu {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--c-accent);
  font-weight: 600; font-size: 1rem;
  padding: .85rem 2rem; border-radius: var(--radius);
  border: 2px solid var(--c-accent);
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-outline-mu:hover {
  background: var(--c-accent); color: var(--c-white);
  transform: translateY(-2px);
}

.btn-white-mu {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-white); color: var(--c-primary);
  font-weight: 700; font-size: 1rem;
  padding: .85rem 2rem; border-radius: var(--radius);
  border: 2px solid var(--c-white);
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-white-mu:hover {
  background: transparent; color: var(--c-white);
  transform: translateY(-2px);
}


/* ── Badge / Labels ─────────────────────────────────────── */
.badge-mu {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(0,180,216,.12); color: var(--c-accent);
  font-weight: 600; font-size: .85rem;
  padding: .4rem 1rem; border-radius: 50px;
  border: 1px solid rgba(0,180,216,.3);
}
.badge-verified {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(0,200,150,.1); color: var(--c-success);
  font-size: .75rem; font-weight: 600;
  padding: .2rem .7rem; border-radius: 50px;
}
.tag-cat {
  display: inline-block;
  background: var(--c-accent); color: var(--c-white);
  font-size: .72rem; font-weight: 700;
  padding: .2rem .75rem; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: .5px;
}


/* ── Sections ───────────────────────────────────────────── */
.section-gap { padding: 6rem 0; }
.section-gap-sm { padding: 4rem 0; }

/* Ligne séparatrice accent */
.accent-line {
  width: 48px; height: 4px;
  background: var(--c-accent);
  display: block; margin-bottom: 1.5rem;
}
.accent-line-center { margin-left: auto; margin-right: auto; }

/* Barre verticale gauche */
.why-block {
  padding-left: 1.5rem;
  border-left: 4px solid var(--c-accent);
}


/* ── Hero ───────────────────────────────────────────────── */
.hero {
  display: flex; align-items: center;
  background: linear-gradient(135deg, rgba(30,42,53,.96) 0%, rgba(30,42,53,.82) 100%),
              url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80')
              center/cover no-repeat;
  color: var(--c-white);
  position: relative; overflow: hidden;
}
.hero .hero-inner { position: relative; z-index: 2; padding: 3.5rem 0 3.5rem; }
.hero h1 { font-size: clamp(3rem, 6vw, 5rem); color: var(--c-white); line-height: 1.05; }
.hero h1 em { font-style: normal; color: var(--c-accent); }
.hero .hero-sub { font-size: 1.2rem; font-weight: 400; color: rgba(255,255,255,.85); max-width: 500px; }


/* ── Widget simulateur inline ────────────────────────────── */
.simulator-widget {
  background: var(--c-white);
  border: 1px solid var(--c-separator);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}
.simulator-widget .sim-result {
  background: var(--c-bg);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  display: none;
}
.sim-result .sim-monthly {
  font-size: 2.2rem; font-weight: 900;
  color: var(--c-accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sim-result .sim-meta {
  display: flex; gap: 2rem; margin-top: .75rem; flex-wrap: wrap;
}
.sim-result .sim-meta span { font-size: .9rem; color: var(--c-muted); }
.sim-result .sim-meta strong { display: block; color: var(--c-text); font-weight: 700; }
.sim-disclaimer { font-size: .72rem; color: var(--c-muted); margin-top: .75rem; }


/* ── Cards produits ─────────────────────────────────────── */
/* ── Product cards v2 ───────────────────────────────────── */
.product-card {
  --pc-color   : var(--c-accent);
  background   : var(--c-white);
  border       : 1.5px solid var(--c-separator);
  border-radius: 16px;
  padding      : 0;
  display      : flex;
  flex-direction: column;
  height       : 100%;
  overflow     : hidden;
  transition   : box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.product-card:hover {
  box-shadow   : 0 12px 40px rgba(30,42,53,.13);
  transform    : translateY(-5px);
  border-color : var(--pc-color);
}
/* Featured highlight */
.product-card--featured {
  border-color : var(--pc-color);
  box-shadow   : 0 8px 32px rgba(245,158,11,.18);
}
.product-card--featured::before {
  content    : attr(data-badge);
  display    : block;
  background : var(--pc-color);
  color      : #fff;
  font-size  : .68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align : center;
  padding    : .35rem 1rem;
}
/* Card header band */
.pc-header {
  display      : flex;
  align-items  : center;
  gap          : 1rem;
  padding      : 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--c-separator);
}
.pc-icon {
  width        : 52px;
  height       : 52px;
  border-radius: 12px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 1.3rem;
  flex-shrink  : 0;
  background   : color-mix(in srgb, var(--pc-color) 12%, white);
  color        : var(--pc-color);
  transition   : background var(--transition);
}
.product-card--featured .pc-icon {
  background   : var(--pc-color);
  color        : #fff;
}
.pc-meta { flex: 1; min-width: 0; }
.pc-rate {
  font-size    : 1.5rem;
  font-weight  : 900;
  color        : var(--pc-color);
  line-height  : 1;
  font-variant-numeric: tabular-nums;
}
.pc-rate small {
  font-size    : .7rem;
  font-weight  : 600;
  color        : var(--c-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left  : .25rem;
}
.pc-name {
  font-size    : .95rem;
  font-weight  : 700;
  color        : var(--c-primary);
  margin-top   : .2rem;
}
/* Card body */
.pc-body {
  padding  : 1.25rem 1.5rem;
  flex     : 1;
  display  : flex;
  flex-direction: column;
}
.pc-desc {
  font-size  : .875rem;
  color      : var(--c-muted);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.pc-features {
  list-style : none;
  padding    : 0;
  margin     : 0 0 1.25rem;
  display    : flex;
  flex-direction: column;
  gap        : .5rem;
  flex       : 1;
}
.pc-features li {
  display    : flex;
  align-items: center;
  gap        : .55rem;
  font-size  : .82rem;
  color      : var(--c-text);
}
.pc-features li::before {
  content    : '';
  flex-shrink: 0;
  width      : 18px;
  height     : 18px;
  border-radius: 50%;
  background : color-mix(in srgb, var(--pc-color) 15%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2300B4D8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.product-card--featured .pc-features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23F59E0B' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: rgba(245,158,11,.12);
}
.pc-range {
  font-size  : .75rem;
  color      : var(--c-muted);
  padding    : .6rem 0;
  border-top : 1px solid var(--c-separator);
  margin-bottom: 1rem;
}
.pc-range strong { color: var(--c-primary); }
/* Card footer */
.pc-footer {
  padding     : 0 1.5rem 1.5rem;
  display     : flex;
  gap         : .6rem;
}
.pc-btn-main {
  flex        : 1;
  display     : inline-flex;
  align-items : center;
  justify-content: center;
  gap         : .35rem;
  padding     : .6rem 1rem;
  font-size   : .8rem;
  font-weight : 700;
  border-radius: 8px;
  background  : var(--pc-color);
  color       : #fff;
  border      : none;
  transition  : opacity var(--transition);
  cursor      : pointer;
}
.pc-btn-main:hover { opacity: .88; color: #fff; }
.pc-btn-secondary {
  display     : inline-flex;
  align-items : center;
  justify-content: center;
  gap         : .35rem;
  padding     : .6rem 1rem;
  font-size   : .8rem;
  font-weight : 700;
  border-radius: 8px;
  background  : transparent;
  color       : var(--pc-color);
  border      : 1.5px solid var(--pc-color);
  transition  : background var(--transition), color var(--transition);
  cursor      : pointer;
  white-space : nowrap;
}
.pc-btn-secondary:hover {
  background  : color-mix(in srgb, var(--pc-color) 10%, white);
  color       : var(--pc-color);
}


/* ── Section chiffres clés — KPI cards ──────────────────── */
.stats-section {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,180,216,.04) 0%, rgba(244,63,94,.03) 100%);
}
.kpi-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-separator);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--kpi-color, var(--c-accent));
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-color, var(--c-accent));
}
.kpi-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--kpi-color, var(--c-accent)) 12%, white);
  color: var(--kpi-color, var(--c-accent));
}
.kpi-body { flex: 1; min-width: 0; }
.kpi-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: .25rem;
}
.kpi-label {
  font-size: .9rem; font-weight: 700;
  color: var(--c-primary);
  display: block; margin-bottom: .15rem;
}
.kpi-sub { font-size: .75rem; color: var(--c-muted); display: block; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 700;
  padding: .18rem .5rem; border-radius: 99px; margin-top: .5rem;
}
.kpi-trend--up   { background: rgba(0,200,150,.12); color: var(--c-success); }
.kpi-trend--stable { background: rgba(0,180,216,.12); color: var(--c-accent); }
/* keep legacy stat-block for any other page using it */
.stat-block { text-align: center; position: relative; z-index: 1; }
.stat-block .stat-num {
  display: block; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900;
  color: var(--c-accent); line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.stat-block .stat-label { color: var(--c-muted); font-size: .95rem; font-weight: 400; }


/* ── Section Pourquoi ───────────────────────────────────── */
.why-icon {
  width: 48px; height: 48px;
  background: rgba(0,180,216,.1);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--c-accent);
  margin-bottom: 1rem;
}

/* ── Timeline "Comment ça marche" ───────────────────────── */
.step-block { display: flex; gap: 1.5rem; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--c-accent); color: var(--c-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
}
.step-content h5 { margin-bottom: .25rem; }
.step-content p  { color: var(--c-muted); font-size: .95rem; margin: 0; }


/* ── Témoignages ────────────────────────────────────────── */
.testimonial-card {
  background: var(--c-white);
  border: 1px solid var(--c-separator);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.testi-stars { color: #F5A623; font-size: 1rem; }
.testi-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover;
}
.testi-text { font-style: italic; color: var(--c-muted); font-size: .95rem; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--c-primary);
  border-radius: 50%; padding: 1.2rem;
}


/* ── CTA Pleine largeur ─────────────────────────────────── */
.cta-full {
  background: var(--c-primary);
  color: var(--c-white);
  text-align: center;
  padding: 5rem 0;
}
.cta-full h2 { color: var(--c-white); font-size: clamp(2rem, 4vw, 2.75rem); }


/* ── Formulaires Swiss ──────────────────────────────────── */
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--c-text); }
.form-control {
  border: 2px solid var(--c-separator);
  border-radius: var(--radius);
  padding: .75rem 1rem; font-size: .95rem;
  background: var(--c-white); color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(0,180,216,.15);
  outline: none;
}
.form-control.is-invalid { border-color: #ef4444; }
.form-select {
  border: 2px solid var(--c-separator);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .95rem;
  cursor: pointer;
}
.form-select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(0,180,216,.15);
  outline: none;
}
.form-range { accent-color: var(--c-accent); }
.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }

/* Stepper multi-étapes */
.stepper {
  display: flex; gap: 0; margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--c-separator);
  padding-bottom: 0;
}
.stepper-step {
  flex: 1; text-align: center; padding: 1rem .5rem;
  position: relative; cursor: default;
  font-weight: 600; font-size: .9rem;
  color: var(--c-muted);
  transition: var(--transition);
}
.stepper-step .step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-separator); color: var(--c-muted);
  font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .5rem;
  transition: var(--transition);
}
.stepper-step.active .step-circle { background: var(--c-accent); color: var(--c-white); }
.stepper-step.done .step-circle { background: var(--c-success); color: var(--c-white); }
.stepper-step.active { color: var(--c-accent); border-bottom: 3px solid var(--c-accent); margin-bottom: -2px; }
.stepper-step.done { color: var(--c-success); }

/* Radio cards (choix type de prêt) */
.radio-card-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.radio-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.radio-card label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.25rem 1rem; text-align: center;
  background: var(--c-white); border: 2px solid var(--c-separator);
  border-radius: var(--radius-lg); cursor: pointer; font-weight: 600; font-size: .9rem;
  transition: var(--transition);
}
.radio-card label i { font-size: 1.6rem; color: var(--c-muted); transition: var(--transition); }
.radio-card input:checked + label { border-color: var(--c-accent); background: rgba(0,180,216,.06); color: var(--c-accent); }
.radio-card input:checked + label i { color: var(--c-accent); }
.radio-card label:hover { border-color: var(--c-accent); }


/* ── Upload zone ─────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--c-separator);
  border-radius: var(--radius-lg);
  padding: 2rem; text-align: center;
  cursor: pointer; transition: var(--transition);
  background: var(--c-bg);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--c-accent); background: rgba(0,180,216,.04);
}
.upload-zone i { font-size: 2rem; color: var(--c-accent); margin-bottom: .75rem; }


/* ── Page hero interne ──────────────────────────────────── */
.page-hero {
  background: var(--c-primary); color: var(--c-white);
  padding: 4rem 0 3rem;
}
.page-hero h1 { color: var(--c-white); font-size: clamp(2rem, 4vw, 3rem); }
.page-hero p { color: rgba(255,255,255,.7); font-size: 1.1rem; margin: 0; }


/* ── Blog cards ─────────────────────────────────────────── */
.blog-card {
  background: var(--c-white);
  border: 1px solid var(--c-separator);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; }
.blog-card .blog-body { padding: 1.5rem; }
.blog-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.blog-card .blog-meta { font-size: .8rem; color: var(--c-muted); margin-bottom: .75rem; }
.blog-card .blog-excerpt { font-size: .9rem; color: var(--c-muted); }


/* ── Tableau amortissement ──────────────────────────────── */
.amort-table { font-size: .85rem; }
.amort-table th { background: var(--c-primary); color: var(--c-white); font-weight: 600; border: none; }
.amort-table td { border-color: var(--c-separator); }
.amort-table tr:hover td { background: rgba(0,180,216,.04); }
.amort-table .capital-col { color: var(--c-accent); font-weight: 600; }


/* ── Section légale ─────────────────────────────────────── */
.legal-content h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--c-separator); }
.legal-content h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.legal-content p, .legal-content li { color: var(--c-muted); font-size: .95rem; }
.legal-notice {
  background: rgba(0,180,216,.07);
  border-left: 4px solid var(--c-accent);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}
.legal-warning {
  background: rgba(239,68,68,.07);
  border-left: 4px solid #ef4444;
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  color: #7f1d1d; font-weight: 500;
}


/* ── Cookie Banner ──────────────────────────────────────── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--c-primary); color: rgba(255,255,255,.9);
  padding: 1.25rem 2rem; display: none;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
#cookie-banner.visible { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
#cookie-banner p { margin: 0; font-size: .88rem; }
#cookie-banner .cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--c-dark-footer);
  color: rgba(255,255,255,.6); font-size: .9rem;
  padding: 4rem 0 0;
}
.site-footer h5 { color: var(--c-white); font-weight: 700; margin-bottom: 1.25rem; font-size: 1rem; }
.site-footer a { color: rgba(255,255,255,.6); transition: var(--transition); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: .5rem; }
.footer-brand .brand-name { font-size: 1.6rem; font-weight: 900; color: var(--c-white); line-height: 1; }
.footer-brand .brand-name span { color: var(--c-accent); }
.footer-brand .tagline { font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: .25rem; margin-bottom: 1rem; }
.footer-hr { border-color: rgba(255,255,255,.07); margin: 2rem 0; }
.footer-legal {
  font-size: .72rem; color: rgba(255,255,255,.3);
  line-height: 1.6; padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-copyright {
  font-size: .8rem; color: rgba(255,255,255,.4);
  padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
}


/* ── Alertes / Flash ────────────────────────────────────── */
.alert-mu {
  padding: 1rem 1.5rem; border-radius: var(--radius);
  font-weight: 500; font-size: .95rem; margin-bottom: 1rem;
}
.alert-mu-success { background: rgba(0,200,150,.1); color: #065f46; border-left: 4px solid var(--c-success); }
.alert-mu-danger  { background: rgba(239,68,68,.08); color: #7f1d1d; border-left: 4px solid #ef4444; }
.alert-mu-info    { background: rgba(0,180,216,.08); color: #0c4f6f; border-left: 4px solid var(--c-accent); }


/* ── Admin table ────────────────────────────────────────── */
.admin-table th {
  background: var(--c-bg); font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 2px solid var(--c-separator) !important;
  color: var(--c-muted);
}
.status-badge {
  display: inline-block; padding: .25rem .75rem; border-radius: 50px; font-size: .78rem; font-weight: 600;
}
.status-attente  { background: rgba(245,158,11,.1);  color: #92400e; }
.status-approuve { background: rgba(0,200,150,.1);   color: #065f46; }
.status-refuse   { background: rgba(239,68,68,.08);  color: #7f1d1d; }


/* ── Animations d'entrée ────────────────────────────────── */
.reveal {
  transition: opacity .6s ease, transform .6s ease;
}
/* Masquage uniquement si JS est chargé */
.js .reveal {
  opacity: 0; transform: translateY(30px);
}
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* Hero animation slide-up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate { animation: slideUp .8s ease forwards; }
.hero-animate-2 { animation: slideUp .8s .2s ease both; }
.hero-animate-3 { animation: slideUp .8s .4s ease both; }


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar-collapse { background: var(--c-primary); padding: 1rem; border-radius: var(--radius); margin-top: .5rem; }
  .section-gap { padding: 4rem 0; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.5rem !important; }
  .hero .hero-inner { padding: 2.5rem 0 2.5rem; }
  .simulator-widget { padding: 1.5rem; }
  .stepper-step .step-label { display: none; }
  .radio-card-group { grid-template-columns: repeat(2, 1fr); }
  .cta-full { padding: 3rem 0; }
}


/* ===================================================================
   EXTENDED COMPONENTS — contact, demande, products, about, legal
   =================================================================== */

/* ── Section helpers ────────────────────────────────────── */
.section-std       { padding: 80px 0; }
.section-std.bg-light { background: var(--c-bg); }
.section-header    { text-align: center; margin-bottom: 2rem; }
.section-heading   { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: var(--c-primary); margin-bottom: .75rem; }
.section-intro     { font-size: 1.1rem; color: var(--c-muted); max-width: 660px; margin: 0 auto; }

/* ── Page Hero variants ─────────────────────────────────── */
.page-hero-sm { padding: 80px 0 60px; }

/* ── Form input override ────────────────────────────────── */
.mu-input {
  border: 1.5px solid var(--c-separator);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .95rem;
  padding: .7rem 1rem;
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mu-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(0,180,216,.12);
}

/* ── Range slider ───────────────────────────────────────── */
.mu-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--c-separator);
  border-radius: 2px;
  outline: none;
}
.mu-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,180,216,.3);
}
.mu-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent); cursor: pointer;
  border: 3px solid #fff;
}
.range-labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--c-muted); margin-top: 4px; }

/* ── Mini result (form step 1) ──────────────────────────── */
.sim-mini-result {
  background: linear-gradient(135deg, var(--c-primary), #2d3e4e);
  color: #fff; border-radius: var(--radius-lg); padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.sim-mini-label { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; opacity: .7; flex: 0 0 auto; }
.sim-mini-value { font-size: 1.6rem; font-weight: 800; color: var(--c-accent); flex: 1; }
.sim-mini-note  { font-size: .72rem; opacity: .5; flex: 0 0 100%; }

/* ── Form card ──────────────────────────────────────────── */
.form-card {
  background: #fff;
  border: 1px solid var(--c-separator);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.form-card-title { font-size: 1.5rem; font-weight: 800; color: var(--c-primary); margin-bottom: .25rem; }
.form-card-sub   { color: var(--c-muted); margin-bottom: 1.5rem; font-size: .95rem; }
.form-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-accent);
  padding-bottom: .5rem; border-bottom: 1px solid var(--c-separator);
  margin-bottom: .5rem;
}
@media(max-width:600px){ .form-card { padding: 1.5rem 1.25rem; } }

/* ── Form step visibility ───────────────────────────────── */
.form-step { display: none; }
.form-step.active { display: block; }

/* ── Form navigation ────────────────────────────────────── */
.form-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}

/* ── Recap cards ────────────────────────────────────────── */
.recap-card {
  background: var(--c-bg);
  border: 1px solid var(--c-separator);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.recap-title {
  font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: .75rem;
}
.recap-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid var(--c-separator); font-size: .9rem;
}
.recap-line:last-child { border-bottom: none; }
.recap-line span { color: var(--c-muted); }
.recap-line strong { color: var(--c-primary); }

/* ── Upload block ───────────────────────────────────────── */
.upload-block { background: var(--c-bg); border-radius: var(--radius-lg); padding: 1.5rem; }
.upload-title {
  font-size: 1rem; font-weight: 700; color: var(--c-primary);
  margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem;
}
.upload-badge {
  background: var(--c-bg); border: 1px solid var(--c-separator);
  color: var(--c-muted); font-size: .7rem; padding: 2px 8px; border-radius: 20px; font-weight: 400;
}
.upload-desc { font-size: .875rem; color: var(--c-muted); margin-bottom: 1rem; }
.upload-preview { font-size: .8rem; color: var(--c-success); margin-top: .5rem; }

/* ── RGPD block ─────────────────────────────────────────── */
.rgpd-block { background: rgba(0,180,216,.04); border: 1px solid rgba(0,180,216,.15); border-radius: var(--radius); padding: 1.25rem; }
.rgpd-check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-size: .875rem; color: var(--c-muted); margin-bottom: 0; }
.rgpd-check input[type=checkbox] { flex-shrink: 0; margin-top: 3px; accent-color: var(--c-accent); transform: scale(1.15); }
.rgpd-check a { color: var(--c-accent); text-decoration: underline; }

/* ── Legal banner ───────────────────────────────────────── */
.legal-banner {
  background: #FFF9E6;
  border: 1px solid #F4A400;
  border-left: 4px solid #F4A400;
  border-radius: var(--radius);
  padding: .875rem 1.25rem;
  font-size: .8rem;
  color: #7a5100;
  line-height: 1.5;
}

/* ── Submit button states ───────────────────────────────── */
.btn-submit-mu .btn-loading { display: none; }
.btn-lg { padding: .85rem 2rem !important; font-size: 1rem !important; }

/* ── Success state ──────────────────────────────────────── */
.success-icon {
  font-size: 4rem; color: var(--c-success); margin-bottom: 1rem;
  animation: slideUp .6s ease;
}

/* ── Stepper (contact form) ─────────────────────────────── */
.stepper {
  display: flex; align-items: center; margin-bottom: 2rem;
  padding: 1.5rem; background: #fff;
  border: 1px solid var(--c-separator); border-radius: var(--radius-lg);
}
.stepper-line { flex: 1; height: 2px; background: var(--c-separator); margin: 0 .5rem; transition: background var(--transition); }
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex-shrink: 0; }
.stepper-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-separator); color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  transition: background var(--transition), color var(--transition);
}
.stepper-step span { font-size: .72rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--c-muted); }
.stepper-step.active .stepper-dot  { background: var(--c-accent); color: #fff; box-shadow: 0 0 0 4px rgba(0,180,216,.2); }
.stepper-step.active span          { color: var(--c-primary); }
.stepper-step.done   .stepper-dot  { background: var(--c-success); color: #fff; }
.stepper-step.done   span          { color: var(--c-success); }

/* ── About page ─────────────────────────────────────────── */
.about-visual { }
.about-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.about-stat {
  background: #fff;
  border: 1px solid var(--c-separator);
  border-radius: var(--radius-lg); padding: 1.5rem;
  text-align: center;
}
.about-stat-num {
  display: block; font-size: 2rem; font-weight: 900;
  color: var(--c-accent); font-variant-numeric: tabular-nums;
}
.about-stat-lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--c-muted); }

/* ── Value cards ────────────────────────────────────────── */
.value-card {
  background: #fff; border: 1px solid var(--c-separator);
  border-radius: 16px; padding: 2rem;
  text-align: center; height: 100%;
}
.value-icon {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem; margin: 0 auto 1.25rem;
}
.value-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--c-primary); margin-bottom: .5rem; }
.value-card p  { color: var(--c-muted); font-size: .9rem; margin: 0; }

/* ── Team cards ─────────────────────────────────────────── */
.team-card {
  background: #fff; border: 1px solid var(--c-separator);
  border-radius: 16px; padding: 1.75rem 1.5rem;
  text-align: center; height: 100%;
}
.team-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.team-name { font-size: 1rem; font-weight: 700; color: var(--c-primary); margin-bottom: .25rem; }
.team-role { font-size: .82rem; color: var(--c-muted); margin: 0; }

/* ── Agréments cards ────────────────────────────────────── */
.agrements-card {
  background: #fff; border: 1px solid var(--c-separator);
  border-radius: 16px; padding: 2rem;
  text-align: center; height: 100%;
}
.agr-logo { color: var(--c-accent); margin-bottom: 1rem; }
.agrements-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--c-primary); margin-bottom: .5rem; }
.agrements-card p  { color: var(--c-muted); font-size: .875rem; margin-bottom: 1rem; }
.agr-number {
  font-size: 1.1rem; font-weight: 900; color: var(--c-primary);
  letter-spacing: 2px; font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}

/* ── Products page ──────────────────────────────────────── */
.products-tabs-nav {
  background: #fff; border-bottom: 1px solid var(--c-separator);
  overflow-x: auto;
}
.products-tabs {
  display: flex; list-style: none; gap: 0; overflow-x: auto;
  padding: 0; margin: 0;
}
.products-tabs li a {
  display: block; padding: .75rem 1.25rem;
  font-size: .85rem; font-weight: 600; color: var(--c-muted);
  white-space: nowrap; border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.products-tabs li a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.pv-stat {
  background: rgba(255,255,255,.7); border: 1px solid;
  border-radius: var(--radius); padding: .75rem 1rem;
}
.pv-stat span { display: block; font-size: .72rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; }
.pv-stat strong { font-size: 1rem; font-weight: 700; color: var(--c-primary); }

.product-bads { list-style: none; padding: 0; margin: 0; }
.product-bads li {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0; border-bottom: 1px solid var(--c-separator);
  font-size: .9rem; color: var(--c-text);
}
.product-bads li:last-child { border-bottom: none; }
.product-bads li i { font-size: .85rem; flex-shrink: 0; }

/* ── Comparison table ───────────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.comparison-table thead th {
  background: var(--c-primary); color: #fff;
  padding: .875rem 1rem; text-align: left; font-weight: 600;
}
.comparison-table tbody tr:nth-child(even) { background: var(--c-bg); }
.comparison-table td {
  padding: .875rem 1rem; border-bottom: 1px solid var(--c-separator);
  vertical-align: middle;
}
.ct-product { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.ct-icon    { font-size: 1rem; flex-shrink: 0; }
.btn-sm-mu  {
  padding: .35rem .875rem; font-size: .8rem; font-weight: 600;
  background: var(--c-accent); color: #fff; border-radius: var(--radius);
  white-space: nowrap; display: inline-block;
}

/* ── Btn outline light (for dark CTA sections) ──────────── */
.btn-outline-light-mu {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.8rem; font-size: .875rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,.4); color: #fff;
  border-radius: var(--radius); cursor: pointer;
  background: transparent;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.btn-outline-light-mu:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }

/* ── Legal content ──────────────────────────────────────── */
.legal-content h2 {
  font-size: 1.1rem; font-weight: 700; color: var(--c-primary);
  margin-top: 2.5rem; margin-bottom: .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--c-separator);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { font-size: .9rem; color: var(--c-text); }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content a { color: var(--c-accent); text-decoration: underline; }

.legal-warning {
  background: #FFF3CD;
  border-left: 4px solid #F4A400;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .875rem;
  color: #7a5100;
  margin: 1rem 0;
  line-height: 1.6;
}

/* ── Privacy / Cookie table ─────────────────────────────── */
.privacy-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 1rem 0 1.5rem; }
.privacy-table th {
  background: var(--c-bg); font-weight: 700; padding: .7rem .875rem;
  border-bottom: 2px solid var(--c-separator); text-align: left; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted);
}
.privacy-table td { padding: .7rem .875rem; border-bottom: 1px solid var(--c-separator); }
.privacy-table code {
  background: var(--c-bg); padding: 2px 6px; border-radius: 4px; font-size: .82rem; color: var(--c-primary);
}