/* ============================================================
   LocalBooster — feuille des surfaces éditoriales
   Réalisations · fiches · liens · journal
   ------------------------------------------------------------
   Signature (Claude Design, 11/08/2026, validée par Rodolphe) :
   « le versant preuve se compose comme un dossier annoté — une
   marge technique en JetBrains Mono court le long d'un contenu
   large, les titres ne s'allument que sur UN SEUL MOT en
   Instrument Serif italique, et le filet dégradé souligne
   exclusivement des preuves (chiffres, démos, sources), jamais
   des offres. Là où l'accueil vend en grille et en bandeau, ces
   pages racontent en colonne et en marge. »

   Jetons repris à l'identique de index.html — cette feuille ne
   redéfinit aucune couleur, elle consomme le design system.
   ============================================================ */

/* ---------- Polices (servies depuis /assets/fonts/) ---------- */
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/intertight-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/intertight-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/assets/fonts/intertight-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:600; font-display:swap;
  src:url(/assets/fonts/intertight-latin-600-italic.woff2) format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/instrumentserif-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/jetbrainsmono-latin-400-normal.woff2) format('woff2'); }

/* ---------- Jetons ---------- */
:root {
  --lb-bg:#08090F; --lb-bg-elev-1:#0E0F16; --lb-bg-elev-2:#14151F; --lb-bg-elev-3:#1B1D29;
  --lb-border:rgba(255,255,255,.07); --lb-border-strong:rgba(255,255,255,.14);
  --lb-border-bright:rgba(255,255,255,.22);
  --lb-fg:#F2F3F7; --lb-fg-2:#A1A4B2; --lb-fg-3:#5F6273; --lb-fg-4:#3A3D4A;
  --lb-cyan:#5BD9F0; --lb-cyan-bright:#8FE7F6; --lb-cyan-deep:#2BA9C4;
  --lb-mint:#22D6A0; --lb-mint-bright:#6FE7BF; --lb-mint-deep:#15A37A;
  --lb-violet:#A78BFA; --lb-amber:#F5B85F; --lb-red:#F26B6B;

  --lb-glow-primary:radial-gradient(circle at 30% 20%, rgba(91,217,240,.18), transparent 55%),
                    radial-gradient(circle at 70% 60%, rgba(34,214,160,.14), transparent 55%);
  --lb-gradient-line:linear-gradient(90deg, transparent 0%, rgba(91,217,240,.6) 30%,
                     rgba(34,214,160,.6) 70%, transparent 100%);
  --lb-gradient-text:linear-gradient(135deg,#5BD9F0 0%,#22D6A0 60%,#A78BFA 100%);
  --lb-gradient-card:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.7),
                inset 0 0 0 .5px var(--lb-border);
  --shadow-lift:0 18px 60px -22px rgba(0,0,0,.8), inset 0 0 0 .5px var(--lb-border-strong);

  --font-sans:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-serif:"Instrument Serif","EB Garamond",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-lg:17px; --text-xl:20px;
  --text-2xl:26px; --text-3xl:34px; --text-4xl:46px; --text-5xl:62px; --text-6xl:84px;
  --lh-tight:1.02; --lh-snug:1.14; --lh-normal:1.45; --lh-loose:1.65;
  --track-mono:.14em; --track-tight:-.025em; --track-tighter:-.04em;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms; --dur-base:240ms; --dur-slow:480ms;

  /* propre à l'éditorial : la largeur de la marge annotée */
  --marge:104px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--lb-bg); color:var(--lb-fg);
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--fw-regular);
  line-height:var(--lh-loose); -webkit-font-smoothing:antialiased;
  background-image:var(--lb-glow-primary);
  background-repeat:no-repeat; background-size:100% 900px; background-position:top center;
}
a{color:var(--lb-cyan); text-decoration:none; transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--lb-cyan-bright)}
::selection{background:rgba(91,217,240,.24)}

/* ---------- L'étiquette en marge : la signature de la maison ---------- */
.lb-mono{
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--lb-fg-3);
  line-height:var(--lh-normal);
}

/* ---------- Le filet : sous les preuves, jamais sous les offres ---------- */
.lb-filet{height:1px; border:0; background:var(--lb-gradient-line); margin:var(--space-12) 0}

/* ---------- Le lockup (obligatoire — décision #42) ---------- */
.lb-logo{display:inline-flex; align-items:center; gap:10px; color:var(--lb-fg);
  font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--fw-medium);
  letter-spacing:-.022em; line-height:1; white-space:nowrap}
.lb-logo:hover{color:var(--lb-fg)}
.lb-logo-mark{width:24px; height:24px; display:block; flex:none;
  filter:drop-shadow(0 0 14px rgba(91,217,240,.35))}
.lb-logo-word-2{font-style:italic; font-weight:var(--fw-semibold)}

/* ---------- Charpente ---------- */
.lb-shell{max-width:880px; margin:0 auto; padding:0 var(--space-6) var(--space-24)}
.lb-shell--etroit{max-width:620px}

/* ---------- Le bandeau : STRICTEMENT celui de l'accueil ----------
   Même logo, même menu, même bouton, partout — quelle que soit la page.
   Les ancres pointent vers l'accueil (/#offre) pour fonctionner de partout. */
header.lb-header{position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(8,9,15,.72); border-bottom:.5px solid var(--lb-border)}
.lb-header-inner{max-width:1240px; margin:0 auto; padding:14px var(--space-8);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6)}
.lb-nav{display:flex; align-items:center; gap:var(--space-6)}
.lb-nav a{font-size:var(--text-sm); color:var(--lb-fg-2); letter-spacing:-.005em;
  transition:color var(--dur-fast) var(--ease-out)}
.lb-nav a:hover, .lb-nav a[aria-current]{color:var(--lb-fg)}
.lb-header-right{display:flex; align-items:center; gap:var(--space-3)}

.lb-burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; background:none;
  border:.5px solid var(--lb-border); border-radius:10px; cursor:pointer}
.lb-burger span{display:block; height:1.5px; width:100%; background:var(--lb-fg);
  border-radius:1px; transition:transform var(--dur-fast) var(--ease-out),
  opacity var(--dur-fast) var(--ease-out)}
.lb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.lb-mobile-menu{display:none; flex-direction:column; gap:var(--space-2);
  padding:var(--space-4) var(--space-5) var(--space-6); border-top:.5px solid var(--lb-border)}
.lb-mobile-menu a{font-size:var(--text-base); color:var(--lb-fg-2); padding:10px 0}
.lb-mobile-menu a:hover{color:var(--lb-fg)}
.lb-mobile-menu a.lb-btn--primaire{color:var(--lb-bg); margin-top:var(--space-2); align-self:flex-start}
.lb-mobile-menu.is-open{display:flex}
@media (max-width:980px){ .lb-nav{display:none} .lb-burger{display:flex} }

/* ---------- Titres : un seul mot s'allume ---------- */
.lb-h1{font-size:var(--text-5xl); line-height:var(--lh-tight);
  letter-spacing:var(--track-tighter); font-weight:var(--fw-semibold); margin:var(--space-6) 0}
.lb-h2{font-size:var(--text-3xl); line-height:var(--lh-snug);
  letter-spacing:var(--track-tight); font-weight:var(--fw-semibold); margin:var(--space-10) 0 var(--space-4)}
.lb-h3{font-size:var(--text-xl); line-height:var(--lh-snug);
  letter-spacing:var(--track-tight); font-weight:var(--fw-semibold); margin:var(--space-8) 0 var(--space-3)}
.lb-flamme{font-family:var(--font-serif); font-style:italic; font-weight:400;
  background:var(--lb-gradient-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-right:.06em}
.lb-chapo{font-size:var(--text-lg); color:var(--lb-fg-2); max-width:58ch; line-height:var(--lh-normal)}

/* ---------- L'entrée en marge : le motif du dossier annoté ---------- */
.lb-rangee{display:grid; grid-template-columns:var(--marge) 1fr; gap:var(--space-6);
  padding:var(--space-8) 0; border-bottom:.5px solid var(--lb-border);
  transition:background var(--dur-fast) var(--ease-out)}
.lb-rangee:hover{background:rgba(255,255,255,.015)}
.lb-rangee__marge{padding-top:6px}
.lb-rangee__num{font-family:var(--font-mono); font-size:var(--text-2xl); color:var(--lb-fg-4);
  line-height:1; letter-spacing:-.02em}
.lb-rangee__titre{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.lb-rangee__titre h2{font-size:var(--text-2xl); font-weight:var(--fw-semibold);
  letter-spacing:var(--track-tight); color:var(--lb-fg); margin:0}
.lb-rangee p{color:var(--lb-fg-2); font-size:var(--text-base); max-width:60ch;
  margin-top:var(--space-2)}
.lb-rangee__lien{display:inline-block; margin-top:var(--space-4); color:var(--lb-mint);
  font-size:var(--text-sm)}
.lb-rangee:hover .lb-rangee__lien{color:var(--lb-mint-bright)}

/* ---------- Pastilles ---------- */
.lb-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lb-fg-2);
  border:1px solid var(--lb-border-strong); border-radius:var(--radius-pill);
  padding:2px 9px; white-space:nowrap}
/* Programme des réalisations à venir (bloc « La suite » de /realisations/) */
.lb-programme{list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; gap:var(--space-3)}
.lb-programme li{display:flex; align-items:baseline; gap:var(--space-3);
  flex-wrap:wrap; color:var(--lb-fg-2); font-size:var(--text-base);
  line-height:var(--lh-snug)}
.lb-programme li::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--lb-fg-4); flex:none; align-self:center}

.lb-point{width:6px; height:6px; border-radius:50%; display:inline-block; flex:none}
.lb-point--mint{background:var(--lb-mint); box-shadow:0 0 10px rgba(34,214,160,.7)}
.lb-point--amber{background:var(--lb-amber)}
.lb-point--gris{background:var(--lb-fg-3)}

/* ---------- Le chiffre qui porte sa source ---------- */
.lb-preuve{margin:var(--space-6) 0; padding-left:var(--space-5);
  border-left:2px solid transparent;
  border-image:var(--lb-gradient-line) 1;
  border-image-slice:1; border-left-width:2px}
.lb-preuve__chiffre{font-size:var(--text-4xl); font-weight:var(--fw-semibold);
  letter-spacing:var(--track-tight); line-height:1.1; color:var(--lb-fg)}
.lb-preuve__source{margin-top:var(--space-2)}

/* ---------- Cartes ---------- */
.lb-carte{display:block; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
  var(--lb-bg-elev-1); border:1px solid var(--lb-border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-card);
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out)}
.lb-carte:hover{border-color:var(--lb-border-strong); transform:translateY(-2px);
  box-shadow:var(--shadow-lift)}
.lb-carte--phare{border-color:rgba(34,214,160,.34)}
.lb-carte--phare:hover{border-color:rgba(34,214,160,.55)}

/* ---------- Boutons ---------- */
.lb-btn{display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); font-weight:var(--fw-medium); letter-spacing:-.01em;
  border-radius:var(--radius-pill); padding:11px var(--space-6);
  border:1px solid var(--lb-border-strong); color:var(--lb-fg); background:var(--lb-bg-elev-2);
  transition:all var(--dur-fast) var(--ease-out)}
.lb-btn:hover{border-color:var(--lb-border-bright); color:var(--lb-fg);
  transform:translateY(-1px)}
.lb-btn--primaire{background:var(--lb-fg); color:#0A0B11; border-color:transparent;
  font-weight:var(--fw-semibold)}
.lb-btn--primaire:hover{background:#fff; color:#0A0B11}
.lb-btn--menthe{background:rgba(34,214,160,.1); border-color:rgba(34,214,160,.45);
  color:var(--lb-mint)}
.lb-btn--menthe:hover{background:rgba(34,214,160,.16); border-color:rgba(34,214,160,.7);
  color:var(--lb-mint-bright)}

/* ---------- Article : sources numérotées en marge ---------- */
.lb-article{display:grid; grid-template-columns:var(--marge) minmax(0,1fr); gap:var(--space-6)}
.lb-article__marge{position:sticky; top:var(--space-6); align-self:start}
.lb-article__corps p{margin:var(--space-5) 0; color:var(--lb-fg-2); max-width:66ch}
.lb-article__corps strong{color:var(--lb-fg); font-weight:var(--fw-semibold)}
.lb-article__corps h2{color:var(--lb-fg)}
.lb-sommaire{list-style:none; display:grid; gap:var(--space-2)}
.lb-sommaire a{color:var(--lb-fg-3); font-family:var(--font-mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.lb-sommaire a:hover, .lb-sommaire a[aria-current]{color:var(--lb-cyan)}

/* ---------- Pied ---------- */
.lb-pied{border-top:.5px solid var(--lb-border); margin-top:var(--space-20);
  padding-top:var(--space-8); color:var(--lb-fg-3);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; line-height:2.2}
.lb-pied a{color:var(--lb-fg-3)}
.lb-pied a:hover{color:var(--lb-fg-2)}

/* ---------- Téléphone : la marge passe au-dessus ---------- */
@media (max-width:720px){
  :root{--marge:0px}
  .lb-shell{padding:0 var(--space-5) var(--space-16)}
  .lb-h1{font-size:var(--text-3xl)}
  .lb-h2{font-size:var(--text-2xl)}
  .lb-chapo{font-size:var(--text-base)}
  .lb-rangee, .lb-article{grid-template-columns:1fr; gap:var(--space-3)}
  .lb-rangee__num{font-size:var(--text-lg)}
  .lb-article__marge{position:static}
  .lb-topnav{gap:var(--space-4); font-size:var(--text-xs)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* ---------- Contrastes typographiques (demande du 11/08) ----------
   Le serif italique ne sert jamais de corps de texte : il ponctue.
   Le mono ne sert jamais de titre : il annote. C'est la tension entre
   les trois familles qui fait la page, pas leur mélange. */

/* la lettrine : le premier mot d'un chapô, en serif italique */
.lb-amorce{font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:1.32em; color:var(--lb-fg); padding-right:.08em}

/* l'exergue : une phrase qu'on isole, grande et serif */
.lb-exergue{font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:var(--text-3xl); line-height:var(--lh-snug); color:var(--lb-fg);
  max-width:26ch; margin:var(--space-12) 0; padding-left:var(--space-6);
  border-left:1px solid var(--lb-border-strong)}

/* le numéro de section, très gros et très pâle, dans la marge */
.lb-numero-geant{font-family:var(--font-mono); font-size:var(--text-4xl);
  line-height:1; color:var(--lb-fg-4); letter-spacing:-.04em}

/* la date, la durée, le compteur : toujours en mono */
.lb-meta{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lb-fg-3)}

/* un mot mis en avant dans un paragraphe, sans gras */
.lb-souligne{color:var(--lb-fg); background:linear-gradient(transparent 68%,
  rgba(34,214,160,.22) 68%)}

/* ---------- Page de liens (destination du lien de bio) ---------- */
.liens-entete{text-align:center; padding:var(--space-12) 0 var(--space-8)}
.liens-cibles{margin-top:0}
.liens-promesse{margin-top:var(--space-4); color:var(--lb-fg-2); font-size:var(--text-lg);
  line-height:var(--lh-normal); max-width:34ch; margin-left:auto; margin-right:auto}
.liens-liste{display:grid; gap:var(--space-3)}
.liens-carte{display:grid; grid-template-columns:56px 1fr 24px; align-items:center;
  gap:var(--space-4); padding:var(--space-5)}
.liens-carte__num{font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--lb-fg-4); letter-spacing:.06em; text-align:center}
.liens-carte h2{font-size:var(--text-lg); font-weight:var(--fw-semibold);
  letter-spacing:var(--track-tight); color:var(--lb-fg); margin:0}
.liens-carte p{font-size:var(--text-sm); color:var(--lb-fg-2); margin-top:2px}
.liens-carte__fleche{color:var(--lb-fg-3); text-align:right; font-size:var(--text-lg)}
.liens-carte:hover .liens-carte__fleche{color:var(--lb-fg-2)}
.liens-carte--phare .liens-carte__num{color:var(--lb-mint)}
.liens-carte--phare:hover .liens-carte__fleche{color:var(--lb-mint)}
.liens-contact{text-align:center; margin-top:var(--space-10); color:var(--lb-fg-2);
  font-size:var(--text-sm); line-height:2.2}
.liens-contact a{color:var(--lb-fg-2)}
.liens-contact a:hover{color:var(--lb-fg)}

/* ---------- Page de liens : la marque en grand à l'arrivée ----------
   Demande du 11/08 : « on sait où on arrive ». Le lockup occupe 75 % de la
   largeur au-dessus de la ligne des cibles — pictogramme puis mot dessous. */
.liens-marque{display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  width:75%; margin:0 auto var(--space-6); color:var(--lb-fg)}
.liens-marque:hover{color:var(--lb-fg)}
.liens-marque__picto{width:38%; max-width:150px; height:auto; display:block;
  filter:drop-shadow(0 0 28px rgba(91,217,240,.4))}
.liens-marque__mot{font-family:var(--font-sans); font-weight:var(--fw-medium);
  font-size:clamp(30px, 11vw, 54px); letter-spacing:-.028em; line-height:1; white-space:nowrap}
.liens-marque__mot em{font-style:italic; font-weight:var(--fw-semibold)}
.liens-entete{padding:var(--space-10) 0 var(--space-8)}