/* Écrans étroits. * * Le site vient d'une maquette dessinée pour le bureau, convertie en HTML avec * tous ses styles en ligne. Une règle de feuille ne bat pas un style en ligne : * d'où les « !important » ci-dessous. Ils ne sont pas une facilité, ils sont le * seul levier disponible tant que le balisage porte ses styles. * * Deux seuils, et une raison pour chacun : * * ≤ 900 px — le site replie déjà son menu à cette largeur, donc on est au * doigt. Lisibilité, zones tapotables, formulaires : ce qui vaut * pour un téléphone vaut pour une tablette. * ≤ 720 px — la mise en page du bureau ne tient plus. Grilles, tableau de * classement, rangées du calendrier. * * Rien ne change au-dessus de 900 px : la maquette validée reste la maquette * validée. On adapte, on ne redessine pas. */ /* ------------------------------------------------------------ tout écran */ /* Le zoom automatique de Safari sur rotation déforme les tailles choisies. */ html { -webkit-text-size-adjust: 100%; } /* Un débordement horizontal est toujours un défaut, jamais une intention. */ html, body { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------- ≤ 900 px : au doigt */ @media (max-width: 900px) { /* 1 — Lisibilité ---------------------------------------------------------------- */ /* Les étiquettes en capitales espacées descendaient à 10 px : illisible au soleil, sur un téléphone tenu à bout de bras. Plancher à 12 px, et on resserre l'interlettrage pour regagner la place perdue. */ [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size:10px"], [style*="font-size:11px"] { font-size: 12px !important; letter-spacing: 0.1em !important; } /* Le texte courant monte à 16 px — mais le texte courant seulement. Relever toutes les tailles indistinctement gonflait les titres de cartes et les faisait déborder : le remède était pire que le mal. */ p[style*="font-size: 14px"], p[style*="font-size: 15px"], li[style*="font-size: 14px"], li[style*="font-size: 15px"] { font-size: 16px !important; } /* Sous 16 px, Safari zoome tout seul au premier appui dans un champ, et la page reste décalée ensuite. */ input, select, textarea { font-size: 16px !important; } h1, h2, h3 { text-wrap: balance; } h1, h2, [style*="font-size: clamp"] { overflow-wrap: break-word; } /* 2 — Zones tapotables ---------------------------------------------------------------- Un doigt fait sept à dix millimètres. Le bouton du menu était haut de douze pixels, les liens du pied de dix-sept. */ nav a, footer a, [data-filter-value], [data-tab-value], [data-menu] a { min-height: 44px; display: inline-flex; align-items: center; } [data-menu-bascule] { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 22px !important; } [data-filter-value], [data-tab-value] { padding-top: 12px !important; padding-bottom: 12px !important; } footer a { padding: 4px 0; } /* Les deux boutons de l'en-tête faisaient 34 px de haut, et côte à côte ils dépassaient de cinq pixels. */ header a[class^="scp"] { min-height: 44px !important; display: inline-flex !important; align-items: center; padding-left: 11px !important; padding-right: 11px !important; letter-spacing: 0.1em !important; white-space: nowrap; } /* Le logo est à gauche ; le direct et le menu vont au bord droit. Sans ça, le groupe se collait au logo et laissait un trou de cent pixels à droite — l'en-tête penchait d'un côté. */ header [style*="display: flex"][style*="gap: 10px"] { gap: 6px !important; margin-left: auto !important; } /* « Espace concurrent » et « Live » côte à côte ne tiennent pas dans ce qui reste de l'en-tête une fois le logo et le menu posés. Au doigt, l'en-tête garde le logo, le menu et le direct ; l'espace concurrent rejoint le menu déroulé, où il a plus de place et plus de sens. */ header a[href$="espace-concurrent"]:not([data-menu-concurrent]), header a[href$="espace-concurrent.html"]:not([data-menu-concurrent]) { display: none !important; } /* 3 — Le menu déroulé ---------------------------------------------------------------- Ouvert, la barre de navigation passe en colonne sur toute la largeur. Mais elle reste un élément de la rangée d'en-tête : elle se dépliait donc PAR-DESSUS le logo et les boutons. La rangée doit pouvoir passer à la ligne, et le menu descendre en dessous. */ header > div:has(> nav) { flex-wrap: wrap !important; } [data-menu][data-ouvert="1"] { /* Le menu prend sa propre ligne, sous le logo et les boutons. Sans `flex: 0 0 100%`, il se contentait de la place restante dans la rangée — cent vingt pixels — et se dépliait par-dessus le logo. */ order: 10; flex: 0 0 100% !important; width: 100% !important; gap: 2px !important; padding: 8px 0 16px !important; border-top: 1px solid rgba(159, 178, 198, 0.16); margin-top: 12px; } [data-menu][data-ouvert="1"] > a, [data-menu][data-ouvert="1"] > span { width: 100%; justify-content: flex-start; padding: 10px 2px !important; border-bottom: 1px solid rgba(159, 178, 198, 0.08) !important; } /* « Championnat » et son chevron forment un span : sans cette règle il restait centré au milieu de la colonne, seul de son espèce. */ [data-menu][data-ouvert="1"] > span > a { border: 0 !important; padding: 0 !important; } /* 4 — Ce qui dépasse à cause du biseau ---------------------------------------------------------------- `skewX(-14deg)` est la signature du dessin : chaque bloc penche, et son coin sort de quinze pixels environ. On ne redresse pas le biseau ; on lui donne la place qu'il réclame. */ section, header, footer { overflow-x: clip; } [style*="repeat(4"]:has([data-compte-a-rebours]) { padding-left: 9px !important; padding-right: 9px !important; } [style*="repeat(4"]:has([data-compte-a-rebours]) > * { padding: 10px 2px !important; border-left-width: 2px !important; } [data-compte-a-rebours] { font-size: clamp(20px, 6.5vw, 34px) !important; } /* Les quatre libellés — JOURS, HEURES, MIN, SEC — gardent le plancher de 12 px : c'est le rembourrage de la grille, corrigé plus haut, qui faisait déborder les cases, pas la taille du texte. On resserre seulement l'interlettrage. */ [style*="repeat(4"]:has([data-compte-a-rebours]) [style*="font-size: 11px"] { letter-spacing: 0.04em !important; } /* Un bouton biseauté pleine largeur : ses deux coins penchés sortaient du conteneur. Rentré de la valeur exacte du dépassement, il redevient affleurant. */ [style*="skewX(-14deg)"][style*="display: block"], [style*="skewX(-14deg)"][style*="width: 100%"] { margin-left: 9px !important; margin-right: 9px !important; } [data-filter-group], [data-tab-group] { flex-wrap: wrap !important; /* La dernière puce penchée dépasse du rang ; on lui laisse sa marge. */ padding-right: 9px !important; } a[class^="scp"], button { overflow-wrap: anywhere; } /* 5 — Le classement ---------------------------------------------------------------- Huit colonnes sur 390 px : les cellules se chevauchaient, le nom du pilote s'écrivait par-dessus celui de la team. Sur une tablette elles ne se chevauchent plus, mais « VICTORYLANE MOTORSPORT » tient dans cent pixels : c'est illisible autrement. On garde donc partout, jusqu'à 900 px, ce qu'on vient chercher — rang, pilote, points — et le reste s'ouvre au tapotement. Le seuil est celui du script qui construit le panneau : les deux doivent s'accorder, sinon la tablette affiche un tableau complet doublé d'un panneau. */ .ligne-classement { grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 12px !important; /* Le rembourrage à droite laisse sa place au chevron. */ padding: 12px 26px 12px 14px !important; } /* Team et manches : présentes dans le balisage, sorties de la vue. Le panneau de détail les recopie à l'ouverture. */ .ligne-classement > *:nth-child(n + 3):not(:last-child) { display: none !important; } .ligne-classement .place { font-size: 17px !important; } .ligne-classement [style*="width: 40px"][style*="height: 40px"] { width: 30px !important; height: 30px !important; } /* L'en-tête annonçait huit colonnes pour trois. */ .entete-classement { display: none !important; } /* Le panneau ouvert au tapotement. Il vit juste après la rangée, pas dedans : glissé parmi les cellules, il devenait le dernier enfant de la grille et la colonne des points disparaissait avec les manches. */ .detail-classement[hidden] { display: none !important; } .detail-classement { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 0; padding: 10px 14px 12px; background: rgb(9, 19, 35); border-top: 1px solid rgba(159, 178, 198, 0.16); font-size: 13px; color: rgb(159, 178, 198); } .detail-classement b { color: rgb(231, 237, 244); font-weight: 600; } .detail-classement span { white-space: nowrap; } /* On dit que la ligne s'ouvre. */ .ligne-classement[data-depliable] { position: relative; cursor: pointer; } .ligne-classement[data-depliable]::after { content: ""; position: absolute; right: 9px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-right: 1.5px solid rgba(159, 178, 198, 0.5); border-bottom: 1.5px solid rgba(159, 178, 198, 0.5); transform: rotate(45deg); transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ligne-classement[data-ouvert="1"]::after { transform: rotate(-135deg); } /* 6 — Formulaires ---------------------------------------------------------------- */ input, select, textarea { min-height: 46px; } textarea { min-height: 110px; } button[type="submit"], [data-step-suivant], [data-step-precedent] { min-height: 48px; } /* Les deux bascules « je m'inscris » / « j'ai déjà un compte ». */ [data-membre-mode] { min-height: 44px !important; } } /* --------------------------------- ≤ 720 px : la mise en page change */ @media (max-width: 720px) { /* 6 bis — Respirer ---------------------------------------------------------------- La maquette a été dessinée sur un écran large, où l'espace ne manque jamais. Ramenée à la main, elle se resserre d'un coup : tout passe en colonne, les sections se touchent, le texte arrive au bord. On ne change pas le dessin — on lui rend la place qu'il avait. */ /* Les marges latérales. Seize pixels, c'est moins que l'épaisseur d'un pouce posé sur le bord de l'écran. */ section[style*="padding: clamp"], footer[style*="padding: clamp"], section > div[style*="padding: clamp"] { padding-left: 20px !important; padding-right: 20px !important; } /* Le pas entre deux sections. Le dessin en prévoit 36 à 48 ; sur un écran large deux colonnes voisines suffisent à dire « ici commence autre chose ». En colonne unique, plus rien ne le dit : seul le vide le fait. */ section[style*="padding: clamp"] { padding-top: 52px !important; padding-bottom: 44px !important; } /* Entre le titre d'une section et ce qu'elle montre. */ section > div[style*="margin-bottom: 24px"], section > div > div[style*="margin-bottom: 24px"] { margin-bottom: 30px !important; } /* Le texte courant : une ligne serrée se lit mal sur un fond sombre. */ p, li { line-height: 1.62 !important; } /* « RÉSULTAT · 28 JUIN 2026 » tient sur une ligne au bureau. Dans une carte de 165 px, l'interlettrage large le coupe en deux et la date se retrouve seule à la ligne. On resserre les lettres plutôt que de réduire le corps : la ligne reste lisible et redevient entière. */ [data-cms-item] [style*="letter-spacing: 0.16em"], [data-cms-item] [style*="letter-spacing: 0.18em"] { letter-spacing: 0.07em !important; } /* Les filtres. Douze pastilles en biseau, chacune avec seize pixels de marge et un interlettrage de bureau : sur la page Pilotes elles occupaient huit cents pixels avant le premier visage. On resserre les lettres et les marges — il en tient deux fois plus par rangée — sans rien cacher et sans descendre sous la taille du doigt. */ [data-filter-group] { gap: 8px !important; } [data-filter-group] button[data-filter-value] { letter-spacing: 0.06em !important; padding-left: 12px !important; padding-right: 12px !important; min-height: 40px !important; } /* Une grille qui exige 320 ou 330 px par colonne ne rentre plus dans les 320 px utiles d'un petit téléphone : la colonne dépasse et le contenu sort du cadre. Une colonne, et elle prend ce qu'il y a. */ [style*="minmax(320px"], [style*="minmax(330px"] { grid-template-columns: minmax(0, 1fr) !important; } /* La barre « | » sépare deux mentions posées côte à côte. En colonne elles se suivent, et la barre reste seule en bout de ligne comme une coquille. Ce qui sépare deux lignes, c'est le retour à la ligne. */ [data-separateur] { display: none !important; } } @media (max-width: 720px) { /* 7 — Les grilles de collection : deux par rangée ---------------------------------------------------------------- Une carte de pilote occupait 448 px de haut pour 390 px de large : un pilote par écran, dix-neuf écrans pour voir le plateau. À deux par rangée, la page tient en sept. La règle ne vise que les conteneurs de collection, et n'a aucun effet sur ceux qui sont en flex — un conteneur flex ignore grid-template-columns. */ [data-cms-list] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } /* Le contenu d'une carte était calibré pour 330 px de large ; à deux par rangée il en reste 174 sur un téléphone courant. Tout doit y tenir. */ [data-cms-item], [data-cms-item] * { min-width: 0; } /* « SPA-FRANCORCHAMPS » ne se coupe nulle part : sans cette règle, le mot sort de la carte plutôt que de passer à la ligne. */ [data-cms-item] { overflow-wrap: anywhere; } [data-cms-item] [style*="font-size: 17px"], [data-cms-item] [style*="font-size: 18px"], [data-cms-item] [style*="font-size: 19px"], [data-cms-item] [style*="font-size: 20px"], [data-cms-item] [style*="font-size: 21px"], [data-cms-item] [style*="font-size: 22px"] { font-size: 15px !important; line-height: 1.24 !important; } /* Le numéro géant posé derrière le nom. */ [data-cms-item] [style*="font-size: clamp(40px"], [data-cms-item] [style*="font-size: clamp(44px"], [data-cms-item] [style*="font-size: clamp(48px"], [data-cms-item] [style*="font-size: clamp(52px"] { font-size: clamp(26px, 8vw, 38px) !important; } [data-cms-item] > [style*="padding: 16px 18px"], [data-cms-item] > [style*="padding: 18px"], [data-cms-item] > [style*="padding: 20px"] { padding: 14px 14px 16px !important; } /* Un élément posé en absolu ne se laisse pas contraindre par son parent. */ [data-cms-item] [style*="position: absolute"] { max-width: 100%; } /* 8 — Les rangées du calendrier ---------------------------------------------------------------- Cinq colonnes au bureau. Le badge « MANCHE 01 » y occupe 120 à 160 px ; à côté du nom du circuit sur un téléphone, il n'en avait que 52 et s'écrivait par-dessus « NOGARO ». Il passe donc au-dessus, en petit : une rangée de calendrier se lit de haut en bas, pas de gauche à droite, quand la largeur manque. */ .ligne-course { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; row-gap: 3px !important; padding: 14px 16px !important; } .ligne-course > * { grid-column: 1 / -1 !important; } /* Le badge garde son fond et son biseau, mais à sa taille d'étiquette. */ .ligne-course .rang { justify-self: start !important; font-size: 12px !important; padding: 5px 12px !important; margin-bottom: 6px; } .ligne-course .circuit { font-size: 21px !important; } /* 9 — Formulaires sur une colonne ---------------------------------------------------------------- */ form [style*="grid-template-columns"], [data-step-panneau] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------- ≤ 340 px */ @media (max-width: 340px) { /* Les très petits écrans — un iPhone SE de première génération — ne laissent pas la place à deux cartes portrait. Le seuil est volontairement bas : à 390 px, la largeur de tous les iPhone courants, deux par rangée tiennent. */ [data-cms-list] { grid-template-columns: minmax(0, 1fr) !important; } }