/* ════════════════════════════════════════════════════════════════ Haut des pages d'archives — refonte du 22/09/2026, EN APERÇU (?hero=nouveau, classe its-hero-v2 sur le body). Page Joueurs d'abord. Balisage : themes/itsrugby/template-parts/hero-archive-player.php Données : plugins/its-rugby-templates/inc/its-archive-hero.php Même langage que le haut d'article, validé par Félix : texte vanilla, vert du menu. JAMAIS de photo d'article (droits d'agence limités à l'article, 22/09) : une photo de Félix, sans crédit affiché (its_archive_hero_photo_id dans inc/its-archive-hero.php). Sans photo : décor dessiné (--nophoto). Mobile (site et app) : pas de fil d'Ariane, boutons « ‹ » et « Suivant » sur la photo, comme les articles. - Mobile : la photo occupe le haut, tout le contenu est posé dessus en bas. - Ordinateur : texte à gauche sur le vert, photo nette à droite fondue. Contenu : titre, texte pour Google (2 lignes), recherche, postes (liens vers les pages de poste), joueurs à la une (reliés aux derniers articles). Feuille hors RUCSS et hors minification Rocket. ════════════════════════════════════════════════════════════════ */ .arch-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); overflow: hidden; } html:not(.is-app) .arch-hero { border-top: 1px solid rgba(242, 229, 210, 0.2); } .arch-hero__media { position: absolute; inset: 0; } .arch-hero__media picture { display: block; width: 100%; height: 100%; } .arch-hero__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; /* Photo du terrain (Félix, 22/09) : poteaux centrés sur mobile. ⚠️ Le deuxième nombre ne se voit QUE sur les hauts de page rognés en hauteur : ordinateur (photo à 60 % de large) et hauts de page compacts. Le haut de page mobile plein (520 px) ne rogne qu'en largeur, il ignore cette valeur. À 45 %, la bande retenue sur /mercato/ était celle de l'IMMEUBLE d'arrière-plan : le bandeau ressemblait à une photo de résidence, pas à un terrain (Félix, 25/09). À 78 % l'immeuble n'est plus qu'un liseré sous le voile, les poteaux restent visibles et la pelouse porte le texte. Au-delà de ~88 % il ne reste que de l'herbe. */ object-position: 20% 78%; } .arch-hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28, 61, 52, 0.5) 0%, rgba(28, 61, 52, 0) 20%); pointer-events: none; } .arch-hero__head { position: relative; z-index: 1; padding-top: 190px; padding-bottom: 20px; /* La photo doit rester visible sous le texte (Félix, 22/09 : le vert plein la cachait). Voile dosé pour le RGAA, calculé sur le pire cas (blanc derrière) : >= 0,7 sous le titre (grand texte, 3:1), >= 0,8 sous le texte courant (4,5:1). Pastilles et cartes ont leur propre fond plein. */ background: linear-gradient(to bottom, rgba(28, 61, 52, 0) 0, rgba(28, 61, 52, 0.6) 120px, rgba(28, 61, 52, 0.72) 190px, rgba(28, 61, 52, 0.84) 250px, rgba(28, 61, 52, 0.88) 100%); } .arch-hero .arch-hero__inner { display: flex; flex-direction: column; gap: 12px; } .arch-hero h1.arch-hero__title { margin: 0; font-size: clamp(24px, 6.6vw, 28px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; color: var(--vanilla, #F2E5D2); text-shadow: 0 1px 10px rgba(28, 61, 52, 0.6); } /* Texte écrit pour Google : conservé en entier, affiché sur deux lignes. */ .arch-hero .arch-hero__desc { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.5; color: var(--vanilla, #F2E5D2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Recherche ── */ .arch-hero__search { display: flex; gap: 8px; max-width: 600px; margin: 2px 0 0; } .arch-hero__search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 14px; border: 0; border-radius: 0; background: #FFFFFF; color: var(--teal, #1C3D34); font: inherit; font-size: 16px; /* 16 px : pas de zoom automatique d'iOS au focus */ } .arch-hero__filters, .arch-hero__submit { flex: 0 0 auto; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; } .arch-hero__filters { padding: 0 14px; background: #FFFFFF; color: var(--teal, #1C3D34); } .arch-hero__submit { width: 46px; padding: 0; background: var(--vanilla, #F2E5D2); color: var(--teal, #1C3D34); } .arch-hero__filters:focus-visible, .arch-hero__submit:focus-visible, .arch-hero__search input:focus-visible { outline: 2px solid var(--vanilla, #F2E5D2); outline-offset: 2px; } /* ── Rangées défilantes (postes, joueurs) : fondu + chevron à droite pour montrer qu'elles continuent (remarque de Félix sur les maquettes). ── */ .arch-hero__rail { position: relative; margin-right: -16px; } .arch-hero__rail::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: linear-gradient(to right, rgba(28, 61, 52, 0), var(--teal, #1C3D34) 55%); pointer-events: none; } /* Bouton « voir la suite » : vrai bouton (clic souris sur ordinateur), qui fait défiler la rangée ; affiché seulement quand il reste du contenu à droite (itsrugby-archive-hero.js). */ .arch-hero .arch-hero__more { position: absolute; z-index: 2; top: 50%; right: 12px; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--vanilla, #F2E5D2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3D34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 18px 18px; } .arch-hero .arch-hero__more[hidden] { display: none; } .arch-hero .arch-hero__more:focus-visible { outline: 2px solid var(--vanilla, #F2E5D2); outline-offset: 2px; } .arch-hero__track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 56px; -webkit-overflow-scrolling: touch; } .arch-hero__track::-webkit-scrollbar { display: none; } .arch-hero__label { font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--sage, #ABC8A2); } /* Postes : style des pastilles = module .its-pastille (itsrugby-common.css). */ .arch-hero .arch-hero__chip { flex: 0 0 auto; } /* Joueurs à la une */ .arch-hero .arch-hero__player { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; max-width: 230px; text-decoration: none; color: var(--vanilla, #F2E5D2); background: #24493F; /* plein, jamais transparent (RGAA) */ border: 1px solid rgba(242, 229, 210, 0.4); } .arch-hero .arch-hero__player:hover, .arch-hero .arch-hero__player:focus-visible { background: #2F5A4E; border-color: var(--vanilla, #F2E5D2); } .arch-hero__avatar { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--vanilla, #F2E5D2); color: var(--teal, #1C3D34); font-size: 12px; font-weight: 800; } .arch-hero__avatar img { width: 100%; height: 100%; object-fit: cover; } .arch-hero__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .arch-hero__name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-hero__club { font-size: 12px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Boutons « ‹ » et « Suivant » (mobile, site ET app) : mêmes pastilles que sur les articles (itsrugby-article-hero.css). Le fil d'Ariane texte est masqué partout ; son balisage Google reste dans la page. ── */ .arch-hero__nav { display: none; } @media (max-width: 899px) { .arch-hero__nav { position: absolute; top: 10px; left: 0; right: 0; z-index: 5; display: flex; align-items: center; padding: 0 16px; } html.is-app .arch-hero__nav { padding: 0 12px; } .arch-hero .arch-hero__back, .arch-hero .arch-hero__next { display: inline-flex; align-items: center; justify-content: center; height: 36px; box-sizing: border-box; text-decoration: none; background: rgba(28, 61, 52, 0.55); border: 1px solid rgba(242, 229, 210, 0.18); color: var(--vanilla, #F2E5D2); } .arch-hero .arch-hero__back { width: 36px; padding: 0; font-size: 0; } .arch-hero .arch-hero__back::before { content: "\2039"; font-size: 26px; line-height: 1; color: var(--vanilla, #F2E5D2); position: relative; top: -2px; } .arch-hero .arch-hero__next { gap: 8px; margin-left: auto; padding: 0 12px; font-size: 11px; font-weight: 800; letter-spacing:0; text-transform:none; } .arch-hero .arch-hero__next::after { content: "\203A"; font-size: 26px; line-height: 1; font-weight: 400; color: var(--vanilla, #F2E5D2); position: relative; top: -2px; } .arch-hero--nophoto .arch-hero__head { padding-top: 62px; } } body.its-hero-v2 nav.breadcrumb { display: none; } /* ── Sans photo : vert plein + poteaux en H dessinés, en filigrane à droite. Aucun droit d'image en jeu. ── */ .arch-hero--nophoto { min-height: 0; } .arch-hero--nophoto::before { content: ""; position: absolute; top: 18px; right: -28px; width: 230px; height: 250px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 130' fill='none' stroke='%23F2E5D2' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M22 4v122M98 4v122M22 78h76'/%3E%3Cpath d='M4 126h112' stroke-width='1.5' stroke-dasharray='4 5'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.1; pointer-events: none; } .arch-hero--nophoto .arch-hero__head { padding-top: 28px; padding-bottom: 22px; background: none; } .arch-hero--nophoto h1.arch-hero__title { text-shadow: none; } /* Ancienne recherche de la page : sa barre est remplacée par celle du haut de page ; le formulaire reste (panneau de filtres, tri, pagination). */ /* Pas sur Matchs : sa barre de filtres (.its-fbar) reste telle quelle. */ body.its-hero-v2:not(.post-type-archive-game) main .archive-search .search-row { display: none; } body.its-hero-v2:not(.post-type-archive-game) main .archive-search { padding: 0; margin: 0; border-bottom: 0; } /* Sans sa barre, le formulaire laissait un grand vide beige sous le haut de page (marges du conteneur). */ body.its-hero-v2 .container--page-body { padding-top: 16px; } /* ── Ordinateur : texte à gauche, photo nette à droite ── */ @media (min-width: 900px) { .arch-hero { display: block; min-height: 460px; } .arch-hero__media { left: auto; width: 60%; } .arch-hero__media::after { content: ""; position: absolute; /* Déborde de 2 px à gauche : sans ça, le bord de la photo se voyait comme un fin trait vertical. */ inset: 0 0 0 -2px; background: linear-gradient(to right, var(--teal, #1C3D34) 0, rgba(28, 61, 52, 0.9) 160px, rgba(28, 61, 52, 0.6) 250px, rgba(28, 61, 52, 0.3) 340px, rgba(28, 61, 52, 0.1) 420px, rgba(28, 61, 52, 0) 490px); pointer-events: none; } .arch-hero__shade { display: none; } .arch-hero__head { background: none; padding-top: 56px; padding-bottom: 48px; } .arch-hero .arch-hero__inner { gap: 16px; } .arch-hero .arch-hero__inner > * { max-width: 600px; } .arch-hero h1.arch-hero__title { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -0.025em; text-shadow: none; } .arch-hero .arch-hero__desc { font-size: 15px; } .arch-hero--nophoto { min-height: 0; } .arch-hero--nophoto::before { top: 50%; right: max(24px, calc((100vw - 1240px) / 2)); width: 340px; height: 370px; transform: translateY(-50%); } .arch-hero--nophoto .arch-hero__head { padding-top: 48px; padding-bottom: 44px; } /* Sur ordinateur, les rangées passent à la ligne au lieu de défiler. */ .arch-hero__rail { margin-right: 0; } .arch-hero__rail::after, .arch-hero .arch-hero__more { display: none; } .arch-hero__track { flex-wrap: wrap; overflow: visible; padding-right: 0; padding-left: 0; } } .arch-hero__featured { display: flex; flex-direction: column; gap: 6px; } /* ════════════════════════════════════════════════════════════════ Bloc « Les joueurs du moment » avant la liste (aperçu, 22/09). Balisage : themes/itsrugby/template-parts/archive-player-spotlight.php Cartes blanches sur le fond vanilla de la page, texte teal. Libellés en teal (charte : ni vert vif ni vert foncé, 08/10). Mobile : cartes empilées ; dès 768 px : 3 colonnes. ════════════════════════════════════════════════════════════════ */ .arch-spot { margin: 0 0 20px; } .arch-spot__grid { display: grid; grid-template-columns: 1fr; gap: 10px; } /* 3 cartes (marqueurs essais/points à onglets, consultés, actu). La grille suit le nombre de cartes réellement rendues : figée à trois colonnes, elle laissait un trou à droite quand il n'y en avait que deux (Félix, 23/09). */ @media (min-width: 768px) { .arch-spot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .arch-spot__card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #FFFFFF; color: var(--teal, #1C3D34); border-top: 3px solid var(--sage, #ABC8A2); } .arch-spot__eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--teal, #1C3D34); } .arch-spot__big { margin: 0; font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .arch-spot__big small { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 4px; } /* Ligne joueur (lien) : avatar + nom + club. Couleur posée sur les spans : common.css force color:inherit sur les liens à classe. */ .arch-spot__player { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .arch-spot__avatar { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); font-size: 13px; font-weight: 800; } .arch-spot__avatar img { width: 100%; height: 100%; object-fit: cover; } /* Blason de club : entier dans son cadre, ET SUR FOND BLANC. C'est le traitement réglé le 22/09 pour l'annuaire des équipes (body.post-type- archive-team, plus bas) ; la version du 24/09 n'avait repris que le cadrage, laissant les écussons sur le vert profond des portraits (Félix, 24/09). Le fond vert reste celui des photos et des initiales. Classe posée par le gabarit, donc valable sur toutes les pages. ⚠️ Sélecteur en deux classes : « .arch-spot .arch-spot__avatar » fixe déjà la taille des avatars, un sélecteur simple perdrait l'arbitrage. Pas de !important, on joue la spécificité. */ .arch-spot .arch-spot__avatar--logo, .arch-spot__list .arch-spot__avatar--logo, .arch-spot__news .arch-spot__avatar--logo { background: #FFFFFF; } .arch-spot__avatar--logo img { object-fit: contain; padding: 3px; box-sizing: border-box; } .arch-spot__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .arch-spot__name { font-size: 15px; font-weight: 800; color: var(--teal, #1C3D34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-spot__club { font-size: 12px; color: #4A5F58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-spot__player:hover .arch-spot__name, .arch-spot__player:focus-visible .arch-spot__name { text-decoration: underline; } .arch-spot__player:focus-visible, .arch-spot__article:focus-visible { outline: 2px solid var(--teal, #1C3D34); outline-offset: 2px; } /* Liste des plus consultés : rang + joueur + visiteurs. */ .arch-spot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .arch-spot__list li { display: flex; align-items: center; gap: 10px; margin: 0; } .arch-spot__rank { flex: 0 0 22px; font-size: 18px; font-weight: 900; color: var(--teal, #1C3D34); } .arch-spot__list .arch-spot__player { flex: 1 1 auto; } .arch-spot__list .arch-spot__avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 11px; } .arch-spot__count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #4A5F58; } .arch-spot__article { display: block; padding-top: 10px; border-top: 1px solid rgba(28, 61, 52, 0.12); text-decoration: none; } .arch-spot__article span { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--teal, #1C3D34); } .arch-spot__article:hover span, .arch-spot__article:focus-visible span { text-decoration: underline; } /* « Dans l'actu » : 3 joueurs, un par article, titre de l'article sous le nom (aligné sur le texte, après l'avatar). */ .arch-spot__news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .arch-spot__news li { margin: 0; padding: 10px 0; border-top: 1px solid rgba(28, 61, 52, 0.12); } .arch-spot__news li:first-child { padding-top: 0; border-top: 0; } .arch-spot__news .arch-spot__avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 11px; } .arch-spot__news .arch-spot__article { margin: 4px 0 0 42px; padding: 0; border-top: 0; } .arch-spot__news .arch-spot__article span { font-size: 12px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Classements (essais, points) : valeur à droite, en gras. */ .arch-spot__count strong { font-size: 16px; font-weight: 900; color: var(--teal, #1C3D34); } /* Actu : titre d'article sur UNE ligne, pour garder des cartes de même hauteur que les classements. */ .arch-spot__news .arch-spot__article span { -webkit-line-clamp: 1; } /* Carte « Meilleurs marqueurs » : le n°1 aux essais et le n°1 aux points (Félix, 22/09 : pas d'onglets). Chaque ligne : intitulé, joueur, chiffre. */ .arch-spot__leaders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .arch-spot__leaders li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(28, 61, 52, 0.12); } .arch-spot__leaders li:first-child { padding-top: 0; border-top: 0; } .arch-spot__leader-label { font-size: 12px; font-weight: 700; color: #4A5F58; } .arch-spot__leader-row { display: flex; align-items: center; gap: 10px; } .arch-spot__leader-row .arch-spot__player { flex: 1 1 auto; } .arch-spot__leader-row .arch-spot__count strong { font-size: 26px; line-height: 1; } /* Harmonisation des 3 cartes (Félix, 22/09 : « pas les mêmes hauteurs ») : mêmes séparateurs, même avatar (36 px), et lignes réparties sur toute la hauteur de la carte (la plus haute de la rangée donne la mesure). */ .arch-spot__list, .arch-spot__leaders, .arch-spot__news { flex: 1 1 auto; justify-content: space-between; gap: 0; } .arch-spot__list li, .arch-spot__leaders li, .arch-spot__news li { padding: 10px 0; border-top: 1px solid rgba(28, 61, 52, 0.12); } .arch-spot__list li:first-child, .arch-spot__leaders li:first-child, .arch-spot__news li:first-child { padding-top: 0; border-top: 0; } .arch-spot__list li:last-child, .arch-spot__leaders li:last-child, .arch-spot__news li:last-child { padding-bottom: 0; } .arch-spot .arch-spot__avatar, .arch-spot__list .arch-spot__avatar, .arch-spot__news .arch-spot__avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 12px; } .arch-spot__news .arch-spot__article { margin-left: 46px; } /* Meilleurs marqueurs : 2 lignes seulement face au top 5 → chiffre en grand AU-DESSUS du joueur, chaque moitié centrée dans sa hauteur. */ .arch-spot__leaders li { flex: 1 1 0; justify-content: center; } .arch-spot__leader-row { flex-direction: column-reverse; align-items: flex-start; gap: 8px; } .arch-spot__leader-row .arch-spot__player { flex: 0 0 auto; width: 100%; } .arch-spot__leader-row .arch-spot__count strong { font-size: 34px; letter-spacing: -0.02em; } .arch-spot__leader-row .arch-spot__count { font-size: 14px; } /* ════════════════════════════════════════════════════════════════ Postes sous « Tous les joueurs » (Félix, 22/09 : ils filtrent la liste, leur place est au-dessus d'elle, plus dans le haut de page). Balisage : themes/itsrugby/template-parts/archive-player-postes.php Réutilise la mécanique des rangées (.arch-hero__rail/__track/__more, itsrugby-archive-hero.js) ; couleurs claires pour le fond beige. ════════════════════════════════════════════════════════════════ */ .arch-postes { margin: 0 0 16px; } .arch-postes .arch-hero__rail::after { background: linear-gradient(to right, rgba(242, 229, 210, 0), var(--vanilla, #F2E5D2) 55%); } .arch-postes .arch-hero__chip { flex: 0 0 auto; } .arch-postes .arch-hero__more { position: absolute; z-index: 2; top: 50%; right: 12px; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--teal, #1C3D34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2E5D2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 18px 18px; } .arch-postes .arch-hero__more[hidden] { display: none; } .arch-postes .arch-hero__more:focus-visible { outline: 2px solid var(--teal, #1C3D34); outline-offset: 2px; } @media (min-width: 900px) { .arch-postes .arch-hero__more { display: none; } } /* Titres courts : réservés au mobile (colonnes étroites). */ .arch-spot__eyebrow-short { display: none; } /* Mobile (Félix, 22/09 : « juste une ligne, 3 colonnes, quitte à avoir moins d'infos ») : une seule rangée de 3 tuiles, UNE info par tuile (n°1 aux essais, n°1 des consultés, 1er joueur de l'actu), sans avatar, rang ni titre d'article. Titres courts (.arch-spot__eyebrow-short). */ @media (max-width: 767px) { .arch-spot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .arch-spot__card { gap: 6px; padding: 10px 8px; } .arch-spot__eyebrow { font-size: 10px; letter-spacing: 0.04em; } .arch-spot__eyebrow-long { display: none; } .arch-spot__eyebrow-short { display: inline; } .arch-spot__leaders li:nth-child(n+2), .arch-spot__list li:nth-child(n+2), .arch-spot__news li:nth-child(n+2), .arch-spot__leader-label, .arch-spot__rank, .arch-spot__list .arch-spot__count, .arch-spot__article, .arch-spot .arch-spot__avatar { display: none; } .arch-spot__list li, .arch-spot__news li, .arch-spot__leaders li { padding: 0; border: 0; } .arch-spot__leader-row { gap: 2px; } .arch-spot__leader-row .arch-spot__count { font-size: 12px; } .arch-spot__leader-row .arch-spot__count strong { font-size: 22px; } .arch-spot__name { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* ⚠️ La hauteur de DEUX lignes, toujours. Les noms courts (« Uini Atonio ») tenaient sur une ligne et remontaient tout ce qui suit : d'une tuile à l'autre, le club et l'année ne s'alignaient plus (Félix, 25/09). La réserve vaut mieux qu'un décalage. */ min-height: 2.5em; line-height: 1.25; } /* Club lisible sous le nom (« Pau » trop petit à 11 px, Félix 22/09). */ .arch-spot__club { font-size: 13px; font-weight: 600; } } /* Haut de page, mobile et tablette : formulaire et texte sur toute la largeur (limités à 600/640 px, ils laissaient un vide à droite entre 620 et 900 px de large). */ @media (max-width: 899px) { .arch-hero__search, .arch-hero .arch-hero__desc { max-width: none; } } /* Matchs : pas de recherche dans le haut de page (la page a sa barre de filtres) → hauteur calée sur le contenu, sinon grand vide vert. */ .arch-hero--game { min-height: 0; } /* Mobile, une info par tuile : contenu centré dans la tuile (Félix, 22/09), horizontalement et verticalement. */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__card { text-align: center; } .arch-spot__grid .arch-spot__list, .arch-spot__grid .arch-spot__news, .arch-spot__grid .arch-spot__leaders { justify-content: center; } .arch-spot__grid .arch-spot__leaders li, .arch-spot__grid .arch-spot__list li, .arch-spot__grid .arch-spot__news li { align-items: center; justify-content: center; } .arch-spot__grid .arch-spot__leader-row { align-items: center; } .arch-spot__grid .arch-spot__player { justify-content: center; } .arch-spot__grid .arch-spot__who { align-items: center; } } /* Recherche en cours (?q=) : haut de page compact, pour voir les résultats sans défiler (Félix, 22/09). La photo reste en fond, bandeau plus bas. */ .arch-hero--compact { min-height: 0; } .arch-hero--compact .arch-hero__head { padding-top: 72px; padding-bottom: 16px; } @media (min-width: 900px) { .arch-hero--compact .arch-hero__head { padding-top: 28px; padding-bottom: 28px; } } /* Mobile, un seul joueur par tuile : TOUTE la tuile est cliquable (Félix, 22/09). Le lien du joueur visible s'étend sur la tuile via un ::after ; les autres lignes sont masquées (display:none), donc sans zone. */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__card { position: relative; } .arch-spot__grid .arch-spot__player::after { content: ""; position: absolute; inset: 0; z-index: 1; } .arch-spot__grid .arch-spot__player:focus-visible { outline: none; } .arch-spot__grid .arch-spot__card:focus-within { outline: 2px solid var(--teal, #1C3D34); outline-offset: 2px; } .arch-spot__grid .arch-spot__card:active { background: #F7F1E6; } } /* Surtitre du haut de page (pages de poste : « Annuaire des joueurs », lien vers l'annuaire) au-dessus d'un titre raccourci. */ .arch-hero .arch-hero__eyebrow { margin: 0 0 -4px; font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; } .arch-hero .arch-hero__eyebrow a { text-decoration: none; } .arch-hero .arch-hero__eyebrow a span { color: var(--vanilla, #F2E5D2); } .arch-hero .arch-hero__eyebrow a:hover span, .arch-hero .arch-hero__eyebrow a:focus-visible span { text-decoration: underline; } /* Surtitre illisible sur la photo en mobile (Félix, 22/09) : étiquette sur fond teal plein, texte vanilla (charte teal/vanilla/sauge, 08/10). */ .arch-hero .arch-hero__eyebrow a { display: inline-block; padding: 4px 8px; background: var(--teal, #1C3D34); border: 1px solid rgba(171, 200, 162, 0.45); } .arch-hero .arch-hero__eyebrow { margin-bottom: 2px; font-size: 11px; } /* Pages de poste : chiffres du poste = composant maison .comp-hero-infos (itsrugby-common.css, fiche joueur), repris tel quel (Félix, 22/09). */ .arch-hero .arch-hero__infos { margin-top: 0; } /* Lisibilité sur la photo (Félix, 22/09 : « pas lisible », valeurs qui paraissaient blanches) : intitulés vanilla pleins (plus d'opacité 50 % ; plus de vert vif, 08/10), valeurs vanilla en gras et plus grandes. Structure du composant gardée. */ .arch-hero .arch-hero__infos { gap: 10px 32px; } /* Intitulé sur deux lignes (« 7 prochains jours » en mobile) : valeurs calées en bas pour rester alignées entre elles (Félix, 14/10). */ .arch-hero .arch-hero__infos .hero-info-item { gap: 4px; justify-content: space-between; } .arch-hero .arch-hero__infos .hero-info-label { font-size: 11px; letter-spacing: 0.06em; color: var(--vanilla, #F2E5D2); } .arch-hero .arch-hero__infos .hero-info-value { font-size: 22px; font-weight: 900; line-height: 1.1; color: var(--vanilla, #F2E5D2); } @media (max-width: 767px) { .arch-hero .arch-hero__infos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .arch-hero .arch-hero__infos .hero-info-label { font-size: 9px; letter-spacing: 0.03em; } .arch-hero .arch-hero__infos .hero-info-value { font-size: 18px; } } /* Règle maison (Félix, 22/09) : vanilla sur teal, teal sur vanilla. Surtitre et intitulés des chiffres en vanilla (plus de vert vif en texte ici). */ .arch-hero .arch-hero__eyebrow a { border-color: rgba(242, 229, 210, 0.45); } .arch-hero .arch-hero__eyebrow a span, .arch-hero .arch-hero__infos .hero-info-label { color: var(--vanilla, #F2E5D2); } /* Haut de page compact en mobile : le texte est posé sur la photo dès le haut, le voile était trop transparent (Félix, 22/09). Voile plus dense : ~0,85 sous le titre, 0,9 dessous (vanilla sur ce fond, même sur un mur blanc : > 4,5:1). */ @media (max-width: 899px) { .arch-hero--compact .arch-hero__head { background: linear-gradient(to bottom, rgba(28, 61, 52, 0.45) 0, rgba(28, 61, 52, 0.85) 64px, rgba(28, 61, 52, 0.9) 100%); } } /* « Trier par » : libellé masqué à l'œil (Félix, 22/09 : le menu se suffit), gardé pour les lecteurs d'écran (RGAA : champ étiqueté). */ body.its-hero-v2 .archive-sort-bar .sort-group label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Hauteur STANDARD des hauts de page d'archives (Félix, 22/09) : même hauteur minimale partout (Matchs faisait 175 px, les pages de poste 345 px). Ordinateur : contenu centré verticalement ; mobile : en bas, sur la photo. Les pages plus chargées dépassent un peu, c'est voulu. */ .arch-hero--compact { min-height: 300px; } @media (min-width: 900px) { .arch-hero--compact { display: flex; flex-direction: column; justify-content: center; min-height: 320px; } } /* App (Félix, 22/09 : « pas de retour ni suivant ») : le haut de page démarre sous la bande teal FIXE de l'encoche (its-app-shell.css, html.is-app::before, z-index 9995). Boutons « ‹ » / « Suivant » posés sous l'encoche, texte décalé d'autant (même principe que le haut d'article). */ html.is-app .arch-hero__nav { top: calc(env(safe-area-inset-top, 0px) + 8px); } html.is-app .arch-hero--compact .arch-hero__head { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); } html.is-app .arch-hero--compact { min-height: calc(env(safe-area-inset-top, 0px) + 300px); } /* ════════════════════════════════════════════════════════════════ APP, accueil de l'annuaire (body.its-dir-home : ni poste, ni recherche, ni filtre) : pas de liste A → Z de 71 000 fiches (Félix, 22/09) ; les postes deviennent une grille de gros boutons « Parcourir par poste ». Pages de poste et recherche : liste conservée (c'est la réponse). Le site web n'est pas concerné. ════════════════════════════════════════════════════════════════ */ .arch-postes__title { display: none; } html.is-app body.its-dir-home .archive-sort-bar, html.is-app body.its-dir-home .archive-cards-grid, html.is-app body.its-dir-home .archive-pagination, html.is-app body.its-dir-home .arch-list-title { display: none; } html.is-app body.its-dir-home .arch-postes__title { display: flex; } html.is-app body.its-dir-home .arch-postes .arch-hero__rail { margin-right: 0; } html.is-app body.its-dir-home .arch-postes .arch-hero__rail::after, html.is-app body.its-dir-home .arch-postes .arch-hero__more { display: none; } /* Flex et non grid : une grille fixe a trois colonnes laissait des cases vides sur la derniere ligne des que le nombre de pastilles n'etait pas un multiple de trois (Felix, 23/09). En flex, les tuiles restantes s'etirent pour remplir la ligne, quel que soit leur nombre. */ html.is-app body.its-dir-home .arch-postes .arch-hero__track { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding-right: 0; /* Grille de l'app : pas de fleches, donc pas de place a leur reserver. */ padding-left: 0; } html.is-app body.its-dir-home .arch-postes .arch-hero__track > .arch-hero__chip { flex: 1 1 calc(33.333% - 6px); min-width: calc(33.333% - 6px); } /* « Tous » n'a pas de sens ici : on est déjà sur tous les joueurs. */ html.is-app body.its-dir-home .arch-postes .arch-hero__chip[aria-current="page"] { display: none; } html.is-app body.its-dir-home .arch-postes .arch-hero__chip { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px; text-align: center; white-space: normal; line-height: 1.2; border-top: 3px solid var(--sage, #ABC8A2); } /* Tuiles mobiles « Les joueurs du moment » : club trop petit à 11 px (Félix, 22/09). Nom 15 px, club 13 px. */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__name { font-size: 15px; } .arch-spot__grid .arch-spot__club { font-size: 13px; } } /* Tuiles mobiles : les 3 noms sur la MÊME ligne (Félix, 22/09). Contenu calé en haut (plus centré verticalement) et, pour le top marqueur, le nombre d'essais passe SOUS le joueur. */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__list, .arch-spot__grid .arch-spot__news, .arch-spot__grid .arch-spot__leaders, .arch-spot__grid .arch-spot__leaders li { justify-content: flex-start; } .arch-spot__grid .arch-spot__leader-row { flex-direction: column; } .arch-spot__grid .arch-spot__leader-row .arch-spot__count strong { font-size: 18px; } } /* Top marqueur, mobile : « 5 essais » sur la ligne du club (« Pau · 5 essais ») au lieu d'une ligne à lui (Félix, 22/09 : prenait de la hauteur). La mention n'existe dans la ligne du club qu'en mobile. */ .arch-spot__club-stat { display: none; } @media (max-width: 767px) { .arch-spot__club-stat { display: inline; font-weight: 700; color: var(--teal, #1C3D34); } .arch-spot__grid .arch-spot__leader-row .arch-spot__count { display: none; } } /* Mobile : pas de hauteur minimale (Félix, 22/09 : « ce trou » entre les boutons et le titre). Le titre suit directement les boutons ; la hauteur standard ne vaut que sur ordinateur. */ @media (max-width: 899px) { .arch-hero--compact, html.is-app .arch-hero--compact { min-height: 0; } .arch-hero--compact .arch-hero__head { padding-top: 58px; } } /* Tuiles mobiles : prénom et nom sur deux lignes dans les trois tuiles, et titres réservés sur deux lignes (« Top marqueur Top 14 » passe à la ligne) : les noms s'alignent (Félix, 22/09). */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__eyebrow { min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .arch-spot__grid .arch-spot__fname, .arch-spot__grid .arch-spot__lname { display: block; } .arch-spot__grid .arch-spot__name { display: block; -webkit-line-clamp: unset; } .arch-spot__grid .arch-spot__lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* « Parcourir par poste » s'affichait partout : la règle générique .section-title (display:flex) l'emportait. Masqué avec une spécificité plus forte ; visible seulement dans l'app, accueil de l'annuaire. */ .arch-postes h2.arch-postes__title { display: none; } html.is-app body.its-dir-home .arch-postes h2.arch-postes__title { display: flex; } /* App, accueil de l'annuaire : trou de ~100 px entre la grille des postes et « Explorer aussi » (Félix, 22/09) : marge de la grille + padding bas du conteneur (prévu pour la liste, masquée ici) + marge haute du bloc. */ html.is-app body.its-dir-home .arch-postes { margin-bottom: 0; } html.is-app body.its-dir-home .container--page-body { padding-bottom: 8px; } html.is-app body.its-dir-home .itsr-related-nav { margin-top: 12px; } /* Tuiles mobiles des ÉQUIPES : le nom complet (« Lyon Olympique Universitaire ») débordait des tuiles (Félix, 22/09). En mobile : nom court seul (+ « 14 pts » pour le leader) ; nom complet sur ordinateur. */ @media (max-width: 767px) { .arch-spot__grid .arch-spot__full { display: none; } .arch-spot__grid .arch-spot__name { overflow-wrap: anywhere; } } /* Logos de clubs (import FFR du 22/09) : WP Image Optimizer emballe l'image dans un , qui reste en display:inline → l'image tombait à 0×0 (piège déjà rencontré, mémoire wpio_webp_manual_img_bypass). */ .archive-card-logo picture, .arch-spot__avatar picture, .arch-hero__infos picture { display: block; width: 100%; height: 100%; } /* Écussons : entiers dans leur cadre (Félix, 22/09 : « logo coupé »). Les vignettes d'archive recadrent (object-fit:cover), ce qui rogne les blasons. Uniquement sur les équipes et les compétitions : ailleurs ce sont des photos, à recadrer. */ body.post-type-archive-team .archive-card-logo, body.post-type-archive-team .arch-spot__avatar, body.post-type-archive-competition .archive-card-logo, body.post-type-archive-competition .arch-spot__avatar { background: #FFFFFF; } /* 07/10 : idem pour les logos de compétition (Félix : « Angleterre D2 » rognée en « UGB » — logotypes larges recadrés en carré). */ body.post-type-archive-team .archive-card-logo img, body.post-type-archive-team .arch-spot__avatar img, body.post-type-archive-competition .archive-card-logo img, body.post-type-archive-competition .arch-spot__avatar img { object-fit: contain; padding: 3px; box-sizing: border-box; } /* Tuiles mobiles des ÉQUIPES et COMPÉTITIONS : l'écusson reste visible, centré au-dessus du nom (Félix, 22/09). Sur les joueurs, l'avatar reste masqué en mobile : ce sont des photos, peu lisibles en 30 px. */ @media (max-width: 767px) { body.post-type-archive-team .arch-spot__grid .arch-spot__avatar, body.post-type-archive-competition .arch-spot__grid .arch-spot__avatar { display: flex; flex: 0 0 34px; width: 34px; height: 34px; margin: 0 auto 4px; background: #FFFFFF; } body.post-type-archive-team .arch-spot__grid .arch-spot__avatar img, body.post-type-archive-competition .arch-spot__grid .arch-spot__avatar img { object-fit: contain; padding: 2px; box-sizing: border-box; } body.post-type-archive-team .arch-spot__grid .arch-spot__player, body.post-type-archive-competition .arch-spot__grid .arch-spot__player { flex-direction: column; gap: 0; } } /* Une seule ligne de filtres sur les ÉQUIPES (Félix, 22/09) : pastilles de type + nationalité. Le panneau de filtres et son bouton disparaissent : il ne restait que la nationalité, désormais posée ici. */ .arch-postes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .arch-postes .arch-hero__rail { flex: 1 1 320px; min-width: 0; } .arch-postes__filter { flex: 0 0 auto; margin: 0; } .arch-postes__filter select { height: 38px; padding: 0 28px 0 10px; border: 1px solid rgba(28, 61, 52, 0.25); background: #FFFFFF; color: var(--teal, #1C3D34); font: inherit; font-size: 13px; font-weight: 700; border-radius: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231C3D34'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* Une seule ligne de filtres, sur les équipes comme sur les compétitions : les pastilles plus un menu au bout. L'ancien panneau (trois gros sélecteurs et son bouton) faisait double emploi (Félix, 22 et 23/09). */ /* L'ancien panneau (gros selecteurs) est masque, mais PAS le bouton de la barre de recherche : c'est lui qui ouvre le nouveau panneau, au meme endroit sur les quatre annuaires (Felix, 23/09). */ body.its-hero-v2.post-type-archive-team main .archive-search, body.its-hero-v2.post-type-archive-competition main .archive-search, body.its-hero-v2.post-type-archive-player main .archive-search { display: none; } /* Plusieurs menus (joueurs : poids, taille, nationalité, âge) : ils prennent leur propre ligne, sous les pastilles, au lieu de se tasser à leur droite (Félix, 23/09). */ .arch-postes__filter--multi { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 0 100%; } .arch-postes__filter--multi select { flex: 1 1 160px; min-width: 0; } @media (max-width: 767px) { .arch-postes__filter { width: 100%; } .arch-postes__filter select { width: 100%; } } /* Bloc « du moment » : une ou deux cartes seulement (rugby à XIII, jeunes) ne doivent pas laisser deux colonnes vides (Félix, 22/09). */ @media (min-width: 768px) { .arch-spot__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } /* App, grille « Parcourir par type » : le menu des pays prend le format des tuiles (même hauteur, même filet vert) au lieu de flotter à côté (Félix, 22/09). */ html.is-app body.its-dir-home .arch-postes { display: block; } html.is-app body.its-dir-home .arch-postes__filter { width: 100%; margin-top: 8px; } html.is-app body.its-dir-home .arch-postes__filter select { width: 100%; min-height: 56px; padding: 8px 28px 8px 12px; text-align: center; text-align-last: center; font-size: 14px; border: 1px solid rgba(28, 61, 52, 0.25); border-top: 3px solid var(--sage, #ABC8A2); } /* Une seule carte (cumul de filtres étroit) : elle ne doit pas s'étirer sur toute la largeur (Félix, 22/09). */ @media (min-width: 768px) { .arch-spot__grid { justify-content: start; } .arch-spot__card { max-width: 520px; } } /* Carte sans contenu : on garde les trois colonnes d'un périmètre à l'autre, les trous se remplissent au fil de la collecte (Félix, 23/09). */ .arch-spot__card--empty { justify-content: flex-start; } .arch-spot__card--empty .arch-spot__eyebrow { opacity: .55; } .arch-spot__waiting { margin: 0; padding: 18px 0; color: var(--muted, #6b7280); font-size: .9rem; } /* Nom d'équipe : version courte sur les tuiles étroites (Félix, 23/09). */ .arch-spot__name-short { display: none; } @media (max-width: 767px) { .arch-spot__name-long { display: none; } .arch-spot__name-short { display: inline; } } /* Les trois cartes « du moment » occupent toute la hauteur de leur rangée : la carte « Dans l'actu », qui compte trois entrées face à cinq, s'arrêtait plus haut que ses voisines (Félix, 23/09). Les lignes s'y répartissent ensuite d'elles-mêmes (flex + space-between, plus haut dans ce fichier). */ .arch-spot__grid > .arch-spot__card { height: 100%; } /* Lien d'action du haut de page (« Voir la carte des matchs ») : discret, sous les chiffres et au-dessus de la recherche (Félix, 23/09). */ .arch-hero__action { margin: 0 0 12px; } .arch-hero__action a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.45); color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 700; transition: background .15s, border-color .15s; } .arch-hero__action a:hover, .arch-hero__action a:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; } .arch-hero--nophoto .arch-hero__action a { border-color: rgba(255, 255, 255, 0.5); } /* Flèche « précédent » des rangées : même bouton, retourné et placé à gauche. Elle n'apparaît que si la rangée a déjà défilé (Félix, 23/09). */ .arch-hero__more--prev { right: auto !important; left: 12px; transform: scaleX(-1); } .arch-postes .arch-hero__rail, .arch-hero .arch-hero__rail { position: relative; } /* Au bout de la rangée, la flèche reste en place mais s'éteint : la faire disparaître décalait les pastilles (Félix, 23/09). */ .arch-hero__more[disabled] { opacity: .3; cursor: default; pointer-events: none; } /* La rangée réserve la place des deux flèches : à gauche, la première pastille passait dessous (Félix, 23/09). Le rail est déjà en position relative. */ .arch-hero__track { padding-left: 56px; } .arch-hero__track > :first-child { margin-left: 0; } /* ══ Panneau de filtres des annuaires (23/09) ══════════════════════════════ Même composant que /matchs/ : bouton + feuille. Les sections passent en colonnes sur grand écran pour tenir sans défilement (Félix, 23/09). */ .arch-filters { margin: 0; } .arch-filters__open { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid rgba(28, 61, 52, 0.25); background: #FFFFFF; color: var(--teal, #1C3D34); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .arch-filters__open:hover, .arch-filters__open:focus-visible { border-color: var(--teal, #1C3D34); } .arch-filters__open.is-active { border-color: var(--teal, #1C3D34); border-left-width: 3px; } .arch-filters__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0; background: var(--teal, #1C3D34); color: #FFFFFF; font-size: 11px; } /* Pied du panneau : effacer à gauche, valider à droite. */ .its-sheet__foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border, rgba(28, 61, 52, 0.12)); background: #FFFFFF; } .its-sheet__reset { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 16px; height: 42px; border: 1px solid rgba(28, 61, 52, 0.25); color: var(--teal, #1C3D34); text-decoration: none; font-weight: 700; font-size: 13px; } .its-sheet__submit { flex: 1 1 auto; height: 42px; border: 0; background: var(--teal, #1C3D34); color: #FFFFFF; font: inherit; font-weight: 800; font-size: 13px; text-transform:none; letter-spacing:0; cursor: pointer; } .its-sheet__submit:hover { background: var(--teal-dk, #172713); } /* Sur grand écran, les sections se répartissent en colonnes : le panneau des joueurs tenait sinon sur deux écrans de haut. */ /* Sections cote a cote sur grand ecran. En colonnes CSS (column-count), le contenu etait decoupe en bandes etroites et chaque pastille passait sur sa propre ligne : c'etait pire (Felix, 23/09). Une grille garde chaque section entiere, avec ses pastilles qui s'enroulent normalement. */ /* Le panneau fait 560 px par defaut : trop etroit pour deux colonnes. Celui qui porte une grille s'elargit (Felix, 23/09). */ @media (min-width: 1024px) { .its-sheet--large .its-sheet__panel { width: min(960px, calc(100vw - 48px)); } .its-sheet__body--cols, .its-sheet__view--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; } .its-sheet__sec { padding: 10px 0; } } @media (min-width: 1400px) { .its-sheet--large .its-sheet__panel { width: min(1240px, calc(100vw - 48px)); } .its-sheet__body--cols, .its-sheet__view--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Pastilles un peu plus serrees dans le panneau : moins de defilement. */ .its-sheet__body .its-chip { padding: 7px 10px; font-size: 12.5px; } .its-sheet__body .its-sheet__sec { padding: 10px 0; } /* Titre du panneau : la variable ne se résolvait pas dans le , promu hors du flux, et le titre retombait sur le noir du navigateur (Félix, 23/09, mesuré à #000000). Couleur posée en dur, avec le reste de l'en-tête. */ dialog.its-sheet .its-sheet__title { color: #1C3D34; } dialog.its-sheet .its-sheet__close, dialog.its-sheet .its-sheet__back { color: #1C3D34; } dialog.its-sheet .its-sheet__legend { color: #6B6B6B; } /* Grille des pays : plus dense, pour en voir davantage sans défiler (Félix, 23/09). Les pastilles gardent la même hauteur de frappe, seule la largeur minimale et le corps du texte diminuent. */ dialog.its-sheet .its-chips--grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 5px; } dialog.its-sheet .its-chips--grid .its-chip { padding: 6px 6px; font-size: 11.5px; line-height: 1.2; } dialog.its-sheet .its-chips .its-chip { font-size: 12px; } /* Pastille « pays » avec drapeau : l'image remplace le nom, qui reste en infobulle et en texte alternatif (Félix, 23/09). Beaucoup plus de pays par ligne, et un drapeau se repère plus vite qu'un mot. */ dialog.its-sheet .its-chip--flag > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } dialog.its-sheet .its-chip--flag { justify-content: center; padding: 7px 8px; } dialog.its-sheet .its-chip__flag { display: block; width: 28px; height: 20px; object-fit: cover; border: 1px solid rgba(28, 61, 52, 0.18); } dialog.its-sheet .its-chips--grid:has(.its-chip--flag) { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); } /* Feuille mobile : même hauteur d'un annuaire à l'autre. Celle des joueurs s'arrêtait à la hauteur de son contenu et laissait voir la page au-dessus, là où celle des matchs monte presque en plein écran (Félix, 23/09). */ @media (max-width: 1023px) { dialog.its-sheet--large .its-sheet__panel { height: 92vh; max-height: 92vh; } dialog.its-sheet--large .its-sheet__body { flex: 1 1 auto; overflow-y: auto; } } /* ── Panneau de filtres dans l'app ───────────────────────────────────────── En modale, le est peint dans la couche supérieure du navigateur : il couvre la barre d'onglets sans avoir besoin d'un z-index. Mais si showModal() manque (vieille webview), on retombe sur un dialog ordinaire, que la barre d'onglets (z-index 9990) recouvrirait. D'où le z-index et le masquage de la barre pendant l'ouverture (Félix, 23/09). */ dialog.its-sheet { z-index: 9999; } body.its-sheet-open .its-app-tabbar { display: none; } /* Le pied garde ses distances avec l'indicateur d'accueil iOS et la barre flottante Android. */ html.is-app dialog.its-sheet .its-sheet__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } /* Le corps du panneau défile au doigt sans entraîner la page derrière. */ dialog.its-sheet .its-sheet__body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Pastilles du panneau : couleurs du module .its-pastille (repli en dur inclus). */ dialog.its-sheet .its-sheet__submit { background: #1C3D34; color: #FFFFFF; } dialog.its-sheet .its-sheet__reset { color: #1C3D34; border-color: #C4C4C4; } dialog.its-sheet .its-sheet__panel { background: #FFFFFF; color: #1C3D34; } /* Bouton de filtres seul dans le haut de page (/matchs/, qui n'a pas de champ de recherche) : même gabarit que la barre des autres annuaires. */ .arch-hero__search--solo { display: flex; /* ⚠️ Marges à zéro : voir .arch-hero__rail--liens. Les 4 px de marge basse rendaient l'écart sous cette rangée différent de celui des pages à champ de recherche. */ margin: 0; } .arch-hero__search--solo .arch-hero__filters { /* Seul sur sa ligne, il la prend entiere : cale a gauche, il laissait un vide a droite qui le faisait passer pour un bouton mal place (Felix, 23/09). */ flex: 1 1 auto; justify-content: center; height: 46px; padding: 0 18px; } /* L'ancienne barre de filtres du corps de /matchs/ disparaît : le bouton est désormais en haut, comme partout (Félix, 23/09). */ body.its-hero-v2.post-type-archive-game .archive-search .search-row { display: none; } /* Pastilles sans drapeau dans la grille des pays (« Hémisphère Sud », « Sélections nationales ») : leur libellé débordait d'une case étroite. */ dialog.its-sheet .its-chips--grid:has(.its-chip--flag) .its-chip:not(.its-chip--flag):not(:first-child) { grid-column: span 2; } /* Genre et discipline : quatre cases etroites par ligne plutot qu'une grille calee sur la plus large. « Masculin / Feminin » et « XV / VII / XIII » tiennent chacun sur une ligne (Felix, 23/09). */ dialog.its-sheet .its-sheet__sec .its-chips--grid.its-chips--gap, dialog.its-sheet .its-sheet__sec .its-chips--grid:has(input[name="genre"]), dialog.its-sheet .its-sheet__sec .its-chips--grid:has(input[name="format"]), dialog.its-sheet .its-sheet__sec .its-chips--grid:has(input[name="niveau"]) { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); } /* Le rang des drapeaux se termine parfois par un vide : les pastilles sans drapeau reprennent la ligne suivante en pleine largeur plutot que de laisser un trou apres le dernier drapeau (Felix, 23/09). */ dialog.its-sheet .its-chips--grid:has(.its-chip--flag) .its-chip:not(.its-chip--flag):not(:first-child) { grid-column: 1 / -1; } /* Paire « carte » + « filtres » du haut de page (/matchs/) : empiles, les deux boutons n'avaient ni la meme largeur ni la meme hauteur, ce qui se voyait (Felix, 23/09). Ils forment desormais une paire : meme gabarit sur mobile, cote a cote des qu'il y a la place. */ .arch-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; } .arch-hero__actions .arch-hero__action, .arch-hero__actions .arch-hero__search--solo { flex: 1 1 220px; margin: 0; } .arch-hero__actions .arch-hero__action a, .arch-hero__actions .arch-hero__filters { box-sizing: border-box; width: 100%; height: 46px; justify-content: center; } /* Champ de recherche d'une section de filtres (pays, nationalite). */ .its-sheet__find { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 9px 12px; border: 1px solid #C4C4C4; background: #FFFFFF; color: #1C3D34; font: inherit; font-size: 14px; } .its-sheet__find::placeholder { color: #6B7B75; } .its-sheet__find:focus-visible { outline: 2px solid #1C3D34; outline-offset: 1px; } /* Page de recherche : le haut de page n'est qu'une barre de depart, les resultats sont le sujet. Il gardait la hauteur d'un haut de page d'annuaire (Felix, 23/09). */ .arch-hero--search .arch-hero__head { padding-top: 56px; padding-bottom: 12px; /* ⚠️ Voile en POURCENTAGES, pas en pixels. Celui de .arch-hero__head est calé sur un rembourrage haut de 190 px : il atteint 0,6 dès 120 px et 0,88 au bas. Sur la recherche, dont le rembourrage tombe à 56 px, la rampe se retrouvait tassée en haut du bloc et coupait la photo d'un trait net, le bas du haut de page virant au vert plat (remonté par Félix, 25/09). En pourcentages la rampe suit la hauteur réelle du bloc, quelle qu'elle soit. Contraste conservé là où il compte : >= 0,55 sous le titre (grand texte, 3:1) et >= 0,82 sous le texte courant (4,5:1). */ background: linear-gradient(to bottom, rgba(28, 61, 52, 0) 0, rgba(28, 61, 52, 0.55) 35%, rgba(28, 61, 52, 0.82) 70%, rgba(28, 61, 52, 0.88) 100%); } .arch-hero--search .arch-hero__title { font-size: clamp(22px, 5.5vw, 30px); margin-bottom: 6px; } .arch-hero--search .arch-hero__facts { margin-top: 10px; } @media (min-width: 900px) { .arch-hero--search .arch-hero__head { padding-top: 20px; padding-bottom: 18px; } } /* Titre de la recherche : le terme cherche, jamais coupe d'avec ses guillemets, et des lignes equilibrees plutot qu'un mot seul en bas. */ .arch-hero--search .arch-hero__title { text-wrap: balance; overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════════ Pastilles des cartes d'annuaire (25/09/2026). Les mêmes couleurs que les annuaires, mais en CLASSES : archive-player.php les posait en style="" inline, ce que la charte interdit. La page « Fins de contrat » les emploie, les annuaires peuvent les reprendre au passage. Feuille hors RUCSS et hors minification Rocket : un sélecteur neuf y est servi même aux pages dont le Used CSS est déjà calculé. ════════════════════════════════════════════════════════════════ */ .archive-card-badge--club { background: var(--vanilla, #F2E5D2); } .archive-card-badge--nat { background: var(--sage, #ABC8A2); color: var(--teal-dk, #0f2c25); } /* ════════════════════════════════════════════════════════════════ Menu déroulant à côté du bouton de filtres (25/09/2026). Employé par la page « Fins de contrat » pour ses saisons. Même hauteur et même dessin que le bouton voisin, pour qu'ils forment une paire. ════════════════════════════════════════════════════════════════ */ .arch-hero__search--duo { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .arch-hero__pick { display: flex; gap: 6px; align-items: stretch; } .arch-hero__pick select { font-family: inherit; font-size: 14px; font-weight: 700; color: var(--teal, #1C3D34); background: #FFFFFF; border: 0; padding: 0 12px; min-height: 44px; } .arch-hero__pick-go { font-family: inherit; font-size: 14px; font-weight: 700; color: var(--vanilla, #F2E5D2); background: transparent; border: 1px solid rgba(242, 229, 210, 0.45); padding: 0 14px; min-height: 44px; cursor: pointer; } .arch-hero__pick-go:hover, .arch-hero__pick-go:focus-visible { border-color: var(--vanilla, #F2E5D2); color: var(--vanilla, #F2E5D2); } /* ════════════════════════════════════════════════════════════════ Rangée de raccourcis du haut de page (25/09/2026) : « Fins de contrat », « Blessés », « Retraités », « Transferts ». Trois écarts assumés avec la rangée des postes, qui partage la pastille : 1. PAS DE CHEVRONS. Ils servent à dire qu'une rangée de quinze postes continue ; sur quatre entrées ils occupent plus de place qu'ils n'en font gagner, et au doigt on fait défiler sans bouton (Félix, 25/09). 2. Pastille DISCRÈTE, façon barre de recherche Google : le contour franc en faisait quatre boutons concurrents juste sous le champ, alors que ce sont des raccourcis secondaires. Fond à peine détaché, bordure effacée ; elle se révèle au survol et garde un contour net au clavier. 3. Elles gardent leur LARGEUR NATURELLE et se groupent à gauche, alignées sur le bord du champ de recherche. Sur grand écran elles passent à la ligne plutôt que de défiler ; sous 700 px la rangée défile au doigt. ════════════════════════════════════════════════════════════════ */ .arch-hero__rail--liens { /* ⚠️ AUCUNE marge haute. .arch-hero__inner est une colonne flex à gap 12 px : une marge ici s'AJOUTAIT à ce gap et la rangée retombait 24 px plus bas que le rythme du reste du haut de page. Et comme .arch-hero__search--solo portait en plus 4 px de marge basse, l'écart changeait d'une page à l'autre selon qu'elle a un champ de recherche ou un simple bouton Filtres (remonté par Félix, 25/09). Le gap du conteneur est la SEULE source de l'espacement vertical du haut de page : ne rien remettre ici. */ /* ⚠️ La rangée des postes déborde de 16 px à droite pour que son fondu morde le bord. Ici ce débordement décalait l'alignement : la dernière pastille ne tombait pas sur le bord du champ de recherche (Félix, 25/09). */ margin-right: 0; } .arch-hero__rail--liens .arch-hero__more { display: none; } /* ⚠️ Le fondu du bord droit aussi. Il annonce qu'une rangée continue ; posé par-dessus une rangée entière, il faisait disparaître la dernière pastille sous un dégradé vert (Félix, 25/09). Sans chevrons ni défilement caché, il n'a plus rien à annoncer. */ .arch-hero__rail--liens::after { display: none; } .arch-hero__rail--liens .arch-hero__track { /* ⚠️ JAMAIS de passage à la ligne (Félix, 25/09) : la rangée tient sur une seule ligne à toutes les largeurs. Sur téléphone, c'est la typographie qui cède, pas la mise en page (voir plus bas). */ flex-wrap: nowrap; gap: 8px; /* ⚠️ Les deux padding à zéro. Le track réserve 56 px à gauche et à droite pour les chevrons de la rangée des postes ; sans chevrons ici, ils décalaient la première pastille vers la droite et poussaient la dernière hors du cadre (Félix, 25/09). */ padding-right: 0; padding-left: 0; } /* Fond, bordure, survol et focus : module .its-pastilles--sombre (itsrugby-common.css). */ /* ⚠️ Les pastilles gardent leur largeur NATURELLE. Étirées à parts égales, leur texte se centrait dans une case large et laissait un vide à gauche, qui se lisait comme un décalage avec le champ de recherche au-dessus (Félix, 25/09). Groupées à gauche, elles s'alignent sur son bord. */ /* ⚠️ Seuil à 560 px et non 700 : sur une fenêtre de 600 px la répartition ne s'appliquait pas et les pastilles se groupaient au milieu. */ @media (min-width: 560px) { .arch-hero__rail--liens .arch-hero__track { overflow-x: auto; /* ⚠️ nowrap À PARTIR DE 560 px seulement : ici les pastilles sont étirées à parts égales, et une qui passe à la ligne occupe toute la largeur (Félix, 25/09). En dessous, elles gardent leur taille et le retour à la ligne est le bon comportement. */ flex-wrap: nowrap; } /* Toutes à la même largeur, réparties sur la ligne. Un premier essai avait été abandonné parce qu'il semblait creuser un vide à gauche : la cause était en fait le padding de 56 px du track, réservé au chevron des postes. Une fois celui-ci à zéro, l'égalité des largeurs donne une rangée régulière, du bord gauche au bord droit (Félix, 25/09). */ .arch-hero .arch-hero__rail--liens .arch-hero__chip { flex: 1 1 0; justify-content: center; text-align: center; } } /* Poste sans joueur : pastille aria-disabled du module. */ /* Téléphone : on resserre la pastille plutôt que de casser la rangée. Texte plus petit mais plus gras, donc toujours lisible, et les cinq entrées tiennent sur la largeur d'un iPhone (Félix, 25/09). */ @media (max-width: 559px) { .arch-hero .arch-hero__rail--liens .arch-hero__chip { padding: 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: -0.01em; } .arch-hero__rail--liens .arch-hero__track { gap: 6px; /* La rangée touche les deux bords, comme sur grand écran : sans ça elle s'arrêtait avant le bord et ne s'alignait plus sur le champ de recherche au-dessus (Félix, 25/09). ⚠️ Ce sont les PASTILLES qui s'étirent, plus l'écart : `space-between` laissait deux trous béants dès qu'il n'y avait que trois entrées. Le réglage est en fin de fichier (point 5), avec le pourquoi. */ } } /* Précision longue / courte d'une ligne de tuile (25/09/2026), sur le modèle de .arch-spot__eyebrow-long / -short. Sur mobile la tuile fait un tiers d'écran : « Bayonne → Racing 92 » y débordait, « → Racing 92 » suffit. */ .arch-spot__club-short { display: none; } @media (max-width: 767px) { .arch-spot__club-long { display: none; } .arch-spot__club-short { display: inline; } } /* ══ Rangée de postes : alignement et respiration (25/09/2026) ═════════════ Deux défauts signalés par Félix sur /mercato/, /fins-de-contrat/, /joueurs-retraites/ et /joueurs-blesses/. */ /* 1. La rangée n'était pas « dans la largeur de la page ». Le réservoir de 56 px posé à gauche pour la flèche « précédent » vaut sur mobile, où les deux flèches restent visibles (grisées) au-dessus des pastilles ; sur ordinateur elles sont masquées, et ce réservoir décalait la rangée de 56 px vers la droite : « Tous » ne tombait pas sous le compte ni sous les cartes. Le bloc @media (min-width:900px) plus haut posait déjà padding 0, mais la règle globale .arch-hero__track{padding-left:56px} passe après lui et le reprenait. On le repose donc ici, après elle. */ @media (min-width: 900px) { .arch-hero__track { padding-left: 0; padding-right: 0; } } /* 2. La pastille de filtre actif collait à la première carte : .its-fbar n'a aucune marge, elle en hérite d'ordinaire de son voisinage. Sur ces quatre pages elle est posée nue entre la rangée de postes et la liste. Même respiration que la rangée au-dessus (16 px). */ .container--page-body > .its-fbar { margin-bottom: 16px; } /* 3. Sur ordinateur, la rangée prend TOUTE la largeur (Félix, 25/09) : elle s'arrêtait aux deux tiers et laissait un vide à droite, sous les cartes. Les pastilles s'étirent au lieu de s'espacer : avec `space-between`, une rangée qui passe à la ligne aurait deux pastilles jetées aux deux bouts. En grandissant à parts égales elles gardent des écarts réguliers, et leur texte se recentre (elles ne sont pas des conteneurs flex). ⚠️ Desktop UNIQUEMENT : sous 900 px la rangée défile horizontalement, une pastille qui grandit n'y a pas de sens. */ @media (min-width: 900px) { .arch-postes .arch-hero__track > .arch-hero__chip { flex: 1 1 auto; text-align: center; justify-content: center; } } /* 4. Mobile : la pastille passait SOUS les flèches, puis le fondu qui devait la masquer délavait la pastille active en plein milieu — pire que le mal (Félix, 25/09). On sort donc les deux flèches de la zone qui défile : le rail devient une ligne [◀ | pastilles | ▶], plus rien ne passe dessous. Elles restent à leur place et grisées aux extrémités, jamais escamotées (décision du 23/09 : la rangée sautait quand elles disparaissaient). Le fondu de droite part avec : il n'a plus rien à masquer, et il délavait la dernière pastille de la même façon. Les 56 px réservés aux flèches dans la piste non plus : elles ont désormais leur propre place. ⚠️ Mobile seulement. Au-dessus de 900 px les flèches sont masquées et la rangée passe à la ligne ; l'accueil de l'app les masque aussi et a sa propre grille (html.is-app body.its-dir-home), intacte. */ @media (max-width: 899px) { .arch-postes .arch-hero__rail { display: flex; align-items: center; gap: 6px; /* Le débord de 16 px servait à laisser la rangée filer sous le bord de l'écran ; avec la flèche posée au bout, elle y serait tombée dedans. */ margin-right: 0; } .arch-postes .arch-hero__rail::after { display: none; } .arch-postes .arch-hero__track { order: 0; flex: 1 1 auto; min-width: 0; padding-left: 0; padding-right: 0; } /* Les deux boutons suivent la piste dans le balisage : `order` remet le « précédent » devant elle. */ .arch-postes .arch-hero__more { position: static; order: 1; flex: 0 0 32px; margin: 0; } .arch-postes .arch-hero__more--prev { order: -1; } } /* 5. Téléphone : les pastilles de raccourcis à la MÊME LARGEUR (Félix, 25/09), au lieu d'écarts qui s'étirent. `space-between` remplissait bien la ligne à cinq entrées, mais à trois il laissait deux trous énormes et les boutons semblaient jetés aux quatre coins du bandeau. En largeurs égales, la rangée est régulière à trois comme à quatre, sans rien changer aux libellés. Le premier essai (23/09) avait été écarté parce qu'il rendait « Fins de contrat » illisible : c'était avec CINQ entrées. Il n'y en a plus que quatre au maximum, et surtout `flex-basis: 0` ne rogne personne — un élément flex garde `min-width: auto`, donc il ne descend jamais sous la largeur de son texte. Les pastilles se rapprochent de l'égalité autant que la place le permet, la plus longue faisant le plancher. C'est exactement le réglage déjà en vigueur au-dessus de 560 px : les deux largeurs se comportent pareil. */ @media (max-width: 559px) { .arch-hero__rail--liens .arch-hero__track { justify-content: flex-start; } .arch-hero .arch-hero__rail--liens .arch-hero__chip { flex: 1 1 0; justify-content: center; text-align: center; } } /* Page courante : pastille aria-current du module, version sombre. */ /* ⚠️ Le formulaire porteur de la liste déroulante SORT DE LA MISE EN PAGE. hero-archive.php pose un
VIDE après le sélecteur, auquel le