/* Tout le style du site. Rien en ligne dans index.html : la CSP le refuse. */

:root {
  --fond: #f6f3ec;
  --papier: #fffdf8;
  --encre: #22201b;
  --doux: #6b675d;
  --bord: #e3ddd0;
  --teinte: 40 80% 50%;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #17161a;
    --papier: #201f24;
    --encre: #ece9e1;
    --doux: #a39f95;
    --bord: #33313a;
  }
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.page { max-width: 66rem; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) 3rem; }

header h1 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.01em; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.carte {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-left: 5px solid hsl(var(--teinte));
  border-radius: .9rem;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .3s, box-shadow .3s;
}
.carte h2 { margin: 0; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.pastille { font-size: 1.3rem; line-height: 1; }

.verdict { margin: .2rem 0 0; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.phrase { margin: 0; text-wrap: pretty; }

/* Les niveaux : plus on est proche, plus la carte s'allume. C'est la seule chose qui distingue
   « pas encore » de « presque » à l'œil, avant même de lire la phrase. */
.noel    { --teinte: 350 65% 48%; }
.weekend { --teinte: 210 60% 50%; }
.apero   { --teinte: 28  85% 52%; }
.cafe    { --teinte: 25  45% 38%; }

.carte[data-niveau="loin"]     { --teinte: 0 0% 60%; }
.carte[data-niveau="bientot"] .verdict { color: hsl(var(--teinte) / .75); }
.carte[data-niveau="proche"]  .verdict,
.carte[data-niveau="imminent"] .verdict { color: hsl(var(--teinte)); }
.carte[data-niveau="imminent"] { box-shadow: 0 0 0 3px hsl(var(--teinte) / .25); }
.carte[data-niveau="oui"] {
  background: hsl(var(--teinte) / .12);
  border-color: hsl(var(--teinte) / .5);
}
.carte[data-niveau="oui"] .verdict { color: hsl(var(--teinte)); }
.carte[data-niveau="passe"] .verdict { color: var(--doux); }
@media (prefers-color-scheme: dark) {
  .carte[data-niveau="oui"] .verdict,
  .carte[data-niveau="proche"] .verdict,
  .carte[data-niveau="imminent"] .verdict { filter: brightness(1.3); }
}

/* Le bouton d'alerte, dans la carte du café. Caché tant que le script n'a pas vérifié que le
   navigateur sait faire des notifications — un bouton qui ne mène nulle part est pire que rien. */
.prevenir {
  margin-top: .6rem; align-self: flex-start;
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem;
  color: hsl(var(--teinte)); background: transparent;
  border: 1px solid hsl(var(--teinte) / .5); border-radius: 999px;
  cursor: pointer;
}
.prevenir:hover { background: hsl(var(--teinte) / .1); }
.prevenir[data-etat="actif"] { color: var(--doux); border-style: dashed; }
.prevenir[data-etat="refuse"] { color: var(--doux); border-color: var(--bord); cursor: default; }
@media (prefers-color-scheme: dark) { .prevenir { filter: brightness(1.3); } }

/* Le compte à rebours de Noël. */
.compteur { display: flex; gap: .4rem; margin-top: .3rem; }
.bloc {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .15rem;
  background: hsl(var(--teinte) / .1);
  border-radius: .6rem;
}
.bloc b { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1; }
.bloc small { color: var(--doux); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; }
.noel[data-niveau="oui"] .compteur { display: none; }


@media (prefers-reduced-motion: reduce) { .carte { transition: none; } }