/* ============================================================ minecraft.fr — Redesign "Bloc par Bloc" Socle : tokens + base. Les zones s'ajoutent à la suite. GO-LIVE : les blocs HEADER et FOOTER ont été retirés — assets/menu.css et assets/footer.css font foi (chargés après). ============================================================ */ :root{ --mc-tq:#1AA995; --mc-tq-d:#11796A; --mc-tq-l:#34CBB2; --mc-tq-bg:#E4F4F0; --mc-gold:#E8A93B; --mc-gold-d:#C8861B; --mc-ink:#1E2422; --mc-ink-2:#3C4742; --mc-muted:#6B756F; --mc-paper:#FFFFFF; --mc-bone:#F4F1EA; --mc-line:#E3DFD5; --mc-line-2:#CFCABD; --mc-dark:#161D1B; --mc-dark-2:#202A27; --mc-dark-line:#2E3A36; /* tokens découplés (clair = valeurs d'origine) pour pouvoir basculer en dark */ --mc-surface:#FFFFFF; /* fond des cartes */ --mc-page:#ECEAE4; /* fond de page / sol */ --mc-edge:var(--mc-ink); /* bordures dures des blocs */ --mc-shadow:var(--mc-ink); /* couleur des ombres pleines */ --mc-strong:var(--mc-ink); /* aplats sombres (en-tête Textures, etc.) */ --mc-sh:4px 4px 0 var(--mc-shadow); --mc-sh-sm:3px 3px 0 var(--mc-shadow); --mc-sh-tq:4px 4px 0 var(--mc-tq-d); --mc-display:"Space Grotesk",system-ui,sans-serif; --mc-sans:"IBM Plex Sans",system-ui,sans-serif; } /* ============================================================ THÈME SOMBRE — overlay de tokens (issu de theme-dark.css du design). Activé quand (posé par le script wp_head : sombre par défaut, choix mémorisé via localStorage). On ne touche pas aux classes : on redéfinit seulement les couleurs. ============================================================ */ [data-theme="dark"]{ --mc-tq:#1AA995; --mc-tq-d:#34CBB2; --mc-tq-l:#5FE3CC; --mc-tq-bg:#14302B; --mc-gold:#E8A93B; --mc-gold-d:#F0BE61; --mc-ink:#EAF1EE; --mc-ink-2:#C7D3CF; --mc-muted:#8A968F; --mc-paper:#1B2320; --mc-bone:#202A27; --mc-line:#2E3A36; --mc-line-2:#3A4742; --mc-dark:#0F1412; --mc-dark-2:#19211E; --mc-dark-line:#2E3A36; --mc-surface:#1B2320; --mc-edge:#2E3A36; --mc-shadow:#000000; --mc-strong:#0E1311; --mc-sh:4px 4px 0 #000; --mc-sh-sm:3px 3px 0 #000; --mc-sh-tq:4px 4px 0 #0A0D0C; } /* DARK — filet de sécurité lisibilité du contenu (corps d'article/texte pas encore stylé en détail : éviter le texte sombre d'Extra sur fond sombre) */ [data-theme="dark"] #content-area .post-content, [data-theme="dark"] #content-area .post-content p, [data-theme="dark"] #content-area .post-content li, [data-theme="dark"] #content-area .et_pb_extra_column_main .et_pb_text{ color:var(--mc-ink-2) !important; } /* légendes d'images (Gutenberg .wp-element-caption, classique .wp-caption-text) : le #555 hérité est illisible sur fond sombre */ [data-theme="dark"] #content-area .post-content figcaption, [data-theme="dark"] #content-area .post-content .wp-element-caption, [data-theme="dark"] #content-area .post-content .wp-caption-text{ color:var(--mc-muted) !important; } /* Namespace : tout le HTML du redesign sera enveloppé dans .mc */ .mc{ font-family:var(--mc-sans); color:var(--mc-ink); line-height:1.65; -webkit-font-smoothing:antialiased; } .mc *,.mc *::before,.mc *::after{ box-sizing:border-box; } /* Lift blocky réutilisable */ .mc-press{ transition:transform .08s ease, box-shadow .08s ease, background .15s ease; } .mc-press:hover{ transform:translate(-1px,-1px); } .mc-press:active{ transform:translate(3px,3px); } /* (Le switch clair/sombre du footer est stylé dans assets/footer.css : .mcfr-tsw — switch segmenté Clair|Sombre, intégration "barre utilitaire" en fin de rangée de liens, cf. maquette export-footer-theme.) */ /* ===== Les zones du redesign s'ajoutent ci-dessous, une par une ===== */ /* ============================================================ ACCUEIL / FLUX D'ARTICLES — reskin Bloc par Bloc (skin CSS) Cible les cartes .post du module blog feed Extra (structure rigide). S'applique aussi aux archives/catégories (même markup) → cohérent. Préfixe #content-area pour battre la spécificité d'Extra. ============================================================ */ /* ---- Carte article ---- */ #content-area .post-module .post, #content-area .posts-blog-feed-module .post{ background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; border-radius:0 !important; overflow:hidden; transition:transform .08s ease, box-shadow .08s ease; } #content-area .post-module .post:hover{ transform:translate(-1px,-1px) !important; box-shadow:6px 6px 0 var(--mc-shadow) !important; } /* image à la une : bord bas dur */ #content-area .post-module .post .header .featured-image, #content-area .post-module .post .featured-image{ border-bottom:2px solid var(--mc-edge) !important; display:block; } /* contenu */ #content-area .post-module .post .post-content{ padding:14px 16px 16px !important; } /* titre (Pixelify) */ #content-area .post-module .post .post-title, #content-area .post-module .post h2.entry-title{ font-family:var(--mc-display) !important; font-weight:700 !important; line-height:1.12 !important; margin:0 0 8px !important; } #content-area .post-module .post .post-title a, #content-area .post-module .post h2.entry-title a{ color:var(--mc-ink) !important; } #content-area .post-module .post:hover .post-title a{ color:var(--mc-tq-d) !important; } /* méta (date) */ #content-area .post-module .post .post-meta, #content-area .post-module .post .post-meta.vcard{ font-family:var(--mc-sans) !important; font-size:12px !important; color:var(--mc-muted) !important; } #content-area .post-module .post .post-meta a{ color:var(--mc-tq-d) !important; } /* extrait */ #content-area .post-module .post .excerpt, #content-area .post-module .post .entry-summary{ font-family:var(--mc-sans) !important; font-size:14px !important; line-height:1.55 !important; color:var(--mc-ink-2) !important; } /* ---- Pagination en blocs ---- */ #main-content ul.pagination, #content-area ul.pagination{ display:flex !important; gap:8px !important; list-style:none !important; justify-content:center !important; align-items:center !important; flex-wrap:wrap !important; } /* NE PAS forcer le display des li : Extra masque les pages en trop via display:none */ #main-content ul.pagination li{ margin:0 !important; } #main-content ul.pagination a, #main-content ul.pagination span{ font-family:var(--mc-display) !important; font-weight:700 !important; color:var(--mc-ink) !important; background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh-sm) !important; font-size:15px !important; padding:0 10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; /* évite le retour à la ligne des chiffres */ min-width:42px !important; height:42px !important; white-space:nowrap !important; box-sizing:border-box !important; line-height:1 !important; } /* page active : Extra utilise li.active (pas .current) */ #main-content ul.pagination li.active a, #main-content ul.pagination li.active span, #main-content ul.pagination .current, #main-content ul.pagination a:hover{ background:var(--mc-tq) !important; color:#06231E !important; border-color:var(--mc-ink) !important; } /* flèches prev/next : le glyphe (caractère ou police icône, parfois dans un enfant/pseudo-élément) doit suivre la couleur du bloc — sinon noir en dark */ #main-content ul.pagination li a *, #main-content ul.pagination li a::before, #main-content ul.pagination li a::after, #main-content ul.pagination li span *{ color:var(--mc-ink) !important; fill:var(--mc-ink) !important; opacity:1 !important; } #main-content ul.pagination li a:hover *, #main-content ul.pagination li a:hover::before, #main-content ul.pagination li a:hover::after, #main-content ul.pagination li.active a *{ color:#06231E !important; fill:#06231E !important; } /* ellipsis "…" : pas de boîte (la boîte grise vient du li, fond rgba(0,0,0,.1)) */ #main-content ul.pagination li.ellipsis{ background:transparent !important; box-shadow:none !important; border:0 !important; } #main-content ul.pagination li.ellipsis a, #main-content ul.pagination .ellipsis a, #main-content ul.pagination li.ellipsis span{ border:0 !important; background:transparent !important; box-shadow:none !important; min-width:22px !important; padding:7px 2px !important; color:var(--mc-muted) !important; } /* ---- Titres de widgets sidebar (si présents) ---- */ .et_pb_extra_column_sidebar .et_pb_widget .widgettitle, .et_pb_extra_column_sidebar .et_pb_widget h4.title, .et_pb_extra_column_sidebar .et_pb_widget > h4{ font-family:var(--mc-display) !important; font-weight:700 !important; letter-spacing:.02em !important; color:var(--mc-ink) !important; } /* ============================================================ BLOC DE LIENS CATÉGORIES (.grid-categories) — tuiles Bloc par Bloc Bloc Code existant en milieu d'accueil (14 raccourcis icône + libellé). Réf design : bande catégories. Ici en tuiles dures (assets images 60px). ============================================================ */ .grid-categories{ display:grid !important; grid-template-columns:repeat(7, 1fr) !important; gap:14px !important; } .grid-categories a.category{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; border-radius:0 !important; padding:16px 8px 13px !important; text-decoration:none !important; transition:transform .08s ease, box-shadow .08s ease, background .15s ease; } .grid-categories a.category:hover{ transform:translate(-1px,-1px) !important; box-shadow:6px 6px 0 var(--mc-shadow) !important; background:var(--mc-bone) !important; } .grid-categories a.category img{ width:54px !important; height:54px !important; image-rendering:pixelated; } .grid-categories a.category > div{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:13px !important; letter-spacing:.01em !important; color:var(--mc-ink) !important; text-align:center !important; line-height:1.05 !important; } .grid-categories a.category:hover > div{ color:var(--mc-tq-d) !important; } @media (max-width:980px){ .grid-categories{ grid-template-columns:repeat(4, 1fr) !important; } } @media (max-width:560px){ .grid-categories{ grid-template-columns:repeat(2, 1fr) !important; } } /* ============================================================ TEXTE SEO (blocs .et_pb_text de la colonne principale) Titres Pixelify, liens turquoise, blocs encadrés "bloc". ============================================================ */ #content-area .et_pb_extra_column_main .et_pb_text h1, #content-area .et_pb_extra_column_main .et_pb_text h2, #content-area .et_pb_extra_column_main .et_pb_text h3{ font-family:var(--mc-display) !important; font-weight:700 !important; color:var(--mc-ink) !important; } /* (soulignement : géré par le style "liens éditoriaux" du CSS Customizer — dégradé turquoise animé. text-decoration:none pour éviter le double trait.) */ #content-area .et_pb_extra_column_main .et_pb_text a{ color:var(--mc-tq-d) !important; font-weight:600 !important; text-decoration:none !important; } #content-area .et_pb_extra_column_main .et_pb_text a:hover{ color:var(--mc-ink) !important; } /* bloc SEO encadré (option "bordure" Divi) → bloc dur */ #content-area .et_pb_extra_column_main .et_pb_text.et_pb_with_border{ border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; background:var(--mc-bone) !important; padding:18px 20px !important; border-radius:0 !important; } /* Tous les titres de la colonne principale en Pixelify (y compris le H1 du module Code, qui restait en Arial car hors .et_pb_text) */ #content-area .et_pb_extra_column_main h1, #content-area .et_pb_extra_column_main h2, #content-area .et_pb_extra_column_main h3{ font-family:var(--mc-display) !important; color:var(--mc-ink) !important; } /* H1 hero de l'accueil — compact, objectif UNE seule ligne en desktop */ #content-area .et_pb_extra_column_main h1{ font-weight:700 !important; font-size:clamp(19px, 2.1vw, 26px) !important; line-height:1.15 !important; margin:0 0 14px !important; } /* ============================================================ MODULES FEATURE (post-module : "Mods/Maps/Textures", sliders) En-tête de section Bloc par Bloc + liste secondaire allégée. ============================================================ */ /* supprime la barre colorée d'accent catégorie en haut du module */ #content-area .post-module{ border-top:0 !important; } /* en-tête de section = barre colorée pleine (maquette "Parcourir par catégorie") carré + titre Pixelify majuscule, couleur par catégorie */ #content-area .post-module .module-head{ display:flex !important; align-items:center !important; gap:12px !important; margin:0 !important; border:0 !important; border-bottom:2px solid var(--mc-edge) !important; padding:11px 16px !important; background:var(--mc-tq) !important; } #content-area .post-module .module-head h1, #content-area .post-module .module-head h2{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:18px !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:#06231E !important; margin:0 !important; display:inline-flex !important; align-items:center; gap:12px; } #content-area .post-module .module-head h1::before, #content-area .post-module .module-head h2::before{ content:"" !important; width:14px; height:14px; background:rgba(0,0,0,.32); flex:0 0 auto; } #content-area .post-module .module-head h1 a, #content-area .post-module .module-head h2 a{ color:inherit !important; } /* couleurs par catégorie : Mods=turquoise · Maps=or · Textures=sombre */ #content-area .et_pb_posts_0 .module-head{ background:var(--mc-tq) !important; } #content-area .et_pb_posts_1 .module-head{ background:var(--mc-gold) !important; } #content-area .et_pb_posts_2 .module-head{ background:var(--mc-strong) !important; } #content-area .et_pb_posts_2 .module-head h1, #content-area .et_pb_posts_2 .module-head h1 a{ color:#fff !important; } #content-area .et_pb_posts_2 .module-head h1::before{ background:var(--mc-tq) !important; } /* La carte catégorie = le module entier dans UNE bordure (maquette .hm-cat) : en-tête coloré flush en haut, visuel + liste à l'intérieur. */ #content-area .et_pb_posts_0, #content-area .et_pb_posts_1, #content-area .et_pb_posts_2{ background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; } /* carte principale interne : pas de bordure/ombre propre (le module est la carte) */ #content-area .post-module .main-post .post{ border:0 !important; box-shadow:none !important; } #content-area .post-module .main-post .post:hover{ transform:none !important; box-shadow:none !important; } #content-area .post-module .main-post .post .featured-image{ border-bottom:2px solid var(--mc-edge) !important; } #content-area .post-module .posts-list{ padding:4px 0 6px !important; } /* ============================================================ CARROUSELS Divi (posts-carousel-module : "Guides", "News Hytale"…) En-tête secbar + cartes blanches à bord dur + flèches blocky. Modules auto-alimentés par Divi → reskin CSS uniquement. ============================================================ */ #content-area .posts-carousel-module{ border-top:0 !important; background:transparent !important; } /* en-tête de section : carré turquoise + Pixelify majuscule + filet */ #content-area .posts-carousel-module .module-head{ display:flex !important; align-items:center !important; gap:12px !important; border:0 !important; border-bottom:0 !important; padding:0 !important; margin:0 0 16px !important; background:none !important; min-height:36px; } /* "Derniers publiés" masqué (absent de la maquette) */ #content-area .posts-carousel-module .module-head .module-filter{ display:none !important; } /* trait horizontal qui prolonge le titre jusqu'aux flèches (secbar) */ #content-area .posts-carousel-module .module-head::after{ content:"" !important; flex:1 1 auto !important; height:3px !important; background:var(--mc-ink) !important; } #content-area .posts-carousel-module .module-head h1{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:18px !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--mc-ink) !important; margin:0 !important; display:inline-flex !important; align-items:center; gap:12px; } #content-area .posts-carousel-module .module-head h1::before{ content:"" !important; width:14px; height:14px; background:var(--mc-tq); border:2px solid var(--mc-edge); flex:0 0 auto; } #content-area .posts-carousel-module .module-head h1 a{ color:inherit !important; } /* cartes du carrousel (fond clair même si Divi est en layout dark) */ #content-area .posts-carousel-module .carousel-item{ background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; border-radius:0 !important; overflow:hidden; } #content-area .posts-carousel-module .carousel-item .post-thumbnail{ border-bottom:2px solid var(--mc-edge) !important; display:block; } #content-area .posts-carousel-module .post-content-box{ padding:0 !important; background:none !important; } #content-area .posts-carousel-module .post-content{ padding:12px 14px 14px !important; background:none !important; } #content-area .posts-carousel-module .entry-title{ font-family:var(--mc-sans) !important; font-weight:700 !important; font-size:14px !important; line-height:1.25 !important; margin:0 0 6px !important; } #content-area .posts-carousel-module .entry-title a{ color:var(--mc-ink) !important; } #content-area .posts-carousel-module .carousel-item:hover .entry-title a{ color:var(--mc-tq-d) !important; } #content-area .posts-carousel-module .post-meta, #content-area .posts-carousel-module .post-meta .updated{ color:var(--mc-muted) !important; font-size:12px !important; } /* flèches blocky */ #content-area .posts-carousel-module .et-pb-slider-arrows a{ background:var(--mc-surface) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh-sm) !important; color:var(--mc-ink) !important; border-radius:0 !important; } #content-area .posts-carousel-module .et-pb-slider-arrows a:hover{ background:var(--mc-tq) !important; color:#06231E !important; } /* flèches du carrousel repositionnées en haut à droite de la section */ #content-area .posts-carousel-module{ position:relative !important; } /* Flèches : enfants de .carousel-items (positionné) → on les remonte de ~48px pour les caler dans la ligne du titre, à droite (au lieu de chevaucher les cartes). */ #content-area .posts-carousel-module .et-pb-slider-arrows{ position:absolute !important; top:-52px !important; right:0 !important; display:flex !important; gap:8px !important; margin:0 !important; width:auto !important; z-index:6 !important; } #content-area .posts-carousel-module .et-pb-slider-arrows a{ position:static !important; margin:0 !important; width:36px !important; height:36px !important; display:grid !important; place-items:center !important; opacity:1 !important; visibility:visible !important; } /* Le glyphe Divi vit dans a::before (police ETmodules). Le contient AUSSI un avec le texte "Previous"/"Next" (rendu en ETmodules 48px par Divi → pluie d'icônes si visible) : on le masque, et on met le ::before en flux, centré par la grille, couleur héritée du bloc. */ #content-area .posts-carousel-module .et-pb-slider-arrows a{ font-size:0 !important; /* tue tout texte résiduel dans le lien */ } #content-area .posts-carousel-module .et-pb-slider-arrows a span{ display:none !important; } #content-area .posts-carousel-module .et-pb-slider-arrows a::before{ position:static !important; display:block !important; margin:0 !important; padding:0 !important; line-height:1 !important; font-size:18px !important; color:inherit !important; opacity:1 !important; text-shadow:none !important; } /* ============================================================ FOND DU SITE — sol clair "Bloc par Bloc" (remplace la texture) ============================================================ */ #page-container{ background-color:var(--mc-page) !important; background-image: linear-gradient(45deg, rgba(30,36,34,.025) 25%, transparent 25%, transparent 75%, rgba(30,36,34,.025) 75%), linear-gradient(45deg, rgba(30,36,34,.025) 25%, transparent 25%, transparent 75%, rgba(30,36,34,.025) 75%) !important; background-size:40px 40px !important; background-position:0 0, 20px 20px !important; } /* en dark : sol sombre + damier en lignes claires */ [data-theme="dark"] #page-container{ background-color:#161D1B !important; background-image: linear-gradient(45deg, rgba(255,255,255,.022) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.022) 75%), linear-gradient(45deg, rgba(255,255,255,.022) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.022) 75%) !important; } /* ============================================================ TITRE DE SECTION "secbar" — ex. H2 "Toutes les actualités" Markup attendu :

Toutes les actualités

============================================================ */ #content-area .mcfr-secbar, .mcfr-secbar{ display:flex !important; align-items:center !important; gap:12px !important; font-family:var(--mc-display) !important; font-weight:700 !important; font-size:18px !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--mc-ink) !important; line-height:1 !important; margin:36px 0 16px !important; } .mcfr-secbar::before{ content:"" !important; flex:0 0 auto; width:16px; height:16px; background:var(--mc-tq); border:2px solid var(--mc-edge); } .mcfr-secbar::after{ content:"" !important; flex:1 1 auto; height:3px; background:var(--mc-ink); } /* ============================================================ ARTICLE (single) — EN-TÊTE + HERO + PARTAGE (skin CSS preview) Cible .single-post-module (page article seule). ============================================================ */ /* en-tête aligné à gauche (comme la maquette, au lieu du centrage Extra) */ #content-area .single-post-module .post-header{ text-align:left !important; padding:8px 0 14px !important; } #content-area .single-post-module h1.entry-title{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:clamp(22px, 2.7vw, 30px) !important; line-height:1.12 !important; letter-spacing:.004em !important; color:var(--mc-ink) !important; margin:0 0 12px !important; } /* méta "Publié par … le …" (les boutons Google gardent leur style article.css) */ #content-area .single-post-module .mcfr-meta-row{ justify-content:flex-start !important; } #content-area .single-post-module .mcfr-meta-published{ font-family:var(--mc-sans) !important; font-size:13px !important; color:var(--mc-muted) !important; } /* hero : image à la une encadrée bloc */ #content-area .single-post-module .post-thumbnail.header{ border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; margin:6px 0 24px !important; background:var(--mc-surface) !important; overflow:hidden; border-radius:0 !important; } #content-area .single-post-module .post-thumbnail.header img{ display:block; width:100%; } /* On remplace le partage natif d'Extra (bas d'article) par le bloc custom "bloc-partage.html" placé en haut → on masque celui du footer pour éviter le doublon. (Retire cette règle si tu veux garder aussi le partage du bas.) */ #content-area .single-post-module .post-footer .ed-social-share-icons{ display:none !important; } /* (style conservé au cas où le partage natif serait réactivé) */ #content-area .single-post-module .ed-social-share-icons{ display:flex !important; align-items:center !important; gap:9px !important; flex-wrap:wrap !important; } #content-area .single-post-module .ed-social-share-icons .share-title{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:11px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--mc-muted) !important; margin:0 6px 0 0 !important; } #content-area .single-post-module .ed-social-share-icons a.social-share-link{ display:grid !important; place-items:center !important; width:38px !important; height:38px !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh-sm) !important; background:var(--mc-strong) !important; border-radius:0 !important; transition:transform .08s ease, box-shadow .08s ease; } #content-area .single-post-module .ed-social-share-icons a.social-share-link:hover{ transform:translate(-1px,-1px) !important; box-shadow:4px 4px 0 var(--mc-shadow) !important; } #content-area .single-post-module .ed-social-share-icons a .et-extra-icon{ color:#fff !important; } /* couleurs par réseau (sélecteur :has, navigateurs récents) */ #content-area .single-post-module a.social-share-link:has(.et-extra-icon-facebook){ background:#1877F2 !important; } #content-area .single-post-module a.social-share-link:has(.et-extra-icon-twitter){ background:#16181C !important; } #content-area .single-post-module a.social-share-link:has(.et-extra-icon-linkedin){ background:#0A66C2 !important; } #content-area .single-post-module a.social-share-link:has(.et-extra-icon-basic_email){ background:#3C4742 !important; } #content-area .single-post-module a.social-share-link:has(.et-extra-icon-basic_print){ background:#3C4742 !important; } /* boutons Google "Suivez-nous / Favoris" → style bloc (override article.css) */ #content-area .single-post-module .mcfr-gbtn{ font-family:var(--mc-sans) !important; font-weight:700 !important; font-size:12px !important; letter-spacing:.02em !important; text-transform:none !important; border:2px solid var(--mc-edge) !important; border-radius:0 !important; box-shadow:var(--mc-sh-sm) !important; padding:7px 12px !important; transition:transform .08s ease, box-shadow .08s ease !important; } #content-area .single-post-module .mcfr-gbtn--primary{ background:var(--mc-tq) !important; color:#06231E !important; } #content-area .single-post-module .mcfr-gbtn--secondary{ background:var(--mc-surface) !important; color:var(--mc-ink) !important; } #content-area .single-post-module .mcfr-gbtn:hover{ transform:translate(-1px,-1px) !important; box-shadow:4px 4px 0 var(--mc-shadow) !important; } #content-area .single-post-module .mcfr-gbtn:active{ transform:translate(2px,2px) !important; box-shadow:1px 1px 0 var(--mc-shadow) !important; } /* Zone de lecture sur un PANNEAU UNI "feuille" (accessibilité + convention : pas de texte sur fond texturé). Token --mc-paper → blanc en clair, #1B2320 en dark. Bordure nette + ombre = panneau volontaire (pas une coupure brute). Le sol texturé ne reste visible que dans les marges. */ #content-area .single-post-module{ background:var(--mc-paper) !important; border:2px solid var(--mc-edge) !important; box-shadow:var(--mc-sh) !important; border-radius:0 !important; padding:20px 16px 24px !important; margin-top:24px !important; } #content-area .single-post-module .post-wrap{ background:transparent !important; } /* Largeur de lecture calée sur la prod (~828px). Extra met 60px sur .post-wrap ; avec les 16px du panneau on vise 44px ici (16+44=60, comme la prod). */ #content-area .single-post-module .post-wrap{ padding-left:44px !important; padding-right:44px !important; } @media (max-width:600px){ #content-area .single-post-module{ padding:16px 12px 20px !important; } /* mobile : pleine largeur (le panneau fournit la marge) */ #content-area .single-post-module .post-wrap{ padding-left:0 !important; padding-right:0 !important; } } /* ============================================================ BADGES CATÉGORIE (affichage activé dans le BO) — pastille bloc Défensif : couvre les markups Extra usuels. ============================================================ */ #content-area .post .post-meta a[rel~="category"], #content-area .post-module .post a[rel~="category"], #content-area .post .post-categories a, #content-area .post .cat-links a, #content-area .post .post-meta-category a{ display:inline-block !important; font-family:var(--mc-sans) !important; font-weight:700 !important; font-size:11px !important; text-transform:uppercase !important; letter-spacing:.03em !important; line-height:1 !important; color:#06231E !important; background:var(--mc-tq) !important; padding:4px 8px !important; margin:0 5px 5px 0 !important; border:2px solid var(--mc-edge) !important; border-radius:0 !important; text-decoration:none !important; } #content-area .post .post-meta a[rel~="category"]:hover, #content-area .post-module .post a[rel~="category"]:hover, #content-area .post .post-categories a:hover, #content-area .post .cat-links a:hover{ background:var(--mc-tq-l) !important; } /* liste secondaire : pas de grosse carte, séparateur pointillé */ #content-area .post-module .posts-list li article.post{ border:0 !important; box-shadow:none !important; } #content-area .post-module .posts-list li article.post:hover{ transform:none !important; box-shadow:none !important; } #content-area .post-module .posts-list > li{ border-bottom:1px dotted var(--mc-line-2) !important; } #content-area .post-module .posts-list .entry-title{ font-family:var(--mc-sans) !important; font-weight:600 !important; font-size:12.5px !important; line-height:1.25 !important; } #content-area .post-module .posts-list .entry-title a{ color:var(--mc-ink-2) !important; } #content-area .post-module .posts-list li:hover .entry-title a{ color:var(--mc-tq-d) !important; } /* === Cartes catégorie : tailles conformes maquette (.hm-cat) === */ /* titre de l'article principal = SANS 15px (pas Pixelify, pas géant) */ #content-area .et_pb_posts_0 .main-post .post-title, #content-area .et_pb_posts_0 .main-post h2.entry-title, #content-area .et_pb_posts_1 .main-post .post-title, #content-area .et_pb_posts_1 .main-post h2.entry-title, #content-area .et_pb_posts_2 .main-post .post-title, #content-area .et_pb_posts_2 .main-post h2.entry-title{ font-family:var(--mc-sans) !important; font-weight:700 !important; font-size:15px !important; line-height:1.22 !important; margin:0 0 6px !important; } /* extrait de l'article principal plus compact */ #content-area .et_pb_posts_0 .main-post .excerpt, #content-area .et_pb_posts_0 .main-post .entry-summary, #content-area .et_pb_posts_1 .main-post .excerpt, #content-area .et_pb_posts_1 .main-post .entry-summary, #content-area .et_pb_posts_2 .main-post .excerpt, #content-area .et_pb_posts_2 .main-post .entry-summary{ font-size:12.5px !important; line-height:1.5 !important; } /* sous-article : vignette + titre alignés côte à côte (maquette .hm-cat-li) */ #content-area .post-module .posts-list li article, #content-area .post-module .posts-list li article.title-thumb-hover{ display:flex !important; align-items:center !important; gap:11px !important; position:static !important; } #content-area .post-module .posts-list .post-thumbnail{ flex:0 0 64px !important; width:64px !important; height:48px !important; margin:0 !important; position:static !important; float:none !important; display:block !important; } #content-area .post-module .posts-list .post-content{ flex:1 1 auto !important; } #content-area .post-module .posts-list .post-thumbnail img, #content-area .post-module .posts-list img{ width:64px !important; height:48px !important; object-fit:cover !important; border:2px solid var(--mc-edge) !important; } #content-area .post-module .posts-list .post-content{ min-width:0 !important; padding:0 !important; } /* pas de date sur les sous-articles (comme la maquette) */ #content-area .post-module .posts-list .post-meta{ display:none !important; } /* ============================================================ UNIFORMISATION carrousel + pagination (= assets/archive.css) Aligné sur les catégories. Placé en fin de fichier pour primer sur les blocs carrousel/pagination définis plus haut. ============================================================ */ /* carrousel : gouttière + alignement (Divi pose margin-left:10px sur la vignette + padding sur le slide → cartes décalées vs titre/flèches). */ #content-area .posts-carousel-module .carousel-group{ padding:0 !important; margin:0 !important; } #content-area .posts-carousel-module .carousel-item, #content-area .posts-carousel-module .carousel-item:nth-child(4n), #content-area .posts-carousel-module .carousel-item:last-child{ padding:0 7px !important; box-sizing:border-box !important; /* gouttière 7px identique sur les 4 */ border:0 !important; background:none !important; box-shadow:none !important; overflow:visible !important; } #content-area .posts-carousel-module .carousel-item .post-thumbnail{ display:block !important; margin:0 !important; border:2px solid var(--mc-edge) !important; box-shadow:4px 0 0 var(--mc-shadow) !important; background:var(--mc-surface) !important; } #content-area .posts-carousel-module .post-content-box{ margin:0 !important; border:2px solid var(--mc-edge) !important; border-top:0 !important; background:var(--mc-surface) !important; box-shadow:4px 4px 0 var(--mc-shadow) !important; padding:0 !important; } #content-area .posts-carousel-module .post-content{ padding:10px 13px 12px !important; } #content-area .posts-carousel-module .entry-title{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:14.5px !important; line-height:1.12 !important; margin:0 0 5px !important; } /* titre aligné sur les cartes (7px) + ligne ::after stoppée avant les flèches (92px) */ #content-area .posts-carousel-module .module-head{ padding:0 92px 0 7px !important; } #content-area .posts-carousel-module .et-pb-slider-arrows{ right:7px !important; } /* pagination : espacement + légende "Page X sur Y" (ajoutée par archive.js) */ #main-content ul.pagination, #content-area ul.pagination{ gap:12px !important; margin-bottom:10px !important; } .mcfr-pageinfo{ text-align:center !important; margin:0 0 6px !important; font-family:var(--mc-sans) !important; font-size:12.5px !important; color:var(--mc-muted) !important; } .mcfr-pageinfo b{ color:var(--mc-ink) !important; font-weight:700 !important; } /* ============================================================ MODULE À ONGLETS (tabbed-post-module : "Mod Génération Monde / Cheats / Mobs / Véhicule" en bas de catégorie) — reskin Bloc par Bloc. Avant : barre accent rose + onglets et fonds blancs hérités d'Extra (criant en dark). Structure : .tabs > ul > li(.active) > a + .tab-nav, puis .tab-contents > .tab-content > .main-post + ul.posts-list. ============================================================ */ #content-area .tabbed-post-module{ border:2px solid var(--mc-edge) !important; border-top:2px solid var(--mc-edge) !important; /* tue la barre accent 6px rose */ background:var(--mc-surface) !important; box-shadow:var(--mc-sh) !important; border-radius:0 !important; } /* barre d'onglets */ #content-area .tabbed-post-module .tabs{ background:var(--mc-bone) !important; border:0 !important; border-bottom:2px solid var(--mc-edge) !important; } #content-area .tabbed-post-module .tabs ul li{ border:0 !important; border-right:1px dotted var(--mc-line-2) !important; background:none !important; background-image:none !important; } /* ⚠️ les onglets sont des
  • (PAS des ) ; la couleur accent par catégorie d'Extra (rose/rouge/or) vit sur le li/span → on force les deux */ #content-area .tabbed-post-module .tabs ul li, #content-area .tabbed-post-module .tabs ul li a, #content-area .tabbed-post-module .tabs ul li span, #content-area .tabbed-post-module .tabs ul li.et-accent-color-parent-term, #content-area .tabbed-post-module .tabs ul li.et-accent-color-parent-term span{ font-family:var(--mc-display) !important; font-weight:700 !important; font-size:13px !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--mc-ink-2) !important; background:none !important; cursor:pointer; } #content-area .tabbed-post-module .tabs ul li:hover, #content-area .tabbed-post-module .tabs ul li:hover span, #content-area .tabbed-post-module .tabs ul li a:hover{ color:var(--mc-tq-d) !important; } #content-area .tabbed-post-module .tabs ul li.active{ background:var(--mc-tq) !important; } #content-area .tabbed-post-module .tabs ul li.active, #content-area .tabbed-post-module .tabs ul li.active span, #content-area .tabbed-post-module .tabs ul li.active a, #content-area .tabbed-post-module .tabs ul li.et-accent-color-parent-term.active span{ color:#06231E !important; } /* aucune forme parasite (biseaux/encoches/triangles Extra) sur les onglets */ #content-area .tabbed-post-module .tabs ul li::before, #content-area .tabbed-post-module .tabs ul li::after, #content-area .tabbed-post-module .tabs ul li span::before, #content-area .tabbed-post-module .tabs ul li span::after{ content:none !important; display:none !important; } #content-area .tabbed-post-module .tabs .tab-nav span.arrow{ background:var(--mc-surface) !important; color:var(--mc-ink) !important; border:0 !important; border-left:2px solid var(--mc-edge) !important; opacity:1 !important; } #content-area .tabbed-post-module .tabs .tab-nav span.arrow:hover{ background:var(--mc-tq) !important; color:#06231E !important; } /* contenus : fonds neutralisés (suivent la carte) */ #content-area .tabbed-post-module .tab-contents, #content-area .tabbed-post-module .tab-content{ background:transparent !important; } /* article principal (gauche) */ #content-area .tabbed-post-module .main-post .post, #content-area .tabbed-post-module .main-post article{ background:none !important; border:0 !important; box-shadow:none !important; } #content-area .tabbed-post-module .main-post .featured-image{ border-bottom:2px solid var(--mc-edge) !important; display:block; } #content-area .tabbed-post-module .main-post .post-title, #content-area .tabbed-post-module .main-post h2.entry-title, #content-area .tabbed-post-module .main-post .post-title a, #content-area .tabbed-post-module .main-post h2.entry-title a{ font-family:var(--mc-sans) !important; font-weight:700 !important; font-size:15px !important; line-height:1.22 !important; color:var(--mc-ink) !important; } #content-area .tabbed-post-module .main-post .post-title a:hover{ color:var(--mc-tq-d) !important; } #content-area .tabbed-post-module .main-post .excerpt, #content-area .tabbed-post-module .main-post .entry-summary{ font-size:12.5px !important; line-height:1.5 !important; color:var(--mc-ink-2) !important; } /* liste secondaire (droite) : comme les cartes catégorie de la HP */ #content-area .tabbed-post-module .posts-list{ background:transparent !important; padding:4px 0 6px !important; } #content-area .tabbed-post-module .posts-list > li{ background:none !important; border:0 !important; border-bottom:1px dotted var(--mc-line-2) !important; } #content-area .tabbed-post-module .posts-list li article{ display:flex !important; align-items:center !important; gap:11px !important; position:static !important; background:none !important; border:0 !important; box-shadow:none !important; } #content-area .tabbed-post-module .posts-list .post-thumbnail{ flex:0 0 64px !important; width:64px !important; height:48px !important; margin:0 !important; position:static !important; float:none !important; display:block !important; } #content-area .tabbed-post-module .posts-list .post-thumbnail img, #content-area .tabbed-post-module .posts-list img{ width:64px !important; height:48px !important; object-fit:cover !important; border:2px solid var(--mc-edge) !important; } #content-area .tabbed-post-module .posts-list .post-content{ flex:1 1 auto !important; min-width:0 !important; padding:0 !important; background:none !important; } #content-area .tabbed-post-module .posts-list .entry-title, #content-area .tabbed-post-module .posts-list .entry-title a{ font-family:var(--mc-sans) !important; font-weight:600 !important; font-size:12.5px !important; line-height:1.25 !important; color:var(--mc-ink-2) !important; } #content-area .tabbed-post-module .posts-list li:hover .entry-title a{ color:var(--mc-tq-d) !important; } #content-area .tabbed-post-module .posts-list .post-meta{ display:none !important; }