/* ==========================================================================
   L'Agence des Voiles — feuille de style
   Jetons releves sur la piste A validee dans Claude Design. Aucune couleur ni
   graisse n'est inventee ici : ce fichier rend la piste A responsive et
   l'etend aux gabarits que la maquette ne couvrait pas.
   ========================================================================== */

:root {
  --marine:     #0B2A4A;   /* bandeaux, pied de page, voiles photo, titres */
  --orange:     #FF6300;   /* appels a l'action, uniquement */
  --brume:      #EEF3F8;   /* bandes de section alternees */
  --trait:      #E7EDF3;   /* filets */
  --bord:       #C9D6E2;   /* filets sur fond brume */
  --ardoise:    #8095A8;   /* surtitres, mentions */
  --encre:      #42586D;   /* texte courant */
  --inactif:    #D3DEE8;   /* puces de carrousel */
  --blanc:      #fff;

  /* Une seule police sur tout le site : Crimson Text (demande de Nicolas du
     11/10/2026). Les deux variables restent, pour revenir a deux familles
     sans toucher aux regles. */
  --serif:  'Crimson Text', Georgia, 'Times New Roman', serif;
  --sans:   'Crimson Text', Georgia, 'Times New Roman', serif;

  --gouttiere: 150px;      /* la piste A cale le contenu a 150px du bord */
  /* Le site occupe toute la largeur de l'ecran (fonds, bandeaux, pied) ; le
     contenu reste dans une colonne de 1140 px, soit la piste A a 1440. En dessous
     de 1440, la marge vaut la gouttiere, comme avant. */
  --contenu: 1140px;
  --marge: max(var(--gouttiere), calc((100% - var(--contenu)) / 2));
  --large: 1440px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--marine);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Le passage au clavier doit rester visible sur fond marine. */
.marine :focus-visible, footer :focus-visible { outline-color: var(--blanc); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: pretty; }
/* Titres plus gras (demande de Nicolas, 27/09/2026). Crimson Text a un vrai
   semi-gras : plus besoin du contour qui epaississait Instrument Serif.
   !important parce que les regles de taille posent « font: 400 … » et que des
   titres portent leur police en style en ligne. */
h1, h2, h3, .titre-section, .carte-bien__titre, .carte-commune__nom, .membre__nom, .note-google__valeur {
  font-weight: 600 !important;
}
p { margin: 0; }

/* --- Trame ---------------------------------------------------------------- */

.page { margin: 0; }
.bande { padding-left: var(--marge); padding-right: var(--marge); }
.brume { background: var(--brume); }

/* --- Elements de vocabulaire de la piste A -------------------------------- */

.surtitre {
  font: 600 11px/1 var(--sans);
  letter-spacing: .42em;
  color: var(--ardoise);
  text-transform: uppercase;
}
.surtitre--clair { color: rgba(255,255,255,.92); }

.titre-section { font: 400 38px/1.1 var(--serif); }
.chapeau { font: 400 16px/1.7 var(--sans); color: var(--encre); }

.cta {
  background: var(--orange);
  color: var(--blanc);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  font: 700 14px/1 var(--sans);
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}
.cta:hover { background: #E45800; color: var(--blanc); }

.cta--sobre { background: var(--marine); }
.cta--sobre:hover { background: #143A61; }

/* Le filet orange vertical qui ponctue la piste A sous la banniere. */
.filet-orange { display: flex; justify-content: center; }
.filet-orange span { width: 3px; height: 56px; background: var(--orange); }

/* --- Bandeau haut et navigation ------------------------------------------- */

.bandeau {
  background: var(--marine); color: var(--blanc);
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--marge);
  font: 400 12px/1 var(--sans); letter-spacing: .06em;
}
.bandeau__tel {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 17px/1 var(--sans); letter-spacing: .04em; color: var(--blanc);
}
.bandeau__tel svg { color: var(--orange); flex: none; }

.entete {
  /* Menu collant : il reste en haut au defilement ; site.js le compacte des que
     le bandeau bleu (et son telephone) sort de l'ecran. */
  position: sticky; top: 0; z-index: 40;
  transition: padding .2s ease, box-shadow .2s ease;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--marge);
  border-bottom: 1px solid var(--trait);
  background: var(--blanc);
  /* (plus de position: relative ici : elle annulait le sticky ci-dessus ; le
     sticky sert aussi de repere au panneau du menu mobile) */
}
.entete--compacte { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 8px 26px rgba(11,42,74,.12); border-bottom-color: transparent; }
.entete--compacte .marque__nom { font-size: 21px; }
.marque__nom { transition: font-size .2s ease; }
/* Telephone du menu : visible seulement quand le menu est compacte. */
.entete__tel { display: none; align-items: center; gap: 8px; margin-left: 30px; font: 700 14px/1 var(--sans); color: var(--orange); white-space: nowrap; }
.entete--compacte .entete__tel { display: inline-flex; }
.entete .nav { order: 2; margin-left: auto; }
.entete .entete__tel { order: 3; }
.entete .nav-bouton { order: 4; }
html { scroll-padding-top: 90px; }

.marque { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.marque__nom { font: 400 24px/1 var(--serif); letter-spacing: .02em; }
/* L espacement des lettres suit aussi la derniere : on le rend a droite pour centrer a l oeil. */
.marque__lieu { font: 600 8px/1 var(--sans); letter-spacing: .34em; margin-right: -.34em; color: var(--ardoise); }

/* Menu agrandi le 12/10/2026 (demande de Nicolas) : 12 -> 14 px. */
.nav { display: flex; align-items: center; gap: 28px; font: 600 14px/1 var(--sans); letter-spacing: .08em; }
.nav a[aria-current="page"] { color: var(--orange); }

/* --- Sous-menu « Nos villes » --------------------------------------------- */
.nav__groupe { position: relative; display: flex; align-items: center; gap: 6px; }
.nav__deplier { border: 0; background: none; padding: 6px 2px; color: inherit; cursor: pointer; display: flex; }
.nav__deplier svg { transition: transform .2s; }
.sous-menu {
  position: absolute; left: -22px; z-index: 50; margin: 0; padding: 10px 0; list-style: none;
  min-width: 230px; background: var(--blanc); border-top: 2px solid var(--orange);
  box-shadow: 0 18px 44px rgba(11,42,74,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
/* La liste part du bas de l'en-tete : l'ecart depend de la hauteur de l'en-tete
   (normal ou compacte), mesure au navigateur. Un pont invisible couvre cet ecart
   pour que le pointeur ne perde pas le menu en descendant. */
.sous-menu { top: calc(100% + 27px); }
.entete--compacte .sous-menu { top: calc(100% + 18px); }
.nav__groupe::after { content: ""; position: absolute; left: -22px; right: -22px; top: 100%; height: 30px; }
.nav__groupe:hover .sous-menu, .nav__groupe:focus-within .sous-menu, .nav__groupe--ouvert .sous-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav__groupe:hover .nav__deplier svg, .nav__groupe--ouvert .nav__deplier svg { transform: rotate(180deg); }
.sous-menu a { display: block; padding: 10px 22px; font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--marine); white-space: nowrap; }
.sous-menu a:hover, .sous-menu a:focus-visible { background: var(--brume); color: var(--orange); }
.sous-menu__tout { border-top: 1px solid var(--trait); margin-top: 6px; padding-top: 6px; }
.sous-menu__tout a { font-weight: 700; }

.nav-bouton {
  display: none; background: none; border: 0; padding: 8px;
  color: var(--marine); cursor: pointer;
}
.nav-bouton svg { display: block; }

/* --- Menu burger sur ordinateur (en plus du menu principal, 12/10/2026) ----
   Il ouvre un panneau lateral avec tout le site, y compris les pages qui
   n'etaient qu'en pied de page. En petite largeur, le burger existant (.nav-bouton)
   garde son role : celui-ci est masque. */
.tiroir-bouton {
  order: 5; margin-left: 26px; background: none; border: 0; padding: 8px;
  color: var(--marine); cursor: pointer; display: flex;
}
.tiroir-bouton svg { display: block; }
.tiroir-bouton:hover { color: var(--orange); }
.tiroir { position: fixed; inset: 0; z-index: 60; }
.tiroir[hidden] { display: none; }
.tiroir__fond { position: absolute; inset: 0; background: rgba(11,42,74,.45); border: 0; padding: 0; cursor: pointer; width: 100%; }
.tiroir__panneau {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--blanc); overflow-y: auto; padding: 26px 40px 40px;
  box-shadow: -18px 0 44px rgba(11,42,74,.18);
  animation: tiroir-entree .22s ease-out;
}
@keyframes tiroir-entree { from { transform: translateX(40px); opacity: 0; } }
.tiroir__fermer { position: absolute; top: 18px; right: 22px; background: none; border: 0; padding: 8px; color: var(--marine); cursor: pointer; }
.tiroir__fermer:hover { color: var(--orange); }
.tiroir__rubrique { padding: 22px 0 6px; border-bottom: 1px solid var(--trait); }
.tiroir__rubrique:last-of-type { border-bottom: 0; }
.tiroir__titre { display: block; font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--ardoise); text-transform: uppercase; margin-bottom: 10px; }
.tiroir__rubrique a { display: block; padding: 8px 0; font: 500 17px/1.3 var(--sans); color: var(--marine); }
.tiroir__rubrique a:hover, .tiroir__rubrique a:focus-visible, .tiroir__rubrique a[aria-current="page"] { color: var(--orange); }
.tiroir__villes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.tiroir__villes a { font-size: 15px; padding: 6px 0; }
.tiroir__tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: 700 18px/1 var(--sans); color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .tiroir__panneau { animation: none; } }

/* --- Banniere photo ------------------------------------------------------- */

.banniere { position: relative; }
.banniere > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banniere__voile { position: absolute; inset: 0; background: rgba(11,42,74,.42); }
.banniere__contenu {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; color: var(--blanc); text-align: center;
  padding: 0 var(--marge);
  min-height: inherit;
}
.banniere--accueil { min-height: 620px; }
.banniere--accueil h1 {
  /* Une ombre douce detache le titre de la photo. */
  text-shadow: 0 2px 22px rgba(11,42,74,.55), 0 1px 3px rgba(11,42,74,.35);
}
.banniere__marque {
  /* Un aplat marine sous la marque ; texte blanc (demande de Nicolas du 11/10/2026). */
  /* Au-dessus de la ligne « Agence immobiliere a Sanary » depuis le 12/10/2026. */
  display: inline-block; margin-bottom: 14px; padding: .06em .38em .16em;
  color: var(--blanc); background: rgba(11,42,74,.88);
  text-shadow: none;
}
.banniere--page    { min-height: 340px; }
/* /vente/ : le moteur de recherche de l'accueil sous le titre. */
.banniere--recherche { min-height: 440px; }
.banniere--recherche .banniere__contenu { padding-top: 40px; padding-bottom: 40px; }
.banniere--page .banniere__voile { background: rgba(11,42,74,.55); }
/* Facade de l'agence (page contact) : l'enseigne reste lisible en haut, le titre
   descend sur la vitrine, assombrie par un degrade plutot qu'un voile uniforme. */
.banniere--facade .banniere__voile { background: linear-gradient(180deg, rgba(11,42,74,.05) 0%, rgba(11,42,74,.25) 45%, rgba(11,42,74,.78) 100%); }
.banniere--facade .banniere__contenu { justify-content: flex-end; padding-bottom: 34px; }
.banniere--facade h1, .banniere--facade h2 { text-shadow: 0 2px 16px rgba(11,42,74,.6); }
.banniere--facade img { object-position: 50% 42%; }
/* Hero de la page contact : plus haut que les autres pages, pour la facade. */
.banniere--grande, .banniere--grande .banniere__contenu { min-height: 480px; }
@media (max-width: 760px) { .banniere--grande, .banniere--grande .banniere__contenu { min-height: 380px; } }

/* Parallaxe : la photo est dans son propre cadre (.banniere__fond), qui la
   rogne ; le bandeau, lui, ne rogne rien, sinon les menus deroulants de la
   recherche du hero seraient coupes. La photo deborde de --amp en haut et en
   bas, et site.js la fait glisser d'autant. Sans JavaScript, ou si le visiteur
   demande moins d'animations, elle reste fixe. */
.banniere__fond { position: absolute; inset: 0; overflow: hidden; }
.banniere__fond > img {
  position: absolute; left: 0; width: 100%; object-fit: cover; will-change: transform;
  top: calc(var(--amp, .25) * -100%); height: calc(100% + var(--amp, .25) * 200%);
}
.banniere--parallaxe { --amp: .4; }  /* +-40 % de la hauteur du bandeau */
@media (prefers-reduced-motion: reduce) {
  .banniere__fond > img { top: 0; height: 100%; transform: none !important; }
}
.banniere h1 { font: 400 58px/1.12 var(--serif); max-width: 820px; }
.banniere--page h1 { font-size: 44px; }

/* --- Barre de recherche --------------------------------------------------- */

.recherche {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: rgba(11,42,74,.82); margin-top: 26px;
}
.recherche select {
  appearance: none;
  background: transparent; border: 0;
  border-right: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font: 500 14px/1 var(--sans);
  padding: 0 40px 0 26px; height: 56px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff' opacity='.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 9px;
}
.recherche select option { color: var(--marine); background: var(--blanc); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Champ Localisation (remplace le select quand JavaScript tourne) ------ */

.lieu { position: relative; display: flex; border-right: 1px solid rgba(255,255,255,.2); }
.lieu select { border-right: 0; }
.lieu__champ {
  width: 230px; height: 56px; padding: 0 38px 0 50px;
  background: transparent; border: 0; color: var(--blanc);
  font: 500 14px/1 var(--sans);
  /* Epingle de lieu, meme blanc attenue que les fleches des autres menus. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='%23FF6300'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 22px center; background-size: 17px;
}
.lieu__champ::placeholder { color: rgba(255,255,255,.9); opacity: 1; }
.lieu__champ:focus { outline: none; background-color: rgba(255,255,255,.08); }
.lieu__champ:focus-visible { box-shadow: inset 0 -2px 0 var(--orange); }
.recherche .lieu__effacer {  /* plus precis que .recherche button, qui l etirerait */
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--blanc); font: 400 17px/1 var(--sans);
}
.recherche .lieu__effacer:hover { background: rgba(255,255,255,.28); }

.panneau {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: max(100%, 330px); max-height: 344px; overflow-y: auto;
  margin: 0; padding: 8px 0; list-style: none; text-align: left;
  background: var(--blanc); color: var(--marine);
  box-shadow: 0 18px 44px rgba(11,42,74,.28), 0 2px 6px rgba(11,42,74,.12);
  animation: panneau-ouvrir .14s ease-out;
}
@keyframes panneau-ouvrir { from { opacity: 0; transform: translateY(-4px); } }
.panneau__option {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px 12px 17px; border-left: 3px solid transparent; cursor: pointer;
}
.panneau__option[aria-selected="true"], .panneau__option:hover { background: var(--brume); border-left-color: var(--orange); }
.lieu__nom { display: flex; flex-direction: column; gap: 4px; font: 500 15px/1.2 var(--sans); }
.lieu__nom mark { background: none; color: inherit; font-weight: 700; }
.lieu__nom small { font: 400 12px/1 var(--sans); color: var(--ardoise); }
.panneau__nb { flex: none; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }
.panneau__vide { padding: 14px 20px; font: 400 14px/1.5 var(--sans); color: var(--ardoise); }

/* --- Menus habilles (Type de bien) : bouton + meme panneau que Localisation */

.menu { position: relative; display: flex; border-right: 1px solid rgba(255,255,255,.2); }
.menu select { border-right: 0; }
.recherche .menu__bouton {   /* plus precis que .recherche button */
  min-width: 190px; width: auto; height: 56px; padding: 0 44px 0 50px; text-align: left;
  white-space: nowrap;   /* le libelle choisi sur une ligne : le bouton s'elargit */
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.9); font: 500 14px/1 var(--sans);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff' opacity='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6300' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 12h9M12 3v6M12 15v6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 20px center, left 22px center;
  background-size: 9px, 17px;
  transition: background-color .15s;
}
.recherche .menu__bouton:hover { background-color: rgba(255,255,255,.06); }
.recherche .menu__bouton:focus { outline: none; }
.recherche .menu__bouton:focus-visible,
.recherche .menu__bouton[aria-expanded="true"] { background-color: rgba(255,255,255,.08); box-shadow: inset 0 -2px 0 var(--orange); }
.menu__bouton[aria-expanded="true"] { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 6h10L5 0z' fill='%23ffffff' opacity='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6300' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 12h9M12 3v6M12 15v6'/%3E%3C/svg%3E"); }
.menu__bouton--choisi { color: var(--blanc); font-weight: 600; }

/* Dans un menu, « actif » (clavier/souris) et « choisi » sont deux etats distincts. */
.panneau--menu { width: max(100%, 280px); }
.panneau--menu .panneau__option[aria-selected="true"] { background: none; border-left-color: transparent; }
.panneau--menu .panneau__option--actif,
.panneau--menu .panneau__option:hover { background: var(--brume); border-left-color: var(--orange); }
.panneau--menu .panneau__option[aria-selected="true"] .lieu__nom { font-weight: 700; }
.panneau--menu .panneau__option[aria-selected="true"] .lieu__nom > span::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FF6300' stroke-width='2'%3E%3Cpath d='M1.5 6.5l3 3 6-7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.recherche button { height: 56px; padding: 0 34px; }


/* --- Budget : fourchette min / max ---------------------------------------- */

.menu--budget .menu__bouton, .menu--budget .menu__bouton[aria-expanded="true"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff' opacity='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6300' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6.5A7 7 0 1 0 18 17.5M4 10h9M4 14h9'/%3E%3C/svg%3E");
}
.recherche .menu--budget .menu__bouton { min-width: 210px; }

.panneau--budget { width: 380px; left: auto; right: 0; padding: 22px 24px 18px; cursor: default; }

.budget__histo { display: flex; align-items: flex-end; gap: 3px; height: 46px; padding: 0 9px; }
.budget__histo span { flex: 1; min-height: 2px; background: var(--inactif); transition: background-color .15s; }
.budget__histo span.dans { background: var(--marine); }

/* Deux curseurs natifs superposes : seules les poignees recoivent le pointeur. */
.budget__curseur { position: relative; height: 28px; margin-top: -2px; }
.budget__piste { position: absolute; left: 9px; right: 9px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--inactif); }
.budget__plein { position: absolute; top: 0; bottom: 0; background: var(--orange); }
.budget__curseur input[type=range] {
  position: absolute; inset: 0; width: 100%; margin: 0;
  appearance: none; -webkit-appearance: none; background: none; pointer-events: none;
}
.budget__curseur input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--orange); box-shadow: 0 1px 4px rgba(11,42,74,.3);
}
.budget__curseur input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--orange); box-shadow: 0 1px 4px rgba(11,42,74,.3);
}
.budget__curseur input[type=range]:focus-visible { outline: none; }
.budget__curseur input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,99,0,.25); }
.budget__curseur input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255,99,0,.25); }

.budget__champs { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.budget__champs label { flex: 1; display: flex; flex-direction: column; gap: 7px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }
.budget__champs label > span { position: relative; display: block; }
.budget__champs input {
  width: 100%; height: 44px; padding: 0 30px 0 12px;
  border: 1px solid var(--trait); background: var(--blanc); color: var(--marine);
  font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none;
}
.budget__champs input::placeholder { color: var(--ardoise); }
.budget__champs input:focus { outline: none; border-color: var(--orange); }
.budget__champs i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 14px/1 var(--sans); font-style: normal; color: var(--ardoise); }
.budget__tiret { padding-bottom: 14px; color: var(--ardoise); }

.budget__pied { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait); }
.budget__compte { flex: 1; font: 400 13px/1.3 var(--sans); color: var(--encre); }
.recherche .budget__effacer, .recherche .budget__valider {
  height: auto; width: auto; padding: 10px 14px; border: 0; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.recherche .budget__effacer { background: none; color: var(--ardoise); text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }
.recherche .budget__valider { background: var(--marine); color: var(--blanc); }
.recherche .budget__valider:hover { background: #143A61; }

/* --- Cartes de biens ------------------------------------------------------ */

.grille-biens { display: grid; gap: 34px; }
.grille-biens--2 { grid-template-columns: repeat(2, 1fr); }
.grille-biens--3 { grid-template-columns: repeat(3, 1fr); gap: 26px; }

.carte-bien { display: flex; flex-direction: column; border: 1px solid var(--trait); background: var(--blanc); }
.carte-bien:hover { color: inherit; }
.carte-bien:hover .carte-bien__titre { color: var(--orange); }
.carte-bien__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brume); }
.carte-bien__image img { width: 100%; height: 100%; object-fit: cover; }
.carte-bien__etiquette {
  position: absolute; left: 0; top: 18px;
  background: var(--orange); color: var(--blanc);
  font: 700 11px/1 var(--sans); letter-spacing: .14em;
  padding: 9px 14px; text-transform: uppercase;
}
.carte-bien__corps {
  padding: 26px; display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; flex: 1;
}
.carte-bien__lieu { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--ardoise); text-transform: uppercase; }
.carte-bien__titre { font: 400 22px/1.3 var(--serif); }
.grille-biens--3 .carte-bien__titre { font-size: 19px; }
.carte-bien__specs { font: 400 13px/1 var(--sans); color: var(--ardoise); }
.carte-bien__prix { font: 700 20px/1 var(--sans); padding-top: 6px; margin-top: auto; }

/* --- Puces et fleches de carrousel ---------------------------------------- */

.puces { display: flex; gap: 9px; }
.puces span { width: 9px; height: 9px; border-radius: 50%; background: var(--inactif); }
.puces span.actif { background: var(--orange); }
.puces button {
  /* Puce de 9px, zone cliquable de 25px : le fond est rogne au contenu. */
  box-sizing: content-box; width: 9px; height: 9px; padding: 8px; margin: -8px;
  border: 0; border-radius: 50%; cursor: pointer;
  background-color: var(--inactif); background-clip: content-box;
}
.puces button.actif { background-color: var(--orange); }

.fleche {
  width: 38px; height: 38px; background: var(--marine); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font: 400 16px/1 var(--sans); border: 0; cursor: pointer;
}

/* --- Carrousel (derniers biens de l'accueil) ------------------------------ */
.carrousel { display: flex; flex-direction: column; gap: 28px; }
.carrousel__piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 34px) / 2); gap: 34px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.carrousel__element { scroll-snap-align: start; min-width: 0; }
/* Cartes de meme hauteur, meme quand un titre passe sur deux lignes. */
.carrousel__element > .carte-bien { height: 100%; box-sizing: border-box; }
.carrousel__nav { display: flex; align-items: center; justify-content: center; gap: 22px; }
.carrousel__nav[hidden] { display: none; }
.carrousel .fleche:disabled { opacity: .3; cursor: default; }
.carrousel .fleche:not(:disabled):hover { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .carrousel__piste { scroll-behavior: auto; } }
@media (max-width: 760px) {
  /* Une carte et le debut de la suivante : on voit qu'il y a a faire defiler. */
  .carrousel__piste { grid-auto-columns: 86%; gap: 16px; }
}

/* Communes : le carrousel sort de la colonne de contenu et prend toute la
   largeur de l'ecran (petite marge), trois grandes cartes visibles. */
.carrousel--communes { width: calc(100vw - 48px); max-width: none; align-self: center; }
.carrousel--communes .carrousel__piste { grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px; }
.carte-commune { position: relative; display: block; height: clamp(320px, 30vw, 520px); overflow: hidden; color: var(--blanc); }
.carte-commune img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-commune__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,74,.1) 35%, rgba(11,42,74,.75) 100%); }
.carte-commune__texte { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.carte-commune__cp { font: 600 10px/1 var(--sans); letter-spacing: .32em; opacity: .85; }
.carte-commune__nom { font: 400 34px/1.15 var(--serif); }
.carte-commune__nb { font: 400 14px/1 var(--sans); opacity: .85; }
@media (max-width: 1024px) { .carrousel--communes .carrousel__piste { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 760px) {
  .carrousel--communes { width: calc(100vw - 32px); }
  .carrousel--communes .carrousel__piste { grid-auto-columns: 86%; gap: 16px; }
  .carte-commune { height: 380px; }
  .carte-commune__nom { font-size: 29px; }
}

/* --- Rubrique « Vivre a Sanary et alentours » ------------------------------- */
.vivre-intro { padding: 16px 0 44px; max-width: 78ch; }
.vivre-intro p { font-size: 17px; line-height: 1.8; }
.vivre-recherche {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 0 0 56px; padding: 26px 30px; border: 1px solid var(--orange); background: #FFF7F1;
}
.vivre-recherche div { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.vivre-recherche strong { font: 600 24px/1.2 var(--serif); color: var(--marine); }
.vivre-recherche span { font: 400 15px/1.6 var(--sans); color: var(--encre); }
.vivre-bloc { padding-top: 64px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vivre-bloc .titre-section { text-align: center; margin-bottom: 30px; }
.vivre-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 72px; }
.vivre-style { display: flex; flex-direction: column; gap: 18px; }
.vivre-style__communes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vivre-style__communes a { font: 600 14px/1.4 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--inactif); }
.vivre-style__communes a:hover { color: var(--orange); }
.vivre-corps { padding: 64px 0 20px; max-width: 78ch; }
.vivre-corps ol { margin: 0; padding-left: 22px; font: 400 15px/1.85 var(--sans); color: var(--encre); display: flex; flex-direction: column; gap: 8px; }
.vivre-faq { max-width: 78ch; padding: 30px 0 72px; display: flex; flex-direction: column; gap: 4px; }
.vivre-faq h2 { font: 400 30px/1.25 var(--serif); padding-bottom: 14px; }
.vivre-faq details { border-top: 1px solid var(--trait); padding: 16px 0; }
.vivre-faq details:last-child { border-bottom: 1px solid var(--trait); }
.vivre-faq summary { cursor: pointer; font: 600 16px/1.5 var(--sans); color: var(--marine); }
.vivre-faq details p { margin: 10px 0 0; font: 400 15px/1.8 var(--sans); color: var(--encre); }
.vivre-liens { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.vivre-liens a { font: 600 15px/1.4 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--inactif); }
.vivre-liens a:hover { color: var(--orange); }
.bien-guides { margin-top: 30px; padding: 20px 24px; background: var(--brume); display: flex; flex-direction: column; gap: 10px; }
.bien-guides strong { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
.bien-guides a { font: 600 15px/1.4 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) { .vivre-styles { grid-template-columns: 1fr; } }

/* --- Rubrique « Nos villes » ---------------------------------------------- */
.villes-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 80px; }
/* Ville sans photo : aplat marine plutot que la photo d'une autre ville. */
.carte-commune--aplat { background: linear-gradient(160deg, #143A61 0%, var(--marine) 70%); }
.carte-commune--aplat .carte-commune__voile { display: none; }
.banniere--aplat { background: linear-gradient(160deg, #143A61 0%, var(--marine) 70%); }
.quartiers { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1024px) { .villes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .villes-grille { grid-template-columns: 1fr; } }

/* --- Plan des quartiers ---------------------------------------------------- */
.plan-quartiers { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; width: 100%; }
.plan-quartiers__carte { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-quartiers__svg { width: 100%; height: auto; display: block; border: 1px solid var(--trait); }
.plan-mer { fill: #DCE8F2; }
.plan-terre { fill: #F6F1E7; stroke: #D8CDB8; stroke-width: 1.2; stroke-linejoin: round; }
.plan-commune { font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: #9A8E78; }
.plan-point circle { fill: var(--orange); stroke: var(--blanc); stroke-width: 3; transition: r .15s, fill .15s; }
.plan-point text { font: 700 14px var(--sans); fill: var(--blanc); pointer-events: none; }
.plan-point:hover circle, .plan-point:focus-visible circle, .plan-point.actif circle { fill: var(--marine); r: 17; }
.plan-quartiers__legende { display: flex; flex-direction: column; gap: 20px; }
.plan-quartiers__ville-nom { font: 600 22px/1.2 var(--serif); color: var(--marine); }
.plan-quartiers__ville ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-quartiers__ville li a { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--sans); color: var(--encre); }
.plan-quartiers__ville li a:hover, .plan-quartiers__ville li a.actif { color: var(--orange); }
.plan-quartiers__num { width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--blanc); font: 700 12px/24px var(--sans); text-align: center; flex: none; }
@media (max-width: 1024px) { .plan-quartiers { grid-template-columns: 1fr; } .plan-quartiers__legende { display: grid; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .plan-quartiers__legende { grid-template-columns: 1fr; }
  /* Le plan tient en 350 px : pastilles agrandies pour rester lisibles. */
  .plan-point circle { r: 24; stroke-width: 4; }
  .plan-point text { font-size: 24px; transform: translateY(4px); }
}

/* --- Blog ------------------------------------------------------------------ */
.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 34px; }
.carte-article { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); height: 100%; }
.carte-article__image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brume); }
.carte-article__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.carte-article:hover .carte-article__image img { transform: scale(1.08); }
.carte-article__categorie { position: absolute; left: 16px; top: 16px; background: var(--orange); color: var(--blanc); font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; }
.carte-article__corps { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; flex: 1; }
.carte-article__date { font: 400 13px/1 var(--sans); color: var(--ardoise); }
.carte-article__titre { font: 600 23px/1.25 var(--serif); color: var(--marine); }
.carte-article__extrait { font: 400 15px/1.7 var(--sans); color: var(--encre); flex: 1; }
.carte-article__lire { font: 600 14px/1 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 44px; }
.pagination a { padding: 10px 14px; border: 1px solid var(--trait); font: 600 14px/1 var(--sans); color: var(--marine); }
.pagination a[aria-current] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.article { max-width: 860px; margin: 0 auto; padding-bottom: 40px; }
.article__entete { display: flex; flex-direction: column; gap: 14px; padding: 20px 0 30px; }
.article__categorie { align-self: flex-start; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.article h1 { font: 400 44px/1.15 var(--serif); color: var(--marine); }
.article__meta { font: 400 14px/1.4 var(--sans); color: var(--ardoise); margin: 0; }
.article__chapeau { font: 400 19px/1.7 var(--sans); color: var(--encre); margin: 0; }
.article__image { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; margin-bottom: 40px; }
.article__corps { max-width: none; }
.article__corps p, .article__corps ul { max-width: none; font-size: 17px; }
.tableau--article { max-width: 560px; }
.tableau--article th, .tableau--article td { width: auto; white-space: nowrap; }
.tableau--article tbody th { color: var(--marine); font-weight: 600; }
.article__liens { margin-top: 40px; }
.article__appel { margin: 40px 0 0; }
@media (max-width: 1024px) { .grille-articles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grille-articles { grid-template-columns: 1fr; } .article h1 { font-size: 32px; } }

/* --- Partenaires ----------------------------------------------------------- */
.partenaires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.partenaire { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 26px; border: 1px solid var(--trait); background: var(--blanc); }
.partenaire__marque { min-height: 64px; display: flex; align-items: center; justify-content: center; }
.partenaire__marque img { max-height: 64px; max-width: 220px; object-fit: contain; }
.partenaire__nom { font: 600 26px/1.15 var(--serif); color: var(--marine); }
.partenaire__role { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.partenaire p { margin: 6px 0 0; font: 400 15px/1.7 var(--sans); color: var(--encre); flex: 1; }
.partenaire__lien { font: 600 14px/1.3 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); margin-top: 8px; }
.partenaires--complet { padding-bottom: 20px; }
@media (max-width: 760px) { .partenaires { grid-template-columns: 1fr; } }

/* --- Zoom des photos au survol (cartes de biens et de communes) ------------ */
.carte-bien__image img, .carte-commune img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.carte-bien:hover .carte-bien__image img, .carte-bien:focus-visible .carte-bien__image img,
.carte-commune:hover img, .carte-commune:focus-visible img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .carte-bien__image img, .carte-commune img { transition: none; }
  .carte-bien:hover .carte-bien__image img, .carte-commune:hover img { transform: none; }
}

/* --- Pied de page --------------------------------------------------------- */

.pied { background: var(--marine); color: var(--blanc); padding: 60px var(--marge) 28px; }
.pied__colonnes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.16);
}
.pied__colonne { display: flex; flex-direction: column; gap: 12px; font: 400 15px/1.6 var(--sans); color: rgba(255,255,255,.82); }
.pied__titre { font: 600 11px/1 var(--sans); letter-spacing: .24em; color: var(--blanc); padding-bottom: 6px; text-transform: uppercase; }
.pied__bas {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 24px; font: 400 13px/1.6 var(--sans); color: rgba(255,255,255,.55);
}
.pied__legal { font: 400 12px/1.7 var(--sans); color: rgba(255,255,255,.5); padding-top: 16px; }

/* ==========================================================================
   Gabarits ajoutes — le vocabulaire ci-dessus, applique aux pages que la
   piste A ne dessinait pas.
   ========================================================================== */

/* --- Listing -------------------------------------------------------------- */

.barre-resultats {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  padding: 30px 0; border-bottom: 1px solid var(--trait);
}
.barre-resultats__compte { font: 400 15px/1 var(--sans); color: var(--encre); }
.barre-resultats__compte strong { font-weight: 700; color: var(--marine); }
.lien-alerte { margin-left: 14px; font: 600 13px/1 var(--sans); color: var(--orange); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.liste-intro { max-width: 72ch; margin: 4px 0 26px; font-size: 16px; }

.filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.filtres a {
  font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border: 1px solid var(--trait); color: var(--encre);
}
.filtres a:hover { border-color: var(--orange); color: var(--orange); }
.filtres a[aria-current] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }

.vide { padding: 80px 0; text-align: center; color: var(--encre); }

/* --- Fiche de bien -------------------------------------------------------- */

.galerie { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; }
.galerie__principale { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--brume); }
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie__cotes { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.galerie__vignette { position: relative; overflow: hidden; background: var(--brume); border: 0; padding: 0; cursor: pointer; }
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignette[aria-current="true"] { outline: 3px solid var(--orange); outline-offset: -3px; }
.galerie__reste {
  position: absolute; inset: 0; background: rgba(11,42,74,.62); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--sans);
}

.fiche { display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px; align-items: start; }

.fiche__chiffres { display: flex; gap: 40px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffre { display: flex; flex-direction: column; gap: 5px; }
.chiffre__valeur { font: 700 22px/1 var(--sans); }
.chiffre__mot { font: 400 12px/1 var(--sans); letter-spacing: .1em; color: var(--ardoise); text-transform: uppercase; }

.prix-fiche { font: 700 34px/1 var(--sans); }

.tableau { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--sans); }
.tableau th, .tableau td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { font-weight: 400; color: var(--ardoise); width: 52%; }
.tableau td { color: var(--marine); font-weight: 500; }

.encart {
  border: 1px solid var(--trait); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 24px;
}
.encart--marine { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.encart--marine .chapeau { color: rgba(255,255,255,.78); }
.encart label { font: 400 12px/1 var(--sans); letter-spacing: .08em; color: var(--ardoise); text-transform: uppercase; }
.encart input, .encart textarea, .encart select, .formulaire input, .formulaire textarea, .formulaire select {
  width: 100%; padding: 13px 15px; font: 400 15px/1.4 var(--sans);
  border: 1px solid var(--bord); background: var(--blanc); color: var(--marine);
}
.encart textarea, .formulaire textarea { resize: vertical; min-height: 110px; }

.champ { display: flex; flex-direction: column; gap: 7px; }
.formulaire { display: grid; gap: 18px; }
.formulaire--2 { grid-template-columns: 1fr 1fr; }
.formulaire .pleine { grid-column: 1 / -1; }

.mention { font: 400 12px/1.6 var(--sans); color: var(--ardoise); }

/* --- Page prix au m² ------------------------------------------------------ */

.chiffres-cles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.chiffres-cles--2 { grid-template-columns: repeat(2, 1fr); }
.chiffres-cles > div { background: var(--blanc); padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.chiffres-cles .valeur { font: 800 40px/1 var(--sans); letter-spacing: -.02em; }
.chiffres-cles .mot { font: 700 14px/1.4 var(--sans); }
.chiffres-cles .precision { font: 400 13px/1.5 var(--sans); color: var(--ardoise); }

/* --- Agence --------------------------------------------------------------- */

/* --- Equipe (page agence) ------------------------------------------------ */

.equipe-bloc { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; padding-bottom: 80px; }
.equipe-bloc .titre-section { text-align: center; margin-bottom: 26px; }
.equipe-groupe { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.equipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; margin-top: 44px; }
.membre { display: flex; flex-direction: column; gap: 8px; }
.membre__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; }
.membre__nom { font: 400 26px/1.15 var(--serif); color: var(--marine); }
.membre__titre { font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.membre__texte { font: 400 15px/1.75 var(--sans); color: var(--encre); margin-top: 6px; }

/* Emplacement en attente d'un contenu fourni par l'agence : visible comme tel,
   pour que personne ne le prenne pour le contenu definitif. */
.emplacement {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--brume); border: 1.5px dashed var(--inactif); color: var(--ardoise);
  font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.a-fournir { color: var(--ardoise) !important; font-style: italic; }
.membre__titre.a-fournir { font-style: normal; }

/* --- Contact : carte, itineraire, comment venir ---------------------------- */
.carte { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--brume); border: 1px solid var(--trait); }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.itineraire { align-self: flex-start; }
.venir { display: flex; flex-direction: column; gap: 16px; padding: 0 0 80px; max-width: 78ch; }
.venir p, .venir ul { font: 400 15px/1.85 var(--sans); color: var(--encre); }
.venir ul { margin: 0; padding-left: 20px; }

.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.engagement { background: var(--blanc); border: 1px solid var(--trait); padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.engagement h3 { font: 400 24px/1.25 var(--serif); }

.garanties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }

/* --- Contact -------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.coordonnees { display: flex; flex-direction: column; gap: 22px; font: 400 16px/1.7 var(--sans); color: var(--encre); }
.coordonnees strong { display: block; color: var(--marine); font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; }

/* --- Fil d'Ariane --------------------------------------------------------- */

.ariane { font: 400 13px/1.5 var(--sans); color: var(--ardoise); padding: 22px 0; }
.ariane a:hover { color: var(--orange); }
.ariane span { padding: 0 8px; }

/* --- Bloc de texte editorial ---------------------------------------------- */

.editorial { display: flex; flex-direction: column; gap: 30px; }
.editorial h2 { font: 400 30px/1.25 var(--serif); }
.editorial p { font: 400 15px/1.85 var(--sans); color: var(--encre); max-width: 78ch; }
.editorial--centre { align-items: center; text-align: center; }
.editorial p a { color: var(--marine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.editorial p a:hover { color: var(--orange); }
/* Mentions legales : les lignes d'identite se lisent comme une fiche, serrees. */
.mentions { gap: 18px; }
.mentions h2 { font: 400 26px/1.25 var(--serif); padding-top: 18px; }
.mentions__identite { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.mentions__identite p { line-height: 1.6; }
.mentions a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Une puce ne tombe pas juste sur un texte centre : on la retire. */
.editorial--centre ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
.editorial ul { margin: 0; padding-left: 20px; font: 400 15px/1.85 var(--sans); color: var(--encre); max-width: 78ch; }

/* ==========================================================================
   Adaptations — la piste A est dessinee a 1440. En dessous, les gouttieres
   se resserrent avant que les grilles ne s'effondrent.
   ========================================================================== */

@media (max-width: 1280px) {
  :root { --gouttiere: 64px; }
  .banniere h1 { font-size: 48px; }
}

/* Menu agrandi (12/10/2026) : entre 1025 et 1180 px, une fois compacte avec le
   telephone, il passait sur deux lignes. On le resserre avant de basculer en burger. */
@media (max-width: 1180px) {
  .nav { gap: 20px; font-size: 13px; letter-spacing: .06em; }
  .tiroir-bouton { margin-left: 14px; }
  .entete__tel { margin-left: 18px; }
}

@media (max-width: 1024px) {
  :root { --gouttiere: 40px; }
  .nav { display: none; }
  .nav-bouton { display: block; }
  .tiroir-bouton { display: none; }
  .entete .entete__tel { margin-left: auto; margin-right: 20px; }
  .nav--ouverte {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: var(--blanc); border-bottom: 1px solid var(--trait);
    padding: 8px var(--marge) 20px;
  }
  .nav--ouverte a { padding: 13px 0; width: 100%; border-bottom: 1px solid var(--trait); }
  /* Menu mobile : la liste des villes se deplie sous le libelle, sans survol. */
  .nav--ouverte .nav__groupe { width: 100%; flex-wrap: wrap; gap: 0; }
  .nav--ouverte .nav__groupe > a { width: auto; flex: 1; }
  .nav--ouverte .nav__deplier { padding: 13px 4px 13px 16px; border-bottom: 1px solid var(--trait); }
  .nav--ouverte .nav__groupe::after { display: none; }
  .nav--ouverte .sous-menu {
    position: static; display: none; width: 100%; min-width: 0; padding: 4px 0 8px 14px;
    box-shadow: none; border-top: 0; opacity: 1; visibility: visible; transform: none;
  }
  .nav--ouverte .nav__groupe.nav__groupe--ouvert .sous-menu { display: block; }
  .nav--ouverte .sous-menu a { padding: 10px 0; border-bottom: 0; }
  .fiche, .contact { grid-template-columns: 1fr; gap: 44px; }
  .encart { position: static; }
  .grille-biens--3 { grid-template-columns: repeat(2, 1fr); }
  .engagements { grid-template-columns: 1fr; }
  .equipe { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
  .banniere--accueil { min-height: 520px; }
  .banniere h1 { font-size: 40px; }
  .titre-section { font-size: 32px; }
}

@media (max-width: 760px) {
  /* Mobile : le numero reste affiche dans le menu compacte (demande de Nicolas),
     en plus petit ; le logo se resserre pour lui laisser la place. */
  .entete .entete__tel { font-size: 13px; gap: 6px; margin-right: 16px; }
  .entete--compacte .marque__nom { font-size: 18px; }
  .entete--compacte .marque__lieu { font-size: 7px; }
  /* Le titre sur quatre lignes couvrait l'enseigne de la facade : bandeau plus
     haut, titre plus petit, pour que l'enseigne reste visible au-dessus. */
  .banniere--devanture, .banniere--devanture .banniere__contenu { min-height: 540px !important; }
  .banniere--devanture h2 { font-size: 29px !important; }
  .equipe { grid-template-columns: 1fr; }
  .equipe-groupe { aspect-ratio: 4 / 3; }
  :root { --gouttiere: 20px; }
  .banniere h1 { font-size: 31px; }
  .banniere--page h1 { font-size: 27px; }
  .banniere--accueil { min-height: 460px; }
  /* Sans respiration verticale, le surtitre venait toucher l'en-tete. */
  .banniere__contenu { padding-top: 40px; padding-bottom: 40px; }
  .titre-section { font-size: 27px; }
  .grille-biens--2, .grille-biens--3 { grid-template-columns: 1fr; }
  .chiffres-cles, .formulaire--2, .garanties { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr; gap: 34px; }
  .galerie { grid-template-columns: 1fr; }
  .galerie__cotes { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .galerie__vignette { aspect-ratio: 4 / 3; }
  /* Le conteneur du bandeau centre ses enfants : sans largeur explicite, le
     formulaire se reduisait a la largeur de ses libelles. */
  .recherche { flex-direction: column; width: 100%; align-self: stretch; }
  .recherche select { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); width: 100%; }
  .lieu { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .lieu__champ { width: 100%; font-size: 16px; } /* 16 px : iOS ne zoome pas au focus */
  .panneau { width: 100%; }
  .menu { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .recherche .menu__bouton, .recherche .menu--budget .menu__bouton { width: 100%; font-size: 16px; }
  .panneau--budget { width: 100%; left: 0; right: auto; padding: 18px 16px 14px; }
  .budget__champs input { font-size: 16px; }
  .recherche button { width: 100%; justify-content: center; }
  .prix-fiche { font-size: 27px; }
  .fiche__chiffres { gap: 26px; }
  .bandeau { font-size: 11px; padding-top: 13px; padding-bottom: 13px; }
  .bandeau__tel { font-size: 15px; }
}

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

/* Le tableau des prix a quatre colonnes, pas deux : la largeur de 52 % posee
   sur les th du tableau de caracteristiques y ecrasait les deux dernieres. */
.tableau-defile { width: 100%; overflow-x: auto; }
.tableau--prix { min-width: 760px; }
.tableau--prix td.fourchette { font-weight: 400; color: var(--encre); white-space: nowrap; }

/* --- Estimer : motifs et etapes -------------------------------------------- */
.motifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; }
.motif { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border: 1px solid var(--trait); background: var(--blanc); }
.motif__icone { width: 54px; height: 54px; border-radius: 50%; background: #FFF1E8; color: var(--orange); display: flex; align-items: center; justify-content: center; }
.motif h3 { font: 400 23px/1.2 var(--serif); }
.motif p { font: 400 15px/1.75 var(--sans); color: var(--encre); margin: 0; }
.etapes { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
/* Le fil qui relie les etapes, derriere les pastilles. */
.etapes::before { content: ""; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 16px); }
.etape { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.etape__icone { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--marine); color: var(--blanc); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--brume); }
.etape__numero { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--blanc); font: 700 13px/26px var(--sans); }
.etape h3 { font: 400 23px/1.2 var(--serif); margin-top: 6px; }
.etape p { font: 400 15px/1.7 var(--sans); color: var(--encre); margin: 0; max-width: 30ch; }
@media (max-width: 1024px) {
  .motifs { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .etapes::before { display: none; }
}
@media (max-width: 760px) {
  .motifs, .etapes { grid-template-columns: 1fr; }
}

.tableau--prix th,
.tableau--prix td { width: auto; }
.tableau--prix thead th { color: var(--marine); font-weight: 700; white-space: nowrap; }
.tableau--prix col.commune   { width: 34%; }
.tableau--prix col.median    { width: 22%; }
.tableau--prix col.fourchette{ width: 32%; }
.tableau--prix col.compte    { width: 12%; }
.tableau--prix td:last-child { text-align: right; }
.tableau--prix thead th:last-child { text-align: right; }

@media (max-width: 620px) {
  .tableau--prix col.fourchette { width: 40%; }
  .tableau--prix { font-size: 14px; }
  .tableau--prix thead th { white-space: normal; }
}

/* ==========================================================================
   Sections de l'accueil.
   La piste A est ecrite en styles en ligne, ce qui est normal pour une
   maquette a largeur fixe. Transcrits tels quels, ces styles battaient les
   media queries et les grilles restaient a deux colonnes sur telephone.
   Elles vivent donc ici.
   ========================================================================== */

.duo        { display: grid; grid-template-columns: 1fr 1.1fr;   gap: 80px; align-items: center; }
/* Sans photo (accueil, bloc Vendre, tant que l'agence n'a pas fourni la photo
   d'equipe) : le texte seul, centre, plutot qu'une moitie de page vide. */
.duo--seul  { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.duo--seul .duo__texte { align-items: center !important; }
.newsletter { display: grid; grid-template-columns: .8fr 1.2fr;  gap: 56px; align-items: center; }
.estimation-bloc { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }

/* Accueil : la note Google, seul chiffre mis en avant. */
.note-google {
  display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap;
  padding: 44px 0 52px; border-top: 1px solid var(--trait); color: var(--marine);
}
.note-google__valeur { font: 400 78px/1 var(--serif); color: var(--marine); }
.note-google__corps { display: flex; flex-direction: column; gap: 8px; }
.note-google__etoiles { color: var(--orange); font: 400 22px/1 var(--sans); letter-spacing: .18em; }
.note-google__texte { font: 400 16px/1.4 var(--sans); color: var(--encre); }
.note-google__texte strong { color: var(--marine); font-weight: 700; }
.note-google__lien { font: 600 14px/1 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--inactif); }
.note-google:hover .note-google__lien { color: var(--orange); text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .note-google { flex-direction: column; gap: 14px; text-align: center; }
  .note-google__corps { align-items: center; }
  .note-google__valeur { font-size: 64px; }
}

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--trait); }
.chiffres a, .chiffres > div { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.chiffres .nombre { font: 800 44px/1 var(--sans); letter-spacing: -.02em; }
.chiffres .mot { font: 700 15px/1.3 var(--sans); }

.duo__image { height: 430px; width: 100%; object-fit: cover; }
/* Les neuf communes du secteur, sous les cartes de l'accueil. */
.insecable { white-space: nowrap; }

.secteur-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: 900px; margin: 30px 0 0; padding: 0; list-style: none; }
.secteur-liste li { font: 500 14px/1.4 var(--sans); color: var(--ardoise); }
.secteur-liste a { color: var(--marine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--inactif); }
.secteur-liste a:hover { color: var(--orange); text-decoration-color: currentColor; }

/* Avis de l'accueil : trois cartes cote a cote. */
.avis-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; width: 100%; }
.avis-carte { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 34px 32px; background: var(--blanc); border: 1px solid var(--trait); }
.avis-carte__etoiles { color: var(--orange); font: 400 16px/1 var(--sans); letter-spacing: .2em; }
.avis-carte__texte { margin: 0; flex: 1; font: 400 15px/1.8 var(--sans); color: var(--encre); }
.avis-carte__auteur { font: 400 13px/1.4 var(--sans); color: var(--ardoise); }
.avis-carte__auteur strong { color: var(--marine); font-weight: 700; }
@media (max-width: 1024px) { .avis-cartes { grid-template-columns: 1fr; max-width: 70ch; margin: 0 auto; } }
.lien-souligne { font: 600 14px/1 var(--sans); color: var(--marine); text-decoration: underline; text-underline-offset: 4px; align-self: flex-start; }
.lien-souligne:hover { color: var(--orange); }

@media (max-width: 1024px) {
  .duo, .newsletter, .estimation-bloc { grid-template-columns: 1fr; gap: 40px; }
  .duo__image { height: 320px; }
}

@media (max-width: 760px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; padding-top: 40px; }
  .chiffres .nombre { font-size: 36px; }
  .chiffres .mot { font-size: 14px; }
  .duo__image { height: 240px; }
  /* Un bouton qui deborde de son bandeau n'est plus un bouton. */
  .banniere__contenu .cta { max-width: 100%; text-align: center; }
}

/* Tres petits ecrans : le numero garde sa place, l'icone du telephone saute. */
@media (max-width: 360px) {
  .entete .entete__tel svg { display: none; }
  .entete .entete__tel { margin-right: 12px; }
}

/* Plan du site */
.plan-du-site { columns: 3 300px; column-gap: 48px; padding: 10px 0 80px; }
.plan-du-site section { break-inside: avoid; margin-bottom: 34px; }
.plan-du-site h2 { font: 700 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--marine); margin-bottom: 12px; }
.plan-du-site ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-du-site a { color: var(--encre); font-size: 15px; line-height: 1.4; }
.plan-du-site a:hover { color: var(--orange); }

/* --- « Etre rappele » : widget en bas a droite de toutes les pages (12/10/2026) --- */
.rappel { position: fixed; right: 24px; bottom: 24px; z-index: 50; }
.rappel__bouton {
  list-style: none; display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 22px 0 18px; border-radius: 26px; cursor: pointer;
  background: var(--orange); color: var(--blanc); font: 700 15px/1 var(--sans);
  box-shadow: 0 10px 28px rgba(11,42,74,.28);
}
.rappel__bouton::-webkit-details-marker { display: none; }
.rappel__bouton:hover { background: #E45800; }
.rappel__bouton:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }
.rappel[open] .rappel__bouton { background: var(--marine); }
/* La carte s'ouvre au-dessus du bouton, qui reste dans son coin (un <details>
   n'est pas une boite flexible partout : position absolue plutot que order). */
.rappel__carte {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--blanc); border-top: 3px solid var(--orange); box-shadow: 0 18px 44px rgba(11,42,74,.25);
}
.rappel__titre { font: 400 22px/1.2 var(--serif); color: var(--marine); }
.rappel__texte { font: 400 14px/1.5 var(--sans); color: var(--encre); margin: 0; }
.rappel__carte input {
  height: 48px; padding: 0 14px; border: 1px solid var(--bord); border-radius: 0;
  font: 500 16px/1 var(--sans); color: var(--marine);
}
.rappel__carte input:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.rappel__carte button { height: 48px; justify-content: center; }
@media (max-width: 760px) {
  /* Mobile : une pastille ronde, le libelle masque, pour ne pas couvrir le contenu. */
  .rappel { right: 16px; bottom: 16px; }
  .rappel__bouton { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .rappel__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rappel__carte { width: min(300px, calc(100vw - 32px)); }
}
@media print { .rappel { display: none; } }