/* ============================================================
   GILLES INFORMATIQUE — global.css
   Charte graphique complète — zéro dépendance externe
   ============================================================ */

/* ── POLICES (servies en local via /assets/fonts/) ── */
/* Les @font-face sont ignorés silencieusement si les fichiers sont absents */
/* Les polices système prennent le relais automatiquement */
@font-face {
  font-family: 'JetBrainsMono';
  src: local('JetBrains Mono'),
       url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMono';
  src: local('JetBrains Mono Medium'),
       url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMono';
  src: local('JetBrains Mono Bold'),
       url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter'),
       url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter Medium'),
       url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter SemiBold'),
       url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── VARIABLES ── */
:root {
  /* Couleurs fond */
  --c-bg-black:      #0a0a0a;
  --c-bg-header:     #0e0e0e;
  --c-bg-hero:       #141414;
  --c-bg-stats:      #1c1c1c;
  --c-bg-dark:       #242424;
  --c-bg-card-dark:  #303030;
  --c-bg-offwhite:   #f2f1ee;
  --c-bg-white:      #ffffff;

  /* Couleurs texte */
  --c-text-primary:  #e0e0dc;
  --c-text-muted:    #9a9a96;
  --c-text-dim:      #666662;
  --c-text-light:    #1a1a1a;
  --c-text-muted-l:  #5a5a58;

  /* Bordures */
  --c-border-dark:   #282828;
  --c-border-mid:    #2a2a2a;
  --c-border-card:   #363636;
  --c-border-light:  #e0deda;

  /* Accent */
  --c-orange:        #f07820;
  --c-orange-dim:    #c05810;
  --c-orange-hover:  #d06010;
  --c-orange-glow:   rgba(240, 120, 32, 0.12);

  /* Terminal */
  --c-green-term:    #4ec94e;
  --c-blue-term:     #5a8fc8;
  --c-red-term:      #e05252;
  --c-yellow-term:   #e0a030;

  /* Typographie */
  --font-mono: 'JetBrainsMono', 'Courier New', 'Lucida Console', monospace;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espacements */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* Rayons */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;

  /* Transitions */
  --transition: .15s ease;

  /* Largeur max contenu */
  --max-width: 1200px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth;  }
body {
  font-family: var(--font-sans);
  background: var(--c-bg-hero);
  color: var(--c-text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--c-orange); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-orange-hover); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── ACCESSIBILITÉ ── */
:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.section-pad { padding: var(--space-2xl) 0; }
.section-pad-sm { padding: var(--space-xl) 0; }

/* ── TYPOGRAPHIE ── */
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-text-primary);
  margin-bottom: var(--space-md);
}
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--space-lg); }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin-bottom: var(--space-lg); }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p { font-size: 1rem; line-height: 1.7; }
.text-muted { color: var(--c-text-muted); }
.text-orange { color: var(--c-orange); }
.text-green  { color: var(--c-green-term); }

/* Section label style terminal */
.section-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-orange-dim);
  margin-bottom: var(--space-lg);
}
.section-label--dark { color: var(--c-orange); }

/* ── ZONES DE FOND ── */
.bg-black    { background: var(--c-bg-black); }
.bg-header   { background: var(--c-bg-header); }
.bg-hero     { background: var(--c-bg-hero); }
.bg-stats    { background: var(--c-bg-stats); }
.bg-dark     { background: var(--c-bg-dark); }
.bg-offwhite { background: var(--c-bg-offwhite); color: var(--c-text-light); }
.bg-white    { background: var(--c-bg-white);    color: var(--c-text-light); }

/* ── BOUTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: .6rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.btn-primary {
  background: var(--c-orange);
  color: #0a0a0a;
  border: 1px solid var(--c-orange);
}
.btn-primary:hover {
  background: var(--c-orange-hover);
  border-color: var(--c-orange-hover);
  color: #0a0a0a;
}
.btn-outline {
  background: transparent;
  color: var(--c-text-primary);
  border: 1px solid var(--c-border-card);
}
.btn-outline:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
}
.btn-orange-outline {
  background: transparent;
  color: var(--c-orange);
  border: 1px solid var(--c-orange);
}
.btn-orange-outline:hover {
  background: var(--c-orange);
  color: #0a0a0a;
}
/* Sur fond clair */
.btn-outline-light {
  background: transparent;
  color: var(--c-text-light);
  border: 1px solid #ccc;
}
.btn-outline-light:hover {
  border-color: var(--c-orange-dim);
  color: var(--c-orange-dim);
}

/* ── CARDS ── */
/* Card sombre */
.card {
  background: var(--c-bg-card-dark);
  border: .5px solid var(--c-border-card);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--c-orange); }

/* Card claire avec accent top */
.card-light {
  background: var(--c-bg-white);
  border: .5px solid var(--c-border-light);
  border-top: 3px solid var(--c-orange);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: box-shadow var(--transition);
}
.card-light:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Card highlight (fond blanc, bordure gauche orange) */
.card-highlight {
  background: var(--c-bg-white);
  border: .5px solid var(--c-border-light);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.card-highlight h3 { font-family: var(--font-mono); color: var(--c-text-light); margin-bottom: var(--space-xs); }
.card-highlight p  { color: var(--c-text-muted-l); font-size: .9rem; }

/* ── GRILLES ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

/* ── TERMINAL WIDGET ── */
.terminal {
  background: #0c0c0c;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
}
.terminal__titlebar {
  background: #181818;
  border-bottom: 1px solid var(--c-border-dark);
  padding: .5rem .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.terminal__ascii-btn {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  user-select: none;
  font-weight: 700;
}
.terminal__ascii-btn--r { color: #e05252; }
.terminal__ascii-btn--y { color: #e0a030; }
.terminal__ascii-btn--g { color: #4ec94e; }
.terminal__title {
  font-size: .65rem; color: #888884; margin-left: .5rem; letter-spacing: .03em;
}
.terminal__body {
  padding: 1.125rem 1.25rem;
  font-size: .8rem;
  color: #888;
  line-height: 1.75;
}
/* Éléments prompt */
.t-prompt  { color: var(--c-green-term); }
.t-user    { color: var(--c-orange); }
.t-at      { color: #2a2a2a; }
.t-host    { color: var(--c-blue-term); }
.t-path    { color: var(--c-green-term); }
.t-cmd     { color: #d4d4d0; }
.t-output  { color: #555; padding-left: .25rem; }
.t-ok      { color: var(--c-green-term); }
.t-accent  { color: var(--c-orange); }
.t-cursor  {
  display: inline-block; width: 8px; height: 14px;
  background: var(--c-orange); vertical-align: -2px; margin-left: 2px;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Scanlines hero */
.scanlines::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px
  );
}

/* ── STATUS BAR ── */
.status-bar {
  background: #0a0a0a;
  border-top: 1px solid var(--c-border-dark);
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--c-text-dim);
  letter-spacing: .02em;
}
.status-bar__group { display: flex; align-items: center; gap: var(--space-md); }
.status-bar__item  { display: flex; align-items: center; gap: .25rem; }
.status-bar__sep   { color: #1e1e1e; }
.status-bar__dot {
  width: 5px; height: 5px; border-radius: 50%;
}
.status-bar__dot--on {
  background: var(--c-green-term);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.status-bar__online { color: var(--c-green-term); }
.status-bar__branch { color: var(--c-orange); }
.status-bar__info   { color: var(--c-blue-term); }

/* ── BINARY GLOW (fragments de binaire animés sur fond grille) ──
   Conteneur vide en HTML, peuplé aléatoirement en JS (voir includes.js → initBinaryGlow).
   Utilisé sur le hero accueil + le page-hero de toutes les pages de contenu. */
.bg-binary-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-binary-glow span {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .05em;
  animation: bitPulse 4s ease-in-out infinite;
  user-select: none;
}
@keyframes bitPulse {
  0%, 100% { opacity: .08; }
  50%      { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-binary-glow span { animation: none; opacity: .3; }
}
/* Variante "page-hero" (toutes pages sauf accueil) : chiffres cantonnés à droite, masqués sous 1080px */
@media (max-width: 1080px) {
  .bg-binary-glow--right { display: none; }
}

/* ── STATS STRIP ── */
.stats-strip {
  background: var(--c-bg-stats);
  border-top: 1px solid var(--c-border-dark);
  border-bottom: 1px solid var(--c-border-dark);
}
.stat-item { text-align: center; padding: var(--space-lg) var(--space-md); }
.stat-item__num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-orange);
  display: block;
}
.stat-item__label {
  font-size: .7rem;
  color: var(--c-text-dim);
  margin-top: .25rem;
  letter-spacing: .05em;
}

/* ── BANNIÈRE COOKIES ── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #111;
  border-top: 1px solid var(--c-border-mid);
  padding: .875rem var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .725rem;
  color: #888;
  transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.cookie-banner__prompt { color: var(--c-green-term); flex-shrink: 0; }
.cookie-banner__text   { flex: 1; }
.cookie-banner__link   { color: var(--c-orange); cursor: pointer; }
.cookie-banner__link:hover { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-banner__btn {
  padding: .35rem .875rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .65rem;
  cursor: pointer;
  transition: all var(--transition);
}
.cookie-banner__btn--accept {
  background: var(--c-orange); color: #0a0a0a;
  border: 1px solid var(--c-orange); font-weight: 700;
}
.cookie-banner__btn--accept:hover { background: var(--c-orange-hover); border-color: var(--c-orange-hover); }
.cookie-banner__btn--refuse {
  background: transparent; color: #666;
  border: 1px solid var(--c-border-mid);
}
.cookie-banner__btn--refuse:hover { color: #999; border-color: #444; }

/* ── ICÔNES SVG INLINE ── */
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.75rem; height: 1.75rem; }
.icon--orange { color: var(--c-orange); }

/* ── UTILITAIRES ── */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.gap-sm        { gap: var(--space-sm); }
.gap-md        { gap: var(--space-md); }
.gap-lg        { gap: var(--space-lg); }
.mt-sm         { margin-top: var(--space-sm); }
.mt-md         { margin-top: var(--space-md); }
.mt-lg         { margin-top: var(--space-lg); }
.mb-md         { margin-bottom: var(--space-md); }
.mb-lg         { margin-bottom: var(--space-lg); }
.text-center   { text-align: center; }
.hidden        { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card-highlight { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  :root { --space-lg: 16px; --space-xl: 28px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .container { padding: 0 var(--space-md); }
  h1 { font-size: 1.4rem; }
}

/* ── PRINT ── */
@media print {
  .cookie-banner, header nav, .status-bar { display: none; }
  body { background: #fff; color: #000; }
}