/* =====================================================================
   HOLA DOMUS · feuille propre au site
   Troisieme et derniere feuille chargee : hola-system.css, puis
   marque.css, puis celle ci. Elle n invente aucune couleur : tout vient
   des jetons. Elle ne fait que poser les blocs de ce site la.
   ===================================================================== */

/* --- reprises de largeur --------------------------------------------- */
:root{ --w-page:1200px; }

body{ background:var(--fond); }

/* --- bandes ----------------------------------------------------------- */
.bande-tiede{ background:var(--fond-2); border-block:1px solid var(--br-100); }
.bande-marque{ background:var(--br-wash); border-block:1px solid var(--br-100); }

/* --- en tete ---------------------------------------------------------- */
.hs-logo .mot{ display:inline-flex; align-items:baseline; gap:1px; }
.hs-logo .mot b{ font-weight:var(--w-semi); }
.hs-logo .mot .accent{ color:var(--br-500); }
.hs-logo svg{ width:26px; height:26px; }

.langues{ display:flex; align-items:center; gap:2px; }
.langues a{
  font-size:12px; font-weight:var(--w-semi); letter-spacing:.04em;
  text-transform:uppercase; color:var(--doux);
  padding:6px 8px; border-radius:var(--r-xs);
}
.langues a:hover{ color:var(--encre); background:var(--surface-2); }
.langues a[aria-current]{ color:var(--br-ink); background:var(--br-wash); }
@media (max-width:900px){ .langues{ display:none } }
.tiroir-langues{ display:flex; flex-wrap:wrap; gap:var(--sp-8); padding-top:var(--sp-16); }
.tiroir-langues a{
  border:1px solid var(--trait); border-radius:var(--r-pill);
  padding:7px 14px; font-size:13px; font-weight:var(--w-semi);
  text-transform:uppercase; letter-spacing:.04em; color:var(--encre-2);
}

/* --- heros ------------------------------------------------------------ */
.hero{ padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px); }
.hero h1{ font-size:var(--t-display); line-height:var(--lh-display);
  letter-spacing:var(--ls-display); font-weight:var(--w-medium); max-width:16ch; }
.hero h1 .suite{ display:block; color:var(--br-ink); font-weight:var(--w-regular); }
.hero .hs-lead{ margin-top:var(--sp-24); max-width:60ch; font-size:18px; color:var(--encre-2); }
.hero .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); margin-top:var(--sp-32); }

/* La photo est dans un <figure> depuis le 31/08/2026 : la legende dit que
   c est une photo d archive et pas une promotion commercialisee par nous.
   C est le cadre interieur qui porte l arrondi et le rognage, sinon
   overflow:hidden coupe la legende. */
.hero-image{ margin-top:var(--sp-48); }
.hero-image picture, .franja-foto picture{
  display:block; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:21/9; background:var(--surface-2);
}
.hero-image img, .franja-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-image figcaption{ margin-top:var(--sp-12); font-size:12px; color:var(--pale); letter-spacing:.02em; }
@media (max-width:700px){
  .hero-image picture{ aspect-ratio:4/3; border-radius:var(--r-card); }
}

/* En tete de page interieure : plus sobre, sans image pleine largeur. */
.entete-page{ padding-block:clamp(40px,6vw,72px) clamp(32px,4vw,48px); }
.entete-page h1{ font-size:var(--t-h1); max-width:20ch; }
.entete-page .hs-lead{ margin-top:var(--sp-16); }

/* --- fil d ariane ----------------------------------------------------- */
.ariane{
  display:flex; align-items:center; gap:var(--sp-8);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale); margin-bottom:var(--sp-24);
}
/* Le chevron : sans taille explicite, un SVG en ligne prend toute la largeur
   de son conteneur flex. C est arrive une fois, en pleine page contact. */
.ariane svg{ width:12px; height:12px; flex:none; }
.ariane a:hover{ color:var(--encre-2); }
.ariane span[aria-current]{ color:var(--encre-2); }

/* --- listes numerotees, la colonne vertebrale du site ----------------- */
.etapes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--trait); }
.etapes li{
  display:grid; grid-template-columns:56px 1fr; gap:var(--sp-16) var(--sp-24);
  padding-block:var(--sp-24);
  border-bottom:1px solid var(--trait);
}
.etapes .num{
  font-size:13px; font-weight:var(--w-semi); color:var(--br-500);
  font-variant-numeric:tabular-nums; padding-top:3px;
}
.etapes h3{ font-size:var(--t-h4); margin-bottom:6px; }
.etapes p{ color:var(--doux); }
/* LES TROIS ENFANTS SONT PLACES A LA MAIN, ET IL LE FAUT.
   Une puce contient trois elements (le numero, le titre, le texte) dans une
   grille a deux colonnes : le placement automatique met le numero en 1-1, le
   titre en 1-2, puis renvoie le TEXTE en 2-1, c est a dire dans la colonne
   de 56 px. Sur telephone le paragraphe sortait donc en un mot par ligne.
   Defaut present en ligne depuis la mise en ligne du 30/08/2026, vu et
   corrige le 31/08 au soir en verifiant les captures telephone. */
.etapes .num{ grid-column:1; grid-row:1; }
.etapes h3{ grid-column:2; grid-row:1; }
.etapes p{ grid-column:2; grid-row:2; }
@media (min-width:900px){
  .etapes li{ grid-template-columns:56px 300px 1fr; align-items:start; }
  .etapes h3{ margin-bottom:0; }
  .etapes p{ grid-column:3; grid-row:1; }
}

/* --- deux colonnes compris / non compris ------------------------------ */
.deux-colonnes{ display:grid; gap:var(--sp-24); }
@media (min-width:820px){ .deux-colonnes{ grid-template-columns:1fr 1fr; gap:var(--sp-48); } }
.liste-oui, .liste-non{ list-style:none; margin:var(--sp-16) 0 0; padding:0; display:grid; gap:var(--sp-12); }
.liste-oui li, .liste-non li{ display:grid; grid-template-columns:20px 1fr; gap:var(--sp-12); align-items:start; }
.liste-oui svg{ color:var(--br-500); }
.liste-non li{ color:var(--doux); }
.liste-non svg{ color:var(--pale); }
.liste-oui svg, .liste-non svg{ width:17px; height:17px; margin-top:3px; }

/* --- cartes de service ------------------------------------------------ */
.carte-service h3{ font-size:var(--t-h4); margin-block:var(--sp-12) 6px; }
.carte-service p{ color:var(--doux); font-size:var(--t-body); }
.carte-service .rond{
  width:40px; height:40px; border-radius:var(--r-pill);
  border:1px solid var(--br-200); background:var(--br-wash);
  display:flex; align-items:center; justify-content:center; color:var(--br-500);
}
.carte-service .rond svg{ width:19px; height:19px; }

/* --- cartes de lien interne ------------------------------------------- */
/* Une carte entiere cliquable. Le titre porte la fleche : elle avance au
   survol, ce qui suffit a dire que c est un lien sans souligner tout le
   bloc. Pose le 31/08/2026 avec le maillage interne. */
.carte-lien{ display:block; color:inherit; text-decoration:none; }
.carte-lien h3{
  font-size:var(--t-h4); margin:0 0 6px; color:var(--br-ink);
  display:flex; align-items:center; gap:var(--sp-8);
}
.carte-lien h3 svg{ width:17px; height:17px; flex:none; color:var(--br-500);
  transition:transform .18s ease; }
.carte-lien p{ color:var(--doux); font-size:var(--t-body); margin:0; }
.carte-lien:hover{ border-color:var(--br-300, var(--br-200)); }
.carte-lien:hover h3 svg{ transform:translateX(3px); }
.carte-lien:focus-visible{ outline:2px solid var(--br-500); outline-offset:3px; }

/* --- communes d un marche --------------------------------------------- */
/* Des noms de lieux, pas des liens : on ne fabrique pas une page par
   commune. Ils sont la pour que le promoteur de Rojales lise « Rojales ». */
.zonas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--sp-8);
}
.zonas li{
  border:1px solid var(--trait); border-radius:var(--r-pill);
  padding:6px var(--sp-12); font-size:var(--t-small); color:var(--encre-2);
  background:var(--fond, transparent);
}

/* --- chiffres de marche ----------------------------------------------- */
.chiffres{ display:grid; gap:var(--sp-24); }
@media (min-width:760px){ .chiffres{ grid-template-columns:repeat(3,1fr); } }
.chiffre .valeur{
  font-family:var(--f-display); font-size:clamp(30px,3.4vw,42px);
  font-weight:var(--w-semi); letter-spacing:-.03em; color:var(--br-ink);
  line-height:1.05; font-variant-numeric:tabular-nums;
}
.chiffre p{ margin-top:var(--sp-8); color:var(--doux); font-size:var(--t-small); }
.chiffre .source{ display:block; margin-top:var(--sp-8); font-size:12px; color:var(--pale); }
.chiffre .source a{ text-decoration:underline; text-underline-offset:2px; }

/* --- questions -------------------------------------------------------- */
.questions{ border-top:1px solid var(--trait); }
.questions details{ border-bottom:1px solid var(--trait); }
.questions summary{
  cursor:pointer; list-style:none; padding-block:var(--sp-16);
  display:flex; align-items:baseline; gap:var(--sp-16);
  font-family:var(--f-display); font-size:var(--t-h4); font-weight:var(--w-medium);
  letter-spacing:var(--ls-title);
}
.questions summary::-webkit-details-marker{ display:none; }
.questions summary::after{
  content:"+"; margin-left:auto; color:var(--br-500);
  font-family:var(--f-text); font-weight:var(--w-semi); font-size:20px; line-height:1;
}
.questions details[open] summary::after{ content:"\2013"; }
.questions details p{ color:var(--doux); padding-bottom:var(--sp-24); max-width:78ch; }

/* --- appel final ------------------------------------------------------ */
.appel{ text-align:center; }
.appel h2{ font-size:var(--t-h1); max-width:22ch; margin-inline:auto; }
.appel p{ margin-top:var(--sp-16); color:var(--doux); max-width:62ch; margin-inline:auto; }
.appel .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); justify-content:center; margin-top:var(--sp-32); }

/* --- contact ---------------------------------------------------------- */
.blocs-contact{ display:grid; gap:var(--sp-16); }
@media (min-width:760px){ .blocs-contact{ grid-template-columns:repeat(3,1fr); } }
.bloc-contact{ display:block; }
.bloc-contact .quoi{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--pale); }
.bloc-contact .valeur{ display:block; margin-top:6px; font-family:var(--f-display);
  font-size:19px; font-weight:var(--w-medium); letter-spacing:-.02em; }
.bloc-contact:hover .valeur{ color:var(--br-ink); }
.bloc-contact .note{ display:block; margin-top:6px; font-size:var(--t-small); color:var(--doux); }
.bloc-contact .rond-contact{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  background:var(--br-wash); border:1px solid var(--br-200); color:var(--br-500);
  margin-bottom:var(--sp-16);
}
.bloc-contact .rond-contact svg{ width:18px; height:18px; }

.formulaire{ display:grid; gap:var(--sp-16); max-width:640px; }
@media (min-width:640px){ .formulaire .duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); } }
.formulaire .hs-btn{ justify-self:start; }

/* =====================================================================
   CYCLE DU 31/08/2026 (apres midi) · « plus de visuel »
   Tout ce qui suit a ete ajoute pour la demande : des bandeaux photo sur
   les pages interieures, des scenarios chiffres illustres, deux graphiques
   et un schema. Rien ici n invente de couleur : tout sort des jetons.

   REGLE TENUE DANS CES BLOCS, ET ELLE COMPTE :
   un chiffre affiche gros est soit une donnee publique avec sa source
   cliquable, soit une hypothese declaree comme telle par le cartouche
   « comment lire ». Il n y a aucun resultat de client sur ce site.
   ===================================================================== */

/* --- bandeau photo d une page interieure ------------------------------ */
/* Sous la ligne de flottaison, donc charge en differe et servi en WebP.
   Le 21/9 tient la promesse du gabarit d accueil ; sur telephone on passe
   en 16/9, sinon la bande fait quarante pixels de haut et ne montre rien. */
.franja-foto{ margin-top:var(--sp-48); }
.franja-foto figcaption{
  margin-top:var(--sp-12); font-size:12px; color:var(--pale);
  letter-spacing:.02em;
}
@media (max-width:700px){
  .franja-foto picture{ aspect-ratio:16/9; border-radius:var(--r-card); }
}

/* --- photo et texte cote a cote --------------------------------------- */
.medios{ display:grid; gap:var(--sp-32); align-items:center; }
@media (min-width:900px){
  .medios{ grid-template-columns:1fr 1fr; gap:var(--sp-48); }
  .medios--inverso .medios-foto{ order:2; }
}
.medios-foto{ margin:0; }
.medios-foto picture{
  display:block; width:100%; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:16/10; background:var(--surface-2);
}
.medios-foto figcaption{ margin-top:var(--sp-12); font-size:12px; color:var(--pale); }
.medios-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.medios-texto p{ color:var(--encre-2); }
.medios-texto p+p{ margin-top:var(--sp-16); }
.medios-texto .liste-oui{ margin-top:var(--sp-24); }

/* --- scenario chiffre : l entonnoir ----------------------------------- */
/* Des barres qui retrecissent, pas un vrai trapeze : un entonnoir dessine
   en SVG devient illisible sous 400 px, et la barre garde le chiffre et son
   libelle sur la meme ligne a toutes les largeurs. */
.embudo{ list-style:none; margin:var(--sp-32) 0 0; padding:0; display:grid; gap:var(--sp-12); }
.embudo li{ display:grid; gap:6px; }
.embudo .barre{
  border-radius:var(--r-md); background:var(--br-grad); color:#fff;
  padding:var(--sp-16) var(--sp-24);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-16); min-width:min(100%,20ch);
}
.embudo .barre .valor{
  font-family:var(--f-display); font-size:clamp(20px,2.4vw,28px);
  font-weight:var(--w-semi); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  line-height:1; white-space:nowrap; flex:none;
}
.embudo .barre .etapa{
  font-size:var(--t-small); font-weight:var(--w-semi);
  letter-spacing:.02em; text-align:right; color:rgba(255,255,255,.86);
}
.embudo .nota{ font-size:var(--t-small); color:var(--doux); padding-inline:var(--sp-4); }
.embudo .nota b{ font-weight:var(--w-semi); color:var(--encre-2); }
@media (max-width:640px){
  .embudo .barre{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
  .embudo .barre .etapa{ text-align:left; }
}

/* --- cartouche « comment lire ce scenario » --------------------------- */
/* Il n est pas decoratif : c est lui qui separe la donnee publiee de
   l hypothese. Sans lui, le bloc entier se lit comme une promesse. */
.lectura{
  margin-top:var(--sp-32); border:1px solid var(--br-200);
  background:var(--br-wash); border-radius:var(--r-card);
  padding:var(--sp-24);
}
.lectura h3{
  font-family:var(--f-text); font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--br-ink); font-weight:var(--w-semi);
  margin-bottom:var(--sp-12);
}
.lectura ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-12); }
.lectura li{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-12); align-items:start; }
.lectura .marca{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:var(--w-semi); border-radius:var(--r-pill); padding:4px 9px;
  white-space:nowrap; margin-top:1px;
}
.lectura .marca--dato{ background:var(--br-500); color:#fff; }
.lectura .marca--hipotesis{ background:var(--n-0); color:var(--br-ink); border:1px solid var(--br-200); }
.lectura li span:last-child{ font-size:var(--t-small); color:var(--encre-2); line-height:var(--lh-tight); }
/* Sur telephone la pastille et le texte cote a cote laissent une colonne de
   vingt caracteres. On empile. */
@media (max-width:560px){
  .lectura li{ grid-template-columns:1fr; gap:var(--sp-8); }
  .lectura .marca{ justify-self:start; }
}
.fuentes{ margin-top:var(--sp-16); display:grid; gap:6px; font-size:12px; color:var(--pale); }
.fuentes a{ text-decoration:underline; text-underline-offset:2px; }

/* --- graphique en courbes --------------------------------------------- */
/* Le dessin est etire (preserveAspectRatio="none") et ne porte aucun texte :
   les etiquettes sont du HTML autour, sinon elles retrecissent avec le
   cadre et deviennent illisibles sur telephone. Les traits gardent leur
   epaisseur grace a vector-effect, pose cote SVG. */
.grafico{ margin-top:var(--sp-32); }
/* La pastille du repere est posee AU DESSUS du cadre et pas dedans : dans le
   cadre elle recouvrait la courbe, et sur telephone il fallait la couper aux
   quatorze premiers caracteres, ce qui donnait « Se apaga la c... ». */
.grafico .lienzo{ position:relative; height:clamp(190px,24vw,264px); margin-top:28px; }
.grafico .lienzo svg{ width:100%; height:100%; display:block; }
.grafico .rejilla{ stroke:var(--n-100); }
.grafico .eje-y{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pale); font-weight:var(--w-semi); margin-bottom:var(--sp-8);
}
.grafico .corte{
  position:absolute; top:-14px; transform:translate(-50%,-50%);
  font-size:11px; color:var(--doux); background:var(--fond);
  padding:2px 8px; border:1px solid var(--trait); border-radius:var(--r-pill);
  white-space:nowrap;
}
.grafico .meses{
  display:flex; justify-content:space-between; margin-top:var(--sp-8);
  font-size:11px; color:var(--pale); font-variant-numeric:tabular-nums;
}
.grafico .meses span:first-child{ margin-left:0; }
.leyenda{
  display:flex; flex-wrap:wrap; gap:var(--sp-16) var(--sp-24);
  margin-top:var(--sp-16); font-size:var(--t-small); color:var(--encre-2);
}
.leyenda span{ display:inline-flex; align-items:center; gap:var(--sp-8); }
.leyenda i{ width:22px; height:3px; border-radius:2px; flex:none; }

/* --- graphique en barres ---------------------------------------------- */
.barras{ list-style:none; margin:var(--sp-32) 0 0; padding:0; display:grid; gap:var(--sp-16); }
.barras li{ display:grid; grid-template-columns:1fr; gap:6px; }
@media (min-width:640px){
  .barras li{ grid-template-columns:15ch 1fr; align-items:center; gap:var(--sp-16); }
}
.barras .quien{ font-size:var(--t-small); font-weight:var(--w-semi); color:var(--encre-2); }
.barras .pista{ display:flex; align-items:center; gap:var(--sp-12); }
.barras .relleno{
  height:14px; border-radius:var(--r-pill); background:var(--br-grad); flex:none;
}
.barras li.apagada .relleno{ background:var(--n-300); }
.barras .cifra{
  font-size:var(--t-small); font-weight:var(--w-semi); color:var(--br-ink);
  font-variant-numeric:tabular-nums;
}
.barras li.apagada .cifra{ color:var(--doux); }

/* --- schema du chemin -------------------------------------------------- */
/* En HTML, pas en SVG : sous 760 px les etapes passent en colonne et la
   fleche pivote. C est la seule facon d avoir un schema lisible sur un
   telephone sans en dessiner deux versions. */
.esquema{ margin-top:var(--sp-32); }
.esquema figcaption{ margin-top:var(--sp-24); font-size:var(--t-small); color:var(--doux); max-width:76ch; }
/* --sp-48 et pas --sp-40 : le jeton 40 n existe pas dans hola-system.css, et
   une variable inconnue dans gap vaut zero sans rien signaler. Les deux
   rangees du schema se touchaient. */
.flujo{ display:grid; gap:var(--sp-48); }
.flujo-titulo{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pale); font-weight:var(--w-semi);
}
.flujo-fila--marca .flujo-titulo{ color:var(--br-500); }
.flujo-pasos{ list-style:none; margin:var(--sp-16) 0 0; padding:0; display:grid; gap:var(--sp-24); }
@media (min-width:760px){
  .flujo-pasos{ grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-32); }
}
.paso{
  position:relative; display:flex; align-items:center; min-height:66px;
  border:1px solid var(--trait); border-radius:var(--r-md);
  background:var(--fond); padding:var(--sp-12) var(--sp-16);
  font-size:var(--t-small); line-height:var(--lh-tight); color:var(--encre-2);
}
.paso--gris{ background:var(--surface-2); color:var(--doux); }
.paso--marca{
  background:var(--br-wash); border-color:var(--br-200);
  color:var(--br-ink); font-weight:var(--w-semi);
}
/* La fleche : un chevron fait de deux bords, pose entre deux boites. Elle
   tourne d un quart de tour quand la rangee passe en colonne. */
.paso:not(:last-child)::after{
  content:""; position:absolute; width:8px; height:8px;
  border-right:1.6px solid var(--br-400); border-bottom:1.6px solid var(--br-400);
}
@media (min-width:760px){
  .paso:not(:last-child)::after{ right:-21px; top:50%; transform:translateY(-50%) rotate(-45deg); }
}
@media (max-width:759px){
  .paso:not(:last-child)::after{ bottom:-17px; left:50%; transform:translateX(-50%) rotate(45deg); }
}
.flujo-nota{ margin-top:var(--sp-16); font-size:var(--t-small); color:var(--doux); max-width:80ch; }

/* --- pied ------------------------------------------------------------- */
.pied{ border-top:1px solid var(--trait); padding-block:var(--sp-48) var(--sp-32); margin-top:var(--gap-entre-sections); }
.pied .rangs{ display:grid; gap:var(--sp-32); }
@media (min-width:820px){ .pied .rangs{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-48); } }
/* Le pied porte depuis le 31/08/2026 le plan du site complet. Il a toujours
   quatre colonnes : la marque, les services, les marches et le contact. Les
   colonnes sont declarees en dur et pas en auto-fit, parce que auto-fit
   calculait trois pistes et renvoyait le contact a la ligne en laissant un
   trou a droite. Deux paliers : deux colonnes sur tablette, quatre au dela. */
@media (min-width:620px){
  .pied .rangs--plan{ grid-template-columns:1fr 1fr; gap:var(--sp-32); }
}
@media (min-width:1020px){
  .pied .rangs--plan{ grid-template-columns:1.5fr 1.1fr .9fr .9fr; gap:var(--sp-40,var(--sp-32)); }
}
@media (min-width:1240px){ .pied .rangs--plan{ gap:var(--sp-48); } }
.pied h4{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--pale);
  font-family:var(--f-text); font-weight:var(--w-semi); margin-bottom:var(--sp-12); }
.pied nav{ display:grid; gap:var(--sp-8); }
.pied nav a{ color:var(--encre-2); font-size:var(--t-body); }
.pied nav a:hover{ color:var(--br-ink); }
.pied .mention{ margin-top:var(--sp-32); padding-top:var(--sp-16); border-top:1px solid var(--trait);
  display:flex; flex-wrap:wrap; gap:var(--sp-12) var(--sp-24); font-size:var(--t-small); color:var(--doux); }

/* --- bandeau de previsualisation -------------------------------------- */
.bandeau-essai{
  background:var(--br-ink); color:#fff; text-align:center;
  font-size:13px; padding:9px 16px; letter-spacing:-.005em;
}
.bandeau-essai strong{ font-weight:var(--w-semi); }

/* --- petites choses --------------------------------------------------- */
.mesure{ max-width:70ch; }
.corps p+p{ margin-top:var(--sp-16); }
.corps{ color:var(--encre-2); }
.filet-or{ height:2px; width:56px; background:var(--br-400); border:0; margin:0 0 var(--sp-24); }

/* --- la pile de commercialisation (bloc capas) ------------------------- */
/* Quatre couches empilees. Une seule est coloree, la notre : le reste du
   dessin appartient au promoteur, et le dessin doit le dire tout seul. */
.capas{ margin-top:var(--sp-32); display:grid; gap:var(--sp-12); }
.capas figcaption{ margin-top:var(--sp-24); font-size:var(--t-small); color:var(--doux); max-width:76ch; }
.capa{
  position:relative; display:flex; gap:var(--sp-16);
  border:1px solid var(--trait); border-radius:var(--r-md);
  background:var(--fond); padding:var(--sp-16) var(--sp-20);
}
.capa--nuestra{ background:var(--br-wash); border-color:var(--br-200); }
.capa-rang{
  flex:0 0 auto; font-size:11px; letter-spacing:.08em; font-weight:var(--w-semi);
  color:var(--pale); padding-top:3px;
}
.capa--nuestra .capa-rang{ color:var(--br-500); }
.capa-cuerpo h3{ font-size:var(--t-h4,17px); margin:0 0 4px; }
.capa--nuestra .capa-cuerpo h3{ color:var(--br-ink); }
.capa-cuerpo p{ margin:0; font-size:var(--t-small); color:var(--doux); line-height:var(--lh-normal,1.5); }
.capa-etiquetas{
  list-style:none; margin:var(--sp-12) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.capa-etiquetas li{
  font-size:12px; line-height:1; padding:6px 10px;
  border:1px solid var(--trait); border-radius:999px; color:var(--encre-2);
  background:var(--surface-2);
}
.capa--nuestra .capa-etiquetas li{ border-color:var(--br-200); background:var(--fond); color:var(--br-ink); }
/* La fleche entre deux couches, comme dans le schema du chemin. */
.capa:not(:last-of-type)::after{
  content:""; position:absolute; bottom:-10px; left:50%;
  width:8px; height:8px; transform:translateX(-50%) rotate(45deg);
  border-right:1.6px solid var(--br-400); border-bottom:1.6px solid var(--br-400);
}

/* --- l entonnoir commercial (bloc embudo, classe kpis) ------------------------------ */
/* Largeur decroissante d un etage a l autre : ca se lit comme un entonnoir
   sans qu un seul chiffre soit affiche. Le nom de l indicateur est a
   droite, parce que c est lui que le lecteur cherche. */
.kpis{ list-style:none; margin:var(--sp-32) 0 0; padding:0; display:grid; gap:var(--sp-12); }
.kpis-etapa{ display:grid; gap:var(--sp-8); align-items:center; }
@media (min-width:760px){
  .kpis-etapa{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--sp-24); }
}
.kpis-barra{
  width:var(--anchura,100%); min-height:52px; display:flex; align-items:center;
  border:1px solid var(--br-200); border-radius:var(--r-md);
  background:var(--br-wash); padding:var(--sp-12) var(--sp-20);
}
.kpis-fase{ font-size:var(--t-small); font-weight:var(--w-semi); color:var(--br-ink); }
.kpis-dato{ display:grid; gap:2px; }
.kpis-kpi{ font-size:var(--t-small); font-weight:var(--w-semi); color:var(--encre-2); }
.kpis-nota{ font-size:12.5px; color:var(--doux); line-height:1.45; }