/* ================================================================ Play — thème sombre « application mobile » Même grammaire que /srv/annuaire, /srv/contact et /srv/agenda (topbar fixe + pastille d'onglets flottante opaque, sidebar sur grand écran, icônes Lucide inline), avec une identité propre : nuit violette et magenta d'arcade, là où l'Annuaire est bleu marine, Contact turquoise et l'Agenda vert et or. Navigation volontairement réduite à 4 onglets : Le joueur, Quêtes, Trophées, Boutique. Tout le reste vit dans /admin. Règle absolue : AUCUN box-shadow, nulle part (préférence utilisateur) — les reliefs sont rendus par bordures et fonds. Jamais d'emoji : uniquement des icônes Lucide. ================================================================ */ * { box-sizing: border-box; } :root { color-scheme: dark; /* ---- Fonds. L'encre est une nuit violette très profonde et les cartes plus claires : tout le relief vient de cet écart, puisque les ombres sont interdites. */ --fond: #08060f; --carte: #15112a; --carte-2: #211a3d; --champ: #0e0b1c; /* Deux halos de teintes opposées en haut de page : violet à gauche, magenta à droite. C'est ce qui empêche le fond d'être une nappe morte. */ --halo-1: rgba(150, 100, 255, .22); --halo-2: rgba(255, 90, 190, .14); /* ---- Texte : plus clair, donc plus lisible sur fond sombre. */ --texte: #f3effc; --texte-2: #d7cdf2; /* textes secondaires (lignes de carte, labels) */ --muted: #9b90bf; --bord: #3a3062; --bord-soft: rgba(224, 212, 255, .11); --voile: rgba(224, 212, 255, .05); --voile-fort: rgba(224, 212, 255, .09); /* ---- Accent : le violet de la marque, franchement saturé. */ --accent: #a37bff; --accent-clair: #d6c5ff; /* texte lisible posé sur --accent-soft */ --accent-soft: rgba(163, 123, 255, .20); --accent-line: rgba(163, 123, 255, .46); --degrade: linear-gradient(135deg, #c6a4ff, #9a6bff 55%, #7a3ff0); --sur-accent: #16062e; /* La marque tient les deux couleurs de l'application (le magenta vire au violet) et reste identique partout : les zones ne la repeignent pas. */ --degrade-marque: linear-gradient(135deg, #ff6ec7, #a37bff 55%, #6c3bf5); --sur-marque: #1a0530; /* ---- Les deux monnaies du jeu ont chacune leur couleur, et elles ne changent JAMAIS : violet pour les points, or pour les pièces. C'est ce qui permet de lire un chiffre sans lire son étiquette. */ --xp: #a37bff; --xp-soft: rgba(163, 123, 255, .18); --piece: #ffc046; --piece-soft: rgba(255, 192, 70, .17); --serie: #ff7a45; --serie-soft: rgba(255, 122, 69, .17); /* ---- Sémantique : vif, jamais délavé. */ --ok: #5ee8a8; --ok-soft: rgba(94, 232, 168, .16); --warn: #ffc046; --warn-soft: rgba(255, 192, 70, .16); --err: #ff6f91; --err-soft: rgba(255, 111, 145, .16); --degrade-err: linear-gradient(135deg, #ff6b8a, #e11d48); /* ---- Roue de teintes. Sert partout où une série d'éléments serait sinon d'une seule couleur : tuiles de stats, tuiles d'administration. */ --teinte-1: #a37bff; --teinte-2: #ff6ec7; --teinte-3: #46d5ff; --teinte-4: #ffc046; --teinte-5: #5ee8a8; --teinte-6: #ff8a5c; /* Fond OPAQUE de la barre d'onglets flottante : une pastille d'encre posée sur le fond, jamais un voile translucide. */ --tabbar-base: #120e23; /* Couleur de puce par défaut (surchargée sur les cartes de monde). */ --puce: var(--accent); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ================================================================ ZONES : chaque onglet a sa teinte Une classe sur (posée par head.ejs) redéfinit les variables d'accent : boutons, liens, onglet actif, focus, halo — tout suit, sans une seule règle dupliquée. Le joueur reste violet, les quêtes virent au cyan, les trophées à l'or, la boutique au magenta. ================================================================ */ .zone-joueur { --accent: #a37bff; --accent-clair: #d6c5ff; --accent-soft: rgba(163, 123, 255, .20); --accent-line: rgba(163, 123, 255, .46); --degrade: linear-gradient(135deg, #c6a4ff, #9a6bff 55%, #7a3ff0); --sur-accent: #16062e; --puce: var(--accent); } .zone-quetes { --accent: #46d5ff; --accent-clair: #b6ecff; --accent-soft: rgba(70, 213, 255, .18); --accent-line: rgba(70, 213, 255, .45); --degrade: linear-gradient(135deg, #93e6ff, #2cc6f5 55%, #0f9ed0); --sur-accent: #032330; --halo-1: rgba(70, 213, 255, .18); --halo-2: rgba(163, 123, 255, .14); --puce: var(--accent); } .zone-trophees { --accent: #ffc046; --accent-clair: #ffe3a8; --accent-soft: rgba(255, 192, 70, .18); --accent-line: rgba(255, 192, 70, .45); --degrade: linear-gradient(135deg, #ffde90, #ffb524 55%, #e59206); --sur-accent: #2b1d00; --halo-1: rgba(255, 192, 70, .17); --halo-2: rgba(163, 123, 255, .14); --puce: var(--accent); } .zone-boutique { --accent: #ff6ec7; --accent-clair: #ffc2e8; --accent-soft: rgba(255, 110, 199, .18); --accent-line: rgba(255, 110, 199, .45); --degrade: linear-gradient(135deg, #ffa6dc, #ff5cbe 55%, #d92d95); --sur-accent: #330623; --halo-1: rgba(255, 110, 199, .18); --halo-2: rgba(163, 123, 255, .14); --puce: var(--accent); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { font: 15px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texte); background-color: var(--fond); background-image: radial-gradient(880px 420px at 10% -170px, var(--halo-1), transparent 72%), radial-gradient(760px 380px at 92% -130px, var(--halo-2), transparent 72%); background-attachment: fixed; -webkit-tap-highlight-color: var(--accent-soft); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } ::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); } img, svg, video { max-width: 100%; } code { background: var(--voile-fort); border-radius: 6px; padding: 1px 6px; font-size: .92em; color: var(--accent-clair); } pre { white-space: pre-wrap; overflow-wrap: break-word; } .lucide { width: 1.2em; height: 1.2em; vertical-align: -.24em; flex: none; } button .lucide, .btn .lucide { margin-right: 3px; } summary .lucide { color: var(--accent); margin-right: 2px; } /* Notice explicative en tête de page (partials/notice.ejs) */ .notice { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(100deg, var(--accent-soft), transparent 60%); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 14px; padding: 11px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--texte-2); } .notice > .lucide { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; } .notice .n-txt { min-width: 0; } .layout { display: flex; min-height: 100vh; min-height: 100dvh; } /* ---------------------------------------------------------------- Sidebar (bureau) */ .sidebar { width: 244px; flex: 0 0 244px; background: color-mix(in srgb, var(--fond) 92%, transparent); border-right: 1px solid var(--bord-soft); padding: 14px 10px 20px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .brand { display: flex; align-items: center; justify-content: space-between; font-size: 19px; font-weight: 800; color: var(--texte); padding: 6px 8px 16px; letter-spacing: .3px; } .brand-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--degrade-marque); color: var(--sur-marque); border-radius: 9px; margin-right: 6px; vertical-align: middle; } .brand-ico svg { width: 17px; height: 17px; } .sidebar a { display: flex; align-items: center; gap: 10px; color: var(--texte-2); padding: 10px 12px; font-size: 14.5px; border-radius: 12px; margin: 2px 0; } .sidebar a:hover { background: var(--voile); text-decoration: none; color: var(--texte); } .sidebar a.active { background: var(--accent-soft); color: var(--texte); font-weight: 600; outline: 1px solid var(--accent-line); outline-offset: -1px; } .sidebar a.active .ico { color: var(--accent); } .sidebar .ico { display: inline-flex; width: 24px; justify-content: center; } .sidebar .ico .lucide { width: 19px; height: 19px; } /* Le rappel du niveau dans la colonne : on sait toujours où on en est. */ .sidebar-joueur { margin: 10px 6px 14px; padding: 10px 12px; border-radius: 14px; background: var(--carte); border: 1px solid var(--bord-soft); } .sidebar-joueur .sj-tete { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; } .sidebar-joueur .sj-tete .lucide { width: 16px; height: 16px; color: var(--xp); } .sidebar-joueur .sj-rang { font-size: 12px; color: var(--muted); margin: 2px 0 7px; } .logout-form { padding: 16px 8px 4px; } .logout-form.logout-admin { padding: 8px 0 0; max-width: 320px; } .logout-form button { background: transparent; border: 1px solid var(--bord); color: var(--texte-2); border-radius: 12px; padding: 9px 12px; cursor: pointer; width: 100%; } .logout-form button:hover { border-color: var(--err); color: var(--err); } .topbar, .tabbar { display: none; } /* ---------------------------------------------------------------- Contenu */ .content { flex: 1; padding: 22px 26px 60px; max-width: 1240px; min-width: 0; } h1 { font-size: 23px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 16px; overflow-wrap: break-word; } h1 .lucide { color: var(--accent); } h2 { font-size: 16.5px; font-weight: 700; margin: 24px 0 10px; } h3 { font-size: 14.5px; font-weight: 700; margin: 16px 0 6px; } .muted { color: var(--muted); font-size: 13px; } .vide { color: var(--muted); font-size: 13.5px; padding: 12px 2px; } /* ================================================================ LE JOUEUR : le bandeau du haut de l'accueil La seule chose que le joueur regarde vraiment. Niveau à gauche, barre de progression au milieu, les deux monnaies à droite. ================================================================ */ .joueur { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--xp) 16%, var(--carte-2)), var(--carte) 72%); border: 1px solid var(--accent-line); border-radius: 22px; padding: 18px 20px; margin: 4px 0 16px; } /* La pastille de niveau : le gros chiffre du jeu. Sa MATIÈRE change tous les cinq niveaux (cuivre, argent, or, émeraude…) : une montée de palier se voit sans lire un chiffre. */ .niveau-pastille { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 78px; height: 78px; border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--matiere, var(--accent)) 92%, #fff), var(--matiere, var(--accent)) 55%, color-mix(in srgb, var(--matiere, var(--accent)) 72%, #000)); color: #1a1030; border: 1px solid color-mix(in srgb, var(--matiere, var(--accent)) 60%, #fff); font-weight: 800; line-height: 1; } .niveau-pastille .n-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; opacity: .72; } .niveau-pastille .n-num { font-size: 32px; letter-spacing: -1px; margin-top: 2px; } /* La petite gemme du palier, posée en haut à droite de la pastille. */ .niveau-pastille .n-gemme { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--carte); color: var(--matiere, var(--accent)); border: 1px solid color-mix(in srgb, var(--matiere, var(--accent)) 55%, transparent); } .niveau-pastille .n-gemme .lucide { width: 14px; height: 14px; margin: 0; } /* Le nom du palier, sous le rang. */ .palier-nom { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--matiere, var(--accent)); } .palier-nom .lucide { width: 13px; height: 13px; margin: 0; } .joueur .j-corps { flex: 1 1 240px; min-width: 0; } .joueur .j-rang { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 800; letter-spacing: -.2px; } .joueur .j-rang .lucide { width: 19px; height: 19px; color: var(--accent); } .joueur .j-sous { font-size: 13px; color: var(--muted); margin: 1px 0 9px; } .joueur .j-monnaies { display: flex; flex-wrap: wrap; gap: 8px; } /* Les deux monnaies. Elles gardent leur couleur partout dans l'application. */ .monnaie { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; background: var(--xp-soft); color: var(--xp); border: 1px solid color-mix(in srgb, var(--xp) 40%, transparent); } .monnaie .lucide { width: 15px; height: 15px; margin: 0; } .monnaie small { font-weight: 600; font-size: 11.5px; opacity: .8; } .monnaie.piece { background: var(--piece-soft); color: var(--piece); border-color: color-mix(in srgb, var(--piece) 40%, transparent); } .monnaie.serie { background: var(--serie-soft); color: var(--serie); border-color: color-mix(in srgb, var(--serie) 40%, transparent); } .monnaie.or { background: var(--piece-soft); color: var(--piece); border-color: color-mix(in srgb, var(--piece) 40%, transparent); } .monnaie.eteinte { background: var(--voile); color: var(--muted); border-color: var(--bord-soft); } /* ================================================================ LES SYMBOLES : raretés, étoiles, paliers Trois échelles purement visuelles, déduites de ce que l'utilisateur a réglé (voir lib/jeu.js). Chacune a sa MATIÈRE — cuivre, argent, or — portée par --puce, et le reste suit. ================================================================ */ .rarete-commun { --puce: #cf8f5f; } .rarete-rare { --puce: #a8bdd0; } .rarete-legendaire { --puce: #ffc046; } /* Les paliers de niveau : la matière de la pastille du joueur. */ .palier-cuivre { --matiere: #cf8f5f; } .palier-argent { --matiere: #a8bdd0; } .palier-or { --matiere: #ffc046; } .palier-emeraude { --matiere: #5ee8a8; } .palier-rubis { --matiere: #ff6ec7; } /* Étoiles de difficulté d'une quête. L'étoile pleine est remplie, la vide garde son contour : on compte sans lire. */ .etoiles { display: inline-flex; align-items: center; gap: 2px; } .etoiles .lucide { width: 13px; height: 13px; margin: 0; color: var(--piece); } .etoiles .pleine svg, .etoiles svg.pleine { fill: currentColor; } .etoiles .vide { color: var(--muted); opacity: .5; } /* Pastille de rareté posée sur le coin d'un trophée. */ .rarete-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: color-mix(in srgb, var(--puce) 20%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 45%, transparent); white-space: nowrap; } .rarete-pastille .lucide { width: 12px; height: 12px; margin: 0; } /* La marque « nouveau » d'un trophée décroché aujourd'hui. Un seul élément animé dans toute l'application : la respiration est ce qui attire l'œil là où une ombre le ferait ailleurs — et les ombres sont interdites. */ .marque-neuf { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--degrade-marque); color: var(--sur-marque); border: 0; animation: respire 2.4s ease-in-out infinite; } .marque-neuf .lucide { width: 11px; height: 11px; margin: 0; } @keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } @media (prefers-reduced-motion: reduce) { .marque-neuf { animation: none; } } /* ---------------------------------------------------------------- Barre de progression */ /* Une seule barre pour tout le jeu : niveau, quête, trophée. */ .barre { height: 10px; border-radius: 999px; background: var(--voile-fort); border: 1px solid var(--bord-soft); overflow: hidden; margin: 6px 0 4px; } .barre > i { display: block; height: 100%; background: var(--degrade); border-radius: 999px; } .barre.fine { height: 7px; } .barre.pleine > i { background: linear-gradient(135deg, #8affc4, #35d38b 60%, #14a06b); } /* « Presque » : au-delà de 80 %, la barre vire à l'or. C'est le moment où il reste peu à faire, et c'est exactement là qu'un jeu doit le dire. */ .barre.presque > i { background: linear-gradient(135deg, #ffe08a, #ffc046 60%, #f0a010); } .barre-legende { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .barre-legende b { color: var(--texte-2); font-weight: 700; } /* ================================================================ BANDE-LIEN : une destination entière réduite à une ligne cliquable. Sert au renvoi vers les règles depuis l'accueil — la page du joueur doit montrer un score, pas un mode d'emploi. ================================================================ */ .lien-bloc { display: flex; align-items: center; gap: 12px; background: linear-gradient(100deg, var(--accent-soft), var(--carte) 62%); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 16px; padding: 13px 15px; margin: 4px 0 14px; color: var(--texte); min-width: 0; } .lien-bloc:hover { text-decoration: none; border-color: var(--accent); background: linear-gradient(100deg, var(--accent-soft), var(--carte) 45%); } .lien-bloc .l-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .lien-bloc .l-ico .lucide { width: 19px; height: 19px; } .lien-bloc .l-corps { flex: 1; min-width: 0; } .lien-bloc .l-titre { font-weight: 800; font-size: 15px; letter-spacing: -.1px; } .lien-bloc .l-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .lien-bloc .l-fleche { flex: none; color: var(--accent); display: inline-flex; } .lien-bloc .l-fleche .lucide { width: 18px; height: 18px; } /* ================================================================ LES RÈGLES DU JEU (page /regles) Six cartes numérotées plutôt qu'un mur de texte : on doit pouvoir comprendre le jeu en balayant la page des yeux, pas en la lisant. Chaque carte prend une teinte de la roue, comme les tuiles de stats. ================================================================ */ .regles-jeu { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; margin: 12px 0 4px; } .regles-jeu .regle-carte:nth-child(6n+1) { --puce: var(--teinte-1); } .regles-jeu .regle-carte:nth-child(6n+2) { --puce: var(--teinte-2); } .regles-jeu .regle-carte:nth-child(6n+3) { --puce: var(--teinte-3); } .regles-jeu .regle-carte:nth-child(6n+4) { --puce: var(--teinte-4); } .regles-jeu .regle-carte:nth-child(6n+5) { --puce: var(--teinte-5); } .regles-jeu .regle-carte:nth-child(6n+6) { --puce: var(--teinte-6); } .regle-carte { display: flex; gap: 11px; align-items: flex-start; min-width: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--puce) 11%, var(--carte)), var(--carte) 62%); border: 1px solid color-mix(in srgb, var(--puce) 24%, transparent); border-radius: 16px; padding: 13px 14px; } /* Le numéro et l'icône dans la même pastille : le chiffre donne l'ordre de lecture, l'icône donne le sujet. */ .regle-carte .r-num { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; width: 38px; height: 38px; border-radius: 13px; background: color-mix(in srgb, var(--puce) 18%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 40%, transparent); } .regle-carte .r-num .lucide { width: 18px; height: 18px; margin: 0; } .regle-carte .r-num b { position: absolute; top: -7px; left: -7px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--puce); color: var(--fond); font-size: 11.5px; font-weight: 800; line-height: 1; } .regle-carte .r-corps { min-width: 0; flex: 1; } .regle-carte .r-titre { font-weight: 800; font-size: 14.5px; letter-spacing: -.1px; color: var(--texte); } .regle-carte .r-texte { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; } .regle-carte .r-texte b { color: var(--puce); font-weight: 700; } /* ---------------------------------------------------------------- Légendes « Ce symbole coloré, là-haut, ça veut dire quoi ? » — une légende répond, une note de bas de page non. Chaque entrée montre le symbole exactement comme il apparaît ailleurs dans l'application. */ .legende { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .legende .lg-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 13px; border-radius: 14px; background: color-mix(in srgb, var(--puce) 10%, var(--carte)); border: 1px solid color-mix(in srgb, var(--puce) 26%, transparent); } .legende .lg-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--puce) 22%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 48%, transparent); } .legende .lg-ico .lucide { width: 16px; height: 16px; margin: 0; } .legende .lg-nom { font-weight: 800; font-size: 13.5px; color: var(--puce); } .legende .lg-hint { font-size: 12px; color: var(--muted); } /* Une entrée de légende qui porte un palier prend son métal comme teinte. Le sélecteur évite d'écrire la couleur dans la vue. */ .legende .lg-item[class*="palier-"] { --puce: var(--matiere); } /* Les repères qui ne sont ni un palier ni une rareté. */ .legende .lg-item.sym-xp { --puce: var(--xp); } .legende .lg-item.sym-piece { --puce: var(--piece); } .legende .lg-item.sym-serie { --puce: var(--serie); } /* Le palier qu'on porte en ce moment : c'est celui qu'on cherchait. */ .legende .lg-item.courant { border-color: var(--puce); outline: 1px solid color-mix(in srgb, var(--puce) 40%, transparent); outline-offset: -3px; background: color-mix(in srgb, var(--puce) 18%, var(--carte)); } /* Les paliers pas encore atteints ne sont pas atténués : une légende sert à reconnaître un symbole, il doit donc rester lisible même si on ne le porte pas encore. Seul le palier courant est souligné (règle ci-dessus). */ /* Le pied de bloc : les petites règles, repliées par défaut. */ .regles-detail { margin-top: 10px; } .regles-detail ul { margin: 6px 0 0; padding-left: 18px; } .regles-detail li { font-size: 13px; color: var(--texte-2); line-height: 1.55; margin: 5px 0; } .regles-detail li b { color: var(--accent-clair); } /* ---------------------------------------------------------------- Frise des 7 jours */ .frise { display: flex; align-items: flex-end; gap: 6px; height: 76px; margin: 10px 0 4px; } .frise .f-jour { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; } .frise .f-barre { width: 100%; border-radius: 8px 8px 4px 4px; min-height: 4px; background: var(--accent-soft); border: 1px solid var(--accent-line); } .frise .f-jour.vide .f-barre { background: var(--voile); border-color: var(--bord-soft); } .frise .f-jour.auj .f-barre { background: var(--degrade); border-color: transparent; } .frise .f-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .frise .f-jour.auj .f-lbl { color: var(--accent); font-weight: 800; } /* ---------------------------------------------------------------- Tuiles de stats */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; margin: 14px 0; } .cards .card:nth-child(6n+1) { --puce: var(--teinte-1); } .cards .card:nth-child(6n+2) { --puce: var(--teinte-2); } .cards .card:nth-child(6n+3) { --puce: var(--teinte-3); } .cards .card:nth-child(6n+4) { --puce: var(--teinte-4); } .cards .card:nth-child(6n+5) { --puce: var(--teinte-5); } .cards .card:nth-child(6n+6) { --puce: var(--teinte-6); } .card { background: linear-gradient(158deg, color-mix(in srgb, var(--puce) 15%, var(--carte-2)), var(--carte) 74%); border: 1px solid color-mix(in srgb, var(--puce) 26%, transparent); border-radius: 18px; padding: 14px 16px; } .card .num { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--puce); } .card .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; } a.card.lien { display: block; color: var(--texte); } a.card.lien:hover { text-decoration: none; border-color: var(--puce); } .cards.mini { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); margin: 12px 0; } .cards.mini .card { padding: 10px 14px; } .cards.mini .num { font-size: 20px; } /* ---------------------------------------------------------------- Panneaux */ .panel { background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 18px; padding: 16px; margin: 14px 0; } .panel.warn { border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: linear-gradient(160deg, var(--warn-soft), var(--carte) 70%); } .panel.ok { border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: linear-gradient(160deg, var(--ok-soft), var(--carte) 70%); } /* Cycle de six : quel que soit le nombre de panneaux d'une page, aucun ne retombe sur la couleur par défaut. Ajouter ou déplacer une section ne demande donc jamais de retoucher cette liste. */ section.panel.logic:nth-of-type(6n+1) { --puce: var(--teinte-1); } section.panel.logic:nth-of-type(6n+2) { --puce: var(--teinte-2); } section.panel.logic:nth-of-type(6n+3) { --puce: var(--teinte-3); } section.panel.logic:nth-of-type(6n+4) { --puce: var(--teinte-4); } section.panel.logic:nth-of-type(6n+5) { --puce: var(--teinte-5); } section.panel.logic:nth-of-type(6n+6) { --puce: var(--teinte-6); } .panel.logic { border-left: 3px solid color-mix(in srgb, var(--puce) 70%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--puce) 7%, var(--carte)), var(--carte) 60%); } .panel.logic h2 { margin-top: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; } .panel-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .panel-tete .p-fin { margin-left: auto; } .ico-h { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--puce) 20%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 34%, transparent); } .ico-h .lucide { width: 18px; height: 18px; } details.bloc { background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 18px; padding: 12px 16px; margin: 12px 0; } details.bloc summary { cursor: pointer; font-weight: 700; padding: 4px 0; } details.bloc summary::marker { color: var(--accent); } details.bloc[open] summary { margin-bottom: 6px; } /* ---------------------------------------------------------------- Page Administration */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 20px; } .admin-tile { display: flex; flex-direction: column; gap: 4px; background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 16px; padding: 13px 14px; color: var(--texte); } .admin-grid .admin-tile:nth-child(6n+1) { --puce: var(--teinte-1); } .admin-grid .admin-tile:nth-child(6n+2) { --puce: var(--teinte-2); } .admin-grid .admin-tile:nth-child(6n+3) { --puce: var(--teinte-3); } .admin-grid .admin-tile:nth-child(6n+4) { --puce: var(--teinte-4); } .admin-grid .admin-tile:nth-child(6n+5) { --puce: var(--teinte-5); } .admin-grid .admin-tile:nth-child(6n+6) { --puce: var(--teinte-6); } .admin-tile:hover { text-decoration: none; border-color: var(--puce); } .admin-tile .ico { position: relative; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--puce) 18%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 30%, transparent); margin-bottom: 2px; } .admin-tile .ico .lucide { width: 18px; height: 18px; } .admin-tile .lbl { font-weight: 700; font-size: 14px; } .admin-tile .hint { font-size: 12px; color: var(--muted); line-height: 1.35; } /* ================================================================ LES QUÊTES : la carte d'objectif Titre, barre, et ce que ça rapporte. Une quête gagnée s'éteint au lieu de disparaître : voir ce qu'on a fait fait partie du plaisir. ================================================================ */ .quetes-liste { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; } .q-carte { display: flex; gap: 13px; align-items: flex-start; background: linear-gradient(100deg, color-mix(in srgb, var(--puce) 10%, var(--carte)), var(--carte) 52%); border: 1px solid color-mix(in srgb, var(--puce) 22%, transparent); border-left: 4px solid var(--puce); border-radius: 16px; padding: 13px 15px; min-width: 0; } .q-carte .q-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--puce) 18%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 40%, transparent); } .q-carte .q-ico .lucide { width: 20px; height: 20px; } .q-carte .q-corps { flex: 1; min-width: 0; } .q-carte .q-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .q-carte .q-titre { font-weight: 700; font-size: 15.5px; letter-spacing: -.15px; overflow-wrap: anywhere; } .q-carte .q-aide { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 1px; } .q-carte .q-gain { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; } /* Une quête presque gagnée passe à l'or : bordure, liseré et médaillon. */ .q-carte.presque { --puce: var(--piece); } /* Une quête déjà gagnée : bordure verte, contenu en retrait. */ .q-carte.gagnee { --puce: var(--ok); opacity: .78; } .q-carte.gagnee .q-titre { text-decoration: none; } /* Étiquette de gain (« +40 points », « +5 pièces ») */ .gain { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--xp-soft); color: var(--xp); border: 1px solid color-mix(in srgb, var(--xp) 38%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; } .gain .lucide { width: 12px; height: 12px; margin: 0; } .gain.piece { background: var(--piece-soft); color: var(--piece); border-color: color-mix(in srgb, var(--piece) 38%, transparent); } .gain.neutre { background: var(--voile-fort); color: var(--muted); border-color: var(--bord-soft); } .gain.moins { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 38%, transparent); } /* ================================================================ LES TROPHÉES : une vitrine, pas une liste Chaque trophée porte la MATIÈRE de sa rareté (--puce, posée par la classe .rarete-*) : fond, contour, médaillon et date s'accordent. ================================================================ */ .trophees-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 12px 0; } .t-carte { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--puce) 16%, var(--carte-2)), var(--carte) 72%); border: 1px solid color-mix(in srgb, var(--puce) 34%, transparent); border-radius: 18px; padding: 16px 13px; color: var(--texte); min-width: 0; } /* Le médaillon : un disque de la matière du trophée, avec son anneau. */ .t-carte .t-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(150deg, color-mix(in srgb, var(--puce) 44%, transparent), color-mix(in srgb, var(--puce) 12%, transparent)); color: var(--puce); border: 2px solid color-mix(in srgb, var(--puce) 56%, transparent); outline: 1px solid color-mix(in srgb, var(--puce) 22%, transparent); outline-offset: 3px; } .t-carte .t-ico .lucide { width: 26px; height: 26px; } .t-carte .t-titre { font-weight: 800; font-size: 14.5px; letter-spacing: -.15px; overflow-wrap: anywhere; } .t-carte .t-aide { font-size: 12px; color: var(--muted); line-height: 1.4; } .t-carte .t-date { font-size: 11.5px; color: var(--puce); font-weight: 700; } .t-carte .barre { width: 100%; } .t-carte .t-neuf { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); } /* Un trophée verrouillé reste visible mais gris : il faut voir ce qu'on n'a pas encore. Sa rareté, elle, reste lisible — c'est ce qui donne envie. */ .t-carte.verrouille { background: var(--carte); border-color: var(--bord-soft); } .t-carte.verrouille .t-ico { background: var(--voile); color: var(--muted); border-color: var(--bord-soft); outline-color: transparent; } .t-carte.verrouille .t-titre { color: var(--texte-2); } .t-carte.verrouille .t-date { color: var(--muted); } /* La collection : une pastille par rareté, avec le compte. Résume la vitrine en une ligne. */ .collection { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .collection .col-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--puce) 14%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 40%, transparent); font-variant-numeric: tabular-nums; } .collection .col-pastille .lucide { width: 15px; height: 15px; margin: 0; } .collection .col-pastille small { color: var(--muted); font-weight: 600; } .collection .col-pastille.vide { background: var(--voile); color: var(--muted); border-color: var(--bord-soft); } /* ================================================================ LA BOUTIQUE ================================================================ */ .articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; } .article { display: flex; flex-direction: column; gap: 7px; background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 12%, var(--carte-2)), var(--carte) 68%); border: 1px solid var(--accent-line); border-radius: 18px; padding: 16px; } .article.trop-cher { background: var(--carte); border-color: var(--bord-soft); } .article .a-tete { display: flex; align-items: center; gap: 10px; } .article .a-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .article.trop-cher .a-ico { background: var(--voile); color: var(--muted); border-color: var(--bord-soft); } .article .a-ico .lucide { width: 19px; height: 19px; } .article .a-titre { font-weight: 800; font-size: 15.5px; letter-spacing: -.15px; min-width: 0; overflow-wrap: anywhere; } .article .a-aide { font-size: 12.5px; color: var(--muted); line-height: 1.45; flex: 1; } .article .a-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .article .a-pied form { margin: 0; } .article .a-manque { font-size: 12px; color: var(--muted); } /* Le prix porte la matière de la récompense : une petite en cuivre, une grosse en or. On situe l'effort avant même de lire le chiffre. */ .article .a-jauge { margin-top: 4px; } .article .a-jauge .barre { margin: 4px 0 2px; } /* ================================================================ LE FIL DES GAINS (accueil et /histoire) ================================================================ */ .fil { display: flex; flex-direction: column; margin: 8px 0; } .fil-ligne { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bord-soft); min-width: 0; } .fil-ligne:last-child { border-bottom: 0; } .fil-ligne .f-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 11px; background: var(--voile-fort); color: var(--muted); border: 1px solid var(--bord-soft); } .fil-ligne .f-ico .lucide { width: 15px; height: 15px; } .fil-ligne.cat-quete .f-ico { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .fil-ligne.cat-trophee .f-ico { background: var(--piece-soft); color: var(--piece); border-color: color-mix(in srgb, var(--piece) 42%, transparent); } .fil-ligne.cat-niveau .f-ico { background: var(--xp-soft); color: var(--xp); border-color: color-mix(in srgb, var(--xp) 42%, transparent); } .fil-ligne .f-corps { flex: 1; min-width: 0; } .fil-ligne .f-titre { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .fil-ligne .f-sous { font-size: 12px; color: var(--muted); } .fil-ligne .f-gains { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .fil-jour { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); font-weight: 700; padding: 14px 0 4px; border-bottom: 1px solid var(--accent-line); } /* ================================================================ LES MONDES : les trois applications vues comme un jeu ================================================================ */ .mondes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; } .monde-carte { display: flex; flex-direction: column; gap: 5px; min-width: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--puce) 14%, var(--carte-2)), var(--carte) 70%); border: 1px solid color-mix(in srgb, var(--puce) 30%, transparent); border-left: 4px solid var(--puce); border-radius: 18px; padding: 14px 16px; color: var(--texte); } .monde-carte:hover { text-decoration: none; border-color: var(--puce); } .monde-carte .m-tete { display: flex; align-items: center; gap: 9px; } .monde-carte .m-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--puce) 20%, transparent); color: var(--puce); border: 1px solid color-mix(in srgb, var(--puce) 42%, transparent); } .monde-carte .m-ico .lucide { width: 18px; height: 18px; } .monde-carte .m-nom { font-weight: 800; font-size: 15.5px; } .monde-carte .m-titre { font-size: 12.5px; color: var(--muted); } .monde-carte .m-pied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .monde-carte.hors { --puce: var(--err); } /* ================================================================ ACTIONS LIBRES : les boutons du bas de l'accueil ================================================================ */ .actions-libres { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .actions-libres form { margin: 0; } .action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 14px; cursor: pointer; font-weight: 700; font-size: 14px; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); } .action-btn:hover { border-color: var(--accent); } .action-btn .lucide { width: 17px; height: 17px; color: var(--accent); margin: 0; } .action-btn .a-gain { font-size: 12px; color: var(--xp); font-weight: 800; } .action-btn.epuise { opacity: .45; } .action-btn[disabled] { cursor: not-allowed; } /* ---------------------------------------------------------------- Tableaux */ table.liste { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 16px; overflow: hidden; font-size: 14px; } table.liste th { text-align: left; background: var(--voile); padding: 9px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); border-bottom: 1px solid var(--accent-line); } table.liste td { padding: 8px 12px; border-top: 1px solid var(--bord-soft); vertical-align: top; } table.liste tr:hover td { background: color-mix(in srgb, var(--accent) 9%, transparent); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; } .num-cell { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* ---------------------------------------------------------------- Badges */ .badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-clair); white-space: nowrap; border: 1px solid var(--accent-line); } .badge.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); } .badge.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); } .badge.err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 42%, transparent); } .badge.gris { background: var(--voile-fort); color: var(--muted); border-color: var(--bord-soft); } .badge .lucide { width: 13px; height: 13px; vertical-align: -.15em; margin-right: 2px; } /* ---------------------------------------------------------------- Formulaires */ form.inline { display: inline; } input, select, textarea, button { font: inherit; padding: 9px 12px; border: 1px solid var(--bord); border-radius: 12px; background: var(--champ); color: var(--texte); max-width: 100%; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; } select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b90bf' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; padding: 0; } input[type="date"], input[type="time"] { color-scheme: dark; } textarea { width: 100%; min-height: 76px; } button, .btn { background: var(--degrade); border: 0; color: var(--sur-accent); cursor: pointer; border-radius: 12px; padding: 10px 16px; display: inline-block; font-size: 14px; font-weight: 700; } button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; } button:active, .btn:active { transform: scale(.97); } button.sec, .btn.sec { background: var(--accent-soft); color: var(--accent-clair); border: 1px solid var(--accent-line); } button.sec:hover, .btn.sec:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } button.neutre, .btn.neutre { background: transparent; color: var(--texte-2); border: 1px solid var(--bord); } button.neutre:hover, .btn.neutre:hover { border-color: var(--accent); color: var(--texte); } button.danger, .btn.danger { background: var(--degrade-err); color: #fff; } button.mini, .btn.mini { padding: 5px 12px; font-size: 13px; border-radius: 10px; } button.icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; } button.icone .lucide { margin: 0; } button[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; } /* Grille de formulaire (mêmes classes que les trois autres applications) */ .champs-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 4px; } .ch { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ch.plein { grid-column: 1 / -1; } .ch > label { font-size: 13px; font-weight: 600; color: var(--texte-2); display: flex; align-items: center; gap: 6px; } .ch > label .lucide { width: 15px; height: 15px; color: var(--muted); } .ch .oblig { color: var(--accent); } .ch input, .ch select, .ch textarea { width: 100%; } .ch .aide { font-size: 12px; color: var(--muted); } .ch-cases { display: flex; flex-wrap: wrap; gap: 8px; } .ch-cases label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; border: 1px solid var(--bord); border-radius: 12px; padding: 7px 12px; background: var(--champ); } .ch-cases label:has(> input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-clair); } .groupe-titre { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); } .groupe-titre .lucide { width: 14px; height: 14px; color: var(--accent); } .groupe-titre::after { content: ""; flex: 1; height: 1px; background: var(--bord-soft); } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; align-items: center; } .filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; } .filtres input, .filtres select { padding: 8px 10px; } .champ-large { min-width: 340px; flex: 1 1 340px; } .erreur-msg { color: var(--err); background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); border-left: 3px solid var(--err); border-radius: 12px; padding: 10px 14px; margin: 10px 0; } .succes-msg { color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-left: 3px solid var(--ok); border-radius: 12px; padding: 10px 14px; margin: 10px 0; } /* ---------------------------------------------------------------- Divers */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .kv { margin: 5px 0; overflow-wrap: break-word; } .kv b { display: inline-block; min-width: 150px; color: var(--muted); font-weight: 500; font-size: 13px; } .actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; } .pile { display: flex; flex-direction: column; gap: 4px; } /* Ligne de réglage (barème, quêtes, trophées, actions, récompenses) : la même dans les cinq listes de l'administration. */ .reglage-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 14px; padding: 10px 12px; margin: 8px 0; } .reglage-ligne.inactif { opacity: .55; } .reglage-ligne .r-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .reglage-ligne .r-ico .lucide { width: 17px; height: 17px; } .reglage-ligne .r-info { flex: 1; min-width: 180px; } .reglage-ligne .r-titre { font-weight: 700; } .reglage-ligne .r-sous { font-size: 12px; color: var(--muted); } .reglage-ligne .r-marques { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .reglage-ligne .r-actions { display: flex; gap: 6px; align-items: center; } .ordre-btns { display: flex; gap: 4px; } .ordre-btns button { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--bord); color: var(--muted); border-radius: 10px; } .ordre-btns button:hover { border-color: var(--accent); color: var(--accent); } .ordre-btns .lucide { margin: 0; width: 16px; height: 16px; } .login-box { max-width: 400px; margin: 14vh auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 22px; padding: 30px 26px; } .login-box h1 { text-align: center; } .login-box input { width: 100%; margin: 8px 0; } .login-box button { width: 100%; margin-top: 10px; padding: 12px; } .pagination { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); } .pagination .cur { background: var(--degrade); color: var(--sur-accent); border-color: transparent; font-weight: 700; } /* Pastille de notification (quêtes du jour restantes) */ .notif-dot { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; background: var(--degrade-err); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ================================================================ MODE APPLICATION (≤ 900px) : topbar + tabbar flottante ================================================================ */ @media (max-width: 900px) { .layout { display: block; } .topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: color-mix(in srgb, var(--fond) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--bord-soft); padding: 10px 16px; padding-top: calc(10px + var(--safe-top)); padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); } .topbar .brand-ico { margin: 0; } .topbar-title { flex: 1; font-weight: 800; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Le niveau dans la topbar : petit, discret, toujours là. */ /* La pastille de niveau porte la matière du palier (cuivre, argent, or…) : un changement de palier se voit depuis n'importe quelle page. */ .topbar-niveau { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; background: color-mix(in srgb, var(--matiere, var(--xp)) 18%, transparent); color: var(--matiere, var(--xp)); border: 1px solid color-mix(in srgb, var(--matiere, var(--xp)) 44%, transparent); font-variant-numeric: tabular-nums; } .topbar-niveau .lucide { width: 14px; height: 14px; } .topbar-niveau:hover { text-decoration: none; } /* Bouton texte « Admin » (sans icône) : même convention que l'Annuaire. */ .topbar-admin { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: var(--voile-fort); border: 1px solid var(--bord); color: var(--texte); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; flex: none; } .topbar-admin:hover { text-decoration: none; border-color: var(--accent); } .topbar-admin.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-clair); } .topbar-bell { position: relative; display: inline-flex; padding: 4px 2px; color: var(--texte); flex: none; } .topbar-bell .lucide { width: 22px; height: 22px; color: var(--accent); } .topbar-bell:hover { text-decoration: none; } /* Pastille d'encre OPAQUE flottante, détachée des bords, sans bordure ni flou. Les 4 onglets sont strictement identiques : la seule destination mise en avant est la page ouverte. Ne pas réintroduire de trait, d'ombre, de bouton flottant ni de backdrop-filter ici. */ .tabbar { display: flex; align-items: stretch; gap: 6px; position: fixed; z-index: 60; left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); bottom: calc(4px + var(--safe-bottom)); transform: translateY(15px); padding: 7px; background: var(--tabbar-base); border-radius: 26px; } body::after { content: ""; position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; height: calc(4px + var(--safe-bottom)); pointer-events: none; background: var(--tabbar-base); } .tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 2px; color: var(--muted); text-decoration: none; cursor: pointer; font-weight: 700; line-height: 1; letter-spacing: -.01em; border-radius: 20px; background: transparent; -webkit-user-select: none; user-select: none; transition: background .16s ease, color .16s ease, transform .1s ease; } .tab:hover { text-decoration: none; } .tab:active { transform: scale(.95); } .tab .t-ico { display: flex; align-items: center; justify-content: center; } .tab .t-ico .lucide { width: 25px; height: 25px; } .tab .t-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .tab.on { background: var(--accent-soft); color: var(--accent-clair); font-weight: 800; } .tab.on .t-ico { color: var(--accent); } .sidebar { display: none; } .content { padding: calc(64px + var(--safe-top)) 14px calc(96px + var(--safe-bottom)); padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); } .grid2, .grid3 { grid-template-columns: 1fr; } .login-box { margin: max(8vh, calc(24px + var(--safe-top))) auto; padding: 26px 20px; max-width: min(400px, calc(100vw - 28px)); } } /* ================================================================ SMARTPHONE (≤ 740px) : champs empilés, tactile ≥ 44px, 16px (anti-zoom iOS) ================================================================ */ @media (max-width: 740px) { input, select, textarea, button, .btn { font-size: 16px; } input, select { padding: 11px 12px; } button, .btn { min-height: 46px; padding: 11px 18px; } button.mini, .btn.mini { min-height: 40px; padding: 7px 14px; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; } button.icone { min-height: 44px; width: 44px; } .ordre-btns button { min-height: 38px; width: 38px; } .action-btn { min-height: 46px; font-size: 15px; } h1 { font-size: 21px; } .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; } .card { padding: 12px 14px; } .panel { padding: 14px; border-radius: 16px; } details.bloc { padding: 10px 14px; border-radius: 16px; } /* Le bandeau du joueur : la pastille de niveau et le rang sur la même ligne, les monnaies en dessous — c'est l'ordre de lecture. */ .joueur { padding: 15px 16px; gap: 13px; border-radius: 20px; } .niveau-pastille { width: 64px; height: 64px; border-radius: 20px; } .niveau-pastille .n-num { font-size: 26px; } .joueur .j-corps { flex: 1 1 100%; } .trophees-grille { grid-template-columns: repeat(2, 1fr); gap: 10px; } .t-carte { padding: 13px 10px; } .t-carte .t-ico { width: 48px; height: 48px; border-radius: 16px; } .t-carte .t-ico .lucide { width: 22px; height: 22px; } .articles { grid-template-columns: 1fr; } .mondes { grid-template-columns: 1fr; } .champs-form { grid-template-columns: 1fr; } .ch.plein { grid-column: auto; } .filtres { gap: 10px; } .filtres > input:not([type=checkbox]):not([type=radio]), .filtres > select, .filtres > textarea { flex: 1 1 100%; width: 100%; } .filtres > button, .filtres > .btn { flex: 1 1 auto; } .filtres > label { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .filtres > label > select, .filtres > label > input:not([type=checkbox]):not([type=radio]):not([type=number]) { flex: 1 1 auto; width: auto; min-width: 0; } .filtres > label:has(> input[type=checkbox]) { flex: 0 1 auto; justify-content: flex-start; } .filtres input[style*="min-width"], .champ-large { min-width: 0 !important; width: 100% !important; flex: 1 1 100%; } .kv b { display: block; min-width: 0; } .actions-row form.inline { display: contents; } /* Tableaux « cartes » : chaque ligne devient une fiche empilée */ table.liste.cartes { display: block; border: 0; background: none; overflow: visible; } table.liste.cartes thead, table.liste.cartes tbody { display: block; } table.liste.cartes tr { display: block; background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 16px; margin: 10px 0; padding: 12px 14px; } table.liste.cartes tr:first-child { display: none; } table.liste.cartes tr:hover td { background: transparent; } table.liste.cartes td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border: 0; padding: 3px 0; overflow-wrap: anywhere; } table.liste.cartes td[data-th]::before { content: attr(data-th); flex: 0 0 96px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; line-height: 2.1; } table.liste.cartes td:empty { display: none; } table.liste.cartes td .badge { align-self: center; } table.liste.cartes td.num-cell { text-align: left; } .pagination a, .pagination span { padding: 9px 14px; } textarea { min-height: 92px; } .reglage-ligne .r-actions { width: 100%; justify-content: flex-end; } } /* ================================================================ iPhone étroit (≤ 380px) ================================================================ */ @media (max-width: 380px) { .tabbar { gap: 4px; padding: 6px; } .tab { min-height: 62px; gap: 5px; border-radius: 18px; } .tab .t-ico .lucide { width: 23px; height: 23px; } .tab .t-lbl { font-size: 12px; } .topbar-admin { padding: 6px 11px; font-size: 13px; } .topbar { gap: 9px; } .topbar-niveau { padding: 5px 8px; font-size: 12.5px; } .niveau-pastille { width: 58px; height: 58px; } .niveau-pastille .n-num { font-size: 23px; } } /* ================================================================ Impression : fond clair lisible (la vitrine des trophées) ================================================================ */ @media print { :root { color-scheme: light; } body { background: #fff !important; color: #111 !important; } .sidebar, .topbar, .tabbar, .filtres button, .logout-form, .form-actions, .actions-libres, .actions-row { display: none !important; } body::after { content: none !important; } .content { padding: 0; } .panel, .card, table.liste, details.bloc, .t-carte, .q-carte, .article, .joueur, .monde-carte, .reglage-ligne { background: #fff !important; color: #111 !important; border-color: #ccc !important; } .niveau-pastille { background: #fff !important; color: #111 !important; border: 2px solid #111; } .badge, .gain, .monnaie { color: #111 !important; background: #fff !important; border-color: #999 !important; } table.liste td, table.liste th { color: #111 !important; background: #fff !important; } a { color: #6d28d9; } .muted, .kv b { color: #555 !important; } }