par des cartes dans le meme
esprit que .rank-row (page champions) : icone + nom + description en ligne. */
.tech-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.tech-row {
display: flex; align-items: flex-start; gap: 10px;
background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
padding: 10px 16px; box-shadow: var(--shadow);
}
.tech-row.current { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 7%, var(--c-card)); }
.tech-row .tech-icon { margin-top: 3px; margin-right: 0; }
.tech-row .tech-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tech-row .tech-name { font-weight: 700; color: var(--c-ink); }
.tech-row .tech-descr { color: var(--c-ink-soft); font-size: .9rem; }
.tech-row .tech-descr a { font-weight: 600; }
/* ---------- Grades : index des grades d'une categorie (GetGrades, v3) ---------- */
.grade-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.grade-row {
display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center;
background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
padding: 14px 18px; box-shadow: var(--shadow);
}
.grade-row .vignette { width: 72px; height: 72px; min-width: 72px; }
.grade-row h2 { margin: 0 0 4px; font-size: 1.1rem; }
.grade-row p { margin: 0; color: var(--c-ink-soft); font-size: .9rem; }
@media (max-width: 560px) {
.grade-row { grid-template-columns: 56px 1fr; padding: 10px 14px; }
.grade-row .vignette { width: 56px; height: 56px; min-width: 56px; }
}
/* vignette de secours quand QUALDEF.Image est vide : initiale du terme sur
fond dans la teinte du site, au lieu de ne rien afficher du tout. */
.thumb-fallback {
display: flex; align-items: center; justify-content: center;
width: 88px; height: 88px; border-radius: var(--radius); margin: 0 0 14px;
background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color: #fff; font-size: 2.1rem; font-weight: 700; text-transform: uppercase;
box-shadow: var(--shadow); float: left; margin-right: 16px;
}
/* v3: vignette d'illustration (GetLigne dans QualiteDefs.bas, et les listes
equivalentes de KarateChampions.bas / KarateGrades.bas), pilotee par
THEME.IMAGE. Cette classe existait dans l'ancien pages.css mais n'avait pas
ete reportee dans pages-v2.css lors de la migration : le avait une
image de fond mais une taille de 0x0px, donc invisible -> images de
dossier disparues sur les pages de presentation avec liens. */
.vignette {
width: 96px;
height: 96px;
min-width: 96px;
border-radius: var(--radius-sm);
background-color: var(--c-surface);
background-size: cover;
background-position: center;
box-shadow: var(--shadow);
}
/* frise de progression des grades (KarateGrades.bas / GetGrade) */
.grade-track { display: flex; align-items: center; gap: 6px; margin: 10px 0 22px; flex-wrap: wrap; }
.grade-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-border); display: inline-block; }
.grade-dot.done { background: var(--c-primary); }
.grade-dot.current {
background: var(--c-accent); width: 20px; height: 20px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 25%, transparent);
}
/* badge de categorie colore par theme (teinte deduite de THEME.IDT en VBA) */
.cat-badge {
display: inline-block; padding: 3px 11px; border-radius: 999px;
font-size: .82rem; font-weight: 600; color: #fff; margin: 4px 0 14px;
}
.cat-badge a { color: #fff; }
/* 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, v4) ----------
Bandeau d'identite du site (GetActu), place en carte plutot qu'en bande
plein cadre pour rester simple a integrer dans main.wrap. */
.hero {
background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color: #fff;
padding: 40px 32px;
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 32px;
}
.hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 10px; }
.hero .eyebrow {
text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem;
opacity: .85; margin: 0 0 8px;
}
.hero p { max-width: 640px; opacity: .92; margin: 0; font-size: 1.05rem; }
.hero p + p { margin-top: 10px; }
/* ---------- Cards generiques (groupes/themes, v4) ---------- */
.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); transition: transform .15s ease, box-shadow .15s ease; }
.group-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px -4px rgba(20,30,60,.22), var(--shadow); }
.group-card h2 { margin: 0 0 8px; font-size: 1rem; }
.group-card p { margin: 0; color: var(--c-ink-soft); font-size: .85rem; }
.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);
display: flex; flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
}
.def-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px -4px rgba(20,30,60,.22), var(--shadow); }
.def-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--c-surface); }
.def-card .def-card-body { padding: 20px 22px; }
.def-card h2 { margin: 0 0 8px; font-size: 1rem; }
.def-card p { margin: 0; color: var(--c-ink-soft); font-size: .85rem; }
/* ---------- Breadcrumb (v4) ---------- */
.breadcrumb { font-size: .85rem; color: var(--c-ink-soft); margin-bottom: 22px; list-style: none; padding: 0; }
.breadcrumb a { color: var(--c-ink-soft); text-decoration: underline; }
.breadcrumb a:hover { color: var(--c-primary-dark); }
.breadcrumb .sep { margin: 0 4px; opacity: .5; }
/* ---------- Page de definition, v6 (GetTexteDefM) ----------
En-tete "carte" (image/vignette + titre + badge + documents lies) au lieu
d'un H1 suivi de blocs eparpilles plus bas dans la page. */
.def-hero { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; }
.def-hero-media { flex-shrink: 0; }
.def-hero-media img { width: 180px; height: 180px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.def-hero-media .thumb-fallback { float: none; margin: 0; }
.def-hero-body { flex: 1; min-width: 240px; }
.def-hero-body h1, .def-hero-body h2, .def-hero-body h3 { margin: 0 0 6px; }
.def-lead { font-size: 1.05rem; color: var(--c-ink-soft); margin: 10px 0 4px; max-width: 70ch; }
/* documents lies (DOCS), en chips plutot qu'en liste d'icones empilees */
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.doc-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px;
padding: 5px 12px 5px 8px; font-size: .85rem; color: var(--c-ink);
}
.doc-chip:hover { border-color: var(--c-primary); text-decoration: none; }
.doc-chip img { margin: 0; }
/* videos / carte, regroupees dans un encart distinct du texte */
.def-media { margin: 20px 0; display: flex; flex-direction: column; gap: 16px; }
/* pager precedent/suivant, deux blocs cliquables plutot que des liens texte
separes par des barres verticales */
.def-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 12px; }
.pager-link {
display: flex; flex-direction: column; gap: 2px;
background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
padding: 12px 16px; box-shadow: var(--shadow); color: var(--c-ink);
}
.pager-link:hover { border-color: var(--c-primary); text-decoration: none; }
.pager-link.next { text-align: right; align-items: flex-end; }
.pager-link.empty { visibility: hidden; box-shadow: none; border: none; }
.pager-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); }
.pager-name { font-weight: 600; }
/* bloc de contact/suggestion en bas de page */
.def-contact { margin-top: 18px; padding: 14px 18px; background: var(--c-surface); border-radius: var(--radius-sm); font-size: .9rem; color: var(--c-ink-soft); }
.def-contact a { color: var(--c-primary-dark); font-weight: 600; }
@media (max-width: 560px) {
.def-hero { flex-direction: column; }
.def-hero-media img { width: 100%; height: 220px; }
.def-pager { grid-template-columns: 1fr; }
.pager-link.next { text-align: left; align-items: flex-start; }
}
/* ---------- 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; }
}
/* ---------- Impression ----------
Utile sur un site de glossaire/techniques : on retire tout ce qui n'a pas
de sens sur papier (nav, pubs, widgets sociaux, boutons de theme) et on
repasse en noir sur blanc pour economiser l'encre. */
@media print {
.site-header, .site-footer, .nav-toggle, .theme-toggle,
.search-box, iframe, .fb-root, ins.adsbygoogle,
.lang-tabs, .rank-row .orgs a.org-chip[href*="#VIDEO"],
.def-pager, .def-contact {
display: none !important;
}
html, html[data-theme="dark"] {
--c-surface: #fff; --c-ink: #000; --c-ink-soft: #333; --c-card: #fff; --c-border: #ccc;
}
body { background: #fff; }
main.wrap { padding: 0; max-width: 100%; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
.def-card, .group-card, .rank-row, .tech-row, .grade-row, table { box-shadow: none; border: 1px solid #ccc; }
}