/*
Theme Name: JNews - Child Theme
Version: 1.0.0
Template: jnews
*/
/*
===============================================================================
JNEWS CHILD THEME — FEUILLE DE STYLES PROJET REVUES
-------------------------------------------------------------------------------
SOMMAIRE
A / VERSION STABLE (27/10/25) — NETTOYÉE ← existant (inchangé visuellement)
A.1 — Couv. Magazine : Unes + Hors-séries
A.2 — CF7 & global (harmonisation légère)
B / CMD — OFFRES REVUE (3 BOUTONS) ← existant (inchangé visuellement)
+ variantes responsive & ruban
C / PAGES REVUES — Un bloc + filtre “Année” ← NOUVEAU (filtre + nettoyages ciblés)
C.0 — Anti-reliquats WPBakery dans la section
C.1 — Barre de filtre “Année” (shortcode [revue_annees …])
C.2 — Grille JNews : neutralisation fonds/ombres
C.3 — Pagination (Load more / Numérique)
C.4 — Rythme & responsive
C.5 — Correctif d’empilement (z-index) face aux boutons sociaux JNews
===============================================================================
*/
/* ===========================================================================
A / VERSION STABLE (27/10/25) — NETTOYÉE
Zones : #revues-cover / #revues-hs + styles CF7 globaux
NOTE : Bloc inchangé (seulement mieux commenté ici pour s’y retrouver).
=========================================================================== */
/* ========== A.1 — Couv. Magazine : Unes + Hors séries ========== */
/* 0) RESET sécurité (fonds / ombres / bordures) */
#revues-cover .jeg_thumb,
#revues-cover .thumbnail-holder,
#revues-cover .thumbnail-container,
#revues-cover .box_wrap,
#revues-cover .jeg_postblock_content,
#revues-hs .jeg_thumb,
#revues-hs .thumbnail-holder,
#revues-hs .thumbnail-container,
#revues-hs .box_wrap,
#revues-hs .jeg_postblock_content{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
/* 1) Couper voiles / dégradés + éléments overlay dans la vignette */
#revues-cover .jeg_thumb::before,
#revues-cover .jeg_thumb::after,
#revues-cover .overlay,
#revues-cover .gradient,
#revues-cover [class*="overlay"],
#revues-cover [class*="gradient"],
#revues-hs .jeg_thumb::before,
#revues-hs .jeg_thumb::after,
#revues-hs .overlay,
#revues-hs .gradient,
#revues-hs [class*="overlay"],
#revues-hs [class*="gradient"]{
opacity: 0 !important;
background: none !important;
content: none !important;
pointer-events: none !important;
}
/* éléments superposés DANS la vignette (pas les titres sous l’image) */
#revues-cover .jeg_post_title,
#revues-cover .jeg_post_meta,
#revues-cover .jeg_meta_date,
#revues-cover .jeg_post_category,
#revues-hs .jeg_post_title,
#revues-hs .jeg_post_meta,
#revues-hs .jeg_meta_date,
#revues-hs .jeg_post_category{
display: none !important;
}
/* 1bis) Image jamais rognée */
#revues-cover .jeg_thumb img,
#revues-cover .thumbnail-holder img,
#revues-cover .thumbnail-container img,
#revues-hs .jeg_thumb img,
#revues-hs .thumbnail-holder img,
#revues-hs .thumbnail-container img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
position: relative !important;
z-index: 0 !important;
}
/* 2) Cadre + 4 traits internes (paramètres globaux) */
#revues-cover,
#revues-hs{
--frame-color: #FFF;
--frame-width: 2px;
--tb-color: #d9d9d9;
--tb-thickness: 2px;
--inset-top: 2px;
--inset-bottom: 2px;
--lr-color: #d9d9d9;
--lr-thickness: 2px;
--inset-left: 2px;
--inset-right: 2px;
}
/* conteneur porteur de l’image (has) */
#revues-cover :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img),
#revues-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img){
position: relative !important;
}
/* cadre + 4 traits au-dessus de l’image */
#revues-cover :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img)::after,
#revues-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img)::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
box-shadow: inset 0 0 0 var(--frame-width) var(--frame-color) !important;
background:
linear-gradient(var(--tb-color), var(--tb-color))
top var(--inset-top) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(var(--tb-color), var(--tb-color))
bottom var(--inset-bottom) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
left var(--inset-left) top 0 / var(--lr-thickness) 100% no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
right var(--inset-right) top 0 / var(--lr-thickness) 100% no-repeat !important;
}
/* Fallback si :has indisponible (Firefox actuel) */
@supports not selector(:has(*)){
#revues-cover :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container),
#revues-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container){
position: relative !important;
}
#revues-cover :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after,
#revues-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
box-shadow: inset 0 0 0 var(--frame-width) var(--frame-color) !important;
background:
linear-gradient(var(--tb-color), var(--tb-color))
top var(--inset-top) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(var(--tb-color), var(--tb-color))
bottom var(--inset-bottom) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
left var(--inset-left) top 0 / var(--lr-thickness) 100% no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
right var(--inset-right) top 0 / var(--lr-thickness) 100% no-repeat !important;
}
}
/* 3) Patch mobile (anti-rognage + suppression des réserves) */
@media (max-width: 767.98px){
#revues-cover .thumbnail-container::before,
#revues-cover .thumbnail-holder::before,
#revues-hs .thumbnail-container::before,
#revues-hs .thumbnail-holder::before{
content: none !important;
display: none !important;
}
#revues-cover .thumbnail-container,
#revues-cover .thumbnail-holder,
#revues-hs .thumbnail-container,
#revues-hs .thumbnail-holder{
padding: 0 !important;
}
#revues-cover .thumbnail-container[style*="padding"],
#revues-cover .thumbnail-holder[style*="padding"],
#revues-hs .thumbnail-container[style*="padding"],
#revues-hs .thumbnail-holder[style*="padding"]{ padding:0 !important; }
#revues-cover .jeg_thumb,
#revues-cover .thumbnail-holder,
#revues-cover .thumbnail-container,
#revues-hs .jeg_thumb,
#revues-hs .thumbnail-holder,
#revues-hs .thumbnail-container{
height:auto !important; min-height:0 !important;
}
#revues-cover .jeg_thumb > a,
#revues-cover .thumbnail-holder > a,
#revues-cover .thumbnail-container > a,
#revues-hs .jeg_thumb > a,
#revues-hs .thumbnail-holder > a,
#revues-hs .thumbnail-container > a{
display:block !important; width:100% !important; height:auto !important;
}
#revues-cover .jeg_thumb img,
#revues-cover .thumbnail-holder img,
#revues-cover .thumbnail-container img,
#revues-cover .jeg_thumb picture img,
#revues-hs .jeg_thumb img,
#revues-hs .thumbnail-holder img,
#revues-hs .thumbnail-container img,
#revues-hs .jeg_thumb picture img{
width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important;
object-fit:contain !important; object-position:center center !important;
position:static !important; transform:none !important; display:block !important;
}
#revues-cover .jeg_postblock_content,
#revues-hs .jeg_postblock_content{ display:none !important; }
#revues-cover .jeg_post .box_wrap,
#revues-hs .jeg_post .box_wrap{ padding:0 !important; }
#revues-cover .jeg_thumb, #revues-hs .jeg_thumb{ margin:0 !important; }
#revues-cover .jeg_post, #revues-hs .jeg_post{
margin-bottom:0 !important; min-height:0 !important; display:block !important;
}
}
/* 4) Espacement mobile entre cartes */
#revues-cover, #revues-hs{ --cover-gap:16px; }
@media (max-width: 767.98px){
#revues-cover .jeg_post, #revues-hs .jeg_post{ margin-bottom:var(--cover-gap) !important; }
#revues-cover .jeg_post:last-child, #revues-hs .jeg_post:last-child{ margin-bottom:0 !important; }
}
/* ========== A.2 — CF7 & global (harmonisation légère) ========== */
.jnews_content .wpcf7 form p,
.entry-content .wpcf7 form p,
.post-content .wpcf7 form p{
max-width:760px; margin-bottom:14px;
}
.jnews_content .wpcf7-form-control,
.entry-content .wpcf7-form-control,
.post-content .wpcf7-form-control{ width:100% !important; box-sizing:border-box; }
.jnews_content .wpcf7 input[type="text"],
.jnews_content .wpcf7 input[type="email"],
.jnews_content .wpcf7 input[type="tel"],
.jnews_content .wpcf7 textarea,
.entry-content .wpcf7 input[type="text"],
.entry-content .wpcf7 input[type="email"],
.entry-content .wpcf7 input[type="tel"],
.entry-content .wpcf7 textarea,
.post-content .wpcf7 input[type="text"],
.post-content .wpcf7 input[type="email"],
.post-content .wpcf7 input[type="tel"],
.post-content .wpcf7 textarea{
width:100% !important; border:1px solid #ddd; border-radius:6px; padding:10px 12px; font-size:16px;
}
.jnews_content .wpcf7 textarea,
.entry-content .wpcf7 textarea,
.post-content .wpcf7 textarea{ min-height:120px; }
.jnews_content .wpcf7 .wpcf7-acceptance,
.entry-content .wpcf7 .wpcf7-acceptance,
.post-content .wpcf7 .wpcf7-acceptance{ max-width:760px; }
.jnews_content .wpcf7 .wpcf7-submit,
.entry-content .wpcf7 .wpcf7-submit,
.post-content .wpcf7 .wpcf7-submit{
background:#111; color:#fff; border:none; border-radius:6px;
padding:.8rem 1.2rem; font-weight:700; cursor:pointer; transition:background-color .25s ease;
}
.jnews_content .wpcf7 .wpcf7-submit:hover,
.entry-content .wpcf7 .wpcf7-submit:hover,
.post-content .wpcf7 .wpcf7-submit:hover{ background:#2a2a2a; }
/* encart total */
#cmd-total-box{
max-width:760px; margin:.8rem 0 1.2rem; padding:.7rem 1rem;
border-radius:8px; background:#f6f6f6; font-size:1.05rem;
}
#cmd-total-box strong{ font-weight:800; }
/* champ en lecture seule */
.wpcf7 input[readonly]{ background:#f6f6f6; color:#333; cursor:default; }
/* variables utilitaires */
:root{
--btn-bg:#111; --btn-bg-hover:#222; --btn-text:#fff;
--box-bg:#f5f7fa; --box-bd:#e3e7ee; --box-radius:8px;
--space-100:1rem; --space-150:1.25rem; --space-090:.9rem;
}
/* champs full-width */
.wpcf7 form .input-full{ width:100%; box-sizing:border-box; }
/* 2 colonnes desktop pour .half */
.wpcf7 form p.half{ width:100%; margin:0 0 var(--space-100); }
@media (min-width:820px){
.wpcf7 form p.half{ display:inline-block; width:48%; vertical-align:top; margin:0 0 var(--space-100); }
.wpcf7 form p.half + p.half{ margin-left:4%; }
.wpcf7 form p.half > label{
display:block; min-height:26px; line-height:1.2; margin:0 0 8px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wpcf7 form p.half > label > .wpcf7-form-control-wrap{ display:block; margin-top:0; }
}
/* masquage propre des champs pdf-no / pdf-date */
.cf7pdf-meta,
.wpcf7 input[name="pdf-no"],
.wpcf7 input[name="pdf-date"]{
position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
overflow:hidden !important; opacity:0 !important; pointer-events:none !important;
}
/* messages CF7 */
.wpcf7-not-valid-tip{ color:#c0392b; }
.wpcf7 form .wpcf7-response-output{ border-color:#e3e7ee; }
/* ===========================================================================
B / CMD — OFFRES REVUE (3 BOUTONS)
Scope : UNIQUEMENT sous .cmd-offers
Contenu :
B.1 Variables / grille globale
B.2 Carte + image + libellé + prix
B.3 Bouton "Je commande" (style contour noir animé)
B.4 Responsive (mobile / tablette)
B.5 Ruban "meilleure offre" au-dessus de la vignette (mobile/tablette)
=========================================================================== */
/* ======================= B.1 — Variables + grille ======================= */
.cmd-offers{
/* Carte / layout */
--card-radius:14px;
--card-border:#ececf2;
--card-shadow:0 14px 28px rgba(0,0,0,.10);
--stack-gap:34px;
/* Ruban */
--ribbon-bg:#d90b1b;
--ribbon-text:#fff;
/* Prix */
--price-color:#d90b1b;
/* Vignette */
--cover-w:110px; /* desktop */
--cover-w-m:90px; /* mobile */
/* Libellé */
--libelle-size:28px; /* desktop */
--libelle-size-m:20px; /* mobile */
--libelle-weight:500;
/* Bouton "Je commande" (style contour noir) */
--btn-bg:#181717;
--btn-text:#ffffff;
--btn-radius:5px;
--btn-outline-width:3px;
--btn-gap:15px;
--btn-pad-y:10px;
--btn-pad-x:15px;
--btn-transition:400ms;
}
.cmd-offers{
display:grid;
gap:var(--stack-gap);
}
/* ======================= B.2 — Carte / contenu ========================= */
/* Carte globale */
.cmd-offers .offer-card{
position:relative;
background:#fff;
border:1px solid var(--card-border);
border-radius:var(--card-radius);
box-shadow:var(--card-shadow);
overflow:hidden;
}
/* Ruban (desktop par défaut, le patch mobile est en B.5) */
.cmd-offers .offer-card .tag-ribbon{
position:absolute;
top:12px;
right:16px;
background:var(--ribbon-bg);
color:var(--ribbon-text);
padding:6px 10px;
font:800 12px/1 inherit;
border-radius:3px;
text-transform:uppercase;
letter-spacing:.3px;
white-space:nowrap;
pointer-events:none;
}
/* Grille interne : image | libellé | prix/CTA */
.cmd-offers .offer-card .offer-body{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
column-gap:26px;
padding:24px;
}
/* Vignette (colonne gauche) */
.cmd-offers .offer-cover{
width:var(--cover-w);
height:auto;
display:block;
border-radius:6px;
box-shadow:0 8px 20px rgba(0,0,0,.12);
opacity:.96;
object-fit:cover;
}
/* Bloc libellé (colonne centrale) */
.cmd-offers .offer-center{
min-width:0; /* clé pour gérer ellipsis / retours à la ligne */
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.cmd-offers .offer-libelle{
font-family:inherit;
font-size:var(--libelle-size);
font-weight:var(--libelle-weight);
line-height:1.25;
color:inherit;
margin:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Colonne prix + CTA (droite) */
.cmd-offers .offer-right{
display:grid;
row-gap:12px;
justify-items:end;
min-width:220px;
}
/* Prix typographié 7 € .00 */
.cmd-offers .price{
display:inline-flex;
align-items:flex-start;
gap:0;
line-height:1;
color:var(--price-color);
letter-spacing:-.02em;
}
.cmd-offers .price .euros{
font-size:46px;
font-weight:800;
}
.cmd-offers .price .currency{
font-size:20px;
font-weight:800;
transform:translateY(5px);
margin-left:-3px;
}
.cmd-offers .price .cents{
font-size:22px;
font-weight:800;
transform:translateY(10px);
margin-left:-3px;
}
/* ================= B.3 — Bouton "Je commande" ===================
Objectif : reproduire ton bouton noir à contour animé.
- Fond noir + contour noir
- Texte blanc
- Au survol : fond transparent, texte + contour noirs
- On met des !important pour écraser le style orange du thème.
=============================================================== */
.cmd-offers .offer-cta{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:var(--btn-gap) !important;
padding:var(--btn-pad-y) var(--btn-pad-x) !important;
min-width:170px !important;
background-color:var(--btn-bg) !important;
background-image:none !important;
color:var(--btn-text) !important;
text-decoration:none !important;
font-weight:700 !important;
font-size:1rem !important;
border:none !important;
border-radius:var(--btn-radius) !important;
/* contour intérieur type "outline" */
outline:var(--btn-outline-width) solid var(--btn-bg) !important;
outline-offset:calc(-1 * var(--btn-outline-width)) !important;
box-shadow:none !important;
cursor:pointer;
transition:
background-color var(--btn-transition) ease,
color var(--btn-transition) ease,
outline-color var(--btn-transition) ease;
}
/* Hover : fond transparent, texte noir */
.cmd-offers .offer-cta:hover,
.cmd-offers .offer-cta:focus-visible{
background-color:transparent !important;
color:var(--btn-bg) !important;
outline-color:var(--btn-bg) !important;
}
/* Si un SVG est ajouté dans le lien, on anime aussi sa couleur */
.cmd-offers .offer-cta svg path{
transition:fill var(--btn-transition) ease, stroke var(--btn-transition) ease;
fill:var(--btn-text);
stroke:var(--btn-text);
}
.cmd-offers .offer-cta:hover svg path,
.cmd-offers .offer-cta:focus-visible svg path{
fill:var(--btn-bg);
stroke:var(--btn-bg);
}
/* ============ B.3.1 — Compactage mobile du bouton ============ */
@media (max-width:480px){
.cmd-offers .offer-cta{
padding:9px 14px !important;
min-width:150px !important;
}
}
/* =================== B.4 — Responsive global =================== */
/* Mobile / tablette (≤ 900px) :
- carte empilée A → B → C
- libellé multi-ligne et centré
*/
@media (max-width:900px){
.cmd-offers .offer-card .offer-body{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
padding:16px;
}
.cmd-offers .offer-cover{
width:var(--cover-w-m);
height:auto;
object-fit:contain;
}
.cmd-offers .offer-libelle{
font-size:var(--libelle-size-m);
white-space:normal;
text-align:center;
}
.cmd-offers .offer-right{
justify-items:center;
width:100%;
max-width:320px;
}
.cmd-offers .price .euros{ font-size:34px; }
.cmd-offers .price .currency{
font-size:16px;
transform:translateY(4px);
}
.cmd-offers .price .cents{
font-size:16px;
transform:translateY(8px);
}
}
/* =================== B.5 — Ruban au-dessus (RWD) ===================
Objectif : sur mobile + tablette, le ruban ne "mange" plus la vignette.
------------------------------------------------------------------- */
/* Desktop : on garde l’overlay classique */
@media (min-width:1025px){
.cmd-offers .offer-card{
position:relative;
overflow:visible;
}
.cmd-offers .offer-card .tag-ribbon{
position:absolute;
top:12px;
right:16px;
z-index:5;
}
}
/* Tablet + Mobile : le ruban passe au-dessus, dans le flux */
@media (max-width:1024px){
/* La carte devient une petite grille : [ruban] / [contenu] */
.cmd-offers .offer-card{
display:grid !important;
grid-template-rows:auto 1fr !important;
overflow:visible !important;
}
/* Ruban dans le flux, aligné à droite, au-dessus du contenu */
.cmd-offers .offer-card .tag-ribbon{
position:static !important;
justify-self:end !important;
margin:12px 16px 0 16px !important;
z-index:auto !important;
}
/* Contenu sous le ruban */
.cmd-offers .offer-body{
grid-row:2 !important;
padding-top:12px !important;
position:relative !important;
z-index:1 !important;
}
.cmd-offers .offer-cover{
position:relative !important;
z-index:1 !important;
}
.cmd-offers .offer-center::before,
.cmd-offers .offer-center::after{
z-index:0 !important;
}
}
/* =================== B.6 — PATCH CSS – OFFRES REVUE ===================
CMD — OFFRES REVUE : PATCH MINIMAL + ORGANISATION AUTO
------------------------------------------------------------------- */
/* ============================================================
PATCH CSS – OFFRES REVUE (résumé)
------------------------------------------------------------
Corrige et harmonise l'affichage des 3 offres :
1) Ajuste le bandeau rouge (taille/position desktop + réduction mobile)
2) Gère correctement le texte sous le prix selon le type d’offre
3) Organise automatiquement la colonne de droite (prix + texte + bouton)
4) Aligne les titres et la couverture verticalement sur desktop
5) Conserve le responsive d’origine (mobile parfait)
------------------------------------------------------------
Patch appliqué par-dessus le CSS B d’origine.
============================================================ */
/* 1) BANDEAU ROUGE (taille + position, desktop)
------------------------------------------------
- padding : augmente ou réduit la taille du bandeau
-> 1er chiffre = hauteur
-> 2e chiffre = largeur
- font-size : taille du texte
- top / right : position dans la carte
*/
.cmd-offers .offer-card .tag-ribbon{
padding:3px 16px; /* HAUTEUR / LARGEUR du bandeau (desktop) */
font-size:16px; /* Taille du texte dans le bandeau (desktop) */
top:8px; /* plus petit = plus haut ; plus grand = plus bas */
right:32px; /* plus grand = plus vers la gauche */
}
/* 2) TEXTE SOUS LES PRIX
-------------------------------------------------- */
/* Style de base de la note sous le prix (quand elle existe) */
.cmd-offers .price-note{
display:block;
font-size:11px;
line-height:1.3;
margin-top:4px;
color:#7a7a7a;
}
/* 2.a — REVUE PAPIER (data-variant="papier")
-> "Frais de port compris" uniquement sur cette carte */
.cmd-offers .offer-card[data-variant="papier"] .price-note{
color:#222;
}
/* 2.b — REVUE NUMÉRIQUE (data-variant="numerique")
-> on cache "Frais de port compris" sur cette carte */
.cmd-offers .offer-card[data-variant="numerique"] .price-note{
display:none;
}
/* 3) ABONNEMENT : "à partir de" AU-DESSUS DE 22€
-------------------------------------------------- */
/* On garde l’ordre DOM normal, mais on force l’ordre
dans la colonne droite pour l’abonnement :
1 = texte "à partir de"
2 = prix
3 = bouton
*/
.cmd-offers .offer-card[data-variant="abonnement"] .price-note{
order:1;
}
.cmd-offers .offer-card[data-variant="abonnement"] .price{
order:2;
}
.cmd-offers .offer-card[data-variant="abonnement"] .offer-cta{
order:3;
}
/* 4) ORGANISATION VERTICALE (DESKTOP)
--------------------------------------------------
Objectif :
- 5 (couverture) : centré verticalement dans la carte
- 4 (bloc titre) : centré verticalement aussi
- Colonne droite = FLEX COLONNE pleine hauteur :
• haut : décollée du ruban
• milieu : prix + texte
• bas : bouton
*/
@media (min-width:901px){
/* 4.a — Le corps de la carte (image + titre + colonne droite)
est centré verticalement : 4 & 5 alignés */
.cmd-offers .offer-card .offer-body{
align-items:center; /* image (5) et bloc titre (4) centrés verticalement */
}
/* 4.b — La colonne droite remplit toute la hauteur de la carte
et répartit 2 (prix+texte) et 3 (bouton) automatiquement
entre le haut et le bas, comme un "totem" :
1 = ruban, 2 = bloc prix, 3 = bouton en bas. */
.cmd-offers .offer-card{
align-items:stretch; /* permet à la colonne droite de prendre la hauteur */
}
.cmd-offers .offer-card .offer-right{
display:flex;
flex-direction:column;
align-items:flex-end; /* tout reste aligné à droite */
justify-content:space-between; /* répartit 2 (prix) et 3 (bouton) verticalement */
align-self:stretch; /* colonne droite = pleine hauteur de la carte */
padding-top:18px; /* décollage par rapport au ruban (1) */
padding-bottom:18px; /* espace en bas avant le bord de la carte */
}
}
/* 5) MOBILE / TABLETTE : recentrage + bandeau plus petit
--------------------------------------------------
(les images + titres sont déjà centrés par B.3 / B.4,
ici on recentre juste la colonne droite pour l'abonnement
et on réduit le ruban en pourcentage) */
@media (max-width:900px){
.cmd-offers .offer-card[data-variant="abonnement"] .offer-right{
align-items:center; /* bouton + prix + "à partir de" bien centrés */
}
/* Bandeau rouge plus petit sur mobile :
change 0.70 -> 0.60, 0.80, etc. selon ce que tu veux */
.cmd-offers .offer-card .tag-ribbon{
transform: scale(0.85); /* 70% de la taille desktop */
transform-origin: top right;
}
}
/* ===========================================================================
C / PAGES REVUES — Un bloc + filtre “Année”
Objectif : 1 bloc JNews (12 par page) + pastilles “Année” (shortcode).
Scope : sections Elementor identifiées par #page-unes et #page-hs.
=========================================================================== */
/* C.0 — Anti-reliquats WPBakery (évite fonds/overlays fantômes) */
#page-unes [class*="vc_custom_"],
#page-hs [class*="vc_custom_"]{
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* C.1 — Barre de filtre "Année" (shortcode [revue_annees …]) */
#page-unes .revue-year-filter,
#page-hs .revue-year-filter{
display: flex; /* pastilles sur une ligne (retour à la ligne si besoin) */
flex-wrap: wrap;
align-items: center;
gap: .35em .45em; /* espacement H/V entre pastilles */
margin: 0 0 1rem 0; /* séparation avec la grille */
}
/* Libellé "Année :" */
#page-unes .revue-year-filter .rye-label,
#page-hs .revue-year-filter .rye-label{
font-weight: 700;
margin-right: .5rem;
}
/* Pastilles (liens) */
#page-unes .revue-year-filter .rye-btn,
#page-hs .revue-year-filter .rye-btn{
display: inline-block;
padding: .35em .65em;
line-height: 1;
border: 1px solid #d5d9e0;
border-radius: 999px;
background: #fff;
color: #222;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease;
font-size: .95rem;
}
/* Hover / actif / focus */
#page-unes .revue-year-filter .rye-btn:hover,
#page-hs .revue-year-filter .rye-btn:hover{
background: #f5f7fb;
border-color: #bfc6d1;
}
#page-unes .revue-year-filter .rye-btn.is-active,
#page-hs .revue-year-filter .rye-btn.is-active{
background: #eef5ff;
border-color: #7aa5ff;
color: #0a3d8f;
}
#page-unes .revue-year-filter .rye-btn:focus-visible,
#page-hs .revue-year-filter .rye-btn:focus-visible{
outline: 2px solid #7aa5ff;
outline-offset: 2px;
}
/* C.2 — Grille JNews : neutralisation des fonds/ombres (ciblée) */
#page-unes .jeg_thumb,
#page-unes .thumbnail-holder,
#page-unes .thumbnail-container,
#page-unes .box_wrap,
#page-unes .jeg_postblock_content,
#page-hs .jeg_thumb,
#page-hs .thumbnail-holder,
#page-hs .thumbnail-container,
#page-hs .box_wrap,
#page-hs .jeg_postblock_content{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Liens de titre sobres sous vignettes */
#page-unes .jeg_post_title a,
#page-hs .jeg_post_title a{ text-decoration: none; }
#page-unes .jeg_post_title a:hover,
#page-hs .jeg_post_title a:hover{ text-decoration: underline; }
/* C.3 — Pagination (Load more & Numérique) */
#page-unes .jeg_block_loadmore a,
#page-hs .jeg_block_loadmore a{
display: inline-block;
padding: .6em 1.2em;
border-radius: 999px;
font-weight: 700;
letter-spacing: .02em;
}
#page-unes .jeg_pagination .page-numbers,
#page-hs .jeg_pagination .page-numbers{
border-radius: .4rem;
padding: .4em .7em;
}
/* C.4 — Rythme & responsive */
#page-unes, #page-hs{ --rye-gap: 1.2rem; }
#page-unes .revue-year-filter{ margin-bottom: var(--rye-gap); }
#page-hs .revue-year-filter{ margin-bottom: var(--rye-gap); }
@media (max-width: 640px){
#page-unes .revue-year-filter .rye-label,
#page-hs .revue-year-filter .rye-label{
width: 100%;
margin: 0 0 .25rem 0;
}
#page-unes .revue-year-filter .rye-btn,
#page-hs .revue-year-filter .rye-btn{
font-size: .92rem;
padding: .35em .6em;
}
}
/* C.5 — Correctif d’empilement (z-index) vis-à-vis des boutons sociaux JNews */
.revue-year-filter{
position: relative !important;
z-index: 10 !important; /* garanti au-dessus d’un éventuel overlay social */
background: #fff; /* optionnel : pour la lisibilité si chevauchement */
}
.jeg_share_button_container{
position: static !important; /* empêche un absolute parasite */
z-index: 1 !important;
}
/* =========================================================
Cx / Rendre les liens du filtre "Année" cliquables
- Corrige les overlays qui masquent le nav .revue-year-filter
- Valeurs sobres (z-index faible, mais > overlay social)
========================================================= */
.revue-year-filter{
position: relative !important;
z-index: 15 !important; /* au-dessus des barres sociales/overlays */
}
.jeg_share_button_container{
position: static !important; /* coupe un éventuel absolute parasite */
z-index: 1 !important;
}
/* Si un overlay JNews reste en place, désactive ses events au-dessus du filtre */
.revue-year-filter *{
pointer-events: auto !important;
}
/* =========================================================
Cxx / Répliquer le rendu "Accueil" sur #page-unes & #page-hs
-> On étend les sélecteurs de A.1 à ces deux IDs
-> Pas de duplication : juste mêmes effets, même nettoyage
========================================================= */
/* 0) RESET sécurité (fonds / ombres / bordures) — extension de portée */
#page-unes .jeg_thumb,
#page-unes .thumbnail-holder,
#page-unes .thumbnail-container,
#page-unes .box_wrap,
#page-unes .jeg_postblock_content,
#page-hs .jeg_thumb,
#page-hs .thumbnail-holder,
#page-hs .thumbnail-container,
#page-hs .box_wrap,
#page-hs .jeg_postblock_content{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
/* 1) Couper voiles / dégradés + overlays dans la vignette — extension */
#page-unes .jeg_thumb::before,
#page-unes .jeg_thumb::after,
#page-unes .overlay,
#page-unes .gradient,
#page-unes [class*="overlay"],
#page-unes [class*="gradient"],
#page-hs .jeg_thumb::before,
#page-hs .jeg_thumb::after,
#page-hs .overlay,
#page-hs .gradient,
#page-hs [class*="overlay"],
#page-hs [class*="gradient"]{
opacity: 0 !important;
background: none !important;
content: none !important;
pointer-events: none !important;
}
/* 1bis) Image jamais rognée — extension */
#page-unes .jeg_thumb img,
#page-unes .thumbnail-holder img,
#page-unes .thumbnail-container img,
#page-hs .jeg_thumb img,
#page-hs .thumbnail-holder img,
#page-hs .thumbnail-container img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
position: relative !important;
z-index: 0 !important;
}
/* 2) Cadre + 4 traits internes — mêmes variables locales si tu en veux ici */
#page-unes,
#page-hs{
--frame-color: #FFF;
--frame-width: 2px;
--tb-color: #d9d9d9;
--tb-thickness: 2px;
--inset-top: 2px;
--inset-bottom: 2px;
--lr-color: #d9d9d9;
--lr-thickness: 2px;
--inset-left: 2px;
--inset-right: 2px;
}
/* conteneur porteur de l’image (has) — extension */
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img),
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img){
position: relative !important;
}
/* cadre + 4 traits au-dessus de l’image — extension */
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img)::after,
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container):has(img)::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
box-shadow: inset 0 0 0 var(--frame-width) var(--frame-color) !important;
background:
linear-gradient(var(--tb-color), var(--tb-color))
top var(--inset-top) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(var(--tb-color), var(--tb-color))
bottom var(--inset-bottom) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
left var(--inset-left) top 0 / var(--lr-thickness) 100% no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
right var(--inset-right) top 0 / var(--lr-thickness) 100% no-repeat !important;
}
/* Fallback si :has indisponible — extension */
@supports not selector(:has(*)){
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container),
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container){
position: relative !important;
}
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after,
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
box-shadow: inset 0 0 0 var(--frame-width) var(--frame-color) !important;
background:
linear-gradient(var(--tb-color), var(--tb-color))
top var(--inset-top) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(var(--tb-color), var(--tb-color))
bottom var(--inset-bottom) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
left var(--inset-left) top 0 / var(--lr-thickness) 100% no-repeat,
linear-gradient(90deg, var(--lr-color), var(--lr-color))
right var(--inset-right) top 0 / var(--lr-thickness) 100% no-repeat !important;
}
}
/* 3) Patch mobile identique à l’accueil — extension */
@media (max-width: 767.98px){
#page-unes .thumbnail-container::before,
#page-unes .thumbnail-holder::before,
#page-hs .thumbnail-container::before,
#page-hs .thumbnail-holder::before{
content: none !important; display: none !important;
}
#page-unes .thumbnail-container,
#page-unes .thumbnail-holder,
#page-hs .thumbnail-container,
#page-hs .thumbnail-holder{ padding:0 !important; }
#page-unes .thumbnail-container[style*="padding"],
#page-unes .thumbnail-holder[style*="padding"],
#page-hs .thumbnail-container[style*="padding"],
#page-hs .thumbnail-holder[style*="padding"]{ padding:0 !important; }
#page-unes .jeg_thumb,
#page-unes .thumbnail-holder,
#page-unes .thumbnail-container,
#page-hs .jeg_thumb,
#page-hs .thumbnail-holder,
#page-hs .thumbnail-container{
height:auto !important; min-height:0 !important;
}
#page-unes .jeg_thumb > a,
#page-unes .thumbnail-holder > a,
#page-unes .thumbnail-container > a,
#page-hs .jeg_thumb > a,
#page-hs .thumbnail-holder > a,
#page-hs .thumbnail-container > a{
display:block !important; width:100% !important; height:auto !important;
}
#page-unes .jeg_thumb img,
#page-unes .thumbnail-holder img,
#page-unes .thumbnail-container img,
#page-hs .jeg_thumb img,
#page-hs .thumbnail-holder img,
#page-hs .thumbnail-container img{
width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important;
object-fit:contain !important; object-position:center center !important;
position:static !important; transform:none !important; display:block !important;
}
}
/* =============================================================================
C — PAGES REVUES (Une trimestrielle / Hors séries) — VERSION NETTOYÉE
Portée : #page-unes et #page-hs
Objectifs non techniques (lecture admin) :
1) Empêcher le rebond au-dessus du header quand on scrolle (confort).
2) Reprendre l’aspect “accueil” sur les grilles : pas d’ombres, pas d’overlays.
3) Ne jamais rogner les images de couvertures.
4) Encadrer les vignettes d’un fin cadre + traits internes (style maison).
5) Masquer tous les éléments JNews inutiles (titres, rubans, métas, extraits).
6) Avoir une grille stricte (anti-masonry) qui respecte l’ordre de tri (géré en PHP).
NB : tout le code lié au FILTRE ANNÉE a été RETIRÉ (pastilles, spans, debug).
========================================================================== */
/* --- GLOBAL (1 seule règle) : bloque le "rebond" au-dessus du header --- */
html, body {
overscroll-behavior-y: contain; /* empêche le bounce / overscroll */
scroll-behavior: smooth;
}
/* -------------------------------------------------------------------------
C.0 — Hygiène section (neutraliser héritages WPBakery / overlays)
------------------------------------------------------------------------- */
#page-unes [class*="vc_custom_"],
#page-hs [class*="vc_custom_"]{
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* -------------------------------------------------------------------------
C.1 à C.2 — (SUPPRIMÉS)
Ancien filtre "Année" (pastilles) + forçage z-index → retirés proprement.
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
C.3 — Rendu "accueil" sur la grille JNews (fonds / ombres OFF)
------------------------------------------------------------------------- */
#page-unes .jeg_thumb,
#page-unes .thumbnail-holder,
#page-unes .thumbnail-container,
#page-unes .box_wrap,
#page-unes .jeg_postblock_content,
#page-hs .jeg_thumb,
#page-hs .thumbnail-holder,
#page-hs .thumbnail-container,
#page-hs .box_wrap,
#page-hs .jeg_postblock_content{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
/* -------------------------------------------------------------------------
C.4 — Couper tous voiles / dégradés dans la vignette
------------------------------------------------------------------------- */
#page-unes .jeg_thumb::before,
#page-unes .jeg_thumb::after,
#page-unes [class*="overlay"],
#page-unes [class*="gradient"],
#page-hs .jeg_thumb::before,
#page-hs .jeg_thumb::after,
#page-hs [class*="overlay"],
#page-hs [class*="gradient"]{
opacity: 0 !important;
background: none !important;
content: none !important;
pointer-events: none !important;
}
/* -------------------------------------------------------------------------
C.5 — Image jamais rognée (conteneur → contain)
------------------------------------------------------------------------- */
#page-unes .jeg_thumb img,
#page-unes .thumbnail-holder img,
#page-unes .thumbnail-container img,
#page-hs .jeg_thumb img,
#page-hs .thumbnail-holder img,
#page-hs .thumbnail-container img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* -------------------------------------------------------------------------
C.6 — Cadre + 4 traits internes (mêmes variables que l’accueil)
------------------------------------------------------------------------- */
#page-unes, #page-hs{
--frame-color:#FFF;
--frame-width:2px;
--tb-color:#d9d9d9;
--tb-thickness:2px;
--inset-top:2px;
--inset-bottom:2px;
--lr-color:#d9d9d9;
--lr-thickness:2px;
--inset-left:2px;
--inset-right:2px;
}
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container),
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container){
position: relative !important;
}
#page-unes :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after,
#page-hs :is(.jeg_thumb,.thumbnail-holder,.thumbnail-container)::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
box-shadow: inset 0 0 0 var(--frame-width) var(--frame-color);
background:
linear-gradient(var(--tb-color),var(--tb-color)) top var(--inset-top) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(var(--tb-color),var(--tb-color)) bottom var(--inset-bottom) left 0 / 100% var(--tb-thickness) no-repeat,
linear-gradient(90deg,var(--lr-color),var(--lr-color)) left var(--inset-left) top 0 / var(--lr-thickness) 100% no-repeat,
linear-gradient(90deg,var(--lr-color),var(--lr-color)) right var(--inset-right) top 0 / var(--lr-thickness) 100% no-repeat;
}
/* -------------------------------------------------------------------------
C.7 — Pagination (on conserve ce qui existait historiquement)
------------------------------------------------------------------------- */
#page-unes .jeg_block_loadmore a,
#page-hs .jeg_block_loadmore a{
display:inline-block;
padding:.6em 1.2em;
border-radius:999px;
font-weight:700;
letter-spacing:.02em;
}
#page-unes .jeg_pagination .page-numbers,
#page-hs .jeg_pagination .page-numbers{
border-radius:.4rem;
padding:.4em .7em;
}
/* -------------------------------------------------------------------------
C.8 — (SUPPRIMÉ) Responsive des pastilles "Année" → plus nécessaire
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
C.9 — PAGES REVUES : même rendu que l’accueil (masquages)
------------------------------------------------------------------------- */
/* C.9.1 — Masquages JNews (rubans, titres, métas, extraits) */
#page-unes .jeg_post .jeg_cat,
#page-hs .jeg_post .jeg_cat,
#page-unes .jeg_thumb .jeg_post_category,
#page-hs .jeg_thumb .jeg_post_category,
#page-unes .jeg_thumb .jeg_badge,
#page-hs .jeg_thumb .jeg_badge,
#page-unes .jeg_thumb [class*="jeg_overlay"],
#page-hs .jeg_thumb [class*="jeg_overlay"],
#page-unes .jeg_post .jeg_post_title,
#page-hs .jeg_post .jeg_post_title,
#page-unes .jeg_post .jeg_post_meta,
#page-hs .jeg_post .jeg_post_meta,
#page-unes .jeg_post .jeg_meta_date,
#page-hs .jeg_post .jeg_meta_date,
#page-unes .jeg_post .jeg_meta_author,
#page-hs .jeg_post .jeg_meta_author,
#page-unes .jeg_post .jeg_post_excerpt,
#page-hs .jeg_post .jeg_post_excerpt{
display: none !important;
}
/* C.9.2 — Nettoyage des réserves sous la carte */
#page-unes .jeg_post .box_wrap,
#page-hs .jeg_post .box_wrap{ padding: 0 !important; }
#page-unes .jeg_post,
#page-hs .jeg_post{ margin-bottom: 0 !important; }
/* C.9.3 — Retirer les barres sociales / entêtes grises */
#page-unes .jeg_share_button_container,
#page-hs .jeg_share_button_container,
#page-unes .jeg_block_heading,
#page-hs .jeg_block_heading{ display: none !important; }
/* C.9.4 — Position du bandeau ACF (coin supérieur gauche) */
#page-unes .acf-badge,
#page-hs .acf-badge,
.scope-unes .acf-badge,
.scope-hs .acf-badge{
left: 10px !important;
right: auto !important;
top: 10px !important;
}
/* -------------------------------------------------------------------------
C.10 — (SUPPRIMÉ) Hover pastilles "Année"
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
C.11 — Grille stricte (anti-masonry) + respect de l’ordre trié
------------------------------------------------------------------------- */
#page-unes .jeg_postblock .jeg_posts,
#page-hs .jeg_postblock .jeg_posts{
display: flex !important;
flex-wrap: wrap !important;
gap: 30px; /* harmonise avec le module */
}
/* 4 colonnes desktop (≥1200px) */
@media (min-width: 1200px){
#page-unes .jeg_postblock .jeg_posts .jeg_post,
#page-hs .jeg_postblock .jeg_posts .jeg_post{
width: calc(25% - 30px);
}
}
/* 3 colonnes tablette large (≥900px) */
@media (min-width: 900px) and (max-width: 1199.98px){
#page-unes .jeg_postblock .jeg_posts .jeg_post,
#page-hs .jeg_postblock .jeg_posts .jeg_post{
width: calc(33.333% - 30px);
}
}
/* 2 colonnes tablette / mini-laptop (≥600px) */
@media (min-width: 600px) and (max-width: 899.98px){
#page-unes .jeg_postblock .jeg_posts .jeg_post,
#page-hs .jeg_postblock .jeg_posts .jeg_post{
width: calc(50% - 30px);
}
}
/* 1 colonne mobile (<600px) */
@media (max-width: 599.98px){
#page-unes .jeg_postblock .jeg_posts .jeg_post,
#page-hs .jeg_postblock .jeg_posts .jeg_post{
width: 100%;
}
}
/* Supprimer marges héritées par carte (évite doubles espaces) */
#page-unes .jeg_postblock .jeg_posts .jeg_post,
#page-hs .jeg_postblock .jeg_posts .jeg_post{
margin: 0 !important;
}
/* -------------------------------------------------------------------------
C.12 — Couleurs des pastilles anées en rouge
------------------------------------------------------------------------- */
/* ============================
Pastilles "Année" — état actif, focus et mobile
Contexte métier :
- Donner un feedback clair quand un filtre est sélectionné (.is-active)
- Garantir un repère visuel au clavier (accessibilité)
- Garder des boutons lisibles sur mobile (éviter le wrap excessif)
Pages concernées : #page-unes, #page-hs uniquement
============================ */
/* ⚙️ Réglages rapides (si besoin de changer la teinte) */
:root{
--rye-red: #d90b1b; /* rouge Ancrage principal */
--rye-red-dark: #b80f18; /* rouge un peu plus sombre (hover) */
}
/* ✅ ÉTAT ACTIF : pastille clairement "sélectionnée"
- Fond rouge + texte blanc = on voit immédiatement quel filtre est appliqué
- L’ombre douce renforce la lisibilité sur fonds clairs
*/
#page-unes .revue-year-filter .rye-btn.is-active,
#page-hs .revue-year-filter .rye-btn.is-active{
background: var(--rye-red);
border-color: var(--rye-red);
color: #fff;
box-shadow: 0 0 0 2px rgba(217,11,27,.15); /* lisibilité sans agressivité */
}
/* ♿ FOCUS CLAVIER : halo visible quand on tabule
- Indispensable pour l’accessibilité et l’édition rapide sans souris
*/
#page-unes .revue-year-filter .rye-btn:focus-visible,
#page-hs .revue-year-filter .rye-btn:focus-visible{
outline: 2px solid var(--rye-red);
outline-offset: 2px; /* espace entre halo et pastille */
}
/* 📱 MOBILE : réduire légèrement la taille pour éviter les retours à la ligne
- Garde des cibles confortables au doigt
*/
@media (max-width: 640px){
#page-unes .revue-year-filter .rye-btn,
#page-hs .revue-year-filter .rye-btn{
font-size: .92rem; /* 92% de la taille normale */
padding: .35em .6em; /* un poil plus compact */
}
}
/* C.13 — Anti-recouvrement du header (mobile + tablette)
Empêche le contenu de #page-unes / #page-hs de passer sous le header sticky.
Ajuste les 3 valeurs si ton header est plus haut/bas. */
:root{
--rye-header-mobile: 72px; /* ~ hauteur header mobile */
--rye-header-tablet: 88px; /* ~ hauteur header tablette */
--rye-header-desktop: 0px; /* si besoin d’un offset desktop, sinon 0 */
}
/* Mobile */
@media (max-width: 599.98px){
#page-unes, #page-hs{ padding-top: var(--rye-header-mobile); }
}
/* Tablette */
@media (min-width: 600px) and (max-width: 991.98px){
#page-unes, #page-hs{ padding-top: var(--rye-header-tablet); }
}
/* Desktop (laisse 0 si tout va bien sur grand écran) */
@media (min-width: 992px){
#page-unes, #page-hs{ padding-top: var(--rye-header-desktop); }
}
/* Bonus : si on “saute” vers une ancre sur ces pages, on compense le header */
#page-unes, #page-hs{ scroll-margin-top: var(--rye-header-mobile); }
@media (min-width: 600px){ #page-unes, #page-hs{ scroll-margin-top: var(--rye-header-tablet); } }
@media (min-width: 992px){ #page-unes, #page-hs{ scroll-margin-top: var(--rye-header-desktop); } }
/* =========================================================
===== CSS — D (REMPLACER) : Import Python — CSS GLOBAL ===
========================================================= */
/* =========================================================
D.1 — Neutralisation complète de la zone “featured”
Objectif : supprimer toute trace de la bande noire, du slash
ou des blocs publicitaires JNews au-dessus du titre.
========================================================= */
/* 1️⃣ Masquer tous les wrappers “featured” et blocs visuels */
body.single-post .jeg_featured,
body.single-post .jeg_featured_big,
body.single-post .jeg_featured .thumbnail-container,
body.single-post .jeg_featured .thumbnail,
body.single-post .jeg_single_thumb,
body.single-post .single_post_featured,
body.single-post .post-featured-image,
body.single-post .jnews_single .post-featured,
body.single-post .jnews_single .post-featured .thumbnail,
body.single-post .jnews_single .post-featured .thumbnail-container,
body.single-post .jeg_featured_big *,
body.single-post .jeg_ad.jeg_article_top_jnews_article_top_ads,
body.single-post .jeg_ad.jeg_article_top_jnews_article_top_ads .ads-wrapper {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 2️⃣ Supprimer les pseudo-éléments décoratifs (slashs, bandes, overlays) */
body.single-post .jeg_featured:before,
body.single-post .jeg_featured:after,
body.single-post .jeg_featured_big:before,
body.single-post .jeg_featured_big:after,
body.single-post .single_post_featured:before,
body.single-post .single_post_featured:after,
body.single-post .jnews_single .post-featured:before,
body.single-post .jnews_single .post-featured:after,
body.single-post .jeg_single_post > div:first-child::before,
body.single-post .jeg_single_post > div:first-child::after {
content: none !important;
display: none !important;
background: transparent !important;
}
/* 3️⃣ Neutraliser le premier bloc au-dessus du titre */
body.single-post .jeg_single_post > div:first-child {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 4️⃣ Sécurité : remonter le contenu juste sous le header général */
body.single-post .jeg_content.jeg_singlepage {
margin-top: 0 !important;
}
/* D.2 — Masquer métadonnées (fallback visuel) */
.single .jeg_meta_author,
.single .jeg_meta_date,
.single .post-meta,
.single .jeg_meta_author a{ display:none !important; }
/* D.3 — H1 (après passage en 2 lignes côté PHP/JS) */
.single .entry-header .entry-title,
.single .jeg_post_title{ margin-bottom:.6rem; line-height:1.15; }
/* D.4 — Vignettes internes (3 boutons, etc.) : pas d’arrondis/ombres */
.single .entry-content img,
.single .jeg_thumb img,
.single .thumbnail img{
border-radius:0 !important;
box-shadow:none !important;
}
/* D.5 — Sécurité ratios généraux */
.single .jeg_thumb,
.single .thumbnail{ height:auto !important; padding:0 !important; }
.single .jeg_thumb a:before,
.single .thumbnail a:before{ content:none !important; display:none !important; }
/* =========================================================
D.6 — Titre mobile / tablette
Objectif :
- Ligne 1 et Ligne 2 = même taille et style
- Interligne ultra serré (ajustable)
- Aligné à gauche et plein largeur
========================================================= */
@media (max-width: 992px) {
/* On neutralise les styles automatiques du thème */
.single-post .jeg_post_title {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
margin: 0;
padding: 0;
line-height: 1 !important;
}
/* Cible les deux lignes (avant et après le
) */
.single-post .jeg_post_title .hero-title-line1,
.single-post .jeg_post_title .hero-title-line2 {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
white-space: nowrap;
overflow: visible;
font-size: 6vw; /* 🔧 même taille pour les deux lignes */
line-height: 0.9; /* 🔧 ajuste ici : 0.9 = serré, 0.85 = ultra serré */
margin: 0;
padding: 0 3vw; /* petite marge interne horizontale */
}
/* Supprime la hauteur ajoutée par le
entre les deux */
.single-post .jeg_post_title br {
display: none !important;
}
/* Écrase aussi les marges internes héritées (bg-word, tight, etc.) */
.single-post .jeg_post_title span {
margin: 0 !important;
padding: 0 !important;
line-height: inherit !important;
}
/* Espacement précis entre les 2 lignes */
.single-post .hero-title-line1 + .hero-title-line2 {
margin-top: -0.1em; /* 🔧 diminue (ex: -0.15em) si tu veux coller encore plus */
}
}
/* =========================================================
D.7 — Overlay transparent anti "Enregistrer l'image sous" sur l'aperçu des revues
========================================================= */
.single-post .wp-block-image {
position: relative;
}
/* couche transparente au-dessus de l'image */
.single-post .wp-block-image::after {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: transparent;
z-index: 2;
}
/* optionnel : on désactive les événements directement sur l'image */
.single-post .wp-block-image img {
pointer-events: none;
}
/* D.8 — Masquer le bloc auteur en bas des articles */
/* Bloc auteur JNews en bas de l’article */
body.single-post .jeg_authorbox,
body.single-post .jeg_authorbox_wrapper,
body.single-post .jeg_authorbox .author-box,
body.single-post .jeg_authorbox .author-info,
body.single-post .jeg_authorbox .author-name,
body.single-post .jeg_authorbox .author-meta {
display: none !important;
visibility: hidden !important;
}
/* Meta auteur/infos éventuellement répétées sous le contenu */
body.single-post .jeg_meta_author,
body.single-post .jeg_post_meta,
body.single-post .jeg_post_meta .meta_author,
body.single-post .jeg_post_meta .author {
display: none !important;
visibility: hidden !important;
}
/* =======================================================
E.1 — Aperçu 2 pages verrouillé
(DESKTOP + MOBILE)
======================================================= */
/* ---------- DESKTOP ---------- */
/* Page 1 */
.revue-preview-page1 img {
display: block;
width: 100%;
height: auto;
}
.revue-preview-page1 {
margin-bottom: 2.5rem; /* espace entre P1 et P2 */
}
/* Page 2 */
.revue-preview-page2-locked {
position: relative;
overflow: hidden;
}
.revue-preview-page2-locked img {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
/* Dégradé desktop */
.revue-preview-page2-locked::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 62%,
rgba(255, 255, 255, 1) 100%
);
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
/* Dégradé plus tôt pour CTA mobile */
.revue-preview-page2-locked::after {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0.7) 60%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 1) 100%
);
}
}
/* =======================================================
E.2 — Bloc CTA sur la zone blanche (DESKTOP)
- Carte grise avec ombre
- Positionnée sous la 2e page (remontée par margin-top négatif)
======================================================= */
.revue-preview-cta-block{
position: relative;
z-index: 3;
margin-top: -18rem; /* ← ajuste la remontée sous le dégradé */
padding: 1.8rem 1.6rem 2rem;
width: min(90%, 720px);
margin-inline: auto;
background: #f7f7f7; /* gris très léger */
color: #111111;
text-align: center;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* Texte d’information */
.revue-preview-cta-text{
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.4rem;
}
/* “Déjà un compte ? …” */
.revue-preview-cta-login{
margin-top: 1rem;
font-size: 0.9rem;
color: #666666;
}
.revue-preview-cta-login a{
color: #111111;
font-weight: 600;
text-decoration: underline;
}
.revue-preview-cta-login a:hover{ color:#000000; }
/* Pile de boutons */
.revue-preview-cta-buttons{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem; /* ← espace vertical entre boutons */
}
/* =======================================================
E.2 — Boutons du CTA (NOUVEAU STYLE)
- On applique ton style “.button” à nos liens .cta-main-button
- Compatible Texte
ou
======================================================= */
/* Base bouton (a & button) */
.revue-preview-cta-buttons .cta-main-button,
.revue-preview-cta-buttons .button{
display: flex;
justify-content: center;
align-items: center;
padding: 10px 15px; /* ← taille bouton */
gap: 15px;
background-color: #181717;
outline: 3px #181717 solid;
outline-offset: -3px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: 400ms;
text-decoration: none;
/* blocage largeur */
width: 100%;
max-width: 320px;
/* typo par défaut si pas de */
color: #ffffff;
font-weight: 700;
font-size: 1em;
}
/* Variante texte explicite (si existe) */
.revue-preview-cta-buttons .cta-main-button .text,
.revue-preview-cta-buttons .button .text{
color: #ffffff;
font-weight: 700;
font-size: 1em;
transition: 400ms;
}
/* SVG dans le bouton (optionnel) */
.revue-preview-cta-buttons .cta-main-button svg path,
.revue-preview-cta-buttons .button svg path{
transition: 400ms;
}
/* Hover */
.revue-preview-cta-buttons .cta-main-button:hover,
.revue-preview-cta-buttons .button:hover{
background-color: transparent;
color: #181717; /* cas sans .text */
}
.revue-preview-cta-buttons .cta-main-button:hover .text,
.revue-preview-cta-buttons .button:hover .text{
color: #181717; /* cas avec .text */
}
.revue-preview-cta-buttons .cta-main-button:hover svg path,
.revue-preview-cta-buttons .button:hover svg path{
fill: #181717;
}
/* =======================================================
E.2 — Responsive (MOBILE ≤ 768px)
- Bloc un peu moins remonté
- Largeur et paddings adaptés
======================================================= */
@media (max-width:768px){
.revue-preview-cta-block{
margin-top: -8rem; /* ← ajuste la remontée mobile */
width: 94%;
padding: 1.6rem 1.2rem 1.9rem;
margin-bottom: 2rem; /* respiration sous le bloc */
}
.revue-preview-cta-buttons .cta-main-button,
.revue-preview-cta-buttons .button{
max-width: 100%;
font-size: 15px;
padding: 13px 18px;
}
.revue-preview-cta-login{ font-size: .85rem; }
}
/* Bouton connexion header mobile JNews */
.jeg_login_button {
display: inline-block;
background-color: #000; /* couleur fond */
color: #fff !important;
padding: 8px 14px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
}
.jeg_login_button:hover {
background-color: #e74c3c; /* couleur au survol */
}
/* ============================================================
F.1 — Page "Mon compte" : CTA Connexion / Création de compte
Version corrigée (texte toujours lisible après clic)
------------------------------------------------------------
HTML cible :
Accédez à votre compte
...
============================================================ */
/* Bloc global : carte blanche centrée avec ombre douce */
.account-cta-block {
max-width: 720px;
margin: 2.5rem auto;
padding: 1.75rem 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,.06);
text-align: center;
}
/* Titre et texte d’intro */
.account-cta-title {
margin: 0 0 .75rem;
font-size: 1.6rem;
}
.account-cta-text {
margin: 0 0 1.6rem;
font-size: 1rem;
line-height: 1.55;
}
/* Conteneur des deux boutons : centrés + espacés */
.account-cta-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem; /* espace horizontal/vertical entre les boutons */
}
/* Boutons : style par défaut (fond noir, texte blanc) */
.account-cta-btn,
.account-cta-btn-alt {
display: inline-block;
min-width: 190px;
padding: .85em 1.4em;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 8px;
border: 2px solid #111;
background: #111;
color: #fff;
cursor: pointer;
line-height: 1;
transition: all .18s ease;
}
/* IMPORTANT : états "link / visited / focus" → on garde le contraste blanc sur noir
pour éviter le cas "noir sur noir" après clic. */
.account-cta-btn:link,
.account-cta-btn:visited,
.account-cta-btn:focus,
.account-cta-btn-alt:link,
.account-cta-btn-alt:visited,
.account-cta-btn-alt:focus {
background: #111;
color: #fff;
border-color: #111;
}
/* Hover : inversion (fond blanc, texte noir) pour les DEUX boutons */
.account-cta-btn:hover,
.account-cta-btn-alt:hover {
background: #fff;
color: #111;
border-color: #111;
transform: translateY(-1px);
}
/* Active (au moment du clic) : léger retour, on garde le style hover */
.account-cta-btn:active,
.account-cta-btn-alt:active {
background: #fff;
color: #111;
border-color: #111;
transform: translateY(0);
}
/* Mobile : on empile les boutons et on élargit la zone de clic */
@media (max-width: 767px) {
.account-cta-block {
margin: 1.8rem 1rem;
padding: 1.4rem 1.1rem;
}
.account-cta-title {
font-size: 1.4rem;
}
.account-cta-text {
font-size: 1.02rem;
}
.account-cta-buttons {
flex-direction: column;
gap: .75rem;
}
.account-cta-btn,
.account-cta-btn-alt {
width: 100%;
min-width: 0;
font-size: 1.03rem;
padding: 1rem 1.3rem;
}
}