/* ==========================================================================
   pages-v2.css — nouveau design du CMS Access (QualiteDefs / KarateChampions)
   Genere depuis SITE.COLOR1/COLOR2/COLOR3 (config par site, multi-tenant).
   Zero framework externe, zero JS bloquant, zero webfont distante.

   A placer dans le dossier css/ de chaque site publie, a cote de l'ancien
   pages.css (qui n'est plus reference une fois GetFrameWorkM mis a jour,
   mais reste disponible pour revenir en arriere en un clic si besoin).
   ========================================================================== */

:root {
  --c-primary: #376092;      /* SITE.COLOR1 */
  --c-primary-dark: #24466e;
  --c-surface: #F0F2F9;      /* SITE.COLOR2 */
  --c-ink: #16181d;          /* proche de SITE.COLOR3, ajuste pour contraste AA */
  --c-ink-soft: #4a4f5a;
  --c-card: #ffffff;
  --c-border: #e2e6f0;
  --c-accent: #c8862a;       /* accent chaud pour scores/badges */
  --c-jp: #b3273f;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20,30,60,.06), 0 8px 24px -12px rgba(20,30,60,.18);
  --maxw: 1180px;
  --font: "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 var(--font);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--c-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header / nav (SetTexteHautM) ---------- */
.site-header {
  background: var(--c-primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: .2px; }
.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: inherit;
}
.main-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.main-nav a {
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  opacity: .92;
  text-decoration: none;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  background: rgba(255,255,255,.16);
  text-decoration: none;
  opacity: 1;
}
@media (max-width: 860px) {
  .main-nav { display: none; width: 100%; order: 3; flex-direction: column; padding-bottom: 10px; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
}

/* ---------- Contenu courant (h1/p/img "nus" produits par GetArticleM,
   GetConsoDefM, GetTexteDefM, GetGroupe, GetBiblioM, GetPageDocsM,
   KarateGrades.bas, ModuleCitations.bas — non restructures, mais habilles) */
main.wrap { padding: 32px 20px 80px; }
main h1 { font-size: 1.7rem; margin: 0 0 14px; color: var(--c-ink); }
main h2 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--c-ink); }
main h3 { font-size: 1.05rem; margin: 22px 0 8px; }
main p { margin: 0 0 14px; max-width: 78ch; }
main > p:first-of-type { font-size: 1.05rem; color: var(--c-ink-soft); }

/* icones inline historiques (id="mini16"/"mini32" repete sur chaque page —
   pas ideal en HTML strict mais on ne touche pas au VBA qui les genere) */
img#mini16, img.mini16 { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px; }
img#mini32, img.mini32 { width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.flag-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; border-radius: 2px; }

/* tableaux "matable" (organisations, grades, palmares par pays...) */
table.matable, table { border-collapse: collapse; width: 100%; margin: 0 0 24px; background: var(--c-card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
table.matable td, table.matable th, table td, table th { padding: 10px 14px; border-bottom: 1px solid var(--c-border); text-align: left; font-size: .92rem; }
table.matable tr:first-child, table tr:first-child { background: var(--c-surface); }
table.matable tr:hover, table tr:hover { background: var(--c-surface); }

/* boutons "barre de boutons" (GetBarreBoutons) */
.barre-boutons, main p a[href$=".htm"] + a[href$=".htm"] { display: inline-block; }

/* ---------- Hero (page d'accueil) ---------- */
.hero {
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff;
  padding: 48px 0 64px;
}
.hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 10px; }
.hero p { max-width: 640px; opacity: .92; margin: 0 0 22px; font-size: 1.05rem; }

/* ---------- Cards generiques (groupes/themes) ---------- */
.grid-groups { display: grid; gap: 16px; margin-bottom: 48px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.group-card { background: var(--c-card); border-radius: var(--radius); border: 1px solid var(--c-border); padding: 20px; box-shadow: var(--shadow); }
.card-grid { display: grid; gap: 18px; margin-bottom: 40px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.def-card { background: var(--c-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--c-ink-soft); margin-bottom: 22px; }

/* ---------- Classement champions (GetPageChampions, v2) ---------- */
.lead { color: var(--c-ink-soft); max-width: 640px; }
.rank-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.rank-row {
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 14px; align-items: center;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 16px; box-shadow: var(--shadow);
}
.rank-num { font-weight: 800; color: var(--c-primary); font-size: 1.05rem; text-align: center; }
.rank-row .who { display: flex; flex-direction: column; }
.rank-row .who a { color: var(--c-ink); font-weight: 600; }
.rank-row .meta { color: var(--c-ink-soft); font-size: .82rem; display: flex; gap: 6px; align-items: center; }
.orgs { display: flex; gap: 4px; flex-wrap: wrap; }
.org-chip { font-size: .7rem; background: var(--c-surface); color: var(--c-primary-dark); padding: 2px 8px; border-radius: 999px; }
.stars { display: inline-flex; gap: 2px; }
.stars .s { width: 14px; height: 14px; fill: var(--c-border); }
.stars .s.on { fill: var(--c-accent); }
.top3 .rank-num { color: var(--c-accent); font-size: 1.3rem; }
.top3 { border: 1px solid var(--c-accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-primary-dark); color: rgba(255,255,255,.85); padding: 36px 0; font-size: .88rem; }
.site-footer a { color: #fff; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }

/* ---------- Utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 760px) {
  .rank-row { grid-template-columns: 32px 1fr auto; }
  .rank-row .orgs { display: none; }
  table.matable, table { display: block; overflow-x: auto; }
}