à l'intérieur de l'élément avec l'ID #social-fixed */
#social-fixed .social-list li {
/* 🚨 Les marges sont annulées uniquement ici */
margin-left: 0;
margin-right: 0;
/* Assurez-vous d'annuler les marges qui pourraient exister sur les classes spécifiques aussi */
margin: 0;
}
}
/* ========================================================== */
/* STYLES PAR DÉFAUT (Pour les écrans > 600px) */
/* ========================================================== */
.container {
width: 90%; /* Largeur par défaut pour desktop/tablette */
margin: 0 auto;
padding: 0 10px;
}
.event-info-box {
padding: 15px; /* Padding par défaut pour desktop/tablette */
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ========================================================== */
/* 📱 ADAPTATION PETIT ÉCRAN (max-width: 600px) */
/* ========================================================== */
@media (max-width: 600px) {
/* 1. Conteneur (Passer à 100% de largeur) */
.container {
/* 🚨 Le conteneur prend toute la largeur */
width: 100%;
/* Conserver la marge automatique (même si non nécessaire avec width: 100%) */
margin: 0 auto;
/* Optionnel : vous pourriez annuler le padding ici si vous voulez 100% pur */
/* padding: 0 0; */
}
/* 2. Boîte d'informations de l'événement (Supprimer le padding latéral) */
.event-info-box {
/* 🚨 Annuler le padding gauche/droit, conserver le padding haut/bas (15px) */
padding-left: 0;
padding-right: 0;
/* Conserver le padding haut et bas pour l'espacement vertical */
padding-top: 15px;
padding-bottom: 15px;
/* OU, plus concis, si vous n'avez besoin que du 0 en latéral : */
/* padding: 15px 0; */
}
.description-section, .artists-section {
padding-left: 0px;
}
}
/* ========================================================== */
/* 🚨 NOUVELLES RÈGLES POUR HARMONISER LA GRILLE NEWS/AGENDA */
/* ========================================================== */
/* Styles pour la grille Agenda ET News (jusqu'à 768px) */
/* Remplacez #news-list par le nouveau sélecteur (ici, .event-list-alike) */
.event-list-alike {
/* Style de base pour la grille news, similaire à #event-list (si l'on veut un comportement mobile par défaut) */
padding-top: 20px; /* Si c'est nécessaire pour l'espacement */
}
@media (min-width: 768px) {
/* Styles appliqués à #event-list à partir de 768px */
.event-list-alike {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 colonnes */
gap: 30px;
}
}
@media (min-width: 1024px) {
/* Styles appliqués à #event-list à partir de 1024px */
.event-list-alike {
grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes */
}
}
/* ========================================================== */
/* STYLES GÉNÉRAUX POUR LES PAGES STATIQUES (INFOS PRATIQUES) */
/* ========================================================== */
/* 1. LIENS : Utilisation de la couleur primaire (Jaune Belvédère) */
.event-details-content a {
color: var(--color-primary, #F4E70C); /* Utilise la variable CSS ou le fallback */
text-decoration: underline; /* Maintient l'indication que c'est un lien */
transition: color 0.2s;
}
.event-details-content a:hover {
color: #ffffff; /* Texte blanc au survol */
}
/* 2. BOUTON UTICK : Carré Jaune aux coins arrondis */
.utick-button {
display: inline-block;
width: 150px;
height: 150px;
background-color: #F4E70C;
color: white !important;
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 150px;
text-decoration: none;
border-radius: 10px;
transition: 0.3s;
}
.utick-button:hover {
background-color: #e0d00a; /* Jaune légèrement plus foncé au survol */
opacity: 0.9;
}
/* 3. STYLISATION DES LISTES (Méthodes d'accès, Paiement, Réductions) */
.access-methods,
.payment-methods,
.discounts {
list-style: none; /* Supprime les puces par défaut */
padding-left: 0; /* Alignement parfait avec le texte environnant */
margin: 20px 0; /* Espacement vertical */
}
.access-methods li,
.payment-methods li,
.discounts li {
margin-bottom: 15px; /* Espacement entre les lignes */
line-height: 1.5;
display: flex; /* Permet d'aligner l'icône et le texte */
align-items: flex-start; /* Aligne l'icône en haut si le texte est long */
}
/* Stylisation des icônes dans les listes */
.access-methods li i,
.payment-methods li i,
.discounts li i {
margin-right: 15px;
font-size: 1.3em; /* Icônes légèrement plus grandes */
min-width: 25px; /* Assure que le texte est bien décalé */
text-align: center;
padding-top: 2px;
}
/* Styles pour les sections A PROPOS et PARTENAIRES */
.cms-content-html {
/* Assure que le contenu venant du CMS (qui peut inclure ou