/* ══════════════════════════════════════════════════════════════
   classement.css — /classement/, la table d'honneur complète
   TopPopote

   La même page que la section d'accueil, en entier : un en-tête
   éditorial, l'étage 1 « Les chefs de la maison » (composant .hn-maison
   d'editorial.css, réutilisé tel quel), l'étage 2 « La table des membres »
   avec sa barre de rubriques, ses lignes et sa pagination, dessinées dans
   le langage des filets. Se charge APRÈS editorial.css, qui porte les
   jetons --ard-* et les primitives .hn-* : tout passe par eux, aucune
   couleur en dur, les deux thèmes suivent d'eux-mêmes.
   Maquette validée : .claude/design-drafts/2026-09-05-classement-table-honneur.html
   ══════════════════════════════════════════════════════════════ */

/* --- La page : l'ardoise remonte sous la barre de navigation (le main
   n'a pas de dégagement) et porte le même décalage que l'accueil, 89 px,
   puis le pas de l'en-tête. Le bas reprend --hn-pad-y. */
.cl-page{padding:calc(89px + clamp(56px,7vw,88px)) 0 var(--hn-pad-y)}

/* --- L'en-tête : le kicker et le chapeau viennent de .hn-head. Le titre
   de page prend un cran entre le h2 de section (48) et le h1 du hero (78) :
   sans photo derrière lui, un titre n'a pas besoin de crier. Le mot-clé en
   or suit la discipline de l'accueil (« Ceux qui font *la maison* »). */
.cl-h1{font-size:clamp(38px,4.6vw,60px);line-height:1.04}
.hn-head .cl-h1{margin:22px 0 20px}
/* Deux lignes de longueur égale sur mobile plutôt que « font vivre. » orphelin. */
.hn-head .hn-lead{text-wrap:balance}

/* --- Étage 1 : la grille suit l'en-tête sans reprendre la marge d'étage
   (même règle que `.hn-head + .hn-etage`, mais la section s'interpose). */
.cl-maison > .hn-etage{margin-top:0}

/* --- La barre des onglets : UN seul bloc pour la période et la catégorie,
   là où la page en avait deux (pilule + onglets collants). Rubriques à
   gauche, période à droite, sur un même filet, la barre de rubriques d'une
   revue. Collante : vingt lignes plus loin, on change de catégorie sans
   remonter. Fond opaque de l'ardoise, jamais de flou. top = le bas de la
   barre de navigation fixe : 89 px, la hauteur de #main-nav mesurée au DOM,
   le même décalage que .ard sur l'accueil. L'ancienne page collait à 60 px
   et la navbar recouvrait 29 px des onglets. */
.cl-bar{
  position:sticky;top:89px;z-index:5;
  display:flex;align-items:stretch;justify-content:space-between;gap:24px;
  background:var(--ard-bg);
  border-bottom:1px solid var(--ard-rule);
  transition:top .35s cubic-bezier(.4,0,.2,1);
}
/* Sous 768 px, base.js replie la navbar au défilement vers le bas
   (nav-scroll-hidden, même courbe de .35s) : la barre remonte avec elle,
   sinon 89 px de lignes défileraient au-dessus d'une barre flottante.
   Sans :has(), elle reste à 89 px, comme avant. */
body:has(#main-nav.nav-scroll-hidden) .cl-bar{top:0}
/* Le décalage de -1 px qui pose le filet de l'onglet actif SUR le filet de
   la barre vit sur les deux conteneurs, pas sur les onglets : .cl-tabs
   défile en x, donc en y aussi (overflow-x:auto force overflow-y:auto), et
   un onglet qui dépasserait de 1 px y ferait naître un ascenseur. */
.cl-tabs{display:flex;gap:4px;min-width:0;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.cl-tabs::-webkit-scrollbar{display:none}
/* L'onglet actif n'a ni fond ni couleur de catégorie : l'encre pleine, l'or
   sur l'icône et un filet d'or posé sur le filet de la barre. Les trois
   couleurs vert/bleu/ambre de l'ancienne page tombent : dans cette page
   l'or est éditorial et le vert est produit, rien d'autre. */
.cl-tab{
  display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:0 16px;
  border-bottom:1px solid transparent;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ard-ink-3);white-space:nowrap;
  transition:color var(--ard-tr),border-color var(--ard-tr);
}
.cl-tab:first-child{padding-left:0}
.cl-tab svg{width:15px;height:15px;flex:none}
.cl-tab-short{display:none}
.cl-tab:hover{color:var(--ard-ink)}
.cl-tab:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:-2px}
.cl-tab.active{color:var(--ard-ink);border-bottom-color:var(--ard-gold-text)}
.cl-tab.active svg{color:var(--ard-gold-text)}

/* La période : même dessin, un cran plus petit et plus léger (11/600 contre
   12/700), c'est un filtre, pas une rubrique. Un trait vertical les sépare. */
.cl-periode-tabs{display:flex;align-items:stretch;flex:none;margin-bottom:-1px}
.cl-periode-tab{
  position:relative;display:inline-flex;align-items:center;
  min-height:52px;padding:0 14px;
  border-bottom:1px solid transparent;
  font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ard-ink-3);white-space:nowrap;
  transition:color var(--ard-tr),border-color var(--ard-tr);
}
.cl-periode-tab:last-child{padding-right:0}
.cl-periode-tab + .cl-periode-tab::before{
  content:"";position:absolute;left:0;top:50%;width:1px;height:14px;
  background:var(--ard-rule-strong);transform:translateY(-50%);
}
.cl-periode-tab:hover{color:var(--ard-ink)}
.cl-periode-tab:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:-2px}
.cl-periode-tab.active{color:var(--ard-ink);border-bottom-color:var(--ard-gold-text)}

/* --- Les lignes : le dessin de .hn-rank-row de l'accueil (filet 1 px
   entre les lignes, rang en Fraunces, survol qui décale de 8 px), élargi
   d'une colonne pour le médaillon et d'une ligne pour le grade. Plus de
   carte arrondie ni de fond par ligne : la liste se lit comme un sommaire. */
.cl-board{display:flex;flex-direction:column;margin-top:8px}
.cl-row{
  display:grid;grid-template-columns:36px 40px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 8px;border-bottom:1px solid var(--ard-rule);
  transition:padding-left var(--ard-tr);
}
.cl-row:hover{padding-left:16px}
.cl-row:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:-2px}
.cl-rank-cell{display:flex;align-items:center;justify-content:center}
.cl-rank-num{
  font-family:'Fraunces',Georgia,serif;font-size:17px;color:var(--ard-ink-3);
  font-variant-numeric:tabular-nums;
}
/* Les trois premiers : le numéro passe à l'or, rien d'autre. Ni médaille ni
   estrade, l'accueil porte déjà le podium ; ici c'est la liste complète. */
.cl-row-top .cl-rank-num{color:var(--ard-gold-text)}
/* Le médaillon d'un membre : 40 px, anneau neutre (--ard-rule-strong, 3:1)
   et non l'anneau d'or des chefs de la maison : vingt anneaux d'or en
   colonne feraient du bling. Repli sans photo : l'initiale en Fraunces,
   comme .hn-maison-ava, en encre 2 plutôt qu'en or pour la même raison. */
.cl-av{
  width:40px;height:40px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--ard-bg-2);border:1px solid var(--ard-rule-strong);
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:600;font-size:15px;color:var(--ard-ink-2);line-height:1;
}
.cl-av img{width:100%;height:100%;object-fit:cover}
.cl-info{min-width:0}
.cl-name{
  font-size:15px;font-weight:600;color:var(--ard-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cl-grade{margin-top:2px;font-size:12.5px;color:var(--ard-ink-3)}
.cl-score{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;color:var(--ard-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cl-score svg{width:14px;height:14px;flex:none;color:var(--ard-ink-3)}

/* --- La ligne du lecteur : l'encre dorée sur le rang et le nom, comme
   .hn-rank-you sur l'accueil. Pas d'aplat, un fond plein se lirait comme
   un rang gagné. Le marqueur « Toi » quitte sa pilule verte pour de petites
   capitales d'or à la suite du nom. */
.cl-row-me .cl-rank-num,.cl-row-me .cl-name{color:var(--ard-gold-text)}
/* Ta ligne hors page : un filet pointillé sépare la dernière ligne affichée de
   la tienne, au rang réel. Pas de carte, pas de « il te manque » : le rang dit tout. */
.cl-hors-page{height:0;margin:14px 0;border-top:1px dashed var(--ard-rule)}
.cl-name-me-badge{
  display:inline-block;margin-left:10px;vertical-align:2px;
  font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ard-gold-text);
}

/* --- Table vide : une ligne en Fraunces, centrée, au pas de .hn-rank-empty. */
.cl-empty{
  padding:64px 0;text-align:center;
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:400;font-size:var(--hn-h3);line-height:1.3;color:var(--ard-ink-2);
}

/* --- Pagination : des cases carrées à filet, 44 px (cible tactile), les
   numéros en Fraunces comme les rangs. L'or marque la page courante et le
   survol, sans fond ; un fond de 8 % seulement sur la page courante, pour
   qu'elle tienne aussi sans couleur. */
.cl-pages{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.cl-page-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--ard-rule);border-radius:2px;
  font-family:'Fraunces',Georgia,serif;font-size:16px;color:var(--ard-ink-2);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--ard-tr),color var(--ard-tr),background-color var(--ard-tr);
}
.cl-page-btn:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.cl-page-btn:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.cl-page-btn.active{
  border-color:var(--ard-gold-text);color:var(--ard-gold-text);
  background:var(--hn-gold-08);pointer-events:none;
}
.cl-page-btn-nav{
  padding:0 16px;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
}
.cl-page-btn svg{width:14px;height:14px;flex:none}

/* --- Mobile ---------------------------------------------------------
   La barre passe sur deux rangées : la période d'abord (elle est plus
   courte et change moins souvent), les rubriques dessous. Les trois
   libellés longs font 479 px pour 350 disponibles et l'ascenseur est
   masqué : « Notes moyennes » sortait de l'écran sans que rien ne le
   dise. Sur mobile, les rubriques prennent leur libellé court (XP,
   Recettes, Notes) et tiennent sur une ligne, rien ne défile.
   Le décalage au survol tombe : sans souris, il n'apporte rien. */
@media (max-width:640px){
  .cl-bar{flex-wrap:wrap;gap:0}
  /* La rangée de période porte son propre filet : le décalage de -1 px
     redescend sur ses onglets (ce conteneur-là ne défile pas). */
  .cl-periode-tabs{order:-1;width:100%;margin-bottom:0;border-bottom:1px solid var(--ard-rule)}
  .cl-periode-tab{min-height:40px;margin-bottom:-1px}
  .cl-periode-tab:first-child{padding-left:0}
  .cl-tabs{width:100%}
  .cl-tab{min-height:48px;padding:0 12px}
  .cl-tab-long{display:none}
  .cl-tab-short{display:inline}
  .cl-row{grid-template-columns:28px 36px minmax(0,1fr) auto;gap:10px;padding:12px 4px}
  .cl-row:hover{padding-left:4px}
  .cl-av{width:36px;height:36px;font-size:14px}
  .cl-name,.cl-score{font-size:14px}
  .cl-empty{padding:48px 0}
}

/* --- Mouvement réduit : la page ne charge pas accueil_nuit.css, qui porte
   la règle globale de l'accueil ; la sienne reste bornée à l'ardoise. */
@media (prefers-reduced-motion:reduce){
  .cl-page *,.cl-page *::before,.cl-page *::after{transition-duration:.001ms!important}
}