/* ============================================================
   BALESTRA REAL ESTATE DEBT — Charte graphique v3
   « Le tempo » — système dérivé du nom (escrime : la balestra,
   bond en avant explosif qui précède la fente).
   ============================================================ */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;src:url("fonts/cormorant-garamond-latin-400-normal-VzBZf0m.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;src:url("fonts/cormorant-garamond-latin-400-italic-d4WsxB6.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;src:url("fonts/cormorant-garamond-latin-500-normal-bxSoFoA.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;src:url("fonts/cormorant-garamond-latin-500-italic-KkcNEEU.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;src:url("fonts/cormorant-garamond-latin-600-normal-nIkH7HP.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;src:url("fonts/cormorant-garamond-latin-600-italic-w-ed6RG.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;src:url("fonts/cormorant-garamond-latin-700-normal-F4mFegS.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;src:url("fonts/inter-latin-400-normal-poxsSdI.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;src:url("fonts/inter-latin-500-normal-Uwgfwtt.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;src:url("fonts/inter-latin-600-normal-keCwlca.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url("fonts/jetbrains-mono-latin-400-normal-zjT1pI9.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url("fonts/jetbrains-mono-latin-500-normal-l4pIovd.woff2") format('woff2');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;src:url("fonts/jetbrains-mono-latin-600-normal-oGlM_wV.woff2") format('woff2');font-display:swap;}

:root{
  /* ---------- BASE — 60 % ---------- */
  --chaux:#F4F1E9;        /* fond principal — la craie de la piste */
  --chaux-2:#E9E4D6;      /* fond secondaire, cartouches */

  /* ---------- ENCRE — 30 % ---------- */
  --encre:#1B1917;        /* texte, sections profondes */
  --encre-70:rgba(27,25,23,.70);
  --encre-50:rgba(27,25,23,.62);   /* 4,50:1 sur chaux et sur chaux-2 */
  --encre-30:rgba(27,25,23,.30);
  --encre-15:rgba(27,25,23,.15);
  --encre-08:rgba(27,25,23,.08);

  /* ---------- ACIER — 7 % · rôle : la MESURE ---------- */
  /* Bleu de la lame du monogramme. Réservé aux données,
     graduations, seuils, jauges, et au monogramme. */
  --acier:#343E5F;
  --acier-clair:#6E7899;
  --acier-08:rgba(52,62,98,.08);
  --acier-15:rgba(52,62,98,.15);

  /* ---------- LAITON — 3 % · rôle : la TOUCHE ---------- */
  /* Un seul mot en italique par page, un seul filet. Jamais un aplat. */
  --laiton:#9A7B3C;         /* décoratif : filets, display ≥ 24 px */
  --laiton-texte:#7C5F2B;   /* variante accessible : labels < 18 px (4,83:1) */
  --laiton-clair:#C9A96B;   /* sur fond sombre (7,8:1 sur encre) */

  /* ---------- clairs sur sombre ---------- */
  --chaux-70:rgba(244,241,233,.70);
  --chaux-50:rgba(244,241,233,.62); /* 4,50:1 sur acier */
  --chaux-30:rgba(244,241,233,.30);
  --chaux-15:rgba(244,241,233,.15);

  /* ---------- typographie ---------- */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* ---------- trame ---------- */
  --gouttiere:64px;
  --tempo:8px; /* unité d'espacement — tous les espacements sont des multiples */

}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--chaux);color:var(--encre);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--acier);outline-offset:3px;}
.page{width:100%;max-width:1440px;margin:0 auto;position:relative;overflow-x:clip;background:var(--chaux);}

/* ============================================================
   1. LE DISPOSITIF SIGNATURE — LA GRADUATION
   Dérivé des graduations d'une lame et du marquage d'une piste
   d'escrime. Apparaît partout où il y a un seuil ou une durée.
   ============================================================ */

/* Règle graduée horizontale : ticks longs tous les 5 */
.graduation{
  height:14px;width:100%;
  background-image:
    repeating-linear-gradient(90deg, var(--acier) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--encre-30) 0 1px, transparent 1px 8px);
  background-size:100% 14px, 100% 7px;
  background-position:bottom left, bottom left;
  background-repeat:repeat-x;
  opacity:.9;
}
.graduation.sur-sombre{
  background-image:
    repeating-linear-gradient(90deg, var(--laiton-clair) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--chaux-30) 0 1px, transparent 1px 8px);
}
.graduation.fine{height:9px;}

/* Jauge de seuil : la valeur, sa limite, la graduation dessous */
.jauge{padding-top:6px;}
.jauge .piste{position:relative;height:3px;background:var(--encre-15);}
.jauge .piste .lame{position:absolute;left:0;top:0;bottom:0;background:var(--acier);}
.jauge .piste .butoir{position:absolute;top:-4px;bottom:-4px;width:1.5px;background:var(--laiton);}
.jauge .lg{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--encre-50);text-transform:uppercase;}

/* Marque de tempo : le compteur d'étape (J+0, 01, I…) */
.tempo{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--acier);text-transform:uppercase;font-weight:600;}
.tempo.sur-sombre{color:var(--laiton-clair);}

/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */
.display{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em;}
h1.display{font-size:52px;}
h2.display{font-size:30px;line-height:1.16;}
h3.display{font-size:26px;line-height:1.2;}

/* LA TOUCHE — un seul segment en italique laiton par page */
.touche{font-style:italic;color:var(--laiton);}
.touche.sur-sombre{color:var(--laiton-clair);}

/* Sur-titre : mono, capitales, espacé */
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--laiton-texte);font-weight:500;}
.eyebrow.sur-sombre{color:var(--laiton-clair);}
.eyebrow.acier{color:var(--acier);}

.lede{font-size:17.5px;line-height:1.65;color:var(--encre-70);}
p{font-size:15px;line-height:1.7;}
.petit{font-size:13px;line-height:1.65;color:var(--encre-70);}
.mono{font-family:var(--mono);}
.chiffre{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums tabular-nums;}

/* ============================================================
   3. FILETS & CARTOUCHES
   ============================================================ */
.hr{height:1px;background:var(--encre-15);width:100%;border:0;}
.hr.sur-sombre{background:var(--chaux-30);}
.filet-touche{height:1px;background:var(--laiton);width:56px;}

/* ============================================================
   4. BOUTONS & LIENS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--encre);border-bottom:1px solid var(--encre-30);padding-bottom:4px;transition:border-color .18s;}
.btn:hover{border-color:var(--laiton);}
.btn.solid{font-style:normal;font-family:var(--sans);font-size:14px;font-weight:500;background:var(--encre);color:var(--chaux);border:none;padding:15px 28px;letter-spacing:.02em;transition:background .18s;}
.btn.solid:hover{background:var(--acier);}
.btn.sur-sombre{color:var(--chaux);border-bottom-color:var(--chaux-30);}
.btn.sur-sombre:hover{border-bottom-color:var(--laiton-clair);}
.pill{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;border:1px solid var(--encre-30);padding:6px 14px;color:var(--encre-70);}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gouttiere);height:96px;position:relative;z-index:20;}
.nav-logo{display:flex;align-items:center;flex-shrink:0;}
.nav-logo .lockup{height:52px;width:auto;display:block;}
.nav-logo .markonly{display:none;height:42px;width:42px;}
.nav-links{display:flex;gap:38px;font-size:14.5px;color:var(--encre-70);}
.nav-links a{padding-bottom:3px;border-bottom:1px solid transparent;transition:.18s;}
.nav-links a:hover{color:var(--encre);}
.nav-links a.active{color:var(--encre);border-bottom-color:var(--laiton);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-cta{font-family:var(--sans);font-size:13.5px;font-weight:500;background:var(--encre);color:var(--chaux);padding:13px 22px;transition:background .18s;}
.nav-cta:hover{background:var(--acier);}

/* ============================================================
   6. SECTIONS SOMBRES — deux registres
   .encre = profondeur, autorité   ·   .acier = la mesure, la donnée
   ============================================================ */
.dark{background:var(--encre);color:var(--chaux);}
.dark .eyebrow{color:var(--laiton-clair);}
.dark .display{color:var(--chaux);}
.navy{background:var(--acier);color:var(--chaux);}
.navy .eyebrow{color:var(--laiton-clair);}

/* ============================================================
   7. PIED DE PAGE
   ============================================================ */
.footer{background:var(--encre);color:var(--chaux);padding:80px var(--gouttiere) 28px;}
.footer-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr 1fr;gap:38px;padding-bottom:56px;}
.footer h2{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--laiton-clair);margin-bottom:18px;text-transform:uppercase;}
.footer a,.footer p{font-size:14.5px;color:var(--chaux-70);line-height:1.9;}
.footer a:hover{color:var(--chaux);}
.footer-bottom{border-top:1px solid var(--chaux-15);padding-top:22px;display:flex;justify-content:space-between;gap:40px;font-size:12px;color:var(--chaux-50);}

/* ============================================================
   8. COMPOSANTS DE DONNÉES
   ============================================================ */
.stat-row{display:flex;}
.stat{flex:1;padding:28px 32px;border-left:1px solid var(--encre-15);}
.stat:first-child{border-left:none;}
.stat .n{font-family:var(--serif);font-size:40px;font-weight:500;}
.stat .l{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--encre-50);margin-top:8px;}
.stat.sur-sombre{border-left-color:var(--chaux-15);}
.stat.sur-sombre .l{color:var(--chaux-50);}

.card{background:var(--chaux);border:1px solid var(--encre-15);padding:36px;}

table.compare{width:100%;border-collapse:collapse;font-size:14px;}
table.compare th,table.compare td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--encre-15);}
table.compare th{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--encre-50);font-weight:500;}
table.compare td.hi{color:var(--acier);font-weight:500;}

/* ============================================================
   9. ACCESSIBILITÉ
   ============================================================ */
.sv-skip{position:absolute;left:-9999px;}
.sv-skip:focus{left:16px;top:16px;background:var(--encre);color:var(--chaux);padding:12px 18px;z-index:100;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---------------------------------------------------------------
   Accès à la plateforme métier. Visible, mais typographié en
   secondaire : le bouton plein reste réservé à l'origination.
   --------------------------------------------------------------- */
.nav-secure{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-70);border:1px solid var(--encre-30);
  padding:11px 15px;line-height:1;white-space:nowrap;
  transition:border-color .16s ease, color .16s ease;
}
.nav-secure:hover{border-color:var(--acier);color:var(--acier);}
.nav-secure:focus-visible{outline:2px solid var(--laiton);outline-offset:2px;}
.nav-panel-secure{
  font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-70)!important;border-top:1px solid var(--encre-15);padding-top:16px!important;margin-top:6px;
}

/* Cibles d'au moins 24 px de haut (WCAG 2.5.8) sans changer la
   position du texte : on élargit la zone, pas la typographie. */
.nav-links a{padding-top:4px;padding-bottom:4px;}
.footer-grid a{display:inline-block;padding:3.5px 0;}
.footer-bottom a{display:inline-block;padding:4px 0;}