/* styles.css - Starting Club de Nabeul (Compétition / Qualification) Palette: Noir #222 | Orange #ff6b35 | Fond #f6f7f9 | Blanc #fff */ :root{ --bg: #f6f7f9; --card: #ffffff; --text: #222; --muted: #667085; --line: #e8e9ee; --accent: #ff6b35; --accent2: #f7931e; --shadow: 0 10px 30px rgba(16,24,40,.10); --radius: 16px; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color:var(--text); background: radial-gradient(1200px 600px at 50% 0%, #fff 0%, var(--bg) 55%, var(--bg) 100%); line-height:1.6; } /* RTL support: ajoute */ body.rtl{ direction: rtl; } body.rtl table th, body.rtl table td{ text-align:right; } body.rtl .breadcrumb{ justify-content:flex-start; } body.rtl .recap ul{ padding-left:0; padding-right:18px; } /* Wrapper */ .wrap{ max-width: 1200px; margin: 0 auto; padding: 28px 18px 60px; } /* Breadcrumb (optionnel si tu veux ajouter un retour) */ .breadcrumb{ display:flex; gap:10px; align-items:center; justify-content:flex-start; font-weight:700; color:var(--muted); margin: 6px 0 18px; } .breadcrumb a{ color: var(--text); text-decoration:none; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.75); border:1px solid var(--line); transition: .2s ease; } .breadcrumb a:hover{ border-color: rgba(255,107,53,.35); box-shadow: 0 8px 18px rgba(255,107,53,.12); } .breadcrumb span{ opacity:.75; } /* Hero */ .hero{ background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(255,255,255,.65) 100%); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); padding: 26px 22px; position: relative; overflow:hidden; } .hero::before{ content:""; position:absolute; inset:-2px -2px auto -2px; height: 6px; background: linear-gradient(90deg, var(--accent), var(--accent2)); } /* Badges */ .kicker{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 10px; } .badge{ display:inline-flex; align-items:center; gap:8px; font-size: .85rem; font-weight:800; padding: 8px 12px; border-radius: 999px; color: #1f2937; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.88) 100%); border: 1px solid rgba(255,107,53,.22); box-shadow: 0 10px 18px rgba(16,24,40,.06); } /* Si tu utilises des sans class dans kicker */ .kicker > span:not(.badge){ display:inline-flex; align-items:center; padding: 8px 12px; border-radius: 999px; font-weight:800; background: rgba(34,34,34,.06); border: 1px solid var(--line); color:#344054; } .hero h1{ margin: 10px 0 10px; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height:1.2; letter-spacing:.2px; } .meta{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; } .meta > span, .meta > div{ background: rgba(246,247,249,.7); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: #344054; font-size: .95rem; font-weight: 650; } .intro{ margin-top: 12px; background: #fff7f4; border: 1px solid rgba(255,107,53,.22); border-radius: 14px; padding: 14px 14px; } .intro p{ margin: 8px 0; } .intro strong{ color:#111; } .muted{ color: var(--muted); font-weight: 700; } .note{ margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,107,53,.08), rgba(34,34,34,.06)); border: 1px solid rgba(255,107,53,.18); color:#344054; font-weight:700; } /* Grid */ .grid{ margin-top: 22px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* Cards */ .card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } .card h2{ margin:0; padding: 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background: linear-gradient(135deg, rgba(255,107,53,.10), rgba(247,147,30,.08)); border-bottom: 1px solid var(--line); font-size: 1.05rem; } .card h2 span:first-child{ font-weight: 900; color:#111827; } .pill{ display:inline-flex; align-items:center; padding: 8px 12px; border-radius: 999px; font-weight: 800; color: #111827; background: #ffffff; border: 1px solid rgba(255,107,53,.26); white-space: nowrap; } .span-2{ grid-column: 1 / -1; } /* Tables */ table{ width:100%; border-collapse: separate; border-spacing: 0; } thead th{ text-align:left; font-size:.92rem; letter-spacing:.2px; color: #ffffff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 12px 14px; } tbody td{ padding: 12px 14px; border-bottom: 1px solid var(--line); color:#1f2937; font-weight: 650; } tbody tr:hover td{ background: rgba(246,247,249,.7); } /* Ligne en rouge */ .row-update { background-color: #ffdddd; /* rouge clair */ color: #900; /* texte rouge foncé */ font-weight: bold; } /* corners */ thead th:first-child{ border-top-left-radius: 12px; } thead th:last-child{ border-top-right-radius: 12px; } /* Mobile scroll for wide tables */ .card table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; } .card thead, .card tbody, .card tr{ display: table; width: 100%; table-layout: fixed; } /* Highlight blocks */ .highlight{ margin: 12px 14px 16px; padding: 12px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(76,175,80,.12), rgba(255,107,53,.08)); border: 1px solid rgba(76,175,80,.22); font-weight: 800; color:#1f2937; } /* Total bar */ .total{ margin: 14px 14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; background: rgba(34,34,34,.06); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px; font-weight: 850; } .total-number{ display:inline-flex; min-width: 56px; justify-content:center; align-items:center; padding: 8px 14px; border-radius: 999px; background: #111827; color:#fff; } /* Forcer la taille uniquement pour le logo du bloc Communication */ .club-logo-communication { margin-top: 1.2rem; display: flex; justify-content: center; align-items: center; } .club-logo-communication img.logo-communication { width: 320px !important; /* taille réelle forcée */ max-width: none !important; /* annule toute contrainte */ height: auto !important; object-fit: contain; display: block; } .logo-communication { max-width: 24px; /* taille réduite x5 */ height: auto; object-fit: contain; opacity: 0.95; } /* Répartition: recap grid */ .recap{ display:grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; } /* Responsive */ @media (max-width: 980px){ .meta{ grid-template-columns: 1fr; } .grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ .wrap{ padding: 18px 12px 50px; } .hero{ padding: 18px 14px; } .card h2{ flex-direction: column; align-items:flex-start; } thead th, tbody td{ padding: 11px 10px; } }