/* =========================================================
   GeoMANET - NEUTRAL THEME (White background, light panels)
   - Accent: Blue + Grey
   - No green usage
   ========================================================= */

/* ========================================
   TOKENS & BASE ELEMENTS
   ======================================== */
:root{
  --bg: #ffffff;
  --panel: #f3f5f7;          /* very light grey panel */
  --panel-2: #eef2f6;        /* subtle gradient variant */
  --card: #ffffff;           /* card background */
  --text: #0f172a;           /* slate-900 */
  --muted: #4b6181;          /* slate-700 */
  --muted-2:#647691;         /* slate-600 */
  --accent: #0ea5e9;         /* sky-500 */
  --accent-2: #0284c7;       /* sky-600 */
  --border: #cbd5e1;         /* slate-300 */
  --border-2:#e2e8f0;        /* slate-200 */

  /* Legacy labels (kept for compatibility) */
  --todo: #0284c7;
  --buy: #ef4444;
  --info: #0ea5e9;
  --done: #0ea5e9;           /* avoid green */

  --title-font: "Trebuchet MS","Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* Layout tokens (kept for site-wide compatibility) */
  --sidebar-w: 320px;
  --sidebar-w-collapsed: 74px;
  --topbar-h: 0px;           /* neutral zone: no forced top padding */
  --sidebar-logo-size: 80px;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
	margin: 0;
	padding: 0;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.95rem;
	background: var(--bg);
	color: var(--text);
	line-height: 1.65;
	/* Neutral zone: do not force sidebar padding */
	padding-top: var(--topbar-h);
	padding-left: 0;
}

/* ========================================
   SITE NAVIGATION LAYOUT
   ======================================== */
.site-sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  max-width: 340px;
  height: 100vh;
  padding: 52px 18px 28px;
  background: linear-gradient(180deg, #1b3a56 0%, #0b1f33 100%);
  color: #f1f5f9;
  overflow-y: auto;
  border-right: 1px solid rgba(148,163,184,0.32);
  box-shadow: 18px 0 36px rgba(4,11,20,0.65);
  z-index: 1300;
  transform: translateX(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  transition: opacity 0.28s ease;
}

@media (min-width: 901px){
  body{
    /* + 22px : l'ombre de la barre est decalee de 18px vers la droite et
       floute sur 36px. Sans cet ecart, la premiere colonne de texte tombe
       dedans. On ecarte le contenu plutot que d'affaiblir l'ombre. */
    padding-left: calc(var(--sidebar-w) + 22px);
  }
  .site-overlay{
    display: none !important;
  }
}

@media (max-width: 900px){
  body{
    padding-left: 0;
  }
  .site-sidebar{
    width: min(82vw, var(--sidebar-w));
    max-width: 360px;
    transform: translateX(-105%);
    padding-top: 84px;
    box-shadow: none;
  }
  body.sidebar-open .site-sidebar{
    transform: translateX(0);
    box-shadow: 16px 0 40px rgba(2,6,23,0.45);
  }
  body.sidebar-open .site-overlay{
    opacity: 1;
    pointer-events: auto;
  }
  body.sidebar-open{
    overflow: hidden;
  }
}

/* ========================================
   TYPOGRAPHY & RICH TEXT
   ======================================== */
h1, h2, h3{
  font-family: var(--title-font);
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0 0 10px 0;
  color: var(--text);
}

h1{
  font-size: 26px;
}

h2{
  font-size: 20px;
  margin-top: 18px;
}

h3{
	font-size: 18px;
	margin-top: 14px;
	letter-spacing: 0.3px;
}

p{
  margin: 0 0 12px 0;
  color: var(--muted);
}

a{
  color: var(--accent-2);
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

ul, ol{
  padding-left: 20px;
  margin: 10px 0 14px 0;
  color: var(--muted);
}

li{
  margin-bottom: 6px;
}

hr{
  border:0;
  border-top: 1px solid var(--border-2);
  margin: 16px 0;
}

blockquote{
  margin: 12px 0 14px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  background: #f8fafc;
  border-radius: 10px;
  color: var(--muted);
}

code{
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  color: var(--text);
}

pre{
  font-family: "Fira Code","Courier New",monospace;
  font-size: 13px;
  background: #0b1220;
  border: 1px solid #111827;
  border-radius: 12px;
  padding: 12px 14px;
  color: #e5e7eb;
  overflow-x: auto;
  white-space: pre;
}

/* ========================================
   HEADER / HERO
   ======================================== */
header{
  /* Padding horizontal aligné sur .container (20px). Il était à ZÉRO : sur les
     pages dont le contenu vit dans <header> — c'est le cas de plusieurs pages
     de Principes — le texte et les puces commençaient pile à la largeur de la
     barre latérale, donc DANS son ombre portée. On garde l'ombre, on écarte le
     contenu. Bénéfice au passage : le contenu de <header> s'aligne désormais
     sur celui de .container, ce qui n'était pas le cas. */
  padding: 28px 20px 18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(14,165,233,0.10), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(148,163,184,0.12), transparent 34%),
    #ffffff;
  border-bottom: 1px solid var(--border-2);
}

.header-inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

header h1{
  color: var(--text);
  display: inline-block;
}

header h1 .geo-accent{
  color: var(--accent);
}

header p{
  max-width: 1040px;
  font-size: 1.02rem;
}

/* ========================================
   CORE LAYOUT & PANELS
   ======================================== */
.container{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 20px 60px;
}

.content{
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* Light panel, minimal border */
.panel{
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px 18px;
  margin: 16px 0;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.06);
}

/* Inner spacing helper (optional) */
.panel .panel-inner{
  max-width: 1040px;
}

/* Programmes intro block + flag panels */
#programmes{
  margin: 16px 0;
}

#programmes .section-header{
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.06);
  margin-bottom: 18px;
}

.program-panel-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.program-panel{
  margin: 0;
  min-height: 100%;
}

.program-panel h3{
  margin-top: 0;
}

.program-panel ul{
  margin-top: 12px;
}

.program-panel .details-link{
  margin-top: 12px;
}

.program-panel.theme-fr{
  background:
    linear-gradient(to bottom, #0055A4 0 100%) left / var(--flag-side-w) 100% no-repeat,
    linear-gradient(to bottom, #EF4135 0 100%) right / var(--flag-side-w) 100% no-repeat,
    linear-gradient(135deg, rgba(0,85,164,0.12), rgba(239,65,53,0.05)),
    linear-gradient(145deg, var(--panel), var(--panel-2));
}

.program-panel.theme-rca{
  background:
    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) left / var(--flag-side-w) 100% no-repeat,

    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) right / var(--flag-side-w) 100% no-repeat,

    linear-gradient(135deg, rgba(0,48,130,0.12), rgba(252,209,22,0.05)),
    linear-gradient(145deg, var(--panel), var(--panel-2));
}

/* Cards: white on light panel */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  padding: 8px 0 0;
}

.card{
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
}

/* ========================================
   NAVIGATION
   ======================================== */
.nav-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.nav-grid a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-2);
  color: var(--text);
  text-align:center;
  font-weight: 600;
}

.nav-grid a:hover{
  border-color: rgba(14,165,233,0.55);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
  text-decoration: none;
}

/* ========================================
   PILOT IMAGE PANEL
   ======================================== */
.pilot-panel{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}

.pilot-card{
  width: 100%;
  max-width: 1040px;
  text-align:center;
  padding: 12px;
}

.pilot-card img{
  display:block;
  margin: 0 auto;
  width: min(100%, 980px);
  height: auto;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: #ffffff;
}

.pilot-card .pilot-caption{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ========================================
   SECTION HEADER / CHAPTER NUMBER
   ======================================== */
.section-header{
  display:flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chapter-number{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.25);
  color: var(--accent-2);
  font-weight: 800;
}

/* ========================================
   DETAILS LINK
   ======================================== */
.details-link{
  display:inline-block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text);
  border: 1px solid var(--border-2);
  background: #ffffff;
  transition: all 0.15s ease;
  font-weight: 700;
}

.details-link:hover{
  border-color: rgba(14,165,233,0.55);
  color: var(--accent-2);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}

/* ========================================
   TAGS / BADGES (no green)
   ======================================== */
.tag{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid var(--border-2);
  background: #ffffff;
  color: var(--muted);
}

.todo, .buy, .info, .done{
  background: #ffffff;
  border: 1px solid var(--border-2);
  color: var(--muted);
}

/* Optional accent versions (blue only) */
.tag-blue{
  background: rgba(14,165,233,0.10);
  border-color: rgba(14,165,233,0.25);
  color: var(--accent-2);
}

/* ========================================
   CHARTER PANEL (grey panel + inner white frame)
   ======================================== */
.panel-charter{
  background: linear-gradient(145deg, #eef2f6, #f3f5f7);
  border: 1px solid var(--border-2);
}

.panel-charter .charter-frame{
  background: #ffffff;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 14px 14px;
  box-shadow: inset 0 0 0 1px rgba(14,165,233,0.10);
}



/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px){
  header{
    padding: 22px 16px 16px;
  }
  .container{
    padding: 16px 16px 52px;
  }
  .grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   THEME: NEUTRAL (DEFAULT)
   - White site background, very light grey panels
   - No flag borders
   ========================================================= */

:root{
  --bg: #ffffff;
  --panel: #f3f5f7;
  --panel-2: #eef2f6;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #334155;
  --muted-2:#475569;
  --accent: #0ea5e9;   /* Geo blue */
  --accent-2:#0284c7;
  --border: #cbd5e1;
  --border-2:#e2e8f0;
}

body{ background: var(--bg); color: var(--text); }

.panel{
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 10px 28px rgba(2,6,23,0.06);
  position: relative; /* needed for themed pseudo-elements */
  overflow: hidden;   /* keeps borders crisp with radius */
}

/* Optional: only flag panels get the special borders
   If you prefer "all panels when theme active", keep this class in selectors below. */
.panel-flag{}


/* =========================================================
   THEME HELPERS (shared)
   - We draw "flag borders" using pseudo-elements
   - This avoids border-image limitations and keeps corners sharp
   ========================================================= */

:root{
  --flag-top-h: 6px;      /* top/bottom border thickness */
  --flag-side-w: 8px;     /* left/right border thickness */
  --flag-center-band: calc(var(--flag-top-h) * 1); /* default; RCA overrides */
}

/* Create 4 sides as overlays (top, bottom, left, right) */
.theme-fr .panel,
.theme-rca .panel,
.panel.panel-flag{
  /* keep base neutral panel look; borders are overlays */
}

.theme-fr .panel::before,
.theme-fr .panel::after,
.theme-fr .panel > .flag-sides,
.theme-rca .panel::before,
.theme-rca .panel::after,
.theme-rca .panel > .flag-sides,
.panel.panel-flag::before,
.panel.panel-flag::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

/* We will implement:
   - ::before = TOP border
   - ::after  = BOTTOM border
   - .flag-sides (child) draws LEFT and RIGHT via its ::before/::after

   If you choose body-class themes, we auto-inject the sides using a pseudo wrapper approach
   that does not require extra HTML by using background layers instead.
   However you requested very specific RCA side distribution; easiest is with extra pseudo elements.
*/

/* No extra HTML approach:
   We'll draw LEFT and RIGHT using background on the panel itself for FR,
   and using two extra pseudo elements for RCA with vertical segmentation.
*/

/* =========================================================
   THEME: FRANCE (flag representation)
   Requirements:
   - TOP border: horizontal divided equally (blue | white | red)
   - BOTTOM border: same
   - LEFT border: all blue
   - RIGHT border: all red
   ========================================================= */

.theme-fr .panel{
  /* Left + right borders as background layers (crisp, no extra elements) */
  background:
    linear-gradient(to bottom, #0055A4 0 100%) left / var(--flag-side-w) 100% no-repeat,
    linear-gradient(to bottom, #EF4135 0 100%) right / var(--flag-side-w) 100% no-repeat,
    linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
}

/* TOP border */
.theme-fr .panel::before{
  top: 0;
  left: 0;
  right: 0;
  height: var(--flag-top-h);
  background: linear-gradient(to right,
    #0055A4 0% 33.333%,
    #ffffff 33.333% 66.666%,
    #EF4135 66.666% 100%
  );
}

/* BOTTOM border */
.theme-fr .panel::after{
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--flag-top-h);
  background: linear-gradient(to right,
    #0055A4 0% 33.333%,
    #ffffff 33.333% 66.666%,
    #EF4135 66.666% 100%
  );
}


/* =========================================================
   THEME: RCA (flag representation)
   Requirements:
   - TOP border: blue, but a narrow red band (1/7 of width) centered
   - BOTTOM border: yellow, but a narrow red band (1/7 of width) centered
   - LEFT border and RIGHT border: vertically segmented equally
     blue / white / green / yellow (top -> bottom)
   ========================================================= */

.theme-rca .panel{
  /* Keep neutral background */
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
}

/* TOP border: blue with centered red band of width 1/7 */
.theme-rca .panel::before{
  top: 0;
  left: 0;
  right: 0;
  height: var(--flag-top-h);
  background:
    linear-gradient(to right,
      #003082 0% 42.857%,   /* blue until center-left (3/7) */
      #D21034 42.857% 57.143%, /* red band (1/7) */
      #003082 57.143% 100%  /* blue rest */
    );
}

/* BOTTOM border: yellow with centered red band of width 1/7 */
.theme-rca .panel::after{
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--flag-top-h);
  background:
    linear-gradient(to right,
      #FCD116 0% 42.857%,     /* yellow */
      #D21034 42.857% 57.143%,/* red band (1/7) */
      #FCD116 57.143% 100%    /* yellow */
    );
}

/* LEFT + RIGHT borders: use background layers for both sides with vertical segmentation */
.theme-rca .panel{
  background:
    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) left / var(--flag-side-w) 100% no-repeat,

    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) right / var(--flag-side-w) 100% no-repeat,

    linear-gradient(145deg, var(--panel), var(--panel-2));
}


/* =========================================================
   OPTIONAL: Apply flag borders only to selected panels
   Instead of body theme classes, use:
     <section class="panel panel-flag theme-fr">...</section>
   or:
     <section class="panel panel-flag theme-rca">...</section>

   The block below enables that pattern.
   ========================================================= */

.panel.theme-fr{
  background:
    linear-gradient(to bottom, #0055A4 0 100%) left / var(--flag-side-w) 100% no-repeat,
    linear-gradient(to bottom, #EF4135 0 100%) right / var(--flag-side-w) 100% no-repeat,
    linear-gradient(145deg, var(--panel), var(--panel-2));
}
.panel.theme-fr::before{
  content:"";
  position:absolute; inset:0 auto auto 0;
  left:0; right:0; top:0; height:var(--flag-top-h);
  background: linear-gradient(to right,
    #0055A4 0% 33.333%,
    #ffffff 33.333% 66.666%,
    #EF4135 66.666% 100%
  );
  pointer-events:none;
}
.panel.theme-fr::after{
  content:"";
  position:absolute; inset:auto auto 0 0;
  left:0; right:0; bottom:0; height:var(--flag-top-h);
  background: linear-gradient(to right,
    #0055A4 0% 33.333%,
    #ffffff 33.333% 66.666%,
    #EF4135 66.666% 100%
  );
  pointer-events:none;
}

.panel.theme-rca{
  background:
    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) left / var(--flag-side-w) 100% no-repeat,

    linear-gradient(to bottom,
      #003082 0% 25%,
      #ffffff 25% 50%,
      #289728 50% 75%,
      #FCD116 75% 100%
    ) right / var(--flag-side-w) 100% no-repeat,

    linear-gradient(145deg, var(--panel), var(--panel-2));
}
.panel.theme-rca::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:var(--flag-top-h);
  background: linear-gradient(to right,
    #003082 0% 42.857%,
    #D21034 42.857% 57.143%,
    #003082 57.143% 100%
  );
  pointer-events:none;
}
.panel.theme-rca::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:var(--flag-top-h);
  background: linear-gradient(to right,
    #FCD116 0% 42.857%,
    #D21034 42.857% 57.143%,
    #FCD116 57.143% 100%
  );
  pointer-events:none;
}

/* ========================================
   VECTOR 2 LANDING PAGE
   ======================================== */
.vector2-page{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vector2-hero{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
}

.vector2-hero-text{
  flex:1 1 320px;
}

.vector2-hero-text ul{
  margin-top:12px;
}

.vector2-hero-figure{
  flex:1 1 260px;
  text-align:center;
}

.vector2-hero-figure img{
  width:100%;
  max-width:420px;
  border-radius:12px;
  border:1px solid var(--border-2);
  box-shadow:0 10px 30px rgba(15,23,42,0.15);
}

.vector2-local-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0 0;
  padding:12px 0;
  border-top:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);
}

.vector2-local-nav a{
  padding:6px 14px;
  border:1px solid var(--border-2);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  color:var(--muted);
  background:#f8fafc;
}

.vector2-local-nav a:hover{
  background:#e0f2fe;
  color:var(--accent-2);
}

.vector2-section{
  position:relative;
}

.vector2-checklist{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vector2-checklist li{
  padding-left:28px;
  position:relative;
}

.vector2-checklist li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent-2);
  font-weight:700;
}

.vector2-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:16px;
}

.vector2-columns figure{
  margin:0;
}

.vector2-columns img,
.vector2-card img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border-2);
  background:#fff;
}

.vector2-wide-figure{
  margin-top:18px;
  text-align:center;
}

.vector2-wide-figure img{
  width:100%;
  max-width:720px;
  border-radius:14px;
  border:1px solid var(--border-2);
  box-shadow:0 14px 32px rgba(15,23,42,0.18);
}

.vector2-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

.vector2-card{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.vector2-card h3{
  margin-top:0;
}

.vector2-card figure{
  margin:12px 0 0;
}

.vector2-card figcaption{
  font-size:0.85rem;
  color:var(--muted);
  margin-top:6px;
}
.vector2-tiles{
  width:100%;
  border-collapse:separate;
  border-spacing:10px;
  margin-top:18px;
}
.vector2-tiles td{
  background:#f8fafc;
  border:1px solid var(--border-2);
  border-radius:12px;
  padding:14px;
  vertical-align:top;
  box-shadow:0 8px 18px rgba(15,23,42,0.05);
}
.vector2-tiles h4{
  margin:0 0 8px 0;
  font-size:0.95rem;
  color:var(--text);
}
.vector2-tiles ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:0.9rem;
}
.vector2-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:18px;
  text-align:center;
}
.vector2-gallery img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border-2);
  box-shadow:0 8px 20px rgba(15,23,42,0.08);
}
.vector2-gallery figcaption{
  grid-column:1 / -1;
  font-size:0.85rem;
  color:var(--muted-2);
}

.vector2-columns figcaption,
.vector2-wide-figure figcaption{
  margin-top:8px;
  color:var(--muted-2);
  font-size:0.85rem;
}

@media (max-width:700px){
  .vector2-local-nav{
    overflow-x:auto;
  }
  .vector2-local-nav a{
    flex:0 0 auto;
  }
}
/* =========================================================
   COMPACT / SCI-GEEK TYPOGRAPHY OVERRIDES
   - paste at END of style.css
   ========================================================= */

/* Base rhythm */
html { font-size: 16px; } /* stable baseline */
body{
  font-size: 0.98rem;     /* keep your choice */
  line-height: 1.45;      /* was 1.65 -> too airy */
}

/* Headings: px, consistent hierarchy, never smaller than body */
h1, h2, h3{
  line-height: 1.18;
  margin: 0 0 8px 0;      /* tighter */
}

h1{ font-size: 22px; }    /* was 26px */
h2{ font-size: 18px; margin-top: 14px; }  /* was 20px / 18px top */
h3{ font-size: 15px; margin-top: 12px; }  /* was 16px; keep > body */
h4{ font-size: 14px; margin: 12px 0 6px; font-weight: 800; color: var(--text); }

/* Paragraphs + lists: tighter and more “doc” */
p{
  margin: 0 0 10px 0;     /* was 12px */
}

ul, ol{
  margin: 8px 0 10px 0;   /* was 10/14 */
  padding-left: 18px;     /* was 20px */
}

li{ margin-bottom: 4px; } /* was 6px */

/* Links: keep clean, not “marketing” */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Container + panels: less padding, less vertical whitespace */
.container{
  padding: 14px 16px 44px; /* was 18px 20px 60px */
}

.panel{
  padding: 14px 14px;     /* was 18px */
  margin: 12px 0;         /* was 16px */
  border-radius: 12px;    /* slightly tighter */
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.055); /* a bit more subtle */
}

/* Header: reduce hero air + title scale */
header{
  padding: 18px 20px 12px;   /* was 28/18 ; horizontal ajoute 2026-08-04 */
}

header p{
  font-size: 0.98rem;     /* was 1.02rem */
  line-height: 1.45;
}

/* Nav tiles / local nav: denser */
.nav-grid{
  gap: 8px;               /* was 10px */
  margin-top: 10px;       /* was 14px */
}

.nav-grid a{
  padding: 8px 10px;      /* was 10px 12px */
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.94rem;
}

/* Buttons / details links: reduce bulk */
.details-link{
  padding: 6px 10px;      /* was 8px 10px */
  border-radius: 10px;
  font-size: 0.94rem;
}

/* Code blocks: slightly smaller, less padding */
pre{
  font-size: 12.5px;      /* was 13px */
  padding: 10px 12px;     /* was 12px 14px */
  border-radius: 10px;    /* was 12px */
}

/* Blockquotes: more compact */
blockquote{
  padding: 10px 12px;     /* was 12px 14px */
  border-radius: 10px;
}

/* =========================================================
   SIDEBAR density (your “menu de droite/gauche” request)
   ========================================================= */
.site-sidebar{
  padding: 44px 14px 18px; /* was 52px 18px 28px */
  font-size: 0.92rem;
  line-height: 1.35;
}

.site-sidebar a,
.site-sidebar p,
.site-sidebar li{
  font-size: 0.92rem;
  line-height: 1.35;
}

/* If your sidebar has button-like items, densify them */
.site-sidebar .nav-grid a{
  padding: 7px 10px;
  font-size: 0.90rem;
}

/* =========================================================
   Optional: tighten “vector2” blocks if you use them
   ========================================================= */
.vector2-local-nav{
  gap: 8px;               /* was 10px */
  padding: 8px 0;         /* was 12px */
}

.vector2-local-nav a{
  padding: 5px 12px;      /* was 6px 14px */
  font-size: 0.90rem;
}

.vector2-tiles{
  border-spacing: 8px;    /* was 10px */
}

.vector2-tiles td{
  padding: 12px;          /* was 14px */
}

.vector2-tiles ul{
  font-size: 0.88rem;     /* was 0.9rem */
}

.panel.license-note h3 {
  font-size: 1rem;
  margin-bottom: 0.6em;
}

.panel.license-note p {
  font-size: 0.97rem;
  line-height: 1.55;
}

/* =========================================================
   BLock Include License 
   ========================================================= */
@media (max-width: 768px) {
  .panel.license-note p {
    font-size: 0.94rem;
    line-height: 1.5;
  }
}