#sp-header { background-color: #ffffff !important; } /* 1. Supprime l'espace automatique sous l'image */ #sp-main-body { padding-top: 0 !important; } /* 2. Transforme le bloc "body-leytron" en carte arrondie qui chevauche l'image */ .body-leytron { position: relative; z-index: 10; margin-top: -200px !important; /* Ajustez la hauteur du chevauchement ici */ /* Style de la boîte blanche */ background-color: #ffffff !important; border-radius: 12px !important; /* Arrondit les 4 coins du bloc */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14); /* Ajoute une ombre douce sous la carte */ /* Marges intérieures (Padding) pour décoller le texte des bords arrondis */ padding: 40px !important; } /* Force l'image à sortir des limites de son conteneur parent */ .image-pleine-largeur img, #sp-main-body .image-pleine-largeur img { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; /* MODIFICATION : Définition de la hauteur maximale */ height: 570px !important; /* Hauteur par défaut (ajustez selon votre besoin) */ max-height: 70vh !important; /* Hauteur max basée sur 55% de la hauteur de l'écran */ object-fit: cover !important; /* Coupe l'image proprement sans la déformer */ object-position: center center; /* Centre le cadrage de la photo lors de la découpe */ display: block !important; /* Astuce magique pour centrer et étirer au-delà des marges du template */ margin-left: 50% !important; transform: translateX(-50%) !important; } /* Supprime les marges résiduelles autour du module */ .image-pleine-largeur { padding: 0 !important; margin-top: -16px !important; margin-bottom: 0 !important; overflow: visible !important; /* Permet à l'image de dépasser du cadre */ } /* Force le fond global de la page entière en blanc - au fond de la css */ body, #sp-page-builder, .body-innerwrapper, #sp-main-body { background-color: #ffffff !important; background: #ffffff !important; } //* ========================================================================== 1. STRUCTURE ET POSITIONNEMENT DU MÉGA MENU AUTOMATIQUE ========================================================================= */ /* Force le sous-menu à se positionner sous le mot parent principal */ .sp-megamenu-parent > li.sp-menu-item { position: relative !important; } /* Agrandir le texte des liens du menu principal */ .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { font-size: 18px !important; /* Ajustez les pixels selon vos besoins */ color: #000000 !important; /* noir pur */ font-weight: 600 !important; /* Optionnel : pour rendre le texte plus épais/gras */ } /* Remplacement de la largeur fixe de 1000px par une largeur fluide */ .sp-megamenu-parent > li.sp-menu-item .sp-dropdown { width: max-content !important; /* S'adapte au nombre de colonnes internes */ max-width: 1140px !important; /* Largeur maximale de sécurité (ex: grille Bootstrap) */ min-width: 280px !important; /* Sécurité minimale si seulement 1 colonne */ top: 90px !important; margin-top: 0 !important; background-color: #ffffff !important; border: 1px solid #333333 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important; padding: 0px !important; /* Ajoute un espacement interne tout autour du bloc */ } /* Ajuste la couleur du triangle indicateur natif d'Helix Ultimate */ .sp-megamenu-parent > li.sp-menu-item .sp-dropdown::before { border-bottom-color: #666666 !important; } /* Assure que l'intérieur du menu hérite aussi du fond noir */ .sp-megamenu-parent > li.sp-menu-item .sp-dropdown-inner { background-color: transparent !important; } /* Largeur fixe par colonne pour forcer le conteneur à calculer la bonne largeur globale */ .sp-megamenu-parent > li.sp-menu-item .sp-dropdown-inner .row > div { width: 250px !important; /* Chaque colonne fera précisément 250px */ flex: 0 0 250px !important; /* Empêche les colonnes de rétrécir ou s'étirer */ max-width: 250px !important; padding: 0 15px !important; /* Espacement horizontal entre vos colonnes */ } /* ========================================================================== 2. EN-TÊTES DE COLONNES (MENU HEADINGS) : BLANC ET TRÈS GRAS ========================================================================== */ /* Ciblage précis de la classe sp-group-title et des entêtes */ .sp-dropdown .sp-group-title, .sp-dropdown .dropdown-header, .sp-dropdown .nav-header, .sp-dropdown .mega-group-title, .sp-dropdown li.sp-menu-item span, .sp-dropdown-inner .row > div > span, .sp-dropdown-inner .row > div > div, .sp-megamenu-parent .sp-dropdown span.menu-item-title { font-size: 20px !important; font-weight: 400 !important; /* Ultra gras */ color: #000000 !important; /* noir pur */ opacity: 1 !important; text-transform: uppercase !important; line-height: 1.4 !important; display: block !important; margin-bottom: 15px !important; text-decoration: none !important; /* Supprime le soulignement éventuel */ border-bottom: 1px solid #ffffff !important; /* Crée une ligne blanche de 2px */ padding-bottom: 5px !important; /* Crée un espace de 5px entre le texte et la ligne */ margin-bottom: 15px !important; /* Ajuste l'espace sous la ligne */ } /* Évite que le survol des titres-liens ne change leur couleur en vert */ .sp-dropdown .sp-group-title:hover { color: #000000 !important; cursor: default !important; /* Curseur normal si c'est un lien mort (#) */ } /* ========================================================================== 3. SOUS-LIENS (ÉLÉMENTS DE MENU CLIQUABLES) ========================================================================== */ /* Ajout du sélecteur :not(.sp-group-title) pour exclure les entêtes */ .sp-megamenu-parent .sp-dropdown li.sp-menu-item ul li a:not(.sp-group-title), .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner ul.sp-mega-group-child li a:not(.sp-group-title), .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:not(.sp-group-title) { font-size: 18px !important; font-weight: 400 !important; color: #000000 !important; line-height: 1.3 !important; padding-top: 12px !important; padding-bottom: 12px !important; display: inline-block !important; border: none !important; box-shadow: none !important; } /* Effet au survol des sous-liens uniquement */ .sp-megamenu-parent .sp-dropdown li.sp-menu-item ul li a:not(.sp-group-title):hover, .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner ul.sp-mega-group-child li a:not(.sp-group-title):hover, .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:not(.sp-group-title):hover { color: #3e3f40 !important; font-weight: 600 !important; text-decoration: none !important; } /* ========================================================================== 4. ALIGNEMENT DU SOUS-SOUS-MENU (3E NIVEAU) ========================================================================== */ /* 1. Force l'élément parent direct (le li de Manifestations) à devenir la référence absolue */ .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner ul li.sp-has-child { position: relative; } /* 2. Positionne le sous-sous-menu à droite et à la même hauteur (top: 0) que son parent */ .sp-megamenu-parent .sp-dropdown li.sp-menu-item .sp-dropdown { top: 0% !important; /* juste en dessous */ left: 120px !important; /* aligné à gauche du titre */ padding: 0px !important; margin-top: 0px !important; margin-left: 0px !important; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item > .sp-dropdown, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > .sp-dropdown .sp-dropdown-inner { border: 0.1px solid #ddd !important; box-shadow: 0 0px 0px rgba(0,0,0,0) !important; background: #fff !important; padding: 0px !important; top:0 !important; } /* ========================================================================== 5. STYLISATION DES MENUS SUPÉRIEURS (1ER NIVEAU) ========================================================================== */ /* Force les liens du menu principal en blanc, majuscules et très gras */ .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { color: #000000 !important; /* Blanc pur */ font-weight: 700 !important; /* Très gras (Bold) */ text-transform: uppercase; /* En majuscules (optionnel, pour correspondre à l'image) */ opacity: 1 !important; /* Supprime une éventuelle transparence */ } /* Optionnel : Effet au survol des menus du sommet (si vous voulez qu'ils changent de couleur) */ .sp-megamenu-parent > li:hover > a, .sp-megamenu-parent > li:hover > span { color: #3e3f40 !important; /* Devient vert au survol (ou une autre couleur de votre choix) */ } /* Couleur du texte au survol des éléments du menu principal */ .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a { color: #33cc33 !important; /* Remplacez par votre code vert exact */ background-color: transparent !important; /* Supprime le fond gris d'origine */ } /* Optionnel : Couleur du texte pour l'élément actuellement actif/visité */ .sp-megamenu-parent > li.active > a { color: #33cc33 !important; } /* ------------------------------------------------------------- 4 menu photo sommet ------------------------------------------------------------- .menu-position { border: 1px solid #666666 !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 20px !important; background-color: #ffffff !important; display: block; } */ /* Force la couleur noire sur tous les liens du site et des modules */ a, .sp-modules a, #sp-component a { color: #000000 !important; } #sp-main-body a, #sp-footer a { color: #28a745 !important; } /* Optionnel : Couleur au survol de la souris (ici gris foncé) */ a:hover, .sp-modules a:hover, #sp-component a:hover { color: #333333 !important; text-decoration: underline; } /* ------------------------------------------------------------- jem -------------------------------------------------------------*/ /* Force une taille normale pour le titre de l'événement JEM */ .jem h1, .jem-event-title, h1.componentheading { font-size: 2.5rem !important; } .jem h2, h2.jem-location { font-size: 1.25rem !important; } /* ------------------------------------------------------------- jem - module calendrier dans les pages -------------------------------------------------------------*/ /* --- Version corrigée et fluide pour votre calendrier JEM --- */ .eventcalq, table.mod_jemcalq_calendar { width: 100% !important; max-width: 100% !important; /* Force le calendrier à utiliser tout l'espace disponible */ table-layout: fixed !important; /* Divise les 7 colonnes de manière strictement égale */ } /* --- Taille et espacement des cases (Grand format) --- */ table.mod_jemcalq_calendar td, table.mod_jemcalq_calendar th { padding: 10px 10px !important; /* Augmente la hauteur des cases */ text-align: center !important; vertical-align: middle !important; position: relative !important; z-index: 1 !important; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out !important; } /* --- Effet au survol : Zoom et Ombre sur TOUTES les cases --- */ table.mod_jemcalq_calendar td:hover { z-index: 99 !important; /* Fait passer la case au-dessus des autres pour le relief */ background-color: #f1f3f5 !important; /* Fond gris clair par défaut au survol */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; /* Ombre portée */ border-radius: 4px !important; cursor: pointer !important; } /* --- Cas spécifique : Survol des jours avec ÉVÉNEMENTS (Passe en vert) --- */ table.mod_jemcalq_calendar td.hasevent:hover { background-color: #28a745 !important; /* Remplacez par votre code vert exact */ } /* Change la couleur du texte/lien en blanc lors du survol d'un événement pour la lisibilité */ table.mod_jemcalq_calendar td.hasevent:hover a { color: #ffffff !important; text-decoration: none !important; } /* --- Adaptabilité pour les téléphones portables (Responsive) --- */ @media (max-width: 768px) { table.mod_jemcalq_calendar td, table.mod_jemcalq_calendar th { padding: 5px 5px !important; /* Cases plus petites sur smartphone */ } table.mod_jemcalq_calendar td:hover { transform: scale(1.05) !important; /* Zoom plus discret sur mobile pour éviter les bugs */ } } /* --- Augmenter la taille du texte du calendrier --- */ /* 1. Taille globale pour tout le calendrier */ .eventcalq { font-size: 1.3rem !important; /* Augmente la taille générale (par défaut ~1rem) */ } /* 2. Taille des flèches et du nom du Mois / Année (En-tête) */ .eventcalq table tr:first-child td, .eventcalq .mod_calendar_year_month { font-size: 1.5rem !important; font-weight: bold !important; } /* 3. Taille des jours de la semaine (Lu, Ma, Me...) */ table.mod_jemcalq_calendar th { font-size: 1.2rem !important; font-weight: 600 !important; } /* 4. Taille des chiffres des jours */ table.mod_jemcalq_calendar td { font-size: 1.3rem !important; } /* ------------------------------------------------------------- Actualités -------------------------------------------------------------*/ /* cartes actualités .home-actualite-card .card { background-color: #fcfcfc !important; } .home-actualite-card .card-title { font-size: 1.2rem !important; } .home-actualite-card .card-title a { color: #000000 !important; } .home-actualite-card .card-title a:hover { color: #555555 !important; text-decoration: underline !important; } .home-actualite-card .row { --bs-gutter-x: 1.8rem !important; --bs-gutter-y: 1.8rem !important; } */ /* ------------------------------------------------------------- Jdownload - lien depuis menu -------------------------------------------------------------*/ /* Ciblage de l'icône pour un espacement sur mesure */ .jd-icone-espace, .jd-icone-espace img, .jd-icone-espace i { display: inline-block; vertical-align: middle; /* Aligne horizontalement l'icône avec le texte du titre */ margin-top: 30px; /* Grand espace AVANT (au-dessus) de l'icône */ margin-bottom: 30px; /* Grand espace APRÈS (au-dessous) de l'icône */ margin-right: 15px; /* Optionnel : petit espace entre l'icône et le texte du titre */ }