/* ══════════════════════════════════════════════════════════════════════════ SOCLE RESPONSIVE — SC HAZEBROUCK · saison 2026-2027 Trois paliers, un seul fichier, aucun outil a retoucher. Le compagnon sch-mobile.js mesure l'appareil et pose sur : · .t-phone smartphone (largeur < 720px, ou telephone couche) · .t-tablet tablette (720 → 1200px : iPad mini/10-11", Surface portrait) · .t-desk PC (> 1200px, ou Surface clavier-souris en paysage) plus, independamment du palier : · .t-touch pointeur grossier (doigt, stylet) → ergonomie tactile · .t-fine souris / trackpad · .t-short ecran couche et bas (telephone en paysage) Pourquoi des classes plutot que de simples media queries : un iPad portrait fait 820px de large — la meme largeur qu'une fenetre de navigateur sur PC, mais pas le meme doigt ni la meme distance de lecture. Le palier vient donc de la largeur ET du type de pointeur, ce que la CSS seule ne sait pas faire. Pas d'imbrication CSS native ici : les iPhone anciens du vestiaire ne la comprennent pas et jetteraient le bloc entier. Regle d'or : .t-desk ne recoit AUCUNE regle de mise en page de ce fichier. Le poste fixe garde exactement le rendu valide. ══════════════════════════════════════════════════════════════════════════ */ :root { --m-tab-h: 60px; /* hauteur de la barre d'onglets du bas */ --m-pad: 14px; /* gouttiere ecran */ --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-t: env(safe-area-inset-top, 0px); --m-safe-l: env(safe-area-inset-left, 0px); --m-safe-r: env(safe-area-inset-right, 0px); --m-gold: #C9A84C; --m-ink: #0A0B0D; --m-line: #26241F; } html.t-tablet { --m-tab-h: 52px; --m-pad: 22px; } html.t-phone.t-short { --m-tab-h: 46px; --m-pad: 16px; } /* ═══════════════════════ A · ERGONOMIE TACTILE ═══════════════════════ Vaut sur tout appareil au doigt, y compris une Surface en paysage large : c'est l'entree qui commande, pas la taille de l'ecran. */ html.t-touch { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.t-touch * { -webkit-tap-highlight-color: rgba(201,168,76,.18); } /* 16px mini sur tout champ saisissable : en dessous, iOS zoome de force au focus et l'utilisateur se retrouve perdu dans une page agrandie. */ html.t-touch:not(.t-desk) input, html.t-touch:not(.t-desk) select, html.t-touch:not(.t-desk) textarea { font-size: 16px !important; max-width: 100%; } html.t-touch:not(.t-desk) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.t-touch:not(.t-desk) select, html.t-touch:not(.t-desk) textarea { min-height: 44px; padding: 10px 12px; } /* [data-mt="1"] est pose par le JS sur les commandes reellement trop petites */ html.t-touch [data-mt="1"] { min-height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } html.t-touch [data-mt="1"].m-block { width: 100%; } /* Le survol n'existe pas au doigt : on neutralise les effets de levage qui, au tap, font « sauter » la carte sous le pouce. */ @media (hover: none) { html.t-touch .card:hover, html.t-touch .btn:hover, html.t-touch .mbtn:hover, html.t-touch .lbtn:hover, html.t-touch .fbtn:hover, html.t-touch .tab:hover, html.t-touch .tab-btn:hover, html.t-touch .lnk-home:hover { transform: none !important; } html.t-touch .card:active { transform: scale(.985); } } /* Barres d'onglets internes : glisse horizontale franche, pas de scrollbar. */ html.t-phone .tabs, html.t-phone .rb-nav-in, html.t-phone .weeks, html.t-tablet .tabs, html.t-tablet .rb-nav-in, html.t-tablet .weeks { overflow-x: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html.t-phone .tabs::-webkit-scrollbar, html.t-phone .rb-nav-in::-webkit-scrollbar, html.t-tablet .tabs::-webkit-scrollbar, html.t-tablet .rb-nav-in::-webkit-scrollbar { display: none; } html.t-phone .tab, html.t-phone .tab-btn, html.t-tablet .tab, html.t-tablet .tab-btn { scroll-snap-align: start; } /* Terrains, plateaux et canvas : le glisse doit dessiner, pas defiler la page. */ html.t-touch canvas#pitch, html.t-touch .compo-frame, html.t-touch .fm-pitch, html.t-touch .cr2-pitch, html.t-touch .live-pitch { touch-action: none; } /* ═════════════════ B · SOCLE COMMUN TELEPHONE + TABLETTE ═════════════════ */ html.t-phone, html.t-tablet { scroll-padding-bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 12px); } html.t-phone body, html.t-tablet body { overflow-x: hidden !important; /* la barre d'onglets ne doit jamais masquer la derniere ligne utile */ padding-bottom: calc(var(--m-tab-h) + var(--m-safe-b)) !important; overscroll-behavior-y: contain; } /* Modes immersifs (live match, vestiaire, plateau tactique) : pas de barre, donc pas de reserve en bas. */ html.t-phone body.m-immersive, html.t-tablet body.m-immersive { padding-bottom: 0 !important; } /* Filigranes/halos decoratifs : lourds a repeindre au scroll tactile. */ html.t-phone body::before { opacity: .022 !important; } /* Encoche et bords arrondis : on respire sur les cotes. */ html.t-phone .wrap, html.t-phone .content, html.t-phone .pane, html.t-phone .rb-wrap, html.t-phone .hdr-in, html.t-phone .tabs, html.t-phone .topbar-in, html.t-tablet .wrap, html.t-tablet .content, html.t-tablet .pane, html.t-tablet .rb-wrap, html.t-tablet .hdr-in, html.t-tablet .topbar-in { padding-left: max(var(--m-pad), var(--m-safe-l)) !important; padding-right: max(var(--m-pad), var(--m-safe-r)) !important; } html.t-phone .wrap, html.t-phone .content, html.t-phone .pane { max-width: 100% !important; } /* Plus une seule mesure en vh sur appareil mobile : la barre d'URL fausse tout. --m-vh est ecrit par sch-mobile.js (visualViewport). */ html.t-phone #gate, html.t-phone #google-auth-gate, html.t-phone #picker, html.t-phone #intro, html.t-tablet #gate, html.t-tablet #google-auth-gate, html.t-tablet #picker, html.t-tablet #intro { min-height: var(--m-vh, 100dvh) !important; height: auto !important; padding-top: max(24px, var(--m-safe-t)) !important; padding-bottom: calc(28px + var(--m-safe-b)) !important; } /* ═══════════════ C · MODALES ═══════════════ Telephone : feuille du bas, le pouce atteint les boutons. Tablette : boite centree, mais plafonnee et defilante. */ html.t-phone .modal-overlay, html.t-phone .ov, html.t-phone .sch-modal, html.t-phone .ls-mod, html.t-phone .live-sheet-ov, html.t-phone .overlay { padding: 0 !important; align-items: flex-end !important; } html.t-phone .modal-overlay > *, html.t-phone .ov > *, html.t-phone .sch-modal-box, html.t-phone .ls-mod-in, html.t-phone .live-sheet-ov > *, html.t-phone .overlay > .modal, html.t-phone .overlay > div { width: 100% !important; max-width: 100% !important; max-height: calc(var(--m-vh, 100dvh) - 24px) !important; overflow-y: auto !important; border-radius: 18px 18px 0 0 !important; padding-bottom: calc(16px + var(--m-safe-b)) !important; animation: mSheetUp .26s cubic-bezier(.16,1,.3,1) both; } html.t-tablet .modal-overlay > *, html.t-tablet .ov > *, html.t-tablet .sch-modal-box, html.t-tablet .ls-mod-in, html.t-tablet .overlay > div { max-width: min(94vw, 760px) !important; max-height: calc(var(--m-vh, 100dvh) - 56px) !important; overflow-y: auto !important; } @keyframes mSheetUp { from { transform: translateY(14%); opacity: .6 } to { transform: none; opacity: 1 } } /* Toasts : au-dessus de la barre d'onglets, jamais dessous. */ html.t-phone .toast, html.t-phone #toast, html.t-phone .sch-toast, html.t-tablet .toast, html.t-tablet #toast, html.t-tablet .sch-toast { bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 14px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: max-content; max-width: calc(100vw - 28px); } html.t-phone #google-auth-userbar, html.t-tablet #google-auth-userbar { bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 8px) !important; top: auto !important; left: 12px !important; right: auto !important; font-size: 9px !important; } /* ═════════════════ D · BARRE D'ONGLETS + FEUILLE « OUTILS » ═════════════════ */ #m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; display: none; align-items: stretch; height: calc(var(--m-tab-h) + var(--m-safe-b)); padding-bottom: var(--m-safe-b); background: rgba(10,11,13,.94); backdrop-filter: blur(14px) saturate(1.3); border-top: 1px solid #1E2027; font-family: 'Inter', system-ui, sans-serif; } #m-tabbar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent); } #m-tabbar a, #m-tabbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; color: #7E838B; text-decoration: none; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 2px 5px; -webkit-tap-highlight-color: transparent; } #m-tabbar svg { width: 21px; height: 21px; flex: none; } #m-tabbar a span, #m-tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #m-tabbar .m-on { color: var(--m-gold); } #m-tabbar .m-on::after { content: ''; position: absolute; top: 0; width: 26px; height: 2px; background: var(--m-gold); } #m-tabbar a:active, #m-tabbar button:active { background: rgba(201,168,76,.1); } html.t-phone #m-tabbar, html.t-tablet #m-tabbar { display: flex; } html.t-phone body.m-immersive #m-tabbar, html.t-tablet body.m-immersive #m-tabbar { display: none; } /* Tablette : meme barre, plus fine, libelle a cote de l'icone, centree — un raccourci entre outils ; la navigation propre a l'outil, elle, reste en place. */ html.t-tablet #m-tabbar { justify-content: center; } html.t-tablet #m-tabbar a, html.t-tablet #m-tabbar button { flex: 0 1 168px; flex-direction: row; gap: 8px; font-size: 10.5px; padding: 6px 14px; } html.t-tablet #m-tabbar svg { width: 18px; height: 18px; } /* Telephone couche : barre fine, icones seules. */ html.t-phone.t-short #m-tabbar { justify-content: center; } html.t-phone.t-short #m-tabbar a, html.t-phone.t-short #m-tabbar button { flex: 0 1 112px; } html.t-phone.t-short #m-tabbar a span, html.t-phone.t-short #m-tabbar button span { display: none; } html.t-phone.t-short #m-tabbar svg { width: 20px; height: 20px; } #m-sheet { position: fixed; inset: 0; z-index: 9600; display: none; background: rgba(4,5,7,.72); backdrop-filter: blur(5px); } #m-sheet.m-open { display: block; } #m-sheet .m-sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; background: #101215; border-top: 1px solid #23262C; border-radius: 18px 18px 0 0; padding: 10px 14px calc(18px + var(--m-safe-b)); animation: mSheetUp .28s cubic-bezier(.16,1,.3,1) both; } #m-sheet .m-grab { width: 42px; height: 4px; border-radius: 4px; background: #33373E; margin: 4px auto 12px; } #m-sheet .m-sheet-t { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--m-gold); margin: 6px 2px 10px; } #m-sheet .m-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #m-sheet .m-links a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; background: #16181C; border: 1px solid #23262C; border-left: 3px solid var(--m-gold); border-radius: 10px; color: #EDEDED; text-decoration: none; font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 15.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; } #m-sheet .m-links a.m-on { border-color: var(--m-gold); background: rgba(201,168,76,.1); color: var(--m-gold); } #m-sheet .m-links a svg { width: 18px; height: 18px; flex: none; color: var(--m-gold); } #m-sheet .m-install { display: none; width: 100%; min-height: 48px; margin-top: 12px; background: linear-gradient(180deg,#D8B75B,#C09B3C); color: #141310; border: none; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; } #m-sheet .m-hint { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: #7E838B; } #m-sheet .m-hint b { color: #C4C8CE; } #m-sheet .m-close { width: 100%; min-height: 46px; margin-top: 10px; background: none; border: 1px solid #2A2E35; border-radius: 10px; color: #8A9098; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; } html.t-tablet #m-sheet .m-sheet-in { padding-left: 22px; padding-right: 22px; } html.t-tablet #m-sheet .m-links { grid-template-columns: repeat(4, 1fr); } html.t-phone.t-short #m-sheet .m-links { grid-template-columns: repeat(3, 1fr); } html.t-phone.t-short #m-sheet .m-links a { font-size: 13.5px; min-height: 46px; } /* ═════════════════════════ E · TABLEAUX ═════════════════════════ Conteneur defilant pose par le JS autour de chaque , aux deux paliers : un tableau de 12 colonnes ne se comprime pas, il se fait glisser. */ html.t-phone .m-tw, html.t-tablet .m-tw { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(var(--m-pad) * -1); margin-right: calc(var(--m-pad) * -1); padding-left: var(--m-pad); padding-right: var(--m-pad); } html.t-phone .m-tw::-webkit-scrollbar, html.t-tablet .m-tw::-webkit-scrollbar { display: none; } html.t-phone .m-tw > table, html.t-tablet .m-tw > table { min-width: max-content; } /* 1re colonne figee : on garde le nom du joueur sous les yeux */ html.t-phone .m-tw > table > thead > tr > th:first-child, html.t-phone .m-tw > table > tbody > tr > td:first-child, html.t-tablet .m-tw > table > thead > tr > th:first-child, html.t-tablet .m-tw > table > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 2; background: #131211; box-shadow: 1px 0 0 rgba(255,255,255,.07); } /* Ombre de bord : indique qu'il reste du tableau a droite */ html.t-phone .m-tw.m-more::after, html.t-tablet .m-tw.m-more::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 22px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(6,7,9,.85)); } html.t-touch.t-tablet .m-tw td, html.t-touch.t-tablet .m-tw th { padding-top: 11px; padding-bottom: 11px; } /* Vue cartes (generee par le JS depuis le ) — TELEPHONE PORTRAIT SEUL. Sur tablette on garde un vrai tableau : la largeur suffit, et le staff compare des colonnes, il ne lit pas des fiches empilees. */ html.t-phone .m-cards, html.t-tablet .m-cards { display: none; flex-direction: column; gap: 8px; } .m-card { background: #16181C; border: 1px solid #23262C; border-left: 3px solid var(--m-gold); border-radius: 10px; padding: 11px 13px; } .m-card-h { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #F1EFEA; line-height: 1.1; margin-bottom: 8px; } .m-card-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.055); } .m-card-r > dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7E838B; flex: 0 0 auto; max-width: 48%; } .m-card-r > dd { margin: 0; font-size: 13.5px; color: #E8E3D8; text-align: right; min-width: 0; overflow-wrap: anywhere; } .m-card-r > dd:empty::after { content: '—'; color: #55595F; } .m-card-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .m-card-act > * { flex: 1 1 40%; min-height: 42px; justify-content: center; } @media (orientation: portrait) { html.t-phone .m-swap > .m-cards { display: flex; } html.t-phone .m-swap > .m-tw { display: none; } } /* ══════════════════ F · REPLIS PAR OUTIL — TELEPHONE ══════════════════ */ /* ── Portail (index) ─────────────────────────────────────────────────── */ html.t-phone .wrap { padding-top: 26px !important; } html.t-phone .lead { margin-left: 0 !important; } html.t-phone .wm { display: none !important; } html.t-phone h1 { font-size: clamp(2.5rem, 13vw, 4.2rem) !important; } html.t-phone .grid.effectif, html.t-phone .grid.ops, html.t-phone .grid.admin { grid-template-columns: 1fr !important; } html.t-phone .span2, html.t-phone .span3 { grid-column: auto !important; } html.t-phone .card { padding: 18px 18px 16px !important; gap: 9px !important; } html.t-phone .card .num { font-size: 62px !important; right: 12px; bottom: -8px; } html.t-phone .card .ttl, html.t-phone .card.span3 .ttl { font-size: 25px !important; } html.t-phone .card .desc, html.t-phone .card .open { max-width: calc(100% - 62px) !important; } html.t-phone .card.tbb { min-height: 210px !important; } html.t-phone .card.tbb .ttl { font-size: 26px !important; } html.t-phone .card.tbb .tbb-claim { font-size: 13px !important; white-space: normal !important; } html.t-phone .card.tbb .tbb-det { font-size: 11.5px !important; white-space: normal !important; } html.t-phone .card.tbb .tbb-word { font-size: 128px !important; } html.t-phone .meta { gap: 10px !important; margin-top: 18px !important; } html.t-phone #intro .skip { bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 12px) !important; right: 16px !important; } /* ── Presences : le rail lateral devient un bandeau d'onglets ────────── */ html.t-phone .shell { flex-direction: column !important; min-height: 0 !important; } html.t-phone .rail { position: static !important; width: 100% !important; height: auto !important; flex-direction: row !important; align-items: center; border-right: none !important; border-bottom: 1px solid var(--m-line); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 !important; } html.t-phone .rail-head { flex-direction: row !important; align-items: center; gap: 9px !important; padding: 9px 12px !important; border-bottom: none !important; border-right: 1px solid #1E1D1B; flex: 0 0 auto; } html.t-phone .rail-title { font-size: 19px !important; } html.t-phone .rail-season, html.t-phone .rail-donut-lab { display: none !important; } html.t-phone .rail .tabs { flex-direction: row !important; padding: 0 !important; flex: 1 1 auto; } html.t-phone .rail .tab-btn { min-height: 46px; padding: 10px 15px !important; white-space: nowrap; box-shadow: none !important; border-bottom: 2px solid transparent !important; } html.t-phone .rail .tab-btn.active { box-shadow: inset 0 -2px 0 var(--m-gold) !important; } html.t-phone .rail-foot { margin-top: 0 !important; flex-direction: row !important; gap: 10px !important; padding: 8px 12px !important; border-top: none !important; border-left: 1px solid #1E1D1B; flex: 0 0 auto; } html.t-phone .rail-donut { width: 40px !important; height: 40px !important; } html.t-phone .rail-donut span { width: 30px !important; height: 30px !important; font-size: 11px !important; } html.t-phone .topbar { position: static !important; padding: 14px var(--m-pad) 12px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } html.t-phone .topbar h1 { font-size: 26px !important; } html.t-phone .content { padding: 16px var(--m-pad) 24px !important; } html.t-phone .kpi-strip { grid-template-columns: 1fr 1fr !important; } /* Heatmap : cases plus hautes (cible au doigt), defilement horizontal */ html.t-phone .hm-card { border-radius: 12px !important; } html.t-phone .hm-head, html.t-phone .hm-colhead { padding: 12px var(--m-pad) 8px !important; } html.t-phone .hm-title { font-size: 22px !important; } html.t-phone .hm-body { padding: 0 var(--m-pad) 8px !important; } html.t-phone .hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } html.t-phone .hm-cell { height: 34px !important; } html.t-phone .hm-name { font-size: 12.5px !important; } html.t-phone .rm-groupes-grid { grid-template-columns: 1fr !important; } /* ── Medical / Matchs : entete compacte, onglets glissants ───────────── */ html.t-phone .hdr-in { padding: 10px var(--m-pad) 0 !important; gap: 11px !important; } html.t-phone .hdr-crest { width: 34px !important; height: 34px !important; } html.t-phone .hdr-h { font-size: 19px !important; } html.t-phone .hdr-sub, html.t-phone .hdr-kicker .hdr-chip { display: none !important; } html.t-phone .hdr-right .lnk-home b { display: none; } html.t-phone .tabs .tab, html.t-phone .rb-nav-in .tab-btn { min-height: 46px; } html.t-phone .rb-nav-in .tab-btn { min-width: 108px !important; padding: 9px 12px !important; } html.t-phone .rb-nav-in .tab-btn .d { display: none !important; } html.t-phone .rb-nav-in .tab-btn .n { width: 24px !important; height: 24px !important; font-size: 10px !important; } html.t-phone .toolbar { gap: 8px !important; margin-bottom: 14px !important; } html.t-phone .toolbar .btn { flex: 1 1 auto; justify-content: center; } html.t-phone .hm-main { grid-template-columns: minmax(0,1fr) !important; } html.t-phone .db-kpis { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; } html.t-phone .vest-aside { display: none !important; } /* Colonnes uniques : ces grilles supposent 2 a 4 colonnes. Le direct (body.compo-live-tab) a son propre modele « tout sur un ecran », plus bas. */ html.t-phone .dash-hero, html.t-phone .db-top, html.t-phone .db-mid, html.t-phone .db-mid2, html.t-phone .fm-board, html.t-phone .fm-stage, html.t-phone .cr2-verdict, html.t-phone .cr2-mapwrap, html.t-phone .poster-body, html.t-phone .jt-main, html.t-phone .ls-grid, html.t-phone .ls-top, html.t-phone body:not(.compo-live-tab) .compo-layout, html.t-phone body:not(.compo-live-tab) .jtl-main { grid-template-columns: minmax(0,1fr) !important; } /* ── Fiche joueur / Profils ──────────────────────────────────────────── */ html.t-phone .topbar-in { padding: 10px var(--m-pad) !important; gap: 10px !important; } html.t-phone .lockup img { height: 32px !important; } html.t-phone .tabs-wrap { position: static !important; top: auto !important; } html.t-phone .pane { padding: 20px var(--m-pad) 30px !important; gap: 26px !important; } html.t-phone .kpis, html.t-phone .g4, html.t-phone .g3, html.t-phone .g2 { grid-template-columns: 1fr 1fr !important; } /* ── Trombinoscope ───────────────────────────────────────────────────── */ html.t-phone .poste-section { margin-top: 26px !important; } /* ── Planning ────────────────────────────────────────────────────────── */ html.t-phone body.m-planning { padding: 14px var(--m-pad) !important; } html.t-phone .mois-nav { flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 16px !important; } html.t-phone .mois-nav > div { margin-left: 0 !important; flex-wrap: wrap; } html.t-phone #tab-entrainements .card, html.t-phone #tab-entrainements .card-champ, html.t-phone #tab-entrainements .card-coupe { min-height: 0 !important; height: auto !important; } html.t-phone #tab-entrainements .card-body { overflow: visible !important; } html.t-phone #tab-entrainements .card-date { font-size: 24px !important; } html.t-phone #tab-entrainements .week-title { font-size: 20px !important; } /* Une semaine sur 7 colonnes = 36px par jour : illisible au telephone. En portrait les journees passent sur deux colonnes — chaque carte porte deja son jour, la lecture calendaire reste claire. */ @media (orientation: portrait) { html.t-phone #tab-entrainements .week-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; gap: 10px !important; } } /* ── Mise en place seance ────────────────────────────────────────────── */ html.t-phone .tabs { justify-content: flex-start !important; } html.t-phone .classement-table { font-size: 12.5px; } html.t-phone .jour-layout { gap: 18px !important; } html.t-phone .jour-rail { position: static !important; top: auto !important; padding: 16px var(--m-pad) !important; } html.t-phone .rail-grid { grid-template-columns: 1fr 1fr !important; } html.t-phone .atl-row { grid-template-columns: 54px minmax(0,1fr) !important; gap: 12px !important; } html.t-phone .groupes-grid, html.t-phone .stats-grid { grid-template-columns: 1fr 1fr !important; } /* ═══════════ F-ter · POINTAGE DES PRESENCES AU DOIGT ═══════════ La ligne joueur de la modale de seance aligne 6 statuts de 34px : a 390px de large ca deborde, et on pointe a cote. La ligne passe sur deux etages, les statuts deviennent une rangee de boutons pleine largeur. */ html.t-phone .prow { flex-wrap: wrap; gap: 8px; padding: 10px var(--m-pad) 12px !important; } html.t-phone .prow-l { flex: 1 1 100%; } html.t-phone .pbtns { flex: 1 1 100%; gap: 6px !important; } html.t-phone .pb { flex: 1 1 0 !important; width: auto !important; height: 44px !important; font-size: 12.5px !important; } html.t-phone .pav { width: 38px !important; height: 38px !important; } html.t-phone .mall { padding: 10px var(--m-pad) !important; } html.t-phone .mall button { min-height: 40px; } html.t-phone .mhead { padding: 14px var(--m-pad) 12px !important; } html.t-phone .mfoot { padding: 12px var(--m-pad) calc(12px + var(--m-safe-b)) !important; gap: 10px !important; } html.t-phone .btn-save { min-height: 48px; font-size: 14px !important; } html.t-phone .cal-grid, html.t-phone .gcards, html.t-phone .mois-cards { grid-template-columns: 1fr 1fr !important; } html.t-phone .month-nav { gap: 8px !important; } html.t-phone .month-nav button { min-width: 44px; min-height: 44px; } /* ══════════════ F-bis · LE DIRECT (feuille de match en live) ══════════════ Leur modele tablette tient tout sur un ecran : terrain au centre, banc a gauche, affectations a droite, hauteur figee. A 390px de large ce partage laisserait 110px au terrain. En portrait telephone la page devient donc defilante et s'empile : terrain, banc en bandeau, affectations. */ @media (orientation: portrait) { html.t-phone body.compo-live-tab.compo-live-panel { height: auto !important; overflow: visible !important; } html.t-phone body.compo-live-tab .wrap { padding: 8px 12px 18px !important; } html.t-phone body.compo-live-tab .compo-layout { display: flex !important; flex-direction: column !important; gap: 10px !important; } html.t-phone body.compo-live-tab .compo-center { order: 1; overflow: visible !important; } html.t-phone body.compo-live-tab .compo-frame { width: min(100%, 62vh) !important; margin: 0 auto !important; } html.t-phone body.compo-live-tab .compo-col-left { order: 2; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; gap: 8px !important; } html.t-phone body.compo-live-tab .compo-col-left > * { flex: 0 0 84% !important; min-height: 190px; } html.t-phone body.compo-live-tab .compo-side-assign { order: 3; overflow: visible !important; } html.t-phone body.compo-live-tab .compo-side-assign #compo-assign { overflow: visible !important; } html.t-phone body.compo-live-tab .jtl-main { gap: 8px !important; } html.t-phone body.compo-live-tab .jtl-team .n { font-size: 15px !important; } html.t-phone body.compo-live-tab .jtl-logo { width: 34px !important; height: 34px !important; } html.t-phone body.compo-live-tab .jtl-score .v { font-size: 42px !important; } html.t-phone body.compo-live-tab .jtl-buteurs { display: none !important; } html.t-phone body.compo-live-tab .jtl-console { flex-wrap: wrap; justify-content: center; } /* Tablette portrait : terrain en haut, banc et affectations dessous en deux colonnes — la hauteur figee ne tient pas debout ici non plus. */ html.t-tablet body.compo-live-tab.compo-live-panel { height: auto !important; overflow: visible !important; } html.t-tablet body.compo-live-tab .compo-layout { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; } html.t-tablet body.compo-live-tab .compo-center { grid-column: 1 / -1; overflow: visible !important; } html.t-tablet body.compo-live-tab .compo-frame { width: min(100%, 58vh) !important; margin: 0 auto !important; } html.t-tablet body.compo-live-tab .compo-col-left, html.t-tablet body.compo-live-tab .compo-side-assign { overflow: visible !important; } } /* ══════════════════ G · TELEPHONE COUCHE (paysage court) ══════════════════ La hauteur est la ressource rare : on la recupere partout. */ html.t-phone.t-short .wm { display: none !important; } html.t-phone.t-short .wrap { padding-top: 14px !important; padding-bottom: 18px !important; } html.t-phone.t-short header .rule { margin-top: 16px !important; } html.t-phone.t-short h1 { font-size: clamp(2rem, 7vh, 3rem) !important; } html.t-phone.t-short .meta { margin-top: 12px !important; } html.t-phone.t-short .grp { margin: 18px 0 10px !important; } html.t-phone.t-short .grid.effectif, html.t-phone.t-short .grid.admin, html.t-phone.t-short .grid.ops { grid-template-columns: 1fr 1fr !important; } html.t-phone.t-short .card { padding: 14px 16px 13px !important; } html.t-phone.t-short .card .num { font-size: 48px !important; } html.t-phone.t-short .card .ttl { font-size: 21px !important; } html.t-phone.t-short .card .desc { font-size: 12px !important; } html.t-phone.t-short .hdr-in { padding-top: 7px !important; } html.t-phone.t-short .hdr-h { font-size: 16px !important; } html.t-phone.t-short .hdr-crest { display: none !important; } html.t-phone.t-short .tabs .tab, html.t-phone.t-short .rb-nav-in .tab-btn, html.t-phone.t-short .rail .tab-btn { min-height: 40px; padding-top: 8px !important; padding-bottom: 8px !important; } html.t-phone.t-short .topbar { padding: 8px var(--m-pad) 8px !important; flex-direction: row !important; align-items: center !important; } html.t-phone.t-short .topbar h1 { font-size: 20px !important; } html.t-phone.t-short .content { padding-top: 10px !important; } html.t-phone.t-short .hero { padding: 12px var(--m-pad) !important; } html.t-phone.t-short .hero p { display: none !important; } html.t-phone.t-short .pane { padding-top: 12px !important; gap: 18px !important; } html.t-phone.t-short .rail-head { padding: 6px 10px !important; } html.t-phone.t-short .rail-foot { display: none !important; } /* Terrains et plateaux : la hauteur disponible fait la taille. */ html.t-phone.t-short .fm-pitch { width: min(100%, calc((var(--m-vh, 100dvh) - 120px) * 100 / 150)) !important; } html.t-phone.t-short .compo-layout, html.t-phone.t-short .fm-stage { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important; } html.t-phone.t-short .cr2-pitch { max-height: calc(var(--m-vh, 100dvh) - 150px); } /* Le paysage sert a voir plus : on remonte le nombre de colonnes. */ html.t-phone.t-short .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; } html.t-phone.t-short .kpis, html.t-phone.t-short .g4, html.t-phone.t-short .g3 { grid-template-columns: repeat(4, 1fr) !important; } html.t-phone.t-short .db-kpis { grid-template-columns: repeat(3, 1fr) !important; } html.t-phone.t-short .jour-layout { grid-template-columns: 262px minmax(0,1fr) !important; gap: 16px !important; } html.t-phone.t-short .groupes-grid, html.t-phone.t-short .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; } html.t-phone.t-short #tab-entrainements .week-grid { grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 9px !important; } html.t-phone.t-short #tab-entrainements .card-date { font-size: 19px !important; } /* Le direct couche : le principe « un seul ecran » tient, resserre. */ html.t-phone.t-short body.compo-live-tab .compo-layout { grid-template-columns: 172px minmax(0,1fr) 244px !important; gap: 8px !important; } html.t-phone.t-short body.compo-live-tab .compo-frame { width: min(100%, 40vh) !important; } html.t-phone.t-short body.compo-live-tab .jtl-in { padding: 6px 12px 8px !important; gap: 6px !important; } html.t-phone.t-short body.compo-live-tab .jtl-team .n { font-size: 14px !important; } html.t-phone.t-short body.compo-live-tab .jtl-logo { width: 30px !important; height: 30px !important; } html.t-phone.t-short body.compo-live-tab .jtl-score .v { font-size: 32px !important; } html.t-phone.t-short body.compo-live-tab .jtl-buteurs { display: none !important; } html.t-phone.t-short body.compo-live-tab .jtl-ring { width: 42px !important; height: 42px !important; } html.t-phone.t-short body.compo-live-tab .jtl-ring-in { width: 34px !important; height: 34px !important; } html.t-phone.t-short body.compo-live-tab .jtl-console { padding: 5px 9px !important; gap: 7px !important; } html.t-phone.t-short body.compo-live-tab .jtl-console button { min-height: 44px !important; padding: 0 12px !important; font-size: 12px !important; } html.t-phone.t-short body.compo-live-tab .jtl-chr .t { font-size: 17px !important; } /* ══════════════════════════ H · PALIER TABLETTE ══════════════════════════ Principe inverse du telephone : on ne replie PAS l'outil, on le desserre. A 744px et plus, l'entete, les rails et les onglets du poste fixe tiennent — ils restent. Ce qui change : gouttieres, densite des grilles, cibles. */ html.t-tablet .wrap { padding-top: 34px !important; max-width: 100% !important; } /* Le grand titre du portail seulement (structure .mask > h1) : ailleurs, un h1 est un titre d'outil, il ne doit pas gonfler. */ html.t-tablet .mask h1 { font-size: clamp(3rem, 9vw, 5.4rem) !important; } html.t-tablet .grid.effectif, html.t-tablet .grid.ops, html.t-tablet .grid.admin { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } html.t-tablet .span3 { grid-column: span 2 !important; } html.t-tablet .card .ttl { font-size: 28px !important; } html.t-tablet .card.tbb .tbb-claim, html.t-tablet .card.tbb .tbb-det { white-space: normal !important; } /* Presences : le rail reste, resserre. */ html.t-tablet .rail { width: 216px !important; } html.t-tablet .rail-title { font-size: 21px !important; } html.t-tablet .topbar { padding: 16px var(--m-pad) 14px !important; flex-wrap: wrap; gap: 12px !important; } html.t-tablet .content { padding: 20px var(--m-pad) 30px !important; } html.t-tablet .kpi-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } html.t-tablet .hm-cell { height: 32px !important; } html.t-tablet .rm-groupes-grid { grid-template-columns: 1fr 1fr !important; } /* Entetes d'outil : tout tient, on comprime le decor. */ html.t-tablet .hdr-in { padding-top: 12px !important; gap: 14px !important; } html.t-tablet .hdr-h { font-size: 24px !important; } html.t-tablet .hdr-sub { font-size: 11px !important; } html.t-tablet .toolbar { flex-wrap: wrap !important; } html.t-tablet .pane { padding: 26px var(--m-pad) 34px !important; } html.t-tablet .kpis, html.t-tablet .g4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } html.t-tablet .g3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } html.t-tablet .db-kpis { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } /* Mise en place seance. */ html.t-tablet .jour-layout { grid-template-columns: 240px minmax(0,1fr) !important; gap: 20px !important; } html.t-tablet .jour-rail { position: static !important; } html.t-tablet .rail-grid, html.t-tablet .groupes-grid, html.t-tablet .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } /* Planning : la semaine garde ses 7 jours, cartes plus basses. */ html.t-tablet #tab-entrainements .week-grid { grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 8px !important; } html.t-tablet #tab-entrainements .card-date { font-size: 20px !important; } html.t-tablet #tab-entrainements .card-body { font-size: 11px !important; } @media (orientation: portrait) { /* Portrait : deux colonnes partout ou le poste fixe en met trois ou quatre. */ html.t-tablet .kpis, html.t-tablet .g4, html.t-tablet .g3, html.t-tablet .db-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } html.t-tablet .dash-hero, html.t-tablet .db-top, html.t-tablet .db-mid, html.t-tablet .db-mid2, html.t-tablet .fm-board, html.t-tablet .cr2-verdict, html.t-tablet .poster-body, html.t-tablet .jt-main, html.t-tablet .ls-grid, html.t-tablet .ls-top, html.t-tablet .hm-main { grid-template-columns: minmax(0,1fr) !important; } html.t-tablet .vest-aside { display: none !important; } html.t-tablet #tab-entrainements .card-body { overflow: visible !important; } html.t-tablet #tab-entrainements .card, html.t-tablet #tab-entrainements .card-champ, html.t-tablet #tab-entrainements .card-coupe { min-height: 0 !important; height: auto !important; } } /* ══════════ I · TACTIC BOARD AU DOIGT (tablette et telephone) ══════════ L'outil embarque des styles « mode-phone » / « mode-tablet » calibres pour son simulateur d'ecran sur PC : boutons de 42px, libelles de 6,8px. Lisibles a 40 cm derriere un clavier, intenables au doigt en plein soleil. Sur un vrai appareil tactile on les regrossit ; le simulateur sur PC garde sa maquette. */ html.t-touch:not(.t-desk) body.mode-phone .tb-btn, html.t-touch:not(.t-desk) body.mode-phone .tb-action, html.t-touch:not(.t-desk) body.mode-tablet .tb-btn, html.t-touch:not(.t-desk) body.mode-tablet .tb-action { min-width: 62px !important; min-height: 50px !important; padding: 7px 8px 6px !important; font-size: 9px !important; gap: 3px !important; } html.t-touch:not(.t-desk) body.mode-phone .tb-btn .tb-ico, html.t-touch:not(.t-desk) body.mode-phone .tb-action svg, html.t-touch:not(.t-desk) body.mode-tablet .tb-btn .tb-ico, html.t-touch:not(.t-desk) body.mode-tablet .tb-action svg { width: 19px !important; height: 19px !important; } html.t-touch:not(.t-desk) #toolbar { padding-bottom: calc(6px + var(--m-safe-b)) !important; scroll-snap-type: x proximity; } /* L'outil actif doit se voir d'un coup d'oeil : au doigt, on n'a pas de curseur pour se rappeler dans quel mode on est. */ html.t-touch:not(.t-desk) #toolbar .tb-btn.active { outline: 2px solid var(--m-gold); outline-offset: -2px; } /* Le banc : les pions se prennent au doigt, donc jamais moins de 44px. */ html.t-touch:not(.t-desk) #bench-panel .pion { min-width: 44px !important; min-height: 44px !important; } html.t-phone body.mode-phone canvas#pitch, html.t-tablet body.mode-tablet canvas#pitch { flex: 1 1 auto !important; } /* ══════════════════════════ J · DIVERS ══════════════════════════ */ @media print { #m-tabbar, #m-sheet { display: none !important; } body { padding-bottom: 0 !important; } .m-cards { display: none !important; } .m-tw { overflow: visible !important; } .m-tw > table { min-width: 0 !important; } } @media (prefers-reduced-motion: reduce) { #m-sheet .m-sheet-in, .modal-overlay > *, .ov > * { animation: none !important; } }