/* Paris ce soir. Sombre parce qu'on le consulte le soir, sur un téléphone,
   souvent dehors. Mobile d'abord : la colonne de 375 px est la cible. */

:root {
  --fond: #15161a;
  --surface: #1e2027;
  --surface-haut: #272a33;
  --trait: #32353f;
  --texte: #eceae4;
  --attenue: #9a978e;
  --accent: #e0a33b;
  --vert: #6faf8e;
  --rouge: #e8785f;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 10px;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--fond);
  padding: 12px 16px;
  font-weight: 600;
  z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page { max-width: 820px; margin: 0 auto; padding: 20px 16px 56px; }

/* ---------- tête ---------- */

.tete { margin-bottom: 26px; }

.tete__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tete__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 10vw, 3.3rem);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}

.tete__date {
  margin: 0;
  color: var(--attenue);
  font-size: 0.9rem;
}
/* En francais le jour et le mois restent en minuscules : on ne releve que l'initiale. */
.tete__date::first-letter { text-transform: uppercase; }

/* ---------- météo ---------- */

.meteo {
  margin-top: 16px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  border-left: 3px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.93rem;
}
.meteo--beau { border-left-color: var(--vert); }
.meteo--pluie { border-left-color: var(--rouge); }
.meteo--mitige { border-left-color: var(--accent); }
.meteo__chargement { color: var(--attenue); }
.meteo__temp { font-weight: 600; font-size: 1.05rem; }
.meteo__verdict { color: var(--attenue); }
.meteo__verdict strong { color: var(--texte); font-weight: 600; }

/* ---------- profils ---------- */

.profils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 30px;
}

.profil {
  min-height: 60px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.profil small { font-weight: 400; font-size: 0.72rem; color: var(--attenue); }
.profil:hover { background: var(--surface-haut); }
.profil[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
}
.profil[aria-pressed="true"] small { color: rgba(21, 22, 26, 0.75); }

/* ---------- blocs ---------- */

.bloc { margin-bottom: 36px; }

.bloc__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bloc__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0 0 4px;
}

.bloc__sous {
  margin: 0 0 16px;
  color: var(--attenue);
  font-size: 0.9rem;
  max-width: 58ch;
}

.compte { margin: 0 0 16px; color: var(--attenue); font-size: 0.85rem; }

/* ---------- ce soir ---------- */

.rituel {
  background: linear-gradient(0deg, var(--surface), var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 18px;
}
.rituel__quand {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.rituel__nom {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 8px;
  line-height: 1.15;
}
.rituel__quoi { margin: 0 0 10px; }
.rituel__pourquoi { margin: 0 0 12px; color: var(--attenue); font-size: 0.92rem; }

/* ---------- cartes ---------- */

.grille { display: grid; gap: 14px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 16px;
}

.carte__nom {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 4px;
  line-height: 1.2;
}
.carte__quoi { margin: 0 0 8px; font-size: 0.95rem; }
.carte__pourquoi {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--attenue);
  padding-left: 11px;
  border-left: 2px solid var(--trait);
}
.carte__adresse { margin: 0; font-size: 0.88rem; color: var(--attenue); }

/* étapes d'un parcours */
.etapes { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: etape; }
.etape {
  position: relative;
  padding: 0 0 14px 28px;
  border-left: 1px solid var(--trait);
  margin-left: 9px;
}
.etape:last-child { border-left-color: transparent; padding-bottom: 0; }
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  left: -10px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--fond);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etape__nom { font-weight: 600; font-size: 0.95rem; }
.etape__quoi { color: var(--attenue); font-size: 0.88rem; }

/* ---------- étiquettes ---------- */

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.et {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-haut);
  color: var(--texte);
  border: 1px solid var(--trait);
  white-space: nowrap;
}
.et--gratuit { background: var(--vert); color: var(--fond); border-color: var(--vert); }
.et--prix { background: var(--accent); color: var(--fond); border-color: var(--accent); }
.et--dehors { color: var(--vert); border-color: var(--vert); background: transparent; }
.et--alerte { color: var(--rouge); border-color: var(--rouge); background: transparent; }

/* ---------- filtres ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.bascule { position: relative; }
.bascule input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.bascule span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.bascule input:checked + span {
  background: var(--texte);
  color: var(--fond);
  border-color: var(--texte);
}
.bascule input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- liste d'évènements ---------- */

.liste { display: grid; gap: 10px; }

.ev {
  display: block;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 14px 15px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ev:hover { background: var(--surface-haut); border-color: var(--attenue); }

.ev__titre { font-weight: 600; font-size: 1rem; margin: 0 0 4px; line-height: 1.3; }
.ev__resume {
  margin: 0 0 8px;
  font-size: 0.89rem;
  color: var(--attenue);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev__bas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev__lieu { font-size: 0.82rem; color: var(--attenue); }

.ev--rabaisse { opacity: 0.5; }

.plus {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.plus:hover { background: var(--surface); }

.vide {
  background: var(--surface);
  border: 1px dashed var(--trait);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  color: var(--attenue);
}

/* ---------- pied ---------- */

.pied {
  border-top: 1px solid var(--trait);
  padding-top: 18px;
  color: var(--attenue);
  font-size: 0.84rem;
}
.pied p { margin: 0 0 8px; max-width: 62ch; }
.pied a { color: var(--attenue); }

/* ---------- écrans larges ---------- */

@media (min-width: 680px) {
  .page { padding: 32px 24px 64px; }
  .grille { grid-template-columns: 1fr 1fr; }
  .liste { grid-template-columns: 1fr 1fr; }
  .bloc__titre { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}