/* ========================================================================== Impriclub — surcharges du design Woffice 5 (« Stellar ») Chargé après style.css. Objectif : retrouver le rendu du site historique (header centré, menu latéral replié, charte violette) sur le nouveau DOM. ========================================================================== */ :root { --impri-violet: #5B2C82; --impri-violet-dark: #4a2369; --impri-headline: #31348e; --impri-text: #555; } /* -------------------------------------------------------------------------- Barre haute (woffice_top_navbar) : hamburger | logo centré | recherche, cloche, utilisateur -------------------------------------------------------------------------- */ /* Logo centré (lien injecté par assets/custom.js, image en fond pour l'afficher sans JS) */ #main-header .impriclub-header-logo img { display: none; } /* Recherche : à droite, juste avant la cloche (et non centrée sous le logo) */ #main-header #main-search input[type="text"] { max-width: 200px; } /* -------------------------------------------------------------------------- Typographie & contenu -------------------------------------------------------------------------- */ /* Woffice 5 coupe les titres au milieu des mots (word-break: break-all) */ #page-wrapper h1, #page-wrapper h2, #page-wrapper h3, #page-wrapper h4, #page-wrapper h5, #page-wrapper h6, #content-container .post .heading { word-break: normal; overflow-wrap: anywhere; hyphens: manual; } /* Woffice 5 met le contenu des articles en "Capitalize" : illisible en français */ #content-container #content .blog-content p, #content-container #content .blog-content li, #content-container #content .blog-content dl, #content-container #content .blog-content table, .wo_common_comment_wrapper .comment-content p { text-transform: none !important; color: #444 !important; font-size: 15px; font-weight: 400; line-height: 1.7; } #content-container #content .blog-content a { color: var(--impri-violet); } /* Image à la une d'un article : flottante à droite du texte (30 %), comme le site historique */ .single-post .blog-content .intern-thumbnail { float: right; width: 30%; height: auto !important; margin: 0 0 2.5rem 2.5rem; border-radius: 8px; overflow: hidden; } .single-post .blog-content .intern-thumbnail img { width: 100%; height: auto; } .single-post .blog-content::after { content: ""; display: table; clear: both; } /* Texte de l'article : 16 px / 24 px, #666, gras respecté */ #content-container #content .blog-content p, #content-container #content .blog-content li { font-size: 16px; line-height: 24px; } #content-container #content .blog-content strong, #content-container #content .blog-content b { font-weight: 700; color: #353535; } /* Meta de l'article au-dessus du texte, à gauche */ .single-post .blog-title { flex-direction: column; } .single-post .post-metadatas { padding-left: 0; } /* -------------------------------------------------------------------------- Widgets du tableau de bord -------------------------------------------------------------------------- */ #dashboard ul, #dashboard li, .widget ul, .widget li { list-style: none; } #dashboard div[id^='rpwwt-recent-posts-widget-with-thumbnails-'] > ul { padding-left: 0; } #dashboard .intern-box.box-title h3, #dashboard .widget-title { color: var(--impri-violet); } /* -------------------------------------------------------------------------- GeoDirectory (cartographie / recherche) -------------------------------------------------------------------------- */ /* Champ "Address" (near) apporté par Location Manager 2.3 : non utilisé */ .geodir-search .gd-search-field-near, .geodir-search .geodir-search-input-wrapper.near, .geodir-search input[name="snear"] { display: none !important; } .geodir-search .geodir_submit_search { white-space: nowrap; min-width: 110px; overflow: visible; } /* Barre de filtres de la cartographie / annuaire des entreprises, responsive. style.css la composait en largeurs fixes (20 %, 28 %…) avec le champ de recherche placé en absolu : boutons et champ se recouvraient sous 1 440 px, et sortaient du cadre sur tablette (LIVE compris). Les conteneurs intermédiaires de GeoDirectory s'effacent (display: contents) : listes, champ de recherche et boutons deviennent les cases d'une seule grille, dont le nombre de colonnes suit la largeur du formulaire — 5 au-dessus de 1 000 px (critères, puis département, société, recherche et boutons), 3, 2, puis 1. */ #page-wrapper #content form.geodir-listing-search { container: filtres-gd / inline-size; } #page-wrapper #content form.geodir-listing-search .geodir-loc-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: end; height: auto !important; padding: 0 !important; } #page-wrapper #content form.geodir-listing-search .geodir-loc-bar-in, #page-wrapper #content form.geodir-listing-search .geodir-search, #page-wrapper #content form.geodir-listing-search .geodir-filter-container, #page-wrapper #content form.geodir-listing-search .geodir-more-filters, #page-wrapper #content form.geodir-listing-search .customize_filter_inner, #page-wrapper #content form.geodir-listing-search .customize_filter_inner > .clearfix { display: contents !important; } #page-wrapper #content form.geodir-listing-search .gd-search-input-wrapper, #page-wrapper #content form.geodir-listing-search .geodir-filter-cat { position: relative !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; order: 1; } #page-wrapper #content form.geodir-listing-search .geodir-filter-cat { order: 2; } #page-wrapper #content form.geodir-listing-search .gd-search-input-wrapper select, #page-wrapper #content form.geodir-listing-search .geodir-filter-cat select { width: 100% !important; float: none !important; } /* Champ de recherche libre : dans le flux, après les listes */ #page-wrapper #content form.geodir-listing-search .gd-search-input-wrapper.gd-search-field-search { order: 3; top: auto !important; right: auto !important; height: auto !important; overflow: visible !important; grid-column: 1 / -1; } #page-wrapper #content form.geodir-listing-search .gd-search-field-search input.search_text { width: 100% !important; float: none !important; } /* Boutons : sur leur propre ligne, centrés, sauf en 5 colonnes où ils terminent la 2e ligne */ #page-wrapper #content form.geodir-listing-search .geodir-advance-search { order: 4; grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; width: auto !important; height: auto !important; margin: 0 !important; } #page-wrapper #content form.geodir-listing-search .geodir-advance-search button { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } /* Les « clearfix » des conteneurs effacés produiraient des cases vides dans la grille */ #page-wrapper #content form.geodir-listing-search .geodir-loc-bar::before, #page-wrapper #content form.geodir-listing-search .geodir-loc-bar::after, #page-wrapper #content form.geodir-listing-search .geodir-loc-bar .clearfix::before, #page-wrapper #content form.geodir-listing-search .geodir-loc-bar .clearfix::after, #page-wrapper #content form.geodir-listing-search .geodir-search::before, #page-wrapper #content form.geodir-listing-search .geodir-search::after, #page-wrapper #content form.geodir-listing-search .geodir-filter-container::before, #page-wrapper #content form.geodir-listing-search .geodir-filter-container::after, #page-wrapper #content form.geodir-listing-search .customize_filter_inner::before, #page-wrapper #content form.geodir-listing-search .customize_filter_inner::after { display: none !important; } @container filtres-gd (min-width: 600px) { #page-wrapper #content form.geodir-listing-search .geodir-loc-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } #page-wrapper #content form.geodir-listing-search .gd-search-input-wrapper.gd-search-field-search { grid-column: span 1; } } @container filtres-gd (min-width: 1000px) { #page-wrapper #content form.geodir-listing-search .geodir-loc-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); } #page-wrapper #content form.geodir-listing-search .geodir-advance-search { grid-column: span 2; justify-content: flex-end; } } @container filtres-gd (max-width: 359px) { #page-wrapper #content form.geodir-listing-search .geodir-loc-bar { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Annuaire des membres (tableau) -------------------------------------------------------------------------- */ #members-list .bp-members-table-raison img, .bp-members-table-raison img { max-height: 40px; width: auto; display: block; margin: 0 auto .25rem; } /* Mobile (LIVE : barre 100 px, logo 110×32 à gauche après le hamburger, avatar 50 px, loupe et cloche 18 px à droite) */ @media (max-width: 991px) { #main-header, #main-header nav.navbar { height: 100px !important; min-height: 0; padding: 0 !important; } #main-header #nav-trigger { padding: 0 12px 0 16px; } #main-header #nav-trigger { order: 0; } #main-header #main-search, #main-header #main-search .active_search, #main-header #main-search .active_search::after { width: 40px; } #main-header #main-search form { right: -40px; width: calc(100vw - 32px); } } /* bbPress : la recherche des forums chevauchait le bas du bandeau de titre */ #content-container #bbp-search-form, #content-container .bbp-search-form { position: static; margin: 1.25rem auto 1rem; max-width: 560px; } /* ========================================================================== RAIL DE NAVIGATION (menu latéral) — reproduction du site historique Valeurs relevées sur le LIVE : rail fixe 100 px, fond #384141, items 100×100, icône icomoon 48 px au-dessus d'un libellé 12 px bold capitales, actif = #5B2C82. Woffice 5 : #navigation dans .is-left-sidebar (absolute/fixed), menu = ul#main-modern-menu. ========================================================================== */ :root { --impri-rail-w: 100px; --impri-rail-bg: #384141; } /* Largeur de la colonne et décalage du contenu quand le menu est ouvert */ body.vertical-modern-menu:not(.navigation-hidden):not(.sidebar-hidden) .is-left-sidebar, body.vertical-modern-menu.sidebar-hidden .is-left-sidebar, body.vertical-modern-menu .is-left-sidebar { width: var(--impri-rail-w) !important; max-width: var(--impri-rail-w) !important; box-shadow: 0 1rem 4rem rgba(0, 0, 0, .15); overflow: visible; } body.vertical-modern-menu:not(.navigation-hidden):not(.sidebar-hidden) .is-center-content, body.vertical-modern-menu #page-wrapper .is-left-sidebar ~ .is-center-content { padding-left: var(--impri-rail-w) !important; } body.vertical-modern-menu #page-wrapper .is-left-sidebar.has-navigation-hidden ~ .is-center-content { padding-left: 0 !important; } body.vertical-modern-menu .has-navigation-hidden { left: calc(-1 * var(--impri-rail-w) - 80px); } #navigation, body.vertical-modern-menu .is-left-sidebar { background: var(--impri-rail-bg) !important; width: var(--impri-rail-w) !important; min-height: 100vh; } /* Pas de logo ni de bouton de fermeture dans la rail (le logo est dans la barre haute) */ #navigation .stellar-nav-logo, #navigation .main-modern-menu .click_menutoggle, #navigation .main-modern-menu .menu-icon, #navigation .main-modern-menu .woffice-menu-item-icon { display: none !important; } #navigation .mCSB_container, #navigation .mCustomScrollBox { overflow: visible !important; } body.vertical-modern-menu #main-modern-menu, body.vertical-modern-menu .main-modern-menu { padding: 0 0 80px !important; margin: 0; width: var(--impri-rail-w); } body.vertical-modern-menu .main-modern-menu > li.menu-item { margin: 0; width: var(--impri-rail-w); height: 100px; line-height: 0; position: relative; } body.vertical-modern-menu .main-modern-menu > li.menu-item > a { display: block; position: relative; overflow: hidden; height: 100px; width: var(--impri-rail-w); padding: 64px 4px 23px !important; border-radius: 0; text-align: center; font-family: Montserrat, helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 700; line-height: 12px; text-transform: uppercase; color: #fff !important; background: transparent; transition: background .3s; } /* Icône icomoon (glyphes définis par classe .icon-* dans style.css) */ body.vertical-modern-menu .main-modern-menu > li.menu-item > a::before { font-family: 'icomoon' !important; font-weight: 400; font-size: 48px; line-height: 1; position: absolute; top: 10px; left: 0; width: 100%; margin: 0; color: #efefef !important; opacity: .8; transition: opacity .3s; } body.vertical-modern-menu .main-modern-menu > li.menu-item > a:hover, body.vertical-modern-menu .main-modern-menu > li.current-menu-item > a, body.vertical-modern-menu .main-modern-menu > li.current_page_item > a, body.vertical-modern-menu .main-modern-menu > li.current-menu-ancestor > a, body.vertical-modern-menu .main-modern-menu > li.current_page_ancestor > a, body.vertical-modern-menu .main-modern-menu > li.current-menu-parent > a, body.vertical-modern-menu .main-modern-menu > li.menu-item > a.current-menu-highlight { background: var(--impri-violet) !important; color: #fff !important; } body.vertical-modern-menu .main-modern-menu > li.menu-item > a:hover::before, body.vertical-modern-menu .main-modern-menu > li.current-menu-item > a::before { opacity: 1; } /* Glyphes icomoon par entrée (classes CSS des éléments de menu, cf. style.css) */ body.vertical-modern-menu .main-modern-menu > li.icon-dashboard > a::before { content: '\e90e'; } body.vertical-modern-menu .main-modern-menu > li.icon-actualites > a::before { content: '\e90d'; } body.vertical-modern-menu .main-modern-menu > li.icon-forum > a::before { content: '\e90c'; } body.vertical-modern-menu .main-modern-menu > li.icon-stats > a::before { content: '\e90a'; } body.vertical-modern-menu .main-modern-menu > li.icon-agenda > a::before { content: '\e908'; } body.vertical-modern-menu .main-modern-menu > li.icon-reseau > a::before { content: '\e907'; } body.vertical-modern-menu .main-modern-menu > li.icon-entreprise > a::before { content: '\e90b'; } body.vertical-modern-menu .main-modern-menu > li.icon-ressources > a::before { content: url(/wp-content/uploads/2022/03/Ressources-2.svg) !important; } body.vertical-modern-menu .main-modern-menu > li.icon-thetis > a::before { content: url(/wp-content/uploads/2023/02/icone-thetis.svg); } body.vertical-modern-menu .main-modern-menu > li.icon-commandes > a::before { content: url(/wp-content/uploads/2023/02/cart-resize.png); } /* Impridata / Commandes / Ressources : icônes image */ body.vertical-modern-menu .main-modern-menu > li.icon-thetis > a::before, body.vertical-modern-menu .main-modern-menu > li.icon-commandes > a::before, body.vertical-modern-menu .main-modern-menu > li.icon-ressources > a::before { left: 50%; width: 48px; margin-left: -24px; line-height: 0; } body.vertical-modern-menu .main-modern-menu > li > a[title='menu-commandes'] { background: #8207D4 !important; } /* La barre latérale est un contexte d'empilement à z-index 15, et le contenu de Woffice est à 18 : les panneaux de sous-menu s'ouvraient donc **derrière** la page. Ils avaient beau être affichés, on ne les voyait pas — d'où l'impression que « Ressources » ne faisait rien. On remonte la barre au-dessus du contenu, en restant loin sous les modales (1000+). */ body.vertical-modern-menu .is-left-sidebar { z-index: 25; } /* Sous-menus : panneau à droite de la rail, au survol */ body.vertical-modern-menu .main-modern-menu > li.menu-item > ul.sub-menu { display: none; position: absolute; left: var(--impri-rail-w); top: 0; width: 220px; margin: 0; padding: 0; border-radius: 0; background: var(--impri-rail-bg); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25); z-index: 30; } body.vertical-modern-menu .main-modern-menu > li.menu-item:hover > ul.sub-menu { display: block; } body.vertical-modern-menu .main-modern-menu ul.sub-menu li.menu-item { margin: 0; width: 100%; line-height: 0; } body.vertical-modern-menu .main-modern-menu ul.sub-menu li.menu-item > a { display: block; width: 100%; padding: 18px 16px !important; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); text-align: left; font-family: Montserrat, helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 700; line-height: 12px; text-transform: uppercase; color: #fff !important; background: transparent; } body.vertical-modern-menu .main-modern-menu ul.sub-menu li.menu-item > a::before { content: none !important; } body.vertical-modern-menu .main-modern-menu ul.sub-menu li.menu-item > a:hover, body.vertical-modern-menu .main-modern-menu ul.sub-menu li.current-menu-item > a { background: var(--impri-violet) !important; } /* Mobile (LIVE) : le menu s'ouvre sous la barre haute, pleine largeur, fond #384141, un item par ligne (100 px de haut, icône centrée au-dessus du libellé) */ @media (max-width: 991px) { body.vertical-modern-menu:not(.navigation-hidden):not(.sidebar-hidden) .is-left-sidebar, body.vertical-modern-menu.sidebar-hidden .is-left-sidebar, body.vertical-modern-menu .is-left-sidebar, body.vertical-modern-menu #navigation, body.vertical-modern-menu .main-modern-menu { width: 100% !important; max-width: 100% !important; min-height: 0; } body.vertical-modern-menu .is-left-sidebar { top: 100px !important; height: calc(100% - 100px) !important; overflow-y: auto !important; box-shadow: none; } body.admin-bar.vertical-modern-menu .is-left-sidebar { top: 146px !important; height: calc(100% - 146px) !important; } body.vertical-modern-menu .has-navigation-hidden { left: -100% !important; } body.vertical-modern-menu .main-modern-menu { display: block; padding-bottom: 60px; } body.vertical-modern-menu .main-modern-menu > li.menu-item, body.vertical-modern-menu .main-modern-menu > li.menu-item > a { width: 100% !important; } body.vertical-modern-menu .main-modern-menu > li.menu-item { height: auto; } body.vertical-modern-menu .main-modern-menu > li.menu-item > a { height: 100px; padding: 64px 4px 23px !important; text-align: center; font-size: 12px; } body.vertical-modern-menu .main-modern-menu > li.menu-item > a::before { left: 0; right: 0; margin: 0 auto; } /* Sous-menus repliés, dépliés par le caret (JS parent : slideToggle) — comme le LIVE */ body.vertical-modern-menu .main-modern-menu > li.menu-item > ul.sub-menu { position: static !important; width: 100% !important; display: none; box-shadow: none; opacity: 1 !important; visibility: visible !important; transform: none !important; background: #2d3434 !important; } body.vertical-modern-menu .main-modern-menu > li.menu-item:hover > ul.sub-menu { display: none; } body.vertical-modern-menu #navigation .main-modern-menu > li.menu-item.menu-item-has-children > .click_menutoggle { display: block !important; position: absolute; right: 0; top: 0; width: 60px; height: 100px; z-index: 2; cursor: pointer; } body.vertical-modern-menu #navigation .main-modern-menu > li.menu-item.menu-item-has-children > .click_menutoggle::after { content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff !important; font-size: 18px; line-height: 100px; display: block; text-align: center; } body.vertical-modern-menu #navigation .main-modern-menu > li.menu-item.menu-item-has-children > .click_menutoggle.caret-up::after { content: "\f0d8"; } body.vertical-modern-menu .main-modern-menu > li.menu-item { border-bottom: 1px solid rgba(255, 255, 255, .08); } body.vertical-modern-menu .is-left-sidebar { z-index: 1050 !important; } body.vertical-modern-menu .main-modern-menu > li.menu-item > ul.sub-menu li a { text-align: center; } body.vertical-modern-menu:not(.navigation-hidden):not(.sidebar-hidden) .is-center-content, body.vertical-modern-menu #page-wrapper .is-left-sidebar ~ .is-center-content { padding-left: 0 !important; } body.vertical-modern-menu:not(.navigation-hidden) #main-header { left: 0; width: 100%; } } /* ========================================================================== BARRE HAUTE — reproduction du LIVE : 100 px, blanc, flèche/hamburger à gauche, logo centré, puis "Bonjour, Nom" + avatar, loupe, cloche ========================================================================== */ #main-header #nav-trigger, #main-header #nav-buttons a, #main-header #nav-notification-trigger { color: #666 !important; } #main-header #nav-trigger { padding: 0 38px; font-size: 25px; } /* Ordre à droite : utilisateur, loupe, cloche (la loupe est déplacée par custom.js) */ #main-header #nav-buttons { display: flex; align-items: center; gap: 0; } #main-header #nav-buttons #main-search { order: 2; margin: 0 !important; } #main-header #nav-buttons #woffice-notifications-menu { order: 4; } /* Loupe : icône seule, le champ s'ouvre au clic (JS Woffice .active_search) */ #main-header #main-search { position: relative; width: 62px; height: 100px; } #main-header #main-search .active_search { display: block; position: static; width: 62px; height: 100px; cursor: pointer; } #main-header #main-search .active_search::after { content: "\f002"; font-family: "Font Awesome 5 Free" !important; font-weight: 900; font-size: 25px; color: #666; position: static; width: 62px; height: 100px; line-height: 100px; background: transparent; display: block; text-align: center; border-radius: 0; } #main-header #main-search.active_form .active_search.active_search_close::after { content: "×"; font-family: Montserrat, helvetica, arial, sans-serif !important; font-size: 30px; } #main-header #main-search form { display: none; position: absolute; right: 0; top: 100px; width: 320px; padding: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); z-index: 40; } #main-header #main-search.active_form form { display: block; } #main-header #main-search input[type="text"] { max-width: none; width: 100%; } #main-header #main-search .wo-search-icon { display: none; } /* ========================================================================== TABLEAU DE BORD — widgets comme le LIVE ========================================================================== */ #dashboard .widget.box { background: #fff !important; border-radius: 12px !important; border-top: 12px solid var(--impri-violet) !important; box-shadow: 0 6px 9px 0 rgba(57, 30, 85, .2) !important; padding: 15px 16px !important; } #dashboard .widget.box .intern-box.box-title { padding: 15px 0 22px; margin: -15px -16px 20px; text-align: center; border-bottom: 1px solid #dfdfe7; } #page-wrapper #dashboard .widget.box .intern-box.box-title h3, #page-wrapper #dashboard .widget .box-title h3, #page-wrapper #dashboard .widget.box h3.widget-title { font-family: Montserrat, helvetica, arial, sans-serif !important; font-size: 18.72px !important; font-weight: 500 !important; text-transform: uppercase !important; text-align: center !important; color: var(--impri-violet) !important; margin: 0 !important; padding: 0 !important; } /* Widget calendrier : pas de bouton "Créer un événement" dans le tableau de bord (comme le LIVE) */ #dashboard .widget.box .woffice-calendar-main > a.btn, #dashboard .widget.box .woffice-calendar > a.btn, #dashboard .widget.box a.btn.btn-primary:has(.fa-calendar) { display: none; } /* Forums : liste sobre, capitales espacées */ #dashboard .bbp-forums-widget li, #dashboard .widget_display_forums li { background: transparent; padding: 6px 0; margin: 0; box-shadow: none; border-radius: 0; } #dashboard .bbp-forum-title { font-family: Montserrat, helvetica, arial, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #666; line-height: 24px; } #dashboard .bbp-forum-title::before { content: '\f07b'; font-family: "Font Awesome 5 Free"; font-weight: 400; color: var(--impri-violet); margin-right: 10px; } /* Boutons "Tous les articles / forums" : action secondaire du système commun (section Boutons), y compris pour les liens qui n'ont pas la classe .btn */ #page-wrapper #dashboard .widget.box a.btn, #page-wrapper #dashboard .widget.box .btn-default, #page-wrapper #dashboard .all-posts-dashboard-link-wrapper a { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 24px !important; border: 3px solid var(--impri-violet) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600; line-height: 1.2 !important; letter-spacing: 0; text-transform: uppercase; text-decoration: none; color: #666 !important; background: #fff !important; } #page-wrapper #dashboard .widget.box a.btn:hover, #page-wrapper #dashboard .widget.box .btn-default:hover, #page-wrapper #dashboard .all-posts-dashboard-link-wrapper a:hover { color: #fff !important; background: var(--impri-violet) !important; } /* Polices : Montserrat partout, texte #666 */ body, #page-wrapper, #content-container { font-family: Montserrat, helvetica, arial, sans-serif; color: #666; } #page-wrapper h1, #page-wrapper h2, #page-wrapper h3, #page-wrapper h4, #page-wrapper h5, #page-wrapper h6 { font-family: Montserrat, helvetica, arial, sans-serif; } /* Bandeau de titre : 290 px, image charte alignée en haut à gauche, titre 60 px */ #featuredbox { min-height: 290px; background-position: left top !important; } #featuredbox .pagetitle h1 { font-size: 60px; font-weight: 700; text-transform: uppercase; color: #fff; } #content-container { background: #efefef; } /* Barre haute : 100 px pile (le parent ajoute 43 px de padding) */ #main-header { padding: 0 !important; } #main-header .navbar { padding: 0 !important; min-height: 100px; background: #fff; } /* Widget actualités : icône commentaire devant le compteur */ #dashboard div[id^='rpwwt-recent-posts-widget-with-thumbnails-'] > ul > li > .rpwwt-post-comments-number::before { content: "\f27a" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; } #dashboard div[id^='rpwwt-recent-posts-widget-with-thumbnails-'] > ul > li > .rpwwt-post-author, #dashboard div[id^='rpwwt-recent-posts-widget-with-thumbnails-'] > ul > li > .rpwwt-post-date, #dashboard div[id^='rpwwt-recent-posts-widget-with-thumbnails-'] > ul > li > .rpwwt-post-comments-number { line-height: 15px; } /* ========================================================================== CONTENU — gabarit général du LIVE : #content en 1296 px centré (marges 72 px), remonté de 50 px sur le bandeau ========================================================================== */ #left-content #content-container #content { margin: 0 72px !important; padding: 0 0 1px !important; position: relative; top: -50px; width: auto; background: transparent; /* LIVE : #content transparent partout ; seuls .single-post et .archive.category (style.css) en font une carte blanche 48 px à liseré violet. Les autres pages ont une carte article.box.content. */ } #left-content #content-container { padding-bottom: 0; } /* La page des actualités et les archives de catégorie font de #content une carte blanche à liseré violet (style.css, `.archive.category #content-container #content`). La règle ci-dessus est plus spécifique — trois identifiants contre deux identifiants et deux classes — et son padding porte un !important : le fond blanc et les marges intérieures disparaissaient, laissant le bandeau « Archives » posé à nu sur le visuel d'entête. On les rétablit ici, où la portée suffit. */ body.archive.category #left-content #content-container #content, body.blog #left-content #content-container #content { padding: 3rem !important; background: #fff; } /* Carte de contenu du LIVE : article.box.content blanche, angles 5 px, ombre, intérieur 30/40 px */ #content-container #content > article.box.content, #content-container #content > article.content.entry-content, #content-container #content > .box.content, #content-container #content > .page > .box.content, #content-container #content > article.page.box.entry-content { background: #fff; border-radius: 5px; box-shadow: 0 6.4px 32px rgba(0, 0, 0, .08); padding: 0; border-top: 0; } #content-container #content > article.box.content > .intern-padding, #content-container #content > article.content.entry-content > .intern-padding, #content-container #content > .box.content > .intern-padding, #content-container #content > article.page.box.entry-content > .intern-padding { padding: 30px 40px !important; } /* Cartographie (LIVE, style.css) : liseré 1rem violet, angles 1rem */ body.page-template-template-mapsearch #content-container #content > article.content.entry-content, body.page-template-template-mapsearch #content-container #content > article.box.content { border-top: 1rem solid var(--impri-violet); border-radius: 1rem; overflow: hidden; } @media (max-width: 991px) { #left-content #content-container #content { margin: 0 10px !important; } #content-container #content > article.box.content > .intern-padding, #content-container #content > article.content.entry-content > .intern-padding, #content-container #content > .box.content > .intern-padding { padding: 20px 16px !important; } } /* Actualités (liste masonry) : cartes comme le LIVE */ #content-container .masonry-layout .box.blog-item { background: #efefef !important; border-radius: 5px !important; padding: 0 !important; box-shadow: none !important; } /* Même retrait à gauche et à droite dans la carte (retour client) : Woffice 5 met le contenu à padding 0 avec deux identifiants, et style.css le réduisait à 95 % collé à gauche. Le titre reprend sa place en haut du retrait. */ #content-container #content .masonry-layout .box.blog-item .intern-padding { float: none; width: auto; padding: 20px 20px 0; } #content-container #content .masonry-layout .box.blog-item .intern-padding .box-title { margin: 0 0 12px; } #page-wrapper #content .masonry-layout .box.blog-item .intern-box.text-center { float: none; width: auto; margin: 0; padding: 16px 20px 20px; } #content-container .masonry-layout .box .box-title h3 { font-weight: 600 !important; line-height: 1.2 !important; } #content-container .masonry-layout .box.blog-item .intern-padding p, #content-container .masonry-layout .box.blog-item .masonry_para { font-size: 14px !important; line-height: 16px !important; color: #666 !important; } /* Filtre « Archives » (bloc sobre sans carte, comme le LIVE) et bouton « Nouvel article » sur une même ligne : la liste à gauche, le bouton à droite, et le bouton passe dessous s'il manque de place. Le bouton est déplacé dans cette ligne par assets/custom.js ; il était auparavant remonté de 6,25 rem en absolu, ce qui le collait au haut de la carte dès que la ligne était moins haute. */ #content-container #blog-filter-wrapper { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 24px; } #content-container #blog-filter-wrapper::before, #content-container #blog-filter-wrapper::after { display: none; } /* clearfix */ #content-container #blog-filter-wrapper .blog_filter_wrapper.widget.box { flex: 0 1 280px; min-width: 200px; width: auto; float: none; margin: 0 !important; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; } #content-container #blog-filter-wrapper .blog_filter_wrapper > span:first-child { display: block; line-height: 1; color: #353535; text-transform: uppercase; font-weight: 600; font-size: 14px; } #content-container #blog-filter-wrapper select { display: block; width: 100%; margin: .5rem 0 0 !important; /* bbPress ajoute 12 px dessous à toutes les listes */ color: #666; } #content-container #blog-filter-wrapper .impriclub-new-article { flex: 0 0 auto; margin-left: auto; padding-bottom: 3px; } /* centré sur la liste, 50 px contre 44 */ .impriclub-new-article-row:empty, .impriclub-new-article-row:not(:has(a)) { display: none; } /* Liste des actualités : méta comme le LIVE (commentaires, vues, date en 16 px gris ; catégorie masquée) */ #content-container .masonry-layout .box.blog-item .directory-category { display: none; } #content-container .masonry-layout .box.blog-item .directory-comments, #content-container .masonry-layout .box.blog-item .post-date { display: inline-block; font-size: 14px; color: #666; margin: 10px 10px 0 0; } #content-container .masonry-layout .box.blog-item .directory-comments i { margin-right: 4px; } #content-container .masonry-layout .box.blog-item .masonry_para { margin-top: 10px; } /* Annuaire / BuddyPress : contenu dans la boîte blanche (l'ancienne surcharge members/index.php ajoutait la classe box) */ #main-content #buddypress > .content, #main-content #buddypress .content[data-template="woffice"] { background: #fff; border-radius: 12px; padding: 24px; } /* Annuaire : onglets en cartes centrées (style Woffice 2.x conservé sur le LIVE) */ #main-content #buddypress .dir-navs, #main-content #buddypress .bp-subnavs { margin: 0; border: 0; text-align: center; padding-bottom: 1rem; } #main-content #buddypress .dir-navs ul, #main-content #buddypress .bp-subnavs ul { width: 100%; margin: 0 !important; display: block; text-align: center; } #main-content #buddypress .dir-navs ul li, #main-content #buddypress .bp-subnavs ul li { float: none; display: inline-block; width: auto; margin: .3rem; } #main-content #buddypress .dir-navs ul li a, #main-content #buddypress .bp-subnavs ul li a { display: block; width: 160px; background: #fff; color: #3c3f4d; border-radius: .4rem; padding: .8rem; border: 1px solid #f0f0f6; box-shadow: 0 .1rem .05rem rgba(0, 0, 0, .1); position: relative; font-size: 16px; text-align: center; } #main-content #buddypress .dir-navs ul li a::before, #main-content #buddypress .bp-subnavs ul li a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.6rem; display: block; margin-bottom: .4rem; content: "\f0c0"; color: var(--impri-violet); } #main-content #buddypress .dir-navs ul li#members-advanced-search a::before { content: "\f002"; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } #main-content #buddypress .dir-navs ul li a .count, #main-content #buddypress .bp-subnavs ul li a .count { color: #fff; background: var(--impri-violet); padding: .2rem .6rem; border-radius: 1rem; position: absolute; font-weight: 700; top: 1.6rem; left: 50%; margin-left: 1rem; font-size: .6rem; border: 3px solid #fff; } #main-content #buddypress .dir-navs ul li.no-count a .count { display: none; } #main-content #buddypress .dir-navs ul li.selected a, #main-content #buddypress .dir-navs ul li.current a { font-weight: 700; } /* Tableau des membres : largeur contenue, colonnes auto (le parent impose des min-width) */ #main-content #buddypress #members-list-table, #main-content #buddypress .members table { width: 100% !important; table-layout: auto; } #main-content #buddypress .members table thead tr th, #main-content #buddypress .members table tbody tr td { min-width: 0 !important; padding: 12px 8px !important; font-size: 12px; } #main-content #buddypress .members table thead tr th { color: #353535; font-weight: 700; } /* Annuaire des membres, responsive (retour client : « le contenu déborde de l'écran »). Le tableau gardait la largeur de ses textes insécables (e-mails, en-têtes, téléphones) et défilait de côté dès que la carte faisait moins de 1 236 px. Deux présentations, choisies selon la largeur de la zone et non de l'écran : - zone d'au moins 1 040 px : le tableau, où e-mails, adresses et en-têtes passent à la ligne ; - en dessous : une fiche par membre (photo et nom en tête, coordonnées libellées dessous), sur deux colonnes puis une seule. */ #main-content #buddypress #members-dir-list { container: annuaire / inline-size; overflow-x: visible; } #main-content #buddypress #members-list-table th, #main-content #buddypress #members-list-table td.bp-members-table-email, #main-content #buddypress #members-list-table td.bp-members-table-address, #main-content #buddypress #members-list-table td.bp-members-table-ville, #main-content #buddypress #members-list-table td.bp-members-table-raison { white-space: normal !important; } #main-content #buddypress #members-list-table td.bp-members-table-email { overflow-wrap: anywhere; } @container annuaire (max-width: 1039px) { #main-content #buddypress #members-list-table, #main-content #buddypress #members-list-table tbody { display: block; } #main-content #buddypress #members-list-table thead { display: none; } /* Pas d'espacement vertical de grille : la photo occupe toute la hauteur de la colonne 1 (99 lignes implicites, vides et donc sans hauteur), ce qui empêche les champs d'y glisser. */ #main-content #buddypress #members-list-table tbody tr { display: grid; grid-template-columns: 48px repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; padding: 16px 12px 8px; border-bottom: 1px solid #e6e6ee; background: #fff; } #main-content #buddypress #members-list-table tbody tr td { display: block; margin: 0 0 8px; padding: 0 !important; border: 0; background: transparent !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; font-size: 13px; } #main-content #buddypress #members-list-table tbody tr td:not([class]) { display: none; } #main-content #buddypress #members-list-table td.bp-members-table-avatar { grid-row: 1 / span 99; } #main-content #buddypress #members-list-table td.bp-members-table-name { grid-column: 2 / -1; margin-bottom: 4px; font-size: 15px; } #main-content #buddypress #members-list-table td.bp-members-table-raison img { display: inline-block; max-height: 24px; margin: 0 8px 0 0; vertical-align: middle; } #main-content #buddypress #members-list-table td.bp-members-table-raison span.bp_member_enterprise_data { display: inline; } #main-content #buddypress #members-list-table tbody tr td[class]:not(.bp-members-table-avatar):not(.bp-members-table-name)::before { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #999; } #main-content #buddypress #members-list-table td.bp-members-table-email::before { content: "E-mail"; } #main-content #buddypress #members-list-table td.bp-members-table-tel::before { content: "Téléphone"; } #main-content #buddypress #members-list-table td.bp-members-table-mobile::before { content: "Portable"; } #main-content #buddypress #members-list-table td.bp-members-table-raison::before { content: "Raison sociale"; } #main-content #buddypress #members-list-table td.bp-members-table-address::before { content: "Adresse"; } #main-content #buddypress #members-list-table td.bp-members-table-ville::before { content: "Ville"; } #main-content #buddypress #members-list-table td.bp-members-table-postal::before { content: "Code postal"; } #main-content #buddypress #members-list-table td.bp-members-table-pays::before { content: "Pays"; } } @container annuaire (max-width: 559px) { #main-content #buddypress #members-list-table tbody tr { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } } /* ========================================================================== PROFIL BUDDYPRESS — comme le LIVE : carte avatar + navigation verticale à gauche, sous-onglets en cartes au-dessus du contenu ========================================================================== */ #woffice-bp-sidebar > div, #woffice-bp-sidebar .users-single-itemnav { background: #fff; border-radius: 12px; } #woffice-bp-sidebar .users-single-social:empty { display: none; } #woffice-bp-sidebar .users-single-itemnav { padding: 0 !important; margin-top: -12px; border-radius: 0 0 12px 12px; } #woffice-bp-sidebar #item-header { border-radius: 12px 12px 0 0; } #woffice-bp-sidebar #object-nav { overflow: visible; height: auto; } #woffice-bp-sidebar #object-nav ul { display: block; width: 100%; margin: 0; padding: 0; height: auto !important; } #woffice-bp-sidebar #object-nav ul li { display: block; width: 100%; margin: 0; border-top: 1px solid #f0f0f6; } #woffice-bp-sidebar #object-nav ul li a { display: block; width: 100%; padding: 12px 20px !important; font-size: 14px; color: #3c3f4d; border-radius: 0; } #woffice-bp-sidebar #object-nav ul li.current a, #woffice-bp-sidebar #object-nav ul li.selected a { background: var(--impri-violet); color: #fff; } #woffice-bp-sidebar #object-nav ul li a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 12px; content: "\f111"; font-size: 12px; } #woffice-bp-sidebar #object-nav li#xprofile-personal-li a::before { content: "\f007"; } #woffice-bp-sidebar #object-nav li#calendar-personal-li a::before { content: "\f073"; } #woffice-bp-sidebar #object-nav li#notifications-personal-li a::before { content: "\f0f3"; } #woffice-bp-sidebar #object-nav li#groups-personal-li a::before { content: "\f0c0"; } #woffice-bp-sidebar #object-nav li#forums-personal-li a::before { content: "\f086"; } #woffice-bp-sidebar #object-nav li#settings-personal-li a::before { content: "\f013"; } #woffice-bp-sidebar #object-nav li#activity-personal-li a::before { content: "\f1da"; } #woffice-bp-sidebar #object-nav li#friends-personal-li a::before { content: "\f500"; } #woffice-bp-sidebar #object-nav li#messages-personal-li a::before { content: "\f0e0"; } #woffice-bp-sidebar #object-nav li a .count { display: none; } #item-body .users-single-subnav { margin-bottom: 1rem; } #item-body .users-single-subnav ul.subnav { display: block; text-align: center; margin: 0; padding: 0; } #item-body .users-single-subnav ul.subnav li { display: inline-block; margin: .3rem; } #item-body .users-single-subnav ul.subnav li a { display: block; width: 160px; background: #fff; color: #3c3f4d; border-radius: .4rem; padding: .8rem; border: 1px solid #f0f0f6; box-shadow: 0 .1rem .05rem rgba(0, 0, 0, .1); text-align: center; font-size: 14px; } #item-body .users-single-subnav ul.subnav li a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.4rem; display: block; margin-bottom: .4rem; content: "\f111"; color: var(--impri-violet); } #item-body .users-single-subnav li#public-personal-li a::before { content: "\f2bd"; } #item-body .users-single-subnav li#edit-personal-li a::before { content: "\f4ff"; } #item-body .users-single-subnav li#change-avatar-personal-li a::before { content: "\f030"; } #item-body .users-single-subnav li#change-cover-image-personal-li a::before { content: "\f07b"; } #item-body .users-single-subnav ul.subnav li.current a, #item-body .users-single-subnav ul.subnav li.selected a { font-weight: 700; } #item-body .screen-heading { text-transform: uppercase; font-size: 22px; font-weight: 700; color: #353535; } #woffice-bp-sidebar .users-single-social { display: none; } /* ========================================================================== V3 — corrections issues de l'audit de contradiction LIVE/STG (toutes pages) ========================================================================== */ /* --- Barre haute : hamburger et flèche de fermeture comme le LIVE (icônes FA pleines, gris #666) --- */ #main-header #nav-trigger i.fa-bars { color: #666 !important; } #main-header #nav-trigger svg.nav-arrow-left { display: none !important; } #main-header #nav-trigger i.fa-bars.d-none { display: inline-block !important; } #main-header #nav-trigger i.fa-bars.d-none::before { content: "\f060"; } /* --- Rail : entrée FORUMS active sur les pages bbPress, RÉSEAU sur les pages membres, AGENDA sur les événements --- */ body.bbpress.vertical-modern-menu .main-modern-menu > li.icon-forum > a, body.buddypress.vertical-modern-menu:not(.bbpress) .main-modern-menu > li.icon-reseau > a, body.single-woffice-event.vertical-modern-menu .main-modern-menu > li.icon-agenda > a, body.post-type-archive-woffice-event.vertical-modern-menu .main-modern-menu > li.icon-agenda > a { background: var(--impri-violet) !important; } /* --- Pied de page (LIVE) : flèche "retour en haut" 96 px, puis barre © 70 px #384141, liseré 6 px #8207D4 --- */ #scroll-top-container { clear: both; } #scroll-top { display: block; height: 96px; line-height: 96px; text-align: center; font-size: 64px; color: rgba(0, 0, 0, .1); position: static; width: auto; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; border-radius: 0; margin: 0; padding: 0; } #scroll-top:hover { color: rgba(0, 0, 0, .25); } #scroll-top i { font-size: 64px; line-height: 64px; } #main-footer { background: transparent; padding: 0; margin: 0; } #main-footer #copyright { background: #384141; border-top: 6px solid #8207D4; padding: 0; margin: 0; text-align: center; min-height: 70px; } #main-footer #copyright p, #main-footer #copyright { color: #fff; font-family: Montserrat, helvetica, arial, sans-serif; font-size: 16px; line-height: 24px; text-transform: uppercase; } #main-footer #copyright p { margin: 0; padding: 20px; color: #fff !important; } /* --- Bandeau de titre : titre en 60/72 centré (LIVE), 30/36 sur mobile ; recherche bbPress / 404 sous le titre --- */ #featuredbox .pagetitle h1, #featuredbox h1.entry-title { font-size: 60px !important; line-height: 72px !important; margin: 0; } #featuredbox.has-search .pagetitle, #featuredbox .pagetitle { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 40px; } #featuredbox.has-search form, #featuredbox #bbp-search-form, #featuredbox .bbp-search-form { position: static !important; transform: none !important; margin: 12px auto 0; width: 100%; max-width: 760px; display: flex; justify-content: center; align-items: center; gap: 8px; } #featuredbox form input[type="text"], #featuredbox form input[type="search"] { height: 46px; max-width: 680px; width: 100%; border-radius: 3px; border: 0; padding: 0 16px; font-size: 16px; background: #fff; } #featuredbox form button, #featuredbox form input[type="submit"] { width: auto; min-width: 66px; height: 51px; padding: 0 20px; border-radius: 5px; background: var(--impri-violet); color: #fff; border: 0; font-size: 18px; line-height: 51px; } #featuredbox form button i { font-size: 18px; } #featuredbox form label.screen-reader-text { display: none; } @media (max-width: 991px) { #featuredbox .pagetitle h1, #featuredbox h1.entry-title { font-size: 30px !important; line-height: 36px !important; } #featuredbox .pagetitle { padding: 0 20px; } #featuredbox form { flex-direction: row; } } /* --- Typographie : texte gris #666, titres #31348e non gras (LIVE : color_headline, font_headline_bold=nope) --- */ /* Spécificité (1,1,1) : passe devant le CSS dynamique Woffice (#page-wrapper h2 = text-color-dark), mais laisse gagner les règles ciblées de style.css (stats, vidéos…) comme sur le LIVE */ #page-wrapper .is-center-content :is(h1, h2, h3, h4, h5, h6):where(:not(#dashboard *, .box-title *, .blog-authorbox *, #item-body *, #featuredbox *)) { color: var(--impri-headline); font-weight: 500; } #page-wrapper #featuredbox h1 { color: #fff; font-weight: 700; } #page-wrapper #item-body h2.screen-heading, #page-wrapper #item-body h2 { font-size: 32px !important; color: #666 !important; text-transform: uppercase; font-weight: 700 !important; } #page-wrapper p, #page-wrapper li, #page-wrapper td, #page-wrapper th, #page-wrapper dd, #page-wrapper dt, #page-wrapper label, #page-wrapper legend { color: #666; } #page-wrapper #content a:not(.btn):not(.button) { color: #666; } #page-wrapper #content a:not(.btn):not(.button):hover { color: var(--impri-violet); } #page-wrapper #content .blog-content a { color: #353535; font-weight: 700; text-decoration: none; } #page-wrapper #content .masonry-layout .box-title h3 a { color: #353535; } /* --- Boutons : une seule forme sur tout l'extranet (retour client du 13/10) --- Pilule à bord violet de 3 px, capitales 12 px 600, même hauteur partout. Deux rôles : - action principale : pleine, violet et texte blanc, plus foncée au survol ; - action secondaire : au trait, blanc et texte #666, pleine au survol. Remplace les deux formes héritées du LIVE (pilule 9 px / rectangle plein 14 px), le bord bordeaux des boutons secondaires et le survol en dégradé de style.css. Les liens « Lire la suite » des cartes d'actualités restent de simples liens (bloc suivant). */ #page-wrapper .btn, #page-wrapper a.btn, #page-wrapper .btn-default, #page-wrapper .button:not(.rtmedia-actions-before-comments *), #page-wrapper input[type="submit"], #page-wrapper button[type="submit"], #page-wrapper .bbp-submit-wrapper button, #page-wrapper #buddypress input[type="submit"], #page-wrapper #buddypress button[type="submit"] { text-transform: uppercase !important; font-family: Montserrat, helvetica, arial, sans-serif; font-weight: 600; letter-spacing: 0; } /* Forme commune */ #page-wrapper #content .blog-next-page ul.navigation li .btn, #page-wrapper .btn.btn-default, #page-wrapper #content .btn.btn-default, #page-wrapper #content .btn.btn-secondary, #page-wrapper #content .btn.btn-primary, #page-wrapper .btn-primary, #page-wrapper #buddypress input[type="submit"], #page-wrapper #buddypress button[type="submit"], #page-wrapper #buddypress .submit input, #page-wrapper #buddypress #advanced-search-reset, #page-wrapper #bbpress-forums .bbp-submit-wrapper button, #page-wrapper #bbpress-forums #bbp_reply_submit, #page-wrapper #bbpress-forums #bbp_topic_submit, #page-wrapper #content-container #buddypress #item-body .standard-form .submit input[type="submit"], #page-wrapper #content .geodir-advance-search button.geodir_submit_search, #page-wrapper #content .geodir-advance-search button.geodir_submit_reset { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px !important; padding: 0 24px !important; border: 3px solid var(--impri-violet) !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.2 !important; text-decoration: none; box-shadow: none; opacity: 1; } /* Action secondaire */ #page-wrapper #content .blog-next-page ul.navigation li .btn, #page-wrapper .btn.btn-default, #page-wrapper #content .btn.btn-default, #page-wrapper #content .btn.btn-secondary, #page-wrapper #buddypress #advanced-search-reset, #page-wrapper #content .geodir-advance-search button.geodir_submit_reset { background: #fff !important; color: #666 !important; } #page-wrapper #content .blog-next-page ul.navigation li .btn:hover, #page-wrapper .btn.btn-default:hover, #page-wrapper #content .btn.btn-default:hover, #page-wrapper #content .btn.btn-secondary:hover, #page-wrapper #buddypress #advanced-search-reset:hover, #page-wrapper #content .geodir-advance-search button.geodir_submit_reset:hover { background: var(--impri-violet) !important; color: #fff !important; border: 3px solid var(--impri-violet) !important; } /* Action principale */ #page-wrapper #content .btn.btn-primary, #page-wrapper .btn-primary, #page-wrapper #buddypress input[type="submit"], #page-wrapper #buddypress button[type="submit"], #page-wrapper #buddypress .submit input, #page-wrapper #bbpress-forums .bbp-submit-wrapper button, #page-wrapper #bbpress-forums #bbp_reply_submit, #page-wrapper #bbpress-forums #bbp_topic_submit, #page-wrapper #content-container #buddypress #item-body .standard-form .submit input[type="submit"], #page-wrapper #content .geodir-advance-search button.geodir_submit_search { background: var(--impri-violet) !important; color: #fff !important; } #page-wrapper #content .btn.btn-primary:hover, #page-wrapper .btn-primary:hover, #page-wrapper #buddypress input[type="submit"]:hover, #page-wrapper #buddypress button[type="submit"]:hover, #page-wrapper #buddypress .submit input:hover, #page-wrapper #bbpress-forums .bbp-submit-wrapper button:hover, #page-wrapper #bbpress-forums #bbp_reply_submit:hover, #page-wrapper #bbpress-forums #bbp_topic_submit:hover, #page-wrapper #content-container #buddypress #item-body .standard-form .submit input[type="submit"]:hover, #page-wrapper #content .geodir-advance-search button.geodir_submit_search:hover { background: var(--impri-violet-dark) !important; border-color: var(--impri-violet-dark) !important; color: #fff !important; } /* Filtres des entreprises : le libellé est un que style.css affiche en gris et en 16 px ; il prend la couleur et la taille du bouton. */ #page-wrapper #content .geodir-advance-search button.geodir_submit_search span, #page-wrapper #content .geodir-advance-search button.geodir_submit_reset span { color: inherit !important; font-size: inherit !important; } /* Sondages (attps-polls) : la même pilule. La variable de l'extension ne suffit pas, Woffice arrondit tous les boutons de #main-content à 10 px. */ #page-wrapper .atpl .atpl-button { border-radius: 999px !important; } /* Cartes d'actualités (LIVE) : "→ LIRE LA SUITE" en simple lien 12 px à gauche, sans bordure */ #page-wrapper #content .masonry-layout .box.blog-item .btn.btn-default, #page-wrapper #content .masonry-layout .box.blog-item .btn.btn-default:hover { border: 0 !important; background: transparent !important; color: #666 !important; font-size: 12px !important; padding: 0 !important; min-height: 0 !important; float: left; } #page-wrapper #content .masonry-layout .box.blog-item .intern-box.text-center { text-align: left; } #page-wrapper #content .masonry-layout .box.blog-item .directory-comments i { color: #b9a6cc; } #page-wrapper #content .masonry-layout .box.blog-item .box-title h3, #page-wrapper #content .masonry-layout .box.blog-item .box-title h3 a { color: #666 !important; } #page-wrapper #buddypress .submit, #page-wrapper #buddypress .submit.clearfix, #page-wrapper #bbpress-forums .bbp-submit-wrapper { text-align: center; float: none; width: 100%; } #page-wrapper #buddypress .submit input { display: inline-block; float: none; margin: 0 auto; } /* Pagination (LIVE) : centrée, libellés "Articles précédents / suivants" */ #content-container .blog-next-page, #content-container .blog-next-page.text-right, #content-container .bottom_btn_row .pag_col { text-align: center !important; } #content-container .blog-next-page ul.navigation { display: inline-block; margin: 16px 0 0; padding: 0; } #content-container .blog-next-page ul.navigation li { display: inline-block; margin: 4px; } #page-wrapper #content .blog-next-page ul.navigation li.active .btn { background: var(--impri-violet) !important; color: #fff !important; } #content-container .blog-next-page ul.navigation li.page-nav-left .btn::after { content: " Articles précédents"; } #content-container .blog-next-page ul.navigation li.page-nav-right .btn::before { content: "Articles suivants "; } /* --- Libellés : capitales sur les formulaires (LIVE), pas de Title Case ailleurs --- */ #page-wrapper #buddypress .standard-form label, #page-wrapper #buddypress .standard-form span.label, #page-wrapper #buddypress .editfield legend, #page-wrapper #buddypress .editfield label, #page-wrapper form label, #page-wrapper #woffice-login label, #page-wrapper .bbp-form label, #page-wrapper #bbpress-forums fieldset.bbp-form legend { text-transform: uppercase !important; font-size: 14px; font-weight: 600; color: #666; } #page-wrapper #buddypress .editfield .field-visibility-settings-header, #page-wrapper #buddypress .editfield .field-visibility-settings-notoggle, #page-wrapper .blog-authorbox h3, #page-wrapper .blog-authorbox-right .blog-like-container .like-text, #page-wrapper #dashboard .widget .box-title h3, #page-wrapper #bbpress-forums .bbp-breadcrumb a, #page-wrapper #bbpress-forums .bbp-breadcrumb span, #page-wrapper #bbpress-forums .bbp-replies .bbp-reply-header a, #page-wrapper #bbpress-forums li.bbp-header, #page-wrapper #bbpress-forums li.bbp-footer, #page-wrapper #buddypress #item-header-content .user-nicename, #page-wrapper #members-dir-list .member-name, #page-wrapper #buddypress .members table .member-uname, #page-wrapper .wo_common_comment_wrapper .comment-content p, #page-wrapper #comments-container .comment-content p, #page-wrapper .event-metas .event-meta, #page-wrapper #content-container .ssfa-filename { text-transform: none !important; } #page-wrapper .blog-authorbox-right .blog-like-container .like-text, #page-wrapper #dashboard .widget .box-title h3 { text-transform: uppercase !important; } /* --- Liens d'édition (WPBakery / "Modifier") : jamais sur le front --- */ #page-wrapper .vc_inline-link, #page-wrapper a.post-edit-link, #page-wrapper .edit-link { display: none !important; } /* --- Profil BuddyPress : navigation verticale (LIVE : item actif fond violet, icônes FA 19 px, une seule carte) --- */ #woffice-bp-sidebar .users-single-itemnav #object-nav ul li a, #woffice-bp-sidebar .users-single-itemnav ul#member-primary-nav li a { display: block !important; width: 100% !important; padding: 9.6px 16px !important; font-size: 16px !important; color: #3c3f4d !important; background: transparent !important; border-radius: 0 !important; text-align: left; font-weight: 400; text-transform: none !important; } #woffice-bp-sidebar .users-single-itemnav #object-nav ul li a::before, #woffice-bp-sidebar .users-single-itemnav ul#member-primary-nav li a::before { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 19.2px !important; color: inherit !important; display: inline-block; width: 32px; margin-right: 0; text-align: center; } #woffice-bp-sidebar .users-single-itemnav #object-nav ul li.current a, #woffice-bp-sidebar .users-single-itemnav #object-nav ul li.selected a, #woffice-bp-sidebar .users-single-itemnav ul#member-primary-nav li.current a, #woffice-bp-sidebar .users-single-itemnav ul#member-primary-nav li.selected a, #woffice-bp-sidebar .users-single-itemnav #object-nav ul li a:hover, /* le parent pose "background: 0 0 !important" avec 4 ids : on surenchérit */ #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li.current a, #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li.selected a, #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li a:hover { background: var(--impri-violet) !important; color: #fff !important; } #woffice-bp-sidebar #item-header { padding-bottom: 0; } #woffice-bp-sidebar .users-single-itemnav { margin-top: 0; } #woffice-bp-sidebar #item-header-content .profile-email { display: none; } /* Boutons Afficher / Modifier / Photo / En-tête : 4 boutons bordés sur une ligne (LIVE) */ #item-body .users-single-subnav ul.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } #item-body .users-single-subnav ul.subnav li { margin: 0; flex: 0 1 auto; } #item-body .users-single-subnav ul.subnav li a { width: auto; min-width: 150px; } /* Tableau des champs (LIVE) : libellés gras avec séparateur, lignes alternées */ #item-body table.profile-fields td, #item-body table.profile-fields th { font-size: 16px !important; font-weight: 600 !important; color: #666 !important; padding: 16px !important; border: 0; border-bottom: 1px solid #f0f0f6; } #item-body table.profile-fields td.label { border-right: 1px solid #e8f4ff; width: 30%; overflow-wrap: normal; word-break: normal; hyphens: manual; } #item-body table.profile-fields td.data, #item-body table.profile-fields td.data p { font-weight: 400 !important; color: #666 !important; } #item-body table.profile-fields tr.alt { background: #f9f9fc; } @media (max-width: 991px) { #item-body table.profile-fields td.label { width: 40%; min-width: 120px; font-size: 14px !important; } #item-body table.profile-fields td { padding: 10px !important; } } /* Édition du profil (LIVE) : onglets de groupes en pilules violettes majuscules, champs encadrés */ #page-wrapper #buddypress ul.button-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; } #page-wrapper #buddypress ul.button-tabs li { margin: 0; } #page-wrapper #buddypress ul.button-tabs li a { display: inline-block; background: var(--impri-violet) !important; color: #fff !important; text-transform: uppercase !important; font-size: 14.4px !important; font-weight: 700; padding: 10px 18px !important; border-radius: 3.2px !important; opacity: .85; } #page-wrapper #buddypress ul.button-tabs li.current a { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); } #page-wrapper #buddypress .editfield { border: 1px solid #f0f0f6 !important; border-radius: 6.4px; padding: 16px !important; margin: 15px 0 !important; background: #fff; } #page-wrapper #buddypress .editfield legend, #page-wrapper #buddypress .editfield label { font-size: 16px; text-transform: uppercase !important; } #page-wrapper #buddypress .editfield input[type="text"], #page-wrapper #buddypress .editfield input[type="email"], #page-wrapper #buddypress .editfield input[type="tel"], #page-wrapper #buddypress .editfield input[type="url"], #page-wrapper #buddypress .editfield input[type="number"], #page-wrapper #buddypress .editfield select, #page-wrapper #buddypress .editfield textarea, #page-wrapper #buddypress .standard-form input[type="text"], #page-wrapper #buddypress .standard-form input[type="password"], #page-wrapper #buddypress .standard-form input[type="email"] { border-radius: 3.2px !important; border: 2px solid #e0e0ec !important; background: transparent !important; height: 52px; font-size: 16px !important; } #page-wrapper #buddypress .editfield textarea { height: auto; } #page-wrapper #buddypress .field-visibility-settings-header .visibility-toggle-link, #page-wrapper #buddypress .field-visibility-settings-header a { color: var(--impri-violet) !important; background: transparent !important; text-decoration: underline; font-size: 14px; padding: 0; } /* Onglet "delete" non traduit des réglages BP */ #page-wrapper #buddypress li#delete-personal-li a { text-transform: capitalize !important; } /* "Se connecter en tant que" (User Switching) : bouton violet pleine largeur sous l'avatar (LIVE) */ #woffice-bp-sidebar #item-header .user-switching-switch-to, #woffice-bp-sidebar #item-header a[href*="user_switching"], #woffice-bp-sidebar #item-header a[href*="switch_to_user"], #woffice-bp-sidebar #item-header .generic-button a, #woffice-bp-sidebar #item-header a.user-switching { display: block; width: 100%; margin-top: 12px; padding: 10px 12px; background: var(--impri-violet); color: #fff !important; text-transform: uppercase; text-align: center; border-radius: 3px; font-size: 12px; font-weight: 700; line-height: 1.3; } /* --- Article : image à la une pleine largeur sur mobile, boutons Modifier/Supprimer centrés (LIVE) --- */ @media (max-width: 991px) { .single-post .blog-content .intern-thumbnail { float: none !important; width: 100% !important; margin: 0 0 1.5rem !important; } } .single-post .blog-single-col .blog-single-actions, .single-post .blog-single-col .post-buttons, .single-post .blog-authorbox + div, #content-container .blog-post-buttons { text-align: center !important; background: transparent !important; justify-content: center; } #content-container #content .blog-authorbox { padding: 15px 20px; min-height: 0; } #content-container #content .blog-authorbox h3, #content-container #content .blog-authorbox h3 a { font-size: 13px !important; font-weight: 400 !important; color: #666 !important; text-transform: none !important; } #content-container #content .blog-authorbox .blog-like-container .like-text { font-size: 9px !important; text-transform: uppercase !important; color: #666; } #content-container #content .blog-authorbox .blog-like-container i, #content-container #content .blog-authorbox .blog-like-container svg { font-size: 16px; color: #666; } #content-container #content .attachments-title, #content-container #content .blog-attachments h3, #content-container #content .blog-content h3 { color: var(--impri-headline) !important; font-weight: 300 !important; } /* --- Annuaire : compteur + pagination en haut (LIVE), tableau contenu dans la carte --- */ #main-content #buddypress .members-dir-search { margin-bottom: 8px; } #main-content #buddypress #members-dir-list { max-width: 100%; } #main-content #buddypress .members table { max-width: 100%; } @media (max-width: 991px) { #main-content #buddypress .members-dir-search input[type="search"], #main-content #buddypress .dir-search input[type="search"], #main-content #buddypress .dir-search form { max-width: 100%; } } /* --- bbPress (LIVE) : recherche dans le bandeau sans boîte blanche, fil d'Ariane en bandeau gris, titres de forums/sujets en capitales grises 13 px, lignes alternées #f9f9fc --- */ #featuredbox .pagetitle #bbpress-forums, #featuredbox .pagetitle .bbpress-wrapper { background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100%; max-width: 760px; } #featuredbox .pagetitle #bbp-search-form { padding: 0 !important; margin: 12px auto 0 !important; } #featuredbox .pagetitle #bbp-search-form > div { display: flex; gap: 8px; width: 100%; justify-content: center; } #featuredbox .pagetitle #bbp-search-form input[type="text"] { flex: 1 1 auto; } #content-container #bbpress-forums .bbp-breadcrumb p { background: #f9f9fc; border: 1px solid #f0f0f6; border-radius: 4px; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; color: #666; text-transform: none !important; } #content-container #bbpress-forums .bbp-breadcrumb a { text-transform: uppercase !important; color: #666; } #content-container #bbpress-forums .bbp-forum-title, #content-container #bbpress-forums .bbp-topic-title .bbp-topic-permalink, #content-container #bbpress-forums .bbp-topic-permalink { color: #666 !important; text-transform: uppercase !important; letter-spacing: 1px; font-size: 13.2px !important; font-weight: 400 !important; } #content-container #bbpress-forums li.bbp-body ul.forum:nth-child(odd), #content-container #bbpress-forums li.bbp-body ul.topic:nth-child(odd) { background: #f9f9fc !important; } #content-container #bbpress-forums li.bbp-body ul.forum, #content-container #bbpress-forums li.bbp-body ul.topic { border-bottom: 1px solid #f0f0f6 !important; } #content-container #bbpress-forums li.bbp-header { background: #f0f0f6 !important; color: #666 !important; text-transform: uppercase !important; font-size: 12px !important; } #content-container #bbpress-forums li.bbp-header a, #content-container #bbpress-forums li.bbp-header li { color: #666 !important; } /* Notice bbPress : icône dans son coin, texte lisible */ #content-container div.bbp-template-notice, #content-container div.bbp-template-notice.info, #content-container div.indicator-hint { padding: 14px 20px 14px 56px !important; color: #fff !important; background: var(--impri-violet) !important; border-radius: 4px; } #content-container div.bbp-template-notice p { color: #fff !important; margin: 0; } #content-container div.bbp-template-notice::before, #content-container div.bbp-template-notice i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: #fff; } /* Formulaire de réponse : "Répondre à" en titre 20 px, bouton violet centré */ #content-container #bbpress-forums #new-post fieldset.bbp-form legend, #content-container #bbpress-forums .bbp-reply-form legend, #content-container #bbpress-forums .bbp-topic-form legend { font-size: 20px !important; text-transform: uppercase !important; color: var(--impri-headline) !important; font-weight: 400; padding: 0 0 12px; width: 100%; } #content-container #bbpress-forums .bbp-submit-wrapper button, #content-container #bbpress-forums #bbp_reply_submit, #content-container #bbpress-forums #bbp_topic_submit { background: var(--impri-violet) !important; color: #fff !important; text-transform: uppercase !important; font-size: 14px !important; padding: 12px 28px !important; border-radius: 3px !important; border: 0 !important; } /* Sujet : une seule carte (pas de double encadrement) */ #content-container #bbpress-forums div.bbp-reply-content, #content-container #bbpress-forums div.bbp-topic-content { background: transparent !important; box-shadow: none !important; border: 0 !important; } #content-container #bbpress-forums ul.bbp-replies, #content-container #bbpress-forums .bbp-replies > li { background: transparent !important; box-shadow: none !important; } /* --- Recherche WP (LIVE) : champ sous le titre dans le bandeau ; résultats en liste 1 colonne, cartes blanches sur fond gris, image en bandeau, titre 24 px gras, bande de méta grise --- */ #featuredbox .pagetitle form input[type="text"], #featuredbox .pagetitle form button { position: static !important; transform: none !important; } #featuredbox .pagetitle .active_search, #featuredbox .pagetitle .wo-search-icon { display: none !important; } #featuredbox .pagetitle form { height: auto !important; padding: 0 !important; } body.search-results #left-content #content-container #content, body.search-no-results #left-content #content-container #content { background: transparent; border-top: 0; padding: 0 !important; } body.search #content .blog-col { flex: 0 0 100%; max-width: 100%; } body.search #content .blog-card-wrapper .card.blog_card { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 2px 12px rgba(45, 51, 66, .06); width: 100%; } body.search #content .blog_card .blog-thumb img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 12px 12px 0 0; } body.search #content .blog_card .blog-thumb img[src$="blog.png"] { display: none; } body.search #content .blog_card .blog-title h2, body.search #content .blog_card .blog-title h2 a { text-transform: none !important; font-size: 24px !important; font-weight: 700 !important; color: #353535 !important; line-height: 1.3; } body.search #content .blog_card .heading-container { padding: 24px 28px 8px; } body.search #content .blog_card .post-meta .intern-box { background: #f9f9fc; padding: 12px 28px; font-size: 14px; color: #666; } body.search #content .blog_card .post-meta .intern-box a { color: #666; } body.search #content .blog_card .blog-content { padding: 20px 28px 0; } body.search #content .blog_card .blog-content p { color: #666; font-size: 15px; line-height: 1.6; } body.search #content .blog_card .card-footer { padding: 16px 28px 28px; text-align: center; } body.search #content .blog_card .card-footer .btn-default { display: inline-block; text-transform: uppercase !important; font-size: 9px !important; font-weight: 600; padding: 10px 18px !important; border-radius: 20px !important; border: 3px solid var(--impri-violet) !important; color: #666 !important; background: #fff !important; } body.search #content .blog_card .card-footer .btn-default i { display: none; } body.search #content .blog_card .card-footer .btn-default::before { content: "\f061 "; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 4px; } /* --- Événement (LIVE) : onglets Consulter / Modifier / Supprimer en boutons gris 140 px centrés, sans pastille ; contenu dans la carte blanche --- */ .single-woffice-event #content-container #event-nav { text-align: center; padding: 20px 0 0; } .single-woffice-event #content-container div.item-list-tabs-wiki ul { display: inline-block; margin: 0; padding: 0; } .single-woffice-event #content-container div.item-list-tabs-wiki ul li { display: inline-block !important; float: none !important; width: 140px !important; margin: 5px 10px !important; padding: 0 !important; background: #666 !important; border: 1px solid #ececef !important; border-radius: 5px !important; box-shadow: none !important; transform: none !important; top: auto !important; } .single-woffice-event #content-container div.item-list-tabs-wiki ul li.active { background: var(--impri-violet) !important; } .single-woffice-event #content-container div.item-list-tabs-wiki ul li .event-tab-icon { display: none !important; } .single-woffice-event #content-container div.item-list-tabs-wiki ul li a { display: block; padding: 15px !important; font-size: 12px !important; text-transform: uppercase !important; color: #fff !important; font-weight: 600; } .single-woffice-event #content-container #content > article.content { background: #fff; border-radius: 5px; margin-top: 0; } .single-woffice-event #content-container #event-content-view .woffice-calendar { background: transparent !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; } .single-woffice-event #content-container .event-metas .event-meta { text-transform: none !important; color: #666; } /* --- Page de connexion (LIVE) : logo 160 px centré, libellés gris clair capitales 16 px, champs carrés 52 px, bouton violet pleine largeur 3 px d'arrondi, lien "Mot de passe oublié" italique gris à droite --- */ body.page-template-login #woffice-login #login-logo { display: block; text-align: center; } body.page-template-login #woffice-login #login-logo img { width: 160px; height: auto; margin: 0 auto; } body.page-template-login #woffice-login #login-text { text-align: center; } body.page-template-login #woffice-login #login-text span { font-weight: 400; } body.page-template-login #woffice-login label { font-size: 16px !important; text-transform: uppercase !important; color: #9b9ca3 !important; font-weight: 500 !important; } body.page-template-login #woffice-login input[type="text"], body.page-template-login #woffice-login input[type="password"], body.page-template-login #woffice-login input[type="email"] { border-radius: 3.2px !important; border: 2px solid #e0e0ec !important; height: 52px !important; font-size: 16px !important; padding: 12px 12px 12px 40px !important; background: #fff !important; } body.page-template-login #woffice-login input[type="submit"], body.page-template-login #woffice-login button[type="submit"], body.page-template-login #woffice-login .button-primary { border-radius: 3.2px !important; background: var(--impri-violet) !important; color: #fff !important; text-transform: uppercase !important; font-size: 14.4px !important; font-weight: 700 !important; padding: 10px 18px !important; width: 100%; border: 0 !important; height: auto; } body.page-template-login #woffice-login .password-lost, body.page-template-login #woffice-login a.password-lost { display: block; text-align: right; font-style: italic; font-size: 16px; color: #b7b9c4 !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 16px; } body.page-template-login #woffice-login .login-remember label { text-transform: none !important; font-size: 14px !important; } /* Mot de passe perdu : pas d'encart vert, même charte que le formulaire de connexion */ body.page-template-login #woffice-login .lost-password-notice, body.page-template-login #woffice-login .alert-success, body.page-template-login #woffice-login .woffice-alert { background: transparent !important; border: 0 !important; color: #666 !important; padding: 0 !important; } body.page-template-login #woffice-login header { border: 0 !important; padding-bottom: 0; } body.page-template-login #woffice-login .login-tabs-wrapper { border: 0 !important; } body.page-template-login #woffice-login a.password-lost { text-decoration: none !important; } /* --- Widgets du tableau de bord : calendrier (LIVE) --- */ #dashboard .woffice-calendar__nav #month-year-select { display: flex; gap: 8px; align-items: center; } #dashboard .woffice-calendar__nav #month-year-select .select { flex: 1 1 50%; } #dashboard .woffice-calendar__nav select.form-control { font-size: 13px !important; height: 32px !important; border: 1px solid #e0e0ec !important; border-radius: 3px; color: #666; text-align: center; } #dashboard .woffice-calendar__nav { margin-bottom: 1rem !important; } #dashboard .woffice-calendar__new { display: none; } /* --- Cartographie / recherche GD (LIVE) : filtres compacts 11 px --- */ #content-container .geodir-search select.cat_select, #content-container .geodir-search .gd-search-input-wrapper select, #content-container .geodir-search input.search_text { font-size: 11px !important; } #content-container .geodir-search .gd-search-field-near { display: none !important; } /* --- Téléchargements (WPFD) : liens gris, colonne Titre lisible sur mobile --- */ #content-container .wpfd-content a:not(.downloadlink):not(.openlink), #content-container .wpfd-content .catlink { color: #666 !important; } /* Dossiers en grille qui remplit la largeur. style.css les empilait (bloc de 30 % par ligne) : colonne de dossiers tronqués à gauche, vide à droite. Les noms passent à la ligne. */ #page-wrapper #content .wpfd-container .wpfd-categories { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; } /* Dans un dossier : « Retour » en tête, sur toute la ligne (il flottait à droite dans la grille, derrière les cases vides que WPFD ajoute pour l'espacement) */ #page-wrapper #content .wpfd-container .wpfd-categories > .backcategory { grid-column: 1 / -1; justify-self: start; float: none !important; width: auto !important; margin: 0 !important; } #page-wrapper #content .wpfd-container .wpfd-categories > .wpfdcategory_placeholder { display: none; } /* Description de catégorie vide : elle occuperait la première case */ #page-wrapper #content .wpfd-container .wpfd-categories > .wpfd-category-desc:empty { display: none; } #page-wrapper #content .wpfd-container .wpfd-categories > .wpfd-category-desc { grid-column: 1 / -1; } #page-wrapper #content .wpfd-content .wpfdcategory { width: auto !important; max-width: none !important; margin: 0 !important; } #page-wrapper #content .wpfd-content .wpfdcategory > span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* Boutons Télécharger (action principale) et Aperçu (secondaire), système commun des boutons ; le lien du titre porte aussi .wpfd_downloadlink mais pas .downloadlink : il reste un lien */ #page-wrapper #content .wpfd-content a.downloadlink.wpfd_downloadlink, #page-wrapper #content .wpfd-content a.openlink.wpfd_previewlink { display: inline-flex !important; align-items: center; justify-content: center; gap: .5em; min-height: 36px; margin: 2px 0 !important; padding: 0 16px !important; border: 3px solid var(--impri-violet) !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600; text-transform: uppercase; text-decoration: none; white-space: nowrap; } #page-wrapper #content .wpfd-content a.downloadlink.wpfd_downloadlink { background: var(--impri-violet) !important; color: #fff !important; } #page-wrapper #content .wpfd-content a.downloadlink.wpfd_downloadlink:hover { background: var(--impri-violet-dark) !important; border-color: var(--impri-violet-dark) !important; } #page-wrapper #content .wpfd-content a.openlink.wpfd_previewlink { background: #fff !important; color: #666 !important; } #page-wrapper #content .wpfd-content a.openlink.wpfd_previewlink:hover { background: var(--impri-violet) !important; color: #fff !important; } #page-wrapper #content .wpfd-content a.downloadlink.wpfd_downloadlink i, #page-wrapper #content .wpfd-content a.openlink.wpfd_previewlink i { color: inherit !important; margin: 0 !important; } /* Fichiers sur mobile : le titre sur toute la largeur, les deux boutons côte à côte dessous (la colonne des boutons réduisait le titre à quelques lettres par ligne). */ #page-wrapper #content .wpfd-content { container: telechargements / inline-size; } @container telechargements (max-width: 559px) { #page-wrapper #content .wpfd-content table, #page-wrapper #content .wpfd-content table tbody { display: block; width: 100%; } #page-wrapper #content .wpfd-content table thead { display: none; } #page-wrapper #content .wpfd-content table tbody tr { display: flex; flex-wrap: wrap; gap: 10px 8px; padding: 14px 0; border-bottom: 1px solid #e6e6ee; } #page-wrapper #content .wpfd-content table tbody td { display: none; border: 0; padding: 0 !important; } #page-wrapper #content .wpfd-content table tbody td.file_title, #page-wrapper #content .wpfd-content table tbody td.file_download { flex: 1 1 100%; width: auto !important; max-width: none !important; min-width: 0 !important; } #page-wrapper #content .wpfd-content table tbody td.file_title { display: block; } #page-wrapper #content .wpfd-content table tbody td.file_download { display: flex; gap: 8px; } #page-wrapper #content .wpfd-content table tbody td.file_download a { flex: 1 1 0; width: auto !important; overflow: visible !important; } } #content-container .wpfd-content table td, #content-container .wpfd-content table th { word-break: normal; overflow-wrap: anywhere; } @media (max-width: 991px) { #content-container .wpfd-content table th.file_title, #content-container .wpfd-content table td.file_title { min-width: 160px; } } /* Bandeau : le parent place .pagetitle à top:50% et le h1 à top:30px → titre trop bas, recherche hors du bandeau */ #featuredbox .pagetitle { top: 0 !important; height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } #featuredbox .pagetitle h1, #featuredbox h1.entry-title { position: static !important; top: 0 !important; padding: 0 !important; height: auto !important; } /* Icônes de la navigation de profil (le parent vide le content du ::before avec 4 ids) */ #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li a::before { content: "\f111" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#xprofile-personal-li a::before { content: "\f007" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#calendar-personal-li a::before { content: "\f073" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#notifications-personal-li a::before { content: "\f0f3" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#groups-personal-li a::before { content: "\f0c0" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#forums-personal-li a::before { content: "\f086" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#settings-personal-li a::before { content: "\f013" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#activity-personal-li a::before { content: "\f1da" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#friends-personal-li a::before { content: "\f500" !important; } #content-container #buddypress .woffice-profile--vertical #woffice-bp-sidebar .users-single-itemnav .main-navs ul li#messages-personal-li a::before { content: "\f0e0" !important; } #item-body .users-single-subnav { background: transparent !important; padding: 0 !important; box-shadow: none !important; } .single-woffice-event #content-container div.item-list-tabs-wiki ul li { height: auto !important; min-height: 0 !important; line-height: normal !important; } .single-woffice-event #content-container div.item-list-tabs-wiki { margin: 0 !important; padding: 0 !important; } .single-woffice-event #content-container #event-nav { margin: 0 0 10px !important; } .single-woffice-event #content-container #event-content-view { margin-top: 0 !important; padding-top: 0 !important; } .single-woffice-event #content-container #event-content-view .event-metas { padding: 10px 0 0 !important; } /* --- Barre haute mobile (LIVE : 100 px, logo 110×32 après le hamburger, avatar 40, loupe et cloche 18 px) --- Déclaré en fin de fichier avec des sélecteurs forts pour passer devant les règles desktop. */ @media (max-width: 991px) { #page-wrapper #main-header, #page-wrapper #main-header nav.navbar { height: 100px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } #page-wrapper #main-header #nav-trigger { padding: 0 12px 0 16px !important; margin: 0 !important; order: 0; } #page-wrapper #main-header #nav-buttons { height: 100px; align-items: center; } #page-wrapper #main-header #main-search, #page-wrapper #main-header #main-search .active_search, #page-wrapper #main-header #main-search .active_search::after { width: 40px !important; } #page-wrapper #main-header #main-search form { right: -52px; width: calc(100vw - 32px); } } /* Article : boutons Modifier / Supprimer centrés dans la carte */ /* La barre d'actions prolonge la carte de l'article : coins du bas reportés sur elle, marge basse généreuse (retour client « augmenter la marge sous les boutons »). */ .single-post #content-container #content > :has(+ .frontend-edit-wrapper), .single-post #content-container #content > :has(+ .frontend-edit-wrapper) .box { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .single-post #content-container #content .frontend-edit-wrapper.box { background: #fff !important; box-shadow: none !important; padding: 0 !important; margin-top: 0 !important; border-radius: 0 0 15px 15px !important; } .single-post #content-container #content #blog-bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px 24px 32px; } .single-post #content-container #content #blog-bottom .btn { float: none !important; margin: 0 !important; } .single-post #content-container #content .blog-authorbox .blog-like-container { display: flex; align-items: center; gap: 10px; } .single-post #content-container #content .blog-authorbox .blog-like-container .like-text { margin: 0; white-space: normal; text-align: right; } /* Informations de l'article : chaque icône reste avec son texte quand la ligne se replie */ .single-post .post-metadatas { flex-wrap: wrap; row-gap: 4px; } .single-post .post-metadatas li { display: inline-flex; align-items: baseline; gap: .35em; } .single-post #content-container #content .post-metadatas li { flex-wrap: nowrap !important; } /* Woffice : wrap */ /* --- Cartographie / iframe (LIVE) : tous les filtres en 11 px, pas de champ Adresse, iframe sans carte violette --- */ .geodir-search select, .geodir-search .gd-search-input-wrapper select, .geodir-search input.search_text, .geodir-search input[type="text"] { font-size: 11px !important; text-transform: uppercase; } .geodir-search .gd-search-field-near { display: none !important; } body.iframe-content-body #left-content #content-container #content, body.iframe-content-body #content { border-top: 0 !important; padding: 0 !important; background: transparent !important; top: 0 !important; margin: 0 !important; border-radius: 0 !important; } body.iframe-content-body #scroll-top-container, body.iframe-content-body #main-footer { display: none !important; } #item-body .users-single-subnav nav.bp-subnavs, #item-body nav.bp-subnavs { background: transparent !important; } #item-body table.profile-fields td.data a { color: #666 !important; } #item-body table.profile-fields tr.alt td { background: #f9f9fc !important; } #featuredbox .pagetitle form button { display: inline-flex !important; align-items: center; justify-content: center; } #featuredbox .pagetitle form button i, #featuredbox .pagetitle form button svg { display: inline-block !important; color: #fff; font-size: 18px; } /* Statistiques : l'index alphabétique se cale sur #content (position relative) pour rester dans le bandeau comme sur le LIVE */ #content-container #content #statistics-page-content.box, #content-container #content .table_action_output.box { position: static !important; } /* Bandeau : sur le LIVE le titre est centré ~25 px au-dessus du milieu (le contenu remonte de 50 px sur le bandeau) */ #featuredbox .pagetitle { padding-bottom: 50px !important; } @media (max-width: 991px) { /* le parent pose "#page-wrapper .is-center-content #main-header .navbar { padding: 20px 15px !important }" */ #page-wrapper .is-center-content #main-header .navbar, #page-wrapper .is-center-content #main-header nav.navbar { padding: 0 16px 0 0 !important; height: 100px !important; } } /* Bandeau mobile (LIVE) : ~140 px visibles sous la barre haute (la barre fixe du LIVE recouvrait le haut du bandeau) */ @media (max-width: 991px) { #featuredbox { height: 190px !important; min-height: 190px !important; } #featuredbox .pagetitle { padding-bottom: 80px !important; } } /* Filtres avancés GD (Département, Société membre) : 11 px comme la barre principale ; champ "Address" (ASF 2.3) absent du LIVE */ .geodir-search-container .customize_filter_inner select.cat_select, .geodir-search-container .customize_filter_inner input.cat_input, .geodir-search-container .geodir-filter-cat select { font-size: 11px !important; text-transform: uppercase; height: auto; } .geodir-search-container .geodir-filter-cat.gd-field-street { display: none !important; } #page-wrapper #content #enterprise-alphafilter a.enterprise-alphafilter-link, #page-wrapper #content #enterprise-alphafilter a.enterprise-alphafilter-link:hover { color: inherit !important; } /* --- Audit v2 : barre haute desktop (LIVE : logo 260×76, avatar 50, loupe/cloche 62×100 icônes 25.6 px, 92 px de marge droite) --- */ /* Marge à droite des boutons : elle équilibre la zone du menu à gauche (92 px, comme sur le LIVE), mais elle se réduit avec la fenêtre — fixe, elle prenait la place dont la salutation avait besoin entre 992 et 1 280 px. */ @media (min-width: 992px) { #main-header #nav-buttons { padding-right: clamp(16px, calc((100vw - 992px) * .27 + 16px), 92px); } } /* Barre copyright : texte centré verticalement */ #main-footer #copyright { display: flex; align-items: center; justify-content: center; min-height: 70px; } #main-footer #copyright p { padding: 0 20px; } /* Champs de formulaire (LIVE) : angles 3 px, bord 2 px #e0e0ec, 50 px */ #content-container #content select, #content-container #content input[type="text"], #content-container #content input[type="search"], #content-container #content input[type="email"] { border-radius: 3.2px; border: 2px solid #e0e0ec; height: 50px; font-size: 16px; background: #fff; } #content-container #content .geodir-search select, #content-container #content .geodir-search input, #content-container #content .customize_filter_inner select, #content-container #content .customize_filter_inner input, #content-container #content .bbp-search-form input { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; height: auto; background: transparent; } /* 404 : « Rien trouvé » en 22 px sans capitales (LIVE) */ body.error404 #content .heading h2 { text-transform: none; font-size: 22px; } /* Iframe cartographie : titre 28 px gras #333 (LIVE) */ body.iframe-content-body h2#pageName { font-size: 28px !important; font-weight: 700 !important; color: #333 !important; padding: 0 16px; margin: 20px 0 10px; } @media (max-width: 991px) { body.iframe-content-body #page-wrapper { padding: 0 15px; } } /* Article : titre du bandeau en 30/36 (LIVE, style.css .single-post) */ .single-post #featuredbox .pagetitle h1, .single-post #featuredbox h1.entry-title { font-size: 30px !important; line-height: 36px !important; } /* Onglets BuddyPress : le trait de l'onglet actif ou survolé part du bord gauche (Woffice 5 oublie left: 0 sur l'annuaire, le trait partait du milieu de l'onglet) et prend le violet du site. */ #buddypress .dir-navs .activity-nav li::after, #buddypress .dir-navs .members-nav li::after, body.groups #buddypress .groups-type-navs .groups-nav li::after { left: 0; background-color: var(--impri-violet); } /* --- Annuaire des membres (LIVE) : compteur + pagination en haut, bandeau gris de recherche avec bouton violet, icônes d'en-tête, lignes alternées --- */ #main-content #buddypress .bp-pagination.top, #main-content #buddypress .is-table-view .bp-pagination.top { display: flex !important; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 0 0 12px; } #main-content #buddypress .bp-pagination .pag-data { margin: 0; font-size: 14px; color: #666; } #main-content #buddypress .dir-search, #main-content #buddypress .members-search { background: #f0eef5; padding: 12px; border-radius: 4px; margin-bottom: 12px; } #main-content #buddypress .dir-search form { display: flex; gap: 8px; align-items: stretch; max-width: 100%; } #main-content #buddypress .dir-search input[type="search"] { flex: 1 1 auto; border-radius: 3px !important; border: 2px solid #e0e0ec !important; height: 46px; padding-left: 12px; max-width: 100%; box-sizing: border-box; } #main-content #buddypress .dir-search #dir-members-search-submit, #main-content #buddypress .dir-search button[type="submit"] { display: inline-flex !important; align-items: center; justify-content: center; width: 56px !important; height: 46px; background: var(--impri-violet) !important; color: #fff !important; border: 0; border-radius: 3px; } #main-content #buddypress .dir-search #dir-members-search-submit .dashicons { color: #fff; } #main-content #buddypress .members table thead th i { display: inline-block !important; color: #b9a6cc; margin-right: 4px; } #main-content #buddypress .members table tbody tr:nth-child(odd) td { background: #f0f0f0; } #main-content #buddypress .members table thead tr th, #main-content #buddypress .members table tbody tr td { padding: 10px 6px !important; font-size: 12px; } #main-content #buddypress .members table thead tr th { white-space: nowrap; } /* Menu mobile : pas de bouton de fermeture rond du parent (le hamburger/flèche de la barre haute ferme le menu) */ #navigation .mobile-canvas-header, #navigation .close-navmenu, #navigation #mobile-menu-canvas-close { display: none !important; } /* Vidéos, recherche WPFD, recherche/archive GD (style.css) : carte grise à liseré violet 12 px */ body.page-id-8878 #content-container #content > article.content, body.page-template-template-videos #content-container #content > article.content, body.geodir-page-search.search-results #content-container #content > article.content, body.post-type-archive-gd_place.archive #content-container #content > article.content, body.page-id-8878 #content-container #content > article.box.content, body.page-template-template-videos #content-container #content > article.box.content, body.geodir-page-search.search-results #content-container #content > article.box.content, body.post-type-archive-gd_place.archive #content-container #content > article.box.content { border-top: 12px solid var(--impri-violet); border-radius: 12px; box-shadow: 0 6px 9px 0 rgba(57, 30, 85, .2); background: #efefef !important; } /* Cartographie : bloc de filtres gris arrondi (style.css) */ body.page-template-template-mapsearch #content .geodir-search-container { background: #efefef; border-radius: 1rem; padding: .5rem 0 1.5rem; overflow: hidden; } body.iframe-content-body #content-container #content > article, body.iframe-content-body #content-container #content > article.content, body.iframe-content-body #content-container #content > article.box.content { border-top: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } /* --- 3e passe : widgets du tableau de bord (LIVE : intérieur 20/20/20/16, listes 16 px) --- */ #dashboard .widget.box > .intern-padding { padding: 20px 20px 20px 16px !important; } #dashboard .widget li, #dashboard .widget li a { font-size: 16px; } /* Le bandeau (.pagetitle absolu, z-index 16) interceptait les clics sur le bouton "Nouvel article" qui remonte dessus */ #featuredbox .pagetitle { pointer-events: none; } #featuredbox .pagetitle a, #featuredbox .pagetitle form, #featuredbox .pagetitle input, #featuredbox .pagetitle button, #featuredbox .pagetitle select { pointer-events: auto; } /* GeoDirectory 2.3 : bouton "Generate Title Using AI" (fonction IA non utilisée) */ .geodir-add-listing .geodir-ai-generate, .geodir-add-listing [class*="geodir-ai"], .geodir-add-listing .gd-ai-title { display: none !important; } /* --- Widget « Sondage » du tableau de bord (attps-polls, [attps_polls_current]) --- Le sondage hebdomadaire n'a qu'une question, dont le libellé répète le titre daté : on ne la laisse qu'aux lecteurs d'écran. Les libellés restent en capitales (règle générale #page-wrapper label) comme avec l'ancien widget WP-Polls. */ #dashboard .atpl .atpl-form__page > .atpl-q:only-child > .atpl-q__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #dashboard .atpl .atpl-form__page > .atpl-q:only-child > .atpl-q__options { margin-top: 4px; } /* ========================================================================== RESPONSIVE -------------------------------------------------------------------------- Le thème enfant ne connaissait qu'un point de rupture, à 992 px : entre 992 et 1400 la page gardait ses proportions de grand écran alors que la rampe de navigation avait déjà pris 100 px, et la grille ne descendait jamais à une seule colonne — à 480 px on avait encore deux cartes de 221 px côte à côte. Le tableau de bord et les listes d'articles sont posés par Isotope (`layoutMode: 'masonry'`, sans `columnWidth`), qui place chaque carte en absolu et déduit le pas de la grille de la largeur du **premier élément**. On ne touche donc pas au script — le décalage des hauteurs fait partie du dessin de l'accueil — on rend seulement cette largeur fluide et bornée, et la mise en page suit l'écran d'elle-même. ========================================================================== */ /* Gouttière du bloc de contenu : fluide, bornée. 72 px sur grand écran comme sur le LIVE, 12 px sur un téléphone, et tout ce qu'il y a entre les deux. */ #left-content #content-container #content { margin: 0 clamp(12px, 5vw, 72px) !important; } /* Largeur de colonne du masonry. Une largeur figée (clamp) ne convient pas : Isotope cale alors les colonnes à gauche et laisse le reste vide à droite. Il faut au contraire que les colonnes **occupent toute la largeur** et qu'on en retire une seulement quand la carte passerait sous la largeur minimale lisible. D'où des largeurs en pourcentage — qui s'étirent — et des ruptures *déduites* de ce minimum plutôt que choisies. Chaque carte coûte 280 px plus 24 px de marge : trois colonnes exigent 912 px de contenu, soit 1 024 px de fenêtre une fois la gouttière fluide déduite ; deux colonnes 608 px, soit 680 px. */ #content-container #dashboard .box { width: calc(33.3333% - 24px) !important; margin: 0 12px 24px !important; } @media (max-width: 1023px) { #content-container #dashboard .box { width: calc(50% - 24px) !important; } } @media (max-width: 679px) { #content-container #dashboard .box { width: calc(100% - 24px) !important; } } /* Un article du widget « Dernières actualités ». Le lien « Lire l'article » était un `::after` du titre, placé en absolu à 2 rem sous lui : cela supposait des métadonnées sur une seule ligne. Dès que la colonne rétrécit, elles passent sur deux ou trois lignes et le lien atterrit dessus. Il devient ici un `::after` de l'article, dans le flux, donc toujours *après* les métadonnées, quelle que soit leur hauteur. L'article reste cliquable en entier : un `a::before` en absolu le recouvre déjà. Alignement : titre, métadonnées et lien partent tous du même retrait, porté par l'article (avatar 4,5 rem + 1 rem d'espace + 1 rem d'air), au lieu d'un retrait propre au titre que les métadonnées ne partageaient pas. */ #dashboard div[id^='rpwwt-'] > ul > li { padding-left: 6.5rem !important; padding-bottom: 1rem !important; } #dashboard div[id^='rpwwt-'] > ul > li > a > .rpwwt-post-title { margin-left: 0 !important; width: 100% !important; /* « IMPRICLUB_octobre » ne contient aucune espace : sans cela il déborde. */ overflow-wrap: anywhere; } #dashboard div[id^='rpwwt-'] > ul > li > a > .rpwwt-post-title::after { content: none !important; } #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-author, #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-date, #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-comments-number { float: none !important; display: inline !important; margin-left: 0 !important; } #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-author::after, #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-date::after { content: ' '; } /* « 0 | Vues : 6 » se replie d'un bloc : sinon le nombre se retrouve seul à la ligne, détaché de son libellé. */ #dashboard div[id^='rpwwt-'] > ul > li > .rpwwt-post-comments-number { white-space: nowrap; } #dashboard div[id^='rpwwt-'] > ul > li::after { content: 'LIRE L’ARTICLE →'; display: block; margin-top: .5rem; font-size: .625rem; color: #5B2C82; transition: transform .3s ease; } #dashboard div[id^='rpwwt-'] > ul > li:hover::after { transform: translateX(1rem); } /* Page des actualités et archives de catégorie : même principe que l'accueil. Isotope est conservé — des cartes d'articles de hauteurs inégales s'y prêtent mieux qu'une grille alignée par rangées — et seules leurs largeurs changent : en pourcentage, pour occuper toute la largeur, une colonne retirée seulement quand la carte passerait sous son minimum lisible (320 px : texte et avatar côte à côte). Les marges passent en pixels : en pourcentage, elles variaient avec la largeur et donnaient des espacements irréguliers. Différence avec l'accueil : les ruptures sont posées sur la largeur de la grille elle-même (requêtes de conteneur), pas sur celle de la fenêtre. Elles ne dépendent donc ni des gouttières ni du retrait de la carte blanche, et n'ont pas à être recalculées à la main. Trois colonnes exigent 3 × (320 + 24) = 1 032 px de grille, deux colonnes 688 px. */ body.blog #directory.masonry-layout, body.archive #directory.masonry-layout { container-type: inline-size; } body.blog #directory.masonry-layout .box.blog-item, body.archive #directory.masonry-layout .box.blog-item { width: calc(33.3333% - 24px) !important; margin: 0 12px 24px !important; } @container (max-width: 1031px) { body.blog #directory.masonry-layout .box.blog-item, body.archive #directory.masonry-layout .box.blog-item { width: calc(50% - 24px) !important; } } @container (max-width: 687px) { body.blog #directory.masonry-layout .box.blog-item, body.archive #directory.masonry-layout .box.blog-item { width: calc(100% - 24px) !important; } } /* Un titre ou un extrait peut contenir une adresse ou un mot sans espace qui ne tient pas dans la carte : on autorise la coupure plutôt que le débordement. */ body.blog #directory.masonry-layout .box.blog-item h3, body.blog #directory.masonry-layout .box.blog-item p, body.archive #directory.masonry-layout .box.blog-item h3, body.archive #directory.masonry-layout .box.blog-item p { overflow-wrap: anywhere; } /* Le retrait intérieur de 3 rem de la carte des actualités prend la moitié de l'écran sur un téléphone : il suit la même règle fluide que la gouttière. */ body.archive.category #left-content #content-container #content, body.blog #left-content #content-container #content { padding: clamp(16px, 3vw, 48px) !important; } /* ========================================================================== ENTÊTE — source unique -------------------------------------------------------------------------- La rangée d'entête, le bloc utilisateur et la cloche étaient décrits par une cinquantaine de règles réparties dans ce fichier et dans style.css, ajoutées au fil des corrections. L'avatar à lui seul avait sept tailles (40, 42, 44 et 50 px, avec et sans !important), et sa largeur et sa hauteur n'étaient pas gagnées par la même règle : d'où un cadre de 50 × 40 qui rognait l'image. Chaque propriété de ces trois composants est désormais déclarée ici, une fois. ========================================================================== */ #main-header { --entete-avatar: 50px; --entete-icone: 24px; } @media (max-width: 991px) { #main-header { --entete-avatar: 40px; --entete-icone: 22px; } } /* --- Rangée --------------------------------------------------------------- */ #page-wrapper #main-header .navbar-collapse { position: relative; height: 100px; min-height: 0; width: 100%; padding: 0 !important; margin: 0 !important; align-items: center; } #main-header .impriclub-header-logo { display: block; background: url("../../../../uploads/2023/02/02_Logo_Horizontal_Couleurs_Impriclub.png") center / contain no-repeat; } /* Grand écran : trois colonnes. Le logo occupe la colonne centrale et y réserve sa place ; les deux côtés se partagent le reste et ne peuvent plus l'atteindre. Il était posé en absolu au milieu, sans réserver de place : le groupe de droite le recouvrait dès que la fenêtre rétrécissait. */ @media (min-width: 992px) { #page-wrapper #main-header .navbar-collapse { display: grid !important; grid-template-columns: 1fr auto 1fr; } #page-wrapper #main-header #nav-trigger { grid-area: 1 / 1; justify-self: start; } #page-wrapper #main-header .impriclub-header-logo { grid-area: 1 / 2; position: static !important; transform: none !important; width: 260px; height: 76px; margin: 0 24px !important; } #page-wrapper #main-header .navbar-collapse > ul.ml-auto { grid-area: 1 / 3; justify-self: stretch; min-width: 0; margin: 0 !important; container: entete-droite / inline-size; } #page-wrapper #main-header #nav-buttons { justify-content: flex-end; } } /* Petit écran : une rangée — menu, logo réduit, puis les boutons poussés à droite. */ @media (max-width: 991px) { #page-wrapper #main-header .navbar-collapse { display: flex !important; } #page-wrapper #main-header #nav-trigger { order: 0; } #page-wrapper #main-header .impriclub-header-logo { order: 1; position: static !important; transform: none !important; width: 110px; height: 32px; flex: 0 0 110px; margin: 0 !important; } #page-wrapper #main-header .navbar-collapse > ul.ml-auto { order: 3; margin: 0 0 0 auto !important; padding: 0 !important; } } /* --- Bloc utilisateur ----------------------------------------------------- */ #main-header .sidebar-userinfo, #main-header .sidebar-userinfo_row, #main-header .sidebar-userinfo .user-infodetail { width: auto !important; max-width: none !important; min-width: 0; } #page-wrapper #main-header #nav-buttons .sidebar-userinfo { order: 1; min-width: 0; margin: 0 8px 0 0 !important; } #main-header .sidebar-userinfo .user-infodetail { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; } #main-header .sidebar-userinfo figcaption { display: flex; align-items: center; position: static; min-width: 0; } #main-header .sidebar-userinfo .user-name { min-width: 0; max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-family: Montserrat, helvetica, arial, sans-serif; font-size: 16px; font-weight: 700; text-transform: none; color: #384141; } #main-header .sidebar-userinfo .user-name::before { content: "Bonjour, "; font-weight: 300; } #main-header .sidebar-userinfo .user-email, #main-header .sidebar-userinfo .user-profile-trigger { display: none; } /* La salutation est ce qui compte le moins dans la rangée : sur petit écran, ou quand la colonne de droite devient trop étroite pour elle, on la retire plutôt que de la laisser déborder sur ses voisins. */ @media (max-width: 991px) { #main-header .sidebar-userinfo figcaption { display: none; } } /* Quand la place manque, on retire d'abord la formule et l'on garde le nom : une troncature « Bonjour, a… » garderait justement la partie qui n'apprend rien. */ @container entete-droite (max-width: 479px) { #main-header .sidebar-userinfo .user-name::before { content: none; } } @container entete-droite (max-width: 330px) { #main-header .sidebar-userinfo figcaption { display: none; } } /* L'avatar : un carré d'une seule taille par rupture, que l'image remplit. */ #page-wrapper #main-header .sidebar-userinfo #user-thumb, #page-wrapper #main-header .sidebar-userinfo #user-thumb img { width: var(--entete-avatar) !important; height: var(--entete-avatar) !important; flex: 0 0 var(--entete-avatar) !important; margin: 0 !important; border-radius: 50%; } #page-wrapper #main-header .sidebar-userinfo #user-thumb { display: block; overflow: hidden; } #page-wrapper #main-header .sidebar-userinfo #user-thumb img { display: block; object-fit: cover; } /* --- Cloche et pastille --------------------------------------------------- */ /* Woffice dessine une cloche SVG dans une gélule blanche qui se remplit de couleur au survol. Le thème a remplacé ce SVG par une icône, mais la gélule était restée, vide : c'est elle qui devenait une pastille bleue au survol, puis un rectangle quand le × apparaissait au clic. Elle est retirée ; l'icône seule porte l'état. */ #page-wrapper #main-header #nav-notification-trigger { order: 3; position: relative; display: flex !important; align-items: center; justify-content: center; width: 62px; height: 100px; padding: 0 !important; margin: 0 !important; top: 0 !important; line-height: 1 !important; } #main-header #nav-notification-trigger svg, #main-header #nav-notification-trigger .stellar-bell { display: none !important; } #main-header #nav-notification-trigger::before { content: "\f0f3"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--entete-icone); line-height: 1; color: #666; transition: color .2s ease; } #main-header #nav-notification-trigger:hover::before { color: var(--impri-violet); } /* Panneau ouvert : Woffice masque sa cloche (classe svg_hide) pour montrer un ×. On fait de même sur l'icône — même place, même taille. */ #main-header #nav-notification-trigger:has(.svg_hide)::before { content: "\f00d"; } /* Notifications non lues : un point violet accroché au coin de la cloche, et non plus au coin de la cellule de 100 px de haut. Woffice posait un point sur chaque descendant (`.active ::after`, avec une espace) ; un seul suffit. */ #main-header #nav-notification-trigger.active::after { content: ""; position: absolute; top: calc(50% - var(--entete-icone) / 2 - 3px); left: calc(50% + var(--entete-icone) / 2 - 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--impri-violet) !important; box-shadow: 0 0 0 2px #fff; pointer-events: none; } /* Pendant que le panneau est ouvert, on lit justement les notifications : la pastille n'a rien à signaler, et elle ne doit pas se poser sur le ×. */ #main-header #nav-notification-trigger.active:has(.svg_hide)::after { display: none; } #main-header #main-search .active_search::after { font-size: var(--entete-icone); } @media (max-width: 991px) { #page-wrapper #main-header #nav-notification-trigger { width: auto; padding: 0 12px 0 4px !important; } } /* -------------------------------------------------------------------------- Agenda (page /agenda/, calendrier Woffice) -------------------------------------------------------------------------- */ /* Les lignes du calendrier ont les marges négatives de Bootstrap (-15 px) sans le retrait qui les compense : la grille dépassait de 15 px de chaque côté, d'où le trait du bas et la case du jour décalés. */ #page-wrapper #content #woffice-calendar #calendar .row { margin-left: 0; margin-right: 0; } /* Jours de la semaine abrégés (« Lun », fournis par Woffice et jamais affichés) quand la grille est trop étroite pour « Mercredi » ou « Dimanche » en toutes lettres. */ #page-wrapper #content #woffice-calendar { container: agenda / inline-size; } @container agenda (max-width: 639px) { #page-wrapper #content #woffice-calendar .calendar-header .full { display: none; } #page-wrapper #content #woffice-calendar .calendar-header .short { display: block; } /* Mois, année et flèches sur une même ligne (les colonnes Bootstrap s'empilaient sous 576 px, laissant les flèches seules sur leur ligne) */ #page-wrapper #content #woffice-calendar .woffice-calendar__nav { flex-wrap: nowrap; align-items: center; } #page-wrapper #content #woffice-calendar #month-year-select { flex: 1 1 auto; width: auto; max-width: none; gap: 8px; } #page-wrapper #content #woffice-calendar #month-year-select .select { flex: 1 1 0; min-width: 0; } #page-wrapper #content #woffice-calendar #month-year-select .select:last-child { flex: 0 0 84px; } /* l'année */ #page-wrapper #content #woffice-calendar #month-year-select select { padding-left: 10px !important; padding-right: 4px !important; } #page-wrapper #content #woffice-calendar .calendar-actions { flex: 0 0 auto; width: auto; max-width: none; padding-left: 0; } #page-wrapper #content #woffice-calendar .calendar-actions .calendar-nav { padding-left: 0; } } /* Très petit écran : « Septembre » ne tiendrait pas à côté de l'année et des flèches ; les flèches passent à la ligne, à droite, plutôt que de tronquer le mois. */ @container agenda (max-width: 299px) { #page-wrapper #content #woffice-calendar .woffice-calendar__nav { flex-wrap: wrap; row-gap: 12px; } #page-wrapper #content #woffice-calendar #month-year-select { flex: 1 1 100%; } #page-wrapper #content #woffice-calendar .calendar-actions { margin-left: auto; } }