/*
Theme Name: AlmaWeb Immo
Theme URI: https://github.com/AlmaWeb-Dev/theme-almaweb-immo
Description: Portail d'immobilier commercial. Conçu pour le plugin AlmaWeb Immo : fiches de biens, fourchettes de marché par artère, pages hub routées par méta.
Author: AlmaWeb
Author URI: https://almaweb.fr
Version: 0.2.51
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: almaweb-immo
Tags: real-estate, business, custom-menu, translation-ready
*/

/* =========================================================================
   1. Jetons
   ========================================================================= */

:root {
  /* Terre de Casablanca : terracotta sur crème. Les portails marocains sont
     tous en bleu ou vert — cette palette se distingue dans une page de
     résultats, et parle à un commerçant plutôt qu'à un financier.
     Tous les couples texte/fond dépassent le ratio 4,5:1. */
  --fc-brand-50:  #fdf5f2;
  --fc-brand-100: #f6e0d7;
  --fc-brand-500: #9a3d1c;
  --fc-brand-600: #8a3416;
  --fc-brand-700: #7c2d12;

  --fc-accent-location: #0f766e;
  --fc-accent-vente:    #92400e;
  --fc-accent-cession:  #6d28d9;

  /* Bleu Atlantique : second registre, pour le pied de page et les repères
     d'information. */
  --fc-atlantique: #0c4a6e;
  --fc-ocre:       #a16207;

  /* Le même ocre, éclairci pour poser sur une photo. Sur un voile sombre
     recouvrant une façade claire, `--fc-ocre` tombe à 1,2:1 — illisible. Ce
     ton tient 3,6:1 dans le pire cas, au-dessus du seuil AA du grand texte. */
  --fc-ocre-clair: #fbbf24;

  /* Encres chaudes plutôt que grises : elles s'accordent au fond crème. */
  --fc-ink-900: #1c1917;
  --fc-ink-700: #44403c;

  /* Le texte secondaire — dates, libellés, mentions. L'ancienne valeur
     #78716c tenait 4,8 sur blanc mais tombait à 3,9 sur les fonds crème des
     blocs, sous le seuil AA de 4,5 : le libellé d'une fourchette et le titre
     d'un sommaire devenaient difficiles à lire. Celle-ci tient 5,1 sur le
     fond le plus soutenu, et reste assez claire pour rester un second plan. */
  --fc-ink-500: #665f5a;
  --fc-ink-300: #a8a29e;

  --fc-surface-0:   #ffffff;
  --fc-surface-50:  #fefce8;
  --fc-surface-100: #fdf5f2;
  --fc-surface-200: #f0e7e2;

  --fc-border: #ece2dc;
  --fc-focus:  #9a3d1c;

  --fc-success: #15803d;
  --fc-warning: #b45309;
  --fc-danger:  #b91c1c;

  --fc-etat-en-ligne:       #15803d;
  --fc-etat-sous-option:    #b45309;
  --fc-etat-sous-compromis: #b45309;
  --fc-etat-terminal:       #6b7280;

  /* Échelle de 4 px */
  --fc-space-1: 0.25rem;
  --fc-space-2: 0.5rem;
  --fc-space-3: 0.75rem;
  --fc-space-4: 1rem;
  --fc-space-5: 1.25rem;
  --fc-space-6: 1.5rem;
  --fc-space-8: 2rem;
  --fc-space-10: 2.5rem;
  --fc-space-12: 3rem;
  --fc-space-16: 4rem;

  --fc-radius-sm:   4px;
  --fc-radius-md:   8px;
  --fc-radius-lg:   14px;
  --fc-radius-pill: 999px;

  /* Ombres chaudes : un gris bleuté sur fond crème donne un halo sale. */
  --fc-shadow-1: 0 1px 2px rgba(68, 40, 28, .07);
  --fc-shadow-2: 0 4px 12px rgba(68, 40, 28, .10);
  --fc-shadow-3: 0 12px 28px rgba(68, 40, 28, .14);

  --fc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fc-text-xs:  0.75rem;
  --fc-text-sm:  0.875rem;
  --fc-text-md:  1rem;
  --fc-text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fc-text-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fc-text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fc-text-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);

  --fc-container: 1180px;
  --fc-container-etroit: 760px;

  --fc-z-header: 100;
  --fc-z-panneau: 200;
  --fc-z-modal: 300;
}

/* =========================================================================
   2. Réinitialisation
   ========================================================================= */

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

body {
  margin: 0;
  font-family: var(--fc-font);
  font-size: var(--fc-text-md);
  line-height: 1.6;
  color: var(--fc-ink-900);
  background: var(--fc-surface-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--fc-space-4); line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--fc-text-3xl); }
h2 { font-size: var(--fc-text-2xl); }
h3 { font-size: var(--fc-text-xl); }
h4 { font-size: var(--fc-text-lg); }

p, ul, ol, dl, table { margin: 0 0 var(--fc-space-4); }

a { color: var(--fc-brand-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--fc-brand-700); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
  border-radius: var(--fc-radius-sm);
}

/* Réservé aux lecteurs d'écran. */
.fc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fc-sr:focus {
  position: fixed;
  top: var(--fc-space-2); left: var(--fc-space-2);
  width: auto; height: auto;
  padding: var(--fc-space-3) var(--fc-space-4);
  clip: auto;
  background: var(--fc-surface-0);
  box-shadow: var(--fc-shadow-2);
  z-index: var(--fc-z-modal);
}

/* =========================================================================
   3. Mise en page
   ========================================================================= */

.fc-conteneur {
  width: 100%;
  max-width: var(--fc-container);
  margin-inline: auto;
  padding-inline: var(--fc-space-4);
}

.fc-conteneur--etroit { max-width: var(--fc-container-etroit); }

/* Un portail se lit comme un tableau de bord, pas comme une plaquette : les
   sections s'enchaînent sans respiration inutile. Les blocs qui demandent au
   visiteur de s'arrêter — capture, appel à l'action — gardent leur marge. */
.fc-bloc { margin-bottom: var(--fc-space-8); }
.fc-bloc--capture,
.fc-bloc--cta,
.fc-bloc--rappel { margin-bottom: var(--fc-space-12); }

.fc-bloc__titre { font-size: var(--fc-text-xl); margin-bottom: var(--fc-space-4); }
.fc-bloc__intro { color: var(--fc-ink-700); max-width: 65ch; }

.fc-grille {
  display: grid;
  gap: var(--fc-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fc-grille--biens,
  .fc-grille--articles,
  .fc-grille--pros { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .fc-grille--biens,
  .fc-grille--articles { grid-template-columns: repeat(3, 1fr); }
  .fc-grille--pros     { grid-template-columns: repeat(4, 1fr); }
}

/* Au-delà de 1280 px, trois colonnes laissent des cartes trop larges et une
   page trop longue. Un portail se juge au nombre de biens vus sans faire
   défiler : on passe à quatre. */
@media (min-width: 1280px) {
  .fc-grille--biens { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   4. Chrome
   ========================================================================= */

.fc-header {
  position: sticky;
  top: 0;
  z-index: var(--fc-z-header);
  background: var(--fc-surface-0);
  border-bottom: 1px solid var(--fc-border);
}

.fc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--fc-space-4);
  min-height: 64px;
}

.fc-header__marque {
  font-weight: 700;
  font-size: var(--fc-text-lg);
  color: var(--fc-ink-900);
  text-decoration: none;
}

.fc-nav { margin-left: auto; }
.fc-nav ul { display: flex; gap: var(--fc-space-5); list-style: none; margin: 0; padding: 0; }
.fc-nav a { color: var(--fc-ink-700); text-decoration: none; font-size: var(--fc-text-sm); }
.fc-nav a:hover, .fc-nav .current-menu-item > a { color: var(--fc-brand-600); }

.fc-nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-3);
  /* La bordure claire sur fond blanc rendait le bouton invisible, à côté d'un
     « Proposer un local » tout aussi pâle. La terre cuite dit que c'est une
     commande, pas une option. */
  border: 1px solid var(--fc-brand-700);
  border-radius: var(--fc-radius-md);
  background: var(--fc-brand-700);
  color: var(--fc-surface-0);
  font: inherit;
  font-size: var(--fc-text-sm);
  font-weight: 600;
  cursor: pointer;
}

/* Trois traits, dessinés en CSS : le mot « Menu » seul ne dit pas qu'on ouvre
   quelque chose. */
.fc-nav-toggle::before {
  content: "";
  width: 16px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  box-shadow: inset 0 0 0 1px transparent, 0 4px 0 -1px currentColor;
}

@media (min-width: 860px) { .fc-nav-toggle { display: none; } }

@media (max-width: 859px) {
  .fc-nav {
    display: none;
    position: absolute;
    inset: 64px 0 auto;
    background: var(--fc-surface-0);
    border-bottom: 1px solid var(--fc-border);
    box-shadow: var(--fc-shadow-2);
    padding: var(--fc-space-4);
  }
  .fc-nav--ouvert { display: block; }
  .fc-nav ul { flex-direction: column; gap: var(--fc-space-3); }
}

.fc-footer {
  margin-top: var(--fc-space-16);
  padding-block: var(--fc-space-10);
  background: var(--fc-surface-50);
  border-top: 1px solid var(--fc-border);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
}

.fc-footer__cols {
  display: grid;
  gap: var(--fc-space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .fc-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

.fc-footer ul { list-style: none; margin: 0; padding: 0; }
.fc-footer li { margin-bottom: var(--fc-space-2); }
.fc-footer__legal {
  margin-top: var(--fc-space-8);
  padding-top: var(--fc-space-4);
  border-top: 1px solid var(--fc-border);
  color: var(--fc-ink-500);
  font-size: var(--fc-text-xs);
}

/* =========================================================================
   5. Boutons
   ========================================================================= */

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3) var(--fc-space-5);

  /* Une cible tactile confortable fait 44 px. Sans ce plancher, les boutons se
     dimensionnaient sur leur texte et tombaient entre 35 et 43 px sur mobile. */
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--fc-radius-md);
  font: inherit;
  font-weight: 600;
  font-size: var(--fc-text-sm);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.fc-btn--primaire { background: var(--fc-brand-500); color: #fff; }
.fc-btn--primaire:hover { background: var(--fc-brand-600); color: #fff; }

.fc-btn--secondaire {
  background: var(--fc-surface-0);
  border-color: var(--fc-border);
  color: var(--fc-ink-900);
}
.fc-btn--secondaire:hover { border-color: var(--fc-ink-300); color: var(--fc-ink-900); }

.fc-btn--whatsapp { background: #25d366; color: #06301a; }
.fc-btn--whatsapp:hover { background: #1eb356; color: #06301a; }

.fc-btn--bloc { width: 100%; }

/* =========================================================================
   6. Carte de bien — représentation unique
   ========================================================================= */

.fc-bien-card {
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}

.fc-bien-card:hover { box-shadow: var(--fc-shadow-2); transform: translateY(-2px); }

.fc-bien-card__lien { display: block; color: inherit; text-decoration: none; height: 100%; }

.fc-bien-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fc-brand-50);
  overflow: hidden;
}

.fc-bien-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.fc-bien-card:hover .fc-bien-card__image img { transform: scale(1.04); }

/* Aplat de remplacement : une carte sans photo ne doit pas trouer la grille. */
.fc-bien-card__sans-image {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--fc-brand-50) 0 12px,
      var(--fc-brand-100) 12px 24px);
}

/* Le badge d'état se pose sur la photo, comme sur tous les portails. Il lui
   faut un fond opaque : une photo claire le rendrait illisible. */
.fc-bien-card__image .fc-etat-badge {
  position: absolute;
  top: var(--fc-space-3);
  left: var(--fc-space-3);
  margin: 0;
  background: var(--fc-surface-0);
  box-shadow: var(--fc-shadow-1);
}

.fc-bien-card__corps { padding: var(--fc-space-3) var(--fc-space-4) var(--fc-space-4); }

/* Le prix domine la carte : c'est le premier élément lu, et sur un portail
   c'est lui qui décide si le visiteur clique. Les chiffres sont tabulaires
   pour que les montants s'alignent d'une carte à l'autre. */
.fc-bien-card__prix {
  margin: 0 0 var(--fc-space-1);
  font-weight: 700;

  /* Taille fixe, pas l'échelle fluide : sur quatre colonnes, un prix de vente
     à sept chiffres déborderait. */
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fc-brand-700);
}

.fc-bien-card__titre {
  font-size: var(--fc-text-sm);
  font-weight: 600;
  margin-bottom: var(--fc-space-2);
  color: var(--fc-ink-700);

  /* Deux lignes au maximum : sans quoi les cartes d'une même rangée ne
     s'alignent plus. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-bien-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-2) var(--fc-space-3);
  margin: 0;
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-500);
}

/* Séparateur discret entre surface et lieu. */
.fc-bien-card__lieu::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: var(--fc-space-2);
  border-radius: 50%;
  background: var(--fc-ink-300);
  vertical-align: middle;
}

.fc-bien-card--terminal { opacity: .8; }
.fc-bien-card--terminal .fc-bien-card__prix {
  text-decoration: line-through;
  color: var(--fc-ink-500);
}

.fc-bien-card--premium { border-color: var(--fc-brand-100); }

/* La mise en avant payante doit se voir, sinon elle ne se vend pas. Le style
   manquait côté professionnels, alors que le plugin pose déjà la classe. */
.fc-pro-card--premium {
  border-color: var(--fc-brand-500);
  box-shadow: var(--fc-shadow-1);
}

/* =========================================================================
   7. Badges d'état
   ========================================================================= */

.fc-etat-badge {
  display: inline-block;
  padding: var(--fc-space-1) var(--fc-space-3);
  margin-bottom: var(--fc-space-2);
  border-radius: var(--fc-radius-pill);
  background: var(--fc-surface-100);
  color: var(--fc-ink-700);
  font-size: var(--fc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.fc-etat-badge--loue,
.fc-etat-badge--vendu,
.fc-etat-badge--cede { background: var(--fc-etat-terminal); color: #fff; }

.fc-etat-badge--sous-option,
.fc-etat-badge--sous-compromis { background: var(--fc-warning); color: #fff; }

/* =========================================================================
   8. Fourchettes de marché
   ========================================================================= */

.fc-bloc--fourchette {
  padding: var(--fc-space-6);
  background: var(--fc-brand-50);
  border-radius: var(--fc-radius-lg);
}

/* La médiane porte le message : elle est la valeur la plus grosse du bloc. */
.fc-fourchette__mediane {
  font-size: var(--fc-text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fc-brand-700);
  margin: 0 0 var(--fc-space-2);
}

.fc-fourchette__valeurs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-2);
  font-size: var(--fc-text-lg);
  font-weight: 600;
  color: var(--fc-ink-700);
}

.fc-fourchette__libelle {
  font-size: var(--fc-text-sm);
  font-weight: 400;
  color: var(--fc-ink-500);
  width: 100%;
}

.fc-fourchette__date { display: block; color: var(--fc-ink-500); }

.fc-fourchette__sep { color: var(--fc-ink-300); font-weight: 400; }

.fc-fourchette__contexte {
  margin-bottom: var(--fc-space-2);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
}

.fc-fourchette__remonte { display: block; color: var(--fc-ink-500); }

.fc-fourchette__confiance {
  margin: 0;
  color: var(--fc-brand-500);
  letter-spacing: .15em;
}

/* =========================================================================
   9. Tableaux
   ========================================================================= */

.fc-tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.fc-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fc-text-sm);
}

.fc-tableau th, .fc-tableau td {
  padding: var(--fc-space-3);
  text-align: left;
  border-bottom: 1px solid var(--fc-border);
}

.fc-tableau thead th {
  background: var(--fc-surface-50);
  font-weight: 600;
  white-space: nowrap;
}

.fc-tableau tbody tr:hover { background: var(--fc-surface-50); }

/* Tableau de prix : le chiffre est le sujet, pas le libellé.
   La médiane porte la lecture, la fourchette la nuance ensuite. Sans cette
   hiérarchie, huit lignes de prix se lisent comme un annuaire. */

/* L'en-tête suit ses chiffres : aligné à gauche au-dessus d'une colonne
   alignée à droite, l'œil ne relie plus les deux. */
/* L'en-tête suit ses chiffres. Un titre aligné à droite au-dessus d'une
   colonne alignée à gauche : l'œil ne relie plus les deux. */
.fc-tableau thead th.fc-tableau__nombre,
.fc-tableau tbody td.fc-tableau__nombre { text-align: right; }

.fc-tableau__nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fc-tableau__mediane {
  font-weight: 650;
  color: var(--fc-ink-900);
  font-size: var(--fc-text-md);
}

.fc-tableau__fourchette {
  color: var(--fc-ink-500);
}

.fc-tableau__sep {
  padding: 0 0.15em;
  color: var(--fc-ink-300);
}

/* La date du calcul, sous le tableau : elle date la mesure sans lui disputer
   l'attention. Même traitement que la ligne de contexte d'une fourchette. */
/* Repli du tableau de prix.

   Le tableau gagne une ligne a chaque quartier ecrit. Au-dela d'une poignee il
   repousse le reste de la page, sans qu'on lise vraiment la quinzieme ligne.

   Les lignes masquees restent dans le HTML : elles portent le `Dataset`, et
   afficher des prix par quartier des l'accueil est la densite ou aucun
   concurrent ne nous suit (releve du 8 septembre). Un `display: none` les
   garde lisibles par les moteurs, qui rendent la page et voient le balisage.

   Tout en CSS : le tableau se deplie meme si le JavaScript du site ne se
   charge pas. */
.fc-tableau__bascule {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fc-tableau__bascule:checked ~ .fc-tableau-scroll .fc-tableau__ligne--sup {
  display: table-row;
}

.fc-tableau__ligne--sup { display: none; }

.fc-tableau__plus {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  min-height: 44px;
  margin-top: var(--fc-space-2);
  padding: 0 var(--fc-space-3);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-sm);
  background: transparent;
  color: var(--fc-ink-700);
  font-size: var(--fc-text-sm);
  cursor: pointer;
}

.fc-tableau__plus:hover { border-color: var(--fc-ink-500); }

/* Pas de regle de focus ici : `:focus-visible` (plus haut) couvre tout element
   focalisable, et le `<label>` porte `tabindex="0"`. */

.fc-tableau__plus-fermer { display: none; }

.fc-tableau__bascule:checked ~ * .fc-tableau__plus-ouvrir,
.fc-tableau__bascule:checked ~ .fc-tableau__plus .fc-tableau__plus-ouvrir { display: none; }

.fc-tableau__bascule:checked ~ * .fc-tableau__plus-fermer,
.fc-tableau__bascule:checked ~ .fc-tableau__plus .fc-tableau__plus-fermer { display: inline; }

/* A l'impression, rien ne se replie. */
@media print {
  .fc-tableau__ligne--sup { display: table-row; }
  .fc-tableau__plus { display: none; }
}

.fc-tableau__source {
  margin: var(--fc-space-3) 0 0;
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-500);
}

/* Le nom du quartier est un lien, mais huit liens soulignés en rouge font une
   page de résultats illisible : on souligne au survol seulement. */
.fc-bloc--tableau-prix .fc-tableau tbody th a {
  color: var(--fc-ink-900);
  text-decoration: none;
  font-weight: 600;
}

.fc-bloc--tableau-prix .fc-tableau tbody th a:hover,
.fc-bloc--tableau-prix .fc-tableau tbody th a:focus-visible {
  color: var(--fc-brand-600);
  text-decoration: underline;
}

/* La première ligne est le haut du marché : un filet la distingue sans
   ajouter de couleur. */
.fc-bloc--tableau-prix .fc-tableau tbody tr:first-child .fc-tableau__mediane {
  color: var(--fc-brand-600);
}

@media (max-width: 40rem) {
  /* Sur un téléphone, la fourchette passe sous la médiane plutôt que de
     forcer un défilement horizontal sur trois colonnes. */
  .fc-bloc--tableau-prix .fc-tableau th:last-child,
  .fc-bloc--tableau-prix .fc-tableau td:last-child { display: none; }
}

/* =========================================================================
   10. Listes de liens
   ========================================================================= */

.fc-liste-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `inline-flex` et non `inline-block` : le plancher tactile ne sert à rien si
   le texte reste collé en haut de la pastille. Mesuré avant : 39 px, sous les
   44 px que le reste du thème s'impose — voir `.fc-bouton`. Ces pastilles sont
   le repli mobile du bloc quartiers sur les pages de croisement, donc l'endroit
   où le doigt vise. */
.fc-liste-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--fc-space-2) var(--fc-space-4);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-pill);
  background: var(--fc-surface-0);
  color: var(--fc-ink-700);
  font-size: var(--fc-text-sm);
  text-decoration: none;
}

.fc-liste-liens a:hover {
  border-color: var(--fc-brand-500);
  color: var(--fc-brand-600);
}

/* Variante illustrée des mêmes listes : une photo par destination, son nom
   posé dessus. Elle sert là où le choix est un projet — « quelle activité »,
   « quel quartier » — et non une simple navigation entre pages sœurs.

   Le voile est à 0,62 et non 0,55 : mesuré sur les trois photos d'activité,
   0,55 descend le contraste du libellé blanc à 4,46 sur la plus claire
   (restaurant), sous le seuil AA. À 0,62 le pire cas remonte à 5,50. */

.fc-nav-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--fc-space-4);
}

/* 4/3 comme `almaweb-immo-carte`, qui recadre déjà en dur à 640×480. Un cadre
   en 16/10 aurait rogné les côtés d'une vignette dont le haut et le bas
   venaient d'être coupés — deux recadrages successifs sur la même photo. */
.fc-nav-carte {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fc-radius-lg);
  background: var(--fc-brand-700);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

.fc-nav-carte:hover {
  box-shadow: var(--fc-shadow-2);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .fc-nav-carte { transition: none; }
  .fc-nav-carte:hover { transform: none; }
}

.fc-nav-carte:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}

.fc-nav-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sans photo, l'aplat de marque suffit : pas de voile à poser dessus. */
.fc-nav-carte:not(.fc-nav-carte--nue)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 25, 23, .15) 0%,
    rgba(28, 25, 23, .40) 45%,
    rgba(28, 25, 23, .62) 100%);
}

.fc-nav-carte__nom {
  position: absolute;
  inset-inline: var(--fc-space-4);
  inset-block-end: var(--fc-space-4);
  z-index: 1;
  color: var(--fc-surface-0);
  font-size: var(--fc-text-md);
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(28, 25, 23, .6);
}

/* =========================================================================
   11. Fil d'Ariane
   ========================================================================= */

.fc-breadcrumb { padding-block: var(--fc-space-4); font-size: var(--fc-text-sm); }
.fc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-breadcrumb__item { display: flex; gap: var(--fc-space-2); align-items: center; }
.fc-breadcrumb__sep { color: var(--fc-ink-300); }
.fc-breadcrumb [aria-current="page"] { color: var(--fc-ink-500); }

/* =========================================================================
   12. Fiche d'un bien
   ========================================================================= */

.fc-bien__entete { margin-bottom: var(--fc-space-6); }
.fc-bien__titre { margin-bottom: var(--fc-space-3); }

.fc-bien__resume {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fc-space-3) var(--fc-space-6);
  padding-bottom: var(--fc-space-4);
  border-bottom: 1px solid var(--fc-border);
}

.fc-bien__prix {
  font-size: var(--fc-text-2xl);
  font-weight: 700;
  color: var(--fc-brand-600);
}

.fc-bien__surface { font-size: var(--fc-text-lg); color: var(--fc-ink-700); }
.fc-bien__reference { margin-left: auto; font-size: var(--fc-text-sm); color: var(--fc-ink-500); }

.fc-bien__bandeau {
  padding: var(--fc-space-4) var(--fc-space-5);
  margin-bottom: var(--fc-space-6);
  border-left: 4px solid var(--fc-etat-terminal);
  border-radius: var(--fc-radius-md);
  background: var(--fc-surface-100);
}

.fc-bien__bandeau strong { color: var(--fc-ink-900); }

.fc-bien__layout { display: grid; gap: var(--fc-space-8); }

@media (min-width: 960px) {
  .fc-bien__layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
  .fc-bien__aside { position: sticky; top: 88px; }
}

.fc-caracteristiques { margin-bottom: var(--fc-space-8); }
.fc-caracteristiques__groupe { margin-bottom: var(--fc-space-6); }
.fc-caracteristiques__titre {
  font-size: var(--fc-text-md);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fc-ink-500);
  margin-bottom: var(--fc-space-3);
}

.fc-caracteristiques__liste {
  display: grid;
  gap: var(--fc-space-2) var(--fc-space-4);
  margin: 0;
}

@media (min-width: 560px) {
  .fc-caracteristiques__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fc-caracteristiques__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-2) 0;
  border-bottom: 1px solid var(--fc-surface-200);
}

.fc-caracteristiques__cle { color: var(--fc-ink-500); }
.fc-caracteristiques__valeur { font-weight: 600; text-align: right; }

/* Coût réel : ce qui distingue une annonce honnête d'une annonce trompeuse. */
.fc-cout {
  padding: var(--fc-space-5);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-0);
  box-shadow: var(--fc-shadow-1);
}

/* Le total est l'argument : personne d'autre ne dit au commerçant ce qu'il
   paiera vraiment, charges et taxes comprises. */
.fc-cout__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-4);
  padding-top: var(--fc-space-4);
  border-top: 2px solid var(--fc-brand-100);
  font-weight: 700;
  color: var(--fc-brand-700);
}

.fc-cout__total > :last-child { font-size: var(--fc-text-xl); }

.fc-cout__note { margin: var(--fc-space-3) 0 0; font-size: var(--fc-text-xs); color: var(--fc-ink-500); }

/* =========================================================================
   Réassurance
   ========================================================================= */

/* Fond terracotta pleine largeur : la bande coupe la page et marque une
   respiration entre les biens et la suite. Trois colonnes au maximum, sinon
   plus personne ne les lit. */
.fc-reassurance {
  padding-block: var(--fc-space-10);
  background: var(--fc-brand-700);
  color: var(--fc-surface-0);
}

.fc-reassurance__liste {
  display: grid;
  gap: var(--fc-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 780px) {
  .fc-reassurance__liste { grid-template-columns: repeat(3, 1fr); }
}

.fc-reassurance__titre {
  margin: 0 0 var(--fc-space-2);
  font-size: var(--fc-text-lg);
  color: var(--fc-surface-0);
}

.fc-reassurance__texte {
  margin: 0;
  font-size: var(--fc-text-sm);
  line-height: 1.65;

  /* Le blanc pur sur terracotta fatigue : un blanc légèrement voilé se lit
     mieux sur un aplat foncé. */
  color: rgba(255, 255, 255, .88);
}

/* =========================================================================
   Barre de contact, mobile uniquement
   ========================================================================= */

/* Sur téléphone, le formulaire vit en bas de page. Sans cette barre, il faut
   faire défiler toute la fiche pour trouver un moyen de contact. */
.fc-barre-action { display: none; }

@media (max-width: 859px) {
  .fc-barre-action {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--fc-z-header);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: var(--fc-space-2);
    padding-bottom: max(var(--fc-space-2), env(safe-area-inset-bottom));
    background: var(--fc-surface-0);
    border-top: 1px solid var(--fc-border);
    box-shadow: 0 -4px 12px rgba(68, 40, 28, .10);
  }

  .fc-barre-action__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--fc-space-2);
    border-radius: var(--fc-radius-md);
    font-size: var(--fc-text-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  .fc-barre-action__btn--appel {
    background: var(--fc-brand-700);
    color: var(--fc-surface-0);
  }

  .fc-barre-action__btn--whatsapp {
    background: #25d366;
    color: #06301a;
  }

  .fc-barre-action__btn--formulaire {
    background: var(--fc-brand-50);
    color: var(--fc-brand-700);
    border: 1px solid var(--fc-brand-100);
  }

  /* La barre masquerait la fin de la page sans cette réserve. */
  body.single-bien .fc-footer { padding-bottom: calc(var(--fc-space-16) + 40px); }
}

/* =========================================================================
   Positionnement du bien face au marché
   ========================================================================= */

/* La donnée devient un argument de vente : « ce local est 12 % sous le prix
   du quartier ». C'est le seul endroit où elle prend de la place. */
.fc-positionnement {
  padding: var(--fc-space-4) var(--fc-space-5);
  margin-bottom: var(--fc-space-6);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-brand-50);
  border: 1px solid var(--fc-brand-100);
}

.fc-positionnement__titre {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin: 0 0 var(--fc-space-1);
  font-size: var(--fc-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fc-brand-700);
}

.fc-positionnement__phrase { margin: 0 0 var(--fc-space-4); color: var(--fc-ink-900); }
.fc-positionnement__phrase strong { color: var(--fc-brand-700); }

/* Barre de situation : le repère du marché, et la position du bien dessus. */
.fc-positionnement__barre {
  position: relative;
  height: 6px;
  border-radius: var(--fc-radius-pill);
  background: linear-gradient(90deg, var(--fc-success), var(--fc-ocre), var(--fc-danger));
  margin-bottom: var(--fc-space-2);
}

.fc-positionnement__curseur {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--fc-surface-0);
  border: 3px solid var(--fc-brand-700);
  transform: translateY(-50%);
}

.fc-positionnement__bornes {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: var(--fc-text-xs);
  color: var(--fc-ink-500);
}

.fc-galerie { display: grid; gap: var(--fc-space-2); margin-bottom: var(--fc-space-6); }
.fc-galerie__principale { border-radius: var(--fc-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.fc-galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.fc-galerie__vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--fc-space-2); list-style: none; margin: 0; padding: 0; }
.fc-galerie__vues a { display: block; border-radius: var(--fc-radius-md); overflow: hidden; aspect-ratio: 4 / 3; }
.fc-galerie__vues img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.fc-galerie__vues a:hover img, .fc-galerie__vues a:focus-visible img { transform: scale(1.04); }

.fc-carte { height: 340px; border-radius: var(--fc-radius-lg); overflow: hidden; background: var(--fc-surface-100); }

/* =========================================================================
   13. Formulaires
   ========================================================================= */

.fc-lead {
  padding: var(--fc-space-6);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-0);
}

.fc-lead__titre { font-size: var(--fc-text-xl); }
.fc-lead__champ { margin-bottom: var(--fc-space-4); }
.fc-lead__champ label { display: block; margin-bottom: var(--fc-space-1); font-size: var(--fc-text-sm); font-weight: 600; }

.fc-lead input[type="text"],
.fc-lead input[type="tel"],
.fc-lead input[type="email"],
.fc-lead input[type="number"],
.fc-lead select,
.fc-lead textarea {
  width: 100%;
  padding: var(--fc-space-3);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  font: inherit;
  font-size: var(--fc-text-md);
  background: var(--fc-surface-0);
  color: var(--fc-ink-900);
}

.fc-lead textarea { resize: vertical; min-height: 100px; }

.fc-lead__consentement {
  display: flex;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-5);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
}

.fc-lead__consentement input { margin-top: 3px; flex-shrink: 0; }

/* Champ leurre : masqué visuellement, jamais avec display:none qui alerterait
   les robots les plus soignés. */
.fc-lead__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fc-lead__message {
  padding: var(--fc-space-3) var(--fc-space-4);
  margin-bottom: var(--fc-space-4);
  border-radius: var(--fc-radius-md);
  background: #ecfdf5;
  color: var(--fc-success);
  font-size: var(--fc-text-sm);
}

.fc-lead__message--erreur { background: #fef2f2; color: var(--fc-danger); }

/* =========================================================================
   14. Recherche et suggestions
   ========================================================================= */

.fc-recherche { position: relative; margin-top: var(--fc-space-6); }

/* Posé sur une photo, le formulaire a besoin d'une ombre plus franche pour
   se décoller du fond. */
.fc-hero--image .fc-recherche__form {
  box-shadow: 0 12px 32px rgba(28, 25, 23, .28);
}

.fc-recherche__form {
  display: grid;
  gap: var(--fc-space-2);
  padding: var(--fc-space-4);
  background: var(--fc-surface-0);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-2);
}

/* Trois lignes : le projet, le type, puis le lieu et l'action. Les libellés
   au-dessus des groupes ont disparu — « Votre projet » n'apprend rien à qui
   lit « Location · Vente · Cession », et chacun coûtait une hauteur de texte
   plus sa marge. Les groupes gardent un `aria-label` pour les lecteurs
   d'écran, qui ne voient pas la disposition. */
.fc-recherche__form {
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
}

.fc-recherche__groupe {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fc-recherche__legende {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--fc-space-2);
  font-size: var(--fc-text-xs);
  font-weight: 600;
  color: var(--fc-ink-500);
}

/* -------------------------------------------------------------------------
   Onglets : la première décision, celle qui change le sens du reste.
   ---------------------------------------------------------------------- */

.fc-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-1);
  border-bottom: 1px solid var(--fc-border);
}

.fc-onglets__option { position: relative; display: inline-flex; }

.fc-onglets__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.fc-onglets__etiquette {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--fc-space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fc-text-sm);
  font-weight: 600;
  color: var(--fc-ink-500);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}

.fc-onglets__etiquette:hover { color: var(--fc-ink-900); }

.fc-onglets__option input:checked + .fc-onglets__etiquette {
  color: var(--fc-brand-600);
  border-bottom-color: var(--fc-brand-500);
}

.fc-onglets__option input:focus-visible + .fc-onglets__etiquette {
  outline: 2px solid var(--fc-focus);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------
   Cartes de typologie : une icône et un mot, sur une seule rangée.

   L'icône n'est pas décorative pour rien : elle donne un repère visuel qui se
   retrouve d'un coup d'œil, là où quatre libellés se lisent l'un après
   l'autre.
   ---------------------------------------------------------------------- */

.fc-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--fc-space-2);
}

.fc-cartes__option { position: relative; display: flex; }

.fc-cartes__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.fc-cartes__etiquette {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  background: var(--fc-surface-0);
  color: var(--fc-ink-700);
  font-size: var(--fc-text-xs);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.fc-cartes__etiquette:hover { border-color: var(--fc-ink-300); }

.fc-cartes__icone { width: 22px; height: 22px; flex: none; }

.fc-cartes__nom { line-height: 1.2; }

.fc-cartes__option input:checked + .fc-cartes__etiquette {
  background: var(--fc-brand-50);
  border-color: var(--fc-brand-500);
  color: var(--fc-brand-700);
  font-weight: 600;
}

.fc-cartes__option input:focus-visible + .fc-cartes__etiquette {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Dernière ligne : où, puis l'action. Elles se tiennent.
   ---------------------------------------------------------------------- */

.fc-recherche__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--fc-space-2);
}

.fc-recherche__lieu { flex: 1 1 16rem; min-width: 0; }

/* Le champ à étiquettes remplit la hauteur de la ligne, pour s'aligner sur le
   bouton posé à côté. */
.fc-recherche__lieu .fc-lieux { height: 100%; margin: 0; }

@media (max-width: 559px) {
  /* Sous cette largeur, le bouton à côté du champ ne laisse plus la place
     d'écrire : il passe dessous, sur toute la largeur. */
  .fc-recherche__lieu { flex: 1 1 100%; }
  .fc-recherche__ligne .fc-recherche__submit { flex: 1 1 100%; }
}

/* Le bouton occupe toute la largeur sur mobile, où il est la seule action. */
.fc-recherche__submit { min-height: 48px; }

@media (max-width: 759px) {
  .fc-recherche__submit { width: 100%; }
}

@media (min-width: 760px) {
  .fc-recherche__submit { justify-self: start; min-width: 12rem; }
}

.fc-recherche__champ label { display: block; margin-bottom: var(--fc-space-1); font-size: var(--fc-text-xs); font-weight: 600; color: var(--fc-ink-500); }

.fc-recherche__champ input,
.fc-recherche__champ select {
  width: 100%;
  padding: var(--fc-space-3);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  font: inherit;
  background: var(--fc-surface-0);
}

/* -------------------------------------------------------------------------
   Choix visibles : boutons radio et cases déguisés en pastilles.

   La case native reste dans le DOM et garde le clavier et les lecteurs
   d'écran ; seul son rendu change. Masquer avec `display: none` la sortirait
   de l'ordre de tabulation, d'où le décalage hors écran.
   ---------------------------------------------------------------------- */

.fc-choix { display: flex; flex-wrap: wrap; gap: var(--fc-space-2); }

/* `hidden` doit gagner sur le `display` des pastilles : sans cela, les cases
   de lieu que le script masque restent visibles sous le champ à étiquettes,
   et le visiteur voit la même liste deux fois. */
.fc-choix[hidden] { display: none; }

.fc-choix--grille { gap: var(--fc-space-2); }

.fc-choix__option { position: relative; display: inline-flex; }

.fc-choix__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.fc-choix__etiquette {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--fc-space-2) var(--fc-space-4);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  background: var(--fc-surface-0);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.fc-choix__etiquette:hover { border-color: var(--fc-ink-300); }

.fc-choix__option input:checked + .fc-choix__etiquette {
  background: var(--fc-brand-500);
  border-color: var(--fc-brand-500);
  color: var(--fc-surface-0);
  font-weight: 600;
}

/* Le focus doit rester visible alors que la case elle-même ne l'est pas. */
.fc-choix__option input:focus-visible + .fc-choix__etiquette {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Champ de localisation à étiquettes.

   Un commerçant vise deux ou trois secteurs, rarement un seul, et la liste
   des quartiers s'allongera avec les villes couvertes. Les lieux retenus
   s'empilent donc dans le champ, comme chez les portails professionnels.
   ---------------------------------------------------------------------- */

.fc-lieux {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-2);
  min-height: 48px;
  padding: var(--fc-space-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  background: var(--fc-surface-0);
  cursor: text;
}

.fc-lieux:focus-within {
  border-color: var(--fc-brand-500);
  outline: 2px solid var(--fc-focus);
  outline-offset: 1px;
}

.fc-lieux__etiquettes { display: contents; }

.fc-lieux__etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-1) var(--fc-space-1) var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius-md);
  background: var(--fc-brand-100);
  color: var(--fc-brand-700);
  font-size: var(--fc-text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.fc-lieux__retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--fc-radius-md);
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
}

.fc-lieux__retirer:hover { background: rgba(124, 45, 18, .14); }

.fc-lieux__saisie {
  flex: 1 1 12rem;
  min-width: 8rem;
  border: 0;
  padding: var(--fc-space-2);
  font: inherit;
  background: transparent;
}

.fc-lieux__saisie:focus { outline: none; }

.fc-lieux__liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--fc-z-panneau);
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--fc-space-1);
  list-style: none;
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-2);
}

.fc-lieux__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius-md);
  cursor: pointer;
}

.fc-lieux__item--actif,
.fc-lieux__item:hover { background: var(--fc-surface-100); }

.fc-lieux__nom { font-weight: 600; color: var(--fc-ink-900); }

/* La ville distingue deux quartiers homonymes, ce qui arrivera dès la
   deuxième ville couverte. */
.fc-lieux__contexte { font-size: var(--fc-text-xs); color: var(--fc-ink-500); }

.fc-lieux__vide {
  padding: var(--fc-space-3);
  color: var(--fc-ink-500);
  font-size: var(--fc-text-sm);
}

.fc-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--fc-z-panneau);
  max-height: 340px;
  overflow-y: auto;
  margin: var(--fc-space-1) 0 0;
  padding: var(--fc-space-1);
  list-style: none;
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-3);
}

.fc-suggestions__lien {
  display: flex;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius-sm);
  color: var(--fc-ink-900);
  text-decoration: none;
}

.fc-suggestions__item--actif .fc-suggestions__lien,
.fc-suggestions__lien:hover { background: var(--fc-surface-100); }

.fc-suggestions__contexte { color: var(--fc-ink-500); font-size: var(--fc-text-sm); white-space: nowrap; }

/* =========================================================================
   15. Facettes
   ========================================================================= */

.fc-facettes__declencheur { width: 100%; }

@media (min-width: 960px) { .fc-facettes__declencheur { display: none; } }

.fc-facettes {
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-5);
  background: var(--fc-surface-0);
}

/* Sur mobile, les filtres s'ouvrent en panneau bas d'écran : une colonne
   latérale y serait inutilisable. */
@media (max-width: 959px) {
  .fc-facettes {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--fc-z-panneau);
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0;
    box-shadow: var(--fc-shadow-3);
    transform: translateY(100%);
    transition: transform .2s ease-out;
  }
  .fc-facettes--ouvert { transform: translateY(0); }
}

.fc-facettes__groupe { margin-bottom: var(--fc-space-5); }

/* Les groupes sont des `fieldset` depuis que les filtres sont des boutons :
   sans remise à zéro, le navigateur ajoute bordure et marges propres. */
fieldset.fc-facettes__groupe { border: 0; padding: 0; min-width: 0; }

.fc-facettes__legende { font-weight: 600; font-size: var(--fc-text-sm); margin-bottom: var(--fc-space-2); }

/* `legend` a un rendu propre au navigateur : `display: block` le ramène au
   flux normal, où la marge s'applique. Ne pas utiliser `float` ici, il sort la
   légende du flux et pousse les boutons hors de la colonne. */
legend.fc-facettes__legende { display: block; width: 100%; padding: 0; }

.fc-facettes__paire { display: flex; gap: var(--fc-space-2); }

/* Dans une colonne latérale, une pastille large se casse en quatre lignes :
   « 50 à 100 m² » devient illisible. On serre le rembourrage, on empêche la
   coupure, et on laisse la rangée défiler plutôt que de déformer les boutons. */
.fc-facettes .fc-choix__etiquette {
  min-height: 40px;
  padding: var(--fc-space-2) var(--fc-space-3);
  white-space: nowrap;
}

/* Les lieux gardent leur grille : ce sont des noms courts, et ils passent de
   toute façon derrière le champ à étiquettes dès que le script tourne. */
.fc-facettes .fc-choix--ligne {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--fc-space-1);
  scrollbar-width: thin;
}

@media (max-width: 959px) {
  /* En panneau bas d'écran la largeur revient : les boutons peuvent passer à
     la ligne plutôt que de défiler. */
  .fc-facettes .fc-choix--ligne { flex-wrap: wrap; overflow-x: visible; }
}

/* Artère et activité : utiles à peu de recherches, repliés pour tout le
   monde, ouverts d'office si l'un d'eux est actif. */
.fc-facettes__avances { margin-bottom: var(--fc-space-5); }

.fc-facettes__avances > summary {
  cursor: pointer;
  padding: var(--fc-space-2) 0;
  font-size: var(--fc-text-sm);
  font-weight: 600;
  color: var(--fc-ink-700);
}

.fc-facettes__avances > summary:hover { color: var(--fc-brand-600); }

.fc-facettes__avances[open] > summary { margin-bottom: var(--fc-space-3); }

.fc-facettes__avances select {
  width: 100%;
  padding: var(--fc-space-3);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  font: inherit;
  background: var(--fc-surface-0);
}

.fc-facettes input, .fc-facettes select {
  width: 100%;
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  font: inherit;
  font-size: var(--fc-text-sm);
}

.fc-resultats__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-5);
}

.fc-resultats__compte { font-weight: 600; }
.fc-resultats__tri { margin-left: auto; }

.fc-vide {
  /* Le bloc crée son propre contexte d'empilement : sans cela, le formulaire
     qu'il contient passe sous l'en-tête collant au défilement. */
  position: relative;
  z-index: 0;
  padding: var(--fc-space-8);
  text-align: center;
  border: 1px dashed var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-50);
}

/* Le centrage vaut pour le message, pas pour le formulaire : un libellé centré
   au-dessus d'un champ aligné à gauche se rattache mal à ce qu'il nomme. */
.fc-vide .fc-lead {
  max-width: 34rem;
  margin: var(--fc-space-6) auto 0;
  text-align: left;
}

.fc-vide .fc-lead__titre { text-align: center; }

/* Double appel : le formulaire de recherche à gauche, l'entrée propriétaire à
   droite. Les deux publics coexistent sur une page de quartier, et n'en servir
   qu'un revient à laisser passer la moitié des contacts. */
.fc-cta {
  display: grid;
  gap: var(--fc-space-5);
  padding: var(--fc-space-6);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-100);
}

@media (min-width: 900px) {
  /* Le formulaire garde la part principale : c'est le chemin le plus emprunté. */
  .fc-cta { grid-template-columns: 3fr 2fr; align-items: start; }

  /* Le formulaire fait trois fois et demi la hauteur de l'encart : calé en
     haut, il laissait huit cents pixels de blanc à droite. Adhérent, l'encart
     reste sous les yeux du propriétaire qui parcourt le formulaire. */
  .fc-cta__second { position: sticky; top: var(--fc-space-6); }
}

.fc-cta__principal .fc-lead { margin: 0; }

.fc-cta__second {
  padding: var(--fc-space-5);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-0);
}

.fc-cta__titre {
  margin-top: 0;
  font-size: var(--fc-text-lg);
}

.fc-cta__arguments {
  margin: var(--fc-space-4) 0;
  padding-left: var(--fc-space-5);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
}

.fc-cta__arguments li { margin-bottom: var(--fc-space-1); }

/* =========================================================================
   16. Professionnels
   ========================================================================= */

.fc-pro-card {
  padding: var(--fc-space-4);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-0);
}

.fc-pro-card__lien { color: inherit; text-decoration: none; }
.fc-pro-card__titre { font-size: var(--fc-text-md); margin-bottom: var(--fc-space-1); }

.fc-pro__note { font-size: var(--fc-text-lg); margin: 0 0 var(--fc-space-3); }
.fc-pro__note strong { color: var(--fc-brand-700); }
.fc-pro__avis { color: var(--fc-ink-500); font-size: var(--fc-text-sm); margin-left: var(--fc-space-2); }
.fc-pro__visuel { border-radius: var(--fc-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: var(--fc-space-5); }
.fc-pro__visuel img { width: 100%; height: 100%; object-fit: cover; }

.fc-pro-card__badge {
  display: inline-block;
  padding: var(--fc-space-1) var(--fc-space-2);
  border-radius: var(--fc-radius-sm);
  background: var(--fc-brand-50);
  color: var(--fc-brand-700);
  font-size: var(--fc-text-xs);
  font-weight: 600;
}

/* =========================================================================
   17. Réalisations et lexique
   ========================================================================= */

.fc-realisations { list-style: none; margin: 0; padding: 0; }

.fc-realisation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2) var(--fc-space-4);
  padding: var(--fc-space-3) 0;
  border-bottom: 1px solid var(--fc-border);
  font-size: var(--fc-text-sm);
}

.fc-realisation__operation { font-weight: 600; }
.fc-realisation__lieu { color: var(--fc-ink-700); }
.fc-realisation__date { margin-left: auto; color: var(--fc-ink-500); }

.fc-lexique__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-8);
}

.fc-lexique__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  text-decoration: none;
  font-weight: 600;
}

.fc-lexique__lettre { color: var(--fc-brand-600); }
.fc-lexique__terme { font-weight: 700; margin-top: var(--fc-space-4); }
.fc-lexique__definition { margin: var(--fc-space-1) 0 0; color: var(--fc-ink-700); }
.fc-lexique__avertissement { display: block; margin-top: var(--fc-space-1); font-size: var(--fc-text-sm); color: var(--fc-warning); }

.fc-terme { border-bottom: 1px dotted var(--fc-ink-300); cursor: help; text-decoration: none; }

/* =========================================================================
   18. Éditorial
   ========================================================================= */

/* Une ligne trop longue fatigue l'œil, une colonne trop étroite dans un
   conteneur large laisse un vide qui déséquilibre la page. Soixante-quinze
   signes tiennent les deux bouts.
   Aligné à gauche comme le titre et le fil d'Ariane : centrer le bloc le
   décalait de tout le reste. */
/* -------------------------------------------------------------------------
   Deux colonnes : le texte, et ce qui doit rester sous les yeux.

   Le texte est plafonné à 75 caractères par ligne — au-delà, l'œil perd le
   début de la ligne suivante. Dans un conteneur de 1148 px, cela laissait
   500 px vides. La colonne latérale accueille la fourchette et le formulaire :
   notre argument et la seule conversion possible tant que le catalogue est
   vide. Les descendre en bas de page revenait à ne les montrer qu'à ceux qui
   lisent jusqu'au bout.
   ---------------------------------------------------------------------- */

.fc-colonnes { display: grid; gap: var(--fc-space-6); }

@media (min-width: 1000px) {
  .fc-colonnes {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

.fc-colonnes__principal { min-width: 0; }

@media (min-width: 1000px) {
  /* La colonne suit la lecture : les chiffres restent visibles pendant qu'on
     parcourt le texte, au lieu de disparaître au premier défilement. */
  .fc-colonnes__aside {
    position: sticky;
    top: calc(var(--fc-space-6) + 64px);
  }
}

/* Les blocs portent leur propre conteneur : imbriqué ici, il doublerait les
   marges et replafonnerait la largeur. On le rend transparent. */
.fc-colonnes .fc-conteneur {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Dans une colonne étroite, un bloc n'a plus besoin de son espacement de
   pleine page. */
.fc-colonnes__aside .fc-bloc { padding-block: 0; }
.fc-colonnes__aside .fc-bloc + .fc-bloc { margin-top: var(--fc-space-5); }

/* La fourchette devient une carte, puisqu'elle n'occupe plus la largeur. */
.fc-colonnes__aside .fc-bloc--fourchette {
  padding: var(--fc-space-5);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-surface-0);
}

/* Le double appel s'empile au lieu de se poser côte à côte. */
.fc-colonnes__aside .fc-cta {
  grid-template-columns: 1fr;
  padding: var(--fc-space-5);
}

.fc-colonnes__aside .fc-cta__titre { font-size: var(--fc-text-md); }

/* Dans 22 rem, `--fc-text-3xl` coupe « 174 MAD/m²/mois » en deux lignes. Une
   valeur cassée en son milieu perd exactement ce qui en fait l'intérêt : se
   lire d'un coup d'œil. */
.fc-colonnes__aside .fc-fourchette__mediane {
  font-size: var(--fc-text-2xl);
  text-wrap: balance;
}

.fc-colonnes__aside .fc-fourchette__valeurs { font-size: var(--fc-text-md); }

/* Le séparateur reste avec la borne qui le suit : seul en fin de ligne, il se
   lit comme un tiret de ponctuation. */
.fc-fourchette__sep + .fc-fourchette__max { white-space: nowrap; }

/* Sur mobile, la colonne latérale passe sous le texte. C'est le bon ordre :
   on lit, puis on agit. La fourchette apparaît de toute façon dans les
   premières phrases de chaque page. */

/* 75ch donnaient 647 px dans un conteneur de 1180 : la page paraissait à
   moitié remplie. 82ch restent sous le seuil où l'œil perd la ligne suivante
   en revenant à la marge, et le vide à droite cesse de se voir. */
.fc-editorial { max-width: 82ch; }

/* Le hero précède la mise en colonnes et occupe donc toute la largeur. Son
   texte d'introduction reste lisible sans s'étirer sur 1148 px. */
.fc-hero__intro { max-width: 68ch; }
.fc-editorial h2 { margin-top: var(--fc-space-8); }
.fc-editorial h3 { margin-top: var(--fc-space-6); font-size: var(--fc-text-lg); }
.fc-editorial ul, .fc-editorial ol { padding-left: var(--fc-space-5); }
.fc-editorial li { margin-bottom: var(--fc-space-2); }

.fc-hero { padding-block: var(--fc-space-10) var(--fc-space-8); }

.fc-hero--accueil {
  background: linear-gradient(180deg, var(--fc-brand-50), var(--fc-surface-0));
  padding-block: var(--fc-space-12);
}

/* Vingt signes coupaient « Louer un local commercial à Casablanca » en trois
   lignes alors que la place ne manquait pas. Trente laissent respirer un titre
   long sans produire de ligne interminable. */
.fc-hero__titre { max-width: 30ch; }
.fc-hero__intro { max-width: 65ch; font-size: var(--fc-text-lg); color: var(--fc-ink-700); }

/* Avec une photo : un voile sombre garantit la lisibilité quelle que soit
   l'image, et le formulaire reste posé sur la partie basse. */
.fc-hero--image {
  position: relative;
  background-size: cover;

  /* Le cadrage garde les façades visibles et laisse la chaussée sous le
     formulaire : c'est là que la photo est la plus calme. */
  background-position: center 35%;
  padding-block: var(--fc-space-16) var(--fc-space-12);
  min-height: min(62vh, 520px);
  display: flex;
  align-items: center;
}

/* Le voile s'assombrit vers le bas, où se pose le formulaire : le haut de
   l'image reste lisible, les champs restent contrastés. */
.fc-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    170deg,
    rgba(28, 25, 23, .42) 0%,
    rgba(28, 25, 23, .55) 45%,
    rgba(28, 25, 23, .72) 100%);
}

/* Le conteneur passe au-dessus du voile, et garde toute la largeur malgré le
   `display: flex` du parent. */
.fc-hero--image > * { position: relative; width: 100%; }

.fc-hero--image .fc-hero__titre,
.fc-hero--image .fc-hero__intro {
  color: var(--fc-surface-0);
  text-shadow: 0 1px 3px rgba(28, 25, 23, .45);
}

.fc-hero--image .fc-hero__titre { max-width: 24ch; }

.fc-pagination { display: flex; justify-content: center; gap: var(--fc-space-2); margin-top: var(--fc-space-8); }
.fc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--fc-space-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  text-decoration: none;
}
.fc-pagination .current { background: var(--fc-brand-500); border-color: var(--fc-brand-500); color: #fff; }

/* =========================================================================
   19. Impression et préférences système
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .fc-header, .fc-footer, .fc-facettes, .fc-lead, .fc-btn { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 90%; }
}

/* =========================================================================
   20. Menu automatique — sous-menus classiques, sans méga-menu
   ========================================================================= */

.fc-menu {
  display: flex;
  gap: var(--fc-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-menu__item { position: relative; }

.fc-menu a,
.fc-menu__libelle {
  display: block;
  padding-block: var(--fc-space-2);
  color: var(--fc-ink-700);
  font-size: var(--fc-text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.fc-menu a:hover { color: var(--fc-brand-600); }

.fc-menu__item--parent > a::after,
.fc-menu__item--parent > .fc-menu__libelle::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: var(--fc-space-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.fc-menu__sous {
  list-style: none;
  margin: 0;
  padding: var(--fc-space-2);
}

@media (min-width: 860px) {
  .fc-menu__sous {
    position: absolute;
    top: 100%;
    left: calc(var(--fc-space-3) * -1);
    z-index: var(--fc-z-panneau);
    min-width: 220px;
    background: var(--fc-surface-0);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    box-shadow: var(--fc-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s, transform .12s;
  }

  .fc-menu__item--parent:hover .fc-menu__sous,
  .fc-menu__item--parent:focus-within .fc-menu__sous {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .fc-menu__sous a {
    padding: var(--fc-space-2) var(--fc-space-3);
    border-radius: var(--fc-radius-sm);
  }

  .fc-menu__sous a:hover { background: var(--fc-surface-100); }
}

/* Sur mobile, le sous-menu se déplie sous son parent : un survol n'existe pas. */
@media (max-width: 859px) {
  .fc-menu { flex-direction: column; gap: var(--fc-space-2); }

  .fc-menu__sous {
    padding-left: var(--fc-space-4);
    border-left: 2px solid var(--fc-border);
  }

  .fc-menu__item--parent > a::after,
  .fc-menu__item--parent > .fc-menu__libelle::after { display: none; }
}

.fc-footer__col { min-width: 0; }

.fc-bloc--alentours .fc-liste-liens a {
  border-color: var(--fc-brand-100);
  background: var(--fc-brand-50);
}

/* =========================================================================
   Articles de fond
   ====================================================================== */

.fc-article {
  padding-block: var(--fc-space-8) var(--fc-space-16);
}

.fc-article__entete h1 {
  margin-block-end: var(--fc-space-3);
}

.fc-article__meta {
  color: var(--fc-ink-500);
  font-size: var(--fc-text-sm);
  margin-block-end: var(--fc-space-8);
}

/* L'en-tête d'un article sans image : il garde la largeur de lecture et la
   respiration du reste de la page, sans bandeau ni fond. */
.fc-article__entete--nu {
  padding-block: var(--fc-space-8) 0;
}

/* L'en-tête illustré reprend `.fc-hero--image` — voile, titre blanc, fil
   d'Ariane clair sont déjà définis là-bas. Ne restent que les écarts propres
   à un article. */

/* Une page hub réserve 62vh parce qu'un formulaire se pose en bas du hero. Un
   article n'a rien à y poser : la hauteur du titre suffit, et le premier
   paragraphe remonte d'autant. */
.fc-hero--article {
  min-height: 0;
  padding-block: var(--fc-space-12) var(--fc-space-10);
}

/* La photo est le sujet de l'image, pas son décor : on cadre un peu plus haut
   que le hero d'une page hub, où la chaussée devait rester dégagée. */
.fc-hero--article {
  background-position: center 42%;
}

.fc-hero--article .fc-hero__titre {
  max-width: 22ch;
  margin-block-end: var(--fc-space-3);
}

/* La date perd le gris de lecture : sur la photo elle passerait sous le seuil
   de contraste. */
.fc-hero--article .fc-article__meta {
  color: rgba(255, 255, 255, .82);
  margin-block-end: 0;
}

/* Sommaire */

.fc-sommaire {
  background: var(--fc-surface-100);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-5) var(--fc-space-6);
  margin-block-end: var(--fc-space-8);
}

.fc-sommaire__titre {
  font-size: var(--fc-text-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fc-ink-500);
  margin: 0 0 var(--fc-space-3);
}

.fc-sommaire__liste {
  margin: 0;
  padding-inline-start: var(--fc-space-5);
  display: grid;
  gap: var(--fc-space-2);
}

.fc-sommaire__liste a {
  color: var(--fc-ink-700);
  text-decoration: none;
}

.fc-sommaire__liste a:hover {
  color: var(--fc-brand-700);
  text-decoration: underline;
}

/* Sur un écran étroit, huit entrées empilées occupaient quatre cents pixels et
   repoussaient la première phrase de l'article sous le pli. Deux colonnes et
   un texte resserré ramènent le sommaire à un tiers de cette hauteur, sans
   rien retirer au DOM : ces liens sont du maillage interne. */
@media (max-width: 859px) {
  .fc-sommaire {
    padding: var(--fc-space-4);
    margin-block-end: var(--fc-space-6);
  }

  .fc-sommaire__titre {
    margin-block-end: var(--fc-space-2);
  }

  .fc-sommaire__liste {
    grid-template-columns: 1fr 1fr;
    gap: var(--fc-space-1) var(--fc-space-4);
    padding-inline-start: var(--fc-space-4);
    font-size: var(--fc-text-sm);
    line-height: 1.35;
  }
}

/* Corps de l'article : le confort de lecture prime, ces textes font 2 000 mots. */

.fc-article__corps {
  font-size: var(--fc-text-lg);
  line-height: 1.75;
}

.fc-article__corps h2 {
  margin-block: var(--fc-space-12) var(--fc-space-4);
  padding-block-start: var(--fc-space-4);
  border-block-start: 2px solid var(--fc-brand-100);
  scroll-margin-block-start: var(--fc-space-8);
}

.fc-article__corps h3 {
  margin-block: var(--fc-space-8) var(--fc-space-3);
}

/* Un tableau éditorial défile plutôt que de pousser la page : `width: 100%`
   ne contraint pas la largeur minimale du contenu, et cinq colonnes de
   libellés longs débordent sur un téléphone. Les tableaux de données ont déjà
   leur `.fc-tableau-scroll` ; ceux-ci viennent du rédacteur, sans enveloppe. */
.fc-article__corps table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--fc-space-6);
  font-size: var(--fc-text-md);
}

.fc-article__corps th,
.fc-article__corps td {
  border: 1px solid var(--fc-border);
  padding: var(--fc-space-2) var(--fc-space-3);
  text-align: start;
}

.fc-article__corps thead th {
  background: var(--fc-surface-100);
}

/* Encadré de chiffres : la donnée en tête d'article, comme accroche de
   crédibilité — jamais comme finalité. */

.fc-chiffres {
  background: var(--fc-surface-50);
  border-inline-start: 4px solid var(--fc-ocre);
  border-radius: 0 var(--fc-radius-md) var(--fc-radius-md) 0;
  padding: var(--fc-space-5) var(--fc-space-6);
  margin-block: var(--fc-space-6);
}

.fc-chiffres h2,
.fc-chiffres h3 {
  margin-block: 0 var(--fc-space-3);
  border: 0;
  padding: 0;
  font-size: var(--fc-text-lg);
}

.fc-chiffres ul {
  margin: 0;
  padding-inline-start: var(--fc-space-5);
}

.fc-chiffres li + li {
  margin-block-start: var(--fc-space-2);
}

/* Avertissement : ce que nous ne pouvons pas affirmer sans juriste. */

.fc-avertissement {
  background: var(--fc-surface-100);
  border: 1px solid var(--fc-brand-100);
  border-radius: var(--fc-radius-md);
  padding: var(--fc-space-4) var(--fc-space-5);
  margin-block: var(--fc-space-6);
  font-size: var(--fc-text-md);
  color: var(--fc-ink-700);
}

/* Conversion */

.fc-article-cta {
  background: var(--fc-brand-700);
  color: var(--fc-surface-0);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-8);
  margin-block-start: var(--fc-space-12);
}

.fc-article-cta__titre {
  color: var(--fc-surface-0);
  margin-block: 0 var(--fc-space-3);
}

.fc-article-cta__texte {
  color: var(--fc-brand-100);
  margin-block-end: var(--fc-space-6);
}

.fc-article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-3);
  margin: 0;
}

.fc-article-cta .fc-btn--primaire {
  background: var(--fc-surface-0);
  color: var(--fc-brand-700);
  border-color: var(--fc-surface-0);
}

.fc-article-cta .fc-btn--primaire:hover {
  background: var(--fc-brand-100);
  color: var(--fc-brand-700);
}

/* Articles liés */

.fc-articles-lies__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fc-space-3);
}

.fc-articles-lies__item a {
  display: block;
  padding: var(--fc-space-4);
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  text-decoration: none;
  color: var(--fc-ink-900);
  font-weight: 600;
}

.fc-articles-lies__item a:hover {
  border-color: var(--fc-brand-500);
  color: var(--fc-brand-700);
}

@media (min-width: 48rem) {
  .fc-articles-lies__liste {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Biens rattachés à un article : moins appuyés que le CTA, qui reste
   l'objectif de la page. */

.fc-article-biens {
  margin-block-start: var(--fc-space-12);
  padding-block-start: var(--fc-space-8);
  border-block-start: 1px solid var(--fc-border);
}

.fc-article-biens .fc-bloc__titre {
  font-size: var(--fc-text-xl);
}

/* =========================================================================
   Carte d'article — représentation unique, partout
   ====================================================================== */

.fc-article-card {
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fc-article-card:hover {
  border-color: var(--fc-brand-500);
  box-shadow: var(--fc-shadow-2);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .fc-article-card { transition: none; }
  .fc-article-card:hover { transform: none; }
}

.fc-article-card__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.fc-article-card__lien:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}

/* Les illustrations sont produites en 1,60. Un cadre en 4/3 les rognait sur
   les côtés et allongeait la carte ; en 16/9 le rognage passe en haut et en
   bas, et le titre remonte d'un quart de hauteur. */
.fc-article-card__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fc-surface-100);
}

.fc-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* L'accroche de la vignette : un chiffre et ce qu'il désigne, posés sur la
   photo. Le titre, lui, reste sous l'image — l'y répéter n'apporte rien.

   Le voile ne couvre que les cartes qui portent un texte : sur les autres il
   assombrirait la photo sans raison. Il s'épaissit vers le bas, où le texte
   se pose, et laisse le haut de l'image intact. */
.fc-article-card--accroche .fc-article-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 25, 23, .10) 0%,
    rgba(28, 25, 23, .30) 45%,
    rgba(28, 25, 23, .68) 100%);
}

.fc-article-card__accroche {
  position: absolute;
  inset-inline: var(--fc-space-4);
  inset-block-end: var(--fc-space-4);
  margin: 0;
  z-index: 1;
}

/* Une taille propre à la carte plutôt que `--fc-text-3xl` : cette échelle
   monte à 2,75rem sur grand écran, calibrée pour un titre pleine largeur. Ici
   le chiffre suit la largeur de la vignette, qui varie peu — il doit porter
   sans déborder d'une carte de trois cents pixels. */
.fc-article-card__chiffre {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fc-ocre-clair);
  text-shadow: 0 1px 5px rgba(28, 25, 23, .65);
}

.fc-article-card__libelle {
  display: block;
  margin-block-start: var(--fc-space-1);
  font-size: var(--fc-text-sm);
  line-height: 1.25;
  font-weight: 500;
  color: var(--fc-surface-0);
  text-shadow: 0 1px 3px rgba(28, 25, 23, .6);
}

.fc-article-card__corps {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding: var(--fc-space-5);
  flex: 1;
}

.fc-article-card__categorie {
  margin: 0;
  font-size: var(--fc-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fc-ocre);
  font-weight: 600;
}

.fc-article-card__titre {
  margin: 0;
  font-size: var(--fc-text-lg);
  line-height: 1.3;
  color: var(--fc-ink-900);
}

.fc-article-card:hover .fc-article-card__titre { color: var(--fc-brand-700); }

.fc-article-card__extrait {
  margin: 0;
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
  line-height: 1.55;
}

/* La méta est poussée en bas : les cartes d'une même rangée alignent leur
   pied quelle que soit la longueur du titre. */
.fc-article-card__meta {
  margin: auto 0 0;
  padding-top: var(--fc-space-2);
  font-size: var(--fc-text-xs);
  color: var(--fc-ink-500);
}

/* Variante compacte : sans image ni extrait, pour les listes secondaires. */

.fc-article-card--compacte .fc-article-card__corps {
  padding: var(--fc-space-4);
}

.fc-article-card--compacte .fc-article-card__titre {
  font-size: var(--fc-text-md);
}

/* Navigation par rubrique */

.fc-filtres-categories {
  margin-block: var(--fc-space-8) var(--fc-space-6);
}

.fc-filtres-categories__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-filtres-categories__lien {
  display: inline-block;
  padding: var(--fc-space-2) var(--fc-space-4);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-pill);
  background: var(--fc-surface-0);
  color: var(--fc-ink-700);
  font-size: var(--fc-text-sm);
  text-decoration: none;
}

.fc-filtres-categories__lien:hover {
  border-color: var(--fc-brand-500);
  color: var(--fc-brand-700);
}

.fc-filtres-categories__lien--actif {
  background: var(--fc-brand-700);
  border-color: var(--fc-brand-700);
  color: var(--fc-surface-0);
}

.fc-filtres-categories__lien--actif:hover { color: var(--fc-surface-0); }

/* Lien « tout voir » sous un bloc de liste */

.fc-bloc__lien-tout {
  margin-top: var(--fc-space-5);
  text-align: center;
}

.fc-bloc__lien-tout a {
  font-weight: 600;
  color: var(--fc-brand-700);
}

/* =========================================================================
   Capture — le bloc affiché quand aucun bien ne correspond
   ====================================================================== */

.fc-capture {
  display: grid;
  gap: var(--fc-space-8);
  padding: var(--fc-space-8);
  background: var(--fc-surface-100);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
}

@media (min-width: 62rem) {
  .fc-capture { grid-template-columns: 1fr 1fr; align-items: start; }
}

.fc-capture__titre {
  font-size: var(--fc-text-2xl);
  margin-block: 0 var(--fc-space-4);
}

.fc-capture__texte p { color: var(--fc-ink-700); }

.fc-capture__points {
  list-style: none;
  margin: var(--fc-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--fc-space-2);
}

.fc-capture__points li {
  padding-inline-start: var(--fc-space-6);
  position: relative;
  color: var(--fc-ink-700);
  font-size: var(--fc-text-sm);
}

/* Une pastille verte devant chaque ligne signale « voici mes arguments » avant
   qu'on les lise. Un tiret laisse le texte parler. */
.fc-capture__points li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--fc-ink-300);
}

/* La seconde porte : sur une page de quartier se trouvent aussi des
   propriétaires. Discrète, mais toujours présente. */
.fc-capture__autre {
  margin-block-start: var(--fc-space-6);
  padding-block-start: var(--fc-space-4);
  border-block-start: 1px solid var(--fc-border);
  font-size: var(--fc-text-sm);
  color: var(--fc-ink-700);
}

.fc-capture__formulaire .fc-lead {
  background: var(--fc-surface-0);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  padding: var(--fc-space-5);
}

/* Bouton propriétaire, permanent dans l'en-tête.
   Sur mobile il passe avant le menu déroulant : c'est la seconde porte du
   site, elle ne doit jamais demander d'ouvrir un menu pour être trouvée. */

.fc-header__action {
  flex-shrink: 0;
  font-size: var(--fc-text-sm);
  padding: var(--fc-space-2) var(--fc-space-4);
  white-space: nowrap;
}

@media (max-width: 859px) {
  .fc-header__inner { flex-wrap: wrap; }
  .fc-nav-toggle { margin-left: auto; order: 3; }
  .fc-header__action { order: 2; }
  .fc-nav { order: 4; }
}

@media (min-width: 860px) {
  .fc-nav { margin-left: auto; margin-right: var(--fc-space-4); }
}

/* Boutons du hero quand le catalogue est vide : ils remplacent le formulaire
   de recherche, et doivent avoir la même présence visuelle. */
.fc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fc-space-3);
    margin-top: var(--fc-space-6);
}

/* Une image au milieu du texte : la seule respiration d'une page qui aligne
   soixante paragraphes. Le ratio est fixe par le recadrage 1280x800, donc la
   mise en page ne saute pas pendant le chargement. */
.fc-illustration {
    margin: var(--fc-space-8) auto;

    /* Sans conteneur, `width: 100%` prenait toute la largeur de page sur
       l'accueil : une image de 1280 px étirée à 1440 ouvrait un vide de neuf
       cents pixels au milieu de la page. */
    max-width: var(--fc-container);
    padding-inline: var(--fc-space-6);
}

.fc-illustration__image {
    display: block;
    width: 100%;

    /* Agrandir une image au-delà de sa définition la rend molle : on la laisse
       plus petite plutôt que floue. */
    max-width: 1280px;
    height: auto;
    border-radius: var(--fc-radius-lg);
}

.fc-illustration__legende {
    margin-top: var(--fc-space-2);
    font-size: var(--fc-text-sm);
    color: var(--fc-ink-500);
}

/* =========================================================================
 * Rythme vertical : donner des frontières aux sections
 * ====================================================================== */

/* Huit blocs sur neuf étaient en fond transparent : la page se lisait comme un
   seul aplat blanc, sans qu'on sache où une section finit. Colorer tous les
   blocs ferait un damier ; on alterne, et un fond très pâle suffit à poser une
   frontière sans crier. */
/* Seuls les blocs SANS carte intérieure prennent la bande. `capture` et `cta`
   en contiennent une, avec son propre fond : leur donner un fond de section
   empilait deux beiges presque identiques, séparés d'un liseré. Le défaut avait
   été corrigé pour les colonnes en 0.2.24 ; il survivait en pleine largeur, où
   il se voit davantage. */
.fc-bloc--tableau-prix {
    padding-block: var(--fc-space-10);

    /* `--fc-surface-50` est un jaune si pâle qu'il passe pour du blanc : la
       frontière qu'il devait marquer restait invisible. Ce beige se distingue
       sans s'imposer, et il reste dans la famille chaude de la charte. */
    background: #f7efe6;
    border-top: 1px solid #e8dccc;
    border-bottom: 1px solid #e8dccc;
}

/* Le fond doit traverser toute la largeur, sinon il dessine une boîte au lieu
   d'une bande — et une boîte dans une boîte se voit. */
/* La bande pleine largeur suppose un conteneur centré : dans la colonne
   principale d'une page hub, décalée et large de 772 px sur 1440, le calcul
   déborde de quatre cents pixels et recouvre ce qui suit. Elle ne s'applique
   donc qu'aux blocs qui ne vivent pas dans une colonne. */
.fc-bloc--tableau-prix:not(.fc-colonnes *),
.fc-reassurance {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    width: 100vw;
    max-width: 100vw;
}

/* En colonnes, ces blocs contiennent déjà une carte avec son propre fond :
   leur en donner un second dessinait une boîte dans une boîte, deux beiges
   presque identiques séparés d'un liseré de vingt-quatre pixels. La carte
   suffit. */
.fc-colonnes .fc-bloc--tableau-prix {
    padding: 0;
    background: none;
    border: 0;
}

/* Le bloc de capture touchait le hero : zéro pixel entre les deux, son filet
   venant buter contre l'image. */
/* Le contenu ne colle pas au hero. Viser `.fc-hero + * > .fc-bloc` ne suffit
   pas : une page en colonnes intercale `.fc-colonnes` puis
   `.fc-colonnes__principal` avant le premier bloc, et l'écart tombait à zéro.
   On espace donc ce qui suit le hero, quel qu'il soit. */
.fc-hero + * {
    margin-top: var(--fc-space-10);
}

/* Sauf après un article : la règle ci-dessus écarte le bloc de capture d'une
   page hub, qui venait buter contre l'image. Un article n'a rien à écarter —
   l'en-tête pose déjà son propre retrait en bas, et les deux s'additionnaient
   en repoussant le texte d'autant. */
.fc-hero--article + .fc-article {
    margin-top: 0;
    padding-block-start: var(--fc-space-6);
}

@media (max-width: 859px) {
    /* Sur un portable le pli arrive vite : l'en-tête et le sommaire se
       suffisent, le retrait se réduit encore. */
    .fc-hero--article + .fc-article {
        padding-block-start: var(--fc-space-4);
    }
}

/* Un filet là où deux sections de même fond se suivent : sans lui, elles se
   fondent l'une dans l'autre. */
.fc-bloc + .fc-bloc:not([class*="--"]) {
    border-top: 1px solid var(--fc-border);
    padding-top: var(--fc-space-8);
}

/* --- Le tableau de prix --------------------------------------------------
   Huit lignes de chiffres sans relief se lisent comme un annuaire. Les lignes
   alternent, l'en-tête se détache, et chaque ligne respire. */
.fc-tableau {
    background: var(--fc-surface-0);
    border-radius: var(--fc-radius-lg);
    overflow: hidden;
    box-shadow: var(--fc-shadow-1);
}

.fc-tableau th,
.fc-tableau td {
    padding: var(--fc-space-4) var(--fc-space-3);
}

.fc-tableau thead th {
    border-bottom: 2px solid var(--fc-border);
    text-transform: uppercase;
    font-size: var(--fc-text-xs);
    letter-spacing: .04em;
    color: var(--fc-ink-500);
}

/* Une ligne sur deux : l'œil suit la ligne sans perdre la colonne. */
.fc-tableau tbody tr:nth-child(even) {
    background: var(--fc-surface-50);
}

/* La dernière ligne n'a pas de suivante à séparer. */
.fc-tableau tbody tr:last-child th,
.fc-tableau tbody tr:last-child td {
    border-bottom: 0;
}

/* Le logo personnalisé sort à sa taille brute — deux mille pixels de large
   pour le fichier fourni. On le contraint à la hauteur de l'en-tête, la
   largeur suivant le ratio. */
.custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.custom-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .custom-logo { height: 28px; max-width: 160px; }
}

/* =========================================================================
 * Hiérarchie typographique
 * ====================================================================== */

/* Les titres portaient la même encre que le texte : seule leur taille les
   distinguait, ce qui ne suffit pas à structurer une page longue. La terre
   cuite de la charte les détache sans crier. */
.fc-editorial h2,
.fc-bloc__titre,
.fc-cta__titre {
    color: var(--fc-brand-700);
    letter-spacing: -0.01em;
}

/* Un filet court sous le titre de section : il pose la limite que le fond seul
   ne marquait pas, et donne un point d'appui à l'œil qui balaye. */
.fc-editorial h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: var(--fc-space-3);
    border-radius: 2px;
    background: var(--fc-ocre);
}

.fc-editorial h3 {
    color: var(--fc-ink-900);
    font-weight: 650;
}

/* Le gras souligne un terme, il ne crie pas. */
.fc-editorial strong {
    color: var(--fc-brand-700);
    font-weight: 650;
}

/* Le premier paragraphe porte l'accroche : légèrement plus grand, il annonce
   la couleur avant que le lecteur ne s'engage. */
.fc-editorial > p:first-of-type {
    font-size: var(--fc-text-lg);
    color: var(--fc-ink-700);
}

/* Un lien dans le corps de texte doit se voir sans souligner toute la page. */
.fc-editorial a {
    color: var(--fc-brand-600);
    text-decoration-color: var(--fc-brand-100);
    text-underline-offset: 3px;
}

.fc-editorial a:hover,
.fc-editorial a:focus-visible {
    text-decoration-color: currentColor;
}

/* L'icône du bandeau de réassurance : elle rend l'argument identifiable d'un
   balayage, là où trois pavés de texte identiques se confondaient. */
.fc-reassurance__icone {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: var(--fc-space-3);
    opacity: .85;
}

/* L'illustration occupait sept cent soixante-dix pixels entre deux blocs de
   texte : elle coupait la lecture au lieu de l'aider. Une hauteur bornée suffit
   à poser une respiration, et le recadrage garde le sujet centré. */
.fc-illustration__image {
    max-height: 380px;
    object-fit: cover;
    object-position: center;
}

/* --- L'illustration de l'accueil, en vis-à-vis du texte ------------------
   Pleine largeur entre deux blocs de texte, elle coupait la lecture sans rien
   ajouter. À côté, elle accompagne. Les pages hub gardent la pleine largeur :
   elles ont déjà une colonne latérale, une troisième colonne serait illisible. */

/* =========================================================================
 * Alternance des sections
 * ====================================================================== */

/* Une section sur deux prend le fond chaud, et les blocs de conversion gardent
   le leur : sans cette alternance, huit sections blanches se suivaient sans
   qu'on sache où l'une finissait. */
/* L'aplat crème servait à détacher ces listes de pastilles du corps de la
   page. Passées en cartes, elles portent leur propre couleur : un fond sous
   des photos les empile sans rien séparer. Il ne reste que l'espacement. */
.fc-bloc--quartier,
.fc-bloc--operation {
    padding-block: var(--fc-space-10);
}

/* Le hero d'une page interne, quand la page porte une image. Le voile garde le
   titre lisible quelle que soit la photo — une façade claire ne doit pas
   effacer le texte. */
.fc-hero--image {
    position: relative;
    background-size: cover;
    background-position: center 40%;
    padding-block: var(--fc-space-12);
}

.fc-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(28, 25, 23, .55) 0%,
        rgba(28, 25, 23, .68) 60%,
        rgba(124, 45, 18, .72) 100%);
}

.fc-hero--image > * {
    position: relative;
}

.fc-hero--image .fc-hero__titre,
.fc-hero--image .fc-hero__intro,
.fc-hero--image .fc-hero__intro p {
    color: var(--fc-surface-0);
}

.fc-hero--image .fc-breadcrumb,
.fc-hero--image .fc-breadcrumb a {
    color: rgba(255, 255, 255, .82);
}

/* L'en-tête illustré d'un article. Ces trois règles répètent celles posées
   plus haut avec les styles d'article : `.fc-hero--image` est redéfini ici et
   reprendrait sinon la main, les deux sélecteurs ayant la même spécificité.
   À fusionner le jour où les deux blocs `.fc-hero--image` seront réunis. */
.fc-hero--article {
    min-height: 0;
    padding-block: var(--fc-space-12) var(--fc-space-10);
    background-position: center 42%;
}

/* Le dernier maillon du fil reprend le titre de la page, qui s'affiche juste
   en dessous : le même texte apparaissait deux fois de suite, en pâle puis en
   grand. On le retire de l'affichage partout où le fil précède un titre — il
   reste dans le DOM, où le balisage `BreadcrumbList` le lit, et où les
   lecteurs d'écran situent la page.

   Chaque maillon porte le séparateur qui le suit : masquer le dernier
   laisserait l'avant-dernier pointer vers rien. */
.fc-hero .fc-breadcrumb__item:last-child,
.fc-article__entete .fc-breadcrumb__item:last-child {
    display: none;
}

.fc-hero .fc-breadcrumb__item:nth-last-child(2) .fc-breadcrumb__sep,
.fc-article__entete .fc-breadcrumb__item:nth-last-child(2) .fc-breadcrumb__sep {
    display: none;
}

@media (max-width: 859px) {
    /* Sur un écran étroit, chaque pixel d'en-tête est pris au contenu. */
    .fc-hero--article {
        padding-block: var(--fc-space-8) var(--fc-space-6);
    }

    .fc-hero--article .fc-hero__titre {
        max-width: none;
    }
}

/* La réserve juridique reste lisible mais ne domine pas : c'est une précision
   de méthode, pas le message du pied de page. */
/* Une opacité de 0,72 descend sous le seuil de contraste AA : le copyright
   devenait illisible pour qui distingue mal les nuances. Une couleur explicite
   donne le même retrait en restant lisible. */
.fc-footer__copyright {
    display: block;
    margin-top: var(--fc-space-2);
    font-size: var(--fc-text-xs);
    color: var(--fc-ink-700);
}

/* Dans une colonne, `fc-cta` et le formulaire qu'elle contient portent chacun
   un fond : la carte beige et le formulaire blanc se superposent en laissant un
   liseré de vingt pixels, une boîte dans une boîte. Le formulaire suffit. */
.fc-colonnes__aside .fc-cta,
.fc-colonnes .fc-cta {
    padding: 0;
    background: none;
    border: 0;
}

/* Sous 420 px, le bouton garde son icône et perd son libellé : logo, appel à
   l'action et menu ne tiennent pas sur une ligne autrement, et l'en-tête
   doublait de hauteur. Le mot reste dans le flux pour les lecteurs d'écran. */
@media (max-width: 420px) {
    .fc-nav-toggle {
        font-size: 0;
        padding: var(--fc-space-2);
        gap: 0;
    }

    .fc-nav-toggle::before {
        margin: 0;
    }
}