/* ===== Polices (Montserrat hébergée localement, latin uniquement) ===== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/montserrat-300.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-800.woff2") format("woff2");
}

/* ===== Variables ===== */
:root {
  --blue: #2154a8;
  --blue-dark: #1b4590;
  --red: #b3202a;
  --yellow: #fbc531;
  --text: #333333;
  --text-light: #666666;
  --bg-light: #f6f8fc;
  --bg-photo: #dce6f7; /* fond affiché le temps que la photo charge */
  --border: #d9e0ee;
  --radius: 16px;
  --radius-lg: 24px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
  background: #fff;
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3, h4, strong, b, th { font-weight: 800; } /* seules graisses chargées : 300, 400, 800 */
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Largeur maximale du contenu, centré */
.container, .header__inner, .hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-blue { color: var(--blue); }

.icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }

/* ===== Boutons et badges ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #961a23; }
.btn--yellow { background: var(--yellow); color: #222; }
.btn--yellow:hover { background: #f0b81a; }
.btn--outline { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--large { padding: 14px 28px; font-size: 0.95rem; }

.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--yellow);
  font-size: 0.65rem;
  font-weight: 800;
  color: #222;
}
.badge--small { font-size: 0.6rem; padding: 2px 10px; }

/* ===== En-tête ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.header__inner {
  min-height: 84px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; width: auto; height: 40px; }

.nav { display: flex; align-items: stretch; gap: 16px; }
.nav__list { display: flex; align-items: stretch; gap: 16px; }
.nav__list > li { position: relative; display: flex; align-items: center; gap: 6px; }
.nav__cta { align-self: center; white-space: nowrap; }

.nav__link {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--blue);
  padding: 3px 0 0;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  align-self: stretch;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__link.is-active { font-weight: 800; color: #1d2f5c; border-bottom-color: var(--blue); }
.nav__link:hover { text-decoration: underline; }
.icon--chevron { width: 0.9em; height: 0.9em; }

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 160px;
  padding: 6px 0;
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.submenu a { display: block; padding: 8px 14px; white-space: nowrap; font-size: 0.7rem; color: var(--blue); }
.submenu a:hover { background: var(--bg-light); }
.submenu a[aria-current="page"] { font-weight: 800; background: var(--bg-light); box-shadow: inset 3px 0 0 var(--blue); } /* page en cours */
.has-submenu:hover .submenu,
.has-submenu.is-open .submenu { display: block; }

.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 24px; height: 3px; margin: 4px 0; background: var(--blue); border-radius: 2px; }

/* ===== Hero ===== */
.hero {
  overflow: clip; /* clip (et non hidden) pour ne pas casser le sticky */
  --hero-photo: url("../img/hero-accueil.webp");
}
/* Photo du hero : une par page */
.hero--investissement-locatif { --hero-photo: url("../img/hero-investissement-locatif.webp"); }
.hero--bailleur-prive { --hero-photo: url("../img/hero-bailleur-prive.webp"); }
.hero--lmnp { --hero-photo: url("../img/hero-lmnp.webp"); }
.hero--malraux { --hero-photo: url("../img/hero-malraux.webp"); }
.hero--denormandie { --hero-photo: url("../img/hero-denormandie.webp"); }
.hero--loc-avantages { --hero-photo: url("../img/hero-loc-avantages.webp"); }
.hero--deficit-foncier { --hero-photo: url("../img/hero-deficit-foncier.webp"); }
.hero--nue-propriete { --hero-photo: url("../img/hero-nue-propriete.webp"); }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}
.hero__content { position: sticky; top: 84px; z-index: 1; align-self: start; padding: 40px 0; }
.hero__content h1 { margin: 16px 0; font-size: 2.4rem; line-height: 1.2; }
.hero__lead { margin-bottom: 12px; font-size: 1.05rem; font-weight: 400; line-height: 1.4; } /* accroche au-dessus du texte */
.hero__text { max-width: 420px; font-size: 0.9rem; margin-bottom: 24px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.hero__more { max-width: 420px; margin-top: 32px; padding: 20px 22px; background: var(--bg-light); border-radius: var(--radius); }
.hero__more-title { margin-bottom: 14px; font-size: 1rem; color: var(--blue); }
.hero__steps { display: grid; gap: 12px; counter-reset: step; }
.hero__steps li { position: relative; padding-left: 36px; font-size: 0.75rem; color: var(--text-light); counter-increment: step; }
.hero__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); color: #222; font-weight: 800; font-size: 0.75rem; }
.hero__steps strong { display: block; color: var(--text); font-size: 0.8rem; }

.hero__shape { display: none; } /* visible uniquement sur tablette et mobile */

.hero__visual { position: relative; min-height: 740px; }
.hero__photo {
  position: absolute;
  inset: 0 130px 0 -170px;
  background: var(--hero-photo) right top / contain no-repeat;
}
.widget {
  position: relative;
  width: 400px;
  max-width: 100%;
  min-height: 150px;
  margin: 56px 0 20px auto; /* aligné sur le haut du titre (padding 40px + marge du h1 16px) */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* ===== Réassurance ===== */
.reassurance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reassurance li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; font-size: 0.65rem; color: var(--text-light); }
.reassurance .icon { grid-row: span 3; color: var(--blue); width: 1.8em; height: 1.8em; }
.reassurance strong { color: var(--text); font-size: 0.7rem; }
.reassurance span { grid-column: 2; }
.reassurance--light li,
.reassurance--light strong,
.reassurance--light .icon { color: #fff; }

.scroll-arrow { position: relative; text-align: center; color: var(--blue); margin: -30px 0 10px; }
.scroll-arrow .icon { width: 28px; height: 34px; }

/* ===== Sections ===== */
.section { padding: 40px 0; }
.section__title { text-align: center; font-size: 1.6rem; line-height: 1.3; }
.section__title + * { margin-top: 30px; } /* titre sans sous-titre : même espace avant le contenu */
.section__subtitle { text-align: center; font-size: 0.85rem; color: var(--text-light); margin: 12px 0 30px; }

/* ===== Onglets ===== */
.tabs { display: grid; border: 1px solid var(--blue); border-radius: 6px; overflow: hidden; }
/* Tous les panneaux sont superposés dans la même cellule : la boîte garde la hauteur du plus grand */
.tabs__panel { grid-row: 2; grid-column: 1; display: grid; }
.tabs__panel[hidden] { display: grid; visibility: hidden; }
.tabs__list { display: grid; grid-template-columns: repeat(7, 1fr); }
.tabs__tab {
  padding: 12px 6px;
  border: 0;
  border-left: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  background: #fff;
  color: #222;
  font-size: 0.8rem;
  font-weight: 400;
}
.tabs__tab:first-child { border-left: 0; }
.tabs__tab.is-active { background: var(--blue); color: #fff; font-weight: 800; }

.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 30px 30px 40px; background: var(--bg-light); align-items: start; }
.panel__text { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.panel__text .btn { margin-top: auto; }
.panel__kicker:first-child { margin-top: 36px; } /* même position du titre que le panneau avec badge */
.panel__kicker { margin-top: 14px; color: var(--red); font-weight: 800; font-size: 0.85rem; }
.panel__title { color: var(--blue); font-size: 1.7rem; margin: 4px 0 12px; }
.panel__lead { min-height: 3em; font-weight: 800; font-size: 0.9rem; margin-bottom: 16px; }

.checklist { display: grid; gap: 10px; margin-bottom: 24px; }
.checklist li { display: flex; gap: 8px; font-size: 0.7rem; color: var(--text-light); }
.checklist .icon { width: 1.1em; height: 1.1em; margin-top: 2px; }
.checklist strong { display: block; color: #222; font-size: 0.75rem; }

.panel__visual { position: relative; align-self: stretch; display: flex; flex-direction: column; padding-bottom: 40px; }
.panel__photo {
  flex: 1;
  min-height: 320px;
  border-radius: var(--radius-lg);
  background: var(--bg-photo) center / cover no-repeat;
}
/* Photo chargée seulement quand l'onglet est affiché, pour ne pas charger les 7 images d'un coup */
.tabs__panel:not([hidden]) .panel__photo--jeanbrun { background-image: url("../img/dispositif-jeanbrun.webp"); }
.tabs__panel:not([hidden]) .panel__photo--denormandie { background-image: url("../img/dispositif-denormandie.webp"); }
.tabs__panel:not([hidden]) .panel__photo--malraux { background-image: url("../img/dispositif-malraux.webp"); }
.tabs__panel:not([hidden]) .panel__photo--lmnp { background-image: url("../img/dispositif-lmnp.webp"); }
.tabs__panel:not([hidden]) .panel__photo--loc-avantages { background-image: url("../img/dispositif-loc-avantages.webp"); }
.tabs__panel:not([hidden]) .panel__photo--deficit-foncier { background-image: url("../img/dispositif-deficit-foncier.webp"); }
.tabs__panel:not([hidden]) .panel__photo--nue-propriete { background-image: url("../img/dispositif-nue-propriete.webp"); }
.panel__card {
  position: absolute;
  bottom: 0;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
  max-width: 80%;
}
.panel__card-icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--bg-light); border-radius: 10px; color: var(--blue); flex-shrink: 0; }
.panel__card-icon .icon { width: 32px; height: 32px; }

/* ===== Tableau comparatif ===== */
.compare { margin-top: 30px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.compare__table { width: 100%; min-width: 860px; border-collapse: collapse; text-align: center; font-size: 0.65rem; }
.compare__table th, .compare__table td { padding: 14px 8px; border-left: 1px solid var(--border); }
.compare__table thead th { position: relative; padding-top: 24px; font-size: 0.8rem; font-weight: 400; vertical-align: top; }
.compare__label { display: flex; align-items: center; justify-content: center; min-height: 2.6em; line-height: 1.3; }
.compare__table tbody th { width: 14%; text-align: left; padding-left: 16px; font-size: 0.7rem; background: #fff; }
.compare__table tbody td { color: var(--text-light); }
.compare__table tbody tr:nth-child(even),
.compare__table tbody tr:nth-child(even) th { background: var(--bg-light); }

.compare__badge { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); }
.compare__icon { display: block; margin: 0 auto 8px; width: 46px; height: 46px; color: var(--blue); }
.compare__link { display: inline-grid; place-items: center; color: var(--blue); font-size: 1.4rem; }
.compare__link:hover { color: var(--red); }

/* Cartes du comparatif : visibles uniquement sur mobile */
.compare-cards { display: none; }

/* ===== Bandeau final ===== */
.cta { display: grid; grid-template-columns: 1fr 2fr; background: var(--blue); border-radius: var(--radius-lg); overflow: hidden; color: #fff; }
.cta__photo { min-height: 200px; background: url("../img/conseillers.webp") left center / cover no-repeat; }
.cta__content { padding: 28px 30px; }
.cta__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cta h2 { font-size: 1.5rem; }
.cta__content > p { font-size: 0.85rem; font-weight: 400; max-width: 520px; margin-bottom: 18px; }

/* ===== Pages dispositif (ex. LMNP) ===== */

/* Fil d'Ariane */
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 16px 20px 0; font-size: 0.7rem; color: var(--text-light); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { font-weight: 800; color: var(--text); }

/* Cartes : icône à gauche, titre et texte à droite, photo optionnelle en bas */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards--duo { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; margin-top: 20px; } /* deux blocs seuls : centrés */
.cards + .cards--duo { grid-template-columns: 2fr 3fr; } /* sous une rangée de 3 cartes : pleine largeur */
.section__subtitle + .cards--duo { margin-top: 0; } /* duo utilisé seul, sans rangée de 3 cartes au-dessus */
.card { display: flex; flex-direction: column; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.card__body { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 22px 22px 24px 14px; }
.card__icon { grid-row: span 2; width: 40px; height: 40px; color: var(--blue); }
.card__title { align-self: center; color: var(--blue); font-size: 1.05rem; line-height: 1.25; }
.card__text, .card__label, .card__list { grid-column: 2; }
.card__text { margin-top: 8px; font-size: 0.75rem; }
.card__icon + .card__text { margin-top: 0; } /* carte sans titre : le texte s'aligne en haut, à côté de l'icône */
.card__photo { display: block; width: 100%; height: 200px; margin-top: auto; object-fit: cover; background: var(--bg-photo); }
.card__label { margin: 14px 0 6px; color: var(--blue); font-size: 0.75rem; font-weight: 800; }
.card__list { display: grid; gap: 8px; font-size: 0.75rem; }
.card__title + .card__list { margin-top: 14px; } /* liste à coches juste sous le titre */
.card__list li { display: flex; gap: 8px; }
.card__list .icon { width: 1.5em; height: 1.5em; color: var(--blue); }

/* Étapes numérotées reliées par des pointillés */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 30px 20px; background: var(--bg-light); border-radius: var(--radius-lg); text-align: center; font-size: 0.75rem; }
.steps li { position: relative; }
.steps li + li::before { content: ""; position: absolute; top: 36px; right: 50%; width: calc(100% + 20px); border-top: 3px dashed var(--blue); }
.steps__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; background: var(--blue); color: #fff; }
.steps__icon--yellow { background: var(--yellow); }
.steps__icon .icon { width: 40px; height: 40px; }
.steps__number { display: block; color: var(--blue); font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.steps__title { margin-bottom: 4px; color: var(--blue); font-size: 0.9rem; }
.steps p { max-width: 220px; margin: 0 auto; }

/* Bandeau bleu pleine largeur */
.banner { margin: 40px 0; padding: 36px 20px; background: var(--blue); color: #fff; text-align: center; }
.banner h2 { margin-bottom: 18px; font-size: 1.6rem; }

/* Régime fiscal : photo à gauche, cartes à droite */
.regime { display: grid; grid-template-columns: 4fr 3fr; gap: 20px; }
/* La photo remplit le bloc de gauche : c'est la hauteur des cartes qui fixe celle de la photo */
.regime__visual { position: relative; min-height: 400px; }
.regime__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-photo); }
.regime__photo--haut { object-position: 50% 35%; } /* garde le visage visible quand la photo est recadrée */
.regime__cards { display: grid; gap: 20px; align-content: start; }

/* Encadré de texte */
.note { margin-top: 20px; padding: 20px 24px; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.75rem; }
.note p + p { margin-top: 12px; }
.regime__cards .note { margin-top: 0; }

/* Raisons d'investir : cartes numérotées avec une grande icône en filigrane */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 0; }
.reasons--four { grid-template-columns: repeat(2, 1fr); } /* 4 étapes : grille 2 × 2 */
.reasons--four .reason { padding-right: 110px; } /* cartes basses : place réservée au picto */
.reasons--four .reason__watermark { top: 50%; bottom: auto; width: 80px; height: 80px; transform: translateY(-50%); }
.reason { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 22px 22px 24px 18px; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.reason__number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.1rem; font-weight: 800; }
.reason__title { position: relative; z-index: 1; align-self: center; color: var(--blue); font-size: 1.05rem; line-height: 1.25; }
.reason__text { position: relative; z-index: 1; grid-column: 2; margin-top: 12px; font-size: 0.75rem; }
.reason__text p + p { margin-top: 10px; }
.reason__text strong { color: var(--blue); }
.reason__watermark { position: absolute; right: 14px; bottom: 14px; width: 110px; height: 110px; color: #dbe3f2; }

/* Frise de la loi Pinel : étapes à gauche, message et bouton à droite */
.timeline { display: grid; grid-template-columns: 1fr 260px; gap: 30px; padding: 30px; background: var(--bg-light); border-radius: var(--radius-lg); }
.timeline .steps { padding: 0; background: none; }
.timeline__aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding-left: 30px; border-left: 1px solid var(--border); font-size: 1rem; }

/* Bloc photo + texte (page Dispositif Jeanbrun) : photo à gauche, texte et tableaux à droite */
.feature { display: grid; grid-template-columns: 1fr 3fr; background: var(--bg-light); border-radius: var(--radius-lg); overflow: hidden; }
.feature__photo { width: 100%; height: 100%; object-fit: cover; background: var(--bg-photo); }
.feature__body { padding: 28px; font-size: 0.75rem; }
.feature__body p + p { margin-top: 10px; }
.feature__label { margin: 20px 0 6px; color: var(--blue); font-size: 0.8rem; }
.feature__list { display: grid; gap: 4px; }
.feature__list li { position: relative; padding-left: 14px; }
.feature__list li::before { content: "•"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.feature__split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.feature__tables { display: grid; gap: 16px; margin-top: 20px; }

/* Tableaux de chiffres (taux d'amortissement, comparaison Pinel / Jeanbrun) */
.rates { width: 100%; border-collapse: separate; border-spacing: 3px; background: #fff; font-size: 0.7rem; text-align: center; }
.rates th, .rates td { padding: 8px 6px; }
.rates thead th,
.rates--side tbody th { background: var(--blue); color: #fff; }
.rates td { background: #e6edf9; }
.rates .icon { width: 1.3em; height: 1.3em; vertical-align: middle; }
.rates__no { color: var(--red); }
.rates--stack { margin-top: 30px; }
.regime .rates--stack { margin-top: 0; } /* tableau à côté d'une photo */
.show-more { display: none; } /* bouton « Voir tous les plafonds » : uniquement sur mobile */

/* Comparaison Pinel / Jeanbrun (page Dispositif Jeanbrun) : texte à gauche, tableau à droite */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; padding: 28px; background: var(--bg-light); border-radius: var(--radius-lg); font-size: 0.8rem; }
.duel__text p + p { margin-top: 12px; }

/* ===== Page 404 ===== */
.error { padding: 70px 0 60px; text-align: center; }
.error__code { color: var(--blue); font-size: 7rem; font-weight: 800; line-height: 1; }
.error__code::after { content: ""; display: block; width: 80px; height: 6px; margin: 16px auto 0; border-radius: 3px; background: var(--yellow); }
.error__title { margin: 24px 0 14px; font-size: 2rem; line-height: 1.25; }
.error__text { max-width: 560px; margin: 0 auto 28px; font-size: 0.9rem; color: var(--text-light); }
.error__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Liens vers les pages du site : 4 colonnes */
.error-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.error-links__item { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--blue); font-size: 0.85rem; font-weight: 800; transition: transform 0.2s, box-shadow 0.2s; }
.error-links__item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.error-links__item .icon { width: 32px; height: 32px; }

/* ===== Formes décoratives (inspirées du guide PDF) ===== */

/* Section sur fond bleu clair : les blocs qui ont déjà ce fond passent en blanc */
.section--tinted { background: var(--bg-light); }
.section--tinted .card,
.section--tinted .steps,
.section--tinted .note,
.section--tinted .compare,
.section--tinted .timeline,
.section--tinted .duel { background: #fff; }
.section--tinted + .banner { margin-top: 0; } /* pas de bande blanche entre le fond bleu clair et le bandeau */

/* Demi-cercle qui dépasse du bord de l'écran, en haut à droite (jaune) ou à gauche (bleu) */
.section--shape-right,
.section--shape-left { position: relative; overflow: clip; }
.section--shape-right::before,
.section--shape-left::before {
  content: "";
  position: absolute;
  top: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
}
.section--shape-right::before { right: -120px; background: var(--yellow); }
.section--shape-left::before { left: -120px; background: var(--blue); }
.section--shape-right .container,
.section--shape-left .container { position: relative; } /* le contenu passe au-dessus de la forme */

/* Section avec forme juste après le bandeau bleu : la forme se colle au bandeau, l'espace passe à l'intérieur */
.banner:has(+ .section--shape-right),
.banner:has(+ .section--shape-left) { margin-bottom: 0; }
.banner + .section--shape-right,
.banner + .section--shape-left { padding-top: 80px; }

/* ===== Pied de page ===== */
.footer { margin-top: 20px; padding: 14px 20px; text-align: center; background: #eaeaea; font-size: 0.7rem; color: var(--text-light); }
.footer a { color: inherit; text-decoration: underline; }
.footer a:hover { color: var(--text); }
.footer-legal { max-width: 1160px; margin: 10px auto 0; line-height: 1.5; text-align: justify; }

/* ===== Animations ===== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Hero : les éléments apparaissent les uns après les autres au chargement.
   Le titre et les photos s'affichent tout de suite : c'est sur eux que Google mesure la vitesse d'affichage (LCP). */
.hero__content > :not(h1, .hero__shape) { animation: fade-up 0.6s ease both; }
.hero__text { animation-delay: 0.1s; }
.hero__buttons { animation-delay: 0.2s; }
.reassurance { animation-delay: 0.3s; }
.hero__more { animation-delay: 0.4s; }

/* Flèche sous le hero : léger rebond */
.scroll-arrow .icon { animation: bounce 1.2s ease-in-out infinite; }

/* Onglets : le contenu apparaît en fondu à chaque changement */
.tabs__panel:not([hidden]) .panel { animation: fade-in 0.4s ease; }

/* Cartes du comparatif mobile : légère élévation au survol */
.compare-card { transition: transform 0.2s, box-shadow 0.2s; }
.compare-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }

/* Apparition au scroll (classes ajoutées par main.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Hero des pages dispositif sur desktop : identique à la page d'accueil =====
   Le fil d'Ariane est posé par-dessus le haut du hero : il ne décale rien,
   la photo de fond reste donc exactement au même endroit sur toutes les pages. */
@media (min-width: 1025px) {
  .hero--page { position: relative; }
  .hero--page .breadcrumb { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
}

/* ===== Menu burger (en dessous de 1240px) ===== */
@media (max-width: 1240px) {
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 4px; }
  .nav__list > li { flex-wrap: wrap; }
  .nav__link { font-size: 0.9rem; padding: 8px 0; }
  .submenu { position: static; width: 100%; box-shadow: none; padding-left: 12px; }
  .has-submenu:hover .submenu { display: none; }
  .has-submenu.is-open .submenu { display: block; }
  .nav__cta { width: 100%; }
}

/* ===== Tablette ===== */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { min-height: 0; }
  .hero__photo { display: none; }

  /* Hero : texte et boutons à gauche, forme bleue avec photo à droite */
  .hero__content { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); column-gap: 30px; }
  .hero--page .hero__content { padding-top: 16px; } /* place laissée au fil d'Ariane */
  .hero__content > * { grid-column: 1 / -1; }
  .hero__content h1 { grid-row: 1; }
  .br-desktop { display: none; } /* retour à la ligne affiché uniquement sur desktop */
  .hero__text { grid-column: 1; grid-row: 2; }
  .hero__buttons { grid-column: 1; grid-row: 3; }
  .reassurance { grid-row: 4; }
  .hero__more { grid-row: 5; }
  .hero__shape {
    display: block;
    grid-column: 2;
    grid-row: 2 / 4;
    min-height: 140px;
    margin: 0 -40px 28px 0; /* déborde sur le bord droit de l'écran */
    border-radius: 999px 0 0 999px;
    background: var(--hero-photo) 58% 12% / 170% auto no-repeat;
    box-shadow: -14px 14px 0 var(--blue);
  }

  /* Onglets : 7 colonnes sur une ligne, texte plus petit */
  .tabs__tab { padding: 10px 4px; font-size: 0.72rem; }
  /* Contenu : photo en bandeau au-dessus, texte en dessous */
  .panel { grid-template-columns: 1fr; gap: 24px; }
  .panel__visual { order: -1; }
  .panel__photo { min-height: 280px; }
  .panel__card { left: 0; right: 0; width: fit-content; margin: 0 auto; }
  .checklist { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .panel__text .btn { align-self: center; }

  .scroll-arrow { display: none; }
  .widget { width: 700px; margin-top: 20px; margin-left: auto; margin-right: auto; }

  /* Bloc étapes du hero : pleine largeur, 3 étapes côte à côte */
  .hero__more { max-width: none; }
  .hero__steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero__steps li { padding-left: 0; padding-top: 34px; }

  /* Bandeau final : photo à gauche, pastilles sur deux colonnes */
  .cta { grid-template-columns: 35% 1fr; }
  .cta .reassurance { grid-template-columns: 1fr 1fr; }
  .cta__photo { background-image: url("../img/conseillers-mobile.webp"); background-position: right center; }

  /* Cartes sur deux colonnes : la dernière carte seule prend toute la largeur */
  .cards, .cards--duo, .cards + .cards--duo { grid-template-columns: 1fr 1fr; }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps { padding: 24px 12px; }
  .steps__icon { width: 60px; height: 60px; }
  .steps__icon .icon { width: 32px; height: 32px; }
  .steps li + li::before { top: 30px; }
  /* Régime fiscal : photo en bandeau au-dessus des cartes */
  .regime { grid-template-columns: 1fr; }
  .regime__visual { min-height: 280px; }

  /* Investissement locatif : blocs sur une colonne, raisons sur deux colonnes */
  .reasons { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline .steps__number { font-size: 1.3rem; }
  .timeline__aside { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .feature { grid-template-columns: 1fr; }
  .feature__photo { height: 260px; }
  .feature__split { grid-template-columns: 1fr; gap: 0; }
  .duel { grid-template-columns: 1fr; }

  /* Page 404 : liens sur deux colonnes */
  .error-links { grid-template-columns: 1fr 1fr; }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  /* Hero sur une seule colonne */
  .hero__content { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  /* Titre principal : 3 lignes max. Taille proportionnelle à l'écran et retours à la ligne
     forcés ignorés : le texte se répartit naturellement sur la largeur disponible. */
  .hero__content h1 { font-size: clamp(1.2rem, 6.4vw, 1.8rem); }
  .hero__content h1 br { display: none; }
  /* Forme bleue : bande pleine largeur à bord courbe, entre le texte et les boutons.
     Dégradé blanc en bas : la photo se fond derrière le bouton rouge. */
  .hero__shape {
    grid-column: 1;
    grid-row: 3;
    min-height: 220px;
    margin: 10px -20px -40px;
    border-radius: 50% 50% 0 0 / 40px 40px 0 0;
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 45%, #fff 100%),
      var(--hero-photo) 58% 12% / 170% auto no-repeat;
    box-shadow: 0 -10px 0 var(--blue);
  }
  .hero__buttons { grid-row: 4; position: relative; z-index: 1; }
  .hero__buttons .btn { width: 100%; }
  .reassurance { grid-template-columns: 1fr 1fr; grid-row: 5; }
  /* Bloc étapes en carte */
  .hero__more { grid-row: 6; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
  .hero__steps { grid-template-columns: 1fr; gap: 12px; }
  .hero__steps li { padding-left: 36px; padding-top: 0; }
  .widget { margin-top: 0; margin-bottom: 30px; }

  .section__title { font-size: 1.3rem; }
  /* Onglets sur deux rangées : 4 en haut, 3 en bas (grille de 12 colonnes pour remplir les deux lignes) */
  .tabs { grid-template-columns: minmax(0, 1fr); }
  .tabs__list { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tabs__tab { grid-column: span 3; padding: 10px 2px; font-size: 0.65rem; line-height: 1.3; }
  .tabs__tab:nth-child(n+5) { grid-column: span 4; }
  .tabs__tab:nth-child(5) { border-left: 0; }
  .panel { gap: 20px; padding: 20px; }
  .panel__title { font-size: 1.4rem; }
  .panel__photo { min-height: 200px; }
  .panel__text .btn { width: 100%; }
  .panel__card { position: static; max-width: 100%; width: auto; margin: -30px 10px 0; }
  .panel__visual { padding-bottom: 0; }
  .checklist { grid-template-columns: 1fr; }

  .compare { display: none; }
  .compare-cards { display: grid; gap: 16px; margin-top: 24px; }
  .compare-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
  .compare-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 1rem; }
  .compare-card__title .icon { width: 32px; height: 32px; color: var(--blue); }
  .compare-card__list { margin: 0; }
  .compare-card__list div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.8rem; }
  .compare-card__list dt { font-weight: 800; }
  .compare-card__list dd { margin: 0; text-align: right; color: var(--text-light); }
  .compare-card__link { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.8rem; font-weight: 800; color: var(--blue); }

  /* Bandeau final : photo à gauche, texte à droite, bouton en dessous sur toute la largeur */
  .cta { grid-template-columns: 42% 1fr; }
  .cta__content, .cta__head { display: contents; }
  .cta__photo { grid-column: 1; grid-row: 1 / 3; min-height: 0; border-radius: 0; }
  .cta h2 { grid-column: 2; grid-row: 1; align-self: end; padding: 20px 16px 8px; font-size: 1.4rem; text-align: center; }
  .cta__content > p { grid-column: 2; grid-row: 2; align-self: start; max-width: none; margin: 0; padding: 0 16px 16px; font-size: 0.8rem; text-align: center; }
  .cta__head .btn { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; margin: 0 16px 20px; padding: 14px 20px; }
  .cta .reassurance { display: none; }

  /* Pages dispositif : tout sur une colonne */
  .cards, .cards--duo, .cards + .cards--duo { grid-template-columns: 1fr; }
  .card__photo { height: 180px; }
  .card__title { font-size: 0.95rem; }
  /* Étapes en liste : pastille à gauche, texte à droite, sans pointillés */
  .steps { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; text-align: left; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: start; }
  .steps li + li::before { display: none; }
  .steps__icon { grid-row: span 3; width: 56px; height: 56px; margin: 0; }
  .steps__icon .icon { width: 30px; height: 30px; }
  .steps__number { font-size: 1.2rem; }
  .steps p { max-width: none; margin: 0; }
  .banner h2 { font-size: 1.3rem; }
  .banner .btn { width: 100%; }
  .regime__visual { min-height: 200px; }
  .note { padding: 16px; }

  /* Formes décoratives plus petites */
  .section--shape-right::before,
  .section--shape-left::before { top: -50px; width: 130px; height: 130px; }
  .section--shape-right::before { right: -75px; }
  .section--shape-left::before { left: -75px; }

  /* Investissement locatif */
  .reasons { grid-template-columns: 1fr; }
  .reason__watermark { width: 80px; height: 80px; }
  .timeline { padding: 20px 16px; }
  .timeline__aside .btn { width: 100%; }
  .feature__photo { height: 200px; }
  .feature__body { padding: 20px 16px; }
  .duel { padding: 20px 16px; }
  .rates { font-size: 0.65rem; }

  /* Page 404 */
  .error { padding: 40px 0; }
  .error__code { font-size: 5rem; }
  .error__title { font-size: clamp(1.2rem, 6.4vw, 1.8rem); }
  .error__buttons .btn { width: 100%; }
  .error-links { gap: 10px; }
  .error-links__item { padding: 12px; font-size: 0.75rem; }
  .error-links__item .icon { width: 26px; height: 26px; }

  /* Tableau large sur mobile : une carte par ligne, chaque valeur précédée du nom de sa colonne (data-label) */
  .rates--stack thead { display: none; }
  .rates--stack, .rates--stack tbody, .rates--stack tr { display: block; }
  .rates--stack { background: none; font-size: 0.8rem; }
  .rates--stack tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
  .rates--stack tbody th { display: block; padding: 10px 16px; }
  .rates--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--border); }
  .rates--stack td::before { content: attr(data-label); font-weight: 800; }
  .rates--limit:not(.is-open) tbody tr:nth-child(n+4) { display: none; } /* 3 premières lignes seulement, avant le clic sur « Voir tout » */
  .show-more { display: flex; margin: 4px auto 0; }
  .show-more[hidden] { display: none; }
}

/* ===== Petits mobiles ===== */
@media (max-width: 360px) {
  .tabs__tab { font-size: 0.58rem; }
}

/* ===== Moins d'animations si l'utilisateur l'a demandé dans son système ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}