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;
/* v7: contour fin pour bien detacher l'image du fond de page */
border: 1px solid var(--c-ink-soft);
}
.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); margin: 10px 0 4px; max-width: 70ch;
/* v7: mise en valeur dans un cadre blanc plutot qu'un texte "nu" */
background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary);
border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow);
}
/* 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; }
/* ---------- Videos YouTube responsives (GetVideoYouTube, v8) ----------
L'iframe YouTube etait genere avec width="560" height="315" en dur : sur
mobile/tablette elle debordait du cadre (largeur fixe superieure a l'ecran)
ou restait minuscule selon le device. Classique "ratio box" en CSS pur :
le wrapper impose un ratio (16:9 par defaut) via padding-bottom, l'iframe
est ensuite etire en absolu à 100% x 100% du wrapper. Fonctionne pour
n'importe quelle iframe video-responsive, sans JS. */
.video-responsive {
position: relative;
width: 100%;
max-width: 640px;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
background: var(--c-surface);
margin: 16px 0;
}
.video-responsive iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* 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; }
}
/* ---------- Bandeau publicitaire (GetFrameWorkM, v8) ----------
Le script tiers charge son contenu apres coup : sans hauteur reservee, tout
le contenu sous le bandeau "sautait" au moment du chargement (mauvais score
CLS). On fixe une hauteur minimale correspondant aux formats IAB standards
(leaderboard 728x90 desktop, banner mobile plus bas), centree, avant meme
que le script ait fini de charger. */
.ad-slot {
min-height: 90px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0 0 16px;
}
@media (max-width: 760px) {
.ad-slot { min-height: 50px; }
}
/* ---------- Championnats : paragraphe de synthese (GetChampionnat, v8) ----------
La quasi-totalite des editions n'ont pas de texte redactionnel propre
(CHAMPCAT.FULLDESC vide) : la page n'etait qu'un H1 suivi d'un tableau. */
.champ-summary {
font-size: 1rem; color: var(--c-ink); max-width: 70ch;
background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent);
border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow);
margin: 0 0 20px;
}
/* ---------- Citations (ModuleCitations.bas, v12) ----------
v10 empilait image puis texte dans un bloc blanc plat - juge "laid" a
l'usage. v12 : citation en surimpression de l'image (panneau arrondi
translucide type verre depoli, en bas de carte, pour un bon contraste sur
n'importe quelle photo), pleine hauteur, coins arrondis sur la carte
entiere. Sans image : degrade de couleur (6 teintes tirees de la palette
du site) au lieu d'un fond blanc plat, choisi de façon stable par
CITATION.IDC (meme citation = meme couleur d'une regeneration a l'autre). */
.quote-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.quote-tag {
display: inline-flex; align-items: center; gap: 5px;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px;
padding: 6px 14px; font-size: .85rem; color: var(--c-ink);
}
.quote-tag:hover { border-color: var(--c-primary); text-decoration: none; }
.quote-tag .n { color: var(--c-ink-soft); font-size: .78rem; }
.quote-grid { display: grid; gap: 20px; margin: 0 0 32px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.quote-card {
position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
min-height: 300px; display: flex; align-items: flex-end;
background-size: cover; background-position: center; background-repeat: no-repeat;
transition: transform .15s ease, box-shadow .15s ease;
}
.quote-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px -4px rgba(20,30,60,.28), var(--shadow); }
/* panneau "verre depoli" pose sur l'image, avec assez d'air autour du texte */
.quote-panel {
position: relative; width: 100%; margin: 0; padding: 22px 22px 20px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 30%, rgba(255,255,255,.94) 100%);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.quote-text {
font-family: Georgia, "Times New Roman", serif; font-style: italic;
font-size: 1.08rem; line-height: 1.5; color: #1c1f26; margin: 0 0 10px;
text-shadow: 0 1px 1px rgba(255,255,255,.5);
}
.quote-author {
font-family: Georgia, "Times New Roman", serif; font-size: .86rem; font-weight: 700;
color: var(--c-primary-dark); text-align: right; margin: 0;
}
/* fond uni degrade quand il n'y a pas d'image, teinte variable par carte */
.quote-card:not(.has-image) { align-items: center; min-height: 240px; }
.quote-card:not(.has-image) .quote-panel {
background: rgba(255,255,255,.14); backdrop-filter: none; -webkit-backdrop-filter: none;
margin: 22px; width: calc(100% - 44px); border-radius: var(--radius-sm);
}
.quote-card:not(.has-image) .quote-text { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.quote-card:not(.has-image) .quote-author { color: rgba(255,255,255,.92); }
.quote-c0 { background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); }
.quote-c1 { background: linear-gradient(150deg, var(--c-jp) 0%, #6e1526 100%); }
.quote-c2 { background: linear-gradient(150deg, #1f7a5c 0%, #0f4a37 100%); }
.quote-c3 { background: linear-gradient(150deg, var(--c-accent) 0%, #7a5218 100%); }
.quote-c4 { background: linear-gradient(150deg, #5c4a8a 0%, #362a54 100%); }
.quote-c5 { background: linear-gradient(150deg, #2f6f8f 0%, #163a4a 100%); }
@media (max-width: 480px) {
.quote-card { min-height: 240px; }
}
/* ---------- 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; }
}
/* ---------- Pagination generique (GetPagination, v7) ----------
Remplace les listes de liens ". [2][3][4][>]" par un composant clair :
fleche precedent, numeros de page (page courante en pastille pleine),
fleche suivant. Utilise par GetFooter (actualites) et GetConsoDefM
(decoupage des longues pages de definitions, ~20 par page). */
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 32px 0; flex-wrap: wrap; }
.page-link, .page-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 10px;
border: 1px solid var(--c-border); border-radius: var(--radius-sm);
background: var(--c-card); color: var(--c-ink); font-size: .9rem; box-shadow: var(--shadow);
}
.page-link:hover, .page-num:hover { border-color: var(--c-primary); text-decoration: none; }
.page-link.empty { visibility: hidden; box-shadow: none; border: none; }
.page-nums { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-num.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.page-num.current:hover { text-decoration: none; }
/* ---------- Index alphabetique des definitions (GetTexteLettreM, v7) ----------
Barre de navigation A-Z (lettre courante en surbrillance) + resultats en
grille de liens plutot qu'une colonne de