/* =========================================================================
   SITE PUBLIC LENSA IMMO — REFONTE COMPLÈTE (maquette du 30/09/2026)
   -------------------------------------------------------------------------
   CE FICHIER REMPLACE public/assets/css/site.css EN ENTIER.
   base.css n'est PAS modifié : il reste partagé avec l'application de
   gestion. Tout ce qui change pour le site public est écrit ici, sous
   [data-espace="public"] (l'attribut que la coque du site pose sur <body>).
   L'application de gestion ne charge pas ce fichier : elle ne peut donc pas
   être touchée.

   DIRECTION : « plus léger, boutons carrés à coins arrondis, plus beau et
   plus fonctionnel » (demande de la directrice).

   1. PLUS LÉGER
      · un fond de page BLANC (et non plus le bleu très pâle) ; les blocs
        teintés (#F5F8FC) servent à rythmer la page, ils ne l'alourdissent
        plus. Les grands aplats bleu dégradé des sections « motif » sont
        supprimés ; il ne reste qu'UN aplat bleu par page : « Parlons de
        votre projet ».
      · filets de 1 px partout (2 px et 3 px avant), ombres à peine
        perceptibles, plus d'anneau triple « cadre-double ».
      · titres en graisse 700 (800 avant), sans soulignement rouille.
      · plus d'air : 44 px entre deux sections sur téléphone, 80 px sur
        ordinateur.
   2. CARRÉ À COINS ARRONDIS : boutons, champs, onglets, étiquettes et
      pastilles à 8 px ; blocs et cartes à 12 px (18 px avant). Plus aucune
      gélule (100 px) sur le site public.
   3. PLUS FONCTIONNEL : voir la liste dans le rapport (fiche d'un bien en
      deux colonnes avec bloc de contact qui suit la lecture, filtres en une
      ligne, focus visible partout — y compris blanc sur les aplats bleus —,
      cibles tactiles ≥ 44 px, mise en page testée à 375 / 768 / 1024 /
      1280 px).

   LA CHARTE COULEUR NE CHANGE PAS. Aucune valeur de couleur nouvelle : tout
   passe par les jetons de base.css (--bleu-marine, --bleu-marque,
   --bleu-fond, --terre, --orange, --creme…) et par les deux jetons
   « terre cuite » de l'ancien site.css, repris à l'identique ci-dessous.
   Les seules valeurs en dur sont des transparences du même bleu (voir
   .accroche) — elles existaient déjà dans site.css.

   LES TEXTES NE CHANGENT PAS. Rien ici ne crée ni ne modifie un texte :
   les seuls contenus générés (::before/::after) sont des pictogrammes
   (✓, ✕, ›) et des numéros de pas, comme dans l'ancien fichier.
   ========================================================================= */

/* ---------------------------------------------------------------- 0. JETONS */
:root{
  /* Repris tels quels de l'ancien site.css (mesurés : 5,89:1 sur blanc). */
  --terre-cuite:      #9E4D33;
  --terre-cuite-pale: #FBEDE7;
  --h-marque:140px;   /* rangée du logo — sert aussi au collage de la barre */
  --h-barre:58px;     /* barre de menu */
}
@media (max-width:767px){ :root{ --h-marque:116px; } }
@media (min-width:1024px){ :root{ --h-marque:156px; } }

[data-espace="public"]{
  /* L'angle : 8 px pour tout ce qui se touche (boutons, champs, étiquettes),
     12 px pour ce qui contient (cartes, blocs). Ces jetons REDÉFINISSENT ceux
     de base.css, uniquement sous le site public. */
  --r-btn:8px;
  --r:12px;
  --r-s:8px;
  --r-xs:6px;
  --r-hero:16px;
  --ombre-s:0 1px 2px rgba(16,26,46,.04);
  --ombre:0 8px 24px rgba(16,26,46,.08);
  --ombre-lg:0 16px 40px rgba(16,26,46,.14);
  --sec:36px;                /* espace entre deux sections (téléphone) */
}
@media (min-width:768px){ [data-espace="public"]{ --sec:64px; } }
@media (min-width:1024px){ [data-espace="public"]{ --sec:80px; } }

body.site{ background:var(--blanc); }
/* Le titre de page et les titres de section : plus fins, plus serrés. */
[data-espace="public"] h1,
[data-espace="public"] h2,
[data-espace="public"] h3{ font-weight:700; letter-spacing:-.025em; }
[data-espace="public"] strong,
[data-espace="public"] b{ font-weight:700; }

/* ------------------------------------------------------------ 1. FOCUS */
/* Base.css pose un anneau --terre (bleu soutenu) : invisible sur un aplat
   bleu. Sur les fonds bleus, l'anneau devient blanc. */
.sur-bleu :where(a,button,input,select,summary,[tabindex]):focus-visible,
.contact-projet :where(a,button,input,select,summary,[tabindex]):focus-visible,

.cat-pourqui :where(a,button):focus-visible,
.conseiller-entete :where(button):focus-visible,
.site-entete .bouton-menu[aria-expanded="true"]:focus-visible{
  outline-color:#fff; }

/* ------------------------------------------------------------ 2. BOUTONS */
[data-espace="public"] .btn,
[data-espace="public"] .bouton-menu,
.entete-acces,
nav.site-nav a.nav-action{ border-radius:var(--r-btn); }
[data-espace="public"] .btn{
  min-height:48px; padding:12px 22px; font-size:var(--t-m); font-weight:700;
  border-width:1.5px; letter-spacing:-.005em; }
[data-espace="public"] .btn-principal{ background:var(--action); color:var(--creme); }
[data-espace="public"] .btn-principal:hover{ filter:none; background:var(--bleu-marine); }
[data-espace="public"] .btn-second{ background:var(--blanc); color:var(--indigo); border-color:var(--bord); }
[data-espace="public"] .btn-second:hover{ background:var(--creme-2); border-color:var(--indigo); }
[data-espace="public"] .btn-discret{ background:var(--creme-2); border-color:var(--filet); }
[data-espace="public"] .btn-petit{ min-height:44px; padding:8px 16px; font-size:var(--t-s); }
.btn:focus-visible,.bouton-menu:focus-visible,.entete-acces:focus-visible,
nav.site-nav a.nav-action:focus-visible{ border-radius:var(--r-btn); }
[data-espace="public"] .btn-sur-chrome{ background:transparent; color:var(--creme);
  border-color:rgba(255,255,255,.65); }
[data-espace="public"] .btn-sur-chrome:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ------------------------------------------------------------ 3. EN-TÊTE
   Direction validée : le logo au centre, la barre de menu dessous.
   Collant : SEULE la barre reste en haut de l'écran quand on descend. */
header.site-entete{
  position:sticky; top:calc(-1 * var(--h-marque)); z-index:25;
  background:var(--blanc); border-bottom:1px solid var(--filet); }
.entete-marque{ height:var(--h-marque); display:flex; align-items:center; justify-content:center; }
.marque{ display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:var(--encre); min-width:0; }
.site-entete .logo-marque{ height:100px; aspect-ratio:611 / 789; width:auto;
  max-width:none; display:block; flex:0 0 auto; }
@media (min-width:1024px){ .site-entete .logo-marque{ height:112px; } }
@media (max-width:767px){ .site-entete .logo-marque{ height:76px; } }
/* « agréée » RESTE VISIBLE À TOUTES LES LARGEURS (mesuré à 375 px). */
.marque .agrement{ font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--encre-2); white-space:nowrap; line-height:1.3; }
@media (max-width:359px){ .marque .agrement{ font-size:12px; letter-spacing:0; } }

.entete-barre{ border-top:1px solid var(--filet); }
.entete-barre .enveloppe{ display:flex; align-items:center; justify-content:center;
  gap:var(--e2); min-height:var(--h-barre); padding-block:7px; }
.entete-acces{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border:1.5px solid var(--filet-fort); background:var(--blanc);
  color:var(--indigo); font-weight:700; font-size:var(--t-s); text-decoration:none;
  white-space:nowrap; }
.entete-acces:hover{ background:var(--creme-2); border-color:var(--indigo); }
.entete-acces svg{ width:18px; height:18px; flex:none; }

.entete-barre .bouton-menu{ flex:1; justify-content:center; min-height:44px;
  padding:0 14px; border:1.5px solid var(--filet-fort); background:var(--blanc);
  color:var(--encre); font-size:var(--t-m); font-weight:700; }
.entete-barre .bouton-menu:hover{ background:var(--creme-2); }
.entete-barre .bouton-menu[aria-expanded="true"]{ background:var(--indigo); color:var(--creme);
  border-color:var(--indigo); }
.entete-barre .bouton-menu[aria-expanded="true"] i{ background:transparent; }
.entete-barre .bouton-menu[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.entete-barre .bouton-menu[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }

/* Menu : TÉLÉPHONE d'abord (tiroir sous la barre). */
nav.site-nav{ display:none; position:absolute; left:0; right:0; top:100%;
  background:var(--blanc); border-bottom:1px solid var(--filet-fort);
  box-shadow:var(--ombre); padding:var(--e2) var(--e4) var(--e5);
  max-height:calc(100vh - var(--h-marque) - var(--h-barre) - 84px);
  max-height:calc(100dvh - var(--h-marque) - var(--h-barre) - 84px);   /* laisse la place de la barre « Appeler / WhatsApp » */
  overflow-y:auto; overscroll-behavior:contain; }
nav.site-nav[data-ouvert="oui"]{ display:block; }
/* Sans JavaScript (la classe .js n'est pas posée) : sur téléphone le menu
   s'affiche à plat sous le logo, au lieu de rester introuvable derrière un
   bouton qui ne réagit pas. */
@media (max-width:767px){
  html:not(.js) .entete-barre .bouton-menu{ display:none; }
  html:not(.js) nav.site-nav{ display:block; position:static; box-shadow:none; max-height:none; border-bottom:0; padding-bottom:var(--e3); }
  html:not(.js) .entete-barre .enveloppe{ flex-wrap:wrap; }
}
/* Tiroir ouvert : la pastille de l'assistant se retire, elle masquait le dernier lien. */
@media (max-width:767px){ header.site-entete:has(.bouton-menu[aria-expanded="true"]) ~ .conseiller{ display:none; } }
nav.site-nav a{ display:flex; align-items:center; min-height:48px; padding:0 4px;
  color:var(--encre); font-weight:600; font-size:17px; text-decoration:none;
  white-space:nowrap; border-bottom:1px solid var(--filet); }
nav.site-nav a:hover{ background:var(--creme-2); }
nav.site-nav a[aria-current]{ color:var(--indigo); font-weight:700;
  box-shadow:inset 3px 0 0 var(--bleu-marque); padding-left:12px; }
/* Sur téléphone les groupes sont TOUJOURS dépliés : un pouce atteint chaque
   page en UN seul geste. Le bouton de groupe est masqué (display:none le
   retire aussi des lecteurs d'écran : pas de faux bouton). */
nav.site-nav .groupe-bouton{ display:none; }
nav.site-nav .groupe-titre{ display:block; padding:14px 4px 2px; font-size:var(--t-xs);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-2); }
nav.site-nav .sous-menu a{ padding-left:16px; font-weight:500; }
nav.site-nav .sous-menu a[aria-current]{ padding-left:16px; font-weight:700; }
nav.site-nav a.nav-action{ justify-content:center; margin-top:var(--e4); min-height:52px;
  padding:0 18px; background:var(--action); color:var(--creme); font-weight:700;
  border:0; box-shadow:none; }
nav.site-nav a.nav-action:hover{ background:var(--bleu-marine); }

@media (min-width:768px){
  .entete-barre .bouton-menu{ display:none; }
  .entete-acces{ position:absolute; top:calc((var(--h-marque) - 44px) / 2);
    right:max(var(--e4), calc((100% - var(--max)) / 2 + var(--e4))); }
  nav.site-nav{ display:block; position:static; padding:0; background:none;
    border:0; box-shadow:none; max-height:none; overflow:visible; }
  nav.site-nav > ul{ display:flex; align-items:center; justify-content:center; gap:var(--e1); }
  nav.site-nav > ul > li{ position:relative; }
  nav.site-nav > ul > li > a,
  nav.site-nav .groupe-bouton{
    display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
    background:none; border:0; border-bottom:2px solid transparent; border-radius:0;
    font:inherit; font-size:15px; font-weight:600; color:var(--encre);
    white-space:nowrap; cursor:pointer; text-decoration:none; box-shadow:none; }
  nav.site-nav > ul > li > a:hover,
  nav.site-nav .groupe-bouton:hover,
  nav.site-nav .groupe-bouton[aria-expanded="true"]{
    background:none; color:var(--indigo); border-bottom-color:var(--filet-fort); }
  nav.site-nav > ul > li > a[aria-current],
  nav.site-nav .groupe-bouton[data-courant="oui"]{
    color:var(--indigo); font-weight:700; border-bottom-color:var(--bleu-marque);
    box-shadow:none; padding-left:14px; }
  nav.site-nav .groupe-titre{ display:none; }
  nav.site-nav .groupe-bouton{ display:inline-flex; }
  nav.site-nav .groupe-bouton svg{ width:12px; height:12px; flex:none; }
  nav.site-nav .groupe-bouton[aria-expanded="true"] svg{ transform:rotate(180deg); }
  nav.site-nav .sous-menu{ display:none; position:absolute; left:50%; top:100%;
    transform:translateX(-50%); min-width:236px; margin-top:6px; padding:6px;
    background:var(--blanc); border:1px solid var(--filet-fort);
    border-radius:var(--r); box-shadow:var(--ombre); z-index:2; }
  nav.site-nav .sous-menu::before{ content:""; position:absolute; left:0; right:0;
    top:-8px; height:8px; }
  nav.site-nav .groupe-bouton[aria-expanded="true"] + .sous-menu{ display:block; }
  nav.site-nav .sous-menu a{ min-height:44px; padding:0 14px; border:0; border-radius:var(--r-xs);
    font-size:15px; font-weight:500; }
  nav.site-nav .sous-menu a:hover{ background:var(--creme-2); }
  nav.site-nav .sous-menu a[aria-current]{ background:var(--tint-neutre); font-weight:700;
    box-shadow:none; padding-left:14px; }
  html:not(.js) nav.site-nav .groupe:hover > .sous-menu,
  html:not(.js) nav.site-nav .groupe:focus-within > .sous-menu{ display:block; }
  nav.site-nav > ul > li > a.nav-action{ margin:0 0 0 var(--e3); min-height:44px;
    padding:0 18px; border:0; background:var(--action); color:var(--creme);
    font-size:15px; font-weight:700; border-radius:var(--r-btn); }
  nav.site-nav > ul > li > a.nav-action:hover{ background:var(--bleu-marine); color:var(--creme); }
}
@media (prefers-reduced-motion:no-preference){
  nav.site-nav .groupe-bouton svg{ transition:transform .15s ease-out; }
}
@media (forced-colors:active){
  nav.site-nav a[aria-current]{ outline:2px solid CanvasText; }
}

/* ------------------------------------------------------- 4. MISE EN PAGE */
.section{ padding:var(--sec) 0; }
.section + .section{ padding-top:0; }          /* pas de double espace entre deux sections blanches */
.section-bas-7{ padding-bottom:var(--e7); }
[data-espace="public"] .interieur-haut-5{ padding-top:var(--e5); }
@media (min-width:768px){ [data-espace="public"] .interieur-haut-5{ padding-top:var(--e6); } }

.titre-section{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e3); flex-wrap:wrap; }
.titre-section h2{ font-size:clamp(23px,2.6vw,32px); line-height:1.15; }
.titre-section a{ font-size:var(--t-s); font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; }
.titre-section a:hover{ text-decoration:underline; text-underline-offset:3px; }
.titre-page{ font-size:clamp(28px,4.4vw,44px); line-height:1.08; letter-spacing:-.032em; font-weight:700; }
/* Le chapeau sous un titre : plus grand que le texte courant (dans un bloc
   ou une carte il garde la taille du texte). */
main .chapo{ font-size:17px; line-height:1.6; color:var(--encre-2); margin-top:var(--e3); max-width:64ch; }
@media (min-width:768px){ main .chapo{ font-size:19px; } }
main .bloc .chapo,main .encart .chapo,main .cat-encart .chapo,main .cat-carte .chapo{ font-size:var(--t-m); }
[data-espace="public"] .bloc{ box-shadow:none; border-color:var(--filet); padding:var(--e4); }
@media (min-width:768px){ [data-espace="public"] .bloc{ padding:var(--e5); } }
[data-espace="public"] .bloc-titre h2,
[data-espace="public"] .bloc-titre h3{ font-size:var(--t-xl); }
.cadre-double{ box-shadow:var(--ombre); border-color:var(--filet); }   /* l'anneau triple disparaît */
.bloc-accent{ text-align:center; background:var(--creme); border:1px solid var(--filet);
  padding:var(--e6) var(--e4); }
@media (min-width:768px){ .bloc-accent{ padding:var(--e7) var(--e5); } }
.bloc-accent h2{ font-size:clamp(23px,2.6vw,32px); }
.fil-ariane{ font-size:var(--t-s); font-weight:500; margin-bottom:var(--e4); }
.fil-ariane a{ color:var(--encre-2); text-decoration:none; }
.fil-ariane a:hover{ color:var(--indigo); text-decoration:underline; }
.fil-ariane li[aria-current]{ color:var(--encre); font-weight:600; }
.encart{ border:1px solid var(--filet); border-left:4px solid var(--filet-fort);
  background:var(--creme); border-radius:var(--r); padding:var(--e4) var(--e5) var(--e4) var(--e4); }
.encart-info{ background:var(--creme); border-color:var(--filet); border-left-color:var(--bleu-marque); }
.encart-attente{ background:var(--tint-ambre); border-color:var(--ambre); border-left-color:var(--ambre); }
.encart-alerte{ border-left-color:var(--rouge); }
.filtres + .etat-vide{ margin-top:var(--e5); }
.etat-vide{ border:1.5px dashed var(--filet-fort); border-radius:var(--r); padding:var(--e7) var(--e4); }
.etat-vide .pict{ border-radius:var(--r-s); width:52px; height:52px; }
.etat-vide-succes{ border-style:solid; border-color:var(--vert); background:var(--blanc); }
.etat-vide-succes .pict{ background:var(--tint-vert); color:var(--vert); }
/* Le message d'erreur général des formulaires : la classe .alerte n'était
   définie nulle part (ni base.css ni site.css) — le message s'affichait sans
   aucun style. Voir le rapport. */
.alerte{ padding:var(--e3) var(--e4); border-radius:var(--r-s); border:1px solid; font-weight:600; }
.alerte-rouge{ background:var(--tint-rouge); border-color:var(--rouge); color:#7A1A15; }

/* Plus d'air : les marges verticales des gabarits (marge-haut-3 à 6, définies
   dans base.css pour l'application, plus dense) sont relevées d'un cran sur
   le site public. */
@media (min-width:768px){
  [data-espace="public"] main .marge-haut-3{ margin-top:var(--e4); }
  [data-espace="public"] main .marge-haut-4{ margin-top:var(--e5); }
  [data-espace="public"] main .marge-haut-5{ margin-top:var(--e6); }
  [data-espace="public"] main .marge-haut-6{ margin-top:var(--e7); }
}
/* Lignes « intitulé — valeur » (agrément, tarifs) : l'intitulé à gauche, la
   valeur juste à côté, pas à l'autre bout de l'écran. */
[data-espace="public"] main .pile-serree .rangee-ecartee{ gap:var(--e1) var(--e5); padding:10px 0; border-bottom:1px solid var(--filet); align-items:baseline; }
[data-espace="public"] main .pile-serree .rangee-ecartee:last-child{ border-bottom:0; }
[data-espace="public"] main .pile-serree dt{ color:var(--encre-2); }
[data-espace="public"] main .pile-serree dd{ margin:0; font-weight:600; }
[data-espace="public"] main .pile-serree dd.montant{ margin-left:auto; text-align:right; }
@media (min-width:600px){
  /* Grand écran : l'intitulé à gauche, la valeur juste à côté (les montants
     restent alignés à droite). Sur téléphone : intitulé puis valeur, à la
     suite ; une valeur longue passe sous son intitulé. */
  [data-espace="public"] main .pile-serree .rangee-ecartee{ justify-content:flex-start; }
  [data-espace="public"] main .pile-serree dt{ flex:0 0 13rem; }
}

/* Cibles tactiles : un lien seul sur sa ligne (« Voir toutes les mentions
   légales », « TikTok — … », « Mentions légales » du pied) atteint 44 px de
   haut au doigt. Les liens à l'intérieur d'une phrase restent en ligne. */
@media (max-width:1024px){
  main p > a:only-child, .mentions a{ display:inline-flex; align-items:center; min-height:44px; }
  footer.site-pied li a{ min-width:44px; }
}

/* ------------------------------------------------------- 5. FORMULAIRES */
[data-espace="public"] input[type=text],
[data-espace="public"] input[type=tel],
[data-espace="public"] input[type=email],
[data-espace="public"] input[type=search],
[data-espace="public"] select,
[data-espace="public"] textarea{
  border-radius:var(--r-s); border-width:1.5px; background:var(--blanc); min-height:50px; }
[data-espace="public"] input:focus-visible,
[data-espace="public"] select:focus-visible,
[data-espace="public"] textarea:focus-visible{ outline:3px solid var(--terre); outline-offset:1px; border-color:var(--terre); }
[data-espace="public"] .champ > label,
[data-espace="public"] .champ > .etiquette{ font-weight:700; }
/* Le bloc de validation n'est plus collé en bas d'écran : sur le site public
   il rencontrait la barre « Appeler / WhatsApp » fixe (deux barres empilées
   = un tiers de l'écran perdu sur un téléphone). */
[data-espace="public"] .barre-validation{ position:static; background:none; border-top:0;
  margin:var(--e5) 0 0; padding:0; }
[data-espace="public"] .barre-validation .btn-principal{ flex:0 1 auto; min-width:220px; }
@media (max-width:599px){ [data-espace="public"] .barre-validation .btn-principal{ flex:1 1 100%; } }
.champ-piege{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.confier-form{ max-width:680px; }

/* --- Filtres de la liste des biens : UNE ligne sur ordinateur -------------- */
[data-espace="public"] .filtres{ background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--r); padding:var(--e4); box-shadow:none; }
[data-espace="public"] .filtres input,
[data-espace="public"] .filtres select{ min-height:50px; font-size:var(--t-m); }
[data-espace="public"] .filtres .champ > label,
[data-espace="public"] .filtres .champ > .etiquette{ font-size:var(--t-s); }
@media (min-width:1024px){
  [data-espace="public"] .filtres{ grid-template-columns:2fr 1fr auto; align-items:end; }
  [data-espace="public"] .filtres .pleine{ grid-column:auto; }
  [data-espace="public"] .filtres .champ:has(.pastilles){ grid-column:1/-1; grid-row:1; }
}
/* Les pastilles d'offre deviennent des onglets carrés à coins arrondis. */
[data-espace="public"] .pastilles{ gap:var(--e1); background:var(--creme-2); padding:var(--e1);
  border-radius:calc(var(--r-s) + 4px); width:fit-content; max-width:100%; flex-wrap:wrap; }
[data-espace="public"] .pastilles .pastille,
[data-espace="public"] .pastilles button{ border-radius:var(--r-s); border:0; background:transparent;
  color:var(--encre-2); min-height:44px; padding:10px 18px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; }
[data-espace="public"] .pastilles .pastille:hover{ color:var(--indigo); background:var(--blanc); }
[data-espace="public"] .pastilles .pastille[aria-current="page"]{ background:var(--indigo); color:var(--creme); }

/* Onglets (page d'aide) : mêmes coins que les boutons. */
[data-espace="public"] .onglets a,[data-espace="public"] .onglets button{ border-radius:var(--r-s); border-width:1px; border-color:var(--filet-fort); font-weight:600; }
[data-espace="public"] .onglets [aria-current="page"],[data-espace="public"] .onglets [aria-selected="true"]{ border-color:var(--chrome); }

/* Bulles d'aide « ? » (base.css) : positionnées à côté de l'icône, elles
   sortaient de l'écran sur téléphone (mesuré : bord droit à 451 px sur 375).
   Sur téléphone elles s'ouvrent en bandeau au bas de l'écran, au-dessus de la
   barre « Appeler / WhatsApp ». */
@media (max-width:599px){
  [data-espace="public"] .aide > .bulle{ position:fixed; left:var(--e4); right:var(--e4); width:auto; top:auto;
    bottom:calc(84px + env(safe-area-inset-bottom)); z-index:40; }
  [data-espace="public"] .aide > .bulle::before{ display:none; }
}

/* ------------------------------------------------------- 6. CARTES DE BIENS */
[data-espace="public"] .grille{ gap:var(--e4); }
@media (min-width:1024px){ [data-espace="public"] .grille{ gap:var(--e5); } }
/* Trois cartes seulement (Lensa Home) : trois colonnes, pas une case vide. */
@media (min-width:940px){ [data-espace="public"] .grille:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); } }
[data-espace="public"] .carte{ border:1px solid var(--filet); border-radius:var(--r);
  box-shadow:none; background:var(--blanc); }
[data-espace="public"] .carte:hover{ border-color:var(--bleu-marque); box-shadow:var(--ombre); }
@media (prefers-reduced-motion:no-preference){
  [data-espace="public"] .carte{ transition:box-shadow .18s ease-out, border-color .18s ease-out, transform .18s ease-out; }
  [data-espace="public"] .carte:hover{ transform:translateY(-2px); }
}
/* Emplacement photo : un cartouche pâle et un pictogramme de maison, plus les
   dégradés sombres multicolores (v1…v6). En production la photo remplace tout
   cela ; ceci ne s'affiche que faute de photo. */
[data-espace="public"] .carte .visuel{ border-radius:0; aspect-ratio:4/3; }
[data-espace="public"] .carte .visuel.v1,[data-espace="public"] .carte .visuel.v2,
[data-espace="public"] .carte .visuel.v3,[data-espace="public"] .carte .visuel.v4,
[data-espace="public"] .carte .visuel.v5,[data-espace="public"] .carte .visuel.v6{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2346536E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22 24 8l18 14'/%3E%3Cpath d='M11 19.5V40h26V19.5'/%3E%3Cpath d='M20 40V29h8v11'/%3E%3C/svg%3E") center 36% / 44px no-repeat,
    linear-gradient(160deg,var(--creme-2),var(--tint-neutre)) !important; }
[data-espace="public"] .carte .visuel span{ color:var(--encre); text-shadow:none; font-weight:600;
  font-size:var(--t-s); margin-top:76px; }
@media (max-width:599px){ [data-espace="public"] .carte .visuel{ aspect-ratio:16/10; }
  [data-espace="public"] .carte .visuel span{ margin-top:64px; } }
/* La pastille « Emplacement photo » (jargon de maquette) n'est plus affichée :
   un visiteur qui tombe sur un bien sans photo ne doit pas lire une consigne
   interne. Le pictogramme de maison et le nom du bien suffisent. */
[data-espace="public"] .carte .visuel::after{ content:none; }
.carte .visuel.avec-photo, .carte .visuel.visuel-photo{ background:none; }
.carte .visuel.avec-photo::after, .carte .visuel.visuel-photo::after{ content:none; }
.carte .visuel.avec-photo{ display:block; }
.carte .visuel.avec-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carte .visuel.visuel-photo{ display:block; padding:0; overflow:hidden; }
.carte .visuel.visuel-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@media (prefers-reduced-motion:no-preference){
  .carte .visuel img{ transition:transform .35s ease-out; }
  .carte:hover .visuel img{ transform:scale(1.03); }
}
[data-espace="public"] .carte .etiquette{ top:12px; left:12px; border-radius:var(--r-xs); padding:5px 10px;
  font-size:12.5px; font-weight:700; background:var(--blanc); color:var(--indigo); }
/* « Type d'offre » : la même classe .etiquette sert aussi d'intitulé de champ
   dans les filtres — sans cette remise à zéro l'intitulé était positionné
   comme un badge de carte (voir le rapport). */
[data-espace="public"] .champ > .etiquette{ position:static; padding:0; background:none; color:var(--encre); font-size:var(--t-s); font-weight:700; border-radius:0; }
.carte .etiquette-loc{ background:var(--terre-cuite); color:#FFF; }
.carte .etiquette-loue,.etiquette-loue{ background:var(--encre-2); color:#FFF; }
[data-espace="public"] .carte .corps{ padding:var(--e4); gap:6px; }
[data-espace="public"] .carte h3{ font-size:var(--t-l); font-weight:700; line-height:1.25; }
[data-espace="public"] .lieu{ font-size:var(--t-s); font-weight:600; color:var(--encre-2); }
.carte .montant.texte-vert,
.bien-detail-enveloppe .montant.texte-vert{ color:var(--terre-cuite); }
[data-espace="public"] .carte .montant{ font-size:var(--t-l); font-weight:700; }
[data-espace="public"] .caracs li{ border-radius:var(--r-xs); background:var(--creme-2); font-weight:600; padding:4px 10px; }
.carte-reference{ opacity:.85; }
.carte-reference .montant{ color:var(--encre-2); }
.section-references{ border-top:1px solid var(--filet); padding-top:var(--e6); }
a.lien-carte{ text-decoration:none; }

/* ------------------------------------------------------- 7. ACCUEIL */

/* 7a. Accroche — CLAIRE : le titre en bleu marine sur fond blanc, la photo de
   l'agence à droite qui se fond dans le blanc. (La version bleue d'avant est
   conservée sous html[data-accroche="bleue"] pour la comparaison — voir
   la fin du fichier.) */
.accroche{ position:relative; isolation:isolate; overflow:hidden; background:var(--blanc);
  color:var(--encre); padding:var(--e6) 0 var(--e5); display:flex; flex-direction:column; }
.accroche h1{ font-size:clamp(30px,5.2vw,52px); line-height:1.06; letter-spacing:-.034em;
  color:var(--bleu-marine); font-weight:700; text-wrap:balance; }
.accroche h1 em{ font-style:normal; color:var(--bleu-marque); }
.accroche .sous{ margin-top:var(--e4); max-width:46ch; font-size:var(--t-l); color:var(--encre-2); line-height:1.55; }
.accroche .rassurance{ margin-top:var(--e4); display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5);
  font-size:var(--t-s); font-weight:600; color:var(--encre); }
.accroche .rassurance li::before{ content:"✓ "; color:var(--bleu-marque); font-weight:800; }
.accroche .enveloppe{ position:relative; z-index:1; }
.accroche-fond{ order:2; display:block; margin:var(--e5) var(--e4) 0; height:150px;
  border-radius:var(--r); overflow:hidden; }
.accroche-fond img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.accroche-lion{ display:none; }
.recherche{ margin-top:var(--e5); background:var(--blanc); border:1px solid var(--filet-fort);
  border-radius:var(--r); padding:var(--e4); display:grid; gap:var(--e3);
  box-shadow:var(--ombre); }
.recherche .champ > label{ font-size:var(--t-s); }
.recherche .champ select,.recherche .champ input{ min-height:52px; background:var(--blanc); font-weight:500; }
.accroche .rangee-actions{ margin-top:var(--e4); }
.accroche .rangee-actions .btn-sur-chrome{ background:var(--blanc); color:var(--indigo); border-color:var(--filet-fort); }
.accroche .rangee-actions .btn-sur-chrome:hover{ background:var(--creme-2); border-color:var(--indigo); }
@media (min-width:600px){
  .recherche{ grid-template-columns:1fr 1fr; align-items:end; }
  .recherche .pleine{ grid-column:auto; }
  .recherche .btn-bloc{ grid-column:1/-1; }
}
@media (min-width:940px){
  /* La photo occupe la droite ; la colonne de texte est TOUJOURS plus étroite
     que l'espace laissé à gauche de la photo : aucun texte ne passe jamais sur
     l'image (le contraste se mesure alors sur du blanc pur — voir le rapport).
     Le voile ne sert qu'à adoucir le bord de la photo. */
  .accroche{ --photo:clamp(340px,42vw,620px); padding:var(--e7) 0 var(--e7); min-height:600px; justify-content:center; }
  .accroche h1{ font-size:clamp(36px,4vw,54px); }
  .accroche .enveloppe > *{ max-width:min(640px, calc(100vw - var(--photo) - 68px)); }
  .accroche-fond{ position:absolute; z-index:-1; top:0; right:0; bottom:0; margin:0; height:auto; width:var(--photo); border-radius:0; }
  .accroche-fond::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,var(--blanc) 0%,rgba(255,255,255,0) 38%); }
  .accroche-fond img{ object-position:center 40%; }
  .accroche-lion{ display:block; position:absolute; z-index:0; right:max(2vw, calc((100% - var(--max)) / 2 + 24px));
    bottom:0; height:min(78%,460px); width:auto; pointer-events:none; user-select:none;
    filter:drop-shadow(0 14px 22px rgba(16,26,46,.28)); }
}
@media (max-width:939px){ .accroche-fond{ margin-inline:var(--e4); } }

/* 7b. Bande de confiance : agrément en premier, sans cadre. */
.confiance{ padding:var(--e5) 0; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);
  background:var(--blanc); }
.confiance-liste{ display:grid; grid-template-columns:1fr; gap:var(--e4) var(--e3); }
@media (min-width:600px){ .confiance-liste{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.confiance-item{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.confiance-item b,.confiance-item span{ overflow-wrap:anywhere; }
.confiance-item .pict{ flex:none; width:40px; height:40px; border-radius:var(--r-s);
  background:var(--tint-neutre); color:var(--indigo); display:grid; place-items:center; }
.confiance-item .pict svg{ width:20px; height:20px; }
.confiance-item b{ display:block; font-size:var(--t-s); line-height:1.3; font-weight:700; }
.confiance-item span{ display:block; font-size:var(--t-xs); color:var(--encre-2); margin-top:2px; line-height:1.45; }
.pict-embleme{ flex:none; width:48px; height:auto; display:block; margin-top:-4px; }
.a-confirmer{ display:inline-flex; align-items:center; gap:5px; margin-top:2px; padding:2px 9px;
  border-radius:var(--r-xs); background:var(--tint-ambre); color:var(--ambre);
  font-size:11px; font-weight:700; letter-spacing:.02em; }
.a-confirmer::before{ content:"○"; }
@media (min-width:768px){ .confiance{ padding:var(--e6) 0; } }
@media (min-width:940px){ .confiance-liste{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e5); } }

/* 7c. La photo de l'agence. */
.photo-agence{ width:100%; height:auto; display:block; border-radius:var(--r); }
.bloc.sans-retrait{ padding:0; border:0; background:none; }
@media (min-width:900px){
  /* Photo à gauche, adresse et bouton à droite : la photo ne prend plus
     toute la largeur de la page (elle faisait 500 px de haut). */
  .bloc.sans-retrait{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--e6); align-items:center; }
  .bloc.sans-retrait > .rangee-ecartee{ display:grid; gap:var(--e4); justify-items:start; margin-top:0; }
  .bloc.sans-retrait .texte-fort{ font-size:clamp(23px,2.6vw,32px); line-height:1.15; letter-spacing:-.025em; font-weight:700; }
  .bloc.sans-retrait .minuscule{ font-size:var(--t-m); line-height:1.6; }
}

/* 7d. Par quartier : des tuiles pâles. */
.quartiers{ padding:var(--e5) 0 var(--sec); }
.rangee{ display:flex; gap:var(--e3); overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
.rangee::-webkit-scrollbar{ height:6px; }
.rangee::-webkit-scrollbar-thumb{ background:var(--filet-fort); border-radius:6px; }
.quartier{ flex:0 0 150px; text-decoration:none; color:var(--encre); background:var(--blanc);
  border:1px solid var(--filet); border-radius:var(--r); padding:var(--e3); display:grid; gap:var(--e2);
  align-content:start; }
.quartier:hover{ border-color:var(--bleu-marque); box-shadow:var(--ombre); }
.quartier .vignette{ height:56px; border-radius:var(--r-s); }
.quartier b{ font-size:var(--t-m); display:block; font-weight:700; }
.quartier span{ font-size:var(--t-s); color:var(--encre-2); }
/* Six teintes du MÊME bleu (mélanges du bleu de marque avec du blanc), au
   lieu de six dégradés sombres de couleurs différentes. */
.q1,.q2,.q3,.q4,.q5,.q6{ background:var(--tint-neutre); }
.q2{ background:color-mix(in srgb,var(--bleu-marque) 16%,#fff); }
.q3{ background:color-mix(in srgb,var(--bleu-marque) 24%,#fff); }
.q4{ background:color-mix(in srgb,var(--bleu-marque) 12%,#fff); }
.q5{ background:color-mix(in srgb,var(--bleu-marque) 20%,#fff); }
.q6{ background:color-mix(in srgb,var(--bleu-marque) 28%,#fff); }
@media (min-width:940px){ .rangee{ overflow:visible; display:grid; grid-template-columns:repeat(6,1fr); }
  .quartier{ flex-basis:auto; } }

/* 7e. Sections teintées (ex-« motif » bleu dégradé). */
[data-espace="public"] .section.motif,
[data-espace="public"] .section.motif.reassurance{
  background:var(--creme); background-image:none; color:var(--encre);
  border-top:1px solid var(--filet); border-bottom:1px solid var(--filet); }
[data-espace="public"] .section.motif.reassurance{ background:var(--blanc); border-top:0; }
.section.motif + .section:not(.motif){ padding-top:var(--sec); }
.section.motif{ padding:var(--sec) 0; }
.section.motif + .section.motif{ padding-top:var(--sec); }
.reassurance .chapo{ color:var(--encre-2); }

/* 7f. Les métiers du groupe : six cartes, le logo en cachet. */
.metiers .enveloppe{ position:relative; }
.metiers .titre-section h2,.metiers .chapo{ padding-right:96px; }
.metiers .chapo{ color:var(--encre-2); max-width:56ch; }
.bandeau-metiers{ margin-top:var(--e5); display:grid; grid-template-columns:1fr; gap:var(--e3); }
.colonnes-metiers{ display:contents; }
.metier{ display:grid; gap:8px; justify-items:start; text-align:left; align-content:start;
  background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e4); }
.metier-pict{ position:relative; width:48px; height:48px; flex:none; display:grid; place-items:center;
  color:var(--bleu-marine); background:var(--tint-neutre); border-radius:var(--r-s); margin-bottom:var(--e1); }
.metier-pict::before,.metier-pict::after{ content:none; }
.metier-pict svg{ position:relative; width:28px; height:28px; }
.metier b{ font-size:var(--t-m); font-weight:700; line-height:1.3; text-transform:none; letter-spacing:-.01em; color:var(--encre); }
.metier-detail{ font-size:var(--t-s); line-height:1.6; color:var(--encre-2); max-width:none;
  text-transform:none; letter-spacing:0; font-weight:400; }
.metier-detail strong{ color:var(--encre); font-weight:700; }
.metier-dispo{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--e1); padding:4px 10px;
  border-radius:var(--r-xs); background:var(--tint-vert); color:var(--vert);
  font-size:12px; font-weight:700; letter-spacing:.01em; text-transform:none; }
.metier-dispo::before{ content:"✓"; font-weight:800; }
.logo-central{ position:absolute; top:0; right:var(--e4); }
.logo-central img{ width:72px; height:auto; }
.metiers-note{ margin-top:var(--e5); font-size:var(--t-s); color:var(--encre-2); max-width:70ch; }
.metiers-note a{ color:var(--indigo); font-weight:700; }
@media (min-width:640px){ .bandeau-metiers{ grid-template-columns:repeat(2,1fr); }
  .logo-central{ right:var(--e5); } .logo-central img{ width:86px; } }
@media (min-width:940px){ .bandeau-metiers{ grid-template-columns:repeat(3,1fr); gap:var(--e4); }
  .logo-central{ right:var(--e5); }
  .metier{ padding:var(--e5); } }

/* 7g. Pourquoi nous confier votre bien : quatre repères. */
.preuves{ display:grid; gap:var(--e3); grid-template-columns:1fr; margin-top:var(--e5); }
.preuve{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e4) var(--e4) var(--e5); }
.preuve h3{ font-size:var(--t-l); margin-bottom:6px; }
.preuve p{ font-size:var(--t-s); color:var(--encre-2); line-height:1.6; }
.preuve .pict{ width:44px; height:44px; border-radius:var(--r-s); background:var(--tint-neutre); color:var(--indigo);
  display:grid; place-items:center; font-size:20px; margin-bottom:var(--e3); }
@media (min-width:600px){ .preuves{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .preuves{ grid-template-columns:repeat(4,1fr); } }

/* 7h. Ailleurs / Avec nous. */
.comparatif{ display:grid; gap:var(--e3); margin-top:var(--e5); }
.colonne-comparatif{ border-radius:var(--r); padding:var(--e4) var(--e5); border:1px solid var(--filet); background:var(--creme); }
.colonne-comparatif h3{ font-size:var(--t-l); margin-bottom:var(--e3); }
.colonne-comparatif li{ display:flex; gap:var(--e3); font-size:var(--t-m); padding:10px 0; border-bottom:1px solid var(--filet); }
.colonne-comparatif li:last-child{ border-bottom:0; }
.colonne-avant li::before{ content:"✕"; color:var(--rouge); font-weight:800; }
.colonne-apres{ background:var(--blanc); border:1.5px solid var(--bleu-marque); }
.colonne-apres li::before{ content:"✓"; color:var(--vert); font-weight:800; }
@media (min-width:768px){ .comparatif{ grid-template-columns:repeat(2,1fr); gap:var(--e4); } }

/* 7i. Comment ça marche. */
.etapes{ display:grid; gap:var(--e3); counter-reset:pas; margin-top:var(--e5); }
.etape{ position:relative; background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r);
  padding:var(--e4) var(--e4) var(--e4) 64px; }
.etape::before{ counter-increment:pas; content:counter(pas); position:absolute; left:var(--e4); top:var(--e4);
  width:32px; height:32px; border-radius:var(--r-s); background:var(--terre); color:var(--creme);
  display:grid; place-items:center; font-weight:700; }
.etape:nth-child(even)::before{ background:var(--orange); color:var(--orange-texte); }
.etape h3{ font-size:var(--t-m); font-weight:700; }
.etape p{ font-size:var(--t-s); color:var(--encre-2); margin-top:var(--e1); line-height:1.6; }
@media (min-width:600px){ .etapes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .etapes{ grid-template-columns:repeat(4,1fr); gap:var(--e4); } }

/* 7j. Vos revenus, à jour en permanence. */
.suivi{ display:grid; gap:var(--e6); align-items:center; }
.suivi-texte h2{ max-width:20ch; font-size:clamp(23px,2.8vw,34px); }
.suivi-texte .chapo{ max-width:48ch; }
.suivi-liste{ margin-top:var(--e5); display:grid; gap:12px; }
.suivi-liste li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t-m); font-weight:500; }
.suivi-liste li::before{ content:"✓"; flex:none; width:24px; height:24px; border-radius:var(--r-xs);
  background:var(--tint-vert); color:var(--vert); font-size:13px; font-weight:800; display:grid; place-items:center; }
.suivi-ecran{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r-hero);
  padding:var(--e5); max-width:400px; margin-inline:auto; box-shadow:var(--ombre); }
.suivi-ecran-tete span{ font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-2); }
.suivi-montant{ margin-top:6px; font-size:34px; font-weight:700; color:var(--vert); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.suivi-montant small{ display:block; font-size:var(--t-s); font-weight:600; color:var(--encre-2); margin-top:2px; letter-spacing:0; }
.suivi-lignes{ margin-top:var(--e4); display:grid; gap:8px; }
.suivi-ligne{ display:flex; justify-content:space-between; gap:var(--e2); padding:10px 12px; border-radius:var(--r-s);
  background:var(--creme); font-size:var(--t-s); font-weight:600; }
.suivi-ligne .montant{ font-variant-numeric:tabular-nums; }
.suivi-note{ margin-top:var(--e3); font-size:var(--t-xs); color:var(--encre-2); text-align:center; }
@media (min-width:940px){ .suivi{ grid-template-columns:1.1fr .9fr; } .suivi-ecran{ margin-inline:0 0; justify-self:end; } }

/* 7k. La parole du catalogue (bloc orange) : un cadre blanc, un filet orange.
   (Fond blanc et non teinté : l'image de la mascotte porte des pixels blancs
   opaques qui dessinaient un rectangle visible sur tout fond coloré.) */
.parole{ background:var(--blanc); color:var(--bleu-marine); border:1px solid var(--filet); border-left:4px solid var(--orange);
  border-radius:var(--r); padding:var(--e5); display:grid; gap:var(--e3); align-items:end; overflow:hidden; }
.parole-texte{ font-size:clamp(19px,2.2vw,24px); font-weight:700; line-height:1.4; max-width:36ch; margin:0; letter-spacing:-.015em; }
.parole-source{ margin-top:var(--e2); font-size:var(--t-s); font-weight:600; color:var(--encre-2); }
.parole-filet{ width:56px; height:3px; background:var(--orange); margin-top:var(--e4); border-radius:2px; }
.parole-mascotte{ width:170px; max-width:44vw; height:auto; display:block; justify-self:end; margin-bottom:calc(-1 * var(--e5)); }
@media (min-width:700px){ .parole{ grid-template-columns:1fr auto; padding:var(--e6) var(--e6) 0; }
  .parole > div{ padding-bottom:var(--e6); } .parole-mascotte{ width:210px; margin-bottom:0; } }
@media (max-width:699px){ .parole{ padding-bottom:0; } .parole-mascotte{ margin-bottom:0; width:140px; } }

/* 7l. « Parlons de votre projet » : le SEUL aplat bleu de la page. C'est la
   dernière page de la plaquette (bleu MESURÉ sur le catalogue, --bleu-fond). */
.contact-projet{ padding:var(--sec) 0; }
.contact-projet > .enveloppe{ background:var(--bleu-fond); color:var(--creme); border-radius:var(--r-hero);
  padding:var(--e6) var(--e5); width:calc(100% - 2 * var(--e4)); max-width:calc(var(--max) - 2 * var(--e4)); }
@media (min-width:768px){ .contact-projet > .enveloppe{ padding:var(--e7); width:calc(100% - 2 * var(--e5)); max-width:calc(var(--max) - 2 * var(--e5)); } }
.contact-projet h2,.contact-projet .chapo{ color:inherit; }
.contact-projet h2{ font-size:clamp(25px,3vw,36px); }
.contact-projet .chapo{ max-width:56ch; color:#DCE6F5; }
.contact-colonnes{ display:grid; gap:var(--e4); grid-template-columns:1fr; }
@media (min-width:700px){ .contact-colonnes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.contact-etiquette{ text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:700; color:var(--bleu-cadre); margin-bottom:6px; }
.contact-valeur{ margin:0 0 4px; line-height:1.5; }
.contact-valeur a{ color:var(--creme); text-decoration:none; border-bottom:1px solid rgba(245,248,252,.45);
  display:inline-flex; align-items:center; min-height:44px; margin-block:-6px; }
.contact-valeur a:hover{ border-bottom-color:var(--creme); }
.contact-projet .rangee-actions{ justify-content:flex-start; margin-top:var(--e5); }
.contact-projet .btn-principal{ background:var(--blanc); color:var(--bleu-marine); }
.contact-projet .btn-principal:hover{ background:var(--creme-2); }
.contact-projet .btn-second{ background:transparent; color:var(--creme); border-color:rgba(245,248,252,.6); }
.contact-projet .btn-second:hover{ background:rgba(245,248,252,.12); border-color:#fff; }

/* ------------------------------------------------- 8. FICHE D'UN BIEN */
.bien-detail-enveloppe{ padding-block:var(--e5) var(--e7); }
.fiche-detail{ display:grid; gap:var(--e5); }
.fiche-detail .carte{ border-radius:var(--r); }
.fiche-detail > div > .carte .visuel{ aspect-ratio:16/10; }
.fiche-detail .montant-vedette{ font-size:clamp(26px,3.4vw,34px); font-weight:700; color:var(--terre-cuite); letter-spacing:-.03em; }
.fiche-detail h1.titre-page{ font-size:clamp(26px,3.6vw,38px); }
.fiche-detail ul.caracs{ margin-top:var(--e3); padding-top:0; }
.fiche-detail ul.caracs li{ font-size:var(--t-s); padding:6px 12px; }
.galerie-bien{ display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.galerie-bien img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-s); display:block; }
.galerie-vignette{ display:block; border-radius:var(--r-s); overflow:hidden; border:2px solid transparent; min-height:44px; cursor:pointer; }
.galerie-vignette:hover{ border-color:var(--bleu-marque); }
.galerie-vignette.est-active{ border-color:var(--bleu-marine); }
.galerie-vignette.est-active img{ opacity:.72; }
@media (prefers-reduced-motion:no-preference){ .galerie-vignette{ transition:border-color .12s ease; } }
@media (max-width:599px){
  .galerie-bien{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-inline:var(--e3); margin-inline:calc(-1 * var(--e3)); scrollbar-width:none; }
  .galerie-bien::-webkit-scrollbar{ display:none; }
  .galerie-vignette{ flex:0 0 68%; scroll-snap-align:center; } }
.video-bien{ width:100%; height:auto; display:block; border-radius:var(--r); background:#000; max-height:70vh; }
.visite-3d{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e2);
  min-height:min(56vw,380px); padding:var(--e4); overflow:hidden; border-radius:var(--r); background-color:var(--bleu-marine); text-align:center; }
.visite-3d-fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.visite-3d::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(18,48,78,.8); }
.visite-3d > :not(.visite-3d-fond){ position:relative; z-index:2; }
.visite-3d-mention{ color:#E6EFF7; max-width:34ch; }
.visite-3d.est-lancee{ padding:0; background-image:none; }
.visite-3d.est-lancee::before{ display:none; }
.visite-3d-cadre{ width:100%; height:min(56vw,380px); border:0; display:block; }
.total-lignes{ border-radius:var(--r-s); background:var(--terre-cuite-pale); }
.total-lignes .montant{ color:var(--terre-cuite); }
/* Deux colonnes dès 960 px : photos, description et détail à gauche ; le bloc
   « Intéressé par ce bien ? » à droite, qui SUIT la lecture (position:sticky,
   sous la barre de menu) — le visiteur a toujours le bouton d'appel sous la
   main. Aucune ligne de HTML ne change : `.marge-haut-5` devient transparent
   (display:contents) et l'encart final passe dans la colonne de droite. Sur
   téléphone tout reste en une colonne, et la barre fixe « Appeler /
   WhatsApp » assure le contact. */
@media (min-width:960px){
  .fiche-detail > div{ display:grid; grid-template-columns:minmax(0,1fr) 360px; column-gap:var(--e6); align-items:start; }
  .fiche-detail > div > *{ grid-column:1; min-width:0; }
  .fiche-detail > div > div.marge-haut-5{ display:contents; }
  .fiche-detail > div > div.marge-haut-5 > *{ grid-column:1; min-width:0; }
  .fiche-detail > div > div.marge-haut-5 > .lieu{ margin-top:var(--e6); }
  .fiche-detail > div > div.marge-haut-5 > .encart:last-child{
    grid-column:2; grid-row:1 / span 30; position:sticky; top:calc(var(--h-barre) + var(--e4)); margin-top:0;
    background:var(--blanc); border:1px solid var(--filet-fort); border-left-width:1px; box-shadow:var(--ombre); padding:var(--e5); }
  .fiche-detail > div > div.marge-haut-5 > .encart:last-child .rangee-actions{ flex-direction:column; align-items:stretch; }
  .fiche-detail > div > div.marge-haut-5 > .encart:last-child .btn{ width:100%; }
}

/* ------------------------------------------------- 9. LENSA HOME */
.galerie-meuble{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e2); }
.galerie-meuble a{ display:block; position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--r); border:1px solid var(--filet); }
.galerie-meuble a:first-child{ grid-column:1/-1; aspect-ratio:4/3; }
.galerie-meuble img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:no-preference){
  .galerie-meuble img{ transition:transform .25s ease-out; }
  .galerie-meuble a:hover img{ transform:scale(1.03); } }
/* Ordinateur : des rangées de hauteur FIXE. Avant, la hauteur suivait la
   photo verticale du premier cliché et la mosaïque montait à 650 px. */
@media (min-width:768px){
  .galerie-meuble{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(140px,17vw,220px); }
  .galerie-meuble a,.galerie-meuble a:first-child{ aspect-ratio:auto; }
  .galerie-meuble a:first-child{ grid-column:1/3; grid-row:1/3; } }
/* Fiche d'un logement : la colonne de droite (« Ce logement vous
   intéresse ? ») suit la lecture, comme sur la fiche d'un bien. */
@media (min-width:960px){
  .enveloppe > div.marge-haut-5:has(> h1.titre-page){ display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:var(--e6); align-items:start; }
  .enveloppe > div.marge-haut-5:has(> h1.titre-page) > *{ grid-column:1; min-width:0; }
  .enveloppe > div.marge-haut-5:has(> h1.titre-page) > .encart:last-child{ grid-column:2; grid-row:1 / span 30; position:sticky;
    top:calc(var(--h-barre) + var(--e4)); margin-top:0; background:var(--blanc); border:1px solid var(--filet-fort); box-shadow:var(--ombre); padding:var(--e5); }
  .enveloppe > div.marge-haut-5:has(> h1.titre-page) > .encart:last-child .rangee-actions{ flex-direction:column; align-items:stretch; }
  .enveloppe > div.marge-haut-5:has(> h1.titre-page) > .encart:last-child .btn{ width:100%; }
}
.tarifs-note{ font-size:var(--t-s); color:var(--encre-2); margin-top:var(--e3); }
.liste-equipements{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:var(--e3); }
.liste-equipements li{ display:flex; align-items:flex-start; gap:12px; font-size:var(--t-m); }
.liste-equipements li::before{ content:"✓"; flex:none; width:24px; height:24px; margin-top:0; border-radius:var(--r-xs);
  background:var(--tint-neutre); color:var(--indigo); font-size:13px; font-weight:800; display:grid; place-items:center; }
@media (min-width:600px){ .liste-equipements{ grid-template-columns:1fr 1fr; } }
.wave-numeros{ display:grid; gap:var(--e2); margin-top:var(--e4); }
@media (min-width:600px){ .wave-numeros{ grid-template-columns:1fr 1fr; } }
.wave-numero{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); padding:12px 14px;
  background:var(--blanc); border:1px solid var(--filet-fort); border-radius:var(--r-s); }
.wave-numero .valeur{ font-family:var(--pile-chiffres); font-weight:700; font-size:var(--t-l); letter-spacing:.01em; }
.wave-circuit{ counter-reset:etape-wave; display:grid; gap:var(--e3); margin-top:var(--e4); }
.wave-circuit li{ position:relative; padding-left:40px; font-size:var(--t-m); }
.wave-circuit li::before{ counter-increment:etape-wave; content:counter(etape-wave); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:var(--r-s); background:var(--indigo); color:var(--creme); font-size:14px; font-weight:700;
  display:grid; place-items:center; }
.encart-localisation{ display:flex; align-items:flex-start; gap:12px; }
.encart-localisation .pict{ flex:none; width:40px; height:40px; border-radius:var(--r-s); background:var(--tint-neutre); color:var(--indigo);
  display:grid; place-items:center; font-size:18px; }
.autres-logements{ display:grid; gap:var(--e4); grid-template-columns:1fr; margin-top:var(--e4); }
@media (min-width:600px){ .autres-logements{ grid-template-columns:1fr 1fr; } }
.cartes-paiement{ display:flex; flex-wrap:wrap; gap:var(--e5); align-items:flex-start; }
.carte-paiement{ margin:0; flex:1 1 240px; max-width:340px; }
.carte-paiement img{ width:100%; height:auto; display:block; border-radius:var(--r); border:1px solid var(--filet); }
.carte-paiement figcaption{ margin-top:var(--e2); text-align:center; color:var(--encre-2); }
@media (max-width:480px){ .carte-paiement{ flex:1 1 100%; max-width:none; } }
[data-espace="public"] .tableau-defile{ border:1px solid var(--filet); border-radius:var(--r); }
[data-espace="public"] .tableau thead th{ background:var(--creme); border-bottom:1px solid var(--filet-fort); font-weight:700; }
[data-espace="public"] .tableau tbody td{ border-bottom-color:var(--filet); }
@media (min-width:768px){ [data-espace="public"] .tableau thead th:not(:first-child){ text-align:right; } }
@media (max-width:767px){
  [data-espace="public"] .tableau tr{ border:1px solid var(--filet); border-radius:var(--r); } }

/* ------------------------------------------------- 10. QUI SOMMES-NOUS (catalogue) */
.cat-surtitre{ display:flex; align-items:center; gap:.6rem; margin:0; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bleu-marque); }
.cat-carre{ width:.55rem; height:.55rem; background:var(--bleu-marine); flex:0 0 auto; display:block; border-radius:2px; }
.cat-titre{ margin:var(--e3) 0; font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:400; color:var(--bleu-marque); line-height:1.15; letter-spacing:-.03em; }
.cat-titre b{ font-weight:700; color:var(--bleu-marine); }
.cat-deux{ display:grid; gap:var(--e4); grid-template-columns:1fr; }
@media (min-width:760px){ .cat-deux{ grid-template-columns:1fr 1fr; gap:var(--e5); } }
.cat-encart{ background:var(--blanc); border:1px solid var(--filet); border-left:4px solid var(--bleu-marine); border-radius:var(--r); padding:var(--e5); }
.cat-encart h2{ margin:0 0 var(--e2); font-size:var(--t-xl); color:var(--bleu-marine); }
.cat-encart p{ margin:0; color:var(--encre-2); line-height:1.65; }
.cat-cartes{ display:grid; gap:var(--e3); grid-template-columns:1fr; }
@media (min-width:640px){ .cat-cartes{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .cat-cartes{ grid-template-columns:repeat(3,1fr); gap:var(--e4); } }
.cat-carte{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); min-width:0; }
.cat-carte-active{ border-color:var(--bleu-marque); box-shadow:inset 0 0 0 1px var(--bleu-marque); }
.cat-pastille{ display:inline-block; background:var(--bleu-marine); color:#fff; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.25rem .65rem; border-radius:var(--r-xs); }
.cat-carte h3{ margin:var(--e3) 0 var(--e2); font-size:var(--t-l); color:var(--encre); }
.cat-carte p{ margin:0; color:var(--encre-2); font-size:var(--t-m); line-height:1.6; }
.cat-carte .metier-dispo{ margin-top:var(--e3); }
.cat-etapes{ list-style:none; margin:0; padding:0; }
.cat-etapes li{ display:flex; gap:var(--e4); align-items:flex-start; position:relative; padding-bottom:var(--e5); }
.cat-etapes li::before{ content:""; position:absolute; left:1.15rem; top:2.7rem; bottom:.4rem; width:1px; background:var(--filet-fort); }
.cat-etapes li:last-child{ padding-bottom:0; }
.cat-etapes li:last-child::before{ display:none; }
.cat-numero{ flex:0 0 auto; width:2.3rem; height:2.3rem; border-radius:var(--r-s); background:var(--bleu-marine); color:#fff;
  font-weight:700; font-size:var(--t-s); display:grid; place-items:center; position:relative; z-index:1; }
.cat-etapes h3{ margin:.2rem 0 var(--e2); font-size:var(--t-l); color:var(--bleu-marine); }
.cat-etapes p{ margin:0; color:var(--encre-2); line-height:1.65; }
.cat-clienteles{ display:grid; gap:0; margin:0; }
.cat-clienteles > div{ padding:var(--e3) 0; border-bottom:1px solid var(--filet); }
.cat-clienteles > div:first-child{ padding-top:0; }
.cat-clienteles dt{ margin:0 0 2px; font-weight:700; color:var(--bleu-marine); }
.cat-clienteles dd{ margin:0; color:var(--encre-2); }
.cat-preuve{ background:var(--creme); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); }
@media (min-width:768px){ .cat-preuve{ padding:var(--e6); } }
.cat-preuve h2{ margin:0 0 var(--e3); font-size:var(--t-xl); color:var(--bleu-marine); }
.cat-preuve p{ margin:0 0 var(--e3); line-height:1.65; max-width:78ch; }
.cat-preuve p:last-child{ margin-bottom:0; }
.cat-preuve-sous{ margin:var(--e5) 0 var(--e3); font-size:var(--t-l); color:var(--bleu-marine); }
.cat-catalogue{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e5); background:var(--creme); border:1px solid var(--filet); border-radius:var(--r-hero); color:var(--encre); }
@media (min-width:768px){ .cat-catalogue{ padding:var(--e6); } }
.cat-catalogue h2{ margin:0 0 var(--e2); font-size:var(--t-xl); color:var(--bleu-marine); }
.cat-catalogue p{ margin:0; color:var(--encre-2); }
.cat-catalogue-action{ flex:0 0 auto; text-align:center; }
.cat-catalogue-action .minuscule{ margin-top:var(--e2); color:var(--encre-2); }
.cat-reperes{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e3); grid-template-columns:1fr 1fr; }
@media (min-width:860px){ .cat-reperes{ grid-template-columns:repeat(4,1fr); gap:var(--e4); } }
.cat-reperes li{ background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--orange);
  border-radius:var(--r); padding:var(--e4); min-width:0; }
.cat-reperes b{ display:block; font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.15; color:var(--bleu-marine); font-weight:700; letter-spacing:-.025em; }
.cat-reperes span{ display:block; margin-top:var(--e2); font-size:var(--t-s); color:var(--encre-2); line-height:1.5; }
.reperes-texte{ grid-template-columns:1fr; }
@media (min-width:700px){ .reperes-texte{ grid-template-columns:1fr 1fr; } }
.reperes-texte b{ font-size:var(--t-l); }
.reperes-texte span{ font-size:var(--t-m); line-height:1.55; }
.cat-engagements{ background:var(--creme); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); }
@media (min-width:768px){ .cat-engagements{ padding:var(--e6); } }
.cat-engagements h2{ margin:0 0 var(--e4); font-size:var(--t-xl); color:var(--bleu-marine); }
.cat-engagements ol{ list-style:none; margin:0; padding:0; counter-reset:eng; display:grid; gap:var(--e4); grid-template-columns:1fr; }
@media (min-width:760px){ .cat-engagements ol{ grid-template-columns:1fr 1fr; } }
.cat-engagements li{ counter-increment:eng; position:relative; padding-left:2.6rem; color:var(--encre); font-size:var(--t-m); line-height:1.55; }
.cat-engagements li::before{ content:counter(eng); position:absolute; left:0; top:-.1rem; width:1.8rem; height:1.8rem; border-radius:var(--r-s);
  background:var(--orange); color:var(--orange-texte); font-size:var(--t-s); font-weight:800; display:grid; place-items:center; }
.cat-marque{ margin:0; padding:var(--e4) var(--e5); border-left:4px solid var(--orange); background:var(--creme);
  border-radius:0 var(--r) var(--r) 0; font-size:var(--t-m); color:var(--encre-2); }
.cat-marque b{ color:var(--bleu-marine); letter-spacing:.04em; }
.cat-raisons{ display:grid; gap:var(--e3); grid-template-columns:1fr; }
@media (min-width:760px){ .cat-raisons{ grid-template-columns:1fr 1fr; gap:var(--e4); } }
.cat-raison{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); min-width:0; }
.cat-rang{ display:block; font-size:var(--t-s); font-weight:700; color:var(--terre-cuite); letter-spacing:.1em; }
.cat-raison h3{ margin:var(--e2) 0; font-size:var(--t-l); color:var(--bleu-marine); }
.cat-raison p{ margin:0; color:var(--encre-2); font-size:var(--t-m); line-height:1.65; }
.cat-zones{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--e2); }
.cat-zones li{ padding:.35rem .8rem; border-radius:var(--r-xs); background:var(--tint-neutre); color:var(--encre); font-size:var(--t-s); font-weight:600; }
.cat-citation{ margin:0; padding:var(--e3) 0 var(--e3) var(--e5); border-left:3px solid var(--orange); }
.cat-citation p{ margin:0; font-size:clamp(1.1rem,2.2vw,1.35rem); line-height:1.45; color:var(--bleu-marine); letter-spacing:-.015em; }
.cat-citation p::before{ content:"« "; } .cat-citation p::after{ content:" »"; }
.cat-note{ background:var(--blanc); border:1px solid var(--filet-fort); border-left:4px solid var(--orange); border-radius:var(--r); padding:var(--e4) var(--e5); }
.cat-note h3{ margin:0 0 var(--e2); font-size:var(--t-l); color:var(--bleu-marine); }
.cat-note p{ margin:0; color:var(--encre-2); }
.cat-decharges{ display:grid; gap:var(--e4); margin:0; grid-template-columns:1fr; }
@media (min-width:760px){ .cat-decharges{ grid-template-columns:1fr 1fr; } }
.cat-decharges dt{ margin:0 0 2px; font-weight:700; color:var(--bleu-marine); }
.cat-decharges dd{ margin:0; color:var(--encre-2); }
.cat-realisations{ display:grid; gap:var(--e4); grid-template-columns:1fr; }
@media (min-width:640px){ .cat-realisations{ grid-template-columns:repeat(3,1fr); } }
.cat-realisation{ margin:0; min-width:0; }
.cat-realisation img{ display:block; width:100%; height:auto; border-radius:var(--r); background:var(--creme); }
.cat-realisation figcaption{ margin-top:var(--e3); }
.cat-realisation figcaption b{ display:block; color:var(--bleu-marine); font-size:var(--t-l); }
.cat-realisation figcaption span{ display:block; margin-top:2px; color:var(--encre-2); font-size:var(--t-m); }
.cat-garanties{ display:grid; gap:var(--e4); margin:0; grid-template-columns:1fr; padding-top:var(--e5); border-top:1px solid var(--filet); }
@media (min-width:760px){ .cat-garanties{ grid-template-columns:repeat(3,1fr); } }
.cat-garanties dt{ margin:0 0 2px; font-weight:700; color:var(--bleu-marine); }
.cat-garanties dd{ margin:0; color:var(--encre-2); }
.cat-pourqui{ background:var(--bleu-fond); color:var(--creme); border-radius:var(--r-hero); padding:var(--e5); display:grid; gap:var(--e4); align-items:end; }
@media (min-width:760px){ .cat-pourqui{ grid-template-columns:1fr auto; padding:var(--e6) var(--e6) 0; } .cat-pourqui > div{ padding-bottom:var(--e6); } }
.cat-pourqui-titre{ color:var(--creme); font-size:clamp(1.4rem,2.6vw,1.9rem); margin:var(--e2) 0 0; }
.cat-surtitre-clair{ color:var(--bleu-cadre); }
.cat-surtitre-clair .cat-carre{ background:var(--orange); }
.cat-clienteles-clair > div{ border-bottom-color:rgba(182,205,224,.35); }
.cat-clienteles-clair dt{ color:var(--creme); }
.cat-clienteles-clair dd{ color:#D6E2F2; }
.cat-pourqui-lion{ width:200px; max-width:38vw; height:auto; display:block; justify-self:end; }
@media (max-width:759px){ .cat-pourqui-lion{ display:none; } }
.pied-agrement{ display:flex; align-items:center; gap:var(--e3); }
.pied-agrement p{ margin:0; }
.embleme-agree{ flex:none; width:66px; height:auto; display:block; }
.embleme-agree-grand{ width:132px; margin:0 0 var(--e3); }
@media (min-width:640px){ .embleme-agree-grand{ width:154px; } }
.qsn-facade{ margin:0; max-width:none; }
.qsn-facade img{ width:100%; height:auto; display:block; border-radius:var(--r); box-shadow:none; }
.qsn-facade figcaption,.qsn-vue figcaption{ margin-top:var(--e2); color:var(--encre-2); font-size:var(--t-s); }
.qsn-vues{ display:grid; gap:var(--e4); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.qsn-vue{ margin:0; max-width:420px; }
.qsn-vue img{ width:100%; height:auto; display:block; border-radius:var(--r); }
.qsn-direction{ max-width:320px; }
.secteurs-grille{ display:grid; gap:var(--e3); grid-template-columns:1fr; }
@media (min-width:600px){ .secteurs-grille{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .secteurs-grille{ grid-template-columns:repeat(3,1fr); } }
.secteur{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); display:grid; gap:8px; justify-items:start; }
.secteur .metier-pict{ transform:none; }
.secteur h3{ font-size:var(--t-l); color:var(--encre); line-height:1.35; }
.secteur-active{ border-color:var(--bleu-marque); }
.carte-interlocuteur{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r); padding:var(--e5); text-align:center; }
.grille-interlocuteurs{ display:grid; gap:var(--e4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.avatar-initiales{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:var(--r);
  margin-bottom:var(--e3); background:var(--tint-neutre); color:var(--indigo); font-weight:700; font-size:var(--t-l); letter-spacing:.02em; }
.carte-interlocuteur h3{ font-size:var(--t-l); }
.carte-interlocuteur .fonction{ font-size:var(--t-s); color:var(--encre-2); margin-top:2px; }
.carte-interlocuteur .rangee-actions{ justify-content:center; }

/* ------------------------------------------------- 11. VEFA */
.vefa-chantier{ margin:0 auto; max-width:420px; }
.vefa-chantier img{ display:block; width:100%; height:auto; border-radius:var(--r); background:var(--creme-2); }
.vefa-chantier figcaption{ margin-top:var(--e3); text-align:center; }
.vefa-rendu{ margin:0; }
.vefa-rendu > img{ display:block; width:100%; height:auto; border-radius:var(--r); background:var(--creme-2); }
.vefa-vue{ display:block; width:100%; height:auto; border-radius:var(--r); background:var(--creme-2); }

/* ------------------------------------------------- 12. CONFIER + PORTAIL */
.liste-cochee{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e3); }
.liste-cochee li{ position:relative; padding-left:2.1rem; line-height:1.6; }
.liste-cochee li::before{ content:"✓"; position:absolute; left:0; top:1px; width:1.4rem; height:1.4rem; border-radius:var(--r-xs);
  background:var(--tint-neutre); color:var(--indigo); font-size:.8rem; font-weight:800; display:grid; place-items:center; }
.portail-argument{ display:grid; gap:var(--e5); align-items:center; grid-template-columns:1fr; background:var(--creme);
  border:1px solid var(--filet); border-radius:var(--r-hero); padding:var(--e5); }
@media (min-width:900px){ .portail-argument{ grid-template-columns:1fr 1.05fr; gap:var(--e6); padding:var(--e6); } }
.portail-texte .surtitre{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--bleu-marque); margin:0 0 var(--e2); }
.portail-texte h2{ margin:0 0 var(--e3); color:var(--bleu-marine); font-size:clamp(23px,2.6vw,30px); }
.portail-texte a{ color:var(--terre); }
.portail-apercu{ min-width:0; }
.portail-cadre{ background:var(--blanc); border-radius:var(--r); overflow:hidden; border:1px solid var(--filet-fort); box-shadow:var(--ombre); }
.portail-barre{ display:flex; align-items:center; gap:6px; background:var(--creme-2); padding:.5rem .7rem; border-bottom:1px solid var(--filet-fort); }
.portail-barre span{ width:9px; height:9px; border-radius:50%; background:#C3CEDF; flex:0 0 auto; }
.portail-barre b{ margin-left:.5rem; font-size:.7rem; font-weight:600; color:var(--encre-2); background:var(--blanc); border-radius:var(--r-xs); padding:.15rem .6rem;
  border:1px solid var(--filet-fort); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portail-scene{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:.5rem; padding:1.1rem 1.1rem 0;
  background-color:var(--bleu-marine);
  background-image:radial-gradient(120% 90% at 12% -10%,rgba(255,255,255,.16),transparent 55%),linear-gradient(155deg,var(--bleu-marque) 0%,var(--bleu-marine) 60%); }
.portail-lion{ align-self:flex-end; height:auto; width:46%; max-width:11.5rem; flex:0 1 auto; display:block; filter:drop-shadow(0 8px 14px rgba(8,16,34,.34)); }
.portail-carte-connexion{ background:var(--blanc); border-radius:var(--r); padding:.85rem .9rem 1rem; margin-bottom:1.1rem; flex:0 1 12.5rem; min-width:0; text-align:center; box-shadow:0 10px 24px rgba(8,16,34,.24); }
.portail-logo{ height:1.9rem; width:auto; margin:0 auto .45rem; display:block; }
.portail-bienvenue{ margin:0; font-size:.98rem; font-weight:700; color:var(--bleu-marine); line-height:1.2; }
.portail-sous-titre{ margin:.1rem 0 .7rem; font-size:.6rem; color:var(--encre-2); }
.portail-champ{ margin:0 0 .35rem; text-align:left; border:1px solid var(--bord); border-radius:var(--r-xs); padding:.3rem .5rem; font-size:.6rem; color:var(--encre-2); background:var(--blanc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portail-bouton{ margin:.5rem 0 0; background:var(--terre); color:#fff; border-radius:var(--r-xs); padding:.35rem .5rem; font-size:.64rem; font-weight:700; }
@media (max-width:519px){ .portail-lion{ display:none; } .portail-scene{ justify-content:center; padding:1.1rem; }
  .portail-carte-connexion{ flex:1 1 auto; margin-bottom:0; max-width:15rem; } }
.portail-legende{ margin:var(--e3) 0 0; font-size:var(--t-xs); color:var(--encre-2); text-align:center; }

/* Confier mon bien : à partir de 1024 px, le formulaire à gauche et « Ce que
   vous obtenez en plus » à droite, qui reste sous les yeux pendant la
   saisie. Aucun changement de HTML (le parent devient une grille). */
@media (min-width:1024px){
  main .enveloppe:has(> .confier-form){ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:var(--e7); align-items:start; }
  main .enveloppe:has(> .confier-form) > h1,
  main .enveloppe:has(> .confier-form) > .chapo{ grid-column:1/-1; }
  main .enveloppe:has(> .confier-form) > .confier-form,
  main .enveloppe:has(> .confier-form) > p.confier-form{ grid-column:1; max-width:none; }
  main .enveloppe:has(> .confier-form) > .portail-argument{ grid-column:2; grid-row:3 / span 2; margin-top:var(--e6);
    position:sticky; top:calc(var(--h-barre) + var(--e4)); grid-template-columns:1fr; padding:var(--e5); gap:var(--e4); }
  main .enveloppe:has(> .confier-form) > .portail-argument .portail-texte h2{ font-size:var(--t-xl); }
}
/* Moyens de paiement : Wave, Orange Money et Djamo côte à côte (une carte
   chacun) au lieu de trois grandes cartes empilées à moitié vides. */
@media (min-width:900px){
  main .enveloppe:has(> section.bloc .carte-paiement){ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e4); align-items:stretch; }
  main .enveloppe:has(> section.bloc .carte-paiement) > *{ grid-column:1/-1; }
  main .enveloppe:has(> section.bloc .carte-paiement) > section.bloc{ grid-column:auto; margin-top:var(--e6); }
  main .enveloppe:has(> section.bloc .carte-paiement) .wave-numeros{ grid-template-columns:1fr; }
  main .enveloppe:has(> section.bloc .carte-paiement) .carte-paiement{ max-width:none; }
}

/* ------------------------------------------------- 13. CONTACT */
.contact-grille{ display:grid; gap:var(--e5); align-items:start; }
@media (min-width:900px){ .contact-grille{ grid-template-columns:1.1fr .9fr; gap:var(--e6); } }
.contact-coordonnees{ display:grid; gap:var(--e3); }
.contact-coordonnees .bloc h2{ font-size:var(--t-l); margin-bottom:var(--e2); }
.contact-coordonnees .bloc p{ font-size:var(--t-m); color:var(--encre-2); }
.contact-coordonnees .rangee-actions{ margin-top:var(--e3); }
.contact-coordonnees .rangee-actions .btn{ flex:1 1 160px; }
.encart-alerte h3,.encart-alerte a{ color:#7A1A15; }
.encart-alerte{ margin-bottom:var(--e4); }
.encart-alerte li a{ display:inline-flex; align-items:center; min-height:44px; }

/* ------------------------------------------------- 14. ASSISTANT */
.assistant-fil{ display:grid; gap:var(--e5); }
.assistant-echange{ display:grid; gap:var(--e2); }
.assistant-question{ justify-self:end; max-width:85%; margin:0; padding:var(--e3) var(--e4); border-radius:var(--r) var(--r) 2px var(--r); background:var(--creme-2); border:1px solid var(--filet-fort); }
.assistant-reponse{ max-width:92%; padding:var(--e4); border-radius:var(--r) var(--r) var(--r) 2px; background:#fff; border:1px solid var(--filet-fort); }
.assistant-reponse > p{ margin:0; }
.assistant-reponse-reserve{ border-left:4px solid var(--terre); }
.assistant-biens{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e2); }
.assistant-biens a{ display:block; padding:var(--e2) 0; }
.assistant-form{ display:grid; gap:var(--e2); }
.assistant-form textarea{ width:100%; resize:vertical; }

/* ------------------------------------------------- 15. PIED DE PAGE
   Refait le 30/09/2026 — demande de la directrice : « il faut améliorer cette
   partie-là ». Le HTML et la décision sur les codes QR sont expliqués en tête
   du bloc <footer> de templates/mise-en-page/site.php. Ici, la mise en page :

     · coordonnées (identité + agrément | nous joindre | codes QR à la souris),
     · liens du site (4 groupes),
     · ligne légale.
   Aucune couleur nouvelle : uniquement les jetons de base.css. */

footer.site-pied{
  background:var(--creme); border-top:1px solid var(--filet);
  font-size:var(--t-s); color:var(--encre-2);
  /* ⚠️ LA PASTILLE « ASSISTANT AUTOMATIQUE » NE RECOUVRE PLUS LA LIGNE LÉGALE.
     Elle est fixe : tout en bas de la page, là où l'on ne peut plus défiler
     pour dégager le texte, elle se posait dessus. On réserve donc sous la
     ligne légale exactement la place que prennent la barre « Appeler /
     WhatsApp » et la pastille (bas de page = 71 px de barre + 21 px + 48 px de
     pastille, sous 940 px), plus 16 px d'air. Valeurs recoupées avec
     .barre-contact et .conseiller plus bas — à changer ENSEMBLE si l'on
     touche à l'un ou à l'autre. À partir de 940 px la barre disparaît et la
     pastille passe dans le coin : on ne réserve plus de hauteur, on laisse
     le coin libre dans la ligne légale (voir .mentions). */
  padding:var(--e7) 0 calc(156px + env(safe-area-inset-bottom));
  /* Le lien « Nous joindre » du menu pointe ici (#contact) : sans cette marge,
     la barre de menu collante masquait le haut du pied à l'arrivée. */
  scroll-margin-top:var(--h-barre);
}
@media (min-width:940px){ footer.site-pied{ padding-bottom:var(--e7); } }

footer.site-pied h2{ font-size:var(--t-s); font-weight:700; color:var(--encre); margin:0 0 var(--e3); letter-spacing:.01em; }
footer.site-pied a{ color:var(--encre-2); text-decoration:none; }
footer.site-pied a:hover{ color:var(--indigo); text-decoration:underline; text-underline-offset:3px; }
/* Cible tactile ≥ 44 px PARTOUT (l'ancienne exception à 34 px au-delà de
   1024 px excluait les grandes tablettes, qui sont tactiles). Les groupes
   sont courts (2 à 4 liens) : la hauteur ne coûte rien. */
footer.site-pied li a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; }

/* --- Haut du pied : coordonnées ------------------------------------------ */
.pied-haut{ display:grid; gap:var(--e6); grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){
  .pied-haut{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--e7); }
}
/* Les codes QR ne prennent leur colonne que sur un appareil à SOURIS. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .pied-haut{ grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) 224px; }
}

.pied-identite{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
footer.site-pied .pied-identite h2{ font-size:var(--t-xl); color:var(--bleu-marine); letter-spacing:-.02em; margin-bottom:var(--e3); }
.pied-adresse{ font-style:normal; line-height:1.5; }
.pied-adresse span{ display:block; }
.pied-horaires{ margin:var(--e2) 0 var(--e5); line-height:1.5; }

/* L'agrément : une plaque blanche, en bas de la colonne (alignée sur le bas
   des coordonnées voisines). Emblème agrandi, texte à 14 px.
   DEUX DISPOSITIONS, choisies par la LARGEUR DE LA PLAQUE et non par celle de
   l'écran (requête de conteneur) :
     · étroite (par défaut, et partout où la requête n'est pas comprise) :
       l'emblème et « Agrément d'État » sur une ligne, l'arrêté en dessous,
       sur toute la largeur ;
     · large (≥ 440 px, soit « Arrêté n° <numéro> » d'un seul tenant à côté de
       l'emblème) : l'emblème à gauche, le texte à sa droite.
   Sans cela, le numéro de l'arrêté — insécable, 237 px à 14 px — sortait de
   la plaque dans les colonnes de 336 px (tablette) et de 312 px. */
.pied-agrement-cadre{ container-type:inline-size; margin-top:auto; width:100%; max-width:460px; }
footer.site-pied .pied-agrement{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--e3) var(--e4);
  padding:var(--e3) var(--e4);
  background:var(--blanc); border:1px solid var(--filet-fort); border-radius:var(--r); }
footer.site-pied .embleme-agree{ grid-column:1; grid-row:1; width:80px; }
.pied-agrement p{ margin:0; line-height:1.45; color:var(--encre-2); }
.pied-agrement-titre{ grid-column:2; grid-row:1; font-weight:700; font-size:var(--t-m); color:var(--encre); }
.pied-agrement-ref{ grid-column:1 / -1; grid-row:2; }
.pied-agrement.sans-embleme .pied-agrement-titre{ grid-column:1 / -1; }
/* Le numéro de l'arrêté et la date ne se coupent jamais. */
.pied-agrement .nr{ white-space:nowrap; }
@container (min-width:440px){
  footer.site-pied .embleme-agree{ grid-row:1 / span 2; width:88px; }
  .pied-agrement-titre{ grid-row:1; align-self:end; }
  .pied-agrement-ref{ grid-column:2; grid-row:2; align-self:start; }
  .pied-agrement.sans-embleme .pied-agrement-titre{ grid-column:1 / -1; }
  .pied-agrement.sans-embleme .pied-agrement-ref{ grid-column:1 / -1; }
}

/* --- Nous joindre : une rangée = un moyen, à toucher ---------------------- */
.pied-joindre{ min-width:0; container-type:inline-size; }
.pied-contacts{ display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
/* Sur deux colonnes, le téléphone (le moyen principal) prend toute la largeur :
   les rangées suivantes se remplissent deux par deux, sans case vide. */
.pied-contacts > li:first-child{ grid-column:1 / -1; }
footer.site-pied a.pied-contact{
  display:flex; align-items:center; gap:var(--e3); min-height:56px; padding:8px var(--e4);
  background:var(--blanc); border:1px solid var(--filet-fort); border-radius:var(--r-btn);
  color:var(--encre); }
footer.site-pied a.pied-contact:hover{
  background:var(--creme-2); border-color:var(--indigo); color:var(--encre); text-decoration:none; }
footer.site-pied a.pied-contact:focus-visible{ border-radius:var(--r-btn); }
/* Colonne assez large pour deux rangées côte à côte : des rangées un peu plus
   hautes, pour que la colonne ne finisse pas bien au-dessus de ses voisines. */
@container (min-width:472px){ footer.site-pied a.pied-contact{ min-height:64px; } }
.pied-icone{ flex:none; width:22px; height:22px; color:var(--indigo); }
.pied-contact-texte{ display:grid; min-width:0; line-height:1.3; }
/* ⚠️ JAMAIS À LA LIGNE : c'est ce qui cassait « WhatsApp — ligne 1 — réponse
   sous 48 h ». Le complément va dans .pied-contact-detail, dessous. */
.pied-contact-titre{ font-size:var(--t-m); font-weight:700; color:var(--encre); white-space:nowrap; }
.pied-contact-detail{ font-size:var(--t-s); color:var(--encre-2); }

/* --- Codes QR : souris seulement ----------------------------------------- */
.pied-scan{ display:none; }
@media (min-width:1024px) and (hover:hover) and (pointer:fine){ .pied-scan{ display:block; } }
.pied-scan-titre{ margin:0 0 var(--e3); font-size:var(--t-s); font-weight:700; color:var(--encre); letter-spacing:.01em; line-height:1.3; white-space:nowrap; }
.pied-scan-liste{ display:grid; grid-template-columns:repeat(2,88px); justify-content:space-between; gap:var(--e3); }
.pied-scan-carte{ display:grid; justify-items:center; align-content:start; gap:6px; }
.pied-scan-carte img{ width:88px; height:88px; padding:6px; background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r-s); }
.pied-scan-carte span{ font-size:var(--t-xs); font-weight:700; color:var(--encre-2); text-align:center; line-height:1.3; }

/* --- Liens du site : quatre groupes --------------------------------------- */
/* Téléphone : chaque groupe est un titre, puis ses liens côte à côte tant
   qu'il y a de la place (au lieu d'une ligne par lien : treize lignes
   empilées). À partir de 768 px : une RANGÉE par groupe — le titre à gauche,
   ses liens à droite —, alignées sur une même colonne de titres. Aucun
   intitulé n'est jamais coupé (chaque lien garde son texte d'un seul tenant)
   et chaque lien garde ses 44 px de haut. Essayé et écarté : quatre colonnes
   de liens empilés (trop haut) ou en ligne (irrégulier à 1024 px : « Villas »
   tout seul sur sa ligne). */
.pied-liens{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e3);
  margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid var(--filet-fort); }
.pied-groupe ul{ display:flex; flex-wrap:wrap; column-gap:var(--e5); }
footer.site-pied .pied-groupe h2{ margin:0; }
@media (min-width:768px){
  .pied-liens{ gap:0; padding-top:var(--e3); }
  .pied-groupe{ display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; }
}

/* --- Ligne légale et accès à l'espace client ------------------------------ */
.mentions{
  margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--filet-fort);
  font-size:var(--t-xs); display:grid; gap:var(--e2); }
@media (min-width:768px){
  .mentions{ grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--e6); }
}
/* ⚠️ Le coin bas-droit de l'écran appartient à la pastille « Assistant
   automatique » (fixe : right 14 px, 217 px de large mesurés, 18 px du bas).
   À partir de 940 px — où la barre « Appeler / WhatsApp » n'existe plus — on
   laisse ce coin vide dans la ligne légale (232 px = 217 + 14 + 1) plutôt que
   de relever tout le pied : 25 px de jeu mesurés entre la ligne légale et la
   pastille à 1024 px. Si l'on change l'étiquette ou la taille de la pastille
   (.conseiller-bouton), changer cette valeur EN MÊME TEMPS. */
@media (min-width:940px){ .mentions{ padding-right:232px; } }
.mentions p{ margin:0; max-width:62ch; line-height:1.5; }
.pied-legal-liens{ display:flex; flex-wrap:wrap; column-gap:var(--e5); }
footer.site-pied .mentions a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px;
  font-size:var(--t-s); text-decoration:underline; text-underline-offset:2px; }
.pied-acces svg{ flex:none; width:18px; height:18px; }

/* Codes QR de la page CONTACT (templates/ecrans/public/contact.php) — pas du
   pied de page, qui a ses propres classes (.pied-scan). Laissés tels quels :
   ne pas les modifier sans rouvrir la page Contact. */
.pied-qr{ display:none; flex-wrap:wrap; gap:12px; margin-top:var(--e4); }
@media (min-width:700px){ .pied-qr{ display:flex; } }
@media print{ .pied-qr{ display:flex; } }
.pied-qr-carte{ display:grid; justify-items:center; gap:6px; text-decoration:none; color:var(--encre); width:88px; }
.pied-qr-carte img{ width:88px; height:88px; border:1px solid var(--filet); border-radius:var(--r-s); background:var(--blanc); padding:6px; }
.pied-qr-carte span{ font-size:var(--t-xs); font-weight:700; color:var(--encre-2); }

/* Barre « Appeler / WhatsApp » (téléphone). */
.barre-contact{ position:fixed; left:0; right:0; bottom:0; z-index:28; display:flex; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--blanc); border-top:1px solid var(--filet-fort);
  box-shadow:0 -6px 20px rgba(16,26,46,.10); }
.barre-contact .btn{ flex:1; min-height:50px; font-size:var(--t-m); padding:12px 10px; }
.barre-contact-choix{ flex:1; position:static; }
.barre-contact-choix > summary{ display:flex; align-items:center; justify-content:center; width:100%; min-height:50px;
  font-size:var(--t-m); padding:12px 10px; cursor:pointer; list-style:none; }
.barre-contact-choix > summary::-webkit-details-marker{ display:none; }
.barre-contact-choix > summary::after{ content:" ▾"; margin-left:6px; }
.barre-contact-choix[open] > summary::after{ content:" ▴"; }
.barre-contact-lignes{ position:absolute; bottom:100%; left:14px; right:14px; z-index:31; margin:0 0 8px; padding:6px; list-style:none;
  background:var(--blanc); border:1px solid var(--filet-fort); border-radius:var(--r); box-shadow:var(--ombre-lg); }
.barre-contact-lignes li + li{ margin-top:4px; }
.barre-contact-lignes a{ display:block; padding:12px 10px; min-height:44px; border-radius:var(--r-xs); text-decoration:none; color:var(--encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barre-contact-lignes a:hover,.barre-contact-lignes a:focus-visible{ background:var(--creme-2); }
@media (min-width:940px){ .barre-contact{ display:none; } }

/* Assistant automatique (pastille flottante + panneau). Carré arrondi,
   comme le reste ; le panneau garde ses trois garde-fous (voir le composant). */
.conseiller{ position:fixed; right:14px; z-index:30; bottom:calc(92px + env(safe-area-inset-bottom)); }
.conseiller-bouton{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; min-width:48px; padding:0 12px;
  border-radius:var(--r); border:0; cursor:pointer; background:var(--indigo); color:var(--creme); font:inherit; font-size:14px; font-weight:700; box-shadow:var(--ombre-lg); }
.conseiller-bouton svg{ width:22px; height:22px; flex:none; }
.conseiller-etiquette{ display:none; }
@media (min-width:420px){ .conseiller-bouton{ padding:0 18px 0 14px; } .conseiller-etiquette{ display:inline; } }
.conseiller-bouton[aria-expanded="true"]{ background:var(--encre); }
.conseiller-panneau{ position:fixed; right:14px; left:14px; bottom:calc(154px + env(safe-area-inset-bottom)); z-index:30; max-width:380px; margin-inline:auto;
  max-height:min(72vh,560px); overflow-y:auto; background:var(--blanc); border-radius:var(--r-hero); box-shadow:var(--ombre-lg); border:1px solid var(--filet); }
.conseiller-panneau[hidden]{ display:none; }
.conseiller-entete{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); padding:var(--e4) var(--e4) var(--e3);
  background:var(--indigo); color:var(--creme); border-radius:var(--r-hero) var(--r-hero) 0 0; }
.conseiller-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ocre); margin:0 0 4px; }
.conseiller-badge::before{ content:"●"; font-size:8px; }
.conseiller-entete h2{ font-size:var(--t-m); color:var(--creme); }
.conseiller-fermer{ flex:none; width:44px; height:44px; margin:-4px -6px 0 0; border-radius:var(--r-s); border:0; background:rgba(255,255,255,.14); color:var(--creme); font-size:20px; line-height:1; cursor:pointer; }
.conseiller-fermer:hover{ background:rgba(255,255,255,.24); }
.conseiller-corps{ padding:var(--e4); display:grid; gap:var(--e3); }
.conseiller-corps p{ font-size:14px; color:var(--encre-2); line-height:1.55; }
.conseiller-corps p strong{ color:var(--encre); }
.conseiller-horaires{ padding:10px 12px; border-radius:var(--r-s); background:var(--tint-neutre); font-size:13px; font-weight:600; color:var(--encre); }
.conseiller-choix{ display:grid; gap:8px; }
.conseiller-choix .btn{ justify-content:flex-start; padding-left:16px; }
@media (min-width:940px){ .conseiller{ bottom:18px; }
  .conseiller-panneau{ bottom:86px; left:auto; right:18px; margin-inline:0; } }

/* ------------------------------------------------- 16. ÉMBLÈME */
/* L'emblème « Agent immobilier agréé » et la mention « Agence immobilière
   agréée » restent visibles : sous le logo (en-tête), dans la bande de
   confiance, sur « Qui sommes-nous » et dans le pied de page. */

/* ------------------------------------------------- 17. VARIANTE D'ACCROCHE BLEUE
   Uniquement pour COMPARER : l'accroche d'avant (photo sous un voile bleu,
   texte blanc). Activée par html[data-accroche="bleue"] (bouton dans le
   bandeau de la maquette). Si la directrice préfère, ce bloc remplace la
   section 7a ; sinon il se supprime. */
html[data-accroche="bleue"] .accroche{ background:var(--bleu-fond); color:var(--creme); }
html[data-accroche="bleue"] .accroche h1{ color:var(--creme); }
html[data-accroche="bleue"] .accroche h1 em{ color:var(--ocre); }
html[data-accroche="bleue"] .accroche .sous{ color:#E6EDF4; }
html[data-accroche="bleue"] .accroche .rassurance{ color:var(--encre-clair); }
html[data-accroche="bleue"] .accroche .rassurance li::before{ color:var(--ocre); }
@media (min-width:940px){
  html[data-accroche="bleue"] .accroche-fond{ inset:0; width:auto; }
  html[data-accroche="bleue"] .accroche-fond::after{ background:linear-gradient(105deg,rgba(37,73,141,.93) 0%,rgba(37,73,141,.88) 38%,rgba(37,73,141,.66) 68%,rgba(37,73,141,.52) 100%); }
}
@media (max-width:939px){
  html[data-accroche="bleue"] .accroche-fond{ position:relative; }
  html[data-accroche="bleue"] .accroche-fond::after{ content:""; position:absolute; inset:0; background:rgba(37,73,141,.45); }
}
html[data-accroche="bleue"] .accroche .rangee-actions .btn-sur-chrome{ background:transparent; color:var(--creme); border-color:rgba(255,255,255,.65); }
html[data-accroche="bleue"] .accroche :where(a,button,input,select):focus-visible{ outline-color:#fff; }

/* ===========================================================================
   DEUX CLASSES QUE LA REFONTE A LAISSÉES SANS RÈGLE — 30/09/2026
   ---------------------------------------------------------------------------
   Trouvées en comparant les classes employées par les gabarits publics à
   celles réellement définies : dix sans règle, dont huit sans conséquence
   (des variantes posées à côté d'une classe de base qui, elle, existe :
   `.btn btn-indigo`, `.section etapes-scene`…). Ces deux-ci, si.

   ⚠️ `.message-erreur` S'AFFICHAIT EN NOIR ORDINAIRE. Constaté en ligne, en
   envoyant le formulaire de l'assistant vide : « Écrivez une question. »
   sortait en graisse 400, couleur du texte courant, sans fond — impossible
   à distinguer d'une phrase de la page. Un visiteur qui se trompe doit VOIR
   qu'il s'est trompé ; sinon il croit que le site ne répond pas, et il part.
   =========================================================================== */

.message-erreur{
  display:flex; align-items:flex-start; gap:var(--e2);
  margin:var(--e3) 0; padding:var(--e3) var(--e4);
  background:#FDF2F1; border:1px solid var(--rouge);
  border-left:4px solid var(--rouge); border-radius:var(--r-s);
  color:var(--rouge); font-weight:600; line-height:1.45;
}
.message-erreur::before{ content:"⚠"; flex:0 0 auto; font-weight:700; }

/* L'intitulé d'un champ : il doit se lire comme une étiquette, pas comme une
   phrase de la page. Même rôle que dans l'application de gestion. */
.champ-intitule{
  display:block; margin-bottom:var(--e2);
  font-size:var(--t-s); font-weight:700; color:var(--bleu-marine);
}

/* Vidéo d'un meublé Lensa Home — 30/09/2026. Format portrait (vidéo de
   téléphone) : largeur bornée et bloc centré, sinon elle occupe toute la
   hauteur de l'écran et le reste de la fiche disparaît sous la ligne de
   flottaison. Même raisonnement que .vefa-chantier. */
.video-meuble{ margin:0 auto var(--e5); max-width:420px; }
.video-meuble figcaption{ text-align:center; }