/* Theme Name: Extra Child - Journal du Web Theme URI: https://le-journal-du-web.fr Template: Extra Author: Adrien Author URI: https://le-journal-du-web.fr Description: Theme enfant du theme Extra (Elegant Themes), personnalise pour Le Journal du Web : nouvelle palette de couleurs, typographies, header/footer retravailles, grille d'articles et responsive ameliore. Version: 1.6.0 Text Domain: extra-child-jdw */ /* ========================================================================== 1. VARIABLES ========================================================================== */ :root { --jdw-primary: #2b3648; --jdw-primary-light: #394a63; --jdw-accent: #ff7a3d; --jdw-accent-dark: #e8621f; --jdw-accent-2: #17b8a6; --jdw-text: #262b33; --jdw-text-light: #6b7280; --jdw-bg: #f4f6f8; --jdw-card-bg: #ffffff; --jdw-border: #e7e9ee; --jdw-radius: 12px; --jdw-radius-sm: 8px; --jdw-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); --jdw-shadow-hover: 0 16px 28px rgba(15, 23, 42, 0.14); --jdw-font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif; --jdw-font-body: "Inter", "Helvetica Neue", Arial, sans-serif; } /* ========================================================================== 2. BASE / TYPOGRAPHIE ========================================================================== */ body { background-color: var(--jdw-bg); color: var(--jdw-text); font-family: var(--jdw-font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .entry-title, .et_pb_post h2, .et_pb_post h1, #et-menu, .widget-title { font-family: var(--jdw-font-heading); font-weight: 700; letter-spacing: 0; } a { color: var(--jdw-accent); transition: color 0.2s ease; } a:hover { color: var(--jdw-accent-dark); } ::selection { background: var(--jdw-accent); color: #fff; } /* ========================================================================== 3. HEADER ========================================================================== */ #main-header-wrapper, #main-header { background: linear-gradient(180deg, var(--jdw-primary) 0%, var(--jdw-primary-light) 100%); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15); } .logo { transition: transform 0.2s ease; } .logo:hover { transform: scale(1.03); } /* Correctif bug : le fichier logo uploade fait 1024x1024px. Sans cette regle, le navigateur peut afficher le logo a sa taille reelle (tres grand) le temps que le CSS du theme se charge (effet de "flash" au chargement de page). Voir aussi le CSS critique injecte inline dans via functions.php. */ #main-header .logo, #main-header a.logo { display: inline-block; max-height: 60px; } #main-header .logo img#logo, #main-header img#logo { max-height: 60px !important; width: auto !important; height: auto !important; } /* Correctif bug : le menu etait aligne en bas d'une zone de 120px alors que le logo est centre, ce qui le faisait paraitre decale sur une "2e ligne". On centre verticalement le menu par rapport au logo. */ #et-navigation { align-items: center !important; } #et-menu.nav { align-items: center; } #et-navigation #et-menu.nav > li > a { font-family: var(--jdw-font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase; padding: 0 16px; /* Correctif bug : texte gris clair (60% opacite) peu lisible sur le nouveau fond fonce du header -> on l'eclaircit. */ color: rgba(255, 255, 255, 0.88); transition: color 0.2s ease, opacity 0.2s ease; } #et-navigation #et-menu.nav > li > a:hover { color: var(--jdw-accent) !important; opacity: 1; } #et-navigation #et-menu.nav > li.current-menu-item > a, #et-navigation #et-menu.nav > li.current_page_item > a { color: var(--jdw-accent) !important; border-bottom: 2px solid var(--jdw-accent); } /* Icones de categories dans le menu (garder mais harmoniser la couleur) */ #et-menu .menu-item i, #et-menu .menu-item .et-pb-icon { color: var(--jdw-accent); } /* ========================================================================== 4. CONTENU / GRILLE D'ARTICLES (cards) ========================================================================== */ .et_pb_post, article.et_pb_post, .et_pb_extra_column .et_pb_post { background: var(--jdw-card-bg); border: 1px solid var(--jdw-border); border-radius: var(--jdw-radius); box-shadow: var(--jdw-shadow); overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; } .et_pb_post:hover { box-shadow: var(--jdw-shadow-hover); transform: translateY(-3px); } .et_pb_post .entry-featured-image-wrapper, .et_pb_post .et_pb_image_wrap { border-radius: var(--jdw-radius) var(--jdw-radius) 0 0; overflow: hidden; } .et_pb_post .entry-title, .et_pb_post h2 a { font-size: 18px; line-height: 1.35; letter-spacing: 0.2px; } .et_pb_post .entry-title a:hover, .et_pb_post h2 a:hover { color: var(--jdw-accent); } .et_pb_post .post-meta, .et_pb_post .et_pb_extra_top_meta, .et_pb_post .et_pb_extra_bottom_meta { color: var(--jdw-text-light); font-size: 12px; } .et_pb_post .post-meta a, .et_pb_post .et_pb_extra_top_meta a { color: var(--jdw-accent-2); } /* Badges / categories */ .et_pb_extra_category, .et_pb_post .categories a, .et-post-meta-category { background: var(--jdw-accent); color: #fff !important; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; } /* Boutons "En savoir plus" / call to action */ .more-link, .et_pb_button, button, input[type="submit"] { background: var(--jdw-accent); color: #fff !important; border: none; border-radius: var(--jdw-radius-sm); padding: 10px 22px; font-weight: 600; letter-spacing: 0.3px; transition: background 0.2s ease, transform 0.2s ease; } .more-link:hover, .et_pb_button:hover, button:hover, input[type="submit"]:hover { background: var(--jdw-accent-dark); transform: translateY(-1px); } /* Onglets "Populaire / Les mieux notes / Dernier" */ .et_pb_extra_tabs .et_pb_extra_tab_link, .et-tabs-nav a { font-family: var(--jdw-font-heading); font-weight: 700; border-bottom: 3px solid transparent; } .et_pb_extra_tabs .et_pb_extra_tab_link.active, .et-tabs-nav a.active { border-bottom-color: var(--jdw-accent-2); color: var(--jdw-primary); } /* Cartes d'articles sur les pages d'archives / categories (template par defaut d'Extra : balise "article.post", differente du widget "Onglets" de la page d'accueil qui genere des ".et_pb_post"). Correctif (v1.5.2) : ces cartes n'avaient aucun habillage du theme enfant (juste l'ombre tres discrete du parent Extra, fond blanc plat) et leur hauteur variait fortement d'une carte a l'autre car chaque image mise en avant garde ses proportions d'origine (les photos uploadees n'ont pas toutes le meme ratio largeur/hauteur). On harmonise l'apparence avec les cartes de la page d'accueil et on fixe une hauteur identique pour toutes les images (recadrees proprement avec object-fit), ce qui uniformise fortement la hauteur des cartes sans casser la repartition automatique en colonnes. */ article.post { background: var(--jdw-card-bg); border: 1px solid var(--jdw-border); border-radius: var(--jdw-radius); box-shadow: var(--jdw-shadow); overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; } article.post:hover { box-shadow: var(--jdw-shadow-hover); transform: translateY(-3px); } article.post .featured-image img { width: 100%; height: 220px; object-fit: cover; display: block; } article.post .post-title.entry-title { font-size: 18px; line-height: 1.35; letter-spacing: 0.2px; } article.post .post-title.entry-title a:hover { color: var(--jdw-accent); } /* Limite le texte d'extrait a 3 lignes pour eviter que les cartes dont l'extrait est plus long ne deviennent beaucoup plus hautes que les autres. */ article.post .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== 5. SIDEBAR / WIDGETS ========================================================================== */ .widget { background: var(--jdw-card-bg); border: 1px solid var(--jdw-border); border-radius: var(--jdw-radius); box-shadow: var(--jdw-shadow); padding: 20px; margin-bottom: 24px; } .widget-title { font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--jdw-primary); border-bottom: 2px solid var(--jdw-accent); padding-bottom: 8px; margin-bottom: 14px; } /* ========================================================================== 6. FOOTER ========================================================================== */ /* * Le footer de ce site n'utilise PAS le template classique d'Extra (#footer, * #footer-widgets...) : il est construit avec le Theme Builder Divi/Extra * (balise