/* Palette provisoire inspirée de l'identité Free (rouge/noir) — à remplacer par la charte
   graphique officielle du Nextcloud CSE (documents direction, à partir d'août 2026). */
:root {
  --rouge: #e2001a;
  --rouge-fonce: #a50013;
  --noir: #161616;
  --anthracite: #2b2b2b;
  --gris: #6b6b6b;
  --gris-clair: #f4f4f4;
  --blanc: #ffffff;
  --fond: #ffffff;
  --texte: #1a1a1a;
  --carte: #ffffff;
  --bordure: #e6e6e6;
  --ombre: 0 2px 10px rgba(0, 0, 0, .06);
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121212; --texte: #f0f0f0; --carte: #1c1c1c; --bordure: #2e2e2e; --gris-clair: #1c1c1c;
  }
}
:root[data-theme="dark"] { --fond: #121212; --texte: #f0f0f0; --carte: #1c1c1c; --bordure: #2e2e2e; --gris-clair: #1c1c1c; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
section[id] { scroll-margin-top: 70px; } /* decalage sous l'en-tete fixe quand on arrive sur une ancre */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fond); color: var(--texte); line-height: 1.5;
}
a { color: var(--rouge); text-decoration: none; }
img { max-width: 100%; display: block; }

header.top {
  background: var(--noir); color: var(--blanc); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10;
}
header.top .logo { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
header.top .logo .pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
header.top nav { display: none; gap: 18px; }
header.top nav a { color: var(--blanc); font-weight: 500; }

main { max-width: 960px; margin: 0 auto; padding: 16px; padding-bottom: 80px; }

.hero {
  background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-fonce) 100%);
  color: var(--blanc); border-radius: var(--rayon); padding: 28px 20px; margin: 16px 0 24px;
}
.hero h1 { margin: 0 0 8px; font-size: 1.5rem; }
.hero p { margin: 0; opacity: .9; }

.section-titre { font-size: 1.1rem; font-weight: 700; margin: 28px 0 12px; display: flex; align-items: center; gap: 8px; }
.section-titre .barre { width: 4px; height: 18px; background: var(--rouge); border-radius: 2px; }

.grille { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grille { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column;
}
.carte .img { aspect-ratio: 16/9; background: var(--gris-clair); }
.carte .img img { width: 100%; height: 100%; object-fit: cover; }
.carte .corps { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.carte h3 { margin: 0; font-size: 1rem; }
.carte .meta { font-size: .8rem; color: var(--gris); }
.carte .extrait { font-size: .9rem; color: var(--texte); opacity: .85; }
.carte .bouton { margin-top: auto; }

.badge { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--blanc); background: var(--rouge); padding: 3px 9px; border-radius: 99px; width: fit-content; }

.bouton {
  display: inline-block; background: var(--rouge); color: var(--blanc); border: none; border-radius: 10px;
  padding: 10px 16px; font-weight: 600; cursor: pointer; font-size: .95rem; text-align: center;
}
.bouton:hover { background: var(--rouge-fonce); }
.bouton.secondaire { background: transparent; color: var(--rouge); border: 1px solid var(--rouge); }

.champ { width: 100%; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 10px; font-size: 1rem; background: var(--carte); color: var(--texte); }

.carte-connexion { max-width: 420px; margin: 40px auto; text-align: center; }
.carte-connexion .carte { padding: 28px 22px; }
.carte-connexion h2 { margin-top: 0; }

footer { text-align: center; padding: 24px 16px; color: var(--gris); font-size: .8rem; }

/* Barre de navigation mobile en bas (priorité au téléphone) */
nav.bas {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--noir); display: flex;
  justify-content: space-around; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); z-index: 10;
}
nav.bas a { color: #cfcfcf; font-size: .72rem; display: flex; flex-direction: column; align-items: center; gap: 4px; }
nav.bas a.actif { color: var(--blanc); }
nav.bas .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--rouge); opacity: .85; }

@media (min-width: 900px) {
  header.top nav { display: flex; }
  nav.bas { display: none; }
  main { padding-bottom: 16px; }
}