/* ============================================================
   VPSPLEX — base.css
   Reset, fond global (graticule façon carte marine), typo, layout.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-0);
  color: var(--txt-1);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Graticule : fines lignes de latitude/longitude, façon carte marine */
  background-image:
    radial-gradient(900px 420px at 88% -6%, rgba(232, 80, 10, 0.05), transparent 62%),
    radial-gradient(760px 420px at -8% 10%, rgba(20, 85, 123, 0.06), transparent 60%),
    linear-gradient(to right, rgba(20, 34, 44, 0.040) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 34, 44, 0.040) 1px, transparent 1px);
  background-size: auto, auto, 76px 76px, 76px 76px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}

::selection { background: rgba(232, 80, 10, 0.22); color: var(--txt-1); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.2rem; }

a { color: var(--acc-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

p { color: var(--txt-2); }
strong { color: var(--txt-1); font-weight: 600; }

img, svg, canvas { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* --- Layout helpers --- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 84px; }
.section-tight { padding-block: 52px; }
.section-alt { background: var(--bg-1); border-block: 1px solid var(--line-1); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: 60px; }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* --- En-tête de section --- */
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acc-deep); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--acc); }
.section-head p { margin-top: 14px; font-size: 1.04rem; }

/* Mots forts dans les titres : souligné crayon façon surlignage de carte */
.mark {
  color: var(--acc-deep);
  background: linear-gradient(to top, rgba(232, 80, 10, 0.16) 0%, rgba(232, 80, 10, 0.16) 32%, transparent 32%);
  padding-inline: 2px;
}

/* --- Micro-label mono (coordonnées, specs) --- */
.mono-label {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-3);
}

/* --- Tableaux techniques --- */
.tech-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tech-table th {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--txt-3); text-align: start;
  padding: 12px 16px; border-bottom: 2px solid var(--line-2);
}
.tech-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-1); color: var(--txt-2); }
.tech-table td:first-child { color: var(--txt-1); font-weight: 500; }
.tech-table tr:hover td { background: rgba(20, 34, 44, 0.02); }

/* --- Utilitaires --- */
.muted { color: var(--txt-2); }
.small { font-size: 0.86rem; }
.flex { display: flex; gap: 16px; align-items: center; }
.flex-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }

/* Accessible aux lecteurs d'écran et aux crawlers, invisible à l'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Apparition au scroll (activé par main.js) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}