/* ═══════════════════════════════════════════════════════════════ DESIGN SYSTEM — Lif'Points / Carte à Jouer Refonte UI premium 2026 — Mobile-first ═══════════════════════════════════════════════════════════════ §1 TOKENS §13 PROGRESS §2 RESET & BASE §14 UTILITIES §3 POPUP/OVERFLOW §15 MAP / TILES §4 LAYOUT §16 LIST / ITEMS §5 HEADER §17 NOTICE / ALERTS §6 BRAND §18 HISTORY TABS §7 CARDS §19 FOOTER §8 SECTION-CARDS §20 PORTAL (index.html) §9 BUTTONS §21 MODAL SAFE-AREA §10 FORMS §22 RESPONSIVE §11 BADGES & PILLS §23 ANIMATIONS §12 KPI BOXES ═══════════════════════════════════════════════════════════════ */ /* ── Inter via Google Fonts ──────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap'); /* ══════════════════════════════════════════════════════════════ §1 DESIGN TOKENS ══════════════════════════════════════════════════════════════ */ /* Location admin cards */ .location-section { margin-top: 12px; } .location-header h2 { margin: 0 0 6px; font-size:18px; } .location-sub { margin: 6px 0 12px; color:var(--muted); font-size:0.95em; } .location-new-full { margin-top:8px; } .kpi-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .kpi { flex:1 1 120px; background:var(--card); border:1px solid rgba(26,34,51,.06); padding:10px; border-radius:12px; text-align:center; } .kpi .label { color:var(--muted); font-size:12px; } .kpi .value { font-weight:800; font-size:18px; margin-top:6px; } .location-cards-grid{ display:grid; gap:10px; margin-top:12px; } .location-card{ background:var(--card); border:1px solid rgba(26,34,51,.06); padding:12px; border-radius:12px; box-shadow:var(--shadow-sm); } .location-card-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .location-client{ font-weight:800; font-size:15px; } .location-badge{ font-size:12px; padding:6px 8px; border-radius:999px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent-dark); } .location-meta{ font-size:13px; color:var(--muted); margin-top:8px; } .location-dates{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .location-dates .meta{ color:var(--muted); font-size:13px; margin-top:4px; } .location-financial{ display:flex; gap:12px; margin-top:10px; } .location-actions{ display:flex; gap:8px; margin-top:12px; justify-content:flex-end; } .location-actions .btn.small{ padding:6px 8px; font-size:13px; } .notice{ padding:14px; border-radius:12px; background:linear-gradient(180deg,var(--card), #fbfbfb); border:1px dashed rgba(26,34,51,.06); text-align:center; } @media (max-width: 767px){ .location-cards-grid{ grid-template-columns: 1fr; } .location-dates{ flex-direction:column; } .location-financial{ flex-direction:column; } .location-actions{ justify-content:stretch; flex-direction:column; } .location-actions .btn.small{ width:100%; } } @media (min-width: 768px) and (max-width: 1024px){ .location-cards-grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px){ .location-cards-grid{ grid-template-columns: repeat(3, 1fr); } } :root { /* — Palette de base */ --bg: #f6f1e9; --bg-alt: #ede7dc; --card: #ffffff; --card2: #fdf9f3; --text: #1a2233; --muted: #627182; /* — Accent principal (violet doux, premium) */ --accent: #6c56d8; --accent-dark: #5240b5; --accent-bg: rgba(108,86,216,.10); --accent-border: rgba(108,86,216,.30); /* — Compatibilité ancienne variable bleue */ --color-blue: rgba(99,102,241,.09); --color-blue-border: rgba(99,102,241,.28); /* — États positifs */ --good: #15803d; --good-bg: rgba(21,128,61,.09); --good-border: rgba(21,128,61,.28); --color-green: rgba(21,128,61,.09); --color-green-border: rgba(21,128,61,.28); /* — Avertissement */ --warn: #b45309; --warn-bg: rgba(245,158,11,.11); --warn-border: rgba(245,158,11,.35); --color-orange: rgba(245,158,11,.10); --color-orange-border: rgba(245,158,11,.33); /* — Danger */ --bad: #dc2626; --bad-bg: rgba(220,38,38,.09); --bad-border: rgba(220,38,38,.28); /* — Violet (couleur section) */ --color-purple: rgba(108,86,216,.09); --color-purple-border: rgba(108,86,216,.26); /* — Ombres */ --shadow-xs: 0 1px 3px rgba(26,34,51,.05), 0 1px 2px rgba(26,34,51,.04); --shadow-sm: 0 2px 8px rgba(26,34,51,.07), 0 1px 3px rgba(26,34,51,.05); --shadow-md: 0 6px 22px rgba(26,34,51,.09), 0 2px 8px rgba(26,34,51,.05); --shadow-lg: 0 14px 40px rgba(26,34,51,.12), 0 4px 14px rgba(26,34,51,.07); --glow: 0 0 22px rgba(108,86,216,.22); --glow-good: 0 0 18px rgba(21,128,61,.20); /* — Géométrie */ --radius-xs: 5px; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-full: 9999px; /* — Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.22s; } /* ══════════════════════════════════════════════════════════════ §2 RESET & BASE ══════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; } body { max-width: 100%; overflow-x: hidden; margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.6; background: radial-gradient(ellipse 1100px 600px at 12% 0%, rgba(108,86,216,.09) 0%, transparent 58%), radial-gradient(ellipse 800px 500px at 88% 8%, rgba(21,128,61,.07) 0%, transparent 55%), radial-gradient(ellipse 900px 600px at 65% 96%, rgba(245,158,11,.09) 0%, transparent 55%), var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; overscroll-behavior-x: none; } a { color: inherit; } h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.3; } /* ══════════════════════════════════════════════════════════════ §3 POPUP / MODULE OVERFLOW (fonctionnel critique — préservé) ══════════════════════════════════════════════════════════════ */ #sectionPopupModal > .card { width: min(98vw, 1280px) !important; max-width: 98vw !important; overflow-x: hidden !important; } #sectionPopupBody { overflow-x: hidden; } #sectionPopupBody .ttj-merch-panels { grid-template-columns: 1fr !important; } #sectionPopupBody .ttj-merch-cross { table-layout: fixed; width: 100%; font-size: 11px; } #sectionPopupBody .ttj-merch-cross th, #sectionPopupBody .ttj-merch-cross td { white-space: normal; word-break: break-word; } /* ══════════════════════════════════════════════════════════════ §4 LAYOUT ══════════════════════════════════════════════════════════════ */ .container { max-width: 1120px; margin: 0 auto; padding: 24px; padding-left: max(24px, calc(16px + env(safe-area-inset-left))); padding-right: max(24px, calc(16px + env(safe-area-inset-right))); padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom))); } .grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 18px; } @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } } /* Admin layout */ .admin-layout { display: flex; flex-direction: column; gap: 18px; } .admin-top-full { display: grid; grid-template-columns: 1fr; gap: 18px; } .admin-small-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .admin-bottom-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; } @media (max-width: 1100px) { .admin-small-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1000px) { .admin-bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .admin-small-row { grid-template-columns: 1fr; } } .admin-top-full .info-card, .admin-small-row .info-card, .admin-bottom-grid .info-card { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════ §5 HEADER ══════════════════════════════════════════════════════════════ */ header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .header-centered { position: relative; display: flex; justify-content: center; align-items: center; } .header-spacer { display: none; } .header-action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* ══════════════════════════════════════════════════════════════ §6 BRAND / LOGO ══════════════════════════════════════════════════════════════ */ .brand { display: flex; align-items: center; gap: 14px; } .brand-centered { justify-content: center; margin: 0 auto; } .brand-text-centered { text-align: center; } .logo { width: 72px; height: 72px; display: grid; place-items: center; } .logo-img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 4px 14px rgba(26,34,51,.18)); } .brand h1 { margin: 0; font-size: 18px; font-weight: 800; } .brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; } /* ══════════════════════════════════════════════════════════════ §7 CARD COMPONENTS ══════════════════════════════════════════════════════════════ */ /* Base card */ .card { background: var(--card); border: 1px solid rgba(26,34,51,.09); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); transition: box-shadow var(--dur) var(--ease); } .card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; } /* Info card */ .info-card { background: var(--card); border: 1px solid rgba(26,34,51,.09); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-md); transition: box-shadow var(--dur) var(--ease); } .info-card:hover { box-shadow: var(--shadow-lg); } .info-card h2 { margin: 0 0 16px; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .info-card h3 { margin: 14px 0 9px; font-size: 15px; font-weight: 600; } .info-card--small { padding: 14px; } .info-card--small h2 { font-size: 15px; margin-bottom: 10px; } /* Collapsible info-card */ .info-card--collapsible summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: -22px -22px 0; padding: 20px 22px; user-select: none; border-radius: var(--radius); transition: background var(--dur) var(--ease); } .info-card--collapsible summary:hover { background: rgba(26,34,51,.025); } .info-card--collapsible summary h2 { margin: 0; } .info-card--collapsible summary::-webkit-details-marker { display: none; } .info-card--collapsible summary::before { content: "\25B8"; color: var(--muted); font-size: 15px; } .info-card--collapsible[open] summary::before { content: "\25BE"; } .info-card--collapsible .info-card-content { margin-top: 14px; } /* ══════════════════════════════════════════════════════════════ §8 SECTION CARDS (collapsibles colorés) ══════════════════════════════════════════════════════════════ */ .section-card { background: var(--card); border: 1px solid rgba(26,34,51,.09); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease); position: relative; overflow: hidden; } .section-card[open] { box-shadow: var(--shadow-md); } /* Barre colorée en haut */ .section-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--section-color, var(--accent)); border-radius: var(--radius) var(--radius) 0 0; } /* Variantes couleur */ .section-card--blue { background: linear-gradient(180deg, var(--color-blue), var(--card)); border-color: var(--color-blue-border); --section-color: #6366f1; } .section-card--green { background: linear-gradient(180deg, var(--color-green), var(--card)); border-color: var(--color-green-border); --section-color: var(--good); } .section-card--orange { background: linear-gradient(180deg, var(--color-orange), var(--card)); border-color: var(--color-orange-border); --section-color: var(--warn); } .section-card--purple { background: linear-gradient(180deg, var(--color-purple), var(--card)); border-color: var(--color-purple-border); --section-color: var(--accent); } .section-card--red { background: linear-gradient(180deg, rgba(220,38,38,.08), var(--card)); border-color: var(--bad-border); --section-color: var(--bad); } .section-card--teal { background: linear-gradient(180deg, rgba(20,184,166,.08), var(--card)); border-color: rgba(13,148,136,.22); --section-color: #0d9488; } .section-card--indigo { background: linear-gradient(180deg, rgba(99,102,241,.09), var(--card)); border-color: rgba(79,70,229,.22); --section-color: #4f46e5; } .section-card--pink { background: linear-gradient(180deg, rgba(236,72,153,.08), var(--card)); border-color: rgba(219,39,119,.22); --section-color: #db2777; } /* Summary */ .section-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; margin: -18px -18px 0; padding: 18px; user-select: none; transition: background var(--dur) var(--ease); border-radius: var(--radius); } .section-card[open] summary { border-radius: var(--radius) var(--radius) 0 0; } .section-card summary:hover { background: rgba(255,255,255,.35); } .section-card summary::-webkit-details-marker { display: none; } .section-card summary::before { content: "\25B8"; color: var(--muted); font-size: 17px; flex-shrink: 0; transition: transform var(--dur) var(--ease); } .section-card[open] summary::before { content: "\25BE"; } .section-card .section-content { margin-top: 14px; } /* Section header internals */ .section-header { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .section-icon { font-size: 26px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 5px rgba(0,0,0,.12)); } .section-title { flex: 1; min-width: 0; } .section-title h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .section-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; background: rgba(255,255,255,.92); border: 1px solid rgba(26,34,51,.15); color: var(--muted); white-space: nowrap; flex-shrink: 0; } /* Admin section (simple details sans décoration) */ .admin-section summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .admin-section summary::-webkit-details-marker { display: none; } .admin-section summary::before { content: "\25B8"; color: var(--muted); font-size: 13px; } .admin-section[open] summary::before { content: "\25BE"; } .admin-section summary h2 { margin: 0; } .admin-section > :not(summary) { margin-top: 10px; } /* ══════════════════════════════════════════════════════════════ §9 BUTTON SYSTEM ══════════════════════════════════════════════════════════════ */ button { font: inherit; cursor: pointer; } .btn { cursor: pointer; border: 1.5px solid rgba(26,34,51,.15); background: rgba(26,34,51,.04); color: var(--text); padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; text-decoration: none; white-space: nowrap; } .btn:hover { border-color: rgba(26,34,51,.28); background: rgba(26,34,51,.07); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); box-shadow: none; } /* Bouton primaire — action principale (violet plein) */ .btn.primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; font-weight: 700; box-shadow: 0 2px 10px rgba(108,86,216,.28); } .btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: var(--glow); transform: translateY(-2px); } .btn.primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(108,86,216,.20); } /* Bouton danger */ .btn.danger { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad); } .btn.danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 14px rgba(220,38,38,.24); } /* Petit bouton */ .btn.small { padding: 7px 12px; font-size: 12.5px; min-height: 36px; border-radius: var(--radius-xs); } /* ══════════════════════════════════════════════════════════════ §10 FORM ELEMENTS ══════════════════════════════════════════════════════════════ */ .field { flex: 1; min-width: 180px; } label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 5px; letter-spacing: 0.04em; text-transform: uppercase; } input, select, textarea { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid rgba(26,34,51,.15); background: #fafafa; color: var(--text); outline: none; min-height: 44px; font-size: 16px; font-family: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); -webkit-appearance: none; } input[type="range"], input[type="checkbox"], input[type="radio"] { min-height: unset; -webkit-appearance: auto; } input:focus, textarea:focus, select:focus { border-color: var(--accent-border); background: #fff; box-shadow: 0 0 0 3px rgba(108,86,216,.12); } input::placeholder, textarea::placeholder { color: rgba(98,113,130,.50); } textarea { min-height: 90px; resize: vertical; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .hr { height: 1px; background: linear-gradient(to right, transparent, rgba(26,34,51,.10) 20%, rgba(26,34,51,.10) 80%, transparent); margin: 14px 0; } /* ══════════════════════════════════════════════════════════════ §11 BADGES & PILLS ══════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); background: var(--accent-bg); border: 1px solid var(--accent-border); box-shadow: var(--glow); font-size: 12px; font-weight: 600; } .legend-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.22); font-size: 14px; font-weight: 800; letter-spacing: .2px; } .legend-badge--locked { background: linear-gradient(135deg, rgba(86,214,255,.16), rgba(255,255,255,.04)); box-shadow: 0 0 18px rgba(86,214,255,.18); color: var(--text); } .legend-badge--legend { background: linear-gradient(135deg, rgba(255,210,80,.24), rgba(255,255,255,.06)); border-color: rgba(255,210,80,.45); color: #7a5000; box-shadow: 0 0 20px rgba(255,210,80,.22); } .legend-badge--plus { background: linear-gradient(135deg, rgba(80,230,160,.22), rgba(80,214,255,.16)); border-color: rgba(80,230,160,.45); color: #0f5e46; box-shadow: 0 0 22px rgba(80,230,160,.28); } .legend-stars { font-size: 14px; letter-spacing: 1px; } .pill { position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 4px 9px; border-radius: var(--radius-full); border: 1px solid rgba(26,34,51,.14); background: rgba(255,255,255,.94); font-weight: 600; } .pill.good { border-color: var(--good-border); color: var(--good); background: var(--good-bg); } .pill.warn { border-color: var(--warn-border); color: var(--warn); background: var(--warn-bg); } /* ══════════════════════════════════════════════════════════════ §12 KPI BOXES ══════════════════════════════════════════════════════════════ */ .kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 600px) { .kpi { grid-template-columns: 1fr; } } .kpi .box { padding: 18px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(26,34,51,.09); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .kpi .box:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .kpi .val { font-size: 28px; font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; color: var(--text); } .kpi .lab { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; line-height: 1.4; } /* ══════════════════════════════════════════════════════════════ §13 PROGRESS BAR ══════════════════════════════════════════════════════════════ */ .progress { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(26,34,51,.09); box-shadow: var(--shadow-xs); } .bar { height: 12px; border-radius: var(--radius-full); background: rgba(26,34,51,.08); overflow: hidden; } .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent) 0%, var(--good) 100%); box-shadow: var(--glow); transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--radius-full); } /* ══════════════════════════════════════════════════════════════ §14 UTILITIES ══════════════════════════════════════════════════════════════ */ .muted { color: var(--muted); font-size: 13px; } .big { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; } .highlight { color: var(--accent); font-weight: 800; } .code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; padding: 2px 7px; border-radius: var(--radius-xs); border: 1px solid rgba(26,34,51,.14); background: rgba(26,34,51,.04); font-size: .9em; } /* ── Client Profile Block ───────────────────────────────────── */ .client-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .client-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(108,86,216,.28); letter-spacing: -0.02em; user-select: none; overflow: hidden; } .client-avatar-image, .avatar-preview-image, .admin-client-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; } /* ── Avatar / photo de profil ─────────────────────────────── */ .avatar-picker { padding: 16px; border: 1px solid rgba(79,70,229,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(238,242,255,.76), rgba(255,255,255,.96)); } .avatar-picker.is-busy { opacity: .66; pointer-events: none; } .avatar-picker-title { font-size: 17px; font-weight: 800; color: var(--text); } .avatar-picker-subtitle { margin-top: 3px; color: var(--muted); font-size: 13px; } .avatar-preset-grid { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); gap: 10px; margin-top: 14px; } .avatar-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 9px 6px; border: 2px solid transparent; border-radius: 16px; background: rgba(255,255,255,.78); color: var(--text); cursor: pointer; font: inherit; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .avatar-choice:hover { transform: translateY(-2px); } .avatar-choice:focus-visible { outline: 3px solid rgba(79,70,229,.25); outline-offset: 2px; } .avatar-choice.is-selected { border-color: #4f46e5; box-shadow: 0 8px 22px rgba(79,70,229,.16); } .avatar-choice img { width: 74px; height: 74px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; } .avatar-choice span { font-size: 12px; line-height: 1.15; font-weight: 750; text-align: center; } .avatar-choice-check { position: absolute; right: 6px; top: 6px; display: none; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #4f46e5; color: white; font-size: 13px; } .avatar-choice.is-selected .avatar-choice-check { display: grid; } .avatar-photo-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(79,70,229,.12); } .avatar-photo-preview { width: 72px; height: 72px; flex: 0 0 72px; overflow: hidden; border-radius: 50%; background: #e9edff; box-shadow: 0 5px 16px rgba(30,41,59,.15); } .avatar-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .avatar-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .avatar-upload-button { cursor: pointer; } .avatar-photo-help { width: 100%; color: var(--muted); font-size: 11.5px; } .avatar-picker-feedback { min-height: 17px; margin-top: 8px; color: #166534; font-size: 12px; font-weight: 650; } .avatar-picker-feedback.is-error { color: #b91c1c; } .admin-client-avatar { width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; border-radius: 50%; background: #e9edff; box-shadow: 0 4px 12px rgba(30,41,59,.14); } .admin-client-list-avatar { width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; border-radius: 50%; background:#eef2ff; } @media (max-width: 720px) { .avatar-preset-grid { grid-template-columns: repeat(3, minmax(78px, 1fr)); } .avatar-choice img { width: 68px; height: 68px; } } @media (max-width: 420px) { .avatar-picker { padding: 12px; border-radius: 14px; } .avatar-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .avatar-choice { padding: 8px 4px; } .avatar-photo-row { align-items: flex-start; } .avatar-photo-actions .btn { width: 100%; text-align: center; } } .client-profile-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); } .client-profile-type { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .client-info-rows { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid rgba(26,34,51,.07); } .client-info-row { display: flex; align-items: baseline; gap: 8px; } .client-info-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 82px; flex-shrink: 0; } .client-info-value { font-size: 13px; font-weight: 700; color: var(--text); } /* ── KPI mini progress bar ──────────────────────────────────── */ .kpi-mini-bar { height: 5px; border-radius: var(--radius-full); background: rgba(26,34,51,.08); overflow: hidden; margin-top: 9px; } .kpi-mini-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); border-radius: var(--radius-full); box-shadow: var(--glow); transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .kpi-mini-fill--muted { background: rgba(26,34,51,.18); box-shadow: none; } .kpi .box.box--accent { background: linear-gradient(135deg, var(--accent-bg), rgba(255,255,255,.6)); border-color: var(--accent-border); box-shadow: var(--glow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .kpi-objective-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 4px; } .kpi .box.box--accent .val { font-size: 18px; color: var(--accent-dark); } /* ══════════════════════════════════════════════════════════════ §15 MAP / TILES (carte fidélité) ══════════════════════════════════════════════════════════════ */ .map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .tile { padding: 14px; border-radius: var(--radius); border: 1px solid rgba(26,34,51,.09); background: rgba(255,255,255,.85); position: relative; overflow: hidden; transition: all var(--dur) var(--ease); } .tile.locked { opacity: 0.62; } .tile.unlocked { border-color: rgba(21,128,61,.32); box-shadow: 0 0 16px rgba(21,128,61,.16); background: rgba(255,255,255,.97); } .tile .t { font-weight: 700; font-size: 14px; } .tile .s { font-size: 12px; color: var(--muted); margin-top: 3px; } /* ══════════════════════════════════════════════════════════════ §16 LIST / ITEMS ══════════════════════════════════════════════════════════════ */ .list { display: flex; flex-direction: column; gap: 10px; } .item { padding: 14px 16px; border-radius: var(--radius); border: 1px solid rgba(26,34,51,.09); background: rgba(255,255,255,.90); transition: all var(--dur) var(--ease); box-shadow: var(--shadow-xs); } .item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: rgba(26,34,51,.15); } .item strong { display: block; font-weight: 700; } .item .meta { font-size: 12px; color: var(--muted); margin-top: 4px; } .item .row { margin-top: 10px; justify-content: space-between; align-items: center; } /* Overflow fix pour TTJ competitive */ #ttjCompetitorEntriesList .item b, #ttjCompetitorEntriesList .meta, #ttjCompetitiveDiagList .item b, #ttjCompetitiveDiagList .meta, #ttjCompetitiveResultsTable .item b, #ttjCompetitiveResultsTable .meta { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* ══════════════════════════════════════════════════════════════ §17 NOTICE / ALERTS ══════════════════════════════════════════════════════════════ */ .notice { padding: 12px 15px; border-radius: var(--radius-sm); border: 1px dashed rgba(26,34,51,.18); background: rgba(255,255,255,.75); color: var(--muted); font-size: 13.5px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ §18 HISTORY TABS ══════════════════════════════════════════════════════════════ */ .history-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .history-tab { border: 1.5px solid rgba(26,34,51,.13); background: rgba(255,255,255,.82); color: var(--muted); padding: 7px 14px; border-radius: var(--radius-full); cursor: pointer; font-size: 13px; font-weight: 600; transition: all var(--dur) var(--ease); min-height: 36px; display: inline-flex; align-items: center; } .history-tab:hover { border-color: rgba(26,34,51,.24); color: var(--text); background: rgba(255,255,255,.96); } .history-tab.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); box-shadow: var(--glow); } /* ══════════════════════════════════════════════════════════════ §19 FOOTER ══════════════════════════════════════════════════════════════ */ .footer { margin-top: 16px; font-size: 12px; color: var(--muted); } /* ══════════════════════════════════════════════════════════════ §20 PORTAL SHELL (index.html) ══════════════════════════════════════════════════════════════ */ .portal-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } .portal-header { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 22px; position: relative; text-align: center; width: 100%; } header.portal-header { display: flex; flex-direction: column; justify-content: center; align-items: center; } .portal-header .logo, .portal-header .portal-title { margin-left: auto; margin-right: auto; } .portal-title { text-align: center; margin-top: 10px; } .portal-footer { text-align: center; margin-top: 20px; } .portal-header #adminEntry { top: max(0px, env(safe-area-inset-top)) !important; right: max(0px, env(safe-area-inset-right)) !important; } .client-access-card { width: min(100%, 780px); margin-left: auto; margin-right: auto; } /* ══════════════════════════════════════════════════════════════ §21 MODAL SAFE-AREA ══════════════════════════════════════════════════════════════ */ #signupModal, #newContactModal, #sectionPopupModal { padding-top: max(12px, calc(12px + env(safe-area-inset-top))) !important; padding-right: max(12px, calc(12px + env(safe-area-inset-right))) !important; padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom))) !important; padding-left: max(12px, calc(12px + env(safe-area-inset-left))) !important; } /* ══════════════════════════════════════════════════════════════ §22 RESPONSIVE ══════════════════════════════════════════════════════════════ */ /* ── Tablette & intermédiaire ─────────────────────────────── */ @media (max-width: 1024px) { .container { padding: 16px; } .header-spacer { display: none; } .header-centered { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0; row-gap: 8px; padding-top: 4px; } .header-centered .header-spacer { display: flex !important; order: 2; flex: 0 0 50%; max-width: 50%; width: 50%; justify-content: flex-start; align-items: center; position: static !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; } .header-centered .brand-centered { order: 1; flex: 0 0 100%; width: 100%; margin: 0; } .header-centered .brand { width: 100%; justify-content: center; text-align: center; flex-wrap: wrap; } .header-centered .brand-text-centered { width: 100%; text-align: center; } .header-centered .brand-text-centered h1, .header-centered .brand-text-centered p { text-align: center; } #adminContent .header-centered .header-action { order: 3; flex: 0 0 50%; max-width: 50%; position: static !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; width: 50%; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .header-centered button.header-action { order: 3; position: static !important; transform: none !important; width: auto !important; max-width: 100%; margin: 0 auto; display: inline-flex; justify-content: center; } .field { min-width: 100%; } .row { gap: 8px; } .map { grid-template-columns: repeat(2, 1fr); } .portal-shell { justify-content: center; } .client-access-card { margin-top: 0; } .portal-shell .contact-section { order: 2; margin-top: 12px !important; } .portal-shell .client-access-section { order: 3; margin-top: 10px !important; opacity: .92; border: 1px dashed rgba(26,34,51,.16); box-shadow: none; background: rgba(255,255,255,.72); padding: 12px; } .portal-shell .client-access-section h2 { font-size: 14px; margin-bottom: 6px !important; opacity: .86; } .portal-shell .client-access-section .notice { font-size: 12px; padding: 8px 10px; margin-bottom: 8px !important; background: rgba(255,255,255,.65); } .portal-shell .client-access-section .row { gap: 6px; } .portal-shell .client-access-section label { font-size: 11px; margin: 4px 0 4px; } .portal-shell .client-access-section input { padding: 8px 10px; font-size: 14px; } .portal-shell .client-access-section .btn.primary { padding: 8px 10px; font-size: 13px; width: auto; } .client-main-card { display: flex; flex-direction: column; min-height: 100%; } .client-main-card .client-access-section { margin-top: auto; border-radius: var(--radius-sm); padding: 12px; } .client-main-card .client-access-section summary { margin: -12px -12px 0; padding: 12px; } .client-main-card .client-access-section .section-icon { font-size: 20px; } .client-main-card .client-access-section .section-title h2 { font-size: 14px; } .client-main-card .client-access-section .section-badge { font-size: 10px; padding: 3px 8px; } .client-main-card .client-access-section .section-content { margin-top: 8px; } .client-main-card .client-access-section .field { min-width: 100%; } .client-main-card .client-access-section .btn.primary { padding: 8px 10px; font-size: 13px; } /* TTJ popup overflow — fonctionnel critique */ #sectionPopupModal { padding: 8px !important; align-items: flex-start !important; justify-content: center !important; } #sectionPopupModal > .card { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: min(96dvh, 96vh) !important; margin: 0 !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; } #sectionPopupModal, #sectionPopupBody, #adminTtjCompetitivePricingDetails { overflow-x: hidden; } #sectionPopupBody, #sectionPopupBody * { box-sizing: border-box; min-width: 0; max-width: 100%; } #adminTtjCompetitivePricingDetails .row, #sectionPopupBody .row { gap: 8px !important; flex-wrap: wrap !important; } #adminTtjCompetitivePricingDetails .field, #sectionPopupBody .field { min-width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } #adminTtjCompetitivePricingDetails input, #adminTtjCompetitivePricingDetails select, #adminTtjCompetitivePricingDetails textarea, #sectionPopupBody input, #sectionPopupBody select, #sectionPopupBody textarea { width: 100% !important; max-width: 100% !important; } #adminTtjCompetitivePricingDetails .btn, #sectionPopupBody .btn { width: 100%; justify-content: center; } #adminTtjCompetitivePricingDetails .btn.small, #sectionPopupBody .btn.small { width: 100%; } #adminTtjCompetitivePricingDetails .item, #sectionPopupBody .item { padding: 10px; overflow-x: hidden; } #sectionPopupBody .ttj-merch-list { overflow-x: hidden !important; } #sectionPopupBody .ttj-merch-row { flex-wrap: wrap !important; align-items: flex-start !important; } #sectionPopupBody .ttj-merch-row > span, #sectionPopupBody .ttj-merch-actions { min-width: 0 !important; max-width: 100% !important; } #sectionPopupBody .ttj-merch-actions { width: 100% !important; justify-content: flex-start !important; } #adminTtjCompetitivePricingDetails .item b, #adminTtjCompetitivePricingDetails .meta, #sectionPopupBody .item b, #sectionPopupBody .meta { overflow-wrap: anywhere; word-break: break-word; } #ttjCompetitiveResultsTable .item > div, #ttjCompetitorEntriesList .item > div, #ttjCompetitiveDiagList .item > div { min-width: 0; } #ttjCompetitiveResultsTable [style*="grid-template-columns"], #sectionPopupBody [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ── Mobile Android / iOS ──────────────────────────────────── */ @media (max-width: 768px) { .portal-header #adminEntry { position: static !important; margin: 0 0 8px auto; } } /* ── Mobile compact ─────────────────────────────────────────── */ @media (max-width: 640px) { .container { padding: 12px; } .card { padding: 14px; } .info-card { padding: 14px; } .logo, .logo-img { width: 60px; height: 60px; } .logo-img { border-radius: 12px; } .brand h1 { font-size: 16px; } .brand p { font-size: 12px; } .btn { width: 100%; } .btn.small { width: auto; } .map { grid-template-columns: 1fr; } input, select, textarea, .btn { font-size: 16px; } .portal-shell .client-access-section { margin-top: 8px !important; padding: 10px; } .portal-shell .client-access-section .field { min-width: 100% !important; max-width: 100% !important; } .portal-shell .client-access-section .row { justify-content: center; } .portal-shell .client-access-section .btn.primary { width: 100%; } .header-centered { column-gap: 0; row-gap: 8px; } .header-centered .header-action .btn, .header-centered .header-spacer .btn, #adminContent .header-centered .header-action .btn.small { width: auto; } .header-centered .header-spacer .btn.small { width: auto; } .client-main-card .client-access-section { padding: 10px; } .client-main-card .client-access-section summary { margin: -10px -10px 0; padding: 10px; } } /* ── Tablette landscape ─────────────────────────────────────── */ @media (min-width: 641px) and (max-width: 1024px) { .row .field { min-width: calc(50% - 8px); flex: 1 1 calc(50% - 8px); } .client-access-section .row .field[style*="max-width:200px"] { max-width: 100% !important; } .client-access-section .row .btn.primary, .client-access-card .row .btn.primary { min-width: 180px; } } @media (max-width: 1024px) and (orientation: landscape) { .portal-shell { justify-content: flex-start; } } /* ══════════════════════════════════════════════════════════════ §22b ACCUEIL — TERRAIN DE JEU (index.html) Portée volontairement limitée à la page d'accueil. ══════════════════════════════════════════════════════════════ */ .portal-terrain-page { background: #071a33 url("img/home/terrain-jeu-desktop-v1.png") center center / cover fixed no-repeat; color: #f8f4e9; } .portal-terrain-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, rgba(5, 19, 46, .06) 0%, rgba(5, 19, 46, .27) 62%, rgba(3, 12, 29, .48) 100%), linear-gradient(180deg, rgba(4, 17, 43, .16), rgba(4, 13, 30, .12)); } .portal-shell--terrain { position: relative; isolation: isolate; justify-content: flex-start; max-width: none; min-height: 100dvh; padding: clamp(22px, 4vw, 48px) clamp(18px, 6vw, 86px) 34px; overflow: hidden; } .portal-shell--terrain > *:not(.terrain-table) { position: relative; z-index: 1; } .terrain-table { position: absolute; z-index: 0; height: 28vh; min-height: 180px; bottom: -9vh; left: -5vw; width: 110vw; overflow: hidden; transform: perspective(750px) rotateX(49deg); transform-origin: center bottom; display: none; background: repeating-linear-gradient(90deg, rgba(65,31,17,.23) 0 2px, transparent 2px 84px), linear-gradient(100deg, #7a4327, #bd7745 42%, #8e4c2a); box-shadow: 0 -12px 40px rgba(4, 8, 22, .42); } .terrain-table::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(255,235,184,.05) 0 1px, transparent 1px 5px); } .terrain-card, .terrain-die, .terrain-meeple { position:absolute; display:block; } .terrain-card { width: 106px; aspect-ratio: .68; border: 4px solid rgba(255,255,255,.82); border-radius: 10px; background: linear-gradient(135deg, #edb94d, #c6503d 64%, #702c43); box-shadow: 0 14px 20px rgba(41,18,11,.36), inset 0 0 0 3px rgba(41,18,11,.16); } .terrain-card--one { left: 12%; bottom: 17%; transform: rotate(-19deg); } .terrain-card--two { right: 13%; bottom: 10%; transform: rotate(17deg); background:linear-gradient(135deg, #689fba, #405a9a 65%, #292e65); } .terrain-die { width: 56px; height: 56px; padding: 10px; border-radius: 13px; background: #f7eee0; box-shadow: 0 12px 18px rgba(41,18,11,.3); } .terrain-die i { width: 8px; height: 8px; border-radius:50%; background:#273254; display:block; position:absolute; } .terrain-die i:nth-child(1){top:10px;left:10px}.terrain-die i:nth-child(2){top:24px;left:24px}.terrain-die i:nth-child(3){bottom:10px;right:10px}.terrain-die i:nth-child(4){top:10px;right:10px} .terrain-die--one { left: 27%; bottom: 38%; transform: rotate(18deg); } .terrain-die--two { right: 28%; bottom: 47%; transform: rotate(-13deg); } .terrain-meeple { width: 34px; height: 55px; border-radius: 18px 18px 12px 12px; background:#e4c44c; box-shadow:0 12px 15px rgba(41,18,11,.28); } .terrain-meeple::before { content:""; position:absolute; top:-13px; left:5px; width:24px; height:24px; border-radius:50%; background:inherit; } .terrain-meeple::after { content:""; position:absolute; bottom:-5px; left:-8px; width:50px; height:18px; border-radius: 50%; background:inherit; } .terrain-meeple--one { left: 38%; bottom: 22%; transform:rotate(-10deg); background:#78c0a8; } .terrain-meeple--two { right: 37%; bottom: 18%; transform:rotate(10deg); } .portal-shell--terrain .portal-header { margin: 0 auto; max-width: 980px; } .portal-shell--terrain .terrain-logo { width: 112px; height:112px; margin-bottom: 12px; filter: drop-shadow(0 10px 15px rgba(0,0,0,.38)); } .portal-shell--terrain .terrain-logo .logo-img { width:100%; height:100%; border-radius: 18px; } .terrain-admin-entry { position:absolute !important; top: 0 !important; right: 0 !important; width:auto !important; min-height: 36px; color:#dce6ff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow:none; } .portal-shell--terrain .portal-title { max-width:780px; margin:0 auto; } .terrain-eyebrow, .terrain-card-kicker { margin:0 0 8px; color:#f4cf70; text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:11px; } .portal-shell--terrain .portal-title h1 { margin:0; color:#fffaf0; font-size:clamp(30px, 4vw, 54px); line-height:1.03; letter-spacing:-.045em; } .portal-shell--terrain .portal-title > p:last-child { margin:14px auto 0; max-width:650px; color:#d6ddf1; font-size:clamp(15px, 2vw, 18px); } .terrain-main { width:min(100%, 600px); margin:clamp(22px, 3.5vw, 36px) auto 0; display:grid; grid-template-columns:1fr; gap:22px; align-items:center; } .terrain-intro { order:2; padding:0 4px; } .terrain-intro__quote { display:none; } .terrain-benefits { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; } .terrain-benefits > div { display:flex; flex-direction:column; min-height:78px; gap:3px; text-align:center; color:#f4f7ff; border-left:1px solid rgba(202,221,255,.45); } .terrain-benefits > div:first-child { border-left:0; } .terrain-benefits span { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 3px; border-radius:10px; background:rgba(5,22,54,.4); border:1px solid rgba(239,195,82,.42); color:#ffc44f; font-size:18px; } .terrain-benefits b { font-size:14px; letter-spacing:.01em; }.terrain-benefits small { color:#edf3ff; font-size:12px; max-width:105px; } .terrain-access-card { width:100%; margin:0; padding:clamp(24px, 4vw, 35px); text-align:left; border:1px solid rgba(255,255,255,.7); border-radius:26px; background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,246,239,.93)); box-shadow:0 28px 70px rgba(3,9,29,.38); } .terrain-access-card h2 { margin:0; color:#182344; font-size:clamp(23px, 3vw, 31px); letter-spacing:-.035em; }.terrain-card-copy { color:#687694; margin:9px 0 19px; font-size:14px; line-height:1.48; } .terrain-access-row { margin:0; display:flex; flex-wrap:nowrap; gap:10px; align-items:flex-end; }.terrain-access-row .field { flex:1; min-width:0; }.terrain-access-row label { color:#53627f; font-size:11px; font-weight:800; letter-spacing:.025em; }.terrain-access-row input { border-color:#d4daea; background:#fff; min-height:47px; }.terrain-access-row .btn.primary { flex:0 0 auto; min-height:47px; padding:0 18px; color:#fff; background:linear-gradient(135deg, #f0b743, #db7046); border-color:#d97941; box-shadow:0 10px 19px rgba(195,95,54,.25); }.terrain-access-row .btn.primary:hover { filter:brightness(1.06); transform:translateY(-1px); } .terrain-access-card .hr { margin:21px 0 15px; background:linear-gradient(90deg, transparent, #dfe3ed 15%, #dfe3ed 85%, transparent); } .terrain-signup { display:flex; gap:12px; align-items:center; justify-content:space-between; }.terrain-signup .muted { color:#70809b; font-size:13px; }.terrain-signup .btn { width:auto; color:#243151; background:#fff; border-color:#d3d9e6; } .portal-shell--terrain .portal-footer { width:100%; margin-top:auto; padding-top:30px; color:#bbc8df; }.portal-shell--terrain .portal-footer * { color:inherit !important; } @media (max-width: 800px) { .portal-terrain-page { background-image:url("img/home/terrain-jeu-mobile-v1.png"); background-position:center center; background-attachment:scroll; }.portal-shell--terrain { padding:22px 18px 28px; }.terrain-main { grid-template-columns:1fr; gap:14px; margin-top:26px; }.terrain-intro { text-align:center; padding:0 5px; }.terrain-access-card { max-width:620px; margin:0 auto; } } @media (max-width: 560px) { .portal-shell--terrain .terrain-logo { width:70px; height:70px; }.terrain-admin-entry span { display:none; }.portal-shell--terrain .portal-title h1 { font-size:31px; }.portal-shell--terrain .portal-title > p:last-child { font-size:15px; }.terrain-access-card { padding:22px 18px; border-radius:21px; }.terrain-access-row { flex-wrap:wrap; }.terrain-access-row .field, .terrain-access-row .btn.primary { flex:1 1 100%; width:100%; }.terrain-signup { flex-direction:column; align-items:stretch; text-align:center; }.terrain-signup .btn { width:100%; }.terrain-benefits b { font-size:12px; }.terrain-benefits small { line-height:1.2; }.terrain-die--two, .terrain-meeple--two { display:none; }.terrain-table { opacity:.78; } } @media (prefers-reduced-motion: reduce) { .terrain-access-row .btn.primary:hover { transform:none; } } /* ══════════════════════════════════════════════════════════════ §23 ANIMATIONS ══════════════════════════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .card, .info-card, .section-card, .kpi .box { animation: fadeInUp 0.28s var(--ease) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ══════════════════════════════════════════════════════════════ §24 ADMIN SIDEBAR + APP SHELL ══════════════════════════════════════════════════════════════ */ /* Desktop: shift admin container to the right of the sidebar */ @media (min-width: 1025px) { #adminContent.has-sidebar { margin-left: 252px; max-width: calc(100% - 252px); } } .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 252px; background: #1a2233; color: rgba(255,255,255,.85); display: flex; flex-direction: column; z-index: 8000; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-right: 1px solid rgba(255,255,255,.06); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); } @media (max-width: 1024px) { .admin-sidebar { transform: translateX(-260px); box-shadow: none; } .admin-sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.32); } } .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .sidebar-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; flex-shrink: 0; } .sidebar-brand-text { font-size: 19px; font-weight: 900; color: #fff; letter-spacing: -0.03em; flex: 1; } .sidebar-close-btn { display: none; background: transparent; border: none; color: rgba(255,255,255,.55); font-size: 20px; padding: 4px 6px; cursor: pointer; border-radius: 6px; line-height: 1; } .sidebar-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; } @media (max-width: 1024px) { .sidebar-close-btn { display: block; } } .sidebar-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: rgba(255,255,255,.62); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: all 0.18s ease; cursor: pointer; position: relative; border: none; background: transparent; width: 100%; text-align: left; } .sidebar-item:hover { color: #fff; background: rgba(255,255,255,.09); } .sidebar-item.active { color: #fff; background: var(--accent); font-weight: 600; } .sidebar-item-icon { font-size: 18px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; } .sidebar-item-label { flex: 1; white-space: nowrap; } .sidebar-badge { background: rgba(245,158,11,.9); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; display: none; } .sidebar-badge:not(:empty) { display: inline-block; } /* ══════════════════════════════════════════════════════════════ §25 ADMIN VIEW MODE (panneau vue dédiée) ══════════════════════════════════════════════════════════════ */ /* Barre panneau : cachée par défaut, visible en mode vue */ #adminViewPanelBar { display: none; align-items: center; gap: 14px; padding: 10px 0 12px 0; border-bottom: 1px solid rgba(36,48,71,.1); margin-bottom: 14px; } .admin-view-panel-title { font-size: 17px; font-weight: 700; color: var(--text); } /* Mode vue actif : masquer header, sync banner, barre latérale non pertinente */ #adminContent[data-active-view] .header-centered, #adminContent[data-active-view] #syncStatusBanner { display: none !important; } /* Mode vue : afficher la barre panneau */ #adminContent[data-active-view] #adminViewPanelBar { display: flex !important; } /* V23.3 — Navigation simplifiée : la sidebar remplace le bouton retour tableau de bord */ #adminContent[data-active-view] #btnAdminViewBack { display: none !important; } /* Mode vue : masquer les autres blocs de admin-layout */ #adminContent[data-active-view] .admin-top-full, #adminContent[data-active-view] .admin-bottom-grid, #adminContent[data-active-view] #adminImportHome { display: none !important; } /* Mode vue : admin-small-row passe en colonne unique */ #adminContent[data-active-view] .admin-small-row { grid-template-columns: 1fr !important; } /* Mode vue : masquer tous les enfants de admin-small-row sauf ceux avec data-admin-view */ #adminContent[data-active-view] .admin-small-row > *:not([data-admin-view]) { display: none !important; } /* Éléments accessibles uniquement via le menu gauche (pas dans le dashboard) */ .admin-sb-only { display: none; } /* Rendre visible uniquement la vue exactement sélectionnée */ #adminContent[data-active-view="clients"] .admin-small-row > [data-admin-view="clients"] { display: block !important; } #adminContent[data-active-view="assopro"] .admin-small-row > [data-admin-view="assopro"] { display: block !important; } #adminContent[data-active-view="notifications"] .admin-small-row > [data-admin-view="notifications"] { display: block !important; } #adminContent[data-active-view="locations"] .admin-small-row > [data-admin-view="locations"] { display: block !important; } /* ── Vues Catalogue TTJ ── */ #adminContent[data-active-view="ttj-open"] .admin-small-row > [data-admin-view="ttj-open"] { display: block !important; } #adminContent[data-active-view="ttj-discounts"] .admin-small-row > [data-admin-view="ttj-discounts"] { display: block !important; } #adminContent[data-active-view="ttj-spotlight"] .admin-small-row > [data-admin-view="ttj-spotlight"] { display: block !important; } #adminContent[data-active-view="ttj-goodies"] .admin-small-row > [data-admin-view="ttj-goodies"] { display: block !important; } #adminContent[data-active-view="ttj-fiches"] .admin-small-row > [data-admin-view="ttj-fiches"] { display: block !important; } #adminContent[data-active-view="ttj-image-control"] .admin-small-row > [data-admin-view="ttj-image-control"] { display: block !important; } #adminContent[data-active-view="ttj-delete"] .admin-small-row > [data-admin-view="ttj-delete"] { display: block !important; } #adminContent[data-active-view="ttj-import"] .admin-small-row > [data-admin-view="ttj-import"] { display: block !important; } /* ── Vues Merchandising TTJ ── */ #adminContent[data-active-view="merch-main"] .admin-small-row > [data-admin-view="merch-main"] { display: block !important; } #adminContent[data-active-view="merch-categories"] .admin-small-row > [data-admin-view="merch-categories"] { display: block !important; } #adminContent[data-active-view="merch-tarif"] .admin-small-row > [data-admin-view="merch-tarif"] { display: block !important; } /* Vue Ventes : admin-top-full reste visible, sous-vue ciblée (ventes jeux ou pilotage) */ #adminContent[data-active-view="ventes"] .admin-top-full { display: grid !important; } #adminContent[data-active-view="ventes"] .admin-top-full > *:not(.admin-sb-only) { display: none !important; } #adminContent[data-active-view="ventes"] .admin-top-full > .admin-sb-only { display: none !important; } #adminContent[data-active-view="ventes"][data-active-ventes-target="express"] .admin-top-full > #salesExpressV241Section { display: block !important; } #adminContent[data-active-view="ventes"][data-active-ventes-target="games"] .admin-top-full > #gamesSalesSection { display: block !important; } #adminContent[data-active-view="ventes"][data-active-ventes-target="pilotage"] .admin-top-full > #pilotageActionSection { display: block !important; } #adminContent[data-active-view="ventes"]:not([data-active-ventes-target]) .admin-top-full > #gamesSalesSection { display: block !important; } /* Vue Réservations */ #adminContent[data-active-view="reservations"] .admin-top-full { display: grid !important; } #adminContent[data-active-view="reservations"] .admin-top-full > *:not(.admin-sb-only) { display: none !important; } #adminContent[data-active-view="reservations"] .admin-top-full > [data-admin-view="reservations"] { display: block !important; } /* Vue Location */ #adminContent[data-active-view="locations"] .admin-top-full { display: grid !important; } #adminContent[data-active-view="locations"] .admin-top-full > *:not(.admin-sb-only) { display: none !important; } #adminContent[data-active-view="locations"] .admin-top-full > [data-admin-view="locations"] { display: block !important; } /* Vue Stock */ #adminContent[data-active-view="stock"] .admin-small-row > [data-admin-view="stock"] { display: block !important; } /* Vue Fournisseurs */ #adminContent[data-active-view="fournisseurs"] .admin-small-row > [data-admin-view="fournisseurs"] { display: block !important; } /* Vue Récompenses & bonus */ #adminContent[data-active-view="reglages-recompenses"] .admin-small-row > [data-admin-view="reglages-recompenses"] { display: block !important; } /* Vues Réglages app */ #adminContent[data-active-view="reglages-alertes"] .admin-small-row > [data-admin-view="reglages-alertes"] { display: block !important; } #adminContent[data-active-view="reglages-promo"] .admin-small-row > [data-admin-view="reglages-promo"] { display: block !important; } #adminContent[data-active-view="reglages-stats"] .admin-small-row > [data-admin-view="reglages-stats"] { display: block !important; } #adminContent[data-active-view="reglages-defis"] .admin-small-row > [data-admin-view="reglages-defis"] { display: block !important; } #adminContent[data-active-view="reglages-params"] .admin-small-row > [data-admin-view="reglages-params"] { display: block !important; } #adminContent[data-active-view="reglages-securite"] .admin-small-row > [data-admin-view="reglages-securite"] { display: block !important; } /* Vues Journal & Supertest Stripe */ #adminContent[data-active-view="reglages-journal"] .admin-small-row > [data-admin-view="reglages-journal"] { display: block !important; } #adminContent[data-active-view="reglages-supertest"] .admin-small-row > [data-admin-view="reglages-supertest"] { display: block !important; } /* Vue Reprise Legend */ #adminContent[data-active-view="reprise-legend"] .admin-small-row > [data-admin-view="reprise-legend"] { display: block !important; } /* Vue Comptabilité */ #adminContent[data-active-view="comptabilite"] .admin-small-row > [data-admin-view="comptabilite"] { display: block !important; } /* Vue active : plein écran, sans border-radius fermé */ #adminContent[data-active-view] [data-admin-view] { min-height: calc(100vh - 160px); border-radius: 12px; margin: 0; } #adminContent[data-active-view] [data-admin-view] > summary { display: none; /* cacher uniquement le résumé accordéon de premier niveau, pas les sous-sections */ } #adminContent[data-active-view] [data-admin-view] .info-card-content { padding: 0; } /* TTJ iframe : supprimer tout padding/espace/couleur autour de l'iframe en vue active */ #adminContent[data-active-view="ttj-open"] #adminTtjDetails { padding: 0 !important; border: none !important; background: transparent !important; border-radius: 12px !important; overflow: hidden; } #adminContent[data-active-view="ttj-open"] #adminTtjDetails .info-card-content { margin-top: 0 !important; padding: 0 !important; } /* Sidebar group (e.g. Clients > sous-onglets) */ .sidebar-group { display: flex; flex-direction: column; gap: 0; } .sidebar-group-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: rgba(255,255,255,.62); font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; transition: all 0.18s ease; } .sidebar-group-toggle:hover { color: #fff; background: rgba(255,255,255,.09); } .sidebar-group-toggle.active { color: #fff; } .sidebar-group-arrow { margin-left: auto; font-size: 11px; opacity: .6; transition: transform 0.2s ease; } .sidebar-group-toggle[aria-expanded="true"] .sidebar-group-arrow { transform: rotate(90deg); } .sidebar-subnav { display: none; flex-direction: column; gap: 1px; padding: 2px 0 4px 28px; } .sidebar-subnav.open { display: flex; } .sidebar-subitem { display: flex; align-items: center; padding: 7px 10px; border-radius: 8px; color: rgba(255,255,255,.56); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.15s ease; cursor: pointer; border-left: 2px solid transparent; } .sidebar-subitem:hover { color: #fff; background: rgba(255,255,255,.07); border-left-color: rgba(255,255,255,.2); } .sidebar-subitem.active { color: #fff; background: rgba(47,125,255,.25); border-left-color: var(--accent); font-weight: 600; } .sidebar-subitem-label { white-space: nowrap; } .sidebar-separator { height: 1px; background: rgba(255,255,255,.08); margin: 6px 4px; } .sidebar-footer { padding: 10px 8px 14px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px; } .sidebar-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; } .sidebar-user-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); } .sidebar-actions { display: flex; flex-direction: column; gap: 5px; padding: 0 4px; } .sidebar-actions .btn { width: 100%; font-size: 12.5px; padding: 7px 11px; min-height: 36px; justify-content: center; } .sidebar-actions .btn.primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; } .sidebar-actions .btn:not(.primary) { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: rgba(255,255,255,.72); } .sidebar-actions .btn:not(.primary):hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); color: #fff; } /* Overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.46); z-index: 7999; border: none; cursor: pointer; } .sidebar-overlay.is-visible { display: block; } /* Mobile top bar for admin */ .admin-mobile-topbar { display: none; position: sticky; top: 0; z-index: 500; background: var(--card); border-bottom: 1px solid rgba(26,34,51,.09); padding: 10px 14px; align-items: center; gap: 10px; box-shadow: var(--shadow-xs); } .admin-mobile-topbar-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; } .admin-mobile-topbar-title { flex: 1; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--text); } .topbar-icon-btn { width: 36px; height: 36px; border-radius: 9px; border: none; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; display: grid; place-items: center; position: relative; transition: background 0.18s, color 0.18s; } .topbar-icon-btn:hover { background: rgba(26,34,51,.07); color: var(--text); } .topbar-notif-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 2px solid var(--card); } @media (max-width: 1024px) { .admin-mobile-topbar { display: flex; } /* Hide the original header on admin when we have the mobile topbar */ #adminContent .header-centered { display: none; } } /* ══════════════════════════════════════════════════════════════ §25 BOTTOM NAV (mobile) ══════════════════════════════════════════════════════════════ */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid rgba(26,34,51,.09); padding: 6px 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); z-index: 900; box-shadow: 0 -2px 20px rgba(26,34,51,.09); } @media (max-width: 768px) { .bottom-nav { display: flex; } body.has-bottom-nav .container { padding-bottom: calc(70px + max(8px, env(safe-area-inset-bottom))); } } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border: none; background: transparent; color: var(--muted); font-size: 10px; font-weight: 600; cursor: pointer; text-decoration: none; transition: color 0.18s; position: relative; } .bottom-nav-item:hover, .bottom-nav-item.active { color: var(--accent); } /* Active indicator dot */ .bottom-nav-item.active .bni-icon::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin: 3px auto 0; box-shadow: 0 0 6px rgba(108,86,216,.5); } .bottom-nav-item .bni-icon { font-size: 20px; line-height: 1; } .bottom-nav-item .bni-label { line-height: 1.2; font-size: 9.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bottom-nav-item .bni-badge { position: absolute; top: 0; right: calc(50% - 18px); background: var(--bad); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; min-width: 15px; text-align: center; border: 2px solid var(--card); display: none; } .bottom-nav-item .bni-badge:not(:empty) { display: block; } /* ══════════════════════════════════════════════════════════════ §26 KPI ICON BOX (cards avec icône colorée) ══════════════════════════════════════════════════════════════ */ .kpi-icon-box { display: flex; align-items: center; gap: 14px; padding: 16px 15px; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(26,34,51,.08); box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease); } .kpi-icon-box:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi-icon-box .kib-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; flex-shrink: 0; } .kib-orange { background: rgba(245,158,11,.13); color: #d97706; } .kib-purple { background: rgba(108,86,216,.13); color: var(--accent); } .kib-green { background: rgba(21,128,61,.11); color: var(--good); } .kib-red { background: rgba(220,38,38,.11); color: var(--bad); } .kib-blue { background: rgba(59,130,246,.11); color: #2563eb; } .kib-teal { background: rgba(20,184,166,.11); color: #0d9488; } .kib-amber { background: rgba(251,191,36,.15); color: #b45309; } .kpi-icon-box .kib-body { flex: 1; min-width: 0; } .kpi-icon-box .kib-val { font-size: 25px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); } .kpi-icon-box .kib-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.3; } .kpi-icon-box .kib-sub { font-size: 11px; color: var(--muted); margin-top: 3px; opacity: .72; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } @media (max-width: 600px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-icon-box { padding: 13px 11px; gap: 11px; } .kpi-icon-box .kib-icon { width: 42px; height: 42px; font-size: 20px; border-radius: 10px; } .kpi-icon-box .kib-val { font-size: 21px; } } /* ══════════════════════════════════════════════════════════════ §27 CLIENT APP SHELL — Sidebar + Content Layout ══════════════════════════════════════════════════════════════ */ /* ── App shell wrapper ───────────────────────────────────────── */ body.client-page { display: block; } .client-shell-content { transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 1025px) { .client-shell-content { margin-left: 260px; } .client-app-header .cah-menu-btn { display: none !important; } } /* ── Client Sidebar (light theme) ───────────────────────────── */ .client-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--card); border-right: 1px solid rgba(26,34,51,.09); box-shadow: 2px 0 20px rgba(26,34,51,.07); display: flex; flex-direction: column; z-index: 8000; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 1024px) { .client-sidebar { transform: translateX(-270px); } .client-sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.18); } } @media (max-width: 768px) { /* On small mobile, completely hidden — bottom nav takes over */ .client-sidebar { display: none; } .client-sidebar.is-open { display: flex; } } /* ── Sidebar header ─────────────────────────────────────────── */ .client-sidebar-header { display: flex; align-items: center; gap: 10px; padding: 18px 14px 14px; border-bottom: 1px solid rgba(26,34,51,.07); flex-shrink: 0; } .cs-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(26,34,51,.14)); } .cs-brand { font-size: 18px; font-weight: 900; letter-spacing: -0.03em; color: var(--text); flex: 1; } .cs-close-btn { display: none; width: 30px; height: 30px; border: none; background: rgba(26,34,51,.06); border-radius: 7px; color: var(--muted); font-size: 14px; cursor: pointer; align-items: center; justify-content: center; transition: background var(--dur); } .cs-close-btn:hover { background: rgba(26,34,51,.12); color: var(--text); } @media (max-width: 1024px) { .cs-close-btn { display: flex; } } /* ── Sidebar nav items ──────────────────────────────────────── */ .client-sidebar-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .cs-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: all 0.18s ease; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; line-height: 1.3; } .cs-item:hover { color: var(--text); background: rgba(26,34,51,.05); } .cs-item--active { color: #fff !important; background: var(--accent) !important; font-weight: 700; box-shadow: 0 3px 10px rgba(108,86,216,.24); } .cs-item--active:hover { background: var(--accent-dark) !important; } .cs-item--muted { opacity: .75; } .cs-item--logout { color: var(--bad) !important; background: transparent; } .cs-item--logout:hover { background: var(--bad-bg) !important; color: var(--bad) !important; } .cs-icon { font-size: 18px; line-height: 1; width: 22px; text-align: center; flex-shrink: 0; } .cs-label { flex: 1; white-space: nowrap; } /* ── Sidebar footer ─────────────────────────────────────────── */ .client-sidebar-footer { padding: 8px 8px 16px; flex-shrink: 0; } .cs-separator { height: 1px; background: rgba(26,34,51,.08); margin: 4px 6px 8px; } /* ── Sidebar overlay ────────────────────────────────────────── */ .client-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 7999; border: none; cursor: pointer; } .client-sidebar-overlay.is-visible { display: block; } /* ── Client app header ──────────────────────────────────────── */ .client-app-header { display: flex !important; align-items: center; justify-content: space-between !important; padding: 14px 0 18px; margin-bottom: 8px !important; gap: 10px; position: sticky; top: 0; z-index: 100; background: transparent; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Override the generic header-centered centered layout */ .client-app-header.header-centered { justify-content: space-between !important; } /* Override tablet responsive rules that make brand full-width */ .client-app-header .cah-brand { flex: 1 !important; width: auto !important; order: unset !important; } .client-app-header .header-action { order: unset !important; position: static !important; transform: none !important; width: auto !important; flex: none !important; max-width: none !important; justify-content: center !important; } @media (max-width: 1024px) { .client-app-header.header-centered { flex-direction: row !important; flex-wrap: nowrap !important; row-gap: 0 !important; } .client-app-header .cah-brand { justify-content: center; flex: 1 !important; width: auto !important; } } .cah-menu-btn { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid rgba(26,34,51,.12); background: rgba(255,255,255,.85); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur); box-shadow: var(--shadow-xs); } .cah-menu-btn:hover { background: #fff; border-color: rgba(26,34,51,.22); box-shadow: var(--shadow-sm); } .cah-brand { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; justify-content: center; } .cah-brand .logo { width: 52px; height: 52px; } .cah-brand .logo-img { width: 52px; height: 52px; border-radius: 12px; } .cah-brand .brand-text-centered { text-align: left; } .cah-brand h1 { font-size: 17px !important; font-weight: 800 !important; margin: 0 !important; } .cah-brand p { font-size: 12px !important; margin: 1px 0 0 !important; } .client-app-header .header-action { position: static !important; transform: none !important; flex-shrink: 0; } /* On desktop: hide menu button since sidebar is always visible */ @media (min-width: 1025px) { .client-app-header .cah-menu-btn { display: none; } .cah-brand { justify-content: flex-start; } } /* On mobile: compact header */ @media (max-width: 640px) { .client-app-header { padding: 10px 0 12px; } .cah-brand .logo, .cah-brand .logo-img { width: 40px; height: 40px; border-radius: 10px; } .cah-brand h1 { font-size: 15px !important; } .cah-brand p { font-size: 11px !important; } } /* ── Updated bottom nav (client) ────────────────────────────── */ /* Ensure on desktop the bottom nav is hidden even with has-bottom-nav */ @media (min-width: 1025px) { body.client-page .bottom-nav { display: none !important; } body.client-page.has-bottom-nav .container { padding-bottom: 24px; } } /* ── Grid layout within client shell ───────────────────────── */ @media (min-width: 1025px) { .client-shell-content .container { max-width: 1100px; } } @media (min-width: 1280px) { .client-shell-content .container { max-width: 1200px; padding: 20px 32px; } } /* ── Espace client : navigation par vues (logique menu gauche) ─────────── */ /* Panel barre : masqué — navigation via le menu gauche */ #clientViewPanelBar { display: none !important; } /* Panel barre de navigation en vue active (conservé pour référence) */ .client-view-panel-bar { align-items: center; gap: 12px; padding: 8px 0 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: 14px; } .client-view-panel-bar #clientViewPanelTitle { font-weight: 700; font-size: 1.05em; } /* Masquer toutes les sections dès que le système de vues est initialisé */ #view[data-has-views] .info-card[data-client-view] { display: none; } /* Afficher uniquement la vue sélectionnée */ #view[data-active-view="progression"] .info-card[data-client-view="progression"] { display: block !important; } /* V25.14 — "Ma Carte à Jouer" redevient la vue complète : progression + achats + historique LP. Les vues achats/historique restent aussi accessibles séparément pour compatibilité. */ #view[data-active-view="progression"] .info-card[data-client-view="achats"] { display: block !important; } #view[data-active-view="progression"] .info-card[data-client-view="historique"] { display: block !important; } #view[data-active-view="commande"] .info-card[data-client-view="commande"] { display: block !important; } #view[data-active-view="resa"] .info-card[data-client-view="resa"] { display: block !important; } #view[data-active-view="locations"] .info-card[data-client-view="locations"] { display: block !important; } #view[data-active-view="achats"] .info-card[data-client-view="achats"] { display: block !important; } #view[data-active-view="bons"] .info-card[data-client-view="bons"] { display: block !important; } #view[data-active-view="wishlist"] .info-card[data-client-view="wishlist"] { display: block !important; } #view[data-active-view="suggestions"] .info-card[data-client-view="suggestions"] { display: block !important; } #view[data-active-view="parrainage"] .info-card[data-client-view="parrainage"] { display: block !important; } #view[data-active-view="historique"] .info-card[data-client-view="historique"] { display: block !important; } #view[data-active-view="factures"] .info-card[data-client-view="factures"] { display: block !important; } #view[data-active-view="badges"] .info-card[data-client-view="badges"] { display: block !important; } #view[data-active-view="collection"] .info-card[data-client-view="collection"] { display: block !important; } #view[data-active-view="actus"] .info-card[data-client-view="actus"] { display: block !important; } #view[data-active-view="ttj"] .info-card[data-client-view="ttj"] { display: block !important; } #view[data-active-view="evenements"] .info-card[data-client-view="evenements"] { display: block !important; } #view[data-active-view="notifs"] .info-card[data-client-view="notifs"] { display: block !important; } #view[data-active-view="trouver"] .info-card[data-client-view="trouver"] { display: block !important; } #view[data-active-view="reprise"] .info-card[data-client-view="reprise"] { display: block !important; } /* Hide the right card permanently (content moved to view system) */ #clientRightCard { display: none !important; } /* Full-width single-column grid for client page (right card suppressed) */ .client-page .grid { grid-template-columns: 1fr !important; } /* TTJ client : vue plein écran (masque colonne droite, conserve bottom-nav) */ body.cs-ttj-active .client-shell-content .grid > .card:not(.fun-card) { display: none !important; } body.cs-ttj-active .client-shell-content .grid { grid-template-columns: 1fr !important; } /* TTJ client : bloquer le scroll infini sur mobile — le scroll se passe dans l'iframe, pas dans la page */ body.cs-ttj-active { overflow: hidden; height: 100%; position: fixed; width: 100%; } /* TTJ client : ajuster la hauteur de l'iframe pour qu'elle remplisse l'espace dispo sans déborder */ body.cs-ttj-active #clientTtjIframe { /* desktop : déduit header (~80px) */ height: calc(100vh - 80px) !important; min-height: 400px !important; } @media (max-width: 768px) { body.cs-ttj-active #clientTtjIframe { /* mobile : déduit header + bottom-nav (~70px) + safe-area */ height: calc(100svh - 80px - 70px - max(0px, env(safe-area-inset-bottom))) !important; min-height: 300px !important; } } /* TTJ client : suppression de TOUS les espaces/cadres autour de l'iframe (même principe que l'admin) */ body.cs-ttj-active .client-shell-content .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } body.cs-ttj-active .client-shell-content .grid > .card.fun-card { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; overflow: hidden; border-radius: 0 !important; } /* Neutralise aussi le .notice wrapper (#view) et le séparateur .hr */ body.cs-ttj-active #view { padding: 0 !important; border: none !important; background: transparent !important; } body.cs-ttj-active .client-shell-content .grid > .card.fun-card > .hr { display: none !important; } /* TTJ client iframe : supprimer le cadre info-card inutile (même principe que l'admin) */ #view[data-active-view="ttj"] .info-card[data-client-view="ttj"] { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 12px !important; overflow: hidden; margin-bottom: 0 !important; } /* En mode vue active : masquer le summary pour que le contenu s'affiche comme une page */ #view[data-active-view]:not([data-active-view="progression"]) .info-card[data-client-view] > details > summary { display: none; } /* Masquer la section "Accès client" + son séparateur quand un client est connecté */ #view[data-has-views] ~ .hr, #view[data-has-views] ~ .client-access-section { display: none !important; } /* Sécurité anti-cache : masquer le feed "Mes notifications push" injecté par push-notifications.js sur la page client (désactivé mais peut subsister si l'ancienne version est en cache SW). */ #cajClientNotificationsFeed { display: none !important; } /* ── Card enhancements for client page ──────────────────────── */ .client-page .info-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow 0.22s var(--ease), transform 0.18s var(--ease); } .client-page .info-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .client-page .card.fun-card { border-radius: var(--radius-lg); } .client-page .card:not(.fun-card) { border-radius: var(--radius-lg); } /* ── "En progression" section header ───────────────────────── */ .client-page .info-card h2 { font-size: 16px; margin-bottom: 12px; color: var(--text); } /* ── Responsive: section-card enhancements ──────────────────── */ .client-page .section-card { border-radius: var(--radius); } /* KPI grid on large screens: 3 columns side by side */ @media (min-width: 600px) { .kpi { grid-template-columns: repeat(3, 1fr); } } /* ═══════════════════════════════════════════════════════════════ UNIFIED CLIENT SHELL — visual harmony between carte.html & TTJ CSS-only overrides scoped to body.client-page. Zero changes to business logic, IDs or data-* attributes. ═══════════════════════════════════════════════════════════════ */ /* ── Shared design tokens ── */ :root { --uni-purple: #7C5CBF; --uni-purple-pale: #EDE8F8; --uni-purple-soft: #F4F0FB; --uni-border: rgba(124,92,191,.1); } /* ── Sidebar shell — TTJ-matching width & shadow ── */ body.client-page .client-sidebar { width: 260px; border-right: 1px solid var(--uni-border); box-shadow: 3px 0 18px rgba(80,60,130,.08); } @media (min-width: 1025px) { body.client-page .client-shell-content { margin-left: 276px; } } /* ── Sidebar header ── */ body.client-page .client-sidebar-header { border-bottom-color: var(--uni-border); } body.client-page .cs-brand { font-size: .95em; font-weight: 800; letter-spacing: -.01em; } .cs-brand-sub { display: block; font-size: .72em; font-weight: 500; color: var(--muted); letter-spacing: 0; } /* ── Sidebar nav ── */ body.client-page .client-sidebar-nav { padding: 6px 0 2px; gap: 0; } /* ── Section labels (new helper class) ── */ .cs-section-label { font-size: .68em; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px 2px; opacity: .65; } /* ── Separator (new helper class) ── */ .cs-sep { height: 1px; background: rgba(124,92,191,.08); margin: 6px 14px; } /* ── Nav items — TTJ-style ── */ body.client-page .client-sidebar-nav .cs-item, body.client-page .client-sidebar-footer .cs-item { border-radius: 8px; margin: 1px 8px; width: calc(100% - 16px); font-size: .88em; padding: 8px 10px; gap: 8px; color: var(--text); } body.client-page .client-sidebar-nav .cs-item:hover, body.client-page .client-sidebar-footer .cs-item:hover { background: var(--uni-purple-soft); color: var(--uni-purple); } body.client-page .cs-item--active { background: var(--uni-purple-pale) !important; color: var(--uni-purple) !important; box-shadow: none; font-weight: 700; } body.client-page .cs-item--active:hover { background: var(--uni-purple-pale) !important; color: var(--uni-purple) !important; } /* ── Sous-menu client (ex: Suggestions sous Wishlist) ── */ /* Caché par défaut ; rendu visible par JS quand le parent est actif */ body.client-page .cs-item--sub { display: none; padding-left: 32px; font-size: .83em; opacity: .85; margin-top: -2px; } body.client-page .cs-item--sub.cs-sub--visible { display: flex; } body.client-page .cs-item--sub::before { content: "└"; margin-right: 6px; opacity: .45; font-size: .9em; } body.client-page .cs-item--sub.cs-item--active { opacity: 1; } body.client-page .cs-icon { font-size: .95em; width: 20px; } /* ── Bottom nav — TTJ-matching style ── */ body.client-page .bottom-nav { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--uni-border); box-shadow: 0 -4px 18px rgba(80,60,130,.10); } body.client-page .bottom-nav-item.active, body.client-page .bottom-nav-item:hover { color: var(--uni-purple); } body.client-page .bottom-nav-item.active .bni-icon::after { background: var(--uni-purple); } /* ═══════════════════════════════════════════════════════════════════════════ V22.0 — CENTRE DE COMMUNICATION PREMIUM Couche UI uniquement : réutilise Notifications, Actualités, Promo/Boost, Popup, Push Admin et automatisations existantes sans dupliquer les moteurs. ═══════════════════════════════════════════════════════════════════════════ */ #adminContent[data-active-view="communication"] .admin-small-row > [data-admin-view="communication"]{display:block!important} #adminContent[data-active-view="communication"] #adminViewPanelBar{display:none!important} .communication-v22-shell{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;overflow:visible!important} .communication-v22-shell>.info-card-content{padding:0!important;background:transparent!important} .communication-v22-shell>summary{display:none!important} #commNotifRoot{--cv22-purple:#6040e8;--cv22-purple2:#7a55f6;--cv22-text:#252744;--cv22-muted:#777b94;--cv22-line:#e6e6f1;--cv22-bg:#f7f7fc;--cv22-shadow:0 10px 28px rgba(46,42,92,.07);color:var(--cv22-text);width:100%;max-width:none;min-width:0} .comm-v22-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px 12px;background:linear-gradient(135deg,#fff 0%,#fcfbff 72%,#f6f3ff 100%);border:1px solid var(--cv22-line);border-radius:20px 20px 0 0;border-bottom:0} .comm-v22-hero-main{display:flex;align-items:center;gap:14px;min-width:0}.comm-v22-hero-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#efeaff,#e3dcff);font-size:27px;box-shadow:inset 0 0 0 1px rgba(96,64,232,.12)} .comm-v22-hero h1{margin:0;font-size:30px;line-height:1.05;letter-spacing:-.035em;color:#24263f}.comm-v22-hero p{margin:6px 0 0;color:#686d8b;font-size:14px;font-weight:650}.comm-v22-motto{text-align:right;color:#37364e;font-size:15px;font-style:italic;line-height:1.3;transform:rotate(-2deg);white-space:nowrap}.comm-v22-motto b{color:#5f42db} .comm-v22-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0 24px 14px;background:linear-gradient(180deg,#fcfbff,#fff);border-left:1px solid var(--cv22-line);border-right:1px solid var(--cv22-line)} .comm-v22-kpi{display:flex;align-items:center;gap:12px;min-height:86px;padding:14px;border-radius:14px;border:1px solid var(--cv22-line);background:#fff;box-shadow:0 5px 16px rgba(45,44,80,.035)}.comm-v22-kpi>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:20px}.comm-v22-kpi div{display:grid;gap:1px;min-width:0}.comm-v22-kpi strong{font-size:23px;line-height:1;color:#252744}.comm-v22-kpi b{font-size:11px;color:#4e536d}.comm-v22-kpi small{font-size:9.5px;color:#8c8fa3}.comm-v22-kpi.tone-purple{background:#f7f3ff;border-color:#e0d6ff}.comm-v22-kpi.tone-purple>span{background:#e6dcff;color:#6545e7}.comm-v22-kpi.tone-green{background:#f1fbf6;border-color:#d4f0df}.comm-v22-kpi.tone-green>span{background:#d8f4e5;color:#16955b}.comm-v22-kpi.tone-blue{background:#f1f8ff;border-color:#d7e9fb}.comm-v22-kpi.tone-blue>span{background:#daecff;color:#2979dc}.comm-v22-kpi.tone-red{background:#fff3f5;border-color:#f7dadd}.comm-v22-kpi.tone-red>span{background:#ffe0e5;color:#e5324f}.comm-v22-kpi.tone-orange{background:#fff8ee;border-color:#f5e3c9}.comm-v22-kpi.tone-orange>span{background:#ffebc8;color:#d98608} .comm-v22-nav{display:flex;gap:7px;overflow:auto;padding:11px 24px;border:1px solid var(--cv22-line);border-top:0;background:#fff;scrollbar-width:thin}.comm-v22-nav button{flex:0 0 auto;border:1px solid #e5e4ef;background:#fff;color:#686c86;border-radius:10px;padding:9px 12px;font-weight:800;font-size:10.5px;cursor:pointer}.comm-v22-nav button:hover{border-color:#cfc7ff;color:#5f43db;background:#faf9ff}.comm-v22-nav button.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#5f40e5,#7956f3);box-shadow:0 7px 16px rgba(95,64,229,.22)} .comm-v22-view{margin-top:12px}.comm-v22-view[hidden]{display:none!important}.comm-v22-dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.8fr);gap:12px}.comm-v22-card{min-width:0;border:1px solid var(--cv22-line);border-radius:16px;background:#fff;box-shadow:var(--cv22-shadow);overflow:hidden}.comm-v22-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #f0eff6}.comm-v22-card>header>div{display:flex;align-items:center;gap:10px;min-width:0}.comm-v22-card>header h2{margin:0!important;font-size:15px!important;color:#2a2c48!important}.comm-v22-card>header p{margin:2px 0 0!important;color:#8a8da0!important;font-size:9.5px!important}.comm-v22-card>header>button{border:0;background:#f4f0ff;color:#6a4be5;border-radius:8px;padding:6px 9px;font-size:9px;font-weight:850;cursor:pointer}.comm-v22-card-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f0ebff;color:#6544e5;font-size:17px} .comm-v22-create-card{grid-column:1}.comm-v22-tools-card{grid-column:2}.comm-v22-create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:12px}.comm-v22-create-tile{min-height:170px;border-radius:14px;border:1px solid transparent;padding:13px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;transition:.18s transform,.18s box-shadow}.comm-v22-create-tile:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(60,55,100,.08)}.comm-v22-create-tile>span{font-size:27px}.comm-v22-create-tile>b{font-size:13px}.comm-v22-create-tile>small{font-size:9.7px;line-height:1.45;color:#6d7087;flex:1}.comm-v22-create-tile>em{font-style:normal;color:#fff;font-weight:850;font-size:9.5px;padding:7px 9px;border-radius:8px;align-self:stretch;text-align:center}.comm-v22-create-tile.tile-purple{background:#f7f2ff;border-color:#e4d9ff;color:#5d3dde}.comm-v22-create-tile.tile-purple>em{background:#6542e8}.comm-v22-create-tile.tile-blue{background:#eff7ff;border-color:#d8e9fd;color:#2474d4}.comm-v22-create-tile.tile-blue>em{background:#2379e7}.comm-v22-create-tile.tile-red{background:#fff0f5;border-color:#f9d6e1;color:#e41f53}.comm-v22-create-tile.tile-red>em{background:#ef2b5d}.comm-v22-create-tile.tile-orange{background:#fff7e9;border-color:#f4e2c4;color:#d98206}.comm-v22-create-tile.tile-orange>em{background:#f08a08} .comm-v22-tool-list{padding:9px;display:grid;gap:7px}.comm-v22-tool-list button{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;width:100%;border:1px solid #e9e8f1;background:#fff;border-radius:9px;padding:9px 10px;color:#444861;text-align:left;font-size:10px;font-weight:750;cursor:pointer}.comm-v22-tool-list button:hover{background:#faf9ff;border-color:#d9d1ff}.comm-v22-tool-list button>span{font-size:16px;color:#6747e4}.comm-v22-tool-list button>b{font-size:18px;color:#898ca1} .comm-v22-programmed-card,.comm-v22-news-card,.comm-v22-automation-card{grid-column:1}.comm-v22-recent-card,.comm-v22-promos-card,.comm-v22-alert-card,.comm-v22-tip-card{grid-column:2}.comm-v22-preview-list{display:grid;gap:0;padding:3px 11px 10px}.comm-v22-preview-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid #f0eff5}.comm-v22-preview-row:last-child{border-bottom:0}.comm-v22-preview-icon{width:29px;height:29px;border-radius:9px;background:#f2edff;display:grid;place-items:center;color:#6745e3}.comm-v22-preview-row>div{display:grid;gap:2px;min-width:0}.comm-v22-preview-row b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comm-v22-preview-row small{font-size:8.8px;color:#9698a9}.comm-v22-preview-row em{font-style:normal;font-size:8px;font-weight:850;padding:4px 7px;border-radius:999px;background:#eaf9f0;color:#158b52;text-transform:capitalize} .comm-v22-news-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:11px}.comm-v22-news-tile{border:1px solid #ecebf3;background:#fff;border-radius:11px;overflow:hidden;text-align:left;padding:0;cursor:pointer;min-width:0}.comm-v22-news-tile img,.comm-v22-news-tile>span{width:100%;height:88px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,#ece5ff,#dff3ff);font-size:30px}.comm-v22-news-tile>div{padding:9px;display:grid;gap:4px}.comm-v22-news-tile em{font-style:normal;font-size:7px;font-weight:900;color:#5f42db}.comm-v22-news-tile b{font-size:10.5px;color:#33354e}.comm-v22-news-tile small{font-size:8.5px;color:#8a8da0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .comm-v22-auto-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}.comm-v22-auto-preview button{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;border:1px solid #ecebf4;background:#fff;border-radius:9px;padding:8px;text-align:left;cursor:pointer}.comm-v22-auto-preview button>span{color:#5e43dc}.comm-v22-auto-preview button>div{display:grid;gap:2px}.comm-v22-auto-preview button b{font-size:9.5px}.comm-v22-auto-preview button small{font-size:8px;color:#9294a6}.comm-v22-auto-preview button em{font-style:normal;font-size:8px;font-weight:900;padding:4px 6px;border-radius:999px}.comm-v22-auto-preview button em.on{background:#e7f8ef;color:#13864f}.comm-v22-auto-preview button em.off{background:#f0f0f4;color:#888b9d} .comm-v22-alert-items{display:grid;padding:9px}.comm-v22-alert-items button{border:0;background:#fff;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;text-align:left;padding:9px;border-bottom:1px solid #f0eff5;cursor:pointer}.comm-v22-alert-items button:last-child{border-bottom:0}.comm-v22-alert-items button>span{font-size:16px;color:#6545e4}.comm-v22-alert-items button>div{display:grid;gap:2px}.comm-v22-alert-items button b{font-size:9.5px}.comm-v22-alert-items button small{font-size:8px;color:#989aaa}.comm-v22-alert-items button em{font-style:normal;color:#754ff0}.comm-v22-tip-card{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(135deg,#f4eeff,#f8f6ff);border-color:#ddd2ff}.comm-v22-tip-card>span{font-size:25px}.comm-v22-tip-card>div{flex:1}.comm-v22-tip-card h3{margin:0 0 4px!important;color:#5e40d8!important;font-size:12px!important}.comm-v22-tip-card p{margin:0!important;font-size:9px!important;color:#666a82!important;line-height:1.45}.comm-v22-tip-card>b{font-size:30px} .comm-v22-empty{padding:18px;text-align:center;color:#9a9cac;font-size:10px} /* Sous-pages Communication */ .comm-v22-subpage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:15px 17px;border:1px solid var(--cv22-line);border-radius:15px;background:#fff;box-shadow:var(--cv22-shadow)}.comm-v22-subpage-head>div{display:flex;align-items:center;gap:12px}.comm-v22-subpage-head>div>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eee8ff;color:#6241e5;font-size:21px}.comm-v22-subpage-head h2{margin:0!important;font-size:20px!important;color:#292b48!important}.comm-v22-subpage-head p{margin:3px 0 0!important;color:#85889d!important;font-size:10px!important} .comm-v22-recall-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;margin-bottom:12px}.comm-v22-recall-stats article{display:flex;align-items:center;gap:10px;border:1px solid var(--cv22-line);border-radius:13px;background:#fff;padding:12px}.comm-v22-recall-stats article>span{width:36px;height:36px;border-radius:10px;background:#efeaff;color:#6543e4;display:grid;place-items:center}.comm-v22-recall-stats article div{display:grid}.comm-v22-recall-stats strong{font-size:19px}.comm-v22-recall-stats b{font-size:9.5px}.comm-v22-recall-stats small{font-size:8px;color:#9194a7}.comm-v22-recall-stats>button{align-self:stretch;border-radius:13px!important} .comm-v22-recall-list{padding:8px 12px}.comm-v22-recall-row{display:grid;grid-template-columns:38px minmax(150px,1.5fr) repeat(3,minmax(80px,.55fr)) auto;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid #eeedf4}.comm-v22-recall-row:last-child{border-bottom:0}.comm-v22-recall-avatar{width:34px;height:34px;border-radius:50%;background:#eee8ff;color:#5f3fe0;display:grid;place-items:center;font-weight:900}.comm-v22-recall-person{display:grid;gap:2px;min-width:0}.comm-v22-recall-row b{font-size:9.5px}.comm-v22-recall-row small{font-size:8px;color:#9395a6}.comm-v22-recall-row>div:not(.comm-v22-recall-person):not(.comm-v22-recall-avatar){display:grid;gap:2px}.comm-v22-recall-row>button{border:1px solid #dcd5ff;background:#f5f1ff;color:#6042dd;border-radius:8px;padding:7px 9px;font-size:8.5px;font-weight:850;cursor:pointer} /* Moteurs historiques réhabillés, logique et IDs conservés */ .comm-v22-legacy-module,.comm-v22-promo-view{border:1px solid var(--cv22-line);border-radius:16px;background:#fff;box-shadow:var(--cv22-shadow);padding:16px;box-sizing:border-box}.comm-v22-internal-tabs{display:none!important}.comm-v22-legacy-module .notice,.comm-v22-promo-view .notice{border-radius:11px!important}.comm-v22-legacy-module .row,.comm-v22-promo-view .row{gap:10px!important}.comm-v22-legacy-module .field,.comm-v22-promo-view .field{min-width:0}.comm-v22-legacy-module input:not([type="checkbox"]):not([type="radio"]),.comm-v22-legacy-module select,.comm-v22-legacy-module textarea,.comm-v22-promo-view input:not([type="checkbox"]):not([type="radio"]),.comm-v22-promo-view select,.comm-v22-promo-view textarea{width:100%;box-sizing:border-box;border:1px solid #dfe1ed!important;border-radius:10px!important;background:#fff!important;color:#31344f!important;padding:9px 10px!important;min-height:40px!important;box-shadow:none!important}.comm-v22-legacy-module textarea,.comm-v22-promo-view textarea{min-height:86px!important}.comm-v22-legacy-module input:focus,.comm-v22-legacy-module select:focus,.comm-v22-legacy-module textarea:focus,.comm-v22-promo-view input:focus,.comm-v22-promo-view select:focus,.comm-v22-promo-view textarea:focus{outline:none!important;border-color:#826cf2!important;box-shadow:0 0 0 3px rgba(101,67,228,.1)!important}.comm-v22-legacy-module label,.comm-v22-promo-view label{font-weight:800!important;color:#555a76!important}.comm-v22-legacy-module .btn,.comm-v22-promo-view .btn{border-radius:9px!important;font-weight:850!important;min-height:37px!important}.comm-v22-legacy-module .btn.primary,.comm-v22-promo-view .btn.primary{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,#5f40e5,#7956f3)!important;box-shadow:0 7px 16px rgba(95,64,229,.18)!important} #commV22PromoMount>#adminPromoDetails{display:block!important;min-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important;margin:0!important;padding:0!important}.comm-v22-promo-view #adminPromoDetails>summary{display:none!important}.comm-v22-promo-view #adminPromoDetails>.info-card-content{padding:0!important}.comm-v22-promo-view .promo-events-tabs{display:none!important}.comm-v22-promo-view .promo-events-panel-card{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}.comm-v22-promo-view .promo-events-panel{display:none!important}.comm-v22-promo-view .promo-events-panel.is-active{display:block!important} /* En vue Communication, les composants déplacés ne doivent pas hériter du plein-écran générique des data-admin-view. */ #adminContent[data-active-view="communication"] .communication-v22-shell{min-height:calc(100vh - 105px)!important;border-radius:0!important} @media(max-width:1320px){.comm-v22-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.comm-v22-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-v22-news-preview{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1024px){.comm-v22-dashboard-grid{grid-template-columns:1fr}.comm-v22-create-card,.comm-v22-tools-card,.comm-v22-programmed-card,.comm-v22-recent-card,.comm-v22-news-card,.comm-v22-promos-card,.comm-v22-automation-card,.comm-v22-alert-card,.comm-v22-tip-card{grid-column:1}.comm-v22-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-v22-recall-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-v22-recall-stats>button{grid-column:1/-1}.comm-v22-recall-row{grid-template-columns:38px minmax(140px,1fr) auto}.comm-v22-recall-row>div:nth-of-type(3),.comm-v22-recall-row>div:nth-of-type(4),.comm-v22-recall-row>div:nth-of-type(5){display:none!important}} @media(max-width:640px){.comm-v22-hero{padding:15px;align-items:flex-start}.comm-v22-hero-icon{width:44px;height:44px}.comm-v22-hero h1{font-size:24px}.comm-v22-hero p{font-size:11px}.comm-v22-motto{display:none}.comm-v22-kpis{padding:0 15px 12px;grid-template-columns:1fr 1fr}.comm-v22-kpi{min-height:76px;padding:10px}.comm-v22-kpi strong{font-size:19px}.comm-v22-nav{padding:9px 15px}.comm-v22-create-grid{grid-template-columns:1fr}.comm-v22-create-tile{min-height:140px}.comm-v22-news-preview{grid-template-columns:1fr}.comm-v22-auto-preview{grid-template-columns:1fr}.comm-v22-recall-stats{grid-template-columns:1fr}.comm-v22-subpage-head{align-items:flex-start}.comm-v22-subpage-head>button{flex:0 0 auto}.comm-v22-legacy-module,.comm-v22-promo-view{padding:12px}.comm-v22-legacy-module .row,.comm-v22-promo-view .row{display:grid!important;grid-template-columns:1fr!important}.comm-v22-recall-row{grid-template-columns:34px minmax(0,1fr) auto}.comm-v22-recall-row>button{padding:7px}} /* ============================================================ CAJ V24.63 — popups / fiches admin : viewport mobile réel ============================================================ */ @media(max-width:1024px){ #sectionPopupModal{overscroll-behavior:contain} #sectionPopupModal > .card{ max-height:calc(100dvh - 16px)!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #sectionPopupBody{min-width:0!important;max-width:100%!important;overflow-x:hidden!important} #sectionPopupBody table{max-width:100%} } @media(max-width:640px){ #sectionPopupModal{padding:0!important;align-items:stretch!important} #sectionPopupModal > .card{ width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; border-radius:0!important; padding-bottom:max(0px,env(safe-area-inset-bottom))!important; } #sectionPopupBody input,#sectionPopupBody select,#sectionPopupBody textarea{font-size:16px!important} } /* ============================================================ CAJ V24.92 — Communication fiable + panneaux natifs ============================================================ */ .comm-v2492-native-view{border:1px solid var(--cv22-line);border-radius:16px;background:#fff;box-shadow:var(--cv22-shadow);padding:16px;box-sizing:border-box} .comm-v2492-native-view #commPanelCreate, .comm-v2492-native-view #commPanelScheduled, .comm-v2492-native-view #commPanelHistory, .comm-v2492-native-view #commPanelPushadmin, .comm-v2492-native-view #commPanelAuto{display:block!important} .comm-v2492-scheduled-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px} .comm-v2492-scheduled-grid .comm-v22-card>div{padding:12px} .comm-v2492-cron-health{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px 14px;margin-bottom:12px;border-radius:13px;border:1px solid #e7e8ef;background:#f8f9fc;color:#454b60} .comm-v2492-cron-health .comm-v2492-cron-icon{width:38px;height:38px;border-radius:11px;background:#eceef5;display:grid;place-items:center;font-size:20px} .comm-v2492-cron-health>div:nth-child(2){display:grid;gap:2px}.comm-v2492-cron-health b{font-size:12px}.comm-v2492-cron-health small{font-size:9.5px;color:#858a9e}.comm-v2492-cron-health>span{font-size:9.5px;font-weight:900;padding:6px 9px;border-radius:999px;background:#eceef4;color:#697084;white-space:nowrap} .comm-v2492-cron-health.is-ok{background:#eefaf4;border-color:#caecd9}.comm-v2492-cron-health.is-ok .comm-v2492-cron-icon{background:#d8f4e5;color:#14844f}.comm-v2492-cron-health.is-ok>span{background:#d8f4e5;color:#14844f} .comm-v2492-cron-health.is-warn{background:#fff8ec;border-color:#f6dfba}.comm-v2492-cron-health.is-warn .comm-v2492-cron-icon{background:#ffebc8;color:#bf7300}.comm-v2492-cron-health.is-warn>span{background:#ffebc8;color:#a96300} .comm-v2492-push-intro{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;margin-bottom:12px;border-radius:13px;background:#f2f7ff;border:1px solid #d9e7fb}.comm-v2492-push-intro>span{width:40px;height:40px;border-radius:12px;background:#deebff;display:grid;place-items:center;font-size:20px}.comm-v2492-push-intro>div{display:grid;gap:3px}.comm-v2492-push-intro b{font-size:12px}.comm-v2492-push-intro small{font-size:9.5px;color:#7d8499} #commV2492PushAdminMount>#commPanelPushadmin,#commV2492NotificationsMount>#commPanelCreate,#commV2492AutomationsMount>#commPanelAuto{padding:0!important;margin:0!important} #commV2492ScheduledMount>#commPanelScheduled,#commV2492HistoryMount>#commPanelHistory{padding:0!important;margin:0!important} @media(max-width:900px){.comm-v2492-scheduled-grid{grid-template-columns:1fr}.comm-v2492-native-view{padding:12px}} @media(max-width:640px){.comm-v2492-native-view{padding:10px;border-radius:13px}.comm-v2492-cron-health{grid-template-columns:36px minmax(0,1fr);padding:10px}.comm-v2492-cron-health>span{grid-column:2;justify-self:start}.comm-v2492-push-intro{grid-template-columns:38px minmax(0,1fr);padding:10px}.comm-v2492-push-intro>span{width:36px;height:36px}.comm-v22-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-v22-kpi:last-child{grid-column:1/-1}.comm-v22-nav{position:sticky;top:0;z-index:10;background:#fff}} /* V25.55 : espace profil dédié */ #view[data-active-view="profil"] .info-card[data-client-view="profil"]{display:block!important}