/* Espace adhérent Cel'EST Paris — feuille commune aux pages de l'espace (/, /agenda, /billets, /boutique, /commandes, /profil). Chaque page porte sa propre coquille (barre du haut, pied, barre basse mobile) et un attribut data-page sur ; les quelques règles propres à une page sont préfixées .page-. Desktop = thème clair ; mobile ≤ 820 px = thème sombre « matchday » (1b), hors écrans de connexion. */ body { margin:0; } .esp { font-family:'General Sans','Switzer',sans-serif; color:#3B0A16; background:#FAF5EC; min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column; } [hidden] { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---- Connexion ---- */ .login-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:48px 20px; position:relative; } .login-wrap::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(122,26,42,0.12), transparent 60%); pointer-events:none; } .login-card { position:relative; width:100%; max-width:420px; background:#FFFDF8; border:1px solid rgba(166,118,7,0.28); padding:40px 34px 34px; text-align:center; box-shadow:0 24px 60px rgba(59,10,22,0.10); } .login-card img { width:74px; height:74px; object-fit:contain; } .login-card h1 { font-size:30px; margin:16px 0 2px; letter-spacing:-0.5px; text-transform:uppercase; } .login-card .sub { margin:0 0 26px; font-size:13.5px; color:rgba(59,10,22,0.55); letter-spacing:0.3px; } .field { display:flex; flex-direction:column; gap:7px; text-align:left; margin-bottom:16px; } .field label { font-size:12px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:rgba(59,10,22,0.7); } .field input { font:inherit; font-size:15px; color:#3B0A16; background:#FAF5EC; border:1px solid rgba(166,118,7,0.35); padding:13px 14px; width:100%; box-sizing:border-box; } .field input:focus { outline:none; border-color:#C7920F; box-shadow:0 0 0 3px rgba(223,163,43,0.18); } /* Œil pour afficher/masquer un mot de passe */ .pw-wrap { position:relative; } .pw-wrap input { padding-right:44px; } .pw-eye { position:absolute; top:0; right:0; height:100%; width:42px; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } .pw-eye::before { content:""; width:20px; height:20px; background-position:center; background-repeat:no-repeat; background-size:contain; opacity:0.55; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B0A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .pw-eye:hover::before { opacity:0.85; } .pw-eye[aria-pressed="true"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B0A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .btn-g { background:linear-gradient(135deg,#F1B51D,#d99a06); color:#160505; border:none; cursor:pointer; font:inherit; font-weight:900; font-size:15.5px; padding:15px 28px; width:100%; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); } .btn-g:disabled { opacity:0.6; cursor:default; } .status-msg { font-size:13.5px; font-weight:600; line-height:1.5; margin:14px 0 0; min-height:1em; } .status-msg.err { color:#A3132E; } .login-help { margin:20px 0 0; font-size:12.5px; line-height:1.6; color:rgba(59,10,22,0.55); } .login-help a, .link { color:#A67607; font-weight:700; text-decoration:none; cursor:pointer; background:none; border:none; font:inherit; padding:0; } .login-help a:hover, .link:hover { text-decoration:underline; } /* ---- Mot de passe oublié (écran dédié) ---- */ .fp-ok { width:54px; height:54px; margin:10px auto 18px; border-radius:50%; background:rgba(38,138,60,0.12); color:#1e7a1e; font-size:28px; font-weight:900; display:flex; align-items:center; justify-content:center; } .fp-msg { font-size:14.5px; line-height:1.6; margin:0 0 10px; } .fp-msg b { color:#A67607; overflow-wrap:anywhere; } .fp-note { font-size:12.5px; line-height:1.6; color:rgba(59,10,22,0.55); margin:0 0 22px; } /* ---- Barre du haut : une page par entrée (aucune ancre) ---- */ .topbar { background:rgba(250,245,236,0.92); border-bottom:1px solid rgba(166,118,7,0.22); position:sticky; top:0; z-index:10; backdrop-filter:blur(6px); } .topbar-in { max-width:1160px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:14px; } .brand-link { display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; } .topbar img { width:40px; height:40px; object-fit:cover; border-radius:50%; border:2px solid #F1B51D; } .topbar .brand b { font-weight:900; font-size:16px; letter-spacing:0.4px; } .brand-gold { color:#A67607; } .topbar .brand span.sub { display:block; font-size:9.5px; color:rgba(59,10,22,0.5); font-weight:700; letter-spacing:1.6px; } .top-nav { display:flex; gap:20px; margin-left:26px; font-size:12.5px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; } .top-nav a { color:rgba(59,10,22,0.6); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; } .top-nav a:hover { color:#A67607; } /* Page courante : posée en HTML (aria-current="page"), sans JS */ .top-nav a[aria-current="page"] { color:#A67607; border-bottom-color:#F1B51D; } .topbar .who { margin-left:auto; font-size:13px; color:rgba(59,10,22,0.6); font-weight:600; } .who-chip { display:none; margin-left:auto; width:34px; height:34px; border-radius:50%; background:rgba(241,181,29,0.15); border:1px solid rgba(241,181,29,0.4); color:#F1B51D; font-size:11.5px; font-weight:900; align-items:center; justify-content:center; } .btn-out { background:none; border:1px solid rgba(166,118,7,0.5); color:#7A1A2A; cursor:pointer; font:inherit; font-weight:700; font-size:13px; padding:8px 16px; letter-spacing:0.3px; } .btn-out:hover { border-color:#A67607; background:rgba(166,118,7,0.08); } .topbar .who { margin-left:auto; } .topbar .who + .who-chip { margin-left:0; } /* ---- Contenu de la page ---- #v-app remplit la hauteur restante de .esp et empile barre du haut, contenu, pied : le contenu prend le reste, le pied reste en bas de l'écran même sur une page courte (agenda vide, un seul billet…). */ #v-app { flex:1; display:flex; flex-direction:column; } .content { flex:1; max-width:1160px; margin:0 auto; width:100%; padding:34px 28px 80px; box-sizing:border-box; } /* Pages de lecture (agenda, billets, commandes, profil) : colonne plus étroite */ .content-narrow { max-width:900px; } .welcome-tag { color:#A67607; font-weight:800; font-size:11.5px; letter-spacing:3px; text-transform:uppercase; } .sec-title { font-size:12px; font-weight:800; letter-spacing:2.5px; color:#A67607; margin:36px 0 14px; } /* Premier titre d'une page : collé en haut (les suivants gardent leur marge) */ .content > .sec-title:first-of-type { margin-top:0; } /* Renvoi vers une autre page de l'espace, en pied de section */ .page-links { margin:14px 0 0; display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; font-weight:800; } .page-links a { color:#A67607; text-decoration:none; } .page-links a:hover { text-decoration:underline; } /* Panne au chargement d'une page (session gardée) : message en tête */ .app-status { margin:0 0 18px; } .app-status:empty { display:none; } /* ---- Héros : carte + prochain rendez-vous ---- */ .hero { display:grid; grid-template-columns:440px 1fr; gap:28px; align-items:start; margin-top:14px; } .hero .sec-title:first-child { margin-top:0; } /* Carte adhérent */ .card-member { background:linear-gradient(135deg,#5E0F1F,#300811); color:#FFF7E6; padding:26px 28px; position:relative; overflow:hidden; box-shadow:0 20px 50px rgba(59,10,22,0.22); } .card-member::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(241,181,29,0.22),transparent 70%); } /* Kicker, mention ACTIF et rappel QR : réservés à la carte condensée mobile (1b) */ .card-member .cm-kicker { display:none; } .card-member .cm-role-actif { display:none; } .card-member .cm-hint-in { display:none; } .card-member .cm-top { display:flex; align-items:center; gap:10px; position:relative; } .card-member .cm-top img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(241,181,29,0.7); } .card-member .cm-top .t1 { font-weight:900; letter-spacing:0.5px; font-size:14px; } .card-member .cm-top .t2 { font-size:9px; letter-spacing:2px; color:rgba(255,247,230,0.6); font-weight:700; } /* flex-wrap + min-width:0 : un nom long fait passer le QR à la ligne au lieu de le pousser hors de la carte (overflow:hidden le rendrait inscannable — c'est tout l'usage de ce QR à l'entrée des événements) */ .card-member .cm-main { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px; margin-top:22px; position:relative; } .card-member .cm-main > div:first-child { min-width:0; } .card-member .cm-name { font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:26px; letter-spacing:0.5px; text-transform:uppercase; overflow-wrap:anywhere; } .card-member .cm-role { font-size:12px; color:#F1B51D; font-weight:800; letter-spacing:1.5px; margin-top:2px; } .card-member .cm-qr { flex:0 0 auto; width:92px; height:92px; box-sizing:border-box; background:#FFFDF8; padding:7px; border-radius:6px; } .card-member .cm-qr svg { display:block; width:100%; height:100%; } .card-member .cm-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:12px 18px; flex-wrap:wrap; margin-top:20px; position:relative; } .card-member .cm-foot .lbl { font-size:8.5px; letter-spacing:1.6px; color:rgba(255,247,230,0.5); font-weight:700; } .card-member .cm-foot .val { font-size:13.5px; font-weight:800; letter-spacing:0.5px; } .card-member .cm-badge { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:1px; color:#160505; background:#F1B51D; padding:5px 11px; } .cm-hint { margin:10px 0 0; font-size:12.5px; line-height:1.5; color:rgba(59,10,22,0.55); } .wallet-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; } .btn-wallet { appearance:none; border:0; background:#000; color:#FFF; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:0.4px; padding:11px 16px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1; } .btn-wallet:hover { background:#1c1c1c; } .btn-wallet .wallet-logo { height:18px; width:auto; display:block; } .btn-wallet:disabled { opacity:0.55; cursor:default; } .wallet-status { font-size:12.5px; color:rgba(59,10,22,0.6); flex-basis:100%; } .wallet-status.err { color:#A3132E; } .wallet-status:empty { display:none; } /* Aperçu du prochain rendez-vous sous la carte — version mobile uniquement (sur desktop, le rendez-vous est déjà dans le héros à droite) */ .rdv-teaser { display:none; } /* Prochain rendez-vous (héros droite) */ .rdv-big { background:linear-gradient(135deg,#7A1A2A,#4A0D18); color:#FFF7E6; padding:24px 26px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; } .rdv-big .rb-date { text-align:center; border-right:1px solid rgba(241,181,29,0.35); padding-right:22px; } .rdv-big .rb-date .d { font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:44px; line-height:1; color:#F1B51D; } .rdv-big .rb-date .m { font-size:10.5px; font-weight:800; letter-spacing:2px; margin-top:4px; white-space:nowrap; } .rdv-big .rb-date .dm { display:none; } /* date en une ligne : version mobile 1b */ .rdv-big .rb-body { flex:1; min-width:220px; } .rdv-big h3 { font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:22px; letter-spacing:0.5px; margin:0; text-transform:uppercase; } .rdv-big p { font-size:13px; color:rgba(255,247,230,0.78); margin:6px 0 0; line-height:1.55; } .rdv-big .rb-lieu { display:block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:0.4px; color:rgba(255,247,230,0.6); text-decoration:none; } .rdv-big .rb-lieu:hover { color:#FFF7E6; } /* Adresse cliquable (appli de plans) + tarif de la place : gratuit ou prix */ .lieu-go { margin-left:8px; font-size:11px; font-weight:900; color:#F1B51D; white-space:nowrap; } .rb-tarif-row { margin-top:9px; } .rb-tarif { display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; padding:4px 10px; background:rgba(241,181,29,0.16); color:#F1B51D; border:1px solid rgba(241,181,29,0.35); } .rb-tarif.gratuit { background:rgba(255,247,230,0.08); color:rgba(255,247,230,0.85); border-color:rgba(255,247,230,0.25); } .rdv-big .rb-act { display:flex; flex-direction:column; gap:10px; } .rdv-big .rb-all { text-align:center; font-size:12px; font-weight:800; color:#F1B51D; text-decoration:none; } .rdv-big .rb-all:hover { text-decoration:underline; } .btn-rdv { background:linear-gradient(135deg,#F1B51D,#d99a06); color:#160505; text-decoration:none; text-align:center; font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:0.3px; padding:12px 22px; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); } .rdv-vide { background:#FFFDF8; border:1px dashed rgba(166,118,7,0.35); padding:26px; text-align:center; font-size:14px; color:rgba(59,10,22,0.55); } .rdv-list { display:grid; gap:8px; margin-top:10px; } .rdv-row { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); padding:13px 18px; display:flex; gap:6px 18px; align-items:baseline; flex-wrap:wrap; } .rdv-row .rr-date { font-size:11.5px; font-weight:900; color:#A67607; letter-spacing:1px; white-space:nowrap; } .rdv-row b { font-size:13.5px; text-transform:uppercase; letter-spacing:-0.2px; } .rdv-row .rr-info { font-size:12px; color:rgba(59,10,22,0.6); } .rdv-row a { margin-left:auto; font-size:12.5px; font-weight:800; color:#A67607; text-decoration:none; white-space:nowrap; } .rdv-row a:hover { text-decoration:underline; } /* l'adresse est un lien (plan) mais reste dans le flux, jamais poussée à droite */ .rdv-row a.rr-lieu { margin-left:0; font-size:12px; font-weight:700; color:rgba(59,10,22,0.5); white-space:normal; } .rdv-row a.rr-lieu:hover { color:#3B0A16; text-decoration:none; } .rdv-row .rr-tarif { margin-left:auto; font-size:10.5px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; color:rgba(59,10,22,0.45); white-space:nowrap; } .rdv-links { margin:12px 0 0; display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; font-weight:800; } .rdv-links a { color:#A67607; text-decoration:none; } .rdv-links a:hover { text-decoration:underline; } /* Desktop : « Tout l'agenda → » vit DANS la grande carte (maquette 1a) ; le doublon de la rangée de liens ne sert que sur mobile, après la liste (1b). */ .rdv-links .lnk-agenda { display:none; } /* Accueil : la grande carte n'est qu'un aperçu — les renvois vers /agenda et /billets vivent dans la rangée de liens sous la carte, pas dedans. */ .page-accueil .rdv-big .rb-all { display:none; } /* ---- Commande en cours (bandeau sous le héros) ---- */ .cmd-strip { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); border-left:4px solid #F1B51D; margin-top:28px; padding:14px 20px; display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; } .cmd-strip .cs-ref { font-size:13.5px; font-weight:900; } .cmd-strip .cs-desc { font-size:13px; color:rgba(59,10,22,0.65); } .cmd-strip .cs-mode { font-size:12.5px; color:rgba(59,10,22,0.5); } .cmd-strip a { margin-left:auto; font-size:12.5px; font-weight:800; color:#A67607; text-decoration:none; white-space:nowrap; } .cmd-strip a:hover { text-decoration:underline; } /* ---- Boutique adhérent ---- */ .shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; } .shop-card { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); display:flex; flex-direction:column; overflow:hidden; } .shop-card img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; } .shop-card.epuise img { filter:grayscale(0.6); opacity:0.75; } /* Carte visée par un lien de partage (/boutique?id=…) */ .shop-card.cible { box-shadow:0 0 0 2px #A67607, 0 14px 36px rgba(166,118,7,0.28); } .shop-card .sc-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1; } .shop-card h3 { margin:0; font-size:14.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.2px; } .shop-card .sc-prix { font-size:13.5px; font-weight:800; color:#A67607; } .shop-card .sc-stock { font-size:11.5px; font-weight:700; letter-spacing:0.5px; color:rgba(59,10,22,0.5); } .shop-card .sc-stock.alerte { color:#A67607; } .shop-card .sc-stock.rupture { color:#A3132E; } .btn-shop { margin-top:auto; display:block; text-align:center; text-decoration:none; background:linear-gradient(135deg,#F1B51D,#d99a06); color:#160505; font-weight:900; font-size:13px; padding:11px 10px; letter-spacing:0.4px; text-transform:uppercase; } .btn-shop.off { background:rgba(59,10,22,0.08); color:rgba(59,10,22,0.45); pointer-events:none; } .shop-vide { grid-column:1/-1; background:#FFFDF8; border:1px dashed rgba(166,118,7,0.35); padding:26px; text-align:center; font-size:14px; color:rgba(59,10,22,0.55); } .shop-note { font-size:12.5px; color:rgba(59,10,22,0.5); margin:10px 0 0; } .shop-note a { color:#A67607; font-weight:700; } .shop-note a:hover { text-decoration:underline; } /* ---- Mes commandes ---- */ .cmd-list { display:flex; flex-direction:column; gap:14px; } .cmd-vide { background:#FFFDF8; border:1px dashed rgba(166,118,7,0.35); padding:26px; text-align:center; font-size:14px; color:rgba(59,10,22,0.55); } .cmd-card { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); padding:18px 20px; } .cmd-head { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-bottom:12px; } .cmd-ref { font-weight:900; font-size:15px; letter-spacing:0.3px; } .cmd-date { font-size:12.5px; color:rgba(59,10,22,0.5); } .cmd-head .spacer { flex:1; } .cmd-pill { font-size:11px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; padding:4px 11px; border-radius:2px; white-space:nowrap; } .cmd-pill.cours { background:rgba(122,26,42,0.12); color:#7A1A2A; } .cmd-pill.ok { background:rgba(38,138,60,0.14); color:#1e7a1e; } .cmd-pill.route { background:rgba(166,118,7,0.16); color:#7A5605; } .cmd-pill.ko { background:rgba(163,19,46,0.12); color:#A3132E; } .cmd-pill.neutre { background:rgba(59,10,22,0.08); color:rgba(59,10,22,0.6); } .cmd-arts { list-style:none; margin:0 0 10px; padding:0; } .cmd-arts li { padding:6px 0; border-bottom:1px solid rgba(166,118,7,0.14); font-size:14px; display:flex; justify-content:space-between; gap:12px; } .cmd-arts li:last-child { border-bottom:0; } .cmd-meta { font-size:13px; color:rgba(59,10,22,0.7); display:flex; flex-wrap:wrap; gap:4px 20px; } .cmd-meta b { color:#3B0A16; } .cmd-total { font-weight:900; } /* ---- Mes billets (page /billets) ---- */ .bil-list { display:grid; gap:10px; } .bil-vide { background:#FFFDF8; border:1px dashed rgba(166,118,7,0.35); padding:18px 20px; font-size:13.5px; line-height:1.5; color:rgba(59,10,22,0.55); } .bil-sep { font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(59,10,22,0.45); margin-top:6px; } .bil-card { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); border-left:4px solid #F1B51D; padding:14px 18px; display:flex; gap:10px 18px; align-items:center; flex-wrap:wrap; } .bil-card.passe { border-left-color:rgba(59,10,22,0.18); } .bil-card.rembourse { border-left-color:#A3132E; } .bil-card .bc-body { flex:1; min-width:220px; } .bil-card .bc-when { font-size:11.5px; font-weight:900; color:#A67607; letter-spacing:1px; } .bil-card h3 { margin:3px 0 0; font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:-0.2px; line-height:1.3; } .bil-card .bc-meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; color:rgba(59,10,22,0.6); margin-top:7px; } .bil-card .bc-meta b { color:#3B0A16; letter-spacing:0.5px; } .bil-card .bc-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .btn-bil { background:linear-gradient(135deg,#F1B51D,#d99a06); color:#160505; border:none; cursor:pointer; font:inherit; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; padding:11px 18px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); } .btn-bil-pdf { background:none; border:1px solid rgba(166,118,7,0.5); color:#7A1A2A; cursor:pointer; font:inherit; font-weight:800; font-size:12px; padding:10px 14px; } .btn-bil-pdf:hover { border-color:#A67607; background:rgba(166,118,7,0.08); } .btn-bil:disabled, .btn-bil-pdf:disabled { opacity:0.55; cursor:default; } .bil-status { flex-basis:100%; font-size:12.5px; color:rgba(59,10,22,0.6); } .bil-status.err { color:#A3132E; } .bil-status:empty { display:none; } /* « Mon billet » dans l'agenda : grande carte (bouton cerclé or) et lignes (lien) */ .btn-rdv-bil { background:none; border:1px solid rgba(241,181,29,0.7); color:#F1B51D; cursor:pointer; font:inherit; font-weight:900; font-size:12.5px; text-transform:uppercase; letter-spacing:0.3px; padding:11px 18px; } .btn-rdv-bil:hover { background:rgba(241,181,29,0.12); } .btn-rdv.rb-encore { background:none; color:#F1B51D; clip-path:none; padding:2px 0; font-size:12px; text-transform:none; letter-spacing:0; font-weight:800; } .btn-rdv.rb-encore:hover { text-decoration:underline; } .rdv-row .rr-bil { background:none; border:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:800; color:#A67607; padding:0; white-space:nowrap; } .rdv-row .rr-bil:hover { text-decoration:underline; } /* Aperçu « billet en poche » sous la carte : mobile uniquement */ .billet-teaser { display:none; } /* Billet plein écran : même charte que le PDF (bandeau noir, carte blanche sur crème, QR de la référence). Volontairement CLAIR sur les deux thèmes : c'est un billet, il se lit et se scanne. */ .bt-dlg { border:none; padding:0; background:transparent; width:min(460px, calc(100vw - 24px)); max-width:none; max-height:calc(100vh - 24px); overflow:auto; } .bt-dlg::backdrop { background:rgba(22,5,5,0.78); } .bt-ticket { background:#F1EDE6; color:#3d362e; box-shadow:0 30px 80px rgba(0,0,0,0.45); font-family:'General Sans','Switzer',sans-serif; } .bt-head { background:#14100d; color:#F4EDE2; padding:18px 22px 16px; position:relative; } .bt-head .k { font-size:11px; font-weight:800; letter-spacing:3.5px; color:#D6162E; text-transform:uppercase; } .bt-head .t { font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:32px; line-height:1; color:#F2B90D; letter-spacing:1px; text-transform:uppercase; margin-top:4px; } .bt-bars { display:flex; gap:2px; margin-top:12px; } .bt-bars i { display:block; width:36px; height:5px; background:#F2B90D; } .bt-bars i:nth-child(even) { background:#D6162E; } .bt-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); color:#F4EDE2; font:inherit; font-size:20px; line-height:1; cursor:pointer; } .bt-close:hover { background:rgba(255,255,255,0.16); } .bt-body { background:#fff; margin:16px 16px 0; padding:18px 20px 20px; border:1px solid #e8e2d6; } .bt-body h3 { margin:0; font-size:17px; font-weight:900; text-transform:uppercase; line-height:1.25; color:#14100d; } .bt-lbl { font-size:9.5px; font-weight:800; letter-spacing:1.9px; text-transform:uppercase; color:#8a7c6a; margin-top:12px; } .bt-val { font-size:14.5px; font-weight:700; color:#14100d; margin-top:2px; overflow-wrap:anywhere; } .bt-val a { color:inherit; text-decoration:none; } .bt-val a:hover { text-decoration:underline; } .bt-go { font-size:11px; font-weight:900; color:#A67607; white-space:nowrap; margin-left:6px; } .bt-cols { display:flex; gap:0 26px; flex-wrap:wrap; } .bt-qr-wrap { display:flex; gap:18px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px dashed rgba(166,118,7,0.45); } .bt-qr { width:140px; height:140px; box-sizing:border-box; background:#fff; padding:6px; border:1px solid #e8e2d6; flex:0 0 auto; } .bt-qr svg { display:block; width:100%; height:100%; } .bt-ref { font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:26px; letter-spacing:2px; color:#14100d; } .bt-ref-l { font-size:11px; color:#8a7c6a; } .bt-consigne { margin:14px 0 0; padding-left:12px; border-left:4px solid #F2B90D; font-size:12.5px; line-height:1.5; color:#3d362e; } .bt-act { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; } .bt-act .bil-status { color:#8a7c6a; } .bt-act .bil-status.err { color:#A3132E; } .bt-foot { padding:14px 22px 16px; display:flex; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; font-size:11px; color:#8a7c6a; } /* ---- Mon profil ---- */ .prof-card { background:#FFFDF8; border:1px solid rgba(166,118,7,0.24); padding:26px 26px 22px; max-width:680px; } .prof-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .prof-grid .field { margin-bottom:16px; } .prof-wide { grid-column:1/-1; } .prof-card .field input[readonly] { background:rgba(59,10,22,0.04); color:rgba(59,10,22,0.6); cursor:default; } .prof-note { font-size:12.5px; line-height:1.5; color:rgba(59,10,22,0.55); margin:2px 0 18px; } .prof-note a { color:#A67607; font-weight:700; } .prof-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .prof-btn { width:auto; padding:13px 26px; } .prof-actions .status-msg { margin:0; } .btn-logout-m { display:none; } footer { background:#310811; border-top:1px solid rgba(241,181,29,0.2); } footer .f-in { padding:20px 28px; text-align:center; font-size:12px; color:rgba(255,247,230,0.35); letter-spacing:1px; } /* ---- Navigation basse (mobile uniquement) : quatre liens vers les pages Carte (/), Agenda, Boutique, Profil — /billets s'abrite sous Agenda et /commandes sous Boutique (état actif posé en HTML par chaque page). ---- */ .mnav { display:none; position:fixed; left:0; right:0; bottom:0; z-index:20; background:#24060D; border-top:1px solid rgba(241,181,29,0.25); padding:6px 6px calc(10px + env(safe-area-inset-bottom)); } .mnav-b { flex:1; display:block; text-align:center; text-decoration:none; background:none; border:none; cursor:pointer; font:inherit; padding:9px 4px; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,247,230,0.45); } .mnav-b span { display:block; font-size:12px; margin-bottom:2px; } .mnav-b.active { color:#F1B51D; } @media (max-width:1000px) { .topbar .who { display:none; } .btn-out { margin-left:auto; } } @media (max-width:1020px) and (min-width:821px) { .hero { grid-template-columns:1fr; } .hero > section:first-child { max-width:480px; } } /* ============================================================ MOBILE (≤820px) — direction 1b « matchday » : thème sombre sang & or, une page par onglet de la barre basse (liens). Les écrans de connexion, eux, restent en thème clair. ============================================================ */ @media (max-width:820px) { .esp.in-app { background:#1C0509; color:#FFF7E6; } .mnav { display:flex; } #v-app footer { display:none; } .welcome-tag { display:none; } .content { padding:20px 18px calc(92px + env(safe-area-inset-bottom)); } /* Accueil mobile = la carte seule (1b) : le prochain rendez-vous et le billet en poche y sont des aperçus sous la carte, la colonne desktop « prochain rendez-vous » disparaît (elle a sa page, /agenda). */ .page-accueil .hero-rdv { display:none; } .page-links a { color:#F1B51D; } .app-status { color:rgba(255,247,230,0.8); } .app-status.err { color:#e0697f; } /* Barre du haut compacte et sombre */ #v-app .topbar { background:rgba(28,5,9,0.95); border-bottom-color:rgba(241,181,29,0.18); } #v-app .topbar-in { padding:12px 18px; } #v-app .topbar img { width:34px; height:34px; border-width:1.5px; } #v-app .topbar .brand b { font-size:13.5px; } #v-app .brand-gold { color:#F1B51D; } #v-app .topbar .brand span.sub { font-size:8.5px; color:rgba(255,247,230,0.45); } .top-nav, #v-app .topbar .who, #v-app .topbar .btn-out { display:none; } .who-chip { display:flex; } .hero { grid-template-columns:1fr; gap:0; margin-top:0; } .sec-title { color:#F1B51D; } /* Carte adhérent condensée (1b) : kicker, nom, N° · ACTIF, QR — la marque vit déjà dans la barre du haut, le pied ANNÉE/STATUT/badge disparaît. */ #v-app .card-member { text-align:center; padding:22px 20px; border:1px solid rgba(241,181,29,0.3); background:linear-gradient(160deg,#5E0F1F,#300811); } #v-app .card-member .cm-top { display:none; } #v-app .card-member .cm-kicker { display:block; position:relative; font-size:9px; letter-spacing:2.4px; color:rgba(255,247,230,0.55); font-weight:700; } #v-app .card-member .cm-main { flex-direction:column; align-items:center; gap:4px; margin-top:8px; } #v-app .card-member .cm-main > div:first-child { display:flex; flex-direction:column; align-items:center; } #v-app .card-member .cm-name { font-size:24px; } #v-app .card-member .cm-role-pre { display:none; } #v-app .card-member .cm-role-actif { display:inline; } #v-app .card-member .cm-qr { width:170px; height:170px; padding:12px; border-radius:10px; margin-top:16px; } #v-app .card-member .cm-foot { display:none; } #v-app .card-member .cm-hint-in { display:block; position:relative; font-size:11px; color:rgba(255,247,230,0.55); margin:12px 0 0; } .cm-hint { display:none; } .wallet-row { justify-content:center; } .wallet-status { color:rgba(255,247,230,0.6); } .wallet-status.err { color:#e0697f; } #v-app .btn-wallet { border:1px solid rgba(255,255,255,0.25); } /* Aperçu du prochain rendez-vous sous la carte : un lien vers /agenda */ .rdv-teaser { display:flex; width:100%; box-sizing:border-box; background:rgba(241,181,29,0.1); border:1px solid rgba(241,181,29,0.3); margin-top:16px; padding:13px 15px; align-items:center; gap:12px; cursor:pointer; font:inherit; color:#FFF7E6; text-align:left; text-decoration:none; } .rdv-teaser .tz-date { text-align:center; } .rdv-teaser .tz-date b { display:block; font-family:'Anton','General Sans',sans-serif; font-weight:400; font-size:21px; line-height:1; color:#F1B51D; } .rdv-teaser .tz-date span { font-size:8.5px; font-weight:800; letter-spacing:1.4px; } .rdv-teaser .tz-body { flex:1; min-width:0; } .rdv-teaser .tz-body b { display:block; font-size:12.5px; text-transform:uppercase; } .rdv-teaser .tz-body span { display:block; font-size:11px; color:rgba(255,247,230,0.6); margin-top:2px; } .rdv-teaser .tz-go { font-size:11px; font-weight:900; color:#F1B51D; white-space:nowrap; } /* Agenda sombre — le 1er rendez-vous devient une carte translucide empilée (1b) : date en une ligne or, titre en General Sans, bouton compact. */ .rdv-big { display:block; background:rgba(255,253,248,0.05); border:1px solid rgba(241,181,29,0.3); padding:15px 16px; } .rdv-big .rb-date { border-right:0; padding-right:0; text-align:left; } .rdv-big .rb-date .d, .rdv-big .rb-date .m { display:none; } .rdv-big .rb-date .dm { display:block; font-size:10.5px; font-weight:900; color:#F1B51D; letter-spacing:1px; } .rdv-big h3 { font-family:'General Sans','Switzer',sans-serif; font-weight:800; font-size:14.5px; margin-top:4px; letter-spacing:-0.2px; } .rdv-big p { font-size:11.5px; color:rgba(255,247,230,0.6); margin-top:3px; } .rdv-big .rb-lieu { font-size:11px; color:rgba(255,247,230,0.6); margin-top:4px; } .rdv-big .rb-act { flex-direction:row; align-items:center; gap:16px; margin-top:10px; } .rdv-big .rb-all { display:none; } /* le lien vit après la liste sur mobile */ .btn-rdv { font-size:11.5px; padding:9px 18px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); } .rdv-links .lnk-agenda { display:inline; } .rdv-vide { background:rgba(255,253,248,0.04); border-color:rgba(241,181,29,0.3); color:rgba(255,247,230,0.6); } .rdv-row { background:rgba(255,253,248,0.05); border-color:rgba(241,181,29,0.18); } .rdv-row .rr-date { color:#F1B51D; } .rdv-row .rr-info { color:rgba(255,247,230,0.6); } .rdv-row a, .rdv-links a { color:#F1B51D; } .rdv-row a.rr-lieu { color:rgba(255,247,230,0.5); } .rdv-row a.rr-lieu:hover { color:#FFF7E6; } .rdv-row .rr-tarif { color:rgba(255,247,230,0.5); } .rb-tarif.gratuit { color:rgba(255,247,230,0.75); } /* Bandeau commande + listes sombres */ .cmd-strip { background:rgba(241,181,29,0.1); border-color:rgba(241,181,29,0.25); border-left:3px solid #F1B51D; margin:12px 0 0; } .cmd-strip .cs-desc { color:rgba(255,247,230,0.65); } .cmd-strip .cs-mode { color:rgba(255,247,230,0.5); } .cmd-strip a { color:#F1B51D; } .shop-grid { grid-template-columns:1fr 1fr; gap:10px; } .shop-card { background:rgba(255,253,248,0.05); border-color:rgba(241,181,29,0.25); } .shop-card .sc-prix { color:#F1B51D; } .shop-card .sc-stock { color:rgba(255,247,230,0.5); } .shop-card .sc-stock.alerte { color:#F1B51D; } .shop-card .sc-stock.rupture { color:#e0697f; } .btn-shop.off { background:rgba(255,247,230,0.1); color:rgba(255,247,230,0.45); } .shop-vide, .cmd-vide { background:rgba(255,253,248,0.04); border-color:rgba(241,181,29,0.3); color:rgba(255,247,230,0.6); } .shop-note { color:rgba(255,247,230,0.5); } .shop-note a { color:#F1B51D; } .cmd-card { background:rgba(255,253,248,0.05); border-color:rgba(241,181,29,0.2); } .cmd-date { color:rgba(255,247,230,0.5); } .cmd-pill.cours { background:rgba(241,181,29,0.15); color:#F1B51D; } .cmd-pill.ok { background:rgba(38,138,60,0.25); color:#7ee08a; } .cmd-pill.route { background:rgba(241,181,29,0.22); color:#F1B51D; } .cmd-pill.ko { background:rgba(224,105,127,0.18); color:#e0697f; } .cmd-pill.neutre { background:rgba(255,247,230,0.12); color:rgba(255,247,230,0.7); } .cmd-arts li { border-bottom-color:rgba(241,181,29,0.14); } .cmd-meta { color:rgba(255,247,230,0.7); } .cmd-meta b { color:#FFF7E6; } /* Mes billets (page /billets) + aperçu « billet en poche » sous la carte (accueil) */ .bil-vide { background:rgba(255,253,248,0.04); border-color:rgba(241,181,29,0.3); color:rgba(255,247,230,0.6); } .bil-sep { color:rgba(255,247,230,0.45); } .bil-card { background:rgba(255,253,248,0.05); border-color:rgba(241,181,29,0.2); } .bil-card.passe { border-left-color:rgba(255,247,230,0.25); } .bil-card .bc-when { color:#F1B51D; } .bil-card .bc-meta { color:rgba(255,247,230,0.6); } .bil-card .bc-meta b { color:#FFF7E6; } .bil-card .btn-bil-pdf { border-color:rgba(241,181,29,0.45); color:#F1B51D; } .bil-card .bil-status { color:rgba(255,247,230,0.6); } .bil-card .bil-status.err { color:#e0697f; } .rdv-row .rr-bil { color:#F1B51D; } .billet-teaser { display:flex; width:100%; box-sizing:border-box; background:linear-gradient(135deg,rgba(241,181,29,0.24),rgba(241,181,29,0.08)); border:1px solid rgba(241,181,29,0.6); margin-top:14px; padding:13px 15px; align-items:center; gap:12px; cursor:pointer; font:inherit; color:#FFF7E6; text-align:left; } .billet-teaser .tz-ico { font-size:22px; line-height:1; } .billet-teaser .tz-body { flex:1; min-width:0; } .billet-teaser .tz-body b { display:block; font-size:12.5px; text-transform:uppercase; } .billet-teaser .tz-body span { display:block; font-size:11px; color:rgba(255,247,230,0.65); margin-top:2px; } .billet-teaser .tz-go { font-size:11px; font-weight:900; color:#F1B51D; white-space:nowrap; } /* Profil sombre */ .prof-card { background:rgba(255,253,248,0.05); border-color:rgba(241,181,29,0.22); } .prof-grid { grid-template-columns:1fr; } #v-app .field label { color:rgba(255,247,230,0.7); } #v-app .field input { background:rgba(255,253,248,0.06); border-color:rgba(241,181,29,0.35); color:#FFF7E6; } #v-app .field input:focus { border-color:#F1B51D; box-shadow:0 0 0 3px rgba(241,181,29,0.15); } #v-app .prof-card .field input[readonly] { background:rgba(255,253,248,0.03); color:rgba(255,247,230,0.55); } .prof-note { color:rgba(255,247,230,0.55); } .prof-note a { color:#F1B51D; } #v-app .status-msg { color:rgba(255,247,230,0.8); } #v-app .status-msg.err { color:#e0697f; } #v-app .pw-eye::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } #v-app .pw-eye[aria-pressed="true"]::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } /* Sortie discrète (1b) : simple texte rose danger, sans bordure — la hiérarchie visuelle reste aux actions du profil. */ .btn-logout-m { display:block; width:100%; margin-top:18px; background:none; border:none; color:#e0697f; font:inherit; font-weight:700; font-size:12px; letter-spacing:0.5px; padding:6px; cursor:pointer; } }