/* ═══════════════════════════════════════════════════════════
   TheDesk — styles communs à toutes les pages

   Ce fichier contient uniquement ce qui était identique dans
   les 6 pages HTML. Chaque page garde ses styles propres dans
   sa balise <style>, qui est chargée APRÈS ce fichier et peut
   donc surcharger ce qu'il y a ici.

   À charger avant le <style> de la page :
     <link rel="stylesheet" href="/style.css">
   ═══════════════════════════════════════════════════════════ */

/* ─── Variables de design ───────────────────────────────────
   Les couleurs, ombres et polices du site. Pour changer une
   couleur partout, c'est ici et nulle part ailleurs.        */
:root {
  --cream:          #FAF7F2;   /* fond de page */
  --cream-alt:      #F0EBE3;   /* fond légèrement plus soutenu */
  --cream-deep:     #EDE8E0;   /* bordures et touches clavier */
  --amber:          #F59E0B;   /* couleur d'accent principale */
  --amber-dark:     #D97706;   /* accent au survol / texte ambre */
  --amber-glow:     rgba(245,158,11,0.18);
  --charcoal:       #1C1917;   /* texte principal */
  --charcoal-mid:   #44403C;   /* texte secondaire */
  --charcoal-light: #78716C;   /* texte tertiaire, légendes */
  --white:          #FFFFFF;
  --border:         rgba(28,25,23,0.09);
  --shadow-card:    0 2px 12px rgba(28,25,23,0.07), 0 1px 3px rgba(28,25,23,0.05);
  --shadow-float:   0 8px 32px rgba(28,25,23,0.11), 0 2px 8px rgba(28,25,23,0.07);
  --font:           'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ─── Remise à zéro ─────────────────────────────────────────
   Les navigateurs appliquent leurs propres marges par défaut.
   On les supprime pour partir d'une base identique partout.  */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;   /* défilement doux sur les ancres #section */
}

/* Base commune. Chaque page ajuste son line-height : 1.6 sur
   le site, 1.7 sur les articles de blog (texte plus long).   */
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ─── Grain ─────────────────────────────────────────────────
   Voile de bruit très léger sur toute la page, qui casse
   l'aspect « aplat numérique ». Activé page par page avec
   <body class="grain"> — toutes ne l'utilisent pas.          */
body.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;   /* laisse passer les clics */
  z-index: 1000;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ─── Animations partagées ──────────────────────────────────
   Une animation non utilisée par une page ne coûte rien.     */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--amber-glow); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
