/* Golf-GTI.fr sur le template Maverick : la feuille de style du site.
Reprise de templates/ja_purity_iv/local/css/custom.css, références à T4 converties vers le balisage du template
(#t4-main-body → #mvk-main-body, .t4-col → .mvk-col, .t4-module → .mvk-module, variables --t4- → --bs-). */
/* ===== ARTICLE FULL WIDTH (JA Purity IV) ===== */
/* 1. Supprimer la colonne meta (date, infos) */
.item-page .article-aside {
display: none;
}
/* 2. Forcer les colonnes internes à 100% */
.item-page .col,
.item-page [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
/* 3. Supprimer les marges/paddings Bootstrap qui réduisent la largeur */
.item-page .row {
margin-left: 0;
margin-right: 0;
}
.item-page .row > * {
padding-left: 0;
padding-right: 0;
}
/* 4. Supprimer le centrage + largeur limitée du contenu */
.item-page .article-body {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* 5. Neutraliser les wrappers JA/T4 */
.item-page .com-content-article,
.item-page .com-content-article__body,
.item-page .article-content,
.item-page .t4-content,
.item-page .t4-content-inner,
.item-page .container-inner {
max-width: none;
width: 100%;
margin: 0;
}
.item-page .article-body {
max-width: 1100px;
margin: 0 auto;
}
/* ===== TYPOGRAPHIE ===== */
.item-page .article-body {
font-size: 17px;
line-height: 1.7;
color: #2c2c2c;
}
/* En mode sombre, ce gris foncé était illisible sur le fond noir. */
.dark-active .item-page .article-body {
color: #d5dae0;
}
/* Titres */
.item-page h1 {
font-size: 28px;
margin-bottom: 10px;
}
.item-page h2 {
border: none;
padding-left: 0;
font-size: 24px;
}
.item-page h3 {
font-size: 18px;
}
/* Paragraphes */
.item-page p {
margin-bottom: 18px;
}
/* Hover ligne tableau */
.item-page table tr:hover td {
background: #f1f5f9 !important;
color: #111827;
transition: all 0.2s ease;
}
.item-page table td:first-child {
font-weight: 600;
color: #1f2937;
}
.item-page table td.highlight {
font-weight: 600;
color: #1d4ed8;
background: #f0f6ff;
border-radius: 4px;
padding: 4px 8px;
}
.item-page .item-image {
display: none;
}
/* TOP VIDEOS GOLF GTI - relief des miniatures */
.moduletop-videos img {
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.moduletop-videos a:hover img {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
/* ===== TOP VIDEOS : bouton PLAY ===== */
.moduletop-videos .mod-articles-image {
position: relative;
}
/* Cercle sombre */
.moduletop-videos .mod-articles-image::after {
/* Triangle « ▶ » suivi du sélecteur de variante texte : sans lui, iPhone et iPad l'affichent en emoji bleu. */
content: "\25B6\FE0E";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 4px; /* recentre visuellement le triangle */
color: #fff;
font-size: 24px;
line-height: 1;
background: rgba(0, 0, 0, 0.55);
border: 2px solid rgba(255, 255, 255, 0.90);
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
}
/* ===== BLOCS TOP : MINIATURES / DIECAST / SLOT CAR ===== */
/* ===== TOP DIECAST / SLOT CAR / MINIATURES ===== */
/* Images : uniquement du relief */
.moduletop-cards img {
border-radius: 9px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
/* ===== JT CONTENT SLIDER - VIDEOS ===== */
/* Conteneur image */
.modulecontent_video-slider .jt-imagecover {
position: relative;
overflow: hidden;
border-radius: 9px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
transition: box-shadow 0.25s ease;
}
/* Image */
.modulecontent_video-slider .jtcs-image {
display: block;
width: 100%;
height: auto;
border-radius: 9px;
}
/* Un peu plus de relief au survol */
.modulecontent_video-slider .jt-imagecover:hover {
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}
/* Titre : on conserve sa taille actuelle */
.modulecontent_video-slider .jt-title {
line-height: 1.25;
}
/* Actions du hover */
.modulecontent_video-slider .hover-icons .jt-icon {
border-radius: 50%;
transition:
transform 0.2s ease,
background-color 0.2s ease;
}
/* Petit feedback uniquement sur les vrais boutons cliquables */
.modulecontent_video-slider .hover-icons .jt-icon:hover {
transform: scale(1.08);
}
/* ==========================================================
JT CONTENT SLIDER - VIDEOS
Modules : jtcs123 / jtcs124 / jtcs125 / jtcs126
========================================================== */
/* ===== CONTENEUR IMAGE ===== */
.jtcs143 .jt-imagecover,
.jtcs123 .jt-imagecover,
.jtcs124 .jt-imagecover,
.jtcs125 .jt-imagecover,
.jtcs126 .jt-imagecover {
position: relative;
overflow: hidden;
border-radius: 9px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
transition: box-shadow 0.25s ease;
}
/* ===== IMAGE ===== */
.jtcs143 .jtcs-image,
.jtcs123 .jtcs-image,
.jtcs124 .jtcs-image,
.jtcs125 .jtcs-image,
.jtcs126 .jtcs-image {
display: block;
width: 100%;
height: auto;
border-radius: 9px;
transition: filter 0.25s ease;
}
/* ===== HOVER IMAGE ===== */
.jtcs143 .jt-imagecover:hover .jtcs-image,
.jtcs123 .jt-imagecover:hover .jtcs-image,
.jtcs124 .jt-imagecover:hover .jtcs-image,
.jtcs125 .jt-imagecover:hover .jtcs-image,
.jtcs126 .jt-imagecover:hover .jtcs-image {
filter: brightness(0.72);
}
.jtcs143 .jt-imagecover:hover,
.jtcs123 .jt-imagecover:hover,
.jtcs124 .jt-imagecover:hover,
.jtcs125 .jt-imagecover:hover,
.jtcs126 .jt-imagecover:hover {
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}
/* ==========================================================
OVERLAY
========================================================== */
.jtcs143 .hover-icons,
.jtcs123 .hover-icons,
.jtcs124 .hover-icons,
.jtcs125 .hover-icons,
.jtcs126 .hover-icons {
position: absolute;
inset: 0;
display: flex !important;
align-items: center;
justify-content: center;
/* Overlay uniquement visuel :
le clic traverse vers le lien de l'image */
pointer-events: none !important;
}
/* Masquer les boutons JT d'origine :
lien + loupe */
.jtcs143 .hover-icons .jt-icon,
.jtcs123 .hover-icons .jt-icon,
.jtcs124 .hover-icons .jt-icon,
.jtcs125 .hover-icons .jt-icon,
.jtcs126 .hover-icons .jt-icon {
display: none !important;
}
/* ==========================================================
BOUTON PLAY
========================================================== */
.jtcs143 .hover-icons::before,
.jtcs123 .hover-icons::before,
.jtcs124 .hover-icons::before,
.jtcs125 .hover-icons::before,
.jtcs126 .hover-icons::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 54px;
height: 54px;
transform: translate(-50%, -50%) scale(0.90);
border-radius: 50%;
background: rgba(13, 110, 253, 0.90);
border: 2px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.25),
0 0 0 9px rgba(13, 110, 253, 0.14);
opacity: 0;
pointer-events: none;
transition:
opacity 0.20s ease,
transform 0.20s ease;
}
/* ===== TRIANGLE PLAY ===== */
.jtcs143 .hover-icons::after,
.jtcs123 .hover-icons::after,
.jtcs124 .hover-icons::after,
.jtcs125 .hover-icons::after,
.jtcs126 .hover-icons::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 15px solid #fff;
transform: translate(-40%, -50%) scale(0.90);
opacity: 0;
pointer-events: none;
transition:
opacity 0.20s ease,
transform 0.20s ease;
}
/* ===== APPARITION DU PLAY AU SURVOL ===== */
.jtcs143 .jt-imagecover:hover .hover-icons::before,
.jtcs123 .jt-imagecover:hover .hover-icons::before,
.jtcs124 .jt-imagecover:hover .hover-icons::before,
.jtcs125 .jt-imagecover:hover .hover-icons::before,
.jtcs126 .jt-imagecover:hover .hover-icons::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.jtcs143 .jt-imagecover:hover .hover-icons::after,
.jtcs123 .jt-imagecover:hover .hover-icons::after,
.jtcs124 .jt-imagecover:hover .hover-icons::after,
.jtcs125 .jt-imagecover:hover .hover-icons::after,
.jtcs126 .jt-imagecover:hover .hover-icons::after {
opacity: 1;
transform: translate(-40%, -50%) scale(1);
}
/* ==========================================================
JT CONTENT SLIDER - MINIATURES / COLLECTION
Modules : jtcs132 / jtcs133 / jtcs134 / jtcs144
========================================================== */
/* ===== CARTE / ITEM ===== */
.jtcs132 .slide,
.jtcs133 .slide,
.jtcs134 .slide,
.jtcs144 .slide {
height: 100%;
}
.jtcs132 .jt-inner,
.jtcs133 .jt-inner,
.jtcs134 .jt-inner,
.jtcs144 .jt-inner {
display: flex;
flex-direction: column;
height: 100%;
}
/* ==========================================================
ZONE IMAGE
Même hauteur pour tous les items
========================================================== */
.jtcs132 .jt-imagecover,
.jtcs133 .jt-imagecover,
.jtcs134 .jt-imagecover,
.jtcs144 .jt-imagecover {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 9px;
/* Blanc pour les images dont le ratio est différent */
background: #fff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
/* ==========================================================
LIEN IMAGE
========================================================== */
.jtcs132 .link-image,
.jtcs133 .link-image,
.jtcs134 .link-image,
.jtcs144 .link-image {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #fff !important;
}
/* ==========================================================
IMAGE
========================================================== */
.jtcs132 .jtcs-image,
.jtcs133 .jtcs-image,
.jtcs134 .jtcs-image,
.jtcs144 .jtcs-image {
display: block;
width: 100% !important;
height: 100% !important;
/* Conserve la miniature entière sans recadrage */
object-fit: contain;
background: #fff !important;
transition:
transform 0.30s ease,
filter 0.25s ease;
}
/* ==========================================================
HOVER IMAGE
========================================================== */
.jtcs132 .jt-imagecover:hover,
.jtcs133 .jt-imagecover:hover,
.jtcs134 .jt-imagecover:hover,
.jtcs144 .jt-imagecover:hover {
background: #fff !important;
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
}
.jtcs132 .jt-imagecover:hover .link-image,
.jtcs133 .jt-imagecover:hover .link-image,
.jtcs134 .jt-imagecover:hover .link-image,
.jtcs144 .jt-imagecover:hover .link-image {
background: #fff !important;
}
.jtcs132 .jt-imagecover:hover .jtcs-image,
.jtcs133 .jt-imagecover:hover .jtcs-image,
.jtcs134 .jt-imagecover:hover .jtcs-image,
.jtcs144 .jt-imagecover:hover .jtcs-image {
background: #fff !important;
/* Très léger zoom */
transform: scale(1.025);
/* Aucun assombrissement */
filter: none;
}
/* ==========================================================
SUPPRESSION DES BOUTONS JT
lien + loupe + overlay d'origine
========================================================== */
.jtcs132 .hover-icons,
.jtcs133 .hover-icons,
.jtcs134 .hover-icons,
.jtcs144 .hover-icons {
display: none !important;
}
/* ==========================================================
TITRES
Même hauteur pour aligner les descriptions
========================================================== */
.jtcs132 h3,
.jtcs133 h3,
.jtcs134 h3,
.jtcs144 h3 {
margin-top: 16px;
margin-bottom: 8px;
/* Réserve la hauteur de deux lignes */
min-height: 2.6em;
line-height: 1.3;
}
.jtcs132 .jt-title,
.jtcs133 .jt-title,
.jtcs134 .jt-title,
.jtcs144 .jt-title {
line-height: 1.3;
}
/* ==========================================================
TEXTE D'INTRODUCTION
========================================================== */
.jtcs132 .jt-introtext,
.jtcs133 .jt-introtext,
.jtcs134 .jt-introtext,
.jtcs144 .jt-introtext {
margin-top: 0;
line-height: 1.65;
}
/* ==========================================================
JT CONTENT SLIDER - LIVRES
Modules : jtcs130 / jtcs131 / jtcs146
========================================================== */
/* ==========================================================
CARTE / ITEM
========================================================== */
.jtcs130 .slide,
.jtcs131 .slide,
.jtcs146 .slide {
height: 100%;
}
.jtcs130 .jt-inner,
.jtcs131 .jt-inner,
.jtcs146 .jt-inner {
display: flex;
flex-direction: column;
height: 100%;
}
/* ==========================================================
CONTENEUR IMAGE
========================================================== */
.jtcs130 .jt-imagecover,
.jtcs131 .jt-imagecover,
.jtcs146 .jt-imagecover {
position: relative !important;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 14px;
overflow: visible;
background: transparent !important;
box-shadow: none !important;
}
/* ==========================================================
IMAGE / COUVERTURE
========================================================== */
.jtcs130 .jtcs-image,
.jtcs131 .jtcs-image,
.jtcs146 .jtcs-image {
display: block;
width: auto !important;
height: 320px !important;
max-width: 100%;
object-fit: contain;
background: #fff !important;
border-radius: 4px;
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.16),
0 1px 3px rgba(0, 0, 0, 0.10);
transition:
transform 0.20s ease,
box-shadow 0.20s ease;
}
/* ==========================================================
OVERLAY JT
On le conserve car il contient le lien vers l'article
========================================================== */
.jtcs130 .hover-icons,
.jtcs131 .hover-icons,
.jtcs146 .hover-icons {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
z-index: 10 !important;
}
/* ==========================================================
LIEN ARTICLE
Transformé en zone transparente couvrant toute l'image
========================================================== */
.jtcs130 .hover-icons .icon-url,
.jtcs131 .hover-icons .icon-url,
.jtcs146 .hover-icons .icon-url {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
z-index: 20 !important;
}
/* Masquer visuellement l'icône "lien" */
.jtcs130 .hover-icons .icon-url i,
.jtcs131 .hover-icons .icon-url i,
.jtcs146 .hover-icons .icon-url i {
display: none !important;
}
/* ==========================================================
SUPPRESSION DE LA LOUPE / LIGHTBOX
========================================================== */
.jtcs130 .hover-icons .icon-lightbox,
.jtcs131 .hover-icons .icon-lightbox,
.jtcs146 .hover-icons .icon-lightbox {
display: none !important;
}
/* ==========================================================
SUPPRESSION DU VOILE SOMBRE NATIF
========================================================== */
.jtcs130 .hover-icons,
.jtcs131 .hover-icons,
.jtcs146 .hover-icons,
.jtcs130 .hover-icons:hover,
.jtcs131 .hover-icons:hover,
.jtcs146 .hover-icons:hover {
background: transparent !important;
}
/* ==========================================================
HOVER PERSONNALISE
========================================================== */
.jtcs130 .jt-imagecover:hover .jtcs-image,
.jtcs131 .jt-imagecover:hover .jtcs-image,
.jtcs146 .jt-imagecover:hover .jtcs-image {
transform: translateY(-2px);
filter: none !important;
opacity: 1 !important;
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.18),
0 2px 4px rgba(0, 0, 0, 0.10);
}
/* ==========================================================
TITRES
========================================================== */
.jtcs130 h3,
.jtcs131 h3,
.jtcs146 h3 {
margin-top: 0;
margin-bottom: 8px;
min-height: 2.6em;
line-height: 1.3;
}
.jtcs130 .jt-title,
.jtcs131 .jt-title,
.jtcs146 .jt-title {
line-height: 1.3;
cursor: pointer;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.jtcs130 .jt-introtext,
.jtcs131 .jt-introtext,
.jtcs146 .jt-introtext {
margin-top: 0;
line-height: 1.65;
}
/* ==========================================================
JT CONTENT SLIDER - SLOT CAR
Modules : jtcs138 / jtcs139 / jtcs140 / jtcs145
========================================================== */
/* ===== CARTE / ITEM ===== */
.jtcs138 .slide,
.jtcs139 .slide,
.jtcs140 .slide,
.jtcs145 .slide {
height: 100%;
}
.jtcs138 .jt-inner,
.jtcs139 .jt-inner,
.jtcs140 .jt-inner,
.jtcs145 .jt-inner {
display: flex;
flex-direction: column;
height: 100%;
}
/* ==========================================================
ZONE IMAGE
========================================================== */
.jtcs138 .jt-imagecover,
.jtcs139 .jt-imagecover,
.jtcs140 .jt-imagecover,
.jtcs145 .jt-imagecover {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 9px;
background: #fff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
/* ==========================================================
LIEN IMAGE
Toute l'image reste cliquable
========================================================== */
.jtcs138 .link-image,
.jtcs139 .link-image,
.jtcs140 .link-image,
.jtcs145 .link-image {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #fff !important;
cursor: pointer;
}
/* ==========================================================
IMAGE
========================================================== */
.jtcs138 .jtcs-image,
.jtcs139 .jtcs-image,
.jtcs140 .jtcs-image,
.jtcs145 .jtcs-image {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 9px;
transition:
transform 0.40s ease,
filter 0.25s ease;
}
/* ==========================================================
HOVER IMAGE
========================================================== */
.jtcs138 .link-image:hover .jtcs-image,
.jtcs139 .link-image:hover .jtcs-image,
.jtcs140 .link-image:hover .jtcs-image,
.jtcs145 .link-image:hover .jtcs-image {
transform: scale(1.20);
filter: none !important;
}
.jtcs138 .jt-imagecover:hover,
.jtcs139 .jt-imagecover:hover,
.jtcs140 .jt-imagecover:hover,
.jtcs145 .jt-imagecover:hover {
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
}
/* ==========================================================
SUPPRESSION DE L'OVERLAY JT
lien + loupe
========================================================== */
.jtcs138 .hover-icons,
.jtcs139 .hover-icons,
.jtcs140 .hover-icons,
.jtcs145 .hover-icons {
display: none !important;
}
/* ==========================================================
TITRES
========================================================== */
.jtcs138 h3,
.jtcs139 h3,
.jtcs140 h3,
.jtcs145 h3 {
margin-top: 16px;
margin-bottom: 8px;
min-height: 2.6em;
line-height: 1.3;
}
.jtcs138 .jt-title,
.jtcs139 .jt-title,
.jtcs140 .jt-title,
.jtcs145 .jt-title {
line-height: 1.3;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.jtcs138 .jt-introtext,
.jtcs139 .jt-introtext,
.jtcs140 .jt-introtext,
.jtcs145 .jt-introtext {
margin-top: 0;
line-height: 1.65;
}
/* ==========================================================
PAGES DE LISTES JOOMLA - BLOG DE CATEGORIE
========================================================== */
/* ==========================================================
CONTENEUR GENERAL
========================================================== */
.com-content-category-blog .blog-items {
display: flex;
flex-direction: column;
gap: 22px;
}
/* ==========================================================
CARTE ARTICLE
========================================================== */
.com-content-category-blog .blog-items .item {
background: #fff;
border: 1px solid #e7eaf0;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.com-content-category-blog .blog-items .item:hover {
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10);
}
/* ==========================================================
CONTENU INTERNE
========================================================== */
.com-content-category-blog .blog-items .item-content {
position: relative;
padding: 22px;
}
/* ==========================================================
DATE
========================================================== */
.com-content-category-blog .blog-items .article-aside {
margin-bottom: 8px;
}
.com-content-category-blog .blog-items .article-info {
margin: 0;
}
.com-content-category-blog .blog-items .article-info .published {
margin: 0;
font-size: 14px;
color: #6b7280;
}
.com-content-category-blog .blog-items .article-info time {
font-size: 14px;
color: #6b7280;
}
/* ==========================================================
ZONE INTRO
IMAGE A GAUCHE / CONTENU A DROITE
========================================================== */
.com-content-category-blog .blog-items .item-intro {
display: grid;
grid-template-columns: minmax(260px, 340px) 1fr;
grid-template-areas:
"image title"
"image text";
column-gap: 28px;
row-gap: 8px;
align-items: start;
}
/* ==========================================================
TITRE
========================================================== */
.com-content-category-blog .blog-items .item-intro > h2 {
grid-area: title;
margin: 0 0 6px 0;
font-size: 27px;
line-height: 1.25;
}
.com-content-category-blog .blog-items .item-intro > h2 a {
text-decoration: none;
}
/* ==========================================================
IMAGE
========================================================== */
/*
* Dans ton HTML actuel, l'image est contenue dans le premier
* div juste après le h2.
*/
.com-content-category-blog .blog-items .item-intro > h2 + div {
grid-area: image;
width: 100%;
margin: 0 !important;
}
.com-content-category-blog .blog-items .item-intro > h2 + div > a {
display: block;
width: 100%;
overflow: hidden;
border-radius: 10px;
background: #f8fafc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.com-content-category-blog .blog-items .item-intro img.padded {
display: block;
width: 100%;
height: 220px;
object-fit: contain;
padding: 0 !important;
margin: 0 !important;
background: #fff;
transition:
transform 0.35s ease,
box-shadow 0.25s ease;
}
/* HOVER IMAGE */
.com-content-category-blog .blog-items .item-intro > h2 + div > a:hover img {
transform: scale(1.08);
}
/* ==========================================================
TEXTE D'INTRO
========================================================== */
.com-content-category-blog .blog-items .item-intro > div:last-child {
grid-area: text;
margin: 0;
}
.com-content-category-blog .blog-items .item-intro > div:last-child p {
margin: 0;
font-size: 17px;
line-height: 1.65;
color: #4b5563;
}
/* ==========================================================
BOUTON LIRE LA SUITE
========================================================== */
.com-content-category-blog .blog-items .readmore {
margin:
16px
0
0
calc(340px + 28px);
}
.com-content-category-blog .blog-items .btn-readmore {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border: 0;
border-radius: 7px;
background: #0d6efd;
color: #fff !important;
font-size: 13px;
line-height: 1.35;
font-weight: 600;
text-decoration: none;
box-shadow: 0 3px 8px rgba(13, 110, 253, 0.18);
transition:
background-color 0.20s ease,
box-shadow 0.20s ease,
transform 0.20s ease;
}
.com-content-category-blog .blog-items .btn-readmore:hover {
background: #0b5ed7;
transform: translateY(-1px);
box-shadow: 0 5px 12px rgba(13, 110, 253, 0.24);
}
/* ==========================================================
NETTOYAGE DES
HERITES DU LAYOUT
========================================================== */
.com-content-category-blog .blog-items .item-content > br,
.com-content-category-blog .blog-items .item > br {
display: none;
}
/* ==========================================================
ESPACEMENT ENTRE ITEMS
========================================================== */
.com-content-category-blog .blog-items .items-row {
margin: 0;
}
.com-content-category-blog .blog-items .items-row > [class*="col-"] {
padding-top: 0;
padding-bottom: 0;
}
/* ==========================================================
RESPONSIVE TABLETTE
========================================================== */
@media (max-width: 991px) {
.com-content-category-blog .blog-items .item-intro {
grid-template-columns: 260px 1fr;
column-gap: 22px;
}
.com-content-category-blog .blog-items .item-intro img.padded {
height: 190px;
}
.com-content-category-blog .blog-items .item-intro > h2 {
font-size: 23px;
}
.com-content-category-blog .blog-items .readmore {
margin-left: calc(260px + 22px);
}
}
/* ==========================================================
RESPONSIVE MOBILE
========================================================== */
@media (max-width: 767px) {
.com-content-category-blog .blog-items {
gap: 18px;
}
.com-content-category-blog .blog-items .item-content {
padding: 16px;
}
.com-content-category-blog .blog-items .item-intro {
display: flex;
flex-direction: column;
gap: 12px;
}
.com-content-category-blog .blog-items .item-intro > h2 {
order: 2;
margin: 0;
font-size: 21px;
line-height: 1.3;
}
.com-content-category-blog .blog-items .item-intro > h2 + div {
order: 1;
}
.com-content-category-blog .blog-items .item-intro > div:last-child {
order: 3;
}
.com-content-category-blog .blog-items .item-intro img.padded {
width: 100%;
height: auto;
max-height: 260px;
object-fit: contain;
}
.com-content-category-blog .blog-items .item-intro > div:last-child p {
font-size: 16px;
line-height: 1.55;
}
.com-content-category-blog .blog-items .readmore {
margin: 14px 0 0 0;
}
.com-content-category-blog .blog-items .btn-readmore {
width: auto;
padding: 9px 14px;
font-size: 14px;
}
}
/* ==========================================================
PAGES DE LISTES - LIVRES
Découvertes : item-157
Techniques : item-158
À placer APRÈS le CSS général des pages de listes
========================================================== */
/* ==========================================================
STRUCTURE DE L'INTRO
========================================================== */
body.item-157 .com-content-category-blog .blog-items .item-intro,
body.item-158 .com-content-category-blog .blog-items .item-intro {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"image title"
"image text";
column-gap: 28px;
row-gap: 8px;
align-items: start;
}
/* ==========================================================
SUPPRESSION DES DIV VIDES HERITES DES ANCIENS ARTICLES
Ex :
========================================================== */
body.item-157 .com-content-category-blog .item-intro > div:empty,
body.item-158 .com-content-category-blog .item-intro > div:empty {
display: none !important;
}
/* Certains contiennent seulement */
body.item-157 .com-content-category-blog .item-intro > div:first-of-type:not(:has(img)),
body.item-158 .com-content-category-blog .item-intro > div:first-of-type:not(:has(img)) {
min-height: 0;
}
/* ==========================================================
TITRE
========================================================== */
body.item-157 .com-content-category-blog .item-intro > h2,
body.item-158 .com-content-category-blog .item-intro > h2 {
grid-area: title;
margin: 0 0 8px 0;
font-size: 25px;
line-height: 1.25;
}
body.item-157 .com-content-category-blog .item-intro > h2 a,
body.item-158 .com-content-category-blog .item-intro > h2 a {
text-decoration: none;
}
/* ==========================================================
BLOC CONTENANT UNE COUVERTURE
On le détecte réellement grâce à :has()
========================================================== */
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded),
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) {
grid-area: image;
display: flex;
align-items: flex-start;
justify-content: center;
width: 220px;
margin: 0 !important;
}
/* ==========================================================
LIEN AUTOUR DE LA COUVERTURE
========================================================== */
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded) > a,
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 275px;
overflow: hidden;
border-radius: 8px;
background: #fff;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
/* ==========================================================
COUVERTURE
========================================================== */
body.item-157 .com-content-category-blog .item-intro img.padded,
body.item-158 .com-content-category-blog .item-intro img.padded {
display: block;
width: auto !important;
height: auto !important;
max-width: 200px !important;
max-height: 255px !important;
object-fit: contain;
margin: 0 !important;
padding: 0 !important;
border-radius: 3px;
background: #fff;
transition:
transform 0.35s ease,
box-shadow 0.25s ease;
}
/* ==========================================================
HOVER COUVERTURE
========================================================== */
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded) > a:hover img,
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) > a:hover img {
transform: scale(1.08);
}
/* ==========================================================
TEXTE / DESCRIPTION
Tout div direct qui n'est pas le bloc image
========================================================== */
body.item-157 .com-content-category-blog .item-intro > div:not(:has(img.padded)),
body.item-158 .com-content-category-blog .item-intro > div:not(:has(img.padded)) {
grid-area: text;
}
body.item-157 .com-content-category-blog .item-intro > div:not(:has(img.padded)) p,
body.item-158 .com-content-category-blog .item-intro > div:not(:has(img.padded)) p {
margin-top: 0;
font-size: 17px;
line-height: 1.65;
color: #4b5563;
}
/* ==========================================================
BOUTON LIRE LA SUITE
Aligné sur le début de la colonne texte
========================================================== */
body.item-157 .com-content-category-blog .blog-items .readmore,
body.item-158 .com-content-category-blog .blog-items .readmore {
margin:
16px
0
0
calc(220px + 28px);
}
/* On conserve le bouton déjà validé */
body.item-157 .com-content-category-blog .blog-items .btn-readmore,
body.item-158 .com-content-category-blog .blog-items .btn-readmore {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border: 0;
border-radius: 7px;
background: #0d6efd;
color: #fff !important;
font-size: 13px;
line-height: 1.35;
font-weight: 600;
text-decoration: none;
box-shadow: 0 3px 8px rgba(13, 110, 253, 0.18);
transition:
background-color 0.20s ease,
box-shadow 0.20s ease,
transform 0.20s ease;
}
body.item-157 .com-content-category-blog .blog-items .btn-readmore:hover,
body.item-158 .com-content-category-blog .blog-items .btn-readmore:hover {
background: #0b5ed7;
transform: translateY(-1px);
box-shadow: 0 5px 12px rgba(13, 110, 253, 0.24);
}
/* ==========================================================
TABLETTE
========================================================== */
@media (max-width: 991px) {
body.item-157 .com-content-category-blog .blog-items .item-intro,
body.item-158 .com-content-category-blog .blog-items .item-intro {
grid-template-columns: 190px 1fr;
column-gap: 22px;
}
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded),
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) {
width: 190px;
}
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded) > a,
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) > a {
height: 245px;
}
body.item-157 .com-content-category-blog .item-intro img.padded,
body.item-158 .com-content-category-blog .item-intro img.padded {
max-width: 175px !important;
max-height: 225px !important;
}
body.item-157 .com-content-category-blog .blog-items .readmore,
body.item-158 .com-content-category-blog .blog-items .readmore {
margin-left: calc(190px + 22px);
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767px) {
body.item-157 .com-content-category-blog .blog-items .item-intro,
body.item-158 .com-content-category-blog .blog-items .item-intro {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Image en premier */
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded),
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) {
order: 1;
width: 100%;
}
body.item-157 .com-content-category-blog .item-intro > div:has(img.padded) > a,
body.item-158 .com-content-category-blog .item-intro > div:has(img.padded) > a {
width: 100%;
height: 290px;
}
body.item-157 .com-content-category-blog .item-intro img.padded,
body.item-158 .com-content-category-blog .item-intro img.padded {
max-width: 215px !important;
max-height: 270px !important;
}
/* Titre ensuite */
body.item-157 .com-content-category-blog .item-intro > h2,
body.item-158 .com-content-category-blog .item-intro > h2 {
order: 2;
margin: 0;
font-size: 21px;
line-height: 1.3;
}
/* Description */
body.item-157 .com-content-category-blog .item-intro > div:not(:has(img.padded)),
body.item-158 .com-content-category-blog .item-intro > div:not(:has(img.padded)) {
order: 3;
}
body.item-157 .com-content-category-blog .blog-items .readmore,
body.item-158 .com-content-category-blog .blog-items .readmore {
margin: 14px 0 0 0;
}
}
/* ===== BLOCS DE COLONNE =====
Présentation d'un module de colonne, choisie par sa classe CSS (onglet Avancé du module).
Présentation : top-list liste compacte, vignette à gauche et titre à droite
top-overlay chaque article en photo pleine largeur, titre sur l'image
top-featured le premier en photo, les suivants en liste compacte
Options : fx-line filet rouge sous le titre au survol (photos)
fx-play bouton lecture sur les images (blocs de vidéos)
fx-rank numéro de rang devant chaque titre (listes de titres, sans image)
fx-rank-badge le même rang, dans une pastille sombre
Deux modules sont pris en charge : « Articles » et « Articles - Catégorie », dont le balisage diffère.
Dans les sélecteurs ci-dessous, chaque :is() réunit l'élément de l'un et celui de l'autre.
Le gabarit du module « Articles - Catégorie » colle la classe du module au nom de sa liste
(category-moduletop-list) : la liste est donc visée par le début de sa classe, [class^="category-module"].
Une ligne = un article de top-list, ou un article de top-featured à partir du deuxième.
Une carte = un article de top-overlay, ou le premier article de top-featured.
Dans le module « Articles - Catégorie », l'article est l'élément de liste lui-même : pour top-featured,
le premier et les suivants y sont donc désignés par un sélecteur distinct. */
.moduletop-list {
/* Largeur de la vignette des lignes : à ajuster ici pour agrandir ou réduire l'image. */
--top-list-cover: 84px;
}
.moduletop-featured {
--top-list-cover: 84px;
}
.fx-play {
/* Couleur du bouton lecture au survol, et de son halo : un bleu Alpine. */
--top-play-color: #1e62b0;
--top-play-halo: rgba(30, 98, 176, 0.3);
}
/* --- Titre du bloc --- */
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) .module-title {
font-family: "Public Sans", sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #6c757d;
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 2px solid #495057;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) .module-title span {
display: block;
}
/* --- Base commune --- */
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-items, [class^="category-module"]) {
list-style: none;
margin: 0;
padding: 0;
}
:is(.moduletop-overlay, .moduletop-featured) :is(.mod-articles-items, [class^="category-module"]) {
padding-top: 10px;
}
.moduletop-overlay :is(.mod-articles-items, [class^="category-module"]) {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Le module « Articles - Catégorie » arrive avec ses propres marges, filets et limites de taille. */
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) [class^="category-module"] > li {
margin: 0;
padding: 0;
border: 0;
gap: 0;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) [class^="category-module"] .item-meta {
display: none;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) [class^="category-module"] .item-title a {
display: inline;
overflow: visible;
-webkit-line-clamp: unset;
height: auto;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) [class^="category-module"] .item-media a {
display: block;
height: auto;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) [class^="category-module"] .item-media img {
max-width: none;
max-height: none;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-item-content, [class^="category-module"] > li) {
position: relative;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-image, .item-media) {
position: relative;
margin: 0;
float: none;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-image, .item-media) img {
display: block;
width: 100%;
height: auto;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-title, .item-title) {
margin: 0;
font-weight: 600;
line-height: 1.25;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-link, .mod-articles-category-title) {
text-decoration: none;
}
/* Étend la zone cliquable du titre à toute la ligne ou à toute la carte, image comprise. */
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-link, .mod-articles-category-title)::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
/* --- Une ligne : vignette à gauche, titre à droite --- */
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) {
display: grid;
grid-template-columns: var(--top-list-cover) minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 10px 0;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-image, .item-media),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-image, .item-media) {
grid-column: 1;
grid-row: 1;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-title, .item-body),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-title, .item-body) {
grid-column: 2;
grid-row: 1;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-image, .item-media) img,
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-image, .item-media) img {
border-radius: 4px;
box-shadow: 0 1px 3px rgba(20, 30, 45, 0.28);
}
/* Dans top-featured, les vignettes des lignes sont recadrées à la même forme. */
.moduletop-featured li:not(:first-child) :is(.mod-articles-image, .item-media) img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-title, .item-title),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-title, .item-title) {
font-size: 0.92rem;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-link, .mod-articles-category-title),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-link, .mod-articles-category-title) {
color: #212934;
}
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):hover :is(.mod-articles-link, .mod-articles-category-title),
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)):hover :is(.mod-articles-link, .mod-articles-category-title) {
color: #0a58ca;
}
.moduletop-list :is(.mod-articles-items, [class^="category-module"]) > li + li,
.moduletop-featured :is(.mod-articles-items, [class^="category-module"]) > li:nth-child(n + 3) {
border-top: 1px solid #e3e6ea;
}
/* Un article sans image garde sa place de vignette, pour que les titres restent alignés. */
.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::before,
:is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)):not(:has(img))::before {
content: "";
grid-column: 1;
grid-row: 1;
aspect-ratio: 4 / 3;
border-radius: 4px;
background: linear-gradient(135deg, #dfe4ea, #eef1f4);
}
/* Un bloc dont aucun article n'a d'image est une liste de titres : pas de vignette de remplacement,
le titre prend toute la largeur. */
.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li) {
grid-template-columns: minmax(0, 1fr);
padding: 9px 0;
}
.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li)::before {
content: none;
}
.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-title, .item-body) {
grid-column: 1;
}
/* --- Options fx-rank et fx-rank-badge : numéro de rang devant chaque titre d'une liste de titres ---
fx-rank l'affiche en grand chiffre gris clair, fx-rank-badge dans une pastille sombre. */
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]) {
counter-reset: top-rank;
}
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]) > li {
counter-increment: top-rank;
}
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li) {
grid-template-columns: 1.6rem minmax(0, 1fr);
gap: 10px;
align-items: start;
}
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li)::before {
content: counter(top-rank);
grid-column: 1;
grid-row: 1;
aspect-ratio: auto;
background: none;
font-family: "Public Sans", sans-serif;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
text-align: center;
color: #b4bcc6;
}
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-title, .item-body) {
grid-column: 2;
}
:is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li):hover::before {
color: #0a58ca;
}
/* fx-rank-badge : le rang dans une pastille. */
.fx-rank-badge.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li)::before {
width: 1.45rem;
height: 1.45rem;
margin-top: 1px;
border-radius: 50%;
background: #212934;
font-size: 0.72rem;
line-height: 1.45rem;
color: #fff;
}
.fx-rank-badge.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li):hover::before {
background: #0a58ca;
color: #fff;
}
.dark-active .fx-rank-badge.moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li)::before {
background: #e9ecef;
color: #212934;
}
/* --- Une carte : photo pleine largeur, titre en blanc sur un dégradé sombre ---
La photo et le titre sont superposés dans la même case d'une grille. Le titre n'est pas positionné :
la zone cliquable de son lien s'étend donc à toute la carte. */
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) {
display: grid;
grid-template-rows: 1fr;
overflow: hidden;
border-radius: 9px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
transition: box-shadow 0.25s ease;
}
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) {
margin-bottom: 4px;
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-image, .item-media),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-image, .item-media) {
grid-area: 1 / 1;
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-image, .item-media) img,
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-image, .item-media) img {
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 0;
box-shadow: none;
transition: transform 0.4s ease;
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-title, .item-body),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-title, .item-body) {
grid-area: 1 / 1;
align-self: end;
z-index: 1;
padding: 34px 10px 9px;
background: linear-gradient(to bottom, rgba(10, 15, 22, 0), rgba(10, 15, 22, 0.86));
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-title, .item-title),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-title, .item-title) {
font-size: 0.92rem;
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-link, .mod-articles-category-title),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-link, .mod-articles-category-title) {
color: #fff;
}
/* Un article sans image devient une carte sombre de la même forme. */
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img)),
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child):not(:has(img)) {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #1b2530, #3a4856);
}
/* Survol : la photo zoome doucement dans son cadre, la carte se soulève. */
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):hover,
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child):hover,
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):focus-within,
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child):focus-within {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):hover :is(.mod-articles-image, .item-media) img,
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child):hover :is(.mod-articles-image, .item-media) img,
.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):focus-within :is(.mod-articles-image, .item-media) img,
:is(.moduletop-featured li:first-child .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:first-child):focus-within :is(.mod-articles-image, .item-media) img {
transform: scale(1.07);
}
/* --- Option fx-line : filet rouge sous le titre des cartes, au survol --- */
.fx-line.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-link, .mod-articles-category-title),
:is(.fx-line.moduletop-featured li:first-child .mod-articles-item-content, .fx-line.moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-link, .mod-articles-category-title) {
padding-bottom: 3px;
background-image: linear-gradient(#e2001a, #e2001a);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 2px;
transition: background-size 0.35s ease;
}
.fx-line.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):hover :is(.mod-articles-link, .mod-articles-category-title),
:is(.fx-line.moduletop-featured li:first-child .mod-articles-item-content, .fx-line.moduletop-featured [class^="category-module"] > li:first-child):hover :is(.mod-articles-link, .mod-articles-category-title),
.fx-line.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):focus-within :is(.mod-articles-link, .mod-articles-category-title),
:is(.fx-line.moduletop-featured li:first-child .mod-articles-item-content, .fx-line.moduletop-featured [class^="category-module"] > li:first-child):focus-within :is(.mod-articles-link, .mod-articles-category-title) {
background-size: 100% 2px;
}
/* --- Option fx-play : bouton lecture sur les images --- */
.fx-play:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-image, .item-media)::after,
.fx-play.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::after,
:is(.fx-play.moduletop-featured li:not(:first-child) .mod-articles-item-content, .fx-play.moduletop-featured [class^="category-module"] > li:not(:first-child)):not(:has(img))::after,
.fx-play.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::after,
:is(.fx-play.moduletop-featured li:first-child .mod-articles-item-content, .fx-play.moduletop-featured [class^="category-module"] > li:first-child):not(:has(img))::after {
/* Triangle « ▶ » suivi du sélecteur de variante texte : sans lui, iPhone et iPad l'affichent en emoji bleu. */
content: "\25B6\FE0E";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 30px;
height: 30px;
padding-left: 2px;
color: #fff;
font-size: 12px;
line-height: 1;
background: rgba(0, 0, 0, 0.55);
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
pointer-events: none;
transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Au survol de la ligne ou de la carte, le bouton grossit, prend la couleur --top-play-color et s'entoure
d'un halo. */
.fx-play:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-item-content, [class^="category-module"] > li):is(:hover, :focus-within) :is(.mod-articles-image, .item-media)::after,
.fx-play:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-item-content, [class^="category-module"] > li):is(:hover, :focus-within):not(:has(img))::after {
transform: translate(-50%, -50%) scale(1.18);
background-color: var(--top-play-color);
box-shadow: 0 0 0 6px var(--top-play-halo);
}
/* Sur une carte, le bouton est plus grand et placé au-dessus du titre. */
.fx-play.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-image, .item-media)::after,
:is(.fx-play.moduletop-featured li:first-child .mod-articles-item-content, .fx-play.moduletop-featured [class^="category-module"] > li:first-child) :is(.mod-articles-image, .item-media)::after,
.fx-play.moduletop-overlay :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::after,
:is(.fx-play.moduletop-featured li:first-child .mod-articles-item-content, .fx-play.moduletop-featured [class^="category-module"] > li:first-child):not(:has(img))::after {
top: 36%;
width: 46px;
height: 46px;
padding-left: 4px;
font-size: 19px;
}
/* Sur une ligne sans image, le bouton se centre dans la vignette de remplacement. */
.fx-play.moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::after,
:is(.fx-play.moduletop-featured li:not(:first-child) .mod-articles-item-content, .fx-play.moduletop-featured [class^="category-module"] > li:not(:first-child)):not(:has(img))::after {
left: calc(var(--top-list-cover) / 2);
}
/* --- Clavier, mode sombre, animations réduites --- */
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-item-content, [class^="category-module"] > li):focus-within {
outline: 2px solid #0a58ca;
outline-offset: 2px;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-link, .mod-articles-category-title):focus {
outline: none;
}
.dark-active .moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li) :is(.mod-articles-link, .mod-articles-category-title),
:is(.dark-active .moduletop-featured li:not(:first-child) .mod-articles-item-content, .dark-active .moduletop-featured [class^="category-module"] > li:not(:first-child)) :is(.mod-articles-link, .mod-articles-category-title) {
color: #e9ecef;
}
.dark-active .moduletop-list :is(.mod-articles-items, [class^="category-module"]) > li + li,
.dark-active .moduletop-featured :is(.mod-articles-items, [class^="category-module"]) > li:nth-child(n + 3) {
border-top-color: rgba(255, 255, 255, 0.14);
}
.dark-active .moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):not(:has(img))::before,
:is(.dark-active .moduletop-featured li:not(:first-child) .mod-articles-item-content, .dark-active .moduletop-featured [class^="category-module"] > li:not(:first-child)):not(:has(img))::before {
background: linear-gradient(135deg, #252d37, #323c48);
}
@media (prefers-reduced-motion: reduce) {
.fx-play:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-image, .item-media)::after {
transition: none;
}
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-image, .item-media) img,
:is(.moduletop-list, .moduletop-overlay, .moduletop-featured) :is(.mod-articles-link, .mod-articles-category-title) {
transition: none;
transform: none !important;
}
}
/* ===== IMAGES DANS LES ARTICLES ET LES DESCRIPTIONS DE CATÉGORIE =====
Classes à donner à une image dans l'éditeur. Elles se combinent : une pour l'aspect, une pour la place.
Aspect : img-relief (coins arrondis, ombre portée) · img-photo (cadre blanc, légère inclinaison)
Place : img-left (texte à droite) · img-right (texte à gauche) · img-center · img-wide (pleine largeur)
Aucun : img-plain (ni aspect ni place)
Les images qui portent la classe « padded », héritée de l'ancien site, reçoivent par défaut
img-relief et img-left, sauf celles centrées exprès dans l'éditeur et celles hébergées ailleurs que sur le
site, qui ne reçoivent que img-relief.
Une classe de place ou d'aspect ajoutée à l'image l'emporte sur ce défaut. */
.article-body,
.category-desc {
/* Une image flottante ne déborde pas du bloc de texte. */
display: flow-root;
--content-image-width: 46%;
}
/* Un titre ou un tableau repart toujours sous une image flottante. */
.article-body :is(h2, h3, h4, table, hr),
.category-desc :is(h2, h3, h4, table, hr) {
clear: both;
}
/* --- Aspect --- */
:is(.article-body, .category-desc) img:is(.img-relief, .padded) {
border-radius: 10px;
box-shadow: 0 1px 2px rgba(20, 30, 45, 0.25), 0 8px 18px rgba(20, 30, 45, 0.22);
}
:is(.article-body, .category-desc) img.img-photo {
border: 6px solid #fff;
border-bottom-width: 11px;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(20, 30, 45, 0.3), 0 8px 16px rgba(20, 30, 45, 0.22);
transform: rotate(-3deg);
}
/* --- Place --- */
:is(.article-body, .category-desc) img:is(.img-left, .padded) {
float: left;
/* Deux images qui se suivent s'empilent au lieu de se chevaucher. */
clear: left;
max-width: var(--content-image-width);
height: auto;
margin: 4px 24px 12px 0;
}
:is(.article-body, .category-desc) img.img-right {
float: right;
clear: right;
max-width: var(--content-image-width);
height: auto;
margin: 4px 0 12px 24px;
}
/* Deux sortes d'images « padded » gardent leur place d'origine et ne reçoivent que l'aspect :
- celles centrées exprès dans l'éditeur (marges automatiques, ou bloc centré) ;
- celles qui ne viennent pas du dossier images du site, comme les couvertures affichées par Amazon,
posées côte à côte dans les articles de livres. */
:is(.article-body, .category-desc) img.padded:is([style*="margin-left: auto"], [style*="margin-left:auto"]),
:is(.article-body, .category-desc) :is([style*="text-align: center"], [style*="text-align:center"], [align="center"]) img.padded,
:is(.article-body, .category-desc) img.padded:not([src^="/images/"]):not([src^="images/"]) {
float: none;
clear: none;
max-width: 100%;
}
:is(.article-body, .category-desc) img.padded:not([src^="/images/"]):not([src^="images/"]) {
margin: 0;
}
:is(.article-body, .category-desc) :is([style*="text-align: center"], [style*="text-align:center"], [align="center"]) img.padded {
margin: 8px auto 16px;
}
:is(.article-body, .category-desc) img.img-photo:is(.img-left, .padded) {
margin: 8px 30px 14px 6px;
}
:is(.article-body, .category-desc) img.img-photo.img-right {
margin: 8px 6px 14px 30px;
}
:is(.article-body, .category-desc) img.img-center {
display: block;
float: none;
max-width: 100%;
height: auto;
margin: 8px auto 16px;
}
:is(.article-body, .category-desc) img.img-wide {
display: block;
float: none;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 7;
object-fit: cover;
margin: 8px 0 16px;
}
/* Les retours à la ligne placés juste après une image flottante ou pleine largeur n'ont plus lieu d'être. */
:is(.article-body, .category-desc) img:is(.img-left, .img-right, .img-wide, .padded) + br,
:is(.article-body, .category-desc) img:is(.img-left, .img-right, .img-wide, .padded) + br + br {
display: none;
}
/* --- Aucun traitement --- */
:is(.article-body, .category-desc) img.img-plain {
float: none;
max-width: 100%;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none;
}
/* Sur mobile, le texte n'a plus la place de passer à côté d'une image. */
@media (max-width: 575.98px) {
:is(.article-body, .category-desc) img:is(.img-left, .img-right, .padded):not(.img-plain) {
display: block;
float: none;
max-width: 100%;
margin: 8px auto 16px;
}
}
/* --- Liste des classes dans l'éditeur ---
L'éditeur JCE ne propose, dans le champ « Classes » d'une image, que les classes qu'il trouve écrites
en sélecteur simple (img.nom-de-classe) dans cette feuille de style. Cette règle les lui déclare ;
elle ne change rien à l'affichage, les traitements étant définis plus haut. */
img.img-relief,
img.img-photo,
img.img-left,
img.img-right,
img.img-center,
img.img-wide,
img.img-plain {
/* Valeur par défaut du navigateur : la règle doit contenir une déclaration pour être conservée. */
image-rendering: auto;
}
/* ===== MENU PRINCIPAL =====
Les entrées du menu principal sont des alias. Sur une sous-page de leur rubrique, Joomla leur donne
la classe alias-parent-active au lieu de active : elles reçoivent ici la même couleur que l'entrée active.
Le filet rouge du style d'en-tête « Bandeau sombre » est géré par le plugin Maverick - Surcharges. */
.mvk-mainnav .navbar-nav > li.alias-parent-active > .nav-link {
color: var(--mainnav-link-active-color);
}
/* ===== MISE EN PAGE SUR TABLETTE ET MOBILE ===== */
/* Entre 768 et 1199 px, le template garde les colonnes latérales à côté du contenu, sur un sixième
de la largeur : leurs blocs deviennent illisibles. Elles passent sous le contenu, sur toute la
largeur, et leurs blocs se rangent sur deux colonnes. */
@media (min-width: 768px) and (max-width: 1199.98px) {
#mvk-main-body .row > :is(.component, .sidebar-l, .sidebar-r) {
flex: 0 0 100%;
max-width: 100%;
/* Le template place la colonne gauche avant le contenu par une règle marquée !important. */
order: 0 !important;
}
#mvk-main-body .row > :is(.sidebar-l, .sidebar-r) {
columns: 2;
column-gap: 32px;
}
#mvk-main-body .row > :is(.sidebar-l, .sidebar-r) > .mvk-module {
break-inside: avoid;
}
}
/* Le vide entre le fil d'Ariane et le contenu cumulait trois marges. */
#mvk-breadcrumbs + #mvk-main-body {
padding-top: 0;
}
/* Menu d'une colonne latérale : sous 992 px, Joomla le replie derrière un bouton sans libellé.
Il reste déplié, comme sur ordinateur. */
#mvk-main-body :is(.sidebar-l, .sidebar-r) .navbar > .navbar-toggler {
display: none;
}
#mvk-main-body :is(.sidebar-l, .sidebar-r) .navbar > .navbar-collapse.collapse {
display: block;
}
/* Tableau de quatre colonnes ou plus sur mobile : cellules resserrées pour tenir dans la largeur. */
@media (max-width: 767.98px) {
:is(.article-body, .category-desc) table:has(tr > :nth-child(4)) :is(td, th) {
padding: 8px 4px;
font-size: 0.875rem;
}
}
/* ===== TABLEAUX DES ARTICLES (fiches techniques, performances) =====
Habillage des tableaux « table » posés dans un article ou une description de catégorie : carte
blanche, bandeau de titre sombre à filet rouge comme l'en-tête, libellé en gris et valeur en gras.
Les couleurs passent par les variables du template pour les fonds, et par celles déclarées ici. */
:is(.article-body, .category-desc) table.table {
--fiche-surface: #fff;
--fiche-border: #e2e6ea;
--fiche-line: #edf0f3;
--fiche-stripe: #f8f9fb;
--fiche-subhead: #eef1f4;
--fiche-label: #5a6470;
--fiche-value: #141b24;
--fiche-head: #141b24;
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-color: var(--fiche-value);
/* L'éditeur écrit height: 100% dans la balise. */
height: auto !important;
margin: 0 0 16px;
overflow: hidden;
border: 1px solid var(--fiche-border);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
background: var(--fiche-surface);
box-shadow: 0 1px 3px rgba(20, 27, 36, 0.07);
}
.dark-active :is(.article-body, .category-desc) table.table {
--fiche-surface: #1a212b;
--fiche-border: #2c3642;
--fiche-line: #2a3441;
--fiche-stripe: #1f2732;
--fiche-subhead: #232c38;
--fiche-label: #a3adb8;
--fiche-value: #eef1f4;
--fiche-head: #0e131a;
}
:is(.article-body, .category-desc) table.table > * > tr > * {
padding: 9px 18px;
border-bottom: 1px solid var(--fiche-line);
box-shadow: none;
font-size: 0.95rem;
line-height: 1.4;
vertical-align: middle;
}
:is(.article-body, .category-desc) table.table > tbody > tr:last-child > * {
border-bottom: 0;
}
/* Bandeau de titre. */
:is(.article-body, .category-desc) table.table > thead > tr {
--bs-table-bg: var(--fiche-head);
--bs-table-color: #fff;
}
:is(.article-body, .category-desc) table.table > thead > tr > th {
padding: 13px 18px;
border-bottom: 3px solid #d0021b;
/* Ce qui suit le titre dans le bandeau, par exemple la source d'une mesure, est en petit. */
font-size: 0.82rem;
font-weight: 400;
/* L'éditeur écrit text-align: center dans la balise. */
text-align: left !important;
}
:is(.article-body, .category-desc) table.table > thead th > :is(h2, h3, h4, p, div) {
margin: 2px 0 0;
text-align: left !important;
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
color: inherit;
}
:is(.article-body, .category-desc) table.table > thead th > :is(h2, h3, h4):first-child {
margin: 0;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.35;
}
/* Lignes : libellé à gauche, valeur à droite, une ligne sur deux légèrement teintée. */
:is(.article-body, .category-desc) table.table > tbody > tr:nth-child(even) {
--bs-table-bg: var(--fiche-stripe);
}
:is(.article-body, .category-desc) table.table > tbody > tr > td:first-child {
width: 46%;
color: var(--fiche-label);
}
:is(.article-body, .category-desc) table.table > tbody > tr > td:first-child :is(h3, h4) {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.35;
color: inherit;
}
:is(.article-body, .category-desc) table.table > tbody > tr > td:not(:first-child) {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
:is(.article-body, .category-desc) table.table > tbody > tr > td[colspan] {
width: auto;
color: var(--fiche-value);
}
/* Tableau de trois colonnes ou plus : la première n'a pas de largeur imposée. */
:is(.article-body, .category-desc) table.table:has(tr > :nth-child(3)) > tbody > tr > td:first-child {
width: auto;
}
/* Tableau sans bandeau de titre : sa première ligne nomme les colonnes. */
:is(.article-body, .category-desc) table.table:not(:has(thead)) > tbody > tr:first-child {
--bs-table-bg: var(--fiche-subhead);
}
:is(.article-body, .category-desc) table.table:not(:has(thead)) > tbody > tr:first-child > td,
:is(.article-body, .category-desc) table.table:not(:has(thead)) > tbody > tr:first-child > td :is(h3, h4) {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--fiche-label);
text-transform: uppercase;
}
@media (max-width: 767.98px) {
:is(.article-body, .category-desc) table.table > tbody > tr > td {
padding: 9px 12px;
font-size: 0.9rem;
}
:is(.article-body, .category-desc) table.table > thead > tr > th {
padding: 12px;
}
}
/* ===== BLOCS DE CONTENU (module JT Content Slider) =====
Présentation d'un module JT Content Slider, choisie par sa classe CSS (onglet Avancé du module) :
bloc-grille cartes sur trois colonnes
bloc-une un article à la une sur deux colonnes, les autres en cartes sur quatre colonnes
bloc-une-large un article à la une sur toute la largeur, les autres en cartes sur quatre colonnes
bloc-liste un article à la une à gauche, les autres en lignes compactes à droite
bloc-slider cartes sur une rangée qui défile, avec flèches sur ordinateur
Options, à ajouter après la présentation :
fx-chip-red étiquette de rubrique rouge, en capitales (sinon : pastille sombre)
fx-square photos et cartes à angles droits
fx-scroll sur mobile, les cartes défilent au doigt sur une rangée
fx-play bouton lecture sur les photos, pour les vidéos
fx-portrait photos en hauteur (couvertures de livres), cartes plus étroites ; pour bloc-grille et bloc-slider
Avec une présentation, le plugin Maverick - Surcharges retire le carrousel du module et sert les photos
d'origine à la place des vignettes. L'étiquette, la date et l'extrait s'affichent selon les réglages du
module (Afficher la catégorie, Afficher la date, Afficher le texte d'introduction). */
.jt-cs[class*=" bloc-"] {
--bloc-title: #141b24;
--bloc-text: #5a6470;
--bloc-meta: #8a939d;
--bloc-ground: #eef1f4;
--bloc-chip: #2b3138;
--bloc-radius: 8px;
padding: 0 !important;
}
.dark-active .jt-cs[class*=" bloc-"] {
--bloc-title: #eef1f4;
--bloc-text: #a3adb8;
--bloc-meta: #8a939d;
--bloc-ground: #1f2732;
--bloc-chip: #3a4553;
}
.jt-cs.fx-square[class*=" bloc-"] {
--bloc-radius: 0;
}
.jt-cs[class*=" bloc-"] > .owl-carousel {
display: grid;
gap: 28px 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jt-cs[class*=" bloc-"] .slide {
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
/* Une carte : photo, étiquette, titre, extrait, date. Toute la carte est cliquable par le lien du titre. */
.jt-cs[class*=" bloc-"] .jt-inner {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.jt-cs[class*=" bloc-"] .hover-icons {
display: none;
}
.jt-cs[class*=" bloc-"] .jt-imagecover {
position: relative;
isolation: isolate;
float: none !important;
margin: 0 0 12px !important;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: var(--bloc-radius);
background: var(--bloc-ground);
}
/* Le module place le lien de la photo au-dessus de tout : il passerait devant le dégradé et le bouton lecture. */
.jt-cs[class*=" bloc-"] .jt-imagecover a {
position: static;
z-index: auto;
display: block;
height: 100%;
}
.jt-cs[class*=" bloc-"] .jt-imagecover img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 0 !important;
box-shadow: none !important;
transition: transform 0.35s ease;
}
.jt-cs[class*=" bloc-"] .jt-category {
align-self: flex-start;
margin: 0 0 8px;
padding: 3px 10px;
border-radius: 6px;
background: var(--bloc-chip);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.5;
color: #fff;
}
.jt-cs.fx-chip-red[class*=" bloc-"] .jt-category {
padding: 2px 8px;
border-radius: 0;
background: #d0021b;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.jt-cs[class*=" bloc-"] .jt-category a {
position: relative;
z-index: 3;
color: inherit;
text-decoration: none;
}
.jt-cs[class*=" bloc-"] .jt-inner > :is(h2, h3, h4, h5) {
display: -webkit-box;
margin: 0 0 6px;
overflow: hidden;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.jt-cs[class*=" bloc-"] a.jt-title {
color: var(--bloc-title);
text-decoration: none;
}
.jt-cs[class*=" bloc-"] a.jt-title::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.jt-cs[class*=" bloc-"] .jt-introtext {
display: -webkit-box;
margin: 0 0 6px;
overflow: hidden;
font-size: 0.92rem;
line-height: 1.55;
color: var(--bloc-text);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.jt-cs[class*=" bloc-"] .jt-author-date {
order: 10;
margin: 0;
font-size: 0.8rem;
color: var(--bloc-meta);
}
.jt-cs[class*=" bloc-"] .jt-inner:is(:hover, :focus-within) a.jt-title {
color: #0a58ca;
}
.jt-cs[class*=" bloc-"] .jt-inner:is(:hover, :focus-within) .jt-imagecover img {
transform: scale(1.04);
}
/* Lien vers toute la rubrique : un bouton rouge centré, entièrement cliquable. */
.jt-cs[class*=" bloc-"] .jtcs_more_cat {
position: relative;
display: table;
margin: 26px auto 0;
padding: 10px 22px;
border-radius: 6px;
background: #d0021b;
font-size: 0.92rem;
font-weight: 600;
color: #fff;
}
.jt-cs[class*=" bloc-"] .jtcs_more_cat a {
color: inherit;
text-decoration: none;
}
.jt-cs[class*=" bloc-"] .jtcs_more_cat a::after {
content: "";
position: absolute;
inset: 0;
}
.jt-cs[class*=" bloc-"] .jtcs_more_cat:hover {
background: #a80016;
}
/* L'article à la une de bloc-une, bloc-une-large et bloc-liste : photo pleine, texte incrusté en bas. */
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto auto auto;
overflow: hidden;
border-radius: var(--bloc-radius);
background: #141b24;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-inner > * {
grid-column: 1;
margin-right: 18px;
margin-left: 18px;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-imagecover {
grid-row: 1 / -1;
margin: 0 !important;
aspect-ratio: auto;
min-height: 100%;
border-radius: 0;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-imagecover::after {
content: "";
position: absolute;
inset: 25% 0 0;
z-index: 1;
/* Assez sombre pour un titre blanc, même sur une miniature photographiée sur fond blanc. */
background: linear-gradient(to top, rgba(10, 14, 20, 0.95) 0%, rgba(10, 14, 20, 0.8) 40%, rgba(10, 14, 20, 0) 100%);
pointer-events: none;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-category {
grid-row: 2;
z-index: 1;
justify-self: start;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-inner > :is(h2, h3, h4, h5) {
grid-row: 3;
z-index: 1;
margin-bottom: 16px;
font-size: 1.3rem;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-author-date {
grid-row: 4;
z-index: 1;
margin-top: -10px;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.75);
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child :is(a.jt-title, .jt-inner:hover a.jt-title) {
color: #fff;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-introtext {
display: none;
}
/* bloc-une : la une sur deux colonnes, puis des cartes sur quatre colonnes. */
.bloc-une.jt-cs > .owl-carousel {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bloc-une.jt-cs > .owl-carousel > .slide:first-child {
grid-column: span 2;
}
/* bloc-une-large : la une sur toute la largeur, titre centré. */
.bloc-une-large.jt-cs > .owl-carousel {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bloc-une-large.jt-cs > .owl-carousel > .slide:first-child {
grid-column: 1 / -1;
}
.bloc-une-large.jt-cs > .owl-carousel > .slide:first-child .jt-imagecover {
aspect-ratio: 21 / 9;
}
.bloc-une-large.jt-cs > .owl-carousel > .slide:first-child .jt-inner > :not(.jt-imagecover) {
justify-self: center;
text-align: center;
}
.bloc-une-large.jt-cs > .owl-carousel > .slide:first-child .jt-inner > :is(h2, h3, h4, h5) {
max-width: 30ch;
font-size: 1.7rem;
}
/* bloc-liste : la une à gauche sur toute la hauteur, les autres en lignes compactes à droite. */
.bloc-liste.jt-cs > .owl-carousel {
grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
gap: 0 22px;
align-items: start;
}
.bloc-liste.jt-cs > .owl-carousel > .slide {
grid-column: 2;
margin-bottom: 14px !important;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:first-child {
grid-column: 1;
grid-row: 1 / span 8;
margin-bottom: 0 !important;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:first-child .jt-imagecover {
aspect-ratio: 16 / 10;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) .jt-inner {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
column-gap: 12px;
align-content: start;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) .jt-inner > * {
grid-column: 2;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) .jt-imagecover {
grid-column: 1;
grid-row: 1 / span 4;
margin: 0 !important;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) .jt-inner > :is(h2, h3, h4, h5) {
font-size: 0.95rem;
line-height: 1.3;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) :is(.jt-introtext, .jt-category) {
display: none;
}
/* Le module assombrit la photo au survol par un voile : les blocs ont leur propre effet. */
.jt-cs[class*=" bloc-"] .jt-imagecover::before {
content: none;
}
/* bloc-slider : les cartes de bloc-grille sur une rangée qui défile ; la carte suivante dépasse au bord.
Défilement au doigt, au pavé tactile et au clavier ; flèches pour la souris, ajoutées par le plugin. */
.bloc-slider.jt-cs {
position: relative;
container-type: inline-size;
}
.bloc-slider.jt-cs > .owl-carousel {
display: flex;
gap: 24px;
padding-bottom: 4px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.bloc-slider.jt-cs > .owl-carousel::-webkit-scrollbar {
display: none;
}
.bloc-slider.jt-cs > .owl-carousel > .slide {
flex: 0 0 calc((100% - 48px) / 3.3);
scroll-snap-align: start;
}
.bloc-slider.jt-cs .bloc-nav button {
position: absolute;
/* À mi-hauteur des photos : 16/10 de la largeur d'une carte, calculée sur la largeur du bloc. */
top: calc((100cqw - 48px) / 3.3 * 0.3125);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0 0 4px;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 10px rgba(20, 27, 36, 0.25);
font-size: 1.8rem;
line-height: 1;
color: #141b24;
cursor: pointer;
transform: translateY(-50%);
transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.bloc-slider.jt-cs .bloc-prev {
left: -12px;
}
.bloc-slider.jt-cs .bloc-next {
right: -12px;
}
.bloc-slider.jt-cs .bloc-nav button:is(:hover, :focus-visible) {
background: #d0021b;
color: #fff;
}
.bloc-slider.jt-cs .bloc-nav button:disabled {
opacity: 0;
pointer-events: none;
}
@media (max-width: 991.98px) {
.bloc-slider.jt-cs > .owl-carousel > .slide {
flex-basis: calc((100% - 24px) / 2.3);
}
.bloc-slider.jt-cs .bloc-nav button {
top: calc((100cqw - 24px) / 2.3 * 0.3125);
}
}
/* Mobile et écrans tactiles : on fait défiler au doigt, sans flèches. */
@media (max-width: 767.98px), (hover: none) {
.bloc-slider.jt-cs .bloc-nav {
display: none;
}
}
@media (max-width: 767.98px) {
.bloc-slider.jt-cs > .owl-carousel {
gap: 14px;
margin: 0 -16px;
padding: 0 16px 4px;
scroll-padding: 0 16px;
}
.bloc-slider.jt-cs > .owl-carousel > .slide {
flex-basis: 78%;
}
}
/* fx-portrait : photos en hauteur, au format d'une couverture de livre. Les cartes se resserrent pour que la
photo ne devienne pas démesurée : quatre par rangée dans la grille, trois et demie dans le slider. */
.fx-portrait.jt-cs[class*=" bloc-"] .jt-imagecover {
aspect-ratio: 2 / 3;
}
.fx-portrait.jt-cs[class*=" bloc-"] .jt-imagecover img {
object-position: top center;
}
.fx-portrait.bloc-grille.jt-cs > .owl-carousel {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px 20px;
}
.fx-portrait.bloc-slider.jt-cs > .owl-carousel {
gap: 20px;
}
.fx-portrait.bloc-slider.jt-cs > .owl-carousel > .slide {
flex-basis: calc((100% - 60px) / 3.5);
}
.fx-portrait.bloc-slider.jt-cs .bloc-nav button {
/* À mi-hauteur des couvertures : 3/2 de la largeur d'une carte, divisé par deux. */
top: calc((100cqw - 60px) / 3.5 * 0.75);
}
.fx-portrait.jt-cs[class*=" bloc-"] .jt-inner > :is(h2, h3, h4, h5) {
font-size: 0.98rem;
}
.fx-portrait.jt-cs[class*=" bloc-"] .jt-introtext {
font-size: 0.86rem;
}
@media (max-width: 991.98px) {
.fx-portrait.bloc-grille.jt-cs > .owl-carousel {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fx-portrait.bloc-slider.jt-cs > .owl-carousel > .slide {
flex-basis: calc((100% - 40px) / 2.6);
}
.fx-portrait.bloc-slider.jt-cs .bloc-nav button {
top: calc((100cqw - 40px) / 2.6 * 0.75);
}
}
@media (max-width: 767.98px) {
.fx-portrait.bloc-grille.jt-cs > .owl-carousel {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 14px;
}
.fx-portrait.bloc-slider.jt-cs > .owl-carousel > .slide {
flex-basis: 44%;
}
.fx-portrait.jt-cs[class*=" bloc-"] .jt-introtext {
display: none;
}
}
/* fx-play : bouton lecture sur chaque photo, en grand sur la une. */
.fx-play.jt-cs[class*=" bloc-"] .jt-imagecover::before {
content: "\25B6\FE0E";
position: absolute;
inset: auto;
top: 50%;
left: 50%;
z-index: 2;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding-left: 3px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
background: rgba(10, 14, 20, 0.45);
font-size: 14px;
color: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
transition: transform 0.2s ease, background-color 0.2s ease;
box-sizing: border-box;
}
.fx-play:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-imagecover::before {
top: 42%;
width: 64px;
height: 64px;
font-size: 22px;
}
.fx-play.bloc-liste.jt-cs > .owl-carousel > .slide:not(:first-child) .jt-imagecover::before {
width: 28px;
height: 28px;
font-size: 10px;
}
.fx-play.jt-cs[class*=" bloc-"] .jt-inner:is(:hover, :focus-within) .jt-imagecover::before {
background: #1e62b0;
transform: translate(-50%, -50%) scale(1.12);
}
/* Tablette : quatre colonnes deviennent deux. */
@media (max-width: 991.98px) {
:is(.bloc-une, .bloc-une-large).jt-cs > .owl-carousel,
.bloc-grille.jt-cs > .owl-carousel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile : la une sur toute la largeur, les cartes par deux ; une seule colonne pour la grille. */
@media (max-width: 767.98px) {
.jt-cs[class*=" bloc-"] > .owl-carousel {
gap: 22px 14px;
}
.bloc-grille.jt-cs > .owl-carousel {
grid-template-columns: minmax(0, 1fr);
}
:is(.bloc-une, .bloc-une-large).jt-cs > .owl-carousel > .slide:first-child {
grid-column: 1 / -1;
}
:is(.bloc-une, .bloc-une-large).jt-cs > .owl-carousel > .slide:first-child .jt-imagecover {
aspect-ratio: 4 / 3;
}
:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-inner > :is(h2, h3, h4, h5) {
font-size: 1.15rem;
}
.fx-play:is(.bloc-une, .bloc-une-large, .bloc-liste).jt-cs > .owl-carousel > .slide:first-child .jt-imagecover::before {
top: 32%;
width: 52px;
height: 52px;
font-size: 18px;
}
:is(.bloc-une, .bloc-une-large).jt-cs > .owl-carousel > .slide:not(:first-child) .jt-introtext {
display: none;
}
:is(.bloc-une, .bloc-une-large).jt-cs > .owl-carousel > .slide:not(:first-child) .jt-inner > :is(h2, h3, h4, h5) {
font-size: 0.95rem;
}
.bloc-liste.jt-cs > .owl-carousel {
grid-template-columns: minmax(0, 1fr);
}
.bloc-liste.jt-cs > .owl-carousel > .slide,
.bloc-liste.jt-cs > .owl-carousel > .slide:first-child {
grid-column: 1;
grid-row: auto;
}
.bloc-liste.jt-cs > .owl-carousel > .slide:first-child {
margin-bottom: 14px !important;
}
/* fx-scroll : une rangée qu'on fait défiler au doigt ; la carte suivante dépasse au bord. */
.fx-scroll.jt-cs[class*=" bloc-"] > .owl-carousel {
display: flex;
gap: 14px;
margin: 0 -16px;
padding: 0 16px 8px;
overflow-x: auto;
scroll-padding: 0 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.fx-scroll.jt-cs[class*=" bloc-"] > .owl-carousel > .slide {
flex: 0 0 78%;
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.jt-cs[class*=" bloc-"] :is(.jt-imagecover img, .jt-imagecover::before) {
transition: none;
}
}
/* ===== PAGES DE LISTE (catégorie en mode blog) =====
Présentation d'une page de liste d'articles, choisie par la « Classe de page » de son entrée de menu
(onglet Affichage de la page) :
liste-simple une ligne par article : vignette à gauche, titre, extrait, date
liste-rythmee par groupes de six : un grand article, deux lignes, trois petits (façon Allociné)
liste-catalogue comme liste-simple, avec un numéro devant chaque article
Options : fx-portrait vignettes en hauteur (couvertures de livres)
fx-play bouton lecture sur les vignettes, pour les vidéos
Les articles sont reconstruits par la surcharge local/html/com_content/category/blog_item.php. */
.blog[class*=" liste-"] {
--liste-ink: #141b24;
--liste-mute: #5a6470;
--liste-meta: #8a939d;
--liste-line: #e2e6ea;
--liste-ground: #eef1f4;
}
.dark-active .blog[class*=" liste-"] {
--liste-ink: #eef1f4;
--liste-mute: #a3adb8;
--liste-meta: #8a939d;
--liste-line: #2c3642;
--liste-ground: #1f2732;
}
.blog[class*=" liste-"] .blog-items {
margin: 26px 0 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
/* Les rangées et colonnes du template ne servent plus : les articles se rangent directement dans la liste.
Les articles « en tête » (réglage Articles en tête du menu) ont leur propre enveloppe, blog-item. */
.blog[class*=" liste-"] .blog-items :is(.items-row, .items-row > [class*="col-"], .item, .blog-item, .blog-item-content) {
display: contents;
}
.blog[class*=" liste-"] .items-leading::after {
content: none;
}
.blog[class*=" liste-"] .items-leading + .blog-items {
margin-top: 26px;
}
.blog[class*=" liste-"] .liste-item {
position: relative;
min-width: 0;
}
.blog[class*=" liste-"] .liste-media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: 8px;
background: var(--liste-ground);
}
.blog[class*=" liste-"] .liste-media img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
object-fit: cover;
transition: transform 0.35s ease;
}
.blog.fx-portrait[class*=" liste-"] .liste-media {
aspect-ratio: 2 / 3;
}
.blog[class*=" liste-"] .liste-title {
margin: 0 0 8px;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
}
.blog[class*=" liste-"] .liste-title a {
color: var(--liste-ink);
text-decoration: none;
}
/* Tout l'article est cliquable par le lien du titre. */
.blog[class*=" liste-"] .liste-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.blog[class*=" liste-"] .liste-item:is(:hover, :focus-within) .liste-title a {
color: #d0021b;
}
.blog[class*=" liste-"] .liste-item:is(:hover, :focus-within) .liste-media img {
transform: scale(1.04);
}
.blog[class*=" liste-"] .liste-text {
display: -webkit-box;
margin: 0 0 8px;
overflow: hidden;
font-size: 0.95rem;
line-height: 1.55;
color: var(--liste-mute);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.blog[class*=" liste-"] .liste-date {
font-size: 0.8rem;
color: var(--liste-meta);
}
/* liste-simple et liste-catalogue : une ligne par article, séparées par un filet. */
.blog:is(.liste-simple, .liste-catalogue) .blog-items {
display: flex;
flex-direction: column;
counter-reset: liste;
}
.blog:is(.liste-simple, .liste-catalogue) .liste-item {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 22px;
align-items: start;
padding: 22px 0;
border-top: 1px solid var(--liste-line);
}
.blog:is(.liste-simple, .liste-catalogue) .blog-items > .items-row:first-child > :first-child .liste-item {
padding-top: 0;
border-top: 0;
}
.blog.fx-portrait:is(.liste-simple, .liste-catalogue) .liste-item {
grid-template-columns: 140px minmax(0, 1fr);
}
/* liste-catalogue : le numéro de l'article, la vignette en relief, la date en étiquette. */
.blog.liste-catalogue .liste-item {
grid-template-columns: 2.4rem 220px minmax(0, 1fr);
gap: 20px;
counter-increment: liste;
}
.blog.fx-portrait.liste-catalogue .liste-item {
grid-template-columns: 2.4rem 120px minmax(0, 1fr);
}
.blog.liste-catalogue .liste-item::before {
content: counter(liste, decimal-leading-zero);
padding-top: 4px;
font-size: 1.6rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #c9ced4;
transition: color 0.2s ease;
}
.blog.liste-catalogue .liste-item:is(:hover, :focus-within)::before {
color: #d0021b;
}
.blog.liste-catalogue .liste-media {
box-shadow: 0 2px 8px rgba(20, 27, 36, 0.12);
}
.blog.fx-portrait.liste-catalogue .liste-text {
-webkit-line-clamp: 5;
}
.blog.liste-catalogue .liste-date {
display: inline-block;
margin-top: 2px;
padding: 2px 8px;
border-radius: 4px;
background: var(--liste-ground);
color: var(--liste-mute);
}
/* liste-rythmee : par groupes de six articles, un grand, deux lignes, trois petits (liste-r0 à liste-r5 :
rang de l'article dans son groupe, posé par la surcharge). */
.blog.liste-rythmee .blog-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px 22px;
}
.blog.liste-rythmee .liste-item:is(.liste-r0, .liste-r1, .liste-r2) {
grid-column: 1 / -1;
}
.blog.liste-rythmee .liste-item:is(.liste-r1, .liste-r2) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.blog.fx-portrait.liste-rythmee .liste-item:is(.liste-r1, .liste-r2) {
grid-template-columns: 140px minmax(0, 1fr);
}
/* Le grand : photo pleine, titre incrusté. */
.blog.liste-rythmee .liste-item.liste-r0 {
display: grid;
overflow: hidden;
border-radius: 10px;
background: #141b24;
}
.blog.liste-rythmee .liste-r0 > * {
grid-area: 1 / 1;
}
.blog.liste-rythmee .liste-r0 .liste-media {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.blog.fx-portrait.liste-rythmee .liste-r0 .liste-media img {
background: #2b3138;
object-fit: contain;
}
.blog.liste-rythmee .liste-r0 .liste-media::after {
content: "";
position: absolute;
inset: 30% 0 0;
background: linear-gradient(to top, rgba(10, 14, 20, 0.95), rgba(10, 14, 20, 0.75) 45%, rgba(10, 14, 20, 0));
pointer-events: none;
}
.blog.liste-rythmee .liste-r0 .liste-body {
z-index: 1;
align-self: end;
padding: 0 20px 18px;
}
.blog.liste-rythmee .liste-r0 .liste-title {
font-size: 1.55rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.blog.liste-rythmee .liste-r0 .liste-title a,
.blog.liste-rythmee .liste-r0:is(:hover, :focus-within) .liste-title a {
color: #fff;
}
.blog.liste-rythmee .liste-r0 .liste-text {
display: none;
}
.blog.liste-rythmee .liste-r0 .liste-date {
color: rgba(255, 255, 255, 0.75);
}
/* Les trois petits. */
.blog.liste-rythmee .liste-item:is(.liste-r3, .liste-r4, .liste-r5) .liste-media {
margin-bottom: 10px;
}
.blog.liste-rythmee .liste-item:is(.liste-r3, .liste-r4, .liste-r5) .liste-title {
font-size: 1rem;
}
.blog.liste-rythmee .liste-item:is(.liste-r3, .liste-r4, .liste-r5) .liste-text {
display: none;
}
/* fx-play : bouton lecture au centre de chaque vignette, plus grand sur le grand article de liste-rythmee. */
.blog.fx-play[class*=" liste-"] .liste-media {
position: relative;
}
.blog.fx-play[class*=" liste-"] .liste-media::before {
content: "\25B6\FE0E";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding-left: 3px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
background: rgba(10, 14, 20, 0.45);
font-size: 15px;
color: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
transition: transform 0.2s ease, background-color 0.2s ease;
box-sizing: border-box;
}
.blog.fx-play.liste-rythmee .liste-r0 .liste-media::before {
top: 42%;
width: 68px;
height: 68px;
font-size: 24px;
}
.blog.fx-play.liste-rythmee .liste-item:is(.liste-r3, .liste-r4, .liste-r5) .liste-media::before {
width: 36px;
height: 36px;
font-size: 12px;
}
.blog.fx-play[class*=" liste-"] .liste-item:is(:hover, :focus-within) .liste-media::before {
background: #1e62b0;
transform: translate(-50%, -50%) scale(1.12);
}
/* Mobile : vignette réduite ; pour liste-rythmee, le grand puis des lignes compactes. */
@media (max-width: 767.98px) {
.blog:is(.liste-simple, .liste-catalogue) .liste-item,
.blog.liste-rythmee .liste-item:not(.liste-r0) {
grid-template-columns: 120px minmax(0, 1fr);
gap: 12px;
padding: 14px 0;
}
.blog.fx-portrait:is(.liste-simple, .liste-catalogue) .liste-item,
.blog.fx-portrait.liste-rythmee .liste-item:not(.liste-r0) {
grid-template-columns: 90px minmax(0, 1fr);
}
.blog.liste-catalogue .liste-item {
grid-template-columns: 1.8rem 110px minmax(0, 1fr);
gap: 10px;
}
.blog.fx-portrait.liste-catalogue .liste-item {
grid-template-columns: 1.8rem 84px minmax(0, 1fr);
}
.blog.liste-catalogue .liste-item::before {
font-size: 1.15rem;
}
.blog.liste-rythmee .blog-items {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.blog.liste-rythmee .liste-item:not(.liste-r0) {
display: grid;
grid-column: 1;
border-top: 1px solid var(--liste-line);
}
.blog.liste-rythmee .liste-item:not(.liste-r0) .liste-media {
margin: 0;
}
.blog.liste-rythmee .liste-r0 {
margin: 0 0 6px;
}
.blog.liste-rythmee .liste-r0 .liste-media {
aspect-ratio: 4 / 3;
}
.blog[class*=" liste-"] .liste-title,
.blog.liste-rythmee .liste-r0 .liste-title {
margin-bottom: 4px;
font-size: 1rem;
}
.blog.liste-rythmee .liste-r0 .liste-title {
font-size: 1.2rem;
}
.blog[class*=" liste-"] .liste-text {
margin-bottom: 4px;
font-size: 0.85rem;
-webkit-line-clamp: 2;
}
.blog.liste-rythmee .liste-item:not(.liste-r0) .liste-text {
display: none;
}
}
@media (max-width: 767.98px) {
.blog.fx-play[class*=" liste-"] .liste-item:not(.liste-r0) .liste-media::before {
width: 32px;
height: 32px;
font-size: 11px;
}
.blog.fx-play.liste-rythmee .liste-r0 .liste-media::before {
top: 38%;
width: 54px;
height: 54px;
font-size: 19px;
}
}
@media (prefers-reduced-motion: reduce) {
.blog[class*=" liste-"] :is(.liste-media img, .liste-media::before) {
transition: none;
}
}
/* ===== MODE SOMBRE : CORRECTIONS GÉNÉRALES =====
Le template garde en mode sombre le bleu des liens et le gris foncé de certains menus du mode clair :
sur le fond noir, ils étaient peu lisibles. */
body.dark-active {
--body-link-color: #6ea8fe;
--body-link-hover-color: #9ec5fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-dropdown-link-color: rgba(255, 255, 255, 0.8);
}
/* Rubrique en cours dans le menu d'une colonne : écrite en gris foncé par le template. */
.dark-active :is(.mvk-module, .card, .moduletable) .nav li ul > li.active > a {
color: #fff;
}
/* Bleu de survol des blocs : éclairci, comme les liens. */
.dark-active .moduletop-list :is(.mod-articles-item-content, [class^="category-module"] > li):hover :is(.mod-articles-link, .mod-articles-category-title),
.dark-active :is(.moduletop-featured li:not(:first-child) .mod-articles-item-content, .moduletop-featured [class^="category-module"] > li:not(:first-child)):hover :is(.mod-articles-link, .mod-articles-category-title),
.dark-active .jt-cs[class*=" bloc-"] .jt-inner:is(:hover, :focus-within) a.jt-title {
color: #6ea8fe;
}
.dark-active :is(.fx-rank, .fx-rank-badge).moduletop-list :is(.mod-articles-items, [class^="category-module"]):not(:has(img)) :is(.mod-articles-item-content, [class^="category-module"] > li):hover::before {
color: #6ea8fe;
}
/* ===== TITRES INTERMÉDIAIRES DES ARTICLES =====
Titres de niveau 2 et 3 écrits dans le texte d'un article ou d'une description de catégorie : titre en
gras, filet gris sur toute la largeur et trait rouge court au départ, comme les titres des modules de
colonne. Les titres placés dans un tableau (fiches techniques) ne sont pas concernés. */
:is(.item-page .article-body, .category-desc) > h2,
:is(.item-page .article-body, .category-desc) > div > h2 {
position: relative;
margin: 44px 0 16px;
padding: 0 0 10px;
border: 0;
border-bottom: 1px solid #e2e6ea;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.25;
color: #141b24;
}
:is(.item-page .article-body, .category-desc) > h2::after,
:is(.item-page .article-body, .category-desc) > div > h2::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 56px;
height: 3px;
background: #d0021b;
}
/* Titre de la page : nettement au-dessus des titres intermédiaires, en taille comme en graisse. */
.mvk-col.component h1 {
margin: 0 0 14px;
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
color: #141b24;
}
.dark-active .mvk-col.component h1 {
color: #fff;
}
@media (max-width: 767.98px) {
.mvk-col.component h1 {
font-size: 1.5rem;
}
}
/* Un sous-titre qui est aussi un lien garde l'apparence d'un titre ; il passe au rouge au survol. */
:is(.item-page .article-body, .category-desc) > h2 a,
:is(.item-page .article-body, .category-desc) > div > h2 a {
color: inherit;
text-decoration: none;
}
:is(.item-page .article-body, .category-desc) > h2 a:is(:hover, :focus-visible),
:is(.item-page .article-body, .category-desc) > div > h2 a:is(:hover, :focus-visible) {
color: #d0021b;
}
/* Texte des descriptions de catégorie : même taille, interligne et couleur que celui des articles. */
.com-content-category-blog .category-desc {
font-size: 17px;
line-height: 1.7;
color: #2c2c2c;
}
.dark-active .com-content-category-blog .category-desc {
color: #d5dae0;
}
/* Premier élément du texte : pas d'espace au-dessus. */
:is(.item-page .article-body, .category-desc) > h2:first-child {
margin-top: 0;
}
:is(.item-page .article-body, .category-desc) > h3,
:is(.item-page .article-body, .category-desc) > div > h3 {
margin: 30px 0 10px;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
color: #141b24;
}
.dark-active :is(.item-page .article-body, .category-desc) > h2,
.dark-active :is(.item-page .article-body, .category-desc) > div > h2 {
border-bottom-color: #2c3642;
color: #fff;
}
.dark-active :is(.item-page .article-body, .category-desc) > h3,
.dark-active :is(.item-page .article-body, .category-desc) > div > h3 {
color: #fff;
}
@media (max-width: 767.98px) {
:is(.item-page .article-body, .category-desc) :is(> h2, > div > h2) {
margin-top: 34px;
font-size: 1.25rem;
}
}
/* ===== PAGES AUTEUR (paquet Maverick - Auteurs) =====
Seule dans sa ligne, sans colonne de modules, la page s'aligne sur le fil d'Ariane :
mêmes largeurs que le conteneur du template, à chaque taille d'écran. */
.mvk-col.component:only-child > .mvk-ap {
margin-inline: auto;
}
@media (min-width: 576px) { .mvk-col.component:only-child > .mvk-ap { max-width: 508px; } }
@media (min-width: 768px) { .mvk-col.component:only-child > .mvk-ap { max-width: 688px; } }
@media (min-width: 992px) { .mvk-col.component:only-child > .mvk-ap { max-width: 928px; } }
@media (min-width: 1200px) { .mvk-col.component:only-child > .mvk-ap { max-width: 1108px; } }
@media (min-width: 1400px) { .mvk-col.component:only-child > .mvk-ap { max-width: 1168px; } }
/* ===== FIL D'ARIANE (présentation de JA Purity IV) =====
Séparateur « / » gris clair après chaque élément, dernier compris, à une espace du lien. */
#mvk-breadcrumbs .breadcrumb-item + .breadcrumb-item {
padding-left: 0;
}
#mvk-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
display: none;
}
#mvk-breadcrumbs .breadcrumb-item::after {
display: inline-block;
padding-left: 0.25em;
padding-right: 0.5rem;
color: #ced4da;
content: "/";
}
/* ===== NOM DU SITE À CÔTÉ DU LOGO (présentation du plugin Surcharges) ===== */
#mvk-header .mvk-logo__name {
font-family: "Public Sans", sans-serif;
font-size: 1.4rem;
font-weight: 800;
line-height: 1.5;
letter-spacing: -0.01em;
}
@media (max-width: 991.98px) {
#mvk-header .mvk-logo__name {
font-size: 1.15rem;
}
}
/* ===== EN-TÊTE : PLACE DU MENU (comme JA Purity IV) =====
Sur ordinateur, le menu se centre entre le logo et un bloc de droite de 16 px, sans espace entre eux. */
@media (min-width: 992px) {
#mvk-header .mvk-header__wrap {
gap: 0;
}
#mvk-header .mvk-header__right {
min-width: 16px;
}
}
/* ===== FIL D'ARIANE : FILET DU HAUT (comme JA Purity IV) ===== */
#mvk-breadcrumbs {
border-top: 1px solid #e9ecef;
}
.dark-active #mvk-breadcrumbs {
border-top-color: rgba(255, 255, 255, 0.075);
}