:root { --bs-primary: #30a602; --bs-primary-rgb: 48, 166, 2; --bs-primary-bg-subtle: rgba(48, 166, 2, 0.15); /* Variables personnalisées pour éviter les conflits de nommage avec Bootstrap */ --app-btn-primary-hover: #298e02; --bs-secondary: #177368; --bs-secondary-rgb: 23, 115, 104; --app-btn-secondary-hover: #125c53; --bs-link-color: #20B2AA; /* LightSeaGreen */ --bs-link-color-rgb: 32, 178, 170; --bs-link-hover-color: #13706b; --bs-link-hover-color-rgb: 19, 112, 107; /* Centralisation des variables de responsive */ --hero-min-height: 400px; --hero-logo-height: 180px; --hero-search-font-size: 1.1rem; --hero-search-padding: 0.75rem; --feature-icon-size: 3.5rem; --card-body-px: 1rem; --token-size: 80px; --token-padding-left: 75px; --accordion-token-gutter-width: var(--token-size); /* Espace pour le token lui-même */ --app-container-px: 3rem; --breadcrumb-max-width: none; } /* --- Bloc de Centralisation des Breakpoints (Inspiré de Bootstrap) --- */ /* Tablette et Desktop moyen (Large < 992px) */ @media (max-width: 991.98px) { :root { --hero-min-height: 300px; --hero-logo-height: 150px; --hero-search-font-size: 1rem; --feature-icon-size: 3.1rem; --hero-search-padding: 0.75rem; --card-body-px: 0.5rem; --token-size: 75px; --token-padding-left: 72px; --accordion-token-gutter-width: var(--token-size); --app-container-px: 2rem; --breadcrumb-max-width: none; } } /* Petites Tablettes / Large Mobile (Medium < 768px) */ @media (max-width: 767.98px) { :root { --hero-min-height: 275px; --hero-logo-height: 105px; --hero-search-font-size: 0.9rem; --feature-icon-size: 2.8rem; --hero-search-padding: 0.6rem; --card-body-px: 0.4rem; --token-size: 70px; --token-padding-left: 68px; --accordion-token-gutter-width: var(--token-size); --app-container-px: 1rem; --breadcrumb-max-width: 150px; } } /* Mobiles (Small < 576px) */ @media (max-width: 575.98px) { :root { --hero-min-height: 250px; --hero-logo-height: 90px; --hero-search-font-size: 0.75rem; --feature-icon-size: 2.5rem; --hero-search-padding: 0.5rem; --card-body-px: 0.25rem; --token-size: 60px; --token-padding-left: 58px; --accordion-token-gutter-width: var(--token-size); --app-container-px: 0.75rem; --breadcrumb-max-width: 100px; } } /* Couleurs spécifiques au mode sombre (si l'attribut data-bs-theme="dark" est présent sur ) */ html[data-bs-theme="dark"] { --bs-primary: #44c307; /* Une nuance de vert plus vive pour le contraste */ --bs-primary-rgb: 68, 195, 7; --bs-primary-bg-subtle: rgba(68, 195, 7, 0.15); --app-btn-primary-hover: #51e608; --bs-secondary: #22a394; --bs-secondary-rgb: 34, 163, 148; --app-btn-secondary-hover: #2bcabd; --bs-link-color: #40E0D0; /* Turquoise */ --bs-link-color-rgb: 64, 224, 208; --bs-link-hover-color: #70ffef; --bs-link-hover-color-rgb: 112, 255, 239; } /* Utilisation des variables pour le conteneur principal */ .app-main-container { padding-left: var(--app-container-px) !important; padding-right: var(--app-container-px) !important; margin-left: auto; margin-right: auto; } html { transition: font-size 0.2s ease-in-out; } body { min-height: 100vh; padding-top: 40px; transition: background-color 0.3s ease, color 0.3s ease; } /* Surcharge de la couleur primaire de Bootstrap */ .text-primary { color: var(--bs-primary) !important; } /* Animation globale de soulignement pour les liens */ a.lineover { position: relative; display: inline-flex; align-items: center; text-decoration: none !important; transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out; } a.lineover::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: currentColor; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-out; } a.lineover:not(.text-white-50) { color: var(--bs-link-color) !important; } a.lineover:hover:not(.text-white-50) { color: var(--bs-link-hover-color) !important; } a.lineover:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* Affinage extrême de la navbar pour mobile et desktop */ .navbar.fixed-top { box-shadow: 0 2px 10px rgba(0,0,0,0.15); padding-top: 0; padding-bottom: 0; min-height: 40px; background-color: var(--bs-body-bg); } .navbar.fixed-top .navbar-brand { padding: 0 !important; font-size: 1rem; } /* Groupe d'icônes pour la nouvelle Navbar */ .navbar-icons-group { display: flex; align-items: center; gap: 0.5rem; } .nav-icon-link { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--bs-emphasis-color); font-size: 1.4rem; transition: all 0.2s ease-in-out; text-decoration: none; background: transparent; border: none; cursor: pointer; } .nav-icon-link:hover, .nav-icon-link:focus { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); outline: none; } /* Effet glassmorphism pour les menus latéraux (transparence + flou) */ .offcanvas { background-color: rgba(var(--bs-body-bg-rgb), 0.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none !important; } .offcanvas-start { border-right: 1px solid rgba(255, 255, 255, 0.2) !important; } .offcanvas-end { border-left: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Ajustement pour les cartes dans les menus latéraux */ .offcanvas .card-zoom { border: 1px solid var(--bs-border-color-translucent); } /* Style pour la barre de recherche de rappel sur la page search */ .search-recall-card { background-color: var(--bs-body-bg) !important; border: 1px solid var(--bs-primary-bg-subtle) !important; transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; border-radius: var(--bs-border-radius-lg); } .search-recall-card:focus-within { border-color: var(--bs-primary) !important; box-shadow: 0 10px 25px rgba(var(--bs-primary-rgb), 0.15) !important; outline: none; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-btn-primary-hover); --bs-btn-hover-border-color: var(--app-btn-primary-hover); --bs-btn-active-bg: var(--app-btn-primary-hover); --bs-btn-active-border-color: var(--app-btn-primary-hover); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-btn-secondary-hover); --bs-btn-hover-border-color: var(--app-btn-secondary-hover); --bs-btn-active-bg: var(--app-btn-secondary-hover); --bs-btn-active-border-color: var(--app-btn-secondary-hover); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); } .btn-outline-primary:hover { color: #fff !important; } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); } .btn-outline-secondary:hover { color: #fff !important; } .btn-primary:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { filter: brightness(110%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1; /* Permet à l'ombre de survol de passer au-dessus des boutons adjacents dans un groupe */ } /* Dashboard styles */ .dashboard-container { background-color: var(--bs-primary-bg-subtle); border: 1px solid rgba(var(--bs-primary-rgb), 0.2); padding: 20px; border-radius: 8px; } /* Adaptation du dashboard en mode sombre */ html[data-bs-theme="dark"] .dashboard-container { background-color: rgba(var(--bs-primary-rgb), 0.1); border-color: rgba(var(--bs-primary-rgb), 0.2); } .carousel-item { overflow: hidden; /* Empêche l'image de déborder pendant le zoom */ } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; transform: scale(1); will-change: transform; border-radius: var(--bs-border-radius-xl); /* Applique l'arrondi à l'image de fond */ } /* Animation Zoom Avant pour les slides impaires (1, 3, 5...) */ .carousel-item:nth-child(odd).active .hero-bg { animation: kenburns-in 6s ease-out forwards; } /* Animation Zoom Arrière pour les slides paires (2, 4, 6...) */ .carousel-item:nth-child(even).active .hero-bg { animation: kenburns-out 6s ease-out forwards; } @keyframes kenburns-in { from { transform: scale(1); } to { transform: scale(1.15); } } @keyframes kenburns-out { from { transform: scale(1.15); } to { transform: scale(1); } } .hero-section { position: relative; /* Nécessaire pour le positionnement des enfants */ background: transparent !important; /* S'assure que le fond est géré par le carrousel */ min-height: var(--hero-min-height); overflow: hidden; /* Cache tout débordement des éléments internes */ } .hero-section .hero-background-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; border-radius: var(--bs-border-radius-xl); /* Ajout de l'arrondi au wrapper */ overflow: hidden; /* Assure que les enfants sont coupés par l'arrondi */ #heroCarousel, .carousel-inner, .carousel-item { height: 100%; width: 100%; border-radius: var(--bs-border-radius-xl); /* Applique l'arrondi aux éléments du carrousel */ overflow: hidden; /* Assure que les enfants sont coupés par l'arrondi */ } } .hero-section .hero-content-wrapper { position: relative; z-index: 2; width: 100%; padding: 4rem 0; display: flex; align-items: center; min-height: inherit; } /* Ajout d'un overlay constant pour garantir la lisibilité du texte */ .hero-section::before { content: ""; position: absolute; inset: 0; z-index: 1; /* Entre le fond et le contenu */ } .hero-logo { height: var(--hero-logo-height); width: auto; animation: fadeIn 1.2s ease-in-out both; } /* Focus effect for the search bar */ .hero-section .input-group { /* Add a transition for the outline and box-shadow */ transition: outline-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Set a default border-radius for the input-group to match its children */ border-radius: var(--bs-border-radius-lg); width: 100%; max-width: 480px; .form-control, .btn { padding-top: var(--hero-search-padding); padding-bottom: var(--hero-search-padding); font-size: var(--hero-search-font-size); } } .hero-section .form-control { color: #212529 !important; /* Force le texte en noir même si le hero est en blanc */ text-align: left; /* Garde le texte à gauche même si le parent est centré */ } .hero-section .input-group .form-control:focus, .hero-section .input-group .btn-search-hero:focus { outline: 0; /* Remove default outline */ box-shadow: none; /* Remove default box-shadow */ } .hero-section .input-group:focus-within { outline: 1px solid var(--bs-primary); /* Colored outline */ outline-offset: 2px; /* Space between element and outline */ box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Bootstrap-like shadow */ } .hero-section h1, .hero-section .lead { animation: fadeIn 1.2s ease-in-out both; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9); } .hero-section .lead { font-weight: 500; /* Rend les caractères plus denses pour mieux se détacher du fond */ letter-spacing: 0.01em; } .feature-icon { width: var(--feature-icon-size); height: var(--feature-icon-size); border-radius: 0.75rem; background-color: rgba(var(--bs-link-color-rgb), 0.15); color: var(--bs-link-color); transition: background-color 0.3s ease, color 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Léger effet de relief */ } /* Ensure icons are vertically aligned within breadcrumb items */ .breadcrumb-item a svg, .breadcrumb-item span svg { vertical-align: middle; } /* Troncature du texte trop long dans le breadcrumb sur mobile uniquement */ .breadcrumb-text-truncate { @media (max-width: 767.98px) { display: inline-block; max-width: var(--breadcrumb-max-width); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } #demarches.row { @media (max-width: 991.98px) { --bs-gutter-x: 0.75rem; } @media (max-width: 767.98px) { --bs-gutter-x: 1rem; } } .card-zoom .card-body { padding-left: var(--card-body-px); padding-right: var(--card-body-px); } .footer { @media (max-width: 991.98px) { font-size: 0.85rem; h5 { font-size: 0.95rem; } } @media (max-width: 767.98px) { font-size: 0.9rem; h5 { font-size: 0.95rem; } } } .sticky-sidebar { @media (min-width: 992px) { position: sticky; top: 6rem; align-self: start; } } .navbar-expand-lg .navbar-collapse.collapse { @media (min-width: 992px) { opacity: 1; } } /* Couleur de survol pour les list-group-item-action */ .list-group-item-action { color: var(--bs-link-color) !important; } /* Ajustement du soulignement pour le padding des list-groups */ .list-group-item-action::after { width: calc(100% - 2rem) !important; left: 1rem !important; bottom: 0.4rem !important; /* Descendu pour éviter de barrer les lettres */ } .list-group-item-action:hover { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-link-hover-color) !important; } .bg-body-tertiary { transition: background-color 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .card-zoom { position: relative; /* Nécessaire pour le positionnement absolu du pseudo-élément */ overflow: hidden; /* Cache le scintillement en dehors des bords de la carte */ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; cursor: pointer; border: 1px solid transparent; animation: fadeInUp 0.6s ease-out both; } .card-zoom .card-title { transition: transform 0.3s ease-in-out; transform-origin: left center; } html[data-bs-theme="dark"] .card-zoom { background-color: rgba(33, 37, 41, 0.75) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.5); } /* Pseudo-élément pour l'effet de scintillement */ html[data-bs-theme="dark"] .card-zoom::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%); pointer-events: none; /* Permet aux clics de passer à travers */ opacity: 0; /* Initialement invisible */ } /* Animation de scintillement au survol en mode sombre */ html[data-bs-theme="dark"] .card-zoom:hover::after { opacity: 1; /* Rend le scintillement visible */ animation: shimmer 0.8s ease-in-out forwards; /* Applique l'animation de scintillement */ } html[data-bs-theme="dark"] .card-zoom:hover { border-color: var(--bs-primary) !important; box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.3) !important; } .card-zoom:hover { transform: scale(1.02); /* On garde le scale car il est centré, mais on supprime le saut vertical */ box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important; } .card-zoom:hover .card-title { transform: scale(1.1); } .card-zoom:hover .feature-icon { color: var(--bs-link-hover-color); background-color: rgba(var(--bs-link-hover-color-rgb), 0.2); } /* Délais progressifs pour l'animation d'entrée des cartes */ #demarches .feature:nth-child(1) .card-zoom { animation-delay: 0.1s; } #demarches .feature:nth-child(2) .card-zoom { animation-delay: 0.15s; } #demarches .feature:nth-child(3) .card-zoom { animation-delay: 0.2s; } #demarches .feature:nth-child(4) .card-zoom { animation-delay: 0.25s; } #demarches .feature:nth-child(5) .card-zoom { animation-delay: 0.3s; } #demarches .feature:nth-child(6) .card-zoom { animation-delay: 0.35s; } #demarches .feature:nth-child(7) .card-zoom { animation-delay: 0.4s; } #demarches .feature:nth-child(8) .card-zoom { animation-delay: 0.45s; } /* Personnalisation des liens "En savoir plus" */ .card-zoom .icon-link { color: var(--bs-link-color); font-weight: 600; transition: color 0.2s ease-in-out; } .card-zoom .icon-link:hover { color: var(--bs-link-hover-color); } /* Personnalisation du Breadcrumb */ .breadcrumb-item { display: flex; /* S'assure que chaque élément est un conteneur flex */ align-items: center; /* Aligne verticalement les enfants (lien/span et séparateur) */ } .breadcrumb-item a { color: var(--bs-primary); font-weight: 500; transition: color 0.2s ease-in-out; } .breadcrumb-item a, .breadcrumb-item span { display: flex; /* S'assure que le lien/span est aussi un conteneur flex pour son contenu */ align-items: center; /* Aligne verticalement l'icône et le texte */ } .breadcrumb-item a:hover { color: var(--bs-secondary); } .breadcrumb-item + .breadcrumb-item::before { opacity: 0.6; float: none; /* Annule le float de Bootstrap pour une meilleure intégration flex */ display: flex; /* Traite le pseudo-élément comme un élément flex */ align-items: center; /* Aligne verticalement le séparateur */ height: 100%; /* Permet au séparateur de prendre toute la hauteur pour un alignement parfait */ } /* Uniformisation des cartes de news */ .news-card-img { height: 200px; object-fit: cover; } .news-card-body { display: flex; flex-direction: column; } .news-card .btn-outline-primary { color: var(--bs-link-color); border-color: var(--bs-link-color); } /* Stabilité de la carte d'actualité */ .news-card { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Empêche les micro-décalages de rendu */ backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; overflow: hidden; /* Contient le zoom de l'image */ } .news-card-img { height: 200px; object-fit: cover; transition: transform 0.3s ease, opacity 0.3s ease; /* Transition fluide pour le zoom et l'opacité */ } .news-date-badge { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 2; background-color: var(--bs-link-color); color: #fff; opacity: 0; /* Caché par défaut pour l'animation d'entrée */ padding: 0.5rem 1rem; /* Augmentation du padding */ border-radius: 0.75rem; /* Rayon de bordure plus grand */ font-weight: bold; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; /* Pour afficher sur deux lignes */ align-items: center; /* Synchronisation de la durée avec la carte */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; pointer-events: none; /* Empêche le badge d'interférer avec le survol de la carte */ backface-visibility: hidden; /* Stabilise le rendu pendant l'animation */ transform-origin: center center; } /* L'animation ne se déclenche que lorsque la classe .reveal est ajoutée via JS */ .news-date-badge.reveal { opacity: 1; animation: badgeEntrance 0.6s ease-out forwards; } /* Effets déclenchés au survol de la carte, sauf si on survole spécifiquement le corps de texte */ .news-card:hover:not(:has(.news-card-body:hover)) .news-date-badge { opacity: 1 !important; transform: scale(1.15) rotate(-5deg) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); background-color: var(--bs-link-hover-color) !important; } .news-card:hover:not(:has(.news-card-body:hover)) .news-card-img { transform: scale(1.05); opacity: 0.8; } .news-card:hover:not(:has(.news-card-body:hover)) .btn-outline-primary { background-color: var(--bs-link-color); color: #fff !important; border-color: var(--bs-link-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* On assure la visibilité du badge même sans animation quand on survole le corps */ .news-card:has(.news-card-body:hover) .news-date-badge { transform: scale(1) rotate(0) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Reset explicite pour l'image quand on survole le corps */ .news-card:has(.news-card-body:hover) .news-card-img { transform: scale(1); opacity: 1; } /* Reset explicite pour le bouton quand on survole le corps */ .news-card:has(.news-card-body:hover) .btn-outline-primary { background-color: transparent; color: var(--bs-link-color) !important; border-color: var(--bs-link-color); box-shadow: none; } .news-date-day { font-size: 1.8rem; /* Jour plus grand */ line-height: 1; /* Réduit l'espace entre les lignes */ } .news-date-month { font-size: 1rem; /* Mois plus petit */ line-height: 1; } @keyframes badgeEntrance { from { opacity: 0; transform: scale(0.8) translate(-20px, -10px); } to { opacity: 1; transform: scale(1) translate(0, 0); } } /* Conteneur pour les alertes flash (Toasts) */ .toast-container { z-index: 2000; top: 40px; /* Aligne le conteneur juste sous la navbar ultra-fine */ pointer-events: none; /* Empêche le conteneur de bloquer les clics sur la page */ display: flex; flex-direction: column; align-items: flex-end; } .toast { pointer-events: auto; border-left: 4px solid var(--bs-warning) !important; background-color: var(--bs-body-bg); box-shadow: var(--bs-box-shadow-lg) !important; } /* Animation de collapse pour le message complet des alertes */ .full-message-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; overflow: hidden; } .full-message-wrapper.is-expanded { grid-template-rows: 1fr; } .full-message-container { min-height: 0; } /* Stepper Vertical */ .stepper-vertical { position: relative; padding-left: 1rem; } .stepper-item { position: relative; padding-left: 2rem; padding-bottom: 0.5rem; } .stepper-item::before { content: ''; position: absolute; left: 0.75rem; top: 1.5rem; bottom: 0; width: 2px; background-color: var(--bs-primary-bg-subtle); } .stepper-item:last-child::before { display: none; } .stepper-marker { position: absolute; left: 0; width: 1.5rem; height: 1.5rem; background-color: var(--bs-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; z-index: 1; } /* Rendu du contenu Rich Text de Strapi */ .strapi-content { line-height: 1.7; word-wrap: break-word; } .strapi-content p { margin-bottom: 1.25rem; } .strapi-content h1, .strapi-content h2, .strapi-content h3, .strapi-content h4, .strapi-content h5, .strapi-content h6 { color: var(--bs-heading-color); margin-top: 2.5rem; margin-bottom: 1.25rem; line-height: 1.2; } /* Supprime la marge supérieure si le titre est le premier élément */ .strapi-content > :first-child { margin-top: 0 !important; } .strapi-content ul, .strapi-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .strapi-content li { margin-bottom: 0.5rem; } .strapi-content li > ul, .strapi-content li > ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } .strapi-content a { color: var(--bs-primary); text-underline-offset: 3px; transition: color 0.2s ease-in-out; } /* Indicateurs visuels pour les types de liens */ .strapi-content a.link-external::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; text-decoration: none; display: inline-block; } .strapi-content a.link-document::before { content: "📎 "; text-decoration: none; font-size: 0.9em; } .strapi-content a:hover { color: var(--bs-secondary); text-decoration: none; } .strapi-content blockquote { margin: 2rem 0; font-style: italic; } .strapi-content figure { margin: 2.5rem 0; } .strapi-content img { max-width: 100%; height: auto; } /* Animation des icônes de collapse */ .collapse-chevron { transition: transform 0.3s ease; color: var(--bs-primary); } [aria-expanded="true"] .collapse-chevron { transform: rotate(-180deg); } /* Animation de dépliage plus fluide */ .collapse:not(.show) { opacity: 0; transition: height 0.35s ease, opacity 0.35s ease; } .collapse.show { opacity: 1; transition: opacity 0.35s ease; } /* Style pour les liens cliquables (adresse, téléphone, email) */ .map-toggle, .contact-link-interaction { padding: 0.4rem 0.6rem; margin: -0.4rem -0.6rem; border-radius: 0.5rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; color: var(--bs-link-color) !important; display: inline-flex; align-items: center; } /* Ajustement du soulignement pour le padding des liens de contact */ .contact-link-interaction::after { width: calc(100% - 1.2rem) !important; left: 0.6rem !important; bottom: 0.4rem !important; /* Aligné sur le début du texte (padding 0.4rem) */ } /* Ajustement du soulignement pour le padding des liens de contact */ .map-toggle::after { bottom: 0.4rem !important; /* Aligné sur le début du texte (padding 0.4rem) */ } .map-toggle:hover, .contact-link-interaction:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-link-hover-color) !important; } /* Badges pour les professionnels de santé */ .badge-health { background-color: rgba(var(--bs-secondary-rgb), 0.1); color: var(--bs-secondary); border: 1px solid rgba(var(--bs-secondary-rgb), 0.25); font-weight: 500; } /* Style pour les cartes interactives (Cadastre & PLU) */ .cadastre-map-container, .plu-map-container { height: 400px; width: 100%; z-index: 1; background-color: #f8f9fa; } .leaflet-container { font-family: inherit; } /* Améliorations Maps */ .plu-map-container, .cadastre-map-container { position: relative; } .map-loader { position: absolute; top: 10px; right: 10px; z-index: 1000; background: white; padding: 5px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .parcel-label { background: transparent !important; border: none !important; box-shadow: none !important; color: #333; font-weight: bold; font-size: 10px; text-shadow: 1px 1px 1px white, -1px -1px 1px white; } /* Style pour la légende de la carte */ .legend-item:hover { background-color: #f8f9fa; transition: background-color 0.2s; } html[data-bs-theme="dark"] .info.legend { background-color: #212529 !important; color: #dee2e6; border-color: #495057 !important; } /* Animation de rebond pour les marqueurs */ @keyframes marker-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .custom-marker-icon div { transition: transform 0.2s ease-out; } /* On cible tous les marqueurs personnalisés au survol */ .custom-marker-icon div:hover { animation: marker-bounce 0.6s ease-in-out infinite; cursor: pointer; } /* Effet de surbrillance pour le logo/badge dans l'accordéon des commerces */ .accordion-item.card-zoom .accordion-header img, .accordion-item.card-zoom .accordion-header .badge { transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .accordion-item.card-zoom:hover .accordion-header img, .accordion-item.card-zoom:hover .accordion-header .badge { box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), 0.2), 0 0 15px rgba(0, 0, 0, 0.2) !important; } html[data-bs-theme="dark"] .accordion-item.card-zoom:hover .accordion-header img, html[data-bs-theme="dark"] .accordion-item.card-zoom:hover .accordion-header .badge { box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), 0.3), 0 0 15px rgba(255, 255, 255, 0.1) !important; } /* Effet de survol spécifique pour le logo/badge flottant */ .floating-token:hover { /* On doit réinclure le translateY(-50%) car Bootstrap l'impose en !important */ transform: translateY(-50%) scale(1.1) rotate(-3deg) !important; border-color: var(--bs-primary) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(var(--bs-primary-rgb), 0.2), 0 0 20px rgba(0, 0, 0, 0.3) !important; } /* Styles pour le logo flottant (Token) */ .floating-token { position: absolute; top: 50%; transform: translateY(-50%); width: var(--token-size); height: var(--token-size); /* On positionne le logo par rapport au bord réel de l'item (sans le padding) */ left: 10px; object-fit: contain; z-index: 10; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1) !important; } .accordion-item { position: relative; /* Nécessaire pour que le positionnement absolu du token soit relatif à cet élément */ padding-left: 0 !important; /* On annule le padding qui décalait l'origine du logo */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1) !important; } .accordion-button.token-padding { /* On applique le décalage ici pour que le texte ne chevauche pas le logo */ padding-left: calc(var(--token-size) + 1.5rem) !important; margin-left: 0 !important; } /* Effet hover sur les liens du footer */ .footer a { display: inline-flex; align-items: center; } .footer a:hover { opacity: 1; } /* Harmonisation des icônes et éléments primaires au survol */ .footer a:hover svg, .footer a:hover .text-primary { filter: brightness(120%); }