/* ============================================================
   228 DOCTRINE V9 · Design tokens
   Source de vérité unique. Sync vers les 4 sites via sync-tokens.sh
   Locked : 2026-05-15
   ============================================================ */

/* --- Reset minimal --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* --- Tokens globaux --- */
:root{
  /* Couleurs */
  --noir:#000;
  --noir-deep:#050505;
  --noir-card:#0B0B0B;
  --gris-metal:#1A1A1A;
  --gris-filet:#1A1A1A;
  --blanc:#fff;
  --blanc-doux:rgba(255,255,255,0.86);
  --blanc-mute:rgba(255,255,255,0.55);
  --or:#BF9B30;

  /* Signaux animés (V9 doctrine) */
  --signal-vert:#3FB950;   /* OPERATORS · LIVE */
  --signal-rouge:#cc0000;  /* FILMS · REC */

  /* Typo */
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',Menlo,monospace;

  /* Espacements */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:48px;
  --space-xl:96px;

  /* Animations */
  --easing:cubic-bezier(.2,.7,.2,1);
}

/* --- Base body --- */
body{
  background:var(--noir-deep);
  color:var(--blanc);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* --- Keyframes --- */
@keyframes blink{50%{opacity:0.3}}

/* --- Typographies par saveur de marque --- */

/* OPERATORS · Tech-driven, mono accents */
.brand-operators .hero h1,
.brand-operators .hero h2{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1;
}
.brand-operators .hero h2 .accent{color:var(--or);font-weight:600}
.brand-operators .eyebrow{font-family:var(--mono);text-transform:none;letter-spacing:0.08em}
.brand-operators .eyebrow::before{content:"// "}
.brand-operators .sub{font-family:var(--mono);line-height:1.8}
.brand-operators .cta{font-family:var(--mono);text-transform:none;letter-spacing:0.05em}

/* ACADEMY · Serif académique, savoir en architecture */
.brand-academy .hero h1,
.brand-academy .hero h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
}
.brand-academy .hero h1 .accent,
.brand-academy .hero h2 .accent{color:var(--or);font-style:italic}
.brand-academy .eyebrow{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0.02em;
}
.brand-academy .eyebrow::before{content:"§ "}
.brand-academy .sub{font-family:var(--serif);font-style:italic;line-height:1.6}
.brand-academy .cta{font-family:var(--sans)}

/* FILMS · Cinema, serif italic */
.brand-films .hero h1,
.brand-films .hero h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
}
.brand-films .hero h2 .accent{color:var(--or);font-weight:500}
.brand-films .eyebrow{letter-spacing:0.4em}
.brand-films .sub{font-family:var(--serif);font-style:italic;line-height:1.7}

/* GROUPE 228 · Placeholder privé, neutre minimal (pas de saveur) */

/* --- CTA gold (unifié 4 marques) --- */
.cta{
  display:inline-block;
  padding:13px 26px;
  font-size:11px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  align-self:flex-start;
  transition:all .3s var(--easing);
  background:var(--or);
  border:1px solid var(--or);
  color:var(--noir);
}
.cta:hover{
  background:transparent;
  color:var(--or);
}

/* --- Backgrounds par saveur (à appliquer sur la section hero) --- */

/* OPERATORS · Grille tech + glow doré subtil */
.bg-operators{
  position:relative;
  background:linear-gradient(180deg,#050505 0%,#0a0a0a 100%);
  overflow:hidden;
}
.bg-operators::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:48px 48px;
  z-index:1;
}
.bg-operators::after{
  content:'';
  position:absolute;
  top:-1px;left:-1px;right:-1px;bottom:-1px;
  background:radial-gradient(ellipse at top right,rgba(191,155,48,0.05),transparent 60%);
  z-index:2;
}
.bg-operators > *{position:relative;z-index:5}

/* ACADEMY · Texture papier (noise overlay) + marge dorée verticale */
.bg-academy{
  position:relative;
  background:#0a0a0a;
  overflow:hidden;
}
.bg-academy::before{
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity:0.5;
  mix-blend-mode:overlay;
  z-index:1;
}
.bg-academy::after{
  content:'';
  position:absolute;
  top:48px;bottom:48px;left:48px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(191,155,48,0.3) 30%,rgba(191,155,48,0.3) 70%,transparent);
  z-index:2;
}
.bg-academy > *{position:relative;z-index:5;padding-left:80px}

/* FILMS · Grain de film + vignettage cinema */
.bg-films{
  position:relative;
  background:radial-gradient(ellipse at center,#0a0a0a 0%,#000 100%);
  overflow:hidden;
}
.bg-films::before{
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity:0.4;
  mix-blend-mode:overlay;
  z-index:1;
}
.bg-films::after{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.7) 100%);
  z-index:2;
}
.bg-films > *{position:relative;z-index:5}

/* --- Signal status (bas de page hero) --- */
.signal{
  position:absolute;
  font-family:var(--mono);
  font-size:10px;
  color:var(--blanc-mute);
  letter-spacing:0.1em;
  z-index:5;
}
.signal-operators{bottom:24px;right:32px}
.signal-operators::before{content:"● ";color:var(--signal-vert);animation:blink 2s infinite}
.signal-academy{bottom:24px;right:32px}
.signal-academy .roman{color:var(--or);animation:blink 2s infinite;font-weight:500}
.signal-films{bottom:24px;left:32px}
.signal-films::before{content:"● ";color:var(--signal-rouge);animation:blink 2s infinite}

/* --- Logo brand (Inter MAJUSCULES standardisé) --- */
.brand-logo{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:0.25em;
  text-transform:uppercase;
  font-size:13px;
}

/* --- Lang switcher (FR/EN) --- */
.lang-switcher{
  font-family:var(--mono);
  font-size:11px;
  color:var(--blanc-mute);
  letter-spacing:0.1em;
}
.lang-switcher a{
  color:var(--blanc-mute);
  text-decoration:none;
  transition:color .2s var(--easing);
}
.lang-switcher a:hover,
.lang-switcher .active{color:var(--blanc)}
.lang-switcher a + a::before{content:" · "}