/* ============================================================
   theme.css - tokens partagés (clair / sombre) pour tout le site.
   Sombre : encre pétrole + orange braise. Clair : brume menthe + même orange.
   Le thème suit le système, le bouton de la barre du haut force un choix.
   ============================================================ */

:root {
  color-scheme: dark;

  /* encre sauge : fonds profonds, légèrement verts, jamais gris-noir plat */
  --bg:        #0e1314;
  --bg-2:      #131a1b;
  --bg-card:   #182021;
  --card:      #182021;
  --card-2:    #1e2829;
  --fg:        #efe9df;
  --fg-mid:    #a8b1ad;
  --fg-mid-s:  #a8b1ad;
  --fg-soft:   #84908b;
  --fg-faint:  #6a7571;

  /* teintes douces : la pêche est la couleur principale, les autres distinguent les familles */
  --c-peach: #f0b995;
  --c-sage:  #9cc4b4;
  --c-blue:  #9db7d4;
  --c-clay:  #d9a1a6;
  --c-sand:  #dcc886;

  --accent:      var(--c-peach);
  --accent-2:    var(--c-clay);
  --accent-soft: color-mix(in srgb, var(--c-peach) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--c-peach) 34%, transparent);
  --on-accent:   #2a1508;
  --ok:          var(--c-sage);

  --line:   rgba(239, 233, 223, 0.09);
  --line-2: rgba(239, 233, 223, 0.17);
  --hover:  rgba(239, 233, 223, 0.05);
  --header-bg: rgba(14, 19, 20, 0.66);
  --scrim:  rgba(14, 19, 20, 0.6);
  --glow:   rgba(240, 185, 149, 0.08);

  /* verre dépoli */
  --glass:        rgba(239, 233, 223, 0.05);
  --glass-strong: rgba(239, 233, 223, 0.09);
  --glass-edge:   rgba(239, 233, 223, 0.16);
  --glass-shine:  rgba(255, 255, 255, 0.10);
  --aurora: 0.13;
  --ribbon: 0.26;

  --radius: 16px;
  --maxw: 1240px;
  --shadow-card: 0 28px 60px -26px rgba(0, 0, 0, 0.7);

  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --serif: var(--font-display);
  --sans:  var(--font-sans);
  --mono:  var(--font-mono);

  --primary:          var(--accent);
  --primary-light:    var(--accent-soft);
  --primary-border:   var(--accent-line);
  --background:       var(--bg);
  --foreground:       var(--fg);
  --muted:            var(--bg-2);
  --muted-foreground: var(--fg-mid-s);
  --border:           var(--line);
  --border-strong:    var(--line-2);
  --card-foreground:  var(--fg);
  --tag-bg:           var(--accent-soft);
  --tag-color:        var(--accent);
  --text-mid:         var(--fg-mid-s);
  --green:            var(--accent);
  --amber:            var(--accent);
}

/* clair : gris-sauge calme, à la manière d'un papier technique */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #e3e7e5;
  --bg-2:      #d9dedc;
  --bg-card:   #eef1f0;
  --card:      #eef1f0;
  --card-2:    #f6f8f7;
  --fg:        #161a1b;
  --fg-mid:    #434b4c;
  --fg-mid-s:  #434b4c;
  --fg-soft:   #596364;
  --fg-faint:  #778182;

  --c-peach: #96452a;
  --c-sage:  #2a6650;
  --c-blue:  #335886;
  --c-clay:  #8c3f48;
  --c-sand:  #6c530e;

  --on-accent:   #ffffff;

  --line:   rgba(22, 26, 27, 0.10);
  --line-2: rgba(22, 26, 27, 0.19);
  --hover:  rgba(22, 26, 27, 0.045);
  --header-bg: rgba(227, 231, 229, 0.72);
  --scrim:  rgba(227, 231, 229, 0.7);
  --glow:   rgba(164, 80, 42, 0.06);

  --glass:        rgba(255, 255, 255, 0.50);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --glass-edge:   rgba(255, 255, 255, 0.88);
  --glass-shine:  rgba(255, 255, 255, 0.8);
  --aurora: 0.20;
  --ribbon: 0.30;

  --shadow-card: 0 26px 50px -28px rgba(22, 26, 27, 0.30);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
      color-scheme: light;
    
      --bg:        #e3e7e5;
      --bg-2:      #d9dedc;
      --bg-card:   #eef1f0;
      --card:      #eef1f0;
      --card-2:    #f6f8f7;
      --fg:        #161a1b;
      --fg-mid:    #434b4c;
      --fg-mid-s:  #434b4c;
      --fg-soft:   #596364;
      --fg-faint:  #778182;
    
      --c-peach: #96452a;
      --c-sage:  #2a6650;
      --c-blue:  #335886;
      --c-clay:  #8c3f48;
      --c-sand:  #6c530e;
    
      --on-accent:   #ffffff;
    
      --line:   rgba(22, 26, 27, 0.10);
      --line-2: rgba(22, 26, 27, 0.19);
      --hover:  rgba(22, 26, 27, 0.045);
      --header-bg: rgba(227, 231, 229, 0.72);
      --scrim:  rgba(227, 231, 229, 0.7);
      --glow:   rgba(164, 80, 42, 0.06);
    
      --glass:        rgba(255, 255, 255, 0.50);
      --glass-strong: rgba(255, 255, 255, 0.74);
      --glass-edge:   rgba(255, 255, 255, 0.88);
      --glass-shine:  rgba(255, 255, 255, 0.8);
      --aurora: 0.20;
      --ribbon: 0.30;
    
      --shadow-card: 0 26px 50px -28px rgba(22, 26, 27, 0.30);
  }
}

/* familles de teintes : un élément pose --h et ses pastilles suivent */
.h-peach { --h: var(--c-peach); }
.h-blue { --h: var(--c-blue); }
.h-sage { --h: var(--c-sage); }
.h-clay { --h: var(--c-clay); }
.h-sand { --h: var(--c-sand); }

/* sans transparence : surfaces pleines */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--bg-card); --glass-strong: var(--card-2); --header-bg: var(--bg); }
}

em { font-style: normal; }

/* ── Bouton de thème (injecté par theme.js) ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg-mid-s);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ico-moon { display: none; }
  :root:not([data-theme]) .theme-toggle .ico-sun { display: inline; }
}

/* Transition douce lors d'un changement de thème (jamais au chargement) */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching, html.theme-switching * { transition: none !important; }
}


/* ============================================================
   Base accessibilité (partagée par toutes les pages)
   ============================================================ */
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 100px;
  background: var(--fg); color: var(--bg);
  font: 500 0.9rem/1 var(--font-sans);
  transition: top 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.skip-link:focus { top: 1rem; color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: 5rem; }

/* cibles tactiles : 44 px minimum */
@media (pointer: coarse) {
  .btn, .pill { min-height: 2.75rem; }
  .theme-toggle, .btn-icon, .pill-icon { width: 2.75rem; height: 2.75rem; }
}

/* contraste renforcé : surfaces pleines, bordures franches */
@media (prefers-contrast: more) {
  :root { --glass: var(--bg-card); --glass-strong: var(--card-2); --header-bg: var(--bg); --line: var(--line-2); --line-2: var(--fg-soft); }
}