/*
Theme Name: GeneratePress CLC WEB CHILD THEME 2 (Refonte 2026)
Theme URI: https://www.justcolor.net/
Description: Thème enfant GeneratePress v2 — refonte 2026 de justcolor.net (design tokens + composants .jc-*). Réutilise toute la logique commune (wp-content/common). Activable site par site.
Author: CLC Web
Author URI: https://www.justcolor.net/
Template: generatepress
Version: 2.0.0
Text Domain: clcweb
*/
/* =====================================================================
JC REFONTE 2026 — DESIGN LAYER
Tokens + base + composants partagés. Les classes .jc-* portent tout le
nouveau design ; le CSS LEGACY (plus bas) reste actif pour les templates
pas encore portés et sera purgé en fin de refonte.
Voir aussi: assets/js/jc-auth-modal.js, assets/js/jc-nav.js
===================================================================== */
/* ---------- A1. Design tokens ---------- */
:root {
/* Couleurs marque */
--jc-blue: #12347e; /* bleu principal (top bar, footer, hero) */
--jc-blue-2: #1e73be; /* source unique : liens et accents interactifs CLA / CLE / MDL */
--jc-blue-deep: #1b47a6; /* dégradé hero */
--jc-accent: #ffd86b; /* jaune (CTA, "Kids") */
--jc-accent-2: #ffce47; /* jaune hover */
--jc-gold: #d79a14; /* accent interactif chaud sur fond clair */
--jc-tag-bg: #ffecb2;
--jc-tag-hover: #f9dc83;
--jc-tag-border: #f0d77f;
--jc-tag-border-hover: #dfbd55;
--jc-orange: #f9a32b;
/* Couleur "Adult" dédiée dans la nav (cross-link depuis le site enfant) */
--jc-adult: #f56b91;
/* Neutres */
--jc-ink: #1c2030; /* texte principal */
--jc-muted: #6b6f7d; /* texte secondaire */
--jc-nav: #23262e; /* barre de nav sombre */
--jc-nav-link: #cdd0d8; /* liens nav inactifs */
--jc-line: #e6e8f0; /* bordures cartes */
--jc-bg: #ffffff;
--jc-bg-soft: #eef2fb; /* fonds chips / zones douces */
--jc-bg-soft-2: #eef4ff;
/* Panneaux neutres : source unique pour les blocs eBook, liens et promos. */
--jc-panel-gray: #f2f3f5;
--jc-panel-border:#e1e4eb;
--jc-panel-radius:18px;
--jc-panel-shadow:0 18px 44px -36px rgba(20, 30, 70, .42);
--jc-footer-text: #c7d2ee; /* texte clair sur fond bleu footer */
--jc-footer-meta: #aebbe0;
/* Typo */
--jc-font-head: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--jc-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* Rayons */
--jc-r-sm: 7px;
--jc-r-md: 11px;
--jc-r-lg: 14px;
--jc-r-xl: 18px;
--jc-r-pill: 999px;
/* Ombres */
--jc-shadow-card: 0 10px 26px -20px rgba(20,30,70,.4);
--jc-shadow-pop: 0 18px 50px -24px rgba(20,30,70,.5);
/* Layout */
--jc-container: 1180px;
--jc-page-container: 1500px;
--jc-gutter: 28px;
/* Breakpoints (référence — utilisés dans les @media) : 980 / 760 / 520 */
}
/* Déclinaison par famille de site (classes posées par jc_add_family_body_class).
CLA = bleu (défaut). CLE (enfant) accent plus joueur. MDL (mandalas) à valider. */
body.jc-family-cle {
--jc-blue: #1f6fb2;
--jc-blue-deep: #2a86cf;
--jc-accent: #ffd247;
}
body.jc-family-mdl {
--jc-blue: #5b3aa6; /* provisoire, design MDL à valider */
--jc-blue-deep: #6f49c4;
--jc-accent: #ffd86b;
}
/* ---------- A1. Base / reset léger (scopé pour ne pas casser le legacy) ---------- */
body.jc-v2 {
font-family: var(--jc-font-body);
color: var(--jc-ink);
background: var(--jc-bg);
}
.jc-v2 *, .jc-v2 *::before, .jc-v2 *::after { box-sizing: border-box; }
/* Conteneur centré standard */
.jc-container {
max-width: var(--jc-container);
margin: 0 auto;
padding-left: var(--jc-gutter);
padding-right: var(--jc-gutter);
}
/* ---------- A1. Overrides GeneratePress (neutraliser le shell parent) ---------- */
/* Le thème v2 fournit son propre header/footer/markup pleine largeur.
On retire les contraintes du conteneur GP pour les pages portées. */
.jc-v2 #page.grid-container,
.jc-v2 .grid-container { max-width: none; padding: 0; }
.jc-v2 #content.site-content { padding: 0; }
.jc-v2 .site-header,
.jc-v2 #masthead { height: auto; }
/* ---------- A2. Header — identité, recherche et actions ---------- */
.jc-v2 .jc-topbar {
position: relative;
z-index: 310;
background: linear-gradient(115deg, var(--jc-blue) 0%, var(--jc-blue-deep) 100%);
padding: 18px 0;
box-shadow: inset 0 -1px rgba(255,255,255,.08);
}
/* Le header reprend exactement le bleu du menu lateral de chaque famille. */
body.jc-v2.jc-family-cla .jc-topbar {
background: #0b518d !important;
}
body.jc-v2.jc-family-cla {
--jc-blue: #0b518d;
--jc-blue-deep: #0b518d;
}
body.jc-v2.jc-family-cle .jc-topbar {
background: #016183 !important;
}
body.jc-v2.jc-family-cle {
--jc-blue: #016183;
--jc-blue-deep: #016183;
}
/* Header et footer utilisent exactement le meme bleu par famille. */
body.jc-v2.jc-family-cla .site-footer,
body.jc-v2.jc-family-cla .jc-footer {
background: #0b518d !important;
}
body.jc-v2.jc-family-cle .site-footer,
body.jc-v2.jc-family-cle .jc-footer {
background: #016183 !important;
}
.jc-v2 .jc-topbar-inner {
max-width: var(--jc-container);
display: grid;
grid-template-columns: minmax(190px, 220px) minmax(360px, 680px) max-content;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 4vw, 68px);
}
.jc-v2 .jc-logo { text-decoration: none; flex: 0 0 auto; line-height: 0; }
.jc-v2 .jc-logo img {
display: block;
width: 210px;
max-width: 100%;
height: auto;
filter: drop-shadow(0 2px 5px rgba(5,20,60,.16));
}
/* Barre de recherche */
.jc-v2 .jc-search {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 0;
background: #fff;
border: 1px solid rgba(255,255,255,.5);
border-radius: 14px;
padding: 5px 5px 5px 17px;
height: 54px;
box-shadow: 0 8px 24px rgba(7,26,76,.18);
transition: box-shadow .18s ease, transform .18s ease;
}
.jc-v2 .jc-search:focus-within {
box-shadow: 0 0 0 3px rgba(255,216,107,.72), 0 12px 28px rgba(7,26,76,.24);
}
.jc-v2 .jc-search-ico { flex: 0 0 auto; color: #788194; }
.jc-v2 .jc-search-input {
border: 0 !important; outline: 0 !important;
box-shadow: none !important;
flex: 1 1 auto;
min-width: 0;
font-family: inherit;
font-size: 15.5px;
font-weight: 500;
color: var(--jc-ink);
background: transparent !important;
padding: 0 14px;
height: 42px;
}
.jc-v2 .jc-search-input::placeholder {
color: #858b99;
opacity: 1;
}
.jc-v2 .jc-search-btn {
flex: 0 0 auto;
border: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: var(--jc-accent);
color: var(--jc-ink);
font-family: var(--jc-font-head);
gap: 8px;
font-weight: 700;
font-size: 14px;
height: 42px;
padding: 0 20px;
border-radius: 10px;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .jc-search-btn:hover {
background: var(--jc-accent-2);
box-shadow: 0 5px 14px rgba(174, 125, 0, .24);
}
.jc-v2 .jc-search-btn:active { transform: translateY(1px); }
/* Actions (login + langue) */
.jc-v2 .jc-header-actions {
grid-column: 3;
position: static !important;
right: auto !important;
top: auto !important;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 0;
flex: 0 0 auto;
}
.jc-v2 .jc-header-lang-switch {
float: none;
padding: 0;
}
.jc-v2 .jc-header-lang-switch a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 62px;
height: 44px;
padding: 0 12px;
color: #fff;
text-decoration: none;
font-family: var(--jc-font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
border: 1px solid rgba(255,255,255,.28);
border-radius: 11px;
background: rgba(255,255,255,.08);
transition: background .15s ease, border-color .15s ease;
}
.jc-v2 .jc-header-lang-switch a:hover {
color: #fff;
background: rgba(255,255,255,.15);
border-color: rgba(255,255,255,.46);
}
.jc-v2 .jc-header-lang-flag { width: 22px; height: 11px; object-fit: cover; border-radius: 2px; }
/* Bouton auth (rendu par jc_header_auth_control / jc-user-accounts.php) */
.jc-v2 .jc-auth-control .jc-auth-open,
.jc-v2 .jc-auth-control .jc-auth-menu-toggle {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid rgba(255,255,255,.28);
background: rgba(255,255,255,.08);
color: #fff;
font-family: var(--jc-font-head);
font-weight: 600;
font-size: 13px;
height: 44px;
padding: 0 15px;
border-radius: 11px;
cursor: pointer;
}
.jc-v2 .jc-auth-control .jc-auth-open:hover,
.jc-v2 .jc-auth-control .jc-auth-menu-toggle:hover {
color: #fff;
background: rgba(255,255,255,.15);
border-color: rgba(255,255,255,.46);
}
.jc-v2 .jc-auth-control { position: relative; }
.jc-v2 .jc-auth-menu-toggle img { border-radius: 50%; }
/* ---------- A3. Nav — barre sombre (menu WP rendu par GeneratePress) ---------- */
/* GP rend la nav primaire en .main-navigation > .inside-navigation > #primary-menu.
On restyle ce markup en barre sombre conforme à la maquette. */
.jc-v2 .main-navigation {
background: var(--jc-nav);
box-shadow: 0 3px 14px rgba(16,22,40,.12);
}
.jc-v2 .main-navigation .inside-navigation {
max-width: var(--jc-container);
margin: 0 auto;
padding: 0 16px;
display: flex;
align-items: center;
}
.jc-v2 .main-navigation .main-nav { flex: 1 1 auto; }
.jc-v2 .main-navigation .main-nav > ul {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: center;
}
.jc-v2 .main-navigation .main-nav > ul::-webkit-scrollbar { display: none; }
.jc-v2 .main-navigation .main-nav ul li { white-space: nowrap; }
.jc-v2 .main-navigation .main-nav ul li a {
color: var(--jc-nav-link);
font-family: var(--jc-font-head);
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
padding: 17px clamp(12px, 1.25vw, 20px) 15px;
line-height: 1;
border-bottom: 3px solid transparent;
transition: color .15s ease;
}
.jc-v2 .main-navigation .main-nav ul li a:hover,
.jc-v2 .main-navigation .main-nav ul li.sfHover > a { color: #fff; }
/* Item actif : soulignement bleu */
.jc-v2 .main-navigation .main-nav ul li.current-menu-item > a,
.jc-v2 .main-navigation .main-nav ul li.current-menu-ancestor > a {
color: #fff;
font-weight: 600;
border-bottom-color: var(--jc-blue-2);
}
/* Items spéciaux via classes CSS posées dans Admin > Menus :
.jc-nav-kids -> "Kids" en jaune
.jc-nav-adult -> "Adult" (cross-link depuis le site enfant) dans sa couleur dédiée */
.jc-v2 .main-navigation .main-nav ul li.jc-nav-kids > a { color: var(--jc-accent); font-weight: 700; }
.jc-v2 .main-navigation .main-nav ul li.jc-nav-kids > a:hover { color: var(--jc-accent-2); }
.jc-v2 .main-navigation .main-nav ul li.jc-nav-adult > a { color: var(--jc-adult); font-weight: 700; }
.jc-v2 .main-navigation .main-nav ul li.jc-nav-adult > a:hover { filter: brightness(1.1); }
/* Sous-menus (dropdown "Categories") */
.jc-v2 .main-navigation .main-nav ul ul {
background: var(--jc-nav);
box-shadow: var(--jc-shadow-pop);
border-radius: 0 0 var(--jc-r-md) var(--jc-r-md);
padding: 6px 0;
min-width: 220px;
}
.jc-v2 .main-navigation .main-nav ul ul li a {
padding: 10px 18px;
border-bottom: 0;
font-weight: 500;
}
.jc-v2 .main-navigation .main-nav ul ul li a:hover { background: rgba(255,255,255,.06); }
/* ---------- A4. Footer (fond bleu, 4 colonnes) ---------- */
.jc-v2 .jc-footer {
background: var(--jc-blue);
color: var(--jc-footer-text);
padding: 34px 0 30px;
}
.jc-v2 .jc-footer a { color: var(--jc-footer-text); text-decoration: none; }
.jc-v2 .jc-footer a:hover { color: #fff; }
.jc-v2 .jc-footer-cols {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 34px;
}
.jc-v2 .jc-footer-logo { display: inline-block; line-height: 0; margin-bottom: 12px; }
.jc-v2 .jc-footer-logo img { width: 136px; height: auto; }
.jc-v2 .jc-footer-tagline {
margin: 0;
max-width: 260px;
font-size: 13px;
line-height: 1.6;
color: var(--jc-footer-meta);
}
.jc-v2 .jc-footer-h {
font-family: var(--jc-font-head);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .05em;
color: #fff;
margin: 0 0 14px;
}
.jc-v2 .jc-footer-links {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
.jc-v2 .jc-footer-links a { font-size: 13.5px; }
.jc-v2 .jc-footer-links .menu-item-has-children > .sub-menu { display: none; } /* pas de sous-menus en footer */
.jc-v2 .jc-footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 30px;
padding-top: 20px;
}
.jc-v2 .jc-footer-copy { color: var(--jc-footer-meta); font-size: 13px; }
.jc-v2 .jc-footer-langs {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 8px;
margin-top: 18px;
}
.jc-v2 .jc-footer-flag { display: inline-flex; line-height: 0; }
.jc-v2 .jc-footer-flag img { vertical-align: middle; border-radius: 2px; }
.jc-v2 .jc-footer-disclaimer {
margin-top: 24px;
font-size: 13px;
line-height: 1.6;
color: var(--jc-footer-meta);
}
.jc-v2 .jc-footer-disclaimer a { text-decoration: underline; }
/* ---------- A5. Composants partagés (consommés par les templates Partie B) ---------- */
/* Titres */
.jc-v2 .jc-page h1,
.jc-v2 .jc-h1 { font-family: var(--jc-font-head); font-weight: 800; font-size: 32px; line-height: 1.12; color: var(--jc-ink); margin: 0 0 12px; }
.jc-v2 .jc-h2 { font-family: var(--jc-font-head); font-weight: 800; font-size: 24px; color: var(--jc-ink); margin: 0; }
/* Section avec en-tête (titre + lien "voir tout" + barre d'accent) */
.jc-v2 .jc-section { margin: 30px 0 40px; }
.jc-v2 .jc-section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; margin: 0 0 6px;
}
.jc-v2 .jc-section-head .jc-see-all {
font-family: var(--jc-font-head); font-weight: 600; font-size: 14px;
color: var(--jc-blue-2); text-decoration: none; white-space: nowrap;
}
.jc-v2 .jc-accent-bar { height: 3px; width: 42px; background: var(--jc-blue-2); border-radius: 3px; margin: 8px 0 22px; }
/* Grilles responsive */
.jc-v2 .jc-grid { display: grid; gap: 18px; }
.jc-v2 .jc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.jc-v2 .jc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.jc-v2 .jc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.jc-v2 .jc-grid-5 { grid-template-columns: repeat(5, 1fr); }
.jc-v2 .jc-grid-6 { grid-template-columns: repeat(6, 1fr); }
.jc-v2 .jc-grid-auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Carte (catégorie / coloriage) */
.jc-v2 .jc-card {
background: #fff;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg);
overflow: hidden;
box-shadow: var(--jc-shadow-card);
transition: transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .jc-card:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-pop); }
.jc-v2 .jc-card-img { display: block; overflow: hidden; line-height: 0; }
.jc-v2 .jc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-v2 .jc-card-img--cat { height: 130px; }
.jc-v2 .jc-card-img--square { aspect-ratio: 1 / 1; }
.jc-v2 .jc-card-body { padding: 14px 16px 16px; }
.jc-v2 .jc-card-title {
font-family: var(--jc-font-head); font-weight: 700; font-size: 16px;
color: var(--jc-ink); text-decoration: none; display: block;
}
.jc-v2 a.jc-card-title:hover { color: var(--jc-blue-2); }
.jc-v2 .jc-card-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--jc-muted); }
.jc-v2 .jc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Chips / tags */
.jc-v2 .jc-chip {
display: inline-block; text-decoration: none;
font-family: var(--jc-font-body); font-weight: 600; font-size: 12px;
color: var(--jc-blue-2); background: var(--jc-bg-soft);
padding: 4px 10px; border-radius: var(--jc-r-pill);
}
.jc-v2 .jc-chip:hover { background: #e2ebfb; }
/* Boutons */
.jc-v2 .jc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--jc-font-head); font-weight: 700; font-size: 15px;
text-decoration: none; cursor: pointer;
padding: 14px 26px; border-radius: var(--jc-r-md); border: 0;
transition: filter .15s ease, background .15s ease;
}
.jc-v2 .jc-btn-accent { background: var(--jc-accent); color: var(--jc-blue); }
.jc-v2 .jc-btn-accent:hover { background: var(--jc-accent-2); }
.jc-v2 .jc-btn-primary { background: var(--jc-blue-2); color: #fff; }
.jc-v2 .jc-btn-primary:hover { filter: brightness(1.06); }
.jc-v2 .jc-btn-soft { background: var(--jc-bg-soft); color: var(--jc-blue-2); font-weight: 600; }
.jc-v2 .jc-btn-soft:hover { background: #e2ebfb; }
.jc-v2 .jc-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.4); font-weight: 600; }
.jc-v2 .jc-btn-ghost:hover { background: rgba(255,255,255,.2); }
/* Hero (homepage / landings) */
.jc-v2 .jc-hero {
background: linear-gradient(180deg, var(--jc-blue), var(--jc-blue-deep));
padding: 54px 40px 60px; text-align: center; color: #fff;
}
.jc-v2 .jc-hero h1 { font-family: var(--jc-font-head); font-weight: 800; font-size: 46px; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.01em; color: #fff; }
.jc-v2 .jc-hero p { max-width: 640px; margin: 0 auto 26px; font-size: 17px; line-height: 1.6; color: var(--jc-footer-text); }
.jc-v2 .jc-hero-eyebrow {
display: inline-block; background: rgba(255,255,255,.14); color: #dbe4fb;
font-family: var(--jc-font-head); font-weight: 600; font-size: 12px;
letter-spacing: .1em; text-transform: uppercase;
padding: 6px 16px; border-radius: var(--jc-r-pill); margin-bottom: 18px;
}
.jc-v2 .jc-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Badge */
.jc-v2 .jc-badge {
display: inline-block; font-family: var(--jc-font-head); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .06em;
color: var(--jc-blue-2); background: var(--jc-bg-soft);
padding: 4px 10px; border-radius: var(--jc-r-pill);
}
/* Fil d'ariane */
.jc-v2 .jc-breadcrumb { font-size: 13px; color: var(--jc-muted); padding: 16px 0 0; }
.jc-v2 .jc-breadcrumb a { color: var(--jc-blue-2); text-decoration: none; }
.jc-v2 .jc-breadcrumb a:hover { text-decoration: underline; }
/* Mise en page main + sidebar */
.jc-v2 .jc-page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.jc-v2 .jc-page-main { min-width: 0; }
.jc-v2 .jc-sidebar { position: sticky; top: 16px; }
/* Sidebar arbre catégories (details/summary) */
.jc-v2 .jc-side-tree summary {
cursor: pointer; list-style: none;
font-family: var(--jc-font-head); font-weight: 600; font-size: 14.5px;
color: var(--jc-ink); padding: 10px 0;
display: flex; align-items: center; justify-content: space-between;
}
.jc-v2 .jc-side-tree summary::-webkit-details-marker { display: none; }
.jc-v2 .jc-side-links { list-style: none; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--jc-line); display: flex; flex-direction: column; gap: 8px; }
.jc-v2 .jc-side-links a { color: var(--jc-muted); text-decoration: none; font-size: 13.5px; }
.jc-v2 .jc-side-links a:hover { color: var(--jc-blue-2); }
/* Sections promo (ebook / outil online / cross-site) */
.jc-v2 .jc-promo {
background: var(--jc-bg-soft-2);
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-xl);
padding: 28px;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center;
margin: 30px 0;
}
.jc-v2 .jc-promo h2 { font-family: var(--jc-font-head); font-weight: 800; font-size: 24px; color: var(--jc-ink); margin: 0 0 10px; }
.jc-v2 .jc-promo p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--jc-muted); }
.jc-v2 .jc-cross-site {
background: linear-gradient(180deg, var(--jc-blue), var(--jc-blue-deep));
color: #fff; border-radius: var(--jc-r-xl); padding: 28px; margin: 30px 0;
}
.jc-v2 .jc-cross-site h2 { color: #fff; }
/* Pagination */
.jc-v2 .jc-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 30px 0; }
.jc-v2 .jc-pagination a,
.jc-v2 .jc-pagination span {
min-width: 38px; height: 38px; padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--jc-font-head); font-weight: 600; font-size: 14px;
border-radius: var(--jc-r-sm); text-decoration: none;
color: var(--jc-ink); background: #fff; border: 1px solid var(--jc-line);
}
.jc-v2 .jc-pagination a:hover { border-color: var(--jc-blue-2); color: var(--jc-blue-2); }
.jc-v2 .jc-pagination .current { background: var(--jc-blue-2); color: #fff; border-color: var(--jc-blue-2); }
/* Emplacement pub (placeholder) */
.jc-v2 .jc-ad { display: block; margin: 24px auto; text-align: center; }
/* ---------- A6. Bouton/menu auth déconnexion (mobile) ---------- */
.jc-v2 .jc-auth-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
background: #fff; border: 1px solid var(--jc-line); border-radius: var(--jc-r-md);
box-shadow: var(--jc-shadow-pop); min-width: 180px; padding: 6px;
display: flex; flex-direction: column;
}
.jc-v2 .jc-auth-menu[hidden] { display: none !important; }
.jc-v2 .jc-auth-menu a { padding: 10px 12px; border-radius: var(--jc-r-sm); color: var(--jc-ink); text-decoration: none; font-size: 14px; }
.jc-v2 .jc-auth-menu a:hover { background: var(--jc-bg-soft); }
/* ---------- A7. Responsive (mobile-first overrides ; remplace responsive-fixes.css) ---------- */
/* GeneratePress mobile menu (hamburger) restylé dans la barre sombre */
.jc-v2 .main-navigation .menu-toggle {
color: #fff; font-family: var(--jc-font-head); font-weight: 600;
padding: 12px 16px;
}
.jc-v2 .main-navigation .menu-toggle:hover { color: var(--jc-accent); }
@media (max-width: 980px) {
.jc-v2 .jc-grid-6 { grid-template-columns: repeat(3, 1fr); }
.jc-v2 .jc-grid-5 { grid-template-columns: repeat(3, 1fr); }
.jc-v2 .jc-grid-4 { grid-template-columns: repeat(2, 1fr); }
.jc-v2 .jc-page-layout { grid-template-columns: 1fr; }
.jc-v2 .jc-sidebar { position: static; }
.jc-v2 .jc-promo { grid-template-columns: 1fr; }
.jc-v2 .jc-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 1180px) {
.jc-v2 .jc-topbar-inner {
grid-template-columns: minmax(160px, 190px) minmax(320px, 1fr) max-content;
gap: 22px;
}
.jc-v2 .jc-logo img { width: 184px; }
.jc-v2 .jc-header-lang-label { display: none; }
.jc-v2 .jc-header-lang-switch a { min-width: 44px; padding: 0 10px; }
.jc-v2 .main-navigation .main-nav ul li a {
font-size: 12.5px;
padding-left: 11px;
padding-right: 11px;
}
.jc-v2 .main-navigation .main-nav > ul { justify-content: flex-start; }
}
@media (max-width: 760px) {
:root { --jc-gutter: 18px; }
.jc-v2 .jc-topbar { padding: 13px 0 14px; }
.jc-v2 .jc-topbar-inner {
grid-template-columns: minmax(130px, 1fr) max-content;
gap: 12px 14px;
}
.jc-v2 .jc-logo img { width: 170px; }
.jc-v2 .jc-search {
grid-column: 1 / -1;
grid-row: 2;
height: 50px;
border-radius: 12px;
}
.jc-v2 .jc-search-input { height: 38px; font-size: 16px; }
.jc-v2 .jc-search-btn { height: 38px; }
.jc-v2 .jc-header-actions { grid-column: 2; grid-row: 1; margin: 0; }
.jc-v2 .jc-grid-6,
.jc-v2 .jc-grid-5,
.jc-v2 .jc-grid-4,
.jc-v2 .jc-grid-3 { grid-template-columns: repeat(2, 1fr); }
.jc-v2 .jc-grid-2 { grid-template-columns: 1fr; }
.jc-v2 .jc-hero { padding: 40px 20px 44px; }
.jc-v2 .jc-hero h1 { font-size: clamp(28px, 8vw, 40px); }
.jc-v2 .jc-hero-cta .jc-btn { width: 100%; }
.jc-v2 .jc-footer-cols { grid-template-columns: 1fr; gap: 22px; }
/* Nav : GeneratePress bascule en menu hamburger sous ce breakpoint */
.jc-v2 .main-navigation .main-nav > ul { overflow-x: visible; }
}
/* Le display:flex desktop ci-dessus est plus specifique que mobile.css de
GeneratePress. Reprendre explicitement son contrat mobile : hamburger seul
au repos, liste verticale uniquement quand la navigation est ouverte. */
@media (max-width: 768px) {
.jc-v2 .main-navigation .inside-navigation {
display: block;
padding: 0;
}
.jc-v2 .main-navigation .menu-toggle {
display: block !important;
width: 100%;
min-height: 48px;
border: 0;
text-align: center;
}
.jc-v2 .main-navigation:not(.toggled) .main-nav,
.jc-v2 .main-navigation:not(.toggled) .main-nav > ul {
display: none !important;
}
.jc-v2 .main-navigation.toggled .main-nav,
.jc-v2 .main-navigation.toggled .main-nav > ul {
display: block !important;
width: 100%;
}
.jc-v2 .main-navigation.toggled .main-nav > ul {
overflow: visible;
}
}
/* Largeur utile des pages internes : Child1 autorisait 1500 px. Le header
conserve son axe plus compact de 1180 px, tandis que le contenu retrouve la
largeur historique. Une sidebar plus fine laisse le gain au corps de page. */
@media (min-width: 901px) {
body.jc-v2:not(.home) #page.grid-container {
max-width: var(--jc-page-container, 1500px) !important;
}
body.jc-v2:not(.home) #content.site-content:has(> #left-sidebar) {
grid-template-columns: 220px minmax(0, 1fr) !important;
gap: 24px !important;
}
}
/* ===========================================================================
Correctifs transverses septembre 2026 : CLE + studio de coloriage
========================================================================== */
/* La home Kids reprend le hero de la home Adult, avec le bleu propre a CLE. */
body.jc-v2.jc-family-cle.home :is(.entry-header:first-child h1.entry-title, .entry-content > h1:first-child, h1.sectionhp:first-child) {
display: flex;
align-items: center;
min-height: 176px;
margin: -34px -28px 34px !important;
padding: 42px clamp(24px, 5vw, 58px) !important;
border: 0 !important;
border-radius: 0 0 24px 24px;
background: linear-gradient(135deg, #075579 0%, #016183 58%, #08799b 100%) !important;
color: #fff !important;
font-family: var(--jc-font-head);
font-size: clamp(30px, 4vw, 46px) !important;
font-weight: 800;
line-height: 1.12;
letter-spacing: -.03em;
box-shadow: 0 22px 45px -34px rgba(1, 74, 104, .85);
}
/* CLE interne : la presence reelle de la sidebar pilote la grille. Cela couvre
aussi les recherches, tags et anciennes URLs qui n'ont pas body.left-sidebar. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cle:not(.home):not(.page-template-page-onlinecoloring) #page.grid-container {
width: 100% !important;
max-width: var(--jc-page-container, 1500px) !important;
margin: 0 auto !important;
padding: 26px var(--jc-gutter) 64px !important;
background: #fff;
}
body.jc-v2.jc-family-cle:not(.home):not(.page-template-page-onlinecoloring) #content.site-content:has(> #left-sidebar) {
display: grid !important;
grid-template-columns: 220px minmax(0, 1fr);
align-items: start;
gap: 24px;
width: 100%;
padding: 0 !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.page-template-page-onlinecoloring) #content.site-content:has(> #left-sidebar) > #primary {
position: relative !important;
left: auto !important;
grid-column: 2;
grid-row: 1;
float: none !important;
width: auto !important;
min-width: 0;
max-width: none !important;
padding: 0 !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.page-template-page-onlinecoloring) #content.site-content:has(> #left-sidebar) > #left-sidebar {
position: sticky !important;
grid-column: 1;
grid-row: 1;
align-self: start;
display: block !important;
float: none !important;
width: auto !important;
min-width: 0;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* Menu Kids : meme composant que Adult, palette bleu canard CLE. */
body.jc-v2.jc-family-cle:not(.home) #left-sidebar .inside-left-sidebar {
margin: 0 !important;
padding: 0 0 16px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
border-radius: 16px;
background: #016183 !important;
box-shadow: 0 18px 38px -28px rgba(1, 74, 104, .82);
opacity: 1 !important;
visibility: visible !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar :is(.widget, .inner-padding) {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar .widget-title {
margin: 0 !important;
padding: 22px 20px 17px !important;
color: #fff !important;
font-family: var(--jc-font-head);
font-size: 17px !important;
font-weight: 800;
line-height: 1.35;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu li {
margin: 0 !important;
padding: 0 !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu a {
display: flex;
align-items: center;
min-height: 43px;
padding: 10px 20px !important;
border: 0 !important;
border-top: 1px solid rgba(255, 255, 255, .17) !important;
background: transparent !important;
color: #eefbff !important;
font-family: var(--jc-font-head);
font-size: 12.5px !important;
font-weight: 650;
line-height: 1.3;
text-decoration: none !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu a:hover,
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu a:focus-visible,
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu .current-menu-item > a,
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu .current-menu-ancestor > a {
background: #075273 !important;
color: #fff !important;
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu .current-menu-item > a {
box-shadow: inset 4px 0 0 var(--jc-accent);
}
body.jc-v2.jc-family-cle:not(.home) #left-sidebar :is(.gallery-link, .ebook-rainbow-link, .jc-sidebar-section-title-light) {
display: block;
margin: 0 !important;
padding: 14px 20px 0 !important;
color: #e8f8fc !important;
}
/* Studio en ligne : pleine largeur utile, titres et cartes issus du systeme
commun. Les anciennes marges en pourcentage causaient le decalage a droite. */
body.jc-v2.page-template-page-onlinecoloring #left-sidebar,
body.jc-v2.page-template-page-onlinecoloring #right-sidebar {
display: none !important;
}
body.jc-v2.page-template-page-onlinecoloring #page.grid-container {
width: 100% !important;
max-width: var(--jc-page-container, 1500px) !important;
margin: 0 auto !important;
padding: 28px var(--jc-gutter) 64px !important;
background: #fff;
}
body.jc-v2.page-template-page-onlinecoloring #content.site-content {
display: block !important;
width: 100%;
padding: 0 !important;
}
body.jc-v2.page-template-page-onlinecoloring :is(#primary, .content-area, #primary .site-main, #primary .inside-article) {
position: static !important;
left: auto !important;
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-studio {
width: 100%;
margin: 0;
padding-top: 20px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-error {
margin: 32px 0;
color: #a00000;
text-align: center;
}
body.jc-v2.page-template-page-onlinecoloring .coloring-wrapper.jc-online-recommendations {
width: 100%;
margin: 54px 0 0 !important;
padding: 0 0 40px !important;
}
body.jc-v2.page-template-page-onlinecoloring :is(h2.reaori_title, .sectionhp, h2.sectionhp) {
margin: 42px 0 14px !important;
padding: 0 0 11px !important;
border: 0 !important;
border-bottom: 1px solid var(--jc-line) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-head);
font-size: clamp(21px, 2.5vw, 28px) !important;
font-weight: 800 !important;
line-height: 1.2;
text-align: left !important;
}
body.jc-v2.page-template-page-onlinecoloring :is(h2.reaori_title, .sectionhp, h2.sectionhp)::after {
content: none !important;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-section-separator {
clear: both;
height: 34px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-popular-categories {
padding: 20px 0 60px;
text-align: left;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-popular-block {
padding-bottom: 60px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-categories-intro {
margin-bottom: 28px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-categories-columns {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 30px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-categories-column {
flex: 1 1 250px;
min-width: 200px;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-popular-categories h3 {
margin-top: 0;
color: var(--jc-ink) !important;
font-weight: 700;
}
@media (min-width: 1101px) {
body.jc-v2.page-template-page-onlinecoloring :is(.gallery-grid, .jc-coloring-grid) {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* Les pubs ne sont jamais des cartes : ni bord, ni fond, ni ombre. */
body.jc-v2 :is(#adheader, #adbottom, #adrightzoomcolor, #pubbeforebuttons, .gallery-grid-ad-min, .gallery-grid-ad-min-mobile, .grid-ad-min, .grid-ad-min-mobile, .jc-online-ad-slot) {
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.jc-v2 :is(#adheader, #adbottom, #adrightzoomcolor, #pubbeforebuttons, .gallery-grid-ad-min, .gallery-grid-ad-min-mobile, .grid-ad-min, .grid-ad-min-mobile, .jc-online-ad-slot) ins {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.jc-v2.page-template-page-onlinecoloring .jc-online-ad-slot {
clear: both;
width: 100%;
margin: 20px 0;
padding: 0;
text-align: center;
}
@media (max-width: 600px) {
body.jc-v2.jc-family-cle.home :is(.entry-header:first-child h1.entry-title, .entry-content > h1:first-child, h1.sectionhp:first-child) {
min-height: 138px;
margin: -24px -16px 26px !important;
padding: 32px 18px !important;
border-radius: 0 0 18px 18px;
font-size: 29px !important;
}
}
@media (max-width: 520px) {
.jc-v2 .jc-logo img { width: 152px; }
.jc-v2 .jc-header-actions { gap: 7px; }
.jc-v2 .jc-header-lang-switch a,
.jc-v2 .jc-auth-control .jc-auth-open,
.jc-v2 .jc-auth-control .jc-auth-menu-toggle {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
justify-content: center;
}
.jc-v2 .jc-auth-control .jc-auth-open,
.jc-v2 .jc-auth-control .jc-auth-menu-toggle { font-size: 0; gap: 0; }
.jc-v2 .jc-auth-control .jc-auth-menu-toggle span { display: none; }
.jc-v2 .jc-search { padding-left: 14px; }
.jc-v2 .jc-search-btn { width: 42px; padding: 0; }
.jc-v2 .jc-search-btn span { display: none; }
.jc-v2 .jc-grid-6,
.jc-v2 .jc-grid-5,
.jc-v2 .jc-grid-4,
.jc-v2 .jc-grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
.jc-v2 .jc-section { margin: 22px 0 30px; }
.jc-v2 .jc-h1, .jc-v2 .jc-page h1 { font-size: 26px; }
}
/* =====================================================================
FIN DESIGN LAYER — Partie A (global) terminée.
===================================================================== */
/* =====================================================================
PARTIE B — LISTINGS (restyle global de l'apparence des cartes)
Restyle l'APPARENCE des grilles partagées (catégories, galeries,
populaires, nouveautés) sans toucher la mise en page Masonry
(on ne modifie ni display/float ni width de .grid/.grid-item).
Bénéficie à : page-allgalleries, gallery (content-page), page-mostpopular,
page-new, et toute grille .grid-item / .ngg-gallery-thumbnail-box.
===================================================================== */
/* Titre de section (catégories / supergaleries) */
.jc-v2 .supgal_title {
font-family: var(--jc-font-head);
font-weight: 800;
font-size: 24px;
color: var(--jc-ink);
margin: 24px 0 6px;
}
/* Carte coloriage/galerie (appearance only — layout = Masonry) */
.jc-v2 .grid-item {
background: #fff;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg);
overflow: hidden;
box-shadow: var(--jc-shadow-card);
padding-bottom: 12px;
transition: transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .grid-item:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-pop); }
.jc-v2 .grid-item img {
border: 0 !important;
border-radius: 0 !important;
width: 100%;
}
.jc-v2 .grid-item .h2_gal,
.jc-v2 .grid-item h2,
.jc-v2 .grid-item h3 {
font-family: var(--jc-font-head) !important;
font-weight: 700 !important;
font-size: 15px !important;
margin: 10px 12px 2px !important;
}
.jc-v2 .grid-item .h2_gal a,
.jc-v2 .grid-item h2 a,
.jc-v2 .grid-item h3 a { color: var(--jc-ink); text-decoration: none; }
.jc-v2 .grid-item .h2_gal a:hover { color: var(--jc-blue-2); }
.jc-v2 .grid-item .album-gallery-image-counter,
.jc-v2 .grid-item p { color: var(--jc-muted) !important; font-size: 12.5px !important; margin: 0 12px !important; }
.jc-v2 .grid-item .album-gallery-image-counter a { color: var(--jc-muted) !important; }
/* Vignettes des galeries NextGEN (pages galerie) */
.jc-v2 .ngg-gallery-thumbnail-box {
background: #fff !important;
border: 1px solid var(--jc-line) !important;
border-radius: var(--jc-r-lg) !important;
box-shadow: var(--jc-shadow-card);
padding: 8px !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .ngg-gallery-thumbnail-box:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-pop); }
.jc-v2 .ngg-gallery-thumbnail {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
}
.jc-v2 .ngg-gallery-thumbnail img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: center;
border-radius: calc(var(--jc-r-lg) - 6px) !important;
}
/* Cartes "nouvelles/populaires catégories" injectées (jc_hp_cle_cats_blocks) */
.jc-v2 .new-cats-title { font-family: var(--jc-font-head); font-weight: 800; color: var(--jc-ink); }
.jc-v2 .new-cats-see-all { color: var(--jc-blue-2); font-family: var(--jc-font-head); font-weight: 600; text-decoration: none; }
.jc-v2 .new-cat-badge { background: var(--jc-accent); color: var(--jc-blue); font-weight: 700; border-radius: var(--jc-r-pill); }
/* ---------- Listings : barre de filtre + pilules (mostpopular / new) ---------- */
.jc-v2 .mp-filter-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
margin: 12px 0 22px;
}
.jc-v2 .mp-filter-label { font-family: var(--jc-font-head); font-weight: 600; font-size: 14px; color: var(--jc-ink); }
.jc-v2 .mp-sort-select {
padding: 9px 12px; border: 1px solid var(--jc-line); border-radius: 9px;
font-family: var(--jc-font-body); font-size: 14px; background: #fff; color: var(--jc-ink); cursor: pointer;
}
.jc-v2 .mp-filter-sep { color: var(--jc-line); }
.jc-v2 .mp-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.jc-v2 .mp-pill {
display: inline-flex; align-items: center; text-decoration: none; border: 0; cursor: pointer;
background: var(--jc-bg-soft); color: var(--jc-blue-2);
font-family: var(--jc-font-head); font-weight: 600; font-size: 13px;
padding: 7px 14px; border-radius: var(--jc-r-pill);
}
.jc-v2 .mp-pill:hover { background: #e2ebfb; }
.jc-v2 .mp-pill.mp-active { background: var(--jc-blue-2); color: #fff; }
/* ---------- Cartes "nouvelles/populaires catégories" (new-cats-*) ---------- */
.jc-v2 .new-cats-section { margin: 26px 0; }
.jc-v2 .new-cats-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.jc-v2 .new-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.jc-v2 .new-cat-card {
position: relative; background: #fff; border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg); box-shadow: var(--jc-shadow-card); overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .new-cat-card:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-pop); }
.jc-v2 .new-cat-name {
display: flex; flex-direction: column; gap: 8px; text-decoration: none;
color: var(--jc-ink); font-family: var(--jc-font-head); font-weight: 600; font-size: 13px;
}
.jc-v2 .new-cat-name { padding-bottom: 10px; }
.jc-v2 .new-cat-thumb { display: block; line-height: 0; }
.jc-v2 .new-cat-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; }
.jc-v2 .new-cat-name > :not(.new-cat-thumb) { padding: 0 12px; }
.jc-v2 .new-cat-card a.new-cat-name:hover,
.jc-v2 .new-cat-card:hover a.new-cat-name { color: var(--jc-blue); text-decoration: underline; text-underline-offset: 2px; }
.jc-v2 .new-cat-badge {
position: absolute; top: 8px; left: 8px; z-index: 2;
background: var(--jc-accent); color: var(--jc-blue);
font-family: var(--jc-font-head); font-weight: 700; font-size: 10px;
padding: 3px 8px; border-radius: var(--jc-r-pill);
}
.jc-v2 .jc-crosspromo { margin: 40px 0; }
/* ---------- Listing flexbox .masonry (ebooks, artists fallback) ---------- */
.jc-v2 .masonry { display: flex; flex-wrap: wrap; gap: 20px; }
.jc-v2 .masonry .item {
flex: 0 0 200px; background: #fff; border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg); box-shadow: var(--jc-shadow-card);
overflow: hidden; padding-bottom: 12px;
transition: transform .15s ease, box-shadow .15s ease;
}
.jc-v2 .masonry .item:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-pop); }
.jc-v2 .masonry .item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.jc-v2 .masonry .item h2 { font-family: var(--jc-font-head); font-weight: 700; font-size: 15px; color: var(--jc-ink); margin: 10px 12px 2px; }
.jc-v2 .masonry .item h2 a { color: var(--jc-ink); text-decoration: none; }
.jc-v2 .masonry .item h2 a:hover { color: var(--jc-blue-2); }
/* ---------- content-page (gallery) : FAQ + intro recolor ---------- */
.jc-v2 .jc-faq-title { font-family: var(--jc-font-head); font-weight: 800; color: var(--jc-ink); }
.jc-v2 .jc-faq-item { border-color: var(--jc-line); }
.jc-v2 .jc-faq-question { font-family: var(--jc-font-head); font-weight: 600; color: var(--jc-ink); }
.jc-v2 .jc-faq-question:hover { color: var(--jc-blue-2); }
.jc-v2 .jc-faq-answer { color: var(--jc-muted); }
.jc-v2 .jc-faq-answer a { color: var(--jc-blue-2); }
.jc-v2 .intro-page p, .jc-v2 .intro-page-full p { color: var(--jc-ink); }
/* ---------- page-image (coloringpage) : restyle à valider sur pilote ----------
Layout en floats #zoomcolor / #siderightzoomcolor conservé. On harmonise
seulement l'apparence (titre, méta, prev/next) sur les tokens. */
.jc-v2 .h1_bread { font-family: var(--jc-font-head); }
.jc-v2 #breadcrumbs { color: var(--jc-muted); }
.jc-v2 #breadcrumbs a { color: var(--jc-blue-2); text-decoration: none; }
.jc-v2 .jc-image-meta-card { border: 1px solid var(--jc-line); border-radius: var(--jc-r-lg); box-shadow: var(--jc-shadow-card); }
.jc-v2 #zoomcolorimg { border: 1px solid var(--jc-line); border-radius: var(--jc-r-md); }
/* Prev/next en pilules maquette (remplace les dégradés gris legacy) */
.jc-v2 .jc-nav-btn {
background: var(--jc-bg-soft) !important;
color: var(--jc-blue-2) !important;
border-radius: var(--jc-r-md);
font-family: var(--jc-font-head); font-weight: 600;
box-shadow: none;
}
.jc-v2 .jc-nav-btn:hover { background: #e2ebfb !important; color: var(--jc-blue-2) !important; }
.jc-v2 .jc-nav-btn.jc-nav-next { background: var(--jc-accent) !important; color: var(--jc-blue) !important; }
.jc-v2 .jc-nav-btn.jc-nav-next:hover { background: var(--jc-accent-2) !important; }
/* ---------- Blog (index.php + content-single via content part GP) ---------- */
.jc-v2 .entry-title { font-family: var(--jc-font-head); font-weight: 700; }
.jc-v2 .entry-title a { color: var(--jc-ink); text-decoration: none; }
.jc-v2 .entry-title a:hover { color: var(--jc-blue-2); }
.jc-v2 .page-header-blog { background: var(--jc-blue); border-radius: var(--jc-r-lg); }
.jc-v2 .entry-title-blog { font-family: var(--jc-font-head); }
.jc-v2 .read-more {
background-color: var(--jc-blue-2) !important;
border-radius: var(--jc-r-md);
font-family: var(--jc-font-head);
line-height: normal; padding: 12px 22px;
}
.jc-v2 .read-more:hover { filter: brightness(1.06); }
/* kids-homepage (CLE) : la home enfant utilise page-hp3 ou le contenu + jc_hp_cle_cats_blocks ;
les cartes new-cats-* sont déjà restylées plus haut. La déclinaison couleur CLE
est gérée par body.jc-family-cle (tokens). */
/* =====================================================================
FIN PARTIE B (recolors). page-image / content-page : passe fine + pilote.
===================================================================== */
/* =====================================================================
PARTIE C — Finitions (a11y) sûres. MDL (design) + Nextend + micro-cache
à finaliser sur le pilote (nécessitent l'environnement live / maquette MDL).
===================================================================== */
.jc-v2 a:focus-visible,
.jc-v2 button:focus-visible,
.jc-v2 input:focus-visible,
.jc-v2 select:focus-visible,
.jc-v2 summary:focus-visible {
outline: 3px solid var(--jc-blue-2);
outline-offset: 2px;
border-radius: 4px;
}
/* Focus visible sur fond bleu (top bar / footer) : contraste accent */
.jc-v2 .jc-topbar a:focus-visible,
.jc-v2 .jc-topbar button:focus-visible,
.jc-v2 .main-navigation a:focus-visible,
.jc-v2 .jc-footer a:focus-visible { outline-color: var(--jc-accent); }
@media (prefers-reduced-motion: reduce) {
.jc-v2 * { transition: none !important; animation: none !important; }
}
/* =====================================================================
LEGACY childv1 — conservé pour les templates pas encore portés.
À PURGER en fin de refonte.
===================================================================== */
.widget-title,h4{margin-bottom:10px!important}.colorcopyright,.gal,.myfab,.ngg-navigation .ellipsis,.read-more,.sharify-container li a,.tag{text-decoration:none}.site-header .header-image,a .sharify-icon img{vertical-align:middle}pre,textarea{overflow:auto}.gallery-item img,.wp-caption img{vertical-align:bottom}.dropdown-menu-toggle:before,.menu-toggle:before{speak:none;font-family:FontAwesome}.mobile-bar-items a,.nav-float-right .inside-header .site-branding,.site-branding,.site-logo{display:inline-block}h1{font-size:30px!important;color:#000;margin-top:0!important}.h3_gal{font-size:18px;margin-top:8px}.h3_galmin{font-size:16px;margin-top:8px}.ngg-album-compact{height:200px!important}a .sharify-icon img{margin-top:0}.header-image{width:288px}.socialbtn{float:left;padding-right:15px}.widget-title{margin-top:10px!important;color:#c7c7c7}#breadcrumbs,.entry-content{margin:0!important}.footer-widgets,h1.entry-title{padding:5px 0 15px}.footer-bar .widget_nav_menu li:last-child,.site-logo,.top-bar .widget_nav_menu li:last-child{margin-right:0}.fluid-header .inside-header,.header-aligned-left .site-header,.header-widget,.nav-aligned-left.nav-above-header .main-navigation,.nav-aligned-left.nav-below-header .main-navigation,.nav-search-enabled .main-navigation .menu-toggle,caption,td,th{text-align:left}.inside-header>:not(:last-child){margin-bottom:5px;margin-top:5px}.site-logo{position:absolute;float:left}#adheader{padding-bottom:5px}@media screen and (min-width:1001px){.searchelement{height:40px;margin-top:10px;font-size:12pt}.container-2{float:left;overflow:hidden;width:300px;vertical-align:middle;white-space:nowrap;margin-left:400px}.container-2 input#search{margin-top:10px;width:300px;height:40px;float:left;padding-left:15px;background-color:#fafafa;border:2px solid #003872;color:#3a3a3a}.container-2 input#search::-webkit-input-placeholder{color:#65737e}.container-2 input#search:-moz-placeholder{color:#65737e}.container-2 input#search::-moz-placeholder{color:#65737e}.container-2 input#search:-ms-input-placeholder{color:#65737e}.container-2 i.fa.fa-search{display:none}}@media screen and (max-width:1000px){.div.form{float:right}.container-2,.loginlogout,.polyglot-language-switcher,.searchelement{display:none}.div.site-logo{z-index:1;position:relative}.container-2 input#search{width:50px;height:41px;background:#003872;border:none;font-size:10pt;float:right;padding-left:35px;color:#fff;-webkit-transition:width .55s;-moz-transition:width .55s;-ms-transition:width .55s;-o-transition:width .55s;transition:width .55s}.container-2 input#search::-webkit-input-placeholder{color:#fff}.container-2 input#search:-moz-placeholder{color:#fff}.container-2 input#search::-moz-placeholder{color:#fff}.container-2 input#search:-ms-input-placeholder{color:#fff}.container-2 .icon{position:absolute;top:50%;margin-left:-12px;margin-top:-35px;z-index:2;color:#fff}.container-2 input#search:active,.container-2 input#search:focus,.container-2:hover input#search{width:1000px}.container-2:hover .icon{color:#fff}}@media (min-width:1944px){.stickyad{display:none!important}}@media (max-width:1944px){.stickyad{text-align:center}}.entry-summary,.post-image{margin:.5em 0 0!important}.post-image img{float:left;margin-right:1.5em;width:400px;padding-bottom:10px}.page-header-blog{background-color:#262626;padding:30px}.entry-title-blog{color:#fff;text-transform:uppercase;font-weight:400}h2.entry-title{font-weight:400}#breadcrumbs{font-size:15px}.intro-page,.intro-page-full{padding-bottom:15px!important}.intro-page p,.intro-page-full p{text-align:justify;font-size:15px;margin-bottom:.2em!important}.tooltip:hover:after{background:rgba(0,0,0,.8);border-radius:5px;bottom:26px;color:#fff;left:20%;padding:5px 15px;position:absolute;z-index:98;width:220px}.tooltip:hover:before{border:solid;border-color:#333 transparent;border-width:6px 6px 0;bottom:20px;content:"";left:50%;position:absolute;z-index:99}.colorcopyright{color:#424242!important;border-bottom:1px dotted gray;cursor:pointer}.entry-meta{padding-bottom:10px}#adbottom,.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar,.separate-containers .site-main{margin-top:20px;margin-bottom:20px}.inside-left-sidebar{padding-left:10px}#siderightzoomcolor-infos{font-size:smaller;padding-bottom:20px}@media (max-width:1150px){#siderightzoomcolor,#zoomcolor{width:100%!important}#zoomcolor{margin-right:0!important}#adrightzoomcolor{display:none}}@media (min-width:1150px){#siderightzoomcolor-infos{padding-top:40px}.widget-area.grid-25{width:20%!important}.push-25{left:20%!important}.content-area.grid-75{width:80%!important}.pull-75{left:-80%!important}}.site-footer .footer-widgets-container .inside-footer-widgets{margin-left:0!important}.modal-header{padding-bottom:12px!important}.modal-title{font-size:18px;font-weight:700}.modal-footer{color:#424242;font-size:14px;font-weight:400}.read-more{background-color:#20307a;color:#fff!important;line-height:80px;text-align:center;font-size:18px;text-transform:uppercase;padding:9px 20px 10px}.read-more-container{margin-bottom:0!important}.gal-container,.tag-container{padding:0;display:inline-block}.gal,.tag{display:inline-block;padding:3px 8px;margin:2px 8px 4px 0;border-radius:5px;font-size:14px;transition:background-color .3s}.grid .google-auto-placed,.main-navigation.toggled .main-nav li.hide-on-mobile,.main-navigation.toggled .menu li.search-item,.no-ads .google-auto-placed{display:none!important}.grid{width:100%;margin:20px auto}.grid-item,.grid-sizer{width:calc(20% - 16px)}.grid-item img{display:block;width:100%;border:1px solid rgba(0,0,0,.2);border-radius:4px}.grid-item{margin-bottom:15px}.grid-ad-min,.grid-ad-min-mobile{width:calc(40% - 16px);height:320px;margin-bottom:20px}@media (max-width:1024px){.grid-item,.grid-sizer{width:calc(33.33% - 12px)}.grid-ad-min,.grid-ad-min-mobile{width:calc(66.66% - 12px)}}.grid:after{content:'';display:block;clear:both}.gallery-grid-item p,.grid-item p{font-size:14px;color:#3a3a3a}.gallery-grid-item h2,.grid-item h2{font-size:14px;font-weight:400;color:#3a3a3a}.gallery-grid-item h3,.grid-item h3{font-size:14px;font-weight:400}.gallery-grid-item-lig1,.grid-item-lig1{font-size:14px;margin-top:.5em!important;margin-bottom:0!important}.gallery-grid-item-lig2,.grid-item-lig2{font-size:14px;margin-top:8px;margin-bottom:8px}.h2_gal{font-size:18px!important;font-weight:400;margin-top:15px}*,.grid-item,.grid-sizer,::after,::before{box-sizing:border-box}@media (max-width:769px){.inside-article{padding-left:16px!important;padding-right:16px!important}}@media (min-width:769px){.inside-article{padding-top:20px!important;padding-bottom:20px!important}}.myfab{padding:15px;font-size:30px!important;width:30px;text-align:center;margin:5px 8px;border-radius:50%;box-sizing:content-box}.myfab:hover,.widget ul li ul li:before{opacity:.7}.fa-facebook{background:#3b5998;color:#fff}.fa-twitter{background:#55acee;color:#fff}.fa-instagram{background:#125688;color:#fff}.fa-pinterest{background:#cb2027;color:#fff}.clear,.clear:after,.clearfix:after,.grid-100:after,.grid-10:after,.grid-15:after,.grid-20:after,.grid-25:after,.grid-30:after,.grid-33:after,.grid-35:after,.grid-40:after,.grid-45:after,.grid-50:after,.grid-55:after,.grid-5:after,.grid-60:after,.grid-65:after,.grid-66:after,.grid-70:after,.grid-75:after,.grid-80:after,.grid-85:after,.grid-90:after,.grid-95:after,.grid-container:after,.ngg-clear,.paging-navigation:after,[class*=content]:after,[class*=mobile-grid-]:after,[class*=site]:after,[class*=tablet-grid-]:after{clear:both}.lightbox-hidden{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:9999}.lightbox-visible{display:flex}#lightbox-modal img{max-width:90%;max-height:90%}#lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:2rem;cursor:pointer}[class*=" sharify-"]:before,[class^=sharify-]:before{font-family:sharify;font-style:normal;font-weight:400;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#box_search_mobile,.menu-toggle .mobile-menu:empty,[hidden],template{display:none}.site-header {
height: 60px;
}
.ngg-gallery-thumbnail-box {
background: #a7d3f3!important;
border: 1px solid #6eaed6!important;
margin: 0 10px 15px!important;
padding: 10px!important;
padding-bottom: 10px!important;
transition: opacity .4s ease-in-out !important;
display: inline-block !important;
text-align: center !important;
}
.ngg-gallery-thumbnail {
width: 210px !important;
height: auto !important;
}
/* Alternative simple a Masonry */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
@media (min-width: 769px) {
.gallery-grid {
row-gap: 30px;
column-gap: 20px;
}
}
/* Pages album NextGEN : cartes de galeries lisibles et titres bien detaches. */
body.jc-v2 .gallery-grid > .gallery-grid-item:has(.ngg-album-link) {
padding-bottom: 0 !important;
}
body.jc-v2 .gallery-grid .ngg-album-link,
body.jc-v2 .gallery-grid .ngg-album-link > a {
display: block;
width: 100%;
overflow: hidden;
line-height: 0;
}
body.jc-v2 .gallery-grid .ngg-album-link img.Thumb {
display: block;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
body.jc-v2 .gallery-grid h2.gallery-grid-album-lig1,
body.jc-v2 .masonry .item h2.gallery-grid-album-lig1 {
display: flex;
align-items: center;
min-height: 62px;
margin: 0 !important;
padding: 13px 16px 15px !important;
border-top: 1px solid #edf0f5;
color: #1c2030 !important;
font-family: var(--jc-font-head);
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35;
text-align: left;
}
body.jc-v2 .gallery-grid h2.gallery-grid-album-lig1 a.ngg-album-desc,
body.jc-v2 .masonry .item h2.gallery-grid-album-lig1 a.ngg-album-desc {
display: -webkit-box;
width: 100%;
overflow: hidden;
color: inherit !important;
font: inherit !important;
text-decoration: none !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.jc-v2 .gallery-grid h2.gallery-grid-album-lig1 a.ngg-album-desc:hover,
body.jc-v2 .gallery-grid h2.gallery-grid-album-lig1 a.ngg-album-desc:focus-visible,
body.jc-v2 .masonry .item h2.gallery-grid-album-lig1 a.ngg-album-desc:hover,
body.jc-v2 .masonry .item h2.gallery-grid-album-lig1 a.ngg-album-desc:focus-visible {
color: var(--jc-blue-2) !important;
}
@media (max-width: 760px) {
body.jc-v2 .gallery-grid h2.gallery-grid-album-lig1,
body.jc-v2 .masonry .item h2.gallery-grid-album-lig1 {
min-height: 58px;
padding: 11px 12px 13px !important;
font-size: 14px !important;
}
}
/* Promotion eBook liee a une galerie : hauteur guidee par la couverture. */
body.jc-v2 .jc-ebook-sale {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 300px;
align-items: center;
gap: 28px;
width: 100%;
min-height: 0 !important;
margin: 34px 0 !important;
padding: 24px 30px !important;
border: 1px solid var(--jc-panel-border);
border-radius: var(--jc-panel-radius);
background: var(--jc-panel-gray);
overflow: hidden;
box-shadow: var(--jc-panel-shadow);
}
body.jc-v2 .jc-ebook-sale-copy {
min-width: 0;
}
body.jc-v2 .jc-ebook-sale-kicker {
margin: 0 0 8px !important;
color: #343946;
font-family: var(--jc-font-head);
font-size: 14px !important;
line-height: 1.35;
}
body.jc-v2 .jc-ebook-sale h2 {
max-width: 560px;
margin: 0 0 12px !important;
color: #272c3b;
font-family: var(--jc-font-head);
font-size: clamp(22px, 2.1vw, 28px) !important;
font-weight: 500;
line-height: 1.18;
}
body.jc-v2 .jc-ebook-sale ul {
margin: 0 0 14px 20px !important;
padding: 0 !important;
color: #3f4655;
font-size: 14px !important;
line-height: 1.45;
}
body.jc-v2 .jc-ebook-sale-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 12px;
}
body.jc-v2 .jc-ebook-sale-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
margin: 0 !important;
padding: 8px 16px !important;
border: 2px solid #f2a842;
border-radius: 8px;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
body.jc-v2 .jc-ebook-sale-primary {
background: #f2a842 !important;
color: #111827 !important;
}
body.jc-v2 .jc-ebook-sale-secondary {
background: #fff !important;
color: #111827 !important;
}
body.jc-v2 .jc-ebook-sale-offer {
margin: 0 0 8px !important;
color: #087f23;
font-family: var(--jc-font-head);
font-size: 14px !important;
font-weight: 700;
line-height: 1.4;
}
body.jc-v2 .jc-ebook-sale-quote {
margin: 0 !important;
color: #555b68;
font-size: 13px !important;
font-style: italic;
line-height: 1.4;
}
body.jc-v2 .jc-ebook-sale-cover {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
body.jc-v2 .jc-ebook-sale-cover picture,
body.jc-v2 .jc-ebook-sale-cover a {
display: block;
line-height: 0;
}
body.jc-v2 .jc-ebook-sale-image {
display: block;
width: min(300px, 100%) !important;
height: auto !important;
margin: 0 !important;
border-radius: 12px;
box-shadow: 0 18px 36px -24px rgba(18, 52, 126, .55);
}
@media (max-width: 760px) {
body.jc-v2 .jc-ebook-sale {
grid-template-columns: 1fr;
gap: 18px;
padding: 20px !important;
}
body.jc-v2 .jc-ebook-sale-cover {
order: -1;
}
body.jc-v2 .jc-ebook-sale-image {
width: min(240px, 100%) !important;
}
}
/* =====================================================================
Pagination et tags NextGEN — composant Refonte 2026
===================================================================== */
body.jc-v2 .ngg-navigation {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
clear: both !important;
margin: 34px 0 8px !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1 !important;
text-align: center;
}
body.jc-v2 .ngg-navigation > a,
body.jc-v2 .ngg-navigation > span {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
margin: 0 !important;
padding: 0 12px !important;
border: 1px solid #d7dbe6 !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--jc-blue) !important;
font-family: var(--jc-font-head);
font-size: 14px !important;
font-weight: 800;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.jc-v2 .ngg-navigation > a:hover,
body.jc-v2 .ngg-navigation > a:focus-visible {
border-color: var(--jc-blue) !important;
color: var(--jc-blue) !important;
background: #eef3f8 !important;
}
body.jc-v2 .ngg-navigation > .current {
border-color: var(--jc-blue) !important;
background: var(--jc-blue) !important;
color: #fff !important;
}
body.jc-v2 .ngg-navigation > .ellipsis,
body.jc-v2 .ngg-navigation > .is-disabled {
border-color: #e2e6ef !important;
background: #f5f7fb !important;
color: #a0a6b5 !important;
cursor: default !important;
}
body.jc-v2 .ngg-navigation > .prev {
padding: 0 !important;
font-size: 25px !important;
}
body.jc-v2 .ngg-navigation > .next {
gap: 8px;
min-width: 112px;
border-color: var(--jc-blue) !important;
background: var(--jc-blue) !important;
color: #fff !important;
}
/* Les spans du libelle restent du contenu du bouton. Les anciennes regles
NextGEN ne doivent pas les transformer en deux boutons imbriques. */
body.jc-v2 .ngg-navigation > .next > span,
body.jc-v2 .ngg-navigation > .prev > span {
display: inline !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit !important;
box-shadow: none !important;
line-height: 1 !important;
}
body.jc-v2 .ngg-navigation > .next:hover,
body.jc-v2 .ngg-navigation > .next:focus-visible {
border-color: var(--jc-blue-deep) !important;
background: var(--jc-blue-deep) !important;
color: #fff !important;
}
body.jc-v2 .ngg-navigation > .next.is-disabled {
border-color: #e2e6ef !important;
background: #f5f7fb !important;
color: #a0a6b5 !important;
}
body.jc-v2 .ngg-navigation > .prev::before,
body.jc-v2 .ngg-navigation > .next::before {
display: none !important;
content: none !important;
}
body.jc-v2 .ngg-navigation .jc-pagination-label {
display: none !important;
}
body.jc-v2 .jc-related-tags {
margin: 34px 0 68px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.jc-v2 .jc-related-tags h2 {
margin: 0 0 12px !important;
padding: 0 !important;
color: #1c2030 !important;
background: transparent !important;
font-family: var(--jc-font-head);
font-size: 15px !important;
font-weight: 700;
line-height: 1.35;
}
body.jc-v2 .jc-related-tags .jc-related-links,
body.jc-v2 .jc-related-tags .tag-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin: 0 !important;
padding: 0 !important;
}
body.jc-v2 .jc-related-tags .tag-container > a.tag {
display: inline-flex;
align-items: center;
min-height: 34px;
margin: 0 !important;
padding: 7px 15px !important;
border: 0 !important;
border-radius: 999px !important;
background: #eef2fb !important;
color: var(--jc-blue-2) !important;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 600;
line-height: 1.25;
text-decoration: none !important;
}
body.jc-v2 .jc-related-tags .tag-container > a.tag:hover,
body.jc-v2 .jc-related-tags .tag-container > a.tag:focus-visible {
background: var(--jc-blue-2) !important;
color: #fff !important;
}
/* Le legacy se trouve plus bas dans le fichier : cette variante specifique
garantit le bleu de marque sur l'introduction du blog. */
body.jc-v2.jc-family-cla .page-header-blog {
background: #0b518d !important;
}
body.jc-v2.jc-family-cle .page-header-blog {
background: #016183 !important;
}
@media (max-width: 600px) {
body.jc-v2 .ngg-navigation {
gap: 7px;
}
body.jc-v2 .ngg-navigation > a,
body.jc-v2 .ngg-navigation > span {
min-width: 39px;
height: 39px;
padding: 0 10px !important;
}
body.jc-v2 .ngg-navigation > .next {
min-width: 94px;
}
}
/* Pages galerie Kids : shell interne large et sidebar compacte. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cle.jc-gallery-page #page.grid-container {
width: 100% !important;
max-width: var(--jc-page-container, 1500px) !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 26px var(--jc-gutter) 64px !important;
background: #fff;
}
body.jc-v2.jc-family-cle.jc-gallery-page #content.site-content {
display: grid !important;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
width: 100%;
padding: 0 !important;
}
body.jc-v2.jc-family-cle.jc-gallery-page #left-sidebar {
grid-column: 1;
width: auto !important;
min-width: 0;
padding: 0 !important;
float: none !important;
left: auto !important;
}
body.jc-v2.jc-family-cle.jc-gallery-page #primary,
body.jc-v2.jc-family-cle.jc-gallery-page .content-area {
grid-column: 2;
width: auto !important;
min-width: 0;
max-width: none !important;
padding: 0 !important;
float: none !important;
left: auto !important;
}
}
body.jc-v2.jc-family-cle.jc-gallery-page #primary .site-main,
body.jc-v2.jc-family-cle.jc-gallery-page #primary .inside-article {
width: 100%;
max-width: none;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 900px) {
body.jc-v2.jc-family-cle.jc-gallery-page #page.grid-container {
width: 100%;
max-width: 760px !important;
margin: 0 auto !important;
padding: 22px 18px 50px !important;
}
body.jc-v2.jc-family-cle.jc-gallery-page #content.site-content {
display: block !important;
}
body.jc-v2.jc-family-cle.jc-gallery-page #left-sidebar {
display: none !important;
}
}
/* For grids with few items, avoid stretching columns (except ad blocks). */
.gallery-grid > div:not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile) {
width: 100%;
max-width: 200px;
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Refonte 2026 — gabarit strict des pages galerie CLA
========================================================================== */
@media (min-width: 901px) {
body.jc-v2.jc-family-cla.jc-gallery-page #page.grid-container {
width: 100%;
max-width: var(--jc-page-container, 1500px) !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 26px 28px 64px !important;
background: #fff;
}
body.jc-v2.jc-family-cla.jc-gallery-page #content.site-content {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
width: 100%;
padding: 0 !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page #left-sidebar {
width: auto !important;
min-width: 0;
padding: 0 !important;
float: none !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page #primary {
width: auto !important;
min-width: 0;
padding: 0 !important;
float: none !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page #left-sidebar .inside-left-sidebar {
position: sticky;
top: 24px;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 12px 28px rgba(15, 36, 71, .12);
}
}
body.jc-v2.jc-family-cla.jc-gallery-page #primary .site-main,
body.jc-v2.jc-family-cla.jc-gallery-page #primary .inside-article {
width: 100%;
max-width: none;
margin: 0 !important;
padding: 0 !important;
background: transparent;
}
body.jc-v2.jc-family-cla.jc-gallery-page #breadcrumbs {
margin: 0 0 18px !important;
color: #8b93a5;
font-size: 13px;
line-height: 1.45;
}
body.jc-v2.jc-family-cla.jc-gallery-page #breadcrumbs a {
color: var(--jc-blue-2);
text-decoration: none;
}
body.jc-v2.jc-family-cla.jc-gallery-page .entry-header .entry-title {
margin: 0 0 10px !important;
padding: 0 !important;
color: #171b2d;
font-family: var(--jc-font-head);
font-size: 34px !important;
font-weight: 800;
line-height: 1.16;
letter-spacing: -.025em;
}
body.jc-v2.jc-family-cla.jc-gallery-page .intro-page {
max-width: 680px;
margin: 0 0 22px !important;
padding: 0 !important;
color: #5b6272;
font-size: 15px;
line-height: 1.65;
}
body.jc-v2.jc-family-cla.jc-gallery-page .intro-page p {
margin: 0 0 8px;
text-align: left !important;
}
body.jc-v2 .jc-gallery-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
flex-wrap: wrap;
margin: 0 0 22px;
padding: 10px 12px;
border: 1px solid #e6e8f0;
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 28px -24px rgba(20, 30, 70, .55);
}
body.jc-v2 .jc-gallery-toolbar .jc-results-count {
display: flex;
flex-direction: column;
gap: 2px;
color: #8a8d99;
font-size: 12.5px;
line-height: 1.3;
}
body.jc-v2 .jc-gallery-toolbar .jc-results-count strong {
color: #1c2030;
font-family: var(--jc-font-head);
font-size: 14px;
font-weight: 500;
}
body.jc-v2 .jc-gallery-toolbar .ngg-sort-control {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 8px 12px;
border: 1px solid #d7dbe6;
border-radius: 11px;
background: #f7f9fc;
}
body.jc-v2 .jc-gallery-toolbar .ngg-sort-control label {
margin: 0;
color: #8a8d99;
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
body.jc-v2 .jc-gallery-toolbar .ngg-sort-select {
width: auto;
min-width: 0;
height: auto;
margin: 0;
padding: 0 22px 0 0;
border: 0;
background-color: transparent;
color: #1c2030;
font-family: var(--jc-font-head);
font-size: 13px;
font-weight: 500;
box-shadow: none;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
width: 100% !important;
padding-top: 0 !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid > .gallery-grid-item {
width: 100% !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
padding: 0 0 12px !important;
float: none !important;
overflow: hidden;
border: 1px solid #e3e7ef;
border-radius: 13px;
background: #fff;
box-shadow: 0 7px 18px rgba(25, 39, 72, .055);
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid-item > p {
margin: 0 !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid-item > p > a {
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid-item img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: contain;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid-item .ngg-thumb-title {
display: -webkit-box;
min-height: 0;
margin: 0 !important;
padding: 10px 12px 0 !important;
overflow: hidden;
color: #252a38;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 700;
line-height: 1.35;
text-align: left;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid > [id^="ad"],
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid > .adsbygoogle,
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid > .grid-ad-min,
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid > .gallery-grid-ad-min {
grid-column: span 2;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .ngg-navigation {
margin: 0 !important;
padding-top: 28px !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-gallery-taxonomy-after {
margin: 34px 0 58px;
padding-top: 22px;
border-top: 1px solid #edf0f5;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-gallery-taxonomy-after .reaori_title {
margin: 0 0 22px !important;
padding: 0 !important;
background: transparent !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-gallery-taxonomy-after h2 {
margin: 0 0 10px;
color: #242a39;
font-family: var(--jc-font-head);
font-size: 15px;
font-weight: 800;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-related-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-related-links .tag,
body.jc-v2.jc-family-cla.jc-gallery-page .jc-related-links .gal {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-related-links a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 15px;
border: 1px solid transparent;
border-radius: 999px;
background: #eef2fb;
color: var(--jc-blue-2);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
body.jc-v2.jc-family-cla.jc-gallery-page .jc-related-galleries .jc-related-links a {
border-color: #d9e4f4;
background: #fff;
}
@media (max-width: 1100px) and (min-width: 761px) {
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
body.jc-v2.jc-family-cla.jc-gallery-page .entry-header .entry-title {
font-size: 28px !important;
}
body.jc-v2 .jc-gallery-toolbar {
align-items: flex-start;
flex-direction: column;
}
body.jc-v2 .jc-gallery-toolbar .ngg-sort-control {
width: 100%;
justify-content: space-between;
}
body.jc-v2.jc-family-cla.jc-gallery-page .gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
/* Bloc de promotion vers le site oppose : cinq cartes sur grand ecran. */
@media (min-width: 1101px) {
body.jc-v2 .jc-cross-site-block #crosscolor > .jc-coloring-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* Sur une fiche coloriage la colonne de recommandations est moins large :
trois cartes donnent des images lisibles, puis deux sur petits ecrans. */
@media (min-width: 901px) {
body.jc-v2.jc-image-page .crosscontent .jc-coloring-grid,
body.jc-v2:has(.jc-image-heading) .crosscontent .jc-coloring-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
/* =====================================================================
REFONTE 2026 — PAGES INTERNES CLA
Conteneur centre + sidebar fixe, comme la maquette gallery/category.
===================================================================== */
@media (min-width: 901px) {
body.jc-v2.jc-family-cla:not(.home) #page.grid-container {
width: 100%;
max-width: var(--jc-page-container, 1500px);
margin: 0 auto;
padding: 30px 24px 68px;
background: #fff;
}
body.jc-v2.jc-family-cla:not(.home) #content.site-content {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
align-items: start;
gap: 24px;
width: 100%;
}
body.jc-v2.jc-family-cla:not(.home) #primary,
body.jc-v2.jc-family-cla:not(.home) .content-area {
position: relative;
left: 0 !important;
grid-column: 2;
grid-row: 1;
float: none !important;
width: auto !important;
min-width: 0;
max-width: none !important;
padding: 0 !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar {
position: sticky;
top: 18px;
left: 0 !important;
grid-column: 1;
grid-row: 1;
float: none !important;
width: auto !important;
min-width: 0;
padding: 0 !important;
}
}
body.jc-v2.jc-family-cla:not(.home) {
background: #fff !important;
}
body.jc-v2.jc-family-cla:not(.home) .site-main {
margin: 0 !important;
}
body.jc-v2.jc-family-cla:not(.home) .inside-article {
padding: 0 !important;
border-radius: 0;
box-shadow: none;
}
body.jc-v2.jc-family-cla:not(.home) #breadcrumbs {
margin: 0 0 8px !important;
padding: 0;
color: #8a91a3;
font-size: 13px;
}
body.jc-v2.jc-family-cla:not(.home) #breadcrumbs a {
color: var(--jc-blue-2);
text-decoration: none;
}
body.jc-v2.jc-family-cla:not(.home) h1.entry-title {
margin: 0 0 12px !important;
padding: 0 !important;
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: clamp(28px, 3vw, 36px) !important;
font-weight: 800;
line-height: 1.18;
letter-spacing: -.025em;
}
body.jc-v2.jc-family-cla:not(.home) .intro-page,
body.jc-v2.jc-family-cla:not(.home) .intro-page-full {
padding: 0 0 20px !important;
}
body.jc-v2.jc-family-cla:not(.home) .intro-page p,
body.jc-v2.jc-family-cla:not(.home) .intro-page-full p {
margin: 0 0 6px !important;
color: #555d6d;
font-size: 14px;
line-height: 1.55;
text-align: left;
}
/* Sidebar bleue : un seul panneau, sans zone pâle ni largeur proportionnelle. */
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .inside-left-sidebar {
margin: 0 !important;
padding: 0 0 18px !important;
overflow: hidden;
border-radius: 16px;
background: #0b518d;
box-shadow: 0 18px 38px -28px rgba(9, 43, 89, .75);
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .widget-title.jc-sidebar-section-title {
margin: 0 !important;
padding: 24px 22px 18px !important;
color: #fff !important;
font-family: var(--jc-font-head);
font-size: 18px;
font-weight: 800;
line-height: 1.4;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > a {
min-height: 49px;
padding: 14px 22px !important;
border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
border-radius: 0;
background: transparent !important;
color: #fff !important;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 700;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li:first-child > a {
border-top: 1px solid rgba(255, 255, 255, .2);
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > a:hover,
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li.wpb-submenu-indicator-minus > a,
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li.current-menu-ancestor > a,
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li.current_page_ancestor > a {
background: #073d70 !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion ul ul {
margin: 0 !important;
padding: 5px 0 7px !important;
background: #0b518d !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > ul li > a {
min-height: 30px;
padding: 4px 20px 4px 42px !important;
border: 0 !important;
border-left: 4px solid transparent !important;
border-radius: 0;
background: transparent !important;
color: #eef5ff !important;
font-family: var(--jc-font-body);
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.35;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > ul li > a:hover {
color: #fff !important;
background: rgba(255, 255, 255, .07) !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion li.current-menu-item > a,
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion li.current_page_item > a {
border-left-color: #ffd45c !important;
color: #fff !important;
font-weight: 700 !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb-submenu-indicator {
color: #fff;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .jc-sidebar-section-title-light {
padding-bottom: 10px !important;
color: #dcecff !important;
font-size: 14px;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .gallery-link,
body.jc-v2.jc-family-cla:not(.home) #left-sidebar > .inside-left-sidebar > .widget-title:not(.jc-sidebar-section-title) {
padding-right: 22px;
padding-left: 22px;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .ebook-rainbow-link {
margin-top: 4px;
font-family: var(--jc-font-head);
font-size: 12px;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .jc-sidebar-spacer-lg {
padding-bottom: 0;
}
/* Densité des résultats conforme à la maquette : quatre cartes par rangée. */
@media (min-width: 1101px) {
body.jc-v2.jc-family-cla:not(.home) .grid-item,
body.jc-v2.jc-family-cla:not(.home) .grid-sizer {
width: calc(25% - 15px);
}
}
body.jc-v2.jc-family-cla:not(.home) .mp-filter-bar {
margin: 10px 0 22px;
padding: 12px 16px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-md);
background: #fafbfe;
}
@media (max-width: 900px) {
body.jc-v2.jc-family-cla:not(.home) #page.grid-container {
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 22px 18px 50px;
background: #fff;
}
body.jc-v2.jc-family-cla:not(.home) #content.site-content {
display: block;
}
body.jc-v2.jc-family-cla:not(.home) #primary,
body.jc-v2.jc-family-cla:not(.home) .content-area {
position: static;
float: none !important;
width: 100% !important;
padding: 0 !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar {
display: none;
}
}
.gallery-grid img {
width: 100%;
height: auto;
max-height: 283px;
object-fit: cover;
border: 1px rgba(0, 0, 0, 0.2) solid;
border-radius: 4px;
}
/* Mandalas : vignettes carrées (grille principale, pas les blocs extras) */
body.jc-family-cla.page-id-4 .gallery-grid img,
body.jc-blog-2.page-id-63 .gallery-grid img,
body.jc-family-cle.page-id-374 .gallery-grid img,
body.jc-family-mdl .gallery-grid img {
aspect-ratio: 1 / 1;
max-height: none;
}
/* Reset carré dans les blocs extras (dernières additions, populaires, etc.) */
.jc-extra-block .gallery-grid img {
aspect-ratio: auto !important;
max-height: 283px !important;
}
/* Reserve space for NGG thumbnail images to prevent CLS
* when Ezoic lazy-loading strips width/height HTML attributes. */
.gallery-grid .ngg-album-link picture {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
}
.gallery-grid .ngg-album-link img.Thumb {
aspect-ratio: 1 / 1;
object-fit: cover;
}
@media (max-width: 768px) {
.gallery-grid-ad-min {
display: none !important;
}
}
@media (min-width: 768px) {
.gallery-grid-ad-min-mobile {
display: none !important;
}
}
/* Autocomplete search dropdown */
.jc-suggest-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--jc-line, #e6e8f0);
border-radius: 12px;
z-index: 9999;
box-shadow: 0 18px 45px rgba(14,29,66,.2);
max-height: min(420px, 60vh);
overflow-y: auto;
padding: 5px;
}
.jc-suggest-dropdown:empty {
display: none;
}
.jc-suggest-item {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 12px;
text-decoration: none;
color: #3a3a3a;
font-size: 14px;
border-bottom: 1px solid #f0f2f6;
border-radius: 8px;
}
.jc-suggest-item:last-child {
border-bottom: none;
}
.jc-suggest-item:hover {
background: #f1f5fd;
}
.jc-suggest-item.jc-suggest-active {
background: #e8f1fb;
border-left: 3px solid #0b75b5;
padding-left: 9px;
}
.jc-suggest-icon {
margin-right: 8px;
font-size: 14px;
flex-shrink: 0;
}
.jc-suggest-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inside-header {
padding-top: 0px !important;
}
.grayborder {
border: solid 1px lightgray;
}
.widget_text {
background-color: rgba(0, 0, 0, 0)!important;
}
.widget_nav_menu {
background-color: rgba(0, 0, 0, 0)!important;
}
.widget_nav_menu a {
color: white!important;
}
.widget-title {
color:#b8c5d9!important;
}
/*.inside-header {
background-image: linear-gradient(90deg,#003872,#c60aa5);
}*/
.inside-left-sidebar, .inside-right-sidebar, .site-main {
margin: 0px !important;
}
.container-2 input#search {
background-color:#ffffff!important;
border:0px!important;
-webkit-appearance: none;
appearance: none;
}
.container-2 input#search:focus,
.container-2 input#search:active,
#box_search_mobile input#search:focus,
#box_search_mobile input#search:active,
#box_search_mobile input#search-mobile:focus,
#box_search_mobile input#search-mobile:active,
#box_search_mobile input[type="search"]:focus,
#box_search_mobile input[type="text"]:focus {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.searchelement {
background-color: #383838!important;
}
.jc-search-submit {
background-color: #003872 !important;
}
.jc-header-lang-switch {
float: right;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
}
.jc-header-lang-flag {
height: 10px;
width: 20px;
aspect-ratio: 2 / 1;
}
/* Menu accordeon */
div.nextend-accordion-menu-inner-container dl.level1 dt span {
line-height: normal!important;
}
div.nextend-accordion-menu-inner-container dl.level2 .inner {
padding: 1px 0px 2px 20px!important;
}
.desc_p {
margin-bottom: 0.5em;
}
.reaori_title {
font-size: 15px;
padding-bottom: 10px;
}
h2.reaori_title {
background-color: #003872;
color: white;
font-size: larger;
padding: 10px;
font-weight: normal;
border-radius: 5px;
}
h2.reaori_title a {
color: white;
}
body.jc-family-cle h2.reaori_title {
background-color: #016183;
}
/* Pagination (optimized: larger blocks + historical colors) */
.ngg-navigation {
font-size: 0.9em !important;
clear: both !important;
display: block !important;
padding-top: 50px !important;
text-align: center;
line-height: 2.2 !important;
}
.ngg-navigation a.page-numbers,
.ngg-navigation span.page-numbers,
.ngg-navigation span.current {
background: #003872 !important;
color: #fff !important;
border: none;
border-radius: 2px;
box-shadow: none;
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 48px;
height: 40px;
padding: 0 13px !important;
margin-right: 6px;
margin-bottom: 6px;
text-decoration: none;
font-size: 15px;
font-weight: bold;
line-height: 1.2;
box-sizing: border-box;
cursor: pointer !important;
}
.ngg-navigation span.current {
background: #5e7da5 !important;
}
.ngg-navigation a.page-numbers:hover,
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.current:hover {
background: #a78c43 !important;
color: #fff !important;
text-decoration: none !important;
}
.ngg-navigation a.next,
.ngg-navigation a.prev,
.ngg-navigation span.next,
.ngg-navigation span.prev {
background: transparent !important;
color: #003872 !important;
border: none !important;
padding: 0 !important;
margin-right: 6px;
margin-bottom: 6px;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 40px;
min-height: 40px;
font-size: 0 !important;
font-weight: bold;
line-height: 1;
position: relative;
}
.ngg-navigation a.prev::before,
.ngg-navigation span.prev::before,
.ngg-navigation a.next::before,
.ngg-navigation span.next::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
transform: translateY(3px);
}
.ngg-navigation a.prev::before,
.ngg-navigation span.prev::before {
border-right: 22px solid #003872;
}
.ngg-navigation a.next::before,
.ngg-navigation span.next::before {
border-left: 22px solid #003872;
}
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
color: #a78c43 !important;
}
.ngg-navigation a.prev:hover::before,
.ngg-navigation span.prev:hover::before {
border-right-color: #a78c43;
}
.ngg-navigation a.next:hover::before,
.ngg-navigation span.next:hover::before {
border-left-color: #a78c43;
}
.ngg-navigation .ellipsis {
color: #6582a6;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
padding: 0 4px;
font-size: 14px;
font-weight: bold;
}
.ngg-clear {
clear: both;
}
/* Album pages: bigger gallery titles + spacing from thumbnail (no impact on image grids). */
.gallery-grid > .gallery-grid-item > .gallery-grid-album-lig1 {
font-size: 18px !important;
margin-top: 5px !important;
}
/* Related tags / Main galleries chips (works with legacy and rebuilt HTML) */
.tag-container,
.gal-container {
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 5px;
}
.tag,
.jc-meta-tag-chip,
.tag-container > a,
.tag-container .tag a {
display: inline-flex;
align-items: center;
padding: 4px 10px;
margin: 0;
border-radius: 5px;
background-color: var(--jc-tag-bg);
color: #2d2d2d !important;
text-decoration: none !important;
line-height: 1.25;
font-size: 13px;
transition: background-color 0.2s ease;
}
.gal,
.jc-meta-gallery-chip,
.gal-container > a,
.gal-container .gal a {
display: inline-flex;
align-items: center;
padding: 4px 10px;
margin: 0;
border-radius: 5px;
background-color: #a9d6ff;
color: #2d2d2d !important;
text-decoration: none !important;
line-height: 1.25;
font-size: 13px;
transition: background-color 0.2s ease;
}
.tag:hover,
.jc-meta-tag-chip:hover,
.tag-container > a:hover,
.tag-container .tag a:hover {
background-color: var(--jc-tag-hover);
}
.gal:hover,
.jc-meta-gallery-chip:hover,
.gal-container > a:hover,
.gal-container .gal a:hover {
background-color: #85c3fb;
}
.ngg-sort-control {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 14px;
font-size: 14px;
color: #4b4b4b;
}
.ngg-sort-control label {
font-weight: 600;
color: #3a3a3a;
}
.ngg-sort-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #fff;
border: 1px solid #d8dde3;
border-radius: 8px;
padding: 6px 28px 6px 10px;
font-size: 14px;
color: #1c1c1c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
background-image: linear-gradient(45deg, transparent 50%, #6b7785 50%),
linear-gradient(135deg, #6b7785 50%, transparent 50%),
linear-gradient(to right, #e9edf2, #e9edf2);
background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%, calc(100% - 28px) 50%;
background-size: 5px 5px, 5px 5px, 1px 14px;
background-repeat: no-repeat;
}
.ngg-sort-select:focus {
outline: none;
border-color: #8aa4c2;
box-shadow: 0 0 0 3px rgba(0, 56, 114, 0.15);
}
/* === CSS Typography (externalisé depuis generate_font_css() - optimisation PageSpeed) === */
body{background-color:#003872;color:#3a3a3a;}a, a:visited{color:var(--jc-blue-2);}a:hover, a:focus, a:active{color:#000000;}body .grid-container{max-width:1500px;}body, button, input, select, textarea{font-family:Helvetica;font-size:16px;}.entry-content > [class*="wp-block-"]:not(:last-child){margin-bottom:1.5em;}.main-navigation .main-nav ul ul li a{font-size:14px;}@media (max-width:768px){.main-title{font-size:30px;}h1{font-size:30px;}h2{font-size:25px;}}.top-bar{background-color:#636363;color:#ffffff;}.top-bar a,.top-bar a:visited{color:#ffffff;}.top-bar a:hover{color:#303030;}.site-header{background-color:#ffffff;color:#3a3a3a;}.site-header a,.site-header a:visited{color:#3a3a3a;}.main-title a,.main-title a:hover,.main-title a:visited{color:#222222;}.site-description{color:#757575;}.main-navigation,.main-navigation ul ul{background-color:#222222;}.main-navigation .main-nav ul li a,.menu-toggle{color:#ffffff;}.main-navigation .main-nav ul li:hover > a,.main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a{color:#ffffff;background-color:#3f3f3f;}button.menu-toggle:hover,button.menu-toggle:focus,.main-navigation .mobile-bar-items a,.main-navigation .mobile-bar-items a:hover,.main-navigation .mobile-bar-items a:focus{color:#ffffff;}.main-navigation .main-nav ul li[class*="current-menu-"] > a{color:#ffffff;background-color:#3f3f3f;}.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover,.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a{color:#ffffff;background-color:#3f3f3f;}.navigation-search input[type="search"],.navigation-search input[type="search"]:active{color:#3f3f3f;background-color:#3f3f3f;}.navigation-search input[type="search"]:focus{color:#ffffff;background-color:#3f3f3f;}.main-navigation ul ul{background-color:#3f3f3f;}.main-navigation .main-nav ul ul li a{color:#ffffff;}.main-navigation .main-nav ul ul li:hover > a,.main-navigation .main-nav ul ul li:focus > a,.main-navigation .main-nav ul ul li.sfHover > a{color:#ffffff;background-color:#4f4f4f;}.main-navigation .main-nav ul ul li[class*="current-menu-"] > a{color:#ffffff;background-color:#4f4f4f;}.main-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover,.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a{color:#ffffff;background-color:#4f4f4f;}.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{background-color:#ffffff;}.entry-meta{color:#595959;}.entry-meta a,.entry-meta a:visited{color:#595959;}.entry-meta a:hover{color:var(--jc-blue-2);}.sidebar .widget{background-color:#ffffff;}.sidebar .widget .widget-title{color:#000000;}.footer-widgets{background-color:#ffffff;}.footer-widgets .widget-title{color:#000000;}.site-info{color:#ffffff;background-color:#222222;}.site-info a,.site-info a:visited{color:#ffffff;}.site-info a:hover{color:#606060;}.footer-bar .widget_nav_menu .current-menu-item a{color:#606060;}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:#666666;background-color:#fafafa;border-color:#cccccc;}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:#666666;background-color:#ffffff;border-color:#bfbfbf;}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.button:visited,a.wp-block-button__link:not(.has-background){color:#ffffff;background-color:#666666;}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#3f3f3f;}.generate-back-to-top,.generate-back-to-top:visited{background-color:rgba( 0,0,0,0.4 );color:#ffffff;}.generate-back-to-top:hover,.generate-back-to-top:focus{background-color:rgba( 0,0,0,0.6 );color:#ffffff;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-40px;width:calc(100% + 80px);max-width:calc(100% + 80px);}@media (max-width:768px){.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:30px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-30px;width:calc(100% + 60px);max-width:calc(100% + 60px);}}.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px;}.rtl .main-navigation .main-nav ul li.menu-item-has-children > a{padding-right:20px;}.one-container .sidebar .widget{padding:0px;}
.jc-nav-prev {
margin-right: auto;
}
.jc-nav-next {
margin-left: auto;
}
/* Mobile responsive */
@media (max-width: 600px) {
.jc-image-nav {
gap: 10px;
margin: 15px 0 12px;
}
}
/* Très petit écran : icônes seulement */
@media (max-width: 400px) {
.jc-nav-btn {
max-width: 50px;
padding: 10px;
}
.jc-nav-icon {
font-size: 20px;
}
}
/* === Harmonisation PRINT/DOWNLOAD/COLOR ONLINE === */
.sharify-container {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
padding: 5px 0 !important;
overflow: visible !important;
}
.sharify-container ul {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.sharify-container li {
list-style: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
flex: 1 1 0 !important;
max-width: calc((100% - 16px) / 3) !important;
min-width: 0 !important;
}
.sharify-container li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 16px !important;
min-height: 48px !important;
height: auto !important;
line-height: 1.2 !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
white-space: nowrap !important;
text-decoration: none !important;
color: #fff !important;
border: 0 !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
}
/* PRINT - Bleu (garde sa couleur d'origine) */
.sharify-container li.sharify-btn-vk a {
background: linear-gradient(135deg, #5a9fd4 0%, #4a8fc4 100%) !important;
}
.sharify-container li.sharify-btn-vk a:hover {
background: linear-gradient(135deg, #4a8fc4 0%, #3a7fb4 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
/* DOWNLOAD - Vert (garde sa couleur d'origine) */
.sharify-container li.sharify-btn-skype a {
background: linear-gradient(135deg, #61ba46 0%, #51aa36 100%) !important;
}
.sharify-container li.sharify-btn-skype a:hover {
background: linear-gradient(135deg, #51aa36 0%, #419a26 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
/* COLOR ONLINE - Rouge bordeaux (spécificité renforcée) */
.sharify-container li.sharify-btn-skype.sharify-btn-color-online a {
background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%) !important;
}
.sharify-container li.sharify-btn-skype.sharify-btn-color-online a:hover {
background: linear-gradient(135deg, #6b0000 0%, #4b0000 100%) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.sharify-container li a:active {
transform: translateY(0) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.sharify-icon {
font-size: 20px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sharify-icon img {
width: 20px !important;
height: 20px !important;
display: block !important;
}
.sharify-title {
font-size: 14px !important;
line-height: 1.2 !important;
}
/* === Navigation Précédent/Suivant (UX - réduction taux de rebond) === */
.jc-image-nav {
display: flex;
/* Alignée sur les bords du trio Print/Download/Color Online plutôt que centrée :
sans width:100%, le conteneur se réduit à son contenu et les margin auto de
.jc-nav-prev/.jc-nav-next restent sans effet — d'où un 3e cluster flottant. */
width: 100%;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.jc-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
color: #fff !important;
text-decoration: none;
border-radius: 6px;
font-size: 14px; /* aligné sur .sharify-container li a */
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
.jc-nav-btn:hover {
background: linear-gradient(135deg, #7f8c8d 0%, #6c7a7b 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
color: #fff !important;
}
.jc-nav-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.jc-nav-icon {
font-size: 20px;
line-height: 1;
font-weight: bold;
}
.jc-nav-text {
font-size: 16px;
line-height: 1.2;
}
/* Tablette : réduire padding */
@media (max-width: 768px) {
.sharify-container li a {
padding: 10px 12px !important;
font-size: 13px !important;
}
.sharify-icon img {
width: 18px !important;
height: 18px !important;
}
.sharify-title {
font-size: 13px !important;
}
.jc-nav-btn {
padding: 10px 18px;
font-size: 15px;
}
.jc-nav-icon {
font-size: 18px;
}
.jc-nav-text {
font-size: 15px;
}
}
/* Mobile : texte masqué, icône seule */
@media (max-width: 600px) {
.sharify-container li a {
padding: 12px !important;
gap: 0 !important;
}
.sharify-title {
display: none !important;
}
.sharify-icon {
font-size: 24px !important;
}
.sharify-icon img {
width: 24px !important;
height: 24px !important;
}
.jc-nav-btn {
padding: 12px 16px;
gap: 0;
}
.jc-nav-text {
display: none;
}
.jc-nav-icon {
font-size: 24px;
}
}
/* ===== Sidebar Left (migre depuis sidebar-left.css) ===== */
.jc-sidebar-section-title {
padding-top: 10px;
}
.jc-sidebar-section-title-light {
color: whitesmoke;
}
.gallery-link {
padding-bottom: 5px;
}
.gallery-link a {
color: #fff;
font-size: 14px;
}
.grid-item-lig2 a,
.gallery-grid-item-lig2 a,
.grid-item-lig2 a:hover,
.gallery-grid-item-lig2 a:hover,
.grid-item-lig2 a:focus,
.gallery-grid-item-lig2 a:focus {
text-decoration: none !important;
}
/* Restore grid flow after progressive CSS dedup in style.css */
.grid-item,
.grid-sizer,
.grid-ad-min,
.grid-ad-min-mobile {
float: left;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.ebook-rainbow-link {
font-size: 15px;
font-weight: 700;
background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e3ff, #6a67ce, #ff6ec4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
margin-top: 10px;
text-decoration: none;
}
.ebook-rainbow-link:hover {
text-decoration: underline;
}
.jc-sidebar-spacer {
clear: left;
}
.jc-sidebar-spacer-sm {
padding-bottom: 30px;
}
.jc-sidebar-spacer-lg {
padding-bottom: 100px;
}
body.jc-family-cla,
body.jc-family-cla .site-header {
background-color: #003872 !important;
}
body.jc-family-cle,
body.jc-family-cle .site-header {
background-color: #016183 !important;
}
/* ===== CSS optim scope (migre depuis jc-css-optim-scope.css) ===== */
.jc-extra-block {
padding-top: 20px;
padding-bottom: 10px;
}
.jc-extra-block-more {
padding-top: 20px;
padding-bottom: 10px;
}
.jc-extra-block-more-popular {
padding-top: 30px;
}
.jc-thumb-border {
border: 1px solid #b0b0b0;
}
/* Menu caret fallback: avoid tofu square if icon font is unavailable */
.main-navigation .dropdown-menu-toggle::before,
.main-navigation .menu-item-has-children > a .dropdown-menu-toggle::before {
content: "\25BE" !important;
font-family: inherit !important;
font-size: 1em;
font-weight: 700;
line-height: 1;
}
.main-navigation .sfHover > a .dropdown-menu-toggle::before,
.main-navigation .sub-menu-open > a .dropdown-menu-toggle::before {
content: "\25B4" !important;
}
/* Sidebar accordion: keep sub-menu items in regular weight */
#left-sidebar .wpb_category_n_menu_accordion > ul > li > ul li > a {
font-weight: 400 !important;
font-size: 15px !important;
}
.ngg-galleryoverview .ngg-gallery-thumbnail a:focus-visible,
.ngg-galleryoverview .ngg-gallery-thumbnail-box a:focus-visible,
.ngg-albumoverview a:focus-visible,
.ngg-album-compactbox a:focus-visible {
border-radius: 4px;
}
.ngg-galleryoverview .ngg-gallery-thumbnail span,
.ngg-galleryoverview .ngg-gallery-thumbnail-box span,
.ngg-galleryoverview .ngg-gallery-caption,
.ngg-albumoverview .ngg-albumtitle,
.ngg-albumoverview .ngg-albumdescription,
.ngg-album-compactbox .ngg-album-desc,
.ngg-album-compactbox .ngg-albumtitle {
color: #666666 !important;
}
/* Clamp long thumbnail descriptions on gallery/grid cards.
* The mask fade is an approximation for the "last lines in gray" effect. */
.gallery-grid-item > p:not(:has(img)),
.grid-item > p:not(:has(img)),
.gallery-grid-item > .gallery-grid-item-lig1,
.grid-item > .grid-item-lig1,
.gallery-grid-item > h3.ngg-thumb-title,
.grid-item > h3.ngg-thumb-title,
.gallery-grid-item > h3.grid-item-lig1,
.grid-item > h3.grid-item-lig1 {
line-height: 1.35;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
max-height: 8.1em;
position: relative;
}
@media (max-width: 768px) {
.gallery-grid-item > p:not(:has(img)),
.grid-item > p:not(:has(img)),
.gallery-grid-item > .gallery-grid-item-lig1,
.grid-item > .grid-item-lig1,
.gallery-grid-item > h3.ngg-thumb-title,
.grid-item > h3.ngg-thumb-title,
.gallery-grid-item > h3.grid-item-lig1,
.grid-item > h3.grid-item-lig1 {
-webkit-line-clamp: 6;
max-height: 8.1em;
}
}
/* FAQ section — pages catégorie (details/summary, contenu présent dans le DOM pour indexation) */
.jc-faq {
margin: 32px 0 24px;
max-width: 900px;
}
.jc-faq-title {
font-size: 1.2em;
margin: 0 0 12px;
color: #333;
}
.jc-faq-item {
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
.jc-faq-item:first-of-type {
border-top: 1px solid #e5e5e5;
}
.jc-faq-question {
list-style: none;
cursor: pointer;
padding: 16px 0;
font-weight: 700;
font-size: 1em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: #222;
}
.jc-faq-question::-webkit-details-marker { display: none; }
.jc-faq-question:hover { color: #c0392b; }
.jc-faq-icon {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: transform 0.22s ease;
flex-shrink: 0;
}
.jc-faq-item[open] .jc-faq-icon { transform: rotate(180deg); }
.jc-faq-answer {
padding: 0 0 16px 0;
color: #555;
line-height: 1.65;
}
.jc-faq-answer a { color: #c0392b; text-decoration: underline; }
.jc-faq-item[open] .jc-faq-answer {
animation: jc-faq-fade 0.25s ease;
}
@keyframes jc-faq-fade {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.jc-faq-question { font-size: 0.97em; padding: 13px 0; }
}
/* Homepage CLE + pages New/Most Popular — category cards grid */
.new-cats-section { margin: 4px 0 20px; }
.new-cats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 8px 12px; }
.new-cats-title { font-size: 1.1rem; font-weight: 600; color: #222;margin: 0px 0 10px; }
.new-cats-see-all { font-size: .82rem; color: var(--jc-blue-2); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.new-cats-see-all:hover { color: var(--jc-blue-2); text-decoration: underline; }
/* HP CLE uniquement — harmonisation avec les h2 de section Gutenberg */
body.jc-family-cle.home .new-cats-header { background-color: #016183; border-radius: 4px; padding: 10px 14px; }
body.jc-family-cle.home .new-cats-title { color: #fff; font-weight: 400; font-size: 1.1rem; }
body.jc-family-cle.home .new-cats-see-all { color: rgba(255,255,255,.8); font-size: .8rem; }
body.jc-family-cle.home .new-cats-see-all:hover { color: #fff; text-decoration: underline; }
/* sectionhp0 = même couleur/taille que new-cats-header ; sectionhp = gris bleuté, sans dégradé */
body.jc-family-cle.home .sectionhp0,
body.jc-family-cle.home h2.sectionhp0 { background-color: #016183 !important; background-image: none !important; color: #fff !important; font-size: 1.1rem !important; font-weight: 400 !important; padding: 10px 14px !important; border-radius: 4px; }
body.jc-family-cle.home .sectionhp,
body.jc-family-cle.home h2.sectionhp { background-color: #6b8fa8 !important; background-image: none !important; color: #fff !important; font-size: 1.1rem !important; font-weight: 400 !important; padding: 10px 14px !important; border-radius: 4px; }
body.jc-family-cle.home .sectionhp a,
body.jc-family-cle.home .sectionhp0 a { color: #fff !important; }
.section-pics-title { font-size: 1.15rem; font-weight: 700; color: #222; margin: 28px 0 10px; }
.new-cats-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.new-cat-card { position: relative; flex: 0 0 calc((100% - 48px) / 5); min-width: 0; background: #f2f2f2; border: 1px solid rgba(187,187,187,.4); padding: 10px 10px 8px; text-align: left; box-sizing: border-box; }
.new-cat-thumb { width: 100%; aspect-ratio: 1 / 1; border: 1px solid #a9a9a9; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 0 12px; overflow: hidden; box-sizing: border-box; }
.new-cat-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; border: 0; display: block; }
.new-cat-card a.new-cat-name { display: block; font-size: 18px; line-height: 1.3; color: var(--jc-blue-2); font-weight: 400; text-decoration: none; padding: 6px 0 8px; }
.new-cat-card a.new-cat-name:hover { color: #000; text-decoration: underline; }
.new-cat-badge { position: absolute; top: 5px; right: 5px; background: #e85d04; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; letter-spacing: .05em; }
.mp-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; margin: 8px 0 20px; background: #f8f4e8; border: 1px solid #e0d49a; border-radius: 8px; }
.mp-filter-label { font-weight: 600; font-size: .88rem; color: #555; white-space: nowrap; }
.mp-sort-select { padding: 6px 30px 6px 10px; border: 1px solid #c8b96e; border-radius: 6px; background: #fff; -webkit-appearance: none; appearance: none; font-size: .875rem; color: #333; cursor: pointer; transition: border-color .15s; }
.mp-sort-select:hover, .mp-sort-select:focus { border-color: #a07c10; outline: none; box-shadow: 0 0 0 2px rgba(200,160,20,.2); }
.mp-filter-sep { color: #ccc; font-size: 1.1rem; align-self: stretch; display: flex; align-items: center; }
.mp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-pill { padding: 5px 15px; border: 1px solid #c8b96e; border-radius: 20px; background: #fff; color: #555; font-size: .84rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; line-height: 1.4; text-decoration: none; display: inline-block; }
a.mp-pill, a.mp-pill:visited { color: #333; }
.mp-pill:hover { background: #f3e9c0; border-color: #a07c10; color: #333; text-decoration: none; }
.mp-pill.mp-active { background: #c8a820; border-color: #c8a820; color: #fff; font-weight: 600; }
@media (max-width: 600px) {
.new-cat-card { flex: 0 0 calc((100% - 24px) / 3); }
.mp-filter-bar { padding: 10px 12px; gap: 8px 10px; }
.mp-pill { padding: 4px 11px; font-size: .8rem; }
}
/* ===== sectionhp global (pages hors HP) ===== */
.sectionhp {
background-color: #003872;
color: #fff;
font-weight: 300;
font-size: 1.3rem;
padding: 10px 14px;
border-radius: 5px;
margin-top: 32px;
margin-bottom: 16px;
display: block;
}
.sectionhp a { color: #fff !important; text-decoration: none; }
.sectionhp a:hover { opacity: .85; }
body.jc-family-cle .sectionhp {
background-color: #016183;
}
/* Blocs cross-promo (nouveautés / populaires en bas des pages liste) */
.jc-crosspromo {
margin-top: 48px;
}
.jc-crosspromo h2.sectionhp:first-child,
.jc-crosspromo .sectionhp:first-child {
margin-top: 20px;
}
/* Espacement H1 sur pages liste */
.page-template-page-mostpopular .entry-title,
.page-template-page-new .entry-title {
margin-bottom: 24px;
}
/* All Galleries / Thematic: vignettes carrées centrées */
.page-template-page-allgalleries .grid-item {
height: auto !important;
text-align: center;
}
.page-template-page-allgalleries .grid-item img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Header + menu regroupes dans un seul contexte sticky : aucun script de
scroll, aucune classe injectee et donc aucun decalage de mise en page. Le
mobile conserve son espace vertical complet. */
body.jc-v2 {
--jc-sticky-stack-height: 142px;
}
@media (min-width: 1001px) {
body.jc-v2 .jc-header-stack {
position: sticky;
top: 0;
z-index: 1000;
}
body.admin-bar.jc-v2 .jc-header-stack {
top: 32px;
}
body.jc-v2 #left-sidebar,
body.jc-v2 #right-sidebar {
scroll-margin-top: calc(var(--jc-sticky-stack-height) + 18px);
}
}
/* =====================================================================
REFONTE 2026 — HOMEPAGES CLA / CLE
Transposition progressive des maquettes statiques dans les contenus
dynamiques existants. Aucun changement de source de donnees ici.
===================================================================== */
/* La maquette Kids conserve le bleu pour les actions ; l'orange reste un
accent joueur et ne remplace plus la couleur de tous les liens. */
body.jc-family-cle {
--jc-blue: #06457f;
--jc-blue-deep: #04325f;
--jc-orange: #f9a32b;
--jc-accent: #ffd86b;
--jc-ink: #1f2533;
--jc-muted: #626b7a;
--jc-line: #dce5f2;
--jc-bg-soft: #f3f7fc;
--jc-bg-soft-2: #eaf4ff;
}
/* Shell plus calme, identique à l'esprit des deux prototypes. */
.jc-v2 #page {
background: #f6f8fc;
}
.jc-v2:not(.home) .inside-article {
border-radius: var(--jc-r-lg);
box-shadow: 0 14px 38px -34px rgba(18, 52, 126, .52);
}
.jc-v2 .entry-content h2,
.jc-v2 .entry-content h3 {
font-family: var(--jc-font-head);
}
/* ---------- CLA : homepage historique, rendue comme la refonte ---------- */
body.jc-family-cla.page-template-page-hp2 #right-sidebar {
display: none !important;
}
body.jc-family-cla.page-template-page-hp2 #primary,
body.jc-family-cla.page-template-page-hp2 .content-area {
float: none !important;
position: relative;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
body.jc-family-cla.page-template-page-hp2 #primary[class*="push-"],
body.jc-family-cla.page-template-page-hp2 .content-area[class*="push-"] {
left: 0 !important;
}
body.jc-family-cla.page-template-page-hp2 .site-main {
margin: 0 !important;
}
body.jc-family-cla.page-template-page-hp2 .jc-home-legacy {
width: min(100%, var(--jc-container));
margin: 0 auto;
padding: 34px 28px 58px;
background: #fff;
}
/* Hero : même gradient, même échelle et même respiration que la maquette. */
body.jc-family-cla.page-template-page-hp2 h1.sectionhp {
display: flex;
min-height: 176px;
align-items: center;
justify-content: center;
margin: -34px -28px 34px !important;
padding: 42px 28px !important;
border: 0;
border-radius: 0 0 24px 24px !important;
background: linear-gradient(145deg, var(--jc-blue) 0%, var(--jc-blue-deep) 100%) !important;
color: #fff !important;
font-family: var(--jc-font-head);
font-size: clamp(30px, 4vw, 46px) !important;
font-weight: 800 !important;
line-height: 1.12;
letter-spacing: -.025em;
text-align: center;
text-transform: none;
box-shadow: inset 0 -1px rgba(255, 255, 255, .08);
}
/* Titres de sections sans les anciens grands bandeaux pleins. */
body.jc-family-cla.page-template-page-hp2 h2.sectionhp,
body.jc-family-cla.page-template-page-hp2 .sectionhp:not(h1) {
display: flex;
align-items: center;
gap: 11px;
margin: 42px 0 18px !important;
padding: 0 !important;
border: 0;
border-radius: 0;
background: transparent !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-head);
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.25;
}
body.jc-family-cla.page-template-page-hp2 h2.sectionhp::before,
body.jc-family-cla.page-template-page-hp2 .sectionhp:not(h1)::before {
content: "";
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--jc-bg-soft-2);
box-shadow: inset 0 0 0 9px #fff, 0 0 0 2px var(--jc-bg-soft-2);
}
body.jc-family-cla.page-template-page-hp2 h2.sectionhp a,
body.jc-family-cla.page-template-page-hp2 .sectionhp:not(h1) a {
color: var(--jc-ink) !important;
}
body.jc-family-cla.page-template-page-hp2 h2.sectionhp a:hover,
body.jc-family-cla.page-template-page-hp2 .sectionhp:not(h1) a:hover {
color: var(--jc-blue-2) !important;
opacity: 1;
}
/* Catégories adultes : cartes plus nettes, proches du prototype. */
body.jc-family-cla.page-template-page-hp2 .supgal {
width: calc(25% - 16px) !important;
min-height: 286px;
height: auto !important;
margin: 0 8px 18px !important;
padding: 0 0 14px !important;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg) !important;
background: #fff !important;
box-shadow: var(--jc-shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
}
body.jc-family-cla.page-template-page-hp2 .supgal:hover {
transform: translateY(-3px);
box-shadow: var(--jc-shadow-pop);
}
body.jc-family-cla.page-template-page-hp2 .supgalimgtxt {
overflow: hidden;
border-radius: calc(var(--jc-r-lg) - 1px) calc(var(--jc-r-lg) - 1px) 0 0;
background: var(--jc-bg-soft);
}
body.jc-family-cla.page-template-page-hp2 .supgalimg {
display: block;
width: 100% !important;
height: 154px;
object-fit: cover;
transition: none;
}
body.jc-family-cla.page-template-page-hp2 .supgal:hover .supgalimg {
transform: none;
}
body.jc-family-cla.page-template-page-hp2 .supgaltxt {
right: 0;
bottom: 0;
left: 0;
padding: 24px 14px 11px;
background: linear-gradient(transparent, rgba(17, 28, 54, .88));
color: #fff;
font-family: var(--jc-font-head);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
text-shadow: none;
}
body.jc-family-cla.page-template-page-hp2 .supgaltxt a {
color: #fff;
text-decoration: none;
}
body.jc-family-cla.page-template-page-hp2 .linkhp {
padding: 12px 14px 0;
color: var(--jc-muted);
font-size: 12.5px;
line-height: 1.55;
}
body.jc-family-cla.page-template-page-hp2 .linkhp a {
display: inline-block;
margin: 2px 3px 2px 0;
padding: 3px 8px;
border-radius: var(--jc-r-pill);
background: var(--jc-bg-soft);
color: var(--jc-blue-2);
text-decoration: none;
transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.jc-family-cla.page-template-page-hp2 .linkhp a:hover,
body.jc-family-cla.page-template-page-hp2 .linkhp a:focus-visible {
background: var(--jc-accent);
color: var(--jc-blue) !important;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 5px 12px -8px rgba(11, 81, 141, .75);
outline: none;
}
/* Dessins populaires / nouveaux : cartes régulières, images entières. */
body.page-template-page-hp2 .gallery-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
body.page-template-page-hp2 .gallery-grid > div:not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile) {
width: 100%;
max-width: none;
min-width: 0;
padding: 8px 8px 12px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg);
background: #fff;
box-shadow: var(--jc-shadow-card);
}
body.page-template-page-hp2 .gallery-grid img {
width: 100%;
aspect-ratio: 1 / 1;
max-height: none;
border: 0 !important;
border-radius: calc(var(--jc-r-lg) - 5px);
background: #fff;
object-fit: contain;
}
body.page-template-page-hp2 .gallery-grid .grid-item-lig1,
body.page-template-page-hp2 .gallery-grid .gallery-grid-item-lig1 {
margin: 10px 4px 0 !important;
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: 13px;
font-weight: 600;
}
body.page-template-page-hp2 .gallery-grid .grid-item-lig2,
body.page-template-page-hp2 .gallery-grid .gallery-grid-item-lig2 {
margin: 5px 4px 0 !important;
color: var(--jc-muted);
font-size: 11.5px;
}
/* Tags / peintres : panneaux doux plutôt que nuages flottants nus. */
body.jc-family-cla.page-template-page-hp2 .ngg-tagcloud {
display: block;
margin-top: 14px;
padding: 18px 20px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg);
background: var(--jc-bg-soft);
}
body.jc-family-cla.page-template-page-hp2 .ngg-tagcloud ul.wp-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.jc-family-cla.page-template-page-hp2 .ngg-tagcloud ul.wp-tag-cloud li {
float: none;
height: auto;
margin: 0;
}
body.jc-family-cla.page-template-page-hp2 .ngg-tagcloud ul.wp-tag-cloud li a {
display: inline-flex;
align-items: center;
min-height: 35px;
height: auto;
padding: 7px 12px;
border: 1px solid #dbe3f5;
border-radius: var(--jc-r-pill);
background: #fff;
color: var(--jc-blue-2);
font-family: var(--jc-font-head);
font-size: 12.5px !important;
font-weight: 600;
text-decoration: none;
}
/* Artistes partenaires : avatars circulaires comme dans la maquette. */
body.jc-family-cla.page-template-page-hp2 .hpartist {
width: calc(16.666% - 12px);
height: auto;
min-height: 130px;
margin: 0 6px 18px;
padding: 8px;
border: 0;
background: transparent;
color: var(--jc-muted);
text-align: center;
}
body.jc-family-cla.page-template-page-hp2 .hpartist .supgalimgtxt {
width: 92px;
height: 92px;
margin: 0 auto 8px;
overflow: hidden;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: 0 10px 24px -14px rgba(20, 30, 70, .62);
}
body.jc-family-cla.page-template-page-hp2 .hpartist .supgalimg {
width: 100% !important;
height: 100%;
object-fit: cover;
}
/* Promotions eBook / coloriage en ligne : le HTML partagé garde ses données,
cette enveloppe permet au thème V2 de reprendre le panneau de la maquette. */
body.jc-family-cla.page-template-page-hp2 .jc-home-feature > .no-ads,
body.jc-family-cla.page-template-page-hp2 .jc-home-feature > div:first-child {
margin: 42px 0 !important;
padding: clamp(24px, 4vw, 46px) !important;
border: 1px solid var(--jc-line) !important;
border-radius: var(--jc-r-xl) !important;
background: linear-gradient(135deg, #f4f7fd 0%, #edf2fb 100%) !important;
box-shadow: var(--jc-shadow-card) !important;
}
body.jc-family-cla.page-template-page-hp2 .jc-home-feature h2 {
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: clamp(23px, 3vw, 32px) !important;
font-weight: 800;
letter-spacing: -.02em;
}
body.jc-family-cla.page-template-page-hp2 .jc-home-feature p {
color: var(--jc-muted);
line-height: 1.65;
}
body.jc-family-cla.page-template-page-hp2 .jc-home-feature a.button {
border: 0 !important;
border-radius: var(--jc-r-pill) !important;
background: var(--jc-accent) !important;
color: var(--jc-blue) !important;
font-family: var(--jc-font-head);
font-size: 14px !important;
font-weight: 800;
box-shadow: 0 8px 20px -14px rgba(18, 52, 126, .7);
}
body.jc-family-cla.page-template-page-hp2 .jc-home-feature img {
border-radius: var(--jc-r-lg) !important;
box-shadow: 0 18px 42px -28px rgba(20, 30, 70, .65);
}
/* ---------- CLE : design uniquement, structure et longue liste conservées ---------- */
/* L'accueil Kids de la maquette est une page pleine largeur : l'ancienne sidebar
réduisait le contenu et restait collée au bord sur les grands écrans. */
body.jc-v2.jc-family-cle.home #left-sidebar,
body.jc-v2.jc-family-cle.home #right-sidebar {
display: none !important;
}
body.jc-v2.jc-family-cle.home #primary,
body.jc-v2.jc-family-cle.home .content-area {
position: relative;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
float: none !important;
}
body.jc-v2.jc-family-cle.home #primary[class*="push-"],
body.jc-v2.jc-family-cle.home .content-area[class*="push-"] {
left: 0 !important;
}
body.jc-v2.jc-family-cle.home .site-main {
margin: 0 !important;
}
/*
* Sur CLE, la page d'accueil live est encore servie par page-template-default
* et n'a donc pas toujours le wrapper .jc-home-legacy. L'article devient alors
* lui-meme le conteneur 1180 px (+ 2 gouttieres de 28 px) de la refonte.
*/
body.jc-v2.jc-family-cle.home #primary .inside-article {
width: min(100%, var(--jc-container));
max-width: var(--jc-container);
margin: 0 auto !important;
padding: 34px 28px 58px !important;
border-radius: 0;
background: #fff;
box-shadow: none;
}
body.jc-v2.jc-family-cle.home .jc-home-legacy {
width: min(100%, var(--jc-container));
margin: 0 auto;
padding: 34px 28px 58px;
background: #fff;
}
body.jc-family-cle.home .new-cats-section {
margin: 26px 0 34px;
padding: 20px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-lg);
background: #fff;
box-shadow: var(--jc-shadow-card);
}
body.jc-family-cle.home .new-cats-header {
margin: 0 0 16px;
padding: 0 !important;
border-radius: 0;
background: transparent !important;
}
body.jc-family-cle.home .new-cats-title {
margin: 0;
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: 20px;
font-weight: 800;
}
body.jc-family-cle.home .new-cats-see-all {
color: var(--jc-blue-2);
font-family: var(--jc-font-head);
font-size: 13px;
font-weight: 700;
}
body.jc-family-cle.home .new-cats-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
body.jc-family-cle.home .new-cat-card {
min-width: 0;
padding: 7px 7px 11px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-md);
background: #fff;
box-shadow: none;
}
body.jc-family-cle.home .new-cat-thumb {
margin: 0 0 9px;
border: 0;
border-radius: 8px;
background: var(--jc-bg-soft);
}
body.jc-family-cle.home .new-cat-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: center;
}
body.jc-family-cle.home .new-cat-card a.new-cat-name {
padding: 0 4px;
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: 12.5px;
font-weight: 700;
}
body.jc-family-cle.home .new-cat-badge {
top: 12px;
right: auto;
left: 12px;
display: inline-flex;
width: auto;
max-width: calc(100% - 24px);
white-space: nowrap;
padding: 4px 7px;
border-radius: var(--jc-r-pill);
background: var(--jc-orange);
}
body.jc-family-cle.home .sectionhp,
body.jc-family-cle.home h2.sectionhp,
body.jc-family-cle.home .sectionhp0,
body.jc-family-cle.home h2.sectionhp0 {
margin: 36px 0 16px !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--jc-line);
border-radius: 0;
background: transparent !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-head);
font-size: 21px !important;
font-weight: 800 !important;
}
body.jc-family-cle.home .sectionhp a,
body.jc-family-cle.home .sectionhp0 a {
color: var(--jc-ink) !important;
}
/* La liste CLE reste longue, mais chaque élément devient une carte cohérente. */
body.jc-family-cle.home .gallery-grid > div:not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile) {
padding: 7px 7px 12px;
border: 1px solid var(--jc-line);
border-radius: var(--jc-r-md);
background: #fff;
box-shadow: var(--jc-shadow-card);
}
body.jc-family-cle.home .gallery-grid img,
body.jc-family-cle.home .gallery-grid .ngg-album-link img.Thumb {
aspect-ratio: 1 / 1;
max-height: none;
border: 0;
border-radius: 8px;
background: var(--jc-bg-soft);
object-fit: contain;
}
body.jc-family-cle.home .gallery-grid-item-lig1,
body.jc-family-cle.home .grid-item-lig1 {
margin: 9px 4px 0 !important;
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: 12.5px;
font-weight: 700;
}
/* V2: every coloring-page thumbnail uses the same square canvas.
contain keeps portrait and landscape drawings fully visible instead of
cropping them; category covers and artist portraits use other selectors. */
body.jc-v2 .grid-item img:not(.avatar):not(.supgalimg),
body.jc-v2 .gallery-grid-item img:not(.avatar):not(.supgalimg),
body.jc-v2 .ngg-gallery-thumbnail img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain !important;
object-position: center;
background: #fff;
}
body.jc-v2 .jc-more-recent-link,
body.jc-v2 .jc-extra-block-more {
margin-top: 30px !important;
}
/* Header desktop : la liste principale ne doit pas rogner les sous-menus.
Les états hover, sfHover (clavier/JS) et toggled-on (clic) sont couverts. */
@media (min-width: 761px) {
.jc-v2 .main-navigation .main-nav > ul {
overflow: visible;
}
.jc-v2 .main-navigation:not(.toggled) .main-nav > ul > li:hover > ul,
.jc-v2 .main-navigation:not(.toggled) .main-nav > ul > li.sfHover > ul,
.jc-v2 .main-navigation:not(.toggled) .main-nav > ul > li > ul.toggled-on {
left: 0;
height: auto;
overflow: visible;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.jc-v2 .main-navigation:not(.toggled) .main-nav ul ul li:hover > ul,
.jc-v2 .main-navigation:not(.toggled) .main-nav ul ul li.sfHover > ul,
.jc-v2 .main-navigation:not(.toggled) .main-nav ul ul li > ul.toggled-on {
top: 0;
left: 100%;
height: auto;
overflow: visible;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
@media (max-width: 980px) {
body.jc-family-cla.page-template-page-hp2 .supgal {
width: calc(50% - 16px) !important;
}
body.page-template-page-hp2 .gallery-grid,
body.jc-family-cle.home .new-cats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.jc-family-cla.page-template-page-hp2 .hpartist {
width: calc(25% - 12px);
}
}
@media (max-width: 600px) {
body.jc-v2.jc-family-cle.home #primary .inside-article {
padding: 24px 16px 42px !important;
}
body.jc-v2.jc-family-cle.home .jc-home-legacy {
padding: 24px 16px 42px;
}
body.jc-family-cla.page-template-page-hp2 .jc-home-legacy {
padding: 24px 16px 42px;
}
body.jc-family-cla.page-template-page-hp2 h1.sectionhp {
min-height: 138px;
margin: -24px -16px 26px !important;
padding: 32px 18px !important;
font-size: 29px !important;
}
body.jc-family-cla.page-template-page-hp2 .supgal {
width: calc(50% - 10px) !important;
min-height: 0;
margin: 0 5px 12px !important;
}
body.jc-family-cla.page-template-page-hp2 .supgalimg {
height: 118px;
}
body.jc-family-cla.page-template-page-hp2 .supgaltxt {
font-size: 13px;
}
body.page-template-page-hp2 .gallery-grid,
body.jc-family-cle.home .new-cats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
body.jc-family-cla.page-template-page-hp2 .hpartist {
width: calc(33.333% - 10px);
margin-right: 5px;
margin-left: 5px;
}
body.jc-family-cle.home .new-cats-section {
padding: 15px;
}
}
/* Menu lateral desktop : sticky, mais toujours consultable dans la hauteur visible. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cla:not(.home) #left-sidebar {
position: sticky;
top: 18px;
align-self: start;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .inside-left-sidebar {
position: static !important;
top: auto !important;
max-height: calc(100vh - 36px);
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-color: rgba(255, 255, 255, .4) transparent;
scrollbar-width: thin;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .inside-left-sidebar::-webkit-scrollbar {
width: 6px;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .inside-left-sidebar::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, .4);
}
}
/* =====================================================================
COMPOSANT PARTAGE — GRILLES DE COLORIAGES V2
Une seule definition pour les galeries, nouveautes, populaires,
croisements et recommandations. #crosscolor et .jc-extra-block gardent
la compatibilite avec les fragments HTML deja presents dans les caches ;
les nouveaux fragments portent directement .jc-coloring-grid.
===================================================================== */
body.jc-v2 .jc-coloring-grid,
body.jc-v2 .entry-content > .gallery-grid,
body.jc-v2.jc-gallery-page .gallery-grid,
body.jc-v2 .jc-extra-block .gallery-grid,
body.jc-v2 .crosscontent .gallery-grid,
body.jc-v2 #crosscolor > .gallery-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
margin: 20px 0 !important;
padding: 0 !important;
}
body.jc-v2 .jc-coloring-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .entry-content > .gallery-grid > :not(br):not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2.jc-gallery-page .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .jc-extra-block .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .crosscontent .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 #crosscolor > .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle) {
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 0 12px !important;
overflow: hidden;
border: 1px solid #e3e7ef !important;
border-radius: 13px !important;
background: #fff !important;
box-shadow: 0 7px 18px rgba(25, 39, 72, .055);
}
/* NextGEN insère encore des
entre certaines rangées. En CSS Grid,
ils ne doivent ni occuper une cellule ni recevoir le style d'une carte. */
body.jc-v2 .jc-coloring-grid > br,
body.jc-v2 .entry-content > .gallery-grid > br {
display: none !important;
}
body.jc-v2 .jc-coloring-grid > div > p:first-child,
body.jc-v2 .entry-content > .gallery-grid > div > p:first-child,
body.jc-v2.jc-gallery-page .gallery-grid > div > p:first-child,
body.jc-v2 .jc-extra-block .gallery-grid > div > p:first-child,
body.jc-v2 .crosscontent .gallery-grid > div > p:first-child,
body.jc-v2 #crosscolor > .gallery-grid > div > p:first-child {
margin: 0 !important;
padding: 0 !important;
}
body.jc-v2 .jc-coloring-grid > div > a:first-child,
body.jc-v2 .jc-coloring-grid > div > p:first-child > a,
body.jc-v2 .entry-content > .gallery-grid > div > a:first-child,
body.jc-v2 .entry-content > .gallery-grid > div > p:first-child > a,
body.jc-v2.jc-gallery-page .gallery-grid > div > a:first-child,
body.jc-v2.jc-gallery-page .gallery-grid > div > p:first-child > a,
body.jc-v2 .jc-extra-block .gallery-grid > div > a:first-child,
body.jc-v2 .jc-extra-block .gallery-grid > div > p:first-child > a,
body.jc-v2 .crosscontent .gallery-grid > div > a:first-child,
body.jc-v2 .crosscontent .gallery-grid > div > p:first-child > a,
body.jc-v2 #crosscolor > .gallery-grid > div > a:first-child,
body.jc-v2 #crosscolor > .gallery-grid > div > p:first-child > a {
display: flex !important;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
width: 100%;
overflow: hidden;
background: #fff;
line-height: 0;
}
body.jc-v2 .jc-coloring-grid > div > a:first-child > picture,
body.jc-v2 .jc-coloring-grid > div > p:first-child > a > picture,
body.jc-v2 .entry-content > .gallery-grid > div > a:first-child > picture,
body.jc-v2 .entry-content > .gallery-grid > div > p:first-child > a > picture,
body.jc-v2.jc-gallery-page .gallery-grid > div > a:first-child > picture,
body.jc-v2.jc-gallery-page .gallery-grid > div > p:first-child > a > picture,
body.jc-v2 #crosscolor > .gallery-grid > div > a:first-child > picture,
body.jc-v2 #crosscolor > .gallery-grid > div > p:first-child > a > picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
body.jc-v2 .jc-coloring-grid > div > a:first-child img,
body.jc-v2 .jc-coloring-grid > div > p:first-child > a img,
body.jc-v2 .entry-content > .gallery-grid > div > a:first-child img,
body.jc-v2 .entry-content > .gallery-grid > div > p:first-child > a img,
body.jc-v2.jc-gallery-page .gallery-grid > div > a:first-child img,
body.jc-v2.jc-gallery-page .gallery-grid > div > p:first-child > a img,
body.jc-v2 .jc-extra-block .gallery-grid > div > a:first-child img,
body.jc-v2 .jc-extra-block .gallery-grid > div > p:first-child > a img,
body.jc-v2 .crosscontent .gallery-grid > div > a:first-child img,
body.jc-v2 .crosscontent .gallery-grid > div > p:first-child > a img,
body.jc-v2 #crosscolor > .gallery-grid > div > a:first-child img,
body.jc-v2 #crosscolor > .gallery-grid > div > p:first-child > a img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff;
object-fit: contain !important;
object-position: center;
}
body.jc-v2 .jc-coloring-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title),
body.jc-v2 .entry-content > .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title),
body.jc-v2.jc-gallery-page .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title),
body.jc-v2 .jc-extra-block .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title),
body.jc-v2 .crosscontent .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title),
body.jc-v2 #crosscolor > .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) {
display: -webkit-box;
min-height: 0;
max-height: none;
margin: 0 !important;
padding: 10px 12px 0 !important;
overflow: hidden;
color: #1c2030 !important;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.35;
text-align: left;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* Une seule typographie de légende, dans les galeries comme dans tous les blocs. */
body.jc-v2 .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) {
color: #1c2030 !important;
font-family: var(--jc-font-head) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
/* Les anciens fragments placent parfois le titre dans un lien ou un strong. */
body.jc-v2 .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) :is(a, strong) {
color: inherit !important;
font: inherit !important;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2,
body.jc-v2 .entry-content > .gallery-grid .grid-item-lig2,
body.jc-v2.jc-gallery-page .gallery-grid .grid-item-lig2,
body.jc-v2 .jc-extra-block .gallery-grid .grid-item-lig2,
body.jc-v2 .crosscontent .gallery-grid .grid-item-lig2,
body.jc-v2 #crosscolor > .gallery-grid .grid-item-lig2 {
margin: 0 !important;
padding: 4px 12px 1px !important;
color: #7a8291;
font-size: 11px;
line-height: 1.35;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a,
body.jc-v2 .entry-content > .gallery-grid .grid-item-lig2 a,
body.jc-v2.jc-gallery-page .gallery-grid .grid-item-lig2 a,
body.jc-v2 .jc-extra-block .gallery-grid .grid-item-lig2 a,
body.jc-v2 .crosscontent .gallery-grid .grid-item-lig2 a,
body.jc-v2 #crosscolor > .gallery-grid .grid-item-lig2 a {
color: var(--jc-blue-2) !important;
text-decoration: none;
text-underline-offset: 2px;
transition: color .16s ease, text-decoration-color .16s ease;
}
body.jc-v2 .gallery-grid .grid-item-lig2 a:hover,
body.jc-v2 .gallery-grid .grid-item-lig2 a:focus-visible {
color: var(--jc-gold, #d79a14) !important;
text-decoration: underline;
}
@media (max-width: 1100px) and (min-width: 761px) {
body.jc-v2 .jc-coloring-grid,
body.jc-v2 .entry-content > .gallery-grid,
body.jc-v2.jc-gallery-page .gallery-grid,
body.jc-v2 .jc-extra-block .gallery-grid,
body.jc-v2 .crosscontent .gallery-grid,
body.jc-v2 #crosscolor > .gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px) {
body.jc-v2 .jc-coloring-grid,
body.jc-v2 .entry-content > .gallery-grid,
body.jc-v2.jc-gallery-page .gallery-grid,
body.jc-v2 .jc-extra-block .gallery-grid,
body.jc-v2 .crosscontent .gallery-grid,
body.jc-v2 #crosscolor > .gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
}
/* 404 : aucun emplacement de sidebar et footer toujours hors de la grille interne. */
body.jc-v2.error404 #page.grid-container {
width: 100%;
max-width: var(--jc-page-container, 1500px) !important;
margin: 0 auto !important;
padding: 42px var(--jc-gutter) 64px !important;
}
body.jc-v2.error404 #content.site-content {
display: block !important;
width: 100% !important;
}
body.jc-v2.error404 #primary,
body.jc-v2.error404 #primary.content-area {
position: static !important;
left: auto !important;
float: none !important;
grid-column: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.jc-v2.error404 #left-sidebar,
body.jc-v2.error404 #right-sidebar {
display: none !important;
}
body.jc-v2.error404 .site-footer {
display: block !important;
position: relative !important;
left: 50% !important;
clear: both !important;
grid-column: 1 / -1 !important;
width: 100vw !important;
max-width: none !important;
margin-right: -50vw !important;
margin-left: -50vw !important;
float: none !important;
transform: none !important;
}
body.jc-v2.error404 .jc-footer,
body.jc-v2.error404 .jc-footer > .jc-container {
width: 100% !important;
max-width: none;
}
body.jc-v2.error404 .jc-footer > .jc-container {
max-width: var(--jc-container) !important;
margin: 0 auto !important;
}
@media (max-width: 760px) {
body.jc-v2.error404 #page.grid-container {
padding: 28px 18px 48px !important;
}
}
/* Titres des blocs transversaux : meme bleu que le header, le footer et le menu. */
body.jc-v2 h2.reaori_title,
body.jc-v2 .sectionhp,
body.jc-v2 h2.sectionhp {
background-color: var(--jc-blue) !important;
background-image: none !important;
}
/* Compatibilite avec les fragments de pagination encore presents en cache. */
body.jc-v2 .ngg-navigation .jc-pagination-label {
display: none !important;
}
/* Home KIDS : neutralise definitivement les dimensions legacy des categories. */
body.jc-v2.jc-family-cle.home #primary .new-cat-thumb {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
}
body.jc-v2.jc-family-cle.home #primary .new-cat-thumb img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
body.jc-v2.jc-family-cle.home #primary .new-cat-badge {
right: auto !important;
left: 12px !important;
display: inline-flex !important;
width: max-content !important;
max-width: calc(100% - 24px) !important;
}
/* Home Kids : hierarchie visuelle des rubriques et grille principale. */
body.jc-v2.jc-family-cle.home #primary .sectionhp0,
body.jc-v2.jc-family-cle.home #primary h2.sectionhp0 {
margin: 38px 0 22px !important;
padding: 14px 18px !important;
border: 0 !important;
border-radius: 10px !important;
background: #016183 !important;
color: #fff !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
box-shadow: 0 10px 24px -18px rgba(1, 97, 131, .72);
}
body.jc-v2.jc-family-cle.home #primary .sectionhp,
body.jc-v2.jc-family-cle.home #primary h2.sectionhp {
margin: 30px 0 14px !important;
padding: 12px 16px !important;
border: 1px solid #f1d7aa !important;
border-left: 5px solid var(--jc-orange) !important;
border-radius: 8px !important;
background: #fff7e9 !important;
color: #5d461c !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
box-shadow: none !important;
}
/* Les panneaux gris partagent exactement le traitement du bloc eBook.
Le selecteur d'attribut garde compatibles les fragments legacy en cache. */
body.jc-v2 :is(
.jc-gray-panel,
#crosscontent_gallery,
.no-ads[style*="background-color:#eeeeee"],
.no-ads[style*="background-color: #eeeeee"]
) {
border: 1px solid var(--jc-panel-border) !important;
border-radius: var(--jc-panel-radius) !important;
background: var(--jc-panel-gray) !important;
box-shadow: var(--jc-panel-shadow) !important;
}
/* Navigation entre sections et galeries : lecture rapide en deux groupes,
avec un survol discret plutôt qu'une accumulation de gros boutons. */
body.jc-v2 #crosscontent_gallery {
display: grid !important;
grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
gap: clamp(28px, 5vw, 64px);
float: none !important;
clear: both;
width: 100% !important;
margin: 40px 0 !important;
padding: 28px 30px !important;
overflow: hidden;
}
body.jc-v2 #crosscontent_gallery > div {
float: none !important;
width: auto !important;
min-width: 0;
}
body.jc-v2 #crosscontent_gallery h3 {
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid rgba(107, 111, 125, .18);
color: var(--jc-ink);
font-family: var(--jc-font-head);
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.35;
}
body.jc-v2 #crosscontent_gallery h3 b {
font-weight: 700;
}
body.jc-v2 #crosscontent_gallery div[style*="padding-bottom:3px"] {
padding: 0 !important;
}
body.jc-v2 #crosscontent_gallery a {
display: block;
width: fit-content;
max-width: calc(100% + 14px);
margin-left: -7px;
padding: 5px 7px;
border-radius: 7px;
color: var(--jc-blue-2);
line-height: 1.35;
text-decoration: none;
transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
body.jc-v2 #crosscontent_gallery a:hover,
body.jc-v2 #crosscontent_gallery a:focus-visible {
background: rgba(255, 216, 107, .38);
color: var(--jc-blue) !important;
text-decoration: none;
transform: translateX(2px);
}
body.jc-v2 #crosscontent_gallery a:focus-visible {
outline: 2px solid var(--jc-blue-2);
outline-offset: 2px;
}
@media (max-width: 760px) {
body.jc-v2 #crosscontent_gallery {
grid-template-columns: 1fr;
gap: 26px;
padding: 22px 20px !important;
}
}
/* Toute galerie réellement pleine largeur passe à cinq cartes sur desktop.
Les pages avec sidebar gardent leur grille quatre colonnes. */
@media (min-width: 1101px) {
body.jc-v2:is(.no-sidebar, .full-width-content) .gallery-grid,
body.jc-v2.jc-family-cle.home #primary .gallery-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* Résultats Kids : même shell large que les autres pages internes. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cle.page-template-page-search #page.grid-container {
width: 100% !important;
max-width: var(--jc-page-container, 1500px) !important;
margin: 0 auto !important;
padding: 26px var(--jc-gutter) 64px !important;
background: #fff;
}
body.jc-v2.jc-family-cle.page-template-page-search #content.site-content {
display: grid !important;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
width: 100%;
padding: 0 !important;
}
body.jc-v2.jc-family-cle.page-template-page-search #left-sidebar {
position: sticky;
top: 18px;
grid-column: 1;
width: auto !important;
min-width: 0;
padding: 0 !important;
float: none !important;
left: auto !important;
}
body.jc-v2.jc-family-cle.page-template-page-search #primary,
body.jc-v2.jc-family-cle.page-template-page-search .content-area {
position: static !important;
grid-column: 2;
width: auto !important;
min-width: 0;
max-width: none !important;
padding: 0 !important;
float: none !important;
left: auto !important;
}
}
body.jc-v2.jc-family-cle.page-template-page-search #primary .site-main,
body.jc-v2.jc-family-cle.page-template-page-search #primary .inside-article {
width: 100%;
max-width: none;
margin: 0 !important;
padding: 0 !important;
}
/* Cartes de coloriage : image dominante, titre principal compact et galerie
secondaire alignee en pied de carte. */
body.jc-v2 .jc-coloring-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .entry-content > .gallery-grid > :not(br):not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2.jc-gallery-page .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .jc-extra-block .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 .crosscontent .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle),
body.jc-v2 #crosscolor > .gallery-grid > :not(.gallery-grid-ad-min):not(.gallery-grid-ad-min-mobile):not(.grid-ad-min):not(.grid-ad-min-mobile):not(.adsbygoogle) {
display: flex !important;
flex-direction: column;
padding-bottom: 10px !important;
}
body.jc-v2 .gallery-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) {
margin: 0 !important;
padding: 10px 12px 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.38 !important;
letter-spacing: -.01em;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2,
body.jc-v2 .entry-content > .gallery-grid .grid-item-lig2,
body.jc-v2.jc-gallery-page .gallery-grid .grid-item-lig2,
body.jc-v2 .jc-extra-block .gallery-grid .grid-item-lig2,
body.jc-v2 .crosscontent .gallery-grid .grid-item-lig2,
body.jc-v2 #crosscolor > .gallery-grid .grid-item-lig2 {
margin-top: auto !important;
padding: 5px 12px 2px !important;
color: #7a8291 !important;
font-family: var(--jc-font-body);
font-size: 11px !important;
font-weight: 400;
line-height: 1.35;
}
body.jc-v2 .gallery-grid .grid-item-lig2 a,
body.jc-v2 .gallery-grid .grid-item-lig2 a u {
color: var(--jc-blue-2) !important;
text-decoration: none !important;
}
body.jc-v2 .gallery-grid .grid-item-lig2 a:hover,
body.jc-v2 .gallery-grid .grid-item-lig2 a:focus-visible {
color: var(--jc-gold, #d79a14) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
/* Carte coloriage canonique. Les pages Nouveautes et Populaires produisent le
meme composant, sans dependance au niveau de titre utilise par le template. */
body.jc-v2 .jc-coloring-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) {
display: -webkit-box !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 10px 12px 0 !important;
overflow: hidden;
color: #1c2030 !important;
font-family: var(--jc-font-head) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.38 !important;
letter-spacing: -.01em;
text-align: left;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body.jc-v2 .jc-coloring-grid :is(.grid-item-lig1, .gallery-grid-item-lig1, .ngg-thumb-title) :is(a, strong) {
color: inherit !important;
font: inherit !important;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2 {
display: block;
margin: auto 0 0 !important;
padding: 5px 12px 2px !important;
color: #7a8291 !important;
font-family: var(--jc-font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: left;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a,
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a u {
color: var(--jc-blue-2) !important;
font: inherit !important;
font-weight: 500 !important;
text-decoration: none !important;
}
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a:hover,
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a:focus-visible {
color: var(--jc-gold, #d79a14) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
@media (max-width: 900px) {
body.jc-v2.jc-family-cle.page-template-page-search #page.grid-container {
width: 100%;
max-width: 760px !important;
margin: 0 auto !important;
padding: 22px 18px 50px !important;
}
body.jc-v2.jc-family-cle.page-template-page-search #content.site-content {
display: block !important;
}
body.jc-v2.jc-family-cle.page-template-page-search #left-sidebar {
display: none !important;
}
body.jc-v2.jc-family-cle.page-template-page-search #primary,
body.jc-v2.jc-family-cle.page-template-page-search .content-area {
position: static !important;
width: 100% !important;
padding: 0 !important;
float: none !important;
left: auto !important;
}
}
body.jc-v2.jc-family-cle.home #primary :is(.sectionhp0, .sectionhp) a {
color: inherit !important;
}
/* Les introductions restent dans le flux : aucun cartouche gris. */
body.jc-v2.jc-family-cle.home #primary :is(.sectionhp0, .sectionhp) + p {
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--jc-muted) !important;
line-height: 1.55 !important;
box-shadow: none !important;
}
/* Cinq categories par rangee sur grand ecran, puis repli progressif. */
body.jc-v2.jc-family-cle.home #primary .gallery-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 14px !important;
}
@media (max-width: 1100px) {
body.jc-v2.jc-family-cle.home #primary .gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 600px) {
body.jc-v2.jc-family-cle.home #primary .gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 11px !important;
}
body.jc-v2.jc-family-cle.home #primary .sectionhp0,
body.jc-v2.jc-family-cle.home #primary h2.sectionhp0 {
padding: 12px 14px !important;
font-size: 18px !important;
}
body.jc-v2.jc-family-cle.home #primary .sectionhp,
body.jc-v2.jc-family-cle.home #primary h2.sectionhp {
padding: 10px 13px !important;
font-size: 16px !important;
}
}
/* KIDS — garde-fous communs aux pages internes.
Galerie, fiche coloriage, tags et recherche partagent le shell interne large,
quelles que soient les classes plus spécifiques ajoutées par WordPress. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cle:not(.home):not(.error404) #page.grid-container {
width: 100% !important;
max-width: var(--jc-page-container, 1500px) !important;
margin: 0 auto !important;
padding: 26px var(--jc-gutter) 64px !important;
background: #fff;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404).left-sidebar #content.site-content {
display: grid !important;
grid-template-columns: 220px minmax(0, 1fr);
align-items: start;
gap: 24px;
width: 100%;
padding: 0 !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404).left-sidebar #primary,
body.jc-v2.jc-family-cle:not(.home):not(.error404).left-sidebar .content-area {
position: static !important;
left: auto !important;
grid-column: 2;
grid-row: 1;
width: auto !important;
min-width: 0;
max-width: none !important;
padding: 0 !important;
float: none !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404).left-sidebar #left-sidebar {
position: sticky;
top: 18px;
left: 0 !important;
grid-column: 1;
grid-row: 1;
width: auto !important;
min-width: 0;
padding: 0 !important;
float: none !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404).left-sidebar #left-sidebar .inside-left-sidebar {
width: 100% !important;
margin: 0 !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
}
/* Les textes éditoriaux de galerie occupent la colonne utile complète. */
body.jc-v2.jc-gallery-page :is(.intro-page, .intro-page-full) {
width: 100% !important;
max-width: none !important;
}
body.jc-v2.jc-gallery-page :is(.intro-page, .intro-page-full) > * {
max-width: none !important;
}
/* L'introduction des rubriques Kids reste du texte éditorial, jamais un ancien
cartouche gris, y compris lorsque le contenu WordPress n'est pas adjacent au titre. */
body.jc-v2.jc-family-cle.home #primary .introhp {
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--jc-muted) !important;
line-height: 1.55 !important;
box-shadow: none !important;
}
/* Une galerie sans colonne latérale utilise cinq cartes sur desktop, y compris
si un template personnalisé n'ajoute pas les classes GP habituelles. */
@media (min-width: 1101px) {
body.jc-v2 #content.site-content:not(:has(> #left-sidebar)):not(:has(> #right-sidebar)) .gallery-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
/* Cartes de galeries mises en avant : meme rythme visuel que les cartes des
pages categorie, sans ancienne grande zone grise ni vignette minuscule. */
body.jc-v2 .new-cats-grid {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body.jc-v2 .new-cat-card {
position: relative;
min-width: 0;
height: 100%;
margin: 0 !important;
padding: 0 0 11px !important;
overflow: hidden;
border: 1px solid #e3e7ef !important;
border-radius: 13px !important;
background: #fff !important;
box-shadow: 0 7px 18px rgba(25, 39, 72, .055) !important;
}
body.jc-v2 .new-cat-card a.new-cat-name {
display: flex !important;
flex-direction: column;
height: 100%;
padding: 0 !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-decoration: none !important;
}
body.jc-v2 .new-cat-thumb {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
aspect-ratio: 4 / 3;
margin: 0 0 10px !important;
padding: 5px;
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
background: var(--jc-bg-soft) !important;
}
body.jc-v2 .new-cat-thumb img {
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center;
}
body.jc-v2 .new-cat-title {
display: block;
padding: 0 11px;
}
body.jc-v2 .new-cat-card a.new-cat-name:hover .new-cat-title,
body.jc-v2 .new-cat-card a.new-cat-name:focus-visible .new-cat-title {
color: var(--jc-gold, #d79a14);
text-decoration: underline;
text-underline-offset: 2px;
}
body.jc-v2 .new-cat-badge {
top: 9px !important;
right: auto !important;
left: 9px !important;
z-index: 2;
width: auto !important;
max-width: calc(100% - 18px);
padding: 4px 8px !important;
border-radius: var(--jc-r-pill) !important;
background: var(--jc-accent) !important;
color: #164c76 !important;
font-size: 10px !important;
line-height: 1.15 !important;
}
@media (max-width: 1100px) {
body.jc-v2 .new-cats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 600px) {
body.jc-v2 .new-cats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 11px !important;
}
}
/* Nettoyage des separateurs NextGEN et resserrement de l'entree des grilles. */
body.jc-v2 .gallery-grid > br,
body.jc-v2 .gallery-grid > .ngg-clear,
body.jc-v2 .gallery-grid > .grid-item:empty,
body.jc-v2 .gallery-grid > .gallery-grid-item:empty {
display: none !important;
}
body.jc-v2.jc-gallery-page .entry-content > .gallery-grid {
margin-top: 12px !important;
}
/* ==========================================================================
Composants partages 2026 : filtres, pagination et finitions transversales
========================================================================== */
/* Une seule presentation pour les filtres de Nouveautes, Populaires et
Creations des membres. Les anciennes classes restent acceptees le temps de
la transition, les classes jc-* constituent l'API commune. */
body.jc-v2 :is(.jc-filter-bar, .mp-filter-bar) {
display: flex !important;
align-items: center !important;
justify-content: flex-start;
flex-wrap: wrap !important;
gap: 10px 14px !important;
margin: 12px 0 24px !important;
padding: 12px 14px !important;
border: 1px solid var(--jc-line) !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 10px 24px -22px rgba(20, 30, 70, .55);
}
body.jc-v2 :is(.jc-filter-pills, .mp-pills) {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap !important;
gap: 7px !important;
margin: 0 !important;
}
body.jc-v2 :is(.jc-filter-label, .mp-filter-label) {
margin-right: 2px;
color: var(--jc-muted) !important;
font-family: var(--jc-font-head);
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .045em;
text-transform: uppercase;
}
body.jc-v2 :is(.jc-filter-pill, .mp-pill) {
display: inline-flex !important;
align-items: center;
min-height: 34px;
padding: 7px 14px !important;
border: 0 !important;
border-radius: var(--jc-r-pill) !important;
background: var(--jc-bg-soft) !important;
color: var(--jc-blue-2) !important;
font-family: var(--jc-font-head);
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2;
text-decoration: none !important;
box-shadow: none !important;
}
body.jc-v2 :is(.jc-filter-pill, .mp-pill):hover,
body.jc-v2 :is(.jc-filter-pill, .mp-pill):focus-visible {
background: #e2ebfb !important;
color: var(--jc-blue-2) !important;
}
body.jc-v2 :is(.jc-filter-pill.is-active, .mp-pill.mp-active) {
background: var(--jc-blue-2) !important;
color: #fff !important;
}
body.jc-v2 .jc-creations-archive__controls {
justify-content: space-between;
}
/* Pagination canonique. Elle prend en charge le HTML direct de NextGEN et de
Top Tags, ainsi que la liste retournee par paginate_links(). */
body.jc-v2 :is(.ngg-navigation, .jc-pagination) {
display: flex !important;
clear: both;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px !important;
width: 100%;
margin: 30px 0 10px !important;
padding: 0 !important;
text-align: center;
}
body.jc-v2 .jc-pagination > ul.page-numbers {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.jc-v2 .jc-pagination > ul.page-numbers > li {
display: contents !important;
margin: 0 !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) > :is(a, span),
body.jc-v2 .jc-pagination > ul.page-numbers > li > :is(a, span) {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
margin: 0 !important;
padding: 0 13px !important;
border: 1px solid #d7dbe6 !important;
border-radius: 11px !important;
background: #fff !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-head);
font-size: 14px !important;
font-weight: 650 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) > :is(a, span):hover,
body.jc-v2 .jc-pagination > ul.page-numbers > li > :is(a, span):hover {
border-color: var(--jc-blue-2) !important;
background: var(--jc-bg-soft) !important;
color: var(--jc-blue-2) !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.current, .active) {
border-color: var(--jc-blue) !important;
background: var(--jc-blue) !important;
color: #fff !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.next, a.next) {
min-width: 104px;
border-color: #9aa6a9 !important;
background: #9aa6a9 !important;
color: #fff !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.next, a.next):hover,
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.next, a.next):focus-visible {
border-color: #879598 !important;
background: #879598 !important;
color: #fff !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.is-disabled, .disabled) {
pointer-events: none;
border-color: #e2e6ef !important;
background: #f5f7fb !important;
color: #a0a6b5 !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) .dots {
min-width: 24px;
padding-right: 3px !important;
padding-left: 3px !important;
border-color: transparent !important;
background: transparent !important;
color: var(--jc-muted) !important;
}
/* Rythme constant : titre -> introduction -> barre -> vignettes. */
body.jc-v2.jc-gallery-page .entry-header .entry-title {
margin-bottom: 14px !important;
}
body.jc-v2.jc-gallery-page :is(.intro-page, .intro-page-full) {
margin-bottom: 24px !important;
padding-bottom: 0 !important;
}
body.jc-v2.jc-gallery-page .jc-gallery-toolbar {
justify-content: space-between !important;
margin: 0 0 24px !important;
}
body.jc-v2.jc-gallery-page .jc-gallery-toolbar .jc-results-count {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 4px;
color: #8a8f9d;
font-size: 12.5px;
font-weight: 400;
}
body.jc-v2.jc-gallery-page .jc-gallery-toolbar .jc-results-count strong {
color: #7a8190;
font-family: var(--jc-font-body);
font-size: inherit;
font-weight: 600;
}
body.jc-v2.jc-gallery-page .jc-gallery-toolbar + div[style*="clear"] {
height: 0;
}
body.jc-v2.jc-gallery-page .jc-gallery-toolbar ~ .jc-coloring-grid,
body.jc-v2.jc-gallery-page .entry-content > .gallery-grid {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Les wrappers historiques varient selon la source (galerie ou tag). On cible
donc le lien reel afin que chaque tag retrouve sa pilule coloree. */
body.jc-v2.jc-gallery-page .jc-related-links {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 9px !important;
}
body.jc-v2.jc-gallery-page .jc-related-links :is(.tag, .gal) {
margin: 0 !important;
}
body.jc-v2.jc-gallery-page .jc-related-links :is(a, .tag > a, .gal > a) {
display: inline-flex !important;
align-items: center;
min-height: 34px;
margin: 0 !important;
padding: 7px 15px !important;
border: 1px solid var(--jc-tag-border) !important;
border-radius: var(--jc-r-pill) !important;
background: var(--jc-tag-bg) !important;
color: var(--jc-ink) !important;
font-family: var(--jc-font-body);
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2;
text-decoration: none !important;
}
/* Certains anciens fragments posent directement .tag/.gal sur le lien. Cette
variante de meme specificite neutralise leur background:none !important. */
body.jc-v2:is(.jc-family-cla, .jc-family-cle, .jc-family-mdl).jc-gallery-page .jc-related-links a:is(.tag, .gal) {
padding: 7px 15px !important;
border: 1px solid var(--jc-tag-border) !important;
border-radius: var(--jc-r-pill) !important;
background: var(--jc-tag-bg) !important;
color: var(--jc-ink) !important;
}
body.jc-v2.jc-gallery-page .jc-related-links :is(a, .tag > a, .gal > a):hover,
body.jc-v2.jc-gallery-page .jc-related-links :is(a, .tag > a, .gal > a):focus-visible {
border-color: var(--jc-tag-border-hover) !important;
background: var(--jc-tag-hover) !important;
color: var(--jc-ink) !important;
}
body.jc-v2:is(.jc-family-cla, .jc-family-cle, .jc-family-mdl).jc-gallery-page .jc-related-links a:is(.tag, .gal):hover,
body.jc-v2:is(.jc-family-cla, .jc-family-cle, .jc-family-mdl).jc-gallery-page .jc-related-links a:is(.tag, .gal):focus-visible {
border-color: var(--jc-tag-border-hover) !important;
background: var(--jc-tag-hover) !important;
color: var(--jc-ink) !important;
}
/* Les sidebars restent visibles sous le nouveau header sticky, jamais dessous.
Cette règle finale factorise les offsets historiques (18/24 px). */
@media (min-width: 1001px) {
body.jc-v2 #left-sidebar,
body.jc-v2 #left-sidebar .inside-left-sidebar,
body.jc-v2 #right-sidebar,
body.jc-v2 .jc-sidebar {
top: calc(var(--jc-sticky-stack-height) + 18px) !important;
}
body.jc-v2 #left-sidebar .inside-left-sidebar {
max-height: calc(100vh - var(--jc-sticky-stack-height) - 36px) !important;
}
}
/* Le nom de galerie reste secondaire, mais gagne un demi-pixel pour etre plus
lisible sans concurrencer le titre du coloriage. */
body.jc-v2 .jc-coloring-grid .grid-item-lig2,
body.jc-v2.jc-gallery-page .gallery-grid .grid-item-lig2 {
font-size: 11.5px !important;
}
/* Un titre d'artiste est une seule information : aucun mot n'est traite comme
un lien ou un accent de couleur. */
body.jc-v2.jc-artist-page .entry-title,
body.jc-v2.jc-artist-page .entry-title * {
color: var(--jc-ink) !important;
}
/* Alignement optique de la colonne marque et du pied de page. */
body.jc-v2 .jc-footer-brand {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
body.jc-v2 .jc-footer-cols--3 {
grid-template-columns: minmax(240px, 1.35fr) repeat(2, minmax(170px, 1fr));
}
body.jc-v2 .jc-footer-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto 14px;
}
body.jc-v2 .jc-footer-logo img,
body.jc-v2 .jc-footer-tagline {
margin-right: auto;
margin-left: auto;
}
body.jc-v2 .jc-footer-tagline,
body.jc-v2 .jc-footer-bottom {
text-align: center;
}
@media (max-width: 980px) {
body.jc-v2 .jc-footer-cols--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
body.jc-v2 .jc-footer-cols--3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
body.jc-v2 :is(.jc-filter-bar, .mp-filter-bar) {
align-items: flex-start !important;
padding: 11px !important;
}
body.jc-v2 .jc-creations-archive__controls {
flex-direction: column;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) {
gap: 7px !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) > :is(a, span),
body.jc-v2 .jc-pagination > ul.page-numbers > li > :is(a, span) {
min-width: 39px;
height: 39px;
padding: 0 10px !important;
}
body.jc-v2 :is(.ngg-navigation, .jc-pagination) :is(.next, a.next) {
min-width: 92px;
}
}
/* Ajustements typographiques partages des menus lateraux. Les rubriques
restent visibles sans donner a chaque lien le poids d'un titre. */
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > a,
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu > li > a {
font-weight: 500 !important;
}
body.jc-v2.jc-family-cla:not(.home) #left-sidebar .wpb_category_n_menu_accordion > ul > li > ul li > a,
body.jc-v2.jc-family-cle:not(.home) #left-sidebar ul.menu ul a {
font-weight: 400 !important;
}
/* Home Kids : les cartes de galerie utilisent la meme construction que les
cartes des pages categorie (image, separation, zone titre aeree). */
body.jc-v2.jc-family-cle.home .new-cat-card {
padding: 0 !important;
overflow: hidden;
border: 1px solid #e3e7ef !important;
border-radius: 13px !important;
background: #fff !important;
box-shadow: 0 7px 18px rgba(25, 39, 72, .055) !important;
}
body.jc-v2.jc-family-cle.home .new-cat-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--jc-shadow-pop) !important;
}
body.jc-v2.jc-family-cle.home .new-cat-card a.new-cat-name {
display: flex !important;
flex-direction: column;
height: 100%;
padding: 0 !important;
color: var(--jc-ink) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35;
text-decoration: none !important;
}
body.jc-v2.jc-family-cle.home .new-cat-thumb {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
aspect-ratio: 4 / 3;
margin: 0 !important;
padding: 5px;
overflow: hidden;
border: 0 !important;
border-bottom: 1px solid var(--jc-line) !important;
border-radius: 0 !important;
background: var(--jc-bg-soft) !important;
}
body.jc-v2.jc-family-cle.home .new-cat-thumb img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center;
}
body.jc-v2.jc-family-cle.home .new-cat-title {
display: flex;
align-items: center;
min-height: 62px;
padding: 12px 14px;
}
body.jc-v2.jc-family-cle.home .new-cat-card a.new-cat-name:hover,
body.jc-v2.jc-family-cle.home .new-cat-card a.new-cat-name:focus-visible {
color: var(--jc-blue-2) !important;
text-decoration: none !important;
}
body.jc-v2.jc-family-cle.home .new-cat-badge {
top: 9px !important;
left: 9px !important;
}
/* Home Kids : distinguer clairement les deux familles de galeries. */
body.jc-v2.jc-family-cle.home .new-cats-section--new .new-cats-title {
color: var(--jc-blue-2) !important;
}
body.jc-v2.jc-family-cle.home .new-cats-section--popular .new-cats-title {
color: var(--jc-gold, #d79a14) !important;
}
/* Meme format que les cartes album des pages categories : vignette carree,
separation fine et zone titre stable sur deux lignes. */
body.jc-v2.jc-family-cle.home .new-cat-thumb {
aspect-ratio: 1 / 1 !important;
border-bottom: 1px solid #edf0f5 !important;
}
body.jc-v2.jc-family-cle.home .new-cat-title {
display: flex !important;
align-items: center;
width: 100%;
min-height: 62px;
padding: 13px 16px 15px !important;
color: var(--jc-ink);
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35;
}
/* CLE reprend le shell blanc de CLA. Le bleu reste reserve au header, au menu
lateral et aux accents, sans grands aplats dans les marges de la page. */
body.jc-v2.jc-family-cle,
body.jc-v2.jc-family-cle #page {
background: #fff !important;
}
/* Pages internes Kids avec menu : une seule gouttiere. GeneratePress ajoutait
encore son padding a celui du conteneur sur Nouveautes et Populaires. */
@media (min-width: 901px) {
body.jc-v2.jc-family-cle:not(.home):not(.error404) #content.site-content:has(> #left-sidebar) {
gap: 26px !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404) #content.site-content:has(> #left-sidebar) > #primary .site-main {
margin: 0 !important;
}
body.jc-v2.jc-family-cle:not(.home):not(.error404) #content.site-content:has(> #left-sidebar) > #primary .inside-article {
margin: 0 !important;
padding: 0 !important;
border-radius: 0;
box-shadow: none;
}
}
/* Le nom de la galerie reste une information secondaire, avec un poids juste
assez marque pour mieux se distinguer du prefixe "dans / in". */
body.jc-v2 .gallery-grid .grid-item-lig2 a,
body.jc-v2 .gallery-grid .grid-item-lig2 a u,
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a,
body.jc-v2 .jc-coloring-grid .grid-item-lig2 a u {
font-weight: 500 !important;
}