/* ========================================================== CHAPITRE 1 — VARIABLES ========================================================== */ :root{ /* ------------------------------------------------------ COULEURS CLUB ------------------------------------------------------ */ --alc-orange:#f85903; --alc-orange-dark:#d94b00; --alc-black:#171717; --alc-black-soft:#242424; --alc-white:#ffffff; /* ------------------------------------------------------ TEXTES ------------------------------------------------------ */ --alc-text:#333333; --alc-text-light:#6b6b6b; /* ------------------------------------------------------ ARRIÈRES PLANS ------------------------------------------------------ */ --alc-background:#f7f7f7; --alc-background-soft:#fafafa; /* ------------------------------------------------------ BORDURES ------------------------------------------------------ */ --alc-border:#e5e5e5; /* ------------------------------------------------------ DÉGRADÉS ------------------------------------------------------ */ --alc-gradient-orange: linear-gradient( 135deg, var(--alc-orange), var(--alc-orange-dark) ); --alc-gradient-dark: linear-gradient( 135deg, var(--alc-black), var(--alc-black-soft) ); /* ------------------------------------------------------ OMBRES ------------------------------------------------------ */ --alc-shadow: 0 10px 30px rgba(0,0,0,.08); --alc-shadow-hover: 0 18px 45px rgba(0,0,0,.15); --alc-shadow-orange: 0 8px 20px rgba(248,89,3,.25); /* ------------------------------------------------------ RAYONS ------------------------------------------------------ */ --alc-radius: 18px; --alc-radius-small: 10px; --alc-radius-pill: 999px; /* ------------------------------------------------------ TRANSITION ------------------------------------------------------ */ --alc-transition: .25s ease; } /* ========================================================== CHAPITRE 2 — STRUCTURE GÉNÉRALE ========================================================== */ /* ========================================================== CONTENEUR PRINCIPAL ========================================================== */ .alc-week{ width:100%; max-width:1600px; margin:40px auto; padding:0 20px; box-sizing:border-box; } /* ========================================================== RESET INTERNE ========================================================== */ .alc-week *, .alc-week *::before, .alc-week *::after{ box-sizing:border-box; } /* ========================================================== LIENS ========================================================== */ .alc-week a{ color:inherit; text-decoration:none; } /* ========================================================== BOUTONS ========================================================== */ .alc-week button{ font-family:inherit; } /* ========================================================== SELECTS ========================================================== */ .alc-week select{ font-family:inherit; } /* ========================================================== CHAPITRE 3 — EN-TÊTE DU PROGRAMME ========================================================== */ /* ========================================================== BLOC EN-TÊTE ========================================================== */ .alc-week-header{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:0 0 40px; padding:30px 35px; background:var(--alc-white); border-left:8px solid var(--alc-orange); border-radius:var(--alc-radius); box-shadow:var(--alc-shadow); text-align:center; } /* ========================================================== TITRE PRINCIPAL ========================================================== */ .alc-week-title{ margin:0; font-size:22px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--alc-text-light); } /* ========================================================== SAISON ========================================================== */ .alc-week-period{ font-size:46px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; color:var(--alc-orange); } /* ========================================================== CHAPITRE 4 — NAVIGATION SEMAINES ========================================================== */ /* ========================================================== CONTENEUR ========================================================== */ .alc-week-navigation{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 35px; } /* ========================================================== BOUTONS ========================================================== */ .alc-week-button{ padding:12px 20px; border:1px solid var(--alc-border); border-radius:var(--alc-radius-pill); background:var(--alc-white); color:var(--alc-black); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; transition: background var(--alc-transition), color var(--alc-transition), border-color var(--alc-transition), transform var(--alc-transition); } /* ========================================================== SURVOL ========================================================== */ .alc-week-button:hover{ border-color:var(--alc-orange); transform:translateY(-2px); } /* ========================================================== BOUTON ACTIF ========================================================== */ .alc-week-button.active{ background:var(--alc-gradient-orange); border-color:var(--alc-orange); color:var(--alc-white); box-shadow:var(--alc-shadow-orange); } /* ========================================================== CHAPITRE 5 — FILTRE PÔLE ========================================================== */ /* ========================================================== CONTENEUR ========================================================== */ .alc-pole-filter{ display:flex; justify-content:center; margin-top:25px; } /* ========================================================== BOUTONS PÔLES ========================================================== */ .alc-pole-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .alc-pole-button{ padding:10px 18px; border-radius:var(--alc-radius-pill); border:1px solid var(--alc-border); background:var(--alc-white); color:var(--alc-black); font-size:13px; font-weight:900; text-transform:uppercase; cursor:pointer; transition: background var(--alc-transition), color var(--alc-transition), border-color var(--alc-transition), transform var(--alc-transition); } /* ========================================================== HOVER ========================================================== */ .alc-pole-button:hover{ border-color:var(--alc-orange); transform:translateY(-2px); } /* ========================================================== ACTIF ========================================================== */ .alc-pole-button.active{ background:var(--alc-gradient-orange); color:var(--alc-white); border-color:var(--alc-orange); box-shadow:var(--alc-shadow-orange); } /* ========================================================== SELECT MOBILE ========================================================== */ #alc-pole-filter-mobile{ display:none; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:600px){ .alc-pole-buttons{ display:none; } #alc-pole-filter-mobile{ display:block; width:100%; max-width:300px; height:40px; padding:0 15px; border-radius:var(--alc-radius-pill); border:1px solid var(--alc-border); background:var(--alc-white); font-size:14px; font-weight:800; color:var(--alc-black); } } /* ========================================================== CHAPITRE 6 — BLOCS SEMAINES ========================================================== */ /* ========================================================== CONTENEUR SEMAINE ========================================================== */ .alc-week-section{ margin:0 0 50px; } /* ========================================================== TITRE SEMAINE ========================================================== */ .alc-week-section-title{ display:flex; align-items:center; gap:12px; justify-content:flex-start; font-size:28px; font-weight:900; text-transform:uppercase; background:var(--alc-gradient-orange); color:#ffffff !important; padding:15px 20px; margin-bottom:25px; border-radius:var(--alc-radius); box-shadow:var(--alc-shadow-orange); letter-spacing:.5px; } .alc-week-section-title, .alc-week-section-title *{ color:#ffffff !important; } /* ========================================================== ICÔNE SEMAINE ========================================================== */ .alc-week-section-title::before{ content:"🗓️"; font-size:24px; line-height:1; } /* ========================================================== ESPACEMENT ENTRE SEMAINES ========================================================== */ .alc-week-section + .alc-week-section{ margin-top:60px; }

Jeudi 30/07/2026

/* ========================================================== CHAPITRE 7 — BLOCS JOURS ========================================================== */ /* ========================================================== CONTENEUR JOUR ========================================================== */ .alc-day{ margin:0 0 45px; } /* ========================================================== TITRE JOUR ========================================================== */ .alc-day-title{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; margin-bottom:25px; background:var(--alc-white); border-left:6px solid var(--alc-orange); border-radius:var(--alc-radius); box-shadow:var(--alc-shadow); font-size:30px; font-weight:900; color:var(--alc-orange); } /* ========================================================== DATE DU JOUR ========================================================== */ .alc-day-date{ font-size:14px; font-weight:800; color:var(--alc-text-light); } /* ========================================================== GRILLE DES CARTES ========================================================== */ .alc-day-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; width:100%; margin-top:20px; margin-bottom:40px; } /* ========================================================== CHAPITRE 8 — CARTES ========================================================== */ /* ========================================================== CARTE PRINCIPALE ========================================================== */ .alc-card{ position:relative; display:flex; flex-direction:column; width:100%; min-width:0; height:auto; background:var(--alc-white); border:1px solid var(--alc-border); border-radius:var(--alc-radius); overflow:hidden; box-shadow:var(--alc-shadow); transition: transform var(--alc-transition), box-shadow var(--alc-transition); } /* ========================================================== HOVER ========================================================== */ .alc-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.12); } /* ========================================================== BANDEAU HAUT ========================================================== */ .alc-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; margin:14px 14px 0; background:var(--alc-black); color:white; border-radius:0; min-height:70px; } .alc-team-wrapper{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; } .alc-pole{ font-size:11px; font-weight:900; text-transform:uppercase; color:#999; letter-spacing:.5px; } .alc-team{ font-size:20px; font-weight:900; line-height:1.15; overflow-wrap:normal; word-break:normal; } .alc-type{ flex-shrink:0; background:var(--alc-gradient-orange); color:white; padding:7px 12px; border-radius:20px; font-size:11px; font-weight:900; text-transform:uppercase; white-space:nowrap; } /* ========================================================== CONTENU ========================================================== */ .alc-card-content{ padding:18px 16px 20px; display:flex; flex-direction:column; gap:12px; } .alc-card-row{ display:flex; align-items:flex-start; gap:12px; font-size:14px; font-weight:700; color:var(--alc-text); } .alc-card-icon{ width:20px; flex-shrink:0; } .alc-card-hour{ display:flex; align-items:center; gap:8px; } .alc-card-hour strong{ font-size:22px; font-weight:900; } .alc-card-arrow{ color:var(--alc-orange); font-weight:900; } /* ========================================================== BANDEAU ADVERSAIRE ========================================================== */ .alc-match-opponent{ display:flex; align-items:center; gap:12px; margin:0 14px 14px; padding:12px 15px; background:var(--alc-gradient-orange); color:white; font-weight:900; border-radius:0; } .alc-vs{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:white; color:var(--alc-orange); border-radius:8px; font-size:12px; font-weight:900; flex-shrink:0; } .alc-opponent-name{ font-size:14px; line-height:1.2; overflow-wrap:normal; word-break:normal; } /* ========================================================== CHAPITRE 9 — EN-TÊTE DES CARTES ========================================================== */ /* ========================================================== ZONE SUPÉRIEURE ========================================================== */ .alc-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; margin:14px 14px 0; background:var(--alc-gradient-dark); border-radius:0; color:var(--alc-white); } /* ========================================================== BLOC ÉQUIPE ========================================================== */ .alc-team-wrapper{ display:flex; flex-direction:column; gap:4px; min-width:0; } /* ========================================================== PÔLE ========================================================== */ .alc-pole{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.65); } /* ========================================================== ÉQUIPE ========================================================== */ .alc-team{ font-size:18px; font-weight:900; line-height:1.15; color:var(--alc-white); } /* ========================================================== TYPE ========================================================== */ .alc-type{ padding:6px 10px; border-radius:var(--alc-radius-pill); background:var(--alc-orange); color:var(--alc-white); font-size:10px; font-weight:900; text-transform:uppercase; white-space:nowrap; } /* ========================================================== CHAPITRE 10 — CONTENU DES CARTES ========================================================== */ /* ========================================================== LIGNES D'INFORMATIONS ========================================================== */ .alc-card-row{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.3; color:var(--alc-text); } /* ========================================================== ICÔNES ========================================================== */ .alc-card-icon{ display:flex; align-items:center; justify-content:center; width:24px; min-width:24px; font-size:16px; } /* ========================================================== HEURE ========================================================== */ .alc-card-hour{ display:flex; align-items:center; gap:8px; } /* ========================================================== HEURE PRINCIPALE ========================================================== */ .alc-card-hour strong{ font-size:22px; font-weight:900; line-height:1; color:var(--alc-black); } /* ========================================================== FLÈCHE HORAIRE ========================================================== */ .alc-card-arrow{ color:var(--alc-orange); font-weight:800; } /* ========================================================== INFORMATIONS SECONDAIRES ========================================================== */ .alc-card-row > div:not(.alc-card-hour){ font-weight:700; color:var(--alc-text-light); } /* ========================================================== TERRAIN ========================================================== */ .alc-card-row:has(.alc-card-icon){ min-height:28px; } /* ========================================================== CHAPITRE 11 — ADVERSAIRES DOMICILE / EXTÉRIEUR ========================================================== */ /* ========================================================== BLOC ADVERSAIRE ========================================================== */ .alc-opponent{ display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--alc-radius-pill); font-size:14px; font-weight:900; line-height:1.2; transition: transform var(--alc-transition), box-shadow var(--alc-transition); } /* ========================================================== ADVERSAIRE MATCH ========================================================== */ /* ========================================================== BANDEAU ADVERSAIRE ========================================================== */ .alc-match-opponent{ display:flex; align-items:center; gap:12px; margin:0 14px 14px; padding:12px 15px; color:white; font-weight:900; border-radius:0; } /* ========================================================== MATCH DOMICILE ========================================================== */ .alc-match-home{ background:var(--alc-gradient-orange); } /* ========================================================== MATCH EXTÉRIEUR ========================================================== */ .alc-match-away{ background:#777; } /* ========================================================== BOUTON VS ========================================================== */ .alc-vs{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:white; border-radius:8px; font-size:13px; font-weight:900; flex-shrink:0; } /* DOMICILE */ .alc-vs-home{ color:var(--alc-orange); } /* EXTÉRIEUR */ .alc-vs-away{ color:#777; } /* ========================================================== NOM ADVERSAIRE ========================================================== */ .alc-opponent-name{ text-transform:uppercase; letter-spacing:.5px; line-height:1.2; } /* ========================================================== HOVER ========================================================== */ .alc-match-opponent:hover{ transform:translateY(-2px); } /* ========================================================== CHAPITRE 12 — RESPONSIVE ========================================================== */ /* ========================================================== PETIT PC / ÉCRAN RÉDUIT ========================================================== */ @media (max-width:1200px){ .alc-day-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .alc-card-top{ flex-direction:column; align-items:flex-start; gap:10px; } .alc-type{ align-self:flex-start; } } /* ========================================================== TABLETTE ========================================================== */ @media (max-width:800px){ .alc-day-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; } .alc-week-navigation{ gap:8px; } .alc-week-button{ padding:12px 15px; } .alc-card-top{ padding:14px; } .alc-team{ font-size:19px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:600px){ .alc-week{ padding:0 10px; } .alc-day-grid{ grid-template-columns:1fr; gap:15px; } .alc-week-navigation{ flex-direction:column; } .alc-week-button{ width:100%; } .alc-card-top{ padding:14px; } .alc-team{ font-size:18px; } .alc-type{ font-size:11px; padding:6px 10px; } .alc-card-content{ padding:15px; } .alc-match-opponent{ margin:0 14px 14px; } } /* ========================================================== NAVIGATION SEMAINES MOBILE ========================================================== */ #alc-week-filter-mobile{ display:none; } @media(max-width:600px){ .alc-week-navigation{ display:none; } #alc-week-filter-mobile{ display:block; width:100%; height:42px; margin-bottom:25px; padding:0 15px; border-radius:var(--alc-radius-pill); border:1px solid var(--alc-border); background:white; font-size:14px; font-weight:800; color:var(--alc-black); } } /* ========================================================== CHAPITRE 13 — FINITIONS V1 ========================================================== */ /* ========================================================== SÉCURITÉ TEXTES ========================================================== */ .alc-card, .alc-card *{ overflow-wrap:normal; word-break:normal; } /* ========================================================== TEXTES ÉQUIPES ========================================================== */ .alc-team, .alc-pole{ white-space:normal; line-height:1.2; } /* ========================================================== BADGES ========================================================== */ .alc-type{ white-space:nowrap; } /* ========================================================== ADVERSAIRE ========================================================== */ .alc-opponent-name{ white-space:normal; } /* ========================================================== INTERACTIONS ========================================================== */ .alc-week-button, #alc-pole-filter-mobile, .alc-pole-button{ -webkit-tap-highlight-color:transparent; } .alc-week-button:active, .alc-pole-button:active{ transform:scale(.98); } /* ========================================================== FOCUS ACCESSIBILITÉ ========================================================== */ .alc-week button:focus-visible, .alc-week select:focus-visible{ outline:3px solid rgba(248,89,3,.35); outline-offset:3px; } /* ========================================================== ÉTAT VIDE ========================================================== */ .alc-empty{ display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--alc-white); border-radius:var(--alc-radius); box-shadow:var(--alc-shadow); text-align:center; font-size:16px; font-weight:700; color:var(--alc-text-light); } /* ========================================================== IMPRESSION ========================================================== */ @media print{ .alc-week-navigation, .alc-pole-filter{ display:none; } .alc-card{ box-shadow:none; break-inside:avoid; } }}