/* Feuille commune des pages Entreprises, Groupes et Nouveautes (16/10/2026).
   Servie par pages-publiques.js sous /pages-publiques.css?v=<empreinte> : un
   fichier pose ici est en ligne tout de suite, et l'empreinte dans l'URL
   empeche tout cache de servir l'ancienne version.

   La barre du haut est la COPIE de celle du wiki (wiki.html), au caractere
   pres : toute retouche de la barre se fait dans les copies jumelles (index,
   wiki, moi, concours, carte) puis se recopie ici. */
  /* --- Barre de navigation (identique a l'accueil, refaite le 04/09/2026) ---
     Pastille flottante en verre depoli, liens sans cadre, et une pilule qui
     GLISSE sous le lien vise. Le detail des choix est commente dans
     index.html : cette page en est la copie, elles doivent rester jumelles. */
  .topbar {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
    /* La barre s'aligne sur la largeur de CONTENU de la page (--largeur) :
       posee a 1420 en dur, elle s'arretait avant les bords du contenu des
       que la page s'est elargie a 1600, et le decalage se voyait. Repli
       1420 px pour les pages qui ne declarent pas la variable. */
    width: min(calc(100% - 28px), var(--largeur, 1420px));
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px; padding: 9px 12px 9px 18px;
    border-radius: 999px;
    background: rgba(17,17,17, .72);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.42);
    transition: padding .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .topbar.dense {
    padding: 5px 10px 5px 16px;
    background: rgba(12,12,12, .9);
    border-color: rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.55);
  }
  .brand {
    display: inline-flex; align-items: center; gap: 9px;
    color: #ececec; text-decoration: none;
    font-size: .95rem; font-weight: 700; letter-spacing: .1em;
    white-space: nowrap; transition: opacity .15s ease;
  }
  /* 14/10/2026 (optimisation, meme bloc que l'accueil) : le halo n'est plus
     une box-shadow animee. Elle REPEIGNAIT la pastille a chaque image, sous
     le verre depoli de la barre qu'il fallait alors re-flouter aussi — 102 %
     d'un coeur mesures pour ce seul point vert sur un PC sans acceleration
     graphique, la page etant sinon immobile. Le meme halo est un disque
     (::after) qui grandit en transform et s'eteint en opacity, et avance par
     paliers de 100 ms : la courbe d'origine (ease-out jusqu'a 1,82 s)
     echantillonnee, a moins de 1 % pres. scale(.3333) = 21 px ramenes a 7. */
  .brand .vie {
    position: relative;
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: #3fb950;
  }
  .brand .vie::after {
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    background: rgba(63,185,80,.45); pointer-events: none;
    opacity: 0; animation: respire-vie 2.6s steps(2) infinite;
  }
  .brand .vie.morte { background: #626262; }
  .brand .vie.morte::after { content: none; }
  @keyframes respire-vie {
    0% { transform: scale(.3333); opacity: 1; }
    7.692% { transform: scale(.4504); opacity: .824; }
    15.385% { transform: scale(.5575); opacity: .664; }
    23.077% { transform: scale(.6558); opacity: .516; }
    30.769% { transform: scale(.7449); opacity: .383; }
    38.462% { transform: scale(.8241); opacity: .264; }
    46.154% { transform: scale(.8918); opacity: .162; }
    53.846% { transform: scale(.9461); opacity: .081; }
    61.538% { transform: scale(.9837); opacity: .024; }
    69.231%, 100% { transform: scale(1); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand .vie::after { animation: none; opacity: 0; }
  }
  .brand span { color: #d4d4d4; }
  .brand:hover { opacity: .78; }
  .actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
  .center-links {
    position: relative;
    display: flex; align-items: center; gap: 2px;
    flex-wrap: wrap; justify-content: center;
  }
  .nav-glisseur {
    position: absolute; top: 0; left: 0; height: 100%; width: 0;
    border-radius: 999px; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.07);
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform .28s cubic-bezier(.22,1,.36,1), width .28s cubic-bezier(.22,1,.36,1),
                opacity .2s ease, background .2s ease, border-color .2s ease;
  }
  .center-links:hover .nav-glisseur, .nav-glisseur.tenu { opacity: 1; }
  .nav-glisseur.tenu { background: rgba(212,212,212,.16); border-color: rgba(212,212,212,.34); }
  .nav-link {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; cursor: pointer;
    padding: 10px 16px; border-radius: 999px;
    background: transparent; border: 1px solid transparent;
    color: #c4c4c4; text-decoration: none;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
  }
  .nav-link:hover { color: #fff; }
  .nav-link:active { transform: none; }
  .nav-link:focus-visible { outline: 2px solid #d4d4d4; outline-offset: 2px; }
  /* La page courante garde sa marque EN DUR : le glisseur ne suit qu'un survol,
     il ne peut pas dire ou l'on est. Les deux cohabitent — la pilule bleue
     reste sous « Wiki » pendant que la grise suit la souris ailleurs. */
  .nav-link.is-current {
    color: #fff; background: rgba(212,212,212,.16);
    border-color: rgba(212,212,212,.34);
  }
  .dropdown { position: relative; display: inline-flex; }
  .caret {
    width: 9px; height: 9px; flex-shrink: 0; opacity: .65;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s ease, opacity .15s ease;
  }
  .nav-link:hover .caret { opacity: 1; }
  .nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }
  .menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
    background: #151515; border: 1px solid #2b2b2b; border-radius: 10px;
    padding: 6px; text-align: left; z-index: 20;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
  .menu[hidden] { display: none; }
  .forms-menu { left: 50%; right: auto; transform: translateX(-50%); min-width: 230px; }
  .menu-item {
    display: block; padding: 9px 10px; border-radius: 6px;
    color: #d2d2d2; text-decoration: none; font-size: .82rem;
    transition: background .12s ease, color .12s ease;
  }
  .menu-item:hover { background: rgba(212,212,212,.14); color: #fff; }
  /* Bouton « Rejoindre » : le libelle reste, un compteur vient s'y ajouter des
     que /api/server-status repond. Sans JS ou serveur injoignable, le bouton
     garde son apparence d'origine — jamais de « 0 joueur » trompeur. */
  /* Bouton Discord de la barre. Il a remplace le 29/08/2026 le bouton vert
     « Rejoindre » ET la petite icone Discord qui le precedait. Motif : la page
     d'accueil porte desormais elle-meme un « Rejoindre le serveur » en grand et
     le nombre de joueurs connectes ; garder le bouton vert de la barre faisait
     deux appels a l'action identiques a 400 px l'un de l'autre, et l'icone
     seule a cote d'un bouton libelle ne se lisait pas comme un lien Discord.
     Meme bleu que l'icone qu'il remplace.

     Les regles .connect* ont disparu avec lui. Le bloc JS qui les alimentait est
     reste dans chaque page : il commence par `if (!bouton || !etat || !joueurs)
     return;` et se desactive donc tout seul, sans requete ni erreur. */
  .discord-lien {
    display: inline-flex; align-items: center; gap: 9px;
    height: 32px; padding: 0 15px; border-radius: 8px;
    background: rgba(88, 101, 242, .40);
    border: 1px solid rgba(88, 101, 242, .30);
    color: #e4e4e4; text-decoration: none;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
  }
  .discord-lien:hover {
    background: rgba(88, 101, 242, .62); border-color: rgba(88, 101, 242, .5);
    color: #fff; transform: translateY(-1px);
  }
  .discord-lien:active { transform: translateY(0); }
  .discord-lien svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
  .discord {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 8px;
    /* Bordure transparente et non absente : l'etat connecte se contente d'en
       changer la couleur, sans decaler le bouton d'un pixel. */
    background: none; border: 1px solid transparent;
    color: #fff; text-decoration: none; overflow: hidden;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .discord:hover { color: #d4d4d4; transform: translateY(-1px); }
  .discord:active { transform: translateY(0); }
  .discord svg { width: 29px; height: 29px; fill: currentColor; }
  .discord.is-user { border-color: #393939; cursor: pointer; }
  .discord.is-user:hover { border-color: #d4d4d4; }
  .discord img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .account { position: relative; display: inline-flex; }
  .menu-user {
    padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #232323;
    color: #868686; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  }
  .menu-user strong {
    display: block; margin-top: 3px; color: #ececec;
    font-size: .85rem; letter-spacing: 0; text-transform: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Indispensable : le display: block de .menu-item l'emporterait sur
     l'attribut hidden, et l'entree admin resterait visible pour les non-staff. */
  .menu-item[hidden] { display: none; }
  .menu-item.admin { color: #d4d4d4; font-weight: 600; }
  .menu-item.danger:hover { background: rgba(248,81,73,.14); color: #ff7b72; }

  @media (max-width: 1040px) {
    .topbar {
      top: 10px; width: calc(100% - 20px);
      grid-template-columns: auto 1fr;
      grid-template-areas: "marque actions" "liens liens";
      justify-items: stretch; gap: 10px;
      padding: 11px 12px; border-radius: 18px;
    }
    .topbar.dense { padding: 8px 12px; }
    .brand { grid-area: marque; display: inline-flex; }
    .actions { grid-area: actions; justify-self: end; gap: 8px; }
    .center-links {
      grid-area: liens; gap: 4px; flex-wrap: nowrap; justify-content: flex-start;
      overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 1px;
    }
    .center-links::-webkit-scrollbar { display: none; }
    .nav-glisseur { display: none; }
    .nav-link {
      padding: 9px 14px; font-size: .78rem; white-space: nowrap;
      background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06);
    }
    .nav-link.is-current { background: rgba(212,212,212,.16); border-color: rgba(212,212,212,.34); }
    .discord-lien { height: 30px; padding: 0 12px; font-size: .78rem; }
    .discord { width: 30px; height: 30px; }
    .discord { width: 30px; height: 30px; }
    .discord svg { width: 27px; height: 27px; }
  }

  @media (max-width: 560px) {
    .center-links {
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
      scroll-snap-type: x proximity;
    }
    .nav-link { scroll-snap-align: start; padding: 11px 15px; }
    .discord-lien { height: 36px; padding: 0 13px; }
    .discord { width: 36px; height: 36px; }
    .discord svg { width: 30px; height: 30px; }
    .brand { font-size: .88rem; letter-spacing: .08em; min-height: 40px; }
  }

  /* Option Roleplay (09/10/2026) : le logo devant le nom. */
  /* 14/10/2026 : l'image est /favicon-2.png (64 px, 4,6 Ko, le meme dessin,
     deja telechargee pour l'icone d'onglet) au lieu de /logo-optionrp-1.png
     (192 px, 26,7 Ko) pour 26 px affiches. */
  .brand-logo { width: 26px; height: 26px; flex: none; display: block; filter: brightness(1.45) contrast(1.1); }

  /* ── Bouton de compte (15/10/2026, « deconnecte : un bouton login with
     Discord au lieu de l icone, et agrandis un peu l avatar ») ──
     Deconnecte = pilule Discord ; connecte (.is-user, pose par le script de
     la page) = avatar 38 px. La pilule n apparait qu apres 0,7 s : un visiteur
     connecte ne la voit pas clignoter le temps que /api/me reponde (le script
     a alors deja pose .is-user, qui annule l animation). MEME bloc dans les
     cinq copies de la barre (index, wiki, moi, concours, carte). */
  .discord:not(.is-user) {
    width: auto; height: 36px; padding: 0 14px 0 12px; gap: 8px;
    border-radius: 999px; background: #5865f2; border-color: rgba(255,255,255,.08);
    color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    animation: connexion-apparait 0s linear .7s both;
  }
  .discord:not(.is-user):hover { background: #4752c4; color: #fff; }
  .discord:not(.is-user) svg { width: 19px; height: 19px; flex-shrink: 0; }
  @keyframes connexion-apparait { from { visibility: hidden; } to { visibility: visible; } }
  .discord.is-user { width: 38px; height: 38px; }
  @media (max-width: 1040px) {
    .discord:not(.is-user) { height: 32px; padding: 0 12px 0 10px; font-size: .76rem; }
    .discord:not(.is-user) svg { width: 17px; height: 17px; }
    .connexion-long { display: none; }
    .discord.is-user { width: 34px; height: 34px; }
  }
  @media (max-width: 560px) {
    .discord:not(.is-user) { height: 36px; }
    .discord.is-user { width: 40px; height: 40px; }
  }

  /* ── Menu « Serveur » (16/10/2026) ───────────────────────────────────────
     Entreprises, Groupes, Nouveautes. Un deroulant plutot que trois liens :
     sept liens ne tenaient plus dans la barre a 1080 px (wiki) avec la pilule
     « Se connecter avec Discord ». Centre sous son bouton comme « Formulaire »,
     une ligne d'explication par entree. MEME bloc dans les copies de la
     barre (index, wiki, moi, concours, carte, et cette feuille). */
  .serveur-menu { left: 50%; right: auto; transform: translateX(-50%); min-width: 250px; }
  .menu-desc { display: block; margin-top: 2px; color: #868686; font-size: .72rem; }
  /* Barre compacte (16/10/2026) : avec « Serveur », les entrees ne tiennent
     plus sur une ligne dans une barre etroite (1080 px au wiki). Sous 1160 px
     de BARRE — et non d'ecran : chaque page a sa propre largeur — le bouton
     dit « Se connecter » et les liens se resserrent. Navigateur sans requete
     de conteneur : la rangee passe sur deux lignes, rien ne casse. */
  .topbar { container-type: inline-size; }
  @media (min-width: 1041px) {
    @container (max-width: 1160px) {
      .connexion-long { display: none; }
      .nav-link { padding-left: 12px; padding-right: 12px; }
    }
  }
  .menu-item[aria-current="page"] { color: #fff; background: rgba(212,212,212,.10); }
  .nav-link.is-current { color: #fff; background: rgba(212,212,212,.16); border-color: rgba(212,212,212,.34); }

  /* ── Pages Entreprises, Groupes, Nouveautes (16/10/2026) ─────────────────
     Meme fond que le wiki (photo de rue floutee, lueur verte, trame de points)
     et memes cartes en verre depoli. Une couleur de plus, l'or, reservee a ce
     qui touche a la reprise : le bandeau, « Sans patron », « Reprendre ». */
  :root {
    color-scheme: dark;
    --largeur: 1180px;
    --texte: #ececec;
    --texte-2: #c9cdcb;
    --gris: #8b908e;
    --vert: #3fb950;
    --or: #f7c948;
    --or-sombre: #d99a1f;
  }
  * { box-sizing: border-box; }
  /* Pas de fond sur html : celui du body remonte alors au canevas, et les
     couches du fond (z-index negatif) passent devant lui, comme au wiki. */
  html { -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0; min-height: 100vh;
    background: #0a0c0c; color: var(--texte);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding: calc(var(--barre, 104px) + 32px) 24px 64px;
    overflow-x: hidden;
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid #d4d4d4; outline-offset: 2px; }
  [hidden] { display: none !important; }

  body::before {
    content: ""; position: fixed; inset: -60px; z-index: -2; pointer-events: none;
    background: url('/fond-4.webp') center 30% / cover no-repeat;
    filter: blur(18px) saturate(1.15) brightness(.5);
    transform: translateZ(0);
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 38% at 50% -6%, rgba(63,185,80,.16) 0%, rgba(63,185,80,.05) 45%, rgba(63,185,80,0) 72%),
      radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 26px 26px,
      radial-gradient(ellipse 120% 90% at 50% 40%, rgba(6,8,8,0) 35%, rgba(6,8,8,.7) 100%),
      linear-gradient(180deg, rgba(8,10,10,.45) 0%, rgba(8,10,10,.72) 60%, rgba(8,10,10,.86) 100%);
  }
  @media (max-width: 720px) {
    body::before { filter: blur(10px) saturate(1.1) brightness(.48); }
  }

  .carte-verre {
    background: rgba(14,17,16,.78);
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  }

  .page { max-width: var(--largeur); margin: 0 auto; }

  /* --- Titre --- */
  .head { text-align: center; margin: 0 auto 30px; max-width: 760px; }
  .head h1 {
    margin: 0 0 6px; font-size: clamp(2rem, 6vw, 2.8rem);
    letter-spacing: .1em; font-weight: 700; line-height: 1.15;
    text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 0 40px rgba(63,185,80,.12);
  }
  .head h1 span { color: #d4d4d4; }
  .head .sub {
    margin: 0; color: #9a9f9d; letter-spacing: .22em;
    font-size: .74rem; text-transform: uppercase;
  }
  .head .intro { margin: 16px auto 0; max-width: 620px; color: #b9bdbb; font-size: .95rem; }
  .intro-lien { margin: 10px 0 0; font-size: .85rem; }
  .intro-lien a {
    display: inline-flex; align-items: center; gap: 6px;
    color: #c9cdcb; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
  }
  .intro-lien a:hover { color: #fff; border-color: #fff; }
  .intro-lien svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  /* --- Boutons --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 20px; border-radius: 12px; border: 1px solid transparent;
    font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .02em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
  }
  .btn svg, .btn-reprendre svg, .reprendre-svg {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }
  .btn-or {
    background: linear-gradient(180deg, #f9d462 0%, #e8ad2c 100%); color: #1d1503;
    border-color: rgba(255,231,160,.55);
    box-shadow: 0 6px 22px rgba(247,201,72,.22), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .btn-or:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 28px rgba(247,201,72,.32), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn-vert {
    background: rgba(35,134,54,.62); border-color: rgba(63,185,80,.42); color: #fff;
    box-shadow: 0 4px 22px rgba(35,134,54,.22);
  }
  .btn-vert:hover { background: rgba(46,160,67,.82); transform: translateY(-2px); }
  .btn-clair { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #f0f0f0; }
  .btn-clair:hover { background: rgba(212,212,212,.14); border-color: #d4d4d4; transform: translateY(-2px); }

  /* --- Bandeau de reprise (entreprises) et d'appel (groupes) --- */
  .bandeau-reprise, .bandeau-groupe {
    display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
    padding: 22px 24px; margin: 0 0 16px;
  }
  .bandeau-reprise {
    border-color: rgba(247,201,72,.34);
    background: linear-gradient(110deg, rgba(247,201,72,.16) 0%, rgba(14,17,16,.84) 58%);
    box-shadow: 0 10px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(247,201,72,.06), inset 0 1px 0 rgba(255,231,160,.12);
  }
  .bandeau-groupe {
    border-color: rgba(63,185,80,.28);
    background: linear-gradient(110deg, rgba(63,185,80,.13) 0%, rgba(14,17,16,.84) 58%);
  }
  .br-texte { min-width: 0; }
  .br-chiffre { margin: 0; font-size: 1.22rem; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
  .br-chiffre b { color: var(--or); font-size: 1.55rem; margin-right: 2px; }
  .bandeau-groupe .br-chiffre { font-size: 1.1rem; }
  .br-sous { margin: 6px 0 0; color: #b9bdbb; font-size: .9rem; max-width: 640px; }

  /* --- Chiffres --- */
  .chiffres {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .chiffres li {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(14,17,16,.7); border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .chiffres b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
  .chiffres span { color: var(--gris); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

  /* --- Filtres --- */
  .filtres {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 18px;
  }
  .filtres-types { display: flex; flex-wrap: wrap; gap: 6px; }
  .filtre {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .03em;
    color: #c4c4c4; background: rgba(14,17,16,.72); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .filtre:hover { color: #fff; border-color: rgba(255,255,255,.22); }
  .filtre.actif { color: #fff; background: rgba(212,212,212,.18); border-color: rgba(212,212,212,.4); }
  .filtre[data-filtre="sans-patron"] { color: #f3d27a; }
  .filtre[data-filtre="sans-patron"].actif { background: rgba(247,201,72,.18); border-color: rgba(247,201,72,.5); color: #ffe7a0; }
  .filtre-n { opacity: .6; font-variant-numeric: tabular-nums; }
  .filtres-recherche { position: relative; flex: 0 1 300px; min-width: 0; }
  .filtres-recherche svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; pointer-events: none;
    fill: none; stroke: #7a7f7d; stroke-width: 2; stroke-linecap: round;
  }
  .filtres-recherche input {
    display: block; width: 100%; padding: 10px 14px 10px 38px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(14,17,16,.78); color: #ececec;
    font-family: inherit; font-size: .88rem;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .filtres-recherche input::placeholder { color: #6f7472; }
  .filtres-recherche input:focus { outline: none; border-color: #d4d4d4; box-shadow: 0 0 0 3px rgba(212,212,212,.14); }
  .filtres-recherche input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
  .filtres-aucun {
    margin: 0 0 18px; padding: 26px; text-align: center; color: var(--gris);
    border: 1px dashed rgba(255,255,255,.16); border-radius: 14px; font-size: .9rem;
  }

  /* --- Cartes --- */
  .grille {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    /* Chaque carte a sa hauteur : etirees, celles sans membres gardaient un
       grand vide sous le titre. */
    align-items: start;
  }
  .carte {
    position: relative; display: flex; flex-direction: column; gap: 13px;
    padding: 18px; min-width: 0; overflow: hidden;
    scroll-margin-top: calc(var(--barre, 104px) + 20px);
    transition: border-color .18s ease, transform .18s ease;
  }
  .carte:hover { border-color: rgba(255,255,255,.16); }
  .carte:target { border-color: rgba(212,212,212,.5); box-shadow: 0 0 0 3px rgba(212,212,212,.14), 0 10px 30px rgba(0,0,0,.35); }
  .carte.a-reprendre { border-color: rgba(247,201,72,.24); }
  .carte.a-reprendre::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, rgba(247,201,72,0), rgba(247,201,72,.8), rgba(247,201,72,0));
  }
  .carte-photo { margin: -18px -18px 0; aspect-ratio: 16 / 9; background: #0d0f0f; overflow: hidden; }
  .carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .carte-tete { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .logo {
    width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover;
    background: #101212; border: 1px solid rgba(255,255,255,.1);
  }
  .logo-repli {
    display: grid; place-items: center;
    background: linear-gradient(135deg, hsl(var(--teinte) 42% 34%), hsl(calc(var(--teinte) + 40) 40% 18%));
    color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
  }
  .carte-titre { min-width: 0; }
  .carte-titre h2 {
    margin: 0 0 6px; font-size: 1.08rem; font-weight: 700; line-height: 1.25;
    letter-spacing: .01em; overflow-wrap: anywhere;
  }
  .pastille-type {
    --c: #c9c9c9; --c-fond: rgba(201,201,201,.12); --c-bord: rgba(201,201,201,.3);
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c); background: var(--c-fond); border: 1px solid var(--c-bord);
  }
  .pastille-type[data-type="lspd"] { --c: #8db4ff; --c-fond: rgba(59,130,246,.15); --c-bord: rgba(96,150,255,.38); }
  .pastille-type[data-type="custom"] { --c: #fbbf5a; --c-fond: rgba(245,158,11,.14); --c-bord: rgba(245,158,11,.38); }
  .pastille-type[data-type="bar"] { --c: #d8b4fe; --c-fond: rgba(168,85,247,.15); --c-bord: rgba(192,132,252,.38); }
  .pastille-type[data-type="autres"] { --c: #86efac; --c-fond: rgba(34,197,94,.13); --c-bord: rgba(74,222,128,.34); }
  .pastille-type[data-type="pawnshop"] { --c: #5eead4; --c-fond: rgba(20,184,166,.14); --c-bord: rgba(45,212,191,.36); }
  .pastille-type[data-type="organisation"] { --c: #c4b5fd; --c-fond: rgba(139,92,246,.15); --c-bord: rgba(167,139,250,.38); }
  .pastille-type[data-type="gang"] { --c: #fca5a5; --c-fond: rgba(239,68,68,.14); --c-bord: rgba(248,113,113,.38); }
  .pastille-type[data-type="pf"] { --c: #fcd34d; --c-fond: rgba(234,179,8,.13); --c-bord: rgba(250,204,21,.34); }

  /* Annuaire (ajoute par le script si /api/entreprises repond) : type,
     Ouvert/Ferme, numero en jeu et « Recrute », sur une seule ligne. */
  .carte-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .pastille-etat {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #a4a8a6; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  }
  .pastille-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6b706e; }
  .pastille-etat.ouvert { color: #8fdc9b; background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.36); }
  .pastille-etat.ouvert::before { background: var(--vert); box-shadow: 0 0 6px rgba(63,185,80,.8); }
  .numero {
    display: inline-flex; align-items: center; gap: 5px;
    color: #d4d6d5; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .numero svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
  .badge-recrute {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; text-decoration: none;
    font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #a5ccff; background: rgba(88,166,255,.13); border: 1px solid rgba(88,166,255,.4);
  }
  .badge-recrute:hover { background: rgba(88,166,255,.24); color: #fff; }

  .direction { margin: 0; font-size: .88rem; color: var(--texte-2); overflow-wrap: anywhere; }
  .direction strong { color: #fff; font-weight: 600; }
  .d-libelle {
    color: var(--gris); font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin-right: 4px;
  }
  .d-co { color: var(--gris); font-size: .84rem; }
  .badge-sans-patron {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    color: #ffe08a; background: rgba(247,201,72,.12); border: 1px solid rgba(247,201,72,.38);
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  }
  .badge-sans-patron::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); box-shadow: 0 0 8px rgba(247,201,72,.8); }

  .membres { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
  .membres li {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
    padding: 7px 10px; border-radius: 9px;
    background: rgba(255,255,255,.035); font-size: .86rem; min-width: 0;
  }
  .m-nom { font-weight: 600; color: #e8e8e8; overflow-wrap: anywhere; }
  .m-poste { margin-left: auto; color: var(--gris); font-size: .78rem; overflow-wrap: anywhere; }
  .role {
    padding: 1px 7px; border-radius: 999px;
    font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  }
  .role-patron { color: #ffe08a; background: rgba(247,201,72,.12); border: 1px solid rgba(247,201,72,.32); }
  .role-copatron { color: #e2e2e2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); }
  .membres-plus summary {
    cursor: pointer; color: #b9bdbb; font-size: .8rem; padding: 4px 2px; list-style-position: inside;
  }
  .membres-plus summary:hover { color: #fff; }
  .membres-plus[open] summary { margin-bottom: 6px; }
  .membres-note, .membres-vide { margin: 0; color: var(--gris); font-size: .84rem; }

  .territoires .d-libelle { display: block; margin-bottom: 6px; }
  .territoires ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .territoires li {
    padding: 3px 10px; border-radius: 999px; font-size: .74rem;
    color: #a7e3b0; background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.28);
  }
  .territoires li.t-plus { color: var(--gris); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

  .carte-pied {
    margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    color: var(--gris); font-size: .78rem;
  }
  .stat-en-ligne { display: inline-flex; align-items: center; gap: 6px; }
  .stat-en-ligne i { width: 7px; height: 7px; border-radius: 50%; background: #555a58; }
  .stat-en-ligne.actif { color: #8fdc9b; }
  .stat-en-ligne.actif i { background: var(--vert); box-shadow: 0 0 8px rgba(63,185,80,.8); }
  .btn-reprendre {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(180deg, #f9d462 0%, #e8ad2c 100%); color: #1d1503;
    font-size: .8rem; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 4px 16px rgba(247,201,72,.22), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .15s ease, filter .15s ease;
  }
  .btn-reprendre svg { width: 14px; height: 14px; }
  .btn-reprendre:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .btn-discord-groupe {
    margin-left: auto; display: inline-flex; align-items: center;
    padding: 7px 13px; border-radius: 999px; text-decoration: none;
    color: #e6e8ff; background: rgba(88,101,242,.18); border: 1px solid rgba(124,135,255,.42);
    font-size: .78rem; font-weight: 700;
    transition: background .15s ease, border-color .15s ease;
  }
  .btn-discord-groupe:hover { background: rgba(88,101,242,.34); border-color: rgba(150,160,255,.7); color: #fff; }

  /* --- Etat vide (fichier pas encore publie) --- */
  .etat-vide { max-width: 640px; margin: 10px auto; padding: 44px 26px; text-align: center; }
  .etat-icone {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.3); color: #8fdc9b;
  }
  .etat-icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .etat-vide h2 { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: .02em; }
  .etat-vide p { margin: 0 auto; max-width: 480px; color: #b9bdbb; font-size: .93rem; }
  .etat-actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

  .maj { margin: 26px 0 0; text-align: center; color: #7d8280; font-size: .76rem; }
  .maj:empty { display: none; }

  footer.pied-page {
    max-width: var(--largeur); margin: 36px auto 0; text-align: center;
    color: #6f7472; font-size: .78rem; line-height: 1.9;
  }
  footer.pied-page a { color: #a4a8a6; text-decoration: none; }
  footer.pied-page a:hover { color: #fff; }

  /* --- Nouveautes : sommaire + fil --- */
  .mise-en-page { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; align-items: start; }
  /* Sans notes (fichier pas encore publie), l etat vide prend toute la largeur. */
  .mise-en-page > .etat-vide { grid-column: 1 / -1; }
  .sommaire {
    position: sticky; top: calc(var(--barre, 104px) + 18px);
    padding: 14px; max-height: calc(100vh - var(--barre, 104px) - 40px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
  }
  .sommaire-titre { margin: 2px 6px 10px; color: #7d8280; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
  .sommaire ol { list-style: none; margin: 0; padding: 0; }
  .sommaire a {
    display: block; padding: 7px 10px; border-radius: 7px; border-left: 2px solid transparent;
    color: #c9cdcb; text-decoration: none; font-size: .82rem; font-variant-numeric: tabular-nums;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
  }
  .sommaire a:hover { background: rgba(212,212,212,.1); color: #fff; }
  .sommaire a.actif { color: #fff; border-left-color: var(--vert); background: rgba(63,185,80,.1); }
  .sommaire a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .sommaire small { color: #7d8280; font-size: .7rem; white-space: nowrap; }

  .fil { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .note { padding: 22px 24px; min-width: 0; scroll-margin-top: calc(var(--barre, 104px) + 20px); }
  .note:target { border-color: rgba(63,185,80,.45); }
  .note-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
  .note-tete time {
    display: inline-flex; align-items: center; gap: 8px;
    color: #a7e3b0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .note-tete time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px rgba(63,185,80,.7); }
  .note-version {
    padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    color: #d4d4d4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  }
  .note-ancre {
    margin-left: auto; width: 28px; height: 28px; border-radius: 8px;
    display: inline-grid; place-items: center; text-decoration: none;
    color: #6f7472; font-weight: 700; opacity: .6; transition: opacity .15s ease, color .15s ease, background .15s ease;
  }
  .note:hover .note-ancre, .note-ancre:focus-visible { opacity: 1; }
  .note-ancre:hover { color: #fff; background: rgba(255,255,255,.08); }
  .note h2 { margin: 0 0 6px; font-size: 1.28rem; line-height: 1.3; letter-spacing: .01em; overflow-wrap: anywhere; }

  .md { color: #d4d6d5; font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }
  .md p { margin: .55em 0; }
  .md a { color: #a5ccff; text-decoration: underline; text-decoration-color: rgba(165,204,255,.35); text-underline-offset: 2px; }
  .md a:hover { text-decoration-color: currentColor; }
  .md strong { color: #fff; }
  .md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84em;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; padding: 1px 6px;
  }
  .md-code { margin: .8em 0; padding: 12px 14px; overflow-x: auto; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; }
  .md-code code { background: none; border: 0; padding: 0; }
  .md-titre { margin: 18px 0 6px; font-size: 1.02rem; color: #fff; letter-spacing: .02em; }
  .md-citation { margin: .7em 0; padding: 2px 0 2px 12px; border-left: 3px solid rgba(255,255,255,.2); color: #b9bdbb; }
  .md-petit { display: block; margin: 3px 0 0; color: #858a88; font-size: .8rem; line-height: 1.5; }
  p.md-petit { margin: 14px 0 0; }
  .md-cache { background: #2c2f2e; color: transparent; border-radius: 4px; padding: 0 3px; transition: color .15s ease; }
  .md-cache:hover { color: inherit; background: #222524; }
  .md-liste { margin: 0; padding-left: 20px; }
  .md-liste li { margin: 6px 0; padding-left: 2px; }
  .md-liste li::marker { color: var(--c, #8b908e); }

  .md-rubrique {
    --c: #c9c9c9; --c-fond: rgba(201,201,201,.1); --c-bord: rgba(201,201,201,.28);
    margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--c-bord);
  }
  .md-rubrique[data-genre="correctifs"] { --c: #ffa064; --c-fond: rgba(240,136,62,.13); --c-bord: rgba(240,136,62,.42); }
  .md-rubrique[data-genre="nouveautes"] { --c: #6ee089; --c-fond: rgba(63,185,80,.13); --c-bord: rgba(63,185,80,.45); }
  .md-rubrique[data-genre="ajouts"] { --c: #7cb8ff; --c-fond: rgba(88,166,255,.13); --c-bord: rgba(88,166,255,.42); }
  .md-rubrique[data-genre="modifications"] { --c: #f2c94c; --c-fond: rgba(210,153,34,.14); --c-bord: rgba(210,153,34,.45); }
  .md-rubrique[data-genre="anticheat"] { --c: #ff8a84; --c-fond: rgba(248,81,73,.13); --c-bord: rgba(248,81,73,.42); }
  .md-rubrique[data-genre="map"] { --c: #5fe0d4; --c-fond: rgba(57,197,187,.13); --c-bord: rgba(57,197,187,.42); }
  .md-rubrique[data-genre="retraits"] { --c: #b8b8b8; --c-fond: rgba(160,160,160,.12); --c-bord: rgba(160,160,160,.36); }
  .md-pastille {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px;
    padding: 4px 6px 4px 12px; border-radius: 999px;
    color: var(--c); background: var(--c-fond); border: 1px solid var(--c-bord);
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  }
  .md-pastille .md-libelle:last-child { margin-right: 6px; }
  .md-compte {
    min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
    background: rgba(0,0,0,.3); color: #f2f2f2; font-size: .68rem; letter-spacing: 0;
  }
  .md-suite { display: inline; margin: 0 0 0 8px; color: var(--gris); font-size: .84rem; }

  .note-images { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
  .note-images.seule { grid-template-columns: minmax(0, 1fr); }
  .note-image {
    display: block; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; overflow: hidden;
    background: #0d0f0f; cursor: zoom-in; font: inherit;
  }
  .note-image img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; transition: transform .25s ease; }
  .note-image:hover img { transform: scale(1.015); }
  /* Videos d'annonce : souvent verticales (format court). Plusieurs = une
     grille de colonnes etroites ; une seule = sa taille propre, plafonnee. */
  .note-videos { display: grid; gap: 14px; margin-top: 16px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
  .note-videos.seule { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .note-video { margin: 0; min-width: 0; }
  .note-video video { display: block; width: 100%; max-height: 560px; background: #000; border-radius: 11px; border: 1px solid rgba(255,255,255,.08); }
  .note-videos.seule video { width: auto; max-width: 100%; }
  /* La legende suit la largeur de la video, au lieu d'elargir la figure. */
  .note-videos.seule .note-video { width: min-content; max-width: 100%; }
  .note-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .ancre-muette { display: block; height: 0; scroll-margin-top: calc(var(--barre, 104px) + 20px); }
  .note-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 8px; font-size: .82rem; color: var(--texte-2); }
  .note-video figcaption a { color: #a5ccff; }
  .note-video-lien {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 11px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    color: #e8e8e8; text-decoration: none; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere;
  }
  .note-video-lien:hover { border-color: rgba(255,255,255,.3); }
  .note-video-lien svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

  /* Visionneuse des images de note. */
  .visionneuse {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: 24px; background: rgba(4,6,6,.9); cursor: zoom-out;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .visionneuse img { max-width: min(1400px, 100%); max-height: calc(100vh - 48px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
  .visionneuse button {
    position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(20,22,22,.8); color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
  }

  /* --- Ecrans etroits --- */
  @media (max-width: 1040px) {
    .mise-en-page { grid-template-columns: minmax(0, 1fr); }
    .sommaire { display: none; }
  }
  @media (max-width: 720px) {
    .bandeau-reprise, .bandeau-groupe { flex-direction: column; align-items: stretch; text-align: left; }
    .bandeau-reprise .btn, .bandeau-groupe .btn { width: 100%; }
    /* nowrap : en colonne ET en retour a la ligne, chaque ligne prenait la
       largeur de son contenu (la rangee de filtres) et la page debordait. */
    .filtres { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .filtres-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -2px; }
    .filtres-types::-webkit-scrollbar { display: none; }
    .filtre { flex: none; }
    .filtres-recherche { flex-basis: auto; }
    .filtres-recherche input { font-size: 16px; }
  }
  @media (max-width: 560px) {
    body { padding-left: 16px; padding-right: 16px; }
    .head { margin-bottom: 22px; }
    .head .intro { font-size: .9rem; }
    .bandeau-reprise, .bandeau-groupe { padding: 18px; }
    .br-chiffre { font-size: 1.08rem; }
    .br-chiffre b { font-size: 1.35rem; }
    .carte { padding: 16px; }
    .carte-photo { margin: -16px -16px 0; }
    .note { padding: 18px 16px; }
    .note h2 { font-size: 1.14rem; }
    .md-rubrique { padding-left: 12px; }
    .chiffres li { padding: 7px 13px; }
    /* Plusieurs videos verticales : deux par rangee. Pleine largeur, les six
       videos du 05/10 faisaient ~3 300 px a defiler avant la premiere note
       (revue du 16/10). */
    .note-videos:not(.seule) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .note-videos:not(.seule) video { max-height: 340px; }
    .note-videos:not(.seule) .note-video figcaption { font-size: .76rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }