/* ============================================================================ TIGRE BOIS — css/pages/reglement.css Feuille propre à la page « Règlement ». Direction : Masters éditorial. Ivoire dominant, colonne de lecture étroite, vert Masters pour le bloc des récompenses, orange en ponctuation, or mat pour les trophées. Aucune couleur en dehors de tokens.css. Sommaire 1. Hero 2. Corps de page — sommaire collant + colonne de lecture 3. Sommaire latéral 4. Sections et têtes de section 5. Les principes 6. Le barème de points 7. Le format des tournois 8. Le départage 9. Les récompenses 10. Les saisons 11. Mentions, états, mouvement réduit, impression ========================================================================== */ /* Décalage d'ancre supplémentaire, réservé au sommaire collant du mobile. Il s'ajoute au `scroll-padding-top` déjà posé sur par base.css. */ :root { --tb-reg-somm-h: 58px; --tb-reg-ancre: var(--tb-reg-somm-h); } /* ═══════════════════════════════════════════════════════════════════════════ 1. HERO — sobre, une seule photo libre d'usage, aucun visage ═════════════════════════════════════════════════════════════════════════ */ .tb-reg-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(300px, 46vh, 440px); padding-block: var(--tb-e10) var(--tb-e9); background-color: var(--tb-vert-profond); color: var(--tb-creme); overflow: hidden; } .tb-reg-hero__media { position: absolute; inset: 0; z-index: -2; } .tb-reg-hero__media picture, .tb-reg-hero__media img { width: 100%; height: 100%; } .tb-reg-hero__media img { object-fit: cover; object-position: 50% 42%; } /* Voile vert : le texte doit rester au-dessus de 4,5:1 sur toute la photo. */ .tb-reg-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tb-voile-vert); } /* Liseré or en pied de hero, signature de la maison. */ .tb-reg-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-image: var(--tb-lisere-or); } .tb-reg-hero__inner { width: 100%; } .tb-reg-hero__surtitre { color: var(--tb-or-clair); } .tb-reg-hero__titre { margin: var(--tb-e3) 0 0; font-family: var(--tb-font-titre); font-size: var(--tb-t-h1); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; color: var(--tb-creme); text-wrap: balance; } .tb-reg-hero__chapo { margin: var(--tb-e5) 0 0; max-width: 56ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--tb-creme-70); } .tb-reg-hero__source { margin: var(--tb-e6) 0 0; max-width: 62ch; font-size: var(--tb-t-petit); line-height: 1.5; color: var(--tb-creme-70); padding-left: var(--tb-e4); border-left: 2px solid rgba(227, 197, 103, .55); } /* ═══════════════════════════════════════════════════════════════════════════ 2. CORPS DE PAGE ═════════════════════════════════════════════════════════════════════════ */ .tb-reg-page { background-color: var(--tb-ivoire); padding-block: var(--tb-e8) var(--tb-e11); } @media (min-width: 768px) { .tb-reg-page { padding-block: var(--tb-e9) var(--tb-e12); } } .tb-reg-corps { display: grid; gap: var(--tb-e8); align-items: start; } @media (min-width: 1024px) { :root { --tb-reg-ancre: 0px; } .tb-reg-corps { grid-template-columns: 236px minmax(0, 1fr); column-gap: clamp(var(--tb-e8), 5vw, var(--tb-e11)); row-gap: 0; } } .tb-reg-colonne { min-width: 0; display: grid; gap: var(--tb-e10); } @media (min-width: 768px) { .tb-reg-colonne { gap: var(--tb-e11); } } /* ═══════════════════════════════════════════════════════════════════════════ 3. SOMMAIRE — barre horizontale sur mobile, colonne collante sur grand écran ═════════════════════════════════════════════════════════════════════════ */ /* Sous 1024 px : barre pleine largeur, calée juste sous l'en-tête densifié. Les marges négatives compensent exactement la gouttière du conteneur — la barre ne dépasse donc jamais la largeur de la page. */ .tb-reg-somm { position: sticky; top: var(--tb-header-h-dense); z-index: var(--tb-z-collant); min-width: 0; margin-inline: calc(var(--tb-gouttiere) * -1); margin-bottom: var(--tb-e5); padding: var(--tb-e2) var(--tb-gouttiere); border: 0; border-bottom: 1px solid var(--tb-ligne); background: var(--tb-verre-dense); box-shadow: var(--tb-ombre1); } @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .tb-reg-somm { background: var(--tb-verre); -webkit-backdrop-filter: var(--tb-flou); backdrop-filter: var(--tb-flou); } } /* Le titre du sommaire n'apparaît qu'en colonne : sur mobile la barre parle d'elle-même et chaque pixel de hauteur compte. */ .tb-reg-somm__titre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tb-reg-somm__liste { display: flex; gap: var(--tb-e1); margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .tb-reg-somm__liste > li { flex: 0 0 auto; scroll-snap-align: center; } .tb-reg-somm__lien { display: inline-flex; align-items: center; gap: var(--tb-e2); min-height: 40px; padding: var(--tb-e2) var(--tb-e4); border-radius: var(--tb-rond); font-size: var(--tb-t-petit); font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--tb-encre-70); text-decoration: none; transition: background-color var(--tb-d1) var(--tb-ease), color var(--tb-d1) var(--tb-ease); } .tb-reg-somm__lien:hover { background: var(--tb-survol-clair); color: var(--tb-vert); } .tb-reg-somm__lien[data-actif] { background: var(--tb-vert-pale); color: var(--tb-vert); } .tb-reg-somm__num { font-family: var(--tb-font-texte); font-variant-numeric: tabular-nums; font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .06em; color: var(--tb-encre-45); transition: color var(--tb-d1) var(--tb-ease); } .tb-reg-somm__lien[data-actif] .tb-reg-somm__num { color: var(--tb-orange); } /* — Colonne collante à partir de 1024 px — */ @media (min-width: 1024px) { .tb-reg-somm { position: sticky; top: calc(var(--tb-header-h) + var(--tb-e6)); align-self: start; margin-inline: 0; margin-bottom: 0; padding: var(--tb-e5) var(--tb-e4); border-bottom: 0; border-radius: var(--tb-r3); background: var(--tb-blanc); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--tb-ombre1); } .tb-reg-somm__titre { position: static; width: auto; height: auto; margin: 0 0 var(--tb-e4); padding: 0 var(--tb-e3); overflow: visible; clip-path: none; font-family: var(--tb-font-texte); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-encre-45); } .tb-reg-somm__liste { flex-direction: column; gap: 2px; overflow: visible; } .tb-reg-somm__liste > li { flex: 1 1 auto; } .tb-reg-somm__lien { width: 100%; min-height: 44px; border-radius: var(--tb-r1); padding: var(--tb-e2) var(--tb-e3); white-space: normal; } .tb-reg-somm__lien[data-actif] { background: var(--tb-vert-pale); box-shadow: inset 3px 0 0 var(--tb-orange); } } /* ═══════════════════════════════════════════════════════════════════════════ 4. SECTIONS ET TÊTES DE SECTION ═════════════════════════════════════════════════════════════════════════ */ .tb-reg-section { min-width: 0; scroll-margin-top: var(--tb-reg-ancre); } .tb-reg-tete { margin-bottom: var(--tb-e7); } @media (min-width: 768px) { .tb-reg-tete { margin-bottom: var(--tb-e8); } } .tb-reg-tete .tb-titre-section { margin-top: var(--tb-e2); } .tb-reg-tete .tb-chapo { margin-top: var(--tb-e4); } /* Colonne de lecture : environ 65 caractères, jamais davantage. */ .tb-reg-lecture { max-width: 65ch; } .tb-reg-mention { margin: var(--tb-e5) 0 0; max-width: 68ch; font-size: var(--tb-t-petit); line-height: 1.55; color: var(--tb-encre-45); } .tb-reg-mount[data-etat='chargement'] { min-height: 120px; } /* ═══════════════════════════════════════════════════════════════════════════ 5. LES PRINCIPES ═════════════════════════════════════════════════════════════════════════ */ .tb-principes { display: grid; gap: var(--tb-e4); margin: 0; padding: 0; } @media (min-width: 640px) { .tb-principes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--tb-e5); } } .tb-principe { display: flex; align-items: flex-start; gap: var(--tb-e4); padding: var(--tb-e5); border: 1px solid var(--tb-ligne); border-radius: var(--tb-r3); background: var(--tb-blanc); box-shadow: var(--tb-ombre1); transition: transform var(--tb-d1) var(--tb-ease), box-shadow var(--tb-d1) var(--tb-ease), border-color var(--tb-d1) var(--tb-ease); } .tb-principe:hover { transform: translateY(-2px); box-shadow: var(--tb-ombre2); border-color: color-mix(in srgb, var(--tb-vert) 22%, transparent); } /* La pastille : le pictogramme du classeur devient un objet graphique. Quand sheet.js l'a déjà retiré du texte, c'est le numéro d'ordre qui l'occupe — jamais un emoji au fil de la phrase. */ .tb-principe__pastille { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--tb-rond); background: var(--tb-vert-pale); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tb-vert) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--tb-or) 12%, transparent); } .tb-principe__pastille--picto { font-size: 1.25rem; line-height: 1; } .tb-principe__num { font-family: var(--tb-font-titre); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--tb-vert); } .tb-principe__texte { margin: 0; padding-top: 3px; max-width: 46ch; font-size: var(--tb-t-corps); line-height: 1.6; color: var(--tb-encre); text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════════════════ 6. LE BARÈME DE POINTS — la pièce maîtresse de la page ═════════════════════════════════════════════════════════════════════════ */ .tb-bareme { display: grid; gap: var(--tb-e5); } /* — La phrase à retenir — */ .tb-bareme__note { position: relative; padding: var(--tb-e5) var(--tb-e6); border-radius: var(--tb-r3); background: var(--tb-orange-pale); border: 1px solid color-mix(in srgb, var(--tb-orange) 28%, transparent); } .tb-bareme__note-phrase { margin: 0; max-width: 62ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--tb-encre); text-wrap: pretty; } .tb-bareme__note-chiffre { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .tb-bareme__note-part { font-family: var(--tb-font-titre); font-size: 1.35em; font-weight: 600; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--tb-orange) 78%, var(--tb-encre)); white-space: nowrap; } .tb-bareme__note-rappel { margin-top: var(--tb-e4); padding-top: var(--tb-e4); border-top: 1px solid color-mix(in srgb, var(--tb-orange) 24%, transparent); } .tb-bareme__note-etiquette { margin: 0 0 var(--tb-e1); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--tb-orange) 70%, var(--tb-encre)); } .tb-bareme__note-citation { margin: 0; max-width: 62ch; font-size: var(--tb-t-petit); line-height: 1.55; color: var(--tb-encre-70); } /* — Légende des couleurs — */ .tb-bareme__legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-e2) var(--tb-e5); margin: 0; font-size: var(--tb-t-petit); color: var(--tb-encre-70); } .tb-bareme__cle { display: inline-flex; align-items: center; gap: var(--tb-e2); font-weight: 600; } .tb-bareme__puce { display: inline-block; width: 26px; height: 8px; border-radius: var(--tb-rond); flex: 0 0 auto; } .tb-bareme__puce--indiv { background-image: linear-gradient(90deg, var(--tb-vert) 0%, var(--tb-vert-clair) 100%); } .tb-bareme__puce--collectif { background-image: linear-gradient(90deg, var(--tb-orange) 0%, var(--tb-or-clair) 100%); } .tb-bareme__echelle { font-size: var(--tb-t-micro); color: var(--tb-encre-45); font-style: italic; } /* — Le tableau — */ .tb-bareme__cadre { border: 1px solid var(--tb-ligne); border-radius: var(--tb-r3); background: var(--tb-blanc); box-shadow: var(--tb-ombre1); overflow: hidden; } .tb-bareme__table { width: 100%; border-collapse: collapse; table-layout: fixed; } .tb-bareme__th { padding: var(--tb-e4) var(--tb-e4); font-family: var(--tb-font-texte); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-encre-45); text-align: left; background: var(--tb-ivoire-alt); border-bottom: 1px solid var(--tb-ligne-forte); } .tb-bareme__th--place { width: 32%; } .tb-bareme__th--ratio { width: 15%; text-align: right; } .tb-bareme__ligne { border-bottom: 1px solid var(--tb-ligne); } .tb-bareme__tbody .tb-bareme__ligne:last-child { border-bottom: 0; } .tb-bareme__tbody .tb-bareme__ligne { transition: background-color var(--tb-d1) var(--tb-ease); } .tb-bareme__tbody .tb-bareme__ligne:hover { background: var(--tb-survol-clair); } .tb-bareme__place { padding: var(--tb-e3) var(--tb-e4); font-weight: 600; text-align: left; vertical-align: middle; } .tb-bareme__place-inner { display: flex; align-items: center; gap: var(--tb-e3); min-width: 0; } /* Les pastilles de rang de components.css puisent leurs dégradés dans des variables locales à ses composants. Hors de ce contexte, on les rétablit depuis tokens.css — et on ramène les quatre pastilles à la même taille, pour que les dix lignes gardent exactement le même pas vertical. */ .tb-bareme .tb-pastille { width: 34px; height: 34px; font-size: .9375rem; box-shadow: none; } .tb-bareme .tb-pastille--or { background-image: var(--tb-medaille-or-fond); border-color: var(--tb-medaille-or-trait); color: var(--tb-medaille-or-encre); } .tb-bareme .tb-pastille--argent { background-image: var(--tb-medaille-argent-fond); border-color: var(--tb-medaille-argent-trait); color: var(--tb-medaille-argent-encre); } .tb-bareme .tb-pastille--bronze { background-image: var(--tb-medaille-bronze-fond); border-color: var(--tb-medaille-bronze-trait); color: var(--tb-medaille-bronze-encre); } .tb-bareme .tb-pastille--neutre { background: var(--tb-medaille-neutre-fond); border-color: var(--tb-medaille-neutre-trait); color: var(--tb-medaille-neutre-encre); } .tb-bareme__libelle { font-family: var(--tb-font-titre); font-size: 1.0625rem; font-weight: 600; color: var(--tb-encre); letter-spacing: -.005em; } .tb-bareme__cell { padding: var(--tb-e3) var(--tb-e4); vertical-align: middle; } .tb-bareme__jauge { display: flex; align-items: center; gap: var(--tb-e3); } .tb-bareme__valeur { display: inline-block; min-width: 2.75ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 700; color: var(--tb-encre); flex: 0 0 auto; } .tb-bareme__cell--collectif .tb-bareme__valeur { color: var(--tb-encre-70); } .tb-bareme__piste { display: block; position: relative; flex: 1 1 auto; min-width: 40px; height: 9px; border-radius: var(--tb-rond); background: color-mix(in srgb, var(--tb-encre) 7%, transparent); overflow: hidden; } .tb-bareme__barre { display: block; height: 100%; border-radius: var(--tb-rond); width: var(--tb-barre, 0%); } .tb-bareme__barre--indiv { background-image: linear-gradient(90deg, var(--tb-vert) 0%, var(--tb-vert-clair) 100%); } .tb-bareme__barre--collectif { background-image: linear-gradient(90deg, var(--tb-orange) 0%, var(--tb-or-clair) 100%); } .tb-bareme__cell--ratio { text-align: right; } .tb-bareme__ratio { vertical-align: middle; } .tb-bareme__ratio-vide { color: var(--tb-encre-45); } .tb-bareme__tfoot .tb-bareme__ligne--total { background: var(--tb-ivoire-alt); border-top: 2px solid var(--tb-ligne-forte); border-bottom: 0; } .tb-bareme__place--total { display: table-cell; font-family: var(--tb-font-texte); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-encre-70); } /* — Mobile : le tableau devient une pile de fiches, aucun défilement latéral — */ @media (max-width: 767.98px) { .tb-bareme__cadre { border: 0; background: transparent; box-shadow: none; overflow: visible; } .tb-bareme__table, .tb-bareme__tbody, .tb-bareme__tfoot, .tb-bareme__ligne, .tb-bareme__place, .tb-bareme__cell { display: block; } .tb-bareme__thead { display: none; } .tb-bareme__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tb-e3) var(--tb-e4); margin-bottom: var(--tb-e3); padding: var(--tb-e4); border: 1px solid var(--tb-ligne); border-radius: var(--tb-r2); background: var(--tb-blanc); box-shadow: var(--tb-ombre1); } .tb-bareme__place, .tb-bareme__place--total { display: block; grid-column: 1 / -1; padding: 0 0 var(--tb-e2); border-bottom: 1px solid var(--tb-ligne); } .tb-bareme__cell { padding: 0; } .tb-bareme__cell::before { content: attr(data-libelle); display: block; margin-bottom: var(--tb-e1); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-encre-45); } .tb-bareme__cell--ratio { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--tb-e3); padding-top: var(--tb-e2); border-top: 1px solid var(--tb-ligne); text-align: left; } .tb-bareme__cell--ratio::before { margin-bottom: 0; } .tb-bareme__tfoot .tb-bareme__ligne--total { border: 1px solid color-mix(in srgb, var(--tb-vert) 26%, transparent); background: var(--tb-vert-pale); } } /* ═══════════════════════════════════════════════════════════════════════════ 7. LE FORMAT DES TOURNOIS — fil vertical numéroté ═════════════════════════════════════════════════════════════════════════ */ .tb-format { position: relative; display: grid; gap: var(--tb-e6); margin: 0; padding: 0 0 0 var(--tb-e2); max-width: 72ch; } .tb-format__item { position: relative; display: flex; align-items: flex-start; gap: var(--tb-e5); } /* Le fil relie les étapes ; il s'arrête à la dernière. */ .tb-format__item::before { content: ''; position: absolute; left: 19px; top: 44px; bottom: calc(var(--tb-e6) * -1); width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--tb-vert) 22%, transparent) 0%, color-mix(in srgb, var(--tb-vert) 6%, transparent) 100%); } .tb-format__item:last-child::before { display: none; } .tb-format__noeud { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--tb-rond); background: var(--tb-vert); color: var(--tb-creme); font-family: var(--tb-font-texte); font-variant-numeric: tabular-nums; font-size: var(--tb-t-petit); font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 0 4px var(--tb-ivoire), 0 0 0 5px var(--tb-ligne); } .tb-format__noeud--picto { background: var(--tb-vert-pale); color: var(--tb-encre); font-size: 1.1875rem; } .tb-format__texte { margin: 0; padding-top: var(--tb-e2); max-width: 62ch; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.62; color: var(--tb-encre); text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════════════════ 8. LE DÉPARTAGE — état « à définir », honnête et soigné ═════════════════════════════════════════════════════════════════════════ */ .tb-departage { display: grid; gap: var(--tb-e6); } .tb-departage__attente { position: relative; padding: var(--tb-e7) var(--tb-e6); border: 2px dashed color-mix(in srgb, var(--tb-or) 45%, transparent); border-radius: var(--tb-r3); background: var(--tb-ivoire-alt); } @media (min-width: 768px) { .tb-departage__attente { padding: var(--tb-e8); } } .tb-departage__badge { margin-bottom: var(--tb-e4); } .tb-departage__titre { margin: 0 0 var(--tb-e4); font-family: var(--tb-font-titre); font-size: var(--tb-t-h3); font-weight: 600; line-height: 1.2; color: var(--tb-vert); } .tb-departage__phrase { margin: 0; max-width: 64ch; line-height: 1.62; color: var(--tb-encre); text-wrap: pretty; } .tb-departage__phrase--secondaire { margin-top: var(--tb-e4); font-size: var(--tb-t-petit); color: var(--tb-encre-70); } /* Liste des critères, si un jour le classeur les porte. */ .tb-departage__liste { display: grid; gap: var(--tb-e4); margin: 0; padding: 0; } .tb-departage__item { display: flex; align-items: flex-start; gap: var(--tb-e4); padding: var(--tb-e4) var(--tb-e5); border: 1px solid var(--tb-ligne); border-radius: var(--tb-r2); background: var(--tb-blanc); } .tb-departage__rang { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--tb-rond); background: var(--tb-vert-pale); color: var(--tb-vert); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--tb-t-petit); } .tb-departage__texte { margin: 0; max-width: 60ch; line-height: 1.6; } /* Les égalités réellement présentes dans les classements. */ .tb-departage__cas { padding: var(--tb-e5) var(--tb-e6); border-left: 3px solid var(--tb-orange); border-radius: 0 var(--tb-r2) var(--tb-r2) 0; background: var(--tb-blanc); box-shadow: var(--tb-ombre1); } .tb-departage__cas-titre { margin: 0 0 var(--tb-e3); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-encre-45); } .tb-departage__cas-liste { display: grid; gap: var(--tb-e2); margin: 0; padding: 0; } .tb-departage__cas-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tb-e2) var(--tb-e3); font-size: var(--tb-t-petit); line-height: 1.5; } .tb-departage__cas-saison { font-family: var(--tb-font-titre); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tb-vert); min-width: 8.5ch; } .tb-departage__cas-classement { display: inline-flex; align-items: center; justify-content: center; min-width: 9ch; padding: 2px 8px; border-radius: var(--tb-rond); background: var(--tb-vert-pale); color: var(--tb-vert); font-size: var(--tb-t-micro); font-weight: 600; } .tb-departage__cas-detail { color: var(--tb-encre-70); } /* ═══════════════════════════════════════════════════════════════════════════ 9. LES RÉCOMPENSES — panneau vert Masters serti dans la colonne ═════════════════════════════════════════════════════════════════════════ */ .tb-recompenses { position: relative; isolation: isolate; display: grid; gap: var(--tb-e7); padding: clamp(var(--tb-e5), 4vw, var(--tb-e9)); border-radius: var(--tb-r4); background-color: var(--tb-vert-profond); color: var(--tb-creme); overflow: hidden; } .tb-recompenses::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--tb-degrade-tapis); pointer-events: none; } .tb-recompenses::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background-image: var(--tb-lisere-or); } .tb-recompenses__intertitre { margin: 0 0 var(--tb-e4); font-family: var(--tb-font-texte); font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-or-clair); } /* — La carte — */ .tb-recompense { display: flex; align-items: flex-start; gap: var(--tb-e4); padding: var(--tb-e5); border: 1px solid var(--tb-ligne-claire); border-radius: var(--tb-r3); background: rgba(255, 255, 255, .06); transition: background-color var(--tb-d1) var(--tb-ease), border-color var(--tb-d1) var(--tb-ease), transform var(--tb-d1) var(--tb-ease); } .tb-recompense:hover { background: rgba(255, 255, 255, .10); border-color: color-mix(in srgb, var(--tb-or-clair) 42%, transparent); transform: translateY(-2px); } .tb-recompense__icone { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--tb-rond); font-size: 1.5rem; line-height: 1; background: color-mix(in srgb, var(--tb-recompense-couleur, var(--tb-or)) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tb-recompense-couleur, var(--tb-or)) 45%, transparent); } .tb-recompense__corps { min-width: 0; } .tb-recompense__titre { margin: 0; font-family: var(--tb-font-titre); font-size: var(--tb-t-h3); font-weight: 600; line-height: 1.2; color: var(--tb-creme); text-wrap: balance; } .tb-recompense__soustitre { margin: var(--tb-e1) 0 0; font-size: var(--tb-t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-or-clair); } .tb-recompense__texte { margin: var(--tb-e3) 0 0; max-width: 58ch; font-size: var(--tb-t-petit); line-height: 1.62; color: var(--tb-creme-70); text-wrap: pretty; } .tb-recompense__mention { margin-top: var(--tb-e4); } /* Sur écran étroit, l'icône passe au-dessus du texte : garder les deux côte à côte réduirait la ligne à une vingtaine de caractères. */ @media (max-width: 599.98px) { .tb-recompense, .tb-recompense--une { flex-direction: column; align-items: flex-start; gap: var(--tb-e3); } .tb-recompense--une { gap: var(--tb-e4); } .tb-recompense--une .tb-recompense__icone { width: 64px; height: 64px; font-size: 2rem; } .tb-recompense--une .tb-recompense__titre { font-size: var(--tb-t-h3); } } /* Vedette : casquette verte, coupe, Hall of Fame. */ .tb-recompense--vedette { background: rgba(255, 255, 255, .10); border-color: color-mix(in srgb, var(--tb-or-clair) 38%, transparent); } .tb-recompense--une { align-items: center; gap: var(--tb-e6); padding: clamp(var(--tb-e5), 3vw, var(--tb-e7)); border-width: 1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tb-or) 22%, transparent), var(--tb-ombre2); } .tb-recompense--une .tb-recompense__icone { width: 82px; height: 82px; font-size: 2.5rem; background-image: var(--tb-halo-or); } .tb-recompense--une .tb-recompense__titre { font-size: var(--tb-t-h2); } .tb-recompense--une .tb-recompense__texte { font-size: var(--tb-t-corps); color: var(--tb-creme); } /* Aucune récompense remise : la carte le dit visuellement. */ .tb-recompense--sans-objet { background: transparent; border-style: dashed; border-color: var(--tb-ligne-claire); } .tb-recompense--sans-objet:hover { background: rgba(255, 255, 255, .05); } /* — Les trois médailles — */ .tb-recompenses__trio { display: grid; gap: var(--tb-e4); grid-template-columns: 1fr; } @media (min-width: 560px) { .tb-recompenses__trio { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } .tb-recompense--compacte { flex-direction: column; gap: var(--tb-e3); padding: var(--tb-e4); } .tb-recompense--compacte .tb-recompense__icone { width: 44px; height: 44px; font-size: 1.3125rem; } .tb-recompense--compacte .tb-recompense__titre { font-size: 1.125rem; } /* — La coupe, avec sa photo — */ .tb-recompenses__coupe { display: grid; gap: var(--tb-e5); align-items: center; } @media (min-width: 640px) { .tb-recompenses__coupe { grid-template-columns: 200px minmax(0, 1fr); gap: var(--tb-e7); } } .tb-recompenses__figure { margin: 0; } .tb-recompenses__figure img { width: 100%; max-width: 200px; height: auto; margin-inline: auto; border-radius: var(--tb-r3); border: 1px solid var(--tb-ligne-claire); box-shadow: var(--tb-ombre2); } .tb-recompense--illustree { align-self: center; } /* — La suite : trophée, cumulé, Hall of Fame — */ .tb-recompenses__suite { display: grid; gap: var(--tb-e4); grid-template-columns: 1fr; } /* Une seule colonne, volontairement : ces cartes portent du texte à lire, pas des chiffres à comparer. Deux colonnes rétréciraient la ligne à une quarantaine de caractères, bien en deçà du confort de lecture. */ /* — La phrase du classeur, citée — */ .tb-recompenses__citation { margin: 0; padding-left: var(--tb-e5); border-left: 3px solid var(--tb-or); } .tb-recompenses__citation-texte { margin: 0; } .tb-recompenses__citation-texte p { margin: 0; max-width: 62ch; font-family: var(--tb-font-titre); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 400; line-height: 1.45; color: var(--tb-creme); text-wrap: pretty; } .tb-recompenses__citation-source { margin-top: var(--tb-e3); font-size: var(--tb-t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--tb-creme-70); } /* ═══════════════════════════════════════════════════════════════════════════ 10. LES SAISONS ═════════════════════════════════════════════════════════════════════════ */ .tb-saisons-reg { display: grid; gap: var(--tb-e6); } /* Le minimum de joueurs, mis en chiffre. */ .tb-saisons-reg__minimum { display: flex; align-items: center; gap: var(--tb-e5); padding: var(--tb-e5) var(--tb-e6); border: 1px solid color-mix(in srgb, var(--tb-vert) 20%, transparent); border-radius: var(--tb-r3); background: var(--tb-vert-pale); } .tb-saisons-reg__chiffre { margin: 0; flex: 0 0 auto; font-family: var(--tb-font-titre); font-size: clamp(3rem, 2rem + 3.5vw, 4.5rem); font-weight: 600; line-height: .9; font-variant-numeric: tabular-nums; color: var(--tb-orange); } .tb-saisons-reg__minimum-texte { min-width: 0; } .tb-saisons-reg__minimum-titre { margin: 0; font-family: var(--tb-font-titre); font-size: var(--tb-t-h3); font-weight: 600; line-height: 1.15; color: var(--tb-vert); } .tb-saisons-reg__minimum-phrase { margin: var(--tb-e2) 0 0; max-width: 56ch; font-size: var(--tb-t-petit); line-height: 1.55; color: var(--tb-encre-70); } /* La liste des saisons. */ .tb-saisons-reg__liste { display: grid; gap: var(--tb-e4); margin: 0; padding: 0; grid-template-columns: 1fr; align-items: start; } @media (min-width: 640px) { .tb-saisons-reg__liste { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } } .tb-saisons-reg__item { padding: var(--tb-e5); border: 1px solid var(--tb-ligne); border-radius: var(--tb-r3); background: var(--tb-blanc); box-shadow: var(--tb-ombre1); } .tb-saisons-reg__item--encours { border-color: color-mix(in srgb, var(--tb-vert) 30%, transparent); box-shadow: inset 0 3px 0 var(--tb-orange), var(--tb-ombre1); } .tb-saisons-reg__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tb-e3); } .tb-saisons-reg__nom { margin: 0; font-family: var(--tb-font-titre); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--tb-vert); } .tb-saisons-reg__detail { margin: var(--tb-e3) 0 0; font-size: var(--tb-t-petit); color: var(--tb-encre-70); } .tb-saisons-reg__attente { margin: var(--tb-e3) 0 0; padding-top: var(--tb-e3); border-top: 1px solid var(--tb-ligne); font-size: var(--tb-t-petit); line-height: 1.55; color: var(--tb-encre-45); } /* ═══════════════════════════════════════════════════════════════════════════ 11. MOUVEMENT RÉDUIT ET IMPRESSION ═════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .tb-principe, .tb-recompense, .tb-bareme__tbody .tb-bareme__ligne, .tb-reg-somm__lien { transition: none !important; } .tb-principe:hover, .tb-recompense:hover { transform: none; } } @media print { .tb-reg-somm { display: none; } .tb-reg-hero { min-height: 0; padding-block: var(--tb-e5); background: none; color: var(--tb-encre); } .tb-reg-hero__media, .tb-reg-hero::before { display: none; } .tb-reg-hero__titre, .tb-reg-hero__chapo, .tb-reg-hero__source { color: var(--tb-encre); } .tb-recompenses { background: none; color: var(--tb-encre); border: 1px solid var(--tb-ligne-forte); } .tb-recompense__titre, .tb-recompense__texte, .tb-recompenses__citation-texte p { color: var(--tb-encre); } }