/* ============================================================
   style.css — couleurs, typographie et éléments communs
   ============================================================ */
:root {
  /* Mise en page : un recueil minimal — en-tête fin, case du jour (illustration vivante + premiers vers),
     planche de cases, boîte à idées et soutien côte à côte ; lecteur plein écran à pages qui se tournent. */
  --fond: #f3f2f8;
  --surface: #fbfbfe;
  --papier: #fffdf9;
  --encre: #1e1b3b;
  --brume: #5f5b80;
  --trait: rgba(30, 27, 59, .12);
  --rose: #c2386a;
  --rose-voile: rgba(194, 56, 106, .09);
  --sur-rose: #ffffff;
  --heure: #4447a0;
  --plume: #2e2b72;
  --ombre: 0 1px 2px rgba(30, 27, 59, .06), 0 14px 34px -18px rgba(30, 27, 59, .32);
  --f-titre: "Gloock", Georgia, "Times New Roman", serif;
  --f-vers: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --r: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #111028; --surface: #18173b; --papier: #1b1a3e; --encre: #ecebf8; --brume: #a9a6ca;
    --trait: rgba(236, 235, 248, .12); --rose: #ff7ba4; --rose-voile: rgba(255, 123, 164, .12); --sur-rose: #2a0b1c;
    --heure: #a3a8ff; --plume: #5a55cf; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -18px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #111028; --surface: #18173b; --papier: #1b1a3e; --encre: #ecebf8; --brume: #a9a6ca;
  --trait: rgba(236, 235, 248, .12); --rose: #ff7ba4; --rose-voile: rgba(255, 123, 164, .12); --sur-rose: #2a0b1c;
  --heure: #a3a8ff; --plume: #5a55cf; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -18px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.fige, html.fige body { overflow: hidden; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 1rem/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
::selection { background: var(--rose-voile); }

.mur { max-width: 72rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sur {
  margin: 0; font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
}
.petit { margin: 0; font-size: .82rem; color: var(--brume); }

.ic {
  width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.9rem; padding: 0 1.25rem; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
  font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--encre) 30%, transparent); }
.btn:active { transform: scale(.97); }
.btn.plein { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.btn.rose { background: var(--rose); border-color: var(--rose); color: var(--sur-rose); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .ic { width: 1.1rem; height: 1.1rem; }

.rond {
  width: 2.75rem; height: 2.75rem; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--encre);
  transition: background-color .2s, transform .25s var(--ease), opacity .2s;
}
.rond:hover { background: var(--rose-voile); }
.rond:active { transform: scale(.92); }
.rond[disabled] { opacity: .3; pointer-events: none; }

/* Champs */
.champ {
  width: 100%; min-width: 0; border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
  border-radius: 12px; padding: .8rem .95rem; outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.champ::placeholder { color: color-mix(in srgb, var(--brume) 80%, transparent); }
.champ:focus { border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-voile); }
textarea.champ { line-height: 1.5; }

/* Puces (filtres) */
.puce {
  flex: none; height: 2.2rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--trait);
  background: transparent; color: var(--brume); font-size: .88rem; display: inline-flex; align-items: center; gap: .45rem;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.puce:hover { color: var(--encre); }
.puce:active { transform: scale(.96); }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.pastille { width: .62rem; height: .62rem; border-radius: 50%; flex: none; }

/* Message flottant */
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 100;
  transform: translate(-50%, 1.5rem); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--encre); color: var(--fond); font-size: .92rem; box-shadow: var(--ombre);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes monte { from { opacity: 0; transform: translateY(18px); } }
@keyframes fondu { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}