/* ════════════════════════════════════════════════════════════════
   6eHomme — logo-officiel.css · LE LOGO, PARTOUT AILLEURS QUE DANS LA BARRE
   Complète `socle.*.css` (qui gère le logo DE LA BARRE d'en-tête).
   Réf : skill `6ehomme-logo-usage` · Cadrage_identite_pages_v1.md

   ⚠⚠ VERSION DANS LE NOM DU FICHIER. Toute retouche ⇒ nouveau nom + le
   <link> des pages concernées. Ne jamais modifier en place une fois déployé.

   ── HISTORIQUE ─────────────────────────────────────────────────────────
   `20260811a` — création. Tailles initiales 82 % / 70 % / 70 %.
   `20260811b` — 11/08 : tailles validées par Karim à l'écran, 62 % (connexion)
                 · 62 % (chargement) · 52 % (404), plafonds px baissés dans la
                 MÊME proportion (décision Karim) pour que la réduction se voie
                 aussi sur grand écran. Séparation `.m6-logo-lg` / `.m6-logo-md`.
   `20260811c` — 11/08 (soir) : AUCUNE TAILLE NE CHANGE. Le fichier devient
                 utilisable sur les 21 pages qui servaient encore le carré
                 `logo.png`. Deux ajouts seulement :
                 (1) `!important` sur les propriétés de dimension ;
                 (2) `border-radius:0` explicite.
   `20260811d` — 11/08 (soir, après déploiement de `c`) : **`.m6-logo-hd`
                 passe de 26 px à 22 px.** Décision Karim, sur capture.

   ── ⚠⚠ POURQUOI 22 ET PAS 26 — LIRE AVANT DE « CORRIGER » CE CHIFFRE ────
   Karim a mis le Hub et l'Ardoise côte à côte : le `6H` du Hub était **18 %
   plus gros**. Les deux valeurs étaient justes chacune dans son fichier, et
   c'est précisément le problème — il y avait DEUX propriétaires :
     `.m6-bar-logo` (socle.*.css)        = 22 px  → 9 écrans
     `.m6-logo-hd`  (ce fichier, en `c`) = 26 px  → Hub · Match · Règles · effectif
   ⚡ ET L'ÉCART VENAIT D'UNE CONFUSION DE VOCABULAIRE. Le 11/08 au matin, en
   réparant un en-tête « trop grand », la note de séance a écrit que le Hub
   « prend les 26 px du socle ». Le socle est à **22**. La correction visait la
   bonne cible et a atterri 4 px au-dessus, et **rien ne pouvait le montrer
   sans afficher les deux écrans l'un sous l'autre**.

   ⚠⚠ L'ARBITRAGE EST ARITHMÉTIQUE, PAS ESTHÉTIQUE. Unifier à 26 aurait repris
   **3,4 px de largeur au titre sur les 9 barres du socle** (le monogramme fait
   0,847:1 — 22 px de haut = 18,6 de large ; 26 px = 22,0). Or c'est très
   exactement ce budget-là qui avait produit « LE… » sur Les Insiders et
   « FIC… » sur Performance joueur. Descendre le Hub à 22 ne coûte rien à
   personne ; monter le socle à 26 rouvrait un défaut réparé.
   ⇒ **13 écrans, une seule valeur. Ne pas réintroduire un second chiffre.**

   ── POURQUOI CE FICHIER EXISTE ─────────────────────────────────────────
   Des pages reproduisaient le logo en TEXTE STYLÉ (`<span>6e</span>Homme`), et
   d'autres servaient le carré `logo.png` — deux défauts de familles différentes,
   même remède : l'image officielle SANS son fond.
   ⚡ Les logos texte avaient pourtant un AVANTAGE réel, et c'est Karim qui l'a
   vu : « c'est plutôt beau sur Match » — parce que du texte prend la couleur
   du thème, là où `logo.png` porte son fond navy CUIT dans l'image et devient
   un autocollant sur le crème. La sortie n'était donc pas « remettre l'image
   d'origine » mais « livrer l'image officielle SANS son fond ».

   ⚠⚠ LE MOT SE DIMENSIONNE EN LARGEUR, JAMAIS EN HAUTEUR.
   Le mot détouré fait 925×262, soit **3,531:1**. Une consigne en hauteur
   (`clamp(130px,18vw,170px)`, héritée de l'époque du carré 1:1) donnerait
   **459 à 600 px de large** — plus large que n'importe quel téléphone.
   Le header et le footer, eux, restent en hauteur : ils sont petits.
   ✅ La table fausse a été corrigée dans le skill `6ehomme-logo-usage` le 11/08.

   ⚠⚠ CHAQUE RÈGLE EST UN `min(POURCENTAGE, PLAFOND px)` — DEUX LEVIERS.
   Le pourcentage gouverne sur téléphone, le plafond gouverne sur grand écran.
   Ne baisser QUE le pourcentage ne se verrait donc pas sur ordinateur : les
   deux ont été descendus ensemble, dans le même rapport.

   ⚠⚠ POURQUOI DES `!important` — CE N'EST PAS DE LA PARESSE (apprentissage #143).
   Les pages à migrer stylent leurs logos dans leur PROPRE <style>, déclaré
   APRÈS ce fichier. À spécificité égale, l'ordre tranche et la PAGE gagne.
   Pire, certaines gagnent franchement :
     `.screen-loading .logo-img` (0,2,0)  BAT  `.m6-logo-lg img` (0,1,1)
     `.login-card img`           (0,1,1)  ÉGALE `.m6-logo-xl img` (0,1,1) ⇒ la page l'emporte
   Un motif partagé doit gagner contre des pages qui ne savent pas qu'il existe.
   Même parade que `.m6-bar-logo` dans `socle.*.css` et que `.slot-*`.

   ⚠ CE FICHIER NE PORTE QUE LA DIMENSION, JAMAIS LA MISE EN PAGE.
   La position du logo dans une barre (`margin-left:auto` qui le pousse à
   droite, par exemple) reste une affaire de la PAGE : elle diffère d'un écran
   à l'autre. Les anciennes classes (`logo-img`, `login-logo`) peuvent donc
   rester sur l'élément — elles n'y portent plus que du positionnement.
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠⚠ NEUTRALISATION DU CONTENEUR — NE PAS SUPPRIMER, C'EST LE PIÈGE CENTRAL.
   L'ancien markup était `<img class="login-logo">` : la règle locale
   `.login-logo{height:clamp(110px,16vw,140px)}` visait donc L'IMAGE.
   Le nouveau markup est `<div class="login-logo m6-logo-xl"><picture><img>`,
   et cette même règle vise désormais LE CONTENEUR. Le mot mesure ~69 px de
   haut (242 px de large ÷ 3,531) dans une boîte qui en réclame 110 à 140 :
   ⇒ un trou blanc de 40 à 70 px sous chaque logo, sur toutes les pages.
   ⚡ Le défaut ne vient pas d'une règle fausse : la règle n'a pas bougé, c'est
   la CIBLE qui a changé sous elle. Déplacer une classe d'un élément à son
   parent réaffecte silencieusement tout le CSS qui la visait.
   ⚠ On neutralise la DIMENSION du conteneur, jamais sa MISE EN PAGE : les
   marges des anciennes règles (`margin:0 auto 10px`) sont conservées, elles
   restent utiles et elles sont l'affaire de la page. */
.m6-logo-xl,
.m6-logo-lg,
.m6-logo-md,
.m6-logo-hd,
.m6-logo-ft{
  height:auto !important;
  border-radius:0 !important;
}

/* Permutation par thème — deux <picture>, celui qui ne s'affiche pas ne coûte
   qu'un téléchargement. Même mécanique que dans la barre. */
.m6-logo-clair{ display:none; }
:root[data-theme="light"] .m6-logo-sombre{ display:none; }
:root[data-theme="light"] .m6-logo-clair{ display:block; }

/* ── GRANDS FORMATS : connexion, chargement, 404 ─────────────────────────
   Largeur contrainte, hauteur libre (cf. l'avertissement ci-dessus).
   ⚠ `border-radius:0` est EXPLICITE et volontaire : les valeurs de 5 à 16 px
   qu'on trouve sur les pages n'arrondissaient que les coins de la PLAQUE navy
   du carré. Sur un mot détouré il n'y a plus de plaque — le rayon ne ferait
   que ronger le glyphe. */
.m6-logo-xl img,
.m6-logo-lg img,
.m6-logo-md img{
  display:block !important;
  margin-left:auto !important; margin-right:auto !important;
  height:auto !important;
  border-radius:0 !important;
}

/* Connexion / accès refusé — 62 %, plafond 242 px. */
.m6-logo-xl img{ width:min(62%, 242px) !important; }

/* Chargement, et écrans erreur/succès de `rejoindre` — 62 %, plafond 230 px. */
.m6-logo-lg img{ width:min(62%, 230px) !important; }

/* ── FORMAT MOYEN : la 404 ──────────────────────────────────────────────
   ⚠ La 404 partageait `.m6-logo-lg` avec l'écran de chargement en `a`. Karim
   les a jugés séparément (62 % vs 52 %) : une classe partagée ne pouvait plus
   porter les deux. La 404 a désormais la sienne — ne pas les refusionner sous
   prétexte qu'elles se ressemblent, c'est une décision, pas un doublon. */
.m6-logo-md img{ width:min(52%, 193px) !important; }

/* ── PETITS FORMATS : header et footer ──────────────────────────────────
   Ici la hauteur reste le bon axe, comme dans la barre.
   ⚠⚠ 22 px, ALIGNÉ SUR `.m6-bar-logo` DU SOCLE. Ce n'est pas un réglage
   esthétique libre : c'est la MÊME valeur que les 9 écrans du socle, et elle
   sort du budget de largeur de la barre à 380 px. Lire l'encadré en tête de
   fichier avant d'y toucher. Si tu changes ce chiffre, change `.m6-bar-logo`
   dans `socle.*.css` DANS LE MÊME GESTE — sinon l'écart de 18 % revient.
   ⚠ Aucune marge n'est imposée : c'est de la mise en page, elle reste à la
   charge de la page (voir l'avertissement en tête de fichier). */
.m6-logo-hd img{
  display:block !important; height:22px !important; width:auto !important;
  border-radius:0 !important;
}
.m6-logo-ft img{
  display:block !important; height:22px !important; width:auto !important;
  border-radius:0 !important;
}

/* ⚠ Les anciennes règles de texte (`font-family:'Bebas Neue'`, `.logo span{
   color:orange }`…) sont NEUTRALISÉES page par page dans leur propre <style> :
   elles ne sont pas supprimées, elles n'ont simplement plus d'élément à
   styler. Les laisser coûte quelques octets et évite de casser un sélecteur
   voisin qu'on n'aurait pas vu. */