/* Site de Baobao (DESIGN 18.3). Tokens de DESIGN 3.1 à 3.3 ; thème clair seulement (DESIGN 3.1, mode sombre non prévu). */

@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url("/fonts/Baloo2_800ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/Figtree_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/Figtree_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/fonts/Figtree_700Bold.ttf") format("truetype"); }

:root {
  color-scheme: light;
  --ink: #2A1E17;
  --ink-soft: #5A4637;
  --bg: #FFFAF3;
  --bg-gradient: linear-gradient(180deg, #FFF1E2 0%, #FFFAF3 42%, #FCEBDD 100%);
  --card: #F5ECDC;
  --line: #E2D3B8;
  --surface: #FFFFFF;
  --primary: #C4391F;
  --primary-shadow: #8F2A16;
  --selected: #FFE6D3;
  --highlight: #FFD84D;
  --icon-red: #C9331E;

  --space-xs: 6px;
  --space-s: 10px;
  --space-m: 18px;
  --space-l: 26px;
  --space-xl: 44px;
  --gutter: 18px;

  --radius-field: 14px;
  --radius-card: 20px;
  --radius-big: 22px;
  --radius-pill: 999px;
  --border: 2px;

  --title: "Baloo 2", system-ui, sans-serif;
  --text: "Figtree", system-ui, sans-serif;
  --width: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

a { color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--primary-shadow); }
a:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 var(--gutter); }

/* En-tête */
.top { padding: var(--space-m) 0; }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-s);
  min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-family: var(--title); font-weight: 800; font-size: 24px; line-height: 1;
}
.brand img { width: 40px; height: 40px; border-radius: 23%; }

/* Bandeau des brouillons */
.draft {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--ink); color: var(--surface);
  border-radius: 16px;
  font-size: 14px; font-weight: 700;
}

/* Texte */
h1, h2, h3 { font-family: var(--title); font-weight: 800; line-height: 1.1; margin: 0; }
h1 { font-size: 34px; margin-bottom: var(--space-m); }
h2 { font-size: 22px; margin: var(--space-l) 0 var(--space-s); }
h3 { font-size: 19px; margin: var(--space-m) 0 var(--space-xs); }
p, ul, ol, dl { margin: 0 0 var(--space-s); }
ul, ol { padding-left: 22px; }
li { margin-bottom: var(--space-xs); }
.muted { color: var(--ink-soft); font-size: 15px; }
.updated { color: var(--ink-soft); font-size: 14px; margin-bottom: var(--space-m); }
.todo { background: var(--highlight); padding: 0 4px; border-radius: 4px; font-weight: 700; }

.box {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  margin: var(--space-m) 0;
}
.info { background: var(--card); border-radius: 16px; padding: var(--space-m); margin: var(--space-m) 0; font-size: 15px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--space-s) 0 var(--space-m); }
th, td { text-align: left; vertical-align: top; padding: var(--space-s) var(--space-xs); border-bottom: var(--border) solid var(--line); }
th { font-weight: 700; }
.scroll { overflow-x: auto; }

/* Accueil */
.hero { text-align: center; padding: var(--space-l) 0 var(--space-m); }
.hero img { width: 150px; height: auto; }
.hero h1 { font-size: 44px; margin: var(--space-s) 0 var(--space-xs); color: var(--primary); }
.bubble {
  display: inline-block; max-width: 420px;
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 20px 20px 20px 6px;
  font-weight: 600; text-align: left;
}
.promise { font-family: var(--title); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0 auto var(--space-m); max-width: 560px; }
.features { list-style: none; padding: 0; margin: var(--space-m) 0; }
.features li {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: 16px;
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-s);
}
.thesis { text-align: center; font-weight: 600; color: var(--ink-soft); margin: var(--space-l) 0; }

/* Aide */
details {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: 16px;
  margin-bottom: var(--space-s);
}
summary { cursor: pointer; padding: var(--space-s) var(--space-m); min-height: 44px; font-weight: 700; display: flex; align-items: center; }
summary:focus-visible { outline: 3px solid var(--highlight); border-radius: 14px; }
details p { padding: 0 var(--space-m) var(--space-s); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 var(--space-l);
  background: var(--primary); color: var(--surface);
  border-radius: 18px; box-shadow: 0 5px 0 var(--primary-shadow);
  font-family: var(--title); font-weight: 800; font-size: 19px; text-decoration: none;
}
.button:hover { color: var(--surface); }
.button:active { box-shadow: 0 2px 0 var(--primary-shadow); transform: translateY(3px); }

/* Pied de page */
.foot { margin-top: var(--space-xl); padding: var(--space-l) 0 var(--space-xl); border-top: var(--border) solid var(--line); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); }
.foot p { color: var(--ink-soft); margin-top: var(--space-s); }

@media (max-width: 480px) {
  h1 { font-size: 30px; }
  .hero h1 { font-size: 38px; }
  .promise { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}