@layer layout { .blognav__widgets, .blogextra__widgets { & h3 { text-transform: none !important; } } } /* ========================================================================== STYLE NUAGE DE TAGS (CORRECTION COULEUR ET VISIBILITÉ) ========================================================================== */ /* 1. Configuration de la liste */ .sidebar .tags ul, aside .tags ul, #extra .tags ul { margin: 5px 5px 5px 5px !important; /* padding: 0 !important; font-size: 110% !important; list-style: none !important; line-height: 1.6 !important; /* Donne de l'air entre les lignes de tags */ } /* 2. Alignement horizontal */ .sidebar .tags ul li, aside .tags ul li, #extra .tags ul li { display: inline !important; margin: 0 8px 0 0 !important; /* Un peu plus d'espace entre chaque mot */ padding: 0 !important; background: none !important; } /* 3. Application de la vraie variable Lisboa pour le texte des tags */ .sidebar .tags ul li a:link, .sidebar .tags ul li a:visited, aside .tags ul li a:link, aside .tags ul li a:visited { color: var(--sidebar-link-color) !important; /* S'adapte au mode clair/sombre */ /* border-bottom: none !important; /* DESACTIVE LA LIGNE SOUS LE TEXTE */ } /* 4. Comportement au survol */ .sidebar .tags ul li a:hover, aside .tags ul li a:hover { color: var(--link-color) !important; background-color: var(--sidebar-focus-background-color) !important; /* border-bottom: none !important; /* Assure qu'aucune ligne n'apparaît au survol */ } /* 5. Échelle des tailles pour le nuage */ .tag0 { font-size: 80% !important; } .tag10 { font-size: 85% !important; } .tag20 { font-size: 95% !important; } .tag30 { font-size: 105% !important; } .tag40 { font-size: 115% !important; } .tag50 { font-size: 125% !important; } .tag60 { font-size: 135% !important; } .tag70 { font-size: 145% !important; } .tag80 { font-size: 155% !important; } .tag90 { font-size: 165% !important; } .tag100 { font-size: 175% !important; } /* Écrase la variable uniquement pour le bloc des tags */ .tags { --widget-border-color: transparent !important; } /* ========================================================================== CORRECTION HOVER SIDEBAR (TRADUCTION EXACTE) ========================================================================== */ /* Équivalent de : li:hover ul { background-color: var(--sidebar-focus-background-color); } */ .sidebar li:hover ul { background-color: var(--sidebar-focus-background-color) !important; } /* Équivalent de : li:hover ul li:hover */ .sidebar li:hover ul li:hover { background-color: var(--sidebar-background-color) !important; } /* Équivalent de : li:hover ul li:hover a */ .sidebar li:hover ul li:hover a { background-color: var(--sidebar-background-color) !important; } /* ========================================================================== CENTREMENT GLOBAL DU SITE DANS LE NAVIGATEUR ========================================================================== */ /* 1. On cible le conteneur principal qui englobe tout le site (#page) */ #page { max-width: 1050px !important; /* Limite la largeur maximale du site (ajuste selon tes goûts) */ /*margin: 0 auto !important; /* Magie du CSS : centre automatiquement le bloc à l'écran */ /* padding-left: 0px !important; /* Petite sécurité pour éviter que ça colle aux bords sur mobile */ /* padding-right: 0px !important; /* Petite sécurité pour éviter que ça colle aux bords sur mobile */ } /* 2. On s'assure que la barre de navigation du haut s'aligne aussi sur ce cadre */ /*.header { max-width: 1050px !important; margin: 0 auto !important; }*/ /* ========================= POSITION du nom du blog ========================= */ /* Centre le titre du blog et la description */ .banner { text-align: left !important; /* Aligne le texte au milieu */ margin-left: 1em !important; margin-right: auto !important; } /* ============================================= AJUSTEMENT de la largeur du bloc des articles ============================================= */ /* --- 1. ÉCRANS GÉANTS (Plus de 110em) --- */ @layer layout-110-999 { @media screen and (width > 110em) { #main { width: calc((107% / 3 * 2) - 1em) !important; margin-right: -69% !important; } #sidebar { width: calc(100% / 1.7) !important; margin-left: calc(103.2% / 3 * 2) !important; } } } /* --- 2. ÉCRANS ORDINATEURS STANDARDS (De 80em à 110em) --- */ @layer layout-80-110 { @media screen and (width > 80em) and (width <= 110em) { #main { width: calc(71.3% - 1em) !important; } #sidebar { width: 30% !important; margin-left: 71.3% !important; } } } /* --- 3. ÉCRANS TABLETTES ET MOBILES (Moins de 80em) --- */ @layer layout-0-80 { @media screen and (width <= 80em) { #main { width: 730px !important; /* Largeur fixe voulue */ max-width: 95% !important; /* Sécurité anti-débordement sur mobile */ margin-left: auto !important; /* Centrage horizontal */ margin-right: auto !important; /* Centrage horizontal */ } } } /* ========================================================================== SUPPRESSION DU SOULIGNEMENT SOUS LES VIGNETTES D'IMAGES ========================================================================== */ /* On cible les liens qui contiennent directement une image */ #main a:has(img), .post-content a:has(img) { border-bottom: none !important; text-decoration: none !important; } /* Optionnel : sécurité pour les anciens navigateurs si :has() n'est pas supporté */ #main a img, .post-content a img { border: none !important; } /* ========================================================================== CHANGER LA TAILLE DU TITRE DES ARTICLES UNIQUEMENT (SANS LA SIDEBAR) ========================================================================= */ /* On cible spécifiquement le h2 qui est dans le bloc de contenu principal */ #main h2.post-title, #main .post h2, main h2:first-of-type { font-size: 2.5em !important; /* Ajuste cette valeur pour ton titre d'article */ } /* ========================================================================== COMPACTER LES CADRES GRIS CLAIR DES WIDGETS (SIDEBAR) ========================================================================== */ aside .box, aside .widget, .sidebar .box, #extra .box { /* 1. On réduit l'espace interne (Haut/Bas Gauche/Droite) */ /* D'origine, il y a souvent 1.5em ou 2em partout */ padding: 0em 0.5em !important; /* 2. Facultatif : Si tu veux que le cadre s'adapte strictement à la taille du contenu au lieu de prendre toute la largeur de la colonne */ /* width: max-content !important;*/ } /*—————————————————————————————————————————————————————————————————————————————————*/ /* Sous cette ligne : le Menu (simplemenu) /* ========================================================================== ORDINATEURS (ÉCRANS LARGES) ========================================================================== */ @media (min-width: 992px) { /* Rétablir la barre principale propre */ ul.simple-menu.nav.header__nav { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap !important; overflow: visible !important; } /* Gestion des conteneurs de liste */ ul.simple-menu.nav.header__nav li { position: relative !important; display: block !important; } /* --- NIVEAU 2 : Premier bloc déroulant vertical --- */ ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; /* ADAPTATION CLAIR/SOMBRE DU CONTENEUR */ background-color: var(--bg-color, rgba(255, 255, 255, 0.95)) !important; width: max-content !important; min-width: 240px !important; z-index: 9999 !important; margin: 0 !important; padding: 0px 0px !important; list-style: none !important; box-shadow: 0px 4px 10px rgba(0,0,0,0.15) !important; } ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown li { width: 100% !important; /* margin-top: 0px !important; /* Ajuste ce chiffre pour écarter ou rapprocher les blocs verts */ /* margin-bottom: 0px !important; /* Ajuste ce chiffre pour écarter ou rapprocher les blocs verts */ /* margin-left: 0px !important; /* Ajuste ce chiffre pour écarter ou rapprocher les blocs verts */ /* margin-right: 0px !important; /* Ajuste ce chiffre pour écarter ou rapprocher les blocs verts */ padding: 0px 0px !important; } /* Apparition du Niveau 2 au survol */ ul.simple-menu.nav.header__nav > li:hover > ul.sub-menu-dropdown { display: block !important; } /* --- NIVEAU 3 : Le bloc qui s'ouvre sur le côté --- */ ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu { display: none !important; position: absolute !important; top: 0 !important; left: 95% !important; /* Reste collé à droite du niveau 2 */ /* ADAPTATION ICI : On utilise la variable du thème ou le bleu très sombre par défaut */ background-color: var(--bg-color, #123250) !important; width: max-content !important; min-width: 240px !important; /* Sécurité minimum */ z-index: 10000 !important; margin: 0 !important; padding: 0px 0 !important; list-style: none !important; box-shadow: 4px 4px 10px rgba(0,0,0,0.3) !important; } /* ADAPTATION CLAIR/SOMBRE DU CONTENEUR */ background-color: var(--bg-color, rgba(255, 255, 255, 0.95)) !important; width: max-content !important; min-width: 240px !important; z-index: 10000 !important; margin: 0 !important; padding: 5px 0 !important; list-style: none !important; box-shadow: 4px 4px 10px rgba(0,0,0,0.15) !important; } /* Apparition du Niveau 3 au survol du parent de niveau 2 */ ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li:hover > ul.sub-sub-menu { display: block !important; } /* Habillage des liens internes (Niveaux 2 et 3) */ ul.simple-menu.nav.header__nav li ul a { display: block !important; padding: 3px 10px !important; /* TEXTE ADAPTATIF : On supprime la couleur forcée (#ffffff) pour laisser le ThemeSwitcher gérer le noir/blanc tout seul */ font-size: 0.95em !important; font-weight: normal !important; text-decoration: none !important; text-align: left !important; white-space: nowrap !important; /* On garde le texte sur une ligne pour l'ajustement auto */ border-bottom: 1px solid rgba(127, 127, 127, 0.15) !important; /* Bordure discrète */ transition: background-color 0.2s ease !important; } ul.simple-menu.nav.header__nav li ul li:last-child > a { border-bottom: none !important; } /* Indicateur visuel pour les éléments contenant un sous-sous-menu */ ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li:has(ul.sub-sub-menu) > a::after { content: " ❯" !important; float: right !important; margin-left: 6px !important; opacity: 0.6 !important; } /* --- GESTION DES ARRIÈRE-PLANS UNIQUES ET ADAPTATIFS --- */ /* 1. LIENS CLIQUABLES (PERMANENT) : Couleur dynamique selon le mode */ ul.simple-menu.nav.header__nav li ul a:not(.non-clickable-folder) { background-color: var(--fond-bouton-cliquable, #1a4268) !important; /* Utilise la variable ou le bleu par défaut */ border-left: 4px solid #226eb4 !important; cursor: pointer !important; } /* 3. SURVOL DES LIENS CLIQUABLES Le fond s'intensifie et le texte passe en jaune au passage de la souris */ ul.simple-menu.nav.header__nav li ul a:not(.non-clickable-folder):hover { background-color: rgba(34, 110, 180, 0.35) !important; color: #ffcc00 !important; /* Un beau jaune vif et lisible sur fond bleu ET sur fond blanc */ } /* 2. DOSSIERS DE SURVOL UNIQUEMENT : Restent transparents */ ul.simple-menu.nav.header__nav li ul a.non-clickable-folder { background-color: transparent !important; cursor: default !important; opacity: 0.85 !important; } ul.simple-menu.nav.header__nav li ul a.non-clickable-folder:hover { background-color: transparent !important; } } /* ========================================================================== MOBILES (ANDROID) : PROTECTION DU BURGER ========================================================================== */ @media (max-width: 991px) { ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown, ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu { display: block !important; position: static !important; box-shadow: none !important; background: none !important; margin: 0 !important; list-style: none !important; } /* Écartement en cascade pour s'y retrouver sur écran tactile */ ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown { padding: 0 0 0 15px !important; } ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu { padding: 0 0 0 20px !important; } ul.simple-menu.nav.header__nav li ul li a { padding: 8px 10px !important; border-bottom: none !important; } } /* ========================================================================== CORRECTIONS ET NETTOYAGES GLOBAUX ========================================================================== */ /* Suppression de la ligne/bordure blanche sous les éléments du premier niveau */ ul.simple-menu.nav.header__nav > li > a, ul.simple-menu.nav.header__nav > li > a span, ul.simple-menu.nav.header__nav > li > a::after { border-bottom: none !important; box-shadow: none !important; text-decoration: none !important; } /* ========================================================================== SÉCURITÉ INJECTION THEMESWITCHER (FONDS ET COULEURS ADAPTATIFS) ========================================================================== */ /* --- CONFIGURATION POUR LE MODE CLAIR --- */ html.light ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown, body.light-theme ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown, html.light ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu, body.light-theme ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu { background-color: #a2cbe9 !important; /* Fond du volet en blanc */ box-shadow: 0px 4px 10px rgba(0,0,0,0.1) !important; /* ICI : La couleur de ton bloc (ex-vert) en mode CLAIR */ --fond-bouton-cliquable: #e2eef8; /* Un bleu très doux/pastel, superbe avec le texte noir */ } /* --- CONFIGURATION POUR LE MODE SOMBRE --- */ html.dark ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown, body.dark-theme ul.simple-menu.nav.header__nav li ul.sub-menu-dropdown, html.dark ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu, body.dark-theme ul.simple-menu.nav.header__nav ul.sub-menu-dropdown li ul.sub-sub-menu { background-color: #29587f !important; /* Fond du volet en bleu nuit */ box-shadow: 0px 4px 10px rgba(0,0,0,0.4) !important; /* ICI : La couleur de ton bloc (ex-vert) en mode SOMBRE */ --fond-bouton-cliquable: #1a4268; /* Ton bleu uni d'origine, parfait sur le fond nuit */ }