/*
Theme Name: Filumena Carquefou
Description: Thème enfant Enfold pour Filumena — office immobilier à Carquefou.
Author: AE2 Agence
Version: 1.11.2
Template: enfold
Text Domain: filumena-child
*/

/* ==========================================================================
   Charte Filumena — habillage des éléments Avia.

   Note de spécificité : Enfold cible ses titres via `#top h1/h2/h3`. Toute
   surcharge doit donc porter au moins un `#top`, sinon elle perd — c'est ce
   qui rendait les titres des sections sombres illisibles.
   ========================================================================== */

:root {
  --fil-cream:      #f6f3ee;
  --fil-sand:       #efeae1;
  --fil-sand-line:  #e2dccf;
  --fil-teal:       #14697c;
  --fil-teal-dark:  #0f4f5e;
  --fil-teal-soft:  #5c8a92;
  --fil-teal-light: #7fc7d4;
  --fil-gold:       #c9a227;
  --fil-gold-light: #f6d97a;
  --fil-charcoal:   #262523;
  --fil-charcoal-2: #302f2c;
  --fil-charcoal-3: #1c1b19;
  --fil-ink:        #2a2a28;
  --fil-forest:     #26302f;
  --fil-body:       #4a4a46;
  --fil-muted:      #5a5a55;
  --fil-line:       #dfe6e4;
  --fil-line-warm:  #e7e1d6;
  --fil-on-dark:    #e4e0d8;
  --fil-on-dark-2:  #c4bfb5;
  --fil-on-dark-3:  #b8b3aa;

  --fil-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fil-sans:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------ typographie */

#top, #top body, .avia_textblock, #top .main_color .avia_textblock,
#top input, #top textarea, #top select, #top button {
  font-family: var(--fil-sans);
}
body { color: var(--fil-ink); background: var(--fil-cream); }

#top h1, #top h2, #top h3,
#top .av-special-heading .av-special-heading-tag {
  font-family: var(--fil-serif);
  font-weight: 600;
  color: var(--fil-forest);
  letter-spacing: -0.005em;
  text-transform: none;
}
#top .av-special-heading-h1 .av-special-heading-tag { font-size: 58px; line-height: 1.04; }
#top .av-special-heading-h2 .av-special-heading-tag { font-size: 42px; line-height: 1.08; }
#top .av-special-heading-h3 .av-special-heading-tag { font-size: 24px; line-height: 1.2; }
#top .av-special-heading { padding-bottom: 0; margin-bottom: 18px; }
#top .av-special-heading .special-heading-border { display: none; }

#top .avia_textblock p { font-size: 16.5px; line-height: 1.65; color: var(--fil-body); }
#top .avia_textblock.fil-lede p { font-size: 18px; }

/* Sur-titre */
#top .avia_textblock.fil-eyebrow p {
  font-family: var(--fil-sans);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fil-teal); font-weight: 600; margin: 0 0 14px;
}
#top .fil-dark .avia_textblock.fil-eyebrow p { color: var(--fil-gold); }

#top .avia_textblock.fil-note p { font-size: 12.5px; color: #8a8272; line-height: 1.55; }

/* ------------------------------------------------------------- sections */

#top .avia-section.main_color { background-color: var(--fil-cream); }
#top .avia-section.fil-sand,
#top .avia-section.fil-sand .container {
  background-color: var(--fil-sand);
  border-top: 1px solid var(--fil-sand-line);
  border-bottom: 1px solid var(--fil-sand-line);
}

#top .avia-section.fil-dark { background-color: var(--fil-charcoal); }
#top .avia-section.fil-dark h1,
#top .avia-section.fil-dark h2,
#top .avia-section.fil-dark h3,
#top .avia-section.fil-dark .av-special-heading .av-special-heading-tag { color: #fff; }
#top .avia-section.fil-dark .avia_textblock,
#top .avia-section.fil-dark .avia_textblock p { color: var(--fil-on-dark-2); }
#top .avia-section.fil-dark a:not(.avia-button) { color: var(--fil-teal-light); }

#top .flex_column.fil-centered { text-align: center; }
#top .flex_column.fil-centered .avia_textblock { max-width: 720px; margin: 0 auto; }

/* --------------------------------------------------------------- liens */

#top .main_color a { color: var(--fil-teal); }
#top .main_color a:hover { color: var(--fil-teal-dark); }
::selection { background: var(--fil-teal); color: #fff; }

/* -------------------------------------------------------------- boutons */

#top .avia-button {
  font-family: var(--fil-sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; border-width: 1.5px; border-style: solid;
  padding: 15px 28px; text-shadow: none;
}
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-highlight {
  background: var(--fil-teal); border-color: var(--fil-teal); color: #fff;
}
#top .avia-button.avia-color-theme-color:hover { background: var(--fil-teal-dark); border-color: var(--fil-teal-dark); }
#top .avia-button.avia-color-dark {
  background: transparent; border-color: var(--fil-forest); color: var(--fil-forest);
}
#top .avia-button.avia-color-dark:hover { background: var(--fil-forest); color: var(--fil-cream); }
#top .avia-button-wrap { margin-right: 12px; margin-top: 8px; }

/* --------------------------------------------------------- barre haute */

#top #header_meta {
  background-color: var(--fil-teal);
  border-bottom: none; color: var(--fil-cream);
}
#top #header_meta .phone-info { float: right; }
#top #header_meta, #top #header_meta a, #top #header_meta .phone-info span {
  color: var(--fil-cream); font-size: 13px; letter-spacing: .03em;
}
#top #header_meta a:hover { color: var(--fil-gold-light); }

/* --------------------------------------------------------------- header */

#top #header, #top #header_main, #top .av_header_transparency #header_main {
  background-color: var(--fil-charcoal);
}
#top #header_main { border-bottom: 1px solid rgba(20,105,124,.6); }
#top #header .av-main-nav > li > a {
  color: var(--fil-on-dark); font-family: var(--fil-sans);
  font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
#top #header .av-main-nav > li > a:hover,
#top #header .av-main-nav > li.current-menu-item > a { color: var(--fil-gold-light); }
#top #header .av-main-nav > li.av-menu-button-colored > a .avia-menu-text {
  background-color: var(--fil-teal); border-color: var(--fil-teal); color: #fff;
  border-radius: 2px; font-weight: 600;
}
#top #header .av-main-nav > li.av-menu-button-colored > a:hover .avia-menu-text {
  background-color: var(--fil-teal-dark); border-color: var(--fil-teal-dark);
}
#top .av-burger-menu-main .av-hamburger-inner,
#top .av-burger-menu-main .av-hamburger-inner::before,
#top .av-burger-menu-main .av-hamburger-inner::after { background-color: var(--fil-cream); }
/* Logo : Enfold étire le SVG sur toute la hauteur de la barre — et le script
   de l'en-tête collant (avia-snippet-sticky-header.js) écrit un
   `style="max-height:88px"` EN LIGNE sur le SVG et son lien, recalculé au
   scroll depuis la hauteur du header. Aucune règle de feuille de style ne peut
   gagner contre du style en ligne : c'est ce qui rendait l'ancienne règle
   `max-height: 44px` totalement inopérante (logo à 88px, collé en haut et en
   bas de la barre).
   D'où le `!important`, seul moyen de reprendre la main — et une valeur en
   POURCENTAGE plutôt qu'en pixels, pour que le logo garde le même air autour
   de lui quand l'en-tête rétrécit au scroll (88px → 44px). */
#top #header .logo a { display: flex; align-items: center; }
#top #header .logo img,
#top #header .logo svg { max-height: 55% !important; width: auto; }

/* Safari : le logo est un SVG inline SANS attributs width/height, dimensionne
   uniquement par un max-height en pourcentage, et place dans un conteneur
   flex. WebKit ne deduit pas la largeur depuis le viewBox dans cette
   configuration : il resout `width: auto` a 0 et le logo DISPARAIT, alors
   que Chrome et Firefox la deduisent. On donne donc explicitement le ratio
   du viewBox (2110.11 x 751.55) et on empeche la base flex de tomber a 0. */
#top #header .logo svg {
  aspect-ratio: 2110.11 / 751.55;
  flex: 0 0 auto;
}

/* Mobile : Enfold force `height: auto !important` sous 767px et la barre n'a
   plus de hauteur fixe — un pourcentage n'a donc aucune référence et serait
   ignoré en silence. On repasse en pixels, et l'air vient d'un padding sur le
   lien (la hauteur de la barre suit celle du logo sur mobile). */
@media only screen and (max-width: 767px) {
  #top #header .logo a { padding: 13px 0; box-sizing: border-box; }
  #top #header .logo img,
  #top #header .logo svg { max-height: 38px !important; }
  /* iOS : on fixe les DEUX dimensions du SVG, plus aucun calcul intrinseque
     n'est requis. Sous 767px Enfold impose `height: auto !important` : le SVG
     se retrouvait en largeur auto ET hauteur auto, cas que WebKit ne sait pas
     resoudre — d'ou le logo invisible sur iPhone. 107px = 38 x 2110/752. */
  #top #header .logo svg { width: 107px !important; height: 38px !important; }
}

/* Plage 990 → 1200px : le menu complet revient (le burger s'arrête à 989px)
   mais avec 5 entrées il ne restait que 2px entre le logo et la première.
   On resserre l'espacement des entrées le temps de cette plage — 13px de
   padding et 1,08px de tracking, c'est ce qui coûte le plus de largeur. */
@media only screen and (min-width: 990px) and (max-width: 1200px) {
  #top #header .av-main-nav > li > a { padding: 0 8px; letter-spacing: .05em; }
  #top #header .av-main-nav > li.av-menu-button-colored > a { padding: 0 6px; }
}

/* ------------------------------------------------------------------ hero */

#top .fil-hero .flex_column.fil-hero-media { position: relative; }
#top .fil-hero .avia-image-container.fil-hero-img .avia-image-container-inner {
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(38,37,35,.5);
}
#top .fil-hero .avia_textblock.fil-badge {
  position: absolute; left: -18px; bottom: -18px; z-index: 3; max-width: 250px;
  background: var(--fil-charcoal); border-radius: 3px; padding: 16px 22px;
}
#top .fil-hero .avia_textblock.fil-badge p {
  font-size: 13.5px; line-height: 1.45; color: #d9d5cd; margin: 0;
}
#top .fil-badge .fil-badge-label {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fil-gold); margin-bottom: 5px;
}

#top .avia_textblock.fil-pill {
  display: inline-block; background: #fff;
  border: 1px solid var(--fil-line); border-left: 3px solid var(--fil-teal);
  border-radius: 2px; padding: 16px 22px; margin-top: 30px;
}
#top .avia_textblock.fil-pill p { margin: 0; }
#top .fil-pill .fil-pill-title {
  display: block; font-family: var(--fil-serif); font-size: 20px;
  font-weight: 600; color: var(--fil-forest);
}
#top .fil-pill .fil-pill-meta {
  display: block; margin-top: 4px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fil-teal-soft);
}

/* ---------------------------------------------------- bandeau chiffré */

#top .fil-strip .flex_column.fil-strip-item { border-right: 1px solid rgba(255,255,255,.09); padding-right: 24px; }
#top .fil-strip .flex_column.fil-strip-item:last-child { border-right: none; }
#top .fil-strip .avia_textblock p { margin: 0; }
#top .fil-strip .fil-strip-num {
  display: block; font-family: var(--fil-serif); font-size: 15px;
  letter-spacing: .2em; color: var(--fil-gold); margin-bottom: 10px;
}
#top .fil-strip .fil-strip-title {
  display: block; font-family: var(--fil-sans); font-size: 17px;
  font-weight: 600; color: var(--fil-cream); margin-bottom: 6px;
}
#top .fil-strip .fil-strip-text {
  display: block; font-size: 14px; line-height: 1.5; color: var(--fil-on-dark-3);
}

/* --------------------------------------------------------------- étapes */

#top .fil-steps .avia_textblock.fil-step {
  background: #fff; border: 1px solid var(--fil-line); border-radius: 3px;
  padding: 20px 24px; margin-bottom: 14px;
}
#top .fil-steps .avia_textblock.fil-step p { margin: 0; display: flex; align-items: center; gap: 20px; }
#top .fil-steps .fil-step-num {
  font-family: var(--fil-serif); font-size: 34px; font-weight: 600;
  color: var(--fil-teal); line-height: 1; min-width: 34px; flex-shrink: 0;
}
#top .fil-steps .fil-step-label { font-size: 16.5px; font-weight: 500; color: var(--fil-forest); }

/* ------------------------------------------------- gestion locative ---
   Section « Gestion locative » — design Figma node 4020:2.

   Le design tombe pile sur les tokens du thème : #f6f3ee = --fil-cream,
   #14697c = --fil-teal, #26302f = --fil-forest, #4a4a46 = --fil-body,
   #dfe6e4 = --fil-line. Et la typo demandée par le design correspond déjà
   à l'existant :
     • sur-titre  12px / 2,64px de tracking / teal  = .fil-eyebrow
     • titre      42px / 45,36px / -0,21px          = h2 du thème
     • paragraphe 16,5px / 27,23px / --fil-body     = .avia_textblock p
   Rien à redéfinir pour ces trois éléments : ils réutilisent les styles
   existants. Le padding vertical de 70px du design correspond au réglage
   « large » de la Color Section — donc réglé dans le constructeur.

   Seule la carte numérotée est nouvelle. C'est une variante de .fil-steps :
   au lieu de 4 cartes blanches séparées, une seule carte avec des filets
   entre les lignes. La carte est portée par la COLONNE elle-même. */

#top .fil-gl-card {
  background: #fff;
  border: 1px solid var(--fil-line);
  border-radius: 3px;
  padding: 6px 26px;
}

#top .fil-gl-card .avia_textblock.fil-gl-row { margin: 0; }
#top .fil-gl-card .avia_textblock.fil-gl-row p {
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--fil-line);
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Pas de filet sous la dernière ligne. Le filet est porté par le <p> et non
   par le conteneur : chaque Text Block est enveloppé par Enfold dans un
   <section>, si bien qu'un :last-of-type sur .avia_textblock serait vrai
   pour toutes les lignes. */
#top .fil-gl-card > .av_textblock_section:last-child .fil-gl-row p { border-bottom: 0; }

#top .fil-gl-card .fil-gl-num {
  font-family: var(--fil-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--fil-teal);
  flex-shrink: 0;
  min-width: 16px;
}
#top .fil-gl-card .fil-gl-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fil-body);
}

/* Le design demande le titre en Cormorant Garamond Light (300), alors que
   tous les autres titres du site sont en 600. Le poids 300 a été ajouté au
   chargement des polices dans functions.php pour que ce soit fidèle. */
#top .fil-gl .fil-gl-title .av-special-heading-tag { font-weight: 300; }

@media only screen and (max-width: 767px) {
  #top .fil-gl-card { padding: 4px 18px; }
  #top .fil-gl-card .avia_textblock.fil-gl-row p { gap: 14px; padding: 13px 0; }
  #top .fil-gl-card .fil-gl-num { font-size: 24px; }
}

/* ------------------------------------------------------ chiffres Yann */

#top .avia_textblock.fil-facts p { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 0; }
#top .fil-facts .fil-fact {
  flex: 1 1 240px; background: #fff; border: 1px solid var(--fil-line);
  border-radius: 3px; padding: 18px 22px;
}
#top .fil-facts .fil-fact-num {
  display: block; font-family: var(--fil-serif); font-size: 34px;
  font-weight: 600; color: var(--fil-teal); line-height: 1;
}
#top .fil-facts .fil-fact-label { display: block; font-size: 13.5px; color: var(--fil-muted); margin-top: 6px; }

#top .flex_column.fil-portrait .avia-image-container-inner { border-radius: 4px; overflow: hidden; }

/* ------------------------------------------------- chiffres sur sombre */

#top .avia_textblock.fil-dstats p { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; }
#top .fil-dstats .fil-dstat {
  flex: 1 1 180px; background: var(--fil-charcoal-2);
  border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 26px 24px;
}
#top .fil-dstats .fil-dstat-num {
  display: block; font-family: var(--fil-serif); font-size: 46px;
  font-weight: 600; color: var(--fil-gold); line-height: 1;
}
#top .fil-dstats .fil-dstat-label { display: block; font-size: 13.5px; color: var(--fil-on-dark-3); margin-top: 8px; }

#top .avia_textblock.fil-tags {
  background: var(--fil-charcoal-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 24px;
}
#top .avia_textblock.fil-tags p { margin: 0; }
#top .fil-tags .fil-tags-title {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fil-gold); margin-bottom: 12px;
}
#top .fil-tags .fil-tag {
  display: inline-block; border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
  padding: 6px 15px; margin: 0 7px 7px 0; font-size: 13.5px; color: var(--fil-on-dark);
}

/* --------------------------------------------------------------- cartes */

#top .flex_column.fil-card {
  background: #fff; border: 1px solid var(--fil-line);
  border-radius: 4px; overflow: hidden; margin-top: 22px;
}
#top .flex_column.fil-card .avia-image-container { margin: 0; }
#top .flex_column.fil-card .avia-image-container-inner { border-radius: 0; }
#top .flex_column.fil-card .avia_textblock { padding: 20px 22px 22px; }
#top .flex_column.fil-card .avia_textblock p { margin: 0; }

#top .fil-bien .fil-bien-title { display: block; font-size: 16px; font-weight: 600; color: var(--fil-forest); }
#top .fil-bien .fil-bien-meta { display: block; font-size: 13px; color: #7c8a88; margin-top: 5px; }
#top .fil-bien .fil-bien-link { display: block; margin-top: 12px; font-size: 13px; color: var(--fil-teal); font-weight: 600; }

#top .flex_column.fil-person { border-color: var(--fil-line-warm); }
#top .fil-person .fil-person-name { display: block; font-family: var(--fil-serif); font-size: 24px; font-weight: 600; color: var(--fil-forest); }
#top .fil-person .fil-person-role {
  display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fil-teal); margin-top: 4px;
}
#top .fil-person .fil-person-text { display: block; font-size: 14px; line-height: 1.6; color: var(--fil-muted); margin-top: 12px; }

/* --------------------------------------------------------- repères */

#top .flex_column.fil-stat { text-align: center; }
#top .flex_column.fil-stat .avia_textblock { padding: 40px 26px; }
#top .fil-stat .fil-stat-num {
  display: block; font-family: var(--fil-serif); font-size: 56px;
  font-weight: 600; color: var(--fil-teal); line-height: 1;
}
#top .fil-stat .fil-stat-label {
  display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #7a7266; margin-top: 12px;
}

/* ------------------------------------------------------------ barème */

#top .flex_column.fil-fees .avia_textblock.fil-fees-body {
  background: var(--fil-charcoal-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 29px 32px 30px;
}
#top .fil-fees-body p { margin: 0; }
#top .fil-fees .fil-fees-title {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fil-gold); margin-bottom: 17px;
}

/* Une ligne du barème = 3 colonnes (design Figma 4014-543) : libellé souple,
   « minimum » sur 150px et taux sur 74px, tous deux alignés à droite.
   Le libellé absorbe l'espace libre : la ligne « Estimation / avis de valeur »,
   qui n'a pas de minimum, garde donc son taux sur le même bord droit. */
#top .fil-fees .fil-fee {
  display: flex; align-items: center; gap: 24px;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
#top .fil-fees .fil-fee-label {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; line-height: 1.65; color: var(--fil-on-dark);
}
#top .fil-fees .fil-fee-min {
  flex: 0 0 150px; text-align: right;
  font-size: 12.5px; line-height: 1.5; color: #9a958b;
}
#top .fil-fees .fil-fee-val {
  flex: 0 0 74px; text-align: right;
  font-family: var(--fil-serif); font-size: 24px; font-weight: 500; line-height: 1.1;
  color: #fff; white-space: nowrap;
}

/* Mentions sous le tableau. */
#top .fil-fees .fil-fees-legal {
  display: block; margin-top: 15px;
  font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--fil-on-dark);
}
#top .fil-fees .fil-fees-note {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #9a958b;
}

/* Entre ~990 et 1300px la carte se resserre : la colonne « minimum » figée
   à 150px force le libellé le plus long (« De 55 000 € à 150 000 € ») à
   passer sur deux lignes. On la laisse se rétracter à son contenu sur cette
   plage ; les trois mentions ayant la même longueur, elles restent alignées.
   Au-delà de 1300px, les 150px du design s'appliquent à nouveau. */
@media only screen and (min-width: 768px) and (max-width: 1300px) {
  #top .fil-fees .fil-fee-min { flex: 0 0 auto; white-space: nowrap; }
}

/* Sous 768px les 3 colonnes ne tiennent plus : le libellé passe seul sur la
   première ligne, puis « minimum » à gauche et le taux à droite en dessous.
   Le taux ne doit jamais se retrouver seul sur une ligne. */
@media only screen and (max-width: 767px) {
  #top .fil-fees .fil-fee { flex-wrap: wrap; gap: 2px 12px; }
  #top .fil-fees .fil-fee-label { flex: 1 1 100%; }
  #top .fil-fees .fil-fee-min { flex: 0 1 auto; text-align: left; }
  #top .fil-fees .fil-fee-val { flex: 0 0 auto; margin-left: auto; }
}

/* --------------------------------------------------------------- FAQ */

#top .fil-faq .togglecontainer { margin: 0; }
#top .fil-faq .single_toggle { margin-bottom: 12px; }
#top .fil-faq .toggler {
  font-family: var(--fil-sans); font-size: 17px; font-weight: 500;
  color: var(--fil-forest); background: #fff;
  border: 1px solid var(--fil-line-warm); border-radius: 3px;
  padding: 20px 26px; text-shadow: none;
}
#top .fil-faq .toggler:hover { color: var(--fil-teal); background: #fff; }
#top .fil-faq .toggler.activeTitle { border-radius: 3px 3px 0 0; border-bottom-color: transparent; }
#top .fil-faq .toggle_content {
  font-size: 15px; line-height: 1.65; color: var(--fil-muted);
  background: #fff; border: 1px solid var(--fil-line-warm); border-top: none;
  padding: 0 26px 22px; border-radius: 0 0 3px 3px; margin: 0;
}
#top .fil-faq .toggle_icon { border-color: var(--fil-teal); }
#top .fil-faq .toggle_icon .vert_icon, #top .fil-faq .toggle_icon .hor_icon { border-color: var(--fil-teal); }

/* ---------------------------------------------------------- formulaire */

#top .avia_ajax_form .form_element { padding-bottom: 14px; }
#top .avia_ajax_form input[type="text"],
#top .avia_ajax_form input[type="email"],
#top .avia_ajax_form input[type="tel"],
#top .avia_ajax_form select,
#top .avia_ajax_form textarea {
  font-family: var(--fil-sans); font-size: 15px;
  padding: 14px 16px; border: 1px solid #d0d9d7; border-radius: 2px;
  background: #fff; color: var(--fil-ink); box-shadow: none;
}
#top .avia_ajax_form input:focus, #top .avia_ajax_form textarea:focus,
#top .avia_ajax_form select:focus { border-color: var(--fil-teal); }
#top .avia_ajax_form .input_checkbox_label, #top .avia_ajax_form label { font-size: 13px; color: var(--fil-muted); }
#top .avia_ajax_form input[type="submit"] {
  background: var(--fil-teal); border: 1.5px solid var(--fil-teal); color: #fff;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 2px; padding: 16px 32px; font-size: 14px; text-shadow: none;
}
#top .avia_ajax_form input[type="submit"]:hover { background: var(--fil-teal-dark); border-color: var(--fil-teal-dark); }

/* ------------------------------------------------- formulaire CF7 ------
   Reprise à l'identique du formulaire Enfold `av_contact`, en Contact
   Form 7 (form ID 101, « Filumena — Contact »).

   Valeurs relevées sur le rendu Enfold AVANT bascule, à 1440px, pour que
   le remplacement soit invisible :
     largeur du formulaire  861px
     colonnes demi          426px chacune, gouttière 8px
     champ                  h48 · Work Sans 15px · padding 14/16
                            bordure 1px #d0d9d7 · rayon 2px · fond #fff
     label                  13px · --fil-muted · 8px au-dessus du champ
     inter-rangée           36px sous le champ
     textarea               186px
     bouton                 244×50 · teal · 14px · uppercase · tracking .05em
                            padding 16/32 · rayon 2px · 42px sous le textarea

   Markup généré par CF7 (wpautop ajoute un <p> par champ) :
     .fil-cf7 > .fil-cf7-row > .fil-cf7-half|full > p >
       label.fil-cf7-label + span.wpcf7-form-control-wrap > input */

#top .fil-cf7-row { display: flex; gap: 8px; }
#top .fil-cf7-half { flex: 1 1 0; min-width: 0; }
#top .fil-cf7-full { flex: 1 1 100%; min-width: 0; }

/* le <p> de wpautop porte l'espacement inter-rangée */
#top .fil-cf7-row p { margin: 0 0 36px; }

#top .fil-cf7 .fil-cf7-label {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fil-muted);
  margin: 0 0 8px;
}

#top .fil-cf7 .wpcf7-form-control-wrap { display: block; }

#top .fil-cf7 input[type="text"],
#top .fil-cf7 input[type="email"],
#top .fil-cf7 input[type="tel"],
#top .fil-cf7 select,
#top .fil-cf7 textarea {
  width: 100%;
  font-family: var(--fil-sans);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid #d0d9d7;
  border-radius: 2px;
  background: #fff;
  color: var(--fil-ink);
  box-shadow: none;
}
#top .fil-cf7 input:focus,
#top .fil-cf7 select:focus,
#top .fil-cf7 textarea:focus { border-color: var(--fil-teal); }

#top .fil-cf7 textarea { height: 186px; resize: vertical; display: block; }

/* Le select hérite d'un `appearance: none` : sans chevron, rien n'indique
   que c'est une liste déroulante (l'ancien formulaire Enfold en affichait
   un). Chevron redessiné en SVG inline, à la couleur --fil-muted (#5a5a55),
   avec de la place à droite pour ne pas chevaucher le texte. */
#top .fil-cf7 select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a5a55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Bouton — 42px sous le textarea, comme la référence Enfold.
   wpautop enveloppe aussi le [submit] dans un <p> : il faut annuler SES
   marges, sinon elles s'ajoutent aux 36px du <p> du textarea (on obtenait
   47px). 36 + 6 = 42. */
#top .fil-cf7-actions p { margin: 0; }
#top .fil-cf7-actions { margin-top: 6px; }
#top .fil-cf7-actions input[type="submit"] {
  background: var(--fil-teal);
  border: 1.5px solid var(--fil-teal);
  color: #fff;
  font-family: var(--fil-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 16px 32px;
  text-shadow: none;
  cursor: pointer;
  width: auto;
}
#top .fil-cf7-actions input[type="submit"]:hover {
  background: var(--fil-teal-dark);
  border-color: var(--fil-teal-dark);
}

/* Retours de CF7 : messages d'erreur et bandeau de réponse, habillés à la
   charte plutôt qu'avec les rouges par défaut du plugin. */
#top .fil-cf7 .wpcf7-not-valid-tip {
  font-size: 12.5px;
  color: #b3261e;
  margin-top: 6px;
}
#top .fil-cf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #b3261e; }
#top .wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-width: 1px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
}
#top .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--fil-teal);
  background: var(--fil-teal-pale, #eaf3f4);
  color: var(--fil-forest);
}
#top .wpcf7 form.invalid .wpcf7-response-output,
#top .wpcf7 form.unaccepted .wpcf7-response-output,
#top .wpcf7 form.failed .wpcf7-response-output { border-color: #b3261e; color: #b3261e; }

/* Sous 767px les deux colonnes s'empilent. */
@media only screen and (max-width: 767px) {
  #top .fil-cf7-row { flex-wrap: wrap; gap: 0; }
  #top .fil-cf7-half { flex: 1 1 100%; }
  #top .fil-cf7-row p { margin-bottom: 22px; }
}

/* ------------------------------------------------------- coordonnées */

#top .avia_textblock.fil-coord {
  background: var(--fil-charcoal); border-radius: 4px; padding: 32px 30px;
}
#top .avia_textblock.fil-coord p { margin: 0; color: var(--fil-on-dark); }
#top .fil-coord .fil-coord-title {
  display: block; font-family: var(--fil-serif); font-size: 30px; font-weight: 600; color: #fff;
}
#top .fil-coord .fil-coord-sub {
  display: block; font-size: 14px; color: var(--fil-on-dark-3); margin: 4px 0 20px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1);
}
#top .fil-coord .fil-coord-label {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fil-gold); margin-bottom: 5px;
}
#top .fil-coord .fil-coord-val { display: block; font-size: 15px; line-height: 1.5; color: var(--fil-on-dark); margin-bottom: 18px; }
#top .fil-coord .fil-coord-val a { color: var(--fil-cream); font-size: 18px; font-weight: 500; }
#top .fil-coord .fil-coord-val a:hover { color: var(--fil-gold-light); }
#top .fil-coord .fil-coord-flag {
  display: block; margin-top: 8px; background: rgba(20,105,124,.18);
  border: 1px solid rgba(20,105,124,.45); border-radius: 3px; padding: 15px 18px;
  font-size: 13px; line-height: 1.5; color: var(--fil-on-dark-2);
}
#top .fil-coord .fil-coord-flag-title {
  display: block; font-family: var(--fil-serif); font-size: 18px;
  font-weight: 600; color: var(--fil-teal-light); margin-bottom: 4px;
}
#top .fil-coord-col .avia-image-container.fil-coord-img { margin-top: 20px; }
#top .fil-coord-col .fil-coord-img .avia-image-container-inner { border-radius: 4px; overflow: hidden; }

/* fil-coord en tablette (768-989px) : la colonne tombe a 230px et l'e-mail,
   a 18px, mesure 200px pour 170px utiles — il debordait de 30px hors de la
   carte. On resserre le padding et on descend le seul e-mail a 16px (178px),
   ce qui le fait rentrer dans les 190px liberes. Le telephone, plus court,
   garde ses 18px. */
@media only screen and (min-width: 768px) and (max-width: 989px) {
  #top .avia_textblock.fil-coord { padding: 24px 20px; }
  #top .fil-coord .fil-coord-val a[href^="mailto:"] { font-size: 16px; }
}

/* ---------------------------------------------------------------- pied */

#top #footer { background-color: var(--fil-charcoal-3); color: var(--fil-on-dark-2); padding: 56px 0 30px; }
#top #footer .widget { margin: 0; padding: 0; }
#top #footer a { color: var(--fil-on-dark-2); }
#top #footer a:hover { color: var(--fil-cream); }
#top #footer ul { list-style: none; margin: 0; padding: 0; }
#top #footer li { margin-bottom: 9px; font-size: 14px; border: none; padding: 0; }

#top .fil-foot-name {
  display: block; font-family: var(--fil-serif); color: var(--fil-cream);
  font-size: 28px; font-weight: 600; letter-spacing: .2em;
}
#top .fil-foot-tag {
  display: block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: #7f7a70; margin-top: 4px;
}
#top .fil-foot-brand p { font-size: 14px; color: #9a958b; margin-top: 16px; line-height: 1.6; }
#top .fil-foot-title {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #7f7a70; margin-bottom: 14px;
}
#top #socket {
  background-color: var(--fil-charcoal-3); color: #7f7a70;
  border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px;
}
#top #socket .copyright { color: #7f7a70; }

/* ==========================================================================
   Corrections d'alignement et de finition (v1.2)
   ========================================================================== */

/* ---------------------------------------------- largeur du contenu -----
   Enfold pilote la largeur via l'option « Maximum Container Width », mais elle
   n'est compilée dans sa feuille dynamique qu'en enregistrant depuis l'admin.
   On la pose ici pour qu'elle s'applique quoi qu'il arrive. L'option est
   réglée sur la même valeur : une sauvegarde côté admin ne changera rien. */

.responsive #top .container { max-width: 1412px; }

/* Le hero et les bandeaux respirent un peu plus sur grand écran. */
@media only screen and (min-width: 1200px) {
  #top .avia-section .container { padding-left: 40px; padding-right: 40px; }
}

/* ------------------------------------------------------ boutons (v1.3) --
   Enfold supprime la bordure sur les boutons pleins et la conserve sur les
   boutons contour : 48 px contre 52 px. On impose le même modèle de boîte aux
   deux. Et on fixe explicitement la couleur du texte au survol, sinon Enfold
   applique la sienne — qui se confondait avec le fond. */

/* Enfold impose ces valeurs depuis buttons.min.css et sa feuille dynamique,
   avec une spécificité qu'on ne peut pas dépasser proprement : bordure 1 px
   sur le plein, 3 px sur le contour (d'où 49 px contre 52 px). Le `!important`
   est ici volontaire et circonscrit aux seuls boutons. */

#top .avia-button,
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-highlight,
#top .avia-button.avia-color-dark {
  box-sizing: border-box;
  padding: 15px 28px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  border-width: 1.5px !important; border-style: solid !important;
  text-shadow: none;
}

#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-highlight {
  background-color: var(--fil-teal) !important;
  border-color: var(--fil-teal) !important;
  color: #fff !important;
}
#top .avia-button.avia-color-theme-color:hover,
#top .avia-button.avia-color-theme-color:focus,
#top .avia-button.avia-color-theme-color-highlight:hover {
  background-color: var(--fil-teal-dark) !important;
  border-color: var(--fil-teal-dark) !important;
  color: #fff !important;
}

#top .avia-button.avia-color-dark {
  background-color: transparent !important;
  border-color: var(--fil-forest) !important;
  color: var(--fil-forest) !important;
}
#top .avia-button.avia-color-dark:hover,
#top .avia-button.avia-color-dark:focus {
  background-color: var(--fil-forest) !important;
  border-color: var(--fil-forest) !important;
  color: var(--fil-cream) !important;
}

/* Sur fond sombre, la règle de lien turquoise ne doit pas atteindre les boutons. */
#top .avia-section.fil-dark a.avia-button { color: #fff !important; }

/* Enfold peut glisser un calque de survol par-dessus le libellé. */
#top .avia-button .avia_button_background { display: none; }
#top .avia-button .avia_iconbox_title, #top .avia-button > span { position: relative; z-index: 2; }

/* --------------------------------------------------- loupe de recherche */

#top #menu-item-search,
#top .av-main-nav li.menu-item-search-dropdown,
#top .av-burger-menu-main + #menu-item-search { display: none !important; }

/* ------------------------------------------- colonnes de hauteur égale --
   Enfold empile les colonnes en `float:left` : leur hauteur suit leur contenu,
   d'où le décalage entre le texte du hero et son visuel, et entre les trois
   fiches équipe. On repasse ces rangées en flex pour qu'elles s'étirent. */

#top #agence .entry-content-wrapper,
#top #biens .entry-content-wrapper,
#top #equipe .entry-content-wrapper {
  display: flex; flex-wrap: wrap; align-items: stretch;
}
#top #biens .flex_column.av_one_full,
#top #equipe .flex_column.av_one_full {
  flex: 0 0 100%; width: 100%; margin-left: 0;
}

/* Le visuel du hero remplit la hauteur de la colonne de texte. */
#top .flex_column.fil-hero-media { display: flex; flex-direction: column; }
#top .fil-hero-media .avia-image-container { flex: 1 1 auto; display: flex; margin-bottom: 0; }
#top .fil-hero-media .avia-image-container .avia-image-container-inner { flex: 1 1 auto; display: flex; }
#top .fil-hero-media .avia-image-container .avia_image {
  width: 100%; height: 100%; object-fit: cover; min-height: 420px;
}

/* Portrait de Yann (#yann) : le visuel remplit la hauteur de la colonne texte.
   ------------------------------------------------------------------------
   La rangée est réglée sur « Equal Height Columns » dans le constructeur
   Enfold (colonne 1/3 → onglet Row Settings) : les deux colonnes ont donc
   déjà la même hauteur, en display:table-cell. La taille de l'image est
   réglée sur « large » (600×800) dans le constructeur, sinon l'agrandissement
   partirait du fichier 225×300.

   Deux pièges rencontrés, d'où la forme de ce bloc :

   1. Dans une cellule de tableau, la hauteur n'est pas une valeur « définie » :
      un `height: 100%` sur un descendant retombe silencieusement sur `auto`.
      L'image gardait son ratio 3/4 et le résultat ressemblait à un succès par
      pure coïncidence de mesures. D'où le positionnement absolu dans la
      cellule, qui remplit la boîte sans dépendre d'un pourcentage.

   2. Plus l'écran est étroit, plus la colonne 1/3 est fine et plus le texte
      s'allonge : à 1024px la colonne mesurait 237×748, soit un ratio de 0,32.
      L'image devenait un liseré vertical. D'où le plancher `aspect-ratio`
      ci-dessous : l'image remplit la hauteur disponible, mais s'arrête avant
      de devenir une bande. Au-delà de ~1280px le plafond n'est jamais
      atteint et l'image remplit exactement la colonne. */
#top .flex_column.fil-portrait {
  position: relative;
  min-height: 380px;    /* filet de sécurité si la colonne texte devient courte */
}
#top .fil-portrait .avia-image-container {
  position: absolute;
  inset: 0;
  margin: 0;
}
#top .fil-portrait .avia-image-container .avia-image-container-inner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.9;   /* plancher de ratio : pas plus étroit que ~1:1.9 */
  max-height: 100%;        /* … mais jamais plus haut que la colonne */
}
#top .fil-portrait .avia-image-container .avia-image-overlay-wrap {
  display: block;
  height: 100%;
}
#top .fil-portrait .avia-image-container .avia_image {
  width: 100%; height: 100%;
  object-fit: cover;            /* recadre au lieu de déformer */
  object-position: center top;  /* portrait : on ne coupe pas le visage */
}

/* La colonne est réglée sur « Fullwidth Break Point → tablettes » dans le
   constructeur : Enfold empile les colonnes dès 989px (et non 767px). Cette
   media query DOIT suivre ce réglage — sinon, entre 768 et 989px, l'image
   resterait en position absolue et se superposerait au texte.
   Colonnes empilées = plus de hauteur à égaliser : l'image reprend son ratio
   3/4 d'origine, pleine largeur au-dessus du texte. */
@media only screen and (max-width: 989px) {
  #top .flex_column.fil-portrait { position: static; min-height: 0; }
  #top .fil-portrait .avia-image-container { position: static; inset: auto; }
  #top .fil-portrait .avia-image-container .avia-image-container-inner {
    aspect-ratio: 3 / 4;
    max-height: none;
  }
  #top .fil-portrait .avia-image-container .avia-image-overlay-wrap { height: 100%; }
}

/* Fiches équipe et biens : le texte pousse, la carte suit. */
#top .flex_column.fil-card { display: flex; flex-direction: column; }
#top .flex_column.fil-card .avia-image-container { flex: 0 0 auto; margin-bottom: 0; }
#top .flex_column.fil-card .avia_textblock { flex: 1 1 auto; }

/* --------------------------------------------------- FAQ : le « + » ----
   Enfold dessine son icône avec deux bordures ; la maquette utilise un vrai
   caractère qui pivote en croix à l'ouverture. */

#top .fil-faq .toggler .toggle_icon { display: none; }
#top .fil-faq .toggler {
  position: relative; padding: 22px 58px 22px 26px; line-height: 1.4;
}
#top .fil-faq .toggler::after {
  content: '+';
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  font-family: var(--fil-sans); font-size: 24px; font-weight: 300;
  color: var(--fil-teal); line-height: 1;
  transition: transform .22s ease;
}
#top .fil-faq .toggler.activeTitle::after { transform: translateY(-50%) rotate(45deg); }
#top .fil-faq .toggle_content { padding: 0 26px 24px; }

/* ------------------------------------------- interlignes des titres ----
   Les intitulés en <span> héritaient du 1.65 des paragraphes : trop aéré
   pour du Cormorant, et le pied de page était au contraire trop serré. */

#top .fil-person-name      { line-height: 1.2; }
#top .fil-coord-title      { line-height: 1.2; }
#top .fil-coord-flag-title { line-height: 1.3; }
#top .fil-pill-title       { line-height: 1.25; }
#top .fil-foot-name        { line-height: 1.2; }
#top .fil-fee-val          { line-height: 1.2; }
#top .fil-strip-title      { line-height: 1.3; }
#top .fil-bien-title       { line-height: 1.3; }

/* ------------------------------------------------- menu mobile ---------
   Sans habillage, Enfold laissait les liens en bleu navigateur sur un fond
   transparent. */

#top .av-burger-overlay-bg,
#top .av-burger-overlay-scroll { background-color: var(--fil-charcoal); opacity: 1; }
#top #av-burger-menu-ul { padding-top: 12px; }
#top #av-burger-menu-ul li { border: none; }
#top #av-burger-menu-ul li > a {
  color: var(--fil-on-dark);
  font-family: var(--fil-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 40px; border-bottom: 1px solid rgba(255,255,255,.07);
}
#top #av-burger-menu-ul li > a:hover,
#top #av-burger-menu-ul li.current-menu-item > a { color: var(--fil-gold-light); background: transparent; }
#top #av-burger-menu-ul li.av-menu-button-colored > a {
  margin: 18px 40px; padding: 15px 22px; border-bottom: none; border-radius: 2px;
  background: var(--fil-teal); color: #fff; text-align: center; font-weight: 600;
}
#top #av-burger-menu-ul li.av-menu-button-colored > a:hover { background: var(--fil-teal-dark); color: #fff; }
/* Bouton CTA du panneau burger — correctif du 2026-09-09.
   Enfold peint le fond du bouton sur `.avia-menu-text`, qui est un <span>
   INLINE portant du padding vertical. Dès que le libellé passe sur deux
   lignes (le cas à 375px), ce fond se dessine UNE FOIS PAR LIGNE : on voyait
   deux rectangles dorés décalés chevauchant le bouton. Le fond doit être
   porté par le <a>, qui est un bloc.

   Sur la spécificité : les règles d'Enfold en jeu sont
     .html_av-overlay-side #top #wrap_all .av-burger-overlay li a   (2 id, 3 cl.)
     #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text
   toutes deux plus spécifiques que le `#top #av-burger-menu-ul …` du thème
   enfant — c'est pourquoi le padding restait à 50px et l'alignement à gauche.
   D'où les sélecteurs à trois id ci-dessous, qui gagnent sans `!important`. */

#top #wrap_all #av-burger-menu-ul li.av-menu-button-colored > a .avia-menu-text {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

.html_av-overlay-side #top #wrap_all #av-burger-menu-ul li.av-menu-button-colored > a {
  margin: 22px 24px;
  padding: 16px 18px;
  text-align: center;
  border-radius: 2px;
  background: var(--fil-teal);
  color: #fff;
  font-weight: 600;
}
.html_av-overlay-side #top #wrap_all #av-burger-menu-ul li.av-menu-button-colored > a:hover {
  background: var(--fil-teal-dark);
  color: #fff;
}

#top .av-burger-overlay-scroll .av-burger-overlay-inner { background: transparent; }
#top .av-hamburger-inner, #top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: var(--fil-cream) !important;
}

/* ----------------------------------------- en-tête collant en mobile ---
   Enfold rend l'en-tête collant uniquement au-dessus de la largeur du menu
   mobile. Deux règles le repassent en `position: relative` :
     .responsive #top #wrap_all #header                     (≤ 767px)
     .responsive.html_mobile_menu_tablet #top #wrap_all #header  (768–989px)
   La seconde est apparue en basculant le burger sur « tablettes » (§14.1).

   `position: sticky` serait plus élégant (pas de compensation à prévoir),
   mais c'est impossible ici : `#wrap_all` porte `overflow: hidden`, ce qui en
   fait un conteneur de défilement — l'en-tête ne collerait jamais.
   Donc `position: fixed`, et on rend au flux la hauteur perdue via un
   padding sur `#main`.

   Les hauteurs sont épinglées par Enfold, donc stables :
     ≤ 767px    barre 82px (`.responsive #top .logo { height:80px !important }`)
                + barre haute 30px = 112px
     768–989px  122px AU REPOS (barre 90px + barre haute 30px + filets).
                Sur cette plage l'en-tête RÉTRÉCIT au scroll : le script
                d'Enfold écrit une hauteur en ligne sur
                `#header_main .container` (90px au repos → 45px une fois
                défilé, facteur `data-av_shrink_factor=50`). Le padding doit
                valoir la hauteur AU REPOS, sinon le haut de page est masqué ;
                l'espace excédentaire une fois défilé est en milieu de page,
                donc invisible. Sous 767px il n'y a pas de rétrécissement
                (`isMobile` coupe cette branche du script), la hauteur est
                stable.
   Pour les revérifier : mesurer `#header` avec l'inspecteur aux deux largeurs.

   Le `!important` sur le padding est obligatoire : Enfold écrit
     .responsive #top #main { padding-top: 0 !important }            (≤ 767px)
     .responsive.html_mobile_menu_tablet.html_header_top #top #main  (768–989px)
   Sans lui, même un style en ligne ne passe pas. */

@media only screen and (max-width: 989px) {
  .responsive.html_header_sticky #top #wrap_all #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_header_sticky #top #wrap_all #main { padding-top: 122px !important; }
}

@media only screen and (max-width: 767px) {
  .responsive.html_header_sticky #top #wrap_all #main { padding-top: 112px !important; }
}

/* ------------------------------------------------------------ responsive */

@media only screen and (max-width: 989px) {
  #top .av-special-heading-h1 .av-special-heading-tag { font-size: 44px; }
  #top .fil-strip .flex_column.fil-strip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); padding-bottom: 24px; }
  #top .fil-hero .avia_textblock.fil-badge { position: static; max-width: none; margin-top: 16px; }
}

@media only screen and (max-width: 767px) {
  #top .av-special-heading-h1 .av-special-heading-tag { font-size: 36px; }
  #top .av-special-heading-h2 .av-special-heading-tag { font-size: 30px; }
  #top .avia-button { display: block; width: 100%; text-align: center; margin-right: 0; }
  #top .fil-steps .avia_textblock.fil-step p { gap: 14px; }
  #top .fil-facts .fil-fact, #top .fil-dstats .fil-dstat { flex-basis: 100%; }
  #top .flex_column.fil-card { margin-top: 16px; }
  #top .avia_textblock.fil-coord { padding: 26px 22px; }
}


.grecaptcha-badge {
display:none !important;
}
/* ------------------------------------------------------------------
   Biens a vendre — cartes annonces reelles (v1.11.0, 2026-09-22)
   ------------------------------------------------------------------ */

/* Les photos viennent du portail filumena.fr et n'ont pas toutes le meme
   rapport (1200x900 et 1200x866) : on impose un cadrage uniforme, sinon la
   grille est dentelee. */
#top .flex_column.fil-bien .avia-image-container img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Le corps de carte devient une colonne flex : le bouton se cale en bas,
   quelle que soit la longueur du titre. */
/* Enfold emboite le bloc de texte : .av_textblock_section (le vrai enfant flex
   de la colonne) > .avia_textblock > p. Il faut que la chaine entiere grandisse,
   sinon le bouton d'une carte au titre court ne descend pas jusqu'en bas. */
#top .flex_column.fil-bien .av_textblock_section { flex: 1 1 auto; display: flex; flex-direction: column; }
#top .flex_column.fil-bien .avia_textblock { flex: 1 1 auto; display: flex; flex-direction: column; }
#top .flex_column.fil-bien .avia_textblock > p {
  display: flex; flex-direction: column; flex: 1 1 auto; margin: 0;
}

#top .fil-bien .fil-bien-price {
  display: block;
  margin: 10px 0 18px;
  font-family: var(--fil-serif);
  font-size: 24px; font-weight: 500; line-height: 1.1;
  color: var(--fil-forest);
}

/* Le lien devient un vrai bouton. Contour plutot que aplat : sept boutons
   pleins concurrenceraient le CTA principal de la page. */
#top .fil-bien .fil-bien-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 20px;
  border: 1px solid var(--fil-teal);
  border-radius: 2px;
  background: transparent;
  color: var(--fil-teal);
  font-family: var(--fil-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
#top .fil-bien .fil-bien-link:hover,
#top .fil-bien .fil-bien-link:focus {
  background: var(--fil-teal);
  color: #fff;
}

#top .avia_textblock.fil-biens-legal { padding-top: 26px; }
#top .fil-biens-legal p {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--fil-muted);
}

/* Tablette (768-989px) : Enfold garde ses av_one_third sur trois colonnes, ce
   qui donne des cartes de 192px — trop etroit pour photo + titre + prix +
   bouton. On repasse a deux colonnes : 47% + 6% de gouttiere + 47%.
   ATTENTION : le selecteur 4n+3 vise les cartes qui ouvrent une rangee. Enfold
   intercale un div vide entre chaque colonne, d'ou le pas de 4 ; les cartes
   occupent les positions 3, 5, 7, 9, 11, 13, 15. Si l'on ajoute ou retire une
   carte, il faut reverifier ce selecteur. */
@media only screen and (min-width: 768px) and (max-width: 989px) {
  #top #biens .flex_column.fil-bien { width: 47%; margin-left: 6%; }
  #top #biens .flex_column.fil-bien:nth-child(4n+3) { margin-left: 0; }
}