/* * Design system Horlogium / Archipelago — Piste C ("Le Cadran, taillé") * Remplace style.css + filters.css + game-detail.css (fusion, une seule * source de vérité pour les couleurs/typo au lieu des deux séries de * variables --horlogium- et --hlg- (préfixes distincts) qui coexistaient avant). * * Breakpoints : * > 900px : bureau, grille fluide, filtres complets * 601-900px: tablette, grille resserrée * <= 600px : mobile, grille 3 colonnes fixes, filtres réduits aux * icônes, plateforme sans texte, genres limités à 1 tag */ /* ---------- DESIGN TOKENS (source unique) ---------- */ :root{ --navy-deep:#12142f; --navy-panel:#1c2050; --gold:#efaf22; --gold-soft:#f4c95d; --bronze-line:#8a6a2f; --text-warm:#f3ecd9; --text-muted:#9a97b8; --danger:#d9534f; --ok:#5cb85c; --radius-none:0; --header-height:64px; --font-display:'Cinzel', serif; --font-body:'Inter', sans-serif; --font-mono:'Space Mono', monospace; } *{box-sizing:border-box;} body{ margin:0; background:var(--navy-deep); color:var(--text-warm); font-family:var(--font-body); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} /* ---------- HEADER ---------- */ header.site{ height:var(--header-height); display:flex;align-items:center;justify-content:space-between; padding:0 40px;border-bottom:1px solid rgba(239,175,34,0.15); background:var(--navy-panel); } .brand{display:flex;align-items:center;gap:16px;} .brand-mark{ width:28px;height:28px;display:block; } nav.links{display:flex;align-items:center;gap:28px;font-size:0.84rem;color:var(--text-muted);} nav.links a:hover, nav.links a.active{color:var(--gold-soft);} .header-user{display:flex;align-items:center;gap:8px;} .header-avatar{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);} /* ---------- SECTION HEADERS ---------- */ main{max-width:1180px;margin:0 auto;padding:36px 40px 90px;} .section-head{display:flex;align-items:center;gap:16px;margin:0 0 22px;} .section-head .mark{width:10px;height:10px;background:var(--gold);transform:rotate(45deg);flex:none;} .section-head h2{font-family:var(--font-display);font-weight:600;letter-spacing:0.04em;font-size:1.2rem;margin:0;text-transform:uppercase;} .section-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--bronze-line),transparent);} /* ---------- FILTER BAR ---------- */ .filterbar{ display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px;padding:14px 18px; background:var(--navy-panel);border:1px solid rgba(239,175,34,0.15);border-radius:6px; } .filterbar input,.filterbar select{ background:rgba(255,255,255,0.03);border:1px solid rgba(239,175,34,0.2);color:var(--text-warm); padding:8px 12px;font-size:0.83rem;font-family:var(--font-body); } /* Stylise la liste déroulée elle-même : fonctionne dans Chrome/Edge et les Firefox récents, ignoré silencieusement ailleurs (rendu natif du système alors utilisé, sans casse). Généralisé à tout le site — ne couvrait que le catalogue, illisible partout ailleurs (ex. le menu de correspondance des checks). */ select option{ background:var(--navy-panel);color:var(--text-warm); } .filterbar .duration-range{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1 1 260px;} .filterbar .duration-label{ font-family:var(--font-mono);font-size:0.74rem;color:var(--gold-soft);text-align:center; } .filterbar .duration-track-wrap{position:relative;height:38px;margin:0 10px;} .filterbar .duration-track{position:absolute;top:16px;left:0;right:0;height:2px;background:rgba(239,175,34,0.2);} .filterbar .duration-range-bar{position:absolute;top:16px;height:2px;background:var(--gold);} .filterbar .duration-tick{position:absolute;top:12px;width:1px;height:8px;background:rgba(239,175,34,0.3);} .filterbar .duration-tick-label{ position:absolute;top:24px;transform:translateX(-50%);font-family:var(--font-mono); font-size:0.58rem;color:var(--text-muted);white-space:nowrap; } .filterbar .duration-handle{ position:absolute;top:16px;width:13px;height:13px;background:var(--gold); transform:translate(-50%,-50%) rotate(45deg);cursor:grab;touch-action:none; } /* Zone de prise tactile plus généreuse que le losange visible, sans l'agrandir visuellement */ .filterbar .duration-handle::before{ content:"";position:absolute;inset:-10px; } .filterbar .duration-handle:active{cursor:grabbing;background:var(--gold-soft);} .filterbar .duration-handle.min{z-index:3;} .filterbar .duration-handle.max{z-index:2;} .filterbar .genre-multiselect{display:flex;gap:6px;flex-wrap:wrap;} .filterbar .genre-chip{ font-size:0.72rem;padding:5px 10px;border:1px solid rgba(239,175,34,0.25);color:var(--text-muted); background:none;cursor:pointer; } .filterbar .genre-chip[aria-pressed="true"]{background:rgba(239,175,34,0.18);color:var(--gold-soft);border-color:var(--gold);} /* libellé texte des filtres, masqué sur mobile (icône seule) */ .filter-label-text{margin-left:4px;} /* Prix (gratuit/payant/émulation) : icônes, actives (or) par défaut, grisées quand désactivées — demandé explicitement. */ .filterbar .pricing-toggle{display:flex;gap:4px;} .filterbar .pricing-chip{ width:32px;height:32px;display:flex;align-items:center;justify-content:center; font-size:1.05rem;border:1px solid rgba(239,175,34,0.2);background:none;cursor:pointer; color:var(--text-muted);opacity:0.45; } .filterbar .pricing-chip[aria-pressed="true"]{ color:var(--gold-soft);opacity:1;border-color:var(--gold);background:rgba(239,175,34,0.12); } .filterbar .adult-chip{ display:inline-flex;align-items:center;gap:5px;padding:7px 12px;font-size:0.78rem; border:1px solid rgba(239,175,34,0.2);background:none;cursor:pointer;color:var(--text-muted);opacity:0.6; } .filterbar .adult-chip[aria-pressed="true"]{ color:var(--gold-soft);opacity:1;border-color:var(--gold);background:rgba(239,175,34,0.12); } /* ---------- GRID / CARTES (format grid Steam, portrait) ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;margin-bottom:60px;} .card{ display:flex;flex-direction:column; background:var(--navy-panel);border:1px solid rgba(239,175,34,0.12);border-radius:6px;overflow:hidden; transition:transform .16s ease, border-color .16s ease; } .card:hover,.card:focus-within{transform:translateY(-3px);border-color:rgba(239,175,34,0.4);} /* .card-link-area n'est plus un enfant direct de .grid (display:grid), donc il ne bénéficie plus de la "blockification" automatique d'un élément de grille — display:block explicite nécessaire, sinon reste inline par défaut et casse la mise en page. La grille étire déjà chaque carte à la hauteur de la ligne (comportement par défaut de display:grid) ; flex:1 ici pousse la ligne d'icônes du bas au ras du bas de la carte quelle que soit la hauteur du contenu au-dessus (titre sur 1 ou 2 lignes, genres présents ou non) — alignement homogène sur toute la rangée, demandé explicitement. */ .card .card-link-area{display:flex;flex-direction:column;flex:1;} .card .card-icon-group{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:6px;padding:8px 12px 10px; } .card .card-icon-group-left{display:flex;align-items:center;gap:6px;min-width:0;} .card .card-icon{ position:relative;width:26px;height:26px;display:flex;align-items:center;justify-content:center; color:var(--gold-soft);font-size:1.1rem;flex:none; } /* Icône Steam officielle : rond, fond noir, logo blanc — pas la couleur or générique des autres icônes de la ligne. */ .card .card-icon-steam{background:#000;color:#fff;border-radius:50%;} .card .card-icon-steam:hover{opacity:0.8;} .card .card-icon-stat{ width:auto;padding:0 6px;font-size:0.7rem;font-family:var(--font-mono);gap:3px; } .card .card-icon-stat.metacritic{ font-weight:700;border-radius:3px;padding:1px 7px;color:#0d0e1f; } .card .card-icon-owned-check{ position:absolute;bottom:-3px;right:-3px;font-size:0.7rem;color:#5cb85c; background:var(--navy-panel);border-radius:50%; } /* Icône prix : mêmes icônes que le filtre de recherche, toujours présente (contrairement à Steam/HLTB/Metacritic, le prix existe pour tous les jeux) — garantit une ligne du bas jamais vide. */ .card .card-icon-pricing.pricing-badge-0{color:#8fd18f;} .card .card-icon-pricing.pricing-badge-2{color:var(--bronze-line);} /* Metacritic : rectangle de fond façon médaille par palier (repère au premier coup d'oeil, un simple liseré coloré ne suffisait pas). Texte sombre partout sauf mitigé/mauvais (fonds plus sombres, texte clair). Sélecteur à deux classes pour l'emporter sur .card .card-icon. Reflet : fond plat (background-color) + UNE bande de lumière quasi transparente en couche séparée (background-image), sur une image bien plus large que l'élément (300%). Le dégradé transparent->clair-> transparent traverse une fois par cycle ; comme les DEUX extrémités de la trajectoire animée tombent en zone transparente, le raccord de boucle (retour brusque à la position de départ) est invisible — pas de second passage de lumière ni de saccade, contrairement à l'ancien dégradé symétrique sombre-clair-sombre qui se "tuilait" visiblement. */ .card-icon-stat.mc-gold{ background-color:#c9a227; background-image:linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%); background-size:300% 100%; background-repeat:no-repeat; animation:mc-shine 3s linear infinite; } .card-icon-stat.mc-silver{ background-color:#b8babf; background-image:linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%); background-size:300% 100%; background-repeat:no-repeat; animation:mc-shine 3s linear infinite; } @keyframes mc-shine{ from { background-position:150% 0; } to { background-position:-150% 0; } } .card-icon-stat.mc-bronze{background:linear-gradient(160deg,#c98a4b,#8a5a2e);} .card-icon-stat.mc-mixed{background:#4a5568;color:var(--text-warm);} .card-icon-stat.mc-bad{background:#8b3a3a;color:var(--text-warm);} .card .grid-thumb{ aspect-ratio:2/3; background-size:cover;background-position:center; background-color:#171a3d; display:flex;align-items:flex-end;justify-content:flex-end; position:relative; } .card .grid-thumb .badge-adult{ position:absolute;top:7px;right:7px;font-size:0.6rem;background:rgba(0,0,0,0.55); padding:2px 6px;color:var(--gold-soft);border:1px solid rgba(239,175,34,0.35); } .card .grid-thumb .ribbon{ position:absolute;top:8px;left:-4px;font-size:0.6rem;font-weight:600;letter-spacing:0.03em; padding:2px 10px 2px 8px;text-transform:uppercase; clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px)); } .card .grid-thumb .ribbon-steam{background:var(--gold);color:#1c1200;} .card .grid-thumb .ribbon-declared{background:rgba(154,151,190,0.9);color:#12142f;} /* Badge indépendant pour la fiche détail (pas le ruban du catalogue, qui exige d'être dans .card .grid-thumb pour avoir le moindre style). */ .badge-inline{ display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.03em; padding:4px 10px;text-transform:uppercase;border-radius:3px; } .badge-inline-steam{background:var(--gold);color:#1c1200;} .card .body{padding:10px 11px 12px;} .card h3{margin:0 0 6px;font-size:0.86rem;font-weight:600;line-height:1.25; display:flex;align-items:flex-start;justify-content:space-between;gap:6px;} .card h3 > span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card .platform-icon-inline{flex:none;color:var(--text-muted);font-size:0.95rem;} .card .meta{display:flex;align-items:center;justify-content:flex-end;font-size:0.72rem;color:var(--text-muted);margin-bottom:8px;gap:6px;} .card .rating{color:var(--gold-soft);font-size:0.76rem;letter-spacing:1px;white-space:nowrap;} .card .rating .count{color:var(--text-muted);font-size:0.62rem;margin-left:3px;} /* Style de base des genres : généralisé (pas seulement .card .genres), sinon la fiche détail — qui réutilise la même classe hors d'une carte — n'en bénéficie jamais et les tags s'affichent collés sans séparation. */ .genres{display:flex;gap:5px;flex-wrap:wrap;} .genres span{ font-size:0.6rem;text-transform:uppercase;letter-spacing:0.03em;color:var(--bronze-line); border:1px solid rgba(138,106,47,0.5);padding:1px 6px; } /* ---------- PAGE DÉTAIL (header = grande image de fond "zoomée") ---------- */ .game-hero{ aspect-ratio:920/430;max-height:420px;width:100%; background-size:cover;background-position:center;background-color:var(--navy-panel); position:relative;display:flex;align-items:flex-end; border-bottom:1px solid rgba(239,175,34,0.2); } .game-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(18,20,47,0) 40%, rgba(18,20,47,0.95) 100%); } .game-hero .hero-content{position:relative;z-index:1;padding:28px 40px;} .game-hero h1{font-family:var(--font-display);font-size:1.9rem;margin:0 0 6px;text-transform:uppercase;letter-spacing:0.03em;} /* ---------- BOUTONS ---------- */ .session-input{ background:rgba(255,255,255,0.03);border:1px solid rgba(239,175,34,0.25);color:var(--text-warm); padding:8px 12px;font-size:0.82rem;font-family:var(--font-body); } .session-input::placeholder{color:var(--text-muted);} .input-placeholder-missing::placeholder{color:var(--danger);} .input-placeholder-ok::placeholder{color:var(--gold);} .modal-overlay{ position:fixed;inset:0;background:rgba(8,9,20,0.75);backdrop-filter:blur(2px); display:flex;align-items:center;justify-content:center;z-index:100; } .modal-overlay[hidden]{display:none;} .modal-box{ width:100%;max-width:440px;max-height:80vh;display:flex;flex-direction:column; background:linear-gradient(160deg,#23285e 0%,#171a42 60%,#12142f 100%); border:1px solid rgba(239,175,34,0.3);border-radius:6px;padding:24px 26px;position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.6); } .modal-box h3{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--gold-soft);margin:0 0 14px;} .modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;line-height:1;} .modal-close:hover{color:var(--gold-soft);} .modal-results{overflow-y:auto;margin-top:10px;} .modal-results .result-group-label{ font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase; color:var(--bronze-line);padding:10px 4px 4px; } .modal-results .game-result, .modal-results .user-result{ padding:8px 10px;cursor:pointer;font-size:0.85rem;border-bottom:1px solid rgba(239,175,34,0.08); display:flex;align-items:center;gap:8px; } .modal-results .game-result:hover, .modal-results .user-result:hover{background:rgba(239,175,34,0.12);} .modal-results .empty-note{color:var(--text-muted);font-size:0.8rem;padding:10px 4px;} /* Aperçu au survol d'un résultat de jeu : un seul élément partagé, position:fixed pilotée en JS — .modal-results a overflow-y:auto qui aurait aussi rogné l'axe horizontal (comportement standard CSS quand un seul axe overflow est renseigné), donc un simple :hover en CSS pur aurait été invisible, coupé par le conteneur défilant. */ #gameResultPreview{ display:none;position:fixed;width:90px;z-index:200; background:var(--navy-deep);border:1px solid rgba(239,175,34,0.3); padding:6px;box-shadow:0 10px 30px rgba(0,0,0,0.5);pointer-events:none; } #gameResultPreview img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;margin-bottom:4px;background:var(--navy-panel);} #gameResultPreview .preview-platform{font-size:0.65rem;color:var(--text-muted);text-align:center;} /* ---------- Lignes de jeu en session : grille à colonnes fixes ---------- Demandé explicitement : même largeur pour tout le monde, que les liens connexes soient renseignés ou non (3 emplacements toujours réservés). */ /* ---------- Mosaïque de jeux (remplace l'ancien anneau de progression) ---------- 1 jeu : case pleine. 2 : deux bandes verticales. 3 : trois bandes horizontales. 4 : quadrants 2x2. Chaque case affiche la vraie jaquette du jeu (même image que sur le catalogue). Terne (grisé/assombri) sans donnée de checks disponible pour ce jeu ; sinon un voile sombre couvre le haut de la case et recule au fur et à mesure de la progression, révélant la jaquette depuis le bas — pas une barre de couleur posée par-dessus. */ .game-mosaic{ /* Le !important a été retiré : la règle 56/84px n'a jamais été mal appliquée. Ce qu'on prenait pour une dérive de largeur était en réalité la boîte englobante d'une barre pivotée (rotate(20deg)) — getBoundingClientRect() renvoie toujours cette boîte pour un élément pivoté, pas ses dimensions CSS propres. Vérifié par une mesure réelle en navigateur avant de retirer le correctif. */ width:84px;height:126px;margin:0 auto;display:grid;gap:0;position:relative;overflow:hidden; border:1px solid rgba(20,22,42,0.9);box-sizing:border-box; } .game-mosaic.count-1{grid-template-columns:1fr;grid-template-rows:1fr;} .game-mosaic.count-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;} .game-mosaic.count-3{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr;} .game-mosaic.count-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;} .mosaic-cell{ position:relative;background-color:rgba(154,151,190,0.14); background-size:cover;background-position:center; } .mosaic-cell-dim{filter:grayscale(0.85) brightness(0.45);} /* Superposition de calques : les cases (fond) < UN SEUL reflet qui parcourt toute la mosaïque comme une seule jaquette < le voile par-dessus. Le voile est une VRAIE IMAGE (le même recadrage que la case, pas une couleur plate) désaturée par filtre, rognée par clip-path pour ne montrer que la partie non terminée — étant une image opaque et non une transparence, elle masque forcément tout ce qu'il y a en dessous, reflet compris. */ .mosaic-shine-bar{ position:absolute;top:-15%;width:10%;height:130%;z-index:5; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent); transform:rotate(20deg); animation:mosaic-shine-sweep 1.4s linear infinite; pointer-events:none; } @keyframes mosaic-shine-sweep{ from{left:-40%;} to{left:140%;} } .mosaic-veil-overlay{ position:absolute;z-index:6;pointer-events:none; background-size:cover;background-position:center; filter:grayscale(0.9) brightness(0.55); } .mosaic-tooltip{ display:none;position:fixed;transform:translateX(-50%); background:var(--navy-deep);border:1px solid rgba(239,175,34,0.4);border-radius:6px; padding:8px 14px;white-space:nowrap;z-index:9999;text-align:center;pointer-events:none; box-shadow:0 12px 30px rgba(0,0,0,0.55); } .mosaic-tooltip.visible{display:block;} .mosaic-tooltip-pct{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--gold-soft);line-height:1;} .mosaic-tooltip-count{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);margin-top:2px;} .mosaic-tooltip-title{font-size:0.68rem;color:var(--text-warm);margin-top:4px;max-width:140px;white-space:normal;} .game-row{ display:grid; grid-template-columns: 28px 1fr 140px 68px 84px 116px; align-items:center;gap:10px; background:var(--navy-panel);border:1px solid rgba(239,175,34,0.1);padding:8px 14px; } .game-row > *{min-width:0;} .game-row .g-check{display:flex;justify-content:center;align-items:center;font-size:1.05rem;} .game-row .g-checks{color:var(--text-warm);font-size:0.76rem;white-space:nowrap;} .game-row .g-title{font-weight:600;font-size:0.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Classe partagée pour tout affichage de pseudo (sous la mosaïque, dans l'en-tête "Jeux" par joueur) — une seule définition, garantit qu'ils restent identiques plutôt que deux styles en ligne qui divergent. */ .player-name-label{ font-family:var(--font-display);font-size:0.95rem;letter-spacing:0.03em;color:var(--gold-soft); } .game-row .g-platform{color:var(--text-muted);font-size:0.76rem;} .game-row .g-links{display:flex;gap:6px;color:var(--text-muted);flex-shrink:0;} .game-row .g-links .link-slot{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .game-row .g-links .link-slot iconify-icon{font-size:16px;} .game-row .g-links .link-slot a{color:inherit;display:flex;} .game-row .g-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;flex-shrink:0;} /* Upload de fichier : input natif masqué, déclenché par une icône, envoi automatique dès la sélection (plus de bouton "Envoyer" séparé). */ .file-trigger input[type="file"]{ position:absolute;width:1px;height:1px;overflow:hidden;opacity:0; } .file-trigger{position:relative;display:inline-flex;} .btn{ font-family:var(--font-body);font-size:0.78rem;font-weight:600;letter-spacing:0.03em; padding:9px 18px;border:1px solid var(--gold);background:transparent;color:var(--gold-soft);cursor:pointer; border-radius:3px; } .btn.primary{background:var(--gold);color:#1c1200;} .btn:disabled{opacity:0.4;cursor:not-allowed;} .btn-icon{ padding:0;width:28px;height:28px;flex:none; display:inline-flex;align-items:center;justify-content:center;font-size:1rem; } .btn-steam-login{ display:inline-flex;align-items:center;gap:6px; background:#171a21;border-color:#66c0f4;color:#66c0f4; padding:7px 14px;font-size:0.8rem; } .btn-steam-login:hover{background:#1b2838;} .btn-steam-login iconify-icon{font-size:1.1rem;} /* ========================================================== RESPONSIVE ========================================================== */ /* Tablette : grille resserrée, filtres encore lisibles */ @media (max-width:900px){ main{padding:28px 20px 70px;} header.site{padding:0 20px;} .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;} .card .genres span:nth-child(n+2){display:none;} /* 1 seul genre affiché */ } /* Mobile : grille fixe 3 colonnes, filtres en icônes, plateforme sans texte */ @media (max-width:600px){ header.site{padding:0 14px;} nav.links{gap:16px;font-size:0.76rem;} main{padding:20px 12px 60px;} .section-head h2{font-size:1.02rem;} .filterbar{padding:10px 12px;gap:8px;} .filterbar input[type="text"]{flex:1 1 100%;order:-1;} .filterbar select{font-size:0.78rem;padding:6px 8px;flex:1 1 auto;min-width:0;} .filter-label-text{display:none;} /* icône seule sur les puces de filtre */ .filterbar .duration-range{flex:1 1 100%;min-width:0;} .filterbar .duration-tick-label{font-size:0.52rem;} .grid{grid-template-columns:repeat(3,1fr);gap:8px;} .card .body{padding:7px 7px 9px;} .card h3{font-size:0.72rem;margin-bottom:4px;} .card h3 > span:first-child{-webkit-line-clamp:2;} .card .meta{font-size:0.62rem;gap:4px;} .card .rating{font-size:0.64rem;} .card .rating .count{display:none;} .card .genres{display:none;} /* pas de place utile en dessous de 600px, priorité titre+note */ .game-hero .hero-content{padding:16px 16px;} .game-hero h1{font-size:1.3rem;} } /* ---------- Checks disponibles (page sessions/checks) ---------- */ .checks-tile{ background:var(--navy-panel);border:1px solid rgba(239,175,34,0.15);border-radius:6px;padding:14px; text-align:center; } .checks-tile b{ display:flex;align-items:center;justify-content:center;height:1.5rem; font-family:var(--font-display);color:var(--gold-soft);font-size:1.3rem;line-height:1; } .checks-tile-title{display:block;color:var(--gold-soft);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;} .checks-tile-sub{display:block;color:var(--gold-soft);font-size:0.68rem;letter-spacing:0.03em;margin-top:4px;} .checks-badge{ display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:0.68rem; border:1px solid rgba(239,175,34,0.3);color:var(--gold-soft);border-radius:999px;padding:3px 9px; background:rgba(239,175,34,0.06);white-space:nowrap; } .checks-badge-good{color:var(--ok);border-color:rgba(92,184,92,0.35);background:rgba(92,184,92,0.08);} .checks-badge-info{color:#8aa9d6;border-color:rgba(138,169,214,0.35);background:rgba(138,169,214,0.08);} .checks-badge-bad{color:var(--danger);border-color:rgba(217,83,79,0.4);background:rgba(217,83,79,0.1);} /* ---------- Toast (remplace alert(), qui ne reprend rien du design) ---------- */ .toast{ background:var(--navy-panel);border:1px solid rgba(239,175,34,0.4);border-radius:6px; padding:12px 22px;color:var(--text-warm);font-size:0.85rem;line-height:1.4; box-shadow:0 14px 34px rgba(0,0,0,0.5); opacity:0;transform:translateY(12px);transition:opacity .3s ease, transform .3s ease; max-width:380px;text-align:center; } .toast-visible{opacity:1;transform:translateY(0);} .toast-success{border-color:rgba(92,184,92,0.5);} .toast-error{border-color:rgba(217,83,79,0.55);color:#f8d9d7;} /* ---------- Accueil (tableau de bord) ---------- */ .dash-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;} .dash-main, .dash-side{min-width:0;} .dash-block{margin-bottom:36px;} .dash-block h3{ font-family:var(--font-display);font-size:0.95rem;text-transform:uppercase;letter-spacing:0.04em; color:var(--gold-soft);margin:0 0 14px; } /* Tendance : liste horizontale de vignettes + compteur */ .dash-trending{display:flex;gap:14px;flex-wrap:wrap;} .dash-trending-item{width:96px;text-align:center;} .dash-trending-thumb{ aspect-ratio:184/69;background-size:cover;background-position:center;background-color:var(--navy-panel); border:1px solid rgba(239,175,34,0.15);margin-bottom:4px; } .dash-trending-nb{font-family:var(--font-mono);font-size:0.72rem;color:var(--gold-soft);} /* Bandeau de date : une fois par jour, reprend le principe de l'ancien