@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ════════════════════════════════════════════════════════
   LA SUPERETTE — design system « bureau rétro »
   thème clair  = chartre historique (gris clair, fenêtres
                  blanches, bordures noires, rose & jaune)
   thème sombre = palette Catppuccin Mocha, même chrome
   ════════════════════════════════════════════════════════ */

/* ── THÈME SOMBRE (défaut) ── */
:root {
  --bg:       #1e1e2e;
  --base:     #181825;
  --mantle:   #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --subtext:  #a6adc8;
  --text:     #cdd6f4;
  --purple:   #cba6f7;
  --mauve:    #cba6f7;
  --blue:     #89b4fa;
  --green:    #a6e3a1;
  --teal:     #94e2d5;
  --sky:      #89dceb;
  --yellow:   #f9e2af;
  --peach:    #fab387;
  --red:      #f38ba8;
  --pink:     #f5c2e7;

  /* chrome rétro */
  --border:      #585b70;                 /* bordure des fenêtres */
  --win-shadow:  rgba(0, 0, 0, .55);
  --hl-pink:     rgba(245, 194, 231, .28);  /* surlignage stabilo rose */
  --hl-yellow:   rgba(249, 226, 175, .28);  /* surlignage stabilo jaune */
  --btn-yellow-bg: rgba(249, 226, 175, .16);
  --btn-yellow-tx: #f9e2af;
  --btn-yellow-bd: rgba(249, 226, 175, .5);

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;

  /* aliases rétro-compat */
  --noir:       var(--text);
  --gris2:      var(--surface0);
  --rose:       var(--pink);
  --rose-light: var(--hl-pink);
  --win-bg:     var(--surface0);
  --win-face:   var(--base);
  --garamond:   var(--sans);
}

/* ── THÈME CLAIR — l'ancien site ── */
html.light {
  --bg:       #e9e9eb;
  --base:     #ffffff;
  --mantle:   #f3f3f4;
  --surface0: #dededf;
  --surface1: #c2c2c6;
  --surface2: #9d9da4;
  --overlay0: #76767e;
  --overlay1: #56565e;
  --subtext:  #2e2e34;
  --text:     #101013;
  --purple:   #d23d8f;
  --mauve:    #c43ad6;
  --blue:     #1e4fd6;
  --green:    #1f7a37;
  --teal:     #0a7c7c;
  --sky:      #0084b4;
  --yellow:   #a87900;
  --peach:    #c84b00;
  --red:      #d20f39;
  --pink:     #ff5ea8;

  --border:      #161618;
  --win-shadow:  rgba(0, 0, 0, .14);
  --hl-pink:     #ffb5e2;
  --hl-yellow:   #ffe14d;
  --btn-yellow-bg: #ffe14d;
  --btn-yellow-tx: #101013;
  --btn-yellow-bd: #161618;

  --rose:       #ff5ea8;
  --rose-light: rgba(255, 94, 168, .15);
  --win-bg:     var(--surface0);
  --win-face:   var(--base);
}

*, *::before, *::after { box-sizing: border-box; }

/* focus clavier visible partout */
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  transition: background-color .25s, color .25s;
}

::selection { background: var(--hl-pink); color: var(--text); }

/* ════════ NAV — comme l'ancien : logo à gauche, gros liens à droite ════════ */
.site-nav {
  position: sticky; top: 0; z-index: 500;
  background: var(--bg);
  display: flex; align-items: center;
  height: 76px; min-height: 76px;
  padding: 0 22px;
  gap: 14px;
  transition: background-color .25s;
}

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text);
  flex-shrink: 0;
}
/* logo « tas + texte » — SVG feutre rose, version sombre/claire selon le thème */
.nav-logo img {
  height: 52px; width: auto; display: block;
}
.nav-logo .logo-light { display: none; }
html.light .nav-logo .logo-dark { display: none; }
html.light .nav-logo .logo-light { display: block; }

.nav-brand { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand .site-name {
  font-size: 34px; font-weight: 400; letter-spacing: .01em;
  color: var(--purple); line-height: 1;
}
.nav-brand .site-sub {
  font-style: italic; font-size: 14px;
  color: var(--subtext); margin-top: 1px;
}

.nav-links {
  display: flex; align-items: center;
  list-style: none; margin: 0 0 0 auto; padding: 0;
  gap: 6px;
}
.nav-links li { display: flex; }

.nav-links a, .nav-links button {
  display: inline-block;
  font-family: var(--sans);
  font-size: clamp(18px, 2.1vw, 25px);
  color: var(--text); text-decoration: none;
  background: none; border: none;
  padding: 2px 13px 4px;
  cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.nav-links a:hover, .nav-links button:hover {
  background: var(--hl-yellow);
}
.nav-links a.active {
  background: var(--hl-pink);
}

/* petits boutons utilitaires (thème / langue) */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 8px;
  background: var(--base);
  border: 1px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  font-family: var(--mono); font-size: 13px;
  cursor: pointer; color: var(--text);
  transition: background .12s, transform .08s, box-shadow .08s;
  flex-shrink: 0; margin-left: 8px;
}
.theme-toggle:hover { background: var(--hl-yellow); }
.theme-toggle:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--border); }
.theme-toggle .toggle-icon { pointer-events: none; }

/* sélecteur de langue — 3 boutons côte à côte */
.lang-mini { display: flex; gap: 5px; margin-left: 8px; flex-shrink: 0; }
.lang-mini button {
  width: 32px; height: 30px; padding: 0;
  border: 1px solid var(--border);
  background: var(--base);
  box-shadow: 2px 2px 0 var(--border);
  font-family: var(--mono); font-size: 12px; text-transform: lowercase;
  cursor: pointer; color: var(--text);
  transition: background .1s;
}
.lang-mini button:hover { background: var(--hl-yellow); }
.lang-mini button.active {
  background: var(--hl-pink); font-weight: 700;
  transform: translate(2px, 2px); box-shadow: 0 0 0 var(--border);
}

/* teintes de la charte — pour colorer titres & mots */
.c1 { color: var(--mauve); }
.c2 { color: var(--pink); }
.c3 { color: var(--yellow); }
.c4 { color: var(--teal); }

/* ════════ FENÊTRE RÉTRO — chrome partagé ════════
   structure :
   <section class="rwin">
     <div class="rwin-bar" data-handle>
       <button class="rwin-close">✕</button>
       <span class="rwin-glyph g1"></span><span class="rwin-glyph g2"></span>
       <span class="rwin-title">titre</span>
     </div>
     <div class="rwin-body">…</div>
   </section>                                         */
.rwin {
  background: var(--base);
  border: 1px solid var(--border);
  /* double cadre décalé, façon vieux bureau */
  box-shadow:
    7px 7px 0 -1px var(--bg),
    7px 7px 0  0  var(--border),
    14px 14px 30px var(--win-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.rwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--base);
  border-bottom: 1px solid var(--border);
  cursor: grab; user-select: none;
  flex: 0 0 auto;
}
.rwin-bar:active { cursor: grabbing; }

.rwin-title {
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
}

/* glyphes décoratifs de barre de titre */
.rwin-glyph {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1px solid var(--border);
  display: inline-block;
}
.rwin-glyph.g2 {
  background-image: repeating-linear-gradient(45deg,
    var(--border) 0, var(--border) 1px, transparent 1px, transparent 3.5px);
}
.rwin-glyph.g3 {
  border: none; position: relative;
}
.rwin-glyph.g3::before, .rwin-glyph.g3::after {
  content: ''; position: absolute; background: var(--border);
}
.rwin-glyph.g3::before { left: 6px; top: 1px; width: 1px; height: 11px; }
.rwin-glyph.g3::after  { top: 6px; left: 1px; height: 1px; width: 11px; }

/* bouton fermer = la petite case à cocher */
.rwin-close {
  width: 15px; height: 15px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--base);
  font-family: var(--mono); font-size: 9px; line-height: 1;
  color: transparent;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.rwin-close:hover {
  background: var(--hl-pink); color: var(--text);
}

.rwin-body {
  padding: 14px 16px 16px;
  overflow: auto;
  scrollbar-width: thin; scrollbar-color: var(--surface1) transparent;
}
.rwin-body::-webkit-scrollbar { width: 5px; }
.rwin-body::-webkit-scrollbar-thumb { background: var(--surface1); }

/* fenêtre au premier plan */
.rwin.active {
  box-shadow:
    7px 7px 0 -1px var(--bg),
    7px 7px 0  0  var(--border),
    18px 18px 44px var(--win-shadow);
}

/* ════════ ÉLÉMENTS COMMUNS ════════ */

/* pilule de filtre (comme « tout / en tournée / … » de l'ancien) */
.pill {
  padding: 2px 13px;
  border: 1px solid var(--surface2);
  border-radius: 99px;
  background: transparent;
  font-family: var(--sans); font-size: 13px;
  cursor: pointer; color: var(--subtext);
  transition: background .12s, border-color .12s, color .12s;
}
.pill:hover { background: var(--hl-pink); border-color: var(--border); color: var(--text); }
.pill.active {
  background: var(--hl-yellow);
  border-color: var(--border);
  color: var(--text);
}

/* le gras dans les fenêtres ressort en rose-violet */
.rwin-body strong, .win-panel strong { color: var(--purple); font-weight: 700; }

/* bouton jaune (envoyer →) */
.btn-yellow {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 7px 16px;
  border: 1px solid var(--btn-yellow-bd);
  background: var(--btn-yellow-bg); color: var(--btn-yellow-tx);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--border);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.btn-yellow:hover { background: var(--hl-yellow); }
.btn-yellow:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--border); }

/* surlignage stabilo inline */
.hl   { background: var(--hl-yellow); padding: 0 4px; }
.hl-p { background: var(--hl-pink);   padding: 0 4px; }

/* ════════ FOOTER ════════ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--mantle);
  padding: 9px 20px;
  display: flex; flex-wrap: wrap;
  gap: 6px 20px; align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-family: var(--sans);
  transition: background-color .25s, border-color .25s;
}
.footer-left  { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.footer-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.footer-copy  { color: var(--text); }
.footer-eco   { color: var(--green); font-style: italic; font-size: 12px; }

.footer-right a {
  color: var(--text); text-decoration: none; font-size: 13px;
  padding: 2px 8px; border: 1px solid var(--border);
  background: var(--base);
  transition: background .12s;
}
.footer-right a:hover { background: var(--hl-yellow); }
.footer-nl { background: var(--hl-pink) !important; font-weight: 700; }

/* lien catalogue — « demander le programme » */
.footer-cat {
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 700;
  padding: 2px 9px;
  border: 1px solid var(--border);
  background: var(--hl-yellow);
  box-shadow: 2px 2px 0 var(--border);
  transition: background .12s, transform .08s, box-shadow .08s;
}
.footer-cat:hover { background: var(--hl-pink); }
.footer-cat:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--border); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 768px) {
  .site-nav { height: 60px; min-height: 60px; padding: 0 12px; flex-wrap: nowrap; }
  .site-footer { position: static !important; }
  .nav-logo img { height: 38px; }
  .nav-brand .site-name { font-size: 28px; }
  .nav-brand .site-sub { display: none; }
  /* menu en dropdown, ouvert par le bouton ☰ (injecté par toolbar.js) */
  .nav-links {
    position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    margin: 0; padding: 6px 10px 10px; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px var(--win-shadow);
    display: none; z-index: 1200;
  }
  .nav-links.open { display: flex; }
  .nav-links li { display: block; }
  .nav-links a, .nav-links button { display: block; font-size: 22px; padding: 11px 8px; white-space: normal; }
  .lang-mini button { width: 26px; height: 26px; font-size: 11px; }
}