/* Feuille de style du site — extraite de index.html.
   Servie avec un cache immuable : la version est portee par le ?v= dans
   index.html, recalcule par `node outils/versionner.mjs`. */

  :root{
    color-scheme: dark;
    --bg-base: #10092C;
    --bg-gradient: linear-gradient(160deg, #10092C, #1B1240);
    --surface: var(--elev-1);
    --surface-soft: var(--elev-2);
    --accent: #F07D00;
    --accent-rgb: 240,125,0;
    --secondary: #03A94D;
    --secondary-rgb: 3,169,77;
    --structure: #587DF6;
    --structure-rgb: 88,125,246;
    --accent-ink: #F88100;
    --secondary-ink: #03B954;
    --structure-ink: #8AA5FC;
    --on-structure: #150C33;
    --text-primary: #F2F4F7;
    --text-secondary: #AEB8C4;
    --border: rgba(178,162,216,0.30);
    --border-strong: rgba(178,162,216,0.45);
    --topbar-bg: rgba(14,8,38,0.86);
    --nav-mobile-bg: rgba(14,8,38,0.98);
    --card-grad:       linear-gradient(135deg, #3F006A 0%, rgb(5, 0, 31) 100%);
    --card-grad-hover: linear-gradient(135deg, #4E0084 0%, rgb(13, 3, 48) 100%);
    --nav-float-bg: rgba(30,22,66,0.90);
    --nav-float-border: rgba(178,162,216,0.28);
    --nav-float-shadow: 0 10px 30px rgba(0,0,0,0.42);
    --row-hover: rgba(255,255,255,0.035);
    --row-hover-strong: rgba(255,255,255,0.075);

    --sunken:  #180F38;
    --elev-1:  #1E1642;
    --elev-2:  #251B4F;
    --elev-3:  #2D2160;
    --lift-1: inset 0 1px 0 rgba(255,255,255,0.05);
    --lift-2: inset 0 1px 0 rgba(255,255,255,0.07);
    --lift-3: inset 0 1px 0 rgba(255,255,255,0.09);
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;

    --chip-base: var(--sunken);
    --accent-strong:    var(--accent);
    --secondary-strong: var(--secondary);
    --structure-strong: #7392FA;
    --on-accent:    #150C33;
    --on-secondary: #150C33;

    /* Opacite de la photo de fond. Un seul chiffre a changer. */
    --fond-opacite: 0.155;
  }

  :root[data-theme="light"]{
    color-scheme: light;
    /* Papier violet tres desature : meme famille chromatique que le theme sombre,
       pour que les deux themes se lisent comme une seule identite. */
    --bg-base: #F1EDF6;
    --bg-gradient: linear-gradient(160deg, #F1EDF6, #E7DFF2);
    --surface: #FDFBFF;
    --surface-soft: #E7E0EF;
    --text-primary: #1E1830;
    --text-secondary: #56506B;
    --border: rgba(30,24,48,0.16);
    --border-strong: rgba(30,24,48,0.28);
    --topbar-bg: rgba(253,251,255,0.90);
    --nav-mobile-bg: rgba(253,251,255,0.98);
    --card-grad:       linear-gradient(135deg, var(--elev-1) 0%, rgba(var(--structure-rgb),0.07) 100%);
    --card-grad-hover: linear-gradient(135deg, var(--elev-2) 0%, rgba(var(--structure-rgb),0.12) 100%);
    --nav-float-bg: rgba(253,251,255,0.92);
    --nav-float-border: rgba(90,74,128,0.24);
    --nav-float-shadow: 0 10px 30px rgba(30,24,48,0.16);
    --row-hover: rgba(30,24,48,0.05);
    --row-hover-strong: rgba(30,24,48,0.085);

    --accent: #F07D00;
    --accent-rgb: 240,125,0;
    --accent-ink: #995000;
    --secondary: #03A94D;
    --secondary-rgb: 3,169,77;
    --secondary-ink: #026F33;
    --structure: #6A46B5;
    --structure-rgb: 106,70,181;
    --structure-ink: #593A99;

    --accent-strong:    #F07D00;
    --secondary-strong: #03A94D;
    --structure-strong: #6A46B5;
    --on-accent:    #1E1830;
    --on-secondary: #1E1830;
    --on-structure: #FDFBFF;

    --sunken:  var(--surface-soft);
    --elev-1:  var(--surface);
    --elev-2:  var(--surface);
    --elev-3:  var(--surface);
    --lift-1: none;
    --lift-2: none;
    --lift-3: none;
    --shadow-1: 0 1px 2px rgba(30,24,48,0.05), 0 4px 12px rgba(30,24,48,0.07);
    --shadow-2: 0 2px 4px rgba(30,24,48,0.07), 0 10px 26px rgba(30,24,48,0.12);
    --shadow-3: 0 24px 64px rgba(30,24,48,0.24);
    --chip-base: var(--surface);

    --fond-opacite: 0.075;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{ height:100%; background: var(--bg-base); }
  body{
    background: var(--bg-base, transparent);
    color: var(--text-primary);
    font-family: 'Work Sans', system-ui, sans-serif;
    font-size:17px;
    line-height:1.55;
    min-height:100vh;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:var(--bg-gradient);
    pointer-events:none;
    transform:translateZ(0);
    will-change:transform;
  }

  h1,h2{ font-family:'Barlow Condensed', system-ui, sans-serif; }
  h1{ font-size:58.5px; font-weight:800; line-height:1.15; letter-spacing:-0.01em; }
  h2{ font-size:39px; font-weight:700; line-height:1.25; }
  h3{ font-family:'Work Sans', system-ui, sans-serif; font-size:25px; font-weight:600; line-height:1.3; }
  h1.panel-title{ font-size:39px; font-weight:700; line-height:1.25; }
  h2.panel-subtitle{ font-family:'Work Sans', system-ui, sans-serif; font-size:24px; font-weight:600; line-height:1.3; }
  .caption{ font-family:'Barlow Condensed', system-ui, sans-serif; font-size:16.5px; font-weight:600; letter-spacing:0.04em; color:var(--text-secondary); }
  .caption-upper{ text-transform:uppercase; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }

  /* Accessibilité */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  :focus-visible{
    outline:2px solid var(--structure);
    outline-offset:2px;
    border-radius:4px;
  }
  .table-scroll{ overflow-x:auto; border-radius:8px; }

  .skip-link{
    position:absolute; left:16px; top:-100px; z-index:200;
    background:var(--surface); color:var(--text-primary);
    border:1px solid var(--border-strong); border-radius:8px;
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16.5px;
    padding:11px 18px; text-decoration:none;
    transition:top .15s ease;
  }
  .skip-link:focus{ top:12px; }

  .app{ max-width:1180px; margin:0 auto; padding:0 24px 64px; }

  header.topbar{
    position:sticky; top:0; z-index:50;
    background: var(--topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topbar-inner{
    max-width:1180px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; gap:20px; height:76px;
  }
  .brand{
    display:flex; align-items:center; gap:12px; flex-shrink:0;
    appearance:none; border:none; background:none; padding:0; margin:0;
    font:inherit; text-align:left; cursor:pointer; color:inherit;
  }
  .brand:hover .b1{ color:var(--structure-ink); }
  .brand img{ height:52px; width:auto; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
  .brand-text .b1{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20.5px; letter-spacing:0.02em; transition:color .15s ease; }
  .brand-text .b2{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.12em; color:var(--text-secondary); text-transform:uppercase; }

  .current-section{
    display:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary);
    padding-left:12px; margin-left:12px; border-left:1px solid var(--border);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }

  nav.tabs{ display:flex; gap:4px; margin-left:auto; height:100%; overflow-x:auto; }
  nav.tabs button{
    appearance:none; border:none; background:transparent; color:var(--text-secondary);
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16.5px; letter-spacing:0.03em;
    text-transform:uppercase; padding:0 18px; height:100%; cursor:pointer;
    border-bottom:3px solid transparent; transition:color .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  nav.tabs .tab-icon{ display:none; width:22px; height:22px; flex-shrink:0; }
  nav.tabs button{ -webkit-tap-highlight-color:transparent; }
  nav.tabs button:hover{ color:var(--text-primary); }
  nav.tabs button.active{ color:var(--text-primary); border-bottom-color:var(--structure); }

  .hamburger-btn{
    display:none; appearance:none; border:1px solid var(--border-strong); background:var(--surface-soft);
    width:44px; height:44px; border-radius:8px; cursor:pointer; align-items:center; justify-content:center;
    flex-direction:column; gap:4px; margin-left:auto; flex-shrink:0;
  }
  .hamburger-btn span{ display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .theme-toggle{
    appearance:none; border:1px solid var(--border-strong); background:var(--surface-soft);
    width:44px; height:44px; border-radius:8px; cursor:pointer; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-secondary); transition:color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .theme-toggle:hover{ color:var(--text-primary); border-color:rgba(var(--structure-rgb),0.45); background:rgba(var(--structure-rgb),0.08); }
  .theme-toggle svg{ width:20px; height:20px; display:block; }
  .theme-toggle .i-moon{ display:none; }
  :root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
  :root[data-theme="light"] .theme-toggle .i-moon{ display:block; }

  .back-to-top{
    position:fixed; right:20px; bottom:20px; z-index:40;
    width:46px; height:46px; border-radius:50%;
    appearance:none; border:1px solid var(--border-strong); background:var(--elev-2);
    color:var(--text-secondary); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:var(--lift-2), var(--shadow-2);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px);
    transition:opacity .2s ease, transform .2s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .back-to-top.visible{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .back-to-top:hover{ color:var(--text-primary); border-color:rgba(var(--structure-rgb),0.5); background:rgba(var(--structure-rgb),0.1); }
  @media (max-width:760px){
    .back-to-top{ right:16px; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
  }

  main{ padding-top:36px; }
  .panel{ display:none; animation:fade .25s ease; }
  .panel.active{ display:block; }
  @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- ACCUEIL : Empreinte de marque & Encart Champions ---------- */
  .hero{
    position:relative;
    padding:10px 0 0;
    overflow:visible;
    display:grid;
    grid-template-columns: 1.22fr 0.95fr;
    gap:34px 36px;
    grid-template-areas:
      "content champions"
      "links   links"
      "rail    rail"
      "story   story";
    align-items:stretch;
  }
  .hero > .hero-content,
  .hero > #home-champions-container,
  .hero > .home-links,
  .hero > .hof-rail-block,
  .hero > .home-story{ position:relative; z-index:1; }
  .hero-content{ grid-area:content; }
  #home-champions-container{ grid-area:champions; display:flex; }
  #home-champions-container > .home-champions{ flex:1 1 auto; }
  .home-links{ grid-area:links; }
  .hof-rail-block{ grid-area:rail; }
  .home-story{ grid-area:story; }

  /* Filigrane photo du hero (accueil) */
  .hero-photo{
    position:absolute;
    top:-28px;
    left:-24px;
    width:calc(100% + 48px);
    height:min(86vh, 820px);
    min-height:520px;
    background-image:url("hero-bg.webp");
    background-size:cover;
    background-position:center 45%;
    background-repeat:no-repeat;
    opacity:0.13;
    filter:grayscale(0.5) contrast(1.05);
    pointer-events:none;
    z-index:0;
    user-select:none;
    mask-image:radial-gradient(ellipse 62% 66% at 46% 36%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.7) 42%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0) 88%);
    -webkit-mask-image:radial-gradient(ellipse 62% 66% at 46% 36%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.7) 42%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0) 88%);
  }
  :root[data-theme="light"] .hero-photo{
    opacity:0.20;
    filter:grayscale(0.7) contrast(1.03);
  }


  /* .hero-top : conteneur retire, la mise en page est portee par .hero (grid-areas) */

  .hero-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .hero-tag{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:13.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-secondary);
    background:var(--sunken);
    border:1px solid var(--border-strong);
    border-radius:8px;
    padding:6px 14px;
    margin-bottom:18px;
    width:fit-content;
  }
  .hero-tag-dots{ display:inline-flex; gap:4px; align-items:center; }
  .hero-tag-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
  .hero-tag-dot.orange{ background:var(--accent); }
  .hero-tag-dot.green{ background:var(--secondary); }

  .hero h1{
    color:var(--text-primary);
    text-transform:uppercase;
    letter-spacing:0.005em;
    font-size:41px;
    line-height:1.15;
  }
  .hero p.lead{
    max-width:52ch; margin-top:12px; font-size:16px; line-height:1.6; color:var(--text-secondary);
  }
  .nowrap{ white-space:nowrap; }
  .hero-sub{
    margin-top:8px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--text-secondary);
  }

  /* Recit deplace hors du hero (contenu secondaire) */
  .home-story{
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
  }
  .home-story summary{
    list-style:none; cursor:pointer; min-height:44px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 18px;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16.5px; color:var(--text-primary);
  }
  .home-story summary::-webkit-details-marker{ display:none; }
  .home-story summary:hover .home-story-label{ color:var(--structure-ink); }
  .home-story summary:focus-visible{ outline:2px solid var(--structure); outline-offset:-2px; }
  .home-story .home-story-chevron{ flex-shrink:0; color:var(--text-secondary); transition:transform .2s ease; }
  .home-story[open] .home-story-chevron{ transform:rotate(180deg); }
  .home-story p{
    margin:0; padding:0 18px 18px; max-width:70ch;
    color:var(--text-secondary); font-size:15px; line-height:1.65;
  }

  /* Rail horizontal des intronises (objectif n.1 du site) */
  .hof-rail-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    flex-wrap:wrap; margin-bottom:14px;
  }
  .hof-rail-title{
    margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:23px; letter-spacing:-0.005em;
  }
  .hof-rail-all{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.02em;
    color:var(--structure-ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }
  .hof-rail-all:hover{ opacity:.75; }
  .hof-rail-all:focus-visible{ outline:2px solid var(--structure); outline-offset:2px; border-radius:4px; }
  .hof-rail{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    padding:4px 2px 12px;
    scroll-padding-left:2px;
  }
  .hof-rail.is-auto{ scroll-snap-type:none; }
  .hof-rail::-webkit-scrollbar{ height:6px; }
  .hof-rail::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }
  .hof-rail::-webkit-scrollbar-track{ background:transparent; }
  .rail-card{
    scroll-snap-align:start; flex:0 0 134px; box-sizing:border-box;
    display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
    background:var(--card-grad); border:1px solid var(--border); border-radius:8px;
    padding:18px 10px 15px; text-decoration:none; color:var(--text-primary);
    box-shadow:var(--lift-1), var(--shadow-1);
    position:relative; overflow:hidden;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .rail-card:hover{
    border-color:rgba(var(--structure-rgb),0.55); transform:translateY(-2px);
    background:var(--card-grad-hover); box-shadow:var(--lift-2), var(--shadow-2);
  }
  .rail-card:focus-visible{ outline:2px solid var(--structure); outline-offset:2px; }
  .rail-media{ position:relative; width:64px; height:64px; flex-shrink:0; }
  .rail-mono, .rail-photo{ width:64px; height:64px; border-radius:50%; display:block; }
  .rail-mono{
    display:flex; align-items:center; justify-content:center;
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24.5px; letter-spacing:0.02em;
    border:1px solid var(--border-strong);
  }
  .rail-card.hommes .rail-mono{
    color:var(--accent-ink);
    background:rgba(var(--accent-rgb),0.14);
    background:color-mix(in srgb, var(--accent) 14%, var(--chip-base));
  }
  .rail-card.dames .rail-mono{
    color:var(--secondary-ink);
    background:rgba(var(--secondary-rgb),0.14);
    background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base));
  }
  .rail-photo{ position:absolute; inset:0; object-fit:cover; border:1px solid var(--border-strong); }
  .rail-name{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14.5px; line-height:1.25; }
  .rail-school{ font-size:11px; line-height:1.3; color:var(--text-secondary); letter-spacing:0.03em; }
  .rail-card.rail-all{ border-style:dashed; justify-content:center; }
  .rail-all-arrow{
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--structure-ink); border:1px dashed var(--border-strong);
  }

  /* Encart « Champions en titre » */
  .home-champions{
    background:var(--card-grad);
    border:1px solid var(--border);
    border-radius:8px;
    padding:22px 24px;
    box-shadow:var(--lift-1), var(--shadow-1);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .home-champions:hover{
    border-color:rgba(var(--structure-rgb),0.5);
    background:var(--card-grad-hover);
    box-shadow:var(--lift-2), var(--shadow-2);
  }
  .champions-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
  }
  .champions-label{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:14.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-primary);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .champions-label svg{ color:var(--accent-ink); flex-shrink:0; }
  .champions-year{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:13.5px;
    letter-spacing:0.04em;
    padding:4px 10px;
    border-radius:6px;
    background:var(--sunken);
    border:1px solid var(--border);
    color:var(--text-secondary);
  }
  .champions-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .champion-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:8px;
    text-decoration:none;
    color:inherit;
    transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
  }
  .champion-row:hover{
    border-color:rgba(var(--structure-rgb),0.55);
    background:var(--elev-2);
    transform:translateX(3px);
  }
  .champion-row:focus-visible{
    outline:2px solid var(--structure);
    outline-offset:2px;
  }
  .champion-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .champion-logo-slot{
    width:46px;
    height:46px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    box-sizing:border-box;
  }
  .champion-logo-slot .team-logo{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
  }
  .champion-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .champion-category{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .champion-category.hommes{ color:var(--accent-ink); }
  .champion-category.dames{ color:var(--secondary-ink); }
  .champion-school{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:20.5px;
    letter-spacing:-0.01em;
    color:var(--text-primary);
    line-height:1.15;
  }
  .champion-sub{
    font-size:12.5px;
    color:var(--text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .champion-arrow{
    font-size:16px;
    color:var(--text-secondary);
    transition:transform .15s ease, color .15s ease;
    flex-shrink:0;
  }
  .champion-row:hover .champion-arrow{
    color:var(--structure-ink);
    transform:translateX(3px);
  }
  .champions-footer{
    margin-top:14px;
    text-align:right;
  }
  .champions-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:14.5px;
    letter-spacing:0.02em;
    color:var(--structure-ink);
    text-decoration:none;
    transition:color .15s ease;
  }
  .champions-link:hover{
    opacity:.75;
  }

  /* Cartes de navigation d'accueil */
  .home-links{
    display:grid;
    grid-template-columns: 1fr;
    gap:16px;
    position:relative;
    z-index:1;
  }
  .home-link{
    display:flex; flex-direction:column; gap:8px;
    background:var(--elev-1); border:1px solid var(--border); border-radius:8px;
    padding:22px 24px; text-decoration:none; color:var(--text-primary);
    box-shadow:var(--lift-1), var(--shadow-1);
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .home-link:hover{
    border-color:rgba(var(--structure-rgb),0.55); transform:translateY(-2px);
    background:var(--elev-2); box-shadow:var(--lift-2), var(--shadow-2);
  }
  .home-link:focus-visible{ outline:2px solid var(--structure); outline-offset:2px; }
  .home-link-title{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:21.5px; letter-spacing:-0.005em;
  }
  .home-link-desc{ color:var(--text-secondary); font-size:13.5px; line-height:1.5; }

  /* CARTE VEDETTE : HALL OF FAME */
  .home-link.featured{
    grid-column: 1 / -1;
    gap:10px;
    background: var(--card-grad);
    border: 1px solid rgba(var(--structure-rgb),0.38);
    position: relative;
    overflow: hidden;
    padding: 26px 30px;
    box-shadow: 0 4px 20px rgba(var(--structure-rgb),0.07), var(--lift-1), var(--shadow-1);
  }
  .home-link.featured:hover{
    border-color: var(--structure);
    background: var(--card-grad-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(var(--structure-rgb),0.14), var(--lift-2), var(--shadow-2);
  }
  .featured-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px 16px;
  }
  .featured-count{
    font-family:'Barlow Condensed',sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--text-secondary);
    letter-spacing:0.04em;
  }
  .featured-title{
    font-size:22px;
    letter-spacing:-0.01em;
    color:var(--text-primary);
  }
  .featured-desc{
    font-size:14.5px;
    line-height:1.55;
    max-width:76ch;
    color:var(--text-secondary);
  }
  .featured-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:15.5px;
    color:var(--structure-ink);
    letter-spacing:0.02em;
  }
  .featured-cta .featured-arrow{
    transition:transform .15s ease;
    font-size:15px;
  }
  .home-link.featured:hover .featured-arrow{
    transform:translateX(5px);
  }

  .section-block{ margin-top:56px; }
  .section-block h2{ margin-bottom:18px; }

  /* Palmarès */
  .pill-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; padding:4px; gap:4px; margin-bottom:22px; }
  .pill-toggle button{
    appearance:none; border:none; background:transparent; color:var(--text-secondary);
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.03em; text-transform:uppercase;
    padding:9px 18px; border-radius:7px; cursor:pointer; transition:all .15s ease;
  }
  .pill-toggle button.active{ background:var(--structure-strong); color:var(--on-structure); }

  .palmares-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:24px; }
  .palmares-grid .section-block{ margin-top:0; min-width:0; }
  .season-tables, .rank-tables, .gender-panel{ min-width:0; }

  table.seasons{ width:100%; border-collapse:separate; border-spacing:0; background:var(--elev-1); border-radius:8px; border:1px solid var(--border); box-shadow:var(--lift-1), var(--shadow-1); }
  table.seasons thead th{
    text-align:left; padding:12px 16px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary); background:var(--sunken);
    border-bottom:1px solid var(--border);
  }
  table.seasons tbody :is(td, th){ padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; }
  table.seasons tbody tr:last-child :is(td, th){ border-bottom:none; }
  table.seasons tbody tr:hover{ background:var(--row-hover-strong); }
  table.seasons tbody tr:hover :is(td, th):first-child{ box-shadow:inset 3px 0 0 var(--accent); }
  .gender-panel[data-gender="dames"] table.seasons tbody tr:hover :is(td, th):first-child{ box-shadow:inset 3px 0 0 var(--secondary); }
  /* Cellule d'annee : <th scope="row">, l'annee identifie la ligne. Le style
     annule l'alignement centre par defaut des <th>. */
  .year-cell{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:19.5px; color:var(--text-primary); width:80px; text-align:left; }
  .finalist-cell{ color:var(--text-secondary); }
  /* Colonne 3e place (petite finale, a partir de 2025) */
  .third-cell{ color:var(--text-secondary); }
  .third-cell.is-empty{ opacity:.45; }
  th.third-col .third-short{ display:none; }
  .team-cell{ display:flex; align-items:center; gap:9px; min-width:0; }
  a.team-cell{ text-decoration:none; color:inherit; border-radius:8px; }
  a.team-cell:focus-visible .team-name{ text-decoration:underline; text-underline-offset:3px; }
  a.team-cell:hover .team-name{ color:var(--structure-ink); }
  a.team-cell:hover .winner-badge{ filter:brightness(1.12); }
  a.team-cell:focus-visible{ outline:2px solid var(--structure-ink); outline-offset:3px; }

  .team-logo-slot{
    width:28px; height:28px; flex-shrink:0; display:inline-flex;
    align-items:center; justify-content:center;
    background:none; border:none; border-radius:0; padding:0; box-sizing:border-box;
  }
  .team-logo{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
  /* Palmares : logos d'equipes legerement agrandis */
  #panel-palmares .team-logo-slot{ width:34px; height:34px; }
  .winner-badge{
    display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px;
    padding:6px 12px; border-radius:8px; letter-spacing:0.04em;
  }
  .winner-badge.hommes{ color:var(--accent-ink); border:1px solid rgba(var(--accent-rgb),0.35);
    background:rgba(var(--accent-rgb),0.14); background:color-mix(in srgb, var(--accent) 14%, var(--chip-base)); }
  .winner-badge.dames{ color:var(--secondary-ink); border:1px solid rgba(var(--secondary-rgb),0.35);
    background:rgba(var(--secondary-rgb),0.14); background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base)); }

  /* Coins reellement arrondis : les cellules d'angle portent le rayon */
  table.seasons thead th:first-child{ border-top-left-radius:11px; }
  table.seasons thead th:last-child{ border-top-right-radius:11px; }
  table.seasons tbody tr:last-child :is(td, th):first-child{ border-bottom-left-radius:11px; }
  table.seasons tbody tr:last-child :is(td, th):last-child{ border-bottom-right-radius:11px; }

  .rank-tables, .season-tables{ display:block; }
  table.ranking{ width:100%; border-collapse:separate; border-spacing:0; background:var(--elev-1); border-radius:8px; border:1px solid var(--border); box-shadow:var(--lift-1), var(--shadow-1); }
  table.ranking thead th{
    text-align:left; padding:12px 16px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary); background:var(--sunken);
    border-bottom:1px solid var(--border);
  }
  table.ranking td{ padding:12px 16px; border-bottom:1px solid var(--border); font-size:15px; }
  table.ranking tbody tr:last-child td{ border-bottom:none; }
  table.ranking tbody tr:hover{ background:var(--row-hover-strong); }
  table.ranking tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }
  table.ranking.dames tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--secondary); }
  table.ranking thead th:first-child{ border-top-left-radius:11px; }
  table.ranking thead th:last-child{ border-top-right-radius:11px; }
  table.ranking tbody tr:last-child td:first-child{ border-bottom-left-radius:11px; }
  table.ranking tbody tr:last-child td:last-child{ border-bottom-right-radius:11px; }
  .rank-num{ width:44px; }
  .rank-pill{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%; background:var(--sunken); border:1px solid var(--border);
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px; color:var(--text-secondary);
  }
  table.ranking tbody tr.top .rank-pill{ background:var(--accent-strong); color:var(--on-accent); border-color:var(--accent-strong); }
  table.ranking.dames tbody tr.top .rank-pill{ background:var(--secondary-strong); color:var(--on-secondary); border-color:var(--secondary-strong); }
  table.ranking .titles-count{ min-width:150px; }
  .titles-bar-cell{ display:flex; align-items:center; gap:10px; }
  .titles-num{ font-family:'Barlow Condensed',sans-serif; font-weight:700; min-width:18px; text-align:right; }
  .titles-bar-track{ flex:1; height:6px; border-radius:4px; background:var(--sunken); overflow:hidden; }
  .titles-bar-fill{ height:100%; border-radius:4px; background:var(--accent); }
  .titles-bar-fill.dames{ background:var(--secondary); }

  /* Hall of Fame */
  .hof-controls{
    display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; align-items:center;
    background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px;
  }
  .hof-controls input[type="text"]{
    flex:1 1 220px; background:var(--surface-soft); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; color:var(--text-primary); font-family:'Work Sans',sans-serif; font-size:14px;
  }
  .hof-controls input[type="text"]::placeholder{ color:var(--text-secondary); }
  .hof-controls select{
    background:var(--sunken); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; color:var(--text-primary); font-family:'Work Sans',sans-serif; font-size:14px; cursor:pointer;
  }
  .hof-count{ color:var(--text-secondary); font-size:13px; margin-bottom:16px; }

  /* Filtres replies derriere un bouton resume */
  .hof-filters .hof-controls{
    background:transparent; border:none; border-radius:0;
    border-top:1px solid var(--border);
    margin-bottom:0; padding:16px 18px 18px;
  }
  .hof-filters summary .crit-summary-text{ display:inline-flex; align-items:center; gap:8px; }
  .hof-filters .filters-dot{
    width:7px; height:7px; border-radius:50%; background:var(--structure); flex:none;
  }

  .player-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
  /* Deux colonnes : le portrait a gauche, le nom et les ecoles a sa droite,
     les pastilles en dessous sur toute la largeur. Le balisage vient de app.js
     et n'a pas de classe sur le bloc d'identite : c'est le seul enfant <div>
     sans classe, d'ou le selecteur des placements ci-dessous. */
  .player-card{
    background:var(--card-grad); border:1px solid var(--border); border-radius:8px; padding:20px;
    display:grid; grid-template-columns:auto minmax(0,1fr);
    align-items:center; column-gap:16px; row-gap:14px;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    cursor:pointer; position:relative; overflow:hidden;
    box-shadow:var(--lift-1), var(--shadow-1);
  }
  .player-card > .avatar-placeholder,
  .player-card > .player-photo{ grid-column:1; grid-row:1; }
  .player-card > div:not([class]){ grid-column:2; grid-row:1; min-width:0; }
  .player-card > .badge-row{ grid-column:1 / -1; grid-row:2; margin-top:0; }
  .player-card:hover{ border-color:rgba(var(--structure-rgb),0.55); transform:translateY(-3px); background:var(--card-grad-hover); box-shadow:var(--lift-2), var(--shadow-2); }
  .player-card:focus-within{ border-color:rgba(var(--structure-rgb),0.55); box-shadow:0 0 0 3px rgba(var(--structure-rgb),0.22); }
  .player-card.open{ border-color:rgba(var(--structure-rgb),0.55); }
  .player-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:1; background:transparent; transition:background .18s ease; }
  .player-card.open.hommes::before{ background:var(--accent); }
  .player-card.open.dames::before{ background:var(--secondary); }

  .player-chevron{
    position:absolute; top:16px; right:16px; color:var(--text-secondary);
    transition:transform .25s ease; pointer-events:none; line-height:0;
  }
  .player-card.open .player-chevron{ transform:rotate(180deg); }

  .player-bio{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
  .player-card.open .player-bio{ grid-template-rows:1fr; }
  .player-bio-inner{ overflow:hidden; visibility:hidden; transition:visibility 0s linear .28s; }
  .player-card.open .player-bio-inner{ visibility:visible; transition-delay:0s; }
  .bio-content{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
  .bio-periode{
    display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--accent-ink);
    background:rgba(var(--accent-rgb),0.14);
    background:color-mix(in srgb, var(--accent) 14%, var(--chip-base));
    border:1px solid rgba(var(--accent-rgb),0.30); border-radius:8px; padding:6px 12px; margin-bottom:12px;
  }
  .bio-periode.dames{
    color:var(--secondary-ink); border-color:rgba(var(--secondary-rgb),0.30);
    background:rgba(var(--secondary-rgb),0.14);
    background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base));
  }
  .bio-palmares{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .bio-palmares li{ position:relative; padding-left:24px; line-height:1.3; color:var(--text-primary); }
  .bio-palmares li::before{ content:"★"; position:absolute; left:2px; top:2px; color:var(--accent); font-size:14px; line-height:1.3; }
  .pal-title{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16.5px; }
  .pal-year{ display:block; font-size:12px; color:var(--text-secondary); margin-top:1px; letter-spacing:0.02em; font-variant-numeric:tabular-nums; }
  .bio-texte{ margin-top:14px; font-size:13.5px; line-height:1.55; color:var(--text-secondary); max-width:60ch; text-align:left; }
  .bio-palmares + .bio-texte{ margin-top:12px; }
  .bio-content > .bio-texte:first-child{ margin-top:0; }
  .bio-placeholder{ font-size:13.5px; line-height:1.6; color:var(--text-secondary); font-style:italic; opacity:.8; }
  .avatar-placeholder[hidden], .player-photo[hidden]{ display:none; }

  .avatar-placeholder{
    width:84px; height:84px; border-radius:50%;
    background:var(--surface-soft); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary);
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:28px; letter-spacing:0.02em;
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--border);
  }
  .player-card.hommes .avatar-placeholder{
    background:rgba(var(--accent-rgb),0.14);
    background:color-mix(in srgb, var(--accent) 14%, var(--chip-base));
    border-color:rgba(var(--accent-rgb),0.34); color:var(--accent-ink);
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--accent-rgb),0.30);
  }
  .player-card.dames .avatar-placeholder{
    background:rgba(var(--secondary-rgb),0.14);
    background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base));
    border-color:rgba(var(--secondary-rgb),0.34); color:var(--secondary-ink);
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--secondary-rgb),0.30);
  }
  .player-card.hommes .player-photo{
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--accent-rgb),0.30);
  }
  .player-card.dames .player-photo{
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--secondary-rgb),0.30);
  }
  .player-photo{
    width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:center top;
    border:1px solid var(--border); background:var(--surface-soft); display:block;
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--border);
  }

  .player-name{
    appearance:none; background:none; border:none; padding:0; margin:0;
    text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:23px;
    letter-spacing:-0.005em; color:inherit; text-align:left; cursor:pointer;
    display:block; width:100%; padding-block:1px; min-height:24px;
  }
  .player-name:hover{ opacity:.75; }
  .player-card .player-name{ display:block; line-height:1.15; }
  .player-card .player-schools{ margin-top:7px; }
  .player-schools{ color:var(--text-primary); font-size:14px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
  .school-item{ display:inline-flex; align-items:center; gap:5px; }
  .school-logo-inline{ width:24px; height:24px; object-fit:contain; display:block; flex-shrink:0;
    background:var(--surface-soft); border-radius:50%; padding:3px; box-sizing:border-box; }
  .school-sep{ color:var(--text-secondary); opacity:.55; }
  .badge-row{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
  .badge{
    font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    padding:6px 12px; border-radius:8px; border:1px solid var(--border-strong); color:var(--text-secondary);
  }
  .badge.pos{ color:#6FA6FF; border-color:rgba(var(--structure-rgb),0.35);
    background:rgba(var(--structure-rgb),0.20);
    background:color-mix(in srgb, var(--structure) 20%, var(--chip-base)); }
  .badge.gender-dames{ color:var(--secondary-ink); border-color:rgba(var(--secondary-rgb),0.30);
    background:rgba(var(--secondary-rgb),0.14); background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base)); }
  .badge.gender-hommes{ color:var(--accent-ink); border-color:rgba(var(--accent-rgb),0.30);
    background:rgba(var(--accent-rgb),0.14); background:color-mix(in srgb, var(--accent) 14%, var(--chip-base)); }
  .badge.periode{ color:var(--accent-ink); border-color:rgba(var(--accent-rgb),0.34);
    background:rgba(var(--accent-rgb),0.14); background:color-mix(in srgb, var(--accent) 14%, var(--chip-base)); }
  .badge.periode.dames{ color:var(--secondary-ink); border-color:rgba(var(--secondary-rgb),0.34);
    background:rgba(var(--secondary-rgb),0.14); background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base)); }

  /* ---------- Intronises « Mixte » : les coachs qui ont encadre les deux
     categories. Troisieme couleur de la charte, celle des elements de
     structure, pour ne pas trancher entre l'orange et le vert. ---------- */
  .player-card.mixte .avatar-placeholder{
    background:rgba(var(--structure-rgb),0.14);
    background:color-mix(in srgb, var(--structure) 14%, var(--chip-base));
    border-color:rgba(var(--structure-rgb),0.34); color:var(--structure-ink);
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--structure-rgb),0.30);
  }
  .player-card.mixte .player-photo{
    box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--structure-rgb),0.30);
  }
  .badge.gender-mixte,
  :root[data-theme="light"] .badge.gender-mixte{
    color:var(--structure-ink); border-color:rgba(var(--structure-rgb),0.30);
    background:rgba(var(--structure-rgb),0.14);
    background:color-mix(in srgb, var(--structure) 14%, var(--chip-base));
  }
  .badge.periode.mixte{
    color:var(--structure-ink); border-color:rgba(var(--structure-rgb),0.34);
    background:rgba(var(--structure-rgb),0.14);
    background:color-mix(in srgb, var(--structure) 14%, var(--chip-base));
  }
  .pf-hero.mixte{ background:linear-gradient(118deg,#131C4A 0%,#26307A 52%,#171F55 100%); }
  .pf-hero.mixte::before{ background:var(--structure); }
  .mixte .pf-stat{ background:linear-gradient(118deg,#0B1030 0%,#2A3792 52%,#5D6BFF 100%); }

  .badge-row .badge.periode{ display:none; }
  .player-card.open .badge-row .badge.periode{ display:inline-flex; align-items:center; }
  /* ---------- Équipes intronisées ----------
     La pastille « Équipe » prend la couleur des postes : c'est la meme case de
     la carte, elle repond a la meme question. Seule la photo, carree plutot que
     ronde, signale qu'il s'agit d'un groupe et non d'une personne. */
  .player-card.equipe .avatar-placeholder,
  .player-card.equipe .player-photo{ border-radius:8px; }
  .rail-card.equipe .rail-photo, .rail-card.equipe .rail-mono{ border-radius:8px; }
  .equipe .pf-avatar, .equipe .pf-mono{ border-radius:8px; }

  .pf-roster{
    background:var(--elev-1); border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--lift-1), var(--shadow-1); padding:26px 26px 28px; margin-bottom:22px;
    position:relative; overflow:hidden;
  }
  .pf-roster::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; }
  .hommes .pf-roster::before{ background:var(--accent); }
  .dames  .pf-roster::before{ background:var(--secondary); }
  .pf-roster h2{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24.5px; line-height:1.2;
    text-transform:uppercase; letter-spacing:0.02em; margin-bottom:14px;
  }
  .pf-roster-list{ list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px; }
  .pf-roster-list li{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    background:var(--surface-soft); border:1px solid var(--border); border-radius:6px;
    padding:10px 13px; font-size:14px; color:var(--text-primary);
  }
  .pf-roster-name{ font-weight:600; }
  .pf-roster-link{ font-weight:700; color:var(--text-primary); text-decoration:none; }
  .pf-roster-link:hover{ opacity:.75; }
  .pf-roster-tag{
    font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; padding:3px 8px; border-radius:6px; color:var(--accent-ink);
    border:1px solid rgba(var(--accent-rgb),0.32);
    background:color-mix(in srgb, var(--accent) 12%, var(--chip-base));
  }
  .dames .pf-roster-tag{ color:var(--secondary-ink); border-color:rgba(var(--secondary-rgb),0.32);
    background:color-mix(in srgb, var(--secondary) 12%, var(--chip-base)); }

  .empty-state{ text-align:center; padding:60px 20px; color:var(--text-secondary); }

  .data-error{
    background:var(--surface); border:1px solid rgba(214,69,69,0.55); border-left-width:4px;
    border-radius:8px; padding:20px 22px; margin-top:8px; max-width:640px;
  }

  /* Affiche uniquement par la feuille de style <noscript> ci-dessus. */
  .noscript-note{
    display:none;
    background:var(--surface); border:1px solid var(--border-strong);
    border-left:4px solid var(--accent); border-radius:8px;
    padding:18px 20px; margin-bottom:34px; max-width:70ch;
    color:var(--text-secondary); font-size:14.5px;
  }
  .noscript-note strong{
    display:block; color:var(--text-primary); font-family:'Barlow Condensed',sans-serif;
    font-size:19.5px; margin-bottom:6px;
  }
  .data-error strong{ display:block; font-family:'Barlow Condensed',sans-serif; font-size:20.5px; margin-bottom:8px; }
  .data-error p{ color:var(--text-secondary); font-size:14px; margin-top:6px; }
  .data-error code{ font-family:ui-monospace,monospace; font-size:13px; background:var(--surface-soft); padding:1px 5px; border-radius:4px; }

  .hof-reset{
    appearance:none; border:1px solid var(--border-strong); background:var(--surface-soft); color:var(--text-secondary);
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.03em; text-transform:uppercase;
    padding:10px 16px; border-radius:8px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
  }
  .hof-reset:hover{ color:var(--text-primary); border-color:rgba(var(--structure-rgb),0.45); background:rgba(var(--structure-rgb),0.08); }
  .hof-reset:disabled{ opacity:0.45; cursor:default; }

  :root[data-theme="light"] .badge.pos{
    background:rgba(var(--structure-rgb),0.19);
    background:color-mix(in srgb, var(--structure) 19%, var(--chip-base));
    border-color:rgba(var(--structure-rgb),0.40); color:var(--structure-ink);
  }
  :root[data-theme="light"] .badge.gender-hommes,
  :root[data-theme="light"] .bio-periode{
    background:rgba(var(--accent-rgb),0.14);
    background:color-mix(in srgb, var(--accent) 14%, var(--chip-base));
    border-color:rgba(var(--accent-rgb),0.34); color:var(--accent-ink);
  }
  :root[data-theme="light"] .badge.gender-dames,
  :root[data-theme="light"] .bio-periode.dames{
    background:rgba(var(--secondary-rgb),0.14);
    background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base));
    border-color:rgba(var(--secondary-rgb),0.34); color:var(--secondary-ink);
  }

  /* ÉCOLES */
  .panel-intro, .schools-intro{ color:var(--text-secondary); font-size:15px; max-width:70ch; margin-bottom:26px; }
  .schools-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; }
  .school-card{
    appearance:none; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none;
    background:var(--card-grad); border:1px solid var(--border); border-radius:8px;
    padding:14px; color:var(--text-primary);
    display:flex; flex-direction:column; gap:10px;
    box-shadow:var(--lift-1), var(--shadow-1);
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .school-card:hover{
    border-color:rgba(var(--structure-rgb),0.55); transform:translateY(-2px);
    background:var(--card-grad-hover); box-shadow:var(--lift-2), var(--shadow-2);
  }
  .sc-head{ display:flex; align-items:center; gap:11px; }
  .sc-name{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.01em; }
  .sc-titles{ display:flex; align-items:baseline; gap:8px; }
  .sc-titles-num{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:32px; line-height:1; }
  .sc-titles-lbl{ font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); }
  .sc-split{ display:flex; gap:8px; flex-wrap:wrap; }
  .sc-chip{
    font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; padding:4px 10px; border-radius:8px; border:1px solid var(--border-strong);
    color:var(--text-secondary);
  }
  .sc-chip.hommes{ border-color:rgba(var(--accent-rgb),0.35); color:var(--accent-ink);
    background:rgba(var(--accent-rgb),0.14); background:color-mix(in srgb, var(--accent) 14%, var(--chip-base)); }
  .sc-chip.dames{ border-color:rgba(var(--secondary-rgb),0.35); color:var(--secondary-ink);
    background:rgba(var(--secondary-rgb),0.14); background:color-mix(in srgb, var(--secondary) 14%, var(--chip-base)); }
  .sc-lines{ display:flex; flex-direction:column; gap:3px; margin-top:auto; padding-top:4px; }
  .sc-line{ font-size:13px; color:var(--text-secondary); }
  .sc-line b{ color:var(--text-primary); font-weight:600; }

  .school-logo, .school-logo-ph{ flex-shrink:0; }
  .school-logo[hidden], .school-logo-ph[hidden]{ display:none; }
  .school-logo{
    height:68px; width:68px; aspect-ratio:1; object-fit:contain; display:block;
    background:var(--sunken); border:1px solid var(--border);
    border-radius:8px; padding:7px; box-sizing:border-box;
  }
  .school-logo-ph{
    height:68px; min-width:68px; width:auto; padding:0 10px; border-radius:8px;
    border:1px dashed var(--border); background:var(--sunken);
    display:flex; align-items:center; justify-content:center; white-space:nowrap;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;
    color:var(--text-secondary); letter-spacing:0.02em;
  }
  .sd-logo{
    height:78px; aspect-ratio:1; object-fit:contain; display:block; flex-shrink:0;
    position:relative; z-index:1;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));
  }
  .sd-logo-ph{
    height:72px; min-width:72px; width:auto; padding:0 12px; border-radius:8px; flex-shrink:0;
    position:relative; z-index:1;
    border:1px dashed rgba(255,255,255,0.35); background:rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:center; white-space:nowrap;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; color:rgba(255,255,255,0.85);
  }
  .sd-logo[hidden], .sd-logo-ph[hidden]{ display:none; }

  /* Fiche École (Dialog) */
  dialog.school-dialog{
    margin:auto;
    width:min(720px, calc(100vw - 28px));
    max-height:min(88vh, 940px);
    padding:0; border:1px solid var(--border); border-radius:8px;
    background:var(--elev-3); color:var(--text-primary);
    box-shadow:var(--lift-3), var(--shadow-3);
    overflow:hidden; display:flex; flex-direction:column;
  }
  dialog.school-dialog:not([open]){ display:none; }
  dialog.school-dialog::backdrop{ background:rgba(8,12,18,0.66); backdrop-filter:blur(2px); }

  .sd-head{
    display:flex; align-items:flex-start; gap:16px;
    padding:22px 24px 18px; background:var(--elev-3); flex-shrink:0;
  }
  .sd-head-text{ min-width:0; }
  .sd-title{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:32.5px; letter-spacing:-0.01em; }
  .sd-sub{ margin-top:5px; color:var(--text-secondary); font-size:14px; }

  #sd-head{
    align-items:center; gap:18px; padding:20px 22px;
    position:relative; isolation:isolate; overflow:hidden;
    background:var(--head-base, #0B1018); color:#FFFFFF;
  }
  #sd-head::before{
    content:""; position:absolute; inset:-30%; z-index:-2;
    background-image:var(--logo, none); background-size:cover; background-position:center;
    filter:blur(46px) saturate(1.7); transform:scale(1.15);
  }
  #sd-head::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, rgba(11,16,24,0.90), rgba(11,16,24,0.64));
  }
  #sd-head[style*="--head-base"]::before{ mix-blend-mode:screen; opacity:0.55; }
  #sd-head[style*="--head-base"]::after{
    background:linear-gradient(100deg, rgba(11,16,24,0.70), rgba(11,16,24,0.18));
  }
  .sd-watermark{
    position:absolute; z-index:0; right:-52px; top:50%; transform:translateY(-50%);
    width:216px; height:216px;
    background-image:var(--logo, none);
    background-size:contain; background-repeat:no-repeat; background-position:center;
    opacity:0.12; user-select:none; pointer-events:none;
  }
  #sd-head .sd-head-text{ position:relative; z-index:1; }
  #sd-head .sd-title{ font-size:34px; line-height:1; letter-spacing:-0.025em; text-transform:uppercase; }
  #sd-head .sd-sub{ margin-top:7px; color:rgba(255,255,255,0.78); font-size:13.5px; }
  .sd-close{
    appearance:none; margin-left:auto; flex-shrink:0;
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    border:1px solid transparent; background:transparent; color:var(--text-secondary);
    display:inline-flex; align-items:center; justify-content:center;
    transition:color .15s ease, background-color .15s ease;
  }
  .sd-close:hover{ color:var(--text-primary); background:var(--surface-soft); }
  #sd-head .sd-close{ color:rgba(255,255,255,0.8); position:relative; z-index:2; }
  #sd-head .sd-close:hover{ color:#fff; background:rgba(255,255,255,0.16); }
  .sd-body{ border-top:1px solid var(--border); padding:22px 24px 26px; overflow-y:auto; flex:1 1 auto; min-height:0; }

  .sd-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .sd-stats{ grid-template-columns:1fr; } }
  .sd-stat{
    background:var(--surface-soft); border:1px solid var(--border); border-radius:8px;
    padding:18px 20px; position:relative; overflow:hidden;
  }
  .sd-stat::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; }
  .sd-stat.hommes::before{ background:var(--accent); }
  .sd-stat.dames::before{ background:var(--secondary); }
  .sd-stat-cap{ font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--text-secondary); }
  .sd-stat-big{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:41px; line-height:1.1; margin-top:9px; }
  .sd-stat.hommes .sd-stat-big{ color:var(--accent-ink); }
  .sd-stat.dames .sd-stat-big{ color:var(--secondary-ink); }
  .sd-stat-lines{ margin-top:12px; display:flex; flex-direction:column; gap:4px; }
  .sd-stat-line{ font-size:13.5px; color:var(--text-secondary); }
  .sd-stat-line b{ color:var(--text-primary); font-weight:600; }

  .sd-section{ margin-top:26px; }
  .sd-section h3{ font-size:15.5px; font-weight:600; margin-bottom:11px; }
  .sd-sub-h4{ font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--text-secondary); margin:14px 0 8px; }
  .sd-years{ display:flex; flex-wrap:wrap; gap:8px; }
  .sd-year{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:0.04em;
    padding:6px 12px; border-radius:8px; border:1px solid var(--border-strong);
    color:var(--text-secondary); background:transparent;
  }
  .sd-year.win-h{ background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.35); color:var(--accent-ink); }
  .sd-year.win-d{ background:rgba(var(--secondary-rgb),0.08); border-color:rgba(var(--secondary-rgb),0.35); color:var(--secondary-ink); }
  .sd-empty{ color:var(--text-secondary); font-size:13.5px; font-style:italic; }

  .sd-roster{ display:flex; flex-wrap:wrap; gap:8px; }
  .sd-player{
    appearance:none; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700;
    letter-spacing:0.04em; text-transform:uppercase;
    padding:8px 13px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--surface-soft); color:var(--text-primary);
    transition:border-color .15s ease, color .15s ease;
  }
  .sd-player:hover{ border-color:rgba(var(--structure-rgb),0.6); color:var(--structure-ink); }
  .sd-note{ margin-top:24px; font-size:12.5px; line-height:1.5; color:var(--text-secondary); }

  /* Critères d'admission (HoF) */
  .hof-criteria{
    background:var(--elev-1); border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--lift-1), var(--shadow-1);
    margin-bottom:22px; overflow:hidden;
  }
  .hof-criteria summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:15px 18px;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--structure-ink);
  }
  .hof-criteria summary::-webkit-details-marker{ display:none; }
  .hof-criteria summary:hover .crit-summary-text{ color:var(--structure-ink); }
  .hof-criteria summary:focus-visible{ outline:2px solid var(--structure); outline-offset:-2px; }
  .crit-chevron{ color:var(--structure-ink); opacity:.75; transition:transform .25s ease; flex:none; }
  .hof-criteria[open] .crit-chevron{ transform:rotate(180deg); }
  .crit-body{ padding:0 18px 20px; border-top:1px solid var(--border); }
  .crit-lead{ margin:16px 0 14px; font-size:14.5px; line-height:1.6; color:var(--text-secondary); max-width:72ch; }
  .crit-lead strong{ color:var(--text-primary); font-weight:600; }
  .crit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .crit-list li{ position:relative; padding-left:22px; font-size:14.5px; line-height:1.45; color:var(--text-secondary); }
  .crit-list li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:2px; border-radius:2px; background:var(--structure); }
  .crit-list strong{ color:var(--text-primary); font-weight:600; }
  .crit-sub{
    font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; line-height:1.3;
    color:var(--text-primary); margin:24px 0 8px;
  }
  .crit-body > .crit-sub:first-child{ margin-top:18px; }

  /* Fiche Joueur (#hof-fiche) */
  .pf-back{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
    background:var(--sunken); border:1px solid var(--border); border-radius:6px;
    padding:14px 22px; min-height:48px; color:var(--text-primary); font-size:18.5px;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.01em;
    cursor:pointer; appearance:none;
    transition:border-color .18s ease, background-color .18s ease;
  }
  .pf-back .pf-back-arrow{ font-size:18px; line-height:1; }
  .pf-back:hover{ border-color:rgba(var(--structure-rgb),0.55); background:var(--elev-2); }
  .pf-back:focus-visible{ outline:2px solid var(--structure); outline-offset:2px; }
  .pf-crumbs{ font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
  .pf-crumbs a{ color:var(--text-secondary); text-decoration:none; }
  .pf-crumbs a:hover{ color:var(--text-primary); }
  .pf-crumbs .sep{ opacity:.45; margin:0 8px; }
  .pf-crumbs .here{ color:var(--text-primary); }

  .pf-hero{
    position:relative; overflow:hidden; isolation:isolate;
    border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--lift-2), var(--shadow-2);
    padding:38px 30px 30px; margin-bottom:22px; color:#fff;
  }
  .pf-hero.hommes{ background:linear-gradient(118deg,#6E3400 0%,#A85200 52%,#7A3B00 100%); }
  .pf-hero.dames { background:linear-gradient(118deg,#014C24 0%,#026F33 52%,#015229 100%); }
  .pf-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:3; }
  .pf-hero.hommes::before{ background:var(--accent); }
  .pf-hero.dames::before{ background:var(--secondary); }
  .pf-hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(70% 90% at 12% 0%, rgba(255,255,255,0.16), transparent 62%);
  }
  .pf-hero-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .pf-avatar, .pf-mono{
    width:104px; height:104px; border-radius:50%; flex:none;
    border:2px solid rgba(255,255,255,0.9); box-shadow:0 6px 22px rgba(0,0,0,0.32);
  }
  .pf-avatar{ object-fit:cover; object-position:center top; background:rgba(0,0,0,0.25); display:block; }
  .pf-mono{
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.28); color:#fff;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:36px; letter-spacing:0.02em;
  }
  .pf-avatar[hidden], .pf-mono[hidden]{ display:none; }
  .pf-name{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(33.5px,5vw,51.5px);
    line-height:1.08; letter-spacing:-0.01em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.28);
  }
  /* Le focus est deplace ici pour l'annonce vocale a l'ouverture d'une fiche ;
     l'indicateur visuel n'a pas de sens sur un titre non interactif. */
  .pf-name:focus-visible{ outline:none; }
  .pf-hero .player-schools{ color:#fff; margin-top:12px; }
  .pf-hero .school-sep{ color:#fff; opacity:.5; }
  .pf-hero .school-logo-inline{ background:rgba(255,255,255,0.92); }

  .pf-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }
  .pf-fact{
    background:var(--elev-1); border:1px solid var(--border); border-radius:8px; padding:15px 17px;
    box-shadow:var(--lift-1), var(--shadow-1);
  }
  .pf-fact-label{
    display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12.5px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:7px;
  }
  .pf-fact-value{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:23px;
    letter-spacing:-0.005em; color:var(--text-primary);
  }

  .pf-bio{
    position:relative; overflow:hidden;
    background:var(--elev-1); border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--lift-1), var(--shadow-1); padding:26px 26px 28px; margin-bottom:22px;
  }
  .pf-bio::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; }
  .hommes .pf-bio::before{ background:var(--accent); }
  .dames  .pf-bio::before{ background:var(--secondary); }
  .pf-bio h2{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24.5px; line-height:1.2;
    text-transform:uppercase; letter-spacing:0.02em; margin-bottom:14px;
  }
  .pf-bio p{ max-width:68ch; font-size:15px; line-height:1.62; color:var(--text-secondary); }
  .pf-bio p + p{ margin-top:11px; }
  .pf-bio.is-empty{ border-style:dashed; }
  .pf-bio.is-empty::before{ opacity:.4; }
  .pf-bio-empty{ font-style:italic; max-width:60ch; }

  /* ---------- « En chiffres » : tuiles pleines ----------
     Le chiffre porte la tuile, pas l'inverse. Format paysage, plus large que
     haut : la ligne de tuiles se lit d'un coup d'oeil au lieu de creuser la
     page. Elles posent directement sur le fond — pas de panneau autour, qui
     diluerait le contraste qui fait tout leur effet. */
  .pf-numbers{ background:transparent; border:0; border-radius:0; padding:8px 0 0; }
  .pf-numbers h2{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:31.5px; line-height:1.2;
    text-transform:uppercase; letter-spacing:0.02em; margin-bottom:22px;
  }
  .pf-stat-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:16px; align-items:stretch;
  }
  .pf-stat{
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; justify-content:flex-start;
    min-height:118px; border:0; border-radius:6px; padding:20px 22px 18px;
    /* Exactement la matiere du bandeau de nom en haut de fiche : meme degrade,
       meme lueur. Les deux blocs colores de la fiche se repondent, et le blanc
       du chiffre porte sans eblouir. */
    background:linear-gradient(118deg,#321500 0%,#944800 52%,#FF7800 100%);
    box-shadow:0 10px 26px rgba(0,0,0,0.34);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .dames .pf-stat{ background:linear-gradient(118deg,#00190C 0%,#007736 52%,#00ff7e 100%); }
  /* Lueur haute a gauche, reprise du bandeau : elle donne du volume au degrade. */
  .pf-stat::before{
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background:radial-gradient(70% 90% at 12% 0%, rgba(255,255,255,0.16), transparent 62%);
  }
  /* Grain discret : la couleur parait imprimee plutot que plate. */
  .pf-stat::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    opacity:.22; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:140px 140px;
  }
  .pf-stat:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,0.42); }
  .pf-stat b{
    display:block; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-style:italic;
    font-size:clamp(38px,3.4vw,42.5px); line-height:1; letter-spacing:-0.015em;
    text-transform:uppercase; font-variant-numeric:tabular-nums; color:#FFFFFF;
  }
  .pf-stat span{
    display:block; margin-top:10px;
    font-size:17px; line-height:1.35; font-weight:600; letter-spacing:0;
    text-transform:none; color:#FFFFFF;
  }
  /* En thème clair, l'ombre portée du thème sombre écraserait la tuile. */
  :root[data-theme="light"] .pf-stat{ box-shadow:0 8px 20px rgba(36,30,22,0.20); }
  :root[data-theme="light"] .pf-stat:hover{ box-shadow:0 12px 26px rgba(36,30,22,0.26); }
  @media (prefers-reduced-motion: reduce){
    .pf-stat{ transition:none; } .pf-stat:hover{ transform:none; }
  }

  /* Responsive */
  @media (max-width:960px){
    .app{ padding-left:18px; padding-right:18px; }
    .hero-photo{ left:-18px; width:calc(100% + 36px); height:min(78vh, 640px); min-height:440px; opacity:0.115; }
    .palmares-grid{ grid-template-columns:1fr; }

    /* Ordre mobile : le Hall of Fame passe devant l'encart Champions */
    .hero{
      display:flex; flex-direction:column; gap:24px;
      grid-template-columns:none; grid-template-areas:none;
    }
    .hero-content{ order:1; }
    .home-links{ order:2; }
    .hof-rail-block{ order:3; }
    #home-champions-container{ order:4; }
    .home-story{ order:5; }
  }

  @media (max-width:760px){
    h1{ font-size:36.5px; }
    .hero h1{ font-size:31.5px; }
    .hero p.lead{ font-size:15.5px; line-height:1.55; margin-top:12px; }
    h2{ font-size:26px; }
    h1.panel-title{ font-size:26px; }
    .topbar-inner{ height:64px; padding:0 16px; position:relative; gap:0; }
    .brand{ min-width:0; flex-shrink:1; overflow:hidden; }
    .brand img{ max-width:52px; object-fit:contain; flex-shrink:0; }
    .current-section{ display:block; order:1; }
    .hamburger-btn{ display:none !important; }
    .theme-toggle{ order:3; margin-left:8px; }
    .theme-toggle.search-btn{ order:2; margin-left:auto; }

    /* Le backdrop-filter du header creerait un bloc conteneur pour la barre
       fixe : on le retire sur mobile et on passe a un fond quasi opaque. */
    header.topbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--nav-mobile-bg); }

    /* Navigation principale : barre flottante arrondie, toujours visible */
    nav.tabs{
      display:flex !important; position:fixed; top:auto; z-index:60;
      bottom:calc(12px + env(safe-area-inset-bottom, 0px));
      left:12px; right:12px;
      flex-direction:row; height:auto; width:auto; margin:0; gap:4px;
      overflow-x:visible;
      padding:7px;
      background:var(--nav-float-bg);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      border:1px solid var(--nav-float-border); border-radius:8px;
      box-shadow:var(--nav-float-shadow);
    }
    nav.tabs .tab-icon{ display:block; }
    nav.tabs button{
      flex:1 1 0; min-width:0; min-height:54px; height:auto; padding:8px 2px 7px;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      text-align:center; white-space:nowrap; overflow:hidden;
      font-size:11px; font-weight:600; line-height:1.1; letter-spacing:0; text-transform:none;
      border-top:none; border-bottom:none; border-radius:8px;
      transition:color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }
    nav.tabs .tab-label{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
    nav.tabs button.active{
      color:var(--structure-ink);
      background:rgba(var(--structure-rgb),0.08);
      background:color-mix(in srgb, var(--structure) 8%, transparent);
      box-shadow:inset 0 0 0 1px rgba(var(--structure-rgb),0.55);
    }
    /* L'espace sous le contenu evite que la barre flottante masque la fin de page */
    .app{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }

    /* 6 : decor du hero retire sur mobile (compositing inutile) */
    /* Filigrane conserve sur mobile, recadre et adouci */
    .hero-photo{
      top:-46px; /* remonte sous la barre : main padding-top 36px + hero padding 10px */
      height:min(72vh, 560px);
      min-height:360px;
      background-position:center 48%;
      opacity:0.24;
      mask-image:radial-gradient(ellipse 82% 78% at 46% 30%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0) 88%);
      -webkit-mask-image:radial-gradient(ellipse 82% 78% at 46% 30%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0) 88%);
    }
    :root[data-theme="light"] .hero-photo{ opacity:0.30; }
    .hero{ overflow:visible; gap:20px; }

    /* 10 : densite verticale */
    .home-links{ gap:12px; }
    .home-link{ padding:18px 20px; }
    .home-link.featured{ padding:20px 20px; }
    .featured-desc{ font-size:14px; }

    /* 9 : cibles tactiles >= 44 px sur l'accueil */
    .home-link{ min-height:44px; }
    .champion-row{ min-height:56px; }
    .champions-link,
    .featured-cta,
    .hof-rail-all{ min-height:44px; display:inline-flex; align-items:center; }

    /* Rail pleine largeur (bord a bord) */
    .hof-rail{
      margin-left:-18px; margin-right:-18px;
      padding-left:18px; padding-right:18px; scroll-padding-left:18px;
    }
    table.seasons td, table.seasons th{ padding:10px 5px; font-size:12px; }
    /* l'en-tete a sa propre regle plus specifique : on la reprend ici */
    table.seasons thead th{ padding:10px 5px; font-size:10.5px; letter-spacing:0.03em; }
    table.seasons :is(td, th):first-child{ padding-left:10px; }
    table.seasons :is(td, th):last-child{ padding-right:10px; }
    th.third-col .third-long{ display:none; }
    th.third-col .third-short{ display:inline; }
    .year-cell{ width:auto; font-size:13.5px; }
    table.seasons .team-cell{ gap:5px; }
    table.seasons .winner-badge{ padding:5px 7px; font-size:11.5px; }
    .team-logo-slot{ width:20px; height:20px; }
    #panel-palmares .team-logo-slot{ width:25px; height:25px; }

    .hof-controls input[type="text"],
    .hof-controls select{ min-height:44px; padding-block:12px; }
    .hof-reset{ min-height:44px; padding:12px 18px; }
    .player-name{ min-height:44px; display:flex; align-items:center; }

    /* Le nom se cale par rapport au portrait et non au bloc entier : sa boite
       occupe une hauteur fixe et y centre son texte, les ecoles passant
       dessous. Cette hauteur vaut « hauteur du portrait moins deux fois le
       decalage voulu » : la ligne du nom se pose donc 10 px au-dessus du milieu
       du portrait — assez bas pour ne pas coller au sommet de la photo, assez
       haut pour rester dans sa moitie superieure. */
    .player-card{ align-items:start; }
    .player-card > .avatar-placeholder,
    .player-card > .player-photo{ align-self:start; }
    .player-card > div:not([class]){ align-self:start; padding-top:0; }
    /* portrait de 84 px : 84 - 2 × 10 */
    .player-card .player-name{ display:flex; align-items:center; min-height:64px; }
    .player-card .player-schools{ margin-top:0; }
  }

  @media (max-width:640px){
    .home-links{ grid-template-columns: 1fr; }
    .pf-facts{ grid-template-columns:1fr; }
    .pf-stat-grid{ grid-template-columns:1fr; }
    .pf-hero{ padding:30px 20px 24px; }
    .pf-avatar, .pf-mono{ width:84px; height:84px; }
    .pf-mono{ font-size:25px; }
    .pf-numbers{ padding:6px 0 0; }
    .pf-stat{ min-height:112px; padding:18px 18px 16px; }
    .pf-bio{ padding:22px 20px 24px; }
    .pf-back{ display:flex; width:100%; justify-content:center; }
  }

  @media (max-width:480px){
    .brand-text{ display:none; }
    .brand{ min-width:44px; justify-content:center; }
    .current-section{ padding-left:0; margin-left:14px; border-left:none; }
  }

  @media (max-width:420px){
    .featured-count{ display:none; }
    .hero h1{ font-size:28px; }
    /* 11px minimum : le libelle passe sur deux lignes plutot que d'etre reduit. */
    nav.tabs button{ font-size:11px; min-height:60px; padding:7px 2px 6px; }
    nav.tabs .tab-label{ white-space:normal; text-overflow:clip; line-height:1.05; }
    nav.tabs .tab-icon{ width:20px; height:20px; }
    .app{ padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }

    .player-card{ column-gap:13px; padding:17px; }
    .player-card .avatar-placeholder,
    .player-card .player-photo{ width:72px; height:72px; }
    .player-card .avatar-placeholder{ font-size:20px; }
    /* portrait de 72 px : 72 - 2 × 10 */
    .player-card .player-name{ min-height:52px; }
  }

  @media (max-width:380px){
  }

  /* ===================== RECHERCHE GLOBALE ===================== */
  .omni{
    width:min(640px, calc(100vw - 28px));
    max-height:min(560px, calc(100vh - 96px));
    margin:0 auto; margin-top:clamp(48px, 12vh, 132px);
    padding:0; border:1px solid var(--border-strong); border-radius:8px;
    background:var(--elev-2); color:var(--text-primary);
    box-shadow:var(--lift-2), var(--shadow-3);
    overflow:hidden;
  }
  .omni::backdrop{ background:rgba(6,3,20,0.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .omni:not([open]){ display:none; }

  .omni-head{
    display:flex; align-items:center; gap:11px;
    padding:14px 14px 14px 17px; border-bottom:1px solid var(--border);
  }
  .omni-head-ic{ width:19px; height:19px; flex:none; color:var(--text-secondary); }
  .omni-input{
    flex:1 1 auto; min-width:0; appearance:none; border:none; background:transparent;
    color:var(--text-primary); font-family:'Work Sans', system-ui, sans-serif;
    font-size:16px; line-height:1.4; padding:2px 0;
  }
  .omni-input::placeholder{ color:var(--text-secondary); opacity:.85; }
  .omni-input:focus{ outline:none; }
  .omni-close{
    appearance:none; border:1px solid var(--border-strong); background:var(--sunken);
    color:var(--text-secondary); border-radius:6px; cursor:pointer;
    width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center;
    transition:color .15s ease, border-color .15s ease;
  }
  .omni-close svg{ width:17px; height:17px; }
  .omni-close:hover{ color:var(--text-primary); border-color:rgba(var(--structure-rgb),0.5); }

  .omni-status{
    font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary);
    padding:12px 17px 0;
  }
  .omni-status:empty{ display:none; }

  .omni-scroll{ overflow-y:auto; overscroll-behavior:contain; padding:8px; max-height:400px; }
  .omni-results{ display:flex; flex-direction:column; gap:2px; }

  .omni-group{
    font-family:'Barlow Condensed',sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:0.11em; text-transform:uppercase; color:var(--text-secondary);
    padding:12px 10px 5px;
  }
  .omni-results > .omni-group:first-child{ padding-top:4px; }

  .omni-item{
    display:flex; align-items:center; gap:12px;
    padding:9px 11px; border-radius:6px; text-decoration:none;
    color:var(--text-primary); border:1px solid transparent;
    transition:background-color .12s ease, border-color .12s ease;
  }
  .omni-item:hover{ background:var(--row-hover-strong); }
  .omni-item.is-active{
    background:rgba(var(--structure-rgb),0.14);
    background:color-mix(in srgb, var(--structure) 14%, transparent);
    border-color:rgba(var(--structure-rgb),0.45);
  }
  .omni-ic{
    width:32px; height:32px; flex:none; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-strong); background:var(--chip-base);
  }
  .omni-ic svg{ width:16px; height:16px; }
  .omni-item[data-kind="joueur"] .omni-ic{ color:var(--structure-ink); border-color:rgba(var(--structure-rgb),0.35); }
  .omni-item[data-kind="ecole"]  .omni-ic{ color:var(--accent-ink);    border-color:rgba(var(--accent-rgb),0.35); }
  .omni-item[data-kind="saison"] .omni-ic{ color:var(--secondary-ink); border-color:rgba(var(--secondary-rgb),0.35); }
  .omni-item[data-kind="equipe"] .omni-ic{ color:var(--accent-ink);    border-color:rgba(var(--accent-rgb),0.35); }

  .omni-txt{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:1px; }
  .omni-label{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17.5px;
    letter-spacing:0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .omni-sub{
    font-size:12.5px; color:var(--text-secondary);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .omni-item mark{ background:transparent; color:var(--structure-ink); font-weight:800; }

  .omni-empty{ padding:26px 12px 30px; text-align:center; color:var(--text-secondary); font-size:14px; }
  .omni-empty b{ color:var(--text-primary); font-weight:600; }

  .omni-hint{
    display:flex; gap:16px; flex-wrap:wrap;
    padding:10px 17px; border-top:1px solid var(--border);
    font-size:11.5px; color:var(--text-secondary);
  }
  .omni-hint kbd{
    font-family:'Work Sans', system-ui, sans-serif; font-size:10.5px; line-height:1;
    border:1px solid var(--border-strong); background:var(--sunken);
    border-radius:5px; padding:3px 5px; margin-right:3px; color:var(--text-primary);
  }

  /* La ligne du palmares visee depuis la recherche : un halo bref, puis rien. */
  @keyframes omni-flash{
    from{ background:rgba(var(--structure-rgb),0.30); }
    to  { background:transparent; }
  }
  tr.omni-target > :is(td, th){ animation:omni-flash 1.8s ease-out 1; }

  @media (max-width:560px){
    .omni{ margin-top:12px; width:calc(100vw - 20px); max-height:calc(100dvh - 24px); }
    .omni-scroll{ max-height:none; }
    .omni-hint{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
    .panel{ animation:none !important; }
    .school-card:hover, .player-card:hover, .home-link:hover, .champion-row:hover{ transform:none !important; }
  }

/* ---------- Voile de chargement ---------- */
#app-loader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#10092C;transition:opacity .45s ease,visibility .45s ease}
#app-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#app-loader .app-loader__logo{width:88px;height:88px;object-fit:contain;animation:appLoaderPulse 1.6s ease-in-out infinite}
#app-loader .app-loader__spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(240,125,0,.22);border-top-color:#F07D00;animation:appLoaderSpin .8s linear infinite}
@keyframes appLoaderSpin{to{transform:rotate(360deg)}}
@keyframes appLoaderPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){#app-loader .app-loader__logo,#app-loader .app-loader__spinner{animation:none}}

  /* --- Nettoyage : aucun soulignement au survol, aucune fleche decorative --- */
  a:hover, a:hover *, summary:hover, summary:hover *{ text-decoration:none; }
  .champion-arrow, .featured-arrow, .rail-all-arrow{ display:none !important; }

  /* --- Portraits charges a la demande : invisibles tant qu'ils n'ont pas
         abouti (le monogramme reste dessous), sans display:none qui
         empecherait le navigateur de les charger paresseusement. --- */
  .img-differee{ opacity:0; transition:opacity .18s ease; }
  .img-differee.est-chargee{ opacity:1; }
  @media (prefers-reduced-motion:reduce){ .img-differee{ transition:none; } }

  /* ---------------------------------------------------------------
     Photo de fond sur tout le site
     Une seule couche fixe, derriere le contenu, visible sur toutes
     les sections. Le degrade reste porte par body::before ; cette
     couche-ci se pose par-dessus, en tres faible opacite.
     --------------------------------------------------------------- */
  body{ background: transparent; }   /* le fond de base est porte par html */

  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:url("hero-bg.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:var(--fond-opacite, 0.06);
    filter:grayscale(1) contrast(1.05);
    pointer-events:none;
    user-select:none;
    transform:translateZ(0);
  }
  :root[data-theme="light"] body::after{
    filter:grayscale(1) contrast(1.02);
  }

  /* L'ancienne photo cantonnee a l'accueil ferait doublon. */
  .hero-photo{ display:none; }

  /* ---------------------------------------------------------------
     Cartes Ecoles : lisibilite et hierarchie
     1. En mode jour, le fond des cartes etait partiellement
        transparent : la photo de fond transparaissait au travers.
        Les deux degrades passent en couleurs pleines.
     2. Le nombre d'intronises devient la seconde donnee forte de la
        carte, apres le nombre de titres.
     3. Sur mobile, la carte est resserree.
     --------------------------------------------------------------- */
  :root[data-theme="light"]{
    --card-grad:       linear-gradient(135deg, #FDFBFF 0%, #F3EEFA 100%);
    --card-grad-hover: linear-gradient(135deg, #FDFBFF 0%, #EBE5F6 100%);
  }

  .sc-lines{
    display:flex; flex-direction:column; gap:3px;
    margin-top:auto; padding-top:10px;
    border-top:1px solid var(--border);
  }
  .sc-line{
    display:flex; align-items:baseline; gap:7px;
    font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.07em; text-transform:uppercase; color:var(--text-secondary);
  }
  .sc-line b{
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px;
    line-height:1; color:var(--structure-ink); letter-spacing:normal;
  }

  @media (max-width:640px){
    .schools-grid{ grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:12px; }
    .school-card{ padding:12px; gap:9px; border-radius:8px; }
    .sc-head{ gap:9px; }
    .school-logo, .school-logo-ph{ height:52px; width:52px; min-width:52px; padding:5px; }
    .sc-name{ font-size:18px; }
    .sc-titles-num{ font-size:27px; }
    .sc-titles-lbl{ font-size:11px; }
    .sc-chip{ font-size:11px; padding:3px 8px; }
    .sc-lines{ padding-top:8px; }
    .sc-line{ font-size:11.5px; gap:6px; }
    .sc-line b{ font-size:21px; }
  }

  /* ---------------------------------------------------------------
     Tableaux du palmares : alignement et debordement
     Sur ecran etroit, la ligne « vainqueur » impose une largeur
     minimale (logo + pastille) que les autres colonnes ne peuvent
     pas compenser : la derniere colonne se retrouvait coupee.
     Le tableau garde donc une largeur plancher et defile
     horizontalement dans son cadre au lieu d'etre tronque.
     --------------------------------------------------------------- */
  .season-tables, .rank-tables{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:8px;
  }
  table.seasons :is(td, th){ vertical-align:middle; }
  table.seasons .team-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.seasons .year-cell{ white-space:nowrap; }
  table.seasons .third-cell, table.seasons th.third-col{ text-align:left; }

  @media (max-width:760px){
    table.seasons{ min-width:420px; }
    table.seasons .team-cell{ gap:6px; }
  }
  @media (max-width:480px){
    table.seasons{ min-width:360px; }
    table.seasons td, table.seasons th{ padding:9px 4px; font-size:11.5px; }
    table.seasons thead th{ padding:9px 4px; font-size:10px; }
    table.seasons :is(td, th):first-child{ padding-left:8px; }
    table.seasons :is(td, th):last-child{ padding-right:8px; }
    #panel-palmares .team-logo-slot{ width:22px; height:22px; }
    table.seasons .winner-badge{ padding:4px 6px; font-size:11px; }
  }