/* ==========================================================================
   Secteur — Agences immobilières
   Feuille de style compagnon du pattern `agentsia/secteur-immobilier`.

   Règles du jeu (voir la description du pattern) :
   — Les COULEURS viennent des attributs de bloc (slugs de la palette theme.json).
     WordPress les sort en `!important` : ne jamais tenter de les surcharger ici.
   — Les TAILLES DE POLICE vivent toutes ici (typo fluide en clamp()). Aucun bloc
     ne porte d'attribut `fontSize`, sinon le `!important` du preset écraserait
     les clamp().
   — Les PICTOGRAMMES décoratifs sont des pseudo-éléments : pas de bloc vide dans
     l'éditeur. Le contenu généré ÉTANT repris dans le nom accessible (AccName
     1.2 §4.3.2), chaque `content` porte un texte alternatif vide — syntaxe
     `content: "…" / ""` — sinon « Découvrir mon potentiel » serait annoncé
     « Découvrir mon potentiel flèche vers la droite ».
   — Les sélecteurs sont à deux classes (0,2,0) pour battre les styles globaux
     `:root :where(h1)` de theme.json (0,1,1) quel que soit l'ordre des feuilles.
   ========================================================================== */

.secteur-immo {
  /* Largeur de contenu du site = 1376px centré. Le header le fait via
     `max-width:1440px; padding:0 32px` (header.css:33), les sections via
     `padding:120px 32px` + un enfant `max-width:1376px; margin:0 auto`
     (style.css, solution.css). Ici on obtient exactement la même boîte avec
     un seul padding, ce qui marche aussi sur les sections en grid — et les
     fonds restent pleine largeur. */
  --si-content: 1376px;
  --si-gutter: max(32px, (100% - var(--si-content)) / 2);
  --si-section-y: 120px;
  /* Le header du site est en position:fixed et TRANSPARENT en haut de page
     (assets/css/header.css) : rien ne le pousse, c'est au héro de se dégager.
     Valeur unique volontaire = 91px (conteneur 64 + padding-top 24 + filet).
     Sous 768px la BOÎTE du header retombe à 57px, mais son CONTENU déborde
     quand même jusqu'à ~90px en dessous de ~400px (le bouton « Demander un
     audit IA » passe à la ligne et sort du conteneur à hauteur fixe — défaut
     préexistant du header, visible sur tout le site). On se cale donc sur le
     pire cas partout plutôt que sur la hauteur déclarée. */
  --si-header: 91px;
  /* Filet sur fond clair. --agentsia-border-card (#dfdfdf) est calibré pour du
     blanc : sur le crème #f3f3e7 il tombe à 1,19:1 et la grille disparaît.
     --agentsia-text-muted donne 4,70:1 — structurel, et toujours bien plus
     doux que le filet encre de la version d'origine. */
  --si-rule: var(--agentsia-text-muted, #6c6c6c);
  --si-rule-dark: rgba(255, 255, 255, 0.34);            /* filet sur fond sombre — 3,1:1, WCAG 1.4.11 */
  --si-cream: var(--wp--preset--color--cream, #f3f3e7);
  --si-ink: var(--wp--preset--color--black, #111111);

  color: var(--agentsia-text-primary);
  font-family: var(--agentsia-font-sans);
}

.secteur-immo :where(h1, h2, h3, p, ul, blockquote) {
  margin-top: 0;
}

/* Le header du site est en position:fixed (assets/css/header.css:16), haut de
   64px (56px sous 900px). Sans cette marge, #nos-agents / #methode / #faq
   arriveraient SOUS le header. */
.secteur-immo [id] {
  scroll-margin-top: calc(var(--si-header) + 16px);
}

/* Titres : poids 400 et tracking du site, taille fluide propre à la landing. */
.secteur-immo .secteur-immo-hero__title,
.secteur-immo .secteur-immo-pains__title,
.secteur-immo .secteur-immo-agents__title,
.secteur-immo .secteur-immo-socle__title,
.secteur-immo .secteur-immo-method__title,
.secteur-immo .secteur-immo-compare__title,
.secteur-immo .secteur-immo-faq__title,
.secteur-immo .secteur-immo-cta__title {
  font-family: var(--agentsia-font-sans);
  font-weight: 400;
  letter-spacing: var(--agentsia-tracking-display);
  line-height: 1.05;
  margin: 0;
  overflow-wrap: break-word;
}

/* L'accent éditorial en serif (Quattrocento, comme le reste du site). */
/* `font-style:normal` est volontaire : functions.php ne charge Quattrocento
   qu'en 400 et 700 romains — un <em> italique serait une oblique synthétisée
   par le navigateur (c'était déjà le cas sur l'ancienne page). */
.secteur-immo .secteur-immo-hero__title em,
.secteur-immo .secteur-immo-socle__title em,
.secteur-immo .secteur-immo-agents__title em {
  font-family: var(--agentsia-font-serif);
  font-style: normal;
  font-weight: 400;
}

/* ===== Kicker (surtitre partagé) ===== */
.secteur-immo .secteur-immo-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* ⚠️ Les mises en page flex des blocs ne sont PAS déléguées à WordPress.
   Sur le chemin de rendu classique du thème (page.php via
   agentsia_use_classic_default_templates), `the_content()` s'exécute APRÈS
   `wp_head()` : les règles `.wp-container-core-…-is-layout-…{gap;justify-content}`
   générées par `wp_render_layout_support_flag` ne sont jamais imprimées — la
   classe est bien dans le HTML (54 fois), la règle nulle part. Tout ce qui
   dépend d'un `layout` de bloc doit donc être redéclaré ici. */
.secteur-immo .secteur-immo-hero__actions,
.secteur-immo .secteur-immo-agent__tags,
.secteur-immo .secteur-immo-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ===== Boutons ===== */
/* On garde les classes du site (.agentsia-button-primary / -outline) et on ne
   fait qu'ajouter la flèche et un peu d'air, format landing. */
.secteur-immo .secteur-immo-btn .wp-block-button__link {
  padding: 0.85rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.secteur-immo .secteur-immo-btn--next .wp-block-button__link::after {
  content: "\2192" / ""; /* → */
}

.secteur-immo .secteur-immo-btn--jump .wp-block-button__link::after {
  content: "\2198" / ""; /* ↘ */
}

/* .agentsia-button-outline borde en #c9c9c9 : 1,66:1 sur le crème, sous le seuil
   de 3:1 des composants d'interface. On renforce dans le périmètre du pattern
   seulement, sans toucher au bouton du reste du site. */
.secteur-immo .agentsia-button-outline .wp-block-button__link {
  border-color: var(--agentsia-text-muted); /* 4,70:1 sur crème */
}

.secteur-immo .agentsia-button-outline .wp-block-button__link:hover {
  border-color: var(--agentsia-text-primary);
}

/* Le thème ne pose un focus visible que sur les liens hors boutons
   (style.css:96) : les CTA du pattern et les dépliants FAQ n'en avaient aucun. */
.secteur-immo .wp-block-button__link:focus-visible,
.secteur-immo .secteur-immo-faq__item summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.secteur-immo .secteur-immo-btn--accent .wp-block-button__link {
  justify-content: center;
  border: 0;
  border-radius: var(--agentsia-radius-sm);
}

/* ===== Rythme des sections ===== */
.secteur-immo .secteur-immo-pains,
.secteur-immo .secteur-immo-agents,
.secteur-immo .secteur-immo-socle,
.secteur-immo .secteur-immo-method,
.secteur-immo .secteur-immo-compare,
.secteur-immo .secteur-immo-faq,
.secteur-immo .secteur-immo-cta {
  padding: var(--si-section-y) var(--si-gutter);
}

/* ==========================================================================
   1. HÉRO
   ========================================================================== */
.secteur-immo .secteur-immo-hero {
  padding: 0;
}

.secteur-immo .secteur-immo-hero__split {
  gap: 0;
  align-items: stretch;
  margin-bottom: 0;
  /* Copie exacte du conteneur du header pour que le titre s'aligne au logo. */
  max-width: calc(var(--si-content) + 64px);
  margin-inline: auto;
  padding-inline: 32px;
}

/* Sans cela le padding de 5vw s'ajoute au flex-basis et le partage devient
   ~56/44 au lieu du 52,5/47,5 voulu. */
.secteur-immo .secteur-immo-hero__split > .wp-block-column {
  box-sizing: border-box;
}

.secteur-immo .secteur-immo-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--si-header) + 60px);
  padding-bottom: 76px;
  padding-right: 56px;
  padding-left: 0;
  min-height: 640px;
}

.secteur-immo .secteur-immo-hero__title {
  font-size: clamp(2.75rem, 5.6vw, 5rem);
  max-width: 850px;
}

.secteur-immo .secteur-immo-hero__lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  max-width: 620px;
  margin: 34px 0 30px;
}

.secteur-immo .secteur-immo-hero__actions {
  gap: 16px;
}

/* Liste de réassurance — horizontale, coche décorative en pseudo-élément. */
/* `list-style-type` avec une chaîne plutôt que `list-style:none` : VoiceOver
   retire le rôle « liste » dès que les marqueurs sont supprimés. */
.secteur-immo .secteur-immo-hero__trust {
  list-style-type: "\2713\00a0"; /* ✓ */
  list-style-position: inside;
  padding: 0;
  margin: 44px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.8125rem;
  color: var(--agentsia-text-muted);
}

.secteur-immo .secteur-immo-hero__trust li::marker {
  font-weight: 600;
}

/* --- Visuel + cartes flottantes --- */
.secteur-immo .secteur-immo-hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: calc(var(--si-header) + 20px) 0 24px 0;
  min-height: 600px;
  overflow: hidden;
  border-radius: var(--agentsia-radius-md);
  background: var(--agentsia-border-card);
}

.secteur-immo .secteur-immo-hero__img {
  flex: 1;
  margin: 0;
  min-height: 0;
}

.secteur-immo .secteur-immo-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.secteur-immo .secteur-immo-hero__live,
.secteur-immo .secteur-immo-hero__badge {
  position: absolute;
  box-shadow: var(--agentsia-shadow-card);
  border-radius: var(--agentsia-radius-sm);
}

.secteur-immo .secteur-immo-hero__live {
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  color: var(--agentsia-text-primary);
}

.secteur-immo .secteur-immo-hero__live::before {
  content: "";
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--lavender, #8b84ea);
  box-shadow: 0 0 0 5px rgba(139, 132, 234, 0.22);
}

.secteur-immo .secteur-immo-hero__live-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.secteur-immo .secteur-immo-hero__live-sub {
  font-size: 0.8125rem;
  color: var(--agentsia-text-muted);
  margin: 0;
}

.secteur-immo .secteur-immo-hero__badge {
  right: 18px;
  top: 18px;
  padding: 14px 18px;
}

.secteur-immo .secteur-immo-hero__badge-num {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

.secteur-immo .secteur-immo-hero__badge-label {
  font-size: 0.8125rem;
  margin: 0;
}

/* ==========================================================================
   2. RUBAN
   ========================================================================== */
/* Il s'enroule au lieu d'être tronqué : la version d'origine coupait
   « Téléphone » et « WhatsApp » sur mobile (overflow:hidden). */
.secteur-immo .secteur-immo-ribbon {
  padding: 22px var(--si-gutter);
  justify-content: center;
  column-gap: 26px;
  row-gap: 8px;
}

.secteur-immo .secteur-immo-ribbon__item {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0;
  position: relative;
}

.secteur-immo .secteur-immo-ribbon__item + .secteur-immo-ribbon__item::before {
  content: "\2726" / ""; /* ✦ */
  color: var(--wp--preset--color--green-light, #c1fdbf);
  margin-right: 26px;
  letter-spacing: 0;
}

/* ==========================================================================
   3. IRRITANTS
   ========================================================================== */
.secteur-immo .secteur-immo-pains__head {
  max-width: 870px;
}

.secteur-immo .secteur-immo-pains__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.secteur-immo .secteur-immo-pains__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  border: solid var(--si-rule);
  border-width: 1px 0 0 1px;
}

.secteur-immo .secteur-immo-pain {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 26px 26px 52px;
  border: solid var(--si-rule);
  border-width: 0 1px 1px 0;
}

.secteur-immo .secteur-immo-pain__num {
  font-size: 0.75rem;
  color: var(--agentsia-text-muted); /* 4,70:1 sur crème — text-light n'était qu'à 3,09:1 */
  margin: 0;
}

.secteur-immo .secteur-immo-pain__text {
  font-size: 1.125rem;
  line-height: 1.4;
  max-width: 310px;
  margin: auto 0 0;
}

.secteur-immo .secteur-immo-pain::after {
  content: "\2198" / ""; /* ↘ */
  position: absolute;
  right: 26px;
  bottom: 22px;
  font-size: 1.125rem;
  color: var(--agentsia-text-muted);
}

/* ==========================================================================
   4. LES 5 AGENTS — cartes persona (reprise de AgentCard du tableau de bord :
      nextjs-app/src/components/dashboard/AgentList.tsx). Même anatomie : aplat
      pastel, nom en serif en haut à gauche, visage rogné en haut à droite,
      intitulé + pitch en bas. Les visages sont les SVG « ligne claire » que
      l'application sert déjà (public/agent-photos), pas de nouveaux visuels.
   ========================================================================== */
.secteur-immo .secteur-immo-agents__intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: end;
}

.secteur-immo .secteur-immo-agents__intro > .secteur-immo-kicker {
  grid-column: 1 / 3;
}

.secteur-immo .secteur-immo-agents__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.secteur-immo .secteur-immo-agents__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}

/* Trois colonnes égales, comme la grille du tableau de bord. Cinq cartes =
   3 + 2 alignées à gauche ; la cellule libre reste du fond sombre. */
.secteur-immo .secteur-immo-agents__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.secteur-immo .secteur-immo-agent {
  position: relative; /* ancre du lien étendu et de la flèche */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 380px;
  padding: 24px;
  border-radius: var(--agentsia-radius-md);
  overflow: hidden;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* Carte entièrement cliquable, mais UN SEUL lien dans l'arbre d'accessibilité :
   le nom de l'agent porte le lien et un ::after transparent couvre la carte
   (« stretched link »). Le dashboard fait pareil en enveloppant la carte dans
   un <Link> ; ici on ne peut pas, un core/group n'accepte pas de href. */
.secteur-immo .secteur-immo-agent__name a {
  color: inherit;
  text-decoration: none;
}

.secteur-immo .secteur-immo-agent__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Flèche du dashboard : 32px, fond #1a1a1a, rayon 4px. Décorative — c'est le
   nom qui porte le lien. */
.secteur-immo .secteur-immo-agent::after {
  content: "\2192" / ""; /* → décoratif */
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--agentsia-radius-md);
  background: #1a1a1a;
  color: #ffffff;
  font-size: 0.9rem;
  transition: transform 300ms ease;
}

.secteur-immo .secteur-immo-agent:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
}

.secteur-immo .secteur-immo-agent:hover::after {
  transform: translateX(2px);
}

.secteur-immo .secteur-immo-agent:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.secteur-immo .secteur-immo-agent__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.secteur-immo .secteur-immo-agent__name {
  font-family: var(--agentsia-font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Boîte de rognage du dashboard : 150×112, décalée dans les marges de la carte. */
.secteur-immo .secteur-immo-agent__face {
  flex: none;
  width: 150px;
  height: 112px;
  margin: -8px -8px 0 0;
  overflow: hidden;
  pointer-events: none;
}

.secteur-immo .secteur-immo-agent__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

.secteur-immo .secteur-immo-agent__headline {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--agentsia-tracking-body);
  margin: 0 0 8px;
}

.secteur-immo .secteur-immo-agent__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: var(--agentsia-tracking-body);
  color: rgba(17, 17, 17, 0.72);
  margin: 0;
}

.secteur-immo .secteur-immo-agent__tags {
  gap: 6px;
  margin-top: 16px;
}

.secteur-immo .secteur-immo-agent__tag {
  border: 1px solid rgba(17, 17, 17, 0.28);
  border-radius: var(--agentsia-radius-sm);
  padding: 5px 9px;
  font-size: 0.75rem;
  margin: 0;
}

.secteur-immo .secteur-immo-agent__result {
  margin: 16px 0 0;
  padding-right: 48px; /* ne pas passer sous la flèche */
  font-size: 0.8125rem;
  font-weight: 600;
}

.secteur-immo .secteur-immo-agent__result::before {
  content: "\2713\00a0" / ""; /* ✓ décoratif */
}

/* ==========================================================================
   5. LE SOCLE PARTAGÉ
   ========================================================================== */
.secteur-immo .secteur-immo-socle__head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: end;
}

.secteur-immo .secteur-immo-socle__head > .secteur-immo-kicker {
  grid-column: 1 / 3;
}

.secteur-immo .secteur-immo-socle__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--agentsia-text-muted);
  margin: 0;
}

/* Les trois piliers reposent littéralement sur le socle : aucun écart entre la
   grille et la barre sombre qui la porte — c'est ce qui fait lire la métaphore. */
.secteur-immo .secteur-immo-socle__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--si-rule);
  border: 1px solid var(--si-rule);
  border-bottom: 0;
  margin-top: 60px;
}

.secteur-immo .secteur-immo-socle__pillar {
  background: var(--wp--preset--color--white, #ffffff);
  padding: 34px;
  min-height: 300px;
}

/* Filet pastel : content vide, donc rien à annoncer et aucun bloc superflu. */
.secteur-immo .secteur-immo-socle__pillar::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 28px;
}

.secteur-immo .secteur-immo-socle__pillar--regles::before {
  background: var(--wp--preset--color--green-light, #c1fdbf);
}

.secteur-immo .secteur-immo-socle__pillar--connaissance::before {
  background: var(--wp--preset--color--blue-light, #dbecf4);
}

.secteur-immo .secteur-immo-socle__pillar--historique::before {
  background: var(--wp--preset--color--yellow-light, #f7f4cf);
}

.secteur-immo .secteur-immo-socle__pillar-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--agentsia-text-muted);
  margin: 0 0 12px;
}

.secteur-immo .secteur-immo-socle__pillar-title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--agentsia-tracking-display);
  margin: 0 0 12px;
}

.secteur-immo .secteur-immo-socle__pillar-desc {
  color: var(--agentsia-text-muted);
  line-height: 1.55;
  margin: 0;
}

.secteur-immo .secteur-immo-socle__base {
  padding: 34px;
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.secteur-immo .secteur-immo-socle__base-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.secteur-immo .secteur-immo-socle__base-text {
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   6. MÉTHODE
   ========================================================================== */
.secteur-immo .secteur-immo-method__head {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.secteur-immo .secteur-immo-method__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.secteur-immo .secteur-immo-method__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}

.secteur-immo .secteur-immo-method__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--si-rule);
  border: 1px solid var(--si-rule);
  margin-top: 60px;
}

.secteur-immo .secteur-immo-step {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 34px;
  background: var(--si-cream);
}

.secteur-immo .secteur-immo-step__num {
  order: 1;
  font-size: 0.75rem;
  color: var(--agentsia-text-muted); /* idem : AA sur crème */
  margin: 0 0 42px;
}

.secteur-immo .secteur-immo-step::before {
  order: 2;
  font-family: var(--agentsia-font-serif);
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 24px;
}

.secteur-immo .secteur-immo-step--observe::before {
  content: "\2315" / ""; /* ⌕ */
}

.secteur-immo .secteur-immo-step--configure::before {
  content: "\2726" / ""; /* ✦ */
}

.secteur-immo .secteur-immo-step--improve::before {
  content: "\2197" / ""; /* ↗ */
}

.secteur-immo .secteur-immo-step__title {
  order: 3;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: var(--agentsia-tracking-display);
  margin: 0 0 12px;
}

.secteur-immo .secteur-immo-step__desc {
  order: 4;
  color: var(--agentsia-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   7. COMPARATIF
   ========================================================================== */
.secteur-immo .secteur-immo-compare__head {
  max-width: 900px;
}

.secteur-immo .secteur-immo-compare__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.secteur-immo .secteur-immo-compare__grid {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: stretch;
  margin-top: 56px;
}

.secteur-immo .secteur-immo-compare__col {
  padding: 38px;
  border-radius: var(--agentsia-radius-md);
}

.secteur-immo .secteur-immo-compare__or {
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.secteur-immo .secteur-immo-compare__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.secteur-immo .secteur-immo-compare__headline {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--agentsia-tracking-display);
  margin: 0;
}

.secteur-immo .secteur-immo-compare__list {
  /* `list-style-type` avec une chaîne : on garde la sémantique de liste
     (contrairement à `list-style:none`, que VoiceOver dépouille). */
  list-style-type: "\2192\00a0\00a0"; /* → */
  padding-left: 1.6em;
  margin: 34px 0 0;
  display: grid;
  gap: 13px;
  line-height: 1.4;
}

/* La flèche de la colonne « Avec Agentsia » reprend l'accent, comme sur
   l'ancienne page (.rei-compare__grid article:last-child li:before). */
.secteur-immo .secteur-immo-compare__col--after .secteur-immo-compare__list li::marker {
  color: var(--wp--preset--color--green-light, #c1fdbf);
}

/* ==========================================================================
   8. MANIFESTE
   ========================================================================== */
.secteur-immo .secteur-immo-manifesto {
  padding: var(--si-section-y) var(--si-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 70px;
  align-items: end;
}

.secteur-immo .secteur-immo-manifesto__quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 1080px;
}

.secteur-immo .secteur-immo-manifesto__quote p {
  font-family: var(--agentsia-font-serif);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--agentsia-tracking-display);
  margin: 0;
}

.secteur-immo .secteur-immo-manifesto__sign {
  min-width: 220px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.secteur-immo .secteur-immo-manifesto__sign-title {
  font-weight: 600;
  margin: 0;
}

.secteur-immo .secteur-immo-manifesto__sign-text {
  margin: 0;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.secteur-immo .secteur-immo-faq {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 96px);
}

.secteur-immo .secteur-immo-faq__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.secteur-immo .secteur-immo-faq__list {
  border-top: 1px solid var(--si-rule);
}

.secteur-immo .secteur-immo-faq__item {
  border-bottom: 1px solid var(--si-rule);
}

.secteur-immo .secteur-immo-faq__item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-weight: 600;
}

.secteur-immo .secteur-immo-faq__item summary::-webkit-details-marker {
  display: none;
}

.secteur-immo .secteur-immo-faq__item summary::after {
  content: "\2304" / ""; /* ⌄ */
  flex: none;
  transition: transform 180ms ease;
}

.secteur-immo .secteur-immo-faq__item[open] summary::after {
  transform: rotate(180deg);
}

.secteur-immo .secteur-immo-faq__answer {
  color: var(--agentsia-text-muted);
  line-height: 1.6;
  padding: 0 38px 26px 0;
  margin: 0;
}

/* ==========================================================================
   10. CTA FINAL
   ========================================================================== */
.secteur-immo .secteur-immo-cta {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 96px);
}

.secteur-immo .secteur-immo-cta__title {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.secteur-immo .secteur-immo-cta__panel {
  border-left: 1px solid var(--si-rule-dark);
  padding-left: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secteur-immo .secteur-immo-cta__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 24px;
}

.secteur-immo .secteur-immo-cta__note {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.8125rem;
  margin: 13px 0 0;
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1000px) {
  .secteur-immo {
    --si-section-y: 96px;
  }

  /* Deux `!important` obligatoires : core pose `.wp-block-columns{flex-wrap:nowrap
     !important}` au-dessus de 782px (wp-includes/blocks/columns/style.css) — sans
     le premier, les colonnes se contentent de rétrécir côte à côte et le héro ne
     s'empile jamais entre 782 et 1000px. Le second bat le style en ligne
     `flex-basis:52.5%`. */
  .secteur-immo .secteur-immo-hero__split {
    flex-wrap: wrap !important;
  }

  .secteur-immo .secteur-immo-hero__split > .wp-block-column {
    flex-basis: 100% !important;
  }

  .secteur-immo .secteur-immo-hero__copy {
    min-height: 0;
    padding-right: 0;
  }

  .secteur-immo .secteur-immo-hero__visual {
    margin: 0 0 32px;
    min-height: 520px;
  }

  .secteur-immo .secteur-immo-agents__intro,
  .secteur-immo .secteur-immo-socle__head,
  .secteur-immo .secteur-immo-socle__base,
  .secteur-immo .secteur-immo-method__head,
  .secteur-immo .secteur-immo-faq,
  .secteur-immo .secteur-immo-cta {
    grid-template-columns: 1fr;
  }

  .secteur-immo .secteur-immo-agents__intro > .secteur-immo-kicker,
  .secteur-immo .secteur-immo-socle__head > .secteur-immo-kicker {
    grid-column: auto;
  }

  .secteur-immo .secteur-immo-agents__lead,
  .secteur-immo .secteur-immo-socle__lead,
  .secteur-immo .secteur-immo-method__lead {
    margin-top: 26px;
  }

  .secteur-immo .secteur-immo-agents__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .secteur-immo .secteur-immo-manifesto {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .secteur-immo .secteur-immo-cta__panel {
    border-left: 0;
    border-top: 1px solid var(--si-rule-dark);
    padding: 32px 0 0;
  }
}

@media (max-width: 680px) {
  .secteur-immo {
    --si-gutter: 20px;
    --si-section-y: 72px;
  }

  .secteur-immo .secteur-immo-hero__split {
    padding-inline: var(--si-gutter);
  }

  .secteur-immo .secteur-immo-hero__copy {
    padding-top: calc(var(--si-header) + 36px);
    padding-bottom: 44px;
  }

  .secteur-immo .secteur-immo-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .secteur-immo .secteur-immo-hero__actions .wp-block-button {
    width: 100%;
  }

  .secteur-immo .secteur-immo-hero__actions .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  .secteur-immo .secteur-immo-hero__visual {
    margin: 0 0 32px;
    min-height: 440px;
  }

  .secteur-immo .secteur-immo-hero__img img {
    object-position: 62% center;
  }

  .secteur-immo .secteur-immo-hero__live {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .secteur-immo .secteur-immo-hero__badge {
    right: 12px;
    top: 12px;
  }

  .secteur-immo .secteur-immo-ribbon__item + .secteur-immo-ribbon__item::before {
    margin-right: 14px;
  }

  .secteur-immo .secteur-immo-pains__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .secteur-immo .secteur-immo-pain {
    min-height: 0;
  }

  .secteur-immo .secteur-immo-agents__grid {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .secteur-immo .secteur-immo-agent {
    min-height: 0;
  }

  .secteur-immo .secteur-immo-socle__pillars {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .secteur-immo .secteur-immo-socle__pillar {
    min-height: 0;
  }

  .secteur-immo .secteur-immo-method__steps {
    grid-template-columns: 1fr;
  }

  .secteur-immo .secteur-immo-step {
    min-height: 0;
  }

  .secteur-immo .secteur-immo-step__num {
    margin-bottom: 28px;
  }

  .secteur-immo .secteur-immo-compare__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .secteur-immo .secteur-immo-compare__or {
    height: 54px;
  }

  .secteur-immo .secteur-immo-manifesto {
    padding: 72px var(--si-gutter);
  }

  .secteur-immo .secteur-immo-faq__answer {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secteur-immo .secteur-immo-faq__item summary::after,
  .secteur-immo .secteur-immo-agent,
  .secteur-immo .secteur-immo-agent::after {
    transition: none;
  }

  .secteur-immo .secteur-immo-agent:hover {
    transform: none;
  }
}
