/* Tagus Valor — feuille unique, sans framework. */

:root {
  /* Rythme vertical. Sept degrés, tirés des valeurs que la feuille utilisait
     déjà le plus souvent — l'allure ne change pas, la cohérence oui. Il y
     avait trente valeurs distinctes entre 1 et 90 pixels : c'est ce que l'œil
     lit comme du laisser-aller sans pouvoir dire pourquoi.

     En dessous de 4px on ne touche à rien : ce sont des ajustements optiques,
     pas du rythme. */
  --esp-1: 6px;
  --esp-2: 10px;
  --esp-3: 14px;
  --esp-4: 18px;
  --esp-5: 26px;
  --esp-6: 34px;
  --esp-7: 48px;

  /* Fonds chauds papier/pierre/sable, repris de tagusrentals.com : les deux
     marques partagent le même monde, Tagus Valor garde le BLEU là où Rentals
     est menthe. L'or (#b45309 sur #fff7db) est la couleur COMMERCIALE : il ne
     sert qu'aux blocs de conversion, jamais à l'information. */
  --fond: #f7f3ea;
  --carte: #fffdf8;
  --encre: #13222e;
  --encre-douce: #4b5a6b;
  --encre-faible: #64727f;   /* AA sur papier : 4,6:1 — l'ancien #93a0ac plafonnait a 2,6:1 */
  --trait: #e2d9c8;
  --trait-fort: #c9bda6;
  /* A faixa petróleo e o seu mundo (proposta B « Atlântico ») */
  --tinta: #0c2433;
  --tinta-2: #123146;
  --tinta-trait: #2a4a5d;
  --tinta-borda: #3d5a6c;
  --tinta-texto: #f7f3ea;
  --tinta-suave: #c6d5dd;
  --tinta-fraca: #8fa8b6;
  --tinta-liga: #cfe0e9;
  --tinta-acento: #7fb6d2;
  --ouro: #e8b64c;
  --ouro-vivo: #f0c25e;
  --ouro-tinta: #241a06;
  --bronze: #b0763a;
  --accent: #1f5673;
  --accent-clair: #eaf2f6;
  --accent-vif: #2b7fa8;
  --dourado: #8a5a00;
  --dourado-clair: #fff7db;
  --dourado-trait: #f2d98a;
  --positif: #2f6f4f;
  --positif-clair: #eef5f1;
  --alerte: #9a6212;
  --alerte-clair: #fdf5e7;
  --negatif: #9c3b32;
  --negatif-clair: #fbeeec;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(22,32,43,.05), 0 4px 16px rgba(22,32,43,.05);
}

* { box-sizing: border-box; }
:root { color-scheme: light; }
html { accent-color: var(--accent); }

body {
  margin:0;
  font: 16px/1.55 "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

h1, h2, h3 { line-height: 1.25; margin:0; font-weight: 600; letter-spacing: -.011em; }
/* Les GRANDS titres passent en Newsreader : c'est la voix éditoriale de la
   famille Tagus. Les valeurs chiffrées restent en Hanken (tabulaire). */
.hero h1, .titre-etape, .carte > h2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 600; letter-spacing: -.01em;
}
p { margin:0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- ossature ---------- */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: rgba(255,253,249,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.bandeau::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-vif) 55%, var(--dourado-trait));
}
.bandeau .dedans {
  max-width: 940px; margin:0 auto; padding:var(--esp-3) var(--esp-4);
  display: flex; align-items: center; gap:var(--esp-3);
}
/* La marque : le symbole azulejo (src/app/marca.tsx) et le nom en capitales
   espacées, comme le logotype de Tagus Rentals. L'or du moulinet et de
   « Valor » est l'identité de la marque, pas une couleur d'information : la
   règle de l'or réservé à la conversion ne vise pas le logotype. */
.marque {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: inherit; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.marque .simbolo { width: 30px; height: 30px; flex: none; display: block; }
.marque em { font-style: normal; color: var(--ouro); }
.bandeau .source { margin-left:auto; font-size: 12.5px; color: var(--encre-faible); }

/* Le menu de tête : discret à côté de la marque, il passe sous elle quand
   l'écran se resserre — pas de hamburger pour cinq liens. */
.menu-topo { display: flex; flex-wrap: wrap; gap: 2px var(--esp-2); align-items: baseline; }
.menu-topo a {
  font-size: 13px; color: var(--encre-douce); text-decoration: none;
  padding: 2px var(--esp-1); border-radius: 6px; white-space: nowrap;
}
.menu-topo a:hover { color: var(--accent); background: var(--accent-clair); text-decoration: none; }
.menu-topo a[aria-current="page"] { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) {
  .bandeau .dedans { flex-wrap: wrap; row-gap: var(--esp-1); }
  .bandeau .source { flex-basis: 100%; margin-left: 0; }
}

main { max-width: 940px; margin:0 auto; padding:var(--esp-5) var(--esp-4) var(--esp-7); }

/* ---------- progression ---------- */

.etapes { display: flex; gap:var(--esp-1); margin-bottom:var(--esp-5); flex-wrap: wrap; }
.etapes li {
  list-style: none; font-size: 13px; color: var(--encre-douce);
  padding:var(--esp-1) var(--esp-3); border-radius: 999px; background: transparent;
  border: 1px solid var(--trait); white-space: nowrap;
}
.etapes li[data-etat="active"] { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 550; }
.etapes li[data-etat="faite"] { color: var(--accent); border-color: var(--accent-clair); background: var(--accent-clair); cursor: pointer; }

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

.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding:var(--esp-5); box-shadow: var(--ombre);
}
.carte + .carte { margin-top:var(--esp-4); }
.titre-etape { font-size: 22px; margin-bottom:var(--esp-1); }
.sous-titre { color: var(--encre-douce); margin-bottom:var(--esp-5); font-size: 15px; }

/* ---------- choix (intentions) ---------- */

.choix { display: grid; gap:var(--esp-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.choix button {
  text-align: left; padding:var(--esp-4); border: 1.5px solid var(--trait);
  border-radius: var(--rayon); background: var(--carte); cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.choix button:hover { border-color: var(--accent-vif); transform: translateY(-1px); box-shadow: var(--ombre); }
.choix button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-clair); }
.choix strong { display: block; font-size: 15.5px; margin-bottom:var(--esp-1); }
.choix span { color: var(--encre-douce); font-size: 13.5px; }
.choix button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- champs ---------- */

.champs { display: grid; gap:var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.champ { display: flex; flex-direction: column; gap:var(--esp-1); }
.champ > label { font-size: 13px; font-weight: 550; color: var(--encre-douce); }
.champ .aide { font-size: 12px; color: var(--encre-faible); }
/* Tous les champs de saisie, pas une liste de types.
   `input[type=email]` manquait : le champ e-mail du formulaire de déblocage
   tombait sur le style natif du navigateur, à côté du champ nom qui, lui,
   était habillé — bordure de 2 px contre 1, aucun arrondi, 31 px de haut
   contre 47. Une liste de types se périme au premier type qu'on ajoute ;
   `password`, `search` et `month` du backoffice étaient déjà dehors. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea {
  padding:var(--esp-2) var(--esp-3); border: 1px solid var(--trait-fort); border-radius: 9px;
  background: #fff; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover { border-color: #a89a84; }
textarea { resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent-vif); outline-offset: 1px; border-color: transparent;
  box-shadow: 0 0 0 4px rgba(43,127,168,.12);
}
.champ[data-erreur] input, .champ[data-erreur] select { border-color: var(--negatif); }
.msg-erreur { font-size: 12.5px; color: var(--negatif); }

/* ---------- recherche de zone ---------- */

.recherche { position: relative; max-width: 460px; }
.resultats {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 10;
  background: var(--carte); border: 1px solid var(--trait-fort);
  border-radius: 8px; box-shadow: var(--ombre); max-height: 320px; overflow-y: auto;
}
.resultats button {
  display: block; width: 100%; text-align: left; padding:var(--esp-2) var(--esp-3);
  background: none; border: 0; border-bottom: 1px solid var(--trait); cursor: pointer;
}
.resultats button:last-child { border-bottom: 0; }
.resultats button:hover, .resultats button:focus { background: var(--accent-clair); }
.resultats .lieu { font-weight: 550; }
.resultats .contexte { color: var(--encre-faible); font-size: 13px; }
.jetons { display: flex; gap:var(--esp-1); margin-top:var(--esp-1); flex-wrap: wrap; }
.jeton {
  font-size: 11px; padding:1px var(--esp-1); border-radius: 999px;
  background: var(--positif-clair); color: var(--positif); border: 1px solid #cfe3d8;
}
.jeton[data-absent] { background: #f4f3f1; color: var(--encre-faible); border-color: var(--trait); text-decoration: line-through; }

/* La pastille : l'origine des données, dite à côté du nom de la zone —
   « dados de portal » (alerte) ou « dados do concelho » (neutre). */
.pastille {
  font-size: 11px; padding:1px var(--esp-1); border-radius: 999px;
  vertical-align: 2px; white-space: nowrap;
  background: var(--accent-clair); color: var(--accent); border: 1px solid #d3e2ea;
}
.pastille[data-ton="alerte"] { background: var(--alerte-clair); color: #6f460b; border-color: #f0dfbe; }

.zone-choisie {
  display: flex; align-items: center; gap:var(--esp-2); padding:var(--esp-3) var(--esp-3);
  background: var(--accent-clair); border: 1px solid #d3e2ea; border-radius: 8px;
}
.zone-choisie strong { font-size: 15.5px; }

/* ---------- annexes ---------- */

.annexes { display: grid; gap:var(--esp-3) var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top:var(--esp-1); }
.annexe { display: flex; flex-direction: column; gap: 4px; }
.annexe label { font-size: 12.5px; font-weight: 550; color: var(--encre-douce); }

/* ---------- critères qualitatifs ---------- */

.groupe + .groupe { margin-top:var(--esp-5); padding-top:var(--esp-4); border-top: 1px solid var(--trait); }
.groupe h3 { font-size: 15px; margin-bottom:3px; }
.groupe .note { font-size: 12.5px; color: var(--encre-faible); margin-bottom:var(--esp-3); }
.critere { display: grid; grid-template-columns: 1fr 210px; gap:var(--esp-3); align-items: center; padding:var(--esp-1) 0; }
.critere > span { font-size: 14.5px; }
.critere small { display: block; color: var(--encre-faible); font-size: 12px; }
@media (max-width: 640px) { .critere { grid-template-columns: 1fr; gap:var(--esp-1); } }

/* ---------- actions ---------- */

.actions { display: flex; gap:var(--esp-2); margin-top:var(--esp-5); align-items: center; }
.bouton {
  padding:var(--esp-2) var(--esp-5); min-height: 46px; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,28,41,.12), 0 3px 10px rgba(31,86,115,.18);
  transition: background .12s, box-shadow .12s, transform .12s;
}
.bouton:hover { background: #17475f; box-shadow: 0 2px 4px rgba(15,28,41,.14), 0 6px 18px rgba(31,86,115,.22); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.bouton.secondaire { background: var(--carte); color: var(--encre); border-color: var(--trait-fort); box-shadow: none; }
.bouton.secondaire:hover { background: #f4efe7; box-shadow: none; }
.actions .pousse { margin-left:auto; }

/* ---------- résultat ---------- */

.principal { display: grid; gap:var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin:var(--esp-4) 0; }
.mesure { padding:var(--esp-3) var(--esp-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.mesure[data-vedette] { border-color: var(--accent); background: var(--accent-clair); }
.mesure .etiquette { font-size: 12.5px; color: var(--encre-douce); margin-bottom:var(--esp-1); }
.mesure .valeur { font-size: 25px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mesure .appoint { font-size: 12.5px; color: var(--encre-faible); margin-top:3px; font-variant-numeric: tabular-nums; }

.verdict { padding:var(--esp-3) var(--esp-4); border-radius: 8px; font-size: 14.5px; margin-bottom:var(--esp-4); }
.verdict[data-ton="positif"] { background: var(--positif-clair); border: 1px solid #cfe3d8; color: #1e4d37; }
.verdict[data-ton="neutre"] { background: var(--accent-clair); border: 1px solid #d3e2ea; }
.verdict[data-ton="alerte"] { background: var(--alerte-clair); border: 1px solid #f0dfbe; color: #6f460b; }
.verdict[data-ton="negatif"] { background: var(--negatif-clair); border: 1px solid #efd4d0; color: #7a2c25; }

.lecture { list-style: none; padding:0; margin:0; display: grid; gap:var(--esp-2); }
.lecture li { padding-left:var(--esp-4); position: relative; font-size: 14.5px; color: var(--encre-douce); }
.lecture li::before { content: "›"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }

.tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top:var(--esp-1); }
.tableau th { text-align: left; font-weight: 550; color: var(--encre-douce); font-size: 12.5px; padding:var(--esp-1) var(--esp-2); border-bottom: 1px solid var(--trait); }
.tableau td { padding:var(--esp-2) var(--esp-2); border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.tableau td:not(:first-child) { text-align: right; }
.tableau tr:last-child td { border-bottom: 0; }

/* ---------- confiance & provenance ---------- */

.confiance { display: flex; align-items: center; gap:var(--esp-2); margin-bottom:var(--esp-2); }
.jauge { flex: 1; height: 6px; background: var(--trait); border-radius: 3px; overflow: hidden; max-width: 220px; }
.jauge i { display: block; height: 100%; background: var(--positif); }
.jauge[data-niveau="moyenne"] i { background: var(--alerte); }
.jauge[data-niveau="faible"] i { background: var(--negatif); }

details.provenance { margin-top:var(--esp-4); }
details.provenance summary { cursor: pointer; font-size: 13.5px; color: var(--accent); }
details.provenance .contenu {
  margin-top:var(--esp-2); padding:var(--esp-3) var(--esp-4); background: #f7f6f3;
  border: 1px solid var(--trait); border-radius: 8px;
  font-size: 13px; color: var(--encre-douce);
}
details.provenance code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.avertissement {
  margin-top:var(--esp-5); padding:var(--esp-3) var(--esp-4); background: #f7f6f3;
  border-left: 3px solid var(--trait-fort); border-radius: 0 8px 8px 0;
  font-size: 13px; color: var(--encre-douce);
}

.attente { color: var(--encre-faible); font-size: 14.5px; }
.bloc-erreur {
  padding:var(--esp-3) var(--esp-4); background: var(--negatif-clair); border: 1px solid #efd4d0;
  border-radius: 8px; color: #7a2c25; font-size: 14.5px; margin-bottom:var(--esp-4);
}
.bloc-erreur ul { margin:var(--esp-2) 0 0; padding-left:var(--esp-4); }

/* ---------- aperçu du calcul de surface ---------- */
.apercu {
  margin:var(--esp-2) 0 var(--esp-1); padding:var(--esp-2) var(--esp-3); background: var(--accent-clair);
  border: 1px solid #d3e2ea; border-radius: 8px;
  font-size: 13.5px; line-height: 1.9; color: var(--encre-douce);
}
.apercu strong { color: var(--encre); font-weight: 600; }
.apercu span { white-space: nowrap; }
.apercu em { font-style: normal; font-weight: 600; color: var(--accent); }

/* ---------- dépôt de documents ---------- */
.depot {
  border: 2px dashed var(--trait-fort); border-radius: var(--rayon);
  padding:var(--esp-5) var(--esp-4); text-align: center; background: #fbfaf8; transition: border-color .12s, background .12s;
}
.depot[data-survol] { border-color: var(--accent); background: var(--accent-clair); }
.depot p { margin:0 0 var(--esp-1); }
.depot .aide { font-size: 12.5px; color: var(--encre-faible); }
button.lien {
  background: none; border: 0; padding:0; color: var(--accent);
  text-decoration: underline; cursor: pointer; font: inherit;
}

/* ---------- fourchette d'incertitude ---------- */
.fourchette { margin:var(--esp-4) 0 var(--esp-1); padding:var(--esp-3) var(--esp-4); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.fourchette .bornes { display: flex; justify-content: space-between; align-items: baseline;
  gap:var(--esp-2); flex-wrap: wrap; font-size: 13.5px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.fourchette .bornes .milieu { font-size: 14px; color: var(--encre); text-align: center; }
.fourchette .bornes strong { font-size: 19px; letter-spacing: -.01em; }
/* La disposition des bornes est refondue en fin de feuille, en grille. */
.fourchette .piste { height: 6px; border-radius: 3px; margin:var(--esp-2) 0 var(--esp-1);
  background: linear-gradient(90deg, var(--trait) 0%, var(--accent) 50%, var(--trait) 100%); }
.fourchette details summary { cursor: pointer; font-size: 13px; color: var(--accent); }

/* ---------- sélecteur de langue ----------
   Des liens rendus par le serveur (src/app/moldura.tsx, LinguasTopo) : la
   même page dans l'autre langue. Les boutons restent stylés pour le
   backoffice, qui garde les siens. */
.langues { margin-left:var(--esp-2); display: inline-flex; gap:2px; vertical-align: middle; }
.langues button, .langues a {
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding:var(--esp-1) var(--esp-2); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--encre-douce); cursor: pointer;
}
.langues a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1.4; }
.langues button:hover, .langues a:hover { color: var(--encre); background: #f2f1ee; text-decoration: none; }
.langues button[aria-current], .langues a[aria-current] { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---------- bascule essentiel / expert ---------- */
.bascule { display: flex; align-items: center; gap:var(--esp-1); margin: calc(-1 * var(--esp-1)) 0 var(--esp-4); flex-wrap: wrap; }
.bascule button {
  padding:var(--esp-1) var(--esp-3); border: 1px solid var(--trait-fort); border-radius: 999px;
  background: var(--carte); color: var(--encre-douce); cursor: pointer; font-size: 13.5px;
}
.bascule button:hover { background: #f5f4f1; }
.bascule button[aria-pressed] { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 550; }
.bascule .aide { font-size: 12.5px; color: var(--encre-faible); margin-left:var(--esp-1); }
.texte-brut {
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; max-height: 280px; overflow: auto;
  background: #fff; padding:var(--esp-2) var(--esp-2); border: 1px solid var(--trait); border-radius: 6px; margin:var(--esp-1) 0 0;
}

/* ── prix d'achat et rendement ────────────────────────────────────────────
   Un investisseur lit une grille, pas une phrase : la ligne de son objectif
   doit se repérer sans la chercher. */
.tableau-rendement { overflow-x: auto; margin-bottom:var(--esp-4); }
.tableau-rendement table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tableau-rendement th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-faible); font-weight: 600; padding:var(--esp-1) var(--esp-2); white-space: nowrap;
}
.tableau-rendement th:not(:first-child), .tableau-rendement td:not(:first-child) { text-align: right; }
.tableau-rendement td {
  padding:var(--esp-1) var(--esp-2); border-top: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}
.tableau-rendement tr[data-cible] td {
  background: var(--accent-clair); font-weight: 600; color: var(--accent);
}

/* ── seconde partie du rapport investisseur ───────────────────────────────
   L'estimation vaut pour tout acheteur ; ce qui suit ne vaut que si l'on
   loue. La rupture doit se voir sans être lue. */
.partie-deux {
  margin-top:var(--esp-6); padding-top:var(--esp-5);
  border-top: 2px solid var(--trait-fort);
}
.partie-deux > h2 {
  font-size: 19px; margin:0 0 2px; letter-spacing: -.01em;
}
.partie-deux > .sous-titre { margin-bottom:var(--esp-4); }

/* ── proposition de contact ───────────────────────────────────────────────
   Après le résultat, jamais avant : c'est un service qui se propose, pas un
   péage. Le cadre laiton la distingue du contenu d'analyse sans crier. */
.carte-contact {
  margin-top:var(--esp-5); padding:var(--esp-4) var(--esp-5);
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 3px solid #8a6420; border-radius: 0 var(--rayon) var(--rayon) 0;
}
.carte-contact h3 { margin:0 0 2px; font-size: 17px; }


/* ── petit écran ──────────────────────────────────────────────────────────
   Une main, un pouce : marges resserrées, tableaux qui glissent sous le
   doigt, boutons pleine largeur en fin de page. */
@media (max-width: 640px) {
  main { padding:var(--esp-4) var(--esp-3) calc(var(--esp-7) + env(safe-area-inset-bottom)); }
  /* les étapes glissent sur une ligne au lieu d'empiler trois rangées */
  .etapes { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--esp-3)) var(--esp-4); padding:2px var(--esp-3) var(--esp-1); scrollbar-width: none; }
  .etapes::-webkit-scrollbar { display: none; }
  .bandeau .dedans { flex-wrap: wrap; row-gap:2px; }
  /* le sélecteur de langue vit DANS #source : pas de troncature, il s'aligne à droite */
  .bandeau .source { flex-basis: 100%; order: 3; margin-left:0; font-size: 11.5px;
    display: flex; align-items: center; flex-wrap: wrap; gap:2px var(--esp-1); }
  .bandeau .source .langues { margin-left:auto; }
  .carte { padding:var(--esp-4) var(--esp-3); }
  .titre-etape { font-size: 20px; }
  .tableau, .tableau-rendement { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tableau-rendement table { min-width: 520px; }
  .resultats { max-height: 55vh; }
  .actions { flex-wrap: wrap; }
  .actions .bouton { flex: 1 1 auto; text-align: center; }
  .actions .pousse { margin-left:0; }
  .mesure .valeur { font-size: 23px; }
  .bandeau .dedans { padding:var(--esp-2) var(--esp-3); }
}

/* Ce que seul l'interne voit : dit, pour qu'on ne s'y trompe jamais. */
.pastille-interne {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: var(--encre); color: #fff; padding:1px var(--esp-1); border-radius: 4px; vertical-align: 1px;
}


/* Mention légale de pied de page. Elle doit être lisible, pas cachée : le
   DL 156/2005 exige le lien vers le livre de réclamations « em local visível
   e de forma destacada ». Discrète, donc, mais pas invisible. */
footer.legal {
  margin-top:var(--esp-7);
  padding:var(--esp-4) 0 var(--esp-5);
  border-top: 1px solid var(--trait, #e6e6e6);
  font-size: 12px;
  color: var(--texte-faible, #7a7a7a);
}
footer.legal .dedans {
  max-width: 980px; margin:0 auto; padding:0 var(--esp-4);
  display: flex; flex-wrap: wrap; gap:var(--esp-1) var(--esp-4); justify-content: space-between;
}
footer.legal a { color: var(--tinta-liga); text-decoration: none; }
footer.legal a:hover { color: var(--tinta-texto); text-decoration: underline; text-underline-offset: 3px; }


/* Le voile sur les valeurs non débloquées.
   Les titres restent lisibles : on montre la structure de ce qu'on obtient
   plutôt qu'un mur. Le voile est du CSS, donc contournable par qui ouvre les
   outils du navigateur — c'est assumé. Ce rapport est gratuit, il s'échange
   contre une adresse ; rien ici ne se vend, donc rien n'a besoin d'être
   défendu, seulement demandé. */
.fosco {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
.lecture.fosco li { color: var(--encre-douce, #666); }

/* Ce qui reste visible, mis en avant : la valeur et sa fourchette. C'est ce
   qui rend l'outil credible ; le reste est ce qui le rend utile. */
.resumo-livre {
  display: flex; flex-wrap: wrap; gap:var(--esp-4) var(--esp-6);
  padding:var(--esp-4) var(--esp-4); margin:0 0 var(--esp-4);
  background: var(--fond-doux, #f4f6f8);
  border-radius: 10px;
}

/* Une case de consentement : cliquable en entier, et jamais serrée contre le
   texte — une case qu'on rate est une case qu'on ne coche pas. */
label.consentimento {
  display: flex; gap:var(--esp-2); align-items: flex-start;
  margin:0 0 var(--esp-2); padding:2px 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--encre-douce, #555);
  cursor: pointer;
}
label.consentimento input { margin-top:3px; flex: none; }
/* La case « Vender em {zona} » (phase 3) : un encadré à part, jamais pré-coché. */
.caixa-partilha { border: 1px solid var(--trait, #e4e1dc); border-radius: 8px; padding: 12px 14px; }
.caixa-partilha h4 { margin: 0 0 6px; font-size: 14.5px; }
.caixa-partilha .aide { margin: 0 0 8px; }
label.consentimento:hover { color: var(--encre, #222); }


/* La page de l'avis de confidentialité. Un texte qu'on doit pouvoir lire :
   une mention légale illisible ne remplit pas son office. */
.prosa { max-width: 720px; margin:var(--esp-5) auto; line-height: 1.65; }
.prosa h2 { font-size: 20px; margin:var(--esp-6) 0 var(--esp-2); }
.prosa h3 { font-size: 16px; margin:var(--esp-5) 0 var(--esp-1); }
.prosa p  { margin:0 0 var(--esp-2); }
.prosa ul { margin:0 0 var(--esp-3); padding-left:var(--esp-4); }
.prosa li { margin:0 0 var(--esp-1); }
.prosa table { width: 100%; border-collapse: collapse; margin:0 0 var(--esp-4); font-size: 14px; }
.prosa td { padding:var(--esp-1) var(--esp-2); border-bottom: 1px solid var(--trait, #eee); vertical-align: top; }
.prosa tr:first-child td { font-weight: 600; }
.prosa blockquote {
  margin:0 0 var(--esp-3); padding:var(--esp-2) var(--esp-3);
  background: var(--fond-doux, #f4f6f8); border-radius: 8px;
  font-size: 14px; color: var(--encre-douce, #555);
}
.prosa hr { border: 0; border-top: 1px solid var(--trait, #eee); margin:var(--esp-5) 0; }


/* La page de préférences. Chaque ligne est un formulaire à elle seule : une
   finalité se retire sans toucher aux autres. */
.pref-linha {
  display: flex; flex-wrap: wrap; gap:var(--esp-2) var(--esp-3); align-items: center;
  padding:var(--esp-3) 0; border-bottom: 1px solid var(--trait, #eee);
}
.pref-texto { flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.pref-estado {
  font-size: 12.5px; color: var(--encre-faible, #999);
  text-transform: lowercase; flex: none;
}
.pref-estado.activo { color: var(--positif, #1f7a4d); font-weight: 600; }


/* La signature du bandeau. Deux registres sur une ligne : ce que le site
   fait, puis d'où viennent ses chiffres. */
.baseline { display: inline-flex; align-items: baseline; gap:var(--esp-1); flex-wrap: wrap; }
.baseline strong { font-weight: 600; color: var(--encre); }
.baseline em { font-style: normal; color: var(--encre-faible); font-size: 0.92em; }


/* Un titre de section. La règle générale pose margin:0 sur tous les titres,
   ce qui obligeait chaque h3 à porter son propre style en ligne : neuf
   variantes pour une seule intention, entre 24 et 28 pixels de marge haute.
   Le premier d'une carte ne prend pas de marge — il n'a rien au-dessus. */
.sec { font-size: 15px; margin: var(--esp-5) 0 var(--esp-1); }
.sec:first-child { margin-top: 0; }


/* « Facultatif » se lit sous la case qu'il qualifie, pas trois lignes plus
   haut : c'est là qu'on hésite à cocher. */
.facultativo {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 12.5px;
  color: var(--encre-faible);
}

/* ══ Le rythme à l'appel ══════════════════════════════════════════════════
   Dernier lot : quatre-vingt-dix-neuf marges écrites une par une dans le
   balisage, avec trente valeurs distinctes pour six intentions. L'œil lit ça
   comme du laisser-aller sans pouvoir dire pourquoi.

   Ces classes sont en FIN de feuille à dessein : elles ont la même
   spécificité (0,0,1,0) que `.actions`, `.avertissement` ou `.bloc-erreur`,
   qui posent déjà leur propre marge. Seul l'ordre source les départage. Les
   déplacer plus haut les rendrait silencieusement inopérantes. */
.mt-2 { margin-top: var(--esp-2); }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.mt-5 { margin-top: var(--esp-5); }
.mb-2 { margin-bottom: var(--esp-2); }

/* La règle qui manquait. `.aide` était écrite cinquante-trois fois et n'existait
   comme règle que scopée : hors d'un `.champ`, d'un `.depot` ou d'une `.bascule`,
   une aide retombait à 16px et chaque appel rattrapait sa marge à la main. */
.aide { font-size: 12.5px; color: var(--encre-faible); margin: 2px 0 var(--esp-2); }
.aide:last-child { margin-bottom: 0; }
ul.aide { margin: 0; padding-left: var(--esp-4); }
/* Dans une grille ou un flex, la fusion des marges ne joue pas : on les annule. */
.champ .aide, .depot .aide, .bascule .aide, .actions .aide { margin: 0; }

/* Le signe d'un effet, pas une couleur choisie au cas par cas. Ces trois-là
   vivaient dans admin.css, invisibles au site public, qui réécrivait donc
   `color:var(--negatif)` cinq fois de suite. */
.effet-pos { color: var(--positif); }
.effet-neg { color: var(--negatif); }
.effet-nul { color: var(--encre-faible); }
.effet-alerte { color: var(--alerte); }

/* Rôles. Un nom pour ce que la chose EST, pas pour ce qu'elle mesure. */
.sous { display: block; font-size: 12px; color: var(--encre-faible); margin-top: 2px; }
.estompe { opacity: .5; }
.nowrap { white-space: nowrap; }
.etroit { max-width: 420px; }
.champs.etroit { margin-bottom: var(--esp-4); }
.en-tete-bloc { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap: var(--esp-5); margin-top: var(--esp-4); }
.sous-sec { font-size: 13px; font-weight: 600; margin: var(--esp-4) 0 var(--esp-2); }
.sous-sec:first-child { margin-top: 0; }

/* Contextes : la mise en forme appartient à la structure, pas à l'appel. */
.sec span { font-weight: 400; color: var(--encre-faible); }
.zone-choisie > div { flex: 1; }
.confiance > span { font-size: 13px; color: var(--encre-douce); }
.confiance > span:last-child { color: var(--encre-faible); }
/* L'aide qui suit la fourchette lui est collée : le retrait annule exactement
   la marge basse de la fourchette, il reste donc lié à l'échelle. */
.fourchette + .aide { margin-top: calc(-1 * var(--esp-1)); margin-bottom: var(--esp-3); }
.aide + .principal { margin-top: 0; }
details.provenance details > p { margin: var(--esp-1) 0 0; }

/* Le journal de résolution, en mode expert. Ce n'est pas une `.provenance` :
   il vit dans le contenu, pas dans un dépliant de source. */
details.journal { margin-top: var(--esp-2); }
details.journal > p { margin: var(--esp-1) 0 0; }

/* ══ Hiérarchie, profondeur, chaleur ══════════════════════════════════════
   La page était juste, et plate : tout y avait le même poids, la valeur
   estimée comme la mention légale. Ce lot ne change ni la palette ni la
   structure, il donne un ordre de lecture. */

/* ── 1. Le chiffre, ancré ─────────────────────────────────────────────────
   La fourchette est ce que le visiteur est venu chercher : elle cesse d'être
   une boîte blanche parmi d'autres. */
.fourchette {
  background: linear-gradient(180deg, #f3f8fa 0%, var(--carte) 62%);
  border-color: #cfe0e9;
  box-shadow: 0 1px 2px rgba(31, 86, 115, .06), 0 6px 20px rgba(31, 86, 115, .06);
  padding: var(--esp-4) var(--esp-5) var(--esp-3);
}
.fourchette .bornes .milieu strong {
  font-size: 30px; font-weight: 660; color: var(--accent); letter-spacing: -.025em;
}
.fourchette .bornes .milieu { font-size: 12.5px; color: var(--encre-douce); }
.fourchette .piste {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #dbe7ee 0%, var(--accent-vif) 50%, #dbe7ee 100%);
  box-shadow: inset 0 1px 2px rgba(22, 32, 43, .08);
}

/* ── 2. Les mesures : une vedette, des comparses ──────────────────────────
   Un liseré porteur à gauche plutôt qu'un fond plein : il désigne sans
   repeindre, et il survit au voile. */
.mesure {
  box-shadow: 0 1px 2px rgba(22, 32, 43, .04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.mesure[data-vedette] {
  border-color: #cfe0e9; background: var(--carte);
  border-left: 4px solid var(--accent);
  box-shadow: 0 1px 2px rgba(31, 86, 115, .08), 0 8px 22px rgba(31, 86, 115, .07);
}
.mesure[data-vedette] .valeur { color: var(--accent); font-size: 27px; }
.mesure[data-vedette] .etiquette { color: var(--accent); font-weight: 550; }

/* ── 3. Le voile dit « fermé », pas « cassé » ─────────────────────────────
   Un flou seul ressemble à un défaut d'affichage. Désaturé et légèrement
   effacé, il se lit comme une porte close, ce qu'il est. */
.fosco {
  filter: blur(6px) saturate(.45);
  opacity: .62;
}

/* ── 4. Trois rangs de boutons, pas cinq boutons égaux ────────────────────
   `discret` est le troisième rang : présent, jamais concurrent. */
.bouton {
  box-shadow: 0 1px 2px rgba(22, 32, 43, .10);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.bouton:hover { box-shadow: 0 2px 6px rgba(31, 86, 115, .22); }
.bouton.discret {
  background: transparent; color: var(--encre-faible); border-color: transparent;
  box-shadow: none; font-weight: 500;
}
.bouton.discret:hover { background: #f0efec; color: var(--encre); box-shadow: none; }

/* La barre de fin : l'action d'abord, la navigation poussée à droite. */
.actions-fim { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--trait); }
/* L'outil interne vit sous la ligne, hors de la hiérarchie du visiteur. */
.actions-interne { margin-top: var(--esp-2); display: flex; }

/* ── 5. La carte de contact se voit ───────────────────────────────────────
   Le liseré laiton de 3 px était si discret qu'on ne distinguait plus la
   proposition du contenu d'analyse. Elle garde sa retenue et gagne un fond. */
.carte-contact {
  background: linear-gradient(180deg, #fdfaf3 0%, var(--carte) 70%);
  border-color: #e8dcc2; border-left-width: 4px;
  border-radius: var(--rayon);
  box-shadow: 0 1px 2px rgba(138, 100, 32, .06), 0 6px 18px rgba(138, 100, 32, .06);
  padding: var(--esp-5);
}
.carte-contact h3 { font-size: 18px; letter-spacing: -.01em; }
.carte-contact .actions { margin-top: var(--esp-4); }
.carte-contact .bouton { padding: var(--esp-3) var(--esp-5); }
/* « (facultativo) » se lit sur la ligne de la case, pas sous elle. */
.facultativo { display: inline; margin-left: 4px; }

/* ── 6. Les étapes, plus lisibles ─────────────────────────────────────────*/
.etapes li[data-etat="active"] { box-shadow: 0 2px 8px rgba(31, 86, 115, .25); }
.etapes li[data-etat="faite"]:hover { background: #e2edf3; }

/* ── 7. Les champs répondent au doigt ─────────────────────────────────────*/
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea { transition: border-color .12s ease, box-shadow .12s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(31, 86, 115, .12); }

/* La ligne des bornes était un flex qui se répartissait : avec la valeur
   centrale passée à 30 px, elle se met à retourner à la ligne entre 480 et
   900 px, et la borne haute part seule sous les deux autres. Une grille à
   trois colonnes ne peut pas se tromper : bas à gauche, valeur au centre,
   haut à droite, quelle que soit la largeur du chiffre. */
.fourchette .bornes {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: var(--esp-2) var(--esp-3);
}
.fourchette .bornes > span:first-child { text-align: left; }
.fourchette .bornes > span:last-child { text-align: right; }
.fourchette .bornes .milieu { text-align: center; }
.fourchette .bornes .milieu strong { display: block; margin-top: 2px; }

/* Sous 560 px la valeur prend toute la largeur et les bornes l'encadrent
   dessous : à cette taille, trois colonnes serreraient les trois chiffres. */
@media (max-width: 560px) {
  .fourchette .bornes { grid-template-columns: 1fr 1fr; }
  .fourchette .bornes .milieu { grid-row: 1; grid-column: 1 / -1; }
  .fourchette .bornes .milieu strong { font-size: 27px; }
}


/* ── O hero, a única frase que o Google lê sem executar nada ───────────── */
.hero { margin: 0 0 var(--esp-5); max-width: 60ch; }
.hero h1 {
  font-size: 27px; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 var(--esp-2); text-wrap: balance;
}
.hero p { margin: 0; font-size: 15.5px; color: var(--encre-douce); }
.hero[hidden] { display: none; }

/* O «facultativo» nos passos que o são: a extensão percebida do formulário
   cai de sete para cinco. */
.etapes .fac {
  font-style: normal; font-size: 10.5px; color: var(--encre-faible);
  margin-left: 4px; letter-spacing: .02em;
}
.etapes li[data-etat="active"] .fac { color: #cfe0e9; }

/* ── A proposta de contacto pós-desbloqueio ────────────────────────────── */
.carte-contact {
  background: var(--dourado-clair); border: 1px solid var(--dourado-trait);
  border-radius: var(--rayon); padding: var(--esp-4);
}
.carte-contact h3 { font-family: "Newsreader", Georgia, serif; font-size: 19px; }
.carte-contact textarea { min-height: 64px; }
/* Le terme du service : lisible comme une clause, pas caché comme une aide.
   C'est la phrase qui fait du rapport un lead — elle se lit AVANT le bouton. */
.servico-contacto {
  font-size: 13.5px; color: var(--encre); line-height: 1.5;
  padding: var(--esp-2) var(--esp-3); margin: var(--esp-3) 0 var(--esp-2);
  background: rgba(255,255,255,.55); border-left: 3px solid var(--dourado-trait);
  border-radius: 0 8px 8px 0;
}
.carte-contact .duas { display: grid; gap: var(--esp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .carte-contact .duas { grid-template-columns: 1fr; } }

/* As páginas de entrada usam o hero como corpo: a lista e o botão precisam
   de um andamento próprio. */
.hero ul { margin: var(--esp-3) 0; padding-left: 20px; }
.hero ul li { margin-bottom: 6px; color: var(--encre-douce); }
main > .actions { margin-top: 0; }
a.bouton { display: inline-block; text-decoration: none; line-height: 24px; }

/* ── As páginas /precos: índice, concelho, freguesia ───────────────────── */
.migalhas { font-size: 13px; color: var(--encre-faible); margin-bottom: var(--esp-4); }
.migalhas a { color: var(--encre-douce); }

/* O índice dos 304 concelhos: colunas que o navegador reparte sozinho. */
.lista-concelhos {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: var(--esp-5);
}
.lista-concelhos li {
  display: flex; justify-content: space-between; gap: var(--esp-2);
  break-inside: avoid; padding: 3px 0; font-size: 14px;
}
.lista-concelhos .n { color: var(--encre-faible); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) { .lista-concelhos { columns: 2; } }
@media (max-width: 560px) { .lista-concelhos { columns: 1; } }

/* Os concelhos do mesmo distrito, as freguesias irmãs: um parágrafo de
   ligações, não uma lista com puces. */
.ligacoes-vizinhos { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ligacoes-vizinhos a {
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-clair); color: var(--accent);
  font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.ligacoes-vizinhos a:hover { background: var(--tinta); color: var(--tinta-texto); }

.cta-estimar .bouton { margin-right: var(--esp-2); margin-bottom: var(--esp-2); }

/* A frase citável: o número que um motor de resposta recopia, visível e
   destacado sem gritar. */
.citavel {
  font-family: "Newsreader", Georgia, serif; font-size: 17px; line-height: 1.5;
  color: var(--encre); background: var(--carte); border-left: 3px solid var(--accent);
  padding: var(--esp-3) var(--esp-4); border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 0 0 var(--esp-4);
}

/* O gráfico de evolução e o texto por zona. */
.grafico-evolucao { margin: var(--esp-2) 0 var(--esp-3); }
.grafico-evolucao svg { width: 100%; height: auto; display: block; }
.texto-zona { font-size: 14.5px; color: var(--encre-douce); }
.hero-liga { font-size: 14px; margin-top: 4px; }

/* ---------- contacto ---------- */
.hero-contacto { position: relative; overflow: hidden; }
.ilustracao-horizonte {
  display: block; width: min(560px, 100%); height: auto; margin: var(--esp-4) auto 0;
  color: var(--accent); opacity: .5;
}
.contacto-vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-3); }
.via {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--esp-4); border: 1px solid var(--trait); border-radius: 10px;
  background: var(--carte); text-decoration: none; color: inherit;
}
.via:hover { border-color: var(--accent); text-decoration: none; }
.via strong { font-size: 19px; letter-spacing: -.01em; color: var(--accent); }
.via-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-faible); }

/* ---------- deltas do gráfico ---------- */
.grafico-deltas { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin: 0 0 var(--esp-2); }
.delta { font-size: 13px; font-weight: 600; padding: 2px var(--esp-2); border-radius: 999px; white-space: nowrap; }
.delta em { font-style: normal; font-weight: 450; opacity: .85; }
.delta[data-tom="alta"] { background: var(--positif-clair); color: var(--positif); }
.delta[data-tom="baixa"] { background: var(--negatif-clair); color: var(--negatif); }
.delta[data-tom="estavel"] { background: var(--accent-clair); color: var(--accent); }

/* ══ Proposta B « Atlântico » ═══════════════════════════════════════════
   Escolhida por François (27 set 2026) sobre o canvas « Duas propostas ».
   A faixa petróleo carrega a marca, o menu, o fio de ariane e o herói, e
   fecha com o friso de azulejos; a Fraunces dá a voz aos títulos; o ouro
   PLENO continua reservado ao gesto comercial (a regra da casa não muda,
   o ouro só ficou mais assumido). Camada de sobreposição: a base acima
   continua válida, isto redefine só o que a proposta muda. */

.hero h1, .titre-etape, .carte > h2, .citavel, .carte-contact h3,
.mesure .valeur, .fourchette .bornes .milieu strong {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

/* — a faixa: bandeau fundido com migalhas e herói — */
/* O sangramento a 50vw conta a barra de scroll : corta-se no html, e SÓ no
   html. Posto também no body, fazia dele um contentor de scroll que nunca
   rola, e o cabeçalho « sticky » deixava de ficar no topo. clip não cria
   contentor nenhum ; hidden fica como recurso para os Safari antigos. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
.bandeau { background: var(--tinta); border-bottom: 0; color: var(--tinta-texto); }
.bandeau::before { display: none; }
.bandeau .marque em { color: var(--ouro); }
.menu-topo a { color: var(--tinta-liga); }
.menu-topo a:hover { color: #ffffff; background: rgba(255,255,255,.08); }
.bandeau .source { color: var(--tinta-fraca); }
.langues button, .langues a { color: var(--tinta-fraca); }
.langues button:hover, .langues a:hover { color: var(--tinta-texto); background: rgba(255,255,255,.08); }
.langues button[aria-current], .langues a[aria-current] { color: var(--tinta); background: var(--tinta-texto); border-color: var(--tinta-texto); }

main > .migalhas {
  margin: calc(-1 * var(--esp-5)) calc(50% - 50vw) 0;
  padding: var(--esp-3) calc(50vw - 50%) 0;
  background: var(--tinta); color: var(--tinta-fraca);
}
main > .migalhas a { color: var(--tinta-liga); }
main > .migalhas [aria-current] { color: var(--tinta-texto); }

main > .hero {
  max-width: none;
  margin: 0 calc(50% - 50vw) var(--esp-6);
  padding: var(--esp-4) calc(50vw - 50%) calc(var(--esp-6) + 30px);
  background-color: var(--tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26'%3E%3Cpath d='M0 13 L14 2 L28 13 L14 24 Z' fill='none' stroke='%232a4a5d' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom -1px center;
  color: var(--tinta-suave);
}
main > .hero:first-child { margin-top: calc(-1 * var(--esp-5)); padding-top: var(--esp-6); }
main > .hero h1 {
  color: var(--tinta-texto);
  font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -.015em;
}
main > .hero p { color: var(--tinta-suave); }
main > .hero a { color: var(--ouro-vivo); }
main > .hero ul li { color: var(--tinta-suave); }
main > .hero .aide { color: var(--tinta-fraca); }
.hero-liga { color: var(--tinta-fraca); margin-top: var(--esp-2); }

.kicker {
  margin: 0 0 var(--esp-3); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-vivo);
}
.acoes-hero { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin: var(--esp-4) 0 0; }

/* o herói da entrada: texto à esquerda, o horizonte à direita.
   O id pesa mais do que .hero[hidden]: sem a regra seguinte, avançar no
   formulário deixava o herói escuro pregado no ecrã. */
#hero { display: flex; gap: var(--esp-7); align-items: center; }
#hero[hidden] { display: none; }
#hero .hero-conteudo { flex: 1 1 460px; max-width: 640px; }
#hero > .ilustracao-horizonte { width: 340px; flex: 0 1 340px; margin: 0; }
@media (max-width: 900px) { #hero > .ilustracao-horizonte { display: none; } }

.ilustracao-horizonte { color: var(--tinta-acento); opacity: .8; }

/* — botões: petróleo por defeito, ouro pleno no comercial — */
.bouton { background: var(--tinta); border-color: var(--tinta); }
.bouton:hover { background: var(--tinta-2); }
.bouton.secondaire { background: var(--carte); color: var(--tinta); border-color: var(--tinta); }
.bouton.secondaire:hover { background: #eef2f4; }
.bouton.ouro, .cta-estimar .bouton:not(.secondaire), .carte-contact .bouton:not(.secondaire) {
  background: var(--ouro); border-color: var(--ouro); color: var(--ouro-tinta); font-weight: 700;
}
/* A cor do texto também : sem ela, a regra dos links do herói (dourado)
   ganhava ao passar o rato e o texto desaparecia no botão dourado. */
.bouton.ouro:hover, .cta-estimar .bouton:not(.secondaire):hover,
.carte-contact .bouton:not(.secondaire):hover { background: var(--ouro-vivo); color: var(--ouro-tinta); }
.bouton.contorno:hover { color: var(--tinta-texto); }
.bouton.contorno {
  background: transparent; color: var(--tinta-texto);
  border-color: var(--tinta-borda); box-shadow: none;
}
.bouton.contorno:hover { background: rgba(255,255,255,.07); }

.etapes li[data-etat="active"] { background: var(--tinta); border-color: var(--tinta); }
.choix button[aria-pressed="true"] { border-color: var(--tinta); }
.choix button:hover { border-color: var(--tinta-borda); }

/* — as medidas ao estilo B: filete no topo, etiqueta em versalete — */
.mesure { border-top: 3px solid var(--tinta); }
.mesure .etiquette {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.mesure[data-vedette] { border-left: 1px solid var(--trait); border-top-color: var(--tinta); }
.mesure[data-vedette] .valeur { color: var(--tinta); }
.mesure[data-vedette] .etiquette { color: var(--encre-douce); font-weight: 600; }

.citavel { border-left-color: var(--tinta); font-size: 18px; }

/* — o cartão comercial: contorno ouro, fundo de papel — */
.cta-estimar { background: var(--carte); border: 1.5px solid var(--ouro); }

/* — o cartão escuro (os Censos): o contraste assinatura da proposta — */
.carte.escura { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-suave); }
.carte.escura > h2 { color: var(--tinta-texto); }
.carte.escura .texto-zona { color: var(--tinta-suave); }
.carte.escura .texto-zona strong { color: var(--tinta-texto); }
.carte.escura .aide { color: var(--tinta-fraca); }

/* — rodapé escuro — */
.legal { background: var(--tinta); border-top: 0; color: var(--tinta-fraca); }
.legal a { color: var(--tinta-liga); }

/* — contacto: os dois gestos em petróleo — */
.via strong { color: var(--tinta); }
.via:hover { border-color: var(--tinta); }

@media (max-width: 720px) {
  main > .hero { padding-bottom: calc(var(--esp-5) + 28px); }
  main > .hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* ── As afinações pedidas sobre a proposta B (Cascais à vista) ──────────
   Os textos correm à largura do bloco, os títulos dos blocos crescem, os
   botões do bloco comercial alinham numa linha em desktop, e as ligações
   ganham enfim uma regra de casa: nada de azul sublinhado de origem. */

/* títulos dos blocos: a voz Fraunces com o tamanho que lhe cabe */
.carte > h2 { font-size: 26px; letter-spacing: -.012em; margin-bottom: var(--esp-3); }

/* o bloco comercial: os três botões numa linha (e a quebrar com folga
   quando o ecrã aperta) */
.cta-estimar p:last-of-type { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: 0; }
.cta-estimar .bouton { margin: 0; }

/* ── as ligações, regra de casa ── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-vif); }

/* no texto corrido: sublinhado fino, afastado da letra, na cor esbatida —
   presente sem gritar */
:where(p:not(.ligacoes-vizinhos), figcaption, .aide, .lecture) a:where(:not(.bouton)) {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(31, 86, 115, .35);
}
:where(p:not(.ligacoes-vizinhos), figcaption, .aide, .lecture) a:where(:not(.bouton)):hover {
  text-decoration-color: currentColor;
}

/* nas tabelas e nas listas de concelhos, o sublinhado só à passagem:
   sublinhar 300 linhas seria pintar a página */
td a, .lista-concelhos a { text-decoration: none; }
td a:hover, .lista-concelhos a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* nos fundos escuros, a mesma regra com as cores da faixa */
main > .hero p a { color: var(--ouro-vivo); text-decoration-color: rgba(240, 194, 94, .45); }
main > .hero p a:hover { color: var(--ouro-vivo); text-decoration-color: currentColor; }
main > .migalhas a:hover { color: var(--tinta-texto); }
.carte.escura a { color: var(--tinta-acento); text-decoration-color: rgba(127, 182, 210, .45); }
.legal a:hover { color: var(--tinta-texto); }
.migalhas a:hover { color: var(--encre); }

/* ══ Revisão de gráficos e design (28 set 2026) ═════════════════════════
   Conclusões da revisão em seis frentes, aplicadas. */

/* — o gráfico de evolução : dois desenhos, o CSS escolhe — */
.grafico-evolucao .g-estreito { display: none; }
@media (max-width: 560px) {
  .grafico-evolucao .g-largo { display: none; }
  .grafico-evolucao .g-estreito { display: block; width: 100%; height: auto; }
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — as percentagens : neutras (uma subida é boa para quem vende e má para
     quem compra : uma página pública de estatística não toma partido), com
     a forma a dizer o sentido, não só a cor — */
.delta[data-tom="alta"]    { background: #e7eef2; color: var(--tinta); }
.delta[data-tom="baixa"]   { background: #f4eadf; color: #7a4f22; }
.delta[data-tom="estavel"] { background: var(--fond); color: var(--encre-douce); border: 1px solid var(--trait); }
.delta::before { font-size: .8em; margin-right: 3px; }
.delta[data-tom="alta"]::before  { content: "▲"; }
.delta[data-tom="baixa"]::before { content: "▼"; }

/* — a barra de valor do resultado, no mundo Atlântico (era o azul antigo) — */
.fourchette {
  background: var(--carte); border-color: var(--trait); border-top: 3px solid var(--tinta);
  box-shadow: 0 1px 2px rgba(12, 36, 51, .05), 0 6px 20px rgba(12, 36, 51, .05);
}
.fourchette .bornes .milieu strong { color: var(--tinta); }
.fourchette .piste { background: linear-gradient(90deg, #e6e0d3 0%, #c9bda6 50%, #e6e0d3 100%); box-shadow: none; position: relative; }
.fourchette .piste i {
  position: absolute; left: 50%; top: -3px; width: 4px; height: 14px; margin-left: -2px;
  border-radius: 2px; background: var(--bronze);
}
.fourchette details summary { color: var(--tinta); }

/* — rodapé legal : a menção que a lei quer « destacada » passava a 3,7:1
     (footer.legal, mais específica, ganhava à camada Atlântico) — */
footer.legal { color: var(--tinta-fraca); border-top: 0; }

/* — as etapas encostadas ao cartão (o ol trazia 40 px de recuo) — */
.etapes { margin-top: 0; }
@media (min-width: 641px) { .etapes { padding: 0; } }

/* — hierarquia : o título de etapa não é um título de cartão de zona — */
.carte > h2.titre-etape { font-size: 22px; margin-bottom: var(--esp-1); }
.partie-deux > h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; }
@media (max-width: 640px) {
  .carte > h2 { font-size: 22px; }
  .carte > h2.titre-etape { font-size: 20px; }
}

/* — heróis das páginas servidor : a faixa sangra, o texto guarda uma medida
     de leitura (120 caracteres por linha num ecrã largo) — */
main > .hero:not(#hero) > h1,
main > .hero:not(#hero) > p,
main > .hero:not(#hero) > ul { max-width: 680px; }
@media (min-width: 901px) {
  main > .hero:not(#hero):has(> .ilustracao-horizonte) {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--esp-7); align-items: center;
  }
  main > .hero:not(#hero) > :not(.ilustracao-horizonte) { grid-column: 1; }
  main > .hero:not(#hero) > .ilustracao-horizonte { grid-column: 2; grid-row: 1 / span 4; width: 340px; margin: 0; }
}

/* — os dois blocos comerciais com a mesma cara : papel e contorno dourado — */
.carte-contact {
  margin-top: var(--esp-5); padding: var(--esp-5);
  background: var(--carte); border: 1.5px solid var(--ouro); border-left-width: 1.5px;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.servico-contacto { background: var(--fond); border-left-color: var(--ouro); }

/* — a medida em destaque volta a destacar-se — */
.mesure[data-vedette] { border-top-color: var(--bronze); background: #fbf6ee; }
@media (min-width: 641px) and (max-width: 1100px) {
  .principal:has(> .mesure:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* — superfícies que ainda pintavam com o azul antigo — */
html { accent-color: var(--tinta); }
.etapes li[data-etat="faite"] { color: var(--tinta); background: #e7eef2; border-color: #e7eef2; }
.etapes li[data-etat="faite"]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* — telemóvel : cabeçalho compacto, alvos de toque, tabelas, botões — */
@media (max-width: 640px) {
  .menu-topo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; }
  .menu-topo::-webkit-scrollbar { display: none; }
  .menu-topo a { padding: 10px 8px; }
  .langues button { min-height: 36px; min-width: 40px; }
  .langues a { min-height: 36px; min-width: 40px; }
  .ligacoes-vizinhos a { padding: 9px 14px; }
  .lista-concelhos li { padding: 8px 0; }
  .etapes li { padding: 10px var(--esp-3); }
}
@media (max-width: 640px) {
  /* Só a tabela de rendimento precisa de rolar ; as curtas ocupam o cartão. */
  .tableau { display: table; overflow: visible; }
  .tableau-rendement, .tableau.larga { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .cta-estimar p:last-of-type .bouton { flex: 1 1 100%; text-align: center; }
}

/* — contornos e foco sobre o petróleo — */
:root { --tinta-borda: #5b7a8c; --encre-faible: #5f6d7a; }
.bandeau :focus-visible, main > .hero :focus-visible, main > .migalhas :focus-visible,
.legal :focus-visible, .carte.escura :focus-visible { outline-color: var(--tinta-liga); }

/* ══ SEO PT, 1 out 2026 : o texto servidor, as FAQ visíveis, o aviso de língua ══ */

/* O formulário nasce vazio e o app.mjs enche-o : sem altura mínima, o texto
   servidor por baixo saltava várias centenas de píxeis (CLS). As alturas são
   as do primeiro ecrã do formulário, medidas a 1280 px (etapas em duas
   linhas, 74 px ; cartão 432 px) e a 488 px (etapas numa linha que rola,
   50 px ; cartão 620 px). align-items impede as etapas de esticar.
   Só na página pública (irmãos do #hero) : o backoffice usa o mesmo
   id="scene" e a mesma folha, e ficava com 200 px vazios sob o login. */
#hero ~ #etapes { min-height: 74px; align-items: flex-start; }
/* A altura mínima só enquanto o cartão de espera está lá : depois, um ecrã
   mais curto que o primeiro (« Por onde começar? ») deixava um vazio sob o
   bloco de ação. A troca de ecrã segue um clique, não conta para o CLS. */
#hero ~ #scene:has(.attente) { min-height: 430px; }
@media (max-width: 640px) {
  #hero ~ #etapes { min-height: 50px; }
  #hero ~ #scene:has(.attente) { min-height: 600px; }
}

.bloco-inicio { margin-top: var(--esp-6); }
.bloco-inicio > * + * { margin-top: var(--esp-4); }
.passos { margin: 0; padding-left: 22px; display: grid; gap: var(--esp-2); }
.passos li { font-size: 15px; color: var(--encre-douce); }
.passos li strong { color: var(--encre); }

/* As perguntas frequentes : visíveis, porque o FAQPage só descreve o que se vê. */
.faq details { border-top: 1px solid var(--trait); padding: var(--esp-2) 0; }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--encre); font-size: 15px;
  list-style-position: outside; padding: 2px 0;
}
.faq summary:hover { color: var(--accent); }
.faq details p { margin: var(--esp-1) 0 0; font-size: 14.5px; color: var(--encre-douce); }
.faq summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* O cartão « vender » das zonas do mandato : o gesto comercial, logo ouro. */
.cta-vender, .cta-gestao { background: var(--dourado-clair); border: 1.5px solid var(--ouro); }
.cta-vender p:last-of-type, .cta-gestao p:last-of-type { margin-bottom: 0; }
.mencoes { margin-top: var(--esp-4); }
.lista-destaque { columns: 3; }
@media (max-width: 860px) { .lista-destaque { columns: 2; } }
.prosa-pagina p, .prosa-pagina li { font-size: 15px; color: var(--encre-douce); }
.prosa-pagina h3 { font-size: 15.5px; margin: var(--esp-4) 0 var(--esp-1); }
.acoes-cartao { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: 0; }
.tableau .estimar { white-space: nowrap; font-size: 13.5px; }

/* O aviso de outra língua : fixo, para não empurrar nada (CLS zero), e
   fechável. Nunca muda a língua da página : só propõe. */
.aviso-lingua {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 420px; margin-left: auto;
  display: flex; align-items: center; gap: var(--esp-2);
  background: var(--tinta); color: var(--tinta-texto);
  border-radius: var(--rayon); padding: var(--esp-2) var(--esp-3);
  box-shadow: 0 6px 24px rgba(12, 36, 51, .25); font-size: 14px;
}
.aviso-lingua a { color: var(--ouro-vivo); font-weight: 600; }
.aviso-lingua button {
  margin-left: auto; background: transparent; border: 0; color: var(--tinta-suave);
  font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer; min-width: 36px; min-height: 36px;
}
.aviso-lingua button:hover { color: #fff; }
.aviso-lingua :focus-visible { outline: 2px solid var(--tinta-liga); outline-offset: 2px; }
.prosa h1 { font-size: 26px; margin: 0 0 var(--esp-3); font-family: "Fraunces", Georgia, serif; font-weight: 600; }

/* ══ Blocos de ação, 1 out 2026 : o azul escolhido por François ══════════ */

/* Os seis ecrãs do formulário (intenção, documentos, zona, imóvel,
   qualidade, contexto) : um fundo azul claro reconhecível, para se ver logo
   onde se trabalha. O ouro continua reservado à conversão (.carte-contact).
   Os tokens redefinidos aqui valem para tudo o que o bloco contém :
   --encre-faible escurece para manter 4,5:1 sobre o azul (4,3:1 sem isso). */
.carte.acao {
  --trait: #b4cfdf;
  --trait-fort: #9dbdd0;
  --encre-faible: #56636f;
  background: #e7f0f6; border-color: #b4cfdf; box-shadow: none;
}
.carte.acao .choix button { background: var(--carte); }
.carte.acao .choix button[aria-pressed="true"] {
  background: var(--carte); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.carte.acao .depot { background: var(--carte); }