/*==================================================== VOIR EVENTS.CSS BEN'S LINE DANCE =====================================================*/ /*==================================================== PAGE =====================================================*/ .event-page{ width:100%; padding:50px 0 80px; } .event-page .container{ max-width:1200px; margin:auto; padding:0 25px; } /*==================================================== HERO EVENT =====================================================*/ .event-hero{ min-height:420px; position:relative; background: linear-gradient( rgba(0,0,0,.55), rgba(0,0,0,.55) ), url("../images/hero-events.webp"); background-size:cover; background-position:center; display:flex; align-items:center; } .event-hero .hero-overlay{ width:100%; } .event-hero .hero-content{ max-width:900px; padding:120px 0 80px; } .event-hero .hero-badge{ display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.15); color:white; padding:12px 25px; border-radius:50px; font-size:15px; backdrop-filter:blur(6px); margin-bottom:25px; } .event-hero h1{ color:white; font-size:48px; line-height:1.15; margin:0; font-weight:800; } /*==================================================== IMAGE + INFORMATIONS =====================================================*/ .event-main-layout{ display:grid; grid-template-columns: minmax(400px,600px) 1fr; gap:45px; align-items:start; } /*==================================================== IMAGE =====================================================*/ .event-main-image{ width:100%; height:100%; } .event-main-image img{ width:100%; height:100%; object-fit:cover; border-radius:25px; display:block; box-shadow: 0 15px 35px rgba(0,0,0,.15); } /*==================================================== CONTENU DROITE =====================================================*/ .event-right-content{ display:flex; flex-direction:column; gap:30px; } /*==================================================== GRILLE INFORMATIONS =====================================================*/ .event-info-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; } /*==================================================== CARTES INFOS =====================================================*/ .info-card{ display:flex; align-items:center; gap:18px; background:white; padding:22px; border-radius:20px; box-shadow: 0 8px 25px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); transition:.3s ease; } .info-card:hover{ transform:translateY(-4px); } .info-icon{ width:55px; height:55px; min-width:55px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:white; font-size:22px; } .info-card small{ display:block; color:#777; font-size:14px; margin-bottom:5px; } .info-card strong{ display:block; color:#222; font-size:17px; line-height:1.3; } /*==================================================== CARTES PRINCIPALES =====================================================*/ .event-card{ background:white; border-radius:25px; padding:35px; box-shadow: 0 10px 30px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); } /*==================================================== HEADER CARTE =====================================================*/ .card-header{ display:flex; align-items:center; gap:15px; padding-bottom:20px; margin-bottom:25px; border-bottom:1px solid rgba(0,0,0,.08); } .card-header i{ width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:white; font-size:18px; } .card-header h2{ margin:0; font-size:26px; color:#222; } /*==================================================== ORGANISATEUR =====================================================*/ .organizer-card{ margin-top:0; } .contact-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:25px; } .contact-item{ display:flex; align-items:center; gap:18px; padding:20px; background:#fafafa; border-radius:18px; } .contact-item > i{ width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.06); color:var(--primary); font-size:18px; } .contact-item span{ display:block; font-size:14px; color:#777; margin-bottom:5px; } .contact-item strong{ display:block; font-size:16px; color:#222; } /*==================================================== DESCRIPTION =====================================================*/ .description-card{ margin-top:40px; } .card-body{ font-size:17px; line-height:1.8; color:#444; } .card-body p{ margin:0; } /*==================================================== ACTIONS =====================================================*/ .event-actions{ display:flex; justify-content:center; align-items:center; gap:20px; margin-top:45px; flex-wrap:wrap; } .event-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:50px; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; transition:.3s ease; } .event-actions .btn-primary{ background:var(--primary); color:white; border:none; } .event-actions .btn-secondary{ background:#333; color:white; } .event-actions .btn:hover{ transform:translateY(-3px); } /*==================================================== RESPONSIVE =====================================================*/ /*==================================================== TABLETTE =====================================================*/ @media(max-width:992px){ .event-page{ padding:40px 0 60px; } .event-main-layout{ grid-template-columns:1fr; gap:35px; } .event-main-image img{ height:450px; } .event-right-content{ gap:25px; } .event-info-grid{ grid-template-columns: repeat(2,1fr); } .event-card{ padding:30px; } .event-hero{ min-height:350px; } .event-hero .hero-content{ padding:100px 0 60px; } .event-hero h1{ font-size:38px; } } /*==================================================== MOBILE =====================================================*/ @media(max-width:600px){ .event-page{ padding:30px 0 50px; } .event-page .container{ padding:0 18px; } /* HERO */ .event-hero{ min-height:300px; } .event-hero .hero-content{ padding:80px 0 50px; text-align:center; } .event-hero .hero-badge{ font-size:13px; padding:10px 18px; } .event-hero h1{ font-size:30px; } /* IMAGE */ .event-main-image img{ height:320px; border-radius:20px; } /* INFORMATIONS */ .event-info-grid{ grid-template-columns:1fr; gap:15px; } .info-card{ padding:18px; gap:15px; } .info-icon{ width:48px; height:48px; min-width:48px; font-size:18px; } .info-card strong{ font-size:16px; } /* CARTES */ .event-card{ padding:22px; border-radius:20px; } .card-header{ gap:12px; } .card-header h2{ font-size:22px; } /* ORGANISATEUR */ .contact-grid{ grid-template-columns:1fr; gap:15px; } .contact-item{ padding:16px; } /* DESCRIPTION */ .card-body{ font-size:16px; line-height:1.7; } /* BOUTONS */ .event-actions{ flex-direction:column; width:100%; gap:15px; } .event-actions .btn{ width:100%; max-width:350px; } } /*==================================================== PETITS MOBILES =====================================================*/ @media(max-width:380px){ .event-hero h1{ font-size:26px; } .info-card{ flex-direction:column; text-align:center; } .event-actions .btn{ font-size:15px; padding:14px 20px; } }