/* ═══════════════════════════════════════════════
   MISE À JOUR DES COULEURS (CHARTE ASSUROMIEUX)
   Gardant la structure originale .hero-per
═══════════════════════════════════════════════ */

:root {
    /* On remplace les anciennes variables par les nouvelles */
    --ink: #0D2B4E;          /* Navy Assuromieux */
    --navy-mid: #1A4A7A;
    --navy-light: #1E5799;
    --blue: #F47920;         /* On map le Bleu original sur l'Orange pour les boutons */
    --orange: #F47920;
    --orange-dark: #D4651A;
    --gold: #F47920;         /* On remplace le doré par l'orange */
    --amber: #D4651A;
     /* --ink: #0A1628; */
  /* --blue: #1553BF; */
  --blue: #2185D0;
  --sky: #3B8BF0;
  --teal: #0C7265;
  --gold: #C9A227;
  --amber: #F59E0B;
  --green: #15803D;
  --red: #DC2626;
  --light: #EEF4FF;
  --sand: #FAF8F3;
  --border: #E0E9F8;
  --text: #1C2B40;
  --muted: #5A6E88;
  --white: #FFFFFF;
  --r: 14px;
  --page: 5%;
    
    /* Typographies Assuromieux */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

/* 1. FOND DU HERO (Dégradé Navy Assuromieux) */
.hero-per {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy-mid) 55%, #1a5a9a 100%) !important;
}

/* On change les effets de lumière pour qu'ils soient subtilement orange */
.hero-per::after {
    background: 
        radial-gradient(ellipse at 75% 30%, rgba(244, 121, 32, .12) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(255, 255, 255, .05) 0%, transparent 50%) !important;
}

/* 2. TYPOGRAPHIES */
.hero-per h1 {
    font-family: var(--font-display) !important;
}

.hero-per h1 em {
    font-family: var(--font-display) !important;
    color: var(--orange) !important; /* L'italique devient Orange */
    font-style: italic;
}

.hero-per-badge {
    background: rgba(244, 121, 32, .15) !important;
    border: 1px solid rgba(244, 121, 32, .35) !important;
    color: var(--orange) !important;
}

/* 3. SWITCH PROFIL (Boutons) */
.ps-btn.active {
    background: var(--orange) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(244, 121, 32, 0.3) !important;
}

/* 4. CHIFFRES CLÉS (Cards) */
.hnum {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}

.hnum-val.gold {
    color: var(--orange) !important; /* Les valeurs importantes passent en Orange */
}

/* 5. DEVIS CARD (La carte formulaire) */
.devis-card {
    border-top: none; /* On enlève si besoin pour laisser le ::before agir */
}

/* La ligne colorée en haut de la card */
.devis-card::before {
    background: linear-gradient(90deg, var(--orange), var(--orange-dark)) !important;
}

.dc-title {
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
}

.dc-sub {
    color: var(--orange) !important; /* Le sous-titre "Simulation fiscale..." passe en orange */
    font-weight: 600;
}

/* 6. INPUTS & FOCUS */
.fg input:focus, .fg select:focus {
    border-color: var(--orange) !important;
}

/* 7. BOUTON DEVIS (Le bouton principal) */
.btn-devis {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
    font-family: var(--font-body) !important;
    box-shadow: 0 6px 20px rgba(244, 121, 32, .3) !important;
}

.btn-devis:hover {
    box-shadow: 0 10px 28px rgba(244, 121, 32, .4) !important;
}

/* 8. ALERTE RÉUSSITE (Success Message) */
.alert.alert-success {
    background: var(--orange-pale) !important;
    border: 1px solid var(--orange-light) !important;
    color: var(--orange-dark) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 64px;
  padding: 0 var(--page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}

.logo span {
  color: var(--blue);
}

.nav-r {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-r a {
  font-size: .87rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.nav-r a:hover {
  color: var(--ink);
}

.nav-cta {
  background: var(--blue);
  color: var(--white) !important;
  padding: 9px 22px;
  border-radius: 100px;
  font-weight: 700 !important;
  transition: opacity .2s !important;
}

.nav-cta:hover {
  opacity: .85;
}

/* ── HERO-PER ── */
.hero-per {
  /* background: var(--ink); */
  padding: 68px var(--page) 52px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.hero-per::after {
  content: '';
  position: absolute;
  inset: 0;
  /* background:
    radial-gradient(ellipse at 75% 30%, rgba(59, 139, 240, .14) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(201, 162, 39, .08) 0%, transparent 50%); */
  pointer-events: none;
}

.hero-per-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* background: rgba(201, 162, 39, .15); */
  /* border: 1px solid rgba(201, 162, 39, .35); */
  color: #E8C55A;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-per h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.hero-per h1 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: #A8C8F8;
}

.hero-per-lead {
  font-size: 1.02rem;
  color: #8DAFC8;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 500px;
}

.hero-per-lead strong {
  color: var(--white);
}

/* Switch profil dans le hero-per */
.profile-switch {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: 4px;
  width: fit-content;
}

.ps-btn {
  padding: 8px 22px;
  border-radius: 100px;
  border: none;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  color: #8DAFC8;
  background: transparent;
}

.ps-btn.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.hero-per-nums {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hnum {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 14px 18px;
}

.hnum-val {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--white);
}

.hnum-val.gold {
  color: #E8C55A;
}

.hnum-lab {
  font-size: .75rem;
  color: #7A9DC0;
  margin-top: 2px;
}

/* ── DEVIS CARD ── */
/* ── ADAPTATION DU FORMULAIRE AU BLEU NAVY ── */

.devis-card {
    /* On utilise le bleu navy profond pour le fond du formulaire */
    background: var(--navy) !important; 
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px); /* Effet de transparence moderne */
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5) !important;
}

/* On change les textes pour qu'ils soient blancs/clairs */
.dc-title {
    color: var(--white) !important;
    font-family: var(--font-body) !important;
}

.dc-sub {
    color: var(--orange) !important; /* Le sous-titre en orange pour le contraste */
    opacity: 1 !important;
}

/* Adaptation des champs de saisie (Inputs) */
.fg label {
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fg input, 
.fg select {
    background: rgba(15, 52, 96, 0.7) !important; /* Bleu encore plus sombre pour l'intérieur */
    border: 1px solid rgba(200, 223, 244, 0.2) !important;
    color: var(--white) !important;
}

.fg input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* État Focus : Bordure orange au clic */
.fg input:focus, 
.fg select:focus {
    border-color: var(--orange) !important;
    background: rgba(15, 52, 96, 0.9) !important;
}

/* Le texte de confiance en bas */
.dc-trust {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* La ligne décorative en haut reste orange */
.devis-card::before {
    background: var(--orange) !important;
    height: 3px !important;
}
.devis-card {
  /* background: var(--white); */
  border-radius: 18px;
  padding: 30px 26px;
  position: relative;
  z-index: 1;
  /* box-shadow: 0 28px 70px rgba(0, 0, 0, .38); */
}

.devis-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* background: linear-gradient(90deg, var(--gold), var(--amber)); */
  border-radius: 18px 18px 0 0;
}

.dc-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.dc-sub {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 20px;
}

.fg {
  margin-bottom: 12px;
}

.fg label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.fg input,
.fg select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  color: var(--text);
  background: #F6F9FF;
  transition: border-color .2s;
  appearance: none;
  -webkit-appearance: none;
}

.fg input:focus,
.fg select:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.btn-devis {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue), #0D3FA0);
  /* background-color: #2185D0; */
  color: var(--white);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .97rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(21, 83, 191, .35);
  margin-top: 6px;
}

.btn-devis:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(21, 83, 191, .45);
}

.btn-devis:active {
  transform: translateY(0);
}

.dc-trust {
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  margin-top: 9px;
}

#form-success {
  display: none;
  text-align: center;
  padding: 16px 0;
}

#form-success .big {
  font-size: 3rem;
  margin-bottom: 10px;
}

#form-success h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

#form-success p {
  font-size: .85rem;
  color: var(--muted);
}

/* ── ALERTE ── */
.alerte-band {
  display: flex;
  gap: 18px;
  align-items: center;
  background: linear-gradient(90deg, #FFFBEB, #FFFDF5);
  border-left: 5px solid var(--amber);
  padding: 20px var(--page);
}

.alerte-band .ico {
  font-size: 2rem;
  flex-shrink: 0;
}

.alerte-band p {
  font-size: .91rem;
  color: var(--text);
}

.alerte-band strong {
  color: var(--ink);
}

/* ── SECTIONS ── */
.sec {
  padding: 72px var(--page);
}

.sec.bg-light {
  background: var(--light);
}

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

.sec.bg-ink {
  background: var(--ink);
}

.slabel {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.stitle {
  font-size: clamp(1.65rem, 2.8vw, 2.3rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

.stitle.w {
  color: var(--white);
}

.ssub {
  font-size: .98rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.7;
}

.ssub.w {
  color: #7A9DC0;
}

/* ── PROFIL TABS ── */
.ptabs {
  display: flex;
  gap: 6px;
  margin: 36px 0 28px;
}

.ptab {
  padding: 9px 24px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
}

.ptab.active,
.ptab:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.ppanel {
  display: none;
}

.ppanel.active {
  display: block;
}

/* ── BLOCS PROFILS ── */
.pblock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.pcard {
  background: var(--white);
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  padding: 26px 22px;
  transition: box-shadow .2s, border-color .2s;
}

.pcard:hover {
  box-shadow: 0 6px 24px rgba(21, 83, 191, .1);
  border-color: var(--sky);
}

.pcard-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.pcard-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .97rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.pcard-body {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.65;
}

.pcard-val {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue);
  margin-top: 10px;
}
/* Forcer l'affichage sur 2 colonnes sur les écrans larges (Desktop) */
@media (min-width: 992px) {
    .pblock-grid {
        display: grid !important; /* Le !important est une sécurité si une autre règle écrase celle-ci */
        grid-template-columns: 1fr 1fr !important;
        gap: 22px;
    }
}

/* Optionnel : Passage sur 1 seule colonne sur mobile pour éviter que les cartes soient trop étroites */
@media (max-width: 768px) {
    .pblock-grid {
        grid-template-columns: 1fr;
    }
    
    .ptabs {
        flex-wrap: wrap; /* Permet aux boutons de revenir à la ligne si besoin sur mobile */
    }
}
/* ── PLAFONDS VISUELS ── */
.plafonds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}

.plafond-card {
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.plafond-card.sal {
  background: var(--ink);
}

.plafond-card.tns {
  background: linear-gradient(135deg, #0A1628, #163060);
}

.pc-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.plafond-card.sal .pc-eyebrow {
  color: #7A9DC0;
}

.plafond-card.tns .pc-eyebrow {
  color: #E8C55A;
}

.pc-amount {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.pc-unit {
  font-size: .9rem;
  margin-top: 4px;
  margin-bottom: 20px;
}

.plafond-card.sal .pc-unit {
  color: #7A9DC0;
}

.plafond-card.tns .pc-unit {
  color: #A8C8F8;
}

.pc-formula {
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.pc-formula p {
  font-size: .82rem;
  line-height: 1.8;
}

.plafond-card.sal .pc-formula p {
  color: #9BBAD8;
}

.plafond-card.tns .pc-formula p {
  color: #A8C8F8;
}

.pc-formula strong {
  color: var(--white);
}

.pc-note {
  font-size: .78rem;
  font-style: italic;
  color: #6A90AF;
}

.plafond-card.tns .pc-note {
  color: #8AABCF;
}

/* Décoration bulle */
.plafond-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 70%);
}

/* ── SIMULATEUR ── */
.simu-wrap {
  max-width: 780px;
  margin: 48px auto 0;
  background: var(--white);
  border-radius: 18px;
  border: 1.5px solid var(--border);
  padding: 34px 36px;
  box-shadow: 0 4px 32px rgba(21, 83, 191, .07);
}

.simu-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.simu-sub {
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 26px;
}

.simu-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.simu-grp label {
  display: block;
  font-size: .81rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.simu-grp input,
.simu-grp select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  background: #F6F9FF;
  appearance: none;
  color: var(--text);
}

.simu-grp input:focus,
.simu-grp select:focus {
  outline: none;
  border-color: var(--blue);
}

.btn-simu {
  margin-top: 22px;
  padding: 12px 30px;
  border: none;
  border-radius: 9px;
  background: var(--ink);
  color: var(--white);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.btn-simu:hover {
  background: var(--blue);
}

.simu-result {
  display: none;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.simu-result.show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sr {
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}

.sr.b {
  background: var(--light);
}

.sr.g {
  background: #F0FDF4;
}

.sr.a {
  background: #FFFBEB;
}

.sr-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.sr.b .sr-num {
  color: var(--blue);
}

.sr.g .sr-num {
  color: var(--green);
}

.sr.a .sr-num {
  color: var(--gold);
}

.sr-lbl {
  font-size: .78rem;
  color: var(--muted);
}

/* ── TABLEAU FISCAL ── */
.fiscal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
}

.fg-head {
  background: var(--ink);
  padding: 14px 16px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.fg-head:last-child {
  border-right: none;
}

.fg-cell {
  padding: 14px 16px;
  font-size: .86rem;
  text-align: center;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.fg-cell:last-child {
  border-right: none;
}

.fg-cell.tmi {
  font-weight: 700;
  color: var(--ink);
  background: #F8FAFF;
}

.fg-cell.eco {
  font-weight: 700;
  color: var(--green);
}

.fg-cell.note {
  font-size: .78rem;
  color: var(--muted);
}

/* ── AVANTAGES ── */
.avantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.av-card {
  border-radius: var(--r);
  padding: 26px 22px;
  background: var(--white);
  border: 1.5px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.av-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(21, 83, 191, .1);
}

.av-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.av-card:nth-child(1)::before {
  background: var(--blue);
}

.av-card:nth-child(2)::before {
  background: var(--teal);
}

.av-card:nth-child(3)::before {
  background: var(--gold);
}

.av-card:nth-child(4)::before {
  background: #8B5CF6;
}

.av-card:nth-child(5)::before {
  background: var(--red);
}

.av-card:nth-child(6)::before {
  background: var(--green);
}

.av-icon {
  font-size: 2rem;
  margin-bottom: 14px;
}

.av-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .97rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.av-body {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.65;
}

.av-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: .73rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--light);
  color: var(--blue);
}

/* ── COMPARATIF ── */
.comp-wrap {
  margin-top: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
}

.comp-table thead tr {
  background: var(--ink);
}

.comp-table th {
  padding: 15px 18px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .83rem;
  font-weight: 700;
  color: var(--white);
  text-align: left;
}

.comp-table th.hl {
  background: var(--blue);
}

.comp-table td {
  padding: 13px 18px;
  font-size: .86rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.comp-table tbody tr:last-child td {
  border-bottom: none;
}

.comp-table tbody tr:nth-child(even) {
  background: #FAFCFF;
}

.ok {
  color: var(--green);
  font-weight: 700;
}

.ko {
  color: var(--red);
  font-weight: 700;
}

.so {
  color: var(--gold);
  font-weight: 600;
}

/* ── DÉBLOCAGE ── */
.deblocage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.db-card {
  border-radius: var(--r);
  padding: 22px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid var(--border);
  background: var(--white);
}

.db-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.db-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.db-body {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.6;
}

.db-card.resi {
  border-color: #FCD34D;
  background: #FFFBEB;
}

/* ── FAQ ── */
.faq-wrap {
  max-width: 820px;
  margin-top: 44px;
}

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

.faq-q {
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-q:hover {
  color: var(--blue);
}

.faq-chev {
  font-size: .95rem;
  color: var(--blue);
  transition: transform .25s;
  flex-shrink: 0;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.75;
}

.faq-item.open .faq-a {
  max-height: 400px;
  padding-bottom: 18px;
}

.faq-item.open .faq-chev {
  transform: rotate(180deg);
}

/* ── ÉTAPES ── */
.etapes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}

.etapes-grid::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}

.etape {
  text-align: center;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}

.etape-ball {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue);
}

.etape h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 7px;
}

.etape p {
  font-size: .81rem;
  color: var(--muted);
}

/* ── CTA FINAL ── */
.cta-sec {
  background: var(--ink);
  padding: 72px var(--page);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(59, 139, 240, .14) 0%, transparent 55%);
  pointer-events: none;
}

.cta-sec h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 14px;
}

.cta-sec p {
  font-size: .98rem;
  color: #7A9DC0;
  max-width: 540px;
  margin: 0 auto 36px;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: var(--ink);
  padding: 15px 34px;
  border-radius: 100px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: .97rem;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(201, 162, 39, .35);
  transition: opacity .2s, transform .15s;
}

.btn-gold:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.btn-ghost {
  border: 2px solid rgba(255, 255, 255, .2);
  color: var(--white);
  padding: 15px 34px;
  border-radius: 100px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  transition: border-color .2s;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, .7);
}

/* ── FOOTER ── */
footer {
  background: #060E1C;
  padding: 32px var(--page);
  text-align: center;
  font-size: .79rem;
  color: #3A5070;
  line-height: 2;
}

footer strong {
  color: #6A90AF;
  font-family: 'Cabinet Grotesk', sans-serif;
}

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

  .devis-card {
    max-width: 460px;
  }

  .plafonds-grid {
    grid-template-columns: 1fr;
  }

  .avantages-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pblock-grid {
    grid-template-columns: 1fr 1fr;
  }

  .deblocage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .etapes-grid {
    grid-template-columns: 1fr 1fr;
  }

  .etapes-grid::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .nav-r a:not(.nav-cta) {
    display: none;
  }

  .avantages-grid,
  .pblock-grid,
  .deblocage-grid,
  .simu-row {
    grid-template-columns: 1fr;
  }

  .simu-result.show,
  .fiscal-grid {
    grid-template-columns: 1fr;
  }

  .simu-wrap {
    padding: 22px 18px;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-per>* {
  animation: fadeUp .6s ease both;
}

.hero-per>*:nth-child(2) {
  animation-delay: .1s;
}

.list-bricolage li {
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13.92px;
  line-height: 22.292px;
  color: #566880;

  /* Optionnel : pour annuler les marges par défaut de Bootstrap si besoin */
  margin-bottom: 0.5rem;
}